/* Layout: landscape car screen — instrument on the left (~58 %), sound picker and controls on the
   right. Five skins re-skin everything through tokens: body[data-skin] × body[data-mode]. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-normal-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-normal-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/barlow-italic-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url(fonts/barlow-italic-800.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/manrope-normal-300-700.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dmserif-normal-400.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/dmserif-italic-400.woff2) format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pixel-normal-400.woff2) format("woff2"); }
@font-face { font-family: "DotGothic16"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dotgothic-normal-400.woff2) format("woff2"); }
@font-face { font-family: "Ma Shan Zheng"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/brush-normal-400.woff2) format("woff2"); }

:root {
  --cjk: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --ui: Manrope, var(--cjk);
  --cond: "Barlow Condensed", "Arial Narrow", var(--cjk);
  /* race (default) */
  --bg: #0a0b0d; --bg-art: repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px);
  --fg: #f4f4f2; --muted: #8b8f94; --line: #23262a; --card: linear-gradient(180deg, #17191c, #111316); --card-solid: #15171a;
  --accent: #ff3b2f; --accent-fg: #ffffff; --sel-ring: #ff3b2f; --sel-glow: 0 0 22px -8px rgba(255,59,47,.7);
  --seg: #15171a; --sel: #f4f4f2; --sel-fg: #0a0b0d; --radius: 14px;
  --title-font: var(--cond); --title-style: italic; --title-weight: 700; --title-case: uppercase; --title-track: .06em;
  --start-font: var(--cond); --start-style: italic; --start-size: 26px;
  --overlay: rgba(0,0,0,.55);
  color-scheme: dark;
}
body[data-skin="minimal"] {
  --bg: #f4f4f4; --bg-art: none; --fg: #171a1c; --muted: #6f7377; --line: #e3e3e3; --card: #ffffff; --card-solid: #ffffff;
  --accent: #3e6ae1; --accent-fg: #fff; --sel-ring: #3e6ae1; --sel-glow: none;
  --seg: #e8e8e8; --sel: #ffffff; --sel-fg: #171a1c; --radius: 12px;
  --title-font: var(--ui); --title-style: normal; --title-weight: 600; --title-case: none; --title-track: 0;
  --start-font: var(--ui); --start-style: normal; --start-size: 19px; --overlay: rgba(0,0,0,.25);
  color-scheme: light;
}
body[data-skin="minimal"][data-mode="dark"] {
  --bg: #121314; --fg: #ededed; --muted: #8f9396; --line: #26282a; --card: #1d1f21; --card-solid: #1d1f21;
  --seg: #1d1f21; --sel: #3a3d40; --sel-fg: #fff; --overlay: rgba(0,0,0,.55); color-scheme: dark;
}
body[data-skin="vintage"] {
  --bg: #150e0a; --bg-art: radial-gradient(120% 90% at 28% 42%, #2c1f15 0%, #150e0a 70%);
  --fg: #efe2c8; --muted: #a8977b; --line: #3e2e1f; --card: linear-gradient(180deg, #2b2019, #20170f); --card-solid: #241a12;
  --accent: #c99a52; --accent-fg: #1d140d; --sel-ring: #c99a52; --sel-glow: none;
  --seg: #21180f; --sel: #c99a52; --sel-fg: #1d140d; --radius: 10px;
  --title-font: "DM Serif Display", Georgia, var(--cjk); --title-style: italic; --title-weight: 400; --title-case: none; --title-track: .01em;
  --start-font: "DM Serif Display", Georgia, var(--cjk); --start-style: normal; --start-size: 24px;
}
body[data-skin="pixel"] {
  --bg: #000; --bg-art: none; --fg: #fcfcfc; --muted: #8888aa; --line: #26264a; --card: #0b0b1a; --card-solid: #0b0b1a;
  --accent: #e40058; --accent-fg: #fff; --sel-ring: #3cbcfc; --sel-glow: none;
  --seg: #0b0b1a; --sel: #3cbcfc; --sel-fg: #000; --radius: 0px;
  --title-font: "Press Start 2P", "DotGothic16", monospace; --title-style: normal; --title-weight: 400; --title-case: uppercase; --title-track: 0;
  --start-font: "Press Start 2P", "DotGothic16", monospace; --start-style: normal; --start-size: 16px;
}
body[data-skin="wind"] {
  --bg: #ece4d3; --bg-art: none; --fg: #1d1a16; --muted: #6d6352; --line: rgba(29,26,22,.16); --card: rgba(255,255,255,.38); --card-solid: #f3ecdf;
  --accent: #b8352a; --accent-fg: #fff; --sel-ring: #1d1a16; --sel-glow: none;
  --seg: rgba(29,26,22,.07); --sel: #1d1a16; --sel-fg: #f1eadb; --radius: 4px;
  --title-font: "DM Serif Display", "Ma Shan Zheng", "Kaiti SC", "STKaiti", serif; --title-style: normal; --title-weight: 400; --title-case: none; --title-track: .04em;
  --start-font: "DM Serif Display", "Ma Shan Zheng", "Kaiti SC", serif; --start-style: normal; --start-size: 28px; --overlay: rgba(20,16,10,.35);
  color-scheme: light;
}
body[data-skin="wind"][data-mode="dark"] {
  --bg: #14130f; --fg: #e8dcbe; --muted: #a99d82; --line: rgba(232,220,190,.15); --card: rgba(255,255,255,.04); --card-solid: #1d1b16;
  --seg: rgba(232,220,190,.06); --sel: #e8dcbe; --sel-fg: #14130f; --overlay: rgba(0,0,0,.55); color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); background-image: var(--bg-art); color: var(--fg); font-family: var(--ui); transition: background-color .3s, color .3s; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app { display: grid; grid-template-columns: minmax(0, 58fr) minmax(300px, 42fr); height: 100%; }
.dash { position: relative; display: flex; flex-direction: column; min-height: 0; }
.status { position: absolute; left: 28px; top: 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; z-index: 2; color: var(--muted); }
.brand { font-family: var(--title-font); font-style: var(--title-style); font-weight: 700; letter-spacing: .3em; color: var(--fg); font-size: 15px; }
body[data-skin="wind"] .brand, body[data-skin="vintage"] .brand { letter-spacing: .15em; font-weight: 400; font-size: 18px; }
body[data-skin="pixel"] .brand { font-size: 11px; letter-spacing: .1em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.on { background: #22c55e; box-shadow: 0 0 8px #22c55e; } .dot.warn { background: #f59e0b; }
#gauge { flex: 1; width: 100%; min-height: 0; touch-action: none; display: block; }
.dash-foot { display: flex; flex-direction: column; gap: 10px; padding: 0 28px 22px; }
.manual, .pedals { display: flex; gap: 12px; justify-content: center; align-items: center; }
.hint { color: var(--muted); font-size: 13px; }
.linkish { text-decoration: underline dotted; text-underline-offset: 3px; }
.gearbtn { width: 84px; height: 62px; border-radius: var(--radius); background: var(--card); background-color: var(--card-solid); border: 1px solid var(--line); font-size: 28px; }
.pedal { flex: 1; height: 70px; border-radius: var(--radius); font-size: 17px; font-weight: 600; background: var(--card); background-color: var(--card-solid); border: 1px solid var(--line); user-select: none; touch-action: none; }
.pedal.active { background: var(--sel); color: var(--sel-fg); }
.pedal.auto { flex: .8; font-size: 14px; color: var(--muted); }

.panel { display: flex; flex-direction: column; gap: 16px; padding: 22px 28px 22px 8px; min-height: 0; overflow-y: auto; }
.ptop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tabs { display: flex; gap: 22px; }
.tabs button { font-family: var(--title-font); font-style: var(--title-style); font-weight: var(--title-weight); text-transform: var(--title-case); letter-spacing: var(--title-track); font-size: 20px; color: var(--muted); padding: 6px 0; border-bottom: 3px solid transparent; }
.tabs button.on { color: var(--fg); border-color: var(--accent); }
body[data-skin="pixel"] .tabs button { font-size: 12px; }
.iconbtn { height: 44px; padding: 0 16px; border-radius: var(--radius); background: var(--card); background-color: var(--card-solid); border: 1px solid var(--line); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.iconbtn svg { width: 18px; height: 18px; }

.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: var(--radius); background: var(--card); background-color: var(--card-solid); border: 1px solid var(--line); min-height: 70px; min-width: 0; transition: box-shadow .2s, border-color .2s; }
.pack svg { width: 30px; height: 30px; flex: none; color: var(--accent); }
.pack span { min-width: 0; }
.pack b { display: block; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack.sel { border-color: var(--sel-ring); box-shadow: inset 0 0 0 1px var(--sel-ring), var(--sel-glow); }
body[data-skin="minimal"] .pack { border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
body[data-skin="minimal"] .pack.sel { box-shadow: inset 0 0 0 2px var(--sel-ring); }
body[data-skin="vintage"] .pack b { font-family: "DM Serif Display", Georgia, var(--cjk); font-weight: 400; font-size: 17px; }
body[data-skin="pixel"] .pack { border-width: 2px; }
body[data-skin="pixel"] .pack b { font-family: "DotGothic16", var(--cjk); font-weight: 400; }
body[data-skin="wind"] .pack { border-color: transparent; border-bottom: 1px solid var(--line); background: transparent; }
body[data-skin="wind"] .pack.sel { box-shadow: none; border-bottom: 2px solid var(--accent); }
body[data-skin="wind"] .pack b { font-family: "DM Serif Display", "Ma Shan Zheng", "Kaiti SC", serif; font-weight: 400; font-size: 19px; }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ctl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctl.wide { grid-column: 1 / -1; }
.ctl > label { font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }
.seg { display: flex; background: var(--seg); border-radius: calc(var(--radius) * .8); padding: 3px; border: 1px solid var(--line); }
.seg button { flex: 1; height: 40px; border-radius: calc(var(--radius) * .65); font-size: 14px; color: var(--muted); white-space: nowrap; }
.seg button.sel { background: var(--sel); color: var(--sel-fg); font-weight: 650; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 30px; }
input[type=text], select { height: 42px; border-radius: calc(var(--radius) * .8); border: 1px solid var(--line); background: var(--card-solid); color: var(--fg); padding: 0 10px; font: inherit; font-size: 14px; width: 100%; }

.start { margin-top: auto; min-height: 64px; border-radius: var(--radius); background: var(--accent); color: var(--accent-fg); font-family: var(--start-font); font-style: var(--start-style); font-size: var(--start-size); font-weight: 700; letter-spacing: .06em; transition: transform .1s; }
.start:active { transform: scale(.985); }
body[data-skin="race"] .start { box-shadow: 0 0 34px -12px var(--accent); }
body[data-skin="vintage"] .start { background: linear-gradient(180deg, #d7ad66, #a67b39); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); font-weight: 400; }
body[data-skin="pixel"] .start { box-shadow: 4px 4px 0 #3cbcfc; font-weight: 400; }
body[data-skin="wind"] .start { font-weight: 400; }
.start.on { background: var(--card-solid); color: var(--fg); border: 1px solid var(--line); box-shadow: none; }
.note { color: var(--muted); font-size: 11.5px; margin: 0; line-height: 1.5; }

/* ── Overlays: settings, help, music warning, update bar, toast ── */
.tune { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 24px; }
.tune-card { background: var(--card-solid); color: var(--fg); border-radius: calc(var(--radius) + 4px); width: min(880px, 100%); max-height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.tune-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.tune-head h2 { margin: 0; font-family: var(--title-font); font-style: var(--title-style); font-weight: var(--title-weight); font-size: 24px; letter-spacing: var(--title-track); }
body[data-skin="pixel"] .tune-head h2 { font-size: 14px; }
.ghost { height: 40px; padding: 0 14px; border-radius: calc(var(--radius) * .8); background: var(--seg); border: 1px solid var(--line); font-size: 14px; margin-left: 8px; }
.ghost.x { width: 40px; padding: 0; font-size: 20px; }
.tune-body { overflow-y: auto; padding: 4px 22px 16px; }
.tune-foot { padding: 12px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.tsec { padding: 16px 0; border-bottom: 1px solid var(--line); }
.tsec h3 { margin: 0 0 4px; font-size: 16px; font-family: var(--title-font); font-style: var(--title-style); font-weight: var(--title-weight); letter-spacing: var(--title-track); }
body[data-skin="pixel"] .tsec h3 { font-size: 11px; line-height: 1.8; }
.tscope { font-family: var(--ui); font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); background: var(--seg); border-radius: 6px; padding: 2px 7px; margin-left: 8px; vertical-align: 2px; letter-spacing: 0; }
.thelp { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.trow { display: grid; grid-template-columns: 1fr minmax(220px, 320px); gap: 16px; align-items: center; padding: 10px 0; }
.trow.wide { grid-template-columns: 1fr minmax(260px, 400px); }
.tlabel b { display: block; font-size: 14px; font-weight: 650; }
.tlabel small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 3px; }
.tnote { color: #d97706 !important; }
.tctl { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.tctl input[type=range] { flex: 1; }
.tval { min-width: 82px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.ttoggle { width: 72px; height: 40px; border-radius: calc(var(--radius) * .8); background: var(--seg); color: var(--muted); font-weight: 650; border: 1px solid var(--line); }
.ttoggle.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tctl .seg { flex: 1; }
.tsec details summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0; }
.tdiag { color: var(--muted); font-size: 11.5px; margin: 14px 0 0; }

.help-card { width: min(640px, 100%); }
.help-body { padding: 16px 22px; display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.help-body > p, .help-body > .thelp { grid-column: 1 / -1; margin: 0; }
.help-body ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.wheel { width: 100%; color: var(--fg); }
.help-actions { display: flex; gap: 10px; padding: 0 22px 20px; }
.help-actions .start { flex: 1; margin: 0; min-height: 48px; font-size: 16px; }
.help-actions .ghost { height: 48px; margin: 0; flex: 1; }
#volPanel .help-body { grid-template-columns: 1fr; }
.updbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--accent); color: var(--accent-fg); padding: 10px 14px 10px 18px; border-radius: 14px; display: flex; gap: 12px; align-items: center; z-index: 20; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.updbar button { background: var(--accent-fg); color: var(--accent); border-radius: 10px; height: 36px; padding: 0 14px; font-weight: 650; }
.updbar small { opacity: .75; font-size: 12px; }
.toast { position: fixed; right: 18px; top: 70px; max-width: 360px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.6; z-index: 20; box-shadow: 0 6px 24px rgba(0,0,0,.25); cursor: pointer; }

@media (max-width: 860px) and (orientation: portrait) {
  html, body { overflow: auto; }
  .app { grid-template-columns: 1fr; height: auto; }
  #gauge { height: 380px; flex: none; }
  .panel { padding: 8px 16px 20px; overflow: visible; }
  .dash-foot { padding: 0 16px 12px; }
  .status { left: 16px; }
  .trow, .trow.wide { grid-template-columns: 1fr; gap: 8px; }
  .tctl { justify-content: stretch; }
  .tune { padding: 0; } .tune-card { border-radius: 0; height: 100%; }
  .help-body { grid-template-columns: 1fr; } .wheel { max-width: 200px; margin: 0 auto; } .help-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Material pass (race & vintage), after the concept renders ── */
body[data-skin="race"] .tabs, body[data-skin="vintage"] .tabs { flex: 1; gap: 0; padding: 4px; border-radius: var(--radius); background: rgba(0,0,0,.35); border: 1px solid var(--line); }
body[data-skin="race"] .tabs button, body[data-skin="vintage"] .tabs button { flex: 1; border: 0; border-radius: calc(var(--radius) * .75); padding: 10px 0; }
body[data-skin="race"] .tabs button.on { background: linear-gradient(180deg, #e0281d, #9d150d); color: #fff; box-shadow: 0 0 18px -4px rgba(255,59,47,.7), inset 0 1px 0 rgba(255,255,255,.25); }
body[data-skin="vintage"] .tabs button.on { background: linear-gradient(180deg, #5a4026, #3a2816); color: #f1d79a; box-shadow: inset 0 0 0 1px #c99a52, 0 0 16px -6px rgba(201,154,82,.7); }

body[data-skin="race"] .pack, body[data-skin="vintage"] .pack { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 128px; padding: 14px 10px; }
body[data-skin="race"] .pack svg, body[data-skin="vintage"] .pack svg { width: 44px; height: 44px; }
body[data-skin="race"] .pack b { font-size: 16px; }
body[data-skin="race"] .pack svg { color: #c9ccd0; }
body[data-skin="race"] .pack.sel { background: linear-gradient(180deg, #3a0f0c, #1a0a09); }
body[data-skin="race"] .pack.sel svg { color: #ff3b2f; filter: drop-shadow(0 0 6px rgba(255,59,47,.6)); }
body[data-skin="vintage"] .pack.sel { background: linear-gradient(180deg, #4a3520, #2b1e12); box-shadow: inset 0 0 0 1px #c99a52, 0 0 22px -8px rgba(201,154,82,.8); }

body[data-skin="race"] .ctl, body[data-skin="vintage"] .ctl { padding: 8px 10px 10px; border-radius: var(--radius); background: rgba(0,0,0,.28); border: 1px solid var(--line); }
body[data-skin="race"] .seg { background: #0b0c0e; }
body[data-skin="race"] .seg button.sel { background: linear-gradient(180deg, #e0281d, #9d150d); color: #fff; }

body[data-skin="race"] .start { background: linear-gradient(180deg, #ff4d3d 0%, #d01d12 55%, #a3130b 100%); box-shadow: 0 0 40px -10px rgba(255,59,47,.9), inset 0 1px 0 rgba(255,255,255,.35); }
body[data-skin="race"] .start:not(.on)::before { content: "▶"; font-style: normal; margin-right: 14px; font-size: .8em; }
body[data-skin="vintage"] .start { position: relative; background:
  radial-gradient(circle at 22px 50%, #f6e3b0 0 4px, #6b4a1f 5px, transparent 6px),
  radial-gradient(circle at calc(100% - 22px) 50%, #f6e3b0 0 4px, #6b4a1f 5px, transparent 6px),
  linear-gradient(180deg, #e2bd78 0%, #b9893f 48%, #9a6d2c 52%, #c99a52 100%); color: #2a1a0c; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
body[data-skin="vintage"] .start.on { background: linear-gradient(180deg, #3a2a1b, #241a10); color: var(--fg); text-shadow: none; }

/* Leather and stitching for vintage. */
body[data-skin="vintage"] { background-image:
  radial-gradient(120% 90% at 28% 42%, rgba(70,45,25,.55) 0%, rgba(21,14,10,0) 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .07 0 0 0 0 .03 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body[data-skin="vintage"] .panel { border-left: 2px dashed rgba(201,154,82,.25); margin-block: 14px; padding-left: 22px; }

/* Keep controls and the start button on screen: only the sound list scrolls. */
.panel { overflow: hidden; }
.packs { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding: 2px; margin: -2px; scrollbar-width: thin; }
.start { margin-top: 0; flex: none; }
.controls, .ptop, .note { flex: none; }
body[data-skin="race"] .pack, body[data-skin="vintage"] .pack { min-height: 108px; padding: 12px 10px; }
body[data-skin="race"] .pack svg, body[data-skin="vintage"] .pack svg { width: 38px; height: 38px; }
@media (max-width: 860px) and (orientation: portrait) { .panel { overflow: visible; } .packs { overflow: visible; } }

/* Minimal: centred cards like the concept. */
body[data-skin="minimal"] .pack { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 108px; }
body[data-skin="minimal"] .pack svg { width: 36px; height: 36px; }
body[data-skin="minimal"] .pack.sel { background: rgba(62,106,225,.08); }
/* Pixel: phosphor green neon. */
body[data-skin="pixel"] { --bg: #020604; --fg: #d8ffe2; --muted: #4f8a5f; --line: #1f5a32; --card: #04110a; --card-solid: #04110a; --accent: #39ff6a; --accent-fg: #021006; --sel-ring: #39ff6a; --sel: #39ff6a; --sel-fg: #021006; --seg: #04110a; }
body[data-skin="pixel"] .pack { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 108px; border-color: #1f5a32; }
body[data-skin="pixel"] .pack svg { width: 36px; height: 36px; color: #39ff6a; }
body[data-skin="pixel"] .pack.sel { box-shadow: 0 0 0 1px #39ff6a, 0 0 18px -4px #39ff6a; background: #072314; }
body[data-skin="pixel"] .tabs button.on { color: #39ff6a; text-shadow: 0 0 8px #39ff6a; }
body[data-skin="pixel"] .start { background: transparent; color: #39ff6a; border: 3px solid #39ff6a; box-shadow: 0 0 22px -6px #39ff6a, inset 0 0 18px -8px #39ff6a; text-shadow: 0 0 8px #39ff6a; }
body[data-skin="pixel"] .start:not(.on)::before { content: "▶ "; }

/* Wind: centred cards, red brush-stroke start. */
body[data-skin="wind"] .pack { flex-direction: column; justify-content: center; text-align: center; gap: 6px; min-height: 104px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.18); }
body[data-skin="wind"][data-mode="dark"] .pack { background: rgba(255,255,255,.03); }
body[data-skin="wind"] .pack.sel { border: 1px solid var(--accent); background: rgba(184,53,42,.08); }
body[data-skin="wind"] .pack svg { width: 36px; height: 36px; color: var(--fg); }
body[data-skin="wind"] .start { border-radius: 40px 8px 36px 10px / 14px 30px 12px 26px;
  background: linear-gradient(100deg, rgba(212,168,80,.0) 70%, rgba(212,168,80,.55) 86%, rgba(212,168,80,0) 96%), linear-gradient(180deg, #c03a2c, #9b2a1f); color: #f6eedd; }

/* ── Instrument-only mode: panel and gear buttons hidden, gauge fills the screen. ── */
.focusbtn { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-solid); color: var(--fg); font-size: 12.5px; }
.focusbtn svg, .exitfocus svg { width: 15px; height: 15px; }
.exitfocus { position: fixed; top: 16px; right: 18px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-solid); color: var(--fg); font-size: 15px; opacity: .9; transition: opacity .6s; }
.exitfocus.dim { opacity: .22; }
body.focus .app { grid-template-columns: 1fr; }
body.focus .panel, body.focus .focusbtn, body.focus #manualCtl { display: none !important; }
body.focus .dash-foot { padding-inline: 18%; }
@media (max-width: 860px) and (orientation: portrait) { body.focus .app { height: 100%; } body.focus #gauge { height: auto; flex: 1; } body.focus .dash-foot { padding-inline: 16px; } }

/* Cat skin: warm cream and orange, soft rounded cards. */
body[data-skin="cat"] {
  --bg: #fcf3e7; --bg-art: none; --fg: #4a2f1d; --muted: #a07e62; --line: #f0dcc5; --card: #fffaf3; --card-solid: #fffaf3;
  --accent: #f07f2e; --accent-fg: #fff; --sel-ring: #f07f2e; --sel-glow: 0 6px 18px -8px rgba(240,127,46,.6);
  --seg: #f6e7d6; --sel: #f07f2e; --sel-fg: #fff; --radius: 18px;
  --title-font: var(--ui); --title-style: normal; --title-weight: 700; --title-case: none; --title-track: 0;
  --start-font: var(--ui); --start-style: normal; --start-size: 22px; --overlay: rgba(74,47,29,.3);
  color-scheme: light;
}
body[data-skin="cat"][data-mode="dark"] {
  --bg: #1d1510; --fg: #f6e6d2; --muted: #b39478; --line: #3a2a1e; --card: #271c15; --card-solid: #271c15;
  --seg: #271c15; --overlay: rgba(0,0,0,.55); color-scheme: dark;
}
body[data-skin="cat"] .pack { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 108px; }
body[data-skin="cat"] .pack svg { width: 38px; height: 38px; }
body[data-skin="cat"] .pack.sel { background: linear-gradient(180deg, #fff3e4, #ffe8d1); }
body[data-skin="cat"][data-mode="dark"] .pack.sel { background: linear-gradient(180deg, #3a2618, #2c1d13); }
body[data-skin="cat"] .tabs { flex: 1; gap: 0; padding: 4px; border-radius: 999px; background: var(--seg); }
body[data-skin="cat"] .tabs button { flex: 1; border: 0; border-radius: 999px; padding: 9px 0; font-size: 17px; }
body[data-skin="cat"] .tabs button.on { background: var(--card-solid); color: var(--accent); box-shadow: 0 2px 8px rgba(160,100,50,.15); }
body[data-skin="cat"] .seg { border-radius: 999px; } body[data-skin="cat"] .seg button { border-radius: 999px; }
body[data-skin="cat"] .start { border-radius: 999px; background: linear-gradient(180deg, #ff9a4d, #ec6f1f); box-shadow: 0 10px 24px -10px rgba(236,111,31,.8), inset 0 1px 0 rgba(255,255,255,.35); }
.tabs { flex-wrap: nowrap; }
.tabs button { white-space: nowrap; } body:not([data-skin=race]):not([data-skin=vintage]):not([data-skin=cat]) .tabs { gap: 16px; }

/* ── Compact sound cards on every skin: small icon on the left, name on the right ──
   (more sounds fit on one screen, quicker to switch). Placed last so it wins over the
   per-skin card styles above. */
body[data-skin] .pack { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; min-height: 54px; padding: 8px 12px; }
body[data-skin] .pack svg { width: 22px; height: 22px; filter: none; }
body[data-skin] .pack b { font-size: 14px; }
body[data-skin] .pack small { font-size: 11px; }

/* Narrow landscape (the car browser beside the car view is ~850 px wide): tighten the panel. */
@media (max-width: 1100px) and (orientation: landscape) {
  .app { grid-template-columns: minmax(0, 56fr) minmax(290px, 44fr); }
  .panel { gap: 10px; padding: 12px 14px 12px 4px; }
  .tabs { gap: 14px; } .tabs button { font-size: 15px; padding: 4px 0; }
  body[data-skin="race"] .tabs button, body[data-skin="vintage"] .tabs button, body[data-skin="cat"] .tabs button { padding: 7px 0; }
  .iconbtn { height: 38px; padding: 0 10px; font-size: 13px; }
  .packs { gap: 6px; }
  body[data-skin] .pack { min-height: 46px; padding: 6px 10px; gap: 8px; }
  body[data-skin] .pack b { font-size: 13px; }
  body[data-skin] .pack small { display: none; }
  .controls { gap: 6px 8px; }
  .ctl > label { font-size: 10.5px; }
  body[data-skin="race"] .ctl, body[data-skin="vintage"] .ctl { padding: 5px 6px 6px; }
  .seg button { height: 34px; font-size: 13px; }
  .start { min-height: 50px; font-size: calc(var(--start-size) * .8); }
  .note { display: none; }
  .dash-foot { padding: 0 14px 12px; }
  .pedal { height: 54px; font-size: 15px; } .gearbtn { height: 50px; width: 64px; }
  .status { left: 14px; top: 12px; font-size: 12px; }
}

.linkbtn { align-self: center; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; flex: none; }

/* The sound list must never be squeezed away by the controls below it. */
.packs { min-height: 116px; }
@media (max-width: 1100px) and (orientation: landscape) { .packs { min-height: 104px; } }

/* The whole right column scrolls by touch (the car's window can be short); the start button
   sticks to the bottom so it is always reachable. Overrides the earlier "only the list scrolls". */
.panel { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.packs { flex: none; overflow: visible; min-height: 0; }
.start { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -10px 18px -6px var(--bg); }

/* Update bar / notes: swipe away, close button. */
.updbar, .toast { touch-action: none; user-select: none; }
.updbar .updx { background: transparent; color: var(--accent-fg); height: 36px; width: 36px; padding: 0; font-size: 22px; line-height: 1; opacity: .8; }