/* Duel battlefield: city illustration, opposing survivors and a persistent hand. */
body[data-screen=room].is-playing {
  --table-gold:#edbd78; --table-ink:#17202a;
  background-color:#10161c;
  background-image:linear-gradient(180deg,#0a1117de,#101923a3 48%,#090e15f5),url('/art/ink/hero/seoul-expedition.webp');
  background-size:cover; background-position:center;
}
body[data-screen=room].is-playing #app {
  padding:8px clamp(10px,1.5vw,28px) max(6px,env(safe-area-inset-bottom));
  grid-template-rows:36px minmax(0,1fr); gap:8px;
}
.duel-topbar { border-bottom:1px solid #a5b7c52b; }
.duel-topbar .console-title h1 { color:#f3eee2; font-size:17px; }
.duel-topbar .console-title .eyebrow { color:#a8b7c1; font-size:9px; }
.duel-topbar .console-tools button { min-height:32px; padding:4px 11px; font-size:11px; color:#d5dce0; border-color:#95a4af44; background:#16202cb3; }

.adventure-shell.duel-shell.tabletop-shell {
  position:relative; isolation:isolate;
  grid-template-columns:142px minmax(0,1fr) 178px;
  grid-template-rows:minmax(0,1fr) clamp(220px,32dvh,300px) 23px;
  grid-template-areas:"intel board console" "hand hand hand" "footer footer footer";
  gap:8px;
}
.tabletop-shell > * { min-width:0; min-height:0; }
.tabletop-shell .card-row { scrollbar-color:#8fa4b4 #111e29; }
.tabletop-shell .card-row::-webkit-scrollbar-track { background:#111e29; }
.tabletop-shell .card-row::-webkit-scrollbar-thumb { background:#8fa4b4; }
.tabletop-shell .duel-table {
  grid-area:board; position:relative; grid-template-rows:38px minmax(0,1fr);
  gap:6px; padding:0 10px 4px; border:0; border-radius:0;
  background:radial-gradient(ellipse at center,#111d2720,#10172060);
  box-shadow:none;
}
.tabletop-shell .duel-table::before,.tabletop-shell .duel-table::after { content:none; }
.tabletop-shell .duel-turnbar { gap:8px; border-bottom:1px solid #a4b3bb30; }
.tabletop-shell .duel-turnbar .turn-strip { padding:1px 0; gap:9px; flex-wrap:nowrap; background:none; }
.tabletop-shell .duel-turnbar .turn-strip strong { color:#dce4e8; font-size:12px; }
.tabletop-shell.turn-mine .duel-turnbar .turn-strip strong { color:#f5c98d; }
.tabletop-shell .duel-turnbar .turn-strip span { color:#aab8c2; font-size:10px; }
.tabletop-shell .duel-turnbar .pending-trigger { min-height:26px; padding:2px 8px; font-size:10px; background:#182734; border-color:#9cadb950; }
.opponent-hand { display:flex; align-items:center; gap:10px; flex:none; min-width:0; }
.opponent-hand-backs { display:flex; align-items:center; padding:0 7px; height:36px; }
.opponent-card-back { display:grid; place-items:center; flex:none; width:24px; height:31px; margin-left:-12px; border:1px solid #c3c4b9; border-radius:3px; background:repeating-linear-gradient(45deg,#243849 0 3px,#1c2b38 3px 6px); box-shadow:0 2px 4px #0009; transform:translateY(calc(abs(var(--back-index) - (var(--back-count) - 1) / 2) * 1px)) rotate(calc((var(--back-index) - (var(--back-count) - 1) / 2) * 4deg)); }
.opponent-card-back:first-child { margin-left:0; }
.opponent-card-back i { width:10px; height:17px; border:1px solid #d7c4a2aa; transform:rotate(12deg); background:#263b4b; }
.opponent-hand-label { color:#bac9d3; white-space:nowrap; font-size:10px; }
.opponent-hand-label strong { margin-left:3px; color:#f4d5a2; font-size:16px; font-variant-numeric:tabular-nums; }
.tabletop-shell .duel-field { position:relative; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px; }
.tabletop-shell .duel-field::after {
  content:""; position:absolute; top:50%; left:4%; right:4%; height:1px;
  background:linear-gradient(90deg,transparent,#b0bac05a,transparent); pointer-events:none;
}
.tabletop-shell .duel-player {
  position:relative; grid-template-columns:172px minmax(0,1fr); grid-template-rows:clamp(78px,11.5dvh,110px) minmax(0,1fr);
  gap:4px 13px; padding:4px 0; border:0; border-radius:0; background:transparent; box-shadow:none;
  transition:background .25s;
}
.tabletop-shell .duel-player.opponent { background:transparent; }
.tabletop-shell .duel-player.active-seat { background:linear-gradient(90deg,#edbd7811,transparent 65%); box-shadow:none; }
.tabletop-shell .duel-player.action-priority::before { content:""; position:absolute; top:8px; bottom:8px; left:-6px; width:2px; background:#edbd78; box-shadow:0 0 12px #edbd7866; }
.tabletop-shell .duel-identity { grid-column:1; grid-row:1; display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:9px; min-width:0; }
.tabletop-shell .survivor-portrait { display:block; width:76px; height:100%; max-height:110px; overflow:hidden; border:2px solid #bcc3c1a6; border-radius:30px 30px 6px 6px; background:#d9d5cc; box-shadow:0 4px 12px #0009; }
.tabletop-shell .survivor-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 40%; filter:grayscale(1); }
.tabletop-shell .active-seat .survivor-portrait { border-color:#e9b879; box-shadow:0 0 14px #e9b87933; }
.tabletop-shell .survivor-summary { min-width:0; }
.tabletop-shell .survivor-summary h2 { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin:0 0 5px; color:#f2eee5; font-size:13px; line-height:1.25; }
.tabletop-shell .survivor-summary h2 span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.tabletop-shell .survivor-summary h2 small { color:#b5c0c8; font-size:9px; font-weight:400; }
.tabletop-shell .duel-deck-count { color:#b6c3cd; font-size:9px; white-space:normal; line-height:1.45; }
.tabletop-shell .duel-player > .stats { grid-column:1; grid-row:2; align-self:start; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:33px 28px; gap:3px; height:auto; max-height:none; }
.tabletop-shell .duel-player .stat { grid-column:span 2; display:grid; grid-template-columns:10px 1fr; align-content:center; align-items:center; gap:0 2px; padding:2px 3px; border:0; border-bottom:1px solid #acbdc12c; border-radius:0; background:#111e299c; box-shadow:none; }
.tabletop-shell .duel-player .stat:nth-child(-n+2) { grid-column:span 3; }
.tabletop-shell .duel-player .stat .value { color:#f0e9db; font-size:15px; line-height:1.1; }
.tabletop-shell .duel-player .stat .label { grid-column:1 / -1; font-size:8px; line-height:1.2; color:#b8c3cb; white-space:nowrap; }
.tabletop-shell .duel-player .stat-icon { font-size:9px; color:#c3b28f; }
.tabletop-shell .duel-player .stat:first-child .value { color:#f4a194; font-size:21px; }
.tabletop-shell .duel-player .stat:nth-child(2) .value { color:#b6d6ee; font-size:21px; }
.tabletop-shell .duel-player .card-rack { grid-column:2; grid-row:1 / -1; grid-template-rows:23px minmax(0,1fr); min-height:0; }
.tabletop-shell .duel-player .pager-heading { gap:5px; }
.tabletop-shell .duel-player .pager-heading h3 { color:#bec9d1; font-size:10px; }
.tabletop-shell .duel-player .zone-expand { min-height:23px; padding:0 3px; color:#bec9d1; font-size:10px; }
.tabletop-shell .duel-player .zone-expand::after { content:none; }
.tabletop-shell .duel-player .pager-controls { gap:4px; }
.tabletop-shell .duel-player .page-count { font-size:9px; color:#b3c1cd; }
.tabletop-shell .duel-player .page-arrow { min-height:23px; height:23px; width:27px; color:#d8e0e6; background:#152432; border-color:#9aaeb83b; }
.tabletop-shell .duel-player .card-row { gap:9px; padding:3px 2px 5px; min-height:0; justify-content:safe center; }
.tabletop-shell.duel-shell .duel-player .card-rack .playing-card {
  --card-width:clamp(138px,11.5vw,184px); display:flex; flex-direction:column; padding:5px; max-height:none;
  border:1px solid #bcbeb8; border-radius:5px; background:linear-gradient(115deg,#faf7ec,#dddcd3);
  box-shadow:0 4px 9px #0008,inset 0 0 0 2px #89959d20;
}
.tabletop-shell.duel-shell .duel-player .playing-card > strong { min-height:27px; margin:0 0 3px; padding-right:22px; font-size:11px; line-height:1.25; color:#20292c; }
.tabletop-shell.duel-shell .duel-player .playing-card .card-art { width:100%; min-height:0; flex:1 1 0; height:auto; max-height:none; margin:0 0 3px; border-radius:2px; }
.tabletop-shell.duel-shell .duel-player .playing-card .card-effect { display:none; }
.tabletop-shell.duel-shell .duel-player .playing-card .markers { font-size:9px; line-height:1.2; margin-top:0; padding-top:1px; }
.tabletop-shell.duel-shell .duel-player .playing-card .card-status { min-height:13px; font-size:9px; padding:1px 3px; background:#293945; color:#f2eee2; border:0; }
.tabletop-shell.duel-shell .duel-player .playing-card .card-top { top:4px; right:4px; width:21px; height:21px; }
.tabletop-shell.duel-shell .duel-player .playing-card .cost { width:21px; min-width:21px; height:21px; font-size:11px; color:#f7f0df; background:#334651; border-color:#818e92; }
.tabletop-shell.duel-shell .duel-player .playing-card .card-hint { top:auto; bottom:19px; right:4px; font-size:8px; background:#344755; color:#fff8e8; }
.tabletop-shell .duel-player .playing-card.exhausted { filter:saturate(.3); opacity:.67; border-color:#8c999f; }
.tabletop-shell .duel-player .empty { border:1px dashed #c0ccd125; border-radius:3px; background:#14202b30; color:#b4c2cb; font-size:11px; padding:6px; }

/* Public opponent actions remain inspectable after the transient animation. */
.tabletop-shell .duel-intel { grid-area:intel; display:flex; flex-direction:column; gap:10px; padding:12px 8px 8px 0; border:0; border-radius:0; background:linear-gradient(90deg,#10192399,transparent); box-shadow:none; overflow:hidden; }
.tabletop-shell .duel-intel h2,.tabletop-shell .duel-intel h3 { margin:0; color:#a6b6c2; font-size:10px; font-weight:700; letter-spacing:.06em; }
.tabletop-shell .opponent-card-readout { width:100%; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:7px; padding:6px; color:#eee9dd; text-align:left; white-space:normal; border:1px solid #acbbc23b; border-radius:4px; background:#18232ddd; box-shadow:0 4px 10px #0004; }
.tabletop-shell .opponent-card-readout img { width:100%; height:clamp(90px,15dvh,160px); min-height:0; object-fit:cover; border-radius:2px; background:#e9e5da; border:1px solid #c5c9c555; }
.tabletop-shell .opponent-card-readout strong { font-size:12px; line-height:1.35; }
.tabletop-shell .card-event-kind { color:#edbd78; font-size:9px; line-height:1.3; }
.tabletop-shell .card-event-summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; color:#bac6ce; font-size:10px; line-height:1.55; font-weight:400; }
.tabletop-shell .duel-intel > .text-button { margin-top:auto; min-height:28px; padding:3px; color:#c2cdd3; font-size:10px; }
.tabletop-shell .opponent-card-readout.is-empty { opacity:.8; }
.tabletop-shell .opponent-card-readout.is-empty > span:first-child { display:grid; place-items:center; height:90px; color:#a4b2b76b; font:40px Georgia,serif; }
.tabletop-shell .duel-recent { display:flex; flex-direction:column; gap:4px; min-height:0; overflow:auto; scrollbar-width:thin; }
.tabletop-shell .duel-recent button { flex-shrink:0; justify-content:flex-start; min-width:0; min-height:29px; padding:4px; color:#b8c6ce; border:0; border-bottom:1px solid #99aab526; border-radius:0; background:#101a2499; font-size:9px; text-align:left; }
.tabletop-shell .duel-recent button img { width:23px; height:23px; border-radius:2px; object-fit:cover; }

/* Turn control sits at the edge of the battlefield rather than inside a table frame. */
.tabletop-shell .duel-actionbar.turn-console { grid-area:console; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px; padding:13px 0 10px 13px; border:0; border-left:1px solid #9bafb833; border-radius:0; background:linear-gradient(90deg,#101b258c,transparent); box-shadow:none; }
.tabletop-shell .turn-medallion { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; min-height:52px; padding:0; border:0; border-radius:0; color:#eff1e9; background:none; box-shadow:none; text-align:left; }
.tabletop-shell .turn-medallion strong { color:#e4e9e9; font-size:22px; line-height:1.2; }
.tabletop-shell.turn-mine .turn-medallion strong { color:#f2c487; text-shadow:0 0 22px #e9b36a35; }
.tabletop-shell .turn-medallion small { color:#a6b7c3; font-size:10px; }
.tabletop-shell .turn-steps { display:flex; flex-direction:column; gap:4px; margin:0; padding:0; list-style:none; }
.tabletop-shell .turn-steps li { display:flex; align-items:center; min-height:29px; gap:8px; padding:3px 0; color:#91a3af; font-size:11px; }
.tabletop-shell .turn-steps .step-number { display:grid; place-items:center; width:21px; height:21px; flex:none; border:1px solid #8095a247; border-radius:3px; color:#a9bac4; background:#172633; font-size:10px; }
.tabletop-shell .turn-steps li[data-state=current] { color:#f3d5a8; }
.tabletop-shell .turn-steps li[data-state=current] .step-number { color:#15202a; background:#edbd78; border-color:#edbd78; }
.tabletop-shell .turn-steps li[data-state=done] { color:#bdcccf; }
.tabletop-shell .turn-console .next-step { margin:0; color:#d7dfe2; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.tabletop-shell .turn-console .toolbar { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
.tabletop-shell .turn-console .toolbar:empty { display:none; }
.tabletop-shell .turn-console .action-control { min-width:0; }
.tabletop-shell .turn-console button,.tabletop-shell .turn-console > .button { width:100%; min-height:44px; padding:8px 5px; color:#efe9da; font-size:13px; font-weight:700; border:1px solid #899fa95e; border-radius:4px; background:linear-gradient(#31424e,#1d2b37); box-shadow:0 3px 7px #0005; }
.tabletop-shell .turn-console button.gold,.tabletop-shell .turn-console > .button.gold,.tabletop-shell .turn-console .choice-trigger { color:#202933; border-color:#f6ce92; background:linear-gradient(#f2cb8f,#cf9c5d); box-shadow:0 3px 8px #0007,0 0 14px #edbd781c; }
.tabletop-shell .turn-console button:disabled { opacity:.45; box-shadow:none; }
.tabletop-shell .turn-console button:active:not(:disabled) { transform:translateY(1px); }
.tabletop-shell .turn-console .action-control .caption { margin:4px 0 0; color:#afbec8; font-size:9px; line-height:1.4; }
.tabletop-shell .turn-guidance { margin:auto 0 0; padding-top:8px; color:#9fb0bc; border-top:1px solid #9aadb329; font-size:9px; line-height:1.55; }

/* Fan slots own rotation so card draw, hit and tap effects keep their transforms. */
.tabletop-shell .duel-hand { grid-area:hand; padding:0 18px; border:0; border-top:1px solid #adbbc151; border-radius:0; background:linear-gradient(180deg,#14202cbd,#0b131cd9); box-shadow:0 -8px 25px #0002; }
.hand-fan { display:grid; grid-template-rows:30px minmax(0,1fr); min-height:0; height:100%; }
.hand-fan-surface { --fan-card-width:190; --fan-min-width:110; --fan-exposed:34; --fan-angle-limit:12; --fan-card-ratio:.9; position:relative; min-width:0; min-height:0; isolation:isolate; }
.hand-fan-surface > .empty { position:absolute; inset:10px; display:grid; place-items:center; font-size:12px; color:#9daebc; border:0; background:none; }
.hand-fan-slot { position:absolute; z-index:var(--fan-order); transform:rotate(var(--fan-angle)); transform-origin:center bottom; transition:transform .16s ease; }
.hand-fan-slot[hidden],.hand-fan .pager-controls[hidden] { display:none; }
.hand-fan-slot:focus-within { z-index:50; transform:translateY(-5px) rotate(0deg); }
.tabletop-shell .duel-hand .hand-expand { margin-left:auto; padding:2px 7px; min-height:28px; color:#cfdae0; font-size:10px; white-space:nowrap; }
.hand-fan .pager-controls { margin-left:0; }
.tabletop-shell .duel-hand .pager-heading { gap:8px; }
.tabletop-shell .duel-hand .pager-heading h3 { font-size:12px; color:#e4e8e7; }
.tabletop-shell .duel-hand .zone-expand,.tabletop-shell .duel-hand .page-count { color:#b9c7ce; font-size:10px; }
.tabletop-shell .duel-hand .page-arrow { width:30px; height:25px; min-height:25px; color:#d8e2e7; background:#21313e; border-color:#93a6b147; }
.tabletop-shell.duel-shell .duel-hand .playing-card { position:relative; width:100%; min-width:0; height:100%; min-height:0; max-height:none; display:flex; flex-direction:column; gap:0; padding:7px; border:1px solid #b9bdb6; border-radius:6px; background:linear-gradient(120deg,#faf7ed,#dfdfd4); box-shadow:0 5px 12px #000a,inset 0 0 0 2px #fff5; transition:box-shadow .16s; }
.tabletop-shell.duel-shell .duel-hand .playing-card > strong { min-height:28px; margin:0 0 4px; padding:0 0 0 28px; font-size:12px; line-height:1.25; color:#18262b; }
.tabletop-shell.duel-shell .duel-hand .playing-card .card-art { flex:1 1 0; width:100%; height:auto; min-height:0; max-height:none; margin:0 0 5px; border-radius:2px; }
.tabletop-shell.duel-shell .duel-hand .playing-card .card-effect { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:0; max-height:2.8em; font-size:10px; line-height:1.4; color:#2b373c; }
.tabletop-shell.duel-shell .duel-hand .playing-card .card-top { position:absolute; top:4px; left:4px; right:auto; width:26px; height:26px; min-height:0; margin:0; padding:0; font-size:0; z-index:2; }
.tabletop-shell.duel-shell .duel-hand .playing-card .cost { width:26px; height:26px; min-width:26px; font-size:14px; color:#faf4e4; border-color:#9aa19b; background:#344853; }
.tabletop-shell.duel-shell .duel-hand .playing-card .card-sub,.tabletop-shell.duel-shell .duel-hand .playing-card .markers,.tabletop-shell.duel-shell .duel-hand .playing-card .card-hint.locked { display:none; }
.tabletop-shell.duel-shell .duel-hand .playing-card .card-hint { position:absolute; top:auto; bottom:32px; right:5px; min-height:0; margin:0; padding:2px 4px; color:#f8f3e7; background:#2c4352; font-size:8px; }
.tabletop-shell.duel-shell .duel-hand .playing-card.playable { border-color:#efc68b; box-shadow:0 5px 12px #0008,0 0 0 1px #efc68b70,0 0 13px #edbd782b; }
.tabletop-shell .duel-hand .playing-card:not(:disabled):hover { transform:none; box-shadow:0 8px 17px #000a,0 0 0 1px #edbd78; }
@media (hover:hover) and (pointer:fine) {
  .hand-fan-slot:hover { z-index:60; transform:translateY(-10px) rotate(0deg) scale(1.06); }
}
body[data-screen=room] .fx-card-back { border-color:#c8c9b9; background:repeating-linear-gradient(45deg,#243849 0 5px,#1c2b38 5px 10px); }
.tabletop-shell .console-footer { grid-area:footer; padding:0 3px; color:#a8b9c5; }
.tabletop-shell .console-footer .game-tools { gap:8px; }
.tabletop-shell .console-footer .game-tools button { min-height:23px; padding:0 5px; font-size:10px; color:#c5d0d5; border-color:#98abb12f; background:#172632; }
.tabletop-shell .console-footer .connection,.tabletop-shell .console-footer .dock-tip { color:#9db4c2; font-size:9px; }

.tabletop-shell .mulligan-callout { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:min(85%,420px); padding:18px 22px; text-align:center; color:#f5eee0; border:1px solid #bdc8cb6b; border-top:2px solid #edbd78; border-radius:4px; background:#16222cf2; box-shadow:0 12px 36px #0009; pointer-events:none; }
.tabletop-shell .mulligan-callout h2 { margin:0 0 9px; color:#f3d0a0; font-size:23px; }
.tabletop-shell .mulligan-callout p { margin:0; font-size:12px; line-height:1.7; color:#c4d0d7; }
.tabletop-shell .opening-seats { display:flex; justify-content:center; flex-wrap:wrap; gap:5px 12px; margin-top:9px; font-size:9px; color:#aabdc9; }
.tabletop-shell .opening-seats [data-ready=true] { color:#f2ce9d; }
.tabletop-shell .duel-hand.is-opening .playing-card { animation:opening-card-signal 1.2s ease-in-out 3; }
.tabletop-shell .duel-hand.is-opening.reroll-armed .playing-card,.tabletop-shell .duel-hand.is-opening .playing-card.reroll-armed { animation:none; transform:translateY(-3px); border-color:#f5cc8d; box-shadow:0 0 0 2px #edbd78,0 0 18px #edbd7850; }
.tabletop-shell .duel-hand.is-opening.reroll-armed .playing-card::after,.tabletop-shell .duel-hand.is-opening .playing-card.reroll-armed::after { content:"✓ 전체 교체"; position:absolute; left:3px; right:3px; bottom:6px; padding:4px; color:#182330; background:#efc58d; border-radius:2px; text-align:center; font-size:10px; font-weight:700; }
@keyframes opening-card-signal { 0%,100% { box-shadow:0 4px 9px #0009,0 0 0 1px #edbd7866; } 50% { box-shadow:0 4px 9px #0009,0 0 0 2px #f2cb8f,0 0 20px #edbd7870; } }
.tabletop-shell.is-finished .turn-medallion strong { color:#f3d0a0; }
.opponent-history-list { display:grid; gap:8px; }
.opponent-history-list > button { justify-content:flex-start; min-height:44px; text-align:left; }

@media (min-width:701px) and (max-width:1100px) {
  .adventure-shell.duel-shell.tabletop-shell { grid-template-columns:112px minmax(0,1fr) 152px; gap:8px; }
  .tabletop-shell .duel-table { padding:0 5px 4px; }
  .tabletop-shell .duel-player { grid-template-columns:140px minmax(0,1fr); gap:4px 9px; }
  .tabletop-shell .duel-identity { grid-template-columns:64px minmax(0,1fr); gap:6px; }
  .tabletop-shell .survivor-portrait { width:64px; }
  .tabletop-shell .survivor-summary h2 { font-size:11px; }
  .tabletop-shell .duel-deck-count { font-size:8px; }
  .tabletop-shell .duel-actionbar.turn-console { padding-left:9px; gap:9px; }
  .tabletop-shell .turn-medallion strong { font-size:19px; }
  .tabletop-shell .turn-console .next-step { font-size:10px; }
}
@media (max-width:700px) {
  body[data-screen=room].is-playing #app { grid-template-rows:32px minmax(0,1fr); padding:4px 6px max(4px,env(safe-area-inset-bottom)); gap:5px; }
  .duel-topbar .console-title h1 { font-size:14px; }
  .duel-topbar .console-title .eyebrow { font-size:8px; }
  .duel-topbar .console-tools button { min-height:30px; padding:3px 7px; font-size:10px; }
  .adventure-shell.duel-shell.tabletop-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 34px auto clamp(176px,26dvh,220px) 22px; grid-template-areas:"board" "intel" "console" "hand" "footer"; gap:5px; }
  .tabletop-shell .duel-table { grid-template-rows:32px minmax(0,1fr); padding:0 3px 2px; gap:3px; }
  .tabletop-shell .duel-turnbar .turn-strip { gap:6px; }
  .tabletop-shell .duel-turnbar .turn-strip strong { font-size:11px; }
  .tabletop-shell .duel-turnbar .turn-strip span { display:none; }
  .opponent-hand { gap:5px; }
  .opponent-hand-backs { height:28px; padding:0 4px; }
  .opponent-card-back { width:19px; height:25px; margin-left:-10px; }
  .opponent-card-back i { width:8px; height:13px; }
  .opponent-hand-label { font-size:9px; }
  .opponent-hand-label strong { font-size:14px; }
  .tabletop-shell .duel-field { gap:8px; }
  .tabletop-shell .duel-player { grid-template-columns:106px minmax(0,1fr); grid-template-rows:74px minmax(0,1fr); gap:3px 7px; padding:3px 0; }
  .tabletop-shell .duel-player.action-priority::before { left:-3px; top:4px; bottom:4px; }
  .tabletop-shell .duel-identity { grid-template-columns:52px minmax(0,1fr); gap:5px; }
  .tabletop-shell .survivor-portrait { width:52px; height:70px; border-radius:22px 22px 4px 4px; }
  .tabletop-shell .survivor-summary h2 { gap:2px; margin-bottom:3px; font-size:10px; }
  .tabletop-shell .survivor-summary h2 small { font-size:8px; }
  .tabletop-shell .duel-deck-count { font-size:7px; line-height:1.25; }
  .tabletop-shell .duel-player > .stats { grid-template-rows:34px 29px; gap:2px; }
  .tabletop-shell .duel-player .stat { grid-template-columns:8px 1fr; padding:1px 2px; gap:0 1px; }
  .tabletop-shell .duel-player .stat .value { font-size:11px; }
  .tabletop-shell .duel-player .stat:first-child .value,.tabletop-shell .duel-player .stat:nth-child(2) .value { font-size:17px; }
  .tabletop-shell .duel-player .stat .label { font-size:7px; }
  .tabletop-shell .duel-player .stat-icon { font-size:8px; }
  .tabletop-shell .duel-player .card-rack { grid-template-rows:24px minmax(0,1fr); }
  .tabletop-shell .duel-player .pager-heading { gap:2px; }
  .tabletop-shell .duel-player .pager-heading h3 { display:none; }
  .tabletop-shell .duel-player .zone-expand { min-height:24px; padding:0 2px; font-size:9px; }
  .tabletop-shell .duel-player .pager-controls { gap:2px; }
  .tabletop-shell .duel-player .page-count { display:none; }
  .tabletop-shell .duel-player .page-arrow { width:24px; min-height:24px; height:24px; }
  .tabletop-shell .duel-player .card-row { gap:6px; padding:3px 2px; }
  .tabletop-shell.duel-shell .duel-player .card-rack .playing-card { --card-width:116px; padding:4px; }
  .tabletop-shell.duel-shell .duel-player .playing-card > strong { font-size:10px; min-height:25px; margin-bottom:2px; padding-right:18px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .card-top { top:3px; right:3px; width:18px; height:18px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .cost { width:18px; min-width:18px; height:18px; font-size:10px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .card-status { font-size:8px; min-height:12px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .markers { font-size:8px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .card-hint { display:none; }
  .tabletop-shell .duel-player .empty { font-size:10px; padding:4px; }
  .tabletop-shell .duel-intel { display:grid; grid-template-columns:50px minmax(0,1fr) 42px; gap:5px; align-items:center; padding:3px 5px; border-top:1px solid #a9bbc12e; border-bottom:1px solid #a9bbc12e; background:#152330bf; }
  .tabletop-shell .duel-intel h2 { font-size:8px; line-height:1.4; }
  .tabletop-shell .opponent-card-readout { display:grid; grid-template-columns:29px minmax(0,1fr); grid-template-rows:12px 12px; gap:1px 6px; padding:0; border:0; background:none; box-shadow:none; }
  .tabletop-shell .opponent-card-readout img { grid-column:1; grid-row:1 / 3; width:29px; height:26px; }
  .tabletop-shell .opponent-card-readout strong { grid-column:2; grid-row:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:9px; }
  .tabletop-shell .opponent-card-readout .card-event-kind { display:none; }
  .tabletop-shell .opponent-card-readout .card-event-summary { grid-column:2; grid-row:2; display:block; white-space:nowrap; text-overflow:ellipsis; font-size:8px; line-height:1.35; }
  .tabletop-shell .opponent-card-readout.is-empty > span:first-child { grid-row:1 / 3; height:26px; font-size:21px; }
  .tabletop-shell .duel-intel > .text-button { min-height:30px; margin:0; padding:0; font-size:8px; }
  .tabletop-shell .duel-recent { display:none; }
  .tabletop-shell .duel-actionbar.turn-console { display:grid; grid-template-columns:minmax(0,.95fr) minmax(144px,1.15fr); grid-template-rows:auto auto; align-items:start; gap:4px 9px; padding:5px 4px; border:0; background:#0f1a25aa; }
  .tabletop-shell .turn-medallion { grid-column:1; grid-row:1; flex-direction:row; flex-wrap:wrap; gap:1px 6px; align-items:center; justify-content:flex-start; min-height:26px; padding:0; }
  .tabletop-shell .turn-medallion strong { font-size:16px; }
  .tabletop-shell .turn-medallion small { font-size:8px; }
  .tabletop-shell .turn-steps { display:none; }
  .tabletop-shell .turn-console .next-step { grid-column:1; grid-row:2; font-size:9px; line-height:1.4; }
  .tabletop-shell .turn-console .toolbar { grid-column:2; grid-row:1 / 3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; align-self:center; }
  .tabletop-shell .turn-console .toolbar:empty { display:none; }
  .tabletop-shell .turn-console .toolbar > :only-child { grid-column:1 / -1; }
  .tabletop-shell .turn-console button,.tabletop-shell .turn-console > .button { min-height:42px; padding:5px 3px; font-size:11px; }
  .tabletop-shell .turn-console .choice-trigger { grid-column:2; grid-row:1 / 3; align-self:center; }
  .tabletop-shell .turn-console .action-control .caption { font-size:8px; line-height:1.3; margin-top:3px; }
  .tabletop-shell .turn-guidance { grid-column:1 / -1; margin:0; padding-top:4px; font-size:8px; line-height:1.35; }
  .tabletop-shell .duel-hand { padding:0 5px; }
  .hand-fan { grid-template-rows:27px minmax(0,1fr); }
  .hand-fan-surface { --fan-card-width:142; --fan-min-width:100; --fan-exposed:30; --fan-angle-limit:6; }
  .tabletop-shell .duel-hand .pager-heading { gap:5px; }
  .tabletop-shell .duel-hand .hand-expand { min-height:26px; font-size:9px; padding:1px 4px; }
  .tabletop-shell .duel-hand .rack-meta { font-size:9px; }
  .tabletop-shell .duel-hand .pager-heading h3 { font-size:11px; }
  .tabletop-shell .duel-hand .page-count { font-size:9px; }
  .tabletop-shell .duel-hand .page-arrow { width:28px; min-height:24px; height:24px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card { padding:5px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card > strong { min-height:26px; font-size:10px; padding-left:22px; margin-bottom:3px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card .card-art { margin-bottom:3px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card .card-effect { font-size:9px; line-height:1.35; -webkit-line-clamp:1; max-height:1.35em; }
  .tabletop-shell.duel-shell .duel-hand .playing-card .card-top { width:22px; height:22px; top:3px; left:3px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card .cost { width:22px; min-width:22px; height:22px; font-size:12px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card .card-hint { bottom:21px; right:4px; font-size:8px; padding:1px 3px; }
  .tabletop-shell .duel-hand .playing-card:not(:disabled):hover { transform:none; }
  .tabletop-shell .console-footer { gap:4px; padding:0; }
  .tabletop-shell .console-footer .game-tools { gap:4px; }
  .tabletop-shell .console-footer .game-tools button { min-height:22px; font-size:9px; padding:0 2px; }
  .tabletop-shell .console-footer .connection,.tabletop-shell .console-footer .dock-tip { font-size:8px; }
  .tabletop-shell .mulligan-callout { width:min(88%,350px); padding:12px 14px; }
  .tabletop-shell .mulligan-callout h2 { font-size:18px; margin-bottom:5px; }
  .tabletop-shell .mulligan-callout p { font-size:11px; line-height:1.5; }
}
@media (max-width:700px) and (max-height:690px) {
  .adventure-shell.duel-shell.tabletop-shell { grid-template-rows:minmax(0,1fr) 32px auto 164px 21px; gap:4px; }
  .tabletop-shell .duel-table { grid-template-rows:29px minmax(0,1fr); gap:2px; }
  .tabletop-shell .duel-player { grid-template-columns:90px minmax(0,1fr); grid-template-rows:58px minmax(0,1fr); gap:2px 5px; padding:2px 0; }
  .tabletop-shell .duel-identity { grid-template-columns:42px minmax(0,1fr); gap:4px; }
  .tabletop-shell .survivor-portrait { width:42px; height:56px; }
  .tabletop-shell .survivor-summary h2 { font-size:9px; margin-bottom:2px; }
  .tabletop-shell .survivor-summary h2 small { font-size:7px; }
  .tabletop-shell .duel-deck-count { font-size:6px; }
  .tabletop-shell .duel-player > .stats { grid-template-rows:28px 24px; }
  .tabletop-shell .duel-player .stat .label { font-size:6px; }
  .tabletop-shell .duel-player .stat .value { font-size:10px; }
  .tabletop-shell .duel-player .stat:first-child .value,.tabletop-shell .duel-player .stat:nth-child(2) .value { font-size:15px; }
  .tabletop-shell .duel-player .card-rack { grid-template-rows:21px minmax(0,1fr); }
  .tabletop-shell .duel-player .page-arrow { min-height:21px; height:21px; width:22px; }
  .tabletop-shell .duel-player .zone-expand { min-height:21px; font-size:8px; }
  .tabletop-shell.duel-shell .duel-player .card-rack .playing-card { --card-width:103px; padding:3px; }
  .tabletop-shell.duel-shell .duel-player .playing-card > strong { min-height:22px; font-size:9px; }
  .tabletop-shell .duel-actionbar.turn-console { grid-template-columns:minmax(0,1fr) minmax(140px,1.2fr); gap:3px 6px; padding:4px 3px; }
  .tabletop-shell .turn-medallion strong { font-size:13px; }
  .tabletop-shell .turn-console .next-step { font-size:8px; }
  .tabletop-shell .turn-guidance { font-size:8px; padding-top:3px; }
  .hand-fan { grid-template-rows:25px minmax(0,1fr); }
  .hand-fan-surface { --fan-card-width:120; --fan-angle-limit:6; }
  .tabletop-shell .duel-hand .page-arrow { min-height:22px; height:22px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card .card-effect { display:none; }
  .tabletop-shell .mulligan-callout { padding:9px 11px; }
  .tabletop-shell .mulligan-callout h2 { font-size:16px; }
  .tabletop-shell .mulligan-callout p { font-size:10px; }
}
@media (min-width:701px) and (max-height:600px) {
  body[data-screen=room].is-playing #app { grid-template-rows:34px minmax(0,1fr); padding:4px 9px; gap:4px; }
  .adventure-shell.duel-shell.tabletop-shell { grid-template-columns:102px minmax(0,1fr) 145px; grid-template-rows:minmax(0,1fr) 126px 21px; gap:4px; }
  .tabletop-shell .duel-table { grid-template-rows:28px minmax(0,1fr); padding:0 4px 2px; gap:2px; }
  .tabletop-shell .duel-turnbar .turn-strip strong { font-size:10px; }
  .tabletop-shell .duel-turnbar .turn-strip span { display:none; }
  .opponent-hand { gap:5px; }
  .opponent-hand-backs { height:25px; }
  .opponent-card-back { width:18px; height:23px; margin-left:-10px; }
  .opponent-hand-label { font-size:9px; }
  .opponent-hand-label strong { font-size:13px; }
  .tabletop-shell .duel-field { gap:6px; }
  .tabletop-shell .duel-player { grid-template-columns:112px minmax(0,1fr); grid-template-rows:46px minmax(0,1fr); padding:1px 0; gap:1px 5px; }
  .tabletop-shell .duel-identity { grid-template-columns:40px minmax(0,1fr); gap:5px; }
  .tabletop-shell .survivor-portrait { width:40px; height:46px; border-radius:18px 18px 3px 3px; }
  .tabletop-shell .survivor-summary h2 { flex-direction:row; gap:3px; font-size:10px; margin:0 0 2px; }
  .tabletop-shell .survivor-summary h2 small { font-size:7px; }
  .tabletop-shell .duel-deck-count { font-size:7px; }
  .tabletop-shell .duel-player > .stats { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:27px; gap:2px; }
  .tabletop-shell .duel-player .stat,.tabletop-shell .duel-player .stat:nth-child(-n+2) { grid-column:auto; grid-template-columns:1fr; padding:1px; }
  .tabletop-shell .duel-player .stat .value,.tabletop-shell .duel-player .stat:first-child .value,.tabletop-shell .duel-player .stat:nth-child(2) .value { font-size:12px; }
  .tabletop-shell .duel-player .stat .label { font-size:6px; }
  .tabletop-shell .duel-player .stat-icon { display:none; }
  .tabletop-shell .duel-player .card-rack { grid-template-rows:19px minmax(0,1fr); }
  .tabletop-shell .duel-player .zone-expand,.tabletop-shell .duel-player .page-arrow { min-height:19px; height:19px; font-size:8px; }
  .tabletop-shell .duel-player .pager-heading h3 { font-size:8px; }
  .tabletop-shell .duel-player .card-row { gap:5px; padding:2px; }
  .tabletop-shell.duel-shell .duel-player .card-rack .playing-card { --card-width:148px; display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; padding:3px; gap:2px 4px; }
  .tabletop-shell.duel-shell .duel-player .playing-card > strong { grid-column:2; grid-row:1; min-height:0; font-size:9px; margin:0; padding-right:17px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .card-art { grid-column:1; grid-row:1 / -1; width:44px; height:100%; min-height:0; margin:0; }
  .tabletop-shell.duel-shell .duel-player .playing-card .markers { grid-column:2; grid-row:2; margin:0; padding:0; font-size:7px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .card-status { min-height:10px; font-size:7px; }
  .tabletop-shell.duel-shell .duel-player .playing-card .card-hint { display:none; }
  .tabletop-shell.duel-shell .duel-player .playing-card .cost { width:17px; height:17px; min-width:17px; font-size:9px; }
  .tabletop-shell .duel-intel { padding:4px; gap:5px; }
  .tabletop-shell .opponent-card-readout { gap:4px; padding:4px; }
  .tabletop-shell .opponent-card-readout img { height:48px; }
  .tabletop-shell .opponent-card-readout strong { font-size:10px; }
  .tabletop-shell .card-event-summary { font-size:8px; -webkit-line-clamp:2; }
  .tabletop-shell .duel-recent { display:none; }
  .tabletop-shell .duel-actionbar.turn-console { padding:5px 0 4px 8px; gap:5px; }
  .tabletop-shell .turn-medallion { min-height:32px; gap:1px; }
  .tabletop-shell .turn-medallion strong { font-size:16px; }
  .tabletop-shell .turn-medallion small { font-size:8px; }
  .tabletop-shell .turn-steps { display:none; }
  .tabletop-shell .turn-console .next-step { font-size:9px; line-height:1.35; }
  .tabletop-shell .turn-console .toolbar { gap:4px; }
  .tabletop-shell .turn-console button { min-height:34px; padding:4px; font-size:10px; }
  .tabletop-shell .turn-console .action-control .caption { font-size:8px; line-height:1.2; margin-top:2px; }
  .tabletop-shell .turn-guidance { padding-top:3px; font-size:8px; line-height:1.3; }
  .tabletop-shell .duel-hand { padding:0 8px; }
  .hand-fan { grid-template-rows:23px minmax(0,1fr); }
  .hand-fan-surface { --fan-card-width:118; --fan-card-ratio:1.15; --fan-angle-limit:8; }
  .tabletop-shell .duel-hand .hand-expand { min-height:21px; }
  .tabletop-shell .duel-hand .page-arrow { min-height:21px; height:21px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card { padding:3px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card > strong { min-height:21px; font-size:9px; margin-bottom:2px; padding-left:27px; }
  .tabletop-shell.duel-shell .duel-hand .playing-card .card-effect { display:none; }
  .tabletop-shell .mulligan-callout { width:min(85%,360px); padding:9px 12px; }
  .tabletop-shell .mulligan-callout h2 { font-size:17px; margin-bottom:4px; }
  .tabletop-shell .mulligan-callout p { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .hand-fan-slot { transition:none; }
  .hand-fan-slot:hover,.hand-fan-slot:focus-within { transform:rotate(var(--fan-angle)); }
  .tabletop-shell .duel-player,.tabletop-shell.duel-shell .duel-hand .playing-card { transition:none; }
  .tabletop-shell .duel-hand.is-opening .playing-card { animation:none; box-shadow:0 4px 8px #0009,0 0 0 1px #edbd78,0 0 9px #edbd7844; }
  .tabletop-shell .duel-hand.is-opening.reroll-armed .playing-card,.tabletop-shell .duel-hand.is-opening .playing-card.reroll-armed,.tabletop-shell .duel-hand .playing-card:not(:disabled):hover,.tabletop-shell .turn-console button:active:not(:disabled) { transform:none; }
}