/* Base: reset, app shell, panels, headers, buttons, settings sheet.
   The hub (rail, cards, aside) lives in hub.css. */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* The UA's [hidden] rule loses to any class that sets `display`, and plenty of
   things here are .actions/.pill/.history/.help — all of which set one. Without
   this, `el.hidden = true` silently does nothing. */
[hidden] { display: none !important; }

/* The play surface is a fixed box, never a document: nothing here scrolls,
   because a scrollbar is the one control a switch or eye-gaze player cannot
   operate. Screens that hold more than fits paginate instead — see fit.js. */
html, body { height: 100%; overflow: hidden; }

body {
    font-family: 'Nunito', system-ui, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% -10%, var(--bg-tint-1), transparent 46%),
        radial-gradient(circle at 96% 2%, var(--bg-tint-2), transparent 38%),
        radial-gradient(circle at 52% 120%, var(--bg-tint-3), transparent 52%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* The sprite is a definition block, not a picture. */
svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icons are drawn on a 24px grid and sized in ems, so they scale with whatever
   label they sit beside instead of drifting off the baseline the way the emoji
   they replaced did. */
.ico {
    width: 1.35em; height: 1.35em;
    flex-shrink: 0;
    display: block;
    color: inherit;
}

/* ============ App shell ============
   A fixed two-column application: a persistent navigation rail, and a stage
   that holds the header, the live screen, and the switch bar. */
.app {
    zoom: var(--ui-scale, 1);
    width: 100%; max-width: 1500px;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
}

.stage {
    min-width: 0; min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, calc(1.4 * var(--vh)), 18px);
    padding: clamp(10px, var(--safe-inset), 34px) clamp(12px, var(--safe-inset), 40px);
    overflow: hidden;
}

h1, h2, h3, .display { font-family: 'Fredoka', sans-serif; letter-spacing: -0.015em; }

/* ============ Cards / screens ============ */
/* #screens takes all the height the bars leave, and each active screen is a
   box inside it that must fit — not a document that grows. */
#screens { flex: 1; min-height: 0; display: flex; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: clamp(14px, calc(2.4 * var(--vh)), 36px) clamp(16px, 3vw, 40px);
    position: relative;
    overflow: hidden;
}
/* A single hairline of brand colour along the top edge. The full-width rainbow
   this replaces was eight pixels of decoration on every screen, competing with
   the game for the eye at the exact moment the game needs it. */
.panel::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--sky), var(--mint) 38%, var(--sun) 68%, var(--coral));
    opacity: 0.7;
}

.screen { display: none; }
.screen.active {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    animation: fade .3s ease both;
}
/* Opacity only, no slide: a transform briefly extends the screen's scroll box,
   which now means briefly clipping content that has nowhere to scroll to. It is
   also a calmer entrance, which suits this audience. */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* The one flexible region on a screen — the dice tray, the spinner stage, the
   grid of choices — absorbs the leftover height so the fixed furniture above
   and below it stays put. Games opt in by tagging their main region. */
.screen.active .fit-grow { flex: 1; min-height: 0; }

/* ============ Game headers ============ */
.game-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: clamp(8px, calc(1.8 * var(--vh)), 22px); flex-wrap: wrap;
    flex-shrink: 0;
}
.back-btn {
    appearance: none; font-family: 'Nunito', sans-serif;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--line-strong);
    color: var(--ink); padding: 11px 18px;
    border-radius: var(--radius-pill); font-size: 15.5px; font-weight: 800;
    cursor: pointer; min-height: 48px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.back-btn:hover { transform: translateY(-1px); border-color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }
.game-title {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: clamp(24px, 3.2vw, 34px); font-weight: 600; color: var(--ink); line-height: 1.05;
}
/* The game's own card artwork, reused at badge size. */
.game-title .em {
    width: clamp(38px, calc(6 * var(--vh)), 50px); height: clamp(38px, calc(6 * var(--vh)), 50px);
    border-radius: 13px; overflow: hidden; flex-shrink: 0;
    display: block; box-shadow: var(--shadow-sm);
}
.game-title .em svg { width: 100%; height: 100%; display: block; }

.status {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    justify-content: center; text-align: center;
    margin-bottom: clamp(10px, calc(2 * var(--vh)), 26px);
    flex-shrink: 0;
}
.status-text { font-size: clamp(16px, 2.1vw, 20px); font-weight: 700; color: var(--ink-dim); }
.pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff; padding: 8px 20px; border-radius: var(--radius-pill);
    font-weight: 800; font-size: 16px; box-shadow: var(--shadow-sm);
}
.pill.sum { background: linear-gradient(135deg, var(--mint), #6fc79a); color: #06331f; }
.pill.combo { background: linear-gradient(135deg, var(--accent), #f7c667); color: #4a3200; }
.pill.risk { background: linear-gradient(135deg, var(--coral), #e0705a); color: #3a1109; }
.pill.risk.is-hot { animation: riskPulse 1.1s ease-in-out infinite; }
@keyframes riskPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.pill.is-winner { outline: 3px solid var(--accent); outline-offset: 2px; }
/* A secondary number inside a pill — "12 to bonus" — deliberately quieter
   than the score it hangs off. */
.pill-note {
    margin-left: 8px; padding: 2px 9px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.28); font-size: 14px; font-weight: 800;
}

/* Rolls left, as dots: the count without the reading. */
.roll-dots { display: inline-flex; align-items: center; gap: 7px; }
.roll-dots i {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--primary-ink);
    transition: background .2s ease, transform .2s ease;
}
.roll-dots i.spent { background: var(--line-strong); transform: scale(.7); }

/* A big button with a second line of detail (the odds in Higher or Lower). */
.btn-big.stacked { flex-direction: column; gap: 4px; padding: 18px 36px; }
.btn-line { display: inline-flex; align-items: center; gap: 10px; }
.btn-odds {
    font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800;
    letter-spacing: .04em; opacity: .85;
}

.hist-chip.is-done { opacity: .75; text-decoration: line-through; }
.picked-row { justify-content: center; }


/* ============ Big action buttons ============ */
.actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-big {
    appearance: none; font-family: 'Fredoka', sans-serif;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-width: 230px; padding: 20px 38px;
    border: none; border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff; font-size: clamp(21px, 2.8vw, 28px); font-weight: 600;
    cursor: pointer; letter-spacing: -0.01em;
    box-shadow: var(--shadow-md);
    transition: transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s ease, filter .2s ease;
}
.btn-big .ico { width: 1.05em; height: 1.05em; }
.btn-big:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--shadow-lg); filter: saturate(1.06); }
.btn-big:active:not(:disabled) { transform: translateY(-1px); }
.btn-big:disabled { opacity: 0.42; cursor: not-allowed; box-shadow: none; }
.btn-big.accent { background: linear-gradient(135deg, var(--accent), #f7c667); color: #4a3200; }
.btn-ghost {
    appearance: none; font-family: 'Fredoka', sans-serif;
    min-width: 170px; padding: 18px 32px;
    border: 1.5px solid var(--line-strong); border-radius: 18px;
    background: var(--surface-2); color: var(--ink);
    font-size: clamp(17px, 2.2vw, 22px); font-weight: 600; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }


/* ============ Settings modal ============ */
.modal { position: fixed; inset: 0; background: rgba(4, 5, 9, 0.68); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 100; overflow-y: auto; }
.modal.open { display: flex; }
.sheet {
    width: min(720px, 100%); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: 24px;
    box-shadow: var(--shadow-lg); padding: 26px; margin: auto;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-head h2 { font-size: 26px; color: var(--ink); }
.sheet-intro { color: var(--ink-dim); font-weight: 600; font-size: 14.5px; line-height: 1.5; margin-bottom: 6px; }
.sheet-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sheet-section:first-of-type { border-top: none; padding-top: 8px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-head h3 { font-size: 18px; color: var(--ink); }
.section-head span { font-size: 13.5px; color: var(--ink-dim); font-weight: 700; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 14px; padding: 14px;
}
.field.full { grid-column: 1 / -1; }
.field > label { display: block; font-weight: 800; font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.field .help { display: block; color: var(--ink-dim); font-size: 13.5px; font-weight: 600; margin-top: 6px; line-height: 1.4; }
.toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.toggle .copy { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.toggle input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 800; color: var(--ink); }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--primary); height: 26px; }
input[type="color"] { width: 100%; height: 42px; border: none; border-radius: 10px; background: transparent; cursor: pointer; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
    appearance: none; font-family: 'Nunito', sans-serif;
    flex: 1; min-width: 90px;
    border: 1.5px solid var(--line-strong); background: var(--surface);
    color: var(--ink-dim); border-radius: 12px; padding: 12px 10px;
    font-weight: 800; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.seg button .ico { width: 18px; height: 18px; }
.seg button:hover { transform: translateY(-1px); border-color: var(--primary-ink); color: var(--ink); }
.seg button[aria-pressed="true"] { border-color: var(--primary-ink); color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 16%, transparent); }
.field.is-disabled { opacity: 0.5; }

.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.theme-swatch {
    appearance: none; font-family: 'Nunito', sans-serif;
    border: 1.5px solid var(--line-strong); background: var(--surface);
    border-radius: 14px; padding: 10px; cursor: pointer; text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.theme-swatch:hover { transform: translateY(-2px); border-color: var(--primary-ink); }
.theme-swatch[aria-pressed="true"] { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--scan-glow); }
.theme-strip { display: flex; height: 32px; border-radius: 9px; overflow: hidden; margin-bottom: 8px; }
.theme-strip span { flex: 1; }
.theme-name { font-weight: 800; font-size: 14px; color: var(--ink); }

.spinner-editor {
    width: 100%; min-height: 118px; resize: vertical;
    border-radius: 12px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink);
    padding: 12px; font-family: inherit; font-size: 15px; line-height: 1.45; font-weight: 600;
}
.warn {
    margin-top: 12px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4;
}
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.btn-soft {
    appearance: none; font-family: 'Nunito', sans-serif;
    background: var(--surface-2); border: 1.5px solid var(--line-strong); color: var(--ink);
    border-radius: 12px; padding: 12px 20px; font-weight: 800; font-size: 15px; cursor: pointer; min-height: 48px;
}
.btn-soft:hover { border-color: var(--primary-ink); }
.btn-solid {
    appearance: none; font-family: 'Fredoka', sans-serif;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong)); border: none; color: #fff;
    border-radius: 12px; padding: 12px 24px; font-weight: 600; font-size: 16px; cursor: pointer; min-height: 48px;
    box-shadow: var(--shadow-sm);
}
.btn-solid:hover { filter: brightness(1.08); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Collapsible settings sections + always-reachable Save */
details.sheet-section > summary.section-head {
    cursor: pointer; list-style: none; user-select: none;
    border-radius: 10px; padding: 4px 6px; margin: -4px -6px 12px;
}
details.sheet-section > summary.section-head::-webkit-details-marker { display: none; }
details.sheet-section > summary.section-head::after {
    content: '\25BE'; color: var(--ink-dim); font-size: 15px; margin-left: 8px;
    transition: transform .18s ease; display: inline-block;
}
details.sheet-section:not([open]) > summary.section-head::after { transform: rotate(-90deg); }
details.sheet-section:not([open]) > summary.section-head { margin-bottom: 0; }
.sheet-foot {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 14px 0 4px;
}

/* Row-based spinner choice editor */
.choice-rows { display: flex; flex-direction: column; gap: 8px; }
.choice-row { display: flex; align-items: center; gap: 8px; }
.choice-row input[type="text"] {
    flex: 1; min-width: 0; min-height: 44px;
    border-radius: 10px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink);
    padding: 8px 12px; font-family: inherit; font-size: 15px; font-weight: 600;
}
.choice-row input[type="color"] { width: 52px; height: 44px; flex-shrink: 0; }
.row-btn {
    appearance: none; font-family: inherit;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink-dim);
    font-size: 16px; font-weight: 800; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.row-btn:hover:not(:disabled) { border-color: var(--primary-ink); color: var(--ink); }
.row-btn:disabled { opacity: 0.35; cursor: default; }
.editor-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.preset-chip {
    appearance: none; font-family: 'Nunito', sans-serif;
    border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink-dim); border-radius: var(--radius-pill);
    padding: 8px 14px; font-size: 14px; font-weight: 800; cursor: pointer; min-height: 40px;
}
.preset-chip:hover { border-color: var(--primary-ink); color: var(--ink); }
.linklike {
    appearance: none; border: none; background: none; cursor: pointer;
    color: var(--primary-ink); font-family: inherit; font-size: 14px; font-weight: 800;
    text-decoration: underline; padding: 8px 4px; margin-left: auto;
}

/* Recent results strip */
.history {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap; margin-top: 20px;
}
.history-label { font-size: 13px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-dim); }
.hist-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: 6px 12px;
    font-weight: 800; font-size: 14px; color: var(--ink);
}
.hist-swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); flex-shrink: 0; }

/* Access-hint quick exit */
.hint-exit {
    appearance: none; font-family: 'Nunito', sans-serif;
    margin-left: auto; flex-shrink: 0;
    border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink); border-radius: var(--radius-pill);
    padding: 8px 14px; font-size: 14px; font-weight: 800; cursor: pointer; min-height: 40px;
}
.hint-exit:hover { border-color: var(--primary-ink); color: var(--primary-ink); }

/* Settings "try it" demos */
.demo-dot {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); border: 2px solid var(--line-strong);
    animation: scanPulse 1.2s ease-in-out infinite;
}
.demo-ring { width: 34px; height: 34px; flex-shrink: 0; transform: rotate(-90deg); }
.demo-ring circle.track { stroke: var(--line-strong); }
.demo-ring circle.fill {
    stroke: var(--accent); stroke-linecap: round;
    stroke-dasharray: 119.4;
    animation: dwellDemo 1.5s linear infinite;
}
@keyframes dwellDemo { from { stroke-dashoffset: 119.4; } to { stroke-dashoffset: 0; } }

/* First-visit access prompt */
.welcome-sheet { max-width: 620px; text-align: center; }
.welcome-sheet h2 { font-size: clamp(25px, 4vw, 32px); margin-bottom: 8px; }
.welcome-sheet > p { color: var(--ink-dim); font-weight: 600; font-size: 15px; margin-bottom: 20px; }
.welcome-grid { display: grid; gap: 10px; }
.welcome-tile {
    appearance: none; font-family: 'Nunito', sans-serif;
    display: flex; align-items: center; gap: 16px; text-align: left;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 16px; padding: 16px 18px; cursor: pointer; color: var(--ink);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.welcome-tile:hover { transform: translateY(-2px); border-color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }
.welcome-tile .tile-title { display: block; font-family: 'Fredoka', sans-serif; font-size: 19px; font-weight: 600; }
.welcome-tile .tile-desc { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--ink-dim); line-height: 1.4; }
.welcome-ico {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 15px;
    display: grid; place-items: center;
    border: 1px solid var(--line-strong);
}
.welcome-ico .ico { width: 26px; height: 26px; }
.welcome-ico.touch { color: var(--touch); background: color-mix(in srgb, var(--touch) 16%, transparent); }
.welcome-ico.switch { color: var(--switch); background: color-mix(in srgb, var(--switch) 16%, transparent); }
.welcome-ico.gaze { color: var(--gaze); background: color-mix(in srgb, var(--gaze) 16%, transparent); }

/* Full screen: keep the app centered and scrollable */
html:fullscreen { overflow-y: auto; }
html:fullscreen body { display: block; }

/* Plain text inputs in settings fields */
.field > input[type="text"] {
    width: 100%; min-height: 44px;
    border-radius: 10px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink);
    padding: 8px 12px; font-family: inherit; font-size: 15px; font-weight: 600;
}

/* Saved profiles */
.profile-row { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-row select {
    flex: 1; min-width: 160px; min-height: 48px;
    border-radius: 12px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 15px; font-weight: 700; padding: 0 12px; cursor: pointer;
}

.fav-btn {
    appearance: none; font-family: 'Nunito', sans-serif;
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line-strong); background: var(--surface-2);
    color: var(--ink-dim); border-radius: var(--radius-pill);
    padding: 10px 18px; font-size: 14px; font-weight: 800;
    cursor: pointer; min-height: 48px;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.fav-btn:hover { border-color: var(--primary-ink); color: var(--ink); }
.fav-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ============ Pagination (fit.js) ============
   When a region holds more than fits, it pages instead of scrolling. The
   control is a real button so it is a scan stop and a dwell target — which a
   scrollbar never is.

   A paged region must be a *bounded* box for fit.js to measure overflow
   against, so the attribute carries its own sizing: without min-height:0 it
   would just grow and nothing would ever page. */
/* Specificity note: this has to out-rank `.screen.active .fit-grow`, which sets
   min-height: 0. A region carrying both classes would otherwise collapse to
   nothing and clip its first item. */
.screen.active [data-fit-pages],
[data-fit-pages] {
    flex: 1;
    /* Never collapse to nothing: paging can drop items, but if the region gets
       no height at all then even one item is clipped and there is nothing left
       to page away. The floor forces the flexible furniture around it to give
       first, and if nothing can, fit.js falls back to `.is-tight`. */
    min-height: 92px;
    overflow: hidden;
    container-type: size;
}
body.is-tight .screen.active [data-fit-pages] { min-height: 72px; }
body.big-targets .screen.active [data-fit-pages] { min-height: 132px; }
body.big-targets.is-tight .screen.active [data-fit-pages] { min-height: 96px; }
.fit-pager {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: clamp(8px, calc(1.4 * var(--vh)), 16px); flex-shrink: 0;
}
.fit-pager[hidden] { display: none !important; }
.fit-page-btn {
    appearance: none; font-family: 'Fredoka', sans-serif;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    flex: 1; max-width: 300px; min-height: 54px;
    padding: 12px 24px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--line-strong); background: var(--surface-2);
    color: var(--ink); font-size: 18px; font-weight: 600; cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.fit-page-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }
.fit-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fit-page-status {
    font-weight: 800; font-size: 14.5px; color: var(--ink-dim);
    min-width: 92px; text-align: center;
}
body.big-targets .fit-page-btn { min-height: 66px; font-size: 20px; }
/* On a phone the pager has to fit the width it is given: two comfortable
   buttons and a counter add up to more than a 320px column, and the row was
   spilling off the side — where, with nothing scrolling, it is simply gone. */
@media (max-width: 720px) {
    .fit-pager { gap: 8px; }
    .fit-page-btn { padding: 12px 12px; min-width: 0; }
    .fit-page-status { min-width: 0; font-size: 14px; }
}

/* ============ Tight density ============
   One step, applied by fit.js only when a screen cannot otherwise fit. It takes
   spacing, never target size: every button keeps its 44px minimum, because a
   target too small to hit is worse than a screen with less breathing room. */
body.is-tight .panel { padding: 10px clamp(14px, 2.6vw, 28px); }
body.is-tight .game-head { margin-bottom: 6px; gap: 10px; }
body.is-tight .status { margin-bottom: 6px; gap: 8px; }
body.is-tight .count-row { margin: 2px 0 6px; }
body.is-tight .dice-tray { margin: 4px 0 8px; }
body.is-tight .fit-pager { margin-top: 6px; }
body.is-tight .stage { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
body.is-tight .actions { gap: 10px; }
body.is-tight .btn-big { padding: 12px 26px; font-size: clamp(19px, 2.4vw, 24px); }
body.is-tight .btn-ghost { padding: 12px 22px; font-size: clamp(17px, 2vw, 20px); }
body.is-tight .yz-chooser { margin-bottom: 6px; }
body.is-tight .yz-chooser-help { margin-bottom: 4px; }
body.is-tight .yz-totals { margin-bottom: 6px; }
body.is-tight .history { margin-top: 8px; }
body.is-tight .count-label { display: none; }
body.is-tight .fit-page-btn { min-height: 48px; font-size: 16.5px; }
body.is-tight .back-btn,
body.is-tight .fav-btn { min-height: 44px; padding: 8px 16px; }
body.is-tight .yz-card-wrap { margin-top: 4px; }
body.is-tight .yz-card-toggle { min-height: 44px; padding: 6px 16px; font-size: 15px; }

/* Second and last density step. Everything interactive still clears 44px — the
   only things that give here are spacing and decoration. */
body.is-tighter .panel { padding: 6px clamp(10px, 2vw, 20px); }
body.is-tighter .stage { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
body.is-tighter .game-head { margin-bottom: 4px; gap: 8px; }
body.is-tighter .game-title { font-size: clamp(19px, 2.4vw, 24px); }
body.is-tighter .game-title .em { width: 34px; height: 34px; border-radius: 10px; }
body.is-tighter .status { margin-bottom: 4px; gap: 6px; }
body.is-tighter .status-text { font-size: 16px; }
body.is-tighter .count-row { margin: 0 0 4px; gap: 6px; }
body.is-tighter .dice-tray { margin: 2px 0 4px; gap: 8px; }
body.is-tighter .actions { gap: 8px; }
body.is-tighter .btn-big { padding: 8px 20px; font-size: 18px; min-width: 160px; }
body.is-tighter .btn-ghost { padding: 8px 18px; font-size: 16px; min-width: 130px; }
body.is-tighter .panel::before { display: none; }
body.is-tighter .history { display: none; }