* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#F9F9F7; --surface:#fff; --border:#E8E8E4;
  --text:#1A1A1A; --muted:#888880; --accent:#2563EB;
  --al:#EFF4FF; --green:#16A34A; --gl:#F0FDF4;
  --red:#DC2626; --rl:#FEF2F2; --gold:#CA8A04;
  --r:14px; --sh:0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
}
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; }

.screen { display:none; min-height:100vh; padding:24px 16px 48px; animation:up .35s ease; }
.screen.active { display:flex; flex-direction:column; align-items:center; }
@keyframes up { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.wrap { width:100%; max-width:480px; }

/* photo */
.photo-wrap { width:112px;height:112px;border-radius:50%;overflow:hidden;border:2px solid var(--border);cursor:pointer;margin:0 auto 24px;background:var(--surface);display:flex;align-items:center;justify-content:center;transition:border-color .2s; }
.photo-wrap:hover { border-color:var(--accent); }
.photo-wrap img { width:100%;height:100%;object-fit:cover;display:none; }
#photo-upload { display:none; }

/* type */
h1 { font-size:clamp(24px,6vw,36px);font-weight:800;letter-spacing:-.5px;line-height:1.15;text-align:center;margin-bottom:8px; }
.sub { font-size:15px;color:var(--muted);text-align:center;margin-bottom:28px; }
.lbl { font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px; }

/* roles */
.roles { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px; }
.rc { padding:16px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:all .2s;user-select:none; }
.rc:hover { border-color:var(--accent); }
.rc.sel { border-color:var(--accent);background:var(--al); }
.rc-icon { font-size:22px;margin-bottom:6px; }
.rc-name { font-weight:700;font-size:14px; }
.rc-desc { font-size:12px;color:var(--muted);margin-top:2px; }

/* input */
.inp { width:100%;padding:13px 16px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--surface);font-family:'Inter',sans-serif;font-size:15px;color:var(--text);outline:none;transition:border-color .2s;margin-bottom:10px; }
.inp:focus { border-color:var(--accent); }
.inp::placeholder { color:var(--muted); }

/* buttons */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:50px;border:none;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s; }
.bp { background:var(--text);color:#fff;width:100%; }
.bp:hover:not(:disabled) { background:#333; }
.bp:disabled { opacity:.3;cursor:default; }
.bo { background:var(--surface);color:var(--text);border:1.5px solid var(--border);font-size:14px;padding:11px 20px; }
.bo:hover { border-color:var(--text); }
.bg2 { background:transparent;color:var(--muted);font-size:14px;padding:10px 16px;border:none;font-family:'Inter',sans-serif;cursor:pointer; }
.bg2:hover { color:var(--text); }
.bgreen { background:var(--green);color:#fff;font-size:17px;padding:15px 36px;border-radius:50px;border:none;font-family:'Inter',sans-serif;font-weight:700;cursor:pointer;transition:all .2s; }
.bgreen:hover:not(:disabled) { background:#15803d; }
.bred   { background:var(--red);color:#fff;font-size:17px;padding:15px 36px;border-radius:50px;border:none;font-family:'Inter',sans-serif;font-weight:700;cursor:pointer;transition:all .2s; }
.bred:hover:not(:disabled) { background:#b91c1c; }
.bgreen:disabled,.bred:disabled { opacity:.4;cursor:default; }

/* card */
.card { background:var(--surface);border-radius:var(--r);border:1.5px solid var(--border);padding:20px;margin-bottom:12px; }

/* progress */
.prow { display:flex;align-items:center;gap:10px;margin-bottom:20px;width:100%;max-width:480px; }
.pbar { flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden; }
.pfill { height:100%;background:var(--text);border-radius:3px;transition:width .4s ease; }
.qc { font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap; }
.spill { background:#FEFCE8;color:var(--gold);border:1px solid #fde68a;border-radius:50px;padding:5px 14px;font-size:13px;font-weight:700;white-space:nowrap; }

/* question */
.qt { font-size:clamp(15px,4vw,19px);font-weight:700;line-height:1.45;margin-bottom:20px; }
.anss { display:flex;flex-direction:column;gap:8px; }
.ab { display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;text-align:left;transition:all .2s;width:100%; }
.ab:hover:not(:disabled) { border-color:var(--accent);background:var(--al); }
.ab.correct { border-color:var(--green)!important;background:var(--gl)!important;color:var(--green); }
.ab.wrong   { border-color:var(--red)!important;background:var(--rl)!important;color:var(--red); }
.ab:disabled { cursor:default; }
.al { width:26px;height:26px;border-radius:7px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;transition:all .2s; }
.ab.correct .al { background:var(--green);border-color:var(--green);color:#fff; }
.ab.wrong   .al { background:var(--red);border-color:var(--red);color:#fff; }

/* host panel */
.hp { background:#F5F0FF;border:1.5px solid #C4B5FD;border-radius:var(--r);padding:16px;margin-bottom:14px;width:100%;max-width:480px; }
.hpl { font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7C3AED;margin-bottom:10px; }
.chips { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px; }
.chip { background:#fff;border:1px solid #DDD6FE;border-radius:50px;padding:4px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px; }
.ok { color:var(--green); } .wt { color:var(--muted); }
.hbtns { display:flex;gap:8px;flex-wrap:wrap; }
.hb { padding:8px 14px;border-radius:50px;border:1px solid #DDD6FE;background:#fff;color:#7C3AED;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s; }
.hb:hover { background:#7C3AED;color:#fff;border-color:#7C3AED; }

/* waiting */
.scode { font-size:46px;font-weight:800;letter-spacing:6px;text-align:center;margin:10px 0 4px; }
.pr { display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-radius:10px;border:1px solid var(--border);margin-bottom:8px;animation:up .3s ease; }
.dot { width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0; }

/* podium */
.podium { display:flex;align-items:flex-end;justify-content:center;gap:10px;width:100%;max-width:400px;margin:24px 0; }
.ps { display:flex;flex-direction:column;align-items:center;flex:1; }
.pav { width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:6px;border:2px solid transparent; }
.ps.r1 .pav { border-color:#CA8A04;background:#FEFCE8; }
.ps.r2 .pav { border-color:#94A3B8;background:#F8FAFC; }
.ps.r3 .pav { border-color:#B45309;background:#FFFBEB; }
.pn { font-size:12px;font-weight:700;text-align:center;margin-bottom:3px;word-break:break-word; }
.pp { font-size:11px;color:var(--muted);margin-bottom:5px; }
.pb { width:100%;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800; }
.ps.r1 .pb { height:84px;background:#FEF9C3;color:#92400E; }
.ps.r2 .pb { height:62px;background:#F1F5F9;color:#475569; }
.ps.r3 .pb { height:46px;background:#FEF3C7;color:#92400E; }
.olist { width:100%;max-width:480px; }
.or { display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--surface);border-radius:10px;border:1px solid var(--border);margin-bottom:8px; }
.ork { font-size:13px;font-weight:700;color:var(--muted);width:20px; }
.orn { flex:1;font-weight:600;font-size:14px; }
.ors { font-size:13px;font-weight:700;color:var(--accent); }

/* stage 2 */
.vbox { width:100%;max-width:480px;aspect-ratio:16/9;background:#111;border-radius:var(--r);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:20px;overflow:hidden;position:relative; }
.vph { text-align:center;color:rgba(255,255,255,.45);padding:20px; }
.vi { font-size:38px;margin-bottom:8px; }

/* timer */
.tw { position:relative;width:72px;height:72px;margin:0 auto 20px; }
.tw svg { transform:rotate(-90deg); }
.tbg  { fill:none;stroke:var(--border);stroke-width:5; }
.tfil { fill:none;stroke:var(--text);stroke-width:5;stroke-linecap:round;stroke-dasharray:204;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s; }
.tnum { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:800; }

.yesno { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; }

.pcard { background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:20px;width:100%;max-width:480px;text-align:center;margin-top:16px;animation:up .3s ease; }
.pcard img { max-width:100%;border-radius:10px;margin-bottom:14px; }
.verd { font-size:21px;font-weight:800;margin-bottom:6px; }
.verd.yes { color:var(--green); } .verd.no { color:var(--red); }
.vsub { font-size:14px;color:var(--muted); }

.s2sc { width:100%;max-width:480px;margin-top:14px; }
.s2r { display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:8px; }

.s2hp { background:#F5F0FF;border:1.5px solid #C4B5FD;border-radius:var(--r);padding:16px;width:100%;max-width:480px;margin-bottom:20px; }

/* toast */
.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;border-radius:50px;padding:11px 22px;font-size:14px;font-weight:600;z-index:9999;white-space:nowrap;pointer-events:none;animation:ti .25s ease,to .25s ease 1.75s forwards; }
@keyframes ti { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes to { to{opacity:0;transform:translate(-50%,10px)} }

.edrop { position:fixed;top:-40px;pointer-events:none;z-index:9998;font-size:22px;animation:ef linear forwards; }
@keyframes ef { to{top:110vh;transform:rotate(360deg)} }

@media(max-width:400px){
  .yesno{flex-direction:column;align-items:center;}
  .bgreen,.bred{width:200px;}
}