*{
box-sizing:border-box}
html{
color-scheme:dark;
background:#101c20}
body{
margin:0;
min-width:320px;
color:#f6ecd2;
font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
background:radial-gradient(ellipse at 50% 0,#293d39 0,transparent 64%);
min-height:100svh}
button,a{
-webkit-tap-highlight-color:transparent}
button{
font:inherit;
cursor:pointer}
button:focus-visible,a:focus-visible,canvas:focus-visible{
outline:3px solid #f4cb6b;
outline-offset:4px}
[hidden]{
display:none!important}
.arcade{
max-width:1240px;
margin:auto;
padding:28px 40px 22px}
.masthead{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:24px}
.brand{
display:flex;
min-height:44px;
align-items:center;
color:#f9eccd;
text-decoration:none;
font-weight:900;
font-size:28px;
letter-spacing:-3px}
.brand span{
color:#f2bf58}
.brand i{
font-style:normal;
letter-spacing:2px;
font-size:10px;
font-weight:500;
border-left:1px solid #52625b;
padding-left:14px;
margin-left:18px}
.edition{
font-size:9px;
letter-spacing:1.6px;
color:#a4b6aa;
display:flex;
gap:9px;
align-items:center}
.edition b{
width:5px;
height:5px;
background:#e2b959;
box-shadow:0 0 8px #e2b959;
border-radius:50%}
.small-button{
min-width:44px;
min-height:44px;
border:1px solid #a6b5a14f;
background:#162b2cdd;
color:#e6e9cc;
font-size:10px;
font-weight:bold;
letter-spacing:1px;
padding:10px 14px;
border-radius:3px}
.small-button:hover{
background:#354943}
.game-shell{
aspect-ratio:16/9;
position:relative;
overflow:hidden;
background:#1f3937;
border:1px solid #79897566;
border-radius:8px;
box-shadow:0 1px 0 #d4ddad55 inset,0 22px 70px #0007}
.game-shell:fullscreen{
width:100vw;
height:100svh;
border:0;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
background:#101c20}
.game-shell:fullscreen canvas{
width:min(100vw,177.777svh);
height:min(100svh,56.25vw)}
canvas{
display:block;
width:100%;
height:100%;
object-fit:contain;
outline:none;
touch-action:none}
.scanlines{
position:absolute;
inset:0;
pointer-events:none;
background:repeating-linear-gradient(0deg,#00000018 0,#00000018 1px,transparent 1px,transparent 4px);
opacity:.4}
.menu{
position:absolute;
inset:0;
padding:6% 6.5%;
background:linear-gradient(90deg,#0c232bd9 0,#0c232b9c 42%,transparent 74%);
pointer-events:none}
.menu>*{
position:relative}
.eyebrow{
font-size:clamp(7px,.9vw,11px);
letter-spacing:2px;
font-weight:bold;
color:#c0d1b9;
margin:0 0 18px}
h1{
font-family:Impact,"Arial Black",sans-serif;
font-size:clamp(55px,9.5vw,119px);
line-height:.83;
letter-spacing:1px;
font-style:italic;
transform:skew(-3deg);
margin:0;
color:#f4ead0;
text-shadow:4px 4px 0 #19484d,7px 7px 0 #102a31}
h1 span{
color:#f2c75d}
h1 sup{
font-size:clamp(24px,4vw,46px);
vertical-align:top;
margin:8px;
color:#9dd8b9}
.tagline{
font-size:clamp(10px,1.18vw,15px);
line-height:1.6;
color:#cedbd0;
margin:23px 0 20px}
.primary{
pointer-events:auto;
background:#f1c55f;
color:#18312f;
border:0;
border-bottom:4px solid #af8234;
border-radius:2px;
min-height:48px;
padding:15px 22px;
font-size:12px;
letter-spacing:1.5px;
font-weight:900;
box-shadow:0 4px 20px #0003}
.primary:hover{
background:#ffe098;
transform:translateY(-1px)}
.primary:disabled{
opacity:.65;
cursor:wait}
.menu-note{
font-size:8px;
letter-spacing:1px;
color:#a5bdad;
margin-top:14px}
.game-buttons{
position:absolute;
z-index:2;
bottom:12px;
right:12px;
display:flex;
gap:6px}
.game-buttons .small-button{
font-size:18px;
padding:6px;
min-height:44px;
min-width:44px}
.skip{
position:absolute;
top:20px;
right:20px}
.end-menu,.pause-menu{
position:absolute;
inset:0;
background:#10282be8;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:20px}
.end-menu h2,.pause-menu h2{
font-family:Impact,"Arial Black",sans-serif;
line-height:.94;
font-size:clamp(40px,7vw,84px);
letter-spacing:2px;
margin:0;
color:#f0c562}
.end-menu p:not(.eyebrow){
font-size:clamp(10px,1.25vw,15px);
line-height:1.7;
max-width:490px;
white-space:pre-line;
margin:20px 0 25px}
.pause-menu .primary{
margin-top:25px}
.below-game{
padding-top:19px}
.below-game>p{
text-align:center;
font-size:9px;
letter-spacing:1px;
color:#97afa2;
display:flex;
gap:9px;
align-items:center;
justify-content:center;
flex-wrap:wrap;
margin:0 0 28px}
kbd{
font:inherit;
border:1px solid #516259;
border-radius:2px;
padding:4px 6px;
color:#dce5cf;
background:#22342f}
.credits{
display:flex;
justify-content:space-between;
gap:15px;
font-size:8px;
letter-spacing:1px;
color:#789386;
border-top:1px solid #d3e3b81b;
padding-top:20px;
line-height:1.6}
.credits a{
color:#a6b9a4;
text-underline-offset:3px}
.heart{
color:#dc9a6a}
.touch-controls{
display:none;
justify-content:space-between;
align-items:end;
gap:16px;
padding-top:16px;
user-select:none;
-webkit-user-select:none;
touch-action:none}
.dpad{
position:relative;
flex:none;
display:grid;
grid-template:repeat(3,48px)/repeat(3,48px);
border-radius:50%;
background:#183830d9;
box-shadow:inset 0 0 0 1px #a6c7a35c;
touch-action:none}
.dpad button,.action-pad button{
background:#2c443d;
color:#e3eaca;
border:1px solid #79947d55;
border-bottom:3px solid #0b2020;
border-radius:5px;
min-height:48px;
min-width:48px;
touch-action:none;
font-weight:bold}
.dpad .up{
grid-area:1/2}
.dpad .left{
grid-area:2/1}
.dpad .down{
grid-area:3/2}
.dpad .right{
grid-area:2/3}
.dpad button{
font-size:23px;
border:0;
background:transparent;
border-radius:50%}
.thumb-stick{
position:absolute;
left:50%;top:50%;
width:36px;height:36px;
margin:-18px;
border-radius:50%;
background:#adc7a2;
border:3px solid #e5e9bf;
box-shadow:0 3px 0 #0b202080;
transform:translate(var(--stick-x,0px),var(--stick-y,0px));
pointer-events:none}
.action-pad{
flex:none;
display:grid;
grid-template:50px 62px/repeat(3,56px);
gap:4px;
font-size:8px}
.action-pad button{border-radius:16px}
.action-pad .punch{grid-area:2/2}
.action-pad .kick{grid-area:2/3}
.action-pad .dodge{color:#b3ebdb}
.action-pad .punch{
background:#d1a750;
color:#173532}
.action-pad .kick{
background:#92aa78;
color:#173532}
.action-pad .joy{
color:#9daea1}
.action-pad .joy.ready{
color:#ffe49a;
background:#5a6538;
box-shadow:0 0 15px #dfc66844}
.touch-controls button.pressed{
filter:brightness(1.5);
transform:translateY(2px)}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0}
@media(pointer:coarse),(max-width:700px){
.touch-controls{
display:flex}
.touch-controls{gap:6px}
.dpad{grid-template:repeat(3,44px)/repeat(3,44px)}
.dpad button{min-width:44px;min-height:44px}
.action-pad{grid-template:48px 60px/repeat(3,50px);gap:4px}
.action-pad button{min-width:44px;min-height:44px}
.below-game>p{
display:none}
.arcade{
padding:16px 12px}
.masthead{
margin-bottom:15px}
.edition{
display:none}
.brand{
font-size:25px}
.brand i{
font-size:8px;
margin-left:12px;
padding-left:10px}
.small-button{
font-size:8px;
padding:8px}
.menu{
padding:5% 6%}
.eyebrow{
font-size:6px;
letter-spacing:1px;
margin-bottom:9px}
h1{
font-size:clamp(38px,11vw,80px)}
.tagline{
margin:8px 0;
font-size:8px;
line-height:1.4}
.primary{
min-height:44px;
padding:9px 13px;
font-size:8px;
letter-spacing:1px}
.menu-note{
display:none}
.credits{
flex-wrap:wrap;
font-size:7px;
gap:8px;
margin-top:2px;
padding-top:13px}
.credits>span:last-child{
width:100%}
.skip{
top:8px;
right:8px}
.end-menu p:not(.eyebrow){
font-size:9px;
line-height:1.5;
margin:10px 0}
.end-menu h2,.pause-menu h2{
font-size:clamp(20px,6vw,34px)}
.game-buttons{
bottom:6px;
right:6px}
.game-buttons .small-button{
min-height:44px;
min-width:44px;
font-size:14px}
.game-shell{
border-radius:4px}
}
@media(max-height:520px) and (orientation:landscape){
.arcade{
padding:8px 12px;
max-width:100%}
.masthead,.below-game{
display:none}
.game-shell{
width:min(100%,calc((100svh - 16px)*16/9));
margin:auto}
.touch-controls{
position:fixed;
bottom:15px;
left:20px;
right:20px;
padding:0;
pointer-events:none;
opacity:.6}
.touch-controls button,.touch-controls .dpad{
pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){
.scanlines{
display:none}
.primary:hover{
transform:none}
}
.move-guide{display:flex;justify-content:space-between;gap:18px;color:#93aca1;font-size:9px;line-height:1.6;margin:0 0 24px}
.move-guide b{color:#e8c371;margin-right:9px}
.end-menu h2{font-size:clamp(30px,5vw,66px)}
.end-menu p.end-rank{color:#b8e4bf;font-size:16px;letter-spacing:2px;margin:16px 0 22px}
.scorecard{display:flex;gap:38px;margin:0 0 4px}
.scorecard div{display:flex;flex-direction:column;gap:8px}
.scorecard span{font-size:9px;color:#98b6a9;letter-spacing:1px}
.scorecard strong{font-size:25px;color:#ffe09b}
.end-menu p.end-best{font-size:9px;margin:0 0 22px;color:#a4bbac}
.end-menu p#end-copy{margin:15px 0 10px}
@media(max-width:700px){
  .move-guide{font-size:7px;gap:10px;margin:16px 0;flex-wrap:wrap}
  .move-guide span:last-child{display:none}
  .scorecard{gap:16px}
  .scorecard span{font-size:6px;letter-spacing:0}
  .scorecard strong{font-size:14px}
  .end-menu{padding:10px}
  .end-menu h2{font-size:clamp(19px,5.3vw,36px)}
  .end-menu p.end-rank{font-size:8px;margin:6px 0 9px;letter-spacing:1px}
  .end-menu p.end-best{font-size:6px;margin:0 0 8px}
  .end-menu p#end-copy{display:none}
  .end-menu .eyebrow{margin-bottom:7px;font-size:5px}
  .scorecard{margin-bottom:8px}
}

/* Mobile fullscreen includes the controls, with a viewport fallback for Safari. */
.rotate-hint,#game-sound-btn{display:none}
body.game-fullscreen{overflow:hidden;overscroll-behavior:none}
.arcade.is-fullscreen{
  position:fixed;
  inset:0;
  z-index:10;
  width:100%;
  height:100dvh;
  max-width:none;
  margin:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  overscroll-behavior:none;
  background:#101c20;
}
.is-fullscreen .masthead,.is-fullscreen .below-game{display:none}
.is-fullscreen .game-shell{
  flex:none;
  width:min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9));
  height:auto;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.is-fullscreen .touch-controls{
  position:absolute;
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  bottom:max(12px,env(safe-area-inset-bottom));
  display:flex;
  padding:0;
  pointer-events:none;
  opacity:.8;
}
.is-fullscreen .touch-controls button,.is-fullscreen .touch-controls .dpad{pointer-events:auto}
.arcade:not([data-mode="playing"]) .touch-controls{display:none}
.is-fullscreen .game-buttons{
  position:fixed;
  top:max(8px,env(safe-area-inset-top));
  right:max(8px,env(safe-area-inset-right));
  bottom:auto;
}
.is-fullscreen #game-sound-btn{display:block}
@media(orientation:portrait){
  .arcade.is-fullscreen{
    padding-top:calc(64px + env(safe-area-inset-top));
    padding-bottom:calc(184px + env(safe-area-inset-bottom));
  }
  .is-fullscreen .game-shell{
    width:min(100%,calc((100dvh - 248px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9));
  }
  .is-fullscreen .rotate-hint{
    display:block;
    position:absolute;
    bottom:calc(166px + env(safe-area-inset-bottom));
    margin:0;
    font-size:9px;
    letter-spacing:1px;
    color:#97afa2;
  }
}
@media(orientation:landscape){
  .is-fullscreen .game-buttons{
    top:auto;
    bottom:max(12px,env(safe-area-inset-bottom));
    right:50%;
    transform:translateX(50%);
  }
  .is-fullscreen:not([data-mode="playing"]):not([data-mode="paused"]) .game-buttons{
    right:max(8px,env(safe-area-inset-right));
    transform:none;
  }
}