/* EDE Apps and Games (Cale, 2026-10-04) — wide layout only. Games may stray
   from the theme colours (opaque boards, classic number colours). */

@media (min-width: 768px) {
  /* Fixed-size windows (the games): no resize handles, no maximise. */
  /* The game sits dead centre: whatever the grid leaves over is shared evenly. */
  .win--fixed .win__body.shell__main { display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .win--fixed .win__rz,
  .win--fixed .win__controls .win__ctl:nth-child(2) { display: none; }
  /* A game that scales in steps (diggerHQ): edges and maximise come back. */
  .win--fixed.win--scalable .win__rz { display: block; }
  .win--fixed.win--scalable .win__controls .win__ctl:nth-child(2) { display: flex; }

  /* A window that needs you (watchHQ's alarm): its taskbar icon pulses. */
  .taskbar-app--attention { animation: attention 700ms ease-in-out infinite alternate; }
  @keyframes attention { from { box-shadow: 0 0 0 0 var(--accent-glow); } to { box-shadow: 0 0 0 6px var(--accent-glow); background: var(--accent-soft); } }

  /* ── Launcher (taskbar pop-up + dashboards) ─────────────────────── */
  .launcher-popover { width: 340px; }
  .launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 6px; }
  .launcher__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 12px; border-radius: var(--r-card, 8px); text-align: center; }
  @media (hover: hover) { .launcher__item:not(.launcher__item--soon):hover { background: var(--panel-hover); } }
  .launcher__icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, var(--panel-hover), var(--accent-soft)); border: 1px solid var(--accent-border); box-shadow: var(--shadow-sm); }
  .launcher__icon .mdi { color: var(--accent) !important; }
  /* Full-colour app icons (components/app-icon.js, 2026-10-07): the tile is the colour, the symbol white. */
  .launcher__icon.app-icon { border-color: var(--hairline); }
  .launcher__icon.app-icon .mdi { color: var(--app-icon-fg, var(--white)) !important; }
  .launcher__label { font-size: 12px; font-weight: 700; line-height: 1.2; }
  .launcher__soon { font-size: 9.5px; font-style: italic; color: var(--text-tertiary); }
  .launcher__item--soon { cursor: default; opacity: 0.5; }
  /* Running: the line under it, like the taskbar. */
  .launcher__item--running::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

  /* ── Dashboards ─────────────────────────────────────────────────── */
  .launch-home { padding: 16px 18px 22px; max-width: none; display: flex; flex-direction: column; gap: 10px; }
  .launch-home__section { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .launch-home__section .mdi { color: var(--accent) !important; }
  /* Each board at its full width (min-width set in scores-view.js), wrapping onto new rows — never squeezed (Cale, 2026-10-07). */
  .scoreboards { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .scoreboards > .scoreboard { flex: 1 1 0; box-sizing: border-box; }
  .scoreboard { padding: 12px 14px; border-radius: var(--r-card, 8px); background: var(--panel); border: 1px solid var(--hairline); }
  .scoreboard__title { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
  .scoreboard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .scoreboard__row { display: grid; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
  .scoreboard__row--me { background: var(--accent-soft); }
  .scoreboard__rank { font-weight: 800; color: var(--text-tertiary); text-align: center; }
  .scoreboard__rank--1, .scoreboard__rank--2, .scoreboard__rank--3 { color: var(--accent); }
  .scoreboard__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .scoreboard__score { font-weight: 800; font-variant-numeric: tabular-nums; }
  .scoreboard__date { font-size: 11px; color: var(--text-tertiary); text-align: right; }
  .scoreboard__extra { font-size: 12px; text-align: center; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .scoreboard__row--head { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); padding-bottom: 2px; }
  .scoreboard__row--head .scoreboard__extra { font-size: 10px; color: var(--text-tertiary); }
  .scoreboard__empty { font-size: 13px; color: var(--text-tertiary); margin: 4px 0; }
  .scoreboard__mine { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-secondary); }

  /* ── 🏆 button + high-score dialog (2026-10-05) ───────────────── */
  /* Every game's ↻ / 🏆 / toggles: one size, one look. */
  .game-btn { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--hairline); }
  .game-btn--trophy .mdi { color: #ffcb3d !important; }
  .game-btn--off { opacity: 0.4; pointer-events: none; }
  .game-btn--accent .mdi { color: var(--accent) !important; }
  .game-btn--restart .mdi { color: var(--accent) !important; }
  @media (hover: hover) { .game-btn:hover { background: var(--panel-hover); } }
  .game-btn--toggle .mdi { color: var(--text-tertiary) !important; }
  .game-btn--toggle.game-btn--on { background: var(--accent-soft); border-color: var(--accent-border); }
  .game-btn--toggle.game-btn--on .mdi { color: var(--accent) !important; }
  .scores-dialog { max-width: 420px; }
  .scores-dialog--wide { max-width: 600px; width: min(600px, 94vw); }
  .scoreboard__row--head .scoreboard__score { font-size: 10px; text-align: right; }
  .scoreboard__row .scoreboard__score { text-align: right; }
  .scores-dialog__title { display: flex; align-items: center; gap: 8px; }
  .scores-dialog__title .mdi { color: #ffcb3d !important; }
  .scoreboard__tabs { margin-bottom: 8px; }
  .scoreboard .scoreboard, .scores-dialog .scoreboard { background: transparent; border: 0; padding: 0; }

  /* ── Every game's frame (2026-10-05): playfield, then one bottom bar ── */
  .game { display: inline-flex; flex-direction: column; gap: 8px; padding: 10px; align-self: center; width: max-content; }
  /* The standard 480 × 480 stage (Cale, 2026-10-14): scaling.js sizes it; kit/ui.js lays the frame + panels over it. */
  .game__stage { position: relative; align-self: center; line-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; background: #05060c; }
  .game__stage canvas { display: block; }
  .game__stage > .game__ui { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
  .game:fullscreen { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100vw; height: 100vh; max-width: none; padding: 0; gap: 0; background: #000; }
  .game:fullscreen::backdrop { background: #000; }
  .game:fullscreen .game-bar { display: none; }
  .game--idle, .game--idle * { cursor: none !important; }
  /* The bar never widens the game: it takes the playfield's width. */
  .game-bar { width: 0; min-width: 100%; display: flex; flex-direction: column; gap: 6px; }
  /* Three columns, the outer two equal: that puts the stats on the BAR's centre
     line rather than the middle of whatever's left over, and still reserves the
     room so nothing lands on the ticker. Same 5px inset either side as the
     taskbar's clusters (Cale, 2026-10-08). */
  .game-bar__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 5px; }
  .game-bar__stats { display: flex; align-items: center; gap: 14px; }
  .game-bar__btns { display: flex; align-items: center; gap: 6px; }
  /* Three zones (Cale, 2026-10-08): game controls left, stats centre, music right. */
  .game-bar__btns--game { justify-content: flex-start; min-width: 0; }
  .game-bar__btns--music { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .game-bar__btns--music > .lcd { flex: 0 1 190px; min-width: 60px; margin-right: 4px; }
  /* The stats sit on the BAR's centre line, not the centre of whatever space is
     left between two groups of different widths (Cale, 2026-10-08). */
  .game-bar__stats { justify-content: center; white-space: nowrap; }
  /* The ticker: about half the free space, sitting on the right by the buttons (Cale, 2026-10-05). */
  /* Centred under its label, with room so a wide number never spills past the edge. */
  .game-stat { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; min-width: 46px; }
  .game-bar__stats { padding-left: 2px; }
  .game-stat__label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
  .game-stat__value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .game-btn--text { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; }
  /* The music ticker: an old-Winamp LCD (dots in the theme accent on black). */
  .lcd { padding: 3px; border-radius: 5px; background: #000; border: 1px solid var(--hairline); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9); line-height: 0; overflow: hidden; }
  .lcd__canvas { display: block; }
  .game-menu { padding: 4px; min-width: 200px; }
  .game-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: left; }
  .game-menu__item--on { color: var(--accent); }
  .game-menu__item .mdi { color: var(--accent) !important; }
  .game-menu__spacer { width: 16px; }
  @media (hover: hover) { .game-menu__item:hover { background: var(--panel-hover); } }
  /* NES-style overlays over the live playfield. */
  /* The pause menu every game shares (kit/menu.js). */
  @keyframes game-blink { to { visibility: hidden; } }

  /* ── noteHQ (2026-10-05): a plain-text notepad ──────────────────── */
  .note { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .note__menu-anchor { position: absolute; width: 0; height: 0; }
  .note__toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
  .note__tool { width: 32px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
  .note__tool .mdi { color: var(--text-secondary) !important; }
  @media (hover: hover) { .note__tool:hover { background: var(--panel-hover); } .note__tool:hover .mdi { color: var(--accent) !important; } }
  .note__tool--off { opacity: 0.35; pointer-events: none; }
  .note__sep { width: 1px; height: 18px; margin: 0 6px; background: var(--hairline); }
  .note__text { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; border: 0; outline: none; padding: 12px 14px; background: transparent; color: var(--text); font: 14px/1.5 ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
  .note__footer { display: flex; justify-content: space-between; gap: 12px; padding: 4px 12px; border-top: 1px solid var(--hairline); font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
  .note__status-right { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note__bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-border); font-size: 13px; }
  .note__bar[hidden] { display: none; }
  .note__bar-text { flex: 1; }
  .note__find { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--hairline); }
  .note__find[hidden], .note__find-row[hidden] { display: none; }
  .note__find-row { display: flex; align-items: center; gap: 6px; }
  .note__find-input { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; }
  .note__find-case { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
  .note__find-count { font-size: 12px; color: var(--text-tertiary); min-width: 64px; }
  .note-menu { padding: 4px; min-width: 190px; }
  .note-menu__item { display: flex; justify-content: space-between; gap: 18px; width: 100%; padding: 7px 10px; border-radius: 7px; font-size: 13px; text-align: left; color: var(--text); }
  @media (hover: hover) { .note-menu__item:hover { background: var(--panel-hover); } }
  .note-menu__item--off { opacity: 0.4; }
  .note-menu__item--danger { color: var(--danger); }
  .note-menu__keys { color: var(--text-tertiary); font-size: 12px; }
  .note-menu__sep { height: 1px; margin: 4px 6px; background: var(--hairline); }
  /* The pretend file explorer (Open / Save As). */
  .explorer { width: min(720px, 92vw); max-width: none; }
  .explorer__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin-bottom: 8px; }
  .explorer__title .mdi { color: var(--accent) !important; }
  .explorer__path { padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--hairline); font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; }
  .explorer__panes { display: grid; grid-template-columns: 190px 1fr; gap: 8px; height: 320px; }
  .explorer__folders, .explorer__files { overflow-y: auto; border-radius: 8px; border: 1px solid var(--hairline); background: var(--panel); padding: 4px; }
  .explorer__folder { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 7px; font-size: 13px; text-align: left; color: var(--text); }
  .explorer__folder .mdi { color: var(--accent) !important; }
  .explorer__folder--on { background: var(--accent-soft); }
  @media (hover: hover) { .explorer__folder:hover, .explorer__row:not(.explorer__row--head):hover { background: var(--panel-hover); } }
  .explorer__row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 7px; font-size: 13px; text-align: left; color: var(--text); }
  .explorer__row--head { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 4px; padding-bottom: 4px; }
  .explorer__row--on { background: var(--accent-soft) !important; }
  .explorer__file { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .explorer__file span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .explorer__file .mdi { color: var(--text-secondary) !important; }
  .explorer__meta { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .explorer__empty { padding: 12px; font-size: 13px; color: var(--text-tertiary); }
  .explorer__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .explorer__name { flex: 1; min-width: 0; }
  .explorer__hint { flex: 1; font-size: 12px; color: var(--text-tertiary); }
  .explorer-prompt { width: min(380px, 92vw); }
  .explorer-prompt .input { width: 100%; margin: 6px 0 12px; }

  /* ── calcHQ ─────────────────────────────────────────────────────── */
  .calc { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px; box-sizing: border-box; }
  /* The number window: an inset screen (Cale, 2026-10-05). */
  .calc__display { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 12px 8px; min-height: 84px; justify-content: space-between; border-radius: var(--r-card, 8px); background: color-mix(in srgb, var(--background) 85%, transparent); border: 1px solid var(--hairline); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35); }
  .calc__expr { min-height: 18px; font-size: 14px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .calc__value { font-size: 40px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: right; cursor: copy; }
  .calc__value--error { font-size: 22px !important; color: var(--danger); }
  .calc__copied { position: absolute; top: 8px; left: 12px; font-size: 11px; font-weight: 700; color: var(--accent); }
  .calc__keys { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 8px; }
  .calc__key { border-radius: var(--r-card, 8px); background: var(--panel); border: 1px solid var(--hairline); font-size: 20px; font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--text); }
  .calc__key .mdi { color: inherit !important; }
  @media (hover: hover) { .calc__key:hover { background: var(--panel-hover); } }
  .calc__key--fn { color: var(--text-secondary); }
  .calc__key--op { color: var(--accent); background: var(--accent-soft); }
  .calc__key--eq { background: var(--accent); color: var(--on-accent); border-color: transparent; }
  .calc__key--pressed { transform: scale(0.94); }

  /* ── watchHQ (livelier, 2026-10-05) ────────────────────────────── */
  .watch { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 14px; box-sizing: border-box; transition: box-shadow 300ms; }
  .watch--ringing { animation: watch-glow 900ms ease-in-out infinite alternate; }
  @keyframes watch-glow { from { box-shadow: inset 0 0 0 0 var(--accent-glow); } to { box-shadow: inset 0 0 40px 4px var(--accent-glow); } }
  .watch__tabs { flex-shrink: 0; border-radius: 999px; }
  .watch__tabs .segmented__option { border-radius: 999px; }
  .watch__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .watch__view { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .watch__readout { font-size: 44px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .watch__readout--dial, .watch__readout--timer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-size: 30px; font-weight: 600; text-shadow: 0 0 18px var(--accent-glow); }
  .watch__readout--ringing { color: var(--accent); font-size: 22px; font-weight: 800; animation: attention-text 600ms ease-in-out infinite alternate; }
  @keyframes attention-text { from { opacity: 1; } to { opacity: 0.45; } }
  /* Stopwatch dial: ticks + a ring sweeping once a minute. */
  .watch__dial, .watch__ring-box { position: relative; width: 200px; height: 200px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle, var(--panel) 0 62%, transparent 63%); }
  .watch__ticks { position: absolute; inset: 6px; border-radius: 50%; background: repeating-conic-gradient(var(--text-tertiary) 0 0.6deg, transparent 0.6deg 6deg); -webkit-mask: radial-gradient(circle, transparent 82px, #000 83px); mask: radial-gradient(circle, transparent 82px, #000 83px); opacity: 0.5; }
  .watch__sweep, .watch__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent) var(--pct, 0%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 90px, #000 91px); mask: radial-gradient(circle, transparent 90px, #000 91px); filter: drop-shadow(0 0 6px var(--accent-glow)); }
  .watch__ring { background: conic-gradient(from 0deg, var(--accent) var(--pct, 100%), var(--panel) 0); -webkit-mask: radial-gradient(circle, transparent 84px, #000 85px); mask: radial-gradient(circle, transparent 84px, #000 85px); }
  .watch__ring-box--ringing .watch__ring { animation: ring-pulse 700ms ease-in-out infinite alternate; }
  @keyframes ring-pulse { from { transform: scale(1); filter: drop-shadow(0 0 4px var(--accent-glow)); } to { transform: scale(1.04); filter: drop-shadow(0 0 16px var(--accent)); } }
  /* Big round buttons (phone-clock style). */
  .watch__row { display: flex; gap: 10px; width: 100%; max-width: 300px; }
  .watch__row--round { justify-content: space-between; }
  .watch__round { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--panel); border: 2px solid var(--hairline); color: var(--text); }
  .watch__round:disabled { opacity: 0.4; cursor: default; }
  .watch__round--go { background: color-mix(in srgb, #2ecc71 22%, transparent); border-color: color-mix(in srgb, #2ecc71 55%, transparent); color: #6ff0a4; }
  .watch__round--stop { background: color-mix(in srgb, #ff5252 22%, transparent); border-color: color-mix(in srgb, #ff5252 55%, transparent); color: #ff9a9a; }
  .watch__btn { flex: 1; }
  /* Laps: a bar each, relative to the slowest; the fastest in the accent. */
  .watch__laps { width: 100%; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
  .watch__lap { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--hairline); font-size: 13px; font-variant-numeric: tabular-nums; }
  .watch__lap-n { color: var(--text-secondary); }
  .watch__lap-track { height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden; }
  .watch__lap-bar { display: block; height: 100%; border-radius: 3px; background: var(--text-tertiary); }
  .watch__lap--best .watch__lap-bar { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
  .watch__lap--worst .watch__lap-bar { background: color-mix(in srgb, #ff5252 70%, transparent); }
  .watch__lap-total { color: var(--text-tertiary); font-size: 11px; }
  .watch__lap--best .watch__lap-t { color: var(--accent); font-weight: 700; }
  .watch__setter { display: flex; gap: 8px; }
  .watch__unit { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); }
  .watch__field { width: 56px; text-align: center; padding: 6px; -moz-appearance: textfield; appearance: textfield; }
  .watch__field::-webkit-inner-spin-button, .watch__field::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .watch__presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .watch__preset { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); }
  @media (hover: hover) { .watch__preset:hover { background: var(--accent); color: var(--on-accent); } }
  .watch__stop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 300px; width: 100%; }
  .watch__stop[hidden], .watch__setter[hidden], .watch__presets[hidden] { display: none; }

  /* ── mineHQ ─────────────────────────────────────────────────────── */

  /* ── blockHQ ─────────────────────────────────────────────────────── */
  .block__canvas, .alien__canvas { display: block; }
  .block__layout { display: flex; gap: 12px; align-items: flex-start; }
  .block__side { display: flex; flex-direction: column; gap: 4px; width: 80px; line-height: normal; }
  .block__label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 6px; }
  .block__mini { display: block; border-radius: 6px; }
  .block__num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

  /* ── alienHQ: lives as little bobbing ships ──────────────────────── */
  /* Up to 5 lives: three on top, the other two centred under them, all under the label. */
  .alien__lives { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 4px; width: 56px; min-height: 16px; }
  .alien__life { display: block; animation: life-bob 1.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px #36c8ff); }
  .alien__life canvas { display: block; }
  .alien__life--new { animation: life-in 600ms cubic-bezier(.2, 1.6, .4, 1) both, life-bob 1.2s ease-in-out 600ms infinite alternate; }
  .alien__life--lost { animation: life-lost 700ms ease-in forwards; }
  @keyframes life-bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
  @keyframes life-in { from { transform: translateY(-30px) scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes life-lost { 0%, 40% { filter: drop-shadow(0 0 6px #ff3b5c) brightness(2) hue-rotate(160deg); } 100% { transform: translateY(24px) rotate(90deg); opacity: 0; } }

  /* ── diggerHQ ──────────────────────────────────────────────────── */
  .digger__caption { position: absolute; left: 12px; bottom: 10px; font: 800 13px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55); text-shadow: 0 1px 0 #000; pointer-events: none; opacity: 0; transition: opacity 900ms ease; }
  .digger__caption--in { opacity: 1; }

  /* ── snakeHQ ────────────────────────────────────────────────────── */
  .snake__combo { color: #ffd23f; }
}

/* noteHQ printing: only the note, as plain text. */
.note-print { display: none; }
@media print {
  body.printing-note > *:not(.note-print) { display: none !important; }
  body.printing-note .note-print { display: block; color: CanvasText; background: Canvas; font: 11pt/1.45 ui-monospace, Menlo, Consolas, monospace; }
  body.printing-note .note-print h1 { font: 700 13pt system-ui, sans-serif; margin: 0 0 10pt; }
  body.printing-note .note-print pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; }
}

@media all { .scoreboard__badge { width: 9px; height: 13px; margin-left: 5px; vertical-align: -2px; image-rendering: pixelated; } }