:root {
  --leather: #2b2018;
  --leather-2: #382a1f;
  --leather-3: #47362a;
  --brass: #c9a24b;
  --brass-dim: #8c7238;
  --vellum: #eee3c8;
  --muted: #b3a283;
  --ink: #1c1510;
  --crimson: #b13a2e;
  --azure: #3a68a6;
  --good: #8fbf6a;
  --bad: #e07a5f;
  --radius-s: 4px;
  --radius-m: 8px;
  --serif: "IM Fell English", Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--leather);
  color: var(--vellum);
  font: 16px/1.45 var(--sans);
}
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0 0 .5em; }
h2 { font-size: 1.5rem; color: var(--brass); }
h3 { font-size: 1.15rem; color: var(--brass); }
.muted { color: var(--muted); }
b { font-weight: 700; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- buttons & inputs ---------- */
.btn {
  font: 500 15px var(--sans);
  color: var(--vellum);
  background: var(--leather-3);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-s);
  padding: 7px 14px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--brass); background: #54402f; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--brass); color: var(--ink); border-color: var(--brass); font-weight: 700; }
.btn.primary:hover:not(:disabled) { background: #dbb55c; }
.btn.small { padding: 4px 10px; font-size: 14px; }
.btn.ghost { background: transparent; }
.btn.big { width: 100%; padding: 12px; font-size: 17px; }
.btn.active { background: var(--vellum); color: var(--ink); border-color: var(--vellum); }

input, select {
  font: 16px var(--sans);
  color: var(--vellum);
  background: var(--ink);
  border: 1px solid var(--leather-3);
  border-radius: var(--radius-s);
  padding: 7px 9px;
  width: 100%;
}
label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 14px; }
label input, label select { margin-top: 4px; }

.panel {
  background: var(--leather-2);
  border: 1px solid var(--leather-3);
  border-radius: var(--radius-m);
  padding: 20px;
}

/* ---------- home ---------- */
#home {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,75,.10), transparent 60%),
    var(--leather);
}
.home-inner { max-width: 820px; width: 100%; }
.title {
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 1;
  color: var(--vellum);
  letter-spacing: -.01em;
  margin-bottom: .2em;
}
.lede { font-size: 1.15rem; max-width: 60ch; color: var(--muted); margin: 0 0 32px; }
.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .home-cards { grid-template-columns: 1fr; } }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--ink);
  border-bottom: 1px solid var(--brass-dim);
}
.brand { font-family: var(--serif); font-size: 1.4rem; color: var(--vellum); white-space: nowrap; }
.share { display: flex; align-items: center; gap: 10px; }
.share b { color: var(--brass); letter-spacing: .08em; }
.opp { margin-left: auto; color: var(--muted); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#turnInfo { color: var(--muted); }

.phase-track { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; counter-reset: ph; }
.phase-track li {
  counter-increment: ph;
  padding: 3px 12px;
  border-radius: var(--radius-s);
  color: var(--muted);
  font-size: 14px;
}
.phase-track li::before { content: counter(ph) " "; opacity: .6; }
.phase-track.solo li::before { content: none; }
.phase-track li.on { background: var(--leather-3); color: var(--vellum); box-shadow: inset 0 -2px 0 var(--brass); }

/* ---------- muster ---------- */
#muster { min-height: 100%; }
.muster-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 24px; padding: 20px 18px; max-width: 1400px; margin: 0 auto; }
@media (max-width: 900px) { .muster-grid { grid-template-columns: minmax(0, 1fr); padding: 16px 12px; } }
.army-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 26px; }
.army-card {
  text-align: left; padding: 12px 14px; cursor: pointer;
  background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m);
  color: var(--vellum); font: inherit;
  display: flex; flex-direction: column; justify-content: flex-start;   /* text at the top when cards in a row differ in height */
}
.army-card strong { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.army-card span { font-size: 14px; color: var(--muted); }
.army-card[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
@media (max-width: 520px) {   /* ten armies: two columns on a phone */
  .army-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .army-card { padding: 10px; }
  .army-card strong { font-size: 1.05rem; }
  .army-card span { font-size: 12.5px; line-height: 1.35; }
}

.catalog { display: flex; flex-direction: column; gap: 6px; }
.cat-row {
  display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 9px 12px; background: var(--leather-2); border-radius: var(--radius-s);
}
.cat-row .nm { font-weight: 700; }
.cat-row .gear { font-size: 13px; color: var(--muted); }
.statline { display: inline-grid; grid-auto-flow: column; gap: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.statline span { display: grid; text-align: center; width: 27px; }
.statline span i { font-style: normal; color: var(--muted); font-size: 11px; }
.cost { color: var(--brass); white-space: nowrap; font-size: 14px; }

.roster { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; min-height: 60px; }
.roster-empty { color: var(--muted); padding: 14px; border: 1px dashed var(--leather-3); border-radius: var(--radius-m); }
.ros-row { background: var(--leather-2); border-left: 3px solid var(--brass-dim); border-radius: var(--radius-s); padding: 10px 12px; }
.ros-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ros-head .nm { font-weight: 700; }
.ros-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; font-size: 14px; }
.ros-ctrl input[type=number] { width: 70px; padding: 4px 6px; }
.ros-ctrl label { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--vellum); }
.ros-ctrl input[type=checkbox] { width: auto; margin: 0; accent-color: var(--brass); }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.link-btn:hover { color: var(--bad); }
.pointsbar { height: 8px; background: var(--ink); border-radius: 4px; overflow: hidden; }
#pointsFill { height: 100%; width: 0; background: var(--brass); transition: width .2s; }
#pointsFill.over { background: var(--bad); }

/* ---------- battle ---------- */
#battle { height: 100%; display: flex; flex-direction: column; }
.battle-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 1000px) {
  .battle-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 62vh auto; }
  #battle { height: auto; }
}
.board-wrap { position: relative; min-height: 0; background: var(--battle-around, #1a140f); }
/* computers: the logo and the phases on the first line; the opponent's name and clock on the left of the second line,
   just above the battlefield, with the turn and the buttons on the right; your name and clock in a bar under it */
#battle:not(.compact) .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand phases phases" "players players actions"; gap: 8px 20px; padding: 8px 18px; }
#battle:not(.compact) .topbar .brand { grid-area: brand; }
#battle:not(.compact) .phase-track { grid-area: phases; justify-self: start; }
#battle:not(.compact) .players { grid-area: players; min-width: 0; }
#battle:not(.compact) .top-actions { grid-area: actions; margin-left: 0; }
#battle:not(.compact) .battle-grid { grid-template-rows: minmax(0, 1fr) auto; }
#battle:not(.compact) .board-wrap { grid-column: 1; grid-row: 1; }
#battle:not(.compact) .side { grid-column: 2; grid-row: 1 / span 2; }
.seat-bar { display: none; }
#battle:not(.compact) .seat-bar { display: flex; grid-column: 1; grid-row: 2; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 12px; background: var(--ink); border-top: 1px solid var(--leather-3); }
#battle:not(.compact) .seat-bar .seat-me:empty { display: none; }
#battle:not(.compact) :is(.players, .seat-bar) .pchip { font-size: 15px; padding: 4px 10px; }
#battle:not(.compact) :is(.players, .seat-bar) .clock { font-size: 17px; padding: 2px 9px; margin-left: 4px; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* the hint: an "i" button in the bottom-left corner that opens the text (and closes back to the button) */
.hint-box { position: absolute; left: 12px; bottom: 10px; z-index: 4; display: flex; align-items: flex-end; gap: 6px;
  max-width: min(660px, calc(100% - 24px)); }
.hint-i { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--brass-dim); background: rgba(28,21,16,.9);
  color: var(--brass); font: italic 700 18px/1 var(--serif); cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.hint-i:hover { color: var(--vellum); border-color: var(--brass); }
.hint-i.pulse { animation: hintPulse 1.6s ease-out 2; }
@keyframes hintPulse { 0% { box-shadow: 0 0 0 0 rgba(212,170,80,.7); } 100% { box-shadow: 0 0 0 12px rgba(212,170,80,0); } }
.hint-pop { display: none; position: relative; background: rgba(28,21,16,.92); border: 1px solid var(--leather-3); border-radius: var(--radius-s);
  padding: 6px 30px 6px 10px; min-width: 0; }
.hint-box.open .hint-pop { display: block; }
.hint-box.open .hint-i { display: none; }
.hint { font-size: 14px; color: var(--vellum); }
.hint-x { position: absolute; top: 2px; right: 4px; background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.hint-x:hover { color: var(--vellum); }
.side { display: flex; flex-direction: column; min-height: 0; background: var(--leather-2); border-left: 1px solid var(--leather-3); }
.unit-panel { padding: 14px 16px; border-bottom: 1px solid var(--leather-3); overflow: auto; max-height: 58%; }
.unit-panel .empty { color: var(--muted); }
.unit-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; margin: 0; }
.unit-sub { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
.owner-0 { color: #f08d7f; }
.owner-1 { color: #8fb2e6; }
.prof { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.prof th { font-size: 12px; color: var(--muted); font-weight: 500; }
.prof td { text-align: center; font-weight: 700; padding: 2px 0; }
.prof td.mod { color: var(--good); }
.prof td.hurt { color: var(--bad); }
.facts { font-size: 14px; margin: 0 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: var(--leather-3); color: var(--vellum); }
.chip.bad { background: #6b2a20; }
.chip.good { background: #3d5a2a; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.actions .note { width: 100%; font-size: 13px; color: var(--muted); margin: 2px 0; }
.spell { width: 100%; text-align: left; display: block; }
.spell small { display: block; color: inherit; opacity: .8; font-weight: 400; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper span { min-width: 64px; text-align: center; }

.log-wrap { flex: 1; min-height: 160px; display: flex; flex-direction: column; padding: 10px 16px 0; }
.log { flex: 1; overflow-y: auto; font-size: 13.5px; padding-bottom: 10px; }
.log p { margin: 0 0 3px; }
.log .k-turn { font-family: var(--serif); font-size: 1.15rem; color: var(--brass); margin-top: 12px; border-top: 1px solid var(--leather-3); padding-top: 6px; }
.log .k-phase { color: var(--muted); font-style: italic; margin-top: 6px; }
.log .k-head { font-weight: 700; margin-top: 4px; }
.log .k-roll { color: #d6cbb0; padding-left: 10px; }
.log .k-good { color: var(--good); }
.log .k-bad { color: var(--bad); }

/* ---------- modal & toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(10,7,5,.65); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal-card { background: var(--leather-2); border: 1px solid var(--brass-dim); border-radius: var(--radius-m); padding: 22px 24px; max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; }
.modal-card p { margin: 0 0 14px; }
.choice-list { display: grid; gap: 8px; }
.choice-list .btn { text-align: left; }
.choice-list .btn small { display: block; font-weight: 400; opacity: .85; }
.rules-text { font-size: 15px; max-width: 70ch; }
.rules-text p, .rules-text li { margin-bottom: 8px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  background: #6b2a20; color: #fff; padding: 9px 16px; border-radius: var(--radius-s);
  max-width: min(560px, 92vw); font-size: 15px; box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.toast.info { background: var(--leather-3); }
.result-big { font-family: var(--serif); font-size: 2rem; color: var(--vellum); margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- army builder additions ---------- */
.slot-head { margin: 18px 0 6px; font-size: 1.1rem; }
.comp { margin-bottom: 4px; }
.ros-ctrl label.wide { display: flex; width: 100%; gap: 8px; align-items: center; }
.ros-ctrl label.wide select { width: auto; flex: 1; margin: 0; padding: 4px 6px; font-size: 14px; }
.items-head { width: 100%; color: var(--muted); font-size: 13px; margin-top: 4px; }
.toggle { display: flex; align-items: center; gap: 6px; width: 100%; color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.toggle input { width: auto; margin: 0; accent-color: var(--brass); }
.facts-sub { font-size: 14px; color: var(--muted); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- 3D view ---------- */
#board3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#labels3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl3d {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font: 700 12px var(--sans); color: #fff8e6; padding: 1px 6px; border-radius: 3px;
  background: rgba(28,21,16,.62); border-bottom: 2px solid transparent;
}
.lbl3d.owner-0 { border-bottom-color: #c8463a; }
.lbl3d.owner-1 { border-bottom-color: #4a7cc0; }
.lbl3d.sel { background: rgba(28,21,16,.9); outline: 1px solid #fff6dc; }
.lbl3d.flee { color: #ffc4b4; }
.lbl3d.info { background: rgba(0,0,0,.75); border: 0; }
#tip3d {
  position: absolute; left: 0; top: 0; pointer-events: none; max-width: 320px;
  background: rgba(28,21,16,.92); border: 1px solid var(--brass-dim); color: var(--vellum);
  font: 500 13px var(--sans); padding: 3px 8px; border-radius: 3px;
}

/* ---------- battlefield chooser ---------- */
.field-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); gap: 24px; padding: 20px 18px 0; max-width: 1400px; margin: 0 auto; align-items: start; }
@media (max-width: 900px) { .field-section { grid-template-columns: minmax(0, 1fr); } }
.field-note { font-size: 14px; margin: 0 0 12px; max-width: 60ch; }
.preset-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.preset-list .btn { text-align: left; }
.preset-list .btn small { display: block; font-weight: 400; font-size: 12px; opacity: .8; max-width: 26ch; }
.field-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 6px 10px; margin-bottom: 12px; }
.field-count { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--leather-2); border-radius: var(--radius-s); padding: 4px 8px; font-size: 14px; }
.field-count b { min-width: 1.4em; text-align: center; }
.field-seed { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.field-seed label { margin: 0; }
.field-seed input { width: 110px; }
.field-preview canvas { width: 100%; height: auto; border-radius: var(--radius-m); border: 1px solid var(--leather-3); display: block; background: #1a140f; }

/* ======================================================================
   Site: navigation, lobby, profiles, leaderboard, replays
   ====================================================================== */
a { color: var(--brass); }
a:hover { color: #e6c46d; }
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--ink); border-bottom: 1px solid var(--brass-dim);
}
.nav-brand { font-family: var(--serif); font-size: 1.55rem; color: var(--vellum); text-decoration: none; }
.nav-brand:hover { color: var(--brass); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-s); font-weight: 500; }
.nav-links a:hover { color: var(--vellum); background: var(--leather-2); }
.nav-links a.on { color: var(--vellum); box-shadow: inset 0 -2px 0 var(--brass); }
@media (max-width: 560px) {
  .nav { gap: 6px 14px; padding: 8px 12px; }
  .nav-links { order: 3; width: 100%; flex-wrap: wrap; gap: 2px 0; }
  .nav-links a { padding: 5px 8px; white-space: nowrap; font-size: 15px; }
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-user { display: flex; align-items: center; gap: 8px; }
.me-link { font-weight: 700; text-decoration: none; }
.sound-toggles { display: inline-flex; gap: 4px; }
.icon-btn {
  width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0;
  background: transparent; border: 1px solid var(--leather-3); border-radius: var(--radius-s); color: var(--muted); cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.on { color: var(--brass); border-color: var(--brass-dim); }
.icon-btn:hover { color: var(--vellum); border-color: var(--brass); }
.brand { text-decoration: none; }
.page { min-height: calc(100% - 52px); }
.page-inner { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.page-title { font-size: 2.6rem; margin-bottom: .1em; }
.small-note { font-size: 13px; }
.empty-note { padding: 18px 4px; }

/* lobby */
#home { display: block; padding: 0; place-items: initial; min-height: auto; }
/* desktop, like lichess: the quick battle squares in the middle, buttons and your games on the right, extras on the left */
.lobby {
  display: grid; gap: 22px; padding: 24px 20px 50px; max-width: 1440px; margin: 0 auto;
  grid-template-columns: 250px minmax(0, 1fr) 280px; grid-template-areas: "side main actions"; align-items: start;
}
.lobby-main { grid-area: main; min-width: 0; }
.lobby-actions { grid-area: actions; min-width: 0; }
.lobby-side { grid-area: side; min-width: 0; }
/* tablets and small laptops: main + right column, extras under the buttons */
@media (max-width: 1180px) {
  .lobby { grid-template-columns: minmax(0, 1fr) 270px; grid-template-areas: "main actions" "main side"; grid-template-rows: auto 1fr; row-gap: 0; }
}
/* phones: one column; squares, then the buttons, then the rest */
@media (max-width: 760px) {
  .lobby { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "actions" "side"; grid-template-rows: none; gap: 16px; padding: 14px 12px 40px; }
}
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 700px; margin: 6px auto 14px; }
.quick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3; min-width: 0;
  padding: 10px 4px; cursor: pointer; background: var(--leather-2); color: var(--vellum);
  border: 1px solid var(--leather-3); border-radius: var(--radius-m); font: inherit; transition: border-color .12s, background .12s, transform .12s;
}
.quick b { font-size: clamp(1.05rem, 2.1vw, 1.75rem); font-weight: 700; line-height: 1.1; }
.quick span { color: var(--brass); font-size: clamp(.85rem, 1.3vw, 1.1rem); }
.quick small { color: var(--muted); font-size: clamp(.72rem, 1vw, .9rem); font-variant-numeric: tabular-nums; }
.quick:hover { border-color: var(--brass); background: var(--leather-3); }
.quick:active { transform: scale(.98); }
@media (max-width: 1180px) and (min-width: 761px) { .quick b { font-size: clamp(1.05rem, 2.6vw, 1.6rem); } .quick span { font-size: clamp(.85rem, 1.7vw, 1.05rem); } }
@media (max-width: 760px) {
  .quick-grid { gap: 8px; margin-top: 4px; }
  .quick { aspect-ratio: 5 / 4; padding: 6px 2px; gap: 2px; }
  .quick b { font-size: clamp(.95rem, 4.4vw, 1.25rem); }
  .quick span { font-size: clamp(.8rem, 3.4vw, .95rem); }
  .quick small { font-size: .75rem; }
}
.lobby-buttons { display: grid; gap: 10px; margin-bottom: 12px; }
@media (max-width: 760px) { .lobby-buttons { grid-template-columns: 1fr 1fr; gap: 8px; } .lobby-buttons .btn.big { padding: 11px 6px; font-size: 15.5px; } .lobby-buttons #customBtn { grid-column: 1 / -1; } }
.lobby-table .sub { display: none; }
.tab-short { display: none; }
@media (max-width: 560px) {
  .lobby-table th.opt, .lobby-table td.opt { display: none; }
  .lobby-table .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
  .lobby-table td { padding: 8px 5px; }
  .lobby-tabs .tab { padding: 8px 9px; font-size: 14.5px; }
  .tab-long { display: none; }
  .tab-short { display: inline; }
}
.lobby-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--leather-3); margin-bottom: 10px; }
.tab { background: none; border: 0; color: var(--muted); font: 500 15px var(--sans); padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--vellum); border-bottom-color: var(--brass); }
.tab .count { display: inline-block; min-width: 1.4em; font-size: 12px; color: var(--ink); background: var(--brass); border-radius: 9px; padding: 0 5px; margin-left: 4px; }
.tab .count:empty { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.filters select { width: auto; padding: 4px 8px; font-size: 14px; }
.fgroup { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fchip { background: var(--leather-2); color: var(--muted); border: 1px solid var(--leather-3); border-radius: 12px; padding: 2px 10px; font: 13px var(--sans); cursor: pointer; }
.fchip.on { color: var(--ink); background: var(--brass); border-color: var(--brass); }
.table-wrap { overflow-x: auto; }
.list-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.list-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 13px; padding: 6px 8px; border-bottom: 1px solid var(--leather-3); }
.list-table td { padding: 8px; border-bottom: 1px solid rgba(71,54,42,.55); vertical-align: middle; }
.list-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.list-table tr.clickable { cursor: pointer; }
.list-table tr.clickable:hover td { background: var(--leather-2); }
.list-table tr.mine td { background: rgba(201,162,75,.08); }
.list-table.compact td { padding: 4px 6px; }
.list-table a { text-decoration: none; }
.r { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.anon { color: var(--vellum); }
.side-box { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 14px 16px; margin-bottom: 14px; }
.side-box.intro p { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.side-box.intro p:last-child { margin-bottom: 0; }
.mini { margin-bottom: 10px; font-size: 14px; }
.mini b { display: block; color: var(--brass); font-weight: 500; }
.mini a { text-decoration: none; }
.more { font-size: 14px; }
.my-game { display: block; padding: 6px 0; text-decoration: none; color: var(--vellum); border-bottom: 1px solid var(--leather-3); }
.my-game small { display: block; }

/* dialogs */
.dlg-x { float: right; background: none; border: 0; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; margin: -10px -8px 0 0; }
.dlg-x:hover { color: var(--vellum); }
.seg { display: inline-flex; gap: 0; border: 1px solid var(--leather-3); border-radius: var(--radius-s); overflow: hidden; margin-bottom: 14px; }
.seg button { background: var(--leather-2); color: var(--muted); border: 0; border-right: 1px solid var(--leather-3); padding: 7px 14px; font: 500 14px var(--sans); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--brass); color: var(--ink); }
.seg.wrap { display: flex; flex-wrap: wrap; overflow: visible; border: 0; gap: 6px; }
.seg.wrap button { border: 1px solid var(--leather-3); border-radius: var(--radius-s); text-align: left; }
.seg.wrap button small { display: block; font-size: 11px; opacity: .85; font-weight: 400; }
.game-form fieldset { border: 0; padding: 0; margin: 0 0 4px; }
.game-form legend { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.auth-form label small, .form-row label small { display: block; margin-top: 3px; font-size: 12px; }
.form-error { color: var(--bad); min-height: 1.2em; margin: 4px 0 10px; }
.tabs2 { display: flex; width: calc(100% - 30px); }
.tabs2 button { flex: 1; }

/* battle header: players and clocks */
.players { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-s); background: var(--leather-2); border: 1px solid transparent; font-size: 14px; }
.pchip.active { border-color: var(--brass); }
.pchip.empty { color: var(--muted); }
.pchip .pname { font-weight: 700; color: var(--vellum); text-decoration: none; }
.pchip a.pname:hover { color: var(--brass); }
.pchip .prating { color: var(--muted); font-size: 13px; }
.pchip .parmy { color: var(--muted); font-size: 12px; }
.pchip .away { font-size: 11px; background: #6b2a20; color: #fff; border-radius: 8px; padding: 0 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.owner-bg0 { background: #c8463a; }
.owner-bg1 { background: #4a7cc0; }
.clock { font: 700 15px var(--sans); font-variant-numeric: tabular-nums; background: var(--ink); color: var(--muted); padding: 1px 7px; border-radius: 3px; min-width: 52px; text-align: center; }
.clock.run { color: var(--vellum); background: #3c2c1f; box-shadow: inset 0 0 0 1px var(--brass-dim); }
.clock.low { color: #ffb0a0; }
.clock.run.low { background: #6b2a20; color: #fff; }
.vs { color: var(--muted); font-size: 13px; }
.gtag { font-size: 12.5px; color: var(--muted); background: var(--leather-2); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.game-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.fixed-note { margin: 0; font-size: 14px; color: var(--muted); }
.fixed-note b { color: var(--vellum); }
.rating-change { display: flex; gap: 18px; flex-wrap: wrap; }
.up { color: var(--good); }
.down { color: var(--bad); }

/* replay bar */
.replay-bar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  background: rgba(28,21,16,.94); border: 1px solid var(--brass-dim); border-radius: var(--radius-m); padding: 8px 10px;
  max-width: calc(100% - 24px);
}
.replay-bar input[type=range] { width: 220px; accent-color: var(--brass); padding: 0; }
.replay-bar select { width: auto; padding: 3px 6px; font-size: 13px; }
.replay-bar .btn { min-width: 34px; }
.board-wrap:has(#replayBar:not([hidden])) .hint-box { bottom: auto; top: 10px; }

/* profile */
.prof-head { margin-bottom: 18px; }
.prof-name { font-size: 2.6rem; margin: 0; display: flex; align-items: center; gap: 12px; }
.online { width: 12px; height: 12px; border-radius: 50%; background: var(--leather-3); display: inline-block; }
.online.on { background: var(--good); }
.rating-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.rcard {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--vellum);
  background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m);
}
.rcard.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.rname { color: var(--brass); font-weight: 500; }
.rval { font: 700 1.9rem var(--sans); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rgames, .rwld { font-size: 13px; color: var(--muted); }
.chart-box { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 14px 16px; margin-bottom: 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; }
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { display: block; width: 100%; }
.chart-tip { position: absolute; pointer-events: none; background: var(--ink); border: 1px solid var(--brass-dim); border-radius: var(--radius-s); padding: 5px 9px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.chart-tip b { color: var(--vellum); font-size: 15px; }
.prof-stats { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-bottom: 24px; }
@media (max-width: 760px) { .prof-stats { grid-template-columns: minmax(0, 1fr); } }
.stat-box { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 14px 16px; }
.big-num { font: 700 2.2rem var(--sans); margin: 0 0 6px; }
.wdl { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--ink); margin-bottom: 8px; }
.wdl .w { background: var(--good); } .wdl .d { background: var(--muted); } .wdl .l { background: var(--bad); }
.res-win { color: var(--good); } .res-loss { color: var(--bad); } .res-draw { color: var(--muted); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 14px 0; }

/* leaderboard */
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; }
.board { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 14px 16px; }
.board h2 small { font-family: var(--sans); font-size: 13px; }
.rank { color: var(--muted); width: 2em; }

/* account: email confirmation */
.warn-note { color: var(--vellum); background: rgba(201, 162, 75, .12); border: 1px solid var(--brass-dim); border-radius: var(--radius-s); padding: 8px 12px; }
.warn-note a { color: var(--brass); }
.dot-warn { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); margin-left: 4px; vertical-align: middle; }
.acct-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; overflow-wrap: anywhere; }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid currentColor; }
.tag.ok { color: var(--good); }
.tag.warn { color: var(--bad); }

/* ---------- setup deadlines, battlefield size ---------- */
.deadline { font-size: 12.5px; color: var(--vellum); background: #3c2c1f; padding: 2px 9px; border-radius: 10px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--brass-dim); }
.deadline b { font-variant-numeric: tabular-nums; }
.deadline.low { background: #6b2a20; color: #fff; box-shadow: none; }
.ttag { color: var(--brass); text-decoration: none; }
.ttag:hover { color: var(--vellum); }
.field-note { font-size: 13px; margin: 0 0 8px; }
.field-sizes { margin-bottom: 10px; }
.field-sizes button:disabled { cursor: default; opacity: .6; }
.field-sizes button.on:disabled { opacity: 1; }
.nowrap { white-space: nowrap; }

/* ---------- tournaments ---------- */
.t-banner { display: grid; gap: 8px; margin-bottom: 14px; }
.t-ready .btn, .t-actions .btn { text-decoration: none; }
.t-ready { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px;
  background: rgba(201,162,75,.12); border: 1px solid var(--brass); border-radius: var(--radius-m); font-size: 14.5px; }
.tstatus { font-size: 12px; padding: 1px 9px; border-radius: 10px; white-space: nowrap; border: 1px solid currentColor; }
.tstatus.scheduled { color: var(--brass); }
.tstatus.running { color: var(--good); }
.tstatus.finished { color: var(--muted); }
.tstatus.cancelled { color: var(--bad); }
#tList { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
#tList > p, #tList > .cal-day { grid-column: 1 / -1; }
.t-card { display: grid; gap: 4px; padding: 14px 16px; text-decoration: none; color: var(--vellum); font-size: 14px;
  background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); transition: border-color .12s; }
.t-card:hover { border-color: var(--brass); }
.t-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1.05rem; }
.t-card .chips { margin-top: 4px; }
.cal-day { margin-bottom: 16px; }
.cal-day h3 { border-bottom: 1px solid var(--leather-3); padding-bottom: 4px; }
.cal-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 4px;
  text-decoration: none; color: var(--vellum); border-bottom: 1px solid rgba(71,54,42,.55); font-size: 14.5px; }
.cal-row:hover { background: var(--leather-2); }
.cal-time { font-variant-numeric: tabular-nums; color: var(--brass); }
.t-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.t-desc { white-space: pre-line; max-width: 75ch; }
.t-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; }
.t-actions .btn.big { width: auto; padding: 10px 26px; }
.t-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.t-info > div { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 9px 12px; font-size: 14px; }
.t-info > div > span:first-child { display: block; font-size: 12px; }
.t-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; margin-top: 20px; }
@media (max-width: 900px) { .t-cols { grid-template-columns: minmax(0, 1fr); } }
.list-table tr.cur td { background: rgba(143,191,106,.12); }
.list-table td.rank { color: var(--brass); }
.t-round { margin-bottom: 18px; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 10px 0 20px; }
.pod { display: grid; justify-items: center; gap: 2px; width: 170px; padding: 14px 10px; text-align: center;
  background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m) var(--radius-m) 0 0; }
.pod a { text-decoration: none; }
.pod.p1 { order: 2; min-height: 140px; border-color: var(--brass); background: rgba(201,162,75,.14); }
.pod.p2 { order: 1; min-height: 115px; }
.pod.p3 { order: 3; min-height: 95px; }
.medal { font: 1.3rem var(--serif); color: var(--brass); }
.pod.p2 .medal { color: #c9c4b8; }
.pod.p3 .medal { color: #c48a5a; }
@media (max-width: 560px) { .pod { width: auto; flex: 1; } }

/* ---------- admin ---------- */
.admin-cols { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 980px) { .admin-cols { grid-template-columns: minmax(0, 1fr); } }
.admin-form-box { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 18px 20px; }
.admin-form textarea { font: 15px var(--sans); color: var(--vellum); background: var(--ink); border: 1px solid var(--leather-3);
  border-radius: var(--radius-s); padding: 7px 9px; width: 100%; margin-top: 4px; resize: vertical; }
.admin-form fieldset { border: 1px solid var(--leather-3); border-radius: var(--radius-s); padding: 8px 12px 4px; margin: 0 0 12px; }
.admin-form legend { color: var(--muted); font-size: 14px; padding: 0 4px; }
.admin-form details { margin-bottom: 10px; }
.admin-form summary { cursor: pointer; font-size: 14px; margin-bottom: 8px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }
label.check { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--vellum); cursor: pointer; }
label.check input { width: auto; margin: 0; accent-color: var(--brass); }
.unit-in { display: flex; gap: 6px; margin-top: 4px; }
.unit-in input { flex: 1; min-width: 0; margin: 0; }
.unit-in select { width: auto; margin: 0; }
.list-table td.num { white-space: nowrap; }

/* ---------- phones: tighter spacing everywhere ---------- */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .page-inner { padding: 16px 12px 44px; }
  .page-title { font-size: 2rem; }
  h2 { font-size: 1.3rem; }
  .topbar { gap: 8px 12px; padding: 8px 12px; }
  .topbar .brand { font-size: 1.2rem; }
  .opp, .top-actions { margin-left: 0; }
  .gtag { white-space: normal; }
  .side-box { padding: 12px 14px; }
  .t-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 380px) { .t-info { grid-template-columns: minmax(0, 1fr); } }

/* ---------- battle and muster headers on phones and small tablets ---------- */
@media (max-width: 760px) {
  #battle .topbar { gap: 6px 10px; }
  .top-actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  .top-actions .btn { padding: 5px 9px; font-size: 13.5px; }
  .top-actions #mainBtn { flex: 1 1 100%; padding: 9px; font-size: 15px; }
  #turnInfo { flex: 1 1 100%; font-size: 14px; }
  .phase-track { flex-wrap: wrap; gap: 2px; }
  .phase-track li { padding: 2px 7px; font-size: 13px; white-space: nowrap; }
  .players { gap: 4px 6px; }
  .pchip { font-size: 13px; padding: 2px 6px; }
  .pchip .parmy { display: none; }
  .clock { min-width: 46px; font-size: 14px; }
  .hint { font-size: 12.5px; }
  .hint-box { left: 6px; bottom: 6px; max-width: calc(100% - 12px); }
  .battle-grid { grid-template-rows: min(64vh, 135vw) auto; }
  .share { flex-wrap: wrap; gap: 6px 10px; }
}

/* ---------- how to play (the guide) ---------- */
.guide-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 36px; align-items: start; max-width: 1180px; }
.guide-toc { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; }
.guide-toc-list { display: grid; gap: 2px; font-size: 14px; }
.guide-toc-list b { font-family: var(--serif); font-weight: 400; color: var(--brass); font-size: 1.1rem; margin-bottom: 6px; }
.guide-toc-list a { color: var(--muted); text-decoration: none; padding: 4px 8px; border-left: 2px solid var(--leather-3); }
.guide-toc-list a:hover { color: var(--vellum); border-left-color: var(--brass); }
.guide-toc-toggle { display: none; }
.guide-body { min-width: 0; max-width: 78ch; }
.guide-text { line-height: 1.6; }
.guide-text h1 { font-size: 2.5rem; color: var(--vellum); margin-bottom: .4em; }
.guide-text h2 { font-size: 1.65rem; margin: 1.8em 0 .5em; padding-top: .4em; border-top: 1px solid var(--leather-3); }
.guide-text h3 { margin: 1.3em 0 .4em; }
.guide-text h1, .guide-text h2, .guide-text h3, .guide-text h4 { scroll-margin-top: 72px; }
.guide-text p, .guide-text ul, .guide-text ol { margin: 0 0 .9em; }
.guide-text ul, .guide-text ol { padding-left: 1.4em; }
.guide-text li { margin-bottom: .35em; }
.guide-text li > ul, .guide-text li > ol { margin: .35em 0 0; }
.guide-text code { background: var(--ink); padding: 1px 5px; border-radius: 3px; font-size: .92em; }
.guide-text pre { background: var(--ink); padding: 12px 14px; border-radius: var(--radius-s); overflow: auto; }
.guide-text pre code { background: none; padding: 0; }
.guide-text img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.guide-text hr { border: 0; border-top: 1px solid var(--leather-3); margin: 1.6em 0; }
.guide-text blockquote.note { margin: 0 0 1.1em; padding: 10px 16px; background: rgba(201,162,75,.1); border-left: 3px solid var(--brass); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.guide-text blockquote.note p:last-child { margin-bottom: 0; }
.guide-table { margin-bottom: 1.1em; }
.guide-table td { vertical-align: top; line-height: 1.45; }
.guide-admin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px;
  background: var(--leather-2); border: 1px dashed var(--brass-dim); border-radius: var(--radius-m); }
@media (max-width: 900px) {
  .guide-wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .guide-toc { position: static; max-height: none; overflow: visible; padding: 0 0 6px; }
  .guide-toc:empty { display: none; }
  .guide-toc-toggle { display: block; width: 100%; text-align: left; font: 500 15px var(--sans); color: var(--vellum); background: var(--leather-2);
    border: 1px solid var(--leather-3); border-radius: var(--radius-s); padding: 9px 12px; cursor: pointer; }
  .guide-toc-toggle::after { content: " \25BE"; color: var(--brass); }
  .guide-toc-list { display: none; margin-top: 6px; background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-s);
    padding: 8px; max-height: 60vh; overflow: auto; }
  .guide-toc.open .guide-toc-list { display: grid; }
  .guide-toc-list b { display: none; }
  .guide-text h1 { font-size: 2rem; }
  .guide-text h2 { font-size: 1.4rem; }
}

/* the editor (admins) */
.guide-editor { display: grid; gap: 10px; }
.guide-wrap:has(.guide-editor) { grid-template-columns: minmax(0, 1fr); max-width: 1500px; }
.guide-wrap:has(.guide-editor) .guide-body { max-width: none; }
.guide-wrap:has(.guide-editor) .guide-toc { display: none; }
.ge-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ge-bar input { flex: 1 1 260px; font: 1.2rem var(--serif); }
.ge-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ge-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ge-pane { min-width: 0; }
.ge-src textarea { width: 100%; min-height: 70vh; resize: vertical; font: 13.5px/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--vellum); background: var(--ink); border: 1px solid var(--leather-3); border-radius: var(--radius-s); padding: 12px; tab-size: 2; }
.ge-preview { max-height: 75vh; overflow: auto; padding: 4px 16px 16px; background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-s); }
.ge-help { margin-top: 8px; font-size: 14px; }
.ge-help summary { cursor: pointer; color: var(--muted); }
.ge-help pre { white-space: pre-wrap; background: var(--ink); padding: 10px 12px; border-radius: var(--radius-s); font-size: 12.5px; }
.ge-only-phone { display: none; }
@media (max-width: 900px) {
  .ge-panes { grid-template-columns: minmax(0, 1fr); }
  .ge-only-phone { display: inline-block; }
  .guide-editor .ge-preview { display: none; }
  .guide-editor.show-preview .ge-preview { display: block; max-height: none; }
  .guide-editor.show-preview .ge-src { display: none; }
  .ge-src textarea { min-height: 60vh; }
}

/* ---------- chat in games ---------- */
.side-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--leather-3); margin-bottom: 8px; }
.side-tabs button { background: none; border: 0; color: var(--muted); font: 500 14.5px var(--sans); padding: 6px 10px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.side-tabs button.on { color: var(--vellum); border-bottom-color: var(--brass); }
.side-tabs .count { display: inline-block; min-width: 1.4em; font-size: 11.5px; color: var(--ink); background: var(--brass); border-radius: 9px; padding: 0 5px; }
.side-tabs .count:empty { display: none; }
#bChat { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 10px; }
#bChat[hidden] { display: none; }
#bChat .chat { flex: 1; min-height: 220px; }
.chat { display: flex; flex-direction: column; min-height: 0; }
#mChat { margin-top: 18px; }
#mChat .chat { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 10px 12px; height: 300px; }
.chat-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.chat-head [data-room] { background: var(--leather-3); color: var(--muted); border: 0; border-radius: 12px; padding: 2px 10px; font: 13px var(--sans); cursor: pointer; }
.chat-head [data-room].on { background: var(--brass); color: var(--ink); }
.chat-head [data-room] small { opacity: .8; }
.chat-title { font-size: 13px; color: var(--muted); }
.chat-hide { margin-left: auto; font-size: 12.5px; }
.chat-list { flex: 1; min-height: 80px; overflow-y: auto; font-size: 14px; overflow-wrap: anywhere; padding-right: 4px; }
.chat-msg { margin: 0 0 4px; line-height: 1.35; white-space: pre-line; }
.chat-msg a, .chat-msg b { font-weight: 700; text-decoration: none; }
.chat-msg a:not([class*="owner-"]), .chat-msg b:not([class*="owner-"]) { color: var(--brass); }
.chat-time { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chat-x { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; }
.chat-empty, .chat-note, .chat-offnote { font-size: 13px; margin: 6px 0 0; }
.chat-form { display: flex; gap: 6px; margin-top: 6px; }
.chat-form input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 14.5px; }
@media (max-width: 1000px) { #bChat .chat { height: 320px; } }

/* ---------- player search ---------- */
.nav-search { position: relative; }
.search-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; z-index: 30; padding: 8px;
  background: var(--leather-2); border: 1px solid var(--brass-dim); border-radius: var(--radius-m); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.search-pop input { width: 100%; }
.search-results { display: grid; margin-top: 6px; max-height: 320px; overflow: auto; }
.search-results a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-s); color: var(--vellum); text-decoration: none; }
.search-results a.on, .search-results a:hover { background: var(--leather-3); }
.search-results p { margin: 4px 8px; font-size: 13.5px; }
.search-results.inline { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 10px; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--leather-3); flex: none; }
.online.on { background: var(--good); }
@media (max-width: 560px) {
  .nav-search { position: static; }
  .search-pop { left: 12px; right: 12px; width: auto; top: auto; margin-top: 8px; }
}

/* ---------- messages ---------- */
.inbox-btn { position: relative; text-decoration: none; }
.inbox-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--crimson); color: #fff; font: 700 11px/17px var(--sans); text-align: center; }
.inbox-btn .badge:empty { display: none; }
.prof-actions { margin-top: 8px; }
.prof-actions .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
.inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.inbox-head .page-title { font-size: 2rem; margin: 0; }
.conv { position: relative; display: grid; gap: 2px; padding: 9px 12px; margin-bottom: 4px; text-decoration: none; color: var(--vellum);
  background: var(--leather-2); border: 1px solid transparent; border-radius: var(--radius-s); }
.conv:hover { border-color: var(--leather-3); }
.conv.on { border-color: var(--brass); }
.conv.unread b { color: var(--brass); }
.conv-top { display: flex; justify-content: space-between; gap: 8px; }
.conv-last { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 26px; }
.conv .count { position: absolute; right: 10px; bottom: 9px; min-width: 1.4em; font-size: 11.5px; text-align: center; color: var(--ink);
  background: var(--brass); border-radius: 9px; padding: 0 5px; }
.inbox-thread { display: flex; flex-direction: column; min-height: 60vh; background: var(--leather-2); border: 1px solid var(--leather-3);
  border-radius: var(--radius-m); padding: 12px 14px; }
.inbox-pick { margin: auto; }
.thread-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--leather-3); }
.thread-head b a { color: var(--vellum); text-decoration: none; font-size: 1.1rem; }
.thread-back { display: none; font-size: 1.4rem; text-decoration: none; }
.thread-tools { margin-left: auto; display: flex; gap: 6px; }
.thread-msgs { flex: 1; overflow-y: auto; max-height: 60vh; padding: 10px 2px; display: flex; flex-direction: column; gap: 6px; }
.thread-day { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 2px; }
.bubble { max-width: 78%; align-self: flex-start; padding: 7px 11px; border-radius: 12px 12px 12px 3px; background: var(--leather-3); }
.bubble.mine { align-self: flex-end; background: #5a4630; border-radius: 12px 12px 3px 12px; }
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; text-align: right; }
.thread-form { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; border-top: 1px solid var(--leather-3); }
.thread-form textarea { flex: 1; min-width: 0; resize: vertical; font: 15px var(--sans); color: var(--vellum); background: var(--ink);
  border: 1px solid var(--leather-3); border-radius: var(--radius-s); padding: 8px; }
.thread-why { margin: 8px 0 0; }
.auth-form textarea { width: 100%; font: 15px var(--sans); color: var(--vellum); background: var(--ink); border: 1px solid var(--leather-3);
  border-radius: var(--radius-s); padding: 8px; margin-top: 4px; resize: vertical; }
@media (max-width: 760px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox.has-thread .inbox-list { display: none; }
  .inbox:not(.has-thread) .inbox-thread { display: none; }
  .thread-back { display: inline; }
  .inbox-thread { min-height: calc(100vh - 170px); padding: 10px; }
  .thread-msgs { max-height: none; }
  .bubble { max-width: 88%; }
}
.nav-user .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .nav-right { gap: 6px; flex-wrap: wrap; }
  .nav-user { gap: 5px; }
  .nav-user .btn.small { padding: 4px 8px; font-size: 13.5px; }
  .nav .icon-btn { width: 32px; height: 32px; }
}

/* fog of war */
.lbl3d.ghost3d { opacity: .72; font-style: italic; border-bottom-style: dashed; background: rgba(28,21,16,.6); }
.fogchip { background: #3b4a55; }
.fog-tag { font-size: 11.5px; color: #cfe0ea; background: #3b4a55; border-radius: 8px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
label.check.fog-opt { margin: 2px 0 12px; }
label.check.fog-opt small { display: block; color: var(--muted); font-size: 12px; margin-left: 24px; }


/* ---------- battle screen: menu, unit dock, bottom bar (the last two only on phones and tablets) ---------- */
.more-menu { display: contents; }
.menu-btn { display: none; }
.battle-dock { display: none; }
.side-close { display: none; }
.unit-tools { display: none; }
.unit-head { display: flex; align-items: flex-start; gap: 8px; }
.unit-head .unit-name { flex: 1; min-width: 0; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* phones and tablets (narrow screens, or any touch screen): the battlefield takes the whole screen; the
   battle log, the chat and the full unit profile open as full-screen panels from the bar at the bottom */
#battle.compact { position: fixed; inset: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; z-index: 6; }
#battle.compact .topbar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; padding: 6px 8px; align-items: center; }
#battle.compact .topbar .brand { display: none; }
#battle.compact .players { grid-column: 1; grid-row: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#battle.compact .players::-webkit-scrollbar { display: none; }
#battle.compact .top-actions { display: contents; }
#battle.compact .sound-toggles { grid-column: 2; grid-row: 1; display: inline-flex; gap: 4px; align-items: center; }
#battle.compact .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 32px; padding: 0 8px; }
#battle.compact .menu-btn span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
#battle.compact .menu-btn { grid-column: 3; grid-row: 1; }
#battle.compact .phase-track { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }
#battle.compact .phase-track li { padding: 2px 8px; font-size: 13px; white-space: nowrap; }
#battle.compact .phase-track:empty { display: none; }
#battle.compact #turnInfo { grid-column: 1; grid-row: 3; font-size: 13.5px; min-width: 0; }
/* the turn line keeps the height of the main button, so hiding the button (looking back, watching, waiting) never
   changes the size of the battlefield (the 3D view would jump to another zoom) */
#battle.compact #turnInfo { min-height: 34px; display: flex; align-items: center; }
#battle.compact #mainBtn { grid-column: 2 / -1; grid-row: 3; padding: 7px 12px; font-size: 14.5px; white-space: nowrap; }
#battle.compact #claimBtn { grid-column: 1 / -1; grid-row: 4; }
#battle.compact #mainBtn[hidden], #battle.compact #claimBtn[hidden] { display: none; }
/* the menu opens like the site's menu: a panel over the whole screen under the top bar; the burger turns into an X */
#battle.compact .more-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; height: 100dvh; z-index: 30;
  flex-direction: column; gap: 2px; background: var(--ink); border-top: 1px solid var(--brass-dim); padding: 8px 12px 14px; overflow-y: auto; }
#battle.compact .more-menu.open { display: flex; }
#battle.compact .more-menu .btn { display: block; width: 100%; text-align: left; justify-content: flex-start; padding: 11px 10px; font-size: 16.5px;
  border: 0; border-radius: var(--radius-s); background: none; color: var(--vellum); }
#battle.compact .more-menu .btn:hover { background: var(--leather-2); }
#battle.compact .more-menu .btn[hidden] { display: none; }
#battle.compact .more-menu .menu-home { border-bottom: 1px solid var(--leather-3); border-radius: 0; margin-bottom: 4px; }
#battle.compact .topbar { position: relative; z-index: 30; }

#battle.compact .battle-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; }
#battle.compact .board-wrap { grid-row: 1; min-height: 0; }
#battle.compact .phase-track { display: none; }
/* the selected unit: name and orders in a strip under the battlefield; Details (or a double tap) opens everything */
/* it lies over the bottom of the battlefield (the battlefield keeps its size, so the view doesn't jump) */
#battle.compact #unitPanel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; box-shadow: 0 -6px 18px rgba(0,0,0,.35); border-top: 1px solid var(--brass-dim); border-bottom: 0; background: var(--leather-2);
  padding: 0; overflow: visible; display: flex; flex-direction: column; }
#battle.compact #unitPanel .up-scroll { max-height: 40vh; overflow: auto; padding: 10px 10px 10px; }
#battle.compact #unitPanel.mini .up-scroll { max-height: none; overflow: hidden; }
#battle.compact #unitPanel.mini:not(.full) .up-scroll > :not(.unit-head) { display: none; }
/* a unit you can't give orders to (a replay, a game you watch, an enemy unit): the strip is just its name and Details */
#battle.compact #unitPanel.no-orders:not(.full) .up-scroll { max-height: none; overflow: hidden; }
#battle.compact #unitPanel.no-orders:not(.full) .up-scroll > :not(.unit-head) { display: none; }
#battle.compact #unitPanel:not(.has-unit):not(.full) { display: none; }
#battle.compact #unitPanel:not(.full) :is(.unit-sub, .prof, .facts, .chips, .facts-sub, .empty, h3) { display: none; }
#battle.compact #unitPanel:not(.full) .unit-name { font-size: 1.15rem; }
#battle.compact #unitPanel .unit-tools { display: inline-flex; gap: 4px; flex: none; }
#battle.compact #unitPanel.full { position: fixed; inset: 0; z-index: 40; max-height: none; padding: 14px 16px 30px; border: 0; }
#battle.compact #unitPanel.full [data-unit-full] { display: none; }
#battle.compact #unitPanel .actions { margin-top: 4px; }
#battle.compact #unitPanel .actions .btn { padding: 8px 11px; font-size: 14px; }

/* battle log and chat: full-screen panels */
#battle.compact .side { display: none; position: fixed; inset: 0; z-index: 35; border: 0; }
#battle.compact .side.open { display: flex; }
#battle.compact .side .log-wrap { padding: 8px 12px 0; min-height: 0; }
#battle.compact .side-close { display: inline-block; margin-left: auto; background: none; border: 0; color: var(--vellum); font-size: 26px; line-height: 1; padding: 2px 8px; cursor: pointer; }
#battle.compact .side-tabs button[data-side] { font-size: 16px; padding: 8px 12px; }
#battle.compact #bChat .chat { height: auto; flex: 1; }
#battle.compact #bChat:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#battle.compact .log { font-size: 14.5px; }

#battle.compact .battle-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 50px 50px; flex: none; background: var(--ink);
  border-top: 1px solid var(--brass-dim); padding-bottom: env(safe-area-inset-bottom); }
.battle-dock button { background: none; border: 0; border-right: 1px solid var(--leather-3); color: var(--vellum); font: 500 15px var(--sans);
  padding: 12px 6px; cursor: pointer; }
.battle-dock button:last-child { border-right: 0; }
.battle-dock button.on { color: var(--brass); box-shadow: inset 0 2px 0 var(--brass); }
.battle-dock .count { display: inline-block; min-width: 1.4em; font-size: 11.5px; color: var(--ink); background: var(--brass); border-radius: 9px; padding: 0 5px; }
.battle-dock .count:empty { display: none; }
#battle.compact .hint-box { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
#battle.compact .replay-bar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; padding: 6px 8px; gap: 4px 6px; justify-content: flex-start; }
#battle.compact .replay-bar .btn { min-width: 38px; padding: 6px 8px; }
#battle.compact .replay-bar input[type=range] { order: 10; flex: 1 1 100%; width: auto; }
#battle.compact .replay-bar #rpPos { margin-left: auto; }
#battle.compact .players .gtag { display: none; }
#battle.compact .players .ttag, #battle.compact .players .t-tag { display: none; }
body:has(#battle.compact:not([hidden])) .toast { bottom: calc(64px + env(safe-area-inset-bottom)); }

#battle.compact:has(#unitPanel.has-unit:not(.full)) .hint-box { bottom: auto; top: 8px; }
#battle.compact:has(#unitPanel.has-unit:not(.full)) .replay-bar { bottom: auto; top: 8px; }
#battle.compact:has(#unitPanel.has-unit:not(.full)):has(#replayBar:not([hidden])) .hint-box { top: auto; bottom: calc(42% + 8px); }
.me-bar { display: none; }
#battle.compact .me-bar { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--leather-3); min-width: 0; overflow: hidden; }
#battle.compact .me-bar:empty { display: none; }
#battle.compact .players .pchip, #battle.compact .me-bar .pchip { max-width: 100%; }
#battle.compact .pchip .parmy { display: inline; }

/* the round fold button on the top edge of the unit strip (phones and tablets) */
.up-shrink { display: none; }
#battle.compact #unitPanel:not(.full) .up-shrink { display: grid; place-items: center; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--brass-dim); background: var(--leather-2); color: var(--brass);
  box-shadow: 0 -3px 10px rgba(0,0,0,.35); cursor: pointer; padding: 0; z-index: 1; }
#battle.compact #unitPanel .up-shrink::before { content: ""; width: 12px; height: 12px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg); }
#battle.compact #unitPanel.mini .up-shrink::before { transform: translateY(3px) rotate(-135deg); }
#battle.compact #unitPanel.full .up-scroll { max-height: none; overflow: visible; padding: 0; }
#battle.compact #unitPanel.full { overflow: auto; display: block; }

/* army list on phones: name and price + Add on the first line, the profile on its own line underneath */
@media (max-width: 600px) {
  .cat-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 9px 10px; }
  .cat-row > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
  .cat-row > div:last-child { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .cat-row .cost { white-space: normal; text-align: right; font-size: 13px; max-width: 120px; }
  .cat-row .statline { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; }
  .cat-row .statline span { width: auto; }
  .muster-grid, #muster { overflow-x: hidden; }
  .muster-grid > * { min-width: 0; }
}

/* ---------- site menu on phones and tablets: everything but the logo and your name goes behind the burger ---------- */
.nav-menu { display: contents; }
.nav-burger { display: none; }
.nav-label { display: none; }
.nav-account { display: none; }
.menu-home { display: none; }
@media (max-width: 1000px), (hover: none) and (pointer: coarse) {
  .nav { position: sticky; flex-wrap: nowrap; gap: 10px; padding: 8px 12px; }
  .nav-brand { font-size: 1.3rem; white-space: nowrap; }
  .nav-user { margin-left: auto; min-width: 0; }
  .nav-user .me-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
  .nav-user #pwBtn, .nav-user #logoutBtn { display: none; }
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 36px; padding: 0 9px; flex: none;
    background: transparent; border: 1px solid var(--leather-3); border-radius: var(--radius-s); color: var(--vellum); cursor: pointer; position: relative; }
  .nav-burger span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
  .nav-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--crimson); }
  .nav-dot[hidden] { display: none; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; flex-direction: column; gap: 4px;
    background: var(--ink); border-bottom: 1px solid var(--brass-dim); padding: 8px 12px 14px; box-shadow: 0 14px 30px rgba(0,0,0,.5);
    max-height: calc(100vh - 56px); overflow-y: auto; }
  .nav.menu-open .nav-menu { display: flex; }
  .nav-links { order: 0; width: auto; flex-direction: column; gap: 0; }
  .nav-links a { padding: 11px 10px; font-size: 16.5px; border-radius: var(--radius-s); }
  .nav-links a.on { box-shadow: inset 3px 0 0 var(--brass); background: var(--leather-2); }
  .nav-right { margin: 6px 0 0; flex-direction: column; align-items: stretch; gap: 8px; border-top: 1px solid var(--leather-3); padding-top: 10px; }
  .nav-right > .sound-toggles { order: 3; }
  .nav-right > .sound-toggles + .nav-label { order: 2; display: block; color: var(--muted); font-size: 13px; margin: 4px 0 -4px; }
  .nav-search { position: static; }
  .nav-search #searchBtn { display: none; }
  .nav-search .search-pop { position: static; width: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .inbox-btn, .ground-btn { width: auto; height: auto; display: flex; align-items: center; gap: 10px; padding: 9px 10px; justify-content: flex-start; color: var(--vellum); border: 0; }
  .inbox-btn svg, .ground-btn svg { width: 22px; height: 22px; flex: none; }
  .inbox-btn[hidden] { display: none; }
  .inbox-btn .nav-label, .ground-btn .nav-label { display: inline; font-size: 16px; }
  .inbox-btn .badge { position: static; }
  .nav-account { display: flex; gap: 8px; border-top: 1px solid var(--leather-3); padding-top: 10px; margin-top: 4px; }
  .nav-account:empty { display: none; }
  #battle.compact .menu-home { display: block; }
}

/* ---------- lists (lobby, battles to watch, game histories, tournaments...) on phones: one card per row, no
   sideways scrolling; each value carries its column name (added by site.js) ---------- */
@media (max-width: 760px) {
  .table-wrap { overflow-x: visible; }
  .list-table:not(.guide-table) { display: block; }
  .list-table:not(.guide-table) thead { display: none; }
  .list-table:not(.guide-table) tbody { display: block; }
  .list-table:not(.guide-table) tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 4px;
    border-bottom: 1px solid rgba(71,54,42,.55); }
  .list-table:not(.guide-table) td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
  .list-table:not(.guide-table) td.num { text-align: left; }
  .list-table:not(.guide-table) td[data-l]:not([data-l=""])::before { content: attr(data-l) " "; color: var(--muted); font-size: 12px; font-weight: 400; }
  .list-table:not(.guide-table) td:last-child:has(.btn) { margin-left: auto; }
  .list-table:not(.guide-table) td[colspan] { flex: 1 1 100%; }
  .list-table tr.mine { background: rgba(201,162,75,.08); }
  .list-table tr.cur { background: rgba(143,191,106,.12); }
  .list-table tr.mine td, .list-table tr.cur td { background: none; }
  .list-table tr.clickable:hover { background: var(--leather-2); }
  .guide-table { font-size: 13.5px; }
  .guide-table td, .guide-table th { overflow-wrap: anywhere; }
  .lobby-table th.opt, .lobby-table td.opt { display: none; }
  .lobby-table .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
  .lobby-table td:first-child { flex: 1 1 100%; }
}

/* the same cards for a list in a narrow column (the lobby on a tablet, for instance) */
.table-wrap { container-type: inline-size; }
@container (max-width: 600px) {
  .table-wrap .list-table:not(.guide-table) { display: block; }
  .table-wrap .list-table:not(.guide-table) thead { display: none; }
  .table-wrap .list-table:not(.guide-table) tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 4px;
    border-bottom: 1px solid rgba(71,54,42,.55); }
  .table-wrap .list-table:not(.guide-table) td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
  .table-wrap .list-table:not(.guide-table) td.num { text-align: left; }
  .table-wrap .list-table:not(.guide-table) td[data-l]:not([data-l=""])::before { content: attr(data-l) " "; color: var(--muted); font-size: 12px; font-weight: 400; }
  .table-wrap .list-table:not(.guide-table) td:last-child:has(.btn) { margin-left: auto; }
  .table-wrap .list-table:not(.guide-table) td[colspan] { flex: 1 1 100%; }
  .list-table tr.mine { background: rgba(201,162,75,.08); }
  .list-table tr.cur { background: rgba(143,191,106,.12); }
  .list-table tr.mine td, .list-table tr.cur td { background: none; }
  .list-table tr.clickable:hover { background: var(--leather-2); }
  .lobby-table th.opt, .lobby-table td.opt { display: none; }
  .lobby-table .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
  .lobby-table td:first-child { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .lobby-tabs { flex-wrap: wrap; gap: 2px; }
  .prof-name { font-size: clamp(1.5rem, 8vw, 2.6rem); flex-wrap: wrap; overflow-wrap: anywhere; min-width: 0; }
  .prof-name > * { min-width: 0; }
  .page-title { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .lobby-tabs .tab, .tab { padding: 7px 7px; font-size: 14px; }
}
.more-menu a.btn { text-decoration: none; }

/* ---------- game cards (like lichess's game lists): battlefield picture, clock, when, players, result ----------
   used for every list of games on every screen; the lobby's open games stay a table on computers */
.gcards { display: grid; gap: 0; margin: 0 0 14px; border-top: 1px solid var(--leather-3); container: gcards / inline-size; }
.table-wrap:has(+ .gcards) { display: none; }
@media (min-width: 761px) {
  .gcards.phone-only { display: none; }
  .table-wrap:has(+ .gcards.phone-only) { display: block; }
}
@media (max-width: 760px) {
  .gcards { margin: 0 -12px 14px; }
}
.gcard { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px;
  color: var(--vellum); text-decoration: none; border-bottom: 1px solid var(--leather-3); cursor: pointer; }
.gcard:nth-child(even) { background: rgba(255,255,255,.025); }
.gcard:hover, .gcard:active { background: var(--leather-2); color: var(--vellum); }
.gcard.mine { box-shadow: inset 3px 0 0 var(--brass); }
.gthumb { width: 112px; aspect-ratio: 3 / 2; height: auto; display: block; border-radius: 3px; background: #4d5b32;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); object-fit: contain; }
.gbody { min-width: 0; display: grid; gap: 3px; }
.gtitle { font-size: 15px; font-weight: 600; color: var(--vellum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtitle .gclock { color: var(--muted); font-weight: 400; font-size: 13px; }
.gwhen { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glive { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--crimson); border-radius: 8px; padding: 0 6px; margin-right: 2px; }
.gplayers { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 4px; margin-top: 2px; }
.gvs { width: 22px; height: 22px; color: var(--muted); }
.gp { min-width: 0; display: grid; line-height: 1.2; }
.gp.right { text-align: right; }
.gp .gname { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp .gr { color: var(--vellum); }
.gp .up { color: var(--good); }
.gp .down { color: var(--bad); }
.gres { font-size: 13px; color: var(--good); text-align: center; margin-top: 2px; }
.gres.loss { color: var(--bad); }
.gres.draw { color: var(--muted); }
.gres.live { color: var(--brass); }
.gres.seek { text-align: right; }
.gres .gvp { color: var(--muted); }

/* wide lists (computers, tablets): a bigger picture, the two players facing each other in the middle */
@container gcards (min-width: 620px) {
  .gcard { grid-template-columns: 228px minmax(0, 1fr); gap: 22px; padding: 14px 18px; align-items: stretch; }
  .gthumb { width: 228px; }
  .gbody { gap: 4px; align-content: start; padding-top: 2px; }
  .gtitle { font-size: 19px; font-weight: 500; letter-spacing: .01em; }
  .gtitle .gclock { font-size: 15px; }
  .gwhen { font-size: 13.5px; }
  .gplayers { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 10px; margin: 14px auto 4px; width: 100%; max-width: 560px; }
  .gvs { width: 40px; height: 40px; justify-self: center; }
  .gp { text-align: right; }
  .gp.right { text-align: left; }
  .gp .gname { font-size: 17.5px; }
  .gp small { font-size: 14px; }
  .gp .gr { font-size: 16px; }
  .gres { font-size: 14.5px; margin-top: 8px; }
  .gres.seek { text-align: center; }
}
@media (max-width: 360px) {
  .gcard { grid-template-columns: 92px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .gthumb { width: 92px; }
}

/* an open menu's burger becomes an X (site menu and battle menu) */
:is(.nav-burger, .menu-btn) span { transition: transform .15s, opacity .15s; }
:is(.nav-burger, .menu-btn)[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
:is(.nav-burger, .menu-btn)[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
:is(.nav-burger, .menu-btn)[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- a player's battles: quick filters, the advanced search and the active filters ---------- */
.opp-search input { width: 150px; padding: 4px 8px; font-size: 14px; }
.adv-btn .count { display: inline-block; min-width: 1.4em; font-size: 11.5px; color: var(--brass); background: var(--ink); border-radius: 9px; padding: 0 5px; margin-left: 4px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: -2px 0 12px; }
.fchips:empty { display: none; }
.fchips .fchip span { margin-left: 2px; font-weight: 700; }
.fchips .link-btn { font-size: 13px; }
/* computers and tablets: a panel under the filters */
.adv-search { margin: 0 0 14px; background: var(--leather-2); border: 1px solid var(--brass-dim); border-radius: var(--radius-m); }
.adv-search[hidden] { display: none; }
.adv-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; }
.adv-head h3 { margin: 0; }
.adv-x { background: none; border: 0; color: var(--vellum); font-size: 26px; line-height: 1; padding: 2px 8px; cursor: pointer; }
.adv-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 22px; padding: 6px 16px 4px; }
.adv-body section { min-width: 0; }
.adv-body h4 { margin: 10px 0 6px; color: var(--brass); font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.adv-body label { display: grid; gap: 3px; font-size: 13.5px; color: var(--muted); margin-bottom: 9px; }
.adv-body select, .adv-body input { width: 100%; padding: 6px 8px; font-size: 14.5px; }
.adv-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.adv-range > span { color: var(--muted); font-size: 13px; }
.adv-seg { border: 0; padding: 0; margin: 0 0 9px; min-width: 0; }
.adv-seg legend { font-size: 13.5px; color: var(--muted); padding: 0; margin-bottom: 3px; }
.adv-seg .seg { margin: 0; }
.adv-seg .seg.wrap button { padding: 5px 11px; font-size: 13.5px; }
.adv-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 16px 14px; border-top: 1px solid var(--leather-3); margin-top: 4px; }
/* phones: a full-screen sheet, like the menus, with the buttons always at the bottom */
@media (max-width: 760px) {
  .adv-search { position: fixed; inset: 0; z-index: 60; margin: 0; border: 0; border-radius: 0; background: var(--ink); }
  .adv-form { height: 100%; display: flex; flex-direction: column; }
  .adv-head { flex: none; padding: 12px 14px 10px; border-bottom: 1px solid var(--brass-dim); }
  .adv-body { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: minmax(0, 1fr); padding: 4px 14px 16px; }
  .adv-body select, .adv-body input { font-size: 16px; padding: 9px 10px; }
  .adv-seg .seg.wrap button { padding: 8px 13px; font-size: 15px; }
  .adv-foot { flex: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); margin: 0; background: var(--ink); }
  .adv-foot .btn { flex: 1; padding: 11px; font-size: 16px; }
  body.adv-open { overflow: hidden; }
  .opp-search { flex: 1 1 140px; }
  .opp-search input { width: 100%; }
}

/* ---------- looking back during a battle: the arrows (under the battlefield; in the bottom bar on phones) ---------- */
.seat-me { min-width: 0; display: flex; }
.hist-nav { display: flex; gap: 4px; margin-left: auto; flex: none; }
.hist-nav .btn { min-width: 38px; padding: 4px 9px; }
.hist-nav .btn:disabled, .dock-hist:disabled { opacity: .35; cursor: default; }
.battle-dock .dock-hist { font-size: 17px; padding: 12px 0; }
[data-hist="live"].urgent { background: var(--brass); color: var(--ink); opacity: 1; }
.hist-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 24px); padding: 6px 8px 6px 14px; border-radius: var(--radius-m); background: rgba(28,21,16,.94);
  border: 1px solid var(--brass); box-shadow: 0 4px 16px rgba(0,0,0,.45); font-size: 14px; }
.hist-banner[hidden] { display: none; }
.hist-banner .hb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-banner .btn { flex: none; white-space: nowrap; }
.hist-banner .btn.urgent { animation: histPulse 1.2s ease-in-out infinite; }
@keyframes histPulse { 50% { box-shadow: 0 0 0 4px rgba(201,162,77,.35); } }
#battle.compact .hist-banner { top: 8px; font-size: 13px; padding: 5px 6px 5px 10px; }
/* the hint moves out of the banner's way */
.board-wrap:has(#histBanner:not([hidden])) .hint-box { top: auto; bottom: 10px; }
#battle:not(.compact) .top-actions { min-height: 36px; }
/* a held finger on the battlefield never starts the phone's text selection or long-press menu */
#battle .board-wrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------------------------------------------------------------- analysis boards */
.an-lead { max-width: 860px; }
.an-page { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 10px; }
@media (max-width: 860px) { .an-page { grid-template-columns: 1fr; gap: 18px; } }
.an-new { background: var(--leather-2); border: 1px solid var(--leather-3); border-radius: var(--radius-m); padding: 14px 16px; }
.an-new h2, .an-mine h2 { margin-top: 0; }
.an-new .game-form { display: grid; gap: 10px; }
.an-card .gtitle { font-weight: 700; color: var(--vellum); }
.an-card .an-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.an-card .an-acts .muted { margin-right: auto; font-weight: 400; }
.an-keep { margin-top: 8px; }
#battle.analysis-mode .hist-nav, #battle.analysis-mode .dock-hist { display: none !important; }
#battle.compact.analysis-mode .battle-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-title { background: none; border: 0; color: var(--vellum); font: 600 15px var(--sans); cursor: pointer; padding: 0;
  max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.an-title:hover { color: var(--brass); text-decoration: underline; }
.an-tabs { display: flex; width: 100%; border: 1px solid var(--leather-3); border-radius: var(--radius-s); overflow: hidden; margin: 8px 0 2px; }
.an-tabs button { flex: 1 1 0; min-width: 0; background: var(--leather); color: var(--muted); border: 0; border-right: 1px solid var(--leather-3);
  padding: 7px 2px; font: 600 13.5px var(--sans); cursor: pointer; }
.an-tabs button:last-child { border-right: 0; }
.an-tabs button.on { background: var(--brass); color: var(--ink); }
.an-sec { width: 100%; font: 700 11.5px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--brass);
  margin: 8px 0 0; border-top: 1px solid var(--leather-3); padding-top: 6px; }
.an-stepper { width: 100%; flex-wrap: wrap; }
.stepper.an-stepper span { min-width: 0; text-align: left; }
.an-stepper > span:first-child { min-width: 84px; }
.an-num { width: 62px; text-align: center; padding: 4px; }
.an-equip { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.an-equip label { font-size: 13px; color: var(--muted); display: grid; gap: 2px; }
.an-equip label.check { display: flex; align-items: center; gap: 6px; }
.an-equip label.check input { width: auto; margin: 0; accent-color: var(--brass); }
.an-equip select { font-size: 13px; padding: 4px 6px; }
@media (max-width: 520px) { .an-equip { grid-template-columns: 1fr; } }
.an-pool { width: 100%; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.btn.danger { border-color: #8a3b2e; color: #f0a596; }
.btn.danger:hover { background: #5a2219; }
.an-side-head { margin-top: 12px; }
.an-side-head small { font-family: var(--sans); font-size: 12.5px; }
.an-army-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.an-lost { font-size: 12px; margin: -4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.an-lost .link-btn { font-size: 11.5px; color: var(--vellum); }
.an-catalog { max-height: 62vh; overflow: auto; margin: 0 -4px; padding: 0 4px; }
#muster.analysis-mode #mChat { display: none; }
#muster.analysis-mode #mOpp .btn { margin: 2px 4px 2px 0; }
#battle.compact #unitPanel:not(.full) .an-tabs { margin-top: 4px; }
#battle.analysis-mode [data-dock="chat"], #battle.analysis-mode .side-tabs [data-side="chat"] { display: none; }
#battle.compact.analysis-mode .battle-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#battle.analysis-mode:not(.compact) .unit-panel { max-height: 72%; }
#battle:not(.compact) #anRename { display: none; }
#battle .an-only.btn { white-space: nowrap; }
.an-num { width: 54px; }
#battle.compact.analysis-mode #redoBtn { grid-column: 2; grid-row: 3; justify-self: end; padding: 7px 10px; font-size: 14.5px; }
#battle.compact.analysis-mode #mainBtn { grid-column: 3; justify-self: end; }
#battle.compact.analysis-mode .menu-btn, #battle.compact.analysis-mode .sound-toggles { justify-self: end; }
#battle.compact.analysis-mode .an-title { max-width: 100%; font-size: 14px; }
#battle.compact.analysis-mode #turnInfo { overflow: hidden; }
#muster.analysis-mode .share { display: none; }
.btn.primary .owner-0, .btn.primary .owner-1 { color: inherit; font-weight: 700; }
#battle.compact .replay-bar :is(#rpTurns, #rpSpeed, #rpPos) { order: 2; }
#battle.compact .replay-bar #rpAnalyse { order: 1; min-width: 0; padding: 6px 10px; }
.an-ev { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.an-ev label { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.an-ev label.check input { width: auto; margin: 0; accent-color: var(--brass); }
.an-ev-hint { font-size: 12px; flex: 1 1 140px; }
.an-ev-btns { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.an-tabs button { font-size: 13px; }

/* ---------- battlefield colour picker ---------- */
/* the battle bar: an icon on computers (the bar is full), the words in the phone menu */
.ground-battle-btn svg { width: 18px; height: 18px; vertical-align: -4px; display: none; }
#battle:not(.compact) .ground-battle-btn { padding-left: 8px; padding-right: 8px; }
#battle:not(.compact) .top-actions .btn { white-space: nowrap; }
#battle:not(.compact) .top-actions { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
#battle:not(.compact) .ground-battle-btn svg { display: inline-block; }
#battle:not(.compact) .ground-battle-btn .gb-label { display: none; }
.ground-btn .nav-label { white-space: nowrap; }
.ground-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 12px 0 14px; }
.ground-sw { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 8px; background: var(--leather-2); color: var(--vellum);
  border: 1px solid var(--leather-3); border-radius: var(--radius-m); font: 500 14px var(--sans); cursor: pointer; text-align: center; }
.ground-sw:hover { border-color: var(--brass-dim); }
.ground-sw.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.ground-chip { display: block; height: 52px; border-radius: var(--radius-s); }
.ground-custom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.ground-custom span { color: var(--muted); }
.ground-custom input[type=color] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--leather-3); border-radius: var(--radius-s); background: var(--leather-2); cursor: pointer; }