:root{font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif;line-height:1.4;font-weight:500;color:#f6f8fc;background-color:#0b1020;--bg-900: #070b14;--bg-800: #111a31;--bg-700: #172445;--surface: rgba(12, 20, 38, .78);--surface-strong: rgba(9, 14, 27, .92);--text-main: #f6f8fc;--text-muted: #b7c4e3;--brand: #3dd8ff;--brand-strong: #00b2ff;--accent: #ffd36d;--success: #44d87b;--danger: #ff5f7a;--ring: #9ce9ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;width:100%}body{min-height:100vh;background:radial-gradient(circle at 10% 20%,#00b2ff2e,#00b2ff00 35%),radial-gradient(circle at 85% 10%,#ffd36d29,#ffd36d00 30%),linear-gradient(120deg,var(--bg-900),var(--bg-800),var(--bg-700));color:var(--text-main)}button,input{font:inherit}button{border:0;border-radius:12px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,opacity .18s ease}button:focus-visible,.video-hit-area:focus-visible,input:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.app-shell{min-height:100vh;padding:24px;display:flex;flex-direction:column}.screen{width:min(1200px,100%);margin:auto;background:linear-gradient(165deg,#0f172ddb,#080c19e6);border:1px solid rgba(157,226,255,.2);border-radius:28px;box-shadow:0 22px 60px #00000059;position:relative;overflow:hidden}.app-header{width:min(1200px,100%);margin:0 auto 24px;display:flex;align-items:center}.app-logo{height:38px;width:auto}.fade-in{animation:fadeInUp .26s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-size:.8rem;margin:0 0 8px}.intro-screen{display:grid;place-items:center;text-align:center;padding:clamp(24px,6vw,56px)}.intro-glow{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,#3dd8ff5c,#3dd8ff00);filter:blur(14px);inset:50% auto auto 50%;transform:translate(-50%,-50%);pointer-events:none}.intro-content{position:relative;z-index:2;max-width:820px}.intro-content h1{margin:0;font-size:clamp(2.8rem,9vw,6.2rem);line-height:.95;letter-spacing:.02em}.subtitle{margin:20px 0 8px;color:var(--text-main);font-size:clamp(1.2rem,2.9vw,2rem)}.reward-line{margin:0;color:var(--text-muted);font-size:clamp(1rem,2.2vw,1.25rem)}.intro-actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.cta-button,.ghost-button,.secondary-button{padding:14px 22px;min-width:170px;font-size:1.03rem;font-weight:700}.cta-button{background:linear-gradient(120deg,var(--accent),#ffb347);color:#2a1a00;box-shadow:0 10px 24px #ffbe5c47}.cta-button:hover{transform:translateY(-2px)}.ghost-button{background:#0d1b349e;color:var(--text-main);border:1px solid rgba(157,226,255,.35)}.ghost-button:hover{background:#152848d6}.secondary-button{background:#3fc3ff24;color:#bfeeff;border:1px solid rgba(93,210,255,.48);min-width:auto}.supporting-note{margin-top:18px;color:#c4d9ffbd;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}.game-screen{padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;gap:14px}.game-topbar h2{margin:0;font-size:clamp(1.4rem,3.2vw,2.1rem)}.progress-header{display:flex;flex-direction:column;gap:6px}.progress-header-labels{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.progress-pct{font-size:.88rem;font-weight:700;color:var(--text-muted);letter-spacing:.03em}.guide-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#040814bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}.guide-dialog{border-radius:20px;border:1px solid rgba(157,226,255,.32);background:#0d162ef7;padding:28px 28px 24px;max-width:400px;width:100%;display:grid;gap:16px;box-shadow:0 24px 60px #00000080}.guide-dialog strong{font-size:1.2rem;color:#eef7ff}.guide-dialog p{margin:0;color:var(--text-muted);font-size:.95rem;line-height:1.55}.guide-tags{display:flex;flex-wrap:wrap;gap:8px}.guide-tags span{border-radius:999px;border:1px solid rgba(157,226,255,.3);background:#0c1528b8;color:#dff2ff;font-size:.82rem;padding:4px 10px}.guide-close{justify-self:flex-start;min-width:auto;padding:9px 20px;border-radius:10px;border:1px solid rgba(157,226,255,.34);background:#060e1ca6;color:#e9f7ff;font-weight:700;font-size:.9rem}.progress-track{width:100%;height:9px;border-radius:999px;background:#96b6f433;overflow:hidden;margin-top:4px}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .28s ease}.round-prompt{margin:6px 0 2px;color:#ebf2ff;font-size:clamp(1rem,2.2vw,1.18rem)}.choices-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:2px}.video-card{border-radius:22px;border:2px solid rgba(154,200,255,.22);background:#0a1121c7;overflow:hidden;transform:translateY(0);transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.video-card:hover{transform:translateY(-2px);border-color:#9de2ff8c;box-shadow:0 10px 26px #00000042}.video-card.is-correct{border-color:#44d87bcc;box-shadow:0 0 0 2px #44d87b47}.video-card.is-wrong{border-color:#ff5f7ad1;box-shadow:0 0 0 2px #ff5f7a38}.video-card.is-correct-reveal{border-color:#44d87b8c}.video-hit-area{min-height:100%;cursor:pointer}.video-card-header,.video-card-footer{padding:12px 14px;display:flex;align-items:center;justify-content:space-between}.video-card-header{background:#1d2c4ad1;font-weight:700;letter-spacing:.03em}.video-frame{position:relative;aspect-ratio:16 / 9;background:linear-gradient(130deg,#0d182be0,#162540e0)}.video-frame video{width:100%;height:100%;object-fit:cover;display:block}.video-overlay-play{position:absolute;inset:auto 14px 14px auto;padding:8px 12px;border-radius:999px;background:#080c16cc;color:#e8f6ff;border:1px solid rgba(160,222,255,.5);font-size:.86rem}.video-fallback{width:100%;height:100%;display:grid;place-items:center;text-align:center;gap:8px;padding:20px;color:#ffd7df;background:repeating-linear-gradient(-45deg,#ff5f7a21,#ff5f7a21 14px,#141d31db 14px,#141d31db 28px)}.video-fallback code{font-size:.78rem;color:#ffeaf0;background:#ff5f7a26;padding:6px 8px;border-radius:8px;word-break:break-word}.video-card-footer{color:#e7f2ffeb;background:#101829c2}.pick-text{font-weight:700}.feedback-banner{margin-top:auto;border-radius:14px;padding:12px 16px;border:1px solid rgba(161,207,255,.26);background:#0d162ad9;animation:fadeInUp .17s ease}.feedback-banner p{margin:0;font-weight:700}.feedback-banner small{display:block;margin-top:2px;color:var(--text-muted)}.feedback-actions{margin-top:12px;display:flex;justify-content:flex-end}.feedback-banner.correct{border-color:#44d87b85}.feedback-banner.wrong{border-color:#ff5f7a8c}.result-screen{padding:clamp(24px,5vw,40px);display:grid;place-items:center}.result-card{width:min(720px,100%);text-align:center;border-radius:24px;border:1px solid rgba(157,226,255,.26);background:var(--surface);padding:clamp(26px,4vw,38px);position:relative;overflow:hidden}.winner-glow{position:absolute;inset:-35% auto auto -12%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#ffd36d5c,#ffd36d00);pointer-events:none}.result-score{margin:0;font-size:clamp(3rem,9vw,4.6rem);line-height:1;font-weight:800}.result-time{margin:8px 0 0;color:var(--text-muted)}.result-card h2{margin:20px 0 8px;font-size:clamp(1.6rem,3.4vw,2.4rem)}.result-subtext{margin:0;font-size:1.1rem}.marketing-note{margin:18px auto 0;max-width:540px;color:#bfd0ede0}.result-actions{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center}.saved-note{width:100%;margin:0;color:var(--success);font-weight:700}.leaderboard-screen{padding:clamp(20px,4vw,34px)}.leaderboard-card{height:100%;border-radius:20px;background:var(--surface);border:1px solid rgba(157,226,255,.2);padding:clamp(18px,3vw,28px);display:flex;flex-direction:column}.leaderboard-header h2{margin:0;font-size:clamp(1.6rem,3vw,2rem)}.leaderboard-header p{margin:8px 0 0;color:var(--text-muted)}.leaderboard-table{margin-top:16px;border-radius:14px;border:1px solid rgba(161,207,255,.2);background:#0b1222bf;overflow:hidden}.leaderboard-row{display:grid;grid-template-columns:80px 1fr 130px 120px 110px;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid rgba(151,196,255,.12);font-size:.95rem}.leaderboard-row.heading{border-top:0;color:#d2e2ff;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#13203cb3}.empty-board{padding:20px;text-align:center;color:var(--text-muted)}.leaderboard-actions{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start;padding-top:18px}.admin-clear{margin-top:10px;align-self:flex-start;color:#c7d8f5d1;background:transparent;border:1px dashed rgba(157,226,255,.32);padding:8px 12px;font-size:.82rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#01050cbd;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;z-index:30}.modal-card{width:min(430px,100%);border-radius:18px;background:var(--surface-strong);border:1px solid rgba(157,226,255,.26);padding:22px}.modal-card h3{margin:0}.modal-caption{margin:6px 0 14px;color:var(--text-muted)}.name-input{width:100%;height:48px;border-radius:11px;border:1px solid rgba(157,226,255,.32);background:#070d19c7;color:var(--text-main);padding:0 14px}.modal-actions{margin-top:14px;display:flex;gap:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 980px){.app-shell{padding:16px 12px}.screen{min-height:calc(100vh - 100px);border-radius:20px}.choices-grid{grid-template-columns:1fr}.leaderboard-row{grid-template-columns:56px 1fr 86px 72px}.leaderboard-row span:last-child,.leaderboard-row.heading span:last-child{display:none}.app-header{margin-bottom:20px}.app-logo{height:28px}}