/* 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; }
  .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; }
  .scoreboards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .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; grid-template-columns: 22px 24px minmax(0, 1fr) auto auto; 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); }
  .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: 400px; }
  .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; }
  .game__stage { position: relative; align-self: center; line-height: 0; }
  .game__stage canvas { display: block; border-radius: 6px; }
  /* 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; }
  .game-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .game-bar__stats { display: flex; align-items: center; gap: 14px; }
  .game-bar__btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  /* The ticker: about half the free space, sitting on the right by the buttons (Cale, 2026-10-05). */
  .game-bar__row > .lcd { flex: 0 1 34%; min-width: 70px; margin-left: auto; }
  .game-bar__row > .lcd + .game-bar__btns { margin-left: 0; }
  /* 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. */
  .game-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-radius: 6px; background: rgba(4, 6, 14, 0.42); color: #fff; text-align: center; font: 800 13px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; text-shadow: 0 2px 0 #000; line-height: normal; }
  .game-overlay[hidden] { display: none; }
  .game-overlay--over, .game-overlay--paused { background: rgba(4, 6, 14, 0.6); }
  .game-overlay__logo { display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
  .game-overlay__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); }
  .game-overlay__key-row { display: flex; align-items: center; gap: 8px; }
  .game-key { min-width: 26px; padding: 3px 8px; border: 2px solid #fff; border-radius: 6px; font-size: 12px; text-align: center; }
  .game-overlay__key-label { font-size: 11px; color: #c9d3e6; }
  .game-overlay__heading { font-size: 28px; color: #ffd23f; letter-spacing: 0.06em; }
  .game-overlay__line { font-size: 14px; color: #e8ecf3; }
  .game-overlay__last { font-size: 18px; color: #ffd23f; letter-spacing: 0.08em; }
  .game-overlay__best { font-size: 12px; color: #9fb3d6; }
  .game-overlay__blink { font-size: 15px; animation: game-blink 1s steps(2, start) infinite; }
  @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; border-radius: 6px; }
  .block__stage { display: flex; gap: 12px; align-items: flex-start; }
  .block__side { display: flex; flex-direction: column; gap: 4px; width: 96px; 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 ──────────────────────── */
  .alien__lives { display: flex; align-items: center; gap: 4px; min-width: 120px; height: 22px; }
  .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: 10px; bottom: 8px; font: 800 10px/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; }

  /* ── 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; }
}
