@font-face {
    font-family: 'Architects Daughter';
    src: url('../fonts/ArchitectsDaughter.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --felt: #07543e;
    --felt-dark: #043c2d;
    --panel: rgba(8, 23, 29, .92);
    --panel-soft: rgba(255, 255, 255, .08);
    --text: #f8faf7;
    --muted: #b9c9c4;
    --gold: #f2c75c;
    --red: #c9333f;
    --danger: #d84b55;
    --card-w: clamp(58px, min(7.1vw, 10.8vh), 94px);
    --card-h: calc(var(--card-w) * 1.4);
    --card-gap: clamp(7px, 1vw, 14px);
    --rank-size: clamp(16px, 1.25vw, 19px);
    --center-suit-size: clamp(32px, 3.5vw, 46px);
    font-family: 'Architects Daughter', 'Segoe Print', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--felt-dark); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 30% 10%, rgba(255,255,255,.08), transparent 28%),
        linear-gradient(145deg, var(--felt), var(--felt-dark));
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.eyebrow {
    margin: 0 0 .35rem;
    color: var(--gold);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .6rem; font-size: clamp(2rem, 5vw, 4rem); line-height: .95; }
h2 { margin-bottom: 0; font-size: 1.6rem; }

.landing-shell {
    width: min(1120px, calc(100% - 32px));
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr);
    gap: clamp(14px, 2.2vw, 24px);
    align-items: center;
    padding: clamp(14px, 4vh, 42px) 0;
}

.welcome-card, .scoreboard-card, .result-modal, .error-card {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 26px;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
}
.welcome-card { max-height: 100%; overflow: auto; padding: clamp(24px, min(5vw, 6vh), 64px); }
.scoreboard-card { display: flex; min-height: 0; max-height: min(78dvh, 760px); flex-direction: column; padding: clamp(20px, 3vw, 28px); }

.intro { max-width: 560px; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }

.name-form { display: grid; gap: 10px; margin-top: 30px; }
.name-form label { font-weight: 750; }
.optional-label { color: var(--muted); font-size: .82em; font-weight: 400; }
.name-form input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    outline: none;
    background: rgba(255,255,255,.09);
    color: var(--text);
    padding: 15px 16px;
    transition: border-color .2s, box-shadow .2s;
}
.name-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242,199,92,.14); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.test-hint { margin: 18px 0 0; color: var(--muted); font-size: .86rem; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 800;
    padding: 11px 18px;
    transition: transform .16s, filter .16s, opacity .16s;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.button-primary { background: var(--gold); color: #1d241c; }
.button-quiet { background: rgba(255,255,255,.1); color: var(--text); }
.button-danger { background: rgba(216,75,85,.18); color: #ffd8dc; border: 1px solid rgba(255,130,140,.25); }

.alert { margin: 18px 0; border-radius: 12px; padding: 12px 14px; }
.alert-error { background: rgba(216,75,85,.16); color: #ffdce0; border: 1px solid rgba(255,120,130,.24); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-heading > span { font-size: 2rem; }
.empty-state { color: var(--muted); line-height: 1.6; }
.score-list-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 5px; }
.score-list-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.score-list-scroll::-webkit-scrollbar { width: 10px; }
.score-list-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.score-list-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: 999px; }
.scoreboard-card .score-list-scroll { flex: 1; }
.score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.score-row {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    padding: 10px 12px;
}
.score-row .rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.score-row .player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-row.is-vip { background: linear-gradient(90deg, rgba(242,199,92,.22), rgba(242,199,92,.06)); box-shadow: inset 0 0 0 1px rgba(242,199,92,.3); }
.score-row.is-vip .player { color: #ffe59d; font-weight: 850; }
.score-row.is-current { outline: 2px solid #fff; outline-offset: 1px; }

.game-shell { width: min(1320px, 100%); min-height: 100vh; margin: 0 auto; padding: 10px 14px; }
.game-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(2,24,18,.7);
    padding: 8px 12px;
    backdrop-filter: blur(12px);
}
.game-player { min-width: 0; display: flex; align-items: center; }
.game-header h1 { overflow: hidden; margin: 0; font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.live-stats { display: flex; gap: 6px; }
.live-stats > div { min-width: 66px; border-radius: 10px; background: rgba(255,255,255,.075); padding: 5px 9px; text-align: center; }
.live-stats span { display: block; color: var(--muted); font-size: .61rem; text-transform: uppercase; letter-spacing: .07em; }
.live-stats strong { display: block; margin-top: 1px; font-size: 1rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.header-actions { display: flex; gap: 6px; }
.header-actions .button { min-height: 34px; border-radius: 10px; padding: 6px 11px; font-size: .86rem; }
.test-banner { margin: 7px 0 0; border-radius: 10px; background: rgba(242,199,92,.18); color: #ffe8aa; padding: 7px 12px; text-align: center; font-size: .84rem; font-weight: 800; }

.game-board { position: relative; padding: 14px 0 24px; }
.game-board::before {
    content: '';
    position: absolute;
    inset: 4px -8px 8px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    background: rgba(0,36,25,.12);
}
.top-row {
    min-width: 504px;
    display: grid;
    grid-template-columns: repeat(7, var(--card-w));
    justify-content: space-between;
    gap: var(--card-gap);
}
.stock-area { grid-column: 1 / span 2; }
.foundation-area { grid-column: 4 / span 4; }
.stock-area, .foundation-area { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w); justify-content: space-between; gap: var(--card-gap); }
.pile, .playing-card { width: var(--card-w); height: var(--card-h); border-radius: calc(var(--card-w) * .09); }
.pile { position: relative; flex: 0 0 var(--card-w); border: 2px dashed rgba(255,255,255,.2); }
.pile .playing-card { position: absolute; inset: -2px; }
.empty-symbol, .redeal-symbol, .foundation-suit, .king-slot {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.23);
    font-size: calc(var(--card-w) * .43);
    font-weight: 800;
}
.redeal-symbol { color: rgba(255,255,255,.62); }
.red-foundation .foundation-suit { color: rgba(255,135,145,.36); }
.pile-count { position: absolute; right: -7px; bottom: -7px; z-index: 10; min-width: 25px; height: 25px; border-radius: 999px; background: #071c18; color: white; display: grid; place-items: center; font-size: .72rem; font-weight: 800; box-shadow: 0 3px 10px rgba(0,0,0,.3); }

.playing-card {
    position: relative;
    display: block;
    border: 1px solid rgba(5,10,10,.42);
    padding: 0;
    overflow: hidden;
    background: #f8f6ed;
    color: #111b1c;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
    cursor: pointer;
    user-select: none;
    transition: transform .13s, box-shadow .13s, filter .13s;
}
.playing-card:hover { filter: brightness(1.035); }
.playing-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.playing-card.face-down { background: #14578f; }
.card-back-art {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.card-back-art::after {
    content: '';
    width: 82%;
    height: 82%;
    background: url('../images/logo.png') center/contain no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.34));
}
.red-card { color: var(--red); }
.card-corner { position: absolute; left: 7%; top: 4%; display: grid; justify-items: center; line-height: .88; font-family: Georgia, serif; font-size: var(--rank-size); }
.card-corner strong { font-size: 1em; }
.card-corner span { font-size: 1.02em; }
.card-corner.bottom { left: auto; top: auto; right: 7%; bottom: 4%; transform: rotate(180deg); }
.card-center { position: absolute; inset: 0; display: grid; place-items: center; font-family: Georgia, serif; font-size: var(--center-suit-size); opacity: .92; }
.selected-card { transform: translateY(-7px); box-shadow: 0 0 0 4px var(--gold), 0 13px 22px rgba(0,0,0,.34); z-index: 80 !important; }

.tableau { min-width: 504px; display: grid; grid-template-columns: repeat(7, var(--card-w)); justify-content: space-between; gap: var(--card-gap); margin-top: 18px; }
.tableau-pile { position: relative; min-width: var(--card-w); min-height: var(--card-h); border-radius: calc(var(--card-w) * .09); }
.tableau-pile:empty, .tableau-pile:has(.king-slot) { border: 2px dashed rgba(255,255,255,.16); }
.tableau-pile > .playing-card { position: absolute; left: 0; }
.king-slot { height: var(--card-h); }

.modal-backdrop[hidden] { display: none; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(0,10,8,.78); padding: 18px; backdrop-filter: blur(8px); }
.result-modal { position: relative; width: min(820px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: clamp(26px, 5vw, 48px); }
.result-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; margin: 26px 0; }
.personal-result, .final-highscore { border-radius: 18px; background: rgba(255,255,255,.06); padding: 22px; }
.personal-result span { color: var(--muted); }
.personal-result > strong { display: block; margin: 8px 0; color: var(--gold); font-size: clamp(3rem, 9vw, 5rem); line-height: 1; }
.personal-result p { color: var(--muted); }
.final-highscore { display: flex; min-height: 0; flex-direction: column; }
.final-highscore h3 { margin-bottom: 14px; }
.final-highscore .score-list-scroll { max-height: min(44vh, 430px); }
.result-actions { display: flex; justify-content: center; gap: 10px; }
.result-actions form { margin: 0; }
.modal-open { overflow: hidden; }

.game-toast { position: fixed; z-index: 1200; left: 50%; bottom: 24px; max-width: min(90vw, 560px); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: #082820; color: white; box-shadow: 0 12px 35px rgba(0,0,0,.35); padding: 12px 16px; transition: opacity .2s, transform .2s; }
.game-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.game-toast.is-error { background: #542128; }
.hint-pulse { animation: hintPulse .85s ease 2; }
@keyframes hintPulse { 50% { filter: brightness(1.35); box-shadow: 0 0 0 6px rgba(242,199,92,.7), 0 12px 24px rgba(0,0,0,.3); } }

.error-page { display: grid; place-items: center; padding: 20px; }
.error-card { width: min(500px, 100%); padding: 40px; text-align: center; }
.error-code { display: block; color: var(--gold); font-size: 4rem; font-weight: 900; }

@media (min-width: 851px) {
    .landing-page { overflow: hidden; }
    .landing-shell { height: 100dvh; min-height: 0; }
    .welcome-card, .scoreboard-card { max-height: 100%; }
}

@media (min-width: 851px) and (max-height: 700px) {
    .landing-shell { padding: 12px 0; }
    .welcome-card { padding: 22px 30px; }
    .intro { line-height: 1.45; }
    .name-form { margin-top: 18px; }
    .test-hint { margin-top: 10px; }
    .scoreboard-card { padding: 18px 20px; }
    .section-heading { margin-bottom: 12px; }
    .score-row { padding: 7px 10px; }
}

@media (max-width: 850px) {
    .landing-page { overflow: auto; }
    .landing-shell { min-height: 100dvh; grid-template-columns: 1fr; align-items: start; padding: 20px 0; }
    .welcome-card { max-height: none; overflow: visible; }
    .scoreboard-card { width: 100%; max-height: min(70dvh, 680px); }
    .game-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .live-stats { grid-column: 1 / -1; order: 3; }
    .header-actions { justify-self: end; }
    .game-board { overflow-x: auto; padding-bottom: 24px; }
    .result-columns { grid-template-columns: 1fr; }
    .final-highscore .score-list-scroll { max-height: 38vh; }
}

@media (max-width: 540px) {
    :root {
        --card-w: clamp(39px, 12.2vw, 48px);
        --card-gap: clamp(4px, 1.25vw, 5px);
        --rank-size: 15px;
        --center-suit-size: 28px;
    }
    .landing-shell { width: min(calc(100% - 20px), 1120px); }
    .welcome-card, .scoreboard-card { border-radius: 20px; padding: 24px; }
    .scoreboard-card { max-height: 68dvh; }
    .result-modal { padding: 20px; }
    .result-columns { gap: 14px; margin: 18px 0; }
    .personal-result, .final-highscore { padding: 16px; }
    .personal-result > strong { font-size: 3rem; }
    .final-highscore .score-list-scroll { max-height: 30vh; }
    .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .result-actions .button { width: 100%; }
    .game-shell { padding: 7px; }
    .game-header { padding: 7px 8px; }
    .top-row, .tableau { min-width: 0; width: 100%; }
    .pile-count { right: -4px; bottom: -4px; min-width: 20px; height: 20px; font-size: .64rem; }
    .game-player { display: flex; }
    .live-stats > div { min-width: 0; flex: 1; padding: 5px; }
    .live-stats { width: 100%; }
    .header-actions .button { min-height: 32px; padding: 5px 8px; font-size: .8rem; }
}

@media (max-height: 720px) and (min-width: 851px) {
    :root { --card-w: clamp(58px, min(6.6vw, 10.2vh), 84px); }
    .game-board { padding-top: 10px; }
    .tableau { margin-top: 13px; }
}

/* Resultatvindue og separat all-time-highscore. */
.alltime-link {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 14px;
    color: var(--gold);
    font-weight: 800;
    text-underline-offset: 3px;
}
.alltime-link:hover { color: #ffe59d; }

.modal-backdrop {
    padding: clamp(8px, 2vh, 18px);
}
.result-modal {
    width: min(760px, 100%);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, auto) auto auto;
    gap: clamp(9px, 1.7vh, 15px);
    padding: clamp(16px, 2.8vw, 28px);
}
.result-modal > h2 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
}
.result-columns {
    grid-template-columns: minmax(150px, .62fr) minmax(0, 1.38fr);
    gap: 14px;
    margin: 0;
    min-height: 0;
}
.personal-result,
.final-highscore {
    border-radius: 16px;
    padding: 16px;
}
.personal-result > strong {
    margin: 6px 0;
    font-size: clamp(3rem, 8vw, 4.4rem);
}
.personal-result p { margin-bottom: 0; }
.final-highscore h3 { margin-bottom: 8px; }
.final-highscore .score-list-scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}
.final-highscore .score-list { gap: 6px; }
.final-highscore .score-row { padding: 8px 10px; }
.result-alltime-link { margin-top: 9px; font-size: .9rem; }
.result-actions .button { min-width: 130px; }

.alltime-page { min-height: 100dvh; }
.alltime-shell {
    width: min(900px, calc(100% - 24px));
    margin: 0 auto;
    padding: clamp(14px, 4vh, 40px) 0;
}
.alltime-card {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 26px;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    padding: clamp(20px, 4vw, 40px);
}
.alltime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.alltime-header h1 { margin-bottom: .45rem; font-size: clamp(2rem, 5vw, 3.5rem); }
.alltime-header p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); }
.alltime-score-list { gap: 7px; }
.score-row-detailed {
    grid-template-columns: 42px minmax(0, 1fr) auto 72px;
}
.score-row-detailed .score-meta {
    color: var(--muted);
    font-size: .85rem;
    white-space: nowrap;
}
.score-row-detailed > strong { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 850px) {
    .result-columns { grid-template-columns: minmax(135px, .58fr) minmax(0, 1.42fr); }
}

@media (max-width: 540px) {
    .result-modal {
        max-height: calc(100dvh - 10px);
        gap: 7px;
        padding: 12px;
    }
    .result-columns { grid-template-columns: 1fr; gap: 7px; }
    .personal-result {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 9px 11px;
    }
    .personal-result span { grid-column: 1; }
    .personal-result > strong {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0;
        font-size: 2.7rem;
    }
    .personal-result p { grid-column: 1; margin: 2px 0 0; }
    .final-highscore { padding: 9px 11px; }
    .final-highscore h3 { margin-bottom: 5px; font-size: 1rem; }
    .final-highscore .score-list { gap: 4px; }
    .final-highscore .score-row { padding: 6px 8px; border-radius: 9px; }
    .result-alltime-link { margin-top: 6px; font-size: .82rem; }
    .result-actions { gap: 7px; }
    .result-actions .button { min-width: 0; min-height: 39px; padding: 8px 10px; }

    .alltime-shell { width: min(100% - 14px, 900px); padding: 7px 0; }
    .alltime-card { border-radius: 18px; padding: 16px 12px; }
    .alltime-header { align-items: flex-start; flex-direction: column; margin-bottom: 16px; }
    .alltime-header .button { width: 100%; }
    .score-row-detailed {
        grid-template-columns: 30px minmax(0, 1fr) 58px;
        gap: 6px;
        padding: 9px 8px;
    }
    .score-row-detailed .score-meta { display: none; }
}

/* Resultatets Top-liste, faste handlingsknapper og kompakte mobilkort. */
.result-modal {
    width: min(760px, calc(100vw - 12px));
    height: min(610px, calc(100dvh - 12px));
    max-height: calc(100dvh - 12px);
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.result-columns {
    min-height: 0;
    overflow: hidden;
}
.final-highscore {
    min-height: 0;
    overflow: hidden;
}
.final-highscore .score-list-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 4px;
}
.result-footer {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 auto;
    gap: 9px;
    padding-top: 2px;
    background: var(--panel);
}
.result-actions {
    flex: 0 0 auto;
}

/* På mobil og lave vinduer vises kun rang i hjørnet og ét kulørikon i midten. */
@media (max-width: 700px), (max-height: 620px) {
    .playing-card.face-up .card-corner.top span,
    .playing-card.face-up .card-corner.bottom {
        display: none;
    }
    .playing-card.face-up .card-corner.top {
        left: 8%;
        top: 6%;
        display: block;
        line-height: 1;
    }
    .playing-card.face-up .card-center {
        opacity: 1;
    }
}

@media (max-width: 540px) {
    .modal-backdrop {
        padding: 4px;
    }
    .result-modal {
        width: calc(100vw - 8px);
        height: calc(100dvh - 8px);
        max-height: calc(100dvh - 8px);
        border-radius: 16px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 6px;
        padding: 10px;
    }
    .result-modal > h2 {
        font-size: clamp(1.35rem, 7vw, 1.75rem);
    }
    .result-columns {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 6px;
    }
    .personal-result {
        padding: 7px 10px;
    }
    .personal-result > strong {
        font-size: clamp(2.1rem, 12vw, 2.65rem);
    }
    .personal-result p {
        font-size: .82rem;
    }
    .final-highscore {
        padding: 7px 9px;
    }
    .final-highscore h3 {
        margin-bottom: 4px;
        font-size: .94rem;
    }
    .final-highscore .score-list-scroll {
        overflow-y: auto;
    }
    .final-highscore .score-list {
        gap: 3px;
    }
    .final-highscore .score-row {
        min-height: 31px;
        padding: 4px 7px;
        font-size: .84rem;
    }
    .result-alltime-link {
        margin-top: 4px;
        font-size: .76rem;
    }
    .result-footer {
        gap: 5px;
    }
    .result-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .result-actions form,
    .result-actions .button {
        width: 100%;
    }
    .result-actions .button {
        min-height: 36px;
        padding: 7px 9px;
        font-size: .86rem;
    }
}

@media (max-height: 560px) {
    .result-modal {
        gap: 5px;
        padding-block: 8px;
    }
    .personal-result {
        padding-block: 6px;
    }
    .final-highscore .score-row {
        min-height: 28px;
        padding-block: 3px;
    }
    .result-actions .button {
        min-height: 33px;
        padding-block: 5px;
    }
}


@media (max-height: 420px) {
    .result-footer {
        gap: 0;
    }
}

/* Personlig rekord, Husk mig og installerbar PWA. */
.name-form .remember-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: var(--muted);
    cursor: pointer;
    font-size: .92rem;
    font-weight: 650;
}
.name-form .remember-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    appearance: auto;
    margin: 0;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    padding: 0;
    accent-color: var(--gold);
    box-shadow: none;
}
.landing-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 12px;
}
.install-app-button[hidden] { display: none; }
.install-app-button { min-height: 38px; padding: 8px 13px; font-size: .88rem; }
.forget-form { margin: 0; }
.text-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 5px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.text-button:hover { color: var(--text); }
.personal-result p { line-height: 1.4; }

@media (display-mode: standalone) {
    body { min-height: 100dvh; }
    .game-shell {
        padding-top: max(7px, env(safe-area-inset-top));
        padding-right: max(7px, env(safe-area-inset-right));
        padding-bottom: max(7px, env(safe-area-inset-bottom));
        padding-left: max(7px, env(safe-area-inset-left));
    }
    .landing-shell,
    .alltime-shell {
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
}

@media (min-width: 851px) and (max-height: 700px) {
    .landing-tools { margin-top: 8px; }
    .name-form .remember-option { font-size: .86rem; }
}

@media (max-width: 540px) {
    .landing-tools { align-items: stretch; flex-direction: column; }
    .install-app-button { width: 100%; }
    .forget-form { text-align: center; }
    .personal-result p { max-width: 64vw; }
}

/* Sværhedsvalg, centrerede værktøjer og highscore-layout. */
.score-list-scroll {
    padding: 3px 5px 3px 3px;
}
.scoreboard-card .score-list-scroll {
    flex: 0 1 auto;
}
.alltime-link {
    align-self: center;
    justify-content: center;
    text-align: center;
}
.player-options {
    display: grid;
    justify-items: center;
    gap: 9px;
    margin-top: 2px;
}
.name-form .remember-option {
    width: auto;
    margin-inline: auto;
    justify-content: center;
    text-align: center;
}
.hard-mode-option span {
    color: #ffe59d;
    font-weight: 800;
}
.landing-tools {
    justify-content: center;
    text-align: center;
}
.forget-form {
    text-align: center;
}
.hard-badge {
    flex: 0 0 auto;
    margin-left: 9px;
    border: 1px solid rgba(242,199,92,.42);
    border-radius: 999px;
    background: rgba(242,199,92,.16);
    color: #ffe59d;
    padding: 3px 7px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.redeal-counter {
    right: -7px;
    bottom: -7px;
    min-width: 26px;
    border: 1px solid rgba(242,199,92,.4);
    background: #102b24;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
    .scoreboard-card .score-list-scroll {
        width: 100%;
    }
    .landing-tools {
        align-items: center;
    }
    .install-app-button {
        width: min(100%, 260px);
    }
    .hard-badge {
        margin-left: 6px;
        padding: 2px 6px;
        font-size: .6rem;
    }
    .redeal-counter {
        right: -4px;
        bottom: -4px;
        min-width: 21px;
        height: 21px;
        font-size: .62rem;
    }
}

/* Spilvælger, fælles highscore og kompakte spillerindstillinger. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.game-selector {
    display: grid;
    grid-template-columns: repeat(5, minmax(48px, 62px));
    justify-content: start;
    gap: 10px;
    margin-bottom: clamp(16px, 3vh, 24px);
}
.game-choice {
    position: relative;
    text-decoration: none;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.game-choice:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); }
.game-choice:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.game-choice.is-selected {
    border-color: rgba(242,199,92,.75);
    background: rgba(242,199,92,.17);
    box-shadow: 0 0 0 3px rgba(242,199,92,.1);
}
.game-choice.is-coming-soon::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.42);
}
.game-choice-icon {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1;
}
.game-choice:nth-child(2) .game-choice-icon { font-family: inherit; font-size: clamp(1.25rem, 2.6vw, 1.75rem); }

.player-options {
    width: min(100%, 430px);
    grid-template-columns: repeat(2, minmax(0, 185px));
    justify-content: center;
    justify-items: stretch;
    column-gap: 34px;
    margin: 5px auto 2px;
}
.player-options .remember-option {
    width: 100%;
    margin: 0;
    text-align: left;
}
.player-options .remember-option:first-child { justify-content: flex-start; }
.player-options .hard-mode-option { justify-content: flex-end; }

.score-row .game-label {
    color: var(--muted);
    font-size: .82em;
    font-weight: 650;
}
.score-row.is-vip .game-label { color: rgba(255,229,157,.78); }

@media (min-width: 851px) and (max-height: 700px) {
    .game-selector {
        grid-template-columns: repeat(5, 48px);
        gap: 8px;
        margin-bottom: 12px;
    }
    .game-choice { border-radius: 13px; }
    .welcome-card .intro { font-size: .96rem; line-height: 1.4; }
}

@media (max-width: 540px) {
    .game-selector {
        grid-template-columns: repeat(5, minmax(40px, 1fr));
        width: 100%;
        gap: 8px;
        margin-bottom: 18px;
    }
    .game-choice { max-width: 64px; width: 100%; justify-self: center; border-radius: 14px; }
    .player-options {
        width: min(100%, 260px);
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
    }
    .player-options .remember-option,
    .player-options .remember-option:first-child,
    .player-options .hard-mode-option {
        width: auto;
        justify-content: center;
        text-align: center;
    }
    .score-row .player { white-space: normal; line-height: 1.15; }
}

/* Pausefunktion og førstegangsvisning fra about.html. */
.pause-modal,
.about-modal {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
}

.pause-backdrop { z-index: 1150; }
.pause-modal {
    width: min(390px, calc(100vw - 24px));
    padding: clamp(24px, 5vw, 40px);
    text-align: center;
}
.pause-modal h2 { margin: 10px 0 8px; font-size: clamp(1.45rem, 5vw, 2rem); }
.pause-modal p { margin-bottom: 22px; color: var(--muted); }
.pause-modal .button { width: 100%; }
.pause-icon {
    width: 58px;
    height: 58px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242,199,92,.42);
    border-radius: 18px;
    background: rgba(242,199,92,.13);
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: 950;
    letter-spacing: -.2em;
    padding-right: .2em;
}

.about-backdrop { z-index: 1400; }
.about-modal {
    width: min(700px, calc(100vw - 24px));
    max-height: min(90dvh, 760px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    padding: clamp(20px, 4vw, 38px);
    overflow: hidden;
}
.about-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
}
.about-copy h2 {
    margin-bottom: 14px;
    font-size: clamp(1.65rem, 5vw, 2.65rem);
    line-height: 1.05;
}
.about-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.about-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}
.about-highlights section {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;
    background: rgba(255,255,255,.055);
    padding: 14px;
}
.about-highlights strong { display: block; margin-bottom: 7px; color: var(--text); }
.about-highlights span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.about-note { margin-bottom: 0; }
.about-close-button { width: min(100%, 240px); justify-self: center; }

@media (max-width: 540px) {
    .header-actions { gap: 4px; }
    .header-actions .button { padding-inline: 7px; }
    .about-modal {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 18px;
        gap: 12px;
        padding: 18px 16px;
    }
    .about-highlights { grid-template-columns: 1fr; margin: 16px 0; }
    .about-highlights section { padding: 11px 12px; }
}

/* Layout til Edderkop-kabale, FreeCell og Pyramide-kabale. */
.game-board-spider {
    --card-w: clamp(48px, min(6.2vw, 9.4vh), 78px);
    --card-gap: clamp(3px, .62vw, 8px);
}
.spider-top-row,
.freecell-top-row,
.pyramid-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.spider-completed {
    display: grid;
    grid-template-columns: repeat(8, minmax(34px, 1fr));
    width: min(620px, calc(100% - var(--card-w) - 28px));
    gap: clamp(4px, .65vw, 8px);
}
.spider-run-slot {
    min-width: 0;
    aspect-ratio: .72;
    display: grid;
    place-items: center;
    border: 2px dashed rgba(255,255,255,.14);
    border-radius: 10px;
    color: rgba(255,255,255,.25);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.68rem, 1.1vw, .9rem);
    font-weight: 800;
}
.spider-run-slot.is-complete {
    border-style: solid;
    border-color: rgba(242,199,92,.48);
    background: linear-gradient(145deg, rgba(242,199,92,.2), rgba(255,255,255,.06));
    color: #ffe59d;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.spider-tableau {
    display: grid;
    grid-template-columns: repeat(10, var(--card-w));
    justify-content: space-between;
    gap: var(--card-gap);
    width: 100%;
    margin-top: 14px;
}
.spider-pile,
.freecell-pile {
    position: relative;
    min-width: var(--card-w);
    min-height: var(--card-h);
    border-radius: calc(var(--card-w) * .09);
}
.spider-pile:empty,
.freecell-pile:empty {
    border: 2px dashed rgba(255,255,255,.14);
}
.spider-pile > .playing-card,
.freecell-pile > .playing-card {
    position: absolute;
    left: 0;
}

.game-board-freecell {
    --card-w: clamp(52px, min(7.4vw, 9.8vh), 88px);
    --card-gap: clamp(4px, .8vw, 10px);
}
.freecell-cells,
.freecell-foundations {
    display: grid;
    grid-template-columns: repeat(4, var(--card-w));
    gap: var(--card-gap);
}
.freecell-slot {
    background: rgba(255,255,255,.018);
}
.freecell-tableau {
    display: grid;
    grid-template-columns: repeat(8, var(--card-w));
    justify-content: space-between;
    gap: var(--card-gap);
    width: 100%;
    margin-top: 16px;
}

.game-board-pyramid {
    --card-w: clamp(58px, min(7.2vw, 10vh), 88px);
}
.pyramid-stock-area {
    display: flex;
    gap: var(--card-gap);
}
.pyramid-progress {
    min-width: 120px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    padding: 10px 14px;
    text-align: center;
}
.pyramid-progress span {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pyramid-progress strong {
    display: block;
    margin-top: 3px;
    color: var(--gold);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}
.pyramid-tableau {
    position: relative;
    width: min(100%, 940px);
    min-height: var(--card-h);
    margin: 6px auto 0;
}
.pyramid-tableau > .playing-card {
    position: absolute;
}
.playing-card.is-covered {
    cursor: default;
    filter: brightness(.82);
    pointer-events: none;
}

@media (max-width: 700px) {
    .game-board-spider {
        --card-w: clamp(29px, 8.6vw, 44px);
        --card-gap: 2px;
        --rank-size: 13px;
        --center-suit-size: 20px;
    }
    .spider-completed {
        grid-template-columns: repeat(8, 1fr);
        width: calc(100% - var(--card-w) - 10px);
        gap: 2px;
    }
    .spider-run-slot {
        border-width: 1px;
        border-radius: 5px;
        font-size: .52rem;
    }
    .spider-tableau { margin-top: 9px; }

    .game-board-freecell {
        --card-w: clamp(34px, 10.6vw, 48px);
        --card-gap: 2px;
        --rank-size: 14px;
        --center-suit-size: 23px;
    }
    .freecell-top-row { gap: 6px; }
    .freecell-cells,
    .freecell-foundations { gap: 2px; }
    .freecell-tableau { margin-top: 10px; }

    .game-board-pyramid {
        --card-w: clamp(42px, 13.5vw, 58px);
        --rank-size: 14px;
        --center-suit-size: 24px;
    }
    .pyramid-progress { min-width: 86px; padding: 7px 9px; }
    .pyramid-progress strong { font-size: .95rem; }
}

@media (max-width: 420px) {
    .game-board { padding-top: 9px; }
    .game-board-spider {
        --card-w: clamp(27px, 8.45vw, 35px);
        --rank-size: 12px;
        --center-suit-size: 18px;
    }
    .spider-top-row { gap: 7px; }
    .spider-run-slot span { transform: scale(.86); }

    .game-board-freecell {
        --card-w: clamp(32px, 10.45vw, 43px);
        --rank-size: 13px;
        --center-suit-size: 20px;
    }
    .game-board-pyramid {
        --card-w: clamp(39px, 13vw, 52px);
    }
}


/* Tetris-layout. */
.game-board-tetris {
    padding-top: 10px;
    padding-bottom: 10px;
}
.tetris-layout {
    display: grid;
    grid-template-columns: minmax(230px, min(430px, calc((100dvh - 105px) / 2))) minmax(150px, 190px);
    justify-content: center;
    align-items: start;
    gap: clamp(14px, 2.5vw, 30px);
}
.tetris-board-frame {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(0,0,0,.45), rgba(0,30,24,.55));
    box-shadow: 0 20px 65px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.025);
    padding: clamp(5px, .8vw, 8px);
}
.tetris-board {
    display: grid;
    grid-template-columns: repeat(var(--tetris-cols, 10), 1fr);
    grid-template-rows: repeat(var(--tetris-rows, 20), 1fr);
    width: 100%;
    aspect-ratio: 1 / 2;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0,11,10,.86);
    touch-action: none;
}
.tetris-cell {
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(255,255,255,.035);
    background: rgba(255,255,255,.012);
}
.tetris-cell.is-filled {
    border-color: rgba(255,255,255,.28);
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.22), inset -2px -2px 0 rgba(0,0,0,.28);
}
.tetris-cell.is-ghost {
    border: 1px dashed rgba(255,255,255,.34);
    background: rgba(255,255,255,.045);
}
.tetris-cell.piece-I { background: #4fd8e7; }
.tetris-cell.piece-J { background: #5a78e8; }
.tetris-cell.piece-L { background: #ef9a43; }
.tetris-cell.piece-O { background: #edcf4e; }
.tetris-cell.piece-S { background: #68c96d; }
.tetris-cell.piece-T { background: #a96bd5; }
.tetris-cell.piece-Z { background: #e35f69; }
.tetris-side-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}
.tetris-next-card,
.tetris-mini-stats,
.tetris-controls {
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    padding: 11px;
}
.tetris-next-card > span,
.tetris-mini-stats span {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tetris-next {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: min(100%, 112px);
    aspect-ratio: 1;
    margin: 8px auto 0;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0,12,10,.55);
}
.tetris-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
}
.tetris-mini-stats strong {
    display: block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}
.tetris-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.tetris-controls button {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    touch-action: manipulation;
    user-select: none;
}
.tetris-controls button:active { transform: translateY(1px); background: rgba(255,255,255,.17); }
.tetris-controls button:first-child { grid-column: 2; }
.tetris-drop-button { grid-column: 1 / -1; font-size: .82rem !important; text-transform: uppercase; letter-spacing: .06em; }
.tetris-key-help {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 700px) {
    .game-board-tetris { padding-top: 7px; }
    .tetris-layout {
        grid-template-columns: minmax(0, 1fr) clamp(96px, 29vw, 126px);
        gap: 7px;
        width: min(100%, 470px);
        margin: 0 auto;
    }
    .tetris-board-frame { border-radius: 12px; padding: 4px; }
    .tetris-board { border-radius: 7px; }
    .tetris-side-panel { gap: 6px; }
    .tetris-next-card,
    .tetris-mini-stats,
    .tetris-controls { border-radius: 10px; padding: 6px; }
    .tetris-next { width: min(100%, 82px); margin-top: 4px; }
    .tetris-mini-stats { grid-template-columns: 1fr; gap: 5px; }
    .tetris-mini-stats strong { margin-top: 1px; font-size: .95rem; }
    .tetris-controls { gap: 4px; }
    .tetris-controls button { min-height: 34px; border-radius: 8px; font-size: 1rem; }
    .tetris-key-help { display: none; }
}

@media (max-width: 370px) {
    .game-selector { gap: 5px; }
    .game-choice { border-radius: 11px; }
    .tetris-layout { grid-template-columns: minmax(0, 1fr) 88px; gap: 5px; }
    .tetris-next-card > span,
    .tetris-mini-stats span { font-size: .56rem; }
    .tetris-controls button { min-height: 30px; padding: 1px; }
}


/* Solid kortbagside, spil-hjælp og swipe-styring i Tetris. */
.playing-card.face-down {
    background: #14578f;
}
.card-back-art {
    inset: 5%;
    width: 90%;
    height: 90%;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: inherit;
    background: rgba(255, 255, 255, .035);
}
.card-back-art::after {
    width: 78%;
    height: 78%;
    background-image: url('../images/logo.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.help-backdrop {
    z-index: 1250;
}
.help-modal {
    width: min(620px, calc(100vw - 24px));
    max-height: min(88dvh, 720px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0,0,0,.42);
    padding: clamp(20px, 4vw, 34px);
}
.help-copy {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
}
.help-copy h2 {
    margin: 4px 0 10px;
    font-size: clamp(1.55rem, 4vw, 2.35rem);
    line-height: 1.08;
}
.help-intro {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.55;
}
.help-rules {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 1.35rem;
}
.help-rules li {
    padding-left: 4px;
    color: var(--text);
    line-height: 1.45;
}
.help-rules li::marker {
    color: var(--gold);
    font-weight: 900;
}
.help-controls {
    margin-top: 18px;
    border: 1px solid rgba(242,199,92,.24);
    border-radius: 14px;
    background: rgba(242,199,92,.08);
    padding: 13px 15px;
}
.help-controls h3 {
    margin: 0 0 6px;
    color: var(--gold);
    font-size: .95rem;
}
.help-controls p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}
.help-modal > .button {
    width: 100%;
}
.pause-modal {
    display: grid;
    gap: 10px;
}
.pause-modal p {
    margin-bottom: 12px;
}
.pause-modal #pauseHelpButton {
    margin-top: 0;
}

.tetris-next-card > span {
    text-align: center;
}
.tetris-board {
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
}
.tetris-board:active {
    cursor: grabbing;
}
.tetris-controls,
.tetris-key-help {
    display: none !important;
}

@media (max-width: 850px) {
    .header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 540px) {
    .header-actions {
        max-width: 190px;
    }
    .header-actions .button {
        flex: 1 1 auto;
    }
    .help-modal {
        width: calc(100vw - 10px);
        max-height: calc(100dvh - 10px);
        border-radius: 17px;
        gap: 10px;
        padding: 15px 13px;
    }
    .help-copy h2 {
        font-size: 1.5rem;
    }
    .help-rules {
        gap: 7px;
        font-size: .91rem;
    }
    .help-controls {
        margin-top: 13px;
        padding: 10px 11px;
        font-size: .88rem;
    }
}

@media (max-height: 520px) {
    .help-modal {
        max-height: calc(100dvh - 8px);
        padding-block: 12px;
    }
}

/* Syv spil, Rekorder, sværhedsgrader, Sudoku og Mines. */
.game-selector {
    grid-template-columns: repeat(7, minmax(42px, 58px));
    gap: 8px;
}

.player-options {
    width: min(100%, 520px);
    grid-template-columns: minmax(110px, .65fr) minmax(250px, 1.35fr);
    align-items: center;
    column-gap: 20px;
}

.difficulty-options {
    min-width: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    border: 0;
    margin: 0;
    padding: 0;
}

.difficulty-choice {
    position: relative;
    cursor: pointer;
}
.difficulty-choice[hidden] { display: none !important; }
.difficulty-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.difficulty-choice span {
    display: grid;
    place-items: center;
    min-width: 72px;
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: var(--muted);
    padding: 6px 12px;
    font-size: .84rem;
    font-weight: 800;
    transition: border-color .15s, background .15s, color .15s;
}
.difficulty-choice input:checked + span {
    border-color: rgba(242,199,92,.68);
    background: rgba(242,199,92,.17);
    color: #ffe59d;
}
.difficulty-choice input:focus-visible + span {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.easy-badge {
    border-color: rgba(111,213,174,.46);
    background: rgba(111,213,174,.15);
    color: #bff8df;
}

.scoreboard-card .score-list-scroll {
    min-height: 0;
    overflow-y: auto;
}
.record-row .rank {
    font-size: 1.05rem;
    text-align: center;
}
.record-row .player {
    white-space: normal;
    line-height: 1.18;
}
.record-game {
    color: var(--text);
    font-weight: 850;
}
.record-row.is-vip .record-game { color: #ffe59d; }

.game-board-sudoku,
.game-board-mines {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.sudoku-status {
    display: flex;
    align-items: baseline;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    padding: 6px 14px;
    color: var(--muted);
    font-size: .82rem;
}
.sudoku-status strong { color: var(--gold); font-size: 1rem; }
.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: min(92vw, 620px, calc(100dvh - 230px));
    aspect-ratio: 1;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.72);
    border-radius: 12px;
    background: rgba(0,16,13,.78);
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
}
.sudoku-cell {
    min-width: 0;
    min-height: 0;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.035);
    color: #aeeed7;
    cursor: pointer;
    font: inherit;
    font-size: clamp(1rem, 3.4vw, 1.8rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background .12s, color .12s, transform .12s;
}
.sudoku-cell:nth-child(3n) { border-right-width: 3px; border-right-color: rgba(255,255,255,.55); }
.sudoku-cell:nth-child(9n) { border-right: 0; }
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom-width: 3px; border-bottom-color: rgba(255,255,255,.55); }
.sudoku-cell:nth-child(n+73) { border-bottom: 0; }
.sudoku-cell.is-given { background: rgba(255,255,255,.085); color: #fff; }
.sudoku-cell.is-related { background: rgba(80,187,151,.09); }
.sudoku-cell.is-selected { background: rgba(242,199,92,.24); box-shadow: inset 0 0 0 3px rgba(242,199,92,.7); }
.sudoku-cell.is-entered { color: var(--gold); }
.sudoku-cell.is-wrong { animation: sudokuWrong .38s ease; background: rgba(255,105,118,.28); }
@keyframes sudokuWrong { 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }

.sudoku-keypad {
    display: grid;
    grid-template-columns: repeat(9, minmax(34px, 52px));
    justify-content: center;
    gap: 6px;
    width: min(100%, 620px);
}
.sudoku-keypad button {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(255,255,255,.075);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}
.sudoku-keypad button:hover { background: rgba(255,255,255,.13); }

.mines-toolbar {
    width: min(96vw, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.mines-toolbar > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    padding: 7px 14px;
    color: var(--muted);
    font-size: .82rem;
}
.mines-toolbar strong { color: var(--gold); font-size: 1.05rem; }
.mines-flag-button.is-active {
    border-color: rgba(242,199,92,.65);
    background: rgba(242,199,92,.18);
    color: #ffe59d;
}
.mines-board {
    display: grid;
    grid-template-columns: repeat(var(--mines-cols), 1fr);
    grid-template-rows: repeat(var(--mines-rows), 1fr);
    width: min(94vw, 700px, calc(100dvh - 190px));
    aspect-ratio: var(--mines-cols) / var(--mines-rows);
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.22);
    border-radius: 14px;
    background: rgba(0,18,14,.76);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    touch-action: manipulation;
}
.mine-cell {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
    color: white;
    cursor: pointer;
    padding: 0;
    font: inherit;
    font-size: clamp(.62rem, 2.2vw, 1.1rem);
    font-weight: 950;
    line-height: 1;
}
.mine-cell:hover { background: rgba(255,255,255,.18); }
.mine-cell.is-revealed { background: rgba(255,255,255,.025); box-shadow: none; cursor: default; }
.mine-cell.is-flagged { color: var(--gold); background: rgba(242,199,92,.12); }
.mine-cell.is-mine { color: #ff7d88; background: rgba(255,83,99,.2); }
.mine-cell.near-1 { color: #72b8ff; }
.mine-cell.near-2 { color: #70d69a; }
.mine-cell.near-3 { color: #ff7d88; }
.mine-cell.near-4 { color: #b99cff; }
.mine-cell.near-5 { color: #ffb36a; }
.mine-cell.near-6 { color: #63d8d8; }
.mine-cell.near-7 { color: #f1f1f1; }
.mine-cell.near-8 { color: #c5c5c5; }

@media (min-width: 851px) and (max-height: 700px) {
    .game-selector { grid-template-columns: repeat(7, 44px); gap: 6px; }
    .sudoku-grid { width: min(76vh, 520px); }
    .sudoku-keypad button { min-height: 34px; }
}

@media (max-width: 620px) {
    .game-selector {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
    }
    .game-choice { max-width: 52px; border-radius: 11px; }
    .game-choice-icon { font-size: 1.32rem; }
    .player-options {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .player-options .remember-option,
    .player-options .remember-option:first-child {
        justify-content: center;
    }
    .difficulty-options { width: 100%; gap: 5px; }
    .difficulty-choice { flex: 1 1 0; }
    .difficulty-choice span { min-width: 0; min-height: 36px; padding-inline: 8px; }
    .sudoku-grid { width: min(96vw, calc(100dvh - 230px)); border-width: 2px; border-radius: 8px; }
    .sudoku-keypad { grid-template-columns: repeat(9, 1fr); gap: 3px; width: 96vw; }
    .sudoku-keypad button { min-height: 38px; border-radius: 7px; padding: 0; }
    .mines-board { width: min(96vw, calc(100dvh - 205px)); border-width: 3px; border-radius: 9px; }
    .mines-toolbar { width: 96vw; gap: 7px; }
    .mines-toolbar .button { min-height: 34px; padding: 5px 10px; }
}

/* Sværhedsgrad ved Top 5-rækkerne i resultatvinduet. */
.score-mode {
    display: inline-block;
    margin-left: .45em;
    color: var(--muted);
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}
.score-row.is-vip .score-mode { color: rgba(255,229,157,.72); }

/* Medlemsrude, tilmelding og automatisk afslutning. */
.identity-options {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.identity-options .remember-option { flex: 0 0 auto; }
.join-open-button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(242,199,92,.24);
    border-radius: 50%;
    background: rgba(242,199,92,.07);
    color: var(--gold);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.join-open-button:hover,
.join-open-button:focus-visible {
    background: rgba(242,199,92,.14);
    border-color: rgba(242,199,92,.48);
    transform: translateY(-1px);
    outline: none;
}
.join-open-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.name-form input[readonly] {
    border-color: rgba(242,199,92,.36);
    background: rgba(242,199,92,.08);
    color: #ffe59d;
}

.join-backdrop { z-index: 1350; }
.join-modal {
    position: relative;
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0,0,0,.42);
    padding: clamp(22px, 5vw, 38px);
}
.join-modal h2 { margin: 0 38px 2px 0; font-size: clamp(1.6rem, 5vw, 2.3rem); }
.join-intro { margin: 0 0 8px; color: var(--muted); line-height: 1.55; }
.join-modal label { font-weight: 800; }
.join-modal input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 13px;
    outline: none;
    background: rgba(255,255,255,.085);
    color: var(--text);
    padding: 13px 14px;
}
.join-modal input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242,199,92,.13); }
.join-close {
    position: absolute;
    top: 13px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    color: var(--text);
    cursor: pointer;
    font-size: 1.45rem;
    line-height: 1;
}
.join-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 7px; }
.join-login-button { justify-self: center; margin-top: 2px; color: var(--gold); }
.join-code-panel {
    display: grid;
    gap: 9px;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 14px;
}
.join-code-panel[hidden] { display: none; }
.join-code-panel input { text-align: center; font-size: 1.35rem; letter-spacing: .28em; font-variant-numeric: tabular-nums; }
.join-status { min-height: 1.5em; margin: 4px 0 0; color: #cfe8dc; text-align: center; line-height: 1.4; }
.join-status.is-error { color: #ffd2d7; }
.join-modal.is-busy { cursor: progress; }

.auto-finish-button[hidden] { display: none; }
.auto-finish-button { white-space: nowrap; }
.game-page.auto-finishing .game-board { pointer-events: none; }

@media (max-width: 540px) {
    .identity-options { justify-content: center; flex-wrap: wrap; }
    .join-modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 18px; padding: 20px 16px; }
    .join-actions { gap: 7px; }
    .join-actions .button { padding-inline: 10px; }
    .auto-finish-button { order: 5; width: 100%; }
}

/* Version 31: stabil forside uden indvendig scrollbar og med faste rekordrækker. */
@media (min-width: 851px) {
    .landing-shell {
        width: min(1280px, calc(100% - 40px));
        grid-template-columns: minmax(0, 1.12fr) minmax(440px, .88fr);
        gap: clamp(20px, 2.4vw, 30px);
        padding: clamp(16px, 3vh, 28px) 0;
    }
    .welcome-card,
    .scoreboard-card {
        height: min(86dvh, 700px);
        max-height: min(86dvh, 700px);
    }
    .welcome-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(28px, 3.2vw, 44px);
    }
    .scoreboard-card {
        padding: clamp(20px, 2.3vw, 27px);
    }
}

.welcome-card .game-selector {
    grid-template-columns: repeat(7, 52px);
    justify-content: start;
    gap: 9px;
    margin-bottom: 18px;
}
.welcome-card .game-choice {
    width: 52px;
    max-width: none;
    border-radius: 14px;
}
.welcome-card .game-choice-icon {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    font-size: 1.55rem;
    line-height: 1;
}
.welcome-card h1 {
    margin-bottom: .55rem;
    font-size: clamp(2.7rem, 4.4vw, 3.75rem);
    line-height: 1;
}
.welcome-card .intro {
    min-height: 3em;
    max-width: 650px;
    margin-bottom: 0;
    font-size: clamp(.94rem, 1.2vw, 1.04rem);
    line-height: 1.5;
}
.welcome-card .name-form {
    gap: 11px;
    margin-top: 22px;
}
.welcome-card .name-form > label {
    font-size: .98rem;
}
.welcome-card .name-form input[type="text"],
.welcome-card .name-form input[name="player_name"] {
    min-height: 54px;
    border-radius: 15px;
    padding-inline: 17px;
}
.welcome-card .player-options {
    width: 100%;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 14px;
    margin: 5px 0 3px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    padding: 9px 11px;
}
.welcome-card .identity-options {
    min-width: 0;
    min-height: 38px;
}
.welcome-card .identity-options .remember-option {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
}
.welcome-card .difficulty-options {
    justify-content: flex-end;
}
.welcome-card .difficulty-choice span {
    min-width: 66px;
    min-height: 36px;
    padding: 5px 10px;
    font-size: .8rem;
}
.welcome-card #startGameButton,
.welcome-card .name-form > .button-primary {
    min-height: 52px;
    border-radius: 15px;
    font-size: 1.02rem;
}

.scoreboard-card .section-heading {
    min-height: 42px;
    margin-bottom: 12px;
}
.scoreboard-card .section-heading h2 {
    margin: 0;
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    line-height: 1;
}
.scoreboard-card .section-heading > span {
    display: grid;
    min-width: 40px;
    min-height: 40px;
    place-items: center;
    font-size: 1.9rem;
    line-height: 1;
}
.scoreboard-card .score-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 1px 2px 1px 0;
    scrollbar-gutter: auto;
}
.scoreboard-card .score-list {
    grid-auto-rows: 54px;
    gap: 7px;
}
.scoreboard-card .record-row {
    height: 54px;
    min-height: 54px;
    grid-template-columns: 30px minmax(0, 1fr) 58px;
    column-gap: 9px;
    border-radius: 14px;
    padding: 0 13px;
}
.scoreboard-card .record-row .rank,
.scoreboard-card .record-row .player,
.scoreboard-card .record-row > strong {
    display: flex;
    height: 100%;
    min-height: 0;
    align-items: center;
    line-height: 1;
}
.scoreboard-card .record-row .rank {
    justify-content: center;
    font-size: .9rem;
}
.scoreboard-card .record-row .player {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: clamp(.78rem, .92vw, .88rem);
}
.scoreboard-card .record-row .record-game {
    font-weight: 800;
}
.scoreboard-card .record-row > strong {
    justify-content: flex-end;
    min-width: 0;
    text-align: right;
    font-size: clamp(.8rem, .9vw, .88rem);
    font-variant-numeric: tabular-nums;
}
.scoreboard-card .alltime-link {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 12px;
    font-size: .9rem;
}

@media (min-width: 851px) and (max-height: 700px) {
    .landing-shell {
        padding: 10px 0;
    }
    .welcome-card,
    .scoreboard-card {
        height: calc(100dvh - 20px);
        max-height: calc(100dvh - 20px);
    }
    .welcome-card {
        padding: 20px 28px;
    }
    .welcome-card .game-selector {
        grid-template-columns: repeat(7, 43px);
        gap: 7px;
        margin-bottom: 11px;
    }
    .welcome-card .game-choice {
        width: 43px;
    }
    .welcome-card h1 {
        font-size: 2.65rem;
    }
    .welcome-card .intro {
        min-height: 0;
        font-size: .88rem;
        line-height: 1.34;
    }
    .welcome-card .name-form {
        margin-top: 12px;
        gap: 7px;
    }
    .welcome-card .name-form input[type="text"],
    .welcome-card .name-form input[name="player_name"] {
        min-height: 44px;
    }
    .welcome-card .player-options {
        padding-block: 6px;
    }
    .welcome-card #startGameButton,
    .welcome-card .name-form > .button-primary {
        min-height: 44px;
    }
    .scoreboard-card {
        padding: 16px 20px;
    }
    .scoreboard-card .section-heading {
        min-height: 36px;
        margin-bottom: 8px;
    }
    .scoreboard-card .score-list {
        grid-auto-rows: 46px;
        gap: 5px;
    }
    .scoreboard-card .record-row {
        height: 46px;
        min-height: 46px;
    }
    .scoreboard-card .alltime-link {
        padding-top: 8px;
        font-size: .82rem;
    }
}

@media (max-width: 850px) {
    .landing-shell {
        width: min(100% - 18px, 760px);
        gap: 14px;
        padding: 10px 0 18px;
    }
    .welcome-card,
    .scoreboard-card {
        height: auto;
        max-height: none;
    }
    .scoreboard-card .score-list-scroll {
        flex: none;
        overflow: visible;
        padding-right: 0;
    }
    .scoreboard-card .score-list {
        grid-auto-rows: 52px;
    }
    .scoreboard-card .record-row {
        height: 52px;
        min-height: 52px;
    }
}

@media (max-width: 620px) {
    .welcome-card .game-selector {
        width: 100%;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 15px;
    }
    .welcome-card .game-choice {
        width: 100%;
        max-width: 50px;
        justify-self: center;
        border-radius: 11px;
    }
    .welcome-card .game-choice-icon {
        font-size: 1.25rem;
    }
    .welcome-card .intro {
        min-height: 0;
    }
    .welcome-card .player-options {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }
    .welcome-card .identity-options,
    .welcome-card .difficulty-options {
        justify-content: center;
    }
}

@media (max-width: 540px) {
    .welcome-card,
    .scoreboard-card {
        padding: 19px 16px;
    }
    .welcome-card h1 {
        font-size: 2.55rem;
    }
    .welcome-card .name-form {
        margin-top: 18px;
    }
    .scoreboard-card .section-heading {
        min-height: 36px;
        margin-bottom: 9px;
    }
    .scoreboard-card .section-heading h2 {
        font-size: 1.65rem;
    }
    .scoreboard-card .section-heading > span {
        min-width: 34px;
        min-height: 34px;
        font-size: 1.55rem;
    }
    .scoreboard-card .score-list {
        grid-auto-rows: 49px;
        gap: 6px;
    }
    .scoreboard-card .record-row {
        height: 49px;
        min-height: 49px;
        grid-template-columns: 23px minmax(0, 1fr) 45px;
        column-gap: 7px;
        border-radius: 12px;
        padding: 0 9px;
    }
    .scoreboard-card .record-row .rank {
        font-size: .78rem;
    }
    .scoreboard-card .record-row .player {
        font-size: .76rem;
    }
    .scoreboard-card .record-row > strong {
        font-size: .78rem;
    }
    .scoreboard-card .alltime-link {
        margin-top: 10px;
        padding-top: 10px;
        font-size: .84rem;
    }
}