:root {
      color-scheme: dark;
      --bg: #070b15;
      --panel: rgba(13, 20, 36, .94);
      --text: #f4f7ff;
      --muted: #aebbd1;
      --accent: #64e6ff;
      --warn: #ffb454;
      --danger: #ff6e7d;
      --border: rgba(255,255,255,.13);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% -15%, #243556 0, var(--bg) 55%); color: var(--text); font-family: Inter, system-ui, "Segoe UI", "Noto Sans JP", sans-serif; }
    body { padding: 16px; }
    main { width: min(1280px, 100%); margin: 0 auto; }
    header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:14px 18px; border:1px solid var(--border); border-radius:16px; background:var(--panel); }
    header h1 { margin:0; font-size:clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing:.04em; }
    header p { margin:4px 0 0; color:var(--muted); }
    .badge { flex:none; padding:8px 12px; border:1px solid rgba(100,230,255,.45); border-radius:999px; color:var(--accent); font-weight:900; }
    .shell { overflow:hidden; border:1px solid var(--border); border-radius:18px; background:#03060d; box-shadow:0 24px 70px rgba(0,0,0,.38); }
    .canvas-wrap { position:relative; }
    canvas { display:block; width:100%; aspect-ratio:16/9; background:#0a1120; touch-action:none; user-select:none; outline:none; }
    .overlay { position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:rgba(2,5,12,.78); backdrop-filter:blur(6px); }
    .overlay[hidden] { display:none; }
    .card { width:min(760px,100%); padding:clamp(22px,4vw,38px); border:1px solid var(--border); border-radius:20px; background:rgba(12,20,36,.97); text-align:center; }
    .card h2 { margin:0 0 10px; font-size:clamp(1.8rem,4vw,3rem); }
    .card p { color:var(--muted); line-height:1.7; }
    .result-card { width:min(880px,100%); overflow:hidden; position:relative; }
    .result-card::before { content:""; position:absolute; inset:0 0 auto; height:7px; background:repeating-linear-gradient(90deg,#fff 0 24px,#111 24px 48px); opacity:.85; }
    .result-kicker { margin-top:6px; color:var(--accent); font-weight:1000; letter-spacing:.24em; font-size:.78rem; }
    .result-rank { margin:2px 0 -10px; font-size:clamp(5rem,14vw,9rem); line-height:1; font-style:italic; font-weight:1000; letter-spacing:-.08em; color:#fff; text-shadow:0 0 18px rgba(100,230,255,.72),0 8px 0 rgba(0,0,0,.32); }
    .result-card h2 { margin:0 0 10px; color:var(--warn); letter-spacing:.08em; }
    .result-summary { margin:0 auto 16px; }
    .result-columns { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-top:16px; text-align:left; }
    .result-panel { padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.045); }
    .result-panel h3 { margin:0 0 10px; color:#fff; font-size:.83rem; letter-spacing:.14em; }
    .standing-row { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; min-height:32px; padding:5px 7px; border-radius:8px; color:#dfe8f7; }
    .standing-row.you { background:rgba(100,230,255,.14); color:#fff; font-weight:900; }
    .standing-pos { font-weight:1000; color:var(--accent); }
    .standing-gap { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.83rem; }
    .result-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .stat-box { padding:9px 10px; border-radius:10px; background:rgba(0,0,0,.24); }
    .stat-box span { display:block; color:var(--muted); font-size:.7rem; letter-spacing:.08em; }
    .stat-box strong { display:block; margin-top:2px; color:#fff; font-size:1.02rem; }
    @media (max-width:700px) { .result-columns { grid-template-columns:1fr; } }
    .controls { margin:18px 0; padding:13px 15px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.045); color:var(--muted); line-height:1.8; text-align:left; }
    .stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0 8px; text-align:left; }
    .stage-button { min-height:156px; padding:16px; border:1px solid var(--border); border-radius:15px; color:var(--text); background:rgba(255,255,255,.052); text-align:left; transition:transform .14s ease,border-color .14s ease,background .14s ease; }
    .stage-button:hover,.stage-button:focus-visible { transform:translateY(-2px); border-color:rgba(100,230,255,.62); background:rgba(100,230,255,.105); }
    .stage-button strong { display:block; margin-bottom:5px; color:var(--accent); font-size:1.12rem; }
    .stage-button em { display:inline-block; margin-bottom:9px; padding:3px 7px; border-radius:999px; color:#07141b; background:var(--warn); font-size:.72rem; font-style:normal; font-weight:900; }
    .stage-button span { display:block; color:var(--muted); font-size:.88rem; line-height:1.45; }
    .rival-key { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin:12px 0 0; color:var(--muted); font-size:.85rem; }
    .rival-key b { color:#fff; }
    .sound-row { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 2px; }
    .sound-status { color:var(--muted); font-size:.82rem; }
    .sound-button[aria-pressed="true"] { color:#041317; background:var(--accent); }
    button { border:1px solid transparent; border-radius:12px; padding:12px 19px; font:inherit; font-weight:900; cursor:pointer; }
    .primary { color:#041317; background:var(--accent); }
    .secondary { color:var(--text); background:rgba(255,255,255,.08); border-color:var(--border); }
    .actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
    .footer { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 15px; border-top:1px solid var(--border); background:var(--panel); color:var(--muted); }
    .footer strong { color:var(--text); }
    .footer button { padding:8px 12px; }
    .note { margin:10px 3px 0; color:var(--muted); font-size:.9rem; }
    @media (max-width:760px) { header,.footer { align-items:flex-start; flex-direction:column; } .badge { align-self:flex-start; } .stage-grid { grid-template-columns:1fr; } }


header {
  background:
    radial-gradient(circle at 20% 10%, rgba(100,230,255,.10), transparent 32%),
    linear-gradient(135deg, rgba(255,180,84,.08), rgba(100,230,255,.08)),
    var(--panel);
}
header h1.site-title {
  margin:0;
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  line-height:1.02;
  letter-spacing:.06em;
  font-weight:1000;
  color:#ffffff;
  text-shadow:0 0 20px rgba(100,230,255,.32), 0 4px 0 rgba(0,0,0,.34);
}
.site-tagline {
  margin:8px 0 0;
  font-size:clamp(.92rem, 1.8vw, 1.08rem);
  color:#d8e6ff;
}
.title-card {
  width:min(860px,100%);
  background:
    radial-gradient(circle at 50% 0%, rgba(100,230,255,.10), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(12,20,36,.97);
}
.title-logo {
  margin:4px 0 6px !important;
  font-size:clamp(2.4rem, 7vw, 5.3rem) !important;
  line-height:1.02;
  letter-spacing:.04em;
  font-weight:1000;
  color:#fff;
  text-shadow:
    0 0 0 rgba(0,0,0,0),
    0 0 18px rgba(100,230,255,.28),
    0 4px 0 rgba(0,0,0,.35),
    0 0 36px rgba(255,180,84,.16);
}
.title-english {
  margin:0 0 12px;
  color:var(--accent);
  font-size:clamp(.82rem, 1.6vw, 1rem);
  font-weight:1000;
  letter-spacing:.28em;
}
.title-catch {
  margin:0 auto 10px;
  max-width:42rem;
  color:#f3f7ff !important;
  font-size:clamp(1rem, 1.8vw, 1.18rem);
  font-weight:700;
}
.section-label {
  margin:16px auto 10px;
  width:fit-content;
  padding:7px 12px;
  border:1px solid rgba(100,230,255,.32);
  border-radius:999px;
  color:var(--accent);
  font-size:.8rem;
  font-weight:1000;
  letter-spacing:.18em;
  background:rgba(100,230,255,.08);
}
.note {
  color:#d7dff0;
}
@media (max-width:760px) {
  .title-logo {
    font-size:clamp(2.1rem, 10vw, 3.5rem) !important;
  }
  .title-english {
    letter-spacing:.16em;
  }
}

/* Portrait-first mobile layout and two-hand multi-touch controls */
body {
  min-width: 0;
  overflow-x: hidden;
}
.canvas-wrap {
  isolation: isolate;
}
.overlay {
  z-index: 20;
  overflow: hidden;
}
.orientation-hint,
.mobile-controls,
.mobile-stage-hint {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    min-height: 100%;
    overscroll-behavior-x: none;
  }
  body {
    padding: 0;
    background: #060a13;
  }
  main {
    width: 100%;
  }
  header {
    margin: 0;
    padding: 10px 12px;
    border-width: 0 0 1px;
    border-radius: 0;
  }
  header h1.site-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .site-tagline {
    margin-top: 3px;
    font-size: .76rem;
  }
  .badge {
    padding: 6px 8px;
    font-size: .7rem;
  }
  .shell {
    overflow: visible;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .canvas-wrap {
    background: #02050b;
  }
  canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .keyboard-help {
    display: none;
  }
  .footer {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .footer .actions {
    width: 100%;
    justify-content: center;
    gap: 7px;
  }
  .footer button {
    min-height: 40px;
    padding: 8px 12px;
    font-size: .78rem;
  }
  .note {
    display: none;
  }

  /* The title menu becomes its own clean portrait page. */
  body.menu-open {
    min-height: 100svh;
  }
  body.menu-open header,
  body.menu-open .footer,
  body.menu-open .note,
  body.menu-open canvas,
  body.menu-open .mobile-controls {
    display: none;
  }
  body.menu-open .shell,
  body.menu-open .canvas-wrap {
    min-height: 100svh;
    border: 0;
    background:
      radial-gradient(circle at 50% 8%, rgba(100,230,255,.14), transparent 34%),
      linear-gradient(180deg, #101a30 0, #060a13 64%);
  }
  body.menu-open #titleOverlay {
    position: relative;
    inset: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100svh;
    padding: max(24px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
  }
  body.menu-open .title-card {
    width: min(480px, 100%);
    margin: 0 auto;
    padding: 18px 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.menu-open .title-logo {
    margin: 0 0 7px !important;
    font-size: clamp(2.15rem, 11vw, 3.55rem) !important;
    line-height: 1.08;
    text-wrap: balance;
  }
  body.menu-open .title-english {
    margin-bottom: 9px;
    font-size: .72rem;
    letter-spacing: .14em;
  }
  body.menu-open .title-catch {
    margin: 0 auto 18px;
    max-width: 21rem;
    font-size: .88rem;
    line-height: 1.55;
  }
  body.menu-open .section-label {
    margin: 0 auto 11px;
    padding: 5px 10px;
    font-size: .7rem;
  }
  body.menu-open .title-card > p:not(.title-catch),
  body.menu-open .title-card .controls,
  body.menu-open .title-card .rival-key,
  body.menu-open .sound-status {
    display: none;
  }
  body.menu-open .stage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
  }
  body.menu-open .stage-button {
    position: relative;
    min-height: 0;
    padding: 13px 14px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    text-align: left;
  }
  body.menu-open .stage-button strong {
    display: block;
    margin: 0 76px 3px 0;
    font-size: .96rem;
    line-height: 1.25;
  }
  body.menu-open .stage-button em {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    padding: 3px 7px;
    font-size: .64rem;
  }
  body.menu-open .stage-button > span {
    display: none;
  }
  body.menu-open .mobile-stage-hint {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
  }
  body.menu-open .sound-row {
    margin: 14px 0 0;
  }
  body.menu-open .sound-button {
    min-width: 150px;
    min-height: 42px;
  }

  /* Result stays scrollable because it contains detailed statistics. */
  #resultOverlay:not([hidden]) {
    position: fixed;
    inset: 0;
    align-items: start;
    padding: max(12px, env(safe-area-inset-top)) 10px max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #resultOverlay::-webkit-scrollbar {
    display: none;
  }
  .result-card {
    margin: auto;
  }
  .result-columns {
    grid-template-columns: 1fr;
  }

  /* The touch panel is below the 16:9 canvas, not on top of the road. */
  body:not(.menu-open):not(.result-open) .mobile-controls,
  body.result-open .mobile-controls {
    display: none;
  }
  body:not(.menu-open):not(.result-open) .mobile-controls {
    display: block;
    position: relative;
    inset: auto;
    z-index: 8;
    min-height: 206px;
    padding: 9px 10px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(circle at 18% 45%, rgba(100,230,255,.08), transparent 28%),
      linear-gradient(180deg, #0d1525, #070c16);
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  .mobile-control-caption {
    margin-bottom: 7px;
    color: rgba(255,255,255,.55);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-align: center;
  }
  .mobile-drive-layout {
    display: grid;
    grid-template-columns: minmax(190px, 1.35fr) minmax(112px, .8fr);
    gap: 12px;
    width: min(570px, 100%);
    margin: 0 auto;
  }
  .mobile-left-hand,
  .mobile-right-hand {
    min-width: 0;
  }
  .mobile-left-hand {
    display: grid;
    align-items: stretch;
  }
  .mobile-right-hand {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
  }
  .mobile-steering,
  .mobile-actions {
    position: static;
    display: grid;
    pointer-events: auto;
  }
  .mobile-steering {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mobile-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .touch-control {
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    border: 2px solid rgba(255,255,255,.32);
    border-radius: 18px;
    color: #fff;
    background: rgba(5,12,24,.82);
    box-shadow: 0 8px 20px rgba(0,0,0,.34), inset 0 0 18px rgba(255,255,255,.05);
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }
  .touch-control .control-symbol {
    font-size: 1.15rem;
    font-weight: 1000;
    line-height: 1;
  }
  .touch-control small {
    margin-top: 6px;
    color: rgba(255,255,255,.72);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .touch-control.is-active,
  .touch-control:active {
    transform: scale(.96);
    border-color: #fff;
    background: rgba(100,230,255,.38);
    box-shadow: 0 0 22px rgba(100,230,255,.52), inset 0 0 20px rgba(255,255,255,.16);
  }
  .accel-control {
    height: 94px;
    border-color: rgba(100,230,255,.75);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(21,126,148,.86), rgba(10,71,86,.92));
  }
  .accel-control .control-symbol {
    font-size: 1.38rem;
    letter-spacing: .05em;
  }
  .steer-control {
    height: 154px;
    border-color: rgba(255,255,255,.46);
  }
  .steer-control .control-symbol {
    font-size: 2rem;
  }
  .brake-control,
  .boost-control {
    height: 52px;
    border-radius: 14px;
  }
  .brake-control {
    border-color: rgba(255,110,125,.62);
    background: rgba(92,25,39,.80);
  }
  .boost-control {
    border-color: rgba(255,180,84,.68);
    background: rgba(104,61,17,.82);
  }
  .brake-control .control-symbol,
  .boost-control .control-symbol {
    font-size: .72rem;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 430px) {
  .mobile-drive-layout {
    grid-template-columns: minmax(180px, 1.28fr) minmax(102px, .72fr);
    gap: 8px;
  }
  body:not(.menu-open):not(.result-open) .mobile-controls {
    min-height: 192px;
    padding-inline: 8px;
  }
  .accel-control {
    height: 86px;
  }
  .steer-control {
    height: 142px;
  }
  .brake-control,
  .boost-control {
    height: 48px;
  }
  .touch-control small {
    display: none;
  }
}

@media (max-height: 520px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  /* Landscape is still supported, but portrait remains the intended layout. */
  header,
  .note {
    display: none;
  }
  body:not(.menu-open):not(.result-open) .mobile-controls {
    min-height: 148px;
  }
  .mobile-control-caption {
    display: none;
  }
  .mobile-drive-layout {
    grid-template-columns: minmax(230px, 1.3fr) minmax(120px, .7fr);
  }
  .accel-control {
    height: 72px;
  }
  .steer-control {
    height: 124px;
  }
  .brake-control,
  .boost-control {
    height: 44px;
  }
}

/* Keep the desktop title menu inside the 16:9 game area. */
.title-card {
  padding: clamp(20px, 2.4vw, 30px);
}
.title-card .controls,
.title-card .rival-key {
  display: none;
}
@media (min-width: 901px) {
  .title-card .stage-button {
    min-height: 132px;
    padding: 13px 14px;
  }
  .title-card .stage-grid {
    margin-top: 14px;
  }
  .title-card .sound-row {
    margin-top: 10px;
  }
}


/* Explicit audio state indication */
#soundToggleButton,
#soundStartButton {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#soundToggleButton[data-sound="on"],
#soundStartButton[data-sound="on"] {
  color: #04140d;
  background: #5cf0a4;
  border-color: #9affc8;
  box-shadow: 0 0 0 1px rgba(92,240,164,.22), 0 0 18px rgba(92,240,164,.25);
}
#soundToggleButton[data-sound="off"],
#soundStartButton[data-sound="off"] {
  color: #ffe7eb;
  background: #7b2838;
  border-color: #ff7184;
  box-shadow: 0 0 0 1px rgba(255,113,132,.16);
}