:root{
  --ink:#101426; --card:#151b33; --line:rgba(255,255,255,.14);
  --sun:#FFD24A; --pink:#FF6FA5; --leaf:#4ADE80; --sky:#38BDF8;
  --text:#F4F6FF; --dim:#9AA3C7;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; overflow:hidden; background:#04101e;}
body{font-family:'Nunito',system-ui,sans-serif; color:var(--text); user-select:none; -webkit-user-select:none;}
#stage{position:fixed; inset:0; width:100%; height:100%; display:block; cursor:none;}
body.ui-visible #stage{cursor:default;}

/* ---------- Setup overlay ---------- */
#setup{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 800px at 50% 20%, #14335c 0%, #071427 60%, #030a14 100%); z-index:50; overflow:auto;}
.card{width:min(600px, 94vw); background:var(--card); border:1px solid var(--line);
  border-radius:28px; padding:32px 32px 26px; box-shadow:0 30px 80px rgba(0,0,0,.55); text-align:center; margin:20px 0;}
h1{font-family:'Baloo 2',cursive; font-weight:800; font-size:clamp(38px,7vw,60px); line-height:1;
  background:linear-gradient(90deg,var(--sun),var(--pink),var(--sky),var(--leaf));
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px;}
.tag{color:var(--dim); font-weight:600; margin-bottom:18px;}
.steps{text-align:left; margin:0 auto 18px; max-width:430px; display:grid; gap:9px;}
.step{display:flex; gap:12px; align-items:flex-start; font-weight:600; font-size:15px;}
.step .n{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:'Baloo 2',cursive; font-weight:800; color:#101426; background:var(--sun); font-size:14px;}
.step:nth-child(2) .n{background:var(--pink)} .step:nth-child(3) .n{background:var(--sky)}

.picklabel{font-family:'Baloo 2',cursive; font-weight:800; font-size:18px; margin:6px 0 10px;}
.avatarpick{display:flex; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap;}
.avbtn{display:grid; gap:4px; place-items:center; width:104px; padding:12px 6px 10px;
  background:#1e2748; border:3px solid transparent; border-radius:18px; color:var(--text);
  font-family:'Nunito',sans-serif; font-weight:800; font-size:12px; line-height:1.25; cursor:pointer;
  transition:transform .12s, border-color .15s;}
.avbtn:hover{transform:scale(1.05)}
.avbtn.active{border-color:var(--sun); background:#2a3560;}
.avico{font-size:30px; line-height:1;}

.bigbtn{display:inline-block; font-family:'Baloo 2',cursive; font-weight:800; font-size:24px;
  color:#101426; background:linear-gradient(180deg,#FFE28A,#FFC93C); border:none; border-radius:999px;
  padding:15px 44px; cursor:pointer; box-shadow:0 10px 24px rgba(255,201,60,.35), inset 0 -3px 0 rgba(0,0,0,.15);
  transition:transform .12s ease;}
.bigbtn:active{transform:scale(.96)}
.altbtn{display:inline-block; margin-top:12px; background:none; border:none; color:var(--dim);
  font-family:'Nunito',sans-serif; font-weight:700; font-size:14px; cursor:pointer; text-decoration:underline;}
.privacy{color:var(--dim); font-size:12px; font-weight:600; margin-top:14px;}
#setupErr{color:#FF9AA2; font-weight:700; margin-top:12px; display:none; font-size:14px;}

/* ---------- HUD ---------- */
#hud{position:fixed; inset:auto 0 22px 0; display:flex; justify-content:center; z-index:40;
  opacity:0; pointer-events:none; transition:opacity .35s ease;}
body.ui-visible #hud{opacity:1; pointer-events:auto;}
.dock{display:flex; gap:12px; align-items:center; background:rgba(16,20,38,.82); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; padding:10px 14px;}
.scenebtn{width:64px; height:64px; border-radius:50%; border:3px solid transparent; background:#1e2748;
  font-size:34px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:transform .12s, border-color .2s;}
.scenebtn:hover{transform:scale(1.08)}
.scenebtn.active{border-color:var(--sun); background:#2a3560;}
.divider{width:1px; height:40px; background:var(--line); margin:0 4px;}
.toolbtn{width:48px; height:48px; border-radius:50%; border:none; background:#1e2748; color:var(--text);
  font-size:20px; cursor:pointer; display:grid; place-items:center; transition:transform .12s;}
.toolbtn:hover{transform:scale(1.08)}
.toolbtn.on{background:var(--sky); color:#08243a;}

/* ---------- Camera preview + settings + toast ---------- */
#preview{position:fixed; top:18px; right:18px; width:200px; border-radius:16px; border:2px solid var(--line);
  transform:scaleX(-1); z-index:40; display:none; opacity:.9;}
body.show-preview #preview{display:block;}
#settings{position:fixed; bottom:110px; left:50%; transform:translateX(-50%); z-index:41;
  background:rgba(16,20,38,.94); border:1px solid var(--line); border-radius:20px; padding:18px 22px;
  display:none; min-width:280px;}
#settings.open{display:block;}
#settings label{display:block; font-weight:700; font-size:13px; color:var(--dim); margin:10px 0 4px;}
#settings input[type=range]{width:100%; accent-color:var(--sun);}
#settings .row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;
  font-weight:700; font-size:14px;}
.toggle{position:relative; width:46px; height:26px; background:#2a3560; border-radius:999px; cursor:pointer; border:none;}
.toggle::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:left .15s;}
.toggle.on{background:var(--leaf);}
.toggle.on::after{left:23px;}

#sceneName{position:fixed; top:26px; left:50%; transform:translateX(-50%); z-index:30;
  font-family:'Baloo 2',cursive; font-weight:800; font-size:clamp(26px,4vw,44px);
  text-shadow:0 4px 18px rgba(0,0,0,.5); opacity:0; transition:opacity .5s; pointer-events:none;}
#sceneName.flash{opacity:1;}

#toast{position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-8px); z-index:45;
  background:rgba(16,20,38,.92); border:1px solid var(--line); border-radius:999px; padding:10px 22px;
  font-weight:800; font-size:14px; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion: reduce){ .bigbtn, .scenebtn, .toolbtn, .avbtn{transition:none} }