/* Local fonts – no Google CDN, DSGVO-konform */
@font-face{font-family:'Syne';font-weight:700;font-style:normal;font-display:swap;src:url('/assets/fonts/syne-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Syne';font-weight:800;font-style:normal;font-display:swap;src:url('/assets/fonts/syne-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:600;font-style:normal;font-display:swap;src:url('/assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2')}

:root{--bg:#0A0A10;--s1:#13131C;--s2:#1C1C2A;--bd:#2D2D40;--tx:#F0F0F5;--mu:#9CA3AF;--ac:#F5C842;--ac-fill:#F5C842;--ad:rgba(245,200,66,.13);--ok:#22C55E;--er:#EF4444;--or:#F97316;--r:14px;--rs:10px;--fd:'Syne',system-ui,sans-serif;--fb:'DM Sans',system-ui,sans-serif;--fbase:1.05rem;--flg:1.15rem;--fsm:0.9rem;--fxs:0.82rem;--scrim-rgb:10,10,16;--pill-tint:rgba(255,255,255,.06);--pill-border:rgba(255,255,255,.13)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);font-size:var(--fbase);line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.75rem;border-bottom:1px solid var(--bd);position:sticky;top:0;background:rgba(10,10,16,.95);backdrop-filter:blur(10px);z-index:100;gap:1rem;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.nav-logo{font-family:var(--fd);font-size:1.2rem;font-weight:800;color:var(--ac);text-decoration:none;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{color:var(--mu);font-size:var(--fsm);font-weight:600;padding:.4rem .7rem;border-radius:8px;transition:color .15s,background .15s;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--tx);background:var(--s2);text-decoration:none}
.nav-icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0 !important;font-size:1rem;line-height:1;background:var(--s2);border:1px solid var(--bd);border-radius:8px}
.nav-icon-btn:hover{border-color:var(--ac);background:var(--s2) !important}
.nav-links a:hover{color:var(--tx);text-decoration:none}
.lang-btn{background:var(--s2);border:1px solid var(--bd);color:var(--mu);font-size:.75rem;font-weight:700;padding:.28rem .7rem;border-radius:6px;letter-spacing:.04em;transition:all .2s}
.lang-btn:hover{border-color:var(--ac);color:var(--ac);text-decoration:none}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--ac-fill);color:#000;font-family:var(--fb);font-weight:700;font-size:var(--flg);padding:.85rem 1.75rem;border:none;border-radius:var(--rs);cursor:pointer;text-decoration:none;transition:opacity .15s,transform .15s;line-height:1.2}
.btn-primary:hover{opacity:.9;transform:translateY(-2px);text-decoration:none}
.btn-primary.btn-big{font-size:1.2rem;padding:1rem 2.25rem}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:var(--s2);color:var(--tx);border:1.5px solid var(--bd);font-family:var(--fb);font-weight:600;font-size:var(--fsm);padding:.75rem 1.5rem;border-radius:var(--rs);cursor:pointer;text-decoration:none;transition:border-color .2s}
.btn-secondary:hover{border-color:var(--ac);text-decoration:none}
.btn-ghost{color:var(--mu);font-size:var(--fsm);text-decoration:none}.btn-ghost:hover{color:var(--tx)}
.btn-next{width:100%;background:var(--ac-fill);color:#000;font-family:var(--fb);font-weight:700;font-size:var(--flg);padding:.9rem;border:none;border-radius:var(--rs);cursor:pointer;transition:transform .15s}
.btn-next:hover{transform:translateY(-1px)}
.home{max-width:920px;margin:0 auto;padding:2rem 1.75rem 5rem;flex:1}
.hero{text-align:center;padding:4rem 1rem 0}
.hero-eyebrow{display:inline-block;background:var(--ad);color:var(--ac);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .95rem;border-radius:30px;margin-bottom:1.5rem}
.hero-title{font-family:var(--fd);font-size:clamp(3.2rem,8vw,5.5rem);font-weight:800;line-height:1.05;margin-bottom:.9rem}
.hero-title .accent{color:var(--ac)}
.hero-sub{color:var(--mu);font-size:clamp(1rem,2.5vw,1.2rem);margin-bottom:0;line-height:1.6}
.start-card{max-width:680px;margin:2.5rem auto 3rem;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:1.75rem 1.75rem 1.5rem}
.topic-form{max-width:580px;margin:0 auto}
.topic-input-wrap{display:flex;gap:.5rem;background:var(--s2);border:2px solid var(--bd);border-radius:var(--r);padding:.4rem;margin-top:1.5rem;transition:border-color .2s}
.topic-input-wrap:focus-within{border-color:var(--ac)}
.topic-input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);font-family:var(--fb);font-size:var(--flg);padding:.55rem .85rem}
.topic-input::placeholder{color:var(--mu)}
.mode-label{font-size:.82rem;font-weight:700;color:var(--mu);text-align:center;margin:0 0 .65rem}
.mode-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.mode-btn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;background:var(--s2);border:1px solid var(--bd);color:var(--mu);font-family:var(--fb);border-radius:var(--rs);padding:.85rem .7rem;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.mode-btn:hover:not(.active){border-color:rgba(245,200,66,.45);background:rgba(245,200,66,.06);transform:translateY(-2px)}
.mode-btn.active{border-color:var(--ac);background:var(--ad)}
.mode-btn-name{font-weight:800;font-size:.88rem;color:var(--tx)}
.mode-btn.active .mode-btn-name{color:var(--ac)}
.mode-btn-desc{font-size:.72rem;color:var(--mu);line-height:1.35}
.topic-hint{color:var(--mu);font-size:var(--fxs);text-align:center;margin-top:1.1rem;line-height:1.6}
.rate-ok{color:var(--ac)}.rate-warn{color:var(--er)}
.disclaimer{display:block;text-align:center;color:var(--mu);font-size:.74rem;opacity:.7;margin:.6rem 0 0}
.popular{margin:3.5rem 0 2rem}
.section-title{font-family:var(--fd);font-size:1.35rem;font-weight:700;margin-bottom:1rem}
.cat-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem;padding:1rem 1.1rem;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r)}
.cat-btn{background:transparent;border:2px solid var(--bd);color:var(--mu);font-size:var(--fsm);font-weight:600;padding:.4rem .95rem;border-radius:30px;cursor:pointer;font-family:var(--fb);transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:.35rem}
.cat-btn:hover{border-color:var(--ac);color:var(--ac);background:var(--ad)}
.cat-btn.active{border-color:var(--ac-fill);color:#000;background:var(--ac-fill)}
.cat-count{background:rgba(0,0,0,.2);font-size:.72rem;padding:.05rem .4rem;border-radius:12px;font-weight:700}
.cat-btn:not(.active) .cat-count{background:rgba(255,255,255,.1)}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.85rem}
.topic-card{display:flex;flex-direction:column;gap:.25rem;background:var(--s1);border:2px solid var(--bd);border-radius:var(--r);padding:1rem 1.15rem;text-decoration:none;transition:border-color .2s,transform .15s;position:relative;overflow:hidden;min-height:88px;justify-content:flex-end}
.topic-card:hover{border-color:var(--ac);transform:translateY(-3px);text-decoration:none}
.topic-img{position:absolute;inset:0;background-image:var(--ti);background-size:cover;background-position:center;opacity:.22;transition:opacity .2s}
.topic-card:hover .topic-img{opacity:.32}
.topic-name{color:var(--tx);font-weight:600;font-size:var(--fsm);position:relative}
.topic-plays{color:var(--mu);font-size:var(--fxs);position:relative}
.features{margin:0 0 3rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.feature{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:1.75rem}
.feature-icon{font-size:2.2rem;margin-bottom:.75rem}
.feature h3{font-family:var(--fd);font-size:1.05rem;margin-bottom:.45rem}
.feature p{color:var(--mu);font-size:var(--fsm);line-height:1.6}
.quiz-main{flex:1;padding-bottom:3rem}
.quiz-hero{width:100%;height:140px;background-size:cover;background-position:center;position:relative}
.quiz-hero-grad{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,var(--bg) 100%)}
.progress-wrap{height:4px;background:var(--s2);position:sticky;top:57px;z-index:50}
.progress-bar{height:100%;background:var(--ac-fill);transition:width .4s ease}
.endless-bar{width:100%;animation:ep 2s ease-in-out infinite}
@keyframes ep{0%,100%{opacity:1}50%{opacity:.35}}
.quiz-wrap{max-width:680px;margin:2.5rem auto 0;padding:0 1.5rem}
.quiz-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.quiz-topic{color:var(--ac);font-weight:700;font-size:var(--fsm)}
.quiz-count{color:var(--mu);font-size:var(--fsm);margin-left:auto}
.streak-pill{background:rgba(249,115,22,.12);color:var(--or);font-weight:700;font-size:var(--fsm);padding:.25rem .75rem;border-radius:30px;animation:pulse 1.5s infinite}
.endless-pill{background:var(--ad);color:var(--ac);font-size:var(--fxs);font-weight:700;padding:.25rem .7rem;border-radius:30px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.q-card{background:var(--s1);border:2px solid var(--bd);border-radius:var(--r);padding:1.75rem;margin-bottom:1.25rem;position:relative}
.diff-dot{width:8px;height:8px;border-radius:50%;position:absolute;top:1rem;right:1rem}
.diff-1{background:var(--ok)}.diff-2{background:var(--ac-fill)}.diff-3{background:var(--er)}
.q-text{font-family:var(--fd);font-size:clamp(1.1rem,3vw,1.4rem);font-weight:700;line-height:1.45}
.options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.1rem}
.opt{display:flex;align-items:center;gap:.8rem;background:var(--s1);border:2px solid var(--bd);border-radius:var(--rs);padding:1rem 1.1rem;color:var(--tx);font-family:var(--fb);font-size:var(--fsm);cursor:pointer;text-align:left;transition:border-color .15s,background .15s;line-height:1.45;min-height:58px}
.opt:hover{border-color:var(--ac);background:var(--ad)}.opt:disabled{cursor:default}
.opt-letter{background:var(--s2);color:var(--mu);font-weight:700;font-size:.8rem;width:1.8rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s}
.opt.correct{border-color:var(--ok);background:rgba(34,197,94,.1)}.opt.correct .opt-letter{background:var(--ok);color:#000}
.opt.wrong{border-color:var(--er);background:rgba(239,68,68,.1);animation:shake .4s}.opt.wrong .opt-letter{background:var(--er);color:#fff}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.feedback{background:var(--s1);border:2px solid var(--bd);border-radius:var(--r);padding:1.25rem 1.5rem;margin-bottom:1rem}
.fb-result{font-weight:700;font-size:var(--flg);margin-bottom:.5rem}.fb-result.ok{color:var(--ok)}.fb-result.bad{color:var(--or)}
.fb-exp{color:var(--mu);font-size:var(--fsm);margin-bottom:1rem;font-style:italic;line-height:1.6}
.report-btn{background:transparent;border:none;color:var(--mu);font-size:var(--fxs);cursor:pointer;padding:.2rem 0;margin-bottom:.65rem;text-decoration:underline;font-family:var(--fb);display:block;transition:color .15s}
.report-btn:hover{color:var(--er)}.report-btn:disabled{color:var(--ok);text-decoration:none;cursor:default}
.photo-credit{font-size:var(--fxs);color:var(--mu);text-align:right;margin-top:.5rem}
.result-main{flex:1;padding:0 1.5rem 3rem}
.result-wrap{max-width:540px;margin:2.5rem auto;text-align:center}
.result-title{font-family:var(--fd);font-size:2rem;font-weight:800;margin-bottom:1.75rem}
.score-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:1.25rem;margin-bottom:2rem}
.score-ring{position:relative;width:160px;height:160px}
.score-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring-bg{fill:none;stroke:var(--s2);stroke-width:10}.ring-fill{fill:none;stroke:var(--ac);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s ease}
.ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-score{font-family:var(--fd);font-size:2.8rem;font-weight:800;color:var(--ac);line-height:1}.ring-of{font-size:var(--fsm);color:var(--mu)}
.result-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.pill{background:var(--s1);border:1px solid var(--bd);padding:.35rem 1rem;border-radius:30px;font-size:var(--fsm);font-weight:600}
.pill-fire{color:var(--or);border-color:rgba(249,115,22,.3);background:rgba(249,115,22,.08)}
.pill-gold{color:var(--ac);border-color:rgba(245,200,66,.3);background:var(--ad)}
.save-box{background:var(--s1);border:2px solid var(--bd);border-radius:var(--r);padding:1.35rem;margin-bottom:1.75rem}
.save-box p{font-size:var(--flg);margin-bottom:.85rem}
.name-row{display:flex;gap:.5rem}
.name-row input{flex:1;background:var(--s2);border:2px solid var(--bd);border-radius:var(--rs);color:var(--tx);font-family:var(--fb);font-size:var(--flg);padding:.65rem .95rem;outline:none}
.name-row input:focus{border-color:var(--ac)}
.saved-note{color:var(--ok);margin-bottom:1.75rem;font-size:var(--flg)}
.duel-box{background:var(--s1);border:2px solid var(--bd);border-radius:var(--r);padding:1.35rem;margin-bottom:1.75rem}
.duel-box h3{font-family:var(--fd);font-size:1.1rem;margin-bottom:1rem}
.duel-vs-row{display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:.75rem}
.duel-side{text-align:center}.d-name{font-size:var(--fxs);color:var(--mu);margin-bottom:.3rem}
.d-score{font-family:var(--fd);font-size:2.2rem;font-weight:800}.duel-side.winner .d-score{color:var(--ac)}
.vs{color:var(--mu);font-weight:700;font-size:1.1rem}.duel-verdict{font-weight:700;font-size:var(--flg)}
.result-actions{display:flex;flex-direction:column;gap:.85rem;align-items:center;margin-bottom:1.5rem}
.result-actions>*{width:100%;max-width:360px;justify-content:center}
.duel-link-box{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:1rem 1.25rem;margin-bottom:1rem;text-align:left}
.duel-link-box p{font-size:var(--fsm);color:var(--mu);margin-bottom:.5rem}
.copy-row{display:flex;gap:.5rem}
.copy-row input{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rs);color:var(--mu);padding:.55rem .8rem;font-size:var(--fxs);outline:none}
.copy-row button{background:var(--s2);color:var(--tx);border:1px solid var(--bd);padding:.55rem 1.1rem;border-radius:var(--rs);cursor:pointer;font-size:var(--fxs);font-weight:600;white-space:nowrap}
.lb-link{margin-top:.85rem}.lb-link a{color:var(--mu);font-size:var(--fsm)}.lb-link a:hover{color:var(--ac)}
.compare-row{border-bottom:1px solid var(--bd);padding:.6rem 0}.compare-row:last-child{border:none}
.compare-q{color:var(--tx);font-size:var(--fxs);line-height:1.4;margin-bottom:.3rem}
.compare-answers{display:flex;gap:.75rem;flex-wrap:wrap}
.ca{font-size:var(--fxs);font-weight:600;padding:.2rem .55rem;border-radius:5px}.ca-ok{color:var(--ok);background:rgba(34,197,94,.1)}.ca-bad{color:var(--er);background:rgba(239,68,68,.1)}
.lb-main{flex:1;padding:2.5rem 1.75rem}.lb-wrap{max-width:740px;margin:0 auto}
.page-title{font-family:var(--fd);font-size:2rem;font-weight:800;margin-bottom:1.5rem}
.lb-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.lb-tab{background:var(--s1);border:2px solid var(--bd);color:var(--mu);padding:.55rem 1.2rem;border-radius:30px;cursor:pointer;font-family:var(--fb);font-size:var(--fsm);font-weight:600;transition:all .2s}
.lb-tab.active,.lb-tab:hover{border-color:var(--ac);color:var(--ac);background:var(--ad)}
.lb-empty{color:var(--mu);padding:2.5rem;text-align:center;font-size:var(--flg)}
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{text-align:left;padding:.65rem 1.1rem;color:var(--mu);font-size:var(--fxs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--bd)}
.lb-table td{padding:.85rem 1.1rem;border-bottom:1px solid var(--bd);font-size:var(--fsm)}.lb-table tr:last-child td{border:none}.lb-table tr:hover td{background:var(--s1)}
.lb-table tr.gold td{background:rgba(245,200,66,.05)}.lb-table tr.silver td{background:rgba(192,192,192,.04)}.lb-table tr.bronze td{background:rgba(205,127,50,.04)}
.lb-topic{color:var(--mu);font-size:var(--fxs)}.lb-cta{text-align:center;margin-top:2rem}
.duel-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.duel-wrap{text-align:center;max-width:460px}
.challenge-pill{display:inline-block;background:rgba(249,115,22,.12);color:var(--or);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .95rem;border-radius:30px;margin-bottom:1rem}
.duel-wrap h1{font-family:var(--fd);font-size:2rem;font-weight:800;margin-bottom:1rem}
.ch-topic{color:var(--mu);margin-bottom:.45rem;font-size:var(--flg)}.ch-score{font-size:1.15rem;margin-bottom:.3rem;font-weight:600}
.ch-streak{color:var(--or);font-weight:700;margin-bottom:1.5rem}.ch-cta{color:var(--mu);margin-bottom:1.25rem;font-size:var(--flg)}
.error-page{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.error-box{text-align:center;max-width:400px}
.error-box h1{font-size:4rem;margin-bottom:1rem}.error-box p{color:var(--mu);margin-bottom:1.5rem;font-size:var(--flg)}
.footer{text-align:center;padding:1.5rem;border-top:1px solid var(--bd);color:var(--mu);font-size:var(--fsm);margin-top:auto}
.footer a{color:var(--mu)}.footer a:hover{color:var(--tx)}
@media(max-width:640px){
  .nav{padding:.85rem 1.1rem}
  .nav-logo{font-size:1rem}
  .nav-links{gap:.65rem}
  .hero{padding:3rem .5rem 2rem}
  .hero-title{font-size:2.8rem}
  .topic-input-wrap{flex-direction:column}
  .topic-input{font-size:1rem}
  .mode-btn{font-size:var(--fxs);padding:.38rem .75rem}
  .options{grid-template-columns:1fr}
  .opt{min-height:52px}
  .duel-vs-row{gap:1rem}
  .topic-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .lb-table th,.lb-table td{padding:.6rem .65rem;font-size:var(--fxs)}
  .quiz-wrap{padding:0 1rem}
  .home{padding:1.5rem 1rem 3rem}
}
@media(max-width:380px){
  .hero-title{font-size:2.3rem}
  .name-row{flex-direction:column}
  .name-row input,.name-row .btn-primary{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:  #F5F5F7;
  --s1:  #FFFFFF;
  --s2:  #EBEBEB;
  --bd:  #D1D1D6;
  --tx:  #1C1C1E;
  --mu:  #6B6B70;
  --ac:  #46464C;
  --ac-fill: #F5C842;
  --ad:  rgba(0,0,0,.055);
  --ok:  #1A8A3A;
  --er:  #C0392B;
  --or:  #D4590A;
  --scrim-rgb: 245,245,247;
  --pill-tint: rgba(0,0,0,.05);
  --pill-border: rgba(0,0,0,.12);
}
[data-theme="light"] .nav { background: rgba(245,245,247,.95); border-color: var(--bd); }
[data-theme="light"] .opt { background: #fff; }
[data-theme="light"] .q-card, [data-theme="light"] .feedback { background: #fff; }
[data-theme="light"] .topic-card { background: #fff; }
[data-theme="light"] .bottom-bar { background: rgba(255,255,255,.95); border-color: var(--bd); }
[data-theme="light"] .xp-toast { color: #1C1C1E; }

/* ══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  background: var(--s2); border: 1px solid var(--bd); border-radius: 8px;
  cursor: pointer; font-size: 1rem; padding: .25rem .5rem; transition: all .2s;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--ac); }
[data-theme="light"] .theme-toggle { content: '🌙'; }

/* ══════════════════════════════════════════════════════════════════════════
   USER NAV
   ══════════════════════════════════════════════════════════════════════════ */
.nav-user {
  display: flex; align-items: center; gap: .45rem;
  text-decoration: none !important; color: var(--tx);
}
.nav-user:hover { opacity: .8; }
.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .75rem; color: #000; flex-shrink: 0;
}
.nav-avatar-emoji {
  background: var(--s2); border: 1px solid var(--bd); font-size: 1rem; font-weight: normal;
}
.nav-username { font-size: var(--fsm); font-weight: 600; }
.nav-level {
  background: var(--ad); color: var(--ac); font-size: .7rem;
  font-weight: 700; padding: .15rem .45rem; border-radius: 10px;
}
.nav-links a.nav-login {
  background: var(--ac-fill); color: #000; font-weight: 700; font-size: .8rem;
  padding: .35rem .9rem; border-radius: 8px; text-decoration: none;
}
.nav-links a.nav-login:hover { opacity: .9; text-decoration: none; background: var(--ac-fill); }

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM BAR (account info + XP)
   ══════════════════════════════════════════════════════════════════════════ */
.bottom-bar {
  position:       fixed;
  bottom:         0; left: 0; right: 0;
  height:         64px;
  background:     rgba(10,10,16,.96);
  border-top:     1px solid var(--bd);
  backdrop-filter: blur(12px);
  display:        flex;
  align-items:    center;
  gap:            .85rem;
  padding:        0 1.25rem;
  z-index:        200;
}
.bb-avatar {
  width:           40px; height: 40px; border-radius: 50%;
  display:         flex; align-items: center; justify-content: center;
  font-weight:     800; font-size: 1.1rem; color: #000;
  flex-shrink:     0; text-decoration: none;
  transition:      transform .15s;
}
.bb-avatar:hover { transform: scale(1.08); }
.bb-center { flex: 1; min-width: 0; }
.bb-name {
  font-size:       .82rem; font-weight: 700; color: var(--tx);
  display:         flex; align-items: center; gap: .4rem;
  white-space:     nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom:   .2rem;
}
.bb-streak { font-size: .72rem; color: var(--or); }
.bb-xp-wrap {
  background:    var(--s2); border-radius: 30px; height: 6px;
  overflow:      hidden; margin-bottom: .18rem;
}
.bb-xp-fill {
  height: 100%; border-radius: 30px;
  background: linear-gradient(90deg, var(--ac), var(--or));
  transition: width .8s ease;
}
.bb-xp-label { font-size: .68rem; color: var(--mu); }
.bb-level-badge {
  display:         flex; flex-direction: column; align-items: center;
  background:      var(--ad); border: 1.5px solid var(--ac);
  border-radius:   10px; padding: .25rem .55rem;
  text-decoration: none; transition: transform .15s; flex-shrink: 0;
}
.bb-level-badge:hover { transform: scale(1.05); text-decoration: none; }
.bb-lv-text { font-size: .58rem; color: var(--ac); font-weight: 700; letter-spacing: .05em; line-height: 1; }
.bb-lv-num  { font-family: var(--fd); font-size: 1.1rem; font-weight: 800; color: var(--ac); line-height: 1.1; }

/* Push page content up when bottom bar is visible */
body:has(.bottom-bar) { padding-bottom: 64px; }

/* ══════════════════════════════════════════════════════════════════════════
   XP TOAST
   ══════════════════════════════════════════════════════════════════════════ */
.xp-toast {
  position:      fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background:    var(--ac); color: #000;
  font-weight:   800; font-size: 1rem;
  padding:       .55rem 1.25rem; border-radius: 30px;
  z-index:       300; pointer-events: none;
  animation:     toastUp .4s ease forwards;
  white-space:   nowrap;
}
@keyframes toastUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(12px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Level badge in profile */
.level-badge {
  display: inline-flex; align-items: center;
  background: var(--ad); color: var(--ac);
  font-weight: 700; font-size: .8rem;
  padding: .25rem .75rem; border-radius: 20px;
  border: 1px solid rgba(245,200,66,.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE adjustments for bottom bar
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bb-username { display: none; }
  .nav-username { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DAILY QUIZ BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.daily-banner {
  position:     relative;
  border-radius: var(--r);
  overflow:     hidden;
  border:       2px solid rgba(245,200,66,.4);
  margin-bottom: 2rem;
  min-height:   160px;
  display:      flex;
  align-items:  stretch;
}
.daily-bg {
  position:          absolute; inset: 0;
  background-image:  var(--dimg);
  background-size:   cover;
  background-position: center;
  opacity:           .25;
  filter:            saturate(0.7);
}
.daily-inner {
  position: relative; z-index: 1;
  padding:  1.25rem 1.5rem;
  flex:     1;
  background: linear-gradient(135deg,
    rgba(var(--scrim-rgb),.85) 0%,
    rgba(var(--scrim-rgb),.6) 50%,
    rgba(var(--scrim-rgb),.75) 100%);
}
.daily-top-row {
  display:         flex;
  align-items:     center;
  gap:             .65rem;
  margin-bottom:   .6rem;
  flex-wrap:       wrap;
}
.daily-label-pill {
  background:  rgba(245,200,66,.15);
  color:       var(--ac);
  font-size:   .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding:     .25rem .7rem; border-radius: 20px;
  border:      1px solid rgba(245,200,66,.3);
}
.daily-xp-pill {
  background:  rgba(249,115,22,.15);
  color:       var(--or);
  font-size:   .72rem; font-weight: 700;
  padding:     .25rem .65rem; border-radius: 20px;
  border:      1px solid rgba(249,115,22,.3);
}
.daily-name {
  font-family: var(--fd); font-size: clamp(1.2rem, 3vw, 1.65rem);
  font-weight: 800; color: var(--tx);
  margin-bottom: .2rem; line-height: 1.2;
}
.daily-cat {
  color: var(--mu); font-size: var(--fxs); margin-bottom: .75rem;
}
.daily-meta-row {
  display:     flex; gap: 1rem;
  flex-wrap:   wrap; margin-bottom: 1rem;
}
.daily-meta-item {
  font-size:  var(--fxs); color: var(--mu);
}
.daily-meta-item strong { color: var(--tx); }
.daily-countdown { color: var(--ac); font-weight: 600; }
.daily-cta { align-self: flex-start; }

@media (max-width: 480px) {
  .daily-inner { padding: 1rem; }
  .daily-meta-row { gap: .5rem; }
}

/* ── Daily quiz result box ────────────────────────────────────────────── */
.daily-result-box {
  background:    var(--s1);
  border:        2px solid rgba(245,200,66,.3);
  border-radius: var(--r);
  padding:       1.35rem;
  margin-bottom: 1.75rem;
}
.daily-result-header {
  display:       flex;
  gap:           .65rem;
  flex-wrap:     wrap;
  margin-bottom: 1rem;
}
.daily-result-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:                   .75rem;
}
.daily-stat-card {
  background:    var(--s2);
  border:        1px solid var(--bd);
  border-radius: var(--rs);
  padding:       .85rem .65rem;
  text-align:    center;
}
.daily-stat-card.dsc-highlight {
  border-color:  var(--ac);
  background:    var(--ad);
}
.dsc-icon    { font-size: 1.5rem; margin-bottom: .3rem; }
.dsc-label   { font-size: .7rem; color: var(--mu); margin-bottom: .2rem; }
.dsc-value   { font-weight: 700; font-size: .9rem; line-height: 1.3; word-break: break-word; }
.dsc-sub     { font-size: .72rem; color: var(--mu); margin-top: .15rem; }

/* ── Survival mode ───────────────────────────────────────────────────── */
.survival-meta{row-gap:.55rem}
.survival-lives,.survival-time{background:var(--s1);border:1px solid var(--bd);border-radius:999px;padding:.28rem .65rem;font-size:.82rem;font-weight:700;color:var(--tx)}
.survival-score-row{display:flex;gap:.75rem;flex-wrap:wrap;margin:-.55rem 0 1rem;color:var(--mu);font-size:.84rem}
.survival-score-row strong{color:var(--ac)}
/* ── Joker section (survival mode) ─────────────────────────────────────────────────────── */
.joker-section{margin:0 0 1.1rem}
.joker-title{font-family:var(--fd);font-size:.85rem;font-weight:700;color:var(--mu);letter-spacing:.02em;margin:0 0 .5rem}
.joker-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.joker-btn{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.2rem;
  background:linear-gradient(180deg,var(--s1),var(--s2));
  border:1px solid var(--bd);
  border-radius:var(--rs);
  padding:.7rem .5rem .6rem;
  font-family:var(--fb);
  cursor:pointer;
  transition:border-color .15s,background .15s,opacity .15s,transform .15s;
}
.joker-btn:hover:not(:disabled){border-color:var(--ac);background:linear-gradient(180deg,var(--ad),var(--s1));transform:translateY(-2px)}
.joker-btn:active:not(:disabled){transform:translateY(0)}
.joker-icon{font-size:1.15rem;font-weight:800;color:var(--ac);line-height:1}
.joker-label{font-size:.82rem;font-weight:800;color:var(--tx)}
.joker-desc{font-size:.68rem;color:var(--mu);line-height:1.25}
.joker-btn:disabled{opacity:.4;cursor:default}
.joker-btn.used{opacity:.55;border-color:var(--ok)}
.joker-btn.used .joker-icon,
.joker-btn.used .joker-label{color:var(--mu)}
.joker-btn.used::after{
  content:attr(data-used-label);
  position:absolute;
  top:-9px;
  right:-6px;
  background:var(--ok);
  color:#fff;
  font-size:.6rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:.18rem .4rem;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.opt.joker-hidden{opacity:.18;filter:grayscale(1);pointer-events:none}
.opt.friend-pick{border-color:var(--ac);background:var(--ad)}
.friend-suggestion{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:var(--ad);
  border:1px solid var(--ac);
  border-radius:var(--rs);
  padding:.6rem .85rem;
  margin:0 0 .85rem;
  font-size:.85rem;
}
.friend-suggestion[hidden]{display:none}
.fs-label{color:var(--ac);font-weight:800}
.fs-answer{color:var(--tx);font-weight:700}
@media(max-width:640px){
  .friend-suggestion{padding:.45rem .65rem;font-size:.76rem;gap:.3rem;border-radius:10px}
}

/* ── Friend-help share box (inline, right after using the joker) ───────── */
.friend-help-box{background:var(--s1);border:1px solid var(--bd);border-radius:var(--rs);padding:.85rem 1rem;margin:-.25rem 0 1rem}
.friend-help-box p{color:var(--mu);font-size:.82rem;margin:0 0 .65rem;line-height:1.4}
.fhb-share-row{display:flex;gap:.5rem;margin-bottom:.5rem}
.fhb-share-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  border-radius:999px;
  padding:.55rem .6rem;
  font-family:var(--fb);
  font-size:.84rem;
  font-weight:800;
  text-decoration:none;
  color:#fff;
}
.fhb-whatsapp{background:#25D366}
.fhb-whatsapp:hover{background:#1ebe5a;text-decoration:none}
.fhb-telegram{background:#229ED9}
.fhb-telegram:hover{background:#1c8bbe;text-decoration:none}
.fhb-copy-link{
  width:100%;
  background:transparent;
  border:1px dashed var(--bd);
  color:var(--mu);
  border-radius:var(--rs);
  padding:.45rem .6rem;
  font-family:var(--fb);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.fhb-copy-link:hover{border-color:var(--ac);color:var(--ac)}
@media(max-width:640px){
  .joker-row{grid-template-columns:1fr 1fr}
  .joker-btn:nth-child(3){grid-column:1 / -1}
  .survival-score-row{justify-content:center}
  .topic-mode-links{flex-direction:column}
}

/* ── Quiz safety tools (report / skip question) ─────────────────────────── */
.quiz-tool-row{display:flex;gap:.55rem;flex-wrap:wrap;margin:-.45rem 0 1rem}
.quiz-tool-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--s1);border:1px solid var(--bd);color:var(--mu);border-radius:999px;padding:.45rem .8rem;font-family:var(--fb);font-size:.8rem;font-weight:800;cursor:pointer;transition:border-color .15s,background .15s,color .15s,opacity .15s}
.quiz-tool-btn:hover:not(:disabled){border-color:var(--ac);background:var(--ad);color:var(--ac)}
.quiz-tool-btn:disabled{opacity:.55;cursor:default}
.quiz-tool-primary{color:var(--tx)}

/* ── Topic cards: image/title opens the standard quiz, the footer row lets
   you pick Endless or Survival for that exact topic explicitly — no hidden
   page-level state involved. ───────────────────────────────────────────── */
.topic-grid{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1rem;
}
.topic-card.topic-card-mode{
  display:flex;
  flex-direction:column;
  min-height:182px;
  padding:0;
  justify-content:flex-end;
  border:1px solid var(--bd);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}
.topic-card.topic-card-mode::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--scrim-rgb),.1) 0%,rgba(var(--scrim-rgb),.4) 46%,rgba(var(--scrim-rgb),.9) 100%);
}
.topic-card.topic-card-mode .topic-img{opacity:.4;z-index:0}
.topic-card.topic-card-mode:hover .topic-img,
.topic-card.topic-card-mode:focus-within .topic-img{opacity:.5}
.topic-card-main{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.3rem;
  min-height:120px;
  padding:1rem 1rem .75rem;
  color:var(--tx);
  text-decoration:none;
}
.topic-card-main:hover,
.topic-card-main:focus-visible{text-decoration:none;outline:none}
.topic-card-mode .topic-name{
  font-size:1rem;
  line-height:1.25;
  font-weight:800;
  color:var(--tx);
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.topic-card-mode .topic-plays{
  font-size:.8rem;
  line-height:1.3;
  color:var(--mu);
}
.topic-card-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.4rem;
  padding:.65rem .75rem .75rem;
  position:relative;
  z-index:2;
  background:rgba(var(--scrim-rgb),.78);
  border-top:1px solid var(--bd);
  backdrop-filter:blur(10px);
}
.mini-mode-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  background:var(--pill-tint);
  border:1px solid var(--pill-border);
  border-radius:10px;
  color:var(--tx);
  font-size:.72rem;
  font-weight:800;
  line-height:1.2;
  padding:.4rem .2rem;
  text-decoration:none;
  text-align:center;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
}
.mini-mode-btn:hover,
.mini-mode-btn:focus-visible{
  border-color:var(--ac);
  background:var(--ad);
  color:var(--ac);
  text-decoration:none;
  outline:none;
}
@media(max-width:760px){
  .topic-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}
@media(max-width:640px){
  .start-card{padding:1.25rem 1.1rem 1.1rem}
  .mode-toggle{grid-template-columns:1fr}
  .mode-btn{flex-direction:row;align-items:flex-start;text-align:left;gap:.65rem;padding:.75rem .85rem}
  .mode-btn-name{white-space:nowrap;flex:0 0 auto;margin-right:.65rem}
  .mode-btn-desc{flex:1}
  .quiz-tool-row{display:grid;grid-template-columns:1fr}
  .quiz-tool-btn{width:100%}
  .topic-grid{grid-template-columns:1fr}
  .topic-card.topic-card-mode{min-height:168px}
  .mini-mode-btn{font-size:.68rem;padding:.42rem .2rem}
}

/* ── Friend-help landing page (what the friend actually opens) ───────── */
.fh-main{max-width:560px;margin:0 auto;padding:1.5rem 1.1rem 3rem}
.fh-card{
  background:var(--s1);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:1.5rem 1.4rem;
  text-align:center;
}
.fh-card-empty{padding:2.5rem 1.4rem}
.fh-eyebrow{
  display:inline-flex;
  background:var(--ad);
  color:var(--ac);
  font-size:.78rem;
  font-weight:800;
  padding:.3rem .75rem;
  border-radius:999px;
  margin:0 0 .75rem;
}
.fh-headline{font-family:var(--fd);font-size:1.5rem;line-height:1.25;margin:0 0 .5rem}
.fh-sub{color:var(--mu);font-size:.9rem;line-height:1.45;margin:0 0 1.1rem}
.fh-img{width:100%;height:auto;border-radius:var(--rs);border:1px solid var(--bd);margin:0 0 1.2rem;display:block}
.fh-pick-hint{font-size:.82rem;font-weight:700;color:var(--mu);margin:0 0 .6rem;text-align:left}
.fh-options{display:flex;flex-direction:column;gap:.55rem;margin:0 0 1rem}
.fh-opt{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-align:left;
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:var(--rs);
  padding:.7rem .85rem;
  font-family:var(--fb);
  font-size:.92rem;
  color:var(--tx);
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.fh-opt:hover{border-color:var(--ac);background:var(--ad)}
.fh-opt.picked{border-color:var(--ac);background:var(--ad)}
.fh-opt-letter{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bd);
  border-radius:50%;
  font-weight:800;
  font-size:.82rem;
  color:var(--ac);
}
.fh-opt.picked .fh-opt-letter{background:var(--ac-fill);color:#000}
.fh-opt.correct{border-color:var(--ok);background:rgba(34,197,94,.1)}
.fh-opt.correct .fh-opt-letter{background:var(--ok);color:#fff}
.fh-opt.incorrect{border-color:var(--er);background:rgba(239,68,68,.1)}
.fh-opt.incorrect .fh-opt-letter{background:var(--er);color:#fff}
.fh-opt-text{flex:1}
.fh-reply{
  background:var(--s2);
  border:1px solid var(--ac);
  border-radius:var(--rs);
  padding:1rem;
  text-align:center;
  margin:0 0 .5rem;
}
.fh-sent-title{font-weight:800;color:var(--ac);margin:0 0 .3rem;font-size:1rem}
.fh-sent-sub{color:var(--mu);font-size:.82rem;margin:0 0 .75rem;line-height:1.4}
.fh-result{font-size:.88rem;font-weight:700;margin:0 0 .75rem;padding:.5rem .7rem;border-radius:10px}
.fh-result[hidden]{display:none}
.fh-result.is-right{background:rgba(34,197,94,.12);color:var(--ok)}
.fh-result.is-wrong{background:rgba(239,68,68,.12);color:var(--er)}
.fh-player-status{
  font-size:.85rem;
  font-weight:700;
  text-align:center;
  margin:.85rem 0 0;
  padding:.65rem .8rem;
  border-radius:10px;
  background:var(--s2);
  color:var(--mu);
}
.fh-player-status[hidden]{display:none}
.fh-player-status.is-right{background:rgba(34,197,94,.12);color:var(--ok)}
.fh-player-status.is-wrong{background:rgba(239,68,68,.12);color:var(--er)}
.fh-manual-link{
  background:transparent;
  border:none;
  color:var(--mu);
  font-size:.78rem;
  font-family:var(--fb);
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}
.fh-manual-link:hover{color:var(--ac)}
.fh-cta{
  margin-top:1.25rem;
  text-align:center;
  padding:1.2rem 1.1rem;
  border:1px dashed var(--bd);
  border-radius:var(--r);
}
.fh-cta-title{font-weight:800;margin:0 0 .25rem}
.fh-cta-sub{color:var(--mu);font-size:.85rem;margin:0 0 .85rem}
.fh-more{margin-top:1.25rem}
.fh-more-title{font-size:.85rem;font-weight:700;color:var(--mu);margin:0 0 .6rem;text-align:center}
.fh-more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.fh-more-card{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:84px;
  padding:.7rem .8rem;
  border:1px solid var(--bd);
  border-radius:var(--rs);
  background:linear-gradient(180deg,var(--s2),var(--s1));
  overflow:hidden;
  text-decoration:none;
  transition:border-color .15s,transform .15s;
}
.fh-more-card:hover{border-color:var(--ac);transform:translateY(-2px);text-decoration:none}
.fh-more-img{
  position:absolute;
  inset:0;
  background-image:var(--ti);
  background-size:cover;
  background-position:center;
  opacity:.32;
}
.fh-more-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(var(--scrim-rgb),.1),rgba(var(--scrim-rgb),.85));
}
.fh-more-name{position:relative;z-index:1;color:var(--tx);font-weight:800;font-size:.85rem;text-shadow:0 1px 6px rgba(0,0,0,.4)}
@media(max-width:480px){
  .fh-card{padding:1.2rem 1rem}
  .fh-headline{font-size:1.3rem}
  .fh-more-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .fh-more-card{min-height:72px;padding:.55rem .65rem}
}

/* ── Personality quiz (℗ quiz_personality.php) ───────────────────────── */
.pq-main{max-width:600px;margin:0 auto;padding:1rem 1.1rem 4rem}
.pq-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.pq-back{color:var(--mu);font-size:.82rem;font-weight:700;text-decoration:none}
.pq-back:hover{color:var(--tx)}
.pq-progress-label{color:var(--mu);font-size:.8rem;font-weight:700}
.pq-progress-track{height:5px;background:var(--bd);border-radius:3px;overflow:hidden;margin-bottom:1.5rem}
.pq-progress-fill{height:100%;background:var(--ac-fill);border-radius:3px;transition:width .35s ease}
.pq-card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:1.5rem 1.4rem;transition:opacity .2s,transform .2s}
.pq-card-out{opacity:0;transform:translateX(-8px)}
.pq-topic-chip{display:inline-block;background:var(--ad);color:var(--ac);font-size:.74rem;font-weight:800;padding:.28rem .7rem;border-radius:999px;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}
.pq-question{font-family:var(--fd);font-size:1.3rem;font-weight:800;line-height:1.3;margin-bottom:1.25rem}
.pq-options{display:flex;flex-direction:column;gap:.6rem}
.pq-opt{
  display:block;
  width:100%;
  text-align:left;
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:var(--rs);
  padding:.85rem 1rem;
  font-family:var(--fb);
  font-size:.95rem;
  color:var(--tx);
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s;
  line-height:1.4;
}
.pq-opt:hover:not(:disabled){border-color:var(--ac);background:var(--ad);transform:translateX(3px)}
.pq-opt:disabled{cursor:default;opacity:.55}
.pq-opt.chosen{border-color:var(--ac-fill);background:var(--ad);opacity:1;font-weight:700}
.pq-result{text-align:center;padding:1.5rem 0}
.pq-result[hidden]{display:none}
.pq-result-eyebrow{font-size:.78rem;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem}
.pq-result-title{font-family:var(--fd);font-size:2rem;font-weight:800;color:var(--ac-fill);line-height:1.15;margin-bottom:.85rem}
.pq-result-desc{color:var(--mu);font-size:.95rem;line-height:1.6;margin-bottom:1.5rem;max-width:440px;margin-left:auto;margin-right:auto}
.pq-result-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
@media(max-width:480px){
  .pq-card{padding:1.2rem 1rem}
  .pq-question{font-size:1.1rem}
  .pq-result-title{font-size:1.6rem}
}

/* ── Personality quiz landing page (/personality.php + /personality/{slug}) ── */
.pl-main{max-width:860px;margin:0 auto;padding:0 1.75rem 5rem;flex:1}
.pl-hero{text-align:center;padding:4rem 1rem 2.5rem}
.pl-eyebrow{display:inline-block;background:rgba(168,85,247,.12);color:#a855f7;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.38rem .9rem;border-radius:30px;margin-bottom:1.1rem}
.pl-title{font-family:var(--fd);font-size:clamp(2.2rem,6vw,4rem);font-weight:800;line-height:1.1;margin-bottom:.85rem}
.pl-sub{color:var(--mu);font-size:1rem;line-height:1.6;max-width:560px;margin:0 auto 1.75rem}
.pl-section-title{font-family:var(--fd);font-size:1.1rem;font-weight:800;margin:0 0 1rem}
.pl-start-form{display:flex;justify-content:center;margin-top:1.5rem}
.pl-cta{min-width:160px;justify-content:center}
.pl-popular{margin-bottom:3rem}
.pl-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.pl-topic-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:160px;
  border-radius:var(--r);
  border:1px solid var(--bd);
  overflow:hidden;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  text-decoration:none;
  transition:border-color .15s,transform .15s;
}
.pl-topic-card:hover{border-color:#a855f7;transform:translateY(-3px);text-decoration:none}
.pl-card-img{
  position:absolute;inset:0;
  background-image:var(--ti);background-size:cover;background-position:center;
  opacity:.32;
}
.pl-topic-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--scrim-rgb),.1),rgba(var(--scrim-rgb),.85));
}
.pl-card-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:.25rem;
  padding:.85rem .9rem;
}
.pl-card-name{font-weight:800;font-size:.92rem;color:var(--tx)}
.pl-card-meta{font-size:.74rem;color:var(--mu)}
.pl-custom{margin-bottom:2.5rem;max-width:660px;margin-left:auto;margin-right:auto}
.pl-custom .topic-input-wrap{margin-top:.65rem}
.pl-back-link{text-align:center;font-size:.82rem;margin-top:2rem}
.pl-back-link a{color:var(--mu)}
.pl-back-link a:hover{color:var(--tx)}
/* Individual topic page (SEO) */
.pl-results-preview{margin:2.5rem 0}
.pl-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem;margin-top:.85rem}
.pl-result-card{
  background:var(--s1);border:1px solid var(--bd);border-radius:var(--rs);
  padding:1rem 1rem .9rem;
}
.pl-result-letter{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:rgba(168,85,247,.12);color:#a855f7;
  border-radius:50%;font-size:.75rem;font-weight:800;
  margin-bottom:.5rem;
}
.pl-result-name{display:block;font-size:.9rem;font-weight:800;margin-bottom:.35rem}
.pl-result-desc{font-size:.78rem;color:var(--mu);line-height:1.45;margin:0}
/* Homepage teaser link to personality */
.pl-teaser{
  text-align:center;margin-top:2rem;
  padding:.75rem;
  border:1px dashed var(--bd);border-radius:var(--rs);
}
.pl-teaser a{font-size:.85rem;color:var(--mu);font-weight:600}
.pl-teaser a:hover{color:#a855f7;text-decoration:none}
@media(max-width:640px){
  .pl-hero{padding:2.5rem .5rem 1.5rem}
  .pl-topic-grid{grid-template-columns:1fr}
  .pl-results-grid{grid-template-columns:1fr 1fr}
}