:root {
  --bg: #0d0f14;
  --surface: #161922;
  --surface-2: #1f232f;
  --border: #2a2f3d;
  --text: #e6e9f0;
  --muted: #8b93a7;
  --muted-2: #c3cad8;
  --accent: #36c2ce;
  --accent-2: #ce6a3a;
  --accent-dim: #1d4a4f;
  --gold: #f5c451;
  --gold-dim: #4a3c14;
  --danger: #e5566b;
  --radius: 12px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; overflow-x: clip; }
.wrap--wide { max-width: 1040px; }

/* top bar */
.topbar {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(var(--surface), var(--bg));
  margin-bottom: 32px;
}
.topbar__inner {
  max-width: 1040px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.brand {
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
}
.brand:hover { text-decoration: none; opacity: .85; }
.brand span { color: var(--accent); }
.nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--muted); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); }
.nav-burger { display: none; margin-left: auto; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 8px 13px; font-size: 18px; line-height: 1; cursor: pointer; }
@media (max-width: 720px) {
  .topbar__inner { gap: 12px; }
  .nav-burger { display: inline-flex; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; }
  .topbar.nav-open .nav { display: flex; }
}

/* headings / eyebrows */
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px;
  font-weight: 700; color: var(--accent); margin: 0 0 6px;
}
h1.page { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0 0 28px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 9px; transition: border-color .12s, background .12s;
}
.btn:hover { border-color: var(--accent); }
.btn--primary { background: var(--accent); color: #06222400; color: #062224; border-color: var(--accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; }
.btn--danger { color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); }
.backlink { display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none; margin: 0 0 4px; }
.backlink:hover { color: var(--accent); }
.gamedate { font-size: 12px; color: var(--muted); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.setup-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .setup-2col { grid-template-columns: 1fr; } }
.rosterpick { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 13px; cursor: pointer; user-select: none; }
.rchip input { margin: 0; }
.rchip--on { background: var(--surface); border-color: var(--accent); color: var(--text); cursor: default; }
.rchip__x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.rchip__x:hover { color: var(--danger); }
.btn:disabled { opacity: .4; cursor: not-allowed; border-color: var(--border); }

input[type=text], input[type=number], input[type=password], input[type=email],
input[type=search], input[type=url], input[type=tel], input[type=date],
input:not([type]), textarea, select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font: inherit; padding: 9px 12px; border-radius: 9px; width: 100%;
}
textarea { resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-dim); border-color: var(--accent); }
label.fld { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; font-weight: 600; }

/* uniform control height so text inputs, selects and buttons line up on one row */
input[type=text], input[type=number], input[type=password], input[type=email],
input[type=search], input[type=url], input[type=tel], input[type=date],
input:not([type]), select { height: 42px; line-height: 1.4; }
textarea { height: auto; }
.login-card input[type=password] { height: auto; }
.btn { min-height: 42px; white-space: nowrap; }
.btn.small { min-height: 34px; }

/* card / list of saved games */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.card + .card { margin-top: 14px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; }
.row--end { justify-content: flex-end; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.saved {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.saved__main { flex: 1 1 auto; min-width: 0; }
.saved__actions { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; }
/* b75: the map a BeamNG game ran on, on the /beam list */
.savedmap { flex: 0 0 auto; align-self: stretch; width: 132px; min-height: 74px; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; }
.savedmap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.savedmap--none span { font-size: 22px; opacity: .3; filter: grayscale(1); }
.saved:hover .savedmap { border-color: var(--accent); }
/* b131: commander art - the profile's commander tiles, the Stats page's most-played rows */
.cmdrtiles { display: flex; gap: 10px; margin-bottom: 14px; }
.cmdrtile { flex: 1 1 0; min-width: 0; position: relative; display: flex; align-items: flex-end; min-height: 108px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; }
.cmdrtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cmdrtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,14,0) 30%, rgba(8,10,14,.88) 100%); }
.cmdrtile__txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; min-width: 0; }
.cmdrtile__txt b { font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdrtile--fav .cmdrtile__txt b { font-size: 17px; }
.cmdrtile__k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cmdrtile__n { font-size: 12px; color: var(--muted-2); }
.cmdrtile:hover { border-color: var(--accent); }
.cmdrtile:hover img { transform: scale(1.04); transition: transform .25s ease; }
.cmdrtile--fav { flex-grow: 2; min-height: 120px; }
@media (max-width: 720px) { .cmdrtiles { flex-wrap: wrap; } .cmdrtile { flex-basis: calc(50% - 5px); } .cmdrtile--fav { flex-basis: 100%; } }
.cmdrart { flex: 0 0 auto; width: 38px; height: 28px; border-radius: 5px; object-fit: cover; vertical-align: middle; margin-right: 8px; border: 1px solid var(--border); }
.statrow.statrow--art { grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) max-content; }
.statrow--art .statrow__name { display: flex; align-items: center; min-width: 0; }
.statrow--art .statrow__name > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* b133: a car's picture beside its name (the games upload them - carname()) */
.carname { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; max-width: 100%; }
.carname > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carpic { flex: 0 0 auto; width: 46px; height: 26px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); }
.carname--big .carpic { width: 64px; height: 36px; border-radius: 6px; }
.nightcar .carname { margin: 1px 0; }
/* b131: the game browser's map picture per row */
.gname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gthumb { flex: 0 0 auto; width: 64px; height: 38px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gthumb--none span { font-size: 16px; opacity: .3; filter: grayscale(1); }
tr:hover .gthumb { border-color: var(--accent); }

/* draft: per-player deck editor (colors + Scryfall cover card) */
.deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.deckedit { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.deckedit__head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.deckedit .fld { margin: 3px 0 0; }
.deckedit .btn { align-self: flex-start; margin-top: 6px; padding: 8px 16px; }
.cpick { display: flex; gap: 9px; align-items: center; }
.cpick__btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  opacity: .34; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); transition: opacity .12s, border-color .12s, box-shadow .12s; }
.cpick__btn:hover { opacity: .7; }
.cpick__btn.is-on { opacity: 1; border-color: rgba(255,255,255,.55); box-shadow: 0 0 9px -2px rgba(255,255,255,.5), inset 0 0 0 1px rgba(0,0,0,.35); }
/* cover thumb + colors inline in the standings name cell */
.stname { display: flex; align-items: center; gap: 7px; }
.dcover { width: 26px; height: 26px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--border); }
.dcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pips { display: inline-flex; gap: 2px; margin-left: 2px; vertical-align: middle; }
.nm .pips { margin-left: 6px; }
.saved:hover { border-color: var(--accent); }
.saved__title { font-weight: 700; font-size: 17px; }
.saved__meta { color: var(--muted); font-size: 13px; }

.empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 40px 24px; text-align: center; color: var(--muted);
}

/* ============ BEAM SCOREBOARD ============ */
.board { position: relative; }
.player {
  display: grid;
  grid-template-columns: 44px 52px 1fr auto auto auto;
  align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px;
  will-change: transform;
}
.player--leader { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 24px -12px var(--gold); }
.player--gold { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 24px -12px var(--gold); }
.player--silver { border-color: #c9d1d9; box-shadow: 0 0 0 1px #c9d1d9, 0 6px 24px -14px #c9d1d9; }
.player--bronze { border-color: #cd7f32; box-shadow: 0 0 0 1px #cd7f32, 0 6px 24px -14px #cd7f32; }
.player--silver .avatar { border-color: #c9d1d9; }
.player--bronze .avatar { border-color: #cd7f32; }

.rank {
  font-family: var(--mono); font-weight: 700; font-size: 18px;
  color: var(--muted); text-align: center;
}
.player--leader .rank { color: var(--gold); }

.avatar {
  width: 48px; height: 48px; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden; position: relative;
  font-weight: 700; color: var(--muted); font-size: 18px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar:hover::after {
  content: "↑"; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 18px;
}
.player--leader .avatar { border-color: var(--gold); }

.pname {
  font-weight: 700; font-size: 17px; cursor: text;
  border-bottom: 1px dashed transparent;
}
.pname:hover { border-bottom-color: var(--border); }
.pname__edit { font-size: 17px; font-weight: 700; max-width: 220px; }

.score { display: flex; flex-direction: column; align-items: flex-end; min-width: 72px; cursor: pointer; }
.score__t { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; line-height: 1.05; }
.score__r { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); min-height: 13px; }
.player--leader .score__t { color: var(--gold); }
.score__t.pop { animation: pop .28s ease; }
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }
.roundbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 6px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.roundbar__now { font-weight: 700; font-size: 15px; }
.roundbar__now span { color: var(--gold); font-family: var(--mono); }
.roundbar__last { font-size: 13px; color: var(--muted); }
.roundbar__last b { color: var(--text); font-weight: 600; }

.sctl { display: flex; gap: 6px; align-items: center; }
.stepper {
  width: 40px; height: 40px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 22px; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.stepper:hover { border-color: var(--accent); }
.stepper--minus:hover { border-color: var(--danger); color: var(--danger); }
.xbtn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 18px; padding: 4px 8px; border-radius: 6px;
}
.xbtn:hover { color: var(--danger); }

.addrow { display: flex; gap: 10px; margin-top: 4px; }
.cap { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* connection dot */
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.dot.live { background: #3fd07a; box-shadow: 0 0 8px #3fd07a; }

/* ============ DRAFT ============ */
.cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 880px){ .cols { grid-template-columns: 1fr; } }

table.standings { width: 100%; border-collapse: collapse; }
.standings th, .standings td { padding: 9px 10px; text-align: left; font-size: 14px; }
.standings th {
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
  font-size: 11px; border-bottom: 1px solid var(--border);
}
.standings td { border-bottom: 1px solid var(--border); }
.standings tr:first-child td { color: var(--text); }
.standings tr.lead td { color: var(--gold); font-weight: 700; }
.standings .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.deckcell { color: var(--muted); font-size: 13px; }

.round { margin-bottom: 22px; }
.round h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent);
  margin: 0 0 10px; font-weight: 700;
}
.match {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.match.decided { border-color: var(--accent-dim); }
.match.bye { grid-template-columns: 1fr auto; color: var(--muted); }
.side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side.right { align-items: flex-end; text-align: right; }
.side .nm { font-weight: 700; }
.side .dk { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side.win .nm { color: var(--gold); }
.mscore { display: flex; align-items: center; gap: 8px; }
.gw { font-family: var(--mono); font-size: 20px; font-weight: 700; min-width: 18px; text-align: center; }
.mstep {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.mstep:hover { border-color: var(--accent); }
.mstep:disabled { opacity: .3; cursor: not-allowed; }
.vs { color: var(--muted); font-size: 12px; padding: 0 4px; }
/* declare-winner / no-result controls, spanning the full match card */
.mresult { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.mnote { grid-column: 1 / -1; text-align: center; font-size: 11px; color: var(--muted); margin-top: 2px; }
.mres { font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.mres:hover { border-color: var(--accent); }
.mres--none, .mres--clear { color: var(--muted); }
.match.noresult { opacity: .74; border-style: dashed; }

.player-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-bottom: 8px; }
.radio-row { display: flex; gap: 18px; row-gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.radio-row label { display: flex; gap: 7px; align-items: baseline; color: var(--text); font-weight: 600; cursor: pointer; }
.radio-row label input { flex: 0 0 auto; }
.nowrap { white-space: nowrap; }
hr.div { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.flash { color: var(--danger); font-size: 14px; min-height: 18px; }

/* ============ EXPANSION: rosters, commander, stats ============ */

/* small pills / tags */
.tag {
  display: inline-block; font-size: 11px; font-weight: 700; vertical-align: middle;
  padding: 2px 8px; border-radius: 6px; margin-left: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.tag--gold { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); }

/* compact inline select */
.minisel { width: auto; display: inline-block; min-width: 150px; padding: 9px 12px; }

/* Planechase (and general) on/off switch — replaces the bare checkbox */
.pctoggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pctoggle__cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pctoggle__track { position: relative; flex: 0 0 auto; width: 42px; height: 23px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); transition: background .18s ease, border-color .18s ease; }
.pctoggle__knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .2s cubic-bezier(.3,.8,.3,1), background .18s ease; }
.pctoggle__cb:checked + .pctoggle__track { background: var(--accent); border-color: var(--accent); }
.pctoggle__cb:checked + .pctoggle__track .pctoggle__knob { transform: translateX(19px); background: #fff; }
.pctoggle__cb:focus-visible + .pctoggle__track { box-shadow: 0 0 0 3px rgba(54,194,206,.4); }
.pctoggle:hover .pctoggle__track { border-color: var(--accent); }
.pcgroup { display: inline-flex; align-items: center; gap: 12px; }
.pcgroup form { margin: 0; }
.pcgroup--on { padding: 6px 10px 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }   /* when on, the toggle + planar-deck read as one unit */

/* winner banner */
.banner { border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; font-weight: 700; }
.banner--gold { background: var(--gold-dim); border: 1px solid var(--gold); color: var(--gold); }

/* even two-column layout */
.cols--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px){ .cols--even { grid-template-columns: 1fr; } }

/* small avatar (roster + commander) */
.avatar--sm { width: 36px; height: 36px; font-size: 14px; cursor: default; }
.avatar--sm:hover::after { content: none; }

/* roster rows */
.mininote { font-size: 13px; color: var(--muted); }
.rosrow { gap: 12px; }
.avataform { display: inline; }
.rosrow__main { display: flex; align-items: center; gap: 14px; color: inherit; min-width: 0; flex: 1 1 auto; text-decoration: none; }
.rosrow__main:hover { text-decoration: none; }
.rosrow__id { min-width: 0; }
.rosrow__meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.rosrow__hi { color: var(--accent); font-weight: 800; }
.rosrow__chips { display: flex; gap: 6px; flex: 0 0 auto; }
.modechip { font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.rosrow__actions { flex: 0 0 auto; }
/* profile page: clickable avatar upload */
.avataform--profile { flex: 0 0 auto; }
.avataform__pic { display: block; position: relative; cursor: pointer; border-radius: 50%; }
.avataform__pic .avatar { transition: filter .15s, box-shadow .15s; }
.avataform__pic:hover .avatar { filter: brightness(.7); box-shadow: 0 0 0 2px var(--accent); }
.avataform__hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800;
  color: #fff; opacity: 0; transition: opacity .15s; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.avataform__pic:hover .avataform__hint { opacity: 1; }
/* Tap-the-avatar menu: pick Upload or Paste-URL from a small dropdown (replaces the URL icon) */
.avamenu { position: relative; display: inline-block; }
.avamenu__sum { list-style: none; cursor: pointer; display: inline-block; border-radius: 50%; }
.avamenu__sum::-webkit-details-marker { display: none; }
.avamenu__sum::marker { content: ''; }
.avamenu__sum .avatar { transition: filter .15s, box-shadow .15s; }
.avamenu__sum:hover .avatar, .avamenu[open] .avamenu__sum .avatar { filter: brightness(.7); box-shadow: 0 0 0 2px var(--accent); }
.avamenu__panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; min-width: 172px; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 2px; }
.avamenu__item { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); padding: 9px 11px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 14px; }
.avamenu__item:hover { background: var(--surface-2); }
@media (max-width: 620px) {
  .rosrow { flex-wrap: wrap; }
  .rosrow__chips { order: 3; width: 100%; }
  .rosrow__actions { order: 2; }
  /* game cards (not the roster row): stack on phones so Open/Delete stop floating in the vertical
     centre of a tall card and the player chips get the full width instead of a squeezed column */
  .saved:not(.rosrow) { flex-wrap: wrap; align-items: flex-start; }
  .saved:not(.rosrow) .saved__main { flex-basis: 100%; }
  .saved:not(.rosrow) .saved__actions { width: 100%; justify-content: flex-end; }
  .saved:not(.rosrow) .savedmap { width: 100%; height: 88px; min-height: 0; }
  .saved:not(.rosrow) .savedmap--none { display: none; }
  /* player-picker rows: one control per line on phones (bigger targets, no side-by-side squeeze) */
  .prow--cmdr > .psel, .prow--cmdr > .dsel, .prow--cmdr > .deckNew,
  .prow--cmdr > .deckScry, .prow--cmdr > input[name="new_name"] { flex-basis: 100%; min-width: 0; }
}
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.small input { display: none; }

/* picker rows (draft + commander create forms) */
.prow { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.prow > .psel, .prow > input[name="new_name"] { flex: 1 1 150px; min-width: 130px; }
.prow > input[name="player_deck"] { flex: 1.4 1 170px; min-width: 150px; }
.prow--cmdr > .dsel, .prow--cmdr > .deckNew { flex: 1.2 1 160px; min-width: 140px; }
.prow--cmdr > .deckScry { flex: 1.2 1 160px; min-width: 140px; display: flex; gap: 6px; align-items: stretch; }
.deckScry > .deckSearch { flex: 1 1 auto; width: auto; min-width: 0; }
.prow--cmdr > .deckScry2 { flex: 1 1 100%; min-width: 0; display: flex; }
.deckScry2 > .deckSearch2 { flex: 1 1 auto; width: auto; min-width: 0; }
.deckBack { flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 9px; padding: 0 11px; cursor: pointer; font-size: 15px; }
.deckBack:hover { color: var(--text); border-color: var(--accent-2); }

/* commander game participant rows */
.cmdrrow {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; cursor: pointer;
}
.cmdrrow:hover { border-color: var(--accent); }
.cmdrrow:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cmdrrow--win { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); cursor: default; }
.cmdrrow input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }

/* stats */
.stath { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; }
.statrow { display: grid; grid-template-columns: 130px 1fr max-content; align-items: center; gap: 12px; }
.statrow--wide { grid-template-columns: minmax(130px, 40%) 1fr max-content; }
.statrow__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statrow__val { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; min-width: 44px; }
.statrow__sub { font-family: var(--sans, inherit); font-size: 11px; font-weight: 600; color: var(--muted); }
.medal { margin-right: 5px; font-size: 14px; }
.statbar { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.statbar__fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 6px; min-width: 2px;
  box-shadow: 0 0 10px -3px var(--accent); }
.grouprow { display: flex; gap: 10px; align-items: baseline; }
.grouprow .tag { margin-left: 0; }

table.wins-table { width: 100%; border-collapse: collapse; }
.wins-table th, .wins-table td { padding: 9px 10px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
.wins-table th { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.wins-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ============ landing dashboard + player icons + rename ============ */
.launch { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.evcard {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; color: inherit; flex-wrap: wrap;
}
.evcard:hover { border-color: var(--accent); text-decoration: none; }
.evcard__main { min-width: 0; flex: 1 1 260px; }
.evcard__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evcard__name { font-weight: 700; font-size: 16px; }

.evtype {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 6px; white-space: nowrap;
}
.evtype--beam { background: var(--accent-dim); color: var(--accent); }
.evtype--draft { background: #2b2450; color: #b7a3ff; }
.evtype--cmdr { background: #3a2246; color: #e2a6ff; }

/* stacked/overlapping player icons */
.iconrow { display: flex; align-items: center; }
.iconrow .picon:not(:first-child) { margin-left: -8px; }
.saved .iconrow { margin-top: 8px; }
.picon {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.picon img { width: 100%; height: 100%; object-fit: cover; }
.picon--more { font-size: 11px; background: var(--surface); }

/* inline rename disclosure */
.rename { margin-top: 10px; }
.rename > summary {
  cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600;
  list-style: none; display: inline-block; user-select: none;
}
.rename > summary::-webkit-details-marker { display: none; }
.rename > summary:hover { color: var(--text); }
.rename .addrow { max-width: 520px; }

/* full player-name list on beam game cards (small, light) */
.plist { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* ============ reassign + Scryfall deck art ============ */
.rebtn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 4px 7px; border-radius: 6px; line-height: 1;
}
.rebtn:hover { color: var(--accent); }
.reassignSel { font-size: 16px; font-weight: 700; max-width: 240px; }

/* Scryfall commander search */
.scry { position: relative; }
.scry__results {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
  max-height: 260px; overflow: auto;
}
.scry__results:empty { display: none; }   /* no border/line when there are no results */
.scry__opt { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.scry__opt:hover { background: var(--surface); color: var(--accent); }
.scry__note { padding: 8px 12px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.scry__preview { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.scry__preview img { width: 96px; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
.scry__artist { font-size: 12px; color: var(--muted); }

/* deck art thumbnails (art_crop is ~1.37:1) */
.dart { width: 58px; height: 42px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); flex: 0 0 auto; }
.dart img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dart--sm { width: 46px; height: 34px; }

/* ============ Commander seated table + turn timer ============ */
.cmdr-table {
  position: relative; width: 100%; max-width: 500px; margin: 18px auto;
  aspect-ratio: 1 / 1;
}
.timer-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46%; max-width: 210px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.timer-active { font-size: 13px; color: var(--muted); font-weight: 700;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-clock { font-family: var(--mono); font-size: clamp(30px, 12vw, 52px);
  font-weight: 800; line-height: 1; letter-spacing: 1px; color: var(--text); }
.timer-btn { width: 100%; white-space: normal; font-size: 13px; padding: 10px 8px; }

.seatbox {
  position: absolute; transform: translate(-50%, -50%);
  width: 96px; text-align: center; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.seatbox--active {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim), 0 0 14px var(--accent-dim);
  transform: translate(-50%, -50%) scale(1.06);
}
.seatbox .avatar { width: 34px; height: 34px; font-size: 14px; }
.seatbox__name { font-size: 12px; font-weight: 700; max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seatbox__deck { font-size: 10px; color: var(--muted); max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seatbox__time { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.seatbox--active .seatbox__time .t { color: var(--accent); font-weight: 700; }

/* turn order / seating editor */
.orderpanel { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; }
.orderpanel > summary { cursor: pointer; font-weight: 700; }
/* seating plan: a compact top-down table you drag players around */
.seatplan { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  max-width: 540px; margin: 0 auto; }
.seatplan__row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 64px;
  align-items: center; width: 100%; border-radius: 10px; border: 1.5px dashed transparent;
  transition: border-color .12s, background .12s; }
.seatplan__row.is-over { border-color: var(--accent); background: rgba(255,255,255,.05); }
.seatplan__table { align-self: stretch; height: 30px; border-radius: 7px;
  background: radial-gradient(ellipse at center, var(--surface) 0%, #12141b 100%);
  border: 2px solid var(--border); display: grid; place-items: center;
  color: var(--muted); font-weight: 800; letter-spacing: .3em; font-size: 10px; }
.seattoken { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 6px 6px; width: 78px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none; }
.seattoken .avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.seattoken:active { cursor: grabbing; }
.seattoken.is-dragging { opacity: .3; }
.seattoken.is-first { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.seattoken__name { font-size: 11px; font-weight: 700; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seattoken__crown { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); font-size: 11px; cursor: pointer; padding: 0;
  display: grid; place-items: center; opacity: .45; transition: opacity .12s, box-shadow .12s, background .12s; z-index: 2; }
.seattoken__crown:hover { opacity: 1; }
.seattoken.is-first .seattoken__crown { opacity: 1; background: var(--gold); box-shadow: 0 0 10px -2px var(--gold); }
.seattoken--drag { position: fixed; z-index: 200; pointer-events: none; margin: 0; cursor: grabbing;
  box-shadow: 0 16px 40px rgba(0,0,0,.6); transform: scale(1.05); }


/* ============ player chips on the BeamNG game list ============ */
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px 3px 3px;
}
.pchip__av {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  background: var(--accent-dim); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.pchip__av img { width: 100%; height: 100%; object-fit: cover; }
.pchip__name { font-size: 13px; color: var(--text); }

/* ============ reassign click-menu ============ */
.reassign-menu {
  position: fixed; z-index: 200; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); max-height: 320px; overflow: auto;
}
.reassign-menu__hd { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; padding: 4px 8px 6px; }
.reassign-opt { padding: 8px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.reassign-opt:hover { background: var(--surface); color: var(--accent); }
.reassign-opt--cur { color: var(--accent); }
.reassign-opt--new { border-top: 1px solid var(--border); margin-top: 4px; }
.reassign-input { width: 100%; margin-top: 4px; }

/* ============ player profile stat cards ============ */
.statcard { text-align: center; }
.statcard__big { font-family: var(--mono); font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1; }
.statcard__lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 8px; }
.heatmap { display: flex; flex-direction: column; gap: 5px; }
.heatmap__row { display: grid; grid-template-columns: 92px repeat(4, 1fr); gap: 5px; align-items: stretch; }
.heatmap__month { font-size: 13px; color: var(--muted); display: flex; align-items: center; white-space: nowrap; }
.heatmap__cell { display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 8px; background: var(--surface-2); font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); }
.heatmap__cell--head { background: none; color: var(--muted); font-family: inherit; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-height: 0; }
.heatmap__cell--total { background: var(--surface); color: var(--accent); }
@media (max-width: 620px) { .heatmap__row { grid-template-columns: 64px repeat(4, 1fr); } .heatmap__cell { font-size: 12px; min-height: 30px; } .heatmap__month { font-size: 11px; } }
.gametile { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.gametile > summary { list-style: none; cursor: pointer; }
.gametile > summary::-webkit-details-marker { display: none; }
.gametile__sum { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.gametile__sum .saved__title, .gametile__sum .saved__meta { display: block; }
.gametile__chev { flex: 0 0 auto; color: var(--muted); transition: transform .18s; font-size: 18px; }
.gametile[open] .gametile__chev { transform: rotate(180deg); }
.gametile__body { padding: 12px 13px 13px; border-top: 1px solid var(--border); }
.oneoff > summary { list-style: none; cursor: pointer; padding: 2px 0; }
.oneoff > summary::-webkit-details-marker { display: none; }
.oneoff > summary::before { content: "▸"; color: var(--muted); margin-right: 8px; display: inline-block; transition: transform .15s; }
.oneoff[open] > summary::before { transform: rotate(90deg); }

/* ============ Commander SETUP page ============ */
.bigcta { display: inline-block; margin-top: 16px; font-size: 16px; padding: 12px 22px; }
.setup-player {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.setup-player__ctl { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.newdeck { position: relative; }
.newdeck > summary { list-style: none; cursor: pointer; }
.newdeck > summary::-webkit-details-marker { display: none; }
.newdeck__form {
  margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; width: 260px; max-width: 80vw;
}

/* ============ Commander PLAY page (table) ============ */
.play-wrap { max-width: 1200px; }
.play-topbar { justify-content: space-between; margin-bottom: 10px; }
.table-play {
  display: flex; flex-direction: column; gap: var(--gap); min-height: 0;
  --gap: clamp(14px, 2vw, 24px);
  --card-max: 580px;   /* cards stop growing past this; the row centers the group */
}
/* Rows are CSS grid, not flex: 1fr columns are a hard fraction of the row's real width, so
   card width scales with player count and can never fall back to content sizing (which is what
   flex-basis kept doing here). width:100% forces the row full-width regardless of the stretch chain. */
.table-row { width: 100%; box-sizing: border-box; align-items: stretch; gap: var(--gap); min-width: 0; }
.table-row--top, .table-row--bottom { flex: 1 1 0; min-height: 0; }
/* bottom row: N equal columns capped at --card-max, centered as a group. direction:rtl seats
   turn order right→left (first seat on the right); cards reset to ltr. */
.table-row--bottom { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, var(--card-max))); justify-content: center; direction: rtl; }
.table-row--bottom > .pbox { direction: ltr; }
/* b69: ...and a team's heads (2HG giants, the Archenemy's allies) sit one level deeper, inside the
   .teamwrap - they inherited rtl, so their text ran backwards ("Damage ⚔", "turns 0 · 0:00") */
.table-row--bottom > .teamwrap > .pbox { direction: ltr; }
/* top row: cards sized to match the bottom card width (whichever of the cap / equal-share is
   smaller), centered when there are fewer of them (3/5-player).
   Rotate each top box individually so it faces the far player. */
.table-row--top { display: grid; grid-auto-flow: column; justify-content: center;
  grid-auto-columns: minmax(0, min(var(--card-max), calc((100% - (var(--cols, 1) - 1) * var(--gap)) / var(--cols, 1)))); }
.table-row--top .pbox { transform: rotate(180deg); box-shadow: 0 -8px 24px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35); }
.table-row--top .pbox--active { border-color: var(--accent); box-shadow: 0 -8px 24px rgba(0,0,0,.5), 0 0 22px -5px var(--accent); }
.table-mid { display: grid; place-items: center; }

.bigtimer {
  position: relative; overflow: hidden; pointer-events: auto;
  width: min(36vw, 224px); height: min(36vw, 224px); border-radius: 50%;
  background: radial-gradient(circle at 50% 118%, var(--accent-2), transparent 62%),
              radial-gradient(circle at 50% 38%, var(--surface-2), var(--surface));
  border: 2px solid var(--accent); color: var(--text); cursor: pointer;
  display: grid; place-items: center; transition: transform .08s, box-shadow .2s;
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px var(--accent-2), 0 0 24px -10px var(--accent);
  -webkit-tap-highlight-color: transparent;
}
.bigtimer:focus { outline: none; }
@media (hover: hover) {
  .bigtimer:hover { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px var(--accent), 0 0 28px -8px var(--accent); }
}
.bigtimer:active { transform: scale(.98); }
.bigtimer__art { position: absolute; inset: 0; border-radius: 50%; opacity: .32; pointer-events: none;
  background-size: cover; background-position: center top; transition: opacity .3s ease, transform .3s ease; }
.bigtimer__inner { position: relative; z-index: 1; display: grid; place-items: center; gap: 2px; transition: transform .3s ease; text-align: center; padding: 0 6px; width: 82%; max-width: 82%; box-sizing: border-box; }
.bigtimer__active { font-size: 15px; font-weight: 800; color: var(--accent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bigtimer__turn { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin: 1px 0 0; }
.bigtimer__clock { font-family: var(--mono); font-size: clamp(34px, 8vw, 54px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bigtimer__hint { font-size: 10.5px; color: var(--muted-2); }

.pbox {
  position: relative; overflow: hidden;
  background: var(--surface);
  /* themed border: the theme's secondary accent, softened so only the active seat pops */
  border: 3px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35);
  min-width: 0; min-height: 120px;
}
.pbox__bg { position: absolute; inset: 0; background-size: cover; background-position: center top; z-index: 0; }
.pbox__bg::after { content: ''; position: absolute; inset: 0; background: rgba(13, 15, 20, .66); }
.pbox__body {
  position: relative; z-index: 1; padding: 14px 18px; container-type: size;
  display: flex; flex-direction: column; justify-content: space-evenly; gap: 4px; height: 100%;
}
.pbox--active { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 22px -5px var(--accent); }
.pbox__head { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; justify-content: center; }
.pbox__head .avatar { width: clamp(34px, 13cqh, 58px); height: clamp(34px, 13cqh, 58px); font-size: clamp(14px, 5cqh, 24px); }
.pbox__name { font-weight: 700; font-size: clamp(16px, 7cqh, 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pc, var(--text)); }
.pbox__conds { display: flex; gap: 6px; align-items: center; justify-content: center; flex: 0 0 auto; min-height: clamp(15px, 5cqh, 24px); margin-top: clamp(5px, 1.8cqh, 10px); }
/* player identity moved to the bottom-left, small — commander title lives in the top pill now */
.pbox__who { position: absolute; left: 6px; bottom: 6px; z-index: 6; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 34%; }
.pbox__who .avatar { width: 30px; height: 30px; font-size: 13px; flex: 0 0 auto; cursor: default; }
.pbox__whoname { font-size: 13px; font-weight: 600; color: var(--pc, var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* life */
.pbox__life { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5cqh, 22px); margin: 0; min-width: 0; position: relative; }
.pbox__lifeval { font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 2ch; font-size: clamp(34px, min(39cqh, 34cqw), 138px); font-weight: 800; text-align: center; line-height: 1; padding: 0 4px; cursor: pointer;
  min-width: 0; max-width: 100%; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pbox__life .lifebtn, .pbox__lifeval { position: relative; z-index: 1; }
.pbox__inf { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none;
  font-weight: 900; line-height: 1; font-size: clamp(56px, 62cqh, 190px); color: var(--accent); opacity: .2; z-index: 0; }
.pbox--infinite .pbox__inf { display: flex; }
.lifebtn {
  background: var(--surface-2); border: 2px solid var(--accent-2); color: var(--accent);
  width: clamp(40px, min(19cqh, 15cqw), 94px); height: clamp(40px, min(19cqh, 15cqw), 94px); border-radius: 50%; display: grid; place-items: center;
  font-size: clamp(15px, min(6.4cqh, 5cqw), 34px); font-weight: 700; cursor: pointer; flex: 0 0 auto;
  transition: border-color .15s, transform .08s;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lifebtn:hover { border-color: var(--accent); }
.lifebtn:active { transform: scale(.94); }

/* counters toggle + panel */
.pbox__toggle {
  align-self: center; max-width: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(13,15,20,.62); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 14px; transition: border-color .14s, box-shadow .14s;
}
.pbox__toggle:hover, .pbox__toggle:focus-within { border-color: var(--accent); box-shadow: 0 0 14px -4px var(--accent); }
.pbox__toggle-half { background: none; border: 0; color: var(--text); cursor: pointer; text-align: center;
  padding: clamp(9px, 3cqh, 16px) clamp(26px, 6.5cqh, 44px); font-size: clamp(13px, 4.2cqh, 19px); font-weight: 700; transition: background .12s; }
.pbox__toggle-half:hover { background: rgba(255,255,255,.07); }
.pbox__toggle-half--dmg { border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 12px 12px 0 0; }
.pbox__toggle-half--cnt { border-radius: 0 0 12px 12px; }
.pbox__toggle:active { transform: scale(.97); }
.pbox__panel {
  position: absolute; inset: 0; z-index: 6; display: none;
  flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto;
  background: rgba(16, 18, 24, .97); border: 1px solid var(--border); border-radius: var(--radius);
}
.pbox--tools .pbox__panel { display: flex; }
.pbox__panelclose {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  width: 34px; height: 34px; border-radius: 8px; font-size: 15px; cursor: pointer; line-height: 1;
}
/* paged tools panel: page 1 = commander damage, page 2 = the other counters + modifiers */
.panelpager { display: flex; align-items: center; gap: 6px; }
.pagerbtn { flex: 1 1 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 8px 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pagerbtn.is-active { color: var(--text); border-color: var(--accent); box-shadow: 0 0 12px -3px var(--accent); }
.panelpager .pbox__panelclose { position: static; flex: 0 0 auto; }
.panelpage { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.panelpage[hidden] { display: none; }
.cmddmg { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.cmddmg__cell {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cmddmg__cell--lethal { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.cmddmg__who { font-size: 13px; color: var(--muted); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmddmg__ctl { display: flex; align-items: center; gap: 7px; }
.cmddmg__val { font-family: var(--mono); font-size: 19px; font-weight: 700; min-width: 24px; text-align: center; }
.cmddmg__cell--lethal .cmddmg__val { color: var(--danger); }
.cdbtn, .cnbtn {
  background: var(--surface-2); border: 2px solid var(--accent-2); color: var(--accent);
  border-radius: 50%; width: 30px; height: 30px; font-size: 16px; cursor: pointer; line-height: 1;
  transition: border-color .12s, transform .08s;
}
.cdbtn:hover, .cnbtn:hover { border-color: var(--accent); }
.cdbtn:active, .cnbtn:active { transform: scale(.94); }
.counters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.counter { display: flex; align-items: center; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 5px 9px; justify-content: space-between; }
.counter--lethal { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.counter__lbl { font-size: 15px; flex: 0 0 auto; }
.counter__val { font-family: var(--mono); font-size: 17px; font-weight: 700; min-width: 20px; text-align: center; }
.counter--lethal .counter__val { color: var(--danger); }

.pbox__time { font-family: var(--mono); font-size: 14px; color: var(--muted-2); text-align: center; }
.pbox--active .pbox__time .t { color: var(--accent); font-weight: 700; }

.play-controls { justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.endgame > summary, .play-controls form { display: inline-block; }
.endgame > summary { list-style: none; }
.endgame > summary::-webkit-details-marker { display: none; }

@media (max-width: 620px) {
  .table-play { --gap: 9px; }
  .pbox { min-height: 110px; }
  .pbox__body { padding: 10px; gap: 10px; }
  .pbox__lifeval { font-size: clamp(38px, 12vw, 64px); min-width: 0; }
  .lifebtn { width: 44px; height: 44px; font-size: 16px; }
  .pbox__name { font-size: 15px; }
  .cdbtn, .cnbtn { width: 30px; height: 30px; font-size: 18px; }
  .bigtimer { width: min(52vw, 220px); height: min(52vw, 220px); }
}

/* ============ login ============ */
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 20px; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 28px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.login-card .sub { margin-bottom: 20px; }
.login-card input[type=password] { padding: 13px 14px; font-size: 15px; margin-bottom: 14px; }
.login-card .btn { width: 100%; padding: 13px; font-size: 15px; }
.navout {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 7px 14px; border-radius: 999px; line-height: 1;
}
.navout:hover { color: var(--text); border-color: var(--accent-dim); background: var(--surface); }

/* ============ iPad / standalone-PWA behavior ============ */
html, body { -webkit-text-size-adjust: 100%; }
button, a, summary, input, select,
.lifebtn, .cdbtn, .cnbtn, .stepper, .rebtn, .bigtimer, .btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* no double-tap zoom / 300ms delay on controls */
}
/* ...but `manipulation` still lets iOS claim a touch for panning, and the moment it does it
   withholds the click and fires pointercancel — the ring depresses and nothing happens. These
   are the board's hot controls, they never need to pan, so take the gesture off the table. */
.lifebtn, .bigtimer, .cdbtn, .cnbtn, .stepper, .teamwrap__btn, .pbox__lifeval, .condbtn {
  touch-action: none;
}

/* respect notch, rounded corners and the home indicator when launched standalone */
.topbar__inner {
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.wrap {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.play-controls { padding-bottom: env(safe-area-inset-bottom); }

/* the commander table is all taps — block text selection / long-press callouts */
.play-wrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* hide the top nav on the play page for max table space (in fullscreen or installed to home
   screen); other pages keep the nav. Esc / the iOS grey ✕ exits fullscreen. */
.is-fullscreen .topbar { display: none; }
body.play-mode .topbar { display: none; }   /* chrome-free play screen (desktop + standalone); ← Setup is the way back */
.is-fullscreen .play-wrap,
body.standalone.play-mode .play-wrap { padding-top: max(8px, env(safe-area-inset-top)); }
.cmddmg__cap { font-size: 13px; color: var(--muted-2); text-align: center; }

/* big "X's Turn" announcement over the middle of the screen when turns flip */
.turnbanner { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  box-sizing: border-box; padding-top: max(0px, calc(2 * var(--board-cy, 50vh) - 100vh));
  pointer-events: none; opacity: 0; }
.turnbanner.show { animation: turnpop 3s ease forwards; }
@keyframes turnpop {
  0% { opacity: 0; transform: scale(.86); }
  14% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
.turnbanner__txt { font-size: clamp(38px, 8.5vw, 96px); font-weight: 900; line-height: 1.05;
  color: var(--text); text-align: center; padding: 20px 44px; letter-spacing: .005em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 86%, var(--accent)), var(--surface));
  border: 2px solid color-mix(in srgb, var(--accent) 72%, var(--border)); border-radius: 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 0 6px rgba(0,0,0,.28); }
.turnbanner__txt--flip { transform: rotate(180deg); }

/* long-press the life total -> type an amount, add or subtract */
.lifeentry { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.lifeentry[hidden] { display: none; }
.lifeentry__card { background: var(--surface); border: 1px solid var(--accent); border-radius: 16px; padding: 18px;
  width: min(320px, 88vw); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lifeentry__card--flip { transform: rotate(180deg); }
.lifeentry__who { font-weight: 800; font-size: 16px; text-align: center; color: var(--accent); }
.lifeentry__num { font-family: var(--mono); font-size: 34px; font-weight: 800; text-align: center; padding: 10px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); width: 100%; }
.lifeentry__btns { display: flex; gap: 10px; }
.lifeentry__btns .btn { flex: 1 1 0; justify-content: center; }
.lifeentry__cancel { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px; }
.lifeentry__set { justify-content: center; }
.lifeentry__inf { background: var(--surface-2); border: 1px solid var(--accent-2); color: var(--muted);
  border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.lifeentry__inf.is-on { background: var(--accent); color: #0c0d11; border-color: var(--accent); }

/* Play page fills the real viewport and never scrolls the page. The top bar takes its
   natural height; the table flexes into whatever's left, so the UI always fits on screen
   (dvh dodges the iOS toolbar-height bug). A JS-added .play-mode class drives this so it
   works on every engine regardless of :has() support. */
html.play-mode { overflow: hidden; background: #0d0f14; }
body.play-mode { height: 100dvh; overflow: hidden; overscroll-behavior: none; display: flex; flex-direction: column; background: transparent; }
/* the base .wrap has 80px bottom padding for scrolling pages — kill it here so the table
   reaches the bottom, and use flex-basis 0 so the flex rows get a definite height.
   max-width is uncapped in play-mode so the table fills the whole screen (bigger cards). */
body.play-mode .play-wrap { height: 100dvh; width: 100%; max-width: none; margin: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  padding: 6px max(8px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); }
body.play-mode .play-topbar { flex: 0 0 auto; }
body.play-mode .table-play { flex: 1 1 0; min-height: 0; width: 100%; }
body.play-mode .table-row { min-height: 0; }

/* ===== stats v2: tabs, metrics grid, color pips, donut, records ===== */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 16px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; }
.tab {
  background: none; border: none; color: var(--muted); font: inherit; font-weight: 700;
  font-size: 14px; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tabpane { display: none; }
.tabpane.is-active { display: block; }

.pip {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.pip + .pip { margin-left: 2px; }
.pip--W { background: #efe4bf; } .pip--U { background: #3f9fe0; } .pip--B { background: #9585a8; }
.pip--R { background: #e05a3f; } .pip--G { background: #4faa6a; } .pip--C { background: #5a6273; }
.pipcell { white-space: nowrap; }
.pipbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pipchip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}

.donutwrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.donut { width: 148px; height: 148px; flex: 0 0 auto; }
.donut__num { fill: var(--text); font-family: var(--mono); font-size: 17px; font-weight: 800; text-anchor: middle; }
.donut__lbl { fill: var(--muted); font-size: 6.5px; text-transform: uppercase; letter-spacing: .12em; text-anchor: middle; }
.piplegend { flex: 1 1 200px; min-width: 170px; display: flex; flex-direction: column; gap: 9px; }
.piprow { display: flex; align-items: center; gap: 10px; }
.piprow__name { flex: 1; }
.piprow__val { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.piprow.is-zero { opacity: .38; }

.rec { text-align: center; position: relative; overflow: hidden; }
.rec::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .65; }
.rec__ico { font-size: 19px; line-height: 1; margin-bottom: 8px; }
.rec__lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin-bottom: 12px; min-height: 2.4em; display: flex; align-items: center; justify-content: center;
}
.rec__num { font-family: var(--mono); font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
.rec__num--bad { color: var(--danger); }
.rec__num--good { color: #4faa6a; }
.edge { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border); }
.edge__pct { font-family: var(--mono); font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
.edge__lbl { font-size: 13px; color: var(--text); line-height: 1.35; }
.rec__who { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* grid cards must not inherit the stacked-card top margin — this was pushing every
   right-hand column card down 14px (the "boxes don't line up" bug). */
.cols > .card + .card,
.metrics > .card + .card { margin-top: 0; }
/* equal-height cards per row so paired boxes align top AND bottom */
.cols--even { align-items: stretch; }
.metrics { align-items: stretch; }

/* clickable usernames + chips-as-links */
.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(139,147,167,.5); }
.plink:hover { color: var(--accent); border-bottom-color: var(--accent); }
a.pchip { text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
a.pchip:hover { border-color: var(--accent); background: var(--surface); }
a.pchip:hover .pchip__name { color: var(--accent); }
.decklink { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.decklink:hover { text-decoration: underline; }

/* moxfield imported card list */
.cardline { display: grid; grid-template-columns: 34px 1fr; gap: 8px; font-size: 14px; padding: 2px 0; }
.cardline__q { font-family: var(--mono); color: var(--muted); text-align: right; }

/* draft booster/set picker */
.chaosline { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; cursor: pointer; }
.chaosline > input { flex: 0 0 auto; margin-top: 3px; }
.setpicks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 620px) { .setpicks { grid-template-columns: 1fr; } }
.setpick { display: flex; flex-direction: column; gap: 5px; }
.setpicks:not(.is-chaos) { grid-template-columns: 1fr; }
.draftsets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* commander-tax counter accent */
.counter--tax { border-color: var(--gold-dim); }
.counter--tax .counter__lbl { color: var(--gold); }

/* in-game achievement toast (positioned in viewport coords by JS, near the player) */
.achtoast {
  position: fixed; transform: translateX(-50%);
  z-index: 60; min-width: 190px; max-width: 260px; text-align: center;
  background: linear-gradient(180deg, #2a2410, var(--surface-2));
  border: 1px solid var(--gold); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.7), 0 0 0 1px var(--gold-dim);
  animation: achpop .45s cubic-bezier(.2,1.3,.5,1) both; pointer-events: none;
}
.achtoast--out { animation: achfade .48s ease forwards; }
.achtoast__hd { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.achtoast__name { display: block; font-size: 15px; font-weight: 800; color: var(--text); margin-top: 3px; }
.achtoast__desc { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
@keyframes achpop { 0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.9); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes achfade { to { opacity: 0; transform: translateX(-50%) translateY(-6px); } }

/* profile achievement badges */
.badgehd { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 8px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }   /* (b131: 150 -> 175 - the families' names) */
.badge {
  position: relative;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.badge__ic { font-size: 20px; line-height: 1; }
.badge__nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge--earned { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim); cursor: pointer; }
.badge--earned .badge__nm { color: var(--text); }
.badge--locked { opacity: .82; cursor: pointer; }
.badge:focus { outline: none; }
.badge--locked .badge__ic { filter: grayscale(1); opacity: .55; }
.badge--locked .badge__nm { color: var(--muted); }
/* goal + progress tooltip — lives on <body>, positioned by JS, clamped to the viewport */
.badgetip {
  position: fixed; z-index: 9999; min-width: 190px; max-width: 250px;
  display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45); pointer-events: none;
}
.badgetip__nm { font-size: 13px; font-weight: 700; color: var(--text); }
.badgetip__desc { font-size: 11px; color: var(--muted); line-height: 1.3; }
.badgetip__prog { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.badgetip__prog span { display: block; height: 100%; background: var(--gold-dim); border-radius: 3px; min-width: 2px; }
.badgetip__pct { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* b131: badge families - one card a family of tiers: its top tier, Lv n / N, the bar to the next; the popover lists every tier */
.badge--fam { align-items: center; }
.badge__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.badge__lv { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge__lv b { color: var(--text); font-weight: 800; }
.badge__bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.badge__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.badge--locked .badge__bar i { background: var(--muted); opacity: .6; }
.badge--max { box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(232, 193, 90, .25); }
.badge__anc { position: absolute; top: -90px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.badgetip { max-width: 300px; }
.badgetip__lvl { font-size: 11px; font-weight: 800; color: var(--gold); margin-left: 4px; }
/* b139: the Discord feed's webhook per kind, and its preview - a post as Discord shows it (its dark theme, whatever the portal's) */
.dc-kindrow { display: flex; flex-direction: column; gap: 4px; }
.dc-own { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-left: 26px; }
.dc-own input[type=password] { flex: 1 1 260px; min-width: 0; }
.dc-own__on code, .dc-on code { overflow-wrap: anywhere; word-break: break-all; }   /* (a webhook's 18-digit id on a phone) */
.dc-prevk { border-top: 1px solid var(--border); padding: 8px 0; }
.dc-prevk > summary { cursor: pointer; }
.dcmsg { display: flex; gap: 12px; background: #313338; color: #dbdee1; border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.375; margin: 10px 0; text-align: left; }
.dcmsg__av { width: 40px; height: 40px; border-radius: 50%; background: #5865f2; display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; }
.dcmsg__main { min-width: 0; flex: 1; }
.dcmsg__hd { margin-bottom: 4px; }
.dcmsg__hd b { color: #f2f3f5; font-weight: 600; }
.dcmsg__app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; border-radius: 3px; padding: 1px 4px; vertical-align: 1px; }
.dcmsg__when { color: #949ba4; font-size: 12px; margin-left: 4px; }
.dcemb { background: #2b2d31; border-left: 4px solid #5865f2; border-radius: 4px; padding: 8px 16px 14px 12px; max-width: 520px; }
.dcemb__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.dcemb__title { color: #f2f3f5; font-weight: 600; font-size: 16px; margin-top: 8px; }
.dcemb__desc { margin-top: 8px; overflow-wrap: anywhere; }
.dcemb__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dcemb__f { grid-column: 1 / -1; min-width: 0; }
.dcemb__f.is-inline { grid-column: auto; }
.dcemb__fn { color: #f2f3f5; font-weight: 600; margin-bottom: 2px; }
.dcemb__fv { overflow-wrap: anywhere; }
.dcemb__thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; margin-top: 8px; }
.dcemb__foot { color: #b5bac1; font-size: 12px; margin-top: 8px; }
.dcemb a { color: #00a8fc; text-decoration: none; }
.dcemb code { background: #1e1f22; border-radius: 3px; padding: 0 3px; font-size: 85%; }
[data-btip] { cursor: pointer; }   /* b138 (the review): Safari makes a tap a click only on something clickable - the card's spans too */
.beamev__hand { color: var(--gold); font-weight: 600; }   /* b138: a score changed by hand, on the board's events card */
.badgetip__sub { font-size: 10.5px; font-weight: 700; color: var(--gold); letter-spacing: .02em; margin-top: -3px; }   /* b138: a tier's family, Lv i/n */
.badgetip__tiers { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; border-top: 1px solid var(--border); padding-top: 6px; }
.badgetip__t { display: flex; gap: 7px; align-items: flex-start; opacity: .6; }
.badgetip__t.is-ok { opacity: 1; }
.badgetip__t b { display: block; font-size: 12px; color: var(--text); }
.badgetip__t small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.badgetip__te { width: 18px; text-align: center; font-size: 13px; line-height: 1.2; flex-shrink: 0; }
/* b131, Adam: "a modern gaming profile: hero (levels/XP up top), achievements showcase near top ... long tables collapsed" */
.herotag { color: var(--text); font-style: italic; }
.beamtag { color: var(--text); font-style: italic; }   /* b137: a BeamNG catchphrase (the profile's BeamNG block, a board's winner) */
.row > .beamtag { min-width: 0; margin: 0 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {                            /* (a phone: the catchphrase a line of its own under the header) */
  .bnhead { flex-wrap: wrap; }
  .bnhead > .beamtag { order: 3; flex: 1 0 100%; margin: 4px 0 0; white-space: normal; }
}
.herolv { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.herolv__it { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: baseline; min-width: 150px;
  padding: 6px 10px 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); text-decoration: none; color: inherit; }
.herolv__lab { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.herolv__n { font-size: 20px; font-weight: 900; line-height: 1; color: var(--text); }
.herolv__t { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herolv__bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 5px; }
.herolv__bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.herolv__it--overall { border-color: rgba(232, 193, 90, .45); }
.herolv__it--overall .herolv__n, .herolv__it--overall .herolv__t { color: #e8c15a; }
.herolv__it--overall .herolv__bar i { background: linear-gradient(90deg, #e8c15a, #f0d98a); }
.herolv__it--magic .herolv__bar i { background: linear-gradient(90deg, #7b6cf6, #a99bff); }
.herolv__it--beam .herolv__bar i { background: linear-gradient(90deg, #e0733f, #f0a06a); }
.showcase { margin-top: 16px; padding: 12px 14px; }
.showcase__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.showcase__fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.showfam { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 9px; row-gap: 2px; align-items: center;
  padding: 9px 11px; border-radius: 11px; border: 1px solid var(--gold-dim); background: linear-gradient(160deg, rgba(232,193,90,.10), var(--surface-2) 55%);
  text-decoration: none; color: inherit; }
.showfam__ic { grid-row: 1 / 3; font-size: 26px; line-height: 1; }
.showfam__nm { font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showfam__lv { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showfam .badge__bar { grid-column: 1 / -1; margin-top: 5px; }
.showcase__new { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.newchip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; white-space: nowrap; }
.newchip:hover, .showfam:hover { border-color: var(--gold); }
/* b131: the session page's night - highlights, a card a driver, the courses, maps, modes, cars */
.nighthero { padding: 12px 14px; }
.nighthero__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nighthi { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.nighthi__it { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 1px; align-items: baseline; padding: 9px 11px; border-radius: 11px;
  border: 1px solid var(--border); background: linear-gradient(160deg, rgba(232,193,90,.08), var(--surface-2) 60%); }
.nighthi__e { grid-row: 1 / 4; font-size: 22px; line-height: 1; align-self: center; }
.nighthi__l { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nighthi__v { font-size: 17px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.nighthi__who { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drvcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }
.drvcard { padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; margin: 0; }
.drvcard--top { border-color: var(--gold-dim); box-shadow: inset 0 0 0 1px var(--gold-dim), 0 0 18px rgba(232, 193, 90, .12); }
.drvcard__hd { display: flex; gap: 10px; align-items: center; }
.drvcard__rank { width: 22px; text-align: center; font-weight: 900; color: var(--muted); }
.drvcard--top .drvcard__rank { color: var(--gold); }
.drvcard__nm { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drvcard__xp { color: var(--gold); font-weight: 800; font-size: 12px; white-space: nowrap; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--gold-dim); }
.drvcards > .drvcard { margin: 0; }
.drvcard__sub { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; margin-top: 2px; white-space: nowrap; }
.drvcard__nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.drvcard__nums span { display: flex; flex-direction: column; padding: 5px 2px; border-radius: 8px; background: var(--surface-2); }
.drvcard__nums b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.drvcard__nums b i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.drvcard__nums small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.drvcard__best { display: flex; flex-direction: column; gap: 3px; }
.drvcard__best > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drvcard__badges { display: flex; flex-wrap: wrap; gap: 4px; font-size: 17px; }
.drvcard__badges a { text-decoration: none; }
.nightgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: start; }
.nightgrid > .card { margin: 0; }
.nightgrid > * { min-width: 0; }                      /* (b137: a long car name never pushes the grid wider than the page) */
.nightcar { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 0; white-space: nowrap; }
.nightcar .carname { min-width: 0; flex: 0 1 auto; }
.nightcar > .muted { flex: 0 0 auto; }
/* b137: the session page's course bests - a row a course: the name and the best on one line, who and the car under them */
.cbests { padding: 12px 14px 6px; }
.cbest { padding: 8px 0; border-top: 1px solid var(--border); min-width: 0; }
.cbests > label + .cbest { border-top: 0; }
.cbest__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.cbest__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.cbest__v { flex: 0 0 auto; white-space: nowrap; font-family: var(--mono); font-size: 14px; }
.cbest__sub { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; font-size: 12px; color: var(--muted); }
.cbest__who { flex: 0 0 auto; color: var(--muted-2); font-weight: 600; }
.cbest__car { display: flex; min-width: 0; }
.cbest__car .carname { min-width: 0; }
@media (max-width: 760px) { .nightgrid { grid-template-columns: 1fr; } }
.statfold { margin-top: 10px; }
.statfold > summary { cursor: pointer; list-style: none; display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; font-weight: 700; }
.statfold > summary::-webkit-details-marker { display: none; }
.statfold > summary::before { content: "▸"; color: var(--muted); }
.statfold[open] > summary::before { content: "▾"; }

/* XP / level bars (player profile) */
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 4px 0 8px; }
.lvl { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 12px 14px; }
.lvl__top { display: flex; justify-content: space-between; align-items: baseline; }
.lvl__lab { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.lvl__num { font-size: 13px; font-weight: 800; color: var(--text); }
.lvl__title { font-size: 15px; font-weight: 800; margin: 2px 0 8px; }
.lvl__bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.lvl__bar span { display: block; height: 100%; border-radius: 6px; background: var(--accent); transition: width .5s ease; }
.lvl__xp { font-size: 11px; color: var(--muted); margin-top: 6px; }
.lvl--overall .lvl__bar span { background: linear-gradient(90deg, #e8c15a, #f0d98a); }
.lvl--overall .lvl__title { color: #e8c15a; }
.lvl--magic .lvl__bar span { background: linear-gradient(90deg, #7b6cf6, #a99bff); }
.lvl--magic .lvl__title { color: #a99bff; }
.lvl--beam .lvl__bar span { background: linear-gradient(90deg, #e0733f, #f0a06a); }
.lvl--beam .lvl__title { color: #f0a06a; }
.lvlpill { font-size: 11px; font-weight: 800; color: var(--bg); background: var(--gold); border-radius: 999px; padding: 1px 8px; vertical-align: middle; margin-left: 6px; }
.ach-clear { margin-top: 14px; }

/* deck / cube card view (Moxfield-style: list or visual, grouped by type) */
.deckwrap { display: flex; flex-direction: column; }
.deckcards { margin: -2px 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; background: var(--surface-2); }
.cv__hd { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.cv__empty { font-size: 13px; color: var(--muted); padding: 6px 2px; }
.cv__ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg__b { background: var(--surface); color: var(--muted); border: none; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.seg__b.is-on { background: var(--accent); color: #0c0d11; }
.cv__sort { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.cv__sortsel { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 13px; }
.cv__filter { width: 100%; margin: 0 0 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.dcg { margin-bottom: 12px; }
.dcg__hd { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 4px 0 6px; }
.dcg__hd span { color: var(--muted); font-weight: 600; }
.gsortseg { margin-left: auto; display: inline-flex; gap: 4px; }
.gsort { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.gsort.is-on { color: var(--accent); border-color: var(--accent); }
.dcg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dcard { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 63/88; background: var(--surface); border: 1px solid var(--border); padding: 0; }
.dcard__a { display: block; width: 100%; height: 100%; }
.dcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard--cmd { outline: 2px solid var(--gold); outline-offset: -2px; }
.dcard__qty { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.8); color: #fff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 0 5px; }
.dcard__noimg { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 6px; font-size: 11px; color: var(--muted); }
.dcard__check { position: absolute; top: 4px; left: 4px; z-index: 3; background: rgba(13,15,20,.85);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px; display: grid; place-items: center; cursor: pointer; }
.dcard__check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; display: block; }
.dcard--pick.is-cmd .dcard__check { border-color: var(--gold); }
.dcard__flip { position: absolute; bottom: 4px; right: 4px; z-index: 3; background: rgba(13,15,20,.85);
  border: 1px solid var(--border); color: var(--text); border-radius: 7px; width: 28px; height: 28px;
  font-size: 14px; line-height: 1; cursor: pointer; }
.dcard__flip:hover, .dcard__flip.is-flipped { border-color: var(--accent); color: var(--accent); }
.dcard__cmd { position: absolute; bottom: 4px; left: 4px; font-size: 15px; opacity: 0; filter: drop-shadow(0 1px 2px #000); pointer-events: none; }
.dcard--pick.is-cmd { outline: 3px solid var(--gold); outline-offset: -3px; }
.dcard--pick.is-cmd .dcard__cmd { opacity: 1; }
/* list view flows into columns when there's room — reads top-to-bottom per column */
.cvg__list { columns: 270px; column-gap: 26px; }
.cvrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 14px;
  break-inside: avoid; }
.cvrow:hover { background: var(--surface); }
.cvrow__q { min-width: 26px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.cvrow a { color: var(--text); }
.cvrow--pick { cursor: pointer; }
.cvrow--pick input { flex: 0 0 auto; }
.cvrow__tags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }

/* Planar deck detail: landscape card tiles — the portrait planar art is rotated 90° to read
   landscape, exactly like the in-game board cells. */
.pcardt__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pcardt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pcardt__a { display: block; text-decoration: none; }
.pcardt__frame { position: relative; display: block; aspect-ratio: 7 / 5; border-radius: 10px; overflow: hidden;
  background: #0c0e15; border: 1px solid rgba(255,255,255,.08); transition: border-color .12s; }
.pcardt__a:hover .pcardt__frame { border-color: var(--accent); }
.pcardt__frame img { position: absolute; top: 50%; left: 50%; width: 71.43%; height: 140%; object-fit: cover;
  transform: translate(-50%, -50%) rotate(90deg); }
.pcardt__noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 12px; color: var(--muted); }
.pcardt__name { font-size: 12.5px; color: var(--text); text-align: center; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rosrow--link { text-decoration: none; color: inherit; cursor: pointer; }
.rosrow__open { flex: 0 0 auto; }

/* min-player warning banner */
.banner--warn { background: #3a2a10; border: 1px solid var(--gold-dim); color: var(--gold); }

/* cube card list + commander checkboxes */
.cubecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; max-height: 460px; overflow-y: auto; padding: 4px 2px; }
.cubecard { font-size: 13px; padding: 3px 4px; border-radius: 6px; }
.cubecard--pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cubecard--pick:hover { background: var(--surface-2); }
.cubecard--pick input { flex: 0 0 auto; }

/* cube commander art tiles */
.cmdr-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cmdr-art { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); aspect-ratio: 626 / 300; color: inherit; text-decoration: none; }
.cmdr-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cmdr-art__nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 7px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.cmdr-art:hover { border-color: var(--accent); }
.cmdr-art--noimg { aspect-ratio: auto; }
.cmdr-art--noimg img { display: none; }
.cmdr-art--noimg .cmdr-art__nm { position: static; background: none; color: var(--text); padding: 12px; }

/* full-card variant — cube commanders section only */
.cmdr-arts--full { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.cmdr-arts--full .cmdr-art { aspect-ratio: 488 / 680; border: none; background: transparent; border-radius: 8px; }
.cmdr-arts--full .cmdr-art img { object-fit: cover; object-position: center; }
.cmdr-arts--full .cmdr-art__nm { display: none; }
.cmdr-arts--full .cmdr-art:hover { box-shadow: 0 0 0 2px var(--accent); }
.cmdr-arts--full .cmdr-art--noimg { aspect-ratio: 488 / 680; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; }
.cmdr-arts--full .cmdr-art--noimg .cmdr-art__nm { display: block; position: static; background: none; color: var(--text); padding: 12px; text-align: center; }

/* primer reader */
.primer-body { margin-top: 12px; line-height: 1.6; font-size: 14.5px; color: var(--text); }
.primer-body > :first-child { margin-top: 0; }
/* collapsible Moxfield accordion panels */
.primer-panel { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; background: var(--surface-2); }
.primer-panel > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; color: var(--text); list-style: none; }
.primer-panel > summary::-webkit-details-marker { display: none; }
.primer-panel > summary::before { content: "\25B8"; display: inline-block; width: 1em; margin-right: 4px; color: var(--muted); transition: transform .15s; }
.primer-panel[open] > summary::before { transform: rotate(90deg); }
.primer-panel__body { padding: 0 14px 10px; }
.primer-panel__body > :first-child { margin-top: 0; }
/* mana pips */
.primer-body .mana { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 2px; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: -3px;
  margin: 0 1px; color: #0c0d11; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.primer-body .mana--w { background: #ece3c0; }
.primer-body .mana--u { background: #4a90d9; color: #fff; }
.primer-body .mana--b { background: #9a8fae; }
.primer-body .mana--r { background: #d9534a; color: #fff; }
.primer-body .mana--g { background: #5aa869; color: #fff; }
.primer-body .mana--c { background: #b7bcc6; }
.primer-body .mana--x { min-width: 0; padding: 0 6px; border-radius: 8px; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
/* dark scrollbar for any inner overflow (pre/tables) */
.primer-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.primer-body ::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 8px; }
.primer-body ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.primer-body ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* WUBRG color toggle (drafted-commander color identity for cube games) */
.ci-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ci-row__label { font-size: 12px; color: var(--muted); }
.ci-toggle { display: inline-flex; gap: 6px; }
.ci-pip { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; opacity: .5;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .1s, opacity .1s, box-shadow .1s; }
.ci-pip:hover { transform: translateY(-1px); opacity: .85; }
.ci-pip.is-on { opacity: 1; color: #0c0d11; border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.ci-pip--w.is-on { background: #ece3c0; }
.ci-pip--u.is-on { background: #4a90d9; color: #fff; }
.ci-pip--b.is-on { background: #9a8fae; }
.ci-pip--r.is-on { background: #d9534a; color: #fff; }
.ci-pip--g.is-on { background: #5aa869; color: #fff; }
.primer-body h1 { font-size: 20px; }
.primer-body h1, .primer-body h2, .primer-body h3, .primer-body h4, .primer-body h5, .primer-body h6 { margin: 18px 0 6px; line-height: 1.25; color: var(--text); }
.primer-body p { margin: 0 0 10px; }
.primer-body ul, .primer-body ol { margin: 0 0 12px; padding-left: 22px; }
.primer-body li { margin: 3px 0; }
.primer-body blockquote { margin: 0 0 12px; padding: 2px 0 2px 12px; border-left: 3px solid var(--accent-2); color: var(--muted); }
.primer-body pre { background: var(--surface-2); padding: 10px 12px; border-radius: 8px; overflow: auto; font-size: 12.5px; white-space: pre-wrap; }
.primer-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.primer-body pre code { background: none; padding: 0; }
.primer-body a { color: var(--accent); }
.primer-body strong, .primer-body b { color: var(--text); font-weight: 700; }
.primer-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.primer-body hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.primer-body table { border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }
.primer-body td, .primer-body th { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }

/* cube card rows: checkbox + tags + scryfall link */
.cubecard--row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
.cubecard--row:hover { background: var(--surface-2); }
.cubecard--row input[type=checkbox] { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--gold); }
.cubecard--row .cardlink { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: none; }
@media (hover: hover) { .cubecard--row .cardlink:hover { color: var(--accent); } }
.cubecard__q { flex: 0 0 auto; color: var(--muted); font-size: 12px; min-width: 22px; cursor: pointer; }
.cubecard__tags { flex: 0 0 auto; display: flex; gap: 4px; }
.minitag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--gold-dim); color: var(--gold); font-weight: 700; }

/* inline scryfall link in imported decklists */
.scrylink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border); }
.scrylink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* infinite-life button */

/* the play table must never scroll or spill the viewport */
.play-wrap { overflow: hidden; }
.table-play { overflow: hidden; }

/* achievement toast flipped to face a far-side player */
@keyframes achpop-flip { 0% { opacity: 0; transform: translateX(-50%) rotate(180deg) translateY(-8px) scale(.9); } 100% { opacity: 1; transform: translateX(-50%) rotate(180deg) translateY(0) scale(1); } }
@keyframes achfade-flip { to { opacity: 0; transform: translateX(-50%) rotate(180deg) translateY(6px); } }
.achtoast--flip { animation-name: achpop-flip; }
.achtoast--flip.achtoast--out { animation-name: achfade-flip; }

/* delete button on earned profile badges */
.badge__del { margin-left: auto; display: flex; }
.badge__del button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 6px; }
.badge__del button:hover { color: var(--danger); background: var(--surface); }

/* card-name links + hover/tap preview popover */
.cardlink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border); cursor: pointer;
  -webkit-touch-callout: none; }
@media (hover: hover) {
  .cardlink:hover { color: var(--accent); border-bottom-color: var(--accent); }
}
.cardpop { position: fixed; z-index: 200; width: 305px; display: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px;
  box-shadow: 0 14px 44px rgba(0,0,0,.62); }
.cardpop.is-open { display: block; }
.cardpop img { width: 100%; border-radius: 9px; display: block; background: var(--surface); min-height: 80px; }
/* planar hover-preview: portrait art rotated 90° into a landscape frame (matches the in-game preview) */
.cardpop--planar { width: 397px; }                    /* ~30% larger than the 305px default; frame aspect-ratio scales height with it */
.cardpop--planar .cardpop__frame { position: relative; display: block; width: 100%; aspect-ratio: 7 / 5; border-radius: 9px; overflow: hidden; background: var(--surface); }
.cardpop--planar .cardpop__frame img { position: absolute; top: 50%; left: 50%; width: 71.43%; height: 140%; min-height: 0; border-radius: 0; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
.cardpop__link { display: block; text-align: center; font-size: 12px; color: var(--muted); padding: 7px 0 2px; text-decoration: none; font-weight: 600; }
.cardpop__link:hover { color: var(--accent); }

/* ============ play-page: conditions, clock menu, tokens ============ */
/* condition badges on player boxes */
.cond { display: none; font-size: 18px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.pbox--monarch .cond--monarch { display: inline; }
.pbox--init .cond--init { display: inline; }
.pbox--blessed .cond--blessed { display: inline; }
.pbox--protected .cond--protected { display: inline; }
.cond--protected { color: #8fb7e0; }
.pbox--protected { box-shadow: inset 0 0 0 2px rgba(143,183,224,.5); }
.pbox--cantlose .cond--cantlose { display: inline; }
.cond--cantlose { color: #62e0cf; }
.pbox--cantlose { box-shadow: inset 0 0 0 2px rgba(98,224,207,.55); }
.pbox--poisoned .cond--poison { display: inline-flex; }
.cond--poison { align-items: center; gap: 2px; color: #79c765; }
.cond--poison .cond__n { font-size: 13px; font-weight: 800; }
/* the crown badge is the persistent monarch marker; the border flashes gold on
   crowning (pbox--flash-monarch, from JS) then fades so the board stays calm */
@keyframes monarchflash {
  0% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 2px var(--gold), 0 0 16px rgba(245,196,81,.45); }
  45% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 3px var(--gold), 0 0 28px rgba(245,196,81,.7); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(245,196,81,0); } }
.pbox--flash-monarch { animation: monarchflash 2.6s ease forwards; }
/* initiative: the sword badge is the persistent marker; the border flashes teal on
   taking it (pbox--flash-init, from JS) then fades — no permanent ring */
@keyframes initflash {
  0% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 2px #57c9c0, 0 0 16px rgba(87,201,192,.45); }
  45% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 3px #57c9c0, 0 0 28px rgba(87,201,192,.7); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(87,201,192,0); } }
.pbox--flash-init { animation: initflash 2.6s ease forwards; }
/* city's blessing uses an outline so it stacks on top of any border colour */
/* blessed no longer paints a border ring — the ✨ badge conveys it (themed borders own the frame) */

/* commander tax lives on the card face now ($, not a crown) — compact + centred */
.pbox__taxrow { align-self: center; padding: 4px 10px; }
.pbox__taxrow .counter__lbl { font-weight: 800; font-size: 15px; }

/* monarch / initiative toggles inside the tools panel */
.condrow { display: flex; gap: 8px; margin-top: 8px; }
.condbtn { background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 7px 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.condbtn:hover { border-color: var(--accent); }

/* clock area: two rune buttons flank the clock — one flipped to face the far side */
.clockbtn { background: var(--surface-2); border: 2px solid var(--accent-2); color: var(--accent);
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  flex: 0 0 auto; transition: border-color .15s, transform .08s, box-shadow .2s;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--accent-2), 0 0 20px -8px var(--accent); }
.clockbtn:hover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--accent), 0 0 24px -6px var(--accent); }
.clockbtn:active { transform: scale(.94); }
.clockbtn .runeicon { display: block; transform: rotate(180deg); }
.clockbtn--flip .runeicon { transform: rotate(180deg); }
.table-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; position: relative; z-index: 50; pointer-events: none; }
.clockrow { display: flex; align-items: center; justify-content: center; gap: 30px; }

/* day / night indicator — one each side, facing its player */
/* board-state ring: curved text on the clock's inner ring, mirrored top+bottom so both
   sides read it upright. Full-board indicators (day/night now; others later) render here. */
/* clock menu overlay */
.clockmenu { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.clockmenu--flip .clockmenu__card { transform: rotate(180deg); }
.clockmenu[hidden] { display: none; }
.clockmenu__scrim { position: absolute; top: -80px; left: -80px; right: -80px; bottom: -80px; background: rgba(0,0,0,.6); }
.clockmenu__card { position: relative; z-index: 1; width: min(460px, 92vw); max-height: 88vh; overflow: auto;
  background: var(--surface-2); border: 2px solid var(--accent); border-radius: 16px; padding: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 10px; }
.cmtabs { display: flex; gap: 6px; }
.cmtab { flex: 1 1 0; background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  border-radius: 10px; padding: 9px; font-weight: 700; cursor: pointer; }
.cmtab.is-active { color: var(--accent); border-color: var(--accent); }
.cmpane { display: flex; flex-direction: column; gap: 8px; }
.cmpane[hidden] { display: none; }
.cmlabel { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.daynight { display: flex; gap: 8px; }
.dnbtn { flex: 1 1 0; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px 6px; font-weight: 700; cursor: pointer; }
.dnbtn:hover { border-color: var(--accent); }

/* token picker grid */
.tokengrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tokenpick { background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 12px 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.tokenpick:hover { border-color: var(--accent); }

/* floating draggable / resizable token cards */
.token { position: fixed; z-index: 60; touch-action: none; user-select: none; -webkit-user-select: none; }
.token img { width: 100%; display: block; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); background: var(--surface); }
.token__rot { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; }
.token__grip { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); cursor: nwse-resize; z-index: 2; touch-action: none; box-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* fullscreen = pure game (bottom controls now live in the clock menu) */
.is-fullscreen .play-topbar { display: none; }

/* cube commander tiles double as card-preview links — no text underline on the tile */
.cmdr-art.cardlink { border-bottom: none; }
@media (hover: hover) { .cmdr-art.cardlink:hover .cmdr-art__nm { color: var(--accent); } }

/* full-viewport wallpaper behind the table — fills the screen even on desktop (the play
   column is max-width'd). Heavy dark overlay keeps it a subdued, readable backdrop; the
   accent is scoped to .play-wrap so buttons/clock pick up the guild colour. */
/* wallpaper on its own fixed full-screen layer so JS can rotate it per active side.
   Fade + rotate is on the element; accent tint stays on .play-wrap. */
@property --tbrot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tablebg { position: fixed; left: 0; right: 0; top: -80px; bottom: -80px;
  z-index: -1; pointer-events: none; background-color: #000; --tbrot: 0deg;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  animation: tablekenburns 64s ease-in-out infinite;                       /* same slow drift as the planechase galaxy */
  transition: --tbrot .85s cubic-bezier(.45,0,.2,1), opacity .5s ease; }    /* rotation transitions via the var; transform is owned by the animation */
@keyframes tablekenburns {
  0%   { transform: rotate(var(--tbrot)) scale(1.06) translate(0, 0); }
  50%  { transform: rotate(var(--tbrot)) scale(1.12) translate(-1.4%, -1%); }
  100% { transform: rotate(var(--tbrot)) scale(1.06) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .tablebg { animation: none; transform: rotate(var(--tbrot)) scale(1.06); } }
.tablebg[data-theme=""] { background-image: none; }
/* Ambient animation canvas — sits above the table image, below all UI (same negative z as the bg
   layers but later in the DOM, so it paints over them and under content). */
.ambientfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity .7s ease; }
.ambpick { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.ambpick__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.ambpick__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ambtile { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); transition: border-color .12s, background .12s; }
.ambtile:hover { border-color: var(--accent); }
.ambtile--on { border-color: var(--accent); background: var(--accent); color: #0a0d12; font-weight: 700; }
[data-theme="azorius"] { --accent: #4a90d9; --accent-2: #ece3c0; --bg: #0a0d12; --surface: #12161e; --surface-2: #1b2130; }
.tablebg[data-theme="azorius"] { background-image: linear-gradient(rgba(8,11,16,.74), rgba(8,11,16,.86)), url("themes/azorius.jpg"); }
[data-theme="dimir"] { --accent: #4a90d9; --accent-2: #9a8fae; --bg: #090b11; --surface: #101420; --surface-2: #181d2b; }
.tablebg[data-theme="dimir"] { background-image: linear-gradient(rgba(7,9,14,.78), rgba(7,9,14,.88)), url("themes/dimir.jpg"); }
[data-theme="rakdos"] { --accent: #d9534a; --accent-2: #9a8fae; --bg: #110809; --surface: #1c1113; --surface-2: #281619; }
.tablebg[data-theme="rakdos"] { background-image: linear-gradient(rgba(10,7,7,.76), rgba(10,7,7,.87)), url("themes/rakdos.jpg"); }
[data-theme="gruul"] { --accent: #d9534a; --accent-2: #5aa869; --bg: #110b08; --surface: #1c1410; --surface-2: #281c14; }
.tablebg[data-theme="gruul"] { background-image: linear-gradient(rgba(11,8,6,.74), rgba(11,8,6,.86)), url("themes/gruul.jpg"); }
[data-theme="selesnya"] { --accent: #5aa869; --accent-2: #ece3c0; --bg: #0a0f0b; --surface: #121a14; --surface-2: #1a251d; }
.tablebg[data-theme="selesnya"] { background-image: linear-gradient(rgba(8,12,9,.74), rgba(8,12,9,.86)), url("themes/selesnya.jpg"); }
[data-theme="orzhov"] { --accent: #ece3c0; --accent-2: #9a8fae; --bg: #0e0d0a; --surface: #181612; --surface-2: #241f18; }
.tablebg[data-theme="orzhov"] { background-image: linear-gradient(rgba(10,10,12,.74), rgba(10,10,12,.86)), url("themes/orzhov.jpg"); }
[data-theme="izzet"] { --accent: #4a90d9; --accent-2: #d9534a; --bg: #090c12; --surface: #111620; --surface-2: #19202e; }
.tablebg[data-theme="izzet"] { background-image: linear-gradient(rgba(8,10,15,.74), rgba(8,10,15,.86)), url("themes/izzet.jpg"); }
[data-theme="golgari"] { --accent: #5aa869; --accent-2: #9a8fae; --bg: #0a0e0a; --surface: #141a13; --surface-2: #1e261a; }
.tablebg[data-theme="golgari"] { background-image: linear-gradient(rgba(8,10,8,.77), rgba(8,10,8,.88)), url("themes/golgari.jpg"); }
[data-theme="boros"] { --accent: #d9534a; --accent-2: #ece3c0; --bg: #110c08; --surface: #1c1510; --surface-2: #281d15; }
.tablebg[data-theme="boros"] { background-image: linear-gradient(rgba(11,9,7,.74), rgba(11,9,7,.86)), url("themes/boros.jpg"); }
[data-theme="simic"] { --accent: #5aa869; --accent-2: #4a90d9; --bg: #08100e; --surface: #101b18; --surface-2: #172621; }
.tablebg[data-theme="simic"] { background-image: linear-gradient(rgba(8,12,12,.74), rgba(8,12,12,.86)), url("themes/simic.jpg"); }

/* (format labels removed — the game mode is never shown on the table) */
.table-play { position: relative; }

/* keep the play page centred: drop the tall bottom padding the table doesn't need */
.play-wrap { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

/* roster: avatar doubles as the photo-upload control; rows are fully clickable */
.avatar--upload { cursor: pointer; }
.avatar--upload:hover { box-shadow: 0 0 0 2px var(--accent); }
.rosrow[data-href] { cursor: pointer; }
.avataform { display: flex; flex: 0 0 auto; }

/* decks page: owner section headers */
.deckowner { margin: 14px 0 2px; }
.deckowner:first-child { margin-top: 0; }

/* wide layout for the decks page — lists column across the whole screen */
.wrap--xw { max-width: 1440px; }

/* mana pips in list view */
.cvrow__mana { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; flex: 0 0 auto; padding-left: 8px; }
.mpip { width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.mpip--gen { background: #3a4150; color: #dfe4ee; font-size: 9px; font-weight: 800;
  display: inline-grid; place-items: center; line-height: 1; }

/* collapsible owner groups on the decks page */
.deckgroup { border: 0; }
.deckgroup > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px;
  padding: 6px 2px; -webkit-tap-highlight-color: transparent; }
.deckgroup > summary::-webkit-details-marker { display: none; }
.deckgroup > summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .12s; }
.deckgroup[open] > summary::before { transform: rotate(90deg); }
.deckgroup__body { margin-top: 6px; }
.deckrow--click { cursor: pointer; }

/* profile: favorite faction chip */
.facchip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 13px; }

/* quick log as a toggle button (TTS detail lives in the hover tooltip) */
.quicklog { position: relative; display: inline-flex; }
.quicklog input { position: absolute; opacity: 0; pointer-events: none; }
.quicklog__b { user-select: none; }
.quicklog input:checked + .quicklog__b { border-color: var(--accent); color: var(--accent);
  background: rgba(54,194,206,.08); }

/* cube games pick commanders on the next screen — deck selects go inert */
.dsel.is-cubemode { opacity: .45; pointer-events: none; }

/* profile options popover (gear menu) */
.profopts { position: relative; }
.profopts > summary { list-style: none; cursor: pointer; }
.profopts > summary::-webkit-details-marker { display: none; }
.profopts__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; width: min(300px, 84vw); box-shadow: 0 12px 30px rgba(0,0,0,.5); }

/* beam per-player stopwatch */
.ptimer { display: flex; align-items: center; gap: 6px; }
.ptimer__t { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700;
  color: var(--muted); min-width: 58px; text-align: right; }
.ptimer__t.is-run { color: var(--accent); }
.tbtn { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; }
.tbtn.is-run { border-color: var(--accent); color: var(--accent); }

/* ---- play board effects: brief, subtle, text never moves ---- */
@keyframes fxwobble { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }
@keyframes fxpoison { 0% { filter: none; } 15%, 75% { filter: sepia(.9) hue-rotate(60deg) saturate(1.8); } 100% { filter: none; } }
.pbox--fx-poison .pbox__who .avatar { animation: fxpoison 1.6s ease, fxwobble 1.6s ease; }

@keyframes fxshake { 0%,100% { transform: translate(0,0); background: rgba(180,30,30,0); }
  10% { background: rgba(180,30,30,.14); }
  15% { transform: translate(-4px,2px); } 30% { transform: translate(4px,-2px); }
  45% { transform: translate(-3px,-1px); } 60% { transform: translate(3px,1px); }
  70% { background: rgba(180,30,30,.10); } 75% { transform: translate(-2px,0); } }
/* commander damage: no hard box border — just the blood splatter below (softer) */

@keyframes fxrad { 0% { opacity: 0; transform: translate(-50%,-40%) rotate(-8deg) scale(.85); }
  20% { opacity: .55; } 50% { transform: translate(-50%,-52%) rotate(8deg) scale(1); }
  80% { opacity: .45; } 100% { opacity: 0; transform: translate(-50%,-62%) rotate(-6deg) scale(1.05); } }
.pbox--fx-rad::after { content: '☢'; position: absolute; left: 50%; top: 50%; font-size: 52px;
  opacity: 0; pointer-events: none; z-index: 4; animation: fxrad 1.5s ease;
  text-shadow: 0 0 14px rgba(180,220,60,.5); }

@keyframes fxglow { 0% { box-shadow: 0 0 0 0 rgba(232,193,90,0); }
  25% { box-shadow: 0 0 22px 4px rgba(232,193,90,.55); } 100% { box-shadow: 0 0 0 0 rgba(232,193,90,0); } }
.pbox--fx-bless { animation: fxglow 1.8s ease; }

/* low health (≤10): red life text + faint splatter inside the card */
.pbox--low .pbox__lifeval { color: #ff5d4d; }
/* poison + bloodied can co-exist: poison tints the TOP of the card (green), bloodied the BOTTOM
   (red), composed from separate custom properties so both render at once without overlapping. */
.pbox__body { background-image: var(--blood-bg, none), var(--pois-bg, none); }
.pbox--pois6 .pbox__body { --pois-bg:
  radial-gradient(96px 62px at 12% 8%, rgba(42,150,42,.34), transparent 70%),
  radial-gradient(76px 52px at 88% 10%, rgba(36,140,36,.28), transparent 70%),
  radial-gradient(52px 44px at 50% 2%, rgba(46,160,46,.25), transparent 72%); }
.pbox--pois8 .pbox__body { --pois-bg:
  radial-gradient(122px 82px at 12% 8%, rgba(44,165,44,.52), transparent 66%),
  radial-gradient(98px 66px at 88% 9%, rgba(36,152,36,.44), transparent 66%),
  radial-gradient(66px 56px at 50% 2%, rgba(50,175,50,.42), transparent 70%),
  radial-gradient(40px 36px at 70% 20%, rgba(42,160,42,.34), transparent 74%); }
.pbox--low .pbox__body { --blood-bg:
  radial-gradient(96px 64px at 10% 92%, rgba(165,20,20,.38), transparent 70%),
  radial-gradient(76px 52px at 90% 90%, rgba(150,16,16,.31), transparent 70%),
  radial-gradient(56px 46px at 50% 98%, rgba(170,24,24,.28), transparent 72%),
  radial-gradient(30px 27px at 26% 80%, rgba(160,20,20,.23), transparent 75%); }

/* when BOTH poison and bloodied are live, drop the clean top/bottom split — interleave green + red
   across the whole card and pile on more splatters (things are dire). Higher specificity wins. */
.pbox--pois6.pbox--low .pbox__body {
  --pois-bg:
    radial-gradient(90px 62px at 14% 14%, rgba(44,160,44,.38), transparent 70%),
    radial-gradient(66px 52px at 72% 30%, rgba(38,150,38,.32), transparent 70%),
    radial-gradient(58px 50px at 38% 52%, rgba(46,165,46,.30), transparent 72%),
    radial-gradient(54px 46px at 86% 64%, rgba(40,155,40,.30), transparent 72%),
    radial-gradient(60px 50px at 24% 82%, rgba(44,160,44,.32), transparent 72%),
    radial-gradient(44px 40px at 64% 92%, rgba(48,168,48,.28), transparent 74%);
  --blood-bg:
    radial-gradient(88px 60px at 84% 12%, rgba(168,22,22,.38), transparent 70%),
    radial-gradient(62px 50px at 22% 32%, rgba(156,18,18,.32), transparent 70%),
    radial-gradient(64px 54px at 60% 44%, rgba(170,24,24,.30), transparent 72%),
    radial-gradient(54px 46px at 12% 60%, rgba(160,20,20,.30), transparent 72%),
    radial-gradient(58px 50px at 78% 84%, rgba(166,22,22,.32), transparent 72%),
    radial-gradient(44px 40px at 44% 96%, rgba(172,26,26,.28), transparent 74%);
}
.pbox--pois8.pbox--low .pbox__body {
  --pois-bg:
    radial-gradient(104px 72px at 14% 12%, rgba(46,170,46,.54), transparent 66%),
    radial-gradient(80px 60px at 72% 26%, rgba(40,158,40,.46), transparent 68%),
    radial-gradient(70px 58px at 38% 48%, rgba(48,172,48,.44), transparent 70%),
    radial-gradient(64px 54px at 88% 60%, rgba(42,162,42,.42), transparent 70%),
    radial-gradient(74px 60px at 24% 80%, rgba(46,170,46,.46), transparent 70%),
    radial-gradient(56px 48px at 62% 92%, rgba(50,178,50,.40), transparent 72%),
    radial-gradient(48px 42px at 52% 4%, rgba(48,172,48,.40), transparent 72%);
  --blood-bg:
    radial-gradient(102px 70px at 84% 10%, rgba(176,26,26,.54), transparent 66%),
    radial-gradient(76px 58px at 20% 28%, rgba(162,20,20,.46), transparent 68%),
    radial-gradient(78px 62px at 60% 42%, rgba(178,28,28,.44), transparent 70%),
    radial-gradient(66px 56px at 12% 58%, rgba(166,22,22,.42), transparent 70%),
    radial-gradient(72px 60px at 78% 82%, rgba(174,26,26,.46), transparent 70%),
    radial-gradient(54px 46px at 46% 96%, rgba(180,30,30,.40), transparent 72%),
    radial-gradient(46px 40px at 30% 4%, rgba(176,28,28,.40), transparent 72%);
}

/* cube commander picker (setup page): searchable, hover previews via cardlink */
.cubepick { position: relative; }
.cubepick .cubepick__sel { display: none; }
.cubepick__res { display: none; }

/* picker rows are <button>s — strip the native chrome that made them white blocks */
button.scry__opt { display: block; width: 100%; text-align: left; background: transparent;
  border: 0; color: var(--text); font: inherit; -webkit-appearance: none; appearance: none; }
button.scry__opt:hover { background: var(--surface); color: var(--accent); }

/* narrow screens (phones): stopwatch + steppers drop to a second row instead of overflowing */
@media (max-width: 640px) {
  .player { grid-template-columns: 30px 42px 1fr auto;
    grid-template-areas: "rank av name score" "rank av timer ctl";
    row-gap: 6px; gap: 8px; padding: 10px 12px; }
  .player .rank { grid-area: rank; }
  .player .avatar { grid-area: av; }
  .player .pname { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .player .score { grid-area: score; font-size: 26px; min-width: 0; }
  .player .ptimer { grid-area: timer; justify-self: start; }
  .player .sctl { grid-area: ctl; justify-self: end; gap: 5px; }
  .player .stepper { width: 36px; height: 36px; font-size: 19px; }
  .ptimer__t { min-width: 44px; font-size: 13px; }
  .tbtn { width: 30px; height: 30px; }
}

/* poison wash: whole card gets the sickly green ripple — overlay only, text never moves */
@keyframes fxpoisonwash { 0% { opacity: 0; background-position: 0% 50%, 100% 50%; }
  20%, 70% { opacity: .45; } 50% { background-position: 60% 35%, 40% 70%; }
  100% { opacity: 0; background-position: 100% 50%, 0% 50%; } }
.pbox__body { position: relative; }
.pbox--fx-poison .pbox__body::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  z-index: 3; border-radius: inherit;
  background: radial-gradient(120% 90% at 30% 40%, rgba(90,200,90,.5), transparent 62%),
              radial-gradient(110% 90% at 75% 65%, rgba(60,170,80,.42), transparent 62%);
  background-size: 200% 200%, 200% 200%; animation: fxpoisonwash 1.6s ease; opacity: 0; }

/* eliminated seats */
.pbox--dead { filter: grayscale(.9) brightness(.75); }
/* death-grace (matches DEATH_GRACE_MS = 3s): a bloodied red glow + a life-number pulse that BUILD in
   intensity across the 3s, peaking exactly as death lands. Recovering above 0 removes .pbox--dying and stops it. */
.pbox--dying:not(.pbox--dead) { animation: dyingpulse 3s ease-in forwards; }
@keyframes dyingpulse {
  0%   { box-shadow: inset 0 0 0 1px rgba(224,42,42,.12); }
  18%  { box-shadow: inset 0 0 0 2px rgba(224,42,42,.34), inset 0 0 14px rgba(200,20,20,.22); }
  34%  { box-shadow: inset 0 0 0 1px rgba(224,42,42,.18), inset 0 0 8px rgba(200,20,20,.12); }
  56%  { box-shadow: inset 0 0 0 3px rgba(224,42,42,.58), inset 0 0 26px rgba(200,20,20,.42); }
  74%  { box-shadow: inset 0 0 0 2px rgba(224,42,42,.40), inset 0 0 18px rgba(200,20,20,.30); }
  100% { box-shadow: inset 0 0 0 5px rgba(224,42,42,.98), inset 0 0 48px rgba(200,20,20,.72); }
}
.pbox--dying:not(.pbox--dead) .pbox__lifeval { animation: dyingnum 3s ease-in forwards; will-change: transform; }
@keyframes dyingnum {
  0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(224,42,42,0); }
  18%  { transform: scale(1.05); text-shadow: 0 0 8px rgba(224,42,42,.5); }
  34%  { transform: scale(1);    text-shadow: 0 0 4px rgba(224,42,42,.25); }
  56%  { transform: scale(1.10); text-shadow: 0 0 16px rgba(224,42,42,.75); }
  74%  { transform: scale(1.03); text-shadow: 0 0 10px rgba(224,42,42,.5); }
  100% { transform: scale(1.18); text-shadow: 0 0 26px rgba(224,42,42,1), 0 0 8px rgba(255,70,70,.9); }
}
@media (prefers-reduced-motion: reduce) { .pbox--dying:not(.pbox--dead), .pbox--dying:not(.pbox--dead) .pbox__lifeval { animation: none; } }
.pbox--dead .pbox__deadmark { display: grid; }
.pbox__deadmark { display: none; position: absolute; inset: 0; place-items: center; z-index: 5;
  font-size: clamp(52px, 40cqh, 120px); cursor: pointer; text-shadow: 0 4px 18px rgba(0,0,0,.8);
  background: rgba(10,11,15,.35); border-radius: inherit; }
.pbox--dead .lifebtn, .pbox--dead .cnbtn, .pbox--dead .cdbtn { pointer-events: none; opacity: .4; }

/* per-card achievements button + panel */
.pbox__achbtn { position: absolute; bottom: 6px; left: 6px; z-index: 6; width: 34px; height: 34px;
  border-radius: 9px; background: rgba(13,15,20,.72); border: 1px solid var(--border); color: var(--text);
  font-size: 15px; line-height: 1; cursor: pointer; }
.pbox__achbtn:hover { border-color: var(--gold); }
.achpanel { position: fixed; z-index: 95; width: 280px; max-height: 320px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.achpanel--flip { transform: rotate(180deg); }
.achpanel__hd { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px; }
.achpanel__it { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0;
  border-top: 1px solid var(--border); }
.achpanel__it:first-of-type { border-top: 0; }
.achpanel__emoji { font-size: 18px; flex: 0 0 auto; }
.achpanel__txt b { display: block; font-size: 13.5px; }
.achpanel__txt small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.achpanel__empty { color: var(--muted); font-size: 13px; }

/* achievement toast rows: several from one action sit side-by-side, ~30s */
.achrow { position: fixed; z-index: 60; transform: translateX(-50%); display: flex; gap: 8px;
  flex-wrap: wrap; justify-content: center; width: max-content; max-width: min(92vw, 860px); pointer-events: none; }
.achrow--flip { transform: translateX(-50%) rotate(180deg); }
.achrow .achtoast--inrow { position: static; transform: none; }
.achrow--flip .achtoast--inrow { transform: none; }

/* total game time in the center clock */
.gameclock { margin-top: 4px; font-size: 12.5px; color: var(--muted-2);
  font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* cube list: proper card presence instead of a skinny row */
.cubebig { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.cubebig:hover { border-color: var(--accent); transform: translateY(-1px); }
.cubebig__title { font-size: 21px; font-weight: 800; letter-spacing: .01em; }
.cubebig__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cubebig__open { align-self: flex-end; font-size: 13px; color: var(--accent); font-weight: 700; }
.cubechip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.cubechip--type { color: var(--muted); }

/* cube cover: at-a-glance stats */
.cubestats { margin-bottom: 14px; }
.cubestats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; }
.cubestat { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; }
.cubestat__n { font-family: var(--mono); font-size: 22px; font-weight: 800; }
.cubestat__lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; }
.cubestats__types { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cubestats__modes { margin-top: 10px; }

/* achievement history on the profile */
.achhist { display: flex; flex-direction: column; }
.achhist__row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 2px;
  border-top: 1px solid var(--border); }
.achhist__row:first-child { border-top: 0; }
.achhist__emoji { font-size: 22px; flex: 0 0 auto; line-height: 1.2; }
.achhist__main { min-width: 0; }
.achhist__ctx { color: var(--muted); margin-top: 2px; }
.xpchip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: rgba(230,190,80,.14);
  border: 1px solid rgba(230,190,80,.4); color: var(--gold); }

/* dual commander tax: one row, two compact modules */
/* commander tax: one unified pill — shared $ glyph, a segment per commander with
   its name tag, big value, and a slim stacked stepper. Duo fits one clean row. */
/* commander controls: tax + damage-menu stacked inside ONE rounded, single-bordered pill */
.cmdctl { align-self: center; max-width: 100%; display: inline-flex; flex-direction: column; align-items: stretch;
  background: rgba(13,15,20,.62); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 15px; overflow: hidden; transition: border-color .14s, box-shadow .14s; }
.cmdctl:hover, .cmdctl:focus-within { border-color: var(--accent); box-shadow: 0 0 14px -4px var(--accent); }
.taxpill { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 4px 12px 2px; background: none; border: 0; min-width: 0; max-width: 100%; }
.taxpill__sym { color: var(--gold); font-weight: 800; font-size: 15px; }
.taxpill__div { width: 1px; align-self: stretch; margin: 3px 0; background: var(--border); }
.taxseg { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 8px; min-width: 0; flex: 0 1 auto;
  border-radius: 999px; cursor: pointer; color: var(--text); transition: background .12s, transform .06s; }
.taxbtn:hover { background: rgba(255,255,255,.06); }
.taxbtn:active { transform: scale(.93); }
.taxseg__who { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--pc, var(--text)); flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taxseg .counter__val { flex: 0 0 auto; min-width: 2ch; text-align: center; font-size: 17px; font-weight: 800; }
.taxpill--solo { gap: 7px; }

/* history / rewind timeline */
.histlist { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; }
.histrow { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  padding: 7px 10px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); cursor: pointer; font-size: 13px; }
.histrow:hover { border-color: var(--accent); }
.histrow__turn { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: 0 0 28px; }
.histrow__who { font-weight: 700; flex: 0 0 auto; }
.histrow__what { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* end-of-game summary */
.snapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.snapcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; }
.snapcard--win { border-color: var(--gold); }
.snapcard--dead { filter: grayscale(.65); opacity: .85; }
.snapcard__hd { display: flex; gap: 8px; align-items: center; font-size: 13.5px; min-width: 0; }
.snapcard__hd b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapcard__life { font-family: var(--mono); font-size: 30px; font-weight: 800; margin: 6px 0 4px; }
.snapcard__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lifechart { width: 100%; height: auto; display: block; }
.lifechart__grid { stroke: var(--border); stroke-width: 1; }
.lifechart__lbl { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.lifechart__mark { transition: opacity .26s ease-out; }
.lifechart__mark, .lifechart__mark * { pointer-events: none; }
.lcpin__ico { font-size: 12px; }
.lcpin__tail, .lcpin__dot { paint-order: stroke; }
.lifechart__mark--win .lcpin__ico { font-size: 13px; }
.lifechart__cursor { pointer-events: none; stroke: var(--bg, #0b0d13); stroke-width: 2; }
.beamsum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .beamsum-grid { grid-template-columns: 1fr; gap: 8px; } }
.lifechart__line { pointer-events: none; }
.lifechart__hit { pointer-events: stroke; cursor: pointer; }
.lifechart__read { font-size: 13px; font-weight: 700; pointer-events: none; }
.lifechart__readbg { fill: rgba(10, 12, 18, .82); pointer-events: none; }
.chartlegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chartlegend__it { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px;
  color: var(--muted); }
.chartlegend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* cube art */
.cubebig__art { height: 130px; border-radius: 10px; background-size: cover;
  background-position: center 22%; border: 1px solid var(--border); }
.cubehd__art { display: inline-block; width: 44px; height: 44px; border-radius: 10px;
  background-size: cover; background-position: center 25%; vertical-align: -12px;
  margin-right: 10px; border: 1px solid var(--border); }
.cubestats__grid--tile { gap: 8px; }
.cubestats__grid--tile .cubestat { padding: 9px 6px; }
.cubestats__grid--tile .cubestat__n { font-size: 18px; }

/* roster: photo-from-URL button */
.avurlbtn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 12px;
  flex: 0 0 auto; margin-left: 4px; }
.avurlbtn:hover { border-color: var(--accent); color: var(--text); }

/* ---- shard / wedge / four-color themes ---- */
[data-theme="bant"] { --accent: #6fb3d9; --accent-2: #cfe3b8; --bg: #0a0f10; --surface: #111a1b; --surface-2: #1a2527; }
.tablebg[data-theme="bant"] { background-image: linear-gradient(rgba(8,12,13,.74), rgba(8,12,13,.86)), url("themes/bant.jpg"); }
[data-theme="esper"] { --accent: #8aa3c9; --accent-2: #d8dbe8; --bg: #0a0c12; --surface: #12151e; --surface-2: #1b1f2c; }
.tablebg[data-theme="esper"] { background-image: linear-gradient(rgba(8,10,15,.74), rgba(8,10,15,.86)), url("themes/esper.jpg"); }
[data-theme="grixis"] { --accent: #c9484f; --accent-2: #6f7ed9; --bg: #0f0a0e; --surface: #171017; --surface-2: #221824; }
.tablebg[data-theme="grixis"] { background-image: linear-gradient(rgba(12,8,12,.74), rgba(12,8,12,.86)), url("themes/grixis.jpg"); }
[data-theme="jund"] { --accent: #d96a3c; --accent-2: #7ca85a; --bg: #0f0b09; --surface: #171210; --surface-2: #221b17; }
.tablebg[data-theme="jund"] { background-image: linear-gradient(rgba(12,9,7,.74), rgba(12,9,7,.86)), url("themes/jund.jpg"); }
[data-theme="naya"] { --accent: #e08a4a; --accent-2: #a8c98a; --bg: #100d09; --surface: #181410; --surface-2: #241e17; }
.tablebg[data-theme="naya"] { background-image: linear-gradient(rgba(13,10,7,.74), rgba(13,10,7,.86)), url("themes/naya.jpg"); }
[data-theme="abzan"] { --accent: #c9b98a; --accent-2: #7ca88a; --bg: #0c0d0a; --surface: #141511; --surface-2: #1e201a; }
.tablebg[data-theme="abzan"] { background-image: linear-gradient(rgba(10,11,8,.74), rgba(10,11,8,.86)), url("themes/abzan.webp"); }
[data-theme="jeskai"] { --accent: #d97e4a; --accent-2: #6fb3d9; --bg: #0e0c0a; --surface: #161311; --surface-2: #211d19; }
.tablebg[data-theme="jeskai"] { background-image: linear-gradient(rgba(11,10,8,.74), rgba(11,10,8,.86)), url("themes/jeskai.png"); }
[data-theme="sultai"] { --accent: #4aa8a0; --accent-2: #7c6fae; --bg: #090e0d; --surface: #101715; --surface-2: #182320; }
.tablebg[data-theme="sultai"] { background-image: linear-gradient(rgba(7,11,10,.74), rgba(7,11,10,.86)), url("themes/sultai.webp"); }
[data-theme="mardu"] { --accent: #c94a55; --accent-2: #d9cbb0; --bg: #100a0c; --surface: #181013; --surface-2: #23181c; }
.tablebg[data-theme="mardu"] { background-image: linear-gradient(rgba(13,8,10,.74), rgba(13,8,10,.86)), url("themes/mardu.webp"); }
[data-theme="temur"] { --accent: #55b8c9; --accent-2: #7ca85a; --bg: #0a1012; --surface: #11191c; --surface-2: #192428; }
.tablebg[data-theme="temur"] { background-image: linear-gradient(rgba(8,13,15,.74), rgba(8,13,15,.86)), url("themes/temur.jpg"); }
[data-theme="yore"] { --accent: #8f6fd0; --accent-2: #d9b06a; --bg: #0d0a10; --surface: #151018; --surface-2: #1f1824; }
.tablebg[data-theme="yore"] { background-image: linear-gradient(rgba(10,8,13,.74), rgba(10,8,13,.86)), url("themes/yore.jpg"); }
[data-theme="dune"] { --accent: #c98a4a; --accent-2: #8aa86a; --bg: #0f0c08; --surface: #17130e; --surface-2: #221c15; }
.tablebg[data-theme="dune"] { background-image: linear-gradient(rgba(12,10,6,.74), rgba(12,10,6,.86)), url("themes/dune.jpg"); }
[data-theme="witch"] { --accent: #6fae8f; --accent-2: #9a8fd0; --bg: #0a0e0d; --surface: #111614; --surface-2: #1a221f; }
.tablebg[data-theme="witch"] { background-image: linear-gradient(rgba(8,11,10,.74), rgba(8,11,10,.86)), url("themes/witch.jpg"); }
[data-theme="ink"] { --accent: #5ab0d9; --accent-2: #e0a05a; --bg: #0b0e10; --surface: #121719; --surface-2: #1b2225; }
.tablebg[data-theme="ink"] { background-image: linear-gradient(rgba(9,11,13,.74), rgba(9,11,13,.86)), url("themes/ink.jpg"); }
[data-theme="glint"] { --accent: #d0554a; --accent-2: #4aa89a; --bg: #0b0c10; --surface: #121319; --surface-2: #1b1d25; }
.tablebg[data-theme="glint"] { background-image: linear-gradient(rgba(9,10,13,.74), rgba(9,10,13,.86)), url("themes/glint.png"); }

/* ---- theme crossfade ---- */
.tablebg { opacity: 0; transition: opacity 1.2s ease, transform .85s cubic-bezier(.45,0,.2,1); }
.tablebg--in { opacity: 1; }
.theme-fading, .theme-fading * { transition: background-color 1.2s ease, border-color 1.2s ease,
  color 1.2s ease, box-shadow 1.2s ease !important; }

/* ---- health tiers ---- */
.pbox--low20 .pbox__lifeval { color: #e3c24a; }
.pbox--low15 .pbox__lifeval { color: #e08a3c; }

/* ---- theme picker grid ---- */
.thpick .thgrid { margin-top: 12px; }
.thgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thtile-form { display: contents; }
.thtile { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0;
  border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--surface); color: var(--text); }
.thtile:hover { box-shadow: 0 0 0 2px var(--accent-2); }
.thtile--on { box-shadow: 0 0 0 3px var(--accent-2); }
.thtile__art { display: block; height: 84px; background-size: cover; background-position: center 30%; }
.thtile__art--auto { display: grid; place-items: center; font-size: 34px; background: var(--surface-2); }
.thtile__art--none { background: linear-gradient(135deg, #14181f, #0b0d12); }
.thtile__nm { display: block; padding: 7px 9px; font-size: 12.5px; font-weight: 700; text-align: left;
  border-top: 2px solid var(--accent-2); background: var(--surface); }

/* ---- big overlays (theme picker / finish / victory) ---- */
@keyframes bigoverlayin { from { opacity: 0; } to { opacity: 1; } }
.bigoverlay:not([hidden]) { animation: bigoverlayin .95s ease; }
.bigoverlay { position: fixed; inset: 0; z-index: 120; background: rgba(3,4,6,.92);
  display: grid; place-items: center; padding: 18px; }
.bigoverlay__panel { width: min(920px, 96vw); max-height: 92vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.bigoverlay__panel--narrow { width: min(440px, 94vw); }
.bigoverlay__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 12px; }
.bigoverlay__close { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 15px; }

/* ---- victory screen ---- */
.victory__panel { transition: transform .4s ease; }
.victory__panel--flip { transform: rotate(180deg); }
.victory__body { display: flex; flex-direction: column; gap: 16px; }
.victory__hero { text-align: center; }
.victory__win { font-size: clamp(24px, 4.5vw, 38px); font-weight: 800;
  color: var(--gold); text-shadow: 0 2px 18px rgba(245,196,81,.25); margin: 0; }
.victory__mode { color: var(--muted); margin: 4px 0 0; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .09em; }
.victory__metrics, .victory__records { margin: 0; }
.vrec { padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
/* b133: the victory screen - the winner's commander art behind the hero, the awards' line under them, the table (a card a player) */
.victory__hero--art { position: relative; border-radius: 16px; overflow: hidden; padding: 38px 16px 24px;
  background: linear-gradient(180deg, rgba(10,12,18,.2) 0%, rgba(10,12,18,.62) 55%, rgba(10,12,18,.94) 100%), var(--vart) center 28% / cover no-repeat;
  border: 1px solid rgba(245,196,81,.38); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.victory__cmdr { color: var(--muted-2); font-size: 14.5px; margin-top: 6px; font-style: italic; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.victory__hero--art .victory__mode { color: var(--muted-2); }
.vaw__s { font-size: 11.5px; color: var(--muted); margin-top: -3px; }
.vplayers { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; }
.vpl { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); border-top: 3px solid var(--c, var(--muted)); background: var(--surface-2);
  display: flex; flex-direction: column; min-width: 0; }
.vpl--win { border-color: rgba(245,196,81,.6); border-top-color: var(--gold); box-shadow: 0 0 0 1px rgba(245,196,81,.2), 0 10px 26px rgba(245,196,81,.12); }
.vpl__art { position: relative; height: 92px; background: linear-gradient(135deg, #161a24, #0e1118); }
.vpl__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.vpl--out .vpl__art img { filter: grayscale(.85) brightness(.65); }
.vpl__place { position: absolute; left: 9px; top: 5px; font-weight: 900; font-size: 24px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.vpl--win .vpl__place { color: var(--gold); }
.vpl__tag { position: absolute; right: 8px; bottom: 7px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: rgba(10,12,18,.82); color: var(--muted-2); border: 1px solid var(--border); }
.vpl__tag--win { color: var(--gold); border-color: rgba(245,196,81,.55); }
.vpl__body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vpl__nm { font-size: 15px; }
.vpl__cmdr { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpl__stats { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12.5px; color: var(--muted-2); }
.vpl__stats b { font-family: var(--mono); color: var(--text); }
.vpl__xp { margin-top: 7px; align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--gold); background: rgba(245,196,81,.1);
  border: 1px solid rgba(245,196,81,.32); border-radius: 999px; padding: 2px 9px; }
.vpl__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; font-size: 16px; }
.vrec__top { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.vrec__body { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.vrec__who { font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrec__val { font-family: var(--mono); font-weight: 800; color: var(--accent); font-size: 16px; flex: 0 0 auto; }
.vdmg { display: flex; flex-direction: column; gap: 9px; }
.vdmg__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.vdmg__arrow { opacity: .75; }
.vdmg__cell { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; }
.vdmg__cell b { font-family: var(--mono); color: var(--accent); }
.vlist { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.vach { display: flex; flex-direction: column; gap: 10px; }
.vach__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.vach__who { flex: 0 0 auto; margin-right: 3px; }
.vach__badge { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--gold-dim); }
.victory__chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.vchip { padding: 7px 14px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 13.5px; }
.vchip b { font-family: var(--mono); }
.vchip--win { border-color: var(--gold); }
.victory__sup { display: flex; flex-direction: column; gap: 5px; align-items: center;
  font-size: 14px; margin-bottom: 6px; }
.victory__sec { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 6px; text-align: center; }
.victory__list { display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-size: 13.5px; }
.victory__finals { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---- frozen board after the game ends ---- */
.play-wrap--frozen .lifebtn, .play-wrap--frozen .cnbtn, .play-wrap--frozen .cdbtn,
.play-wrap--frozen .condbtn, .play-wrap--frozen .bigtimer, .play-wrap--frozen .pbox__deadmark {
  pointer-events: none; opacity: .55; }
.summarychip { position: fixed; right: 14px; bottom: 14px; z-index: 110; padding: 10px 16px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--gold);
  color: var(--text); font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45); }

[data-theme="wubrg"] { --accent: #e8c15a; --accent-2: #9a6fd0; --bg: #0b0b10; --surface: #131320; --surface-2: #1c1c2e; }
.tablebg[data-theme="wubrg"] { background-image: linear-gradient(rgba(8,8,12,.70), rgba(8,8,12,.84)), url("themes/wubrg.png"); }

/* flying monarch / initiative token + arrival flash */
.flytoken { position: fixed; z-index: 130; font-size: 40px; transform: translate(0, 0);
  transition: transform .85s cubic-bezier(.4, .1, .3, 1); pointer-events: none;
  text-shadow: 0 4px 18px rgba(0,0,0,.7); margin: -20px 0 0 -20px; }
@keyframes pboxflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px var(--gold), 0 0 34px rgba(245,196,81,.5); } }
.pbox--flash { animation: pboxflash 1.1s ease; }

/* dungeon crawl */
.pbox__notifbtn { position: absolute; bottom: 6px; right: 6px; z-index: 6; width: 34px; height: 34px;
  border-radius: 9px; background: rgba(13,15,20,.72); border: 2px solid var(--border); color: var(--accent);
  display: grid; place-items: center; cursor: pointer; }
.pbox__notifbtn:hover { border-color: var(--accent); }
.pbox__notifbtn--blink { animation: menublink 1.2s ease infinite; border-color: var(--accent); }
/* delving no longer forces gold — the notif button pulses gold only while an action is pending (--blink), then returns to theme */
.dngchoices { display: flex; flex-direction: column; gap: 8px; }
.dngchoice { text-align: left; }
.dngmap__panel { width: min(430px, 94vw); }
.dngmap { position: relative; width: 100%; }
.dngmap__img { width: 100%; display: block; border-radius: 12px; }
.dngmap__marker { position: absolute; z-index: 4; font-size: 26px; transform: translate(-50%, -50%);
  cursor: grab; touch-action: none; filter: drop-shadow(0 3px 8px rgba(0,0,0,.8)); }
.dngmap__marker:active { cursor: grabbing; }
.dngroom { position: absolute; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px dashed rgba(255,255,255,.25); background: transparent;
  cursor: default; padding: 0; }
.dngroom--here { border: 2px solid var(--gold); }
@keyframes roomglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(111,179,217,.0); }
  50% { box-shadow: 0 0 0 5px rgba(111,179,217,.4), 0 0 16px rgba(111,179,217,.55); } }
.dngroom--next { border: 2px solid var(--accent); cursor: pointer; animation: roomglow 1.6s ease infinite; }

/* mechanic reminder toggles */
.remset { margin-bottom: 10px; }
.remset__rows { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.remrow { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--text); font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  cursor: pointer; transition: border-color .12s, background .12s; }
.remrow input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.remrow::before { content: '\2713'; font-weight: 900; color: var(--muted); flex: 0 0 auto; opacity: .25; }
.remrow:has(input:checked)::before { color: var(--accent); opacity: 1; }
.remrow:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

/* `hidden` loses to `display:grid` without this — the source of the everything-
   overlay-at-once screenshot. */
.bigoverlay[hidden] { display: none !important; }

/* commander damage received: the bloodied splatter pulses at hit speed */
/* peak opacity scales with --dmgfx (rapid hits ramp it up); splatter sits at the edges so the life total stays readable */
@keyframes bloodpulse { 0% { opacity: 0; } 35% { opacity: min(1, calc(.52 + .26 * var(--dmgfx, 1))); } 100% { opacity: 0; } }
.pbox--fx-dmg .pbox__body::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  z-index: 2; border-radius: inherit; animation: bloodpulse .72s ease-out; opacity: 0;
  background:
    radial-gradient(128px 98px at 6% 92%, rgba(170,12,12,.66), transparent 68%),
    radial-gradient(100px 76px at 94% 9%, rgba(158,10,10,.58), transparent 66%),
    radial-gradient(68px 64px at 80% 88%, rgba(182,18,18,.53), transparent 72%),
    radial-gradient(56px 50px at 15% 16%, rgba(162,14,14,.45), transparent 74%); }
/* red border flash on the hit; ramps with --dmgfx */
@keyframes dmgborder { 0% { opacity: 0; } 30% { opacity: min(1, calc(.25 + .75 * var(--dmgfx, 1))); } 100% { opacity: 0; } }
.pbox--fx-dmg::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(224,42,42,.92), inset 0 0 26px rgba(200,20,20,.55); animation: dmgborder .72s ease-out; opacity: 0; }

/* accent-2 finds a new home: tax + commander-damage labels carry the theme */
.taxpill__sym { color: var(--accent-2); }
.cdgrid .cdcell__nm, .pbox__panel .cmlabel { color: var(--accent-2); }

/* smaller arrow tax buttons */

/* Keep layout isolation so counter/damage updates don't reflow the card, but DON'T use paint
   containment: that promotes the panel to its own compositor layer, and in Firefox/WebRender that
   layer over the animated full-screen ambient canvas triggers a whole-surface recomposite that dims
   and flickers the entire screen. `contain: layout` isolates reflow without creating that layer. */
.pbox__panel { contain: layout; }

/* holder loss: quiet 1s dissolve */
.fadeghost { position: fixed; z-index: 130; font-size: 40px; margin: -20px 0 0 -20px;
  pointer-events: none; opacity: 1; transition: opacity 1s ease, transform 1s ease;
  text-shadow: 0 4px 18px rgba(0,0,0,.7); }
.fadeghost--out { opacity: 0; transform: translateY(-14px) scale(.85); }

/* per-player menu */
@keyframes menublink { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(245,196,81,.45); } }
/* per-player menus cover the whole card, like the tools panel does */
.pmenu { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  background: rgba(13,15,20,.94); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55); overflow: hidden; }
.pmenu[hidden] { display: none; }
.pmenu__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pmenu__title { font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.pmenu__close { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; flex: 0 0 auto; }
.pmenu__close:hover { border-color: var(--accent); }
.pmenu__sec { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 8px 0 6px; }
.pmpane[data-pmpane="settings"] .condbtn--concede { width: 100%; border-color: var(--danger); color: var(--danger); background: var(--surface); border-radius: 9px; padding: 9px; font-weight: 700; margin-top: 12px; }
.pmenu__rems { display: flex; flex-direction: column; gap: 7px; overflow: auto; min-height: 0; }
/* Dice roller (player settings pane) — die look is themed from the player's profile faction via inline vars */
.pmpane--dice { overflow-y: auto; justify-content: center; }
.dicebox { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: 100%; max-width: 320px; margin: auto; padding: 2px 0; }
.dicebox .dieroll { flex: 0 0 calc(25% - 7px); }   /* 4 per row; a short final row (d12/d20/d100) then centers */
.dieroll { position: relative; aspect-ratio: 1; cursor: pointer; border: 0; padding: 0; overflow: hidden;
  background: var(--die-grad, linear-gradient(150deg,#3a4152,#20242f));
  color: var(--die-num, #f2efe6); text-shadow: var(--die-numsh, 0 1px 3px rgba(0,0,0,.85));
  font-weight: 800; font-size: 12px; letter-spacing: .01em; display: grid; place-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
  transition: transform .12s ease, filter .12s ease; -webkit-tap-highlight-color: transparent; }
.dieroll::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%); }
.dieroll:hover { filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)) brightness(1.08); }
.dieroll:active { transform: scale(.92); }
/* die silhouettes (clip-path follows the tumble rotation, so they read as real dice) */
.dieroll.die--circle { border-radius: 50%; }
.dieroll.die--square { border-radius: 22%; }
.dieroll.die--tri     { clip-path: polygon(50% 5%, 95% 92%, 5% 92%); }
.dieroll.die--diamond { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
.dieroll.die--pent    { clip-path: polygon(50% 2%, 98% 39%, 80% 98%, 20% 98%, 2% 39%); }
.dieroll.die--hex     { clip-path: polygon(50% 1%, 95% 26%, 95% 74%, 50% 99%, 5% 74%, 5% 26%); }
.dieroll.die--hept    { clip-path: polygon(50% 1%, 84% 13%, 99% 51%, 80% 93%, 20% 93%, 1% 51%, 16% 13%); }
.dieroll.die--kite    { clip-path: polygon(50% 0, 91% 37%, 50% 100%, 9% 37%); }
.dieroll--rolling { animation: dieroll-tumble .68s cubic-bezier(.3,.7,.4,1); }
@keyframes dieroll-tumble { 0% { transform: rotate(0) scale(1); } 22% { transform: rotate(-20deg) scale(1.08); } 48% { transform: rotate(22deg) scale(.95); } 74% { transform: rotate(-11deg) scale(1.05); } 100% { transform: rotate(0) scale(1); } }
.dieroll--crit { color: var(--die-crit, #ffdf7e);
  filter: drop-shadow(0 0 5px var(--die-crit, #ffdf7e)) drop-shadow(0 0 12px var(--die-crit, #ffdf7e));
  animation: diecritglow 1.1s ease-in-out infinite; }
@keyframes diecritglow {
  0%, 100% { filter: drop-shadow(0 0 4px var(--die-crit, #ffdf7e)) drop-shadow(0 0 9px var(--die-crit, #ffdf7e)); }
  50%      { filter: drop-shadow(0 0 7px var(--die-crit, #ffdf7e)) drop-shadow(0 0 17px var(--die-crit, #ffdf7e)); }
}
@media (prefers-reduced-motion: reduce) { .dieroll--rolling, .dieroll--crit { animation: none; } }
.clog--roll { color: #d9c789; }
.pmenu__notifs { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.pmenu__notif { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
  padding: 6px 8px; background: var(--surface-2); border-radius: 8px; flex: 0 0 auto; }
/* the dungeon status entry pinned at the top of the notifications menu */
.pmenu__dng { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; text-align: left;
  padding: 9px 10px; margin-bottom: 8px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--gold-dim); color: var(--text); flex: 0 0 auto; }
.pmenu__dng:hover { border-color: var(--gold); }
.pmenu__dngroom { color: var(--muted); font-size: 12px; }
.pmenu__dngdone { margin-left: auto; color: var(--gold); font-size: 11px; font-weight: 700; }

/* combat log: flanks the table mid-band at each screen edge, mirrored for the far
   side like a playing card; dims when idle, brightens on activity or tap */
.combatlog { position: fixed; top: var(--board-cy, 50%); transform: translateY(-50%); z-index: 40;
  width: clamp(220px, 24vw, 400px); display: flex; flex-direction: column; gap: 5px;
  opacity: .34; transition: opacity .5s ease; pointer-events: auto; font-size: 12px; line-height: 1.3;
  max-height: min(40vh, 240px); overflow-y: auto; overflow-x: hidden; justify-content: safe center;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scrollbar-width: none; -ms-overflow-style: none; }
.combatlog::-webkit-scrollbar { width: 0; height: 0; display: none; }
.combatlog--hot { opacity: 1; }
/* pinned to each table edge, vertically centred in the mid-band; far side mirrored 180°.
   Separate column from the control cluster (which sits nearer the clock), so no overlap. */
.combatlog--left { left: 12px; align-items: stretch; }
.combatlog--right { right: 12px; transform: translateY(-50%) rotate(180deg); align-items: stretch; }
.combatlog__row { width: 100%; box-sizing: border-box; flex: 0 0 auto; }
.combatlog__row { position: relative; color: var(--muted); box-shadow: inset 3px 0 0 var(--clog-accent, var(--border));
  border-radius: 8px; padding: 5px 9px; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the background box itself is a gradient that fades fully to transparent well before
   the right edge — no border, no mask (mask-on-pseudo wasn't reliably fading) */
.combatlog__row::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(to right, rgba(13,15,20,.72) 12%, rgba(13,15,20,0) 58%); }
.combatlog__row b { color: var(--text); }
.combatlog__row:first-child { color: var(--text); }
.clog__n { font-weight: 800; }
/* action colors — shared by combat log rows and the History pane text */
.combatlog__row.clog--lifeup { --clog-accent: #4f9e60; }
.combatlog__row.clog--lifedown { --clog-accent: #c04545; }
.combatlog__row.clog--dmg { --clog-accent: #4a90d9; }
.combatlog__row.clog--death { --clog-accent: #8a8f9c; }
.combatlog__row.clog--monarch { --clog-accent: var(--gold); }
.combatlog__row.clog--init { --clog-accent: #57c9c0; }
.combatlog__row.clog--bless { --clog-accent: #b98cff; }
.combatlog__row.clog--dng { --clog-accent: #c98e46; }
.combatlog__row.clog--cnt { --clog-accent: #9a6fd0; }
.combatlog__row.clog--tax { --clog-accent: var(--gold-dim); }
.clog--lifeup .clog__n, .histrow__what.clog--lifeup { color: #8fd8a0; }
.clog--lifedown .clog__n, .histrow__what.clog--lifedown { color: #f09a9a; }
.clog--dmg .clog__n, .histrow__what.clog--dmg { color: #9cc4f0; }
.histrow__what.clog--death { color: #c9ccd6; }
.combatlog__row.clog--monarch b, .histrow__what.clog--monarch { color: var(--gold); }
.combatlog__row.clog--init b, .histrow__what.clog--init { color: #57c9c0; }
.histrow__what.clog--bless { color: #cbaaff; }
.histrow__what.clog--dng { color: #e0b077; }
.histrow__what.clog--cnt { color: #bfa0e8; }
.histrow__what.clog--tax { color: var(--gold); }

/* history hierarchy */
.histround { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold); margin: 8px 0 4px; }
.histturn { display: flex; gap: 8px; align-items: center; padding: 5px 2px; }
.histturn__revert { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.histturn__revert:hover { border-color: var(--accent); }
.histturn__lbl { font-weight: 700; font-size: 13px; }
.histturn__tn { color: var(--muted-2); font-weight: 400; font-size: 11px; }
.histturn--cur .histturn__lbl { color: var(--accent); }
.histturn__expand { margin-left: auto; background: none; border: 0; color: var(--accent);
  cursor: pointer; font-size: 12px; }
.histevs { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px 36px; }

/* reference book */
.refcols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .refcols { grid-template-columns: 1fr; } }
/* the rules book reads as a phase flowchart: each phase header is a node, joined by a
   down-arrow connector, so it echoes the dungeon-card chart look */
.refph { position: relative; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 8px; margin: 20px 0 8px; border: 1px solid transparent; }
.refph:first-child { margin-top: 4px; }
.refph::before { content: ""; position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  width: 2px; height: 12px; background: var(--border); }
.refph::after { content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--border); }
.refph:first-child::before, .refph:first-child::after { display: none; }
.refph--beg { background: rgba(90,168,105,.16); color: #a8d9b4; border-color: rgba(90,168,105,.4); }
.refph--main { background: rgba(232,193,90,.14); color: #e8d9a8; border-color: rgba(232,193,90,.38); }
.refph--cmb { background: rgba(74,144,217,.16); color: #a8c6e8; border-color: rgba(74,144,217,.42); }
.refph--end { background: rgba(217,106,60,.16); color: #e8b8a0; border-color: rgba(217,106,60,.4); }
.refstep { font-size: 13.5px; color: var(--text); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.refstep:last-child { border-bottom: 0; }

/* Planechase Eternities Map board (rules-book Planechase tab) */
.pcboard { display: flex; flex-direction: column; gap: 12px; }
.pcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 620px; margin: 0 auto; }
.pccell { position: relative; aspect-ratio: 7 / 5; border-radius: 10px; overflow: hidden; background: #0c0e15;
  border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; }
.pccell--empty { background: transparent; border: 1px dashed rgba(255,255,255,.05); }
.pccard { display: block; }
/* Planar art AND the card back are portrait but read landscape → rotate 90° CW. A rotated element
   keeps its pre-rotation layout box, so max-width/height fights us; instead we size the image to the
   cell's TRANSPOSE (width = cell height 5/7, height = cell width 7/5) and object-fit: cover, so after
   rotating it fills the cell exactly with no gaps. Applies to face-up planes and the hellride backs. */
.pccell--face .pccard,
.pccell--back .pccard {
  position: absolute; top: 50%; left: 50%;
  width: 71.43%; height: 140%; object-fit: cover;
  transform: translate(-50%, -50%) rotate(90deg); transform-origin: center;
}
/* Current plane: no badge — a shimmering gold border (a masked gradient ring that sweeps). */
@property --pcang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pccell--active { border-color: transparent; }
.pccell--active::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  /* gold border with a highlight that sweeps around it; conic rotation loops seamlessly (0deg == 360deg),
     unlike a diagonal background-position shift whose loop seam never lines up -> the old end-of-cycle stutter. */
  background: conic-gradient(from var(--pcang), #b8912f, #f3d67a 22%, #fff6cf 32%, #f3d67a 42%, #b8912f 62%, #b8912f 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pcshimmer 2.4s linear infinite;
}
@keyframes pcshimmer { to { --pcang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .pccell--active::after { animation: none; } }
/* Active plane is a phenomenon: same sweeping ring, purple instead of gold. Doubled class beats the
   gold `.pccell--active::after` on specificity (not just source order), so it wins regardless of order. */
.pccell--active.pccell--activeph::after { background: conic-gradient(from var(--pcang), #6d3bb0, #b47bff 22%, #e6d4ff 32%, #b47bff 42%, #6d3bb0 62%, #6d3bb0 100%); }
.pccell--move { cursor: pointer; }
.pccell--move:hover { border-color: var(--gold); }
.pccell--hell { cursor: pointer; border-style: dashed; opacity: .92; }
.pccell--hell:hover { opacity: 1; border-color: var(--gold); }
.pccell__badge { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em; background: rgba(8,9,13,.8); color: var(--muted);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.pccell__badge--ph { top: 4px; bottom: auto; color: #e8c15a; }
.pccell--active .pccell__badge { color: var(--accent); }
/* Phase 3 deal/reveal: the card lives in a wrapper so we can flip / deal it in without fighting the 90° art rotate. */
.pccardwrap { position: absolute; inset: 0; }
@keyframes pcflip { from { transform: rotateY(-92deg); } to { transform: rotateY(0); } }
@keyframes pcdealin { from { transform: translateY(-55%) scale(.72); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes pchellnew {
  0%   { box-shadow: 0 0 16px 3px rgba(255,80,18,.85), inset 0 0 0 2px rgba(255,120,40,.7); }
  35%  { box-shadow: 0 0 30px 9px rgba(255,70,10,.95), inset 0 0 0 2px rgba(255,150,60,.9); }
  100% { box-shadow: 0 0 0 0 rgba(255,70,10,0), inset 0 0 0 0 rgba(255,70,10,0); }
}
@keyframes pcphnew {   /* phenomenon: a purple glow pulse, same shape as the hellride flash */
  0%   { box-shadow: 0 0 18px 4px rgba(150,70,255,.85), inset 0 0 0 2px rgba(185,125,255,.75); }
  35%  { box-shadow: 0 0 34px 11px rgba(140,60,255,.95), inset 0 0 0 2px rgba(200,145,255,.9); }
  100% { box-shadow: 0 0 0 0 rgba(140,60,255,0), inset 0 0 0 0 rgba(140,60,255,0); }
}
.pccell--reveal .pccardwrap { animation: pcflip .5s cubic-bezier(.3,.7,.3,1) both; }
.pccell--dealt .pccardwrap { animation: pcdealin .45s cubic-bezier(.2,.7,.3,1) both; }
.pccell--hellnew { animation: pchellnew 1.25s ease-out .38s both; }
.pccell--phnew { animation: pcphnew 1.5s ease-out .38s both; }
@media (prefers-reduced-motion: reduce) {
  .pccell--reveal .pccardwrap, .pccell--dealt .pccardwrap, .pccell--hellnew, .pccell--phnew { animation: none; }
}
.pcnodeck { grid-column: 1 / 4; padding: 26px; text-align: center; }
.pcactive { text-align: left; max-width: 640px; margin: 0 auto; }
.pcactive__name { font-weight: 700; color: var(--accent); }
.pcactive__oracle { color: var(--text); white-space: pre-wrap; margin: 4px 0 0; }
.pcctrls { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pcdie { color: var(--muted); min-width: 60px; text-align: left; }
/* transient die overlay: pops in centered over the active plane on a roll, holds, then fades (JS-timed) */
.pcdieover { position: absolute; left: 50%; top: 50%; z-index: 4; opacity: 0; pointer-events: none;
  transform: translate(-50%, calc(-50% - 8px)) scale(.85);
  transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.3,1); }
.pcdieover--show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pcdieover[hidden] { display: none; }
.pcdiebox {
  width: 66px; height: 66px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(150deg, #3f88db, #1e4d8e); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.32), inset 0 -3px 7px rgba(0,0,0,.38), 0 8px 20px rgba(0,0,0,.5);
}
.pcdiebox svg { width: 38px; height: 38px; }
.pcdiebox--rolling { animation: pcdieroll .72s ease-in-out; }
@keyframes pcdieroll {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(-19deg) scale(1.08); }
  50%  { transform: rotate(21deg) scale(.95); }
  75%  { transform: rotate(-11deg) scale(1.05); }
  100% { transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .pcdiebox--rolling { animation: none; } }

/* ---- Planechase board dressing: wallpaper, runic move controls, tap-to-preview (Phase 1) ---- */
#pcBoard { position: relative; overflow: hidden; border-radius: 14px; padding: 14px 12px 16px; }
#pcOverlay #pcBoard { border-radius: 0; padding: 46px 20px 22px; }   /* full-bleed galaxy: no rounded frame; top pad clears the floating close */
#pcBoard::before {                               /* ambient galaxy wallpaper, slow drift */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/static/img/planechase-bg.webp") center/cover no-repeat; opacity: .5;
  animation: pcdrift 60s ease-in-out infinite;
}
#pcBoard::after {                                /* darken for legibility */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(8,9,13,.32), rgba(8,9,13,.85));
}
#pcBoard > *:not(#pcMotes) { position: relative; z-index: 1; }
.pcmotes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }   /* absolute backdrop -> paints behind the map, above the wallpaper; must NOT be an in-flow flex item */
@keyframes pcdrift {
  0%   { transform: scale(1.06) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-1.5%, -1%); }
  100% { transform: scale(1.06) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { #pcBoard::before { animation: none; } }

.pcviewport { position: relative; width: 100%; max-width: 820px; height: min(62vh, 560px); margin: 0 auto; overflow: hidden; border-radius: 12px; touch-action: pan-y; }
/* Planechase gets its own full-screen menu (no tabs); the board fills it and the map viewport grows.
   `.bigoverlay` has 18px padding for the centered boxed overlays — zero it here and size the panel to
   100% (not 100vw, which counts the scrollbar) so the panel truly covers the viewport, corner to corner. */
#pcOverlay { padding: 0; }
.bigoverlay__panel--full { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.pcoverlay__close { position: absolute; top: 10px; right: 14px; z-index: 6; }
#pcOverlay #pcBoard { flex: 1 1 auto; justify-content: center; }
#pcOverlay .pcviewport { max-width: min(1200px, 95vw); height: auto; flex: 1 1 0%; min-height: 0; }
/* Reserve a stable height for the name+oracle so a long oracle can't shrink the map viewport above it.
   The map is centered in the viewport; if the viewport resized per plane, the whole grid jumped
   vertically each move. Fixed height + internal scroll keeps the grid rock-steady between planes. */
#pcOverlay .pcactive { flex: none; height: 148px; overflow-y: auto; }
.pcworld { position: absolute; top: 50%; left: 50%; transform-origin: 0 0; transition: transform .4s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.pccells, .pcworld .pcarrows { position: absolute; top: 0; left: 0; }
.pcworld .pcarrows { pointer-events: none; }
.pcworld .pccell { position: absolute; left: 0; top: 0; width: 150px; height: 108px; aspect-ratio: auto; margin: 0; perspective: 640px; }
.pcworld .pcarrow { left: 0; top: 0; }
.pczoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 3; }
.pczoombtn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: rgba(12,14,20,.82); color: var(--text); cursor: pointer; font-size: 17px; line-height: 1; display: grid; place-items: center; }
.pczoombtn:hover { border-color: var(--accent); }
.pccell--face { cursor: zoom-in; }

.pcarrows { position: absolute; inset: 0; pointer-events: none; }
.pcarrow {
  position: absolute; width: 38px; height: 38px; display: grid; place-items: center;
  pointer-events: auto; cursor: pointer; border-radius: 50%; border: 1.5px solid var(--gold);
  color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(20,22,30,.94), rgba(8,9,13,.94));
  box-shadow: 0 0 10px rgba(0,0,0,.5); transition: box-shadow .12s, filter .12s;
}
.pcarrow:hover { box-shadow: 0 0 15px rgba(212,175,55,.55); filter: brightness(1.15); }
.pcarrow svg { width: 20px; height: 20px; }
.pcarrow--hell { border-color: #e0533a; color: #ff6a4d; }
.pcarrow--hell:hover { box-shadow: 0 0 16px rgba(224,83,58,.6); }
/* rune points up by default; each direction rotates it while the translate keeps it on the edge/corner */
.pcarrow--n  { top: 33.33%; left: 50%;    transform: translate(-50%,-50%) rotate(0deg); }
.pcarrow--s  { top: 66.66%; left: 50%;    transform: translate(-50%,-50%) rotate(180deg); }
.pcarrow--e  { top: 50%;    left: 66.66%; transform: translate(-50%,-50%) rotate(90deg); }
.pcarrow--w  { top: 50%;    left: 33.33%; transform: translate(-50%,-50%) rotate(-90deg); }
.pcarrow--ne { top: 33.33%; left: 66.66%; transform: translate(-50%,-50%) rotate(45deg); }
.pcarrow--nw { top: 33.33%; left: 33.33%; transform: translate(-50%,-50%) rotate(-45deg); }
.pcarrow--se { top: 66.66%; left: 66.66%; transform: translate(-50%,-50%) rotate(135deg); }
.pcarrow--sw { top: 66.66%; left: 33.33%; transform: translate(-50%,-50%) rotate(-135deg); }
.pchint { text-align: center; margin: 8px auto 0; max-width: 560px; opacity: .82; }

.pcpreview {
  position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px;
  background: rgba(6,7,11,.86); cursor: zoom-out; animation: pcfade .16s ease-out;
}
.pcpreview__frame {
  position: relative; width: min(86vw, 560px); aspect-ratio: 7 / 5;
  border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.pcpreview__card {                               /* portrait source rotated to landscape; show the whole card */
  position: absolute; top: 50%; left: 50%;
  width: 71.43%; height: 140%; object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg);
}
.pcpreview__meta { max-width: min(86vw, 560px); text-align: left; }
.pcpreview__name { font-weight: 700; color: var(--gold); font-size: 18px; margin-bottom: 4px; }
.pcpreview__oracle { color: var(--text); white-space: pre-wrap; line-height: 1.4; }
.pcpreview[hidden] { display: none !important; }   /* display:flex above defeats the bare [hidden] attr without this */
.pcpreview--flip { transform: rotate(180deg); }   /* tapped from the top rail -> upright for that side of the table */
@keyframes pcfade { from { opacity: 0; } to { opacity: 1; } }

/* day/night active highlight */
.dnbtn.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,196,81,.3); }

/* global effect toggles + rotating indicator */
.fxgrid { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.fxchip { padding: 6px 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); color: var(--text); font-size: 12px; cursor: pointer; }
.fxchip--on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.fxland { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin: 2px 0 4px; }
.fxwho { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin: 2px 0 4px; }
.fxwho::before { content: 'Who?'; flex: 0 0 100%; font-size: 11px; color: var(--muted); }
.fxwho__opt { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.fxchip--custom { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.fxcustom { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.fxcustom__add { padding: 6px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); cursor: pointer; font-size: 12px; }
.fxcustom__list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fxcustom__row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.fxcustom__lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxcustom__edit, .fxcustom__del { flex: 0 0 auto; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; padding: 2px 7px; }
.fxcustom__form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fxcustom__in { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 6px 8px; font-size: 12px; }
.fxcustom__in--emoji { width: 56px; text-align: center; }
.fxcustom__in--name { flex: 1 1 120px; min-width: 120px; }
.fxcustom__in--short { flex: 1 1 90px; min-width: 90px; }
.fxcustom__save { padding: 6px 12px; border-radius: 8px; background: var(--gold); border: none; color: #1a1408; font-weight: 700; cursor: pointer; }
.fxcustom__cancel { padding: 6px 10px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.fxmini__it, .fxrune { pointer-events: auto; cursor: pointer; }
.fxrune { background: var(--surface-2); border: 2px solid var(--accent-2); color: var(--accent); opacity: 1;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; line-height: 0;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-2), 0 0 14px -6px var(--accent);
  transition: border-color .15s, box-shadow .2s; }
.fxrune:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent), 0 0 18px -5px var(--accent); }
.fxindic { margin-top: 4px; font-size: 11.5px; color: var(--gold); letter-spacing: .02em; }

/* the window frame each effect subtly claims — all stackable */
/* dungeon: filled marker + the trail you carved */
.dngmap__marker { width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(circle at 40% 35%, #f0d68a, #b8862e); border-radius: 50%;
  border: 2px solid #7a5a1a; box-shadow: 0 3px 10px rgba(0,0,0,.7); }
.dngtrail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.dngtrail__path { fill: none; stroke: #d43a3a; stroke-width: 1.6; stroke-dasharray: 3 4;
  stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }

/* overlays sit above the clock menu */
.bigoverlay { z-index: 200; }

/* cube tiles are links; don't underline a whole stats panel on hover */
.cubebig, .cubebig:hover, .cubebig *, .cubebig:hover * { text-decoration: none; }

/* ============ sprint: dungeons-in-notifs, rules book, richer victory ============ */
/* generic far-side flip for any big-overlay panel (rules book, dungeon card) */
.bigoverlay__panel--flip { transform: rotate(180deg); }

/* rules-book runes flanking the clock, slightly smaller than the menu runes */
.clockbtn--book { width: 42px; height: 42px; }
.clockbtn--book .runeicon { transform: rotate(180deg); }
.clockbtn--book.clockbtn--flip .runeicon { transform: rotate(180deg); }

/* per-player Status page inside the tools panel */
.statusgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* dungeon-complete: banner on the card, then a pulse on the player box after close */
.dngdone { margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 13px;
  border: 1px solid var(--gold-dim); color: var(--gold); background: rgba(245,196,81,.08); }
@keyframes dngdonepulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
  30% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 3px #c98e46, 0 0 26px rgba(201,142,70,.6); }
  65% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 2px var(--gold), 0 0 18px rgba(245,196,81,.5); } }
.pbox--fx-dungeon { animation: dngdonepulse 2.2s ease; }

/* victory overlay: analytics blocks reuse the game-page chart / snapshot styles */
.victory__chart { margin: 8px 0 0; max-width: 760px; }
.victory__chart .lifechart { width: 100%; height: auto; }
.victory__dmg div { font-size: 13px; }
.snapgrid--victory { margin-top: 6px; }
.victory__panel--flip .lifechart { transform: none; }

/* history rows: card-like, calmer hierarchy */
.histturn { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px 8px; }
.histevs { margin: 1px 0 4px 14px; }
.histevs[hidden] { display: none; }
.histrow { background: rgba(13,15,20,.45); border-radius: 8px; }

/* rules book: fully opaque so nothing from the board bleeds through the text */
#refPanel { background: var(--bg); border-color: var(--border); }

/* ---- round 6: gear button, notif subtabs, persistent status lines, statuses-under-counters ---- */
/* faded settings gear at the card's top-left — quieter than the other icons on purpose */
.pbox__gearbtn { position: absolute; top: 6px; left: 6px; z-index: 7; width: 32px; height: 32px;
  border-radius: 9px; background: rgba(13,15,20,.5); border: 1px solid var(--border);
  color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: .55;
  transition: opacity .15s, border-color .15s, color .15s; }
.pbox__gearbtn:hover { opacity: 1; border-color: var(--accent); color: var(--text); }
.table-row--top .pbox__gearbtn svg { transform: rotate(180deg); }

/* notification panel subtabs (alerts / settings) */
.pmenu__tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.pmtab { flex: 1 1 0; background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  border-radius: 9px; padding: 7px 6px; font-weight: 700; font-size: 12px; cursor: pointer; }
.pmtab.is-active { color: var(--accent); border-color: var(--accent); }
.pmpane { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pmpane[hidden] { display: none; }
.pmpane[data-pmpane="alerts"] { overflow-y: auto; }
.pmenu__status { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

/* persistent radiation status line (mirrors the dungeon line styling) */
.pmenu__rad { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; text-align: left;
  padding: 9px 10px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid rgba(224,140,60,.4); color: var(--text); flex: 0 0 auto; }
.pmenu__radsub { color: var(--muted); font-size: 12px; }
/* monarch + initiative reminder bars — clickable, styled like the dungeon line */
.pmenu__mon, .pmenu__init { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline;
  text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); color: var(--text); flex: 0 0 auto; }
.pmenu__mon { border: 1px solid var(--gold-dim); }
.pmenu__mon:hover { border-color: var(--gold); }
.pmenu__init { border: 1px solid rgba(87,201,192,.45); }
.pmenu__init:hover { border-color: #57c9c0; }
.pmenu__statsub { color: var(--muted); font-size: 12px; }
/* author display:flex on the status bars beats the UA [hidden] rule, so a hidden bar rendered as
   an empty box (the stray blank box in the alerts pane). Restore hiding at higher specificity. */
.pmenu__dng[hidden], .pmenu__rad[hidden], .pmenu__mon[hidden], .pmenu__init[hidden] { display: none; }
/* dungeon history list when not currently delving */
.pmenu__dnglist { flex-basis: 100%; display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.pmenu__dngrow { font-size: 12px; color: var(--text); }
.pmenu__dngrow b { color: var(--gold); }

/* board-status block merged beneath the counters row */
.cntstatus { margin-top: 4px; }
.cntstatus .cmddmg__cap { margin-bottom: 5px; }

/* commander damage as a 2x2 grid (4-player pods) instead of 3+1 wrap */
.cmddmg { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; justify-content: stretch; }
.cmddmg__cell { min-width: 0; }

/* ---- MIRRORED mid-band controls. Buttons and globals are SEPARATE fixed layers (a
   pointer-events:none parent with clickable children is unreliable in the iPad WebView, which
   is why the buttons went dead). --clock-r / --clk-top / --clk-bot are measured by JS.
   HARD RULE: mid-band gutter only, never overlaps player cards. --btnzone reserves the button
   row's height so the globals sit just above it. ---- */
:root { --btnzone: 78px; }

/* menu + rules-book buttons: own layer at each side's clock-bottom corner, 12px off the clock */
.ctrlbtns { position: fixed; z-index: 45; display: flex; gap: 14px; align-items: flex-end; }   /* flex-end -> 42px buttons bottom-align with the 54px menu; their tops line up with each other */
.clockbtn--sm { width: 42px; height: 42px; }
.ctrlbtns--near { right: calc(50% + var(--clock-r, 112px) + 15px); bottom: calc(var(--clk-bot, calc(50% - 112px)) + 2px); }
.ctrlbtns--far  { left:  calc(50% + var(--clock-r, 112px) + 15px); top:  calc(var(--clk-top, calc(50% - 112px)) + 2px); transform: rotate(180deg); }

/* global-effects: flat text (no boxes), icon on the clock side, text right-aligned. Sits just
   above the buttons and stacks bottom→top; JS gives each row a translateX so the stack arcs
   along the clock's edge. Far side mirrors via the 180° rotation. Opacity transition = the
   fade used when rotating batches (>5 active). */
.fxmini { position: fixed; z-index: 44; pointer-events: none; display: flex; flex-direction: column-reverse;
  gap: 9px; width: clamp(150px, 15vw, 200px); transition: opacity .26s ease; }
.fxmini--near { right: calc(50% + var(--clock-r, 112px) + 20px);
  bottom: calc(var(--clk-bot, calc(50% - 112px)) + var(--btnzone)); align-items: flex-end; }
.fxmini--far  { left:  calc(50% + var(--clock-r, 112px) + 20px);
  top:  calc(var(--clk-top, calc(50% - 112px)) + var(--btnzone)); align-items: flex-end; transform: rotate(180deg); }
.fxmini--empty { display: none; }
.fxmini__it { display: flex; flex-direction: row-reverse; justify-content: flex-start; text-align: right;
  align-items: center; gap: 8px; box-sizing: border-box; max-width: 100%;
  color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.92), 0 0 3px rgba(0,0,0,.85);
  transition: transform .28s cubic-bezier(.45,0,.2,1), opacity .26s ease; }
.fxmini__ic { font-size: 13px; letter-spacing: 0; flex: 0 0 auto; }
.fxmini__it--day { color: var(--gold); }
.fxmini__it--night { color: #8ab4e8; }
.fxmini__it--plane { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font-family: inherit; color: #e9c765; }
/* Scheme + ongoing chips are <button>s too — WITHOUT this reset the iPad drew them as native
   buttons (the boxes around the Archenemy globals). They read like every other global now,
   just in villain red; the ongoing rail sits a shade paler so it's distinguishable at a glance. */
.fxmini__it--scheme, .fxmini__it--ongoing {
  appearance: none; -webkit-appearance: none; background: none; border: 0; box-shadow: none;
  padding: 0; margin: 0; font-family: inherit; text-align: right; }
.fxmini__it--scheme { color: #e8564a; }
.fxmini__it--ongoing { color: #e0897f; }
/* long scheme names scroll instead of clipping to an ellipsis */
.fxmini__lbl { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fxmini__lbl--mq { text-overflow: clip; }
.fxmini__lbl--mq > * , .fxmini__lbl--mq { will-change: transform; }
.fxmini__lbl--mq { animation: fxmq var(--mqt, 8s) ease-in-out infinite alternate; }
@keyframes fxmq { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--mqd, 0px))); } }
@media (prefers-reduced-motion: reduce) { .fxmini__lbl--mq { animation: none; text-overflow: ellipsis; } }

/* ---- round 7: achievements folded into the notif panel as a tab ---- */
.pmenu__achlist { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow: auto; }
.pmenu__achit { display: flex; gap: 9px; align-items: flex-start; padding: 7px 9px;
  background: var(--surface-2); border: 1px solid var(--gold-dim); border-radius: 9px; }
.pmenu__achemoji { font-size: 17px; line-height: 1.1; flex: 0 0 auto; }
.pmenu__achtxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmenu__achtxt b { color: var(--gold); font-size: 12.5px; }
.pmenu__achtxt small { color: var(--muted); font-size: 11px; line-height: 1.25; }
/* the three tabs share the row now; keep them from crowding the emoji-only ones */
.pmenu__tabs .pmtab { padding: 7px 4px; }

/* ---- round 7: readability + overflow tiers for 3/4/5/6-player pods ---- */
/* .table-play--sc is applied at 5+ seats; cards get narrower, so tighten internals.
   Width-aware clamps above handle the life number; these trim the surrounding chrome. */
.table-play--sc .pbox__body { padding: 10px 12px; gap: 3px; }
.table-play--sc .pbox__toggle { padding: 5px 10px; font-size: clamp(11px, 3.6cqh, 16px); }
.table-play--sc .taxpill { padding: 2px 8px; gap: 6px; }
.table-play--sc .taxseg { padding: 3px 6px; }
.table-play--sc .taxseg .counter__val { font-size: 14px; }
.table-play--sc .counter { gap: 4px; padding: 3px 6px; }
.table-play--sc .counter__val { min-width: 1.5ch; }
.table-play--sc .cnbtn { width: 26px; height: 26px; }
/* commander-damage grid stays 2x2 but with tighter cells on small cards */
.table-play--sc .cmddmg { gap: 6px; }
.table-play--sc .cmddmg__cell { padding: 4px 6px; }
.table-play--sc .cmddmg__who { font-size: 10px; }

/* six-player pods (3 across per row) are the tightest — clamp harder still */
.table-play[style*="--cols:3"] .table-row--bottom .pbox__name,
.table-play[style*="--cols:3"] .table-row--top .pbox__name { font-size: clamp(13px, min(7cqh, 8cqw), 22px); }
.table-play[style*="--cols:3"] .pbox__toggle { font-size: clamp(10px, 3.2cqh, 14px); padding: 4px 8px; }

/* the panel (dmg/counters/status) can scroll rather than overflow on any card size */
.pbox__panel { overflow-y: auto; }
.cntstatus .condbtn, .statusgrid .condbtn { font-size: clamp(11px, 3.2cqh, 13px); padding: 7px 8px; }

/* board-status tiles light up when the effect is on (tap the tile again to toggle it off) */
.pbox--monarch  .condbtn[data-cond="monarch"],
.pbox--init     .condbtn[data-cond="initiative"],
.pbox--blessed  .condbtn[data-cond="blessing"],
.pbox--protected .condbtn[data-cond="protect"],
.pbox--cantlose .condbtn[data-cond="cantlose"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px -4px var(--accent);
}

/* full-cover card message (monarch end-step reminder etc.) — fades in 1s, holds, fades out 1s */
.pbox__bigmsg { position: absolute; inset: 0; z-index: 26; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(6px, 2cqh, 14px); padding: 10px; text-align: center;
  background: rgba(11,13,18,.9); border-radius: var(--radius); pointer-events: none;
  opacity: 0; transition: opacity 1s ease; }
.pbox__bigmsg[hidden] { display: none; }
.pbox__bigmsg--in { opacity: 1; }
.pbox__bigmsg-ttl { font-size: clamp(30px, 17.5cqh, 84px); font-weight: 800; line-height: 1.02; color: var(--accent); }
.pbox__bigmsg-sub { font-size: clamp(14px, 6.5cqh, 32px); line-height: 1.2; color: var(--text); max-width: 94%; }

/* alerts panel: any status row that's showing IS an active reminder — light it up, themed */
.pmenu__dng, .pmenu__init, .pmenu__mon, .pmenu__rad {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 12px -5px var(--accent);
}
.pmenu__dng:hover, .pmenu__init:hover, .pmenu__mon:hover, .pmenu__rad:hover {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px -4px var(--accent);
}
/* initiative reads as a child of the dungeon it belongs to */
.pmenu__dng:not([hidden]) ~ .pmenu__init { margin-left: 16px; position: relative; }
.pmenu__dng:not([hidden]) ~ .pmenu__init::before {
  content: '\21b3'; position: absolute; left: -13px; top: 9px; color: var(--muted-2); font-size: 13px;
}
/* don't say "Nothing yet" while a passive reminder (dungeon / initiative / monarch / radiation) is showing */
.pmpane[data-pmpane="alerts"]:has(.pmenu__status > :not([hidden])) .pmenu__empty { display: none; }
/* one menu at a time, covering the card cleanly — hide the avatar, name and bell underneath */
.pbox--tools .pbox__who, .pbox--tools .pbox__notifbtn { display: none; }
.pbox:has(.pmenu--notifs:not([hidden])) .pbox__who,
.pbox:has(.pmenu--notifs:not([hidden])) .pbox__notifbtn { display: none; }

/* rad / energy / experience counters under the name, shown with a count like poison */
.pbox--rad .cond--rad { display: inline-flex; }
.cond--rad { align-items: center; gap: 2px; color: #7ed957; }
.cond--rad .cond__n { font-size: 13px; font-weight: 800; }
.pbox--energy .cond--energy { display: inline-flex; }
.cond--energy { align-items: center; gap: 2px; color: #ffd84d; }
.cond--energy .cond__n { font-size: 13px; font-weight: 800; }
.pbox--experience .cond--experience { display: inline-flex; }
.cond--experience { align-items: center; gap: 2px; color: #8ab4ff; }
.cond--experience .cond__n { font-size: 13px; font-weight: 800; }

/* radiation mill check — enter nonland cards milled, apply -life / -rad */
.radmill { display: flex; align-items: center; gap: 6px; flex-basis: 100%; margin-top: 7px; flex-wrap: wrap; }
.radmill__lbl { color: var(--muted-2); font-size: 12px; }
.radmill__in { width: 56px; background: var(--surface); border: 1px solid var(--accent-2); color: var(--text);
  border-radius: 8px; padding: 4px 6px; font-size: 13px; text-align: center; }
.radmill__go { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); border: 1px solid var(--accent);
  color: var(--text); border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.radmill__go:hover { box-shadow: 0 0 12px -4px var(--accent); }

/* radiation notification: compact "how many nonland milled?" row with -/+ and Apply */
.pmenu__rad { align-items: center; gap: 6px 8px; padding: 8px 10px; font-size: 12.5px; }
.radq { font-size: 12px; color: var(--muted-2); }
.radcnt { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.radcn { width: 24px; height: 24px; border-radius: 6px; background: var(--surface); border: 1px solid var(--accent-2);
  color: var(--text); font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.radcn:hover { border-color: var(--accent); box-shadow: 0 0 10px -4px var(--accent); }
.radcnt__val { min-width: 1.5ch; text-align: center; font-size: 14px; font-weight: 800; }
.radgo { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); border: 1px solid var(--accent);
  color: var(--text); border-radius: 7px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.radgo:hover { box-shadow: 0 0 12px -4px var(--accent); }

/* protection: life is LOCKED — dim/disable the +/- and show a clear blue shield ring */
.pbox--protected .lifebtn { opacity: .3; pointer-events: none; }
.pbox--protected .pbox__lifeval { cursor: default; }
.pbox--protected { box-shadow: inset 0 0 0 3px #6db2ee, 0 0 26px -4px #6db2ee; }

/* play-card avatar hover: glow only, no upload arrow (upload comes later) */
.pbox__who .avatar:hover::after { content: none; }
.pbox__who .avatar:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 12px -3px var(--accent); }

/* custom-global emoji picker (replaces the type-an-emoji field) */
.fxemoji { position: relative; }
.fxemoji__btn { width: 46px; height: 36px; font-size: 20px; background: var(--surface-2); border: 1px solid var(--accent-2); border-radius: 9px; color: var(--text); cursor: pointer; display: grid; place-items: center; line-height: 1; }
.fxemoji__btn:hover { border-color: var(--accent); }
.fxemoji__grid { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: min(86vw, 408px); max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; padding: 12px;
  background: var(--surface); border: 1px solid var(--accent-2); border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0,0,0,.62); }
.fxemoji__opt { aspect-ratio: 1; font-size: 22px; line-height: 1; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .07s; }
.fxemoji__opt:hover { background: color-mix(in srgb, var(--accent) 26%, var(--surface-2)); border-color: var(--accent); }
.fxemoji__opt:active { transform: scale(.88); }

/* ---- pre-game state: before the game is started (Tap to Start) ---- */
.play-wrap.pregame { --accent: #6b7280; --accent-2: #6b7280; }        /* grey the themed table borders/accents */
.play-wrap.pregame .tablebg { filter: grayscale(1) brightness(.5); }  /* wallpaper still shows, greyed */
.play-wrap.pregame .bigtimer__art { background-image: url("img/pw-clock-bg.png") !important;
  background-size: 108%; background-repeat: no-repeat; background-position: center; opacity: .92; filter: none; }
.play-wrap.pregame #timerDisplay, .play-wrap.pregame #timerHint, .play-wrap.pregame #gameClock { display: none; }
.play-wrap.pregame #activeName { font-size: clamp(15px, 3.8vw, 22px); font-weight: 800; letter-spacing: .02em; color: #fff;
  white-space: normal; line-height: 1.03; max-width: 90%; text-shadow: 0 1px 2px #000, 0 2px 10px rgba(0,0,0,.85); }
.play-wrap.pregame #timerTurn { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #fff;
  margin-top: 4px; text-shadow: 0 1px 2px #000; }
.play-wrap.pregame .ctrlbtns, .play-wrap.pregame .fxmini, .play-wrap.pregame .ambientfx { opacity: 0; pointer-events: none; }   /* hide menu/rules + globals + ambient until start */
.play-wrap.pregame .pbox__who, .play-wrap.pregame .pbox__notifbtn { opacity: 0; pointer-events: none; }  /* showcase overlays the corners; fade in on start */
.play-wrap.pregame .pbox__body > *:not(.pbox__bigmsg) { opacity: 0; pointer-events: none; }             /* tax pill / life / toggle / panel hidden until start */
/* the shared pool lives OUTSIDE .pbox__body (sibling of the seat cards), so the rule above never
   reached it — it painted its life total and ± buttons straight over the commander showcase */
.play-wrap.pregame .teamwrap__lifewrap { opacity: 0; pointer-events: none; }
/* fade the whole board in over ~2.5s when the game starts (covers colour, wallpaper, buttons, showcase) */
.play-wrap.pg-starting, .play-wrap.pg-starting * { transition:
  background-color 2.5s ease, border-color 2.5s ease, color 2.5s ease,
  box-shadow 2.5s ease, opacity 2.5s ease, filter 2.5s ease !important; }
/* selected first player: static white/greyscale "it's your turn" border */
.play-wrap.pregame .pbox--active { border-color: #e8ecf2; box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 22px -3px rgba(232,236,242,.9); }
/* Tagline announce — a speech bubble over each player's card at game start (body-level, overlays all) */
.taglinebubble { position: fixed; z-index: 6000; left: 0; max-width: min(54vw, 440px);
  padding: 13px 18px 14px; border-radius: 15px; background: #f7f4ea; color: #16181f;
  font-weight: 700; font-size: clamp(17px, 3vw, 24px); line-height: 1.3; text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.18); pointer-events: none; opacity: 0;
  transform: translateX(-50%) var(--tf, ) scale(.9);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1); }
.taglinebubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: #f7f4ea; border-bottom: 0; }
.taglinebubble--show { opacity: 1; transform: translateX(-50%) var(--tf, ) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .taglinebubble { transform: translateX(-50%) var(--tf, ); transition: opacity .5s ease; }
  .taglinebubble--show { transform: translateX(-50%) var(--tf, ); }
}
.play-wrap.pregame .table-row--top .pbox--active { border-color: #e8ecf2; box-shadow: 0 -8px 24px rgba(0,0,0,.5), 0 0 22px -3px rgba(232,236,242,.9); }
/* commander showcase: full card image(s) over the art crop */
.pbox__bigmsg--pregame { opacity: 1; background: rgba(8,9,13,.38); transition: opacity .5s ease; }
.pregame-cmdr { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; height: 100%; padding: 6px 8px 8px; box-sizing: border-box; }
.pregame-cmdr__name { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; max-width: 96%;
  font-size: clamp(12px, 5cqh, 20px); font-weight: 800; line-height: 1.05; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.pregame-cmdr__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pregame-cmdr__av { width: clamp(20px, 8cqh, 30px); height: clamp(20px, 8cqh, 30px); border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: rgba(0,0,0,.35); display: grid; place-items: center;
  border: 1.5px solid currentColor; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.pregame-cmdr__av--ini { font-size: clamp(11px, 4.4cqh, 16px); font-weight: 800; }
.pregame-cmdr__cards { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pregame-cmdr__card { max-height: 100%; max-width: 62%; width: auto; height: auto; object-fit: contain;
  border-radius: 4.7%/3.4%; box-shadow: 0 8px 22px rgba(0,0,0,.6); }
.pregame-cmdr__cards--two .pregame-cmdr__card { max-width: 48%; }

/* ---- postgame reveal animation ---- */
@keyframes vHeroIn { 0% { transform: scale(2.4); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vBlockIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.victory--anim .victory__hero { animation: vHeroIn 1.5s cubic-bezier(.2,.72,.2,1) both; transform-origin: center; }
.victory--anim .victory__body > *:not(.victory__hero) { opacity: 0; animation: vBlockIn .7s ease both; }
@media (prefers-reduced-motion: reduce) {
  .victory--anim .victory__hero,
  .victory--anim .victory__body > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---- commander-damage menu: mirror the physical 2x2 seating (4-player) ---- */
.cmddmg--quad { grid-template-areas: "tl tr" "bl br"; }
.cmddmg--quad .cmddmg__cell--tl { grid-area: tl; }
.cmddmg--quad .cmddmg__cell--tr { grid-area: tr; }
.cmddmg--quad .cmddmg__cell--bl { grid-area: bl; }
.cmddmg--quad .cmddmg__cell--br { grid-area: br; }

/* ---- pre-game: shifting glow on the Tap-to-Start dial (box-shadow isn't clipped by the dial's overflow:hidden) ---- */
.play-wrap.pregame .bigtimer { animation: pgDialGlow 7s ease-in-out infinite; }
@keyframes pgDialGlow {   /* symmetric blue -> purple -> white -> purple -> blue for a smooth, non-flickery drift */
  0%   { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px #6ea8ff, 0 0 26px 5px rgba(110,168,255,.7); }
  25%  { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px #9f8bf5, 0 0 30px 6px rgba(159,139,245,.75); }
  50%  { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px #e7ecff, 0 0 34px 8px rgba(231,236,255,.85); }
  75%  { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px #9f8bf5, 0 0 30px 6px rgba(159,139,245,.75); }
  100% { box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px #6ea8ff, 0 0 26px 5px rgba(110,168,255,.7); }
}
@media (prefers-reduced-motion: reduce) { .play-wrap.pregame .bigtimer { animation: none; } }

/* Reset-game button on the history "Game started" row */
.histturn__reset { margin-left: auto; background: none; border: 1px solid var(--danger); color: var(--danger);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.histturn__reset:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }

/* ---- 5 Pointed Star: victory banner (new element; sits under overlays, over the table) ---- */
.starwin { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 110;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; max-width: min(92vw, 640px);
  background: linear-gradient(180deg, rgba(222,186,120,.97), rgba(176,138,79,.97));
  color: #241a0c; border: 1px solid rgba(0,0,0,.35); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 15px; animation: starwinin .35s ease; }
.starwin__txt b { font-weight: 800; }
.starwin__rec { border: 1px solid rgba(0,0,0,.4); background: #241a0c; color: #ecd2a0;
  border-radius: 9px; padding: 7px 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.starwin__rec:hover { background: #38290f; }
.starwin__x { border: 0; background: transparent; color: rgba(36,26,12,.75); font-size: 16px;
  cursor: pointer; padding: 4px 6px; line-height: 1; }
.starwin__x:hover { color: #241a0c; }
@keyframes starwinin { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* b69: the banner faces whoever won - a near-row winner reads it at their (bottom) edge, a far-row
   winner at the top edge turned 180 degrees */
.starwin:not(.starwin--flip) { top: auto; bottom: 12px; }
.starwin--flip { transform: translateX(-50%) rotate(180deg); animation-name: starwinin-flip; }
@keyframes starwinin-flip { from { opacity: 0; transform: translate(-50%, -8px) rotate(180deg); } to { opacity: 1; transform: translate(-50%, 0) rotate(180deg); } }

/* ---------- Two-Headed Giant (additive: board team identity) ---------- */
.pbox--thg.pbox--team1 { outline: 2px solid rgba(90, 209, 221, 0.55); outline-offset: -2px; }
.pbox--thg.pbox--team2 { outline: 2px solid rgba(229, 143, 90, 0.55); outline-offset: -2px; }
.pbox--thg.pbox--team3 { outline: 2px solid rgba(169, 138, 224, 0.55); outline-offset: -2px; }
.pbox__teamchip { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }
.pbox__teamchip--1 { background: rgba(90, 209, 221, 0.16); color: #5ad1dd; border: 1px solid rgba(90, 209, 221, 0.4); }
.pbox__teamchip--2 { background: rgba(229, 143, 90, 0.16); color: #e58f5a; border: 1px solid rgba(229, 143, 90, 0.4); }
.pbox__teamchip--3 { background: rgba(169, 138, 224, 0.16); color: #a98ae0; border: 1px solid rgba(169, 138, 224, 0.4); }

/* ---------- 2HG merged team boxes (additive) ----------
   THE WRAP OWNS THE BORDER. Children go borderless (the .pbox 3px border +
   top-row rotation made per-side surgery produce phantom middles and missing
   outers). One shared ± pair flanks the pooled life; the top row's pair is
   rotated with its boxes so the far side reads it right-side-up. */
.teamwrap { position: relative; display: flex; min-width: 0; border-radius: calc(var(--radius) + 6px); overflow: hidden; }
.teamwrap > .pbox { flex: 1 1 0; min-width: 0; }
.teamwrap .pbox, .table-row--top .teamwrap .pbox {
  border: 0; border-radius: 0; box-shadow: none; outline: none;
}
.teamwrap--arch { border: 3px solid color-mix(in srgb, var(--accent-2) 55%, var(--border)); }
.teamwrap--t1 { border: 3px solid rgba(90, 209, 221, 0.7); }
.teamwrap--t2 { border: 3px solid rgba(229, 143, 90, 0.7); }
.teamwrap--t3 { border: 3px solid rgba(169, 138, 224, 0.7); }
.teamwrap .pbox .pbox__lifeval { visibility: hidden; }
.teamwrap .pbox .lifebtn { display: none; }
.teamwrap__lifewrap {
  direction: ltr;   /* the bottom row is rtl for seat order — the ± pair is not */
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  z-index: 6; display: flex; align-items: center; gap: 18px; pointer-events: none;
}
.table-row--top .teamwrap__lifewrap { top: 66%; transform: translate(-50%, -50%) rotate(180deg); }
/* The shared pool is the team's LIFE COUNTER — it wears the same clothes as .pbox__lifeval
   (mono + tabular figures so the digits stop dancing) and the same ± buttons as .lifebtn. */
.teamwrap__life {
  pointer-events: none; min-width: 2ch; text-align: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(44px, 6.2vw, 84px); font-weight: 800; line-height: 1;
  color: var(--text); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.teamwrap--low .teamwrap__life { color: #ff5d4d; }        /* bloodied: same reds as a solo seat */
.teamwrap--low15 .teamwrap__life { color: #e08a3c; }
.teamwrap--low20 .teamwrap__life { color: #e3c24a; }
.teamwrap__btn {
  pointer-events: auto; width: clamp(44px, 7cqh, 72px); height: clamp(44px, 7cqh, 72px); border-radius: 50%;
  border: 2px solid var(--accent-2); background: var(--surface-2);
  color: var(--accent); font-size: clamp(18px, 3cqh, 30px); font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .08s;
  touch-action: manipulation; user-select: none;
}
.teamwrap__btn:hover { border-color: var(--accent); }
.teamwrap__btn:active { transform: scale(.94); background: var(--surface-2); }
/* one banner across the whole giant, ABOVE the shared life; far side reads it flipped */
.teamwrap > .pbox__bigmsg { z-index: 8; border-radius: calc(var(--radius) + 3px); }
.table-row--top .teamwrap > .pbox__bigmsg { transform: rotate(180deg); }
/* an open seat menu/panel outranks the shared life overlay */
.teamwrap .pbox--tools { z-index: 9; }
/* the shared life steps aside while the giant's banner plays */
.teamwrap__lifewrap { transition: opacity .35s ease; }
.teamwrap:has(> .pbox__bigmsg--in) > .teamwrap__lifewrap { opacity: 0; }
/* per-head banners (radiation, monarch, …) lift over the shared life while playing */
.teamwrap .pbox:has(.pbox__bigmsg--in) { z-index: 8; }

/* ---------- in-board confirm: replaces every window.confirm; faces its asker ---------- */
.bdconfirm { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: rgba(5, 7, 10, 0.6); }
/* b69: 9500, not 120 - the clock menu is 9000 and every big overlay 200, so a confirm asked from the
   menu (Undo, Reset, History rewinds) or from inside an overlay (Tie, Re-open, Hellride) opened
   BEHIND its own window and the button looked dead. */
.bdconfirm[hidden] { display: none; }
.bdconfirm__card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 14px; padding: 18px 20px; max-width: 360px; text-align: center; display: flex; flex-direction: column;
  gap: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }
.bdconfirm__card--danger { border-color: rgba(220, 84, 60, 0.55); }
.bdconfirm__card--flip { transform: rotate(180deg); }
.bdconfirm__msg { font-size: 16px; line-height: 1.4; }
.bdconfirm__row { display: flex; gap: 10px; justify-content: center; }

/* ---------- Archenemy ---------- */
/* the villain's box: a slow crimson menace around the whole card */
@property --archang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pbox--arch {
  border: 2px solid #160404;                          /* inner black line of the double border */
  outline: 2px solid rgba(205, 45, 30, 0.85);         /* outer crimson line (outlines dodge overflow clipping) */
  outline-offset: 2px;
  animation: archthrob 7s ease-in-out infinite;
}
.pbox--arch::before {                                  /* counter-rotating ember smear, underneath */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 9px;
  background: conic-gradient(from var(--archang),
    transparent 0%, rgba(255, 96, 58, 0.55) 10%, rgba(120, 12, 10, 0.15) 22%, transparent 32%,
    transparent 52%, rgba(170, 24, 16, 0.6) 64%, rgba(255, 140, 90, 0.25) 72%, transparent 84%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: archshimmer 75s linear infinite reverse; pointer-events: none; z-index: 2;
}
@keyframes archthrob {
  0%, 100% { box-shadow: 0 0 22px rgba(180, 30, 20, 0.35), inset 0 0 26px rgba(120, 10, 8, 0.35); }
  50% { box-shadow: 0 0 34px rgba(220, 45, 28, 0.55), inset 0 0 34px rgba(150, 14, 10, 0.5); }
}
.table-row--arch { --card-max: 680px; padding-top: 6px; }
/* 4-5 column tables: the footer clock clears the name chip (34% zone) + the utility button */
.table-play[style*="--cols:4"] .table-row--bottom .pbox__time,
.table-play[style*="--cols:5"] .table-row--bottom .pbox__time {
  padding-left: 36%; padding-right: 42px; font-size: 12px; text-align: center;
}
.table-play[style*="--cols:5"] .table-row--bottom .pbox__time .pbox__time-w { display: none; }
.pbox--arch::after {                                   /* the saw: hard-toothed crimson ring, ticking */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 5px;
  background: repeating-conic-gradient(from var(--archang),
    #ff5a3c 0deg 4deg, #7a1512 4deg 6.5deg, rgba(20, 3, 3, 0.9) 6.5deg 8deg, transparent 8deg 15deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: archshimmer 120s linear infinite; pointer-events: none; z-index: 3;
}
@keyframes archshimmer { to { --archang: 360deg; } }
.pbox--arch .pbox__whoname { color: #ff8f7a; text-shadow: 0 0 12px rgba(220, 60, 40, .6); animation: archname 8s ease-in-out infinite; }
@keyframes archname {
  0%, 100% { text-shadow: 0 0 12px rgba(220, 60, 40, .6); }
  50% { text-shadow: 0 0 18px rgba(255, 90, 55, .95), 0 0 4px rgba(255, 170, 120, .8); }
}

/* the scheme overlay: portrait card, browse arrows */
.schemepanel { max-width: 560px; }
.schemebody { display: flex; align-items: center; justify-content: center; gap: 12px; }
.schemecard { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.schemecard img { max-height: min(62vh, 560px); max-width: 100%; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65); }
.schemename { font-weight: 800; font-size: 17px; text-align: center; }
.schemekind { font-size: 13px; color: #f2b56b; }
.schemenav { width: 44px; height: 64px; font-size: 26px; flex: 0 0 auto; }
.schemenav:disabled { opacity: .25; pointer-events: none; }
/* the scheme chips are plain globals — no special box */

/* extra-turn queued chip + the counters-panel button */
.pbox__extrachip { font-size: 12px; margin-left: 6px; color: #f2c66b; text-shadow: 0 0 8px rgba(240, 190, 90, .5); flex: 0 0 auto; }
.cnt-extraturn { width: 100%; margin-bottom: 8px; }


/* ---------- avatar mini-profile: stats + tagline, right on the card ---------- */
.pbox__who .avatar { cursor: pointer; }
.miniprof {
  position: absolute; inset: 8px; z-index: 11; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, #000);
  border: 2px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; overflow: auto;
}
.miniprof__hd { display: flex; align-items: center; gap: 10px; }
.miniprof__name { font-weight: 800; font-size: 18px; }
.miniprof__tag { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.miniprof__tagtext { color: var(--muted); font-style: italic; }
.miniprof__tag input { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.miniprof__stats { display: flex; gap: 14px; }
.miniprof__stat { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.miniprof__stat .n { font-family: var(--mono); font-size: 20px; font-weight: 800; }
.miniprof__stat .l { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.miniprof__deck { font-size: 13px; color: var(--muted); }
.miniprof__edit { background: none; border: 0; color: var(--muted-2); cursor: pointer; font-size: 14px; padding: 2px 4px; }

/* b69: the one-time code page */
.pwcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(30px, 8vw, 44px);
  font-weight: 700; letter-spacing: .12em; color: var(--gold, #f5c451); margin: 6px 0 12px; user-select: all; }

/* b69: round pages */
.roundpager { display: flex; align-items: center; gap: 8px; }
.roundpager__btn { min-width: 44px; min-height: 40px; padding: 4px 12px; font-size: 16px; }
.roundpager__btn:disabled { opacity: .35; cursor: default; }
.roundnote { margin: -6px 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(96, 165, 250, .10); border: 1px solid rgba(96, 165, 250, .35); color: var(--text); }
.board--past .player { border-color: rgba(96, 165, 250, .45); }
.board--past .score__t { color: #93c5fd; }
.player--roundwin .rank { color: var(--gold); }
.roundbar__now .roundbar__sub { color: var(--muted); font-family: inherit; font-style: normal; font-weight: 400; font-size: 12px; }

/* b69: the switcher, closer - map chip, map picker, instructions, the /beam chip's panel */
.mapline { gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.mapchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; }
.mapchip:hover { border-color: var(--accent); }
.mapchip__img { width: 56px; height: 32px; border-radius: 8px; overflow: hidden; background: var(--surface); flex: none; }
.mapchip__img:empty { display: none; }
.mapchip__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapchip__edit { color: var(--muted); font-weight: 400; }
body.mpick-open { overflow: hidden; }
.mpick { position: fixed; inset: 0; z-index: 90; background: rgba(4, 6, 10, .72); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.mpick[hidden] { display: none; }
.mpick__box { width: min(980px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.mpick__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mpick__head h2 { margin: 0; font-size: 18px; }
.mpick__q { width: 100%; }
.mpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px; min-height: 120px;
  grid-auto-rows: max-content; align-content: start; }   /* b70: rows the tile's full height - see .mpick__img */
.mpick__t { display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; min-height: 44px; }
.mpick__t:hover, .mpick__t:focus-visible { border-color: var(--accent); }
.mpick__t:disabled { opacity: .45; cursor: default; }
.mpick__img { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--surface); display: flex;
  align-items: center; justify-content: center; flex: none; }
/* b70: flex: none - overflow: hidden zeroes a flex item's automatic minimum height, so in an overflowing
   grid (every row at its min-content) the picture shrank to a 3 px strip (Firefox, Adam's screenshot) */
.mpick__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpick__ph { font-weight: 800; font-size: 22px; color: var(--muted); }
.mpick__n { font-weight: 600; font-size: 14px; line-height: 1.25; }
.mpick__bs { display: flex; gap: 4px; flex-wrap: wrap; }
.mpick__b { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.mpick__b.is-on { color: #86efac; }
.mpick__b.is-up { color: var(--gold); }
.mpick__foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mpick__foot[hidden] { display: none; }
.mpick__foot input { flex: 1 1 220px; min-width: 0; }
.bmpnotes > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.bmpnotes { margin: 8px 0; }
.card.bmpnotes { padding: 10px 14px; margin: 0 0 12px; }
.nbody { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.nbody p { margin: 8px 0; }
.nbody a { color: var(--accent); }
.ncode { position: relative; margin: 8px 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.ncode pre { margin: 0; padding: 10px 12px; padding-right: 84px; font-family: var(--mono); font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ncode .btn { position: absolute; top: 6px; right: 6px; }
.nic { font-family: var(--mono); font-size: 13px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; }
.ncp { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 14px; min-width: 32px; min-height: 32px; }
.ncp:hover, .ncp:focus-visible { color: var(--text); }
/* b73: the server box - the map it's on (stopped: the one it starts on) as a picture, what's next,
   the controls in one row, then what is switched on. One fragment, so every piece agrees. */
.bmpnow { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.bmpnow__art { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--border); }
.bmpnow__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bmpnow__ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 34px; opacity: .4; }
.bmppanel.is-off .bmpnow__art img { filter: saturate(.55) brightness(.78); }
.bmpnow__state { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  border-radius: 999px; background: rgba(9, 11, 16, .8); color: #dfe4ee; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; }
.bmpnow__state i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.bmpnow__state.is-on i { background: #4fd18a; box-shadow: 0 0 8px rgba(79, 209, 138, .7); }
.bmpnow__state.is-off i { background: #ff6f61; }
.bmpnow__main { min-width: 0; }
.bmpnow__top { display: flex; align-items: baseline; gap: 10px; }
.bmpnow__lbl { margin: 0; }
.bmpnow__sw { margin-left: auto; white-space: nowrap; }
.bmpnow__map { margin: 2px 0 0; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bmpnow__note { margin: 6px 0 0; color: var(--gold); font-size: 13px; }
.bmpnext { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 10px; padding: 5px 14px 5px 5px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.bmpnext img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
.bmpnext__lbl { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.bmpnext__map { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmpnext__warn { color: var(--gold); font-size: 12px; }
.bmpnow__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.bmpnow__acts + .bmpnow__acts { margin-top: 8px; }        /* the server's buttons, then the scoreboard's */
.bmpnow__act { display: block; margin-top: 8px; }
.bmpnow__act:empty { display: none; }
.bmpnow__notes { margin-top: 10px; }
.bmppanel .bmpmods { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.bmpmods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.bmpmod { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.bmpmod img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
details.bmpmod { border-radius: 12px; padding: 3px 10px; }
details.bmpmod[open] { flex-basis: 100%; }
details.bmpmod > summary { min-height: 26px; }
/* b70: one preview row, "+N more" opens the rest grouped as Cars / Mods (beammap.js fits the row) */
.bmpmods > [hidden] { display: none !important; }
.bmpmods__lbl { margin: 0 6px 0 0; }
.bmpmods__grp { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 0 2px 0 4px; }
.bmpmods__br { flex-basis: 100%; height: 0; }
.bmpmods.is-fold .bmpmods__grp, .bmpmods.is-fold .bmpmods__br { display: none; }
.bmpmods.is-fold .bmpmod { max-width: 170px; }          /* the preview row: long names end in … */
.bmpmod__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmpmods__more { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 3px 12px; border-radius: 999px;
  border: 1px dashed var(--border); background: transparent; color: var(--accent); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.bmpmods__more:hover, .bmpmods__more:focus-visible { border-color: var(--accent); }
.bmpctl { gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
/* b70: the live vote - next map + game mode. Phone-first: every target >= 44 px, one column. */
.bvote { margin: 0 0 16px; }
.bvote__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bvote__title { font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.bvote__title--sub { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 2px; }
.bvote__mine { color: var(--muted); font-size: 13px; margin-right: auto; }
.bvote .btn.small { min-height: 40px; }                       /* beats .btn.small's 34 px: fingers */
body.menus .bvote .btn.bvote__go { min-height: 44px; padding: 8px 22px; font-size: 15px; border-radius: 10px; }
.bvote__msg { margin: 8px 0 0; color: var(--gold); }
.bvote__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bvote__row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 0 8px 0 0; }
.bvote__row.is-mine { border-color: var(--accent); }
.bvote__hit { flex: 1; min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto 6px;
  column-gap: 10px; row-gap: 6px; align-items: center; padding: 8px; min-height: 52px; background: none; border: 0;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.bvote__thumb { grid-row: 1 / span 2; width: 56px; height: 32px; border-radius: 6px; overflow: hidden; background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--muted); }
.bvote__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bvote__name { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bvote__row.is-mine .bvote__name { color: var(--accent); }
.bvote__n { font-family: var(--mono); font-weight: 700; font-size: 16px; }
.bvote__row.is-lead .bvote__n { color: var(--gold); }
.bvote__bar { grid-column: 2 / span 2; height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.bvote__bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .25s ease; }
.bvote__row.is-lead .bvote__bar > i { background: var(--gold); }
.bvote__tag { margin-left: 6px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--surface); }
.bvote__tag.is-up { color: var(--gold); }
.bvote__tag.is-on { color: #86efac; }
.bvote__who { display: inline-flex; align-items: center; flex: none; }
.bvote__face { width: 22px; height: 22px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--surface-2); overflow: hidden;
  background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 800; display: inline-flex; align-items: center;
  justify-content: center; }
.bvote__face:first-child { margin-left: 0; }
.bvote__face img { width: 100%; height: 100%; object-fit: cover; }
.bvote__more { font-size: 11px; color: var(--muted); margin-left: 4px; }
.bvote__empty { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.bvote__restbtn { background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 2px;
  min-height: 40px; cursor: pointer; }
.bvote__admin { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.bvote__clear { margin-left: auto; }
.bvote__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bvote__chip { min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.bvote__chip b { font-family: var(--mono); margin-left: 4px; }
.bvote__chip.is-mine { border-color: var(--accent); color: var(--accent); }
.bvote__chip.is-lead { box-shadow: inset 0 0 0 1px var(--gold); }
.bvote__chip.is-lead b { color: var(--gold); }
.bvote--compact { margin-top: 14px; }
.mpick__t.is-mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* b73: maps suit modes - the picker's "maps for" row, a map that doesn't suit it, the modes a map suits */
.mpick__modes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mpick__modes[hidden] { display: none; }
.mpick__modes-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.mpick__mode { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.mpick__mode i { font-style: normal; font-family: var(--mono); color: var(--accent); margin-left: 2px; }
.mpick__mode.is-on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mpick__mode.is-clear { border-style: dashed; color: var(--muted); }
.mpick__t.is-off { opacity: .45; }
.mpick__t.is-off img { filter: grayscale(.8); }
.mpick__b.is-fit { color: var(--muted-2); }
.bvote__tag.is-fit { color: var(--muted-2); font-weight: 600; }
.bvote__chip.is-dim { opacity: .5; }
.mpick__b.is-mine { color: var(--accent); }
.mpick__b.is-votes { color: var(--gold); }
@media (hover: hover) {
  .bvote__hit:hover .bvote__name, .bvote__chip:hover { color: var(--accent); }
}
.bmpctl__err { color: var(--danger); }
@media (max-width: 760px) {                           /* b73: iPad portrait and phones: picture on top */
  .bmpnow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bmpnow__art { aspect-ratio: auto; height: 120px; }
  .bmpnow__map { font-size: 20px; }
  .bmpnext__map { white-space: normal; }
}
@media (max-width: 640px) {
  .mpick { padding: 0; align-items: flex-end; }
  .mpick__box { border-radius: 16px 16px 0 0; max-height: 92dvh; }
  .mpick__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .bmpmods__lbl { flex-basis: 100%; margin: 0; }     /* b70: a phone's row is for chips, the label goes above */
  .bmpnow__art { height: 96px; }                        /* b70: a banner, not half the screen */
  .beamhead__stats { display: none; }                   /* Stats is in the menu; the row was squeezing it into two lines */
  .beamnew .row { flex-direction: column; align-items: stretch; }
  .beamnew .row > .btn { align-self: stretch !important; min-height: 48px; }
  body.menus .bvote .btn.bvote__go { flex: 1 0 100%; order: 3; justify-content: center; }   /* the whole width under the title */
}

/* ======================================================================================
   b69 - the play board's card windows, sized for fingers (Adam: "can we make the buttons inside
   the player card windows a bit bigger? people have trouble pressing them ... some of the buttons
   are getting cut off in the player menu and its not scrollable"). Measured in headless Chromium
   at 1180x820 (iPad landscape) for 3-6 seats: the Counters page ran 110px past the card with Board
   Status fully hidden, the card's own Counters half was squashed to nothing, the dice pane lost its
   top row off the top (centered overflow can't be scrolled to) and Settings clipped a reminder.
   --tap is the one touch size: ~44px on a 4-seat card, never under 36px.
   ====================================================================================== */
.pbox__body { --tap: clamp(36px, min(18cqh, 12cqw), 48px); }
.pmenu { container-type: size; --tap: clamp(36px, min(18cqh, 12cqw), 48px); }

/* the card face: the two-row pill keeps both rows; the life number gives up the room instead */
.pbox__body { padding-top: 10px; padding-bottom: 10px; }
.pbox__toggle, .pbox__time, .pbox__head { flex-shrink: 0; }
.pbox__toggle-half { padding-top: clamp(6px, 2.4cqh, 14px); padding-bottom: clamp(6px, 2.4cqh, 14px); }
.pbox__lifeval { font-size: clamp(34px, min(34cqh, 34cqw), 138px); }
.pbox__life .lifebtn { width: clamp(40px, min(17cqh, 15cqw), 94px); height: clamp(40px, min(17cqh, 15cqw), 94px); }

/* the tools panel: three pages that each fit, bigger targets, a scroll that stays inside */
.pbox__panel { padding: 10px; gap: 8px; overscroll-behavior: contain; }
.pbox__panel .panelpage { flex-shrink: 0; gap: 8px; }
.pbox__panel .panelpager { gap: 6px; flex-shrink: 0; }
.pbox__panel .pagerbtn { min-height: var(--tap); font-size: 13px; padding: 6px 4px; border-radius: 10px; }
.pbox__panel .pbox__panelclose { width: var(--tap); height: var(--tap); border-radius: 10px; font-size: 17px; }
.pbox__panel .cmddmg__cap { font-size: 12.5px; }
/* commander damage: name on the left, the buttons on the right, one row per opponent */
.pbox__panel .cmddmg { gap: 8px; }
.pbox__panel .cmddmg__cell { flex-direction: row; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; }
.pbox__panel .cmddmg__who { font-size: 13px; max-width: none; min-width: 0; flex: 1 1 auto; text-align: left; }
.pbox__panel .cmddmg__ctl { gap: 4px; flex: 0 0 auto; }
.pbox__panel .cmddmg__val { font-size: 20px; min-width: 2.2ch; }
.pbox__panel .cdbtn, .pbox__panel .cnbtn { width: var(--tap); height: var(--tap); font-size: 22px; font-weight: 700; flex: 0 0 auto; }
.table-play--sc .pbox__panel .panelpage--dmg .cmddmg__cap { display: none; }   /* 5+ seats: the tab says it */
/* counters: 2x2, then everyone-rad */
.pbox__panel .counters-row { gap: 8px; }
.pbox__panel .counter { padding: 3px 6px 3px 10px; gap: 4px; }
.pbox__panel .counter__lbl { font-size: 18px; }
.pbox__panel .counter__val { font-size: 20px; min-width: 2ch; }
.cnt-radall { width: 100%; min-height: var(--tap); font-weight: 700; border-color: rgba(224,140,60,.55); }
.cnt-radall:hover { border-color: rgb(224,140,60); }
/* status: the extra turn, then the six tiles three across */
.pbox__panel .cntstatus { margin-top: 0; display: flex; flex-direction: column; gap: 8px; }
.pbox__panel .cntstatus .cmddmg__cap { margin-bottom: 0; }
.pbox__panel .cnt-extraturn { min-height: var(--tap); margin-bottom: 0; font-size: 13px; }
.pbox__panel .statusgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pbox__panel .statusgrid .condbtn { min-height: var(--tap); padding: 4px 6px; font-size: 12.5px; line-height: 1.15; border-radius: 10px; }
/* the idle fuse: drains over 5 s, restarts on every touch */
.panelidle { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; pointer-events: none;
  background: var(--accent); opacity: 0; transform-origin: left center; z-index: 3; }
.panelidle--run { opacity: .55; animation: panelidle 5s linear forwards; }
@keyframes panelidle { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .panelidle--run { animation: none; opacity: .35; } }

/* the per-player menu: bigger tabs and close, panes that fit or scroll from the top */
.pmenu__tabs .pmtab { min-height: var(--tap); font-size: 16px; padding: 4px; border-radius: 10px; }
.pmenu__tabs .pmenu__close { width: var(--tap); height: var(--tap); font-size: 17px; border-radius: 10px; }
.pmpane { overflow-y: auto; overscroll-behavior: contain; }
.pmpane--dice { justify-content: flex-start; }               /* centered overflow can't be scrolled back to */
.dicebox { max-width: none; margin: auto; gap: 8px; }
.dicebox .dieroll { flex: 0 0 auto; width: clamp(40px, min(30cqh, 13.5cqw), 76px); font-size: 13px; }
.pmenu__rems { flex-direction: row; flex-wrap: wrap; gap: 6px; overflow: visible; }
.pmenu__rems .remrow { flex: 1 1 0; min-width: 0; min-height: var(--tap); padding: 4px 8px; justify-content: center; white-space: nowrap; }
.pmpane[data-pmpane="settings"] .condbtn--concede { min-height: var(--tap); margin-top: 10px; }
.pmenu__rad .radcn, .pmenu__rad .radgo { min-height: 36px; min-width: 36px; }
/* b69: the dead and the finished board get no live buttons in their windows either */
.cmddmg__cell--gone { opacity: .35; pointer-events: none; }
.pbox--dead .pbox__toggle, .pbox--dead .condbtn, .pbox--dead .cnt-radall, .pbox--dead .cnt-extraturn { pointer-events: none; opacity: .4; }
.play-wrap--frozen .cnt-radall, .play-wrap--frozen .cnt-extraturn { pointer-events: none; opacity: .55; }
/* b69: 7-8 seat pods put four cards across - under ~300px a card's windows tighten further */
@container (max-width: 300px) {
  .pbox__panel .pagerbtn { font-size: 11.5px; }
  .pbox__panel .counter { padding: 3px 4px; gap: 2px; }
  .pbox__panel .counter__lbl { font-size: 14px; }
  .pbox__panel .counter__val, .pbox__panel .cmddmg__val { font-size: 16px; min-width: 1.6ch; }
  .pbox__panel .cmddmg { gap: 5px; }
  .pbox__panel .cmddmg__cell { padding: 2px 4px 2px 6px; gap: 3px; }
  .pbox__panel .pagerbtn, .pbox__panel .pbox__panelclose { min-height: 36px; height: auto; }
  .pbox__panel .cmddmg__who { font-size: 11px; }
  .pbox__panel .cdbtn, .pbox__panel .cnbtn { font-size: 18px; }
  .pbox__panel .statusgrid .condbtn { font-size: 11px; padding: 3px 4px; }
}
/* b69: a protected seat's life won't move - a tap nudges the number and lights the shield so the
   table sees why, instead of a button that looks dead */
@keyframes lifelocked { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes shieldpulse { 0%, 100% { transform: scale(1); filter: none; } 45% { transform: scale(1.5); filter: drop-shadow(0 0 8px #6fb3d9); } }
.pbox--locked .pbox__lifeval { animation: lifelocked .45s ease; }
.pbox--locked .cond--protected { animation: shieldpulse .7s ease; }
@media (prefers-reduced-motion: reduce) { .pbox--locked .pbox__lifeval, .pbox--locked .cond--protected { animation: none; } }
/* b81: circuits and events on the portal */
.tag--on { color: var(--accent); border-color: var(--accent); }
a.tag { text-decoration: none; margin-left: 0; }
.circnote { margin-top: 4px; color: var(--text); opacity: .85; white-space: pre-line; }
/* b91: a circuit for several modes - ticks, wrapped */
.circmodes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
/* b134: a circuit's driving-type tags */
.ctags { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ctag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
        background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; white-space: nowrap; }
a.ctag:hover { border-color: var(--accent); }
.ctag--sm { font-size: 11px; padding: 1px 7px; font-weight: 600; }
td .ctags { margin-top: 4px; }
h2 .ctag { vertical-align: middle; }
/* b134: teams - a dot in the team's colour, an event's team cards */
.tdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.evteams__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.evteam { border: 1px solid var(--border); border-left: 4px solid var(--tc); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.evteam--win { box-shadow: 0 0 0 1px var(--tc), 0 8px 24px -14px var(--tc); }
.evteam__h { display: flex; align-items: center; gap: 4px; }
.evteam__h b { flex: 1; }
.evteam__v { font-size: 20px; font-weight: 800; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.circmode { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.circrecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.circrec { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; position: relative; }
/* b93: an admin's ✕ on a time (a record card's in its corner) */
.circdel { display: inline; margin: 0; }
.circrec .circdel { position: absolute; top: 6px; right: 6px; }
.circdel .btn { padding: 2px 8px; line-height: 1.3; }
.circrec__k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.circrec__v { font-size: 22px; font-weight: 800; margin: 2px 0; }
.evplace { font-weight: 800; width: 2.2em; }
.evplace--1 { color: var(--gold); }
/* b83: each lap's time under a racer's result; the race's fastest lap */
.evlaps { margin-top: 2px; font-variant-numeric: tabular-nums; }
.evfl { color: #b07cff; }
.circcourse { font-size: 1.05rem; margin: 22px 0 10px; }          /* b83: a grid's courses, one after the other */
@media (max-width: 720px) { .hide-sm { display: none; } }
.evlive { display: block; margin-bottom: 12px; padding: 10px 14px; text-decoration: none; color: inherit; border-color: rgba(255,90,110,.5); }   /* b82 */
/* b106: the board page's events, live (beam.js paints them) */
.beamev { margin-top: 14px; }
.beamev__drivers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.beamev__drv { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.08)); }
.beamev__drvtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.beamev__drvpts { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.beamev__courses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.beamev__cars { margin-bottom: 10px; }
.beamev__ev { border-top: 1px solid var(--line, rgba(255,255,255,.08)); padding: 8px 0; }
.beamev__ev > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.beamev__ev > summary::-webkit-details-marker { display: none; }
.beamev__ev > summary::before { content: "▸"; color: var(--muted); width: 12px; display: inline-block; }
.beamev__ev[open] > summary::before { content: "▾"; }
.beamev__live { color: #ff5a6e; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.beamev__head { margin: 6px 0 2px 18px; font-weight: 700; }
.beamev__rows { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 3px; }
.beamev__row { display: grid; grid-template-columns: 26px minmax(120px, 1fr) minmax(0, 2fr) 48px; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; }
.beamev__row.is-win { background: rgba(74,60,20,.35); }
.beamev__row.is-ai { opacity: .6; }
.beamev__place { text-align: center; color: var(--muted); font-weight: 800; }
.beamev__who { display: flex; flex-direction: column; min-width: 0; }
.beamev__who small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beamev__res { font-size: 13px; color: var(--text, inherit); min-width: 0; }
.beamev__pts { text-align: right; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .beamev__row { grid-template-columns: 22px 1fr 44px; } .beamev__res { grid-column: 2 / span 1; font-size: 12px; } }

/* b82: a name with the player's portal picture - the events and circuits pages */
.pwho { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; max-width: 100%; }
.pwho__av { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 800; background: var(--surface-2); color: var(--muted-2); border: 1px solid var(--border); }
.pwho__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pwho__av[data-l]::before { content: attr(data-l); }   /* the letter as a picture, not text (a name reads once) */
.lvl__parts { font-size: 11px; color: var(--muted); margin-top: 4px; }   /* b83: where the XP came from */
/* b140: the account page - two-factor's pairing (the QR on white, the key to type in) and the sign-in's code box */
.tfa-pair { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tfa-qr { background: #fff; padding: 6px; border-radius: 8px; line-height: 0; flex: 0 0 auto; }
.tfa-qr svg { width: 180px; height: 180px; }
.tfa-key { display: inline-block; font-size: 15px; letter-spacing: .06em; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; overflow-wrap: anywhere; user-select: all; }
.login-code { margin-top: 10px; }
.login-code[hidden] { display: none; }