:root {
  --sky: #4cc9f0;
  --red: #e63946;
  --yellow: #ffd23f;
  --ink: #1d2b3a;
  --paper: rgba(255, 255, 255, 0.94);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #10202f;
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

/* 16:9 の画面を、縦横どちらにも収まる最大サイズで中央に置く */
#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100dvw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  background: var(--sky);
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── HUD ── */
#hud {
  position: absolute;
  inset: 2cqw 2cqw auto 2cqw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.hud-box {
  background: rgba(29, 43, 58, 0.72);
  color: #fff;
  border-radius: 1.4cqw;
  padding: 0.8cqw 1.6cqw;
  display: flex;
  align-items: baseline;
  gap: 0.8cqw;
  font-variant-numeric: tabular-nums;
}

.hud-label { font-size: 1.5cqw; opacity: 0.85; }
.hud-value { font-size: 3cqw; font-weight: 700; }
.hud-sub { font-size: 1.5cqw; }
.hud-value.hud-sub { font-size: 1.9cqw; }
.hud-right .hud-value { font-size: 4cqw; color: var(--yellow); min-width: 3ch; text-align: right; }

/* ── カウントダウンなどの大きな文字 ── */
#banner {
  position: absolute;
  inset: 22% 0 auto 0;
  text-align: center;
  font-size: 11cqw;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.5cqw var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.6cqw 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

#banner.pop { animation: pop 0.35s ease-out; }

@keyframes pop {
  from { transform: scale(1.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── タッチ操作 ── */
#touch {
  position: absolute;
  inset: auto 2cqw 3cqw 2cqw;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

@media (pointer: coarse) {
  #touch { display: flex; }
}

.touch-group { display: flex; gap: 2cqw; pointer-events: auto; }

#touch button {
  width: 13cqw;
  height: 13cqw;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  border: 0.4cqw solid rgba(255, 255, 255, 0.9);
  background: rgba(29, 43, 58, 0.45);
  color: #fff;
  font-size: 4.5cqw;
  font-family: inherit;
  touch-action: none;
}

#touch button.is-down { background: rgba(230, 57, 70, 0.8); }

#mute {
  position: absolute;
  right: 2cqw;
  top: 10cqw;
  width: 5cqw;
  height: 5cqw;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(29, 43, 58, 0.6);
  color: #fff;
  font-size: 2.4cqw;
  cursor: pointer;
}

#mute[aria-pressed="true"] { opacity: 0.45; text-decoration: line-through; }

/* ── タイトル・結果のパネル ── */
.panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 62cqw);
  max-height: 94%;
  overflow: auto;
  background: var(--paper);
  border-radius: 3cqw;
  border: 0.6cqw solid var(--ink);
  padding: 2.4cqw 3cqw;
  text-align: center;
  box-shadow: 0 1cqw 0 rgba(0, 0, 0, 0.25);
  font-size: clamp(12px, 1.9cqw, 20px);
}

.panel img { width: 15cqw; height: auto; }

.panel h1, .panel h2 {
  margin: 0.4cqw 0 1cqw;
  font-size: 6cqw;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--red);
  -webkit-text-stroke: 0.25cqw var(--ink);
  paint-order: stroke fill;
}

.panel p { margin: 0.8cqw 0; line-height: 1.7; }
.panel b { font-variant-numeric: tabular-nums; }
.howto, .note { font-size: 0.85em; opacity: 0.85; }
.result-main { font-size: 1.5em; }
.new-record { color: var(--red); font-weight: 900; font-size: 1.3em; animation: pop 0.4s ease-out; }

#result-laps {
  list-style: none;
  margin: 1cqw 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

.btn {
  margin: 1.2cqw 0;
  padding: 1.2cqw 5cqw;
  font-size: 1.5em;
  font-weight: 900;
  font-family: inherit;
  color: var(--ink);
  background: var(--yellow);
  border: 0.45cqw solid var(--ink);
  border-radius: 99px;
  box-shadow: 0 0.6cqw 0 var(--ink);
  cursor: pointer;
}

.btn:active { transform: translateY(0.4cqw); box-shadow: 0 0.2cqw 0 var(--ink); }
.btn:focus-visible, #mute:focus-visible { outline: 0.4cqw solid var(--red); outline-offset: 0.3cqw; }

@media (prefers-reduced-motion: reduce) {
  #banner.pop, .new-record { animation: none; }
}

/* ── M2: 順位・アイテム欄 ── */
.hud-rank { font-size: 5cqw; font-weight: 900; color: var(--yellow); line-height: 1; min-width: 1ch; text-align: right; }
.hud-gap { margin-left: 1.2cqw; }

#item-slot {
  position: absolute;
  right: 2cqw;
  top: 10cqw;
  width: 10cqw;
  height: 10cqw;
  min-width: 52px;
  min-height: 52px;
  padding: 0.8cqw;
  border-radius: 2cqw;
  border: 0.5cqw solid #fff;
  background: rgba(29, 43, 58, 0.6);
  cursor: pointer;
  touch-action: none;
}

#item-slot img { width: 100%; height: 100%; display: block; }
#item-slot.is-roulette img { animation: roulette 0.12s steps(2) infinite; }
#item-slot.is-ready { border-color: var(--yellow); box-shadow: 0 0 0 0.4cqw rgba(255, 210, 63, 0.45); }

#item-count {
  position: absolute;
  right: -1cqw;
  bottom: -1cqw;
  min-width: 3.4cqw;
  padding: 0.1cqw 0.6cqw;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 2cqw;
  font-weight: 900;
}

@keyframes roulette {
  from { transform: rotate(-12deg) scale(0.9); }
  to { transform: rotate(12deg) scale(1.05); }
}

#mute { top: 22cqw; }

#touch .touch-text { font-size: 2cqw; font-weight: 700; }
#touch .touch-drift { background: rgba(167, 123, 255, 0.55); }

/* ── M2: コース選択 ── */
.panel-wide { width: min(96%, 84cqw); }
.title-head { display: flex; align-items: center; justify-content: center; gap: 2cqw; }
.title-head img { width: 9cqw; }
.title-head h1 { margin: 0; }
.cup { font-weight: 700; }

.courses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; margin: 1cqw 0; }

.course-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3cqw;
  padding: 0.8cqw 0.6cqw 1cqw;
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
  background: #fff;
  border: 0.4cqw solid var(--ink);
  border-radius: 2cqw;
  cursor: pointer;
}

.course-card[aria-checked="true"] { background: #fff3c4; box-shadow: 0 0 0 0.5cqw var(--red); }
.course-thumb { width: 100%; height: 9cqw; border-radius: 1.2cqw; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.course-thumb img { width: auto; height: 90%; }
.course-name { font-weight: 900; }
.course-best { font-size: 0.8em; font-variant-numeric: tabular-nums; line-height: 1.5; }

.difficulty { display: flex; justify-content: center; align-items: center; gap: 1cqw; margin: 1cqw 0; }
.difficulty::before { content: "ライバルのつよさ"; font-size: 0.9em; margin-right: 0.6cqw; }

.chip {
  padding: 0.5cqw 2cqw;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 0.35cqw solid var(--ink);
  border-radius: 99px;
  cursor: pointer;
}

.chip[aria-checked="true"] { background: var(--sky); }
.course-card:focus-visible, .chip:focus-visible, #item-slot:focus-visible { outline: 0.4cqw solid var(--red); outline-offset: 0.3cqw; }

/* ── M2: 結果 ── */
.result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; align-items: start; text-align: left; }
.standings { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.standings li { display: flex; gap: 1cqw; padding: 0.25cqw 1cqw; border-radius: 0.8cqw; }
.standings li.is-player { background: var(--yellow); font-weight: 900; }
.standings .st-rank { width: 2.2em; text-align: right; }
.standings .st-name { flex: 1; }
.btn-sub { background: #fff; font-size: 1.1em; margin-left: 1.5cqw; }

@media (prefers-reduced-motion: reduce) {
  #item-slot.is-roulette img { animation: none; }
}

#banner.is-small { font-size: 6.5cqw; inset: 26% 0 auto 0; }
.standings .st-name { white-space: nowrap; }
.result-cols { grid-template-columns: 1.35fr 1fr; }
#result { width: min(94%, 72cqw); }
.course-thumb { height: 7cqw; }
.panel-wide { padding: 1.6cqw 3cqw; }
.panel-wide p { margin: 0.5cqw 0; line-height: 1.5; }
.panel-wide .howto { font-size: 0.74em; }
.panel-wide .btn { margin: 0.6cqw 0; }