/* SlovoBoj in the browser: the v4 "Vedro" look of the app (Slovoboj.App/Controls, mockups in
   documents/assets-src/mockups/v4). Colours and measures are the variables of tokens.css, generated from DesignValues;
   one CSS pixel is the app's dp. Raised elements are a flat face, a 3 px darker edge and a soft navy shadow of three
   translucent copies, as the app's Painter draws them. */

/* ---- the font: Nunito, our own files (no Google Fonts, for privacy) ------------------------------------------- */

@font-face {
    font-family: Nunito;
    font-weight: 900;
    font-display: block;
    src: url("../fonts/nunito-black.woff2") format("woff2");
    ascent-override: 101.1%;
    descent-override: 35.3%;
    line-gap-override: 0%;
}

@font-face {
    font-family: Nunito;
    font-weight: 700;
    font-display: block;
    src: url("../fonts/nunito-bold.woff2") format("woff2");
    ascent-override: 101.1%;
    descent-override: 35.3%;
    line-gap-override: 0%;
}

/* ---- the page: sky over the whole window, the game on a phone's screen in its middle ------------------------------ */

/* The game's screen (plan-web.md W3): a phone's width in the middle of the window, as tall as the window but never taller
   than a phone, so the board and the wheel stay together as they do on a phone and any extra height is sky around it.
   - A narrow or low window: as wide as the window up to 480 px, the ad band at the top of the column (plan-web.md 7.2).
   - A wide window (880 × 640 and more): an iPhone 15's 390 px, the ads on the side rails.
   - Wide and high enough (880 × 696 and more): the same screen in a phone's frame, 640–844 px tall, over a dimmed sky.
     The screens keep their content off the frame's rounded corners and the home indicator (--safe-top, --safe-bottom).
   - Narrower but high enough (500–879 × 772 and more): the phone's frame too, the ad at the top of the window (468 × 60,
     from 760 × 802 728 × 90) and the phone below it, as far from the ad as from the window's bottom.
   On a real phone (plan-web.md W7) the narrow layout fills the browser's window, and the system's own safe areas (a
   home screen web app under the status bar, the home indicator) come from env(): the ad band grows under the top one,
   as the app's band goes under the status bar, and the screens keep their content off the bottom one.
   The media queries below repeat these numbers (CSS has no named media queries yet). */
:root {
    --vh: 100vh;
    --screen-w: clamp(320px, 100vw, 480px);
    /* The ad band at the top of the column where the window is too narrow or too low for side rails. */
    --band: 60px;
    --inset-top: env(safe-area-inset-top, 0px);
    --screen-h: min(var(--vh), min(844px, var(--screen-w) * 2.1641) + var(--band) + var(--inset-top));
    --column: var(--screen-w);
    --bezel: 0px;
    --screen-radius: 0px;
    --safe-top: 0px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* The screen's distance from the top of the window: at the top with the ad band, in the middle with the side rails. */
    --screen-top: 0px;
    /* The ad above the phone's frame on a narrower window. */
    --top-ad-w: 0px;
    --top-ad-h: 0px;
    /* The line box of Nunito (ascent + descent), so a label's box is what the app's Label measures. */
    --line: 1.364;
}

@supports (height: 100dvh) {
    :root { --vh: 100dvh; }
}

@media (max-width: 467.98px) {
    :root { --band: 50px; }
}

@media (min-width: 880px) and (min-height: 640px) {
    :root {
        --screen-w: 390px;
        --band: 0px;
        --inset-top: 0px;
        --screen-h: var(--vh);
        --screen-top: calc((var(--vh) - var(--screen-h)) / 2);
    }
}

@media (min-width: 880px) and (min-height: 696px) {
    :root {
        --bezel: 12px;
        --screen-radius: 46px;
        /* 16 px of sky and the 12 px bezel above and below the screen. */
        --screen-h: clamp(640px, var(--vh) - 56px, 844px);
        --safe-top: 20px;
        --safe-bottom: 20px;
    }
}

@media (min-width: 500px) and (max-width: 879.98px) and (min-height: 772px) {
    :root {
        --screen-w: 390px;
        --band: 0px;
        --inset-top: 0px;
        --bezel: 12px;
        --screen-radius: 46px;
        --safe-top: 20px;
        --safe-bottom: 20px;
        --top-ad-w: 468px;
        --top-ad-h: 60px;
        /* The ad 16 px from the top of the window; the screen as in the wide frame, less the ad and its 16 px, and in the
           middle of the height below the ad, so the phone is as far from the ad as from the window's bottom (the user,
           14. 10.). */
        --screen-h: clamp(640px, var(--vh) - 72px - var(--top-ad-h), 844px);
        --screen-top: calc((var(--vh) - var(--screen-h) + var(--top-ad-h) + 16px) / 2);
    }
}

@media (min-width: 760px) and (max-width: 879.98px) and (min-height: 802px) {
    :root {
        --top-ad-w: 728px;
        --top-ad-h: 90px;
    }
}

*, *::before, *::after { box-sizing: border-box; }

/* A double tap zooms nothing (the board's tiles are tapped quickly), while panning a list and pinching still work; the
   wheel takes every touch itself (touch-action: none). */
html { touch-action: manipulation; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--bg-bottom);
    color: var(--text-on-dark);
    font-family: Nunito, system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

button {
    font: inherit;
    color: inherit;
    -webkit-user-select: none;
    user-select: none;
}

img { -webkit-user-drag: none; }

.sky {
    position: fixed;
    inset: 0;
    background: linear-gradient(var(--bg-top), var(--bg-bottom));
    overflow: hidden;
}

/* The three soft circles, as shares of the column's width and the window's height (SkyBackgroundView): around the
   column, so a wide window keeps the phone's picture in the middle. */
.sky-circles {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--column);
    transform: translateX(-50%);
}

.sky-circles i {
    position: absolute;
    border-radius: 50%;
    background: var(--bg-circle);
}

.sky-circles i:nth-child(1) {
    width: calc(var(--column) * 0.84);
    height: calc(var(--column) * 0.84);
    left: calc(var(--column) * (0.86 - 0.42));
    top: calc(16% - var(--column) * 0.42);
}

.sky-circles i:nth-child(2) {
    width: calc(var(--column) * 0.88);
    height: calc(var(--column) * 0.88);
    left: calc(var(--column) * (0.10 - 0.44));
    top: calc(60% - var(--column) * 0.44);
}

.sky-circles i:nth-child(3) {
    width: calc(var(--column) * 0.60);
    height: calc(var(--column) * 0.60);
    left: calc(var(--column) * (0.92 - 0.30));
    top: calc(86% - var(--column) * 0.30);
}

/* Around the phone's frame the sky is a little darker, so the phone stands out (the user's choice, 14. 10.). */
.sky::after {
    content: "";
    position: absolute;
    inset: 0;
    display: none;
    background: rgb(3 12 30 / 0.4);
}

/* ---- the phone's frame, on a window wide and high enough (index.html: before the game loads, and around it) ---------- */

.device-layer {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--screen-top);
    pointer-events: none;
}

.device-layer > div {
    position: relative;
    flex: none;
    width: var(--screen-w);
    height: var(--screen-h);
    border-radius: var(--screen-radius);
}

/* Under the game: the screen's own sky (SkyBackgroundView over the screen: the gradient and the three circles as shares of
   its width and height) and the phone's shadow. The game and the side rails come later in the page, so the shadow lies
   under the ads' places, never over them. */
.device-screen {
    background:
        radial-gradient(circle calc(var(--screen-w) * 0.42) at 86% 16%, var(--bg-circle) calc(100% - 1px), transparent 100%),
        radial-gradient(circle calc(var(--screen-w) * 0.44) at 10% 60%, var(--bg-circle) calc(100% - 1px), transparent 100%),
        radial-gradient(circle calc(var(--screen-w) * 0.30) at 92% 86%, var(--bg-circle) calc(100% - 1px), transparent 100%),
        linear-gradient(var(--bg-top), var(--bg-bottom));
    box-shadow: 0 24px 64px calc(var(--bezel) - 4px) rgb(0 0 0 / 0.5);
}

/* Over the game: the bezel and its metal rim as rings around the screen's rounded corners, which they cover (the game's
   column is a plain rectangle, so nothing in it is clipped or repainted for the corners), and the home indicator. The
   clicks go through. */
.device-over { z-index: 150; }

.device-frame {
    box-shadow:
        inset 0 0 0 1px rgb(0 0 0 / 0.55),
        0 0 0 var(--bezel) #0a0d13,
        0 0 0 calc(var(--bezel) + 1.5px) #4b5465,
        0 0 0 calc(var(--bezel) + 2.5px) #161a22;
}

.home-indicator {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 134px;
    height: 5px;
    margin-left: -67px;
    border-radius: 2.5px;
    background: rgb(255 255 255 / 0.7);
}

@media (min-width: 880px) and (min-height: 696px), (min-width: 500px) and (max-width: 879.98px) and (min-height: 772px) {
    .sky::after { display: block; }
    .device-layer { display: flex; }
    /* Around the phone, the sky's circles are the window's: at the same shares of its width and height, as big as on a
       phone of the window's height, so they stand away from the phone rather than ring it. */
    .sky-circles {
        left: 0;
        width: 100%;
        transform: none;
        --column: calc(var(--vh) * 0.4621);
    }
    .sky-circles i:nth-child(1) { left: calc(86% - var(--column) * 0.42); }
    .sky-circles i:nth-child(2) { left: calc(10% - var(--column) * 0.44); }
    .sky-circles i:nth-child(3) { left: calc(92% - var(--column) * 0.30); }
}

/* ---- the game's column and the side rails --------------------------------------------------------------------------- */

#app {
    position: relative;
    height: 100%;
}

.page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--screen-top);
}

.column {
    position: relative;
    flex: none;
    width: var(--screen-w);
    height: var(--screen-h);
    display: flex;
    flex-direction: column;
}

/* The ads' places on the sides (plan-web.md 7.2), empty bands in the ad band's colour until W6, so their place and size
   show already: in the middle of the screen's height and 32 px off the phone. Only on a window wide and high enough;
   otherwise the ad band at the top of the column has the ad. */
.rail { display: none; }

.ad-slot {
    display: none;
    flex: none;
    background: var(--ad-band);
}

@media (min-width: 880px) and (min-height: 640px) {
    .rail {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        height: var(--screen-h);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
    }
    .rail-left { align-items: flex-end; padding-right: calc(var(--bezel) + 32px); }
    .rail-right { align-items: flex-start; padding-left: calc(var(--bezel) + 32px); }
    .ad-tall { display: block; width: 160px; height: 600px; }
}

@media (min-width: 1160px) and (min-height: 640px) {
    .ad-tall { width: 300px; }
}

@media (min-width: 1160px) and (min-height: 900px) {
    .ad-box { display: block; width: 300px; height: 250px; }
}

/* At the top of a narrower window, above the phone's frame. */
.ad-top {
    position: absolute;
    left: 50%;
    top: 16px;
    width: var(--top-ad-w);
    height: var(--top-ad-h);
    margin-left: calc(var(--top-ad-w) / -2);
}

@media (min-width: 500px) and (max-width: 879.98px) and (min-height: 772px) {
    .ad-top { display: block; }
}

.ad-band {
    flex: none;
    height: calc(var(--band) + var(--inset-top));
    padding-top: var(--inset-top);
    background: var(--ad-band);
}

.screens {
    position: relative;
    flex: 1;
    min-height: 0;
}

.screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.screen[hidden] { display: none; }

/* ---- the splash, before WebAssembly (index.html) and until the menu is ready ---------------------------------------- */

#splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--screen-top);
    background: linear-gradient(var(--bg-top), var(--bg-bottom));
    transition: opacity 350ms cubic-bezier(0.32, 0, 0.67, 0);
}

#splash.done { opacity: 0; pointer-events: none; }

/* The app's splash rows: 124* above the wordmark, 150* for it (capped at 156), 45*, the swords at 112, 106*, the bar
   (6), 19*, the caption, 137*. On the game's screen, so the swords stand where the menu's do. */
.splash-column {
    flex: none;
    width: var(--screen-w);
    height: var(--screen-h);
    padding: var(--safe-top) 0 var(--safe-bottom);
    display: grid;
    grid-template-rows: minmax(0, 124fr) minmax(0, 150fr) minmax(0, 45fr) 112px minmax(0, 106fr) 6px minmax(0, 19fr) auto minmax(0, 137fr);
    justify-items: center;
}

.splash-wordmark {
    grid-row: 2;
    width: calc(100% - 48px);
    height: min(100%, 156px);
    align-self: center;
    object-fit: contain;
}

.splash-wordmark:not([src]) { visibility: hidden; }

.splash-swords { grid-row: 4; height: 112px; }

.splash-bar {
    grid-row: 6;
    width: 160px;
    height: 6px;
    border-radius: 3px;
    background: rgb(255 255 255 / 0.18);
    overflow: hidden;
}

.splash-bar > div {
    height: 100%;
    border-radius: 3px;
    background: var(--yellow);
    width: max(6px, var(--fill, calc(var(--blazor-load-percentage, 0%) * 0.7)));
    transition: width 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

.splash-caption {
    grid-row: 8;
    font-size: 13px;
    line-height: var(--line);
}

/* In the phone's frame the splash is the phone's screen: the dimmed sky and the frame stand around it from the start. */
@media (min-width: 880px) and (min-height: 696px), (min-width: 500px) and (max-width: 879.98px) and (min-height: 772px) {
    #splash { background: none; }
    .splash-column {
        border-radius: var(--screen-radius);
        background: linear-gradient(var(--bg-top), var(--bg-bottom));
    }
}

/* ---- raised elements: face, 3 px edge, soft shadow (Painter.RaisedRect / RaisedDisc / TilePainter) --------------------- */

/* Every raised element below has the same box-shadow: first the edge (a copy of the face 3 px lower), then three soft
   copies that grow by a third of the spread (--spr) and sink a little more under the offset (--off), as
   Painter.SoftShadow draws them; their alphas are the tile shadow's at 40, 26.67 and 13.33 %. --off and --spr follow
   the element's size the way the app's painters do. */

/* ---- flat (pill) buttons -------------------------------------------------------------------------------------- */

.flat {
    display: block;
    width: 100%;
    height: calc(var(--h) + var(--edge-height) + 10px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    --face-color: var(--tile-face);
    --edge-color: var(--tile-edge);
    --ink-color: var(--ink);
}

.flat.orange { --face-color: var(--orange); --edge-color: var(--orange-edge); --ink-color: var(--text-on-dark); }
.flat.yellow { --face-color: var(--yellow); --edge-color: var(--yellow-edge); }
.flat.glass { --ink-color: var(--text-on-dark); }

.flat-face {
    --off: calc(var(--h) * 0.08);
    --spr: calc(var(--h) * 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: var(--h);
    border-radius: calc(var(--h) / 2);
    background: var(--face-color);
    color: var(--ink-color);
    font-weight: 900;
    font-size: var(--font);
    white-space: nowrap;
    box-shadow:
        0 var(--edge-height) 0 0 var(--edge-color),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.2) 0 calc(var(--spr) / 6) color-mix(in srgb, var(--tile-shadow) 40%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.4) 0 calc(var(--spr) / 3) color-mix(in srgb, var(--tile-shadow) 26.67%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.6) 0 calc(var(--spr) / 2) color-mix(in srgb, var(--tile-shadow) 13.33%, transparent);
}

/* The label sits a little above the line box's middle, so the lower-case body reads centred (LabelLift). */
.flat-face > * { transform: translateY(calc(var(--font) * var(--label-lift) * -1)); }
.flat-text { line-height: var(--line); }
.flat-icon { width: calc(var(--font) * 1.18); height: calc(var(--font) * 1.18); object-fit: contain; }

.flat:active:not(:disabled) .flat-face {
    transform: translateY(var(--edge-height));
    box-shadow: none;
}

.flat:disabled { cursor: default; }

.flat:disabled .flat-face {
    background: color-mix(in srgb, var(--face-color) 45%, transparent);
    box-shadow: 0 var(--edge-height) 0 0 color-mix(in srgb, var(--edge-color) 45%, transparent);
}

.flat:disabled .flat-face > * { opacity: 0.6; }

.flat.glass .flat-face {
    background: rgb(255 255 255 / 0.12);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55);
}

.flat.glass:active:not(:disabled) .flat-face { transform: none; background: rgb(255 255 255 / 0.28); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55); }
.flat.glass:disabled .flat-face { background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25); }

.flat.outline .flat-face {
    background: var(--tile-face);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tile-edge) 60%, transparent);
}

.flat.outline:active:not(:disabled) .flat-face { transform: none; background: var(--outline-pressed); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tile-edge) 60%, transparent); }

.flat:focus-visible .flat-face { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---- round buttons ---------------------------------------------------------------------------------------------- */

.round {
    position: relative;
    flex: none;
    width: calc(var(--d) + 16px);
    height: calc(var(--d) + 16px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    --face-color: var(--tile-face);
    --edge-color: var(--tile-edge);
}

.round.orange { --face-color: var(--orange); --edge-color: var(--orange-edge); }
.round.yellow { --face-color: var(--yellow); --edge-color: var(--yellow-edge); }

/* The disc sits half its edge above the box's middle, so the disc and its edge together are centred. */
.round-face {
    --off: calc(var(--d) * 0.06);
    --spr: calc(var(--d) * 0.1);
    position: absolute;
    left: 8px;
    top: calc(8px - var(--edge-height) / 2);
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background: var(--face-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 var(--edge-height) 0 0 var(--edge-color),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.2) 0 calc(var(--spr) / 6) color-mix(in srgb, var(--tile-shadow) 40%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.4) 0 calc(var(--spr) / 3) color-mix(in srgb, var(--tile-shadow) 26.67%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.6) 0 calc(var(--spr) / 2) color-mix(in srgb, var(--tile-shadow) 13.33%, transparent);
}

.round-face img {
    max-width: calc(var(--d) * 0.58);
    height: calc(var(--d) * 0.46);
    object-fit: contain;
}

.round:active:not(:disabled) .round-face { transform: translateY(var(--edge-height)); box-shadow: none; }

.round.glass .round-face {
    top: 8px;
    background: rgb(255 255 255 / 0.18);
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45);
}

.round.glass:active:not(:disabled) .round-face { transform: none; background: rgb(255 255 255 / 0.35); }
.round:disabled { cursor: default; }
.round:focus-visible .round-face { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---- pills, flags, bars, badges ------------------------------------------------------------------------------------ */

.glass-pill {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--pill);
    font-size: 15px;
    line-height: var(--line);
    white-space: nowrap;
}

.flag {
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--tile-face);
}

.flag.shadow { box-shadow: 0 3px 8px rgb(11 36 71 / 0.45); }

.flag img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.flag::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: clamp(1.5px, calc(var(--size) * 0.07), 2.5px) solid var(--ring);
}

.loading-bar {
    --bar-h: 6px;
    height: var(--bar-h);
    border-radius: calc(var(--bar-h) / 2);
    background: rgb(255 255 255 / 0.18);
    overflow: hidden;
}

.loading-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--yellow);
}

.stars {
    display: flex;
    justify-content: center;
    gap: calc(var(--star) * 0.18);
}

.count-badge {
    position: absolute;
    min-width: 22px;
    height: 20.5px;
    padding: 0 6px;
    border-radius: 10.25px;
    background: var(--error);
    box-shadow: 0 1.5px 0 var(--error-edge);
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    line-height: 20.5px;
    text-align: center;
    pointer-events: none;
}

/* ---- toast ----------------------------------------------------------------------------------------------------- */

.toast-slot {
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* On the edge: the one-line face centred on the container's bottom edge (ToastView.OnEdgeMargin), a second line grows upwards. */
.toast-slot.on-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -31px;
    align-items: flex-end;
    padding-bottom: 11px;
}

.toast {
    --h: 40px;
    --off: calc(var(--h) * 0.08);
    --spr: calc(var(--h) * 0.16);
    --edge-color: var(--neutral-edge);
    max-width: calc(100% - 32px);
    min-height: 40px;
    padding: calc((40px - 18px * var(--line)) / 2) 22px;
    border-radius: 20px;
    background: var(--neutral);
    color: var(--text-on-dark);
    font-weight: 900;
    font-size: 18px;
    line-height: var(--line);
    text-align: center;
    opacity: 0;
    transform: scale(0.7);
    box-shadow:
        0 var(--edge-height) 0 0 var(--edge-color),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.2) 0 calc(var(--spr) / 6) color-mix(in srgb, var(--tile-shadow) 40%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.4) 0 calc(var(--spr) / 3) color-mix(in srgb, var(--tile-shadow) 26.67%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.6) 0 calc(var(--spr) / 2) color-mix(in srgb, var(--tile-shadow) 13.33%, transparent);
}

.toast span {
    display: block;
    transform: translateY(calc(18px * var(--label-lift) * -1));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast.positive { background: var(--success); --edge-color: var(--success-edge); }
.toast.negative { background: var(--error); --edge-color: var(--error-edge); }

.toast.shown {
    opacity: 1;
    transform: scale(1);
    animation: toast-pop 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toast-pop {
    from { transform: scale(0.7); }
    to { transform: scale(1); }
}

/* ---- dialogs and white cards ------------------------------------------------------------------------------------- */

/* Veils cover the whole screen, so in the phone's frame they take its rounded corners (the frame covers only what is
   outside the corners' arcs). */
.dialog-veil, .scrim {
    position: absolute;
    inset: 0;
    border-radius: var(--screen-radius);
    z-index: 50;
    display: flex;
    align-items: center;
    background: var(--scrim);
}

.dialog-card, .white-card {
    width: 100%;
    background: var(--tile-face);
    color: var(--ink);
    border-radius: 24px;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--tile-shadow) 50%, transparent);
}

.dialog-card {
    margin: 0 30px;
    padding: 26px 22px 18px;
    display: flex;
    flex-direction: column;
    animation: card-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes card-pop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.dialog-icon {
    align-self: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--icon-disc);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-icon img { width: 34px; height: 28px; object-fit: contain; }

.dialog-title {
    margin: 14px 0 0;
    font-weight: 900;
    font-size: 24px;
    line-height: var(--line);
    text-align: center;
    color: var(--ink);
    overflow-wrap: normal;
}

.dialog-message {
    margin: 6px 0 8px;
    font-size: 15px;
    line-height: var(--line);
    text-align: center;
    color: var(--muted-ink);
}

.dialog-link {
    margin: -4px 0 0;
    padding: 6px 0 12px;
    border: 0;
    background: none;
    font-size: 15px;
    color: var(--bg-top);
    text-decoration: underline;
    cursor: pointer;
}

.dialog-cancel { margin-top: -2px; }

.white-card {
    margin: 0 28px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: card-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-heading { font-weight: 900; font-size: 40px; line-height: var(--line); text-align: center; }
.card-title { font-size: 20px; line-height: var(--line); text-align: center; }
.card-record { font-weight: 900; font-size: 16px; line-height: var(--line); text-align: center; color: var(--orange-edge); }

.card-rows {
    margin: 4px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    align-items: center;
}

.card-rows dt {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted-ink);
}

.card-rows dd {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-weight: 900;
    font-size: 20px;
    line-height: var(--line);
}

.card-coin { width: 27px; height: 18px; }

.card-note {
    margin: -6px 0 4px;
    font-size: 13px;
    line-height: var(--line);
    text-align: center;
    color: var(--ink);
    opacity: 0.75;
}

/* ---- the menu (MainPage) -------------------------------------------------------------------------------------- */

.menu {
    position: absolute;
    inset: 0;
    padding: var(--safe-top) 0 var(--safe-bottom);
    display: grid;
    grid-template-rows: minmax(0, 40fr) minmax(0, 150fr) minmax(0, 4fr) minmax(0, 92fr) minmax(0, 14fr) 36px minmax(0, 24fr) auto auto minmax(0, 13fr) auto minmax(0, 51fr);
    justify-items: center;
    opacity: 0;
    transition: opacity 350ms cubic-bezier(0.33, 1, 0.68, 1);
}

.menu.shown { opacity: 1; }

.menu-wordmark {
    grid-row: 2;
    width: calc(100% - 48px);
    height: min(100%, 156px);
    align-self: end;
    object-fit: contain;
    object-position: bottom;
}

.menu-swords {
    grid-row: 4;
    height: min(100%, 92px);
    align-self: center;
}

.menu-pills {
    grid-row: 6;
    margin-top: 2px;
    display: flex;
    gap: 8px;
}

.menu-pills .continue { padding: 0 20px 0 6px; gap: 10px; }
.menu-pills .wallet { padding: 0 14px; gap: 6px; }
.menu-pills .wallet img { width: 24px; height: 18px; }

.menu .menu-play { grid-row: 8; width: calc(100% - 100px); }
.menu .menu-multi { grid-row: 9; width: calc(100% - 100px); margin-top: 3px; }

.menu-round {
    grid-row: 11;
    display: flex;
    gap: 6px;
}

.menu-round > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.caption {
    font-size: 13px;
    line-height: var(--line);
    text-align: center;
    white-space: nowrap;
}

.menu-toast {
    position: absolute;
    top: calc(120px + var(--safe-top));
    left: 0;
    right: 0;
}

/* ---- inner screens --------------------------------------------------------------------------------------------- */

/* The screens' roots keep their content off the phone frame's corners (--safe-*); a dialog's veil inside them still covers
   the whole screen, from the padding box. */
.inner-screen {
    position: absolute;
    inset: 0;
    padding: var(--safe-top) 0 var(--safe-bottom);
    display: flex;
    flex-direction: column;
}

.page-header {
    position: relative;
    flex: none;
    height: 56px;
    margin: 6px 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header .page-back { position: absolute; left: -8px; top: 0; }
.page-header .page-flag { position: absolute; right: -4px; top: 12px; }
/* The action stands 8 px left of the flag, or where the flag would be (the app's PageHeaderView). */
.page-header .page-action { position: absolute; right: -8px; top: 0; }
.page-header.with-flag .page-action { right: 36px; }
.page-header.with-action .page-title { margin: 0 92px; }

.page-title {
    margin: 0 48px;
    font-weight: 900;
    line-height: var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.centered-body {
    flex: 1;
    min-height: 0;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.centered-body::before { content: ""; flex: 1; }
.centered-body::after { content: ""; flex: 2; }

.notice-swords { align-self: center; height: 96px; }

.notice-title {
    margin: 20px 0 0;
    font-weight: 900;
    font-size: 24px;
    line-height: var(--line);
    text-align: center;
}

.notice-text {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: var(--line);
    text-align: center;
    opacity: 0.85;
}

.centered-body .flat { margin: 0 18px; width: auto; }
.centered-body .flat:first-of-type { margin-top: 28px; }
.centered-body .flat + .flat { margin-top: 4px; }

.coming-soon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 24px;
    opacity: 0.85;
}

.notice-screen {
    position: absolute;
    inset: 0;
    padding: var(--safe-top) 0 var(--safe-bottom);
    display: flex;
    align-items: center;
}

.notice-card { margin: 0 30px; align-items: stretch; }
.notice-card .notice-swords { height: 72px; margin-bottom: 4px; }

/* Google Play for an Android browser (StoreScreen, plan-web.md W7): the wordmark, the card with Google's badge at the
   size of the website's, the small link into the game and, at the bottom, Google's legal line for the badge. */
.store-screen {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.store-wordmark {
    width: calc(100% - 48px);
    max-height: 156px;
    object-fit: contain;
}

.store-screen .notice-card { width: auto; align-self: stretch; }
.store-screen .dialog-title { margin-top: 0; text-wrap: balance; }

.store-badge {
    align-self: center;
    margin-top: 4px;
    border-radius: 10px;
}

.store-badge img { display: block; width: auto; height: 56px; }

.store-browser {
    padding: 10px 16px;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: var(--line);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.store-trademark {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: calc(12px + var(--safe-bottom));
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    opacity: 0.6;
}

/* ---- the game (GamePage, GameBoardView) ------------------------------------------------------------------------- */

.game { position: absolute; inset: 0; }

.game-stage {
    position: absolute;
    inset: calc(6px + var(--safe-top)) 0 var(--safe-bottom) 0;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
}

.hud-row {
    flex: none;
    margin-top: 6px;
    display: flex;
    align-items: center;
}

.hud-row .hud-back { margin: 0 -6px; }

.hud-pill {
    display: inline-flex;
    align-items: center;
    flex: none;
    border-radius: 999px;
    background: var(--pill);
    white-space: nowrap;
}

.hud-pill img { flex: none; object-fit: contain; }

.hud-value {
    font-weight: 900;
    line-height: var(--line);
    font-variant-numeric: tabular-nums;
}

.hud-spacer { flex: 1; }

.game-stage > .board-root {
    flex: 1;
    min-height: 0;
    margin: 26px -10px 0;
}

.offline-pill {
    position: absolute;
    top: calc(74px + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 13px;
    line-height: 26px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.board-root {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
}

.board-stage {
    flex: none;
    height: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
}

.board-card-host { position: relative; flex: none; }

.board-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 22px;
}

.board-row {
    display: flex;
    justify-content: center;
    gap: var(--cell-gap);
    cursor: pointer;
}

.cell {
    position: relative;
    flex: none;
    width: var(--cell);
    height: calc(var(--cell) * (1 + var(--shadow-room)));
}

.slot, .cell .tile, .cell-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--cell);
    height: var(--cell);
    border-radius: calc(var(--cell) * var(--tile-corner-radius));
}

.slot { background: var(--slot); }

.cell-ring {
    border: var(--ring-stroke) solid var(--yellow);
    pointer-events: none;
}

/* A tile with its letter, the same on the board and on the strip (TilePainter.DrawTile). */
.tile, .strip-tile {
    --off: calc(var(--size) * 0.06);
    --spr: calc(var(--size) * 0.10);
    --face-color: var(--tile-face);
    --edge-color: var(--tile-edge);
    width: var(--size);
    height: var(--size);
    border-radius: calc(var(--size) * var(--tile-corner-radius));
    background: var(--face-color);
    color: var(--ink);
    font-weight: 900;
    font-size: calc(var(--size) * var(--tile-letter-size));
    box-shadow:
        0 var(--edge-height) 0 0 var(--edge-color),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.2) 0 calc(var(--spr) / 6) color-mix(in srgb, var(--tile-shadow) 40%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.4) 0 calc(var(--spr) / 3) color-mix(in srgb, var(--tile-shadow) 26.67%, transparent),
        0 calc(var(--off) + var(--edge-height) / 2 + var(--spr) * 0.6) 0 calc(var(--spr) / 2) color-mix(in srgb, var(--tile-shadow) 13.33%, transparent);
}

/* The capital centred on the face: a line box as tall as the tile puts the baseline (ascent − descent) / 2 em below the
   middle; it goes to half a cap height below it, less the mockup's small lift. */
.tile span, .strip-tile span {
    display: block;
    text-align: center;
    line-height: var(--size);
    transform: translateY(calc((var(--cap-height) / 2 - (var(--ascent) - var(--descent)) / 2) * 1em - var(--tile-letter-lift) * var(--size)));
}

.cell .tile {
    --size: var(--cell);
    transform: rotate(var(--tilt));
}

.cell .tile.hint { --face-color: var(--hint-face); --edge-color: var(--hint-edge); }

/* An instant reveal grows from nothing behind a yellow glow; a landing letter only squashes (LetterCellView.PopAsync). */
.cell .tile.pop { animation: tile-pop 260ms; }
.cell .tile.land { animation: tile-land 260ms; }

@keyframes tile-pop {
    0% { transform: rotate(var(--tilt)) scale(0.55); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
    54% { transform: rotate(var(--tilt)) scale(1.18); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
    100% { transform: rotate(var(--tilt)) scale(1); }
}

@keyframes tile-land {
    0% { transform: rotate(var(--tilt)) scale(1); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
    54% { transform: rotate(var(--tilt)) scale(1.18); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
    100% { transform: rotate(var(--tilt)) scale(1); }
}

.cell-glow {
    position: absolute;
    left: 0;
    top: calc(var(--edge-height) / 2);
    width: var(--cell);
    height: var(--cell);
    border-radius: calc(var(--cell) * var(--tile-corner-radius));
    background: var(--yellow);
    opacity: 0;
    animation: cell-glow 700ms cubic-bezier(0.32, 0, 0.67, 0);
    pointer-events: none;
}

@keyframes cell-glow {
    from { transform: scale(1.44); opacity: 0.55; }
    to { transform: scale(1.2); opacity: 0; }
}

/* The chain strip: yellow tiles at 1.25× the cell, centred on the card's bottom edge (ChainStripView). */
.chain-strip {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--size) * 0.11);
    pointer-events: none;
    z-index: 2;
}

.strip-tile {
    flex: none;
    --face-color: var(--yellow);
    --edge-color: var(--yellow-edge);
    transform: translateY(calc(var(--edge-height) / -2));
}

.board-card-host .toast-slot { z-index: 3; }

.wheel-host {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 34px 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel { position: relative; flex: none; }

.wheel canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wheel-tiles {
    touch-action: none;
    cursor: pointer;
}

.wheel-left {
    position: absolute;
    left: -2px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
}

.wheel-left > * + * { margin-top: -6px; }

.hint-button { position: relative; }
.hint-badge { left: 34px; top: 2px; }

.wheel-host .wheel-shuffle {
    position: absolute;
    right: -2px;
    bottom: 10px;
}

.flight-layer, .confetti-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.loading-veil {
    position: absolute;
    inset: 0;
    border-radius: var(--screen-radius);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-bottom);
    font-size: 15px;
}

.spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 4px solid rgb(255 210 63 / 0.25);
    border-top-color: var(--yellow);
    animation: spin 900ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Cloudflare Turnstile, only when it asks the player to tick a box -------------------------------------------- */

#turnstile-box {
    position: fixed;
    left: 50%;
    /* 24 px above the bottom of the game's screen, which on a tall window stands in its middle. */
    bottom: calc(var(--vh) - var(--screen-top) - var(--screen-h) + var(--safe-bottom) + 24px);
    transform: translateX(-50%);
    z-index: 200;
}

/* ---- a phone held sideways (index.html; splash.js sets html[data-rotate]) ------------------------------------------ */

/* Over everything, the splash included, while the game goes on under it: a round, the clock and the connection don't
   stop for it. Only on a phone (splash.js): a tablet plays sideways as a computer does. */
#rotate {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(var(--bg-top), var(--bg-bottom));
    text-align: center;
    touch-action: none;
}

html[data-rotate] #rotate { display: flex; }

.rotate-disc {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--card-border);
    display: grid;
    place-items: center;
}

/* The phone turns from sideways to upright, rests, and turns again. */
.rotate-phone {
    width: 64px;
    height: 64px;
    color: var(--text-on-dark);
    animation: rotate-phone 2600ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes rotate-phone {
    0%, 25% { transform: rotate(-90deg); }
    55%, 100% { transform: rotate(0deg); }
}

#rotate-caption {
    max-width: 320px;
    font-weight: 900;
    font-size: 22px;
    line-height: var(--line);
}

/* ---- Blazor's own error bar --------------------------------------------------------------------------------------- */

#blazor-error-ui {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    padding: 10px 16px;
    background: var(--error);
    color: #fff;
    display: none;
    justify-content: space-between;
}

#blazor-error-ui .reload { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .toast.shown, .dialog-card, .white-card, .cell .tile.pop, .cell .tile.land, .cell-glow, .rotate-phone { animation: none; }
    .rotate-phone { transform: none; }
}

/* ---- avatars and the profile form (AvatarView, NicknamePage) -------------------------------------------------------- */

.avatar {
    display: inline-block;
    flex: none;
    border-radius: 50%;
}

.avatar.initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    line-height: var(--line);
}

.nickname-body {
    flex: 1;
    min-height: 0;
    padding: 0 32px 24px;
    display: flex;
    flex-direction: column;
}

.nickname-preview { align-self: center; margin: 4px 0 14px; }

.name-field {
    flex: none;
    height: 62px;
    padding: 0 22px 0 20px;
    border-radius: 31px;
    background: var(--tile-face);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--tile-shadow) 50%, transparent);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: text;
}

.name-field img { width: 22px; height: 22px; opacity: 0.7; }

.name-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: 900 26px/1.364 Nunito, sans-serif;
    -webkit-user-select: text;
    user-select: text;
}

.name-field input::placeholder { color: #a9b8cc; }

.name-counter { font-size: 16px; color: var(--tile-edge); }

.name-hint {
    margin: 10px 0 0;
    font-size: 14px;
    text-align: center;
    opacity: 0.7;
}

.avatar-caption {
    margin: 18px 4px 6px;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: var(--line);
}

.avatar-caption > :first-child { opacity: 0.85; }
.avatar-caption > :last-child { opacity: 0.7; }

.caps { text-transform: uppercase; letter-spacing: 1.5px; }

.avatar-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.avatar-grid::-webkit-scrollbar { display: none; }

.avatar-group {
    margin: 12px 4px 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
}

.avatar-cells {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.avatar-cell {
    position: relative;
    height: 66px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.avatar-cell.selected::before {
    content: "";
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 29px;
    border: 3px solid var(--yellow);
}

.nickname-body .nickname-save { flex: none; margin: 10px 18px 0; width: auto; }
.nickname-body .nickname-cancel { flex: none; margin: 4px 18px 0; width: auto; }

.busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}

/* ---- settings-style screens: groups of rows in glass cards (SettingsPage, SettingRowView, ToggleSwitch) ---------- */

.scroll-body {
    flex: 1;
    min-height: 0;
    padding: 0 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.scroll-body::-webkit-scrollbar { display: none; }

.group-caption {
    margin: 18px 14px 6px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
}

.group-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    overflow: hidden;
}

.group-card.first { margin-top: 18px; }

.group-note, .group-intro {
    margin: 12px 14px 0;
    font-size: 13px;
    line-height: var(--line);
    opacity: 0.7;
}

.group-intro { margin: 14px 14px 14px; opacity: 0.8; }

.setting-row {
    position: relative;
    min-height: 58px;
    padding: 12px 14px 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    outline: none;
}

.setting-row[role="button"] { cursor: pointer; }
.setting-row[role="button"]:active { background: rgb(255 255 255 / 0.06); }
.setting-row:focus-visible { box-shadow: inset 0 0 0 2px var(--yellow); }
.setting-row.disabled > * { opacity: 0.45; }

.setting-row + .setting-row::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 0;
    top: 0;
    height: 1px;
    background: rgb(255 255 255 / 0.18);
}

.setting-icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgb(255 255 255 / 0.25);
    overflow: hidden;
}

.setting-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.setting-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.setting-title, .setting-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--line);
}

.setting-title { font-size: 16px; }
.setting-subtitle { font-size: 13px; color: rgb(255 255 255 / 0.68); }
.setting-subtitle.wrap { white-space: normal; }

.setting-detail {
    flex: none;
    max-width: 50%;
    font-size: 15px;
    color: rgb(255 255 255 / 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setting-detail.bold { font-weight: 900; font-size: 20px; color: var(--text-on-dark); }

.setting-accessory { flex: none; display: flex; align-items: center; }
.setting-chevron { flex: none; width: 18px; height: 18px; opacity: 0.75; }
.setting-check { width: 22px; height: 22px; }

.toggle {
    position: relative;
    flex: none;
    width: 52px;
    height: 30px;
    margin: 6px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: rgb(255 255 255 / 0.14);
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55);
    cursor: pointer;
    transition: background-color 160ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 160ms;
}

.toggle:active { background: rgb(255 255 255 / 0.28); }

.toggle.on {
    background: var(--yellow);
    box-shadow: 0 var(--edge-height) 0 0 var(--yellow-edge);
}

.toggle.light:not(.on) { background: rgb(31 45 77 / 0.08); box-shadow: inset 0 0 0 1.5px rgb(31 45 77 / 0.3); }

.toggle-knob {
    --d: 24px;
    position: absolute;
    left: 3px;
    top: calc(3px - var(--edge-height) / 2);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tile-face);
    box-shadow:
        0 var(--edge-height) 0 0 var(--tile-edge),
        0 calc(24px * 0.06 + var(--edge-height) / 2 + 2.4px * 0.2) 0 calc(2.4px / 6) color-mix(in srgb, var(--tile-shadow) 40%, transparent),
        0 calc(24px * 0.06 + var(--edge-height) / 2 + 2.4px * 0.4) 0 calc(2.4px / 3) color-mix(in srgb, var(--tile-shadow) 26.67%, transparent),
        0 calc(24px * 0.06 + var(--edge-height) / 2 + 2.4px * 0.6) 0 calc(2.4px / 2) color-mix(in srgb, var(--tile-shadow) 13.33%, transparent);
    transition: left 160ms cubic-bezier(0.33, 1, 0.68, 1);
}

.toggle.on .toggle-knob { left: 25px; }
.toggle:disabled { cursor: default; opacity: 0.45; }

.stepper { display: flex; align-items: center; gap: 2px; }

.step-value {
    width: 34px;
    text-align: center;
    font-weight: 900;
    font-size: 20px;
    color: var(--yellow);
}

.update-disc {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.update-disc img { width: 18px; height: 18px; }

/* ---- "O nama" ------------------------------------------------------------------------------------------------- */

.about { display: flex; flex-direction: column; padding-top: 14px; }
.about-swords { align-self: center; height: 96px; }
.about-name { margin-top: 12px; font-weight: 900; font-size: 34px; line-height: var(--line); text-align: center; }
.about-version { margin: 4px 0 22px; font-size: 13px; letter-spacing: 1px; text-align: center; opacity: 0.7; }

/* ---- "Statistika" --------------------------------------------------------------------------------------------- */

.statistics { padding-top: 6px; }

.white-card.stats-card {
    margin: 0;
    padding: 14px 18px;
    animation: none;
}

.stats-who { display: flex; align-items: center; gap: 12px; }

.person-disc {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 23px;
    background: #e8eff8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-disc img { width: 22px; height: 22px; }

.stats-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stats-you { font-size: 11px; letter-spacing: 1px; color: var(--tile-edge); line-height: 1.2; }

.stats-nickname {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-weight: 900;
    font-size: 20px;
    line-height: var(--line);
    cursor: pointer;
    text-align: left;
}

.stats-nickname span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-nickname img { flex: none; width: 18px; height: 18px; opacity: 0.55; margin-top: 3px; }

.level-pill {
    flex: none;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--yellow);
    color: var(--ink);
    font-weight: 900;
    font-size: 15px;
    line-height: 32px;
    white-space: nowrap;
}

.stats-progress { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.loading-bar.light { background: #dbe6f2; }

.stats-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted-ink);
}

.stats-progress-text b { font-weight: 900; font-size: 14px; color: var(--ink); }

.stats-card hr { width: 100%; height: 1px; margin: 0; border: 0; background: #dbe6f2; }

.stats-three { margin-top: 2px; display: grid; grid-template-columns: repeat(3, 1fr); }
.stats-three > div { display: flex; flex-direction: column; align-items: center; }

.stat-big {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 900;
    font-size: 24px;
    line-height: var(--line);
    color: var(--ink);
}

.stat-big img { width: 18px; height: 18px; }
.stat-big img.coin { width: 27px; }
/* "DANA ZAREDOM" takes two lines on a narrow phone, centred under its number as in the app */
.stats-three .caps { font-size: 12px; letter-spacing: 1px; color: var(--muted-ink); text-align: center; }

.group-card.tiles {
    padding: 6px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.stat-tile {
    position: relative;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.group-card.tiles > .stat-tile:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    background: rgb(255 255 255 / 0.18);
    left: 16px;
    right: 0;
}

.group-card.tiles > .stat-tile:nth-child(2n)::before { left: 0; right: 16px; }

.stat-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    font-size: 24px;
    line-height: var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value.accent { color: var(--yellow); }
.stat-value img { width: 18px; height: 18px; }

/* Two lines when the tile is too narrow, as in the app (French "PAS DANS LA GRILLE") */
.stat-caption {
    font-size: 12px;
    letter-spacing: 1px;
    color: rgb(255 255 255 / 0.7);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.tiles-wide { grid-column: 1 / -1; margin: 18px 16px; display: flex; justify-content: center; text-align: center; }

.group-card.notice {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-card.notice p { margin: 0; font-size: 15px; line-height: var(--line); text-align: center; }
.group-card.notice .flat { margin: 0 24px; width: auto; }
.group-card.invitation { border: 1.5px dashed rgb(255 210 63 / 0.67); }

/* ---- signing in with an account (pravila-igre-v020, B28; SignInButtons, AccountPage, ProfileLostPage) ------------- */
.sign-in-card {
    flex: none;
    margin: 4px 0 0;
    padding: 14px 16px 16px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.sign-in-caption { font-size: 13px; opacity: 0.85; }
.sign-in-hint { font-size: 14px; line-height: var(--line); opacity: 0.8; }

.sign-in-buttons {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Google's button (Google Identity Services draws it into the host): 260 wide, 40 high, its place kept from the start.
   Each drawing goes into a layer of its own that shows once Google has finished it (accounts.js, drawHidden). */
.provider-host { position: relative; width: 260px; height: 40px; }
.gsi-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.15s ease-out; }
.gsi-layer.shown { opacity: 1; pointer-events: auto; }

/* Apple's button: black, Apple's logo and the system font, as Apple's guidelines ask. */
.provider-button {
    width: 260px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 500 15px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    cursor: pointer;
}

.provider-button.apple { background: #000; color: #fff; }
.provider-button img { width: 18px; height: 18px; margin-top: -2px; }
.provider-button:disabled { opacity: 0.6; cursor: default; }
.provider-button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.avatar-caption.form-caption { margin-top: 16px; }

.linked-profile {
    flex: none;
    margin: 4px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.linked-title { font-weight: 900; font-size: 20px; line-height: var(--line); }
/* The e-mail on a line of its own; only an address wider than the column breaks, anywhere */
.linked-account { font-weight: 700; font-size: 16px; line-height: var(--line); overflow-wrap: anywhere; }
.linked-hint { margin-top: 4px; font-size: 14px; line-height: var(--line); opacity: 0.8; }

.account-card { padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.account-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.account-who b {
    font-weight: 900;
    font-size: 20px;
    line-height: var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-who span { font-size: 14px; line-height: var(--line); opacity: 0.75; }
.flat.account-action { flex: none; width: 112px; }

/* The providers' logos on a disc of their own colour rather than in a flag's frame. */
.account .setting-icon { border: 0; border-radius: 50%; padding: 4px; background: #fff; }
.account .setting-icon img { object-fit: contain; }
.account .setting-icon:has(img[src$="brand_apple.svg"]) { background: #000; padding: 5px; }

.account-buttons { margin-top: 14px; }
.account-sign-out { margin-top: 18px; }
.account-other-note { margin-top: 0; }

.lost-who { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lost-who b { font-weight: 900; font-size: 20px; line-height: var(--line); }
.notice-text.lost-keeps { font-size: 13px; opacity: 0.7; }
.lost-buttons { margin-top: 26px; }
.profile-lost .centered-body .sign-in-buttons + .flat { margin-top: 12px; }