*{margin:0;padding:0;box-sizing:border-box}:root{--red: #d42b2b;--white: #ffffff;--font: "Bebas Neue", "Helvetica Neue", system-ui, sans-serif;--mono: "Bebas Neue", "Helvetica Neue", system-ui, sans-serif}html,body{width:100%;height:100%;overflow:hidden;background:var(--red);font-family:var(--font);color:var(--white);-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;position:relative;isolation:isolate}#map{width:100%;height:100%;position:relative;z-index:0}.mapboxgl-ctrl-attrib{opacity:.2;font-size:9px!important;font-family:var(--mono)!important}#start-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#d42b2be6;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:40;transform:translateZ(0)}#start-screen.hidden{display:none}#start-inner{text-align:center}#start-screen h1{font-family:var(--font);font-size:clamp(64px,16vw,140px);font-weight:700;line-height:.92;color:var(--white);letter-spacing:.04em;text-transform:uppercase}#start-rule{width:60px;height:3px;background:var(--white);margin:24px auto}#start-screen p{font-family:var(--font);font-size:15px;font-weight:400;color:#ffffffb3;margin-bottom:4px;letter-spacing:.04em}#start-screen .subtitle{font-family:var(--mono);font-size:11px;color:#ffffff80;letter-spacing:.06em;margin-bottom:32px}#difficulty-toggle{display:flex;justify-content:center;gap:0;margin-bottom:28px}.diff-btn{background:none;border:2px solid var(--white);padding:10px 28px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;cursor:pointer;color:#fff9;transition:all .15s ease}.diff-btn:first-child{border-right:1px solid var(--white)}.diff-btn:last-child{border-left:1px solid var(--white)}.diff-btn.active{background:var(--white);color:var(--red);border-color:var(--white)}.diff-btn:not(.active):hover{background:#ffffff1a}#start-btn{background:var(--white);color:var(--red);border:2px solid var(--white);padding:16px 48px;font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.16em;text-transform:uppercase;transition:opacity .1s}#start-btn:hover{opacity:.85}#quiz-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;max-width:calc(100vw - 48px);z-index:10;background:var(--red);border:2px solid var(--white);padding:20px 28px 24px;animation:panelIn .35s cubic-bezier(.22,1,.36,1) both}#quiz-panel.hidden{display:none}#quiz-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#fff9;text-transform:uppercase}#quiz-score{font-weight:700;font-size:13px}#quiz-divider{height:1px;background:#ffffff40;margin:12px 0}#quiz-question{font-family:var(--font);font-size:24px;font-weight:500;line-height:1.3;color:var(--white);text-transform:uppercase;letter-spacing:.04em;margin-bottom:20px}#quiz-options{display:flex;flex-direction:column;gap:8px}.option-btn{display:flex;align-items:center;gap:14px;width:100%;background:transparent;border:2px solid var(--white);padding:14px 18px;font-family:var(--font);font-size:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--white);cursor:pointer;text-align:left;transition:background .12s ease,transform .1s ease;animation:optionIn .3s cubic-bezier(.22,1,.36,1) both}.option-btn:hover:not(.disabled){background:#ffffff1a;transform:translate(4px)}.option-btn .option-letter{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;color:#ffffff80;min-width:18px}.option-btn .option-text{flex:1}.option-btn.correct{background:var(--white);color:var(--red);border-color:var(--white);cursor:default}.option-btn.correct .option-letter{color:var(--red)}.option-btn.wrong{border-color:var(--white);opacity:.3;cursor:default}.option-btn.disabled{cursor:default;opacity:.3}#result-overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--red);pointer-events:auto;animation:overlayFadeIn .3s ease both;transform:translateZ(0)}#result-overlay.hidden{display:none}#result-word{font-family:var(--font);font-size:clamp(48px,14vw,160px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1;text-align:center;padding:0 24px;color:var(--white);animation:answerPop .4s cubic-bezier(.16,1,.3,1) both}#result-overlay.is-wrong #result-word{opacity:.5}#result-explanation{font-family:Space Mono,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--white);text-align:center;max-width:500px;padding:0 24px;margin-top:24px;opacity:.7;letter-spacing:0;text-transform:none;animation:fadeIn .4s ease .2s both}.yt-icon{vertical-align:-1px;margin-right:6px;flex-shrink:0}.yt-link{display:inline-flex;align-items:center;margin-top:20px;padding:10px 24px;font-family:Space Mono,Courier New,monospace;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--white);border:1px solid var(--white);text-decoration:none;text-transform:none;transition:background .15s ease;animation:fadeIn .3s ease .25s both}.yt-link:hover{background:#ffffff1a}#result-next-btn{margin-top:24px;background:var(--white);color:var(--red);border:2px solid var(--white);padding:16px 48px;font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.16em;text-transform:uppercase;transition:opacity .1s;animation:fadeIn .3s ease .3s both}#result-next-btn:hover{opacity:.85}#scorecard{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--red);z-index:30;animation:fadeIn .4s ease;transform:translateZ(0)}#scorecard.hidden{display:none}#scorecard-inner{text-align:center;max-width:520px;width:90%;padding:48px 32px 40px;animation:scoreCardIn .4s ease}#scorecard-badge{margin-bottom:24px;animation:fadeIn .5s ease .1s both}.badge-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.25em;color:#fff9;text-transform:uppercase}#scorecard-total{text-align:center;margin-bottom:32px}.total-number{font-family:var(--mono);font-size:120px;font-weight:700;color:var(--white);line-height:1;letter-spacing:.02em;animation:totalPop .4s cubic-bezier(.34,1.4,.64,1) both}.total-label{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.3em;color:#fff9;margin-top:8px;animation:fadeIn .3s ease both}#scorecard-rule{width:48px;height:2px;background:var(--white);margin:0 auto 28px;animation:fadeIn .3s ease .4s both}#scorecard-body{text-align:left;margin-bottom:36px}.scorecard-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2);animation:rowSlideIn .3s ease both}.scorecard-row .q-label{color:#fff9;font-weight:400;flex:1;margin-right:12px;font-size:12px;letter-spacing:.02em;line-height:1.4}.scorecard-row .q-result{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:.1em;color:var(--white)}.scorecard-row .q-result.is-wrong{opacity:.4}#scorecard-brand{font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.25em;color:#ffffff4d;text-transform:uppercase;margin-bottom:28px;animation:fadeIn .3s ease .8s both}#play-again-btn{background:var(--white);color:var(--red);border:2px solid var(--white);padding:16px 48px;font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.16em;text-transform:uppercase;transition:opacity .1s}#play-again-btn:hover{opacity:.85}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes panelIn{0%{opacity:0;transform:translate(-50%,-50%) translateY(20px)}to{opacity:1;transform:translate(-50%,-50%) translateY(0)}}@keyframes optionIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes answerPop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes scoreCardIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes rowSlideIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes totalPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){#quiz-panel{width:auto;left:12px;right:12px;max-width:none;transform:translateY(-50%);padding:14px 18px 18px}#quiz-panel.hidden{display:none}@keyframes panelIn{0%{opacity:0;transform:translateY(-50%) translateY(20px)}to{opacity:1;transform:translateY(-50%) translateY(0)}}#quiz-question{font-size:18px}.option-btn{padding:12px 14px;font-size:14px}#start-screen h1{font-size:clamp(48px,14vw,100px)}.total-number{font-size:72px}#scorecard-inner{padding:32px 20px 28px}.yt-link{font-size:11px;padding:8px 18px}}
