/* =============================================================================
   Lernapp design system
   Source of truth: Lernapp.dc.html (repo root). Reference viewport is the iPad Air
   in landscape (1180×820); portrait and the 13" iPad Pro are first-class, phones
   and desktops must not break but are not tuned.
   ============================================================================= */

/* ---- Fonts (self-hosted, SIL OFL — see wwwroot/fonts/OFL-*.txt) ------------ */
@font-face {
    font-family: "Baloo 2";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("../fonts/baloo2-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("../fonts/nunito-latin.woff2") format("woff2");
}

/* ---- Tokens ---------------------------------------------------------------- */
:root {
    --ink: #1d2b33;
    --page: #dcebe4;
    --frame: #edf7f2;
    --frame-shadow: #c3d8cf;
    --pill-shadow: #cddfd7;
    --cream: #ffe9b8;
    --cream-shadow: #e2cd9a;
    --muted: #5c7a72;
    --muted-warm: #6b5a2e;
    --white: #ffffff;

    --star: oklch(0.7 0.16 65);
    --avatar: oklch(0.68 0.16 40);
    --sticker: oklch(0.62 0.17 340);
    --go: oklch(0.62 0.17 130);
    --link: oklch(0.55 0.15 210);

    --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

    --border: 5px;
    --border-sm: 4px;
    --border-xs: 3px;
    --radius-frame: 44px;
    --radius-tile: 36px;
    --radius-card: 28px;

    --page-pad: clamp(8px, 1.5vw, 24px);
    --frame-pad-x: clamp(20px, 3.4vw, 40px);
    --frame-pad-top: clamp(20px, 2.9vw, 34px);
    --frame-pad-bottom: clamp(24px, 3.4vw, 40px);
    --gap: clamp(14px, 2vw, 24px);

    /* Minimum tap target on iPadOS. */
    --tap: 44px;
}

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

html {
    background: var(--page);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    padding:
        max(var(--page-pad), env(safe-area-inset-top))
        max(var(--page-pad), env(safe-area-inset-right))
        max(var(--page-pad), env(safe-area-inset-bottom))
        max(var(--page-pad), env(safe-area-inset-left));
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ink);
    background: var(--page);
    line-height: 1.3;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

a {
    color: var(--link);
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
}

/* The rounded "device" frame from the design, stretched to the viewport. */
.app-frame {
    width: 100%;
    max-width: 1366px;
    min-height: calc(100dvh - 2 * var(--page-pad));
    display: flex;
    flex-direction: column;
    background: var(--frame);
    border: var(--border) solid var(--ink);
    border-radius: var(--radius-frame);
    box-shadow: 0 18px 0 var(--frame-shadow);
    padding: var(--frame-pad-top) var(--frame-pad-x) var(--frame-pad-bottom);
    overflow: hidden;
    position: relative;
}

/* ---- Pills (top bar) ------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.topbar__stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pill {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    background: var(--white);
    border: var(--border-sm) solid var(--ink);
    border-radius: 999px;
    padding: 10px 24px 10px 12px;
    box-shadow: 0 6px 0 var(--pill-shadow);
}

.pill--kid {
    padding: 8px 22px 8px 8px;
    gap: 14px;
}

.pill--stars {
    background: var(--cream);
    padding: 12px 24px;
    gap: 10px;
}

.pill__stack {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.pill__title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    color: var(--ink);
}

.pill__title--sm {
    font-size: clamp(18px, 1.9vw, 22px);
}

.pill__sub {
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 700;
    color: var(--muted);
}

.avatar {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 999px;
    background: var(--avatar);
    border: var(--border-sm) solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    color: var(--white);
}

.star {
    font-size: 26px;
    color: var(--star);
    line-height: 1;
}

/* ---- Hero ------------------------------------------------------------------ */
.hero {
    margin: clamp(18px, 2.5vw, 30px) 0 var(--gap);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.hero__title {
    font-size: clamp(34px, 4.6vw, 54px);
    letter-spacing: -0.5px;
    color: var(--ink);
}

.hero__sub {
    margin: 6px 0 0;
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 700;
    color: var(--muted);
}

.sticker {
    background: var(--sticker);
    border: var(--border-sm) solid var(--ink);
    border-radius: 22px;
    padding: 12px 20px;
    box-shadow: 0 7px 0 var(--ink);
    transform: rotate(-3deg);
    font-family: var(--font-display);
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
}

/* ---- Tile grids ------------------------------------------------------------ */
.tile-grid {
    flex: 1;
    display: grid;
    gap: var(--gap);
    align-content: stretch;
}

.tile-grid--modules {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(clamp(150px, 22vh, 260px), 1fr);
}

/* ---- Tile ------------------------------------------------------------------ */
.tile {
    --tile-color: oklch(0.63 0.16 var(--hue, 210));
    --tile-tint: oklch(0.955 0.045 var(--hue, 210));

    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 26px);
    min-height: var(--tap);
    border: var(--border) solid var(--ink);
    border-radius: var(--radius-tile);
    box-shadow: 0 11px 0 var(--ink);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transform: rotate(var(--tilt, 0deg));
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;

    /* Touch: no tap flash, no 300 ms delay, no long-press text selection. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.tile:active {
    transform: rotate(var(--tilt, 0deg)) translateY(6px);
    box-shadow: 0 5px 0 var(--ink);
}

@media (hover: hover) {
    .tile:hover {
        filter: brightness(1.06);
    }
}

.tile--module {
    padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 30px);
    background: var(--tile-color);
}

.tile__glyph {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: var(--border) solid var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    color: var(--tile-color);
    overflow: hidden;
}

.tile--module .tile__glyph {
    width: clamp(80px, 10vw, 118px);
    height: clamp(80px, 10vw, 118px);
    border-radius: 30px;
    font-size: clamp(28px, 3.4vw, 40px);
}

.tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tile__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tile__title {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    overflow-wrap: anywhere;
}

.tile--module .tile__title {
    font-size: clamp(28px, 3.9vw, 46px);
    color: var(--white);
}

.tile__sub {
    font-weight: 700;
}

.tile--module .tile__sub {
    font-size: clamp(15px, 1.6vw, 19px);
    color: var(--white);
}

.tile__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.tile__badge {
    background: var(--white);
    border: var(--border-xs) solid var(--ink);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: var(--font-display);
    font-size: clamp(14px, 1.45vw, 17px);
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.tile__stars {
    font-size: clamp(14px, 1.45vw, 17px);
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}

.tile--module .tile__stars {
    color: var(--white);
}

/* ---- Buttons --------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    border: var(--border-sm) solid var(--ink);
    border-radius: 999px;
    padding: 14px 34px;
    box-shadow: 0 7px 0 var(--ink);
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    text-decoration: none;
    color: var(--white);
    background: var(--go);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 var(--ink);
}

/* ---- Status / error pages -------------------------------------------------- */
.status-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: var(--gap);
}

.status-page__code {
    width: clamp(110px, 14vw, 160px);
    height: clamp(110px, 14vw, 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border: var(--border) solid var(--ink);
    border-radius: 40px;
    box-shadow: 0 11px 0 var(--cream-shadow);
    transform: rotate(-3deg);
    font-family: var(--font-display);
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
}

.status-page__title {
    font-size: clamp(30px, 4vw, 48px);
}

.status-page__text {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(16px, 1.7vw, 20px);
    color: var(--muted);
}

.status-page__meta {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.status-page .button {
    margin-top: 10px;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

/* ---- Orientation / breakpoints --------------------------------------------- */

/* iPad portrait (820×1180, 834×1194, 1024×1366): same 2×2 grid, taller cards. */
@media (orientation: portrait) and (min-width: 700px) {
    .tile-grid--modules {
        grid-auto-rows: minmax(clamp(170px, 20vh, 300px), 1fr);
    }

    .tile--module {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(18px, 3vw, 30px);
    }

    .tile--module .tile__glyph {
        width: clamp(96px, 15vw, 150px);
        height: clamp(96px, 15vw, 150px);
        font-size: clamp(34px, 5vw, 50px);
    }

    .tile--module .tile__title {
        font-size: clamp(34px, 5.6vw, 52px);
    }

    .tile--module .tile__sub {
        font-size: clamp(17px, 2.2vw, 21px);
    }
}

/* Phones: untuned, but never broken. */
@media (max-width: 699px) {
    :root {
        --radius-frame: 28px;
        --radius-tile: 26px;
    }

    .app-frame {
        box-shadow: 0 10px 0 var(--frame-shadow);
    }

    .tile-grid--modules {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .tile {
        transform: none;
    }

    .tile:active {
        transform: translateY(6px);
    }

    .sticker {
        transform: rotate(-2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile,
    .button {
        transition: none;
    }
}

/* ---- Module page ----------------------------------------------------------- */

/* Header band bleeds to the frame edges, like the design. */
.module-header {
    --tile-color: oklch(0.63 0.16 var(--hue, 210));

    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
    flex-wrap: wrap;
    margin: calc(-1 * var(--frame-pad-top)) calc(-1 * var(--frame-pad-x)) 0;
    padding: clamp(14px, 1.9vw, 22px) var(--frame-pad-x) clamp(16px, 2.2vw, 26px);
    background: var(--tile-color);
    border-bottom: var(--border) solid var(--ink);
    color: var(--white);
}

.back-button {
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: var(--white);
    border: var(--border-sm) solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.back-button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--ink);
}

.module-header__glyph {
    width: clamp(68px, 7.3vw, 86px);
    height: clamp(68px, 7.3vw, 86px);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    background: var(--white);
    border: var(--border) solid var(--ink);
    font-family: var(--font-display);
    font-size: clamp(24px, 2.7vw, 32px);
    font-weight: 800;
    line-height: 1;
    color: var(--tile-color);
}

.module-header__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.module-header__title {
    font-size: clamp(32px, 4vw, 48px);
    color: var(--white);
}

.module-header__sub {
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 700;
}

.module-header__stars {
    margin-left: auto;
    box-shadow: 0 6px 0 var(--ink);
}

.module-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-top: var(--gap);
}

/* ---- Daily banner ---------------------------------------------------------- */
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.daily-banner {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
    flex-wrap: wrap;
    background: var(--cream);
    border: var(--border) solid var(--ink);
    border-radius: 30px;
    padding: clamp(10px, 1.3vw, 16px) clamp(18px, 2.2vw, 26px);
    box-shadow: 0 9px 0 var(--cream-shadow);
}

.daily-banner__badge {
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--avatar);
    border: var(--border) solid var(--ink);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    color: var(--white);
    animation: bob 2.4s ease-in-out infinite;
}

.daily-banner__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.daily-banner__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: var(--ink);
}

.daily-banner__sub {
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 700;
    color: var(--muted-warm);
}

.daily-banner__go {
    margin-left: auto;
}

/* ---- Exercise tiles -------------------------------------------------------- */
.tile-grid--exercises {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    min-height: 0;
}

.tile--exercise {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(14px, 1.5vw, 18px) clamp(16px, 1.9vw, 22px);
    border-radius: var(--radius-card);
    box-shadow: 0 9px 0 var(--ink);
    background: var(--tile-tint);
    transform: none;
}

.tile--exercise:active {
    transform: translateY(5px);
    box-shadow: 0 4px 0 var(--ink);
}

.tile--exercise .tile__glyph {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--tile-color);
    border-width: var(--border-sm);
    font-size: 22px;
    color: var(--white);
}

.tile--exercise .tile__body {
    gap: 6px;
}

.tile--exercise .tile__title {
    font-size: clamp(21px, 2.3vw, 27px);
    color: var(--ink);
}

.tile--exercise .tile__sub {
    font-size: clamp(14px, 1.4vw, 16px);
    color: #4a615a;
}

.tile--exercise .tile__stars {
    color: var(--star);
}

/* iPad portrait: two columns of compact horizontal cards instead of tall ones. */
@media (orientation: portrait) and (min-width: 700px) {
    .tile-grid--exercises {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        align-content: start;
    }

    .tile--exercise {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 18px 20px;
    }

    .tile--exercise .tile__body {
        flex: 1;
        align-items: flex-start;
    }

    .tile--exercise .tile__glyph {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }
}

@media (max-width: 699px) {
    .tile-grid--exercises {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .module-header__stars,
    .daily-banner__go {
        margin-left: 0;
    }

    .daily-banner__badge {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-banner__badge {
        animation: none;
    }
}

/* ---- Exercise page --------------------------------------------------------- */
.module-header__title--sm {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.05;
    color: var(--white);
}

.exercise-page {
    --tile-color: oklch(0.63 0.16 var(--hue, 210));
    --tile-tint: oklch(0.955 0.045 var(--hue, 210));

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap) 0 0;
}

.exercise-page__card {
    width: min(100%, 640px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: clamp(24px, 3vw, 40px);
    background: var(--tile-tint);
    border: var(--border) solid var(--ink);
    border-radius: var(--radius-tile);
    box-shadow: 0 11px 0 var(--ink);
}

.exercise-page__glyph,
.exercise-page__image {
    width: clamp(110px, 14vw, 160px);
    height: clamp(110px, 14vw, 160px);
    border-radius: 36px;
    border: var(--border) solid var(--ink);
    background: var(--tile-color);
    margin-bottom: 6px;
}

.exercise-page__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(44px, 6vw, 64px);
    font-weight: 800;
    line-height: 1;
    color: var(--white);
}

.exercise-page__image {
    object-fit: cover;
    background: var(--white);
}

.exercise-page__title {
    font-size: clamp(32px, 4vw, 46px);
    color: var(--ink);
}

.exercise-page__description {
    margin: 0;
    font-size: clamp(18px, 1.9vw, 22px);
    color: var(--muted);
}

.exercise-page__note {
    margin: 4px 0 8px;
    max-width: 40ch;
    font-size: clamp(15px, 1.5vw, 17px);
    color: #4a615a;
}

.exercise-page__form {
    margin: 0;
}

button.button {
    font: inherit;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ---- Utilities ------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Top bar: the name pill is the "switch user" button -------------------- */
.topbar__user {
    margin: 0;
}

.pill--button {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.pill--button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--pill-shadow);
}

.pill__switch {
    margin-left: 6px;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: var(--muted);
}

/* ---- Login: PIN pad -------------------------------------------------------- */
.login {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vh, 32px);
    text-align: center;
}

.login__hero .hero__title {
    font-size: clamp(36px, 5vw, 60px);
}

.login__hero .hero__sub {
    font-size: clamp(18px, 2vw, 24px);
}

.pinpad {
    --key: clamp(64px, 9.5vh, 88px);

    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 2vh, 22px);
}

.pinpad__dots {
    display: none;
    gap: 12px;
    min-height: 24px;
}

.pinpad--js .pinpad__dots {
    display: flex;
}

.pinpad__dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: var(--border-xs) solid var(--ink);
    background: var(--white);
    transition: background 80ms ease, transform 80ms ease;
}

.pinpad__dot--filled {
    background: var(--ink);
    transform: scale(1.1);
}

.pinpad__input {
    width: min(100%, 300px);
    min-height: var(--tap);
    padding: 10px 16px;
    border: var(--border-sm) solid var(--ink);
    border-radius: 18px;
    font: inherit;
    font-size: 28px;
    letter-spacing: 8px;
    text-align: center;
    color: var(--ink);
    background: var(--white);
}

/* With the script running, the pad owns the input. */
.pinpad--js .pinpad__input,
.pinpad--js .pinpad__submit {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pinpad__keys {
    display: grid;
    grid-template-columns: repeat(3, var(--key));
    gap: clamp(10px, 1.6vh, 16px);
}

.pinpad__key {
    width: var(--key);
    height: var(--key);
    border: var(--border-sm) solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 6px 0 var(--pill-shadow);
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vh, 34px);
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.pinpad__key--action {
    background: var(--cream);
    box-shadow: 0 6px 0 var(--cream-shadow);
    font-size: clamp(20px, 3vh, 28px);
}

.pinpad__key:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--pill-shadow);
}

.pinpad--busy .pinpad__key {
    opacity: 0.6;
    pointer-events: none;
}

.login__error {
    margin: 0;
    padding: 8px 18px;
    border-radius: 999px;
    background: oklch(0.93 0.06 25);
    border: var(--border-xs) solid oklch(0.55 0.2 25);
    color: oklch(0.45 0.18 25);
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 800;
}

.pinpad--failed .pinpad__dots {
    animation: shake 420ms ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-7px); }
    80% { transform: translateX(7px); }
}

/* iPad landscape: greeting on the left, pad on the right. */
@media (orientation: landscape) and (min-width: 900px) {
    .login {
        flex-direction: row;
        justify-content: space-evenly;
        text-align: left;
    }

    .login__hero {
        max-width: 40%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pinpad--failed .pinpad__dots {
        animation: none;
    }

    .pinpad__key,
    .pinpad__dot,
    .pill--button {
        transition: none;
    }
}

/* ---- Admin: users ---------------------------------------------------------- */
.pill--link {
    text-decoration: none;
    color: var(--ink);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.pill--link:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--pill-shadow);
}

.admin-users {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    gap: var(--gap);
    align-items: start;
    padding-top: var(--gap);
}

.user-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.user-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px;
    background: var(--white);
    border: var(--border-sm) solid var(--ink);
    border-radius: var(--radius-card);
    box-shadow: 0 6px 0 var(--pill-shadow);
}

.user-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
}

.user-row__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.user-row__who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    flex: 1;
}

.user-row__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-row__name {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.1vw, 24px);
    font-weight: 800;
}

.user-row__meta {
    font-size: 14px;
    color: var(--muted);
}

.user-row__pin {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.1;
}

.user-row__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--muted);
}

.user-row__code {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.1vw, 24px);
    font-weight: 800;
    letter-spacing: 2px;
}

.user-row__form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-row__error {
    margin: 0;
}

.admin-users__note {
    margin: 14px 4px 0;
    font-size: 14px;
    color: var(--muted);
}

.create-card {
    background: var(--cream);
    border: var(--border-sm) solid var(--ink);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 0 var(--cream-shadow);
    padding: clamp(18px, 2.4vw, 28px);
}

.create-card__title {
    font-size: clamp(24px, 2.6vw, 30px);
    margin-bottom: 14px;
}

.create-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.field__label {
    font-size: 15px;
    font-weight: 800;
    color: var(--muted-warm);
}

.field__input {
    width: 100%;
    min-height: var(--tap);
    padding: 10px 14px;
    border: var(--border-xs) solid var(--ink);
    border-radius: 16px;
    background: var(--white);
    font: inherit;
    font-size: 18px;
    color: var(--ink);
}

.field__input--pin {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 2px;
}

.user-row__form .field__input {
    width: 170px;
}

.form-error {
    color: oklch(0.45 0.18 25);
    font-size: 14px;
    font-weight: 800;
}

.form-error:empty {
    display: none;
}

.button--small {
    padding: 8px 18px;
    font-size: 17px;
    box-shadow: 0 5px 0 var(--ink);
}

.button--danger {
    background: oklch(0.6 0.19 25);
}

@media (orientation: portrait) and (min-width: 700px), (max-width: 899px) {
    .admin-users {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Exercise player (Features/Exercises + wwwroot/js/exercise)
   Landscape: task column on the left, number pad rail on the right (mock).
   Portrait: rail moves below the task column.
   --------------------------------------------------------------------------- */

/* The hidden attribute must win over component display rules (e.g. .button). */
[hidden] {
    display: none !important;
}

.module-header--player {
    gap: 16px;
}

.module-header__glyph--image {
    padding: 0;
    overflow: hidden;
}

.module-header__glyph--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.player-progress {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 800;
    white-space: nowrap;
}

.player-progress__pips {
    display: flex;
    gap: 6px;
}

.player-progress__pip {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, 0.35);
}

.player-progress__pip--current {
    background: var(--white);
}

.player-progress__pip--done {
    background: var(--star);
}

.player {
    --tile-color: oklch(0.63 0.16 var(--hue, 210));
    --tile-tint: oklch(0.955 0.045 var(--hue, 210));
    --ok: oklch(0.93 0.08 130);
    --wrong: oklch(0.94 0.06 25);

    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: var(--gap);
}

.player__empty,
.player__note {
    margin: auto;
}

.player__stage {
    --split: 0.34; /* share of the width the Schmierblatt gets; set by js/exercise/split.js */
    flex: 1;
    min-height: 0;
    display: flex;
    gap: var(--gap);
}

.player__main {
    flex: calc(1 - var(--split)) 1 0px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.player__handle {
    flex: none;
    width: 26px;
    margin: 0 calc(var(--gap) * -0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
}

.player__handle::before {
    content: "";
    width: 10px;
    height: 96px;
    border-radius: 999px;
    background: var(--frame-shadow);
    border: var(--border-xs) solid var(--ink);
}

/* Bottom row of the task column: feedback bar, number keys, "Prüfen". */
.player__bottom {
    flex: none;
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.player__card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: clamp(16px, 2.4vw, 28px);
    background: var(--white);
    border: var(--border) solid var(--ink);
    border-radius: 32px;
    box-shadow: 0 9px 0 var(--pill-shadow);
    text-align: center;
}

.player__image {
    max-height: min(30vh, 260px);
    max-width: 100%;
    object-fit: contain;
    border-radius: 24px;
}

.player__prompt {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 800;
    line-height: 1.2;
}

.player__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.player__option {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--white);
    border: var(--border) solid var(--ink);
    border-radius: 24px;
    box-shadow: 0 7px 0 var(--pill-shadow);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.player__option:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 3px 0 var(--pill-shadow);
}

.player__option:disabled {
    cursor: default;
}

.player__option--correct {
    background: var(--ok);
    border-color: var(--go);
}

.player__option--wrong {
    background: var(--wrong);
}

.player__option-image {
    height: 64px;
    width: 64px;
    object-fit: contain;
}

.player__answer {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border: var(--border) dashed var(--ink);
    border-radius: 24px;
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: 2px;
}

.player__answer:not(:empty) {
    border-style: solid;
}

.player__word {
    display: flex;
    gap: 14px;
}

.player__word-input {
    flex: 1;
    min-width: 0;
    min-height: 72px;
    padding: 10px 22px;
    background: var(--white);
    border: var(--border) solid var(--ink);
    border-radius: 24px;
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: var(--ink);
}

.player__word-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--tile-tint);
}

.player__keys {
    flex: none;
    width: clamp(294px, 26vw, 320px); /* six 44 px keys plus gaps */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(var(--tap), 1fr);
    gap: 6px;
}

.player__key {
    min-height: var(--tap);
    border: var(--border-sm) solid var(--ink);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 5px 0 var(--pill-shadow);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.player__key--action {
    background: var(--cream);
}

.player__key:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--pill-shadow);
}

.player__key:disabled,
.player__check:disabled {
    opacity: 0.55;
    cursor: default;
}

.player__check {
    flex: none;
    border-radius: 24px;
    font-size: clamp(24px, 2.6vw, 30px);
}

.player__bottom .player__check {
    width: clamp(104px, 10vw, 124px);
    padding-left: 12px;
    padding-right: 12px;
}

/* Beside the key block the bar is narrow: no mascot, the text on its own line,
   "Pause" and "Weiter" on a second line. */
.player__bottom--keys .player__feedback {
    flex-wrap: wrap;
    align-content: center;
    gap: 8px 12px;
    padding: 10px 14px;
}

.player__bottom--keys .player__mascot {
    display: none;
}

.player__bottom--keys .player__feedback-text {
    flex: 1 1 100%;
    font-size: clamp(17px, 1.75vw, 21px);
}

.player__bottom--keys .player__pause {
    margin-left: auto;
}

.player__bottom--keys .player__next {
    padding: 8px 14px;
    font-size: clamp(16px, 1.7vw, 19px);
}

.player__bottom--keys .player__pause {
    min-width: var(--tap);
    padding: 8px 10px;
}

.player__feedback {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--white);
    border: var(--border) solid var(--ink);
    border-radius: 28px;
    box-shadow: 0 8px 0 var(--pill-shadow);
    transition: background 160ms ease;
}

.player__feedback--ok {
    background: var(--ok);
}

.player__feedback--wrong {
    background: var(--wrong);
    animation: shake 320ms ease;
}

.player__feedback--reveal {
    background: var(--cream);
}

.player__mascot {
    position: relative;
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: 999px;
    background: var(--avatar);
    border: var(--border) solid var(--ink);
    animation: bob 2.6s ease-in-out infinite;
}

.player__mascot::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 14px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--ink);
    box-shadow: 15px 0 0 var(--ink);
}

.player__mascot::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    width: 22px;
    height: 11px;
    border-bottom: var(--border-sm) solid var(--ink);
    border-radius: 0 0 40px 40px;
}

.player__feedback-text {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.3vw, 27px);
    font-weight: 800;
    line-height: 1.15;
}

.player__next {
    flex: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 10px 26px;
    font-size: clamp(20px, 2.2vw, 25px);
}

.player__next-label {
    position: relative;
    z-index: 1;
}

/* Countdown to the next task: a bar grows from the left until the button is full. */
.player__next::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    opacity: 0.32;
    transform: scaleX(0);
    transform-origin: left center;
}

.player__next--filling::before {
    animation: player-fill var(--advance-ms, 1500ms) linear forwards;
}

.player__next--paused::before {
    animation-play-state: paused;
}

@keyframes player-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.player__pause {
    flex: none;
    min-width: var(--tap);
    padding: 10px 18px;
    background: var(--cream);
}

/* Two bars drawn with borders; the display font has no pause glyph. */
.player__pause-icon {
    display: block;
    width: 16px;
    height: 20px;
    border-left: 6px solid var(--ink);
    border-right: 6px solid var(--ink);
    box-sizing: border-box;
}

.player__end {
    margin: auto;
    width: min(100%, 560px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: clamp(24px, 3vw, 40px);
    background: var(--tile-tint);
    border: var(--border) solid var(--ink);
    border-radius: var(--radius-tile);
    box-shadow: 0 11px 0 var(--ink);
    text-align: center;
}

.player__end-stars {
    font-size: clamp(44px, 6vw, 72px);
    color: var(--star);
    letter-spacing: 6px;
    line-height: 1;
}

.player__end-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
}

.player__end-sub {
    margin: 0 0 8px;
    color: var(--muted);
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 20px);
}

@media (orientation: portrait), (max-width: 899px) {
    .player__stage {
        flex-direction: column;
    }

    .player__main {
        flex: none;
    }

    .player__handle {
        display: none;
    }

    .player__stage .scratch {
        flex: 1 1 auto;
        min-height: 260px;
    }

    .player__card {
        min-height: 220px;
    }

    /* Keys take a full row above the feedback bar; "Prüfen" stays beside the bar. */
    .player__bottom {
        flex-wrap: wrap;
    }

    .player__keys {
        flex: 1 1 100%;
        width: auto;
        order: -1;
    }

    .player-progress__pips {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player__mascot {
        animation: none;
    }

    .player__feedback--wrong {
        animation: none;
    }

    /* No growing bar; the button shows as full while the countdown runs. */
    .player__next--filling::before {
        animation: none;
        transform: scaleX(1);
    }

    .player__next--paused::before {
        transform: scaleX(0);
    }
}

/* ---------------------------------------------------------------------------
   Schmierblatt (wwwroot/js/scratch) — the drawing pane next to a task
   --------------------------------------------------------------------------- */

.scratch {
    flex: var(--split, 0.34) 1 0px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: var(--border) solid var(--ink);
    border-radius: 32px;
    box-shadow: 0 9px 0 var(--pill-shadow);
    overflow: hidden;
}

.scratch__bar {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 8px 14px;
    background: var(--cream);
    border-bottom: var(--border) solid var(--ink);
}

.scratch__title {
    flex: none;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 800;
    white-space: nowrap;
}

.scratch__tools {
    margin-left: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.scratch__pen,
.scratch__tool {
    flex: none;
    height: var(--tap);
    min-width: var(--tap);
    padding: 0;
    border: var(--border-xs) solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
}

.scratch__pen {
    width: var(--tap);
    background: var(--pen-color);
}

.scratch__pen[aria-pressed="true"] {
    border-width: var(--border);
    box-shadow: inset 0 0 0 3px var(--white);
}

.scratch__tool {
    width: 50px;
}

.scratch__tool--erase[aria-pressed="true"] {
    background: var(--go);
}

.scratch__eraser-icon {
    display: block;
    width: 20px;
    height: 13px;
    border-radius: 3px;
    background: var(--white);
    border: var(--border-xs) solid var(--ink);
    transform: rotate(-20deg);
}

.scratch__sheet {
    flex: 1;
    min-height: 0;
    position: relative;
    background: oklch(0.985 0.012 130);
}

.scratch__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.scratch__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 800;
    color: #b7cbc3;
    text-align: center;
    text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Note replay page (Features/Notes)
   --------------------------------------------------------------------------- */

.note-page {
    --tile-tint: oklch(0.955 0.045 var(--hue, 210));

    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: var(--gap);
}

.note-page__prompt {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.3vw, 27px);
    font-weight: 800;
    line-height: 1.2;
}

.note-page__meta {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    font-size: clamp(14px, 1.5vw, 17px);
}

/* Fits the remaining height; the aspect ratio of the pad gives the width, capped at the frame. */
.note-page__sheet {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: auto;
    max-width: 100%;
    align-self: center;
    margin: 6px 0 0;
    background: oklch(0.985 0.012 130);
    border: var(--border) solid var(--ink);
    border-radius: 32px;
    box-shadow: 0 9px 0 var(--pill-shadow);
    overflow: hidden;
}

.note-page__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.note-page__note {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Admin: exercises (Features/Admin/AdminExercises)
   --------------------------------------------------------------------------- */

.admin-module {
    margin-bottom: 22px;
}

.admin-module__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
}

.admin-module__glyph {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: oklch(0.63 0.16 var(--hue, 210));
    border: var(--border-xs) solid var(--ink);
    color: var(--white);
    font-size: 18px;
}

.admin-module__count {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
}

.exercise-row__glyph {
    width: 48px;
    height: 48px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: oklch(0.955 0.045 var(--hue, 210));
    border: var(--border-xs) solid var(--ink);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
}

.exercise-row--inactive {
    opacity: 0.6;
    background: var(--frame);
}

.user-row__code--sm {
    font-size: clamp(16px, 1.6vw, 20px);
}

.button--secondary {
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 6px 0 var(--pill-shadow);
}

.field__input--file {
    padding: 10px 14px;
    font-size: 16px;
    background: var(--white);
}

.field__input--file::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: var(--border-xs) solid var(--ink);
    border-radius: 999px;
    background: var(--cream);
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink);
}

.upload-errors {
    margin: 0;
    padding: 12px 16px 12px 32px;
    background: oklch(0.94 0.06 25);
    border: var(--border-xs) solid oklch(0.58 0.19 25);
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    color: oklch(0.45 0.18 25);
    line-height: 1.4;
}

.upload-message {
    margin: 0 0 16px;
    padding: 12px 18px;
    background: oklch(0.93 0.08 130);
    border: var(--border-xs) solid var(--go);
    border-radius: 16px;
    font-weight: 700;
}

.create-card__hint {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted-warm);
    line-height: 1.4;
}

.create-card__hint code {
    font-size: 13px;
}

.module-body__empty {
    margin: auto;
    padding: 24px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    color: var(--muted);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Zehnerfreunde game (Features/Exercises Game.cshtml + wwwroot/js/game)
   The board keeps the night look of the design mock so the faces read well;
   cards, buttons and pad use the app's styling. Board column left, cards right,
   in both iPad orientations (the cell size adapts, see game-view.js fit()).
   --------------------------------------------------------------------------- */
.game {
    --tile-color: oklch(0.63 0.16 var(--hue, 130));
    --tile-tint: oklch(0.955 0.045 var(--hue, 130));
    --night: #221d47;
    --night-2: #2c2660;
    --gridline: #3a3374;
    --face: #2b2350;
    --night-ink: #fff6e5;
    --night-dim: #b3a9dd;
    --g1: #ffc93c;
    --g2: #ff6b6b;
    --g3: #4ecdc4;
    --g4: #5b9dff;
    --g5: #c07bff;
    --g6: #a8e05f;
    --g7: #ff9a3c;
    --cell: 40px;
    --cell-sm: 22px;

    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: var(--gap);
}

.game__mount {
    flex: 1;
    min-height: 0;
    display: flex;
}

.game__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    gap: var(--gap);
}

.game__board-col {
    flex: none;
    width: 352px; /* set by game-view.js fit() */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* The wrap takes the height above the pad; the box inside is absolute so the
   board's pixel size never stretches the frame. */
.game__board-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
}

.game__board-box {
    position: absolute;
    top: 0;
    left: 0;
    touch-action: none;           /* the board takes drags, taps and flicks itself */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.game__board {
    display: grid;
    gap: 2px;
    padding: 6px;
    background: radial-gradient(120% 80% at 50% 0%, var(--night-2) 0%, var(--night) 70%);
    border: var(--border-xs) solid var(--ink);
    border-radius: 18px;
    box-shadow: 0 8px 0 var(--ink);
}

.game__cell {
    width: var(--cell);
    height: var(--cell);
    border-radius: calc(var(--cell) * 0.28);
    background: var(--gridline);
    opacity: 0.3;
}

.game__cell[data-color="1"] { --c: var(--g1); }
.game__cell[data-color="2"] { --c: var(--g2); }
.game__cell[data-color="3"] { --c: var(--g3); }
.game__cell[data-color="4"] { --c: var(--g4); }
.game__cell[data-color="5"] { --c: var(--g5); }
.game__cell[data-color="6"] { --c: var(--g6); }
.game__cell[data-color="7"] { --c: var(--g7); }

.game__cell--on {
    opacity: 1;
    background: var(--c);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.3);
}

.game__cell--ghost {
    opacity: 0.55;
    background: transparent;
    box-shadow: inset 0 0 0 3px var(--c);
}

.game__cell--hint {
    animation: game-hint 0.9s ease-in-out infinite;
}

.game__cell--pop {
    animation: game-pop 0.34s ease-out forwards;
}

.game__cell--void {
    opacity: 0;
}

.game__cell svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes game-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes game-hint {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

/* Touch pad under the board: five keys as wide as the board. */
.game__pad {
    display: flex;
    gap: 8px;
}

.game__key {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    border: var(--border-xs) solid var(--ink);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 5px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease;
}

.game__key--drop {
    background: var(--tile-color);
    color: var(--white);
}

.game__key:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--ink);
}

.game__key:disabled {
    opacity: 0.5;
}

/* Side column: cards and buttons. */
.game__side {
    flex: none;
    width: clamp(190px, 20vw, 240px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.game__card {
    padding: 12px 14px;
    background: var(--tile-tint);
    border: var(--border-xs) solid var(--ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--ink);
}

.game__card-title {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.game__score {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.game__sub {
    margin-top: 4px;
    font-size: 14px;
    color: var(--muted);
}

.game__next {
    display: grid;
    gap: 2px;
    justify-content: center;
    min-height: calc(var(--cell-sm) * 2 + 2px);
    padding: 4px 0;
}

.game__next .game__cell {
    width: var(--cell-sm);
    height: var(--cell-sm);
    border-radius: 7px;
}

.game__goal-text {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.3;
}

.game__goal-progress {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
}

.game__goal-bar {
    height: 12px;
    margin: 6px 0;
    border: var(--border-xs) solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    overflow: hidden;
}

.game__goal-fill {
    height: 100%;
    background: var(--tile-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms ease;
}

.game__goal-stars {
    font-size: 20px;
    color: var(--star);
    letter-spacing: 2px;
}

.game__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.game__button {
    min-height: var(--tap);
    padding: 8px 12px;
    font-size: 18px;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 5px 0 var(--ink);
}

.game__button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--ink);
}

.game__button--on {
    background: var(--cream);
}

.game__button:disabled {
    opacity: 0.5;
    transform: none;
}

.game__finish {
    grid-column: 1 / -1;
    background: var(--go);
    color: var(--white);
}

/* Overlays sit on the board: start card, pause, result. */
.game__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(24, 20, 54, 0.93);
    color: var(--night-ink);
    text-align: center;
}

.game__overlay-title {
    font-size: clamp(24px, 3vw, 30px);
    color: var(--night-ink);
}

.game__overlay-text {
    margin: 0;
    max-width: 26ch;
    font-size: 15px;
    line-height: 1.45;
    color: var(--night-dim);
}

.game__overlay-stars {
    font-size: 40px;
    line-height: 1;
    color: var(--star);
    letter-spacing: 4px;
}

.game__overlay-button {
    width: min(100%, 240px);
    padding: 10px 20px;
    font-size: 20px;
    box-shadow: 0 5px 0 var(--ink);
}

.game__overlay .game__overlay-button:not(.button--primary) {
    background: var(--white);
    color: var(--ink);
}

.game__toast {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    padding: 10px 16px;
    border: var(--border-xs) solid var(--ink);
    border-radius: 999px;
    background: var(--star);
    box-shadow: 0 5px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    animation: game-toast 240ms ease-out;
}

@keyframes game-toast {
    from { transform: translateY(-12px) scale(0.9); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Phones: cards move below the board in a row. */
@media (max-width: 699px) {
    .game__stage {
        flex-direction: column;
        align-items: center;
    }

    .game__side {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .game__card {
        flex: 1 1 40%;
    }

    .game__buttons {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game__cell--pop {
        animation: none;
        opacity: 0;
    }

    .game__cell--hint {
        animation: none;
        filter: brightness(1.35);
    }

    .game__toast {
        animation: none;
    }

    .game__goal-fill {
        transition: none;
    }
}

/* ==========================================================================
   Vorlesen — the speaker buttons and the auto-speak switch
   ========================================================================== */

.speech {
    display: flex;
    align-items: center;
    gap: 8px;
}

.speak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 10px;
    border: var(--border-sm) solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 0 var(--ink);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.speak:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--ink);
}

/* The switch says whether a new task reads itself out; struck through when it does not. */
.speak--auto {
    padding: 0 16px;
    background: var(--go);
    color: var(--white);
    font-size: clamp(14px, 1.4vw, 17px);
}

.speak--auto.speak--off {
    background: var(--white);
    color: var(--ink);
    text-decoration: line-through;
}

/* The way to the recording page; grown-ups only, so it stays quiet. */
.speak--record {
    text-decoration: none;
    font-size: 20px;
}

.speak--big {
    min-width: 56px;
    min-height: 56px;
    font-size: 26px;
}

/* Prompt and its speaker sit on one line, wrapping on a phone. */
.player__prompt-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .speak:active {
        transform: none;
    }
}

/* ==========================================================================
   Vorlesen aufnehmen — /Admin/Exercises/{id}/speech
   ========================================================================== */

/* One column: this page has no upload card beside the list. */
.admin-speech {
    grid-template-columns: minmax(0, 1fr);
}

.speech-row__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.speech-row__audio {
    height: 40px;
    max-width: 100%;
    flex: 1 1 240px;
}

.speech-row__upload {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.speech-row__file {
    max-width: 210px;
    font-family: var(--font-body);
    font-size: 14px;
}

.speech-row[data-kind="recorded"] {
    border-color: var(--go);
}

/* The record controls only exist once the script decides the browser may listen. */
.speech-row__record[hidden] {
    display: none !important;
}

.speech-row__record {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.speech-row__error {
    color: oklch(0.45 0.18 25);
    font-weight: 700;
}

.speech-row__timer {
    font-family: var(--font-display);
    font-weight: 800;
    min-width: 46px;
}