:root {
  --good: #15803d;
  --slow: #ca8a04;
  --bad: #b91c1c;
  --idle: #1e293b;
  --card: rgba(255,255,255,.12);
  --line: rgba(255,255,255,.18);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #fff;
  background: var(--idle);
  transition: background-color .4s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
body.state-good { background: var(--good); }
body.state-slow { background: var(--slow); }
body.state-bad  { background: var(--bad); animation: flash 1.2s infinite; }
@keyframes flash { 50% { background: #7f1d1d; } }

main {
  max-width: 480px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 28px) 16px calc(env(safe-area-inset-bottom) + 110px);
}

/* ===== 上部:アンテナと速さ ===== */
#hero { text-align: center; padding: 8px 0 24px; }
#avatar {
  min-height: 104px; margin-bottom: 12px; display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer;
}
#bars {
  display: inline-flex; align-items: flex-end; gap: 8px; height: 88px; margin-bottom: 8px;
}
/* ===== キャラ:道を走る。速いほど速く走り、景色も速く流れる。圏外は止まって寝る ===== */
.scene {
  position: relative; width: 100%; height: 120px; overflow: hidden;
  border-radius: 18px; background: rgba(0,0,0,.14);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.scene[data-scene="fly"]  { background: linear-gradient(rgba(125,211,252,.28), rgba(0,0,0,.08)); }
.scene[data-scene="swim"] { background: linear-gradient(rgba(14,165,233,.30), rgba(30,64,175,.35)); }
/* 景色:同じ並びを2つつなげて、右へ流し続ける */
.scene .strip {
  position: absolute; left: 0; top: 6px; white-space: nowrap; font-size: 22px; opacity: .5;
  animation: flow var(--bg, 8s) linear infinite;
}
.scene[data-scene="fly"] .strip { top: 6px; font-size: 26px; opacity: .7; }
.scene[data-scene="swim"] .strip { top: auto; bottom: 4px; }
@keyframes flow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* 地面の線(空と海ではなし) */
.scene .ground {
  position: absolute; left: 0; right: 0; bottom: 16px; height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 22px, transparent 22px 44px);
  animation: road var(--gd, 1s) linear infinite;
}
.scene[data-scene="fly"] .ground, .scene[data-scene="swim"] .ground { display: none; }
@keyframes road { from { background-position-x: 0; } to { background-position-x: 44px; } }

.scene .runner {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  animation: hop var(--hop, .6s) ease-in-out infinite;
}
.scene[data-scene="fly"] .runner, .scene[data-scene="swim"] .runner {
  bottom: 26px; animation-name: glide;
}
.scene .emo {
  display: inline-block; font-size: 64px; line-height: 1;
  transform: rotate(var(--lean, 0deg)); transform-origin: 50% 90%;
}
@keyframes hop { 50% { transform: translateX(-50%) translateY(var(--jump, -8px)); } }
@keyframes glide { 50% { transform: translateX(-50%) translateY(-10px); } }
/* 後ろ(右)に出る風の線 */
.scene .lines { position: absolute; left: 100%; top: 18px; width: 50px; height: 34px; opacity: 0; }
.scene .lines i {
  position: absolute; left: 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.85);
  animation: wind var(--wind, .4s) linear infinite;
}
.scene .lines i:nth-child(1) { top: 0;    width: 30px; }
.scene .lines i:nth-child(2) { top: 14px; width: 42px; animation-delay: -.13s; }
.scene .lines i:nth-child(3) { top: 28px; width: 24px; animation-delay: -.26s; }
@keyframes wind { from { transform: translateX(-6px); opacity: 1; } to { transform: translateX(34px); opacity: 0; } }
.scene .zzz { position: absolute; left: 78%; top: -14px; font: 800 20px/1 sans-serif; color: #fff; opacity: 0; }
.scene .zzz b { font-size: .8em; margin-left: 2px; }

/* 速さごとの走り方 */
.lv0 { --bg: 2.4s; --gd: .28s; --hop: .2s;  --jump: -10px; --lean: -10deg; --wind: .35s; }
.lv1 { --bg: 5s;   --gd: .6s;  --hop: .34s; --jump: -8px;  --lean: -5deg;  --wind: .6s; }
.lv2 { --bg: 10s;  --gd: 1.3s; --hop: .6s;  --jump: -5px; }
.lv3 { --bg: 22s;  --gd: 3s;   --hop: 1.1s; --jump: -3px; }
.lv0 .scene .lines { opacity: 1; }
.lv1 .scene .lines { opacity: .5; }
/* 測定前と圏外は止まる */
.idle .scene *, .lv4 .scene * { animation-play-state: paused; }
.idle .scene .emo { opacity: .6; }
.lv4 .scene .emo { filter: grayscale(1); opacity: .75; }
.lv4 .scene .zzz { animation: zzz 2s ease-in-out infinite; animation-play-state: running; }
@keyframes zzz { 0% { opacity: 0; transform: translateY(14px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ===== キャラ選び:走る見本つきのカード ===== */
#char-grid { display: grid; gap: 10px; }
.char-card {
  font: inherit; color: inherit; text-align: left; width: 100%;
  border: 2px solid transparent; border-radius: 16px; padding: 8px 8px 12px;
  background: rgba(0,0,0,.2); display: block; transition: border-color .2s, background .2s;
}
.char-card:active { transform: scale(.98); }
.char-card.on { border-color: #fff; background: rgba(255,255,255,.18); }
.char-card .head { display: flex; justify-content: space-between; align-items: center; margin: 10px 6px 8px; }
.char-card .nm { font-size: 18px; font-weight: 800; }
.char-card .pick {
  font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.char-card.on .pick { background: #fff; color: #0f172a; }
.char-card .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0 2px; }
.char-card .steps > span {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 26px; line-height: 1.1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.char-card .steps small { font: 600 11px/1.2 -apple-system, "Hiragino Sans", sans-serif; opacity: .8; }
.char-card .steps .bars-mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; }
.char-card .steps .bars-mini i { width: 5px; border-radius: 1px; background: rgba(255,255,255,.25); }
.char-card .steps .bars-mini i.f { background: #fff; }
.char-card .steps .bars-mini i:nth-child(1) { height: 25%; }
.char-card .steps .bars-mini i:nth-child(2) { height: 50%; }
.char-card .steps .bars-mini i:nth-child(3) { height: 75%; }
.char-card .steps .bars-mini i:nth-child(4) { height: 100%; }
/* 小さな見本の景色 */
.scene.mini { height: 78px; border-radius: 12px; }
.scene.mini .strip { font-size: 15px; top: 4px; }
.scene.mini .ground { bottom: 10px; height: 3px; }
.scene.mini .runner { bottom: 12px; }
.scene.mini .emo { font-size: 40px; }
.scene.mini .lines { top: 6px; transform: scale(.65); transform-origin: 0 0; }
.scene.mini .zzz { font-size: 14px; top: -10px; }
.scene.mini .bars-anim {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bars-anim i { width: 14px; border-radius: 3px; background: rgba(255,255,255,.25); animation: barfill 2.4s infinite; }
.bars-anim i:nth-child(1) { height: 14px; }
.bars-anim i:nth-child(2) { height: 26px; animation-delay: .2s; }
.bars-anim i:nth-child(3) { height: 38px; animation-delay: .4s; }
.bars-anim i:nth-child(4) { height: 50px; animation-delay: .6s; }
@keyframes barfill { 0%, 15% { background: rgba(255,255,255,.25); } 30%, 80% { background: #fff; } 100% { background: rgba(255,255,255,.25); } }
#bars i {
  width: 22px; border-radius: 5px; background: rgba(255,255,255,.22);
  transition: background .3s;
}
#bars i:nth-child(1) { height: 25%; }
#bars i:nth-child(2) { height: 50%; }
#bars i:nth-child(3) { height: 75%; }
#bars i:nth-child(4) { height: 100%; }
#bars.lv-1 i:nth-child(-n+1),
#bars.lv-2 i:nth-child(-n+2),
#bars.lv-3 i:nth-child(-n+3),
#bars.lv-4 i:nth-child(-n+4) { background: #fff; }

#speed { font-size: 52px; font-weight: 800; line-height: 1.1; letter-spacing: .02em; }
#meaning { font-size: 18px; font-weight: 600; margin-top: 8px; opacity: .95; }
#latency { font-size: 14px; margin-top: 6px; opacity: .7; font-variant-numeric: tabular-nums; min-height: 1em; }

#warn-banner {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 14px;
  background: #1d4ed8; font-weight: 700; font-size: 16px;
}

/* ===== タブ ===== */
#tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: rgba(0,0,0,.22); border-radius: 12px; padding: 4px; margin-bottom: 10px;
}
#tabs button {
  font: inherit; font-size: 15px; font-weight: 600; color: inherit;
  border: 0; border-radius: 9px; padding: 10px 0; background: transparent; opacity: .75;
}
#tabs button.on { background: rgba(255,255,255,.22); opacity: 1; }

.panel { background: var(--card); border-radius: 16px; padding: 14px; }
canvas { width: 100%; display: block; }
#map-wrap { position: relative; margin: 10px 0 6px; }
#map { border-radius: 10px; touch-action: none; }
#map-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
#map-zoom button {
  font: inherit; font-size: 20px; font-weight: 700; color: #fff; width: 40px; height: 40px;
  border: 0; border-radius: 10px; background: rgba(0,0,0,.45); padding: 0;
}

.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#map-info { font-size: 13px; opacity: .8; font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: 6px; }
.seg button, .danger {
  font: inherit; font-size: 14px; color: inherit; border: 0; border-radius: 10px;
  padding: 8px 14px; background: rgba(0,0,0,.25);
}
.danger { display: block; width: 100%; margin-top: 12px; padding: 12px; background: rgba(0,0,0,.18); opacity: .85; }

/* iOS風スイッチ */
.switch {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 2px; border-top: 1px solid var(--line); font-size: 16px;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch b {
  position: relative; width: 51px; height: 31px; border-radius: 16px;
  background: rgba(0,0,0,.3); transition: background .2s; flex: none;
}
.switch b::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; transition: transform .2s;
}
.switch input:checked + b { background: #34c759; }
.switch input:checked + b::after { transform: translateX(20px); }
.switch input:disabled + b { opacity: .4; }

/* 記録 */
#log { list-style: none; padding: 0; margin: 0; max-height: 50vh; overflow-y: auto; }
#log li {
  display: flex; justify-content: space-between; padding: 12px 2px;
  border-bottom: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums;
}
#log li .tag { font-weight: 700; }
#log li.empty { justify-content: center; opacity: .65; border: 0; }

/* ===== 下部の開始ボタン(親指が届く位置) ===== */
#dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(transparent, rgba(0,0,0,.25));
}
#toggle {
  display: block; width: 100%; max-width: 448px; margin: 0 auto;
  font: inherit; font-size: 20px; font-weight: 800; color: var(--idle);
  border: 0; border-radius: 18px; padding: 18px; background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#toggle.stop { background: rgba(0,0,0,.45); color: #fff; }
#toggle:active { transform: scale(.98); }