/* IBERIONI JOKER V143 — VELVET ROYALE. Isolated CSS-only skin; no game engine changes.
   Critical: cards in #hand-row are live buttons generated by existing JS, not a static illustration. */
:root{--jv-bg:#100d17;--jv-velvet:#6e142f;--jv-velvet-dark:#330b20;--jv-gold:#e8c17a;--jv-ivory:#fff1d5;--jv-text:#f8e9d4}
body{background:radial-gradient(ellipse at 50% -15%,#4d2037 0%,#1a1022 40%,#080c12 100%)!important;color:var(--jv-text)!important}
.jw{max-width:780px!important;padding-top:72px!important;padding-bottom:45px!important}
.joker-hero{border:1px solid #b38c54!important;border-radius:23px!important;overflow:hidden!important;background:linear-gradient(145deg,#62162e,#240f26 62%,#101b23)!important;box-shadow:inset 0 1px #f5d4a122,0 15px 36px #0008!important}
.joker-hero-shade{background:radial-gradient(circle at 50% 20%,#e0a54b22,transparent 70%)!important}
.joker-title{font-family:Georgia,'Times New Roman',serif!important;color:#ffe3a1!important;letter-spacing:.09em!important;text-shadow:0 3px 14px #0009!important}
.joker-crown{color:#e9c47f!important;filter:drop-shadow(0 3px 5px #0007)!important}
#joker-tagline{color:#dfcdb9!important}
.jw .panel,.game-consent-bar,#game-area{background:linear-gradient(145deg,#2a1b2bdc,#101820f5)!important;border:1px solid #af895b8c!important;border-radius:19px!important;box-shadow:0 12px 32px #0007,inset 0 1px #fff1!important}
.jw .panel{padding:19px!important}
.jw .setup-btn{background:linear-gradient(135deg,#42243b,#1a1d2b)!important;border:1px solid #bb925e9e!important;border-radius:14px!important;color:#fff0d6!important;box-shadow:inset 0 1px #fff2,0 5px 13px #0005!important;font-weight:800!important}
.jw .setup-btn.active,.jw .setup-btn:hover{background:linear-gradient(130deg,#ffedb8,#b98949)!important;color:#29171d!important}
.jw .btn,.jw .bid-btn{border:1px solid #b8955d99!important;background:linear-gradient(145deg,#492339,#1b1a28)!important;color:#f9e9cb!important;border-radius:12px!important;box-shadow:inset 0 1px #ffffff1c,0 5px 13px #0005!important;font-weight:800!important}
.jw .btn-gold,#start-btn,.jw .bid-btn.active{background:linear-gradient(135deg,#ffe9b1,#bc8d49)!important;color:#291923!important;border-color:#f9daa0!important}
.jw input,.jw select{background:#1c1724!important;color:#fff0d6!important;border:1px solid #b48d5977!important;border-radius:10px!important}
.jw button:focus-visible,.jw input:focus-visible,.jw select:focus-visible,.hand-card:focus-visible{outline:3px solid #ffe4a0!important;outline-offset:3px!important}
#game-area{padding:13px!important}
.round-info,#round-info{color:#f7db9e!important;font-weight:800!important;letter-spacing:.015em}
#scoresheet-btn{background:linear-gradient(135deg,#35253b,#161923)!important;color:#ffe0a0!important}
.poker-table{
 position:relative!important;isolation:isolate!important;overflow:visible!important;
 min-height:415px!important;border:11px solid #7b4c30!important;border-radius:47%/31%!important;
 background:radial-gradient(ellipse at 49% 37%,#992c49 0%,#6b1735 42%,#3b0b25 78%,#250a1d 100%)!important;
 box-shadow:0 0 0 3px #d4a66b,0 0 0 8px #291a1a,0 22px 46px #000c,inset 0 0 0 4px #dfb97955,inset 0 0 60px #160615aa!important
}
.poker-table::after{content:"";position:absolute;inset:12px;border:1px solid #f2cb8759;border-radius:47%/31%;pointer-events:none;z-index:0}
.poker-table::before{content:"♛ IBERIONI ♛";font-family:Georgia,serif!important;font-size:clamp(15px,3.5vw,26px)!important;letter-spacing:.12em!important;color:#e8bf7b28!important;top:51%!important;z-index:0}
.seat{z-index:3!important;box-sizing:border-box!important;background:linear-gradient(155deg,#30243aef,#121a26f5)!important;border:1px solid #b9935d9e!important;border-radius:13px!important;box-shadow:0 6px 15px #0009,inset 0 1px #ffffff1a!important;color:#fff0d7!important;overflow:visible!important}
.seat-bottom{background:linear-gradient(155deg,#563047f5,#18222af5)!important;border-color:#efc47c!important}
.seat.active-turn{outline:2px solid #ffe09b!important;outline-offset:1px!important;box-shadow:0 0 0 4px #e4b85c35,0 8px 21px #0008!important}
.seat .ib-avatar{border:2px solid #e7be77!important;box-shadow:0 2px 10px #0009!important}
.seat .ib-player-name,.seat .seat-name{color:#ffe5a7!important;font-weight:900!important}
.seat .seat-flag{background:#170f1c!important;border:1px solid #a8815366!important;color:#f5e1bd!important}
.premium-state.alive{background:#123b31!important;color:#9af5c5!important;border-color:#4ebd8a!important}
.premium-state.spoiled{background:#4c1926!important;color:#ffc0c0!important;border-color:#d27a85!important}
.table-area{z-index:2!important;pointer-events:none}
.trick-card,.hand-card,.peek-card{box-sizing:border-box!important;border:1px solid #d8c9a8!important;border-radius:8px!important;background:linear-gradient(150deg,#fffefa,#f1e5cd)!important;color:#18202b!important;box-shadow:0 5px 10px #0008,inset 0 0 0 1px #ffffffd9!important}
.trick-card.suit-red,.hand-card.suit-red{color:#bb2438!important}
.trick-card.suit-black,.hand-card.suit-black{color:#1a2530!important}
.joker-card{background:linear-gradient(140deg,#6b32a6,#dd3f69 45%,#edaa42)!important;color:#fff!important;border:2px solid #f4cf83!important}
.trick-card.last-played{outline:2px solid #f4cf83!important}
.hand-row{
 display:flex!important;flex-wrap:nowrap!important;align-items:flex-end!important;justify-content:center!important;
 gap:0!important;overflow:visible!important;min-height:108px!important;padding:19px 12px 13px!important;
 background:linear-gradient(180deg,#3d1830,#1a1424)!important;border:1px solid #b18a5880!important;border-radius:15px!important;
 box-shadow:inset 0 1px #ffffff1c,0 8px 20px #0005!important
}
.hand-card{flex:0 1 49px!important;min-width:0!important;width:49px!important;height:77px!important;margin-left:-6px!important;position:relative!important;cursor:pointer!important;touch-action:manipulation!important;transform-origin:50% 95%!important;transition:transform .15s ease,box-shadow .15s ease!important;font-size:18px!important}
.hand-card:first-child{margin-left:0!important}
.hand-card:nth-child(6n + 1){transform:rotate(-4deg) translateY(2px)}
.hand-card:nth-child(6n + 2){transform:rotate(-2deg)}
.hand-card:nth-child(6n + 3){transform:rotate(0deg) translateY(-2px)}
.hand-card:nth-child(6n + 4){transform:rotate(2deg) translateY(-2px)}
.hand-card:nth-child(6n + 5){transform:rotate(4deg)}
.hand-card:nth-child(6n){transform:rotate(5deg) translateY(2px)}
.hand-card:not(.disabled):hover,.hand-card:not(.disabled):focus-visible{transform:translateY(-15px) rotate(0)!important;z-index:12!important;box-shadow:0 12px 25px #000a,0 0 0 2px #f5d288!important}
.hand-card.disabled{opacity:.45!important;filter:grayscale(.3)!important}
.bid-row{padding:10px 6px!important;background:#201724!important;border:1px solid #ab875578!important;border-radius:13px!important}
.bid-btn{min-width:40px!important;min-height:44px!important}
.bid-btn:disabled{opacity:.28!important}
.status-bar{background:#211a29!important;border:1px solid #ae89577a!important;border-radius:12px!important;color:#f4ddaf!important;font-weight:650!important}
.social-tip{color:#c8b5b4!important;font-size:11px!important}
.overlay{background:#080913d9!important;backdrop-filter:blur(5px)!important}
.overlay-box{background:linear-gradient(145deg,#fbf2df,#e7d7b9)!important;color:#241823!important;border:3px solid #b78c50!important;border-radius:18px!important;box-shadow:0 24px 70px #000b!important}
.overlay-box .btn{color:#ffe7ad!important}
#scoresheet-table{color:#251d25!important}
@media(max-width:600px){
 .jw{padding:70px 7px 35px!important}
 #game-area{padding:7px!important}
 .poker-table{min-height:352px!important;border-width:6px!important;border-radius:42%/25%!important}
 .poker-table::after{inset:6px!important}
 .seat{padding:4px 5px!important;max-width:90px!important;border-radius:10px!important}
 .seat-top{top:4px!important}.seat-bottom{bottom:4px!important}
 .seat-left{left:3px!important}.seat-right{right:3px!important}
 .seat .ib-player-name{font-size:9px!important;max-width:55px!important}
 .seat .ib-avatar{width:25px!important;height:25px!important;font-size:16px!important}
 .seat .seat-flag{font-size:8px!important;padding:1px 2px!important}
 .seat .ib-player-sub{display:none!important}
 .table-area{width:62%!important}
 .trick-card{width:34px!important;height:49px!important;margin:2px!important}
 .hand-row{min-height:98px!important;padding:17px 7px 10px!important}
 .hand-card{flex:0 1 42px!important;width:42px!important;height:68px!important;margin-left:-7px!important;font-size:15px!important}
 .bid-btn{min-width:38px!important;min-height:43px!important}
}
@media(max-width:380px){
 .poker-table{min-height:333px!important}
 .seat{max-width:75px!important;padding:3px!important}
 .seat .ib-avatar{width:21px!important;height:21px!important}
 .seat .ib-player-name{max-width:42px!important;font-size:8px!important}
 .table-area{width:59%!important}
 .trick-card{width:30px!important;height:44px!important}
 .hand-card{flex-basis:35px!important;width:35px!important;height:61px!important;margin-left:-8px!important;font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){.hand-card,.seat,.bid-btn{transition:none!important;animation:none!important}}

/* Show only card counts and backs for opponents, never hidden identities. */
.opponent-hand{position:absolute;display:flex;justify-content:center;pointer-events:none;gap:0;width:max-content;max-width:none;z-index:2}
.opponent-card-back{display:block;width:27px;height:39px;flex:0 0 27px;background:url('../images/joker/card-back-royal.svg') center/100% 100% no-repeat;border:1px solid #dfbc78;border-radius:4px;box-sizing:border-box;margin-left:-18px;box-shadow:0 1px 2px #0008}
.opponent-card-back:first-child{margin-left:0}
.seat-top .opponent-hand{top:calc(100% + 7px);left:50%;transform:translateX(-50%)}
.seat-left .opponent-hand{left:calc(100% + 8px);top:50%;transform:translate(-25%,-50%) rotate(90deg)}
.seat-right .opponent-hand{right:calc(100% + 8px);top:50%;transform:translate(25%,-50%) rotate(-90deg)}
@media(max-width:600px){.opponent-card-back{width:20px;height:29px;flex-basis:20px;margin-left:-15px}.seat-left .opponent-hand{left:calc(100% + 5px)}.seat-right .opponent-hand{right:calc(100% + 5px)}}

/* Approved straight hand: same baseline at rest, on tap, and on hover. */
.hand-row{align-items:center!important}
.hand-row .hand-card,.hand-row .hand-card:hover,.hand-row .hand-card:focus-visible{transform:none!important;transition:box-shadow .15s ease!important}

.joker-round-header{align-items:flex-start!important}
#round-info{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;text-align:left;flex:1}
.round-main{display:block}.round-detail{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#table-area{z-index:5!important;width:50%!important;max-width:220px;white-space:nowrap}
#table-area .trick-card{width:36px!important;height:50px!important;margin:2px!important;font-size:14px!important;vertical-align:middle}
@media(max-width:600px){#table-area{width:49%!important;max-width:172px;min-height:70px}#table-area .trick-card{width:29px!important;height:42px!important;margin:1px!important;font-size:12px!important}.round-detail{font-size:10px}.joker-round-header #scoresheet-btn{padding:5px 7px!important}}
@media(max-width:380px){#table-area .trick-card{width:26px!important;height:38px!important;font-size:11px!important}}
