/* Press Start 2P, served from this folder (SIL Open Font License 1.1, see fonts/OFL.txt).
   Self-hosted so a player's address is not sent to Google, and so the game keeps its font offline. */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/press-start-2p-latin-ext.woff2?v=6074e77f45) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/press-start-2p-latin.woff2?v=87ab8daaa6) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: one full-bleed arcade cabinet screen — 16:9 canvas letterboxed in a
   dark room, with a touch control deck that only appears on coarse pointers. */
:root{
  --void:#08090b;        /* room behind the cabinet */
  --ash:#15171b;         /* panel fill */
  --iron:#272b31;        /* borders, inert chrome */
  --bone:#e9e5dc;        /* primary text */
  --smoke:#9aa0a8;       /* secondary text */
  --blood:#c8102e;       /* accent: player 1, danger, the band red */
  --ember:#ff7a1a;       /* accent: meter, highlights */
  --frost:#79b6cc;       /* accent: player 2 / CPU */
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
html{touch-action:none;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-touch-callout:none}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:"Press Start 2P","Courier New",monospace;
  overflow:hidden;overscroll-behavior:none;
  position:fixed;inset:0;width:100%;       /* pinned: iOS has nothing to scroll or zoom into */
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:none;
}
#room{
  height:100%;display:flex;align-items:center;justify-content:center;
  padding:0 max(8px, env(safe-area-inset-left,0px)) 0 max(8px, env(safe-area-inset-right,0px));
  background:
    radial-gradient(120% 90% at 50% 0%, #17191e 0%, #0a0b0d 55%, #050506 100%);
}
#cabinet{position:relative;width:100%;max-width:1400px;aspect-ratio:16/9}
canvas#screen{
  display:block;width:100%;height:100%;image-rendering:auto;
  background:#000;border-radius:6px;
  box-shadow:0 0 0 2px var(--iron),0 0 60px rgba(200,16,46,.18),0 30px 80px rgba(0,0,0,.8);
}
/* Scanline + vignette glass over the canvas */
#glass{
  position:absolute;inset:0;pointer-events:none;border-radius:6px;overflow:hidden;
  background:
    radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;opacity:.9;
}
#glass::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,rgba(255,255,255,0) 1px 3px);
  opacity:.5;
}
@media (prefers-reduced-motion:reduce){#glass::after{opacity:.25}}

/* ---- name entry overlay ---- */
#entry{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,7,.86);backdrop-filter:blur(3px);border-radius:6px;z-index:5;
}
#entry .card{
  width:min(92%,520px);border:2px solid var(--blood);background:#0c0d10;
  padding:26px 22px;display:flex;flex-direction:column;gap:16px;text-align:center;
  box-shadow:0 0 0 1px #000 inset,0 0 40px rgba(200,16,46,.35);
}
#entry h2{font-family:"Press Start 2P","Courier New",monospace;font-weight:400;
  font-size:clamp(13px,2.6vw,20px);line-height:1.6;letter-spacing:.04em;margin:0;
  color:var(--ember);text-transform:uppercase;text-wrap:balance}
#entry p{margin:0;font-size:10px;line-height:1.9;color:var(--smoke)}
#entry .rank{color:var(--bone);font-size:12px}
#nameField{
  font-family:"Press Start 2P",monospace;font-size:clamp(16px,4vw,24px);
  text-align:center;letter-spacing:.18em;text-transform:uppercase;
  background:#000;color:var(--ember);border:2px solid var(--iron);
  padding:14px 10px;width:100%;outline:none;
}
#nameField:focus{border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,122,26,.2)}
#entry .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
button.arc{
  font-family:"Press Start 2P",monospace;font-size:11px;letter-spacing:.06em;
  background:var(--blood);color:#fff;border:2px solid #7d0a1d;padding:13px 18px;
  cursor:pointer;text-transform:uppercase;min-width:130px;
}
button.arc:hover{background:#e01535}
button.arc:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
button.arc.ghost{background:transparent;color:var(--smoke);border-color:var(--iron)}
button.arc.ghost:hover{color:var(--bone);border-color:var(--smoke)}
#entryMsg{font-size:9px;color:var(--smoke);min-height:14px;line-height:1.8}

/* ---- touch deck: pixel-art controls, drawn in code (see "touch deck" in the script) ---- */
#deck{position:fixed;inset:0;z-index:4;pointer-events:none;display:none}
#deck.on{display:block;opacity:.88}
/* in a fight the controls sit over the picture: see-through, so the fighters show under them */
#deck.on[data-s="fight"]{opacity:.66}
/* a cornered fighter stands under the move pad: keep the pad faint enough to fight through */
#deck.on[data-s="fight"] #padMove{opacity:.78}
/* paused: the menu is tapped, so the pads go and the deck is solid again */
#deck.on[data-s="fight"][data-p="1"]{opacity:.88}
#deck[data-p="1"] #padMove,#deck[data-p="1"] #padAtk{display:none}
#deck canvas,#deck button{image-rendering:crisp-edges;image-rendering:pixelated}
.pad{position:absolute;pointer-events:auto;touch-action:none}
#padMove{left:2.4%;bottom:5%;width:var(--pad,min(44vh,230px));height:var(--pad,min(44vh,230px));background:none;border-radius:0}
#padAtk{right:2.4%;bottom:5%;display:grid;gap:var(--tbgap,min(2.2vh,12px));
  grid-template-columns:repeat(3,var(--tb,min(19vh,98px)));grid-template-rows:repeat(2,var(--tb,min(19vh,98px)));
  margin-bottom:0}
#padAtk .tb:nth-child(4){grid-column:1}
#padAtk .tb:nth-child(5){grid-column:2}
#padAtk .tb:nth-child(6){grid-column:3;grid-row:2}
/* a gentle stagger so the thumb rests on an arc */
#padAtk .tb:nth-child(1){transform:translateY(var(--st,8%))}
#padAtk .tb:nth-child(2){transform:translateY(0)}
#padAtk .tb:nth-child(3){transform:translateY(calc(-1 * var(--st,8%)))}
.tb{
  -webkit-appearance:none;appearance:none;border:0;border-radius:0;padding:0;margin:0;
  background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  background-image:var(--img);touch-action:none;-webkit-touch-callout:none;
}
.tb.hold{background-image:var(--imgd)}
/* held: the art itself sinks a pixel and lights up; no scaling, which would blur it */
#btnMenu{
  position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);pointer-events:auto;
  width:var(--pillw,min(22vh,112px));height:var(--pillh,min(10vh,52px));border:0;padding:0;background:transparent center/100% 100% no-repeat;
  background-image:var(--img);touch-action:none;-webkit-touch-callout:none;
}
#btnMenu.hold{background-image:var(--imgd)}
/* outside a fight the attack buttons would only be in the way */
#deck:not([data-s="fight"]) #padAtk{display:none}
/* screens run by taps: no pad over them (the board's tabs, the how-to pages, a solo pick) */
#deck[data-s="leaderboard"] #padMove,#deck[data-s="controls"] #padMove,
#deck[data-s="select"] #padMove,#deck[data-s="storyMenu"] #padMove,
#deck[data-s="title"] #padMove,#deck[data-s="attract"] #padMove,#deck[data-s="single"] #padMove,#deck[data-s="settings"] #padMove,#deck[data-s="multi"] #padMove,#deck[data-s="online"] #padMove,
/* the diary's last entry sits where the back button would be: a tap anywhere goes back */
#deck[data-s="storyDiary"] #btnMenu{display:none}
#deck[data-s="vs"] #padMove,#deck[data-s="versusResult"] #padMove,#deck[data-s="netLobby"] #padMove,#deck[data-s="watchLobby"] #padMove,
#deck[data-s="stageSelect"] #padMove,#deck[data-s="matchResult"] #padMove,#deck[data-s="gameover"] #padMove,#deck[data-s="victory"] #padMove{display:none}
#deckToggle{
  position:fixed;right:5px;bottom:3px;z-index:6;pointer-events:auto;
  font-family:"Press Start 2P",monospace;font-size:7px;padding:4px 7px;
  background:rgba(12,13,16,.55);color:var(--smoke);border:1px solid var(--iron);cursor:pointer;
  border-radius:3px;opacity:.5;transition:opacity .12s linear;
}
#deckToggle:hover,#deckToggle:focus-visible{color:var(--bone);opacity:1}
#entry label{font-size:9px;color:var(--smoke)}
[hidden]{display:none!important}

/* Portrait on a phone or tablet: the fight is 16:9, so ask for the device to be turned. */
#rotate{
  display:none;position:fixed;inset:0;z-index:100;
  flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:24px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, #17191e 0%, #0a0b0d 55%, #050506 100%);
}
@media (orientation:portrait) and ((pointer:coarse) or (max-width:600px)){
  #rotate{display:flex}
}
#rotate .phone-stage{position:relative;width:170px;height:170px;display:flex;align-items:center;justify-content:center}
#rotate .phone{transform-origin:50% 50%;animation:rotate-phone 3.2s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(200,16,46,.35))}
#rotate .r1{margin:0;font-size:16px;line-height:1.5;color:var(--bone);text-shadow:0 0 14px rgba(200,16,46,.7)}
#rotate .r2{margin:0;font-size:9px;line-height:1.8;color:var(--smoke)}
@keyframes rotate-phone{
  0%,18%{transform:rotate(0deg)}
  50%,72%{transform:rotate(-90deg)}
  100%{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){
  #rotate .phone{animation:none;transform:rotate(-90deg)}
  }

#deck[data-s="title"] #btnMenu,#deck[data-s="attract"] #btnMenu{display:none}

/* quick chat in an online fight: a pixel speech bubble on a gold button, and the six lines */
#btnChat{
  /* in the bottom row, just right of the pause button: clear of the HUD and the attack pad */
  position:absolute;left:calc(50% + min(11vh,56px) + 14px);bottom:3.5%;display:none;pointer-events:auto;touch-action:none;
  width:min(13vh,64px);height:min(13vh,64px);border:3px solid #07080a;border-radius:50%;padding:0;
  background:#f2c14e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%2307080a' d='M2 2h8v1h1v4h-1v1H5v1H4v1H3V8H2V7H1V3h1z'/%3E%3Cpath fill='%23f2c14e' d='M3 4h1v1H3zM5 4h1v1H5zM7 4h1v1H7z'/%3E%3C/svg%3E") center/60% no-repeat;
  image-rendering:pixelated;
}
#deck[data-s="fight"][data-online="1"] #btnChat{display:block}
/* the online room and results are run by taps: the pad would only cover your own fighter */
#deck[data-online="1"]:not([data-s="fight"]) #padMove{display:none}
/* story scenes are tapped through: no pad over the cast */
#deck[data-s="story"] #padMove,#deck[data-s="storyLose"] #padMove,#deck[data-s="storyDiary"] #padMove{display:none}
#deck[data-s="story"] #btnMenu{display:none}
/* a viewer: no fight controls, the chat button on every watching screen */
#deck[data-watch="1"] #padAtk,#deck[data-watch="1"] #padMove{display:none!important}
#deck[data-watch="1"][data-s="fight"] #btnChat,#deck[data-watch="1"][data-s="netRoom"] #btnChat,
#deck[data-watch="1"][data-s="versusResult"] #btnChat{display:block}
#quickSheet{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(3.5% + min(13vh,64px) + 10px);pointer-events:auto;z-index:5;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;
  background:rgba(8,9,12,.94);border:3px solid #f2c14e;border-radius:10px;
}
#quickSheet[hidden]{display:none!important}
#quickSheet button{
  font-family:"Press Start 2P",monospace;font-size:clamp(9px,2.4vh,14px);color:var(--bone);
  background:#1b1e24;border:0;border-radius:8px;padding:clamp(10px,3vh,18px) clamp(10px,2.5vw,22px);
  touch-action:none;cursor:pointer;
}
#quickSheet button:active{background:#f2c14e;color:#07080a}
/* a phone: the name card and the quick-chat sheet in bigger print (the heights stay about the
   same, so the card still fits a short screen with the keyboard up) */
@media (pointer:coarse){
  #entry .card{width:min(94%,640px);padding:18px 20px;gap:12px}
  #entry h2{font-size:clamp(14px,3.2vw,22px)}
  #entry p{font-size:12px}
  #entry .rank{font-size:14px}
  #entry label{font-size:12px}
  #nameField{font-size:clamp(20px,5vw,28px);padding:12px 10px}
  #entry button.arc{font-size:13px;padding:14px 22px;min-width:150px}
  #entryMsg{font-size:11px}
  /* a six-letter room code: as big as the card allows, spaced out so it is read letter by letter */
  #entry[data-mode="code"] h2{font-size:clamp(16px,3.6vw,24px)}
  #entry[data-mode="code"] #nameField{font-size:clamp(30px,8vw,44px);letter-spacing:.3em;padding:14px 0 14px .3em}
  #quickSheet{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}
  #quickSheet button{font-size:clamp(12px,3.4vh,16px);padding:12px 18px;white-space:nowrap}
}