:root { --cq-cyan:#00e5ff; --cq-pink:#ff2dd6; --cq-green:#35f283; --cq-ink:#050913; --cq-panel:rgba(10,20,38,.88); }
.quest-shell { width:min(100% - 32px,1160px); margin:0 auto; padding:38px 0 72px; min-height:72vh; }
.quest-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:28px 0 34px; }
.quest-hero h1 { margin:4px 0 10px; font-size:clamp(2.6rem,8vw,6.8rem); line-height:.87; letter-spacing:-.055em; text-transform:uppercase; }
.quest-hero h1 span { display:block; color:transparent; -webkit-text-stroke:2px var(--cq-cyan); text-shadow:0 0 28px rgba(0,229,255,.35); }
.quest-hero p { max-width:620px; color:#bcd5e5; font-size:1.08rem; }
.eyebrow { color:var(--cq-green)!important; font-size:.78rem!important; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.language-switch { display:flex; padding:4px; border:1px solid rgba(0,229,255,.35); border-radius:999px; background:#07101e; }
.language-switch button { min-width:48px; border:0; border-radius:999px; padding:10px; color:#a8c1d2; background:transparent; font-weight:800; }
.language-switch button[aria-pressed="true"] { color:#041019; background:var(--cq-cyan); box-shadow:0 0 18px rgba(0,229,255,.45); }
.status-panel { display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid rgba(53,242,131,.24); border-radius:10px; color:#bcebd0; background:rgba(53,242,131,.06); }
.pulse { width:9px; height:9px; border-radius:50%; background:var(--cq-green); box-shadow:0 0 14px var(--cq-green); }
.section-heading { margin:52px 0 20px; }
.section-heading h2 { margin:4px 0; font-size:clamp(1.8rem,4vw,3.2rem); }
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mode-card { position:relative; min-height:280px; padding:26px; border:1px solid rgba(0,229,255,.23); border-radius:18px; color:#eaf7ff; text-align:left; background:linear-gradient(145deg,rgba(10,24,44,.97),rgba(6,9,19,.96)); overflow:hidden; cursor:pointer; transition:.22s transform,.22s border-color,.22s box-shadow; }
.mode-card::after { content:""; position:absolute; inset:auto -30% -55% 35%; height:180px; background:radial-gradient(circle,var(--cq-pink),transparent 68%); opacity:.13; }
.mode-card:hover,.mode-card:focus-visible { transform:translateY(-6px); border-color:var(--cq-cyan); box-shadow:0 18px 45px rgba(0,0,0,.38),0 0 25px rgba(0,229,255,.14); outline:none; }
.mode-number { position:absolute; top:20px; right:22px; color:#66869a; font:700 .78rem monospace; }
.mode-icon { display:grid; place-items:center; width:66px; height:66px; margin:26px 0 38px; border:1px solid rgba(255,45,214,.5); border-radius:50%; color:var(--cq-pink); font-size:2rem; box-shadow:inset 0 0 24px rgba(255,45,214,.1); }
.mode-card strong { display:block; margin-bottom:12px; font-size:1.45rem; }
.mode-card > span:last-child { display:block; color:#9eb7c8; line-height:1.55; }
.privacy-note { margin:24px 0 10px; color:#8ca9bb; font-size:.9rem; }
.legal-doc-links { margin: 18px 0; padding-left: 1.2rem; color:#bcd5e5; }
.legal-doc-links a { color:var(--cq-cyan); }
.legal-assent-label { display:flex; gap:12px; align-items:flex-start; margin:22px 0; max-width:720px; color:#eaf7ff; line-height:1.5; }
.legal-assent-label input { margin-top:4px; width:18px; height:18px; flex:0 0 auto; }
#legal-continue { display:inline-block; margin:8px 0 18px; }
.google-standby { display:flex; align-items:center; gap:12px; width:min(100%,380px); margin:8px 0 28px; padding:12px 16px; border:1px solid rgba(0,229,255,.16); border-radius:16px; color:#9eb7c8; background:linear-gradient(180deg,rgba(14,28,48,.96),rgba(7,14,26,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px rgba(0,0,0,.32); cursor:not-allowed; filter:grayscale(.42) saturate(.75) brightness(.88); text-align:left; }
.google-standby-led { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#2a3542; box-shadow:inset 0 0 5px #05070b; }
.google-mark { flex:0 0 auto; opacity:.78; }
.google-standby-text { display:flex; flex-direction:column; gap:2px; }
.google-standby-text strong { color:#d7e7f1; font-size:.98rem; font-weight:800; }
.google-standby-text small { color:#7d96a8; font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.mode-card:disabled { cursor:not-allowed; opacity:.45; transform:none; box-shadow:none; }
.play-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:18px 0; }
.text-button { border:0; color:#9fc2d6; background:none; text-decoration:underline; cursor:pointer; }
.progress-copy { font-weight:800; }
.timer { min-width:74px; padding:9px 14px; border:1px solid rgba(255,45,214,.45); border-radius:999px; color:#ffd3f7; text-align:center; }
.progress-track { height:5px; border-radius:99px; background:#14263a; overflow:hidden; }
.progress-track span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--cq-cyan),var(--cq-green)); transition:width .25s; }
.question-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.08fr); gap:clamp(28px,7vw,80px); align-items:center; padding:48px 0; }
.cover-frame { position:relative; margin:0; padding:14px; border:1px solid rgba(0,229,255,.3); border-radius:20px; background:#091220; box-shadow:0 28px 70px rgba(0,0,0,.5); }
.cover-frame img { position:relative; display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.cover-glow { position:absolute; inset:15%; background:var(--cq-pink); filter:blur(80px); opacity:.16; }
.answer-panel h2 { margin:8px 0 24px; font-size:clamp(1.7rem,4vw,3rem); line-height:1.08; }
.choice-list { display:grid; gap:11px; }
.choice-list button { display:flex; align-items:center; width:100%; min-height:58px; padding:14px 17px; border:1px solid #263f54; border-radius:12px; color:#eaf7ff; background:rgba(8,17,31,.88); text-align:left; font-weight:700; cursor:pointer; }
.choice-list button::before { content:attr(data-letter); display:grid; place-items:center; width:30px; height:30px; margin-right:13px; border:1px solid #3b5e75; border-radius:50%; color:var(--cq-cyan); font:700 .8rem monospace; }
.choice-list button:hover,.choice-list button:focus-visible { border-color:var(--cq-cyan); outline:2px solid transparent; box-shadow:0 0 18px rgba(0,229,255,.12); }
.choice-list button:disabled { cursor:default; opacity:.72; }
.feedback { min-height:48px; color:#c9ddeb; line-height:1.5; }
.result-screen { max-width:760px; margin:42px auto; padding:42px; border:1px solid rgba(0,229,255,.25); border-radius:24px; text-align:center; background:var(--cq-panel); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.badge-orbit { display:grid; place-items:center; width:180px; height:180px; margin:20px auto; border:1px solid rgba(0,229,255,.45); border-radius:50%; box-shadow:0 0 50px rgba(0,229,255,.2); }
.badge-medallion { display:grid; place-items:center; width:128px; height:128px; border-radius:50%; color:#051019; background:linear-gradient(135deg,var(--cq-cyan),var(--cq-green)); font-size:2.5rem; font-weight:900; }
.result-screen h2 { font-size:clamp(2rem,6vw,4.5rem); margin:10px 0; }
.result-score { color:var(--cq-pink); font-size:1.5rem; font-weight:900; }
.share-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:28px 0; }
.share-actions button,.share-actions a,.primary-button { border:1px solid rgba(0,229,255,.4); border-radius:999px; padding:11px 17px; color:#eaf7ff; background:#091526; text-decoration:none; cursor:pointer; }
.primary-button { border:0; color:#041019; background:var(--cq-green); font-weight:900; }
[hidden] { display:none!important; }
@media (max-width:800px) { .quest-hero{align-items:flex-start;flex-direction:column}.mode-grid,.question-layout{grid-template-columns:1fr}.mode-card{min-height:230px}.question-layout{padding-top:28px}.cover-frame{width:min(100%,460px);margin:auto}.result-screen{padding:28px 18px}.play-topline{flex-wrap:wrap} }