/* The table owns the viewport. Modifiers share the same row as number cards. */
.game-shell .table-top.roster{grid-template-columns:minmax(0,1fr);justify-content:stretch}
.roster .opponent-hand{min-height:0}.roster .hand-numbers .playing-card{max-width:calc((clamp(53px,10.2dvh,82px) - 20px)*.6977)}
body.in-game{height:100dvh;min-height:0;overflow:hidden}body.in-game #app{height:100%;min-height:0}
.game-shell{height:100dvh;min-height:0;max-height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:0;padding:calc(env(safe-area-inset-top,0px) + 9px) 12px 0;overflow:hidden}
.game-header{height:56px;min-height:0;padding:0 3px 8px;grid-template-columns:52px 1fr 70px}.game-header .icon-button{min-height:40px;min-width:44px}.game-header .round-counter strong,.game-header .total-score strong{font-size:27px}
.table-top,.table-top.my-turn{height:clamp(66px,17dvh,150px);min-height:0;padding:4px 0;gap:4px}.table-top.my-turn:empty{height:0}.table-top.roster{--opponents:1;height:calc(var(--opponents)*clamp(53px,10.2dvh,82px) + (var(--opponents) - 1)*5px + 8px);max-height:none;min-height:0;padding:4px 0;display:grid;grid-template-rows:repeat(var(--opponents),minmax(0,1fr));gap:5px;overflow:visible}.table-top.roster-2{--opponents:2}.table-top.roster-3{--opponents:3}
.roster .opponent-seat,.table-top.roster-3 .opponent-seat{min-height:0;height:100%;padding:4px 7px;grid-template-columns:minmax(107px,30%) minmax(0,1fr);gap:5px;overflow:hidden}.roster .opponent-info{grid-template-columns:26px minmax(0,1fr);gap:2px 5px;width:100%;min-width:0}.roster .opponent-info .player-name{font-size:13px;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.4}.roster .opponent-info .avatar{width:26px;height:26px}.roster .opponent-info>span:last-child{font-size:10px}.roster .opponent-hand{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:100%;direction:ltr}.roster .hand-numbers{height:100%;min-height:0;flex:1;min-width:0;gap:0;padding:3px 0;justify-content:center}.roster .hand-numbers .playing-card{height:auto;max-height:100%;width:min(43px,calc((100% + (var(--count) - 1)*8px)/var(--count)));margin:0 -4px;flex-shrink:1}.table-top.roster .hand-mods{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;width:24%;max-width:68px;flex:none;margin:0;gap:1px;max-height:100%;position:static;direction:ltr}.table-top.roster .hand-mods .playing-card{width:clamp(15px,4.6vw,23px);max-height:calc(50% - 1px);margin:0;flex-shrink:0}.roster .no-cards{font-size:10px;white-space:normal}
.game-shell .bank-area,.game-shell:has(.roster-3) .bank-area{min-height:0;padding:3px 0 5px;overflow:visible;justify-content:center;gap:0}.game-shell .deck,.game-shell:has(.roster-3) .deck{height:clamp(50px,12dvh,120px);width:auto;aspect-ratio:70/100;flex-shrink:1;min-height:35px}.game-shell .deck-face b,.game-shell:has(.roster-3) .deck-face b{font-size:clamp(40px,9dvh,91px)}.game-shell .deck-face small{font-size:9px;letter-spacing:3px}.game-shell .turn-ribbon,.game-shell:has(.roster-3) .turn-ribbon{margin:0 0 5px;min-height:17px;font-size:13px;line-height:1.3}.game-shell .deck-count,.game-shell:has(.roster-3) .deck-count{margin-top:11px;font-size:10px}.game-shell .table-event{height:18px;min-height:0;padding-top:4px;font-size:10px}.game-shell .tap-cue{width:31px;height:31px;inset-inline-end:-16px;bottom:-9px}.game-shell .tap-cue svg{width:19px;height:19px}
.game-shell .my-hand{height:clamp(184px,33dvh,280px);min-height:0;max-height:none;display:flex;flex-direction:column;margin:0 -4px;padding:10px 10px calc(13px + var(--safe-bottom));border-radius:24px 24px 0 0;border-bottom:0;overflow:hidden}.game-shell .hand-heading{flex:none;min-height:28px;margin-bottom:3px}.game-shell .hand-heading>span{gap:5px;font-size:15px}.game-shell .hand-score{gap:5px}.game-shell .hand-score>small{font-size:10px}.game-shell .hand-score>strong{font-size:27px}.game-shell .my-hand>.hand-numbers{flex:1;min-height:0;padding:3px 0;gap:0}.game-shell .my-hand>.hand-numbers .playing-card{height:100%;width:auto;max-width:calc((100% + (var(--count) - 1)*5px)/var(--count));max-height:122px;aspect-ratio:70/100;margin:0 -2.5px;flex-shrink:1}.game-shell .my-hand>.hand-mods{height:clamp(21px,4.3dvh,38px);flex:none;margin:3px 0 0;gap:4px}.game-shell .my-hand>.hand-mods .playing-card{height:100%;width:auto;aspect-ratio:70/100}.game-shell .win-requirement{flex:none;font-size:clamp(16px,2.2vw,18px);line-height:1.4;font-weight:800;margin:5px 0 0}.game-shell .win-requirement b{font-family:Fredoka,sans-serif;font-size:1.1em}.results-modal .result-goal{font-size:17px;font-weight:700;color:var(--teal);margin:6px 0 16px}.game-shell .play-controls{flex:none;min-height:42px;height:42px;margin-top:7px;gap:12px}.game-shell .play-controls .btn{min-height:42px;font-size:20px;padding:7px 12px;box-shadow:0 4px 0 #c9c5ac,0 6px 0 var(--ink)}.game-shell .play-controls .btn.teal{box-shadow:0 4px 0 #0b514d,0 6px 0 var(--ink)}.game-shell .status-pill{font-size:14px;padding:8px 18px}.game-shell .spectator-hand{height:110px}
@media(min-width:750px){.game-shell{padding-inline:26px}.game-shell .my-hand{margin-inline:0}.roster .opponent-info .player-name{font-size:16px}.roster .opponent-seat{grid-template-columns:140px minmax(0,1fr)}}
@media(max-width:360px){.game-shell{padding-inline:9px}.roster .opponent-seat{grid-template-columns:105px minmax(0,1fr);padding-inline:5px}.roster .opponent-info .player-name{font-size:12px}.roster .hand-mods{max-width:43px}.game-shell .hand-heading>span{font-size:14px}}
@media(max-height:600px){.game-header{height:46px}.table-top.roster{height:calc(var(--opponents)*49px + (var(--opponents) - 1)*4px + 6px);gap:4px}.game-shell .my-hand{height:184px;padding-top:7px}.game-shell .table-event{display:none}.game-shell .bank-area{padding-block:1px}.game-shell .deck,.game-shell:has(.roster-3) .deck{height:48px}.game-shell .deck-face b,.game-shell:has(.roster-3) .deck-face b{font-size:39px}.game-shell .deck-face small{font-size:6px}.game-shell .deck-count{margin-top:7px}.game-shell .turn-ribbon{font-size:11px}.game-shell .hand-score>small{display:none}}