/* ==========================================================
   RESPONSIVE / ADAPTIVE LAYOUT LAYER  (loaded last)
   ------------------------------------------------------------
   Goals enforced here:
     1. No horizontal scrolling, ever.
     2. No content clipped at the top when a screen overflows
        (flex + overflow bug) -> "safe center".
     3. Portrait AND landscape fit on every device.
     4. Nothing overlaps, nothing falls outside the viewport,
        no dead / unusable empty space.
     5. Comfortable touch targets + tap-without-delay.
     6. Everything reachable with the Tab key on big screens.
   ========================================================== */

/* ==========================================================
   0. Viewport-aware design tokens
   --app-h / --app-w are written by js/responsive.js
   ========================================================== */
:root {
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    /* real usable viewport, set from JS (visualViewport aware) */
    --app-h: var(--vh, 100vh);
    --app-w: var(--vw, 100vw);

    --pad-x: 16px;
    --pad-y: 12px;
    --tap: 44px;               /* minimum comfortable touch target */
    --shell-max: 720px;
}

/* ==========================================================
   1. Viewport hardening
   ========================================================== */

/* Touch input
   ------------
   `touch-action: manipulation` removes the 300ms double-tap-zoom
   delay and the grey tap highlight while still delivering normal
   `click` events. This MUST be used instead of calling
   preventDefault() on touchstart: cancelling a touchstart also
   cancels the synthesised mouse events, so no `click` is ever
   fired and every button becomes dead on phones/tablets. */
button,
.answer-btn,
.emoji-item,
.level-tile,
.action-btn,
.util-btn,
.icon-btn {
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* never let a stray gesture pan the fixed game surface, but keep
   vertical scrolling of panels that genuinely overflow */
.app,
.screen,
.game-shell {
    touch-action: pan-y;
}

/* always allow vertical scrolling, never horizontal rubber-banding */
html,
body {
    overscroll-behavior: none;
}

/* ---- no scrollbar may ever be visible inside an <iframe> ----
   The game is embedded in frames whose height is chosen by the host
   page, so any overflow leaks a scrollbar into the embed. Scrolling
   itself is kept (touch/wheel/keyboard still work) — only the track
   is removed. `overflow: clip` (progressive enhancement over
   `hidden`) additionally makes the document non-scrollable by script,
   so nothing can ever push the layout around inside a frame. */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body,
#app,
.screen,
.levels-wrap,
.modal,
.modal-overlay,
.confetti-holder,
.toast {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.levels-wrap,
.modal,
#game-emojis,
#game-options,
.puzzle-card {
    overscroll-behavior: contain;
}

html {
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
    touch-action: manipulation;
}

/* The app is exactly one frame tall — never one scrollbar longer.
   `inset: 0` pins it to the viewport so a stale --app-h can no longer
   stretch it (that was what produced a phantom scrollbar in iframes). */
#app {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
}

img,
svg,
button,
.level-tile,
.answer-btn,
.emoji-item,
.floating-emoji {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* instant, jitter-free taps on touch devices (no 300ms delay,
   no accidental double-tap zoom, panning still allowed) */
button,
.level-tile,
.answer-btn,
.icon-btn,
.action-btn,
.util-btn {
    touch-action: manipulation;
}

/* ==========================================================
   2. Screens — safe centering + contained scrolling
   ========================================================== */
.screen {
    width: 100%;
    max-width: 100%;
    padding:
        calc(var(--safe-t) + var(--pad-y))
        calc(var(--safe-r) + var(--pad-x))
        calc(var(--safe-b) + var(--pad-y))
        calc(var(--safe-l) + var(--pad-x));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* "safe" = never overflow past the start edge when the
       content is taller than the screen (keeps top reachable) */
    justify-content: safe center;
}

/* Fallback for engines without the `safe` alignment keyword:
   auto margins center without clipping the top. */
@supports not (justify-content: safe center) {
    .screen {
        justify-content: flex-start;
    }

    .screen > .glass-card,
    .screen > .game-shell {
        margin-block: auto;
    }
}

/* children can never be wider than the screen.
   `flex: 0 0 auto` is essential: a flex item is shrinkable by default, so a
   card taller than the screen would be *squeezed* (children overlapping /
   overflowing) instead of simply being scrolled. */
.screen > * {
    max-width: 100%;
    min-width: 0;
}

.screen > .glass-card,
.screen > .game-shell {
    flex: 0 0 auto;
}

.screen > .levels-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

.game-shell > *,
.puzzle-card > * {
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

/* ==========================================================
   3. Main menu
   ========================================================== */
.menu-card {
    max-width: min(460px, 100%);
    padding: clamp(16px, 4vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.menu-subtitle {
    margin-bottom: clamp(12px, 3vw, 24px);
}

.menu-stats {
    gap: 6px;
    margin-bottom: clamp(12px, 3vw, 22px);
    padding: clamp(8px, 2.4vw, 14px);
}

.stat-box .value {
    font-size: clamp(1rem, 3.4vw, 1.15rem);
}

.menu-buttons {
    gap: clamp(8px, 2.2vw, 12px);
}

.menu-buttons .btn {
    min-height: max(var(--tap), 50px);
    padding: 13px 18px;
    font-size: clamp(0.95rem, 3.4vw, 1.05rem);
}

/* utility row: fullscreen + reset */
.menu-util {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(12px, 3vw, 18px);
}

.menu-util .menu-footer {
    margin-top: 0;
}

.util-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tap);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: clamp(0.72rem, 2.7vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--c-text-dim);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}

.util-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.util-btn:active {
    transform: scale(0.97);
}

.util-btn[aria-pressed="true"] {
    color: #3a2500;
    background: linear-gradient(135deg, var(--c-accent), #ff8a00);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(255, 138, 0, 0.4);
}

.util-icon {
    font-size: 1.15em;
    line-height: 1;
}

/* transient notice when the browser has no Fullscreen API */
.fs-notice {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-b) + 18px);
    transform: translate(-50%, 12px);
    z-index: 90;
    max-width: min(90vw, 420px);
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    color: var(--c-text);
    background: rgba(12, 6, 28, 0.94);
    border: 1px solid var(--c-glass-border);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.fs-notice.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ==========================================================
   4. Level select
   ========================================================== */
.screen-header {
    flex: 0 0 auto;
    margin-bottom: clamp(10px, 2.4vw, 16px);
    padding-top: 2px;
}

.levels-wrap {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 820px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: max(20px, var(--safe-b));
}

.levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: clamp(8px, 2.2vw, 12px);
}

.level-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 120px;
    min-height: 52px;
    justify-content: center;
    padding: 4px;
}

.tile-num,
.tile-stars {
    max-width: 100%;
    overflow: hidden;
}

.tile-stars {
    font-size: clamp(0.6rem, 2.2vw, 0.7rem);
}

/* ==========================================================
   5. Game screen — base / portrait
   ========================================================== */
.game-shell {
    width: 100%;
    max-width: var(--shell-max);
    flex: 0 0 auto;
    gap: clamp(8px, 2.2vh, 14px);
    padding-bottom: calc(var(--safe-b) + 6px);
}

/* confetti / sparkles can never escape the play area */
#game-screen {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    border-radius: 26px;
}

.game-topbar {
    gap: clamp(4px, 1.6vw, 8px);
}

.topbar-item {
    padding: clamp(6px, 1.8vw, 8px) clamp(8px, 2.4vw, 14px);
    font-size: clamp(0.75rem, 2.8vw, 0.95rem);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-score .small {
    font-size: clamp(0.55rem, 1.9vw, 0.62rem);
}

.combo-badge {
    padding: 5px 10px;
    font-size: clamp(0.7rem, 2.6vw, 0.95rem);
    white-space: nowrap;
}

.icon-btn {
    flex: 0 0 auto;
    width: max(var(--tap), 46px);
    height: max(var(--tap), 46px);
    min-width: var(--tap);
    min-height: var(--tap);
}

.puzzle-card {
    padding: clamp(12px, 3.2vw, 26px) clamp(12px, 3.2vw, 20px);
    gap: clamp(8px, 2vh, 16px);
    border-radius: clamp(16px, 4vw, 22px);
}

.level-banner {
    font-size: clamp(0.7rem, 2.6vw, 0.85rem);
}

.emoji-area {
    width: 100%;
    min-height: clamp(60px, 14vh, 120px);
    gap: clamp(6px, 2vw, 12px);
    padding: 4px 0;
}

.emoji-item {
    font-size: clamp(2rem, min(13vw, 12vh), 4.5rem);
    line-height: 1.1;
}

.emoji-plus {
    font-size: clamp(1.2rem, min(6vw, 5vh), 2.4rem);
}

.question-label {
    font-size: clamp(0.8rem, 2.9vw, 1.05rem);
    padding: 0 4px;
}

#game-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 2.2vw, 12px);
    width: 100%;
}

.answer-btn {
    gap: clamp(6px, 1.8vw, 10px);
    padding: clamp(10px, 2.6vw, 16px) clamp(8px, 2.2vw, 14px);
    min-height: max(var(--tap), 54px);
    font-size: clamp(0.85rem, 3.1vw, 1.05rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

.opt-letter {
    width: clamp(24px, 6.4vw, 30px);
    height: clamp(24px, 6.4vw, 30px);
    min-width: clamp(24px, 6.4vw, 30px);
    border-radius: 8px;
    font-size: clamp(0.7rem, 2.4vw, 0.85rem);
}

.game-actions,
.mobile-actions {
    gap: clamp(6px, 1.8vw, 10px);
}

.action-btn {
    gap: 6px;
    padding: 10px clamp(8px, 2.2vw, 18px);
    min-height: max(var(--tap), 48px);
    font-size: clamp(0.75rem, 2.7vw, 0.95rem);
    white-space: nowrap;
}

.feedback-kind {
    font-size: clamp(1.1rem, 4.4vw, 1.6rem);
    text-align: center;
}

.feedback-result {
    font-size: clamp(0.85rem, 3vw, 1.05rem);
    text-align: center;
}

.feedback-stars {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    letter-spacing: 3px;
}

/* ==========================================================
   6. Mobile-only vs desktop-only controls
   ========================================================== */
.mobile-only {
    display: none;
}

.mobile-actions {
    display: none;
}

/* ==========================================================
   7. Desktop / tablet landscape (>= 768px)
   ========================================================== */
@media (min-width: 768px) {
    :root {
        --pad-x: 24px;
        --pad-y: 18px;
    }

    body.is-desktop .mobile-only,
    body.is-desktop .mobile-actions {
        display: none;
        pointer-events: none;
    }

    .levels-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 14px;
    }

    .puzzle-card {
        padding: clamp(22px, 3vw, 30px) clamp(24px, 3.4vw, 36px);
    }

    .emoji-item {
        font-size: clamp(2.8rem, min(9vw, 15vh), 5rem);
    }

    .answer-btn:hover {
        transform: translateY(-2px);
    }
}

/* ==========================================================
   8. Mobile / small screens (< 768px)
   ========================================================== */
@media (max-width: 767px) {
    :root {
        --pad-x: 12px;
        --pad-y: 10px;
    }

    .mobile-only {
        display: inline-flex;
    }

    /* hide the desktop action row on mobile; show mobile-only controls */
    #desktop-actions {
        display: none;
    }

    .mobile-actions {
        display: flex;
        width: 100%;
        gap: clamp(8px, 2.4vw, 12px);
    }

    .mobile-actions .action-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        min-height: max(var(--tap), 54px);
        font-size: clamp(0.8rem, 3.1vw, 1.05rem);
    }

    #game-options {
        grid-template-columns: 1fr;
    }

    .answer-btn {
        min-height: max(var(--tap), 58px);
        font-size: clamp(0.9rem, 3.4vw, 1.1rem);
    }

    .game-actions .action-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }

    .game-shell {
        max-width: 100%;
    }

    .puzzle-card {
        padding: 14px 12px;
    }

    .emoji-area {
        min-height: 76px;
        gap: 8px;
    }

    .emoji-item {
        font-size: clamp(2.2rem, min(17vw, 11vh), 4rem);
    }
}

/* Extra small phones */
@media (max-width: 380px) {
    :root {
        --pad-x: 10px;
    }

    .menu-title {
        font-size: 1.7rem;
    }

    .menu-buttons .btn {
        min-height: var(--tap);
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .game-actions {
        flex-wrap: nowrap;
    }

    .game-actions .action-btn {
        font-size: 0.85rem;
        padding: 9px 10px;
    }

    .opt-letter {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.7rem;
    }
}

/* ==========================================================
   9. Short screens (phones in portrait, small windows)
      -> compact everything so the board always fits
   ========================================================== */
@media (max-height: 700px) {
    .menu-card {
        padding: clamp(14px, 3.4vw, 20px);
    }

    .menu-subtitle {
        margin-bottom: 12px;
        font-size: clamp(0.85rem, 3vw, 0.95rem);
    }

    .menu-stats {
        margin-bottom: 12px;
        padding: 9px;
    }

    .menu-util {
        margin-top: 12px;
    }

    .puzzle-card {
        gap: clamp(6px, 1.6vh, 12px);
        padding: 12px 12px;
    }

    .emoji-area {
        min-height: 64px;
        padding: 0;
    }

    .question-label {
        font-size: clamp(0.75rem, 2.6vw, 0.95rem);
    }

    .answer-btn {
        min-height: max(var(--tap), 50px);
    }

    .action-btn,
    .mobile-actions .action-btn {
        min-height: var(--tap);
    }
}

@media (max-height: 560px) and (orientation: portrait) {
    .menu-title {
        font-size: clamp(1.4rem, 7vw, 1.9rem);
    }

    .menu-subtitle {
        display: none;
    }

    .emoji-item {
        font-size: clamp(1.9rem, 12vw, 2.8rem);
    }
}

/* ==========================================================
   10. Landscape phones — two-column board, compact chrome
   ========================================================== */
@media (orientation: landscape) and (max-height: 560px) {
    :root {
        --pad-x: 12px;
        --pad-y: 8px;
    }

    .screen {
        justify-content: safe center;
    }

    .menu-card {
        max-width: 620px;
        padding: 14px 18px;
    }

    .menu-title {
        font-size: clamp(1.3rem, 5.5vh, 1.9rem);
    }

    .menu-subtitle {
        display: none;
    }

    .menu-stats {
        margin-bottom: 10px;
        padding: 8px;
    }

    .menu-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .menu-buttons .btn {
        min-height: var(--tap);
        padding: 9px 12px;
        font-size: 0.92rem;
    }

    .menu-util {
        margin-top: 10px;
    }

    .glass-card {
        padding: 14px 16px;
    }

    .howto-steps {
        gap: 8px;
    }

    .howto-example {
        margin: 8px 0;
        padding: 8px;
        font-size: 1.05rem;
    }

    .step-num {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 0.8rem;
    }

    .game-shell {
        max-width: 980px;
        gap: 8px;
    }

    .game-topbar {
        flex-wrap: nowrap;
    }

    .topbar-item {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .icon-btn {
        width: var(--tap);
        height: var(--tap);
        min-width: var(--tap);
        min-height: var(--tap);
    }

    /* board: emojis on the left, question + options on the right */
    .puzzle-card {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        grid-template-areas:
            "banner  banner"
            "emojis question"
            "emojis options"
            "feedback feedback";
        grid-template-rows: auto auto 1fr auto;
        align-items: center;
        gap: 6px clamp(12px, 3vw, 26px);
        padding: 10px clamp(12px, 2.6vw, 22px);
    }

    .level-banner {
        grid-area: banner;
        align-self: start;
    }

    .emoji-area {
        grid-area: emojis;
        align-self: center;
        min-height: 0;
        padding: 0;
        gap: 4px;
    }

    .emoji-item {
        font-size: clamp(1.5rem, min(9vh, 7vw), 3rem);
    }

    .emoji-plus {
        font-size: clamp(0.9rem, 4.5vh, 1.5rem);
    }

    .question-label {
        grid-area: question;
        align-self: end;
        text-align: center;
        font-size: clamp(0.7rem, 2.6vw, 0.9rem);
    }

    #game-options {
        grid-area: options;
        align-self: start;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .game-feedback {
        grid-area: feedback;
        gap: 2px;
    }

    .feedback-kind {
        font-size: 1rem;
    }

    .feedback-stars {
        font-size: 1.2rem;
    }

    .answer-btn {
        min-height: var(--tap);
        padding: 8px 10px;
        font-size: clamp(0.75rem, 2.4vw, 0.95rem);
    }

    .action-btn,
    .mobile-actions .action-btn {
        min-height: var(--tap);
        padding: 7px 10px;
        font-size: 0.8rem;
    }

    .levels-grid {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        gap: 8px;
    }
}

/* landscape phones: 2-column answers are fine, keep grid 1-col only
   when there is genuinely no room for two columns */
@media (orientation: landscape) and (max-height: 430px) {
    :root {
        --pad-y: 6px;
    }

    /* the whole menu must fit without scrolling */
    .menu-card {
        padding: 10px 14px;
    }

    .menu-title {
        font-size: 1.15rem;
        line-height: 1;
        margin-bottom: 0;
    }

    .menu-stats {
        margin-bottom: 6px;
        padding: 5px 8px;
    }

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

    .menu-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .menu-buttons .btn {
        min-height: 40px;
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .menu-util {
        margin-top: 8px;
        gap: 6px;
    }

    .util-btn {
        min-height: 40px;
        padding: 6px 12px;
    }

    .puzzle-card {
        grid-template-areas:
            "banner  banner"
            "emojis options"
            "question options"
            "feedback feedback";
    }

    .question-label {
        grid-area: question;
        align-self: end;
    }

    .emoji-item {
        font-size: clamp(1.3rem, 8vh, 2.2rem);
    }

    .answer-btn {
        min-height: 40px;
        padding: 6px 8px;
        font-size: 0.78rem;
    }

    .opt-letter {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 0.65rem;
    }

    .action-btn,
    .mobile-actions .action-btn {
        min-height: 40px;
        padding: 5px 8px;
        font-size: 0.75rem;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .levels-grid {
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
        gap: 6px;
    }

    .level-tile {
        min-height: 44px;
    }
}

/* ==========================================================
   11. Modals & toasts — always fully visible, never clipped
   ========================================================== */
.modal-overlay {
    padding:
        calc(var(--safe-t) + 14px)
        calc(var(--safe-r) + 14px)
        calc(var(--safe-b) + 14px)
        calc(var(--safe-l) + 14px);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: safe center;
    justify-content: safe center;
}

@supports not (align-items: safe center) {
    .modal-overlay {
        align-items: flex-start;
    }

    .modal {
        margin: auto;
    }
}

.modal {
    width: min(94vw, 420px);
    max-width: 100%;
    max-height: 100%;
    padding: clamp(16px, 4vw, 26px) clamp(14px, 3.6vw, 22px);
    border-radius: clamp(16px, 4vw, 22px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal h2 {
    font-size: clamp(1.15rem, 4.2vw, 1.4rem);
}

.modal .modal-buttons {
    gap: clamp(8px, 2.2vw, 12px);
    margin-top: clamp(12px, 3vw, 18px);
}

.modal .btn {
    min-height: max(var(--tap), 48px);
    padding: 12px 18px;
    font-size: clamp(0.92rem, 3.2vw, 1.05rem);
}

.setting-row {
    padding: clamp(9px, 2.4vw, 14px) 0;
}

.setting-label {
    font-size: clamp(0.85rem, 3vw, 0.95rem);
}

.confirm-warning {
    padding: clamp(10px, 2.6vw, 14px);
    font-size: clamp(0.8rem, 2.9vw, 0.9rem);
}

.complete-stats {
    gap: clamp(16px, 5vw, 30px);
}

.complete-stars {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    letter-spacing: 4px;
}

/* toasts: hidden from pointer AND keyboard when inactive */
.toast {
    top: clamp(10px, 14%, 15%);
    max-width: min(86vw, 320px);
    padding: clamp(12px, 3.4vw, 20px) clamp(16px, 4.4vw, 30px);
    border-radius: 16px;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.toast.show {
    visibility: visible;
}

.toast .t-title {
    font-size: clamp(1.1rem, 4.4vw, 1.5rem);
}

.toast .t-points {
    font-size: clamp(1rem, 3.6vw, 1.2rem);
}

.toast .t-combo {
    font-size: clamp(0.8rem, 3vw, 0.95rem);
}

.toast-correct .btn {
    min-height: max(var(--tap), 46px);
    padding: 11px 22px;
    font-size: clamp(0.9rem, 3.2vw, 1rem);
}

/* ==========================================================
   12. Hidden / fading controls must leave the tab order
   ========================================================== */
.answer-btn.hinted-away {
    visibility: hidden;
}

/* ==========================================================
   13. Keyboard accessibility (Tab through everything)
   ========================================================== */
:where(button, [tabindex], input):focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 12px;
}

.answer-btn:focus-visible,
.level-tile:focus-visible,
.action-btn:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 184, 0, 0.18);
}

/* the real checkbox covers the whole switch so it is both a
   comfortable tap target and visibly focusable */
.toggle input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.toggle {
    display: inline-block;
}

.toggle:focus-within .slider {
    box-shadow: 0 0 0 3px var(--c-accent);
}

/* skip link, revealed on focus */
.skip-link {
    position: fixed;
    top: -120px;
    left: 8px;
    z-index: 200;
    padding: 12px 18px;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    border-radius: 0 0 12px 12px;
    font-weight: 800;
    color: #3a2500;
    background: var(--c-accent);
    pointer-events: none;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    pointer-events: auto;
}

@media (pointer: coarse) {
    :where(button, [tabindex], input):focus-visible {
        outline-width: 2px;
    }
}

/* ==========================================================
   14. Large screens — fill the space instead of leaving voids
   ========================================================== */
@media (min-width: 1024px) and (min-height: 640px) {
    :root {
        --pad-x: 32px;
        --pad-y: 24px;
    }

    .levels-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 16px;
    }

    .level-tile {
        max-height: none;
        font-size: 1.1rem;
    }

    .game-shell {
        max-width: 1000px;
        gap: 18px;
    }

    /* side-by-side board: emojis | question + options */
    .puzzle-card {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        grid-template-areas:
            "banner   banner"
            "emojis   question"
            "emojis   options"
            "feedback feedback";
        grid-template-rows: auto auto 1fr auto;
        align-items: center;
        gap: 14px clamp(24px, 4vw, 48px);
        padding: clamp(24px, 3vw, 34px) clamp(26px, 4vw, 44px);
    }

    .level-banner {
        grid-area: banner;
        justify-self: start;
        align-self: start;
    }

    .emoji-area {
        grid-area: emojis;
        align-self: center;
        min-height: 0;
    }

    .emoji-item {
        font-size: clamp(3rem, min(7vw, 15vh), 5.5rem);
    }

    .question-label {
        grid-area: question;
        align-self: end;
        text-align: center;
        font-size: 1.05rem;
    }

    #game-options {
        grid-area: options;
        align-self: start;
    }

    .game-feedback {
        grid-area: feedback;
    }

    .answer-btn {
        min-height: 58px;
        font-size: 1.05rem;
    }
}

@media (min-width: 1024px) and (min-height: 700px) {
    .game-shell {
        max-width: 1060px;
    }
}

@media (min-width: 1440px) {
    :root {
        --pad-x: 40px;
    }

    .levels-wrap {
        max-width: 1180px;
    }

    .levels-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 16px;
    }

    .game-shell {
        max-width: 1120px;
    }

    .menu-card {
        max-width: 480px;
        padding: 32px;
    }
}

@media (min-width: 1920px) {
    :root {
        --pad-x: 56px;
    }

    .levels-wrap {
        max-width: 1500px;
    }

    .levels-grid {
        grid-template-columns: repeat(16, 1fr);
    }

    .game-shell {
        max-width: 1240px;
    }

    .menu-card {
        max-width: 520px;
    }
}

/* very tall/narrow (folded phones, split screen) */
@media (min-width: 768px) and (max-height: 520px) and (orientation: landscape) {
    .game-shell {
        max-width: 980px;
    }

    .puzzle-card {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        grid-template-areas:
            "banner  banner"
            "emojis question"
            "emojis options"
            "feedback feedback";
        grid-template-rows: auto auto 1fr auto;
        align-items: center;
        gap: 6px clamp(16px, 3vw, 28px);
        padding: 10px 18px;
    }

    .level-banner { grid-area: banner; align-self: start; }
    .emoji-area { grid-area: emojis; min-height: 0; padding: 0; }
    .emoji-item { font-size: clamp(1.6rem, 9vh, 2.8rem); }
    .question-label { grid-area: question; align-self: end; text-align: center; }
    #game-options { grid-area: options; align-self: start; }
    .game-feedback { grid-area: feedback; }
}

/* ==========================================================
   14b. Fullscreen / immersive states
   ========================================================== */
body.is-fullscreen {
    background: #0d0620;
}

#app:fullscreen,
#app:-webkit-full-screen,
#app:-moz-full-screen,
#app:-ms-fullscreen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: radial-gradient(circle at 20% 0%, #3a2577 0%, #1b1035 55%, #120a28 100%);
}

body.fs-immersive #app {
    height: 100%;
    min-height: 0;
}

body.fs-immersive {
    background: #0d0620;
}

/* ==========================================================
   15. Reduced motion / accessibility preferences
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .answer-btn,
    .util-btn,
    .level-tile,
    .icon-btn,
    .action-btn {
        transition-duration: 0.001ms !important;
    }
}

@media (prefers-contrast: more) {
    .util-btn,
    .topbar-item,
    .action-btn,
    .icon-btn {
        border-color: rgba(255, 255, 255, 0.5);
    }
}

/* ==========================================================
   16. EMBED / SHORT-FRAME RESPONSIVENESS
   ------------------------------------------------------------
   Inside an <iframe> the host page decides the frame height, so the
   game has to survive anything from 320x220 (a banner slot) up to a
   4K window. The tiers below shrink the board in the two axes that
   matter so that no screen ever needs a scrollbar:
       width  -> fewer columns, shorter labels
       height -> tighter rhythm, then a side-by-side board
   ========================================================== */

/* --- 16.1 compact rhythm: short frames (any orientation) --- */
@media (max-height: 640px) {
    :root {
        --pad-x: 14px;
        --pad-y: 9px;
    }

    .game-shell {
        gap: clamp(6px, 1.6vh, 10px);
        padding-bottom: calc(var(--safe-b) + 2px);
    }

    .puzzle-card {
        padding: clamp(9px, 2.4vw, 16px) clamp(10px, 2.8vw, 18px);
        gap: clamp(5px, 1.4vh, 11px);
        border-radius: clamp(14px, 3vw, 20px);
    }

    .level-banner {
        font-size: clamp(0.62rem, 2.2vw, 0.78rem);
    }

    .emoji-area {
        min-height: clamp(34px, 9vh, 92px);
        gap: clamp(4px, 1.6vw, 10px);
        padding: 2px 0;
    }

    .emoji-item {
        font-size: clamp(1.6rem, min(12vw, 10vh), 3.6rem);
    }

    .emoji-plus {
        font-size: clamp(0.9rem, min(6vw, 4vh), 1.8rem);
    }

    .question-label {
        font-size: clamp(0.72rem, 2.6vw, 0.95rem);
    }

    .answer-btn {
        min-height: clamp(40px, 7vh, 52px);
        padding: clamp(7px, 2vw, 13px) clamp(7px, 2vw, 12px);
        font-size: clamp(0.76rem, 2.8vw, 0.98rem);
    }

    .opt-letter {
        width: clamp(22px, 6vw, 28px);
        height: clamp(22px, 6vw, 28px);
        min-width: clamp(22px, 6vw, 28px);
        font-size: clamp(0.66rem, 2.2vw, 0.8rem);
    }

    .action-btn,
    .mobile-actions .action-btn {
        min-height: clamp(38px, 6.6vh, 46px);
        padding: 7px clamp(7px, 2vw, 14px);
        font-size: clamp(0.72rem, 2.5vw, 0.88rem);
    }

    .icon-btn {
        width: clamp(38px, 6.6vh, 46px);
        height: clamp(38px, 6.6vh, 46px);
        min-width: clamp(38px, 6.6vh, 46px);
        min-height: clamp(38px, 6.6vh, 46px);
        font-size: 1.05rem;
    }

    .topbar-item {
        padding: 5px clamp(7px, 2vw, 12px);
        font-size: clamp(0.7rem, 2.5vw, 0.88rem);
    }

    .feedback-kind {
        font-size: clamp(1rem, 3.8vw, 1.35rem);
    }

    .feedback-stars {
        font-size: clamp(1.1rem, 4.6vw, 1.5rem);
    }

    /* menu stays a single card even when the frame is wide */
    .menu-card {
        max-width: min(560px, 100%);
        padding: clamp(12px, 2.6vw, 20px);
    }

    .menu-title {
        font-size: clamp(1.35rem, 5.2vw, 2.2rem);
        margin-bottom: 0;
    }

    .menu-subtitle {
        margin-bottom: clamp(8px, 2vw, 14px);
        font-size: clamp(0.78rem, 2.6vw, 0.95rem);
    }

    .menu-stats {
        margin-bottom: clamp(8px, 2vw, 14px);
        padding: clamp(6px, 1.8vw, 11px);
    }

    .stat-box .label {
        font-size: clamp(0.55rem, 2vw, 0.66rem);
    }

    .stat-box .value {
        font-size: clamp(0.85rem, 2.8vw, 1.05rem);
    }

    .menu-buttons .btn {
        min-height: clamp(40px, 6.8vh, 48px);
        padding: 9px 12px;
        font-size: clamp(0.85rem, 3vw, 1rem);
    }

    .menu-util {
        margin-top: clamp(8px, 2vw, 13px);
    }

    .util-btn {
        min-height: clamp(34px, 6vh, 42px);
        padding: 6px 12px;
        font-size: clamp(0.66rem, 2.3vw, 0.78rem);
    }

    .screen-header {
        margin-bottom: clamp(6px, 1.6vh, 10px);
    }

    .screen-header h2 {
        font-size: clamp(1rem, 3.4vw, 1.25rem);
    }

    .levels-wrap {
        padding-bottom: max(8px, var(--safe-b));
    }

    .modal {
        padding: clamp(12px, 3vw, 20px) clamp(11px, 2.8vw, 18px);
        border-radius: clamp(14px, 3.4vw, 20px);
    }

    .modal h2 {
        font-size: clamp(1rem, 3.6vw, 1.25rem);
        margin-bottom: 8px;
    }

    .modal .btn {
        min-height: clamp(38px, 6.6vh, 46px);
        padding: 9px 14px;
        font-size: clamp(0.85rem, 3vw, 1rem);
    }

    .modal .modal-buttons {
        margin-top: clamp(8px, 2vw, 14px);
        gap: clamp(6px, 1.6vh, 10px);
    }

    .setting-row {
        padding: clamp(7px, 1.8vh, 12px) 0;
    }

    .howto-steps {
        gap: clamp(7px, 1.8vh, 12px);
    }

    .step-num {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.82rem;
    }

    .howto-example {
        margin: 8px 0;
        padding: 9px;
        font-size: clamp(1rem, 3.4vw, 1.2rem);
    }

    .toast {
        top: clamp(6px, 9%, 12%);
        padding: clamp(9px, 2.6vw, 15px) clamp(13px, 3.6vw, 24px);
        width: min(86%, 320px);
    }

    .toast .t-title {
        font-size: clamp(1rem, 3.8vw, 1.3rem);
    }

    .toast .t-points {
        font-size: clamp(0.9rem, 3.2vw, 1.1rem);
    }

    .toast-correct .btn {
        min-height: clamp(36px, 6.2vh, 44px);
        padding: 9px 18px;
    }

    .complete-stats {
        gap: clamp(12px, 4vw, 24px);
    }

    .complete-stars {
        font-size: clamp(1.5rem, 6vw, 2.1rem);
        margin: 4px 0;
    }

    .complete-stat .value {
        font-size: clamp(1.1rem, 4.4vw, 1.4rem);
    }
}

/* --- 16.2 portrait short frames: menu goes 2-up, board 4 answers 2-up --- */
@media (max-height: 640px) and (orientation: portrait) {
    .menu-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(6px, 1.6vh, 10px);
    }

    .menu-buttons .btn {
        padding: 8px 10px;
        font-size: clamp(0.8rem, 3.4vw, 0.95rem);
    }

    /* the "continue" CTA keeps the full width so it stays prominent */
    #btn-continue {
        grid-column: 1 / -1;
    }
}

/* --- 16.3 very short frames: side-by-side board (portrait included) ---
   Only from 360px wide: below that the columns get too narrow and the
   stacked board (16.9) reads better. */
@media (max-height: 470px) and (min-width: 360px) {
    .puzzle-card {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        grid-template-areas:
            "banner  banner"
            "emojis question"
            "emojis options"
            "feedback feedback";
        grid-template-rows: auto auto 1fr auto;
        align-items: center;
        gap: clamp(4px, 1.2vh, 8px) clamp(10px, 2.6vw, 22px);
        padding: 8px clamp(9px, 2.4vw, 18px);
    }

    .level-banner {
        grid-area: banner;
        justify-self: center;
        align-self: start;
    }

    .emoji-area {
        grid-area: emojis;
        align-self: center;
        min-height: 0;
        padding: 0;
        gap: 3px;
    }

    .emoji-item {
        font-size: clamp(1.15rem, min(9vh, 9vw), 2.2rem);
    }

    .emoji-plus {
        font-size: clamp(0.7rem, 4vh, 1.1rem);
    }

    .question-label {
        grid-area: question;
        align-self: end;
        text-align: center;
        font-size: clamp(0.66rem, 2.4vw, 0.86rem);
    }

    #game-options {
        grid-area: options;
        align-self: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(4px, 1.2vh, 7px);
    }

    .game-feedback {
        grid-area: feedback;
        gap: 2px;
    }

    .answer-btn {
        min-height: clamp(34px, 9vh, 42px);
        padding: 5px 7px;
        font-size: clamp(0.68rem, 2.3vw, 0.86rem);
    }

    .opt-letter {
        width: 21px;
        height: 21px;
        min-width: 21px;
        border-radius: 7px;
        font-size: 0.62rem;
    }

    /* one full-width action row keeps the board readable */
    .desktop-actions {
        display: none;
    }

    .mobile-actions {
        display: flex;
        width: 100%;
        gap: clamp(4px, 1.4vw, 8px);
    }

    .mobile-actions .action-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        min-height: clamp(34px, 8.5vh, 42px);
        font-size: clamp(0.66rem, 2.2vw, 0.82rem);
    }

    .game-shell.game-correct .next-btn,
    .game-shell.game-complete .next-btn {
        flex: 1;
        width: 100%;
        justify-content: center;
        min-height: clamp(34px, 8.5vh, 42px);
        font-size: 0.95rem;
    }

    .glass-card {
        padding: clamp(12px, 2.6vw, 20px);
    }
}

/* --- 16.4 narrow frames: shed the non-essential columns --- */
@media (max-width: 420px) {
    /* "Best" is already on the main menu — drop it from the game HUD
       so Level / Score / Combo always fit without truncation */
    .topbar-best {
        display: none;
    }

    .game-topbar {
        gap: clamp(3px, 1.2vw, 6px);
    }

    .topbar-score .small {
        font-size: 0.52rem;
    }
}

@media (max-width: 330px) {
    :root {
        --pad-x: 8px;
    }

    /* below this width the HUD cannot hold three readouts + the back
       button, so the combo readout becomes a compact "xN" pill */
    #game-level {
        display: none;
    }

    .level-banner {
        display: block;
    }

    .answer-btn {
        padding: 6px;
        font-size: clamp(0.72rem, 3vw, 0.85rem);
    }

    .menu-buttons {
        gap: 5px;
    }

    .levels-grid {
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
        gap: 6px;
    }
}

/* --- 16.5 wide but very short (short desktop window / banner slot) --- */
@media (min-width: 560px) and (max-height: 400px) {
    .game-shell {
        max-width: 100%;
        gap: 6px;
    }

    .menu-card {
        max-width: 760px;
    }

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

    #btn-continue {
        grid-column: auto;
    }

    .howto-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- 16.6 embedded frames: the browser bar / fullscreen affordances
       are unreliable inside a frame, so keep the layout honest and
       never rely on a viewport unit that the host can override --- */
html.is-embedded {
    --pad-x: clamp(8px, 2.2vw, 20px);
    --pad-y: clamp(6px, 1.8vh, 14px);
}

html.is-embedded .screen {
    overscroll-behavior: contain;
    scroll-behavior: auto;
}

/* --- 16.7 "How to play" reflows into columns instead of growing --- */
@media (max-height: 700px) {
    .howto-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(6px, 1.6vh, 12px) clamp(10px, 2.5vw, 20px);
    }

    .howto-step {
        gap: clamp(6px, 1.8vw, 12px);
    }

    .howto-step p {
        font-size: clamp(0.72rem, 2.6vw, 0.92rem);
    }

    .step-num {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.82rem;
    }
}

@media (max-height: 400px) {
    /* the example is a nice-to-have, the steps are the content */
    .howto-example {
        display: none;
    }

    .screen-header h2 {
        font-size: 0.9rem;
    }
}

/* three columns only when the frame is both short AND wide enough for
   the copy to keep a readable measure */
@media (max-height: 400px) and (min-width: 520px) {
    .howto-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* very narrow: shrink the badge so the copy keeps the column width */
@media (max-width: 300px) {
    .howto-step {
        gap: 6px;
    }

    .step-num {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.6rem;
    }

    .howto-step p {
        font-size: 0.68rem;
    }
}

/* --- 16.8 ultra-short frames (banner slots, tiny iframes) --- */
@media (max-height: 300px) {
    :root {
        --pad-x: 10px;
        --pad-y: 5px;
    }

    .game-shell {
        gap: 4px;
        padding-bottom: 2px;
    }

    .puzzle-card {
        padding: 5px 7px;
        gap: 3px;
        border-radius: 12px;
    }

    /* the level number is already in the HUD - drop the banner */
    .level-banner {
        display: none;
    }

    .emoji-area {
        min-height: 0;
        padding: 0;
        gap: 3px;
    }

    .emoji-item {
        font-size: clamp(1rem, min(9vh, 11vw), 1.7rem);
    }

    .emoji-plus {
        font-size: clamp(0.6rem, 5vh, 0.9rem);
    }

    .question-label {
        font-size: 0.66rem;
    }

    #game-options {
        gap: 3px;
    }

    .answer-btn {
        min-height: 30px;
        padding: 4px 6px;
        font-size: 0.68rem;
        gap: 5px;
    }

    .opt-letter {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.58rem;
        border-radius: 6px;
    }

    .icon-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 0.95rem;
        border-radius: 9px;
    }

    .topbar-item {
        padding: 3px 7px;
        font-size: 0.62rem;
        border-radius: 8px;
    }

    .topbar-score .small {
        font-size: 0.46rem;
    }

    .combo-badge {
        padding: 3px 7px;
        font-size: 0.62rem;
    }

    .action-btn,
    .mobile-actions .action-btn {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 0.68rem;
        border-radius: 9px;
    }

    .game-shell.game-correct .next-btn,
    .game-shell.game-complete .next-btn {
        min-height: 30px;
        font-size: 0.85rem;
    }

    .feedback-kind {
        font-size: 0.9rem;
    }

    .feedback-stars {
        font-size: 1rem;
    }

    /* menu */
    .menu-card {
        padding: 8px 10px;
        max-width: min(680px, 100%);
    }

    .menu-title {
        font-size: 1.15rem;
        line-height: 1.05;
    }

    /* the stat boxes are duplicated on the level screen - drop them
       rather than pushing the buttons out of the frame */
    .menu-stats {
        display: none;
    }

    .menu-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    #btn-continue {
        grid-column: auto;
    }

    .menu-buttons .btn {
        min-height: 34px;
        padding: 5px 8px;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    .menu-util {
        margin-top: 6px;
        gap: 5px;
    }

    .util-btn {
        min-height: 28px;
        padding: 3px 9px;
        font-size: 0.58rem;
    }

    .screen-header {
        margin-bottom: 5px;
    }

    .screen-header h2 {
        font-size: 0.9rem;
    }

    .levels-wrap {
        padding-bottom: 4px;
    }

    .level-tile {
        min-height: 36px;
        font-size: 0.8rem;
    }

    .tile-stars {
        font-size: 0.5rem;
    }

    /* dialogs */
    .modal {
        padding: 10px 12px;
    }

    .modal h2 {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .modal .modal-buttons {
        margin-top: 8px;
        gap: 6px;
    }

    .modal .btn {
        min-height: 32px;
        padding: 5px 10px;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    /* how-to: one compact line per step, two per row */
    .howto-steps {
        gap: 4px 8px;
    }

    .howto-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 6px;
    }

    .step-num {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.6rem;
    }

    .howto-step p {
        font-size: 0.7rem;
    }

    .setting-row {
        padding: 6px 0;
    }

    .setting-label {
        font-size: 0.78rem;
    }

    .toast {
        top: 4px;
        padding: 7px 12px;
        gap: 4px;
    }

    .toast .t-title {
        font-size: 0.9rem;
    }

    .toast .t-points {
        font-size: 0.78rem;
    }

    .toast-correct .btn {
        min-height: 28px;
        padding: 4px 12px;
        font-size: 0.78rem;
    }

    .complete-stars {
        font-size: 1.3rem;
        margin: 2px 0;
    }

    .complete-stat .value {
        font-size: 1rem;
    }
}

/* --- 16.9 very narrow frames: 2 answers per row beats 4 stacked rows --- */
@media (max-width: 359px) {
    #game-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .answer-btn {
        padding: 7px 6px;
        gap: 6px;
        font-size: clamp(0.7rem, 3.1vw, 0.82rem);
    }

    /* undo the side-by-side board: at this width the columns squeeze
       the answer text until it wraps into 3-4 lines */
    .puzzle-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(4px, 1.4vh, 10px);
    }

    .level-banner,
    .emoji-area,
    .question-label,
    #game-options,
    .game-feedback {
        grid-area: auto;
    }

    #game-options {
        align-self: stretch;
    }

    .question-label {
        text-align: center;
        align-self: center;
    }

    .menu-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .levels-grid {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 5px;
    }
}

/* --- 16.10 micro frames (<=200px tall: ad slots, 16:9 banners) --- */
@media (max-height: 200px) {
    :root {
        --pad-x: 7px;
        --pad-y: 4px;
    }

    .game-shell {
        gap: 3px;
        padding-bottom: 0;
    }

    .puzzle-card {
        padding: 4px 6px;
        gap: 2px;
        border-radius: 10px;
    }

    .level-banner {
        display: none;
    }

    .emoji-area {
        min-height: 0;
        padding: 0;
        gap: 2px;
    }

    .emoji-item {
        font-size: clamp(0.8rem, 9vh, 1.15rem);
    }

    .emoji-plus {
        font-size: 0.6rem;
    }

    .question-label {
        font-size: 0.56rem;
        letter-spacing: 0.5px;
    }

    /* one row of four chips — the only shape that fits this height */
    #game-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
    }

    .answer-btn {
        min-height: 26px;
        padding: 2px 4px;
        font-size: 0.58rem;
        gap: 0;
        line-height: 1.1;
        text-align: center;
        justify-content: center;
        border-radius: 8px;
        border-width: 1px;
    }

    .opt-letter {
        display: none;
    }

    .icon-btn {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .topbar-item {
        padding: 2px 6px;
        font-size: 0.55rem;
        border-radius: 7px;
    }

    .topbar-score .small {
        display: none;
    }

    .action-btn,
    .mobile-actions .action-btn {
        min-height: 26px;
        padding: 2px 7px;
        font-size: 0.6rem;
        border-radius: 8px;
    }

    .game-shell.game-correct .next-btn,
    .game-shell.game-complete .next-btn {
        min-height: 26px;
        font-size: 0.75rem;
    }

    .feedback-kind {
        font-size: 0.75rem;
    }

    .feedback-stars {
        font-size: 0.8rem;
    }

    /* menu: one row of chips, the stats row is the first to go */
    .menu-card {
        padding: 6px 9px;
        max-width: min(760px, 100%);
    }

    .menu-title {
        font-size: 0.95rem;
        line-height: 1;
        margin-bottom: 3px;
    }

    .menu-subtitle,
    .menu-stats {
        display: none;
    }

    .menu-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    #btn-continue {
        grid-column: auto;
    }

    .menu-buttons .btn {
        min-height: 26px;
        padding: 3px 6px;
        font-size: 0.7rem;
        border-radius: 8px;
    }

    .menu-util {
        margin-top: 4px;
        gap: 4px;
    }

    .util-btn {
        min-height: 22px;
        padding: 2px 8px;
        font-size: 0.55rem;
    }

    .screen-header {
        margin-bottom: 3px;
    }

    .screen-header h2 {
        font-size: 0.75rem;
    }

    /* prose screens scroll inside their card rather than pushing the
       frame: scrolling still works, only the track is invisible */
    #screen-howto .glass-card {
        max-height: 100%;
        min-height: 0;
        padding: 6px 8px;
        overflow-y: auto;
    }

    .howto-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px 6px;
    }

    .howto-step {
        gap: 4px;
    }

    .step-num {
        display: none;
    }

    .howto-step p {
        font-size: 0.55rem;
    }

    .level-tile {
        min-height: 28px;
        font-size: 0.7rem;
        border-radius: 8px;
    }
}

/* --- 16.11 the last resort: <=160px tall frames (1-line banners).
       Every pixel now goes to the emojis and the answers, so the
       generic question line is dropped to keep all four answers and
       the action row on screen at once. --- */
@media (max-height: 160px) {
    .question-label {
        display: none;
    }

    .answer-btn {
        min-height: 24px;
        padding: 1px 3px;
        font-size: 0.55rem;
        line-height: 1.05;
    }

    .emoji-area {
        gap: 1px;
    }

    .game-shell {
        gap: 2px;
    }

    .puzzle-card {
        padding: 3px 5px;
        gap: 1px;
    }
}