:root{--accent:#00f0ff;--accent2:#ff2bd6;--good:#00ff9f;--bad:#ff2b5e;--text:#d6f6ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;
  overflow-x:hidden;position:relative;color:var(--text);font-family:'Rajdhani',system-ui,sans-serif}

.app{position:relative;z-index:1;width:100%;max-width:440px;padding:26px 22px;min-height:585px;
  display:flex;flex-direction:column;overflow:hidden;border-radius:16px}
.screen{display:none;flex-direction:column;flex:1;position:relative;z-index:2;animation:fade .35s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.center{text-align:center;justify-content:center;align-items:center}

.kicker{font-size:14px;margin-bottom:14px;color:var(--accent);min-height:18px}
.big34{font-size:112px;line-height:.85;margin:2px 0 6px;font-weight:900}
.intro-sub{font-size:19px;font-weight:700;letter-spacing:1px;margin:8px 4px 2px;color:var(--accent)}
.intro-lead{font-size:17px;margin:12px 6px 22px;line-height:1.45;font-weight:500;color:var(--text);opacity:.82}
.intro-lead b{color:var(--accent2);opacity:1}
.note{font-size:12px;opacity:.78;margin-top:12px}
.switch{display:inline-block;margin-top:14px;font-size:13px;opacity:.65;cursor:pointer;
  text-decoration:underline;color:var(--accent)}

.btn{cursor:pointer;width:100%;padding:15px 24px;font-size:17px;border:none;font-weight:700;
  text-align:center;transition:.12s;color:#06121a;background:var(--accent)}
.btn:active{transform:translateY(2px)}
.app .btn.alt{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.app .btn.chosen{outline:3px solid var(--accent2);outline-offset:3px}
.btn-row{display:flex;gap:10px;margin-top:10px}
.btn-row .btn{font-size:15px;padding:13px}

.topbar{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.progress{flex:1;height:11px;overflow:hidden;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.progress>i{display:block;height:100%;width:0;transition:width .4s;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}
.counter{font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap}
.q-cat{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.q-text{font-weight:700;font-size:22px;line-height:1.25;margin-bottom:20px;color:var(--text)}
.options{display:flex;flex-direction:column;gap:11px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%;
  min-height:62px;padding:8px 16px;cursor:pointer;font-size:17px;font-weight:600;
  border:1px solid var(--accent);color:var(--text);transition:.12s;border-radius:6px;
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.opt-text{flex:1;text-align:left}
.opt-face{flex:none;font-size:34px;line-height:1;display:none}
.opt-face.show{display:flex;align-items:center;justify-content:center}
.opt-face img{height:44px;width:auto;max-width:110px;object-fit:contain;display:block}
.app .opt.selected{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 16%,transparent)}
.app .opt.correct{background:color-mix(in srgb,var(--good) 20%,transparent);border-color:var(--good);color:var(--good)}
.app .opt.wrong{background:color-mix(in srgb,var(--bad) 20%,transparent);border-color:var(--bad);color:var(--bad)}
.app .opt.dim{opacity:.35}
.opt[disabled]{cursor:default}
.answer-comment{min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:15px;font-weight:700;border-radius:8px;padding:6px 14px;margin-bottom:10px;transition:.2s}
.answer-comment.ok{color:var(--good);background:color-mix(in srgb,var(--good) 15%,transparent)}
.answer-comment.no{color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent)}
.answer-row{margin-top:16px}

.result-emoji{font-size:64px;margin-bottom:8px}
.score{font-weight:900;font-size:62px;color:var(--accent);line-height:1.12;padding-top:4px}
.score small{font-size:26px;opacity:.5}
.tier{font-size:23px;font-weight:700;letter-spacing:1px;margin:10px 0 4px;color:var(--accent2)}
.tier-sub{font-size:17px;opacity:.82;margin-bottom:22px;font-weight:600;color:var(--text)}
#s-result{justify-content:flex-start;padding-top:6px}
#s-result .result-emoji{margin-top:2px}

.invite{border:1px dashed var(--accent);border-radius:10px;padding:22px;margin:6px 0 16px;text-align:center;
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.invite .tag{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--accent2)}
.invite h2{font-size:24px;letter-spacing:1px;margin:10px 0;color:var(--text)}
.invite .date{font-weight:900;font-size:36px;color:var(--accent);margin:10px 0}
.invite .row{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;margin:8px 0;font-size:17px;color:var(--text)}
.muted{opacity:.8}
.rsvp-done{display:none;font-weight:700;color:var(--good);margin-top:10px;font-size:16px;letter-spacing:1px}
.foot{text-align:center;font-size:13px;opacity:.72;margin-top:auto;padding-top:16px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:200;display:none}
.modal-overlay{position:fixed;inset:0;background:rgba(2,3,8,.78);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal-overlay.show{display:flex;animation:fade .25s ease}
.modal{position:relative;width:100%;max-width:420px;max-height:88dvh;overflow-y:auto;border-radius:16px;
  padding:54px 22px 24px;background:#0c0e1c;color:var(--text);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.modal .invite{margin-top:0}
.ask{text-align:center;font-weight:700;letter-spacing:1px;margin:2px 0 8px;color:var(--accent)}
.modal-hint{text-align:center;font-size:14px;opacity:.75;margin:0 4px 14px;line-height:1.45}
#s-result .btn + .btn{margin-top:10px}
.modal-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:1px solid var(--accent);
  background:transparent;color:var(--accent);border-radius:8px;font-size:15px;line-height:1;cursor:pointer;padding:0}

/* ============ THEME: CYBERPUNK ============ */
body.t-cyber{font-family:'Rajdhani',sans-serif;--accent:#00f0ff;--accent2:#ff2bd6;--good:#00ff9f;--bad:#ff2b5e;--text:#d6f6ff;
  background:radial-gradient(circle at 15% 0%,rgba(157,75,255,.25),transparent 45%),
    radial-gradient(circle at 85% 100%,rgba(255,43,214,.22),transparent 45%),linear-gradient(180deg,#06070e,#04050a) fixed}
body.t-cyber::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,240,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.06) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 85%)}
body.t-cyber .app{background:linear-gradient(180deg,rgba(12,14,28,.92),rgba(8,9,18,.96));
  border:1px solid rgba(0,240,255,.35);box-shadow:0 0 40px rgba(0,240,255,.18),inset 0 0 60px rgba(157,75,255,.06)}
body.t-cyber .app::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:repeating-linear-gradient(0deg,rgba(0,240,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:screen;opacity:.5}
body.t-cyber .kicker{font-family:'Share Tech Mono',monospace;letter-spacing:.5px}
body.t-cyber .big34{font-family:'Orbitron';letter-spacing:4px;color:#eaffff;
  text-shadow:0 0 8px #00f0ff,0 0 24px rgba(0,240,255,.7),4px 0 #ff2bd6,-4px 0 #00f0ff;animation:glitch 3.2s infinite steps(1)}
@keyframes glitch{0%,92%,100%{text-shadow:0 0 8px #00f0ff,0 0 24px rgba(0,240,255,.7),4px 0 #ff2bd6,-4px 0 #00f0ff}
  93%{text-shadow:-5px 2px #ff2bd6,5px -2px #00f0ff}95%{text-shadow:5px 0 #ff2bd6,-5px 0 #00f0ff}97%{text-shadow:-3px -2px #ff2bd6,3px 2px #00f0ff}}
body.t-cyber .intro-sub,body.t-cyber .tier,body.t-cyber .reaction h3,body.t-cyber .invite h2{font-family:'Orbitron';text-transform:uppercase}
body.t-cyber .big34,body.t-cyber .score,body.t-cyber .invite .date{font-family:'Orbitron'}
body.t-cyber .btn{font-family:'Orbitron';letter-spacing:2px;text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 18px rgba(0,240,255,.55)}
body.t-cyber .opt{border-left:3px solid var(--accent)}
body.t-cyber .foot,body.t-cyber .kicker{font-family:'Share Tech Mono',monospace}

/* ============ THEME: DOS / TERMINAL ============ */
body.t-dos{font-family:'VT323',monospace;--accent:#33ff33;--accent2:#33ff33;--good:#33ff33;--bad:#ff5555;--text:#33ff33;background:#000}
body.t-dos .app{background:#000;border:2px solid #33ff33;border-radius:0;box-shadow:0 0 34px rgba(51,255,51,.22)}
body.t-dos .app::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(51,255,51,.06) 0 1px,transparent 1px 3px)}
body.t-dos .kicker{font-size:18px;letter-spacing:1px}
body.t-dos .big34{font-family:'VT323';font-size:150px;color:#33ff33;text-shadow:0 0 10px rgba(51,255,51,.8)}
body.t-dos .intro-sub,body.t-dos .q-text,body.t-dos .tier,body.t-dos .reaction h3,body.t-dos .invite h2,
body.t-dos .score,body.t-dos .invite .date,body.t-dos .counter{font-family:'VT323';letter-spacing:1px}
body.t-dos .intro-sub,body.t-dos .tier,body.t-dos .invite h2{text-transform:uppercase}
body.t-dos .big34,body.t-dos .score,body.t-dos .invite .date{font-weight:400}
body.t-dos .btn{background:#000;color:#33ff33;border:1px solid #33ff33;border-radius:0;font-family:'VT323';font-size:24px;letter-spacing:1px}
body.t-dos .btn:hover{background:#33ff33;color:#000}
body.t-dos .opt{background:#000;border:1px solid #33ff33;border-radius:0;font-family:'VT323';font-size:21px}
body.t-dos .opt::before{content:"» "}
body.t-dos .opt:hover{background:#0a280a}
body.t-dos .progress{border-radius:0}
body.t-dos .invite{border-style:dashed}

/* ============ THEME: EARLY 2000s / GEOCITIES ============ */
body.t-retro{font-family:'Comic Neue',cursive;--accent:#000080;--accent2:#cc00ff;--good:#008000;--bad:#cc0000;--text:#101010;background:#000044}
body.t-retro::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 120px 90px,#fff,transparent),
    radial-gradient(1px 1px at 70px 160px,#cfe,transparent),radial-gradient(1.5px 1.5px at 180px 50px,#fff,transparent);
  background-size:200px 200px}
body.t-retro .app{background:#fffbe6;border:4px ridge #c0c0c0;border-radius:0;box-shadow:0 0 0 2px #000080}
body.t-retro .kicker{font-weight:700;color:#cc00ff;animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
body.t-retro .big34{font-family:'Comic Neue';font-weight:700;transform:skewX(-6deg);
  background:linear-gradient(90deg,#ff0000,#ff9900,#33cc00,#0099ff,#cc00ff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(2px 2px 0 #00000040)}
body.t-retro .intro-sub{color:#cc00ff}
body.t-retro .btn{background:linear-gradient(#fff,#cfcfcf);border:2px outset #f4f4f4;border-radius:0;color:#000;font-weight:700}
body.t-retro .btn:active{border-style:inset}
body.t-retro .opt{background:#fff;border:2px outset #e6e6e6;border-radius:0;color:#000}
body.t-retro .opt:hover{background:#ffffcc}
body.t-retro .opt::before{content:"» "}
body.t-retro .q-text,body.t-retro .tier,body.t-retro .invite h2{color:#000080}
body.t-retro .invite{background:#ffffe0;border:2px dashed #cc0000;border-radius:0}
body.t-retro .counter{color:#cc00ff}

/* ============ THEME: PARTY / FESTIVE ============ */
body.t-party{font-family:'Baloo 2',cursive;--accent:#f0b429;--accent2:#4aa3ff;--good:#2fd07a;--bad:#ff5a5f;--text:#e9eef7;
  background:linear-gradient(160deg,#0f1830,#1b2c4d,#13233f) fixed}
body.t-party::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(6px 6px at 30px 40px,#f0b42966,transparent),radial-gradient(6px 6px at 150px 120px,#4aa3ff66,transparent),
    radial-gradient(5px 5px at 90px 200px,#ffffff55,transparent),radial-gradient(6px 6px at 200px 70px,#2fd07a55,transparent);
  background-size:240px 240px}
body.t-party .app{background:#16243f;border:3px dashed #f0b429;border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 0 40px rgba(74,163,255,.06)}
body.t-party .kicker{font-weight:700;color:#f0b429}
body.t-party .big34{font-family:'Baloo 2';font-weight:800;color:#f0b429;text-shadow:3px 3px 0 #1b2c4d,6px 6px 0 #4aa3ff;animation:bounce 2.4s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
body.t-party .intro-sub{color:#f0b429}
body.t-party .btn{background:linear-gradient(90deg,#f0b429,#ffce5c);color:#3a2a00;border:none;border-radius:99px;box-shadow:0 6px 0 #b8861a}
body.t-party .btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b8861a}
body.t-party .app .btn.alt{background:transparent;color:#f0b429;border:2px solid #f0b429;box-shadow:0 5px 0 rgba(240,180,41,.25)}
body.t-party .opt{background:#1d2f4f;border:2px solid #2c4675;border-radius:16px;color:#e9eef7}
body.t-party .opt:hover{background:#243a61;border-color:#f0b429}
body.t-party .progress{border-radius:99px}
body.t-party .invite{border:3px dashed #f0b429;border-radius:20px;background:#1a2b49}
body.t-party .tier,body.t-party .invite h2{color:#f0b429}

/* ============ THEME: NEO-BRUTALISM (тренд) ============ */
body.t-brutal{font-family:'Space Grotesk',sans-serif;--accent:#ff5c00;--accent2:#2d7dff;--good:#14b86b;--bad:#ff3b3b;--text:#111111;background:#f4f1e6}
body.t-brutal::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);background-size:28px 28px}
body.t-brutal .app{background:#fff;border:3px solid #111;border-radius:14px;box-shadow:9px 9px 0 #111}
body.t-brutal .kicker{font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#111;
  background:var(--accent);display:inline-block;padding:4px 12px;border:2px solid #111;border-radius:6px}
body.t-brutal .big34{font-family:'Space Grotesk';font-weight:700;color:#111;text-shadow:5px 5px 0 var(--accent),10px 10px 0 var(--accent2)}
body.t-brutal .intro-sub{color:#111;text-transform:uppercase;font-weight:700}
body.t-brutal .intro-lead{color:#333;opacity:1}
body.t-brutal .intro-lead b{color:var(--accent)}
body.t-brutal .btn{background:var(--accent);color:#111;border:3px solid #111;border-radius:10px;font-weight:700;text-transform:uppercase;box-shadow:5px 5px 0 #111}
body.t-brutal .btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #111}
body.t-brutal .app .btn.alt{background:#fff;color:#111;border:3px solid #111;box-shadow:5px 5px 0 #111}
body.t-brutal .opt{background:#fff;border:3px solid #111;border-radius:10px;color:#111;font-weight:600;box-shadow:4px 4px 0 #111}
body.t-brutal .opt:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111;background:#fff7e6}
body.t-brutal .app .opt.correct{background:#c8f7dd;border-color:#111;color:#0a7a45;box-shadow:4px 4px 0 #111}
body.t-brutal .app .opt.wrong{background:#ffd3d3;border-color:#111;color:#b11;box-shadow:4px 4px 0 #111}
body.t-brutal .progress{border:2px solid #111;border-radius:99px;background:#fff}
body.t-brutal .counter,body.t-brutal .q-text,body.t-brutal .tier,body.t-brutal .reaction h3{color:#111}
body.t-brutal .q-cat{color:var(--accent)}
body.t-brutal .score{color:#111;text-shadow:4px 4px 0 var(--accent)}
body.t-brutal .invite{background:#fff;border:3px solid #111;border-radius:12px;box-shadow:6px 6px 0 #111}
body.t-brutal .invite .date{color:#111;text-shadow:3px 3px 0 var(--accent)}
body.t-brutal .invite h2{color:#111}
body.t-brutal .invite .tag{color:var(--accent2)}

/* ============ MODAL по темам ============ */
body.t-cyber .modal{background:#0c0e1c;border-color:rgba(0,240,255,.4);box-shadow:0 0 40px rgba(0,240,255,.2)}
body.t-dos .modal{background:#000;border:2px solid #33ff33;border-radius:0}
body.t-retro .modal{background:#fffbe6;border:4px ridge #c0c0c0;border-radius:0;color:#101010}
body.t-party .modal{background:#16243f;border:3px dashed #f0b429}
body.t-brutal .modal{background:#fff;border:3px solid #111;box-shadow:9px 9px 0 #111;color:#111}