/* 黒背景に緑文字のターミナル。配色・書体は未決事項（仕様書 11）のため、
   差し替えが1か所で済むよう変数に寄せてある。
   仕様書 10 はエディタの比喩を推しているが、配色の決定としてターミナルを採った。 */
:root {
  --bg: #000;
  --panel: #04120a;
  --edge: #124a28; /* 枠線 */
  --text: #33ff77;
  --dim: #2aa85c; /* 二次情報 */
  --accent: #33ff77; /* 装飾。意味は持たない */
  --done: #156b33; /* 打ち終えた文字 */
  --todo: #5cff99; /* 未入力の文字 */
  --filled: #ffb000; /* 補完済みの文字。自分で打っていないので別の見た目にする（仕様書 6.3） */
  --cursor: #33ff77;
  --miss: #ff4136;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* display を指定した要素でも hidden を効かせる（UA の [hidden] は作者スタイルに負ける） */
[hidden] { display: none !important; }

/* 外側は机の上。窓が浮いて見えるよう、ごくわずかに明度を落とす */
/* 高さを確定させる。確定していないと窓の height:100% が内容ぶん伸びて画面外へ出る */
body {
  margin: 0;
  background: #000 radial-gradient(ellipse at 50% 0%, #07150d, #000 70%);
  color: var(--text);
  font: 17px/1.65 var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  overflow: hidden; /* 伸びるのは窓の中身だけ */
  padding: clamp(0.5rem, 3vh, 2.5rem) clamp(0.5rem, 3vw, 2.5rem);
}

/* --- 窓。画面の中のもう一つの画面 --- */
#win {
  position: relative;
  width: min(1280px, 100%);
  height: 100%;
  max-height: 860px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px #000, 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 90px rgba(51, 255, 119, 0.06);
}

/* CRT の走査線。窓の内側だけに敷いて「画面」に見せる。入力は素通しする */
#win::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.28) 2px 4px);
}
@media (prefers-reduced-motion: reduce) {
  #win::after { display: none; }
}

/* 中身だけがスクロールする。窓枠は動かない */
#viewport { flex: 1; min-height: 0; overflow-y: auto; display: flex; }
.screen { width: 100%; padding: clamp(1.5rem, 4vw, 3rem); }

/* --- メニュー / コース選択 / ルール / 段位 --- */
#menu, #select, #rules, #ranks { display: flex; flex-direction: column; justify-content: center; }
#rules, #ranks { justify-content: center; }
#ranks .actions { margin-top: 1.4rem; }
.head {
  margin: 0 0 1.4rem;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: normal;
  letter-spacing: 0.4em;
  color: var(--bg);
  background: var(--accent);
  align-self: flex-start;
  padding: 0.3rem 1.3rem;
}

/* ルール */
.rules { margin: 0; display: grid; gap: 1rem 2.4rem; grid-template-columns: 11rem 1fr; font-size: 1.08rem; }
.rules dt { color: var(--done); letter-spacing: 0.25em; font-size: 0.95rem; }
.rules dd { margin: 0; color: var(--text); }
@media (max-width: 760px) {
  .rules { grid-template-columns: 1fr; gap: 0.3rem; }
  .rules dd { margin-bottom: 0.8rem; }
}

/* 段位の表。RANKS から起こすので定義とずれない。
   15 段を2列に割って、1行あたりの高さを稼ぐ */
#rank-table {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 clamp(2rem, 6vw, 5rem);
}
.rk-head, .rk-row {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  align-items: baseline;
  gap: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.rk-head {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--edge);
  color: var(--done);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
}
.rk-row { padding: 0.42rem 0; border-bottom: 1px solid #10402a; }
.rk-row b { font-size: 2.1rem; font-weight: normal; line-height: 1.1; }
.rk-row > span { color: var(--text); font-size: 1.2rem; letter-spacing: 0.1em; }
.rk-row[data-rank="S"] b, .rk-row[data-rank="S"] > span { color: var(--filled); }
.rk-row[data-rank="D"] b, .rk-row[data-rank="D"] > span,
.rk-row[data-rank="E"] b, .rk-row[data-rank="E"] > span { color: var(--dim); }

h1 { font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: 0.04em; margin: 0 0 0.5rem; text-shadow: 0 0 10px currentColor; }
/* 待機中の点滅カーソル。プレイ画面には出さない */
h1::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 0.15em;
  vertical-align: -0.17em;
  background: var(--cursor);
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  h1::after { animation: none; }
}
.lead { color: var(--dim); margin: 0 0 2.2rem; letter-spacing: 0.25em; }
.menu, .courses { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }

.menu button, .courses button {
  width: 100%;
  text-align: left;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  font: inherit;
  cursor: pointer;
  display: grid;
  gap: 0.15rem;
}
.menu button:hover, .menu button:focus-visible,
.courses button:hover, .courses button:focus-visible { border-color: var(--accent); outline: none; }
.menu b, .courses b { font-size: 1.75rem; line-height: 1.2; }
.courses b { letter-spacing: 0.18em; }
.menu b { letter-spacing: 0.3em; }
.menu span, .courses span, .best { color: var(--dim); font-size: 1.05rem; font-style: normal; letter-spacing: 0.12em; }
.note { color: var(--dim); font-size: 0.95rem; margin-top: 2rem; }
footer { color: var(--dim); font-size: 0.85rem; margin-top: 2rem; }
footer a, .actions button { color: var(--text); }
a { color: var(--accent); }

/* --- 待機。コースを選んでもすぐには始まらない --- */
#ready { display: flex; flex-direction: column; justify-content: center; }
#rd-course {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-shadow: 0 0 22px currentColor;
}
#rd-spec { margin: 0.6rem 0 0; color: var(--dim); letter-spacing: 0.16em; }
#rd-best { margin: 1.6rem 0 0; color: var(--dim); letter-spacing: 0.12em; }
#rd-go {
  margin: 2.4rem 0 0;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.3em;
}
/* 待機中であることを点滅で示す。プレイ中は出さない */
#rd-go::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.4em;
  vertical-align: -0.16em;
  background: var(--cursor);
  animation: blink 1.1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  #rd-go::after { animation: none; }
}
kbd {
  font: inherit;
  border: 1px solid var(--edge);
  border-bottom-width: 3px;
  border-radius: 4px;
  padding: 0.05em 0.5em;
  background: var(--panel);
  letter-spacing: 0.12em;
}

/* --- 窓のクローム。全画面で共通 --- */
#titlebar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid var(--edge);
  background: var(--panel);
  color: var(--dim);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--edge); flex: none; }
.dot:first-child { background: #3a1a1a; }
#win-title { margin-left: auto; margin-right: auto; padding-right: 4rem; }

/* 計測値の常時表示。等幅の桁送りで、数字が動いても左右に揺れない */
#hud {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--edge);
  color: var(--dim);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
#hud-time { color: var(--text); }
#hud .warn { color: var(--miss); }
#hud-time.last { color: var(--miss); }

/* ステータスライン */
#foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--edge);
  background: var(--panel);
  color: var(--dim);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
#foot-note { margin-right: auto; }
#foot-links { margin-left: auto; display: flex; gap: 1.1rem; }
#foot-links a { color: var(--dim); text-decoration: none; letter-spacing: 0.14em; }
#foot-links a:hover { color: var(--accent); text-decoration: underline; }
#foot-links ~ .enc { margin-left: 0; }
/* 残り時間は細い横バー。溝を暗くして、満ちている側が残り時間だと読めるようにする */
#bar { flex: 1; height: 3px; background: #0a2415; border-radius: 2px; overflow: hidden; }
#bar i { display: block; height: 100%; background: var(--accent); }
#bar.last i { background: var(--miss); }

/* --- プレイ。打つのは常に1行だけ --- */
#play { display: flex; flex-direction: column; padding: 0; }
/* 左に打鍵面、右に計器のレール */
#play-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
}
/* 幅が足りなければレールを畳む。打つ行の読みやすさが先 */
@media (max-width: 980px) {
  #play-grid { grid-template-columns: 1fr; }
  #rail { display: none; }
}

#rail {
  border-left: 1px solid var(--edge);
  background: var(--panel);
  padding: 1.3rem;
  display: grid;
  gap: 1.2rem;
  align-content: start;
  overflow: hidden;
}
.pane { border: 1px solid var(--edge); border-radius: 4px; }
/* 参考にした端末ゲームと同じ、角に食い込むラベル帯 */
.pane h2 {
  margin: 0;
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  font-weight: normal;
  letter-spacing: 0.26em;
  color: var(--bg);
  background: var(--dim);
}
.pane-body { padding: 0.9rem; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.kv {
  margin: 0;
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.kv > span { color: var(--dim); letter-spacing: 0.12em; }
.kv b { font-weight: normal; }
.ascii { letter-spacing: -0.03em; white-space: nowrap; }

#rk { margin: 0 0 0.7rem; display: flex; align-items: center; gap: 0.8rem; }
#rk-letter {
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.1rem 0.7rem;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: normal;
  text-shadow: 0 0 12px currentColor;
}
#rk-letter[data-rank="S"] { color: var(--filled); border-color: var(--filled); }
#rk-letter[data-rank="D"], #rk-letter[data-rank="E"] { color: var(--dim); border-color: var(--edge); text-shadow: none; }
/* ± の有無で幅が揺れないように。rem は html 基準（16px）で body の 17px ではない */
#rk-letter { min-width: 3.4rem; text-align: center; flex: none; }
#rk-note { color: var(--dim); font-size: 0.88rem; letter-spacing: 0.08em; }

#stage {
  --gutter: 3.6rem; /* 行番号の溝 */
  flex: 1;
  position: relative;
  display: grid;
  align-content: center;
  gap: 2rem;
  overflow: hidden; /* 抜けていく行が窓からはみ出さない */
}

#now, #next {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  gap: 0 0.9rem;
  align-items: baseline;
  padding-right: clamp(1rem, 3vw, 2rem);
}
/* 行番号は常に動くが読む必要がない。進んでいる感覚だけを出す */
.ln {
  color: #135028;
  text-align: right;
  font-size: 1rem;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

#line, #out, #nextline {
  margin: 0;
  padding: 0.9rem 1rem;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}
/* エディタの現在行ハイライト。溝の右から帯を敷いて、行の位置を固定して見せる */
#line {
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(51, 255, 119, 0.07), rgba(51, 255, 119, 0) 75%);
  text-shadow: 0 0 8px currentColor; /* 蛍光体のにじみ */
}
/* 次の問題。これから打つ行なので、履歴と違って目線のコストに見合う */
#next .ln { color: #0d3a1e; }
#nextline {
  border-left: 2px solid transparent;
  color: var(--done);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  opacity: 0.55;
}

/* 行ごと下から出てくる。#line ではなくこの要素に掛けることで、
   ミスの shake と animation を奪い合わない */
#now.enter { animation: enter 0.26s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(1.6rem); }
}
#line.miss { animation: shake 0.12s; }
@keyframes shake { 50% { transform: translateX(3px); } }

/* 打ち切った行が上へ抜けて消える。履歴は残さない */
#out {
  position: absolute;
  left: calc(var(--gutter) + 0.9rem);
  right: 0;
  top: 50%;
  color: var(--done);
  opacity: 0;
  pointer-events: none;
  border-left: 2px solid transparent;
  transform: translateY(-50%);
}
#out.lift { animation: lift 0.4s cubic-bezier(0.25, 0, 0.2, 1); }
@keyframes lift {
  /* 現在行の上から始め、早めに消す。折り返した長い行でも下の行に被らない */
  from { opacity: 0.65; transform: translateY(calc(-50% - 2rem)); }
  35% { opacity: 0.1; }
  to { opacity: 0; transform: translateY(calc(-50% - 6rem)); }
}
@media (prefers-reduced-motion: reduce) {
  #out.lift, #now.enter, #line.miss, #r-banner { animation: none; }
}

.done { color: var(--done); }
.todo { color: var(--todo); }
.filled { color: var(--filled); }
/* 端末のブロックカーソル。打鍵中は点滅させない（目線が奪われるため） */
.at { background: var(--cursor); color: var(--bg); text-shadow: none; }
/* カーソルが補完済みの位置に乗っても「→ で通過できる」が読めるよう、塊の色を保つ */
.at.filled { background: var(--filled); }
#line.miss .at { background: var(--miss); color: var(--bg); }

#ime {
  margin: 0 clamp(1.5rem, 4vw, 3rem) 1.5rem; /* #play は padding:0 なので自分で持つ */
  color: var(--miss);
  border: 1px solid var(--miss);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

/* --- 結果。ミッション終了のブリーフィング ---
   視線は バナー → 段位 → スコア → 内訳 → 操作 の順に落ちる */
#result { max-width: 1000px; margin: 0 auto; }
#r-banner {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  letter-spacing: 0.4em;
  color: var(--bg);
  background: var(--accent);
  display: inline-block;
  padding: 0.3rem 1.4rem 0.35rem;
  animation: flicker 1.6s ease-out 1;
}
@keyframes flicker {
  0%, 12%, 24% { opacity: 0.25; }
  6%, 18%, 100% { opacity: 1; }
}
#r-course { margin: 1rem 0 0; color: var(--dim); font-size: 1rem; letter-spacing: 0.28em; }

/* 段位を最大の塊にして、スコアをその隣に置く */
#r-hero {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin: 0.4rem 0 1.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--edge);
}
#r-rank { display: grid; justify-items: center; }
#r-letter {
  font-size: clamp(5.5rem, 13vw, 9rem);
  line-height: 1.05; /* 1 を切るとグリフの下が欠ける */
  font-weight: normal;
  text-shadow: 0 0 30px currentColor;
}
#r-letter[data-rank="S"] { color: var(--filled); }
#r-letter[data-rank="D"], #r-letter[data-rank="E"] { color: var(--dim); text-shadow: none; }
/* ± は基底の文字より小さく、肩に乗せる */
.mod { font-size: 0.42em; vertical-align: 0.62em; margin-left: 0.04em; letter-spacing: 0; }
#r-rank em {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  color: var(--dim);
  margin-top: 0.3rem;
}
#r-rank i { font-style: normal; font-size: 0.85rem; color: var(--dim); letter-spacing: 0.08em; }

#r-score { margin: 0; line-height: 1.15; }
#r-main { font-size: clamp(2.2rem, 5vw, 3.4rem); text-shadow: 0 0 16px currentColor; }
/* 端数は別行に。見出しの数字と折り返しで混ざらない（仕様書 3.1 の2つの数） */
#r-frac { display: block; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--dim); }

/* 内訳は2列に畳んで、縦の間延びを抑える */
#r-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.r-head { margin: 0 0 0.5rem; font-size: 0.85rem; letter-spacing: 0.3em; color: var(--dim); }
.r-row {
  display: grid;
  grid-template-columns: 8.5rem 6rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  padding: 0.34rem 0;
  font-variant-numeric: tabular-nums;
}
.r-row .k { color: var(--dim); }
.r-row .v { text-align: right; }
.r-row .v.warn { color: var(--miss); }
/* その数字がどこから出たか。並びの上に見えている生数字と繋がる */
.r-row .src { color: var(--dim); font-size: 0.82em; letter-spacing: 0.06em; white-space: nowrap; }
.meter { height: 5px; background: #0a2415; border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
#r-best { margin: 1.6rem 0 0; font-size: 1rem; color: var(--dim); letter-spacing: 0.1em; }
#r-best .rec { color: var(--filled); }

.actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1.8rem 0 0;
}
.actions button, #toggle-notes {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 0.75rem 1.3rem;
  font: inherit;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.actions button:hover, #toggle-notes:hover { border-color: var(--accent); }
#toggle-notes { letter-spacing: 0.2em; margin-left: auto; }

#notes { margin: 1rem 0 0; padding-left: 2rem; display: grid; gap: 1.5rem; }
#notes code { color: var(--accent); word-break: break-all; }
#notes .missed {
  color: var(--miss);
  margin-left: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  border: 1px solid var(--miss);
  border-radius: 3px;
  padding: 0 0.3rem;
}
#notes .can { margin: 0.35rem 0; }
#notes dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.2rem; margin: 0.6rem 0; font-size: 1rem; }
#notes dt { color: var(--accent); }
#notes dd { margin: 0; color: var(--dim); }
#notes .note { margin: 0.4rem 0 0; font-size: 1rem; }