/*
 * Keim-Sweeper: layout, components and interaction states.
 * Theme files may change decoration and tokens, not geometry.
 *
 * Contents
 * 01. Fonts, tokens and reset
 * 02. Score, masks and map
 * 03. HUD, rewards and messages
 * 04. Game selection and results
 * 05. Fullscreen and application shell
 * 06. Rules and legal dialogs
 * 07. Grand Prix and daily charts
 * 08. Navigation and administration
 * 09. Multiplayer
 * 10. Buttons, responsive controls and footer
 * 11. Route review
 * 12. Tutorial
 */

/* === 01. Fonts, tokens and reset === */

@font-face {

    font-family: Zain;
    src: url('../fonts/Zain-Regular-Latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;

}

@font-face {

    font-family: Zain;
    src: url('../fonts/Zain-Italic-Latin.woff2') format('woff2');
    font-style: italic;
    font-weight: 400;
    font-display: swap;

}

@font-face {

    font-family: Zain;
    src: url('../fonts/Zain-Bold-Latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;

}

@font-face {

    font-family: Zain;
    src: url('../fonts/Zain-ExtraBold-Latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 800;
    font-display: swap;

}

@font-face {

    font-family: Zain;
    src: url('../fonts/Zain-Black-Latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
    font-display: swap;

}

.keim-sweeper-page {

    color-scheme: light;
    --page: #f7f8fc;
    --frame: #f0f2f7;
    --frame-strong: #e1e4ec;
    --panel: #fff;
    --panel-border: #e1e4ec;
    --ink: #0b111e;
    --muted: #5f6879;
    --accent: #315eff;
    --accent-dark: #2d56e7;
    --game-accent: #1f8b53;
    --world: #dce4ed;
    --world-top: #e4eaf1;
    --world-low: #d4dee9;
    --tile-top: #f3f6fa;
    --tile-bottom: #eaf0f7;
    --grid: rgba(96, 110, 132, .58);
    --grid-revealed: rgba(238, 242, 247, .56);
    --grid-boundary: rgba(78, 94, 116, .64);
    --grid-soft: rgba(96, 110, 132, .16);
    --reach-fill: rgba(255, 255, 255, 0);
    --reach-stroke: rgba(77, 92, 118, .88);
    --reach-stroke-revealed: rgba(255, 255, 255, .96);
    --notice: #ffffffda;
    --notice-border: #ffffff;
    --world-border: #cad3df;
    --score-track: #d6dfe9;
    --score-track-edge: #bfcbda;
    --board-shadow: rgba(24, 36, 56, .16);
    --board-shadow-wide: rgba(24, 36, 56, .10);
    --board-spill-opacity: .16;
    --board-spill-blur: 7px;
    --text-2xs: .6rem;
    --text-xs: .75rem;
    --text-sm: .9rem;
    --text-md: 1rem;
    --text-lg: 1.1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2rem;
    --text-5xl: 2.25rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;

}

.keim-sweeper [hidden] {

    display: none !important;

}

@media (prefers-color-scheme: dark) {

    .keim-sweeper-page {

        color-scheme: dark;
        --page: #1b1f28;
        --frame: #2f3543;
        --frame-strong: #3b4252;
        --panel: #2b2f3c;
        --panel-border: #3b4252;
        --ink: #e5e4ea;
        --muted: #a7adbb;
        --accent: #5474e8;
        --accent-dark: #3048b2;
        --game-accent: #55b67f;
        --world: #111b2a;
        --world-top: #1a2637;
        --world-low: #0c1522;
        --tile-top: #293648;
        --tile-bottom: #223044;
        --grid: rgba(255, 255, 255, .68);
        --grid-revealed: rgba(38, 52, 71, .54);
        --grid-boundary: rgba(236, 241, 248, .68);
        --grid-soft: rgba(255, 255, 255, .19);
        --reach-fill: rgba(255, 255, 255, 0);
        --reach-stroke: rgba(255, 255, 255, .92);
        --reach-stroke-revealed: rgba(255, 255, 255, .96);
        --notice: #171f31df;
        --notice-border: #2a3550;
        --world-border: #23304a;
        --score-track: #29364b;
        --score-track-edge: #394963;
        --board-shadow: rgba(3, 9, 18, .28);
        --board-shadow-wide: rgba(3, 9, 18, .20);
        --board-spill-opacity: .12;
        --board-spill-blur: 8px;

    }

}

html,
body {

    font-family: Zain, system-ui, sans-serif;
    color: var(--ink);
    font-synthesis: none;

    background: var(--page);

    margin: 0;
    padding: 0;

}

body {

    padding: clamp(0, 1.6vw, 1.1rem);

}

.keim-sweeper {

    --button-background: var(--frame);
    --button-background-hover: var(--frame-strong);
    --button-border: var(--frame-strong);
    --button-border-interactive: var(--accent);
    --button-primary-background: var(--accent);
    --button-primary-background-hover: var(--accent-dark);
    --button-primary-border: var(--accent);
    --button-primary-border-interactive: var(--accent-dark);
    --button-subtle-background: transparent;
    --button-subtle-background-hover: var(--frame);

    max-width: 53.75rem;

    font: 400 var(--text-sm)/1.4 Zain, system-ui, sans-serif;
    color: var(--ink);

    margin: auto;

    position: relative;

}

.keim-sweeper * {

    box-sizing: border-box;

}

.keim-sweeper button,
.keim-sweeper input,
.keim-sweeper select {

    font: inherit;

}

.keim-sweeper button {

    cursor: pointer;

}

.keim-sweeper button:disabled {

    cursor: not-allowed;

}

.keim-sweeper .dialog button:disabled {

    opacity: .5;

}

.keim-sweeper button:focus-visible,
.keim-sweeper input:focus-visible,
.keim-sweeper select:focus-visible {

    outline: .1rem solid #f3c04f;
    outline-offset: .1rem;

}

/* === 02. Score, masks and map === */

.keim-sweeper .score-goal {

    min-height: 1.6rem;

    gap: .75rem;
    padding: .1rem .25rem .5rem;

    display: flex;
    align-items: center;

    position: relative;

    overflow: visible;
    user-select: none;

}

.keim-sweeper .score-goal[hidden] {

    display: none !important;

}

.keim-sweeper .score-goal-track {

    min-width: 0;
    height: .6rem;

    border-radius: 62.5rem;
    background: var(--score-track);
    box-shadow: inset 0 1px 2px rgba(8, 14, 28, .11);
    outline: 1px solid var(--score-track-edge);

    flex: 1;

    overflow: hidden;

}

.keim-sweeper .score-goal-fill {

    height: 100%;
    width: 0%;

    border-radius: inherit;
    background: linear-gradient(90deg, #c68c0a, #ffd74e);

    display: block;

    transition: width .22s ease-out;

}

.keim-sweeper .score-goal-label {

    min-width: 4.75rem;

    color: var(--ink);
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;

    gap: .25rem;

    display: flex;
    align-items: center;
    justify-content: flex-end;

}

.keim-sweeper .score-goal-hearts {

    gap: .2rem;

    display: flex;
    align-items: center;
    justify-content: start;

    position: absolute;
    top: calc(100% + .15rem);
    left: 0;
    right: 0;
    z-index: 2;

    pointer-events: none;

}

@media (max-width: 47.5em) {

    .keim-sweeper .score-goal-hearts {

        top: 100%;

    }
}

.keim-sweeper .score-goal-heart {

    display: block;

}

.keim-sweeper .goal-amount.estimated {

    font-style: italic;

}

.keim-sweeper .score-goal-star {

    color: #dba414;
    font-size: var(--text-md);
    line-height: 1;

}

@media (prefers-reduced-motion: no-preference) {

    :root:not([data-reduce-motion="true"]) .keim-sweeper .score-goal-fill {
        position: relative;
        overflow: hidden;
    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .score-goal-fill::after {
        content: '';
        position: absolute;
        z-index: 1;
        top: -45%;
        bottom: -45%;
        left: -65%;
        width: 52%;
        background: linear-gradient(90deg, transparent, rgba(255, 242, 191, .25), transparent);
        transform: translate3d(-100%, 0, 0) skewX(-16deg);
        animation: keim-score-goal-sheen 10s ease-in-out infinite;
        pointer-events: none;
    }

}

@keyframes keim-score-goal-sheen {
    0%, 1% { transform: translate3d(-100%, 0, 0) skewX(-16deg); }
    18%, 100% { transform: translate3d(350%, 0, 0) skewX(-16deg); }
}

.keim-sweeper .avatar-mask-count {

    min-width: 1.9rem;
    height: 1rem;

    color: #c4edf7;
    font-size: var(--text-2xs);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    border: 0;
    border-radius: 62.5rem;
    background: rgba(18, 49, 63, .90);
    box-shadow: 0 1px 3px rgba(3, 14, 24, .24);

    gap: .1rem;
    padding: 0 .25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    z-index: 4;

    transform: translate(-50%, -50%);

    pointer-events: none;

}

.keim-sweeper .avatar-mask-count.armed {

    color: #fff;

    background: #277f9c;
    box-shadow: 0 0 0 1px rgba(142, 226, 247, .48), 0 0 6px rgba(101, 207, 255, .30);

}

.keim-sweeper .avatar-mask-count.empty {

    color: #d8f3ff;

    background: rgba(18, 49, 63, .86);

}

.keim-sweeper .avatar-mask-count b {

    font: inherit;

}

.keim-sweeper .avatar-mini-mask,
.keim-sweeper .avatar-mini-mask > .avatar-mask-glyph {

    width: .75rem;
    height: .75rem;

    display: block;

}

.keim-sweeper .avatar-mask-count.earned {

    animation: ks-earn-mask .92s cubic-bezier(.2, 1.5, .3, 1);

}

@keyframes ks-earn-mask {

    0%,
    100% {

        transform: translate(-50%, -50%);

    }

    33% {

        filter: drop-shadow(0 0 9px #66d7fa);

        transform: translate(-50%, -50%) scale(1.24);

    }

    64% {

        transform: translate(-50%, -50%) scale(1.08);

    }

}

@media (max-width: 34.5em) {

    .keim-sweeper .score-goal {

        gap: .6rem;
        padding-bottom: .5rem;

    }

    .keim-sweeper .score-goal-label {

        min-width: 4.25rem;

        font-size: var(--text-xs);

    }

}

.keim-sweeper .route-thinking {

    background: rgba(12, 23, 38, .2);

    padding: 1.25rem;

    display: grid;
    place-items: center;

    position: fixed;
    inset: 0;
    z-index: 80;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

}

.keim-sweeper .route-thinking[hidden] {

    display: none !important;

}

.keim-sweeper .thinking-card {

    width: min(17.75rem, 100%);

    text-align: center;

    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 1.25rem;
    box-shadow: 0 14px 35px rgba(9, 18, 32, .22);

    padding: 1.4rem 1.25rem 1.25rem;

}

.keim-sweeper .thinking-card strong {

    font-size: var(--text-md);
    letter-spacing: -.025em;

    margin: .4rem 0 .25rem;

    display: block;

}

.keim-sweeper .thinking-card p {

    color: var(--muted);
    font-size: var(--text-xs);

    margin: 0 0 .75rem;

}

.keim-sweeper .thinking-characters {

    height: 2.75rem;

    gap: .6rem;

    display: flex;
    align-items: center;
    justify-content: center;

}

.keim-sweeper .thinking-dot {

    width: .75rem;
    height: .75rem;

    background: #e6b231;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(76, 52, 7, .15);

    animation: ks-think-pulse 1.05s ease-in-out infinite;

}

.keim-sweeper .thinking-dot:nth-child(2) {

    animation-delay: .14s;

}

.keim-sweeper .thinking-dot:nth-child(3) {

    animation-delay: .28s;

}

.keim-sweeper .thinking-track {

    height: .4rem;

    border-radius: 62.5rem;
    background: var(--score-track);

    overflow: hidden;

}

.keim-sweeper .thinking-fill {

    width: 0%;
    height: 100%;

    border-radius: inherit;
    background: linear-gradient(90deg, #dfaa20, #ffe27b);

    display: block;

    transition: width .16s linear;

}

@keyframes ks-think-pulse {

    0%,
    65%,
    100% {

        opacity: .5;

        transform: translateY(0) scale(.88);

    }

    30% {

        opacity: 1;

        transform: translateY(-.4rem) scale(1.08);

    }

}

@media (prefers-reduced-motion: reduce) {

    .keim-sweeper .thinking-dot {

        opacity: .85;

        animation: none;

    }

}

.keim-sweeper .world {

    aspect-ratio: 744/608;

    border: 1px solid var(--world-border);
    background: radial-gradient(130% 110% at 50% 0%, var(--world-top), var(--world) 58%, var(--world-low) 100%);
    box-shadow: 0 16px 40px rgba(9, 16, 32, .08);

    position: relative;

    isolation: isolate;
    overflow: hidden;
    touch-action: manipulation;

}

.keim-sweeper .world,
.keim-sweeper .world * {

    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;

}

.keim-sweeper .board-pan {

    position: absolute;
    top: 0;
    left: 0;

    transform-origin: 0 0;
    touch-action: none;

}

@media (max-width: 37.5em) {

    .keim-sweeper .world {

        height: clamp(26.25rem, 60svh, 32.5rem);

        touch-action: none;

    }

    .keim-sweeper .world.choice-open {

        min-height: 26.25rem;

    }

    .keim-sweeper:fullscreen .world {

        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        aspect-ratio: auto;

    }

}

.keim-sweeper .layer,
.keim-sweeper .cells {

    width: 100%;
    height: 100%;

    display: block;

    position: absolute;
    inset: 0;

}

.keim-sweeper .board-shadow,
.keim-sweeper .spill {

    overflow: visible;
    pointer-events: none;

}

.keim-sweeper .board-shadow {

    filter:
        drop-shadow(0 4px 22px var(--board-shadow))
        drop-shadow(0 8px 40px var(--board-shadow-wide));

}

.keim-sweeper .board-shadow-shape {

    fill: var(--tile-bottom);
    fill-rule: evenodd;

}

.keim-sweeper .spill {

    opacity: var(--board-spill-opacity);
    filter: blur(var(--board-spill-blur)) saturate(1.04);

}

.keim-sweeper .spill-tile {

    stroke: none;

}

.keim-sweeper .fog,
.keim-sweeper .grid,
.keim-sweeper .steps,
.keim-sweeper .floaters {

    pointer-events: none;

}

.keim-sweeper .fog .fog-tile {

    fill: url(#ks-tile-gradient);

    shape-rendering: geometricPrecision;

}

.keim-sweeper .fog .fog-tile--shared {

    opacity: .48;

}

.keim-sweeper .grain-tile--shared {

    opacity: .62;

}

.keim-sweeper .fog .fog-top {

    stop-color: var(--tile-top);

}

.keim-sweeper .fog .fog-bottom {

    stop-color: var(--tile-bottom);

}

.keim-sweeper .cells {

    pointer-events: none;

}

.keim-sweeper .map-tokens,
.keim-sweeper .map-token-cell,
.keim-sweeper .map-token {

    pointer-events: none;

}

.keim-sweeper .map-token-cell {

    display: grid;
    place-items: center;

    position: absolute;

}

.keim-sweeper .map-token-cell > .map-token {

    width: 45%;
    height: 45%;

    display: block;

    opacity: .98;

}

.keim-sweeper .multiplayer-shared-token > .map-token {

    opacity: .62;

}

.keim-sweeper .multiplayer-opponent {

    z-index: 5;

}

.keim-sweeper .multiplayer-opponent > .token {

    width: 48%;
    height: 48%;

    position: absolute;
    left: 52%;
    top: 43%;

    opacity: .82;
    filter: drop-shadow(0 .1rem .18rem rgba(7, 20, 28, .38));
    mix-blend-mode: normal;
    transform: translate(-50%, -50%);

}

.keim-sweeper .multiplayer-opponent-reward {

    width: 39%;
    height: 39%;

    position: absolute;
    left: 69%;
    top: 4%;

    filter: drop-shadow(0 .1rem .12rem rgba(7, 20, 28, .35));

}

.keim-sweeper .multiplayer-opponent-reward > .token {

    display: block;
    width: 100%;
    height: 100%;

}

.keim-sweeper .multiplayer-opponent::before {

    width: 56%;
    height: 65%;

    content: '';
    border: .09rem solid rgba(255, 235, 170, .88);
    border-radius: 50%;
    box-shadow: 0 0 0 .06rem rgba(63, 84, 42, .48);

    position: absolute;
    left: 52%;
    top: 43%;

    transform: translate(-50%, -50%);

}

.keim-sweeper .multiplayer-opponent small {

    max-width: 86%;

    overflow: hidden;

    color: #fff0c7;
    font-size: var(--text-2xs);
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;

    border-radius: 62.5rem;
    background: rgba(33, 50, 27, .8);
    box-shadow: 0 .06rem .15rem rgba(7, 18, 12, .28);

    padding: .1rem .3rem;

    position: absolute;
    left: 50%;
    bottom: 2%;

    transform: translateX(-50%);

}

.keim-sweeper .multiplayer-opponent.same-cell > .token,
.keim-sweeper .multiplayer-opponent.same-cell::before {

    left: 64%;
    top: 34%;

}

.keim-sweeper .multiplayer-opponent.same-cell small {

    left: 65%;

}

.keim-sweeper .multiplayer-opponent.offline {

    opacity: .58;

}

.keim-sweeper .cell {

    border: 0;
    background: transparent;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

    padding: 0;

    display: grid;
    place-items: center;

    position: absolute;

    cursor: default;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

}

.keim-sweeper .cell.reach {

    cursor: pointer;

}

@media (hover: hover) {

    .keim-sweeper .cell.reach:hover {

        background: rgba(255, 255, 255, .075);

    }

}

.keim-sweeper .cell.reach:active {

    background: rgba(255, 255, 255, .16);

}

.keim-sweeper .cell.keyboard-selected {

    z-index: 6;

}

.keim-sweeper .cell.keyboard-selected::after {

    width: 36px;
    height: 36px;

    content: '';
    background: url('../images/icons/game/keyboard-crosshair.svg') center / contain no-repeat;

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;

    filter: drop-shadow(0 1px 1px rgba(39, 23, 13, .32));
    transform: translate(-50%, -50%);
    pointer-events: none;

}

.keim-sweeper .cell.keyboard-selected:focus-visible {

    outline: none;

}

.keim-sweeper .cell .token {

    width: 64%;
    height: 64%;

    display: block;

    position: relative;
    z-index: 2;

    filter: drop-shadow(0 3px 6px rgba(15, 33, 28, .16));
    pointer-events: none;

}

.keim-sweeper .cell.player {

    cursor: pointer;

}

.keim-sweeper .cell.player > .token {

    width: 51%;
    height: 51%;

    position: absolute;
    left: 50%;
    top: 45%;

    filter: drop-shadow(0 2px 4px rgba(15, 33, 28, .20));
    transform: translate(-50%, -50%);

}

@media (prefers-reduced-motion: no-preference) {

    :root:not([data-reduce-motion="true"]) .keim-sweeper .cell.player.finish-victory > .token {

        animation: ks-player-finish-victory .9s ease-out both;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .cell.player.finish-defeat > .token {

        animation: ks-player-finish-defeat .9s ease-in-out both;

    }

}

@keyframes ks-player-finish-victory {

    0%, 100% {

        transform: translate(-50%, -50%) scale(1) rotate(0);

    }

    24% {

        transform: translate(-50%, -57%) scale(1.23) rotate(-9deg);

    }

    43% {

        transform: translate(-50%, -55%) scale(1.19) rotate(8deg);

    }

    65% {

        transform: translate(-50%, -50%) scale(.97) rotate(-4deg);

    }

    82% {

        transform: translate(-50%, -53%) scale(1.07) rotate(2deg);

    }

}

@keyframes ks-player-finish-defeat {

    0%, 100% {

        transform: translate(-50%, -50%) scale(1) rotate(0);

    }

    18% {

        transform: translate(-50%, -50%) scale(1.06) rotate(-12deg);

    }

    34% {

        transform: translate(-50%, -50%) scale(1.05) rotate(11deg);

    }

    51% {

        transform: translate(-50%, -50%) scale(1.03) rotate(-7deg);

    }

    72% {

        transform: translate(-50%, -46%) scale(.94) rotate(5deg);

    }

    86% {

        transform: translate(-50%, -49%) scale(.97) rotate(-2deg);

    }

}

.keim-sweeper .cell.player .avatar-progress {

    width: 78%;
    height: 78%;

    position: absolute;
    left: 11%;
    top: 8%;
    z-index: 3;

    filter: drop-shadow(0 1px 1px rgba(8, 20, 30, .40));
    overflow: visible;
    pointer-events: none;

}

.keim-sweeper .avatar-arc {

    stroke: rgba(238, 247, 255, .62);
    stroke-width: 5.4;
    fill: none;

    transition: stroke .18s, opacity .18s;

}

.keim-sweeper .avatar-arc.full {

    stroke: #ffdc45;

    filter: drop-shadow(0 0 2px rgba(255, 193, 24, .65));

}

.keim-sweeper .avatar-arc.pop {

    animation: ks-arc-pop .48s ease-out;

}

.keim-sweeper .avatar-progress.bonus {

    animation: ks-ring-bonus .64s ease-out;

}

@keyframes ks-arc-pop {

    0% {

        stroke-width: 8.5;
        filter: drop-shadow(0 0 5px #ffe887);

    }

    100% {

        stroke-width: 5.4;

    }

}

@keyframes ks-ring-bonus {

    0%,
    100% {

        filter: drop-shadow(0 1px 1px rgba(8, 20, 30, .55));

    }

    40% {

        filter: drop-shadow(0 0 8px #ffdf4c);

    }

}

.keim-sweeper .map-token-cell.seed > .map-token {

    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(11, 22, 32, .25));

}

.keim-sweeper .map-token-cell.virus.visited-icon > .map-token {

    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(8, 18, 32, .32));

}

/* === 03. HUD, rewards and messages === */

.keim-sweeper .gamebar {

    min-height: 4.25rem;

    padding: .5rem .25rem .9rem;

}

.keim-sweeper .identity {

    min-width: 0;

    gap: .1rem;

    display: grid;
    flex: 0 1 auto;

}

.keim-sweeper .identity strong {

    font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1.04;
    color: #1f8b53;
    white-space: nowrap;

}

.keim-sweeper .identity span {

    font-size: var(--text-2xs);
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800;
    white-space: nowrap;

}

.keim-sweeper .game-footer {

    color: var(--muted);
    font-size: var(--text-xs);

    gap: .6rem;
    padding: .75rem .4rem .1rem;

}

.keim-sweeper .game-footer .meta-spacer {

    flex: 1;

}

.keim-sweeper .footer-bottom {

    min-width: 2rem;
    min-height: 2rem;

    color: var(--muted);
    font-weight: 700;
    font-size: var(--text-xs);
    white-space: nowrap;

    background: none;
    border: 0;
    border-radius: .55rem;

    gap: .4rem;
    padding: .35rem .48rem;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: color .18s ease, background .18s ease;

}

.keim-sweeper .mode-return[hidden],
.keim-sweeper .mode-restart[hidden],
.keim-sweeper .seed-share[hidden] {

    display: none !important;

}

.keim-sweeper .mode-return,
.keim-sweeper .mode-restart {

    font-weight: 800;

}

.keim-sweeper .seed-share {

    min-width: 2rem;

    justify-content: center;
    flex: 0 0 auto;

}

.keim-sweeper .seed-share.copied {

    color: #198958;

}

.keim-sweeper .choice-seed {

    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--muted);

    border-top: 1px solid var(--frame-strong);

    gap: .6rem;
    margin-top: 1.5rem !important;
    padding-top: var(--space-4);
    gap: .55rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;

}

.keim-sweeper .choice-seed input {

    width: min(14.5rem, 58vw);

    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;

    border: 1px solid var(--frame-strong);
    border-radius: .6rem;
    background: var(--panel);

    padding: .5rem .6rem;

}

@media (max-width: 22.5em) {

    .keim-sweeper .game-footer.random-playing {

        gap: .4rem;

    }

    .keim-sweeper .game-footer.random-playing .footer-bottom {

        font-size: var(--text-xs);

        gap: .2rem;

    }

}

@media (max-width: 34.5em) {

    .keim-sweeper .game-footer.random-playing .mode-label {

        display: none;

    }

}

.keim-sweeper .reward-effects {

    position: absolute;
    inset: 0;

    overflow: visible;
    pointer-events: none;

}

.keim-sweeper .reward-spark {

    width: .5rem;
    height: .5rem;

    border-radius: 50%;
    background: #ffd94d;
    box-shadow: 0 0 11px 3px #efaa29aa;

    position: absolute;
    left: var(--from-x);
    top: var(--from-y);

    opacity: 0;
    animation: ks-spark .64s cubic-bezier(.34, .12, .26, 1) forwards;
    animation-delay: var(--delay, 0ms);

}


.keim-sweeper .score-goal-spark-anchor {

    width: 0;
    height: 0;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;

    pointer-events: none;

}

.keim-sweeper .reward-spark--score {

    width: .95rem;
    height: .95rem;

    color: #fff4cb;
    font: 700 1rem/1 system-ui, sans-serif;
    text-align: center;
    text-shadow: 0 0 4px rgba(255, 238, 164, .95), 0 0 9px rgba(246, 181, 43, .8);

    background: none;
    border-radius: 0;
    box-shadow: none;

    z-index: 2;

    pointer-events: none;

}

.keim-sweeper .reward-mask-fly {

    width: 1.75rem;
    height: 1.75rem;

    position: absolute;
    left: var(--from-x);
    top: var(--from-y);

    filter: drop-shadow(0 0 9px #61c8ff);
    animation: ks-mask-arrive .7s cubic-bezier(.25, .15, .27, 1) forwards;

}

.keim-sweeper .reward-mask-fly > .healthicon {

    width: 100%;
    height: 100%;

}

@keyframes ks-spark {

    0% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(.5);

    }

    14% {

        opacity: 1;

    }

    82% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform: translate(calc(var(--to-x) - var(--from-x)), calc(var(--to-y) - var(--from-y))) scale(.4);

    }

}

@keyframes ks-mask-arrive {

    0% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(.5);

    }

    18% {

        opacity: 1;

    }

    72% {

        opacity: 1;

        transform: translate(calc(-50% + var(--to-x) - var(--from-x)), calc(-50% + var(--to-y) - var(--from-y))) scale(1.12);

    }

    100% {

        opacity: 0;

        transform: translate(calc(-50% + var(--to-x) - var(--from-x)), calc(-50% + var(--to-y) - var(--from-y))) scale(.9);

    }

}

@media (prefers-reduced-motion: reduce) {

    .keim-sweeper .reward-spark,
    .keim-sweeper .reward-mask-fly {

        display: none;

        animation: none;

    }

    .keim-sweeper .avatar-arc.pop,
    .keim-sweeper .avatar-progress.bonus,
    .keim-sweeper .avatar-mask-count.earned {

        animation: none;

    }

}

.keim-sweeper .miniSelect {

    min-height: 2.1rem;

    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 700;

    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: none;
    border-radius: .6rem;

    padding: .5rem .4rem;

}

.keim-sweeper .notice {

    width: .1rem;
    height: .1rem;

    white-space: nowrap;

    clip-path: inset(50%);

    position: absolute;

    overflow: hidden;

}

.keim-sweeper .floaters {

    position: absolute;
    inset: 0;
    z-index: 19;

    overflow: hidden;
    pointer-events: none !important;

}

.keim-sweeper .floaters *,
.keim-sweeper .floater {

    pointer-events: none !important;

}

.keim-sweeper .floater {

    font-size: var(--text-xs);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: #1b6b43;

    border-radius: 62.5rem;
    box-shadow: 0 8px 22px rgba(8, 14, 28, .18);
    border: 1px solid rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);

    padding: .4rem .6rem;

    position: absolute;

    transform: translate(-50%, -50%);

    animation: ks-float 1.12s ease-out forwards;

}

.keim-sweeper .floater.neg {

    color: #b3203d;

    background: rgba(255, 245, 247, .94);

}

.keim-sweeper .floater.pos {

    color: #176e46;

    background: rgba(247, 255, 250, .94);

}

.keim-sweeper .floater.neutral {

    color: #265b8d;

    background: rgba(245, 251, 255, .94);

}


.keim-sweeper .floater.with-icon {

    min-width: 2.1rem;

    gap: .2rem;
    padding: .4rem .5rem .5rem;

    display: flex;
    flex-direction: column;
    align-items: center;

}

.keim-sweeper .floater-icon {

    width: 1rem;
    height: 1rem;

    display: grid;
    place-items: center;

}

.keim-sweeper .floater-icon svg {

    width: 100%;
    height: 100%;

    display: block;

}

.keim-sweeper .floater-value {

    line-height: 1;

    display: block;

}

.keim-sweeper .floater.shield {

    color: #176e46;

    background: rgba(247, 255, 250, .94);

}

.keim-sweeper .floater.shield .floater-icon {

    animation: ks-heart-shield-icon 1.12s ease-out forwards;

}

.keim-sweeper .floater.shield .floater-icon img {

    width: 100%;
    height: 100%;
    object-fit: contain;

    display: block;

}

@keyframes ks-heart-shield-icon {

    0%, 10% {

        filter: grayscale(0);
        transform: scale(1);

    }

    65% {

        filter: grayscale(.65);
        transform: scale(.6);

    }

    100% {

        filter: grayscale(1);
        transform: scale(.15);

    }

}

@keyframes ks-float {

    0% {

        opacity: 0;

        transform: translate(-50%, -20%) scale(.92);

    }

    10% {

        opacity: 1;

        transform: translate(-50%, -50%) scale(1);

    }

    48% {

        opacity: 1;

        transform: translate(-50%, -78%) scale(1);

    }

    75% {

        opacity: .12;

        transform: translate(-50%, -100%) scale(1);

    }

    100% {

        opacity: 0;

        transform: translate(-50%, -120%) scale(.98);

    }

}

/* === 04. Game selection and results === */

.keim-sweeper .overlay {

    background: rgba(13, 22, 39, .12);

    padding: 1.25rem;

    display: grid;
    place-items: center;

    position: fixed;
    inset: 0;
    z-index: 80;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

}

.keim-sweeper .choice-overlay {

    background: rgba(13, 22, 39, .24);

    z-index: 90;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

}

.keim-sweeper .choice-dialog {

    width: min(22.25rem, 100%);

    text-align: left;

    padding: clamp(1.1rem, 3vw, 1.6rem);

}

.keim-sweeper .choice-dialog h3 {

    color: #218d57;
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));

    margin-bottom: .2rem;

}

.keim-sweeper .choice-intro {

    font-size: var(--text-xs) !important;

    margin: 0 0 1.1rem !important;

}

.keim-sweeper .choice-button {

    width: 100%;

    text-align: left;

    border-radius: .9rem;
    background: color-mix(in oklab, var(--panel), var(--frame) 14%);

    gap: .75rem;
    padding: .9rem .75rem;
    margin: .6rem 0;

    display: flex;
    align-items: center;

    transition: background .15s, border-color .15s;

}

.keim-sweeper .choice-button:hover:not(:disabled) {

    background: color-mix(in oklab, var(--panel), #b8e5cd 24%);
    border-color: #2e9c69;

}

.keim-sweeper .choice-button.daily {

    border-color: color-mix(in oklab, #268957, var(--frame-strong) 35%);

}

.keim-sweeper .choice-button:disabled {

    opacity: .5;
    cursor: not-allowed;

}

.keim-sweeper .choice-icon {

    width: 1.9rem;

    color: var(--ink);
    font-size: var(--text-2xl);
    text-align: center;

    display: grid;
    place-items: center;
    flex: 0 0 1.9rem;

}

.keim-sweeper .ui-icon {

    width: 1.1em;
    height: 1.1em;

    vertical-align: -.16em;

    display: inline-block;
    flex: 0 0 auto;

    overflow: visible;

}

.keim-sweeper .choice-icon .ui-icon {

    width: 1.5rem;
    height: 1.5rem;

    stroke-width: 1.9;

}

.keim-sweeper .footer-bottom .ui-icon {

    width: 1rem;
    height: 1rem;

    stroke-width: 2;

}

.keim-sweeper .choice-copy {

    gap: .1rem;

    display: grid;

}

.keim-sweeper .choice-copy strong {

    font-weight: 800;
    line-height: 1.2;

}

.keim-sweeper .choice-copy small {

    line-height: 1.3;
    color: var(--muted);

}

.keim-sweeper .choice-level {

    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--muted);

    gap: .5rem;
    margin-top: .75rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.keim-sweeper .choice-level select {

    max-width: 9rem;

    padding: .4rem .5rem;

}

.keim-sweeper .choice-pane[hidden] {

    display: none !important;

}

.keim-sweeper .difficulty-option {

    min-height: 2.9rem;

    padding: .6rem .9rem;

    justify-content: space-between;

}

.keim-sweeper .difficulty-option strong {

    font-size: var(--text-sm);
    font-weight: 800;

}

.keim-sweeper .difficulty-icon {

    width: 2.1rem;
    height: 2.1rem;

    border-radius: 50%;

    flex: 0 0 2.1rem;
    display: block;

}

@media (prefers-color-scheme: light) {

    .keim-sweeper .difficulty-icon {

        background: radial-gradient(circle, rgba(255, 255, 255, .82) 25%, rgba(255, 255, 255, .34) 60%, transparent 100%);

    }

}

.keim-sweeper .difficulty-icon::before {

    width: 100%;
    height: 100%;

    content: '';
    background-color: var(--difficulty-color);
    -webkit-mask-image: var(--difficulty-mask);
    mask-image: var(--difficulty-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    display: block;

}

.keim-sweeper .difficulty-option[data-level="0"] {

    --difficulty-mask: url('../images/icons/difficulties/1-very-easy.svg');
    --difficulty-color: #3ebd50;

}

.keim-sweeper .difficulty-option[data-level="1"] {

    --difficulty-mask: url('../images/icons/difficulties/2-easy.svg');
    --difficulty-color: #bbdd14;

}

.keim-sweeper .difficulty-option[data-level="2"] {

    --difficulty-mask: url('../images/icons/difficulties/3-normal.svg');
    --difficulty-color: #ffd600;

}

.keim-sweeper .difficulty-option[data-level="3"] {

    --difficulty-mask: url('../images/icons/difficulties/4-hard.svg');
    --difficulty-color: #ff970e;

}

.keim-sweeper .difficulty-option[data-level="4"] {

    --difficulty-mask: url('../images/icons/difficulties/5-very-hard.svg');
    --difficulty-color: #ef261c;

}

.keim-sweeper .choice-pane .choice-seed {

    margin: 0 0 .9rem;

}

.keim-sweeper .choice-pane .choice-seed[hidden] {

    display: none !important;

}

@media (max-height: 27.5em) {

    .keim-sweeper .difficulty-icon {
        width: 1.6rem;
        height: 1.6rem;
        flex-basis: 1.6rem;
    }

    .keim-sweeper .choice-pane .choice-seed {

        margin-bottom: .5rem;

    }

    .keim-sweeper .difficulty-list {

        gap: .4rem;

        display: grid;
        grid-template-columns: 1fr;

    }

    .keim-sweeper .difficulty-option {

        min-height: 2.25rem;

        margin: 0;
        padding: .4rem .6rem;

    }

    .keim-sweeper .difficulty-option:last-child {

        grid-column: 1/-1;

    }

}

@media (max-width: 22.5em) {

    .keim-sweeper .world.choice-open {

        min-height: 22.5rem;

    }

}

.keim-sweeper .overlay.finished {

    background: rgba(13, 22, 39, .27);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

}

.keim-sweeper .overlay[hidden] {

    display: none !important;

}

.keim-sweeper .dialog {

    width: min(23.75rem, 100%);

    text-align: center;

    border: 1px solid var(--panel-border);
    border-radius: 1.4rem;
    box-shadow: 0 18px 60px rgba(4, 10, 18, .28);

    padding: clamp(1rem, 3vw, 1.5rem);

    position: relative;

}

.keim-sweeper .dialog h3 {

    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    line-height: 1.15;
    font-weight: 800;
    color: var(--ink);

    margin: 0 0 .5rem;

}

.keim-sweeper .overlay .dialog h3 {

    padding-inline: 2.4rem;

    overflow-wrap: anywhere;

}

@media (max-width: 37.5em) {

    .keim-sweeper .overlay .dialog h3 {

        font-size: clamp(1.5rem, 5.7vw, var(--text-4xl));

    }

}

.keim-sweeper .dialog p {

    color: var(--muted);
    font-size: var(--text-sm);

    margin: 0 0 .25rem;

}

.keim-sweeper .dialog .big {

    font-size: var(--text-4xl);
    font-weight: 900;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--ink);

    margin: .5rem 0 .25rem;

    display: block;

}

.keim-sweeper .actions {

    gap: .5rem;
    margin-top: .75rem;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

/* Finished games: actions above the full-width game selection. */
.keim-sweeper .actions.can-retry,
.keim-sweeper .actions.daily-finish {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .actions.can-retry > .btn,
.keim-sweeper .actions.daily-finish > .btn {

    width: 100%;
    min-width: 0;

    white-space: nowrap;

}

.keim-sweeper .actions.can-retry #ks-retry {

    grid-column: 1;
    grid-row: 1;

}

.keim-sweeper .actions.can-retry #ks-view-map {

    grid-column: 2;
    grid-row: 1;
    flex: none;

}

.keim-sweeper .actions.can-retry #ks-again {

    grid-column: 1 / -1;
    grid-row: 2;

}

.keim-sweeper .actions.daily-finish #ks-save-button {

    grid-column: 1;
    grid-row: 1;

}

.keim-sweeper .actions.daily-finish #ks-view-map {

    grid-column: 1 / -1;
    grid-row: 1;
    flex: none;

}

.keim-sweeper .actions.daily-finish.can-save #ks-view-map {

    grid-column: 2;

}

.keim-sweeper .actions.daily-finish #ks-again {

    grid-column: 1 / -1;
    grid-row: 2;

}

@media (max-width: 23em) {

    .keim-sweeper .actions.can-retry,
    .keim-sweeper .actions.daily-finish {

        gap: .35rem;

    }

    .keim-sweeper .actions.can-retry > .btn,
    .keim-sweeper .actions.daily-finish > .btn {

        gap: .25rem;
        padding-inline: .2rem;
        font-size: .84rem;

    }

    .keim-sweeper .actions.can-retry .ui-icon,
    .keim-sweeper .actions.daily-finish .ui-icon {

        width: .875rem;
        height: .875rem;
        flex-basis: .875rem;

    }

}

.keim-sweeper .btn {

    min-height: 2.6rem;

    color: var(--ink);
    font-weight: 800;

    border-radius: .75rem;
    border: 1px solid color-mix(in oklab, var(--frame-strong), transparent 30%);
    background: color-mix(in oklab, var(--panel), var(--frame) 14%);

    padding: .75rem 1rem;

}

.keim-sweeper .btn.primary {

    background: #1f7a43;
    border-color: #1f7a43;

}

/* Daily charts name entry. */
.keim-sweeper .entry {

    width: 100%;

    gap: .5rem;
    margin: .85rem auto 0;

    display: grid;
    justify-items: center;

}

.keim-sweeper .entry-title {

    font-size: var(--text-xs);
    font-weight: 750;
    color: var(--ink);
    text-align: center;

}

.keim-sweeper .entry-fields {

    min-width: 0;

    gap: .35rem;

    display: flex;
    justify-content: center;

}

.keim-sweeper .entry-fields select {

    width: 3rem;
    height: 3.15rem;

    color: var(--ink);
    font: 800 var(--text-3xl)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    text-align: center;
    text-align-last: center;

    border: 1px solid var(--frame-strong);
    border-radius: .75rem;
    background: color-mix(in oklab, var(--panel), var(--frame) 8%);

    padding: 0 .25rem;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

}

.keim-sweeper .entry-fields select:focus-visible {

    outline: .1rem solid #e5b12d;
    outline-offset: .1rem;

}

.keim-sweeper .entry-error {

    max-width: 16.25rem;

    font-size: var(--text-xs) !important;
    color: #bf3950 !important;

    margin: 0 !important;

    justify-self: center;

}

.keim-sweeper .entry-error[hidden] {

    display: none !important;

}

.keim-sweeper .actions #ks-save-button:disabled {

    opacity: .45;
    cursor: not-allowed;

}

@media (max-width: 22.5em) {

    .keim-sweeper .entry {

        gap: .4rem;

    }

    .keim-sweeper .entry-fields select {

        width: 2.55rem;
        height: 2.9rem;

    }

}

.keim-sweeper .small[hidden] {

    display: none !important;

}

.keim-sweeper .entry[hidden] {

    display: none !important;

}

.keim-sweeper .small {

    font-size: var(--text-xs);
    color: var(--muted);

    margin-top: .6rem;

    display: block;

}

@media (max-width: 34.5em) {

    .keim-sweeper .gamebar {

        gap: .5rem;
        padding: .5rem .1rem .75rem;

    }

    .keim-sweeper .identity strong {

        font-size: clamp(var(--text-lg), 5vw, var(--text-2xl));

    }

    .keim-sweeper .identity span {

        font-size: var(--text-2xs);
        letter-spacing: .04em;

    }

    .keim-sweeper .game-footer {

        padding: .5rem .2rem .1rem;

    }

}

@media (max-width: 22em) {

    .keim-sweeper .identity span {

        display: none;

    }

}

/* === 05. Fullscreen and application shell === */

.keim-sweeper:fullscreen {

    height: 100vh;

    background: var(--world-low);

    margin: 0;
    padding: 0;

    overflow: hidden;

}

.keim-sweeper:fullscreen .score-goal {

    width: min(40vw, 16.25rem);
    min-height: 2rem;

    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: .75rem;
    box-shadow: 0 3px 13px rgba(8, 14, 28, .17);

    padding: .5rem .6rem;

    position: absolute;
    top: .6rem;
    right: .75rem;
    z-index: 42;

}

.keim-sweeper:fullscreen .gamebar {

    display: none;

}

.keim-sweeper:fullscreen .game-footer {

    margin: 0;
    padding: 0;

    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 41;

    pointer-events: none;

}

.keim-sweeper:fullscreen .game-footer > * {

    display: none;

}

.keim-sweeper:fullscreen .game-footer .mode-return:not([hidden]),
.keim-sweeper:fullscreen .game-footer .mode-restart:not([hidden]),
.keim-sweeper:fullscreen .game-footer .seed-share:not([hidden]) {

    background: var(--panel);
    border: 1px solid var(--frame-strong);
    border-radius: .6rem;
    box-shadow: 0 3px 13px rgba(8, 14, 28, .15);

    padding: .5rem .6rem;

    pointer-events: auto;

}

.keim-sweeper:fullscreen .world {

    width: min(100vw, 122.368vh);
    max-width: 100%;
    max-height: 100vh;

    border-radius: 0;

    flex: none;

}

.keim-sweeper:fullscreen .reward-effects {

    z-index: 30;

}

/* Application shell and fixed HUD geometry. */

.keim-sweeper {

    --hud-top: 4rem;
    --hud-bottom: 3rem;
    --hud-spacing: .75rem;
    --hud-glass: rgba(247, 248, 252, .94);
    --hud-line: var(--frame-strong);
    --content-width: 76rem;

}

@media (prefers-color-scheme: dark) {

    .keim-sweeper {

        --hud-glass: rgba(27, 31, 40, .94);

    }

}

@media (max-width: 47.5em) {

    .keim-sweeper {

        --hud-top: 3.25rem;
        --hud-bottom: 2.6rem;
        --hud-spacing: 0;

    }

}

html,
body {

    height: 100%;

    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;

}

body {

    padding: 0;

}

.keim-sweeper {

    box-sizing: border-box;
    max-width: none;
    width: 100%;
    height: 100svh;
    min-height: 0;

    margin: 0;
    padding: calc(var(--hud-top) + var(--hud-spacing) + env(safe-area-inset-top)) clamp(.5rem, 1.6vw, 1.1rem) calc(var(--hud-bottom) + var(--hud-spacing) + env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;

}

.keim-sweeper .gamebar,
.keim-sweeper .game-footer {

    width: 100%;

    margin: 0;

    position: fixed;
    left: 0;
    right: 0;
    z-index: 60;

    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    touch-action: none;

}

.keim-sweeper .gamebar {

    height: calc(var(--hud-top) + env(safe-area-inset-top));
    min-height: 0;

    border-bottom: 1px solid var(--hud-line);

    gap: 1rem;
    padding: env(safe-area-inset-top) max(.9rem, env(safe-area-inset-right)) 0 max(.9rem, env(safe-area-inset-left));

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    top: 0;
    bottom: auto;

}

.keim-sweeper .hud-header-inner {

    min-height: 0;
    width: auto;

    margin: 0;

    display: flex;
    align-items: center;
    flex: 0 0 auto;

}

.keim-sweeper .identity {

    display: block;

}

.keim-sweeper .identity strong {

    font-size: clamp(var(--text-xl), 2.3vw, var(--text-2xl));

}

.keim-sweeper .identity span {

    display: none;

}

.keim-sweeper .score-goal {

    max-width: 28.75rem;
    width: auto;
    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;
    gap: .6rem;

    flex: 1 1 12.5rem;

}

.keim-sweeper .score-goal-track {

    height: .5rem;

}

.keim-sweeper .score-goal-label {

    font-size: var(--text-xs);

}

.keim-sweeper .game-footer {

    height: calc(var(--hud-bottom) + env(safe-area-inset-bottom));
    min-height: 0;

    border-top: 1px solid var(--hud-line);

    padding: 0 max(.9rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.9rem, env(safe-area-inset-left));

    display: flex;
    align-items: center;

    top: auto;
    bottom: 0;

}

.keim-sweeper .hud-footer-inner {

    min-width: 0;
    width: 100%;
    max-width: 53.75rem;

    gap: .6rem;
    margin: 0 auto;

}

.keim-sweeper .world {

    width: 100%;
    max-width: 53.75rem;
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;

    border-radius: clamp(.9rem, 2.6vw, 1.75rem);

    margin: 0 auto;

    flex: 1 1 auto;

    touch-action: none;

}

.keim-sweeper .cell {

    touch-action: none;

}

.keim-sweeper .board-pan {

    will-change: transform;

}

@media (hover: hover) and (pointer: fine) {

    .keim-sweeper .world:not(.choice-open),
    .keim-sweeper .world:not(.choice-open) .cell:not(.reach):not(.player),
    .keim-sweeper .world:not(.choice-open) .cell:disabled {

        cursor: grab;

    }

    .keim-sweeper .world.is-panning,
    .keim-sweeper .world.is-panning .cell {

        cursor: grabbing;

    }

}

.keim-sweeper .reward-effects {

    z-index: 30;

}

@media (max-width: 37.5em) {

    .keim-sweeper {

        --hud-top: 3.25rem;
        --hud-bottom: 2.6rem;
        --hud-spacing: 0;

    }

    .keim-sweeper {

        height: 100svh;

        padding: 0;

    }

    .keim-sweeper .gamebar {

        gap: .6rem;
        padding-left: max(.6rem, env(safe-area-inset-left));
        padding-right: max(.6rem, env(safe-area-inset-right));

    }

    .keim-sweeper .hud-header-inner {

        min-height: 0;

    }

    .keim-sweeper .identity strong {

        font-size: clamp(var(--text-lg), 5vw, var(--text-xl));

    }

    .keim-sweeper .score-goal {

        gap: .5rem;
        padding: 0;

    }

    .keim-sweeper .score-goal-track {

        height: .5rem;

    }

    .keim-sweeper .score-goal-label {

        min-width: 4rem;

        font-size: var(--text-xs);

    }

    .keim-sweeper .world {

        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;

        border: 0;
        border-radius: 0;
        box-shadow: none;

        margin: 0;

    }

    .keim-sweeper .world.choice-open {

        min-height: 0;

    }

    .keim-sweeper .hud-footer-inner {

        gap: .5rem;

    }

    .keim-sweeper .game-footer {

        padding-left: max(.6rem, env(safe-area-inset-left));
        padding-right: max(.6rem, env(safe-area-inset-right));

    }

}

@media (max-width: 22.5em) {

    .keim-sweeper .world.choice-open {

        min-height: 0;

    }

}

@media (max-width: 23.75em) {

    .keim-sweeper .game-footer.random-playing .hud-footer-inner {

        gap: .4rem;

    }

    .keim-sweeper .game-footer.random-playing .footer-bottom {

        white-space: nowrap;

        padding: .4rem 0;

    }

    .keim-sweeper .game-footer.random-playing .footer-bottom .ui-icon {

        width: .9rem;
        height: .9rem;

    }

}

.keim-sweeper:fullscreen {

    max-width: none;
    width: 100vw;
    height: 100dvh;
    min-height: 0;

    background: var(--page);

    padding: calc(var(--hud-top) + var(--hud-spacing) + env(safe-area-inset-top)) 0 calc(var(--hud-bottom) + var(--hud-spacing) + env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.keim-sweeper:fullscreen .gamebar {

    display: flex;

}

.keim-sweeper:fullscreen .score-goal {

    width: auto;
    max-width: 28.75rem;
    min-height: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    padding: 0;

    position: relative;
    top: auto;
    right: auto;
    z-index: auto;

}

.keim-sweeper:fullscreen .game-footer {

    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;

    pointer-events: auto;

}

.keim-sweeper:fullscreen .game-footer > * {

    display: flex;

}

.keim-sweeper:fullscreen .game-footer .mode-return:not([hidden]),
.keim-sweeper:fullscreen .game-footer .mode-restart:not([hidden]),
.keim-sweeper:fullscreen .game-footer .seed-share:not([hidden]) {

    background: transparent;
    border: 0;
    box-shadow: none;

    padding: .4rem .1rem;

    display: inline-flex;

}

.keim-sweeper:fullscreen .world {

    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;

    border-radius: 0;

    flex: 1 1 auto;

}

@media (max-width: 37.5em) {

    .keim-sweeper:fullscreen {

        padding: 0;

    }

    .keim-sweeper:fullscreen .world {

        width: 100%;
        max-width: none;
        height: 100%;

        border: 0;
        border-radius: 0;
        box-shadow: none;

    }

}

/* === 06. Rules and legal dialogs === */

.keim-sweeper .rules-trigger {

    min-width: 0;

    font-size: clamp(var(--text-xl), 2.3vw, var(--text-2xl));
    letter-spacing: -.055em;
    line-height: 1.05;
    color: #1f8b53;
    white-space: nowrap;
    text-align: left;

    border: 0;
    background: none;

    gap: .5rem;
    padding: .4rem 0;

    display: inline-flex;
    align-items: center;

}

.keim-sweeper .identity .rules-trigger > span {

    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    font-weight: inherit;

    display: inline;

}

.keim-sweeper .rules-trigger:hover {

    color: #1ca567;

}

.keim-sweeper .rules-trigger-info {

    width: 1rem;
    height: 1rem;

    stroke-width: 1.8;

    flex: 0 0 auto;

    opacity: .65;

}

.keim-sweeper .rules-backdrop {

    background: rgba(8, 15, 27, .60);

    padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));

    display: grid;
    place-items: center;

    position: fixed;
    inset: 0;
    z-index: 100;

    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    overscroll-behavior: contain;

}

.keim-sweeper .rules-backdrop[hidden] {

    display: none !important;

}

.keim-sweeper #ks-legal {

    display: none;

}

.keim-sweeper #ks-legal:target,
.keim-sweeper #ks-legal.is-open {

    display: grid;

}

.keim-sweeper .rules-card {

    --text-xs: 1rem;
    --text-sm: 1.125rem;
    --text-md: 1.25rem;

    width: min(37.5rem, 100%);
    max-height: 100%;
    min-height: 0;

    color: var(--ink);

    border: 1px solid var(--frame-strong);
    border-radius: 1.1rem;
    background: var(--page);
    box-shadow: 0 22px 65px rgba(4, 10, 21, .27);

    display: flex;
    flex-direction: column;

    overflow: hidden;

}

.keim-sweeper .rules-card-head {

    min-height: 4.75rem;

    border-bottom: 1px solid var(--frame-strong);

    gap: .9rem;
    padding: 9px 1.8rem .5rem;

    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.keim-sweeper .rules-card h2 {

    font-size: var(--text-2xl);
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: -.035em;

    margin: 0;

}

.keim-sweeper .dialog-close {

    width: 2.25rem;
    height: 2.25rem;

    color: var(--muted);

    border: 0;
    border-radius: .5rem;
    background: transparent;

    display: grid;
    place-items: center;
    flex: 0 0 2.25rem;

    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;

}

.keim-sweeper .dialog-close-icon {

    width: 1.25rem;
    height: 1.25rem;

    stroke-width: 1.8;

}

.keim-sweeper .dialog-close:hover {

    color: var(--ink);

    background: var(--frame);

}

.keim-sweeper .rules-close {

    position: static;

}

.keim-sweeper .rules-scroll {

    min-height: 0;

    padding: 1.4rem 1.9rem 1.75rem;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

}

.keim-sweeper .rules-intro {

    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.65;

    margin: 0;

}

.keim-sweeper .rules-intro strong {

    font-weight: 760;

}

.keim-sweeper .rules-section {

    margin-top: 1.5rem;

}

.keim-sweeper #ks-legal .rules-section:first-of-type {

    margin-top: 0;

}

.keim-sweeper .rules-section-title {

    font-size: var(--text-md);
    font-weight: 760;
    line-height: 1.3;
    letter-spacing: -.012em;

    margin: 0 0 .75rem;

}

.keim-sweeper .rules-copy {

    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.65;

    margin: 0;

}

.keim-sweeper .rules-score-grid {

    column-gap: 1.5rem;
    row-gap: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .rules-score-item {

    min-width: 0;

    border-top: 1px solid var(--frame-strong);

    gap: .6rem;
    padding: .75rem .1rem;

    display: flex;
    align-items: center;

}

.keim-sweeper .rules-score-item:nth-child(-n+2) {

    border-top: 0;

}

.keim-sweeper .rules-score-symbol {

    width: 1.4rem;
    height: 1.4rem;

    color: var(--muted);

    display: grid;
    place-items: center;
    flex: 0 0 1.4rem;

}

.keim-sweeper .rules-score-item.star .rules-score-symbol {

    color: #c99b29;

}

.keim-sweeper .rules-score-item.heart .rules-score-symbol {

    color: #bd4261;

}

.keim-sweeper .rules-score-item.defense .rules-score-symbol {

    color: #278f73;

}

.keim-sweeper .rules-score-item.virus .rules-score-symbol {

    color: #b75160;

}

.keim-sweeper .rules-icon {

    width: 1.25rem;
    height: 1.25rem;

    display: block;
    flex: 0 0 auto;

}

.keim-sweeper .rules-score-info {

    min-width: 0;

    gap: .1rem;

    flex: 1 1 auto;
    display: grid;

}

.keim-sweeper .rules-score-info strong {

    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.28;

}

.keim-sweeper .rules-score-info small {

    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--muted);

}

.keim-sweeper .rules-score-value {

    font-size: var(--text-md);
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #18855a;

    flex: none;

}

.keim-sweeper .rules-score-item.negative .rules-score-value {

    color: #b04b5f;

}

.keim-sweeper .rules-detail {

    gap: .75rem;

    display: flex;
    align-items: flex-start;

}

.keim-sweeper .rules-detail-icon {

    width: 1.5rem;
    height: 1.5rem;

    color: #287a9c;

    display: grid;
    place-items: center;
    flex: 0 0 1.5rem;

}

.keim-sweeper .rules-detail-copy {

    min-width: 0;

    flex: 1;

}

.keim-sweeper .rules-detail-copy strong {

    font-size: var(--text-sm);
    font-weight: 750;

}

.keim-sweeper .rules-detail-copy p {

    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.6;

    margin: .25rem 0 0;

}

.keim-sweeper .rules-meter {

    max-width: 15rem;

    gap: .25rem;
    margin: .9rem 0 .6rem;

    display: flex;

}

.keim-sweeper .rules-meter span {

    height: .4rem;

    border-radius: .2rem;
    background: var(--frame-strong);

    flex: 1 1 0;

}

.keim-sweeper .rules-meter span.lit {

    background: #edbb37;

}

.keim-sweeper .rules-progress-title {

    font-size: var(--text-xs);
    font-weight: 750;
    color: var(--ink);

    margin: .9rem 0 .4rem;

}

.keim-sweeper .rules-progress-row {

    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--muted);

    border-top: 1px solid var(--frame-strong);

    gap: .75rem;
    padding: .5rem 0;

    display: flex;
    align-items: baseline;
    justify-content: space-between;

}

.keim-sweeper .rules-progress-row b {

    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 760;
    font-variant-numeric: tabular-nums;

    flex: none;

}

.keim-sweeper .rules-progress-note {

    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.55;

    margin: .5rem 0 0;

}

.keim-sweeper .rules-mode-row {

    gap: .6rem;
    padding: .6rem 0;

    display: flex;
    align-items: flex-start;

}

.keim-sweeper .rules-mode-row + .rules-mode-row {

    border-top: 1px solid var(--frame-strong);

}

.keim-sweeper .rules-mode-row .rules-icon {

    color: var(--muted);

    margin-top: .1rem;

}

.keim-sweeper .rules-mode-row strong {

    font-size: var(--text-sm);
    font-weight: 720;

    margin-bottom: .1rem;

    display: block;

}

.keim-sweeper .rules-mode-row p {

    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.55;

    margin: 0;

}

.keim-sweeper .rules-note {

    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.6;

    margin: 0;

}

.keim-sweeper .rules-note + .rules-note {

    margin-top: .5rem;

}

.keim-sweeper .rules-card kbd {

    min-width: 1.65em;

    color: var(--ink);
    font: 650 .9em/1.35 Zain, system-ui, sans-serif;
    text-align: center;
    white-space: nowrap;

    border: 1px solid var(--frame-strong);
    border-radius: .38em;
    background: var(--frame);
    box-shadow: inset 0 -1px 0 rgba(8, 18, 30, .10);

    padding: .08em .38em;

    display: inline-block;

}

@media (max-width: 37.5em) {

    .keim-sweeper .rules-trigger {

        font-size: clamp(var(--text-lg), 5vw, var(--text-xl));

    }

    .keim-sweeper .rules-trigger-info {

        width: .9rem;
        height: .9rem;

    }

    .keim-sweeper .rules-card-head {

        min-height: 4rem;

        padding: .5rem 1.2rem;

    }

    .keim-sweeper .rules-scroll {

        padding: 1.1rem 1.25rem 1.4rem;

    }

    .keim-sweeper .rules-card h2 {

        font-size: var(--text-2xl);

    }

    .keim-sweeper .rules-section {

        margin-top: 1.4rem;

    }

    .keim-sweeper .rules-score-grid {

        grid-template-columns: 1fr;

    }

    .keim-sweeper .rules-score-item:nth-child(2) {

        border-top: 1px solid var(--frame-strong);

    }

}

/* A landscape phone uses mobile behavior even when it exceeds the regular mobile breakpoint. */

@media (pointer: coarse) and (orientation: landscape) and (max-height: 43.75em) {

    .keim-sweeper {

        --hud-top: 2.6rem;
        --hud-bottom: 2.4rem;
        --hud-spacing: 0;

    }

    .keim-sweeper,
    .keim-sweeper:fullscreen {

        width: 100%;
        height: 100svh;

        padding: 0;

    }

    .keim-sweeper .gamebar {

        height: calc(var(--hud-top) + env(safe-area-inset-top));

        padding-left: max(.75rem, env(safe-area-inset-left));
        padding-right: max(.75rem, env(safe-area-inset-right));
        gap: .6rem;

    }

    .keim-sweeper .identity {

        display: block;

    }

    .keim-sweeper .rules-trigger {

        font-size: var(--text-md);

    }

    .keim-sweeper .score-goal {

        min-width: 0;
        max-width: 28.75rem;

        gap: .6rem;
        padding: 0;

        flex: 1 1 15rem;

    }

    .keim-sweeper .score-goal-label {

        font-size: var(--text-xs);

    }

    .keim-sweeper .game-footer {

        height: calc(var(--hud-bottom) + env(safe-area-inset-bottom));

        padding-left: max(.75rem, env(safe-area-inset-left));
        padding-right: max(.75rem, env(safe-area-inset-right));

    }

    .keim-sweeper .hud-footer-inner {

        max-width: none;

        gap: .6rem;

    }

    .keim-sweeper .game-footer.random-playing .mode-label {

        display: none;

    }

    .keim-sweeper .world,
    .keim-sweeper:fullscreen .world {

        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;

        border: 0;
        border-radius: 0;
        box-shadow: none;

        margin: 0;

    }

    .keim-sweeper .world.choice-open {

        min-height: 0;

    }

    .keim-sweeper .choice-overlay,
    .keim-sweeper .overlay {

        padding: .4rem .75rem;

    }

    .keim-sweeper .choice-dialog {

        width: min(32.5rem, 100%);
        max-height: calc(100% - .25rem);

        border-radius: 1rem;

        padding: .75rem 1rem;

        overflow-y: auto;
        overscroll-behavior: contain;

    }

    .keim-sweeper .choice-dialog h3 {

        font-size: var(--text-xl);

    }

    .keim-sweeper .choice-intro {

        margin-bottom: .4rem !important;

    }

    .keim-sweeper .choice-button {

        padding: .5rem .6rem;
        margin: .4rem 0;

    }

    .keim-sweeper .choice-level {

        margin-top: .4rem;

    }

    .keim-sweeper .choice-seed {

        margin-top: .4rem;

    }

    .keim-sweeper .overlay .dialog {

        max-height: calc(100% - .25rem);

        padding: .9rem 1.1rem;

        overflow: auto;

    }

    .keim-sweeper .rules-card {

        width: min(40.75rem, 100%);

    }

    .keim-sweeper .rules-card-head {

        padding: .6rem 1.1rem;

    }

    .keim-sweeper .rules-scroll {

        padding: .75rem 1.1rem;

    }

    .keim-sweeper:fullscreen .world {

        border: 0;
        border-radius: 0;
        box-shadow: none;

    }

}

/* === 07. Grand Prix and daily charts === */
.keim-sweeper .actions:not(.gp-round-actions) .gp-cancel-icon,
.keim-sweeper .actions.gp-round-actions .game-menu-icon {

    display: none;

}

.keim-sweeper .actions.gp-round-actions {

    gap: .5rem;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .actions.gp-round-actions > .btn {

    min-width: 0;
    width: 100%;

    white-space: nowrap;

    padding-inline: .4rem;

}

.keim-sweeper .actions.gp-round-actions #ks-gp-next {

    grid-column: 1 / -1;
    grid-row: 1;

}

.keim-sweeper .actions.gp-round-actions #ks-again {

    grid-column: 1;
    grid-row: 2;

}

.keim-sweeper .actions.gp-round-actions #ks-view-map {

    grid-column: 2;
    grid-row: 2;

}

.keim-sweeper .actions.gp-round-actions .ui-icon {

    width: 1rem;
    height: 1rem;

    flex: 0 0 1rem;

}

@media (max-width: 23em) {
    .keim-sweeper .actions.gp-round-actions {
        gap: .35rem;
    }

    .keim-sweeper .actions.gp-round-actions > .btn {
        gap: .25rem;
        padding-inline: .2rem;
        font-size: .84rem;
    }

    .keim-sweeper .actions.gp-round-actions .ui-icon {
        width: .875rem;
        height: .875rem;
        flex-basis: .875rem;
    }
}

@media (max-width: 19em) {
    .keim-sweeper .actions.gp-round-actions > .btn {
        gap: .1rem;
        padding-inline: .1rem;
        font-size: .72rem;
    }

    .keim-sweeper .actions.gp-round-actions .ui-icon {
        width: .75rem;
        height: .75rem;
        flex-basis: .75rem;
    }
}

/* A surpassed score receives subtle, repeating sparkles beside the number. */
.keim-sweeper .result-score-current {

    display: inline-block;

    position: relative;

}

.keim-sweeper .result-score-spark {

    color: #ffe49b;
    font: 700 .9rem/1 system-ui, sans-serif;
    text-shadow: 0 0 4px rgba(255, 238, 164, .95), 0 0 9px rgba(246, 181, 43, .8);

    position: absolute;
    top: -.35rem;
    left: -.5rem;

    opacity: 0;
    pointer-events: none;

}

.keim-sweeper .result-score-spark:nth-child(2) {

    top: -.5rem;
    left: auto;
    right: -.5rem;

}

.keim-sweeper .result-score-spark:nth-child(3) {

    top: auto;
    bottom: -.25rem;
    left: 55%;

}

@media (prefers-reduced-motion: no-preference) {

    :root:not([data-reduce-motion="true"]) .keim-sweeper .result-score-spark {

        animation: ks-result-score-spark 4s ease-out infinite;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .result-score-spark:nth-child(2) {

        animation-delay: .16s;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .result-score-spark:nth-child(3) {

        animation-delay: .32s;

    }

}

@keyframes ks-result-score-spark {

    0%, 3% {
        opacity: 0;
        transform: translateY(.3rem) scale(.45);
    }

    8% {
        opacity: 1;
        transform: translateY(-.2rem) scale(1);
    }

    20% {
        opacity: 0;
        transform: translateY(-.9rem) scale(.55);
    }

    21%, 100% {
        opacity: 0;
    }

}

@media (max-width: 19em) {

    .keim-sweeper .actions.can-retry > .btn,
    .keim-sweeper .actions.daily-finish > .btn {

        gap: .1rem;
        padding-inline: .1rem;
        font-size: .74rem;

    }

    .keim-sweeper .actions.can-retry .ui-icon,
    .keim-sweeper .actions.daily-finish .ui-icon {

        width: .75rem;
        height: .75rem;
        flex-basis: .75rem;

    }

}

/* Finished games can be inspected without an overlay covering the map. */

.keim-sweeper .actions .view-map-btn {

    gap: .5rem;

    flex: 1 0 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.keim-sweeper .actions .view-map-btn[hidden] {

    display: none !important;

}

.keim-sweeper .view-map-btn .ui-icon {

    width: 1rem;
    height: 1rem;

}

.keim-sweeper .game-footer .sound-toggle {

    min-width: 2rem;

    padding-inline: .35rem;

    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.keim-sweeper .sound-toggle .sound-muted,
.keim-sweeper .sound-toggle[aria-pressed="false"] .sound-waves {

    display: none;

}

.keim-sweeper .sound-toggle[aria-pressed="false"] .sound-muted {

    display: initial;

}

.keim-sweeper .game-footer.reviewing .footer-primary .mode-restart {

    display: none !important;

}

.keim-sweeper .world.review-mode .cell {

    pointer-events: none;

}

/* Grand Prix shares the existing calm, compact dialog style. */

.keim-sweeper .choice-button[hidden],
.keim-sweeper .gp-history-link[hidden],
.keim-sweeper .gp-results[hidden],
.keim-sweeper .gp-chart-section[hidden],
.keim-sweeper .actions .btn[hidden] {

    display: none !important;

}

.keim-sweeper .choice-button.resume-action {

    border-color: #27965c;
    background: color-mix(in oklab, var(--panel), #73d69f 18%);

}

.keim-sweeper .gp-history-link {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .2em;

    background: none;
    border: 0;

    margin: .25rem 0 .1rem;
    padding: .2rem 0;

}

.keim-sweeper .gp-results {

    text-align: left;

    margin-top: .9rem;

}

.keim-sweeper .gp-chart-section {

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-md);

    padding: .75rem .75rem 1.25rem .75rem;
    margin-top: .75rem;
    margin-bottom: 1.5rem;

}

.keim-sweeper .gp-chart-section h4 {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: .01em;

    margin: 0 0 .75rem;

}

.keim-sweeper .gp-chart {

    height: 7rem;

    border-bottom: 1px solid var(--frame-strong);

    gap: .5rem;
    padding: 0 .25rem;

    display: flex;
    align-items: flex-end;
    justify-content: center;

}

.keim-sweeper .gp-chart-col {

    min-width: 0;
    max-width: 2.9rem;
    height: 100%;

    gap: .25rem;

    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    position: relative;

}

.keim-sweeper .gp-chart-num {

    font-weight: 800;
    font-size: var(--text-2xs);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;

}

.keim-sweeper .gp-chart-bar-stack {

    width: min(100%, 1.95rem);
    height: 4.15rem;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: none;

    position: relative;

}

.keim-sweeper .gp-chart-bar {

    width: min(100%, 1.75rem);
    height: var(--bar-h);
    min-height: .2rem;

    border-radius: .4rem .4rem 0 0;
    background: linear-gradient(180deg, #f9d659, #db9f13);

    flex: none;

    position: relative;
    z-index: 1;

}

.keim-sweeper .gp-chart-bar--optimal {

    width: min(100%, 1.95rem);

    margin-inline: auto;

    position: absolute;
    inset: auto 0 0;
    z-index: 0;

    opacity: .3;

}

.keim-sweeper .gp-chart-bar--optimal.estimated {

    opacity: .22;

}

.keim-sweeper .gp-chart-bar.lost {

    background: var(--frame-strong);

}

.keim-sweeper .gp-chart-label {

    font-size: var(--text-2xs);
    color: var(--muted);
    white-space: nowrap;

    padding-top: .4rem;

    position: absolute;
    top: 100%;

}

.keim-sweeper .gp-personal {

    font-size: var(--text-xs) !important;
    text-align: center;
    color: var(--muted);

    margin: .6rem 0 0 !important;

}

/* Daily charts: a modest preview until a real shared leaderboard is available. */

.keim-sweeper .daily-charts-link {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: .2em;

    border: 0;
    background: none;

    margin: -.2rem .2rem .4rem auto;
    padding: .25rem .1rem;

    display: block;

}

.keim-sweeper .daily-charts-link:hover {

    color: var(--ink);

}

.keim-sweeper .daily-charts[hidden] {

    display: none !important;

}

.keim-sweeper .daily-charts {

    min-width: 0;
    max-width: 100%;

    text-align: left;

    margin-top: .65rem;

}

.keim-sweeper .overlay.shows-daily-charts .dialog {

    width: min(26.25rem, 100%);

    overflow-x: hidden;

}

.keim-sweeper .daily-charts .gp-chart-section,
.keim-sweeper .daily-charts .gp-chart {

    min-width: 0;
    max-width: 100%;

}

.keim-sweeper .daily-charts .daily-preview-note {

    font-size: var(--text-xs);
    color: var(--muted);
    text-align: center;

    margin: 0 0 .5rem;

}

.keim-sweeper .daily-charts .daily-preview-note strong {

    font-weight: 800;
    color: var(--ink);

}

.keim-sweeper .daily-charts .daily-own-score {

    font-size: var(--text-xs);
    color: var(--ink);
    font-weight: 750;
    text-align: center;

    margin: .5rem 0 .75rem;

}

.keim-sweeper .daily-charts .gp-chart-section {

    margin-bottom: .8rem;

}

.keim-sweeper .daily-chart-rank {

    min-width: 0;
    width: 100%;

    font-size: var(--text-xs);

    gap: .5rem;
    padding: .4rem 0;

    display: grid;
    grid-template-columns: 1.1rem 5.4rem minmax(1.9rem, 1fr) 2.25rem;
    align-items: center;

}

.keim-sweeper .daily-chart-rank .daily-place {

    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;

}

.keim-sweeper .daily-chart-rank .daily-nickname {

    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 720;

    overflow: hidden;

}

.keim-sweeper .daily-chart-rank .daily-rank-track {

    height: .4rem;

    border-radius: .25rem;
    background: var(--frame-strong);

    overflow: hidden;

}

.keim-sweeper .daily-chart-rank .daily-rank-fill {

    height: 100%;
    width: var(--rank-pct);

    border-radius: .25rem;
    background: #dfa917;

    display: block;

}

.keim-sweeper .daily-chart-rank .daily-rank-score {

    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;

}

.keim-sweeper .daily-chart-days .gp-chart {

    height: 6.25rem;

}

.keim-sweeper .daily-chart-days .gp-chart-col {

    max-width: 3.1rem;

}

.keim-sweeper .daily-chart-days .gp-chart-bar {

    width: min(100%, 2rem);

}

@media (max-width: 22.5em) {

    .keim-sweeper .daily-chart-rank {

        font-size: var(--text-xs);

        gap: .4rem;

        grid-template-columns: 1rem 4.5rem minmax(1.5rem, 1fr) 2rem;

    }

}

.keim-sweeper .overlay .dialog {

    max-height: calc(100% - 1.5rem);

    overflow-y: auto;
    overscroll-behavior: contain;

}

.keim-sweeper .overlay.finished.shows-gp-results .dialog {

    width: min(28.75rem, 100%);

}

.keim-sweeper .overlay.finished.multiplayer-finish .dialog {

    width: min(28.75rem, 100%);

}



.keim-sweeper .overlay.finished.multiplayer-finish .dialog h3 {

    font-size: clamp(1.35rem, 3.8vw, var(--text-3xl));

    padding-inline: 1rem;

}

@media (max-width: 37.5em) {

    .keim-sweeper .gp-chart {

        height: 5.75rem;

    }

    .keim-sweeper .gp-chart-section {

        padding-top: .6rem;
        margin-top: .6rem;

    }

}

@media (max-height: 27.5em) {

    .keim-sweeper .overlay .dialog {

        max-height: calc(100% - .75rem);

    }

    .keim-sweeper .gp-chart {

        height: 4.5rem;

    }

}

.keim-sweeper .choice-dialog {

    max-height: calc(100% - .75rem);

    overflow-y: auto;
    overscroll-behavior: contain;

}

/* Soft edges for dialog content that continues outside the visible scroll area. */

.keim-sweeper [data-scroll-fades] {

    --scroll-fade-block-start: 0rem;
    --scroll-fade-block-end: 0rem;
    --scroll-fade-inline: 0rem;

}

.keim-sweeper .overlay:not(.choice-overlay) .dialog[data-scroll-fades] {

    --scroll-fade-block-start: clamp(1rem, 3vw, 1.5rem);
    --scroll-fade-block-end: clamp(1rem, 3vw, 1.5rem);
    --scroll-fade-inline: clamp(1rem, 3vw, 1.5rem);

}

.keim-sweeper .choice-dialog[data-scroll-fades] {

    --scroll-fade-block-start: clamp(1.25rem, 4vw, 2.25rem);
    --scroll-fade-block-end: clamp(1.25rem, 4vw, 2.25rem);
    --scroll-fade-inline: clamp(1.25rem, 4vw, 2.25rem);

}

.keim-sweeper .rules-scroll[data-scroll-fades] {

    --scroll-fade-block-start: 1.4rem;
    --scroll-fade-block-end: 1.75rem;
    --scroll-fade-inline: 1.9rem;

}

.keim-sweeper .dialog-scroll-fade {

    height: 0;

    display: block;

    position: sticky;
    z-index: 10;

    pointer-events: none;

}

.keim-sweeper .dialog-scroll-fade--top {

    top: 0;

}

.keim-sweeper .dialog-scroll-fade--bottom {

    bottom: 0;

}

.keim-sweeper .dialog-scroll-fade::before {

    height: 1.5rem;

    content: '';

    position: absolute;
    right: calc(-1 * var(--scroll-fade-inline));
    left: calc(-1 * var(--scroll-fade-inline));

    opacity: 0;
    transition: opacity .12s ease-out;

}

.keim-sweeper .dialog-scroll-fade--top::before {

    background: linear-gradient(to bottom, var(--panel), transparent);

    top: calc(-1 * var(--scroll-fade-block-start));

}

.keim-sweeper .dialog-scroll-fade--bottom::before {

    background: linear-gradient(to top, var(--panel), transparent);

    bottom: calc(-1 * var(--scroll-fade-block-end));

}

.keim-sweeper .is-scrolled > .dialog-scroll-fade--top::before,
.keim-sweeper .can-scroll-further > .dialog-scroll-fade--bottom::before {

    opacity: 1;

}

@media (max-width: 47.5em) {

    .keim-sweeper .choice-dialog[data-scroll-fades] {

        --scroll-fade-block-start: 1.2rem;
        --scroll-fade-block-end: 1.2rem;
        --scroll-fade-inline: 1.2rem;

    }

}

@media (max-width: 37.5em) {

    .keim-sweeper .overlay:not(.choice-overlay) .dialog[data-scroll-fades] {

        --scroll-fade-block-start: .9rem;
        --scroll-fade-block-end: .9rem;
        --scroll-fade-inline: 1.1rem;

    }

}

.keim-sweeper .choice-button {

    padding-top: .6rem;
    padding-bottom: .6rem;

}

/* === 08. Navigation and administration === */

.keim-sweeper {

    padding-inline: 0;

}

.keim-sweeper .gamebar,
.keim-sweeper .game-footer {

    background: var(--hud-glass);
    border-color: var(--hud-line);

    padding-inline: max(1rem, calc((100% - var(--content-width)) / 2));

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

}

.keim-sweeper .gamebar {

    gap: clamp(.8rem, 2vw, 1.6rem);

    display: grid;
    grid-template-columns: auto minmax(12rem, 1fr);

}

.keim-sweeper .rules-trigger {

    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 900;
    letter-spacing: 0;

    gap: .35rem;

}

.keim-sweeper .rules-trigger:hover {

    color: var(--accent);

}

.keim-sweeper .rules-trigger-info {

    color: var(--muted);

    opacity: 1;

}

.keim-sweeper .game-brand {

    font-size: var(--text-2xl);
    text-transform: uppercase;
    line-height: 1;

}

.keim-sweeper .game-brand__picture,
.keim-sweeper .game-brand__image {

    display: block;

}

.keim-sweeper .game-brand__picture {

    line-height: 0;

}

.keim-sweeper .choice-brand .game-brand__picture {

    width: min(17.5rem, 100%);

}

.keim-sweeper .game-brand__image {

    width: auto;

}

.keim-sweeper .game-brand__image--header {

    height: 2rem;

    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.8));

}

.keim-sweeper .game-brand__image--choice {

    width: 100%;
    height: auto;

}

.keim-sweeper .choice-brand {

    gap: .3em;

    display: flex;
    align-items: center;
    justify-content: center;

}

.keim-sweeper .game-brand .rules-trigger-info {

    stroke-width: 1.8;

    margin-left: .12rem;

}

.keim-sweeper .ui-icon,
.keim-sweeper .rules-icon {

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.keim-sweeper .score-goal {

    width: min(100%, 33rem);
    max-width: 33rem;

    justify-self: end;

}

.keim-sweeper .score-goal-fill {

    background: linear-gradient(90deg, #d7a318, #ffd758);

}

.keim-sweeper .world {

    max-width: none;
    min-width: 0;

    border-color: var(--frame-strong);
    border-radius: var(--radius, 1.25rem);
    box-shadow: none;

}

.keim-sweeper .hud-footer-inner {

    max-width: var(--content-width);

}

.keim-sweeper .footer-bottom:hover {

    color: var(--ink);

    background: var(--frame);

}

.keim-sweeper .overlay {

    width: 100%;
    max-width: 100%;

    background: rgba(11, 17, 30, .36);

    grid-template-columns: minmax(0, 1fr);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

}

.keim-sweeper .choice-overlay {

    background: rgba(11, 17, 30, .42);

}

.keim-sweeper .dialog {

    color: var(--ink);

    background: var(--panel);
    border-color: var(--frame-strong);
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 50px rgb(28 39 74/.09);

}

.keim-sweeper .choice-dialog,
.keim-sweeper .rules-card {

    width: min(42rem, 100%);
    min-width: 0;
    max-width: 100%;

}

.keim-sweeper .choice-dialog {

    padding: clamp(1.25rem, 4vw, 2.25rem);

}

.keim-sweeper .choice-pane,
.keim-sweeper .choice-resume-group,
.keim-sweeper .choice-section,
.keim-sweeper .choice-free-grid,
.keim-sweeper .choice-button,
.keim-sweeper .choice-copy {

    min-width: 0;

}

.keim-sweeper .choice-copy strong,
.keim-sweeper .choice-copy small,
.keim-sweeper .choice-eyebrow,
.keim-sweeper .choice-intro {

    overflow-wrap: anywhere;

}

.keim-sweeper .dialog .choice-eyebrow {

    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
    letter-spacing: .095em;
    line-height: 1.25;
    text-transform: uppercase;

    margin: 0;

}

.keim-sweeper .choice-dialog h3 {

    color: var(--ink);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: 800;
    line-height: 1.05;

    margin: 0 0 .65rem;

}

.keim-sweeper .choice-intro {

    max-width: 34rem;

    color: var(--muted);
    font-size: var(--text-sm) !important;
    line-height: 1.5;

    margin: 0 auto 1.35rem auto !important;

}

.keim-sweeper .choice-group-label {

    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 750;
    letter-spacing: .075em;
    text-align: left;
    text-transform: uppercase;

    margin: 0;

    justify-self: start;

}

.keim-sweeper .choice-resume-group {

    gap: var(--space-3);
    margin-bottom: var(--space-6);

    display: grid;

}

.keim-sweeper .choice-resume-group[hidden] {

    display: none !important;

}

.keim-sweeper .choice-section {

    gap: .2rem;

    display: grid;

}

.keim-sweeper .choice-section + .choice-section {

    margin-top: var(--space-6);

}

/* Highlighted menu actions. */
.keim-sweeper .tutorial-choice {

    margin-bottom: var(--space-6);

}

.keim-sweeper .choice-button.is-highlighted {

    min-height: 4.5rem;

    position: relative;

}

.keim-sweeper .choice-button:not(.is-highlighted) .choice-highlight-sparks {

    display: none;

}

.keim-sweeper .choice-highlight-sparks {

    position: absolute;
    inset: 0;

    pointer-events: none;

}

.keim-sweeper .choice-highlight-sparks .result-score-spark:first-child {

    top: .4rem;
    left: auto;
    right: 1.1rem;

}

.keim-sweeper .choice-highlight-sparks .result-score-spark:nth-child(2) {

    top: 40%;
    right: .5rem;

}

.keim-sweeper .choice-highlight-sparks .result-score-spark:nth-child(3) {

    bottom: .4rem;
    left: 3rem;

}

.keim-sweeper .choice-free-grid {

    gap: var(--space-3);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .choice-button {

    min-height: 4rem;

    color: var(--ink);

    background: var(--surface, var(--panel));
    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-lg);
    box-shadow: none;

    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: .4rem 0;

    transition: border-color .18s ease, background-color .18s ease;

}

.keim-sweeper .choice-resume-group .choice-button,
.keim-sweeper .choice-section .choice-button {

    margin: 0;

}

/* Administration. */

.keim-sweeper.keim-admin {

    width: min(72rem, 100%);
    max-width: none;

    padding: var(--space-6) 0 var(--space-8);

}

.keim-sweeper .keim-admin__header,
.keim-sweeper .keim-admin__section-head,
.keim-sweeper .keim-admin__room-head {

    gap: var(--space-4);

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.keim-sweeper .keim-admin__header {

    margin-bottom: var(--space-8);

}

.keim-sweeper .keim-admin__brand {

    width: min(15rem, 58vw);

    display: block;

}

.keim-sweeper .keim-admin__brand picture,
.keim-sweeper .keim-admin__brand img {

    width: 100%;
    height: auto;

    display: block;

}

.keim-sweeper .keim-admin__back {

    color: var(--muted);
    font-weight: 700;
    text-decoration: none;

    border-bottom: .08rem solid transparent;

}

.keim-sweeper .keim-admin__back:hover,
.keim-sweeper .keim-admin__back:focus-visible {

    color: var(--ink);

    border-color: currentColor;

}

.keim-sweeper .keim-admin__heading {

    margin-bottom: var(--space-6);

}

.keim-sweeper .keim-admin__heading p {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;

    margin: 0;

}

.keim-sweeper .keim-admin__heading h1 {

    font-size: clamp(2.2rem, 7vw, 4rem);
    line-height: .95;
    letter-spacing: -.04em;

    margin: .15rem 0 0;

}

.keim-sweeper .keim-admin__card,
.keim-sweeper .keim-admin__stat {

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: 0 .4rem 1.5rem rgba(45, 27, 16, .1);

}

.keim-sweeper .keim-admin__card {

    padding: var(--space-5);

}

.keim-sweeper .keim-admin__card h2,
.keim-sweeper .keim-admin__section-head p,
.keim-sweeper .keim-admin__card > p {

    margin-top: 0;

}

.keim-sweeper .keim-admin__auth {

    width: min(30rem, 100%);

}

.keim-sweeper .keim-admin__form {

    gap: var(--space-4);

    display: grid;

}

.keim-sweeper .keim-admin__form label {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;

    gap: var(--space-1);

    display: grid;

}

.keim-sweeper .keim-admin__form input {

    min-width: 0;

    color: var(--ink);

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-sm);
    background: var(--frame);

    padding: .65rem .75rem;

}

.keim-sweeper .keim-admin__notice {

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-md);

    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);

}

.keim-sweeper .keim-admin__notice--success {

    background: color-mix(in srgb, #4b8a35, transparent 86%);

}

.keim-sweeper .keim-admin__notice--error {

    background: color-mix(in srgb, #a32236, transparent 88%);

}

.keim-sweeper .keim-admin__stats,
.keim-sweeper .keim-admin__settings {

    gap: var(--space-4);

    display: grid;

}

.keim-sweeper .keim-admin__stats {

    margin-bottom: var(--space-4);

    grid-template-columns: repeat(3, minmax(0, 1fr));

}

.keim-sweeper .keim-admin__stat {

    padding: var(--space-4) var(--space-5);

}

.keim-sweeper .keim-admin__stat strong,
.keim-sweeper .keim-admin__stat span {

    display: block;

}

.keim-sweeper .keim-admin__stat strong {

    font-size: var(--text-3xl);
    line-height: 1;

}

.keim-sweeper .keim-admin__stat span {

    color: var(--muted);
    font-size: var(--text-xs);

    margin-top: var(--space-1);

}

.keim-sweeper .keim-admin__section-head p,
.keim-sweeper .keim-admin__empty,
.keim-sweeper .keim-admin__card > p {

    color: var(--muted);
    font-size: var(--text-sm);

}

.keim-sweeper .keim-admin__section-head h2 {

    margin-bottom: var(--space-1);

}

.keim-sweeper .keim-admin__section-head p,
.keim-sweeper .keim-admin__empty {

    margin-bottom: 0;

}

.keim-sweeper .keim-admin__room-list {

    gap: var(--space-3);
    margin-top: var(--space-5);

    display: grid;

}

.keim-sweeper .keim-admin__room {

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--panel), var(--frame) 18%);

    padding: var(--space-4);

}

.keim-sweeper .keim-admin__room.is-expired {

    opacity: .68;

}

.keim-sweeper .keim-admin__room-head strong {

    font-size: var(--text-xl);
    letter-spacing: .08em;

    display: block;

}

.keim-sweeper .keim-admin__room-head div > span,
.keim-sweeper .keim-admin__status {

    color: var(--muted);
    font-size: var(--text-xs);

}

.keim-sweeper .keim-admin__status {

    border: 1px solid var(--frame-strong);
    border-radius: 62.5rem;

    padding: .2rem .55rem;

}

.keim-sweeper .keim-admin__room-meta {

    gap: var(--space-2) var(--space-5);
    margin: var(--space-4) 0;

    display: flex;
    flex-wrap: wrap;

}

.keim-sweeper .keim-admin__room-meta div {

    gap: .2rem;

    display: flex;

}

.keim-sweeper .keim-admin__room-meta dt {

    color: var(--muted);

}

.keim-sweeper .keim-admin__room-meta dd {

    margin: 0;

}

.keim-sweeper .keim-admin__players {

    gap: var(--space-2);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .keim-admin__player {

    border-left: .22rem solid #8e857b;
    border-radius: var(--radius-sm);
    background: var(--frame);

    padding: var(--space-2) var(--space-3);

}

.keim-sweeper .keim-admin__player.is-online {

    border-left-color: #4b8a35;

}

.keim-sweeper .keim-admin__player span,
.keim-sweeper .keim-admin__player small {

    display: block;

}

.keim-sweeper .keim-admin__player small {

    color: var(--muted);

}

.keim-sweeper .keim-admin__room-action {

    margin-top: var(--space-3);

    display: flex;
    justify-content: flex-end;

}

.keim-sweeper .keim-admin__settings {

    margin-top: var(--space-4);

    grid-template-columns: repeat(2, minmax(0, 1fr));

}

@media (max-width: 42rem) {

    .keim-sweeper.keim-admin {

        padding-top: var(--space-4);

    }

    .keim-sweeper .keim-admin__stats,
    .keim-sweeper .keim-admin__settings,
    .keim-sweeper .keim-admin__players {

        grid-template-columns: 1fr;

    }

    .keim-sweeper .keim-admin__section-head {

        align-items: stretch;
        flex-direction: column;

    }

}

.keim-sweeper .choice-button:hover:not(:disabled) {

    background: var(--frame);
    border-color: color-mix(in srgb, var(--accent), var(--frame-strong) 52%);

}

.keim-sweeper .choice-button.daily {

    background: color-mix(in srgb, var(--panel), #41a96f 6%);
    border-color: color-mix(in srgb, var(--game-accent), var(--frame-strong) 55%);

}

.keim-sweeper .choice-button.daily .choice-icon {

    color: var(--game-accent);

}

.keim-sweeper .choice-button.resume-action {

    background: color-mix(in srgb, var(--panel), var(--accent) 5%);
    border-color: color-mix(in srgb, var(--accent), var(--frame-strong) 62%);

}

.keim-sweeper .choice-icon {

    width: 2.2rem;
    height: 2.2rem;

    color: var(--muted);

    border-radius: .65rem;
    background: var(--frame);

    flex-basis: 2.2rem;

}

.keim-sweeper .choice-icon .ui-icon {

    width: 1.2rem;
    height: 1.2rem;

}

.keim-sweeper .choice-copy strong {

    font-size: var(--text-md);
    font-weight: 750;

}

.keim-sweeper .choice-copy small {

    font-size: var(--text-xs);
    line-height: 1.35;

}

.keim-sweeper .choice-text-link {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;

}

.keim-sweeper .choice-section .daily-charts-link {

    margin: 0 .15rem 0 0;

    justify-self: end;

}

.keim-sweeper .choice-section .gp-history-link {

    margin: 0;

    justify-self: center;

}

.keim-sweeper .choice-text-link:hover {

    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .2rem;

}

.keim-sweeper .choice-info-links {

    margin: var(--space-5) auto 0;
    gap: .35rem 1.25rem;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

.keim-sweeper .legal-address {

    font-style: normal;

}

/* === 09. Multiplayer === */

.keim-sweeper .dialog .multiplayer-privacy-note {

    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.45;
    text-align: left;

    border: 1px solid color-mix(in srgb, var(--frame-strong), transparent 55%);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--frame), transparent 55%);

    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-8) 0 0;

    display: flex;
    align-items: flex-start;

}

.keim-sweeper .multiplayer-privacy-note .ui-icon {

    width: 1rem;
    height: 1rem;

    flex: 0 0 1rem;

}

.keim-sweeper .multiplayer-privacy-note a,
.keim-sweeper .rules-note a {

    color: var(--game-accent);
    text-decoration: underline;
    text-underline-offset: .15rem;

}

.keim-sweeper .multiplayer-grid {

    min-width: 0;

}

.keim-sweeper .multiplayer-setup-view {

    gap: var(--space-3);

    display: grid;

}

.keim-sweeper .multiplayer-setup-view[hidden] {

    display: none !important;

}

.keim-sweeper .multiplayer-route-grid {

    gap: var(--space-3);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .multiplayer-async-section {

    min-width: 0;

    border-top: 1px solid var(--frame-strong);

    gap: var(--space-3);
    padding-top: var(--space-4);
    margin-top: var(--space-4);

    display: grid;

}

.keim-sweeper .multiplayer-async-section .multiplayer-lobby-list {

    max-height: 22rem;

    overflow-y: auto;

}

.keim-sweeper .multiplayer-async-item .multiplayer-async-turn {

    color: var(--ink);
    font-weight: 700;
    margin-top: .2em;

}

.keim-sweeper .multiplayer-async-item.is-your-turn {

    --async-turn-color: var(--button-resume-border, var(--game-accent));
    --async-turn-background: var(--button-resume-background, color-mix(in srgb, var(--panel), var(--async-turn-color) 18%));
    --async-turn-background-active: color-mix(in srgb, var(--async-turn-background), var(--async-turn-color) 11%);

    border: 2px solid var(--async-turn-color);
    background: var(--async-turn-background);
    box-shadow: none;

}

.keim-sweeper .multiplayer-async-item.is-your-turn:hover:not(:disabled),
.keim-sweeper .multiplayer-async-item.is-your-turn:focus-visible {

    border-color: var(--button-resume-border-interactive, var(--async-turn-color));
    background: var(--button-resume-background-hover, var(--button-background-hover));

}

.keim-sweeper .multiplayer-async-item.is-your-turn .multiplayer-lobby-action {

    font-weight: 900;

}

@media (prefers-reduced-motion: no-preference) {

    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-async-item.is-your-turn:not(:disabled):not(:hover):not(:focus-visible) {

        animation: ks-async-turn-pulse 2.6s ease-in-out infinite;

    }

}

@keyframes ks-async-turn-pulse {

    0%, 100% {
        background-color: var(--async-turn-background);
    }

    50% {
        background-color: var(--async-turn-background-active);
    }

}

.keim-sweeper .multiplayer-turn-badge {

    color: var(--ink);
    font-weight: 800;

    margin-top: var(--space-1);

}

.keim-sweeper .multiplayer-turn-badge[hidden],
.keim-sweeper .multiplayer-play-turn[hidden],
.keim-sweeper .multiplayer-async-browse[hidden] {

    display: none !important;

}

.keim-sweeper .multiplayer-route {

    min-height: 7rem;

    margin: 0;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: start;

}

.keim-sweeper .multiplayer-route .choice-icon {

    place-items: start center;

}

.keim-sweeper .multiplayer-pane h4 {

    font-size: var(--text-md);
    line-height: 1.2;

    margin: 0;

}

.keim-sweeper .multiplayer-error[role="status"] {

    color: var(--wood-hud-ink);
    font-size: var(--text-xs);

    border: 1px solid color-mix(in srgb, #a32236, transparent 68%);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, #a32236, transparent 92%);

    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-5);

}

.keim-sweeper .multiplayer-setup,
.keim-sweeper .multiplayer-room {

    gap: var(--space-4);

    display: grid;

}

.keim-sweeper .multiplayer-room {

    text-align: left;

}

.keim-sweeper .multiplayer-setup[hidden],
.keim-sweeper .multiplayer-room[hidden],
.keim-sweeper .multiplayer-invite[hidden],
.keim-sweeper .multiplayer-ready[hidden],
.keim-sweeper .multiplayer-rematch[hidden],
.keim-sweeper .multiplayer-share[hidden] {

    display: none !important;

}

.keim-sweeper .multiplayer-entry {

    border: 1px solid color-mix(in srgb, var(--frame-strong), transparent 60%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--frame), transparent 58%);

    gap: var(--space-4);
    padding: var(--space-4);

    display: grid;

}

.keim-sweeper .dialog .multiplayer-separator {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .08em;

    gap: var(--space-3);
    margin: 0;

    display: flex;
    align-items: center;

}

.keim-sweeper .multiplayer-separator::before,
.keim-sweeper .multiplayer-separator::after {

    height: 1px;

    background: color-mix(in srgb, var(--frame-strong), transparent 35%);

    content: '';
    flex: 1;

}

.keim-sweeper .multiplayer-entry-head {

    gap: var(--space-3);

    text-align: left;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

}

.keim-sweeper .multiplayer-entry-head h4 {

    text-align: left;

}

.keim-sweeper .multiplayer-entry-head p,
.keim-sweeper .multiplayer-entry-head small {

    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;

    margin: .15rem 0 0;

}

.keim-sweeper .multiplayer-entry-head small {

    text-align: right;
    white-space: nowrap;

}

.keim-sweeper .multiplayer-options {

    gap: var(--space-5);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .multiplayer-options > .multiplayer-field {

    align-self: start;

}

.keim-sweeper .multiplayer-field {

    min-width: 0;

    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;

    gap: var(--space-1);

    display: grid;

}

.keim-sweeper .multiplayer-field input,
.keim-sweeper .multiplayer-field select {

    width: 100%;
    min-width: 0;
    height: 3rem;

    color: var(--ink);

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);

    padding: .45rem .6rem;

}

.keim-sweeper .multiplayer-field select {

    -webkit-appearance: none;
    appearance: none;

    padding-right: 2rem;

    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 1rem) center, calc(100% - .7rem) center;
    background-size: .3rem .3rem;
    background-repeat: no-repeat;

}

.keim-sweeper .dialog .multiplayer-format-description {

    color: var(--muted);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: 1.4;
    text-align: left;

    grid-column: 1 / -1;
    margin: calc(-1 * var(--space-3)) 0 var(--space-3);

}

.keim-sweeper .multiplayer-create,
.keim-sweeper .multiplayer-register {

    min-height: 3rem;

    justify-self: start;

}

.keim-sweeper .multiplayer-refresh {

    min-height: 2rem;

    font-size: var(--text-sm);
    white-space: nowrap;

    padding: .3rem .7rem;

}

.keim-sweeper .dialog .multiplayer-refresh:disabled {

    opacity: 1;
    cursor: pointer;

}

.keim-sweeper .multiplayer-lobby-list {

    max-height: 18rem;

    gap: var(--space-2);
    padding: 1px;

    display: grid;
    align-content: start;

    overflow-y: auto;

}

.keim-sweeper .multiplayer-lobby-empty {

    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-align: left;

    gap: var(--space-1);
    padding: var(--space-2) 0;
    margin: 0;

    display: grid;

}

.keim-sweeper .multiplayer-lobby-empty strong {

    color: var(--ink);

}

.keim-sweeper .multiplayer-lobby-item {

    width: 100%;
    min-width: 0;

    color: var(--ink);
    text-align: left;

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);

    gap: var(--space-3);
    padding: var(--space-3);

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.keim-sweeper .multiplayer-lobby-item:hover:not(:disabled),
.keim-sweeper .multiplayer-lobby-item:focus-visible {

    border-color: var(--button-border-interactive);
    background: var(--button-background-hover);

}

.keim-sweeper .multiplayer-lobby-player {

    min-width: 0;

    display: grid;

}

.keim-sweeper .multiplayer-lobby-player strong {

    font-weight: 800;

}

.keim-sweeper .multiplayer-lobby-player small {

    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.3;

}

.keim-sweeper .multiplayer-npc-icon {

    width: 1em;
    height: 1em;

    color: var(--muted);

    margin-left: .35em;
    vertical-align: -.12em;

    display: inline-block;

}

.keim-sweeper .multiplayer-lobby-action {

    color: var(--ink);
    font-weight: 800;

    white-space: nowrap;

}

.keim-sweeper .multiplayer-join {

    gap: var(--space-2);

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;

}

.keim-sweeper .multiplayer-join .btn {

    height: 3rem;

}

.keim-sweeper .multiplayer-room-head,
.keim-sweeper .multiplayer-room-actions {

    gap: var(--space-2);

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.keim-sweeper .multiplayer-room-actions {

    justify-content: flex-end;

}

.keim-sweeper .multiplayer-next,
.keim-sweeper .multiplayer-ready,
.keim-sweeper .multiplayer-room-actions .multiplayer-rematch {

    margin-right: auto;

}

.keim-sweeper .multiplayer-ready,
.keim-sweeper .multiplayer-rematch,
.keim-sweeper .multiplayer-play-turn,
.keim-sweeper .async-board-result-next {

    position: relative;
    overflow: visible;
    isolation: isolate;

}

.keim-sweeper .multiplayer-ready-sparks {

    position: absolute;
    inset: -.4rem -.15rem;

    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;

}

.keim-sweeper .multiplayer-ready-sparks .result-score-spark:first-child {

    top: -.35rem;
    left: .95rem;

}

.keim-sweeper .multiplayer-ready-sparks .result-score-spark:nth-child(2) {

    top: -.55rem;
    right: .95rem;
    left: auto;

}

.keim-sweeper .multiplayer-ready-sparks .result-score-spark:nth-child(3) {

    right: 1.45rem;
    bottom: -.35rem;
    left: auto;

}

.keim-sweeper .multiplayer-ready:not(:disabled) .multiplayer-ready-sparks,
.keim-sweeper .multiplayer-rematch:not(:disabled) .multiplayer-ready-sparks,
.keim-sweeper .multiplayer-play-turn:not(:disabled) .multiplayer-ready-sparks {

    opacity: 1;

}

@media (prefers-reduced-motion: no-preference) {

    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-ready:not(:disabled) .result-score-spark,
    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-rematch:not(:disabled) .result-score-spark,
    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-play-turn:not(:disabled) .result-score-spark,
    :root:not([data-reduce-motion="true"]) .keim-sweeper .async-board-result-score.is-winner .result-score-spark {

        animation: ks-result-score-spark 3.2s ease-out infinite;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-ready:not(:disabled) .result-score-spark:nth-child(2),
    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-rematch:not(:disabled) .result-score-spark:nth-child(2),
    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-play-turn:not(:disabled) .result-score-spark:nth-child(2),
    :root:not([data-reduce-motion="true"]) .keim-sweeper .async-board-result-score.is-winner .result-score-spark:nth-child(2) {

        animation-delay: .45s;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-ready:not(:disabled) .result-score-spark:nth-child(3),
    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-rematch:not(:disabled) .result-score-spark:nth-child(3),
    :root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-play-turn:not(:disabled) .result-score-spark:nth-child(3),
    :root:not([data-reduce-motion="true"]) .keim-sweeper .async-board-result-score.is-winner .result-score-spark:nth-child(3) {

        animation-delay: .9s;

    }

}

.keim-sweeper .multiplayer-room-head > div {

    min-width: 0;

    text-align: left;

}

.keim-sweeper .multiplayer-player {

    color: var(--ink);

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-md);
    background: var(--frame);

    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);

    display: flex;
    align-items: center;

}

.keim-sweeper .multiplayer-player-copy {

    min-width: 0;

    gap: .05rem;

    flex: 1 1 auto;
    display: grid;

}

.keim-sweeper .multiplayer-player small,
.keim-sweeper .multiplayer-room-head span,
.keim-sweeper .multiplayer-invite span,
.keim-sweeper .multiplayer-room-status {

    color: var(--muted);
    font-size: var(--text-xs);

}

.keim-sweeper .multiplayer-room-head strong {

    font-size: clamp(var(--text-sm), 3.8vw, var(--text-lg));
    line-height: 1.2;
    white-space: nowrap;

    display: block;

}

.keim-sweeper .multiplayer-connection {

    white-space: nowrap;

    flex: none;

}

.keim-sweeper .multiplayer-invite {

    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-md);
    background: var(--frame);

    gap: var(--space-2);
    padding: var(--space-3);

    display: grid;

}

.keim-sweeper .multiplayer-invite > div:first-child {

    gap: var(--space-3);

    display: flex;
    align-items: baseline;
    justify-content: space-between;

}

.keim-sweeper .multiplayer-invite strong {

    font-size: var(--text-xl);
    letter-spacing: .08em;

    display: block;

}

.keim-sweeper .multiplayer-invite-actions {

    gap: var(--space-2);

    display: flex;
    flex-wrap: wrap;

}

.keim-sweeper .multiplayer-invite-actions .btn {

    min-width: 0;

    padding: .6rem .8rem;

    flex: 0 0 auto;

}

.keim-sweeper .multiplayer-connection::before {

    width: .45rem;
    height: .45rem;

    content: '';
    border-radius: 50%;
    background: #b24b42;

    margin-right: .3rem;

    display: inline-block;

}

.keim-sweeper .multiplayer-connection.connected::before,
.keim-sweeper .multiplayer-player.online::before {

    background: #4b8a35;

}

.keim-sweeper .multiplayer-room-status {

    margin: 0;

}

.keim-sweeper .multiplayer-players {

    gap: var(--space-2);

    display: grid;

}

.keim-sweeper .multiplayer-player::before {

    width: .55rem;
    height: .55rem;

    content: '';
    border-radius: 50%;
    background: #8e857b;

    flex: 0 0 auto;

}

.keim-sweeper .multiplayer-player-result {

    font-size: var(--text-sm);
    line-height: 1.15;
    text-align: right;

    flex: 0 1 auto;

}

.keim-sweeper .multiplayer-players[hidden] { display: none; }

.keim-sweeper .multiplayer-result {

    gap: var(--space-2);
    margin: var(--space-3) 0 0;

    display: grid;

}

.keim-sweeper .multiplayer-result .multiplayer-player {

    min-width: 0;

    gap: .3rem var(--space-3);
    grid-template-columns: .55rem minmax(0, 1fr) auto;
    display: grid;

    text-align: left;

}

.keim-sweeper .multiplayer-result .multiplayer-player-copy {

    grid-column: 2;

}

.keim-sweeper .multiplayer-result .multiplayer-player-copy strong {

    line-height: 1.15;

}

.keim-sweeper .multiplayer-result .multiplayer-player-result {

    font-variant-numeric: tabular-nums;
    white-space: nowrap;

    grid-column: 3;
    justify-self: end;

}

.keim-sweeper .multiplayer-result .multiplayer-player-result small {

    color: var(--muted);
    font-weight: 700;
    line-height: 1.2;

    display: block;

}

.keim-sweeper .actions.multiplayer-finish {

    gap: .5rem;
    margin-top: var(--space-4);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.keim-sweeper .actions.multiplayer-finish > .btn {

    width: 100%;
    min-width: 0;

    white-space: nowrap;

}

.keim-sweeper .actions.multiplayer-finish #ks-view-map {

    grid-column: 1 / -1;
    flex: none;

}

.keim-sweeper .actions.multiplayer-finish #ks-multiplayer-rematch-result[hidden] + #ks-multiplayer-result-action {

    grid-column: 1 / -1;

}

.keim-sweeper .multiplayer-result-action:not(.is-next) .multiplayer-result-next-icon,
.keim-sweeper .multiplayer-result-action.is-next .multiplayer-result-room-icon {

    display: none;

}

@media (max-width: 28em) {

    .keim-sweeper .actions.multiplayer-finish {

        grid-template-columns: minmax(0, 1fr);

    }

    .keim-sweeper .actions.multiplayer-finish #ks-view-map {

        grid-column: 1;

    }

}

@media (max-width: 24em) {

    .keim-sweeper .multiplayer-result .multiplayer-player {

        grid-template-columns: .55rem minmax(0, 1fr);

    }

    .keim-sweeper .multiplayer-result .multiplayer-player-result {

        text-align: left;

        grid-column: 2;
        justify-self: start;

    }

}

.keim-sweeper .multiplayer-hud {

    width: min(17rem, calc(100% - 2rem));

    position: fixed;
    top: calc(var(--hud-top) + env(safe-area-inset-top) + 2rem);
    right: max(1rem, calc((100% - var(--content-width)) / 2));
    z-index: 32;

}

.keim-sweeper .multiplayer-hud-open {

    width: 100%;

    color: var(--wood-hud-ink);
    text-align: left;

    border: 3px solid var(--frame-strong);
    border-radius: var(--radius-md);
    background: var(--hud-glass);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .12);

    padding: var(--space-2) var(--space-3);

    display: grid;
    grid-template-columns: 1fr;
    align-items: center;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

}

.keim-sweeper .multiplayer-hud-title {

    font-size: var(--text-xs);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;

    overflow: hidden;

}

.keim-sweeper .multiplayer-hud-progress-wrapper {

    white-space: nowrap;

    gap: 1rem;

    display: flex;
    align-items: center;

}

.keim-sweeper .multiplayer-hud-progress {

    height: .3rem;

    border-radius: 10rem;
    background: var(--frame-strong);

    grid-column: 1/-1;

    overflow: hidden;

}

.keim-sweeper .multiplayer-hud-progress span {

    width: var(--opponent-progress, 0%);
    height: 100%;

    background: var(--wood-hud-ink);

    display: block;

    transition: width .2s ease;

}

@media (max-width: 47.5em) {

    .keim-sweeper .multiplayer-route-grid,
    .keim-sweeper .multiplayer-options {

        grid-template-columns: 1fr;

    }

    .keim-sweeper .multiplayer-hud {

        width: min(13.5rem, calc(100% - 1.4rem));

        top: calc(var(--hud-top) + env(safe-area-inset-top) + 1rem);
        right: .7rem;

    }

}

@media (max-width: 32.5em) {

    .keim-sweeper .multiplayer-entry-head {

        align-items: stretch;
        flex-direction: column;

    }

    .keim-sweeper .multiplayer-entry-head small {

        text-align: left;

    }

    .keim-sweeper .multiplayer-lobby-item {

        align-items: flex-start;

    }

    .keim-sweeper .multiplayer-join {

        grid-template-columns: 1fr;

    }

    .keim-sweeper .multiplayer-room-actions {

        align-items: stretch;
        flex-direction: column;

    }

}

@media (max-width: 22em) {

    .keim-sweeper .multiplayer-room {

        gap: var(--space-3);

    }

    .keim-sweeper .multiplayer-room-head {

        gap: .15rem var(--space-2);

        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;

    }

    .keim-sweeper .multiplayer-room-head > div {

        display: contents;

    }

    .keim-sweeper .multiplayer-room-head > div > span {

        grid-column: 1;
        grid-row: 1;

    }

    .keim-sweeper .multiplayer-room-head strong {

        font-size: var(--text-md);

        grid-column: 1 / -1;
        grid-row: 2;

    }

    .keim-sweeper .multiplayer-connection {

        grid-column: 2;
        grid-row: 1;

    }

    .keim-sweeper .multiplayer-invite {

        gap: var(--space-2);
        padding: var(--space-2);

    }

    .keim-sweeper .multiplayer-invite > div:first-child {

        gap: var(--space-2);

    }

    .keim-sweeper .multiplayer-invite strong {

        font-size: var(--text-lg);

    }

    .keim-sweeper .multiplayer-invite-actions .btn {

        min-height: 2.75rem;

        font-size: var(--text-xs);
        white-space: nowrap;

        padding: .5rem .55rem;

    }

    .keim-sweeper .multiplayer-invite-actions .ui-icon {

        width: 1rem;
        height: 1rem;

        flex: none;

    }

}

/* === 10. Buttons, responsive controls and footer === */

.keim-sweeper .choice-seed-form {

    min-width: 0;

    gap: .55rem;

    display: flex;

}

.keim-sweeper .choice-seed input {

    width: 100%;
    min-width: 0;

    flex: 1;

}

.keim-sweeper .choice-seed input,
.keim-sweeper .choice-seed-start {

    height: 3rem;

}

.keim-sweeper .choice-seed-start {

    min-height: 2.8rem;

    white-space: nowrap;

    gap: .4rem;
    padding: .5rem .85rem;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

}

.keim-sweeper .choice-seed-start:disabled {

    opacity: .45;
    cursor: not-allowed;

}

.keim-sweeper .choice-seed-divider {

    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: center;

    margin: .2rem 0 .6rem;

}

.keim-sweeper .choice-seed input,
.keim-sweeper .entry-fields select,
.keim-sweeper .miniSelect {

    color: var(--ink);

    background: var(--panel);
    border-color: var(--frame-strong);

}

.keim-sweeper .difficulty-list {

    gap: .6rem;

    display: grid;
    grid-template-columns: 1fr;

}

.keim-sweeper .difficulty-option {

    min-height: 3.2rem;

    margin: 0;

}

.keim-sweeper .difficulty-option:last-child {

    grid-column: 1/-1;

}

.keim-sweeper .btn {

    font-weight: 700;

    border-color: var(--frame-strong);
    border-radius: var(--radius-md);
    background: var(--frame);

    gap: .45rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.keim-sweeper .btn.primary {

    color: #fff;

    border-color: var(--button-primary-border);
    background: var(--button-primary-background);

}

.keim-sweeper .rules-card {

    background: var(--panel);
    border-color: var(--frame-strong);
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 50px rgb(28 39 74/.09);

}

.keim-sweeper .rules-card-head {

    border-color: var(--frame-strong);

}

/* Shared button interaction states. */

.keim-sweeper button:focus-visible {

    outline: 0;

}

.keim-sweeper .choice-button,
.keim-sweeper .btn {

    border-color: var(--button-border);
    background: var(--button-background);

    transform: none;
    transition: background-color .16s ease, border-color .16s ease;

}

.keim-sweeper .choice-button:hover:not(:disabled),
.keim-sweeper .choice-button:focus-visible:not(:disabled),
.keim-sweeper .btn:hover:not(:disabled),
.keim-sweeper .btn:focus-visible:not(:disabled) {

    border-color: var(--button-border-interactive);
    background: var(--button-background-hover);

    transform: none;

}

.keim-sweeper .btn.primary:hover:not(:disabled),
.keim-sweeper .btn.primary:focus-visible:not(:disabled) {

    border-color: var(--button-primary-border-interactive);
    background: var(--button-primary-background-hover);

}

/* Shared highlighted action for the tutorial and multiplayer readiness. */
.keim-sweeper .btn.attention-pulse {

    min-height: 2.5rem;

    font-size: .9rem;

    gap: .4rem;
    padding: .45rem 1rem;

}

.keim-sweeper .btn.primary.attention-pulse:not(:disabled) {

    border: 2px solid var(--wood-hud-gold, #f3c84f);
    background: var(--button-primary-background);
    box-shadow: 0 0 .4rem rgba(243, 200, 79, .4);

}

.keim-sweeper .btn.primary.attention-pulse:not(:disabled):hover,
.keim-sweeper .btn.primary.attention-pulse:not(:disabled):focus-visible {

    border-color: var(--wood-hud-gold, #f3c84f);
    background: var(--button-primary-background-hover);

}

@media (prefers-reduced-motion: no-preference) {

    :root:not([data-reduce-motion="true"]) .keim-sweeper .btn.primary.attention-pulse:not(:disabled):not([hidden]) {

        animation: ks-attention-pulse 1.8s ease-in-out infinite;

    }

}

@keyframes ks-attention-pulse {

    0%, 100% {
        box-shadow: 0 0 .4rem rgba(243, 200, 79, .4);
    }

    50% {
        box-shadow: 0 0 0 .2rem rgba(243, 200, 79, .5), 0 0 1rem rgba(243, 200, 79, .8);
    }

}

.keim-sweeper .footer-bottom,
.keim-sweeper .choice-text-link,
.keim-sweeper .dialog-close {

    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--button-subtle-background);

    padding: .25rem .5rem;

    transition: background-color .16s ease, border-color .16s ease;

}

.keim-sweeper .dialog-close {

    padding: 0;

}

.keim-sweeper .footer-bottom:hover:not(:disabled),
.keim-sweeper .footer-bottom:focus-visible:not(:disabled),
.keim-sweeper .choice-text-link:hover:not(:disabled),
.keim-sweeper .choice-text-link:focus-visible:not(:disabled),
.keim-sweeper .dialog-close:hover:not(:disabled),
.keim-sweeper .dialog-close:focus-visible:not(:disabled) {

    color: var(--muted);
    text-decoration: none;

    border-color: var(--button-border-interactive);
    background: var(--button-subtle-background-hover);

}

.keim-sweeper .rules-trigger {

    border: 1px solid transparent;
    background: transparent;

}

.keim-sweeper .rules-trigger:hover:not(:disabled) {

    color: var(--ink);

    border-color: transparent;
    background: transparent;

}

.keim-sweeper .rules-trigger:focus-visible:not(:disabled) {

    color: var(--ink);

    border-color: var(--button-border-interactive);
    background: var(--button-subtle-background-hover);

}

.keim-sweeper .choice-icon {

    color: inherit;

    border-radius: 0;
    background: transparent;

}

@media (max-width: 47.5em) {

    .keim-sweeper {

        padding: 0;

    }

    .keim-sweeper .gamebar {

        gap: .6rem;
        padding-inline: max(.7rem, env(safe-area-inset-left)) max(.7rem, env(safe-area-inset-right));

        grid-template-columns: auto minmax(7rem, 1fr);

    }

    .keim-sweeper .game-brand {

        font-size: var(--text-lg);

    }

    .keim-sweeper .game-brand__image--header {

        height: 1.6rem;

    }

    .keim-sweeper .score-goal {

        gap: .45rem;

    }

    .keim-sweeper .choice-dialog,
    .keim-sweeper .rules-card {

        width: min(34rem, 100%);

    }

    .keim-sweeper .choice-dialog {

        padding: 1.2rem;

    }

}

@media (max-width: 32.5em) {

    html,
    body {

        min-width: 0;
        max-width: 100%;

        overflow-x: hidden;

    }

    .keim-sweeper .gamebar.has-score-goal {

        grid-template-columns: auto minmax(0, 1fr);

    }

    .keim-sweeper .gamebar.has-score-goal .score-goal {

        width: 100%;
        max-width: none;

        grid-column: 2;

    }

    .keim-sweeper .choice-dialog,
    .keim-sweeper .rules-card {

        width: auto !important;
        max-width: none;

        margin: 0;

        justify-self: stretch;

    }

    .keim-sweeper .choice-free-grid,
    .keim-sweeper .difficulty-list {

        grid-template-columns: 1fr;

    }

    .keim-sweeper .difficulty-option:last-child {

        grid-column: auto;

    }

    .keim-sweeper .choice-dialog h3 {

        font-size: var(--text-3xl);

    }

    .keim-sweeper .choice-intro {

        margin-bottom: 1rem !important;

    }

    .keim-sweeper .choice-button {

        min-height: 3.5rem;

        padding: .66rem .75rem;

    }

    .keim-sweeper .choice-overlay {

        padding-block: .65rem;

    }

    .keim-sweeper .choice-overlay,
    .keim-sweeper .rules-backdrop {

        padding-right: max(.65rem, env(safe-area-inset-right));
        padding-left: max(.65rem, env(safe-area-inset-left));

    }

    .keim-sweeper .game-footer.random-playing .meta-spacer {

        display: none;

    }

    .keim-sweeper .game-footer.random-playing .hud-footer-inner {

        justify-content: space-between;

    }

    .keim-sweeper .game-footer.random-playing .footer-bottom {

        padding: .35rem .42rem;

        flex: 0 0 auto;

    }

    .keim-sweeper .game-footer.random-playing .mode-return,
    .keim-sweeper .game-footer.random-playing .mode-restart {

        width: auto;

    }

}

@media (max-width: 23em) {

    .keim-sweeper .game-brand .rules-trigger-info {

        display: none;

    }

    .keim-sweeper .gamebar {

        grid-template-columns: auto minmax(0, 1fr);

    }

    .keim-sweeper .score-goal {

        grid-column: 2;

    }

}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 43.75em) {

    .keim-sweeper .game-brand {

        font-size: var(--text-md);

    }

    .keim-sweeper .game-brand__image--header {

        height: 1.45rem;

    }

}

@media (prefers-reduced-motion: reduce) {

    .keim-sweeper *,
    .keim-sweeper *::before,
    .keim-sweeper *::after {

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }

    .keim-sweeper .choice-button:hover:not(:disabled) {

        transform: none;

    }

}

/* Footer action groups. */
.keim-sweeper .hud-footer-inner {

    gap: clamp(.4rem, 1.7vw, 1rem);

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.keim-sweeper .footer-primary,
.keim-sweeper .footer-secondary {

    min-width: 0;

    gap: clamp(.2rem, 1rem, 2rem);

    display: flex;
    align-items: center;

}

.keim-sweeper .footer-primary {

    flex: 0 0 auto;

}
.keim-sweeper .footer-secondary {

    margin-left: auto;

    flex: 0 1 auto;
    justify-content: flex-end;

}

.keim-sweeper .footer-primary > *,
.keim-sweeper .footer-secondary > * {

    flex-shrink: 0;

}
.keim-sweeper .game-footer .mode-label {

    white-space: nowrap;

}
.keim-sweeper .game-footer .footer-bottom {

    white-space: nowrap;

    flex: 0 0 auto;

}
.keim-sweeper .game-footer.random-playing .hud-footer-inner {

    justify-content: space-between;

}

.keim-sweeper .game-footer.random-playing .daily-footer-bottom {

    display: none;

}

@media (max-width: 47.5em) {

    .keim-sweeper .game-footer .mode-label {

        display: none;

    }

}

@media (max-width: 38em) {

    .keim-sweeper .game-footer .footer-action-label {

        display: none;

    }

    .keim-sweeper .game-footer .footer-primary .footer-bottom {

        padding-inline: .35rem;

    }

    .keim-sweeper .game-footer .footer-secondary #ks-attempts {

        display: none;

    }
}

@media (max-width: 27em) {

    .keim-sweeper .game-footer .footer-charts-label {

        display: none;

    }

    .keim-sweeper .game-footer .footer-secondary .footer-bottom {

        padding-inline: .25rem;

    }

    .keim-sweeper .footer-primary,
    .keim-sweeper .footer-secondary {

        gap: 1rem;
    }
}

/* === 11. Route review === */

.keim-sweeper .review-hud {

    width: min(17rem, calc(100% - 2rem));
    max-height: calc(100dvh - var(--hud-top) - var(--hud-bottom) - 2rem);

    color: var(--wood-hud-ink);

    border: 3px solid var(--frame-strong);
    border-radius: var(--radius-md);
    background: var(--hud-glass);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .12);

    padding: var(--space-3);

    position: fixed;
    top: calc(var(--hud-top) + env(safe-area-inset-top) + 2rem);
    right: max(1rem, calc((100% - var(--content-width)) / 2));
    z-index: 32;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow-y: auto;

}

.keim-sweeper .review-hud summary {

    font-size: var(--text-xs);
    font-weight: 800;

    cursor: pointer;

}

.keim-sweeper .review-hud summary:focus {

    outline: none;

}

.keim-sweeper .review-hud summary:focus-visible {

    color: var(--wood-hud-gold);

}

.keim-sweeper .review-hud .review-short {

    display: none;

}

.keim-sweeper .review-option-actions {

    gap: .5rem;
    margin: .65rem 0;

    display: grid;

}

.keim-sweeper .review-hud:not([open]) .review-option-actions {

    display: none;

}

.keim-sweeper .review-option-actions .btn {

    width: 100%;

    text-align: left;

    justify-content: flex-start;

}

.keim-sweeper .review-option-actions .btn:disabled {

    opacity: .5;
    cursor: not-allowed;

}

.keim-sweeper .world.review-mode ~ .multiplayer-hud {

    display: none;

}

@media (max-width: 47.5em) {

    .keim-sweeper .review-hud {

        width: min(13.5rem, calc(100% - 1.4rem));

        top: calc(var(--hud-top) + env(safe-area-inset-top) + 1rem);
        right: .7rem;

    }

    .keim-sweeper .review-hud .review-full {

        display: none;

    }

    .keim-sweeper .review-hud .review-short {

        display: inline;

    }

}

.keim-sweeper .optimized-route {

    pointer-events: none;
    overflow: visible;

}

.keim-sweeper .optimized-route-dim polygon {

    fill: rgba(0, 0, 0, .4);

}

.keim-sweeper .optimized-route-arrows {

    filter: drop-shadow(0 1px 1px rgba(34, 42, 51, 1));

}

.keim-sweeper .optimized-route-start {

    fill: #d8e3ee;
    stroke: #a8b7c4;
    stroke-width: 2;

}

.keim-sweeper .optimized-route-end-flag image {

    filter: drop-shadow(0 0 10px rgba(36, 28, 18, 1));

}

/* === 12. Tutorial === */

.keim-sweeper .tutorial-hud {

    width: min(32rem, calc(100% - 2rem));
    max-height: calc(100dvh - var(--hud-top) - var(--hud-bottom) - 2rem);

    color: var(--wood-hud-ink, var(--ink));

    border: 3px solid var(--frame-strong);
    border-radius: var(--radius-md);
    background: var(--hud-glass);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .12);

    gap: .7rem;
    padding: .8rem .9rem;

    display: flex;
    flex-direction: column;

    position: fixed;
    top: calc(var(--hud-top) + env(safe-area-inset-top) + 2rem);
    right: 0;
    left: 0;
    z-index: 32;

    margin-inline: auto;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow-y: auto;

}

.keim-sweeper .tutorial-heading {

    min-width: 0;

    gap: .5rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.keim-sweeper .tutorial-hud.is-finished .tutorial-heading {

    justify-content: center;

}

.keim-sweeper .tutorial-hud.is-finished .tutorial-eyebrow {

    color: var(--wood-hud-gold, var(--accent));

}

.keim-sweeper .tutorial-eyebrow,
.keim-sweeper .tutorial-skip {

    color: var(--wood-hud-muted, var(--muted));
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;

}

.keim-sweeper .tutorial-eyebrow {

    letter-spacing: .04em;

    gap: .4rem;

    display: inline-flex;
    align-items: center;

}

.keim-sweeper .tutorial-eyebrow span {

    letter-spacing: 0;

}

.keim-sweeper .tutorial-skip {

    min-height: 2rem;

    border: 0;
    background: transparent;

    padding: .15rem .3rem;

}

.keim-sweeper .tutorial-skip:hover,
.keim-sweeper .tutorial-skip:focus-visible {

    color: var(--wood-hud-gold, var(--accent));

}

.keim-sweeper .tutorial-message {

    min-width: 0;

    gap: .7rem;

    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;

}

.keim-sweeper .tutorial-message-icon {

    width: 2.25rem;
    height: 2.25rem;

    color: var(--wood-hud-gold, var(--accent));

    border: 1px solid var(--frame-strong);
    border-radius: .7rem;
    background: rgba(140, 100, 50, .18);

    display: grid;
    place-items: center;

}

.keim-sweeper .tutorial-message-icon .ui-icon {

    width: 1.3rem;
    height: 1.3rem;

}

.keim-sweeper .tutorial-title {

    color: var(--wood-hud-ink, var(--ink));
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.15;

    display: block;

}

.keim-sweeper .tutorial-text {

    position: relative;

    font-size: .95rem;
    line-height: 1.3;

    margin: .25rem 0 0;

}

.keim-sweeper .tutorial-text-shine {

    position: absolute;

    padding: var(--shine-gutter);

    display: block;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;

    color: #fffdf0;
    text-shadow: 0 0 .15rem #fff5bd, 0 0 .35rem rgba(255, 211, 96, .95),
        0 0 .65rem rgba(255, 190, 66, .65);
    filter: drop-shadow(0 0 .23rem rgba(255, 230, 145, .85));
    -webkit-mask-image: radial-gradient(ellipse, #000 10%, rgba(0, 0, 0, .9) 30%,
        rgba(0, 0, 0, .3) 70%, transparent 100%);
    mask-image: radial-gradient(ellipse, #000 10%, rgba(0, 0, 0, .9) 30%,
        rgba(0, 0, 0, .3) 70%, transparent 100%);
    -webkit-mask-size: var(--shine-width) var(--shine-height);
    mask-size: var(--shine-width) var(--shine-height);
    -webkit-mask-position: -9999px 0;
    mask-position: -9999px 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

}

.keim-sweeper .tutorial-hud .btn.primary.tutorial-begin {

    align-self: center;

}

.keim-sweeper .tutorial-progress {

    gap: .35rem;
    margin-top: .1rem;

    display: flex;

}

.keim-sweeper .tutorial-progress span {

    height: .25rem;
    min-width: 0;

    border-radius: 1rem;
    background: var(--frame-strong);

    flex: 1;

}

.keim-sweeper .tutorial-progress span.is-complete {

    background: var(--wood-hud-gold, var(--accent));

}

.keim-sweeper .tutorial-remaining {

    color: var(--wood-hud-muted, var(--muted));
    font-size: .85rem;
    font-weight: 700;

    gap: .4rem;

    display: grid;

}

.keim-sweeper .tutorial-remaining-track {

    height: .3rem;

    border-radius: 1rem;
    background: var(--frame-strong);

    display: block;
    overflow: hidden;

}

.keim-sweeper .tutorial-remaining-track span {

    width: 0;
    height: 100%;

    border-radius: inherit;
    background: var(--wood-hud-gold, var(--accent));

    display: block;
    transition: width .25s ease-out;

}

.keim-sweeper .tutorial-actions {

    gap: .5rem;
    margin-top: .15rem;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

}

.keim-sweeper .tutorial-actions .btn {

    width: 100%;
    min-width: 0;
    min-height: 2.75rem;

    font-size: .9rem;
    line-height: 1.15;
    white-space: normal;

    gap: .35rem;
    padding: .45rem .5rem;

    justify-content: center;

}

.keim-sweeper .tutorial-actions .ui-icon {

    width: 1rem;
    height: 1rem;

}

/* Board guidance. */

.keim-sweeper .tutorial-guides {

    z-index: 12;

    overflow: visible;
    pointer-events: none;

}

.keim-sweeper .tutorial-guide-path {

    fill: none;
    stroke: #fff0c4;
    stroke-width: 3;
    stroke-dasharray: 6 7;
    stroke-linecap: round;

    filter: drop-shadow(0 1px 2px rgba(34, 24, 14, .85));

}

.keim-sweeper .tutorial-guide-arrow {

    fill: #fff0c4;

    filter: drop-shadow(0 1px 2px rgba(34, 24, 14, .9));

}

.keim-sweeper .tutorial-guide-target {

    fill: rgba(255, 226, 123, .2);
    stroke: #fff0c4;
    stroke-width: 4;
    stroke-linejoin: round;

    filter: drop-shadow(0 0 6px rgba(243, 200, 79, .8));

}

.keim-sweeper .tutorial-guide-target.is-backtrack {

    fill: rgba(231, 132, 77, .22);
    stroke: #ffc28d;

}

.keim-sweeper .tutorial-guide-target.is-danger {

    fill: rgba(187, 25, 20, .24);
    stroke: #ee7161;

}

.keim-sweeper .tutorial-guide-danger {

    fill: rgba(187, 25, 20, .16);
    stroke: #ee7161;
    stroke-width: 3;
    stroke-dasharray: 8 6;
    stroke-linejoin: round;

    filter: drop-shadow(0 0 4px rgba(187, 25, 20, .65));

}

.keim-sweeper .tutorial-free-target.reach {

    background: rgba(255, 226, 123, .17);

}

@media (prefers-reduced-motion: no-preference) {

    :root:not([data-reduce-motion="true"]) .keim-sweeper .tutorial-guide-path {

        animation: ks-tutorial-flow .8s linear infinite;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .tutorial-guide-target {

        animation: ks-tutorial-pulse 1.2s ease-in-out infinite;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .tutorial-guide-danger {

        animation: ks-tutorial-danger 1.5s ease-in-out infinite;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .tutorial-free-target.reach {

        animation: ks-tutorial-free 1.6s ease-in-out infinite;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .tutorial-step-changed .tutorial-message {

        animation: ks-tutorial-enter .4s ease-out;

    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .tutorial-remind .tutorial-message-icon {

        animation: ks-tutorial-remind .3s ease-in-out;

    }

}

@keyframes ks-tutorial-flow {

    to { stroke-dashoffset: -13; }

}

@keyframes ks-tutorial-pulse {

    0%, 100% { opacity: .75; stroke-width: 3; }
    50% { opacity: 1; stroke-width: 6; }

}

@keyframes ks-tutorial-danger {

    0%, 100% { opacity: .5; }
    50% { opacity: 1; }

}

@keyframes ks-tutorial-free {

    0%, 100% { background: rgba(255, 226, 123, .07); }
    50% { background: rgba(255, 226, 123, .22); }

}

@keyframes ks-tutorial-enter {

    from { opacity: .25; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }

}

@keyframes ks-tutorial-remind {

    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }

}

@media (max-width: 35em) {

    .keim-sweeper .tutorial-actions {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 47.5em) {

    .keim-sweeper .tutorial-hud {

        width: min(32rem, calc(100% - 1.4rem));

        top: calc(var(--hud-top) + env(safe-area-inset-top) + 1rem);

    }

}

@media (max-width: 22.5em) {

    .keim-sweeper .tutorial-hud {

        gap: .55rem;
        padding: .7rem .8rem;

    }

    .keim-sweeper .tutorial-eyebrow,
    .keim-sweeper .tutorial-skip {

        font-size: .75rem;

    }

    .keim-sweeper .tutorial-message {

        gap: .6rem;

        grid-template-columns: 2rem minmax(0, 1fr);

    }

    .keim-sweeper .tutorial-message-icon {

        width: 2rem;
        height: 2rem;

    }

    .keim-sweeper .tutorial-title {

        font-size: 1rem;

    }

    .keim-sweeper .tutorial-text {

        font-size: .875rem;

    }

}

/* Compact tutorial guide beside the board on short landscape screens. */

@media (orientation: landscape) and (max-height: 26.25em) and (max-width: 47.5em) {

    .keim-sweeper .tutorial-hud {

        width: min(14rem, calc(100% - 1rem));
        max-height: calc(100dvh - var(--hud-top) - var(--hud-bottom) - 1rem);

        gap: .45rem;
        padding: .55rem .65rem;

        top: calc(var(--hud-top) + env(safe-area-inset-top) + .5rem);
        right: auto;
        left: max(.5rem, env(safe-area-inset-left));

        margin-inline: 0;

    }

    .keim-sweeper .tutorial-eyebrow,
    .keim-sweeper .tutorial-skip {

        font-size: .7rem;

    }

    .keim-sweeper .tutorial-message {

        gap: .4rem;

        grid-template-columns: 1.75rem minmax(0, 1fr);

    }

    .keim-sweeper .tutorial-message-icon {

        width: 1.75rem;
        height: 1.75rem;

    }

    .keim-sweeper .tutorial-title {

        font-size: .9rem;

    }

    .keim-sweeper .tutorial-text {

        font-size: .8rem;

    }

    .keim-sweeper .tutorial-actions {

        grid-template-columns: 1fr;

    }

    .keim-sweeper .tutorial-actions .btn {

        min-height: 2.25rem;

        font-size: .8rem;

    }

    .keim-sweeper .tutorial-hud.is-finished {

        width: min(28rem, calc(100% - 1rem));

        right: 0;
        left: 0;

        margin-inline: auto;

    }

    .keim-sweeper .tutorial-hud.is-finished .tutorial-actions {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



/* Board HUDs ease in without shifting the map or repeating on status polls. */
@keyframes ks-board-hud-appear {
    from {opacity: 0; transform: translateY(-.55rem) scale(.985);}
    to {opacity: 1; transform: translateY(0) scale(1);}
}

@keyframes ks-board-hud-content {
    from {opacity: 0; transform: translateY(.35rem);}
    to {opacity: 1; transform: translateY(0);}
}

@keyframes ks-dialog-backdrop-appear {
    from {opacity: 0;}
    to {opacity: 1;}
}

@media (prefers-reduced-motion: no-preference) {
    :root:not([data-reduce-motion="true"]) .keim-sweeper .overlay:not([hidden]) {
        animation: ks-dialog-backdrop-appear .22s ease-out both;
    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .overlay:not([hidden]) > .dialog {
        animation: ks-board-hud-appear .36s cubic-bezier(.2, .75, .25, 1) both;
    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .tutorial-hud:not([hidden]) {
        animation: ks-board-hud-appear .38s cubic-bezier(.2, .75, .25, 1) both;
    }

    :root:not([data-reduce-motion="true"]) .keim-sweeper .async-result-hud > * {
        animation: ks-board-hud-content .28s ease-out both;
    }
}

/* Async board results reuse the tutorial HUD layout. */
.keim-sweeper .async-result-hud {
    width: min(28rem, calc(100% - 1.4rem));
    gap: .6rem;
}

.keim-sweeper .async-result-hud[hidden] { display: none; }

.keim-sweeper .async-board-result-details {
    min-width: 0;
}

.keim-sweeper .async-board-result-toggle {
    color: var(--wood-hud-ink, var(--ink));
    font-size: var(--text-xs);
    font-weight: 800;
    cursor: pointer;
}

.keim-sweeper .async-board-result-toggle:focus-visible {
    color: var(--wood-hud-gold, var(--accent));
}

.keim-sweeper .async-board-result-content {
    display: grid;
    gap: .6rem;
    padding-top: .7rem;
}

.keim-sweeper .async-result-hud .tutorial-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.keim-sweeper .async-board-result-actions > .async-board-result-next,
.keim-sweeper .async-board-result-actions > :only-child {
    grid-column: 1 / -1;
}

.keim-sweeper .async-result-hud.is-grandprix-final {
    width: min(31rem, calc(100% - 1.4rem));
}

.keim-sweeper .async-board-result-rounds {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.keim-sweeper .async-board-result-round-list {
    display: grid;
    gap: .1rem;
}

.keim-sweeper .async-board-result-round-row {
    display: grid;
    grid-template-columns: minmax(2.5rem, .7fr) repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: .3rem;
    padding: .23rem .4rem;
    font-size: .85rem;
    font-weight: 700;
    border-bottom: 1px solid var(--frame-strong);
}

.keim-sweeper .async-board-result-round-row.is-heading {
    color: var(--wood-hud-muted, var(--muted));
    font-size: .75rem;
}

.keim-sweeper .async-board-result-round-row > :not(:first-child) {
    text-align: right;
}

.keim-sweeper .async-board-result-round-score.is-winner {
    color: var(--wood-hud-gold, var(--accent));
    font-weight: 900;
}

.keim-sweeper .async-result-hud.is-grandprix-final .async-board-result-score > strong {
    font-size: 1.85rem;
}

.keim-sweeper .async-board-result-scores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.keim-sweeper .async-board-result-score {
    min-width: 0;
    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-sm);
    padding: .6rem .7rem;
    display: grid;
    gap: .1rem;
    position: relative;
    background: var(--hud-glass);
}

.keim-sweeper .async-board-result-score.is-winner {
    border-color: var(--wood-hud-gold, #d3a43c);
    box-shadow: inset 0 0 0 1px var(--wood-hud-gold, #d3a43c);
}

.keim-sweeper .async-board-result-score > strong {
    font-size: 1.55rem;
    line-height: 1.15;
}

.keim-sweeper .async-board-result-name {
    font-size: .85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.keim-sweeper .async-board-result-name .ui-icon {
    width: 1rem;
    height: 1rem;
}

.keim-sweeper .async-board-result-score > small {
    font-size: .75rem;
    color: var(--wood-hud-muted, var(--muted));
}

.keim-sweeper .async-board-result-score.is-winner {
    isolation: isolate;
    overflow: visible;
}

.keim-sweeper .async-board-result-score.is-winner .multiplayer-ready-sparks {
    opacity: 1;
}

.keim-sweeper .multiplayer-thinking-dots {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: .18rem;
    margin-left: .25rem;
}

.keim-sweeper .multiplayer-thinking-dots > span {
    width: .33rem;
    height: .33rem;
    background: currentColor;
    border-radius: 50%;
    opacity: .25;
}

.keim-sweeper .multiplayer-thinking {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

:root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-thinking-dots > span {
    animation: ks-multiplayer-thinking 1.2s ease-in-out infinite;
}

:root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-thinking-dots > span:nth-child(2) { animation-delay: .2s; }
:root:not([data-reduce-motion="true"]) .keim-sweeper .multiplayer-thinking-dots > span:nth-child(3) { animation-delay: .4s; }

@keyframes ks-multiplayer-thinking {
    0%, 85%, 100% {opacity: .25; transform: translateY(0);}
    45% {opacity: 1; transform: translateY(-2px);}
}

@media (max-width: 22.5em) {
    .keim-sweeper .async-result-hud .tutorial-actions {grid-template-columns: repeat(2, minmax(0, 1fr));}
}


.keim-sweeper .shoe-print--default {
    filter: drop-shadow(0 .6px .7px rgba(34, 42, 51, 1));
}

/* Status notices share the game's panel and typography without covering the board. */
.keim-sweeper .multiplayer-update-notice {
    position: fixed;
    right: max(.75rem, env(safe-area-inset-right));
    bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + 4rem);
    z-index: 105;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 1.25rem;
    align-items: start;
    gap: .65rem;
    width: min(19.5rem, calc(100% - 1.5rem));
    padding: .8rem .85rem;
    border: 1px solid var(--frame-strong);
    border-radius: var(--radius-md);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 .6rem 1.65rem rgba(26, 23, 18, .18);
}

.keim-sweeper .multiplayer-update-notice[hidden] { display: none; }

.keim-sweeper .multiplayer-update-notice-icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--hud-glass);
    color: var(--ink);
}

.keim-sweeper .multiplayer-update-notice-icon .ui-icon {
    width: 1rem;
    height: 1rem;
}

.keim-sweeper .multiplayer-update-notice-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .16rem;
    min-width: 0;
    line-height: 1.25;
}

.keim-sweeper .multiplayer-update-notice-copy strong {
    font-size: .91rem;
    line-height: 1.24;
}

.keim-sweeper .multiplayer-update-notice-copy small {
    color: var(--muted);
    font-size: .78rem;
}

.keim-sweeper .multiplayer-update-open {
    border: 0;
    background: none;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: .18em;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    padding: .3rem 0 0;
    cursor: pointer;
}

.keim-sweeper .multiplayer-update-open:hover,
.keim-sweeper .multiplayer-update-open:focus-visible {
    color: var(--muted);
}

.keim-sweeper .multiplayer-update-dismiss {
    display: inline-grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border: 0;
    padding: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.keim-sweeper .multiplayer-update-dismiss .ui-icon {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 25em) {
    .keim-sweeper .multiplayer-update-notice { gap: .5rem; padding: .7rem; }
}
}

.keim-sweeper .async-board-result-replay-note {
    margin: .55rem 0;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
}

.keim-sweeper .async-board-result-replay-tag {
    margin-left: .5rem;
    font-size: .77em;
    font-weight: 600;
    opacity: .85;
}