/* Standalone game UI; no hub or app stylesheet is required. */
/* Paint hand rings over the card border, inside the scrollable card bounds. */
.own-hand .hand-card:is(.is-playable,.is-selected){outline-offset:calc(-1 * var(--interaction-ring-width,3px))!important;}
:where(.game-scene,.own-hand,.opponent-hands,.scene-actions,.scene-meta,.piece-back),:where(.game-scene,.own-hand,.opponent-hands,.scene-actions,.scene-meta) *,:where(.game-scene,.own-hand,.opponent-hands,.scene-actions,.scene-meta) *::before,:where(.game-scene,.own-hand,.opponent-hands,.scene-actions,.scene-meta) *::after{box-sizing:border-box;}
:where(.game-scene,.own-hand,.opponent-hands,.scene-actions) button{font-family:inherit;}
.game-scene{min-height:100%;min-width:0;width:100%;padding:var(--size-space-20_0,20px) var(--size-space-24_0,24px) var(--size-space-16_0,16px);display:flex;flex-direction:column;gap:var(--size-space-15_0,16px);color:var(--color-text-primary,#2b4537);}.opponent-hands{display:flex;justify-content:center;gap:var(--size-space-32_0,32px);flex-shrink:0;}.opponent-hand{text-align:center;min-width:0;}.opponent-label{font-size:var(--size-type-11_0,10px);color:var(--color-text-secondary,#6f7f64);display:block;margin-bottom:var(--size-space-8_0,8px);}.opponent-label b{display:inline-grid;place-items:center;min-width:var(--size-length-19_0,20px);height:var(--size-length-19_0,20px);background:var(--color-surface-raised,#d3ddc2);border-radius:var(--size-radius-6_0,4px);margin-left:var(--size-space-4_0,4px);font-size:var(--size-type-10_0,10px);color:#385a44;}.mini-hand{display:flex;justify-content:center;height:var(--size-length-48_0,48px);padding:0 var(--size-space-10_0,8px);}.mini-hand>*{width:var(--size-length-33_0,32px)!important;height:var(--size-length-46_0,44px)!important;min-width:var(--size-length-33_0,32px)!important;min-height:var(--size-length-46_0,44px)!important;margin-left:calc(-1 * var(--size-space-10_0,8px))!important;pointer-events:none;border-radius:var(--size-radius-7_0,8px)!important;border-width:var(--size-border-3_0,2px)!important;box-shadow:0 3px 0 #263d2e20!important;}.mini-hand>*:first-child{margin-left:0!important;}.mini-hand .face-value{font-size:20px!important}.mini-hand .card-corner{font-size:var(--size-type-9_0,10px)!important;top:2px!important;left:3px!important;}.mini-hand .card-corner.bottom{top:auto!important;left:auto!important;bottom:2px!important;right:3px!important;}.mini-hand .card-suit{font-size:var(--size-type-19_0,18px)!important;}.mini-hand .piece-back:not(.art-card)>span{font-size:var(--size-type-22_0,20px);}.piece-back{display:grid;place-items:center;width:var(--size-length-69_0,68px);height:var(--size-length-99_0,100px);flex-shrink:0;background:var(--color-surface-raised,#3d6853);border:var(--size-border-5_0,4px) solid var(--color-border-subtle,#fffdf3);border-radius:var(--size-radius-12_0,12px);box-shadow:0 5px 0 #b6c6a8;position:relative;overflow:hidden;}.piece-back:before{content:"";position:absolute;inset:5px;border:var(--size-border-1_0,1px) solid #b7c9a977;border-radius:var(--size-radius-5_0,4px);}.piece-back span{color:#dce8c8;font-size:var(--size-type-37_0,40px);line-height:1;}.own-hand{margin-top:auto;min-width:0;width:100%;flex-shrink:0;}.hand-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--size-space-8_0,8px);max-width:var(--size-length-780_0,768px);margin:0 auto var(--size-space-8_0,8px);font-size:var(--size-type-10_0,10px);color:var(--color-text-secondary,#829075);}.hand-heading strong{color:var(--color-text-primary,#475f40);font-size:var(--size-type-12_0,12px);}.hand-heading strong span{font-weight:500;color:var(--color-text-secondary,#80916f);margin-left:var(--size-space-4_0,4px);}.hand-track{display:flex;align-items:center;gap:var(--size-space-10_0,8px);overflow:auto;overscroll-behavior-x:contain;touch-action:pan-x;padding:var(--size-space-12_0,12px) var(--size-space-8_0,8px) var(--size-space-13_0,12px);min-height:var(--size-length-124_0,124px);max-width:var(--size-length-820_0,800px);margin:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#acbd94 transparent;}.hand-track>*{flex-shrink:0;scroll-snap-align:start;}.hand-track:before,.hand-track:after{content:"";flex:1;min-width:0;}.hand-track .is-playable{outline:var(--size-border-2_0,2px) solid #54835e;outline-offset:3px;}.hand-track .is-selected{transform:translateY(-7px);outline:var(--size-border-3_0,2px) solid #d39739;outline-offset:3px;}.hand-track button{transition:transform var(--ui-duration-control,150ms),outline-color var(--ui-duration-control,150ms);}.hand-track button:hover{transform:translateY(-6px);}.scene-actions{display:flex;align-items:center;justify-content:center;gap:var(--size-space-9_0,8px);flex-wrap:wrap;flex-shrink:0;min-height:var(--size-length-42_0,40px);}.scene-button{border:var(--size-border-1_0,1px) solid var(--color-border-subtle,#bac9a6);background:var(--color-surface-game,#fffcf0);color:var(--color-text-primary,#36573e);border-radius:var(--size-radius-12_0,12px);padding:var(--size-space-11_0,12px) var(--size-space-16_0,16px);min-height:var(--size-length-44_0,44px);font-size:var(--size-type-12_0,12px);font-weight:750;box-shadow:0 3px 0 #c3d1b3;cursor:pointer;display:inline-flex;gap:var(--size-space-7_0,8px);align-items:center;justify-content:center;}.scene-button:hover{background:var(--color-surface-game,#f4f5df);}.scene-button:active{transform:translateY(2px);box-shadow:0 1px 0 #b7c6a5;}.scene-button.primary{background:var(--color-action-primary,#365f4a);border-color:var(--color-border-subtle,#365f4a);color:var(--color-action-on-primary,white);box-shadow:0 3px 0 #213f31;}.scene-hint{font-size:var(--size-type-11_0,10px);line-height:1.5;color:var(--color-text-secondary,#78866e);text-align:center;margin:0;}.empty-hand{font-size:var(--size-type-12_0,12px);color:var(--color-text-secondary,#738765);padding:var(--size-space-20_0,20px);}.table-chip{display:inline-flex;align-items:center;gap:var(--size-space-7_0,8px);border:var(--size-border-1_0,1px) solid var(--color-border-subtle,#c5d1b5);background:var(--color-surface-raised,#e0e7d0);padding:var(--size-space-7_0,8px) var(--size-space-10_0,8px);border-radius:var(--size-radius-10_0,8px);font-size:var(--size-type-10_0,10px);color:var(--color-text-primary,#5f7753);}.scene-meta{display:flex;justify-content:center;gap:var(--size-space-8_0,8px);flex-wrap:wrap;flex-shrink:0;}.stock-button{border:0;background:none;padding:var(--size-space-6_0,4px);display:flex;flex-direction:column;align-items:center;gap:var(--size-space-12_0,12px);position:relative;cursor:pointer;}.stock-button:disabled{cursor:default;}.stock-button>small{font-size:var(--size-type-10_0,10px);color:var(--color-text-secondary,#70855f);}.stock-button:not(:disabled) .piece-back{outline:var(--size-border-2_0,2px) solid #698651;outline-offset:4px;}.piece-count{display:inline-block;flex:none;min-width:var(--size-length-20_0,20px);box-sizing:border-box;text-align:center;white-space:nowrap;font:800 var(--size-type-10_0,10px)/1.2 system-ui,sans-serif;background:var(--color-counter-face,#fff9e8);color:var(--color-counter-mark,#45633d);border-radius:var(--size-radius-8_0,8px);padding:var(--size-space-3_0,2px) var(--size-space-7_0,8px);box-shadow:0 2px 0 #becaa8;pointer-events:none;}.piece-count.is-corner{zoom:calc(1 / var(--field-scale,1));position:absolute;left:0;top:0;z-index:3;}.game-cover svg text{font-family:inherit;font-weight:850;}.game-scene button:focus-visible{outline:var(--size-border-3_0,2px) solid #365f4a;outline-offset:4px;}.game-scene svg{overflow:visible;}.player-color-0{--player:#3e775d;}.player-color-1{--player:#e7805d;}.player-color-2{--player:#6e91b0;}.player-color-3{--player:#d8b853;}@media(max-width:760px){.game-scene{padding:var(--size-space-14_0,12px) var(--size-space-12_0,12px) var(--size-space-10_0,8px);gap:var(--size-space-10_0,8px);}.opponent-hands{gap:var(--size-space-18_0,16px);}.mini-hand{height:var(--size-length-39_0,40px);padding:0 var(--size-space-7_0,8px);}.mini-hand>*{width:var(--size-length-27_0,28px)!important;min-width:var(--size-length-27_0,28px)!important;height:var(--size-length-38_0,36px)!important;min-height:var(--size-length-38_0,36px)!important;margin-left:calc(-1 * var(--size-space-12_0,12px))!important;}.opponent-label{margin-bottom:var(--size-space-5_0,4px);font-size:var(--size-type-10_0,10px);}.opponent-label b{height:var(--size-length-16_0,16px);min-width:var(--size-length-16_0,16px);font-size:var(--size-type-9_0,10px);}.hand-heading{font-size:var(--size-type-9_0,10px);margin-bottom:var(--size-space-3_0,2px);}.hand-heading strong{font-size:var(--size-type-11_0,10px);}.hand-track{gap:var(--size-space-10_0,8px);padding:var(--size-space-12_0,12px) var(--size-space-6_0,4px);min-height:var(--size-length-113_0,112px);max-width:100%;}.scene-actions{gap:var(--size-space-7_0,8px);min-height:var(--size-length-42_0,40px);}.scene-button{font-size:var(--size-type-11_0,10px);padding:var(--size-space-10_0,8px) var(--size-space-13_0,12px);min-height:var(--size-length-42_0,40px);}.scene-hint{font-size:var(--size-type-10_0,10px);}.piece-back{width:var(--size-length-61_0,60px);height:var(--size-length-88_0,88px);border-width:var(--size-border-4_0,4px);}.scene-meta{gap:var(--size-space-6_0,4px);}.table-chip{font-size:var(--size-type-9_0,10px);padding:var(--size-space-6_0,4px) var(--size-space-8_0,8px);}}@media(max-height:710px) and (orientation:portrait){.game-scene{gap:var(--size-space-7_0,8px);padding-top:var(--size-space-10_0,8px);}.mini-hand{height:var(--size-length-27_0,28px);overflow:hidden;}.opponent-label{margin-bottom:var(--size-space-3_0,2px);}.hand-track{min-height:var(--size-length-105_0,104px);padding-top:var(--size-space-8_0,8px);padding-bottom:var(--size-space-8_0,8px);}.hand-heading>span{display:none;}.scene-actions{min-height:var(--size-length-39_0,40px);}.scene-button{min-height:var(--size-length-39_0,40px);padding:var(--size-space-8_0,8px) var(--size-space-11_0,12px);}}@media(prefers-reduced-motion:reduce){.hand-track button{transition:none;}.is-selected{transform:none!important;}}

.hand-card{touch-action:pan-x;}

/* Closed hands use anonymous backs; every public card keeps a visible corner. */
.opponent-hands{min-width:0;width:100%;gap:clamp(var(--size-space-8_0,8px),3vw,var(--size-space-28_0,24px));}
.opponent-hand{flex:1;max-width:var(--size-length-190_0,192px);overflow:hidden;}
.opponent-label{display:flex;align-items:center;justify-content:center;gap:var(--size-space-3_0,2px);min-width:0;}
.opponent-label>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.opponent-label b{flex-shrink:0;}
.mini-hand{max-width:100%;overflow:hidden;justify-content:center;}
.opponent-hand.is-open-hand{--public-card-width:30px;--public-card-height:42px;--public-peek:16px;--public-row-step:16px;--public-reserve:58px;flex:var(--open-hand-weight,6) 1 0px;min-width:var(--size-length-48_0,48px);max-width:none;overflow:visible;}
.mini-hand.is-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--public-peek),1fr));grid-auto-rows:var(--public-row-step);align-content:start;justify-items:start;gap:0;width:100%;max-width:min(100%,calc((var(--open-hand-count) - 1) * var(--public-peek) + var(--public-card-width)));height:auto;min-height:var(--public-reserve);margin-inline:auto;padding:var(--size-space-4_0,4px) calc(var(--public-card-width) - var(--public-peek)) calc(var(--public-card-height) - var(--public-row-step)) 0;overflow:visible;touch-action:auto;isolation:isolate;}
.mini-hand.is-open>.public-card{position:relative;display:block;width:var(--public-card-width)!important;min-width:var(--public-card-width)!important;height:var(--public-card-height)!important;min-height:var(--public-card-height)!important;margin:0!important;border:0!important;border-radius:var(--size-radius-5_0,4px)!important;box-shadow:none!important;pointer-events:auto;z-index:1;}
.mini-hand.is-open>.public-card>button{width:100%!important;min-width:0!important;max-width:none;height:100%!important;min-height:0!important;margin:0!important;border-width:var(--size-border-2_0,2px)!important;border-radius:var(--size-radius-5_0,4px)!important;pointer-events:none;box-shadow:0 2px 0 #263d2e20!important;}
.mini-hand.is-open .card-corner{font-size:var(--size-type-9_0,10px)!important;top:2px!important;left:2px!important;letter-spacing:-.35px;}
.mini-hand.is-open .card-corner.bottom{top:auto!important;left:auto!important;right:2px!important;bottom:2px!important;}
.public-card-caption{position:absolute;top:3px;left:3px;z-index:2;font-size:var(--size-type-9_0,10px);font-weight:850;line-height:var(--size-line-11_0,12px);white-space:nowrap;background:var(--color-surface-panel,#fffcf2);color:var(--color-text-primary,#365f4c);border-radius:var(--size-radius-2_0,2px);padding:0 var(--size-space-1_0,2px);pointer-events:none;}
@media(hover:hover){.mini-hand.is-open>.public-card:hover{z-index:50;transform:translateY(-4px);}}
.mini-hand.is-open:focus-visible{outline:var(--size-border-2_0,2px) solid #456e48;outline-offset:-2px;}
.hand-heading strong{flex-shrink:0;white-space:nowrap;}
.hand-heading>span{text-align:right;}
.game-scene .hand-card:disabled,.mini-hand button:disabled{opacity:1;cursor:default;}
.hand-track .hand-card:disabled:hover{transform:none;}
.game-scene .scene-button{min-height:var(--size-length-44_0,44px);}
.hand-track{overflow-y:hidden;}
@media(max-width:760px){.opponent-hand{max-width:var(--size-length-160_0,160px);}.opponent-hand.is-open-hand{--public-card-width:28px;--public-card-height:40px;max-width:none;}}

/* A fixed-height row compresses to readable corners, then scrolls independently. */
.hand-track.is-fan{--fan-card-width:72px;--fan-card-height:103px;--fan-peek:28px;--fan-gap:10px;--fan-lift:11px;display:block;overflow-x:auto;overflow-y:hidden;padding:var(--size-space-18_0,16px) var(--size-space-6_0,4px) var(--size-space-10_0,8px);height:calc(var(--fan-card-height) + var(--size-length-28_0,28px));min-height:calc(var(--fan-card-height) + var(--size-length-28_0,28px));scroll-snap-type:none;scrollbar-width:none;isolation:isolate;}
/* Scrolling never turns a fanned hand into a row of separate cards.
   The 40px reveal keeps the corner (including +2/+4) legible while the next
   64px mobile card still covers 24px of its predecessor. */
.hand-track.is-fan.is-long-hand{--fan-peek:40px;}
.own-hand{position:relative;}
.own-hand.hand-overflow-left::before,.own-hand.hand-overflow-right::after{
 content:"";position:absolute;top:var(--hand-edge-top,35px);height:var(--hand-edge-height,var(--size-length-85_0,84px));
 width:var(--size-length-4_0,4px);border-radius:var(--size-radius-8_0,8px);pointer-events:none;z-index:100;
 box-shadow:0 0 0 3px #eff4e6a6,0 0 7px #385f4860
;}
.own-hand.hand-overflow-left::before{left:var(--hand-edge-left,2px);background:linear-gradient(to bottom,#aec19c,#42745b,#aec19c);}
.own-hand.hand-overflow-right::after{right:var(--hand-edge-right,2px);background:linear-gradient(to bottom,#aec19c,#42745b,#aec19c);}
.hand-track.is-fan::-webkit-scrollbar{display:none;}
.hand-track.is-fan:before,.hand-track.is-fan:after{content:none;}
.hand-fan-row{display:grid;grid-template-columns:repeat(calc(var(--fan-count) - 1),minmax(var(--fan-peek),1fr)) var(--fan-card-width);align-items:center;position:relative;height:var(--fan-card-height);width:min(100%,calc(var(--fan-count) * (var(--fan-card-width) + var(--fan-gap)) - var(--fan-gap)));min-width:calc((var(--fan-count) - 1) * var(--fan-peek) + var(--fan-card-width));margin-inline:auto;}
.hand-fan-row.is-single{grid-template-columns:var(--fan-card-width);}
.hand-track.is-fan .hand-card{position:relative;z-index:1;scroll-snap-align:none;}
.hand-track.is-fan .hand-card:hover{transform:none;}
.hand-track.is-fan .hand-card.is-selected{z-index:40;transform:translateY(-9px);}
.hand-track.is-fan .hand-card:focus-visible,.hand-track.is-fan .hand-card.is-hand-preview{z-index:80;transform:translateY(calc(-1 * var(--fan-lift)));}
/* Lifted previews must not cover the exposed rank corner of their successor.
   Make room for the preview by shifting following cards, retaining the fan overlap. */

@media(hover:hover){.hand-track.is-fan .hand-card:hover{filter:brightness(1.04);}}
@media(max-width:760px){.hand-track.is-fan{--fan-card-width:64px;--fan-card-height:91px;height:calc(var(--fan-card-height) + var(--size-length-26_0,24px));min-height:calc(var(--fan-card-height) + var(--size-length-26_0,24px));padding-top:var(--size-space-17_0,16px);padding-bottom:var(--size-space-9_0,8px);}}
@media(prefers-reduced-motion:reduce){.hand-track.is-fan .hand-card:is(.is-selected,:focus-visible,.is-hand-preview){transform:translateY(-9px)!important;}}

/* A short landscape hand uses the same component, with overlapping rows. */
@media (orientation:landscape) and (max-height:540px) {
 .game-scene .own-hand{margin-top:0;min-width:0;max-height:100%;display:flex;flex-direction:column;}
 .game-scene .own-hand .hand-heading{flex-shrink:0;min-height:var(--size-length-16_0,16px);height:auto;gap:var(--size-space-3_0,2px);margin-bottom:var(--size-space-2_0,2px);}
 .game-scene .own-hand .hand-heading>span{display:none;}
 .game-scene .own-hand .hand-heading strong{font-size:var(--size-type-11_0,10px);}
 .game-scene .own-hand .hand-track.is-fan{--fan-card-width:60px;--fan-card-height:88px;--fan-peek:30px;--fan-row-step:45px;--fan-lift:8px;display:block;width:100%;height:auto;min-height:0;max-height:100%;flex:0 1 auto;padding:var(--size-space-12_0,12px) var(--size-space-5_0,4px) var(--size-space-7_0,8px);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scroll-snap-type:none;touch-action:pan-y;}
 .game-scene .own-hand .hand-fan-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--fan-peek),1fr));grid-auto-rows:var(--fan-row-step);align-items:start;width:100%;min-width:0;max-width:100%;height:auto;margin:0;padding:0 calc(var(--fan-card-width) - var(--fan-peek)) calc(var(--fan-card-height) - var(--fan-row-step)) 0;}
 .game-scene .own-hand .hand-fan-row.is-single{grid-template-columns:var(--fan-card-width);}
 .game-scene .own-hand .hand-track.is-fan .hand-card{width:var(--fan-card-width);min-width:var(--fan-card-width);height:var(--fan-card-height);}
 .game-scene .opponent-hands{min-height:0;gap:var(--size-space-6_0,4px);}
 .game-scene .opponent-label{font-size:var(--size-type-10_0,10px);margin-bottom:var(--size-space-3_0,2px);}
 .game-scene .mini-hand:not(.is-open){height:var(--size-length-35_0,36px);min-height:var(--size-length-35_0,36px);padding-inline:0;padding-bottom:var(--size-space-3_0,2px);overflow:visible;}
 .game-scene .mini-hand:not(.is-open)>*{width:var(--size-length-22_0,20px)!important;min-width:var(--size-length-22_0,20px)!important;height:var(--size-length-32_0,32px)!important;min-height:var(--size-length-32_0,32px)!important;margin-left:calc(-1 * var(--size-space-12_0,12px))!important;border-width:var(--size-border-2_0,2px)!important;}
 .game-scene .mini-hand:not(.is-open)>*:first-child{margin-left:0!important;}
 .game-scene .mini-hand:not(.is-open) .piece-back:not(.art-card)>span{font-size:var(--size-type-19_0,18px);}
}

/* Artwork has a canonical coordinate system. Layout owns only its viewport.
   The SVG uses meet (never stretch), so changing aspect ratios adds tiny insets. */
.game-scene .art-card,.art-card{padding:0!important;border-width:0!important;background:transparent!important;overflow:hidden;}
.game-scene .piece-art,.piece-art{display:block;width:100%;height:100%;max-width:none;overflow:hidden;pointer-events:none;flex:none;}
.piece-artboard{position:relative;box-sizing:border-box;overflow:hidden}
.piece-artboard *,.piece-artboard *::before,.piece-artboard *::after{box-sizing:border-box}
.piece-back.art-card:before{content:none;}
.piece-artboard .back-art-face{width:69px;height:99px;position:relative;display:grid;place-items:center;background:#3d6853;border:5px solid #fffdf3;border-radius:12px;overflow:hidden}
.piece-artboard .back-art-face:before{content:"";position:absolute;inset:5px;border:1px solid #b7c9a977;border-radius:5px}
.piece-artboard .back-art-face span{font:700 37px/1 system-ui,sans-serif!important;color:#dce8c8}
.mini-hand.is-open>.public-card>button.art-card{border-width:0!important;}
.mini-hand>.piece-back.art-card{border-width:0!important;}

/* Hand navigation lives against the scroll viewport rather than the full board width. */
.hand-scroll-controls{display:none;position:absolute;z-index:101;top:calc(var(--hand-edge-top,35px) - 34px);right:var(--hand-edge-right,0px);align-items:center;gap:var(--size-space-5_0,4px);font-size:var(--size-type-11_0,10px);color:var(--color-text-secondary,#425d48);pointer-events:auto;}
.hand-scroll-controls button{width:var(--size-length-30_0,28px);height:var(--size-length-28_0,28px);border:var(--size-border-1_0,1px) solid var(--color-border-subtle,#bac9a8);border-radius:var(--size-radius-9_0,8px);background:var(--color-surface-raised,#f8f7ed);color:var(--color-text-primary,#315644);font-weight:800;font-size:var(--size-type-21_0,20px);line-height:1;box-shadow:0 2px 0 #c8d1be;}
.hand-scroll-controls button:hover:not(:disabled){background:var(--color-surface-hover,#e4edd9);}
.hand-scroll-controls button:disabled{opacity:.35;}
.hand-scroll-hint{margin-right:var(--size-space-3_0,2px);font-size:var(--size-type-10_0,10px);}
@media (hover:hover) and (pointer:fine){.own-hand.hand-overflow .hand-scroll-controls{display:flex;}}
@media (max-width:480px){.hand-scroll-hint{display:none;}}
/* The regular game hint and scroll controls share the hand-heading's right edge.
   When scroll is available, show the actionable controls instead of overlapping. */
@media (hover:hover) and (pointer:fine){.own-hand.hand-overflow .hand-heading>span{visibility:hidden;}}

/* A selected or keyboard preview keeps subsequent rank corners reachable. */
.hand-track.is-fan .hand-fan-row>.hand-card:is(.is-selected,:focus-visible,.is-hand-preview) ~ .hand-card:not(.is-selected):not(:focus-visible):not(.is-hand-preview){transform:translateX(var(--fan-reveal-space,calc(var(--fan-card-width) - var(--fan-peek))));}

.participant-role{display:inline-flex;align-items:center;gap:var(--size-space-2_0,2px);flex:none;color:inherit;vertical-align:middle;}
.participant-role svg{display:block;width:var(--size-length-14_0,12px);height:var(--size-length-14_0,12px);flex:none;}
.number-mark{display:block;width:78%;height:78%;aspect-ratio:1;flex:none;overflow:visible;}
.participant-role.is-online{color:var(--green,#35654f);}
.participant-role.is-offline{color:var(--coral,#d77b62);}
.player-score{display:inline-block;min-width:var(--size-length-17_0,16px);padding:var(--size-space-2_0,2px) var(--size-space-4_0,4px);box-sizing:border-box;border-radius:var(--size-radius-4_0,4px);background:var(--color-counter-face,#fff9e8);color:var(--color-counter-mark,#45633d);box-shadow:0 1px 0 #becaa8;text-align:center;white-space:nowrap;font:800 var(--size-type-10_0,10px)/1.2 system-ui,sans-serif;}
.player-score.is-wins{background:var(--color-counter-wins-face,#253e35);color:var(--color-counter-wins-mark,#fff9e8);box-shadow:0 1px 0 #19352c;}

.piece-count.is-hand{display:inline-grid;place-items:center;width:var(--size-length-13_0,12px);height:var(--size-length-18_0,16px);min-width:var(--size-length-13_0,12px);padding:0;border:var(--size-border-1_0,1px) solid var(--color-border-subtle,#d9deca);border-radius:var(--size-radius-4_0,4px);transform:rotate(-8deg);font-size:var(--size-type-9_0,10px);box-shadow:0 1px 0 #becaa8;margin:var(--size-space-2_0,2px) var(--size-space-3_0,2px);}

.piece-count.is-hand.is-long-count{font-size:var(--size-type-7_0,10px);}

.round-token-art{display:block;width:100%;height:100%;overflow:visible;}
.player-score.is-pieces{display:inline-flex;align-items:center;justify-content:center;min-width:0;width:var(--size-length-22_0,20px);height:var(--size-length-22_0,20px);padding:0;flex:none;border:0;background:transparent;box-shadow:none;--round-token-fill:var(--color-counter-face,#fff9e8);--round-token-rim:var(--color-border-subtle,#d5ddc6);--round-token-side:var(--color-token-side,#a9b596);--round-token-mark:var(--color-counter-mark,#45633d);}

/* Shared board targets: packs supply legal commands and semantic outcome only. */
:is(.game-scene,.app-game-layout) .board-target{position:relative;cursor:pointer;z-index:1;outline:var(--size-border-2_0,2px) solid var(--target-edge);outline-offset:-3px;background:var(--target-fill)!important;}
.board-target.target-move{--target-fill:#f4d96c;--target-edge:#96720b;}
.board-target.target-capture{--target-fill:#ee9a87;--target-edge:#ad392c;}
.board-target.target-home{--target-fill:#98d09a;--target-edge:#2c743f;}
:is(.game-scene,.app-game-layout) .board-target:focus-visible{outline:var(--size-border-3_0,2px) solid #172f25;outline-offset:-3px;}
.board-target:active{filter:brightness(1.12);}
@media(hover:hover){.board-target:hover{filter:brightness(1.08);}}
.board-route-dot{display:block;width:22%;aspect-ratio:1;border-radius:50%;background:#334d3c;box-shadow:0 0 0 1px var(--color-material-route-base,#fff9e7);pointer-events:none;}

/* Lift the inspected card above overlapping neighbours in a tight hand. */
.hand-track.is-fan.is-tight .hand-card:is(.is-selected,:focus-visible,.is-hand-preview){z-index:80;}
/* The artwork supplies its own frame. A miniature wrapper must not crop its
   corners or add another border; the hand viewport alone makes the pocket. */
.app-game-layout .mini-hand>:is(.art-card,.shared-card-back){border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;overflow:visible!important;box-shadow:none!important}