/* Cube Hop: candy isometric pyramid in deep space. Violet cube sides, an orange creature, a rainbow
   of target colours. Fonts Baloo 2 (display) and Nunito (UI). */
:root {
  --bg: #0a0620; --surface: #1a1040; --surface-2: #241456; --ink: #f5f3ff; --ink-2: #c4b5fd; --line: #3b2a66;
  --accent: #fb923c; --accent-ink: #1a0e02; --ok: #34d399; --warn: #fbbf24; --bad: #f43f5e; --info: #38bdf8;
  --player: #fb923c; --purple: #a78bfa; --font-display: "Baloo 2", "Nunito", system-ui, sans-serif; --font-ui: "Nunito", system-ui, sans-serif;
}
:root[data-theme="light"] { --bg: #ede9fe; --surface: #ffffff; --surface-2: #e0e7ff; --ink: #1e1235; --ink-2: #4c1d95; --line: #c4b5fd; --accent: #ea580c; --accent-ink: #ffffff; --ok: #047857; --warn: #b45309; --bad: #be123c; --info: #0369a1; --player: #ea580c; --purple: #7c3aed; }
body { background: radial-gradient(ellipse 90% 55% at 50% -5%, #2a1656 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 90% 100%, #3b0f3f 0%, transparent 60%), var(--bg); background-attachment: fixed; font-family: var(--font-ui); }
:root[data-theme="light"] body { background: radial-gradient(ellipse 90% 55% at 50% -5%, #ddd6fe 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 90% 100%, #fbcfe8 0%, transparent 60%), var(--bg); background-attachment: fixed; }
/* home */
.arcade-home { gap: var(--s-4); }
.title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 10vw, 3.3rem); line-height: 1; letter-spacing: -.01em; color: var(--player); text-shadow: 0 0 12px rgba(251,146,60,.55), 0 0 40px rgba(167,139,250,.4); margin-top: var(--s-2); }
:root[data-theme="light"] .title { color: #c2410c; text-shadow: 0 0 10px rgba(194,65,12,.2); }
.tagline { font-weight: 700; letter-spacing: .04em; font-size: .82rem; color: var(--ink-2); }
.modes { grid-template-columns: 1fr 1fr; }
.mode { min-height: 58px; padding: 9px 12px; background: color-mix(in oklab, var(--surface) 85%, transparent); border-color: color-mix(in oklab, var(--line) 70%, transparent); backdrop-filter: blur(6px); }
.mode b { font-family: var(--font-display); font-weight: 700; font-size: .84rem; line-height: 1.3; } .mode span { font-size: .75rem; }
.mode[aria-pressed="true"] { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple), 0 0 18px rgba(167,139,250,.45); }
.seg-line [role="radio"] { font-family: var(--font-ui); font-weight: 800; font-size: .9rem; }
.cta { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; box-shadow: 0 0 24px rgba(251,146,60,.4); }
.btn { font-family: var(--font-ui); font-weight: 700; }
.best-line { font-weight: 600; }
/* play */
.play { background: radial-gradient(ellipse 100% 45% at 50% 0%, #221255 0%, transparent 70%), var(--bg); }
:root[data-theme="light"] .play { background: radial-gradient(ellipse 100% 45% at 50% 0%, #ddd6fe 0%, transparent 70%), var(--bg); }
.play .stage { padding: calc(var(--hud-h) + 10px + env(safe-area-inset-top)) 6px calc(14px + env(safe-area-inset-bottom)); }
:root[data-touch="buttons"] .play .stage { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
.play .stage-canvas { border-radius: 10px; box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 0 50px rgba(167,139,250,.14), 0 0 100px rgba(251,146,60,.06); }
:root[data-theme="light"] .play .stage-canvas { box-shadow: 0 0 0 1px rgba(124,58,237,.25), 0 8px 30px rgba(30,18,53,.15); }
.play .hud { gap: 5px; padding-left: 6px; padding-right: 6px; flex-wrap: wrap; }
.play .hud .btn-icon { flex: none; }
.hud-pill { font-family: var(--font-display); font-weight: 700; font-size: .72rem; padding: 0 8px; gap: 5px; height: 30px; white-space: nowrap; background: color-mix(in oklab, #0a0620 75%, transparent); }
:root[data-theme="light"] .hud-pill { background: color-mix(in oklab, #ffffff 85%, transparent); }
.hud-pill small { font-family: var(--font-ui); font-size: .58rem; letter-spacing: .1em; font-weight: 800; }
.hud-score { padding: 0 10px; }
.hud-lives { padding: 0 7px; } #hud-lives { display: inline-flex; gap: 3px; align-items: center; min-width: 10px; min-height: 10px; }
#hud-lives i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--player); box-shadow: 0 0 6px rgba(251,146,60,.7); }
#hud-lives i.inf { width: auto; height: auto; background: none; box-shadow: none; color: var(--player); font-style: normal; }
#hud-lives-pill[data-danger="1"] { box-shadow: 0 0 0 1px var(--bad), 0 0 14px rgba(244,63,94,.55); animation: danger-pulse .9s ease-in-out infinite; }
@keyframes danger-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--bad), 0 0 8px rgba(244,63,94,.3); } 50% { box-shadow: 0 0 0 2px var(--bad), 0 0 20px rgba(244,63,94,.8); } }
:root[data-motion="reduced"] #hud-lives-pill[data-danger="1"] { animation: none; }
.hud-target { padding: 0 8px; gap: 4px; } .hud-target .icon-sm { width: 12px; height: 12px; opacity: .6; }
#hud-target { width: 13px; height: 13px; border-radius: 4px; display: inline-block; box-shadow: 0 0 6px rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.5); }
.controls-row { display: flex; align-items: flex-end; justify-content: center; }
/* hop diamond: a rotated 2x2 grid of 60px buttons so the whole shape reads as a diamond. Sized so its
   rotated bounding box (side x sqrt2) still fits under the pyramid at 360x640. */
/* transform doesn't grow the layout box, so the rotated bbox (side x sqrt2) paints ~24px past the
   diamond's own edges; the extra bottom margin keeps that visual overflow inside the viewport. */
.hop-diamond { position: relative; width: 114px; height: 114px; margin: 0 auto 28px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; transform: rotate(45deg); }
.hd-btn { width: 54px; height: 54px; border-radius: 13px; border: 1px solid color-mix(in oklab, var(--purple) 55%, transparent); background: color-mix(in oklab, var(--surface) 78%, transparent); color: var(--purple); display: grid; place-items: center; touch-action: none; }
.hd-btn span { display: inline-block; transform: rotate(-45deg); font-size: 1.3rem; }
.hd-btn.on { background: var(--player); border-color: var(--player); color: var(--accent-ink); }
.hd-ul { grid-column: 1; grid-row: 1; } .hd-ur { grid-column: 2; grid-row: 1; } .hd-dl { grid-column: 1; grid-row: 2; } .hd-dr { grid-column: 2; grid-row: 2; }
#ready { pointer-events: none; backdrop-filter: none; background: transparent; padding: inherit; place-items: center; }
#ready .stack { gap: 6px; padding: 10px 14px; border-radius: 12px; background: color-mix(in oklab, var(--bg) 82%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--purple) 45%, transparent), 0 0 30px rgba(167,139,250,.25); max-width: 86%; }
.overlay h2 { font-family: var(--font-display); font-weight: 800; color: var(--player); text-shadow: 0 0 12px rgba(251,146,60,.7); }
#ready h2 { font-size: clamp(1rem, 5vw, 1.4rem); letter-spacing: .01em; line-height: 1.3; }
#ready p { font-size: .84rem; color: var(--ink); font-weight: 600; }
:root[data-theme="light"] .overlay h2 { color: #c2410c; text-shadow: none; }
#paused { background: color-mix(in oklab, var(--bg) 75%, transparent); backdrop-filter: blur(4px); }
#paused h2 { font-size: clamp(1.3rem, 6vw, 1.9rem); }
.result-verdict { text-align: center; color: var(--ink-2); font-weight: 600; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--s-2); }
.result-actions .btn-primary { grid-column: 1 / -1; }
.sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.score-total { font-family: var(--font-display); font-weight: 700; color: var(--player); text-shadow: 0 0 18px rgba(251,146,60,.5); }
:root[data-theme="light"] .score-total { color: #c2410c; text-shadow: none; }
@container screen (min-width: 640px) { .arcade-home .modes { grid-template-columns: 1fr 1fr; } }