/* Noise Meter. Shared styles come from /assets/css/game.css */
.nm-app{display:flex;flex-direction:column;gap:12px}

/* ===================== BACKDROPS =====================
   --bg background · --fg text · --ac title · --ok/--wn/--lo traffic colours · --hous/--hrim traffic-light housing
   --ff/--fw font · --frame extra box-shadow */
[data-look]{--ff:'Inter',system-ui,sans-serif;--fw:800;--frame:none;--sh:none;--tt:none}
[data-look=clean]{--bg:#f8fafc;--fg:#0f172a;--ac:#0d9488;--ok:#16a34a;--wn:#f59e0b;--lo:#dc2626;--hous:#1e293b;--hrim:#0f172a}
[data-look=midnight]{--bg:radial-gradient(ellipse at 50% 30%,#16233f,#0a1120 78%);--fg:#f1f5f9;--ac:#38bdf8;--ok:#4ade80;--wn:#fbbf24;--lo:#fb7185;--hous:#020617;--hrim:#334155}
[data-look=chalk]{--bg:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.07),transparent 55%),radial-gradient(ellipse at 75% 80%,rgba(255,255,255,.05),transparent 50%),#244f3c;
  --fg:#f8fafc;--ac:#fde68a;--ok:#86efac;--wn:#fcd34d;--lo:#fda4af;--hous:rgba(10,30,22,.75);--hrim:#f8fafc;--ff:'Patrick Hand','Comic Sans MS',cursive;--fw:400;--sh:0 0 .03em rgba(255,255,255,.85);
  --frame:inset 0 0 0 clamp(7px,1.6vw,16px) #8a5a2b,inset 0 0 0 calc(clamp(7px,1.6vw,16px) + 3px) #4a2f14,inset 0 0 70px rgba(0,0,0,.45)}
[data-look=sunrise]{--bg:linear-gradient(160deg,#9a3412,#9d174d 58%,#4c1d95);--fg:#fff7ed;--ac:#fed7aa;--ok:#4ade80;--wn:#fde047;--lo:#ff6b81;--hous:rgba(30,10,50,.8);--hrim:#fed7aa;--sh:0 .02em .06em rgba(0,0,0,.3)}
[data-look=playful]{--bg:radial-gradient(circle at 8% 14%,#fecdd3 0 7%,transparent 7.4%),radial-gradient(circle at 92% 20%,#bae6fd 0 9%,transparent 9.4%),radial-gradient(circle at 14% 90%,#fde68a 0 10%,transparent 10.4%),radial-gradient(circle at 88% 86%,#bbf7d0 0 8%,transparent 8.4%),#fff7ed;
  --fg:#5b21b6;--ac:#db2777;--ok:#22c55e;--wn:#f59e0b;--lo:#ef4444;--hous:#4c1d95;--hrim:#7c3aed;--ff:'Baloo 2','Trebuchet MS',sans-serif;--fw:800}

/* ===================== STAGE ===================== */
.nm-stage{position:relative;container:nm/size;display:flex;flex-direction:column;align-items:center;gap:1.5cqmin;overflow:hidden;width:100%;height:clamp(380px,62vh,540px);padding:2.5cqmin 3cqmin;
  background:var(--bg);color:var(--fg);font-family:var(--ff);border:3px solid var(--hard);border-radius:var(--r);box-shadow:var(--shadow),var(--frame);isolation:isolate}
.nm-flashfx{position:absolute;inset:0;background:var(--lo);opacity:0;pointer-events:none;z-index:1;transition:opacity .4s}
.nm-stage[data-zone=loud]:not(.no-flash) .nm-flashfx{animation:nmFlash 1s ease-in-out infinite}
@keyframes nmFlash{0%,100%{opacity:0}50%{opacity:.3}}
.nm-title,.nm-body,.nm-pill{position:relative;z-index:2}
.nm-title{flex:none;max-width:100%;text-align:center;font-weight:var(--fw);color:var(--ac);line-height:1.15;overflow-wrap:anywhere;text-shadow:var(--sh);font-size:clamp(18px,5.2cqmin,60px);padding:0 14%}
.nm-title:empty{display:none}
.nm-pill{position:absolute;top:10px;left:12px;z-index:3;display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:99px;font:700 .78rem 'Inter',sans-serif;background:rgba(0,0,0,.55);color:#fff;letter-spacing:.04em;text-transform:uppercase}
.nm-pill.on{background:rgba(22,163,74,.9)}
.nm-pill.on i{animation:nmDot 1.4s ease-in-out infinite}
@keyframes nmDot{0%,100%{opacity:1}50%{opacity:.35}}
.nm-body{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.6cqmin}
.nm-view{flex:1 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.nm-view svg{display:block;width:100%;height:100%;overflow:visible}
.nm-side{flex:none;width:min(100%,640px);display:flex;flex-direction:column;align-items:center;gap:1.4cqmin}
.nm-msg{max-width:100%;min-height:1.2em;text-align:center;font-weight:var(--fw);line-height:1.15;font-size:clamp(16px,4.6cqmin,52px);text-shadow:var(--sh);overflow-wrap:anywhere;color:var(--fg)}
.nm-stage[data-zone=ok] .nm-msg{color:var(--ok)}.nm-stage[data-zone=warn] .nm-msg{color:var(--wn)}.nm-stage[data-zone=loud] .nm-msg{color:var(--lo)}
.nm-msg.nm-err{color:var(--fg)!important;font-size:clamp(14px,3.2cqmin,30px);font-weight:700}
.nm-msg.nm-hl{color:var(--ac)!important}
.nm-lvlrow{width:100%;display:flex;align-items:center;gap:2cqmin}
.nm-lvl{position:relative;flex:1;height:clamp(10px,2.6cqmin,24px);border-radius:99px;overflow:hidden;background:rgba(127,127,127,.25)}
.nm-lvl b{position:absolute;inset:0;background:var(--zones);opacity:.28}
.nm-lvl i{position:absolute;inset:0;background:var(--zones);clip-path:inset(0 100% 0 0)}
.nm-lvl u{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--bg);opacity:.9}
.nm-num{flex:none;min-width:2.2em;text-align:right;font-weight:var(--fw);font-size:clamp(16px,4cqmin,40px);line-height:1;font-variant-numeric:tabular-nums}
.nm-stage.no-num .nm-num{display:none}
.nm-stats{display:flex;flex-wrap:wrap;gap:1.2cqmin 2cqmin;justify-content:center}
.nm-chip{display:inline-flex;align-items:baseline;gap:.4em;padding:.25em .8em;border-radius:99px;background:rgba(127,127,127,.2);font-size:clamp(13px,2.8cqmin,26px);white-space:nowrap}
.nm-chip small{font:700 .72em 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.nm-chip b{font-weight:var(--fw);font-variant-numeric:tabular-nums}
.nm-chip i{color:#fbbf24;font-size:.9em}
.nm-stage.no-stars #nmChipStars,.nm-stage.no-stars #nmChipStreak{display:none}
.nm-stage.nm-star #nmChipStars{animation:nmPop .9s ease-out}
@keyframes nmPop{0%{transform:scale(1)}30%{transform:scale(1.5);background:#fbbf24;color:#422006}100%{transform:scale(1)}}
.nm-hist{display:block;width:100%;height:clamp(28px,11cqh,70px);border-radius:8px;background:rgba(127,127,127,.12)}
.nm-stage.no-hist .nm-hist{display:none}

/* wide stage: display on the left, readouts on the right */
@container nm (min-aspect-ratio:7/5){
  .nm-body{flex-direction:row;align-items:center;gap:3cqw}
  .nm-view{flex:1 1 52%;height:100%}
  .nm-side{flex:1 1 40%;width:auto;min-width:0;justify-content:center}
  .nm-stats{justify-content:flex-start}
  .nm-msg{font-size:clamp(18px,6.4cqh,56px)}
  .nm-title{padding:0 12%}
}
/* very short stage (phone on its side): drop the extras */
@container nm (max-height:300px){.nm-hist{display:none}.nm-title{font-size:clamp(14px,8cqh,28px)}.nm-stats{gap:6px}.nm-chip{padding:.15em .6em}}

/* ===================== DISPLAYS ===================== */
.nm-lamp{opacity:.16;transition:opacity .2s,filter .2s}
.nm-lamp.on{opacity:1;filter:drop-shadow(0 0 14px currentColor)}
.nm-lamp[data-z="0"].on{filter:drop-shadow(0 0 14px var(--ok))}.nm-lamp[data-z="1"].on{filter:drop-shadow(0 0 14px var(--wn))}.nm-lamp[data-z="2"].on{filter:drop-shadow(0 0 16px var(--lo))}
.nm-stage[data-zone=loud] .nm-lamp.on{animation:nmBlink .5s steps(2) infinite}
@keyframes nmBlink{50%{opacity:.7}}
.nm-seg{fill:none;stroke-width:34}
.nm-stage[data-zone=idle] .nm-needle{opacity:.5}
.nm-bar{transition:opacity .08s}
.nm-bbody{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.nm-stage[data-zone=loud] .nm-bsway{animation:nmShake .18s linear infinite;transform-origin:150px 262px}
@keyframes nmShake{0%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}100%{transform:rotate(-2.5deg)}}
.nm-stage[data-zone=idle] .nm-bbody{opacity:.55}
.nm-fbody{stroke:rgba(0,0,0,.25);stroke-width:6;transition:fill .25s}
.nm-eye{fill:#111827}.nm-shut path{fill:none;stroke:#111827;stroke-width:8;stroke-linecap:round}
.nm-brow{fill:none;stroke:#111827;stroke-width:9;stroke-linecap:round}
.nm-mouth{fill:none;stroke:#111827;stroke-width:10;stroke-linecap:round}
.nm-mopen{fill:#7f1d1d;stroke:#111827;stroke-width:8}
.nm-zzz{fill:#111827;opacity:.6;font-family:'Baloo 2',sans-serif}
.nm-stage[data-zone=idle] .nm-fbody{fill:#94a3b8!important}
.nm-stage[data-zone=loud] .nm-view.nm-d-faces svg{animation:nmShake .16s linear infinite;transform-origin:50% 50%}

/* ===================== CONTROLS ===================== */
.nm-ctl{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center}
.btn.nm-big{padding:12px 22px;font-size:1.05rem;min-width:130px;min-height:50px}
.nm-sens{display:flex;align-items:center;gap:10px;flex:0 1 300px;min-width:200px;padding:6px 14px;border:3px solid var(--hard);border-radius:12px;background:var(--panel2);box-shadow:var(--shadow-sm);min-height:50px}
.nm-sens span{font:700 .85rem 'Inter',sans-serif;color:var(--soft)}
.nm-sens input{flex:1;min-width:0}
.nm-priv{margin:0;text-align:center;font-size:.8rem;color:var(--muted)}
.nm-priv i{margin-right:4px}
.nm-set{padding:14px 16px 12px}
.nm-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.nm-pick,.nm-snd{display:flex;align-items:center;gap:9px;padding:10px 12px;border:3px solid var(--hard);border-radius:10px;background:var(--panel2);color:var(--text);font:700 .82rem 'Inter',sans-serif;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm)}
.nm-pick i,.nm-snd i{width:1.2em;text-align:center;font-size:1.05rem;flex:none}
.nm-pick[aria-pressed=true],.nm-snd[aria-pressed=true]{background:var(--gold);color:var(--hard)}
.nm-sounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.nm-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.nm-lk{display:flex;flex-direction:column;gap:5px;padding:5px;border:3px solid var(--hard);border-radius:12px;background:var(--panel2);cursor:pointer;color:var(--text);font:700 .78rem 'Inter',sans-serif;box-shadow:var(--shadow-sm)}
.nm-lk[aria-pressed=true]{background:var(--gold);color:var(--hard)}
.nm-sw{display:flex;align-items:center;justify-content:center;gap:6px;aspect-ratio:16/10;border-radius:7px;background:var(--bg);box-shadow:var(--frame)}
.nm-sw i{width:22%;aspect-ratio:1;border-radius:50%;display:block}
.nm-sw i:nth-child(1){background:var(--ok)}.nm-sw i:nth-child(2){background:var(--wn)}.nm-sw i:nth-child(3){background:var(--lo)}
.nm-foot{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;margin-top:16px;padding-top:10px;border-top:2px solid var(--line)}
kbd{font:700 .72rem 'Inter',sans-serif;padding:1px 6px;border:2px solid var(--line);border-bottom-width:3px;border-radius:6px;background:var(--bg);color:var(--soft)}
@media(max-width:760px){.btn.nm-big{flex:1 1 140px;min-width:0}.nm-sens{flex:1 1 100%}}

/* ===================== FULL SCREEN ===================== */
html.gic-fs .nm-app{display:block}
html.gic-fs .nm-stage{position:fixed;inset:0;z-index:40;width:auto;height:auto!important;border:0;border-radius:0;padding:3cqmin 4cqmin;padding-bottom:calc(var(--ctlh,80px) + 2.4vh)}
html.gic-fs .nm-title{padding:0 12%}
html.gic-fs .nm-ctl{position:fixed;left:0;right:0;bottom:max(14px,1.8vh);z-index:60;transition:opacity .35s}
html.gic-fs .nm-ctl.hide{opacity:0;pointer-events:none}
html.gic-fs .btn.nm-big{font-size:clamp(1rem,2.4vmin,1.9rem);padding:.6em 1.3em;min-height:0;min-width:0;background:rgba(15,23,42,.82);color:#fff;border-color:rgba(255,255,255,.35);box-shadow:0 4px 14px rgba(0,0,0,.35)}
html.gic-fs .btn.nm-big.accent{background:#10b981;color:#052e16}
html.gic-fs .nm-sens{background:rgba(15,23,42,.82);border-color:rgba(255,255,255,.35)}
html.gic-fs .nm-sens span{color:#fff}
html.gic-fs .nm-pill{top:14px;left:16px}

@media(prefers-reduced-motion:reduce){
  .nm-stage[data-zone=loud]:not(.no-flash) .nm-flashfx{animation:none;opacity:.22}
  .nm-stage[data-zone=loud] .nm-bsway,.nm-stage[data-zone=loud] .nm-lamp.on,.nm-stage[data-zone=loud] .nm-view.nm-d-faces svg,.nm-pill.on i,.nm-stage.nm-star #nmChipStars{animation:none}
}

/* narrow stage (phones): the status pill shrinks to an icon so the title stays clear */
@container nm (max-width:560px){
  .nm-pill span{display:none}.nm-pill{padding:5px 8px}
  .nm-title,html.gic-fs .nm-title{padding:0 40px}
}

/* Present mode: the class screen is just the meter; the phone is the remote */
html.gic-present .nm-ctl,html.gic-present .nm-priv,html.gic-present .nm-set{display:none!important}
html.gic-present .nm-title{margin-top:clamp(30px,5cqmin,44px)}   /* keep the title clear of the Present bar at the top */