/* ============================================================
   v3-mic.css — Mic Setup (Codex HANDOFF.md 912-933,
   design-review/mockups/mic-setup-desktop-v1.webp / mic-setup-landscape-v1.webp)
   Every box = Codex's written (x,y,w,h) in reference px scaled by --u:
   desktop ref 1920x1080, phone landscape ref 844x390 (inside the safe area).
   States are painted by js/v3-mic.js into #screen-mic[data-mic=...].
   ============================================================ */

#screen-mic{
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);  --sb: env(safe-area-inset-bottom, 0px);
  --u: min(calc((100vw - var(--sl) - var(--sr)) / 844), calc((100vh - var(--st) - var(--sb)) / 390));
  --blue:#00C2FF; --red:#FF2D2D; --green:#00FF87; --amber:#FFB300; --yellow:#FFE600;
  --ink:#F4F7FF; --ink2:#B7C4D8; --muted:#899AB3; --edge:#344963; --panel:#121C32; --raised:#1C2A45;
  padding:0 !important; gap:0 !important; min-height:0 !important; height:100vh; height:100dvh; overflow:hidden;
  text-align:left;
  background:#080D1A url('../assets/ui/lobby-bg-v4-mobile.webp') center / cover no-repeat !important;
}
/* same light treatment as #screen-lobby::before in home-v3.css: no blur, light scrim only */
#screen-mic::before{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  background:linear-gradient(180deg, rgba(4,6,16,.04), rgba(4,6,16,.22));
}
@media (min-width:768px) and (min-height:521px){
  #screen-mic{
    --u: min(calc(100vw / 1920), calc(100vh / 1080));
    background-image:url('../assets/ui/lobby-bg-v4.webp') !important;
  }
}

/* ---------- stage: one reference-sized box, centred inside the safe area ---------- */
#screen-mic .mic-stage{
  position:absolute !important; z-index:1;
  width:calc(844 * var(--u)); height:calc(390 * var(--u));
  left:calc(var(--sl) + (100vw - var(--sl) - var(--sr) - 844 * var(--u)) / 2);
  top:calc(var(--st) + (100vh - var(--st) - var(--sb) - 390 * var(--u)) / 2);
  font-family:'Oswald', 'Rajdhani', sans-serif; color:var(--ink);
}
@media (min-width:768px) and (min-height:521px){
  #screen-mic .mic-stage{ width:calc(1920 * var(--u)); height:calc(1080 * var(--u));
    left:calc((100vw - 1920 * var(--u)) / 2); top:calc((100vh - 1080 * var(--u)) / 2); }
}
#screen-mic .mic-stage > *{ position:absolute; box-sizing:border-box; margin:0; }
#screen-mic .mic-stage *, #screen-mic .mic-stage *::before, #screen-mic .mic-stage *::after{ box-sizing:border-box; }

/* ---------- title ribbon (header-ribbon-v3, slice 24/96) ---------- */
#screen-mic .mic-title{
  left:calc(216 * var(--u)); top:calc(8 * var(--u)); width:calc(412 * var(--u)); height:calc(44 * var(--u));
  display:flex; align-items:center; justify-content:center; gap:.28em;
  border-style:solid; border-width:calc(6 * var(--u)) calc(20 * var(--u));
  border-image:url('../assets/ui/header-ribbon-v3.webp') 24 96 fill / calc(6 * var(--u)) calc(20 * var(--u));
  font-family:'Bangers', 'Luckiest Guy', sans-serif; font-weight:400; font-style:italic;
  font-size:calc(28 * var(--u)); line-height:1; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink); text-shadow:0 2px 0 #000, 2px 2px 0 #000, -1px -1px 0 #000;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
#screen-mic .mic-title em{ font-style:italic; color:var(--blue); font-size:1.14em; text-shadow:0 2px 0 #00243a, 2px 2px 0 #000, 0 0 18px rgba(0,194,255,.45); }

/* ---------- panels (panel-frame-v3 9-slice drawn on ::before, content sits on exact boxes) ---------- */
#screen-mic .mic-panel, #screen-mic .voice-panel{ z-index:1; }
#screen-mic .mic-panel::before, #screen-mic .voice-panel::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-style:solid; border-width:calc(12 * var(--u));
  border-image:url('../assets/ui/panel-frame-v3.webp') 64 fill / calc(12 * var(--u));
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
#screen-mic .mic-panel{ left:calc(12 * var(--u)); top:calc(64 * var(--u)); width:calc(324 * var(--u)); height:calc(264 * var(--u)); }
#screen-mic .voice-panel{ left:calc(348 * var(--u)); top:calc(64 * var(--u)); width:calc(484 * var(--u)); height:calc(264 * var(--u)); }
#screen-mic .mic-panel > *, #screen-mic .voice-panel > *, #screen-mic .voice-choice > *{ position:absolute; margin:0; }
#screen-mic .voice-choice{ position:absolute; inset:0; width:auto; max-width:none; margin:0; padding:0; background:none; border:0; border-radius:0; }

/* section heading plates */
#screen-mic .mic-sec{
  display:flex; align-items:center; justify-content:center;
  border-style:solid; border-width:calc(4 * var(--u)) calc(14 * var(--u));
  border-image:url('../assets/ui/header-ribbon-v3.webp') 24 96 fill / calc(4 * var(--u)) calc(14 * var(--u));
  font-family:'Oswald', sans-serif; font-weight:700; font-size:calc(15 * var(--u)); line-height:1;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
  text-shadow:0 1px 0 #000;
}
#screen-mic .mic-panel > .mic-sec{ left:calc(82 * var(--u)); top:calc(8 * var(--u)); width:calc(160 * var(--u)); height:calc(28 * var(--u)); }
#screen-mic .voice-panel > .mic-sec{ left:calc(132 * var(--u)); top:calc(8 * var(--u)); width:calc(220 * var(--u)); height:calc(28 * var(--u)); }

/* ---------- mic icon ring ---------- */
#screen-mic .mic-icon-wrap{ left:calc(130 * var(--u)); top:calc(44 * var(--u)); width:calc(64 * var(--u)); height:calc(64 * var(--u)); }
#screen-mic .mic-ring{
  --rc:var(--blue);
  position:absolute; inset:9%; border-radius:50%;
  border:calc(3 * var(--u)) solid var(--rc);
  background:radial-gradient(circle at 50% 40%, #1c2a45, #080d1a 72%);
  box-shadow:0 0 calc(14 * var(--u)) color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 calc(10 * var(--u)) color-mix(in srgb, var(--rc) 35%, transparent);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
/* sound-wave arcs either side (decor; hidden when blocked) */
#screen-mic .mic-ring::before, #screen-mic .mic-ring::after{
  content:''; position:absolute; top:12%; bottom:12%; width:22%; border:calc(3 * var(--u)) solid var(--rc); border-radius:50%;
  opacity:.9; transition:opacity .18s ease;
}
#screen-mic .mic-ring::before{ left:-30%; border-right-color:transparent; border-top-color:transparent; border-bottom-color:transparent; }
#screen-mic .mic-ring::after{ right:-30%; border-left-color:transparent; border-top-color:transparent; border-bottom-color:transparent; }
#screen-mic .mic-glyph{ position:relative; z-index:1; width:52%; height:52%; stroke-width:1.8; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
/* live level: only painted once a real stream exists (js sets --mic-lvl from the analyser) */
#screen-mic .mic-level{ position:absolute; inset:0; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, rgba(0,255,135,.55) 0%, rgba(0,255,135,.15) 55%, transparent 72%);
  transform:scale(calc(.55 + var(--mic-lvl, 0) * .6)); }
#screen-mic[data-mic="granted"] .mic-level{ opacity:1; }
#screen-mic[data-mic="granted"] .mic-ring, #screen-mic[data-mic="ready"] .mic-ring{ --rc:var(--green); }
#screen-mic[data-mic="pending"] .mic-ring{ --rc:var(--amber); }
#screen-mic[data-mic="pending"] .mic-ring::before, #screen-mic[data-mic="pending"] .mic-ring::after{ opacity:.35; }
#screen-mic[data-mic="denied"] .mic-ring, #screen-mic[data-mic="insecure"] .mic-ring{ --rc:var(--red); }
#screen-mic[data-mic="nodevice"] .mic-ring, #screen-mic[data-mic="busy"] .mic-ring,
#screen-mic[data-mic="unsupported"] .mic-ring, #screen-mic[data-mic="error"] .mic-ring{ --rc:var(--amber); }
#screen-mic:is([data-mic="denied"],[data-mic="nodevice"],[data-mic="busy"],[data-mic="unsupported"],[data-mic="insecure"],[data-mic="error"]) .mic-ring::before,
#screen-mic:is([data-mic="denied"],[data-mic="nodevice"],[data-mic="busy"],[data-mic="unsupported"],[data-mic="insecure"],[data-mic="error"]) .mic-ring::after{ opacity:0; }
/* slash across the glyph when the mic can't be used */
#screen-mic:is([data-mic="denied"],[data-mic="nodevice"],[data-mic="busy"],[data-mic="insecure"]) .mic-icon-wrap::after{
  content:''; position:absolute; left:50%; top:50%; width:58%; height:calc(4 * var(--u)); border-radius:4px; z-index:2;
  background:var(--red); box-shadow:0 0 0 calc(2 * var(--u)) #080d1a; transform:translate(-50%,-50%) rotate(-45deg);
}
#screen-mic[data-mic="nodevice"] .mic-icon-wrap::after, #screen-mic[data-mic="busy"] .mic-icon-wrap::after{ background:var(--amber); }

/* ---------- lead + CTA slot ---------- */
#screen-mic .mic-lead{ left:calc(16 * var(--u)); top:calc(112 * var(--u)); width:calc(292 * var(--u)); height:calc(36 * var(--u));
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Oswald', sans-serif; font-weight:500; font-size:calc(14 * var(--u)); line-height:1.15; color:var(--ink);
  text-shadow:0 1px 2px rgba(0,0,0,.7); }
#screen-mic .mic-cta-slot{ left:calc(16 * var(--u)); top:calc(156 * var(--u)); width:calc(292 * var(--u)); height:max(44px, calc(48 * var(--u))); }
#screen-mic .mic-cta{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0 calc(10 * var(--u)) !important;
  display:flex; align-items:center; justify-content:center; gap:.35em; cursor:pointer; text-decoration:none;
  border-width:calc(8 * var(--u)) calc(14 * var(--u)) !important; border-image-width:calc(8 * var(--u)) calc(14 * var(--u)) !important;
  font-family:'Bangers', 'Luckiest Guy', sans-serif !important; font-style:italic; font-weight:400; letter-spacing:.05em;
  font-size:calc(22 * var(--u)) !important; line-height:1; text-transform:uppercase; white-space:nowrap;
  color:#06140c !important; -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease, filter .14s ease;
}
#screen-mic .mic-cta .ico{ width:.9em; height:.9em; stroke-width:2.6; }
#screen-mic .mic-cta:hover:not(:disabled){ filter:brightness(1.07); }
#screen-mic .mic-cta:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
/* pending / granted: same size, low-chroma, readable label, no duplicate request */
#screen-mic .mic-cta:disabled{ cursor:default; filter:saturate(.3) brightness(.85); transform:none !important;
  border-image-source:url('../assets/ui/btn-green-v3.webp') !important; }
#screen-mic .mic-err-src{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------- permission status line ---------- */
#screen-mic .mic-status{
  --sc:var(--ink2);
  left:calc(16 * var(--u)); top:calc(212 * var(--u)); width:calc(292 * var(--u)); height:calc(40 * var(--u));
  display:flex; align-items:center; gap:calc(8 * var(--u)); padding:0 calc(4 * var(--u)) 0 calc(8 * var(--u));
  border-radius:calc(8 * var(--u)); background:rgba(8,13,26,.55); box-shadow:inset 0 0 0 1px rgba(52,73,99,.8);
}
#screen-mic .ms-ico{ flex:0 0 auto; width:calc(22 * var(--u)); height:calc(22 * var(--u)); color:var(--sc); display:flex; align-items:center; justify-content:center; }
#screen-mic .ms-ico .ico{ width:100%; height:100%; stroke-width:2.2; }
#screen-mic .ms-bang{ width:100%; height:100%; border-radius:50%; border:calc(2 * var(--u)) solid currentColor; display:flex; align-items:center; justify-content:center;
  font-family:'Oswald', sans-serif; font-weight:700; font-size:calc(13 * var(--u)); line-height:1; }
#screen-mic .ms-spin{ width:86%; height:86%; border-radius:50%; border:calc(2.5 * var(--u)) solid rgba(255,179,0,.25); border-top-color:var(--amber); animation:mic-spin .9s linear infinite; }
@keyframes mic-spin{ to{ transform:rotate(360deg); } }
#screen-mic .ms-text{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; line-height:1.15; }
#screen-mic .ms-text b{ font-family:'Oswald', sans-serif; font-weight:600; font-size:calc(13 * var(--u)); color:var(--sc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-mic .ms-text small{ display:none; font-family:'Oswald', sans-serif; font-weight:400; font-size:calc(12 * var(--u)); color:var(--ink2); }
#screen-mic .ms-help{
  position:relative; flex:0 0 auto; height:calc(30 * var(--u)); padding:0 calc(10 * var(--u)); border-radius:calc(6 * var(--u)); cursor:pointer;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:calc(12 * var(--u)); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink); background:linear-gradient(180deg, var(--raised), var(--panel)); border:1px solid var(--edge);
}
#screen-mic .ms-help::after{ content:''; position:absolute; left:-4px; right:-4px; top:50%; height:max(44px, calc(44 * var(--u))); transform:translateY(-50%); } /* 44px hit area */
#screen-mic .ms-help[hidden]{ display:none; }
#screen-mic .ms-help:focus-visible, #screen-mic .mh-close:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
#screen-mic[data-mic="needed"] .mic-status{ --sc:var(--ink2); }
#screen-mic[data-mic="ready"] .mic-status, #screen-mic[data-mic="granted"] .mic-status{ --sc:var(--green); }
#screen-mic[data-mic="pending"] .mic-status{ --sc:var(--amber); }
#screen-mic[data-mic="denied"] .mic-status, #screen-mic[data-mic="insecure"] .mic-status{ --sc:#FF6B6B; box-shadow:inset 0 0 0 1px rgba(255,45,45,.55); }
#screen-mic:is([data-mic="nodevice"],[data-mic="busy"],[data-mic="unsupported"],[data-mic="error"]) .mic-status{ --sc:var(--amber); box-shadow:inset 0 0 0 1px rgba(255,179,0,.5); }

/* ---------- help sheet (expands inside the mic panel, never over the CTA row edge) ---------- */
#screen-mic .mic-help{
  left:calc(10 * var(--u)); top:calc(10 * var(--u)); right:calc(10 * var(--u)); bottom:calc(10 * var(--u)); z-index:5;
  display:flex; flex-direction:column; border-radius:calc(8 * var(--u));
  background:linear-gradient(180deg, #1c2a45 0%, #121c32 100%); box-shadow:inset 0 0 0 1px var(--edge), 0 10px 24px rgba(0,0,0,.6);
  animation:mic-sheet .22s ease both;
}
#screen-mic .mic-help[hidden]{ display:none; }
@keyframes mic-sheet{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
#screen-mic .mh-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); border-bottom:1px solid rgba(52,73,99,.7); }
#screen-mic .mh-head h3{ margin:0; font-family:'Oswald', sans-serif; font-weight:700; font-size:calc(15 * var(--u)); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
#screen-mic .mh-close{ flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:8px;
  background:linear-gradient(180deg, var(--raised), var(--panel)); border:1px solid var(--edge); color:var(--ink); }
#screen-mic .mh-close .ico{ width:20px; height:20px; stroke-width:2.4; }
#screen-mic .mh-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:calc(8 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));
  font-family:'Oswald', sans-serif; font-weight:400; font-size:max(13px, calc(13 * var(--u))); line-height:1.35; color:var(--ink2); }
#screen-mic .mh-body ol{ margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:.35em; }
#screen-mic .mh-body b{ color:var(--ink); font-weight:600; }
#screen-mic .mh-msg{ margin:0 0 .5em; color:var(--amber); }

/* ---------- voice sharing row ---------- */
#screen-mic .voice-share-row{
  left:calc(16 * var(--u)); top:calc(44 * var(--u)); width:calc(452 * var(--u)); height:calc(64 * var(--u));
  display:flex; align-items:center; gap:calc(10 * var(--u)); padding:0 calc(8 * var(--u)) 0 calc(14 * var(--u));
  border-radius:calc(8 * var(--u)); background:rgba(8,13,26,.55); box-shadow:inset 0 0 0 1px rgba(52,73,99,.8);
}
#screen-mic .vs-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(2 * var(--u)); line-height:1.15; }
#screen-mic .vs-text b{ font-family:'Oswald', sans-serif; font-weight:600; font-size:calc(16 * var(--u)); color:var(--ink); }
#screen-mic .vs-text small{ font-family:'Oswald', sans-serif; font-weight:400; font-size:calc(12 * var(--u)); color:var(--ink2); }
#screen-mic .vs-switch{ flex:0 0 auto; display:flex; padding:calc(3 * var(--u)); gap:calc(3 * var(--u)); border-radius:999px;
  background:#070b16; box-shadow:inset 0 0 0 1px var(--edge), inset 0 2px 6px rgba(0,0,0,.6); }
#screen-mic .voice-opt{
  all:unset; box-sizing:border-box; cursor:pointer; min-width:calc(62 * var(--u)); height:max(44px, calc(44 * var(--u))); padding:0 calc(10 * var(--u));
  display:flex; align-items:center; justify-content:center; gap:.3em; border-radius:999px;
  font-family:'Oswald', sans-serif; font-weight:700; font-size:calc(14 * var(--u)); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
#screen-mic .voice-opt .ico{ width:1.1em; height:1.1em; stroke-width:2.2; }
#screen-mic #voice-opt-off.active{ background:linear-gradient(180deg, #3a4d6c, #25344f); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #0a1020; }
#screen-mic #voice-opt-on.active{ background:linear-gradient(180deg, #4dffb0, #00c86a); color:#06140c; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px #0a1020; }
#screen-mic .voice-opt:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ---------- disguise picker (always shown here; dimmed while sharing is off) ---------- */
#screen-mic #voice-fx-picker{ display:block !important; left:calc(16 * var(--u)); top:calc(112 * var(--u)); width:calc(452 * var(--u)); height:calc(144 * var(--u));
  margin:0; padding:0; background:none; border:none; }
#screen-mic #voice-fx-picker > *{ position:absolute; margin:0; }
#screen-mic #voice-fx-picker .mic-sec-sm{ left:calc(126 * var(--u)); top:calc(4 * var(--u)); width:calc(200 * var(--u)); height:calc(28 * var(--u)); font-size:calc(13 * var(--u)); }
#screen-mic .voice-fx-btns{ left:0; top:calc(48 * var(--u)); width:100%; height:calc(64 * var(--u));
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:calc(8 * var(--u)); flex-wrap:nowrap; }
#screen-mic .voice-fx-opt{
  all:unset; box-sizing:border-box; position:relative; cursor:pointer; min-width:0; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(4 * var(--u));
  border-radius:calc(8 * var(--u)); background:linear-gradient(180deg, var(--raised), var(--panel));
  box-shadow:inset 0 0 0 calc(2 * var(--u)) var(--edge), 0 calc(3 * var(--u)) 0 #050914;
  color:var(--ink); transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
#screen-mic .voice-fx-opt .ico{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); stroke-width:2; }
#screen-mic .voice-fx-opt span{ font-family:'Oswald', sans-serif; font-weight:700; font-size:calc(12 * var(--u)); letter-spacing:.06em; text-transform:uppercase; line-height:1; white-space:nowrap; }
#screen-mic .voice-fx-opt:hover{ filter:brightness(1.12); }
#screen-mic .voice-fx-opt:active{ transform:translateY(2px); }
#screen-mic .voice-fx-opt:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
#screen-mic .voice-fx-opt.active{ box-shadow:inset 0 0 0 calc(3 * var(--u)) var(--yellow), 0 0 calc(12 * var(--u)) rgba(255,230,0,.35), 0 calc(3 * var(--u)) 0 #050914; color:var(--yellow); }
/* selected = check badge too (not colour alone) */
#screen-mic .voice-fx-opt.active::after{
  content:''; position:absolute; top:calc(5 * var(--u)); right:calc(5 * var(--u)); width:calc(14 * var(--u)); height:calc(14 * var(--u)); border-radius:50%;
  background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1300' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
  box-shadow:0 0 0 calc(1.5 * var(--u)) #0a1020;
}
#screen-mic[data-share="off"] .voice-fx-opt:not(.active){ filter:saturate(.6) brightness(.82); }
#screen-mic .voice-fx-note{ left:0; top:calc(116 * var(--u)); width:100%; text-align:center;
  font-family:'Oswald', sans-serif; font-weight:400; font-size:calc(12 * var(--u)); line-height:1.2; color:var(--ink2); }

#screen-mic .voice-fx-sub{ display:none; }

/* ---------- back ---------- */
#screen-mic .mic-back{
  left:calc(12 * var(--u)); top:calc(338 * var(--u)); width:calc(208 * var(--u)); height:max(44px, calc(44 * var(--u)));
  display:flex; align-items:center; justify-content:center; gap:.45em; padding:0 !important; cursor:pointer;
  border-width:calc(8 * var(--u)) calc(14 * var(--u)) !important; border-image-width:calc(8 * var(--u)) calc(14 * var(--u)) !important;
  font-family:'Oswald', sans-serif; font-weight:700; font-size:calc(14 * var(--u)); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
#screen-mic .mic-back .ico{ width:1.1em; height:1.1em; stroke-width:2.6; transform:rotate(180deg); }
#screen-mic .mic-back:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
#screen-mic .mic-back:active{ transform:translateY(2px); }

/* ============================================================
   DESKTOP boxes (ref 1920x1080)
   ============================================================ */
@media (min-width:768px) and (min-height:521px){
  #screen-mic .mic-title{ left:calc(440 * var(--u)); top:calc(32 * var(--u)); width:calc(1040 * var(--u)); height:calc(104 * var(--u));
    border-width:calc(14 * var(--u)) calc(44 * var(--u)); border-image-width:calc(14 * var(--u)) calc(44 * var(--u)); font-size:calc(56 * var(--u)); }
  #screen-mic .mic-panel::before, #screen-mic .voice-panel::before{ border-width:calc(22 * var(--u)); border-image-width:calc(22 * var(--u)); }
  #screen-mic .mic-panel{ left:calc(200 * var(--u)); top:calc(176 * var(--u)); width:calc(720 * var(--u)); height:calc(720 * var(--u)); }
  #screen-mic .voice-panel{ left:calc(944 * var(--u)); top:calc(176 * var(--u)); width:calc(776 * var(--u)); height:calc(720 * var(--u)); }
  #screen-mic .mic-sec{ border-width:calc(8 * var(--u)) calc(28 * var(--u)); border-image-width:calc(8 * var(--u)) calc(28 * var(--u)); font-size:calc(28 * var(--u)); }
  #screen-mic .mic-panel > .mic-sec{ left:calc(160 * var(--u)); top:calc(28 * var(--u)); width:calc(400 * var(--u)); height:calc(64 * var(--u)); }
  #screen-mic .voice-panel > .mic-sec{ left:calc(188 * var(--u)); top:calc(28 * var(--u)); width:calc(400 * var(--u)); height:calc(64 * var(--u)); }

  #screen-mic .mic-icon-wrap{ left:calc(240 * var(--u)); top:calc(120 * var(--u)); width:calc(240 * var(--u)); height:calc(240 * var(--u)); }
  #screen-mic .mic-ring{ border-width:calc(7 * var(--u)); }
  #screen-mic .mic-ring::before, #screen-mic .mic-ring::after{ border-width:calc(7 * var(--u)); }
  #screen-mic .mic-icon-wrap::after{ height:calc(12 * var(--u)) !important; }

  #screen-mic .mic-lead{ left:calc(48 * var(--u)); top:calc(378 * var(--u)); width:calc(624 * var(--u)); height:calc(64 * var(--u)); font-size:calc(30 * var(--u)); }
  #screen-mic .mic-cta-slot{ left:calc(48 * var(--u)); top:calc(464 * var(--u)); width:calc(624 * var(--u)); height:calc(80 * var(--u)); }
  #screen-mic .mic-cta{ border-width:calc(14 * var(--u)) calc(26 * var(--u)) !important; border-image-width:calc(14 * var(--u)) calc(26 * var(--u)) !important; font-size:calc(48 * var(--u)) !important; }
  #screen-mic .mic-status{ left:calc(48 * var(--u)); top:calc(568 * var(--u)); width:calc(624 * var(--u)); height:calc(96 * var(--u));
    gap:calc(16 * var(--u)); padding:0 calc(16 * var(--u)) 0 calc(20 * var(--u)); border-radius:calc(12 * var(--u)); }
  #screen-mic .ms-ico{ width:calc(44 * var(--u)); height:calc(44 * var(--u)); }
  #screen-mic .ms-bang{ font-size:calc(26 * var(--u)); border-width:calc(3 * var(--u)); }
  #screen-mic .ms-spin{ border-width:calc(4 * var(--u)); }
  #screen-mic .ms-text{ gap:calc(4 * var(--u)); }
  #screen-mic .ms-text b{ font-size:calc(26 * var(--u)); }
  #screen-mic .ms-text small{ display:block; font-size:calc(18 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #screen-mic .ms-help{ height:calc(56 * var(--u)); min-height:44px; padding:0 calc(18 * var(--u)); font-size:calc(18 * var(--u)); border-radius:calc(10 * var(--u)); }

  #screen-mic .mic-help{ left:calc(24 * var(--u)); top:calc(24 * var(--u)); right:calc(24 * var(--u)); bottom:calc(24 * var(--u)); border-radius:calc(12 * var(--u)); }
  #screen-mic .mh-head{ padding:calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(28 * var(--u)); }
  #screen-mic .mh-head h3{ font-size:calc(30 * var(--u)); }
  #screen-mic .mh-close{ width:max(44px, calc(56 * var(--u))); height:max(44px, calc(56 * var(--u))); border-radius:calc(10 * var(--u)); }
  #screen-mic .mh-close .ico{ width:calc(26 * var(--u)); height:calc(26 * var(--u)); }
  #screen-mic .mh-body{ padding:calc(24 * var(--u)) calc(32 * var(--u)); font-size:max(14px, calc(24 * var(--u))); }

  #screen-mic .voice-share-row{ left:calc(32 * var(--u)); top:calc(104 * var(--u)); width:calc(712 * var(--u)); height:calc(120 * var(--u));
    gap:calc(20 * var(--u)); padding:0 calc(20 * var(--u)) 0 calc(28 * var(--u)); border-radius:calc(12 * var(--u)); }
  #screen-mic .vs-text{ gap:calc(8 * var(--u)); }
  #screen-mic .vs-text b{ font-size:calc(30 * var(--u)); }
  #screen-mic .vs-text small{ font-size:calc(19 * var(--u)); }
  #screen-mic .vs-switch{ padding:calc(5 * var(--u)); gap:calc(5 * var(--u)); }
  #screen-mic .voice-opt{ min-width:calc(104 * var(--u)); height:max(44px, calc(60 * var(--u))); padding:0 calc(16 * var(--u)); font-size:calc(22 * var(--u)); }

  #screen-mic #voice-fx-picker{ left:calc(32 * var(--u)); top:calc(248 * var(--u)); width:calc(712 * var(--u)); height:calc(416 * var(--u)); }
  #screen-mic #voice-fx-picker::before{ content:''; position:absolute; inset:0; border-radius:calc(12 * var(--u));
    background:rgba(8,13,26,.4); box-shadow:inset 0 0 0 1px rgba(52,73,99,.8); pointer-events:none; }
  #screen-mic #voice-fx-picker .mic-sec-sm{ left:calc(176 * var(--u)); top:calc(20 * var(--u)); width:calc(360 * var(--u)); height:calc(56 * var(--u)); font-size:calc(26 * var(--u)); }
  #screen-mic .voice-fx-btns{ left:0; top:calc(264 * var(--u) - 176 * var(--u)); height:calc(152 * var(--u)); gap:calc(8 * var(--u)); }
  #screen-mic .voice-fx-opt{ gap:calc(14 * var(--u)); border-radius:calc(12 * var(--u)); }
  #screen-mic .voice-fx-opt .ico{ width:calc(56 * var(--u)); height:calc(56 * var(--u)); }
  #screen-mic .voice-fx-opt span{ font-size:calc(26 * var(--u)); }
  #screen-mic .voice-fx-opt.active::after{ top:calc(10 * var(--u)); right:calc(10 * var(--u)); width:calc(28 * var(--u)); height:calc(28 * var(--u)); }
  #screen-mic .voice-fx-note{ top:calc(268 * var(--u)); padding:0 calc(32 * var(--u)); font-size:calc(21 * var(--u)); line-height:1.35; }
  #screen-mic .voice-fx-sub{ display:block; left:0; top:calc(316 * var(--u)); width:100%; padding:0 calc(40 * var(--u)); text-align:center;
    font-family:'Oswald', sans-serif; font-weight:400; font-size:calc(18 * var(--u)); line-height:1.35; color:var(--muted); }

  #screen-mic .mic-back{ left:calc(752 * var(--u)); top:calc(944 * var(--u)); width:calc(416 * var(--u)); height:max(44px, calc(72 * var(--u)));
    border-width:calc(12 * var(--u)) calc(22 * var(--u)) !important; border-image-width:calc(12 * var(--u)) calc(22 * var(--u)) !important; font-size:calc(26 * var(--u)); }
}

/* ============================================================
   chrome while this screen is up: the explicit Back to Lobby replaces the floating
   global back (no duplicate exits); sound toggle parks in a free corner
   ============================================================ */
body.mic-on #global-back-btn{ display:none !important; }
body.mic-on #sfx-toggle{
  top:auto !important; left:auto !important; right:max(12px, env(safe-area-inset-right)) !important; bottom:max(8px, env(safe-area-inset-bottom)) !important;
  width:44px !important; height:44px !important; border-radius:0 !important; backdrop-filter:none; box-shadow:none; opacity:1;
  border-style:solid !important; border-width:8px 10px !important; border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / 8px 10px !important; background:none !important;
}
@media (min-width:768px) and (min-height:521px){
  body.mic-on #sfx-toggle{ right:max(24px, env(safe-area-inset-right)) !important; bottom:max(24px, env(safe-area-inset-bottom)) !important; width:56px !important; height:56px !important;
    border-width:10px 12px !important; border-image-width:10px 12px !important; }
}

@media (prefers-reduced-motion: reduce){
  #screen-mic .ms-spin{ animation:none; border-color:var(--amber); }
  #screen-mic .mic-help{ animation:none; }
  #screen-mic .mic-level{ transform:none; }
  #screen-mic .mic-cta, #screen-mic .voice-fx-opt, #screen-mic .voice-opt{ transition:none; }
}

/* ---------- Codex review 2026-09-23 (Match Found / Mic Setup) ---------- */
/* desktop: balanced horizontal inset for the four disguise cards (Echo ran flush to the inner right edge) */
@media (min-width:768px) and (min-height:521px){
  #screen-mic .voice-fx-btns{ left:calc(24 * var(--u)); width:calc(100% - 48 * var(--u)); }
}
/* phone: status box fully inset from the bottom frame, and keep the "bark detection is not affected" note */
@media (max-height:520px) and (orientation:landscape){
  #screen-mic .mic-status{ top:calc(206 * var(--u)); height:calc(40 * var(--u)); }
  #screen-mic .voice-fx-sub{ display:block; left:0; top:calc(130 * var(--u)); width:100%; padding:0 calc(12 * var(--u)); text-align:center; font-family:'Oswald',sans-serif; font-size:calc(9 * var(--u)); line-height:1.2; color:var(--ink3, #899AB3); position:absolute; margin:0; }
}