*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
::selection { background: transparent; color: inherit; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  overscroll-behavior: none;
  background: #05080f;
  color: #e8eef7;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}

/* ハーネス契約: 上75% #game-stage / 下25% #control-deck */
#game-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  touch-action: none;
}
#game-stage {
  position: relative;
  flex: 0 0 75%;
  height: 75%;
  min-height: 0;
}
#screen-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #101820;
}
#cv {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.hud-box {
  background: rgba(4, 10, 20, .62);
  border: 1px solid rgba(140, 180, 230, .28);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.35;
  backdrop-filter: blur(2px);
}
.hud-box b { display: block; font-size: 16px; letter-spacing: .04em; }
.hud-label { font-size: 10px; color: #9fb6d4; letter-spacing: .12em; }
#limitBox { text-align: center; border-color: rgba(255, 120, 120, .5); }
#limitBox.on { background: rgba(120, 10, 10, .75); border-color: #ff6b6b; }
#limitBox.over { animation: blink .4s steps(1) infinite; }
@keyframes blink { 50% { background: rgba(255, 60, 60, .9); } }
#atsWarn {
  position: absolute;
  top: 40%; left: 0; right: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: #ff5555;
  letter-spacing: .2em;
  text-shadow: 0 0 14px rgba(255, 0, 0, .8);
  display: none;
  pointer-events: none;
  z-index: 2;
}
#atsWarn.on { display: block; animation: blink .3s steps(1) infinite; }
#msg {
  position: absolute;
  left: 0; right: 0;
  bottom: 8px;
  text-align: center;
  font-size: 13px;
  color: #cfe2ff;
  text-shadow: 0 2px 6px #000;
  pointer-events: none;
  z-index: 2;
}

#mute {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: 8px;
  z-index: 12;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(140, 180, 230, .3);
  background: rgba(4, 10, 20, .6);
  color: #cfe2ff;
  font-size: 16px;
  touch-action: manipulation;
}

/* 下25% 運転台（計器 + ノッチ） */
#control-deck {
  position: relative;
  flex: 0 0 25%;
  height: 25%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: linear-gradient(#141b26, #0d131d);
  border-top: 2px solid #2c3a4e;
  overflow: hidden;
  touch-action: none;
}
#panel {
  flex: 0 1 42%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: linear-gradient(#1b2432, #141b26);
  border: 1px solid #2c3a4e;
  border-radius: 10px;
}
#gauge {
  flex: 0 0 auto;
  height: min(100%, 76px);
  width: auto;
  aspect-ratio: 1;
  display: block;
}
#dist { flex: 1 1 auto; min-width: 0; }
.dist-num {
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dist-num small { font-size: 11px; font-weight: 600; color: #9fb6d4; margin-left: 3px; }
#distBarWrap {
  height: 8px;
  background: #0b111b;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid #2c3a4e;
}
#distBar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #39d98a, #f7c948 70%, #ff5d5d);
  transition: width .08s linear;
}
#notchWrap { flex: 0 0 auto; text-align: center; min-width: 52px; }
#notchBig { font-size: clamp(18px, 5vw, 24px); font-weight: 900; line-height: 1.05; letter-spacing: .03em; }
#notchSegs { display: flex; gap: 1.5px; justify-content: center; margin-top: 4px; }
.seg { width: 4px; height: 11px; background: #2a3547; border-radius: 1.5px; }
.seg.on-b { background: #f7c948; }
.seg.on-p { background: #39d98a; }
.seg.on-e { background: #ff4d4d; }
.seg.n { height: 7px; align-self: center; background: #4a5a70; }

#controls {
  flex: 1 1 58%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
}
.row {
  display: flex;
  gap: 6px;
  flex: 1 1 0;
  min-height: 48px;
}
.game-btn {
  min-height: 48px;
  min-width: 48px;
  flex: 1 1 0;
  border: none;
  border-radius: 10px;
  color: #0e141d;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  background: #7f8fa6;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  transition: transform .08s ease, opacity .08s ease, filter .08s ease;
  will-change: transform;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
}
.game-btn small { font-size: 9px; font-weight: 700; opacity: .75; letter-spacing: .06em; }
.game-btn:active,
.game-btn.is-pressed { transform: scale(.92); opacity: .9; }
.game-btn:disabled { opacity: .4; pointer-events: none; }
.row.small .game-btn { min-height: 48px; font-size: 13px; }
#btnBrake { background: #f7c948; }
#btnRelease { background: #39d98a; }
#btnEb { background: #ff5d5d; color: #fff; }
#btnN { background: #9fb0c6; }
#btnHorn { background: #6fa8dc; }
#btnBrake,
#btnRelease { min-height: 48px; font-size: 16px; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(circle at 50% 32%, #17263c 0%, #070c14 70%);
  overflow-y: auto;
}
.overlay.on { display: flex; }
h1 { font-size: 27px; margin: 0 0 2px; letter-spacing: .06em; }
.sub { font-size: 12px; color: #9fb6d4; margin-bottom: 18px; letter-spacing: .1em; }
.pick {
  width: 100%;
  max-width: 380px;
  display: block;
  text-align: left;
  margin-bottom: 10px;
  padding: 12px 14px;
  min-height: 56px;
  border: 2px solid #34506f;
  border-radius: 14px;
  background: linear-gradient(#1a2941, #131d2e);
  color: #e8eef7;
  font-family: inherit;
  transition: transform .08s ease, border-color .08s ease;
  touch-action: manipulation;
  cursor: pointer;
}
.pick:active,
.pick.is-pressed { transform: scale(.96); border-color: #6fa8dc; }
.pick .nm { font-size: 19px; font-weight: 800; }
.pick .df { font-size: 12px; color: #ffd166; margin-left: 8px; font-weight: 700; }
.pick .ds { font-size: 11.5px; color: #a8bcd6; margin-top: 3px; line-height: 1.5; }
.pick .bs { font-size: 11px; color: #6fd6a8; margin-top: 3px; }
.tips { max-width: 380px; font-size: 11.5px; color: #8fa6c4; line-height: 1.75; margin-top: 6px; }
.tips b { color: #cfe2ff; }

#rGrade { font-size: 62px; font-weight: 900; line-height: 1; margin: 4px 0 2px; }
#rTitle { font-size: 19px; font-weight: 800; margin-bottom: 12px; letter-spacing: .05em; }
#rErr { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
#rErr small { font-size: 14px; color: #9fb6d4; }
.rtable { width: 100%; max-width: 340px; margin: 12px 0 6px; font-size: 13px; }
.rtable div { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px solid #24354c; }
.rtable span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }
#rComment { font-size: 12.5px; color: #a8bcd6; line-height: 1.7; max-width: 340px; text-align: center; margin: 8px 0 14px; }
.rbtns { display: flex; gap: 10px; width: 100%; max-width: 340px; }