:root {
  --board:#132d29;
  --board-deep:#0c211e;
  --board-mid:#1d3a35;
  --chalk:#f5f0df;
  --chalk-muted:#c8d5ce;
  --gold:#d8b866;
  --paper:#f5efdf;
  --ink:#25342f;
  --quiet:#4da981;
  --working:#e0ad4f;
  --loud:#dc6258;
  --panel:#f7f1e4;
  --panel-line:#d9cfb8;
  --heading-font:"Fredericka the Great", Georgia, serif;
  --display-font:"Cabin Sketch", "Trebuchet MS", sans-serif;
  --body-font:"Nunito", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
  margin:0;
  font-family:var(--body-font);
  color:var(--chalk);
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.035) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 32%, rgba(255,255,255,.025) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--board-mid), var(--board) 45%, var(--board-deep));
  background-size:31px 31px, 43px 43px, auto;
}
button, select, input { font:inherit; }
button, select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.topbar {
  min-height:82px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:14px 24px;
  border-bottom:1px solid rgba(245,240,223,.14);
  background:rgba(7,25,21,.3);
  backdrop-filter:blur(10px);
}
.brand { display:inline-flex; align-items:center; gap:10px; justify-self:start; color:var(--chalk); text-decoration:none; font-family:var(--display-font); font-weight:700; font-size:1.08rem; letter-spacing:.04em; }
.brand img { width:38px; height:38px; object-fit:contain; }
.title-wrap { text-align:center; }
.title-wrap h1 { margin:0; font-family:var(--display-font); font-size:2rem; line-height:1; letter-spacing:.02em; }
.title-wrap p { margin:4px 0 0; color:var(--chalk-muted); font-size:.8rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.icon-button { justify-self:end; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 14px; border:1px solid rgba(216,184,102,.55); border-radius:999px; color:var(--chalk); background:rgba(5,18,16,.28); font-weight:900; }
.icon-button:hover { background:rgba(216,184,102,.12); border-color:var(--gold); }

.app-shell { width:min(1520px, calc(100% - 30px)); margin:0 auto; padding:20px 0 28px; display:grid; grid-template-columns:330px minmax(0,1fr); gap:20px; }
.controls { align-self:start; display:flex; flex-direction:column; gap:14px; }
.control-section { color:var(--ink); background:linear-gradient(135deg, rgba(255,255,255,.7), transparent 40%), var(--panel); border:1px solid rgba(216,184,102,.5); border-radius:18px 22px 18px 20px; padding:18px; box-shadow:0 12px 34px rgba(0,0,0,.14); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-heading.compact { margin-bottom:12px; }
.kicker { margin:0 0 1px; color:#8a6940; font-size:.69rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.control-section h2 { margin:0; font-family:var(--display-font); font-size:1.2rem; line-height:1.05; color:#263a33; }
.status-dot { width:13px; height:13px; border-radius:50%; background:#aaa; box-shadow:0 0 0 5px rgba(0,0,0,.05); }
.status-dot.active { background:var(--quiet); box-shadow:0 0 0 5px rgba(77,169,129,.15); }
.status-dot.error { background:var(--loud); box-shadow:0 0 0 5px rgba(220,98,88,.15); }
.primary-button, .secondary-button { width:100%; min-height:44px; border-radius:12px; font-weight:900; border:0; }
.primary-button { color:#fff; background:#285f52; box-shadow:0 5px 0 #19463c; }
.primary-button:hover { transform:translateY(-1px); }
.primary-button:active { transform:translateY(3px); box-shadow:0 2px 0 #19463c; }
.secondary-button { margin-top:9px; color:#493c22; background:#ead9aa; border:1px solid #ceb876; }
.secondary-button:disabled { opacity:.5; cursor:not-allowed; }
.helper { margin:12px 0 0; color:#6c746f; font-size:.77rem; line-height:1.42; font-weight:700; }
.select-wrap select, .field-row select { width:100%; min-height:43px; border:1px solid #cfc5ad; border-radius:11px; background:#fffdf7; color:#273830; padding:0 38px 0 12px; font-weight:800; }
.range-row { display:block; margin:14px 0 0; }
.range-row:first-of-type { margin-top:0; }
.range-row > span, .field-row > span, .toggle-row > span:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#334139; font-size:.85rem; }
.range-row output { min-width:42px; text-align:right; color:#765c34; font-weight:900; }
.range-row input[type="range"] { width:100%; margin:9px 0 0; accent-color:#6f876f; }
.quiet-control input { accent-color:var(--quiet)!important; }
.loud-control input { accent-color:var(--loud)!important; }
.target-control input { accent-color:#6789c5!important; }
.field-row { display:grid; grid-template-columns:1fr 130px; align-items:center; gap:12px; margin-top:15px; }
.field-row > span { align-items:flex-start; flex-direction:column; gap:0; }
small { color:#7d8580; font-size:.7rem; font-weight:700; }
.toggle-row { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-top:16px; cursor:pointer; }
.toggle-row > span:first-child { align-items:flex-start; flex-direction:column; gap:0; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-ui { width:44px; height:25px; padding:3px; border-radius:999px; background:#b9b8b0; transition:.2s ease; }
.toggle-ui::before { content:""; display:block; width:19px; height:19px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:.2s ease; }
.toggle-row input:checked + .toggle-ui { background:#3b7b6a; }
.toggle-row input:checked + .toggle-ui::before { transform:translateX(19px); }

.meter-area { min-width:0; display:flex; flex-direction:column; gap:12px; }
.meter-topline, .meter-bottomline { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:58px; padding:8px 14px; border:1px solid rgba(245,240,223,.14); border-radius:15px; background:rgba(5,20,17,.28); }
.current-reading { display:flex; align-items:baseline; gap:8px; min-width:150px; }
.reading-number { font-family:var(--display-font); font-size:2.55rem; line-height:.8; font-weight:700; }
.reading-label { color:var(--chalk-muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.zone-summary { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.zone-pill { padding:6px 10px; border-radius:999px; font-size:.72rem; font-weight:900; border:1px solid transparent; }
.zone-quiet { background:rgba(77,169,129,.16); border-color:rgba(77,169,129,.38); color:#c9f0df; }
.zone-working { background:rgba(224,173,79,.15); border-color:rgba(224,173,79,.36); color:#f4ddb3; }
.zone-loud { background:rgba(220,98,88,.14); border-color:rgba(220,98,88,.36); color:#ffd0ca; }

.stage { position:relative; overflow:hidden; min-height:620px; flex:1; border:1px solid rgba(216,184,102,.5); border-radius:24px 30px 25px 27px; box-shadow:0 22px 60px rgba(0,0,0,.25); background:radial-gradient(circle at 50% 25%, rgba(255,255,255,.09), transparent 38%), linear-gradient(180deg,#173b35,#0a2420); transition:background .45s ease, box-shadow .4s ease; }
.stage[data-zone="working"] { box-shadow:0 22px 60px rgba(0,0,0,.25), inset 0 0 80px rgba(224,173,79,.07); }
.stage[data-zone="loud"] { box-shadow:0 22px 60px rgba(0,0,0,.28), inset 0 0 95px rgba(220,98,88,.12); }
.stage-message { position:absolute; z-index:20; left:24px; top:20px; display:flex; flex-direction:column; gap:2px; max-width:55%; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.stage-message strong { font-family:var(--display-font); font-size:clamp(1.45rem,3vw,2.2rem); }
.stage-message span { color:rgba(255,255,255,.78); font-size:.86rem; font-weight:800; }
.target-badge { position:absolute; z-index:20; right:20px; top:20px; display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(5,18,16,.35); backdrop-filter:blur(8px); font-size:.77rem; font-weight:800; }
.target-dot { width:9px; height:9px; border-radius:50%; background:#7ea0de; box-shadow:0 0 12px rgba(126,160,222,.8); }
.visual { position:absolute; inset:0; display:grid; place-items:center; }
.visual[hidden] { display:none!important; }

/* Traffic lights */
.theme-traffic { background:radial-gradient(circle at 50% 36%, rgba(255,255,255,.11), transparent 40%), linear-gradient(#23483f,#102c27); }
.traffic-hanger { position:absolute; top:0; left:50%; width:18px; height:145px; transform:translateX(-50%); background:#27312f; box-shadow:inset 3px 0 0 rgba(255,255,255,.08); }
.traffic-body { width:min(28vw,220px); min-width:150px; aspect-ratio:.52; padding:9%; display:flex; flex-direction:column; justify-content:space-around; align-items:center; border:10px solid #1c2322; border-radius:42px; background:#303b39; box-shadow:0 24px 55px rgba(0,0,0,.45), inset 8px 0 0 rgba(255,255,255,.04); }
.traffic-light { width:72%; aspect-ratio:1; border-radius:50%; opacity:.16; filter:saturate(.7); box-shadow:inset 0 8px 12px rgba(0,0,0,.4); transition:.2s ease; }
.traffic-light.red{background:#ef4b43}.traffic-light.amber{background:#f2b649}.traffic-light.green{background:#44d18f}
.stage[data-zone="quiet"] .theme-traffic .green, .stage[data-zone="working"] .theme-traffic .amber, .stage[data-zone="loud"] .theme-traffic .red { opacity:1; filter:saturate(1.2); box-shadow:0 0 45px currentColor, inset 0 8px 10px rgba(255,255,255,.18); }
.traffic-stand { position:absolute; bottom:0; width:200px; height:18px; background:#1d2422; border-radius:12px 12px 0 0; }

/* Volcano */
.theme-volcano { background:linear-gradient(#718aa1 0 58%, #605744 58%); }
.volcano-ground { position:absolute; inset:auto 0 0; height:24%; background:linear-gradient(#4f4637,#2e2b25); }
.volcano-cone { position:absolute; bottom:12%; left:50%; width:min(66%,660px); height:52%; transform:translateX(-50%); clip-path:polygon(50% 0, 96% 100%, 4% 100%); background:linear-gradient(100deg,#57483b,#80654d 48%,#4f4138); filter:drop-shadow(0 20px 20px rgba(0,0,0,.25)); }
.crater { position:absolute; left:35%; top:2%; width:30%; height:11%; border-radius:50%; overflow:hidden; background:#2e241f; }
.lava-surface { position:absolute; inset:45% 7% 0; border-radius:50%; background:#ff7a32; box-shadow:0 0 18px #ff7840; transform:scaleX(var(--lava-scale, .45)); transition:.25s ease; }
.volcano-sky { position:absolute; inset:0; }
.smoke { position:absolute; left:50%; top:30%; width:90px; height:55px; border-radius:50%; background:rgba(68,61,57,.68); opacity:var(--smoke-opacity,.12); filter:blur(1px); animation:smokeFloat 3.8s ease-in-out infinite; }
.smoke-b { margin-left:-85px; animation-delay:-1.4s; transform:scale(.75); }.smoke-c{margin-left:45px;animation-delay:-2.4s;transform:scale(.6)}
.lava-drop { position:absolute; left:50%; top:38%; width:12px; height:20px; border-radius:50%; background:#ff5b27; opacity:var(--eruption-opacity,0); box-shadow:0 0 12px #ff783d; animation:lavaBurst 1.2s ease-out infinite; }.lava-b{animation-delay:-.4s;margin-left:-35px}.lava-c{animation-delay:-.8s;margin-left:31px}
@keyframes smokeFloat{0%,100%{transform:translate(-50%,20px) scale(.7);opacity:0}50%{transform:translate(-50%,-65px) scale(1.18);opacity:var(--smoke-opacity,.25)}}
@keyframes lavaBurst{0%{transform:translate(-50%,55px) scale(.6);opacity:0}25%{opacity:var(--eruption-opacity,0)}100%{transform:translate(calc(-50% + var(--lava-x,30px)),-150px) scale(.25);opacity:0}}

/* Rocket */
.theme-rocket { background:radial-gradient(circle at 78% 16%,rgba(93,121,201,.18),transparent 24%), linear-gradient(#10162e,#070b1b); }
.space-stars { position:absolute; inset:0; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#c5d7ff 0 1px,transparent 1.5px); background-size:54px 54px,81px 81px; background-position:10px 8px, 27px 35px; opacity:.58; }
.rocket-track { position:absolute; inset:12% 12% 10%; }
.moon { position:absolute; top:-2%; right:2%; font-size:clamp(5rem,10vw,9rem); color:#f4e7a2; text-shadow:0 0 35px rgba(244,231,162,.28); transform:rotate(-15deg); }
.rocket { position:absolute; left:7%; bottom:6%; width:82px; height:150px; border-radius:52% 52% 28% 28%; background:linear-gradient(90deg,#d9e1e7,#fff 48%,#aab9c1); box-shadow:0 12px 30px rgba(0,0,0,.25); transform:translate(var(--rocket-x,0), calc(var(--rocket-y,0) * -1)) rotate(var(--rocket-r,0deg)); transition:transform .25s ease; }
.rocket::before { content:""; position:absolute; left:20px; right:20px; top:-42px; height:65px; border-radius:50% 50% 0 0; background:#db574d; clip-path:polygon(50% 0,100% 100%,0 100%); }
.rocket::after { content:""; position:absolute; left:-22px; right:-22px; bottom:8px; height:58px; background:#d95a50; clip-path:polygon(22% 0,42% 100%,58% 100%,78% 0,100% 100%,0 100%); z-index:-1; }
.rocket-window { position:absolute; top:34px; left:23px; width:36px; height:36px; border-radius:50%; background:#65a6c9; border:6px solid #506b77; box-shadow:inset 0 5px 8px rgba(255,255,255,.28); }
.rocket-flame { position:absolute; left:28px; bottom:-58px; width:26px; height:66px; border-radius:50% 50% 70% 70%; background:linear-gradient(#fff6a0,#ff9f33 45%,#f24f3b); clip-path:polygon(50% 100%,0 0,100% 0); transform:scaleY(var(--flame-scale,.35)); transform-origin:top; filter:drop-shadow(0 0 15px #ff8844); }
.launch-pad { position:absolute; left:3%; bottom:0; width:145px; height:18px; background:#63747f; border-radius:50%; box-shadow:0 9px 0 #353e44; }
.challenge-label { position:absolute; right:5%; bottom:5%; color:rgba(255,255,255,.65); font-family:var(--display-font); font-size:clamp(1rem,2vw,1.5rem); }

/* Balloon */
.theme-balloon { background:linear-gradient(#8ec5df 0 70%,#d7e6b2 70%); }
.balloon-wrap { position:absolute; left:50%; top:50%; width:190px; height:360px; transform:translate(-50%,-47%) scale(var(--balloon-scale,.62)); transform-origin:50% 42%; transition:transform .18s ease; }
.balloon-shape { width:190px; height:225px; border-radius:50% 50% 46% 46%; background:linear-gradient(100deg,#dd5759,#f37a75 55%,#c13f48); box-shadow:inset -20px -16px 28px rgba(0,0,0,.12),0 24px 40px rgba(0,0,0,.18); position:relative; }
.balloon-shape::after { content:""; position:absolute; bottom:-16px; left:79px; border-left:16px solid transparent; border-right:16px solid transparent; border-top:25px solid #c94b51; }
.balloon-shine { position:absolute; width:34px; height:75px; border-radius:50%; background:rgba(255,255,255,.25); left:33px; top:38px; transform:rotate(20deg); }
.balloon-string { width:2px; height:128px; background:#727272; margin:17px auto 0; transform:rotate(3deg); transform-origin:top; }
.balloon-pop { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) scale(.4); font-family:var(--display-font); font-size:clamp(5rem,13vw,10rem); color:#fff; text-shadow:0 8px 0 #b64843,0 0 35px rgba(255,255,255,.5); opacity:0; }
.theme-balloon.popped .balloon-wrap { opacity:0; }
.theme-balloon.popped .balloon-pop { animation:popText .6s ease-out; }
@keyframes popText { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-12deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(4deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)} }

/* Thermometer */
.theme-thermometer { background:linear-gradient(135deg,#e6f0f0,#c3d6d4); }
.thermometer-shell { position:relative; height:min(74%,500px); width:155px; }
.thermometer-tube { position:absolute; left:50%; top:0; width:56px; height:84%; transform:translateX(-50%); border:9px solid #f4f7f6; border-radius:32px 32px 10px 10px; background:#dfe7e5; overflow:hidden; box-shadow:0 12px 35px rgba(27,57,54,.18), inset 0 0 9px rgba(0,0,0,.1); }
.mercury { position:absolute; left:10px; right:10px; bottom:0; height:var(--thermo-level,0%); border-radius:20px 20px 0 0; background:linear-gradient(#4ba8c8 0%,#e0ad4f 62%,#dc6258 100%); transition:height .18s ease; }
.thermometer-bulb { position:absolute; left:50%; bottom:0; width:118px; height:118px; transform:translateX(-50%); border:10px solid #f4f7f6; border-radius:50%; background:var(--thermo-colour,#4ba8c8); box-shadow:0 12px 35px rgba(27,57,54,.18); transition:background .2s ease; }
.thermometer-marks { position:absolute; top:4%; left:105px; width:44px; height:72%; background:repeating-linear-gradient(to bottom,#61726d 0 2px,transparent 2px 12.5%); opacity:.5; }

/* Storm */
.theme-storm { background:linear-gradient(var(--storm-top,#8eb7cc),var(--storm-bottom,#d9e7e8)); transition:background .35s ease; }
.storm-scene { position:absolute; left:50%; top:47%; width:min(72%,720px); height:330px; transform:translate(-50%,-50%); filter:drop-shadow(0 22px 25px rgba(0,0,0,.2)); }
.cloud { position:absolute; background:var(--cloud-colour,#f3f7f7); border-radius:50%; transition:background .3s ease; }
.cloud-left{width:260px;height:170px;left:5%;top:90px}.cloud-centre{width:330px;height:235px;left:28%;top:28px}.cloud-right{width:255px;height:170px;right:2%;top:95px}
.rain { position:absolute; inset:205px 15% 0; opacity:var(--rain-opacity,0); background:repeating-linear-gradient(105deg,transparent 0 24px,rgba(160,216,250,.8) 25px 28px,transparent 29px 47px); animation:rainMove .4s linear infinite; }
.lightning { position:absolute; left:52%; top:195px; color:#fff4a9; font-size:130px; line-height:1; opacity:var(--lightning-opacity,0); filter:drop-shadow(0 0 22px #fff2a6); animation:lightFlash 1.15s steps(2) infinite; }
@keyframes rainMove{to{background-position:23px 42px}}@keyframes lightFlash{0%,60%,100%{opacity:0}65%,73%{opacity:var(--lightning-opacity,0)}}

/* Emoji */
.theme-emoji { background:linear-gradient(135deg,#9ec8e6,#dae9ef); }
.emoji-face { position:absolute; left:50%; top:48%; width:min(48vw,430px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:var(--emoji-colour,#62a9e0); box-shadow:inset -22px -28px 0 rgba(0,0,0,.08),0 28px 50px rgba(38,68,77,.22); transition:background .28s ease,transform .22s ease; }
.emoji-eyes { position:absolute; top:31%; left:22%; right:22%; display:flex; justify-content:space-between; }
.emoji-eyes span { width:14%; aspect-ratio:.68; border-radius:50%; background:#28323a; transition:.2s ease; }
.emoji-mouth { position:absolute; left:50%; top:62%; width:40%; height:18%; transform:translateX(-50%); border-bottom:16px solid #28323a; border-radius:0 0 90px 90px; transition:.2s ease; }
.emoji-brows { position:absolute; left:20%; right:20%; top:22%; display:flex; justify-content:space-between; opacity:0; }
.emoji-brows span { width:28%; height:12px; border-radius:8px; background:#28323a; transition:.2s ease; }.emoji-brows span:first-child{transform:rotate(18deg)}.emoji-brows span:last-child{transform:rotate(-18deg)}
.stage[data-zone="working"] .emoji-mouth { width:30%; height:0; border-bottom:12px solid #28323a; border-radius:8px; }
.stage[data-zone="loud"] .emoji-mouth { width:32%; height:23%; border:14px solid #28323a; border-bottom-width:8px; border-radius:50%; background:#9b3940; }
.stage[data-zone="loud"] .emoji-brows { opacity:1; }
.stage[data-zone="loud"] .emoji-face { animation:emojiShake .24s linear infinite; }
.emoji-caption { position:absolute; bottom:8%; font-family:var(--display-font); font-size:clamp(1.2rem,3vw,2rem); color:#31464e; font-weight:700; }
@keyframes emojiShake{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-2deg)}75%{transform:translate(-50%,-50%) rotate(2deg)}}

/* Minecart */
.theme-minecart { background:linear-gradient(#302d37 0 72%,#1a1720 72%); }
.mine-scene { position:absolute; inset:12% 7% 8%; overflow:hidden; }
.cave-glow { position:absolute; inset:0; background:radial-gradient(circle at 20% 40%,rgba(219,160,76,.12),transparent 24%),radial-gradient(circle at 72% 32%,rgba(99,132,150,.08),transparent 23%); }
.track { position:absolute; left:2%; right:14%; bottom:19%; height:14px; background:#8a7051; transform:rotate(4deg); transform-origin:left; box-shadow:0 10px 0 #43372b; }
.track span { position:absolute; width:8px; height:58px; top:-21px; background:#725d45; }.track span:nth-child(1){left:4%}.track span:nth-child(2){left:20%}.track span:nth-child(3){left:36%}.track span:nth-child(4){left:52%}.track span:nth-child(5){left:68%}.track span:nth-child(6){left:84%}.track span:nth-child(7){left:98%}
.cliff { position:absolute; right:-1%; bottom:0; width:18%; height:30%; background:#0d0b10; clip-path:polygon(22% 0,100% 15%,100% 100%,0 100%); }
.cart { position:absolute; left:4%; bottom:22%; width:150px; height:92px; transform:translateX(var(--cart-x,0)) rotate(4deg); transition:transform .2s ease; }
.cart::before { content:""; position:absolute; inset:0 0 27px; border-radius:8px 8px 22px 22px; background:#8f5f3c; border:7px solid #4b3325; box-shadow:inset 0 8px 0 rgba(255,255,255,.09); clip-path:polygon(0 0,100% 0,87% 100%,13% 100%); }
.ore { position:absolute; z-index:2; top:-8px; left:23px; color:#b9d0d6; font-size:24px; letter-spacing:5px; text-shadow:0 4px 0 #53666a; }
.wheel { position:absolute; z-index:3; bottom:0; width:42px; height:42px; border-radius:50%; background:#31363a; border:7px solid #6a7073; }.wheel-a{left:20px}.wheel-b{right:20px}
.danger-sign { position:absolute; right:7%; bottom:33%; width:75px; height:75px; display:grid; place-items:center; clip-path:polygon(50% 0,100% 100%,0 100%); padding-top:18px; background:#e0ad4f; color:#3b2a19; font-size:35px; font-weight:900; }
.stage[data-zone="loud"] .cart { animation:cartRattle .16s linear infinite; }
@keyframes cartRattle{0%,100%{margin-top:0}50%{margin-top:-5px}}

/* Pressure gauge */
.theme-pressure { background:radial-gradient(circle at 50% 42%,#43555b,#172328 70%); }
.gauge-wrap { position:relative; width:min(62vw,560px); aspect-ratio:1.08; }
.gauge-face { position:absolute; left:50%; top:50%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,#f1ead8 0 62%,#cbc0a8 63% 66%,#536065 67% 74%,#273033 75%); box-shadow:0 24px 50px rgba(0,0,0,.38), inset 0 0 0 5px rgba(255,255,255,.08); }
.gauge-face::before { content:""; position:absolute; inset:15%; border-radius:50%; background:conic-gradient(from 230deg,var(--quiet) 0 28%,var(--working) 28% 61%,var(--loud) 61% 72%,transparent 72%); opacity:.28; clip-path:polygon(0 0,100% 0,100% 78%,50% 50%,0 78%); }
.gauge-needle { position:absolute; left:50%; top:50%; width:40%; height:9px; border-radius:10px; background:#ac3c35; transform-origin:0 50%; transform:rotate(var(--needle-angle,-130deg)); box-shadow:0 3px 4px rgba(0,0,0,.28); transition:transform .16s ease; }
.gauge-pin { position:absolute; left:50%; top:50%; width:35px; height:35px; transform:translate(-50%,-50%); border-radius:50%; background:#4e5557; border:7px solid #929b9c; box-shadow:0 4px 8px rgba(0,0,0,.3); }
.gauge-label { position:absolute; bottom:21%; width:100%; text-align:center; color:#5a5e5b; font-size:.8rem; font-weight:900; letter-spacing:.16em; }
.pipe { position:absolute; top:42%; width:23%; height:18%; border:18px solid #58656a; border-radius:25px; background:#29363a; box-shadow:inset 0 0 0 5px rgba(255,255,255,.06); }.left-pipe{left:-3%;border-right:0}.right-pipe{right:-3%;border-left:0}
.steam { position:absolute; top:26%; color:#eaf4f1; font-size:80px; opacity:var(--steam-opacity,0); filter:blur(2px); animation:steamPuff 1.4s ease-out infinite; }.steam-left{left:-1%}.steam-right{right:-1%;animation-delay:-.7s}
@keyframes steamPuff{0%{transform:translateY(50px) scale(.5);opacity:0}35%{opacity:var(--steam-opacity,0)}100%{transform:translateY(-70px) scale(1.25);opacity:0}}

/* Equaliser */
.theme-equaliser { background:radial-gradient(circle at 50% 70%,rgba(93,77,179,.2),transparent 42%),linear-gradient(#080a14,#0f1020); }
.equaliser-title { position:absolute; top:14%; left:0; right:0; text-align:center; color:#b8b4f5; font-size:.78rem; letter-spacing:.22em; font-weight:900; }
.equaliser { position:absolute; left:7%; right:7%; bottom:20%; height:52%; display:flex; align-items:flex-end; justify-content:center; gap:clamp(4px,.7vw,10px); }
.eq-bar { flex:1 1 0; max-width:25px; min-width:5px; height:var(--bar-height,10%); border-radius:6px 6px 2px 2px; background:linear-gradient(to top,#6675ff 0 38%,#66d4d2 62%,#f0ba58 82%,#f06469); box-shadow:0 0 12px rgba(102,117,255,.3); transition:height .08s linear; }
.equaliser-floor { position:absolute; left:6%; right:6%; bottom:18%; height:2px; background:linear-gradient(90deg,transparent,#696eac,transparent); box-shadow:0 0 22px #626bd8; }
.stage[data-zone="loud"] .theme-equaliser { animation:equaliserPulse .5s ease-in-out infinite alternate; }
@keyframes equaliserPulse{to{filter:saturate(1.25) brightness(1.12)}}

.meter-bottomline { min-height:48px; color:var(--chalk-muted); font-size:.78rem; font-weight:800; }
.target-status { display:flex; align-items:center; gap:8px; }
.target-status-dot { width:10px; height:10px; border-radius:50%; background:#858f8a; }
.target-status.on-target .target-status-dot { background:var(--quiet); box-shadow:0 0 10px rgba(77,169,129,.6); }
.target-status.above-target .target-status-dot { background:var(--loud); box-shadow:0 0 10px rgba(220,98,88,.55); }
.calibration-readout { opacity:.75; }

body.is-fullscreen .topbar, body.is-fullscreen .controls { display:none; }
body.is-fullscreen .app-shell { width:100%; height:100vh; padding:0; display:block; }
body.is-fullscreen .meter-area { height:100vh; gap:0; }
body.is-fullscreen .meter-topline { position:absolute; z-index:50; left:16px; right:16px; top:14px; border-radius:14px; background:rgba(5,20,17,.48); backdrop-filter:blur(10px); }
body.is-fullscreen .meter-bottomline { position:absolute; z-index:50; left:16px; right:16px; bottom:14px; border-radius:14px; background:rgba(5,20,17,.48); backdrop-filter:blur(10px); }
body.is-fullscreen .stage { min-height:100vh; height:100vh; border:0; border-radius:0; }
body.is-fullscreen .stage-message { top:92px; }
body.is-fullscreen .target-badge { top:94px; }

@media (max-width:1050px) {
  .app-shell { grid-template-columns:285px minmax(0,1fr); }
  .stage { min-height:560px; }
  .field-row { grid-template-columns:1fr 115px; }
}
@media (max-width:820px) {
  .topbar { grid-template-columns:auto 1fr auto; padding:10px 13px; }
  .brand span,.button-label { display:none; }
  .title-wrap { text-align:left; }
  .title-wrap h1 { font-size:1.5rem; }
  .title-wrap p { display:none; }
  .app-shell { width:min(100% - 18px,760px); grid-template-columns:1fr; padding-top:10px; }
  .controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .microphone-section { grid-column:1 / -1; }
  .meter-area { grid-row:1; }
  .controls { grid-row:2; }
  .stage { min-height:520px; }
  .meter-topline { align-items:flex-start; }
  .zone-summary { gap:4px; }
  .zone-pill { font-size:.64rem; padding:5px 7px; }
}
@media (max-width:560px) {
  .controls { grid-template-columns:1fr; }
  .stage { min-height:460px; border-radius:18px; }
  .meter-topline { flex-direction:column; align-items:stretch; }
  .current-reading { justify-content:center; }
  .zone-summary { justify-content:center; }
  .stage-message { left:16px; top:14px; max-width:62%; }
  .target-badge { right:12px; top:14px; font-size:.68rem; }
  .meter-bottomline { align-items:flex-start; flex-direction:column; gap:4px; }
  .traffic-body { min-width:132px; }
  .storm-scene { width:92%; transform:translate(-50%,-45%) scale(.72); }
  .cart { transform:translateX(var(--cart-x,0)) rotate(4deg) scale(.72); transform-origin:left bottom; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}