/* ════════════════════════════════════════════════════════════════════
   Skulldom - all game styling (single file, like the other games)
   Theme: gothic garden at midnight - plum-black ground, moonlight, bone and candle-gold accents.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --bg: #0e0a12;
    --bg2: #17111d;
    --panel: #1d1624;
    --panel2: #2a2033;
    --line: #3d2f48;
    --text: #efe7f3;
    --muted: #a493b0;
    --accent: #e9c46a;
    --bone: #efe6d2;
    --good: #7ee08a;
    --bad: #ff5c6c;
    --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at 86% 8%, #f5efd8 0 24px, rgba(245, 239, 216, .22) 27px, rgba(245, 239, 216, .06) 50px, transparent 90px),
        radial-gradient(ellipse at 50% -20%, #3a2448 0%, transparent 60%),
        radial-gradient(ellipse at 50% 120%, #14261a 0%, transparent 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: 17px;
}

h1, h2, h3 { margin: .4em 0; font-weight: 700; }
h1:focus { outline: none; }
h3 { color: var(--accent); font-size: 1.15rem; letter-spacing: .5px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.tiny { font-size: .78rem; }
.error-text { color: var(--bad); margin: .4rem 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Buttons / inputs ───────────────────────────────────────────── */
button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }

.primary-btn, .secondary-btn, .step-btn {
    border: none; border-radius: 10px; padding: .55rem 1.1rem; font-size: 1.05rem; font-weight: 700;
    transition: transform .08s, filter .15s;
}
.primary-btn:not(:disabled):hover, .secondary-btn:not(:disabled):hover, .step-btn:hover { filter: brightness(1.15); }
.primary-btn:not(:disabled):active, .secondary-btn:active, .step-btn:active { transform: translateY(1px); }
.primary-btn { background: linear-gradient(#f3d58a, #c99a34); color: #2a1a00; box-shadow: 0 3px 0 #7d5c14, 0 0 16px rgba(233, 196, 106, .25); }
.primary-btn.small { padding: .35rem .8rem; font-size: .95rem; }
.primary-btn.danger { background: linear-gradient(#ef5a6a, #a8243a); color: #fff; box-shadow: 0 3px 0 #5e1020; }
.secondary-btn { background: var(--panel2); color: var(--text); box-shadow: 0 3px 0 #0b070e; }
.secondary-btn.small { padding: .3rem .7rem; font-size: .9rem; }
.step-btn { background: var(--panel2); color: var(--text); padding: .4rem .8rem; font-size: 1.2rem; }
.icon-btn { background: var(--panel2); border: none; color: var(--text); border-radius: 8px; padding: .35rem .55rem; font-size: 1rem; }
.icon-btn.active { outline: 1px solid var(--accent); }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: .85rem; padding: .1rem; }
.link-btn:hover { color: var(--accent); }
.link-btn.danger:hover { color: var(--bad); }
.back-btn {
    background: transparent; color: var(--muted); border: 1px solid var(--line);
    border-radius: 999px; padding: .25rem .75rem; font-size: .9rem; white-space: nowrap;
}
.back-btn:hover { color: var(--text); border-color: var(--accent); }

.text-input, .mini-select {
    width: 100%; background: #0d0911; border: 2px solid var(--line); color: var(--text);
    border-radius: 10px; padding: .55rem .8rem; font-size: 1.05rem; font-family: inherit; font-weight: 600; margin-bottom: .6rem;
}
.text-input:focus, .mini-select:focus { outline: none; border-color: var(--accent); }
.mini-select { width: auto; padding: .25rem .5rem; font-size: .9rem; margin: .2rem 0; }
label { display: block; margin: .5rem 0 .25rem; color: var(--muted); font-size: .95rem; }
label.check-row { display: flex; align-items: center; gap: .5rem; color: var(--text); cursor: pointer; margin: .7rem 0 .4rem; }
label.check-row input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* ── Index / lobby ──────────────────────────────────────────────── */
.index-page { max-width: 740px; margin: 0 auto; padding: 1rem; }
.index-page.wide { max-width: 1100px; }
.title-block { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; text-align: center; margin-top: .6rem; }
.title-disc { filter: drop-shadow(0 0 18px rgba(166, 108, 240, .35)); }
.title-disc.left { transform: rotate(-10deg); }
.title-disc.right { transform: rotate(10deg); }
.game-title {
    font-family: "Cinzel Decorative", serif; font-size: 3rem; margin: 0; letter-spacing: 1px;
    text-shadow: 0 0 22px rgba(166, 108, 240, .45), 0 3px 0 rgba(0,0,0,.5);
}
.game-title.small-title { font-size: 2rem; text-align: center; }
.game-title.tiny-title { font-size: 1.2rem; }
.accent { color: var(--accent); }
.tagline { color: var(--muted); margin: .3rem 0 1rem; font-style: italic; font-size: 1.1rem; text-align: center; }

.index-card {
    background: linear-gradient(180deg, rgba(42, 32, 51, .92), rgba(29, 22, 36, .95));
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.2rem; margin-bottom: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.index-card > button { margin: .5rem .4rem 0 0; }

.home-page-tabs, .index-tabs { display: flex; gap: .4rem; margin: .5rem 0 .8rem; }
.tab-btn {
    flex: 1; background: var(--bg2); color: var(--muted); font-weight: 700;
    border: 1px solid var(--line); border-radius: 10px; padding: .55rem; font-size: 1rem;
}
.tab-btn.active { background: var(--panel2); color: var(--accent); border-color: var(--accent); }

.table-row {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
    padding: .7rem .9rem; margin-bottom: .4rem; cursor: pointer;
}
.table-row.selected { border-color: var(--accent); }
.table-row-main { display: flex; flex-direction: column; min-width: 0; }
.table-row-main .muted { font-size: .9rem; }
.join-panel { padding: .5rem .2rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.join-panel .text-input { margin: 0; }
.phase-chip { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.phase-chip.lobby { background: #24452c; }
.phase-chip.playing { background: #5a2440; }
.player-list { list-style: none; padding: 0; margin: .2rem 0 .8rem; }
.guide-card { line-height: 1.45; }
.guide-card ul, .guide-card ol { padding-left: 1.3rem; }
.guide-card li { margin-bottom: .35rem; }

.lobby-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.lobby-seat {
    background: var(--bg2); border: 1px solid var(--line); border-top: 3px solid var(--seat); border-radius: 12px;
    padding: .6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.lobby-discs { display: flex; gap: .3rem; }
.seat-name { font-weight: 700; color: var(--seat, var(--text)); }
.bot-style { color: var(--accent); }
.garden-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem; margin-bottom: .6rem; }
.garden-btn {
    display: flex; align-items: center; gap: .4rem; background: var(--bg2); border: 1px solid var(--line);
    border-radius: 10px; padding: .3rem .5rem; color: var(--text); font-size: .9rem; text-align: left;
}
.garden-btn.mine { border-color: var(--accent); box-shadow: 0 0 10px rgba(233, 196, 106, .35); }
.bot-adder { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
.bot-adder .mini-select { flex: 1; min-width: 200px; }

/* ── Discs (3D flip) ────────────────────────────────────────────── */
.disc { width: var(--d); height: var(--d); perspective: 700px; position: relative; display: inline-block; flex: 0 0 auto; }
.disc-inner { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); transform-style: preserve-3d; }
.disc.up .disc-inner { transform: rotateY(180deg); }
.disc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.disc-face.front { transform: rotateY(180deg); }
.disc-art { width: 100%; height: 100%; display: block; }
.disc.clickable { cursor: pointer; }
.disc.clickable:hover .disc-inner { filter: brightness(1.18) drop-shadow(0 0 10px var(--seat, #fff)); }
.peek {   /* owner-only hint on their own face-down disc: a tiny copy of its face */
    position: absolute; left: -3px; bottom: -3px; width: calc(var(--d) * .44); height: calc(var(--d) * .44);
    border-radius: 50%; box-shadow: 0 0 0 1px #0d0911, 0 2px 6px rgba(0,0,0,.7);
}
.peek.skull { box-shadow: 0 0 0 1px #0d0911, 0 0 8px var(--bad); }
.eye-glow { animation: eye-pulse 2.6s ease-in-out infinite; }
@keyframes eye-pulse { 50% { opacity: .55; } }
.flame { animation: flicker .18s infinite alternate; transform-origin: 50px 8px; }
@keyframes flicker { to { transform: scaleY(1.12) skewX(3deg); } }

/* ── Game page layout ───────────────────────────────────────────── */
.game-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.game-header {
    display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem;
    background: rgba(14, 10, 18, .85); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px);
}
.header-left { display: flex; flex-direction: column; line-height: 1.1; }
.table-name { font-size: .85rem; }
.header-right { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.banner-slot { flex: 1; display: flex; justify-content: center; min-width: 0; }
.banner-display {
    background: linear-gradient(#2e2238, #1f1727); color: var(--bone); border: 1px solid var(--accent);
    padding: .3rem 1rem; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; animation: banner-in .35s ease-out; box-shadow: 0 0 14px rgba(233, 196, 106, .25);
}
@keyframes banner-in { from { transform: translateY(-14px) scale(.9); opacity: 0; } }
.round-pill, .timer { background: var(--panel2); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap; }
.timer { font-variant-numeric: tabular-nums; }
.timer.urgent { background: #8e2236; animation: pulse 1s infinite; }
@keyframes pulse { 50% { filter: brightness(1.35); } }

/* The table: seats sit on an ellipse (--x/--y from Game.razor), the pot in the middle. */
/* The page fills the window: the table takes whatever height is left above the hand panel. */
.table-area { position: relative; flex: 1; min-height: 450px; margin: .4rem auto; width: min(1240px, 100%); --seat-h: 172px; }
.felt {
    position: absolute; left: 14%; right: 14%; top: 16%; bottom: 16%; border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(63, 42, 78, .9), rgba(22, 14, 28, .95) 70%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.015) 0 2px, transparent 2px 6px);
    border: 2px solid #3b2a46; box-shadow: inset 0 0 60px rgba(0,0,0,.8), 0 0 50px rgba(120, 70, 160, .15);
}
.felt::before {   /* thorny vine ring */
    content: ""; position: absolute; inset: 10px; border-radius: 50%;
    border: 2px dashed rgba(70, 120, 70, .35);
}
.pot {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(340px, 44%); text-align: center; display: flex; flex-direction: column; gap: .25rem; align-items: center;
}
.pot-title { font-family: "Cinzel Decorative", serif; font-size: 1.5rem; color: var(--bone); }
.pot-sub { color: var(--muted); }
.pot-sub b { color: var(--text); }
.pot-count { font-size: 2.4rem; color: var(--bone); line-height: 1; }
.pot-count span { display: block; font-size: .9rem; color: var(--muted); }
.pot-bid { font-family: "Cinzel Decorative", serif; font-size: 4rem; line-height: 1; text-shadow: 0 0 24px currentColor; animation: pop .25s ease-out; }
.pot-outcome { font-size: 1.15rem; padding: .3rem .6rem; border-radius: 10px; }
.pot-outcome.good { color: var(--good); text-shadow: 0 0 12px rgba(126, 224, 138, .5); }
.pot-outcome.bad { color: var(--bad); text-shadow: 0 0 12px rgba(255, 92, 108, .5); }
.flower-track { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; font-size: 1.6rem; }
.track-dot { color: #4a3a55; transition: color .3s, text-shadow .3s; }
.track-dot.found { color: var(--good); text-shadow: 0 0 10px var(--good); animation: pop .3s ease-out; }
.track-dot.skull { display: inline-block; width: 1.7rem; height: 1.7rem; filter: drop-shadow(0 0 8px var(--bad)); animation: pop .3s ease-out; }
.track-dot.skull .disc-art { width: 100%; height: 100%; }

.seat {
    position: absolute; left: var(--x); transform: translate(-50%, -50%);
    top: calc(var(--seat-h) / 2 + (100% - var(--seat-h)) * var(--y));   /* --y is 0..1: seat never leaves the area */
    width: 200px; background: rgba(23, 17, 29, .92); border: 1px solid var(--line); border-top: 3px solid var(--seat);
    border-radius: 14px; padding: .4rem .5rem .45rem; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    transition: box-shadow .3s, border-color .3s;
}
.seat.mine { width: 240px; }
.seat.acting { box-shadow: 0 0 0 2px var(--seat), 0 0 26px var(--seat); }
.seat.challenger { border-color: var(--accent); }
.seat.out { opacity: .45; filter: grayscale(.6); }
.seat.flip-target { animation: target-glow 1.2s ease-in-out infinite; }
@keyframes target-glow { 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 30px var(--accent); } }
.seat-head { display: flex; align-items: center; gap: .3rem; width: 100%; justify-content: center; position: relative; }
.seat-head .seat-name { color: var(--seat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.bot-tag { font-size: .72rem; color: var(--accent); border: 1px solid #5a4630; border-radius: 999px; padding: 0 .4rem; }
.seat-x {
    position: absolute; right: -4px; top: -2px; width: 1.4rem; height: 1.4rem; border: none; border-radius: 6px;
    background: rgba(168, 36, 58, .8); color: #fff; font-size: .75rem; opacity: 0; transition: opacity .15s;
}
.seat:hover .seat-x, .seat-x:focus { opacity: 1; }
@media (hover: none) { .seat-x { opacity: .8; } }
.mat { display: flex; gap: .35rem; }
.mat-pip { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--seat); background: #120c16; }
.mat-pip.won { background: var(--seat); box-shadow: 0 0 10px var(--seat); }
.pile { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 .2rem; }
.pile .disc + .disc { margin-left: calc(var(--d) * -.45); }
.pile.clickable { cursor: pointer; }
.pile .disc.next-flip .disc-face.back { box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--accent); }
.pile-empty { color: var(--muted); font-style: italic; font-size: .9rem; }
.out-tag { font-family: "Cinzel Decorative", serif; color: var(--bad); font-size: 1.1rem; }
.seat-sub { font-size: .82rem; color: var(--muted); text-align: center; }
.seat-status { display: block; color: var(--text); }

/* ── My panel (hand + actions) ──────────────────────────────────── */
.my-panel {
    position: relative; z-index: 40; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center;
    padding: .6rem 1rem .8rem; background: linear-gradient(180deg, rgba(14, 10, 18, .6), rgba(14, 10, 18, .97) 30%);
    border-top: 1px solid var(--line);
}
.my-panel.spectating { padding: .9rem; }
.my-hand { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.hand-label { color: var(--seat); font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; }
.hand-discs { display: flex; gap: .45rem; min-height: 72px; align-items: center; }
.hand-disc.clickable { animation: hand-bob 2.4s ease-in-out infinite; }
.hand-disc.clickable:nth-child(2) { animation-delay: .3s; }
.hand-disc.clickable:nth-child(3) { animation-delay: .6s; }
.hand-disc.clickable:nth-child(4) { animation-delay: .9s; }
@keyframes hand-bob { 50% { transform: translateY(-5px); } }
.my-actions { display: flex; flex-direction: column; gap: .4rem; min-width: min(420px, 100%); }
.prompt { font-size: 1.1rem; }
.bid-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.bid-amount { min-width: 2.4rem; text-align: center; font-family: "Cinzel Decorative", serif; font-size: 1.8rem; color: var(--accent); }
.my-stats { display: flex; gap: 1rem; color: var(--muted); font-size: .9rem; }
.private-note { background: #1f2b22; border: 1px solid #3e6a46; border-radius: 10px; padding: .3rem .7rem; color: #cfeed5; }
.private-note.bad { background: #2e1820; border-color: #7a2a3a; color: #ffd0d8; }

/* ── Overlays ───────────────────────────────────────────────────── */
.overlay-backdrop {
    position: fixed; inset: 0; background: rgba(6, 3, 9, .78);
    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem;
}
.overlay-backdrop.top { z-index: 1100; }
.overlay-panel {
    position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    padding: 1.3rem; max-width: min(720px, 96vw); min-width: min(320px, 96vw); width: 100%;
    box-shadow: 0 0 40px rgba(0,0,0,.7); animation: pop .2s ease-out;
}
.overlay-panel > button { margin: .5rem .4rem 0 0; }
.overlay-panel.scroll { max-height: 88vh; overflow-y: auto; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.overlay-header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.2rem; margin-bottom: .6rem; color: var(--accent); }
.overlay-close { cursor: pointer; padding: 0 .3rem; position: absolute; right: .8rem; top: .6rem; font-size: 1.2rem; }
.overlay-header .overlay-close { position: static; }

.penalty-panel { text-align: center; border-color: #7a2a3a; box-shadow: 0 0 50px rgba(255, 60, 90, .25); }
.penalty-discs { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: .6rem; }
.penalty-disc.clickable:hover { transform: translateY(-6px) rotate(-4deg); transition: transform .15s; }

.gameover-panel { text-align: center; }
.gameover-panel h2 { font-family: "Cinzel Decorative", serif; font-size: 1.9rem; text-shadow: 0 0 20px currentColor; }
.winner-discs { display: flex; justify-content: center; align-items: center; gap: .3rem; }
.winner-discs .disc:first-child { transform: rotate(-14deg); }
.winner-discs .disc:last-child { transform: rotate(14deg); }
.winner-skull { filter: drop-shadow(0 0 22px var(--accent)); animation: pop .5s ease-out; }
.final-table { margin: .6rem auto; border-collapse: collapse; }
.final-table td { padding: .25rem .8rem; border-bottom: 1px solid var(--line); text-align: left; }

/* ── Side panels (chat / log) ───────────────────────────────────── */
.side-panel {
    position: fixed; right: 0; top: 0; bottom: 0; width: min(360px, 92vw); z-index: 900;
    background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,.5);
}
.side-panel-header { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--accent); }
.chat-messages, .log-entries { flex: 1; overflow-y: auto; padding: .6rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.chat-msg { word-wrap: break-word; }
.chat-time { color: var(--muted); font-size: .75rem; margin-right: .3rem; }
.chat-name { font-weight: 700; }
.chat-input-row { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--line); }
.chat-input-row .text-input { margin: 0; }
.log-round { color: var(--accent); font-family: "Cinzel Decorative", serif; font-size: .9rem; margin-top: .5rem; border-bottom: 1px solid var(--line); }
.log-entry.skull, .log-entry.lose, .log-entry.eliminated { color: #ff9aa8; }
.log-entry.success, .log-entry.win { color: var(--good); }
.log-entry.bid { color: #f1dfa8; }

/* ── Admin ──────────────────────────────────────────────────────── */
.admin-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.admin-toolbar > span { margin-right: auto; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.admin-table th, .admin-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table th { color: var(--muted); font-weight: 600; }
.admin-table tr.finished td { opacity: .65; }
.admin-table td:last-child { white-space: nowrap; }

/* ── Dev disc gallery ───────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 1rem; padding: 1rem; }
.gallery-row { display: flex; gap: 1rem; align-items: center; }
.gallery-name { width: 110px; }

#blazor-error-ui {
    background: #5e1020; color: #fff; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
#blazor-error-ui a { color: #ffd; }

/* ── Phones / narrow screens: seats in a grid, pot on top ───────── */
@media (max-width: 860px) {
    .game-header { flex-wrap: wrap; padding: .4rem .6rem; }
    .banner-slot { order: 3; flex-basis: 100%; }
    .table-area { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .5rem; }
    .felt { display: none; }
    .pot {
        position: static; transform: none; width: auto; grid-column: 1 / -1; order: -1;
        background: rgba(29, 22, 36, .9); border: 1px solid var(--line); border-radius: 14px; padding: .6rem;
    }
    .seat { position: static; transform: none; width: auto; order: var(--order); }
    .seat.mine { width: auto; grid-column: 1 / -1; }
    .pot-bid { font-size: 3rem; }
    .my-actions { min-width: 0; width: 100%; }
    .my-panel { position: sticky; bottom: 0; }   /* phones scroll the seat grid; keep the hand in reach */
    .game-title { font-size: 2.3rem; }
}