:root{
  --bg:#FFF3D6; --ink:#2E2440; --card:#FFFFFF;
  --yellow:#FFC93C; --orange:#FF5A3C; --blue:#4FB8FF;
  --green:#58C97B; --purple:#9B7BFF; --red:#F04444;
  --shadow:0 6px 0 var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:radial-gradient(#FFE49A 12%, transparent 13%);
  background-size:34px 34px;
  color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif;font-weight:600;
  display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;
  padding:max(env(safe-area-inset-top),10px) 16px calc(env(safe-area-inset-bottom) + 12px);
  overscroll-behavior:none;user-select:none;-webkit-user-select:none;
}
h2,h3,.logo,.mode-title,.ctl,.room-code{font-family:'Fredoka',sans-serif}
.hide{display:none!important}

/* header */
header{display:flex;justify-content:space-between;align-items:center;padding:6px 2px 10px}
.logo{font-weight:700;font-size:1.5rem;letter-spacing:.02em;
  text-shadow:2px 2px 0 var(--yellow)}
.logo span{color:var(--orange)}
.lamp-wrap{display:flex;align-items:center;gap:8px;background:var(--card);
  border:3px solid var(--ink);border-radius:999px;padding:7px 14px;box-shadow:var(--shadow)}
.lamp{width:16px;height:16px;border-radius:50%;background:#C9C3D6;border:3px solid var(--ink);transition:.3s}
.lamp.on{background:#4CE07C;box-shadow:0 0 12px 3px rgba(76,224,124,.85)}
.lamp.busy{background:var(--yellow);box-shadow:0 0 12px 3px rgba(255,201,60,.8);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.4}}
.lamp-txt{font-size:.72rem;font-weight:800;letter-spacing:.06em}

/* stage */
main{flex:1;display:flex;flex-direction:column;min-height:0}
.mode-title{text-align:center;font-size:1.55rem;font-weight:700;letter-spacing:.06em;
  margin:4px 0 2px;transition:color .2s}
.device-area{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;touch-action:pan-y}
.device{height:100%;max-height:46vh;width:auto;filter:drop-shadow(0 8px 0 rgba(46,36,64,.15));
  animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.device .led{fill:#C9C3D6;transition:.3s}
body.live .device .led{fill:#4CE07C;filter:drop-shadow(0 0 7px #4CE07C)}
body.connected .device .led{fill:#4CE07C;filter:drop-shadow(0 0 7px #4CE07C)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);
  background:var(--card);box-shadow:0 4px 0 var(--ink);
  font-size:1.7rem;font-weight:700;color:var(--ink);cursor:pointer;line-height:1}
.arrow:active{transform:translateY(-46%)}
.arrow.left{left:0}.arrow.right{right:0}
.dots{display:flex;justify-content:center;gap:9px;padding:8px 0 4px}
.dot{width:12px;height:12px;border-radius:50%;background:transparent;border:3px solid var(--ink);transition:.2s;cursor:pointer}
.dot.on{background:var(--ink);transform:scale(1.2)}

#ttsBox{padding:6px 4px}
#ttsText{width:100%;border:3px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);
  padding:12px 14px;font:inherit;font-size:1rem;resize:none;background:var(--card);color:var(--ink)}
#ttsText:focus{outline:3px solid var(--green)}

/* ===== THE 3 BUTTONS ===== */
#controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 4px}
.ctl{border:4px solid var(--ink);color:var(--ink);cursor:pointer;font-weight:700}
.ctl:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)!important}
.gear{width:66px;height:66px;border-radius:22px;background:var(--card);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center}
.power{width:66px;height:66px;border-radius:50%;box-shadow:var(--shadow);
  font-size:1.7rem;display:flex;align-items:center;justify-content:center;transition:background .2s}
.power.off{background:#DED8E8}
.power.on{background:var(--red);color:#fff}
.talk-slot{flex:1;display:flex;justify-content:center}
.talk{width:100%;max-width:230px;height:86px;border-radius:26px;
  background:var(--orange);color:#fff;box-shadow:0 7px 0 var(--ink);
  font-size:1.15rem;line-height:1.15;letter-spacing:.04em;
  text-shadow:1px 2px 0 rgba(46,36,64,.4);touch-action:none}
.talk.holding{background:#D93A1F;transform:translateY(5px);box-shadow:0 2px 0 var(--ink);
  animation:wob .5s infinite}
@keyframes wob{50%{transform:translateY(5px) rotate(1.2deg)}}
.talk.speak{background:var(--green)}
.talk:disabled{background:#DED8E8;color:#9B93AE;text-shadow:none;cursor:default}
/* cartoon switch */
.switch{position:relative;width:100%;max-width:210px;height:78px;border-radius:999px;
  background:#DED8E8;box-shadow:var(--shadow);transition:background .25s;overflow:hidden}
.switch .knob{position:absolute;top:6px;left:6px;width:58px;height:58px;border-radius:50%;
  background:var(--card);border:4px solid var(--ink);transition:left .25s cubic-bezier(.34,1.56,.64,1)}
.switch.on{background:var(--blue)}
.switch.on .knob{left:calc(100% - 64px)}
.sw-txt{position:absolute;top:50%;transform:translateY(-50%);font-family:'Fredoka';font-size:1.05rem;font-weight:700}
.sw-txt.off{right:22px;color:#8D85A3}
.sw-txt.on{left:24px;color:#fff;opacity:0;transition:.25s}
.switch.on .sw-txt.on{opacity:1}
.switch.on .sw-txt.off{opacity:0}

/* ===== settings sheet ===== */
#sheetWrap{position:fixed;inset:0;z-index:50}
.sheet-bg{position:absolute;inset:0;background:rgba(46,36,64,.45)}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;
  background:var(--bg);border:4px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;
  padding:10px 18px calc(env(safe-area-inset-bottom) + 18px);
  max-width:520px;margin:0 auto;animation:up .3s cubic-bezier(.34,1.3,.64,1)}
@keyframes up{from{transform:translateY(60%)}}
.sheet-handle{width:52px;height:6px;border-radius:3px;background:var(--ink);opacity:.3;margin:6px auto 10px}
.sheet h2{font-size:1.3rem;margin-bottom:2px}
.sheet section{background:var(--card);border:3px solid var(--ink);border-radius:18px;
  box-shadow:var(--shadow);padding:14px;margin-top:14px}
.sheet h3{font-size:1.02rem;margin-bottom:10px}
.hint{font-size:.78rem;color:#6E6684;line-height:1.45;margin:4px 0}
.kv{display:flex;justify-content:space-between;font-size:.82rem;padding:7px 2px;border-top:2px dashed #E3DCEF}
.kv b{max-width:60%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* EQ */
.eq{display:flex;justify-content:space-between;gap:6px;height:150px;padding:4px 2px}
.eq .band{display:flex;flex-direction:column;align-items:center;flex:1;gap:6px}
.eq input[type=range]{writing-mode:vertical-lr;direction:rtl;width:30px;flex:1;
  -webkit-appearance:slider-vertical;appearance:slider-vertical;accent-color:var(--orange)}
.eq .f{font-size:.68rem;font-weight:800;color:#6E6684}
.eq .g{font-size:.66rem;font-weight:800;background:var(--yellow);border:2px solid var(--ink);
  border-radius:8px;padding:1px 6px;min-width:38px;text-align:center}

/* quality */
#qCanvas{width:100%;height:auto;border:3px solid var(--ink);border-radius:14px;background:#FFFBEF}
.q-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.q-bar{flex:1;height:18px;border:3px solid var(--ink);border-radius:999px;overflow:hidden;background:#F1EDF8}
#qFill{height:100%;width:0%;background:var(--green);transition:width .12s,background .2s}
.q-label{font-family:'Fredoka';font-weight:700;font-size:.85rem;min-width:76px;text-align:right}

/* inputs / buttons */
input[type=range]{accent-color:var(--orange)}
.slider-row{display:flex;align-items:center;gap:10px;font-size:.84rem;margin:8px 0}
.slider-row input{flex:1}
.slider-row b{min-width:44px;text-align:right}
.mini-btn{border:3px solid var(--ink);border-radius:14px;background:var(--card);
  box-shadow:0 4px 0 var(--ink);padding:11px 16px;font:inherit;font-weight:800;
  color:var(--ink);cursor:pointer;margin-top:8px;width:100%}
.mini-btn.solid{background:var(--yellow)}
.mini-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-pair{display:flex;gap:10px}
select,input[type=text]{width:100%;border:3px solid var(--ink);border-radius:14px;
  padding:12px;font:inherit;font-size:.9rem;background:var(--card);color:var(--ink);margin-top:8px}
.room-code{text-align:center;font-size:2.6rem;font-weight:700;letter-spacing:.3em;
  background:var(--yellow);border:3px solid var(--ink);border-radius:16px;
  box-shadow:var(--shadow);padding:10px;margin:12px 0 6px}
#satCount{font-weight:800;color:var(--ink)}
.close-sheet{width:100%;margin-top:16px;border:4px solid var(--ink);border-radius:18px;
  background:var(--ink);color:#fff;font:inherit;font-family:'Fredoka';font-weight:700;
  font-size:1.05rem;padding:15px;cursor:pointer;box-shadow:0 5px 0 #17102b}

/* satellite bar */
#satBar{position:fixed;top:0;left:0;right:0;z-index:40;max-width:520px;margin:0 auto;
  background:var(--purple);color:#fff;border:3px solid var(--ink);border-radius:0 0 16px 16px;
  padding:10px 14px;font-size:.8rem;font-weight:800;display:flex;align-items:center;gap:8px}
#satBar button{margin-left:auto;border:2px solid var(--ink);border-radius:10px;background:#fff;
  color:var(--ink);font:inherit;font-weight:800;padding:5px 10px}

/* toasts */
#toasts{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 116px);left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none}
.toast{pointer-events:auto;max-width:88%;background:var(--card);border:3px solid var(--ink);
  border-radius:16px;box-shadow:var(--shadow);padding:11px 16px;font-size:.84rem;font-weight:800;
  animation:tin .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:8px}
.toast.ok{background:#DFFBE7}
.toast.err{background:#FFE1DC}
.toast button{border:2px solid var(--ink);border-radius:10px;background:var(--yellow);
  font:inherit;font-weight:800;padding:4px 10px;cursor:pointer}
@keyframes tin{from{transform:translateY(20px) scale(.9);opacity:0}}

/* blocker */
#blocker{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
#blocker .card{background:var(--card);border:4px solid var(--ink);border-radius:24px;
  box-shadow:var(--shadow);padding:28px;text-align:center;max-width:340px}
.big-emoji{font-size:3rem;margin-bottom:10px}
#blocker h2{margin-bottom:8px}
#blocker p{font-size:.88rem;line-height:1.5;color:#5B5372}

/* desktop */
@media (min-width:700px){
  body{max-width:520px;border-left:4px solid var(--ink);border-right:4px solid var(--ink)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}