:root {
  --bg: #07090e;
  --panel: rgba(8, 12, 20, 0.6);
  --panel-solid: #121826;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f3f5fa;
  --muted: #9aa3b8;
  --red: #ff3b47;
  --cyan: #3ad6ff;
  --yellow: #ffd23a;
  --green: #35d07f;
  --hud: #8cffbe;
  --num: 'Orbitron', ui-monospace, monospace;
  --jp: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--jp);
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  margin: 0 0.1em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--jp);
  font-size: 0.85em;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
}

.panel {
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.btn:active {
  transform: translateY(1px);
}
.btn.primary {
  background: var(--red);
  border-color: transparent;
}
.btn.primary:hover {
  background: #ff5560;
}
.btn.ghost {
  background: transparent;
}
/* キーボードで選んでいるボタン（一時停止メニュー） */
.card-actions .btn.selected {
  box-shadow: 0 0 0 3px #fff;
}
.card-actions .btn.selected:not(.primary) {
  background: rgba(255, 255, 255, 0.18);
}
.btn.small {
  padding: 7px 12px;
  font-size: 13px;
}
.link {
  background: none;
  border: 0;
  color: var(--cyan);
  cursor: pointer;
  text-decoration: underline;
  margin-left: 8px;
}

input[type='password'] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
}
input:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ 飛行画面 */

#stage {
  position: fixed;
  inset: 0;
  visibility: hidden;
  background: #000;
}
#stage.active {
  visibility: visible;
}

/* Cesium（3D地図）は中で z-index を使うので閉じ込める */
#world {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
}
/* Google のロゴと出典（左下）。#world の中に置くと、飛行機（#plane-layer）や演出の下になって隠れることがあるので、
   外に出して、飛行画面のどれよりも手前に出す。結果・メニューなどの幕（.overlay）の後ろでも地図は見えているので、
   幕よりも手前に出す（#stage の外に置いてある）。飛行画面を出していないとき（タイトル）は出さない。
   HUD も左下に置かないこと（Google の利用ポリシー） */
#map-credits {
  position: fixed;
  left: 5px;
  bottom: 4px;
  padding-right: 5px;
  font: 16px sans-serif;
  z-index: 40;
  visibility: hidden;
  pointer-events: none; /* 幕のボタンの上に重なっても押せるように（出典のリンクだけは押せる） */
}
#map-credits a,
#map-credits .cesium-credit-expand-link {
  pointer-events: auto;
}
#stage.active ~ #map-credits {
  visibility: visible;
}
#map-credits .cesium-widget-credits {
  display: inline;
  position: static;
}

#plane-layer,
#hud-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
#hud-canvas {
  z-index: 2;
}

#speedlines {
  position: absolute;
  inset: 0 0 60px 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 1;
}
#speedlines > div {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg 2.4deg,
    rgba(255, 255, 255, 0.45) 2.6deg 2.8deg,
    transparent 3deg 5.5deg
  );
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 0 28%, #000 70%);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 0 28%, #000 70%);
  animation: speedlines 0.24s steps(3) infinite;
}
@keyframes speedlines {
  to {
    transform: rotate(4deg);
  }
}

#boostfx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 180px 40px rgba(255, 150, 60, 0.35);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 1;
}
#boostfx.on {
  opacity: 1;
}

/* G が高いと視野が狭くなる（画面の端から暗くなる）。オーバーG の瞬間は赤く光る */
#gfx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.12s;
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.95) 100%);
}
#gfx::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(200, 0, 20, 0.85) 100%);
}
#gfx.over::after {
  animation: overg 0.9s ease-out;
}
@keyframes overg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 墜落の瞬間の光 */
#crashfx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 250, 220, 0.95), rgba(255, 140, 40, 0.75) 35%, rgba(120, 20, 0, 0.55) 75%);
}
#crashfx.on {
  animation: crashflash 0.9s ease-out;
}
@keyframes crashflash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
#hud > * {
  position: absolute;
}
#stage.free .race-only,
#stage:not(.free) .free-only {
  display: none !important;
}

/* ブーストアイテムの数（最大3） */
.items {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.items span {
  flex: 1;
  height: 22px;
  border-radius: 6px;
  border: 1.5px dashed rgba(255, 176, 32, 0.45);
}
.items span.on {
  border: 0;
  background: linear-gradient(180deg, #ffd27a, #ff8a2a);
  box-shadow: 0 0 10px rgba(255, 150, 40, 0.6);
}
/* ブーストが増えたとき：枠が弾んで光る */
.items.gain span.on {
  animation: item-gain 0.9s ease-out;
}
@keyframes item-gain {
  0% {
    transform: scale(1.6);
    box-shadow: 0 0 26px 6px rgba(255, 210, 90, 0.95);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 150, 40, 0.6);
  }
}
.items span.on::after {
  content: '⚡';
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}
/* リングのコンボ。バーがいっぱい（10コンボ）になるとブーストが1つもらえる */
.combo-num {
  font-family: var(--num);
  font-weight: 900;
  font-size: 20px;
  color: #7fe8ff;
}
.combo-bar {
  height: 6px;
  margin-top: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.combo-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7fe8ff, #ffd27a);
  transition: width 0.2s;
}
.items.active span.on:last-of-type {
  animation: blink 0.3s steps(2) infinite;
}

/* G の数字と G ターボのたまり具合（Lv1 青・Lv2 オレンジ・Lv3 紫） */
.g-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
}
.g-num {
  font-family: var(--num);
  font-weight: 900;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.g-num.high {
  color: #ffd23a;
}
.g-num.zone {
  color: #6fd0ff;
}
.g-num.over {
  color: #ff4d5a;
  animation: blink 0.25s steps(2) infinite;
}
/* G ターボのたまり具合。ためている間だけ機体の下に出る */
#turbo-meter {
  left: 50%;
  top: 56%;
  width: 240px;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
}
#turbo-meter.show {
  opacity: 1;
}
.turbo {
  display: flex;
  gap: 6px;
}
.turbo span {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.15s;
}
#turbo-meter.wait {
  opacity: 0.6;
}
#turbo-meter.expiring .turbo span.on,
#turbo-meter.expiring .turbo-text {
  animation: blink 0.16s steps(2) infinite;
}
#turbo-meter.charging .turbo span:not(.on):not(.filling) {
  animation: blink 0.4s steps(2) infinite;
}
.turbo-text {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}
/* ためかけの Lv：曲がった角度の分だけ左から色がつく */
.turbo span.filling {
  transition: none;
}
.turbo span.filling.lv1 {
  background: linear-gradient(90deg, #3aa0ff var(--fill), rgba(255, 255, 255, 0.18) var(--fill));
}
.turbo span.filling.lv2 {
  background: linear-gradient(90deg, #ff8a2a var(--fill), rgba(255, 255, 255, 0.18) var(--fill));
}
.turbo span.filling.lv3 {
  background: linear-gradient(90deg, #b05cff var(--fill), rgba(255, 255, 255, 0.18) var(--fill));
}
.turbo span.on.lv1 {
  background: #3aa0ff;
  box-shadow: 0 0 8px #3aa0ff;
}
.turbo span.on.lv2 {
  background: #ff8a2a;
  box-shadow: 0 0 8px #ff8a2a;
}
.turbo span.on.lv3 {
  background: #b05cff;
  box-shadow: 0 0 10px #b05cff;
}

.hud-tl {
  top: 16px;
  left: 16px;
  padding: 12px 18px 14px;
  min-width: 210px;
}
/* 左下の大きな順位（マリオカートのような「2nd」）。左下の角の Google・Cesium のロゴは隠さない */
#pos-badge {
  left: 22px;
  bottom: 62px;
  display: flex;
  align-items: baseline;
  font-family: 'Lilita One', 'Noto Sans JP', sans-serif;
  line-height: 0.9;
  transform: skewX(-8deg);
  transform-origin: left bottom;
  filter: drop-shadow(0 5px 0 #121a3e) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
  --g: linear-gradient(180deg, #ffffff 0%, #c4d6ff 42%, #ff9d7d 72%, #ff6a3d 100%);
}
#pos-badge span {
  background: var(--g);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #1b2350;
  paint-order: stroke fill;
}
#pos-num {
  font-size: 112px;
}
#pos-suf {
  margin-left: 2px;
  font-size: 46px;
}
#pos-badge[data-rank='1'] {
  --g: linear-gradient(180deg, #fffbe0 0%, #ffe066 40%, #ffb21a 72%, #ff7a00 100%);
}
#pos-badge[data-rank='3'] {
  --g: linear-gradient(180deg, #fff1e3 0%, #f2b483 42%, #d07a3f 72%, #9c4a1c 100%);
}
#pos-badge[data-rank='4'] {
  --g: linear-gradient(180deg, #f4f7fb 0%, #c3cfe0 45%, #8d9cb4 75%, #66748c 100%);
}
/* 高さの低い画面（スマホの横向き・小さいウィンドウ）では、左のメーターと重ならないよう、小さくしてメーターの右に出す */
@media (max-height: 640px) {
  #pos-badge {
    left: 184px;
    bottom: 34px;
  }
  #pos-num {
    font-size: 72px;
  }
  #pos-suf {
    font-size: 30px;
  }
}
@media (max-height: 640px) and (max-width: 760px) {
  #pos-badge {
    left: 136px;
  }
}
#pos-badge.pop {
  animation: pospop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes pospop {
  0% {
    transform: skewX(-8deg) scale(1.45);
  }
  100% {
    transform: skewX(-8deg) scale(1);
  }
}

/* ライバルの名前 */
/* 観光地の名前（建物の上に出る） */
#landmark-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.landmark-tag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 8px;
  background: rgba(10, 14, 22, 0.45);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s;
}
.landmark-tag::before {
  content: '📍';
  font-size: 12px;
}
.landmark-tag::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, 0.7);
}
.landmark-tag .lm-dist {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
#rival-tags {
  inset: 0;
  pointer-events: none;
}
.rival-tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--c);
  background: rgba(10, 14, 22, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.hud-course {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.hud-time {
  font-family: var(--num);
  font-weight: 800;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.hud-best {
  font-family: var(--num);
  font-size: 12px;
  color: var(--yellow);
}
.hud-bonus {
  font-family: var(--jp);
  font-size: 12px;
  font-weight: 700;
  color: #4dff9a;
}
.hud-bonus:empty {
  display: none;
}
.hud-rings {
  margin-top: 6px;
  font-family: var(--num);
  font-size: 15px;
  font-weight: 800;
  color: var(--yellow);
}

.hud-buttons {
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}
.hud-menu {
  pointer-events: auto;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.title-fs {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
}

.gauge-box {
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  padding: 12px 14px 14px;
  text-align: center;
}
.gauge-box.left {
  left: 16px;
}
.gauge-box.right {
  right: 16px;
}
.gauge-label {
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--hud);
}
.gauge-num {
  font-family: var(--num);
  font-weight: 900;
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.gauge-unit {
  font-size: 11px;
  color: var(--muted);
}
.gauge-sub {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hud);
}
.gauge-sub:empty {
  display: none;
}
/* ブーストを押した瞬間 */
.gauge-box.left.kick {
  animation: kick 0.5s ease-out;
}
@keyframes kick {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 150, 60, 0.9);
    border-color: rgba(255, 170, 70, 1);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(255, 150, 60, 0);
  }
}
.bar-label {
  margin-top: 10px;
  text-align: left;
  font-family: var(--num);
  font-size: 10px;
  color: var(--muted);
}
.bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
}
.bar-fill.thr {
  background: linear-gradient(90deg, #3ad6a0, var(--hud));
}
.bar-fill.boost {
  background: linear-gradient(90deg, #ff7b2a, var(--yellow));
}

.radar-wrap {
  right: 16px;
  bottom: 56px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 20, 16, 0.75), rgba(8, 14, 20, 0.6));
  border: 2px solid rgba(140, 255, 190, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
#radar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#minimap {
  position: absolute;
  inset: 0;
  display: none;
}
/* 地図のミニマップ。斜めに倒した地図を角丸の四角に入れる。出典が右下の角に出るので、円にはしない（出典は隠さない） */
.radar-wrap.map {
  width: 250px;
  height: 250px;
  border-radius: 14px;
  background: #1b2230;
  border-color: rgba(255, 255, 255, 0.22);
}
.radar-wrap.map #minimap {
  display: block;
}
/* 奥（遠く）を少し霞ませて、地図が倒れて見えるようにする */
.radar-wrap.map #minimap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(27, 34, 48, 0.9), rgba(27, 34, 48, 0) 32%);
  pointer-events: none;
}
/* 地図の出典。上に重なるレーダーのキャンバスより手前に出し、リンクを押せるようにする */
.minimap-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px 5px;
  border-top-left-radius: 6px;
  background: rgba(10, 14, 22, 0.7);
  color: #9aa6bd;
  font: 9px/1.4 'Noto Sans JP', sans-serif;
  white-space: nowrap;
  pointer-events: auto;
}
.minimap-credit a {
  color: inherit;
  text-decoration: none;
}

#ring-marker {
  left: 0;
  top: 0;
}
/* 次のリングの名前と距離（リングの真ん中の少し右に。ひし形の印は出さない） */
.ring-label {
  position: absolute;
  left: 14px;
  top: -10px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

#ring-arrow {
  left: 0;
  top: 0;
}
.ring-arrow-head {
  position: absolute;
  left: -16px;
  top: -14px;
  width: 0;
  height: 0;
  transform-origin: 16px 14px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 30px solid var(--yellow);
  filter: drop-shadow(0 0 6px rgba(255, 210, 58, 0.8));
}
.ring-arrow-label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-family: var(--num);
  font-size: 12px;
  font-weight: 800;
  color: var(--yellow);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

#pullup {
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border: 2px solid var(--red);
  border-radius: 8px;
  font-family: var(--num);
  font-weight: 900;
  font-size: 22px;
  color: var(--red);
  background: rgba(40, 0, 0, 0.45);
  opacity: 0;
}
#pullup.show {
  animation: blink 0.5s steps(2) infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}

/* 見逃したリングがあるとき（マリオカートの逆走のような警告）。矢印はそのリングの方向 */
/* リング見逃し：矢印・「リング見逃し」・名前と距離を、縦に並べて真ん中にそろえる */
#missed-warn {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
#missed-warn.show {
  opacity: 1;
}
#missed-warn .mw-arrow {
  /* 四角い箱の真ん中に置いて、その場で回す（向きが変わっても位置がずれないように） */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 64px;
  line-height: 1;
  color: #ffcf33;
  text-shadow: 0 0 16px rgba(255, 120, 0, 0.9), 0 3px 8px rgba(0, 0, 0, 0.8);
  transition: transform 0.12s linear;
}
#missed-warn .mw-text {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 16px;
  border-radius: 8px;
  background: rgba(200, 20, 30, 0.88);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
#missed-warn.show .mw-text {
  animation: blink 0.5s steps(2) infinite;
}
#missed-warn .mw-sub {
  margin-top: 5px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* 宙返りの案内（次のリングが宙返りのとき） */
#loop-hint {
  left: 50%;
  top: 112px;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid #5ee7ff;
  background: rgba(10, 30, 45, 0.7);
  color: #bff6ff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}
#loop-hint.show {
  opacity: 1;
}

/* タイム短縮のポップアップ（下から浮かんで消える） */
#bonus-pops {
  left: 50%;
  bottom: 175px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
}
.bonus-pop {
  padding: 4px 14px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 18px;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  animation: bonuspop 1.5s ease-out forwards;
}
.bonus-pop.near {
  color: var(--cyan);
}
.bonus-pop.bonus {
  color: #4dff9a;
  font-size: 22px;
}
.bonus-pop.item {
  color: #ffb020;
}
.bonus-pop.miss {
  color: #ff5a5a;
}
.bonus-pop.roll {
  color: #fff;
  font-style: italic;
}
.bonus-pop.turbo {
  font-size: 24px;
  font-style: italic;
}
.bonus-pop.turbo.lv1 {
  color: #6fbaff;
}
.bonus-pop.turbo.lv2 {
  color: #ff9a40;
}
.bonus-pop.turbo.lv3 {
  color: #c88aff;
}
.bonus-pop.turbo.just {
  font-size: 28px;
  color: #ffe14d;
  text-shadow: 0 0 12px rgba(255, 210, 58, 0.8), 0 2px 6px rgba(0, 0, 0, 0.85);
}
@keyframes bonuspop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.8);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  70% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px);
  }
}

.hud-help {
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--panel);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.6s;
  max-width: min(92vw, 760px);
}
.hud-help.show {
  opacity: 1;
}

.countdown,
.flash {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  z-index: 4;
}
.countdown {
  top: 40%;
  font-family: var(--num);
  font-weight: 900;
  font-size: clamp(90px, 16vw, 180px);
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
.countdown.show {
  animation: pop 0.9s ease-out forwards;
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}
.flash {
  top: 28%;
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 52px);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}
.flash.show {
  animation: pop 1.4s ease-out forwards;
}
.flash.warn {
  font-family: var(--num);
  color: var(--red);
  font-size: clamp(50px, 9vw, 110px);
  top: 20%; /* 爆発（画面の中央）にかぶらないように */
}
/* くぐったリングの名前は控えめに（コンボは別に大きく出す） */
.flash.ring {
  top: 24%;
  font-size: clamp(20px, 3vw, 34px);
  color: var(--yellow);
}

/* コンボ：くぐったリングの名前の下に、シンプルに */
.combo-pop,
.boost-get {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  z-index: 4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}
.combo-pop {
  top: 31%;
  font-family: var(--num);
}
.combo-pop .cp-num {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 900;
  color: #fff;
}
.combo-pop .cp-word {
  margin-left: 8px;
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--yellow);
}
.combo-pop.show {
  animation: combo-pop 1.2s ease-out forwards;
}
@keyframes combo-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* 10コンボごと：ブーストゲット */
.boost-get {
  top: 38%;
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 40px);
  color: #ffb020;
  text-shadow: 0 0 16px rgba(255, 150, 30, 0.6), 0 2px 8px rgba(0, 0, 0, 0.75);
}
.boost-get.full {
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--muted);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}
.boost-get.show {
  animation: boost-get 1.6s ease-out forwards;
}
@keyframes boost-get {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  24% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(1);
  }
}
.flash.boost {
  font-family: var(--jp);
  color: #ff8a2a;
}
.flash.gate {
  color: #ff3b8d;
}
.flash.goal {
  top: 40%;
  font-family: var(--num);
  font-size: clamp(60px, 11vw, 130px);
  color: var(--cyan);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translate(-50%, 10px);
  max-width: min(92vw, 560px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(10, 14, 22, 0.9);
  border: 1px solid var(--line);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------ タイトル */

.screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 10;
}
#title {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(58, 214, 255, 0.22), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255, 59, 71, 0.16), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 48px,
    var(--bg);
}
.title-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 16px 64px;
}
.brand-kicker {
  font-family: var(--num);
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--cyan);
}
.dev-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--yellow);
  color: #111;
  letter-spacing: 0.1em;
}
.brand h1 {
  margin: 8px 0 6px;
  font-family: var(--num);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 76px);
  line-height: 1;
  letter-spacing: 0.02em;
  font-style: italic;
}
.brand h1 span {
  color: var(--red);
}
.brand p {
  margin: 0;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--muted);
  font-weight: 700;
}

.key-box {
  margin: 32px 0 8px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.2s;
}
.key-box.nudge {
  box-shadow: 0 0 0 3px var(--red);
}
.key-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}
.key-row {
  display: flex;
  gap: 8px;
}
.key-row input {
  flex: 1;
  min-width: 0;
}
.key-ok {
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
}
.hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.options {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
.options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.options label {
  cursor: pointer;
}
.options select {
  margin-left: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
}
.lg {
  font-weight: 900;
}
.lg.ring {
  color: var(--yellow);
}
.lg.boost {
  color: #ff8a2a;
}
.lg.gate {
  color: #ff3b8d;
}
.lg.loop {
  color: #5ee7ff;
}

#title h2 {
  margin: 36px 0 14px;
  font-size: 18px;
  letter-spacing: 0.05em;
}

/* コースを選ぶ：左に地球儀、右に選んだコース（スマホでは地球儀の下） */
.picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  margin-top: 28px;
  height: min(62vh, 600px);
  min-height: 420px;
}
.globe {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 50%, #0b1630 0%, #03050b 72%);
  touch-action: none;
  cursor: grab;
  transition: border-color 0.4s, border-radius 0.4s;
}
.globe:active {
  cursor: grabbing;
}
.globe-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.globe-tags {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.globe-tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 77, 90, 0.75);
  background: rgba(8, 12, 22, 0.8);
  color: var(--text);
  font: 700 12px/1.3 var(--jp);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s, box-shadow 0.15s;
}
.globe-tag:hover {
  background: rgba(255, 59, 71, 0.4);
}
.globe-tag.on {
  background: var(--red);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 59, 71, 0.3);
}
.globe-hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 3; /* 都市の地図より手前 */
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.7);
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}
.globe-hint:empty {
  display: none;
}
.picker-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#title .picker-side h2 {
  margin: 0 0 10px;
}
/* 上のパンくず（世界 › 日本 › 東京）。押すとその段に戻る */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.crumb {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: 700 12px/1.3 var(--jp);
  cursor: pointer;
}
.crumb:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.crumb.on {
  border-color: transparent;
  background: var(--red);
  cursor: default;
}
.crumb:disabled:not(.on) {
  cursor: default;
}
.crumb-sep {
  color: var(--muted);
  font-size: 13px;
}
/* 国・都市・コースの一覧 */
.picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  max-height: 40%;
  overflow-y: auto;
}
.pick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'title go' 'sub go';
  align-items: center;
  gap: 2px 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pick-row:hover {
  background: #172034;
}
.pick-row.on {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px var(--yellow) inset;
}
.pr-title {
  grid-area: title;
  font: 900 15px/1.35 var(--jp);
}
.pr-sub {
  grid-area: sub;
  font-size: 12px;
  color: var(--muted);
}
.pr-go {
  grid-area: go;
  font-size: 20px;
  color: var(--muted);
}
/* 都市の地図（地球儀の上にかぶせる。都市まで寄ると、ふわっと出る） */
.course-map {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s;
  cursor: auto;
  background: #283346;
}
.course-map.show {
  opacity: 1;
}
.course-panel {
  flex: 1;
  min-height: 0;
}
.course-panel .course-card {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.course-panel .course-card:hover {
  transform: none;
  background: var(--panel-solid);
}
.course-panel .cc-name {
  font-size: 20px;
}
.course-panel .cc-desc {
  font-size: 14px;
}
.course-panel .cc-actions .btn {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 16px;
}

/* レース開始：地球儀のほかを消して、選んだ街へ寄っていく。そのあと宇宙からの 3D 地図へ切り替わる */
#title.launching .brand,
#title.launching .key-box,
#title.launching .account-box,
#title.launching .options,
#title.launching .title-foot,
#title.launching .picker-side,
#title.launching .globe-hint,
#title.launching .course-map {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
#title.launching .globe {
  border-color: transparent;
  pointer-events: none;
}
#title.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s;
}
.course-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 190px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  transition: transform 0.15s, background 0.15s;
}
.course-card:hover {
  transform: translateY(-3px);
  background: #172034;
}
.course-card.locked {
  opacity: 0.6;
}
.cc-area {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.cc-name {
  font-size: 18px;
  font-weight: 900;
}
.cc-desc {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.cc-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--num);
  font-size: 11px;
  color: var(--muted);
}
.cc-best {
  color: var(--yellow);
}
.cc-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.cc-actions .btn {
  flex: 1;
}

.title-foot {
  margin-top: 44px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--text);
}
.credits {
  font-size: 12px;
  opacity: 0.8;
}

/* ------------------------------------------------------------ オーバーレイ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 6, 10, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card {
  width: min(460px, 100%);
  padding: 28px 24px;
  border-radius: 18px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.card h2 {
  margin: 0 0 18px;
  font-family: var(--num);
  letter-spacing: 0.08em;
}
.card-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}
.card-actions.vertical {
  flex-direction: column;
}
.error-text {
  line-height: 1.7;
  color: var(--muted);
  text-align: left;
  white-space: pre-wrap;
}
.loading-steps {
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  width: fit-content;
  font-size: 13px;
  color: var(--muted);
  line-height: 2;
}
.loading-steps li::before {
  content: '○';
  display: inline-block;
  width: 1.6em;
}
.loading-steps li.now {
  color: var(--text);
  font-weight: 700;
}
.loading-steps li.now::before {
  content: '▶';
  color: var(--cyan);
}
.loading-steps li.done {
  color: var(--green);
}
.loading-steps li.done::before {
  content: '✓';
}
/* 宇宙から降りてくる間の読み込み表示：景色を隠さないよう、下に小さく出す（Google のロゴ・クレジットより上） */
#loading.flyin {
  place-items: end center;
  padding-bottom: 64px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
#loading.flyin .card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  padding: 10px 18px;
  background: rgba(8, 12, 20, 0.6);
  box-shadow: none;
}
#loading.flyin .spinner {
  width: 18px;
  height: 18px;
  margin: 0;
  border-width: 3px;
}
#loading.flyin #loading-text {
  margin: 0;
}
#loading.flyin .loading-steps {
  display: none;
}
#stage.flyin #hud,
#stage.flyin #hud-canvas,
#stage.flyin #plane-layer {
  visibility: hidden;
}

.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--cyan);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.result-course {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}
.result-label {
  margin-top: 6px;
  font-family: var(--num);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--cyan);
}
/* 結果の順位。飛んでいる間の左下の「1st」（#pos-badge）と同じ見た目 */
.result-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 2px;
}
.rp-badge {
  display: flex;
  align-items: baseline;
  font-family: 'Lilita One', 'Noto Sans JP', sans-serif;
  line-height: 0.95;
  transform: skewX(-8deg);
  filter: drop-shadow(0 4px 0 #121a3e) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
  animation: placein 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
  --g: linear-gradient(180deg, #ffffff 0%, #c4d6ff 42%, #ff9d7d 72%, #ff6a3d 100%);
}
.rp-badge[hidden] {
  display: none;
}
.rp-badge span {
  background: var(--g);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #1b2350;
  paint-order: stroke fill;
}
#rp-num {
  font-size: 92px;
}
#rp-suf {
  margin-left: 2px;
  font-size: 38px;
}
.rp-badge[data-rank='1'] {
  --g: linear-gradient(180deg, #fffbe0 0%, #ffe066 40%, #ffb21a 72%, #ff7a00 100%);
}
.rp-badge[data-rank='3'] {
  --g: linear-gradient(180deg, #fff1e3 0%, #f2b483 42%, #d07a3f 72%, #9c4a1c 100%);
}
.rp-badge[data-rank='4'] {
  --g: linear-gradient(180deg, #f4f7fb 0%, #c3cfe0 45%, #8d9cb4 75%, #66748c 100%);
}
.rp-label {
  margin-top: 4px;
  font-weight: 900;
  font-size: 15px;
  color: var(--text);
}
.rp-badge[data-rank='1'] + .rp-label {
  color: #ffd23a;
}
.result-place.none .rp-label {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
@keyframes placein {
  0% {
    transform: skewX(-8deg) scale(0.2);
  }
  100% {
    transform: skewX(-8deg) scale(1);
  }
}
.result-detail {
  font-size: 12px;
  color: var(--muted);
}
.result-time {
  font-family: var(--num);
  font-weight: 900;
  font-size: 56px;
  font-variant-numeric: tabular-nums;
}
.result-record {
  display: inline-block;
  margin: 4px 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: #111;
  font-family: var(--num);
  font-weight: 900;
  font-size: 13px;
  animation: pulse 0.9s ease-in-out infinite alternate;
}
@keyframes pulse {
  to {
    transform: scale(1.08);
  }
}
.result-best {
  color: var(--muted);
  font-size: 14px;
}
/* 幅が足りないときは折り返す（スマホの縦向きでは、リングの数が長いと1段に収まらない） */
.result-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 18px 0 0;
}
.result-stats dt {
  font-size: 12px;
  color: var(--muted);
}
.result-stats dd {
  white-space: nowrap;
  margin: 2px 0 0;
  font-family: var(--num);
  font-weight: 800;
  font-size: 18px;
}
@media (max-width: 480px) {
  .result-stats {
    gap: 10px 20px;
  }
  .result-stats dd {
    font-size: 15px;
    white-space: normal;
  }
}

/* ------------------------------------------------------------ ランキング（src/ranking.js） */

/* タイトルのアカウント（名前・Google をつなぐ） */
.account-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 210, 58, 0.05);
  font-size: 14px;
}
.account-box .link {
  margin-left: 0;
}
.acc-title {
  width: 100%;
  font-weight: 700;
}
.acc-name {
  color: var(--yellow);
  font-size: 16px;
}
.acc-muted {
  color: var(--muted);
}
.acc-hint {
  width: 100%;
  margin: 0;
}
.account-box .name-form {
  width: 100%;
}

/* ログイン（Google・Apple のボタン） */
.login-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.result-online .login-row {
  justify-content: center;
  margin-top: 8px;
}
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.login-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.btn.login-google {
  background: #fff;
  border-color: #dadce0;
  color: #1f1f1f;
}
.btn.login-google:hover {
  background: #f2f2f2;
}
.btn.login-apple {
  background: #000;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn.login-apple:hover {
  background: #1a1a1a;
}
.login-note {
  color: var(--muted);
  font-size: 13px;
}
.result-online .ro-open {
  margin-top: 8px;
}
.result-online .ro-title + .ro-hint {
  margin: 0 0 8px;
}
.ro-login {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* 名前の入力欄 */
.name-row {
  display: flex;
  gap: 8px;
}
.name-row input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
}
.name-err {
  min-height: 1.2em;
  margin-top: 4px;
  color: var(--red);
  font-size: 13px;
  text-align: left;
}
.name-err:empty {
  min-height: 0;
  margin: 0;
}

/* コースの説明の順位 */
.cc-rank {
  font-size: 13px;
  color: var(--muted);
}
.cc-rank .link {
  margin-left: 6px;
}

/* 結果画面の世界の順位 */
/* 高さは、下に Google のロゴと出典（#map-credits）の行が入る分をあけておく（枠がロゴにかからないように） */
.card.result {
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
}
.result-online {
  margin-top: 14px;
  padding: 12px 14px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 210, 58, 0.3);
  background: rgba(255, 210, 58, 0.06);
}
.result-online .link {
  margin: 6px 0 0;
  font-size: 13px;
}
.ro-status,
.ro-hint {
  color: var(--muted);
  font-size: 13px;
}
.ro-hint {
  margin: 6px 0 0;
  line-height: 1.6;
}
.ro-title {
  margin-bottom: 8px;
  font-weight: 900;
}
.ro-note {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}
.ro-rank {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
}
.ro-world {
  font-weight: 700;
  color: var(--muted);
}
.ro-num {
  font-family: var(--num);
  font-size: 30px;
  font-weight: 900;
  color: var(--yellow);
}
.ro-sub {
  font-size: 13px;
  color: var(--muted);
}
.ro-sub.up {
  color: var(--yellow);
  font-weight: 700;
}

/* 順位の一覧 */
.rank-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  text-align: left;
}
.rank-row {
  display: grid;
  grid-template-columns: 3.2em 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
}
.rank-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}
.rank-row.me {
  background: rgba(58, 214, 255, 0.16);
  outline: 1px solid rgba(58, 214, 255, 0.5);
}
.rk-rank {
  font-family: var(--num);
  font-weight: 800;
  color: var(--muted);
  text-align: right;
}
.rank-row.top1 .rk-rank {
  color: #ffd23a;
}
.rank-row.top2 .rk-rank {
  color: #c4d6ff;
}
.rank-row.top3 .rk-rank {
  color: #f2b483;
}
.rk-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.rk-time {
  font-family: var(--num);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rank-gap {
  padding: 0 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1;
}
.rank-list.mini .rank-row {
  padding: 3px 10px;
  font-size: 14px;
}

/* 上位100人の一覧 */
.card.board {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 64px);
}
.card.board h2 {
  margin: 6px 0 4px;
}
.board-sub {
  color: var(--muted);
  font-size: 14px;
}
.card.board .rank-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.card.board .card-actions {
  margin-top: 14px;
}

@media (max-width: 760px) {
  .picker {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    margin-top: 20px;
  }
  .globe {
    height: min(56vh, 96vw);
  }
  .course-panel .course-card {
    height: auto;
  }
  .hud-tl {
    min-width: 0;
    padding: 8px 12px;
  }
  .hud-time {
    font-size: 22px;
  }
  .gauge-box {
    width: 104px;
    padding: 8px;
  }
  .gauge-num {
    font-size: 24px;
  }
  .radar-wrap {
    width: 150px;
    height: 150px;
  }
  .radar-wrap.map {
    width: 150px;
    height: 150px;
  }
  .minimap-credit {
    padding: 1px 3px;
    font-size: 7.5px;
  }
  .hud-help {
    display: none;
  }
}
.credits a {
  color: var(--cyan);
}
/* ボットよけ（App Check の reCAPTCHA）：右下のマークはミニマップに重なるので隠し、代わりにタイトルの下に案内を出す（reCAPTCHA の決まり） */
.recaptcha-note {
  display: none;
}
.recaptcha .recaptcha-note {
  display: block;
}
.recaptcha .grecaptcha-badge {
  visibility: hidden;
}

/* タイトルのアカウント欄の「退会」（押し間違えないよう、目立たない文字のリンクにする） */
.account-box .acc-withdraw {
  color: var(--muted);
  font-size: 12px;
}

/* ------------------------------------------------------------ 指の操作（スマホ・タブレット。src/touch.js）
   指モード（body.touch）のときだけボタンを出し、画面の表示を小さくまとめて、両手の親指の場所（左下・右下）をあける。
   左下の Google のロゴと出典にはかけない（ボタンは出典の上に出す。出典の高さは touch.js が測って --ch に入れる） */
body:not(.touch) .touch-only,
body.touch .key-only {
  display: none !important;
}
/* 引っぱって再読み込み・端で弾む動きをしない（飛んでいる最中に指が下へずれても、ページが動かないように） */
html,
body {
  overscroll-behavior: none;
}
/* 飛行画面を指で触っても、拡大・スクロール・文字の選択・長押しのメニューが起きないようにする。
   左下の Google のロゴと出典（#map-credits。飛行画面の外に置いてある）も、親指が触れると文字として選ばれて
   「コピー・翻訳」のメニューが出てしまうので、選べないようにする（見え方は変えない。出典のリンクは押せる） */
body.touch #stage,
body.touch #map-credits,
body.touch #map-credits * {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 大きさ：--bh ブーストのボタンの高さ、--mm ミニマップ（横向き。縦向きは下の @media で決める） */
body.touch {
  --bh: clamp(48px, 15vh, 64px);
  --mm: clamp(100px, 28vh, 170px);
}
/* #touch-ui は重なり順の区切りを作らない（z-index をつけない）。中の部品は飛行画面（#stage）の中で順番を決める：
   操縦を受ける面は画面の表示（#hud。z-index 3）の下、ボタンは上。
   画面の表示は指を通すので、どこを触っても操縦になり、「メニュー」「視点」のボタンだけはそのまま押せる */
#touch-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
body.touch #touch-ui {
  display: block;
}
/* 操縦を受ける面：画面全体 */
#touch-stick-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
}
.touch-btn {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(8, 12, 20, 0.45);
  color: var(--text);
  font-weight: 900;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.touch-btn.down {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0.97);
}
/* 押せる範囲は、見た目より上に 24px・横に 5px 広げる（親指が少しずれても押せるように。ずれた指が操縦の指として扱われると、
   本当の操縦の指が効かなくなる）。下は Google の出典にかからないよう広げない */
.touch-btn::before {
  content: '';
  position: absolute;
  inset: -24px -5px 0 -5px;
}
/* ブーストは左下（左の親指で押す。右の指はなぞって操縦し、押し込みでドリフト）。
   2026年10月20日の最初の版はターボとブーストの丸いボタンが右下、次に左下、次に下いっぱいに横長で並べたが、
   ターボのボタンを押す親指となぞる指がぶつかるので、ターボは押し込みだけにしてボタンをなくした。
   下の端は、左下から伸びる Google の出典より上にする（縦向きでは出典が折り返す。--ch は出典の高さ。touch.js が測って入れる） */
#touch-boost {
  left: 12px;
  bottom: calc(var(--ch, 24px) + 8px);
  width: clamp(104px, 30%, 200px);
  height: var(--bh);
  font-size: 13px;
}
#touch-boost.empty {
  opacity: 0.5;
}
#touch-boost.active {
  border-color: #ffb020;
  box-shadow: 0 0 18px rgba(255, 150, 40, 0.8);
}
.tb-items {
  display: flex;
  gap: 3px;
}
.tb-items i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 176, 32, 0.6);
}
.tb-items i.on {
  border-color: transparent;
  background: #ffb020;
  box-shadow: 0 0 6px rgba(255, 150, 40, 0.8);
}

/* 指モードの画面の表示：左上にタイム・その下に速さ、右上にボタン・ミニマップ・高さ。
   左下と右下は親指の場所なのであける（順位の「1st」も左下から上へ移す） */
body.touch .hud-tl {
  top: 8px;
  left: 8px;
  min-width: 0;
  padding: 6px 10px 7px;
  border-radius: 10px;
}
body.touch .hud-course,
body.touch .hud-bonus {
  display: none;
}
body.touch .hud-time {
  font-size: 22px;
}
body.touch .hud-best {
  font-size: 10px;
}
body.touch .hud-rings {
  font-size: 12px;
}
body.touch .hud-buttons {
  top: 8px;
  right: 8px;
  gap: 6px;
}
body.touch .hud-buttons .hud-menu {
  padding: 6px 11px;
  font-size: 12px;
}
/* 全画面は、レースを始めたときに自動で頼む（main.js の fullscreenForTouch） */
body.touch .hud-buttons .fs-btn {
  display: none;
}
body.touch .gauge-box {
  transform: none;
  padding: 5px 8px 7px;
  border-radius: 10px;
}
body.touch .gauge-box.left {
  top: 92px;
  left: 8px;
  width: 92px;
}
body.touch .gauge-label,
body.touch .gauge-unit,
body.touch .gauge-sub {
  font-size: 10px;
}
body.touch .gauge-num {
  font-size: 20px;
}
/* ブーストの数はボタンに出すので、ここでは出さない。G の数字と速さの単位も出さない（狭いので） */
body.touch .gauge-box.left .race-only > .bar-label,
body.touch #hud-items,
body.touch .gauge-box.left > .g-row,
body.touch .gauge-box.left .gauge-unit {
  display: none;
}
body.touch .g-row {
  margin-top: 4px;
}
body.touch .combo-num {
  font-size: 16px;
}
body.touch .radar-wrap,
body.touch .radar-wrap.map {
  top: 44px;
  right: 8px;
  bottom: auto;
  width: var(--mm);
  height: var(--mm);
}
body.touch .gauge-box.right {
  top: calc(44px + var(--mm) + 6px);
  right: 8px;
  width: var(--mm);
}
body.touch #pos-badge {
  left: 108px;
  top: 92px;
  bottom: auto;
}
body.touch #pos-num {
  font-size: 50px;
}
body.touch #pos-suf {
  font-size: 22px;
}
body.touch #loop-hint {
  top: 64px;
  font-size: 12px;
}
/* 飛び始めに出る操作の説明（キーボードの説明）は、指モードでは出さない（遊べば分かるので、景色を隠さない） */
body.touch .hud-help {
  display: none;
}

/* 縦向き（スマホを縦に持ったとき）：上にタイム・速さ・ボタン・ミニマップ・高さ、左下にブースト。
   ミニマップの大きさは画面の幅で決める（高さで決めると大きすぎて、細い画面に並びきらない） */
@media (orientation: portrait) {
  body.touch {
    --bh: clamp(60px, 10vh, 80px);
    --mm: clamp(96px, 28vw, 150px);
  }
  /* 「メニュー」の下に「視点」を縦に並べ、上の真ん中をコンパスにあける */
  body.touch .hud-buttons {
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  body.touch .radar-wrap,
  body.touch .radar-wrap.map {
    top: 84px;
  }
  body.touch .gauge-box.right {
    top: calc(84px + var(--mm) + 6px);
  }
  body.touch #loop-hint {
    top: calc(84px + var(--mm) + 80px);
    max-width: 60vw;
    white-space: normal;
    text-align: center;
  }
  /* お知らせは、ブーストのボタンより上に出す */
  body.touch .toast {
    bottom: calc(var(--ch, 24px) + var(--bh) + 40px);
  }
}

/* スマホ（body.phone。main.js の phoneScreen）は縦向きで遊ぶ。横向きにしたら、飛行画面の上に「縦向きにしてください」を出す
   （ゲームは main.js で一時停止する）。iPad くらい大きい画面は、横向きでも遊べる */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
}
#rotate-hint p {
  margin: 0;
}
@media (orientation: landscape) {
  body.touch.phone #stage.active ~ #rotate-hint {
    display: flex;
  }
}
.rotate-icon {
  width: 76px;
  height: 46px;
  border: 3px solid var(--text);
  border-radius: 9px;
  animation: rotate-phone 1.8s ease-in-out infinite;
}
@keyframes rotate-phone {
  0%,
  25% {
    transform: rotate(0);
  }
  60%,
  100% {
    transform: rotate(-90deg);
  }
}