@font-face{font-family:QuizDisplay;src:url('assets/display.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--green:#6aff3b;--mint:#38ed83;--ink:#031216;--muted:#b3c3cc;--red:#ff8083;--display:QuizDisplay,'Arial Black',Arial,sans-serif}
*{box-sizing:border-box}html{background:#020b0e}body{margin:0;color:#fff;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 50% 30%,#11312b,#020b0e 65%);-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a{color:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}:focus-visible{outline:3px solid #fff;outline-offset:4px}button:disabled{cursor:default}
.landing{position:relative;isolation:isolate;width:min(100%,720px);min-height:100svh;margin:auto;padding:32px 42px 30px;overflow:hidden;background:var(--ink);box-shadow:0 0 110px #0009}.hero-image{position:absolute;z-index:-2;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 10%,#03121614 32%,#031216d9 57%,var(--ink) 78%),url('assets/football-hero.webp') center top/100% auto no-repeat;opacity:0;transform-origin:center top}.is-ready .hero-image{animation:stadium-reveal 1.65s cubic-bezier(.16,.65,.22,1) forwards}.landing:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 10%,transparent 35%,#00121633 80%)}.landing[data-screen=quiz] .hero-image,.landing[data-screen=result] .hero-image{animation:none;opacity:.22;transform:none;filter:none}.topbar{display:flex;justify-content:space-between;align-items:flex-start;height:322px}.brand{font-size:12px;font-weight:700;letter-spacing:4px;line-height:1.55;text-decoration:none;color:#b4c4ce}.brand span{display:block;width:33px;height:3px;background:var(--green);margin-top:10px;border-radius:3px}.handwritten{font-family:'Segoe Print','Comic Sans MS',cursive;font-style:italic;font-size:26px;line-height:1.15;transform:rotate(-12deg);color:#a3b7c0a6;margin-top:6px}.handwritten span{margin-left:12px}.handwritten i{display:block;width:80px;height:3px;background:var(--green);transform:rotate(-9deg);margin:9px 0 0 35px;opacity:.7}.screen{animation:screen-enter .45s ease-out}.headline{position:relative;text-align:center}.crown{position:absolute;left:15%;top:-40px;width:50px;height:39px;color:var(--green);transform:rotate(-8deg);stroke-width:2.4}h1{font-family:var(--display);font-weight:900;font-size:clamp(34px,8.5vw,62px);letter-spacing:-1.8px;line-height:1.03;text-shadow:0 3px 20px #0008}h1 span,h1 strong{display:block}h1 strong{font-size:1.22em;font-style:italic;color:var(--green);line-height:1.08;letter-spacing:-2.3px}.intro-copy{font-size:19px;line-height:1.4;text-align:center;color:var(--muted);max-width:480px;margin:14px auto 20px;text-wrap:balance}.is-ready .intro .headline{animation:copy-enter .8s .2s both}.is-ready .intro .intro-copy{animation:copy-enter .7s .34s both}.is-ready .category{animation:copy-enter .65s both}.is-ready .category:nth-child(1){animation-delay:.42s}.is-ready .category:nth-child(2){animation-delay:.5s}.is-ready .category:nth-child(3){animation-delay:.58s}.is-ready .intro .cta{animation:copy-enter .7s .62s backwards,cta-breathe 3.2s 1.6s infinite}.is-ready .benefits{animation:copy-enter .7s .75s both}
.categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:23px 0 27px}.category{position:relative;overflow:hidden;border:1px solid #2d464b;border-radius:19px;background:linear-gradient(145deg,#17342dcc,#061318e6);padding:16px 5px 15px;text-align:center;box-shadow:inset 0 1px 0 #ffffff0c,0 8px 20px #0002;color:#c5d4dd;font-weight:600;font-size:14px;letter-spacing:.7px}.category:nth-child(2){background:linear-gradient(140deg,#0b4228b0,#07171de6);border-color:#38674a}.category:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,#c5ffc708 50%,transparent 65%);pointer-events:none}.icon-disc{position:relative;display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;margin:0 auto 10px;background:radial-gradient(circle at 32% 17%,#2d7136,#0b2e23 70%);box-shadow:inset 0 1px 0 #b9ffd52b,0 6px 16px #0003;border:1px solid #8bf58919}.icon-disc:after{content:'';position:absolute;inset:5px;border:1px solid #baffb218;border-radius:50%}.icon-disc svg{width:58px;height:58px;filter:drop-shadow(0 4px 3px #0006)}
.cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:73px;padding:12px 15px;margin-top:18px;border:0;border-radius:50px;background:linear-gradient(175deg,#91ff4b,#62f83a 48%,#32dc5b);color:#042015;font-family:var(--display);font-size:28px;font-weight:900;text-decoration:none;box-shadow:0 7px 28px #4dff3924,inset 0 2px 0 #c8ff9a7a;transition:transform .2s,filter .2s,box-shadow .25s,background .25s}.cta:after{content:'';position:absolute;z-index:-1;inset:-80% -30%;background:linear-gradient(110deg,transparent 38%,#ffffff55 49%,transparent 60%);transform:translateX(-100%);animation:button-sheen 5s 1.8s infinite;pointer-events:none}.cta svg{width:28px;height:28px;stroke-width:2.6;transition:transform .25s}.cta:active{transform:scale(.97)}.cta:disabled{background:#22382e;color:#90a398;box-shadow:inset 0 1px 0 #ffffff07;animation:none}.cta:disabled:after{animation:none;opacity:0}.play-icon{width:35px;height:35px;display:grid;place-items:center;background:#083e2c;color:white;border-radius:50%;font-family:Arial;font-size:17px;padding-left:3px;box-shadow:0 2px 5px #1040263d}.benefits{display:flex;justify-content:center;align-items:center;margin:19px 0 0;font-size:15px;color:var(--muted)}.benefits span{display:flex;align-items:center;gap:7px;padding:0 16px;border-right:1px solid #2a4048}.benefits span:first-child{padding-left:0}.benefits span:last-child{padding-right:0;border:0}.benefits svg{width:20px;height:20px;color:var(--green)}
.landing[data-screen=quiz] .topbar,.landing[data-screen=result] .topbar{height:68px}.quiz-heading{text-align:center;margin:0 0 23px}h2{font-family:var(--display);font-weight:900;letter-spacing:-1.2px;line-height:1.08;font-size:42px}h2 em{font-style:normal;color:var(--green)}.quiz-heading h2{font-size:35px}.quiz-card{background:linear-gradient(145deg,#0b1919f2,#050d11ef);border:1px solid #2a403b;border-radius:23px;padding:23px;box-shadow:0 18px 45px #0004}.question-meta{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}.round-counter{flex-shrink:0}.round-counter>small{display:block;font-size:8px;letter-spacing:2px;color:#91a7a0;margin-bottom:3px}.round-counter>span{display:flex;gap:5px;align-items:baseline}.round-counter b{display:inline-block;font-family:var(--display);font-weight:800;font-size:29px;color:#e5f4ee;line-height:1}.round-counter span small{font-size:11px;color:#839f95}.question-dots{display:flex;gap:18px;align-items:center}.progress-step{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #354e44;background:#14211d;font-size:12px;font-weight:700;color:#728d80;transition:background .35s,border-color .35s,color .35s,box-shadow .35s}.progress-step:not(:last-child):after{content:'';position:absolute;width:17px;height:2px;left:28px;top:12px;background:#2c4637;transition:background .4s}.progress-step.current{color:var(--green);border-color:var(--green);box-shadow:0 0 0 4px #73fa3020;animation:step-pulse 2.5s infinite}.progress-step.correct{background:#234c32;border-color:var(--mint);color:var(--mint);font-size:16px}.progress-step.wrong{background:#44272c;border-color:#d76f76;color:var(--red);font-size:18px}.progress-step.correct:after{background:#3d9c59}.progress-step.wrong:after{background:#88675d}.live-score{display:flex;align-items:center;gap:5px;flex-shrink:0;padding:8px 9px;border:1px solid #345138;border-radius:12px;background:#17392477}.live-score svg{width:22px;height:22px;margin-right:1px}.live-score b{display:inline-block;font-size:20px;color:var(--green);font-family:var(--display)}.live-score small{font-size:10px;color:#a2b6a7}.question-visual{position:relative;height:154px;overflow:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(0deg,#06100cee,#041b2188),url('assets/football-hero.webp') center 38%/cover}.question-visual:after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #7dba8924;border-radius:inherit}.question-visual>svg{position:relative;width:100px;height:100px;filter:drop-shadow(0 6px 10px #0009)}.visual-halo{position:absolute;width:200px;height:200px;background:radial-gradient(circle,#85fb3740,transparent 65%)}.question-visual>span{position:absolute;bottom:11px;color:#bfdbce;letter-spacing:4px;font-size:9px}h3{font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.4px}.quiz-card h3{margin:20px 0;outline:none;text-wrap:pretty}.answers{display:grid;gap:10px}.answer{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;width:100%;min-height:57px;text-align:left;padding:9px 13px;border:1px solid #3c4a46;border-radius:13px;background:linear-gradient(110deg,#13222099,#0c161988);color:#dfe8e3;font-size:17px;transition:transform .2s,border-color .25s,background .3s,box-shadow .3s,opacity .3s}.answer-letter{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:1px solid #637b70;border-radius:50%;color:#d4e2da;font-size:14px;font-weight:700;transition:background .3s,border-color .3s,color .3s}.answer>span:nth-child(2){flex:1;min-width:0}.answer>svg{width:20px;height:20px;visibility:hidden}.answer:active:not(:disabled){transform:scale(.975)}.answered .answer:not(.correct):not(.wrong){opacity:.48}.answer.correct{background:linear-gradient(100deg,#164527,#0c251d);border-color:var(--mint);box-shadow:0 0 0 1px #38ed8333,0 0 22px #38ed8314;animation:answer-correct .6s ease-out}.answer.correct .answer-letter{background:#25643b;border-color:var(--mint);color:var(--mint)}.answer.correct>svg{visibility:visible;color:var(--mint);stroke-dasharray:30;animation:check-draw .45s .1s backwards}.answer.wrong{background:linear-gradient(100deg,#43242a,#261920);border-color:#ed727b;animation:answer-shake .48s ease-in-out}.answer.wrong .answer-letter{color:#ffb4b5;background:#60323a;border-color:#ed727b}.answer.wrong>svg{visibility:visible;color:var(--red)}.answer.correct.reveal{animation-delay:.32s;transition-delay:.22s}.answer.correct.reveal>svg{animation-delay:.42s}.answer-hint{min-height:17px;margin-top:15px;font-size:12px;line-height:1.4;color:#94aaa0;text-align:center;transition:color .3s}.answer-hint.positive{color:var(--mint);animation:copy-enter .3s}.answer-hint.negative{color:#d2dacf;animation:copy-enter .3s}.quiz>.cta{margin-top:19px}
.result{text-align:center}.result-trophy{position:relative;width:156px;height:156px;display:grid;place-items:center;margin:6px auto 10px;background:radial-gradient(circle,#3e9c344d,transparent 70%);animation:trophy-enter .8s cubic-bezier(.18,.85,.3,1.3)}.result-trophy>svg{width:115px;height:115px;filter:drop-shadow(0 6px 18px #54ef303d)}.spark{position:absolute;color:var(--green);font-size:26px;animation:spark-in .7s .3s backwards}.spark-one{top:10px;right:0}.spark-two{bottom:18px;left:0;font-size:18px;animation-delay:.5s}.score-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid #3f7747;border-radius:30px;background:#18432a88;color:var(--green);font-size:12px;letter-spacing:1.5px;font-weight:700;animation:score-enter .6s .2s backwards}.score-pill svg{width:17px;height:17px}.result h2{white-space:pre-line;font-size:49px;margin-top:19px;outline:none}.result h2:first-line{color:var(--green)}.result .intro-copy{font-size:17px;margin:13px auto 22px}.result-review{border:1px solid #2d4439;border-radius:17px;padding:4px 16px;text-align:left;background:#091d1bcc}.review-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #293b31;animation:copy-enter .4s backwards}.review-row:nth-child(1){animation-delay:.15s}.review-row:nth-child(2){animation-delay:.25s}.review-row:nth-child(3){animation-delay:.35s}.review-row:last-child{border:0}.review-mark{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:#3b262b;color:var(--red);font-size:20px}.review-mark.correct{color:var(--mint);background:#21452c}.review-row small{display:block;color:#91ab9b;font-size:9px;letter-spacing:1.5px;margin-bottom:4px}.review-row strong{font-size:15px;font-weight:600}.download-card{margin-top:24px}.download-card h3{font-size:21px}.download-card p:empty{display:none}.download-card p{font-size:14px;line-height:1.4;color:var(--muted);margin-top:6px}.result .cta{margin-top:17px;animation:cta-breathe 3s 1s infinite}.restart{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:transparent;border:0;color:#b2c5bd;padding:12px;margin-top:9px;font-size:13px;transition:color .2s}.restart span{font-size:20px;transition:transform .3s}.restart:hover{color:#fff}.restart:hover span{transform:rotate(90deg)}.download-notice{font-size:13px;color:#bcd3c2;margin-top:13px;line-height:1.4}
@media(hover:hover){.cta:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 10px 35px #4dff3944}.cta:not(:disabled):hover svg:last-child{transform:translateX(5px)}.answer:not(:disabled):hover{transform:translateX(3px);border-color:#8ccb8b;box-shadow:0 0 20px #58ff3410}}
@keyframes stadium-reveal{from{opacity:0;transform:scale(1.07);filter:blur(12px) brightness(.45)}40%{opacity:.85}to{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}
@keyframes copy-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes screen-enter{from{opacity:0}to{opacity:1}}@keyframes button-sheen{0%,65%{transform:translateX(-100%)}88%,100%{transform:translateX(100%)}}@keyframes cta-breathe{0%,100%{box-shadow:0 7px 28px #4dff3924,inset 0 2px 0 #c8ff9a7a}50%{box-shadow:0 7px 35px #4dff3942,inset 0 2px 0 #c8ff9a7a}}@keyframes step-pulse{0%,100%{box-shadow:0 0 0 4px #73fa3014}50%{box-shadow:0 0 0 6px #73fa302a}}@keyframes answer-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}@keyframes answer-correct{0%{box-shadow:0 0 0 0 #38ed8300}40%{box-shadow:0 0 0 3px #38ed8344,0 0 30px #38ed8328}100%{box-shadow:0 0 0 1px #38ed8333,0 0 22px #38ed8314}}@keyframes check-draw{from{stroke-dashoffset:30;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes trophy-enter{from{opacity:0;transform:translateY(20px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes spark-in{from{opacity:0;transform:scale(.1) rotate(-45deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes score-enter{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:1000px){body{padding:24px 0}.landing{width:640px;min-height:calc(100svh - 48px);border:1px solid #20332b;border-radius:24px;padding:32px 40px}.topbar{height:290px}h1{font-size:56px}}
@media(max-width:600px){.landing{padding:25px 25px 27px}.topbar{height:clamp(176px,52vw,300px)}.brand{font-size:10px;letter-spacing:3px}.handwritten{font-size:21px}h1{font-size:8.7vw;letter-spacing:-1px}h1 strong{letter-spacing:-1.6px}.crown{width:42px;height:32px;top:-31px}.intro-copy{font-size:clamp(14px,3.7vw,19px);margin:12px auto 18px}.categories{gap:9px;margin:19px 0 22px}.category{padding:12px 3px;border-radius:15px;font-size:clamp(9px,2.4vw,14px);letter-spacing:.3px}.icon-disc{width:clamp(46px,13vw,72px);height:clamp(46px,13vw,72px);margin-bottom:8px}.icon-disc svg{width:80%;height:80%}.cta{min-height:62px;font-size:clamp(21px,5.5vw,28px);gap:12px;margin-top:16px}.cta svg{width:25px;height:25px}.play-icon{width:31px;height:31px;font-size:15px}.benefits{font-size:clamp(10px,2.7vw,15px);margin-top:18px}.benefits span{padding:0 11px;gap:6px}.benefits svg{width:18px;height:18px}.landing[data-screen=quiz] .topbar,.landing[data-screen=result] .topbar{height:64px}.quiz-heading{margin-bottom:18px}.quiz-heading h2{font-size:clamp(26px,6.8vw,35px)}.quiz-card{padding:18px;border-radius:19px}.question-meta{gap:8px;margin-bottom:17px}.question-dots{gap:12px}.progress-step{width:25px;height:25px}.progress-step:not(:last-child):after{left:25px;top:11px;width:11px}.round-counter b{font-size:25px}.round-counter>small{font-size:7px;letter-spacing:1.5px}.live-score{padding:7px;gap:3px}.live-score svg{width:20px;height:20px}.live-score b{font-size:18px}.question-visual{height:130px}.question-visual>svg{width:88px;height:88px}.quiz-card h3{font-size:21px;margin:17px 0}.answer{min-height:53px;padding:8px 11px;gap:10px;font-size:15px}.answer-letter{width:29px;height:29px;font-size:13px}.result-trophy{width:133px;height:133px;margin:2px auto 8px}.result-trophy>svg{width:101px;height:101px}.result h2{font-size:clamp(32px,9vw,49px)}.result .intro-copy{font-size:15px}.download-card h3{font-size:19px}}
@media(max-width:360px){.landing{padding:22px 16px}.topbar{height:52vw}.handwritten{font-size:18px}.categories{gap:7px}.benefits span{padding:0 8px}.benefits svg{width:15px;height:15px}.quiz-card{padding:14px}.question-meta{gap:7px}.question-dots{gap:10px}.progress-step{width:23px;height:23px;font-size:10px}.progress-step:not(:last-child):after{left:23px;top:10px;width:9px}.round-counter b{font-size:23px}.live-score{gap:2px;padding:6px}.live-score svg{width:17px;height:17px}.question-visual{height:115px}.quiz-card h3{font-size:19px}.answer{font-size:14px;gap:9px;padding:8px}.answer>svg{width:18px;height:18px}}


@media(max-width:280px){.landing{padding:18px 10px}.topbar{height:55vw}.brand{font-size:8px;letter-spacing:2px}.handwritten{font-size:14px}.handwritten i{width:45px;margin-left:15px}.crown{width:28px;height:23px;top:-22px}.intro-copy{font-size:12px}.categories{gap:4px}.category{font-size:7px;letter-spacing:0;padding:8px 1px}.icon-disc{width:34px;height:34px}.cta{font-size:14px;gap:5px;min-height:48px;padding:9px 8px}.play-icon{width:25px;height:25px;font-size:12px}.cta svg{width:16px;height:16px}.benefits{flex-wrap:wrap;gap:9px;font-size:9px}.benefits span{padding:0 4px}.quiz-heading h2{font-size:20px}.quiz-card{padding:10px}.question-meta{flex-wrap:wrap;gap:12px}.question-dots{order:3;width:100%;justify-content:center}.round-counter b{font-size:23px}.question-visual{height:90px}.question-visual>svg{width:62px;height:62px}.quiz-card h3{font-size:16px}.answer{font-size:12px;gap:6px;padding:6px;min-height:46px}.answer-letter{width:23px;height:23px;font-size:11px}.answer>svg{width:16px;height:16px}.result h2{font-size:23px;letter-spacing:-.5px}.result .intro-copy{font-size:12px}.review-row{gap:8px}.review-row strong{font-size:12px}.review-row small{font-size:7px;letter-spacing:.5px}.download-card h3{font-size:16px}}
/* Quiz polish: centered milestones, crisp answer cards and automatic handoff. */
.quiz-card{position:relative;background:linear-gradient(145deg,#1b3933,#0d2225 55%,#08171c);border:1px solid #6b9e8877;box-shadow:0 22px 55px #0006,inset 0 1px 0 #d9ffe526;transition:border-color .4s,box-shadow .4s}
.quiz-card[data-feedback=correct]{border-color:#65f59d;box-shadow:0 22px 55px #0006,0 0 32px #38ed831a,inset 0 1px 0 #d9ffe526}
.quiz-card[data-feedback=wrong]{border-color:#d99592}
.question-meta{justify-content:center;margin-bottom:26px;padding:9px 0 5px}
.question-dots{gap:36px;justify-content:center;width:100%;order:initial}
.progress-step{isolation:isolate;width:50px;height:50px;flex-shrink:0;font-family:var(--display);font-size:19px;color:#b5cbc4;background:linear-gradient(145deg,#28433e,#142b2a);border:2px solid #567c6b;box-shadow:inset 0 2px 0 #ffffff10;transition:background .4s,border-color .4s,color .4s,box-shadow .4s,transform .4s}
.progress-step:before{content:'';position:absolute;inset:-7px;border:1px dashed #83ffa34d;border-radius:50%;opacity:0;transition:opacity .4s}
.progress-step:not(:last-child):after{width:28px;height:3px;left:52px;top:22px;border-radius:3px;background:#587566;box-shadow:0 1px 0 #ffffff09;transition:background .4s,box-shadow .4s}
.progress-step.current{background:linear-gradient(145deg,#bcff74,#67f53c);border-color:#c7ff9a;color:#12311b;transform:scale(1.06);box-shadow:0 0 0 5px #73fa3014,0 0 24px #73fa3033;animation:milestone-pulse 2.8s ease-in-out infinite}
.progress-step.current:before{opacity:1;animation:milestone-orbit 16s linear infinite}
.progress-step.correct{font-family:Arial,sans-serif;font-size:25px;background:linear-gradient(145deg,#2b7346,#143f2b);border-color:#66f6a0;color:#b3ffd0;box-shadow:0 0 18px #38ed8320}
.progress-step.wrong{font-family:Arial,sans-serif;font-size:29px;background:linear-gradient(145deg,#754049,#3a222a);border-color:#ff9298;color:#ffd0d2}
.progress-step.correct:after{background:#6af69d;box-shadow:0 0 9px #38ed8344}
.progress-step.wrong:after{background:#d99498}
.question-visual{isolation:isolate;height:240px;border-radius:15px;background:#071c21;box-shadow:inset 0 0 0 1px #a6ffd340}
.question-visual:before{content:'';position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 60%,#03121688);pointer-events:none}
.question-visual:after{z-index:3;border-color:#a6ffd333}
.question-photo{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.question-photo[src$="ng-team.webp"]{object-position:50% 20%}
.question-photo[src$="cr7.webp"]{object-position:50% 6%}
@media(max-width:600px){.question-visual{height:180px}.question-photo[src$="cr7.webp"]{object-position:50% 6%}}
@media(max-width:360px){.question-visual{height:160px}}
@media(max-width:280px){.question-visual{height:120px}}
.question-visual>span{z-index:2;white-space:nowrap;max-width:calc(100% - 12px)}
.question-visual>svg{animation:quiz-icon-float 4.5s ease-in-out infinite}
.visual-halo{animation:halo-breathe 4.5s ease-in-out infinite}
.question-visual>span{font-size:10px;font-weight:700;color:#effff4;letter-spacing:3px;padding:5px 11px;border:1px solid #b4e7cc44;border-radius:20px;background:#071a20cc;bottom:9px}
.quiz-card h3{min-height:3.9em;color:#fff;text-shadow:0 2px 12px #0003}
.answers{gap:12px}
.answer{min-height:62px;padding:11px 14px;border:1px solid #72978e;border-radius:14px;background:linear-gradient(115deg,#2a4948,#1a3439);color:#fff;box-shadow:inset 0 1px 0 #ffffff14,0 4px 12px #0002;font-weight:600}
.answer-letter{width:35px;height:35px;background:#071e25;border-color:#90b5a6;color:#ecfff4;box-shadow:inset 0 1px 3px #0003}
.answer.correct{background:linear-gradient(105deg,#2f7042,#163f2b);border-color:#7affab;color:#f2fff6}
.answer.correct .answer-letter{background:#a4ffba;color:#123c21;border-color:#ceffda}
.answer.wrong{background:linear-gradient(105deg,#743c44,#402730);border-color:#ff9ca3;color:#fff0f1}
.answer.wrong .answer-letter{background:#ffd0d2;color:#5b1b29;border-color:#ffe5e6}
.answered .answer:not(.correct):not(.wrong){opacity:.38}
.answer-feedback{min-height:53px;padding-top:18px}
.answer-hint{margin:0;min-height:18px;font-size:12px;color:#bed2c7}
.answer-countdown{width:96px;height:3px;overflow:hidden;margin:11px auto 0;background:#a1cdb324;border-radius:4px;opacity:0;transition:opacity .2s}
.answer-countdown.running{opacity:1}
.answer-countdown>span{display:block;height:100%;background:#95ff9e;border-radius:inherit;transform:scaleX(0);transform-origin:left}
.answer-countdown.running>span{animation:feedback-countdown var(--feedback-duration) linear forwards}
.quiz-card[data-feedback=wrong] .answer-countdown>span{background:#ffb5b9}
.is-ready .icon-disc svg{animation:quiz-icon-float 5s 1.2s ease-in-out infinite}
.is-ready .category:nth-child(2) .icon-disc svg{animation-delay:1.6s}
.is-ready .category:nth-child(3) .icon-disc svg{animation-delay:2s}
@media(hover:hover){.answer:not(:disabled):hover{background:linear-gradient(115deg,#365c50,#244840);border-color:#b3ffb6;box-shadow:inset 0 1px 0 #ffffff20,0 5px 20px #58ff3420;transform:translateY(-2px)}.answer:not(:disabled):hover .answer-letter{background:#bdff94;border-color:#dcffc6;color:#16331f}}
@keyframes milestone-pulse{0%,100%{box-shadow:0 0 0 5px #73fa3014,0 0 24px #73fa3033}50%{box-shadow:0 0 0 7px #73fa3022,0 0 32px #73fa3044}}
@keyframes milestone-orbit{to{transform:rotate(360deg)}}
@keyframes quiz-icon-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes halo-breathe{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes feedback-countdown{to{transform:scaleX(1)}}
@media(max-width:600px){.question-meta{margin-bottom:23px;padding-top:8px}.question-dots{gap:30px}.progress-step{width:46px;height:46px;font-size:18px}.progress-step:not(:last-child):after{left:48px;top:20px;width:22px}.progress-step.correct{font-size:24px}.progress-step.wrong{font-size:27px}.answer{min-height:57px;padding:10px 12px}.answer-letter{width:32px;height:32px}.answers{gap:10px}}
@media(max-width:360px){.question-dots{gap:25px}.progress-step{width:42px;height:42px;font-size:17px}.progress-step:not(:last-child):after{left:44px;top:18px;width:17px}.answer{font-size:14px;padding:9px;gap:9px}.answer-letter{width:29px;height:29px}}

@media(max-width:280px){.question-meta{padding-top:5px;margin-bottom:20px;flex-wrap:nowrap}.question-dots{gap:22px}.progress-step{width:36px;height:36px;font-size:15px}.progress-step:not(:last-child):after{left:38px;top:15px;width:14px}.progress-step.correct{font-size:20px}.progress-step.wrong{font-size:23px}.quiz-card h3{min-height:5.2em}.answer{padding:7px 6px;font-size:12px;gap:6px;min-height:48px}.answer-letter{width:23px;height:23px}.answer-hint{font-size:11px}}

@media(max-width:220px){.question-dots{gap:14px}.progress-step{width:28px;height:28px;font-size:12px}.progress-step:before{inset:-5px}.progress-step:not(:last-child):after{left:30px;top:11px;width:6px}.progress-step.correct{font-size:16px}.progress-step.wrong{font-size:19px}.answer{overflow-wrap:anywhere}}
/* A visible invitation to play, followed by a small goal celebration. */
.landing[data-screen=intro] .brand{visibility:hidden;pointer-events:none}
.is-ready .intro #start{animation:copy-enter .7s .62s backwards,start-beat 2.2s 1.4s ease-in-out infinite;will-change:transform}
.is-ready .intro #start .play-icon{animation:play-beat 2.2s 1.4s ease-in-out infinite}
#start:after{animation:button-sheen 3.8s 1.2s infinite}
.answer.correct:after{content:'';position:absolute;inset:-70% -30%;background:linear-gradient(110deg,transparent 38%,#dcffe65c 49%,transparent 60%);pointer-events:none;transform:translateX(-100%);animation:correct-sheen .75s .15s both}
.answer.correct.reveal:after{animation-delay:.42s}
.answer.correct.celebrated{z-index:1;animation:answer-victory .85s cubic-bezier(.22,.75,.25,1) both;box-shadow:0 0 0 2px #7affab44,0 8px 28px #38ed8333}
.answer.correct.celebrated .answer-letter{animation:badge-victory .65s .05s both}
.answer.correct.celebrated>svg{width:24px;height:24px;animation:check-victory .65s .1s both;filter:drop-shadow(0 0 5px #86ffad66)}
.quiz-card[data-feedback=correct] .visual-halo{animation:goal-halo 1s ease-out both}
.quiz-card[data-feedback=correct] .question-visual>svg{animation:goal-icon .8s cubic-bezier(.22,.75,.25,1) both}
@keyframes start-beat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #81ff4a00,0 7px 28px #4dff3940,inset 0 2px 0 #c8ff9a7a}36%{transform:scale(1.025);box-shadow:0 0 0 7px #81ff4a24,0 10px 42px #4dff3970,inset 0 2px 0 #e0ffbfa0}65%{transform:scale(1);box-shadow:0 0 0 13px #81ff4a00,0 7px 28px #4dff3940,inset 0 2px 0 #c8ff9a7a}}
@keyframes play-beat{0%,100%{transform:scale(1)}36%{transform:scale(1.12)}65%{transform:scale(1)}}
@keyframes correct-sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes answer-victory{0%{transform:scale(1)}24%{transform:scale(1.025);box-shadow:0 0 0 4px #7affab50,0 0 36px #38ed8355}50%{transform:scale(.993)}75%{transform:scale(1.009)}100%{transform:scale(1)}}
@keyframes badge-victory{0%{transform:scale(.8) rotate(-16deg)}45%{transform:scale(1.16) rotate(8deg)}75%{transform:scale(.97) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes check-victory{0%{opacity:0;transform:scale(.3) rotate(-25deg);stroke-dashoffset:30}55%{opacity:1;transform:scale(1.25) rotate(7deg);stroke-dashoffset:0}100%{opacity:1;transform:scale(1) rotate(0);stroke-dashoffset:0}}
@keyframes goal-halo{0%{opacity:.6;transform:scale(.85)}35%{opacity:1;transform:scale(1.45)}100%{opacity:.85;transform:scale(1.1)}}
@keyframes goal-icon{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-8px) scale(1.12) rotate(-5deg)}65%{transform:translateY(2px) scale(.98) rotate(2deg)}}
@media(hover:hover){.is-ready .intro #start:hover{animation-play-state:paused;transform:translateY(-3px);box-shadow:0 0 0 5px #81ff4a24,0 10px 42px #4dff3970}}
.is-ready .intro #start:active{animation:none;transform:scale(.97)}
.topbar{justify-content:flex-end}
.result-summary{padding-bottom:24px}
.score-card{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:19px;width:min(100%,290px);margin:0 auto;padding:16px 20px;border:1px solid #a0ff8b80;border-radius:22px;background:radial-gradient(ellipse at 0 0,#67ff3b26,transparent 75%),linear-gradient(135deg,#1d4233,#0a211e);box-shadow:inset 0 1px 0 #e2ffcf30,0 8px 32px #0004,0 0 24px #6aff3b12;animation:score-enter .65s .15s backwards}
.score-card:after{content:'';position:absolute;inset:-100% -35%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#dfffbd24 49%,transparent 60%);transform:translateX(-100%);animation:correct-sheen 1.3s .35s both}
.score-number{display:flex;align-items:baseline;gap:7px;font-family:var(--display);white-space:nowrap}
.score-number strong{display:inline-block;font-size:58px;line-height:1;color:#a2ff66;text-shadow:0 0 20px #89ff4b33}
.score-number>span{font-size:22px;color:#b6d2c3}.score-number b{font-weight:600}
.score-details{display:grid;gap:9px;min-width:0;text-align:left}
.score-caption{font-size:9px;font-weight:700;letter-spacing:1.4px;line-height:1.4;color:#d4ebd9}
.score-steps{display:flex;gap:7px}
.score-step{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:16px;font-weight:700;animation:score-mark-enter .55s var(--step-delay) cubic-bezier(.16,1,.3,1) backwards}
.score-step.correct{background:#87ffab;color:#104629;box-shadow:0 0 12px #38ed8325}.score-step.wrong{background:#6b3542;color:#ffc2c8;border:1px solid #de8994}
.score-track{height:4px;border-radius:4px;background:#b4e5bc26;overflow:hidden}
.score-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38ed83,#bbff74);transform:scaleX(var(--score-fill,0));transform-origin:left;animation:score-fill .9s .3s cubic-bezier(.16,1,.3,1) backwards}
.download-card h3{max-width:370px;margin:0 auto;line-height:1.35;text-wrap:balance}
@keyframes score-fill{from{transform:scaleX(0)}to{transform:scaleX(var(--score-fill,0))}}
@keyframes score-mark-enter{from{opacity:0;transform:translateY(8px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:280px){.score-card{padding:12px 10px;gap:11px;border-radius:17px}.score-number strong{font-size:42px}.score-number>span{font-size:17px}.score-caption{font-size:8px;letter-spacing:.5px}.score-step{width:21px;height:21px;font-size:14px}.score-steps{gap:5px}.result-summary{padding-bottom:19px}}
@media(max-width:220px){.score-card{gap:8px;padding:10px 7px}.score-number{gap:3px}.score-number strong{font-size:34px}.score-number>span{font-size:14px}.score-caption{font-size:7px;letter-spacing:0}.score-step{width:17px;height:17px;font-size:11px}.score-steps{gap:4px}}
.result #download{animation:download-pulse 1.65s .35s ease-in-out infinite;box-shadow:0 8px 30px #6aff3b40,inset 0 2px 0 #d2ffa080}
.result #download:after{content:none;animation:none}
.result #download>svg:first-child{animation:download-icon-nudge 1.65s .35s ease-in-out infinite}
.result #download>svg:last-child{animation:download-arrow-nudge 1.65s .35s ease-in-out infinite}
@keyframes download-pulse{0%,65%,100%{transform:scale(1);box-shadow:0 0 0 0 #8bff5500,0 8px 30px #6aff3b40,inset 0 2px 0 #d2ffa080}22%{transform:scale(1.025);box-shadow:0 0 0 6px #8bff552b,0 12px 42px #6aff3b70,inset 0 2px 0 #e2ffc4a0}42%{transform:scale(1.008);box-shadow:0 0 0 12px #8bff5500,0 9px 35px #6aff3b50,inset 0 2px 0 #d2ffa080}}
@keyframes download-icon-nudge{0%,45%,100%{transform:translateY(0)}22%{transform:translateY(3px)}}
@keyframes download-arrow-nudge{0%,45%,100%{transform:translateX(0)}22%{transform:translateX(5px)}}
@media(hover:hover){.result #download:hover{animation:none;transform:translateY(-3px) scale(1.015);box-shadow:0 0 0 5px #8bff5524,0 12px 42px #6aff3b70,inset 0 2px 0 #e2ffc4a0}.result #download:hover>svg{animation:none}.result #download:hover>svg:last-child{transform:translateX(6px)}}
.result #download:active{animation:none;transform:scale(.97)}
.score-step>svg,.review-mark>svg{display:block;width:60%;height:60%;stroke-width:2.8}
/* One landscape layout, with a readable single column on very narrow devices. */
@media(orientation:landscape) and (max-width:1100px), (orientation:landscape) and (max-height:600px){
  body{padding:0}
  .landing{width:100%;max-width:1100px;min-height:100svh;border:0;border-radius:0;padding:16px max(18px,env(safe-area-inset-left)) 20px max(18px,env(safe-area-inset-right))}
  .topbar,.landing[data-screen=quiz] .topbar,.landing[data-screen=result] .topbar{display:none}
  .hero-image{background:linear-gradient(90deg,#03121600 0%,#03121644 26%,#031216e8 48%,var(--ink) 72%),url('assets/football-hero.webp') left top/50% auto no-repeat}
  .intro{width:52%;max-width:520px;margin-left:auto;padding-top:14px}
  h1{font-size:clamp(24px,4vw,44px);letter-spacing:-.8px}
  h1 strong{letter-spacing:-1px}
  .headline .crown{width:29px;height:23px;top:-21px;left:12%}
  .intro-copy{font-size:clamp(12px,1.8vw,16px);margin:10px auto 12px}
  .categories{gap:8px;margin:12px 0 15px}
  .category{padding:8px 3px;font-size:clamp(8px,1.3vw,12px);letter-spacing:.2px;border-radius:12px}
  .icon-disc{width:clamp(34px,5vw,54px);height:clamp(34px,5vw,54px);margin-bottom:6px}
  .icon-disc svg{width:80%;height:80%}
  .cta{min-height:48px;padding:9px 12px;font-size:clamp(19px,2.8vw,25px);gap:10px;margin-top:12px}
  .cta svg{width:22px;height:22px}
  .play-icon{width:28px;height:28px;font-size:14px}
  .benefits{flex-wrap:wrap;gap:7px 0;font-size:clamp(10px,1.4vw,13px);margin-top:13px}
  .benefits span{padding:0 8px;gap:4px}.benefits svg{width:15px;height:15px}
  .quiz{display:block;width:min(100%,900px);margin:auto;min-width:0}
  .quiz-card{padding:14px;border-radius:19px;min-width:0}
  .question-meta{padding:3px 0;margin-bottom:14px}
  .question-dots{gap:28px}
  .progress-step{width:36px;height:36px;font-size:16px}
  .progress-step:not(:last-child):after{left:38px;top:15px;width:20px}
  .progress-step.correct{font-size:22px}.progress-step.wrong{font-size:25px}
  .question-content{display:grid;grid-template-columns:clamp(110px,22vw,190px) minmax(0,1fr);grid-template-areas:'visual title' 'visual answers';grid-template-rows:auto 1fr;gap:10px 18px;align-items:start;min-width:0}
  .question-content>*{min-width:0}
  .question-visual{grid-area:visual;height:auto;min-height:200px;align-self:stretch;background-position:center 38%}
  .question-photo[src$="cr7.webp"]{object-position:50% 30%}
  .question-visual>span{max-width:calc(100% - 16px);font-size:8px;letter-spacing:.5px;padding:4px 5px;text-align:center;line-height:1.4}
  .quiz-card h3{grid-area:title;min-height:2.6em;margin:0;font-size:clamp(18px,2.35vw,23px);line-height:1.3}
  .answers{grid-area:answers;gap:8px}
  .answer{min-height:44px;padding:7px 10px;font-size:clamp(14px,1.8vw,17px);gap:10px}
  .answer-letter{width:28px;height:28px;font-size:12px}
  .answer>svg{width:18px;height:18px}
  .answer-feedback{min-height:36px;padding-top:9px}.answer-hint{font-size:11px;min-height:16px}.answer-countdown{margin-top:7px}
  .result{width:min(100%,940px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,36px);align-items:center;min-height:calc(100svh - 36px)}
  .result-summary,.result-actions{min-width:0}.result-summary{padding-bottom:0}
  .result-trophy{width:100px;height:100px;margin:0 auto 8px}.result-trophy>svg{width:84px;height:84px}
  .score-card{width:min(100%,270px);padding:12px 14px;gap:12px;border-radius:19px}.score-number strong{font-size:46px}.score-number>span{font-size:19px}
  .result h2{font-size:clamp(27px,4vw,42px);margin-top:15px;letter-spacing:-.7px;overflow-wrap:anywhere}
  .result-review{padding:3px 12px}.review-row{gap:9px;padding:9px 0}.review-row small{font-size:8px;letter-spacing:1px}.review-row strong{font-size:clamp(12px,1.7vw,15px);overflow-wrap:anywhere}
  .review-mark{width:25px;height:25px}
  .download-card{margin-top:14px}.download-card h3{font-size:clamp(16px,2.15vw,21px);line-height:1.35}
  .result .cta{margin-top:13px}.download-notice{margin-top:9px;font-size:12px}
}
@media(orientation:landscape) and (max-height:360px) and (min-width:480px){
  .landing{padding-top:12px;padding-bottom:15px}.intro{padding-top:11px}h1{font-size:clamp(23px,3.7vw,34px)}
  .intro-copy{margin:8px auto 10px}.categories{margin:10px 0 12px}.category{padding:6px 3px}.icon-disc{width:34px;height:34px;margin-bottom:4px}
  .question-meta{margin-bottom:12px}.question-visual{min-height:190px}.question-content{column-gap:14px}
  .result-trophy{width:78px;height:78px;margin-bottom:5px}.result-trophy>svg{width:66px;height:66px}
  .score-card{padding:10px 12px}.score-number strong{font-size:42px}.result h2{margin-top:12px;font-size:clamp(26px,3.7vw,34px)}
}
@media(orientation:landscape) and (min-width:480px) and (max-width:600px){
  .score-card{padding:10px;gap:9px}.score-number strong{font-size:40px}.score-number>span{font-size:17px}
  .score-caption{font-size:8px;letter-spacing:.6px}.score-step{width:21px;height:21px}.score-steps{gap:5px}
}
@media(orientation:landscape) and (max-width:479px){
  .landing{padding:16px max(14px,env(safe-area-inset-left)) 20px max(14px,env(safe-area-inset-right))}
  .hero-image{background:linear-gradient(180deg,#03121680,#031216e6 65%,var(--ink)),url('assets/football-hero.webp') center 28%/cover no-repeat}
  .intro{width:100%;max-width:380px;margin:auto;padding-top:16px}h1{font-size:clamp(22px,6.8vw,33px)}
  .question-content{display:block}.question-visual{height:150px;min-height:0}.question-visual>span{font-size:9px;letter-spacing:2px}
  .question-photo[src$="cr7.webp"]{object-position:50% 6%}
  .quiz-card h3{min-height:0;margin:13px 0;font-size:clamp(16px,4.5vw,21px)}.answer{font-size:14px}
  .result{display:block;max-width:430px;min-height:0}.result-summary{padding-bottom:18px}
  .result-trophy{width:85px;height:85px}.result-trophy>svg{width:70px;height:70px}.result h2{font-size:clamp(25px,7vw,35px)}
}
@media(max-width:280px){.question-visual>span{font-size:8px;letter-spacing:.5px;padding:4px 7px;line-height:1.4}}
.benefits b{font-weight:400}.handwritten>span:first-child{margin-left:0}
/* Translated phrases can be longer than the English display copy. */
html:not([lang=en]) h1{font-size:clamp(23px,6.6vw,44px);overflow-wrap:anywhere;text-wrap:balance}
html:not([lang=en]) h1 strong{font-size:1.12em;letter-spacing:-1px}
html:not([lang=en]) .handwritten{max-width:70%;font-size:clamp(16px,4.6vw,23px)}
html:not([lang=en]) .category{font-size:clamp(8px,2.2vw,12px);overflow-wrap:anywhere}
html:not([lang=en]) .benefits{flex-wrap:wrap;gap:8px 0;font-size:clamp(9px,2.5vw,14px)}
html:not([lang=en]) .benefits span{padding:0 8px}
html:not([lang=en]) .question-visual>span{white-space:normal;letter-spacing:.7px;text-align:center;overflow-wrap:anywhere}
html:not([lang=en]) .result h2{font-size:clamp(25px,7vw,40px);overflow-wrap:anywhere;text-wrap:balance}
html:not([lang=en]) .score-caption{letter-spacing:.6px;overflow-wrap:anywhere}
html:not([lang=en]) .review-row>span:last-child{min-width:0;overflow-wrap:anywhere}
html:not([lang=en]) #download-label{min-width:0;overflow-wrap:anywhere;text-align:center}
@media(orientation:landscape) and (max-width:1100px), (orientation:landscape) and (max-height:600px){html:not([lang=en]) h1{font-size:clamp(22px,3.5vw,38px)}html:not([lang=en]) .result h2{font-size:clamp(24px,3.4vw,36px)}html:not([lang=en]) .benefits{font-size:clamp(9px,1.3vw,12px)}}
@media(orientation:landscape) and (max-width:479px){html:not([lang=en]) h1{font-size:clamp(22px,6vw,30px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.is-ready .hero-image{opacity:1;transform:none;filter:none}.answer-countdown.running>span{transform:scaleX(1)}.answer.correct:after,.score-card:after{display:none}}