:root{--font:"MiSans","PingFang SC","Microsoft YaHei",sans-serif;--ink:#050611}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;font-family:var(--font);background:#000;-webkit-tap-highlight-color:transparent}
body{background:#000;min-width:320px;min-height:100vh}
button{font:inherit;border:none;cursor:pointer;background:0 0;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* ============ PAGE SHELL ============ */
.backdrop{position:relative;min-height:100dvh;overflow:hidden;background:var(--ink);color:#fff}
.bg-img{pointer-events:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-mobile{pointer-events:none;position:absolute;top:0;left:50%;transform:translateX(-50%);width:287px;height:340px;object-fit:contain;z-index:10}
.hero-desktop{display:none}
@media(min-width:1280px){
  .hero-mobile{display:none}
  .hero-desktop{display:block;pointer-events:none;position:absolute;right:-3vw;bottom:-12vh;z-index:10;height:96vh;max-height:1020px;width:auto;object-fit:contain}
}
.main{position:relative;z-index:20;display:flex;min-height:100dvh;align-items:flex-start;justify-content:center;padding:0 12px 30px}

/* ============ GLASS CARD ============ */
.card-glass{
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  background:radial-gradient(circle at 92% 0,rgba(124,65,250,.22),transparent 32%),linear-gradient(rgba(23,22,43,.67),rgba(13,11,30,.67));
  border:2px solid #684994;border-radius:26px;position:relative;overflow:hidden;
  box-shadow:inset 0 4px 4px rgba(0,0,0,.25),0 28px 90px rgba(0,0,0,.36);
}

/* ============ INTRO ============ */
.card-intro{width:calc(100% - 50px);max-width:325px;margin-top:320px;padding:24px 18px 26px;text-align:center}
.timer{display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;color:#c0aaff;margin-bottom:14px}
.timer img{width:24px;height:24px}
.heading-glow{font-size:22px;font-weight:700;background:linear-gradient(to bottom,#f7f5fa,#d4c4f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.desc-light{font-size:14px;line-height:22px;color:#e0d8f0;margin-bottom:16px}
.note-purple{font-size:12px;color:#9b61ed;margin-bottom:14px}
.tags-row{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
.tag{border:1px solid #492e72;border-radius:27px;padding:4px 14px;font-size:12px;color:#815eb7}
.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions-row.single{grid-template-columns:1fr}
.btn-grad{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:12px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(to right,#6f2df2,#de48b0);transition:transform .15s}
.btn-grad:active{transform:scale(.97)}
.btn-grad img{width:20px;height:20px}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;font-size:16px;font-weight:600;color:#c0aaff;background:rgba(12,10,32,.85);border:1px solid #2b1d48;transition:transform .15s}
.btn-dark:active{transform:scale(.97)}

/* ============ PREPARING / COMPLETING ============ */
.card-prep{width:calc(100% - 50px);max-width:325px;margin-top:320px;padding:28px 18px;display:flex;flex-direction:column;align-items:center;text-align:center}
.sub-muted{font-size:14px;color:#8f79c5;margin-top:10px}
.sub-muted.small{font-size:12px}
.bar{margin-top:24px;height:10px;width:100%;max-width:280px;overflow:hidden;border-radius:9999px;background:#383250}
.bar-fill{display:block;height:100%;border-radius:9999px;background:linear-gradient(to right,#6b41fa,#fefefe);transition:width .3s}
.small-bar{margin-top:8px;height:6px}
@keyframes ap{0%{width:0}100%{width:100%}}
.bar-auto{animation:ap 1.5s linear forwards}

/* ============ QUIZ ============ */
.quiz-outer{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:284px}
.card-quiz{width:calc(100% - 29px);max-width:346px;min-height:458px;padding:0 20px 20px;overflow:visible}
.quiz-head{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 0 14px;border-bottom:1px solid #302842}
.quiz-head-l{flex:1;min-width:0}
.quiz-name{font-size:14px;font-weight:500;color:#c0aaff}
.quiz-step-text{margin-top:8px;font-size:12px;letter-spacing:2px;color:#8f79c5}
.quiz-head-r{display:flex;align-items:center;gap:6px;font-size:14px;color:#c0aaff;white-space:nowrap;padding-top:2px}
.quiz-head-r img{width:18px;height:18px}
.pills{display:flex;gap:6px;margin-top:14px;justify-content:center}
.pill{display:grid;place-items:center;min-width:44px;height:36px;padding:0 10px;border-radius:18px;font-size:13px;font-weight:500;border:1px solid #242131;background:rgba(12,10,32,.9);color:#7864b3;transition:all .25s}
.pill.on{border-color:transparent;background:linear-gradient(to right,#6f2df2,#de48b0);color:#fff;box-shadow:0 0 16px rgba(155,97,237,.5)}
.pill.past{border-color:#2b2440;color:#c0aaff}

/* ============ QUESTION BODY ============ */
.qb{display:flex;flex-direction:column;align-items:center;text-align:center}
.qe{font-size:15px;font-weight:500;background:linear-gradient(to bottom,#f7f5fa,#d4c4f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.qt,.qt-sm{font-weight:600;background:linear-gradient(to bottom,#f7f5fa,#d4c4f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.qd{color:#8f79c5}
.qb-text{padding:30px 0 0}
.qb-text .qe{font-size:18px}
.qb-text .qt{margin-top:8px;font-size:26px;line-height:34px}
.qb-text .qd{margin-top:8px;font-size:14px}
.qb-img{padding-top:14px}
.qb-img .qe{font-size:14px}
.qt-sm{font-size:16px;line-height:22px;margin-top:4px}
.qbtns{display:flex;flex-direction:column;gap:16px;width:100%;margin-top:28px}
.qb-y,.qb-n{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border-radius:14px;font-size:17px;font-weight:600;transition:transform .15s}
.qb-y:active,.qb-n:active{transform:scale(.97)}
.qb-y img{width:22px;height:22px}
.qb-y{background:linear-gradient(to right,#6f2df2,#de48b0);color:#fff;box-shadow:0 0 28px rgba(222,72,176,.4)}
.qb-n{background:rgba(12,10,32,.85);border:1px solid #2b1d48;color:#c0aaff}

/* ============ IMAGE GRID ============ */
.igrid{display:grid;margin-top:12px;width:100%}
.igrid.four{grid-template-columns:1fr 1fr;gap:8px}
.igrid.two{grid-template-columns:1fr 1fr;gap:12px}
.icell{position:relative;border-radius:12px;border:2px solid #2b1d48;background:#0b0818;overflow:hidden;cursor:pointer;transition:all .2s}
.icell:hover{border-color:#d499fe}
.icell:active{transform:scale(.98);border-color:#f168d2;box-shadow:0 0 28px rgba(222,72,176,.4)}
.icell img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.icell.age{overflow:visible}
.age-tag{position:absolute;top:2px;right:-12px;z-index:2;background:linear-gradient(135deg,#6f2df2,#de48b0);color:#fff;font-size:10px;font-weight:500;padding:3px 14px 3px 8px;border-radius:0 0 0 8px;white-space:nowrap}

/* ============ RESULT ============ */
.card-result{width:calc(100% - 30px);max-width:360px;min-height:550px;margin-top:80px;padding:36px 16px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.rbadge{display:inline-flex;align-items:center;gap:6px;background:rgba(155,97,237,.15);border:1px solid rgba(155,97,237,.3);border-radius:9999px;padding:8px 20px;font-size:13px;color:#c0aaff}
.hl{color:#9b61ed;font-weight:600}
.rlogo{width:96px;height:96px;border-radius:24px;margin-top:24px;cursor:pointer;animation:pulse 2s ease-in-out infinite}
.rlogo:active{transform:scale(.95)}
.dl-hint{font-size:15px;color:#c0aaff;margin-top:14px;font-weight:500}
.rdesc{font-size:13px;color:#7864b3;line-height:1.6;margin-top:18px;max-width:300px;text-align:left}
.rrules{width:100%;max-width:300px;border-top:1px solid #2b1d48;padding-top:14px;margin-top:18px}
.rrules h4{font-size:12px;color:#7864b3;margin-bottom:8px;font-weight:500;text-align:left}
.rr{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;color:#7864b3}
.rn{width:20px;height:20px;border-radius:50%;background:rgba(155,97,237,.12);border:1px solid #2b1d48;display:flex;align-items:center;justify-content:center;font-size:10px;color:#c0aaff;flex-shrink:0}

/* ============ POPUP ============ */
.pop-mask{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fi .2s ease}
.pop{background:radial-gradient(circle at 92% 0,rgba(124,65,250,.22),transparent 32%),linear-gradient(rgba(23,22,43,.95),rgba(13,11,30,.95));border:1px solid #684994;width:85%;max-width:320px;border-radius:24px;padding:28px 24px;text-align:center;backdrop-filter:blur(16px)}
.pop h2{font-size:18px;color:#ff5c5c;margin-bottom:10px}
.pop p{font-size:14px;color:#8f79c5;margin-bottom:20px;line-height:1.5}
.pop button{padding:12px 30px;background:linear-gradient(to right,#6f2df2,#de48b0);color:#fff;border-radius:12px;font-size:14px;font-weight:500}

/* ============ ANIMATIONS ============ */
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.fade-in{animation:fi .35s ease}

/* ============ PHASE VISIBILITY ============ */
.phase{display:none}
.phase.active{display:flex;justify-content:center;width:100%}

/* ============ STAGE MODE (quiz/completing) ============ */
@media(max-width:1279px){
  .stage .hero-mobile{width:200px;height:240px;top:-10px}
  .stage .main{padding-top:0;padding-bottom:10px}
  .stage .quiz-outer{margin-top:220px}
  .stage .card-prep{margin-top:220px}
  .stage .card-quiz{min-height:auto}
  .stage .pills{margin-top:10px;margin-bottom:6px}
  .stage .pill{min-width:40px;height:30px;font-size:12px;padding:0 8px}
}
@media(max-width:360px){
  .stage .hero-mobile{width:170px;height:200px}
  .stage .quiz-outer{margin-top:180px}
  .stage .card-prep{margin-top:180px}
}

/* ============ SMALL SCREENS ============ */
@media(max-width:360px){
  .card-intro,.card-prep{max-width:300px;margin-top:280px}
  .card-quiz{max-width:320px}
  .pill{min-width:38px;height:32px;font-size:11px;padding:0 7px}
  .qb-text .qt{font-size:22px}
  .quiz-outer{margin-top:240px}
}

/* ============ DESKTOP ============ */
@media(min-width:1280px){
  .main{align-items:center;padding:20px 12px}
  .card-glass{border:3px solid #684994;border-radius:38px}
  .card-intro,.card-prep{max-width:1016px;margin-top:0;padding:48px 64px}
  .quiz-outer{margin-top:0}
  .card-quiz{max-width:1016px;min-height:703px;padding:20px 40px}
  .card-result{max-width:1016px;margin-top:0;padding:48px}
  .pills{flex-direction:column;width:160px;gap:8px}
  .pill{width:100%;min-height:50px;border-radius:16px;font-size:16px}
}