/* 木のカウンターを思わせる濃い茶色に、白木のレーン。
   緑の皿・回転寿司の意匠には寄せない（REQUIREMENTS.md「先に法務」の方針）。 */

:root {
  --ink: #f6efe4;
  --ink-dim: #c3b39c;
  --counter: #2a1d15;
  --counter-2: #3a291e;
  --wood: #e8d9be;
  --wood-edge: #c8b493;
  --accent: #e0a33c;
  --good: #6fd08c;
  --bad: #f0736a;
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: radial-gradient(120% 80% at 50% 0%, var(--counter-2), var(--counter) 70%);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  min-height: 100vh;
}

main { max-width: 46rem; margin: 0 auto; }

.site-head { max-width: 46rem; margin: 0 auto; padding: 2rem 0 1.25rem; }
.site-head h1 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 6vw, 2.1rem); letter-spacing: .02em; }
.tagline { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.tagline strong { color: var(--ink); }

.panel {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.panel--center { text-align: center; }

/* 開始画面の頭。文字だけだと「何が流れてくるのか」が読まないと分からないので、
   実物の絵を先に見せる。文字は焼き込まず、説明は下のHTML側に置く。 */
.hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 1.1rem;
}

/* ---- コース選択 ---- */

.courses { border: 0; margin: 0 0 1rem; padding: 0; }
.courses legend { padding: 0; font-weight: 700; margin-bottom: .5rem; }
.courses__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; }

.course { display: block; cursor: pointer; }
.course__input { position: absolute; opacity: 0; pointer-events: none; }
.course__body {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .8rem;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(0, 0, 0, .2);
}
.course__input:checked + .course__body { border-color: var(--accent); background: rgba(224, 163, 60, .14); }
.course__input:focus-visible + .course__body { outline: 2px solid var(--ink); outline-offset: 2px; }
.course__label { font-size: 1rem; }
.course__amount { font-family: var(--mono); color: var(--ink-dim); font-size: .9rem; }
.course__hint { color: var(--ink-dim); font-size: .74rem; opacity: .85; }

.intro { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--ink-dim); font-size: .9rem; }
.intro li + li { margin-top: .25rem; }
.intro strong { color: var(--ink); }
.intro code, .sub code {
  font-family: var(--mono); font-size: .85em;
  background: rgba(0, 0, 0, .35); padding: .05em .35em; border-radius: 4px;
}

.btn-main {
  appearance: none; border: 0; cursor: pointer;
  background: var(--accent); color: #2a1d15;
  font: inherit; font-weight: 700;
  padding: .7rem 1.6rem; border-radius: 999px;
}
.btn-main:hover { filter: brightness(1.08); }
.btn-main:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.result__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.btn-sub {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .28);
  font: inherit; padding: .65rem 1.1rem; border-radius: 999px;
}
.btn-sub:hover { border-color: var(--ink); }
.btn-sub:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sub { margin: .8rem 0 0; color: var(--ink-dim); font-size: .82rem; }
.sub--quiet { text-align: center; opacity: .75; }
.sub strong { color: var(--ink); }

/* ---- 開始前カウント ---- */

.countdown__label { margin: 0; color: var(--ink-dim); }
.countdown { margin: .2rem 0 0; font-size: clamp(3rem, 18vw, 6rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---- エラー ---- */

.error__title { margin: 0 0 .4rem; font-size: 1.1rem; }
.error__detail { margin: 0 0 1rem; color: var(--ink-dim); font-family: var(--mono); font-size: .85rem; }

/* ---- 対戦中 ---- */

.hud { margin-bottom: .8rem; }
.hud__money { margin: 0 0 .45rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; position: relative; }
.hud__label { color: var(--ink-dim); font-size: .85rem; }
.hud__money b { font-size: clamp(1.6rem, 8vw, 2.4rem); font-family: var(--mono); letter-spacing: -.02em; }
.hud__target { color: var(--ink-dim); font-size: .85rem; }
.hud__missed { margin-left: auto; color: var(--bad); font-size: .82rem; }
.hud__missed b { font-family: var(--mono); font-size: .95rem; }

/* 食べた瞬間に金額が跳ねる。1周目の評価で「完成直後の金額欄が1バイトも変わらない」と出た */
.hud__money b { display: inline-block; transform-origin: left bottom; }
.hud__money b[data-bump="true"] { animation: bump 260ms ease-out; }
@keyframes bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); color: var(--good); }
  100% { transform: scale(1); }
}

/* 増えた額がその場に浮いて消える */
.hud__amount { position: relative; display: inline-block; }
.hud__gain {
  position: absolute; left: 100%; top: 0; margin-left: .55rem;
  white-space: nowrap; font-size: .85rem;
  font-family: var(--mono); font-weight: 700; color: var(--good);
  pointer-events: none; opacity: 0;
}
.hud__gain[data-show="true"] { animation: float-up 700ms ease-out; }
@keyframes float-up {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-1.6em); }
}

.timer { height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.timer__fill { height: 100%; width: 100%; background: var(--accent); transition: width .1s linear; }
.timer__fill[data-low="true"] { background: var(--bad); }

.lane-wrap { position: relative; }

.lane {
  position: relative;
  height: 7.4rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--wood), var(--wood-edge));
  border: 1px solid rgba(0, 0, 0, .3);
  overflow: hidden;
  cursor: text;
}

.plate {
  position: absolute; top: 50%; left: 0;
  margin-top: -2.7rem;
  width: clamp(6.5rem, 26vw, 9.5rem); height: 5.4rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: .1rem;
  padding: .3rem 0;
  border-radius: 8px;
  background: #fffaf0;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
  color: #2a1d15;
  will-change: transform;
}
/* 皿の絵。読めない大きさなので輪郭がはっきりした料理を選んである。
   出ていなくても文字だけで成立するように、失敗時は隠して詰める */
.plate__img {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%; object-fit: cover;
  background: rgba(0, 0, 0, .06);
}
.plate__name { font-size: clamp(.7rem, 2.7vw, .9rem); font-weight: 700; white-space: nowrap; }
.plate__price { font-family: var(--mono); font-size: .72rem; color: #7a6a55; }
.plate[data-active="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 163, 60, .55); }
.plate[data-state="missed"] { opacity: .35; filter: grayscale(1); }

/* もうすぐ流れ切る皿。逃す前に知らせる（逃したことに気づけないという指摘への対応） */
.plate[data-expiring="true"] { animation: warn 620ms ease-in-out infinite; }
@keyframes warn {
  0%, 100% { border-color: rgba(0, 0, 0, .18); }
  50% { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(240, 115, 106, .45); }
}

/* つかんでいる皿（打ちかけ）はレーンから消す。
   左端に留めると後ろの皿と文字が重なって「ぎじゅばんさい」のように読めなくなる。
   半透明にしても文字同士は重なるので、レーンからは外し、
   下の大きな表示と左端の帯で「つかんでいる」を伝える。 */
.plate[data-held="true"] { opacity: 0; pointer-events: none; }

.lane[data-holding="true"]::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--accent);
}

/* レーンに重ねた透明な入力欄。1px に潰すとiOSがソフトキーボードを出さないので、
   実寸のままopacityで消す。font-size:16px 未満だとiOSが勝手に拡大する */
.keys {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0;
  background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; opacity: 0;
  cursor: text;
}
.keys:focus { outline: none; }

/* タッチ端末で、タップすればキーボードが出ることを知らせる */
.tap-hint {
  position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%);
  margin: 0; padding: .2rem .7rem;
  border-radius: 999px;
  background: rgba(42, 29, 21, .82); color: var(--ink);
  font-size: .78rem; pointer-events: none;
}

.alert {
  margin: .7rem 0 0;
  padding: .6rem .8rem;
  border-radius: 8px;
  background: rgba(240, 115, 106, .18);
  border: 1px solid rgba(240, 115, 106, .5);
  font-size: .9rem;
}

.target { margin-top: 1rem; text-align: center; border-radius: var(--radius); padding: .8rem; }
.target[data-miss="true"] { background: rgba(240, 115, 106, .16); }

/* 食べた瞬間、視線がある中央でも返す。金額は左上にあり、そこだけ光っても目に入らない */
.target[data-ate="true"] { animation: ate 300ms ease-out; }
@keyframes ate {
  0% { background: rgba(111, 208, 140, .32); transform: scale(1.03); }
  100% { background: transparent; transform: scale(1); }
}
/* いま打っている料理を大きく見せる。文字だけだと画面が寂しい */
.target__img {
  display: block; margin: 0 auto .5rem;
  width: clamp(4.5rem, 22vw, 6.5rem); height: clamp(4.5rem, 22vw, 6.5rem);
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.target__img[hidden] { display: none; }
.target__name { margin: 0; font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 700; line-height: 1.25; }
.target__note { margin: .1rem 0 0; color: var(--ink-dim); font-size: .82rem; }
.held-badge {
  display: inline-block; margin: .35rem 0 0;
  padding: .12rem .6rem; border-radius: 999px;
  background: rgba(224, 163, 60, .18);
  border: 1px solid rgba(224, 163, 60, .5);
  color: var(--accent); font-size: .76rem;
}
/* display を指定した要素は hidden 属性が効かなくなる（作者スタイルがUA既定に勝つ）。
   実際に、まだ何も打っていないのに「つかみ中」が出たままになっていた */
.held-badge[hidden] { display: none; }
.target__reading { margin: .3rem 0 0; color: var(--ink-dim); font-size: .95rem; letter-spacing: .12em; }
.target__romaji { margin: .5rem 0 0; font-family: var(--mono); font-size: clamp(1.1rem, 5.5vw, 1.6rem); letter-spacing: .06em; word-break: break-all; }
.romaji__done { color: var(--accent); }
.romaji__next { color: #2a1d15; background: var(--ink); border-radius: 4px; padding: .05em .12em; }
.romaji__rest { color: var(--ink-dim); }

/* ---- 結果 ---- */

.verdict { margin: 0; font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 700; }
.verdict[data-verdict="profit"] { color: var(--good); }
.verdict[data-verdict="loss"] { color: var(--bad); }
.verdict__detail { margin: .2rem 0 1.2rem; color: var(--ink-dim); font-size: .92rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .7rem; margin: 0 0 1.4rem; }
.stat { background: rgba(0, 0, 0, .22); border-radius: 10px; padding: .6rem .7rem; }
.stat dt { color: var(--ink-dim); font-size: .78rem; }
.stat dd { margin: .1rem 0 0; font-family: var(--mono); font-size: 1.05rem; }

.result__course { margin: 0 0 .1rem; color: var(--ink-dim); font-size: .85rem; }
.stumbles__title { margin: 0 0 .15rem; font-size: 1rem; }
.stumbles__lead { margin: 0 0 .5rem; color: var(--ink-dim); font-size: .8rem; }
kbd {
  font-family: var(--mono); font-size: .85em;
  background: rgba(0, 0, 0, .35); padding: .1em .4em; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
}
.stumbles__list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.stumble {
  display: flex; align-items: baseline; gap: .4rem;
  background: rgba(0, 0, 0, .28); border-radius: 10px; padding: .45rem .8rem;
}
.stumble__key { font-family: var(--mono); font-size: 1.5rem; color: var(--accent); }
.stumble__count { color: var(--ink-dim); font-size: .82rem; }
.stumbles__empty { margin: 0 0 1.2rem; color: var(--ink-dim); font-size: .9rem; }

/* ---- 足元 ---- */

.site-foot { max-width: 46rem; margin: 2rem auto 0; }
.credit { margin: 1rem 0 0; color: var(--ink-dim); font-size: .8rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .timer__fill { transition: none; }
  .hud__money b[data-bump="true"], .hud__gain[data-show="true"],
  .plate[data-expiring="true"], .target[data-ate="true"] { animation: none; }
}

.plate[data-held="true"] { z-index: 3; }
.plate { z-index: 1; }