:root {
  color-scheme: light;
  font-family: Arial, "Malgun Gothic", sans-serif;
  color: #25231f;
  background: #f5f1e8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-weight: 400;
  --ink: #25231f;
  --muted: #89857c;
  --paper: #f5f1e8;
  --orange: #ed6545;
  --line: #e8e2d7;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 52% 41%, rgba(255, 255, 255, .72), transparent 57%),
    var(--paper);
}

button { font: inherit; }

.app {
  width: min(100% - 56px, 1120px);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(37, 35, 31, .1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px 9px 9px 3px;
  background: var(--orange);
  color: #fff9f0;
  font-size: 18px;
  letter-spacing: 0;
  transform: rotate(-5deg);
}

.brand-dot, .title-period { color: var(--orange); }

.build-tag, .eyebrow, .hud-label, .footer-note, .page-footer, .start-kicker {
  font-family: "DM Mono", monospace;
  letter-spacing: .12em;
}

.build-tag {
  color: #989388;
  font-size: 10px;
}

.game-shell {
  width: min(100%, 900px);
  margin: auto;
  padding: 46px 0 38px;
}

.intro { margin: 0 0 25px 2px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  color: #837e73;
  font-size: 10px;
}

.eyebrow-dot, .live-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--orange);
}

h1 {
  margin: 0;
  font-size: clamp(42px, 7.5vw, 74px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.075em;
}

.mobile-break { display: none; }

.intro-copy {
  margin: 14px 0 0;
  color: #77736a;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

.game-card {
  overflow: hidden;
  border: 1px solid rgba(45, 41, 34, .11);
  border-radius: 15px;
  background: rgba(255, 254, 250, .86);
  box-shadow: 0 18px 55px rgba(77, 64, 43, .07);
}

.hud {
  min-height: 79px;
  display: grid;
  grid-template-columns: .5fr 1fr 1fr .75fr .7fr .85fr .85fr;
  align-items: center;
  gap: 13px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}

.game-card.fever-active .hud {
  background-image: linear-gradient(
    105deg,
    rgba(255, 116, 141, .08),
    rgba(255, 185, 110, .08),
    rgba(255, 233, 135, .08),
    rgba(133, 218, 166, .08),
    rgba(119, 184, 239, .08),
    rgba(191, 149, 224, .08)
  );
  background-size: 220% 100%;
  animation: rainbow-hud-flow 6s linear infinite;
}

@keyframes rainbow-hud-flow {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card.fever-active .hud { animation: none; }
}

.hud-stage, .hud-target, .hud-collected, .hud-time, .hud-lives, .hud-umbrella, .hud-fever { display: grid; gap: 6px; }

.hud-label {
  color: #a09a8e;
  font-size: 9px;
}

.target-value {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.stage-value, .time-value {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.time-value.is-low { color: #c84b40; }

.target-swatch {
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ee514b;
  box-shadow: 0 0 0 1px rgba(36, 32, 28, .13);
}

.lives-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
}

.life-heart { color: #ed6545; }
.life-heart.is-lost { color: #ded8cc; }

.umbrella-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.umbrella-icon { color: #438bd1; }
.umbrella-value.is-active { color: #2879c3; }

.umbrella-timer {
  color: #438bd1;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
}

.umbrella-hint {
  display: inline-flex;
  align-items: center;
  color: #89857c;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 9px;
  white-space: nowrap;
}

.umbrella-hint .keycap {
  min-width: 35px;
  height: 17px;
  font-size: 8px;
}

.fever-card-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fever-card-icon {
  display: inline-grid;
  width: 17px;
  height: 21px;
  place-items: center;
  border: 1px solid #d9a94e;
  border-radius: 3px;
  color: #fff8e7;
  background: linear-gradient(145deg, #e9bd65, #cd8c36);
  font-size: 11px;
  box-shadow: 1px 2px 0 #a96e2e;
}

.fever-card-value.is-active { color: #b57a27; }

.fever-timer {
  color: #bf852e;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
}

.fever-hint {
  display: inline-flex;
  align-items: center;
  color: #89857c;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 9px;
  white-space: nowrap;
}

.fever-hint .keycap {
  min-width: 20px;
  height: 17px;
  font-size: 8px;
}

.collected-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

.count-unit {
  margin-left: 4px;
  color: #858075;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.hud-feedback {
  grid-column: 1 / -1;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #eee8dd;
  border-radius: 8px;
  color: #767166;
  background: #faf8f2;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 12px;
  text-align: center;
}

.canvas-wrap {
  position: relative;
  overflow: hidden;
  background-color: #fbf9f3;
  background-image: radial-gradient(#e6dfd2 0.8px, transparent 0.8px);
  background-size: 19px 19px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.help-button {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 11px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(37, 35, 31, .18);
  border-radius: 50%;
  color: #25231f;
  background: rgba(255, 254, 250, .96);
  box-shadow: 0 2px 8px rgba(61, 52, 39, .1);
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
}

.help-button:hover { border-color: var(--orange); color: var(--orange); }
.help-button:focus-visible, .help-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tutorial-panel:not([hidden]) .tutorial-skip { right: 64px; }

.help-dialog {
  width: min(450px, calc(100% - 28px));
  max-width: none;
  max-height: 90vh;
  max-height: min(90dvh, 620px);
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(45, 41, 34, .14);
  border-radius: 15px;
  color: var(--ink);
  background: #fffefa;
  box-shadow: 0 22px 70px rgba(44, 37, 27, .25);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.help-dialog::backdrop { background: rgba(37, 35, 31, .48); backdrop-filter: blur(2px); }
.help-content { position: relative; padding: 25px 24px 23px; }

.help-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #716b60;
  background: transparent;
  cursor: pointer;
  font-size: 27px;
  line-height: 1;
}

.help-close:hover { color: var(--orange); background: #f8f3e9; }
.help-kicker { margin: 0 0 4px; color: #a09a8e; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .13em; }
.help-content h2 { margin: 0 0 15px; font-size: 25px; letter-spacing: -.04em; }
.help-rules { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.help-rules li { position: relative; padding-left: 18px; color: #5f5a51; font-family: "Gowun Dodum", sans-serif; font-size: 13px; line-height: 1.55; }
.help-rules li::before { position: absolute; left: 0; color: var(--orange); content: "•"; font-weight: 800; }
.help-controls { display: grid; gap: 9px; margin: 17px 0; }
.help-controls section { padding: 11px 13px; border: 1px solid #eee8dd; border-radius: 9px; background: #faf8f2; }
.help-controls h3 { margin: 0 0 5px; color: var(--orange); font-size: 12px; }
.help-controls p { margin: 3px 0; color: #69645b; font-family: "Gowun Dodum", sans-serif; font-size: 12px; line-height: 1.5; }
.help-controls kbd { padding: 2px 5px; border: 1px solid #e3ddd1; border-radius: 4px; color: #555148; background: #fffefa; font: 10px "DM Mono", monospace; }
.help-tutorial { min-height: 44px; }

.touch-hint { display: none; }
body.touch-controls .keyboard-hint { display: none; }
body.touch-controls .touch-hint { display: inline; }

.canvas-wrap.fever-active {
  box-shadow: inset 0 0 0 4px rgba(219, 148, 196, .55), inset 0 0 35px rgba(147, 182, 225, .15);
}

.debug-panel {
  position: absolute;
  z-index: 6;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  max-height: 132px;
  overflow: hidden;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  color: #f8f5ed;
  background: rgba(32, 31, 29, .82);
  font: 9px/1.45 "DM Mono", monospace;
  white-space: pre-wrap;
  pointer-events: none;
}

.debug-panel[hidden] { display: none; }

.fever-banner {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(185, 128, 37, .34);
  border-radius: 999px;
  color: #9c641b;
  background: rgba(255, 248, 222, .92);
  box-shadow: 0 4px 14px rgba(137, 94, 27, .12);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  transform: translateX(-50%);
  pointer-events: none;
}

.fever-banner[hidden] { display: none; }
.fever-banner span { color: #76603b; font-variant-numeric: tabular-nums; }

canvas {
  width: 100%;
  height: clamp(290px, 43vw, 430px);
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.start-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(250, 248, 242, .42);
  backdrop-filter: blur(2px);
  transition: opacity .2s ease, visibility .2s ease;
}

.start-overlay.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.start-card {
  width: min(320px, calc(100% - 36px));
  padding: 25px 22px 22px;
  border: 1px solid rgba(45, 41, 34, .12);
  border-radius: 12px;
  background: rgba(255, 254, 250, .96);
  box-shadow: 0 15px 40px rgba(61, 52, 39, .12);
  text-align: center;
}

.start-icon {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  font-size: 20px;
  font-weight: 700;
}

.start-kicker {
  margin: 0 0 9px;
  color: #a09a8e;
  font-size: 8px;
}

.start-card h2 {
  margin: 0;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 21px;
  font-weight: 700;
}

.start-card > p:not(.start-kicker) {
  margin: 7px 0 17px;
  color: #89847a;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 12px;
}

.start-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 12px 16px;
  border: 0;
  border-radius: 7px;
  color: white;
  background: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: background .15s ease, transform .15s ease;
}

.start-button:hover { background: var(--orange); }
.start-button:active { transform: translateY(1px); }
.start-button:disabled { opacity: .55; cursor: wait; }

.start-button:focus-visible {
  outline: 3px solid #ed6545;
  outline-offset: 3px;
}

.game-footer {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  border-top: 1px solid var(--line);
}

.controls-hint {
  margin: 0;
  color: #77736a;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 11px;
}

.sound-toggle {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #e3ddd1;
  border-radius: 6px;
  color: #555148;
  background: #fffefa;
  cursor: pointer;
  font-size: 10px;
}

.sound-toggle:hover { border-color: #cfc5b5; }
.sound-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.keycap {
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  margin-right: 3px;
  border: 1px solid #e3ddd1;
  border-radius: 4px;
  color: #555148;
  background: #fffefa;
  font-family: "DM Mono", monospace;
  font-size: 11px;
}

.footer-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aaa497;
  font-size: 8px;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #76a877;
}

.color-note {
  margin: 13px 0 0;
  color: #9b9589;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 11px;
  text-align: center;
}

.color-note span { margin: 0 4px; color: #c1baad; }

.tutorial-panel {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.tutorial-panel[hidden] { display: none; }

.tutorial-skip {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px 11px;
  border: 1px solid #e5d6c8;
  border-radius: 7px;
  color: #6f6258;
  background: rgba(255, 254, 250, .95);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  pointer-events: auto;
}

.tutorial-card {
  position: absolute;
  top: 58px;
  left: 50%;
  width: min(430px, calc(100% - 28px));
  padding: 13px 17px;
  border: 1px solid rgba(45, 41, 34, .12);
  border-radius: 11px;
  background: rgba(255, 254, 250, .94);
  box-shadow: 0 8px 24px rgba(61, 52, 39, .1);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.tutorial-step {
  margin: 0 0 3px;
  color: var(--orange);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.tutorial-card h2 {
  margin: 0;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 16px;
}

.tutorial-card > p:not(.tutorial-step) {
  margin: 4px 0 0;
  color: #77736a;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 11px;
  line-height: 1.45;
}

.tutorial-card .tutorial-action {
  color: #cf6349 !important;
  font-weight: 700;
}

.tutorial-rules {
  display: grid;
  gap: 3px;
  margin: 7px 0 0;
  padding: 0;
  color: #77736a;
  font-size: 10px;
  line-height: 1.35;
  list-style: none;
}

.tutorial-rules[hidden] { display: none; }
.tutorial-start { margin-top: 9px; padding: 9px 12px; pointer-events: auto; }

.tutorial-replay {
  display: block;
  margin: 10px auto 0;
  padding: 6px 9px;
  border: 0;
  color: #77736a;
  background: transparent;
  cursor: pointer;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tutorial-replay[hidden] { display: none; }
.tutorial-replay:hover { color: var(--orange); }
.tutorial-replay:disabled { opacity: .5; cursor: wait; }
.tutorial-replay:focus-visible, .tutorial-skip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.page-footer {
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid rgba(37, 35, 31, .1);
  color: #aaa497;
  font-size: 8px;
}

@media (max-width: 600px) {
  .app { width: min(100% - 30px, 440px); }
  .topbar { height: 65px; }
  .build-tag { font-size: 8px; }
  .game-shell { padding: 35px 0 26px; }
  .mobile-break { display: initial; }
  .intro { margin-bottom: 19px; }
  h1 { font-size: clamp(43px, 13vw, 60px); }
  .intro-copy { font-size: 13px; }
  .hud {
    grid-template-columns: .7fr 1.4fr 1.1fr;
    gap: 12px 9px;
    padding: 13px 15px;
  }
  .hud-feedback { grid-column: 1 / -1; padding: 8px; }
  .hud-lives { grid-column: 3; grid-row: 1; }
  .hud-time { grid-column: 1; grid-row: 2; }
  .hud-collected { grid-column: 2 / 4; grid-row: 2; }
  .hud-umbrella { grid-column: 1 / 4; grid-row: 3; grid-template-columns: auto 1fr; align-items: center; }
  .hud-umbrella .hud-label { grid-column: 1; }
  .umbrella-value { grid-column: 2; grid-row: 1 / 3; }
  .umbrella-hint { grid-column: 3; grid-row: 1 / 3; justify-self: start; }
  .hud-fever { grid-column: 1 / 4; grid-row: 4; grid-template-columns: auto 1fr; align-items: center; }
  .hud-fever .hud-label { grid-column: 1; }
  .fever-card-value { grid-column: 2; grid-row: 1 / 3; }
  .fever-hint { grid-column: 3; grid-row: 1 / 3; justify-self: start; }
  .hud-feedback { grid-row: 5; }
  .stage-value, .time-value { font-size: 17px; }
  .target-value { gap: 6px; font-size: 13px; }
  canvas { height: clamp(290px, 93vw, 390px); }
  .game-footer { min-height: 45px; padding: 0 12px; }
  .controls-hint { font-size: 10px; }
  .footer-note { font-size: 7px; }
  .color-note { line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}