:root{--bg:#050817;--panel:#0b1232;--blue:#2f62e5;--cyan:#65e7ff;--gold:#ffd349;--red:#ef405d;--white:#f6f4e7;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:#fff;font-family:ui-monospace,"Cascadia Mono","Courier New",monospace}body{image-rendering:pixelated}button,a{font:inherit;color:inherit}button{border:0;cursor:pointer}a{color:var(--gold)}.boot{position:fixed;z-index:9999;inset:0;display:grid;place-content:center;justify-items:center;gap:15px;background:radial-gradient(circle at 50% 35%,#1b2d77,#040611 67%)}.boot .x-mark{width:96px;height:96px;display:grid;place-content:center;border:8px solid var(--gold);clip-path:polygon(0 0,35% 0,50% 33%,65% 0,100% 0,69% 50%,100% 100%,65% 100%,50% 67%,35% 100%,0 100%,31% 50%);background:#1f52d2;color:#fff;font:1000 62px/1 Impact,sans-serif;text-shadow:4px 4px #0a102a}.boot p{font-size:11px;letter-spacing:.24em}.boot-line{width:250px;height:7px;background:#080d28;border:2px solid #627dd3}.boot-line i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#42e0ff,#ffd349);animation:boot 1s infinite steps(5)}@keyframes boot{to{transform:translateX(235%)}}
#app{height:100%;display:grid;grid-template-rows:calc(48px + var(--safe-top)) 1fr}.site-bar{z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:var(--safe-top) 12px 0;background:linear-gradient(180deg,#121b50,#09102c);border-bottom:3px solid #395ed0;box-shadow:0 4px 0 #02040c}.site-brand{text-align:center;line-height:1}.site-brand small{display:block;font-size:6px;letter-spacing:.18em;color:#8fdfff}.site-brand b{font:1000 20px/.9 Impact,sans-serif;letter-spacing:.04em;color:var(--gold);text-shadow:2px 2px #203faa}.site-actions{display:flex;align-items:center;gap:7px}.site-actions a,.site-actions button,.top-button{padding:7px 10px;border:1px solid #6c82cf;background:#111b49;font-size:7px;font-weight:900;letter-spacing:.09em;text-decoration:none;box-shadow:inset 0 -3px 0 #060a1e}.site-actions button:last-child{font-size:17px;padding:3px 9px}.top-button:hover,.site-actions a:hover,.site-actions button:hover{background:#253c8e}.site-actions a{color:#ffe36a}
main{position:relative;min-height:0;overflow:hidden}.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}
/* Title */
#title-screen{background:radial-gradient(circle at 50% 70%,#304bbe 0 5%,transparent 34%),linear-gradient(180deg,#080b23 0 50%,#182d7b 100%)}.title-bg{position:absolute;inset:0;overflow:hidden}.title-bg:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-20%;height:60%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 78px),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 55px);transform:perspective(500px) rotateX(62deg);transform-origin:bottom}.title-bg i{position:absolute;width:8px;height:8px;background:#fff;box-shadow:0 0 12px #8ee8ff}.title-bg i:nth-child(1){left:8%;top:19%}.title-bg i:nth-child(2){left:21%;top:10%}.title-bg i:nth-child(3){left:44%;top:23%}.title-bg i:nth-child(4){left:67%;top:13%}.title-bg i:nth-child(5){left:83%;top:30%}.title-bg i:nth-child(6){left:93%;top:8%}.title-copy{position:relative;z-index:3;width:min(680px,70%);margin:0 auto;padding:clamp(34px,7vh,80px) 20px 20px;text-align:center}.series{margin:0 0 8px;color:#8fe8ff;font-size:9px;font-weight:900;letter-spacing:.22em}.title-copy h1{margin:0;line-height:.73}.title-copy h1 span{display:block;margin-bottom:5px;color:#fff;font:900 14px/1 ui-monospace,monospace;letter-spacing:.42em}.title-copy h1 b{display:block;font:1000 clamp(76px,13vw,160px)/.68 Impact,sans-serif;letter-spacing:-.04em;color:#ffd74b;-webkit-text-stroke:4px #142f8d;text-shadow:8px 8px 0 #07102c,0 0 20px rgba(100,226,255,.55);transform:skew(-7deg)}.title-copy h2{margin:17px 0 10px;font:1000 clamp(20px,3vw,39px)/1 Impact,sans-serif;letter-spacing:.08em;color:#f6f4e7;text-shadow:3px 3px #9c1f43}.lede{max-width:680px;margin:0 auto 18px;color:#dbe5ff;font-size:10px;line-height:1.55}.title-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.title-actions button,.primary,.secondary{min-height:48px;padding:10px 12px;border:2px solid #7992e8;background:#18275f;font-weight:1000;font-size:9px;letter-spacing:.08em;box-shadow:inset 0 -5px 0 #060a1d,4px 4px 0 #02030a}.title-actions .primary,.primary{background:linear-gradient(#f1c942,#c98c1c);border-color:#fff3a5;color:#101229}.title-actions button:hover,.primary:hover,.secondary:hover{transform:translateY(-2px);filter:brightness(1.15)}.controls-hint{margin:14px 0 8px;color:#91a5df;font-size:7px}.controls-hint b{color:#fff}.book-line{font-size:8px;color:#bccaf1}.team-silhouette{position:absolute;z-index:2;left:1.5%;right:1.5%;bottom:3%;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;opacity:.45}.team-silhouette i{width:7vw;max-width:82px;height:18vh;min-height:100px;background:linear-gradient(#4be4ff,#264ba8);clip-path:polygon(36% 0,64% 0,76% 15%,72% 31%,92% 58%,76% 63%,95% 100%,58% 84%,50% 61%,42% 84%,5% 100%,24% 63%,8% 58%,28% 31%,24% 15%);filter:drop-shadow(5px 5px 0 #050713)}.team-silhouette i:nth-child(2){height:22vh;background:#f5b72d}.team-silhouette i:nth-child(3){height:19vh;background:#bf315d}.team-silhouette i:nth-child(4){height:25vh;background:#c3d3de}.team-silhouette i:nth-child(5){height:21vh;background:#e24b55}.team-silhouette i:nth-child(6){height:18vh;background:#6c4db5}
/* Character select */
#select-screen{padding:18px;background:radial-gradient(circle at 50% 20%,#203e9b,#070a1c 70%)}.select-head{height:76px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px}.select-head button{padding:10px;background:#111a43;border:1px solid #7083cd;font-size:8px}.select-head div{text-align:center}.select-head small{font-size:7px;color:#74e6ff;letter-spacing:.18em}.select-head h2{margin:2px 0;font:1000 32px/.9 Impact,sans-serif;color:#ffd34b;letter-spacing:.04em}.select-head p{margin:4px 0 0;font-size:8px;color:#dce7ff}.fighter-grid{height:calc(100% - 116px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}.fighter-card{position:relative;display:grid;grid-template-columns:38% 1fr;align-items:center;overflow:hidden;padding:10px;text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 55%,#071029),#050716 70%);border:3px solid color-mix(in srgb,var(--a) 72%,#fff);box-shadow:inset 0 0 0 2px #050718,5px 5px 0 #02030b}.fighter-card:hover{transform:translateY(-3px);filter:brightness(1.13)}.fighter-card.p1:after,.fighter-card.p2:after{position:absolute;right:5px;top:5px;padding:4px 6px;background:#ffd43b;color:#101224;font:1000 7px/1 monospace}.fighter-card.p1:after{content:"P1"}.fighter-card.p2:after{content:"P2";background:#5ce6ff}.portrait{position:relative;display:block;width:100%;height:100%;min-height:100px;filter:drop-shadow(6px 7px 0 rgba(0,0,0,.55))}.portrait:before{content:"";position:absolute;left:28%;top:10%;width:44%;height:24%;background:#b98562;box-shadow:0 -10px 0 #11131a}.portrait:after{content:"";position:absolute;left:16%;top:34%;width:68%;height:55%;background:var(--p);clip-path:polygon(18% 0,82% 0,100% 30%,83% 42%,96% 100%,59% 83%,50% 55%,41% 83%,4% 100%,17% 42%,0 30%)}.portrait i{position:absolute;z-index:2;left:18%;right:18%;top:36%;height:10px;background:var(--a)}.portrait b,.portrait em{position:absolute;z-index:1;bottom:5%;width:17%;height:43%;background:var(--s)}.portrait b{left:28%}.portrait em{right:28%}.portrait[data-shape="visor"] i{top:19%;left:22%;right:10%;height:7px}.portrait[data-shape="claws"]{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.portrait[data-shape="claws"] i{left:74%;right:-5%;top:45%;height:3px;box-shadow:0 8px 0 var(--a),0 16px 0 var(--a)}.portrait[data-shape="cape"]:after{clip-path:polygon(20% 0,80% 0,100% 100%,52% 70%,0 100%)}.portrait[data-shape="armor"]:after{left:7%;width:86%;clip-path:polygon(13% 0,87% 0,100% 22%,83% 100%,17% 100%,0 22%)}.portrait[data-shape="storm"]:before{box-shadow:-13px -8px 0 #f5f5ef,13px -8px 0 #f5f5ef,0 -13px 0 #f5f5ef}.portrait[data-shape="scroll"] i{left:8%;right:8%;top:36%;height:7px;box-shadow:0 16px 0 var(--a),0 32px 0 var(--a)}.fighter-copy{position:relative;z-index:3}.fighter-copy small{display:block;color:var(--a);font-size:6px;font-weight:900;letter-spacing:.12em}.fighter-copy strong{display:block;margin:3px 0 6px;font:1000 clamp(17px,2vw,26px)/.9 Impact,sans-serif;color:#fff;text-shadow:2px 2px #070815}.fighter-copy span{display:block;color:#c9d5f5;font-size:7px;line-height:1.4}.fighter-copy i{display:block;margin-top:9px;padding:5px 6px;background:rgba(0,0,0,.45);color:#ffd94c;font-size:6px;font-style:normal}.select-footer{height:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:6px;color:#aebde8}.select-footer b{color:#6fe7ff}
/* Fight */
#fight-screen{background:#02030a}.hud{position:absolute;z-index:20;left:0;right:0;top:0;height:64px;display:grid;grid-template-columns:minmax(160px,1fr) minmax(210px,.8fr) minmax(160px,1fr) auto auto;gap:9px;align-items:center;padding:7px 9px;background:linear-gradient(180deg,rgba(3,5,17,.98),rgba(6,10,30,.86));border-bottom:2px solid #3656b4}.player-hud b{display:block;margin-bottom:3px;font-size:8px;letter-spacing:.1em;color:#fff}.player-hud.right{text-align:right}.bar{height:10px;margin-bottom:3px;background:#1a2035;border:1px solid #6477b4;overflow:hidden}.bar i{display:block;width:100%;height:100%;transition:width .15s linear}.bar.health i{background:linear-gradient(90deg,#e52f43,#ffb440)}.bar.due{height:6px}.bar.due i{background:linear-gradient(90deg,#2e70ff,#65eaff)}.center-hud{text-align:center}.center-hud small{display:block;font-size:6px;color:#70e4ff}.center-hud b{display:block;font-size:14px;color:#ffd34b}.center-hud span{font-size:6px}.center-hud span i{font-style:normal;color:#ff6678}.progress{height:3px;margin-top:4px;background:#11162b}.progress i{display:block;width:0;height:100%;background:#ffd34b}.hud-button{padding:8px 7px;background:#151e4d;border:1px solid #6c82d5;font-size:6px;font-weight:900}.boss-hud{position:absolute;z-index:19;top:67px;left:50%;width:min(420px,66%);transform:translateX(-50%);padding:4px 8px;background:rgba(12,4,12,.86);border:2px solid #bb3453;text-align:center}.boss-hud b{font-size:8px;color:#ffd34b}.boss-hud div{height:8px;margin-top:3px;background:#2a1118}.boss-hud i{display:block;width:100%;height:100%;background:#ef3952}#fight-canvas{display:block;width:100%;height:100%;background:#050817;image-rendering:pixelated;outline:none}.fight-message,.combo-callout{position:absolute;z-index:25;left:50%;transform:translate(-50%,-15px);opacity:0;pointer-events:none;transition:.18s;padding:8px 14px;background:rgba(5,8,24,.91);border:2px solid #6ce7ff;color:#fff;font-size:10px;font-weight:1000;letter-spacing:.08em;text-align:center}.fight-message{top:84px}.combo-callout{top:124px;border-color:#ffd34b;color:#ffd34b}.fight-message.show,.combo-callout.show{opacity:1;transform:translate(-50%,0)}.class-action{position:absolute;z-index:40;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,rgba(255,204,49,.42),rgba(5,6,22,.78) 60%);opacity:0;pointer-events:none}.class-action.show{animation:classAction 1.5s steps(5)}.class-action small{font-size:13px;letter-spacing:.25em}.class-action b{font:1000 clamp(62px,12vw,150px)/.8 Impact,sans-serif;color:#fff5a7;-webkit-text-stroke:5px #1e48b0;text-shadow:8px 8px #09102d}@keyframes classAction{0%,100%{opacity:0}10%,80%{opacity:1}}.act-card{position:absolute;z-index:35;left:50%;top:49%;width:min(720px,84%);transform:translate(-50%,-50%) scale(.9);padding:24px;background:rgba(4,7,25,.94);border:4px solid #ffd34b;text-align:center;opacity:0;pointer-events:none;transition:.25s}.act-card.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.act-card small{display:block;color:#9feaff;font-size:9px;line-height:1.5}.act-card b{display:block;margin-top:10px;font:1000 32px/.9 Impact,sans-serif;color:#ffd34b}.mobile-controls{display:none}.orientation-recovery{position:absolute;z-index:90;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;background:rgba(3,5,18,.95);text-align:center}.orientation-recovery b{font:1000 28px/1 Impact,sans-serif;color:#ffd34b}.orientation-recovery span{font-size:8px}.orientation-recovery button{min-width:230px;padding:12px;background:#1d2b6d;border:2px solid #83a0ff;font-size:8px}.orientation-recovery button:first-of-type{background:#c99223;color:#101321;border-color:#fff0a2}
/* Modal/result */
.modal-wrap{position:fixed;z-index:100;inset:0;display:grid;place-content:center;padding:20px;background:rgba(2,3,11,.88)}.modal{width:min(900px,96vw);max-height:90vh;overflow:auto;padding:22px;background:linear-gradient(#111a4d,#080d28);border:4px solid #5771cf;box-shadow:10px 10px 0 #010207}.modal>small{color:#75e7ff;font-size:7px;letter-spacing:.2em}.modal h2{margin:4px 0 16px;font:1000 34px/.9 Impact,sans-serif;color:#ffd34b}.control-grid,.how-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.control-grid div,.how-grid article{padding:12px;background:#0a1134;border:1px solid #4057a4}.control-grid b,.how-grid b{display:block;color:#74e5ff;font-size:8px}.control-grid span,.how-grid p{display:block;margin:5px 0 0;color:#d7e0f8;font-size:8px;line-height:1.45}.modal-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}.modal-actions button,.how-card>button{min-height:44px;padding:9px;background:#17235a;border:2px solid #627cd2;font-size:7px;font-weight:1000}.result-screen{background:radial-gradient(circle,#2746a0,#050713 72%)}.result-card{position:absolute;left:50%;top:50%;width:min(760px,90%);transform:translate(-50%,-50%);padding:28px;background:rgba(7,11,35,.95);border:5px solid #ffd34b;text-align:center;box-shadow:12px 12px 0 #02030b}.result-card>small{color:#6de6ff;font-size:8px;letter-spacing:.22em}.result-card h2{margin:6px 0 12px;font:1000 clamp(40px,7vw,82px)/.82 Impact,sans-serif;color:#fff4a5;text-shadow:5px 5px #2447aa}.result-card p{font-size:9px;line-height:1.5}.result-score{display:grid;grid-template-columns:auto 1fr;gap:7px 15px;align-items:center;margin:20px 0;padding:14px;background:#0b133d;text-align:left}.result-score span{font-size:7px;color:#80e8ff}.result-score b{text-align:right;color:#ffd34b;font-size:13px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-actions button{min-height:46px;padding:10px;background:#17245c;border:2px solid #667ed4;font-size:8px;font-weight:1000}.result-actions .primary{background:#d29a27;color:#111423;border-color:#fff2a0}
/* responsive */
@media(max-width:850px){.site-bar{padding-left:6px;padding-right:6px}.site-brand{display:none}.site-actions a{display:none}.title-copy{width:88%;padding-top:35px}.team-silhouette{opacity:.28}.fighter-copy strong{font-size:16px}.fighter-copy span{display:none}.hud{grid-template-columns:1fr 1fr 1fr auto}.hud>.hud-button:first-of-type{display:none}.center-hud span{display:none}.control-grid,.how-grid{grid-template-columns:1fr}.modal-actions{grid-template-columns:1fr 1fr}}
@media(pointer:coarse){body[data-screen="fight"] .site-bar{display:none}#app{grid-template-rows:calc(48px + var(--safe-top)) 1fr}body[data-screen="fight"] #app{grid-template-rows:1fr}.mobile-controls{position:absolute;z-index:30;inset:auto 0 max(6px,var(--safe-bottom));display:flex;justify-content:space-between;align-items:flex-end;padding:0 14px;pointer-events:none}.joystick{position:relative;width:132px;height:132px;border:3px solid rgba(121,160,255,.65);border-radius:50%;background:radial-gradient(circle,rgba(74,100,191,.28),rgba(4,7,24,.62));pointer-events:auto;touch-action:none}.joystick:before,.joystick:after{content:"";position:absolute;background:rgba(133,166,255,.28)}.joystick:before{left:12px;right:12px;top:50%;height:2px}.joystick:after{top:12px;bottom:12px;left:50%;width:2px}.joystick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:linear-gradient(#4a74db,#172a69);border:3px solid #a8bdff;box-shadow:0 5px 0 #07102c}.joystick span{position:absolute;left:0;right:0;bottom:-14px;text-align:center;font-size:5px;color:#d9e1ff}.action-pad{display:grid;grid-template-columns:repeat(2,72px);gap:8px;pointer-events:auto}.action-pad button{height:64px;border-radius:50%;background:linear-gradient(#3259c9,#15275f);border:3px solid #9bb4ff;box-shadow:0 5px 0 #070d29;color:#fff;touch-action:none}.action-pad button.power{grid-column:2;background:linear-gradient(#dc9c24,#8f4e13);border-color:#ffe88f}.action-pad button.pressed{transform:translateY(4px);box-shadow:0 1px 0 #05091c}.action-pad b{display:block;font-size:9px}.action-pad small{display:block;font-size:4px;color:#c9d5ff}.hud{height:56px;padding:5px;grid-template-columns:1fr .8fr 1fr auto}.hud-button{padding:6px}.fight-message{top:62px;font-size:7px}.combo-callout{top:95px;font-size:7px}.boss-hud{top:58px}.title-copy{padding-top:18px}.controls-hint{display:none}.title-actions{grid-template-columns:1fr}.title-actions button{min-height:42px}.fighter-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));height:calc(100% - 102px);gap:6px}.select-head{height:61px}.select-head h2{font-size:24px}.select-footer{display:none}.fighter-card{padding:6px;grid-template-columns:32% 1fr}.portrait{min-height:54px}.fighter-copy strong{font-size:13px}.fighter-copy i{font-size:4px;margin-top:4px}.result-card{padding:18px}.result-card h2{font-size:44px}}
@media(pointer:coarse) and (orientation:portrait){body[data-screen="fight"]:before{content:"ROTATE FOR THE FULL RECORD";position:fixed;z-index:120;inset:0;display:grid;place-content:center;padding:30px;background:#050817;color:#ffd34b;font:1000 28px/1 Impact,sans-serif;text-align:center}.mobile-controls{opacity:.2}.fighter-grid{height:calc(100% - 108px)}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){.hud{height:50px}.player-hud b{font-size:6px}.bar{height:7px}.bar.due{height:4px}.center-hud small{font-size:5px}.center-hud b{font-size:10px}.joystick{width:108px;height:108px}.joystick i{width:44px;height:44px;margin:-22px}.action-pad{grid-template-columns:repeat(3,58px);gap:6px}.action-pad button{height:58px}.action-pad button.power{grid-column:auto}.title-copy{width:80%;padding-top:9px}.title-copy h1 b{font-size:70px}.title-copy h2{font-size:18px;margin:9px}.lede{font-size:7px;margin-bottom:8px}.title-actions{grid-template-columns:repeat(3,1fr)}.title-actions button{min-height:34px;padding:5px;font-size:6px}.book-line{display:none}.team-silhouette{display:none}.select-head{height:48px}.select-head h2{font-size:21px}.select-head p{font-size:5px}.fighter-grid{height:calc(100% - 52px);grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.fighter-copy strong{font-size:11px}.fighter-copy small,.fighter-copy i{font-size:3.5px}.portrait{min-height:38px}.modal{max-height:96vh;padding:12px}.modal h2{font-size:25px}.modal-actions{margin-top:8px}.control-grid div{padding:7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}