:root{
--river:#1a6b8a;--river-l:#2d9cbe;--river-d:#0d4f6a;
--nature:#2d7a4f;--nature-l:#4caf6e;
--gold:#d4a24e;--gold-l:#f0c96e;
--bg:#f7f3ec;--text:#2c2418;--text-l:#6b5d4d;
--card:#ffffff;--sh:rgba(44,36,24,.06);--shm:rgba(44,36,24,.12);
--ok:#27ae60;--no:#e74c3c;--purple:#8e44ad;--orange:#e67e22;--teal:#00897b;
--R:18px;--sans:'Manrope',sans-serif;--serif:'Cormorant Garamond',serif;--reading:'Crimson Text',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:
linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 38%),
radial-gradient(circle at top left, rgba(45,156,190,.16), transparent 28%),
radial-gradient(circle at top right, rgba(212,162,78,.13), transparent 22%),
repeating-linear-gradient(90deg, rgba(44,36,24,.018) 0 1px, transparent 1px 68px),
linear-gradient(180deg,#fcf7ef 0%,var(--bg) 100%);color:var(--text);min-height:100vh;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(10px);opacity:.7}
body::before{width:320px;height:320px;top:6%;left:-80px;background:radial-gradient(circle,rgba(45,156,190,.18),transparent 70%);animation:driftBg 14s ease-in-out infinite}
body::after{width:260px;height:260px;right:-70px;bottom:10%;background:radial-gradient(circle,rgba(212,162,78,.18),transparent 72%);animation:driftBg 17s ease-in-out infinite reverse}
::selection{background:rgba(26,107,138,.15)}

/* ═══ BG ═══ */
.bgA{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.w{position:absolute;bottom:-10%;left:-10%;width:120%;height:300px;border-radius:50% 50% 0 0;animation:wv 8s ease-in-out infinite}
.w:nth-child(1){background:linear-gradient(180deg,transparent,rgba(26,107,138,.04))}
.w:nth-child(2){bottom:-15%;animation-delay:-2s;opacity:.6;background:linear-gradient(180deg,transparent,rgba(45,122,79,.03))}
.w:nth-child(3){bottom:-5%;animation-delay:-4s;opacity:.4;background:linear-gradient(180deg,transparent,rgba(212,162,78,.03))}
.lf{position:absolute;width:18px;height:18px;opacity:.06;background:var(--nature);border-radius:0 50% 50% 50%;animation:fl 16s linear infinite}
.lf:nth-child(4){left:8%}.lf:nth-child(5){left:28%;animation-delay:3s;width:13px;height:13px}
.lf:nth-child(6){left:55%;animation-delay:7s}.lf:nth-child(7){left:78%;animation-delay:11s;width:11px;height:11px}
.lf:nth-child(8){left:42%;animation-delay:5s}.lf:nth-child(9){left:90%;animation-delay:13s}
.ff{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 8px var(--gold),0 0 18px var(--gold-l);animation:fy 7s ease-in-out infinite}
.ff:nth-child(10){top:18%;left:12%}.ff:nth-child(11){top:38%;left:72%;animation-delay:2s}
.ff:nth-child(12){top:62%;left:38%;animation-delay:4s}.ff:nth-child(13){top:28%;left:85%;animation-delay:1s}
@keyframes wv{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px) rotate(1deg)}}
@keyframes fl{0%{transform:translateY(-50px) rotate(0);opacity:0}10%{opacity:.06}90%{opacity:.06}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
@keyframes fy{0%,100%{opacity:0;transform:translate(0,0)}25%{opacity:.7}50%{opacity:.3;transform:translate(25px,-18px)}75%{opacity:.8;transform:translate(-8px,12px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes shake{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}100%{transform:translateX(0)}}
@keyframes glow{0%,100%{box-shadow:0 2px 10px rgba(26,107,138,.25)}50%{box-shadow:0 2px 25px rgba(26,107,138,.5)}}
@keyframes driftBg{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26px,-18px,0) scale(1.08)}}

/* ═══ PARTICLES ═══ */
.ptc{position:fixed;inset:0;pointer-events:none;z-index:9999}
.pt{position:absolute;border-radius:50%;pointer-events:none;animation:pb .7s ease-out forwards}
@keyframes pb{0%{transform:scale(1);opacity:1}100%{transform:scale(0) translateY(-50px);opacity:0}}

/* ═══ STREAK ═══ */
.strk{display:none;position:fixed;top:18px;right:18px;z-index:100;background:linear-gradient(135deg,#ff6b35,#ff4444);color:#fff;padding:9px 18px;border-radius:30px;font-weight:800;font-size:.9rem;box-shadow:0 4px 18px rgba(255,68,68,.35);animation:pulse .5s ease-in-out infinite alternate;gap:6px;align-items:center}
.strk.on{display:flex}

/* ═══ SOUND ═══ */
.snd{position:fixed;bottom:18px;right:18px;z-index:100;width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 8px var(--sh);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:.2s}
.snd:hover{transform:scale(1.1)}

/* ═══ CONTAINER ═══ */
.C{position:relative;z-index:1;max-width:1090px;margin:0 auto;padding:20px 24px 18px}
.quiz-nav{position:sticky;top:12px;z-index:50;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;width:min(100%,1048px);margin:0 auto 18px;padding:14px 20px;background:rgba(255,250,244,.82);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7);border-radius:999px;box-shadow:0 16px 34px rgba(44,36,24,.1);overflow:hidden}
.quiz-brand{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--river),var(--nature));color:#fff;font-family:var(--serif);font-size:1.08rem;font-weight:700;letter-spacing:.06em;box-shadow:0 12px 22px rgba(26,107,138,.2)}
.quiz-nav a,.quiz-nav span{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;font-size:.79rem;font-weight:700;text-decoration:none;transition:.2s}
.quiz-nav a{color:var(--text-l);background:rgba(26,107,138,.05);text-transform:uppercase;letter-spacing:.05em}
.quiz-nav a:hover{color:var(--river);background:rgba(26,107,138,.1);transform:translateY(-1px)}
.quiz-nav .on{background:linear-gradient(135deg,var(--river),var(--nature));color:#fff;box-shadow:0 12px 24px rgba(26,107,138,.18)}

/* ═══════════════════════════════════════
   PAGE 1: WELCOME
   ═══════════════════════════════════════ */
#P1{display:flex;align-items:center;justify-content:center;min-height:auto;text-align:left;animation:fadeUp .6s;padding:2px 0 10px}
.welcome-shell{width:min(100%,1048px);display:grid;grid-template-columns:minmax(0,1.72fr) minmax(328px,382px);gap:18px;align-items:stretch;margin:0 auto}
.welcome-stage{position:relative;display:grid;grid-template-columns:minmax(276px,344px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:22px;row-gap:18px;min-height:538px;padding:26px 26px 24px;border-radius:40px;background:linear-gradient(155deg,rgba(255,253,250,.96),rgba(245,236,229,.88));border:1px solid rgba(255,255,255,.78);box-shadow:0 28px 60px rgba(44,36,24,.1);overflow:hidden}
.welcome-stage::before{content:"";position:absolute;top:-56px;right:-46px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(45,156,190,.14),transparent 70%)}
.welcome-stage::after{content:"";position:absolute;bottom:-86px;left:-54px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(212,162,78,.12),transparent 72%)}
.welcome-title-row,.welcome-scene{position:relative;z-index:1}
.welcome-title-row{grid-column:2;display:block;min-width:0;align-self:start}
#P1 .logo{display:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#P1 h1{font-family:var(--serif);font-size:clamp(2.75rem,4.4vw,4.05rem);font-weight:700;background:linear-gradient(135deg,var(--river-d),var(--river),var(--nature));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;letter-spacing:-.04em;line-height:.92;max-width:9ch}
.welcome-kicker{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;background:rgba(26,107,138,.08);color:var(--river);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px}
#P1 .sub{font-family:var(--reading);font-size:1.06rem;color:var(--text-l);font-style:italic;margin-bottom:0}
.welcome-lead{margin:10px 0 0;max-width:35ch;font-size:.97rem;line-height:1.62;color:var(--text-l)}
.welcome-scene{display:contents}
.welcome-cover-wrap{position:relative;grid-column:1;grid-row:1 / span 2;display:flex;align-items:flex-start;justify-content:flex-start;padding-top:0}
.welcome-cover-wrap::after{content:"";position:absolute;inset:auto -24px 18px auto;width:154px;height:154px;border-radius:50%;background:radial-gradient(circle,rgba(45,156,190,.18),transparent 70%);z-index:0}
.welcome-cover-card{position:relative;z-index:1;width:min(100%,326px);aspect-ratio:5 / 7.4;border-radius:32px;overflow:hidden;background:#e8dfd2;box-shadow:0 24px 50px rgba(44,36,24,.18);transform:none;border:1px solid rgba(255,255,255,.82)}
.welcome-cover-card img{display:block;width:100%;height:100%;object-fit:cover}
.welcome-info{grid-column:2;grid-row:2;display:grid;gap:14px;align-content:end;min-width:0}
.welcome-badges{display:flex;flex-wrap:wrap;gap:10px}
.welcome-badge{display:inline-flex;align-items:center;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.82);box-shadow:0 8px 18px rgba(44,36,24,.05);font-size:.73rem;font-weight:800;color:var(--river);letter-spacing:.08em;text-transform:uppercase}
.welcome-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.welcome-note{padding:13px 15px 14px;border-radius:20px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 24px rgba(44,36,24,.06);min-width:0}
.welcome-note span{display:block;margin-bottom:6px;font-size:.69rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text-l)}
.welcome-note strong{display:block;font-family:var(--serif);font-size:1.06rem;line-height:1.08;color:var(--text)}
.welcome-note-strong{background:linear-gradient(145deg,rgba(22,99,118,.92),rgba(42,86,67,.88));border-color:rgba(255,255,255,.14)}
.welcome-note-strong span,.welcome-note-strong strong{color:#f7efe5}
#P1 .wbox{background:linear-gradient(160deg,rgba(15,86,103,.97),rgba(35,69,56,.92));border-radius:38px;min-height:538px;padding:26px 26px 24px;box-shadow:0 30px 64px rgba(13,97,125,.24);border:1px solid rgba(255,255,255,.14);width:100%;max-width:none;position:relative;overflow:hidden;color:#f7efe5;display:flex;flex-direction:column;justify-content:flex-start;align-self:stretch}
#P1 .wbox::before{content:"";position:absolute;inset:14px;border-radius:28px;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.entry-kicker{display:inline-flex;align-self:flex-start;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f7efe5}
#P1 .wbox h2{font-family:var(--serif);font-size:2.55rem;line-height:.92;letter-spacing:-.03em;margin:12px 0 10px}
.entry-text{margin:0 0 16px;color:rgba(247,239,229,.82);line-height:1.6;font-size:.95rem}
#P1 .wbox label{display:block;font-weight:700;font-size:.88rem;margin-bottom:7px;text-align:left;color:#fff}
#P1 .wbox input{width:100%;padding:15px 16px;border-radius:15px;border:1px solid rgba(255,255,255,.18);font-size:1.04rem;font-family:var(--sans);transition:.25s;outline:none;background:rgba(255,255,255,.97);color:var(--text);margin-bottom:14px}
#P1 .wbox input:focus{border-color:rgba(255,255,255,.82);box-shadow:0 0 0 4px rgba(240,201,110,.18)}

/* Level selector */
.lvl-title{font-weight:700;font-size:.88rem;margin:18px 0 10px;text-align:left}
.lvls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.lvl{padding:14px 10px;border-radius:14px;border:2px solid rgba(0,0,0,.07);background:#fff;cursor:pointer;transition:.25s;text-align:center;position:relative;overflow:hidden}
.lvl:hover{border-color:var(--river-l);transform:translateY(-2px)}
.lvl.on{border-color:var(--river);background:rgba(26,107,138,.04);box-shadow:0 0 0 3px rgba(26,107,138,.12)}
.lvl .lvl-icon{font-size:1.6rem;margin-bottom:4px}
.lvl .lvl-name{font-weight:700;font-size:.85rem}
.lvl .lvl-desc{font-size:.65rem;color:var(--text-l);margin-top:2px}
.lvl.on::after{content:'✓';position:absolute;top:8px;right:10px;background:var(--river);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}

.gobtn{width:100%;padding:15px 16px;border-radius:17px;border:none;background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--text);font-weight:900;font-size:1.05rem;cursor:pointer;font-family:var(--sans);box-shadow:0 16px 30px rgba(212,162,78,.26);transition:.25s}
.gobtn:hover{transform:translateY(-3px);box-shadow:0 22px 38px rgba(212,162,78,.34)}
.gobtn:disabled{opacity:.45;cursor:default;transform:none!important}

.quick-actions{margin-top:14px;display:flex;justify-content:flex-start}
.qaction{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:none;border-radius:999px;background:#fff;border:1px solid rgba(255,255,255,.12);font-size:.86rem;font-weight:800;color:var(--river);cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.12);transition:.22s;font-family:var(--sans)}
.qaction:hover{transform:translateY(-2px);box-shadow:0 18px 28px rgba(0,0,0,.16);background:#fff}
.entry-footnote{margin-top:auto;padding-top:14px;color:rgba(247,239,229,.66);font-size:.72rem;line-height:1.5}
.prev-players{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(44,36,24,.26);backdrop-filter:blur(8px);z-index:160}
.prev-players.on{display:flex}
.prev-box{width:min(980px,100%);max-height:min(86vh,760px);overflow:auto;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,250,244,.9));border:1px solid rgba(255,255,255,.8);border-radius:30px;padding:22px;box-shadow:0 28px 60px rgba(44,36,24,.16);animation:fadeUp .28s}
.prev-head{display:flex;align-items:start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.prev-head h3{margin:0;font-family:var(--serif);font-size:1.45rem;color:var(--text)}
.prev-head p{margin:6px 0 0;font-size:.82rem;color:var(--text-l);line-height:1.5}
.close-prev{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.06);font-size:1.1rem;color:var(--text-l);cursor:pointer;transition:.2s}
.close-prev:hover{background:var(--river);color:#fff;transform:rotate(90deg)}
.leader-sections{display:grid;gap:14px}
.leader-block{padding:16px;border-radius:22px;background:rgba(26,107,138,.035)}
.leader-title{margin-bottom:10px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-l)}
.leaderboard-list{display:grid;gap:10px}
.leader-row{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;border:none;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 24px rgba(44,36,24,.05);cursor:pointer;text-align:left;transition:.22s;font-family:var(--sans)}
.leader-row:hover{transform:translateY(-2px);border-color:rgba(26,107,138,.16);box-shadow:0 18px 28px rgba(44,36,24,.1)}
.leader-row.me{background:linear-gradient(145deg,rgba(26,107,138,.08),rgba(45,122,79,.05));border-color:rgba(26,107,138,.18)}
.leader-rank{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--river),var(--nature));color:#fff;font-size:.9rem;font-weight:900;box-shadow:0 12px 24px rgba(26,107,138,.18)}
.leader-main{min-width:0}
.leader-name{font-size:.94rem;font-weight:800;color:var(--text);line-height:1.25}
.leader-meta{margin-top:4px;font-size:.72rem;color:var(--text-l);line-height:1.4}
.leader-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.leader-stat{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;background:rgba(26,107,138,.05);font-size:.72rem;font-weight:800;color:var(--river);white-space:nowrap}
.self-rank{border:none;width:100%;padding:18px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,246,235,.92));border:1px solid rgba(26,107,138,.12);box-shadow:0 18px 32px rgba(44,36,24,.08);cursor:pointer;text-align:left;transition:.22s;font-family:var(--sans)}
.self-rank:hover{transform:translateY(-3px);box-shadow:0 24px 38px rgba(44,36,24,.12)}
.leader-row.active,.self-rank.active{border-color:rgba(26,107,138,.28);box-shadow:0 18px 32px rgba(26,107,138,.14);background:linear-gradient(145deg,rgba(26,107,138,.1),rgba(45,122,79,.07))}
.self-kicker{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(26,107,138,.08);color:var(--river);font-size:.72rem;font-weight:800;margin-bottom:10px}
.self-title{font-size:1rem;font-weight:900;color:var(--text);margin-bottom:6px}
.self-text{font-size:.82rem;color:var(--text-l);line-height:1.6}
.self-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.player-detail{display:none;padding:18px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,252,249,.95));border:1px solid rgba(26,107,138,.12);box-shadow:0 20px 36px rgba(44,36,24,.08)}
.player-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.player-detail-title{font-size:1.08rem;font-weight:900;color:var(--text);line-height:1.25}
.player-detail-sub{margin-top:4px;font-size:.8rem;color:var(--text-l);line-height:1.5}
.player-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.player-metric{padding:12px 13px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 18px rgba(44,36,24,.04)}
.player-metric-label{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-l)}
.player-metric-value{margin-top:5px;font-size:.95rem;font-weight:900;color:var(--text)}
.player-round{margin-top:14px;padding:14px 15px;border-radius:18px;background:rgba(26,107,138,.04);color:var(--text-l);font-size:.84rem;line-height:1.6}
.player-round strong{display:block;margin-bottom:3px;color:var(--text)}
.player-trophies{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.player-trophy{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(212,162,78,.13);color:var(--text);font-size:.76rem;font-weight:800}
.player-trophy-empty{margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.035);color:var(--text-l);font-size:.82rem}
.players-empty{padding:22px;border-radius:20px;background:rgba(26,107,138,.04);text-align:center;color:var(--text-l);font-size:.9rem;line-height:1.7}
.entry-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;margin-top:11px}
.entry-links a{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.78rem;font-weight:700;color:rgba(247,239,229,.92);text-decoration:none;transition:.2s}
.entry-links a:hover{border-color:rgba(255,255,255,.28);color:#fff;transform:translateY(-1px);background:rgba(255,255,255,.14);box-shadow:none}

/* ═══════════════════════════════════════
   PAGE 2: GAME
   ═══════════════════════════════════════ */
#P2{display:none}

/* Hero */
.hero{text-align:center;padding:38px 20px 26px;margin-bottom:8px;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,247,237,.72));border:1px solid rgba(255,255,255,.72);box-shadow:0 20px 40px rgba(44,36,24,.08);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -8% -36% auto;width:16rem;height:16rem;border-radius:50%;background:radial-gradient(circle, rgba(212,162,78,.18), transparent 70%)}
.hero .bdg{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--river),var(--river-d));color:#fff;padding:6px 16px;border-radius:30px;font-size:.7rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;animation:glow 3s ease-in-out infinite}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:700;background:linear-gradient(135deg,var(--river-d),var(--river),var(--nature));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;letter-spacing:-.03em}
.hero .au{font-family:var(--reading);font-size:1.1rem;color:var(--text-l);font-style:italic;margin-bottom:5px}
.hero .plr{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--text);padding:7px 20px;border-radius:30px;font-weight:700;font-size:.88rem;margin-top:12px;box-shadow:0 3px 12px rgba(212,162,78,.3);cursor:pointer;transition:.2s}
.hero .plr:hover{transform:translateY(-2px)}
.hero .plr .plvl{background:var(--river);color:#fff;padding:2px 8px;border-radius:12px;font-size:.65rem;margin-left:4px}

/* XP bar */
.xpb{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,248,238,.82));border-radius:22px;padding:14px 18px;margin:12px 0;box-shadow:0 14px 28px rgba(44,36,24,.08);display:flex;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.72)}
.xpL{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--river),var(--nature));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.12rem;font-family:var(--serif);flex-shrink:0;box-shadow:0 3px 12px rgba(26,107,138,.25);position:relative}
.xpL::after{content:'Niv.';position:absolute;top:-6px;font-size:.42rem;font-family:var(--sans);font-weight:700;background:var(--gold);padding:1px 5px;border-radius:10px;color:var(--text)}
.xpR{flex:1}.xpR .xpT{font-weight:600;font-size:.78rem;margin-bottom:4px}
.xpR .xpTr{height:8px;background:rgba(0,0,0,.05);border-radius:5px;overflow:hidden}
.xpR .xpF{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--river),var(--gold),var(--nature));transition:width .8s;background-size:200% 100%;animation:shimmer 2s linear infinite}
.xpR .xpTx{font-size:.65rem;color:var(--text-l);margin-top:3px}

/* Achievements */
.achs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;justify-content:center}
.ac{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;position:relative;cursor:default;transition:.3s}
.ac.lk{background:rgba(0,0,0,.05);filter:grayscale(1);opacity:.3}
.ac.ul{background:linear-gradient(135deg,var(--gold-l),var(--gold));box-shadow:0 2px 8px rgba(212,162,78,.35);animation:pop .5s ease}
.ac .tp{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:3px 8px;border-radius:8px;font-size:.58rem;white-space:nowrap;opacity:0;transition:.2s;pointer-events:none}
.ac:hover .tp{opacity:1}

/* Dashboard */
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0}
.st{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,248,238,.82));border-radius:22px;padding:15px 13px;text-align:center;box-shadow:0 12px 24px rgba(44,36,24,.06);transition:.2s;border:1px solid rgba(255,255,255,.7)}
.st:hover{transform:translateY(-2px)}
.st .si{font-size:1.1rem;margin-bottom:3px}
.st .sv{font-size:1.38rem;font-weight:800;font-family:var(--serif);color:var(--river)}
.st .sl{font-size:.57rem;color:var(--text-l);text-transform:uppercase;letter-spacing:.7px;margin-top:2px}

/* Section title */
.stl{font-family:var(--serif);font-size:1.38rem;margin:18px 0 12px;display:flex;align-items:center;gap:8px}

/* Cat grid */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px;margin-bottom:14px}
.ct{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,249,240,.86));border-radius:22px;padding:20px;cursor:pointer;box-shadow:0 16px 28px rgba(44,36,24,.08);border:1px solid rgba(255,255,255,.76);transition:.3s;position:relative;overflow:hidden}
.ct:hover{transform:translateY(-5px);box-shadow:0 12px 30px var(--shm);border-color:rgba(45,156,190,.22)}
.ct .ci{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:9px}
.ct h3{font-family:var(--serif);font-size:1.08rem;margin-bottom:4px}
.ct p{font-size:.72rem;color:var(--text-l);line-height:1.4}
.ct .cc{font-size:.64rem;color:var(--river);font-weight:600;margin-top:6px;text-transform:uppercase;letter-spacing:.5px}
.ct .cp{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--river),var(--nature));transition:width .5s}
.ct .cs{position:absolute;top:9px;right:11px;font-size:.6rem;color:var(--gold);letter-spacing:2px}
.ct[data-b=river] .ci{background:rgba(26,107,138,.08)}.ct[data-b=nature] .ci{background:rgba(45,122,79,.08)}
.ct[data-b=gold] .ci{background:rgba(212,162,78,.12)}.ct[data-b=warm] .ci{background:rgba(192,57,43,.06)}
.ct[data-b=purple] .ci{background:rgba(142,68,173,.08)}.ct[data-b=teal] .ci{background:rgba(0,128,128,.08)}
.ct[data-b=orange] .ci{background:rgba(230,126,34,.08)}.ct[data-b=pink] .ci{background:rgba(219,112,147,.1)}

/* Bottom buttons */
.bbtns{text-align:center;margin-top:8px}
.bbtn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:20px;border:1px solid rgba(0,0,0,.07);background:#fff;font-family:var(--sans);font-size:.7rem;color:var(--text-l);cursor:pointer;transition:.2s;margin:3px}
.bbtn:hover{border-color:var(--river);color:var(--river)}

/* ═══════════════════════════════════════
   QUIZ ENGINE
   ═══════════════════════════════════════ */
.QZ{display:none;animation:fadeUp .4s}
.QZ.on{display:block}

.qH{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,248,239,.84));border-radius:22px;padding:16px 20px;margin-bottom:12px;box-shadow:0 16px 30px rgba(44,36,24,.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border:1px solid rgba(255,255,255,.72)}
.qHL{display:flex;align-items:center;gap:10px}
.bk{width:34px;height:34px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;font-size:.95rem}
.bk:hover{background:var(--river);color:#fff;border-color:var(--river)}
.qHt{font-family:var(--serif);font-size:1.22rem}
.qHR{display:flex;align-items:center;gap:9px}
.qHp{font-size:.78rem;font-weight:600;color:var(--river)}
.qHs{background:linear-gradient(135deg,var(--ok),var(--nature-l));color:#fff;padding:4px 11px;border-radius:20px;font-size:.72rem;font-weight:600}

/* TIMER - always visible */
.timer{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;font-family:var(--sans);position:relative;flex-shrink:0;transition:.2s}
.timer-ring{position:absolute;inset:0}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.timer-bg{stroke:rgba(0,0,0,.06)}
.timer-fg{stroke:var(--ok);transition:stroke .3s}
.timer.warn{animation:pulse .4s infinite}
.timer.warn .timer-fg{stroke:var(--no)}
.timer.warn{color:var(--no)}

.pbar{height:5px;background:rgba(0,0,0,.05);border-radius:3px;overflow:hidden;margin-bottom:4px}
.pbar .pf{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--river),var(--nature));transition:width .5s}

/* Q Card */
.qC{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,249,241,.9));border-radius:24px;padding:24px;margin-top:12px;box-shadow:0 20px 38px rgba(44,36,24,.08);border:1px solid rgba(255,255,255,.76);animation:fadeUp .3s}
.qN{font-size:.65rem;font-weight:700;color:var(--river);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px}
.qTp{display:inline-block;font-size:.58rem;font-weight:600;padding:3px 9px;border-radius:20px;margin-bottom:9px;text-transform:uppercase;letter-spacing:.5px}
.qTp.knowledge{background:rgba(26,107,138,.08);color:var(--river)}
.qTp.analysis{background:rgba(45,122,79,.08);color:var(--nature)}
.qTp.critical{background:rgba(212,162,78,.12);color:#b8860b}
.qTp.vf{background:rgba(142,68,173,.08);color:var(--purple)}
.qTp.fill{background:rgba(230,126,34,.08);color:var(--orange)}
.qTp.order{background:rgba(0,128,128,.08);color:var(--teal)}
.qTp.match{background:rgba(219,112,147,.1);color:#c0507a}
.qTp.writing{background:rgba(52,73,94,.08);color:#34495e}
.qTp.drawing{background:rgba(142,68,173,.06);color:var(--purple)}

.qV{text-align:center;margin:8px 0 12px;padding:14px;border-radius:12px;background:linear-gradient(135deg,rgba(26,107,138,.03),rgba(45,122,79,.03));font-size:2.5rem;animation:pop .5s ease}
.qTx{font-family:var(--reading);font-size:1.16rem;line-height:1.62;margin-bottom:14px}
.qCx{background:rgba(26,107,138,.03);border-left:3px solid var(--river-l);padding:9px 13px;margin-bottom:12px;border-radius:0 8px 8px 0;font-family:var(--reading);font-style:italic;font-size:.95rem;color:var(--text-l);line-height:1.5}

/* Hint */
.hb{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1px dashed var(--gold);background:rgba(212,162,78,.05);color:var(--gold);font-size:.7rem;font-weight:600;cursor:pointer;margin-bottom:10px;transition:.2s;font-family:var(--sans)}
.hb:hover{background:rgba(212,162,78,.12)}
.ht{display:none;padding:8px 12px;margin-bottom:10px;background:rgba(212,162,78,.05);border-radius:10px;font-size:.8rem;color:var(--text-l);border-left:3px solid var(--gold);animation:fadeUp .3s}
.ht.sh{display:block}

/* ═══ QCM ═══ */
.os{display:flex;flex-direction:column;gap:7px}
.op{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-radius:12px;border:2px solid rgba(0,0,0,.06);cursor:pointer;transition:.25s;background:#fff;position:relative}
.op:hover:not(.D){border-color:var(--river-l);background:rgba(26,107,138,.02);transform:translateX(3px)}
.op .oL{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;background:rgba(0,0,0,.04);color:var(--text-l);transition:.25s}
.op:hover:not(.D) .oL{background:var(--river);color:#fff}
.op .oT{font-size:.86rem;line-height:1.5;padding-top:2px}
.op.ok{border-color:var(--ok);background:rgba(39,174,96,.05);animation:pop .35s}
.op.ok .oL{background:var(--ok);color:#fff}
.op.ok::after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--ok);font-weight:900}
.op.no{border-color:var(--no);background:rgba(231,76,60,.03);animation:shake .4s}
.op.no .oL{background:var(--no);color:#fff}
.op.no::after{content:'✗';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--no);font-weight:900}
.op.D{cursor:default;opacity:.65}.op.ok.D{opacity:1}

/* ═══ VF ═══ */
.vfs{display:flex;gap:12px;justify-content:center;margin:8px 0}
.vf{flex:1;max-width:190px;padding:16px;border-radius:14px;border:3px solid rgba(0,0,0,.06);background:#fff;font-family:var(--sans);font-weight:700;font-size:1.05rem;cursor:pointer;transition:.25s;text-align:center}
.vf:hover:not(.D){transform:scale(1.03)}
.vf.V:hover:not(.D){border-color:var(--ok);color:var(--ok)}
.vf.F:hover:not(.D){border-color:var(--no);color:var(--no)}
.vf.ok{border-color:var(--ok);background:rgba(39,174,96,.06);color:var(--ok)}
.vf.no{border-color:var(--no);background:rgba(231,76,60,.05);color:var(--no)}
.vf.D{cursor:default;opacity:.55}.vf.ok.D{opacity:1}

/* ═══ FILL ═══ */
.fsen{font-family:var(--reading);font-size:1.05rem;line-height:2;margin:8px 0}
.fbl{display:inline-block;min-width:110px;border-bottom:3px dashed var(--river);padding:2px 8px;margin:0 3px;text-align:center;cursor:pointer;transition:.25s;font-weight:600;color:var(--river);border-radius:4px}
.fbl.fd{border-bottom-style:solid;background:rgba(26,107,138,.05)}
.fbl.bok{border-color:var(--ok);color:var(--ok);background:rgba(39,174,96,.05)}
.fbl.bno{border-color:var(--no);color:var(--no);background:rgba(231,76,60,.04)}
.fbl.act{box-shadow:0 0 0 3px rgba(26,107,138,.2)}
.fch{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0;justify-content:center}
.fc{padding:7px 14px;border-radius:20px;background:rgba(26,107,138,.05);border:2px solid rgba(26,107,138,.1);cursor:pointer;font-size:.82rem;font-weight:600;color:var(--river);transition:.2s}
.fc:hover:not(.u){background:var(--river);color:#fff}
.fc.u{opacity:.25;cursor:default}

/* ═══ MATCH ═══ */
.mC{display:flex;gap:16px;margin:8px 0;flex-wrap:wrap;justify-content:center}
.mCo{flex:1;min-width:170px;display:flex;flex-direction:column;gap:7px}
.mI{padding:9px 13px;border-radius:10px;border:2px solid rgba(0,0,0,.06);background:#fff;cursor:pointer;transition:.25s;font-size:.82rem;text-align:center;font-weight:500}
.mI:hover:not(.md){border-color:var(--river);background:rgba(26,107,138,.02)}
.mI.sel{border-color:var(--river);background:rgba(26,107,138,.06);box-shadow:0 0 0 3px rgba(26,107,138,.12)}
.mI.md{opacity:.45;cursor:default;border-style:dashed}
.mI.mok{border-color:var(--ok);background:rgba(39,174,96,.05);opacity:1}
.mI.mno{border-color:var(--no);background:rgba(231,76,60,.03);opacity:1}
.mPs{margin:8px 0;display:flex;flex-direction:column;gap:5px}
.mP{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:8px;background:rgba(26,107,138,.03);font-size:.78rem}
.mP .ar{color:var(--river);font-weight:700}

/* ═══ ORDER ═══ */
.oL2{list-style:none;margin:8px 0}
.oI{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:5px 0;border-radius:12px;background:#fff;border:2px solid rgba(0,0,0,.06);transition:.2s;user-select:none}
.oI .oH{color:var(--text-l);font-size:1rem;flex-shrink:0}
.oI .oNm{width:26px;height:26px;border-radius:50%;background:var(--river);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
.oI .oTx{font-size:.85rem;line-height:1.4;flex:1}
.oI.ook{border-color:var(--ok);background:rgba(39,174,96,.03)}
.oI.ono{border-color:var(--no);background:rgba(231,76,60,.02)}
.oAr{display:flex;gap:5px;margin-left:auto;flex-shrink:0}
.oAr button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer;font-size:.75rem;transition:.2s;display:flex;align-items:center;justify-content:center}
.oAr button:hover{background:var(--river);color:#fff;border-color:var(--river)}

/* ═══ WRITING ═══ */
.wA{width:100%;min-height:110px;padding:13px;border-radius:12px;border:2px solid rgba(0,0,0,.06);font-family:var(--reading);font-size:1rem;line-height:1.7;resize:vertical;transition:.25s;outline:none;background:#fff}
.wA:focus{border-color:var(--river);box-shadow:0 0 0 3px rgba(26,107,138,.08)}
.wG{font-size:.76rem;color:var(--text-l);margin:5px 0 8px;line-height:1.5}
.wCr{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.wCi{padding:4px 11px;border-radius:20px;font-size:.67rem;font-weight:600;background:rgba(0,0,0,.04)}

/* ═══ DRAWING ═══ */
.dC{margin:8px 0;text-align:center}
.dCv{border:2px solid rgba(0,0,0,.08);border-radius:12px;cursor:crosshair;background:#fff;touch-action:none;max-width:100%}
.dTs{display:flex;gap:7px;justify-content:center;margin:8px 0;flex-wrap:wrap}
.dT{width:34px;height:34px;border-radius:10px;border:2px solid rgba(0,0,0,.06);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;font-size:.85rem}
.dT:hover,.dT.on{border-color:var(--river);background:rgba(26,107,138,.05)}
.dCl{width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer;transition:.2s}
.dCl:hover,.dCl.on{box-shadow:0 0 0 3px var(--river)}

/* ═══ EXPLANATION ═══ */
.ex{margin-top:12px;padding:13px 15px;border-radius:12px;display:none;animation:fadeUp .3s;font-size:.84rem;line-height:1.7}
.ex.sh{display:block}
.ex.eok{background:rgba(39,174,96,.05);border:1px solid rgba(39,174,96,.12)}
.ex.eno{background:rgba(231,76,60,.04);border:1px solid rgba(231,76,60,.1)}
.ex .ei{font-size:1rem;margin-right:4px}
.funfact{margin-top:7px;padding:8px 12px;border-radius:10px;background:rgba(142,68,173,.04);border:1px solid rgba(142,68,173,.08);font-size:.75rem;color:var(--text-l);display:none;animation:fadeUp .3s}
.funfact.sh{display:block}.funfact strong{color:var(--purple)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:12px;border:none;font-family:var(--sans);font-weight:700;font-size:.82rem;cursor:pointer;transition:.25s}
.btn1{background:linear-gradient(135deg,var(--river),var(--river-d));color:#fff;box-shadow:0 3px 12px rgba(26,107,138,.2)}
.btn1:hover{transform:translateY(-2px);box-shadow:0 5px 18px rgba(26,107,138,.3)}
.btn2{background:#fff;color:var(--text);border:2px solid rgba(0,0,0,.08)}
.btn2:hover{border-color:var(--river);color:var(--river)}
.btn:disabled{opacity:.35;cursor:default;transform:none!important}
.bR{display:flex;gap:9px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap}

/* Results */
.res{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,249,241,.9));border-radius:24px;padding:30px;text-align:center;box-shadow:0 20px 36px rgba(44,36,24,.1);animation:fadeUp .5s;border:1px solid rgba(255,255,255,.76)}
.res .trp{font-size:3rem;margin-bottom:8px}
.res h2{font-family:var(--serif);font-size:1.56rem;margin-bottom:3px}
.res .rsc{font-size:2.5rem;font-weight:900;margin:8px 0;font-family:var(--serif)}
.rsc.exc{color:var(--ok)}.rsc.gd{color:var(--river)}.rsc.md{color:var(--gold)}.rsc.wk{color:var(--no)}
.res .rmsg{font-size:.88rem;color:var(--text-l);margin-bottom:16px;line-height:1.6}
.rsts{display:flex;justify-content:center;gap:16px;margin:12px 0;flex-wrap:wrap}
.rsts .ri{text-align:center}
.rsts .rv{font-size:1.2rem;font-weight:800;font-family:var(--serif)}
.rsts .rl{font-size:.57rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-l)}
.rvw{margin-top:16px;text-align:left}
.rvi{padding:10px;margin:5px 0;border-radius:10px;border-left:4px solid;font-size:.8rem;line-height:1.5}
.rvi.rvok{border-color:var(--ok);background:rgba(39,174,96,.03)}
.rvi.rvno{border-color:var(--no);background:rgba(231,76,60,.02)}
.rvi .rvq{font-weight:600;margin-bottom:2px}
.rvi .rva{font-size:.75rem;color:var(--text-l)}

.quiz-footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;max-width:860px;margin:0 auto;padding:16px 18px 10px;color:rgba(88,78,67,.84);font-size:.78rem;letter-spacing:.035em;line-height:1.7;text-align:center;text-wrap:balance}
.quiz-footer::before{content:"";flex:0 0 68px;height:1px;margin:0 auto 8px;background:linear-gradient(90deg,rgba(13,97,125,0),rgba(13,97,125,.4),rgba(13,97,125,0))}
.quiz-footer .footer-book{font-family:var(--serif);font-size:.98rem;font-weight:700;letter-spacing:.01em;color:var(--text)}
.quiz-footer .footer-signature{font-family:var(--reading);font-size:.8rem;color:rgba(67,59,50,.88)}
.quiz-footer .footer-divider{color:rgba(13,97,125,.44);font-size:.74rem}
.quiz-footer a{color:var(--river);font-weight:700;text-decoration:none}
.quiz-footer a:hover{text-decoration:underline}

@media(min-width:901px) and (max-height:860px){
  .C{padding:18px 22px 16px}
  .quiz-nav{top:10px;margin-bottom:16px;padding:13px 18px}
  #P1{padding:0 0 8px}
  .welcome-shell{width:min(100%,1066px);grid-template-columns:minmax(0,1.7fr) minmax(304px,344px);gap:18px}
  .welcome-stage{min-height:446px;padding:20px 20px 18px;grid-template-columns:minmax(222px,262px) minmax(0,1fr);column-gap:18px;row-gap:14px;border-radius:34px}
  #P1 h1{font-size:clamp(2.35rem,3.9vw,3.5rem)}
  .welcome-kicker,.entry-kicker{margin-bottom:9px}
  #P1 .sub{font-size:.98rem}
  .welcome-lead{margin-top:8px;font-size:.9rem;line-height:1.58;max-width:34ch}
  .welcome-cover-card{width:min(100%,248px)}
  .welcome-info{gap:12px}
  .welcome-badge{padding:8px 11px;font-size:.69rem}
  .welcome-notes{gap:10px}
  .welcome-note{padding:11px 13px 12px}
  .welcome-note strong{font-size:.94rem}
  #P1 .wbox{min-height:446px;padding:20px 20px 18px;border-radius:34px}
  #P1 .wbox h2{font-size:2.18rem;margin:11px 0 8px}
  .entry-text{margin-bottom:14px;font-size:.88rem}
  #P1 .wbox label{margin-bottom:7px;font-size:.84rem}
  #P1 .wbox input{padding:14px 15px;font-size:1rem;margin-bottom:13px}
  .gobtn{padding:14px 15px;font-size:1rem}
  .quick-actions{margin-top:12px}
  .qaction{padding:10px 16px;font-size:.8rem}
  .quiz-footer{padding-top:12px;font-size:.76rem}
}

@media(max-width:900px){
  .quiz-nav{width:100%}
  #P1{min-height:auto}
  .welcome-shell{grid-template-columns:1fr}
  .welcome-stage{display:block;min-height:auto;padding:22px}
  .welcome-title-row{display:grid;grid-template-columns:auto 1fr;gap:12px}
  #P1 .logo{display:grid;width:54px;height:54px;font-size:1.45rem;border-radius:18px}
  .welcome-scene{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:14px;align-items:start;margin-top:14px}
  .welcome-cover-wrap{display:flex;justify-content:center;align-items:flex-start;padding-top:0;padding-right:0}
  .welcome-cover-card{width:100%;max-width:220px;aspect-ratio:auto;transform:rotate(-2deg)}
  .welcome-cover-card img{height:auto;object-fit:contain}
  .welcome-info{display:grid;gap:10px}
  .welcome-notes{grid-template-columns:1fr}
  #P1 .wbox{min-height:auto}
}

@media(max-width:600px){
  .quiz-nav{top:10px;justify-content:flex-start;padding:10px 12px}
  .welcome-title-row{grid-template-columns:1fr;gap:14px}
  #P1 .logo{width:50px;height:50px;font-size:1.3rem;border-radius:16px}
  #P1 h1{font-size:clamp(2rem,9vw,3.1rem);max-width:none}
  .welcome-lead{font-size:.92rem;line-height:1.66}
  .welcome-scene{grid-template-columns:1fr}
  .welcome-stage,#P1 .wbox{padding:20px;border-radius:26px}
  #P1 .wbox h2{font-size:1.9rem}
  .entry-links,.quick-actions{justify-content:center}
  .entry-footnote{text-align:center}
  .dash{grid-template-columns:repeat(2,1fr)}.cats{grid-template-columns:1fr}
  .qH{flex-direction:column;align-items:flex-start}.qC{padding:16px}
  .hero{padding:28px 12px 18px}.strk{top:auto;bottom:68px;right:10px;font-size:.8rem}
  .mC{flex-direction:column}.vfs{flex-direction:row}.lvls{grid-template-columns:1fr 1fr}
  .timer{width:44px;height:44px;font-size:.95rem}
  .prev-players{padding:12px}
  .prev-box{padding:16px;border-radius:24px}
  .prev-head{align-items:flex-start}
}