:root {
  color-scheme: dark;
  --bg: #141c23; --panel: #22303b; --panel-hi: #2f414e; --edge: #0c1217; --ink: #eef3f6; --muted: #a3b3bf; --line: #3b4b58;
  --signal: #f2b705; --signal-lo: #a87c00; --signal-ink: #1a1404; --rust: #d0672f; --steel: #d5dfe6;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100dvh; background: radial-gradient(120% 34rem at 50% 0%, #2c3d49 0%, #18222b 60%, #141c23 100%) no-repeat var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--text); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Buttons you can feel: a hard lower edge that sinks when pressed. */
.btn, .seg, .toggle, .round, .job { border: 0; border-radius: 0.625rem; background: var(--panel-hi); box-shadow: 0 0.25rem 0 var(--edge); transition: transform 0.06s, box-shadow 0.06s; }
.btn:active, .seg:active, .toggle:active, .round:active, .job:not(:disabled):active { transform: translateY(0.1875rem); box-shadow: 0 0.0625rem 0 var(--edge); }
.btn { min-height: 3.25rem; padding: 0 1.25rem; font: 700 1.3125rem/1 var(--display); letter-spacing: 0.02em; }
.btn-main, .seg[aria-pressed='true'], #install { background: var(--signal); color: var(--signal-ink); box-shadow: 0 0.25rem 0 var(--signal-lo); }
.btn-main:active, .seg[aria-pressed='true']:active, #install:active { box-shadow: 0 0.0625rem 0 var(--signal-lo); }

#menu { max-width: 30rem; margin: 0 auto; padding: calc(1.25rem + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom)); }
.mast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { margin: 0; font: 700 2.375rem/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--rust); background: linear-gradient(100deg, #b4541f 0%, #de7a3c 28%, #8a3a12 47%, #f4f8fa 53%, #b9c6cf 76%, #eef3f6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.badge { margin: 0; padding: 0.4375rem 0.75rem; border-radius: 99rem; background: var(--edge); font: 700 1.1875rem/1 var(--display); white-space: nowrap; }
.star, .pips, .job-stars, .sheet-stars .on { color: var(--signal); }
.stripes { height: 0.5rem; margin: 0.875rem 0 1rem; border-radius: 0.125rem; background: repeating-linear-gradient(-45deg, var(--signal) 0 0.625rem, var(--signal-ink) 0.625rem 1.25rem); }
.btn-big { display: grid; gap: 0.3125rem; width: 100%; min-height: 4.75rem; padding: 0.75rem 1.25rem; font-size: 1.875rem; text-align: center; }
.btn-big small { font: 600 0.9375rem/1.2 var(--text); letter-spacing: 0; }
.shelf { margin: 1.5rem 0 0.625rem; font: 700 1.25rem/1 var(--display); color: var(--muted); }

.jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.job { display: grid; justify-items: center; align-content: start; gap: 0.1875rem; width: 100%; min-height: 7.5rem; padding: 0.625rem 0.25rem 0.5rem; text-align: center; }
.job-no { font: 700 2rem/1 var(--display); color: var(--rust); }
.job.is-done .job-no { color: var(--steel); }
.job-name { font: 600 1.0625rem/1.1 var(--display); }
.job-stars { font-size: 1.0625rem; letter-spacing: 0.06em; line-height: 1.25; }
.job-state { font-size: 0.75rem; line-height: 1.2; color: var(--muted); }
.job-pic { width: 100%; height: 4.25rem; object-fit: contain; }
.job.has-pic .job-no { font-size: 1.125rem; }
.job.is-locked .job-pic { filter: grayscale(1) brightness(0.55); opacity: 0.6; }
.more { margin: 1rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.more .toggle { margin-left: 0.5rem; color: var(--ink); }
.job.is-next { box-shadow: 0 0.25rem 0 var(--edge), inset 0 0 0 0.1875rem var(--signal); }
.job.is-locked { background: var(--panel); cursor: default; }
.job.is-locked .job-no, .job.is-locked .job-name, .job.is-locked .job-state { color: #8696a2; }

.prefs { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }
.toggle { min-height: 2.75rem; padding: 0 0.875rem; font-weight: 500; }
.toggle b { font-weight: 700; color: var(--signal); }
.toggle[aria-pressed='false'] b { color: var(--muted); }
.toggle.is-quiet { background: none; box-shadow: none; color: var(--muted); text-decoration: underline; }
#install { font-weight: 700; }
.credits { margin-top: 1.5rem; color: var(--muted); font-size: 0.8125rem; }
.credits p { margin: 0; }

#game { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: radial-gradient(120% 75% at 50% 42%, #364954 0%, #1d2932 58%, #10171d 100%); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#game.is-hand #view { cursor: grab; }
.aim { position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.55); pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.hud { position: absolute; left: 0; right: 0; display: flex; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top { top: 0; align-items: center; gap: 0.625rem; padding: calc(0.625rem + env(safe-area-inset-top)) calc(0.75rem + env(safe-area-inset-right)) 0.625rem calc(0.75rem + env(safe-area-inset-left)); }
.round { flex: none; width: 3rem; height: 3rem; padding: 0 0 0.3125rem; border-radius: 50%; font: 700 2rem/1 var(--display); }
.gauge { flex: 1; min-width: 0; pointer-events: none; }
#jobName { margin: 0 0 0.25rem; font: 700 1.125rem/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.meter { position: relative; height: 1.375rem; border-radius: 99rem; overflow: hidden; background: linear-gradient(90deg, #6e2c0e, #b4541f 35%, #8a3a12 60%, #c26a2a 82%, #7a3210); box-shadow: inset 0 0 0 2px var(--edge); }
.meter i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(180deg, #f4f8fa, #b9c6cf 55%, #dfe7ec); transition: transform 0.18s linear; }
.meter b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 0.9375rem/1 var(--display); color: #fff; text-shadow: 0 1px 0 #000, 0 0 0.25rem #000, 0 0 0.25rem #000; }
.readout { flex: none; display: grid; justify-items: end; gap: 0.1875rem; padding: 0.375rem 0.625rem; border-radius: 0.625rem; background: rgba(12, 18, 23, 0.8); font: 700 1.125rem/1 var(--display); font-variant-numeric: tabular-nums; pointer-events: none; }
.pips { letter-spacing: 0.06em; }
.clock.is-low { color: #ff8a5c; }

.pop { position: absolute; left: 50%; top: 21%; margin: 0; transform: translateX(-50%); font: 700 2.125rem/1 var(--display); color: var(--signal); text-shadow: 0 0.1875rem 0 var(--edge), 0 0 0.75rem rgba(0, 0, 0, 0.6); white-space: nowrap; pointer-events: none; opacity: 0; }
.pop.go { animation: pop 1.3s ease-out both; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, 0.75rem) scale(0.7); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.14); }
  24% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -1.5rem) scale(1); }
}
.tip { position: absolute; left: 50%; bottom: calc(6rem + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: min(22rem, calc(100% - 2rem)); margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.625rem; background: rgba(12, 18, 23, 0.9); font-size: 0.9375rem; line-height: 1.35; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.tip.on { opacity: 1; }
.hud-bottom { bottom: 0; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem calc(0.75rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(0.75rem + env(safe-area-inset-left)); }
.segs { display: flex; gap: 0.4375rem; }
.seg { display: grid; justify-items: center; align-content: center; gap: 0.1875rem; min-width: 4rem; min-height: 3.75rem; padding: 0.375rem 0.625rem; background: rgba(47, 65, 78, 0.94); color: var(--muted); font: 700 0.9375rem/1 var(--display); }
.seg span { font-size: 1.375rem; line-height: 1; }

.veil { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 0.75rem; padding: 2rem; background: #141c23; text-align: center; }
.veil p { margin: 0; font: 700 1.5rem/1.2 var(--display); }
.veil .meter { width: min(16rem, 70vw); height: 0.875rem; }
.veil .quiet { font: 400 1rem/1.4 var(--text); color: var(--muted); max-width: 18rem; }

.sheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 28rem; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 0.375rem solid var(--signal); border-radius: 1rem 1rem 0 0; background: var(--panel); box-shadow: 0 -0.75rem 2rem rgba(0, 0, 0, 0.5); text-align: center; animation: rise 0.28s ease-out both; }
@keyframes rise { from { transform: translateY(100%); } }
.sheet h2 { margin: 0 0 0.25rem; font: 700 1.875rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.sheet-stars { margin: 0 0 0.625rem; font-size: 3.25rem; line-height: 1; letter-spacing: 0.08em; }
.sheet-stars span { display: inline-block; }
.sheet-stars .off { color: var(--edge); }
.sheet-stars .on { text-shadow: 0 0.1875rem 0 var(--signal-lo); animation: starpop 0.45s calc(var(--d) * 0.25s + 0.3s) cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes starpop { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0 0 1rem; }
.stats div { padding: 0.5rem 0.25rem; border-radius: 0.5rem; background: var(--edge); }
.stats dt { font-size: 0.75rem; color: var(--muted); }
.stats dd { margin: 0; font: 700 1.3125rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.sheet-actions .btn-main { grid-column: 1 / -1; min-height: 3.75rem; font-size: 1.5rem; }

#toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); z-index: 5; width: max-content; max-width: calc(100% - 2rem); margin: 0; padding: 0.625rem 0.875rem; border-radius: 0.625rem; background: var(--edge); color: #f1f5f7; font-size: 0.9375rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#err { position: fixed; top: 0; left: 0; right: 0; z-index: 9; margin: 0; padding: calc(0.625rem + env(safe-area-inset-top)) 1rem 0.625rem; background: #7a1d12; color: #fff; font-size: 0.9375rem; }
@media (min-width: 40rem) { #menu { padding-top: 2.5rem; } .sheet { bottom: 1.5rem; border-radius: 1rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }