/* Game Night — live table tracker.
   Inherits the club look from the league stylesheet, then adds the record-sheet
   layout. Built iPad-first: every tap target is at least 34px, nothing needs
   hover, and the play grid is tuned for 1024x768 landscape and phone portrait. */
@import url('/league/league.css');

main { width: min(1280px, 97vw); }

/* ---- lobby ---- */

.tbl-card { cursor: pointer; transition: transform .1s, border-color .1s; }
.tbl-card:hover { transform: translateY(-3px); border-top-color: var(--rust); }
.tbl-card h3 { font-size: 20px; color: var(--bone); }
.tbl-card .meta { color: var(--dust); font-size: 14px; margin-top: 6px; }
.tbl-card .code { font-family: 'Black Ops One'; color: var(--rust); letter-spacing: .2em; }

.side-row { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; margin-bottom: 8px; }
.side-row .rm { cursor: pointer; color: #ff7b6b; text-align: center; line-height: 40px; font-size: 20px; min-height: 40px; }

.join-row { display: flex; gap: 8px; align-items: center; }
.join-row input { font-family: 'Black Ops One'; letter-spacing: .25em; text-transform: lowercase; width: 150px; font-size: 20px; text-align: center; }

/* ---- play screen header ---- */

.play-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  background: var(--panel); border: 1px solid #2b221b; border-top: 3px solid var(--rust-dk);
  padding: 12px 16px; margin-bottom: 16px;
  position: sticky; top: 0; z-index: 5;
}
.play-head h1 { font-size: clamp(20px, 3vw, 28px); margin: 0; }
.round-ctl { display: inline-flex; align-items: center; gap: 8px; }
.round-ctl .rbtn {
  width: 44px; height: 44px; font-size: 24px; line-height: 1; cursor: pointer;
  background: var(--panel2); color: var(--bone); border: 2px solid #4a3d31;
  box-shadow: 3px 3px 0 #000; font-family: 'Black Ops One';
}
.round-ctl .rbtn:active { background: var(--rust-dk); }
.round-ctl b { font-family: 'Black Ops One'; font-size: 26px; min-width: 44px; text-align: center; }
.round-ctl .lbl { color: var(--dust); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }

.join-code { margin-left: auto; text-align: right; }
.join-code .lbl { color: var(--dust); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }
.join-code b {
  display: block; font-family: 'Black Ops One'; font-size: clamp(24px, 4vw, 34px);
  color: var(--rust); letter-spacing: .3em; text-shadow: 3px 3px 0 #000; line-height: 1.1;
}

/* ---- sides & unit cards ---- */

.side-title { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 10px; }
.side-title h2 { margin: 0; }
.side-title .muted { font-size: 14px; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
@media (max-width: 700px) { .unit-grid { grid-template-columns: 1fr; } }

.unit-card {
  background: var(--panel); border: 1px solid #2b221b; border-top: 3px solid var(--rust-dk);
  padding: 12px 14px; position: relative;
}
.unit-card.destroyed { opacity: .45; }
.unit-card.destroyed .u-name { text-decoration: line-through; }
.wreck-badge {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font-family: 'Black Ops One'; font-size: 13px; color: #ff7b6b;
  background: #3a1210; border: 2px solid var(--blood); padding: 2px 10px;
  transform: rotate(-6deg); box-shadow: 3px 3px 0 #000; letter-spacing: .1em;
}

.u-top { display: flex; align-items: baseline; gap: 10px; }
.u-name { font-family: 'Black Ops One'; font-size: 16px; color: var(--bone); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-pv { font-family: 'Black Ops One'; font-size: 14px; color: var(--rust); white-space: nowrap; }
.u-line { color: var(--dust); font-size: 14px; margin: 3px 0 8px; }
.u-line b { color: var(--bone); font-weight: 600; }

/* record-sheet bubble rows: circular pips (they ARE the bubbles), everything
   else stays square per the house style. Minimum 34px touch targets. */
.pip-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.pip-row .plabel {
  width: 58px; flex: none; font-family: 'Black Ops One'; font-size: 10.5px;
  color: var(--dust); letter-spacing: .08em; text-transform: uppercase;
}
.pip {
  width: 34px; height: 34px; flex: none; cursor: pointer; padding: 0;
  border-radius: 50%; background: var(--ink); position: relative;
}
.pip.armor { border: 2px solid var(--rust-dk); }
.pip.armor.hit { background: var(--rust); border-color: var(--rust); box-shadow: inset 0 0 0 3px #0c0a08; }
.pip.struct { border: 2px solid var(--blood); }
.pip.struct.hit { background: var(--blood); border-color: #ff7b6b; box-shadow: inset 0 0 0 3px #0c0a08; }
.pip.mini { width: 26px; height: 26px; }
@media (max-width: 1100px) { .pip.mini { width: 34px; height: 34px; } }

/* heat track + crit boxes: square, per house style */
.sq {
  width: 34px; height: 34px; flex: none; cursor: pointer; padding: 0;
  background: var(--ink); border: 2px solid #4a3d31;
  font-family: 'Black Ops One'; font-size: 12px; color: var(--dust);
}
.sq.heat { border-color: #7a5c2e; }
.sq.heat.hit { background: #b8860b; color: #0c0a08; border-color: #ffd23f; }
.sq.crit { border-color: #4a3d31; }
.sq.crit.hit { background: var(--blood); border-color: #ff7b6b; color: #fff; }
.sq.crit.hit::after { content: '✕'; font-size: 16px; }

.crit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin-top: 8px; }
@media (max-width: 480px) { .crit-grid { grid-template-columns: 1fr; } }

.u-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.u-foot input.notes {
  flex: 1; min-width: 0; font-size: 14px; padding: 6px 8px; min-height: 34px;
}
.ubtn {
  min-width: 44px; height: 38px; cursor: pointer; flex: none;
  background: var(--panel2); color: var(--bone); border: 2px solid #4a3d31;
  font-family: 'Black Ops One'; font-size: 11px; letter-spacing: .05em; padding: 0 8px;
  box-shadow: 2px 2px 0 #000;
}
.ubtn:active { background: var(--rust-dk); }
.ubtn:disabled { opacity: .35; cursor: default; }
.ubtn.danger { color: #ff7b6b; border-color: var(--blood); }

/* ---- log + finish ---- */

.play-log { max-height: 180px; overflow-y: auto; font-size: 14px; }
.play-log .t { color: var(--dust); margin-right: 8px; font-variant-numeric: tabular-nums; }

.finish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vp-input { font-family: 'Black Ops One'; font-size: 24px; text-align: center; width: 100%; min-height: 48px; }
.done-num { font-family: 'Black Ops One'; font-size: 30px; color: var(--rust); text-shadow: 3px 3px 0 #000; }

/* bigger buttons everywhere on touch layouts */
.btn { min-height: 38px; }
.btn.big { font-size: 17px; padding: 12px 26px; }

/* ---- lobby: action first ---- */

.lobby-top { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .lobby-top { grid-template-columns: 1fr; } }
.side-row-40k { grid-template-columns: 1fr 44px; }
.side-row-40k .s-army,
.side-row-40k .s-text,
.side-row-40k .s-bbteam {
  grid-column: 1 / -1; width: 100%; font-size: 14px; padding: 8px;
  background: var(--ink); color: var(--bone); border: 1px solid #4a3d31; resize: vertical;
}

/* ---- wh40k resolve screen ---- */

.rs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #2b221b; }
.rs-line { font-family: 'Black Ops One'; font-size: 14px; color: var(--bone); flex: 1; min-width: 160px; }
.rs-pick { min-width: 220px; min-height: 38px; }
.rs-models { color: var(--dust); font-size: 14px; }
.rs-models input { width: 70px; min-height: 38px; text-align: center; }
.rs-unmatched { margin-top: 12px; font-size: 14px; color: var(--dust); }
.rs-unmatched b { color: #ff7b6b; }

/* ---- shared record-sheet sections ---- */

.sheet-sec { margin-top: 10px; border-top: 1px dashed #2b221b; padding-top: 8px; }
.sec-title {
  font-family: 'Black Ops One'; font-size: 11.5px; color: var(--dust);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px;
}
.sec-title b { color: var(--rust); font-size: 14px; }
.sec-title .warn { color: #ff7b6b; }
.sec-title .key { font-family: 'Barlow Condensed'; text-transform: none; letter-spacing: 0; margin-left: 8px; }
details.sheet-sec > summary.sec-title { cursor: pointer; list-style: none; min-height: 34px; display: flex; align-items: center; gap: 8px; }
details.sheet-sec > summary.sec-title::before { content: '▸'; color: var(--rust); }
details[open].sheet-sec > summary.sec-title::before { content: '▾'; }

/* small pip variant: classic sheets have up to 47 bubbles per location */
.pip.tiny { width: 24px; height: 24px; }
.pip.tiny.demo { display: inline-block; vertical-align: middle; pointer-events: none; width: 14px; height: 14px; }
.pip.wound { border: 2px solid var(--blood); }
.pip.wound.hit { background: var(--blood); border-color: #ff7b6b; box-shadow: inset 0 0 0 3px #0c0a08; }

/* ---- classic: armor/structure silhouette ---- */

.classic-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 900px) { .classic-grid { grid-template-columns: 1fr; } }

.mech-grid {
  display: grid; gap: 6px;
  grid-template-columns: 1fr 1.1fr 1.2fr 1.1fr 1fr;
  grid-template-areas:
    ".  .   hd  .   ."
    "la lt  ct  rt  ra"
    ".  rtl rtc rtr ."
    ".  ll  .   rl  .";
}
@media (max-width: 620px) {
  .mech-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "hd hd" "ct ct" "lt rt" "la ra" "rtl rtr" "rtc rtc" "ll rl";
  }
}
.loc-box { background: var(--ink); border: 1px solid #2b221b; padding: 5px 6px; min-width: 0; }
.loc-name {
  font-family: 'Black Ops One'; font-size: 10.5px; color: var(--dust);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px;
}
.loc-name .loc-max { color: var(--rust); }
.loc-pips { display: flex; flex-wrap: wrap; gap: 3px; }
.loc-pips.struct-pips { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #2b221b; }

/* crew skill selects (setup only) */
.crew-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px; flex-wrap: wrap; }
.crew-lbl { color: var(--dust); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.crew-sel { min-height: 38px; min-width: 56px; font-size: 16px; margin-left: 4px; }

/* heat track 0-30 with TW breakpoints */
.heat-track { display: flex; flex-wrap: wrap; gap: 3px; }
.heat-track .sq.heatc { width: 30px; height: 34px; font-size: 11px; border-color: #7a5c2e; color: var(--dust); }
.heat-track .sq.heatc.brk { border-color: #ffd23f; }
.heat-track .sq.heatc.hit { background: #b8860b; color: #0c0a08; }
.heat-track .sq.heatc.brk.hit { background: var(--rust); border-color: #ff8b4a; }
.heat-now { color: #ffd23f; font-family: 'Barlow Condensed'; text-transform: none; letter-spacing: 0; font-size: 14px; }
.heat-legend { margin-top: 6px; font-size: 12.5px; color: var(--dust); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.heat-fx { white-space: nowrap; }
.heat-fx.on { color: #ffd23f; }

/* crit slots */
.crit-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
@media (max-width: 620px) { .crit-panel { grid-template-columns: 1fr; } }
.crit-loc { min-width: 0; }
.crit-loc-name { font-family: 'Black Ops One'; font-size: 10.5px; color: var(--rust); letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 2px; }
.crit-slot {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 34px;
  background: var(--ink); border: 1px solid #2b221b; color: var(--bone);
  font-family: 'Barlow Condensed'; font-size: 14.5px; text-align: left;
  padding: 2px 8px; cursor: pointer; margin-bottom: 2px;
}
.crit-slot .cs-n { color: var(--dust); font-size: 12px; width: 14px; flex: none; }
.crit-slot.hit { color: #ff7b6b; text-decoration: line-through; border-color: var(--blood); background: #2a1210; }

/* pilot track */
.pilot-track { display: flex; gap: 10px; }
.pilot-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.sq.pilot { border-color: var(--blood); }
.sq.pilot.hit { background: var(--blood); border-color: #ff7b6b; }
.sq.pilot.hit::after { content: '✕'; font-size: 16px; color: #fff; }
.pilot-roll { font-size: 11px; color: var(--dust); font-family: 'Black Ops One'; }

/* weapons / statline tables */
.wpn-wrap { overflow-x: auto; }
.wpn-table { font-size: 14px; }
.wpn-table th { font-size: 11px; padding: 4px 8px; }
.wpn-table td { padding: 4px 8px; }
.wpn-table tr.wout td { color: var(--dust); text-decoration: line-through; }
.wpn-table tr.wout td:last-child { text-decoration: none; }
.wout-btn { min-width: 44px; height: 34px; }
.wpn-kw { font-size: 12px; color: var(--dust); text-decoration: none; }

/* ---- wh40k card ---- */

.w40k-card .stat-table td, .w40k-card .stat-table th { padding: 4px 10px; }
.wound-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wound-group { display: inline-flex; gap: 3px; padding: 4px; background: var(--ink); border: 1px solid #2b221b; }
.wound-group.dead { opacity: .45; border-color: var(--blood); }
.ability { margin-bottom: 4px; }
.ability > summary {
  cursor: pointer; min-height: 34px; display: flex; align-items: center;
  font-family: 'Black Ops One'; font-size: 13px; color: var(--bone); letter-spacing: .04em;
}
.ability > summary::before { content: '▸ '; color: var(--rust); margin-right: 6px; }
.ability[open] > summary::before { content: '▾ '; }
.ability-body { font-size: 14px; color: var(--dust); padding: 4px 0 8px 18px; }
.ability-body b { color: var(--bone); }
.ability-body .ShowFluff, .ability-body .abLegend { font-style: italic; }
.ability-body .h_number, .ability-body .tt { display: none; }
.kw-line { font-size: 13px; color: var(--dust); margin-top: 8px; }
.kw-line b { color: var(--rust); font-family: 'Black Ops One'; font-size: 11px; }

/* side-level trackers (wh40k CP/VP) */
.side-track { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.side-track .lbl { color: var(--dust); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }
.side-track b { font-family: 'Black Ops One'; font-size: 20px; min-width: 30px; text-align: center; color: var(--rust); }
.rbtn.sm { width: 38px; height: 38px; font-size: 18px; }
.round-ctl .rbtn.sm { width: 38px; height: 38px; }
.side-track .rbtn {
  width: 38px; height: 38px; font-size: 18px; line-height: 1; cursor: pointer;
  background: var(--panel2); color: var(--bone); border: 2px solid #4a3d31;
  box-shadow: 3px 3px 0 #000; font-family: 'Black Ops One';
}
.side-track .rbtn:active { background: var(--rust-dk); }

/* The whole tracker strip in a side header — repainted as one block, so the
   VP stepper and Necromunda's bottle chip stay on the same baseline. */
.side-tracks { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 6px; }

/* claim-a-side cards */
.claim-card { grid-column: 1 / -1; }
.claim-army {
  width: 100%; font-size: 14px; padding: 8px; background: var(--ink);
  color: var(--bone); border: 1px solid #4a3d31; resize: vertical;
}
.claim-card .claim-army { margin-top: 8px; }
.claim-bb { min-width: 240px; }

/* ==== My Lists ==== */

/* lobby: library header + game groups */
.lists-head { display: flex; align-items: center; gap: 14px; }
.lists-head h2 { margin: 0; flex: 1; }
.list-group { font-family: 'Black Ops One'; font-size: 13px; color: var(--dust);
  text-transform: uppercase; letter-spacing: .12em; margin: 14px 0 8px; }
.list-card { border-top-color: #4a3d31; }

/* new-list flow */
.nl-h3 { color: var(--bone); font-size: 15px; margin: 16px 0 8px; }

/* reading view: sticky bar (reuses .play-head) */
.list-head input#l-search {
  flex: 1; min-width: 140px; max-width: 340px; min-height: 40px;
  font-size: 16px; padding: 6px 10px;
  background: var(--ink); color: var(--bone); border: 1px solid #4a3d31;
}
.list-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.list-actions .btn.small, .list-foot .btn.small { min-height: 40px; }
.list-foot { display: flex; gap: 10px; margin-top: 20px; }
.danger-btn { color: #ff7b6b; border-color: var(--blood); }

/* unit column: one column, two on a landscape iPad and wider */
.list-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; margin-top: 14px; }
@media (min-width: 1024px) { .list-grid { grid-template-columns: 1fr 1fr; } }

/* collapsible unit shells */
.lst-unit { background: var(--panel); border: 1px solid #2b221b; border-top: 3px solid var(--rust-dk); }
.lst-unit > .lst-head {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  background: none; border: 0; cursor: pointer; padding: 8px 14px; text-align: left;
}
.lst-caret::before { content: '▾'; color: var(--rust); font-size: 14px; }
.lst-unit.collapsed .lst-caret::before { content: '▸'; }
.lst-head-name {
  font-family: 'Black Ops One'; font-size: 16px; color: var(--bone);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lst-head-stat { font-family: 'Black Ops One'; font-size: 12.5px; color: var(--rust); white-space: nowrap; }
.lst-unit.collapsed .lst-body { display: none; }
.lst-unit.filtered-out { display: none; }
.lst-unit.unit-down .lst-head-name { text-decoration: line-through; opacity: .55; }
.lst-body .unit-card { border: 0; border-top: 1px dashed #2b221b; }

/* reference mode: hide the tap-pips and live-tracking chrome, keep the stats */
.ref-mode .u-foot,
.ref-mode .pip-row,
.ref-mode .crit-grid,
.ref-mode .wound-row,
.ref-mode .loc-pips,
.ref-mode .heat-track,
.ref-mode .heat-legend,
.ref-mode .pilot-track,
.ref-mode .crew-row,
.ref-mode .wout-btn { display: none; }
.ref-mode .sheet-sec:has(> .wound-row),
.ref-mode .sheet-sec:has(> .heat-track),
.ref-mode .sheet-sec:has(> .pilot-track) { display: none; }
.ref-mode .crit-slot { pointer-events: none; }
.ref-stat { display: none; }
.ref-mode .ref-stat { display: inline; }

/* army rules panel */
.army-panel { margin-top: 14px; }
.army-panel details.army-sec { border-top: 1px dashed #2b221b; padding: 8px 0; }
.army-panel details.army-sec > summary.sec-title {
  cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.army-panel details.army-sec > summary.sec-title::before { content: '▸'; color: var(--rust); }
.army-panel details[open].army-sec > summary.sec-title::before { content: '▾'; }
.army-sec-body { padding: 4px 0 8px; }
.rule-block { margin-bottom: 12px; font-size: 15px; color: var(--dust); line-height: 1.45; }
.rule-block b { color: var(--bone); }
.rule-name { font-family: 'Black Ops One'; font-size: 14px; color: var(--bone); margin-bottom: 4px; }
.rule-name .strat-cost { margin-left: 8px; }
.rule-block .ShowFluff, .rule-block .abLegend { font-style: italic; }
.rule-block .h_number, .rule-block .tt { display: none; }

.strat { border: 1px solid #2b221b; background: var(--ink); padding: 10px 12px; margin-bottom: 10px; }
.strat-top { display: flex; align-items: baseline; gap: 10px; }
.strat-name { font-family: 'Black Ops One'; font-size: 14px; color: var(--bone); flex: 1; }
.strat-cost {
  font-family: 'Black Ops One'; font-size: 13px; color: #0c0a08; background: var(--rust);
  padding: 1px 8px; white-space: nowrap;
}
.strat-meta { font-size: 13px; color: var(--rust); text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 6px; }
.strat-body { font-size: 15px; color: var(--dust); line-height: 1.45; }
.strat-body b { color: var(--bone); }
.strat-body .ShowFluff, .strat-body .abLegend { font-style: italic; }
.strat-body .h_number, .strat-body .tt { display: none; }

/* simple stat cards (necromunda / mcp / trench crusade) */
.simple-card .statline-txt b { font-family: 'Barlow Condensed'; font-size: 15.5px; letter-spacing: .02em; }
.simple-card .profile-txt { font-size: 14px; }
.simple-card .ability-txt { font-size: 14.5px; margin: 4px 0; }

/* Delete a list from the shelf. Sits in the card's corner, stays quiet until
   pointed at, and is a real 34px target on a tablet. */
.list-card { position: relative; }
.list-card .list-rm {
  position: absolute; top: 6px; right: 6px;
  width: 34px; height: 34px; line-height: 1;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--dust); font-family: 'Barlow Condensed', sans-serif; font-size: 17px;
  cursor: pointer; padding: 0;
}
.list-card .list-rm:hover,
.list-card .list-rm:focus-visible {
  color: #ff7b6b; border-color: var(--blood); background: #3a1210;
}
.list-card .list-rm:disabled { opacity: .4; cursor: default; }
.list-card h3 { padding-right: 34px; }