:root{
  color-scheme:dark;
  --ink:#050711;
  --navy:#071632;
  --blue:#0b4fc1;
  --cyan:#40d9ff;
  --gold:#ffd34f;
  --orange:#ff862e;
  --red:#ef2d3d;
  --cream:#fff5cf;
}

*{box-sizing:border-box}

html,body,#game,#game *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

img,canvas{
  -webkit-user-drag:none;
  user-drag:none;
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  background:radial-gradient(circle at 50% 10%,#163d79,#050711 58%);
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

body{display:grid;place-items:center;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
[hidden]{display:none!important}

#game{
  position:relative;
  width:min(100vw,56.25dvh);
  height:min(100dvh,177.7778vw);
  max-width:562px;
  max-height:1000px;
  overflow:hidden;
  isolation:isolate;
  background:#06132c;
  box-shadow:0 0 0 2px #1c56a8,0 0 90px #0d65d966;
  touch-action:none;
}

#game:fullscreen,
#game:-webkit-full-screen,
#game.fallback-fullscreen{
  width:min(100vw,56.25dvh);
  height:min(100dvh,177.7778vw);
  max-width:none;
  max-height:none;
  margin:auto;
  box-shadow:none;
}

#game.fallback-fullscreen{
  position:fixed;
  inset:0;
  z-index:9999;
}

#game::backdrop{background:#050711}

#stage,.screen,.overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

#stage{image-rendering:pixelated}
.screen{z-index:2}

.fullscreen-toggle{
  position:absolute;
  z-index:30;
  top:2.5%;
  right:3.5%;
  width:42px;
  height:42px;
  padding:0 0 3px;
  border:2px solid #7de5ff;
  border-radius:5px;
  background:#061936e8;
  color:#fff;
  font-size:25px;
  font-weight:1000;
  line-height:1;
  box-shadow:0 3px 0 #020817;
  text-shadow:2px 2px #020817;
}

#game[data-mode="select"] .fullscreen-toggle{
  top:3.5%;
  right:calc(4% + 50px);
}

#game[data-mode="fight"] .fullscreen-toggle{
  top:13.1%;
  right:calc(3% + 42px);
  width:34px;
  height:34px;
  font-size:20px;
}

#game[data-mode="result"] .fullscreen-toggle{top:2.5%;right:3.5%}

.cover{
  width:100%;
  height:100%;
  object-fit:fill;
  image-rendering:pixelated;
}

.start-actions{
  position:absolute;
  left:9%;
  right:9%;
  bottom:4.2%;
  display:grid;
  gap:12px;
  filter:drop-shadow(0 7px 0 #02050f);
}

.arcade{
  border:3px solid #fff6bf;
  border-radius:6px;
  padding:13px 14px;
  font-weight:1000;
  letter-spacing:.05em;
  text-shadow:2px 2px 0 #6a2800;
  box-shadow:0 5px 0 #803309,0 0 0 3px #ca8d22;
}

.arcade.primary{
  background:linear-gradient(#ffcb38,#f36f18 58%,#d64511);
  color:#fff;
  font-size:clamp(20px,5.5vw,31px);
}

.arcade.secondary{
  margin-top:13px;
  background:linear-gradient(#218ee9,#074aa6);
  color:#fff;
  border-color:#bdeeff;
  box-shadow:0 5px 0 #032c6b,0 0 0 3px #1885de;
  text-shadow:2px 2px #082550;
  font-size:clamp(14px,3.8vw,19px);
}

.arcade:active{transform:translateY(3px);box-shadow:0 2px 0 #632508,0 0 0 3px #ca8d22}
.arcade:disabled{filter:saturate(.2);cursor:wait}

.sound-toggle{
  justify-self:center;
  border:2px solid #bfefff;
  border-radius:5px;
  background:#03132bdc;
  padding:8px 15px;
  color:#ddf8ff;
  font-weight:900;
  box-shadow:0 3px 0 #020711;
}

#load-error{
  position:absolute;
  left:6%;
  right:6%;
  top:50%;
  margin:0;
  padding:12px;
  color:#fff;
  background:#7b1015ee;
  text-align:center;
}
#load-error:empty{display:none}

.select-screen{
  padding:3.5% 4% 2%;
  background:
    linear-gradient(#06142ad9,#071e43ed),
    repeating-linear-gradient(0deg,transparent 0 18px,#1980de1f 18px 20px),
    repeating-linear-gradient(90deg,transparent 0 18px,#1980de1f 18px 20px);
}

.select-header{
  height:11%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:3px solid var(--gold);
}

.kicker{
  margin:0 0 5px;
  color:var(--gold);
  font-size:clamp(10px,2.7vw,14px);
  font-weight:1000;
  letter-spacing:.16em;
}

.select-header h1{
  margin:0;
  color:#fff4c3;
  font-size:clamp(20px,5.8vw,31px);
  line-height:1;
  text-shadow:3px 3px 0 #a52321;
}

.icon-button{
  width:42px;
  height:42px;
  padding:0;
  flex:0 0 auto;
  border:2px solid #7de5ff;
  border-radius:5px;
  background:#061936e8;
  color:#fff;
  font-size:23px;
  font-weight:1000;
  box-shadow:0 3px 0 #020817;
}

.fighter-grid{
  height:68%;
  padding-top:3%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:2%;
}

.fighter-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:0;
  border:2px solid #65dfff;
  border-radius:5px;
  background:linear-gradient(#12428c,#061a3f);
  box-shadow:inset 0 0 0 2px #041022,3px 3px 0 #020712;
}

.fighter-card canvas{
  position:absolute;
  inset:2% 1% 18%;
  width:98%;
  height:80%;
  image-rendering:pixelated;
}

.fighter-card .fighter-name{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:21%;
  display:grid;
  place-items:center;
  padding:3px 1px;
  background:#030b1deb;
  border-top:2px solid var(--gold);
  color:#fff7cd;
  font-size:clamp(10px,2.8vw,14px);
  font-weight:1000;
  text-transform:uppercase;
}

.fighter-card.won::after{
  content:"✓";
  position:absolute;
  top:4px;
  right:4px;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border:2px solid #eaffd0;
  border-radius:50%;
  background:#19a44b;
  font-size:15px;
  font-weight:1000;
}

.fighter-card.selected{
  border-color:#fff1a3;
  box-shadow:inset 0 0 0 3px #ffba24,0 0 0 3px #ffef83,4px 5px 0 #020712;
  filter:brightness(1.16);
  transform:translateY(-2px);
}

.fighter-card.locked{filter:grayscale(.8);cursor:not-allowed}
.fighter-card.locked canvas{opacity:.28}
.fighter-card.locked::before{
  content:"🔒";
  position:absolute;
  z-index:2;
  inset:0 0 19%;
  display:grid;
  place-items:center;
  font-size:clamp(23px,7vw,37px);
  background:#0308147a;
}

.selection-bar{
  height:9%;
  margin-top:2%;
  display:grid;
  grid-template-columns:.78fr 1.35fr;
  align-items:stretch;
  gap:8px;
}

.selection-bar>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 8px;
  border:2px solid #2d78bb;
  background:#020b20d9;
}

.selection-bar span{
  color:#8fdfff;
  font-size:clamp(8px,2vw,10px);
  font-weight:1000;
  letter-spacing:.12em;
}

.selection-bar strong{
  overflow:hidden;
  color:#fff1a6;
  font-size:clamp(11px,3.2vw,16px);
  white-space:nowrap;
  text-overflow:ellipsis;
}

.selection-bar button{
  min-width:0;
  border:3px solid #fff3a4;
  border-radius:5px;
  background:linear-gradient(#ffb92e,#dd421c);
  color:#fff;
  font-size:clamp(11px,3.1vw,16px);
  font-weight:1000;
  text-shadow:2px 2px #7a1b12;
  box-shadow:0 4px 0 #67140b;
}

.selection-bar button:disabled{
  border-color:#7692a6;
  background:#29445c;
  color:#b9cad7;
  box-shadow:0 4px 0 #0d1d2a;
  cursor:not-allowed;
}

.unlock-note{
  height:4.5%;
  margin:.5% 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#b8dfff;
  text-align:center;
  font-size:clamp(9px,2.45vw,12px);
  line-height:1.2;
}

.text-button{
  display:block;
  margin:0 auto;
  padding:4px 10px;
  border:0;
  background:none;
  color:#d8efff;
  text-decoration:underline;
  font-size:clamp(10px,2.8vw,13px);
}

.intro-screen{
  background:linear-gradient(#0007184d,#000718a8 64%,#02050ff2);
  text-align:center;
}

.intro-copy{
  position:absolute;
  top:8%;
  left:4%;
  right:4%;
}

.intro-copy h1{
  margin:0;
  color:#fff1a8;
  font-size:clamp(45px,13vw,72px);
  line-height:1;
  letter-spacing:.02em;
  text-shadow:4px 4px 0 #b42120,7px 7px 0 #02050c;
}

.intro-copy #intro-line{
  display:inline-block;
  margin:12px 0 0;
  padding:8px 12px;
  border:2px solid #ffd453;
  background:#06152de0;
  color:#fff;
  font-weight:1000;
  font-size:clamp(12px,3.4vw,17px);
}

.intro-loader{
  position:absolute;
  left:9%;
  right:9%;
  bottom:8.5%;
  height:8px;
  border:2px solid #fff0b0;
  background:#030817;
}

.intro-loader i{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#ff342e,#ffd936);
}

.skip-button{
  position:absolute;
  right:7%;
  bottom:11%;
  border:0;
  background:none;
  color:#cbe9ff;
  font-size:12px;
  text-decoration:underline;
}

.fight-screen{pointer-events:none}

.fight-hud{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:12%;
  display:grid;
  grid-template-columns:1fr 58px 1fr;
  align-items:center;
  gap:8px;
  padding:3.5% 3% 2%;
  background:linear-gradient(#020713f7,#07162ee0);
  border-bottom:3px solid #f5c738;
  box-shadow:0 5px 0 #01040b99;
}

.health{min-width:0}
.health span{
  display:block;
  overflow:hidden;
  margin-bottom:4px;
  color:#fff6c8;
  font-size:clamp(10px,3vw,14px);
  font-weight:1000;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.enemy-health{text-align:right}
.health>div{height:14px;border:2px solid #eaf8ff;background:#25101b;box-shadow:2px 2px #000}
.health i{display:block;width:100%;height:100%;background:linear-gradient(#65f56a,#16a941);transition:width .18s}
.enemy-health i{margin-left:auto;background:linear-gradient(#ffdc42,#f03b28)}

.round-clock{text-align:center}
.round-clock strong{
  display:block;
  color:#fff;
  font-size:clamp(26px,8vw,40px);
  line-height:.9;
  text-shadow:3px 3px #b32120;
}
.round-clock small{color:#a8dbff;font-size:9px;font-weight:1000}

.resource-hud{
  position:absolute;
  z-index:5;
  top:12%;
  left:3%;
  right:3%;
  height:5.8%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  padding-top:7px;
  pointer-events:none;
}

.resource span{
  display:block;
  margin-bottom:3px;
  color:#eaf7ff;
  font-size:clamp(9px,2.4vw,12px);
  font-weight:1000;
  text-shadow:2px 2px #020713;
}

.resource.hyper{text-align:right}
.resource>div{height:10px;border:2px solid #eaf8ff;background:#121a26;box-shadow:2px 2px #000}
.resource i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#4cf58e,#f5df3e);transition:width .14s}
.resource.hyper i{width:0;margin-left:auto;background:linear-gradient(90deg,#8d4dff,#ff3ee7,#fff36b)}

.telegraph{
  position:absolute;
  z-index:6;
  top:18.8%;
  left:7%;
  right:7%;
  min-height:36px;
  margin:0;
  display:grid;
  place-items:center;
  padding:6px 8px;
  border:2px solid transparent;
  color:#fff8b8;
  background:#020712a6;
  font-size:clamp(13px,3.8vw,18px);
  font-weight:1000;
  text-align:center;
  letter-spacing:.04em;
  text-shadow:2px 2px #7c1517;
}
.telegraph.danger{border-color:#ff604a;background:#7f1014e8;animation:danger .35s steps(2,end) infinite}
.telegraph.good{border-color:#83ff8b;background:#07582fdc}
.telegraph.perfect{border-color:#fff28a;background:#5c25a8e8;color:#fff5a8}

.gesture-zone{
  position:absolute;
  z-index:4;
  inset:18% 0 8%;
  cursor:crosshair;
  touch-action:none;
  user-select:none;
  pointer-events:auto;
}

.gesture-hint{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:11.5%;
  width:90%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
  border:2px solid #61dfff;
  background:#020b1ee8;
  box-shadow:0 4px 0 #01040d;
  pointer-events:none;
  transition:opacity .35s,transform .35s;
}

.gesture-hint span{
  min-width:0;
  padding:7px 1px;
  color:#99dfff;
  font-size:clamp(8px,2.1vw,10px);
  text-align:center;
  font-weight:1000;
  white-space:nowrap;
}
.gesture-hint b{display:block;color:#fff1a4}
.gesture-hint.hidden{opacity:0;transform:translate(-50%,12px)}

.dodge-button{
  position:absolute;
  z-index:8;
  top:49%;
  width:54px;
  height:92px;
  padding:0 0 7px;
  border:3px solid #aeeeff;
  background:#05204ccf;
  color:#fff;
  font:1000 clamp(44px,13vw,66px)/1 monospace;
  box-shadow:0 5px 0 #010717,inset 0 0 0 2px #1a77ba;
  text-shadow:3px 3px #031027;
  pointer-events:auto;
}
.dodge-button.left{left:0;border-left:0;border-radius:0 15px 15px 0}
.dodge-button.right{right:0;border-right:0;border-radius:15px 0 0 15px}
.dodge-button:active,.dodge-button.active{transform:translateY(3px);background:#187fca;box-shadow:0 2px 0 #010717}

.shield-button,.hyper-button{
  position:absolute;
  z-index:9;
  bottom:2.1%;
  height:58px;
  border-radius:10px;
  font-weight:1000;
  pointer-events:auto;
}

.shield-button{
  left:3%;
  width:74px;
  border:3px solid #9be9ff;
  background:linear-gradient(#1683c7,#073565);
  color:#dff8ff;
  font-size:25px;
  box-shadow:0 5px 0 #031329;
}
.shield-button span{display:block;margin-top:2px;font-size:10px}
.shield-button:active,.shield-button.active{transform:translateY(3px);background:#2faee8;box-shadow:0 2px 0 #031329}

.hyper-button{
  left:50%;
  width:126px;
  transform:translateX(-50%);
  border:3px solid #d7d1ed;
  background:linear-gradient(#392b59,#151328);
  color:#9790a9;
  box-shadow:0 5px 0 #07040f;
  text-shadow:2px 2px #08040f;
}
.hyper-button span{display:block;font-size:16px}
.hyper-button b{display:block;color:#c4bdd1;font-size:12px}
.hyper-button.ready{
  border-color:#fff58c;
  background:linear-gradient(#fb3fd8,#7b35e9);
  color:#fff;
  box-shadow:0 5px 0 #3c1268,0 0 22px #ff4de9;
  animation:hyperPulse .65s steps(2,end) infinite;
}
.hyper-button.ready b{color:#fff9a0}
.hyper-button:active{transform:translate(-50%,3px)}

.charge-ring{
  --charge-x:50%;
  --charge-y:55%;
  position:absolute;
  z-index:10;
  left:var(--charge-x);
  top:var(--charge-y);
  width:70px;
  height:70px;
  transform:translate(-50%,-50%);
  display:none;
  border:5px solid #ffffff4f;
  border-radius:50%;
  box-shadow:0 0 18px #ffda53;
  pointer-events:none;
}
.charge-ring.show{display:block}
.charge-ring i{
  position:absolute;
  inset:7px;
  border:6px solid #ffda53;
  border-top-color:transparent;
  border-radius:50%;
  animation:charge .45s linear infinite;
}

.fight-sound{
  position:absolute;
  z-index:9;
  right:3%;
  top:13.1%;
  width:34px;
  height:34px;
  font-size:17px;
  pointer-events:auto;
}

.fight-screen.victory .gesture-zone,
.fight-screen.victory .gesture-hint,
.fight-screen.victory .charge-ring,
.fight-screen.victory .dodge-button,
.fight-screen.victory .shield-button,
.fight-screen.victory .hyper-button,
.fight-screen.victory .fight-sound{
  opacity:0;
  pointer-events:none;
}

.fight-screen.victory .fight-hud,
.fight-screen.victory .resource-hud{
  opacity:.25;
  transition:opacity .24s ease;
}

#game.bullet-time #stage{filter:saturate(1.6) contrast(1.15) hue-rotate(14deg)}
#game.shake{animation:shake .18s steps(2,end)}

.overlay{
  z-index:10;
  display:grid;
  place-items:center;
  padding:7%;
  background:#020611df;
  backdrop-filter:blur(5px);
}

.result-panel{
  width:100%;
  padding:26px 18px;
  border:4px solid #ffd857;
  border-radius:7px;
  background:linear-gradient(150deg,#123c82,#06142f 64%,#250d22);
  box-shadow:8px 8px 0 #01030a;
  text-align:center;
}

.result-panel h1{
  margin:5px 0 10px;
  color:#ffe455;
  font-size:clamp(46px,13vw,72px);
  line-height:1;
  text-shadow:4px 4px #af241c;
}
.result-panel>p:not(.kicker){min-height:48px;margin:10px 0 18px;color:#dcf3ff;line-height:1.4}

.result-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:16px 0 25px;
}
.result-stats div{
  padding:10px 3px;
  border:2px solid #347fc5;
  background:#020a1d;
}
.result-stats strong{display:block;color:#fff0a4;font-size:clamp(23px,7vw,34px)}
.result-stats span{display:block;margin-top:4px;color:#abd7f7;font-size:clamp(8px,2.3vw,11px);font-weight:1000}
.result-panel .arcade{width:100%}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

@keyframes danger{50%{filter:brightness(1.45)}}
@keyframes hyperPulse{50%{filter:brightness(1.65)}}
@keyframes charge{to{transform:rotate(360deg)}}
@keyframes shake{
  25%{transform:translate(4px,-3px)}
  50%{transform:translate(-4px,2px)}
  75%{transform:translate(3px,3px)}
}

@media (max-height:650px){
  .fighter-grid{height:67%}
  .unlock-note{height:5%;margin-top:0}
  .gesture-hint{bottom:12.5%}
}

@media (prefers-reduced-motion:reduce){
  .telegraph.danger,.hyper-button.ready,.charge-ring i,#game.shake{animation:none}
  .arcade:active{transform:none}
}

/* Extra opponents retain readable full-size cards; swipe within the roster. */
.fighter-grid{grid-template-rows:repeat(4,minmax(138px,23dvh));gap:10px;overflow-y:auto;overflow-x:hidden;padding:12px 4px 6px 0;touch-action:pan-y;overscroll-behavior:contain;scrollbar-color:#65dfff #06142a;scrollbar-width:thin}
.fighter-card .fighter-name{font-size:14px;min-height:24%;line-height:1.1}
.fighter-card canvas{inset:0 1% 24%;height:76%;object-fit:contain}
#session-controls{position:absolute;z-index:35;bottom:2.1%;right:3%;display:flex;flex-direction:column;gap:4px}
#session-controls button{background:#061936ed;border:2px solid #7de5ff;border-radius:5px;padding:7px 4px;min-height:34px;width:60px;color:#fff;font-weight:bold;font-size:12px}
#session-pause{min-width:40px}
#game[data-mode="intro"] #session-controls,#game[data-mode="peace"] #session-controls,#game[data-mode="peace-ready"] #session-controls{top:3%;bottom:auto;left:3%;right:auto;flex-direction:row}
#game[data-mode="paused"] #session-controls{display:none}
#pause-overlay{z-index:45;display:grid;place-items:center;background:#020917b8}
.peace-heading{position:absolute;top:12%;width:100%;text-align:center;text-shadow:2px 3px #09203b}
.peace-heading h1{font-size:36px;margin:4px;color:#fff0ba}
.peace-heading p{font-size:14px;color:#ffe8a3}
#peace-strike{position:absolute;bottom:16%;left:12%;width:76%;font-size:20px}
#peace-caption{position:absolute;bottom:3%;left:5%;width:90%;padding:12px;margin:0;border:2px solid #e9c968;background:#071632ed;color:#fff4d4;font-size:clamp(14px,3.6vw,18px);line-height:1.45;text-align:center}
.result-panel{max-height:92%;overflow-y:auto}
#final-next{margin-bottom:16px}