/* Ravle UI refresh ---------------------------------------------------------
   An isolated visual layer over the stable game DOM and interaction model.
   No gameplay state or behavior is defined here. */

:root {
    --bg: #eeeae2;
    --surface: #fbfaf6;
    --surface-soft: #f1eee7;
    --surface-raised: #fffefa;
    --text: #26322f;
    --muted: #68736f;
    --border: #d7d8d0;
    --tile: #fffef9;
    --tile-text: #26322f;
    --board: #d8ddd4;
    --primary: #47765d;
    --primary-hover: #37634c;
    --primary-soft: #deebe2;
    --focus: #1f6feb;
    --danger: #a74842;
    --danger-soft: #f8e8e4;
    --correct: #4c8a59;
    --correct-shadow: #356740;
    --present: #c28b28;
    --present-shadow: #8d641c;
    --absent: #69736f;
    --absent-shadow: #49514e;
    --radius-xs: 0.55rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.4rem;
    --radius-xl: 1.9rem;
    --radius-pill: 999px;
    --shadow-quiet: 0 1px 2px rgb(42 50 47 / 5%), 0 8px 24px rgb(42 50 47 / 7%);
    --shadow-raised: 0 2px 3px rgb(42 50 47 / 7%), 0 18px 48px rgb(42 50 47 / 11%);
    --shadow-tile: 0 3px 0 rgb(57 67 63 / 18%), 0 8px 17px rgb(57 67 63 / 9%);
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-spring: cubic-bezier(.2, .9, .25, 1.15);
}

body.dark-theme {
    --bg: #171c1b;
    --surface: #222a28;
    --surface-soft: #2a3431;
    --surface-raised: #252e2c;
    --text: #f2f2eb;
    --muted: #abb5b0;
    --border: #3c4945;
    --tile: #34403c;
    --tile-text: #f8f7f0;
    --board: #202825;
    --primary: #78b18e;
    --primary-hover: #91c4a3;
    --primary-soft: #294536;
    --focus: #8ab4ff;
    --danger: #f2aaa2;
    --danger-soft: #512e2d;
    --correct: #518e60;
    --correct-shadow: #315a3c;
    --present: #b98229;
    --present-shadow: #79571e;
    --absent: #59645f;
    --absent-shadow: #3a4440;
    --shadow-quiet: 0 1px 2px rgb(0 0 0 / 16%), 0 10px 28px rgb(0 0 0 / 17%);
    --shadow-raised: 0 2px 3px rgb(0 0 0 / 22%), 0 22px 56px rgb(0 0 0 / 28%);
    --shadow-tile: 0 3px 0 rgb(0 0 0 / 28%), 0 8px 18px rgb(0 0 0 / 18%);
}

body.pastel-theme {
    --bg: #efdfb9;
    --surface: #fbefd4;
    --surface-soft: #efdfce;
    --surface-raised: #fff3da;
    --text: #463b43;
    --muted: #756970;
    --border: #ddc9b2;
    --tile: #fff6e4;
    --tile-text: #493d45;
    --board: #e5cfbf;
    --primary: #7b628f;
    --primary-hover: #674f7b;
    --primary-soft: #eaddec;
    --focus: #614579;
    --danger: #a64e63;
    --danger-soft: #f7dfe5;
    --correct: #4d8068;
    --correct-shadow: #365d4a;
    --present: #b87676;
    --present-shadow: #815153;
    --absent: #69697a;
    --absent-shadow: #484855;
    --shadow-quiet: 0 2px 3px rgb(91 67 77 / 6%), 0 10px 26px rgb(91 67 77 / 9%);
    --shadow-raised: 0 3px 4px rgb(91 67 77 / 8%), 0 22px 54px rgb(91 67 77 / 14%);
    --shadow-tile: 0 3px 0 rgb(105 82 95 / 18%), 0 8px 17px rgb(105 82 95 / 10%);
}

html {
    background: var(--bg);
}

body {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--primary), transparent 89%), transparent 30rem),
        radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--present), transparent 93%), transparent 26rem),
        var(--bg);
    font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.008em;
}

body::before,
body::after,
body.pastel-theme::before,
body.pastel-theme::after {
    display: none;
    animation: none;
}

button,
.tile,
.archive-item,
.history-item,
.theme-option-card {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible + .slider,
.tile:focus-visible,
.archive-item:focus-visible,
.history-item:focus-visible,
.skip-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus), transparent 8%);
    outline-offset: 3px;
}

/* App frame and quiet global navigation ---------------------------------- */

.app-container {
    position: relative;
    width: min(100%, 96rem);
    min-height: 100dvh;
    padding: max(1.15rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.site-header {
    position: relative;
    z-index: 30;
    display: flex;
    width: min(100%, 82rem);
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
    padding: 0;
    pointer-events: none;
}

.brand-row,
.header-buttons {
    pointer-events: auto;
}

.brand-row {
    display: flex;
    min-height: 3.55rem;
    align-items: center;
    padding: 0.52rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 22%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface), transparent 5%);
    box-shadow: var(--shadow-quiet);
    backdrop-filter: blur(16px) saturate(1.05);
}

.brand-logo {
    display: block;
    width: auto;
    height: clamp(2.15rem, 3.3vw, 2.45rem);
    object-fit: contain;
    image-rendering: auto;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.32rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 22%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface), transparent 5%);
    box-shadow: var(--shadow-quiet);
    backdrop-filter: blur(16px) saturate(1.05);
}

.header-btn,
.header-btn:hover,
.header-btn:focus-visible {
    display: inline-flex;
    width: auto;
    min-width: 3.1rem;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.42rem 0.72rem;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 0.78rem;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
    transform: none;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 100ms ease;
}

.header-btn::before {
    display: grid;
    width: 1.72rem;
    height: 1.72rem;
    flex: 0 0 auto;
    place-items: center;
    margin: 0;
    border-radius: 0.55rem;
    background: var(--surface-soft);
    color: var(--primary);
    font-size: 0.76rem;
    transition: background-color 140ms ease, transform 140ms var(--ease-out);
}

.header-btn:hover,
.header-btn:focus-visible {
    border-color: color-mix(in srgb, var(--primary), transparent 78%);
    background: var(--primary-soft);
    color: var(--text);
}

.header-btn:hover::before {
    background: color-mix(in srgb, var(--surface), var(--primary-soft) 50%);
    transform: translateY(-1px);
}

.header-btn:active {
    transform: translateY(1px);
}

/* Board-first workspace --------------------------------------------------- */

.game-shell {
    position: relative;
    display: grid;
    width: min(100%, 76rem);
    min-height: calc(100dvh - 7rem);
    grid-template-columns: minmax(10.5rem, 13rem) minmax(22rem, 36rem) minmax(10.5rem, 13rem);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    justify-content: center;
    column-gap: clamp(1.2rem, 3vw, 3rem);
    row-gap: 1rem;
    margin: -3.8rem auto 0;
    padding: 6rem 0 2rem;
}

.game-shell::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(62rem, 82vw);
    aspect-ratio: 1.55;
    border: 1px solid color-mix(in srgb, var(--border), transparent 70%);
    border-radius: 45%;
    background: radial-gradient(circle, color-mix(in srgb, var(--surface), transparent 30%), transparent 68%);
    content: "";
    pointer-events: none;
    transform: translate(-50%, -42%);
}

.game-shell > * {
    animation: workspace-arrive 380ms var(--ease-out) both;
}

.game-shell > :nth-child(2) { animation-delay: 35ms; }
.game-shell > :nth-child(3) { animation-delay: 70ms; }
.game-shell > :nth-child(4) { animation-delay: 105ms; }

@keyframes workspace-arrive {
    from { opacity: 0; transform: translateY(0.65rem); }
    to { opacity: 1; transform: translateY(0); }
}

.game-info {
    display: contents;
}

.category-card {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 0.82rem 10.8rem 0.8rem 1.1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface), transparent 3%);
    box-shadow: var(--shadow-quiet);
    color: var(--muted);
    text-align: left;
}

.category-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 0.28rem;
    border-radius: inherit;
    background: linear-gradient(var(--correct), var(--present));
    content: "";
}

.category-label {
    margin: 0;
    color: var(--primary);
    font-size: 0.61rem;
    font-weight: 820;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.category-title {
    min-height: 1.5rem;
    margin: 0.08rem 0 0;
    overflow: hidden;
    color: var(--text);
    font-family: ui-rounded, "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    font-weight: 790;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-status {
    min-height: 1rem;
    justify-content: flex-start;
    margin-top: 0.14rem;
    color: var(--muted);
    font-size: 0.67rem;
}

.size-switch {
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    gap: 0.2rem;
    margin-right: 0.62rem;
    padding: 0.24rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    box-shadow: inset 0 1px 2px rgb(34 42 39 / 5%);
}

.size-btn {
    min-width: 4.45rem;
    min-height: 2.45rem;
    padding: 0.35rem 0.62rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.size-btn.active {
    background: var(--surface-raised);
    box-shadow: 0 1px 2px rgb(31 40 36 / 8%), 0 4px 12px rgb(31 40 36 / 8%);
    color: var(--primary);
}

.size-btn:active:not(:disabled) {
    transform: scale(.97);
}

.session-stats {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.58rem;
    width: 100%;
}

.stats-row {
    display: contents;
}

.current-stat-box,
.modal-stats-grid .stat-box {
    position: relative;
    display: grid;
    min-height: 4.75rem;
    align-content: center;
    justify-items: center;
    gap: 0.08rem;
    padding: 0.72rem 0.4rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface), transparent 2%);
    box-shadow: var(--shadow-quiet);
    text-align: center;
}

.current-stat-box::after {
    position: absolute;
    top: -1.1rem;
    right: -1rem;
    width: 4.2rem;
    height: 4.2rem;
    border: 0.72rem solid color-mix(in srgb, var(--primary), transparent 88%);
    border-radius: 50%;
    content: "";
}

.current-stat-box:hover {
    transform: none;
}

.stat-value {
    color: var(--text);
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    font-size: 1.62rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    color: var(--muted);
    font-size: 0.61rem;
    font-weight: 780;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.timer-bar {
    display: grid;
    width: 100%;
    min-height: 4.75rem;
    align-content: center;
    justify-items: center;
    gap: 0.08rem;
    margin: 0;
    padding: 0.72rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface), transparent 2%);
    box-shadow: var(--shadow-quiet);
}

.timer-bar::before {
    color: var(--muted);
    content: "Active time";
    font-size: 0.61rem;
    font-weight: 780;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.time-display {
    min-width: 0;
    color: var(--text);
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    font-size: 1.08rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: center;
}

.board-container {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    display: flex;
    width: 100%;
    justify-content: center;
}

.board-container::before {
    inset: -4%;
    border-radius: 28%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary), transparent 86%), transparent 69%);
    opacity: 0.8;
    transition: opacity 180ms ease;
}

.board-container:hover::before {
    opacity: 1;
    transform: none;
}

.game-board {
    --board-max: 36rem;
    contain: layout paint;
    gap: clamp(0.38rem, 1vw, 0.58rem);
    padding: clamp(0.55rem, 1.3vw, 0.78rem);
    border: 1px solid color-mix(in srgb, var(--primary), var(--border) 82%);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--board), white 7%), var(--board));
    box-shadow:
        inset 0 2px 5px rgb(26 36 32 / 12%),
        0 2px 2px rgb(26 36 32 / 7%),
        0 24px 58px rgb(43 54 49 / 14%);
}

body.dark-theme .game-board {
    background: linear-gradient(145deg, color-mix(in srgb, var(--board), white 3%), var(--board));
}

.tile {
    min-width: 0;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--border), white 38%);
    border-radius: clamp(0.65rem, 1.6vw, 0.92rem);
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--tile), white 11%), var(--tile));
    box-shadow: var(--shadow-tile);
    color: var(--tile-text);
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.78rem);
    font-weight: 820;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        box-shadow 130ms ease,
        transform 90ms ease;
}

.tile.movable {
    cursor: pointer;
}

.tile.movable:hover {
    border-color: color-mix(in srgb, var(--primary), white 32%);
    box-shadow:
        0 3px 0 rgb(43 52 48 / 17%),
        0 0 0 3px color-mix(in srgb, var(--primary), transparent 80%),
        0 11px 22px rgb(43 52 48 / 11%);
    transform: translateY(-2px);
}

.tile.movable:active {
    box-shadow: 0 1px 0 rgb(43 52 48 / 18%), 0 4px 9px rgb(43 52 48 / 9%);
    transform: translateY(2px) scale(.99);
}

.tile.correct,
.example-tile.correct {
    border-color: color-mix(in srgb, var(--correct), white 20%);
    background: linear-gradient(150deg, color-mix(in srgb, var(--correct), white 9%), var(--correct));
    box-shadow: 0 3px 0 var(--correct-shadow), 0 8px 17px color-mix(in srgb, var(--correct), transparent 78%);
}

.tile.present,
.example-tile.present {
    border-color: color-mix(in srgb, var(--present), white 20%);
    background: linear-gradient(150deg, color-mix(in srgb, var(--present), white 9%), var(--present));
    box-shadow: 0 3px 0 var(--present-shadow), 0 8px 17px color-mix(in srgb, var(--present), transparent 80%);
}

.tile.absent,
.example-tile.absent {
    border-color: color-mix(in srgb, var(--absent), white 15%);
    background: linear-gradient(150deg, color-mix(in srgb, var(--absent), white 7%), var(--absent));
    box-shadow: 0 3px 0 var(--absent-shadow);
}

.tile.empty {
    border: 1px dashed color-mix(in srgb, var(--muted), transparent 80%);
    background: color-mix(in srgb, var(--surface), transparent 92%);
    box-shadow: inset 0 1px 2px rgb(38 48 44 / 6%);
}

.game-board.is-loading::after,
.game-board.is-error::after {
    border-radius: inherit;
    background: color-mix(in srgb, var(--surface), transparent 8%);
    backdrop-filter: blur(8px);
    font-weight: 720;
}

.pause-overlay {
    width: min(100%, 36rem);
    border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface-raised), transparent 5%);
    box-shadow: var(--shadow-raised);
    backdrop-filter: blur(14px);
}

.pause-overlay h3 {
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
}

.game-controls {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    display: grid;
    width: 100%;
    gap: 0.7rem;
    padding: 0.82rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface), transparent 2%);
    box-shadow: var(--shadow-quiet);
}

.game-controls::before {
    color: var(--muted);
    content: "Puzzle controls";
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-align: center;
    text-transform: uppercase;
}

.primary-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.primary-actions #pause-btn,
.game-controls .primary-btn {
    width: 100%;
    min-height: 3.25rem;
    border-radius: 0.9rem;
}

.primary-actions #pause-btn {
    order: 2;
    border-color: color-mix(in srgb, var(--primary), transparent 68%);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.game-controls .primary-btn {
    order: 1;
    border: 1px solid color-mix(in srgb, var(--primary), black 5%);
    background: var(--primary);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--primary), black 25%), 0 10px 22px color-mix(in srgb, var(--primary), transparent 77%);
    color: #fff;
}

.game-controls .primary-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.primary-actions #pause-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary), transparent 45%);
    background: color-mix(in srgb, var(--primary-soft), var(--surface) 24%);
    transform: translateY(-1px);
}

.primary-actions #pause-btn:active:not(:disabled),
.game-controls .primary-btn:active:not(:disabled) {
    transform: translateY(2px);
}

.game-controls .action-row {
    display: flex;
    justify-content: center;
}

.game-controls .danger-btn {
    min-height: 2.4rem;
    padding: 0.35rem 0.6rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--danger);
    font-size: 0.69rem;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--danger), transparent 65%);
    text-underline-offset: 0.2rem;
}

.sync-status {
    min-height: 1rem;
    margin: 0;
    font-size: 0.65rem;
}

/* Tactile shared controls ------------------------------------------------- */

.primary-btn,
.secondary-btn,
.pill-btn,
.stats-tab,
.global-scope-btn,
.history-filter,
.footer-link {
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease,
        transform 90ms ease,
        opacity 140ms ease;
}

.primary-btn:active:not(:disabled),
.secondary-btn:active:not(:disabled),
.pill-btn:active:not(:disabled),
.stats-tab:active,
.global-scope-btn:active,
.history-filter:active {
    transform: translateY(1px) scale(.99);
}

button:disabled {
    filter: saturate(.65);
    opacity: .48;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
    display: flex;
    width: min(100%, 82rem);
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: color-mix(in srgb, var(--surface), transparent 12%);
    box-shadow: 0 -10px 30px rgb(37 46 42 / 4%);
    color: var(--muted);
}

.footer-brand {
    gap: 0.55rem;
}

.footer-logo {
    width: 5.7rem;
    height: 1.35rem;
}

.footer-brand strong {
    font-size: 0.78rem;
    font-weight: 750;
}

.footer-links {
    gap: 0.15rem;
}

.footer-link {
    min-height: 2.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 0.7rem;
    text-decoration: none;
}

.footer-link:hover,
.footer-link:focus-visible {
    background: var(--surface-soft);
    color: var(--primary);
}

/* Secondary views: drawers and sheets ------------------------------------ */

.modal-overlay {
    z-index: 100;
    padding: 0;
    background: rgb(20 28 25 / 48%);
    backdrop-filter: blur(8px) saturate(.8);
}

.modal-content {
    scrollbar-color: color-mix(in srgb, var(--muted), transparent 45%) transparent;
}

.modal-content > h2 {
    margin: 0 3rem 1rem;
    font-family: ui-rounded, "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
    font-size: 1.55rem;
    font-weight: 780;
    letter-spacing: -0.025em;
}

.panel-intro {
    max-width: 38rem;
    margin: -0.45rem auto 1rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.close-btn {
    top: 0.75rem;
    right: 0.75rem;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 1.5rem;
}

.close-btn:hover,
.close-btn:focus-visible {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
    transform: rotate(3deg);
}

#settings-overlay,
#modal-overlay,
#history-overlay {
    align-items: stretch;
    justify-content: flex-end;
}

#settings-overlay .modal-content,
#modal-overlay .modal-content,
#history-overlay .modal-content {
    width: min(94vw, 36rem);
    max-width: none;
    max-height: 100dvh;
    padding: max(2.1rem, env(safe-area-inset-top)) 1.4rem max(1.4rem, env(safe-area-inset-bottom));
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: -24px 0 70px rgb(21 30 26 / 20%);
    animation: drawer-enter 260ms var(--ease-out) both;
}

#modal-overlay .modal-content {
    width: min(96vw, 76rem);
}

#modal-overlay .modal-content::before,
#history-overlay .modal-content::before {
    display: none;
}

#tutorial-overlay {
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#tutorial-overlay .modal-content {
    width: min(100%, 48rem);
    max-height: calc(100dvh - 2rem);
    padding: 2rem clamp(1.1rem, 4vw, 2.2rem) 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised);
    animation: modal-enter 220ms var(--ease-spring) both;
}

#archive-overlay {
    align-items: stretch;
    justify-content: flex-start;
}

#archive-overlay .archive-content {
    width: min(94vw, 29rem);
    max-height: 100dvh;
    padding: max(2.2rem, env(safe-area-inset-top)) 1.15rem max(1.2rem, env(safe-area-inset-bottom));
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    background: var(--surface-raised);
    box-shadow: 24px 0 70px rgb(21 30 26 / 20%);
    animation: archive-enter 260ms var(--ease-out) both;
}

@keyframes drawer-enter {
    from { opacity: .35; transform: translateX(2rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes archive-enter {
    from { opacity: .35; transform: translateX(-2rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes modal-enter {
    from { opacity: 0; transform: translateY(.65rem) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Settings --------------------------------------------------------------- */

.settings-list {
    gap: 0.85rem;
}

.player-identity {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary), transparent 68%);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary), transparent 84%), transparent 8rem),
        linear-gradient(145deg, var(--primary-soft), var(--surface));
    box-shadow: var(--shadow-quiet);
}

.player-identity::after {
    display: none;
}

.player-identity-copy strong {
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    font-size: 1.12rem;
}

.identity-reroll-btn {
    border-color: color-mix(in srgb, var(--primary), transparent 65%);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface), transparent 12%);
}

.theme-picker {
    padding: 0;
    border: 0;
}

.theme-picker legend {
    margin-bottom: 0.55rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 820;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.theme-options {
    gap: 0.55rem;
}

.theme-option-card {
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgb(40 50 46 / 4%);
}

.theme-option input:checked + .theme-option-card {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 82%);
    transform: translateY(-1px);
}

.setting-item {
    min-height: 4rem;
    padding: 0.72rem 0.15rem;
    border-bottom-color: color-mix(in srgb, var(--border), transparent 35%);
}

.privacy-note {
    padding: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

/* Statistics: summary first, details second ------------------------------ */

.stats-tabs {
    position: sticky;
    z-index: 3;
    top: -2.1rem;
    width: min(100%, 31rem);
    margin: 0 auto 1rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-raised), transparent 5%);
    box-shadow: var(--shadow-quiet);
    backdrop-filter: blur(12px);
}

.stats-tab {
    min-height: 2.65rem;
    border-radius: var(--radius-pill);
    color: var(--muted);
}

.stats-tab.active {
    background: var(--primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary), transparent 72%);
    color: #fff;
}

.current-puzzle-section,
.stats-group-panel,
.overall-user-section {
    border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-soft), transparent 40%);
    box-shadow: none;
}

.current-puzzle-section {
    padding: 1rem;
    border-color: color-mix(in srgb, var(--primary), transparent 70%);
    box-shadow: inset 0.24rem 0 0 var(--primary);
}

.stats-group-heading {
    margin-bottom: 0.8rem;
}

.stats-group-heading > span,
.stats-group-heading > div > span {
    color: var(--primary);
    font-size: 0.59rem;
    letter-spacing: 0.1em;
}

.stats-group-heading h3 {
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    font-size: 1.08rem;
}

.current-game-placeholder {
    padding: 0.9rem;
    border-color: color-mix(in srgb, var(--border), transparent 18%);
    background: color-mix(in srgb, var(--surface), transparent 42%);
}

#modal-overlay .performance-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.perf-card {
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(34 43 39 / 4%);
}

.standing-pill {
    border-color: color-mix(in srgb, var(--primary), transparent 66%);
    background: var(--primary-soft);
    color: var(--primary);
}

body.dark-theme .standing-pill {
    border-color: color-mix(in srgb, var(--primary), transparent 50%);
    background: var(--primary-soft);
    color: var(--text);
}

body.dark-theme .standing-pill > span:last-child {
    color: var(--muted);
}

.comparison-track,
.solve-rate-track {
    background: color-mix(in srgb, var(--border), transparent 28%);
}

.global-stats-layout {
    grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr);
    gap: 0.85rem;
}

.stats-group-panel {
    padding: 1rem;
}

.community-section.stats-group-panel,
.global-leaderboard-section {
    border-top: 1px solid color-mix(in srgb, var(--border), transparent 12%);
}

.community-stats-grid {
    gap: 0.42rem;
}

.community-stat {
    border-color: color-mix(in srgb, var(--border), transparent 15%);
    background: var(--surface);
}

.community-stat.accent {
    border-color: color-mix(in srgb, var(--primary), transparent 70%);
    background: var(--primary-soft);
}

.global-scope-switch {
    border-color: color-mix(in srgb, var(--border), transparent 12%);
    background: var(--surface);
}

.global-scope-btn.active {
    background: var(--primary-soft);
    box-shadow: none;
    color: var(--primary);
}

.selected-puzzle-card {
    border-color: color-mix(in srgb, var(--present), transparent 62%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--present), var(--surface) 90%);
}

.live-stats-indicator i {
    animation: none;
}

.streak-gem {
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--present), var(--text) 10%);
    border-radius: 0.18rem;
    background: color-mix(in srgb, var(--present), transparent 72%);
    transform: rotate(45deg);
}

.metric-leaderboards {
    gap: 0.6rem;
}

.leaderboard-panel {
    border-color: color-mix(in srgb, var(--border), transparent 12%);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.leaderboard-row {
    border-radius: var(--radius-sm);
}

.leaderboard-row.is-you {
    border-color: color-mix(in srgb, var(--primary), transparent 60%);
    background: var(--primary-soft);
    box-shadow: inset 0.2rem 0 0 var(--primary);
}

.overall-user-section {
    margin-top: 0.9rem;
    padding: 1rem;
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface-soft), transparent 15%), var(--surface));
}

.lifetime-visuals,
.size-lifetime-grid article,
.modal-stats-grid .stat-box,
.history-summary > div {
    border-color: color-mix(in srgb, var(--border), transparent 12%);
    background: var(--surface);
}

.modal-stats-grid .stat-box {
    min-height: 4.5rem;
    align-content: center;
    justify-items: center;
    padding: 0.65rem;
    text-align: center;
}

.history-launch-btn {
    border-color: color-mix(in srgb, var(--primary), transparent 62%);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--text);
}

.history-launch-btn:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 84%);
    transform: translateY(-1px);
}

.history-launch-btn small {
    color: var(--muted);
}

.history-launch-icon {
    width: auto;
    min-width: 2.8rem;
    height: 1.8rem;
    padding-inline: 0.58rem;
    border: 1px solid color-mix(in srgb, var(--primary), transparent 70%);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface), transparent 22%);
    color: var(--primary);
    font-size: 0.62rem;
    font-weight: 820;
}

/* Archive, history, and tutorial ----------------------------------------- */

.archive-groups {
    gap: 0.9rem;
}

.archive-size-section {
    border-color: color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-soft), transparent 32%);
}

.archive-size-section.size-4,
.archive-size-section.size-5 {
    border-top-width: 1px;
}

.archive-size-heading {
    background: color-mix(in srgb, var(--surface), transparent 10%);
}

.archive-item {
    min-height: 4rem;
    border-color: color-mix(in srgb, var(--border), transparent 12%);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(33 42 38 / 4%);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}

.archive-item:hover {
    border-color: color-mix(in srgb, var(--primary), transparent 42%);
    box-shadow: var(--shadow-quiet);
    transform: translateY(-1px);
}

.archive-item:active {
    transform: translateY(1px);
}

.archive-item.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 82%);
}

.archive-item.is-solved {
    background: linear-gradient(110deg, color-mix(in srgb, var(--correct), transparent 88%), var(--surface) 55%);
}

.archive-item.is-progress {
    background: linear-gradient(110deg, color-mix(in srgb, var(--primary), transparent 91%), var(--surface) 55%);
}

.archive-item.is-revealed {
    background: linear-gradient(110deg, color-mix(in srgb, var(--present), transparent 91%), var(--surface) 55%);
}

.history-summary {
    gap: 0.45rem;
}

.history-summary > div {
    border-radius: var(--radius-md);
}

.history-filters {
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
}

.history-filter {
    border-radius: var(--radius-pill);
}

.history-filter.active {
    background: var(--primary);
    color: #fff;
}

.history-item {
    border-color: color-mix(in srgb, var(--border), transparent 12%);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.tutorial-lead {
    color: var(--muted);
    font-size: 0.91rem;
}

.tutorial-flow {
    gap: 0.6rem;
}

.tutorial-flow li {
    border-color: color-mix(in srgb, var(--border), transparent 12%);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.tutorial-flow li > span {
    background: var(--primary);
}

.tutorial-demo-section {
    border-color: color-mix(in srgb, var(--primary), transparent 72%);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary-soft), var(--surface) 62%);
}

.tutorial-mini-board {
    box-shadow: 0 10px 24px rgb(36 46 42 / 9%);
}

.tutorial-key > div,
.tutorial-reminder,
.tutorial-final-notes > div {
    border-color: color-mix(in srgb, var(--border), transparent 12%);
    background: var(--surface);
}

/* Tablet: collapse the control rail, preserve the board ------------------ */

@media (max-width: 66rem) {
    .site-header {
        width: min(100%, 52rem);
    }

    .header-btn {
        width: 3rem;
        min-width: 3rem;
        padding-inline: 0.35rem;
        overflow: hidden;
        font-size: 0;
    }

    .game-shell {
        width: min(100%, 52rem);
        grid-template-columns: minmax(8rem, 10rem) minmax(21rem, 34rem);
        grid-template-rows: auto auto auto;
        column-gap: clamp(1rem, 3vw, 2rem);
    }

    .game-controls {
        grid-column: 2;
        grid-row: 3;
        width: min(100%, 29rem);
        justify-self: center;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .game-controls::before {
        display: none;
    }

    .primary-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .primary-actions #pause-btn {
        order: 1;
    }

    .game-controls .primary-btn {
        order: 2;
    }

    .site-footer {
        width: min(100%, 52rem);
    }
}

/* Mobile: an intentional vertical play sequence -------------------------- */

@media (max-width: 47.99rem) {
    .app-container {
        width: 100%;
        padding: max(0.65rem, env(safe-area-inset-top)) max(0.7rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.7rem, env(safe-area-inset-left));
    }

    .site-header {
        position: sticky;
        top: max(0.45rem, env(safe-area-inset-top));
        width: 100%;
        min-height: 3.25rem;
        align-items: center;
    }

    .brand-row {
        min-height: 3rem;
        padding: 0.4rem 0.5rem;
        border-radius: 0.88rem;
    }

    .brand-logo {
        width: clamp(6.3rem, 28vw, 7.2rem);
        height: 1.8rem;
    }

    .header-buttons {
        gap: 0.12rem;
        padding: 0.22rem;
        border-radius: 0.88rem;
    }

    .header-btn,
    .header-btn:hover,
    .header-btn:focus-visible {
        width: 2.55rem;
        min-width: 2.55rem;
        min-height: 2.55rem;
        padding: 0.2rem;
        border-radius: 0.7rem;
        font-size: 0;
    }

    .header-btn::before {
        width: 1.65rem;
        height: 1.65rem;
    }

    .game-shell {
        display: grid;
        width: min(100%, 35rem);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto;
        row-gap: 0.65rem;
        margin: 0 auto;
        padding: 0.85rem 0 1rem;
    }

    .game-shell::before {
        display: none;
    }

    .category-card {
        grid-column: 1;
        grid-row: 1;
        min-height: 4.8rem;
        padding: 0.72rem 9.35rem 0.65rem 0.9rem;
        border-radius: var(--radius-md);
    }

    .category-title {
        font-size: clamp(1rem, 4.5vw, 1.18rem);
    }

    .game-status {
        font-size: 0.64rem;
    }

    .size-switch {
        grid-column: 1;
        grid-row: 1;
        margin-right: 0.45rem;
    }

    .size-btn {
        min-width: 3.8rem;
        min-height: 2.3rem;
        padding-inline: 0.45rem;
        font-size: 0.68rem;
    }

    .board-container {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }

    .game-board {
        --board-max: min(100%, 33rem);
        width: min(100%, var(--board-max));
        gap: clamp(0.28rem, 1.55vw, 0.48rem);
        padding: clamp(0.42rem, 1.8vw, 0.6rem);
        border-radius: clamp(1.1rem, 4vw, 1.55rem);
    }

    .game-board.board-size-4 {
        gap: clamp(0.38rem, 1.8vw, 0.58rem);
        padding: clamp(0.5rem, 2vw, 0.68rem);
    }

    .tile {
        border-radius: clamp(0.5rem, 2.6vw, 0.78rem);
        font-size: clamp(1.12rem, 6vw, 1.6rem);
    }

    .game-board.board-size-4 .tile {
        font-size: clamp(1.28rem, 7.5vw, 1.85rem);
    }

    .stats-row {
        grid-column: 1;
        grid-row: 3;
        align-self: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin: 0;
    }

    .current-stat-box {
        min-height: 3.8rem;
        justify-items: center;
        padding: 0.55rem;
        border-radius: var(--radius-md);
        text-align: center;
    }

    .current-stat-box::after {
        display: none;
    }

    .current-stat-box .stat-value {
        font-size: 1.32rem;
    }

    .timer-bar {
        grid-column: 1;
        grid-row: 4;
        min-height: 3.35rem;
        margin: 0;
        padding: 0.55rem 0.8rem;
        border-radius: var(--radius-md);
    }

    .game-controls {
        grid-column: 1;
        grid-row: 5;
        width: 100%;
        gap: 0.4rem;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .game-controls::before {
        display: none;
    }

    .primary-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 0.5rem;
    }

    .primary-actions #pause-btn {
        order: 1;
    }

    .game-controls .primary-btn {
        order: 2;
    }

    .primary-actions #pause-btn,
    .game-controls .primary-btn {
        min-height: 3.2rem;
    }

    .game-controls .danger-btn {
        min-height: 2rem;
    }

    .site-footer {
        width: 100%;
        min-height: auto;
        flex-direction: column;
        gap: 0.65rem;
        padding: 0.9rem 0.75rem max(0.8rem, env(safe-area-inset-bottom));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .footer-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-link {
        min-height: 2.75rem;
    }

    #settings-overlay,
    #modal-overlay,
    #history-overlay,
    #archive-overlay {
        align-items: flex-end;
        justify-content: center;
        padding-top: max(2.75rem, env(safe-area-inset-top));
    }

    #settings-overlay .modal-content,
    #modal-overlay .modal-content,
    #history-overlay .modal-content,
    #archive-overlay .archive-content {
        width: 100%;
        height: calc(100dvh - max(2.75rem, env(safe-area-inset-top)));
        max-height: calc(100dvh - max(2.75rem, env(safe-area-inset-top)));
        padding: 2rem 0.9rem max(1rem, env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -24px 60px rgb(21 30 26 / 22%);
        animation-name: mobile-sheet-enter;
    }

    #settings-overlay .modal-content::before,
    #modal-overlay .modal-content::before,
    #history-overlay .modal-content::before,
    #archive-overlay .archive-content::before {
        position: absolute;
        top: 0.52rem;
        left: 50%;
        display: block;
        width: 3.2rem;
        height: 0.28rem;
        border-radius: var(--radius-pill);
        background: var(--border);
        content: "";
        transform: translateX(-50%);
    }

    #tutorial-overlay {
        align-items: flex-end;
        padding: max(1rem, env(safe-area-inset-top)) 0 0;
    }

    #tutorial-overlay .modal-content {
        width: 100%;
        height: calc(100dvh - max(1rem, env(safe-area-inset-top)));
        max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)));
        padding: 2rem 0.9rem max(1rem, env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation-name: mobile-sheet-enter;
    }

    @keyframes mobile-sheet-enter {
        from { opacity: .5; transform: translateY(2rem); }
        to { opacity: 1; transform: translateY(0); }
    }

    .modal-content > h2 {
        margin-bottom: 0.8rem;
        font-size: 1.38rem;
    }

    .close-btn {
        top: 0.62rem;
        right: 0.62rem;
        width: 2.7rem;
        height: 2.7rem;
    }

    .theme-options,
    .tutorial-flow,
    .tutorial-demo-grid,
    #modal-overlay .performance-cards,
    .global-stats-layout,
    .metric-leaderboards {
        grid-template-columns: 1fr;
    }

    .theme-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .theme-option-card {
        min-height: 6.8rem;
        padding-inline: 0.45rem;
    }

    .player-identity {
        align-items: stretch;
        flex-direction: column;
    }

    .identity-reroll-btn {
        width: 100%;
    }

    .stats-tabs {
        top: -2rem;
    }

    .community-stats-grid,
    .history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-leaderboards {
        gap: 0.7rem;
    }

    .tutorial-flow {
        gap: 0.48rem;
    }

    .tutorial-flow li {
        grid-template-columns: 1.7rem minmax(0, 1fr);
        padding: 0.68rem;
    }

    .tutorial-flow li > span {
        width: 1.7rem;
        height: 1.7rem;
    }
}

@media (max-width: 23.5rem) {
    .app-container {
        padding-inline: max(0.48rem, env(safe-area-inset-left));
    }

    .brand-logo {
        width: 5.9rem;
    }

    .header-btn,
    .header-btn:hover,
    .header-btn:focus-visible {
        width: 2.35rem;
        min-width: 2.35rem;
        min-height: 2.42rem;
    }

    .header-btn::before {
        width: 1.5rem;
        height: 1.5rem;
    }

    .category-card {
        padding-right: 8.3rem;
    }

    .size-btn {
        min-width: 3.35rem;
    }

    .footer-brand strong {
        display: none;
    }
}

/* Keep mixed link and button footer actions on one shared baseline. */
.site-footer .footer-links .footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}

/* Reveal is intentionally compact and follows the clue key it affects. */
.game-controls .daily-clue-key + .action-row {
    justify-content: flex-start;
    margin-top: 0.15rem;
}

.game-controls .daily-clue-key + .action-row .danger-btn {
    width: auto;
    min-height: 2.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--danger), transparent 66%);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--danger-soft), var(--surface-raised) 34%);
    box-shadow: 0 3px 10px rgb(45 35 38 / 6%);
    text-decoration: none;
}

/* Final metric alignment override for every responsive layout. */
.game-controls .current-stat-box {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.game-controls .session-stats .stats-row .current-stat-box:first-child,
.game-controls .session-stats .stats-row .current-stat-box:last-child {
    padding-right: 0.3rem;
    padding-left: 0.3rem;
}

.game-controls .current-stat-box .stat-value,
.game-controls .current-stat-box .stat-label,
.game-controls .timer-bar::before,
.game-controls .time-display {
    display: block;
    width: 100%;
    margin-inline: auto;
    text-align: center;
}

.game-controls .timer-bar {
    align-content: center;
    justify-content: stretch;
    justify-items: center;
    text-align: center;
}

/* Shared-game inspired daily control panel. The board geometry is unchanged. */
.game-controls {
    grid-row: 2 / span 2;
    gap: 0.62rem;
}

.game-controls::before {
    display: none;
}

.game-controls .session-stats {
    position: static;
    display: grid;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: initial;
    gap: 0.45rem;
}

.game-controls .current-stat-box,
.game-controls .timer-bar {
    min-height: 4.25rem;
    padding: 0.55rem 0.3rem;
    border-color: color-mix(in srgb, var(--border), transparent 14%);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    box-shadow: none;
}

.game-controls .current-stat-box .stat-value,
.game-controls .time-display {
    font-size: 1.16rem;
}

.game-controls .primary-actions {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 0.5rem;
}

.game-controls .primary-actions #pause-btn {
    order: 1;
    min-height: 3.25rem;
}

.game-controls .primary-actions .primary-btn {
    order: 2;
    min-height: 3.25rem;
}

.daily-clue-key {
    display: grid;
    gap: 0.48rem;
    margin-top: 0.15rem;
    padding: 0.72rem 0.2rem 0.05rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.66rem;
    line-height: 1.35;
}

.daily-clue-key span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.daily-clue-key i {
    display: block;
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.24rem;
}

.daily-clue-key .correct {
    background: var(--correct);
}

.daily-clue-key .present {
    background: var(--present);
}

.daily-clue-key .absent {
    background: var(--absent);
}

@media (max-width: 61.99rem) {
    .game-controls {
        grid-column: 1;
        grid-row: 3;
        padding: 0.78rem;
        border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
        background: color-mix(in srgb, var(--surface), transparent 2%);
    }

    .game-controls .session-stats {
        grid-column: auto;
        grid-row: auto;
    }

    .daily-clue-key {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }
}

@media (max-width: 34rem) {
    .game-controls {
        padding: 0.65rem;
    }

    .game-controls .current-stat-box,
    .game-controls .timer-bar {
        min-height: 4rem;
    }

    .daily-clue-key {
        grid-template-columns: 1fr;
    }
}

/* Stillness and access ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Player accounts */
.identity-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

#profile-overlay .profile-content {
    width: min(34rem, calc(100vw - 2rem));
}

.profile-summary,
.profile-sync-card,
.profile-privacy {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
}

.profile-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
}

.profile-identity-copy {
    display: grid;
    min-width: 0;
    gap: .25rem;
}

.profile-identity-copy strong {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    line-height: 1.1;
}

.profile-identity-copy small,
.profile-sync-card p,
.profile-privacy p {
    color: var(--muted);
    line-height: 1.5;
}

.profile-identity-copy #profile-session-status {
    font-size: .75rem;
    font-weight: 700;
}

.profile-summary .identity-reroll-btn:disabled {
    border-color: var(--border);
    background: var(--surface);
    color: var(--muted);
    opacity: 1;
}

.profile-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
    padding: .3rem;
    margin-bottom: 1rem;
    border-radius: .9rem;
    background: var(--surface-soft);
}

.profile-tab {
    min-height: 2.75rem;
    border: 0;
    border-radius: .7rem;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.profile-tab.active {
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 3px 12px rgba(35, 48, 40, .09);
}

.profile-form {
    display: grid;
    gap: .85rem;
}

.profile-form label {
    display: grid;
    gap: .4rem;
    color: var(--text);
    font-size: .86rem;
    font-weight: 750;
}

.profile-form input {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .7rem .85rem;
    color: var(--text);
    background: var(--surface);
    font: inherit;
}

.profile-form input:focus-visible,
.profile-tab:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent, #4f8d59) 28%, transparent);
    outline-offset: 2px;
}

.profile-form-status {
    min-height: 1.35rem;
    margin: 0;
    color: var(--danger, #9d3d3d);
    font-size: .86rem;
    font-weight: 700;
}

.profile-account-view {
    display: grid;
    gap: .85rem;
}

.profile-sync-card,
.profile-privacy {
    padding: 1rem 1.1rem;
}

.profile-sync-card strong,
.profile-privacy h3 {
    color: var(--text);
}

.profile-sync-card p,
.profile-privacy p {
    margin: .4rem 0 0;
    font-size: .88rem;
}

.profile-privacy {
    margin-top: 1rem;
}

.profile-privacy h3 {
    margin: 0;
    font-size: .95rem;
}

body.dark-theme .profile-summary,
body.dark-theme .profile-sync-card,
body.dark-theme .profile-privacy {
    background: var(--surface-soft);
}

@media (max-width: 42rem) {
    .identity-actions {
        width: 100%;
        justify-content: stretch;
    }

    .profile-summary {
        grid-template-columns: 1fr;
    }

    .profile-summary .identity-reroll-btn {
        width: 100%;
    }

    .identity-actions .secondary-btn {
        flex: 1 1 9rem;
    }

    #profile-overlay .profile-content {
        width: min(100% - 1rem, 34rem);
    }
}

@media (prefers-contrast: more) {
    :root {
        --border: color-mix(in srgb, var(--text), transparent 45%);
    }

    .tile,
    button,
    .modal-content,
    .category-card,
    .current-stat-box,
    .timer-bar {
        border-width: 2px;
    }
}

/* Professional application frame -----------------------------------------
   This final composition intentionally supersedes the exploratory rail
   layout above. Desktop becomes a board-led workspace with one contextual
   column. Smaller screens retain a purpose-built vertical sequence. */

.app-container {
    display: flex;
    width: 100%;
    min-height: 100dvh;
    flex-direction: column;
    padding: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    min-height: 4.7rem;
    margin: 0;
    padding:
        max(0.72rem, env(safe-area-inset-top))
        max(1.1rem, calc((100vw - 82rem) / 2))
        0.72rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 14%);
    background: color-mix(in srgb, var(--surface), transparent 3%);
    box-shadow: 0 8px 30px rgb(31 40 36 / 6%);
    backdrop-filter: blur(18px) saturate(1.08);
}

.brand-row {
    min-height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.brand-logo {
    width: clamp(9.2rem, 13vw, 11rem);
    height: 2.35rem;
}

.header-buttons {
    gap: 0.16rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.header-btn,
.header-btn:hover,
.header-btn:focus-visible {
    min-height: 2.8rem;
    padding: 0.38rem 0.68rem;
    border-radius: var(--radius-sm);
}

.header-btn::before {
    background: var(--surface-soft);
}

.game-shell {
    display: grid;
    width: min(calc(100% - 2rem), 72rem);
    min-height: auto;
    flex: 1 0 auto;
    grid-template-columns: minmax(25rem, 38rem) minmax(15.5rem, 18.5rem);
    grid-template-rows: auto auto 1fr;
    align-content: center;
    align-items: start;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: 0.75rem;
    margin: clamp(1.5rem, 4vh, 3.2rem) auto;
    padding: clamp(1rem, 2.2vw, 1.75rem);
    border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: clamp(1.5rem, 3vw, 2.25rem);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface), transparent 2%), color-mix(in srgb, var(--surface-soft), transparent 22%));
    box-shadow:
        0 2px 3px rgb(33 42 38 / 5%),
        0 28px 70px rgb(33 42 38 / 11%);
}

.game-shell::before {
    top: 50%;
    left: 30%;
    width: 56%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary), transparent 87%), transparent 68%);
    opacity: 0.72;
    transform: translate(-50%, -50%);
}

.game-info {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    min-width: 0;
    gap: 0.65rem;
    align-self: start;
    padding: 0;
    text-align: left;
}

.category-card {
    grid-column: 1;
    grid-row: auto;
    order: 1;
    min-height: 8.2rem;
    padding: 1rem 1rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary), transparent 88%), transparent 8rem),
        var(--surface);
    box-shadow: none;
}

.category-card::before {
    inset: 1rem auto 1rem 0;
    width: 0.23rem;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.category-label {
    padding-left: 0.2rem;
    font-size: 0.62rem;
}

.category-title {
    min-height: auto;
    margin-top: 0.18rem;
    padding-left: 0.2rem;
    font-size: clamp(1.22rem, 2vw, 1.55rem);
    line-height: 1.18;
    white-space: normal;
}

.game-status {
    min-height: 2.3rem;
    align-items: flex-start;
    margin-top: 0.38rem;
    padding-left: 0.2rem;
    font-size: 0.68rem;
    line-height: 1.4;
}

.size-switch {
    position: static;
    grid-column: 1;
    grid-row: auto;
    order: 2;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
    margin: 0;
    padding: 0.28rem;
}

.size-btn {
    width: 100%;
    min-width: 0;
    min-height: 2.7rem;
}

.session-stats {
    grid-column: 1;
    grid-row: auto;
    order: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.stats-row {
    display: contents;
}

.current-stat-box {
    min-height: 4.55rem;
    justify-items: center;
    padding: 0.65rem 0.5rem;
    border-radius: var(--radius-md);
    box-shadow: none;
    text-align: center;
}

.current-stat-box::after {
    display: none;
}

.current-stat-box .stat-value {
    font-size: 1.45rem;
}

.board-container {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    min-width: 0;
}

.game-board {
    --board-max: 38rem;
    width: min(100%, var(--board-max));
}

.timer-bar {
    grid-column: auto;
    grid-row: auto;
    min-height: 4.55rem;
    margin: 0;
    padding: 0.65rem 0.35rem;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.game-controls {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    gap: 0.62rem;
    margin: 0;
    padding: 0.85rem;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.game-controls::before {
    text-align: left;
}

.primary-actions {
    grid-template-columns: 1fr;
}

.primary-actions #pause-btn {
    order: 2;
}

.game-controls .primary-btn {
    order: 1;
}

.site-footer {
    width: 100%;
    min-height: 3.7rem;
    flex: 0 0 auto;
    margin: 0;
    padding:
        0.62rem
        max(1.1rem, calc((100vw - 82rem) / 2))
        max(0.62rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border), transparent 12%);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface), transparent 2%);
    box-shadow: 0 -6px 22px rgb(31 40 36 / 3%);
}

.footer-logo {
    width: auto;
    height: 1.45rem;
    object-fit: contain;
    image-rendering: auto;
}

.footer-brand strong {
    padding-left: 0.55rem;
    border-left: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
}

.footer-links {
    gap: 0.25rem;
}

.footer-link {
    min-height: 2.25rem;
    padding-inline: 0.72rem;
    font-size: 0.69rem;
}

body.dark-theme {
    background:
        radial-gradient(circle at 15% -8%, rgb(93 146 111 / 13%), transparent 30rem),
        radial-gradient(circle at 90% 20%, rgb(188 134 45 / 7%), transparent 24rem),
        var(--bg);
}

body.pastel-theme {
    background:
        radial-gradient(circle at 10% 0, rgb(238 170 187 / 23%), transparent 26rem),
        radial-gradient(circle at 94% 18%, rgb(239 185 123 / 22%), transparent 28rem),
        linear-gradient(180deg, #f2e1bc, var(--bg));
}

body.pastel-theme .site-header,
body.pastel-theme .site-footer {
    background: color-mix(in srgb, var(--surface), transparent 4%);
}

body.pastel-theme .game-shell {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface), transparent 2%), color-mix(in srgb, #ead6d9, var(--surface-soft) 64%));
}

@media (max-width: 61.99rem) {
    .site-header {
        padding-inline: max(1rem, env(safe-area-inset-left));
    }

    .game-shell {
        width: min(calc(100% - 2rem), 42rem);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto;
        row-gap: 0.7rem;
        margin-block: 1.4rem;
        padding: clamp(0.8rem, 2.5vw, 1.2rem);
    }

    .game-shell::before {
        left: 50%;
        width: 90%;
    }

    .game-info {
        display: contents;
    }

    .category-card {
        grid-column: 1;
        grid-row: 1;
        min-height: 5.35rem;
        padding: 0.78rem 10.2rem 0.72rem 0.9rem;
        border-radius: var(--radius-md);
    }

    .category-title {
        margin-top: 0.1rem;
        font-size: clamp(1.05rem, 3vw, 1.28rem);
        white-space: nowrap;
    }

    .game-status {
        min-height: 1rem;
        margin-top: 0.1rem;
    }

    .size-switch {
        z-index: 2;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        width: auto;
        min-width: 8.8rem;
        margin-right: 0.5rem;
    }

    .size-btn {
        min-width: 4rem;
    }

    .board-container {
        grid-column: 1;
        grid-row: 2;
    }

    .session-stats {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .game-controls {
        grid-column: 1;
        grid-row: 4;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .game-controls::before {
        display: none;
    }

    .primary-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .primary-actions #pause-btn {
        order: 1;
    }

    .game-controls .primary-btn {
        order: 2;
    }

    .site-footer {
        padding-inline: max(1rem, env(safe-area-inset-left));
    }
}

@media (max-width: 47.99rem) {
    .site-header {
        top: 0;
        min-height: 4rem;
        padding:
            max(0.5rem, env(safe-area-inset-top))
            max(0.65rem, env(safe-area-inset-right))
            0.5rem
            max(0.65rem, env(safe-area-inset-left));
    }

    .brand-row {
        min-height: 2.75rem;
    }

    .brand-logo {
        width: auto;
        height: 1.2rem;
    }

    .header-buttons {
        gap: 0.08rem;
    }

    .header-btn,
    .header-btn:hover,
    .header-btn:focus-visible {
        width: 2.55rem;
        min-width: 2.55rem;
        min-height: 2.45rem;
        padding: 0.18rem;
    }

    .game-shell {
        width: min(calc(100% - 1rem), 35rem);
        margin-block: 0.75rem 1rem;
        padding: 0.5rem;
        border-color: transparent;
        border-radius: 1.35rem;
        background: transparent;
        box-shadow: none;
    }

    .game-shell::before {
        display: none;
    }

    .category-card {
        min-height: 4.9rem;
        padding-right: 9rem;
        box-shadow: var(--shadow-quiet);
    }

    .size-switch {
        min-width: 8.1rem;
        margin-right: 0.38rem;
    }

    .size-btn {
        min-width: 3.55rem;
        min-height: 2.3rem;
    }

    .current-stat-box,
    .timer-bar {
        box-shadow: var(--shadow-quiet);
    }

    .site-footer {
        min-height: auto;
        padding:
            0.62rem
            max(0.75rem, env(safe-area-inset-right))
            max(0.62rem, env(safe-area-inset-bottom))
            max(0.75rem, env(safe-area-inset-left));
    }

    .footer-brand strong {
        display: none;
    }
}