:root{--ink:#07070c;--panel:#11111a;--cream:#fff5dc;--gold:#ffd447;--red:#ff3c45}*{box-sizing:border-box}html,body{min-height:100%}body{color:var(--cream);background:var(--ink);margin:0;font-family:Impact,Haettenschweiler,Arial Narrow Bold,Arial,sans-serif}button,select{font:inherit}button{color:inherit}.title-screen,.result-screen{isolation:isolate;background:#04070d;place-content:center;justify-items:center;min-height:100vh;display:grid;position:relative;overflow:hidden}.title-screen:before,.title-screen:after{content:"";z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 47%,#0000 0 18%,#0000002e 43%,#000000c7 100%);position:absolute;inset:0}.title-screen:after{mix-blend-mode:screen;background:linear-gradient(105deg,#0000 20%,#5acbff2e 47%,#ffaa2a24 53%,#0000 80%);animation:5.8s ease-in-out infinite titleSweep}.title-art{z-index:-2;background:url(/assets/title/beastfall-hero.png) 50%/cover no-repeat;animation:12s ease-in-out infinite alternate titleDrift;position:absolute;inset:-4%}.title-storm,.title-embers{z-index:0;pointer-events:none;position:absolute;inset:0}.title-storm{opacity:.3;background:repeating-linear-gradient(112deg,#0000 0 11%,#b4e1ff73 11.15%,#0000 11.4% 23%) 0 0/180% 180%;animation:1.1s linear infinite titleRain}.title-embers{opacity:.5;background-image:radial-gradient(circle,#ffdc79 0 1px,#0000 2px),radial-gradient(circle,#ff6a32 0 2px,#0000 3px);background-size:73px 91px,121px 137px;animation:7s linear infinite embersRise}.title-noise{z-index:2;opacity:.07;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,#0000 0 3px,#fff 4px);position:absolute;inset:0}.eyebrow{z-index:3;color:var(--gold);letter-spacing:.42em;margin:0 0 6px;font-family:Arial,sans-serif;font-size:13px;font-weight:900;position:relative}.title-screen h1{z-index:3;letter-spacing:-.08em;text-transform:uppercase;text-shadow:0 0 28px #ffd04742, 7px 9px 0 #000, 10px 12px 0 var(--red);margin:0;font-size:clamp(76px,14vw,190px);font-style:italic;line-height:.82;position:relative;transform:skew(-6deg)}.title-screen h1 span{color:var(--gold)}.subtitle{z-index:3;color:#111;background:var(--cream);letter-spacing:.64em;margin:24px 0 54px;padding:7px 30px;font:900 20px Arial,sans-serif;position:relative;transform:skew(-7deg)}.title-actions,.result-actions{z-index:3;gap:14px;display:flex;position:relative}.arcade-button{cursor:pointer;letter-spacing:.07em;text-transform:uppercase;background:#08080ead;border:2px solid #ffffff6b;min-width:220px;padding:16px 24px;font:italic 900 17px Arial,sans-serif;transition:transform .16s,background .16s,color .16s;transform:skew(-6deg)}.arcade-button:hover{color:#111;background:#fff;transform:skew(-6deg)translateY(-4px)}.arcade-button.primary{border-color:var(--gold);background:var(--gold);color:#17100a}.arcade-button.primary:hover{background:var(--cream)}.legal-note{opacity:.48;letter-spacing:.08em;font:11px Arial,sans-serif;position:absolute;bottom:18px}@keyframes titleDrift{0%{transform:scale(1.025)translate(-.7%,-.3%)}to{transform:scale(1.085)translate(.7%,.6%)}}@keyframes titleRain{0%{background-position:0 -100%}to{background-position:-35% 100%}}@keyframes embersRise{0%{background-position:0 100%,40px 130%}to{background-position:15px -20%,15px -35%}}@keyframes titleSweep{0%,72%,to{opacity:.15;transform:translate(-18%)}80%{opacity:.8;transform:translate(18%)}}.select-screen{background:linear-gradient(#07070ce3,#07070cf7),url(/assets/arenas/mexico-city-rooftop.png) 50%/cover fixed;min-height:100vh;padding:30px clamp(18px,4vw,68px) 46px}.select-header{border-bottom:1px solid #ffffff2e;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1480px;margin:0 auto 25px;padding-bottom:18px;display:grid}.select-header div{text-align:center}.select-header p{color:var(--red);letter-spacing:.4em;margin:0;font:900 12px Arial,sans-serif}.select-header h1{letter-spacing:-.02em;margin:4px 0 0;font-size:clamp(24px,4vw,52px);font-style:italic}.select-header>span{color:var(--gold);letter-spacing:.16em;justify-self:end;font:900 13px Arial,sans-serif}.select-nav{gap:20px;display:flex;text-align:left!important}.text-button{color:#ffffffb3;cursor:pointer;letter-spacing:.13em;background:0 0;border:0;width:max-content;padding:8px 0;font:900 12px Arial,sans-serif}.text-button:hover{color:var(--gold)}.roster{grid-template-columns:repeat(8,minmax(100px,1fr));gap:9px;max-width:1480px;margin:0 auto;display:grid}.roster-card{--accent:#fff;aspect-ratio:.78;cursor:pointer;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);background:#181822;border:2px solid #ffffff2b;min-height:165px;padding:0;transition:border-color .15s,transform .15s,filter .15s;position:relative;overflow:hidden}.roster-card img{object-fit:cover;object-position:50% 37%;transition:transform .2s}.roster-card:hover:not(.locked),.roster-card.selected{z-index:2;border-color:var(--accent);transform:translateY(-6px)scale(1.035)}.roster-card:hover:not(.locked) img,.roster-card.selected img{transform:scale(1.06)}.roster-card.selected{box-shadow:0 0 25px color-mix(in srgb, var(--accent), transparent 50%)}.roster-card.locked{filter:saturate(.35)brightness(.62);cursor:default}.card-shade{background:linear-gradient(#0000 36%,#05050af2);position:absolute;inset:0}.fighter-name{text-align:left;text-shadow:2px 2px #000;font-size:clamp(15px,1.7vw,25px);font-style:italic;line-height:.9;position:absolute;inset:auto 10px 10px}.fighter-name small{color:var(--accent);letter-spacing:.08em;margin-top:7px;font:800 8px Arial,sans-serif;display:block}.coming{z-index:2;color:#111;background:var(--gold);letter-spacing:.08em;padding:4px 7px;font:900 8px Arial,sans-serif;position:absolute;top:12px;left:8px}.fighter-panel{--accent:#fff;border-left:6px solid var(--accent);background:#15151eeb;grid-template-columns:1.15fr .55fr .55fr 1fr auto;align-items:center;gap:20px;max-width:1480px;margin:20px auto 0;padding:20px 24px;display:grid;box-shadow:0 20px 80px #00000070}.fighter-copy p{color:var(--accent);letter-spacing:.13em;text-transform:uppercase;margin:0 0 2px;font:800 10px Arial,sans-serif}.fighter-copy h2{margin:0;font-size:44px;font-style:italic;line-height:1}.fighter-copy strong{color:var(--gold);text-transform:uppercase;margin:7px 0;font:900 13px Arial,sans-serif;display:block}.fighter-copy>span{color:#ffffff9e;font:12px/1.45 Arial,sans-serif}.stats{gap:7px;display:grid}.stat{grid-template-columns:36px 1fr;align-items:center;gap:9px;font:900 9px Arial,sans-serif;display:grid}.stat i{background:#302b36;height:8px}.stat i:after{content:"";width:var(--value);background:var(--accent);height:100%;display:block}.opponent-pick{gap:6px;display:grid}.opponent-pick label{letter-spacing:.14em;font:900 9px Arial,sans-serif}.opponent-pick select{color:#fff;background:#0b0b11;border:1px solid #514b57;min-width:125px;padding:10px}.circuit-route{background:#ffd44712;border:1px solid #4b4652;align-content:center;gap:7px;max-width:360px;padding:12px 15px;display:grid}.circuit-route b{color:var(--gold);letter-spacing:.14em;font:900 12px Arial,sans-serif}.circuit-route span{color:#ffffffad;letter-spacing:.05em;font:700 9px/1.5 Arial,sans-serif}.match-options{gap:6px;display:grid}.match-options>label{letter-spacing:.14em;font:900 9px Arial,sans-serif}.match-options select{color:#fff;background:#0b0b11;border:1px solid #514b57;width:100%;max-width:250px;padding:9px;font-size:10px}.control-toggle{grid-template-columns:repeat(3,1fr);display:grid}.control-toggle button{color:#aaa;letter-spacing:.1em;background:#0b0b11;border:1px solid #514b57;padding:7px 10px;font:900 9px Arial,sans-serif}.control-toggle button.active{border-color:var(--accent);color:#09090d;background:var(--accent)}.fight-button{min-width:190px}.game-screen{background:radial-gradient(circle,#222634,#050508 72%);place-content:center;min-height:100vh;display:grid;overflow:hidden}.fight-canvas{background:#111;width:min(100vw,177.77vh);height:auto;max-height:100vh;display:block;box-shadow:0 0 80px #000}.game-toolbar{z-index:8;pointer-events:none;justify-content:space-between;display:flex;position:fixed;inset:120px 18px auto}.game-toolbar button{pointer-events:auto;background:#040408b3;padding:8px 11px}.circuit-progress{z-index:5;letter-spacing:.08em;pointer-events:none;background:#04050abf;border:1px solid #ffd4476b;align-items:center;gap:10px;padding:6px 13px;font:800 10px Arial,sans-serif;display:flex;position:absolute;top:120px;left:50%;transform:translate(-50%)skew(-7deg)}.circuit-progress span{color:var(--gold)}.circuit-progress em{color:#ffffff9e;font-style:normal}.move-list{z-index:9;border:1px solid #ffffff38;border-left:5px solid var(--gold);background:#08080df0;width:min(520px,100vw - 40px);padding:20px 22px;font-family:Arial,sans-serif;position:fixed;bottom:20px;right:20px;box-shadow:0 20px 60px #000}.move-list h2{color:var(--gold);letter-spacing:.08em;margin:0 0 8px;font:900 15px Impact,sans-serif}.move-list p{color:#ffffffb8;margin:7px 0 14px;font-size:12px}kbd{color:#fff;text-align:center;background:#24232b;border:1px solid #777;border-bottom-width:3px;border-radius:4px;min-width:24px;margin:0 2px;padding:4px 6px;font-weight:800;display:inline-block}.move-tip{border-top:1px solid #333;padding-top:11px;margin-bottom:0!important}.help-backdrop{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#020307d1;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.help-menu{border:1px solid #ffffff3d;border-left:7px solid var(--gold);background:linear-gradient(145deg,#191924fa,#06060bfa);width:min(900px,100%);max-height:min(760px,100vh - 40px);padding:30px 34px 26px;font-family:Arial,sans-serif;position:relative;overflow:auto;box-shadow:0 28px 100px #000}.help-kicker{color:var(--red);letter-spacing:.3em;margin:0 0 4px;font:900 10px Arial,sans-serif}.help-menu>h2{color:var(--cream);letter-spacing:.02em;margin:0 0 24px;font:italic 900 clamp(30px,5vw,55px)/.95 Impact,sans-serif}.help-close{color:#fff;cursor:pointer;background:#12121a;border:1px solid #555;width:42px;height:42px;font:32px/1 Arial,sans-serif;position:absolute;top:12px;right:15px}.help-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.help-columns section{background:#ffffff09;border:1px solid #ffffff24;padding:18px}.help-columns section:last-child:nth-child(3){grid-column:1/-1}.help-columns h3{color:var(--gold);letter-spacing:.1em;margin:0 0 12px;font:900 16px Impact,sans-serif}.help-columns p{color:#ffffffc2;margin:9px 0;font-size:13px;line-height:1.5}.help-columns b{color:#fff}.help-tip{color:#ffffff94;letter-spacing:.04em;border-top:1px solid #333;margin:18px 0 0;padding-top:16px;font:800 11px/1.5 Arial,sans-serif}.touch-controls{z-index:15;inset:auto max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;justify-content:space-between;align-items:end;display:flex;position:fixed}.touch-dpad{pointer-events:auto;width:208px;height:146px;position:relative}.touch-button{color:#fff;pointer-events:auto;touch-action:none;text-shadow:1px 2px #000;background:#090a11c2;border:2px solid #ffffff8c;border-radius:50%;width:66px;height:66px;font:900 12px Arial,sans-serif;box-shadow:inset 0 0 0 4px #ffffff0f,0 5px 18px #00000080}.touch-button:active{background:var(--gold);color:#111;text-shadow:none;transform:scale(.9)}.touch-up{position:absolute;top:0;left:71px}.touch-left{position:absolute;bottom:0;left:0}.touch-down{position:absolute;bottom:0;left:71px}.touch-right{position:absolute;bottom:0;right:0}.touch-actions{pointer-events:auto;grid-template-columns:repeat(3,1fr);gap:10px;width:min(390px,43vw);display:grid}.touch-actions .touch-button{border-radius:14px;width:100%;height:58px}.touch-punch,.touch-kick{border-color:#77d8ff}.touch-blast{background:#533504c7;border-color:#ffd447}.touch-super{background:#5b0819cc;border-color:#ff5364}.touch-upper,.touch-throw{opacity:.82;font-size:10px;height:42px!important}.game-screen:has(.touch-controls) .fight-canvas{max-height:calc(100vh - 104px)}.game-screen:has(.touch-controls) .game-toolbar{inset-block-start:82px}.game-screen:has(.touch-controls) .circuit-progress{top:82px}.result-screen{background-position:50%;background-size:cover}.result-screen:after{content:"";z-index:-1;background:#050509a8;position:absolute;inset:0}.result-card{border:2px solid var(--accent);text-align:center;box-shadow:0 0 100px color-mix(in srgb, var(--accent), transparent 67%);background:#08080de0;padding:60px 80px}.result-card p{color:var(--gold);letter-spacing:.3em;font:900 13px Arial,sans-serif}.result-card h1{color:var(--accent);text-shadow:6px 6px #000;margin:0;font-size:clamp(70px,11vw,150px);font-style:italic;line-height:.85}.result-card strong{letter-spacing:.18em;margin:22px 0 40px;font:900 18px Arial,sans-serif;display:block}@media (max-width:1050px){.roster{grid-template-columns:repeat(5,1fr)}.fighter-panel{grid-template-columns:1fr 1fr}.fighter-copy{grid-row:span 2}.fight-button{width:100%}}@media (max-width:650px){.title-actions,.result-actions{flex-direction:column}.subtitle{letter-spacing:.3em}.select-header{grid-template-columns:auto 1fr}.select-header>span{display:none}.roster{grid-template-columns:repeat(3,1fr)}.roster-card{min-height:130px}.fighter-panel{grid-template-columns:1fr}.fighter-copy{grid-row:auto}.result-card{margin:15px;padding:45px 20px}.help-columns{grid-template-columns:1fr}.help-columns section:last-child:nth-child(3){grid-column:auto}}@media (orientation:landscape) and (max-width:1200px){.touch-controls{inset-block-end:max(8px, env(safe-area-inset-bottom))}.touch-dpad{width:178px;height:126px}.touch-button{width:58px;height:58px}.touch-up,.touch-down{left:60px}.touch-actions{gap:7px;width:min(360px,44vw)}.touch-actions .touch-button{height:50px}.touch-upper,.touch-throw{height:38px!important}.help-menu{max-height:calc(100vh - 20px);padding:20px 25px}.help-menu>h2{margin-bottom:15px;font-size:35px}.help-columns section{padding:12px 15px}.help-columns p{margin:6px 0;font-size:11px}}