:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171717;
  background: #f4f1eb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, select, input { font: inherit; }
button { cursor: pointer; border: 1px solid #1f1f1f; border-radius: 8px; padding: 8px 11px; background: #fff; }
button:hover { transform: translateY(-1px); }
button.primary { background: #171717; color: #fff; }
button.danger { background: #fff1f1; }
button.ghost { border-color: transparent; background: transparent; }
button.small { padding: 5px 8px; font-size: 12px; }
.hidden { display: none !important; }
.muted { color: #6c6a66; font-weight: 400; }
.topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #d7d2c8; background: rgba(255,255,255,.72); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.app { max-width: 1380px; margin: 0 auto; padding: 20px; }
.lobby { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 900px; margin: 8vh auto 0; }
.box { border: 1px solid #ccc6bb; background: #fffdf9; border-radius: 14px; padding: 18px; box-shadow: 0 8px 30px rgba(40,32,20,.05); }
.box h2, .box h3 { margin-top: 0; }
.field { display: grid; gap: 6px; margin: 12px 0; }
.field input, .field select { width: 100%; border: 1px solid #bcb6aa; border-radius: 8px; padding: 9px; background: #fff; }
.room-code { font-size: clamp(34px,7vw,72px); letter-spacing: .12em; font-weight: 850; text-align: center; margin: 28px 0; }
.game-shell { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; }
.game-main { min-width: 0; }
.game-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border: 1px solid #c9c3b8; border-radius: 12px; background: #fffdf9; margin-bottom: 12px; }
.player-board { border: 1px solid #c9c3b8; background: #fffdf9; border-radius: 14px; padding: 13px; margin-bottom: 12px; }
.player-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 9px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: #eeeae2; border-radius: 999px; padding: 4px 8px; font-size: 12px; }
.zone-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #74706a; margin: 10px 0 5px; }
.slots { display: grid; grid-template-columns: repeat(5,minmax(90px,1fr)); gap: 7px; }
.slots.support { grid-template-columns: repeat(4,minmax(90px,1fr)); }
.card, .empty-slot { min-height: 112px; border: 1px solid #b9b2a5; border-radius: 9px; padding: 8px; background: #fff; overflow: hidden; }
.empty-slot { border-style: dashed; display:flex; align-items:center; justify-content:center; color:#a8a298; background:transparent; }
.card.hidden-card { background: repeating-linear-gradient(135deg,#262626,#262626 8px,#333 8px,#333 16px); color:#fff; }
.card-name { font-size: 13px; font-weight: 800; line-height: 1.15; }
.card-meta { font-size: 10px; color: #716c64; margin-top: 5px; }
.hidden-card .card-meta { color:#ddd; }
.hand { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.hand .card { min-width: 130px; max-width: 130px; cursor: pointer; }
.hand .card.selected { outline: 3px solid #1d6b42; }
.action-panel { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 90px); overflow: auto; }
.actions { display: grid; gap: 7px; }
.actions .group { display: grid; gap: 6px; border-top: 1px solid #e1ddd5; padding-top: 9px; margin-top: 4px; }
.actions .group-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color:#74706a; }
.event-log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; display: grid; gap: 5px; }
.event { padding: 5px 6px; border-radius: 5px; background: #f3f0ea; overflow-wrap:anywhere; }
.notice { padding: 10px 12px; background: #fff7d6; border: 1px solid #e7d993; border-radius: 8px; margin: 10px 0; }
.error { color: #9d1515; background:#fff0f0; border:1px solid #e5bcbc; padding:8px; border-radius:8px; margin:8px 0; }
@media (max-width: 950px) {
  .game-shell { grid-template-columns: 1fr; }
  .action-panel { position: static; max-height: none; }
  .lobby { grid-template-columns: 1fr; margin-top: 2vh; }
  .slots, .slots.support { grid-template-columns: repeat(2,minmax(100px,1fr)); }
}

/* v1.1 card readability + close-up */
.card { position: relative; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.card:not(.hidden-card):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(40,32,20,.10); }
.card.legal-card { border-color: #27774c; box-shadow: inset 0 0 0 2px rgba(39,119,76,.12); }
.card.legal-card::after { content: 'LEGAL'; position: absolute; right: 6px; bottom: 6px; font-size: 8px; font-weight: 900; letter-spacing: .08em; color: #1d6b42; background: #e8f5ed; padding: 2px 5px; border-radius: 999px; }
.card-info { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; padding: 0; border-radius: 999px; border-color: rgba(0,0,0,.18); background: rgba(255,255,255,.88); font-size: 11px; font-weight: 900; z-index: 3; }
.card-rules-mini { font-size: 9px; line-height: 1.28; color: #48443f; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-right: 12px; }
.card-tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; padding-right: 30px; }
.card-tags span { font-size:8px; font-weight:800; letter-spacing:.04em; background:#f0ede7; padding:2px 4px; border-radius:4px; }
.power-badge { position:absolute; right:6px; bottom:5px; min-width:24px; height:24px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:#fff; background:#1d1d1d; }
.card.legal-card .power-badge { bottom: 25px; }
.implementation { position:absolute; left:6px; bottom:5px; font-size:7px; font-weight:900; letter-spacing:.06em; padding:2px 4px; border-radius:4px; z-index:2; }
.implementation.partial { background:#fff1bf; color:#725400; }
.implementation.text-only { background:#fee2e2; color:#8b1a1a; }
.dept-customer_service { border-top: 4px solid #6c7bd9; }
.dept-it { border-top: 4px solid #65848f; }
.dept-office { border-top: 4px solid #9b7c5c; }
.dept-marketing { border-top: 4px solid #c36d93; }
.dept-production { border-top: 4px solid #b67945; }
.dept-neutral { border-top: 4px solid #7d7b75; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(20,18,15,.62); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(5px); }
.card-modal { position: relative; width: min(850px, 96vw); max-height: min(680px, 92vh); overflow:auto; display:grid; grid-template-columns: minmax(240px, 340px) minmax(0,1fr); gap: 24px; border:1px solid #bcb5aa; border-radius:18px; background:#fffdf9; padding:22px; box-shadow:0 30px 90px rgba(0,0,0,.28); }
.modal-close { position:absolute; right:12px; top:12px; z-index:2; border-radius:999px; width:34px; height:34px; padding:0; font-size:22px; line-height:1; }
.modal-card-visual { min-height: 470px; border:1px solid #aaa298; border-radius:16px; padding:20px; background:linear-gradient(155deg,#fff,#f4efe7); display:flex; flex-direction:column; position:relative; overflow:hidden; }
.modal-card-visual.dept-customer_service { background:linear-gradient(155deg,#f8f9ff,#e7eafa); }
.modal-card-visual.dept-it { background:linear-gradient(155deg,#f5f9fa,#dde7ea); }
.modal-card-visual.dept-office { background:linear-gradient(155deg,#fbf8f3,#ece0d3); }
.modal-card-visual.dept-marketing { background:linear-gradient(155deg,#fff7fb,#f3dce8); }
.modal-card-visual.dept-production { background:linear-gradient(155deg,#fff9f2,#eedbc7); }
.modal-card-visual.dept-neutral { background:linear-gradient(155deg,#faf9f6,#e5e3de); }
.modal-type { font-size:10px; font-weight:900; letter-spacing:.10em; text-transform:uppercase; opacity:.65; }
.modal-name { margin-top:10px; font-size:28px; line-height:1.02; font-weight:900; }
.modal-stats { margin-top:8px; font-size:12px; font-weight:700; }
.modal-placeholder { margin:auto 0; min-height:220px; display:grid; place-items:center; text-align:center; font-size:24px; font-weight:900; letter-spacing:.12em; opacity:.12; transform:rotate(-8deg); }
.modal-copy { padding: 12px 12px 12px 0; }
.modal-copy h2 { margin:10px 0 4px; font-size:30px; line-height:1.05; }
.modal-copy h4 { margin:24px 0 6px; text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.modal-meta { font-size:12px; color:#6c675f; }
.rules-text { font-size:16px; line-height:1.48; margin:0; }
.flavor-text { font-style:italic; color:#67615a; border-left:3px solid #d9d2c8; padding-left:12px; margin-top:22px; }
.implementation-status { display:inline-flex; border-radius:999px; padding:4px 8px; font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; background:#e8f5ed; color:#1d6b42; }
.implementation-status.partial { background:#fff1bf; color:#725400; }
.implementation-status.text-only { background:#fee2e2; color:#8b1a1a; }
.implementation-note { margin-top:18px; padding:10px 12px; border-radius:9px; background:#fff5dc; border:1px solid #ecd594; font-size:12px; line-height:1.4; }
.runtime-box { margin-top:18px; padding:9px 11px; border-radius:8px; background:#f1eee8; font-size:11px; color:#5d5851; }
.hidden-preview { grid-template-columns: 300px 1fr; }

@media (max-width: 700px) {
  .card-modal, .hidden-preview { grid-template-columns: 1fr; }
  .modal-card-visual { min-height: 330px; }
  .modal-placeholder { min-height: 130px; }
}

/* v1.5 click-first playtest UX */
.phase-track { display:flex; gap:5px; margin:0 0 8px; }
.phase-track span { flex:1; text-align:center; padding:5px 7px; border:1px solid #d5d0c7; border-radius:7px; background:#eeeae3; font-size:9px; font-weight:900; letter-spacing:.07em; color:#888178; }
.phase-track span.active { background:#171717; color:#fff; border-color:#171717; }
.card.attack-ready { box-shadow: inset 0 0 0 2px rgba(174,109,39,.20); cursor:crosshair; }
.card.attack-ready::before { content:'ATTACK'; position:absolute; left:6px; top:6px; z-index:2; font-size:7px; font-weight:900; letter-spacing:.07em; background:#fff1d8; color:#7d4b12; border-radius:999px; padding:2px 5px; }
.card.target-candidate { outline:3px solid rgba(37,103,185,.68); outline-offset:2px; cursor:crosshair; }
.card.target-selected { outline:4px solid rgba(29,107,66,.9); outline-offset:2px; }
.interaction-panel { display:grid; gap:8px; padding:10px; border:1px solid #b7c6dd; border-radius:10px; background:#f3f7fd; }
.interaction-options { display:flex; flex-wrap:wrap; gap:6px; }
.small-copy { font-size:11px; line-height:1.35; }
.selected-targets { display:flex; flex-wrap:wrap; gap:4px; }
.selected-targets span { font-size:9px; font-weight:800; padding:3px 6px; border-radius:999px; background:#e4eee8; }
button:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.hand .card.legal-card { cursor:pointer; }

/* v1.6 game-facing status + lightweight event animation */
.turn-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; padding:12px 14px; border-radius:12px; border:1px solid #cfc9bf; background:#fffdf9; box-shadow:0 6px 18px rgba(40,32,20,.05); }
.turn-banner > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; }
.turn-label { font-weight:950; letter-spacing:.055em; font-size:14px; }
.turn-detail { color:#6d675f; font-size:12px; }
.turn-banner.yours { border-color:#9fc7ad; background:#f3fbf6; }
.turn-banner.response, .turn-banner.decision { border-color:#d3b771; background:#fff9e8; }
.turn-banner.opponent { background:#f0eee9; color:#5c5851; }
.turn-banner.ended { border-color:#bbb2a6; background:#ece8e1; }
.chain-badge { flex:0 0 auto; border-radius:999px; padding:4px 8px; font-size:9px; font-weight:950; letter-spacing:.08em; background:#171717; color:#fff; }
.debug-meta { margin-bottom:10px; }
.debug-meta summary, .event-details summary { cursor:pointer; color:#716b63; font-size:11px; font-weight:800; }
.debug-meta .game-meta { margin-top:7px; margin-bottom:0; }
.event-details { margin-top:18px; border-top:1px solid #e1ddd5; padding-top:10px; }
.event-details .event-log { margin-top:8px; }
.visual-cue { pointer-events:none; position:fixed; z-index:90; left:50%; top:76px; transform:translateX(-50%); padding:9px 14px; border-radius:999px; background:rgba(23,23,23,.94); color:#fff; font-size:12px; font-weight:900; letter-spacing:.02em; box-shadow:0 14px 35px rgba(0,0,0,.22); animation:cue-pop 1.45s ease both; }
@keyframes cue-pop { 0% { opacity:0; transform:translate(-50%,-8px) scale(.92); } 12% { opacity:1; transform:translate(-50%,0) scale(1); } 78% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-4px) scale(.98); } }
.card.cue-played { animation:card-played .55s ease; }
.card.cue-attack { animation:card-attack .55s ease; }
.card.cue-destroyed { animation:card-destroyed .65s ease; }
@keyframes card-played { 0% { transform:translateY(12px) scale(.95); opacity:.35; } 100% { transform:none; opacity:1; } }
@keyframes card-attack { 0%,100% { transform:none; } 40% { transform:translateY(-7px) scale(1.025); } }
@keyframes card-destroyed { 0% { filter:none; } 35% { filter:brightness(1.35); transform:scale(1.035); } 100% { filter:none; transform:none; } }
@media (prefers-reduced-motion: reduce) { .visual-cue, .card.cue-played, .card.cue-attack, .card.cue-destroyed { animation:none; } }

/* v1.7 board-first interaction + visible chain */
.app { max-width: 1460px; }
.game-shell { display:block; }
.game-main { width:100%; }
.player-board { padding:12px 13px 14px; }
.opponent-board { background:#fbfaf7; }
.own-board { box-shadow:0 8px 26px rgba(40,32,20,.055); }
.player-head { margin-bottom:6px; }
.stats b { font-weight:950; }
.reputation-pill { background:#f2ece3; }
.board-resource-row { display:flex; align-items:stretch; gap:7px; margin:5px 0 7px; }
.deck-pile { width:72px; min-height:46px; flex:0 0 72px; border:1px solid #bbb4a8; border-radius:8px; background:linear-gradient(145deg,#292827,#41403e); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:3px 3px 0 #d6d0c6; }
.deck-pile span { font-size:8px; letter-spacing:.10em; font-weight:900; opacity:.7; }
.deck-pile strong { font-size:18px; line-height:1; margin-top:2px; }
.archive-compact { flex:1; min-width:0; border:1px solid #d2ccc2; border-radius:8px; background:#f5f2ed; }
.archive-compact summary { list-style:none; cursor:pointer; min-height:46px; padding:7px 10px; display:flex; align-items:center; gap:8px; }
.archive-compact summary::-webkit-details-marker { display:none; }
.archive-compact summary span { font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.archive-compact summary strong { display:grid; place-items:center; min-width:26px; height:26px; border-radius:999px; background:#ded8cf; font-size:12px; }
.archive-compact summary small { color:#787168; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.archive-grid { border-top:1px solid #d7d1c7; padding:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:6px; max-height:260px; overflow:auto; }
.archive-grid .card { min-height:92px; }
.archive-grid .card-rules-mini { -webkit-line-clamp:2; }
.hand-title { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.hand-title span { text-transform:none; letter-spacing:0; font-size:9px; color:#918b82; }
.own-hand { padding:4px 2px 10px; }
.own-hand .card { min-width:136px; max-width:136px; }

.office-divider { height:35px; display:flex; align-items:center; justify-content:center; color:#aaa39a; font-size:8px; font-weight:950; letter-spacing:.20em; }
.office-divider::before,.office-divider::after { content:''; height:1px; flex:1; background:#ddd7cd; margin:0 12px; }
.decision-center { margin:8px 0 12px; padding:10px; border-radius:13px; border:1px solid #d2ccc1; background:linear-gradient(180deg,#f8f5ef,#f1ede5); display:grid; gap:9px; box-shadow:inset 0 1px rgba(255,255,255,.7); }
.decision-block { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; padding:9px 10px; border-radius:9px; background:#fffdf9; border:1px solid #d8d1c7; }
.decision-block > strong { font-size:12px; }
.decision-block > span { font-size:10px; color:#777067; margin-right:auto; }
.decision-center .interaction-panel { background:#fff; border-color:#9eb3d3; }

.response-block { border:2px solid #d2aa4d; border-radius:11px; background:#fff8e5; padding:10px; box-shadow:0 4px 18px rgba(102,75,10,.08); }
.response-title { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.response-title strong { font-size:13px; }
.response-title span { font-size:9px; font-weight:800; color:#876b29; text-transform:uppercase; letter-spacing:.07em; }
.response-options { display:flex; gap:7px; flex-wrap:wrap; }
.response-card { min-width:150px; text-align:left; display:grid; gap:2px; border-color:#d7bb75; background:#fffdfa; }
.response-card > span { font-size:7px; font-weight:950; letter-spacing:.10em; color:#927227; }
.response-card > strong { font-size:11px; }
.response-card > small { font-size:8px; color:#7d776d; }
.pass-response { margin-left:auto; background:#2a2927; color:#fff; border-color:#2a2927; }

.chain-panel { display:grid; grid-template-columns:96px minmax(0,1fr); gap:9px; align-items:stretch; }
.chain-heading { border-radius:9px; background:#242321; color:#fff; padding:9px; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:70px; }
.chain-heading span { font-size:8px; font-weight:950; letter-spacing:.14em; opacity:.65; }
.chain-heading strong { font-size:26px; line-height:1; }
.chain-heading small { font-size:7px; text-align:center; margin-top:5px; opacity:.62; }
.chain-stack { display:flex; gap:6px; overflow-x:auto; padding:1px 1px 5px; }
.chain-item { min-width:175px; max-width:230px; min-height:70px; border:1px solid #bdb6ac; background:#fff; border-radius:9px; padding:8px; display:grid; grid-template-columns:26px minmax(0,1fr); gap:7px; align-items:start; position:relative; animation:chain-in .2s ease; }
.chain-order { width:25px; height:25px; border-radius:999px; background:#252422; color:#fff; display:grid; place-items:center; font-size:10px; font-weight:950; }
.chain-item div { display:grid; gap:2px; min-width:0; }
.chain-item strong { font-size:10px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chain-item span:not(.chain-order), .chain-item small { font-size:8px; color:#777168; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chain-item > b { grid-column:1/-1; justify-self:end; font-size:7px; padding:2px 5px; border-radius:999px; background:#f2dede; color:#8b2727; }
.chain-item.delayed > b { background:#e6e4f3; color:#514879; }
.chain-item.negated { opacity:.58; text-decoration:line-through; }
@keyframes chain-in { from { transform:translateY(4px); opacity:.3; } to { transform:none; opacity:1; } }

.card.ability-ready { box-shadow:inset 0 0 0 2px rgba(115,74,164,.16); }
.card-ability { position:absolute; left:5px; top:5px; z-index:4; min-width:30px; height:21px; padding:0 5px; border-radius:999px; border:1px solid #9b82bb; background:#f4edfc; color:#5d367e; font-size:7px; font-weight:950; letter-spacing:.05em; }
.card.attack-ready .card-ability { top:27px; }
.card.ability-ready .card-name { padding-left:30px; }
.card.attack-ready.ability-ready .card-name { padding-left:42px; }

.command-dock { position:sticky; bottom:8px; z-index:8; margin:10px auto 8px; max-width:960px; border:1px solid #bbb4a9; border-radius:13px; background:rgba(255,253,249,.94); backdrop-filter:blur(12px); padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 10px 35px rgba(30,25,18,.12); }
.command-hint { font-size:10px; color:#6e685f; line-height:1.35; }
.command-buttons { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.ability-hint { font-size:8px; font-weight:800; color:#62417d; background:#f3ebfa; border-radius:999px; padding:4px 7px; }
.phase-button { white-space:nowrap; }
.utility-strip { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-start; margin-top:8px; padding:8px 2px 28px; }
.utility-strip details { min-width:150px; }
.utility-strip details[open] { flex:1 1 100%; }
.advanced-actions .actions { margin-top:8px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.advanced-actions .group { border:1px solid #e0dbd2; border-radius:8px; padding:8px; margin:0; }
.event-details { margin-top:0; border-top:0; padding-top:0; }
.debug-meta { margin-bottom:0; }

@media (max-width: 800px) {
  .chain-panel { grid-template-columns:1fr; }
  .chain-heading { min-height:44px; flex-direction:row; gap:8px; }
  .chain-heading small { margin-top:0; }
  .command-dock { position:static; flex-direction:column; align-items:stretch; }
  .command-buttons { justify-content:space-between; flex-wrap:wrap; }
  .archive-grid { grid-template-columns:repeat(2,minmax(100px,1fr)); }
  .board-resource-row { align-items:stretch; }
}

@media (prefers-reduced-motion: reduce) { .chain-item { animation:none; } }

/* v1.8 pending lane, attack connector, resources + first card-type frame language */
.resource-cluster { display:grid; grid-template-columns:minmax(180px,1.35fr) minmax(170px,1fr) 82px; gap:7px; margin:4px 0 7px; }
.resource-card { min-height:58px; border:1px solid #cfc8bd; border-radius:10px; background:#fff; padding:8px 10px; position:relative; overflow:hidden; display:flex; align-items:baseline; gap:5px; }
.resource-card > span { display:block; position:absolute; top:6px; left:9px; font-size:7px; letter-spacing:.10em; font-weight:950; color:#807970; }
.resource-card strong { margin-top:11px; font-size:24px; line-height:1; font-weight:950; }
.resource-card small { font-size:9px; color:#8a837a; font-weight:800; }
.reputation-resource { background:linear-gradient(180deg,#fff,#f7f2eb); }
.reputation-resource .resource-meter { position:absolute; height:5px; left:9px; right:9px; bottom:7px; border-radius:999px; background:#e4ded4; overflow:hidden; }
.reputation-resource .resource-meter i { display:block; height:100%; border-radius:inherit; background:#46433f; transition:width .25s ease; }
.capacity-resource { flex-wrap:wrap; align-content:center; }
.capacity-resource > div:not(.capacity-pips) { margin-top:10px; display:flex; align-items:baseline; gap:3px; }
.capacity-pips { width:100%; display:flex; align-items:center; gap:3px; padding-top:1px; }
.capacity-pip { width:12px; height:5px; border-radius:999px; background:#ded9d1; border:1px solid #cec7bd; }
.capacity-pip.unlocked { background:#ece8e0; border-color:#aca398; }
.capacity-pip.available { background:#306f52; border-color:#306f52; }
.capacity-bonus { margin-left:3px; padding:1px 4px; border-radius:999px; background:#e8f5ed; color:#1d6b42; font-size:7px; }
.hand-resource { align-items:center; justify-content:center; }
.hand-resource > span { left:50%; transform:translateX(-50%); white-space:nowrap; }
.hand-resource strong { margin-top:10px; }

.pending-lane { display:grid; grid-template-columns:82px minmax(0,1fr); gap:8px; margin:7px 0 9px; padding:7px; border:1px dashed #b7a989; border-radius:10px; background:#fff9ec; }
.pending-label { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-right:1px solid #dfd3b7; padding-right:7px; }
.pending-label strong { font-size:9px; letter-spacing:.11em; }
.pending-label span { margin-top:3px; font-size:7px; color:#8d7d59; line-height:1.2; }
.pending-content { display:flex; align-items:stretch; gap:7px; overflow-x:auto; min-height:54px; }
.pending-card-wrap { position:relative; min-width:115px; max-width:115px; }
.pending-card-wrap .card { min-height:78px; padding:6px; opacity:.88; box-shadow:0 4px 12px rgba(83,61,16,.08); }
.pending-card-wrap .card-rules-mini, .pending-card-wrap .card-tags, .pending-card-wrap .card-meta:nth-of-type(n+2) { display:none; }
.pending-timing { position:absolute; left:4px; right:4px; bottom:4px; z-index:5; border-radius:5px; background:rgba(35,31,25,.88); color:#fff; font-size:6px; font-weight:900; text-align:center; padding:2px 3px; letter-spacing:.04em; text-transform:uppercase; }
.scheduled-chip { min-width:150px; max-width:190px; border:1px solid #d6c9aa; border-radius:8px; background:#fffdf7; padding:7px 9px; display:flex; flex-direction:column; justify-content:center; }
.scheduled-chip span { font-size:6px; font-weight:950; letter-spacing:.12em; color:#92752f; }
.scheduled-chip strong { margin-top:3px; font-size:9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.scheduled-chip small { margin-top:2px; font-size:7px; color:#887e6c; }

.attack-overlay { position:fixed; inset:0; width:100vw; height:100vh; z-index:55; pointer-events:none; overflow:visible; }
.attack-overlay path#attackPath { fill:none; stroke:#d14c3d; stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 2px 3px rgba(80,15,8,.3)); stroke-dasharray:10 7; animation:attack-flow .65s linear infinite; }
.attack-overlay marker path { fill:#d14c3d; stroke:none; }
.card.attack-origin { outline:3px solid #d14c3d; outline-offset:3px; }
.card.attack-destination, .resource-card[data-reputation-player].attack-destination { box-shadow:0 0 0 3px rgba(209,76,61,.35); }
@keyframes attack-flow { to { stroke-dashoffset:-17; } }

.card { --type-color:#6e6a64; --type-soft:#f1eee9; border-top-width:5px; border-top-color:var(--type-color); }
.card.type-employee { --type-color:#1765b5; --type-soft:#e8f2fc; }
.card.type-incident { --type-color:#b9433d; --type-soft:#fbeceb; }
.card.type-action { --type-color:#3a8752; --type-soft:#eaf6ed; }
.card.type-system { --type-color:#d08a27; --type-soft:#fff3dc; }
.card.type-workplace { --type-color:#7e5aa5; --type-soft:#f2ebf8; }
.card-type-strip { margin:-4px 26px 5px -2px; display:flex; justify-content:space-between; align-items:center; gap:5px; color:var(--type-color); }
.card-type-strip span { font-size:7px; font-weight:950; letter-spacing:.10em; }
.card-type-strip b { font-size:6px; font-weight:850; letter-spacing:.04em; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-name { padding-top:1px; }
.card.hidden-card { border-top-color:#292929; }
.modal-card-visual { border-width:7px; border-color:var(--type-color,#aaa298); box-shadow:inset 0 0 0 2px rgba(255,255,255,.65); }
.modal-card-visual.type-employee { --type-color:#1765b5; }
.modal-card-visual.type-incident { --type-color:#b9433d; }
.modal-card-visual.type-action { --type-color:#3a8752; }
.modal-card-visual.type-system { --type-color:#d08a27; }
.modal-card-visual .modal-placeholder { border:2px solid color-mix(in srgb, var(--type-color,#777) 30%, transparent); border-radius:11px; background:rgba(255,255,255,.34); }

@media (max-width:800px) {
  .resource-cluster { grid-template-columns:1fr 1fr; }
  .hand-resource { grid-column:1/-1; min-height:42px; }
  .pending-lane { grid-template-columns:1fr; }
  .pending-label { border-right:0; border-bottom:1px solid #dfd3b7; padding:0 0 5px; flex-direction:row; gap:7px; }
}
@media (prefers-reduced-motion: reduce) { .attack-overlay path#attackPath { animation:none; } }


/* v1.9 mirrored battlefield */
.player-board { display: grid; gap: 10px; }
.player-board.own-board { background: linear-gradient(180deg, #fffdf9 0%, #fffaf0 100%); }
.player-board.opponent-board { background: linear-gradient(180deg, #f9fbff 0%, #fffdf9 100%); }
.player-board.opponent-board .player-head { margin-top: 2px; }
.frontline-title span, .backline-title span, .hand-title span { color:#8a847b; font-size:10px; font-weight:500; margin-left:6px; }
.employee-row { position: relative; }
.employee-row::before { content:''; position:absolute; left:0; right:0; top:-6px; height:1px; background:linear-gradient(90deg, transparent, #d7d2c8 15%, #d7d2c8 85%, transparent); }
.opponent-hand-zone { display:grid; gap:6px; }
.opponent-hand-fan { min-height: 62px; display:flex; align-items:flex-start; padding: 4px 4px 0; }
.opponent-hand-card { width: 44px; height: 60px; border-radius: 10px; border:1px solid #474747; background: repeating-linear-gradient(135deg,#303030,#303030 7px,#3c3c3c 7px,#3c3c3c 14px); box-shadow: 0 4px 10px rgba(0,0,0,.16); margin-left:-18px; transform: translateY(calc(var(--fan-index, 0) * 0.5px)) rotate(calc((var(--fan-index, 0) - 4) * 1.7deg)); }
.opponent-hand-card:first-child { margin-left: 0; }
.opponent-hand-more { align-self:center; margin-left:10px; font-size:12px; font-weight:800; color:#605a53; }
.own-hand { padding-top: 4px; }
@media (min-width: 951px) {
  .opponent-board .zone-title, .opponent-board .player-head { text-align: left; }
  .own-board .zone-title, .own-board .player-head { text-align: left; }
}


/* v2.0 card-game polish */
:root { --board-shadow: 0 12px 34px rgba(48,38,24,.07); }
.player-board { box-shadow: var(--board-shadow); }
.opponent-board { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.own-board { border-top-left-radius: 18px; border-top-right-radius: 18px; }
.office-divider { min-height:44px; font-size:9px; letter-spacing:.26em; color:#8f887f; }
.office-divider::before,.office-divider::after { background:linear-gradient(90deg,transparent,#cfc7bc,transparent); }

/* hand fan */
.own-hand { justify-content:center; align-items:flex-start; overflow:visible; min-height:215px; padding:18px 46px 6px; perspective:1200px; }
.own-hand .hand-fan-card { min-width:154px; max-width:154px; min-height:205px; margin-left:-38px; transform:translateY(var(--hand-y,0)) rotate(var(--hand-rot,0)); transform-origin:50% 115%; z-index:var(--hand-z,1); transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease, filter .16s ease; }
.own-hand .hand-fan-card:first-child { margin-left:0; }
.own-hand .hand-fan-card:hover,
.own-hand .hand-fan-card:focus-visible,
.own-hand .hand-fan-card.selected { transform:translateY(-22px) rotate(0deg) scale(1.075); z-index:500 !important; box-shadow:0 22px 42px rgba(36,27,16,.24); }
.opponent-hand-fan { justify-content:center; padding-top:1px; min-height:70px; }
.opponent-hand-card { width:48px; height:66px; margin-left:-20px; border:2px solid #494642; background:
  linear-gradient(135deg,rgba(255,255,255,.05),transparent 35%),
  repeating-linear-gradient(135deg,#252525,#252525 7px,#343434 7px,#343434 14px); }

/* first real frame prototype */
.card:not(.hidden-card) { border-width:2px; border-top-width:7px; border-color:#d0c8bc; border-top-color:var(--type-color); background:linear-gradient(180deg,var(--type-soft) 0 33px,#fffdf9 33px 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 3px 9px rgba(49,39,24,.07); }
.card:not(.hidden-card)::after { content:''; position:absolute; inset:3px; border:1px solid color-mix(in srgb,var(--type-color) 18%,transparent); border-radius:6px; pointer-events:none; z-index:0; }
.card > * { position:relative; z-index:1; }
.card-type-strip { min-height:17px; margin:-3px 28px 5px 0; }
.card-type-strip span { display:inline-flex; align-items:center; padding:2px 6px; border-radius:999px; background:var(--type-color); color:#fff; font-size:6px; }
.card-type-strip b { color:var(--type-color); font-size:6px; }
.card-name { min-height:30px; font-size:12px; line-height:1.13; padding-right:23px; }
.card-art-window { height:43px; margin:5px 0 6px; border-radius:6px; border:1px solid color-mix(in srgb,var(--type-color) 32%,#c8c0b5); background:
  linear-gradient(145deg,color-mix(in srgb,var(--type-soft) 70%,#fff),#f4f0e9),
  repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(0,0,0,.025) 9px,rgba(0,0,0,.025) 10px); display:flex; align-items:center; justify-content:center; flex-direction:column; overflow:hidden; }
.card-art-window span { font-size:17px; line-height:1; font-weight:950; letter-spacing:.13em; color:var(--type-color); opacity:.38; }
.card-art-window small { margin-top:2px; font-size:5px; letter-spacing:.18em; font-weight:950; color:#766f66; opacity:.48; }
.card-rules-mini { min-height:38px; margin-top:6px; padding:6px 6px 5px; border:1px solid #ded7cc; border-radius:5px; background:rgba(255,255,255,.74); -webkit-line-clamp:3; }
.card-meta { font-size:8px; }
.card-tags span { background:color-mix(in srgb,var(--type-soft) 72%,#fff); border:1px solid color-mix(in srgb,var(--type-color) 12%,#ddd); }
.power-badge { width:28px; height:28px; border:2px solid #fff; box-shadow:0 2px 7px rgba(0,0,0,.18); background:var(--type-color); }
.card-info { border:1px solid color-mix(in srgb,var(--type-color) 26%,#bbb); }

/* targeting hierarchy */
.game-shell.interaction-targets .player-board .card:not(.target-candidate):not(.target-selected):not(.interaction-source),
.game-shell.interaction-attack .player-board .card:not(.target-candidate):not(.interaction-source) { opacity:.44; filter:saturate(.6); }
.game-shell.interaction-targets .player-board .card.target-candidate,
.game-shell.interaction-attack .player-board .card.target-candidate { opacity:1; filter:none; transform:translateY(-5px) scale(1.025); box-shadow:0 14px 28px rgba(30,77,132,.18), 0 0 0 3px rgba(37,103,185,.35); }
.card.target-candidate { outline:0; }
.card.target-selected { outline:0; box-shadow:0 12px 26px rgba(29,107,66,.22),0 0 0 4px rgba(29,107,66,.46); }
.card.interaction-attacker { opacity:1 !important; filter:none !important; transform:translateY(-7px) scale(1.03); box-shadow:0 14px 30px rgba(170,94,27,.2),0 0 0 4px rgba(174,109,39,.38); }

/* response moment */
.decision-center.response-active { position:relative; border-color:#cba64f; background:radial-gradient(circle at 50% 0,#fff8df,#f3ede1 72%); box-shadow:0 14px 38px rgba(92,67,14,.12), inset 0 1px rgba(255,255,255,.85); }
.decision-center.response-active::before { content:'RESPONSE WINDOW'; justify-self:center; margin-top:-21px; padding:4px 10px; border-radius:999px; background:#25221c; color:#fff; font-size:7px; font-weight:950; letter-spacing:.14em; }
.response-block { border:0; background:transparent; box-shadow:none; padding:3px 4px 6px; }
.response-title { justify-content:center; text-align:center; flex-wrap:wrap; }
.response-title strong { font-size:15px; }
.response-title span { width:100%; }
.response-options { justify-content:center; gap:10px; }
.response-card { min-width:170px; min-height:62px; border:2px solid #d2ad55; border-radius:11px; background:linear-gradient(180deg,#fffdf7,#fff5d9); box-shadow:0 7px 16px rgba(88,61,7,.08); }
.response-card:hover { transform:translateY(-3px); box-shadow:0 11px 22px rgba(88,61,7,.14); }
.pass-response { min-width:130px; }

/* larger close-up card face */
.modal-card-visual { padding:16px; background:linear-gradient(180deg,var(--type-soft,#f4efe7) 0 17%,#fffdf9 17% 100%) !important; }
.modal-card-visual .modal-name { border-bottom:1px solid color-mix(in srgb,var(--type-color,#777) 25%,#ddd); padding-bottom:9px; }
.modal-card-visual .modal-placeholder { margin:18px 0 12px; min-height:245px; color:var(--type-color,#777); font-size:34px; background:
  linear-gradient(145deg,color-mix(in srgb,var(--type-soft,#eee) 70%,white),rgba(255,255,255,.45)),
  repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(0,0,0,.025) 14px,rgba(0,0,0,.025) 15px); }

@media (max-width:950px) {
  .own-hand { justify-content:flex-start; overflow-x:auto; min-height:180px; padding:12px 6px; }
  .own-hand .hand-fan-card { min-width:138px; max-width:138px; min-height:190px; margin-left:-24px; transform:none; }
  .own-hand .hand-fan-card:hover,.own-hand .hand-fan-card:focus-visible,.own-hand .hand-fan-card.selected { transform:translateY(-8px) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .own-hand .hand-fan-card { transition:none; }
}

/* v2.1 card presence + artwork integration */
@media (min-width: 951px) {
  .slots.employee-row { grid-template-columns:repeat(5,minmax(112px,150px)); justify-content:center; }
  .slots.support-row { grid-template-columns:repeat(4,minmax(112px,150px)); justify-content:center; }
  .employee-row .card, .support-row .card, .employee-row .empty-slot, .support-row .empty-slot { min-height:190px; }
}
.card-art-window.has-art, .modal-art-window.has-art { padding:0; background:#ece7df; }
.card-art-window.has-art img, .modal-art-window.has-art img { width:100%; height:100%; object-fit:cover; display:block; }
.card-art-window.has-art { height:66px; }
.modal-art-window { margin:18px 0 12px; min-height:245px; border:2px solid color-mix(in srgb,var(--type-color,#777) 30%,transparent); border-radius:11px; background:rgba(255,255,255,.34); display:flex; align-items:center; justify-content:center; flex-direction:column; overflow:hidden; color:var(--type-color,#777); font-size:34px; font-weight:900; letter-spacing:.12em; }
.modal-art-window small { font-size:9px; margin-top:4px; letter-spacing:.18em; }

.hover-card-preview { position:fixed; z-index:90; width:280px; pointer-events:none; filter:drop-shadow(0 24px 38px rgba(35,28,20,.24)); }
.hover-card-face { --type-color:#777; --type-soft:#f3efe9; border:7px solid var(--type-color); border-radius:15px; padding:13px; background:linear-gradient(180deg,var(--type-soft) 0 66px,#fffdf9 66px 100%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.75); }
.hover-card-face.type-employee { --type-color:#1765b5; --type-soft:#eaf2ff; }
.hover-card-face.type-incident { --type-color:#b9433d; --type-soft:#fff0ed; }
.hover-card-face.type-action { --type-color:#3a8752; --type-soft:#ecf7ef; }
.hover-card-face.type-system { --type-color:#d08a27; --type-soft:#fff2df; }
.hover-type { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--type-color); }
.hover-type span { padding:3px 7px; border-radius:999px; background:var(--type-color); color:white; font-size:8px; font-weight:950; letter-spacing:.09em; }
.hover-type b { font-size:8px; letter-spacing:.05em; opacity:.78; }
.hover-name { min-height:48px; padding:9px 2px 7px; font-size:22px; line-height:1.02; font-weight:950; }
.hover-card-face .card-art-window { height:142px; margin:3px 0 9px; }
.hover-meta { margin:5px 0 8px; font-size:10px; font-weight:800; color:#69635c; }
.hover-rules { min-height:84px; border:1px solid #dbd4ca; border-radius:7px; padding:9px; background:rgba(255,255,255,.82); font-size:12px; line-height:1.35; }
@media (max-width: 1120px) { .hover-card-preview { display:none !important; } }


/* v2.2 consistent card footprint */
.card:not(.hidden-card) { display:grid; grid-template-rows:auto auto auto auto auto 1fr auto; align-content:start; }
.card-type-strip { margin-bottom:4px; }
.card-art-window { flex:0 0 auto; }
.card-meta { min-height:10px; }
.card-rules-mini { min-height:44px; }
.card-rules-mini.empty { border-style:dashed; opacity:.0; min-height:44px; }
.card-tags { min-height:18px; align-content:start; }
.card-tags.empty { min-height:18px; }
.own-hand .hand-fan-card { width:154px; height:205px; min-width:154px; max-width:154px; min-height:205px; max-height:205px; }
@media (max-width:950px) {
  .own-hand .hand-fan-card { width:138px; height:190px; min-width:138px; max-width:138px; min-height:190px; max-height:190px; }
}

/* v2.3 fixed field proportions + canonical 16:9 artwork crop */
.card-art-window,
.modal-art-window,
.hover-card-face .card-art-window { aspect-ratio:16 / 9; height:auto; min-height:0; }
.card-art-window picture,
.modal-art-window picture { display:block; width:100%; height:100%; }
.card-art-window.has-art img,
.modal-art-window.has-art img { width:100%; height:100%; object-fit:cover; object-position:center; }

@media (min-width:951px) {
  .slots.employee-row { grid-template-columns:repeat(5,150px); justify-content:center; }
  .slots.support-row { grid-template-columns:repeat(4,150px); justify-content:center; }
  .employee-row .card,
  .support-row .card,
  .employee-row .empty-slot,
  .support-row .empty-slot { width:150px; min-width:150px; max-width:150px; height:210px; min-height:210px; max-height:210px; }
}

/* v2.3 canonical artwork crop + fixed field card footprint */
:root {
  --field-card-width: 150px;
  --field-card-height: 210px;
  --hand-card-width: 154px;
  --hand-card-height: 216px;
}

/* Every visible artwork window uses the same 16:9 source crop. */
.card-art-window,
.card-art-window.has-art,
.modal-art-window,
.hover-card-face .card-art-window {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}
.card-art-window.has-art img,
.modal-art-window.has-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Board cards no longer grow/shrink with rules text, tags or artwork availability. */
@media (min-width: 951px) {
  .slots.employee-row {
    grid-template-columns: repeat(5, var(--field-card-width));
    justify-content: center;
  }
  .slots.support-row {
    grid-template-columns: repeat(4, var(--field-card-width));
    justify-content: center;
  }
  .employee-row .card,
  .support-row .card,
  .employee-row .empty-slot,
  .support-row .empty-slot {
    width: var(--field-card-width);
    height: var(--field-card-height);
    min-width: var(--field-card-width);
    max-width: var(--field-card-width);
    min-height: var(--field-card-height);
    max-height: var(--field-card-height);
  }
}

/* Hand cards share one fixed physical footprint as well. */
.own-hand .hand-fan-card {
  width: var(--hand-card-width);
  height: var(--hand-card-height);
  min-width: var(--hand-card-width);
  max-width: var(--hand-card-width);
  min-height: var(--hand-card-height);
  max-height: var(--hand-card-height);
}

/* Stable internal zones prevent content length from changing perceived card size. */
.card:not(.hidden-card) {
  display: flex;
  flex-direction: column;
}
.card-name { flex: 0 0 auto; }
.card-meta { flex: 0 0 auto; }
.card-rules-mini {
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 48px;
}
.card-tags {
  flex: 0 0 18px;
  min-height: 18px;
  margin-top: 5px;
  overflow: hidden;
}
.card-tags.empty { visibility: hidden; }
.card-rules-mini.empty { visibility: hidden; }

@media (max-width: 950px) {
  .card-art-window,
  .card-art-window.has-art,
  .hover-card-face .card-art-window { aspect-ratio: 16 / 9; }
  .own-hand .hand-fan-card {
    width: 138px;
    height: 196px;
    min-width: 138px;
    max-width: 138px;
    min-height: 196px;
    max-height: 196px;
  }
}

/* v2.4 direct board placement + field runtime readability */
.empty-slot.slot-candidate {
  border:2px solid #5f8fc5;
  background:linear-gradient(180deg,rgba(229,241,255,.92),rgba(247,251,255,.72));
  color:#235d98;
  cursor:pointer;
  box-shadow:0 0 0 3px rgba(74,128,187,.12), inset 0 0 28px rgba(69,124,185,.08);
  display:flex;
  flex-direction:column;
  gap:5px;
  animation:slot-ready 1.25s ease-in-out infinite alternate;
}
.empty-slot.slot-candidate span { font-size:10px; font-weight:950; letter-spacing:.08em; }
.empty-slot.slot-candidate small { font-size:7px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.empty-slot.slot-candidate:hover,
.empty-slot.slot-candidate:focus-visible {
  transform:translateY(-4px) scale(1.015);
  border-color:#236cb4;
  box-shadow:0 12px 26px rgba(41,99,157,.18),0 0 0 4px rgba(47,112,178,.16);
}
@keyframes slot-ready {
  from { box-shadow:0 0 0 2px rgba(74,128,187,.08), inset 0 0 20px rgba(69,124,185,.04); }
  to { box-shadow:0 0 0 4px rgba(74,128,187,.16), inset 0 0 34px rgba(69,124,185,.12); }
}
.slot-guidance { border-style:dashed; }
.promotion-guidance .promotion-option { min-width:210px; text-align:left; }

.card-runtime-row {
  min-height:16px;
  display:flex;
  align-items:center;
  gap:4px;
  margin:3px 0 1px;
  overflow:hidden;
}
.runtime-badge {
  display:inline-flex;
  align-items:center;
  min-height:14px;
  padding:2px 5px;
  border-radius:999px;
  font-size:6px;
  line-height:1;
  font-weight:950;
  letter-spacing:.07em;
  white-space:nowrap;
  background:#eee9e1;
  color:#625c54;
  border:1px solid #d4ccc1;
}
.runtime-badge.onboarding { background:#fff0c8; color:#7a5814; border-color:#e4c36e; }
.runtime-badge.attacks { background:#edf1f5; color:#46515d; border-color:#c8d0d8; }
.runtime-badge.attacks.ready { background:#e7f5eb; color:#1e6a3d; border-color:#9ecbad; }

.game-shell.interaction-employee .own-board .employee-row .empty-slot:not(.slot-candidate),
.game-shell.interaction-support .own-board .support-row .empty-slot:not(.slot-candidate) {
  opacity:.34;
}
.game-shell.interaction-promotion .own-board .employee-row { filter:saturate(.92); }

@media (prefers-reduced-motion: reduce) {
  .empty-slot.slot-candidate { animation:none; }
}

/* v2.5 refined card frame + information hierarchy */
.card:not(.hidden-card) {
  padding: 6px 6px 5px;
  border: 2px solid color-mix(in srgb, var(--type-color) 42%, #c8c0b5);
  border-top: 8px solid var(--type-color);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--type-soft) 88%, #fff) 0 36px, #fffdf9 36px 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    0 4px 10px rgba(45,35,22,.08);
}
.card:not(.hidden-card)::after {
  inset: 3px;
  border-color: color-mix(in srgb, var(--type-color) 16%, transparent);
  border-radius: 6px;
}
.card-type-strip {
  min-height: 14px;
  margin: -3px 24px 2px 0;
  gap: 5px;
}
.card-type-strip span {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--type-color);
  color: #fff;
  font-size: 6px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: .10em;
}
.card-type-strip b {
  margin-left: auto;
  color: color-mix(in srgb, var(--type-color) 82%, #333);
  font-size: 6px;
  font-weight: 950;
  letter-spacing: .10em;
  opacity: .78;
}
.card-info {
  top: 3px;
  right: 4px;
  width: 19px;
  height: 19px;
  font-size: 9px;
  background: rgba(255,255,255,.92);
}
.card-name-row {
  min-height: 32px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0 0 3px;
}
.card-name-row .card-name {
  min-width: 0;
  min-height: 29px;
  flex: 1 1 auto;
  padding: 1px 0 0;
  font-size: 12px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.card-name-row .card-name.long-name { font-size: 10.6px; line-height: 1.05; }
.card-cost-badge {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border-radius: 8px;
  display: grid;
  grid-template-rows: 9px 1fr;
  align-items: center;
  justify-items: center;
  padding: 2px 1px 1px;
  border: 1px solid color-mix(in srgb, var(--type-color) 40%, #c7beb2);
  background: color-mix(in srgb, var(--type-soft) 76%, #fff);
  color: color-mix(in srgb, var(--type-color) 88%, #24211e);
}
.card-cost-badge span {
  font-size: 5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
}
.card-cost-badge b {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
}
.card-art-stage {
  position: relative;
  flex: 0 0 auto;
  margin: 0 0 3px;
}
.card-art-stage .card-art-window {
  margin: 0;
  border-radius: 6px;
  border-width: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
.card-art-stage .card-runtime-row {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  min-height: 0;
  margin: 0;
  z-index: 4;
  pointer-events: none;
}
.card-art-stage .runtime-badge {
  min-height: 13px;
  padding: 2px 4px;
  border-width: 1px;
  box-shadow: 0 2px 5px rgba(0,0,0,.13);
  backdrop-filter: blur(4px);
}
.card-detail-row {
  min-height: 13px;
  flex: 0 0 13px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.card-detail-row span:not(.detail-spacer) {
  display: inline-flex;
  align-items: center;
  min-height: 12px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #f0ece5;
  color: #6c655d;
  font-size: 5.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .065em;
  white-space: nowrap;
}
.card-detail-row .detail-spacer { display:block; min-height:12px; }
.card-rules-mini {
  flex: 1 1 auto;
  min-height: 36px;
  max-height: 43px;
  margin: 3px 0 0;
  padding: 5px 5px 4px;
  border: 1px solid #ddd5ca;
  border-radius: 5px;
  background: rgba(255,255,255,.82);
  color: #37332f;
  font-size: 7.8px;
  line-height: 1.22;
  -webkit-line-clamp: 4;
}
.card-tags {
  flex: 0 0 16px;
  min-height: 16px;
  height: 16px;
  margin-top: 3px;
  gap: 2px;
  padding-right: 30px;
}
.card-tags span {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 5.5px;
  line-height: 1;
  font-weight: 950;
}
.power-badge {
  right: 5px;
  bottom: 4px;
  width: 27px;
  min-width: 27px;
  height: 27px;
  font-size: 11px;
  border-width: 2px;
}
.card.legal-card {
  border-color: color-mix(in srgb, #27774c 65%, var(--type-color));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    0 0 0 2px rgba(39,119,76,.14),
    0 7px 16px rgba(45,35,22,.10);
}
.card.legal-card::after { content: ''; }

/* The hover face follows the same hierarchy at a larger, readable scale. */
.hover-card-face .card-name-row { min-height: 48px; margin-bottom: 6px; }
.hover-card-face .card-name { font-size: 22px; line-height: 1.02; }
.hover-card-face .card-cost-badge { width: 40px; height: 40px; flex-basis: 40px; grid-template-rows: 11px 1fr; }
.hover-card-face .card-cost-badge b { font-size: 22px; }

@media (max-width:950px) {
  .card-name-row .card-name { font-size: 10.8px; }
  .card-name-row .card-name.long-name { font-size: 9.6px; }
  .card-cost-badge { width: 26px; height: 26px; flex-basis: 26px; }
  .card-cost-badge b { font-size: 14px; }
  .card-rules-mini { font-size: 7.2px; }
}
.hover-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.hover-tags span { padding:3px 6px; border-radius:5px; background:color-mix(in srgb,var(--type-soft) 70%,#fff); border:1px solid color-mix(in srgb,var(--type-color) 16%,#ddd); color:#4b4640; font-size:8px; font-weight:900; letter-spacing:.06em; }


/* v2.7 tag readability + unified close-up card */
.card-tags {
  flex: 0 0 22px;
  min-height: 22px;
  height: 22px;
  max-height: 22px;
  margin-top: 3px;
  gap: 2px;
  padding-right: 0;
  overflow: hidden;
  align-content: flex-start;
}
.card.has-power .card-tags { padding-right: 32px; }
.card-tags span {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-rules-mini {
  min-height: 31px;
  max-height: 36px;
  font-size: 7.2px;
  line-height: 1.17;
  -webkit-line-clamp: 3;
}
.card-rules-mini.empty { min-height: 31px; }
.card-detail-row { min-height: 12px; flex-basis: 12px; }
.card-detail-row span:not(.detail-spacer) { font-size: 5.2px; }
.power-badge { z-index: 5; }

.card-modal.frame-modal {
  width: min(980px, 96vw);
  max-height: min(760px, 92vh);
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  align-items: start;
}
.modal-card-column { display:flex; justify-content:center; }
.modal-card-face {
  width: min(100%, 360px);
  min-width: 0;
  height: 500px;
  min-height: 500px;
  max-height: 500px;
  cursor: default;
  box-shadow: 0 22px 46px rgba(27,21,16,.16), inset 0 0 0 1px rgba(255,255,255,.84);
}
.modal-card-face .card-type-strip { min-height: 24px; margin: 0 0 8px; gap: 8px; }
.modal-card-face .card-type-strip span { font-size: 10px; padding: 4px 10px; }
.modal-card-face .card-type-strip b { font-size: 10px; }
.modal-card-face .card-name-row { min-height: 62px; margin-bottom: 8px; gap: 8px; }
.modal-card-face .card-name-row .card-name,
.modal-card-face .card-name-row .card-name.long-name { min-height: 56px; font-size: 31px; line-height: 0.98; }
.modal-card-face .card-cost-badge { width: 48px; height: 48px; flex-basis: 48px; grid-template-rows: 14px 1fr; border-radius: 12px; }
.modal-card-face .card-cost-badge span { font-size: 8px; }
.modal-card-face .card-cost-badge b { font-size: 28px; }
.modal-card-face .card-art-stage { margin-bottom: 8px; }
.modal-card-face .card-art-window,
.modal-card-face .card-art-window.has-art { border-radius: 10px; }
.modal-card-face .card-art-window.has-art img { object-fit: cover; object-position: center; }
.modal-card-face .card-runtime-row { left: 6px; right: 6px; bottom: 6px; gap: 6px; }
.modal-card-face .runtime-badge { min-height: 22px; padding: 4px 8px; font-size: 10px; }
.modal-card-face .card-detail-row { min-height: 22px; flex-basis: 22px; gap: 5px; margin-bottom: 4px; }
.modal-card-face .card-detail-row span:not(.detail-spacer) { min-height: 20px; padding: 3px 7px; border-radius: 999px; font-size: 9px; }
.modal-card-face .card-rules-mini,
.modal-card-face .modal-rules-box {
  min-height: 118px;
  max-height: none;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 16px;
  line-height: 1.42;
  -webkit-line-clamp: initial;
  overflow: visible;
}
.modal-card-face .card-tags {
  flex-basis: 36px;
  min-height: 36px;
  height: auto;
  max-height: none;
  margin-top: 8px;
  gap: 5px;
  overflow: visible;
}
.modal-card-face.has-power .card-tags { padding-right: 62px; }
.modal-card-face .card-tags span { padding: 4px 8px; border-radius: 6px; font-size: 9px; }
.modal-card-face .power-badge { right: 8px; bottom: 8px; width: 52px; min-width: 52px; height: 52px; font-size: 22px; border-width: 3px; }
.frame-copy { padding-top: 8px; }
.frame-copy h2 { margin: 6px 0 4px; font-size: 32px; line-height: 1.02; }
.frame-copy .modal-meta { font-size: 13px; }
.detail-chip-row { display:flex; flex-wrap:wrap; gap:7px; margin: 12px 0 16px; }
.detail-chip-row span { display:inline-flex; align-items:center; min-height:24px; padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--type-soft,#f1eee8) 82%, #fff); border:1px solid #ddd3c6; color:#5e5851; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.detail-chip-row .empty { opacity:.65; }
.frame-panel { margin-top: 14px; padding: 14px 16px; border:1px solid #ddd5ca; border-radius: 12px; background: rgba(255,255,255,.78); }
.frame-panel h4 { margin:0 0 8px; text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.frame-panel .flavor-text { margin:0; font-size: 17px; line-height: 1.45; }
.frame-panel .runtime-box { font-size: 15px; line-height: 1.4; }
@media (max-width: 860px) {
  .card-modal.frame-modal { grid-template-columns: 1fr; width:min(96vw, 680px); }
  .modal-card-face { width: min(100%, 360px); height: 490px; min-height: 490px; margin: 0 auto; }
}

/* v2.8 final card-foot polish + Collection / Deckbuilder */
:root {
  --field-card-height: 214px;
  --hand-card-height: 220px;
}
.card-tags { min-height:23px; height:23px; max-height:23px; }
.card-rules-mini { min-height:30px; max-height:35px; }
.card-rules-mini.empty { min-height:30px; }

.lobby-nav { max-width:900px; margin:7vh auto 16px; display:flex; align-items:center; gap:12px; }
.lobby { margin-top:0; }
.collection-shell { width:min(1540px,100%); margin:0 auto; }
.collection-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:14px; padding:13px 15px; border:1px solid #cec7bc; border-radius:14px; background:#fffdf9; }
.collection-toolbar > div:first-child { display:flex; align-items:center; flex-wrap:wrap; gap:9px 12px; }
.collection-toolbar > div:first-child strong { font-size:20px; }
.economy-preview { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.economy-preview span { border:1px solid #d6cfc5; border-radius:999px; padding:5px 9px; background:#f4f0e9; font-size:8px; font-weight:900; letter-spacing:.07em; }
.economy-preview small { flex-basis:100%; text-align:right; color:#8d867d; font-size:8px; }
.collection-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; align-items:start; }
.collection-browser { min-width:0; }
.collection-filters { position:sticky; top:70px; z-index:6; display:grid; grid-template-columns:minmax(220px,1fr) 180px 150px auto; gap:7px; padding:9px; margin-bottom:9px; border:1px solid #d1cabf; border-radius:11px; background:rgba(255,253,249,.96); backdrop-filter:blur(10px); }
.collection-filters input,.collection-filters select,.deck-builder-panel input,.deck-builder-panel select { width:100%; border:1px solid #bfb7aa; border-radius:8px; padding:8px; background:#fff; }
.collection-filters > span { align-self:center; justify-self:end; font-size:10px; color:#7c756c; }
.collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:9px; }
.collection-card { --collection-type:#777; min-height:245px; display:flex; flex-direction:column; gap:5px; padding:8px; border:2px solid color-mix(in srgb,var(--collection-type) 30%,#cfc7bc); border-top:6px solid var(--collection-type); border-radius:11px; background:#fffdf9; box-shadow:0 4px 12px rgba(40,32,20,.05); }
.collection-card.type-employee { --collection-type:#1765b5; }
.collection-card.type-incident { --collection-type:#b9433d; }
.collection-card.type-action { --collection-type:#3a8752; }
.collection-card.type-system { --collection-type:#d08a27; }
.collection-art { width:100%; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; border-radius:7px; border:1px solid color-mix(in srgb,var(--collection-type) 22%,#d4cdc2); background:#f1ede6; color:var(--collection-type); font-size:22px; font-weight:950; }
.collection-art img { width:100%; height:100%; object-fit:cover; display:block; }
.collection-card-head { display:flex; justify-content:space-between; gap:7px; color:var(--collection-type); font-size:7px; font-weight:950; letter-spacing:.07em; }
.collection-card > strong { min-height:34px; font-size:13px; line-height:1.05; }
.collection-card > small { color:#756e65; font-size:9px; }
.collection-copy-control { margin-top:auto; display:grid; grid-template-columns:34px 1fr 34px; gap:4px; align-items:center; }
.collection-copy-control button { padding:5px; font-weight:950; }
.collection-copy-control span { text-align:center; font-size:10px; font-weight:900; }
.deck-builder-panel { position:sticky; top:70px; max-height:calc(100vh - 90px); overflow:auto; border:1px solid #c8c0b5; border-radius:14px; padding:12px; background:#fffdf9; box-shadow:0 12px 34px rgba(40,32,20,.08); }
.deck-builder-head { display:grid; grid-template-columns:1fr 72px; gap:8px; align-items:end; }
.deck-builder-head label { font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.deck-total { height:55px; border:1px solid #d1c8bc; border-radius:10px; background:#f2eee8; display:flex; justify-content:center; align-items:baseline; gap:3px; }
.deck-total strong { font-size:27px; }
.deck-total span { font-size:10px; color:#7d766d; }
.deck-total.valid { border-color:#8fb69d; background:#eef8f1; color:#1f6a3c; }
.deck-switcher { display:grid; grid-template-columns:1fr auto auto; gap:5px; margin:8px 0; }
.deck-validation { display:grid; gap:3px; padding:8px 9px; border-radius:8px; font-size:9px; }
.deck-validation.invalid { border:1px solid #e0b4b4; background:#fff1f1; color:#8d2e2e; }
.deck-validation.valid { border:1px solid #a9cdb5; background:#eef8f1; color:#286a40; }
.deck-list { margin-top:9px; display:grid; gap:4px; }
.deck-list > div { display:grid; gap:1px; padding:6px 7px; border:1px solid #e1dbd2; border-radius:7px; background:#f8f5f0; }
.deck-list > div span { font-size:10px; }
.deck-list > div small { font-size:7px; color:#837c72; }
@media (max-width:1000px) {
  .collection-layout { grid-template-columns:1fr; }
  .deck-builder-panel { position:static; max-height:none; order:-1; }
  .collection-filters { position:static; grid-template-columns:1fr 1fr; }
  .economy-preview { display:none; }
}

/* v2.9 deckbuilder analysis + match onboarding */
.collection-filters { grid-template-columns:minmax(220px,1fr) 170px 140px 130px auto; }
.collection-card { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.collection-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(40,32,20,.10); }
.collection-preview { --collection-type:#777; margin-bottom:12px; padding:10px; border:2px solid color-mix(in srgb,var(--collection-type) 28%,#cfc7bc); border-top:6px solid var(--collection-type); border-radius:12px; background:#fffdf9; }
.collection-preview.type-employee { --collection-type:#1765b5; }
.collection-preview.type-incident { --collection-type:#b9433d; }
.collection-preview.type-action { --collection-type:#3a8752; }
.collection-preview.type-system { --collection-type:#d08a27; }
.collection-preview.empty { min-height:100px; display:grid; align-content:center; gap:5px; color:#8a8379; border-style:dashed; }
.collection-preview-art { width:100%; aspect-ratio:16/9; overflow:hidden; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--collection-type) 22%,#d4cdc2); border-radius:8px; background:#f2eee7; color:var(--collection-type); font-size:28px; font-weight:950; }
.collection-preview-art img { width:100%; height:100%; object-fit:cover; display:block; }
.collection-preview-type { margin-top:8px; display:flex; justify-content:space-between; gap:8px; color:var(--collection-type); font-size:8px; font-weight:950; letter-spacing:.08em; }
.collection-preview h3 { margin:5px 0 3px; font-size:20px; line-height:1.04; }
.collection-preview-meta { color:#756e65; font-size:10px; font-weight:800; }
.collection-preview p { margin:9px 0; font-size:11px; line-height:1.4; }
.collection-preview em { display:block; margin:9px 0; color:#716a61; font-size:10px; line-height:1.35; }
.collection-preview-tags { display:flex; flex-wrap:wrap; gap:4px; }
.collection-preview-tags span { padding:3px 6px; border-radius:5px; border:1px solid #ddd4c8; background:#f2eee7; font-size:7px; font-weight:900; letter-spacing:.06em; }
.preview-copy-control { display:grid; grid-template-columns:38px 1fr 38px; gap:5px; align-items:center; margin-top:10px; }
.preview-copy-control strong { text-align:center; font-size:10px; }

.deck-stats { margin:11px 0; padding:10px; border:1px solid #d6cfc5; border-radius:10px; background:#f8f5ef; }
.deck-stat-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.deck-stat-head strong { font-size:11px; }
.deck-stat-head span { font-size:9px; color:#777067; font-weight:800; }
.type-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.type-stat { --stat:#777; min-width:0; padding:5px 3px; border-radius:7px; border:1px solid color-mix(in srgb,var(--stat) 22%,#ddd); background:#fff; display:grid; justify-items:center; gap:1px; color:var(--stat); font-size:6px; font-weight:900; letter-spacing:.04em; }
.type-stat b { font-size:15px; line-height:1; }
.type-stat.type-employee { --stat:#1765b5; }.type-stat.type-action { --stat:#3a8752; }.type-stat.type-incident { --stat:#b9433d; }.type-stat.type-system { --stat:#d08a27; }
.curve-title { margin-top:9px; font-size:7px; font-weight:950; letter-spacing:.09em; text-transform:uppercase; color:#777067; }
.cost-curve { height:72px; display:grid; grid-template-columns:repeat(8,1fr); gap:3px; align-items:end; margin-top:4px; }
.cost-curve > div { height:68px; display:grid; grid-template-rows:1fr 12px 10px; align-items:end; justify-items:center; }
.cost-curve i { width:70%; min-height:3px; max-height:46px; border-radius:4px 4px 1px 1px; background:#383431; }
.cost-curve b { font-size:8px; line-height:1; }
.cost-curve span { font-size:7px; color:#7b746b; }
.deck-taxonomy,.deck-tag-cloud { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.deck-taxonomy span,.deck-tag-cloud span { padding:3px 6px; border-radius:999px; background:#eee9e1; font-size:7px; color:#655f57; }
.deck-tag-cloud span { background:#fff; border:1px solid #ddd6cc; }

.match-opening { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin-bottom:10px; padding:10px 14px; border:1px solid #cfc7bb; border-radius:14px; background:linear-gradient(90deg,#eef5ff,#fffdf9 38%,#fffdf9 62%,#fff2ef); box-shadow:0 8px 24px rgba(35,28,20,.06); }
.match-deck { display:flex; align-items:center; gap:9px; min-width:0; }
.match-deck.opponent { justify-content:flex-end; text-align:right; }
.match-deck > span { width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:grid; place-items:center; background:#252321; color:#fff; font-size:10px; font-weight:950; letter-spacing:.07em; }
.match-deck div { min-width:0; display:grid; gap:2px; }
.match-deck small { font-size:7px; font-weight:900; letter-spacing:.10em; color:#8a837a; }
.match-deck strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.match-opening-center { display:grid; justify-items:center; gap:2px; text-align:center; }
.match-opening-center b { font-size:9px; letter-spacing:.15em; }
.match-opening-center span { font-size:8px; color:#7c756d; }
.match-opening.office-open { border-color:#d3ba75; background:linear-gradient(90deg,#eef5ff,#fff7da 50%,#fff2ef); }

.mulligan-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:13px 15px; border:2px solid #668bb8; border-radius:12px; background:linear-gradient(180deg,#f4f8ff,#edf4ff); }
.mulligan-panel > div:first-child { display:grid; gap:3px; }
.mulligan-panel > div:first-child > span { font-size:7px; color:#416c9e; font-weight:950; letter-spacing:.12em; }
.mulligan-panel > div:first-child > strong { font-size:14px; }
.mulligan-panel > div:first-child > small { color:#6d747d; font-size:9px; line-height:1.35; }
.mulligan-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.mulligan-actions b { font-size:9px; color:#55728e; margin-right:4px; }
.mulligan-hand .card { cursor:pointer; }
.mulligan-hand .card.selected { transform:translateY(-25px) rotate(0deg) scale(1.075); box-shadow:0 20px 38px rgba(25,72,118,.18),0 0 0 4px rgba(50,112,174,.3); }
.mulligan-hand .card.selected::before { content:'REPLACE'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-6deg); z-index:8; padding:5px 9px; border-radius:999px; background:#255f98; color:#fff; font-size:8px; font-weight:950; letter-spacing:.10em; box-shadow:0 4px 14px rgba(20,50,80,.24); }

@media (max-width:1000px) {
  .collection-filters { grid-template-columns:1fr 1fr; }
  .match-opening { grid-template-columns:1fr; gap:7px; }
  .match-deck.opponent { justify-content:flex-start; text-align:left; flex-direction:row-reverse; }
  .match-opening-center { order:-1; }
  .mulligan-panel { grid-template-columns:1fr; }
  .mulligan-actions { justify-content:flex-start; }
}

/* v3.0 meta-game scaffolding + graphical board polish */
body {
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(180deg,#ebe6dd 0,#f4f1eb 42%,#ebe7df 100%);
}
.topbar {
  border-bottom-color:#c9c1b5;
  box-shadow:0 5px 20px rgba(46,36,24,.06);
}
.game-main {
  position:relative;
  padding:12px;
  border:1px solid #cfc7bb;
  border-radius:20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.24) 1px,transparent 1px),
    linear-gradient(145deg,#e8e1d6,#f4efe7 42%,#e4ddd2);
  background-size:32px 32px,32px 32px,auto;
  box-shadow:0 20px 55px rgba(46,35,22,.10),inset 0 1px rgba(255,255,255,.68);
}
.player-board {
  border-color:#c4baad;
  background:rgba(255,253,249,.88);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 22px rgba(42,32,21,.055),inset 0 1px rgba(255,255,255,.78);
}
.opponent-board { background:linear-gradient(180deg,rgba(244,248,252,.92),rgba(255,253,249,.91)); }
.own-board { background:linear-gradient(180deg,rgba(255,253,249,.92),rgba(255,249,239,.94)); }
.employee-row,.support-row {
  padding:8px 10px;
  border-radius:13px;
  border:1px solid rgba(158,147,133,.22);
  background:rgba(255,255,255,.20);
}
.employee-row { box-shadow:inset 0 0 28px rgba(58,101,145,.025); }
.support-row { box-shadow:inset 0 0 28px rgba(137,103,58,.025); }
.zone-title { padding-left:4px; }
.office-divider {
  margin:2px 0;
  color:#746d64;
  text-shadow:0 1px rgba(255,255,255,.7);
}
.office-divider::before,.office-divider::after { height:2px; opacity:.62; }
.phase-track {
  border-radius:10px;
  border:1px solid rgba(160,149,135,.34);
  padding:4px;
  background:rgba(255,253,249,.68);
}
.turn-banner { box-shadow:0 6px 18px rgba(47,36,22,.07); }

.mode-preview {
  display:grid;
  gap:3px;
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid #d2cabf;
  border-radius:10px;
  background:#f7f3ec;
}
.mode-preview strong { font-size:11px; }
.mode-preview span { font-size:9px; color:#69635b; line-height:1.35; }
.mode-preview small { font-size:8px; color:#8a8379; }
.mode-preview.compact { margin-top:12px; }
.room-rule-notice { display:grid; gap:4px; text-align:center; }
.room-rule-notice > span { font-size:9px; color:#6c655c; text-transform:uppercase; letter-spacing:.07em; }
.match-opening-center small { font-size:7px; color:#8b8278; }

.meta-roadmap {
  margin-bottom:14px;
  padding:13px;
  border:1px solid #cfc6b9;
  border-radius:14px;
  background:linear-gradient(145deg,#fffdf9,#f3eee6);
  box-shadow:0 7px 22px rgba(40,31,19,.05);
}
.meta-roadmap-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.meta-roadmap-head > div { display:grid; gap:2px; }
.meta-roadmap-head span { font-size:7px; font-weight:950; letter-spacing:.13em; color:#867d73; }
.meta-roadmap-head strong { font-size:15px; }
.meta-roadmap-head > b { padding:4px 8px; border-radius:999px; background:#292725; color:#fff; font-size:7px; letter-spacing:.08em; }
.meta-roadmap-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.meta-path { min-height:116px; display:grid; align-content:start; gap:5px; padding:11px; border:1px solid #d6cec3; border-radius:11px; background:rgba(255,255,255,.72); }
.meta-path > span { font-size:7px; font-weight:950; letter-spacing:.11em; }
.meta-path > strong { font-size:12px; }
.meta-path p { margin:1px 0; font-size:9px; line-height:1.4; color:#655f57; }
.meta-path small { margin-top:auto; font-size:7.5px; line-height:1.35; color:#8a8278; }
.meta-path.credits { border-top:4px solid #c7922b; }
.meta-path.scraps { border-top:4px solid #75828b; }
.meta-path.progression { border-top:4px solid #7c63a0; }
.rarity-plan { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.rarity-plan > span { display:grid; grid-template-columns:auto 1fr; gap:2px 6px; align-items:baseline; padding:7px 8px; border-radius:8px; background:#ece7df; color:#5f5952; font-size:8px; }
.rarity-plan b { font-size:9px; }
.rarity-plan small { grid-column:1/-1; color:#847c72; }
@media (max-width:900px) {
  .meta-roadmap-grid { grid-template-columns:1fr; }
  .rarity-plan { grid-template-columns:1fr 1fr; }
  .game-main { padding:6px; border-radius:14px; }
}

/* v3.1 mobile crossplay foundation */
.mobile-board-nav { display:none; }

@media (max-width:760px) {
  html { scroll-behavior:smooth; }
  body { overflow-x:hidden; }
  .topbar { min-height:52px; padding:0 10px; }
  .topbar strong { font-size:13px; }
  .topbar .muted { font-size:9px; }
  .app { padding:8px; }
  .game-main { padding:5px; border-radius:12px; }
  .turn-banner { padding:9px 10px; gap:7px; }
  .turn-label { font-size:11px; }
  .turn-detail { font-size:9px; }
  .phase-track { position:sticky; top:52px; z-index:9; margin-bottom:5px; padding:3px; backdrop-filter:blur(12px); }
  .phase-track span { padding:5px 2px; font-size:7px; }

  .mobile-board-nav {
    position:sticky;
    top:86px;
    z-index:9;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    margin:0 0 7px;
    padding:4px;
    border:1px solid #c8c0b5;
    border-radius:9px;
    background:rgba(255,253,249,.94);
    box-shadow:0 5px 16px rgba(38,29,18,.08);
    backdrop-filter:blur(12px);
  }
  .mobile-board-nav button { min-height:36px; padding:6px 5px; border-color:#d6cfc5; font-size:9px; font-weight:900; touch-action:manipulation; }

  .player-board { scroll-margin-top:132px; padding:8px 7px 10px; border-radius:11px; }
  #decisionCenter { scroll-margin-top:132px; }
  .player-head { margin-bottom:5px; }
  .resource-cluster { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 58px; gap:4px; }
  .resource-card { min-height:50px; padding:6px 7px; }
  .resource-card > span { top:5px; left:7px; font-size:6px; }
  .resource-card strong { margin-top:10px; font-size:20px; }
  .resource-card small { font-size:7px; }
  .capacity-pips { gap:2px; }
  .capacity-pips i { width:7px; }
  .board-resource-row { gap:4px; }
  .deck-pile { min-width:64px; }
  .archive-compact summary { min-height:42px; padding:5px 7px; }
  .archive-compact summary small { display:none; }
  .zone-title { margin:7px 0 4px; font-size:8px; }

  /* Keep the tactical 5/4-slot order; swipe instead of collapsing into two columns. */
  .slots.employee-row,
  .slots.support-row,
  .slots.support {
    display:grid;
    grid-template-columns:none !important;
    grid-auto-flow:column;
    grid-auto-columns:138px;
    justify-content:start !important;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-inline:8px;
    -webkit-overflow-scrolling:touch;
    padding:7px 8px 11px;
    scrollbar-width:thin;
  }
  .employee-row > .card,
  .support-row > .card,
  .employee-row > .empty-slot,
  .support-row > .empty-slot {
    width:138px;
    min-width:138px;
    max-width:138px;
    height:194px;
    min-height:194px;
    max-height:194px;
    scroll-snap-align:start;
  }
  .empty-slot { font-size:12px; }
  .card-name-row { min-height:29px; }
  .card-name-row .card-name { font-size:10.5px; }
  .card-name-row .card-name.long-name { font-size:9.3px; }
  .card-rules-mini { font-size:6.8px; }
  .card-tags span { font-size:5.2px; }

  /* Touch cards do not overlap: each card gets its own reliable hit area. */
  .own-hand {
    justify-content:flex-start;
    gap:8px;
    overflow-x:auto;
    overflow-y:visible;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:12px 8px 18px;
    -webkit-overflow-scrolling:touch;
  }
  .own-hand .hand-fan-card,
  .own-hand .hand-fan-card:first-child {
    width:138px;
    min-width:138px;
    max-width:138px;
    height:194px;
    min-height:194px;
    max-height:194px;
    margin-left:0 !important;
    transform:none !important;
    scroll-snap-align:start;
  }
  .own-hand .hand-fan-card.selected,
  .own-hand .hand-fan-card:focus-visible { transform:translateY(-7px) scale(1.02) !important; }
  .mulligan-hand .card.selected { transform:translateY(-7px) scale(1.02) !important; }

  .card-info { width:25px; height:25px; top:2px; right:3px; font-size:11px; touch-action:manipulation; }
  .card-ability { min-width:34px; min-height:25px; touch-action:manipulation; }
  .empty-slot.slot-candidate { touch-action:manipulation; }
  button, .card[data-card-ref], .collection-card { touch-action:manipulation; }

  .decision-center { padding:8px; }
  .interaction-options, .response-options { gap:7px; }
  .interaction-options button, .response-options button, .mulligan-actions button { min-height:42px; }

  .command-dock {
    position:sticky;
    bottom:calc(6px + env(safe-area-inset-bottom));
    z-index:20;
    margin:8px 3px;
    padding:7px 8px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    border-radius:11px;
  }
  .command-hint { font-size:8px; line-height:1.3; }
  .command-buttons { width:100%; }
  .phase-button { width:100%; min-height:44px; font-weight:900; }

  .modal-backdrop { padding:8px; align-items:start; overflow:auto; }
  .card-modal.frame-modal { width:100%; max-height:none; margin:8px 0 calc(8px + env(safe-area-inset-bottom)); padding:12px; gap:12px; border-radius:13px; }
  .modal-close { position:sticky; margin-left:auto; top:0; width:40px; height:40px; }
  .modal-card-face { width:min(100%,330px); height:458px; min-height:458px; max-height:458px; }
  .modal-card-face .card-name-row .card-name,
  .modal-card-face .card-name-row .card-name.long-name { font-size:27px; }
  .modal-card-face .card-rules-mini,
  .modal-card-face .modal-rules-box { min-height:104px; font-size:14px; }

  .collection-toolbar { align-items:flex-start; padding:10px; }
  .collection-toolbar > div:first-child strong { font-size:16px; }
  .collection-filters { grid-template-columns:1fr; gap:5px; }
  .collection-filters > span { justify-self:start; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .collection-card { min-height:225px; }
  .deck-switcher { grid-template-columns:1fr auto; }
  .deck-switcher button.danger { grid-column:1/-1; }

  .match-opening { padding:8px 10px; }
  .match-deck > span { width:32px; height:32px; flex-basis:32px; }
  .match-deck strong { font-size:10px; }
  .mulligan-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .mulligan-actions b { grid-column:1/-1; }

  .utility-strip { margin-bottom:calc(72px + env(safe-area-inset-bottom)); }
}

@media (hover:none) and (pointer:coarse) {
  button:hover, .card:not(.hidden-card):hover, .collection-card:hover { transform:none; }
  .hover-card-preview { display:none !important; }
  .card:active, button:active { transform:scale(.985); }
}

@media (max-width:380px) {
  .slots.employee-row,
  .slots.support-row,
  .slots.support { grid-auto-columns:130px; }
  .employee-row > .card,
  .support-row > .card,
  .employee-row > .empty-slot,
  .support-row > .empty-slot,
  .own-hand .hand-fan-card,
  .own-hand .hand-fan-card:first-child {
    width:130px;
    min-width:130px;
    max-width:130px;
  }
  .collection-grid { grid-template-columns:1fr; }
}

/* v3.2 playable local economy sandbox */
.economy-lab {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #cfc6b8;
  border-radius: 16px;
  background: linear-gradient(145deg,#f8f4ec,#fffdf8 58%,#f2eee6);
  box-shadow: 0 8px 24px rgba(42,34,23,.06);
}
.economy-lab-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.economy-lab-head > div:first-child { display:grid; gap:3px; }
.economy-lab-head span { font-size:8px; font-weight:950; letter-spacing:.12em; color:#7c746a; }
.economy-lab-head strong { font-size:17px; }
.economy-lab-head small { color:#847c72; font-size:9px; }
.wallet { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.wallet span { display:flex; align-items:center; gap:8px; min-height:30px; padding:5px 10px; border:1px solid #d8d0c4; border-radius:999px; background:#fff; }
.wallet b { font-size:15px; color:#292622; }
.economy-lab-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:10px; margin-top:12px; }
.booster-station,.shredder-station { min-height:118px; padding:13px; border:1px solid #ddd4c7; border-radius:12px; background:rgba(255,255,255,.82); }
.booster-station { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.booster-station > div:first-child,.shredder-station { display:grid; align-content:start; gap:4px; }
.booster-station > div:first-child > span,.shredder-station > span { font-size:7px; font-weight:950; letter-spacing:.12em; color:#8b6b26; }
.booster-station strong,.shredder-station strong { font-size:14px; }
.booster-station p,.shredder-station p { margin:2px 0; font-size:10px; line-height:1.4; color:#5f5952; }
.booster-station small,.shredder-station small { font-size:8px; line-height:1.35; color:#837b71; }
.economy-actions { display:flex; flex-direction:column; gap:6px; min-width:180px; }
.economy-actions button { min-height:34px; }
.economy-message { margin-top:10px; padding:8px 10px; border-radius:9px; background:#f0ece4; font-size:10px; font-weight:800; color:#554f48; }
.booster-reveal { margin-top:12px; padding-top:12px; border-top:1px solid #ded5c8; }
.booster-reveal-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.booster-reveal-head span { font-size:8px; font-weight:950; letter-spacing:.12em; color:#b06d16; }
.booster-reveal-head strong { font-size:12px; }
.booster-card-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.booster-hit { --hit:#777; min-height:86px; padding:8px; display:grid; align-content:start; gap:5px; text-align:left; border:1px solid color-mix(in srgb,var(--hit) 35%,#d4ccc1); border-top:5px solid var(--hit); border-radius:9px; background:#fff; }
.booster-hit.type-employee { --hit:#1765b5; }
.booster-hit.type-incident { --hit:#b9433d; }
.booster-hit.type-action { --hit:#3a8752; }
.booster-hit.type-system { --hit:#d08a27; }
.booster-hit span { font-size:7px; font-weight:950; letter-spacing:.1em; color:var(--hit); }
.booster-hit b { font-size:10px; line-height:1.08; }
.booster-hit small { font-size:7px; color:#797168; }
.collection-owned { margin-top:auto; display:flex; align-items:center; justify-content:space-between; min-height:18px; padding:2px 5px; border-radius:5px; background:#f2eee8; font-size:7px; text-transform:uppercase; letter-spacing:.07em; color:#777067; }
.collection-owned b { font-size:10px; color:#302d29; }
.card-economy-actions { margin-top:10px; padding-top:10px; border-top:1px solid #dfd7cc; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.card-economy-actions > div { grid-column:1/-1; display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:#f3efe9; }
.card-economy-actions > div span { font-size:7px; font-weight:950; letter-spacing:.1em; }
.card-economy-actions > div strong { font-size:16px; }
.card-economy-actions > div small { margin-left:auto; font-size:8px; color:#7e766d; }
.card-economy-actions button { min-height:34px; font-size:9px; font-weight:900; }
.card-economy-actions .economy-protection { grid-column:1/-1; color:#8a8177; font-size:8px; line-height:1.35; }
@media (max-width:900px) {
  .economy-lab-head,.booster-station { flex-direction:column; }
  .wallet { justify-content:flex-start; }
  .economy-lab-grid { grid-template-columns:1fr; }
  .economy-actions { width:100%; min-width:0; flex-direction:row; flex-wrap:wrap; }
  .economy-actions button { flex:1 1 140px; }
  .booster-card-row { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:5px; }
  .booster-hit { min-width:138px; scroll-snap-align:start; }
}

/* v3.3 product polish: game-first chrome + visual economy loop */
.leave-short { display:none; }
.utility-strip {
  display:block;
  margin-top:10px;
  padding:0 2px 26px;
}
.playtest-tools {
  width:100%;
  border:1px solid #d8d1c6;
  border-radius:10px;
  background:rgba(255,253,249,.72);
}
.playtest-tools > summary {
  min-height:36px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  cursor:pointer;
  list-style:none;
  color:#716a61;
}
.playtest-tools > summary::-webkit-details-marker { display:none; }
.playtest-tools > summary::before { content:'＋'; font-weight:900; color:#8a8278; }
.playtest-tools[open] > summary::before { content:'−'; }
.playtest-tools > summary span { font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.playtest-tools > summary small { font-size:8px; color:#999086; }
.playtest-tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 8px 8px; }
.playtest-tools-grid > details { min-width:0; padding:7px 8px; border:1px solid #e1dbd2; border-radius:8px; background:#fffdf9; }
.playtest-tools-grid > details[open] { grid-column:1/-1; }

.economy-loop {
  display:grid;
  grid-template-columns:auto 18px auto 18px auto 18px auto;
  align-items:center;
  justify-content:start;
  gap:5px;
  margin-top:12px;
  padding:8px 10px;
  border:1px solid #ddd5ca;
  border-radius:10px;
  background:rgba(255,255,255,.62);
}
.economy-loop span { display:flex; align-items:center; gap:6px; font-size:9px; font-weight:850; color:#655e56; white-space:nowrap; }
.economy-loop span b { width:20px; height:20px; display:grid; place-items:center; border-radius:999px; background:#26231f; color:#fff; font-size:8px; }
.economy-loop i { font-style:normal; color:#aaa197; text-align:center; }
.booster-reveal-head { flex-wrap:wrap; }
.booster-reveal-head small { margin-left:auto; color:#877f75; font-size:8px; }
.booster-hit { min-height:174px; padding:7px; gap:5px; overflow:hidden; }
.booster-hit-art { width:100%; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; border-radius:6px; border:1px solid color-mix(in srgb,var(--hit) 22%,#d8d0c5); background:#f1ede6; color:var(--hit); font-size:20px; font-weight:950; }
.booster-hit-art img { width:100%; height:100%; object-fit:cover; display:block; }
.booster-hit-top { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.booster-hit-top > span { display:inline-flex; padding:2px 5px; border-radius:999px; background:color-mix(in srgb,var(--hit) 11%,#fff); }
.booster-hit-top > small { font-size:6px; font-weight:900; color:#8c8379; letter-spacing:.06em; }
.booster-hit > b { min-height:22px; font-size:10px; line-height:1.08; }

@media (max-width:900px) {
  .playtest-tools-grid { grid-template-columns:1fr; }
  .playtest-tools-grid > details[open] { grid-column:auto; }
  .economy-loop { display:flex; overflow-x:auto; justify-content:flex-start; scroll-snap-type:x proximity; }
  .economy-loop span { flex:0 0 auto; scroll-snap-align:start; }
  .booster-reveal-head small { width:100%; margin-left:0; }
}

@media (max-width:700px) {
  .topbar .muted { display:none; }
  #leaveBtn { min-height:34px; padding:5px 8px; font-size:10px; }
  #leaveBtn .leave-full { display:none; }
  #leaveBtn .leave-short { display:inline; }
  .phase-track { gap:3px; padding:2px; }
  .phase-track span { padding:4px 2px; }
  .mobile-board-nav { gap:4px; padding:4px; }
  .mobile-board-nav button { min-height:30px; padding:4px; font-size:8px; }
  .turn-banner { padding:7px 9px; margin-bottom:5px; border-radius:9px; }
  .turn-label { font-size:10px; }
  .turn-detail { font-size:8px; }
  .command-dock { padding:6px; margin:6px 3px; }
  .command-dock .command-hint { display:none; }
  .command-buttons { gap:4px; }
  .ability-hint { font-size:7px; }
  .phase-button { min-height:40px; }
  .utility-strip { margin-top:6px; margin-bottom:calc(58px + env(safe-area-inset-bottom)); padding-bottom:8px; }
  .playtest-tools > summary { min-height:32px; padding:5px 8px; }
  .playtest-tools > summary small { display:none; }
  .economy-loop { margin-top:9px; padding:6px 7px; }
  .booster-hit { min-width:148px; min-height:166px; }
}

/* v3.4 collection-floor shredding + saved-deck warning */
.card-economy-actions .economy-protection.blocked {
  padding:7px 8px;
  border:1px solid #dfb9b2;
  border-radius:7px;
  background:#fff2ef;
  color:#8a3f34;
  font-weight:800;
}
.deck-shred-warning,
.card-economy-actions > .deck-shred-warning {
  grid-column:1/-1;
  display:grid;
  gap:3px;
  padding:8px 9px;
  border:1px solid #e3c57b;
  border-radius:8px;
  background:#fff8df;
  color:#6e5622;
}
.deck-shred-warning strong { font-size:8px; letter-spacing:.1em; }
.deck-shred-warning span { font-size:9px; line-height:1.35; }
.deck-shred-warning b { font-weight:950; }
.shred-confirm,
.card-economy-actions > .shred-confirm {
  grid-column:1/-1;
  display:grid;
  gap:6px;
  padding:9px;
  border:1px solid #cfa660;
  border-radius:9px;
  background:#fffaf0;
}
.shred-confirm > strong { font-size:11px; }
.shred-confirm > span { font-size:9px; line-height:1.4; color:#655d53; }
.shred-confirm > div { display:flex; gap:7px; background:transparent; padding:0; }
.shred-confirm > div button { flex:1 1 0; }

/* v3.5 progression loop + owned-copy deckbuilder preview */
.collection-mode-toggle {
  display:inline-flex;
  gap:4px;
  margin-top:8px;
  padding:4px;
  border:1px solid #d7d0c6;
  border-radius:999px;
  background:rgba(255,255,255,.72);
}
.collection-mode-toggle button {
  min-height:30px;
  padding:5px 11px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#6b655e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}
.collection-mode-toggle button.active {
  background:#27231f;
  color:#fff;
  box-shadow:0 3px 9px rgba(40,32,24,.14);
}
.collection-card.unowned-card { opacity:.52; filter:saturate(.68); }
.collection-card.unowned-card:hover { opacity:.84; filter:none; }
.owned-mode-note { display:block; margin-top:5px; color:#756f68; font-size:10px; }
.match-reward-panel {
  margin:10px auto 14px;
  max-width:920px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid #d6c69b;
  border-radius:14px;
  background:linear-gradient(135deg,#fff9df,#fffdf7 58%,#f7f0dd);
  box-shadow:0 9px 24px rgba(81,60,16,.08);
}
.match-reward-panel > div { display:flex; flex-direction:column; gap:3px; }
.match-reward-panel span { font-size:9px; font-weight:950; letter-spacing:.12em; color:#8a681e; }
.match-reward-panel strong { font-size:17px; line-height:1.1; }
.match-reward-panel small { color:#756d60; font-size:11px; }
.match-reward-panel p { grid-column:1 / -1; margin:0; padding-top:8px; border-top:1px solid rgba(135,105,41,.18); color:#6f5b2c; font-size:11px; }
.match-reward-panel.claimed { border-color:#afd0b8; background:linear-gradient(135deg,#edf8ef,#fffdf9); }
.reward-claimed { padding:7px 11px; border-radius:999px; background:#e3f3e6; color:#2b7041; font-size:10px; letter-spacing:.1em; }
@media (max-width:700px) {
  .collection-mode-toggle { width:100%; }
  .collection-mode-toggle button { flex:1 1 50%; }
  .match-reward-panel { grid-template-columns:1fr; margin:8px 6px 12px; }
  .match-reward-panel button, .reward-claimed { justify-self:stretch; text-align:center; }
}

/* v3.6 server playtest profile + quick matchmaking */
.profile-strip {
  max-width:1180px;
  margin:14px auto 10px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:14px;
  align-items:center;
  border:1px solid #d9d2c8;
  border-radius:14px;
  background:linear-gradient(135deg,#fffdf8,#f5f0e8);
  box-shadow:0 8px 24px rgba(43,34,24,.06);
}
.profile-identity { display:grid; gap:2px; }
.profile-identity > span { font-size:8px; font-weight:950; letter-spacing:.12em; color:#8b8177; }
.profile-identity > strong { font-size:17px; }
.profile-identity > small { color:#8a837a; font-size:9px; }
.profile-stats { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.profile-stats span { display:flex; align-items:center; gap:5px; min-height:30px; padding:5px 8px; border:1px solid #ded7cc; border-radius:999px; background:#fff; color:#756d64; font-size:8px; font-weight:900; letter-spacing:.06em; }
.profile-stats b { color:#28241f; font-size:11px; }
.profile-rename { display:flex; gap:5px; }
.profile-rename input { width:150px; min-height:34px; }
.profile-rename button { min-height:34px; }
.quick-match-box {
  max-width:1180px;
  margin:0 auto 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:11px;
  align-items:stretch;
  padding:14px;
  border:1px solid #cfd9e5;
  border-radius:14px;
  background:linear-gradient(135deg,#f4f8fd,#fffdf9 72%);
  box-shadow:0 8px 24px rgba(38,65,94,.06);
  container-type:inline-size;
}
.quick-match-copy { display:grid; gap:3px; min-width:0; }
.quick-match-copy > span { font-size:8px; font-weight:950; letter-spacing:.12em; color:#52779e; }
.quick-match-copy > strong { font-size:16px; }
.quick-match-copy > small { max-width:680px; color:#74706a; font-size:10px; line-height:1.35; }
.quick-match-controls {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(118px,.62fr) max-content;
  gap:10px;
  align-items:end;
  min-width:0;
}
.quick-match-field { display:grid; gap:4px; min-width:0; color:#777067; font-size:8px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.quick-match-field select { width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick-match-controls button { min-width:128px; white-space:nowrap; }
.quick-match-box select, .quick-match-box button { min-height:38px; }
.quick-match-box > p { margin:0; padding-top:7px; border-top:1px solid #dfe7ee; color:#53687c; font-size:10px; }

/* v6.8: form controls must be allowed to shrink inside nested lobby grids. */
.lobby-command-center label,
.private-room-grid .field,
.profile-rename,
.quick-match-controls,
.quick-match-controls > * { min-width:0; }
.lobby-command-center select,
.lobby-command-center input { min-width:0; max-width:100%; }
.private-room-grid .box > button { width:100%; }

@container (max-width:620px) {
  .quick-match-controls { grid-template-columns:minmax(0,1fr) minmax(112px,.55fr); }
  .quick-match-controls > button { grid-column:1/-1; width:100%; }
}
@container (max-width:430px) {
  .quick-match-controls { grid-template-columns:1fr; }
  .quick-match-controls > button { grid-column:auto; }
}
@media (max-width:900px) {
  .profile-strip { grid-template-columns:1fr auto; margin:10px 8px 8px; }
  .profile-rename { grid-column:1/-1; }
  .profile-rename input { flex:1 1 auto; width:auto; }
  .quick-match-box { margin:0 8px 10px; }
}
@media (max-width:620px) {
  .profile-strip { grid-template-columns:1fr; gap:8px; padding:10px; }
  .profile-stats { justify-content:flex-start; }
  .profile-identity > small { display:none; }
  .quick-match-box { padding:10px; }
  .quick-match-copy > small { font-size:9px; }
}

/* v3.7 persistent playtest profile + match history */
/* v3.8 persistent rooms + matchmaking use the existing lobby/game surfaces unchanged */
.profile-history {
  max-width: 1120px;
  margin: 8px auto 12px;
  border: 1px solid #d9d0c4;
  border-radius: 12px;
  background: rgba(255,253,249,.82);
  overflow: hidden;
}
.profile-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.profile-history summary::-webkit-details-marker { display:none; }
.profile-history summary strong { font-size: 10px; color:#716a61; }
.profile-history-list { display:grid; gap:6px; padding:0 12px 12px; }
.history-row {
  display:grid;
  grid-template-columns: 72px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid #e4ddd4;
  border-radius:9px;
  background:#fff;
}
.history-row b { font-size:10px; letter-spacing:.08em; }
.history-row.win b { color:#26764a; }
.history-row.loss b,.history-row.resign_loss b { color:#a3453e; }
.history-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:800; }
.history-row small { color:#7c756d; font-size:9px; white-space:nowrap; }
@media (max-width:720px) {
  .profile-history { margin:6px 8px 10px; }
  .profile-history summary { padding:9px 10px; }
  .history-row { grid-template-columns:58px minmax(0,1fr); gap:4px 8px; }
  .history-row small { grid-column:2; white-space:normal; }
}

/* v3.9 resumable sessions + connection presence */
.resume-session-box {
  max-width: 1120px;
  margin: 8px auto 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #cfd9e5;
  border-radius: 13px;
  background: #f8fbfe;
}
.resume-session-box > div:first-child { display:grid; gap:3px; min-width:0; }
.resume-session-box > div:first-child > span { font-size:8px; font-weight:950; letter-spacing:.12em; color:#52779e; }
.resume-session-box > div:first-child > strong { font-size:14px; }
.resume-session-box > div:first-child > small { color:#74706a; font-size:10px; line-height:1.35; }
.resume-session-actions { display:flex; gap:8px; flex:0 0 auto; }
.presence-pill {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid #d5d9dd;
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
  white-space:nowrap;
}
.presence-pill.connected { background:#edf8f1; border-color:#b9ddc6; color:#287248; }
.presence-pill.disconnected { background:#fff5e9; border-color:#ead0a9; color:#996326; }
.presence-pill.waiting { background:#f4f4f4; color:#777; }
@media (max-width:720px) {
  .resume-session-box { margin:6px 8px 10px; align-items:stretch; flex-direction:column; }
  .resume-session-actions { width:100%; }
  .resume-session-actions button { flex:1 1 auto; }
}

/* v4.0 server-authoritative timer runtime */
#liveTimerStatus { font-variant-numeric: tabular-nums; }
.presence-pill[data-reconnect-player] { font-variant-numeric: tabular-nums; }

.telemetry-summary { display:grid; gap:10px; margin-top:8px; }
.telemetry-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.telemetry-kpis > span { display:grid; gap:3px; padding:8px; border:1px solid #e1dbd2; border-radius:8px; background:#fff; }
.telemetry-kpis small { font-size:8px; letter-spacing:.06em; color:#8f877e; font-weight:800; }
.telemetry-kpis strong { font-size:11px; }
.telemetry-table { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.telemetry-table > div { display:grid; gap:4px; padding:8px; border:1px solid #e1dbd2; border-radius:8px; background:#fff; }
.telemetry-table b { font-size:10px; }
.telemetry-table span { font-size:9px; color:#6f675f; }
@media (max-width: 760px) { .telemetry-kpis, .telemetry-table { grid-template-columns:1fr; } }

/* v4.2 playtest analytics */
.playtest-analytics { margin:0 8px 10px; border:1px solid #d9e3ea; border-radius:10px; background:#f8fafb; overflow:hidden; }
.playtest-analytics > summary { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px; cursor:pointer; font-size:11px; font-weight:900; }
.playtest-analytics > summary span { letter-spacing:.06em; text-transform:uppercase; color:#58738b; }
.playtest-analytics > summary strong { font-size:10px; color:#706b65; }
.analytics-panel { display:grid; gap:10px; padding:0 12px 12px; border-top:1px solid #e0e7ec; }
.analytics-note { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:10px; }
.analytics-note > div:first-child { display:grid; gap:2px; }
.analytics-note b { font-size:9px; letter-spacing:.08em; color:#547089; }
.analytics-note span { font-size:9px; color:#77736f; }
.analytics-actions { display:flex; gap:6px; flex-wrap:wrap; }
.analytics-actions button, .analytics-actions a { min-height:30px; display:inline-flex; align-items:center; justify-content:center; padding:5px 9px; border:1px solid #ccd8e0; border-radius:7px; background:#fff; color:#50677b; font:inherit; font-size:9px; font-weight:900; text-decoration:none; cursor:pointer; }
.analytics-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.analytics-kpis > span { display:grid; gap:3px; min-width:0; padding:8px; border:1px solid #e1e6e9; border-radius:8px; background:#fff; }
.analytics-kpis small { font-size:7px; font-weight:950; letter-spacing:.07em; color:#8d8984; }
.analytics-kpis strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.analytics-kpis em { font-size:8px; color:#76716c; font-style:normal; line-height:1.25; }
.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.analytics-grid > div { display:grid; gap:3px; padding:8px; border:1px solid #e1e6e9; border-radius:8px; background:#fff; }
.analytics-grid > div > b { margin-bottom:3px; font-size:10px; }
.analytics-grid > div > span { display:flex; justify-content:space-between; gap:10px; border-top:1px solid #f0f1f2; padding-top:4px; font-size:9px; }
.analytics-grid span strong { font-size:9px; }
.analytics-grid span em { color:#77716b; font-style:normal; text-align:right; }
.analytics-caution { margin:0; font-size:8px; color:#8b7461; }
.analytics-empty { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-top:1px solid #e0e7ec; font-size:9px; color:#77716b; }
@media (max-width: 1050px) { .analytics-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 650px) { .analytics-note { align-items:flex-start; flex-direction:column; } .analytics-kpis, .analytics-grid { grid-template-columns:1fr; } .analytics-grid > div > span { align-items:flex-start; } }

/* v4.3 analytics/history filtering */
.analytics-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:7px; align-items:end; padding:8px; border:1px solid #e1e6e9; border-radius:8px; background:#fff; }
.analytics-filters label, .history-filter-row label { display:grid; gap:3px; min-width:0; font-size:7px; font-weight:950; letter-spacing:.06em; color:#837f7a; text-transform:uppercase; }
.analytics-filters select, .history-filter-row select { width:100%; min-width:0; min-height:30px; padding:4px 6px; border:1px solid #d4dde3; border-radius:7px; background:#fff; color:#4d5b67; font:inherit; font-size:9px; text-transform:none; letter-spacing:0; }
.analytics-filters button { min-height:30px; white-space:nowrap; }
.analytics-selection { display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:7px; background:#eef4f7; font-size:8px; color:#667783; }
.analytics-selection b { font-size:8px; color:#4c687b; }
.history-filter-row { display:grid; grid-template-columns:minmax(0,150px) minmax(0,150px) 1fr; gap:8px; align-items:end; padding:8px 10px; border-bottom:1px solid #eceff1; }
.history-filter-row small { justify-self:end; align-self:center; color:#817c77; font-size:8px; }
@media (max-width: 1050px) { .analytics-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 650px) { .analytics-filters { grid-template-columns:1fr 1fr; } .analytics-filters button { grid-column:1 / -1; } .analytics-selection { align-items:flex-start; flex-direction:column; } .history-filter-row { grid-template-columns:1fr 1fr; } .history-filter-row small { grid-column:1 / -1; justify-self:start; } }

/* v4.4 profile-bound match replay & review */
.history-row { grid-template-columns:72px minmax(0,1fr) auto; }
.history-row small { grid-column:2; }
.history-review { grid-column:3; grid-row:1 / span 2; align-self:center; min-height:28px; padding:4px 9px; font-size:9px; }
.replay-backdrop { z-index:1400; align-items:flex-start; overflow:auto; padding:3vh 16px; }
.replay-modal { width:min(980px, 96vw); max-height:94vh; overflow:hidden; background:#f7f6f2; border:1px solid #d3d9dd; border-radius:16px; box-shadow:0 24px 70px rgba(30,38,46,.28); display:flex; flex-direction:column; }
.replay-modal.compact { width:min(520px,94vw); padding:20px; }
.replay-head { display:flex; justify-content:space-between; gap:18px; padding:18px 20px 14px; border-bottom:1px solid #dde1e3; background:#fff; }
.replay-head span { display:block; font-size:9px; font-weight:950; letter-spacing:.12em; color:#7d7770; }
.replay-head h2 { margin:4px 0 3px; font-size:20px; line-height:1.1; }
.replay-head p { margin:0; color:#77716b; font-size:10px; }
.replay-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px 14px; }
.replay-summary > div { background:#fff; border:1px solid #e0e3e5; border-radius:10px; padding:9px 10px; display:grid; gap:2px; }
.replay-summary span { font-size:7px; font-weight:950; letter-spacing:.1em; color:#88817a; }
.replay-summary strong { font-size:13px; }
.replay-seats { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px 12px; }
.replay-seats > div { padding:9px 10px; background:#eef1f2; border-radius:9px; display:grid; gap:2px; }
.replay-seats b { font-size:11px; }
.replay-seats span { color:#73706c; font-size:9px; }
.replay-toolbar { display:grid; grid-template-columns:minmax(130px,180px) minmax(120px,160px) 1fr; gap:8px; align-items:end; padding:10px 14px; border-top:1px solid #e1e4e5; border-bottom:1px solid #e1e4e5; background:#fff; }
.replay-toolbar label { display:grid; gap:3px; font-size:7px; font-weight:950; letter-spacing:.08em; color:#837f7a; text-transform:uppercase; }
.replay-toolbar select { width:100%; min-height:30px; border:1px solid #d4dde3; border-radius:7px; background:#fff; padding:4px 6px; font:inherit; font-size:9px; text-transform:none; letter-spacing:0; }
.replay-toolbar button { justify-self:end; min-height:30px; }
.replay-timeline { overflow:auto; padding:10px 14px 16px; display:grid; gap:6px; }
.replay-event { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:8px; align-items:center; background:#fff; border:1px solid #e1e4e6; border-radius:9px; padding:7px 9px; }
.replay-event.key { border-left:3px solid #6c7881; }
.replay-seq { font:800 8px/1 monospace; color:#8b8883; }
.replay-event-copy { min-width:0; display:grid; gap:2px; }
.replay-event-copy strong { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-event-copy small { font-size:8px; color:#837f7a; }
.replay-card-chip { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#edf1f3; border-radius:999px; padding:4px 7px; font-size:8px; font-weight:850; }
@media (max-width:650px) {
  .history-row { grid-template-columns:58px minmax(0,1fr) auto; }
  .history-row small { grid-column:2; }
  .history-review { grid-column:3; }
  .replay-backdrop { padding:0; }
  .replay-modal { width:100vw; max-height:100vh; min-height:100vh; border-radius:0; }
  .replay-summary { grid-template-columns:1fr 1fr; }
  .replay-seats { grid-template-columns:1fr; }
  .replay-toolbar { grid-template-columns:1fr 1fr; }
  .replay-toolbar button { grid-column:1 / -1; justify-self:stretch; }
  .replay-event { grid-template-columns:34px minmax(0,1fr); }
  .replay-card-chip { grid-column:2; justify-self:start; max-width:100%; }
}

/* v4.5 reconnect + single-controller session UX */
.connection-banner { margin:8px 0; padding:9px 11px; border:1px solid #d7d2c8; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f8f7f4; }
.connection-banner > div { display:grid; gap:2px; min-width:0; }
.connection-banner strong { font-size:11px; letter-spacing:.02em; }
.connection-banner span { font-size:10px; line-height:1.35; color:#66625d; }
.connection-banner.superseded { background:#fff4df; border-color:#e6c884; }
.connection-banner.reconnecting, .connection-banner.connecting { background:#eef5fb; border-color:#b9cfe3; }
.connection-banner.offline { background:#f3f3f3; border-color:#c9c9c9; }
@media (max-width: 700px) { .connection-banner { align-items:stretch; flex-direction:column; } .connection-banner button { width:100%; } }

/* v4.6 stable player identity + separated local guest credential storage */

/* v4.7 Ranked Alpha standing */
.ranked-standing {
  max-width:1180px;
  margin:0 auto 10px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:12px 18px;
  align-items:center;
  border:1px solid #d7d1e6;
  border-radius:14px;
  background:linear-gradient(135deg,#faf8ff,#fffdf8 72%);
  box-shadow:0 8px 24px rgba(53,42,89,.05);
}
.ranked-standing > div:first-child { display:grid; gap:3px; }
.ranked-standing > div:first-child > span { font-size:8px; font-weight:950; letter-spacing:.12em; color:#726599; }
.ranked-standing > div:first-child > strong { font-size:17px; }
.ranked-standing > div:first-child > small { color:#77706d; font-size:9px; line-height:1.35; }
.ranked-standing-stats { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.ranked-standing-stats span { display:grid; gap:1px; min-width:72px; padding:6px 8px; border:1px solid #e0dae8; border-radius:9px; background:#fff; color:#77706d; font-size:8px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.ranked-standing-stats b { color:#2d2933; font-size:10px; letter-spacing:0; }
.ranked-standing-note { grid-column:1/-1; padding-top:7px; border-top:1px solid #e8e2ed; color:#817a86; font-size:9px; }
@media (max-width:900px) {
  .ranked-standing { margin:0 8px 10px; grid-template-columns:1fr; }
  .ranked-standing-stats { justify-content:flex-start; }
}

/* v4.8 closed-alpha polish + complete flavor pass */
.lobby-command-center {
  width:min(1180px,100%);
  margin:0 auto 12px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr);
  gap:14px;
  align-items:start;
}
.lobby-primary-column,.lobby-secondary-column { display:grid; gap:12px; min-width:0; }
.lobby-hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:1px solid #cec6ba;
  border-radius:17px;
  background:linear-gradient(135deg,#fffdf8 0%,#f5eee3 72%,#ede5d9 100%);
  box-shadow:0 12px 34px rgba(42,33,22,.07);
}
.lobby-hero > div { display:grid; gap:4px; }
.lobby-hero span,.starter-guide-head span,.private-room-drawer > summary span,.lobby-playtest-drawer > summary span {
  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
  color:#7e7469;
}
.lobby-hero strong { font-size:clamp(20px,3vw,30px); line-height:1.05; }
.lobby-hero small { max-width:650px; color:#746e66; font-size:10px; line-height:1.4; }
.lobby-hero button { flex:0 0 auto; min-height:42px; }
.lobby-command-center .quick-match-box { margin:0; max-width:none; }
.lobby-secondary-column .ranked-standing { margin:0; max-width:none; grid-template-columns:1fr; }
.lobby-secondary-column .ranked-standing-stats { justify-content:flex-start; }

.starter-guide {
  padding:14px;
  border:1px solid #d8d0c5;
  border-radius:15px;
  background:rgba(255,253,249,.88);
}
.starter-guide-head { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:10px; }
.starter-guide-head > div { display:grid; gap:3px; }
.starter-guide-head strong { font-size:14px; }
.starter-guide-head small { max-width:300px; color:#827a71; font-size:9px; line-height:1.35; text-align:right; }
.starter-guide-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.starter-identity {
  --dept:#7b7771;
  min-height:142px;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:10px;
  border:1px solid color-mix(in srgb,var(--dept) 30%,#ded7ce);
  border-top:5px solid var(--dept);
  border-radius:10px;
  background:#fff;
}
.starter-identity.dept-customer_service { --dept:#6c7bd9; }
.starter-identity.dept-it { --dept:#65848f; }
.starter-identity.dept-office { --dept:#9b7c5c; }
.starter-identity.dept-marketing { --dept:#c36d93; }
.starter-identity.dept-production { --dept:#b67945; }
.starter-identity > div { display:flex; gap:6px; align-items:center; }
.starter-identity > div span { min-width:28px; padding:3px 5px; border-radius:999px; background:color-mix(in srgb,var(--dept) 11%,#fff); color:var(--dept); font-size:7px; font-weight:950; letter-spacing:.08em; text-align:center; }
.starter-identity > div b { font-size:9px; }
.starter-identity > strong { font-size:10px; line-height:1.25; }
.starter-identity > small { color:#777069; font-size:8px; line-height:1.35; }
.starter-identity > em { margin-top:auto; color:#938b82; font-size:7px; font-style:normal; font-weight:850; letter-spacing:.04em; }

.private-room-drawer,.lobby-playtest-drawer {
  border:1px solid #d8d0c5;
  border-radius:14px;
  background:rgba(255,253,249,.88);
  overflow:hidden;
}
.private-room-drawer > summary,.lobby-playtest-drawer > summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
}
.private-room-drawer > summary::-webkit-details-marker,.lobby-playtest-drawer > summary::-webkit-details-marker { display:none; }
.private-room-drawer > summary > div,.lobby-playtest-drawer > summary > div { display:grid; gap:2px; }
.private-room-drawer > summary strong,.lobby-playtest-drawer > summary strong { font-size:12px; }
.private-room-drawer > summary small,.lobby-playtest-drawer > summary small { color:#817a72; font-size:9px; text-align:right; }
.private-room-drawer[open] > summary,.lobby-playtest-drawer[open] > summary { border-bottom:1px solid #e2dcd3; background:#faf7f1; }
.private-room-grid { display:grid; grid-template-columns:1fr; gap:9px; max-width:none; margin:0; padding:10px; }
.private-room-grid .box { padding:13px; border-radius:11px; box-shadow:none; }
.private-room-grid .box h2 { font-size:15px; margin-bottom:4px; }
.private-room-grid .box p { font-size:9px; line-height:1.35; }
.private-room-grid .field { margin:8px 0; font-size:10px; }

.lobby-playtest-drawer { width:min(1180px,100%); margin:0 auto 26px; }
.lobby-playtest-content { padding:10px; display:grid; gap:9px; }
.lobby-playtest-content .profile-history,.lobby-playtest-content .playtest-analytics { max-width:none; margin:0; }

.match-result-panel {
  max-width:960px;
  margin:8px auto 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 16px;
  align-items:center;
  padding:17px 18px;
  border:1px solid #c8c0b5;
  border-radius:16px;
  background:linear-gradient(135deg,#fffdf9,#f5f0e8);
  box-shadow:0 12px 32px rgba(38,31,22,.09);
}
.match-result-panel.win { border-color:#a9ceb5; background:linear-gradient(135deg,#edf8f0,#fffdf9 68%); }
.match-result-panel.loss { border-color:#dfbbb7; background:linear-gradient(135deg,#fff1ef,#fffdf9 68%); }
.match-result-panel.draw { border-color:#cbc4b7; }
.match-result-copy { display:grid; gap:4px; }
.match-result-copy > span { font-size:8px; font-weight:950; letter-spacing:.16em; color:#766f67; }
.match-result-copy > strong { font-size:clamp(28px,5vw,44px); line-height:.96; }
.match-result-panel.win .match-result-copy > strong { color:#2d7447; }
.match-result-panel.loss .match-result-copy > strong { color:#a4453e; }
.match-result-copy > p { margin:2px 0 4px; color:#625d56; font-size:11px; font-weight:800; }
.match-result-chips { display:flex; flex-wrap:wrap; gap:5px; }
.match-result-chips b { padding:4px 7px; border:1px solid #ddd6cc; border-radius:999px; background:rgba(255,255,255,.72); color:#716a62; font-size:8px; letter-spacing:.04em; }
.match-result-actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.match-result-panel > .match-reward-panel { grid-column:1/-1; width:100%; max-width:none; margin:2px 0 0; box-shadow:none; }

@media (max-width:1050px) {
  .lobby-command-center { grid-template-columns:1fr; }
  .lobby-secondary-column { grid-template-columns:1fr 1fr; align-items:start; }
  .lobby-secondary-column .ranked-standing { height:100%; }
  .starter-guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .lobby-command-center { padding:0 8px; }
  .lobby-hero { align-items:stretch; flex-direction:column; padding:14px; }
  .lobby-hero button { width:100%; }
  .lobby-secondary-column { grid-template-columns:1fr; }
  .starter-guide-head { align-items:start; flex-direction:column; gap:4px; }
  .starter-guide-head small { text-align:left; }
  .starter-guide-grid { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; }
  .starter-identity { min-width:190px; scroll-snap-align:start; }
  .lobby-playtest-drawer { width:calc(100% - 16px); margin-bottom:18px; }
  .match-result-panel { grid-template-columns:1fr; margin:8px 6px 12px; padding:14px; }
  .match-result-actions { justify-content:stretch; }
  .match-result-actions button { flex:1 1 50%; }
}

/* v4.9 visible card / collection / booster / board polish */
.collection-set-progress { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.collection-set-progress span { padding:4px 7px; border:1px solid #ddd5ca; border-radius:999px; background:#f6f2eb; color:#777067; font-size:7px; font-weight:850; letter-spacing:.04em; }
.collection-set-progress b { color:#282521; font-size:9px; }

.collection-card.catalog-frame {
  --tier-accent:#8b837a;
  min-height:322px;
  padding:7px;
  gap:5px;
  border-top-width:5px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(165deg,#fffefa 0%,#fbf7f0 100%);
}
.collection-card.catalog-frame.tier-t1 { --tier-accent:#64808a; }
.collection-card.catalog-frame.tier-t2 { --tier-accent:#8b68a8; }
.collection-card.catalog-frame.tier-t3 { --tier-accent:#b27c22; box-shadow:0 8px 20px rgba(115,78,20,.12); }
.collection-card.catalog-frame::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:8px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tier-accent) 10%,transparent); }
.collection-card.catalog-frame.tier-t3::before { content:''; position:absolute; z-index:2; width:58%; height:160%; left:-80%; top:-34%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,239,178,.24),transparent); transition:left .45s ease; pointer-events:none; }
.collection-card.catalog-frame.tier-t3:hover::before { left:125%; }
.collection-card.selected-preview { outline:3px solid color-mix(in srgb,var(--collection-type) 66%,#222); outline-offset:2px; transform:translateY(-2px); box-shadow:0 13px 28px rgba(40,32,20,.13); }
.collection-name-row { min-height:39px; display:grid; grid-template-columns:minmax(0,1fr) 27px; gap:5px; align-items:start; }
.collection-name-row > strong { font-size:13px; line-height:1.05; }
.collection-cost { width:27px; height:27px; display:grid; place-items:center; border-radius:999px; background:#292622; color:#fff; font-size:12px; font-weight:950; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.collection-card.catalog-frame .collection-art { position:relative; border-radius:6px; }
.art-ready-badge { position:absolute; right:5px; bottom:5px; padding:2px 5px; border-radius:999px; background:rgba(20,20,20,.82); color:#fff; font-style:normal; font-size:6px; font-weight:950; letter-spacing:.08em; }
.collection-card-meta { display:flex; justify-content:space-between; gap:5px; align-items:center; min-height:18px; color:#766f66; font-size:7px; font-weight:900; letter-spacing:.05em; }
.collection-card-meta b { color:var(--collection-type); font-size:7px; }
.collection-rules { min-height:43px; margin:0; padding:6px 5px; border:1px solid #e2dbd1; border-radius:6px; background:rgba(255,255,255,.7); color:#514c46; font-size:8px; line-height:1.32; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.collection-mini-tags { min-height:16px; display:flex; gap:3px; overflow:hidden; }
.collection-mini-tags span { padding:2px 4px; border-radius:4px; background:#eee9e2; color:#6d665e; font-size:6px; font-weight:900; letter-spacing:.05em; white-space:nowrap; }
.collection-card.catalog-frame .collection-owned { margin-top:0; }
.collection-card.catalog-frame .collection-copy-control { margin-top:auto; }
.collection-card.catalog-frame .collection-copy-control span { font-size:7px; letter-spacing:.04em; }
.rarity-chip { display:inline-flex; padding:3px 6px; border:1px solid #ddd4c9; border-radius:999px; background:#f4efe8; color:#6e675f; }
.rarity-chip.tier-t1 { color:#4e6e77; background:#edf4f5; border-color:#c5d7da; }
.rarity-chip.tier-t2 { color:#73508f; background:#f4eef9; border-color:#d7c6e4; }
.rarity-chip.tier-t3 { color:#8a5a0b; background:#fff6df; border-color:#e2c984; }

.booster-reveal { position:relative; margin-top:14px; padding:15px; border:1px solid #d7cdbc; border-radius:14px; background:radial-gradient(circle at 50% -20%,rgba(245,219,159,.28),transparent 45%),linear-gradient(145deg,#fffdf8,#f3eee6); overflow:hidden; }
.booster-reveal::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.28; background-image:linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.8) 49%,transparent 52%); background-size:220% 100%; }
.booster-reveal.opening::before { animation:pack-glint 2.8s linear infinite; }
.booster-reveal-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:12px; }
.booster-reveal-head > div:first-child { display:grid; gap:2px; }
.booster-reveal-head strong { font-size:15px; }
.booster-reveal-head small { margin:0; }
.booster-reveal-actions { display:flex; align-items:center; gap:7px; }
.booster-reveal-actions b { padding:4px 7px; border-radius:999px; background:#2c2823; color:#fff; font-size:7px; letter-spacing:.08em; }
.booster-reveal-actions button { min-height:30px; padding:5px 8px; font-size:8px; font-weight:900; }
.booster-hit { position:relative; }
.booster-hit.revealed { animation:booster-card-reveal .42s cubic-bezier(.2,.75,.25,1) both; }
.booster-hit.tier-t2.revealed { box-shadow:0 8px 18px rgba(112,76,145,.12); }
.booster-hit.tier-t3.revealed { border-color:#c39338; box-shadow:0 10px 26px rgba(159,109,26,.22), inset 0 0 0 1px rgba(255,232,164,.7); }
.booster-facedown { min-height:174px; display:grid; place-items:stretch; padding:7px; border:1px solid #59544d; border-top:5px solid #292622; background:#eee8df; }
.booster-facedown:disabled { opacity:.72; }
.booster-facedown.next-reveal { opacity:1; cursor:pointer; box-shadow:0 0 0 3px rgba(176,109,22,.16),0 12px 26px rgba(50,39,24,.13); animation:next-card-pulse 1.7s ease-in-out infinite; }
.booster-card-back { height:100%; min-height:152px; display:grid; place-items:center; align-content:center; gap:3px; border:1px solid #6d665d; border-radius:7px; background:repeating-linear-gradient(135deg,#25221f 0 10px,#312d28 10px 20px); color:#fff8e8; box-shadow:inset 0 0 0 4px #d8bd78,inset 0 0 0 6px #24211e; }
.booster-card-back span { font-size:9px; letter-spacing:.24em; color:#e6cc8f; }
.booster-card-back b { font-size:21px; letter-spacing:.08em; }
.booster-card-back small { margin-top:8px; color:#d9d0c1; font-size:7px; font-weight:900; letter-spacing:.12em; }
.booster-hit-art { position:relative; }
.foil-sheen { position:absolute; inset:-40%; transform:rotate(24deg); background:linear-gradient(90deg,transparent 34%,rgba(255,239,169,.44) 48%,rgba(224,236,255,.30) 53%,transparent 67%); animation:foil-sweep 2.5s ease-in-out infinite; pointer-events:none; }
@keyframes pack-glint { from { background-position:120% 0; } to { background-position:-120% 0; } }
@keyframes booster-card-reveal { from { opacity:0; transform:translateY(12px) rotateY(28deg) scale(.94); } to { opacity:1; transform:none; } }
@keyframes next-card-pulse { 0%,100% { transform:none; } 50% { transform:translateY(-3px); } }
@keyframes foil-sweep { 0%,25% { transform:translateX(-45%) rotate(24deg); opacity:0; } 45% { opacity:1; } 70%,100% { transform:translateX(45%) rotate(24deg); opacity:0; } }

.resource-card.reputation-resource.cue-reputation-loss { animation:reputation-hit .58s ease; }
.resource-card.reputation-resource.cue-reputation-gain { animation:reputation-gain .58s ease; }
@keyframes reputation-hit { 0%,100% { transform:none; box-shadow:none; } 28% { transform:translateX(-3px); box-shadow:0 0 0 3px rgba(190,55,44,.20),0 0 24px rgba(190,55,44,.20); background:#fff0ed; } 55% { transform:translateX(2px); } }
@keyframes reputation-gain { 0%,100% { transform:none; box-shadow:none; } 40% { transform:translateY(-2px); box-shadow:0 0 0 3px rgba(43,137,78,.16),0 0 24px rgba(43,137,78,.15); background:#effaf2; } }
.game-shell.event-game-ended .match-result-panel { animation:result-arrive .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes result-arrive { from { opacity:0; transform:translateY(-8px) scale(.985); } to { opacity:1; transform:none; } }

.match-result-panel { grid-template-columns:auto minmax(0,1fr) auto; }
.match-result-emblem { width:68px; height:68px; display:grid; place-items:center; align-content:center; border-radius:18px; border:1px solid #cfc7bb; background:rgba(255,255,255,.76); box-shadow:inset 0 0 0 4px rgba(255,255,255,.4); }
.match-result-emblem span { font-size:34px; line-height:.9; font-weight:950; }
.match-result-emblem small { margin-top:5px; color:#766f67; font-size:7px; font-weight:950; letter-spacing:.1em; }
.match-result-panel.win .match-result-emblem { color:#2d7447; border-color:#a6cbb2; background:#eff9f2; }
.match-result-panel.loss .match-result-emblem { color:#a4453e; border-color:#ddb7b2; background:#fff1ef; }
.match-scoreline { width:min(430px,100%); display:grid; grid-template-columns:1fr auto 1fr; gap:7px; align-items:center; margin:4px 0; }
.match-scoreline span { display:flex; align-items:baseline; gap:5px; font-size:7px; font-weight:900; letter-spacing:.08em; color:#7b746c; }
.match-scoreline span:last-child { justify-content:flex-end; }
.match-scoreline b { color:#2c2925; font-size:16px; }
.match-scoreline i { font-style:normal; color:#9a9187; font-size:6px; font-weight:900; letter-spacing:.07em; }

@media (max-width:1000px) {
  .collection-card.catalog-frame { min-height:300px; }
}
@media (max-width:760px) {
  .collection-set-progress { width:100%; }
  .collection-grid { grid-template-columns:repeat(2,minmax(138px,1fr)); gap:7px; }
  .collection-card.catalog-frame { min-height:292px; }
  .collection-rules { min-height:39px; -webkit-line-clamp:2; }
  .booster-reveal { padding:11px; }
  .booster-reveal-head { align-items:flex-start; flex-direction:column; }
  .booster-reveal-actions { width:100%; justify-content:space-between; }
  .match-result-panel { grid-template-columns:auto minmax(0,1fr); }
  .match-result-emblem { width:54px; height:54px; border-radius:14px; }
  .match-result-emblem span { font-size:27px; }
  .match-result-actions,.match-result-panel > .match-reward-panel { grid-column:1/-1; }
}
@media (max-width:520px) {
  .collection-grid { grid-template-columns:1fr 1fr; }
  .collection-card.catalog-frame { min-height:278px; padding:6px; }
  .collection-name-row > strong { font-size:11px; }
  .collection-rules { font-size:7px; }
  .collection-mini-tags { display:none; }
  .match-result-panel { grid-template-columns:1fr; }
  .match-result-emblem { width:48px; height:48px; }
}
@media (prefers-reduced-motion: reduce) {
  .booster-reveal.opening::before,.booster-hit.revealed,.booster-facedown.next-reveal,.foil-sheen,.resource-card.reputation-resource.cue-reputation-loss,.resource-card.reputation-resource.cue-reputation-gain,.game-shell.event-game-ended .match-result-panel { animation:none; }
}

/* v5.0 board + combat polish */
.game-shell { --combat-red:#c94235; --combat-red-soft:rgba(201,66,53,.16); --combat-gold:#b57a20; --combat-green:#2d8050; }

/* Attack line gets a soft underglow without changing board geometry. */
.attack-overlay path#attackGlowPath { fill:none; stroke:rgba(201,66,53,.22); stroke-width:12; stroke-linecap:round; filter:blur(4px); }
.attack-overlay path#attackPath { stroke-width:4.5; filter:drop-shadow(0 2px 3px rgba(80,15,8,.32)) drop-shadow(0 0 6px rgba(201,66,53,.22)); }
.card.attack-origin { box-shadow:0 14px 30px rgba(167,54,42,.18),0 0 0 4px rgba(201,66,53,.25); animation:attack-origin-pulse .85s ease-in-out infinite alternate; }
.card.attack-destination,
.resource-card[data-reputation-player].attack-destination { position:relative; box-shadow:0 0 0 4px rgba(201,66,53,.28),0 0 26px rgba(201,66,53,.18); }
@keyframes attack-origin-pulse { from { transform:translateY(-2px); } to { transform:translateY(-6px) scale(1.015); } }

/* Clear selection/target language. */
.game-shell.interaction-targets .card.target-candidate::before,
.game-shell.interaction-attack .card.target-candidate::before,
.card.target-selected::before,
.card.promotion-material-candidate::before { position:absolute; z-index:9; left:50%; top:-12px; transform:translateX(-50%); padding:3px 7px; border-radius:999px; color:#fff; font-size:6px; font-weight:950; letter-spacing:.12em; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.game-shell.interaction-targets .card.target-candidate::before { content:'TARGET'; background:#276cb4; }
.game-shell.interaction-attack .card.target-candidate::before { content:'ATTACK TARGET'; background:#b34937; }
.card.target-selected::before { content:'LOCKED'; background:#277548; }
.card.target-selected { animation:target-lock .5s ease both; }
@keyframes target-lock { 0% { transform:scale(.97); } 55% { transform:scale(1.04); } 100% { transform:none; } }

/* Promotion material selection reads directly on the field. */
.game-shell.interaction-promotion .own-board .card:not(.promotion-material-candidate) { opacity:.48; filter:saturate(.55); }
.card.promotion-material-candidate { opacity:1 !important; filter:none !important; transform:translateY(-4px); box-shadow:0 13px 27px rgba(154,102,25,.16),0 0 0 3px rgba(181,122,32,.36); }
.card.promotion-material-candidate::before { content:'MATERIAL'; background:#9d6a1f; }
.promotion-guidance { border-color:#d8bb78; background:linear-gradient(180deg,#fffaf0,#fff5dc); box-shadow:0 10px 26px rgba(126,87,20,.08); }
.promotion-guidance .promotion-option { border-color:#cfad61; background:#fffdf7; }
.promotion-guidance .promotion-option:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(112,76,13,.12); }

/* Event feedback can now show a whole combat batch, not only its last event. */
.card.cue-promotion { animation:card-promotion .78s cubic-bezier(.2,.75,.2,1); }
.card.cue-incident { animation:incident-activate .72s ease; }
.card.cue-destroyed { animation:card-destroyed-v50 .76s ease; }
@keyframes card-promotion { 0% { opacity:.45; transform:translateY(16px) scale(.9); filter:brightness(1.45); } 55% { transform:translateY(-7px) scale(1.045); filter:brightness(1.16); box-shadow:0 0 0 4px rgba(181,122,32,.26),0 0 34px rgba(181,122,32,.24); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes incident-activate { 0%,100% { transform:none; } 30% { transform:translateY(-5px) rotate(-1deg); box-shadow:0 0 0 4px rgba(174,58,51,.24),0 0 28px rgba(174,58,51,.22); } }
@keyframes card-destroyed-v50 { 0% { opacity:1; filter:none; } 28% { transform:scale(1.055); filter:brightness(1.5) saturate(.8); box-shadow:0 0 0 4px rgba(197,62,50,.30),0 0 30px rgba(197,62,50,.28); } 62% { opacity:.34; transform:scale(.95) rotate(-1.5deg); filter:grayscale(.8); } 100% { opacity:1; transform:none; filter:none; } }

.archive-compact.archive-impact { animation:archive-receive .72s ease; border-color:#c9877e; background:#fff5f2; }
.archive-impact-chip { margin-left:auto; padding:3px 6px; border-radius:999px; background:#a8473e; color:#fff; font-size:6px; font-weight:950; letter-spacing:.08em; white-space:nowrap; }
@keyframes archive-receive { 0%,100% { transform:none; } 36% { transform:translateX(3px); box-shadow:0 0 0 3px rgba(183,70,58,.16),0 0 22px rgba(183,70,58,.12); } }

.reputation-resource { overflow:visible; }
.reputation-impact-number { position:absolute !important; z-index:8; right:8px; top:-17px; min-width:34px; padding:4px 7px; border-radius:999px; color:#fff; text-align:center; font-size:13px; font-weight:950; line-height:1; pointer-events:none; animation:rep-number-pop .88s ease both; }
.reputation-impact-number.loss { background:#b63f35; box-shadow:0 8px 20px rgba(157,43,35,.24); }
.reputation-impact-number.gain { background:#2f8151; box-shadow:0 8px 20px rgba(34,111,66,.20); }
@keyframes rep-number-pop { 0% { opacity:0; transform:translateY(9px) scale(.72); } 35% { opacity:1; transform:translateY(-5px) scale(1.12); } 78% { opacity:1; } 100% { opacity:0; transform:translateY(-13px) scale(.96); } }

.combat-moment,.promotion-moment { position:fixed; z-index:92; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; min-width:min(360px,82vw); display:grid; justify-items:center; gap:3px; padding:17px 22px; border-radius:16px; color:#fff; text-align:center; background:rgba(35,30,26,.94); box-shadow:0 24px 70px rgba(0,0,0,.27); animation:combat-moment-pop 1.42s ease both; }
.combat-moment::after,.promotion-moment::after { content:''; position:absolute; inset:-14px; border-radius:24px; border:1px solid rgba(255,255,255,.25); opacity:.45; }
.combat-moment span,.promotion-moment span { font-size:8px; font-weight:950; letter-spacing:.22em; opacity:.72; }
.combat-moment strong,.promotion-moment strong { font-size:18px; line-height:1.15; }
.combat-moment small,.promotion-moment small { color:#ddd2c6; font-size:10px; font-weight:800; }
.combat-moment.breakthrough { background:linear-gradient(145deg,rgba(115,40,32,.97),rgba(46,31,27,.97)); box-shadow:0 24px 72px rgba(130,40,30,.32); }
.combat-moment.breakthrough span { color:#ffd6a3; opacity:1; }
.promotion-moment { background:linear-gradient(145deg,rgba(117,77,18,.97),rgba(42,33,23,.97)); box-shadow:0 24px 72px rgba(126,83,20,.30); }
.promotion-moment span { color:#ffe0a1; opacity:1; }
@keyframes combat-moment-pop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.88); } 18% { opacity:1; transform:translate(-50%,-50%) scale(1.035); } 72% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-54%) scale(.98); } }

/* Response/chain hierarchy: the next resolving link is unmistakable. */
.decision-center.response-active { animation:response-window-arrive .32s ease both; }
.decision-center.response-active::after { content:''; position:absolute; inset:5px; border:1px solid rgba(199,157,61,.28); border-radius:9px; pointer-events:none; animation:response-ring 1.6s ease-in-out infinite; }
.chain-item { transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.chain-item.resolves-next { border-color:#bea04e; background:linear-gradient(180deg,#fffdf5,#fff7df); transform:translateY(-2px); box-shadow:0 8px 18px rgba(98,73,14,.13),0 0 0 2px rgba(190,160,78,.16); }
.chain-item.resolves-next::after { content:'RESOLVES NEXT'; position:absolute; right:7px; top:-8px; padding:2px 5px; border-radius:999px; background:#746020; color:#fff; font-size:5px; font-weight:950; letter-spacing:.09em; }
@keyframes response-window-arrive { from { opacity:.7; transform:translateY(3px); } to { opacity:1; transform:none; } }
@keyframes response-ring { 0%,100% { opacity:.25; } 50% { opacity:.65; } }

.game-shell.combat-resolving .employee-row { transition:filter .2s ease; }
.game-shell.promotion-resolving .own-board { box-shadow:0 8px 26px rgba(40,32,20,.055),0 0 34px rgba(181,122,32,.08); }

@media (max-width:760px) {
  .combat-moment,.promotion-moment { top:43%; min-width:min(320px,88vw); padding:14px 16px; }
  .combat-moment strong,.promotion-moment strong { font-size:15px; }
  .reputation-impact-number { top:-13px; font-size:11px; }
  .game-shell.interaction-targets .card.target-candidate::before,
  .game-shell.interaction-attack .card.target-candidate::before,
  .card.target-selected::before,
  .card.promotion-material-candidate::before { top:-8px; padding:2px 5px; font-size:5px; }
}
@media (prefers-reduced-motion: reduce) {
  .card.attack-origin,.card.target-selected,.card.cue-promotion,.card.cue-incident,.card.cue-destroyed,.archive-compact.archive-impact,.reputation-impact-number,.combat-moment,.promotion-moment,.decision-center.response-active,.decision-center.response-active::after { animation:none !important; }
}

/* v5.1 power readability pass — Cost stays top-right; Employee Power is always bottom-right. */
.power-cluster {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 7;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  pointer-events: none;
}
.power-cluster .power-badge {
  position: relative;
  right: auto;
  bottom: auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 2px 1px 1px;
  border: 2px solid #fff;
  border-radius: 9px;
  display: grid;
  grid-template-rows: 7px 1fr;
  align-items: center;
  justify-items: center;
  background: color-mix(in srgb, var(--type-color) 92%, #252525);
  color: #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
  line-height: 1;
}
.power-cluster .power-badge span {
  font-size: 4.4px;
  font-weight: 950;
  letter-spacing: .06em;
  opacity: .9;
}
.power-cluster .power-badge b {
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
}
.current-power-badge {
  position: relative;
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 2px 7px rgba(0,0,0,.16);
}
.current-power-badge.boosted { background: #2f8b57; }
.current-power-badge.debuffed { background: #b44b45; }
.card.has-power .card-tags { padding-right: 36px; }
.card.has-power.power-changed .card-tags { padding-right: 65px; }
.card.legal-card .power-cluster { bottom: 24px; }

.modal-card-face .power-cluster { right: 8px; bottom: 8px; gap: 6px; }
.modal-card-face .power-cluster .power-badge {
  width: 58px;
  min-width: 58px;
  height: 58px;
  border-radius: 14px;
  border-width: 3px;
  grid-template-rows: 13px 1fr;
  padding: 4px 2px 2px;
}
.modal-card-face .power-cluster .power-badge span { font-size: 8px; }
.modal-card-face .power-cluster .power-badge b { font-size: 29px; }
.modal-card-face .current-power-badge {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-width: 3px;
  font-size: 23px;
}
.modal-card-face.has-power .card-tags { padding-right: 68px; }
.modal-card-face.has-power.power-changed .card-tags { padding-right: 122px; }

@media (max-width:950px) {
  .power-cluster .power-badge { width: 28px; min-width: 28px; height: 28px; }
  .power-cluster .power-badge b { font-size: 13px; }
  .current-power-badge { width: 22px; min-width: 22px; height: 22px; font-size: 11px; }
  .card.has-power.power-changed .card-tags { padding-right: 61px; }
}
/* Keep POWER anchored consistently even when a hand card is currently legal to play. */
.card.legal-card .power-cluster { bottom: 4px; }
.card.legal-card .power-cluster .power-badge { bottom: auto; }

/* v5.2 card presentation + content polish */
/* Alpha artwork fallbacks now read as deliberate office-card placeholders instead of empty labels. */
.fallback-art,
.catalog-fallback-art {
  --fallback-accent:#807970;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  align-content:center;
  min-height:0;
  background:
    radial-gradient(circle at 76% 22%, color-mix(in srgb,var(--fallback-accent) 18%,transparent) 0 13%, transparent 14%),
    linear-gradient(145deg,#f2eee7 0%,#e8e1d7 58%,#f7f3ed 100%);
  color:#514b44;
}
.fallback-art.dept-customer_service,.catalog-fallback-art.dept-customer_service { --fallback-accent:#71859a; }
.fallback-art.dept-it,.catalog-fallback-art.dept-it { --fallback-accent:#637d84; }
.fallback-art.dept-office,.catalog-fallback-art.dept-office { --fallback-accent:#8e7d69; }
.fallback-art.dept-marketing,.catalog-fallback-art.dept-marketing { --fallback-accent:#9b7388; }
.fallback-art.dept-production,.catalog-fallback-art.dept-production { --fallback-accent:#98775c; }
.fallback-art.dept-neutral,.catalog-fallback-art.dept-neutral { --fallback-accent:#77756f; }
.fallback-art::before,
.catalog-fallback-art::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.52;
  background-image:
    linear-gradient(rgba(255,255,255,.72) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.72) 1px,transparent 1px);
  background-size:20px 20px;
  transform:perspective(220px) rotateX(58deg) scale(1.35) translateY(14%);
  transform-origin:50% 100%;
}
.fallback-art::after,
.catalog-fallback-art::after {
  content:'';
  position:absolute;
  inset:auto -8% -38% 32%;
  z-index:-1;
  height:76%;
  border-radius:50%;
  background:color-mix(in srgb,var(--fallback-accent) 17%,transparent);
  filter:blur(1px);
}
.fallback-art-scene {
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.52;
  pointer-events:none;
}
.fallback-art-scene i { position:absolute; display:block; border:1px solid color-mix(in srgb,var(--fallback-accent) 55%,#8e877f); background:rgba(255,255,255,.36); box-shadow:0 4px 10px rgba(54,46,38,.05); }
.fallback-art-scene i:nth-child(1) { width:38%; height:38%; left:8%; bottom:15%; border-radius:3px; }
.fallback-art-scene i:nth-child(2) { width:31%; height:6%; left:41%; bottom:23%; border-radius:999px; transform:rotate(-7deg); background:color-mix(in srgb,var(--fallback-accent) 18%,#fff); }
.fallback-art-scene i:nth-child(3) { width:17%; height:45%; right:8%; top:10%; border-radius:2px; }
.fallback-art-scene i:nth-child(4) { width:27%; height:20%; right:22%; top:17%; border-radius:3px; transform:rotate(3deg); }
.fallback-art-mark { position:relative; z-index:2; display:grid; justify-items:center; gap:2px; padding:5px 9px; border:1px solid rgba(255,255,255,.66); border-radius:8px; background:rgba(251,248,242,.68); box-shadow:0 5px 16px rgba(45,37,29,.07); backdrop-filter:blur(4px); }
.fallback-art-mark span { color:color-mix(in srgb,var(--fallback-accent) 82%,#36322e) !important; opacity:.9 !important; font-size:15px !important; line-height:1 !important; letter-spacing:.12em !important; font-weight:950 !important; }
.fallback-art-mark small { margin:0 !important; color:#706961 !important; opacity:.72 !important; font-size:4.8px !important; line-height:1 !important; letter-spacing:.13em !important; font-weight:900 !important; }
.catalog-fallback-art { width:100%; height:100%; min-height:94px; border-radius:inherit; }
.collection-preview-art .catalog-fallback-art { min-height:175px; }
.booster-hit-art .catalog-fallback-art { min-height:105px; }

/* Long rules use density tiers instead of looking randomly clipped. Full text stays available via hover/title/close-up. */
.card-rules-mini.rules-standard { font-size:7.2px; line-height:1.17; -webkit-line-clamp:3; }
.card-rules-mini.rules-dense { padding:4px 5px 3px; font-size:6.45px; line-height:1.08; letter-spacing:-.005em; -webkit-line-clamp:4; }
.card-rules-mini.rules-ultra { padding:4px 4px 3px; font-size:5.95px; line-height:1.06; letter-spacing:-.012em; -webkit-line-clamp:4; }
.modal-card-face .modal-rules-box.rules-standard { font-size:16px; line-height:1.42; }
.modal-card-face .modal-rules-box.rules-dense { font-size:14.3px; line-height:1.32; }
.modal-card-face .modal-rules-box.rules-ultra { font-size:13.1px; line-height:1.27; }
.hover-rules.rules-dense { font-size:11.2px; line-height:1.3; }
.hover-rules.rules-ultra { font-size:10.5px; line-height:1.26; }

/* Flavor is visible during inspect/hover without competing with gameplay text on the small card. */
.hover-flavor { margin-top:8px; padding:7px 8px 0; border-top:1px solid #ded7ce; color:#746d65; font-size:9px; line-height:1.32; font-style:italic; }
.flavor-panel { position:relative; overflow:hidden; background:linear-gradient(145deg,#fffdf9,#f7f1e8); }
.flavor-panel::after { content:'“'; position:absolute; right:12px; bottom:-21px; color:#e0d8cd; font-family:Georgia,serif; font-size:82px; line-height:1; pointer-events:none; }
.flavor-panel .flavor-text { position:relative; z-index:1; border-left-color:color-mix(in srgb,var(--type-color,#8a8177) 30%,#d9d2c8); }

/* Runtime in the close-up is scannable rather than a single technical sentence. */
.runtime-panel { background:linear-gradient(145deg,#fbfaf7,#f1eee8); }
.runtime-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.runtime-detail { min-height:50px; display:grid; align-content:center; gap:3px; padding:8px 9px; border:1px solid #dcd4c9; border-radius:9px; background:rgba(255,255,255,.78); }
.runtime-detail small { color:#817970; font-size:7px; line-height:1; font-weight:950; letter-spacing:.09em; }
.runtime-detail b { color:#312d29; font-size:15px; line-height:1.05; }
.runtime-detail b i { margin-left:3px; font-size:10px; font-style:normal; }
.runtime-detail.positive { border-color:#aed0ba; background:#eff8f2; }
.runtime-detail.positive b,.runtime-detail.positive b i { color:#287448; }
.runtime-detail.negative { border-color:#deb8b4; background:#fff1ef; }
.runtime-detail.negative b,.runtime-detail.negative b i { color:#a4433c; }
.runtime-detail.warning { border-color:#e0c987; background:#fff8df; }
.runtime-detail.warning b { color:#755715; }
.runtime-empty { padding:9px 10px; border:1px dashed #d7d0c6; border-radius:9px; color:#777067; font-size:11px; line-height:1.35; }

@media (max-width:760px) {
  .runtime-detail-grid { grid-template-columns:1fr 1fr; }
  .runtime-detail { min-height:44px; padding:7px; }
  .runtime-detail b { font-size:13px; }
  .collection-preview-art .catalog-fallback-art { min-height:145px; }
}

/* v5.3 first-time player onboarding — contextual, dismissible guidance without changing gameplay. */
.rules-primer {
  border:1px solid #d8d0c5;
  border-radius:14px;
  background:rgba(255,253,249,.9);
  overflow:hidden;
}
.rules-primer > summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
}
.rules-primer > summary::-webkit-details-marker { display:none; }
.rules-primer > summary > div { display:grid; gap:2px; }
.rules-primer > summary span { color:#8a8178; font-size:7px; font-weight:950; letter-spacing:.13em; }
.rules-primer > summary strong { font-size:12px; }
.rules-primer > summary small { color:#817970; font-size:9px; text-align:right; }
.rules-primer[open] > summary { border-bottom:1px solid #e2dcd3; background:#faf7f1; }
.rules-primer-body { padding:11px; display:grid; gap:10px; }
.rules-primer-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.rules-primer-grid > div { min-height:116px; position:relative; display:grid; align-content:start; gap:5px; padding:10px; border:1px solid #dfd8cf; border-radius:10px; background:#fff; }
.rules-primer-grid b { width:23px; height:23px; display:grid; place-items:center; border-radius:999px; background:#2f2c28; color:#fff; font-size:9px; }
.rules-primer-grid strong { font-size:9px; letter-spacing:.08em; }
.rules-primer-grid span { color:#746d65; font-size:8px; line-height:1.35; }
.rules-primer-actions { display:flex; justify-content:flex-end; gap:7px; flex-wrap:wrap; }

.guidance-coach {
  --coach-accent:#3a6f8d;
  width:min(960px,calc(100% - 16px));
  margin:8px auto 10px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--coach-accent) 35%,#d8d0c5);
  border-left:5px solid var(--coach-accent);
  border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--coach-accent) 8%,#fffdf9),#fffdf9 74%);
  box-shadow:0 8px 22px rgba(45,38,30,.07);
}
.guidance-kicker { display:grid; gap:3px; min-width:98px; }
.guidance-kicker span { color:var(--coach-accent); font-size:7px; font-weight:950; letter-spacing:.12em; }
.guidance-kicker small { color:#8a8279; font-size:7px; font-weight:850; }
.guidance-copy { display:grid; gap:3px; }
.guidance-copy strong { color:#302d29; font-size:11px; }
.guidance-copy span { color:#6f6860; font-size:9px; line-height:1.35; }
.guidance-actions { display:flex; gap:6px; align-items:center; }
.guidance-coach.focus-decision { --coach-accent:#a45f31; }
.guidance-coach.focus-employees { --coach-accent:#1765b5; }
.guidance-coach.focus-support { --coach-accent:#b77b27; }
.guidance-coach.focus-hand { --coach-accent:#3a8752; }

.game-shell.guidance-focus-hand .own-hand,
.game-shell.guidance-focus-employees .own-board .employee-row,
.game-shell.guidance-focus-support .own-board .support-row,
.game-shell.guidance-focus-decision .decision-center {
  box-shadow:0 0 0 2px rgba(47,103,139,.18),0 10px 26px rgba(47,103,139,.06);
  border-radius:12px;
}
.game-shell.guidance-focus-decision .decision-center { box-shadow:0 0 0 2px rgba(164,95,49,.18),0 10px 26px rgba(164,95,49,.06); }
.game-shell.guidance-focus-employees .own-board .employee-row { box-shadow:0 0 0 2px rgba(23,101,181,.16); }
.game-shell.guidance-focus-support .own-board .support-row { box-shadow:0 0 0 2px rgba(183,123,39,.16); }
.game-shell.guidance-focus-hand .own-hand { box-shadow:0 0 0 2px rgba(58,135,82,.16); }

@media (max-width:950px) {
  .rules-primer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .guidance-coach { grid-template-columns:1fr auto; gap:8px 10px; }
  .guidance-kicker { min-width:0; }
  .guidance-copy { grid-column:1/-1; grid-row:2; }
  .guidance-actions { grid-column:2; grid-row:1; }
  .guidance-actions .ghost { display:none; }
}
@media (max-width:700px) {
  .rules-primer > summary { align-items:flex-start; }
  .rules-primer > summary small { max-width:145px; }
  .rules-primer-grid { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:3px; }
  .rules-primer-grid > div { min-width:190px; scroll-snap-align:start; }
  .rules-primer-actions { justify-content:stretch; }
  .rules-primer-actions button { flex:1 1 100%; }
  .guidance-coach { width:calc(100% - 12px); margin:6px auto 8px; padding:9px 10px; }
  .guidance-actions button { min-height:34px; }
}
@media (prefers-reduced-motion: reduce) {
  .guidance-coach { transition:none; }
}


/* v5.4 — collection acquisition + booster inspection polish */
.collection-filters { grid-template-columns:minmax(190px,1fr) 155px 125px 135px 130px auto; }
.collection-card-head > div { display:flex; align-items:center; gap:4px; }
.new-card-badge {
  display:inline-flex; align-items:center; justify-content:center; min-width:25px; padding:2px 5px;
  border-radius:999px; background:#2f8b57; color:#fff; font-style:normal; font-size:6px; font-weight:950;
  letter-spacing:.09em; box-shadow:0 2px 6px rgba(35,112,69,.18);
}
.collection-card.new-acquisition { box-shadow:0 10px 26px rgba(41,125,79,.14); }
.collection-card.new-acquisition::after { box-shadow:inset 0 0 0 2px rgba(50,144,88,.22); }
.collection-set-progress .new-set-count { border-color:#b8d9c5; background:#edf8f1; color:#2c714a; }
.mark-seen-button { padding:4px 7px; min-height:0; border-radius:999px; font-size:7px; }
.booster-hit.new-pull { box-shadow:0 10px 25px rgba(47,139,87,.18), inset 0 0 0 1px rgba(95,177,124,.35); }
.booster-hit.new-pull::after {
  content:'NEW'; position:absolute; top:7px; right:7px; z-index:4; padding:3px 5px; border-radius:999px;
  background:#2f8b57; color:white; font-size:6px; line-height:1; font-weight:950; letter-spacing:.08em;
}
.booster-inspect { margin-top:auto; justify-self:start; padding:2px 5px; border-radius:999px; background:#f0ece5; color:#716960; font-size:6px; font-weight:900; font-style:normal; letter-spacing:.08em; }
.booster-hit:hover .booster-inspect { background:#e5ded3; color:#36312c; }

@media (max-width:1100px) {
  .collection-filters { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:700px) {
  .collection-filters { grid-template-columns:1fr 1fr; }
  .mark-seen-button { font-size:8px; }
}

/* v5.5 deckbuilder + starter blueprint presentation */
.builder-starter-shelf { margin:0 0 12px; padding:12px; border:1px solid #d1cabf; border-radius:14px; background:#fffdf9; box-shadow:0 8px 24px rgba(40,32,20,.05); }
.builder-starter-head { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:9px; }
.builder-starter-head > div { display:grid; gap:2px; }
.builder-starter-head span { color:#8b8177; font-size:7px; font-weight:950; letter-spacing:.11em; }
.builder-starter-head strong { font-size:14px; }
.builder-starter-head small { max-width:360px; color:#817970; font-size:8px; line-height:1.35; text-align:right; }
.builder-starter-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.builder-starter-card { --dept:#7d766e; display:grid; grid-template-rows:auto auto 1fr auto auto; gap:5px; min-width:0; padding:9px; border:1px solid color-mix(in srgb,var(--dept) 25%,#d7d0c6); border-top:4px solid var(--dept); border-radius:10px; background:linear-gradient(160deg,color-mix(in srgb,var(--dept) 5%,#fff),#fffdf9 55%); }
.builder-starter-card.dept-customer_service { --dept:#6c7bd9; }.builder-starter-card.dept-it { --dept:#65848f; }.builder-starter-card.dept-office { --dept:#9b7c5c; }.builder-starter-card.dept-marketing { --dept:#c36d93; }.builder-starter-card.dept-production { --dept:#b67945; }
.builder-starter-title { display:grid; grid-template-columns:auto 1fr auto; gap:5px; align-items:center; }
.builder-starter-title span { min-width:28px; padding:3px 5px; border-radius:999px; background:color-mix(in srgb,var(--dept) 12%,#fff); color:var(--dept); font-size:7px; font-weight:950; text-align:center; }
.builder-starter-title strong { min-width:0; font-size:10px; }
.builder-starter-title b { color:var(--dept); font-size:14px; }
.builder-starter-card p { margin:0; color:#3f3b36; font-size:9px; font-weight:900; line-height:1.25; }
.builder-starter-card > small { color:#7c746c; font-size:7px; line-height:1.35; }
.builder-starter-status { display:flex; justify-content:space-between; gap:5px; align-items:center; padding-top:5px; border-top:1px solid #eee8df; font-size:7px; font-weight:900; }
.builder-starter-status span { color:#746d64; }.builder-starter-status b { color:var(--dept); }
.builder-starter-card button { width:100%; padding:6px 7px; font-size:8px; font-weight:900; }

.deck-identity { --dept:#7d766e; display:grid; grid-template-columns:50px 1fr; gap:8px; margin:8px 0; padding:9px; border:1px solid color-mix(in srgb,var(--dept) 26%,#d5cec4); border-left:4px solid var(--dept); border-radius:10px; background:linear-gradient(135deg,color-mix(in srgb,var(--dept) 7%,#fff),#fffdf9); }
.deck-identity.dept-customer_service { --dept:#6c7bd9; }.deck-identity.dept-it { --dept:#65848f; }.deck-identity.dept-office { --dept:#9b7c5c; }.deck-identity.dept-marketing { --dept:#c36d93; }.deck-identity.dept-production { --dept:#b67945; }.deck-identity.dept-neutral { --dept:#8b847b; }
.deck-identity-code { display:grid; place-content:start center; justify-items:center; gap:3px; padding:6px 3px; border-radius:8px; background:color-mix(in srgb,var(--dept) 10%,#fff); color:var(--dept); }
.deck-identity-code span { font-size:17px; font-weight:950; }.deck-identity-code small { font-size:5px; font-weight:950; letter-spacing:.08em; text-align:center; }
.deck-identity-copy { min-width:0; display:grid; gap:2px; }.deck-identity-copy > strong { font-size:11px; }.deck-identity-copy > b { font-size:9px; line-height:1.25; }.deck-identity-copy > small { color:#7d756d; font-size:7px; line-height:1.35; }
.deck-identity-mix { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }.deck-identity-mix span { padding:2px 5px; border:1px solid #ddd5ca; border-radius:999px; background:#fff; color:#6f685f; font-size:6px; font-weight:900; }
.deck-readiness { grid-column:1/-1; display:flex; gap:4px; flex-wrap:wrap; }.deck-readiness span { padding:3px 6px; border-radius:999px; font-size:6px; font-weight:950; letter-spacing:.05em; }.deck-readiness .ready { background:#eaf6ee; color:#287044; border:1px solid #acd0b8; }.deck-readiness .not-ready { background:#f7f1e8; color:#88683b; border:1px solid #dbc8aa; }
.deck-builder-message { margin:7px 0; padding:6px 8px; border:1px solid #b9cfbf; border-radius:8px; background:#f0f8f2; color:#356348; font-size:8px; font-weight:800; }
.deck-builder-actions { display:grid; grid-template-columns:1fr auto; gap:5px; margin:8px 0 2px; }.deck-builder-actions button { font-size:8px; font-weight:900; }

.deck-list.grouped { gap:7px; }.deck-list-group { --type:#777; display:grid; gap:3px; }.deck-list-group.type-employee { --type:#1765b5; }.deck-list-group.type-action { --type:#3a8752; }.deck-list-group.type-incident { --type:#b9433d; }.deck-list-group.type-system { --type:#d08a27; }
.deck-list-group > header { display:flex; justify-content:space-between; align-items:center; padding:3px 1px; color:var(--type); font-size:7px; font-weight:950; letter-spacing:.07em; }.deck-list-group > header span { color:#847c73; font-size:6px; }
.deck-list-row { display:grid; grid-template-columns:minmax(0,1fr) 34px 50px; gap:5px; align-items:center; padding:6px 7px; border:1px solid #e1dbd2; border-left:3px solid color-mix(in srgb,var(--type) 55%,#ddd); border-radius:7px; background:#faf7f2; cursor:pointer; }
.deck-list-row:hover { background:#fff; border-color:color-mix(in srgb,var(--type) 35%,#ddd); }.deck-list-row.owned-gap { background:#fff6ed; border-color:#e1b984; }
.deck-list-row > div:first-child { min-width:0; display:grid; gap:1px; }.deck-list-row > div:first-child span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.deck-list-row > div:first-child small { color:#857d74; font-size:6px; }
.deck-list-owned { display:grid; justify-items:center; gap:0; }.deck-list-owned small { color:#938b82; font-size:5px; font-weight:900; }.deck-list-owned b { font-size:9px; }
.deck-list-stepper { display:grid; grid-template-columns:1fr 1fr; gap:2px; }.deck-list-stepper button { min-width:0; padding:4px 2px; font-size:10px; font-weight:950; }

@media (max-width:1100px) {
  .builder-starter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .builder-starter-head { align-items:start; flex-direction:column; gap:3px; }.builder-starter-head small { text-align:left; }
  .builder-starter-grid { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; }.builder-starter-card { min-width:205px; scroll-snap-align:start; }
  .deck-builder-actions { grid-template-columns:1fr; }
}

/* v5.6 — match flow + turn readability polish */
.phase-track {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
}
.phase-track span {
  position:relative;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:1px;
  min-height:38px;
  padding:5px 7px;
  overflow:hidden;
}
.phase-track span b { font-size:8px; line-height:1; letter-spacing:.08em; }
.phase-track span small { font-size:6px; line-height:1; color:#9a9288; font-weight:800; letter-spacing:.02em; }
.phase-track span.complete {
  border-color:#c5d4c9;
  background:#eef5f0;
  color:#58705f;
}
.phase-track span.complete::after {
  content:'✓';
  position:absolute;
  right:5px;
  top:4px;
  font-size:7px;
  font-weight:950;
  opacity:.7;
}
.phase-track span.active {
  background:#171717;
  color:#fff;
  border-color:#171717;
  box-shadow:0 5px 14px rgba(27,24,21,.14);
}
.phase-track span.active small { color:#d9d4cd; }
.phase-track span.upcoming { opacity:.72; }

.card-art-stage { position:relative; }
.card-play-hint {
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:31px;
  padding:3px 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.92);
  color:#fff;
  font-size:6px;
  line-height:1;
  font-weight:950;
  letter-spacing:.09em;
  box-shadow:0 3px 10px rgba(29,25,21,.18);
  pointer-events:none;
}
.card-play-hint.play { background:#27774c; }
.card-play-hint.set { background:#9a6930; }
.own-hand.actionable-hand .card:not(.legal-card) {
  opacity:.76;
  filter:saturate(.76) brightness(.99);
}
.own-hand.actionable-hand .card.legal-card {
  opacity:1;
  filter:none;
}
.own-hand.actionable-hand .card:hover,
.own-hand.actionable-hand .card:focus { opacity:1; filter:none; }

.command-dock {
  border-color:#b9b1a6;
  padding:10px 12px;
}
.command-dock.tone-main { border-left:4px solid #3a8752; }
.command-dock.tone-battle { border-left:4px solid #b66e2e; }
.command-dock.tone-response,.command-dock.tone-required { border-left:4px solid #a6752e; }
.command-dock.tone-end,.command-dock.tone-phase { border-left:4px solid #6f777e; }
.command-hint {
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
  align-items:baseline;
}
.command-hint > span {
  grid-column:1;
  grid-row:1;
  align-self:center;
  padding:3px 6px;
  border-radius:999px;
  background:#ece7df;
  color:#746b61;
  font-size:6px;
  line-height:1;
  font-weight:950;
  letter-spacing:.10em;
}
.command-hint > strong {
  grid-column:2;
  grid-row:1;
  color:#2f2b27;
  font-size:11px;
  line-height:1.1;
}
.command-hint > small {
  grid-column:2;
  grid-row:2;
  color:#756e66;
  font-size:8px;
  line-height:1.3;
}
.action-availability {
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:2px;
}
.action-availability b {
  padding:2px 5px;
  border:1px solid #ddd5ca;
  border-radius:999px;
  background:#faf7f2;
  color:#6d655d;
  font-size:6px;
  line-height:1;
  font-weight:950;
  letter-spacing:.06em;
}
.command-buttons { gap:6px; }
.command-buttons .dock-pass { min-height:36px; white-space:nowrap; }
.phase-button { min-height:38px; padding-inline:14px; font-weight:950; }

@media (max-width:800px) {
  .phase-track span { min-height:31px; padding:4px 2px; }
  .phase-track span b { font-size:7px; }
  .phase-track span small { display:none; }
  .phase-track span.complete::after { right:3px; top:2px; font-size:6px; }
  .command-dock { position:sticky; bottom:calc(6px + env(safe-area-inset-bottom)); flex-direction:column; align-items:stretch; }
  .command-hint { grid-template-columns:auto 1fr; }
  .command-buttons { width:100%; justify-content:flex-end; }
  .command-buttons .phase-button { flex:1 1 auto; }
  .card-play-hint { min-width:28px; padding:3px 5px; font-size:5.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-track span.active { box-shadow:none; }
  .own-hand.actionable-hand .card { transition:none; }
}

/* v5.7 — board state readability + Support-zone polish */
.player-head-status {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}
.board-state-pill {
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:3px 6px;
  border:1px solid #d5cec4;
  border-radius:999px;
  background:#f6f2ec;
  color:#6b6258;
  font-size:6px;
  line-height:1;
  font-weight:950;
  letter-spacing:.09em;
}
.board-state-pill.turn { background:#e9f3fb; color:#285f8f; border-color:#b7d0e4; }
.board-state-pill.priority { background:#fff3d8; color:#805817; border-color:#e6c783; }

.zone-title.frontline-title,
.zone-title.backline-title {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.zone-title.frontline-title strong,
.zone-title.backline-title strong {
  color:#423d37;
  font-size:10px;
  letter-spacing:.04em;
}
.zone-title.frontline-title span,
.zone-title.backline-title span {
  color:#827970;
  font-size:7px;
  text-align:right;
}

.field-empty:not(.slot-candidate) {
  min-height:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-style:dashed;
  border-color:rgba(151,143,133,.38);
  background:rgba(255,255,255,.16);
  color:#aaa198;
}
.field-empty:not(.slot-candidate) span {
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.field-empty:not(.slot-candidate) small {
  font-size:6px;
  font-weight:850;
  letter-spacing:.10em;
  opacity:.58;
}
.employee-empty:not(.slot-candidate) { box-shadow:inset 0 0 20px rgba(51,102,153,.025); }
.support-empty:not(.slot-candidate) { box-shadow:inset 0 0 20px rgba(166,111,42,.028); }

.card.face-down-support:not(.hidden-card) {
  border-style:solid;
  box-shadow:0 12px 30px rgba(57,45,31,.10), inset 0 0 0 2px rgba(151,87,46,.08);
}
.card.face-down-support:not(.hidden-card) .card-art-window {
  filter:saturate(.78) brightness(.92);
}
.hidden-support-strip {
  background:#3b2e29 !important;
  color:#f7eee7 !important;
}
.hidden-support-strip span,
.hidden-support-strip b { color:#f7eee7 !important; }
.hidden-support-back {
  aspect-ratio:16/9;
  width:100%;
  border:1px solid #5e5149;
  border-radius:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04) 25%,transparent 25%) 0 0/14px 14px,
    linear-gradient(315deg,rgba(255,255,255,.035) 25%,transparent 25%) 0 0/14px 14px,
    linear-gradient(145deg,#2b2522,#463932);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.035),inset 0 0 30px rgba(0,0,0,.22);
  color:#eee6df;
}
.hidden-support-back span {
  font-size:6px;
  font-weight:900;
  letter-spacing:.15em;
  opacity:.72;
}
.hidden-support-back b {
  font-size:18px;
  line-height:1;
  letter-spacing:.12em;
}
.hidden-support-back small {
  font-size:5px;
  font-weight:900;
  letter-spacing:.09em;
  opacity:.58;
}

.field-state-row { justify-content:flex-start; }
.runtime-badge.attacks.ready.attack-ready-state {
  background:#e2f4e7;
  color:#17653a;
  border-color:#90c6a1;
}
.runtime-badge.attacks.used {
  background:#ece8e3;
  color:#756d65;
  border-color:#c9c1b8;
}
.runtime-badge.system-live {
  background:#fff0ce;
  color:#85570e;
  border-color:#e1bd73;
}
.runtime-badge.incident-set {
  background:#f8e5e2;
  color:#8f3c34;
  border-color:#d9a19a;
}
.runtime-badge.ability-state {
  background:#eee6f8;
  color:#65428b;
  border-color:#c5addf;
}

@media (max-width:800px) {
  .zone-title.frontline-title span,
  .zone-title.backline-title span { max-width:58%; font-size:6px; }
  .board-state-pill { min-height:16px; padding:2px 5px; font-size:5.5px; }
  .field-empty:not(.slot-candidate) span { font-size:6px; }
  .field-empty:not(.slot-candidate) small { font-size:5px; }
}

/* v5.8 card interaction + inspector polish */
.card[data-card-info]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px color-mix(in srgb,var(--type-color,#456) 62%,transparent), 0 14px 30px rgba(30,24,18,.16);
  z-index: 20;
}
.card-info {
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.card-info:hover,
.card-info:focus-visible {
  transform: scale(1.12);
  background:#fff;
  box-shadow:0 4px 12px rgba(30,24,18,.2),0 0 0 2px color-mix(in srgb,var(--type-color,#456) 22%,transparent);
}
.hover-inspect-hint {
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(95,86,75,.16);
  display:grid;
  grid-template-columns:18px 1fr auto;
  align-items:center;
  gap:6px;
  color:#6d665e;
}
.hover-inspect-hint b {
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #cfc6ba;
  background:#fff;
  font-size:9px;
}
.hover-inspect-hint span { font-size:8px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.hover-inspect-hint small { font-size:7px; opacity:.72; }

.card-modal.frame-modal,
.card-modal.hidden-preview {
  grid-template-rows:auto 1fr;
}
.inspector-nav {
  grid-column:1 / -1;
  min-height:42px;
  margin:-8px 34px 0 0;
  padding:0 0 10px;
  border-bottom:1px solid #ded7cd;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.inspector-location {
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.inspector-location span,
.inspector-nav > span {
  font-size:10px;
  font-weight:950;
  letter-spacing:.1em;
  color:#3f3a34;
}
.inspector-location small {
  font-size:9px;
  font-weight:800;
  color:#8b8278;
}
.inspector-nav-buttons { display:flex; gap:5px; }
.inspector-nav-buttons button {
  width:34px;
  height:30px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f6f2ec;
  border:1px solid #d5cec4;
  font-size:16px;
  font-weight:900;
}
.inspector-nav-buttons button:not(:disabled):hover,
.inspector-nav-buttons button:not(:disabled):focus-visible {
  background:#fff;
  border-color:#aaa198;
  transform:translateY(-0.5px);
}
.inspector-nav-buttons button:disabled { opacity:.28; cursor:default; }

.inspector-action-bar {
  margin:12px 0 10px;
  padding:10px;
  border:1px solid #d9d1c7;
  border-radius:11px;
  background:linear-gradient(180deg,#faf8f4,#f4f0e9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.inspector-action-bar > div:first-child { min-width:0; display:grid; gap:2px; }
.inspector-action-bar > div:first-child > span,
.inspector-action-bar.quiet > span {
  font-size:8px;
  font-weight:950;
  letter-spacing:.12em;
  color:#777067;
}
.inspector-action-bar small { font-size:8px; line-height:1.25; color:#817970; }
.inspector-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.inspector-actions button {
  min-height:31px;
  padding:6px 9px;
  border-radius:8px;
  font-size:8px;
  font-weight:950;
  letter-spacing:.06em;
}
.inspector-actions .attack-action { background:#a94737; border-color:#923829; color:#fff; }
.inspector-actions .response-action { background:#315f91; border-color:#294f78; color:#fff; }
.inspector-action-bar.quiet {
  justify-content:flex-start;
  gap:8px;
  background:#faf8f5;
  border-style:dashed;
}
.card-modal[data-modal-panel]:focus { outline:none; }
.card-modal[data-modal-panel]:focus-visible { box-shadow:0 30px 90px rgba(0,0,0,.28),0 0 0 3px rgba(71,103,142,.16); }

@media (max-width: 950px) {
  .inspector-nav { margin:-2px 30px 0 0; min-height:36px; padding-bottom:7px; }
  .inspector-location span { font-size:8px; }
  .inspector-location small { font-size:8px; }
  .inspector-nav-buttons button { width:36px; height:32px; }
  .inspector-action-bar { align-items:stretch; flex-direction:column; padding:8px; }
  .inspector-actions { justify-content:stretch; }
  .inspector-actions button { flex:1 1 120px; min-height:36px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-info,.inspector-nav-buttons button { transition:none !important; transform:none !important; }
}

/* v5.9 feedback + accessibility + micro-interaction polish */
.skip-link {
  position:fixed;
  left:12px;
  top:10px;
  z-index:500;
  padding:9px 12px;
  border-radius:9px;
  background:#171717;
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  transform:translateY(-160%);
  transition:transform .14s ease;
}
.skip-link:focus { transform:translateY(0); }
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline:3px solid rgba(44,102,151,.32);
  outline-offset:2px;
}
button:active:not(:disabled) { transform:translateY(0) scale(.98); }
button:disabled { filter:saturate(.72); }

.feedback-host {
  position:fixed;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:450;
  width:min(390px,calc(100vw - 28px));
  pointer-events:none;
}
.feedback-toast {
  pointer-events:auto;
  min-height:58px;
  padding:10px 10px 10px 11px;
  border:1px solid #d2cac0;
  border-radius:14px;
  background:rgba(255,253,249,.97);
  box-shadow:0 18px 50px rgba(38,30,22,.18);
  backdrop-filter:blur(12px);
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 30px;
  gap:9px;
  align-items:center;
  animation:feedback-in .18s ease-out both;
}
.feedback-icon {
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ece8e1;
  color:#585149;
  font-size:13px;
  font-weight:950;
}
.feedback-copy { min-width:0; display:grid; gap:2px; }
.feedback-copy strong { font-size:11px; line-height:1.15; }
.feedback-copy span { color:#706960; font-size:9px; line-height:1.35; }
.feedback-dismiss {
  width:30px;
  height:30px;
  padding:0;
  border-color:transparent;
  background:transparent;
  color:#766e65;
  font-size:18px;
  line-height:1;
}
.feedback-toast.tone-success { border-color:#abd0b7; }
.feedback-toast.tone-success .feedback-icon { background:#e4f4e9; color:#1f7443; }
.feedback-toast.tone-warning { border-color:#e5ca8e; }
.feedback-toast.tone-warning .feedback-icon { background:#fff3d8; color:#895f17; }
.feedback-toast.tone-error { border-color:#dfaaa6; }
.feedback-toast.tone-error .feedback-icon { background:#fbe7e5; color:#9a352d; }
.feedback-toast.tone-info .feedback-icon { background:#e9f2f9; color:#315f88; }
@keyframes feedback-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }

.command-dock.submitting {
  border-color:#b9cddd;
  background:linear-gradient(180deg,#f4f9fc,#eaf3f8);
}
.intent-busy-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid #bed1df;
  border-radius:999px;
  color:#3a6381;
  background:#fff;
  font-size:7px;
  font-weight:950;
  letter-spacing:.09em;
}
.intent-busy-pill i {
  width:8px;
  height:8px;
  border:2px solid #a9c0d2;
  border-top-color:#315f88;
  border-radius:50%;
  animation:intent-spin .7s linear infinite;
}
.intent-submitting [data-action],
.intent-submitting [data-play-hand],
.intent-submitting [data-attack-source],
.intent-submitting [data-target-card],
.intent-submitting [data-card-ability],
.intent-submitting [data-modal-card-action],
.intent-submitting [data-interaction] {
  pointer-events:none;
}
.intent-submitting .legal-card,
.intent-submitting .target-candidate,
.intent-submitting .attack-ready {
  filter:saturate(.72);
}
@keyframes intent-spin { to { transform:rotate(360deg); } }

@media (hover:none) and (pointer:coarse) {
  .command-buttons button,
  .inspector-actions button,
  .mobile-board-nav button,
  .feedback-dismiss { min-height:42px; }
  .card-info { min-width:30px; min-height:30px; }
}

@media (max-width:700px) {
  .feedback-host { left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); width:auto; }
  .feedback-toast { grid-template-columns:28px minmax(0,1fr) 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,.feedback-toast,.intent-busy-pill i,button { transition:none !important; animation:none !important; }
  button:active:not(:disabled) { transform:none; }
}

/* v6.0 visual cohesion + game feel polish */
body {
  background:
    radial-gradient(circle at 16% -10%,rgba(255,255,255,.88),transparent 31%),
    linear-gradient(180deg,#f7f4ee 0%,#f1ede6 100%);
}
.topbar > div { display:flex; align-items:baseline; gap:9px; }
.topbar > div > strong { letter-spacing:-.02em; }
.topbar .muted {
  display:inline-flex;
  padding:3px 7px;
  border:1px solid #d7d0c6;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* One department language across lobby cards, deckbuilder and the actual battlefield. */
.player-board,
.match-result-panel { --dept-accent:#807b73; --dept-soft:#f2efea; }
.player-board.dept-customer_service,.match-result-panel.dept-customer_service { --dept-accent:#6c7bd9; --dept-soft:#f0f2ff; }
.player-board.dept-it,.match-result-panel.dept-it { --dept-accent:#65848f; --dept-soft:#eef4f5; }
.player-board.dept-office,.match-result-panel.dept-office { --dept-accent:#9b7c5c; --dept-soft:#f6f0e9; }
.player-board.dept-marketing,.match-result-panel.dept-marketing { --dept-accent:#c36d93; --dept-soft:#fff0f7; }
.player-board.dept-production,.match-result-panel.dept-production { --dept-accent:#b67945; --dept-soft:#fff3e7; }
.player-board.dept-neutral,.match-result-panel.dept-neutral { --dept-accent:#7d7b75; --dept-soft:#f1efeb; }
.player-board {
  position:relative;
  border-top-color:var(--dept-accent);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--dept-soft) 58%,transparent),transparent 24%),
    #fffdf9;
  box-shadow:0 7px 25px rgba(42,34,26,.045);
}
.player-board.opponent-board {
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--dept-soft) 44%,transparent),transparent 24%),
    linear-gradient(180deg,#fafcff,#fffdf9);
}
.player-head { min-height:34px; }
.player-identity { min-width:0; display:flex; align-items:center; gap:9px; }
.player-identity > div { min-width:0; display:grid; gap:1px; }
.player-identity > div > strong { font-size:11px; line-height:1.1; }
.player-identity > div > small {
  max-width:min(48vw,430px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#797168;
  font-size:8px;
  font-weight:800;
}
.player-department-mark {
  flex:0 0 auto;
  min-width:34px;
  height:28px;
  padding:0 7px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--dept-accent) 42%,#cfc8be);
  border-radius:8px;
  background:color-mix(in srgb,var(--dept-soft) 76%,#fff);
  color:color-mix(in srgb,var(--dept-accent) 82%,#28231f);
  font-size:8px;
  font-weight:950;
  letter-spacing:.09em;
}
.match-result-panel { border-top:5px solid var(--dept-accent); }
.match-result-panel .match-result-emblem {
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--dept-accent) 16%,transparent);
}
.match-result-panel .match-result-emblem small { color:var(--dept-accent); }

/* Rarity speaks one visual language everywhere collection-facing. */
.rarity-signal {
  --rarity:#817b73;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:21px;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--rarity) 35%,#ddd5cb);
  border-radius:999px;
  background:color-mix(in srgb,var(--rarity) 7%,#fffdf9);
  color:color-mix(in srgb,var(--rarity) 82%,#332d28);
  white-space:nowrap;
}
.rarity-signal.tier-t0 { --rarity:#817b73; }
.rarity-signal.tier-t1 { --rarity:#5e7c86; }
.rarity-signal.tier-t2 { --rarity:#7d5a9d; }
.rarity-signal.tier-t3 { --rarity:#ad771d; box-shadow:inset 0 0 8px rgba(224,175,70,.12); }
.rarity-signal strong { font-size:7px; letter-spacing:.07em; }
.rarity-signal small { font-size:7px; font-weight:850; opacity:.78; }
.rarity-signal.compact { min-height:17px; padding:2px 5px; gap:4px; }
.rarity-signal.compact strong { font-size:6px; }
.rarity-pips { display:flex; align-items:center; gap:2px; }
.rarity-pips b {
  width:3px;
  height:8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--rarity) 17%,transparent);
}
.rarity-pips b.on { background:var(--rarity); }
.collection-preview-type .rarity-signal { margin-left:auto; }
.collection-card-head .rarity-signal { color:inherit; }
.booster-hit-top .rarity-signal { flex:0 0 auto; }

/* Empty states should feel intentional, not unfinished. */
.surface-empty-state,
.zone-empty-state,
.hand-empty-state {
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  gap:4px;
  border:1px dashed #d2cbc1;
  border-radius:11px;
  color:#817970;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(244,240,234,.62));
}
.surface-empty-state > span,
.zone-empty-state > span,
.hand-empty-state > span {
  font-size:7px;
  font-weight:950;
  letter-spacing:.14em;
  color:#8f877d;
}
.surface-empty-state > strong { font-size:14px; color:#3e3934; }
.surface-empty-state > small,
.zone-empty-state > small,
.hand-empty-state > small { max-width:390px; font-size:8px; line-height:1.4; }
.surface-empty-state button { margin-top:7px; }
.collection-grid.is-empty { grid-template-columns:1fr; }
.collection-empty-state { min-height:320px; grid-column:1/-1; }
.history-empty-state { min-height:150px; margin:8px 0 2px; }
.archive-grid .archive-empty { grid-column:1/-1; min-height:76px; }
.hand.is-empty,
.opponent-hand-fan.is-empty { min-height:88px; overflow:visible; }
.hand-empty-state { width:100%; min-width:220px; min-height:78px; }
.hand-empty-state.opponent { min-width:min(310px,86vw); min-height:62px; }

/* Connecting and waiting are real game states, not debug placeholders. */
.connection-stage {
  width:min(560px,92vw);
  min-height:270px;
  margin:8vh auto 0;
  padding:36px 30px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  border:1px solid #d2cbc0;
  border-radius:18px;
  background:rgba(255,253,249,.88);
  box-shadow:0 20px 60px rgba(42,34,26,.09);
  text-align:center;
}
.connection-stage > span,
.waiting-room-kicker span { font-size:8px; font-weight:950; letter-spacing:.15em; color:#716a61; }
.connection-stage > strong { font-size:22px; letter-spacing:-.025em; }
.connection-stage > small { color:#827a71; font-size:9px; }
.surface-loader { display:flex; align-items:end; gap:4px; height:28px; margin-bottom:8px; }
.surface-loader i,
.waiting-room-kicker i {
  display:block;
  width:6px;
  border-radius:999px;
  background:#4f718a;
}
.surface-loader i { height:12px; animation:office-loader .8s ease-in-out infinite alternate; }
.surface-loader i:nth-child(2) { height:22px; animation-delay:.14s; }
.surface-loader i:nth-child(3) { height:16px; animation-delay:.28s; }
@keyframes office-loader { to { height:26px; opacity:.55; } }
.waiting-room-stage { position:relative; overflow:hidden; text-align:center; }
.waiting-room-stage::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#6c7bd9,#65848f,#9b7c5c,#c36d93,#b67945);
}
.waiting-room-kicker { display:inline-flex; align-items:center; gap:7px; margin-bottom:8px; }
.waiting-room-kicker i { width:7px; height:7px; background:#2d8555; box-shadow:0 0 0 4px rgba(45,133,85,.1); }

@media (max-width:800px) {
  .player-identity > div > small { max-width:52vw; }
  .player-department-mark { min-width:30px; height:25px; font-size:7px; }
  .collection-empty-state { min-height:220px; }
  .connection-stage { margin-top:3vh; min-height:230px; }
}
@media (prefers-reduced-motion: reduce) {
  .surface-loader i { animation:none !important; height:16px; }
}

/* v6.1 opening + turn transition polish */
.match-opening {
  position:relative;
  overflow:hidden;
}
.match-opening::after {
  content:'';
  position:absolute;
  inset:auto 12% 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(83,98,117,.28),transparent);
}
.match-opening-center em {
  display:inline-grid;
  place-items:center;
  min-width:30px;
  height:20px;
  margin:0 auto 3px;
  border:1px solid rgba(92,101,112,.22);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:#7c7469;
  font-size:7px;
  font-style:normal;
  font-weight:1000;
  letter-spacing:.18em;
}
.match-opening-center small { max-width:330px; margin-inline:auto; }

.mulligan-panel {
  position:relative;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mulligan-panel.has-selection {
  border-color:#477eb4;
  box-shadow:0 9px 24px rgba(39,91,144,.09),inset 0 1px rgba(255,255,255,.82);
  background:linear-gradient(180deg,#f1f7ff,#e8f2ff);
}
.mulligan-copy { min-width:0; }
.mulligan-meter {
  display:grid;
  grid-template-columns:auto auto minmax(48px,1fr) auto auto;
  gap:5px;
  align-items:center;
  width:min(330px,100%);
  margin-top:7px;
  color:#5e7081;
}
.mulligan-meter b { font-size:12px; color:#244f78; }
.mulligan-meter span { font-size:6px; font-weight:1000; letter-spacing:.11em; }
.mulligan-meter i {
  position:relative;
  display:block;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#3d77ac 0 var(--replace,0%),#d4dce3 var(--replace,0%) 100%);
  opacity:.78;
}
.mulligan-actions .ghost { background:rgba(255,255,255,.58); }

.opening-wait-panel {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #cbd4dc;
  border-radius:12px;
  background:linear-gradient(180deg,#fafcfd,#f3f6f8);
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}
.opening-wait-panel > div:last-child { display:grid; gap:2px; }
.opening-wait-panel strong { font-size:12px; color:#34485b; }
.opening-wait-panel small { font-size:8px; line-height:1.4; color:#75808a; }
.opening-wait-status {
  display:grid;
  justify-items:center;
  gap:4px;
  min-width:76px;
  padding-right:10px;
  border-right:1px solid #d8dee3;
  color:#4d6d89;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.11em;
}
.opening-wait-status i {
  width:18px;
  height:18px;
  border:3px solid #b8c6d1;
  border-top-color:#48779d;
  border-radius:50%;
  animation:opening-wait-spin 1.1s linear infinite;
}
@keyframes opening-wait-spin { to { transform:rotate(360deg); } }

.turn-flow-cue {
  --flow-accent:#61758a;
  position:fixed;
  left:50%;
  top:50%;
  z-index:70;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:min(330px,calc(100vw - 28px));
  max-width:480px;
  padding:14px 18px 14px 14px;
  border:1px solid color-mix(in srgb,var(--flow-accent) 38%,#fff);
  border-left:5px solid var(--flow-accent);
  border-radius:15px;
  background:rgba(252,250,246,.96);
  box-shadow:0 24px 70px rgba(24,31,40,.22),inset 0 1px rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  transform:translate(-50%,-50%);
  animation:turn-flow-in 1.45s ease both;
  pointer-events:none;
}
.turn-flow-cue.opponent { filter:saturate(.72); }
.turn-flow-cue.dept-customer_service { --flow-accent:#397ab5; }
.turn-flow-cue.dept-it { --flow-accent:#4a72a1; }
.turn-flow-cue.dept-office { --flow-accent:#9a7846; }
.turn-flow-cue.dept-marketing { --flow-accent:#b35d6e; }
.turn-flow-cue.dept-production { --flow-accent:#8b653d; }
.turn-flow-emblem {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  flex:0 0 54px;
  border-radius:13px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--flow-accent) 92%,#fff),var(--flow-accent));
  color:white;
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 7px 18px color-mix(in srgb,var(--flow-accent) 25%,transparent);
  font-size:17px;
  font-weight:1000;
  letter-spacing:.04em;
}
.turn-flow-cue > div:last-child { display:grid; gap:1px; min-width:0; }
.turn-flow-cue span { color:var(--flow-accent); font-size:7px; font-weight:1000; letter-spacing:.14em; }
.turn-flow-cue strong { color:#27313a; font-size:21px; line-height:1; letter-spacing:.025em; }
.turn-flow-cue small { margin-top:3px; color:#747a80; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes turn-flow-in {
  0% { opacity:0; transform:translate(-50%,-45%) scale(.94); }
  12%,72% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-54%) scale(.98); }
}

@media (max-width:760px) {
  .match-opening-center em { display:none; }
  .mulligan-meter { width:100%; }
  .mulligan-actions { grid-template-columns:1fr 1fr; }
  .mulligan-actions .primary { grid-column:1/-1; }
  .opening-wait-panel { align-items:flex-start; }
  .opening-wait-status { min-width:64px; }
  .turn-flow-cue { top:45%; gap:10px; padding:11px 13px 11px 10px; }
  .turn-flow-emblem { width:44px; height:44px; flex-basis:44px; font-size:14px; }
  .turn-flow-cue strong { font-size:17px; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-wait-status i { animation:none; border-top-color:#48779d; }
  .turn-flow-cue { animation:turn-flow-fade 1.45s linear both; }
  @keyframes turn-flow-fade { 0%,100% { opacity:0; } 10%,78% { opacity:1; } }
}


/* v6.2 action resolution + response polish */
.response-context {
  display:grid;
  justify-items:center;
  gap:2px;
  min-width:min(420px,100%);
  margin:6px auto 10px;
  padding:8px 12px;
  border:1px solid rgba(161,126,47,.22);
  border-radius:10px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.9);
  text-align:center;
}
.response-context span { color:#947423; font-size:6px; font-weight:1000; letter-spacing:.15em; }
.response-context strong { color:#2f302e; font-size:12px; line-height:1.15; }
.response-context small { color:#77736b; font-size:8px; }
.pass-response { display:grid; align-content:center; justify-items:center; gap:1px; }
.pass-response span { font-size:9px; font-weight:1000; letter-spacing:.08em; }
.pass-response small { color:#7d786e; font-size:7px; font-weight:800; }
.chain-item.negated { border-color:#d59a94; background:#fff4f2; opacity:.76; }
.chain-item.negated strong { text-decoration:line-through; text-decoration-thickness:1px; }
.chain-item.delayed { border-color:#a9a1c8; background:#f7f5ff; }
.chain-item > b { align-self:start; padding:3px 5px; border-radius:999px; background:#6e625b; color:#fff; font-size:5px; letter-spacing:.08em; }
.chain-item.negated > b { background:#a64b43; }
.chain-item.delayed > b { background:#6c628e; }

.card.cue-resolved,.card.cue-ability { animation:effect-resolved-v62 .72s ease; }
.card.cue-negated { animation:effect-negated-v62 .72s ease; }
.card.cue-delayed { animation:effect-delayed-v62 .72s ease; }
@keyframes effect-resolved-v62 { 0%,100% { transform:none; filter:none; } 38% { transform:translateY(-4px) scale(1.025); filter:brightness(1.14); box-shadow:0 0 0 3px rgba(64,126,86,.18),0 0 24px rgba(64,126,86,.14); } }
@keyframes effect-negated-v62 { 0%,100% { transform:none; filter:none; } 32% { transform:translateX(-3px); filter:saturate(.5) brightness(.9); box-shadow:0 0 0 3px rgba(166,75,67,.22); } 54% { transform:translateX(3px); } }
@keyframes effect-delayed-v62 { 0%,100% { transform:none; filter:none; } 45% { transform:translateY(3px) scale(.98); filter:saturate(.72); box-shadow:0 0 0 3px rgba(108,98,142,.19); } }

.resolution-moment {
  position:fixed;
  z-index:93;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%);
  min-width:min(340px,82vw);
  display:grid;
  justify-items:center;
  gap:3px;
  padding:14px 20px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:15px;
  color:#fff;
  text-align:center;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(38,78,53,.96),rgba(35,42,38,.96));
  box-shadow:0 22px 62px rgba(32,58,39,.24);
  animation:resolution-moment-v62 1.22s ease both;
}
.resolution-moment span { color:#bfe0c9; font-size:7px; font-weight:1000; letter-spacing:.2em; }
.resolution-moment strong { font-size:17px; line-height:1.15; }
.resolution-moment small { color:#d4ddd6; font-size:9px; font-weight:750; }
.resolution-moment.negated { background:linear-gradient(145deg,rgba(126,50,43,.97),rgba(43,34,33,.97)); box-shadow:0 22px 62px rgba(135,45,38,.25); }
.resolution-moment.negated span { color:#ffd0cb; }
.resolution-moment.delayed { background:linear-gradient(145deg,rgba(78,69,112,.97),rgba(38,35,48,.97)); box-shadow:0 22px 62px rgba(76,66,110,.24); }
.resolution-moment.delayed span { color:#ddd5ff; }
.resolution-moment.chain-complete { background:linear-gradient(145deg,rgba(54,61,68,.97),rgba(31,35,39,.97)); box-shadow:0 22px 62px rgba(32,38,43,.22); }
.resolution-moment.chain-complete span { color:#d8e3ea; }
@keyframes resolution-moment-v62 { 0% { opacity:0; transform:translate(-50%,-45%) scale(.92); } 18% { opacity:1; transform:translate(-50%,-50%) scale(1.025); } 72% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-56%) scale(.98); } }

@media (max-width:760px) {
  .response-context { min-width:0; width:100%; margin:4px auto 7px; padding:7px 9px; }
  .resolution-moment { top:40%; min-width:min(300px,88vw); padding:12px 14px; }
  .resolution-moment strong { font-size:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .card.cue-resolved,.card.cue-ability,.card.cue-negated,.card.cue-delayed,.resolution-moment { animation:none !important; }
}

/* v6.3 card movement + zone transition polish */
.zone-transition-cue {
  position:fixed;
  z-index:91;
  right:20px;
  top:74px;
  min-width:190px;
  max-width:min(300px,calc(100vw - 28px));
  display:grid;
  gap:2px;
  padding:10px 13px;
  border:1px solid rgba(91,112,126,.24);
  border-radius:12px;
  color:#263039;
  background:rgba(249,251,252,.96);
  box-shadow:0 14px 34px rgba(37,50,60,.16);
  pointer-events:none;
  animation:zone-cue-v63 1.55s ease both;
}
.zone-transition-cue span { color:#607884; font-size:6px; font-weight:1000; letter-spacing:.18em; }
.zone-transition-cue strong { font-size:12px; line-height:1.15; }
.zone-transition-cue small { color:#727b80; font-size:8px; font-weight:750; }
.zone-transition-cue.archive { border-color:#d4a49d; background:rgba(255,247,245,.97); }
.zone-transition-cue.archive span { color:#9c5148; }
.zone-transition-cue.reveal { border-color:#d8c58f; background:rgba(255,251,239,.97); }
.zone-transition-cue.reveal span { color:#8f7427; }
.zone-transition-cue.search_complete { border-color:#a8c8b2; background:rgba(244,251,246,.97); }
.zone-transition-cue.search_complete span { color:#3f7954; }
@keyframes zone-cue-v63 {
  0% { opacity:0; transform:translateX(12px) scale(.96); }
  14% { opacity:1; transform:none; }
  78% { opacity:1; transform:none; }
  100% { opacity:0; transform:translateX(5px) scale(.985); }
}

.zone-transition-chip {
  flex:0 0 auto;
  margin-left:auto;
  padding:2px 5px;
  border-radius:999px;
  background:#586f7d;
  color:#fff !important;
  font-size:5px !important;
  font-weight:1000 !important;
  letter-spacing:.08em;
  line-height:1.2;
  white-space:nowrap;
}
.zone-title { display:flex; align-items:center; gap:6px; }
.zone-title > span { min-width:0; }
.deck-pile { position:relative; }
.deck-pile .zone-transition-chip { position:absolute; right:5px; top:5px; margin:0; }
.archive-compact .zone-transition-chip { margin-left:auto; }

.own-hand.zone-transition-active,
.opponent-hand-zone.zone-transition-active .opponent-hand-fan,
.employee-row.zone-transition-active,
.support-row.zone-transition-active,
.deck-pile.zone-transition-active,
.archive-compact.zone-transition-active {
  animation:zone-arrival-v63 .72s ease;
}
@keyframes zone-arrival-v63 {
  0%,100% { box-shadow:inherit; filter:none; }
  42% { box-shadow:0 0 0 3px rgba(79,121,148,.16),0 0 22px rgba(79,121,148,.12); filter:brightness(1.025); }
}
.card.cue-revealed { animation:card-revealed-v63 .78s ease; }
.card.cue-to-hand { animation:card-to-hand-v63 .68s ease; }
.card.cue-to-archive { animation:card-to-archive-v63 .72s ease; }
.card.cue-zone-arrival { animation:card-zone-arrival-v63 .72s ease; }
@keyframes card-revealed-v63 {
  0%,100% { transform:none; filter:none; }
  36% { transform:translateY(-4px) scale(1.025); filter:brightness(1.18); box-shadow:0 0 0 3px rgba(171,137,45,.22),0 0 26px rgba(171,137,45,.16); }
}
@keyframes card-to-hand-v63 {
  0% { opacity:.55; transform:translateY(-8px) scale(.96); }
  65% { opacity:1; transform:translateY(2px) scale(1.015); }
  100% { transform:none; }
}
@keyframes card-to-archive-v63 {
  0%,100% { transform:none; filter:none; }
  40% { transform:translateY(4px) scale(.97); filter:saturate(.65); box-shadow:0 0 0 3px rgba(161,76,65,.18); }
}
@keyframes card-zone-arrival-v63 {
  0% { opacity:.58; transform:translateY(7px) scale(.96); }
  55% { opacity:1; transform:translateY(-3px) scale(1.02); }
  100% { transform:none; }
}

@media (max-width:760px) {
  .zone-transition-cue { top:64px; right:8px; min-width:160px; max-width:min(230px,calc(100vw - 16px)); padding:8px 10px; }
  .zone-transition-cue strong { font-size:10px; }
  .zone-transition-cue small { font-size:7px; }
  .zone-title { gap:4px; }
  .zone-transition-chip { font-size:4px !important; padding:2px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .zone-transition-cue,.own-hand.zone-transition-active,.opponent-hand-zone.zone-transition-active .opponent-hand-fan,.employee-row.zone-transition-active,.support-row.zone-transition-active,.deck-pile.zone-transition-active,.archive-compact.zone-transition-active,.card.cue-revealed,.card.cue-to-hand,.card.cue-to-archive,.card.cue-zone-arrival { animation:none !important; }
}

/* v6.4 match result + post-match flow polish */
.match-result-copy > p i { font-style:normal; color:#9a9187; font-weight:900; margin:0 3px; }
.match-result-actions { flex-wrap:wrap; }
.match-result-actions .primary { box-shadow:0 6px 16px rgba(39,34,27,.10); }
.match-result-summary {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  padding-top:2px;
}
.match-result-summary > span {
  min-width:0;
  display:grid;
  gap:2px;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--dept-accent) 22%,#d9d2c8);
  border-radius:11px;
  background:color-mix(in srgb,var(--dept-soft) 62%,rgba(255,255,255,.82));
}
.match-result-summary small { color:#837b72; font-size:7px; font-weight:950; letter-spacing:.12em; }
.match-result-summary b { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#302d29; font-size:12px; }
.match-result-panel > .match-reward-panel {
  grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr) auto;
  align-items:center;
  gap:10px 16px;
}
.match-reward-copy,.match-reward-progress { min-width:0; }
.match-reward-progress { display:grid !important; gap:4px !important; }
.match-reward-progress > span { color:#716a62; font-size:7px; }
.match-reward-progress > small { font-size:9px; }
.xp-track { width:100%; height:7px; overflow:hidden; border-radius:999px; background:rgba(92,81,62,.12); box-shadow:inset 0 0 0 1px rgba(92,81,62,.08); }
.xp-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b88a30,#dfb755); transition:width .28s ease; }
.match-reward-panel.claimed .xp-track i { background:linear-gradient(90deg,#3f8b59,#73b184); }
.match-reward-message { grid-column:1/-1; }
.match-result-panel.loss .match-result-actions .primary { background:#8e4c46; }
.match-result-panel.win .match-result-actions .primary { background:#34794b; }

@media (max-width:760px) {
  .match-result-summary { grid-template-columns:1fr 1fr; }
  .match-result-panel > .match-reward-panel { grid-template-columns:1fr auto; }
  .match-reward-progress { grid-column:1/-1; }
  .match-result-actions { display:grid; grid-template-columns:1fr 1fr; }
  .match-result-actions .primary { grid-column:1/-1; }
}
@media (max-width:520px) {
  .match-result-summary { grid-template-columns:1fr 1fr; }
  .match-result-summary > span { padding:8px; }
  .match-result-panel > .match-reward-panel { grid-template-columns:1fr; }
  .match-result-panel > .match-reward-panel button,.match-result-panel > .match-reward-panel .reward-claimed { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-track i { transition:none; }
}

/* v6.5 board surface + spatial polish — presentation only, board order and interaction stay unchanged. */
.battlefield-surface {
  position:relative;
  display:grid;
  gap:9px;
  padding:10px;
  border:1px solid rgba(112,95,75,.28);
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.34),transparent 42%),
    repeating-linear-gradient(90deg,rgba(94,77,57,.025) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(94,77,57,.022) 0 1px,transparent 1px 34px),
    linear-gradient(145deg,rgba(218,207,193,.68),rgba(240,233,223,.82) 46%,rgba(213,202,188,.66));
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    inset 0 0 0 4px rgba(255,255,255,.16),
    0 12px 34px rgba(48,37,24,.07);
}
.battlefield-surface::before {
  content:'';
  position:absolute;
  inset:7px;
  z-index:-1;
  border:1px solid rgba(112,95,75,.10);
  border-radius:14px;
  pointer-events:none;
}
.battlefield-surface .player-board { margin-bottom:0; }

/* Each player area reads as its own desk mat without moving a single gameplay zone. */
.battlefield-surface .player-board {
  --desk-glow:color-mix(in srgb,var(--dept-accent) 12%,transparent);
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--dept-accent) 26%,#c7beb1);
  box-shadow:
    inset 0 1px rgba(255,255,255,.86),
    inset 0 0 32px var(--desk-glow),
    0 6px 16px rgba(47,37,25,.045);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.battlefield-surface .player-board::after {
  content:'';
  position:absolute;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,transparent,var(--dept-accent) 22%,var(--dept-accent) 78%,transparent);
  opacity:.46;
  pointer-events:none;
}
.battlefield-surface .opponent-board::after { right:5px; }
.battlefield-surface .own-board::after { left:5px; }
.battlefield-surface .player-board.desk-active {
  border-color:color-mix(in srgb,var(--dept-accent) 48%,#b8ad9e);
  box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    inset 0 0 38px color-mix(in srgb,var(--dept-accent) 15%,transparent),
    0 7px 20px rgba(47,37,25,.055);
}
.battlefield-surface .player-board.desk-priority {
  outline:2px solid color-mix(in srgb,var(--dept-accent) 22%,transparent);
  outline-offset:-4px;
}

/* Resources and piles become one visual desk tray instead of floating debug boxes. */
.battlefield-surface .resource-cluster,
.battlefield-surface .board-resource-row {
  position:relative;
  padding:6px;
  border:1px solid rgba(124,111,96,.16);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(246,242,235,.30));
  box-shadow:inset 0 1px rgba(255,255,255,.66);
}
.battlefield-surface .resource-cluster { margin:3px 0 5px; }
.battlefield-surface .board-resource-row { margin:0 0 2px; }
.battlefield-surface .resource-card {
  border-color:rgba(133,121,107,.30);
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,243,237,.90));
  box-shadow:0 2px 6px rgba(55,43,29,.035),inset 0 1px rgba(255,255,255,.82);
}
.battlefield-surface .deck-pile {
  border-color:#827a70;
  background:
    linear-gradient(145deg,rgba(255,255,255,.06),transparent 38%),
    linear-gradient(145deg,#252525,#3b3936);
  box-shadow:3px 3px 0 #c9c1b6,5px 5px 0 rgba(86,75,62,.10),0 4px 10px rgba(46,37,27,.12);
}
.battlefield-surface .archive-compact {
  border-color:rgba(132,119,104,.24);
  background:linear-gradient(145deg,rgba(250,248,244,.92),rgba(238,233,226,.84));
  box-shadow:inset 0 1px rgba(255,255,255,.72);
}

/* Frontline and Support remain exactly where they were, but now read as distinct tactical lanes. */
.battlefield-surface .board-lane {
  position:relative;
  isolation:isolate;
  border-color:rgba(126,114,99,.20);
  box-shadow:inset 0 1px rgba(255,255,255,.58),inset 0 0 26px rgba(70,62,52,.025);
}
.battlefield-surface .board-lane::before {
  content:'';
  position:absolute;
  inset:5px;
  z-index:-1;
  border-radius:9px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(85,73,59,.035) 0 1px,transparent 1px calc(20% - 1px),rgba(85,73,59,.035) calc(20% - 1px) 20%);
  opacity:.54;
}
.battlefield-surface .support-lane::before {
  background:
    repeating-linear-gradient(90deg,rgba(122,87,48,.040) 0 1px,transparent 1px calc(25% - 1px),rgba(122,87,48,.040) calc(25% - 1px) 25%);
}
.battlefield-surface .employee-lane {
  background:
    linear-gradient(180deg,rgba(235,244,250,.42),rgba(255,255,255,.20)),
    rgba(255,255,255,.16);
}
.battlefield-surface .support-lane {
  background:
    linear-gradient(180deg,rgba(250,242,230,.42),rgba(255,255,255,.18)),
    rgba(255,255,255,.14);
}
.battlefield-surface .board-lane.lane-clear { opacity:.88; }
.battlefield-surface .board-lane.lane-occupied { opacity:1; }
.battlefield-surface .zone-title.frontline-title,
.battlefield-surface .zone-title.backline-title {
  min-height:20px;
  margin-top:8px;
  padding:0 5px;
}
.battlefield-surface .zone-title.frontline-title strong,
.battlefield-surface .zone-title.backline-title strong {
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.battlefield-surface .zone-title.frontline-title strong::before,
.battlefield-surface .zone-title.backline-title strong::before {
  content:'';
  width:5px;
  height:5px;
  border-radius:2px;
  background:#6b8eaa;
  box-shadow:0 0 0 2px rgba(107,142,170,.12);
}
.battlefield-surface .zone-title.backline-title strong::before {
  background:#a77b49;
  box-shadow:0 0 0 2px rgba(167,123,73,.12);
}

/* Cards float just enough above the mat to feel physical without changing hit areas. */
.battlefield-surface .employee-row > .card,
.battlefield-surface .support-row > .card {
  box-shadow:0 5px 12px rgba(46,37,27,.075),0 1px 2px rgba(46,37,27,.08);
}
.battlefield-surface .field-empty:not(.slot-candidate) {
  border-color:rgba(124,113,99,.24);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}
.battlefield-surface .field-empty:not(.slot-candidate)::after {
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid rgba(120,109,96,.09);
  border-radius:6px;
  pointer-events:none;
}

/* The center reads as shared neutral office floor whether a decision is open or not. */
.battlefield-surface .office-divider {
  min-height:40px;
  margin:0 2px;
  border:1px solid rgba(120,108,94,.12);
  border-radius:11px;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.52),rgba(255,255,255,.18));
}
.battlefield-surface .office-divider span {
  padding:3px 9px;
  border:1px solid rgba(126,115,101,.16);
  border-radius:999px;
  background:rgba(247,243,236,.88);
}
.battlefield-surface .decision-center {
  margin:0 2px;
  border-color:rgba(122,108,91,.24);
  background:
    linear-gradient(180deg,rgba(250,247,242,.96),rgba(239,233,224,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.78),0 3px 10px rgba(51,41,29,.045);
}

/* The outer game shell becomes quieter now that the battlefield itself owns the spatial hierarchy. */
.game-main {
  background:
    linear-gradient(90deg,rgba(255,255,255,.20) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
    linear-gradient(145deg,#e7e0d6,#f2ede5 42%,#e3dcd1);
  background-size:40px 40px,40px 40px,auto;
}

@media (max-width:760px) {
  .battlefield-surface { gap:6px; padding:5px; border-radius:13px; }
  .battlefield-surface::before { inset:3px; border-radius:10px; }
  .battlefield-surface .player-board::after { display:none; }
  .battlefield-surface .resource-cluster,.battlefield-surface .board-resource-row { padding:3px; border-radius:9px; }
  .battlefield-surface .board-lane { border-radius:10px; }
  .battlefield-surface .board-lane::before { opacity:.34; }
  .battlefield-surface .employee-row,.battlefield-surface .support-row {
    scrollbar-color:rgba(112,101,88,.28) transparent;
  }
  .battlefield-surface .office-divider { min-height:34px; }
  .battlefield-surface .decision-center { margin:0; }
}
@media (prefers-reduced-motion: reduce) {
  .battlefield-surface .player-board { transition:none; }
}

/* v6.6 match HUD + information hierarchy polish — presentation only. */
.player-head-status { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.player-vitals { display:flex; align-items:center; gap:3px; padding:2px; border:1px solid rgba(119,107,93,.15); border-radius:8px; background:rgba(255,255,255,.46); }
.player-vitals .vital { min-width:38px; height:25px; padding:3px 5px; display:flex; align-items:baseline; justify-content:center; gap:3px; border-radius:6px; color:#4f4942; }
.player-vitals .vital small { font-size:5px; font-weight:950; letter-spacing:.08em; color:#8b8278; }
.player-vitals .vital b { font-size:9px; line-height:1; }
.player-vitals .vital.critical { background:#fff0ed; color:#a33b32; }
.player-vitals .vital.pressure { background:#fff6df; color:#8b641b; }
.player-vitals .vital.buffered { background:#edf8f0; color:#34714b; }
.player-vitals .vital.limit { background:#fff0e9; color:#9b4a31; }

.resource-card { align-items:center; }
.resource-card .resource-value { margin-top:10px; display:flex; align-items:baseline; gap:3px; }
.resource-card .resource-value strong { margin-top:0; }
.resource-state { position:absolute; right:9px; top:7px; max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:6px; font-weight:950; letter-spacing:.055em; color:#8b8278; text-align:right; }
.reputation-resource.tone-critical { border-color:#dfaaa3; background:linear-gradient(180deg,#fff8f6,#fff0ed); }
.reputation-resource.tone-pressure { border-color:#dec694; background:linear-gradient(180deg,#fffdf8,#fff7e8); }
.reputation-resource.tone-buffered { border-color:#b4d5be; background:linear-gradient(180deg,#fbfffc,#eff8f1); }
.reputation-resource.tone-critical .resource-state { color:#a64238; }
.reputation-resource.tone-pressure .resource-state { color:#87601a; }
.reputation-resource.tone-buffered .resource-state { color:#34734b; }
.resource-meter.reputation-meter em { position:absolute; top:-2px; bottom:-2px; width:1px; background:rgba(53,48,43,.38); z-index:2; }
.resource-meter.reputation-meter em::after { content:'20'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-style:normal; font-size:5px; font-weight:950; color:#8e867c; }
.hand-resource { position:relative; flex-direction:column; gap:0; justify-content:center; }
.hand-resource .resource-value { margin-top:8px; }
.hand-resource .resource-state { left:50%; right:auto; top:auto; bottom:6px; max-width:none; transform:translateX(-50%); text-align:center; }
.hand-resource.at-limit { border-color:#d9aa91; background:linear-gradient(180deg,#fff,#fff2eb); }
.hand-resource.at-limit .resource-state { color:#a14b32; }
.hand-meter { position:absolute; left:8px; right:8px; bottom:2px; height:2px; border-radius:999px; background:#e5dfd6; overflow:hidden; }
.hand-meter i { display:block; height:100%; border-radius:inherit; background:#777068; }
.hand-resource.at-limit .hand-meter i { background:#b85b3d; }
.capacity-resource .resource-state { color:#426c55; }

.deck-pile small { margin-top:3px; font-size:5px; font-weight:900; letter-spacing:.07em; opacity:.62; }
.deck-pile.pressure { border-color:#c59a4e !important; box-shadow:3px 3px 0 #d7c39c,5px 5px 0 rgba(86,75,62,.10),0 4px 12px rgba(161,111,31,.16) !important; }
.deck-pile.critical { border-color:#c76658 !important; box-shadow:3px 3px 0 #d7aaa3,5px 5px 0 rgba(86,75,62,.10),0 4px 14px rgba(169,61,46,.20) !important; }
.deck-pile.pressure small { color:#f2cf8e; opacity:1; }
.deck-pile.critical small { color:#ffaaa0; opacity:1; }

@media (max-width:760px) {
  .player-head { align-items:flex-start; gap:5px; }
  .player-head-status { gap:3px; }
  .player-vitals { order:3; width:100%; justify-content:space-between; padding:2px 3px; }
  .player-vitals .vital { flex:1 1 0; min-width:0; height:22px; padding:2px 3px; }
  .player-vitals .vital small { font-size:4.5px; }
  .player-vitals .vital b { font-size:8px; }
  .resource-state { font-size:5px; right:6px; top:5px; }
  .resource-meter.reputation-meter em::after { display:none; }
  .deck-pile small { font-size:4.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-vitals .vital,.resource-card,.deck-pile { transition:none !important; }
}

/* v6.7 live match feed + event readability polish */
.match-feed {
  margin:8px 0 10px;
  padding:8px 9px;
  border:1px solid rgba(95,88,78,.13);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(247,244,238,.78));
  box-shadow:0 7px 18px rgba(47,40,31,.045);
}
.match-feed-heading { display:flex; align-items:end; justify-content:space-between; gap:10px; margin:0 2px 7px; }
.match-feed-heading > div { display:grid; gap:1px; }
.match-feed-heading span { color:#8a8379; font-size:7px; font-weight:950; letter-spacing:.13em; }
.match-feed-heading strong { color:#292723; font-size:11px; line-height:1.1; }
.match-feed-heading small { color:#938c83; font-size:8px; font-weight:800; }
.match-feed-list { display:grid; grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr)); gap:6px; }
.match-feed-item { position:relative; min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr); gap:7px; align-items:center; min-height:50px; padding:7px 8px; border:1px solid #e6e0d8; border-radius:9px; background:rgba(255,255,255,.74); color:#37332e; }
.match-feed-item:nth-child(n+4) { display:none; }
.match-feed-item.latest { background:#fff; border-color:#d8d0c5; box-shadow:0 5px 13px rgba(50,42,33,.055); }
.match-feed-item[role="button"] { cursor:pointer; }
.match-feed-item[role="button"]:hover { border-color:#bdb2a4; transform:translateY(-0.5px); }
.match-feed-item[role="button"]:focus-visible { outline:2px solid #49769b; outline-offset:2px; }
.match-feed-code { display:grid; place-items:center; width:34px; min-height:27px; padding:3px; border-radius:7px; background:#eeeae4; color:#6f6960; font-size:7px; line-height:1; font-weight:950; letter-spacing:.04em; text-align:center; }
.match-feed-item > div { min-width:0; display:grid; gap:2px; }
.match-feed-item strong { overflow:hidden; color:#302d29; font-size:9px; line-height:1.18; text-overflow:ellipsis; white-space:nowrap; }
.match-feed-item small { overflow:hidden; color:#807970; font-size:7.5px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.match-feed-live { position:absolute; right:6px; top:5px; color:#7c756b; font-size:5.5px; letter-spacing:.1em; opacity:.62; }
.match-feed-item.tone-yours .match-feed-code { background:#e4efe7; color:#336549; }
.match-feed-item.tone-opponent .match-feed-code { background:#eee7e4; color:#79574e; }
.match-feed-item.tone-win .match-feed-code { background:#dff1e5; color:#246643; }
.match-feed-item.tone-loss .match-feed-code { background:#f4e1df; color:#8b3e36; }
.match-feed-item:has(.match-feed-code:first-child) { transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
@media (max-width:900px) {
  .match-feed-list { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
  .match-feed-item:nth-child(3) { display:none; }
}
@media (max-width:760px) {
  .match-feed { margin:6px 0 8px; padding:7px; overflow:hidden; }
  .match-feed-heading { margin-bottom:6px; }
  .match-feed-list { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .match-feed-list::-webkit-scrollbar { display:none; }
  .match-feed-item,.match-feed-item:nth-child(n) { display:grid; flex:0 0 min(79vw,300px); min-height:48px; scroll-snap-align:start; }
  .match-feed-item strong { font-size:9px; }
}
@media (prefers-reduced-motion: reduce) {
  .match-feed-item[role="button"] { transition:none !important; }
  .match-feed-item[role="button"]:hover { transform:none; }
}


/* v6.8 lobby + responsive form polish */
@media (min-width:1051px) {
  .lobby-primary-column .quick-match-box { gap:10px; }
}
@media (max-width:760px) {
  .private-room-grid .box { min-width:0; }
  .private-room-grid .field select,
  .private-room-grid .field input { width:100%; min-width:0; }
}

/* v6.9 mobile match declutter + compact HUD polish — presentation only. */
.mobile-match-hud,.mobile-board-nav-actions { display:none; }

@media (max-width:760px) {
  /* Replace three stacked pieces of match chrome with one compact sticky battlefield HUD. */
  .turn-banner,.phase-track { display:none; }
  .mobile-board-nav {
    top:52px;
    display:block;
    margin:0 0 6px;
    padding:4px 5px 5px;
    border-radius:10px;
    box-shadow:0 4px 14px rgba(38,29,18,.07);
  }
  .mobile-match-hud {
    min-width:0;
    min-height:27px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:7px;
    align-items:center;
    padding:1px 2px 4px;
  }
  .mobile-match-hud > div:first-child { min-width:0; display:flex; align-items:baseline; gap:5px; overflow:hidden; }
  .mobile-match-hud > div:first-child span { overflow:hidden; color:#312e2a; font-size:8px; font-weight:950; letter-spacing:.045em; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-match-hud > div:first-child small { flex:0 0 auto; color:#8d857b; font-size:6px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
  .mobile-phase-dots { display:flex; gap:2px; align-items:center; }
  .mobile-phase-dots i { width:10px; height:3px; border-radius:999px; background:#ddd6cd; }
  .mobile-phase-dots i.complete { background:#aaa197; }
  .mobile-phase-dots i.active { width:17px; background:#4d7b63; box-shadow:0 0 0 1px rgba(77,123,99,.10); }
  .mobile-chain-pill { padding:2px 5px; border-radius:999px; background:#eee8df; color:#695f54; font-size:5.5px; letter-spacing:.06em; white-space:nowrap; }
  .mobile-board-nav-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
  .mobile-board-nav button { min-height:29px; padding:4px 5px; border-color:#d9d2c8; background:rgba(255,255,255,.74); font-size:8px; }
  .mobile-board-nav button.active,.mobile-board-nav button[aria-current="location"] { border-color:#9faea5; background:#eef4f0; color:#315d46; box-shadow:inset 0 0 0 1px rgba(73,113,91,.10); }

  .player-board,#decisionCenter { scroll-margin-top:101px; }

  /* The compact vitals already repeat REP/CAP/HAND/DECK; remove the second large mobile copy. */
  .player-board .resource-cluster { display:none; }
  .player-board .board-resource-row { display:block; margin:2px 0 3px; padding:0; border:0; background:transparent; box-shadow:none; }
  .player-board .board-resource-row .deck-pile { display:none; }
  .archive-compact { margin:0; }
  .archive-compact summary { min-height:31px; padding:4px 7px; border-radius:8px; }
  .archive-compact summary span { font-size:6.5px; }
  .archive-compact summary strong { font-size:10px; }

  .player-head { margin-bottom:3px; }
  .player-identity { min-width:0; }
  .player-identity > div { min-width:0; }
  .player-identity small { display:block; max-width:min(54vw,260px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .presence-pill.connected { display:none; }
  .presence-pill.disconnected,.presence-pill.waiting { display:inline-flex; }
  .player-vitals { margin-top:1px; }

  /* Mobile activity becomes a single live ticker; the full log remains in Playtest Tools. */
  .match-feed { margin:4px 0 6px; padding:4px 5px; border-radius:9px; }
  .match-feed-heading { display:none; }
  .match-feed-list { display:block; overflow:visible; padding:0; }
  .match-feed-item,.match-feed-item:nth-child(n) { display:none; }
  .match-feed-item.latest {
    display:grid;
    grid-template-columns:27px minmax(0,1fr);
    gap:6px;
    min-height:34px;
    padding:4px 6px;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .match-feed-code { width:26px; min-height:22px; padding:2px; font-size:6px; }
  .match-feed-item strong { font-size:8px; }
  .match-feed-item small,.match-feed-live { display:none; }

  .connection-banner { margin:5px 0; padding:7px 8px; }
  .connection-banner strong { font-size:9px; }
  .connection-banner span { font-size:8px; }

  .zone-title { margin:5px 0 3px; }
  .utility-strip { margin-top:6px; }
}

@media (max-width:420px) {
  .mobile-match-hud { grid-template-columns:minmax(0,1fr) auto; gap:5px; }
  .mobile-match-hud > div:first-child small { display:none; }
  .mobile-chain-pill { grid-column:1/-1; justify-self:start; margin-top:-1px; }
  .player-identity small { max-width:48vw; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-board-nav button { transition:none !important; }
}

/* v7.0 card-system visual unification — collection, booster and deckbuilder read like the live card frame. */
.catalog-card-face {
  --catalog-type:#6e6a64;
  --catalog-soft:#f1eee9;
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:7px 7px 6px;
  border:2px solid color-mix(in srgb,var(--catalog-type) 40%,#cbc3b7);
  border-top:7px solid var(--catalog-type);
  border-radius:10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--catalog-soft) 88%,#fff) 0 35px,#fffdf9 35px 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 4px 11px rgba(44,35,23,.07);
  overflow:hidden;
}
.catalog-card-face.type-employee { --catalog-type:#1765b5; --catalog-soft:#e8f2fc; }
.catalog-card-face.type-incident { --catalog-type:#b9433d; --catalog-soft:#fbeceb; }
.catalog-card-face.type-action { --catalog-type:#3a8752; --catalog-soft:#eaf6ed; }
.catalog-card-face.type-system { --catalog-type:#d08a27; --catalog-soft:#fff3dc; }
.catalog-card-face.type-workplace { --catalog-type:#7e5aa5; --catalog-soft:#f2ebf8; }
.catalog-card-face::after { content:''; position:absolute; inset:3px; border:1px solid color-mix(in srgb,var(--catalog-type) 14%,transparent); border-radius:6px; pointer-events:none; }
.catalog-card-face > * { position:relative; z-index:1; }
.catalog-type-strip { min-height:17px; display:grid; grid-template-columns:max-content minmax(0,1fr) auto; align-items:center; gap:5px; color:var(--catalog-type); }
.catalog-type-strip > span { justify-self:start; padding:2px 6px; border-radius:999px; background:var(--catalog-type); color:#fff; font-size:6px; line-height:1.15; font-weight:950; letter-spacing:.09em; }
.catalog-type-strip > b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:6px; font-weight:950; letter-spacing:.09em; opacity:.78; }
.catalog-type-strip .rarity-signal { justify-self:end; }
.catalog-name-row { min-height:31px; display:flex; align-items:flex-start; gap:5px; }
.catalog-name-row > strong { min-width:0; flex:1 1 auto; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#2c2925; font-size:12px; line-height:1.06; font-weight:950; letter-spacing:-.015em; }
.catalog-name-row > strong.long-name { font-size:10.5px; line-height:1.03; }
.catalog-cost.card-cost-badge { position:static; width:29px; height:29px; flex:0 0 29px; }
.catalog-art-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--catalog-type) 27%,#d3ccc2); border-radius:6px; background:#f1ede6; }
.catalog-art-stage > img { width:100%; height:100%; object-fit:cover; display:block; }
.catalog-art-stage .catalog-fallback-art { width:100%; height:100%; min-height:0; border:0; border-radius:0; }
.catalog-art-stage .art-ready-badge { position:absolute; right:4px; top:4px; padding:2px 4px; border-radius:999px; background:rgba(25,24,22,.78); color:#fff; font-size:5px; font-weight:950; letter-spacing:.08em; font-style:normal; }
.catalog-detail-row { min-height:14px; display:flex; align-items:center; gap:3px; padding-right:34px; overflow:hidden; }
.catalog-detail-row > span { padding:2px 4px; border-radius:999px; background:#f0ece5; color:#6b645c; font-size:5.5px; line-height:1; font-weight:900; letter-spacing:.06em; white-space:nowrap; }
.catalog-detail-row > b { margin-left:auto; font-size:6px; color:#736b62; letter-spacing:.05em; white-space:nowrap; }
.catalog-rules { min-height:36px; max-height:42px; padding:5px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; border:1px solid #ddd5ca; border-radius:5px; background:rgba(255,255,255,.82); color:#37332f; font-size:7.2px; line-height:1.17; }
.catalog-rules.rules-dense { font-size:6.7px; }
.catalog-rules.rules-ultra { font-size:6.1px; line-height:1.12; }
.catalog-tags { min-height:18px; max-height:18px; display:flex; align-items:flex-start; gap:2px; padding-right:33px; overflow:hidden; }
.catalog-tags span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 4px; border:1px solid color-mix(in srgb,var(--catalog-type) 11%,#ddd); border-radius:4px; background:color-mix(in srgb,var(--catalog-soft) 74%,#fff); color:#555048; font-size:5.5px; line-height:1; font-weight:950; }
.catalog-power-badge { position:absolute; right:6px; bottom:6px; z-index:4; width:28px; height:28px; display:grid; grid-template-rows:8px 1fr; place-items:center; padding:2px 1px 1px; border:2px solid #fff; border-radius:999px; background:var(--catalog-type); color:#fff; box-shadow:0 2px 7px rgba(0,0,0,.18); }
.catalog-power-badge span { font-size:4.5px; line-height:1; font-weight:950; letter-spacing:.06em; }
.catalog-power-badge b { font-size:12px; line-height:1; }
.catalog-new-stamp { position:absolute; left:7px; top:39px; z-index:5; padding:3px 6px; border-radius:999px; background:#247044; color:#fff; box-shadow:0 3px 9px rgba(35,106,66,.22); font-size:6px; font-style:normal; font-weight:950; letter-spacing:.08em; }
.catalog-foil-sheen { position:absolute; inset:-45% -80%; z-index:3; transform:rotate(24deg) translateX(-25%); background:linear-gradient(90deg,transparent 35%,rgba(255,235,160,.38) 49%,rgba(255,255,255,.54) 52%,transparent 66%); pointer-events:none; }

/* Collection cards keep deck controls outside the shared card face. */
.collection-card { min-height:0; padding:6px; gap:6px; border:1px solid #d7d0c6; border-top-width:1px; background:rgba(255,253,249,.92); }
.collection-card .catalog-card-face { flex:1 1 auto; }
.collection-card.selected-preview { border-color:color-mix(in srgb,var(--collection-type) 54%,#8f877d); box-shadow:0 0 0 3px color-mix(in srgb,var(--collection-type) 12%,transparent),0 11px 24px rgba(40,32,20,.10); }
.collection-copy-control { margin-top:0; grid-template-columns:32px minmax(0,1fr) 32px; }
.collection-copy-control span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7px; letter-spacing:.045em; }
.collection-copy-control span b { font-size:10px; }
.collection-card.unowned-card .catalog-card-face { filter:saturate(.62); opacity:.58; }
.collection-card.new-acquisition .catalog-card-face { box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 0 0 2px rgba(48,133,78,.13),0 7px 18px rgba(38,109,66,.11); }

/* Booster reveals reuse the same static card face instead of a separate visual dialect. */
.booster-hit.revealed { min-height:0; padding:4px; border:1px solid #d7d0c6; border-top-width:1px; background:rgba(255,253,249,.94); overflow:visible; }
.booster-hit.revealed .catalog-card-face { width:100%; height:100%; min-height:158px; text-align:left; }
.booster-hit.revealed .catalog-card-face.compact { gap:3px; }
.catalog-card-face.compact .catalog-type-strip { grid-template-columns:max-content minmax(0,1fr) auto; }
.catalog-card-face.compact .catalog-type-strip .rarity-signal { transform:scale(.88); transform-origin:right center; }
.catalog-card-face.compact .catalog-name-row { min-height:29px; }
.catalog-card-face.compact .catalog-name-row > strong { font-size:10px; }
.catalog-card-face.compact .catalog-name-row > strong.long-name { font-size:9px; }
.catalog-card-face.compact .catalog-cost.card-cost-badge { width:26px; height:26px; flex-basis:26px; }
.catalog-card-face.compact .catalog-cost.card-cost-badge b { font-size:14px; }
.catalog-card-face.compact .catalog-detail-row { padding-right:31px; }
.catalog-card-face.compact .catalog-detail-row > b { font-size:5.5px; }
.catalog-card-face.compact .catalog-power-badge { width:25px; height:25px; right:5px; bottom:5px; }
.booster-hit.revealed.tier-t3 { border-color:#c39338; }
.booster-hit.revealed .booster-inspect { z-index:8; }

/* Deck rows use the same TYPE / DEPT / COST / POWER vocabulary as cards. */
.deck-list-row { position:relative; overflow:hidden; }
.deck-list-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:#777; }
.deck-list-row.type-employee::before { background:#1765b5; }
.deck-list-row.type-action::before { background:#3a8752; }
.deck-list-row.type-incident::before { background:#b9433d; }
.deck-list-row.type-system::before { background:#d08a27; }
.deck-list-card-copy { min-width:0; padding-left:4px; }
.deck-list-card-copy > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deck-list-card-copy > small { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }
.deck-list-card-copy > small i { padding:2px 4px; border:1px solid #ddd6cc; border-radius:999px; background:#fff; color:#6f685f; font-size:5.5px; line-height:1; font-style:normal; font-weight:900; letter-spacing:.045em; }
.deck-list-row.tier-t2 .deck-list-card-copy > small i:nth-child(2) { color:#704c8f; border-color:#d6c8e1; background:#f5f0f9; }
.deck-list-row.tier-t3 .deck-list-card-copy > small i:nth-child(2) { color:#936716; border-color:#e0cc9b; background:#fff8e6; }

@media (max-width:760px) {
  .catalog-card-face { padding:6px; }
  .catalog-rules { min-height:32px; max-height:37px; }
  .collection-card { padding:5px; }
  .booster-hit.revealed .catalog-card-face { min-height:150px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-foil-sheen { display:none; }
}

/* v7.1 card discovery + information polish */
.collection-discovery {
  display:grid;
  gap:7px;
  margin-bottom:9px;
  padding:9px;
  border:1px solid #ded7cd;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,247,242,.82));
}
.collection-filters {
  display:grid;
  grid-template-columns:minmax(210px,1.45fr) repeat(3,minmax(112px,1fr));
  gap:6px;
  align-items:end;
}
.collection-filters label {
  min-width:0;
  display:grid;
  gap:3px;
}
.collection-filters label > span {
  color:#8a8279;
  font-size:6px;
  font-weight:950;
  letter-spacing:.09em;
}
.collection-filters input,
.collection-filters select {
  width:100%;
  min-width:0;
}
.collection-search-field { grid-column:span 2; }
.collection-result-count {
  min-height:36px;
  display:grid;
  grid-template-columns:auto auto;
  justify-content:center;
  align-content:center;
  gap:0 3px;
  padding:5px 8px;
  border:1px solid #d9d1c6;
  border-radius:8px;
  background:#fffdf9;
  color:#777067;
  font-size:7px;
  font-weight:900;
  text-align:center;
}
.collection-result-count b { color:#25221f; font-size:13px; }
.collection-result-count small { grid-column:1/-1; font-size:5px; letter-spacing:.1em; }
.collection-tag-shortcuts,
.collection-active-filters {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  overflow-x:auto;
  padding-bottom:1px;
  scrollbar-width:thin;
}
.collection-tag-shortcuts > span,
.collection-active-filters > span {
  flex:0 0 auto;
  color:#8a8279;
  font-size:6px;
  font-weight:950;
  letter-spacing:.09em;
  margin-right:2px;
}
.collection-tag-shortcuts button,
.collection-active-filters button {
  flex:0 0 auto;
  min-height:0;
  padding:4px 7px;
  border:1px solid #dcd4ca;
  border-radius:999px;
  background:#fff;
  color:#665f57;
  font-size:6.5px;
  font-weight:900;
  white-space:nowrap;
}
.collection-tag-shortcuts button b { color:#9a9187; font-size:6px; }
.collection-tag-shortcuts button.active {
  border-color:#87a2b0;
  background:#edf4f7;
  color:#395e70;
  box-shadow:inset 0 0 0 1px rgba(76,120,142,.08);
}
.collection-active-filters { padding-top:6px; border-top:1px solid #ece6de; }
.collection-active-filters button { background:#f2eee8; }
.collection-active-filters .clear-all { margin-left:auto; border-color:#cabfb3; background:#fffdf9; color:#3f3933; }

.collection-card-context {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:7px;
}
.collection-card-context span {
  padding:3px 6px;
  border:1px solid #e1d9ce;
  border-radius:999px;
  background:#f7f3ed;
  color:#817970;
  font-size:6px;
  font-weight:900;
  letter-spacing:.05em;
}
.collection-card-context b { color:#3d3833; font-size:6.5px; }
.collection-preview-tags.interactive button {
  min-height:0;
  padding:4px 7px;
  border:1px solid color-mix(in srgb,var(--collection-type) 18%,#ddd4c8);
  border-radius:999px;
  background:color-mix(in srgb,var(--collection-type) 5%,#f8f5f0);
  color:color-mix(in srgb,var(--collection-type) 72%,#413c36);
  font-size:7px;
  font-weight:950;
  letter-spacing:.05em;
}
.collection-preview-tags.interactive button:hover {
  border-color:color-mix(in srgb,var(--collection-type) 42%,#d7d0c7);
  background:color-mix(in srgb,var(--collection-type) 9%,#fff);
}
.related-card-panel {
  display:grid;
  gap:5px;
  margin:10px 0 8px;
  padding:8px;
  border:1px solid #e1d9ce;
  border-radius:9px;
  background:#faf7f2;
}
.related-card-head { display:flex; justify-content:space-between; gap:8px; align-items:end; }
.related-card-head span { color:#5f5851; font-size:7px; font-weight:950; letter-spacing:.08em; }
.related-card-head small { color:#948b81; font-size:6px; text-align:right; }
.related-card-list { display:grid; gap:3px; }
.related-card-list button {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  padding:6px 7px;
  border:1px solid #e2dbd2;
  border-radius:7px;
  background:#fff;
  color:#39342f;
  text-align:left;
}
.related-card-list button:hover { border-color:#beb3a6; background:#fffdf9; }
.related-card-list button > span { min-width:0; display:grid; gap:1px; }
.related-card-list button b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
.related-card-list button small { color:#8c837a; font-size:5.5px; font-weight:800; }
.related-card-list button em { margin:0; max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6e7f87; font-size:5.5px; font-style:normal; font-weight:900; }

@media (max-width:1180px) {
  .collection-filters { grid-template-columns:minmax(190px,1.35fr) repeat(2,minmax(112px,1fr)); }
  .collection-search-field { grid-column:span 1; }
}
@media (max-width:760px) {
  .collection-discovery { padding:7px; }
  .collection-filters { grid-template-columns:1fr 1fr; }
  .collection-search-field { grid-column:1 / -1; }
  .collection-result-count { min-height:34px; }
  .collection-active-filters .clear-all { margin-left:0; }
  .related-card-head { align-items:start; flex-direction:column; gap:1px; }
  .related-card-head small { text-align:left; }
}
@media (max-width:480px) {
  .collection-filters { grid-template-columns:1fr; }
  .collection-search-field { grid-column:auto; }
  .related-card-list button { grid-template-columns:1fr; gap:2px; }
  .related-card-list button em { max-width:100%; }
}

/* v7.2 deckbuilding workflow + engine-fit polish */
.collection-filters {
  grid-template-columns:minmax(210px,1.45fr) repeat(4,minmax(108px,1fr));
}
.collection-card.in-current-deck {
  border-color:color-mix(in srgb,var(--collection-type) 28%,#d7d0c6);
  background:linear-gradient(180deg,color-mix(in srgb,var(--collection-type) 3%,#fffdf9),#fffdf9);
}
.collection-card.in-current-deck .collection-copy-control span {
  color:color-mix(in srgb,var(--collection-type) 72%,#39342f);
}
.collection-card.deck-copy-maxed .collection-copy-control {
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--collection-type) 15%,transparent);
}

.deck-stat-head > div { min-width:0; display:grid; gap:1px; }
.deck-stat-head small { color:#928a81; font-size:6px; font-weight:800; }
.type-stat-grid .type-stat,
.deck-taxonomy button,
.deck-tag-cloud button {
  cursor:pointer;
}
.type-stat-grid button.type-stat { appearance:none; font-family:inherit; }
.type-stat-grid button.type-stat:hover,
.type-stat-grid button.type-stat.active {
  border-color:color-mix(in srgb,var(--stat) 48%,#d8d0c7);
  background:color-mix(in srgb,var(--stat) 7%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stat) 8%,transparent);
}
.deck-taxonomy button,
.deck-tag-cloud button {
  min-height:0;
  padding:4px 7px;
  border:1px solid #ddd6cc;
  border-radius:999px;
  background:#fff;
  color:#655f57;
  font-size:7px;
  font-weight:900;
}
.deck-taxonomy button { background:#eee9e1; border-color:transparent; }
.deck-taxonomy button:hover,
.deck-taxonomy button.active,
.deck-tag-cloud button:hover,
.deck-tag-cloud button.active {
  border-color:#aebbc1;
  background:#eef4f6;
  color:#3d6272;
}

.deck-engine-fits {
  display:grid;
  gap:6px;
  margin:11px 0;
  padding:9px;
  border:1px solid #d7d0c6;
  border-radius:10px;
  background:linear-gradient(180deg,#fffdf9,#f7f3ed);
}
.deck-engine-fit-head { display:grid; gap:2px; }
.deck-engine-fit-head > div { display:grid; gap:1px; }
.deck-engine-fit-head span { color:#6d665e; font-size:6px; font-weight:950; letter-spacing:.1em; }
.deck-engine-fit-head strong { color:#302c28; font-size:10px; line-height:1.2; }
.deck-engine-fit-head small { color:#948b81; font-size:6px; line-height:1.25; }
.deck-engine-fit-list { display:grid; gap:4px; }
.deck-engine-fit {
  --fit:#777;
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  gap:4px;
  align-items:stretch;
  overflow:hidden;
  border:1px solid #e1dad0;
  border-left:3px solid var(--fit);
  border-radius:8px;
  background:#fff;
}
.deck-engine-fit.type-employee { --fit:#1765b5; }
.deck-engine-fit.type-action { --fit:#3a8752; }
.deck-engine-fit.type-incident { --fit:#b9433d; }
.deck-engine-fit.type-system { --fit:#d08a27; }
.deck-engine-fit-preview {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px;
  align-items:center;
  padding:6px 7px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#39342f;
  text-align:left;
}
.deck-engine-fit-preview:hover { background:#fcfaf6; }
.deck-engine-fit-preview > span { min-width:0; display:grid; gap:1px; }
.deck-engine-fit-preview b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
.deck-engine-fit-preview small { color:#8c837a; font-size:5.5px; font-weight:800; }
.deck-engine-fit-preview em {
  max-width:98px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#627a84;
  font-size:5.5px;
  font-style:normal;
  font-weight:900;
}
.deck-engine-fit-add {
  display:grid;
  place-items:center;
  align-content:center;
  gap:1px;
  min-width:0;
  border:0;
  border-left:1px solid #e6dfd6;
  border-radius:0;
  background:#f5f1eb;
  color:#3b3732;
  font-size:15px;
  font-weight:950;
}
.deck-engine-fit-add span { color:#8b837a; font-size:5.5px; font-weight:900; }
.deck-engine-fit-add:hover:not(:disabled) { background:#ece6dd; }
.deck-engine-fit-add:disabled { opacity:.42; }

@media (max-width:1180px) {
  .collection-filters { grid-template-columns:minmax(190px,1.35fr) repeat(2,minmax(112px,1fr)); }
}
@media (max-width:760px) {
  .collection-filters { grid-template-columns:1fr 1fr; }
  .deck-engine-fit-list {
    grid-auto-flow:column;
    grid-auto-columns:minmax(245px,82%);
    grid-template-columns:none;
    overflow-x:auto;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
  }
  .deck-engine-fit { scroll-snap-align:start; }
}
@media (max-width:480px) {
  .collection-filters { grid-template-columns:1fr; }
  .deck-engine-fit-preview { grid-template-columns:1fr; gap:2px; }
  .deck-engine-fit-preview em { max-width:100%; }
}

/* v7.3 deck quality + completion polish */
.deck-completion-check {
  display:grid;
  gap:7px;
  margin:10px 0;
  padding:10px;
  border:1px solid #d6cfc5;
  border-radius:11px;
  background:linear-gradient(180deg,#fffefa,#f8f4ed);
}
.deck-completion-check.all-ready { border-color:#b9d3c1; background:linear-gradient(180deg,#fbfffc,#f1f8f3); }
.deck-completion-head { display:grid; gap:2px; }
.deck-completion-head > div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.deck-completion-head span { color:#6d665e; font-size:6px; font-weight:950; letter-spacing:.11em; }
.deck-completion-head strong { color:#302c28; font-size:10px; }
.deck-completion-head small { color:#91887e; font-size:6px; line-height:1.3; }
.deck-completion-progress { height:5px; overflow:hidden; border:1px solid #d8d0c6; border-radius:999px; background:#ece7df; }
.deck-completion-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7f8a83,#5f7568); transition:width .18s ease; }
.deck-completion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.deck-completion-grid article { min-width:0; display:grid; align-content:start; gap:4px; padding:7px; border:1px solid #ddd5ca; border-radius:9px; background:#fff; }
.deck-completion-grid article.ready { border-color:#bdd4c4; background:#f7fbf8; }
.deck-completion-grid article.attention { border-color:#ddc7a8; background:#fffaf2; }
.deck-completion-grid article > div { min-width:0; display:grid; gap:1px; }
.deck-completion-grid article span { color:#837a70; font-size:5.5px; font-weight:950; letter-spacing:.08em; }
.deck-completion-grid article strong { overflow:hidden; text-overflow:ellipsis; color:#38332e; font-size:7px; line-height:1.25; }
.deck-completion-grid article > b { justify-self:start; padding:2px 5px; border-radius:999px; background:#ece8e1; color:#625a52; font-size:5.5px; font-weight:950; letter-spacing:.06em; }
.deck-completion-grid article.ready > b { background:#e7f3ea; color:#2e7046; }
.deck-completion-grid article.attention > b { background:#f5ead9; color:#8b6433; }
.deck-completion-grid article small { color:#91887f; font-size:5.5px; line-height:1.25; }
.deck-completion-grid article button { justify-self:start; min-height:26px; padding:4px 7px; border:1px solid #cfc6bb; border-radius:7px; background:#fff; color:#514a43; font-size:6px; font-weight:900; }
.deck-completion-grid article button:hover { background:#f4efe8; }
.deck-owned-gaps { display:grid; gap:4px; padding-top:2px; border-top:1px dashed #d9d0c6; }
.deck-owned-gaps > span { color:#7f756b; font-size:5.5px; font-weight:950; letter-spacing:.09em; }
.deck-owned-gaps > div { display:grid; gap:3px; }
.deck-owned-gaps button { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; width:100%; padding:5px 6px; border:1px solid #dfd7cc; border-radius:7px; background:#fff; text-align:left; }
.deck-owned-gaps button:hover { background:#faf7f2; }
.deck-owned-gaps button b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#443e38; font-size:6.5px; }
.deck-owned-gaps button small { color:#8e857b; font-size:5.5px; }
.deck-owned-gaps em { color:#8f877e; font-size:5.5px; font-style:normal; font-weight:800; }
@media (max-width:760px) {
  .deck-completion-grid { grid-template-columns:1fr; }
  .deck-completion-grid article { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .deck-completion-grid article > small,.deck-completion-grid article > button { grid-column:1/-1; }
  .deck-owned-gaps > div { grid-auto-flow:column; grid-auto-columns:minmax(180px,78%); overflow-x:auto; padding-bottom:3px; scroll-snap-type:x proximity; }
  .deck-owned-gaps button { grid-template-columns:1fr; scroll-snap-align:start; }
}
@media (prefers-reduced-motion:reduce) {
  .deck-completion-progress i { transition:none; }
}


/* v7.4 capacity curve + deck composition polish */
.curve-title-row { display:flex; align-items:end; justify-content:space-between; gap:8px; margin-top:9px; }
.curve-title-row .curve-title { margin-top:0; }
.curve-title-row small { color:#948b81; font-size:5.5px; font-weight:800; text-align:right; }
.cost-curve.interactive > button {
  appearance:none;
  height:68px;
  display:grid;
  grid-template-rows:1fr 12px 10px;
  align-items:end;
  justify-items:center;
  min-width:0;
  padding:0 1px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:inherit;
  font-family:inherit;
  cursor:pointer;
}
.cost-curve.interactive > button:hover,
.cost-curve.interactive > button.active { border-color:#bac8cd; background:#f0f5f6; }
.cost-curve.interactive > button i { width:70%; min-height:3px; max-height:46px; border-radius:4px 4px 1px 1px; background:#383431; }
.cost-curve.interactive > button.active i { background:#557584; }
.cost-curve.interactive > button b { font-size:8px; line-height:1; }
.cost-curve.interactive > button span { color:#7b746b; font-size:7px; }
.curve-band-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; margin:4px 0 7px; }
.curve-band-summary span { min-width:0; padding:4px 5px; border:1px solid #e0d8ce; border-radius:6px; background:#faf7f2; color:#81786f; font-size:5.5px; font-weight:900; text-align:center; }
.curve-band-summary b { color:#4a443e; font-size:6.5px; }
@media (max-width:480px) {
  .curve-title-row { align-items:start; flex-direction:column; gap:1px; }
  .curve-title-row small { text-align:left; }
  .curve-band-summary span { padding-inline:3px; font-size:5px; }
}

/* v7.5 engine coverage + bridge-card polish */
.deck-engine-coverage {
  display:grid;
  gap:7px;
  margin:11px 0;
  padding:9px;
  border:1px solid #d6d0c7;
  border-radius:10px;
  background:linear-gradient(180deg,#fffefa,#f7f3ed);
}
.deck-engine-coverage-head { display:grid; gap:2px; }
.deck-engine-coverage-head > div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.deck-engine-coverage-head span,
.engine-singletons > span,
.engine-bridges > div > span { color:#6d665e; font-size:6px; font-weight:950; letter-spacing:.1em; }
.deck-engine-coverage-head strong { color:#302c28; font-size:10px; line-height:1.2; }
.deck-engine-coverage-head small,
.engine-singletons > small,
.engine-bridges > div > small { color:#948b81; font-size:5.5px; line-height:1.3; }
.engine-package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.engine-package {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid #ddd6cc;
  border-radius:8px;
  background:#fff;
}
.engine-package.active { border-color:#9eb5bf; box-shadow:inset 0 0 0 1px #c8d8de; }
.engine-package > button { min-width:0; border:0; border-radius:0; background:transparent; }
.engine-package > button:first-child { display:grid; gap:1px; padding:6px 7px; color:#39342f; text-align:left; }
.engine-package > button:first-child:hover { background:#faf7f2; }
.engine-package > button:first-child span { color:#4e6f7c; font-size:6.5px; font-weight:950; }
.engine-package > button:first-child strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7px; }
.engine-package > button:first-child small { color:#91887e; font-size:5.5px; }
.engine-package > button:last-child { padding:0 7px; border-left:1px solid #e4ddd4; color:#71685f; font-size:5.5px; font-weight:950; text-transform:uppercase; }
.engine-package > button:last-child:hover { background:#edf3f5; color:#466876; }
.engine-singletons { display:grid; gap:4px; padding-top:1px; }
.engine-singletons > div { display:flex; flex-wrap:wrap; gap:3px; }
.engine-singletons button { min-height:0; padding:4px 6px; border:1px solid #ddd6cd; border-radius:999px; background:#fff; color:#716960; font-size:6px; font-weight:900; }
.engine-singletons button b { color:#9a9085; font-size:5.5px; }
.engine-singletons button:hover,
.engine-singletons button.active { border-color:#aebfc6; background:#eef4f6; color:#426675; }
.engine-bridges { display:grid; gap:4px; padding-top:5px; border-top:1px dashed #d8d0c6; }
.engine-bridges > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.engine-bridge-list { display:grid; gap:3px; }
.engine-bridge-list button {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  width:100%;
  min-height:0;
  padding:5px 6px;
  border:1px solid #e1dad0;
  border-radius:7px;
  background:#fff;
  color:#413b36;
  text-align:left;
}
.engine-bridge-list button:hover { background:#faf7f2; }
.engine-bridge-list button > span { min-width:0; display:grid; gap:1px; }
.engine-bridge-list button b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:6.5px; }
.engine-bridge-list button small { color:#91887e; font-size:5.5px; }
.engine-bridge-list button em { max-width:115px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#56717c; font-size:5.5px; font-style:normal; font-weight:950; }
@media (max-width:760px) {
  .engine-package-grid {
    grid-auto-flow:column;
    grid-auto-columns:minmax(225px,78%);
    grid-template-columns:none;
    overflow-x:auto;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
  }
  .engine-package { scroll-snap-align:start; }
  .engine-bridge-list {
    grid-auto-flow:column;
    grid-auto-columns:minmax(215px,76%);
    grid-template-columns:none;
    overflow-x:auto;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
  }
  .engine-bridge-list button { grid-template-columns:1fr; scroll-snap-align:start; }
  .engine-bridge-list button em { max-width:100%; }
}
@media (max-width:480px) {
  .deck-engine-coverage-head > div,
  .engine-bridges > div:first-child { align-items:start; flex-direction:column; gap:1px; }
}

/* v7.6 atomic deck swap + refinement polish */
.deck-swap-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  padding:9px 10px;
  border:1px solid #b8c9cf;
  border-radius:10px;
  background:#eef5f7;
  box-shadow:0 7px 18px rgba(47,73,82,.08);
}
.deck-swap-bar > div { min-width:0; display:grid; gap:2px; }
.deck-swap-bar > div:first-child span { color:#4d7380; font-size:6px; font-weight:950; letter-spacing:.11em; }
.deck-swap-bar strong { overflow:hidden; color:#2f3638; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.deck-swap-bar small { overflow:hidden; color:#77858a; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
.deck-swap-bar > div:last-child { flex:0 0 auto; justify-items:end; }
.deck-swap-bar > div:last-child b { color:#5b7179; font-size:6px; text-transform:uppercase; }
.deck-swap-bar button { min-height:0; padding:5px 8px; border-color:#9eb5be; background:#fff; color:#456976; font-size:6px; font-weight:950; }
.collection-card.swap-target-mode { outline:1px solid rgba(89,126,139,.2); outline-offset:1px; }
.collection-card.swap-source-card { opacity:.7; outline:2px solid #789aa6; }
.collection-swap-control { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px; padding:5px; border-top:1px solid #d9e3e6; background:#f0f6f8; }
.collection-swap-control span { color:#68767b; font-size:6px; font-weight:850; }
.collection-swap-control button { min-height:26px; padding:4px 7px; border-color:#91acb6; background:#4f7481; color:#fff; font-size:6px; font-weight:950; letter-spacing:.04em; }
.collection-swap-control button:disabled { border-color:#d6d3ce; background:#eeeae4; color:#aaa39a; }
.deck-list-row { grid-template-columns:minmax(0,1fr) auto auto auto; }
.deck-list-swap { min-height:0; align-self:center; padding:4px 6px; border:1px solid #d6d0c8; border-radius:6px; background:#faf8f5; color:#766e65; font-size:5.5px; font-weight:950; }
.deck-list-swap:hover,
.deck-list-row.swap-source-row .deck-list-swap { border-color:#94afb9; background:#eaf2f4; color:#416978; }
.deck-list-row.swap-source-row { box-shadow:inset 3px 0 0 #779aa6; background:#f3f8f9; }
@media (max-width:760px) {
  .deck-swap-bar { position:sticky; top:54px; z-index:7; margin:0 0 7px; padding:8px; }
  .deck-swap-bar > div:last-child b { display:none; }
  .deck-list-row { grid-template-columns:minmax(0,1fr) auto auto; }
  .deck-list-owned { display:none; }
  .deck-list-swap { min-width:48px; min-height:28px; }
}
@media (max-width:480px) {
  .deck-swap-bar { align-items:flex-start; }
  .deck-swap-bar small { max-width:220px; }
  .deck-swap-bar > div:last-child { align-self:center; }
}

/* v7.7 deck editing safety + history polish */
.deck-edit-safety {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:7px 0 9px;
  padding:8px 9px;
  border:1px solid #d8d4ce;
  border-radius:9px;
  background:#faf8f5;
}
.deck-edit-safety.dirty { border-color:#d9b46b; background:#fff9ec; box-shadow:inset 3px 0 0 #c9973e; }
.deck-edit-state { min-width:0; display:grid; gap:1px; }
.deck-edit-state span { color:#8a8177; font-size:5.5px; font-weight:950; letter-spacing:.11em; }
.deck-edit-safety.dirty .deck-edit-state span { color:#986c20; }
.deck-edit-state strong { overflow:hidden; color:#333a3d; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.deck-edit-state small { color:#7c827f; font-size:5.8px; line-height:1.35; }
.deck-edit-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.deck-edit-actions button { min-height:28px; padding:5px 8px; font-size:6px; font-weight:900; white-space:nowrap; }
.deck-edit-actions button:disabled { opacity:.45; }
@media (max-width:760px) {
  .deck-edit-safety { grid-template-columns:1fr; align-items:stretch; }
  .deck-edit-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .deck-edit-actions button { min-width:0; }
}
@media (max-width:480px) {
  .deck-edit-state small { max-width:290px; }
  .deck-edit-actions { grid-template-columns:1fr 1fr; }
  .deck-edit-actions .primary { grid-column:1 / -1; }
}


/* v7.8 saved deck management polish */
.saved-deck-manager {
  display:grid;
  gap:7px;
  margin:8px 0 9px;
  padding:8px;
  border:1px solid #d9d4cd;
  border-radius:10px;
  background:#f8f6f2;
}
.saved-deck-manager-head { display:flex; align-items:end; justify-content:space-between; gap:10px; }
.saved-deck-manager-head > div { min-width:0; display:grid; gap:1px; }
.saved-deck-manager-head span { color:#746d65; font-size:5.5px; font-weight:950; letter-spacing:.11em; }
.saved-deck-manager-head strong { color:#343a3c; font-size:8px; }
.saved-deck-manager-head small { max-width:230px; color:#8c857d; font-size:5.5px; line-height:1.35; text-align:right; }
.saved-deck-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.saved-deck-card { min-width:0; display:grid; gap:5px; padding:7px; border:1px solid #ddd7cf; border-radius:8px; background:#fff; }
.saved-deck-card.editing { border-color:#9eb5be; box-shadow:inset 3px 0 0 #5e8390; background:#f5fafb; }
.saved-deck-title { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px; }
.saved-deck-title > div { min-width:0; display:grid; gap:1px; }
.saved-deck-title span { color:#7f786f; font-size:5px; font-weight:950; letter-spacing:.1em; }
.saved-deck-card.editing .saved-deck-title span { color:#517681; }
.saved-deck-title strong { overflow:hidden; color:#353b3d; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.saved-deck-title > b { color:#5b6467; font-size:6px; white-space:nowrap; }
.saved-deck-status { display:flex; flex-wrap:wrap; gap:3px; }
.saved-deck-status span { padding:3px 5px; border:1px solid #ddd8d1; border-radius:999px; background:#f8f6f2; color:#7e776f; font-size:5px; font-weight:950; }
.saved-deck-status .ready { border-color:#bdd0c2; background:#eff7f1; color:#52705a; }
.saved-deck-status .draft { border-color:#dcc79e; background:#fff8e9; color:#8b692b; }
.saved-deck-status .missing { border-color:#ddb8b3; background:#fff1ef; color:#8c5149; }
.saved-deck-status .selected { border-color:#aac2cb; background:#edf5f7; color:#466d7a; }
.saved-deck-edited { color:#969087; font-size:5.5px; }
.saved-deck-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
.saved-deck-actions button { min-width:0; min-height:25px; padding:4px 3px; font-size:5px; font-weight:900; }
.saved-deck-actions button:disabled { opacity:.42; }
@media (max-width:760px) {
  .saved-deck-manager-head { align-items:start; }
  .saved-deck-manager-head small { display:none; }
  .saved-deck-rail {
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,82%);
    grid-template-columns:none;
    overflow-x:auto;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
  }
  .saved-deck-card { scroll-snap-align:start; }
}
@media (max-width:480px) {
  .saved-deck-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* v7.9 match prep + deck selection polish */
.lobby-deck-prep {
  --dept:#758087;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:8px 9px;
  border:1px solid color-mix(in srgb,var(--dept) 26%,#d9dfe3);
  border-left:4px solid var(--dept);
  border-radius:10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--dept) 5%,#fff),#fffdfa);
}
.lobby-deck-prep.dept-customer_service { --dept:#6c7bd9; }
.lobby-deck-prep.dept-it { --dept:#65848f; }
.lobby-deck-prep.dept-office { --dept:#9b7c5c; }
.lobby-deck-prep.dept-marketing { --dept:#c36d93; }
.lobby-deck-prep.dept-production { --dept:#b67945; }
.lobby-deck-prep.invalid { border-color:#dfc7a7; border-left-color:#ae7f43; background:#fffaf0; }
.lobby-deck-prep-code { display:grid; justify-items:center; gap:2px; min-width:38px; }
.lobby-deck-prep-code span { min-width:31px; padding:5px 6px; border-radius:7px; background:color-mix(in srgb,var(--dept) 12%,#fff); color:var(--dept); font-size:8px; font-weight:950; text-align:center; }
.lobby-deck-prep-code small { color:#8c847b; font-size:5px; font-weight:950; letter-spacing:.08em; white-space:nowrap; }
.lobby-deck-prep-copy { min-width:0; display:grid; gap:1px; }
.lobby-deck-prep-copy strong { overflow:hidden; color:#30373a; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.lobby-deck-prep-copy b { overflow:hidden; color:#5f6d72; font-size:6.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.lobby-deck-prep-copy small { overflow:hidden; color:#8a837b; font-size:5.5px; text-overflow:ellipsis; white-space:nowrap; }
.lobby-deck-prep-status { display:flex; justify-content:flex-end; gap:4px; flex-wrap:wrap; max-width:205px; }
.lobby-deck-prep-status span { padding:3px 5px; border:1px solid #ddd8d1; border-radius:999px; background:#f8f6f2; color:#756f68; font-size:5px; font-weight:950; white-space:nowrap; }
.lobby-deck-prep-status .ready { border-color:#bdd0c2; background:#eff7f1; color:#52705a; }
.lobby-deck-prep-status .warn { border-color:#dcc79e; background:#fff8e9; color:#8b692b; }
.lobby-deck-prep-status .info { border-color:#c5d3dc; background:#f1f7fa; color:#527180; }
.quick-match-box [data-lobby-deck-prep-host="QUICK"] { min-width:0; }
.private-room-grid [data-lobby-deck-prep-host] { margin:5px 0 9px; }
.private-room-grid .lobby-deck-prep { grid-template-columns:auto minmax(0,1fr); }
.private-room-grid .lobby-deck-prep-status { grid-column:1/-1; justify-content:flex-start; max-width:none; }
@media (max-width:760px) {
  .lobby-deck-prep { grid-template-columns:auto minmax(0,1fr); }
  .lobby-deck-prep-status { grid-column:1/-1; justify-content:flex-start; max-width:none; }
}
@media (max-width:480px) {
  .lobby-deck-prep-copy b { white-space:normal; line-height:1.3; }
  .lobby-deck-prep-copy small { display:none; }
}

/* v7.10 collection + economy flow polish */
.economy-shortcuts { margin-top:6px; display:flex; gap:5px; flex-wrap:wrap; }
.economy-shortcuts button { min-height:28px; padding:5px 8px; font-size:7px; font-weight:900; }
.card-economy-actions > .card-economy-summary { grid-column:1/-1; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.card-economy-summary > span { display:flex; align-items:baseline; gap:4px; padding-right:7px; border-right:1px solid #ddd5cb; }
.card-economy-summary > span b { font-size:13px; }
.card-economy-summary > .needs-copies { color:#8b692b; }
.card-economy-actions .find-shred-candidates { grid-column:1/-1; min-height:30px; background:#faf7f1; border-style:dashed; color:#6f655b; }
.deck-owned-gaps-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.deck-owned-gaps-head > span { color:#7f756b; font-size:5.5px; font-weight:950; letter-spacing:.09em; }
.deck-owned-gaps-head > button { width:auto; padding:3px 6px; border-radius:999px; font-size:5.5px; font-weight:900; }
.deck-owned-gaps > div:not(.deck-owned-gaps-head) { display:grid; gap:3px; }
.deck-owned-gap-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; align-items:stretch; }
.deck-owned-gaps .deck-owned-gap-preview { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 6px; width:100%; padding:5px 6px; border:1px solid #dfd7cc; border-radius:7px; background:#fff; text-align:left; }
.deck-owned-gaps .deck-owned-gap-preview b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#443e38; font-size:6.5px; }
.deck-owned-gaps .deck-owned-gap-preview small { color:#8e857b; font-size:5.5px; }
.deck-owned-gaps .deck-owned-gap-preview em { grid-column:1/-1; color:#8b692b; font-size:5.3px; font-style:normal; font-weight:850; }
.deck-owned-gaps .deck-owned-gap-craft { width:auto; min-width:54px; padding:4px 6px; border-radius:7px; font-size:5.5px; font-weight:950; }
.deck-owned-gaps-wallet { color:#8f877e; font-size:5.5px; font-weight:800; }
@media (max-width:760px) {
  .economy-shortcuts { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
  .economy-shortcuts button { flex:0 0 auto; }
  .deck-owned-gaps > div:not(.deck-owned-gaps-head) { grid-auto-flow:column; grid-auto-columns:minmax(210px,84%); overflow-x:auto; padding-bottom:3px; scroll-snap-type:x proximity; }
  .deck-owned-gap-card { scroll-snap-align:start; }
}
@media (max-width:480px) {
  .card-economy-summary > small { flex-basis:100%; margin-left:0 !important; }
  .deck-owned-gap-card { grid-template-columns:minmax(0,1fr); }
  .deck-owned-gaps .deck-owned-gap-craft { width:100%; }
}

/* v7.11 booster → collection → deck flow polish */
.booster-deck-use {
  position:absolute;
  left:7px;
  bottom:7px;
  z-index:9;
  padding:3px 5px;
  border-radius:999px;
  background:rgba(47,58,62,.88);
  color:#fff;
  font-size:5.5px;
  font-weight:950;
  font-style:normal;
  letter-spacing:.05em;
  pointer-events:none;
}
.booster-deck-bridge {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:8px 9px;
  border:1px solid #d8d1c7;
  border-radius:9px;
  background:rgba(255,255,255,.72);
}
.booster-deck-bridge > div { min-width:0; display:grid; gap:1px; }
.booster-deck-bridge span { color:#766d64; font-size:5.5px; font-weight:950; letter-spacing:.11em; }
.booster-deck-bridge strong { color:#383d3e; font-size:8px; }
.booster-deck-bridge small { color:#8b8379; font-size:5.5px; line-height:1.35; }
.booster-deck-bridge button { min-height:28px; padding:5px 8px; font-size:6px; font-weight:950; white-space:nowrap; }
.card-deck-use-panel {
  display:grid;
  gap:5px;
  padding:7px;
  border:1px solid #dad4cc;
  border-radius:8px;
  background:#f9f7f3;
}
.card-deck-use-head { display:flex; align-items:end; justify-content:space-between; gap:7px; }
.card-deck-use-head > div { min-width:0; display:grid; gap:1px; }
.card-deck-use-head span { color:#6f756f; font-size:5.5px; font-weight:950; letter-spacing:.1em; }
.card-deck-use-head strong { color:#39403f; font-size:7px; }
.card-deck-use-head small { max-width:150px; color:#90887f; font-size:5.2px; line-height:1.3; text-align:right; }
.card-deck-use-list { display:grid; gap:3px; }
.card-deck-use-row {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px;
  align-items:stretch;
  padding:3px;
  border:1px solid #e2ddd6;
  border-radius:7px;
  background:#fff;
}
.card-deck-use-row.used { border-color:#c5d5c9; background:#f8fcf9; }
.card-deck-use-row.active { box-shadow:inset 3px 0 0 #6f929c; }
.card-deck-use-open { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 5px; border:0; background:transparent; text-align:left; }
.card-deck-use-open > span { min-width:0; display:grid; gap:1px; }
.card-deck-use-open b { overflow:hidden; color:#3e4444; font-size:6.5px; text-overflow:ellipsis; white-space:nowrap; }
.card-deck-use-open small { color:#8b847c; font-size:5.3px; }
.card-deck-use-open em { flex:0 0 auto; color:#587984; font-size:5px; font-style:normal; font-weight:950; }
.card-deck-use-row > button:last-child { min-width:57px; padding:4px 6px; font-size:5.5px; font-weight:950; }
.card-deck-use-row > [data-card-deck-add] { border-color:#b9d0bf; background:#eff7f1; color:#4e7058; }
@media (max-width:760px) {
  .booster-deck-bridge { grid-template-columns:1fr; }
  .booster-deck-bridge button { justify-self:start; }
  .card-deck-use-head { align-items:start; }
  .card-deck-use-head small { display:none; }
  .card-deck-use-list {
    grid-auto-flow:column;
    grid-auto-columns:minmax(210px,84%);
    grid-template-columns:none;
    overflow-x:auto;
    padding-bottom:3px;
    scroll-snap-type:x proximity;
  }
  .card-deck-use-row { scroll-snap-align:start; }
}
@media (max-width:480px) {
  .booster-deck-bridge small { display:none; }
  .card-deck-use-row { grid-template-columns:minmax(0,1fr); }
  .card-deck-use-row > button:last-child { width:100%; }
}


/* v7.12 opening hand + first-turn readability polish */
.opening-readiness {
  display:grid; grid-template-columns:minmax(150px,.72fr) minmax(0,1.6fr); gap:12px; align-items:stretch;
  margin:-2px 0 10px; padding:9px 11px; border:1px solid #d9d1c5; border-radius:12px;
  background:rgba(255,255,255,.76); box-shadow:0 5px 16px rgba(40,33,24,.045);
}
.opening-readiness.choosing { border-color:#b8cce2; background:linear-gradient(180deg,rgba(247,251,255,.96),rgba(239,246,253,.9)); }
.opening-readiness.first-turn { border-color:#dacb9a; background:linear-gradient(180deg,rgba(255,252,241,.96),rgba(251,247,231,.9)); }
.opening-readiness-head { display:grid; align-content:center; gap:1px; min-width:0; padding-right:10px; border-right:1px solid rgba(112,99,81,.14); }
.opening-readiness-head > span { font-size:6px; font-weight:1000; letter-spacing:.14em; color:#718093; }
.opening-readiness-head > strong { font-size:11px; letter-spacing:.04em; color:#35465a; }
.opening-readiness-head > small { font-size:7px; line-height:1.35; color:#7d7a74; }
.opening-readiness-stats { display:grid; grid-template-columns:repeat(6,minmax(54px,1fr)); gap:6px; min-width:0; }
.opening-readiness-stats > span { display:grid; align-content:center; justify-items:center; min-width:0; padding:5px 6px; border:1px solid rgba(112,99,81,.12); border-radius:9px; background:rgba(255,255,255,.64); }
.opening-readiness-stats small { font-size:5.5px; font-weight:1000; letter-spacing:.08em; color:#817b72; white-space:nowrap; }
.opening-readiness-stats b { font-size:13px; line-height:1.05; color:#303943; }
.opening-readiness-stats em { font-size:5.5px; font-style:normal; color:#817b72; text-align:center; white-space:nowrap; }
.opening-readiness-stats .opening-capacity-fit { border-color:rgba(74,116,82,.24); background:rgba(239,248,239,.78); }
.opening-readiness-stats .opening-capacity-fit b { color:#3f7047; }
@media (max-width:760px) {
  .opening-readiness { grid-template-columns:1fr; gap:6px; padding:8px 9px; }
  .opening-readiness-head { padding:0 0 6px; border-right:0; border-bottom:1px solid rgba(112,99,81,.14); }
  .opening-readiness-head > small { font-size:6.5px; }
  .opening-readiness-stats { display:flex; overflow-x:auto; gap:5px; scrollbar-width:none; padding-bottom:1px; }
  .opening-readiness-stats::-webkit-scrollbar { display:none; }
  .opening-readiness-stats > span { min-width:62px; flex:0 0 auto; padding:5px; }
  .opening-readiness-stats .opening-capacity-fit { min-width:92px; }
}
@media (prefers-reduced-motion:reduce) { .opening-readiness * { scroll-behavior:auto !important; } }

/* v7.13 main-phase decision readability polish */
.main-phase-context {
  display:grid;
  grid-template-columns:minmax(170px,.72fr) minmax(0,1.55fr);
  gap:10px;
  align-items:stretch;
  margin:-2px 0 10px;
  padding:8px 10px;
  border:1px solid #cfd8cf;
  border-radius:11px;
  background:linear-gradient(180deg,rgba(248,252,248,.96),rgba(242,248,243,.92));
}
.main-phase-context.no-plays { border-color:#d7d1c8; background:linear-gradient(180deg,rgba(251,249,246,.96),rgba(247,244,239,.92)); }
.main-phase-context-head { min-width:0; display:grid; align-content:center; gap:1px; padding-right:10px; border-right:1px solid rgba(78,104,82,.14); }
.main-phase-context-head > span { color:#60806a; font-size:6px; font-weight:1000; letter-spacing:.14em; }
.main-phase-context-head > strong { color:#314b38; font-size:10px; }
.main-phase-context.no-plays .main-phase-context-head > strong { color:#514b44; }
.main-phase-context-head > small { color:#76756f; font-size:6.5px; line-height:1.3; }
.main-phase-context-stats { min-width:0; display:grid; grid-template-columns:repeat(8,minmax(44px,1fr)); gap:5px; }
.main-phase-context-stats > span { min-width:0; display:grid; place-items:center; align-content:center; padding:4px 5px; border:1px solid rgba(90,91,82,.12); border-radius:8px; background:rgba(255,255,255,.7); }
.main-phase-context-stats small { max-width:100%; overflow:hidden; color:#7a7770; font-size:5px; font-weight:1000; letter-spacing:.05em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.main-phase-context-stats b { color:#35403a; font-size:11px; line-height:1.05; }
.main-phase-context-stats .playable { border-color:rgba(49,119,76,.24); background:rgba(237,248,240,.86); }
.main-phase-context-stats .playable b { color:#2f7048; }
.main-phase-context-stats .capacity-pressure { border-color:rgba(165,116,50,.25); background:rgba(253,247,236,.9); }
.main-phase-context-stats .capacity-pressure b { color:#8f642c; }
.card-block-hint {
  position:absolute;
  right:6px;
  bottom:6px;
  z-index:5;
  padding:3px 5px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:rgba(113,84,43,.9);
  color:#fff;
  font-size:5.5px;
  line-height:1;
  font-weight:950;
  letter-spacing:.07em;
  box-shadow:0 3px 9px rgba(31,25,18,.14);
  pointer-events:none;
}
.inspector-action-bar.quiet.availability-note { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:2px 8px; border-style:solid; border-color:#dfd2b8; background:#fdf9f1; }
.inspector-action-bar.quiet.availability-note > span { grid-column:1; grid-row:1; color:#8c672f; }
.inspector-action-bar.quiet.availability-note > strong { grid-column:2; grid-row:1; color:#4f463b; font-size:9px; }
.inspector-action-bar.quiet.availability-note > small { grid-column:2; grid-row:2; }
@media (max-width:800px) {
  .main-phase-context { grid-template-columns:1fr; gap:5px; padding:7px 8px; }
  .main-phase-context-head { padding:0 0 5px; border-right:0; border-bottom:1px solid rgba(78,104,82,.14); }
  .main-phase-context-stats { display:flex; overflow-x:auto; gap:4px; padding-bottom:1px; scrollbar-width:none; }
  .main-phase-context-stats::-webkit-scrollbar { display:none; }
  .main-phase-context-stats > span { flex:0 0 58px; min-height:37px; }
  .main-phase-context-stats .capacity-pressure { flex-basis:104px; }
  .inspector-action-bar.quiet.availability-note { grid-template-columns:1fr; gap:2px; }
  .inspector-action-bar.quiet.availability-note > span,
  .inspector-action-bar.quiet.availability-note > strong,
  .inspector-action-bar.quiet.availability-note > small { grid-column:1; grid-row:auto; }
}
@media (max-width:480px) {
  .main-phase-context-head > small { display:none; }
  .card-block-hint { right:4px; bottom:4px; padding:2px 4px; font-size:5px; }
}

/* v7.14 battle-phase decision readability polish */
.battle-phase-context {
  display:grid;
  grid-template-columns:minmax(190px,.8fr) minmax(0,1.4fr);
  gap:10px;
  align-items:stretch;
  margin:-2px 0 10px;
  padding:8px 10px;
  border:1px solid #dcc7bb;
  border-radius:11px;
  background:linear-gradient(180deg,rgba(253,249,246,.97),rgba(249,242,237,.93));
}
.battle-phase-context.no-attacks { border-color:#d8d3cd; background:linear-gradient(180deg,rgba(250,249,247,.97),rgba(246,244,241,.93)); }
.battle-phase-context-head { min-width:0; display:grid; align-content:center; gap:1px; padding-right:10px; border-right:1px solid rgba(135,78,58,.14); }
.battle-phase-context-head > span { color:#a15d47; font-size:6px; font-weight:1000; letter-spacing:.14em; }
.battle-phase-context-head > strong { color:#593c32; font-size:10px; }
.battle-phase-context.no-attacks .battle-phase-context-head > strong { color:#514b47; }
.battle-phase-context-head > small { color:#77716d; font-size:6.5px; line-height:1.3; }
.battle-phase-context-stats { min-width:0; display:grid; grid-template-columns:repeat(6,minmax(58px,1fr)); gap:5px; }
.battle-phase-context-stats > span { min-width:0; display:grid; place-items:center; align-content:center; padding:4px 5px; border:1px solid rgba(99,76,68,.12); border-radius:8px; background:rgba(255,255,255,.72); }
.battle-phase-context-stats small { max-width:100%; overflow:hidden; color:#7e756f; font-size:5px; font-weight:1000; letter-spacing:.05em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.battle-phase-context-stats b { color:#4e423d; font-size:11px; line-height:1.05; }
.battle-phase-context-stats .ready { border-color:rgba(166,72,54,.27); background:rgba(252,238,233,.9); }
.battle-phase-context-stats .ready b { color:#a04737; }
.battle-phase-context-stats .direct-ready { border-color:rgba(174,109,39,.26); background:rgba(255,246,232,.92); }
.battle-phase-context-stats .direct-ready b { color:#996021; }
.battle-phase-context-stats .battle-blocked { border-color:rgba(122,112,103,.2); background:rgba(244,242,239,.9); }
@media (max-width:800px) {
  .battle-phase-context { grid-template-columns:1fr; gap:5px; padding:7px 8px; }
  .battle-phase-context-head { padding:0 0 5px; border-right:0; border-bottom:1px solid rgba(135,78,58,.14); }
  .battle-phase-context-stats { display:flex; overflow-x:auto; gap:4px; padding-bottom:1px; scrollbar-width:none; }
  .battle-phase-context-stats::-webkit-scrollbar { display:none; }
  .battle-phase-context-stats > span { flex:0 0 72px; min-height:37px; }
}
@media (max-width:480px) {
  .battle-phase-context-head > small { display:none; }
}
\n\n/* v7.15 end-phase handoff readability polish */\n.end-phase-context {\n  display:grid;\n  grid-template-columns:minmax(190px,.8fr) minmax(0,1.4fr);\n  gap:10px;\n  align-items:stretch;\n  margin:-2px 0 10px;\n  padding:8px 10px;\n  border:1px solid #d7c9b2;\n  border-radius:11px;\n  background:linear-gradient(180deg,rgba(253,251,246,.97),rgba(248,245,237,.93));\n}\n.end-phase-context.handoff-ready { border-color:#b9d0bc; background:linear-gradient(180deg,rgba(248,252,247,.98),rgba(240,247,240,.94)); }\n.end-phase-context-head { min-width:0; display:grid; align-content:center; gap:1px; padding-right:10px; border-right:1px solid rgba(112,92,56,.14); }\n.end-phase-context-head > span { color:#8c713d; font-size:6px; font-weight:1000; letter-spacing:.14em; }\n.end-phase-context-head > strong { color:#554b3a; font-size:10px; }\n.end-phase-context.handoff-ready .end-phase-context-head > strong { color:#3f6848; }\n.end-phase-context-head > small { color:#777169; font-size:6.5px; line-height:1.3; }\n.end-phase-context-stats { min-width:0; display:grid; grid-template-columns:repeat(6,minmax(58px,1fr)); gap:5px; }\n.end-phase-context-stats > span { min-width:0; display:grid; place-items:center; align-content:center; padding:4px 5px; border:1px solid rgba(99,84,62,.12); border-radius:8px; background:rgba(255,255,255,.72); }\n.end-phase-context-stats small { max-width:100%; overflow:hidden; color:#7e776e; font-size:5px; font-weight:1000; letter-spacing:.05em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }\n.end-phase-context-stats b { color:#4f493f; font-size:11px; line-height:1.05; }\n.end-phase-context-stats .end-warning { border-color:rgba(171,103,55,.28); background:rgba(255,244,233,.92); }\n.end-phase-context-stats .end-warning b { color:#9a5e31; }\n.end-phase-context-stats .selection-ready,\n.end-phase-context-stats .handoff-stat-ready { border-color:rgba(72,126,82,.27); background:rgba(237,248,239,.92); }\n.end-phase-context-stats .selection-ready b,\n.end-phase-context-stats .handoff-stat-ready b { color:#3f7549; }\n.hand-limit-decision.selection-ready { border-color:rgba(72,126,82,.25); }\n@media (max-width:800px) {\n  .end-phase-context { grid-template-columns:1fr; gap:5px; padding:7px 8px; }\n  .end-phase-context-head { padding:0 0 5px; border-right:0; border-bottom:1px solid rgba(112,92,56,.14); }\n  .end-phase-context-stats { display:flex; overflow-x:auto; gap:4px; padding-bottom:1px; scrollbar-width:none; }\n  .end-phase-context-stats::-webkit-scrollbar { display:none; }\n  .end-phase-context-stats > span { flex:0 0 72px; min-height:37px; }\n}\n@media (max-width:480px) {\n  .end-phase-context-head > small { display:none; }\n}\n
/* v7.16 response + decision readability polish */
.response-desk,
.decision-desk {
  display:grid;
  grid-template-columns:minmax(190px,.9fr) minmax(170px,.8fr) minmax(0,1.15fr);
  gap:10px;
  align-items:stretch;
  margin:-2px 0 10px;
  padding:9px 11px;
  border:1px solid #d6c48e;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,250,235,.97),rgba(249,242,220,.92));
  box-shadow:0 5px 16px rgba(61,49,20,.05);
}
.response-desk.waiting-priority { border-color:#d2cbc1; background:linear-gradient(180deg,rgba(250,249,247,.96),rgba(243,240,235,.92)); }
.response-desk-head,
.decision-desk-head { display:grid; align-content:center; gap:1px; min-width:0; padding-right:10px; border-right:1px solid rgba(112,99,81,.14); }
.response-desk-head > span,
.decision-desk-head > span { font-size:6px; font-weight:1000; letter-spacing:.14em; color:#927326; }
.response-desk-head > strong,
.decision-desk-head > strong { font-size:10px; line-height:1.2; color:#3e382a; }
.response-desk-head > small,
.decision-desk-head > small { font-size:6px; line-height:1.35; color:#817a70; }
.response-desk-focus { min-width:0; display:grid; align-content:center; gap:1px; padding-right:10px; border-right:1px solid rgba(112,99,81,.12); }
.response-desk-focus small { color:#917532; font-size:5.5px; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.response-desk-focus strong { overflow:hidden; color:#333735; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.response-desk-focus em { overflow:hidden; color:#817b72; font-size:6px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.response-desk-stats,
.decision-desk-stats { display:grid; grid-template-columns:repeat(4,minmax(58px,1fr)); gap:6px; min-width:0; }
.response-desk-stats > span,
.decision-desk-stats > span { display:grid; align-content:center; justify-items:center; min-width:0; padding:5px 6px; border:1px solid rgba(112,99,81,.12); border-radius:9px; background:rgba(255,255,255,.68); text-align:center; }
.response-desk-stats small,
.decision-desk-stats small { font-size:5.3px; font-weight:1000; letter-spacing:.075em; color:#817b72; white-space:nowrap; }
.response-desk-stats b,
.decision-desk-stats b { max-width:100%; overflow:hidden; font-size:10px; line-height:1.05; color:#373b3b; text-overflow:ellipsis; white-space:nowrap; }
.response-desk-stats .priority-live,
.response-desk-stats .response-ready,
.response-desk-stats .pass-ready { border-color:#d6bd73; background:#fffaf0; }
.response-desk-stats .priority-live b,
.response-desk-stats .response-ready b,
.response-desk-stats .pass-ready b { color:#86671d; }
.decision-desk { grid-template-columns:minmax(210px,1fr) minmax(0,1.3fr); border-color:#b8acd0; background:linear-gradient(180deg,rgba(250,247,255,.97),rgba(243,238,250,.92)); }
.decision-desk-head > span { color:#725493; }
.decision-desk-stats .decision-required,
.decision-desk-stats .selection-live { border-color:#c7b5dc; background:#fbf7ff; }
.decision-desk-stats .decision-required b,
.decision-desk-stats .selection-live b { color:#674486; }
@media (max-width:800px) {
  .response-desk,
  .decision-desk { grid-template-columns:1fr; gap:7px; padding:8px 9px; }
  .response-desk-head,
  .decision-desk-head,
  .response-desk-focus { padding-right:0; padding-bottom:6px; border-right:0; border-bottom:1px solid rgba(112,99,81,.12); }
  .response-desk-stats,
  .decision-desk-stats { display:flex; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x proximity; }
  .response-desk-stats > span,
  .decision-desk-stats > span { flex:0 0 92px; scroll-snap-align:start; }
}


/* v7.17 battlefield live-state scan polish */
.battlefield-scan {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin:-3px 0 1px;
  padding:4px 6px;
  border:1px solid color-mix(in srgb,var(--dept-accent,#8b8177) 16%,#ddd6cd);
  border-radius:9px;
  background:color-mix(in srgb,var(--dept-soft,#f6f2ec) 62%,rgba(255,255,255,.76));
}
.battlefield-scan-label {
  flex:0 0 auto;
  color:color-mix(in srgb,var(--dept-accent,#756d65) 72%,#59544e);
  font-size:5.5px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.12em;
}
.battlefield-scan-items {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  flex-wrap:wrap;
}
.battlefield-scan-items > span {
  display:inline-flex;
  align-items:baseline;
  gap:3px;
  min-height:18px;
  padding:3px 5px;
  border:1px solid rgba(111,101,91,.12);
  border-radius:999px;
  background:rgba(255,255,255,.66);
  white-space:nowrap;
}
.battlefield-scan-items small { color:#80786f; font-size:5px; line-height:1; font-weight:950; letter-spacing:.06em; }
.battlefield-scan-items b { color:#4d4842; font-size:6.5px; line-height:1; }
.battlefield-scan-items .scan-ready { border-color:#a8ccb3; background:#edf8f0; }
.battlefield-scan-items .scan-ready b { color:#286b40; }
.battlefield-scan-items .scan-ability { border-color:#c7b2dc; background:#f5effb; }
.battlefield-scan-items .scan-ability b { color:#67468a; }
.battlefield-scan-items .scan-warning { border-color:#e4c77e; background:#fff7dc; }
.battlefield-scan-items .scan-warning b { color:#795b17; }
.battlefield-scan-items .scan-set { border-color:#d9aaa3; background:#fcedea; }
.battlefield-scan-items .scan-set b { color:#8e453b; }
.battlefield-scan-items .scan-power { border-color:#b9c9b6; background:#f1f7ef; }
.battlefield-scan-items .scan-power b { color:#446c43; }
.battlefield-scan-items .scan-pending { border-color:#c9c1b6; background:#f5f2ed; }
.runtime-badge.attack-ready-state { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:800px) {
  .battlefield-scan { gap:5px; padding:4px 5px; overflow:hidden; }
  .battlefield-scan-label { font-size:5px; }
  .battlefield-scan-items { flex:1 1 auto; flex-wrap:nowrap; overflow-x:auto; padding-bottom:1px; scrollbar-width:none; }
  .battlefield-scan-items::-webkit-scrollbar { display:none; }
  .battlefield-scan-items > span { flex:0 0 auto; min-height:17px; padding:3px 5px; }
}
@media (max-width:480px) {
  .battlefield-scan { margin-top:-2px; }
}

/* v7.18 board action-focus polish */
.battlefield-surface.board-focus-active .card[data-card-ref] {
  transition:opacity .14s ease, filter .14s ease, box-shadow .14s ease;
}
.battlefield-surface.board-focus-active .card.board-focus-muted {
  opacity:.42;
  filter:saturate(.55) contrast(.94);
}
.battlefield-surface.board-focus-active .card.board-focus-source {
  z-index:12;
  opacity:1;
  filter:none;
  box-shadow:0 0 0 3px rgba(168,116,42,.34), 0 8px 22px rgba(86,66,39,.18);
}
.battlefield-surface.board-focus-active .card.board-focus-target {
  z-index:11;
  opacity:1;
  filter:none;
  box-shadow:0 0 0 3px rgba(62,126,87,.34), 0 8px 20px rgba(47,92,65,.16);
}
.player-board.board-focus-direct {
  box-shadow:inset 0 0 0 2px rgba(168,116,42,.34), 0 12px 30px rgba(83,59,27,.10);
}
.card.board-focus-capable:focus-visible {
  outline:2px solid rgba(74,111,86,.46);
  outline-offset:2px;
}
@media (hover:none), (pointer:coarse) {
  .battlefield-surface.board-focus-active .card.board-focus-muted { opacity:1; filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  .battlefield-surface.board-focus-active .card[data-card-ref] { transition:none; }
}

/* v7.19 current-Power combat read polish */
.combat-power-read {
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.55fr);
  gap:10px;
  align-items:stretch;
  margin:-5px 0 10px;
  padding:8px 10px;
  border:1px solid rgba(151,91,58,.24);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(255,249,245,.97),rgba(248,241,236,.93));
  box-shadow:0 5px 16px rgba(77,45,29,.045);
}
.combat-power-read.hidden { display:none; }
.combat-power-read-head { min-width:0; display:grid; align-content:center; gap:1px; padding-right:10px; border-right:1px solid rgba(151,91,58,.13); }
.combat-power-read-head > span { color:#a05b42; font-size:6px; font-weight:1000; letter-spacing:.14em; }
.combat-power-read-head > strong { overflow:hidden; color:#553d34; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.combat-power-read-head > small { color:#7f746e; font-size:6.3px; line-height:1.3; }
.combat-power-read-options { min-width:0; display:flex; gap:6px; overflow-x:auto; padding-bottom:1px; scrollbar-width:none; }
.combat-power-read-options::-webkit-scrollbar { display:none; }
.combat-read-option { flex:0 0 minmax(116px,1fr); min-width:116px; display:grid; align-content:center; gap:1px; padding:5px 7px; border:1px solid rgba(104,84,75,.13); border-radius:8px; background:rgba(255,255,255,.72); }
.combat-read-option small { max-width:150px; overflow:hidden; color:#7b716c; font-size:5.3px; font-weight:1000; letter-spacing:.055em; text-overflow:ellipsis; white-space:nowrap; }
.combat-read-option b { color:#443d39; font-size:11px; line-height:1.05; }
.combat-read-option em { color:#766d68; font-size:5.7px; font-style:normal; line-height:1.15; }
.combat-read-option.ahead { border-color:rgba(71,128,80,.28); background:rgba(240,249,241,.9); }
.combat-read-option.ahead b,.combat-read-option.ahead em { color:#41734a; }
.combat-read-option.even { border-color:rgba(152,119,58,.27); background:rgba(253,248,236,.92); }
.combat-read-option.even b,.combat-read-option.even em { color:#82672c; }
.combat-read-option.behind { border-color:rgba(164,79,66,.27); background:rgba(253,241,239,.92); }
.combat-read-option.behind b,.combat-read-option.behind em { color:#974f44; }
.combat-read-option.direct { border-color:rgba(166,106,41,.27); background:rgba(255,247,234,.94); }
.combat-read-option.direct b,.combat-read-option.direct em { color:#946024; }
.runtime-badge.combat-edge { border-width:1px; }
.runtime-badge.combat-edge.ahead { border-color:rgba(66,126,75,.36); background:#e9f6eb; color:#396d42; }
.runtime-badge.combat-edge.even { border-color:rgba(151,118,54,.34); background:#fbf4e3; color:#80662f; }
.runtime-badge.combat-edge.behind { border-color:rgba(158,76,63,.34); background:#f9e9e7; color:#914c42; }
@media (max-width:800px) {
  .combat-power-read { grid-template-columns:1fr; gap:5px; padding:7px 8px; }
  .combat-power-read-head { padding:0 0 5px; border-right:0; border-bottom:1px solid rgba(151,91,58,.13); }
  .combat-power-read-options { scroll-snap-type:x proximity; }
  .combat-read-option { flex:0 0 128px; scroll-snap-align:start; }
}
@media (max-width:480px) {
  .combat-power-read-head > small { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .combat-power-read { scroll-behavior:auto; }
}

/* v7.20 resolution trace + cause/effect readability polish */
.resolution-trace {
  display:grid;
  grid-template-columns:minmax(190px,.72fr) minmax(0,1.65fr);
  gap:10px;
  align-items:stretch;
  margin:-3px 0 10px;
  padding:8px 10px;
  border:1px solid rgba(89,102,116,.21);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(249,251,253,.97),rgba(242,246,249,.93));
  box-shadow:0 5px 16px rgba(43,55,67,.045);
}
.resolution-trace.trace-battle { border-color:rgba(153,91,60,.23); background:linear-gradient(180deg,rgba(255,249,245,.97),rgba(248,241,236,.93)); }
.resolution-trace.trace-chain { border-color:rgba(113,87,145,.22); background:linear-gradient(180deg,rgba(251,248,255,.97),rgba(245,240,250,.93)); }
.resolution-trace-head { min-width:0; display:grid; align-content:center; gap:1px; padding-right:10px; border-right:1px solid rgba(93,101,109,.13); }
.resolution-trace-head > span { color:#667789; font-size:6px; font-weight:1000; letter-spacing:.14em; }
.trace-battle .resolution-trace-head > span { color:#9a5d43; }
.trace-chain .resolution-trace-head > span { color:#725493; }
.resolution-trace-head > strong { color:#3f474d; font-size:10px; }
.resolution-trace-head > small { color:#7a7f83; font-size:6.1px; line-height:1.3; }
.resolution-trace-steps { min-width:0; display:flex; align-items:stretch; gap:6px; overflow-x:auto; padding-bottom:1px; scrollbar-width:none; }
.resolution-trace-steps::-webkit-scrollbar { display:none; }
.resolution-trace-step { position:relative; flex:0 0 minmax(118px,1fr); min-width:118px; display:grid; align-content:center; gap:1px; padding:5px 7px; border:1px solid rgba(94,102,109,.12); border-radius:8px; background:rgba(255,255,255,.72); }
.resolution-trace-step:not(:last-child)::after { content:'›'; position:absolute; right:-6px; top:50%; z-index:2; transform:translate(50%,-50%); color:#9b9c99; font-size:11px; font-weight:900; }
.resolution-trace-step small { color:#7b8085; font-size:5px; font-weight:1000; letter-spacing:.06em; }
.resolution-trace-step b { max-width:160px; overflow:hidden; color:#42494e; font-size:7px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.resolution-trace-step em { max-width:170px; overflow:hidden; color:#777c80; font-size:5.5px; font-style:normal; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.resolution-trace-step.tone-negated { border-color:rgba(158,76,63,.27); background:rgba(253,241,239,.92); }
.resolution-trace-step.tone-negated b { color:#914c42; }
.resolution-trace-step.tone-delayed { border-color:rgba(151,118,54,.28); background:rgba(252,247,233,.94); }
.resolution-trace-step.tone-delayed b { color:#80662f; }
.resolution-trace-step.tone-prevented { border-color:rgba(70,125,80,.26); background:rgba(239,248,241,.93); }
.resolution-trace-step.tone-prevented b { color:#3d7247; }
.resolution-trace-step.tone-impact,
.resolution-trace-step.tone-destroyed { border-color:rgba(166,92,66,.24); background:rgba(252,243,239,.93); }
.resolution-trace-step.tone-impact b,
.resolution-trace-step.tone-destroyed b { color:#93543f; }
.resolution-trace-step.tone-resolved { border-color:rgba(76,123,92,.24); background:rgba(241,248,243,.94); }
.resolution-trace-step.tone-resolved b { color:#416e4d; }
.resolution-trace-step.tone-redirected { border-color:rgba(111,93,151,.24); background:rgba(247,243,252,.94); }
.resolution-trace-step.tone-redirected b { color:#6d5690; }
@media (max-width:800px) {
  .resolution-trace { grid-template-columns:1fr; gap:5px; padding:7px 8px; }
  .resolution-trace-head { padding:0 0 5px; border-right:0; border-bottom:1px solid rgba(93,101,109,.13); }
  .resolution-trace-steps { scroll-snap-type:x proximity; }
  .resolution-trace-step { flex:0 0 136px; scroll-snap-align:start; }
}
@media (max-width:480px) {
  .resolution-trace-head > small { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .resolution-trace-steps { scroll-behavior:auto; }
}


/* v7.21 match feed prioritization + event grouping polish */
.match-feed-item { grid-template-columns:36px minmax(0,1fr) auto; }
.match-feed-item-head { min-width:0; display:flex; align-items:center; gap:5px; }
.match-feed-item-head strong { min-width:0; flex:1 1 auto; }
.match-feed-signal {
  flex:0 0 auto;
  padding:2px 4px;
  border-radius:999px;
  background:#efede9;
  color:#797268;
  font-size:5.5px;
  font-style:normal;
  font-weight:1000;
  letter-spacing:.09em;
  line-height:1;
}
.match-feed-signal.signal-key { background:#efe7d8; color:#795a2f; }
.match-feed-signal.signal-action { background:#e7edf0; color:#536b78; }
.match-feed-signal.signal-flow { background:#efefed; color:#818079; }
.match-feed-item.importance-key { border-color:#ddd0bb; box-shadow:inset 3px 0 rgba(143,102,49,.32); }
.match-feed-grouped {
  align-self:end;
  justify-self:end;
  margin:0 1px 1px 0;
  color:#91887d;
  font-size:6px;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}
.match-feed-context { margin-top:6px; border-top:1px solid rgba(106,96,83,.10); padding-top:5px; }
.match-feed-context > summary { cursor:pointer; color:#7c756c; font-size:7px; font-weight:950; letter-spacing:.07em; }
.match-feed-context > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:6px; }
.match-feed-context > small { display:block; margin-top:5px; color:#989087; font-size:6.5px; }
.match-feed-item.compact { min-height:40px; padding:5px 6px; background:rgba(255,255,255,.5); box-shadow:none; }
.match-feed-item.compact .match-feed-live { display:none; }
.match-feed-item.compact .match-feed-code { width:30px; min-height:23px; }
@media (max-width:900px) {
  .match-feed-context > div { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .match-feed-item.latest { grid-template-columns:27px minmax(0,1fr) auto; }
  .match-feed-item.latest .match-feed-signal { display:inline-flex; }
  .match-feed-item.latest .match-feed-grouped { display:none; }
  .match-feed-context { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .match-feed-context > summary { scroll-behavior:auto; }
}

/* v7.22 match context stack + clutter control polish */
.match-context-stack {
  display:grid;
  gap:6px;
  margin:-2px 0 10px;
}
.match-context-stack > .opening-readiness,
.match-context-stack > .main-phase-context,
.match-context-stack > .battle-phase-context,
.match-context-stack > .end-phase-context,
.match-context-stack > .response-desk,
.match-context-stack > .decision-desk,
.match-context-stack > .combat-power-read,
.match-context-stack > .resolution-trace {
  margin:0;
}
.match-context-stack.context-decision,
.match-context-stack.context-response {
  position:relative;
  z-index:3;
}
.match-feed.context-priority .match-feed-item:nth-child(n+2) { display:none; }
.match-feed.context-priority .match-feed-list { grid-template-columns:minmax(0,1fr); }
.match-feed.context-priority .match-feed-context { display:none; }
.match-feed.context-priority { opacity:.88; }
@media (max-width:760px) {
  .match-context-stack { gap:4px; margin:-1px 0 6px; }
  .match-feed.context-priority { margin-top:2px; opacity:.82; }
  .match-feed.context-priority .match-feed-item.latest { display:grid; }
}
@media (prefers-reduced-motion:reduce) {
  .match-context-stack *, .match-feed.context-priority { transition:none !important; }
}

/* v7.23 unified selection + interaction state polish */
.interaction-role-panel { display:grid; gap:7px; }
.interaction-role-legend { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:6px; font-weight:1000; letter-spacing:.12em; }
.interaction-role-legend span { display:inline-flex; align-items:center; min-height:19px; padding:3px 7px; border-radius:999px; border:1px solid transparent; }
.interaction-role-legend i { color:#a29a90; font-style:normal; }
.interaction-role-legend .role-source { color:#83531b; background:#fff5df; border-color:#e1bd75; }
.interaction-role-legend .role-target { color:#245f9a; background:#eef6ff; border-color:#9fc2e6; }
.interaction-role-legend .role-selected { color:#6f756f; background:#f1f2ef; border-color:#cfd3cd; }
.interaction-role-legend .role-selected.ready { color:#276a46; background:#edf8f1; border-color:#9cc9ad; }

.card.interaction-source { opacity:1 !important; filter:none !important; position:relative; box-shadow:0 14px 30px rgba(160,105,31,.18),0 0 0 4px rgba(187,130,46,.42) !important; }
.card.interaction-source::before { content:'SOURCE'; position:absolute; z-index:11; left:50%; top:-12px; transform:translateX(-50%); padding:3px 7px; border-radius:999px; background:#a46c22; color:#fff; font-size:6px; font-weight:950; letter-spacing:.12em; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.game-shell.interaction-attack .card.interaction-source::before { content:'ATTACK SOURCE'; }
.card.target-selected::before { content:'SELECTED'; background:#277548; }

.own-hand.selection-mode .card:not(.selection-candidate) { opacity:.42; filter:saturate(.55); }
.own-hand.selection-mode .card.selection-candidate { opacity:1; filter:none; box-shadow:0 8px 18px rgba(50,88,122,.10),0 0 0 2px rgba(69,111,150,.16); }
.own-hand.selection-mode .card.selection-selected { opacity:1; filter:none; box-shadow:0 18px 34px rgba(38,91,62,.18),0 0 0 4px rgba(42,123,75,.42); }
.own-hand .card.selection-kind-archive.selection-selected::before,
.own-hand .card.selection-kind-choice.selection-selected::before { position:absolute; z-index:11; left:50%; top:-12px; transform:translateX(-50%); padding:3px 7px; border-radius:999px; color:#fff; font-size:6px; font-weight:950; letter-spacing:.12em; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.own-hand .card.selection-kind-archive.selection-selected::before { content:'ARCHIVE'; background:#8a5a35; }
.own-hand .card.selection-kind-choice.selection-selected::before { content:'SELECTED'; background:#277548; }

@media (max-width:760px) {
  .interaction-role-legend { gap:4px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:1px; }
  .interaction-role-legend span { flex:0 0 auto; }
  .card.interaction-source::before,
  .own-hand .card.selection-kind-archive.selection-selected::before,
  .own-hand .card.selection-kind-choice.selection-selected::before { top:-9px; font-size:5px; padding:2px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .card.interaction-source,.own-hand.selection-mode .card.selection-candidate,.own-hand.selection-mode .card.selection-selected { transition:none !important; animation:none !important; }
}



/* v7.24 action confirmation + misclick protection polish */
.phase-risk-pill {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 7px;
  border:1px solid #ddb777;
  border-radius:999px;
  background:#fff5df;
  color:#86551e;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.1em;
  white-space:nowrap;
}
.phase-button.guarded { box-shadow:inset 0 0 0 1px rgba(145,91,27,.28); }
.action-confirmation-dock {
  border-color:#d4ac70;
  border-left:4px solid #a96a27;
  background:rgba(255,249,237,.97);
}
.action-confirmation-dock .command-hint > span { background:#f5dfb6; color:#784819; }
.action-confirmation-dock .command-hint > strong { color:#5e3b1b; }
.confirmation-buttons { align-items:stretch; }
.confirmation-buttons button { min-height:38px; }
.guarded-confirm { box-shadow:inset 0 0 0 1px rgba(100,58,17,.24); }
@media (max-width:760px) {
  .phase-risk-pill { min-height:20px; padding:2px 5px; font-size:5px; }
  .confirmation-buttons { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); width:100%; }
  .confirmation-buttons button { width:100%; min-width:0; }
}
@media (prefers-reduced-motion:reduce) {
  .action-confirmation-dock,.phase-button.guarded,.phase-risk-pill { transition:none !important; animation:none !important; }
}


/* v7.25 action commit + server acknowledgement polish */
.intent-commit-status {
  margin:6px auto 0;
  max-width:960px;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border:1px solid #c8d1d8;
  border-left:4px solid #658096;
  border-radius:11px;
  background:rgba(248,251,253,.96);
  box-shadow:0 7px 20px rgba(34,45,55,.08);
}
.intent-commit-status > div { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; column-gap:8px; row-gap:1px; }
.intent-commit-status span { font-size:6px; font-weight:1000; letter-spacing:.12em; color:#587084; }
.intent-commit-status strong { min-width:0; font-size:10px; color:#314552; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.intent-commit-status small { grid-column:1 / -1; color:#68737b; font-size:8px; line-height:1.25; }
.intent-commit-status.tone-accepted { border-color:#a9ccb5; border-left-color:#347b51; background:rgba(244,251,246,.97); }
.intent-commit-status.tone-accepted span,.intent-commit-status.tone-accepted strong { color:#2e6b48; }
.intent-commit-status.tone-rejected { border-color:#d9aaa5; border-left-color:#a5443c; background:rgba(253,246,245,.97); }
.intent-commit-status.tone-rejected span,.intent-commit-status.tone-rejected strong { color:#913a34; }
.intent-commit-status.tone-resyncing { border-color:#e0c58e; border-left-color:#9a6b24; background:rgba(255,250,239,.97); }
.intent-commit-status.tone-resyncing span,.intent-commit-status.tone-resyncing strong { color:#80571c; }
.commit-icon,.commit-spinner { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; }
.commit-icon { background:#e1f2e7; color:#287046; font-size:10px; }
.tone-rejected .commit-icon { background:#f7e3e1; color:#963d36; }
.commit-spinner { border:2px solid #c2d1dc; border-top-color:#466e8c; animation:intent-spin .7s linear infinite; }
@media (max-width:760px) {
  .intent-commit-status { margin:4px 3px 0; min-height:36px; padding:6px 8px; gap:7px; }
  .intent-commit-status > div { grid-template-columns:1fr; gap:0; }
  .intent-commit-status strong { font-size:9px; }
  .intent-commit-status small { display:none; }
  .commit-icon,.commit-spinner { width:17px; height:17px; }
}
@media (prefers-reduced-motion:reduce) {
  .intent-commit-status,.commit-spinner { transition:none !important; animation:none !important; }
}

/* v7.26 — Power & Modifier Breakdown */
.power-breakdown { margin-top:10px; border-top:1px solid #d8d2c8; padding-top:9px; display:grid; gap:6px; }
.power-breakdown-head,.power-breakdown-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.power-breakdown-head span { font-size:10px; font-weight:900; letter-spacing:.11em; color:#6f685e; }
.power-breakdown-head strong { font-size:13px; }
.power-breakdown-row { padding:7px 8px; border-radius:9px; background:#fff; border:1px solid #e6e0d7; }
.power-breakdown-row span { display:grid; gap:2px; min-width:0; }
.power-breakdown-row b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.power-breakdown-row small { font-size:9px; color:#777066; text-transform:uppercase; letter-spacing:.04em; }
.power-breakdown-row strong { font-size:15px; }
.power-breakdown-row.positive strong { color:#267247; }
.power-breakdown-row.negative strong { color:#ad3f39; }
.power-breakdown-row.printed { background:#f5f2ec; }
.power-breakdown-empty { font-size:11px; color:#777066; padding:5px 2px; }
@media (max-width:760px) { .power-breakdown-row { padding:6px 7px; } .power-breakdown-row b { font-size:11px; } }

/* v7.27 — Active Effect & Status Provenance */
.live-status-provenance { margin-top:10px; padding-top:9px; border-top:1px solid #d8d2c8; display:grid; gap:6px; }
.live-status-head,.live-status-row { display:flex; justify-content:space-between; gap:12px; }
.live-status-head { align-items:center; }
.live-status-head span { font-size:10px; font-weight:900; letter-spacing:.11em; color:#6f685e; }
.live-status-head strong { min-width:24px; text-align:center; border-radius:999px; background:#e9e4dc; font-size:11px; padding:3px 6px; }
.live-status-row { align-items:flex-start; border:1px solid #e6e0d7; background:#fff; border-radius:9px; padding:7px 8px; }
.live-status-row span { display:grid; gap:2px; min-width:0; }
.live-status-row b { font-size:11px; }
.live-status-row small { font-size:9px; color:#756f66; }
.live-status-row em { max-width:48%; font-size:10px; color:#5f5a53; text-align:right; font-style:normal; }
.live-status-row.kind-destruction_shield,.live-status-row.kind-scheduled { border-style:dashed; }
.live-status-row.kind-attack_restricted { background:#fff7f4; }
.live-status-empty { font-size:11px; color:#777066; padding:5px 2px; }
@media (max-width:760px) { .live-status-row { display:grid; gap:4px; } .live-status-row em { max-width:none; text-align:left; } }

/* v7.28 — Match Review / Replay Polish II */
.replay-moment-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:0 14px 12px; }
.replay-moment-summary span { display:grid; gap:2px; background:#f0ece5; border-radius:8px; padding:7px 9px; }
.replay-moment-summary small { font-size:7px; font-weight:950; letter-spacing:.08em; color:#7c766d; }
.replay-moment-summary b { font-size:13px; }
.replay-turn-jumps { display:flex; gap:5px; align-items:center; padding:8px 14px; overflow:auto; border-top:1px solid #e1e4e5; background:#faf9f6; }
.replay-turn-jumps > span { flex:0 0 auto; font-size:7px; font-weight:950; letter-spacing:.1em; color:#817b73; margin-right:3px; }
.replay-turn-jumps button { flex:0 0 auto; min-height:25px; padding:4px 8px; border-radius:999px; font-size:8px; }
.replay-turn-jumps button.active { border-color:#66727b; box-shadow:inset 0 0 0 1px #66727b; }
.replay-event.moment { border-left-width:4px; }
.replay-event.moment.tone-battle { border-left-color:#9b6141; }
.replay-event.moment.tone-response { border-left-color:#6a658f; }
.replay-event.moment.tone-effect { border-left-color:#507764; }
.replay-event.moment.tone-result { border-left-color:#343b40; background:#f2f1ed; }
.replay-event-copy em { font-size:9px; line-height:1.35; color:#5f5a54; font-style:normal; white-space:normal; }
@media (max-width:760px) { .replay-moment-summary { grid-template-columns:1fr 1fr; } .replay-turn-jumps { padding-inline:10px; } .replay-event-copy strong { white-space:normal; } }

/* v7.29 — Playtest Session Flow */
.match-result-actions { flex-wrap:wrap; }
.match-result-actions #resultAlternateRematch { border-style:dashed; }
.match-result-actions #resultChangeDeck { background:#f5f2ec; }
@media (max-width:760px) { .match-result-actions { display:grid; grid-template-columns:1fr 1fr; } .match-result-actions .primary { grid-column:1 / -1; } }


/* v7.30 — Alpha hardening: responsive, focus, reduced-motion, stale-state safety */
.game-shell,.game-main,.battlefield-surface,.player-board,.player-panel,.zone-row,.match-result-panel,.command-dock,.match-context-stack { min-width:0; }
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.card[tabindex]:focus-visible {
  outline:3px solid rgba(44,102,151,.36);
  outline-offset:3px;
}

@media (min-width:761px) and (max-width:1180px) {
  .game-main { padding-inline:10px; }
  .turn-banner,.phase-track,.match-context-stack,.match-feed,.command-dock,.intent-commit-status { max-width:calc(100vw - 32px); }
  .match-result-actions { flex-wrap:wrap; }
  .match-result-actions button { flex:1 1 150px; min-width:0; }
  .replay-moment-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inspector-action-bar { min-width:0; }
  .inspector-actions button { min-width:0; }
}

@media (max-width:950px) and (orientation:landscape) {
  .game-main { padding-top:5px; }
  .turn-banner { min-height:36px; }
  .match-context-stack { gap:3px; margin-bottom:5px; }
  .mobile-board-nav { margin-block:4px; }
  .match-feed { margin-block:4px; }
  .match-result-panel { max-height:calc(100vh - 24px); overflow:auto; }
  .match-result-actions { position:sticky; bottom:0; background:inherit; padding-bottom:max(4px,env(safe-area-inset-bottom)); }
  .intent-commit-status { min-height:34px; }
}

@media (prefers-reduced-motion:reduce) {
  html:focus-within { scroll-behavior:auto !important; }
  .power-breakdown *,
  .live-status-provenance *,
  .replay-moment-summary *,
  .replay-turn-jumps *,
  .match-result-actions *,
  .intent-commit-status *,
  .match-context-stack * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* v7.33 — Human playtest capture */
.human-playtest-capture{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;display:grid;gap:10px;background:rgba(255,255,255,.025)}
.human-playtest-head{display:grid;gap:2px}.human-playtest-head span,.human-playtest-row b,.human-playtest-note span,.human-playtest-cards span{font-size:11px;letter-spacing:.08em}.human-playtest-head small{opacity:.72}
.human-playtest-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.human-playtest-row b{min-width:92px}.human-playtest-row button.selected{outline:2px solid currentColor;font-weight:800}
.human-playtest-note,.human-playtest-cards{display:grid;gap:4px}.human-playtest-note textarea{min-height:68px;resize:vertical}.human-playtest-save{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.human-playtest-capture{padding:10px}.human-playtest-row{overflow-x:auto;flex-wrap:nowrap}.human-playtest-row b{min-width:82px}}

/* v7.39 — Visual Design Batch I: premium tabletop, office-material cards, T0–T3 finishes */
:root {
  --ocg-bg:#111512;
  --ocg-bg-2:#1b211d;
  --ocg-ink:#171815;
  --ocg-paper:#efeade;
  --ocg-paper-2:#ddd6c8;
  --ocg-metal:#6c716c;
  --ocg-metal-dark:#242a26;
  --ocg-brass:#b48a3c;
  --ocg-brass-hi:#e5c66e;
  --ocg-line:rgba(224,214,194,.25);
  --ocg-shadow:0 18px 50px rgba(0,0,0,.34);
  color-scheme:light;
}
body {
  background:
    radial-gradient(circle at 18% 0%,rgba(96,119,98,.16),transparent 30%),
    radial-gradient(circle at 82% 10%,rgba(141,90,52,.12),transparent 28%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.009) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#171b18 0%,#0f1210 100%);
  background-attachment:fixed;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.28;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.05) 0 1px,transparent 1.2px),
    radial-gradient(circle at 74% 62%,rgba(255,255,255,.035) 0 1px,transparent 1.2px);
  background-size:19px 19px,27px 27px;
}
.topbar {
  min-height:62px;
  color:#eee8dc;
  border-bottom:1px solid rgba(202,177,119,.28);
  background:linear-gradient(180deg,rgba(24,29,26,.96),rgba(14,18,16,.92));
  box-shadow:0 7px 30px rgba(0,0,0,.2),inset 0 -1px rgba(255,255,255,.03);
}
.topbar strong { font-family:"Arial Narrow","Bahnschrift SemiCondensed",Inter,sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:15px; }
.topbar .muted { color:#9ca299; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.topbar button { color:#e9e1d2; border-color:rgba(224,210,178,.22); }
.app { max-width:1540px; padding:18px 20px 28px; }
.box {
  border-color:#b8ad9c;
  background:
    linear-gradient(145deg,rgba(255,255,255,.78),transparent 42%),
    linear-gradient(180deg,#eee9df,#ded6ca);
  box-shadow:0 18px 50px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.75),inset 0 0 0 1px rgba(72,58,43,.04);
}
button {
  border-color:#7c776f;
  background:linear-gradient(180deg,#faf8f3,#e8e2d8);
  box-shadow:inset 0 1px rgba(255,255,255,.84),0 2px 5px rgba(0,0,0,.08);
  font-weight:750;
}
button.primary {
  border-color:#151916;
  background:linear-gradient(180deg,#2f3832,#151a17);
  color:#fff8e9;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 15px rgba(0,0,0,.18);
}
.field input,.field select {
  border-color:#a9a091;
  background:rgba(255,255,255,.76);
  box-shadow:inset 0 1px 3px rgba(51,43,32,.08);
}

/* Card object language: one family, four office-material personalities. */
.card,
.catalog-card-face {
  --type-color:#65716b;
  --type-dark:#29312d;
  --type-soft:#e5e4de;
  color:#20231f;
  border-color:#7d827c;
  background:
    linear-gradient(110deg,rgba(255,255,255,.62),transparent 20% 72%,rgba(255,255,255,.18)),
    linear-gradient(180deg,#f2efe7,#dcd8ce);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 0 0 3px rgba(56,58,52,.07),
    0 5px 12px rgba(0,0,0,.18);
}
.card.type-employee,.catalog-card-face.type-employee { --type-color:#2e7685; --type-dark:#183f47; --type-soft:#dce8e9; }
.card.type-system,.catalog-card-face.type-system { --type-color:#b5842f; --type-dark:#55431f; --type-soft:#eee6cf; }
.card.type-action,.catalog-card-face.type-action { --type-color:#50804b; --type-dark:#284626; --type-soft:#dfe9d9; }
.card.type-incident,.catalog-card-face.type-incident { --type-color:#a84637; --type-dark:#5e2a22; --type-soft:#eddcd5; }
.card.type-workplace,.catalog-card-face.type-workplace { --type-color:#765a95; --type-dark:#443255; --type-soft:#e6deec; }
.card:not(.hidden-card) {
  border:1px solid color-mix(in srgb,var(--type-dark) 52%,#8f8d84);
  border-top:3px solid color-mix(in srgb,var(--type-color) 82%,#fff);
  border-left:4px solid var(--type-color);
  border-radius:10px;
}
.catalog-card-face {
  border:1px solid color-mix(in srgb,var(--type-dark) 52%,#8f8d84);
  border-top:3px solid color-mix(in srgb,var(--type-color) 82%,#fff);
  border-left:5px solid var(--type-color);
  border-radius:10px;
}
.card.type-system:not(.hidden-card),.catalog-card-face.type-system {
  background:
    radial-gradient(circle at 11px 12px,#7d765d 0 2px,#d5cfb9 2.5px 4px,transparent 4.5px),
    linear-gradient(180deg,#f1ede1,#ddd6c4);
}
.card.type-action:not(.hidden-card),.catalog-card-face.type-action {
  background:
    repeating-linear-gradient(90deg,transparent 0 8px,rgba(149,107,69,.06) 8px 9px),
    linear-gradient(180deg,#f5f0e7,#e6ddd0);
}
.card.type-incident:not(.hidden-card),.catalog-card-face.type-incident {
  border-left-style:dashed;
  background:
    radial-gradient(circle at 100% 20%,rgba(168,70,55,.10),transparent 32%),
    linear-gradient(180deg,#f3ebe2,#e4d8cc);
}
.card-type-strip,.catalog-type-strip {
  color:var(--type-color) !important;
  min-height:18px;
}
.card-type-strip span,.catalog-type-strip > span {
  display:inline-flex;
  align-items:center;
  min-height:16px;
  padding:2px 6px;
  border:1px solid color-mix(in srgb,var(--type-color) 74%,#fff);
  border-radius:3px;
  color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--type-color) 92%,#fff),var(--type-color));
  box-shadow:inset 0 1px rgba(255,255,255,.28);
  font-size:6px;
  letter-spacing:.1em;
  text-shadow:0 1px rgba(0,0,0,.18);
}
.card-type-strip b,.catalog-type-strip > b { color:color-mix(in srgb,var(--type-dark) 84%,#333); opacity:.82; }
.card-name,.catalog-name-row > strong {
  font-family:"Arial Narrow","Bahnschrift SemiCondensed",Inter,sans-serif;
  color:#292a25;
  font-weight:900;
  letter-spacing:.015em;
  text-transform:uppercase;
  text-shadow:0 1px rgba(255,255,255,.78);
}
.card-cost-badge,.catalog-cost.card-cost-badge {
  border:1px solid #484b46;
  border-radius:6px;
  color:#242721;
  background:linear-gradient(145deg,#f0ead4,#cfc6a8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62),0 2px 4px rgba(0,0,0,.14);
  clip-path:polygon(17% 0,83% 0,100% 17%,100% 83%,83% 100%,17% 100%,0 83%,0 17%);
}
.card-cost-badge span { color:#6f6855; }
.card-art-stage,.catalog-art-stage {
  border:2px solid color-mix(in srgb,var(--type-dark) 46%,#d7d1c6);
  border-radius:6px;
  background:#252924;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.19),0 2px 6px rgba(0,0,0,.18);
  isolation:isolate;
}
.card-art-window.has-art img,.catalog-art-stage > img { filter:saturate(1.04) contrast(1.025); }
.card-detail-row,.catalog-detail-row { color:#615c53; }
.card-rules-mini,.catalog-rules {
  border-color:rgba(92,83,71,.25);
  background:linear-gradient(180deg,rgba(251,249,244,.9),rgba(235,229,218,.92));
  color:#302f2a;
  box-shadow:inset 0 1px 2px rgba(68,57,43,.06);
}
.card-tags span,.catalog-tags span {
  border-color:color-mix(in srgb,var(--type-color) 16%,#cfc8bc);
  background:color-mix(in srgb,var(--type-soft) 62%,#f8f5ef);
  color:#4e4c46;
}
.power-badge,.catalog-power-badge {
  border-radius:8px;
  border-color:#f4ead5;
  background:linear-gradient(145deg,color-mix(in srgb,var(--type-dark) 78%,#111),var(--type-color));
  clip-path:polygon(50% 0,94% 22%,88% 78%,50% 100%,12% 78%,6% 22%);
  box-shadow:0 3px 7px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.18);
}
.card-info,.card-ability {
  border-color:rgba(62,65,59,.38);
  background:linear-gradient(180deg,rgba(248,245,237,.96),rgba(216,211,201,.95));
  box-shadow:0 2px 5px rgba(0,0,0,.14);
}

/* Rarity finishes. No explicit rarity label is added to the live battlefield. */
.card.tier-t1 .card-name,.catalog-card-face.tier-t1 .catalog-name-row > strong {
  color:#525c60;
  text-shadow:0 1px #fff,0 0 7px rgba(164,184,192,.20);
}
.card.tier-t1:not(.hidden-card)::before,.catalog-card-face.tier-t1::before {
  content:'';
  position:absolute;
  right:3px;
  top:3px;
  width:18px;
  height:18px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(135deg,#f6f8f7,#7b8b91 48%,#dbe3e4 52%,transparent 54%);
  clip-path:polygon(100% 0,100% 100%,0 0);
  opacity:.78;
}
.card.tier-t2 .card-name,.card.tier-t3 .card-name,
.catalog-card-face.tier-t2 .catalog-name-row > strong,.catalog-card-face.tier-t3 .catalog-name-row > strong {
  color:#775311;
  text-shadow:0 1px #fff4c7,0 0 7px rgba(214,167,55,.20);
}
.card.tier-t2:not(.hidden-card),.catalog-card-face.tier-t2 {
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 3px rgba(170,124,31,.09),0 7px 18px rgba(0,0,0,.20);
}
.card.tier-t3:not(.hidden-card),.catalog-card-face.tier-t3 {
  border-color:#a77a25;
  box-shadow:inset 0 0 0 1px rgba(255,249,221,.88),inset 0 0 0 3px rgba(181,125,22,.16),0 8px 22px rgba(0,0,0,.26),0 0 16px rgba(205,153,45,.09);
}
.card.tier-t2 .card-art-stage::after,.catalog-card-face.tier-t2 .catalog-art-stage::after,
.card.tier-t3 .card-art-stage::after,.catalog-card-face.tier-t3 .catalog-art-stage::after {
  content:'';
  position:absolute;
  inset:-2px;
  z-index:4;
  pointer-events:none;
  opacity:.24;
  mix-blend-mode:color-dodge;
  background:
    linear-gradient(112deg,transparent 9%,rgba(255,89,199,.58) 27%,rgba(255,226,98,.48) 40%,rgba(92,255,200,.48) 54%,rgba(86,169,255,.55) 68%,rgba(187,95,255,.54) 82%,transparent 96%);
  background-size:180% 180%;
  background-position:12% 44%;
  transition:opacity .25s ease,background-position .55s ease,filter .25s ease;
}
.card.tier-t2:hover .card-art-stage::after,.catalog-card-face.tier-t2:hover .catalog-art-stage::after { opacity:.38; background-position:88% 54%; }
.card.tier-t3 .card-art-stage::after,.catalog-card-face.tier-t3 .catalog-art-stage::after {
  opacity:.34;
  mix-blend-mode:screen;
  background:
    repeating-conic-gradient(from 17deg at 46% 43%,rgba(255,255,255,.28) 0 5deg,transparent 5deg 17deg,rgba(117,223,255,.22) 17deg 24deg,transparent 24deg 39deg),
    linear-gradient(118deg,rgba(255,70,186,.30),rgba(255,216,70,.30) 28%,rgba(99,255,196,.28) 52%,rgba(79,146,255,.34) 74%,rgba(190,83,255,.30));
  background-size:160% 160%,220% 220%;
  filter:saturate(1.2) contrast(1.05);
}
.card.tier-t3:hover .card-art-stage::after,.catalog-card-face.tier-t3:hover .catalog-art-stage::after { opacity:.5; background-position:75% 22%,90% 62%; }
.card.tier-t3:not(.hidden-card)::after,.catalog-card-face.tier-t3::before {
  content:'';
  position:absolute;
  inset:2px;
  z-index:2;
  border:1px solid rgba(224,183,83,.66);
  border-radius:7px;
  pointer-events:none;
  box-shadow:inset 0 0 10px rgba(232,183,61,.08);
}

/* Battlefield becomes a premium office tabletop instead of stacked white panels. */
.battlefield-surface {
  gap:8px;
  padding:12px;
  border:1px solid #6f5a3a;
  border-radius:20px;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(40,64,54,.36),transparent 42%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 37px),
    linear-gradient(90deg,rgba(90,57,31,.32),transparent 8% 92%,rgba(90,57,31,.32)),
    linear-gradient(180deg,#252b26,#171d19);
  box-shadow:
    inset 0 0 0 3px #171a17,
    inset 0 0 0 5px rgba(188,144,61,.35),
    inset 0 0 65px rgba(0,0,0,.58),
    0 22px 60px rgba(0,0,0,.38);
}
.battlefield-surface::before {
  inset:8px;
  border-color:rgba(223,185,105,.22);
  box-shadow:inset 0 0 30px rgba(0,0,0,.2);
}
.battlefield-surface .player-board {
  border:1px solid color-mix(in srgb,var(--dept-accent) 58%,#4e514d);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--dept-accent) 10%,transparent),transparent 22% 78%,color-mix(in srgb,var(--dept-accent) 7%,transparent)),
    linear-gradient(180deg,rgba(36,45,40,.94),rgba(19,25,22,.96));
  color:#ece8de;
  box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 0 40px color-mix(in srgb,var(--dept-accent) 7%,transparent),0 4px 12px rgba(0,0,0,.26);
}
.battlefield-surface .player-board.opponent-board {
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--dept-accent) 9%,transparent),transparent 24%),
    linear-gradient(180deg,rgba(32,38,35,.96),rgba(18,22,20,.97));
}
.battlefield-surface .player-head {
  padding:6px 8px;
  border:1px solid rgba(217,204,177,.13);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(7,10,9,.55),rgba(22,27,24,.68));
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.battlefield-surface .player-identity > div > strong { color:#f4eee2; font-size:12px; letter-spacing:.02em; }
.battlefield-surface .player-identity > div > small { color:#a8aaa4; }
.battlefield-surface .player-department-mark {
  color:color-mix(in srgb,var(--dept-accent) 75%,#fff);
  border-color:color-mix(in srgb,var(--dept-accent) 55%,#555);
  background:color-mix(in srgb,var(--dept-accent) 12%,#111713);
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--dept-accent) 10%,transparent);
}
.battlefield-surface .resource-cluster,.battlefield-surface .board-resource-row {
  border-color:rgba(207,194,165,.13);
  background:linear-gradient(180deg,rgba(8,11,10,.42),rgba(31,36,33,.34));
  box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -8px 20px rgba(0,0,0,.12);
}
.battlefield-surface .resource-card {
  color:#e9e4da;
  border-color:#4b534d;
  background:linear-gradient(145deg,#252d28,#151a17);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.25);
}
.battlefield-surface .resource-card > span,.battlefield-surface .resource-card small { color:#979e97; }
.battlefield-surface .resource-card strong { color:#f4eee0; }
.battlefield-surface .capacity-pip { background:#202722; border-color:#465048; }
.battlefield-surface .capacity-pip.unlocked { background:#334039; border-color:#617067; }
.battlefield-surface .capacity-pip.available { background:#43b875; border-color:#6fe39b; box-shadow:0 0 6px rgba(67,184,117,.28); }
.battlefield-surface .archive-compact {
  color:#d8d3c9;
  border-color:#4a504b;
  background:linear-gradient(145deg,#292e2b,#171b19);
}
.battlefield-surface .board-lane {
  border:1px solid rgba(186,170,139,.18);
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.08)),
    rgba(13,17,15,.46);
  box-shadow:inset 0 1px rgba(255,255,255,.035),inset 0 0 34px rgba(0,0,0,.22);
}
.battlefield-surface .employee-lane {
  background:linear-gradient(180deg,color-mix(in srgb,var(--dept-accent) 8%,rgba(14,19,17,.72)),rgba(10,14,12,.62));
}
.battlefield-surface .support-lane {
  background:linear-gradient(180deg,rgba(126,89,38,.06),rgba(10,14,12,.68));
}
.battlefield-surface .zone-title { color:#9ea49e; }
.battlefield-surface .zone-title strong { color:#d7d5cd; }
.battlefield-surface .field-empty:not(.slot-candidate) {
  color:#626963;
  border-color:rgba(168,161,143,.16);
  background:rgba(0,0,0,.10);
  box-shadow:inset 0 0 18px rgba(0,0,0,.16);
}
.battlefield-surface .office-divider {
  border-color:rgba(201,167,96,.32);
  background:linear-gradient(180deg,#262923,#111411);
  box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -1px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25);
}
.battlefield-surface .office-divider span {
  color:#c8ae70;
  text-shadow:0 1px #000;
  letter-spacing:.22em;
}
.battlefield-surface .card:not(.hidden-card) { box-shadow:0 6px 12px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.56); }
.battlefield-surface .card:not(.hidden-card):hover { box-shadow:0 12px 23px rgba(0,0,0,.36),0 0 0 1px color-mix(in srgb,var(--type-color) 42%,transparent); }

/* Collection/booster cards inherit the object finish but remain readable on light utility surfaces. */
.collection-card {
  border-color:#a59d8f;
  background:linear-gradient(180deg,#d9d3c9,#c9c2b6);
  box-shadow:0 10px 24px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.65);
}
.collection-card .catalog-card-face { min-height:100%; }
.booster-hit.revealed { background:linear-gradient(180deg,#d8d1c5,#c4bbae); border-color:#a39a8b; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.card-modal {
  border-color:#6d6557;
  background:linear-gradient(145deg,#2a2f2b,#151917);
  color:#ebe5da;
  box-shadow:0 35px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.05);
}
.card-modal .modal-copy,.card-modal .modal-copy h2 { color:#eee8dd; }
.card-modal .modal-meta,.card-modal .flavor-text { color:#aaa69f; }
.card-modal .flavor-text { border-left-color:#6f685b; }
.card-modal .runtime-box,.card-modal .power-breakdown-row,.card-modal .live-status-row { color:#262822; }
.modal-card-face { box-shadow:0 15px 34px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.64); }

/* Selection/legality reads through light rather than prototype outlines. */
.card.legal-card { border-color:#53a96f; box-shadow:0 7px 18px rgba(0,0,0,.23),0 0 0 2px rgba(72,189,108,.28),0 0 14px rgba(72,189,108,.14); }
.card.legal-card::after { color:#d9f5e2; background:rgba(26,104,58,.88); border:1px solid rgba(126,228,160,.35); }
.card.target-candidate { box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 0 2px rgba(71,144,210,.38),0 0 18px rgba(71,144,210,.18); }
.card.target-selected,.card.selection-selected { box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 0 3px rgba(225,181,75,.52),0 0 22px rgba(225,181,75,.18); }

@media (max-width:760px) {
  .app { padding:8px 6px 18px; }
  .topbar { min-height:50px; padding-inline:10px; }
  .battlefield-surface { padding:6px; border-radius:13px; box-shadow:inset 0 0 0 2px #171a17,inset 0 0 0 3px rgba(188,144,61,.28),0 12px 30px rgba(0,0,0,.34); }
  .battlefield-surface .player-head { padding:4px 5px; }
  .card:not(.hidden-card),.catalog-card-face { border-left-width:3px; }
}
@media (prefers-reduced-motion:reduce) {
  .card.tier-t2 .card-art-stage::after,.catalog-card-face.tier-t2 .catalog-art-stage::after,
  .card.tier-t3 .card-art-stage::after,.catalog-card-face.tier-t3 .catalog-art-stage::after { transition:none !important; }
}


/* v3.5 canonical card footprint across board / deckbuilder / packs */
:root {
  --field-card-width: 150px;
  --field-card-height: 214px;
  --catalog-card-width: 150px;
  --catalog-card-height: 214px;
  --collection-panel-width: 164px;
  --booster-panel-width: 164px;
}

.collection-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--collection-panel-width), var(--collection-panel-width)));
  justify-content: flex-start;
  gap: 12px;
}

.collection-card {
  width: var(--collection-panel-width);
  min-width: var(--collection-panel-width);
  max-width: var(--collection-panel-width);
  min-height: calc(var(--catalog-card-height) + 58px);
  padding: 6px;
  display: grid;
  grid-template-rows: var(--catalog-card-height) auto;
  align-content: start;
  justify-items: center;
  gap: 8px;
}

.collection-card .catalog-card-face {
  width: var(--catalog-card-width);
  height: var(--catalog-card-height);
  min-height: var(--catalog-card-height);
  max-height: var(--catalog-card-height);
  margin: 0 auto;
}

.collection-copy-control,
.collection-swap-control {
  width: 100%;
  min-height: 38px;
  align-self: start;
}

.collection-copy-control span,
.collection-swap-control span {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booster-card-row {
  grid-template-columns: repeat(5, minmax(var(--booster-panel-width), var(--booster-panel-width)));
  justify-content: center;
  gap: 12px;
}

.booster-hit.revealed,
.booster-facedown {
  width: var(--booster-panel-width);
  min-width: var(--booster-panel-width);
  max-width: var(--booster-panel-width);
  min-height: calc(var(--catalog-card-height) + 16px);
  padding: 6px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
}

.booster-hit.revealed .catalog-card-face {
  width: var(--catalog-card-width);
  height: var(--catalog-card-height);
  min-height: var(--catalog-card-height);
  max-height: var(--catalog-card-height);
  margin: 0 auto;
}

.booster-facedown .booster-card-back {
  width: var(--catalog-card-width);
  height: var(--catalog-card-height);
  min-height: var(--catalog-card-height);
  margin: 0 auto;
}

.booster-hit.revealed .booster-inspect,
.booster-hit.revealed .booster-deck-use {
  position: static;
  width: 100%;
  justify-self: stretch;
}

@media (max-width: 1120px) {
  .collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(156px, 156px));
  }
  .collection-card {
    width: 156px;
    min-width: 156px;
    max-width: 156px;
  }
  .collection-card .catalog-card-face,
  .booster-hit.revealed .catalog-card-face,
  .booster-facedown .booster-card-back {
    width: 142px;
    height: 203px;
    min-height: 203px;
    max-height: 203px;
  }
  .booster-card-row {
    grid-template-columns: repeat(5, minmax(156px, 156px));
  }
  .booster-hit.revealed,
  .booster-facedown {
    width: 156px;
    min-width: 156px;
    max-width: 156px;
  }
}

@media (max-width: 760px) {
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .collection-card {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    grid-template-rows: auto auto;
    justify-items: stretch;
  }
  .collection-card .catalog-card-face {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 150 / 214;
  }
  .booster-card-row {
    display: flex;
    justify-content: flex-start;
  }
  .booster-hit.revealed,
  .booster-facedown {
    width: 148px;
    min-width: 148px;
    max-width: 148px;
  }
  .booster-hit.revealed .catalog-card-face,
  .booster-facedown .booster-card-back {
    width: 136px;
    height: 194px;
    min-height: 194px;
    max-height: 194px;
  }
}

@media (max-width: 380px) {
  .collection-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.6 board depth + zone polish */
.battlefield-surface {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 8%,rgba(210,182,122,.07),transparent 20%),
    radial-gradient(circle at 92% 92%,rgba(31,97,78,.08),transparent 24%),
    linear-gradient(90deg,rgba(111,74,42,.20),transparent 7% 93%,rgba(111,74,42,.20)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#262c27,#151a17);
}
.battlefield-surface::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.32;
  background:
    radial-gradient(ellipse at 15% 50%,transparent 0 44%,rgba(0,0,0,.28) 72%,transparent 76%),
    radial-gradient(ellipse at 85% 50%,transparent 0 44%,rgba(0,0,0,.28) 72%,transparent 76%);
}
.battlefield-surface > * { position:relative; z-index:1; }
.battlefield-surface .player-board {
  padding:10px;
  border-radius:14px;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -1px rgba(0,0,0,.55),
    inset 0 0 0 3px rgba(0,0,0,.14),
    0 7px 18px rgba(0,0,0,.26);
}
.battlefield-surface .player-board::before {
  content:'';
  position:absolute;
  inset:4px;
  border:1px solid rgba(213,196,162,.08);
  border-radius:10px;
  pointer-events:none;
}
.battlefield-surface .zone-title {
  min-height:24px;
  margin:8px 3px 5px;
  padding:0 7px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#a8aca6;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.battlefield-surface .zone-title::before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:#77817a;
  box-shadow:0 0 0 3px rgba(119,129,122,.08);
}
.battlefield-surface .frontline-title::before {
  background:color-mix(in srgb,var(--dept-accent) 78%,#d5e4df);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dept-accent) 13%,transparent);
}
.battlefield-surface .backline-title::before {
  background:#bf8b42;
  box-shadow:0 0 0 3px rgba(191,139,66,.12);
}
.battlefield-surface .zone-title strong { font-size:9px; color:#e0ddd4; }
.battlefield-surface .zone-title > span { margin-left:auto; font-size:6px; color:#7f8781; letter-spacing:.06em; }
.battlefield-surface .board-lane {
  position:relative;
  min-height:230px;
  padding:10px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(202,184,151,.19);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.018),
    inset 0 -10px 26px rgba(0,0,0,.22),
    inset 0 0 0 3px rgba(0,0,0,.13);
}
.battlefield-surface .board-lane::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.014),transparent 16% 84%,rgba(255,255,255,.014)),
    repeating-linear-gradient(90deg,transparent 0 149px,rgba(220,205,174,.035) 149px 150px);
}
.battlefield-surface .employee-lane {
  background:
    radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--dept-accent) 10%,transparent),transparent 58%),
    linear-gradient(180deg,rgba(29,45,39,.74),rgba(11,15,13,.78));
}
.battlefield-surface .support-lane {
  background:
    radial-gradient(ellipse at 50% 100%,rgba(180,126,51,.08),transparent 56%),
    linear-gradient(180deg,rgba(28,27,21,.72),rgba(11,14,12,.82));
}
.battlefield-surface .lane-clear { opacity:.93; }
.battlefield-surface .lane-occupied { border-color:rgba(208,190,154,.26); }
.battlefield-surface .field-empty:not(.slot-candidate) {
  position:relative;
  border:1px dashed rgba(200,191,169,.15);
  border-radius:9px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.012),transparent 38%),
    rgba(2,5,4,.13);
  color:#606862;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.10),inset 0 8px 18px rgba(0,0,0,.09);
}
.battlefield-surface .field-empty:not(.slot-candidate)::before,
.battlefield-surface .field-empty:not(.slot-candidate)::after {
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  opacity:.18;
}
.battlefield-surface .field-empty:not(.slot-candidate)::before {
  left:6px; top:6px;
  border-left:1px solid #d8caa9;
  border-top:1px solid #d8caa9;
}
.battlefield-surface .field-empty:not(.slot-candidate)::after {
  right:6px; bottom:6px;
  border-right:1px solid #d8caa9;
  border-bottom:1px solid #d8caa9;
}
.battlefield-surface .field-empty span { font-size:7px; font-weight:900; letter-spacing:.10em; }
.battlefield-surface .field-empty small { font-size:5px; letter-spacing:.12em; opacity:.72; }
.battlefield-surface .field-empty.slot-candidate {
  background:linear-gradient(180deg,rgba(40,112,75,.22),rgba(20,73,49,.28));
  border-color:rgba(105,208,143,.58);
  box-shadow:inset 0 0 18px rgba(70,190,113,.10),0 0 0 2px rgba(75,196,118,.14),0 0 18px rgba(75,196,118,.10);
}
.battlefield-surface .office-divider {
  min-height:28px;
  margin:3px 5px;
  border:1px solid rgba(192,149,69,.24);
  border-radius:8px;
  background:
    linear-gradient(90deg,transparent,rgba(202,160,76,.06) 20% 80%,transparent),
    linear-gradient(180deg,#2c2f28,#101310);
}
.battlefield-surface .office-divider::before,
.battlefield-surface .office-divider::after {
  content:'';
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,#8b6c31 55%,transparent);
  opacity:.55;
}
.battlefield-surface .office-divider span { padding:0 10px; font-size:7px; }
@media (max-width:760px) {
  .battlefield-surface .player-board { padding:7px 6px 8px; }
  .battlefield-surface .board-lane { min-height:210px; padding:7px 8px 10px; }
  .battlefield-surface .board-lane::before { display:none; }
  .battlefield-surface .zone-title { min-height:20px; margin:6px 2px 4px; padding:0 5px; }
}
\n\n/* v7.42 rarity finish pass — distinct T2/T3 artwork masks across every card surface */\n.card.tier-t2 .card-art-stage,\n.catalog-card-face.tier-t2 .catalog-art-stage,\n.card.tier-t3 .card-art-stage,\n.catalog-card-face.tier-t3 .catalog-art-stage {\n  overflow:hidden;\n}\n\n/* T2: soft-spectrum laminated film. Visible on both final art and development fallback art. */\n.card.tier-t2 .card-art-stage::after,\n.catalog-card-face.tier-t2 .catalog-art-stage::after {\n  inset:0;\n  opacity:.22;\n  mix-blend-mode:color-dodge;\n  background:\n    linear-gradient(112deg,\n      transparent 0 13%,\n      rgba(255,102,190,.52) 24%,\n      rgba(255,224,105,.42) 38%,\n      rgba(103,247,196,.42) 53%,\n      rgba(92,166,255,.48) 69%,\n      rgba(193,105,255,.48) 82%,\n      transparent 96%),\n    repeating-linear-gradient(102deg,rgba(255,255,255,.10) 0 1px,transparent 1px 11px);\n  background-size:190% 190%,100% 100%;\n  background-position:var(--foil-x,10%) var(--foil-y,50%),center;\n  filter:saturate(1.08) contrast(1.02);\n}\n.card.tier-t2 .card-art-stage::before,\n.catalog-card-face.tier-t2 .catalog-art-stage::before {\n  content:'';\n  position:absolute;\n  inset:0;\n  z-index:5;\n  pointer-events:none;\n  opacity:.16;\n  background:radial-gradient(circle at 22% 24%,rgba(255,255,255,.9) 0 1px,transparent 1.6px),radial-gradient(circle at 72% 68%,rgba(255,255,255,.72) 0 1px,transparent 1.7px);\n  background-size:43px 43px,61px 61px;\n  mix-blend-mode:screen;\n}\n.card.tier-t2:hover .card-art-stage::after,\n.card.tier-t2:focus-visible .card-art-stage::after,\n.catalog-card-face.tier-t2:hover .catalog-art-stage::after {\n  opacity:.42;\n  background-position:var(--foil-x,88%) var(--foil-y,54%),center;\n}\n\n/* T3: premium prismatic shard foil — deliberately not a stronger copy of T2. */\n.card.tier-t3 .card-art-stage::after,\n.catalog-card-face.tier-t3 .catalog-art-stage::after {\n  inset:0;\n  opacity:.38;\n  mix-blend-mode:screen;\n  background:\n    conic-gradient(from 28deg at 28% 31%,transparent 0 13deg,rgba(94,217,255,.42) 13deg 27deg,transparent 27deg 54deg,rgba(255,101,199,.38) 54deg 74deg,transparent 74deg 112deg),\n    conic-gradient(from 194deg at 74% 64%,transparent 0 19deg,rgba(255,222,92,.42) 19deg 40deg,transparent 40deg 70deg,rgba(137,255,191,.34) 70deg 93deg,transparent 93deg 132deg),\n    linear-gradient(126deg,rgba(255,73,182,.26),rgba(255,219,77,.30) 27%,rgba(89,247,202,.28) 51%,rgba(80,147,255,.34) 74%,rgba(197,84,255,.28));\n  background-size:145% 145%,155% 155%,220% 220%;\n  background-position:var(--foil-x,13%) var(--foil-y,34%),var(--foil-x,88%) var(--foil-y,68%),var(--foil-x,22%) var(--foil-y,60%);\n  filter:saturate(1.28) contrast(1.08);\n}\n.card.tier-t3 .card-art-stage::before,\n.catalog-card-face.tier-t3 .catalog-art-stage::before {\n  content:'';\n  position:absolute;\n  inset:0;\n  z-index:5;\n  pointer-events:none;\n  opacity:.32;\n  background:\n    linear-gradient(63deg,transparent 47%,rgba(255,255,255,.72) 49%,transparent 51%),\n    linear-gradient(116deg,transparent 45%,rgba(255,242,197,.48) 48%,transparent 51%),\n    radial-gradient(circle at 79% 18%,#fff 0 1px,transparent 2px);\n  background-size:54px 72px,73px 58px,67px 67px;\n  mix-blend-mode:screen;\n}\n.card.tier-t3:hover .card-art-stage::after,\n.card.tier-t3:focus-visible .card-art-stage::after,\n.catalog-card-face.tier-t3:hover .catalog-art-stage::after {\n  opacity:.58;\n  background-position:var(--foil-x,78%) var(--foil-y,18%),var(--foil-x,17%) var(--foil-y,82%),var(--foil-x,92%) var(--foil-y,35%);\n}\n\n/* Premium frame accents stay outside the art but never wash over rules text. */\n.card.tier-t2:not(.hidden-card),\n.catalog-card-face.tier-t2 {\n  border-top-color:#c7a44a;\n}\n.card.tier-t3:not(.hidden-card),\n.catalog-card-face.tier-t3 {\n  border-color:#bb8e2e;\n  border-top-color:#e2bd59;\n  box-shadow:inset 0 0 0 1px rgba(255,249,221,.9),inset 0 0 0 3px rgba(181,125,22,.18),0 9px 24px rgba(0,0,0,.27),0 0 18px rgba(205,153,45,.13);\n}\n.card.tier-t3 .card-cost-badge,\n.catalog-card-face.tier-t3 .catalog-cost.card-cost-badge {\n  border-color:#8e671e;\n  background:linear-gradient(145deg,#fff1b9,#d4aa43 48%,#8a641e);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .card.tier-t2 .card-art-stage::after,\n  .catalog-card-face.tier-t2 .catalog-art-stage::after,\n  .card.tier-t3 .card-art-stage::after,\n  .catalog-card-face.tier-t3 .catalog-art-stage::after {\n    transition:none !important;\n  }\n}\n\n\n/* v7.43 lobby / collection / deckbuilder visual polish */\n.lobby-command-center,\n.collection-shell {\n  position:relative;\n}\n\n/* Lobby reads as the front desk of the game rather than a form dashboard. */\n.lobby-command-center {\n  padding:18px;\n  border:1px solid rgba(187,151,78,.32);\n  border-radius:22px;\n  background:\n    radial-gradient(circle at 18% 0,rgba(187,151,78,.11),transparent 34%),\n    linear-gradient(145deg,#242a25,#151a17 62%,#111512);\n  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 24px 70px rgba(0,0,0,.30);\n}\n.lobby-command-center .lobby-hero {\n  border:1px solid rgba(218,199,157,.20);\n  background:\n    linear-gradient(105deg,rgba(255,255,255,.055),transparent 45%),\n    linear-gradient(180deg,#303630,#222823);\n  color:#f2eadb;\n  box-shadow:inset 0 1px rgba(255,255,255,.055),0 8px 22px rgba(0,0,0,.23);\n}\n.lobby-command-center .lobby-hero span { color:#c6a968; }\n.lobby-command-center .lobby-hero small { color:#a9aea7; }\n.lobby-command-center .quick-match-box,\n.lobby-command-center .ranked-standing,\n.lobby-command-center .private-room-drawer {\n  border-color:rgba(214,198,163,.18);\n  background:linear-gradient(180deg,rgba(249,246,238,.96),rgba(226,220,207,.96));\n  box-shadow:0 10px 28px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.75);\n}\n.lobby-command-center .quick-match-box {\n  border-left:4px solid #b99243;\n}\n.lobby-command-center .quick-match-box button.primary {\n  min-height:48px;\n  font-size:14px;\n  letter-spacing:.035em;\n}\n\n/* Collection gets a dark filing-desk surround so cards become the visual focus. */\n.collection-shell {\n  padding:14px;\n  border:1px solid #66573e;\n  border-radius:22px;\n  background:\n    radial-gradient(circle at 50% -8%,rgba(174,139,72,.10),transparent 32%),\n    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 31px),\n    linear-gradient(145deg,#202621,#111613);\n  box-shadow:inset 0 0 0 2px rgba(16,18,16,.72),inset 0 0 0 3px rgba(177,139,66,.14),0 28px 80px rgba(0,0,0,.38);\n}\n.collection-toolbar {\n  margin-bottom:12px;\n  border-color:rgba(215,195,154,.19);\n  background:linear-gradient(180deg,#303630,#202622);\n  color:#f1eadc;\n  box-shadow:inset 0 1px rgba(255,255,255,.055),0 7px 20px rgba(0,0,0,.24);\n}\n.collection-toolbar .muted,\n.collection-toolbar .economy-preview small { color:#a4aaa2; }\n.collection-toolbar .collection-set-progress span,\n.collection-toolbar .economy-preview span {\n  border-color:rgba(218,198,158,.18);\n  background:#191e1b;\n  color:#dcd6ca;\n}\n.collection-toolbar .collection-mode-toggle {\n  border-color:#545850;\n  background:#151a17;\n}\n.collection-toolbar .collection-mode-toggle button { color:#bbbdb7; background:transparent; box-shadow:none; }\n.collection-toolbar .collection-mode-toggle button.active {\n  color:#201c15;\n  background:linear-gradient(180deg,#ead8a9,#bb9143);\n}\n\n.economy-lab,\n.meta-roadmap,\n.builder-starter-shelf {\n  border-color:#9a8e7a;\n  background:\n    linear-gradient(110deg,rgba(255,255,255,.56),transparent 23%),\n    linear-gradient(180deg,#e8e1d5,#d5ccbe);\n  box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.72);\n}\n.economy-lab-head > div:first-child > span,\n.meta-roadmap-head span,\n.builder-starter-head span { color:#745a2b; }\n.booster-station,\n.shredder-station,\n.meta-path,\n.builder-starter-card {\n  border-color:#bdb2a1;\n  background:linear-gradient(180deg,#fbf8f1,#e8e0d4);\n  box-shadow:inset 0 1px rgba(255,255,255,.75),0 3px 8px rgba(49,40,28,.07);\n}\n\n.collection-browser {\n  min-width:0;\n  padding:11px;\n  border:1px solid rgba(210,192,154,.16);\n  border-radius:16px;\n  background:linear-gradient(180deg,rgba(32,39,34,.92),rgba(18,23,20,.96));\n  box-shadow:inset 0 1px rgba(255,255,255,.035),inset 0 0 34px rgba(0,0,0,.18);\n}\n.collection-discovery {\n  margin-bottom:12px;\n  padding:7px;\n  border:1px solid rgba(213,195,157,.16);\n  border-radius:12px;\n  background:rgba(8,12,10,.30);\n}\n.collection-filters {\n  position:sticky;\n  top:70px;\n  border-color:#837967;\n  background:rgba(229,223,212,.97);\n  box-shadow:0 7px 20px rgba(0,0,0,.20);\n}\n.collection-filters label > span,\n.collection-tag-shortcuts > span,\n.collection-active-filters > span { color:#665a48; }\n.collection-filters input,\n.collection-filters select {\n  border-color:#aaa08f;\n  background:#faf7f0;\n}\n.collection-tag-shortcuts button,\n.collection-active-filters button {\n  border-color:#8a806e;\n  background:linear-gradient(180deg,#f4efe5,#ded5c7);\n}\n\n/* Deckbuilder becomes a physical side console rather than another white panel. */\n.deck-builder-panel {\n  border-color:#7d705b;\n  background:\n    linear-gradient(120deg,rgba(255,255,255,.05),transparent 30%),\n    linear-gradient(180deg,#323731,#1e2420);\n  color:#ece5d8;\n  box-shadow:0 16px 42px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05),inset 0 0 0 1px rgba(188,149,75,.10);\n}\n.deck-builder-panel input,\n.deck-builder-panel select {\n  border-color:#706b60;\n  background:#f3eee5;\n  color:#2d2c27;\n}\n.deck-builder-panel label,\n.deck-builder-panel .muted { color:#b0afa7; }\n.deck-builder-panel .deck-total {\n  border-color:#675f52;\n  background:#171c19;\n  color:#eee5d5;\n}\n.deck-builder-panel .deck-total.valid {\n  border-color:#4f8a64;\n  background:#19261f;\n  color:#86d7a3;\n}\n.deck-builder-panel .collection-preview,\n.deck-builder-panel .deck-stats,\n.deck-builder-panel .deck-completion-check,\n.deck-builder-panel .deck-identity,\n.deck-builder-panel .deck-engine-coverage,\n.deck-builder-panel .deck-engine-fits {\n  color:#2e2c27;\n  box-shadow:0 5px 14px rgba(0,0,0,.14);\n}\n.deck-list > div,\n.deck-list-row {\n  color:#34312c;\n}\n\n@media (max-width:1000px) {\n  .collection-shell { padding:9px; border-radius:16px; }\n  .deck-builder-panel { order:-1; }\n}\n@media (max-width:760px) {\n  .lobby-command-center { padding:8px; border-radius:14px; }\n  .collection-shell { padding:5px; border-radius:12px; }\n  .collection-browser { padding:6px; border-radius:11px; }\n  .collection-filters { position:static; }\n}\n\n\n/* v7.44 match feedback + motion + responsive visual QA */\n/* Action feedback uses short, event-driven motion only — never ambient card movement. */\n.card.cue-played {\n  animation:v744-card-land .46s cubic-bezier(.18,.78,.25,1);\n}\n.card.cue-attack {\n  animation:v744-card-attack .48s cubic-bezier(.2,.74,.28,1);\n}\n.card.cue-destroyed {\n  animation:v744-card-destroy .62s cubic-bezier(.4,0,.2,1);\n}\n@keyframes v744-card-land {\n  0% { opacity:.25; transform:translateY(18px) scale(.94); filter:brightness(1.15); }\n  62% { opacity:1; transform:translateY(-3px) scale(1.018); filter:brightness(1.08); }\n  100% { transform:none; filter:none; }\n}\n@keyframes v744-card-attack {\n  0%,100% { transform:none; }\n  38% { transform:translateY(-9px) scale(1.035); filter:brightness(1.12); }\n  64% { transform:translateY(-2px) scale(1.012); }\n}\n@keyframes v744-card-destroy {\n  0% { opacity:1; transform:none; filter:none; }\n  28% { opacity:1; transform:scale(1.035); filter:brightness(1.5) saturate(.55); }\n  70% { opacity:.5; transform:scale(.96) translateY(5px); filter:grayscale(.8) contrast(1.15); }\n  100% { opacity:0; transform:scale(.90) translateY(12px); filter:grayscale(1); }\n}\n\n/* Reputation events briefly tint the tabletop edge without obscuring cards or controls. */\n.game-shell.event-reputation-changed .battlefield-surface::after {\n  animation:v744-table-impact .52s ease-out;\n}\n@keyframes v744-table-impact {\n  0% { opacity:.32; box-shadow:inset 0 0 0 0 rgba(190,68,50,0); }\n  28% { opacity:.62; box-shadow:inset 0 0 46px 8px rgba(190,68,50,.24); }\n  100% { opacity:.32; box-shadow:inset 0 0 0 0 rgba(190,68,50,0); }\n}\n.resource-card.reputation-resource.cue-reputation-loss {\n  animation:v744-reputation-loss .52s ease-out;\n}\n.resource-card.reputation-resource.cue-reputation-gain {\n  animation:v744-reputation-gain .52s ease-out;\n}\n@keyframes v744-reputation-loss {\n  0%,100% { transform:none; }\n  36% { transform:translateX(-2px) scale(1.02); box-shadow:0 0 0 2px rgba(198,78,62,.30),0 0 18px rgba(198,78,62,.24); }\n  52% { transform:translateX(2px) scale(1.02); }\n}\n@keyframes v744-reputation-gain {\n  0%,100% { transform:none; }\n  40% { transform:scale(1.025); box-shadow:0 0 0 2px rgba(69,169,103,.28),0 0 18px rgba(69,169,103,.20); }\n}\n\n/* Resolution / combat moments now match the board's metal-and-paper material language. */\n.combat-moment,\n.promotion-moment,\n.resolution-moment {\n  border:1px solid rgba(218,195,145,.28);\n  background:\n    linear-gradient(115deg,rgba(255,255,255,.06),transparent 35%),\n    linear-gradient(180deg,rgba(45,51,46,.97),rgba(20,25,22,.97));\n  color:#f2ecdf;\n  box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.07),inset 0 0 0 2px rgba(177,139,66,.08);\n}\n.combat-moment.breakthrough {\n  border-color:rgba(214,119,91,.42);\n  background:linear-gradient(145deg,rgba(108,45,34,.98),rgba(34,27,23,.98));\n}\n.resolution-moment.negated { border-color:rgba(203,91,79,.38); }\n.resolution-moment.delayed { border-color:rgba(132,117,181,.38); }\n\n/* Match complete reads like a result plaque instead of a generic success box. */\n.match-result-panel {\n  border-color:#766a58;\n  border-top-color:var(--dept-accent);\n  background:\n    linear-gradient(112deg,color-mix(in srgb,var(--dept-accent) 9%,transparent),transparent 32%),\n    linear-gradient(180deg,#ece5d9,#d6cdbf);\n  box-shadow:0 18px 46px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.75);\n}\n.match-result-panel.win {\n  background:linear-gradient(112deg,rgba(68,143,91,.13),transparent 35%),linear-gradient(180deg,#eee8dc,#d8d0c3);\n}\n.match-result-panel.loss {\n  background:linear-gradient(112deg,rgba(169,70,58,.11),transparent 35%),linear-gradient(180deg,#eee6dc,#d8cec2);\n}\n.match-result-emblem {\n  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 4px 12px rgba(0,0,0,.14);\n}\n\n/* Intermediate desktop QA: board and meta cards shrink together, preserving the canonical ratio. */\n@media (min-width:761px) and (max-width:1040px) {\n  :root {\n    --field-card-width:138px;\n    --field-card-height:197px;\n    --hand-card-width:142px;\n    --hand-card-height:202px;\n    --catalog-card-width:138px;\n    --catalog-card-height:197px;\n    --collection-panel-width:152px;\n    --booster-panel-width:152px;\n  }\n  .battlefield-surface { padding:8px; }\n  .battlefield-surface .player-board { padding:7px; }\n  .collection-grid { gap:9px; }\n  .collection-card { width:var(--collection-panel-width); min-width:var(--collection-panel-width); max-width:var(--collection-panel-width); }\n  .booster-hit.revealed,.booster-facedown { width:var(--booster-panel-width); min-width:var(--booster-panel-width); max-width:var(--booster-panel-width); }\n}\n\n/* Short landscape devices prioritize the live battlefield and keep controls reachable. */\n@media (max-height:600px) and (orientation:landscape) {\n  .topbar { min-height:42px; }\n  .turn-banner { min-height:32px; padding-block:5px; }\n  .phase-track { margin-bottom:3px; }\n  .battlefield-surface { gap:5px; padding:5px; }\n  .battlefield-surface .player-board { padding-block:5px; }\n  .battlefield-surface .zone-title { min-height:18px; margin-block:4px 3px; }\n  .match-context-stack { margin-bottom:4px; }\n  .command-dock { max-height:30vh; overflow:auto; }\n  .combat-moment,.promotion-moment,.resolution-moment { top:42%; }\n}\n\n/* Mobile/touch keeps feedback readable without hover dependence. */\n@media (max-width:760px) {\n  .visual-cue { top:58px; max-width:calc(100vw - 20px); font-size:10px; }\n  .combat-moment,.promotion-moment,.resolution-moment { max-width:88vw; }\n  .match-result-panel { border-radius:12px; }\n}\n\n@media (prefers-reduced-motion:reduce) {\n  .card.cue-played,\n  .card.cue-attack,\n  .card.cue-destroyed,\n  .game-shell.event-reputation-changed .battlefield-surface::after,\n  .resource-card.reputation-resource.cue-reputation-loss,\n  .resource-card.reputation-resource.cue-reputation-gain,\n  .combat-moment,\n  .promotion-moment,\n  .resolution-moment,\n  .match-result-panel {\n    animation:none !important;\n    transition:none !important;\n  }\n}\n

/* v7.50 external alpha invite + network diagnostics */
.invite-arrival { margin:0 0 10px; padding:9px 10px; display:grid; gap:2px; border:1px solid rgba(195,157,78,.35); border-radius:9px; background:linear-gradient(145deg,rgba(219,185,107,.13),rgba(255,255,255,.46)); }
.invite-arrival span,.network-diagnostic span { font-size:7px; font-weight:950; letter-spacing:.12em; color:#a87a29; }
.invite-arrival strong { font-size:12px; }
.invite-arrival small { color:#756e64; font-size:8px; }
.invite-link-preview { max-width:100%; margin:0 auto 10px; padding:7px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid rgba(202,181,139,.22); border-radius:7px; background:rgba(0,0,0,.18); color:#cfc9bc; font-size:9px; }
.network-diagnostic { margin:10px 0; padding:7px 9px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; border:1px solid rgba(130,171,150,.22); border-radius:8px; background:rgba(15,35,26,.32); }
.network-diagnostic b { padding:2px 6px; border-radius:999px; background:rgba(74,150,105,.17); color:#a8d4b8; font-size:7px; letter-spacing:.07em; }
.network-diagnostic small { color:#9ca49d; font-size:8px; }
@media(max-width:760px){.invite-link-preview{font-size:7.5px}.network-diagnostic{align-items:flex-start;display:grid}}


/* v7.51 alpha tester onboarding */
.lobby-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.alpha-onboarding-backdrop{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:20px;background:rgba(8,11,9,.78);backdrop-filter:blur(10px)}.alpha-onboarding{width:min(880px,96vw);max-height:92vh;overflow:auto;padding:26px;border:1px solid rgba(206,178,112,.48);border-radius:18px;background:linear-gradient(145deg,#252b27,#151a17);color:#eee8dc;box-shadow:0 34px 100px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.06)}.alpha-onboarding-kicker{display:flex;justify-content:space-between;gap:12px;color:#bca66d;font-size:8px;font-weight:950;letter-spacing:.14em}.alpha-onboarding h2{margin:10px 0 7px;font-size:30px;line-height:1}.alpha-onboarding>p{margin:0 0 18px;color:#b8bbb5;font-size:12px;line-height:1.5}.alpha-onboarding-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.alpha-onboarding-grid article{min-height:132px;padding:13px;border:1px solid rgba(220,208,180,.14);border-radius:11px;background:rgba(255,255,255,.045);display:grid;align-content:start;gap:6px}.alpha-onboarding-grid article>b{color:#c4a45b;font-size:9px;letter-spacing:.12em}.alpha-onboarding-grid article>strong{font-size:13px}.alpha-onboarding-grid article>span{color:#aeb2ac;font-size:10px;line-height:1.45}.alpha-onboarding-tip{margin-top:12px;padding:11px 13px;border-left:3px solid #6ba074;background:rgba(71,119,81,.12);display:grid;gap:3px}.alpha-onboarding-tip strong{font-size:10px}.alpha-onboarding-tip span{font-size:9px;color:#b6bbb4}.alpha-onboarding-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.alpha-onboarding-actions button{min-height:40px}@media(max-width:760px){.alpha-onboarding-backdrop{padding:8px;align-items:start}.alpha-onboarding{margin-top:8px;padding:16px;border-radius:13px}.alpha-onboarding h2{font-size:23px}.alpha-onboarding-grid{grid-template-columns:1fr 1fr}.alpha-onboarding-grid article{min-height:112px}.lobby-hero-actions{width:100%;justify-content:stretch}.lobby-hero-actions button{flex:1}}@media(max-width:430px){.alpha-onboarding-grid{grid-template-columns:1fr}.alpha-onboarding-actions{display:grid;grid-template-columns:1fr}.alpha-onboarding-actions .primary{order:-1}}


/* v7.52 connection + session diagnostics */
.connection-diagnostics{margin:10px 0;border:1px solid rgba(201,190,164,.2);border-radius:10px;background:rgba(12,16,14,.22);overflow:hidden}.connection-diagnostics>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;cursor:pointer;list-style:none}.connection-diagnostics>summary::-webkit-details-marker{display:none}.connection-diagnostics>summary>div{display:grid;gap:2px}.connection-diagnostics>summary span{font-size:6.5px;font-weight:950;letter-spacing:.12em;color:#9f9478}.connection-diagnostics>summary strong{font-size:10px}.connection-diagnostics>summary small{font-size:7px;color:#8f958f}.connection-diagnostics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 9px 9px}.connection-diagnostics-grid>span{min-height:58px;padding:8px;border:1px solid rgba(214,204,180,.12);border-radius:8px;background:rgba(255,255,255,.035);display:grid;gap:2px}.connection-diagnostics-grid small{font-size:6px;letter-spacing:.1em;color:#8f948e}.connection-diagnostics-grid b{font-size:10px}.connection-diagnostics-grid em{font-size:7px;font-style:normal;color:#a4a8a2;overflow-wrap:anywhere}.connection-diagnostics-actions{display:flex;gap:6px;padding:0 9px 9px}.connection-diagnostics.compact{background:rgba(255,255,255,.04)}@media(max-width:760px){.connection-diagnostics-grid{grid-template-columns:1fr 1fr}.connection-diagnostics-actions{display:grid;grid-template-columns:1fr 1fr}}@media(max-width:420px){.connection-diagnostics-grid{grid-template-columns:1fr}}


/* v7.53 safe bug-report export */
.connection-diagnostics-actions{flex-wrap:wrap}.connection-diagnostics-actions button{flex:1 1 130px}.match-result-actions [data-download-bug-report]{border-style:dashed}@media(max-width:520px){.connection-diagnostics-actions{grid-template-columns:1fr 1fr}.connection-diagnostics-actions button{min-width:0}}


/* v7.54 alpha test-session grouping */
.alpha-session-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px auto 12px;padding:9px 12px;border:1px solid rgba(187,164,105,.28);border-radius:10px;background:linear-gradient(90deg,rgba(191,153,68,.08),rgba(255,255,255,.025));max-width:1540px}.alpha-session-strip>div{display:grid;gap:2px}.alpha-session-strip span{font-size:6.5px;font-weight:950;letter-spacing:.13em;color:#aa986e}.alpha-session-strip strong{font-size:10px;letter-spacing:.05em}.alpha-session-strip small{font-size:7.5px;color:#969b94}.alpha-session-strip button{white-space:nowrap}@media(max-width:620px){.alpha-session-strip{align-items:stretch;flex-direction:column}.alpha-session-strip button{width:100%}}


/* v7.55 cross-browser / low-network hardening */
@supports not (backdrop-filter:blur(1px)){.alpha-onboarding-backdrop,.phase-track,.mobile-board-nav{background:#171c19}.player-board{background:#202722}}@media (prefers-reduced-transparency:reduce){.alpha-onboarding-backdrop,.phase-track,.mobile-board-nav{backdrop-filter:none!important}}


/* v7.58 language switch */
.language-switcher { margin-left:auto; display:flex; align-items:center; gap:7px; color:#b9b7b0; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.language-switcher select { min-width:96px; min-height:32px; padding:5px 25px 5px 8px; border:1px solid rgba(224,210,178,.22); border-radius:7px; background:#1f2421; color:#f0eadf; font:inherit; text-transform:none; letter-spacing:.02em; }
@media (max-width:620px) { .language-switcher span { display:none; } .language-switcher select { min-width:78px; } }


/* v7.61 — protected Alpha operator console */
.ops-shell{width:min(1460px,100%);margin:0 auto;padding:24px 0 40px;color:#ece7dc}.ops-shell.ops-login{min-height:72vh;display:grid;place-items:center}.ops-login-panel{width:min(520px,94vw);padding:28px;border:1px solid #70685a;border-radius:18px;background:linear-gradient(145deg,#2b302c,#151917);box-shadow:0 28px 70px rgba(0,0,0,.36)}.ops-login-panel>span,.ops-header span{font-size:8px;font-weight:950;letter-spacing:.16em;color:#bca66f}.ops-login-panel h1,.ops-header h1{margin:7px 0;font-family:"Arial Narrow","Bahnschrift SemiCondensed",Inter,sans-serif;text-transform:uppercase;letter-spacing:.04em}.ops-login-panel p,.ops-header p{color:#aaa49a}.ops-login-panel label{display:grid;gap:6px;margin:18px 0 10px;font-size:9px;font-weight:900;letter-spacing:.08em}.ops-login-panel input{padding:11px;border:1px solid #777064;border-radius:8px;background:#101411;color:#f2ece0}.ops-header{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:14px;padding:18px 20px;border:1px solid #5c5d55;border-radius:16px;background:linear-gradient(145deg,#29302b,#151a17)}.ops-header>div:last-child{display:flex;gap:7px;flex-wrap:wrap}.ops-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}.ops-metrics article{min-height:96px;padding:14px;border:1px solid #5d5e55;border-radius:12px;background:linear-gradient(160deg,#262c28,#171b18)}.ops-metrics span{display:block;font-size:7px;font-weight:950;letter-spacing:.12em;color:#aaa69c}.ops-metrics strong{display:block;margin-top:7px;font-size:31px;line-height:1}.ops-metrics small{display:block;margin-top:5px;color:#97958d;font-size:8px}.ops-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:10px}.ops-panel{min-width:0;border:1px solid #565950;border-radius:14px;background:#171c19;box-shadow:0 14px 34px rgba(0,0,0,.25);overflow:hidden}.ops-panel>header{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #424740;background:#222824}.ops-panel>header strong{font-size:11px}.ops-panel>header small{font-size:8px;color:#969a92}.ops-table-wrap{overflow:auto}.ops-table{width:100%;border-collapse:collapse;min-width:720px}.ops-table th,.ops-table td{padding:9px 10px;border-bottom:1px solid #303631;text-align:left;font-size:9px;vertical-align:top}.ops-table th{position:sticky;top:0;background:#1c221e;color:#999f97;font-size:7px;letter-spacing:.08em}.ops-table td small{display:block;margin-top:2px;color:#858b84;font-size:7px}.ops-status{display:inline-flex;padding:3px 6px;border-radius:999px;background:#343b36;font-size:7px;font-weight:950}.ops-status.status-active{background:#244c35;color:#aee4bf}.ops-status.status-waiting{background:#554620;color:#ead899}.ops-status.status-ended{background:#313633;color:#a7ada8}.ops-queue{padding:10px;display:grid;gap:6px}.ops-queue article{padding:9px;border:1px solid #383e39;border-radius:9px;background:#202622}.ops-queue span{font-size:6px;color:#b69a58;font-weight:950;letter-spacing:.09em}.ops-queue strong{display:block;margin-top:2px;font-size:9px}.ops-queue small{color:#92978f;font-size:7px}.ops-empty{padding:24px;text-align:center;color:#828981}.ops-runtime{display:grid;gap:5px;padding:11px;border-top:1px solid #3d433e}.ops-runtime span{font-size:7px;color:#8f958e;letter-spacing:.06em}.ops-runtime b{display:block;margin-top:2px;color:#d4d1c9;word-break:break-word}.ops-shell>.error{margin-top:10px}@media(max-width:900px){.ops-metrics{grid-template-columns:1fr 1fr}.ops-grid{grid-template-columns:1fr}.ops-header{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.ops-shell{padding-top:8px}.ops-metrics{grid-template-columns:1fr 1fr}.ops-metrics article{min-height:78px;padding:10px}.ops-metrics strong{font-size:25px}.ops-header{padding:13px}.ops-login-panel{padding:20px}}


/* v7.63 — per-card artwork focus, shared by every presentation surface */
.card-art-window.has-art img,.modal-art-window.has-art img,.catalog-art-stage>img,.collection-preview-art>img{object-position:var(--art-focus-x,50%) var(--art-focus-y,50%);}
.catalog-art-stage>img[style],.collection-preview-art>img[style]{object-position:var(--art-focus-x,50%) var(--art-focus-y,50%);}


/* v7.64 — real-art finish review lab */
.finish-review-shell{width:min(1380px,100%);margin:0 auto;padding:22px 0 42px}.finish-review-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:18px 20px;margin-bottom:12px;border:1px solid #625a4d;border-radius:16px;background:linear-gradient(145deg,#2b302c,#151917);color:#efe8db}.finish-review-head>div:first-child>span{font-size:8px;font-weight:950;letter-spacing:.15em;color:#c3a75f}.finish-review-head h1{margin:6px 0 4px;text-transform:uppercase;font-family:"Arial Narrow","Bahnschrift SemiCondensed",Inter,sans-serif}.finish-review-head p{margin:0;color:#a8aaa4;font-size:10px}.finish-review-head>div:last-child{display:flex;align-items:end;gap:7px}.finish-review-head label{display:grid;gap:4px;color:#a9aca5;font-size:7px;font-weight:900;letter-spacing:.08em}.finish-review-head select{min-width:220px;padding:8px;border:1px solid #716b60;border-radius:8px;background:#eee8dc;color:#282722}.finish-review-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border:1px solid #625942;border-radius:18px;background:radial-gradient(circle at 50% 0,rgba(190,148,66,.11),transparent 34%),linear-gradient(145deg,#222823,#101411);box-shadow:0 24px 60px rgba(0,0,0,.35)}.finish-review-column{display:grid;justify-items:center;align-content:start;gap:8px;padding:10px;border:1px solid rgba(213,194,152,.15);border-radius:12px;background:rgba(255,255,255,.025)}.finish-review-column>header{width:100%;display:flex;justify-content:space-between;align-items:baseline;color:#dad4c8}.finish-review-column>header strong{font-size:13px;color:#d6b763}.finish-review-column>header span{font-size:7px;color:#969b94}.finish-review-card{--review-w:220px;width:var(--review-w);max-width:100%}.finish-review-card .catalog-card-face{width:100%;min-height:314px}.finish-review-column>small{color:#8f958e;font-size:7px;line-height:1.4;text-align:center}.finish-review-note{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid #c6bcac;border-radius:10px;background:#e9e3d8;color:#3c3832}.finish-review-note b{font-size:9px}.finish-review-note span{padding:3px 6px;border-radius:999px;background:#292d29;color:#eee6d6;font-size:8px}.finish-review-note small{margin-left:auto;color:#756f66;font-size:8px}@media(max-width:1000px){.finish-review-grid{grid-template-columns:1fr 1fr}.finish-review-head{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.finish-review-grid{grid-template-columns:1fr}.finish-review-head>div:last-child{width:100%;align-items:stretch;flex-direction:column}.finish-review-head select{width:100%;min-width:0}.finish-review-card{--review-w:250px}.finish-review-note{align-items:flex-start;flex-wrap:wrap}.finish-review-note small{margin-left:0;flex-basis:100%}}


/* v7.65 — external Alpha UX cleanup */
.lobby-connection-status{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid rgba(213,196,159,.18);border-radius:10px;background:linear-gradient(180deg,rgba(43,50,45,.94),rgba(24,29,26,.96));color:#e8e2d7;box-shadow:inset 0 1px rgba(255,255,255,.04)}.lobby-connection-status>i{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#6d766e;box-shadow:0 0 0 3px rgba(109,118,110,.12)}.lobby-connection-status.tone-live>i{background:#55b779;box-shadow:0 0 0 3px rgba(85,183,121,.12),0 0 10px rgba(85,183,121,.22)}.lobby-connection-status.tone-offline>i{background:#bd594a;box-shadow:0 0 0 3px rgba(189,89,74,.12)}.lobby-connection-status div{display:grid;gap:1px}.lobby-connection-status span{font-size:9px;font-weight:900}.lobby-connection-status small{color:#989e97;font-size:7px}.tester-support-drawer{margin-top:12px;opacity:.92}.tester-support-drawer>summary{min-height:44px}.tester-support-drawer .connection-diagnostics{margin-top:8px}.profile-strip .profile-identity small{max-width:360px;color:#837d74}.collection-toolbar>.muted{max-width:560px}@media(max-width:760px){.lobby-connection-status{padding:8px 9px}.tester-support-drawer{margin-top:8px}}


/* v7.66 — human playtest signal readout */
.analytics-human-signals{margin-top:9px;padding:10px;border:1px solid #d4ccbf;border-radius:10px;background:#f5f1ea}.analytics-signal-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.analytics-signal-head b{font-size:10px}.analytics-signal-head span{font-size:7px;color:#81796f}.analytics-friction{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}.analytics-friction>span{padding:7px;border:1px solid #ddd5c9;border-radius:8px;background:#fff}.analytics-friction small{display:block;font-size:6px;letter-spacing:.08em;color:#877c6d}.analytics-friction b{display:block;margin:2px 0;font-size:17px}.analytics-friction em{font-size:7px;color:#756f66;font-style:normal}.analytics-human-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.analytics-human-grid>div{display:grid;align-content:start;gap:3px;padding:8px;border:1px solid #ddd5c9;border-radius:8px;background:#fff}.analytics-human-grid>div>b{margin-bottom:3px;font-size:8px}.analytics-human-grid span{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px solid #eee9e1}.analytics-human-grid strong{font-size:7px}.analytics-human-grid em{font-size:6.5px;color:#777067;font-style:normal;text-align:right}.analytics-actions button{min-height:28px}@media(max-width:760px){.analytics-friction,.analytics-human-grid{grid-template-columns:1fr}.analytics-signal-head{flex-direction:column}}

/* v7.68.1 — lobby responsive + localization follow-up */
.lobby-hero-actions button:not(.primary) { color:#24231f; }
.lobby-hero-actions button.primary { color:#fff8e9; }

@media (min-width:1800px) {
  .app { max-width:1720px; }
  .profile-strip,
  .alpha-session-strip,
  .lobby-command-center,
  .lobby-playtest-drawer { width:min(1540px,calc(100% - 48px)); max-width:1540px; }
  .lobby-command-center { grid-template-columns:minmax(0,1.62fr) minmax(360px,.78fr); gap:18px; }
  .lobby-primary-column,.lobby-secondary-column { gap:14px; }
  .lobby-hero { padding:22px 24px; }
  .lobby-hero strong { font-size:32px; }
  .quick-match-box { padding:17px; }
  .starter-guide { padding:17px; }
  .starter-identity { min-height:154px; }
}

@media (max-width:620px) {
  .topbar { min-height:56px; padding:0 12px; gap:10px; }
  .topbar > div { min-width:0; display:flex; align-items:center; gap:8px; }
  .topbar strong { white-space:nowrap; font-size:12px; }
  .topbar .muted { max-width:116px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
  .language-switcher { flex:0 0 auto; }
  .language-switcher select { min-width:74px; min-height:36px; padding-left:8px; padding-right:22px; }
  .app { padding:10px 8px 22px; }
  .profile-strip { margin:8px 0; border-radius:13px; }
  .profile-rename { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .profile-rename input { width:100%; }
  .alpha-session-strip { margin:8px 0 10px; }
  .lobby-command-center { width:100%; padding:8px; }
  .lobby-hero { gap:12px; padding:14px; }
  .lobby-hero strong { font-size:clamp(24px,8vw,34px); overflow-wrap:anywhere; }
  .lobby-hero small { font-size:11px; }
  .lobby-hero-actions { display:grid; grid-template-columns:1fr; gap:8px; }
  .lobby-hero-actions button { width:100%; min-height:48px; color:#24231f; }
  .lobby-hero-actions button.primary { color:#fff8e9; }
  .quick-match-controls { grid-template-columns:1fr; }
  .quick-match-controls > button { grid-column:auto; width:100%; min-width:0; }
  .starter-guide-grid { margin-inline:-2px; }
  .lobby-playtest-drawer { width:100%; }
}


/* v7.68.3 — responsive, card-state and match-surface polish */
.mulligan-hand .card.selected::before { content:none; }
.mulligan-replace-marker {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-6deg); z-index:12;
  padding:5px 9px; border-radius:999px; background:#255f98; color:#fff; font-size:8px; font-style:normal;
  font-weight:950; letter-spacing:.10em; box-shadow:0 4px 14px rgba(20,50,80,.24); pointer-events:none;
}
.booster-hit.collection-new-pull { box-shadow:0 10px 25px rgba(47,139,87,.18), inset 0 0 0 1px rgba(95,177,124,.35); }
.booster-hit.new-pull::after { content:none; }
.archive-grid { grid-template-columns:repeat(auto-fill,124px); justify-content:start; align-items:start; gap:8px; }
.archive-grid .card { width:124px; min-width:124px; max-width:124px; height:174px; min-height:174px; max-height:174px; }
.zone-transition-cue.with-card { min-width:330px; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:10px; }
.zone-transition-cue .zone-transition-copy { display:grid; gap:2px; min-width:0; }
.zone-search-card { width:92px; min-width:92px; }
.zone-search-card .catalog-card-face { width:92px; min-width:92px; max-width:92px; min-height:128px; pointer-events:none; }
.zone-transition-cue.search_complete.with-card { animation-duration:2.4s; }

@media (min-width:2200px) {
  .app { max-width:2560px; }
  .profile-strip,
  .alpha-session-strip,
  .lobby-command-center,
  .lobby-playtest-drawer { width:min(2360px,calc(100% - 96px)); max-width:2360px; }
  .lobby-command-center { grid-template-columns:minmax(0,1.72fr) minmax(460px,.72fr); gap:24px; }
  .lobby-primary-column,.lobby-secondary-column { gap:18px; }
  .lobby-hero { padding:26px 28px; }
  .lobby-hero strong { font-size:36px; }
  .quick-match-box,.starter-guide { padding:20px; }
  .starter-guide-grid { gap:10px; }
  .starter-identity { min-height:174px; padding:13px; }
}

@media (max-width:620px) {
  html,body { overflow-x:hidden; }
  .app { padding:8px 7px 20px; }
  .profile-strip,.alpha-session-strip,.lobby-command-center,.lobby-playtest-drawer { min-width:0; }
  .profile-strip { padding:9px; }
  .profile-stats { gap:5px; }
  .profile-stats > span { padding:5px 7px; }
  .alpha-session-strip { padding:8px 9px; }
  .lobby-hero { padding:12px; gap:10px; }
  .lobby-hero strong { font-size:clamp(21px,6.8vw,28px); line-height:1.08; overflow-wrap:normal; word-break:normal; }
  .lobby-hero small { font-size:9px; line-height:1.35; }
  .lobby-hero-actions { display:grid; grid-template-columns:1fr; width:100%; gap:7px; }
  .lobby-hero-actions button,.lobby-hero-actions button.primary { display:flex; align-items:center; justify-content:center; width:100%; min-height:43px; font-size:13px; line-height:1.2; text-indent:0; opacity:1; }
  .lobby-hero-actions button:not(.primary) { color:#24231f !important; }
  .lobby-hero-actions button.primary { color:#fff8e9 !important; }
  .quick-match-controls { display:grid; grid-template-columns:minmax(0,1fr) !important; gap:7px; }
  .quick-match-controls > *,.quick-match-controls > button { grid-column:1 !important; width:100%; min-width:0; }
  .starter-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; scroll-snap-type:none; margin-inline:0; gap:7px; }
  .starter-identity { min-width:0; min-height:148px; }
  .archive-grid { grid-template-columns:repeat(auto-fill,112px); }
  .archive-grid .card { width:112px; min-width:112px; max-width:112px; height:157px; min-height:157px; max-height:157px; }
  .zone-transition-cue.with-card { min-width:0; width:min(310px,calc(100vw - 16px)); grid-template-columns:78px minmax(0,1fr); }
  .zone-search-card,.zone-search-card .catalog-card-face { width:78px; min-width:78px; max-width:78px; }
  .zone-search-card .catalog-card-face { min-height:109px; }
}
@media (max-width:460px) {
  .starter-guide-grid { grid-template-columns:1fr; }
  .starter-identity { min-height:128px; }
}

/* v7.68.4 — stable match chrome, combat readability and responsive density */
/* Server commit acknowledgements are presentation overlays, never layout participants. */
.app { overflow-anchor:none; }
.game-shell { overflow-anchor:none; }
.intent-commit-status {
  position:fixed;
  z-index:365;
  top:calc(54px + env(safe-area-inset-top));
  left:50%;
  width:min(960px,calc(100vw - 28px));
  max-width:none;
  margin:0;
  transform:translateX(-50%);
  pointer-events:none;
  box-shadow:0 10px 30px rgba(34,45,55,.14);
}

/* Auto-pass must not make combat visually disappear for the defending player. */
.attack-presentation {
  position:fixed;
  z-index:355;
  top:calc(104px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  width:min(520px,calc(100vw - 28px));
  min-height:42px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid rgba(196,108,77,.52);
  border-left:5px solid #b45138;
  border-radius:11px;
  background:linear-gradient(135deg,rgba(67,31,25,.97),rgba(29,28,25,.98));
  color:#fff7ec;
  box-shadow:0 18px 46px rgba(24,13,10,.34);
  pointer-events:none;
}
.attack-presentation > span { grid-column:1/-1; color:#e6a38d; font-size:7px; font-weight:1000; letter-spacing:.14em; }
.attack-presentation > strong,.attack-presentation > b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.attack-presentation > i { color:#d9987f; font-style:normal; font-weight:1000; }
.attack-presentation.own { border-color:rgba(186,144,72,.46); border-left-color:#9f762f; background:linear-gradient(135deg,rgba(55,44,25,.97),rgba(29,28,25,.98)); }
.attack-presentation.own > span { color:#d8bd78; }

/* Match-complete actions get their own row so neither victory nor defeat copy can overlap them. */
.match-result-panel { grid-template-columns:auto minmax(0,1fr); align-items:start; }
.match-result-copy { min-width:0; }
.match-result-actions {
  grid-column:1/-1;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  justify-content:stretch;
}
.match-result-actions button { width:100%; min-width:0; }

/* 4K: keep the gained breathing room, but stop the lobby from stretching into a sparse wall. */
@media (min-width:2200px) {
  .app { max-width:2220px; }
  .profile-strip,
  .alpha-session-strip,
  .lobby-command-center,
  .lobby-playtest-drawer { width:min(2100px,calc(100% - 120px)); max-width:2100px; }
  .lobby-command-center { grid-template-columns:minmax(0,1.55fr) minmax(430px,.76fr); gap:20px; }
  .lobby-primary-column,.lobby-secondary-column { gap:15px; }
  .lobby-hero { padding:22px 24px; }
  .lobby-hero strong { font-size:34px; }
  .quick-match-box,.starter-guide { padding:17px; }
  .starter-guide-grid { gap:8px; }
  .starter-identity { min-height:150px; padding:11px; }
}

@media (max-width:620px) {
  .intent-commit-status { top:calc(60px + env(safe-area-inset-top)); width:calc(100vw - 16px); min-height:34px; }
  .attack-presentation { top:calc(104px + env(safe-area-inset-top)); width:calc(100vw - 16px); grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); padding:8px 9px; }
  .attack-presentation > span { grid-column:1/-1; }
  .attack-presentation > strong,.attack-presentation > b { font-size:10px; }

  .starter-guide { padding:10px; }
  .starter-guide-head { margin-bottom:7px; }
  .starter-identity { min-height:0 !important; padding:9px 10px; gap:5px; }
  .starter-identity > strong { line-height:1.18; }
  .starter-identity > small { line-height:1.25; }
  .starter-identity > em { margin-top:6px; }

  .rules-primer > summary,
  .private-room-drawer > summary,
  .lobby-playtest-drawer > summary {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:4px;
    padding:10px 12px;
  }
  .rules-primer > summary small,
  .private-room-drawer > summary small,
  .lobby-playtest-drawer > summary small {
    max-width:none;
    text-align:left;
    font-size:8px;
    line-height:1.25;
  }
  .match-result-actions { grid-template-columns:1fr 1fr; }
  .match-result-actions .primary { grid-column:1/-1; }
}

@media (max-width:420px) {
  .match-result-actions { grid-template-columns:1fr; }
  .match-result-actions .primary { grid-column:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .attack-presentation { transition:none !important; animation:none !important; }
}

/* v7.69.0 — Board-first match UI handoff
   Stitch supplies composition + HUD references. The arena art itself is deliberately decoupled:
   --match-arena-image can point at a local /art/boards/* asset without changing game geometry. */
body.match-mode {
  --arena-bg:#07101f;
  --arena-panel:#111b2d;
  --arena-panel-strong:#162238;
  --arena-line:rgba(142,213,255,.24);
  --arena-line-soft:rgba(189,200,209,.12);
  --arena-text:#dae2fd;
  --arena-muted:#91a0b1;
  --arena-primary:#8ed5ff;
  --arena-green:#4ae176;
  --arena-red:#ff929a;
  margin:0;
  background:#050b15;
  color:var(--arena-text);
  scrollbar-gutter:stable;
}
body.match-viewport-locked { overflow:hidden; }
body.match-mode.match-ended { overflow:auto; }
body.match-mode .topbar {
  min-height:46px;
  height:46px;
  padding:0 14px;
  border-bottom:1px solid rgba(142,213,255,.18);
  background:rgba(6,14,32,.96);
  color:var(--arena-text);
  box-shadow:none;
  backdrop-filter:blur(14px);
}
body.match-mode .topbar .muted {
  border-color:rgba(189,200,209,.18);
  background:rgba(255,255,255,.05);
  color:#a7b4c2;
}
body.match-mode .language-switcher { color:#aebac8; }
body.match-mode .language-switcher select,
body.match-mode #leaveBtn {
  border-color:rgba(142,213,255,.22);
  background:#111b2d;
  color:#dae2fd;
}
body.match-mode .app {
  width:100%;
  max-width:none;
  height:calc(100dvh - 46px);
  margin:0;
  padding:0;
  overflow:hidden;
}
body.match-mode.match-ended .app { height:auto; min-height:calc(100dvh - 46px); overflow:visible; }
body.match-mode .game-shell.board-first-shell {
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:var(--arena-bg);
  color:var(--arena-text);
  --dept-accent:var(--arena-primary);
  --dept-soft:rgba(142,213,255,.08);
}
body.match-mode.match-ended .game-shell.board-first-shell { min-height:calc(100dvh - 46px); height:calc(100dvh - 46px); }
.arena-background-layer {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%,rgba(38,83,111,.14),transparent 46%),
    linear-gradient(180deg,#07101f 0%,#050b15 100%);
}
body.match-mode .game-main {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:0;
  padding:6px 8px 7px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:5px;
}
body.match-mode .match-opening {
  position:absolute;
  z-index:42;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,calc(100% - 28px));
  margin:0;
  padding:7px 10px;
  border-color:rgba(142,213,255,.3);
  background:rgba(13,24,42,.95);
  color:var(--arena-text);
  backdrop-filter:blur(14px);
}
body.match-mode .match-deck small,
body.match-mode .match-opening-center span,
body.match-mode .match-opening-center small { color:#a8b4c2; }
body.match-mode .match-deck > span { background:#1b2b43; color:#9bddff; }

.arena-top-stack {
  min-height:40px;
  display:grid;
  grid-template-columns:minmax(210px,.8fr) minmax(480px,1.9fr);
  align-items:stretch;
  gap:6px;
  overflow:visible;
}
body.match-mode .turn-banner {
  min-height:40px;
  margin:0;
  padding:6px 9px;
  border:1px solid var(--arena-line-soft);
  border-left:3px solid var(--arena-primary);
  border-radius:5px;
  background:rgba(17,27,45,.9);
  color:var(--arena-text);
  box-shadow:none;
}
body.match-mode .turn-label { color:var(--arena-primary); font-size:9px; letter-spacing:.12em; }
body.match-mode .turn-detail { color:#9eabb9; font-size:8px; }
body.match-mode .turn-banner.opponent { border-left-color:var(--arena-red); }
body.match-mode .turn-banner.opponent .turn-label { color:#ffb7bb; }
body.match-mode .turn-banner.response,
body.match-mode .turn-banner.decision { border-left-color:#d5a74a; }
body.match-mode .phase-track {
  min-height:40px;
  margin:0;
  padding:3px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:3px;
  border:1px solid var(--arena-line-soft);
  border-radius:5px;
  background:rgba(17,27,45,.82);
  box-shadow:none;
  backdrop-filter:blur(12px);
}
body.match-mode .phase-track span {
  min-width:0;
  padding:4px 6px;
  border-color:transparent;
  background:transparent;
  color:#7f8c9c;
  border-radius:3px;
}
body.match-mode .phase-track span b { font-size:7px; letter-spacing:.08em; }
body.match-mode .phase-track span small { display:none; }
body.match-mode .phase-track span.active { background:rgba(142,213,255,.09); color:var(--arena-primary); box-shadow:inset 0 -2px var(--arena-primary); }
body.match-mode .phase-track span.complete { color:#6f8091; }

.arena-layout {
  min-height:0;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(250px,18vw,320px);
  gap:6px;
  overflow:hidden;
}
.arena-board-column {
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(142,213,255,.16);
  border-radius:6px;
  background:rgba(7,16,31,.58);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.battlefield-surface {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:0;
  padding:4px 6px;
  display:grid;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:2px;
  overflow:hidden;
  overflow-anchor:none;
  background:transparent;
}
.arena-surface-layer {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(7,16,31,.56),rgba(7,16,31,.18) 36%,rgba(7,16,31,.18) 64%,rgba(7,16,31,.56)),
    linear-gradient(180deg,rgba(7,16,31,.24),rgba(4,10,20,.52)),
    var(--match-arena-image,linear-gradient(135deg,#172235 0%,#101c2f 46%,#0d1728 100%));
  background-position:center,center,var(--match-arena-position,50% 50%);
  background-size:cover,cover,var(--match-arena-size,cover);
  background-repeat:no-repeat;
  filter:saturate(.92) contrast(1.03);
}
.arena-surface-layer::before {
  content:'';
  position:absolute;
  inset:9px 10px;
  border:1px solid rgba(142,213,255,.11);
  border-radius:5px;
  background:
    linear-gradient(90deg,transparent 49.88%,rgba(142,213,255,.11) 50%,transparent 50.12%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 72px);
  box-shadow:inset 0 0 80px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.32);
}
.arena-surface-layer::after {
  content:'OFFICE CARD GAME';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(142,213,255,.055);
  font-size:clamp(18px,2vw,34px);
  font-weight:900;
  letter-spacing:.18em;
  white-space:nowrap;
}

body.match-mode .player-board {
  position:relative;
  z-index:1;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  padding:5px 104px 5px 158px;
  display:grid;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:3px;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
  overflow-anchor:none;
}
body.match-mode .opponent-board { grid-row:1; padding-top:40px; }
body.match-mode .own-board { grid-row:2; padding-bottom:84px; }
body.match-mode .player-board::after {
  content:'';
  position:absolute;
  left:155px;
  right:100px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--arena-line),transparent);
  opacity:.55;
  pointer-events:none;
}
body.match-mode .opponent-board::after { bottom:0; }
body.match-mode .own-board::after { top:0; }

body.match-mode .player-head {
  position:absolute;
  z-index:8;
  left:8px;
  width:235px;
  min-height:32px;
  margin:0;
  padding:5px 7px;
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(142,213,255,.16);
  border-radius:4px;
  background:rgba(12,23,40,.88);
  color:var(--arena-text);
  backdrop-filter:blur(10px);
}
body.match-mode .opponent-board .player-head { top:3px; }
body.match-mode .own-board .player-head { bottom:4px; }
body.match-mode .player-identity { gap:6px; }
body.match-mode .player-identity > div > strong { color:#e8efff; font-size:9px; }
body.match-mode .player-identity > div > small { max-width:130px; color:#8f9eaf; font-size:6.5px; }
body.match-mode .player-department-mark.player-role-mark {
  min-width:30px;
  height:22px;
  padding:0 5px;
  border-color:rgba(142,213,255,.28);
  background:rgba(56,189,248,.10);
  color:#8ed5ff;
  font-size:6px;
}
body.match-mode .opponent-board .player-department-mark.player-role-mark {
  border-color:rgba(255,146,154,.28);
  background:rgba(255,146,154,.08);
  color:#ffb5ba;
}
body.match-mode .player-head-status { min-width:0; display:flex; align-items:center; gap:4px; }
body.match-mode .player-vitals { gap:2px; }
body.match-mode .player-vitals .vital {
  min-width:38px;
  padding:3px 4px;
  border:1px solid rgba(189,200,209,.12);
  border-radius:3px;
  background:#0a1425;
  color:#cbd6e8;
}
body.match-mode .player-vitals .vital small { font-size:5px; color:#7f8fa2; }
body.match-mode .player-vitals .vital b { font-size:8px; }
body.match-mode .player-vitals .vital.rep b { color:#fff; }
body.match-mode .player-vitals .vital.cap b { color:var(--arena-green); }
body.match-mode .board-state-pill,
body.match-mode .presence-pill { font-size:5.5px; padding:2px 4px; }
body.match-mode .presence-pill.connected { background:rgba(74,225,118,.10); color:#78ee98; border-color:rgba(74,225,118,.22); }

/* Detailed resource cards remain in the DOM for compatibility/provenance, but the board-first HUD uses the compact vitals above. */
body.match-mode .player-board .battlefield-scan,
body.match-mode .player-board .resource-cluster,
body.match-mode .player-board > .zone-title,
body.match-mode .opponent-hand-zone { display:none !important; }
body.match-mode .board-resource-row {
  position:absolute;
  z-index:6;
  right:7px;
  width:88px;
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
}
body.match-mode .opponent-board .board-resource-row { top:40px; }
body.match-mode .own-board .board-resource-row { bottom:42px; }
body.match-mode .deck-pile {
  min-width:0;
  min-height:36px;
  padding:4px 5px;
  border:1px solid rgba(142,213,255,.16);
  border-radius:3px;
  background:rgba(9,18,33,.88);
  color:#cbd7e8;
}
body.match-mode .deck-pile span { font-size:5px; color:#8090a2; }
body.match-mode .deck-pile strong { font-size:14px; color:#dce8fa; }
body.match-mode .deck-pile small { display:none; }
body.match-mode .archive-compact {
  border:1px solid rgba(142,213,255,.14);
  border-radius:3px;
  background:rgba(9,18,33,.88);
  color:#cbd7e8;
  overflow:visible;
}
body.match-mode .archive-compact summary { min-height:32px; padding:4px 5px; color:#cbd7e8; }
body.match-mode .archive-compact summary span { font-size:5px; color:#8090a2; }
body.match-mode .archive-compact summary strong { font-size:12px; }
body.match-mode .archive-compact summary small { display:none; }
body.match-mode .archive-compact[open] .archive-grid {
  position:absolute;
  z-index:80;
  right:0;
  top:100%;
  width:min(520px,62vw);
  max-height:44vh;
  overflow:auto;
  padding:8px;
  border:1px solid rgba(142,213,255,.22);
  border-radius:4px;
  background:rgba(8,17,31,.98);
  box-shadow:0 20px 55px rgba(0,0,0,.45);
}

body.match-mode .pending-lane {
  position:absolute;
  z-index:7;
  right:101px;
  width:150px;
  max-height:84px;
  overflow:auto;
  padding:4px;
  border-color:rgba(213,167,74,.26);
  background:rgba(29,25,17,.9);
  color:#e8dfc8;
}
body.match-mode .opponent-board .pending-lane { top:40px; }
body.match-mode .own-board .pending-lane { bottom:42px; }

body.match-mode .slots.employee-row,
body.match-mode .slots.support-row,
body.match-mode .slots.support {
  position:relative;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  margin:0;
  padding:3px 5px;
  align-items:center;
  justify-content:center;
  gap:5px;
  overflow:visible;
  border:1px solid rgba(142,213,255,.075);
  border-radius:3px;
  background:rgba(8,18,33,.18);
  box-shadow:inset 0 0 28px rgba(0,0,0,.12);
}
body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(70px,116px)); }
body.match-mode .slots.support-row,
body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(70px,116px)); }
body.match-mode .opponent-board .support-row { grid-row:1; }
body.match-mode .opponent-board .employee-row { grid-row:2; }
body.match-mode .own-board .employee-row { grid-row:1; }
body.match-mode .own-board .support-row { grid-row:2; }
body.match-mode .board-lane::before { display:none; }
body.match-mode .employee-row::after,
body.match-mode .support-row::after {
  position:absolute;
  left:7px;
  top:5px;
  color:rgba(189,200,209,.26);
  font-size:5px;
  font-weight:900;
  letter-spacing:.14em;
  pointer-events:none;
}
body.match-mode .employee-row::after { content:'EMPLOYEES · 5'; }
body.match-mode .support-row::after { content:'SUPPORT / SYSTEM · 4'; }

body.match-mode .employee-row > .card,
body.match-mode .support-row > .card,
body.match-mode .employee-row > .empty-slot,
body.match-mode .support-row > .empty-slot {
  width:100%;
  min-width:0;
  max-width:116px;
  height:auto;
  min-height:0;
  max-height:162px;
  aspect-ratio:5/7;
  align-self:center;
  padding:4px;
  border-radius:4px;
  overflow:hidden;
  overflow-anchor:none;
}
body.match-mode .field-empty:not(.slot-candidate) {
  border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(17,31,52,.30),rgba(6,14,26,.34));
  color:rgba(189,200,209,.30);
  box-shadow:
    inset 0 4px 6px -1px rgba(0,0,0,.50),
    inset 0 2px 4px -1px rgba(0,0,0,.30);
}
body.match-mode .field-empty:not(.slot-candidate)::before {
  border-color:rgba(142,213,255,.10);
  color:rgba(189,200,209,.24);
}
body.match-mode .field-empty.slot-candidate {
  border-color:rgba(74,225,118,.62);
  background:rgba(25,83,48,.24);
  box-shadow:
    inset 0 4px 6px -1px rgba(0,0,0,.46),
    inset 0 2px 4px -1px rgba(0,0,0,.28),
    inset 0 0 10px rgba(74,225,118,.16),
    0 0 0 1px rgba(74,225,118,.25),
    0 0 22px rgba(74,225,118,.12);
}
body.match-mode .board-lane .card {
  background:#e8e4da;
  color:#171c24;
  box-shadow:0 7px 18px rgba(0,0,0,.25);
  transition:box-shadow .14s ease,border-color .14s ease,filter .14s ease,opacity .14s ease;
}
body.match-mode .board-lane .card:not(.hidden-card):hover,
body.match-mode .board-lane .card:focus-visible { transform:none !important; }
body.match-mode .board-lane .card .card-rules-mini,
body.match-mode .board-lane .card .card-tags,
body.match-mode .board-lane .card .card-detail-row { display:none; }
body.match-mode .board-lane .card .card-art-stage { min-height:0; flex:1 1 auto; }
body.match-mode .board-lane .card .card-name-row { min-height:23px; }
body.match-mode .board-lane .card .card-name { font-size:8px; line-height:1.05; }
body.match-mode .board-lane .card .card-cost-badge { transform:scale(.76); transform-origin:top right; }
body.match-mode .board-lane .card .card-type-strip { min-height:15px; font-size:5px; }
body.match-mode .board-lane .card .power-cluster { transform:scale(.78); transform-origin:bottom right; }

body.match-mode .hand-title { display:none !important; }
body.match-mode .own-hand {
  position:absolute;
  z-index:12;
  left:50%;
  bottom:-9px;
  transform:translateX(-50%);
  width:min(62%,700px);
  height:102px;
  padding:0 10px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:0;
  overflow:visible;
  pointer-events:none;
}
body.match-mode .own-hand .hand-fan-card {
  width:76px;
  min-width:76px;
  max-width:76px;
  height:107px;
  min-height:107px;
  max-height:107px;
  margin-left:-14px;
  padding:3px;
  pointer-events:auto;
  transform:translateY(var(--hand-y,0)) rotate(calc(var(--hand-rot,0) * .35));
  box-shadow:0 10px 24px rgba(0,0,0,.32);
}
body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0; }
body.match-mode .own-hand .hand-fan-card:hover,
body.match-mode .own-hand .hand-fan-card:focus-visible,
body.match-mode .own-hand .hand-fan-card.selected { transform:translateY(-9px) rotate(0deg) scale(1.035); }
body.match-mode .own-hand .hand-fan-card .card-rules-mini,
body.match-mode .own-hand .hand-fan-card .card-tags,
body.match-mode .own-hand .hand-fan-card .card-detail-row { display:none; }
body.match-mode .own-hand .hand-fan-card .card-name { font-size:7px; }
body.match-mode .own-hand .hand-fan-card .card-type-strip { font-size:4.5px; }
body.match-mode .own-hand .hand-fan-card .card-info { display:none; }

/* Center decisions float over the seam instead of extending document height. */
body.match-mode .office-divider,
body.match-mode .decision-center {
  position:absolute;
  z-index:30;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,68%);
  max-height:58%;
  margin:0;
  overflow:auto;
}
body.match-mode .office-divider {
  width:min(420px,42%);
  color:#8fa2b5;
  pointer-events:none;
}
body.match-mode .office-divider span {
  padding:3px 10px;
  border:1px solid rgba(142,213,255,.16);
  border-radius:999px;
  background:rgba(7,16,31,.88);
  color:#8ed5ff;
  font-size:6px;
}
body.match-mode .decision-center {
  padding:7px;
  border:1px solid rgba(142,213,255,.28);
  border-radius:5px;
  background:rgba(11,23,41,.96);
  color:#dae2fd;
  box-shadow:0 22px 65px rgba(0,0,0,.48);
  backdrop-filter:blur(16px);
}
body.match-mode .decision-center .mulligan-panel,
body.match-mode .decision-center .response-block,
body.match-mode .decision-center .decision-block {
  background:rgba(18,31,52,.96);
  color:#dae2fd;
  border-color:rgba(142,213,255,.3);
}
body.match-mode .decision-center small { color:#a7b4c2; }

.arena-sidepanel {
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border:1px solid rgba(142,213,255,.14);
  border-radius:6px;
  background:rgba(12,23,40,.92);
  color:var(--arena-text);
  overflow:hidden;
  backdrop-filter:blur(12px);
}
.arena-sidepanel-head {
  display:grid;
  gap:2px;
  padding:8px 9px;
  border-bottom:1px solid rgba(142,213,255,.12);
  background:rgba(17,31,52,.82);
}
.arena-sidepanel-head span { color:#7f91a4; font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }
.arena-sidepanel-head strong { color:#dce8fa; font-size:10px; }
.arena-sidepanel-head small { color:#8f9eaf; font-size:7px; line-height:1.25; }
.arena-sidepanel-scroll { min-height:0; overflow:auto; padding:6px; display:grid; align-content:start; gap:6px; scrollbar-width:thin; }
.arena-sidepanel .match-context-stack,
.arena-sidepanel .match-feed,
.arena-sidepanel .guidance-coach,
.arena-sidepanel .utility-strip { margin:0; min-width:0; }
.arena-sidepanel .main-phase-context,
.arena-sidepanel .battle-phase-context,
.arena-sidepanel .end-phase-context,
.arena-sidepanel .opening-readiness,
.arena-sidepanel .resolution-trace,
.arena-sidepanel .match-feed,
.arena-sidepanel .guidance-coach,
.arena-sidepanel .playtest-tools {
  border-color:rgba(142,213,255,.14);
  border-radius:4px;
  background:rgba(8,18,33,.72);
  color:#d5e0f1;
  box-shadow:none;
}
.arena-sidepanel .match-feed-heading,
.arena-sidepanel .match-feed-item,
.arena-sidepanel .match-feed-context summary { color:#cfd9e9; }
.arena-sidepanel .match-feed-item { border-color:rgba(142,213,255,.10); background:rgba(17,31,52,.55); }
.arena-sidepanel .match-feed-item small,
.arena-sidepanel .match-feed-heading small,
.arena-sidepanel .guidance-copy span,
.arena-sidepanel .playtest-tools summary small { color:#8796a8; }
.arena-sidepanel .playtest-tools > summary { padding:7px; color:#b9c7d8; }
.arena-sidepanel .playtest-tools-grid { padding:4px; }
.arena-sidepanel .game-meta { background:#091326; color:#bac8d9; border-color:rgba(142,213,255,.12); }

/* The command dock remains the primary action surface but no longer consumes page height. */
body.match-mode .command-dock {
  position:absolute;
  z-index:36;
  right:8px;
  bottom:7px;
  width:min(320px,34%);
  max-width:none;
  min-height:42px;
  margin:0;
  padding:6px 7px;
  border:1px solid rgba(142,213,255,.22);
  border-left:3px solid var(--arena-green);
  border-radius:5px;
  background:rgba(10,22,38,.95);
  color:#dae2fd;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
}
body.match-mode .command-dock .command-hint > span { color:#69e58e; font-size:5.5px; }
body.match-mode .command-dock .command-hint > strong { color:#e4edfb; font-size:8px; }
body.match-mode .command-dock .command-hint > small { display:none; }
body.match-mode .command-dock .action-availability { display:none; }
body.match-mode .command-dock .phase-button { min-height:30px; padding:5px 8px; background:#116f8d; border-color:#63c8f7; color:#e9f7ff; font-size:8px; }
body.match-mode .command-dock .phase-risk-pill { font-size:5px; }
body.match-mode .arena-error { position:absolute; z-index:50; left:8px; bottom:8px; max-width:360px; margin:0; }

/* Inspect / hover remains a fixed layer and is explicitly excluded from scroll anchoring. */
body.match-mode .hover-card-preview {
  width:292px;
  max-height:calc(100dvh - 80px);
  overflow:auto;
  contain:layout paint style;
  overflow-anchor:none;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.48));
}
body.match-mode .hover-card-face {
  border-color:rgba(142,213,255,.32);
  background:#e9e6dc;
  color:#171c24;
}
body.match-mode .player-board .card,
body.match-mode .player-board .empty-slot,
body.match-mode .battlefield-surface { overflow-anchor:none; }

/* Gameplay event layer: readable, queued, never part of document flow. */
.gameplay-presentation {
  position:fixed;
  z-index:358;
  top:calc(94px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  width:min(430px,calc(100vw - 24px));
  min-height:58px;
  padding:7px 9px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px;
  border:1px solid rgba(142,213,255,.30);
  border-left:4px solid #4ae176;
  border-radius:5px;
  background:rgba(9,20,36,.97);
  color:#dae2fd;
  box-shadow:0 20px 55px rgba(0,0,0,.44);
  pointer-events:none;
  backdrop-filter:blur(12px);
}
.gameplay-presentation.opponent { border-left-color:#ff929a; }
.gameplay-presentation-card { width:54px; height:76px; overflow:hidden; border-radius:3px; }
.gameplay-presentation-card > .card { width:54px; min-width:54px; max-width:54px; height:76px; min-height:76px; max-height:76px; padding:2px; pointer-events:none; }
.gameplay-presentation-card .card-rules-mini,
.gameplay-presentation-card .card-tags,
.gameplay-presentation-card .card-detail-row,
.gameplay-presentation-card .card-info,
.gameplay-presentation-card .card-ability { display:none; }
.gameplay-presentation-copy { min-width:0; display:grid; gap:3px; }
.gameplay-presentation-copy span { color:#65e38a; font:800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }
.gameplay-presentation.opponent .gameplay-presentation-copy span { color:#ffacb1; }
.gameplay-presentation-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#edf4ff; font-size:12px; }
.gameplay-presentation-copy small { color:#98a7b9; font-size:7px; }
.attack-presentation {
  top:calc(94px + env(safe-area-inset-top));
  width:min(520px,calc(100vw - 24px));
  border-radius:5px;
  background:rgba(31,17,23,.97);
  box-shadow:0 20px 55px rgba(0,0,0,.44);
}
.zone-transition-cue,
.combat-moment,
.promotion-moment,
.resolution-moment,
.turn-flow-cue,
.visual-cue { pointer-events:none; }

/* Match end is a persistent battlefield state, not a transient toast. */
.match-end-overlay {
  position:fixed;
  inset:46px 0 0;
  z-index:420;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(4,9,18,.64);
  backdrop-filter:blur(8px);
}
.match-end-overlay-card {
  width:min(440px,92vw);
  padding:22px 24px;
  display:grid;
  justify-items:center;
  gap:8px;
  border:1px solid rgba(74,225,118,.46);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(14,31,46,.98),rgba(8,17,31,.99));
  color:#edf6ff;
  box-shadow:0 32px 90px rgba(0,0,0,.56),inset 0 0 42px rgba(74,225,118,.035);
  text-align:center;
}
.match-end-overlay.tone-loss .match-end-overlay-card { border-color:rgba(255,146,154,.52); box-shadow:0 32px 90px rgba(0,0,0,.56),inset 0 0 42px rgba(255,146,154,.04); }
.match-end-overlay-card > span { color:#8394a8; font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
.match-end-overlay-card > strong { color:#66e78c; font-size:28px; letter-spacing:.02em; }
.match-end-overlay.tone-loss .match-end-overlay-card > strong { color:#ff9da4; }
.match-end-overlay-card > p { margin:0; color:#b4c0ce; font-size:11px; }
.match-end-overlay-card > button { margin-top:5px; min-width:150px; background:#4ae176; color:#042411; border-color:#6bff8f; font-weight:900; }
.match-end-overlay.tone-loss .match-end-overlay-card > button { background:#8ed5ff; color:#042334; border-color:#b6e4ff; }
.match-result-detail { min-height:100dvh; padding:18px 12px 40px; background:#f4f1eb; color:#171717; }
.match-result-detail .match-result-panel { margin:0 auto; width:min(1260px,100%); }

/* Mobile is a dense battlefield, not a vertically stacked web page. */
@media (max-width:760px) {
  body.match-mode .topbar { height:44px; min-height:44px; padding:0 7px; }
  body.match-mode .topbar > div > strong { font-size:11px; }
  body.match-mode .topbar .muted { display:none; }
  body.match-mode .language-switcher > span { display:none; }
  body.match-mode .language-switcher select { max-width:88px; padding:5px 6px; font-size:9px; }
  body.match-mode #leaveBtn { padding:6px 7px; font-size:9px; }
  body.match-mode .app { height:calc(100dvh - 44px); padding:0; }
  body.match-mode.match-ended .app { height:auto; min-height:calc(100dvh - 44px); }
  body.match-mode .game-main { padding:3px; gap:3px; }
  .arena-top-stack { min-height:34px; grid-template-columns:minmax(0,1fr); }
  body.match-mode .turn-banner { min-height:34px; padding:4px 6px; }
  body.match-mode .turn-detail { font-size:6.5px; }
  body.match-mode .phase-track {
    position:absolute;
    z-index:24;
    top:38px;
    left:50%;
    transform:translateX(-50%);
    width:min(72%,360px);
    min-height:22px;
    padding:2px;
    border-radius:999px;
    grid-template-columns:repeat(4,1fr);
    background:rgba(7,16,31,.9);
  }
  body.match-mode .phase-track span { padding:3px 2px; text-align:center; }
  body.match-mode .phase-track span b { font-size:5px; }
  .arena-layout { grid-template-columns:1fr; gap:0; }
  .arena-sidepanel { display:none; }
  .arena-board-column { border-radius:4px; }
  .battlefield-surface { padding:2px; gap:1px; }
  body.match-mode .player-board {
    padding:28px 36px 2px;
    gap:2px;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  }
  body.match-mode .opponent-board { padding-top:29px; }
  body.match-mode .own-board { padding-bottom:78px; }
  body.match-mode .player-board::after { left:32px; right:32px; }
  body.match-mode .player-head {
    left:3px;
    right:3px;
    width:auto;
    min-height:25px;
    padding:3px 4px;
    border-radius:3px;
  }
  body.match-mode .opponent-board .player-head { top:2px; }
  body.match-mode .own-board .player-head { bottom:2px; width:190px; right:auto; }
  body.match-mode .player-identity > div > strong { font-size:7px; }
  body.match-mode .player-identity > div > small { max-width:72px; font-size:5px; }
  body.match-mode .player-department-mark.player-role-mark { min-width:23px; height:18px; font-size:5px; }
  body.match-mode .player-vitals .vital { min-width:31px; padding:2px 3px; }
  body.match-mode .player-vitals .vital small { font-size:4px; }
  body.match-mode .player-vitals .vital b { font-size:6.5px; }
  body.match-mode .player-vitals .vital.hand,
  body.match-mode .player-vitals .vital.deck,
  body.match-mode .board-state-pill,
  body.match-mode .presence-pill { display:none; }
  body.match-mode .board-resource-row {
    right:2px;
    width:32px;
    gap:2px;
  }
  body.match-mode .opponent-board .board-resource-row { top:30px; }
  body.match-mode .own-board .board-resource-row { bottom:28px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary { min-height:27px; padding:2px; display:grid; place-items:center; }
  body.match-mode .deck-pile span,
  body.match-mode .archive-compact summary span { font-size:3.8px; }
  body.match-mode .deck-pile strong,
  body.match-mode .archive-compact summary strong { font-size:8px; }
  body.match-mode .archive-compact summary b { display:none; }
  body.match-mode .slots.employee-row,
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    display:grid;
    grid-auto-flow:row;
    overflow:visible;
    padding:2px;
    gap:2px;
    border-radius:2px;
  }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot {
    width:100%;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:0;
    max-height:96px;
    aspect-ratio:5/7;
    padding:2px;
    scroll-snap-align:none;
  }
  body.match-mode .employee-row::after,
  body.match-mode .support-row::after { left:3px; top:2px; font-size:3.7px; }
  body.match-mode .board-lane .card .card-type-strip { display:none; }
  body.match-mode .board-lane .card .card-name-row { min-height:13px; }
  body.match-mode .board-lane .card .card-name { font-size:5px; }
  body.match-mode .board-lane .card .card-cost-badge { transform:scale(.5); }
  body.match-mode .board-lane .card .power-cluster { transform:scale(.52); }
  body.match-mode .board-lane .card .card-info { width:15px; min-width:15px; height:15px; min-height:15px; padding:0; font-size:6px; }
  body.match-mode .own-hand {
    bottom:-4px;
    width:min(74%,360px);
    height:76px;
    padding:0 4px;
  }
  body.match-mode .own-hand .hand-fan-card,
  body.match-mode .own-hand .hand-fan-card:first-child {
    width:52px;
    min-width:52px;
    max-width:52px;
    height:73px;
    min-height:73px;
    max-height:73px;
    margin-left:-10px !important;
    transform:translateY(var(--hand-y,0)) rotate(calc(var(--hand-rot,0) * .28)) !important;
  }
  body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0 !important; }
  body.match-mode .own-hand .hand-fan-card:hover,
  body.match-mode .own-hand .hand-fan-card:focus-visible,
  body.match-mode .own-hand .hand-fan-card.selected { transform:translateY(-6px) rotate(0deg) scale(1.03) !important; }
  body.match-mode .own-hand .hand-fan-card .card-type-strip,
  body.match-mode .own-hand .hand-fan-card .card-rules-mini,
  body.match-mode .own-hand .hand-fan-card .card-tags,
  body.match-mode .own-hand .hand-fan-card .card-detail-row { display:none; }
  body.match-mode .own-hand .hand-fan-card .card-name { font-size:4.8px; }
  body.match-mode .mobile-board-nav { display:none !important; }
  body.match-mode .office-divider,
  body.match-mode .decision-center { width:min(94%,620px); max-height:64%; }
  body.match-mode .decision-center { padding:5px; }
  body.match-mode .mulligan-panel { padding:7px; gap:5px; }
  body.match-mode .mulligan-panel .mulligan-copy > small { display:none; }
  body.match-mode .command-dock {
    right:3px;
    bottom:3px;
    width:108px;
    min-height:29px;
    padding:3px;
    gap:3px;
    flex-direction:column;
  }
  body.match-mode .command-dock .command-hint { display:none; }
  body.match-mode .command-dock .command-buttons { width:100%; gap:2px; }
  body.match-mode .command-dock .phase-button,
  body.match-mode .command-dock button { min-height:29px; width:100%; padding:3px 4px; font-size:6px; }
  body.match-mode .command-dock .phase-risk-pill,
  body.match-mode .command-dock .ability-hint { display:none; }
  body.match-mode .pending-lane { right:35px; width:110px; max-height:65px; }
  body.match-mode .opponent-board .pending-lane { top:30px; }
  body.match-mode .own-board .pending-lane { bottom:28px; }
  body.match-mode .hover-card-preview { display:none !important; }
  .gameplay-presentation { top:calc(50px + env(safe-area-inset-top)); width:calc(100vw - 12px); min-height:48px; padding:5px 6px; }
  .gameplay-presentation-card { width:42px; height:59px; }
  .gameplay-presentation-card > .card { width:42px; min-width:42px; max-width:42px; height:59px; min-height:59px; max-height:59px; }
  .attack-presentation { top:calc(50px + env(safe-area-inset-top)); width:calc(100vw - 12px); }
  .match-end-overlay { inset:44px 0 0; padding:12px; }
  .match-end-overlay-card { padding:18px 16px; }
  .match-end-overlay-card > strong { font-size:24px; }
  body.match-mode .match-opening { top:2px; width:calc(100% - 8px); padding:5px; }
  body.match-mode .match-opening-center span,
  body.match-mode .match-opening-center small { display:none; }
}

@media (min-width:761px) and (max-width:1180px) {
  .arena-layout { grid-template-columns:minmax(0,1fr); }
  .arena-sidepanel { display:none; }
  body.match-mode .player-board { padding-left:128px; padding-right:82px; }
  body.match-mode .player-head { width:205px; }
  body.match-mode .player-board::after { left:125px; right:79px; }
  body.match-mode .board-resource-row { width:70px; }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { max-width:102px; }
}

@media (min-width:2200px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) 340px; gap:8px; }
  body.match-mode .game-main { padding-inline:max(10px,calc((100vw - 2450px)/2)); }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(92px,132px)); }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(92px,132px)); }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { max-width:132px; max-height:185px; }
}

@media (max-height:700px) and (min-width:761px) {
  body.match-mode .topbar { height:42px; min-height:42px; }
  body.match-mode .app { height:calc(100dvh - 42px); }
  body.match-mode .game-main { padding:3px 5px; }
  .arena-top-stack { min-height:32px; }
  body.match-mode .turn-banner,
  body.match-mode .phase-track { min-height:32px; }
  body.match-mode .player-board { padding-block:2px; }
  body.match-mode .opponent-board { padding-top:34px; }
  body.match-mode .own-board { padding-bottom:68px; }
  body.match-mode .own-hand { height:82px; }
  body.match-mode .own-hand .hand-fan-card { width:62px; min-width:62px; max-width:62px; height:87px; min-height:87px; max-height:87px; }
}

@media (prefers-reduced-motion:reduce) {
  .gameplay-presentation,
  .match-end-overlay-card,
  body.match-mode .board-lane .card,
  body.match-mode .own-hand .hand-fan-card { transition:none !important; animation:none !important; }
}

/* v7.69.1 — responsive battlefield + critical mobile controls hotfix */
body.match-mode .connection-banner {
  position:fixed;
  z-index:365;
  top:54px;
  left:10px;
  width:min(390px,calc(100vw - 20px));
  margin:0;
  padding:8px 9px;
  border-color:rgba(142,213,255,.24);
  border-radius:5px;
  background:rgba(10,22,38,.97);
  color:#dce8fa;
  box-shadow:0 18px 46px rgba(0,0,0,.38);
  backdrop-filter:blur(12px);
}
body.match-mode .connection-banner strong { color:#edf5ff; }
body.match-mode .connection-banner span { color:#9eacbc; }
body.match-mode .connection-banner.superseded { border-color:rgba(255,190,104,.42); background:rgba(39,29,15,.97); }
body.match-mode .connection-banner.offline { border-color:rgba(255,146,154,.34); background:rgba(35,20,26,.97); }
body.match-mode .connection-banner button { min-height:30px; padding:5px 8px; font-size:8px; }

/* Reserve a real center seam row so front/back rows can never collide with OFFICE FLOOR. */
body.match-mode .battlefield-surface {
  grid-template-rows:minmax(0,1fr) 26px minmax(0,1fr);
  gap:0;
}
body.match-mode .opponent-board { grid-row:1; }
body.match-mode .own-board { grid-row:3; }
body.match-mode .office-divider {
  position:relative;
  z-index:20;
  grid-row:2;
  left:auto;
  top:auto;
  transform:none;
  align-self:center;
  justify-self:stretch;
  width:auto;
  min-height:22px;
  height:22px;
  margin:2px 10px;
  overflow:visible;
}
body.match-mode .decision-center {
  position:absolute;
  grid-row:auto;
}

/* Slot contents are height-constrained by their lane; no card/slot may spill into the next row. */
body.match-mode .slots.employee-row,
body.match-mode .slots.support-row,
body.match-mode .slots.support {
  min-height:0;
}
body.match-mode .employee-row > .card,
body.match-mode .support-row > .card,
body.match-mode .employee-row > .empty-slot,
body.match-mode .support-row > .empty-slot {
  justify-self:center;
  align-self:center;
  width:auto;
  height:min(100%,162px);
  max-width:116px;
  max-height:162px;
  aspect-ratio:5/7;
}

/* Mobile-only match menu keeps critical controls reachable when the desktop side panel is hidden. */
.mobile-match-menu { display:none; }

@media (max-width:760px) {
  body.match-mode .connection-banner {
    top:auto;
    bottom:88px;
    left:8px;
    width:calc(100vw - 16px);
    align-items:stretch;
    gap:6px;
  }
  body.match-mode .connection-banner > div { gap:1px; }
  body.match-mode .connection-banner span { font-size:7px; }
  body.match-mode .connection-banner button { width:auto; min-width:116px; }

  /* Setup matchup header stays informative but no longer consumes a quarter of the phone. */
  body.match-mode .match-opening {
    top:2px;
    width:calc(100% - 8px);
    min-height:0;
    padding:4px 5px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:3px 7px;
    border-radius:6px;
  }
  body.match-mode .match-opening-center {
    grid-column:1/-1;
    grid-row:1;
    order:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:18px;
  }
  body.match-mode .match-opening-center em,
  body.match-mode .match-opening-center span,
  body.match-mode .match-opening-center small { display:none; }
  body.match-mode .match-opening-center b { font-size:7px; letter-spacing:.16em; }
  body.match-mode .match-deck { grid-row:2; gap:5px; min-width:0; }
  body.match-mode .match-deck.you { grid-column:1; }
  body.match-mode .match-deck.opponent { grid-column:2; justify-content:flex-end; text-align:right; flex-direction:row; }
  body.match-mode .match-deck > span { width:26px; height:26px; flex:0 0 26px; border-radius:7px; font-size:7px; }
  body.match-mode .match-deck.opponent > span { order:2; }
  body.match-mode .match-deck div { gap:0; min-width:0; }
  body.match-mode .match-deck small { font-size:4.5px; letter-spacing:.06em; }
  body.match-mode .match-deck strong { display:block; max-width:31vw; font-size:6.5px; line-height:1.15; }

  body.match-mode .battlefield-surface { grid-template-rows:minmax(0,1fr) 22px minmax(0,1fr); }
  body.match-mode .office-divider { height:18px; min-height:18px; margin:1px 5px; }
  body.match-mode .office-divider span { padding:2px 7px; font-size:5px; }

  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot {
    width:auto;
    height:min(100%,96px);
    max-width:100%;
    max-height:96px;
  }

  /* Mulligan remains a board overlay but becomes denser and keeps both actions in one row. */
  body.match-mode .decision-center { width:min(94%,620px); max-height:58%; }
  body.match-mode .mulligan-panel { padding:6px; gap:4px; }
  body.match-mode .mulligan-copy > strong { font-size:11px; }
  body.match-mode .mulligan-meter { margin-top:4px; }
  body.match-mode .mulligan-actions { grid-template-columns:1fr 1fr; gap:4px; }
  body.match-mode .mulligan-actions b { display:none; }
  body.match-mode .mulligan-actions button { min-height:36px; padding:5px 7px; font-size:9px; }
  body.match-mode .mulligan-actions .primary { grid-column:auto; }

  .mobile-match-menu {
    position:fixed;
    z-index:372;
    right:7px;
    top:51px;
    display:block;
    color:#dce8fa;
  }
  .mobile-match-menu > summary {
    min-width:68px;
    min-height:31px;
    padding:5px 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    list-style:none;
    border:1px solid rgba(142,213,255,.24);
    border-radius:5px;
    background:rgba(10,22,38,.96);
    color:#dce8fa;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    font-size:8px;
    font-weight:900;
    cursor:pointer;
  }
  .mobile-match-menu > summary::-webkit-details-marker { display:none; }
  .mobile-match-menu > summary span { color:#7f91a5; letter-spacing:.08em; }
  .mobile-match-menu-panel {
    position:absolute;
    top:calc(100% + 5px);
    right:0;
    width:min(220px,78vw);
    padding:6px;
    display:grid;
    gap:5px;
    border:1px solid rgba(142,213,255,.22);
    border-radius:5px;
    background:rgba(8,18,33,.99);
    box-shadow:0 18px 44px rgba(0,0,0,.48);
  }
  .mobile-match-menu-panel button { width:100%; min-height:36px; padding:6px 8px; font-size:9px; }
  .mobile-match-menu-panel small { color:#8292a5; font-size:6.5px; line-height:1.35; }
}

/* 1080p-class / short desktop: reserve geometry first, then compress chrome instead of overlapping rows. */
@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .game-main { padding:4px 6px 5px; gap:4px; }
  .arena-top-stack { min-height:34px; }
  body.match-mode .turn-banner,
  body.match-mode .phase-track { min-height:34px; }
  body.match-mode .player-board { padding-top:3px; padding-bottom:3px; }
  body.match-mode .opponent-board { padding-top:35px; }
  body.match-mode .own-board { padding-bottom:72px; }
  body.match-mode .battlefield-surface { grid-template-rows:minmax(0,1fr) 24px minmax(0,1fr); }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { height:min(100%,146px); max-height:146px; }
  body.match-mode .office-divider { height:20px; min-height:20px; }
  body.match-mode .own-hand { height:88px; }
  body.match-mode .own-hand .hand-fan-card { width:66px; min-width:66px; max-width:66px; height:93px; min-height:93px; max-height:93px; }
}

/* Large/4K displays keep the arena expansive but scale cards and HUD instead of leaving a miniature interface. */
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .topbar { height:54px; min-height:54px; padding-inline:20px; }
  body.match-mode .topbar > div > strong { font-size:15px; }
  body.match-mode .app { height:calc(100dvh - 54px); }
  body.match-mode .game-main { padding:9px 12px 10px; gap:7px; }
  .arena-top-stack { min-height:50px; grid-template-columns:minmax(300px,.75fr) minmax(720px,2fr); gap:8px; }
  body.match-mode .turn-banner,
  body.match-mode .phase-track { min-height:50px; padding:6px 9px; }
  body.match-mode .turn-label { font-size:11px; }
  body.match-mode .turn-detail { font-size:10px; }
  body.match-mode .phase-track span b { font-size:9px; }
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) 390px; gap:10px; }
  body.match-mode .player-board { padding-left:205px; padding-right:135px; }
  body.match-mode .player-head { width:300px; min-height:42px; padding:7px 9px; }
  body.match-mode .player-identity > div > strong { font-size:12px; }
  body.match-mode .player-identity > div > small { max-width:175px; font-size:8px; }
  body.match-mode .player-vitals .vital { min-width:48px; height:31px; }
  body.match-mode .player-vitals .vital small { font-size:6px; }
  body.match-mode .player-vitals .vital b { font-size:10px; }
  body.match-mode .player-board::after { left:202px; right:132px; }
  body.match-mode .board-resource-row { width:112px; right:10px; }
  body.match-mode .deck-pile { min-height:46px; }
  body.match-mode .deck-pile strong { font-size:18px; }
  body.match-mode .archive-compact summary { min-height:40px; }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(0,164px)); gap:8px; }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(0,164px)); gap:8px; }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { height:min(100%,230px); max-width:164px; max-height:230px; }
  body.match-mode .board-lane .card .card-name { font-size:10px; }
  body.match-mode .board-lane .card .card-name-row { min-height:29px; }
  body.match-mode .board-lane .card .card-type-strip { font-size:6px; }
  body.match-mode .own-hand { width:min(66%,900px); height:126px; }
  body.match-mode .own-hand .hand-fan-card { width:90px; min-width:90px; max-width:90px; height:126px; min-height:126px; max-height:126px; margin-left:-16px; }
  body.match-mode .command-dock { width:380px; min-height:50px; padding:8px 9px; }
  body.match-mode .command-dock .phase-button { min-height:36px; font-size:10px; }
  .arena-sidepanel-head { padding:11px 12px; }
  .arena-sidepanel-head strong { font-size:13px; }
  .arena-sidepanel-head small { font-size:8px; }
}

@media (min-width:3200px) and (min-height:1500px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) 440px; }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(0,182px)); }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(0,182px)); }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { height:min(100%,255px); max-width:182px; max-height:255px; }
  body.match-mode .player-head { width:330px; }
  body.match-mode .own-hand .hand-fan-card { width:102px; min-width:102px; max-width:102px; height:143px; min-height:143px; max-height:143px; }
}

/* v7.69.2 — collision-free HUD geometry + no-horizontal-scroll side rail
   The battlefield keeps the v7.69 recessed slots, but every persistent HUD now owns reserved space. */
body.match-mode .player-head {
  width:min(430px,calc(100% - 112px));
  min-width:0;
  display:grid;
  grid-template-columns:minmax(92px,1fr) auto;
  align-items:center;
  gap:8px;
}
body.match-mode .player-identity,
body.match-mode .player-identity > div,
body.match-mode .player-head-status,
body.match-mode .player-vitals { min-width:0; }
body.match-mode .player-identity { overflow:hidden; }
body.match-mode .player-identity > div > strong,
body.match-mode .player-identity > div > small {
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.match-mode .player-head-status {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  flex-wrap:nowrap;
}
body.match-mode .player-vitals {
  display:grid;
  grid-template-columns:repeat(4,minmax(34px,1fr));
  gap:2px;
}
body.match-mode .player-vitals .vital { min-width:0; }

/* The hand is a real reserved bottom layer, not something that may intrude into Support/System or the own profile. */
body.match-mode .own-board { padding-bottom:112px; }
body.match-mode .own-hand {
  bottom:31px;
  width:min(58%,660px);
  height:76px;
}
body.match-mode .own-hand .hand-fan-card {
  width:60px;
  min-width:60px;
  max-width:60px;
  height:84px;
  min-height:84px;
  max-height:84px;
  margin-left:-11px;
}
body.match-mode .own-board .player-head { bottom:4px; }
body.match-mode .own-board .board-resource-row { bottom:42px; }
body.match-mode .command-dock { bottom:8px; }

/* Never let content inside the right rail widen the rail. Vertical scrolling is allowed; horizontal scrolling is not. */
.arena-sidepanel,
.arena-sidepanel-scroll,
.arena-sidepanel-scroll > *,
.arena-sidepanel .match-context-stack,
.arena-sidepanel .match-context-stack > *,
.arena-sidepanel .utility-strip,
.arena-sidepanel .playtest-tools,
.arena-sidepanel .playtest-tools-grid { min-width:0; max-width:100%; box-sizing:border-box; }
.arena-sidepanel-scroll { overflow-y:auto; overflow-x:hidden; }
.arena-sidepanel .opening-readiness,
.arena-sidepanel .main-phase-context,
.arena-sidepanel .battle-phase-context,
.arena-sidepanel .end-phase-context,
.arena-sidepanel .response-desk,
.arena-sidepanel .decision-desk { grid-template-columns:1fr; }
.arena-sidepanel .opening-readiness-head,
.arena-sidepanel .main-phase-context-head,
.arena-sidepanel .battle-phase-context-head,
.arena-sidepanel .end-phase-context-head,
.arena-sidepanel .response-desk-head,
.arena-sidepanel .decision-desk-head {
  padding-right:0;
  padding-bottom:5px;
  border-right:0;
  border-bottom:1px solid rgba(142,213,255,.10);
}
.arena-sidepanel .opening-readiness-stats,
.arena-sidepanel .main-phase-context-stats,
.arena-sidepanel .battle-phase-context-stats,
.arena-sidepanel .end-phase-context-stats,
.arena-sidepanel .response-desk-stats,
.arena-sidepanel .decision-desk-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  overflow:visible;
  padding:0;
}
.arena-sidepanel .opening-readiness-stats > span,
.arena-sidepanel .main-phase-context-stats > span,
.arena-sidepanel .battle-phase-context-stats > span,
.arena-sidepanel .end-phase-context-stats > span,
.arena-sidepanel .response-desk-stats > span,
.arena-sidepanel .decision-desk-stats > span {
  min-width:0;
  width:auto;
  max-width:100%;
  overflow:hidden;
}
.arena-sidepanel small,
.arena-sidepanel strong,
.arena-sidepanel span,
.arena-sidepanel em { overflow-wrap:anywhere; }
.arena-sidepanel .opening-readiness-stats small,
.arena-sidepanel .opening-readiness-stats em { white-space:normal; }

/* Result detail becomes its own screen after View results; battlefield HUD/phase chrome must not remain on top. */
body.match-mode .board-first-shell.results-view .arena-top-stack,
body.match-mode .board-first-shell.results-view .mobile-board-nav,
body.match-mode .board-first-shell.results-view .mobile-match-menu,
body.match-mode .board-first-shell.results-view .arena-layout,
body.match-mode .board-first-shell.results-view .match-opening,
body.match-mode .board-first-shell.results-view .connection-banner { display:none !important; }
body.match-mode .board-first-shell.results-view .game-main {
  display:block;
  min-height:calc(100dvh - 46px);
  height:auto;
  overflow:visible;
  padding:0;
}
body.match-mode .board-first-shell.results-view .match-result-detail {
  min-height:calc(100dvh - 46px);
  padding-top:18px;
}

/* Short desktop / 1K-class height: reserve enough room for both lanes, own hand and HUD instead of stacking them. */
@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .player-board { gap:5px; }
  body.match-mode .opponent-board { padding-top:42px; }
  body.match-mode .own-board { padding-bottom:101px; }
  body.match-mode .player-head { width:min(390px,calc(100% - 94px)); min-height:34px; }
  body.match-mode .player-vitals { grid-template-columns:repeat(4,minmax(32px,40px)); }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { height:min(100%,132px); max-height:132px; }
  body.match-mode .own-hand { bottom:29px; width:min(56%,600px); height:69px; }
  body.match-mode .own-hand .hand-fan-card {
    width:55px; min-width:55px; max-width:55px;
    height:77px; min-height:77px; max-height:77px;
    margin-left:-10px;
  }
  body.match-mode .own-board .board-resource-row { bottom:39px; }
}

/* Large desktop / 4K: scale the useful surfaces, not empty canvas. */
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) clamp(430px,20vw,520px); }
  body.match-mode .player-head { width:min(560px,calc(100% - 160px)); min-height:48px; }
  body.match-mode .player-vitals { grid-template-columns:repeat(4,minmax(54px,66px)); gap:4px; }
  body.match-mode .player-vitals .vital { padding:5px 6px; }
  body.match-mode .player-vitals .vital small { font-size:7px; }
  body.match-mode .player-vitals .vital b { font-size:12px; }
  body.match-mode .player-identity > div > strong { font-size:14px; }
  body.match-mode .player-identity > div > small { font-size:9px; max-width:210px; }
  body.match-mode .own-board { padding-bottom:154px; }
  body.match-mode .own-hand { bottom:39px; width:min(58%,960px); height:108px; }
  body.match-mode .own-hand .hand-fan-card {
    width:84px; min-width:84px; max-width:84px;
    height:118px; min-height:118px; max-height:118px;
    margin-left:-14px;
  }
  body.match-mode .own-board .board-resource-row { bottom:52px; }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(0,190px)); }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(0,190px)); }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { height:min(100%,266px); max-width:190px; max-height:266px; }
  .arena-sidepanel-head strong { font-size:15px; }
  .arena-sidepanel-head small { font-size:9px; }
}

@media (min-width:3200px) and (min-height:1500px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) clamp(520px,19vw,620px); }
  body.match-mode .player-head { width:min(650px,calc(100% - 190px)); }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(0,220px)); }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(0,220px)); }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { height:min(100%,308px); max-width:220px; max-height:308px; }
}

@media (max-width:760px) {
  /* Use the purpose-built compact mobile HUD instead of the desktop phase pill floating over the board. */
  body.match-mode .arena-top-stack { display:none; }
  body.match-mode .mobile-board-nav {
    position:relative;
    z-index:25;
    top:auto;
    display:block !important;
    margin:0;
    padding:3px 5px;
    border:1px solid rgba(142,213,255,.16);
    border-radius:4px;
    background:rgba(9,19,34,.94);
    box-shadow:none;
  }
  body.match-mode .mobile-match-hud { display:grid; min-height:24px; padding:1px 2px; }
  body.match-mode .mobile-match-hud > div:first-child span { color:#dce8fa; font-size:7px; }
  body.match-mode .mobile-match-hud > div:first-child small { color:#8292a5; }
  body.match-mode .mobile-phase-dots i { background:#324257; }
  body.match-mode .mobile-phase-dots i.complete { background:#5f7187; }
  body.match-mode .mobile-phase-dots i.active { background:#8ed5ff; box-shadow:0 0 0 1px rgba(142,213,255,.16); }
  body.match-mode .mobile-board-nav-actions { display:none; }
  body.match-mode .game-main { grid-template-rows:auto minmax(0,1fr); }

  /* Profile, live status, hand, Archive and primary action each get a separate bottom reservation. */
  body.match-mode .player-head {
    left:3px;
    right:3px;
    width:auto !important;
    min-height:24px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px;
  }
  body.match-mode .player-head-status { gap:2px; }
  body.match-mode .player-vitals { grid-template-columns:repeat(2,minmax(30px,38px)); gap:2px; }
  body.match-mode .player-vitals .vital.hand,
  body.match-mode .player-vitals .vital.deck,
  body.match-mode .board-state-pill,
  body.match-mode .presence-pill { display:none !important; }
  body.match-mode .player-identity > div > small { max-width:44vw; }

  body.match-mode .own-board { padding-bottom:112px; }
  body.match-mode .own-hand {
    left:5px;
    bottom:28px;
    transform:none;
    width:calc(100% - 122px);
    height:76px;
    padding:0 2px;
    justify-content:center;
  }
  body.match-mode .own-hand .hand-fan-card,
  body.match-mode .own-hand .hand-fan-card:first-child {
    width:51px; min-width:51px; max-width:51px;
    height:71px; min-height:71px; max-height:71px;
    margin-left:-9px !important;
  }
  body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0 !important; }
  body.match-mode .own-board .board-resource-row { right:3px; bottom:70px; width:31px; }
  body.match-mode .command-dock { right:3px; bottom:28px; width:112px; }
  body.match-mode .command-dock .phase-button,
  body.match-mode .command-dock button { min-height:36px; font-size:7px; }

  body.match-mode .opponent-board { padding-top:31px; }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot { height:min(100%,92px); max-height:92px; }

  .mobile-match-menu { top:49px; }
  body.match-mode .board-first-shell.results-view .match-result-detail { min-height:calc(100dvh - 44px); padding:8px 6px 24px; }
}

@media (max-width:760px) {
  /* Share the first mobile HUD row with the Match menu instead of stacking two floating controls. */
  body.match-mode .mobile-board-nav { padding-right:78px; }
  .mobile-match-menu { top:49px; }

  /* Detailed results are a single mobile column; old desktop result grids must never escape the viewport. */
  body.match-mode .board-first-shell.results-view .match-result-panel {
    width:100%;
    max-width:100%;
    margin:0;
    padding:12px 10px;
    grid-template-columns:1fr !important;
    gap:10px;
    overflow:hidden;
  }
  body.match-mode .board-first-shell.results-view .match-result-panel > *,
  body.match-mode .board-first-shell.results-view .match-result-copy,
  body.match-mode .board-first-shell.results-view .match-result-actions,
  body.match-mode .board-first-shell.results-view .match-result-summary,
  body.match-mode .board-first-shell.results-view .match-reward-panel { min-width:0; max-width:100%; }
  body.match-mode .board-first-shell.results-view .match-result-emblem { justify-self:start; }
  body.match-mode .board-first-shell.results-view .match-scoreline { width:100%; max-width:100%; }
  body.match-mode .board-first-shell.results-view .match-result-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
  }
  body.match-mode .board-first-shell.results-view .match-result-actions button { width:100%; }
}

/* v7.69.3 — rematch gate + hand scale + rail containment
   Hosted QA showed the previous collision pass was still too conservative with the hand and too permissive inside the Match HUD rail. */
body.match-mode.match-ended .game-shell.board-first-shell.results-view {
  height:auto;
  min-height:calc(100dvh - 46px);
  overflow:visible;
}
body.match-mode .board-first-shell.results-view .match-result-detail,
body.match-mode .board-first-shell.results-view .match-result-panel {
  overflow:visible;
  max-height:none;
}

.rematch-waiting-stage { text-align:center; }
.rematch-waiting-pulse {
  width:min(420px,100%);
  margin:18px auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(74,225,118,.22);
  border-radius:12px;
  background:rgba(74,225,118,.06);
}
.rematch-waiting-pulse i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#4ae176;
  box-shadow:0 0 0 5px rgba(74,225,118,.10);
}
.rematch-waiting-pulse span { font-weight:800; }

/* Use more of the available board width for the hand on desktop. */
body.match-mode .own-board { padding-bottom:142px; }
body.match-mode .own-hand {
  bottom:31px;
  width:min(68%,840px);
  height:104px;
}
body.match-mode .own-hand .hand-fan-card {
  width:78px;
  min-width:78px;
  max-width:78px;
  height:109px;
  min-height:109px;
  max-height:109px;
  margin-left:-13px;
}

/* The Match HUD is a rail, not a horizontal document. All internal dashboards reflow vertically. */
body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) clamp(330px,19vw,430px); }
.arena-sidepanel,
.arena-sidepanel-scroll { width:100%; max-width:100%; }
.arena-sidepanel-scroll { overscroll-behavior:contain; }
.arena-sidepanel .match-feed-list { grid-template-columns:1fr !important; }
.arena-sidepanel .match-feed-item,
.arena-sidepanel .match-feed-item:nth-child(n) { min-width:0; width:100%; max-width:100%; }
.arena-sidepanel .opening-readiness-stats,
.arena-sidepanel .main-phase-context-stats,
.arena-sidepanel .battle-phase-context-stats,
.arena-sidepanel .end-phase-context-stats,
.arena-sidepanel .response-desk-stats,
.arena-sidepanel .decision-desk-stats,
.arena-sidepanel .telemetry-kpis,
.arena-sidepanel .telemetry-table,
.arena-sidepanel .connection-diagnostics-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:100%;
  max-width:100%;
}
.arena-sidepanel .telemetry-kpis > span,
.arena-sidepanel .telemetry-table > div,
.arena-sidepanel .connection-diagnostics-grid > span,
.arena-sidepanel .game-meta,
.arena-sidepanel details,
.arena-sidepanel summary { min-width:0; max-width:100%; }
.arena-sidepanel .game-meta { gap:6px 8px; }
.arena-sidepanel .human-playtest-row,
.arena-sidepanel .connection-diagnostics-actions { flex-wrap:wrap; overflow-x:visible; }
.arena-sidepanel .human-playtest-row > *,
.arena-sidepanel .connection-diagnostics-actions > * { min-width:0; max-width:100%; }
.arena-sidepanel pre,
.arena-sidepanel code { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }

/* 1K / short desktop still has enough room for readable cards; do not miniaturize the hand. */
@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .own-board { padding-bottom:146px; }
  body.match-mode .own-hand { bottom:29px; width:min(70%,860px); height:110px; }
  body.match-mode .own-hand .hand-fan-card {
    width:82px; min-width:82px; max-width:82px;
    height:115px; min-height:115px; max-height:115px;
    margin-left:-14px;
  }
  body.match-mode .own-board .board-resource-row { bottom:48px; }
}

/* Large / 4K: spend abundant horizontal room on the rail and the hand instead of clipping or miniaturizing them. */
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) clamp(560px,20vw,700px); gap:12px; }
  body.match-mode .own-board { padding-bottom:196px; }
  body.match-mode .own-hand { bottom:46px; width:min(72%,1220px); height:152px; }
  body.match-mode .own-hand .hand-fan-card {
    width:110px; min-width:110px; max-width:110px;
    height:154px; min-height:154px; max-height:154px;
    margin-left:-18px;
  }
  body.match-mode .own-board .board-resource-row { bottom:66px; }
}
@media (min-width:3200px) and (min-height:1500px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) clamp(640px,18vw,760px); }
  body.match-mode .own-hand { width:min(72%,1380px); height:168px; }
  body.match-mode .own-hand .hand-fan-card {
    width:120px; min-width:120px; max-width:120px;
    height:168px; min-height:168px; max-height:168px;
    margin-left:-20px;
  }
}

/* Mobile hand is centered above the profile instead of sharing the same bottom baseline. */
@media (max-width:760px) {
  body.match-mode .own-board { padding-bottom:152px; }
  body.match-mode .own-hand {
    left:50%;
    bottom:47px;
    transform:translateX(-50%);
    width:min(88%,700px);
    height:86px;
    padding:0 4px;
    justify-content:center;
  }
  body.match-mode .own-hand .hand-fan-card,
  body.match-mode .own-hand .hand-fan-card:first-child {
    width:58px; min-width:58px; max-width:58px;
    height:81px; min-height:81px; max-height:81px;
    margin-left:-10px !important;
  }
  body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0 !important; }
  body.match-mode .own-board .player-head { bottom:3px; }
  body.match-mode .own-board .board-resource-row { right:3px; bottom:139px; width:31px; }
  body.match-mode .own-board .pending-lane { bottom:139px; }
  body.match-mode .command-dock { right:3px; bottom:137px; width:112px; }
  body.match-mode .board-first-shell.results-view,
  body.match-mode.match-ended .game-shell.board-first-shell.results-view,
  body.match-mode .board-first-shell.results-view .game-main,
  body.match-mode .board-first-shell.results-view .match-result-detail {
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* v7.69.4 — Material Executive Desk lobby
   One physical desk, one green play surface, real OCG controls. Textures are visual materials only;
   the lobby, deck selection, matchmaking and profile systems remain code-native and authoritative. */
body.lobby-mode {
  --desk-wood-texture:url('/ui/materials/wood-dark-walnut/basecolor.webp');
  --desk-mat-texture:url('/ui/materials/deskmat-green/basecolor.webp');
  --desk-folder-texture:url('/ui/materials/folder-manila/basecolor.webp');
  --desk-paper-texture:url('/ui/materials/paper-offwhite/basecolor.webp');
  --desk-leather-texture:url('/ui/materials/leather-dark-brown/basecolor.webp');
  --desk-brass-texture:url('/ui/materials/metal-brass-brushed/basecolor.webp');
  --desk-plastic-texture:url('/ui/materials/plastic-dark-matte/basecolor.webp');
  --desk-metal-texture:url('/ui/materials/metal-black-coated/basecolor.webp');
  --desk-wood:#3d2114;
  --desk-wood-edge:#211009;
  --desk-leather:#1b1511;
  --desk-paper:#f2eadb;
  --desk-paper-2:#dfd1bb;
  --desk-ink:#2b2119;
  --desk-brass:#a8783f;
  --desk-brass-light:#d1a46a;
  --desk-green:#314f3a;
  --desk-green-deep:#1f3528;
  min-height:100vh;
  color:var(--desk-ink);
  background-image:
    radial-gradient(circle at 50% -15%,rgba(255,226,183,.14),transparent 44%),
    linear-gradient(rgba(34,15,8,.12),rgba(13,7,4,.28)),
    var(--desk-wood-texture);
  background-size:auto,auto,720px 720px;
  background-attachment:fixed;
}
body.lobby-mode .topbar {
  position:sticky;
  top:0;
  z-index:70;
  min-height:58px;
  padding:0 clamp(12px,1.6vw,26px);
  color:#f5ead9;
  border-bottom:1px solid rgba(12,6,3,.8);
  background-image:linear-gradient(rgba(39,19,11,.68),rgba(25,12,7,.82)),var(--desk-wood-texture);
  background-size:auto,680px 680px;
  box-shadow:0 6px 22px rgba(0,0,0,.34),inset 0 -1px rgba(235,195,140,.08);
  justify-content:flex-end;
}
body.lobby-mode .topbar > div:first-child { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:11px; }
body.lobby-mode .topbar > div:first-child strong {
  position:relative;
  padding:8px 18px 7px;
  border:1px solid #0d0a08;
  border-radius:5px;
  background-image:linear-gradient(rgba(21,16,13,.18),rgba(3,3,2,.36)),var(--desk-leather-texture);
  background-size:auto,360px 360px;
  box-shadow:inset 0 1px rgba(255,255,255,.10),inset 0 -2px rgba(0,0,0,.28),0 3px 9px rgba(0,0,0,.38);
  color:#f1e4ce;
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-shadow:0 1px #000;
}
body.lobby-mode .topbar > div:first-child strong::before,
body.lobby-mode .topbar > div:first-child strong::after {
  content:'';
  position:absolute;
  top:50%;
  width:5px;
  height:5px;
  margin-top:-2px;
  border-radius:50%;
  background-image:var(--desk-brass-texture);
  background-size:90px 90px;
  box-shadow:0 1px 2px #000,inset 0 1px rgba(255,255,255,.35);
}
body.lobby-mode .topbar > div:first-child strong::before { left:6px; }
body.lobby-mode .topbar > div:first-child strong::after { right:6px; }
body.lobby-mode .topbar .muted {
  padding:3px 7px;
  border:1px solid rgba(183,93,75,.55);
  border-radius:2px;
  color:#e9b8ac;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  transform:rotate(-1.5deg);
}
body.lobby-mode .language-switcher { color:#eadcc9; }
body.lobby-mode .language-switcher select,
body.lobby-mode .topbar button {
  border-color:rgba(220,193,157,.24);
  background-image:linear-gradient(rgba(24,24,22,.30),rgba(2,2,2,.28)),var(--desk-plastic-texture);
  background-size:auto,220px 220px;
  color:#f5ead9;
}
body.lobby-mode .app { max-width:none; margin:0; padding:0; }
.executive-lobby { width:100%; min-height:calc(100vh - 58px); padding:18px clamp(10px,1.8vw,30px) 46px; }
.executive-desk-surface {
  width:min(1760px,100%);
  min-height:760px;
  margin:0 auto;
  padding:18px;
  display:grid;
  grid-template-columns:clamp(176px,13vw,226px) minmax(600px,1fr) clamp(270px,22vw,360px);
  gap:18px;
  align-items:stretch;
  border:1px solid #180b06;
  border-radius:13px;
  background-image:
    radial-gradient(circle at 50% -8%,rgba(255,226,178,.11),transparent 37%),
    linear-gradient(90deg,rgba(255,255,255,.02),transparent 24%,rgba(0,0,0,.06) 62%,transparent),
    var(--desk-wood-texture);
  background-size:auto,auto,700px 700px;
  box-shadow:0 24px 62px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08),inset 0 0 0 3px rgba(25,11,5,.20);
  overflow:visible;
}
.executive-desk-left,.executive-desk-center,.executive-desk-right { min-width:0; }
.executive-desk-left { display:flex; min-height:0; }
.executive-desk-center {
  min-height:0;
  padding:22px clamp(15px,1.6vw,26px) 16px;
  display:grid;
  grid-template-rows:minmax(315px,1fr) auto auto;
  gap:12px;
  border:1px solid #18251c;
  border-radius:10px;
  background-image:
    radial-gradient(circle at 50% 14%,rgba(255,255,255,.065),transparent 43%),
    linear-gradient(rgba(17,43,26,.18),rgba(7,26,14,.12)),
    var(--desk-mat-texture);
  background-size:auto,auto,760px 760px;
  box-shadow:inset 0 0 0 4px rgba(14,28,19,.46),inset 0 12px 32px rgba(0,0,0,.18),0 4px 9px rgba(0,0,0,.28);
}
.executive-desk-right { display:flex; flex-direction:column; gap:14px; }

/* Tactile left command rail: every interactive row maps to a real existing lobby function. */
.desk-nav-rail {
  width:100%;
  min-height:100%;
  padding:12px 9px 10px;
  display:flex;
  flex-direction:column;
  gap:7px;
  border:1px solid #090a09;
  border-radius:8px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.025),transparent 32%,rgba(0,0,0,.14)),var(--desk-plastic-texture);
  background-size:auto,260px 260px;
  box-shadow:inset 0 0 0 2px rgba(77,73,65,.32),inset 0 0 24px rgba(0,0,0,.52),0 8px 16px rgba(0,0,0,.30);
}
.desk-nav-heading { padding:9px 9px 11px; border-bottom:1px solid rgba(207,160,99,.18); display:grid; gap:2px; }
.desk-nav-heading span { color:#9b856c; font-size:7px; font-weight:950; letter-spacing:.16em; }
.desk-nav-heading strong { color:#eee2d1; font-family:Georgia,"Times New Roman",serif; font-size:17px; }
.desk-nav-current,
.desk-collection-drawer,
.desk-file-button {
  position:relative;
  width:100%;
  min-height:64px;
  padding:9px 10px 9px 16px;
  display:grid;
  align-content:center;
  gap:2px;
  text-align:left;
  border:1px solid #0e100f;
  border-radius:4px;
  background-image:linear-gradient(rgba(255,255,255,.035),rgba(0,0,0,.18)),var(--desk-metal-texture);
  background-size:auto,180px 180px;
  box-shadow:inset 0 1px rgba(255,255,255,.045),inset 0 -1px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.28);
  color:#ddd1bf;
  text-shadow:0 1px 1px #000;
}
.desk-nav-current::before,
.desk-collection-drawer::before,
.desk-file-button::before {
  content:'';
  position:absolute;
  left:7px;
  top:11px;
  bottom:11px;
  width:3px;
  border-radius:2px;
  background:#5e554a;
  box-shadow:0 0 0 1px rgba(0,0,0,.32);
}
.desk-nav-current { border-color:#4f3e2b; background-image:linear-gradient(rgba(77,52,28,.34),rgba(18,15,12,.14)),var(--desk-metal-texture); }
.desk-nav-current::before { background-image:var(--desk-brass-texture); background-size:80px 80px; box-shadow:0 0 8px rgba(199,145,73,.34); }
.desk-nav-current span,
.desk-collection-drawer span,
.desk-file-button span { color:#aa957a; font-size:7px; font-weight:950; letter-spacing:.13em; text-transform:uppercase; }
.desk-nav-current strong,
.desk-collection-drawer strong,
.desk-file-button strong { color:#f0e5d4; font-size:12px; line-height:1.15; }
.desk-nav-current small,
.desk-collection-drawer small { color:#8f877c; font-size:7px; line-height:1.25; }
.desk-collection-drawer:hover,
.desk-file-button:hover { filter:brightness(1.12); border-color:#655038; }
.executive-desk-left .lobby-connection-status {
  margin-top:auto;
  padding:8px 9px;
  border:1px solid #080b08;
  border-radius:4px;
  background-image:linear-gradient(rgba(5,8,6,.52),rgba(2,4,3,.36)),var(--desk-metal-texture);
  background-size:auto,180px 180px;
  color:#d7ded5;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 2px 5px rgba(0,0,0,.3);
}
.executive-desk-left .lobby-connection-status > i { width:8px; height:8px; border:1px solid #071008; box-shadow:0 0 8px currentColor,inset 0 1px rgba(255,255,255,.4); }
.executive-desk-left .lobby-connection-status small { color:#839287; }

/* Selected deck is the visual hero: one paper brief plus a fan of real cards from that deck. */
.desk-deck-showcase {
  min-height:315px;
  display:grid;
  grid-template-columns:minmax(230px,.82fr) minmax(330px,1.32fr);
  gap:clamp(14px,2vw,28px);
  align-items:center;
  padding:3px clamp(4px,1vw,10px) 0;
}
.desk-deck-sheet {
  position:relative;
  align-self:center;
  padding:20px 18px 18px;
  border:1px solid #b9a98e;
  border-radius:2px;
  background-image:linear-gradient(rgba(255,255,255,.14),rgba(224,211,189,.08)),var(--desk-paper-texture);
  background-size:auto,520px 520px;
  box-shadow:5px 7px 15px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.72);
  transform:rotate(-.55deg);
}
.desk-deck-sheet::before {
  content:'';
  position:absolute;
  top:-8px;
  right:22px;
  width:12px;
  height:12px;
  border-radius:50%;
  background-image:var(--desk-brass-texture);
  background-size:90px 90px;
  box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.38);
}
.desk-deck-sheet-head { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:9px; border-bottom:1px solid rgba(90,70,52,.19); }
.desk-deck-sheet-head > div { display:grid; gap:3px; min-width:0; }
.desk-deck-sheet-head span { color:#806d5d; font-size:8px; font-weight:950; letter-spacing:.15em; }
.desk-deck-sheet-head strong { color:#2b2119; font-family:Georgia,"Times New Roman",serif; font-size:clamp(20px,2.2vw,29px); line-height:1.02; }
.desk-deck-sheet-head > b { min-width:36px; padding:8px 6px; border:1px solid rgba(96,57,26,.34); color:#76502d; background:#e6d4b7; font-size:11px; text-align:center; letter-spacing:.06em; transform:rotate(3deg); }
.desk-deck-sheet > p { margin:11px 0 8px; color:#5a4b3e; font-size:9px; font-weight:850; line-height:1.35; }
.desk-deck-tags { display:flex; flex-wrap:wrap; gap:4px; }
.desk-deck-tags span { padding:3px 5px; border-bottom:1px solid #8f7b64; color:#695747; font-family:ui-monospace,monospace; font-size:7px; font-weight:800; }
.desk-deck-facts { margin-top:13px; display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.desk-deck-facts span { min-width:0; padding:6px; border:1px solid rgba(104,85,64,.18); background:rgba(255,255,255,.24); color:#675849; font-size:7px; line-height:1.2; }
.desk-deck-facts span b { display:block; margin-bottom:1px; color:#352a22; font-size:11px; }
.desk-deck-facts span.ready { color:#315c3b; }
.desk-deck-facts span.warn { color:#8d3f37; }
.desk-deck-facts span:last-child { grid-column:1/-1; }
.desk-deck-sheet > small { display:block; margin-top:9px; color:#78695c; font-size:6.8px; line-height:1.35; }
.desk-card-fan { position:relative; min-height:305px; height:100%; }
.desk-card-fan-item {
  position:absolute;
  left:50%;
  bottom:5px;
  width:clamp(158px,11.5vw,205px);
  aspect-ratio:2.5/3.5;
  transform-origin:50% 100%;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.28));
}
.desk-card-fan-item.fan-1 { z-index:1; transform:translateX(-126%) rotate(-10deg); }
.desk-card-fan-item.fan-2 { z-index:3; transform:translateX(-50%) translateY(-13px) rotate(-1deg); }
.desk-card-fan-item.fan-3 { z-index:2; transform:translateX(26%) rotate(9deg); }
.desk-card-fan-item .catalog-card-face { width:100%; height:100%; min-height:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 9px 20px rgba(0,0,0,.20); }
.desk-card-fan-item > i { position:absolute; right:6px; bottom:6px; z-index:8; padding:3px 5px; border:1px solid rgba(255,255,255,.13); border-radius:3px; background:#151412; color:#efe6d7; font-size:7px; font-style:normal; font-weight:950; }
.desk-card-fan-empty { position:absolute; inset:15% 8%; display:grid; place-items:center; border:1px dashed rgba(230,220,198,.24); color:#bdc5b9; font-size:9px; }

/* Quick Match is a compact hardware rail, not another floating website card. */
.desk-meeting-agenda {
  margin:0;
  padding:5px;
  max-width:none;
  border:1px solid #0d0e0d;
  border-radius:7px;
  background-image:linear-gradient(rgba(4,4,3,.10),rgba(0,0,0,.24)),var(--desk-leather-texture);
  background-size:auto,420px 420px;
  box-shadow:inset 0 0 0 2px rgba(92,72,52,.35),0 5px 12px rgba(0,0,0,.28);
}
.desk-agenda-sheet {
  min-height:0;
  padding:11px 12px;
  display:grid;
  grid-template-columns:minmax(170px,.7fr) minmax(360px,1.8fr);
  align-items:end;
  gap:7px 14px;
  border:1px solid #090b0a;
  border-radius:4px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.025),transparent 42%,rgba(0,0,0,.12)),var(--desk-metal-texture);
  background-size:auto,220px 220px;
  color:#e8dece;
  box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.52);
}
.desk-agenda-heading { grid-column:1; grid-row:1/3; display:flex; align-items:center; justify-content:space-between; gap:9px; align-self:stretch; padding-right:12px; border-right:1px solid rgba(210,169,111,.15); }
.desk-agenda-heading > div { display:grid; gap:2px; }
.desk-agenda-heading span { color:#9d8d78; font-size:7px; font-weight:950; letter-spacing:.14em; }
.desk-agenda-heading strong { color:#f1e7d8; font-family:Georgia,"Times New Roman",serif; font-size:18px; line-height:1.05; }
.desk-agenda-heading > b { padding:5px 6px; border:1px solid #665035; border-radius:3px; color:#d6b47a; background:#1b1712; font-size:7px; letter-spacing:.08em; transform:none; }
.desk-agenda-sheet > p { grid-column:2; margin:0; color:#a99f92; font-size:8px; line-height:1.35; }
.desk-quick-controls { grid-column:2; display:grid; grid-template-columns:minmax(170px,1.45fr) minmax(112px,.65fr) minmax(138px,.75fr); gap:7px; align-items:end; }
.desk-quick-controls label { min-width:0; color:#988b7b; font-size:7px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.desk-quick-controls select { width:100%; min-height:37px; border-color:#3f3b34; border-radius:3px; background:#171816; color:#eee5d8; box-shadow:inset 0 1px 4px rgba(0,0,0,.38); }
.desk-quick-match-button,
.desk-quick-controls #cancelQuickMatch {
  min-height:39px;
  min-width:0;
  border:1px solid #553819;
  border-radius:3px;
  color:#fff1da;
  background-image:linear-gradient(rgba(77,45,18,.15),rgba(40,23,10,.28)),var(--desk-brass-texture);
  background-size:auto,220px 220px;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 2px 0 #2a1c0e,0 4px 8px rgba(0,0,0,.28);
  font-weight:950;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.desk-meeting-agenda [data-lobby-deck-prep-host="QUICK"] { display:none; }
.desk-matchmaking-message { grid-column:2; margin:1px 0 0; padding:5px 7px; border-left:2px solid #a8783f; background:rgba(255,255,255,.04); color:#d7c5ad !important; font-size:8px; font-weight:800; }

/* Starter decks sit as real manila dossiers on the single central mat. */
.desk-starter-tray { min-height:0; padding:7px 3px 2px; border:0; background:transparent; box-shadow:none; color:#e5ddcf; }
.desk-starter-tray .starter-guide-head { margin-bottom:8px; padding:0 4px; color:#e8dfd1; }
.desk-starter-tray .starter-guide-head span { color:#a9b3a8; }
.desk-starter-tray .starter-guide-head strong { color:#efe6d8; }
.desk-starter-tray .starter-guide-head small { color:#a8b0a7; }
.desk-starter-tray .starter-guide-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.desk-starter-tray .starter-identity {
  position:relative;
  min-height:132px;
  margin:0;
  padding:12px 9px 9px;
  display:flex;
  text-align:left;
  color:#35281d;
  border:1px solid #9f805c;
  border-top:0;
  border-radius:2px;
  background-image:linear-gradient(rgba(255,255,255,.08),rgba(157,112,61,.06)),var(--desk-folder-texture);
  background-size:auto,330px 330px;
  box-shadow:2px 5px 8px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.32);
}
.desk-starter-tray .starter-identity::before { content:''; position:absolute; left:8px; top:-7px; width:48%; height:11px; border:1px solid #9f805c; border-bottom:0; border-radius:3px 7px 0 0; background-image:var(--desk-folder-texture); background-size:330px 330px; }
.desk-starter-tray .starter-identity::after { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--dept); opacity:.74; }
.desk-starter-tray .starter-identity:hover { filter:brightness(1.06); }
.desk-starter-tray .starter-identity.selected { outline:2px solid #bd8b4e; outline-offset:2px; box-shadow:0 0 0 1px rgba(255,225,170,.26),3px 7px 12px rgba(0,0,0,.30); }
.desk-starter-tray .starter-identity.selected > i { color:#70491f; }
.desk-starter-tray .starter-identity > div span { background:rgba(255,255,255,.34); }
.desk-starter-tray .starter-identity > small { color:#685a4b; }
.desk-starter-tray .starter-identity > em { color:#756451; }
.desk-starter-tray .starter-identity > i { margin-top:4px; color:var(--dept); font-size:7px; font-style:normal; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }

/* Right-side player file: leather holder, actual profile and Ranked state on paper. */
.desk-bureaucracy {
  position:relative;
  padding:30px 10px 10px;
  border:1px solid #0f0d0b;
  border-radius:7px;
  color:#201b17;
  background-image:linear-gradient(rgba(20,14,10,.08),rgba(0,0,0,.20)),var(--desk-leather-texture);
  background-size:auto,420px 420px;
  box-shadow:inset 0 0 0 2px rgba(107,78,54,.28),0 9px 18px rgba(0,0,0,.30);
}
.desk-clipboard-clip {
  position:absolute;
  top:-8px;
  left:50%;
  width:94px;
  height:27px;
  transform:translateX(-50%);
  border:1px solid #4b321b;
  border-radius:7px 7px 3px 3px;
  background-image:linear-gradient(rgba(255,255,255,.08),rgba(66,40,17,.13)),var(--desk-brass-texture);
  background-size:auto,190px 190px;
  box-shadow:0 3px 5px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.25);
}
.desk-bureaucracy-title { display:grid; gap:1px; margin-bottom:9px; color:#eee2d1; text-align:center; text-shadow:0 1px #000; }
.desk-bureaucracy-title span { font-family:Georgia,"Times New Roman",serif; font-size:20px; font-weight:800; }
.desk-bureaucracy-title strong { color:#ab9d89; font-size:7px; letter-spacing:.1em; text-transform:uppercase; }
.desk-bureaucracy .profile-strip,
.desk-bureaucracy .ranked-standing {
  width:100%;
  max-width:none;
  margin:0;
  padding:9px;
  border:1px solid #b5a992;
  border-radius:2px;
  background-image:linear-gradient(rgba(255,255,255,.10),rgba(225,214,195,.03)),var(--desk-paper-texture);
  background-size:auto,500px 500px;
  box-shadow:0 2px 5px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.55);
}
.desk-bureaucracy .profile-strip { grid-template-columns:1fr; gap:8px; }
.desk-bureaucracy .profile-identity strong { font-size:15px; }
.desk-bureaucracy .profile-stats { justify-content:flex-start; gap:4px; }
.desk-bureaucracy .profile-stats span { padding:4px 5px; background:rgba(255,255,255,.30); }
.desk-bureaucracy .profile-rename { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
.desk-bureaucracy .profile-rename input { min-width:0; }
.desk-bureaucracy .ranked-standing { margin-top:8px; grid-template-columns:1fr; }
.desk-bureaucracy .ranked-standing > div:first-child > strong { font-family:Georgia,"Times New Roman",serif; font-size:18px; }
.desk-bureaucracy .ranked-standing-stats { display:grid; grid-template-columns:1fr 1fr; gap:4px; justify-content:stretch; }
.desk-bureaucracy .ranked-standing-stats span { min-width:0; padding:5px; }
.desk-bureaucracy .ranked-standing-note { font-size:7px; }
.desk-alpha-memo {
  width:89%;
  margin:0 auto;
  padding:14px 14px 16px;
  border:1px solid #b6a78d;
  border-radius:1px;
  background-image:linear-gradient(rgba(255,255,255,.10),rgba(222,208,183,.04)),var(--desk-paper-texture);
  background-size:auto,500px 500px;
  box-shadow:4px 6px 13px rgba(0,0,0,.27);
  transform:rotate(-1deg);
}
.desk-alpha-memo span { color:#7b6858; font-size:7px; font-weight:950; letter-spacing:.12em; }
.desk-alpha-memo strong { display:block; margin:2px 0 6px; font-family:Georgia,"Times New Roman",serif; font-size:18px; }
.desk-alpha-memo p { margin:0 0 7px; font-size:9px; line-height:1.35; }
.desk-alpha-memo small { color:#7e7165; font-size:7px; }

/* Secondary systems share one open physical drawer instead of four unrelated full-width bars. */
.executive-desk-tools {
  position:relative;
  width:min(1700px,calc(100% - 34px));
  margin:-2px auto 0;
  padding:24px 14px 14px;
  border:1px solid #180b06;
  border-top:0;
  border-radius:0 0 11px 11px;
  background-image:linear-gradient(rgba(55,28,16,.18),rgba(15,7,4,.24)),var(--desk-wood-texture);
  background-size:auto,700px 700px;
  box-shadow:0 15px 32px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.055);
}
.desk-tools-hardware { position:absolute; top:5px; left:50%; width:188px; height:15px; transform:translateX(-50%); display:grid; grid-template-columns:10px 1fr 10px; align-items:center; gap:4px; }
.desk-tools-hardware > span { height:10px; border:1px solid #493019; border-radius:3px 3px 8px 8px; background-image:linear-gradient(rgba(255,255,255,.07),rgba(52,30,12,.12)),var(--desk-brass-texture); background-size:auto,190px 190px; box-shadow:0 2px 3px rgba(0,0,0,.32); }
.desk-tools-hardware > i { width:8px; height:8px; border-radius:50%; background-image:var(--desk-brass-texture); background-size:90px 90px; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.desk-tools-tray {
  padding:9px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(210px,.75fr));
  gap:9px;
  align-items:start;
  border:1px solid #090908;
  border-radius:5px;
  background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.30)),var(--desk-plastic-texture);
  background-size:auto,260px 260px;
  box-shadow:inset 0 5px 18px rgba(0,0,0,.44),inset 0 0 0 2px rgba(72,68,60,.18);
}
.desk-tools-tray > * { min-width:0; margin:0 !important; }
.desk-tools-tray .private-room-drawer,
.desk-tools-tray .alpha-session-strip,
.desk-tools-tray .rules-primer,
.desk-tools-tray .lobby-playtest-drawer {
  border:1px solid #a48762;
  border-radius:3px;
  background-image:linear-gradient(rgba(255,255,255,.06),rgba(165,115,58,.04)),var(--desk-folder-texture);
  background-size:auto,360px 360px;
  color:#36291d;
  box-shadow:2px 3px 7px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.28);
}
.desk-tools-tray .private-room-drawer[open],
.desk-tools-tray .lobby-playtest-drawer[open] { grid-column:1/-1; }
.desk-tools-tray .private-room-drawer > summary,
.desk-tools-tray .lobby-playtest-drawer > summary { background:transparent; }
.desk-tools-tray .private-room-drawer[open] > summary,
.desk-tools-tray .lobby-playtest-drawer[open] > summary { background:rgba(255,255,255,.18); }
.desk-tools-tray .private-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.desk-tools-tray .box { background-image:linear-gradient(rgba(255,255,255,.12),rgba(230,217,194,.04)),var(--desk-paper-texture); background-size:auto,500px 500px; }
.desk-tools-tray .alpha-session-strip { display:grid; grid-template-columns:1fr; gap:7px; padding:11px; }
.desk-tools-tray .alpha-session-strip button { width:100%; }
.desk-tools-tray .rules-primer { overflow:hidden; }
.executive-lobby .resume-session-box {
  width:min(1700px,100%);
  margin:0 auto 10px;
  border-color:#9f793d;
  background-image:linear-gradient(rgba(255,240,190,.10),rgba(181,137,57,.06)),var(--desk-paper-texture);
  background-size:auto,500px 500px;
  color:#3b2e18;
  box-shadow:0 5px 15px rgba(0,0,0,.24);
}

@media (min-width:2200px) and (min-height:1100px) {
  .executive-lobby { padding-inline:clamp(28px,3vw,70px); }
  .executive-desk-surface { width:min(2200px,100%); min-height:980px; grid-template-columns:260px minmax(880px,1fr) 420px; gap:24px; padding:24px; }
  .executive-desk-center { padding:34px 34px 22px; grid-template-rows:minmax(430px,1fr) auto auto; }
  .desk-deck-showcase { min-height:430px; grid-template-columns:minmax(300px,.78fr) minmax(520px,1.45fr); }
  .desk-deck-sheet { padding:28px 24px 24px; }
  .desk-card-fan { min-height:420px; }
  .desk-card-fan-item { width:250px; }
  .desk-starter-tray .starter-identity { min-height:160px; padding:16px 12px 11px; }
  .executive-desk-tools { width:min(2100px,calc(100% - 80px)); }
  .desk-tools-tray { grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(280px,.72fr)); gap:13px; padding:13px; }
}

@media (max-width:1260px) {
  .executive-desk-surface { grid-template-columns:170px minmax(500px,1fr) minmax(240px,300px); gap:11px; padding:11px; }
  .executive-desk-center { padding:16px 12px 12px; }
  .desk-deck-showcase { grid-template-columns:minmax(200px,.75fr) minmax(300px,1.25fr); gap:10px; }
  .desk-card-fan-item { width:145px; }
  .desk-quick-controls { grid-template-columns:minmax(150px,1.3fr) minmax(105px,.65fr); }
  .desk-quick-controls .desk-quick-match-button,
  .desk-quick-controls #cancelQuickMatch { grid-column:1/-1; width:100%; }
  .desk-tools-tray { grid-template-columns:1fr 1fr; }
  .desk-tools-tray .desk-private-room { grid-column:1/-1; }
}

@media (max-width:980px) {
  .executive-desk-surface { grid-template-columns:150px minmax(0,1fr); }
  .executive-desk-right { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.55fr); }
  .desk-bureaucracy { min-width:0; }
  .desk-alpha-memo { width:100%; transform:none; align-self:start; }
  .desk-starter-tray .starter-guide-grid { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-top:7px; }
  .desk-starter-tray .starter-identity { min-width:170px; scroll-snap-align:start; }
}

@media (max-width:760px) {
  body.lobby-mode .topbar { min-height:58px; padding:6px 10px; gap:7px; }
  body.lobby-mode .topbar > div:first-child { position:static; transform:none; margin-right:auto; }
  body.lobby-mode .topbar > div:first-child strong { padding:6px 10px; font-size:12px; }
  body.lobby-mode .topbar > div:first-child strong::before,
  body.lobby-mode .topbar > div:first-child strong::after { display:none; }
  body.lobby-mode .topbar .muted { display:none; }
  body.lobby-mode .language-switcher { margin-left:auto; font-size:0; }
  body.lobby-mode .language-switcher select { min-height:38px; font-size:12px; }
  .executive-lobby { min-height:calc(100dvh - 58px); padding:8px 7px 28px; }
  .executive-desk-surface { display:flex; flex-direction:column; min-height:0; padding:8px; gap:9px; border-radius:8px; }
  .executive-desk-center { order:1; display:flex; flex-direction:column; padding:11px 8px 9px; gap:9px; }
  .executive-desk-left { order:2; }
  .executive-desk-right { order:3; display:flex; flex-direction:column; }
  .desk-nav-rail { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .desk-nav-heading { grid-column:1/-1; padding:7px; }
  .desk-nav-current { grid-column:1/-1; min-height:54px; }
  .desk-collection-drawer,.desk-file-button { min-height:54px; padding:7px 7px 7px 15px; }
  .executive-desk-left .lobby-connection-status { grid-column:1/-1; margin:0; }
  .desk-deck-showcase { min-height:0; display:grid; grid-template-columns:1fr; gap:4px; padding:0; }
  .desk-deck-sheet { padding:14px 12px 12px; transform:none; }
  .desk-deck-sheet-head strong { font-size:22px; }
  .desk-deck-facts { margin-top:9px; }
  .desk-card-fan { min-height:190px; }
  .desk-card-fan-item { width:104px; bottom:4px; }
  .desk-card-fan-item .catalog-rules,
  .desk-card-fan-item .catalog-tags { display:none; }
  .desk-card-fan-item .catalog-card-face { gap:2px; padding:4px; border-top-width:5px; }
  .desk-card-fan-item .catalog-name-row { min-height:24px; }
  .desk-card-fan-item .catalog-name-row > strong { font-size:8px; }
  .desk-card-fan-item .catalog-detail-row { min-height:11px; }
  .desk-card-fan-item.fan-1 { transform:translateX(-122%) rotate(-8deg); }
  .desk-card-fan-item.fan-2 { transform:translateX(-50%) translateY(-7px); }
  .desk-card-fan-item.fan-3 { transform:translateX(22%) rotate(8deg); }
  .desk-meeting-agenda { padding:4px; }
  .desk-agenda-sheet { display:block; padding:9px; }
  .desk-agenda-heading { padding:0 0 7px; margin-bottom:7px; border:0; border-bottom:1px solid rgba(210,169,111,.15); }
  .desk-agenda-heading strong { font-size:17px; }
  .desk-agenda-sheet > p { margin-bottom:7px; font-size:7.5px; }
  .desk-quick-controls { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .desk-quick-controls .desk-quick-match-button,
  .desk-quick-controls #cancelQuickMatch { grid-column:1/-1; min-height:46px; }
  .desk-starter-tray { padding:6px 1px 1px; }
  .desk-starter-tray .starter-guide-head { margin-bottom:5px; }
  .desk-starter-tray .starter-guide-head strong { font-size:10px; }
  .desk-starter-tray .starter-guide-head small { display:none; }
  .desk-starter-tray .starter-guide-grid { display:flex; gap:7px; overflow-x:auto; padding:7px 2px 5px; scroll-snap-type:x mandatory; }
  .desk-starter-tray .starter-identity { min-width:145px; min-height:122px; scroll-snap-align:start; }
  .desk-starter-tray .starter-identity > small { display:none; }
  .desk-starter-tray .starter-identity > em { font-size:6px; }
  .desk-bureaucracy { padding:23px 8px 8px; }
  .desk-bureaucracy-title span { font-size:18px; }
  .desk-bureaucracy .profile-strip { padding:7px; }
  .desk-bureaucracy .profile-rename { grid-template-columns:1fr; }
  .desk-bureaucracy .profile-rename button { width:100%; }
  .desk-bureaucracy .ranked-standing { padding:7px; }
  .desk-bureaucracy .ranked-standing > div:first-child > small,
  .desk-bureaucracy .ranked-standing-note { display:none; }
  .desk-alpha-memo { display:none; }
  .executive-desk-tools { width:calc(100% - 12px); padding:22px 7px 8px; }
  .desk-tools-hardware { width:132px; }
  .desk-tools-tray { display:flex; flex-direction:column; padding:6px; gap:7px; }
  .desk-tools-tray > * { width:100%; }
  .desk-tools-tray .private-room-grid { grid-template-columns:1fr; }
  .executive-lobby .resume-session-box { margin-bottom:8px; }
}

@media (prefers-reduced-motion:reduce) {
  .desk-starter-tray .starter-identity,
  .desk-collection-drawer,
  .desk-file-button { transition:none !important; }
}

/* v7.69.3 final hosted geometry follow-up */
body.match-mode.match-ended { height:auto !important; min-height:100dvh; overflow-y:auto !important; overflow-x:hidden !important; }
body.match-mode.match-ended .app { height:auto !important; min-height:calc(100dvh - 46px); overflow:visible !important; }
body.match-mode .arena-sidepanel { overflow:hidden; }
body.match-mode .arena-sidepanel-scroll { min-width:0; width:100%; overflow-y:auto !important; overflow-x:hidden !important; }
body.match-mode .arena-sidepanel * { max-width:100%; }
@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .own-hand { width:min(74%,940px); height:116px; }
  body.match-mode .own-hand .hand-fan-card { width:86px; min-width:86px; max-width:86px; height:120px; min-height:120px; max-height:120px; margin-left:-15px; }
}
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) minmax(620px,22vw); }
  body.match-mode .arena-sidepanel { min-width:0; }
  body.match-mode .own-hand { width:min(76%,1360px); }
}
@media (min-width:3200px) and (min-height:1500px) {
  body.match-mode .arena-layout { grid-template-columns:minmax(0,1fr) minmax(720px,20vw); }
}
@media (max-width:760px) {
  body.match-mode .own-board { padding-bottom:158px; }
  body.match-mode .own-hand { left:50%; bottom:48px; transform:translateX(-50%); width:min(82%,520px); height:88px; padding:0; }
  body.match-mode .own-hand .hand-fan-card,
  body.match-mode .own-hand .hand-fan-card:first-child { width:58px; min-width:58px; max-width:58px; height:81px; min-height:81px; max-height:81px; margin-left:-10px !important; }
  body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0 !important; }
  body.match-mode .own-board .player-head { bottom:3px; z-index:12; }
  body.match-mode .own-board .board-resource-row { bottom:141px; }
  body.match-mode .command-dock { bottom:139px; }
  body.match-mode .board-first-shell.results-view .match-result-panel { overflow:visible !important; }
}

/* v7.69.5 — match HUD fit + direct Reputation attack anchor */
/* Office Coach lives in the narrow Match HUD rail. Give it its own compact vertical layout
   instead of inheriting the old page-wide three-column coach grid. */
.arena-sidepanel .guidance-coach {
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  padding:8px;
}
.arena-sidepanel .guidance-kicker {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.arena-sidepanel .guidance-copy {
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
}
.arena-sidepanel .guidance-copy strong,
.arena-sidepanel .guidance-copy span {
  min-width:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}
.arena-sidepanel .guidance-actions {
  min-width:0;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.arena-sidepanel .guidance-actions button { min-width:0; }

/* The compact REP vital is the visible direct-attack destination in the board-first HUD.
   Detailed resource cards remain hidden in match mode for provenance only. */
body.match-mode .player-vitals .vital.rep.reputation-target-anchor {
  position:relative;
  overflow:visible;
}
body.match-mode .player-vitals .vital.rep.reputation-target-anchor.attack-destination {
  border-color:rgba(255,98,84,.72);
  box-shadow:0 0 0 2px rgba(255,92,78,.32),0 0 18px rgba(255,74,59,.28),inset 0 0 12px rgba(255,74,59,.08);
}
body.match-mode .player-vitals .vital-reputation-delta {
  position:absolute;
  z-index:3;
  right:-5px;
  top:-8px;
  padding:2px 4px;
  border-radius:999px;
  background:#eaf7ee;
  color:#247044;
  font:900 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 2px 8px rgba(0,0,0,.24);
}
body.match-mode .player-vitals .vital-reputation-delta.loss { background:#ffe4e0; color:#ad3e34; }

/* v7.69.5 — full-viewport Executive Desk geometry
   The desk is the viewport stage. Nothing sits on a second wooden background, and the open drawer
   stays flush with the same left/right edges so its physical perspective remains coherent. */
body.lobby-mode .app {
  background-image:
    radial-gradient(circle at 50% -10%,rgba(255,226,183,.08),transparent 42%),
    linear-gradient(rgba(34,15,8,.04),rgba(13,7,4,.12)),
    var(--desk-wood-texture);
  background-size:auto,auto,720px 720px;
}
.executive-lobby {
  width:100%;
  min-height:calc(100vh - 58px);
  padding:0;
  overflow-x:hidden;
  background:transparent;
}
.executive-desk-surface {
  width:100%;
  max-width:none;
  min-height:calc(100vh - 58px);
  margin:0;
  padding:18px clamp(14px,1.8vw,34px) 20px;
  border-left:0;
  border-right:0;
  border-radius:0;
  box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 0 0 3px rgba(25,11,5,.20),inset 0 -12px 26px rgba(13,6,3,.18);
}
.executive-desk-tools {
  width:100%;
  max-width:none;
  margin:0;
  padding:14px clamp(14px,1.8vw,34px) 36px;
  border-left:0;
  border-right:0;
  border-radius:0;
  box-shadow:inset 0 10px 18px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.045),0 15px 32px rgba(0,0,0,.22);
}
.executive-desk-tools::before {
  content:'';
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top:0;
  height:7px;
  border-top:1px solid rgba(0,0,0,.72);
  border-bottom:1px solid rgba(218,176,122,.06);
  background:linear-gradient(180deg,rgba(9,4,2,.55),rgba(39,20,11,.20));
  pointer-events:none;
}
.desk-tools-tray {
  position:relative;
  z-index:2;
  margin-bottom:4px;
  border-color:#080807;
  background-image:linear-gradient(rgba(0,0,0,.27),rgba(0,0,0,.38)),var(--desk-plastic-texture);
  box-shadow:inset 0 7px 22px rgba(0,0,0,.50),inset 0 0 0 2px rgba(82,74,61,.20),0 3px 8px rgba(0,0,0,.22);
}
/* A downward-pulled drawer exposes its handle on the lower front face, not at the desk seam. */
.desk-tools-hardware {
  z-index:4;
  top:auto;
  bottom:8px;
}
.desk-tools-hardware > span {
  height:11px;
  border-radius:8px 8px 3px 3px;
  box-shadow:0 -1px 2px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.38);
}
.desk-tools-tray .private-room-drawer,
.desk-tools-tray .alpha-session-strip,
.desk-tools-tray .rules-primer,
.desk-tools-tray .lobby-playtest-drawer {
  border-color:#b2946c;
  box-shadow:3px 4px 9px rgba(0,0,0,.31),inset 0 1px rgba(255,255,255,.32);
}

/* Quick Match should feel like hardware built into the desk, not a legacy form dropped into a dark card. */
.desk-agenda-sheet {
  border-color:#070807;
  background-image:linear-gradient(90deg,rgba(255,255,255,.035),transparent 45%,rgba(0,0,0,.16)),var(--desk-metal-texture);
  box-shadow:inset 0 1px rgba(255,255,255,.055),inset 0 -2px 3px rgba(0,0,0,.42),0 2px 5px rgba(0,0,0,.20);
}
.desk-quick-controls select {
  border-color:#555047;
  background-image:linear-gradient(rgba(255,255,255,.025),rgba(0,0,0,.16)),var(--desk-plastic-texture);
  background-size:auto,190px 190px;
}

@media (min-width:2200px) and (min-height:1100px) {
  .executive-lobby { padding-inline:0; }
  .executive-desk-surface {
    width:100%;
    max-width:none;
    min-height:calc(100vh - 58px);
    padding:clamp(28px,2.2vw,72px) clamp(34px,3.2vw,118px) 34px;
    grid-template-columns:clamp(260px,9vw,350px) minmax(900px,1fr) clamp(390px,13vw,520px);
    gap:clamp(24px,1.6vw,54px);
  }
  .executive-desk-center { padding:clamp(30px,2vw,58px); }
  .desk-deck-showcase { grid-template-columns:minmax(330px,.72fr) minmax(620px,1.5fr); }
  .desk-card-fan-item { width:clamp(250px,7.4vw,300px); }
  .executive-desk-tools {
    width:100%;
    max-width:none;
    padding-inline:clamp(34px,3.2vw,118px);
  }
}

@media (max-width:760px) {
  .executive-lobby { padding:0; }
  .executive-desk-surface {
    width:100%;
    min-height:0;
    padding:8px 7px 10px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .executive-desk-right { gap:7px; }
  .desk-bureaucracy { padding:22px 7px 7px; }
  .desk-bureaucracy-title { margin-bottom:6px; }
  .desk-bureaucracy .profile-strip { gap:5px; padding:6px; }
  .desk-bureaucracy .profile-identity small { display:none; }
  .desk-bureaucracy .profile-stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3px;
  }
  .desk-bureaucracy .profile-stats span { min-width:0; padding:4px 3px; font-size:7px; text-align:center; }
  .desk-bureaucracy .profile-rename { grid-template-columns:minmax(0,1fr) auto; gap:4px; }
  .desk-bureaucracy .profile-rename button { width:auto; min-width:84px; }
  .desk-bureaucracy .ranked-standing { margin-top:5px; padding:6px; gap:5px; }
  .desk-bureaucracy .ranked-standing > div:first-child > strong { font-size:16px; }
  .desk-bureaucracy .ranked-standing-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
  .desk-bureaucracy .ranked-standing-stats span { padding:4px; font-size:7px; }
  .executive-desk-tools {
    width:100%;
    max-width:none;
    margin:0;
    padding:12px 7px 31px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .desk-tools-hardware { width:132px; bottom:7px; }
  .desk-tools-tray { margin:0; }
}


/* v7.69.6 — lobby balance + card presentation polish */
/* Field cards keep their paper body beneath the 16:9 artwork instead of stretching the art stage into a dark void. */
body.match-mode .board-lane .card:not(.hidden-card) {
  background:linear-gradient(180deg,#f3f0e8 0%,#eee9df 58%,#e6dfd3 100%) !important;
}
body.match-mode .board-lane .card .card-art-stage {
  flex:0 0 auto;
  background:#e5ded1;
}
body.match-mode .board-lane .card .card-info {
  top:2px;
  right:2px;
  width:14px;
  min-width:14px;
  height:14px;
  min-height:14px;
  padding:0;
  font-size:6px;
  line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
body.match-mode .board-lane .card.hidden-card .card-info { display:none; }

/* Hover is the same card language at a readable scale: printed Power remains blue at bottom right;
   Current Power appears next to it only when modified. */
.hover-card-face { position:relative; padding-bottom:42px; }
.hover-card-face .power-cluster {
  right:10px;
  bottom:9px;
  gap:5px;
  transform:none;
}
.hover-card-face .power-cluster .power-badge {
  position:relative;
  right:auto;
  bottom:auto;
  width:42px;
  min-width:42px;
  height:42px;
  border-width:2px;
  background:#287ba5;
}
.hover-card-face .power-cluster .power-badge span { font-size:6px; }
.hover-card-face .power-cluster .power-badge b { font-size:21px; }
.hover-card-face .current-power-badge {
  width:34px;
  min-width:34px;
  height:34px;
  border-width:2px;
  font-size:17px;
}
.hover-card-face.has-power .hover-inspect-hint { padding-right:52px; }
.hover-card-face.has-power.power-changed .hover-inspect-hint { padding-right:92px; }

/* One branded back for every hidden card surface. */
.ocg-card-back {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 42%,rgba(215,179,103,.10),transparent 30%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 5px,transparent 5px 11px),
    linear-gradient(145deg,#172328,#0a1217 68%,#111c20);
  box-shadow:inset 0 0 0 2px #c8ad72,inset 0 0 0 5px #192226,inset 0 0 0 6px rgba(225,197,132,.38);
  color:#e7d6ad;
}
.ocg-card-back::before,
.ocg-card-back::after {
  content:'';
  position:absolute;
  inset:10%;
  border:1px solid rgba(217,184,113,.28);
  transform:rotate(45deg);
}
.ocg-card-back::after { inset:20%; transform:rotate(45deg); border-color:rgba(217,184,113,.16); }
.ocg-card-back-frame {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:42%;
  padding:8% 9%;
  border:1px solid rgba(229,204,149,.48);
  background:rgba(8,14,17,.72);
  box-shadow:0 4px 12px rgba(0,0,0,.30),inset 0 0 0 2px rgba(255,255,255,.025);
  text-align:center;
}
.ocg-card-back-frame span,.ocg-card-back-frame small { font-size:6px; font-weight:900; letter-spacing:.16em; }
.ocg-card-back-frame b { margin:2px 0; font-family:Georgia,"Times New Roman",serif; font-size:18px; letter-spacing:.06em; }
.ocg-card-back.compact .ocg-card-back-frame { min-width:54%; padding:8%; }
.ocg-card-back.compact .ocg-card-back-frame span,
.ocg-card-back.compact .ocg-card-back-frame small { display:none; }
.ocg-card-back.compact .ocg-card-back-frame b { font-size:9px; }
.opponent-hand-card { position:relative; overflow:hidden; background:#0b1418; }
.hidden-support-back {
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  background:none;
  box-shadow:none;
}
body.match-mode .card.face-down-support.hidden-card .card-art-stage { flex:1 1 auto; min-height:0; }
body.match-mode .card.face-down-support.hidden-card .hidden-support-back { flex:1 1 auto; }

/* A modest hand-size lift makes the new artwork readable without taking the board over. */
body.match-mode .own-board { padding-bottom:154px; }
body.match-mode .own-hand { width:min(72%,940px); height:118px; }
body.match-mode .own-hand .hand-fan-card {
  width:88px; min-width:88px; max-width:88px;
  height:123px; min-height:123px; max-height:123px;
  margin-left:-15px;
}
@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .own-board { padding-bottom:162px; }
  body.match-mode .own-hand { width:min(78%,1040px); height:128px; }
  body.match-mode .own-hand .hand-fan-card {
    width:96px; min-width:96px; max-width:96px;
    height:134px; min-height:134px; max-height:134px;
    margin-left:-16px;
  }
}
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .own-board { padding-bottom:216px; }
  body.match-mode .own-hand { width:min(78%,1500px); height:174px; }
  body.match-mode .own-hand .hand-fan-card {
    width:124px; min-width:124px; max-width:124px;
    height:174px; min-height:174px; max-height:174px;
    margin-left:-20px;
  }
}
@media (min-width:3200px) and (min-height:1500px) {
  body.match-mode .own-hand { width:min(78%,1620px); height:185px; }
  body.match-mode .own-hand .hand-fan-card {
    width:132px; min-width:132px; max-width:132px;
    height:185px; min-height:185px; max-height:185px;
    margin-left:-22px;
  }
}

/* 4K keeps the current composition but groups the useful middle-zone content instead of pinning it
   to opposite ends of a giant green void. */
@media (min-width:2200px) and (min-height:1100px) {
  .executive-desk-center {
    grid-template-rows:auto auto auto;
    align-content:center;
    gap:clamp(24px,2vh,54px);
    padding:clamp(34px,2.2vw,68px);
  }
  .desk-deck-showcase {
    min-height:clamp(500px,34vh,680px);
    grid-template-columns:minmax(400px,.78fr) minmax(760px,1.45fr);
    align-items:center;
  }
  .desk-deck-sheet { max-width:680px; justify-self:center; padding:clamp(28px,1.6vw,48px); }
  .desk-deck-sheet-head strong { font-size:clamp(28px,1.3vw,42px); }
  .desk-card-fan { min-height:clamp(430px,29vh,590px); }
  .desk-card-fan-item { width:clamp(290px,8.5vw,350px); }
  .desk-starter-tray .starter-identity { min-height:clamp(155px,9vh,190px); }
}

/* The open drawer gains a real wooden front fascia, with the existing brass pull mounted on it. */
.executive-desk-tools { isolation:isolate; }
.executive-desk-tools::after {
  content:'';
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  height:31px;
  border-top:1px solid rgba(8,3,2,.78);
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(12,5,2,.25)),var(--desk-wood-texture);
  background-size:auto,720px 720px;
  box-shadow:inset 0 5px 8px rgba(0,0,0,.28),inset 0 -1px rgba(255,225,180,.045),0 -1px rgba(113,70,42,.25);
  pointer-events:none;
}
.desk-tools-hardware { z-index:5; }

/* Secondary mobile drawer copy should look available, not disabled. */
@media (max-width:760px) {
  body.match-mode .own-board { padding-bottom:168px; }
  body.match-mode .own-hand { width:min(88%,560px); height:95px; bottom:50px; }
  body.match-mode .own-hand .hand-fan-card,
  body.match-mode .own-hand .hand-fan-card:first-child {
    width:62px; min-width:62px; max-width:62px;
    height:87px; min-height:87px; max-height:87px;
    margin-left:-10px !important;
  }
  body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0 !important; }
  .desk-tools-tray .private-room-drawer > summary strong,
  .desk-tools-tray .lobby-playtest-drawer > summary strong,
  .desk-tools-tray .rules-primer > summary strong,
  .desk-tools-tray .alpha-session-strip strong { color:#2e2117; opacity:1; }
  .desk-tools-tray .private-room-drawer > summary span,
  .desk-tools-tray .private-room-drawer > summary small,
  .desk-tools-tray .lobby-playtest-drawer > summary span,
  .desk-tools-tray .lobby-playtest-drawer > summary small,
  .desk-tools-tray .rules-primer > summary span,
  .desk-tools-tray .rules-primer > summary small,
  .desk-tools-tray .alpha-session-strip span,
  .desk-tools-tray .alpha-session-strip small { color:#66523e; opacity:1; }
  .desk-tools-tray .private-room-drawer,
  .desk-tools-tray .alpha-session-strip,
  .desk-tools-tray .rules-primer,
  .desk-tools-tray .lobby-playtest-drawer { color:#2f241a; }
}

/* v7.69.7 — card consistency, mirrored field geometry + restrained material completion */
/* Base cards keep the existing frame/type axis, but the body reads as printed stock instead of UI panels. */
.card:not(.hidden-card),
.catalog-card-face {
  background-image:
    linear-gradient(180deg,color-mix(in srgb,var(--type-soft) 82%,rgba(255,255,255,.88)) 0 33px,rgba(248,245,237,.91) 33px 100%),
    url('/ui/materials/paper-offwhite/basecolor.webp');
  background-size:auto,520px 520px;
  background-blend-mode:normal,multiply;
}
.card-rules-mini,
.catalog-rules {
  border-color:rgba(90,79,65,.20);
  border-radius:3px;
  background:rgba(247,243,234,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.54),inset 0 0 0 1px rgba(96,81,62,.025);
}
.card-tags span,
.catalog-tags span {
  border-color:color-mix(in srgb,var(--type-color) 26%,rgba(92,79,62,.24));
  border-radius:2px;
  background:color-mix(in srgb,var(--type-soft) 24%,rgba(248,244,235,.68));
  box-shadow:none;
  letter-spacing:.075em;
}
.card.type-employee .power-cluster .power-badge,
.hover-card-face .power-cluster .power-badge { background:#287ba5; }

/* A set Support/Incident is one complete portrait card back. The wrapper remains the interaction target. */
body.match-mode .board-lane .card.face-down-support {
  padding:0 !important;
  border-width:1px;
  border-top-width:1px;
  border-color:#b79b61;
  background:#0b1418 !important;
  box-shadow:0 7px 18px rgba(0,0,0,.28),inset 0 0 0 1px rgba(230,204,148,.22);
}
body.match-mode .board-lane .card.face-down-support::after { display:none; }
body.match-mode .board-lane .card.face-down-support > .ocg-card-back { inset:0; border-radius:3px; }
body.match-mode .board-lane .card.face-down-support > .face-down-card-state {
  position:absolute;
  z-index:4;
  left:4px;
  right:4px;
  bottom:4px;
  min-height:0;
  margin:0;
  pointer-events:none;
}
body.match-mode .board-lane .card.face-down-support .card-info {
  top:3px;
  right:3px;
  width:13px;
  min-width:13px;
  height:13px;
  min-height:13px;
  padding:0;
  font-size:5.5px;
  background:rgba(241,232,210,.90);
}
body.match-mode .board-lane .card.face-down-support.hidden-card .card-info { display:none; }
body.match-mode .board-lane .card.face-down-support .card-ability { z-index:5; }
.opponent-hand-card > .ocg-card-back { inset:0; }

/* Own and Opponent retain identical 5+4 slot rules. The outer rows compensate only for asymmetric HUD/hand reserves,
   leaving the actual lane/card area equal on both sides. */
body.match-mode .battlefield-surface {
  --field-seam:26px;
  --field-seam-half:13px;
  --field-board-half-balance:57px; /* (154px own reserve - 40px opponent reserve) / 2 */
  grid-template-rows:
    minmax(0,calc(50% - var(--field-seam-half) - var(--field-board-half-balance)))
    var(--field-seam)
    minmax(0,calc(50% - var(--field-seam-half) + var(--field-board-half-balance)));
}
body.match-mode .opponent-board { padding-top:40px; }
body.match-mode .own-board { padding-bottom:154px; }

/* Live cards use the same anatomy as the Deckbuilder: type/department, name, cost, art, rules, tags and Power. */
body.match-mode .board-lane .card:not(.face-down-support),
body.match-mode .own-hand .hand-fan-card:not(.face-down-support) {
  display:flex;
  flex-direction:column;
}
body.match-mode .board-lane .card .card-rules-mini,
body.match-mode .own-hand .hand-fan-card .card-rules-mini { display:-webkit-box; }
body.match-mode .board-lane .card .card-tags,
body.match-mode .own-hand .hand-fan-card .card-tags { display:flex; }
body.match-mode .board-lane .card .card-detail-row,
body.match-mode .own-hand .hand-fan-card .card-detail-row { display:none; }
body.match-mode .board-lane .card .card-type-strip,
body.match-mode .own-hand .hand-fan-card .card-type-strip {
  flex:0 0 auto;
  min-height:10px;
  margin:-1px 16px 2px 0;
  display:flex;
  align-items:center;
  gap:3px;
}
body.match-mode .board-lane .card .card-type-strip span,
body.match-mode .board-lane .card .card-type-strip b,
body.match-mode .own-hand .hand-fan-card .card-type-strip span,
body.match-mode .own-hand .hand-fan-card .card-type-strip b { font-size:4.5px; line-height:1; }
body.match-mode .board-lane .card .card-type-strip span,
body.match-mode .own-hand .hand-fan-card .card-type-strip span { padding:1px 3px; }
body.match-mode .board-lane .card .card-name-row,
body.match-mode .own-hand .hand-fan-card .card-name-row { flex:0 0 auto; min-height:18px; }
body.match-mode .board-lane .card .card-name,
body.match-mode .own-hand .hand-fan-card .card-name {
  min-height:0;
  padding-right:17px;
  font-size:6.2px;
  line-height:1.06;
}
body.match-mode .board-lane .card .card-cost-badge,
body.match-mode .own-hand .hand-fan-card .card-cost-badge { transform:scale(.58); transform-origin:top right; }
body.match-mode .board-lane .card .card-art-stage,
body.match-mode .own-hand .hand-fan-card .card-art-stage { flex:0 0 auto; margin:0 0 2px; border-width:1px; border-radius:3px; }
body.match-mode .board-lane .card .card-art-window,
body.match-mode .own-hand .hand-fan-card .card-art-window { margin:0; border-radius:2px; }
body.match-mode .board-lane .card .card-rules-mini,
body.match-mode .own-hand .hand-fan-card .card-rules-mini {
  flex:1 1 auto;
  min-height:0;
  margin:1px 0 0;
  padding:3px 3px 2px;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  font-size:4.6px;
  line-height:1.14;
}
body.match-mode .board-lane .card .card-rules-mini.rules-dense,
body.match-mode .own-hand .hand-fan-card .card-rules-mini.rules-dense { font-size:4.2px; }
body.match-mode .board-lane .card .card-rules-mini.rules-ultra,
body.match-mode .own-hand .hand-fan-card .card-rules-mini.rules-ultra { font-size:3.9px; }
body.match-mode .board-lane .card .card-tags,
body.match-mode .own-hand .hand-fan-card .card-tags {
  flex:0 0 auto;
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:1px;
  min-height:7px;
  margin:2px 0 0;
  overflow:hidden;
}
body.match-mode .board-lane .card .card-tags span,
body.match-mode .own-hand .hand-fan-card .card-tags span {
  flex:0 1 auto;
  min-width:0;
  padding:1px 2px;
  overflow:hidden;
  font-size:3.4px;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.match-mode .board-lane .card.has-power .card-tags,
body.match-mode .own-hand .hand-fan-card.has-power .card-tags { padding-right:31px; }
body.match-mode .board-lane .card.has-power.power-changed .card-tags,
body.match-mode .own-hand .hand-fan-card.has-power.power-changed .card-tags { padding-right:55px; }
body.match-mode .board-lane .card .power-cluster,
body.match-mode .own-hand .hand-fan-card .power-cluster { transform:scale(.66); transform-origin:bottom right; }

@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .battlefield-surface {
    --field-seam:24px;
    --field-seam-half:12px;
    --field-board-half-balance:60px; /* (162px - 42px) / 2 */
  }
  body.match-mode .opponent-board { padding-top:42px; }
  body.match-mode .own-board { padding-bottom:162px; }
}

@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .battlefield-surface {
    --field-board-half-balance:88px; /* (216px - 40px) / 2 */
  }
  body.match-mode .opponent-board { padding-top:40px; }
  body.match-mode .own-board { padding-bottom:216px; }
  body.match-mode .board-lane .card .card-type-strip span,
  body.match-mode .board-lane .card .card-type-strip b { font-size:5.4px; }
  body.match-mode .board-lane .card .card-name { font-size:7.5px; }
  body.match-mode .board-lane .card .card-rules-mini { font-size:5.6px; line-height:1.16; }
  body.match-mode .board-lane .card .card-rules-mini.rules-dense { font-size:5.1px; }
  body.match-mode .board-lane .card .card-rules-mini.rules-ultra { font-size:4.7px; }
  body.match-mode .board-lane .card .card-tags span { font-size:4.2px; }
  body.match-mode .board-lane .card .power-cluster { transform:scale(.78); }

  /* Five dossiers stay side-by-side; the added depth grows downward into the 4K deskmat. */
  .desk-starter-tray .starter-identity {
    min-height:clamp(250px,14vh,310px);
    padding:20px 15px 16px;
    gap:10px;
  }
  .desk-starter-tray .starter-identity > strong { font-size:clamp(12px,.52vw,16px); line-height:1.28; }
  .desk-starter-tray .starter-identity > small { font-size:clamp(9px,.39vw,12px); line-height:1.42; }
  .desk-starter-tray .starter-identity > em { font-size:clamp(8px,.34vw,10px); line-height:1.35; }
}

@media (max-width:760px) {
  body.match-mode .battlefield-surface {
    --field-seam:22px;
    --field-seam-half:11px;
    --field-board-half-balance:68.5px; /* (168px - 31px) / 2 */
  }
  body.match-mode .opponent-board { padding-top:31px; }
  body.match-mode .own-board { padding-bottom:168px; }
  body.match-mode .board-lane .card .card-type-strip,
  body.match-mode .own-hand .hand-fan-card .card-type-strip {
    display:flex;
    min-height:5px;
    margin:-1px 9px 1px 0;
    gap:1px;
  }
  body.match-mode .board-lane .card .card-type-strip span,
  body.match-mode .board-lane .card .card-type-strip b,
  body.match-mode .own-hand .hand-fan-card .card-type-strip span,
  body.match-mode .own-hand .hand-fan-card .card-type-strip b { font-size:2.7px; }
  body.match-mode .board-lane .card .card-type-strip span,
  body.match-mode .own-hand .hand-fan-card .card-type-strip span { padding:1px 2px; }
  body.match-mode .board-lane .card .card-name-row,
  body.match-mode .own-hand .hand-fan-card .card-name-row { min-height:9px; }
  body.match-mode .board-lane .card .card-name,
  body.match-mode .own-hand .hand-fan-card .card-name { font-size:3.7px; padding-right:9px; }
  body.match-mode .board-lane .card .card-cost-badge,
  body.match-mode .own-hand .hand-fan-card .card-cost-badge { transform:scale(.36); }
  body.match-mode .board-lane .card .card-rules-mini,
  body.match-mode .own-hand .hand-fan-card .card-rules-mini {
    padding:1.5px 2px 1px;
    -webkit-line-clamp:2;
    font-size:2.75px;
    line-height:1.08;
  }
  body.match-mode .board-lane .card .card-rules-mini.rules-dense,
  body.match-mode .board-lane .card .card-rules-mini.rules-ultra,
  body.match-mode .own-hand .hand-fan-card .card-rules-mini.rules-dense,
  body.match-mode .own-hand .hand-fan-card .card-rules-mini.rules-ultra { font-size:2.45px; }
  body.match-mode .board-lane .card .card-tags,
  body.match-mode .own-hand .hand-fan-card .card-tags { min-height:4px; margin-top:1px; gap:1px; }
  body.match-mode .board-lane .card .card-tags span,
  body.match-mode .own-hand .hand-fan-card .card-tags span { padding:.5px 1px; font-size:2.1px; }
  body.match-mode .board-lane .card.has-power .card-tags,
  body.match-mode .own-hand .hand-fan-card.has-power .card-tags { padding-right:18px; }
  body.match-mode .board-lane .card.has-power.power-changed .card-tags,
  body.match-mode .own-hand .hand-fan-card.has-power.power-changed .card-tags { padding-right:30px; }
  body.match-mode .board-lane .card .power-cluster,
  body.match-mode .own-hand .hand-fan-card .power-cluster { transform:scale(.42); }
  body.match-mode .board-lane .card.face-down-support .card-info { width:11px; min-width:11px; height:11px; min-height:11px; font-size:4px; }
}

/* Deckbuilder: same desk family, deliberately much quieter than the lobby. No layout/measurement changes. */
body.collection-mode {
  --collection-paper-texture:url('/ui/materials/paper-offwhite/basecolor.webp');
  --collection-folder-texture:url('/ui/materials/folder-manila/basecolor.webp');
  --collection-plastic-texture:url('/ui/materials/plastic-dark-matte/basecolor.webp');
  --collection-metal-texture:url('/ui/materials/metal-black-coated/basecolor.webp');
  --collection-wood-texture:url('/ui/materials/wood-dark-walnut/basecolor.webp');
  background-image:
    linear-gradient(rgba(244,241,234,.88),rgba(235,230,219,.90)),
    var(--collection-wood-texture);
  background-size:auto,900px 900px;
}
body.collection-mode .collection-shell {
  background-image:
    linear-gradient(rgba(28,33,30,.93),rgba(20,25,22,.95)),
    var(--collection-plastic-texture);
  background-size:auto,520px 520px;
  border-color:#3b403b;
  box-shadow:0 13px 34px rgba(32,25,18,.18),inset 0 1px rgba(255,255,255,.045);
}
body.collection-mode .collection-toolbar,
body.collection-mode .collection-discovery {
  background-image:
    linear-gradient(rgba(29,34,31,.94),rgba(19,24,21,.96)),
    var(--collection-plastic-texture);
  background-size:auto,460px 460px;
  border-color:#4a4f49;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 12px rgba(0,0,0,.12);
}
body.collection-mode .collection-browser {
  background-image:
    linear-gradient(rgba(244,240,232,.94),rgba(231,224,213,.95)),
    var(--collection-paper-texture);
  background-size:auto,620px 620px;
  border-color:#9f9586;
  box-shadow:inset 0 1px rgba(255,255,255,.62),inset 0 0 28px rgba(84,67,44,.055);
}
body.collection-mode .collection-filters {
  background-image:
    linear-gradient(rgba(236,231,222,.94),rgba(224,217,206,.95)),
    var(--collection-paper-texture);
  background-size:auto,520px 520px;
  border-color:#716b61;
  box-shadow:0 6px 18px rgba(36,29,21,.15),inset 0 1px rgba(255,255,255,.55);
}
body.collection-mode .collection-filters input,
body.collection-mode .collection-filters select,
body.collection-mode .deck-builder-panel input,
body.collection-mode .deck-builder-panel select {
  border-color:#77756d;
  background:rgba(249,246,239,.94);
  box-shadow:inset 0 0 0 1px rgba(42,45,42,.05);
}
body.collection-mode .builder-starter-shelf,
body.collection-mode .builder-starter-card {
  background-image:
    linear-gradient(rgba(246,235,214,.80),rgba(225,206,174,.82)),
    var(--collection-folder-texture);
  background-size:auto,460px 460px;
  border-color:#a48964;
}
body.collection-mode .deck-builder-panel {
  color:#34312b;
  border-color:#8b8172;
  background-image:
    linear-gradient(rgba(244,239,230,.92),rgba(226,216,202,.94)),
    var(--collection-paper-texture);
  background-size:auto,620px 620px;
  box-shadow:0 13px 32px rgba(34,26,18,.20),inset 0 1px rgba(255,255,255,.58);
}
body.collection-mode .deck-builder-panel label,
body.collection-mode .deck-builder-panel .muted { color:#6d665d; }
body.collection-mode .deck-builder-panel .deck-total {
  border-color:#4e514c;
  background-image:
    linear-gradient(rgba(26,31,28,.94),rgba(18,23,20,.96)),
    var(--collection-plastic-texture);
  background-size:auto,360px 360px;
  color:#eee7dc;
}
body.collection-mode .deck-builder-panel .deck-total.valid { color:#98ddb0; }
body.collection-mode .deck-builder-panel .collection-preview,
body.collection-mode .deck-builder-panel .deck-stats,
body.collection-mode .deck-builder-panel .deck-completion-check,
body.collection-mode .deck-builder-panel .deck-identity,
body.collection-mode .deck-builder-panel .deck-engine-coverage,
body.collection-mode .deck-builder-panel .deck-engine-fits {
  background-image:
    linear-gradient(rgba(250,247,241,.90),rgba(235,228,217,.91)),
    var(--collection-paper-texture);
  background-size:auto,480px 480px;
  border-color:#b3aa9c;
  color:#34312b;
  box-shadow:inset 0 1px rgba(255,255,255,.58),0 3px 9px rgba(52,40,27,.07);
}
body.collection-mode .collection-preview.empty {
  border-style:solid;
  border-color:#b7ad9e;
  background-image:
    linear-gradient(rgba(247,243,235,.88),rgba(233,226,215,.89)),
    var(--collection-paper-texture);
  background-size:auto,460px 460px;
  box-shadow:inset 0 3px 10px rgba(67,53,37,.07),inset 0 0 0 1px rgba(255,255,255,.45);
}
body.collection-mode .collection-toolbar button,
body.collection-mode .deck-builder-panel button,
body.collection-mode .builder-starter-card button {
  border-color:#3f433f;
  background-image:
    linear-gradient(rgba(49,54,50,.90),rgba(28,33,30,.94)),
    var(--collection-plastic-texture);
  background-size:auto,320px 320px;
  color:#eee8dd;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.10);
}
body.collection-mode .collection-toolbar .collection-mode-toggle button.active {
  border-color:#8c7345;
  background-image:linear-gradient(180deg,#ead8a9,#bb9143);
  color:#201c15;
}
body.collection-mode .deck-builder-panel button.danger {
  border-color:#c58e8e;
  background-image:none;
  background:#fff1f1;
  color:#8b1a1a;
}
body.collection-mode .deck-builder-panel button.ghost {
  border-color:transparent;
  background-image:none;
  background:transparent;
  color:#5f5a52;
  box-shadow:none;
}

/* v7.69.8 — board geometry, inspect affordance + readable combat resolution */
/* The phase track is now the neutral full-width seam between two truly equal player halfboards. */
body.match-mode .arena-top-stack {
  min-height:28px;
  display:flex;
  align-items:stretch;
  gap:5px;
}
body.match-mode .arena-top-stack > .connection-banner { flex:0 1 360px; margin:0; }
body.match-mode .arena-top-stack > .turn-banner { flex:1 1 auto; min-width:0; }
body.match-mode .turn-banner {
  min-height:28px;
  padding:4px 8px;
}
body.match-mode .turn-label { font-size:8px; }
body.match-mode .turn-detail { font-size:7px; }

body.match-mode .battlefield-surface {
  --field-seam:30px;
  --player-outer-reserve:142px;
  grid-template-rows:minmax(0,1fr) var(--field-seam) minmax(0,1fr);
  gap:0;
}
body.match-mode .opponent-board {
  grid-row:1;
  padding:var(--player-outer-reserve) 104px 6px 158px;
}
body.match-mode .own-board {
  grid-row:3;
  padding:6px 104px var(--player-outer-reserve) 158px;
}
body.match-mode .player-board::after { display:none; }

body.match-mode .office-divider.board-phase-divider {
  position:relative;
  z-index:31;
  grid-row:2;
  left:auto;
  top:auto;
  transform:none;
  width:100%;
  height:var(--field-seam);
  min-height:var(--field-seam);
  max-height:none;
  margin:0;
  padding:0 8px;
  display:flex;
  align-items:center;
  overflow:visible;
  pointer-events:none;
  border-top:1px solid rgba(199,174,92,.34);
  border-bottom:1px solid rgba(142,213,255,.18);
  background:
    linear-gradient(180deg,rgba(76,71,42,.58),rgba(18,25,28,.96) 46%,rgba(8,16,29,.98));
  box-shadow:0 -2px 8px rgba(0,0,0,.24),0 2px 9px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.045);
}
body.match-mode .office-divider.board-phase-divider::before,
body.match-mode .office-divider.board-phase-divider::after { display:none; }
body.match-mode .board-phase-divider .phase-track {
  position:relative;
  inset:auto;
  transform:none;
  width:100%;
  min-height:0;
  height:100%;
  margin:0;
  padding:3px clamp(16px,7vw,150px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(4px,1.1vw,20px);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
body.match-mode .board-phase-divider .phase-track span {
  position:relative;
  min-width:0;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:0;
  border-radius:2px;
  background:transparent;
  color:#6e7b89;
  box-shadow:none;
  text-align:center;
}
body.match-mode .board-phase-divider .phase-track span b {
  font-size:6.5px;
  line-height:1;
  letter-spacing:.16em;
}
body.match-mode .board-phase-divider .phase-track span.complete { color:#7f8f9c; }
body.match-mode .board-phase-divider .phase-track span.active {
  color:#83f2a2;
  background:linear-gradient(180deg,rgba(74,225,118,.04),rgba(74,225,118,.13));
  box-shadow:inset 0 -2px #4ae176,0 0 18px rgba(74,225,118,.10);
}
body.match-mode .board-phase-divider .phase-track span.active::after {
  content:'';
  position:absolute;
  left:18%;
  right:18%;
  bottom:1px;
  height:2px;
  border-radius:999px;
  background:#4ae176;
  box-shadow:0 0 9px rgba(74,225,118,.66);
}

/* Player identity is now a dedicated cosmetic-ready zone. The monogram is only the fallback avatar. */
body.match-mode .player-head {
  width:clamp(285px,25vw,390px);
  min-height:40px;
  padding:5px 7px;
}
body.match-mode .opponent-board .player-head { top:5px; }
body.match-mode .own-board .player-head { bottom:5px; }
body.match-mode .player-identity { min-width:0; display:flex; align-items:center; gap:7px; }
body.match-mode .player-identity > div:not(.player-avatar-slot) { min-width:0; }
body.match-mode .player-identity > div:not(.player-avatar-slot) > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.match-mode .player-identity > div:not(.player-avatar-slot) > small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-avatar-slot {
  position:relative;
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
}
.player-avatar-frame {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border:2px solid rgba(142,213,255,.48);
  border-radius:6px;
  background:linear-gradient(145deg,#1d3149,#091322);
  color:#dcecff;
  box-shadow:inset 0 0 0 2px rgba(4,11,20,.76),0 2px 6px rgba(0,0,0,.34);
  overflow:hidden;
}
.player-avatar-slot.opponent .player-avatar-frame { border-color:rgba(255,146,154,.52); }
.player-avatar-frame span { font-size:9px; font-weight:950; letter-spacing:.05em; }
.player-avatar-slot > small {
  position:absolute;
  right:-3px;
  bottom:-3px;
  padding:1px 2px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:2px;
  background:#08111f;
  color:#8fa2b7;
  font-size:4px;
  font-weight:900;
  line-height:1;
}
body.match-mode .player-department-mark.player-role-mark {
  min-width:24px;
  height:18px;
  padding:0 4px;
  font-size:5px;
}
body.match-mode .opponent-board .board-resource-row { top:50px; }
body.match-mode .own-board .board-resource-row { bottom:50px; }
body.match-mode .opponent-board .pending-lane { top:50px; }
body.match-mode .own-board .pending-lane { bottom:50px; }

/* The board itself stays visual: permanent branding and unreadable lane labels are removed. */
body.match-mode .arena-surface-layer::after { display:none; content:none; }
body.match-mode .employee-row::after,
body.match-mode .support-row::after { display:none; content:none; }

/* Controller-visible set Incidents keep their printed face; only the opponent receives the full card back. */
body.match-mode .board-lane .card.owner-visible-set {
  outline:1px solid rgba(200,159,83,.55);
  outline-offset:-1px;
}
body.match-mode .board-lane .card.owner-visible-set .runtime-badge.incident-set {
  background:rgba(137,45,38,.92);
  color:#fff4ee;
  border-color:rgba(226,115,102,.72);
}

/* Hover is the fast read path everywhere, right click pins the inspector; the i affordance remains fallback-only. */
body.match-mode .hover-card-preview { z-index:370; }
body.match-mode .board-lane .card .card-info,
body.match-mode .own-hand .hand-fan-card .card-info {
  opacity:.34;
  transform:scale(.82);
  transition:opacity .12s ease;
}
body.match-mode .board-lane .card:hover .card-info,
body.match-mode .board-lane .card:focus-within .card-info,
body.match-mode .own-hand .hand-fan-card:hover .card-info,
body.match-mode .own-hand .hand-fan-card:focus-within .card-info { opacity:.78; }
body.match-mode .hover-inspect-hint b { min-width:28px; }

/* Attack targeting previews the existing red connector before commitment. */
.attack-overlay.attack-preview-overlay path#attackPath {
  stroke:#ef5c52;
  stroke-width:3;
  opacity:.92;
}
.attack-overlay.attack-preview-overlay path#attackGlowPath { stroke:rgba(239,92,82,.22); stroke-width:10; }
.game-shell.interaction-attack .card.interaction-attacker {
  box-shadow:0 14px 30px rgba(203,68,55,.20),0 0 0 3px rgba(239,92,82,.64),0 0 20px rgba(239,92,82,.16);
}
.game-shell.interaction-attack .card.target-candidate:hover {
  box-shadow:0 14px 30px rgba(203,68,55,.20),0 0 0 3px rgba(239,92,82,.62),0 0 20px rgba(239,92,82,.14);
}

/* Authoritative combat result overlay: cards/portrait carry the result instead of a millisecond toast. */
.battle-resolution-overlay {
  position:fixed;
  z-index:390;
  inset:46px 0 0;
  display:grid;
  place-items:center;
  padding:20px;
  pointer-events:none;
  background:radial-gradient(circle at center,rgba(5,12,22,.28),rgba(4,9,17,.08) 45%,transparent 72%);
  animation:battle-overlay-life 3.35s ease both;
}
.battle-stage {
  display:grid;
  grid-template-columns:minmax(150px,220px) auto minmax(150px,220px);
  align-items:center;
  justify-items:center;
  gap:clamp(20px,4vw,70px);
  padding:18px 24px;
  border:1px solid rgba(142,213,255,.20);
  border-radius:8px;
  background:rgba(7,15,27,.84);
  box-shadow:0 28px 90px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(8px);
}
.battle-card-side,
.battle-player-side { display:grid; justify-items:center; gap:7px; }
.battle-side-label {
  color:#8fa1b5;
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;
}
.battle-card-shell {
  position:relative;
  width:clamp(150px,10.5vw,210px);
  aspect-ratio:5/7;
  animation:battle-card-clash .72s cubic-bezier(.28,.76,.28,1) .30s both;
}
.battle-card-shell > .card {
  width:100%;
  min-width:100%;
  max-width:none;
  height:100%;
  min-height:100%;
  max-height:none;
  pointer-events:none;
}
.battle-card-shell .card-info,
.battle-card-shell .card-ability { display:none !important; }
.battle-card-side.winner .battle-card-shell {
  animation:battle-card-clash .72s cubic-bezier(.28,.76,.28,1) .30s both,battle-winner-glow 1.65s ease .92s both;
}
.battle-card-side.archived .battle-card-shell { filter:saturate(.78); }
.battle-vs { display:grid; justify-items:center; gap:6px; }
.battle-vs span {
  color:#f2f5fb;
  font-size:clamp(25px,2.2vw,42px);
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:0 0 20px rgba(142,213,255,.20);
}
.battle-vs small {
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#aebac8;
  font-size:7px;
  font-weight:850;
}
.archive-stamp,
.prevented-stamp {
  position:absolute;
  z-index:8;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%) rotate(-8deg) scale(.78);
  padding:7px 10px 6px;
  border:4px double #c64139;
  background:rgba(245,231,218,.12);
  color:#d74b43;
  font:1000 clamp(15px,1.35vw,25px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-shadow:0 1px rgba(255,255,255,.22);
  box-shadow:0 0 0 1px rgba(104,22,18,.20);
  opacity:0;
  animation:archive-stamp-in .24s cubic-bezier(.16,.84,.34,1.2) .94s forwards;
}
.prevented-stamp {
  border-color:#4ea56e;
  color:#71ca8c;
  transform:translate(-50%,-50%) rotate(5deg) scale(.78);
}
.battle-player-side .player-avatar-slot {
  width:clamp(132px,9.5vw,190px);
  height:clamp(132px,9.5vw,190px);
  flex-basis:auto;
}
.battle-player-side .player-avatar-frame {
  border-width:5px;
  border-radius:14px;
  box-shadow:inset 0 0 0 4px rgba(4,11,20,.78),0 14px 32px rgba(0,0,0,.40);
}
.battle-player-side .player-avatar-frame span { font-size:clamp(30px,3vw,52px); }
.battle-player-side .player-avatar-slot > small {
  right:4px;
  bottom:4px;
  padding:3px 5px;
  font-size:7px;
}
.combat-rep-delta {
  position:absolute;
  z-index:5;
  left:50%;
  bottom:-24px;
  transform:translateX(-50%);
  min-width:max-content;
  color:#ff7f82;
  font-size:16px;
  font-weight:1000;
  text-shadow:0 2px 12px rgba(190,43,43,.42);
}
.battle-player-side.hit .player-avatar-slot {
  animation:player-rep-hit .72s cubic-bezier(.35,.08,.3,.95) .34s both;
}
.battle-player-side.hit .player-avatar-frame {
  box-shadow:inset 0 0 0 4px rgba(91,15,20,.72),0 0 0 4px rgba(224,71,73,.38),0 0 34px rgba(224,71,73,.26);
}

@keyframes battle-overlay-life {
  0% { opacity:0; }
  10%,86% { opacity:1; }
  100% { opacity:0; }
}
@keyframes battle-card-clash {
  0% { transform:translateY(10px) scale(.96); opacity:.35; }
  38% { transform:translateY(-4px) scale(1.025) rotate(-.7deg); opacity:1; }
  56% { transform:translateY(2px) scale(1.015) rotate(.8deg); }
  72% { transform:translateY(-1px) scale(1.01) rotate(-.4deg); }
  100% { transform:none; opacity:1; }
}
@keyframes battle-winner-glow {
  0% { filter:none; box-shadow:none; }
  28%,78% { filter:brightness(1.08) saturate(1.04); box-shadow:0 0 0 3px rgba(74,225,118,.48),0 0 34px rgba(74,225,118,.30); }
  100% { filter:none; box-shadow:0 0 0 1px rgba(74,225,118,.22); }
}
@keyframes archive-stamp-in {
  0% { opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scale(1.45); }
  70% { opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(.94); }
  100% { opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1); }
}
@keyframes player-rep-hit {
  0% { transform:none; filter:none; }
  32% { transform:translateX(-8px) rotate(-1.5deg) scale(1.025); filter:brightness(1.14) saturate(1.25); }
  48% { transform:translateX(7px) rotate(1.2deg) scale(1.025); }
  65% { transform:translateX(-4px) rotate(-.6deg) scale(1.018); }
  82% { transform:translateX(2px) scale(1.01); }
  100% { transform:none; filter:none; }
}

@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .battlefield-surface {
    --field-seam:38px;
    --player-outer-reserve:190px;
  }
  body.match-mode .player-head { width:clamp(340px,23vw,480px); min-height:46px; }
  .player-avatar-slot { width:36px; height:36px; flex-basis:36px; }
  .player-avatar-frame span { font-size:11px; }
  body.match-mode .board-phase-divider .phase-track span b { font-size:8px; }
}

@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .battlefield-surface {
    --field-seam:26px;
    --player-outer-reserve:126px;
  }
  body.match-mode .player-head { min-height:34px; }
  .player-avatar-slot { width:26px; height:26px; flex-basis:26px; }
}

@media (max-width:760px) {
  body.match-mode .arena-top-stack { min-height:28px; display:flex; }
  body.match-mode .turn-banner { min-height:28px; padding:3px 5px; }
  body.match-mode .battlefield-surface {
    --field-seam:24px;
    --player-outer-reserve:clamp(74px,14vh,104px);
    grid-template-rows:minmax(0,1fr) var(--field-seam) minmax(0,1fr);
  }
  body.match-mode .opponent-board { grid-row:1; padding:var(--player-outer-reserve) 36px 2px; }
  body.match-mode .own-board { grid-row:3; padding:2px 36px var(--player-outer-reserve); }
  body.match-mode .office-divider.board-phase-divider {
    grid-row:2;
    height:var(--field-seam);
    min-height:var(--field-seam);
    padding:0 3px;
  }
  body.match-mode .board-phase-divider .phase-track {
    position:relative;
    z-index:auto;
    inset:auto;
    transform:none;
    width:100%;
    height:100%;
    min-height:0;
    padding:2px 4px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;
    border-radius:0;
    background:transparent;
  }
  body.match-mode .board-phase-divider .phase-track span { padding:0 1px; }
  body.match-mode .board-phase-divider .phase-track span b { font-size:4.5px; letter-spacing:.07em; }
  body.match-mode .player-head {
    width:min(250px,calc(100% - 42px));
    min-height:27px;
  }
  .player-avatar-slot { width:22px; height:22px; flex-basis:22px; }
  .player-avatar-frame span { font-size:6px; }
  body.match-mode .player-department-mark.player-role-mark { display:none; }
  body.match-mode .opponent-board .board-resource-row { top:31px; }
  body.match-mode .own-board .board-resource-row { bottom:31px; }
  .battle-resolution-overlay { inset:44px 0 0; padding:8px; }
  .battle-stage {
    grid-template-columns:minmax(94px,124px) auto minmax(94px,124px);
    gap:10px;
    padding:12px 10px 20px;
  }
  .battle-card-shell { width:min(118px,30vw); }
  .battle-vs span { font-size:20px; }
  .archive-stamp,.prevented-stamp { border-width:3px; padding:5px 6px; font-size:12px; }
  .battle-player-side .player-avatar-slot { width:min(112px,28vw); height:min(112px,28vw); }
  .combat-rep-delta { bottom:-20px; font-size:13px; }
}

/* Readable notification windows: keep the visual lifetime aligned with the JS queue/state lifetime. */
.visual-cue { animation:v7698-readable-cue 3.5s ease both; }
.resolution-moment { animation:v7698-readable-resolution 5s ease both; }
.zone-transition-cue { animation-duration:2.5s; }
.zone-transition-cue.search_complete.with-card { animation-duration:3.25s; }
@keyframes v7698-readable-cue {
  0% { opacity:0; transform:translateX(-50%) translateY(-5px) scale(.97); }
  7%,88% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  100% { opacity:0; transform:translateX(-50%) translateY(-4px) scale(.99); }
}
@keyframes v7698-readable-resolution {
  0% { opacity:0; transform:translate(-50%,-45%) scale(.94); }
  7%,90% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-54%) scale(.99); }
}

@media (prefers-reduced-motion:reduce) {
  .visual-cue,
  .resolution-moment,
  .zone-transition-cue,
  .battle-resolution-overlay,
  .battle-card-shell,
  .battle-card-side.winner .battle-card-shell,
  .archive-stamp,
  .prevented-stamp,
  .battle-player-side.hit .player-avatar-slot { animation:none !important; }
  .archive-stamp,.prevented-stamp { opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1); }
}

/* v7.69.9 — responsive board recovery, HUD identity + one-shot combat polish */
/* A phase segment is the seam itself: five equal cells, one contained illuminated state. */
body.match-mode .office-divider.board-phase-divider {
  z-index:20;
  padding:0;
  overflow:hidden;
}
body.match-mode .board-phase-divider .phase-track {
  padding:0;
  gap:0;
}
body.match-mode .board-phase-divider .phase-track span {
  height:100%;
  padding:0 4px;
  border-right:1px solid rgba(142,213,255,.10);
  border-radius:0;
}
body.match-mode .board-phase-divider .phase-track span:last-child { border-right:0; }
body.match-mode .board-phase-divider .phase-track span.active {
  color:#9af5b1;
  background:linear-gradient(180deg,rgba(74,225,118,.16),rgba(74,225,118,.07) 48%,rgba(74,225,118,.18));
  box-shadow:inset 0 0 0 1px rgba(74,225,118,.22),inset 0 0 16px rgba(74,225,118,.10);
}
body.match-mode .board-phase-divider .phase-track span.active::after { display:none; content:none; }

/* Board skins are single coherent half-surfaces; no artificial left/right split remains. */
body.match-mode .arena-surface-layer::before {
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.010) 0 1px,transparent 1px 72px);
}
body.match-mode .opponent-board { padding-bottom:0; }
body.match-mode .own-board { padding-top:0; }

/* Connection recovery belongs to the top status row and must never cover a player identity bar. */
body.match-mode .connection-banner {
  position:relative;
  z-index:24;
  top:auto;
  bottom:auto;
  left:auto;
  width:min(390px,40vw);
  max-width:100%;
  flex:0 1 390px;
  box-sizing:border-box;
}

/* Player identity has room for readable names now and for curated title/badge cosmetics later. */
body.match-mode .player-head {
  width:clamp(390px,34vw,590px);
  min-height:48px;
  grid-template-columns:minmax(150px,1fr) auto;
  gap:10px;
  padding:6px 8px;
}
body.match-mode .player-identity { gap:8px; }
body.match-mode .player-identity-copy { min-width:0; flex:1 1 auto; }
body.match-mode .player-identity-copy > strong { font-size:10px; }
body.match-mode .player-title-slot { min-height:8px; max-width:210px; color:#8f9eaf; font-size:6.5px; }
body.match-mode .player-title-slot.is-empty { visibility:hidden; }
body.match-mode .player-role-mark { flex:0 0 auto; }
.player-avatar-slot { flex-basis:36px; width:36px; height:36px; }
.player-avatar-frame span { font-size:10px; }

/* Clear type identity survives playability/selection states: state is an outer glow, never a replacement type colour. */
.card.type-employee,.catalog-card-face.type-employee { --type-color:#287fb1; --type-dark:#164661; --type-soft:#dcebf2; }
.hover-card-face.type-employee { --type-color:#1765b5; --type-soft:#eaf2ff; }
.card.legal-card {
  border-color:var(--type-color) !important;
  box-shadow:0 7px 18px rgba(0,0,0,.23),0 0 0 2px rgba(72,189,108,.38),0 0 16px rgba(72,189,108,.16);
}
.card.legal-card::after { background:rgba(26,104,58,.90); }

/* Inspector affordance is interaction chrome beneath the card content, never on top of tags/flavour. */
.hover-card-face { padding-bottom:58px; }
.hover-card-face .hover-inspect-hint {
  position:absolute;
  left:13px;
  right:13px;
  bottom:8px;
  min-height:28px;
  margin:0;
  padding:7px 0 0;
  grid-template-columns:28px minmax(0,1fr);
  border-top:1px solid rgba(95,86,75,.16);
  background:linear-gradient(180deg,rgba(233,230,220,0),rgba(233,230,220,.96) 28%);
}
.hover-card-face .hover-inspect-hint small { display:none; }
.hover-card-face.has-power .hover-inspect-hint,
.hover-card-face.has-power.power-changed .hover-inspect-hint { padding-right:96px; }

/* Direct Company Reputation is a real board-native target while an attacker is selected. */
body.match-mode .reputation-target-anchor.direct-target-candidate {
  cursor:crosshair;
  box-shadow:0 0 0 2px rgba(239,92,82,.44),0 0 16px rgba(239,92,82,.15);
}
body.match-mode .reputation-target-anchor.direct-target-candidate:hover {
  box-shadow:0 0 0 3px rgba(239,92,82,.72),0 0 24px rgba(239,92,82,.22);
}

/* The selected attacker is a toggleable board state; no central attack dialog is needed. */
.game-shell.interaction-attack .card.interaction-attacker { cursor:pointer; }

/* Cosmetic-ready deck/archive piles: simple layered DOM cards avoid any need for a top-down 3D render. */
body.match-mode .board-resource-row {
  width:104px;
  gap:6px;
}
body.match-mode .deck-pile,
body.match-mode .archive-compact summary {
  min-height:58px;
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:7px;
  padding:5px 6px;
}
body.match-mode .deck-stack-visual,
body.match-mode .archive-stack-visual,
body.match-mode .archive-stack-empty {
  position:relative;
  grid-row:1 / span 2;
  width:32px;
  height:45px;
  display:block;
}
body.match-mode .deck-stack-visual > i,
body.match-mode .archive-stack-visual > i,
body.match-mode .archive-stack-empty::before,
body.match-mode .archive-stack-empty::after {
  content:'';
  position:absolute;
  width:29px;
  height:41px;
  border:1px solid rgba(210,196,163,.35);
  border-radius:3px;
  background:#0c1620;
}
body.match-mode .deck-stack-visual > i:first-child,
body.match-mode .archive-stack-visual > i:first-child,
body.match-mode .archive-stack-empty::before { left:0; top:4px; }
body.match-mode .deck-stack-visual > i:nth-child(2),
body.match-mode .archive-stack-visual > i:nth-child(2),
body.match-mode .archive-stack-empty::after { left:2px; top:2px; }
body.match-mode .deck-stack-visual > span,
body.match-mode .archive-stack-visual > span {
  position:absolute;
  z-index:2;
  left:4px;
  top:0;
  width:29px;
  height:41px;
  overflow:hidden;
  border:1px solid rgba(224,207,167,.52);
  border-radius:3px;
  background:#111a22;
}
body.match-mode .deck-stack-visual .ocg-card-back { inset:0; }
body.match-mode .archive-stack-visual .card-art-stage,
body.match-mode .archive-stack-visual .card-art-window { width:100%; height:100%; margin:0; border:0; border-radius:0; }
body.match-mode .archive-stack-visual img { width:100%; height:100%; object-fit:cover; }
body.match-mode .deck-pile > span,
body.match-mode .archive-summary-copy > span { align-self:end; font-size:5.5px; }
body.match-mode .deck-pile > strong,
body.match-mode .archive-summary-copy > strong { align-self:start; font-size:14px; }
body.match-mode .archive-summary-copy { min-width:0; display:grid; align-content:center; }
body.match-mode .archive-compact summary { cursor:pointer; }
body.match-mode .archive-compact[open] .archive-grid {
  width:min(720px,72vw);
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;
}
body.match-mode .archive-compact[open] .archive-grid > .card {
  width:96px;
  min-width:96px;
  max-width:96px;
  height:134px;
  min-height:134px;
  max-height:134px;
}

/* Opponent played-card reveals are intentionally readable; self plays no longer duplicate this banner. */
.gameplay-presentation.card_played,
.gameplay-presentation.card-played { width:min(600px,calc(100vw - 24px)); min-height:126px; gap:14px; padding:10px 12px; }
.gameplay-presentation.card_played .gameplay-presentation-card,
.gameplay-presentation.card-played .gameplay-presentation-card { width:86px; height:120px; }
.gameplay-presentation.card_played .gameplay-presentation-card > .card,
.gameplay-presentation.card-played .gameplay-presentation-card > .card {
  width:86px; min-width:86px; max-width:86px;
  height:120px; min-height:120px; max-height:120px;
  padding:3px;
}
.gameplay-presentation.card_played .gameplay-presentation-copy strong,
.gameplay-presentation.card-played .gameplay-presentation-copy strong { font-size:17px; }
.gameplay-presentation.card_played .gameplay-presentation-copy span,
.gameplay-presentation.card-played .gameplay-presentation-copy span { font-size:7px; }
.gameplay-presentation.card_played .gameplay-presentation-copy small,
.gameplay-presentation.card-played .gameplay-presentation-copy small { font-size:9px; line-height:1.35; }

/* Defeat is a loss state everywhere, including the primary result action. */
.match-end-overlay.tone-loss .match-end-overlay-card > button {
  background:#9b3437;
  color:#fff2f2;
  border-color:#d86568;
}

/* Combat lives in a persistent portal keyed to the authoritative resolution event, so polling/renders cannot remount it. */
.combat-presentation-host { position:relative; z-index:390; }

@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .player-head { width:clamp(520px,30vw,760px); min-height:60px; padding:8px 10px; }
  .player-avatar-slot { width:46px; height:46px; flex-basis:46px; }
  .player-avatar-frame span { font-size:13px; }
  body.match-mode .player-identity-copy > strong { font-size:15px; }
  body.match-mode .player-title-slot { max-width:280px; min-height:11px; font-size:9px; }
  body.match-mode .board-resource-row { width:132px; }
}

@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .player-head { width:min(500px,calc(100% - 120px)); min-height:42px; }
  .player-avatar-slot { width:32px; height:32px; flex-basis:32px; }
  body.match-mode .board-resource-row { width:94px; }
}

/* P0 mobile recovery: every board primitive is constrained to the viewport and both 5+4 halfboards stay full-width. */
@media (max-width:760px) {
  body.match-mode,
  body.match-mode .app,
  body.match-mode .game-shell,
  body.match-mode .game-main,
  body.match-mode .arena-layout,
  body.match-mode .arena-board-column,
  body.match-mode .battlefield-surface {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  body.match-mode .app,
  body.match-mode .game-shell,
  body.match-mode .game-main { overflow:hidden; }
  body.match-mode .game-main {
    padding:2px 3px 3px;
    grid-template-rows:auto minmax(0,1fr);
    gap:2px;
  }
  body.match-mode .arena-layout {
    grid-template-columns:minmax(0,1fr) !important;
    gap:0;
    min-height:0;
    overflow:hidden;
  }
  body.match-mode .arena-sidepanel { display:none !important; }
  body.match-mode .arena-board-column {
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  body.match-mode .battlefield-surface {
    --field-seam:22px;
    --player-outer-reserve:94px;
    height:100%;
    min-height:0;
    padding:0;
    grid-template-rows:minmax(0,1fr) var(--field-seam) minmax(0,1fr);
    gap:0;
    overflow:hidden;
    contain:layout paint;
  }
  body.match-mode .opponent-board,
  body.match-mode .own-board {
    width:100%;
    max-width:100%;
    min-width:0;
    height:100%;
    margin:0;
    gap:1px;
    overflow:visible;
  }
  body.match-mode .opponent-board { padding:var(--player-outer-reserve) 40px 0 3px !important; }
  body.match-mode .own-board { padding:0 40px var(--player-outer-reserve) 3px !important; }
  body.match-mode .office-divider.board-phase-divider {
    width:100%;
    max-width:100%;
    min-width:0;
    height:var(--field-seam);
    min-height:var(--field-seam);
    margin:0;
    padding:0;
  }
  body.match-mode .board-phase-divider .phase-track { padding:0; gap:0; }
  body.match-mode .board-phase-divider .phase-track span b { font-size:4.6px; letter-spacing:.06em; }
  body.match-mode .slots.employee-row,
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    width:100%;
    max-width:100%;
    min-width:0;
    justify-content:center;
    gap:2px;
  }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot {
    width:min(100%,72px);
    max-width:72px;
    height:auto;
    max-height:100%;
    aspect-ratio:5/7;
  }
  body.match-mode .arena-top-stack {
    min-height:0;
    display:flex !important;
    align-items:flex-start;
    gap:3px;
    overflow:visible;
  }
  body.match-mode .arena-top-stack > .turn-banner { display:none; }
  body.match-mode .connection-banner {
    position:relative !important;
    z-index:24;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:min(100%,330px) !important;
    max-width:100%;
    margin:0;
    padding:4px 5px;
    min-height:28px;
    flex:0 1 auto;
  }
  body.match-mode .connection-banner button { min-height:24px; min-width:92px; padding:3px 5px; font-size:6.5px; }
  body.match-mode .connection-banner strong { font-size:7px; }
  body.match-mode .connection-banner span { font-size:5.5px; }
  body.match-mode .mobile-board-nav { display:block !important; }
  body.match-mode .match-opening {
    position:absolute;
    z-index:42;
    top:2px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:calc(100% - 8px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:68px;
    margin:0;
    padding:4px 5px;
    overflow:hidden;
    align-self:start;
    justify-self:center;
  }
  body.match-mode .match-deck strong { max-width:30vw; }
  body.match-mode .player-head {
    left:3px;
    right:auto;
    width:calc(100% - 46px) !important;
    max-width:360px;
    min-height:34px;
    padding:3px 4px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px;
  }
  body.match-mode .opponent-board .player-head { top:3px; }
  body.match-mode .own-board .player-head { bottom:3px; }
  .player-avatar-slot { width:28px; height:28px; flex-basis:28px; }
  .player-avatar-frame span { font-size:7px; }
  body.match-mode .player-identity-copy > strong { font-size:7px; }
  body.match-mode .player-title-slot { min-height:5px; max-width:44vw; font-size:4.8px; }
  body.match-mode .player-head-status { gap:2px; }
  body.match-mode .player-vitals { grid-template-columns:repeat(2,minmax(30px,36px)); gap:1px; }
  body.match-mode .board-resource-row {
    right:3px;
    width:34px;
    gap:2px;
  }
  body.match-mode .opponent-board .board-resource-row { top:40px; }
  body.match-mode .own-board .board-resource-row { bottom:40px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary {
    min-height:35px;
    padding:2px;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    place-items:center;
  }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual,
  body.match-mode .archive-stack-empty { width:24px; height:34px; grid-row:auto; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .archive-stack-empty::before,
  body.match-mode .archive-stack-empty::after,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span { width:21px; height:30px; }
  body.match-mode .deck-pile > span,
  body.match-mode .deck-pile > strong,
  body.match-mode .archive-summary-copy,
  body.match-mode .archive-compact summary > small { display:none; }
  body.match-mode .archive-compact[open] .archive-grid {
    position:fixed;
    z-index:380;
    inset:54px 6px 54px;
    width:auto;
    max-height:none;
    grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  }
  body.match-mode .archive-compact[open] .archive-grid > .card {
    width:72px; min-width:72px; max-width:72px;
    height:101px; min-height:101px; max-height:101px;
  }
  .gameplay-presentation.card_played,
  .gameplay-presentation.card-played {
    top:calc(48px + env(safe-area-inset-top));
    width:calc(100vw - 12px);
    min-height:92px;
    gap:8px;
    padding:6px 7px;
  }
  .gameplay-presentation.card_played .gameplay-presentation-card,
  .gameplay-presentation.card-played .gameplay-presentation-card { width:58px; height:81px; }
  .gameplay-presentation.card_played .gameplay-presentation-card > .card,
  .gameplay-presentation.card-played .gameplay-presentation-card > .card {
    width:58px; min-width:58px; max-width:58px;
    height:81px; min-height:81px; max-height:81px;
  }
  .gameplay-presentation.card_played .gameplay-presentation-copy strong,
  .gameplay-presentation.card-played .gameplay-presentation-copy strong { font-size:12px; }
  .battle-resolution-overlay { inset:44px 0 0; padding:6px; }
  .battle-stage {
    width:min(100%,360px);
    grid-template-columns:minmax(82px,1fr) auto minmax(82px,1fr);
    gap:7px;
    padding:10px 7px 18px;
  }
  .battle-card-shell { width:min(104px,28vw); }
  .battle-player-side .player-avatar-slot { width:min(96px,26vw); height:min(96px,26vw); }
  body.match-mode .hover-card-preview { display:none !important; }
}

/* Short mobile landscape / small-tablet landscape needs the same full-width board contract even above 760px. */
@media (min-width:761px) and (max-width:1180px) and (max-height:600px) {
  body.match-mode .game-main { padding:2px 4px 3px; gap:2px; }
  body.match-mode .arena-layout {
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr) !important;
    gap:0;
    overflow:hidden;
  }
  body.match-mode .arena-sidepanel { display:none !important; }
  body.match-mode .arena-board-column,
  body.match-mode .battlefield-surface { width:100%; max-width:100%; min-width:0; overflow:hidden; }
  body.match-mode .battlefield-surface {
    --field-seam:22px;
    --player-outer-reserve:62px;
    padding:0;
    grid-template-rows:minmax(0,1fr) var(--field-seam) minmax(0,1fr);
    gap:0;
  }
  body.match-mode .opponent-board { padding:var(--player-outer-reserve) 48px 0 3px !important; }
  body.match-mode .own-board { padding:0 48px var(--player-outer-reserve) 3px !important; }
  body.match-mode .slots.employee-row { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:3px; }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:3px; }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot {
    width:auto !important;
    max-width:74px;
    height:100% !important;
    max-height:100%;
    aspect-ratio:5/7;
    justify-self:center;
  }
  body.match-mode .office-divider.board-phase-divider { width:100%; height:var(--field-seam); min-height:var(--field-seam); margin:0; }
  body.match-mode .board-phase-divider .phase-track { padding:0; gap:0; }
  body.match-mode .player-head {
    left:3px;
    width:min(430px,calc(100% - 56px)) !important;
    min-height:34px;
    padding:3px 5px;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .player-avatar-slot { width:28px; height:28px; flex-basis:28px; }
  body.match-mode .board-resource-row { right:3px; width:42px; gap:2px; }
  body.match-mode .opponent-board .board-resource-row { top:36px; }
  body.match-mode .own-board .board-resource-row { bottom:36px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary { min-height:38px; padding:2px; grid-template-columns:1fr; grid-template-rows:1fr; place-items:center; }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual,
  body.match-mode .archive-stack-empty { width:25px; height:35px; grid-row:auto; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .archive-stack-empty::before,
  body.match-mode .archive-stack-empty::after,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span { width:22px; height:31px; }
  body.match-mode .deck-pile > span,
  body.match-mode .deck-pile > strong,
  body.match-mode .archive-summary-copy,
  body.match-mode .archive-compact summary > small { display:none; }
  body.match-mode .own-hand { bottom:30px; width:min(58%,560px); height:64px; }
  body.match-mode .own-hand .hand-fan-card,
  body.match-mode .own-hand .hand-fan-card:first-child {
    width:48px; min-width:48px; max-width:48px;
    height:67px; min-height:67px; max-height:67px;
    margin-left:-8px !important;
  }
  body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0 !important; }
  body.match-mode .match-opening {
    top:2px;
    width:min(760px,calc(100% - 8px));
    height:auto !important;
    min-height:0 !important;
    max-height:54px;
    padding:3px 5px;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:6px;
    overflow:hidden;
  }
  body.match-mode .match-opening-center span,
  body.match-mode .match-opening-center small { display:none; }
  body.match-mode .match-deck > span { width:26px; height:26px; flex:0 0 26px; }
  body.match-mode .match-deck strong { max-width:24vw; font-size:7px; }
  body.match-mode .arena-top-stack { min-height:28px; display:flex; gap:3px; }
  body.match-mode .arena-top-stack > .turn-banner { min-height:28px; }
  body.match-mode .connection-banner { position:relative; top:auto; left:auto; width:min(300px,36vw); padding:3px 5px; }
}

@media (max-width:760px) {
  body.match-mode .mobile-board-nav { height:28px; min-height:28px; max-height:28px; padding:2px 4px; overflow:hidden; }
  body.match-mode .mobile-match-hud { height:100%; min-height:0; padding:0; align-items:center; }
}

/* Mobile shell uses one explicit vertical flow; no implicit grid row may collapse the battlefield into a side sliver. */
@media (max-width:760px) {
  body.match-mode .game-main { display:flex; flex-direction:column; height:100%; min-height:0; }
  body.match-mode .match-opening {
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    flex:0 0 auto;
    align-self:stretch;
    width:100% !important;
    max-height:58px;
    order:0;
  }
  body.match-mode .arena-top-stack { flex:0 0 auto; width:100%; order:1; }
  body.match-mode .arena-top-stack:not(:has(.connection-banner)) { display:none !important; }
  body.match-mode .mobile-board-nav { flex:0 0 28px; width:100%; order:2; }
  body.match-mode .arena-layout { flex:1 1 0; height:auto; min-height:0; order:3; }
}

@media (min-width:761px) and (max-width:1180px) and (max-height:600px) {
  body.match-mode .game-main { display:flex; flex-direction:column; height:100%; min-height:0; }
  body.match-mode .match-opening {
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    flex:0 0 auto;
    align-self:center;
    order:0;
  }
  body.match-mode .arena-top-stack { flex:0 0 auto; width:100%; order:1; }
  body.match-mode .arena-top-stack:not(:has(.connection-banner)) { min-height:0; height:0; display:none; }
  body.match-mode .arena-layout { flex:1 1 0; height:auto; min-height:0; order:2; }
}


/* v7.69.10 — phase baseline + board-wide direct attack target */
body.match-mode .board-phase-divider .phase-track span b {
  display:block;
  transform:translateY(-0.5px);
}
body.match-mode .opponent-board.direct-attack-board-target {
  cursor:crosshair;
  box-shadow:inset 0 0 0 1px rgba(220,72,72,.22), inset 0 0 34px rgba(183,48,48,.045);
}
body.match-mode .opponent-board.direct-attack-board-target:hover {
  box-shadow:inset 0 0 0 1px rgba(232,82,82,.42), inset 0 0 44px rgba(183,48,48,.075);
}
@media (hover:none), (pointer:coarse) {
  body.match-mode .opponent-board.direct-attack-board-target {
    cursor:default;
    box-shadow:inset 0 0 0 1px rgba(232,82,82,.28), inset 0 0 30px rgba(183,48,48,.055);
  }
}

/* v7.69.11 — stable transient motion, hover-safe cards + readable deck/archive piles */
/* A movement cue may stay visible for a few seconds, but its entrance motion runs only on the first render. */
.zone-transition-cue.motion-stable { animation:none !important; }

/* Cosmetic piles gain presence without stealing board space. Empty deck is a tray, never a fake remaining card. */
body.match-mode .board-resource-row { width:118px; gap:7px; }
body.match-mode .deck-pile,
body.match-mode .archive-compact summary {
  min-height:68px;
  grid-template-columns:45px minmax(0,1fr);
  column-gap:8px;
  padding:6px 7px;
}
body.match-mode .deck-stack-visual,
body.match-mode .archive-stack-visual,
body.match-mode .archive-stack-empty,
body.match-mode .deck-stack-empty {
  width:39px;
  height:55px;
}
body.match-mode .deck-stack-visual > i,
body.match-mode .archive-stack-visual > i,
body.match-mode .archive-stack-empty::before,
body.match-mode .archive-stack-empty::after {
  width:35px;
  height:49px;
}
body.match-mode .deck-stack-visual > span,
body.match-mode .archive-stack-visual > span {
  width:35px;
  height:49px;
}
body.match-mode .deck-stack-empty {
  position:relative;
  grid-row:1 / span 2;
  display:block;
  border:1px dashed rgba(210,196,163,.28);
  border-radius:4px;
  background:rgba(7,14,22,.28);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.018);
}
body.match-mode .deck-pile.is-empty { opacity:.78; }

/* Hand hover previews always clear the bottom viewport edge; JS measures their real rendered height. */
body.match-mode .hover-card-preview { bottom:auto; }

@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .board-resource-row { width:154px; }
}
@media (min-width:761px) and (max-height:1000px) {
  body.match-mode .board-resource-row { width:108px; }
}
@media (max-width:760px) {
  /* Keep the proven mobile geometry; only teach the new empty deck tray the existing compact slot size. */
  body.match-mode .deck-stack-empty { width:24px; height:34px; grid-row:auto; }
}
@media (min-width:761px) and (max-width:1180px) and (max-height:600px) {
  body.match-mode .deck-stack-empty { width:25px; height:35px; grid-row:auto; }
}

/* v7.69.12 — centered hover preview, board-native placement + compact physical piles */
/* Hover closeups use one stable battlefield-centered preview zone regardless of card origin. */
body.match-mode .hover-card-preview { margin:0; }

/* Desktop hand follows the visual center of the playable lane geometry (158px left / 104px right reserve). */
@media (min-width:761px) and (max-width:2199px) and (min-height:601px) {
  body.match-mode .own-hand { left:calc(50% + 27px); }
}

/* Deck/archive should read as physical piles, not roomy dashboard tiles. */
body.match-mode .board-resource-row { width:82px; gap:6px; }
body.match-mode .deck-pile,
body.match-mode .archive-compact {
  border-color:rgba(142,213,255,.13);
  background:rgba(7,15,27,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012),0 4px 12px rgba(0,0,0,.16);
}
body.match-mode .deck-pile,
body.match-mode .archive-compact summary {
  position:relative;
  min-height:86px;
  padding:5px;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  place-items:center;
}
body.match-mode .deck-stack-visual,
body.match-mode .archive-stack-visual { width:52px; height:73px; grid-row:auto; }
body.match-mode .deck-stack-visual > i,
body.match-mode .archive-stack-visual > i,
body.match-mode .deck-stack-visual > span,
body.match-mode .archive-stack-visual > span { width:48px; height:67px; }
body.match-mode .deck-stack-visual > i:first-child,
body.match-mode .archive-stack-visual > i:first-child { left:0; top:5px; }
body.match-mode .deck-stack-visual > i:nth-child(2),
body.match-mode .archive-stack-visual > i:nth-child(2) { left:2px; top:2px; }
body.match-mode .deck-summary-copy,
body.match-mode .archive-summary-copy {
  position:absolute;
  z-index:5;
  right:4px;
  top:4px;
  min-width:23px;
  padding:2px 3px;
  display:grid;
  gap:1px;
  border:1px solid rgba(142,213,255,.18);
  border-radius:3px;
  background:rgba(5,13,24,.90);
  color:#dce8fa;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.26);
}
body.match-mode .deck-summary-copy span,
body.match-mode .archive-summary-copy span { font-size:4px; line-height:1; letter-spacing:.08em; color:#8090a2; text-transform:uppercase; }
body.match-mode .deck-summary-copy strong,
body.match-mode .archive-summary-copy strong { font-size:12px; line-height:1; color:#dce8fa; }
body.match-mode .deck-pile > small,
body.match-mode .archive-compact summary > small { display:none; }

/* Zero really means empty: no fake card silhouette or fake stack remains. */
body.match-mode .deck-stack-empty,
body.match-mode .archive-stack-empty { display:none !important; }
body.match-mode .deck-pile.is-empty,
body.match-mode .archive-compact.is-empty summary { min-height:48px; opacity:.82; }
body.match-mode .deck-pile.is-empty .deck-summary-copy,
body.match-mode .archive-compact.is-empty .archive-summary-copy {
  position:static;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
body.match-mode .deck-pile.is-empty .deck-summary-copy span,
body.match-mode .archive-compact.is-empty .archive-summary-copy span { font-size:5px; }
body.match-mode .deck-pile.is-empty .deck-summary-copy strong,
body.match-mode .archive-compact.is-empty .archive-summary-copy strong { font-size:14px; }

@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .board-resource-row { width:104px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary { min-height:104px; }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual { width:62px; height:87px; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span { width:58px; height:81px; }
}

/* Preserve the proven mobile/short-landscape footprint; only the desktop pile gets materially larger. */
@media (max-width:760px), (min-width:761px) and (max-width:1180px) and (max-height:600px) {
  body.match-mode .board-resource-row { width:31px; gap:2px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary { min-height:38px; padding:2px; }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual { width:24px; height:34px; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span { width:21px; height:30px; }
  body.match-mode .deck-summary-copy,
  body.match-mode .archive-summary-copy { display:none; }
  body.match-mode .deck-pile.is-empty,
  body.match-mode .archive-compact.is-empty summary { min-height:38px; }
}

/* v7.69.13 — mobile slot parity, physical piles + live-card lobby showcase */
/* Desktop piles prioritize the actual cards. Empty Archive is a compact status, never a blank card tile. */
@media (min-width:761px) and (min-height:601px) {
  body.match-mode .board-resource-row {
    width:96px;
    gap:5px;
  }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary {
    min-height:104px;
    padding:6px;
  }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual {
    width:66px;
    height:92px;
  }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span {
    width:62px;
    height:87px;
  }
  body.match-mode .deck-summary-copy,
  body.match-mode .archive-summary-copy {
    right:3px;
    top:3px;
  }
  body.match-mode .archive-summary-copy strong {
    min-width:0;
    width:auto;
    height:auto;
    border-radius:0;
    background:transparent;
  }
  body.match-mode .archive-compact.is-empty summary {
    min-height:34px;
    padding:5px 7px;
  }
  body.match-mode .archive-compact.is-empty .archive-summary-copy {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    width:100%;
  }
  body.match-mode .archive-compact.is-empty .archive-summary-copy span { font-size:5px; }
  body.match-mode .archive-compact.is-empty .archive-summary-copy strong { font-size:12px; color:#9cabbc; }
}

@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .board-resource-row { width:126px; gap:7px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary { min-height:136px; padding:8px; }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual { width:86px; height:120px; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span { width:81px; height:113px; }
  body.match-mode .archive-compact.is-empty summary { min-height:44px; }
  body.match-mode .deck-summary-copy,
  body.match-mode .archive-summary-copy { right:5px; top:5px; min-width:29px; padding:3px 4px; }
  body.match-mode .deck-summary-copy strong,
  body.match-mode .archive-summary-copy strong { font-size:15px; }
}

/* Mobile gameplay is centered independently of the right-side Deck/Archive rail. Both lanes use one card width. */
@media (max-width:760px) {
  body.match-mode .opponent-board { padding:var(--player-outer-reserve) 20px 0 !important; }
  body.match-mode .own-board { padding:0 20px var(--player-outer-reserve) !important; }

  body.match-mode .slots.employee-row,
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    --mobile-lane-gap:2px;
    gap:var(--mobile-lane-gap);
    justify-content:center;
    align-items:center;
  }
  body.match-mode .slots.employee-row {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    grid-template-columns:repeat(4,minmax(0,calc((100% - 8px) / 5))) !important;
  }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot {
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    max-height:100% !important;
    aspect-ratio:5/7 !important;
    align-self:center;
  }
  body.match-mode .board-lane .card:not(.face-down-support) {
    min-height:0;
  }
  body.match-mode .board-lane .card.face-down-support > .ocg-card-back {
    width:100%;
    height:100%;
  }
}

/* Lobby showcase cards are the same live card anatomy players see in the match, not a stretched catalog mockup. */
.desk-card-fan-item > .lobby-live-card {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 9px 20px rgba(0,0,0,.20);
}
.desk-card-fan-item > .lobby-live-card .card-art-stage { flex:0 0 auto; }
.desk-card-fan-item > .lobby-live-card .card-rules-mini { flex:1 1 auto; min-height:0; }
.desk-card-fan-item > .lobby-live-card .card-tags { flex:0 0 auto; }

@media (min-width:2200px) and (min-height:1100px) {
  .desk-card-fan-item { width:clamp(245px,7.1vw,285px); }
  .desk-card-fan-item > .lobby-live-card { padding:7px 7px 6px; }
  .desk-card-fan-item > .lobby-live-card .card-type-strip span,
  .desk-card-fan-item > .lobby-live-card .card-type-strip b { font-size:7px; }
  .desk-card-fan-item > .lobby-live-card .card-name { font-size:13px; }
  .desk-card-fan-item > .lobby-live-card .card-name.long-name { font-size:11.5px; }
  .desk-card-fan-item > .lobby-live-card .card-rules-mini { font-size:7.8px; line-height:1.18; }
  .desk-card-fan-item > .lobby-live-card .card-tags span { font-size:5.7px; }
}


/* v7.69.14 — provisional Classic Office halfboard + mobile parity + pile/showcase polish */
/* Each seat owns its own board-skin slot. Both default to Classic Office for now; the opponent-facing half is always rotated 180deg in the viewer's render. */
body.match-mode .player-board {
  isolation:isolate;
}
body.match-mode .player-board::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border:0;
  border-radius:0;
  opacity:1;
  background:
    linear-gradient(180deg,rgba(5,12,22,.42),rgba(4,10,19,.56)),
    var(--board-skin-image,linear-gradient(#07101d,#07101d)) center / cover no-repeat;
  transform-origin:50% 50%;
}
body.match-mode .player-board.board-skin-classic-office { --board-skin-image:url('/cosmetics/boards/classic-office.webp'); }
body.match-mode .own-board::before { transform:none; }
body.match-mode .opponent-board::before { transform:rotate(180deg); }

/* The board rail is card-first: larger physical pile, tighter and quieter chrome. */
@media (min-width:761px) and (min-height:601px) {
  body.match-mode .board-resource-row { width:112px; gap:5px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact {
    border-color:rgba(142,213,255,.09);
    background:rgba(5,12,22,.38);
    box-shadow:none;
  }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary {
    min-height:116px;
    padding:4px;
  }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual { width:78px; height:109px; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span { width:74px; height:104px; }
  body.match-mode .archive-compact.is-empty summary { min-height:30px; padding:4px 6px; }
}
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .board-resource-row { width:164px; gap:7px; right:10px; }
  body.match-mode .deck-pile,
  body.match-mode .archive-compact summary { min-height:176px; padding:6px; }
  body.match-mode .deck-stack-visual,
  body.match-mode .archive-stack-visual { width:118px; height:165px; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .archive-stack-visual > i,
  body.match-mode .deck-stack-visual > span,
  body.match-mode .archive-stack-visual > span { width:112px; height:157px; }
  body.match-mode .deck-summary-copy,
  body.match-mode .archive-summary-copy { right:6px; top:6px; min-width:32px; }
  body.match-mode .deck-summary-copy strong,
  body.match-mode .archive-summary-copy strong { font-size:17px; }
  body.match-mode .archive-compact.is-empty summary { min-height:38px; padding:5px 7px; }
}

/* On narrow touch boards the 4-slot support row is a centered 4/5-width group on the same gameplay axis as Employees. */
@media (max-width:760px) {
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    grid-template-columns:repeat(4,calc((100% - 8px) / 5)) !important;
    justify-content:center !important;
    justify-items:stretch;
  }

  /* Field cards keep the real 5:7 frame but use a readable mini-card anatomy instead of microscopic rules text. */
  body.match-mode .board-lane .card:not(.face-down-support) {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:3px !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-type-strip {
    display:flex !important;
    min-height:7px;
    margin:-1px 9px 1px 0;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-type-strip span,
  body.match-mode .board-lane .card:not(.face-down-support) .card-type-strip b { font-size:2.9px; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-name-row { min-height:12px; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-name { font-size:4.5px; line-height:1.02; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-stage {
    flex:1 1 auto;
    min-height:0;
    margin:0;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-window { height:100%; min-height:0; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-window img { width:100%; height:100%; object-fit:cover; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-rules-mini,
  body.match-mode .board-lane .card:not(.face-down-support) .card-tags,
  body.match-mode .board-lane .card:not(.face-down-support) .card-detail-row { display:none !important; }
  body.match-mode .board-lane .card:not(.face-down-support) .power-cluster { transform:scale(.50); transform-origin:bottom right; }
  body.match-mode .board-lane .card.face-down-support > .ocg-card-back { width:100%; height:100%; }
}

/* Lobby hero uses the exact Deckbuilder catalog face, scaled as a showcase card. */
.desk-card-fan-item > .catalog-card-face {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  box-sizing:border-box;
  pointer-events:auto;
}
/* Preserve the pointer-reactive T2/T3 finish in the lobby at every desktop scale, including 4K. */
.desk-card-fan-item:hover > .catalog-card-face.tier-t2 .catalog-art-stage::after { opacity:.42; }
.desk-card-fan-item:hover > .catalog-card-face.tier-t3 .catalog-art-stage::after { opacity:.58; }
@media (min-width:2200px) and (min-height:1100px) {
  .desk-card-fan-item { width:clamp(300px,8.8vw,365px); }
  .desk-card-fan-item > .catalog-card-face.tier-t2 .catalog-art-stage::after,
  .desk-card-fan-item > .catalog-card-face.tier-t3 .catalog-art-stage::after {
    background-size:155% 155%,180% 180%,200% 200%;
  }
}

/* v7.69.15 — board-skin clarity, resource rail balance + lobby large-card finish */
/* A real board skin owns the lane surface. Keep the interaction slots, but let the artwork breathe. */
body.match-mode .player-board[class*="board-skin-"] .board-lane {
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
body.match-mode .player-board[class*="board-skin-"] .board-lane::before { display:none !important; }

/* Resource rail: the Archive remains visibly related to the Deck instead of collapsing into a tiny counter. */
@media (min-width:761px) and (min-height:601px) {
  body.match-mode .board-resource-row { width:118px; }
  body.match-mode .archive-compact.is-empty summary {
    min-height:58px;
    padding:6px 8px;
  }
  body.match-mode .archive-compact.is-empty .archive-summary-copy {
    min-height:44px;
    display:grid;
    place-items:center;
    gap:4px;
    border:1px dashed rgba(142,213,255,.13);
    border-radius:5px;
  }
  body.match-mode .archive-compact.is-empty .archive-summary-copy span { font-size:6px; }
  body.match-mode .archive-compact.is-empty .archive-summary-copy strong { font-size:16px; }
}
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .board-resource-row { width:174px; }
  body.match-mode .deck-pile { min-height:184px; overflow:hidden; }
  body.match-mode .deck-stack-visual { width:120px; height:168px; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .deck-stack-visual > span { width:114px; height:160px; }
  body.match-mode .archive-compact.is-empty summary { min-height:82px; padding:8px 10px; }
  body.match-mode .archive-compact.is-empty .archive-summary-copy { min-height:62px; }
  body.match-mode .archive-compact.is-empty .archive-summary-copy span { font-size:7px; }
  body.match-mode .archive-compact.is-empty .archive-summary-copy strong { font-size:20px; }
}

/* Mobile: the 4-slot support group is centered on the same five-column gameplay axis. */
@media (max-width:760px) {
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    width:80%;
    margin-inline:auto;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    justify-content:center !important;
  }
  body.match-mode .board-lane .card,
  body.match-mode .board-lane .empty-slot { aspect-ratio:5/7 !important; }
}

/* Lobby large cards keep the shared Deckbuilder face, but scale its typography/anatomy for showcase duty. */
.desk-card-fan-item > .catalog-card-face {
  display:flex;
  flex-direction:column;
}
.desk-card-fan-item > .catalog-card-face .catalog-rules { flex:0 0 auto; }
.desk-card-fan-item > .catalog-card-face .catalog-tags { margin-top:auto; }
/* The legacy T3 sweep created a visible bar over real artwork; the shared foil masks remain intact. */
.desk-card-fan-item .catalog-foil-sheen { display:none !important; }

@media (min-width:761px) {
  .desk-card-fan-item > .catalog-card-face .catalog-rules {
    min-height:46px;
    max-height:58px;
    font-size:8px;
    line-height:1.2;
    -webkit-line-clamp:4;
  }
  .desk-card-fan-item > .catalog-card-face .catalog-tags { min-height:18px; max-height:18px; }
}
@media (min-width:2200px) and (min-height:1100px) {
  .desk-card-fan-item > .catalog-card-face .catalog-rules {
    min-height:72px;
    max-height:88px;
    padding:8px;
    font-size:11px;
    line-height:1.22;
    -webkit-line-clamp:5;
  }
  .desk-card-fan-item > .catalog-card-face .catalog-tags {
    min-height:26px;
    max-height:26px;
    align-items:flex-end;
  }
  .desk-card-fan-item > .catalog-card-face .catalog-tags span { font-size:7px; padding:3px 5px; }
}

/* v7.69.16 — small visual regression fixes: catalog art, mobile field cards, hand isolation + 4K piles */
/* Deckbuilder/Lobby catalog artwork now uses the same clipped wrapper pattern as live cards.
   This removes compositor edge bands without touching the in-match card renderer or foil masks. */
.catalog-art-stage {
  isolation:isolate;
  overflow:hidden;
  contain:paint;
}
.catalog-art-stage > .catalog-art-window {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  border:0;
  border-radius:inherit;
  background:#252924;
}
.catalog-art-stage > .catalog-art-window > img {
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  display:block;
  object-fit:cover;
  object-position:var(--art-focus-x,50%) var(--art-focus-y,50%);
  filter:saturate(1.04) contrast(1.025);
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Hover/foil work on one hand card must never paint into neighbouring fan cards. */
body.match-mode .own-hand { isolation:isolate; }
body.match-mode .own-hand .hand-fan-card {
  isolation:isolate;
  transform-style:flat;
  backface-visibility:hidden;
}
body.match-mode .own-hand .hand-fan-card .card-art-stage {
  overflow:hidden;
  contain:paint;
  isolation:isolate;
}

/* Restore the complete card anatomy on mobile field cards. v7.69.14's compressed field-only
   variant made artwork collapse into a strip; field cards now scale the same 5:7 language as hand cards. */
@media (max-width:760px) {
  body.match-mode .board-lane .card:not(.face-down-support) {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:3px !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-stage {
    flex:0 0 auto !important;
    width:100%;
    height:auto !important;
    min-height:0;
    aspect-ratio:16/9;
    margin:0 0 1px;
    overflow:hidden;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-window {
    width:100%;
    height:auto !important;
    min-height:0;
    aspect-ratio:16/9;
    margin:0;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-rules-mini {
    display:-webkit-box !important;
    flex:1 1 auto !important;
    min-height:0;
    margin:1px 0 0;
    padding:1.5px 2px 1px;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-size:2.55px;
    line-height:1.08;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-tags {
    display:flex !important;
    flex:0 0 auto;
    min-height:4px;
    margin-top:1px;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-detail-row { display:none !important; }
  body.match-mode .board-lane .card:not(.face-down-support) .power-cluster {
    transform:scale(.42);
    transform-origin:bottom right;
  }
}

/* Resource rail: keep 1K Archive readable and rebuild the 4K Deck from actual 5:7 card layers. */
@media (min-width:761px) and (min-height:601px) {
  body.match-mode .archive-compact.is-empty summary { min-height:70px; }
  body.match-mode .archive-compact.is-empty .archive-summary-copy strong { font-size:18px; }
}
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .board-resource-row {
    width:196px;
    right:12px;
    gap:9px;
  }
  body.match-mode .deck-pile {
    min-height:226px;
    padding:8px;
    overflow:visible;
  }
  body.match-mode .deck-stack-visual {
    width:156px;
    height:210px;
  }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .deck-stack-visual > span {
    width:140px;
    height:196px;
    border-radius:5px;
  }
  body.match-mode .deck-stack-visual > i:first-child { left:0; top:12px; }
  body.match-mode .deck-stack-visual > i:nth-child(2) { left:6px; top:6px; }
  body.match-mode .deck-stack-visual > span { left:12px; top:0; }
  body.match-mode .deck-summary-copy { right:8px; top:8px; min-width:36px; }
  body.match-mode .deck-summary-copy strong { font-size:18px; }

  body.match-mode .archive-compact.is-empty summary {
    min-height:88px;
    padding:8px 10px;
  }
  body.match-mode .archive-compact.is-empty .archive-summary-copy strong { font-size:24px; }
  body.match-mode .archive-compact:not(.is-empty) summary { min-height:174px; padding:7px; }
  body.match-mode .archive-stack-visual { width:118px; height:162px; }
  body.match-mode .archive-stack-visual > i,
  body.match-mode .archive-stack-visual > span { width:108px; height:151px; }
  body.match-mode .archive-stack-visual > i:first-child { left:0; top:9px; }
  body.match-mode .archive-stack-visual > i:nth-child(2) { left:4px; top:4px; }
  body.match-mode .archive-stack-visual > span { left:8px; top:0; }
}

/* v7.69.17 — cosmetic loadout foundation + root visual fixes */
/* Catalog art goes back to a single direct image layer. The development ART badge was the only
   catalog-only element sitting on the artwork edge and is intentionally removed from player-facing cards. */
.catalog-art-stage > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:var(--art-focus-x,50%) var(--art-focus-y,50%);
  filter:saturate(1.04) contrast(1.025);
}
.catalog-art-stage .art-ready-badge { display:none !important; }

/* Every fanned hand card owns its paint. Foil / hover children can no longer composite into neighbours. */
body.match-mode .own-hand .hand-fan-card {
  contain:paint;
  isolation:isolate;
}
body.match-mode .own-hand .hand-fan-card:hover,
body.match-mode .own-hand .hand-fan-card:focus-within { z-index:60 !important; }

/* Avatar art and fallback initials are composed by the shared avatar-composition root below. */
.player-avatar-frame { position:relative; }

/* Lobby profile identity uses the same avatar/frame stack as Match HUD identity. */
.profile-identity { min-width:0; display:flex; align-items:center; gap:9px; }
.profile-identity-copy { min-width:0; display:grid; gap:2px; }
.profile-identity-copy > span { font-size:8px; font-weight:950; letter-spacing:.12em; color:#8b8177; }
.profile-identity-copy > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-identity-copy > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8a837a; font-size:9px; }
.profile-avatar-chip { flex:0 0 44px; width:44px; height:44px; }
.profile-avatar-chip .player-avatar-frame { width:44px; height:44px; }
@media (max-width:620px) {
  .profile-avatar-chip, .profile-avatar-chip .player-avatar-frame { width:38px; height:38px; flex-basis:38px; }
}

/* Shared avatar composition: the equipped frame owns the complete visible perimeter. */
.avatar-composition {
  position:relative;
  box-sizing:border-box;
  display:block;
  width:100%;
  height:100%;
  isolation:isolate;
}
.avatar-composition .avatar-composition-image,
.avatar-composition .avatar-composition-decoration,
.avatar-composition .avatar-composition-frame {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.avatar-composition .avatar-composition-image { z-index:1; object-fit:cover; object-position:center center; }
.avatar-composition .avatar-composition-decoration { z-index:2; object-fit:fill; }
.avatar-composition .avatar-composition-frame { z-index:3; object-fit:fill; }
.avatar-composition .avatar-portrait-mask {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:hidden;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
.avatar-composition .avatar-portrait-mask.avatar-frame-mask-blue-silver {
  -webkit-mask-image:url('/cosmetics/avatar-frames/masks/blue-silver.png');
  mask-image:url('/cosmetics/avatar-frames/masks/blue-silver.png');
}
.avatar-composition .avatar-portrait-mask.avatar-frame-mask-bronze {
  -webkit-mask-image:url('/cosmetics/avatar-frames/masks/bronze-ranked-s01.png');
  mask-image:url('/cosmetics/avatar-frames/masks/bronze-ranked-s01.png');
}
.avatar-composition .avatar-portrait-mask.avatar-frame-mask-gold {
  -webkit-mask-image:url('/cosmetics/avatar-frames/masks/gold-ranked-s01.png');
  mask-image:url('/cosmetics/avatar-frames/masks/gold-ranked-s01.png');
}
.avatar-composition .avatar-portrait-mask.avatar-frame-mask-diamond {
  -webkit-mask-image:url('/cosmetics/avatar-frames/masks/diamond-ranked-s01.png');
  mask-image:url('/cosmetics/avatar-frames/masks/diamond-ranked-s01.png');
}
.avatar-composition .avatar-composition-fallback {
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  color:#dcecff;
  font-weight:950;
  letter-spacing:.05em;
}
.avatar-composition.has-avatar-frame {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}
.avatar-composition.has-avatar-frame .avatar-composition-frame { inset:0; width:100%; height:100%; }
.cosmetic-avatar-preview.avatar-composition.has-avatar-frame {
  width:min(88%,220px);
  border:0;
  border-radius:0;
  box-shadow:none;
}
.profile-avatar-chip .avatar-composition { width:100%; height:100%; }

/* Deck and Archive are physical tabletop piles, not translucent dashboard tiles. */
body.match-mode .deck-pile,
body.match-mode .archive-compact,
body.match-mode .archive-compact summary {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.match-mode .deck-pile,
body.match-mode .archive-compact summary {
  padding:0 !important;
  overflow:visible !important;
}
body.match-mode .archive-compact { overflow:visible; }
body.match-mode .deck-pile:not(.is-empty),
body.match-mode .archive-compact:not(.is-empty) summary { min-height:0 !important; }
body.match-mode .archive-compact.is-empty summary {
  min-height:30px !important;
  padding:0 !important;
}
body.match-mode .archive-compact.is-empty .archive-summary-copy {
  position:static;
  padding:2px 0;
  border:0;
  background:transparent;
  box-shadow:none;
}
body.match-mode .archive-compact.is-empty .archive-summary-copy span { opacity:.72; }

/* 4K keeps the successful larger 5:7 stack, now free on the desk instead of squeezed into chrome. */
@media (min-width:2200px) and (min-height:1100px) {
  body.match-mode .board-resource-row { width:176px; gap:12px; right:12px; }
  body.match-mode .deck-stack-visual { width:156px; height:218.4px; }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .deck-stack-visual > span { width:140px; height:196px; }
  body.match-mode .archive-stack-visual { width:118px; height:165px; }
  body.match-mode .archive-stack-visual > i,
  body.match-mode .archive-stack-visual > span { width:108px; height:151px; }
  body.match-mode .archive-compact.is-empty .archive-summary-copy strong { font-size:18px; }
}

/* Mobile field cards use the same complete card anatomy as the hand. Only scale changes. */
@media (max-width:760px) {
  body.match-mode .board-lane .card:not(.face-down-support) {
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding:3px !important;
    overflow:hidden;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-type-strip {
    display:flex !important;
    flex:0 0 auto !important;
    min-height:5px !important;
    margin:-1px 9px 1px 0 !important;
    gap:1px !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-type-strip span,
  body.match-mode .board-lane .card:not(.face-down-support) .card-type-strip b { font-size:2.7px !important; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-type-strip span { padding:1px 2px !important; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-name-row {
    display:flex !important;
    flex:0 0 auto !important;
    min-height:9px !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-name {
    font-size:3.7px !important;
    line-height:1.06 !important;
    padding-right:9px !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-cost-badge {
    transform:scale(.36) !important;
    transform-origin:top right !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-stage {
    display:block !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/9 !important;
    margin:0 0 2px !important;
    overflow:hidden !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-window,
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-window.has-art {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-art-window img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-detail-row { display:none !important; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-rules-mini {
    display:-webkit-box !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    margin:1px 0 0 !important;
    padding:1.5px 2px 1px !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-size:2.75px !important;
    line-height:1.08 !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-rules-mini.rules-dense,
  body.match-mode .board-lane .card:not(.face-down-support) .card-rules-mini.rules-ultra { font-size:2.45px !important; }
  body.match-mode .board-lane .card:not(.face-down-support) .card-tags {
    display:flex !important;
    flex:0 0 auto !important;
    min-height:4px !important;
    margin-top:1px !important;
    gap:1px !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .card-tags span {
    padding:.5px 1px !important;
    font-size:2.1px !important;
  }
  body.match-mode .board-lane .card:not(.face-down-support) .power-cluster {
    transform:scale(.42) !important;
    transform-origin:bottom right !important;
  }
}

/* v7.69.18 — archive direction + unified mobile mini live cards */
/* Deck and Archive are physical tabletop objects. The rail itself must never draw another panel behind them. */
body.match-mode .battlefield-surface .board-resource-row {
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.match-mode .archive-compact { position:relative; }

/* Desktop Archives open inward toward the center of the battlefield. The mobile Archive already uses
   a fixed viewport-safe sheet and intentionally keeps that behaviour. */
@media (min-width:761px) {
  body.match-mode .archive-compact.archive-opponent[open] .archive-grid {
    top:calc(100% + 8px) !important;
    bottom:auto !important;
    right:0;
  }
  body.match-mode .archive-compact.archive-own[open] .archive-grid {
    top:auto !important;
    bottom:calc(100% + 8px) !important;
    right:0;
  }
}

/* Board cards, opened Archive cards and opponent-play notifications use one explicit compact live-card
   anatomy on phone portrait and short landscape. Only size changes between surfaces; title/art/rules/tags stay in the same
   proportions instead of inheriting three generations of field-only compression rules. */
@media (max-width:760px), (min-width:761px) and (max-width:1180px) and (max-height:600px) {
  body.match-mode .card.card-surface-board:not(.face-down-support),
  body.match-mode .card.card-surface-archive:not(.face-down-support),
  body.match-mode .card.card-surface-notification:not(.face-down-support) {
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:8% 18% 38% minmax(0,1fr) 8% !important;
    align-content:stretch !important;
    padding:3px !important;
    overflow:hidden !important;
    aspect-ratio:5 / 7 !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-type-strip,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-type-strip,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-type-strip {
    grid-row:1 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 11px 1px 0 !important;
    gap:1px !important;
    overflow:hidden !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-type-strip span,
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-type-strip b,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-type-strip span,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-type-strip b,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-type-strip span,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-type-strip b {
    font-size:2.55px !important;
    line-height:1 !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-type-strip span,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-type-strip span,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-type-strip span {
    padding:1px 2px !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-name-row,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-name-row,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-name-row {
    grid-row:2 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    align-items:start !important;
    overflow:hidden !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-name,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-name,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-name {
    min-height:0 !important;
    padding:1px 10px 0 0 !important;
    font-size:3.6px !important;
    line-height:1.02 !important;
    -webkit-line-clamp:2 !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-cost-badge,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-cost-badge,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-cost-badge {
    transform:scale(.34) !important;
    transform-origin:top right !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-art-stage,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-art-stage,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-art-stage {
    grid-row:3 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-art-window,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-art-window,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-art-window {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    border-radius:2px !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-art-window img,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-art-window img,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-art-window img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-detail-row,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-detail-row,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-detail-row {
    display:none !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-rules-mini,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-rules-mini,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-rules-mini {
    grid-row:4 !important;
    display:-webkit-box !important;
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;
    margin:1px 0 0 !important;
    padding:1.5px 2px 1px !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    font-size:2.3px !important;
    line-height:1.06 !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-rules-mini.rules-dense,
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-rules-mini.rules-ultra,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-rules-mini.rules-dense,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-rules-mini.rules-ultra,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-rules-mini.rules-dense,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-rules-mini.rules-ultra {
    font-size:2.05px !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-tags,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-tags,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-tags {
    grid-row:5 !important;
    display:flex !important;
    min-height:0 !important;
    height:auto !important;
    margin:1px 0 0 !important;
    gap:1px !important;
    padding-right:14px !important;
    overflow:hidden !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-tags span,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-tags span,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-tags span {
    padding:.5px 1px !important;
    font-size:1.9px !important;
    line-height:1 !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-info,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-info,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-info {
    width:9px !important;
    min-width:9px !important;
    height:9px !important;
    min-height:9px !important;
    font-size:3px !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .card-runtime-row,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .card-runtime-row,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .card-runtime-row {
    left:1px !important;
    right:1px !important;
    bottom:1px !important;
    gap:1px !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .runtime-badge,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .runtime-badge,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .runtime-badge {
    min-height:4px !important;
    padding:1px 2px !important;
    font-size:2.15px !important;
    line-height:1 !important;
  }
  body.match-mode .card.card-surface-board:not(.face-down-support) .power-cluster,
  body.match-mode .card.card-surface-archive:not(.face-down-support) .power-cluster,
  body.match-mode .card.card-surface-notification:not(.face-down-support) .power-cluster {
    transform:scale(.40) !important;
    transform-origin:bottom right !important;
  }

  /* The mobile Archive remains a fixed, viewport-safe sheet; only its cards now use the shared mini anatomy. */
  body.match-mode .archive-compact[open] .archive-grid {
    overflow:auto !important;
    overscroll-behavior:contain;
  }
}

/* Isolated desktop full-width board prototype: utilities float above the arena instead of reserving a side rail. */
@media (min-width:761px) {
  body.match-mode .game-main { padding-inline:clamp(8px,1vw,24px); }
  body.match-mode .arena-layout {
    position:relative;
    grid-template-columns:minmax(0,1fr) !important;
    gap:0;
  }
  body.match-mode .arena-sidepanel { display:none !important; }
  body.match-mode .arena-board-column { width:100%; max-width:none; }
  .desktop-match-utilities {
    position:absolute;
    z-index:44;
    top:8px;
    right:8px;
    display:flex;
    align-items:flex-start;
    gap:5px;
    pointer-events:none;
  }
  .desktop-match-utility { position:relative; min-width:0; color:#dce8fa; pointer-events:auto; }
  .desktop-match-utility > summary {
    min-height:30px;
    padding:5px 7px;
    display:flex;
    align-items:center;
    gap:5px;
    list-style:none;
    border:1px solid rgba(142,213,255,.24);
    border-radius:5px;
    background:rgba(10,22,38,.96);
    color:#dce8fa;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    font-size:8px;
    font-weight:900;
    cursor:pointer;
  }
  .desktop-match-utility > summary::-webkit-details-marker { display:none; }
  .desktop-match-utility > summary span { color:#8ed5ff; letter-spacing:.08em; }
  .desktop-match-utility > summary b { color:#c9d5e4; font-size:7px; }
  .desktop-match-utility > summary i { color:#7f91a5; font-style:normal; letter-spacing:.06em; }
  .desktop-match-utility[open] > summary { border-color:rgba(142,213,255,.52); box-shadow:0 8px 22px rgba(0,0,0,.34),inset 0 -2px #4ae176; }
  .desktop-match-utility-panel {
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    width:min(430px,38vw);
    max-height:calc(100dvh - 112px);
    overflow:auto;
    padding:8px;
    border:1px solid rgba(142,213,255,.24);
    border-radius:5px;
    background:rgba(8,18,33,.98);
    color:#d5e0f1;
    box-shadow:0 20px 55px rgba(0,0,0,.48);
    backdrop-filter:blur(14px);
  }
  .desktop-match-utility-panel,
  .desktop-match-utility-panel * { min-width:0; box-sizing:border-box; }
  .desktop-match-utility-panel { overflow-x:hidden; overflow-wrap:anywhere; }
  .match-utility-menu .desktop-match-utility-panel { width:min(390px,34vw); }
  .match-utility-log .desktop-match-utility-panel { width:min(560px,52vw); }
  .match-utility-developer .desktop-match-utility-panel { width:min(820px,72vw); }
  .desktop-match-utility-panel > header {
    display:grid;
    gap:2px;
    margin:-1px -1px 7px;
    padding:2px 2px 7px;
    border-bottom:1px solid rgba(142,213,255,.14);
  }
  .desktop-match-utility-panel > header span { color:#7f91a4; font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }
  .desktop-match-utility-panel > header strong { color:#edf5ff; font-size:11px; }
  .desktop-match-utility-panel > header small { color:#8f9eaf; font-size:7px; line-height:1.3; }
  .match-menu-actions {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:7px;
    padding-top:7px;
    border-top:1px solid rgba(142,213,255,.12);
  }
  .match-menu-actions button {
    min-height:30px;
    padding:5px 8px;
    border:1px solid rgba(142,213,255,.22);
    border-radius:4px;
    background:rgba(17,31,52,.82);
    color:#dce8fa;
    font-size:8px;
    font-weight:900;
    cursor:pointer;
  }
  .match-menu-actions button[data-action="resign"] { border-color:rgba(255,146,154,.38); color:#ffb7bb; }
  .match-menu-actions button:disabled { cursor:not-allowed; opacity:.58; }
  .match-menu-connection { display:block; margin-top:6px; color:#8292a5; font-size:7px; line-height:1.35; }
  .desktop-match-utility-panel .match-context-stack,
  .desktop-match-utility-panel .guidance-coach,
  .desktop-match-utility-panel .match-feed,
  .desktop-match-utility-panel .utility-strip { margin:0; min-width:0; }
  .desktop-match-utility-panel .match-feed { border-color:rgba(142,213,255,.14); background:rgba(8,18,33,.72); }
  .desktop-match-utility-panel .playtest-tools { border-color:rgba(142,213,255,.14); border-radius:4px; background:rgba(8,18,33,.72); }
  .desktop-match-utility-panel .playtest-tools-grid { padding:4px 0 0; }
  .desktop-match-utility-panel .opening-readiness,
  .desktop-match-utility-panel .main-phase-context,
  .desktop-match-utility-panel .battle-phase-context,
  .desktop-match-utility-panel .end-phase-context,
  .desktop-match-utility-panel .response-desk,
  .desktop-match-utility-panel .decision-desk,
  .desktop-match-utility-panel .guidance-coach { grid-template-columns:minmax(0,1fr); }
  .desktop-match-utility-panel .opening-readiness-head,
  .desktop-match-utility-panel .main-phase-context-head,
  .desktop-match-utility-panel .battle-phase-context-head,
  .desktop-match-utility-panel .end-phase-context-head,
  .desktop-match-utility-panel .response-desk-head,
  .desktop-match-utility-panel .decision-desk-head { padding:0 0 6px; border-right:0; border-bottom:1px solid rgba(142,213,255,.10); }
  .desktop-match-utility-panel .opening-readiness-stats,
  .desktop-match-utility-panel .main-phase-context-stats,
  .desktop-match-utility-panel .battle-phase-context-stats,
  .desktop-match-utility-panel .end-phase-context-stats,
  .desktop-match-utility-panel .response-desk-stats,
  .desktop-match-utility-panel .decision-desk-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; overflow:visible; }
  .desktop-match-utility-panel .opening-readiness-stats > span,
  .desktop-match-utility-panel .main-phase-context-stats > span,
  .desktop-match-utility-panel .battle-phase-context-stats > span,
  .desktop-match-utility-panel .end-phase-context-stats > span,
  .desktop-match-utility-panel .response-desk-stats > span,
  .desktop-match-utility-panel .decision-desk-stats > span { width:auto; max-width:100%; overflow:hidden; }
  .desktop-match-utility-panel .guidance-actions { grid-column:auto; grid-row:auto; flex-wrap:wrap; }
}

@media (max-width:760px) {
  .desktop-match-utilities { display:none !important; }
}

/* Cosmetic inventory + shop: the same desk materials, with the owned collection kept private. */
body.cosmetic-mode {
  background-image:linear-gradient(rgba(241,236,226,.86),rgba(230,223,211,.90)),url('/ui/materials/wood-dark-walnut/basecolor.webp');
  background-size:auto,900px 900px;
}
.cosmetic-shell { width:min(2360px,calc(100% - 96px)); margin:18px auto 44px; padding:18px; color:#e9e2d6; background-image:linear-gradient(180deg,rgba(35,40,36,.97),rgba(19,24,21,.98)),url('/ui/materials/plastic-dark-matte/basecolor.webp'); background-size:auto,520px 520px; border:1px solid #4c5149; box-shadow:0 16px 38px rgba(45,30,15,.22),inset 0 1px rgba(255,255,255,.05); }
.cosmetic-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:10px 12px 18px; border-bottom:1px solid rgba(214,173,103,.26); }
.cosmetic-header > div:first-child { min-width:0; }
.cosmetic-header .ghost { display:block; margin:0 0 16px; padding:0; border:0; background:none; color:#d4b778; box-shadow:none; }
.cosmetic-eyebrow,.cosmetic-content-head span,.cosmetic-item-copy > span,.cosmetic-empty > span { display:block; color:#bda06d; font-size:10px; font-weight:900; letter-spacing:.14em; }
.cosmetic-header h1 { margin:0; font:700 clamp(28px,3vw,44px)/1.04 Georgia,"Times New Roman",serif; color:#f5ecdd; }
.cosmetic-header p { max-width:720px; margin:8px 0 0; color:#aeb3aa; font-size:13px; line-height:1.5; }
.cosmetic-wallet { min-width:170px; padding:13px 15px; border:1px solid rgba(214,173,103,.35); background:linear-gradient(180deg,rgba(62,49,29,.76),rgba(28,30,25,.92)); text-align:right; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.cosmetic-wallet span,.cosmetic-wallet small { display:block; color:#bbad91; font-size:10px; font-weight:800; letter-spacing:.12em; }
.cosmetic-wallet strong { display:block; margin:2px 0; color:#f4d28d; font:700 30px Georgia,serif; }
.cosmetic-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; padding-top:16px; }
.cosmetic-categories { display:grid; align-content:start; gap:6px; }
.cosmetic-categories button { display:flex; justify-content:space-between; align-items:center; gap:9px; min-height:45px; padding:9px 11px; border:1px solid #465047; background:rgba(14,20,17,.55); color:#c1c8bd; text-align:left; }
.cosmetic-categories button:hover,.cosmetic-categories button.active { border-color:#bb8b43; background:linear-gradient(180deg,rgba(91,69,34,.86),rgba(41,39,28,.94)); color:#fff0ce; }
.cosmetic-categories button b { min-width:22px; padding:3px 5px; border:1px solid rgba(222,188,119,.3); color:#d6b66f; font-size:11px; text-align:center; }
.cosmetic-content { min-width:0; padding:14px; border:1px solid #6c685c; background-image:linear-gradient(rgba(246,242,233,.95),rgba(229,221,209,.96)),url('/ui/materials/paper-offwhite/basecolor.webp'); background-size:auto,620px 620px; color:#342f28; box-shadow:inset 0 1px rgba(255,255,255,.65),0 7px 18px rgba(16,13,9,.16); }
.cosmetic-content-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px 2px 13px; border-bottom:1px solid rgba(87,76,60,.25); }
.cosmetic-content-head strong { display:block; margin-top:4px; font:700 25px Georgia,serif; color:#322d26; }
.cosmetic-loadout-strip { max-width:260px; padding:8px 10px; border-left:2px solid #bb8b43; color:#706653; text-align:right; }
.cosmetic-loadout-strip b { display:block; overflow:hidden; color:#302b24; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.cosmetic-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),320px)); justify-content:start; align-content:start; gap:14px; padding-top:14px; }
.cosmetic-grid.is-empty { min-height:clamp(230px,22vh,360px); align-content:center; }
.cosmetic-item { display:grid; grid-template-rows:auto auto minmax(25px,auto) auto; align-content:start; gap:9px; min-height:365px; padding:10px; border:1px solid #b4a894; border-radius:8px; background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(244,235,220,.76)); box-shadow:0 5px 12px rgba(59,43,26,.12),inset 0 1px rgba(255,255,255,.7); }
.cosmetic-item.is-equipped { border-color:#8c6e36; box-shadow:inset 0 0 0 2px rgba(183,142,62,.3),0 5px 12px rgba(59,43,26,.12); }
.cosmetic-item-art { display:grid; place-items:center; min-height:184px; padding:12px; overflow:hidden; background:linear-gradient(150deg,rgba(35,40,35,.98),rgba(22,29,24,.98)); border:1px solid #626458; border-radius:6px; }
.cosmetic-board-preview { width:100%; max-width:100%; aspect-ratio:5 / 2; overflow:hidden; border:1px solid #a67c3c; background:#263b32; }
.cosmetic-board-preview img { width:100%; height:100%; object-fit:cover; }
.cosmetic-board-preview.fallback { display:grid; place-items:center; color:#e6c684; font:700 16px Georgia,serif; }
.cosmetic-item[data-cosmetic-kind="BOARD"] { grid-column:span 2; width:min(100%,680px); min-height:0; }
.cosmetic-item[data-cosmetic-kind="BOARD"] .cosmetic-item-art { min-height:0; }
.cosmetic-item[data-cosmetic-kind="BOARD"] .cosmetic-board-preview { aspect-ratio:10 / 3; }
.cosmetic-avatar-preview { width:min(68%,150px); aspect-ratio:1; overflow:hidden; border:3px solid #b98b42; border-radius:50%; background:#1a2823; box-shadow:0 0 0 1px rgba(245,210,141,.35),0 7px 16px rgba(0,0,0,.25); }
.cosmetic-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.cosmetic-avatar-preview.layered { display:grid; place-items:center; color:#e7d2a2; font:700 30px Georgia,serif; }
.cosmetic-cardback-preview { display:grid; place-items:center; align-content:center; gap:4px; width:112px; max-width:75%; aspect-ratio:5 / 7; border:4px solid #c1974e; outline:1px solid #433521; color:#d6b16b; background:repeating-linear-gradient(45deg,#233a31 0 5px,#1b2d26 5px 10px); font-family:Georgia,serif; box-shadow:0 7px 14px rgba(0,0,0,.24); }
.cosmetic-cardback-preview span { font-size:9px; letter-spacing:.16em; }.cosmetic-cardback-preview b { font-size:13px; }
.cosmetic-badge-preview { display:grid; place-items:center; width:100px; aspect-ratio:1; color:#e3bd70; border:2px solid #b48843; border-radius:50%; font-size:42px; box-shadow:0 0 0 5px rgba(180,136,67,.10),0 7px 14px rgba(0,0,0,.22); }
.cosmetic-title-preview { padding:8px; color:#e5c37f; font:700 12px Georgia,serif; text-align:center; }
.cosmetic-item-copy { min-width:0; }.cosmetic-item-copy h3 { margin:5px 0 3px; color:#2f2a23; font:700 18px/1.08 Georgia,serif; }.cosmetic-item-copy p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; min-height:45px; margin:0; color:#6b6257; font-size:11px; line-height:1.35; }
.cosmetic-item-state { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:0; }.cosmetic-item-state b { display:inline-flex; align-items:center; min-height:20px; padding:3px 7px; border:1px solid rgba(123,92,40,.42); border-radius:3px; background:rgba(224,192,120,.2); color:#7b5c28; font-size:9px; letter-spacing:.08em; }.cosmetic-item-state strong { margin-left:auto; color:#7b5c28; font-size:9px; letter-spacing:0; }
.cosmetic-item-actions { align-self:end; min-height:36px; margin-top:auto; }.cosmetic-item-actions button { width:100%; min-height:34px; border-color:#414941; border-radius:6px; background:linear-gradient(180deg,#414a42,#28322c); color:#f4eddf; }.cosmetic-item-actions button.primary { color:#fff8e9; }
.cosmetic-confirm { display:flex; align-items:center; gap:10px; margin:14px 0 0; padding:11px 12px; border:1px solid #af8547; background:rgba(255,247,224,.72); }.cosmetic-confirm > div { min-width:0; flex:1; }.cosmetic-confirm span { display:block; color:#8b672e; font-size:9px; font-weight:900; letter-spacing:.12em; }.cosmetic-confirm strong { display:block; margin-top:3px; color:#3a3123; font-size:14px; }.cosmetic-confirm button { white-space:nowrap; }.cosmetic-message { margin-top:12px; padding:9px 11px; border-left:3px solid #a57936; background:rgba(255,246,218,.7); color:#5a4625; font-size:12px; }
.cosmetic-empty { grid-column:1/-1; width:min(100%,520px); min-height:160px; justify-self:center; align-self:center; display:grid; place-content:center; justify-items:center; gap:8px; padding:22px; border:1px solid #b2a38f; border-radius:8px; background:rgba(255,252,244,.52); color:#61584c; text-align:center; }.cosmetic-empty strong { color:#373128; font:700 21px Georgia,serif; }.cosmetic-empty p { max-width:420px; margin:0; font-size:12px; line-height:1.45; }
@media (max-width:760px) { .cosmetic-shell { width:100%; margin:0; padding:9px 7px 28px; border-left:0; border-right:0; }.cosmetic-header { gap:12px; padding:5px 6px 13px; }.cosmetic-header h1 { font-size:28px; }.cosmetic-header p { font-size:11px; }.cosmetic-wallet { min-width:105px; padding:8px 9px; }.cosmetic-wallet strong { font-size:23px; }.cosmetic-layout { grid-template-columns:1fr; gap:10px; padding-top:10px; }.cosmetic-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.cosmetic-categories button { min-height:40px; padding:7px 8px; font-size:11px; }.cosmetic-content { padding:9px; }.cosmetic-content-head { align-items:flex-start; }.cosmetic-loadout-strip { max-width:140px; font-size:9px; }.cosmetic-grid { grid-template-columns:minmax(0,1fr); gap:9px; }.cosmetic-item { min-height:0; }.cosmetic-item-art { min-height:150px; }.cosmetic-confirm { align-items:stretch; flex-wrap:wrap; }.cosmetic-confirm > div { flex-basis:100%; }.cosmetic-confirm button { flex:1; } }
@media (max-height:600px) and (orientation:landscape) and (min-width:761px) { .cosmetic-shell { width:calc(100% - 28px); margin:8px auto 20px; padding:10px; }.cosmetic-header { gap:12px; padding:4px 6px 10px; }.cosmetic-header h1 { font-size:27px; }.cosmetic-header p { margin-top:4px; font-size:10px; }.cosmetic-wallet { min-width:140px; padding:8px 10px; }.cosmetic-wallet strong { font-size:23px; }.cosmetic-layout { grid-template-columns:180px minmax(0,1fr); gap:10px; padding-top:10px; }.cosmetic-categories { gap:4px; }.cosmetic-categories button { min-height:33px; padding:6px 8px; font-size:10px; }.cosmetic-content { padding:9px; }.cosmetic-content-head { padding-bottom:8px; }.cosmetic-content-head strong { font-size:20px; }.cosmetic-grid { grid-template-columns:repeat(auto-fill,minmax(200px,260px)); gap:10px; padding-top:10px; }.cosmetic-item { min-height:0; gap:6px; padding:8px; }.cosmetic-item-art { min-height:108px; padding:7px; }.cosmetic-item-copy h3 { font-size:15px; }.cosmetic-item-copy p { min-height:30px; font-size:9px; -webkit-line-clamp:2; }.cosmetic-item-state { min-height:18px; }.cosmetic-item-actions,.cosmetic-item-actions button { min-height:29px; }.cosmetic-item-actions button { font-size:10px; } }

@media (max-width:760px) { .cosmetic-grid.is-empty { min-height:180px; }.cosmetic-item[data-cosmetic-kind="BOARD"] { grid-column:auto; width:100%; max-width:none; }.cosmetic-item[data-cosmetic-kind="BOARD"] .cosmetic-board-preview { aspect-ratio:10 / 3; } }
@media (max-height:600px) and (orientation:landscape) and (min-width:761px) { .cosmetic-grid.is-empty { min-height:180px; } }

/* Isolated desktop gameplay-scale prototype: use the reclaimed board width for the live cluster. */
@media (min-width:1181px) and (min-height:601px) {
  body.match-mode {
    --desktop-field-card-width:clamp(132px,6.25vw,240px);
    --desktop-field-card-height:min(calc(var(--desktop-field-card-width) * 1.4), calc(18.5dvh - 55px));
    --desktop-field-track-width:calc(var(--desktop-field-card-height) * 5 / 7);
    --desktop-hand-card-width:clamp(104px,3.65vw,140px);
    --desktop-hand-rail-width:clamp(1000px,42.2vw,1620px);
    --desktop-hand-row-height:clamp(142px,5.6vw,240px);
    --desktop-field-row-gap:clamp(8px,.45vw,12px);
    --desktop-field-column-gap:clamp(18px,1vw,30px);
    --desktop-pile-rail-width:clamp(118px,4.6vw,176px);
    --desktop-pile-visual-width:clamp(96px,4.06vw,156px);
    --desktop-phase-bar-height:clamp(34px,1.05vw,40px);
  }

  body.match-mode .battlefield-surface {
    --field-seam:var(--desktop-phase-bar-height);
    --player-outer-reserve:clamp(98px,4.95vw,190px);
  }

  /* Give the own hand its own board band. The field rows then size from their real lane height
     instead of spilling into the hand or relying on an absolute overlay. */
  body.match-mode .player-board {
    gap:var(--desktop-field-row-gap);
  }
  body.match-mode .own-board {
    padding-bottom:0;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) var(--desktop-hand-row-height);
  }
  body.match-mode .own-hand {
    position:relative;
    grid-column:1;
    grid-row:3;
    left:auto;
    bottom:auto;
    transform:none;
    width:min(82%,var(--desktop-hand-rail-width));
    height:var(--desktop-hand-row-height);
    min-height:0;
    align-self:stretch;
    justify-self:center;
  }

  /* Two equal rows retain the canonical 5:7 card footprint while using more of each halfboard. */
  body.match-mode .slots.employee-row,
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    column-gap:var(--desktop-field-column-gap);
    row-gap:clamp(6px,.21vw,8px);
    padding:2px 4px;
  }
  body.match-mode .slots.employee-row {
    grid-template-columns:repeat(5,minmax(0,var(--desktop-field-track-width))) !important;
  }
  body.match-mode .slots.support-row,
  body.match-mode .slots.support {
    grid-template-columns:repeat(4,minmax(0,var(--desktop-field-track-width))) !important;
  }
  body.match-mode .employee-row > .card,
  body.match-mode .support-row > .card,
  body.match-mode .employee-row > .empty-slot,
  body.match-mode .support-row > .empty-slot {
    width:var(--desktop-field-track-width) !important;
    max-width:var(--desktop-field-track-width) !important;
    height:var(--desktop-field-card-height) !important;
    max-height:var(--desktop-field-card-height) !important;
    aspect-ratio:5 / 7 !important;
  }

  /* The hand grows with the field, but keeps its existing centered fan and overlap behavior. */
  body.match-mode .own-hand {
    width:min(82%,var(--desktop-hand-rail-width));
    height:var(--desktop-hand-row-height);
  }
  body.match-mode .own-hand .hand-fan-card {
    width:var(--desktop-hand-card-width);
    min-width:var(--desktop-hand-card-width);
    max-width:var(--desktop-hand-card-width);
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:5 / 7;
    margin-left:clamp(-20px,-.7vw,-14px);
  }
  body.match-mode .own-hand .hand-fan-card:first-child { margin-left:0; }
  body.match-mode .own-hand .hand-fan-card .card-name { font-size:clamp(7px,.42vw,10px); }
  body.match-mode .own-hand .hand-fan-card .card-type-strip { font-size:clamp(4.5px,.26vw,7px); }

  /* Keep the physical pile's layout box as wide as the visible 5:7 stack. */
  body.match-mode .board-resource-row {
    width:var(--desktop-pile-rail-width);
    gap:clamp(7px,.24vw,10px);
  }
  body.match-mode .deck-pile {
    width:var(--desktop-pile-rail-width);
    min-width:var(--desktop-pile-rail-width);
    min-height:calc(var(--desktop-pile-visual-width) * 1.4);
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    place-items:center;
    overflow:visible;
  }
  body.match-mode .deck-stack-visual {
    width:var(--desktop-pile-visual-width);
    height:auto;
    aspect-ratio:5 / 7;
  }
  body.match-mode .deck-stack-visual > i,
  body.match-mode .deck-stack-visual > span {
    width:calc(var(--desktop-pile-visual-width) - 16px);
    height:auto;
    aspect-ratio:5 / 7;
  }
  body.match-mode .deck-stack-visual > i:first-child { left:0; top:clamp(8px,.31vw,12px); }
  body.match-mode .deck-stack-visual > i:nth-child(2) { left:clamp(4px,.16vw,6px); top:clamp(4px,.16vw,6px); }
  body.match-mode .deck-stack-visual > span { left:clamp(8px,.31vw,12px); top:0; }
  body.match-mode .deck-summary-copy strong,
  body.match-mode .archive-summary-copy strong { font-size:clamp(14px,.55vw,21px); }

  /* Scale the gameplay hierarchy together without enlarging secondary/debug chrome. */
  body.match-mode .turn-banner {
    min-height:clamp(32px,1.05vw,40px);
    padding:clamp(5px,.25vw,9px) clamp(9px,.45vw,16px);
  }
  body.match-mode .turn-label { font-size:clamp(9px,.31vw,12px); }
  body.match-mode .turn-detail { font-size:clamp(7px,.23vw,9px); }
  body.match-mode .board-phase-divider .phase-track span b { font-size:clamp(7.5px,.23vw,9px); }
  body.match-mode .board-phase-divider .phase-track { padding-block:clamp(3px,.16vw,6px); }

  body.match-mode .player-head {
    width:clamp(640px,19.8vw,800px);
    min-height:clamp(54px,1.65vw,64px);
    padding:clamp(6px,.28vw,10px) clamp(8px,.42vw,12px);
    gap:clamp(7px,.35vw,12px);
  }
  body.match-mode .player-identity { gap:clamp(7px,.35vw,12px); }
  body.match-mode .player-identity > div > strong { font-size:clamp(10px,.36vw,14px); }
  body.match-mode .player-identity > div > small { font-size:clamp(7px,.24vw,9px); }
  body.match-mode .player-vitals { gap:clamp(2px,.12vw,4px); }
  body.match-mode .player-vitals .vital {
    min-width:clamp(44px,1.35vw,54px);
    padding:clamp(3px,.16vw,6px) clamp(4px,.21vw,8px);
  }
  body.match-mode .player-vitals .vital small { font-size:clamp(5px,.18vw,7px); }
  body.match-mode .player-vitals .vital b { font-size:clamp(8px,.29vw,11px); }

  body.match-mode .command-dock {
    width:clamp(360px,10vw,460px);
    min-height:clamp(48px,1.5vw,58px);
    padding:clamp(7px,.36vw,11px) clamp(9px,.47vw,18px);
  }
  body.match-mode .command-dock .command-hint > strong { font-size:clamp(8px,.26vw,10px); }
  body.match-mode .command-dock .phase-button,
  body.match-mode .command-dock button {
    min-height:clamp(36px,1.2vw,46px);
    padding-inline:clamp(9px,.42vw,16px);
    font-size:clamp(8px,.29vw,11px);
  }

  .desktop-match-utility > summary {
    min-height:clamp(34px,.95vw,40px);
    padding:clamp(5px,.26vw,8px) clamp(7px,.36vw,12px);
    gap:clamp(5px,.26vw,8px);
    font-size:clamp(9px,.29vw,11px);
  }
  .desktop-match-utility > summary b { font-size:clamp(7px,.23vw,9px); }
}

/* Accepted desktop perspective prototype. Mobile remains flat through the desktop media gate below. */
.battlefield-world,
.player-world { display:contents; }

/* The grouping wrapper is layout-transparent, but selectors with a direct-child boundary still need
   to keep the existing hidden zone headings out of the board grid. */
.player-board > .player-world > .zone-title { display:none !important; }

@media (min-width:1181px) and (min-height:601px) {
  body.match-mode .game-shell.perspective-prototype .battlefield-surface {
    grid-template-columns:minmax(0,1fr);
  }
  body.match-mode .game-shell.perspective-prototype .battlefield-world {
    position:relative;
    z-index:1;
    grid-row:1 / -1;
    grid-column:1;
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) var(--field-seam) minmax(0,1fr);
    gap:0;
    overflow:visible;
    transform:none;
  }
  body.match-mode .game-shell.perspective-prototype .battlefield-world > .player-board {
    display:block;
    padding:0;
  }
  body.match-mode .game-shell.perspective-prototype .player-board > .player-world {
    position:absolute;
    z-index:1;
    inset:0;
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) minmax(0,1fr);
    gap:var(--desktop-field-row-gap);
    padding:98px 104px 0;
    overflow:visible;
    transform:perspective(2200px) rotateX(3.25deg) scaleY(.972);
    transform-origin:50% 50%;
    transform-style:preserve-3d;
  }
  body.match-mode .game-shell.perspective-prototype .own-board > .player-world {
    padding:0 104px;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) var(--desktop-hand-row-height);
  }
  body.match-mode .game-shell.perspective-prototype .board-phase-divider,
  body.match-mode .game-shell.perspective-prototype .decision-center {
    grid-column:1;
  }
  body.match-mode .game-shell.perspective-prototype .battlefield-world > .opponent-board { grid-row:1; grid-column:1; }
  body.match-mode .game-shell.perspective-prototype .battlefield-world > .own-board { grid-row:3; grid-column:1; }
}
/* v7.70 collection-to-match bot foundation */
.bot-nav-button { border-left-color: rgba(176,132,52,.7); }
.bot-nav-button:hover, .bot-nav-button:focus-visible { border-color: rgba(211,164,72,.9); background: rgba(211,164,72,.09); }
.bot-match-controls { display:grid; grid-template-columns:minmax(150px,1fr) minmax(180px,1.2fr) auto auto; gap:8px; align-items:end; margin-top:10px; padding-top:10px; border-top:1px solid #dfe7ee; }
.bot-match-controls > div { display:grid; gap:2px; min-width:0; }
.bot-match-controls > div span { color:#52779e; font-size:8px; font-weight:950; letter-spacing:.12em; }
.bot-match-controls > div small { color:#74706a; font-size:10px; }
.bot-match-controls button { min-height:38px; white-space:nowrap; }
.tutorial-guide { position: relative; z-index: 8; width: min(420px, calc(100% - 32px)); margin: 10px auto 0; padding: 12px 16px; border: 1px solid rgba(199,151,67,.65); border-radius: 6px; background: rgba(24,29,26,.94); color: #f5ead1; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.tutorial-guide span { display:block; color:#d7ae5a; font-size:.65rem; letter-spacing:.12em; }
.tutorial-guide strong { display:block; margin-top:3px; font-size:1rem; }
.tutorial-guide p { margin:5px 0 0; color:#e8dcc5; font-size:.82rem; }
/* Tutorial guidance is screen-space help. It must not consume the desktop arena grid row. */
@media (min-width:761px) {
  .tutorial-guide {
    position:absolute;
    z-index:8;
    top:58px;
    right:16px;
    width:min(360px,30vw);
    margin:0;
    pointer-events:none;
  }
}
.bot-result-notice { display:flex; flex-direction:column; gap:4px; margin-top:12px; padding:10px 14px; border-left:3px solid #c69743; background:rgba(199,151,67,.09); }
.bot-result-notice span { color:#c69743; font-size:.67rem; letter-spacing:.12em; }
.bot-result-notice strong { color:#f1e5c9; }
@media (max-width:620px) {
  .bot-match-controls { grid-template-columns:1fr; align-items:stretch; }
  .bot-match-controls button { width:100%; }
}

/* Board-target choices stay in a compact screen-space dock; the battlefield remains unobstructed and in-flow size is unchanged. */
.board-interaction-panel {
  position:fixed;
  z-index:365;
  right:clamp(16px,2vw,36px);
  bottom:clamp(16px,2vh,28px);
  width:min(360px,calc(100vw - 32px));
  pointer-events:none;
}
.board-interaction-panel .interaction-panel {
  pointer-events:auto;
  max-height:min(42vh,360px);
  overflow:auto;
  padding:10px;
  border:1px solid rgba(142,213,255,.38);
  border-radius:6px;
  background:rgba(11,23,41,.96);
  color:#dae2fd;
  box-shadow:0 18px 52px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.05);
}
.board-interaction-panel .interaction-panel strong { font-size:12px; }
.board-interaction-panel .interaction-panel small,
.board-interaction-panel .interaction-panel .muted { color:#a7b4c2; }
.board-interaction-panel .interaction-role-legend span { background:rgba(255,255,255,.06); }
.board-interaction-panel .interaction-role-legend .role-source { border-color:rgba(142,213,255,.42); color:#8ed5ff; }
.board-interaction-panel .interaction-role-legend .role-target { border-color:rgba(217,166,79,.48); color:#e4be72; }
.board-interaction-panel .interaction-role-legend .role-selected.ready { border-color:rgba(93,211,126,.58); color:#8ce9a7; }
.board-interaction-panel .interaction-options { gap:5px; }
.board-interaction-panel .interaction-options button { min-height:30px; padding:5px 8px; font-size:9px; }
.board-interaction-panel .selected-targets span { background:rgba(83,151,110,.24); color:#d9f0df; }
.board-interaction-panel .mandatory-interaction { border-color:rgba(208,167,81,.52); }

@media (max-width:760px) {
  .board-interaction-panel {
    top:calc(58px + env(safe-area-inset-top));
    right:7px;
    bottom:auto;
    left:7px;
    width:auto;
  }
  .board-interaction-panel .interaction-panel {
    max-height:126px;
    padding:7px;
    gap:5px;
    border-radius:5px;
  }
  .board-interaction-panel .interaction-panel strong { font-size:10px; }
  .board-interaction-panel .interaction-options button { min-height:28px; font-size:8px; }
}

/* Turn ownership is a restrained divider-level cue; the rest of the match UI stays flat. */
body.match-mode .board-phase-divider .turn-owner-cue {
  position:absolute;
  left:clamp(8px,1.25vw,22px);
  top:50%;
  z-index:2;
  max-width:clamp(48px,6vw,108px);
  transform:translateY(-50%);
  color:#82e8a0;
  font-size:clamp(5px,.34vw,8px);
  font-weight:950;
  letter-spacing:.12em;
  line-height:1.1;
  text-align:left;
  text-shadow:0 0 9px rgba(74,225,118,.34);
  white-space:nowrap;
}
body.match-mode .board-phase-divider.turn-owner-opponent .turn-owner-cue {
  color:#f0a5a1;
  text-shadow:0 0 9px rgba(214,103,96,.30);
}
body.match-mode .board-phase-divider.turn-owner-opponent .phase-track span.active {
  color:#f1aaa5;
  background:linear-gradient(180deg,rgba(214,103,96,.04),rgba(214,103,96,.14));
  box-shadow:inset 0 -2px #d66760,0 0 18px rgba(214,103,96,.11);
}
body.match-mode .board-phase-divider.turn-owner-opponent .phase-track span.active::after {
  background:#d66760;
  box-shadow:0 0 9px rgba(214,103,96,.58);
}
@media (max-width:760px) {
  body.match-mode .board-phase-divider .turn-owner-cue { display:none; }
}

/* The shared avatar-composition root owns frame bounds; no category-specific inset is needed. */

/* Executive Edition adapts the reference's position-driven shine/glare stack to the existing art layer. */
.card.executive-edition,
.catalog-card-face.executive-edition,
.hover-card-face.executive-edition {
  --gold-light:#f5dc91;
  --gold-mid:#b8791f;
  --gold-deep:#5a3009;
  --exec-foil-opacity:.62;
  --mx:50%;
  --my:50%;
  --pos:50% 50%;
  --posx:50%;
  --posy:50%;
  --hyp:0;
  --exec-foil-background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(112deg,#e85a78 0 4%,#f2d05c 4% 9%,#62d7a9 9% 14%,#62c3eb 14% 19%,#aa78e4 19% 24%,#e85a78 24% 29%),
    repeating-linear-gradient(104deg,rgba(67,31,8,.38) 0 8%,rgba(255,224,138,.36) 9% 12%,rgba(255,255,255,.16) 12.5% 14%,rgba(40,18,4,.26) 14.5% 22%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.55) 0%,rgba(255,220,141,.20) 24%,rgba(18,8,0,.22) 88%),
    linear-gradient(105deg,transparent 9%,rgba(255,255,255,.42) 18%,transparent 27%,transparent 68%,rgba(255,239,180,.24) 80%,transparent 89%);
  --exec-card-background:linear-gradient(122deg,rgba(255,233,158,.34),transparent 18% 62%,rgba(49,24,3,.27)),repeating-linear-gradient(0deg,rgba(255,250,219,.045) 0 1px,transparent 1px 3px),linear-gradient(145deg,#512807 0%,#8a4f0e 14%,#c17f20 28%,#efc35d 43%,#a45f10 58%,#d39a2c 75%,#572b06 100%);
  border-color:#845316;
  background:var(--exec-card-background);
  background-blend-mode:screen,soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(255,246,193,.92),inset 0 0 0 3px rgba(82,43,7,.42),inset 0 7px 14px rgba(255,239,167,.18),0 9px 22px rgba(66,38,7,.28);
}
.card.executive-edition .card-type-strip,
.catalog-card-face.executive-edition .catalog-type-strip { color:#65430f; }
.card.executive-edition .card-name,
.catalog-card-face.executive-edition .catalog-name-row > strong,
.hover-card-face.executive-edition .card-name { color:#2c2110; }
.card.executive-edition .card-rules-mini,
.catalog-card-face.executive-edition .catalog-rules { background:rgba(255,249,222,.84); color:#342710; border-color:rgba(102,67,17,.28); }
.card.executive-edition .card-art-stage,
.catalog-card-face.executive-edition .catalog-art-stage { border-color:rgba(103,66,12,.48); }
.card-finish-badge { justify-self:end; padding:2px 4px; border:1px solid rgba(74,43,7,.58); border-radius:3px; background:linear-gradient(145deg,#ffe9a0,#c38a25 58%,#75460d); color:#3b2709; box-shadow:inset 0 1px rgba(255,246,190,.70),0 1px 3px rgba(66,37,5,.22); font-size:5px; line-height:1; font-style:normal; font-weight:950; letter-spacing:.08em; white-space:nowrap; }
.collection-card .catalog-art-stage .card-finish-badge { position:absolute; left:4px; top:4px; z-index:8; display:inline-flex; align-items:center; max-width:calc(100% - 8px); overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.collection-card .catalog-art-stage .card-finish-badge::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,rgba(255,249,198,.58),transparent 42%,rgba(255,255,255,.24) 55%,transparent 72%); pointer-events:none; }
.catalog-card-face.compact .card-finish-badge { left:3px; top:3px; max-width:calc(100% - 6px); padding:2px 3px; font-size:4.5px; }
.card-art-stage .executive-art-foil,
.catalog-art-stage .executive-art-foil { position:absolute; inset:0; z-index:6; pointer-events:none; opacity:var(--exec-foil-opacity); background:var(--exec-foil-background); background-size:100% 100%,620% 620%,260% 260%,180% 180%,220% 220%; background-position:center,calc(((50% - var(--posx)) * 2.4) + 50%) calc(((50% - var(--posy)) * 1.4) + 50%),var(--posx) var(--posy),var(--posx) var(--posy),calc(((50% - var(--posx)) * -1) + 50%) calc(((50% - var(--posy)) * -1) + 50%); background-blend-mode:soft-light,hue,hard-light,screen,normal; mix-blend-mode:screen; filter:brightness(calc(.76 + (var(--hyp) * .16))) contrast(1.72) saturate(1.28); transition:opacity .16s ease,background-position .16s ease; }
.card-art-stage .executive-art-foil::before,
.catalog-art-stage .executive-art-foil::before,
.hover-card-face.executive-edition .card-art-window::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.18) 18px 20px,transparent 20px 39px),radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.38) 0%,rgba(255,231,164,.10) 32%,transparent 78%); background-size:260% 100%,140% 140%; background-position:calc(((50% - var(--posx)) * 3) + 50%) var(--posy),var(--pos); background-blend-mode:screen,soft-light; mix-blend-mode:screen; opacity:.62; filter:contrast(1.55) saturate(1.32); }
.card-art-stage .executive-art-foil::after,
.catalog-art-stage .executive-art-foil::after,
.hover-card-face.executive-edition .card-art-window::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(farthest-corner ellipse at var(--mx) var(--my),rgba(255,255,255,.46) 0%,rgba(255,244,199,.20) 21%,transparent 58%,rgba(42,17,0,.20) 100%),linear-gradient(105deg,transparent 42%,rgba(255,255,255,.30) 48%,transparent 54%); background-size:135% 135%,180% 180%; background-position:var(--pos),calc(((50% - var(--posx)) * -1.4) + 50%) var(--posy); background-blend-mode:screen,soft-light; mix-blend-mode:screen; opacity:.46; filter:brightness(calc(.92 + (var(--hyp) * .20))) contrast(1.35); }
.hover-card-face.executive-edition .card-art-window { position:relative; overflow:hidden; }
.hover-card-face.executive-edition .card-art-window::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:var(--exec-foil-opacity); background:var(--exec-foil-background); background-size:100% 100%,620% 620%,260% 260%,180% 180%,220% 220%; background-position:center,calc(((50% - var(--posx)) * 2.4) + 50%) calc(((50% - var(--posy)) * 1.4) + 50%),var(--posx) var(--posy),var(--posx) var(--posy),calc(((50% - var(--posx)) * -1) + 50%) calc(((50% - var(--posy)) * -1) + 50%); background-blend-mode:soft-light,hue,hard-light,screen,normal; mix-blend-mode:screen; filter:brightness(calc(.76 + (var(--hyp) * .16))) contrast(1.72) saturate(1.28); transition:opacity .16s ease,background-position .16s ease; }
.hover-card-face.executive-edition > .executive-art-foil { display:none; }
body.match-mode .hover-card-face.executive-edition { border-color:#845316; background:var(--exec-card-background); box-shadow:inset 0 0 0 1px rgba(255,246,193,.92),inset 0 0 0 3px rgba(82,43,7,.42),inset 0 7px 14px rgba(255,239,167,.18),0 9px 22px rgba(66,38,7,.28); }
.card.executive-edition:hover .executive-art-foil,
.card.executive-edition:focus-visible .executive-art-foil,
.catalog-card-face.executive-edition:hover .executive-art-foil,
.hover-card-face.executive-edition:hover .card-art-window::after { opacity:.62; }
.card.executive-edition:hover .executive-art-foil,
.card.executive-edition:focus-visible .executive-art-foil,
.catalog-card-face.executive-edition:hover .executive-art-foil { opacity:.62; }
.card.executive-edition:hover .executive-art-foil::before,
.card.executive-edition:focus-visible .executive-art-foil::before,
.catalog-card-face.executive-edition:hover .executive-art-foil::before,
.hover-card-face.executive-edition:hover .card-art-window::before { opacity:.82; }
.card.executive-edition:hover .executive-art-foil::after,
.card.executive-edition:focus-visible .executive-art-foil::after,
.catalog-card-face.executive-edition:hover .executive-art-foil::after,
.hover-card-face.executive-edition:hover .card-art-window::after { opacity:.70; }
.card-variant-picker { display:flex; gap:3px; margin:0 1px 2px; }
.card-variant-picker button { flex:1 1 0; min-width:0; padding:3px 4px; border:1px solid #c8bca7; border-radius:3px; background:#f7f2e8; color:#6b6256; font-size:6px; font-weight:900; letter-spacing:.05em; }
.card-variant-picker button.selected { border-color:#8d6b2d; background:#e7d2a0; color:#34280f; }
.card-variant-picker button.gold.selected { background:linear-gradient(180deg,#ffeaa0,#c79332); color:#4b3209; }
.card-variant-picker button small { margin-left:2px; font-size:5px; opacity:.75; }
.collection-finish-swap { width:100%; margin:0 1px 2px; padding:3px 4px; border:1px solid #a17a2b; border-radius:3px; background:linear-gradient(180deg,#fff0b3,#d6a642); color:#4b3209; font-size:6px; font-weight:950; letter-spacing:.04em; }
@media (prefers-reduced-motion: reduce) { .card-art-stage .executive-art-foil,.catalog-art-stage .executive-art-foil,.hover-card-face.executive-edition .card-art-window::after { transition:none; } }
@media (hover:none), (pointer:coarse) {
  .card.executive-edition,
  .catalog-card-face.executive-edition,
  .hover-card-face.executive-edition { --exec-foil-opacity:.70; }
}

/* Keep 1K Deckbuilder names clear of finish and cost badges without changing live-card typography. */
@media (min-width:761px) and (max-width:2199px) {
  .collection-card .catalog-name-row > strong { font-size:10.4px; }
  .collection-card .catalog-name-row > strong.long-name { font-size:9.1px; }
}

@media (min-width:761px) {
  .collection-card .catalog-art-stage .card-finish-badge {
    left:0;
    top:0;
    padding:1px 2px;
    border-radius:1px;
    background:linear-gradient(180deg,#f2d786 0%,#b77c20 52%,#70410d 100%);
    box-shadow:inset 0 1px rgba(255,246,190,.58),0 1px 1px rgba(66,37,5,.16);
    font-size:4.2px;
    font-weight:900;
    letter-spacing:.045em;
  }
  .collection-card .catalog-art-stage .card-finish-badge::before {
    background:linear-gradient(108deg,rgba(255,250,210,.44),transparent 38%,rgba(255,255,255,.20) 53%,transparent 69%);
  }
}