:root{--bg:#f7f2e8;--ink:#15161c;--yellow:#ffc531;--red:#ee4b2b;--blue:#2747d9;--mint:#3cc48c;--muted:#4d4f5c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.45 Archivo,system-ui,sans-serif}
button{font-family:inherit;color:inherit}
.screen{min-height:100vh;padding:20px 16px}
[hidden]{display:none !important}
#s-code,#s-pin,#s-who{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.brand{height:56px}
h1{font-stretch:125%;font-weight:900;font-size:clamp(28px,5vw,44px);margin:0}
h2{font-stretch:125%;font-weight:850;font-size:22px;margin:22px 0 10px}
input,select,textarea{font:600 18px Archivo,sans-serif;border:2px solid var(--ink);padding:10px 12px;background:#fff;color:var(--ink)}
#code,#pin{width:220px;text-align:center;font-size:28px;letter-spacing:.3em}
.big{font:800 20px Archivo,sans-serif;border:3px solid var(--ink);background:var(--yellow);padding:12px 26px;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}
.err{color:var(--red);font-weight:700;min-height:1.2em}
.muted{color:var(--muted)}
/* who */
.who-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;width:min(900px,100%)}
.who-btn{display:flex;flex-direction:column;align-items:center;gap:6px;border:3px solid var(--ink);background:#fff;padding:18px 10px;font:800 22px Archivo,sans-serif;cursor:pointer;box-shadow:5px 5px 0 var(--ink)}
.who-av{font-size:64px;line-height:1}
/* make */
.make{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.make-top{display:flex;align-items:center;gap:10px}
.me{width:56px;height:56px;font-size:34px;border:3px solid var(--ink);background:var(--yellow);cursor:pointer;flex:none}
.tabs{display:flex;gap:8px;overflow-x:auto;flex:1}
.tabs button{white-space:nowrap;font:700 16px Archivo,sans-serif;border:2px solid var(--ink);background:#fff;padding:9px 14px;cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--ink);color:#fff}
.new{font:800 16px Archivo,sans-serif;border:2px solid var(--ink);background:var(--mint);padding:9px 14px;cursor:pointer;flex:none}
/* the creation always fits above the mic: width limited by the screen height (scenes are 3:2) */
.stage-wrap{position:relative;width:min(1100px,100%,calc((100vh - 250px) * 1.5));width:min(1100px,100%,calc((100dvh - 250px) * 1.5));margin:0 auto}
.empty-hint{border:3px dashed var(--ink);background:#fff;padding:60px 20px;text-align:center;font:800 clamp(22px,4vw,34px) Archivo,sans-serif}
.empty-hint[hidden]{display:none}
.status{min-height:2.4em;text-align:center;font:800 clamp(18px,2.6vw,24px)/1.25 Archivo,sans-serif;padding:6px 10px}
.status.wait{color:var(--blue)}.status.ok{color:#178a5c}.status.warn{color:var(--red)}
.bottom{display:flex;align-items:center;gap:14px;max-width:1100px;width:100%;margin:0 auto;position:sticky;bottom:0;background:var(--bg);padding:8px 0}
.strip{display:flex;gap:8px;overflow-x:auto;flex:1}
.vchip{font:850 18px Archivo,sans-serif;border:2px solid var(--ink);background:#fff;min-width:56px;min-height:48px;cursor:pointer}
.vchip[aria-pressed=true]{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.mic{display:flex;align-items:center;gap:10px;border:4px solid var(--ink);background:var(--red);color:#fff;font:900 22px Archivo,sans-serif;padding:16px 28px;border-radius:999px;cursor:pointer;box-shadow:5px 5px 0 var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}
.mic .mic-ico{font-size:40px}
.mic.on{background:var(--mint);transform:scale(1.06)}
.mic:disabled{opacity:.45}
/* adult */
.adult .screen{max-width:900px;margin:0 auto}
.ad-top{display:flex;justify-content:space-between;align-items:center}
.ad-logo{height:40px}
.queue{display:flex;flex-direction:column;gap:12px}
.req{border:2px solid var(--ink);background:#fff;padding:12px;box-shadow:4px 4px 0 var(--ink)}
.req.pending{background:#fff7d6}.req.building{background:#e3e9ff}.req.done{opacity:.7}
.req-who{font-weight:800;margin-bottom:6px}
.req textarea{width:100%;resize:vertical}
.req-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.req-actions button{font:800 16px Archivo,sans-serif;border:2px solid var(--ink);padding:10px 14px;cursor:pointer}
.req-actions .ok{background:var(--mint)}.req-actions .more{background:var(--yellow)}.req-actions .no{background:#fff}
.req-status{font-weight:700;color:var(--muted);margin-top:4px}
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.kid{border:2px solid var(--ink);background:#fff;padding:10px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.kid.busy{background:#e3e9ff}
.kid-av{font-size:32px;grid-row:span 3}
.kid small{color:var(--muted)}
.add{margin-top:18px}.add summary{font-weight:800;cursor:pointer}
.add form{display:grid;gap:10px;margin-top:10px}
.add label{display:grid;gap:4px;font-weight:700}
.avs{display:flex;flex-wrap:wrap;gap:6px}
.av{font-size:28px;border:2px solid var(--ink);background:#fff;width:52px;height:52px;cursor:pointer}
.av[aria-pressed=true]{background:var(--yellow)}