/* ============================================================
   Relay Rescue — Control-Circuit Troubleshooting Trainer
   ============================================================ */
:root{
  --bg:#0e1116; --bg2:#151a22; --panel:#1b212b; --panel2:#222a35;
  --ink:#e7edf3; --ink-dim:#9aa7b6; --line:#2c3643; --line2:#3a4757;
  --accent:#2dd4bf; --accent2:#38bdf8; --warn:#fbbf24; --danger:#f43f5e;
  --good:#34d399; --hot:#f43f5e; --neutral:#64748b;
  --wire:#cbd5e1; --wire-live:#fb7185; --wire-dead:#475569;
  --screw:#94a3b8; --screw-hot:#fca5a5;
  --display:#0a1f14; --display-ink:#3dfb8b;
  --red-lead:#ef4444; --black-lead:#1f2937;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --mono:"Cascadia Mono","Consolas","SF Mono",ui-monospace,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 70% -10%,#1a2330 0,var(--bg) 60%);
  color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.45;
  display:flex; flex-direction:column; min-height:100vh;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:18px; padding:10px 18px;
  background:linear-gradient(180deg,#1b2230,#141a23);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow); z-index:5;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .bolt{font-size:30px; filter:drop-shadow(0 0 8px var(--warn))}
.brand h1{margin:0; font-size:21px; letter-spacing:.5px}
.tagline{margin:0; font-size:11.5px; color:var(--ink-dim); letter-spacing:1px; text-transform:uppercase}

.level-nav{display:flex; align-items:center; gap:6px; margin-left:8px}
#levelSelect{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line2);
  border-radius:8px; padding:8px 12px; font-size:14px; font-weight:600; min-width:230px; cursor:pointer;
}
.navbtn{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line2);
  border-radius:8px; width:38px; height:38px; font-size:15px; cursor:pointer; transition:.15s;
}
.navbtn:hover{background:var(--line2)}
.navbtn.ghost{border-radius:50%; font-weight:700}

.status-cluster{margin-left:auto; display:flex; align-items:center; gap:18px}
.player-chip{
  display:flex; align-items:center; gap:2px; max-width:140px;
  background:var(--panel2); color:var(--ink); border:1px solid var(--line2);
  border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.player-chip:hover{background:var(--line2); border-color:var(--accent)}
.player-chip span{max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stat{display:flex; flex-direction:column; align-items:flex-end}
.stat-label{font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink-dim)}
.stat-value{font-weight:700; font-size:16px}
.stat-value.timer{font-family:var(--mono); color:var(--accent); font-size:19px; min-width:92px; text-align:right}
.difficulty-badge{padding:2px 8px;border-radius:999px;font-size:12px}

/* ---------- layout ---------- */
.layout{
  flex:1; display:grid; grid-template-columns:minmax(0,1fr) 350px;
  gap:16px; padding:16px; align-items:stretch; min-height:0;
}
.panel{
  background:linear-gradient(180deg,var(--panel),#161c25);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.panel-head{padding:12px 16px 8px; border-bottom:1px solid var(--line)}
.panel-head h2{margin:0; font-size:15px; letter-spacing:.3px}
.panel-head .sub{color:var(--ink-dim); font-weight:400; font-size:12.5px}
.objective{margin-top:6px; font-size:13px; color:var(--accent2)}

/* ---------- circuit svg ---------- */
.board-wrap,.schematic-wrap{position:relative; padding:8px; flex:1; min-height:0; display:flex}
.circuit-svg{width:100%; height:100%; min-height:340px; touch-action:none;
  background:
    linear-gradient(transparent 23px,rgba(255,255,255,.025) 24px),
    linear-gradient(90deg,transparent 23px,rgba(255,255,255,.025) 24px);
  background-size:24px 24px;
  border:1px solid var(--line); border-radius:10px;
}
.schematic{background:#0c1118}
.board-wrap{flex-direction:column}
.board-hint{font-size:12px; color:var(--ink-dim); padding:6px 4px 0; min-height:18px}

/* zoom / pan controls */
.zoom-controls{position:absolute; top:14px; right:14px; z-index:4; display:flex; flex-direction:column; gap:5px}
.zoom-controls button{
  width:34px; height:34px; border-radius:8px; font-size:18px; font-weight:700; line-height:1;
  background:rgba(27,33,43,.92); color:var(--ink); border:1px solid var(--line2); cursor:pointer;
  box-shadow:var(--shadow); transition:.12s;
}
.zoom-controls button:hover{background:var(--line2); border-color:var(--accent)}
.circuit-svg.zoomed{cursor:grab}
.circuit-svg.panning{cursor:grabbing}

/* probe + clamp interaction */
.probe-grip{cursor:grab}
.probe-grip:active{cursor:grabbing}
.dragging .probe-grip{cursor:grabbing}
.term.probe-target{filter:drop-shadow(0 0 6px var(--accent))}
.wire.clamp-target{stroke:var(--warn) !important}

/* svg element classes (styled inline too, but base here) */
.term{cursor:pointer; transition:.1s}
.term:hover{filter:drop-shadow(0 0 5px var(--accent))}
.wire{stroke:var(--wire); stroke-width:3; fill:none; cursor:default}
.wire.sd-hot{cursor:pointer}
.wire.lifted{stroke-dasharray:5 5; stroke:var(--wire-dead)}
.device{cursor:default}
.glyph-label{font-family:var(--sans); font-size:11px; fill:var(--ink); pointer-events:none}
.glyph-sub{font-size:9px; fill:var(--ink-dim)}
.svg-mode-meter .term{cursor:crosshair}
.svg-mode-screwdriver .wire.sd-hot{stroke-width:4}
.svg-mode-screwdriver .term{cursor:pointer}
.svg-mode-screwdriver .term:hover{filter:drop-shadow(0 0 6px var(--warn))}
.svg-mode-diagnose .device,.svg-mode-diagnose .wire{cursor:pointer}

/* ---------- toolbar ---------- */
.toolbar{display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:#141a23}
.tool{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--panel2); border:1px solid var(--line2); color:var(--ink);
  border-radius:10px; padding:8px 6px; cursor:pointer; transition:.15s;
}
.tool:hover{background:var(--line2)}
.tool.active{border-color:var(--accent); background:rgba(45,212,191,.14); box-shadow:0 0 0 1px var(--accent) inset}
.tool-ico{font-size:20px; line-height:1}
.tool-name{font-size:11.5px; font-weight:600}
.tool[data-tool="diagnose"].active{border-color:var(--danger); background:rgba(244,63,94,.14); box-shadow:0 0 0 1px var(--danger) inset}

/* ---------- multimeter ---------- */
.multimeter{
  padding:12px; border-top:1px solid var(--line);
  background:linear-gradient(180deg,#10151d,#0d1219);
}
.mm-body{
  display:flex; gap:14px; align-items:stretch;
  background:linear-gradient(180deg,#f7c948,#e0a91b);
  border-radius:14px; padding:12px; box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
  position:relative;
}
.mm-brand{
  position:absolute; top:6px; left:14px; font-size:10px; font-weight:800; letter-spacing:1.5px;
  color:#7a5a00; text-transform:uppercase;
}
.mm-display{
  background:var(--display); border:3px solid #06120b; border-radius:8px;
  padding:10px 16px 8px; min-width:188px; display:flex; flex-direction:column; justify-content:center;
  box-shadow:inset 0 0 22px rgba(0,0,0,.7); margin-top:10px;
}
.mm-topline{display:flex; justify-content:space-between; align-items:center}
.mm-mode{font-family:var(--mono); font-size:12px; color:#2a8d5c; letter-spacing:2px; font-weight:700}
.mm-flags{display:flex; gap:8px}
.mm-flag{font-family:var(--mono); font-size:10px; color:#0c3d27; letter-spacing:1px; transition:.1s}
.mm-flag.on{color:var(--display-ink); text-shadow:0 0 6px rgba(61,251,139,.7)}
.mm-reading{
  font-family:var(--mono); font-size:38px; font-weight:700; color:var(--display-ink);
  text-shadow:0 0 9px rgba(61,251,139,.65); line-height:1.05; letter-spacing:1px; text-align:right;
}
.mm-unit{font-family:var(--mono); font-size:13px; color:#2a8d5c; text-align:right; letter-spacing:1px; font-weight:700}
.mm-dial-wrap{flex:1; display:flex; flex-direction:column; gap:9px; justify-content:center; margin-top:8px}
.mm-dial{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mm-mode-btn{
  background:#2a2410; color:#fff3cf; border:1px solid #5a4a14;
  border-radius:8px; padding:9px 6px; cursor:pointer; font-weight:700; font-size:13px; transition:.12s;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3);
}
.mm-mode-btn:hover{background:#3a3216}
.mm-mode-btn.active{background:#111; color:var(--display-ink); border-color:#000; box-shadow:inset 0 0 8px rgba(61,251,139,.5)}
.mm-mode-btn[data-mode="off"].active{color:#f87171; box-shadow:inset 0 0 8px rgba(248,113,113,.4)}
.mm-leadstat{display:flex; align-items:center; gap:10px; font-size:12px; flex-wrap:wrap; color:#3a2c00}
.lead{display:flex; align-items:center; gap:5px; font-weight:600}
.lead .dot{width:11px; height:11px; border-radius:50%; display:inline-block; border:1px solid #000; box-shadow:0 1px 2px rgba(0,0,0,.4)}
.lead.red .dot{background:var(--red-lead)}
.lead.black .dot{background:#111; border-color:#333}
.lead b{color:#1a1300; font-family:var(--mono)}
.mm-howto{font-size:12px; color:var(--ink-dim); padding:8px 4px 0; min-height:16px}
.mini-btn{
  background:#2a2410; border:1px solid #5a4a14; color:#fff3cf;
  border-radius:7px; padding:5px 10px; cursor:pointer; font-size:12px; font-weight:600;
}
.mini-btn:hover{background:#3a3216}
/* the Briefing/Leaderboard mini buttons sit on the dark panel */
.side-panel .mini-btn{background:var(--panel2); border-color:var(--line2); color:var(--ink-dim)}
.side-panel .mini-btn:hover{color:var(--ink); border-color:var(--accent); background:var(--panel2)}

/* ---------- side panel ---------- */
.side-tabs{display:flex; gap:4px; padding:8px 12px 0}
.tab{
  flex:1; background:transparent; border:1px solid var(--line); border-bottom:none;
  color:var(--ink-dim); padding:8px; border-radius:8px 8px 0 0; cursor:pointer; font-weight:600; font-size:13px;
}
.tab.active{background:var(--panel2); color:var(--ink); border-color:var(--line2)}
.tab-body{padding:12px 14px; overflow:auto; flex:1; min-height:0}
.tab-body.hidden,.hidden{display:none !important}
.hint-box{background:#11161e; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px}
.hint-box h3{margin:0 0 4px; font-size:13px; color:var(--accent)}
.hint-box p{margin:0 0 8px; font-size:13px}
#hintText{color:var(--warn); font-style:italic; margin-top:8px}
.hint-hidden{display:none}
.legend-list{margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-dim)}
.legend-list li{margin-bottom:5px}
.legend-list b{color:var(--ink)}
.tab-body h3{font-size:13px; margin:10px 0 6px}

/* ---------- leaderboard ---------- */
.lb-head{display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:8px}
.lb-list{list-style:none; margin:0; padding:0; counter-reset:rank}
.lb-list li{
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px;
  background:#11161e; margin-bottom:5px; font-size:13px;
}
.lb-list li.me{background:rgba(45,212,191,.14); border:1px solid var(--accent)}
.lb-list li.lb-empty{justify-content:center; color:var(--ink-dim); background:none}
.lb-rank{font-family:var(--mono); font-weight:700; color:var(--accent2); min-width:28px}
.lb-rank.gold{color:#fbbf24}.lb-rank.silver{color:#cbd5e1}.lb-rank.bronze{color:#d97706}
.lb-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-time{font-family:var(--mono); color:var(--ink)}

/* ---------- modals ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(5,8,12,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal{
  background:linear-gradient(180deg,var(--panel2),#161c25); border:1px solid var(--line2);
  border-radius:16px; padding:24px; max-width:520px; width:100%; box-shadow:var(--shadow);
}
.modal h2{margin:0 0 10px}
.modal p{color:var(--ink-dim); font-size:14px}
.modal.win{text-align:center; border-color:var(--good)}
.win-burst{font-size:54px; line-height:1}
.win-time{font-size:16px; color:var(--ink); margin:10px 0}
.win-time b{font-family:var(--mono); color:var(--accent); font-size:20px}
#winPenalty{color:var(--danger); font-size:13px; margin-left:6px}
.name-row{display:flex; flex-direction:column; gap:6px; text-align:left; font-size:13px; color:var(--ink-dim); margin:8px 0}
.name-row input{
  background:var(--bg); border:1px solid var(--line2); color:var(--ink);
  border-radius:8px; padding:10px 12px; font-size:15px;
}
.rank-note{min-height:20px; font-size:13px; color:var(--good); margin-bottom:6px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
.modal.win .modal-actions{justify-content:center}
.btn{
  background:var(--panel); border:1px solid var(--line2); color:var(--ink);
  border-radius:9px; padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; transition:.15s;
}
.btn:hover{background:var(--line2)}
.btn.primary{background:var(--accent); color:#04201b; border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.ghost{background:transparent}
.help-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0}
.help-grid>div{background:#11161e; border:1px solid var(--line); border-radius:10px; padding:12px}
.help-grid .tool-ico{font-size:22px}
.help-grid b{display:block; margin:4px 0}
.help-grid p{margin:0; font-size:12.5px}
.help-tip{background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); border-radius:8px; padding:10px; color:var(--warn) !important; font-size:13px}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#11161e; border:1px solid var(--line2); color:var(--ink);
  padding:12px 20px; border-radius:10px; box-shadow:var(--shadow); z-index:60;
  opacity:0; transition:.25s; font-size:14px; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.good{border-color:var(--good)} .toast.bad{border-color:var(--danger)} .toast.info{border-color:var(--accent2)}

/* ---------- briefing: symptom, hints, walkthrough ---------- */
.symptom{color:var(--ink); font-weight:600; margin:0 0 6px; font-style:italic}
.coach-row{display:flex; gap:8px; margin-bottom:8px}
.coach-row .mini-btn{flex:1}
.hint-list{list-style:none; margin:0 0 10px; padding:0; counter-reset:h}
.hint-list li{
  background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.3); border-left:3px solid var(--accent2);
  border-radius:8px; padding:8px 10px 8px 34px; margin-bottom:6px; font-size:12.5px; position:relative;
  animation:fadeSlide .25s ease;
}
.hint-list li::before{counter-increment:h; content:"💡"; position:absolute; left:9px; top:7px; font-size:13px}
@keyframes fadeSlide{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.walk-box{background:#11161e; border:1px solid var(--line2); border-radius:10px; padding:10px 12px; margin-bottom:10px}
.walk-box h4{margin:0 0 6px; font-size:13px; color:var(--warn)}
.walk-box ol{margin:0 0 6px; padding-left:20px; font-size:12.5px; color:var(--ink)}
.walk-box ol li{margin-bottom:5px}
.walk-warn{margin:0; font-size:11px; color:var(--ink-dim); font-style:italic}
.mini-legend{border-top:1px solid var(--line); padding-top:10px; margin-top:4px}
.mini-legend h4{margin:0 0 6px; font-size:12.5px; color:var(--accent)}
.see-guide{font-size:11.5px; color:var(--accent2); margin:8px 0 0}

/* ---------- field guide ---------- */
.guide-doc h3{margin:0 0 10px; font-size:15px}
.guide-doc h4{margin:16px 0 6px; font-size:13px; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:3px}
.guide-doc .method{margin:0; padding-left:20px; font-size:12.5px}
.guide-doc .method li{margin-bottom:6px}
.guide-table{width:100%; border-collapse:collapse; font-size:12px; margin:4px 0}
.guide-table th{text-align:left; vertical-align:top; color:var(--warn); font-weight:700; padding:5px 8px 5px 0; white-space:nowrap; width:38%}
.guide-table td{padding:5px 0; color:var(--ink-dim); border-bottom:1px solid var(--line)}
.sym-list{list-style:none; margin:0; padding:0; font-size:12.5px}
.sym-list li{display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--ink-dim)}
.sym-list b{color:var(--ink)}
.sym{width:26px; height:18px; flex:0 0 26px; border-radius:3px; display:inline-block; background:#222a35; border:1px solid var(--line2)}
.sym-rail{background:linear-gradient(90deg,#fca5a5 0 40%,transparent 40% 60%,#7dd3fc 60%)}
.sym-fuse{position:relative}
.sym-fuse::after{content:""; position:absolute; left:4px; right:4px; top:50%; height:2px; background:#f59e0b}
.sym-sw{position:relative}
.sym-sw::after{content:""; position:absolute; left:5px; top:11px; width:16px; height:2px; background:#34d399; transform:rotate(-20deg); transform-origin:left}
.sym-coil{border-radius:50%; border-color:#34d399}
.sym-load{border-radius:50%; border-color:#fb7185}
.sym-xfmr{background:repeating-linear-gradient(90deg,#facc15 0 2px,transparent 2px 6px)}
.sym-screw{border-radius:50%; background:#cbd5e1; border-color:#475569; width:18px; height:18px; flex-basis:18px}
.safety li{color:var(--warn)}

/* ---------- live meter interpretation ---------- */
.mm-interpret{font-size:12.5px; color:var(--accent2); padding:2px 4px 0; min-height:16px; font-weight:600}

/* ---------- hover tooltip ---------- */
.hover-tip{
  position:fixed; z-index:70; max-width:260px; pointer-events:none;
  background:#0b0f15; border:1px solid var(--accent2); border-radius:8px;
  padding:8px 11px; box-shadow:var(--shadow); font-size:12px; color:var(--ink);
}
.hover-tip b{color:var(--accent2)}
.hover-tip .tip-test{color:var(--ink-dim); display:block; margin-top:4px}
.hover-tip .tip-rate{color:var(--warn); font-family:var(--mono); font-size:11px}

/* ---------- ghost tool (Guide button) ---------- */
.ghost-tool{flex:0 0 64px; opacity:.85}
.ghost-tool:hover{opacity:1}

/* ---------- first-run coach ---------- */
.coach-bubble{
  position:fixed; z-index:65; background:var(--accent2); color:#05222e; font-weight:700; font-size:12.5px;
  padding:8px 12px; border-radius:10px; box-shadow:var(--shadow); max-width:220px; pointer-events:none;
  animation:bob 1.1s ease-in-out infinite;
}
.coach-bubble::after{content:""; position:absolute; width:12px; height:12px; background:var(--accent2); transform:rotate(45deg)}
.coach-bubble.point-down::after{bottom:-5px; left:24px}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}

/* ---------- help modal tabs ---------- */
.modal.help{max-width:620px; max-height:88vh; display:flex; flex-direction:column}
.help-tabs{display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap}
.htab{background:transparent; border:1px solid var(--line2); color:var(--ink-dim);
  border-radius:8px; padding:7px 12px; cursor:pointer; font-weight:600; font-size:13px}
.htab.active{background:var(--accent); color:#04201b; border-color:var(--accent)}
.help-page{overflow:auto; flex:1}
.help-page.hidden{display:none}
.help-list{margin:8px 0; padding-left:20px; font-size:13.5px; line-height:1.5}
.help-list li{margin-bottom:7px}
.dontshow{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-dim); margin-right:auto}
.dontshow input{accent-color:var(--accent)}

/* ---------- auth (login / register) ---------- */
.modal.auth{max-width:380px}
.auth-head{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:2px}
.auth-head .bolt{font-size:26px;filter:drop-shadow(0 0 8px var(--warn))}
.auth-head h2{margin:0}
.auth-tabs{display:flex;gap:4px;margin:12px 0 14px}
.atab{flex:1;background:transparent;border:1px solid var(--line2);color:var(--ink-dim);
  border-radius:8px;padding:9px;cursor:pointer;font-weight:600;font-size:13.5px}
.atab.active{background:var(--accent);color:#04201b;border-color:var(--accent)}
.auth-page{display:flex;flex-direction:column;gap:2px}
.auth-page.hidden{display:none}
.auth-page .name-row{margin:6px 0}
.auth-page .btn{margin-top:12px;width:100%}
.auth-err{color:var(--danger);font-size:12.5px;min-height:16px;margin:3px 0 0}
.auth-note{color:var(--ink-dim);font-size:12px;text-align:center;margin:14px 0 0}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  /* Switch from the fixed-height desktop grid (board | side) to natural page flow:
     panels stack and the PAGE scrolls, so the board can't get squeezed to nothing. */
  body{display:block; height:auto; min-height:100vh}
  .layout{display:block; flex:none; overflow:visible; padding:12px}
  .panel{overflow:visible; min-height:auto; margin-bottom:12px}
  .panel:last-child{margin-bottom:0}
  .board-wrap{flex:none; min-height:0}
  .circuit-svg{height:340px; min-height:340px}      /* fixed height so it never collapses */
  .tab-body{overflow:visible}
  .status-cluster{gap:12px}
  #levelSelect{min-width:140px}
}
@media (max-width:640px){
  html,body{overflow-x:hidden}
  body{font-size:14px}
  .circuit-svg{height:300px; min-height:300px}
  /* compact top bar: brand + status on row 1, level nav full-width on row 2 */
  .topbar{flex-wrap:wrap; gap:8px 12px; padding:8px 12px}
  .brand .bolt{font-size:24px}
  .brand h1{font-size:18px}
  .tagline{display:none}
  .level-nav{order:5; width:100%; margin-left:0}
  #levelSelect{flex:1; min-width:0}
  .status-cluster{margin-left:auto; gap:10px}
  .status-cluster > .stat:first-of-type{display:none}   /* hide Difficulty (it's in the level dropdown) */
  .player-chip{padding:5px 9px; font-size:12px; max-width:104px}
  .player-chip span{max-width:64px}
  .stat-label{font-size:9px}
  .stat-value.timer{font-size:17px; min-width:72px}
  .layout{padding:10px; gap:10px}
  .panel-head{padding:10px 12px 6px}
  .panel-head h2 .sub{display:none}
  .objective{font-size:12px}
  .board-wrap,.schematic-wrap{padding:6px}
  .circuit-svg{min-height:300px}
  /* tools wrap and fill the row with tappable targets */
  .toolbar{flex-wrap:wrap; gap:6px; padding:8px}
  .tool{flex:1 1 18%; min-width:0; padding:7px 3px}
  .tool-ico{font-size:18px}
  .tool-name{font-size:10px}
  .ghost-tool{flex:1 1 18%}
  /* compact meter: digital display + dial side-by-side, small footprint */
  .multimeter{padding:8px}
  .mm-body{flex-direction:row; gap:8px; padding:8px; align-items:stretch}
  .mm-brand{display:none}
  .mm-display{flex:0 0 114px; min-width:0; width:auto; margin-top:0; padding:5px 8px}
  .mm-topline{margin-bottom:1px}
  .mm-mode{font-size:10px}
  .mm-flag{font-size:8px}
  .mm-reading{font-size:25px; line-height:1.05}
  .mm-unit{font-size:10px}
  .mm-dial-wrap{margin-top:0; gap:6px; justify-content:center}
  .mm-dial{gap:5px}
  .mm-mode-btn{padding:7px 3px; font-size:12px}
  .mm-leadstat{gap:8px; font-size:10.5px; flex-wrap:wrap}
  .lead .dot{width:9px; height:9px}
  .mini-btn{padding:4px 8px; font-size:11px}
  .mm-howto{display:none}
  .mm-interpret{font-size:11px; min-height:13px; padding:1px 4px 0}
  .side-panel{min-height:300px}
  .side-tabs .tab{padding:8px 4px; font-size:12.5px}
  /* modals fit the screen */
  .modal{padding:18px}
  .modal.help{max-height:92vh}
  .help-grid{grid-template-columns:1fr}
  .help-tabs{gap:4px}
  .htab{padding:7px 9px; font-size:12px}
  .modal-actions{gap:8px}
  /* bigger touch targets for zoom */
  .zoom-controls{top:8px; right:8px; gap:6px}
  .zoom-controls button{width:38px; height:38px; font-size:19px}
  .hover-tip{max-width:200px}
}