/* ARENA 12 — charcoal, fire and worn gold. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');
:root{--bg:#090b0e;--ink:#f3eee3;--gold:#e6b95f;--muted:#a9a9aa;--line:#d3ab5833;--fire:#ff6432}
body{font-family:Barlow,Arial,sans-serif;background:radial-gradient(ellipse at 10% 80%,#54251944,transparent 60%),#090b0e}
header{background:#090b0ef0;border-bottom:1px solid #b58d434d;height:80px;position:relative;z-index:2}
.brand{gap:12px}.brand span{font-family:'Barlow Condensed',Impact,sans-serif;font-size:20px;font-weight:600;letter-spacing:4px}
.rebel-mark{width:49px;height:49px;fill:none;stroke:var(--gold);stroke-width:1.8}.rebel-mark path:first-of-type{fill:var(--gold);stroke:none}
main{max-width:1800px;grid-template-columns:54% 46%;min-height:calc(100svh - 80px)}
.landscape{background:#101620;isolation:isolate;min-height:850px;border-right:1px solid var(--line)}
.landscape:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#070a10e8 0%,#070a1077 25%,transparent 52%,#d43f1214 90%,#ff7e281a);z-index:0}
.arena-label{position:absolute;bottom:54px;left:7%;z-index:2;font:600 10px Barlow,sans-serif;letter-spacing:3px;color:#d2b77f}.arena-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fa663d;margin-left:8px;box-shadow:0 0 12px #ff6b33}
.scene-heading{left:7%;right:5%;top:6%;z-index:1}.scene-heading .eyebrow{letter-spacing:3px;color:#f3bd61;font-size:10px}
h1{font:600 clamp(34px,3.8vw,64px)/.99 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:1px;margin:22px 0;text-shadow:0 2px 30px #000}
h1 em{font-style:normal;color:#f2bd62}.title-dash{display:none}.scene-heading p{color:#c9c5bd;max-width:380px;font-size:13px}
#mountain{min-height:850px;filter:contrast(1.1);padding-top:60px}.arena-rings{opacity:.16;stroke-width:1}.fireline{transform-origin:bottom;animation:fire-breathe 3s ease-in-out infinite alternate;opacity:.9}
.scene-bottom{left:7%;bottom:23px;color:#dbc48b;z-index:2;font:600 9px 'Barlow Condensed',sans-serif;letter-spacing:2px}.scene-bottom span:last-child{max-width:190px;text-align:right;line-height:1.5}
.panel{padding:45px clamp(24px,4.4vw,74px) 20px;background:linear-gradient(155deg,#191c2080,#090b0e 60%);position:relative}
.panel:before{position:absolute;content:'';top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#bd8a3a,transparent)}
#screen{max-width:560px}.tag{border-radius:0;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);border:0;background:#d4a95b19;padding:10px 14px;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:2px}
h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.6px}h2{font-size:clamp(32px,3vw,48px);line-height:1.05;margin:22px 0}
p{font-size:14px;line-height:1.65}strong{color:#ead6a9;font-weight:600}.mission-rules{border-top:1px solid var(--line);margin-top:23px}.mission-rules>div{padding:15px 0;border-bottom:1px solid #ffffff0d}.mission-rules b{font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:1.8px;font-size:13px;color:var(--gold)}.mission-rules p{font-size:13px;margin:7px 0 0;line-height:1.65}.mission-rules .danger-rule b{color:#ff7859}.mission-rules .danger-rule{border-left:2px solid #c14d36;padding-left:14px;background:linear-gradient(90deg,#bc31200d,transparent)}
.intro-line{display:none}.facts{gap:35px;margin:22px 0}.facts b{font:600 32px 'Barlow Condensed',Impact,sans-serif;color:var(--gold);margin:0}.facts span{font:500 9px Barlow,sans-serif;letter-spacing:1.4px}
button{border-radius:0;background:linear-gradient(120deg,#e3bf75,#c18a37);color:#13100b;font-family:'Barlow Condensed',Arial,sans-serif;font-size:17px;letter-spacing:1.2px;text-transform:uppercase;padding:17px 21px;position:relative}
button:hover{background:#f3d18e;box-shadow:0 0 30px #fbb13e20}.wide{border:1px solid #f8d58d}.wide span{font-size:24px}.quiet{background:none;font:600 11px Barlow,sans-serif;color:#c2b79e;letter-spacing:1px}.quiet:hover{box-shadow:none}
input{border-radius:0;padding:17px;background:#12161b;border-color:#8c795d66;font-family:Barlow,sans-serif;font-size:16px}input:focus{box-shadow:0 0 0 2px #e3bf751f}
.question{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(26px,2.4vw,37px);text-transform:none;line-height:1.18;letter-spacing:.4px;margin:20px 0 28px}.film{font:600 11px Barlow,sans-serif;letter-spacing:1.2px;color:#c5b08b;text-transform:uppercase}.question-top .small{font-size:8px;letter-spacing:1px;color:#f08568}.progress{height:4px;margin:16px 0 25px}.progress i{background:linear-gradient(90deg,#b77f35,#ffd47c);box-shadow:0 0 14px #f6a33755}
.hint{border-color:var(--line)}.hint button{text-transform:none;font:500 12px Barlow,sans-serif;letter-spacing:.3px;background:none}.hint button:hover{box-shadow:none;color:#fff0ce}.hint p{border-color:#dfb779;background:#f3be6309}.choice{font-family:Barlow,sans-serif;text-transform:none;letter-spacing:0;background:#12161b}.choice:hover{box-shadow:none;background:#dcb26416}.choice span{border-radius:0}.notice{color:#f2a18b}
.route-instruction{border-radius:0;border-color:var(--line);background:#d1a85d0c}.route-icon{color:var(--gold)}footer{color:#837a68;border-color:var(--line)}dialog{background:#101318;border-radius:0;border-color:#cda35b;max-width:600px;padding:30px;max-height:90svh}dialog::backdrop{background:#020306df}
#toast{background:#14171c;border-radius:0;border-color:#b38d4b;color:#edcf91;font-family:'Barlow Condensed',Arial,sans-serif;letter-spacing:1px;font-size:16px;z-index:30}
#sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:.75}.scanlines{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px)}
#fallOverlay{display:none;position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none;background:#820d0dc9;color:#fff0e7}
#fallOverlay.active{display:block;animation:fall-screen 3.6s ease-out both}.fall-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#ff482729,#c91212b3 70%,#270000);box-shadow:inset 0 0 120px #0009}
.fall-caption{position:absolute;z-index:3;top:15%;left:6%;right:6%;text-align:center;text-shadow:0 3px 30px #340000}.fall-caption>span{font:600 11px Barlow,sans-serif;letter-spacing:5px;color:#ffc2a9}.fall-caption>strong{display:block;font:800 clamp(64px,13vw,160px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:2px;color:#fff2d9;margin:18px 0}.fall-caption p{color:#ffe0d6;font-size:16px}.fall-caption>b{display:inline-block;padding:12px 18px;background:#17070799;border:1px solid #ffb28b66;font:600 15px 'Barlow Condensed',Arial,sans-serif;letter-spacing:3px}
.fall-figure{position:absolute;z-index:2;width:clamp(130px,24vw,260px);height:clamp(180px,30vw,340px);left:calc(50% - 100px);top:46%;filter:drop-shadow(0 0 17px #ffb963);animation:tumble 3.6s cubic-bezier(.3,0,.8,.6) both}.fall-figure text{display:none}
.fall-speedlines{position:absolute;inset:-100%;background:repeating-conic-gradient(from 0deg at 50% 65%,transparent 0deg 12deg,#ffccab33 12.5deg 13deg,transparent 13.5deg 24deg);animation:rush .7s linear infinite}
.fall-debris{position:absolute;inset:0;background-image:radial-gradient(circle at 10% 80%,#ffa56b 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#f6c293 0 4px,transparent 5px),radial-gradient(circle at 60% 90%,#ff7846 0 3px,transparent 4px);background-size:270px 310px;animation:debris .5s linear infinite}
.impact-ring{position:absolute;left:50%;top:80%;width:50px;height:50px;border:3px solid #ffc29c;border-radius:50%;opacity:0;animation:impact 3.6s ease-out both}.arena-fall main,.arena-fall header{animation:camera-shake .65s ease-out 3}.hero-drop{animation:mountain-drop 1.9s ease-in forwards;transform-box:fill-box;transform-origin:center}#hero{filter:drop-shadow(0 0 8px #ffc46688)}
#successFlare{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 30% 80%,#ffb03733,transparent 70%);border:2px solid #e4b45a88}.answer-correct #successFlare{animation:success .9s ease-out}
@keyframes fire-breathe{to{transform:scaleY(1.055);filter:drop-shadow(0 0 22px #ff481c)}}
@keyframes fall-screen{0%{background:#ff3c20ee;opacity:0}7%{opacity:1}18%{background:#ad1212dd}88%{opacity:1}100%{opacity:0}}
@keyframes tumble{0%{transform:translate(-12vw,-18vh) rotate(-20deg) scale(.7);opacity:0}12%{opacity:1}32%{transform:translate(8vw,0) rotate(110deg)}62%{transform:translate(-8vw,22vh) rotate(290deg);opacity:1}88%,100%{transform:translate(12vw,80vh) rotate(560deg) scale(1.2);opacity:0}}
@keyframes rush{to{transform:scale(1.45)}}@keyframes debris{to{transform:translateY(-310px)}}
@keyframes impact{0%,65%{opacity:0;transform:translate(-50%,-50%) scale(0)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(25)}}
@keyframes camera-shake{0%,100%{transform:translate(0)}15%{transform:translate(-8px,4px) rotate(-.4deg)}30%{transform:translate(9px,-6px)}45%{transform:translate(-6px,3px)}60%{transform:translate(5px,-3px)}80%{transform:translate(-3px,1px)}}
@keyframes mountain-drop{to{translate:80px 370px;rotate:220deg;opacity:0}}@keyframes success{15%{opacity:1}100%{opacity:0}}
@media(max-width:850px){header{height:66px}.brand span{font-size:15px;letter-spacing:2.5px}.rebel-mark{width:39px;height:39px}main{display:block}.landscape{height:510px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}#mountain{min-height:0;height:590px;top:5px;padding-top:0}.scene-heading{top:25px;left:7%;right:7%}.scene-heading h1{font-size:clamp(32px,7.6vw,52px);max-width:400px;line-height:.98;margin:15px 0}.scene-heading .eyebrow{max-width:none;font-size:8px}.scene-heading p{max-width:220px;font-size:11px}.arena-label{font-size:8px;bottom:48px}.scene-bottom{font-size:8px;bottom:22px}.panel{padding:32px 7% 20px;min-height:0}h2{font-size:36px}.mission-rules p{font-size:13px}.question{font-size:29px}.facts{gap:35px}body.playing .landscape{height:315px}body.playing #mountain{height:510px;top:-118px}body.playing .scene-heading h1{font-size:29px;max-width:190px}body.playing .scene-heading .eyebrow{max-width:200px;font-size:8px}.question-top{gap:10px}.question-top .small{max-width:85px;text-align:right}.fall-caption{top:18%}.fall-caption>strong{font-size:23vw}.fall-caption p{font-size:14px}.fall-figure{left:calc(50% - 80px)}dialog{width:90%;padding:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#fallOverlay.active{background:#781d1df2}.fall-figure{display:none}.fall-speedlines,.fall-debris{display:none}}