*{margin:0;padding:0;box-sizing:border-box}:root{--gold: #f2b134;--gold-lt: #ffe08a;--red: #e0552e;--ink: #140d08}html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;color:#fff;user-select:none}#app{position:fixed;inset:0}#game{display:block;width:100%;height:100%}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(0,0,0,.55) 100%);z-index:5}#grunge{position:absolute;inset:0;pointer-events:none;opacity:.06;z-index:6;background-image:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px);mix-blend-mode:overlay}#flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;z-index:7}#flash.hit{animation:flash .14s ease-out}#flash.ko{animation:flash-ko .5s ease-out}#flash.super{animation:flash-super .45s ease-out}@keyframes flash-super{0%{opacity:.75;background:#fff}35%{background:var(--gold)}to{opacity:0}}@keyframes flash{0%{opacity:.22}to{opacity:0}}@keyframes flash-ko{0%{opacity:.55;background:#fff}40%{background:var(--red)}to{opacity:0}}#app.shake{animation:shake .16s linear}#app.shake-big{animation:shake-big .4s linear}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-3px,-1px)}}@keyframes shake-big{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-9px,5px) rotate(-.5deg)}40%{transform:translate(9px,-4px) rotate(.5deg)}60%{transform:translate(-7px,3px) rotate(-.3deg)}80%{transform:translate(6px,-2px) rotate(.2deg)}}#hud{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;padding:16px 22px 0;pointer-events:none;z-index:8;transition:opacity .3s}.hp-bar{position:relative;height:28px;border:3px solid rgba(255,255,255,.92);border-radius:4px;background:#0009;overflow:hidden;box-shadow:0 3px 10px #00000080,inset 0 0 12px #0009;transform:skew(-12deg)}.hp-bar.right{transform:skew(-12deg) scaleX(-1)}.hp-fill{height:100%;width:100%;transition:width .18s cubic-bezier(.2,.8,.3,1)}#hp1-fill{background:linear-gradient(90deg,#fff2c4,var(--gold-lt) 30%,var(--gold))}#hp2-fill{background:linear-gradient(90deg,#ffd0a0,#ff8a5c 30%,var(--red))}.meter-bar{position:relative;height:9px;margin-top:5px;border:2px solid rgba(120,220,255,.55);border-radius:3px;background:#0000008c;overflow:hidden;transform:skew(-12deg)}.meter-bar.right{transform:skew(-12deg) scaleX(-1)}.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#6ad6ff,#2bb4ff 50%,#b87aff);box-shadow:0 0 8px #5ac8ffb3;transition:width .12s linear}.player-tag{position:absolute;top:1px;font-size:14px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 2px #000;transform:skew(12deg);color:#fff}.player-tag.p1{left:8px}.player-tag.p2{right:8px}#timer{min-width:70px;text-align:center;font-size:38px;font-weight:900;font-style:italic;color:var(--gold-lt);text-shadow:0 0 4px #000,0 3px 0 #6b3b00,0 4px 8px rgba(0,0,0,.7)}.pips{display:flex;gap:7px;margin-top:8px}.pips.right{justify-content:flex-end}.pip{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:transparent}.pip.on{background:var(--gold);box-shadow:0 0 10px var(--gold)}#banner{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:clamp(40px,9vw,110px);font-weight:900;font-style:italic;letter-spacing:2px;color:var(--gold-lt);-webkit-text-stroke:2px #4a2600;text-shadow:0 4px 0 #6b3b00,0 0 26px rgba(242,177,52,.7),0 8px 18px rgba(0,0,0,.6);opacity:0;z-index:9;pointer-events:none}#banner.show{opacity:1}#banner.slam{animation:slam .45s cubic-bezier(.2,1.4,.4,1)}@keyframes slam{0%{transform:scale(2.4) rotate(-6deg);opacity:0}55%{transform:scale(.9) rotate(2deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}#help{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px;color:#fff0dc8c;pointer-events:none;z-index:8;transition:opacity .3s}#title{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#2812088c,#080503e0);transition:opacity .5s ease}.title-stack{text-align:center;transform:translateY(-4%)}#logo{width:auto;max-width:82vw;max-height:44vh;filter:drop-shadow(0 10px 24px rgba(0,0,0,.8));animation:logo-in .7s cubic-bezier(.2,1.3,.4,1) both}#logo-text{display:none;font-size:clamp(48px,12vw,150px);font-weight:900;font-style:italic;letter-spacing:2px;color:var(--gold);-webkit-text-stroke:3px #3a1e00;text-shadow:0 6px 0 #6b3b00,0 0 30px rgba(242,177,52,.6);animation:logo-in .7s cubic-bezier(.2,1.3,.4,1) both}#logo-text span{color:var(--red)}@keyframes logo-in{0%{transform:scale(1.6) translateY(-8%);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.tagline{margin-top:10px;font-size:clamp(13px,2.2vw,22px);font-weight:700;letter-spacing:4px;color:var(--gold-lt);text-shadow:0 2px 6px #000}.mode-pick{margin-top:30px;display:flex;gap:clamp(10px,2.5vw,22px);justify-content:center}.mode-btn{font:inherit;font-weight:900;font-style:italic;letter-spacing:2px;cursor:pointer;padding:clamp(9px,1.6vh,14px) clamp(18px,4vw,34px);border-radius:12px;border:3px solid var(--gold);background:#140d08b3;color:var(--gold-lt);text-shadow:0 2px 4px #000;box-shadow:0 6px 18px #0008;transition:transform .1s,background .1s,box-shadow .1s}.mode-btn:hover{transform:translateY(-3px);background:var(--gold);color:#2a1500;box-shadow:0 0 22px #f2b13499}#mode-arcade{border-color:#ff8a6e;color:#ffd0c0}#mode-arcade:hover{background:#e0552e;color:#fff}.press{margin-top:18px;font-size:clamp(12px,1.8vw,17px);font-weight:700;letter-spacing:2px;color:#cbb890;text-shadow:0 0 12px var(--gold),0 2px 4px #000;animation:blink 1.6s steps(1) infinite}@keyframes blink{50%{opacity:.15}}body.title #hud,body.title #help,body.title #banner{opacity:0}body:not(.title) #title{opacity:0;pointer-events:none}body.select #hud,body.select #help,body.select #banner,body.select #title{opacity:0;pointer-events:none}#site-nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;gap:clamp(4px,1.4vw,12px);justify-content:center;align-items:center;padding:clamp(8px,1.6vh,14px) 14px;background:linear-gradient(#080503d1,#08050300);transition:opacity .4s ease}.nav-link{font:inherit;font-weight:800;font-style:italic;letter-spacing:1.5px;text-transform:uppercase;font-size:clamp(11px,1.5vw,15px);text-decoration:none;cursor:pointer;padding:clamp(5px,.9vh,9px) clamp(11px,2.2vw,18px);border-radius:999px;border:2px solid rgba(242,177,52,.45);background:#140d088c;color:var(--gold-lt);text-shadow:0 2px 4px #000;transition:transform .1s,background .1s,color .1s,border-color .1s}.nav-link:hover{transform:translateY(-2px);background:var(--gold);color:#2a1500;border-color:var(--gold)}.nav-link.active{border-color:var(--gold);color:#2a1500;background:var(--gold)}body:not(.title) #site-nav{opacity:0;pointer-events:none}#trailer-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);background:#040201e6;animation:fade-in .2s ease both}#trailer-modal[hidden]{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.trailer-box{position:relative;width:min(100%,1100px);border-radius:14px;overflow:hidden;box-shadow:0 24px 80px #000c,0 0 0 3px #f2b13480}#trailer-video{display:block;width:100%;height:auto;background:#000}.trailer-close{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px;font-size:26px;line-height:1;font-weight:900;cursor:pointer;border-radius:999px;border:2px solid rgba(255,255,255,.4);background:#0a0604b3;color:#fff;transition:background .1s,transform .1s}.trailer-close:hover{background:var(--red);transform:scale(1.08)}