/* ============================================================
   山手線タイピング  —  styles
   Theme: dark, locked. Single accent = JR Yamanote green.
   ============================================================ */

:root {
  --bg:        #0d1117;
  --bg-2:      #10151d;
  --surface:   #161b22;
  --surface-2: #1b222c;
  --line:      rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);

  --text:      #e9eef4;
  --text-mid:  #aeb8c4;
  --text-dim:  #6b7683;

  --ym:        #9acd32;   /* 山手線グリーン */
  --ym-bright: #b7e356;
  --ym-deep:   #6f9c1f;
  --ym-glow:   rgba(154, 205, 50, 0.55);

  --warn:      #ff6b6b;
  --warn-soft: rgba(255, 107, 107, 0.16);

  --r-card: 20px;
  --r-pill: 999px;

  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
             "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
               "Roboto Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-jp);
  color: var(--text);
  background:
    radial-gradient(1200px 620px at 50% -8%, rgba(154, 205, 50, 0.10), transparent 60%),
    radial-gradient(900px 700px at 92% 108%, rgba(154, 205, 50, 0.06), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* subtle film grain over everything, never intercepts input */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ screen system ============ */
.app { position: relative; height: 100dvh; width: 100%; }

.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease);
}
.screen.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
}

/* ============ buttons ============ */
.btn {
  font-family: var(--font-jp);
  font-size: 1rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.7em;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: transform 0.12s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn--primary {
  color: #10240a;
  background: linear-gradient(180deg, var(--ym-bright), var(--ym));
  box-shadow: 0 10px 30px -10px var(--ym-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--primary:hover { box-shadow: 0 14px 40px -10px var(--ym-glow), inset 0 1px 0 rgba(255, 255, 255, 0.55); }

.btn--ghost {
  color: var(--text-mid);
  background: var(--surface);
  border-color: var(--line);
}
.btn--ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }

.btn__kbd {
  font-family: var(--font-mono); font-size: 0.72em; font-weight: 600;
  padding: 0.25em 0.55em; border-radius: 7px;
  background: rgba(16, 36, 10, 0.28); border: 1px solid rgba(16, 36, 10, 0.25);
  color: #1c3a10;
}
.btn--ghost .btn__kbd { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--text-dim); }

/* ============================================================
   START SCREEN
   ============================================================ */
.start__inner { max-width: 640px; width: 100%; }

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.brand__line { width: 42px; height: 5px; border-radius: 3px; background: var(--ym); box-shadow: 0 0 16px var(--ym-glow); }
.brand__label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.28em;
  color: var(--text-dim); font-weight: 600;
}

.start__title {
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.02em; font-weight: 800;
}
.start__title-accent {
  color: var(--ym-bright);
  text-shadow: 0 0 40px var(--ym-glow);
}

.start__lead {
  margin-top: 22px; max-width: 34em;
  color: var(--text-mid); font-size: clamp(0.98rem, 2.2vw, 1.12rem); line-height: 1.7;
}

.start__facts {
  list-style: none; display: flex; gap: clamp(18px, 5vw, 40px);
  margin: 34px 0; padding: 20px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.start__facts li { display: flex; flex-direction: column; gap: 4px; }
.start__facts .fig {
  font-family: var(--font-mono); font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 700;
  color: var(--text); letter-spacing: -0.01em;
}
.start__facts .cap { font-size: 0.76rem; color: var(--text-dim); letter-spacing: 0.02em; }

.start__hint { margin-top: 22px; color: var(--text-dim); font-size: 0.86rem; }
.start__hint b { color: var(--text-mid); font-family: var(--font-mono); font-weight: 600; }

/* ============================================================
   PLAY SCREEN
   ============================================================ */
.screen--play { flex-direction: column; gap: clamp(16px, 3vh, 34px); justify-content: flex-start; padding-top: clamp(18px, 4vh, 44px); }

/* --- HUD --- */
.hud {
  width: 100%; max-width: 900px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.hud__stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 8px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: 14px;
}
.hud__val {
  font-family: var(--font-mono); font-size: clamp(1.15rem, 3.6vw, 1.7rem); font-weight: 700;
  color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.hud__val .unit { font-size: 0.5em; color: var(--text-dim); margin-left: 2px; font-weight: 600; }
.hud__cap { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--text-dim); }
.hud__stat--prog .hud__val { color: var(--ym-bright); }

/* --- stage: map + prompt --- */
.stage {
  width: 100%; max-width: 900px; flex: 1;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 48px); align-items: center;
}

/* --- loop map --- */
.map { position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1; }
.map svg { width: 100%; height: 100%; overflow: visible; }

.map__ring-bg { fill: none; stroke: var(--line); stroke-width: 10; }
.map__ring {
  fill: none; stroke: var(--ym); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 10px var(--ym-glow));
  transition: stroke-dashoffset 0.5s var(--ease);
}
.map__node { fill: var(--bg); stroke: var(--text-dim); stroke-width: 2.5; transition: fill 0.3s, stroke 0.3s; }
.map__node.is-done { fill: var(--ym-deep); stroke: var(--ym); }
.map__node.is-current { fill: #fff; stroke: var(--ym-bright); stroke-width: 3; }
.map__label { fill: var(--text-dim); font-size: 12px; font-family: var(--font-jp); font-weight: 600; }

.map__train {
  fill: #fff; stroke: var(--ym-bright); stroke-width: 3;
  filter: drop-shadow(0 0 12px var(--ym-bright));
  transition: transform 0.55s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .map__train, .map__ring { transition: none; }
}

.map__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; pointer-events: none;
}
.map__center-jy { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--ym-bright); letter-spacing: 0.04em; }
.map__center-count { font-size: 0.72rem; color: var(--text-dim); }
.map__center-count b { color: var(--text-mid); font-family: var(--font-mono); }

/* --- prompt: station + romaji --- */
.prompt {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(22px, 4vw, 40px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.prompt__station { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; }
.prompt__jy {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--ym-deep); background: rgba(154, 205, 50, 0.1);
  border: 1px solid rgba(154, 205, 50, 0.25); border-radius: 8px;
  padding: 3px 9px; color: var(--ym-bright);
}
.prompt__kanji { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: 0.01em; line-height: 1.05; }
.prompt__kana { font-size: clamp(0.9rem, 2.4vw, 1.05rem); color: var(--text-dim); letter-spacing: 0.06em; }

.prompt__romaji {
  margin-top: 26px;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.6rem, 5.5vw, 2.6rem); letter-spacing: 0.02em;
  word-break: break-all; line-height: 1.35; min-height: 1.4em;
}
.prompt__romaji .ch { color: var(--text-dim); position: relative; transition: color 0.08s; }
.prompt__romaji .ch.done { color: var(--ym-bright); }
.prompt__romaji .ch.cur {
  color: var(--text);
  border-bottom: 3px solid var(--ym); border-radius: 2px;
  animation: caret 1.1s steps(1) infinite;
}
.prompt__romaji .ch.err { color: var(--warn); background: var(--warn-soft); border-radius: 4px; }
@keyframes caret { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .prompt__romaji .ch.cur { animation: none; } }

.prompt.shake { animation: shake 0.24s var(--ease); }
@keyframes shake {
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .prompt.shake { animation: none; } }

.prompt__next {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px; color: var(--text-mid); font-size: 0.95rem;
}
.prompt__next-cap {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em;
  color: var(--text-dim); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px;
}

.btn--quit { margin-top: 6px; font-size: 0.85rem; padding: 0.7em 1.3em; }

/* station change animation */
.prompt.advance { animation: advance 0.42s var(--ease); }
@keyframes advance {
  0% { opacity: 0.3; transform: translateY(10px) scale(0.99); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .prompt.advance { animation: none; } }

/* ============================================================
   RESULT SCREEN
   ============================================================ */
.result__inner { max-width: 560px; width: 100%; text-align: center; }
.result__eyebrow {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.24em;
  color: var(--ym-bright); margin-bottom: 14px;
}
.result__time { font-size: clamp(4rem, 16vw, 7rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; font-family: var(--font-mono); }
.result__time #result-time { color: var(--text); }
.result__time-unit { font-size: 0.28em; color: var(--text-dim); margin-left: 0.2em; font-family: var(--font-jp); font-weight: 700; }
.result__sub { margin-top: 16px; color: var(--text-mid); font-size: 1rem; }

.result__grid {
  margin: 36px 0 30px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.result__cell {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.result__cell--best { border-color: rgba(154, 205, 50, 0.3); background: rgba(154, 205, 50, 0.06); }
.result__fig { font-family: var(--font-mono); font-size: clamp(1.3rem, 5vw, 1.9rem); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.result__fig small { font-size: 0.5em; color: var(--text-dim); }
.result__cell--best .result__fig { color: var(--ym-bright); }
.result__lbl { font-size: 0.72rem; color: var(--text-dim); }

.result__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.result__x {
  display: inline-block; margin-top: 18px;
  color: var(--text-dim); font-size: 0.86rem; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.result__x:hover { color: var(--text); border-color: var(--text-dim); }

.result.is-new-best .result__cell--best {
  animation: pulseBest 1.6s var(--ease) infinite;
}
@keyframes pulseBest {
  0%, 100% { box-shadow: 0 0 0 0 rgba(154, 205, 50, 0); }
  50% { box-shadow: 0 0 0 4px rgba(154, 205, 50, 0.18); }
}
@media (prefers-reduced-motion: reduce) { .result.is-new-best .result__cell--best { animation: none; } }

/* ============================================================
   RESPONSIVE  (< 768px : single column)
   ============================================================ */
@media (max-width: 768px) {
  body { overflow-y: auto; }
  .app { height: auto; min-height: 100dvh; }
  .screen { position: relative; min-height: 100dvh; }
  .stage { grid-template-columns: 1fr; gap: 24px; }
  .map { max-width: 240px; }
  .hud { grid-template-columns: repeat(2, 1fr); }
  .result__grid { grid-template-columns: repeat(2, 1fr); }
}