:root {
  --ink: #07141e;
  --panel: #102330;
  --panel-2: #142b39;
  --line: rgba(157, 203, 214, .17);
  --muted: #91aebc;
  --text: #eef7f7;
  --teal: #74d8df;
  --amber: #ffc37a;
  --red: #ff7885;
  --green: #75d9aa;
}

body { color: var(--text); font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
button { font: inherit; }
button:focus-visible, .lic:focus-visible, .taskItem:focus-visible, .switch:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px;
}
#game { filter: saturate(1.08) contrast(1.045); }

/* Opening screen */
#loading {
  background: radial-gradient(circle at 50% 40%, rgba(27, 86, 101, .58), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(123, 204, 210, .035) 40px),
    linear-gradient(145deg, #06131d, #0c2531 58%, #08131c);
}
.loadingEmblem {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px;
  border: 1px solid rgba(120, 226, 227, .5); border-radius: 18px;
  color: var(--teal); font-size: 34px; font-style: italic; font-weight: 900;
  box-shadow: 0 0 0 8px rgba(120, 226, 227, .045), 0 20px 55px rgba(0,0,0,.32);
}
#loading h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: .18em; color: #f2fbfa; text-shadow: none; }
#loading p { color: var(--teal); font-size: 11px; letter-spacing: .32em; }
#loadBar { height: 4px; width: min(330px, 75vw); border-radius: 10px; background: rgba(199, 236, 237, .11); }
#loadFill { background: linear-gradient(90deg, var(--teal), var(--amber)); }
#loadTxt { color: var(--muted); }

/* Menu shell */
#menu {
  isolation: isolate;
  background: radial-gradient(circle at 87% 10%, rgba(33, 111, 120, .26), transparent 31%),
    radial-gradient(circle at 7% 88%, rgba(19, 80, 91, .28), transparent 31%),
    linear-gradient(145deg, #07141f 0%, #0a1b27 58%, #08151f 100%);
  scrollbar-color: rgba(117, 191, 199, .32) transparent;
}
#menu::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(141, 211, 214, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 211, 214, .038) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(110deg, transparent, #000 55%, transparent);
}
#menuInner {
  width: min(1280px, calc(100% - 44px)); padding: 18px 0 44px;
  grid-template-columns: minmax(390px, 445px) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
#brand {
  position: relative; display: block; grid-column: 1 / -1; min-height: 160px;
  padding: 17px 34px; overflow: hidden; border-radius: 24px;
  background: linear-gradient(107deg, rgba(24, 58, 69, .98), rgba(12, 39, 53, .92) 58%, rgba(17, 61, 72, .82));
  border: 1px solid rgba(144, 215, 220, .22);
  box-shadow: 0 24px 70px rgba(0, 5, 12, .22), inset 0 1px rgba(222, 255, 255, .09);
}
#brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 83% 60%, rgba(112, 220, 220, .17), transparent 30%),
    linear-gradient(115deg, transparent 72%, rgba(255,255,255,.035) 72.2%, transparent 72.6%);
}
.brandCopy { position: relative; z-index: 1; max-width: 770px; }
.brandKicker { display: flex; align-items: center; gap: 9px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.brandDot, .visualPulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(116,216,223,.1), 0 0 16px rgba(116,216,223,.5); }
.brandDivider { height: 13px; width: 1px; margin: 0 3px; background: rgba(174, 226, 224, .27); }
#menuTitle {
  margin-top: 11px; color: #f0faf8; background: none; filter: none;
  font-size: clamp(30px, 4vw, 46px); font-weight: 830; letter-spacing: .08em; line-height: 1.14;
}
#menuSub { margin-top: 9px; color: #b3d0d3; font-size: 13px; line-height: 1.6; letter-spacing: .03em; }
.brandTags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.brandTags span { padding: 4px 9px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #c7e1df; background: rgba(174, 230, 225, .08); border: 1px solid rgba(174, 230, 225, .14); }
.brandVisual { position: absolute; right: 19px; top: 0; width: 305px; height: 100%; opacity: .95; }
.brandVisual svg { position: absolute; inset: -2px 0 auto auto; width: 300px; height: 180px; }
.visualCaption { position: absolute; right: 19px; bottom: 15px; color: #a8cdd0; font-size: 10px; letter-spacing: .12em; }
.visualCaption .visualPulse { width: 5px; height: 5px; margin-right: 5px; vertical-align: 2px; }

/* Selection panels */
.panel {
  position: relative; padding: 20px 21px 21px; border-radius: 20px;
  background: linear-gradient(155deg, rgba(17, 40, 52, .96), rgba(10, 28, 40, .94));
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0, 5, 12, .22), inset 0 1px rgba(236,255,255,.045);
}
.rightStack { display: grid; gap: 20px; min-width: 0; }
.secTitle { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; color: #eff8f7; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.secTitle small { color: #8aabb5; font-size: 10px; font-weight: 400; letter-spacing: 0; margin-left: 3px; }
.secIndex { align-self: center; display: inline-grid; place-items: center; height: 21px; min-width: 23px; padding: 0 4px; margin-right: 3px; border-radius: 5px; background: rgba(116, 216, 223, .12); color: var(--teal); font-size: 10px; font-weight: 900; letter-spacing: 0; }
.sectionGap { margin-top: 17px; }

.licGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.lic {
  min-width: 0; min-height: 65px; padding: 10px 3px 8px; border-radius: 11px;
  background: rgba(186, 224, 222, .055); border: 1px solid rgba(175, 219, 220, .13);
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
.lic:hover { transform: translateY(-2px); background: rgba(173, 230, 228, .1); border-color: rgba(116,216,223,.42); }
.lic.on { background: linear-gradient(145deg, rgba(69, 152, 157, .37), rgba(24, 77, 91, .6)); border-color: rgba(128, 222, 222, .68); box-shadow: 0 0 0 1px rgba(116,216,223,.15), inset 0 1px rgba(237,255,255,.13); }
.lic b { color: #f3faf9; font-size: 18px; font-weight: 850; letter-spacing: -.02em; }
.lic.on b { color: #a8f0ec; }
.lic span { color: #8faebb; font-size: 10px; }
.lic.on span { color: #c3e8e5; }

#carCard { position: relative; margin-top: 13px; padding: 15px 17px 14px; overflow: hidden; border-radius: 14px; background: linear-gradient(125deg, rgba(46, 102, 113, .29), rgba(16, 44, 58, .7) 58%, rgba(28, 61, 72, .5)); border: 1px solid rgba(122, 201, 205, .23); }
#carCard::after { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -70px; border: 1px solid rgba(126,218,217,.12); border-radius: 50%; box-shadow: 0 0 0 32px rgba(126,218,217,.025), 0 0 0 65px rgba(126,218,217,.018); pointer-events: none; }
#carTop { position: relative; z-index: 1; align-items: flex-start; }
.carOverline { color: #8dc4c8; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
#carName { margin-top: 5px; font-size: 20px; font-weight: 850; }
#carEngine { color: #a1bec6; }
.carStatus { flex: none; color: #9ce8d5; border: 1px solid rgba(117,217,170,.28); background: rgba(117,217,170,.1); border-radius: 20px; font-size: 10px; padding: 4px 8px; }
.statRow { margin-top: 16px; gap: 9px; }
.statLabel { color: #aac4ca; }
.statBar { height: 4px; background: rgba(186,226,226,.1); }
.statFill { background: linear-gradient(90deg, #65c5d6, #a9e2d3); }
#stDiff { background: linear-gradient(90deg, #efbe7c, #ff8b7f); }
#carDesc { color: #b5ced1; font-size: 11px; line-height: 1.65; }
#carDims { gap: 5px; }
.dim { color: #b9d8d9; background: rgba(153, 222, 223, .06); border-color: rgba(153, 222, 223, .13); font-size: 10px; border-radius: 5px; }

.modeRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 0; }
.modeRow .chip { display: flex; gap: 10px; align-items: center; min-width: 0; min-height: 53px; padding: 8px 11px; border-radius: 10px; text-align: left; background: rgba(183, 221, 224, .055); border: 1px solid rgba(183, 221, 224, .13); font-size: 12px; font-weight: 750; color: #e5f3f1; }
.modeRow .chip:hover { background: rgba(153, 223, 223, .11); border-color: rgba(117, 215, 223, .43); }
.modeRow .chip.on { background: linear-gradient(110deg, rgba(48, 133, 146, .42), rgba(18, 69, 83, .55)); border-color: rgba(111, 224, 227, .58); color: #fff; box-shadow: inset 3px 0 var(--teal); }
.modeRow .chip small, .mapRow .chip small { display: block; margin-top: 2px; color: #91b2bc; font-size: 9px; font-weight: 500; }
.modeRow .chip.on small, .mapRow .chip.on small { color: #c2e4e4; }
.modeIcon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 7px; color: #82dbe0; background: rgba(114, 220, 221, .1); font-size: 11px; font-weight: 900; }
.modeRow .chip.on .modeIcon { background: rgba(121, 230, 223, .2); color: #dafbf4; }

.mapSelect { padding-top: 1px; }
.mapRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mapRow .chip { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 54px; padding: 7px 8px; border-radius: 9px; text-align: left; color: #dbe9e8; background: rgba(183, 221, 224, .05); border: 1px solid rgba(183, 221, 224, .13); font-size: 11px; font-weight: 750; }
.mapRow .chip.on { background: linear-gradient(135deg, rgba(169, 122, 67, .27), rgba(40, 85, 91, .35)); border-color: rgba(255, 195, 122, .55); color: #ffddaa; }
.mapRow .chip:hover { border-color: rgba(255, 195, 122, .43); }
.mapGlyph { display: grid; place-items: center; flex: none; width: 27px; height: 27px; border: 1px solid rgba(255, 195, 122, .26); border-radius: 6px; color: var(--amber); background: rgba(255,195,122,.08); font-size: 17px; }
#mapDesc { margin-top: 8px; padding-left: 2px; color: #9ab9bf; font-size: 10px; line-height: 1.5; }

.optRow, .chipRow { gap: 6px; margin-top: 7px; }
.optRow .chip, .chip.sm { border-radius: 7px; color: #bcd1d4; background: rgba(182, 224, 224, .065); border-color: rgba(182, 224, 224, .14); font-size: 11px; }
.optRow .chip.on, .chip.sm.on, .switch.on { color: #dff8f0; background: rgba(77, 160, 160, .26); border-color: rgba(115, 223, 210, .45); }
.chip.dis { opacity: .3; }
.optRow .chip:hover, .chip.sm:hover { border-color: rgba(115,223,210,.45); background: rgba(115,223,210,.13); }
.btnRow { margin-top: 18px; gap: 9px; }
#menu .btnRow { position: sticky; bottom: 12px; z-index: 4; padding: 8px; border-radius: 13px; background: rgba(13, 37, 49, .97); border: 1px solid rgba(151, 217, 221, .24); box-shadow: 0 12px 35px rgba(0, 7, 16, .27); }
.btn { border-radius: 10px; padding: 13px 10px; color: #132a33; font-size: 14px; font-weight: 850; letter-spacing: .08em; background: linear-gradient(125deg, #ffe0a5, #ffc07a 55%, #eaa56b); box-shadow: 0 7px 24px rgba(222, 149, 77, .2), inset 0 1px rgba(255,255,255,.45); }
.btn:hover { box-shadow: 0 10px 28px rgba(222,149,77,.35); }
.btn.ghost { color: #c2e2e3; background: rgba(156, 220, 220, .075); border: 1px solid rgba(155, 221, 221, .23); }
.btn.ghost:hover { background: rgba(156,220,220,.15); }
#menuControls { margin-top: 16px; padding: 12px 12px 10px; border-radius: 9px; color: #9ab4bd; font-size: 10px; line-height: 2.05; background: rgba(6, 20, 30, .46); border: 1px solid rgba(143, 205, 211, .09); }
.controlsTitle { margin-bottom: 6px; color: #d4eae8; font-size: 11px; font-weight: 750; }
.controlsTitle span { float: right; color: #7195a1; font-size: 9px; font-weight: 400; }
.kbd { color: #c7e1df; border-color: rgba(179, 225, 227, .16); background: rgba(147, 201, 211, .09); border-radius: 4px; }
.exploreNote { display: block; margin-top: 4px; color: #e8bd82; }

.taskList { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.taskItem { min-width: 0; min-height: 48px; border-radius: 9px; padding: 9px; background: rgba(186, 221, 221, .05); border-color: rgba(186, 221, 221, .12); }
.taskItem:hover { background: rgba(144, 220, 221, .11); border-color: rgba(114, 216, 223, .4); }
.taskItem.on { background: rgba(84, 162, 161, .18); border-color: rgba(117, 217, 212, .42); }
.taskItem.dis { opacity: .36; cursor: not-allowed; }
.taskItem .box { flex: none; width: 15px; height: 15px; border-radius: 4px; font-size: 10px; border-color: rgba(175, 218, 220, .35); }
.taskItem.on .box { color: #0e2930; background: #89ddd1; border-color: #89ddd1; }
.taskItem .nm { min-width: 0; font-size: 11px; line-height: 1.3; }
.taskItem .tg { margin-left: auto; color: #7196a0; font-size: 8px; white-space: nowrap; }
.taskItem.on .tg { color: #a7d9d4; }
#btnAll, #btnNone { display: inline-block; padding: 3px 7px; font-size: 10px; }
.ruleScore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ruleScore span { display: grid; gap: 5px; padding: 11px 10px; border-radius: 9px; color: #94b3bc; font-size: 10px; background: rgba(143,205,211,.065); border: 1px solid rgba(143,205,211,.1); }
.ruleScore strong { color: #d6f2ed; font-size: 25px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.ruleScore span:first-child strong { color: var(--amber); }
.ruleList { display: grid; gap: 1px; margin-top: 10px; }
.ruleList > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 9px 5px; border-bottom: 1px solid rgba(153, 206, 209, .085); font-size: 10px; line-height: 1.55; }
.ruleList > div:last-child { border-bottom: 0; }
.ruleList b { color: #c5dedd; font-weight: 800; }
.ruleList > div:first-child b { color: #ff9b98; }
.ruleList span { color: #9ab4bb; }

/* Dynamic top view fills the second column below the task card. */
.previewPanel { padding-bottom: 14px; }
.previewHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.previewHead .secTitle { margin-bottom: 4px; }
.previewHead p { color: #90aeb8; font-size: 10px; }
.previewLabel { flex: none; color: #70c9cc; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
#vehiclePreview { display: block; width: 100%; height: 170px; margin-top: 9px; border: 1px solid rgba(152,212,214,.11); border-radius: 11px; background: #0a202b; }
.previewLegend { display: flex; gap: 15px; margin-top: 10px; color: #8faeb7; font-size: 10px; }
.previewLegend span { display: flex; align-items: center; gap: 5px; }
.previewLegend i { width: 11px; height: 3px; border-radius: 3px; }
.legendBody { background: #87d8d9; }.legendAxle { background: #ffc37a; }.legendTurn { background: #81b2ff; }

/* In-game instrumentation */
#hud { --hud-bg: rgba(7, 21, 31, .79); }
#examBar, #scoreBox, #camLbl, #timerBox, #hintBar, .pedal, #annTxt {
  background: var(--hud-bg); border: 1px solid rgba(160, 218, 218, .2);
  box-shadow: 0 8px 25px rgba(0, 9, 18, .2), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
}
#examBar { top: 12px; border-radius: 12px; min-width: min(425px, 44vw); padding: 10px 19px 12px; }
#examName { color: var(--teal); font-size: 9px; letter-spacing: .22em; }
#taskName { color: #f3fcfa; font-size: 17px; letter-spacing: .035em; }
.stepDot { height: 3px; border-radius: 4px; background: rgba(169,216,219,.2); }
.stepDot.cur { background: var(--amber); box-shadow: 0 0 12px rgba(255, 195, 122, .5); }
.stepDot.done { background: var(--green); }
#scoreBox { width: 216px; border-radius: 12px; padding: 11px 13px; }
#scoreLbl { color: #a1c3c6; font-size: 10px; }
#passLine { color: #8caab3; }
#scoreNum { color: var(--green); font-variant-numeric: tabular-nums; }
#scoreNum.warn { color: var(--amber); } #scoreNum.bad { color: var(--red); }
.deduct { color: #ffbec0; } .deduct b { color: var(--red); }
.deduct.ok { color: #a9e6d0; } .deduct.ok b { color: var(--green); }
#camLbl, #timerBox { left: 13px; border-radius: 7px; color: #d0eae8; font-size: 10px; letter-spacing: .08em; }
#camLbl { padding: 7px 10px; }
#timerBox { top: 51px; padding: 6px 10px; }
#hintBar { top: 94px; border-radius: 7px; color: #dcece9; }
#miniLbl { top: 111px; left: 14px; color: #a1c3c6; font-size: 9px; letter-spacing: .15em; }
#minimap { top: 132px; width: 198px; height: 198px; border-radius: 12px; border-color: rgba(159, 216, 219, .22); box-shadow: 0 12px 38px rgba(0, 10, 19, .28); }
#gauge { width: 210px; height: 210px; right: 13px; bottom: 13px; }
#gearBig { right: 238px; color: var(--amber); }
#speedBig { right: 238px; color: #ecf8f7; }
#pedalBar { bottom: 15px; }
.pedal { border-radius: 7px; padding: 7px 10px; min-width: 55px; color: #91aeb7; font-size: 10px; }
.pedal.act { color: #163332; background: var(--amber); }.pedal.warnp { color: #351923; background: var(--red); }.pedal.greenp { color: #103429; background: var(--green); }
#announce { bottom: 125px; }
#annTxt { border-radius: 11px; padding: 10px 20px; color: var(--amber); border-color: rgba(255,195,122,.46); }
#annTxt.err { color: var(--red); border-color: rgba(255,120,133,.55); }
#annTxt.ok { color: var(--green); border-color: rgba(117,217,170,.55); }
#blindWarn { color: #ffe1a6; border-radius: 7px; }
.mirrorFrame { border-color: rgba(162,219,217,.29); }

/* Result and pause sheets */
.overlay { background: rgba(3, 12, 19, .77); backdrop-filter: blur(12px); }
.card { border-radius: 20px; background: linear-gradient(148deg, #173341, #0d2230 65%, #0b1c29); border: 1px solid rgba(169, 225, 225, .22); box-shadow: 0 28px 90px rgba(0, 5, 10, .56); }
.card h2 { color: #eff8f6; }
.card h2.pass { color: var(--green); }.card h2.fail { color: var(--red); }
#resScore { font-variant-numeric: tabular-nums; }
#resTable { border-top-color: rgba(168, 219, 220, .19); }
.resRow { border-bottom-color: rgba(168,219,220,.1); }
.resRow .s.ok { color: var(--green); }.resRow .s.bad { color: var(--red); }.resRow .s.mid { color: var(--amber); }
.resRow .d { color: #9cb8bf; }
#resTips { color: #bdd4d4; background: rgba(145, 208, 211, .075); border-color: rgba(145, 208, 211, .14); }
#resTips b, #pauseCard h2 { color: var(--amber); }
.switch { border-radius: 7px; }
.setRow input[type=range] { accent-color: var(--teal); }
.setRow b { color: var(--teal); }
#cityMap { border-radius: 15px; border-color: rgba(146,212,215,.3); }

/* Touch driving controls; native pointer handling is bound by main.js. */
#touchControls { display: none; }
@media (pointer: coarse) {
  #touchControls { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 45; display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 0 12px; pointer-events: none; }
  #touchControls button { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; min-width: 44px; min-height: 44px; border: 1px solid rgba(173, 223, 222, .35); border-radius: 12px; color: #f0f9f6; background: rgba(8, 29, 39, .8); box-shadow: 0 7px 20px rgba(0,0,0,.28); backdrop-filter: blur(12px); font-size: 11px; font-weight: 800; }
  #touchControls button:active, #touchControls button.active { color: #122c32; background: #8de4dc; border-color: #baf7ee; }
  .touchSteer { display: flex; gap: 7px; }
  .touchSteer button { width: 58px; height: 58px; font-size: 18px !important; }
  .touchActions { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 5px; max-width: 222px; }
  .touchActions button { min-height: 36px !important; border-radius: 8px !important; font-size: 10px !important; }
  .touchPedals { display: flex; align-items: end; gap: 7px; }
  .touchPedals button { width: 61px; height: 62px; }
  .touchPedals [data-drive="accelerate"] { background: rgba(36, 112, 84, .86); border-color: rgba(132, 230, 177, .5); }
  .touchPedals [data-drive="brake"] { background: rgba(121, 55, 63, .84); border-color: rgba(255, 161, 169, .46); }
  #pedalBar { display: none; }
  #gauge { bottom: 105px; width: 148px; height: 148px; }
  #gearBig, #speedBig { display: none; }
  #announce { bottom: 190px; }
}

@media (max-width: 1050px) {
  #menuInner { grid-template-columns: minmax(330px, 41%) minmax(0, 1fr); }
  .taskList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brandVisual { opacity: .6; }
}
@media (max-height: 820px) and (min-width: 791px) {
  #menuInner { padding-top: 12px; gap: 12px; }
  #brand { min-height: 126px; padding: 11px 27px; }
  #menuTitle { margin-top: 6px; font-size: 36px; }
  #menuSub { margin-top: 5px; }
  .brandTags { margin-top: 6px; }
  .panel { padding: 14px 16px; }
  .lic { min-height: 53px; padding: 7px 3px; }
  #carCard { margin-top: 9px; padding: 11px; }
  #carName { font-size: 18px; }
  #carDesc { display: none; }
  .statRow { margin-top: 10px; }
  #carDims { margin-top: 5px; }
}
@media (max-width: 790px) {
  #menuInner { width: min(600px, calc(100% - 24px)); grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 0 30px; }
  #brand { grid-column: auto; min-height: 142px; padding: 15px 20px; }
  #menuTitle { margin-top: 11px; font-size: 32px; }
  #menuSub { max-width: 390px; font-size: 11px; }
  .brandVisual { right: -95px; opacity: .32; }
  .brandTags { margin-top: 8px; }
  .rightStack { gap: 12px; }
  .panel { padding: 16px; }
  .taskList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #examBar { left: 50%; top: 8px; width: min(400px, calc(100vw - 20px)); min-width: 0; padding: 8px 10px; }
  #examName { font-size: 8px; }
  #taskName { font-size: 14px; }
  #taskSteps { margin-top: 5px; }
  #camLbl { left: 10px; top: 85px; }
  #timerBox { left: 10px; top: 118px; }
  #scoreBox { top: 85px; right: 10px; width: 116px; padding: 8px; }
  #scoreNum { font-size: 27px; }
  #scoreLbl, #passLine { font-size: 8px; }
  #deductList { display: none; }
  #miniLbl { display: none; }
  #minimap { left: 10px; top: 161px; width: 116px; height: 116px; }
  #hintBar { top: 67px; max-width: 72vw; font-size: 10px; }
  #gauge { width: 142px; height: 142px; }
  #blindWarn { top: 62%; max-width: 80vw; text-align: center; font-size: 10px; }
  .resRow .d { width: 130px; }
}
@media (max-width: 500px) {
  .brandKicker { font-size: 8px; }
  #menuTitle { font-size: 29px; }
  .brandTags span { font-size: 9px; }
  .licGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lic b { font-size: 15px; }.lic span { font-size: 9px; }
  .mapRow .chip { display: grid; justify-items: center; text-align: center; min-height: 72px; }
  .modeRow .chip { gap: 6px; padding: 7px; font-size: 11px; }
  .modeIcon { width: 25px; height: 25px; }
  #menuControls { font-size: 9px; }
  .controlsTitle span { display: none; }
  .taskList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taskItem .tg { display: none; }
  .ruleList > div { grid-template-columns: 64px 1fr; }
  .card { padding: 21px 17px; }
  .resRow .d { display: none; }
  .setRow { flex-wrap: wrap; }
  .setRow > span:first-child { width: 70px; }
  .resBtns .btn { font-size: 11px; padding: 11px 5px; }
}
@media (pointer: coarse) and (max-width: 790px) {
  #touchControls { bottom: max(8px, env(safe-area-inset-bottom)); padding: 0 7px; gap: 4px; }
  .touchSteer { gap: 5px; }
  .touchSteer button { width: 50px; height: 54px; }
  .touchActions { grid-template-columns: repeat(4, 1fr); max-width: 188px; gap: 4px; }
  .touchActions button { min-width: 42px; min-height: 34px !important; padding: 2px !important; font-size: 9px !important; }
  .touchPedals { gap: 5px; }
  .touchPedals button { width: 49px; height: 58px; min-width: 46px; }
  #gauge { right: 10px; bottom: 105px; width: 116px; height: 116px; }
  #announce { bottom: 162px; max-width: 85vw; }
  #annTxt { font-size: 13px; padding: 8px 10px; }
  #annSub { font-size: 10px; }
}
@media (pointer: coarse) and (max-width: 500px) {
  #touchControls { flex-wrap: wrap; row-gap: 5px; }
  .touchSteer { order: 1; }
  .touchPedals { order: 2; margin-left: auto; }
  .touchActions { order: 3; width: 100%; max-width: none; display: flex; justify-content: center; }
  .touchActions button { flex: 1; max-width: 60px; min-width: 0; }
  #gauge { bottom: 122px; }
  #minimap { width: 98px; height: 98px; }
}
@media (max-height: 650px) {
  #brand { min-height: 142px; padding-top: 17px; padding-bottom: 15px; }
  .brandTags { margin-top: 9px; }
  #gauge { width: 130px; height: 130px; }
  #minimap { width: 130px; height: 130px; }
}