/* WB-HOME-11. Table layout layer; existing artwork and card styles are reused. */
:root {
    --table-line: rgba(255,255,255,.11);
    --table-muted: #a3afb8;
    --hand-card-w: 84px;
    --dock-w: clamp(78px, 12dvh, 112px);
    --opp-card-w: 28px;
    --opp-card-h: 39px;
}
html { color-scheme: dark; }
body { background: #05090b; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bg-grid { opacity: .18; }
.scanline, #play-particles, #sticky-buy-play { display: none !important; }

/* A short header keeps secondary settings out of the playing surface. */
header.game-header {
    flex: 0 0 auto; min-height: 62px; padding: 8px max(12px, calc((100vw - 1200px) / 2));
    gap: 12px; background: #080d10; border-bottom: 1px solid var(--table-line);
    box-shadow: none; backdrop-filter: none;
}
.game-header .hdr-logo-img { width: 40px; height: 40px; object-fit: contain; border: 0; border-radius: 0; animation: none; }
.app-wordmark { color: #f5f7f8; font-size: 14px; font-weight: 700; letter-spacing: .09em; }
.app-wordmark span { display: block; margin-top: 3px; color: var(--teal); font-size: 8px; letter-spacing: .2em; }
.game-header .header-controls { flex: 0 0 auto; gap: 6px; flex-wrap: nowrap; }
.game-header .btn-header, .game-header .btn-buy-now {
    min-height: 40px; padding: 8px 12px; border: 1px solid var(--table-line); border-radius: 7px;
    color: #e7edf0; background: transparent; box-shadow: none; font: 700 12px 'Arimo', sans-serif !important;
    text-transform: none; letter-spacing: .01em; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; animation: none;
}
.game-header .btn-buy-now { border-color: rgba(251,146,60,.5); color: #ffc18f; }
.game-header #btn-menu { border-color: rgba(45,212,191,.4); color: var(--teal); }
.game-header .btn-header:hover, .game-header .btn-buy-now:hover { background: #152026; }

/* Every row has a real height. No seat is positioned against the board. */
#screen-game { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
#game-board { width: 100%; max-width: 1200px; margin: 0 auto; flex: 1 0 auto; min-height: 100%; isolation: isolate; }
#ai-layer {
    position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; width: 100%; max-width: 1000px; margin: 0 auto; padding: 12px 14px 10px;
    pointer-events: auto; flex: 0 0 auto; z-index: 1;
}
#ai-layer[data-count="1"] { grid-template-columns: minmax(0, 240px); justify-content: center; }
#ai-layer[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 240px)); justify-content: center; }
.ai-hand, .ai-hand.active, .ai-hand.inactive, .ai-hand.taking-damage {
    position: relative; inset: auto; min-width: 0; max-width: none; width: 100%; padding: 8px 10px 5px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transform: none; opacity: 1; filter: none !important; z-index: auto !important;
    border: 1px solid var(--table-line); border-radius: 9px; background: rgba(15,22,27,.9);
    transition: border-color .2s, background .2s;
}
.ai-hand.active { border-color: var(--teal); background: #0d2525; }
.ai-hand.taking-damage { border-color: var(--red); background: #2d1216; }
.ai-seat-head { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; gap: 4px; }
.ai-hand .ai-name, .ai-hand.active .ai-name, .ai-hand .ai-name.trouble, .ai-hand.taking-damage .ai-name {
    padding: 0; margin: 0; max-width: 100%; background: transparent !important; border: 0;
    color: #c5cfd5; font: 700 11px 'Arimo', sans-serif; letter-spacing: .05em;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: none !important; animation: none;
}
.ai-hand.active .ai-name { color: var(--teal); }
.ai-hand .ai-name.trouble { color: #ff959c; }
.ai-count { font: 700 13px 'Arimo', sans-serif; color: #fff; }
.ai-cards-container {
    position: relative; display: block; flex: 0 0 auto; margin: 0; transform: none;
    width: min(100%, calc(var(--opp-card-w) + (var(--cards) - 1) * 10px));
    height: var(--opp-card-h); max-height: none; overflow: hidden; border-radius: 3px;
}
.ai-card-mini { position: absolute; top: 0; left: calc(var(--card-index) * (100% - var(--opp-card-w)) / var(--steps)); width: var(--opp-card-w); height: var(--opp-card-h); }
.ai-card-mini .card { width: 100%; height: 100%; margin: 0; transform: none !important; border-radius: 3px; box-shadow: none; pointer-events: none; }
.ai-card-mini .card-art { border-radius: 3px; }
.ai-card-mini .cf-center, .ai-card-mini .cf-hero { font-size: 16px; }
.ai-card-mini .cf-pip, .ai-card-mini .cf-suit, .ai-card-mini .cf-sub, .ai-card-mini .plus-one-badge { display: none; }
.ai-hand.taking-damage .ai-cards-container { outline: none; box-shadow: none; }
.seat-turn-tag { display: block; min-height: 11px; color: #93a4ae; font-size: 9px; line-height: 11px; }
.ai-hand.active .seat-turn-tag { color: var(--teal); }
.ai-hand.taking-damage .seat-turn-tag, .ai-hand:has(.ai-name.trouble) .seat-turn-tag { color: #ff959c; }

.table-status { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 0 16px; padding: 6px 0 10px; border-bottom: 1px solid var(--table-line); }
.table-status > div:first-child { display: grid; grid-template-columns: 7px 1fr; gap: 3px 8px; align-items: center; min-width: 0; }
.turn-dot { width: 6px; height: 6px; border-radius: 50%; background: #82949e; }
[data-your-turn="true"] .turn-dot { background: var(--teal); box-shadow: 0 0 8px rgba(45,212,191,.35); }
#table-turn { color: #f1f5f7; font-size: 13px; }
#table-detail { grid-column: 2; font-size: 11px; color: var(--table-muted); }
.table-mode { flex: 0 0 auto; border: 1px solid var(--table-line); padding: 5px 8px; border-radius: 5px; font-size: 10px; color: #bbc7ce; }
.table-status .damage-banner { flex: 0 0 auto; width: auto; padding: 5px 7px; margin: 0 0 0 auto; font-size: 11px; animation: none; box-shadow: none; }

.arena { flex: 1 0 auto; justify-content: center; gap: 12px; max-width: 100%; width: 100%; margin: 0; padding: 28px 22px 20px; z-index: 1; }
.docks-container, body.redshift-board .docks-container { display: grid; grid-template-columns: repeat(3, var(--dock-w)); justify-content: center; gap: 24px 30px; width: 100%; max-width: none; margin: 0; }
.dock, body.redshift-board .dock { width: var(--dock-w); height: calc(var(--dock-w) * 1.43); padding: 5px; border-radius: 8px; }
.dock-label, body.redshift-board .dock-label { top: 6px; font-size: 9px; letter-spacing: .12em; }
.dock-cards { margin-top: 12px; }
.dock-card-wrapper .card { width: calc(var(--dock-w) - 10px); height: calc((var(--dock-w) - 10px) * 1.43); }
.dock .card:hover { transform: none; }
.dock-value { top: -10px; right: -10px; width: 28px; height: 28px; font-size: 16px; }
.dock-open-tag { bottom: -12px; font-size: 6px; padding: 1px 3px; }
.dock.empty::after { display: none; }
.dock.empty .dock-cards > div { font-size: 10px !important; opacity: .85 !important; padding: 3px 5px; border-radius: 3px; background: rgba(0,0,0,.6); }
.firewall-banner { position: static; width: 100%; margin: 0 0 4px; padding: 8px; }
.firewall-text { font-size: 12px; line-height: 1.4; letter-spacing: .03em; }
#play-feedback:empty { display: none; }
#play-feedback { max-width: 500px !important; font-size: 12px !important; line-height: 1.4; }
body.redshift-board { --dock-w: clamp(58px, 9dvh, 90px); }

.controls-bar {
    position: relative; inset: auto; transform: none; flex: 0 0 auto; display: grid;
    grid-template-columns: 66px 58px 48px minmax(110px, 1fr); gap: 8px;
    width: calc(100% - 28px); max-width: 530px; margin: 0 auto 12px; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}
.controls-bar .deck-btn, .controls-bar .end-turn-btn { width: 100%; height: 52px; min-height: 52px; padding: 6px !important; border-radius: 8px; min-width: 0 !important; }
.controls-bar .deck-btn { background: #101a20; border: 1px solid #30424d; }
.controls-bar .deck-count { font-size: 16px; line-height: 17px; }
.controls-bar .deck-label { font-size: 10px; margin-top: 2px; }
.controls-bar #btn-toggle-helper svg { width: 20px; height: 20px; }
.controls-bar #btn-undo { border-color: var(--table-line); color: #c3cdd3; background: #0f171c; }
.controls-bar #btn-end-turn { background: var(--teal); color: #041512; border: 1px solid var(--teal); letter-spacing: .03em; font-size: 12px; }
.controls-bar #btn-end-turn:disabled { color: #7d8b94 !important; background: #11191f !important; border-color: var(--table-line) !important; }
.controls-bar .deck-btn.disabled { opacity: .5; }

#player-hand-container {
    position: relative; flex: 0 0 auto; display: block; width: 100%; min-height: 180px; height: auto;
    padding: 0 0 6px; border-top: 1px solid rgba(45,212,191,.25); background: #080e12;
    box-shadow: none; backdrop-filter: none;
}
.hand-label { top: 12px; left: 16px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #c8d3d9; opacity: 1; text-shadow: none; gap: 7px; }
.hand-label span { color: var(--teal); }
.hand-tip { position: absolute; top: 12px; right: 16px; color: var(--table-muted); font-size: 10px; }
.hand-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #30464f transparent; }
.hand-cards { width: max-content; min-width: 100%; max-width: none; justify-content: center; align-items: flex-end; padding: 48px 12px 14px; margin: 0; }
.hand-card-wrapper { flex: 0 0 auto; }
#player-hand .card { width: var(--hand-card-w); height: calc(var(--hand-card-w) * 1.43); }
#player-hand .card.selected { transform: translateY(-16px); box-shadow: 0 0 0 2px var(--teal), 0 8px 20px #000; }
.hand-card-wrapper:hover { transform: none; }
#player-hand .card:hover { transform: translateY(-7px); }
#player-hand .card.selected:hover { transform: translateY(-16px); }
.lock-overlay { inset: 34px 0 auto; height: 0; display: flex; align-items: flex-start; background: none; backdrop-filter: none; pointer-events: none; overflow: visible; }
.lock-text { padding: 0; border: 0; background: none; font-size: 10px; line-height: 13px; font-weight: 400; letter-spacing: .02em; color: #9daeb8; text-shadow: none; animation: none; }
.helper-banner { position: relative; inset: auto; transform: none; flex: 0 0 auto; width: calc(100% - 28px); max-width: 650px; margin: 10px auto; box-shadow: none; }

/* A compact menu with explicit settings and no competing PLAY / RETURN actions. */
#screen-lobby { align-items: center !important; background: rgba(1,5,8,.88) !important; }
#overlay-rules { z-index: 3300000 !important; }
#overlay-quickref { z-index: 3400000 !important; }
#screen-lobby > .table-menu { width: 100%; max-width: 550px; max-height: calc(100dvh - 32px); padding: 26px; text-align: left; border: 1px solid #30434d; border-radius: 16px; background: #0c141a; box-shadow: 0 25px 90px #000; }
.menu-eyebrow { margin: 0 44px 10px 0; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.table-menu h1 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.03em; }
.menu-intro { margin: 10px 0 20px; color: #acbbc4; font-size: 13px; line-height: 1.5; }
.menu-resume, .menu-start { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 12px 16px; border: 0; border-radius: 8px; background: var(--teal); color: #041916; font-size: 14px; font-weight: 700; }
.menu-resume { margin-bottom: 24px; }
.menu-section { margin: 0 0 20px; }
.menu-section h2 { margin: 0 0 12px; color: #e7edf0; font-size: 14px; font-weight: 700; }
.mode-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#screen-lobby .mode-pick { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 74px; padding: 12px 9px; border: 1px solid #30414c; border-radius: 7px; background: #101d25; color: #e5edf1; font: 700 12px 'Arimo', sans-serif; letter-spacing: 0; text-transform: none; box-shadow: none; }
#screen-lobby .mode-pick span { font-size: 10px; line-height: 1.3; color: #a3b4bf; font-weight: 400; }
#screen-lobby .mode-pick.active { border-color: var(--teal); background: #102d2d; color: var(--teal); }
#screen-lobby .mode-red.active { border-color: #ff828b; color: #ff9da4; background: #29161d; }
.mode-hint { min-height: 16px; margin: 9px 0; color: #a7b8c3; font-size: 11px; line-height: 1.4; }
#screen-lobby .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 10px 0 !important; border: 0; border-bottom: 1px solid var(--table-line); border-radius: 0; background: transparent; font-size: 13px; }
#screen-lobby .setting-row span { font-family: 'Arimo', sans-serif !important; }
.setting-row small { display: block; margin-top: 3px; font-size: 10px; color: #91a4b1; }
.setting-stepper { display: flex; align-items: center; gap: 5px; }
.setting-stepper #lbl-opponents { min-width: 40px; text-align: center; font-size: 12px; font-weight: 700; color: #d7e5ec; }
.setting-stepper .btn-icon, .setting-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 6px 10px; border: 1px solid #344954; border-radius: 6px; background: #13212a; color: #d3dee5; font-size: 13px; font-weight: 700; }
.setting-toggle[aria-pressed="true"] { color: var(--teal); border-color: #34766f; background: #102c2b; }
.menu-start { margin-top: 14px; background: #e6eef2; color: #0d1c24; }
.menu-note { margin: 8px 0 0; color: #8fa2af; font-size: 10px; text-align: center; }
.menu-links { display: flex; justify-content: space-between; gap: 8px; padding: 0 0 16px; }
.menu-links button { min-height: 40px; padding: 5px 0; border: 0; background: none; color: #d0dce4; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.menu-shop { display: flex; justify-content: space-between; align-items: center; padding: 15px 0 0; border-top: 1px solid var(--table-line); color: #ffc08e; font-size: 13px; font-weight: 700; text-decoration: none; }
.menu-shop small { display: block; margin-top: 5px; color: #a7b7c2; font-size: 11px; font-weight: 400; }

@media (min-width: 900px) {
    #ai-layer[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #ai-layer[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #screen-lobby::before { display: none; }
}
@media (max-width: 768px) {
    :root { --hand-card-w: clamp(60px, 15vw, 84px); --dock-w: clamp(74px, 12dvh, 100px); --opp-card-w: 23px; --opp-card-h: 31px; }
    header.game-header { min-height: 56px; padding: 6px 10px; gap: 8px; }
    .game-header .hdr-logo-img { width: 36px; height: 36px; }
    .app-wordmark { font-size: 11px; }
    .app-wordmark span { font-size: 7px; }
    .game-header .btn-header, .game-header .btn-buy-now { min-height: 40px; padding: 7px 10px; font-size: 11px !important; }
    .game-header #btn-toggle-rules span { display: none; }
    #ai-layer { padding: 10px 12px 8px; gap: 6px; }
    .ai-hand { padding: 6px 7px 4px; gap: 4px; border-radius: 7px; }
    .ai-hand .ai-name { font-size: 9px; }
    .ai-count { font-size: 12px; }
    .seat-turn-tag { font-size: 8px; min-height: 10px; line-height: 10px; }
    .table-status { margin: 0 12px; min-height: 46px; padding-bottom: 8px; }
    #table-turn { font-size: 12px; }
    #table-detail { font-size: 10px; }
    .table-mode { font-size: 9px; padding: 4px 6px; }
    .arena { padding: 24px 16px 18px; gap: 10px; }
    .docks-container, body.redshift-board .docks-container { gap: 22px 22px; }
    body.redshift-board { --dock-w: clamp(55px, 8.8dvh, 78px); }
    .dock-label, body.redshift-board .dock-label { font-size: 8px; letter-spacing: .08em; top: 5px; }
    .dock-value { width: 25px; height: 25px; font-size: 14px; }
    .controls-bar { grid-template-columns: 62px 54px 44px minmax(100px, 1fr); gap: 7px; width: calc(100% - 24px); margin-bottom: 10px; }
    .controls-bar .deck-btn, .controls-bar .end-turn-btn { height: 50px; min-height: 50px; }
    #player-hand-container { min-height: 144px; padding-bottom: 4px; }
    .hand-label, .hand-tip { top: 10px; }
    .hand-tip { font-size: 9px; }
    .hand-cards { padding-top: 43px; padding-bottom: 12px; }
    .lock-overlay { top: 28px; }
    .firewall-text { font-size: 10px; }
    #screen-lobby > .table-menu { padding: 22px 18px; }
}
@media (max-width: 360px) {
    .app-wordmark { display: none; }
    .game-header .btn-header, .game-header .btn-buy-now { padding: 7px 9px; }
    .controls-bar { gap: 5px; grid-template-columns: 54px 48px 40px minmax(94px, 1fr); }
    .table-mode { display: none; }
    #screen-lobby > .table-menu { padding: 20px 14px; }
    #screen-lobby .mode-pick { font-size: 11px; padding: 10px 7px; }
}
@media (max-height: 560px) and (min-width: 600px) {
    :root { --opp-card-h: 26px; --opp-card-w: 19px; }
    #ai-layer { padding-top: 8px; }
    #ai-layer[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #ai-layer[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .arena { padding-top: 24px; padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .game-header *, .ai-hand, .card, .dock, .damage-banner, .firewall-text { animation: none !important; transition: none !important; }
}

/* Fullscreen shell and table composition. */
html, body { height: var(--wb-height, 100dvh); }
html { background: #06080a; }
html:fullscreen { width: 100%; height: 100%; }
html:-webkit-full-screen { width: 100%; height: 100%; }
html::backdrop { background: #06080a; }
body { background: radial-gradient(ellipse at 10% 0%,rgba(45,212,191,.07),transparent 50%),radial-gradient(ellipse at 95% 40%,rgba(192,132,252,.05),transparent 45%),#06080a; }
.bg-grid { opacity: .12; }
header.game-header { min-height: 56px; padding: 7px max(14px,calc((100vw - 1240px)/2)); background: rgba(6,10,13,.96); }
.game-header .hdr-logo-link { gap: 9px; }
.game-header .header-controls { gap: 6px; }
.game-header .btn-header { min-height: 40px; padding: 8px 11px; color: #b8cbd7; }
.game-header #btn-fullscreen { color: var(--teal); border-color: rgba(45,212,191,.38); }
.game-header #btn-fullscreen[aria-pressed="true"] { background: rgba(45,212,191,.12); }
.game-header #btn-menu { color: #edf4f8; }
#game-board { max-width: 1240px; padding: 0 14px 10px; }
#ai-layer { padding: 12px 0; }
.ai-hand, .ai-hand.inactive { background: rgba(15,23,29,.8); }
.ai-hand.active { background: linear-gradient(135deg,rgba(45,212,191,.16),rgba(45,212,191,.04)); border-color: rgba(45,212,191,.7); }
.table-status { margin: 0; padding: 9px 12px; border: 1px solid var(--table-line); border-radius: 10px 10px 0 0; background: rgba(12,22,28,.8); }
.table-mode { border-color: rgba(192,132,252,.28); color: #d6b5fa; }
.arena { margin: 0 0 10px; padding: 30px 20px 24px; border: 1px solid var(--table-line); border-top: 0; border-radius: 0 0 12px 12px; background: radial-gradient(ellipse at 50% 30%,rgba(45,212,191,.035),transparent 70%),rgba(5,10,14,.5); }
#player-hand-container { min-height: 171px; border: 1px solid rgba(45,212,191,.2); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 0; background: rgba(11,18,24,.94); }
.hand-label { left: 14px; }
.hand-label span { padding: 2px 5px; border-radius: 3px; background: rgba(45,212,191,.09); }
.hand-cards { padding-top: 42px; padding-bottom: 12px; }
.controls-bar { grid-template-columns: 76px 60px 48px minmax(100px,1fr); width: 100%; max-width: none; margin: 0; padding: 8px 10px 10px; border: 1px solid rgba(45,212,191,.2); border-top: 0; border-radius: 0 0 12px 12px; background: rgba(11,18,24,.94); }
.controls-bar .deck-btn { background: #13212a; border-color: #2a424e; }
.controls-bar #btn-end-turn { letter-spacing: .04em; }
.helper-banner { width: 100%; max-width: none; margin: 0 0 10px; padding: 10px 12px; background: #21190f; border-color: rgba(251,146,60,.5); }
.display-toast { position: fixed; left: 50%; bottom: max(16px,env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3700000; width: max-content; max-width: min(420px,calc(100vw - 28px)); padding: 12px 16px; border: 1px solid #38656b; border-radius: 10px; background: rgba(12,30,36,.98); color: #e1f0f4; box-shadow: 0 12px 30px #000; font-size: 12px; line-height: 1.45; pointer-events: none; }

/* The settings scroll while the primary game action stays visible. */
#screen-lobby > .table-menu { display: flex; flex-direction: column; max-width: 760px; max-height: calc(var(--wb-height,100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 24px; overflow: hidden; background: radial-gradient(ellipse at 100% 0%,rgba(192,132,252,.08),transparent 55%),#0b141b; }
.menu-heading { display: flex; align-items: center; flex: 0 0 auto; gap: 14px; margin: 0 42px 16px 0; }
.menu-logo { width: 64px; height: 64px; object-fit: contain; }
.menu-heading .menu-eyebrow { margin: 0 0 7px; font: 700 9px var(--mono); letter-spacing: .16em; }
.menu-heading .menu-intro { margin: 8px 0 0; color: #9eb2c0; font-size: 12px; line-height: 1.4; }
.menu-resume { flex: 0 0 auto; margin-bottom: 18px; border: 1px solid rgba(45,212,191,.5); color: var(--teal); background: rgba(45,212,191,.09); }
.menu-body { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 20px; padding-right: 3px; }
.menu-body .menu-section { min-width: 0; margin: 0; }
.menu-section h2 { display: flex; align-items: center; gap: 8px; }
.section-num { color: var(--purple); font: 700 9px var(--mono); }
.mode-picker { display: flex; flex-direction: column; gap: 6px; }
#screen-lobby .mode-pick { flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-height: 43px; padding: 10px 12px; gap: 8px; }
#screen-lobby .mode-pick span { text-align: right; font-size: 9px; }
.mode-hint { font-size: 10px; }
.fullscreen-menu { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(45,212,191,.5); border-radius: 7px; color: var(--teal); background: rgba(45,212,191,.07); font: 700 12px 'Arimo',sans-serif; }
.fullscreen-menu > span:last-child { font-size: 22px; }
.orientation-heading { margin: 16px 0 8px; color: #bad0de; font-size: 11px; }
.orientation-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.orientation-picker button { min-width: 0; min-height: 39px; padding: 7px 3px; border: 1px solid #2d4554; border-radius: 6px; color: #a9c0cf; background: #10212c; font-size: 10px; }
.orientation-picker button[aria-pressed="true"] { border-color: var(--purple); color: #dec6f9; background: rgba(192,132,252,.1); }
.display-feedback { margin: 9px 0; min-height: 42px; color: #8eaabf; font-size: 10px; line-height: 1.45; }
.menu-links { grid-column: 1/-1; padding: 0; margin-top: -4px; }
.menu-links button { font-size: 11px; }
.menu-footer { flex: 0 0 auto; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--table-line); }
.menu-start { min-height: 48px; margin-top: 0; color: #051c18; background: var(--teal); }
.menu-note { margin: 7px 0 0; font-size: 9px; }
.menu-shop { justify-content: center; gap: 10px; min-height: 32px; margin: 5px 0 -6px; padding: 0; border: 0; color: var(--orange); font-size: 11px; font-weight: 400; }

@media (max-width: 768px) {
    header.game-header { min-height: 54px; padding: 6px 10px; }
    .game-header .hdr-logo-img { width: 34px; height: 34px; }
    .game-header .app-wordmark { font-size: 11px; }
    .game-header .app-wordmark span { font-size: 6px; }
    .game-header .header-controls { gap: 4px; }
    .game-header .btn-header { width: 38px; min-height: 38px; padding: 7px; }
    .game-header .btn-header > span { display: none; }
    #game-board { padding: 0 10px 8px; }
    #ai-layer { padding: 10px 0; gap: 6px; }
    .table-status { margin: 0; padding: 8px 10px; min-height: 46px; }
    #table-detail { font-size: 9px; }
    .arena { margin-bottom: 8px; padding: 28px 14px 22px; }
    #player-hand-container { min-height: 135px; padding: 0; }
    .hand-label { top: 9px; left: 11px; font-size: 9px; }
    .hand-tip { top: 11px; right: 11px; font-size: 9px; }
    .hand-cards { padding-top: 39px; padding-bottom: 10px; }
    .controls-bar { grid-template-columns: 64px 52px 44px minmax(100px,1fr); gap: 7px; width: 100%; margin: 0; padding: 7px 8px 8px; }
    .controls-bar .deck-btn, .controls-bar .end-turn-btn { height: 49px; min-height: 49px; }
    .lock-overlay { top: 26px; }
    #screen-lobby > .table-menu { padding: 20px; }
}
@media (max-width: 540px) {
    #screen-lobby > .table-menu { max-height: calc(var(--wb-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 18px 16px 14px; border-radius: 13px; }
    .menu-logo { width: 48px; height: 48px; }
    .menu-heading { gap: 10px; margin-right: 38px; margin-bottom: 12px; }
    .table-menu h1 { font-size: 26px; }
    .menu-heading .menu-eyebrow { font-size: 8px; }
    .menu-heading .menu-intro { font-size: 10px; }
    .menu-body { grid-template-columns: minmax(0,1fr); gap: 18px; }
    .mode-picker { flex-direction: row; gap: 5px; }
    #screen-lobby .mode-pick { flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 65px; padding: 10px 7px; font-size: 11px; }
    #screen-lobby .mode-pick span { text-align: left; }
    .display-feedback { min-height: 28px; }
    .menu-resume { min-height: 43px; margin-bottom: 14px; }
    .menu-footer { margin-top: 9px; padding-top: 11px; }
}
@media (max-width: 360px) {
    .controls-bar { grid-template-columns: 54px 46px 39px minmax(90px,1fr); gap: 5px; }
    .menu-logo { display: none; }
}

/* Landscape mobile: table left, thumb actions right, hand along the bottom. */
@media (orientation: landscape) and (max-height: 600px) {
    :root { --hand-card-w: clamp(44px,14dvh,64px); --dock-w: clamp(62px,21dvh,102px); }
    header.game-header { min-height: 42px; padding: 4px 12px; }
    .game-header .hdr-logo-img { width: 30px; height: 30px; }
    .game-header .btn-header { width: 36px; min-height: 34px; padding: 6px; }
    .game-header .app-wordmark { display: inline; font-size: 10px; }
    .game-header .app-wordmark span, .game-header .btn-header > span { display: none; }
    #game-board { display: grid; grid-template-columns: minmax(0,1fr) 148px; grid-template-rows: auto auto minmax(min-content,1fr) auto auto; grid-template-areas: "opponents opponents" "status actions" "arena actions" "help help" "hand hand"; gap: 0 9px; padding: 0 10px 6px; }
    #ai-layer { grid-area: opponents; max-width: 100%; padding: 6px 0; gap: 6px; }
    #ai-layer[data-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #ai-layer[data-count="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
    #ai-layer[data-count="5"] { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .ai-hand { padding: 4px 8px 3px; gap: 2px; }
    .ai-cards-container { display: none; }
    .ai-hand .ai-name { font-size: 9px; }
    .ai-count { font-size: 11px; }
    .seat-turn-tag { min-height: 8px; line-height: 8px; font-size: 7px; }
    .table-status { grid-area: status; min-height: 31px; padding: 5px 10px; }
    .table-status > div:first-child { display: flex; gap: 7px; }
    #table-turn { font-size: 11px; white-space: nowrap; }
    #table-detail { font-size: 8px; }
    .table-mode { padding: 3px 5px; font-size: 8px; }
    .arena { grid-area: arena; min-width: 0; margin: 0 0 6px; padding: 18px 14px 12px; gap: 7px; }
    .docks-container, body.redshift-board .docks-container { gap: 17px 30px; }
    .dock-label, body.redshift-board .dock-label { font-size: 7px; }
    .dock-value { top: -8px; right: -8px; width: 22px; height: 22px; font-size: 12px; }
    body.redshift-board { --dock-w: clamp(40px,12dvh,64px); }
    body.redshift-board .dock-cards { margin-top: 8px; }
    body.redshift-board .dock-label { top: 3px; font-size: 6px; }
    body.redshift-board .dock-card-wrapper .card { width: calc(var(--dock-w) - 6px); height: calc((var(--dock-w) - 6px)*1.43); }
    .firewall-banner { margin: 0; }
    .firewall-text { padding: 4px 7px; font-size: 8px; }
    #play-feedback { font-size: 9px !important; }
    .helper-banner { grid-area: help; margin-bottom: 6px; }
    .controls-bar { grid-area: actions; align-self: stretch; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(40px,1fr); gap: 6px; width: 100%; padding: 8px; margin: 0 0 6px; border: 1px solid rgba(45,212,191,.2); border-radius: 10px; }
    .controls-bar .deck-btn, .controls-bar .end-turn-btn { min-height: 40px; height: 100%; }
    .controls-bar #btn-undo, .controls-bar #btn-end-turn { grid-column: 1/-1; }
    .controls-bar #btn-end-turn { font-size: 11px; }
    #player-hand-container { grid-area: hand; min-height: 0; border: 1px solid rgba(45,212,191,.2); border-radius: 9px; }
    .hand-label { top: 7px; left: 12px; font-size: 8px; }
    .hand-tip { top: 9px; right: 12px; font-size: 8px; }
    .hand-cards { padding: 30px 12px 7px; }
    .lock-overlay { top: 20px; }
    .lock-text { font-size: 7px; line-height: 9px; }
    #screen-lobby > .table-menu { max-width: 760px; padding: 16px 18px 12px; }
    .menu-heading { margin-bottom: 8px; }
    .menu-logo { width: 38px; height: 38px; }
    .menu-heading .menu-eyebrow { margin-bottom: 4px; font-size: 7px; }
    .table-menu h1 { font-size: 22px; }
    .menu-heading .menu-intro { display: none; }
    .menu-resume { min-height: 36px; padding: 7px 12px; margin-bottom: 9px; font-size: 12px; }
    .menu-footer { margin-top: 7px; padding-top: 8px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 16px; }
    .menu-start { min-height: 39px; font-size: 12px; }
    .menu-note { grid-column: 1; font-size: 8px; margin: 0; }
    .menu-shop { grid-column: 2; grid-row: 1/3; margin: 0; font-size: 10px; }
    .display-toast { bottom: 10px; max-width: 480px; font-size: 11px; padding: 9px 13px; }
}
@media (orientation: landscape) and (max-height: 400px) {
    #game-board { grid-template-columns: minmax(0,1fr) 134px; }
    #table-detail { display: none; }
    .table-status { min-height: 28px; }
    .arena { padding-top: 15px; padding-bottom: 10px; }
    .docks-container, body.redshift-board .docks-container { row-gap: 14px; }
    .controls-bar { padding: 6px; gap: 5px; }
    .hand-cards { padding-top: 28px; padding-bottom: 5px; }
}

/* Learn and purchase shortcuts stay visible without crowding the table. */
.game-header #btn-learn { color: var(--teal); border-color: rgba(45,212,191,.35); }
.game-header #btn-learn .learn-label-short { display: none; }
.game-header #btn-buy-deck { min-height: 40px; color: #ffc18f; border-color: rgba(251,146,60,.5); }
.menu-quick-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; flex: 0 0 auto; gap: 8px; margin: 0 0 14px; }
.menu-learn, .menu-quick-actions .menu-shop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 10px 14px; margin: 0; border: 1px solid rgba(45,212,191,.4); border-radius: 7px; background: rgba(45,212,191,.06); color: var(--teal); font: 700 12px 'Arimo',sans-serif; text-decoration: none; }
.menu-quick-actions .menu-shop { border-color: rgba(251,146,60,.4); background: transparent; color: #ffc18f; }
.menu-learn:hover, .menu-quick-actions .menu-shop:hover { background: #15252d; }
.menu-footer { display: block; }
@media (max-width: 768px) {
    header.game-header { padding-left: 8px; padding-right: 8px; gap: 6px; }
    .game-header .app-wordmark { display: none; }
    .game-header .btn-header { width: 36px; min-width: 36px; min-height: 38px; }
    .game-header #btn-learn { width: auto; min-width: 60px; padding: 7px 9px; }
    .game-header #btn-learn svg, .game-header #btn-learn .learn-label-full { display: none; }
    .game-header #btn-learn .learn-label-short { display: inline; }
    .game-header #btn-buy-deck { min-width: 60px; min-height: 38px; padding: 7px 8px; }
}
@media (orientation: landscape) and (max-height: 600px) {
    .game-header #btn-learn, .game-header #btn-buy-deck { min-height: 34px; }
    .menu-quick-actions { margin-bottom: 8px; }
    .menu-learn, .menu-quick-actions .menu-shop { min-height: 36px; padding: 7px 12px; }
}

/* Clear learning and shop actions above settings. */
.menu-action-copy{display:block;text-align:left}
.menu-action-copy small,.menu-quick-actions .menu-shop small{display:block;margin-top:4px;color:#acbbc4;font-size:10px;font-weight:400;line-height:1.3}
@media(orientation:landscape) and (max-height:600px){.menu-action-copy small,.menu-quick-actions .menu-shop small{display:none}}
/* Rules share the game font and keyword accents. */
:is(#overlay-rules,#overlay-quickref) .modal-body,:is(#overlay-rules,#overlay-quickref) .modal-body *{font-family:'Arimo',Arial,sans-serif!important}
:is(#overlay-rules,#overlay-quickref) :is(strong,b){font-weight:700}
:is(#overlay-rules,#overlay-quickref) .wb-teal{color:#2dd4bf!important}
:is(#overlay-rules,#overlay-quickref) .wb-orange{color:#fb923c!important}
:is(#overlay-rules,#overlay-quickref) .wb-purple{color:#c084fc!important}
:is(#overlay-rules,#overlay-quickref) .wb-green{color:#4ade80!important}

/* Both brand marks are visible home links, including in the small menu. */
.wb-home-link { flex: 0 0 auto; color: #b8dfdb; text-decoration: none; }
.home-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.home-domain { display: block; color: #b8dfdb; font: 400 9px/1.2 'Arimo',Arial,sans-serif; letter-spacing: 0; white-space: nowrap; }
.game-header .home-brand { width: 106px; }
.menu-heading .home-brand { width: 108px; }
.game-header .wb-home-link .hdr-logo-img, .menu-heading .wb-home-link .menu-logo {
    display: block; flex: 0 0 auto; transform-origin: center;
    filter: drop-shadow(0 0 5px rgba(45,212,191,.45));
    animation: wb-home-pulse 3.4s ease-in-out infinite;
}
.wb-home-link:hover .home-domain, .wb-home-link:focus-visible .home-domain { color: #e1fff9; text-decoration: underline; text-underline-offset: 3px; }
.wb-home-link:hover .home-brand img, .wb-home-link:focus-visible .home-brand img { filter: drop-shadow(0 0 9px rgba(45,212,191,.75)); }
@keyframes wb-home-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(45,212,191,.35)); }
    50% { transform: scale(1.045); filter: drop-shadow(0 0 10px rgba(45,212,191,.75)); }
}
@media (max-width: 768px) {
    .game-header .hdr-logo-link { gap: 0; }
    .game-header .home-brand { width: 86px; gap: 3px; }
    .game-header .home-domain { font-size: 8px; }
}
@media (max-width: 540px) {
    .menu-heading .home-brand { width: 84px; }
    .menu-heading .home-domain { font-size: 8px; }
    .menu-heading .wb-home-link .menu-logo { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
    header.game-header { padding-left: 6px; padding-right: 6px; gap: 4px; }
    .game-header .home-brand { width: 78px; }
    .game-header .header-controls { gap: 3px; }
    .game-header .btn-header { width: 32px; min-width: 32px; padding: 6px; }
    .game-header #btn-learn { width: auto; min-width: 52px; padding: 7px 6px; }
    .game-header #btn-buy-deck { min-width: 58px; padding: 7px 6px; }
}
@media (orientation: landscape) and (max-height: 600px) {
    .game-header .home-brand { width: 90px; gap: 2px; }
    .game-header .home-domain, .menu-heading .home-domain { font-size: 8px; }
    .menu-heading .home-brand { width: 90px; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .game-header .wb-home-link .hdr-logo-img, .menu-heading .wb-home-link .menu-logo {
        animation: none !important; transform: none; filter: drop-shadow(0 0 5px rgba(45,212,191,.45));
    }
}