/* ═══════════════════════════════════════════════════════════════════════
   Blind Wizards — layered on AutoBattle's /css/theme.css.
   That file supplies the palette, the textured background, Impact headings
   and the .btn family; everything here is Blind Wizards' own furniture,
   built from its tokens so the two sites read as one family.
   Fallback values keep the page legible if theme.css ever fails to load.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --bw-bg:      var(--bg, #07081a);
  --bw-surface: var(--surface, #0d0e22);
  --bw-surface2:var(--surface2, #12132c);
  --bw-border:  var(--border, #212240);
  --bw-gold:    var(--bdr-g, #a07818);
  --bw-gold-hi: var(--bdr-g-hi, #d0a028);
  --bw-text:    var(--text, #d4cfe8);
  --bw-muted:   var(--muted, #8892b8);
  --bw-accent:  var(--accent, #f97316);
  --bw-a:       #60a5fa;   /* wizard A — rare blue */
  --bw-b:       #c084fc;   /* wizard B — mythic purple */
  --bw-mono: ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code",Menlo,Consolas,monospace;
}

* { box-sizing: border-box; }
body { color: var(--bw-text); font-family: system-ui, sans-serif; }
a { color: var(--bw-gold-hi); }

/* ── top bar — mirrors beta's own nav ─────────────────────────────────── */
.bw-top {
  background: linear-gradient(180deg, #12132c 0%, #0b0c1e 100%);
  border-bottom: 2px solid var(--bw-gold);
  box-shadow: 0 2px 14px rgba(0,0,0,.55);
  position: sticky; top: 0; z-index: 40;
}
.bw-top-in {
  max-width: 1240px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bw-brand {
  font-family: Impact, 'Arial Black', sans-serif; text-transform: uppercase;
  letter-spacing: .03em; font-size: 26px; text-decoration: none; line-height: 1;
}
.bw-brand-main { color: var(--bw-accent); text-shadow: 0 2px 0 #7a2c00, 0 0 14px rgba(249,115,22,.35); }
.bw-brand-sub  { color: var(--bw-gold-hi); text-shadow: 0 2px 0 #3a2a06; margin-left: .18em; }
.bw-chip {
  font-family: Impact, 'Arial Black', sans-serif; font-size: 11px; letter-spacing: .1em;
  padding: 2px 7px; border-radius: 3px; border: 1px solid; text-transform: uppercase;
}
.bw-chip-beta  { color: #a78bfa; border-color: #4c3f8a; background: #1a1636; }
.bw-chip-admin { color: var(--bw-accent); border-color: #7a3c10; background: #2a1405; }
.bw-nav { display: flex; gap: 20px; margin-left: 24px; }
.bw-nav a {
  font-family: Impact, 'Arial Black', sans-serif; text-transform: uppercase;
  letter-spacing: .07em; font-size: 13px; color: var(--bw-muted);
  text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent;
}
.bw-nav a:hover { color: var(--bw-text); }
.bw-nav a.on { color: var(--bw-gold-hi); border-bottom-color: var(--bw-gold); }
.bw-who { margin-left: auto; display: flex; align-items: center; gap: 12px;
          color: var(--bw-muted); font-size: 13px; }
.btn-sm { padding: .28rem .7rem; font-size: .7rem; }

.bw-main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
.bw-tagline { color: var(--bw-muted); margin: 0 0 20px; font-size: 14.5px; }
.bw-foot {
  max-width: 1240px; margin: 0 auto; padding: 16px 20px 40px;
  border-top: 1px solid var(--bw-border); color: #5d6488;
  font-family: var(--bw-mono); font-size: 11.5px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.bw-foot-note { margin-left: auto; }

/* ── sign-in gate ─────────────────────────────────────────────────────── */
.gate { max-width: 60ch; padding: 40px 0 60px; }
.gate h2 { font-size: 40px; color: var(--bw-gold-hi); margin: 0 0 6px;
           text-shadow: 0 2px 0 #2a1e04, 0 0 22px rgba(208,160,40,.22); }
.gate-lede { font-size: 17px; color: var(--bw-text); margin: 0 0 18px; }
.gate p { color: var(--bw-muted); line-height: 1.6; }
.gate-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 0; }
.gate-note { font-size: 13px; margin-top: 18px; }

/* ── panels ───────────────────────────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, rgba(18,19,44,.92) 0%, rgba(11,12,30,.92) 100%);
  border: 1px solid rgba(160,120,24,.42);
  border-radius: 5px; padding: 18px 20px; margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.panel.admin { border-left: 3px solid var(--bw-accent); }
.panel h2 { font-size: 21px; color: var(--bw-gold-hi); margin: 0 0 12px; }
.panel h3 { font-family: Impact,'Arial Black',sans-serif; text-transform: uppercase;
            letter-spacing: .06em; font-size: 13px; color: var(--bw-gold-hi); margin: 0 0 12px; }
.note { color: var(--bw-muted); font-size: 13px; margin: 10px 0 0; max-width: 70ch; }
.warn { margin: 0 0 12px; font-size: 13px; color: var(--bw-muted); }
.error { color: #f87171; }
.loading { color: var(--bw-muted); padding: 30px 0; }
.rulenote { margin: 8px 0 0; font-size: 14.5px; color: var(--bw-text); }
.meta { color: var(--bw-muted); font-family: var(--bw-mono); font-size: 11.5px; }
.link { background: none; border: 0; color: var(--bw-gold-hi); font-weight: 650;
        padding: 0; text-align: left; cursor: pointer; font-size: 15px; }
.link:hover { text-decoration: underline; }
.back { display: block; font-family: var(--bw-mono); font-size: 11.5px;
        color: var(--bw-muted); margin-bottom: 10px; font-weight: 400; }

/* ── forms ────────────────────────────────────────────────────────────── */
input, select, textarea, button { font: inherit; }
input[type=text], input[type=search], input[type=number], select {
  background: #0a0b1c; color: var(--bw-text);
  border: 1px solid var(--bw-border); border-radius: 4px; padding: 8px 10px;
  font-size: 13.5px; min-width: 0;
}
.form { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; align-items: end; }
.form .f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* An explicit `display` here beats the [hidden] attribute's user-agent
   display:none — the same trap that once left the picker sheet invisible but
   still on top, swallowing every click. The length form hides whichever of
   Rounds / ban-target does not apply, so it needs this to actually hide. */
.form .f[hidden] { display: none; }
.form .f > span, .inf > span {
  font-family: var(--bw-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bw-muted);
}
.form .note { grid-column: 1/-1; margin: 0; }

/* run/primary button reuses theme.css's orange gem */
.run { }
.mini { }

/* ── chips ────────────────────────────────────────────────────────────── */
.chip { font-family: var(--bw-mono); font-size: 10px; letter-spacing: .08em;
        text-transform: uppercase; padding: 2px 7px; border-radius: 3px; font-weight: 650; border: 1px solid; }
.chip-open     { color: #4ade80; border-color: #1e5c34; background: #0c2417; }
.chip-running  { color: var(--bw-accent); border-color: #7a3c10; background: #2a1405; }
.chip-finished { color: var(--bw-muted); border-color: var(--bw-border); background: #12132c; }
.chip-bot      { color: #8892b8; border-color: var(--bw-border); background: #12132c; }
.chip-ban      { color: #f87171; border-color: #7a1e1e; background: #260a0a; }

/* ── stakes: what a tournament costs and what it holds ────────────────── */
/* Gold is the one number a player scans for, so it is set in the same gold as
   headings and in the mono face, which keeps digits aligned between rows. */
.purse { margin: 0 0 18px; font-size: 14px; color: var(--bw-muted); }
.purse strong { color: var(--bw-gold-hi); font-family: var(--bw-mono); font-size: 16px; }
.stakes { font-family: var(--bw-mono); font-size: 12px; color: var(--bw-gold-hi);
          margin: 8px 0 0; }
.trow .stakes { margin: 0; }
.purse-inline { color: var(--bw-muted); }
.prize { margin: 10px 0 0; font-size: 14.5px; color: var(--bw-text); }
.prize strong { color: var(--bw-gold-hi); }

/* ── tournament rows / seats / standings ──────────────────────────────── */
.trow { display: flex; align-items: center; gap: 12px; padding: 10px 0;
        border-bottom: 1px solid var(--bw-border); flex-wrap: wrap; }
.trow:last-child { border-bottom: 0; }
/* Pushed to the far end of the row so it is never next to the tournament's
   name, which is the thing you actually mean to press. */
.trow .row-del { margin-left: auto; }
.seat-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
            border-bottom: 1px solid var(--bw-border); font-size: 13.5px; flex-wrap: wrap; }
.seat-row:last-child { border-bottom: 0; }
.seat-row.you { background: rgba(96,165,250,.08); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.seat-no { font-family: var(--bw-mono); font-size: 11px; color: var(--bw-muted); min-width: 22px; text-align: right; }
.seat-name { font-weight: 650; min-width: 120px; }
.seat-hand { color: var(--bw-muted); font-size: 12.5px; }
.champ { margin: 0 0 8px; font-size: 14px; }
.champ strong { color: var(--bw-gold-hi); }
.banned { margin: 0 0 12px; font-size: 13px; color: var(--bw-muted); }
.standings { width: 100%; border-collapse: collapse; font-size: 13px; }
.standings td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--bw-border); }
.standings td.n { font-family: var(--bw-mono); text-align: right; padding-right: 16px; width: 1%; }
.standings td.hand { color: var(--bw-muted); font-size: 12.5px; }
.standings tr.you td { background: rgba(96,165,250,.08); }
.bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.prog { font-family: var(--bw-mono); font-size: 12px; color: var(--bw-gold-hi); }

/* ── hands (tester + tournament entry) ────────────────────────────────── */
.hands { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 18px; align-items: start;
         position: sticky; top: 58px; z-index: 20; background: rgba(7,8,26,.92);
         backdrop-filter: blur(3px); padding: 12px 0; }
@media (max-width: 860px) { .hands { grid-template-columns: 1fr; position: static; } }
@media (max-height: 700px) { .hands { position: static; } }
.hand { background: linear-gradient(180deg, rgba(18,19,44,.94), rgba(11,12,30,.94));
        border: 1px solid rgba(160,120,24,.35); border-radius: 5px; padding: 14px 16px; min-width: 0; }
.hand[data-side="A"] { border-top: 3px solid var(--bw-a); }
.hand[data-side="B"] { border-top: 3px solid var(--bw-b); }
.hand-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.hand h2 { font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--bw-text); }
.pip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
       border-radius: 50%; color: #07081a; font-family: var(--bw-mono); font-size: 12px; font-weight: 700; }
.pip-a { background: var(--bw-a); } .pip-b { background: var(--bw-b); }
.hand-tools { display: flex; gap: 6px; }

.slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.slot { display: flex; align-items: center; gap: 10px; min-height: 50px;
        border: 1px dashed #2a2b4d; border-radius: 4px; padding: 7px 10px;
        background: rgba(10,11,28,.6); color: #5d6488; font-size: 13px; }
.slot.filled { border-style: solid; border-color: var(--bw-border);
               background: linear-gradient(180deg, #14152f, #0e0f26); color: var(--bw-text); }
.slot .cost { font-family: var(--bw-mono); font-size: 12px; font-weight: 650; min-width: 26px;
              text-align: center; padding: 2px 0; border-radius: 3px;
              background: #0a0b1c; border: 1px solid var(--bw-gold); color: var(--bw-gold-hi); }
.slot .nm { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; }
.slot .nm small { display: block; font-weight: 400; color: var(--bw-muted); font-size: 11.5px;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .x, .slot .mv { background: none; border: 0; color: #5d6488; line-height: 1; cursor: pointer; }
.slot .x { font-size: 17px; padding: 0 3px; } .slot .mv { font-size: 12px; padding: 0 2px; }
.slot .x:hover, .slot .mv:hover { color: var(--bw-gold-hi); }
.slot .mv[disabled] { opacity: .25; cursor: default; }
.slot .ord { font-family: var(--bw-mono); font-size: 10px; color: var(--bw-muted); min-width: 12px; text-align: center; }
.hand-slots { margin-bottom: 12px; }

.versus { display: flex; flex-direction: column; gap: 8px; padding-top: 46px; }
@media (max-width: 860px) { .versus { padding-top: 0; flex-direction: row; } }
.inf { display: flex; align-items: center; gap: 10px; margin-top: 12px;
       padding-top: 12px; border-top: 1px dashed #2a2b4d; }
.inf.plan { border-top: 0; padding-top: 0; margin-top: 8px; }
.inf select { flex: 1; }

/* ── verdict ──────────────────────────────────────────────────────────── */
.verdict { margin-top: 20px; border: 1px solid rgba(160,120,24,.42); border-radius: 5px;
           background: var(--bw-surface); overflow: hidden; }
.v-head { padding: 20px 22px; border-bottom: 1px solid var(--bw-border); }
.v-head.win-a { background: linear-gradient(180deg, rgba(96,165,250,.14), rgba(96,165,250,.05)); border-left: 4px solid var(--bw-a); }
.v-head.win-b { background: linear-gradient(180deg, rgba(192,132,252,.14), rgba(192,132,252,.05)); border-left: 4px solid var(--bw-b); }
.v-head.draw  { background: linear-gradient(180deg, rgba(208,160,40,.14), rgba(208,160,40,.05)); border-left: 4px solid var(--bw-gold); }
.v-head.dead  { background: linear-gradient(180deg, rgba(136,146,184,.12), rgba(136,146,184,.04)); border-left: 4px solid var(--bw-muted); }
.v-title { font-family: Impact,'Arial Black',sans-serif; text-transform: uppercase;
           letter-spacing: .04em; font-size: 30px; color: var(--bw-text); }
.v-sub { color: var(--bw-muted); font-size: 14px; margin-top: 3px; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bw-border); }
@media (max-width: 700px) { .seats { grid-template-columns: 1fr; } }
.seat { background: var(--bw-surface); padding: 16px 20px; }
.seat h3 { margin: 0 0 8px; font-size: 11px; }
.seat .outcome { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.seat .detail { color: var(--bw-muted); font-size: 13px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.seat.stalled .outcome { color: var(--bw-muted); }
.badge { font-family: var(--bw-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
         padding: 2px 7px; border-radius: 3px; font-weight: 650; color: #07081a; }
.badge-a { background: var(--bw-a); } .badge-b { background: var(--bw-b); }
.badge-s { background: #1a1b34; color: var(--bw-muted); border: 1px solid var(--bw-border); }
.logs { border-top: 1px solid var(--bw-border); }
.logs details { border-bottom: 1px solid var(--bw-border); }
.logs summary { padding: 10px 20px; cursor: pointer; font-size: 12.5px; color: var(--bw-muted);
                font-family: var(--bw-mono); user-select: none; }
.logs summary:hover { color: var(--bw-gold-hi); background: rgba(160,120,24,.06); }
.logs pre { margin: 0; padding: 12px 20px 18px; background: #08091b; color: #9aa3c8;
            font-family: var(--bw-mono); font-size: 11.5px; line-height: 1.5;
            max-height: 420px; overflow: auto; white-space: pre-wrap; }

/* ── card browser ─────────────────────────────────────────────────────── */
.browser { margin-top: 28px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filters input { flex: 1; min-width: 180px; }
.count { font-family: var(--bw-mono); font-size: 11.5px; color: #5d6488; margin-left: auto; }
.pool { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap: 10px; }
.card { display: block; background: linear-gradient(180deg, #14152f, #0d0e22);
        border: 1px solid var(--bw-border); border-radius: 5px; padding: 10px 12px; }
.card:hover { border-color: rgba(160,120,24,.55); box-shadow: 0 0 12px rgba(160,120,24,.12); }
.card[draggable="true"] { cursor: grab; }
.card-head { display: flex; align-items: flex-start; gap: 10px; }
.card-head .body { flex: 1; min-width: 0; }
.card .cost { font-family: var(--bw-mono); font-size: 12.5px; font-weight: 650; min-width: 28px;
              text-align: center; padding: 3px 0; border-radius: 3px; background: #0a0b1c;
              border: 1px solid var(--bw-gold); color: var(--bw-gold-hi); }
.card .nm { font-weight: 650; font-size: 13.5px; color: var(--bw-text); }
.card .meta { font-family: var(--bw-mono); font-size: 10.5px; color: #5d6488;
              letter-spacing: .05em; text-transform: uppercase; margin-top: 2px; }
.card .rx { color: var(--bw-muted); font-size: 12px; line-height: 1.45; margin-top: 8px; }
.card .adds { display: flex; gap: 4px; }
.add { border: 1px solid var(--bw-border); background: #14152f; color: var(--bw-muted);
       border-radius: 3px; padding: 5px 10px; font-family: var(--bw-mono); font-size: 12px;
       font-weight: 700; cursor: pointer; }
.add:hover { border-color: var(--bw-gold); color: var(--bw-gold-hi); }
.add-a:hover { background: var(--bw-a); color: #07081a; border-color: var(--bw-a); }
.add-b:hover { background: var(--bw-b); color: #07081a; border-color: var(--bw-b); }
.role { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: 10px; }
.role-THREAT { background: #2a1030; color: #c084fc; }
.role-ENGINE { background: #0e2038; color: #60a5fa; }
.role-ANSWER { background: #2a2004; color: var(--bw-gold-hi); }
.role-MIDRANGE, .role-WALL { background: #1a1b34; color: var(--bw-muted); }
.empty { grid-column: 1/-1; padding: 26px; text-align: center; color: #5d6488; font-size: 14px; }
.picker { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bw-border); }
.picker .pool { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); max-height: 520px;
                overflow-y: auto; padding-right: 4px; }
.picker .card .add { width: auto; }

/* ── card art ─────────────────────────────────────────────────────────── */
.art { position: relative; overflow: hidden; border-radius: 3px; background: #0a0b1c;
       flex: none; border: 1px solid var(--bw-border); }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art.noart { display: flex; align-items: center; justify-content: center; }
.ph { font-family: Impact,'Arial Black',sans-serif; color: #07081a; display: flex;
      align-items: center; justify-content: center; width: 100%; height: 100%; background: #4a5070; }
.ph[data-role="THREAT"] { background: #c084fc; }
.ph[data-role="ENGINE"] { background: #60a5fa; }
.ph[data-role="ANSWER"] { background: var(--bw-gold-hi); }
.ph[data-role="WALL"]   { background: #8892b8; }
.thumb { width: 88px; height: 48px; cursor: pointer; }
.thumb:focus-visible { outline: 2px solid var(--bw-gold-hi); outline-offset: 2px; }
.thumb .ph { font-size: 18px; }
.slot-thumb { width: 52px; height: 29px; cursor: pointer; }
.slot-thumb .ph { font-size: 12px; }

/* ── lightbox ─────────────────────────────────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
      justify-content: center; padding: 24px; background: rgba(3,4,12,.82); backdrop-filter: blur(3px); }
.lb-panel { position: relative; background: var(--bw-surface); border: 1px solid rgba(160,120,24,.55);
            border-radius: 6px; max-width: 520px; width: 100%; max-height: 90vh; overflow: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.lb-art { width: 100%; aspect-ratio: 320/175; object-fit: cover; display: block;
          border-radius: 6px 6px 0 0; background: #0a0b1c; }
.lb-art.noart { display: flex; }
.lb-art.noart .ph { font-size: 64px; border-radius: 6px 6px 0 0; }
.lb-info { padding: 18px 20px 20px; }
.lb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lb-head h3 { margin: 0; font-size: 20px; color: var(--bw-gold-hi); }
.lb-cost { font-family: var(--bw-mono); font-size: 16px; font-weight: 650; color: var(--bw-gold-hi);
           display: inline-flex; align-items: center; gap: 4px; }
.lb-cost .stat-icon { height: 1.05em; width: 1.05em; }
.lb-meta { font-family: var(--bw-mono); font-size: 10.5px; letter-spacing: .08em;
           text-transform: uppercase; color: #5d6488; margin-top: 4px; }
/* ── the numbers a creature fights with ──────────────────────────────────
   Boxed rather than set as another mono line, because these are the values you
   compare between two cards and a run of text is the wrong shape for that. Same
   gold-on-near-black as the cost chip, so the card's numbers read as one family. */
.lb-stats { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.lb-stat {
  display: flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--bw-gold); border-radius: 3px;
  padding: 4px 10px; background: #0A0B1C;
}
.lb-stat b { font-family: var(--bw-mono); font-size: 15px; font-weight: 700; color: var(--bw-gold-hi); }
/* AutoBattle's own stat symbols, sized in em so they track the number beside
   them. Width as well as height, so a square PNG cannot reserve a full-size box
   before it decodes. */
.stat-icon { height: 1.15em; width: 1.15em; display: block; flex: none; }
.lb-stat .stat-icon { height: 1.2em; width: 1.2em; }
.lb-rules { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--bw-text); }
.lb-flavor { margin: 10px 0 0; font-style: italic; color: var(--bw-muted); font-size: 13.5px; }
.lb-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(160,120,24,.55); border-radius: 4px; cursor: pointer;
  background: rgba(7,8,26,.72); color: var(--bw-gold-hi);
  font-size: 24px; line-height: 1; padding: 0;
  /* The art behind it can be any colour, so it carries its own backing. */
  backdrop-filter: blur(2px); text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.lb-close:hover { border-color: var(--bw-gold-hi); color: #f0c050; background: rgba(7,8,26,.9); }
.lb-adds { display: flex; gap: 8px; margin-top: 18px; }
/* 'Change card 2' is the one action on your own card, so it carries the gold
   rather than sitting in the muted .add grey the browser's Add buttons use. */
.add-change { border-color: var(--bw-gold); color: var(--bw-gold-hi);
              background: linear-gradient(180deg, #1c1c3a 0%, #101028 100%); }
.add-change:hover { border-color: var(--bw-gold-hi); color: #f0c050;
                    background: linear-gradient(180deg, #24244a 0%, #16163a 100%); }

.hint { margin: 0 0 10px; color: #5d6488; font-size: 12.5px; }
.pick { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 8px; margin-bottom: 12px; }
.drag-src { opacity: .4; }
.slot.drop-over { border-style: solid; border-color: var(--bw-gold-hi);
                  background: rgba(160,120,24,.12); color: var(--bw-text); }

/* ═══ Play — the game itself ══════════════════════════════════════════════
   Three cards and a button. Nothing here should look like a setting.       */
.play-wrap { max-width: 720px; margin: 0 auto; }
.deck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.deck-label {
  font-family: var(--bw-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bw-muted);
}

.deck-slots { list-style: none; margin: 0; padding: 0;
              display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Phones keep the three across rather than stacking — see the phone section
   at the foot of this file. */
.deck-slot {
  background: linear-gradient(180deg, #1A1B3C, #101127);
  border: 1px solid rgba(160,120,24,.35); border-radius: 6px;
  padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 9px;
  transition: border-color .12s, transform .08s;
}
.deck-slot:hover { border-color: var(--bw-gold-hi); }
.deck-slot:active { transform: translateY(1px); }
.deck-slot:focus-visible { outline: 2px solid var(--bw-gold-hi); outline-offset: 2px; }
.deck-art { width: 100%; aspect-ratio: 320/175; }
.deck-top { display: flex; align-items: center; gap: 8px; }
.deck-cost {
  font-family: var(--bw-mono); font-size: 12px; font-weight: 700; color: var(--bw-gold-hi);
  border: 1px solid var(--bw-gold); border-radius: 3px; padding: 1px 7px; background: #0A0B1C;
}
.deck-name { font-weight: 650; font-size: 14px; }
.deck-rx { margin: 0; font-size: 12px; line-height: 1.45; color: var(--bw-muted); }

.play-btn {
  display: block; width: 100%; margin-top: 18px; border: 0; border-radius: 6px;
  padding: 18px; cursor: pointer;
  font-family: Impact, 'Arial Black', sans-serif; text-transform: uppercase;
  letter-spacing: .09em; font-size: 23px; color: #FFF7EE;
  background: linear-gradient(180deg, #FF7A22 0%, #C24405 55%, #8F3103 100%);
  box-shadow: 0 4px 0 #4A1A02, 0 6px 20px rgba(249,115,22,.26), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .07s, box-shadow .07s;
}
.play-btn:hover { background: linear-gradient(180deg, #FF8A32 0%, #D24E06 55%, #A03903 100%); }
.play-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #4A1A02, inset 0 2px 5px rgba(0,0,0,.35); }
.play-btn:disabled { background: #1B1C38; color: #4A5070; box-shadow: none; cursor: default; }
.play-hint { text-align: center; color: #5d6488; font-size: 12.5px; margin: 10px 0 0; }

/* ── defenders ──────────────────────────────────────────────
   Each deck is its own bordered block so several stack without becoming one
   long undifferentiated run of cards. */
.def-explain { color: var(--bw-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; max-width: 60ch; }
.def-deck { border: 1px solid var(--bw-border); border-radius: 6px;
            padding: 14px; margin-bottom: 14px; background: rgba(13,14,34,.55); }
.def-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.def-label { font-family: var(--bw-mono); font-size: 11px; letter-spacing: .12em;
             text-transform: uppercase; color: var(--bw-muted); }
.def-head .btn-danger { margin-left: auto; }

/* ── result ─────────────────────────────────────────────── */
.res {
  margin-top: 22px; border: 1px solid var(--bw-line-str); border-radius: 6px;
  padding: 20px 22px; background: var(--bw-surface);
}
.res-win  { border-left: 4px solid #4ADE80; background: linear-gradient(180deg, rgba(74,222,128,.10), rgba(74,222,128,.02)); }
.res-lose { border-left: 4px solid #C05050; background: linear-gradient(180deg, rgba(192,80,80,.10), rgba(192,80,80,.02)); }
.res-draw { border-left: 4px solid var(--bw-gold); background: linear-gradient(180deg, rgba(208,160,40,.10), rgba(208,160,40,.02)); }
.res-title {
  font-family: Impact, 'Arial Black', sans-serif; text-transform: uppercase;
  letter-spacing: .04em; font-size: 30px; line-height: 1;
}
.res-win .res-title  { color: #7BE8A6; }
.res-lose .res-title { color: #F08A8A; }
.res-draw .res-title { color: var(--bw-gold-hi); }
.res-vs { color: var(--bw-text); font-size: 14.5px; margin-top: 6px; }
.res-line { color: var(--bw-muted); font-size: 13.5px; margin-top: 3px; }
.res-their { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bw-line); }
.res-their-label {
  font-family: var(--bw-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bw-muted); margin-bottom: 8px;
}
.res-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* The opponent's three also stay across on a phone, for the same reason. */
.res-card { cursor: pointer; }
.res-art { width: 100%; aspect-ratio: 320/175; }
.res-card-name { display: block; font-size: 12.5px; margin-top: 5px; color: var(--bw-text); }

/* ── picker sheet ───────────────────────────────────────── */
body.sheet-open { overflow: hidden; }
/* An explicit `display` in author CSS beats the [hidden] attribute's
   user-agent `display:none`, which left this overlay invisible but still on
   top of the page, swallowing every click including Play. */
.picker-sheet[hidden] { display: none; }
.picker-sheet {
  position: fixed; inset: 0; z-index: 55; display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 20px;
  background: rgba(3,4,12,.82); backdrop-filter: blur(3px); overflow-y: auto;
}
.picker-panel {
  background: var(--bw-surface); border: 1px solid rgba(160,120,24,.5);
  border-radius: 6px; max-width: 900px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.picker-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--bw-line); position: sticky; top: 0;
  background: var(--bw-surface); border-radius: 6px 6px 0 0;
}
.picker-head h2 { margin: 0; font-family: var(--bw-serif, Impact), Impact, sans-serif;
                  font-size: 18px; color: var(--bw-gold-hi); text-transform: uppercase;
                  letter-spacing: .04em; }
#picker-body { padding: 16px 20px 22px; }
#picker-body .pool { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* gold + boost sit beside the deck label, not as another thing to do */
.gold-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.gold {
  font-family: var(--bw-mono); font-size: 13px; font-weight: 650;
  color: var(--bw-gold-hi); border: 1px solid var(--bw-gold); border-radius: 3px;
  padding: 3px 10px; background: #0A0B1C; white-space: nowrap;
}
.boost {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--bw-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.boost:hover:not(:disabled) { color: var(--bw-gold-hi); }
.boost:disabled { color: #4A5070; cursor: default; text-decoration: none; }
.defence { text-align: center; color: var(--bw-gold-hi); font-size: 12.5px; margin: 6px 0 0; }
.reset-line { text-align: center; margin: 14px 0 0; }
.res-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.res-earned {
  font-family: var(--bw-mono); font-size: 20px; font-weight: 700; color: #7BE8A6;
  white-space: nowrap;
}

/* ═══ Phones ══════════════════════════════════════════════════════════════
   Measured against the live pages at 390×844 and 360×844, not guessed. Two
   things came out of that and neither was what the CSS looked like it would
   do: nothing overflows horizontally anywhere, and almost every control is
   too small to hit. The rules below fix the second and buy back screen from
   the header; the size of the card tiles themselves is a design question and
   is deliberately left alone here.                                          */
@media (max-width: 700px) {

  /* The header was three stacked rows — brand, nav, then name and sign-out —
     costing 120px of an 844px screen before the game began. Now two: identity
     on top, everything you can press below it. The break is forced rather than
     left to wrap naturally, because the ADMIN chip is conditional and an admin
     and a player would otherwise wrap at different points. */
  .bw-top-in { padding: 8px 14px; gap: 6px 10px; }
  .bw-top-in::after { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .bw-brand { font-size: 20px; }
  /* Nav and Sign out share the second row, and must keep sharing it at 360px
     as well as 390 — when they stop fitting the header wraps to three rows and
     lands taller than the two-row layout it replaced. Hence the small type and
     tight gaps here: they buy exactly the width that keeps the row intact. */
  .bw-nav { order: 2; margin-left: 0; gap: 8px; flex: 0 1 auto; min-width: 0; }
  .bw-nav a { font-size: 12px; letter-spacing: .04em; }
  .bw-who { order: 2; margin-left: auto; gap: 8px; }
  .bw-whoami { display: none; }   /* you know who you are; Sign out is the part you might need */

  /* 44px is the floor for anything a thumb has to find. Measured before this:
     the boost link was 15px, 'back' 13px, tournament names 20px, nav 25px.
     min-height rather than padding, so nothing that is already big grows. */
  /* .bw-brand is deliberately not in this list. It is 20px tall but ~150px
     wide, and it links to index.php — which the PLAY nav item beside it also
     does, at a full 44px. It is redundant navigation, not an unreachable one. */
  .btn, .btn-sm, .add, .link, .boost, .bw-nav a,
  .filters input, .filters select, .form input, .form select {
    min-height: 44px;
  }
  .btn, .btn-sm, .add, .bw-nav a {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .link, .boost { display: inline-flex; align-items: center; }
  /* min-height already provides the target, so the padding stays tight —
     widening it is what pushed Sign out off the nav row at 360px. */
  .btn-sm { padding: .28rem .65rem; font-size: .74rem; }
  .add { padding: 0 14px; }
  .bw-nav a { padding: 0 2px; }
  /* The × on a filled slot is a small target sitting next to a big one — give
     it room without letting it cover the card it belongs to. */
  .slot .x { min-width: 44px; min-height: 44px; }

  /* 'Your three cards' was wrapping to two lines because the gold chip and the
     boost offer were competing for the same row. The offer is a sentence, so
     it gets its own. */
  /* 'Your three cards' was wrapping to two lines because the gold chip and the
     boost offer competed for one row. The offer is a sentence, so it gets its
     own — but it lives inside .gold-wrap, so widening it there just pushes the
     whole group onto a third line. A two-row grid puts each part where it
     belongs; display:contents lets the wrapper's children become grid items
     without changing the markup. */
  .deck-head { display: grid; grid-template-columns: 1fr auto;
               align-items: center; column-gap: 10px; row-gap: 2px; }
  .deck-label { grid-area: 1 / 1; }
  .gold-wrap { display: contents; }
  .gold { grid-area: 1 / 2; }
  .boost { grid-area: 2 / 1 / 3 / 3; justify-content: flex-end; text-align: right; }

  .bw-main { padding: 16px 14px 48px; }
  .panel { padding: 16px 14px; }
  .bw-foot { padding: 14px 14px 32px; }

  /* ── your hand, three across ─────────────────────────────────────────
     Stacking the three cards is what put Play 218px below the fold: at full
     width each card is ~380px tall and the button lands after all three.
     Across, they read as a hand and everything fits one screen.

     The art is cropped tall rather than shrunk — a 320:175 banner at a third
     of the width is a postage stamp, while the same picture cropped to a
     portrait still shows its subject and looks like a card. The rules text is
     the one real casualty; it moves to a tap (openCard in play.js) rather
     than being shrunk to something nobody can read.                        */
  .deck-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .deck-slot { padding: 7px; gap: 7px; }
  .deck-art { aspect-ratio: 27 / 50; }        /* portrait crop, scales with width */
  .deck-top { gap: 5px; align-items: flex-start; }
  .deck-cost { font-size: 11px; padding: 0 5px; }
  /* Two lines before it clips: 'Ki-Zor Stone' should not become 'Ki-Zor St…'
     when there is room to wrap it. */
  .deck-name { font-size: 12px; line-height: 1.25; display: -webkit-box;
               -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .deck-rx { display: none; }                 /* lives in the card view now */

  .res-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .res-art { aspect-ratio: 27 / 50; }
  .res-card-name { font-size: 11.5px; line-height: 1.25; }
}

/* ── banned in Play ───────────────────────────────────────────────────────
   Rotating auto-bans. Reuses .chip-ban from the tournament vocabulary rather
   than inventing a second visual language for the same idea — a player may
   already have met it there.                                               */
.card.is-banned, .deck-slot.is-banned { opacity: .55; }
.card.is-banned { border-color: rgba(248,113,113,.35); }
.deck-slot.is-banned { border-color: rgba(248,113,113,.45); cursor: pointer; }
.deck-slot.is-banned .chip-ban { align-self: flex-start; white-space: nowrap; }
.boost[hidden] { display: none; }
.lb-ban { margin: 14px 0 0; font-size: 13.5px; color: var(--bw-muted); }
.res-banned { margin: 12px 0 0; font-size: 13.5px; color: var(--bw-text); }
.ban-link { font-family: var(--bw-mono); font-size: 11.5px; }
.ban-panel { max-width: 460px; }
.ban-body { padding: 16px 20px 20px; }
.ban-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
           border-bottom: 1px solid var(--bw-border); }
.ban-row:last-child { border-bottom: 0; }
.ban-txt { min-width: 0; }

/* ── playing as a guest ───────────────────────────────────────────────────
   Gold, the cooldown upgrade and the defence line are all false for a guest,
   so they are hidden and this takes their place in the same row. */
.guest-note { grid-area: 2 / 1 / 3 / 3; justify-self: end; text-align: right;
              font-size: 11.5px; color: var(--bw-muted); text-decoration: underline;
              text-underline-offset: 3px; display: inline-flex; align-items: center;
              min-height: 44px; max-width: 34ch; }
.guest-note:hover { color: var(--bw-gold-hi); }
.guest-note[hidden], .gold[hidden] { display: none; }

/* ── the ban list (admin) ─────────────────────────────────────────────── */
.ban-admin-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
                 border-bottom: 1px solid var(--bw-border); flex-wrap: wrap; }
.ban-admin-row:last-child { border-bottom: 0; }
.ban-admin-row.lifted { opacity: .5; }
.ban-admin-row .ban-txt { flex: 1; min-width: 140px; }
.ban-admin-row .chip { margin-left: auto; }