/* sf2.css: the SF2 + Tecmo arcade look, phase 1.
   Every rule is scoped under html.sf2 (set by sf2.js when SF2_LEVEL > 0),
   so at level 0 this file does nothing at all. html.sf2-2 is level 2 (motion
   and splashes); html.sf2-rm is prefers-reduced-motion and freezes it all.
   Rules of the look: pixels stay square (image-rendering: pixelated), frames
   are box-shadow bevels with no radius, big lettering is code. */

html.sf2 .sf2pix,html.sf2 .sf2pvface{image-rendering:pixelated;image-rendering:crisp-edges}
html.sf2 .sf2hud{font:8px/1.5 "Press Start 2P",monospace;letter-spacing:.04em}
html.sf2 .sf2t{font-family:Bungee,Impact,sans-serif;line-height:.95;letter-spacing:.02em;
  background:linear-gradient(180deg,#fffbe0 0%,#fceec4 18%,#ffd84a 34%,#ffc828 50%,#00c805 58%,#009a0c 78%,#006b10 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 0 0 #02240a) drop-shadow(-2px 0 0 #02240a) drop-shadow(0 2px 0 #02240a)
         drop-shadow(0 -2px 0 #02240a) drop-shadow(3px 3px 0 #000)}
html.sf2 .sf2frame{background:#0d0d18;
  box-shadow:0 0 0 2px #000,0 0 0 4px #ffc828,0 0 0 6px #007a12,0 0 0 8px #000}
html.sf2 .sf2btn{font:13px/1.1 Bungee,Impact,sans-serif;border:0;border-radius:0;padding:11px 12px;
  color:#16120c;background:#ffd400;text-align:center;text-decoration:none;cursor:pointer;display:block;
  box-shadow:inset -3px -3px 0 #b88a00,inset 3px 3px 0 #fff3a0,0 0 0 2px #000}
html.sf2 .sf2btn.ghost{background:#16162a;color:#f5e6d3;
  box-shadow:inset -3px -3px 0 #000,inset 3px 3px 0 #3a3a5a,0 0 0 2px #000}
html.sf2 .sf2btn:active{transform:translate(1px,1px)}

/* ── Calls: stadium strip ─────────────────────────────────────────── */
html.sf2 .hero > h1{display:none}
html.sf2 .sf2strip{position:relative;margin:2px -16px 12px;height:116px;
  background:#0b1030 url(/sf2/office.png) -220px -150px/960px 540px no-repeat;
  image-rendering:pixelated;border-top:4px solid #000;border-bottom:4px solid #000}
html.sf2 .sf2strip:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,11,0) 30%,rgba(8,7,11,.88))}
html.sf2 .sf2strip-in{position:absolute;left:16px;right:16px;bottom:10px;z-index:1}
html.sf2 .sf2strip .sf2hud{color:#9fe870}
html.sf2 .sf2strip-t{font-size:40px;margin-top:6px}

/* ── Calls: preview panel (the selected fighter, blown up) ───────── */
html.sf2 .sf2pv{position:relative;display:flex;gap:12px;margin:6px 4px 18px;padding:10px}
html.sf2 .sf2pvface{width:96px;height:96px;flex:none;background:#1a1030}
html.sf2 .sf2pvb{flex:1;min-width:0}
html.sf2 .sf2pvn{font:17px/1.05 Bungee,Impact,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding-right:2px}
html.sf2 .sf2pvm{font:600 11px/1.3 Archivo,sans-serif;color:#9a94a6;margin:3px 0 6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
html.sf2 .sf2pvl b{font:700 26px/1 "JetBrains Mono",monospace;color:#fff}
html.sf2 .sf2pvl small{font:700 11px Archivo,sans-serif;color:#bbb;margin-left:6px}
html.sf2 .sf2pvrow{display:flex;gap:8px;margin-top:9px}
html.sf2 .sf2pvrow .sf2btn{flex:1;font-size:12px;padding:7px 4px}
html.sf2 .sf2pvrow .sf2btn small{display:block;font:700 10px "JetBrains Mono",monospace;opacity:.8;margin-top:2px}
html.sf2 .sf2pvrow .sf2less{background:#6f9cff;box-shadow:inset -3px -3px 0 #2b4c9b,inset 3px 3px 0 #cfe0ff,0 0 0 2px #000}
html.sf2 .sf2pvrow .sf2btn:not(.on){background:#16162a;color:#ffd400;box-shadow:inset -3px -3px 0 #000,inset 3px 3px 0 #3a3a5a,0 0 0 2px #000}
html.sf2 .sf2pvrow .sf2less:not(.on){color:#8fb0ff}
html.sf2 .sf2pvrow .sf2btn:disabled{opacity:.35;cursor:not-allowed}
html.sf2 .sf2pvall{position:absolute;right:12px;top:-15px;border:0;cursor:pointer;
  font:7px/1 "Press Start 2P",monospace;color:#16120c;background:#ffd400;padding:4px 5px 3px;box-shadow:0 0 0 2px #000}

/* ── Calls: the board as a 3-wide select grid ─────────────────────── */
html.sf2 #board .ghead{margin:20px 0 12px}
html.sf2 #board .ghead b{font:9px/1.3 "Press Start 2P",monospace;color:#ffd400;letter-spacing:0}
html.sf2 #board .ghead span{font:700 10px Archivo,sans-serif}
html.sf2 #board .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding:0 4px}
html.sf2 #board .card{position:relative;overflow:visible;border:0;border-radius:0;background:#0b110d;
  box-shadow:0 0 0 2px #000,0 0 0 4px #3a2a40}
html.sf2 #board .card.picked{box-shadow:0 0 0 2px #000,0 0 0 4px #2bd46b}
html.sf2 #board .face{height:auto;aspect-ratio:1/1;border-radius:0;background:#1a1030 !important}
html.sf2 #board .face > img,html.sf2 #board .face > .init{display:none}
html.sf2 #board .face .sf2pix{position:absolute;inset:0;width:100%;height:100%}
html.sf2 #board .face .more{top:auto;bottom:3px;right:3px;border-radius:0;font:6px/1 "Press Start 2P",monospace;
  padding:3px 3px 2px;background:rgba(0,0,0,.78)}
html.sf2 #board .face .flag{border-radius:0;top:3px;left:3px;font-size:7px;padding:2px 3px;background:rgba(0,0,0,.8)}
html.sf2 #board .cbody{padding:6px 5px 6px}
html.sf2 #board .cname{font:8px/1.4 "Press Start 2P",monospace;letter-spacing:0;color:#fff}
html.sf2 #board .cmeta{font-size:9px;margin:3px 0 5px}
html.sf2 #board .cline{font-size:1.05rem;color:#ffd400}
html.sf2 #board .cstat{font-size:9px;margin:2px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.sf2 #board .cbtns{gap:5px}
html.sf2 #board .cb{border:0;border-radius:0;padding:6px 0 5px;font:7px/1.2 "Press Start 2P",monospace;
  background:#16162a;transition:none;box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #3a3a5a,0 0 0 2px #000}
html.sf2 #board .cb em{font:700 9px/1 "JetBrains Mono",monospace;margin-top:3px;color:#9a94a6}
html.sf2 #board .cb.more{color:#ffd400}
html.sf2 #board .cb.less{color:#8fb0ff}
html.sf2 #board .cb.more.on{background:#ffd400;color:#16120c;box-shadow:inset -2px -2px 0 #b88a00,inset 2px 2px 0 #fff3a0,0 0 0 2px #000}
html.sf2 #board .cb.less.on{background:#6f9cff;color:#0b0a0f;box-shadow:inset -2px -2px 0 #2b4c9b,inset 2px 2px 0 #cfe0ff,0 0 0 2px #000}
html.sf2 #board .cb.on em{color:rgba(0,0,0,.65)}
html.sf2 #board .cb:active{transform:translate(1px,1px)}
/* tags: ✓ on a picked man, 1P on the cursor (1P wins when both) */
html.sf2 #board .card.picked:before{content:"\2713";position:absolute;z-index:3;top:-9px;left:-7px;
  font:8px/1 "Press Start 2P",monospace;background:#2bd46b;color:#000;padding:3px 4px;box-shadow:0 0 0 2px #000}
html.sf2 #board .card.sf2cur{box-shadow:0 0 0 2px #000,0 0 0 4px #ffc828,0 0 0 6px #000}
html.sf2 #board .card.sf2cur:before{content:"1P";position:absolute;z-index:3;top:-9px;left:-7px;
  font:8px/1 "Press Start 2P",monospace;background:#ffc828;color:#06120b;padding:3px 4px;box-shadow:0 0 0 2px #000}
html.sf2-2:not(.sf2-rm) #board .card.sf2cur{animation:sf2cur .5s steps(1) infinite}
@keyframes sf2cur{50%{box-shadow:0 0 0 2px #000,0 0 0 4px #fceec4,0 0 0 6px #000}}

/* ── Home: popular tiles share the portrait ───────────────────────── */
html.sf2 .hcard{border-radius:0;border:0;box-shadow:0 0 0 2px #000,0 0 0 4px #3a2a40;margin:2px}
html.sf2 .hcard .hf{background:#0d0d18 !important}
html.sf2 .hcard .hf > img,html.sf2 .hcard .hf > span{display:none}
html.sf2 .hcard .hf .sf2pix{position:absolute;left:50%;top:0;height:100%;width:auto;aspect-ratio:1/1;transform:translateX(-50%)}
html.sf2 .hcard .hn{font:8px/1.4 "Press Start 2P",monospace}
html.sf2 .hcard .hbt a{border-radius:0;border:0;font:8px/1.2 "Press Start 2P",monospace;background:#16162a;
  box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #3a3a5a,0 0 0 2px #000}
html.sf2 .hcard .hbt a em{font:700 10px "JetBrains Mono",monospace;margin-top:3px}

/* ── Home hero (Mock F) ────────────────────────────────────────────── */
html.sf2 #homeView > .rhfirst{display:none}
html.sf2 .sf2home{margin:0 -14px 6px}
html.sf2 .sf2hero{position:relative;height:300px;overflow:hidden;
  background:#0b1030 url(/sf2/office.png) -60px -110px/960px 540px no-repeat;
  image-rendering:pixelated;border-top:4px solid #000;border-bottom:4px solid #000}
html.sf2 .sf2hero:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 35%,rgba(7,7,12,.92) 88%)}
/* the two GMs breathe: the top-left of the stage steps down 2px and back */
html.sf2 .sf2hero-bob{position:absolute;inset:0;background:inherit;border:0;
  clip-path:inset(0 52% 55% 0);display:none}
html.sf2-2:not(.sf2-rm) .sf2hero-bob{display:block;animation:sf2bob 1.1s steps(1) infinite}
@keyframes sf2bob{0%,49%{transform:translateY(0)}50%,100%{transform:translateY(2px)}}
html.sf2 .sf2hero-copy{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
html.sf2 .sf2green{color:#9fe870}
html.sf2 .sf2green i{display:inline-block;width:6px;height:6px;background:#00c805;margin-right:6px;vertical-align:1px}
html.sf2 .sf2hero h2{font-size:30px;margin:8px 0 14px}
html.sf2 .sf2row{display:flex;gap:12px}
html.sf2 .sf2row .sf2btn{flex:1}
html.sf2 .sf2sec{display:flex;justify-content:space-between;align-items:baseline;margin:18px 16px 12px}
html.sf2 .sf2sec h3{font:18px Bungee,Impact,sans-serif;color:#fff;margin:0}
html.sf2 .sf2sec a{font:700 13px Archivo,sans-serif;color:#ffd400;text-decoration:none}
html.sf2 .sf2games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 18px 22px}
html.sf2 .sf2g{display:block;text-align:center;padding:10px 0 9px;background:#121220;text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 2px #000,0 0 0 4px #3a3a5a}
html.sf2 .sf2g:active{box-shadow:0 0 0 2px #000,0 0 0 4px #ffd400}
html.sf2 .sf2g b{display:block;font:17px/1.2 Bungee,Impact,sans-serif;color:#ffd400}
html.sf2 .sf2g i{display:block;font:6px/1.4 "Press Start 2P",monospace;font-style:normal;color:#ccc;margin-top:3px}
html.sf2 .sf2g.vs b{color:#00c805}
html.sf2 .sf2g.br b{color:#fceec4}
html.sf2 .sf2g.sd b{color:#7fb0ff}

/* ── TD stamp on a winning Call (Calls "Your calls" + Track) ───────── */
html.sf2 [data-sf2win]:not([data-sf2win=""]){position:relative}
html.sf2 .sf2td{position:absolute;top:-9px;right:12px;z-index:2;font:8px/1 "Press Start 2P",monospace;
  color:#fff;background:#00a800;padding:4px 5px 3px;letter-spacing:.06em;
  box-shadow:0 0 0 2px #000,inset -2px -2px 0 #006800,inset 2px 2px 0 #58d854}
html.sf2 .sf2td.inl{position:static;display:inline-block;margin:0 2px 0 -2px;vertical-align:1px}

/* ── Pixel MORE / LESS buttons (owner, 2026-10-07: "pixellate the more or
   less buttons"). One look everywhere a side is picked: Calls tiles and the
   player sheet (.cb), the select-screen preview (.sf2pvrow), Home's popular
   cards (.hcard .hbt a) and the slip's side tags (.lg .side). Hard 2px
   black border drawn inside, a 2px bevel, stair-stepped corners, the pixel
   font for the label AND the multiplier, a 2px press-down. */
html.sf2 #board .cb, html.sf2 #sheet .cb, html.sf2 .cb,
html.sf2 .sf2pvrow .sf2btn, html.sf2 .hcard .hbt a{
  --px:2px; --lt:#3a3a5a; --dk:#000;
  border:0 !important; border-radius:0 !important; text-transform:uppercase;
  font:8px/1.25 "Press Start 2P",monospace !important; letter-spacing:0;
  background:#16162a; image-rendering:pixelated; transition:none; padding:8px 2px 7px;
  box-shadow:inset 0 0 0 var(--px) #000, inset calc(var(--px)*-2) calc(var(--px)*-2) 0 var(--dk),
             inset calc(var(--px)*2) calc(var(--px)*2) 0 var(--lt) !important;
  clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,
    calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));
}
html.sf2 .cb em, html.sf2 .sf2pvrow .sf2btn small, html.sf2 .hcard .hbt a em{
  font:7px/1 "Press Start 2P",monospace !important; display:block; margin-top:4px; letter-spacing:0}
html.sf2 .cb.more, html.sf2 .sf2pvrow .sf2btn:not(.sf2less), html.sf2 .hcard .hbt a.m{color:#ffd400}
html.sf2 .cb.less, html.sf2 .sf2pvrow .sf2less, html.sf2 .hcard .hbt a.l{color:#8fb0ff}
html.sf2 .cb.more.on, html.sf2 .sf2pvrow .sf2btn.on:not(.sf2less){background:#ffd400;color:#16120c;--lt:#fff3a0;--dk:#b88a00}
html.sf2 .cb.less.on, html.sf2 .sf2pvrow .sf2less.on{background:#6f9cff;color:#0b0a0f;--lt:#cfe0ff;--dk:#2b4c9b}
html.sf2 .cb.on em, html.sf2 .sf2pvrow .sf2btn.on small{color:rgba(0,0,0,.7)}
html.sf2 .cb:active:not(:disabled), html.sf2 .sf2pvrow .sf2btn:active, html.sf2 .hcard .hbt a:active{transform:translate(2px,2px)}
html.sf2 .cb:disabled{opacity:.35}
/* slip side tags: tiny pixel chips */
html.sf2 .lg .side{border-radius:0;font:7px/1 "Press Start 2P",monospace;padding:4px 5px 3px;box-shadow:inset 0 0 0 2px #000}

/* ── THE COMMISSIONER (COMMISH in sf2.js; html.sf2-cm) ─────────────────
   An SF2 dialogue box: black, a 2px white pixel border, his portrait on
   the left in a green frame, the line typing out in the pixel font and a
   blinking ▼ when it's done. The box is a real button (tap: finish, tap
   again: next line / put away). Its size is reserved up front: every
   page of the line sits invisibly in one grid cell under the typed text,
   so the box is as big as its longest line before a letter appears.
   In the page flow everywhere except the Home hero corner; never over a
   sheet, and never on a money screen. */
html.sf2-cm .sf2cm{display:block;text-align:left}
html.sf2-cm .sf2cm[hidden]{display:none}
html.sf2-cm .sf2cm-box{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:flex-start;gap:10px;
  width:100%;padding:8px 12px 16px 8px;background:#000;border:2px solid #fff;box-shadow:0 0 0 2px #000;
  cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left;color:#fff;-webkit-appearance:none;appearance:none;background-color:#000 !important;color-scheme:dark}
html.sf2-cm .sf2cm-box:focus-visible{outline:2px solid #ffd400;outline-offset:3px}
html.sf2-cm .sf2cm-face{flex:none;display:block;background:#000;border:2px solid #00c805;
  image-rendering:pixelated;image-rendering:crisp-edges}
html.sf2-cm .sf2cm-txt{display:block;flex:1;min-width:0}
html.sf2-cm .sf2cm-who{display:block;font:7px/1.3 "Press Start 2P",monospace;color:#00c805;letter-spacing:.04em;margin:3px 0 8px}
html.sf2-cm .sf2cm-say{display:grid;font:9px/1.75 "Press Start 2P",monospace;color:#fff !important;-webkit-text-fill-color:#fff;letter-spacing:0;text-transform:none}
html.sf2-cm .sf2cm-say > span{grid-area:1/1;overflow-wrap:break-word;min-width:0}
html.sf2-cm .sf2cm-g{visibility:hidden}
html.sf2-cm .sf2cm-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.sf2-cm .sf2cm-more{position:absolute;right:6px;bottom:4px;font:10px/1 "Press Start 2P",monospace;color:#fff;opacity:0}
html.sf2-cm .sf2cm-end .sf2cm-more{opacity:1;animation:sf2cmblink .8s steps(1) infinite}
html.sf2-cm.sf2-rm .sf2cm-end .sf2cm-more{animation:none}
@keyframes sf2cmblink{50%{opacity:0}}

/* Home hero: across the top of the stage, above the copy and the buttons */
html.sf2-cm .sf2cm-hero{position:absolute;top:12px;left:12px;right:12px;z-index:2}

/* empty boards and lists: him, then whatever the page still had to say */
html.sf2-cm .sf2cm-host .sf2cm-empty{max-width:340px;margin:0 auto}
html.sf2-cm .sf2cm-fine{display:block;margin-top:16px;font-size:.8rem;line-height:1.5}

/* results: a small box under the newest settled Call */
html.sf2-cm .sf2cm-res{margin:14px 2px 2px}
html.sf2-cm .sf2cm-res .sf2cm-box{align-items:center;padding:6px 12px 6px 6px}
html.sf2-cm .sf2cm-res .sf2cm-who{display:none}
html.sf2-cm .sf2cm-res .sf2cm-say{font-size:8px;line-height:1.6}
html.sf2-cm .sf2cm-res .sf2cm-more{bottom:auto;top:50%;margin-top:-4px;right:5px;font-size:6px}

/* level 2: under the TOUCH DOWN! splash's last line (the splash owns taps) */
html.sf2-cm .sf2cm-td{position:absolute;left:50%;width:min(340px,calc(100% - 32px));transform:translateX(-50%);
  pointer-events:none;opacity:0;animation:sf2cmin .01s steps(1) 1.9s forwards}
html.sf2-cm.sf2-rm .sf2cm-td{animation:none;opacity:1}
html.sf2-cm .sf2cm-td .sf2cm-box{align-items:center;padding:6px 12px 6px 6px}
html.sf2-cm .sf2cm-td .sf2cm-who{display:none}
html.sf2-cm .sf2cm-td .sf2cm-more{display:none}
@keyframes sf2cmin{to{opacity:1}}

/* /how: the chest-up crop and his one-line intro */
html.sf2-cm .sf2cm-how{margin:18px 2px 22px}
html.sf2-cm .sf2cm-how .sf2cm-box{align-items:center;padding:8px 12px 8px 8px}

/* Money screens: while any sheet is up (wallet, deposit, withdraw, entry,
   sign-in, the player sheet) he steps out of the room entirely, so he is
   never seen even through the dimmed backdrop. */
html.sf2-cm body:has(.sheet:not([hidden]),.dsheet:not([hidden]),.psheet:not([hidden])) .sf2cm{visibility:hidden}

/* 🔊 header sound switch */
html.sf2 .sf2snd{all:unset;position:absolute;top:6px;right:8px;z-index:3;cursor:pointer;font-size:14px;line-height:1;padding:4px;-webkit-tap-highlight-color:transparent}
html.sf2-cm .sf2cm-hero{position:absolute}