/* The shell, and each page's column layout. Everything a page draws inside those
   columns -- panels, tank cards, stat sheets, rule lists -- lives in parts.css. */

/* --- shell ------------------------------------------------------------------ */
body{display:flex;flex-direction:column;min-height:100vh}
.bar{display:flex;align-items:center;gap:16px;padding:10px 16px;
  border-bottom:3px solid var(--line);background:var(--panel)}
.mark{font-family:Bungee,Impact,sans-serif;font-size:1.05rem;text-decoration:none;
  color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.mark span{color:var(--acc)}
.bar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.bar nav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:.9rem;
  padding:5px 10px;border-radius:999px}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current=page]{background:var(--acc);color:#231F3A}
.who{color:var(--muted);text-decoration:none;font-weight:700;font-size:.85rem;white-space:nowrap}
main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:16px 14px 40px}
main.narrow{max-width:760px}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-top:3px solid var(--line);color:var(--muted);font-size:.85rem}
.foot a{color:inherit}
@media (max-width:560px){
  .bar{gap:10px;padding:8px 12px}
  .bar nav a{padding:5px 7px;font-size:.82rem}
  .who{display:none}
}

/* --- shared bits ------------------------------------------------------------ */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.status{color:var(--muted);font-size:.9rem;margin:6px 0 0}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:3px}
label b{color:var(--ink)}
.hint{color:var(--muted);font-size:.78rem;margin:8px 0 0}
.lede{color:var(--muted);margin:0 0 16px}
.cta{display:inline-block;background:var(--acc);color:#231F3A;font-weight:700;
  text-decoration:none;padding:11px 20px;border-radius:999px;border:3px solid var(--line);
  box-shadow:4px 4px 0 var(--line)}
.cta:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--line)}
/* Content links. The nav, footer and .cta all set their own colour and out-specify this. */
main a{color:var(--acc)}
h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px}
h3:first-child{margin-top:0}

/* --- / splash --------------------------------------------------------------- */
/* The whole pitch has to fit one screen: the two briefs, a fight, and the button under
   it. Left at full width the arena's own 1000x720 would eat the viewport on its own. */
main.splash{max-width:1000px}
/* Eight tanks need more board than two did, but the button still has to be on screen:
   72vh of width is about 52vh of board, which leaves room for the hero and the call. */
main.splash .arena{max-width:min(100%, 72vh);margin:0 auto}
/* Three beats, three columns, because it is three separate things you do and one wrapped
   paragraph made it read as one. Stacks on a phone, where a column of three is fine and
   three columns of one word are not. */
.how{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  max-width:860px;margin:0 auto 14px;padding:0;text-align:left}
.how li{padding:2px 18px;border-left:2px solid var(--line)}
.how li:first-child{border-left:0}
.how b{display:block;color:var(--acc);font-size:.95rem;margin-bottom:2px}
.how span{display:block;color:var(--muted);font-size:.79rem;line-height:1.35}
@media (max-width:660px){
  .how{grid-template-columns:1fr;gap:9px;max-width:420px}
  .how li{border-left:0;padding:0}
}

/* Legend and scoreboard in one line of chips. They go dark as tanks die, which is the
   claim of the whole genre happening in front of you: eight AIs, visibly different runs. */
.legend{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:8px 0 0}
.lchip{display:inline-flex;align-items:center;gap:5px;background:var(--panel);
  border:2px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.72rem}
.lchip i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.lchip .muted{font-weight:400}
.lchip.out{opacity:.34;text-decoration:line-through}
/* The card behind a chip. Fixed rather than absolute so it needs no positioned ancestor,
   and pointer-events off so moving the mouse toward it does not make it flicker away --
   there is nothing in it to click. */
.pop{position:fixed;z-index:40;width:min(340px, calc(100vw - 16px));pointer-events:none;
  background:var(--panel);border:3px solid var(--line);border-radius:12px;
  padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);text-align:left}
.pop .ch{margin-bottom:2px}
.pop .meta{margin:0 0 6px}
.pop h3{margin:10px 0 2px}
.pop .said{margin:0;font-size:.78rem;font-style:italic;color:var(--ink)}
.pop .said.none{font-style:normal;color:var(--acc);font-weight:700}
.popart{display:block;width:100%;aspect-ratio:300/106;margin:2px 0 6px}
.lchip{cursor:default}
.lchip:focus{outline:2px solid var(--acc);outline-offset:2px}

/* Nobody told this one anything. Stated, not narrated. */
.nobrief{background:rgba(241,238,255,.12);border-radius:99px;padding:1px 7px;
  font-size:.62rem;color:var(--muted);letter-spacing:.02em}
.hero{text-align:center;margin:0 0 14px}
.hero h1{margin:0 0 6px}
.briefs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  max-width:900px;margin:0 auto 14px;font-size:.9rem}
.briefs q{color:var(--ink);font-style:italic}
.briefs .vs{color:var(--muted);font-weight:700;font-size:.8rem}
@media (max-width:700px){.briefs{grid-template-columns:1fr;text-align:left}}

/* --- /m/:id match ----------------------------------------------------------- */
canvas.arena{width:100%;display:block;border:3px solid var(--line);border-radius:12px;background:#2A2746}
.board{display:grid;grid-template-columns:270px minmax(0,1fr) 270px;gap:14px;align-items:start}
@media (max-width:1050px){
  .board{grid-template-columns:1fr 1fr}
  .stage{grid-column:1/-1;order:-1}
}
@media (max-width:620px){.board{grid-template-columns:1fr}}
.feed-panel{margin-top:14px}
ol.feed{list-style:none;margin:0;padding:0;max-height:30vh;overflow:auto;font-size:.86rem}
ol.feed li{padding:3px 0;border-bottom:1px solid rgba(241,238,255,.07)}
ol.feed li.hit{color:#FFD166}
ol.feed li.kill{color:#FF7A8C;font-weight:700}
.hpbar{height:7px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:5px}
.hpbar i{display:block;height:100%;width:100%;transition:width .12s linear}
.live{margin:0 0 9px;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.live span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live .l2{color:var(--acc);opacity:.85}
.controls .row{justify-content:center;margin:10px 0 12px}

/* --- /garage ---------------------------------------------------------------- */
/* Two columns at the full 1400 gives a textarea the width of a billboard. */
main.garage{max-width:1100px}
main.garage h2{margin:0 0 10px;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}

/* Three screens, one strip of tabs. */
.subnav{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.subnav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:.85rem;
  padding:6px 14px;border-radius:999px;border:2px solid var(--line);background:var(--panel)}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current=page]{background:var(--acc);color:#231F3A}
.shelfpanel{margin-top:14px}
.art.tall{aspect-ratio:360/150}
.crewart{aspect-ratio:360/150}
.cta.small{padding:7px 14px;font-size:.85rem;box-shadow:3px 3px 0 var(--line);margin-top:8px}
/* What the player actually typed, kept beside what came back. */
.said{color:var(--muted);font-size:.8rem;font-style:italic;margin:0 0 8px}
.said.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 4px;font-size:.7rem}

/* The crew: what is currently going out, tank and driver together. It is the top of the
   page because the pairing is the thing you are choosing, not either half alone. */
.crew{margin-bottom:14px;text-align:center}
.crew .art{max-width:460px;margin:0 auto}
.crew .clanker{max-width:460px;margin:0 auto}
.crewline{margin:2px 0 2px;font-size:1.05rem}
.crew .meta{margin-bottom:10px}
.crew .go{justify-content:center}
.crew details{max-width:420px;margin:10px auto 0;text-align:left}
.crew .make{flex:0 0 auto;min-width:200px;background:var(--acc);color:#231F3A}
.swatches{display:flex;gap:6px;justify-content:center;margin:0 0 12px}
.swatches .sw{width:26px;height:26px;padding:0;border-radius:8px;border:3px solid var(--line)}
.swatches .sw.on{outline:2px solid var(--ink);outline-offset:2px}

/* The shelves. A card is a thing you own: click to send it out, × to scrap it. */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.shelfcard{position:relative;background:rgba(241,238,255,.04);border:2px solid var(--line);
  border-radius:10px;padding:8px 9px;cursor:pointer;font-size:.8rem}
.shelfcard:hover{background:rgba(241,238,255,.08)}
.shelfcard.on{border-color:var(--acc);background:rgba(198,220,46,.1)}
.shelfcard:focus{outline:2px solid var(--acc);outline-offset:1px}
.shelfcard .ch{margin-bottom:2px}
.shelfcard .ch b{font-size:.86rem}
.shelfcard .meta{margin:0 0 4px;font-size:.7rem}
.shelfcard .oneline{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelfcard .tag{font-size:.62rem}
/* Five bars, one per stat, tall for high. A silhouette of the build at thumbnail size. */
.mini{display:flex;gap:3px;align-items:flex-end;height:30px}
.mini i{flex:1;border-radius:2px 2px 0 0;min-height:3px}
.bin{position:absolute;top:4px;right:4px;padding:0;width:20px;height:20px;line-height:1;
  border-radius:6px;border-width:1px;background:transparent;color:var(--muted);font-size:.8rem}
.bin:hover{background:var(--hot);color:#fff}
.make{background:var(--acc);color:#231F3A;flex:1;min-width:140px}
main.garage select,main.garage textarea{width:100%}
.bay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:820px){.bay{grid-template-columns:1fr}}
.bay label{margin:12px 0 4px}
.bay label:first-of-type{margin-top:0}
label .count{float:right;font-variant-numeric:tabular-nums;opacity:.7}
textarea{width:100%;min-height:74px;resize:vertical;line-height:1.4;font-weight:400}
textarea::placeholder{color:var(--muted);opacity:.6}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{padding:4px 12px;font-size:.78rem}
.go{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
#draft{background:var(--acc);color:#231F3A;flex:1;min-width:150px}
#model{width:100%}
#out.example,#out.waiting{border-style:dashed}
.ch b{color:var(--acc)}
.meta{color:var(--muted);font-size:.78rem;margin:0 0 10px;font-variant-numeric:tabular-nums}
.budget{display:flex;gap:2px;margin:0 0 4px}
.budget i{flex:1;height:12px;border-radius:2px;background:rgba(241,238,255,.12)}
.budget i.on{background:var(--acc)}
.budget i.over{background:var(--hot)}
.blabel{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-bottom:10px}
.building{margin:0;color:var(--muted);font-size:.85rem}
.clanker{display:block;width:100%;aspect-ratio:360/190;margin:8px 0 2px}
.art{display:block;width:100%;aspect-ratio:360/116;margin:2px 0 8px}
.stat{border-radius:4px;padding:1px 3px;margin:0 -3px}
.stat.lit{background:rgba(198,220,46,.12)}
.stat.lit .k{color:var(--ink)}
.stat:focus{outline:2px solid var(--acc);outline-offset:1px}
details{margin-top:12px}
summary{font-size:.75rem;color:var(--muted);cursor:pointer}
pre{margin:6px 0 0;padding:8px;background:var(--line);border-radius:8px;overflow:auto;
    font-size:.7rem;max-height:240px}
.err{color:var(--hot);font-weight:700}
.wait{color:var(--acc);font-variant-numeric:tabular-nums}
button.linky{background:none;border:0;padding:0;color:var(--acc);font-size:inherit;
  text-decoration:underline;cursor:pointer}
.history{margin-top:14px}
.history .chips button{background:var(--panel)}

/* --- /demo8 ------------------------------------------------------------------ */
/* The board's own 1000x720 fills a laptop screen on its own, which puts the scoreboard
   below the fold -- and the whole point of the page is reading both at once. Capped
   against viewport height: 78vh of width is 56vh of board. */
main.demo8 .arena{max-width:min(100%, 78vh);margin:0 auto}
main.demo8{max-width:1200px}
/* A crowd match: same treatment as demo8, since it is the same problem. */
main.crowd{max-width:1200px}
main.crowd .arena{max-width:min(100%, 74vh);margin:0 auto}
/* Eight cards that still read on a phone. Stable order, fixed width, wrapping rather
   than scrolling, because a strip you have to drag is a strip nobody reads. */
/* 128px so all eight fit one row at the 1200px cap: 8x128 + 7 gaps is comfortably under.
   At 150 the eighth wrapped onto a line of its own, which read as an afterthought. */
.scorestrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:7px;margin:12px 0}
.scorecard{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:7px 9px;cursor:pointer}
.scorecard:hover{background:rgba(241,238,255,.05)}
.scorecard:focus{outline:2px solid var(--acc);outline-offset:1px}
.scorecard.dead{opacity:.42}
.sc-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.sc-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:5px;color:#231F3A;font-weight:700;font-size:.7rem;flex:0 0 auto}
.sc-name{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-brief{margin:0 0 5px;color:var(--muted);font-size:.66rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sc-line{margin:4px 0 0;color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl{color:var(--muted);font-size:.78rem;font-weight:700;margin-right:2px}
.ctl input{width:82px;margin-left:4px}
.controls .row{margin:6px 0}

/* --- tables (/models, /players) --------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{text-align:right;padding:7px 8px;border-bottom:1px solid rgba(241,238,255,.08)}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
td.name{font-weight:700}
td.num{font-variant-numeric:tabular-nums}
tr.top td.name{color:var(--acc)}
td.good{color:var(--acc);font-weight:700}
td.bad{color:var(--muted);opacity:.75}
.inversion{margin-top:14px;border-color:var(--acc)}
.inversion p{margin:0;font-size:.92rem}
.recent{margin:0 0 5px;font-size:.84rem}
.recent a{font-weight:700}
main.narrow h2{margin:20px 0 2px;font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
main.narrow h2 + .hint{margin:0 0 8px}
.pill{display:inline-block;background:rgba(241,238,255,.1);border-radius:99px;
  padding:1px 8px;font-size:.7rem;margin-left:6px}
.pill.bad{background:var(--hot);color:#fff;font-weight:700}

/* --- /rules ----------------------------------------------------------------- */
.defs{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.defs code{background:var(--panel);border:2px solid var(--line);border-radius:6px;
  padding:2px 8px;font-size:.76rem}
.ranges{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--acc)}

/* --- stubs ------------------------------------------------------------------ */
.stub{text-align:center;padding:36px 18px}
.stub h1{font-size:clamp(1.3rem,4vw,2rem)}
.stub .tag{display:inline-block;background:var(--hot);color:#fff;font-weight:700;
  padding:4px 12px;border-radius:999px;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:12px}
.stub ul{text-align:left;max-width:460px;margin:14px auto 0;color:var(--muted);font-size:.9rem}