:root {
    color-scheme: dark;
    --bg: #101311;
    --panel: #191e1b;
    --panel-2: #202722;
    --text: #f4f1e8;
    --muted: #aaa99f;
    --accent: #d5a84b;
    --danger: #bf4c55;
    --border: rgba(255,255,255,.09);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, rgba(75, 107, 75, .18), transparent 42rem), var(--bg);
    color: var(--text);
}
button, input, select { font: inherit; }
.topbar {
    min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 24px; border-bottom: 1px solid var(--border);
    background: rgba(16, 19, 17, .9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20;
}
.brand { color: var(--text); text-decoration: none; font-weight: 900; letter-spacing: .03em; }
.page-shell { width: min(1500px, calc(100% - 32px)); margin: 24px auto 56px; }
.panel {
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel);
    border: 1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.landing-grid { display: grid; grid-template-columns: 1.1fr .95fr .95fr; gap: 18px; align-items: start; }
.hero-panel h1 { font-size: clamp(2.3rem, 5vw, 5rem); line-height: .95; margin: .25rem 0 1.2rem; }
.hero-panel p { max-width: 55ch; color: #cfcec7; line-height: 1.65; }
.eyebrow { margin: 0; color: var(--accent); text-transform: uppercase; letter-spacing: .13em; font-size: .75rem; font-weight: 800; }
h1, h2 { margin-top: 0; }
h2 { font-size: 1.15rem; }
.stack { display: grid; gap: 10px; }
label { color: #d8d7d0; font-size: .92rem; }
input, select {
    width: 100%; color: var(--text); background: #0f1411; border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 13px; outline: none;
}
input:focus, select:focus { border-color: rgba(213,168,75,.75); }
button { border: 0; border-radius: 12px; padding: 11px 15px; cursor: pointer; font-weight: 800; }
.primary { background: var(--accent); color: #1a160d; }
.secondary { background: #343d36; color: var(--text); }
.danger { background: var(--danger); color: white; }
.alert, .message { border-radius: 12px; padding: 12px 14px; background: rgba(213,168,75,.11); border: 1px solid rgba(213,168,75,.28); }
.message.error, .alert { background: rgba(191,76,85,.13); border-color: rgba(191,76,85,.35); }
.board-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.board-sidebar { position: sticky; top: 88px; }
.game-code { font-size: 2.6rem; font-weight: 950; letter-spacing: .11em; margin: .25rem 0 1rem; color: var(--accent); }
.player-list { display: grid; gap: 9px; margin-top: 18px; }
.player-chip {
    display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center;
    padding: 10px 0; border-top: 1px solid var(--border);
}
.player-chip small { display: block; color: var(--muted); margin-top: 2px; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.turn-info { color: var(--accent); font-weight: 800; margin-top: 18px; }
.board-panel { padding: 12px; overflow: hidden; }
.board-host { width: 100%; max-width: 1000px; margin: auto; aspect-ratio: 1; position: relative; container-type: inline-size; }
.game-board { width: 100%; height: 100%; display: block; }
.board-rotor { transform-box: view-box; transform-origin: 500px 500px; transition: transform .6s ease; }
.board-turn { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.board-turn select { flex: 1; min-width: 0; }
.board-turn button { width: auto; padding: 8px 12px; }
.board-table { fill: #141b17; opacity: .75; }
.board-plank {
    stroke: #241912; stroke-width: 210; stroke-linecap: round;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.23));
}
.board-cap { fill: #241912; stroke: rgba(245,228,197,.25); stroke-width: 2; }
.player-label {
    font-size: 16px; font-weight: 900; letter-spacing: .03em;
    paint-order: stroke; stroke: rgba(17,17,17,.95); stroke-width: 5px; stroke-linejoin: round;
}
.partner-label { font-size: 12px; fill: rgba(244,241,232,.75); }
.board-title { fill: rgba(244,241,232,.92); font-size: 31px; font-weight: 950; letter-spacing: .07em; }
.board-subtitle { fill: rgba(244,241,232,.52); font-size: 14px; }
.marble-shadow { fill: rgba(0,0,0,.55); }
.marble { stroke-width: .8; }
.marble-swirl { fill: none; stroke-linecap: round; opacity: .38; mix-blend-mode: screen; }
.marble-glint { fill: #fff; }
.marble-group.clickable { cursor: pointer; }
.marble-group .glass-marble { transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.marble-group.clickable:hover .glass-marble { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(255,255,255,.75)); }
.player-page { display: grid; gap: 16px; }
.player-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.player-head h1 { margin: .2rem 0; }
.turn-badge { padding: 10px 14px; border-radius: 999px; background: #313731; color: var(--muted); font-weight: 900; }
.turn-badge.active { background: var(--accent); color: #17140d; box-shadow: 0 0 0 5px rgba(213,168,75,.13); }
.hand { display: flex; flex-wrap: wrap; gap: 14px; min-height: 175px; margin: 12px 0 18px; padding-top: 10px; }

/* Playing cards: SVG artwork (169 x 245) scaled by the font-size of the card. */
.playing-card {
    position: relative; width: 5em; height: 7.235em; padding: 0; flex: none;
    border: 0; border-radius: .3em; background: transparent; line-height: 0;
    user-select: none;
}
.pc-back use { fill: #b3141c; }
.pc-svg {
    width: 100%; height: 100%; display: block; overflow: visible;
    filter: drop-shadow(0 .04em .05em rgba(0,0,0,.35)) drop-shadow(0 .25em .45em rgba(0,0,0,.28));
}

/* Cards on the player's hand. */
.hand-card { font-size: 22px; cursor: pointer; transition: transform .15s ease; }
.hand-card:hover { transform: translateY(-4px); }
.hand-card.selected { transform: translateY(-12px); outline: 3px solid var(--accent); outline-offset: 3px; }
.hand-card.selected .pc-svg { filter: drop-shadow(0 0 .35em rgba(213,168,75,.8)) drop-shadow(0 .4em .6em rgba(0,0,0,.35)); }

/* Draw and discard piles in the middle of the board. */
.card-piles {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; gap: calc(2.4cqw * var(--zoom, 1)); pointer-events: none; font-size: calc(1.9cqw * var(--zoom, 1));
}
.pile { display: grid; justify-items: center; gap: .45em; }
.pile-slot { position: relative; width: 5em; height: 7.235em; border-radius: .3em; }
.pile-layer { position: absolute; left: 0; top: 0; transform: translate(calc(var(--layer) * -.06em), calc(var(--layer) * -.07em)); }
.pile-empty, .draw-pile:empty {
    width: 100%; height: 100%; border-radius: .38em; border: .1em dashed rgba(244,241,232,.35);
    display: grid; place-items: center; text-align: center; color: rgba(244,241,232,.55);
    font-size: .6em; padding: .5em;
}
.discard-pile .playing-card { transform: rotate(4deg); }
.pile-label {
    display: inline-flex; align-items: center; gap: .35em; white-space: nowrap;
    font-size: .62em; font-weight: 800; color: var(--text);
    background: rgba(0,0,0,.55); padding: .25em .7em; border-radius: 999px;
}
.pile-label .color-dot { width: .8em; height: .8em; box-shadow: none; }

/* "Din tur" highlight on the info box (desktop; on a phone the turn banner shows it). */
body.my-turn .player-head { outline: 3px solid var(--accent); animation: turn-glow 1.6s ease-in-out infinite; }
body.my-turn .turn-badge.active { font-size: 1.3rem; padding: 12px 20px; animation: turn-pulse 1s ease-in-out infinite; }
@keyframes turn-glow { 50% { box-shadow: 0 0 0 8px rgba(213,168,75,.28), 0 18px 50px rgba(0,0,0,.16); } }
@keyframes turn-pulse { 50% { transform: scale(1.08); } }
.special-controls { margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--panel-2); }
.special-controls label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.special-controls input { width: auto; }
#split-controls { margin-top: 12px; display: grid; grid-template-columns: 170px 130px 1fr; gap: 10px; align-items: center; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.partner-list { display: grid; gap: 10px; margin-top: 12px; }
.partner-card {
    display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center;
    padding: 14px; border-radius: 14px; background: var(--panel-2); color: var(--text); text-align: left;
}
.partner-card.selectable:hover { outline: 2px solid rgba(213,168,75,.55); }
.partner-card.chosen { border: 1px solid rgba(213,168,75,.35); }
.partner-card small { color: var(--muted); display: block; margin-top: 3px; }
@media (max-width: 980px) { .landing-grid { grid-template-columns: 1fr; } .board-layout { grid-template-columns: 1fr; } .board-sidebar { position: static; } }
@media (max-width: 620px) {
    .page-shell { width: min(100% - 18px, 1500px); margin-top: 12px; }
    .panel { border-radius: 15px; padding: 15px; }
    .topbar { padding: 0 14px; }
    #split-controls { grid-template-columns: 1fr; }
    .hand-card { font-size: 16px; }
}

/* Player page on a phone once the game has started: whose turn it is at the top, no header,
   the board as large as possible, the hand on one line and the info box at the bottom.
   Everything above the board has a fixed height, so the board never moves while playing. */
.marble-hit { fill: transparent; }
.turn-banner { display: none; }
@media (max-width: 620px) {
    body.in-game .topbar { display: none; }
    body.in-game .page-shell { width: 100%; margin: 0 0 24px; }
    body.in-game .player-page { gap: 8px; }
    body.in-game .player-head { order: 3; margin: 0 8px; padding: 12px 15px; }
    body.in-game .player-head h1 { font-size: 1.3rem; }
    body.in-game .player-head .turn-badge { display: none; }
    body.in-game.my-turn .player-head { outline: 0; animation: none; }

    body.in-game .turn-banner {
        position: sticky; top: 0; z-index: 30; height: 48px;
        display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
        background: #232a25; border-bottom: 1px solid var(--border); color: var(--text);
        font-size: 1.05rem; font-weight: 900; white-space: nowrap;
    }
    .turn-banner-text { overflow: hidden; text-overflow: ellipsis; }
    .turn-banner .color-dot { flex: none; }
    /* Highlight by colour and glow only: same size and font, so nothing shifts. */
    body.in-game .turn-banner.mine {
        background: linear-gradient(180deg, #f2c75c, #d5a84b); color: #17140d; border-color: transparent;
        animation: banner-glow 1.4s ease-in-out infinite;
    }
    @keyframes banner-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(213,168,75,.0), inset 0 0 0 0 rgba(255,255,255,0); }
        50% { box-shadow: 0 4px 22px 2px rgba(213,168,75,.6), inset 0 0 0 3px rgba(255,255,255,.55); }
    }

    body.in-game #play-panel {
        container-type: inline-size; margin: 0 8px; padding: 10px 12px;
        display: grid; grid-template-areas: "hand" "actions" "info"; grid-template-rows: auto auto 74px;
    }
    body.in-game #play-panel h2 { display: none; }
    body.in-game .action-row { grid-area: actions; margin-bottom: 8px; }
    body.in-game .action-row button { flex: 1; padding: 9px 10px; }

    /* The message and the 7-controls share one fixed-height slot; long texts scroll inside it. */
    body.in-game .message, body.in-game #seven-controls { grid-area: info; height: 74px; overflow-y: auto; margin: 0; }
    body.in-game .message { padding: 7px 10px; font-size: .82rem; line-height: 1.35; }
    body.in-game #seven-controls { z-index: 1; padding: 6px 10px; font-size: .8rem; border: 1px solid var(--border); }
    body.in-game #seven-controls > label { font-size: inherit; margin-right: 10px; gap: 4px; white-space: nowrap; }
    body.in-game #seven-controls input[type="radio"] { margin: 0; }
    body.in-game #seven-controls[hidden] { display: none; }
    body.in-game #split-controls { margin-top: 6px; grid-template-columns: auto 1fr; gap: 8px; }
    body.in-game #split-controls label { display: none; }
    body.in-game #seven-first-steps { width: auto; padding: 5px 8px; }

    body.in-game .board-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    body.in-game .board-host { max-width: none; }

    /* Five cards (5em wide each) and four gaps must fit on one line: scale the card size down to fit.
       The hand keeps the height of one card, also when it holds fewer cards. */
    body.in-game .hand {
        grid-area: hand; flex-wrap: nowrap; justify-content: center; gap: 2cqw;
        height: calc(12px + 7.235 * min(16px, 3.68cqw)); min-height: 0; margin: 0 0 10px; padding-top: 12px;
    }
    body.in-game .hand-card { font-size: min(16px, 3.68cqw); }
    body.in-game .hand-card.selected { transform: translateY(-8px); outline-width: 2px; }
}


.wood-module { filter: drop-shadow(0 5px 5px rgba(0,0,0,.45)); }
.module-edge { fill: #5c402b; stroke: #21160f; stroke-width: 1; }
.module-face { stroke: #765a42; stroke-width: .8; }

.joint-pin { fill: #211e18; stroke: #aa865b; stroke-width: 1.3; }

.board-hole { fill: #c6a77a; stroke: #20160e; stroke-width: 1.5; }

.divider { border: 0; border-top: 1px solid var(--border); margin: 22px 0 18px; }
.hint { color: var(--muted); font-size: .85rem; line-height: 1.4; }

/* Shuffle sequence (10 s, see SHUFFLE_MS in board.js):
   0-3 s   new game: the deck is fanned out and gathered again;
           refill:   the discard pile (except its top card) is flipped over onto the draw pile.
   3-9.6 s the deck is split and riffled together three times.
   9.6 s   the shuffled deck settles back into the draw pile. */
.draw-pile.shuffling + .pile-label { color: var(--accent); }
.draw-pile.shuffling .pile-layer {
    animation: show-at-end 9.6s steps(1, end) both;
    animation-delay: var(--elapsed);
}
.shuffle-card {
    position: absolute; left: 0; top: 0; z-index: calc(10 + var(--i));
    transform-origin: 50% 130%;
    animation: shuffle-fan 3s ease-in-out both, hide-at-end 9.6s steps(1, end) both;
    animation-delay: calc(var(--elapsed) + var(--i) * 25ms), var(--elapsed);
}
.mode-refill .shuffle-card {
    animation: show-at-end 3s steps(1, end) both, hide-at-end 9.6s steps(1, end) both;
    animation-delay: var(--elapsed), var(--elapsed);
}
.shuffle-card .playing-card {
    animation: riffle 6.6s ease-in-out both;
    animation-delay: calc(var(--elapsed) + 3s + var(--i) * 30ms);
}

/* The discard pile flips over, card by card, and lands on the draw pile. */
.gather-card {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    transform-style: preserve-3d; transform: rotate(4deg);
    z-index: calc(12 + var(--g));
    animation: gather 1.2s cubic-bezier(.45, .05, .3, 1) both, hide-at-end 3s steps(1, end) both;
    animation-delay: calc(var(--elapsed) + var(--g) * 230ms), var(--elapsed);
}
.discard-pile.gathering { perspective: 40em; }
.discard-pile.gathering > .playing-card { z-index: 30; }
.gc-side { position: absolute; inset: 0; backface-visibility: hidden; }
.gc-back { transform: rotateY(180deg); }
.gather-card .playing-card { transform: none; }

@keyframes shuffle-fan {
    0%   { transform: none; }
    35%, 60% { transform: translateY(-.3em) rotate(calc((var(--i) - 5.5) * 8deg)); }
    100% { transform: none; }
}
@keyframes gather {
    0%   { transform: rotate(4deg); }
    30%  { transform: translate(-1.2em, -1.8em) rotate(-2deg) rotateY(90deg); }
    65%  { transform: translate(calc(-4em - 1.2cqw * var(--zoom, 1)), -1.2em) rotate(-6deg) rotateY(180deg); }
    100% { transform: translate(calc(-5em - 2.4cqw * var(--zoom, 1)), 0) rotateY(180deg); }
}
@keyframes riffle {
    /* Three cycles: split, bend the halves, let them riffle back together. */
    0%   { transform: none; }
    9%   { transform: translate(calc(var(--side) * 70%), -4%) rotate(calc(var(--side) * 12deg)); }
    18%  { transform: translate(calc(var(--side) * 60%), calc(var(--i) * -1.2%)) rotate(calc(var(--side) * -6deg)); }
    28%  { transform: translate(0, calc(var(--i) * -.5%)) rotate(0); }
    33%  { transform: none; }
    42%  { transform: translate(calc(var(--side) * -70%), -10%) rotate(calc(var(--side) * -14deg)); }
    51%  { transform: translate(calc(var(--side) * -58%), calc(-6% + var(--i) * -1.4%)) rotate(calc(var(--side) * 8deg)); }
    61%  { transform: translate(0, calc(var(--i) * -.6%)) rotate(0); }
    66%  { transform: none; }
    75%  { transform: translate(calc(var(--side) * 70%), -4%) rotate(calc(var(--side) * 12deg)); }
    84%  { transform: translate(calc(var(--side) * 60%), calc(var(--i) * -1.2%)) rotate(calc(var(--side) * -6deg)); }
    93%  { transform: translate(0, calc(var(--i) * -.5%)) rotate(0); }
    96%  { transform: translateY(-3%); }
    100% { transform: none; }
}
@keyframes show-at-end { from { opacity: 0; } to { opacity: 1; } }
@keyframes hide-at-end { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .shuffle-card, .shuffle-card .playing-card, .gather-card, .draw-pile.shuffling .pile-layer { animation: none; }
    .shuffle-card, .gather-card { display: none; }
}

.join-link {
    display: block; text-align: center; margin: -.4rem 0 1rem; padding: 10px 14px; border-radius: 12px;
    background: var(--accent); color: #1a160d; font-weight: 800; text-decoration: none;
}
.join-link:hover { filter: brightness(1.08); }

/* Rules modal (start page and board screen): fills most of the screen, scrolls inside. */
.rules-open { width: 100%; margin-top: 14px; }
.rules-dialog {
    width: min(1100px, 94vw); height: 90vh; max-width: none; max-height: none; padding: 0;
    border: 1px solid var(--border); border-radius: 20px; background: var(--panel); color: var(--text);
    box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.rules-dialog[open] { display: flex; flex-direction: column; }
.rules-dialog::backdrop { background: rgba(6, 8, 7, .72); backdrop-filter: blur(3px); }
.rules-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.rules-header h2 { margin: 0; font-size: 1.35rem; }
.rules-close { padding: 8px 13px; flex: none; }
.rules-body {
    flex: 1; overflow-y: auto; padding: 8px 22px 24px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 34px; align-content: start;
    line-height: 1.55; color: #dedcd3;
}
.rules-body h3 { color: var(--accent); margin: 18px 0 6px; font-size: 1.05rem; }
.rules-body p, .rules-body ul { margin: 0; }
.rules-body ul { padding-left: 1.2em; }
.rules-body li + li { margin-top: 4px; }
.rules-body strong { color: var(--text); }
.rules-wide { grid-column: 1 / -1; }
.rules-cards { width: 100%; border-collapse: collapse; }
.rules-cards th, .rules-cards td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rules-cards th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.rules-cards td:first-child { white-space: nowrap; font-weight: 800; color: var(--text); width: 1%; }
@media (max-width: 760px) {
    .rules-dialog { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
    .rules-header { padding: 12px 16px; }
    .rules-header h2 { font-size: 1.1rem; }
    .rules-body { grid-template-columns: 1fr; padding: 4px 16px 20px; }
    .rules-cards td:first-child { white-space: normal; }
}

/* QR code on the board screen and the landing page it opens. */
.join-qr { margin: 0 0 1rem; display: grid; justify-items: center; gap: 8px; text-align: center; }
.join-qr[hidden], .join-link[hidden] { display: none; }
.join-qr-code { width: 100%; max-width: 220px; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 6px; }
.join-qr-code svg { width: 100%; height: 100%; display: block; }
.join-qr figcaption { color: var(--text); font-weight: 800; font-size: .92rem; }
.join-qr figcaption small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; font-size: .75rem; word-break: break-all; }
.join-landing { max-width: 460px; margin: 0 auto; }
.join-landing .game-code { margin-bottom: 1.2rem; }
.join-landing .stack button { margin-top: 6px; padding: 14px; font-size: 1.05rem; }
.join-landing .alert { margin-bottom: 14px; }
.secondary-link { color: var(--accent); font-weight: 800; }

/* Language switch (DA/EN) in the top bar and in the player's info box. */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #232a25; border: 1px solid var(--border); }
.lang-switch a {
    padding: 4px 10px; border-radius: 999px; color: var(--muted); text-decoration: none;
    font-size: .8rem; font-weight: 800; letter-spacing: .04em;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a.active { background: var(--accent); color: #17140d; }

/* Opt-in sound / vibration / notification for "your turn", plus language, in the info box. */
.player-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; color: var(--muted); font-size: .88rem; }
.player-settings label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.player-settings label[hidden] { display: none; }
.player-settings input { width: auto; margin: 0; accent-color: var(--accent); }
.player-settings .lang-switch { margin-left: auto; }