@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--bg:#101815;--paper:#e8e9dc;--muted:#8e9b8e;--red:#f36b4c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--paper);font:14px 'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:600 11px 'DM Sans',sans-serif;letter-spacing:1px;cursor:pointer;color:inherit;background:none;border:0}button:hover{color:var(--red)}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:5px}header{max-width:1440px;margin:auto;padding:25px 5%;display:flex;align-items:center;border-bottom:1px solid #2c3830;gap:18px}.brand{text-decoration:none;color:var(--paper);font:900 40px 'Barlow Condensed',sans-serif;line-height:1}.brand span{color:var(--red);font-size:27px}.edition{font-size:10px;letter-spacing:2px;line-height:1.6}.edition small{color:var(--muted);font-size:8px}header button{margin-left:auto}main{max-width:1440px;padding:35px 5% 24px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--red);font-weight:700}h1{font:900 clamp(65px,9vw,124px)/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:-3px;margin:12px 0 0}h1 span{font:32px serif;color:var(--red);vertical-align:middle;margin-left:22px}.heading p{color:#a9b3a5;line-height:1.7;font-size:15px}.machine{border:1px solid #3d4b3e}.topline,.bottomline{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;font-size:9px;letter-spacing:1.4px;gap:12px}.topline{background:#19221c}.topline i{display:inline-block;width:5px;height:5px;background:var(--red);border-radius:50%;margin-right:7px}.topline>span:nth-child(2){color:var(--muted)}.topline button,.bottomline button{font-size:9px}.arena{position:relative;aspect-ratio:2/1;overflow:hidden;background:#87927b}canvas{display:block;width:100%;height:100%}.hud{position:absolute;inset:24px 32px auto;display:flex;justify-content:space-between;pointer-events:none}.label{font-size:10px;letter-spacing:2px;color:#f3f1d9;text-shadow:0 1px 5px #24372b}.pips{display:flex;gap:6px;margin:10px 0}.pips i{width:23px;height:5px;background:#1e382f66}.pips i.on{background:#f4e8c6}.opponent{text-align:right}.opponent .pips{flex-direction:row-reverse}.opponent .pips i.on{background:#f36b4c}.energy{height:2px;width:139px;background:#163a3233}.energy i{display:block;height:100%;background:#e8e9dc;transition:width .1s}.opponent .energy i{background:var(--red)}.clock{text-align:center;color:#f0ebcf}.clock b{display:block;font:700 37px/1 'Barlow Condensed',sans-serif}.clock span{font-size:7px;letter-spacing:2px}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#10281f70;backdrop-filter:blur(2px);text-align:center}.overlay .eyebrow{color:#ffe7b3}.overlay h2{font:800 clamp(32px,5vw,67px)/1 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:15px 0}.overlay p{font-size:13px;line-height:1.7;margin:0 0 22px;color:#e0e5d2}.overlay button{background:var(--red);color:#14231c;padding:17px 28px;font-size:11px;min-width:220px}.overlay button:hover{background:#ff9373}.overlay button span{margin-left:25px}.overlay small{font-size:9px;color:#d1d6c3;margin-top:13px}.overlay.hidden{display:none}.arena-caption{position:absolute;bottom:15px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:2px;color:#d8ddc2a0;pointer-events:none}.callout{position:absolute;top:35%;width:100%;text-align:center;font:800 38px 'Barlow Condensed',sans-serif;letter-spacing:4px;color:#ffeabf;text-shadow:0 2px 10px #17392b;pointer-events:none}.bottomline{color:var(--muted);font-size:10px;letter-spacing:.2px}.bottomline button{color:var(--paper)}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:27px 0;border-bottom:1px solid #2c3830}.control{display:flex;gap:15px}.num{font:500 10px 'DM Sans',sans-serif;color:var(--red);padding-top:4px}.control h3{font-size:12px;font-weight:500;margin:0 0 12px}.control p{font-size:10px;color:var(--muted);margin:0}kbd{display:inline-block;border:1px solid #455144;border-bottom-width:2px;border-radius:3px;min-width:21px;text-align:center;padding:3px;font:10px 'DM Sans',sans-serif;color:var(--paper);margin-right:3px}.control p span{margin-left:8px}footer{display:flex;justify-content:space-between;gap:10px;padding-top:20px;font-size:8px;letter-spacing:1px;color:var(--muted)}footer b{color:var(--red);margin:0 6px}.touch{display:none}@media(max-width:700px){main{padding:25px 4%}header{padding:18px 4%}.heading p{font-size:11px}.heading h1{font-size:74px}.heading h1 span{font-size:22px;margin-left:12px}.arena{aspect-ratio:1.45}.hud{inset:15px 15px auto}.pips i{width:15px}.energy{width:99px}.clock b{font-size:28px}.topline,.bottomline{padding:10px;font-size:8px}.topline>span:nth-child(2){display:none}.controls{grid-template-columns:1fr;gap:18px;padding:22px 0}.control{align-items:start}.control h3{margin-bottom:6px}.touch{display:flex;gap:5px;margin:15px 0;touch-action:none}.touch button{flex:1;background:#27372b;border:1px solid #455144;padding:15px 1px;font-size:8px;letter-spacing:0}.touch button:active{background:var(--red);color:#101815}footer{flex-wrap:wrap;line-height:1.7}footer span:last-child{display:none}.overlay p{font-size:11px;margin-bottom:12px}.overlay h2{margin:10px 0}.overlay .eyebrow{font-size:7px}.overlay button{padding:13px 18px}.callout{font-size:27px}}
.health{width:245px;height:13px;background:#19362f80;border:1px solid #f2f1d044;margin:10px 0 4px;transform:skew(-10deg);overflow:hidden}.health i{display:block;width:100%;height:100%;background:#d9eb9d;transition:width .2s,background .2s}.opponent .health{transform:skew(10deg)}.opponent .health i{margin-left:auto}.hptext{display:block;font-size:9px;color:#faf4dc;letter-spacing:1px;margin-bottom:8px}.energy{width:245px;height:3px}.opponent .energy i{margin-left:auto}.modes{display:flex;gap:6px;margin-bottom:15px}.overlay .modes button{min-width:0;padding:10px 17px;background:#182e27;color:#d1d7c4;border:1px solid #80917a;font-size:9px}.overlay .modes button.selected{background:#e7e8d6;color:#182e27;border-color:#e7e8d6}.controls .control p{line-height:2.4}.controls .control h3{margin-bottom:6px}#description{margin-bottom:15px}@media(max-width:700px){.health,.energy{width:105px}.health{height:9px}.hud .label{font-size:8px}.overlay small{font-size:8px}.controls{grid-template-columns:1fr}.overlay h2{font-size:30px}.overlay .modes button{padding:8px 10px}.heading p:after{content:'Optimerat för dator och tangentbord';display:block;color:#f36b4c;font-size:8px;max-width:125px;margin-top:7px}}
.opponent .energy i{background:#bda0ed}.control:nth-child(2) .num{color:#bda0ed}.techniques{border-bottom:1px solid #2c3830}.techniques summary{cursor:pointer;list-style:none;padding:18px 0;font-size:9px;letter-spacing:2px;color:#aab8a4}.techniques summary span{float:right;color:#f36b4c}.techniques>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:4px 0 20px}.techniques h3{font-size:12px;font-weight:500;margin:0 0 8px}.techniques p{font-size:10px;line-height:1.8;color:#8e9b8e;margin:0}@media(max-width:700px){.techniques>div{grid-template-columns:1fr 1fr}}

.online-panel{margin:25px 0 0;padding:24px;border:1px solid #455144;background:#19251e;display:grid;grid-template-columns:1fr 1fr;gap:15px 28px}.online-panel h2{font:700 30px 'Barlow Condensed',sans-serif;margin:8px 0}.online-panel p{font-size:11px;color:#aab8a4;line-height:1.7;margin:0}.room-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.room-actions button{border:1px solid #788b70;padding:12px 14px;font-size:9px}.room-actions #create-room{background:#e7e8d6;color:#182e27}.room-actions label{font-size:10px;color:#aab8a4}.room-actions input{font:600 13px 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;background:#101815;border:1px solid #63735b;color:#e8e9dc;width:150px;padding:12px}.room-feedback{grid-column:1/-1}.room-feedback strong{color:#e8e9dc;font-size:20px;letter-spacing:3px;margin-right:12px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}@media(max-width:700px){.online-panel{grid-template-columns:1fr;padding:17px}.room-actions{gap:8px}.online-panel h2{font-size:25px}}

.callout.ko{top:31%;font-size:clamp(30px,5vw,64px);color:#ffe6a4;letter-spacing:3px;text-transform:uppercase;-webkit-text-stroke:.5px #a83f32;text-shadow:3px 3px 0 #5c2a24,0 0 25px #ffda8b66}.clock b{min-width:78px}

.game-subtitle{font:700 clamp(18px,2.3vw,30px) 'Barlow Condensed',sans-serif;letter-spacing:6px;color:#b8c3ae;margin-top:10px}.heading h1 span{white-space:nowrap;letter-spacing:2px}

/* Touch controls remain outside the canvas, so fingers do not cover the fighters. */
.stage-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}.stage-tools button{min-height:36px}.touch-controls,.touch-guidance{display:none}.touch-enabled .touch-controls{display:grid;gap:14px;padding:12px 14px;background:#121e18;border-top:1px solid #3d4b3e}.touch-enabled .touch-guidance{display:flex;justify-content:space-between;gap:12px;padding:6px 14px 10px;background:#121e18;color:#aab8a4;font-size:9px;line-height:1.5}.touch-enabled .controls{display:none}.touch-player{min-width:0}.pad-title{display:block;color:#a9b99b;font-size:9px;letter-spacing:1.5px;margin-bottom:7px}.touch-player:nth-child(2) .pad-title{color:#bda0ed}.pad-layout{display:grid;grid-template-columns:148px minmax(0,1fr);gap:24px;max-width:840px;margin:auto}.direction-pad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:44px 44px;gap:5px;align-items:center}.direction-pad .left{grid-column:1;grid-row:1}.direction-pad .right{grid-column:3;grid-row:1}.direction-pad .down{grid-column:2;grid-row:2}.action-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pad-button{min-width:0;min-height:44px;border:1px solid #62745b;border-bottom-width:3px;border-radius:9px;background:#26392a;color:#edf0df;font-size:10px;letter-spacing:.3px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;padding:8px 4px}.direction-pad .left,.direction-pad .right{font-size:24px}.pad-button.jump{background:#34503a}.pad-button.roll,.pad-button.cart{background:#2c3e3b}.pad-button.pressed{background:#e8e9dc;color:#17281c;border-color:#edf0df;transform:translateY(2px);border-bottom-width:1px}.touch-controls.two-players{grid-template-columns:1fr 1fr}.two-players .pad-layout{grid-template-columns:142px minmax(0,1fr);gap:12px}.orientation-tip{display:none}.touch-enabled .heading p:after{content:none}.touch-enabled .arena{aspect-ratio:2/1}.touch-enabled .overlay button{touch-action:manipulation}.touch-enabled .online-panel button{min-height:44px;touch-action:manipulation}.room-actions input{font-size:16px}.touch-enabled .bottomline{flex-wrap:wrap}.touch-enabled .heading{margin-bottom:18px}.touch-enabled .topline>span:nth-child(2){display:none}
body.play-view{overflow:hidden}body.play-view header,body.play-view .heading,body.play-view .online-panel,body.play-view .controls,body.play-view .techniques,body.play-view footer{display:none}body.play-view main{padding:0;max-width:none}body.play-view .machine{position:fixed;z-index:100;inset:0;width:100%;height:var(--view-height,100dvh);background:#101815;display:flex;flex-direction:column;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);border:0}body.play-view .topline{padding:4px 12px;min-height:44px;flex:none}body.play-view .arena{aspect-ratio:2/1;flex:none;width:min(100%,calc((var(--view-height,100dvh) - var(--control-height,0px) - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*2));max-width:1200px;height:auto;margin:auto;align-self:center}body.play-view .bottomline,body.play-view .touch-guidance{display:none}body.play-view .touch-controls{flex:none}body.play-view .touch-controls.two-players{gap:12px}body.play-view .topline>span:nth-child(2){display:none}
@media(max-width:1024px){.touch-enabled header{padding:14px 4%}.touch-enabled main{padding:20px 3%}.touch-enabled .heading h1{font-size:clamp(58px,10vw,90px)}.touch-enabled .heading h1 span{font-size:25px;margin-left:12px}.touch-enabled .heading p{font-size:12px}.touch-enabled .game-subtitle{font-size:20px;letter-spacing:4px}.touch-enabled .topline{padding:5px 10px;font-size:8px}.touch-enabled .topline>span:first-child{letter-spacing:.6px}.touch-enabled .hud{inset:12px 14px auto}.touch-enabled .health,.touch-enabled .energy{width:clamp(95px,24vw,220px)}.touch-enabled .hud .label{font-size:8px;letter-spacing:1px}.touch-enabled .clock b{font-size:28px;min-width:54px}.touch-enabled .arena-caption{font-size:6px;letter-spacing:1px}.touch-enabled .overlay h2{font-size:clamp(25px,5vw,48px)}.touch-enabled .callout{font-size:clamp(22px,4vw,40px)}.touch-enabled .callout.ko{font-size:clamp(24px,5vw,55px)}.touch-enabled .online-panel{grid-template-columns:1fr}}
@media(max-width:600px){.touch-enabled .heading p{display:none}.touch-enabled .heading .eyebrow{font-size:8px;letter-spacing:2px}.touch-enabled .game-subtitle{font-size:18px;margin-top:8px}.touch-enabled header .brand{font-size:30px}.touch-enabled .heading h1{font-size:62px}.touch-enabled .heading h1 span{font-size:23px}.touch-enabled .touch-controls{padding:9px 8px;gap:12px}.pad-layout,.two-players .pad-layout{grid-template-columns:142px minmax(0,1fr);gap:12px}.pad-button{font-size:9px;letter-spacing:0}.touch-controls.two-players{grid-template-columns:1fr}.touch-enabled .touch-guidance{padding:4px 8px 9px;flex-direction:column;gap:3px}.orientation-tip{display:block}.touch-enabled .topline>span:first-child{font-size:7px}.stage-tools{gap:4px}.stage-tools button{font-size:8px}.touch-enabled .overlay .eyebrow,.touch-enabled .overlay small{display:none}.touch-enabled .overlay h2{margin:6px 0;font-size:28px}.touch-enabled .overlay p{font-size:10px;line-height:1.4;margin-bottom:8px;max-width:90%}.touch-enabled .overlay .modes{margin-bottom:8px}.touch-enabled .overlay .modes button{font-size:8px;min-height:36px;padding:8px 10px}.touch-enabled .overlay #start{min-width:180px;padding:11px 16px;min-height:40px}.touch-enabled .health{height:8px;margin-top:5px}.touch-enabled .hptext{font-size:8px;margin-bottom:5px}.touch-enabled .hud{inset:9px 11px auto}.touch-enabled .hud .label{font-size:7px;letter-spacing:.4px}.touch-enabled .clock b{font-size:24px}.touch-enabled .clock span{font-size:6px;letter-spacing:1px}.touch-enabled .arena-caption{display:none}}
@media(orientation:landscape) and (max-height:600px){.touch-enabled .touch-controls{padding:5px 10px 7px}.pad-title{font-size:8px;margin-bottom:4px}.pad-layout{grid-template-columns:150px minmax(0,1fr);gap:30px;max-width:none}.direction-pad{grid-template-rows:46px}.direction-pad .down{grid-column:2;grid-row:1}.action-pad{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.pad-button{min-height:46px}.touch-controls.two-players .pad-layout{grid-template-columns:142px minmax(0,1fr);gap:8px}.touch-controls.two-players .action-pad{grid-template-columns:repeat(3,minmax(0,1fr))}.touch-controls.two-players .direction-pad{grid-template-rows:44px 44px}.touch-controls.two-players .direction-pad .down{grid-row:2}.touch-controls.two-players .pad-button{min-height:44px}.touch-enabled .touch-guidance{display:none}.touch-enabled .overlay .eyebrow{display:none}.touch-enabled .overlay h2{margin:5px 0;font-size:27px}.touch-enabled .overlay p{font-size:10px;margin-bottom:7px}.touch-enabled .overlay .modes{margin-bottom:7px}.touch-enabled .overlay .modes button{padding:8px 10px;font-size:8px}.touch-enabled .overlay #start{padding:10px 16px;min-height:40px}.touch-enabled .overlay small{display:none}}

.touch-enabled .stage-tools button{min-height:44px;min-width:52px}@media(max-width:359px){.pad-layout,.two-players .pad-layout{grid-template-columns:1fr;gap:8px}.direction-pad{grid-template-rows:44px}.direction-pad .down{grid-row:1;grid-column:2}.touch-enabled .overlay p{display:none}}

/* Preserve the canvas's 2:1 field; reserve actual control height, including two players. */
body.play-view .machine{top:var(--view-top,0px);bottom:auto;overflow:hidden;overscroll-behavior:none}
body.play-view .arena{width:var(--arena-width,100%);max-width:100%;min-height:0;flex-shrink:0}
body.play-view .touch-controls{width:100%;margin-top:auto}
body.play-view .topline{min-height:48px}
body.play-view.touch-enabled .pad-title{display:none}
body.play-view .touch-controls{padding-top:6px;padding-bottom:6px}
body.play-view.touch-enabled .overlay p{display:none}
body.play-view.touch-enabled .overlay h2{font-size:clamp(20px,4vw,30px);margin:4px 0}
@media(orientation:landscape) and (max-height:450px){
 body.play-view.touch-enabled .topline>span:first-child{display:none}
 body.play-view.touch-enabled .stage-tools{width:100%;justify-content:space-between}
 body.play-view.touch-enabled .touch-controls.two-players .pad-layout{grid-template-columns:142px minmax(0,1fr)}
 body.play-view.touch-enabled .touch-controls.two-players .action-pad{grid-template-columns:repeat(6,minmax(44px,1fr))}
 body.play-view.touch-enabled .touch-controls.two-players{grid-template-columns:1fr;gap:6px}
 body.play-view.touch-enabled .touch-controls.two-players .direction-pad{grid-template-rows:44px}
 body.play-view.touch-enabled .touch-controls.two-players .direction-pad .down{grid-row:1}
 body.play-view.touch-enabled .touch-controls.two-players .pad-button{font-size:8px;padding:4px 1px}
}
body.play-view.touch-enabled .health,body.play-view.touch-enabled .energy{width:clamp(48px,calc((var(--arena-width,100vw) - 110px)/2),220px)}
body.play-view.touch-enabled .hud{inset:9px 11px auto}
body.play-view.touch-enabled .arena-caption{display:none}

/* A taller fight view, with thumb pads beside it on landscape phones. */
body.play-view.touch-enabled .arena{height:var(--arena-height);aspect-ratio:auto}
body.play-view.touch-enabled .machine.side-controls .arena{position:absolute;left:var(--arena-left,108px);top:var(--arena-top,52px);margin:0}
body.play-view.touch-enabled .machine.side-controls .touch-controls{position:absolute;inset:var(--arena-top,52px) var(--safe-right) var(--safe-bottom) var(--safe-left);width:auto;margin:0;padding:0;border:0;background:none;pointer-events:none}
body.play-view .side-controls .pad-layout{display:contents}
body.play-view .side-controls .direction-pad{position:absolute;left:5px;top:50%;transform:translateY(-50%);width:98px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,48px);gap:5px;pointer-events:auto}
body.play-view .side-controls .direction-pad .left{grid-column:1;grid-row:1}
body.play-view .side-controls .direction-pad .right{grid-column:2;grid-row:1}
body.play-view .side-controls .direction-pad .down{grid-column:1 / 3;grid-row:2}
body.play-view .side-controls .action-pad{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:114px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,48px);gap:5px;pointer-events:auto}
body.play-view .side-controls .pad-button{font-size:9px;padding:6px 2px;min-height:48px;height:48px}
body.play-view .side-controls .direction-pad .left,body.play-view .side-controls .direction-pad .right{font-size:24px}
body.play-view.touch-enabled .machine:not(.side-controls) .arena{margin:auto}

/* iOS must treat gameplay touches as controls, including text announcements. */
.touch-enabled .machine,.touch-enabled .machine *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.play-view.touch-enabled .machine{touch-action:none}

.ui-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ui-arrow.ne{transform:rotate(-45deg)}.ui-arrow.sw{transform:rotate(135deg)}.ui-arrow.left{transform:rotate(180deg)}
.direction-pad .ui-arrow{width:25px;height:25px;vertical-align:middle}