/* boxfighter site chrome — the game's own menu idiom, on the web.
   palette from the in-game text prisms: black field, bone-white text,
   cursor gold #FFCC33 (the confirm/highlight ink; #66FF99 for the good
   signal, per the keylink lane). type: atlas.ttf (46 glyphs traced
   pixel-boundary-exact from the game's PNG atlas — the house voice) for
   caps + digits, boxy.ttf (Black Ops One, the coverage font, OFL) below. */
@font-face{font-family:'atlas';src:url('/static/atlas.ttf') format('truetype');font-display:swap}
@font-face{font-family:'boxy';src:url('/static/boxy.ttf') format('truetype');font-display:swap}
:root{--bg:#050505;--fg:#efeae2;--red:#ff3100;--dim:#8f8a80;--good:#66ff99}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:'boxy',ui-monospace,monospace;font-size:19px;line-height:1.6;
  letter-spacing:.01em}
#page{max-width:56rem;margin:0 auto;padding:.5rem 1.2rem 4rem}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
header{text-align:center;padding-bottom:.3rem;margin-bottom:.6rem}
.brand{font-family:'atlas','boxy',sans-serif;font-size:2.6rem;letter-spacing:.14em;
  color:var(--fg);text-transform:uppercase;user-select:none}
.brand .bx{color:var(--red)}
nav a{margin-left:1.1rem}
nav a:first-child{margin-left:0}
h1{font-family:'atlas','boxy',sans-serif;font-size:1.5rem;font-weight:400;
  letter-spacing:.12em;margin:1.2rem 0 .6rem;color:var(--fg);text-transform:uppercase;
  text-align:center}
h2{font-family:'atlas','boxy',sans-serif;font-size:1.6rem;font-weight:400;
  letter-spacing:.1em;color:var(--red);margin:2.2rem 0 .8rem;text-transform:uppercase;
  text-align:center}
h3{margin:.25rem 0 .4rem;color:var(--fg)}
p{margin:.55rem 0}
.lede{font-size:1.1rem;max-width:46rem;color:var(--dim)}
.sub{color:var(--dim);font-size:.92rem}
code{color:var(--red)}
ul{padding-left:1.2rem}
li{margin:.35rem 0}
footer{margin-top:3.5rem;padding-top:.8rem;border-top:2px solid var(--red);
  color:var(--dim);font-size:.9rem}

/* the menu screen: entries like the in-game nav cursor —
   gold angle-bracket (one of atlas.ttf's glyphs) appears at the row under the mouse */
.menu-list{list-style:none;padding:0;margin:1.4rem 0;position:relative;text-align:center}
.menu-list li{margin:.5rem 0}
.menu-list li.sel a{color:var(--red)}
.menu-list a{display:inline-block;border-bottom:none;color:var(--fg);padding:.3rem .6rem;
  font-family:'atlas','boxy',sans-serif;position:relative;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.1em}
.menu-list a:hover{background:none;color:var(--red)}
/* the cursor — menus.h cursorSpin, verbatim geometry: square ring band
   (outer circ-radius s/√2, 2px band), solid square inside with circumradius
   diminishR(inner, 4, 3) = inner·cos(π/4) — its corner circle is the band's
   incircle, so it grazes each edge midpoint exactly when a corner points at it.
   Band spins one way, the solid contra-spins (rotFlip). */
#cur{position:absolute;left:-.8em;width:16px;height:16px;pointer-events:none}
#cur span{position:absolute;will-change:transform}
#cur .s1{inset:0;border:2px solid var(--red)}
#cur .s2{width:8px;height:8px;left:50%;top:50%;background:var(--red)}
.menu-list .note{color:var(--dim);font-size:.85rem;text-transform:none;
  letter-spacing:.01em;margin-left:.6rem}

/* online census — the fightmybox list, counted live */
.online{font-family:'atlas','boxy',sans-serif;font-size:1.5rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg);margin:1rem 0 0;text-align:center}
.online b{color:var(--red)}
.online.ok b{color:var(--good)}
.online.stale::after{content:" — census faint";color:var(--dim);font-size:.9rem}

/* three-ways-in cards: the hitbox frame */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;
  margin:1.6rem 0}
.paths .path{display:block;position:relative;border:1px solid var(--red);padding:1rem 1.1rem;
  color:var(--fg);background:transparent;border-bottom:1px solid var(--red)}
.paths .path::before{content:"";position:absolute;inset:-5px;pointer-events:none;
  border:2px solid transparent;
  border-image:linear-gradient(0deg,var(--red),var(--red)) 1;
  clip-path:polygon(0 0,12px 0,12px 2px,2px 2px,2px 12px,0 12px, 0 0,
    100% 100%,calc(100% - 12px) 100%,calc(100% - 12px) calc(100% - 2px),calc(100% - 2px) calc(100% - 12px),100% calc(100% - 12px),100% 100%)}
.paths .path:hover{background:rgba(255,204,51,.08);transform:none}
.paths .path:hover h3{color:var(--red)}
.paths p{color:var(--dim);font-size:.95rem;margin:0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.grid>div{border-left:2px solid var(--red);padding-left:.9rem}
.grid p{color:var(--dim);font-size:.97rem}

table.dl{border-collapse:collapse;width:100%;margin:1rem 0}
table.dl th,table.dl td{border:1px solid var(--red);padding:.45rem .7rem;text-align:left}
table.dl th{color:var(--red);font-weight:600;text-transform:uppercase;font-size:.95rem}

/* replay seat: two rings, both climb while a room warms up (engine + receipt) */
#seatchrome{display:flex;gap:2.5rem;justify-content:flex-start;margin:.5rem 0 .8rem}
.ringwrap{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.ringwrap span{font-size:.8rem;color:var(--dim);text-transform:uppercase}
.ringbg{fill:none;stroke:#2b2b2b;stroke-width:6}
.ringfg{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .15s linear}