:root {
  color-scheme: light;
  --bg: #eff5f7; --surface: #fcfdfd; --raised: #e4eef3; --ink: #1b2a3a;
  --muted: #536778; --line: #b6c9d3; --accent: #175c97; --on-accent: #ffffff;
  --art-line: #88afc5; --smoke: #648fa7; --scrim: #182e47cc;
  --font-title: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;
  --font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --font-number: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2,.7,.2,1); --fast: 120ms; --base: 240ms;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --radius: 12px; --scene-change: 450ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101d2c; --surface: #182a3b; --raised: #233d51; --ink: #ecf4f8;
  --muted: #b1c6d4; --line: #547083; --accent: #97d4fa; --on-accent: #122a3c;
  --art-line: #547c92; --smoke: #b8d5e4; --scrim: #081320dd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101d2c; --surface: #182a3b; --raised: #233d51; --ink: #ecf4f8;
    --muted: #b1c6d4; --line: #547083; --accent: #97d4fa; --on-accent: #122a3c;
    --art-line: #547c92; --smoke: #b8d5e4; --scrim: #081320dd;
  }
}
:root[data-scene="B"] {
  color-scheme: dark;
  --bg: #0d1828; --surface: #142438; --raised: #25374b; --ink: #f7f0df;
  --muted: #c7bca5; --line: #8e8066; --accent: #ddc18e; --on-accent: #142438;
  --art-line: #b89a62; --smoke: #e8dbc4; --scrim: #081320dd;
}
:root[data-scene="D"] {
  color-scheme: light;
  --bg: #e8e6e0; --surface: #f8f6f0; --raised: #dedbd3; --ink: #22262a;
  --muted: #505152; --line: #777673; --accent: #22262a; --on-accent: #f8f6f0;
  --art-line: #22262a; --smoke: #505152; --scrim: #22262acc;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button:active:not(:disabled) { transform: translateY(1px); }
a { color: var(--ink); }
[hidden] { display: none !important; }
.game { position: relative; width: min(100%, 460px); margin: 0 auto; background: var(--surface); min-height: 100svh; padding: 0 var(--s6); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: max(var(--s2), env(safe-area-inset-top)); }
.utilities { display: flex; gap: var(--s1); }
.text-button, .icon-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; font-size: .75rem; background: none; border: 0; padding: var(--s2); text-decoration: none; white-space: nowrap; }
.text-button { padding-left: 0; text-decoration: underline; text-underline-offset: 4px; }
.text-button:hover, .icon-button:hover { color: var(--accent); }
.title-row { display: flex; justify-content: space-between; align-items: end; gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.eyebrow { font-size: .75rem; letter-spacing: .12em; margin: 0 0 var(--s2); color: var(--muted); }
h1, h2, .design-title { font-family: var(--font-title); font-weight: 600; }
h1 { font-size: clamp(2rem, 8vw, 2.65rem); line-height: 1.35; margin: 0; letter-spacing: .05em; overflow-wrap: anywhere; }
.round-time { margin: 0 0 var(--s1); text-align: right; white-space: nowrap; }
.round-time span { font: 1.5rem var(--font-number); font-variant-numeric: tabular-nums; }
.round-time small { font-size: .75rem; padding-left: var(--s1); }
.scoreboard { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s3); }
.scoreboard > div { display: flex; flex-direction: column; }
.caption { font-size: .75rem; color: var(--muted); letter-spacing: .04em; }
.scoreboard strong { font: 3rem/1.2 var(--font-number); font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.scoreboard .pending { text-align: right; }
.pending strong { font-size: 1.65rem; line-height: 2.1; letter-spacing: -.03em; color: var(--muted); }
.stage { position: relative; height: clamp(242px, 35svh, 330px); margin: var(--s2) calc(-1 * var(--s6)) 0; overflow: hidden; }
.scene-art { position: absolute; inset: 0; background-image: url("assets/scenes.webp"); background-size: 306% auto; background-repeat: no-repeat; opacity: 0; transition: opacity var(--scene-change) var(--ease); }
.scene-a { background-position: 0% 50%; }
.scene-b { background-position: 50% 50%; }
.scene-d { background-position: 100% 50%; }
:root[data-scene="A"] .scene-a, :root[data-scene="B"] .scene-b, :root[data-scene="D"] .scene-d { opacity: 1; }
:root[data-scene="D"] .scene-art { transition: none; }
:root[data-scene="D"] .stage-line { opacity: 0; }
:root[data-scene="B"] .stage-line { border-color: var(--art-line); }
.stage-index { position: absolute; left: var(--s6); top: var(--s6); font-size: .75rem; color: var(--muted); background: var(--surface); writing-mode: vertical-rl; letter-spacing: .3em; z-index: 1; }
.stage-line { position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; left: 24%; top: var(--s6); }
.stage-line::after { content: ""; position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; left: -12%; top: 9%; }
.character { position: absolute; width: 340px; aspect-ratio: 1; bottom: -28px; left: calc(50% - 158px); background-image: url("assets/expressions.webp"); background-size: 300% 200%; background-position: 0% 0%; background-repeat: no-repeat; transform-origin: 50% 80%; transition: transform var(--base) var(--ease); }
.comic-character { position: absolute; width: 340px; aspect-ratio: 1; bottom: -28px; left: calc(50% - 158px); background: url("assets/cough-comic.webp") center bottom / cover no-repeat; opacity: 0; pointer-events: none; }
.cough-word { position: absolute; top: var(--s3); left: var(--s4); margin: 0; font-family: var(--font-body); font-size: 3rem; font-weight: 900; line-height: 1.2; color: var(--ink); transform: rotate(-8deg); opacity: 0; pointer-events: none; }
:root[data-scene="D"][data-comic="ready"] .character { opacity: 0; }
:root[data-scene="D"][data-comic="ready"] .comic-character, :root[data-scene="D"] .cough-word { opacity: 1; }
:root[data-scene="D"] .comic-character { animation: cough .22s ease-out 5; }
:root[data-scene="D"] .stage-index, :root[data-scene="D"] .gain { visibility: hidden; }
.character.inhaling { transform: translateY(-3px) scale(1.025, 1.04); }
.character.warning { animation: pressure .28s ease-in-out infinite; }
.character.coughing { animation: cough .22s ease-out 5; }
.character.exhaling { transform: translate(-2px, 2px) scale(.99, .98); }
@keyframes pressure { 0%,100% { transform: translate(0,-3px); } 50% { transform: translate(1px,-4px); } }
@keyframes cough { 0%,100% { transform: translate(0,0) rotate(0deg); } 35% { transform: translate(-5px,3px) rotate(-2deg); } 70% { transform: translate(3px,0) rotate(1deg); } }
#smoke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mood { position: absolute; left: var(--s6); bottom: var(--s6); margin: 0; background: var(--surface); padding: var(--s1) var(--s2); border-left: 1px solid var(--art-line); font-family: var(--font-title); font-size: 1.1rem; z-index: 1; max-width: calc(100% - 48px); }
.stage-caption { position: absolute; top: var(--s4); right: var(--s6); font-family: var(--font-title); font-size: .75rem; letter-spacing: .18em; color: var(--muted); background: var(--surface); writing-mode: vertical-rl; }
.gain { position: absolute; left: var(--s6); top: var(--s2); margin: 0; font: bold 1.15rem var(--font-number); color: var(--ink); opacity: 0; pointer-events: none; background: var(--surface); padding: var(--s1) var(--s2); white-space: nowrap; }
.gain.show { animation: gain .95s var(--ease) both; }
@keyframes gain { 0% { opacity: 0; transform: translateY(12px); } 15%,70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }
.asset-error { position: absolute; inset: 30% 12% auto; text-align: center; font-size: .875rem; background: var(--surface); padding: var(--s4); }
.controls { position: relative; padding-top: var(--s4); border-top: 1px solid var(--line); }
.gauge-label, .gauge-scale, .bottom-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.gauge-label { font-size: .875rem; margin-bottom: var(--s2); }
.gauge-label span, .bottom-row b { font-family: var(--font-number); font-variant-numeric: tabular-nums; }
.gauge { position: relative; height: 14px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; }
.gauge-fill { height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.ideal-mark, .limit-mark { position: absolute; left: 72%; top: 0; bottom: 0; border-left: 2px solid var(--surface); }
.limit-mark { left: 88%; border-left-style: dashed; }
.gauge-scale { margin: var(--s1) 0 var(--s4); font-size: .75rem; color: var(--muted); gap: var(--s1); }
.gauge-scale span:nth-child(2) { text-align: center; }
.gauge-scale span:last-child { text-align: right; }
.hold, .secondary { width: 100%; min-height: 72px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); padding: var(--s3) var(--s4); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform var(--fast) var(--ease); }
.hold > span { display: block; font-family: var(--font-title); font-size: 1.35rem; letter-spacing: .08em; white-space: nowrap; }
.hold small { font-size: .75rem; display: block; margin-top: var(--s1); }
.hold.is-held { transform: translateY(2px); }
.hold:hover:not(:disabled) { opacity: .92; }
.instruction { text-align: center; font-size: .75rem; margin: var(--s3) 0 var(--s1); color: var(--muted); }
.bottom-row { font-size: .75rem; color: var(--muted); flex-wrap: wrap; }
.colophon { margin-top: var(--s8); padding: var(--s4) 0 max(var(--s6), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted); }
.colophon p { margin: 0; }
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.credit a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.credit a:hover { color: var(--accent); }
.notice { font-size: .6875rem; line-height: 1.7; margin-top: var(--s1) !important; }
.overlay { position: fixed; inset: 0; z-index: 5; background: var(--scrim); display: grid; place-items: center; padding: var(--s6); overflow-y: auto; }
.sheet { width: min(100%, 400px); background: var(--surface); padding: var(--s8) var(--s6); border: 1px solid var(--line); border-radius: var(--radius); }
.sheet h2 { font-size: 2rem; margin: var(--s2) 0 var(--s6); }
.sheet p { font-size: .875rem; }
#result-score { font: 4rem/1.3 var(--font-number); font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
#result > span { padding-left: var(--s2); }
dl { margin: var(--s6) 0; border-top: 1px solid var(--line); }
dl > div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
dd { margin: 0; font-family: var(--font-number); }
.secondary { min-height: 56px; font-family: var(--font-title); font-size: 1.15rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.design-page { max-width: 1040px; padding: var(--s6); margin: auto; }
.design-title { font-size: clamp(2rem,6vw,3.2rem); line-height: 1.4; margin: var(--s6) 0; }
.design-page p { max-width: 42em; }
.concept-board { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.design-page h2 { margin-top: var(--s8); }
.motion-list { border-top: 1px solid var(--line); }
.motion-list a { min-height: 64px; padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); text-decoration: none; }
.motion-list small { color: var(--muted); }
.return-link { display: inline-flex; min-height: 56px; align-items: center; margin-top: var(--s6); }
@media (max-width: 360px) { .game { padding-inline: var(--s4); } .stage { margin-inline: calc(-1 * var(--s4)); } .gauge-scale { font-size: .75rem; } h1 { letter-spacing: 0; font-size: 1.65rem; } .round-time span { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .gain.show { opacity: 1; } }