:root{--bg:#fbfaf7;--fg:#16151a;--mu:#5d5a66;--ac:#d4380d;--dk:#14121c;--bd:#e2dfd7;--cd:#fff;--r:12px}
@media(prefers-color-scheme:dark){:root{--bg:#14121c;--fg:#f4f2ee;--mu:#b3afbf;--bd:#2f2b3d;--cd:#1d1a29;--ac:#ff7a50}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
img{max-width:100%;height:auto;display:block;background:#2a2638;border-radius:var(--r)}
a{color:inherit}h1,h2,h3{line-height:1.15;font-family:Georgia,serif}h1{font-size:clamp(2rem,7vw,3.4rem);margin:.3em 0}h2{font-size:1.7rem}
:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:9}
.wrap{max-width:1100px;margin:0 auto;padding:16px}main.wrap{max-width:720px}
.hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bd);position:relative;flex-wrap:wrap}
.logo{font:800 1.3rem system-ui;letter-spacing:.12em;text-decoration:none}.logo span{color:var(--ac)}
.mb{background:none;border:1px solid var(--bd);color:inherit;padding:10px 14px;border-radius:8px;min-height:44px}
#nav{display:none;width:100%;flex-direction:column}#nav.open{display:flex}#nav a{padding:12px 0;text-decoration:none;font-weight:600}
@media(min-width:768px){.mb{display:none}#nav{display:flex;flex-direction:row;width:auto;gap:24px}#nav a{padding:0}}
.btn{display:inline-block;background:var(--ac);color:#fff;border:0;padding:14px 22px;border-radius:999px;font:700 1rem system-ui;text-decoration:none;cursor:pointer;min-height:44px}
.btn.alt{background:none;color:var(--fg);border:2px solid var(--fg)}.btn.sm{padding:10px 16px}
.cat{font:700 .75rem system-ui;text-transform:uppercase;letter-spacing:.12em;color:var(--ac);margin:0}
.meta,.sub,.bc{color:var(--mu)}.sub{font-size:1.15rem}.bc{font-size:.85rem}
.hero{width:100%;aspect-ratio:1200/630;object-fit:cover}
.feat{display:grid;gap:16px}@media(min-width:768px){.feat{grid-template-columns:1.4fr 1fr;align-items:center}}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--cd);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}.card img{border-radius:0;aspect-ratio:16/9;object-fit:cover;width:100%}
.cb{padding:14px}.cb h3{margin:.2em 0;font-size:1.2rem}.cb p{margin:.4em 0;font-size:.95rem}.soon{opacity:.6}
.solve{background:var(--dk);color:#fff;text-align:center;padding:40px 0}.flow{letter-spacing:.15em;font-weight:700;color:#ff9a76}
.cats{display:flex;flex-wrap:wrap;gap:10px}.cats a{border:1px solid var(--bd);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600;background:var(--cd)}
.pb{height:6px;background:var(--bd);border-radius:3px;margin:16px 0;position:sticky;top:0}#progress-bar{height:100%;width:0;background:var(--ac);border-radius:3px;transition:width .3s}
.seg{margin:20px 0}.seg.twist,.seg.reveal{border-left:4px solid var(--ac);padding-left:16px}
.q{background:var(--cd);border:1px solid var(--bd);border-radius:var(--r);padding:16px;margin:20px 0}.q legend{font:700 1.2rem Georgia,serif}
.o{display:block;width:100%;text-align:left;background:none;color:inherit;border:2px solid var(--bd);border-radius:10px;padding:14px;margin:8px 0;font:inherit;min-height:48px;cursor:pointer}
.o:hover:not(:disabled){border-color:var(--ac)}.o[aria-pressed=true]{border-color:var(--ac);background:rgba(212,56,13,.1)}.o[aria-pressed=true]::before{content:"✓ "}.o:disabled{cursor:default;opacity:.75}
.fb{margin-top:12px;padding:12px;border-radius:8px;background:rgba(212,56,13,.08)}
.share{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.share button{padding:12px 16px;border:1px solid var(--bd);border-radius:8px;background:var(--cd);color:inherit;min-height:44px;cursor:pointer}
.ft{text-align:center;padding:32px 16px;color:var(--mu);font-size:.9rem;border-top:1px solid var(--bd);margin-top:40px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.tm{float:right;font:700 .9rem system-ui;color:var(--mu)}.o.ok{border-color:#1a8f4c;background:rgba(26,143,76,.12)}.o.no{border-color:var(--ac)}.o.ok::after{content:" ✓ correct"}.o.no::after{content:" ✗ wrong"}
.home .hd{background:#0b1226;color:#fff;border:0}.home .logo span{color:#ffd23f}.home .mb{border-color:#334}
.btn.y{background:#ffd23f;color:#111}.badge{display:inline-block;background:rgba(255,255,255,.12);color:#ffd23f;font:700 .75rem system-ui;letter-spacing:.08em;padding:6px 12px;border-radius:999px}
.hero{position:relative;background:#0b1226;color:#fff;overflow:hidden}.hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right;border-radius:0}
.hc{position:relative;padding:48px 16px 56px;max-width:1100px}.hero h1{margin:.4em 0;font-family:system-ui,sans-serif;font-weight:800}.hero h1 span{color:#ffd23f}.hero p{font-size:1.1rem;max-width:30ch}.mt2{color:#c5c9e0;font-size:.9rem;margin-left:8px}
.home .hero{height:clamp(320px,27vw,360px);min-height:320px;aspect-ratio:auto;isolation:isolate}
.home .hbg{z-index:0;object-position:right center}
.home .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,12,30,.98) 0%,rgba(8,12,30,.9) 43%,rgba(8,12,30,.18) 100%)}
.home .hc{z-index:2;display:flex;align-items:center;min-height:100%;padding:28px 24px;max-width:1100px}
.hero-copy{max-width:650px}
.home .hero .badge{padding:6px 12px;background:rgba(255,210,63,.13);border:1px solid rgba(255,210,63,.45);color:#ffe27a;font-size:.72rem;letter-spacing:.1em}
.home .hero h1{font-size:clamp(2.15rem,4.8vw,3.45rem);line-height:1.02;letter-spacing:-.045em;margin:14px 0 12px;max-width:20ch}
.home .hero h1 span{color:#ffd23f}
.home .hero p{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.45;color:#d6dcf2;max-width:42ch;margin:0 0 18px}
.hero-actions{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.home .hero .btn.y{padding:11px 19px;min-height:46px;box-shadow:0 8px 24px rgba(255,210,63,.2);transition:transform .18s,box-shadow .18s}
.home .hero .btn.y:hover{transform:translateY(-2px);box-shadow:0 11px 28px rgba(255,210,63,.3)}
.hero-meta{color:#d3d9ef;font-size:.9rem;font-weight:600}
.hero-meta i{font-style:normal;color:#ffd23f;padding:0 5px}
@media(max-width:640px){
  .home .hero{height:340px;min-height:340px}
  .home .hbg{object-position:72% center}
  .home .hero::after{background:linear-gradient(90deg,rgba(8,12,30,.98) 0%,rgba(8,12,30,.91) 58%,rgba(8,12,30,.62) 100%)}
  .home .hc{padding:22px 20px}
  .home .hero h1{font-size:clamp(2.05rem,8.5vw,2.7rem);max-width:15ch}
  .home .hero p{font-size:1rem;max-width:34ch}
  .hero-meta{font-size:.84rem}
}
.sh{display:flex;justify-content:space-between;align-items:center;margin:24px 0 12px}.sh h2{margin:0;font-family:system-ui,sans-serif}.sh a{font-size:.9rem;font-weight:600}
.tg{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tc{display:block;background:var(--cd);border-radius:14px;overflow:hidden;text-decoration:none;box-shadow:0 2px 12px rgba(0,0,0,.08);transition:transform .15s}.tc:hover{transform:translateY(-3px)}
.im{display:block;position:relative}.im img{border-radius:0;aspect-ratio:16/9;object-fit:cover;width:100%}
.chip{position:absolute;left:10px;bottom:10px;background:#5b3df5;color:#fff;font:700 .7rem system-ui;padding:4px 10px;border-radius:6px;text-transform:uppercase}
.c-common{background:#e8590c}.c-observation{background:#0a8aa8}.c-riddles{background:#7b3fe4}.c-mystery{background:#6a1b2b}.c-twisted{background:#c2185b}.c-strange{background:#2e7d32}
.tb{display:block;padding:12px 14px}.tb strong{display:block;font:700 1rem/1.3 system-ui}.mt{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--mu);font-size:.85rem}
.ar{width:32px;height:32px;border-radius:50%;background:#14121c;color:#fff;display:grid;place-items:center}
.band{background:rgba(120,130,255,.08);margin:28px 0;padding:8px 0 24px}.cg{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.ct{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 8px;border-radius:12px;text-decoration:none;text-align:center;color:#222}.ct span{font-size:1.8rem}.ct small{opacity:.65}
.k-a{background:#ffe3e0}.k-b{background:#e3e7ff}.k-c{background:#e0f5ea}.k-d{background:#ece0ff}.k-e{background:#fff1cf}
.ban{display:grid;background:#0b0a12;color:#fff;border-radius:16px;overflow:hidden}.ban img{border-radius:0;height:100%;object-fit:cover;min-height:160px}.ban div{padding:24px}.ban h2{margin:.4em 0;font-family:system-ui,sans-serif}
@media(min-width:768px){.ban{grid-template-columns:1fr 1fr}.ban div{order:-1}}
.gq{background:linear-gradient(160deg,#0a1850,#14307f 60%,#0c2a5c);color:#fff;border:0;border-radius:20px;padding:20px;position:relative}
.gh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.gb{background:#ffd23f;color:#0f1432;font:800 .8rem system-ui;letter-spacing:.06em;padding:8px 14px;border-radius:999px}.gi{font-size:2rem;margin-left:auto}.gq .tm{margin-left:auto;color:#b9c6f5}.gi+.tm{margin-left:0}
.gt{font:800 clamp(1.4rem,6vw,2.1rem) system-ui;margin-top:14px}.gbig{font:800 clamp(2.4rem,13vw,4.6rem)/1 system-ui;color:#ffd23f;text-shadow:0 2px 0 #000;margin:6px 0 12px}
.gqq{font:600 1.2rem/1.4 system-ui;margin:12px 0}
.og{display:grid;gap:10px}@media(min-width:560px){.og{grid-template-columns:1fr 1fr}}
.gq .o{display:flex;align-items:center;gap:12px;background:#fff;color:#0f1432;border:3px solid transparent;border-radius:16px;padding:14px;font:700 1.15rem system-ui;min-height:64px}
.gq .o:hover:not(:disabled){border-color:#ffd23f}.gq .o:disabled{opacity:1}.gq .o::after{content:none}
.ol{flex:none;width:38px;height:38px;border-radius:50%;background:#0f1432;color:#fff;display:grid;place-items:center}
.gq .o.ok{background:#1eaa5a;color:#fff;border-color:#ffd23f}.gq .o.ok::after{content:" ✓";margin-left:auto}.gq .o.ok .ol{background:#fff;color:#1eaa5a}
.gq .o.no{background:#ffe1dc;border-color:#d4380d}.gq .o.no::after{content:" ✗";margin-left:auto;content:" ✗ wrong"}
.gq .fb{background:rgba(255,255,255,.1);margin-top:14px}
.c-cricket{background:#1d5fd1}
.mc{background:rgba(255,255,255,.08);border:2px solid rgba(255,210,63,.5);border-radius:16px;padding:16px;margin:14px 0;text-align:center}
.mt1{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;font:800 clamp(1.3rem,6vw,2rem) system-ui}.mt1 i{font:600 .9rem system-ui;color:#ffd23f}
.mi{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}.mi span{background:#fff;color:#0f1432;font:700 .85rem system-ui;padding:6px 12px;border-radius:999px}

/* Keep the quiz prompt and all answer choices within a mobile screen where possible. */
.quiz-page .bc{font-size:.82rem;line-height:1.35}
.quiz-page>h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:.12em 0 .2em}
.quiz-page>.sub{font-size:1rem;line-height:1.4;margin:0 0 12px}
.quiz-page .pb{margin:10px 0 12px}
.quiz-page .gq{padding:16px;margin:12px 0}
.quiz-page .gqq{font-size:1.12rem;line-height:1.3;margin:10px 0 12px}
.quiz-page .og{gap:8px}
.quiz-page .gq .o{min-height:56px;padding:10px 12px;font-size:1.05rem}
.quiz-page .ol{width:34px;height:34px}
@media(max-width:640px){
 .quiz-page{padding:12px}
 .quiz-page .bc{font-size:.76rem;margin-bottom:8px}
 .quiz-page>.cat{font-size:.68rem;line-height:1.2}
 .quiz-page>h1{font-size:clamp(1.55rem,7.5vw,1.9rem);line-height:1.08;margin:3px 0 6px}
 .quiz-page>.sub{font-size:.9rem;line-height:1.3;margin:0 0 9px}
 .quiz-page .pb{margin:0 0 9px}
 .quiz-page .gq{padding:12px;border-radius:16px;margin:9px 0}
 .quiz-page .gh{gap:8px}
 .quiz-page .gb{font-size:.68rem;padding:5px 10px}
 .quiz-page .gq .tm{font-size:.78rem}
 .quiz-page .gqq{font-size:1.02rem;line-height:1.25;margin:8px 0 10px}
 .quiz-page .og{grid-template-columns:1fr;gap:7px}
 .quiz-page .gq .o{min-height:50px;padding:8px 10px;gap:10px;border-radius:12px;font-size:.95rem}
 .quiz-page .ol{width:30px;height:30px}
 .quiz-page .gq .fb{margin-top:9px;padding:10px}
}
@media(max-width:640px) and (max-height:760px){
 .quiz-page>.sub{display:none}
 .quiz-page .gq .o{min-height:46px}
 .quiz-page .ol{width:28px;height:28px}
}

.quiz-page.is-complete>.cat,
.quiz-page.is-complete>h1,
.quiz-page.is-complete>.sub,
.quiz-page.is-complete>.pb{display:none}
.quiz-page.is-complete>.bc{margin-bottom:14px}
.result-section{margin:10px 0 28px}
.result-card{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr);overflow:hidden;background:#fff;border:1px solid var(--bd);border-radius:22px;box-shadow:0 14px 36px rgba(20,18,28,.1)}
.result-score-panel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:26px 24px;background:linear-gradient(145deg,#0b1226,#1a347f);color:#fff}
.result-score-panel:after{content:"";position:absolute;z-index:-1;width:150px;height:150px;right:-82px;bottom:-76px;border:1px solid rgba(255,210,63,.24);border-radius:50%;box-shadow:0 0 0 18px rgba(255,210,63,.035),0 0 0 38px rgba(255,210,63,.025)}
.result-score-label{font:800 .7rem/1.2 system-ui,sans-serif;letter-spacing:.14em;color:#c5cde8}
.result-number{display:block;margin:12px 0 3px;color:#ffd23f;font:800 clamp(3.2rem,7vw,4.6rem)/.95 system-ui,sans-serif;letter-spacing:-.075em;white-space:nowrap}
.result-score-caption{font:600 .82rem/1.3 system-ui,sans-serif;color:#d3d9ef}
.result-meter{height:7px;margin-top:19px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden}
.result-meter span{display:block;width:0;height:100%;border-radius:inherit;background:#ffd23f;transition:width .7s ease}
.result-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:28px 32px}
.result-eyebrow{margin:0 0 8px;color:var(--ac);font:800 .7rem/1.2 system-ui,sans-serif;letter-spacing:.14em}
.result-copy h2{margin:0;font:800 clamp(1.7rem,4vw,2.35rem)/1.06 system-ui,sans-serif;letter-spacing:-.045em;color:var(--fg)}
.result-copy #result-note{max-width:34ch;margin:12px 0 20px;color:var(--mu);font-size:.98rem;line-height:1.45}
.result-replay{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:10px 18px;box-shadow:0 6px 16px rgba(212,56,13,.16)}
.result-replay span{font-size:1.2rem;line-height:1}
.result-share{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 2px 28px}
.result-share>p{margin:0;font-size:.9rem;font-weight:700;color:var(--fg)}
.result-share .share{justify-content:flex-end;gap:8px;margin:0}
.result-share .share button{min-height:40px;padding:8px 13px;border-radius:999px;font-size:.84rem;font-weight:650;transition:border-color .15s,background .15s}
.result-share .share button:hover{border-color:var(--ac);background:rgba(212,56,13,.05)}
.more-quizzes-title{margin:24px 0 12px;font:750 1.4rem/1.2 system-ui,sans-serif}
@media(max-width:640px){
 .result-section{margin:8px 0 24px}
 .result-card{grid-template-columns:1fr;border-radius:18px}
 .result-score-panel{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;padding:15px 18px}
 .result-score-label{grid-column:1/-1}
 .result-number{grid-column:1;grid-row:2/4;margin:9px 0 0;font-size:3.1rem}
 .result-score-caption{grid-column:2;grid-row:2;align-self:end}
 .result-meter{grid-column:2;grid-row:3;width:100%;margin:7px 0 0;align-self:start}
 .result-copy{padding:20px}
 .result-copy h2{font-size:1.7rem}
 .result-copy #result-note{margin:9px 0 15px;font-size:.92rem}
 .result-replay{min-height:44px}
 .result-share{align-items:flex-start;flex-direction:column;gap:8px;margin:14px 0 24px}
 .result-share .share{justify-content:flex-start;gap:6px}
 .result-share .share button{min-height:38px;padding:7px 10px;font-size:.78rem}
 .more-quizzes-title{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){.result-meter span{transition:none}}