:root{
  --ink:#f4f0df;
  --muted:#b7aec7;
  --bg:#090512;
  --panel:#171027;
  --panel-2:#24143b;
  --red:#ee3b48;
  --red-dark:#8d1628;
  --gold:#ffd45a;
  --cyan:#57f2e5;
  --blue:#4f7cff;
  --green:#6cf08e;
  --shadow:#020105;
  --pixel: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#05030a;color:var(--ink);font-family:var(--pixel);}
body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 50% 0,#25103d 0,#08040f 46%,#030205 100%)}
button,input{font:inherit}
button{color:inherit}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
[hidden]{display:none!important}

/* Boot */
.boot{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;gap:22px;text-align:center;background:#05030a;transition:opacity .35s ease}
.boot.done{opacity:0;pointer-events:none}
.boot-logo{display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(7px 7px 0 #6d1120)}
.boot-logo span{font-size:clamp(64px,16vw,150px);font-weight:1000;letter-spacing:-.12em;color:#fff0d0;text-shadow:4px 0 0 #ee3b48,8px 0 0 #4f7cff}
.boot-logo b{font-size:clamp(38px,9vw,84px);color:var(--gold);transform:translate(-4px,-12px) rotate(-9deg)}
.boot p{margin:0;font-size:13px;letter-spacing:.25em;color:var(--muted)}
.boot-bar{width:min(380px,72vw);height:16px;padding:3px;border:2px solid #6f6280;background:#10091c;box-shadow:5px 5px 0 #000}
.boot-bar i{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,var(--red) 0 18px,var(--gold) 18px 28px,var(--cyan) 28px 40px);animation:bootload 1.1s steps(12,end) forwards}
@keyframes bootload{to{width:100%}}

#app{height:100%;padding-top:calc(50px + var(--safe-top));position:relative}
.site-bar{position:fixed;z-index:90;left:0;right:0;top:0;height:calc(50px + var(--safe-top));padding:var(--safe-top) 14px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:rgba(6,3,12,.94);border-bottom:3px solid #40234e;box-shadow:0 4px 0 rgba(0,0,0,.5)}
.site-wordmark{line-height:1.05;text-align:center;min-width:0}
.site-wordmark span{display:block;font-size:8px;letter-spacing:.22em;color:#9b8bab}
.site-wordmark b{display:block;font-size:11px;letter-spacing:.08em;color:#f1e8cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-actions{display:flex;gap:7px}
.site-home{padding:8px 11px!important;font-size:9px!important;min-width:0!important}
.icon-button{display:grid;place-items:center;width:34px;height:34px;border:2px solid #6c5a7a;background:#1b1027;box-shadow:3px 3px 0 #000;color:#f9e8c2;cursor:pointer}
.icon-button[aria-pressed="true"]{color:#ff6171;border-color:#ff6171}

.screen{position:absolute;inset:calc(50px + var(--safe-top)) 0 0;display:none;overflow:auto;overscroll-behavior:none;padding:clamp(18px,3vw,34px);}
.screen.active{display:block}
.eyebrow{margin:0 0 8px;font-size:10px;letter-spacing:.24em;color:var(--gold);font-weight:900}
.pixel-button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:48px;padding:11px 16px;border:3px solid #7a668d;background:linear-gradient(#27153a,#140b21);box-shadow:5px 5px 0 #030106;text-align:left;font-weight:1000;font-size:11px;letter-spacing:.06em;cursor:pointer;text-transform:uppercase;transition:transform .08s ease,filter .08s ease}
.pixel-button:hover{filter:brightness(1.18)}
.pixel-button:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #030106}
.pixel-button small{font-size:7px;font-weight:700;color:#bcaed0;letter-spacing:.05em;margin-top:4px}
.pixel-button.primary{border-color:#ffb353;background:linear-gradient(#e53d4a,#8e1529);color:#fff5d7;box-shadow:5px 5px 0 #51101d}
.pixel-button.quiet{background:#100919;border-color:#4e3c60;color:#b8abc8}

/* Arcade */
#arcade-screen{overflow:hidden;background:linear-gradient(180deg,#12071e 0 45%,#07040d 45% 100%)}
#arcade-screen:before{content:"";position:absolute;inset:45% 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 32px);transform:perspective(500px) rotateX(62deg) scale(1.5);transform-origin:top;opacity:.5}
.arcade-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.arcade-atmosphere i{position:absolute;width:3px;height:100%;background:linear-gradient(transparent,var(--cyan),transparent);opacity:.1;filter:blur(2px);animation:arcadeSweep 7s linear infinite}
.arcade-atmosphere i:nth-child(1){left:14%}.arcade-atmosphere i:nth-child(2){left:39%;animation-delay:-2s}.arcade-atmosphere i:nth-child(3){left:66%;animation-delay:-4s}.arcade-atmosphere i:nth-child(4){left:88%;animation-delay:-6s}
@keyframes arcadeSweep{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.arcade-heading{position:relative;z-index:2;text-align:center;margin:0 auto 18px}
.arcade-heading h1{margin:0;font-size:clamp(42px,9vw,86px);line-height:.83;letter-spacing:-.1em;color:#fff2cc;text-shadow:4px 0 0 #ee3b48,8px 0 0 #4f7cff,12px 0 0 #1a0927}
.arcade-heading h1 span{display:block;font-size:.48em;letter-spacing:.38em;margin-right:-.38em;color:var(--gold);text-shadow:3px 3px 0 #6d3511}
.arcade-heading>p:last-child{font-size:9px;letter-spacing:.16em;color:#ac9abc;margin:12px 0 0}
.cabinet-row{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,3.4vw,46px);height:min(66vh,590px);padding:4px 6px 38px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.cabinet-row::-webkit-scrollbar{display:none}
.cabinet{flex:0 0 clamp(210px,24vw,280px);height:100%;max-height:520px;min-height:410px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;scroll-snap-align:center;filter:saturate(.82) brightness(.72);transform:scale(.94);transition:filter .2s,transform .2s;position:relative}
.cabinet.selected,.cabinet:hover{filter:none;transform:scale(1)}
.cabinet.locked{cursor:not-allowed;filter:grayscale(.4) brightness(.55)}
.cabinet-marquee{height:22%;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:polygon(8% 0,92% 0,100% 20%,96% 100%,4% 100%,0 20%);background:linear-gradient(135deg,#f3c54d,#d3313f 40%,#4e1978 41%,#251036);border:4px solid #17111c;text-shadow:3px 3px 0 #2a0810;box-shadow:0 0 22px rgba(238,59,72,.35)}
.cabinet-marquee small{font-size:10px;letter-spacing:.18em;color:#19101d;background:#f5cf58;padding:2px 5px;text-shadow:none}
.cabinet-marquee b{font-size:clamp(17px,2.5vw,26px);line-height:.86;margin-top:5px;color:#fff1cb}
.cabinet-shell{display:block;height:65%;background:linear-gradient(90deg,#17101f,#3a2150 12% 88%,#130d1a);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);padding:10% 12% 7%;border-left:5px solid #060408;border-right:5px solid #060408;position:relative}
.cabinet-screen{height:59%;display:block;position:relative;overflow:hidden;background:#05030a;border:7px solid #0e0912;box-shadow:inset 0 0 0 3px #5e476c,0 5px 0 #030204}
.mortal-screen{background:linear-gradient(#341246 0 58%,#be293f 58% 64%,#1c0c25 64%)}
.mortal-screen:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.05) 4px 5px);pointer-events:none}
.fighter-silhouette{position:absolute;bottom:20%;width:24%;height:49%;background:#0a0710;box-shadow:inset 5px 0 0 #6b2a57}
.fighter-silhouette:before{content:"";position:absolute;width:55%;aspect-ratio:1;left:22%;top:-30%;background:#0a0710}
.fighter-silhouette.left{left:13%;clip-path:polygon(25% 0,75% 0,100% 38%,75% 45%,100% 100%,58% 80%,48% 100%,0 100%,24% 47%,0 30%)}
.fighter-silhouette.right{right:13%;transform:scaleX(-1);clip-path:polygon(25% 0,75% 0,100% 38%,75% 45%,100% 100%,58% 80%,48% 100%,0 100%,24% 47%,0 30%)}
.versus{position:absolute;left:50%;top:37%;transform:translate(-50%,-50%) rotate(-8deg);font-size:22px;font-weight:1000;color:var(--gold);text-shadow:2px 2px 0 #9a1b2f}
.mortal-screen em{position:absolute;bottom:6%;left:0;right:0;font-size:6px;letter-spacing:.08em;color:#fff4ce;font-style:normal}
.locked-screen{display:grid;place-content:center;gap:6px;background:linear-gradient(#102f44,#050a10);color:#81c9ff}
.locked-screen.dirt{background:linear-gradient(#275c75 0 55%,#9b5224 55%);color:#ffd36c}
.locked-screen i{font-style:normal;font-size:28px}.locked-screen b{font-size:10px;line-height:1.1}
.cabinet-controls{position:absolute;left:11%;right:11%;bottom:6%;height:23%;background:#130b1c;border:5px solid #07040a;transform:perspective(130px) rotateX(24deg);display:flex;align-items:center;justify-content:center;gap:10px}
.cabinet-controls i{width:8px;height:23px;background:#e9434d;box-shadow:0 -6px 0 3px #ffb5b5,0 5px 0 #020102}
.cabinet-controls b{width:15px;height:15px;border-radius:50%;background:#ffd04e;box-shadow:2px 2px 0 #5e3210}
.cabinet-controls b:nth-of-type(2){background:#59e7d8}.cabinet-controls b:nth-of-type(3){background:#e9506a}.cabinet-controls b:nth-of-type(4){background:#6890ff}
.cabinet-coin{position:absolute;right:11%;bottom:1%;font-size:6px;color:#62f5d4;letter-spacing:.1em}
.cabinet-plinth{display:flex;height:13%;min-height:64px;flex-direction:column;justify-content:center;background:linear-gradient(#1d1029,#08050c);clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);border-top:5px solid #050307}
.cabinet-plinth b{font-size:12px;color:var(--gold)}.cabinet-plinth small{font-size:6px;color:#a392b5;margin-top:4px}
.arcade-footer{position:absolute;z-index:5;left:20px;right:20px;bottom:calc(10px + var(--safe-bottom));display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.12em;color:#9d8cab}.arcade-footer b{color:var(--cyan)}

/* Title */
#title-screen{overflow:hidden;display:none;place-items:center;background:radial-gradient(circle at 50% 42%,#541339 0,#190a27 34%,#06030a 74%)}
#title-screen.active{display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(260px,.85fr);gap:clamp(24px,7vw,100px);padding-left:max(28px,8vw);padding-right:max(28px,8vw)}
.title-stage{position:absolute;inset:0;opacity:.23;pointer-events:none;overflow:hidden}
.pixel-column{position:absolute;bottom:-5%;width:13%;height:58%;background:repeating-linear-gradient(90deg,#6b355e 0 14px,#32172d 14px 28px);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.pixel-column:before{content:"";position:absolute;left:-15%;right:-15%;top:-9%;height:12%;background:#7f486b;box-shadow:0 13px 0 #3a1c34}
.pixel-column.c1{left:2%}.pixel-column.c2{left:27%;height:48%}.pixel-column.c3{right:27%;height:48%}.pixel-column.c4{right:2%}
.game-logo{position:relative;text-align:center;z-index:2}
.game-logo>span{display:inline-block;padding:4px 8px;background:#f8d253;color:#180b1f;font-size:16px;font-weight:1000;transform:skew(-8deg) rotate(-4deg);box-shadow:4px 4px 0 #8e1e2d}
.game-logo h1{margin:12px 0 0;font-size:clamp(54px,8vw,112px);line-height:.72;letter-spacing:-.12em;color:#f4ead0;text-shadow:5px 5px 0 #6c1021,9px 9px 0 #150918}
.game-logo h1 b{display:block;color:#f04652;font-size:.86em;text-shadow:5px 5px 0 #4f1e83,9px 9px 0 #150918}
.game-logo p{margin:28px 0 0;font-size:clamp(10px,1.4vw,15px);letter-spacing:.2em;color:var(--gold);font-weight:1000}
.title-menu{position:relative;z-index:3;display:grid;gap:12px;width:min(100%,440px)}
.difficulty-picker{position:absolute;z-index:3;bottom:34px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px;background:rgba(8,4,14,.8);border:2px solid #432553;white-space:nowrap}
.difficulty-picker span{font-size:7px;color:#a994b8;margin-right:4px}
.difficulty-picker button{padding:7px 9px;border:1px solid #675474;background:#140b20;color:#aa9ab9;font-size:7px;cursor:pointer}.difficulty-picker button.selected{background:#a82538;color:#fff4d5;border-color:#ffca60}
.title-credit{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:6px;letter-spacing:.12em;color:#766985}

/* Character select */
#character-screen{background:linear-gradient(135deg,#0a0610,#231031 47%,#0a0610);padding:22px max(20px,5vw) calc(22px + var(--safe-bottom))}
.select-header{text-align:center}.select-header h2{margin:0;font-size:clamp(30px,5vw,58px);line-height:.9;letter-spacing:-.06em}.select-header h2 span{color:var(--red)}.select-header>p:last-child{font-size:8px;color:#a99ab7;letter-spacing:.08em}
.character-layout{display:grid;grid-template-columns:minmax(340px,1.15fr) minmax(300px,.85fr);gap:clamp(18px,4vw,50px);max-width:1260px;margin:18px auto 0;min-height:0}
.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:center}
.character-card{min-width:0;padding:8px;border:3px solid #493456;background:#130b1c;box-shadow:4px 4px 0 #020103;cursor:pointer;text-align:left;transition:transform .1s,filter .1s}
.character-card:hover{filter:brightness(1.2)}.character-card.selected{border-color:var(--gold);background:#3c1937;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #09020b,0 0 18px rgba(255,212,90,.25)}
.character-card .mini-portrait{display:block;aspect-ratio:1;background:#21102f;image-rendering:pixelated;position:relative;overflow:hidden;margin-bottom:7px}
.character-card b{display:block;font-size:9px;line-height:1.05;color:#f3e9ce;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.character-card small{display:block;margin-top:4px;font-size:6px;color:#9c8baa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-dossier{display:grid;grid-template-columns:minmax(145px,.9fr) minmax(180px,1.1fr);gap:16px;align-items:stretch;padding:16px;border:4px solid #5a3e6a;background:linear-gradient(135deg,#231134,#0e0817);box-shadow:8px 8px 0 #030105}
.large-portrait{min-height:310px;background:#150b20;position:relative;overflow:hidden;image-rendering:pixelated;border:3px solid #3f2c4a}
.dossier-copy{min-width:0}.dossier-copy>small{font-size:8px;color:var(--cyan);letter-spacing:.2em}.dossier-copy h3{margin:8px 0;font-size:clamp(23px,3.4vw,42px);line-height:.88;color:var(--gold)}.dossier-copy>p{font-size:9px;line-height:1.55;color:#c5b7cd;min-height:45px}
.fighter-stats{display:grid;gap:8px;margin:16px 0}.fighter-stats div{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px}.fighter-stats dt{font-size:7px;color:#a693b1}.fighter-stats dd{margin:0;height:9px;background:#08040d;border:1px solid #4b3857;padding:2px}.fighter-stats i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--red),var(--gold))}
.move-list{border-top:2px solid #473153;padding-top:10px}.move-list>span{font-size:8px;letter-spacing:.16em;color:var(--red)}.move-list p{margin:7px 0;font-size:7px;line-height:1.3;color:#c8bad0}.move-list p:last-child{color:var(--gold)}
.select-actions{display:flex;justify-content:center;gap:12px;max-width:1260px;margin:16px auto 0}.select-actions .pixel-button{min-width:190px;align-items:center;text-align:center}

/* Pixel portraits made with layered CSS blocks */
.mini-portrait:before,.large-portrait:before{content:"";position:absolute;left:50%;top:18%;width:28%;height:24%;transform:translateX(-50%);background:var(--skin,#c58f6e);box-shadow:-8px 0 0 var(--hair,#1d1518),8px 0 0 var(--hair,#1d1518),0 34px 0 18px var(--primary,#333),-20px 60px 0 5px var(--accent,#ddd),20px 60px 0 5px var(--accent,#ddd)}
.mini-portrait:after,.large-portrait:after{content:"";position:absolute;left:50%;bottom:8%;width:62%;height:18%;transform:translateX(-50%);background:var(--accent,#ddd);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
.large-portrait:before{top:15%;width:22%;height:18%;box-shadow:-14px 0 0 var(--hair,#1d1518),14px 0 0 var(--hair,#1d1518),0 72px 0 52px var(--primary,#333),-58px 130px 0 11px var(--accent,#ddd),58px 130px 0 11px var(--accent,#ddd)}
.large-portrait:after{bottom:5%;height:16%}

/* Fight */
#fight-screen{padding:0;overflow:hidden;background:#000}
.fight-shell{position:absolute;inset:0;display:grid;place-items:center;background:#020104;overflow:hidden}
#game-canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;background:#05030a}
.fight-hud{position:absolute;z-index:15;left:max(14px,2.2vw);right:max(14px,2.2vw);top:12px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;pointer-events:none;text-shadow:2px 2px 0 #000}
.hud-fighter>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px}.hud-fighter span{font-size:clamp(8px,1.4vw,14px);font-weight:1000;color:#fff1cc}.hud-fighter small{font-size:12px;color:var(--gold)}
.hud-fighter.p2{text-align:right}.hud-fighter.p2>div:first-child{flex-direction:row}
.health{height:17px;padding:3px;background:#110913;border:2px solid #e7d7ac;box-shadow:3px 3px 0 #000;overflow:hidden}.health i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#59e67a,#e2d342 68%,#ee3b48);transform-origin:left;transition:transform .12s linear}.p2 .health i{transform-origin:right}
.meter{position:relative;height:9px;margin-top:4px;background:#110913;border:1px solid #766388;overflow:visible}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f7cff,#57f2e5,#fff);transition:width .1s}.meter b{position:absolute;top:11px;left:0;font-size:5px;letter-spacing:.15em;color:#9c8bb2}.p2 .meter b{left:auto;right:0}
.hud-center{text-align:center;min-width:86px}.hud-center span{display:block;font-size:7px;color:var(--gold);letter-spacing:.14em}.hud-center b{display:block;font-size:clamp(22px,4vw,38px);line-height:.9;color:#fff}.hud-center small{display:block;font-size:5px;color:#b3a5c0;margin-top:3px}
.announcer{position:absolute;z-index:20;left:0;right:0;top:42%;transform:translateY(-50%);text-align:center;font-size:clamp(28px,8vw,74px);font-weight:1000;color:#fff3cf;text-shadow:5px 5px 0 #8f1429,9px 9px 0 #21091c;letter-spacing:-.06em;pointer-events:none;opacity:0}.announcer.show{animation:announce .72s steps(5,end) both}.announcer.litigate{color:var(--gold);font-size:clamp(38px,11vw,104px)}
@keyframes announce{0%{opacity:0;transform:translateY(-50%) scale(2)}25%{opacity:1;transform:translateY(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.move-banner{position:absolute;z-index:18;left:50%;bottom:20%;transform:translateX(-50%);padding:7px 12px;background:#0e0815;border:2px solid #ffd45a;color:#ffd45a;font-size:8px;letter-spacing:.12em;white-space:nowrap;opacity:0;pointer-events:none}.move-banner.show{animation:banner 1.1s steps(5,end)}
@keyframes banner{0%{opacity:0;transform:translate(-50%,8px)}12%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.fight-pause{position:absolute;z-index:30;right:12px;bottom:calc(12px + var(--safe-bottom));width:36px;height:30px;border:2px solid #8f789f;background:#150b20;box-shadow:3px 3px 0 #000;color:#fff;cursor:pointer}
.touch-controls{position:absolute;z-index:25;inset:auto 0 calc(4px + var(--safe-bottom));height:min(38vh,205px);pointer-events:none;display:none}
.joystick{pointer-events:auto;position:absolute;left:max(14px,4vw);bottom:8px;width:clamp(108px,25vw,150px);aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.36);background:radial-gradient(circle,rgba(83,55,99,.62) 0 44%,rgba(13,7,20,.76) 45%);box-shadow:inset 0 0 0 10px rgba(0,0,0,.2);touch-action:none}
.joystick:before,.joystick:after{content:"";position:absolute;background:rgba(255,255,255,.14)}.joystick:before{left:49%;top:9%;bottom:9%;width:2px}.joystick:after{top:49%;left:9%;right:9%;height:2px}
.joystick i{position:absolute;left:50%;top:50%;width:45%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#ff5e68,#96182c);border:3px solid #ffd4c0;box-shadow:4px 5px 0 rgba(0,0,0,.45)}
.action-pad{pointer-events:none;position:absolute;right:max(14px,4vw);bottom:4px;width:clamp(190px,39vw,255px);height:clamp(145px,31vw,190px)}
.action{pointer-events:auto;position:absolute;width:clamp(62px,14vw,82px);aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.62);box-shadow:4px 5px 0 rgba(0,0,0,.5);display:grid;place-content:center;text-align:center;touch-action:none;user-select:none}.action b{font-size:clamp(21px,5vw,30px);line-height:.8}.action small{font-size:5px;margin-top:5px}.action:active,.action.active{transform:translate(3px,4px);box-shadow:1px 1px 0 #000;filter:brightness(1.35)}
.action.special{left:50%;top:0;transform:translateX(-50%);background:#5d35b4}.action.special:active,.action.special.active{transform:translate(-50%,4px)}
.action.punch{left:0;top:42%;background:#d52f43}.action.kick{right:0;top:42%;background:#d99328}.action.guard{left:50%;bottom:0;transform:translateX(-50%);background:#238c76}.action.guard:active,.action.guard.active{transform:translate(-50%,4px)}
.overlay-panel{position:absolute;z-index:80;inset:0;display:grid;place-items:center;background:rgba(4,2,8,.8);backdrop-filter:blur(4px)}
.overlay-panel .panel{width:min(420px,88vw);padding:26px;background:#120a1c;border:4px solid #6d547b;box-shadow:10px 10px 0 #000;text-align:center}.overlay-panel h2{font-size:44px;margin:0 0 18px;color:var(--gold)}.overlay-panel .pixel-button{width:100%;align-items:center;margin-top:10px}

/* Results */
#result-screen{background:radial-gradient(circle at 50% 42%,#48203b,#110817 55%,#040206);text-align:center;display:none;place-content:center;justify-items:center}
#result-screen.active{display:grid}
.result-seal{display:grid;place-content:center;width:150px;aspect-ratio:1;border-radius:50%;border:9px double #f5cc55;color:#f5cc55;font-size:26px;font-weight:1000;transform:rotate(-9deg);box-shadow:0 0 0 6px #a12637,0 0 40px rgba(255,212,90,.25)}
#result-screen h2{font-size:clamp(42px,8vw,84px);line-height:.82;margin:18px 0 10px;color:#fff1cf;text-shadow:5px 5px 0 #9c1730}
#result-copy{max-width:670px;font-size:11px;line-height:1.6;color:#c6b7cc}
.ladder-progress{display:flex;gap:8px;margin:14px 0 22px}.ladder-progress i{width:52px;height:11px;background:#2a1734;border:2px solid #644772}.ladder-progress i.won{background:#61e68a;border-color:#caffd3}.ladder-progress i.lost{background:#e34050;border-color:#ffc1c8}.ladder-progress i.current{background:#ffd45a;border-color:#fff1b3;animation:blink .7s steps(2,end) infinite}
@keyframes blink{50%{filter:brightness(.45)}}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.result-actions .pixel-button{min-width:190px;align-items:center;text-align:center}

/* Dialog */
.how-dialog{width:min(920px,94vw);max-height:88vh;padding:0;border:4px solid #725487;background:#100919;color:var(--ink);box-shadow:12px 12px 0 #000}.how-dialog::backdrop{background:rgba(2,1,4,.86)}.how-dialog form{position:relative;padding:24px}.how-dialog h2{margin:0 0 18px;font-size:clamp(34px,6vw,64px);line-height:.85}.how-dialog h2 span{color:var(--red)}.dialog-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:2px solid #695176;background:#21112d;color:#fff;font-size:25px;cursor:pointer}.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.how-grid section{padding:14px;border:2px solid #493657;background:#180d23}.how-grid h3{margin:0 0 9px;color:var(--gold);font-size:13px}.how-grid p,.how-grid li{font-size:8px;line-height:1.55;color:#c5b6cd}.how-grid ul{margin:8px 0 0;padding-left:18px}.how-grid .warning{color:#ff7887}.how-dialog .pixel-button{width:100%;align-items:center}

/* Responsive */
@media (pointer:coarse),(max-width:900px){
  .touch-controls{display:block}
  .fight-pause{bottom:auto;top:76px;right:7px}
}
@media (max-width:900px){
  #app{padding-top:calc(45px + var(--safe-top))}.site-bar{height:calc(45px + var(--safe-top));padding-left:8px;padding-right:8px}.screen{inset:calc(45px + var(--safe-top)) 0 0}
  .site-wordmark span{display:none}.site-wordmark b{font-size:8px}.site-home{font-size:7px!important;padding:7px!important}.icon-button{width:30px;height:30px}
  #title-screen.active{grid-template-columns:1fr;align-content:center;gap:26px;padding:20px 22px 72px}.game-logo h1{font-size:clamp(58px,15vw,100px)}.game-logo p{margin-top:20px}.title-menu{margin:auto}.difficulty-picker{bottom:28px;max-width:95vw;overflow-x:auto}.title-credit{display:none}
  .character-layout{grid-template-columns:1fr}.character-grid{grid-template-columns:repeat(4,1fr)}.character-dossier{grid-template-columns:150px 1fr}.large-portrait{min-height:250px}.select-actions{position:sticky;bottom:0;padding:10px 0;background:linear-gradient(transparent,#090510 22%)}
}
@media (max-width:680px){
  #arcade-screen{padding-left:8px;padding-right:8px}.arcade-heading{margin-bottom:8px}.arcade-heading h1{font-size:52px}.cabinet-row{justify-content:flex-start;height:70vh;padding-left:calc(50vw - 112px);padding-right:calc(50vw - 112px)}.cabinet{flex-basis:224px}.arcade-footer span{display:none}
  #character-screen{padding:14px 10px calc(12px + var(--safe-bottom))}.select-header>p:last-child{display:none}.character-layout{margin-top:8px;gap:10px}.character-grid{grid-template-columns:repeat(4,1fr);gap:6px}.character-card{padding:5px;border-width:2px}.character-card b{font-size:7px}.character-card small{display:none}.character-dossier{grid-template-columns:110px 1fr;padding:9px;gap:10px;border-width:3px}.large-portrait{min-height:190px}.dossier-copy h3{font-size:24px}.dossier-copy>p{font-size:7px;min-height:30px}.fighter-stats{margin:8px 0;gap:5px}.fighter-stats div{grid-template-columns:68px 1fr}.move-list p{font-size:6px;margin:4px 0}.select-actions{gap:6px}.select-actions .pixel-button{min-width:0;flex:1;padding:8px;font-size:7px}
  .fight-hud{left:6px;right:6px;top:5px;gap:5px}.hud-center{min-width:60px}.hud-fighter span{font-size:7px}.health{height:12px;border-width:1px}.hud-fighter small{font-size:8px}.meter b{display:none}.hud-center span{font-size:5px}.hud-center b{font-size:22px}.hud-center small{font-size:4px}
  .how-grid{grid-template-columns:1fr}.how-dialog form{padding:18px}.result-actions{display:grid;width:min(330px,90vw)}
}
@media (orientation:portrait) and (pointer:coarse){
  #fight-screen:before{content:"ROTATE FOR THE FULL RECORD";position:absolute;z-index:60;left:50%;top:78px;transform:translateX(-50%);padding:5px 8px;background:#210d22;border:1px solid #f0c85b;color:#f0c85b;font-size:6px;letter-spacing:.12em;white-space:nowrap;pointer-events:none}
  .touch-controls{height:30vh}.joystick{width:31vw}.action-pad{width:46vw;height:36vw}.action{width:16vw}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}