/* Bonus page: Bug hunt (loaded only on /bonus/, after site.css) */

.bonus-wrap { padding-block: clamp(40px, 6vw, 80px); }
.bonus .kicker { color: var(--accent); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.bonus .kicker .icon { width: 16px; height: 16px; }
.bonus h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -.045em; }
.bonus-lead { max-width: 60ch; margin-top: 14px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* The game: a HUD bar and the canvas stage with its start, end and pause panels */
.game { margin-top: clamp(24px, 4vw, 40px); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-solid); overflow: hidden; box-shadow: var(--shadow); }
.game-hud { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); padding: 12px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.game-hud > span { display: grid; gap: 2px; }
.game-hud > span:nth-child(3) { margin-left: auto; }
.game-hud small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.game-hud b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.game-combo { font-size: 18px; font-weight: 600; color: var(--accent); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s var(--ease); }
.game-combo.is-on { opacity: 1; transform: none; }
.game-lives { display: flex; gap: 6px; padding-top: 5px; }
.game-lives i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transition: background-color .3s, opacity .3s, transform .3s var(--ease); }
.game-lives i.is-lost { background: var(--danger); opacity: .35; transform: scale(.8); }

.game-stage { position: relative; height: clamp(420px, 62vh, 560px); }
.game-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* while playing, a touch on the stage squashes instead of scrolling */
.game-stage.is-playing canvas { touch-action: none; cursor: crosshair; }
.game-panel {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center;
    background: color-mix(in srgb, var(--surface-solid) 84%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.game-panel[hidden] { display: none; }
.game-title { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; }
.game-title .icon { width: 1em; height: 1em; color: var(--accent); }
.game-note { max-width: 46ch; color: var(--muted); }
.game-best { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.game-best b { color: var(--text); font-weight: 500; }
.game-result { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.game-rank { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; }
.game-score b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: var(--accent); }
.game-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

.bonus-how { max-width: 72ch; margin-top: clamp(32px, 5vw, 56px); }
.bonus-how h2 { margin-bottom: 14px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.bonus-how ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bonus-how li { position: relative; padding-left: 22px; color: var(--muted); }
.bonus-how li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--accent); }

@media (max-width: 600px) {
    .game-hud { padding: 10px 14px; }
    .game-hud b, .game-combo { font-size: 16px; }
    .game-stage { height: 64vh; min-height: 380px; }
}