/* Zoomandos — mobile first. Colours are tokens; dark is the default, light follows the OS setting. */
:root {
  --bg: #1b2119;
  --panel: #262f23;
  --panel-2: #313c2d;
  --fg: #ecebdc;
  --muted: #a9b39f;
  --accent: #e0a03a;
  --good: #57c878;
  --bad: #e5574f;
  --team-1: #3b82f6;
  --team-2: #ef4444;
  --team-3: #f59e0b;
  --team-4: #a855f7;
  --radius: 12px;
  --gap: 12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f1eee2; --panel: #fffdf5; --panel-2: #e8e3d0; --fg: #23301f; --muted: #66705e;
  }
}
:root[data-theme="light"] { --bg: #f1eee2; --panel: #fffdf5; --panel-2: #e8e3d0; --fg: #23301f; --muted: #66705e; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; overscroll-behavior: none; }
#app { height: 100%; }
.router-root { height: 100%; }
.boot { padding: 24px; color: var(--muted); }
h1, h2, h3 { margin: 0 0 var(--gap); line-height: 1.15; }
button, select, input { font: inherit; color: inherit; }

/* ---- buttons ---- */
.btn { min-height: 44px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid transparent;
  background: var(--panel-2); cursor: pointer; }
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: #241a05; font-weight: 700; }
.btn.danger { background: var(--bad); color: #fff; }
.btn.small { min-height: 30px; padding: 4px 10px; font-size: .85rem; }
.btn.icon { min-width: 44px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* instant tooltips: one floating box positioned by assets/js/ui/tooltip.js (flips and clamps to the viewport) */
.tooltip { position: fixed; z-index: 1000; width: max-content; max-width: min(260px, 70vw); padding: 5px 9px; border-radius: 6px; background: #11160f; color: #f1eee2;
  font-size: .8rem; font-weight: 500; line-height: 1.25; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
/* E-54: a plain text toggle ("Filter", "Advanced game settings") — not a boxed button. */
.btn.link { min-height: 0; padding: 4px 0; background: none; border: none; color: var(--accent); text-decoration: underline;
  font-size: .9rem; justify-self: start; }

/* ---- home ---- */
.home { height: 100%; overflow-y: auto; padding: calc(var(--safe-top) + 20px) 16px calc(var(--safe-bottom) + 20px); }
.home-inner { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hero { text-align: center; padding: 8px 0 4px; }
.hero h1 { font-size: 2rem; }
.hero p { color: var(--muted); margin: 0; }
.card { background: var(--panel); border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1 1 auto; }
/* E-59: bottom-align a row's items on their own baseline instead of centring against a taller label+select block. */
.row.align-end { align-items: flex-end; }
label.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; color: var(--muted); font-size: .9rem; }
select, input[type=text], input[type=email], input[type=password] { max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid transparent; }
.game-list { display: grid; gap: 8px; }
.game-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; cursor: pointer; }
.game-item small { color: var(--muted); }
.pill { padding: 2px 8px; border-radius: 999px; background: var(--panel); font-size: .8rem; color: var(--muted); }
.pill.live { color: #1a2a13; background: var(--good); }
.lang { position: fixed; top: calc(var(--safe-top) + 8px); right: 8px; display: flex; gap: 4px; z-index: 5; }
.lang button { min-width: 44px; min-height: 36px; }
/* E-53: shared back/home control, top-right on every screen except the start page and the running game. */
.shell-bar { position: fixed; top: calc(var(--safe-top) + 8px); right: 8px; z-index: 5; }

/* ---- game screen ---- */
.game { height: 100%; background: var(--panel); display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
.topbar { position: relative; z-index: 40; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; padding: calc(var(--safe-top) + 6px) 8px 6px; background: var(--panel); }
/* the settings (sound, help, fit, speed, tilt-shift, pixel-tiles): one dropdown behind the "more" button on every screen size (owner 2026-10-01) */
.topbar-menu { display: none; flex-direction: column; gap: 4px; position: absolute; top: 100%; right: 8px; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--panel-2); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.4); padding: 6px; z-index: 30; }
.topbar-menu.open { display: flex; }
.topbar-menu .btn.icon { width: 100%; min-width: 0; }
.topbar-more-btn { display: inline-flex; }
.banner { flex: 1 1 40px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.banner .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.cp { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); font-variant-numeric: tabular-nums; }
.stage { position: relative; min-height: 0; background: #0f140e; }
.hpbars { display: flex; gap: 10px; align-items: center; }
.hpteam { display: inline-flex; align-items: center; gap: 2px; }
.hpteam .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--team); margin-right: 3px; }
.hpbar { display: block; width: 6px; height: 14px; border-radius: 2px; background: rgba(0,0,0,.18); }
.hpbar.on { background: var(--team); }
.hpbar.blink { animation: hpblink .7s steps(2, jump-none) infinite; }
@keyframes hpblink { 50% { opacity: .15; } }
.stage.loading canvas, .stage.loading .tilt-shift { visibility: hidden; }
.game-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #0f140e; color: #dfe8d6; z-index: 5; }
.game-loading-text { font-size: 1.05rem; letter-spacing: .02em; }
.loading-bar { width: min(260px, 60%); height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.loading-bar-fill { height: 100%; width: 0; background: #8fcf5e; transition: width .15s linear; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
/* miniature "tilt-shift" look: two bands at the top/bottom of the board blur and saturate what's behind them, fading
   out toward the middle - a fixed camera trick (not tied to the isometric depth of any one tile), so it reads as a
   diorama without ever obscuring the playable board itself. */
.tilt-shift { position: absolute; inset: 0; pointer-events: none; }
/* the background tint is baked in (not left to whatever backdrop-filter happens to sample past the element's edge,
   which came out white in some desktop browsers vs. black on mobile) so the fade is the same dark vignette everywhere.
   Top and bottom are sized independently (game.js's #updateTiltShift): on a small phone screen the clear middle strip
   is already narrow, and the top band eats into the part of the board a player is actively looking at more than the
   bottom does, so it shrinks further there - see #updateTiltShift's docblock. */
.tilt-shift .band { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, .3); }
.tilt-shift .band.top { top: 0; height: var(--ts-height-top, 30%); backdrop-filter: blur(var(--ts-blur-top, 5px)) saturate(1.35) contrast(1.06); -webkit-backdrop-filter: blur(var(--ts-blur-top, 5px)) saturate(1.35) contrast(1.06); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
.tilt-shift .band.bottom { bottom: 0; height: var(--ts-height-bottom, 30%); backdrop-filter: blur(var(--ts-blur-bottom, 5px)) saturate(1.35) contrast(1.06); -webkit-backdrop-filter: blur(var(--ts-blur-bottom, 5px)) saturate(1.35) contrast(1.06); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, transparent 100%); }
.toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: 90%; padding: 8px 14px;
  background: rgba(20, 24, 18, .92); color: #fff; border-radius: 999px; pointer-events: none; font-size: .95rem; text-align: center; }
.bottom { background: var(--panel); padding: 8px 8px calc(var(--safe-bottom) + 8px); display: grid; gap: 8px; }
/* the animal card and the buttons are two separate blocks (owner 2026-10-01) */
.cardbox { background: var(--panel-2); border-radius: 12px; padding: 8px; }
.cardbox .unitcard.empty { padding: 4px 2px; }
.controls { display: grid; gap: 8px; }
.unitcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 48px; }
.unitcard.empty { grid-template-columns: 1fr; color: var(--muted); align-items: center; }
.unitcard img { width: 44px; height: 44px; object-fit: contain; background: var(--panel-2); border-radius: 10px; padding: 4px; }
.unitcard h3 { margin: 0; font-size: 1.05rem; }
.unitcard .stats { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.unitcard .info { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.hearts { letter-spacing: 1px; color: var(--bad); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.chip { padding: 1px 8px; border-radius: 999px; background: var(--panel-2); font-size: .78rem; }
.chip.warn { background: #6b2b26; color: #ffd9d4; }
/* E-58: a highlighted but non-alarming note (e.g. "trophies need an account") — accent border, not an error colour. */
.callout { border-left: 4px solid var(--accent); background: var(--panel-2); }
.actions { display: flex; gap: 8px; }
.actions .btn { flex: 1; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 10, 7, .7); padding: 16px; }
.dialog { background: var(--panel); border-radius: var(--radius); padding: 20px; max-width: 360px; width: 100%; text-align: center; display: grid; gap: 12px; }
.dialog { position: relative; }
.dialog h2 { font-size: 1.6rem; }
.dialog .dialog-close { position: absolute; top: 6px; right: 6px; min-width: 32px; min-height: 32px; padding: 0; background: none; color: var(--muted); font-size: 1.1rem; }
/* wide screens, and phones held sideways: the map on the left, the animal card and buttons on the right */
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .game { grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr) 340px; }
  .topbar { grid-column: 1 / -1; }
  .bottom { grid-column: 2; grid-row: 2; align-content: start; padding: 12px; overflow-y: auto; min-height: 0; }
  .stage { grid-column: 1; grid-row: 2; margin: 0 0 12px 12px; border-radius: 16px; overflow: hidden; } /* a framed board with soft corners (owner 2026-10-01) */
}
@media (orientation: landscape) and (max-height: 520px) {
  .game { grid-template-columns: minmax(0, 1fr) 300px; }
  .bottom { padding: 8px; gap: 6px; }
}
@media (min-width: 900px) and (min-height: 521px) {
  .unitcard { grid-template-columns: 72px 1fr; }
  .unitcard img { width: 72px; height: 72px; }
}

/* ---- lobby ---- */
.invite-code { font-size: 2.2rem; font-weight: 800; letter-spacing: .25em; text-align: center; padding: 8px; background: var(--panel-2); border-radius: 10px; color: var(--fg); user-select: all; }
.game-item.open { opacity: .75; border: 1px dashed var(--muted); cursor: default; }
/* ---- campaign (E-50) ---- */
.game-item.locked { opacity: .55; cursor: default; }
.game-item.cleared { border-left: 4px solid var(--good); }
.pill.cleared { color: #1a2a13; background: var(--good); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.info { color: var(--muted); font-size: .9rem; margin: 0; }
.toast.fixed { position: fixed; z-index: 10; }
.home .toast, .home ~ .toast { position: fixed; top: calc(var(--safe-top) + 10px); }
input[readonly] { width: 100%; }
.cp.clock.urgent { background: var(--bad); color: #fff; }
label.check { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--fg); }
label.check input { width: 20px; height: 20px; }
.help-body { max-height: 88%; overflow-y: auto; text-align: left; max-width: 520px; }
.help-body h3 { margin: 12px 0 4px; }
.help-body ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.unitcard .note { color: var(--fg); font-weight: 600; white-space: pre-line; }
.cp { cursor: pointer; }
.cp.score { cursor: default; font-weight: 600; }
.sbars { display: inline-flex; gap: 6px; align-items: center; }
.sbar { position: relative; display: inline-block; width: 66px; height: 18px; border-radius: 9px; background: rgba(0,0,0,.4); overflow: hidden; border: 2px solid transparent; box-sizing: border-box; }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .6s; opacity: .9; }
.sbar b { position: relative; display: block; font-size: .7rem; line-height: 14px; text-align: center; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.sbar.you { border-color: #fff; }
.chip.ability { background: #2f5d7a; color: #e6f4ff; }
label.check.small { font-size: .9rem; color: var(--muted); min-height: 28px; justify-content: center; }
label.check.small input { width: 18px; height: 18px; }
.banner .dot { width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: .7rem; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000; vertical-align: middle; }
.bestiary { display: grid; gap: 12px; }
.bestiary .unitcard { padding-bottom: 10px; border-bottom: 1px solid var(--panel-2); }
/* E-57: a small tile picture next to each terrain entry in the Encyclopedia */
.terrain-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.terrain-item { display: flex; gap: 10px; align-items: flex-start; }
.terrain-item canvas { flex: 0 0 auto; border-radius: 6px; }
.map-preview { image-rendering: pixelated; border-radius: 8px; border: 2px solid var(--panel-2); max-width: 100%; }
.map-box { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.map-box .info { flex: 1 1 150px; }
.entry-card { text-align: center; }
.entry-card .icon { font-size: 2.4rem; line-height: 1; }
.entry-card h2 { margin: 2px 0 0; }
.entry-card p.info { margin: 0 0 4px; }
.entry-card.disabled { opacity: .55; }
.slots { display: grid; gap: 8px; }
.slot-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 10px; background: var(--panel-2); border-radius: 10px; }
.slot-row b { min-width: 64px; }
.slot-row select, .slot-row input { flex: 1 1 120px; min-width: 0; }
.slot-row select.group-sel { flex: 0 0 60px; }
.slot-fill { flex: 1 1 120px; min-width: 0; } /* the "you" label takes the place of a select so the group picker of every row lines up on the right */
/* the pickers inside a row sit on --panel-2 like the row itself: darker (dark theme) or brighter (light theme) so they read as controls */
.slot-row select, .game-item select { background: color-mix(in srgb, var(--panel-2), var(--bg) 65%); border-color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: pointer; }
.chat-list { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; padding: 8px 10px; background: var(--panel-2); border-radius: 10px; }
.chat-list:empty { display: none; }
.chat-msg { font-size: .92rem; word-break: break-word; }
.chat-msg b { color: var(--muted); font-weight: 600; }
.open-game-row { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--panel-2); border-radius: 10px; }
.open-game-row .thumb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--panel); }
.open-game-row .thumb canvas { width: 100%; height: 100%; object-fit: cover; }
.open-game-row .info { flex: 1 1 auto; min-width: 0; }
.open-game-row .info small { display: block; color: var(--muted); }
.open-game-row .teams { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.minimap-box { position: absolute; z-index: 3; max-width: 42%; background: rgba(15, 20, 14, .55); border-radius: 8px; padding: 3px; touch-action: none; }
.minimap-box.pos-tl { left: 8px; top: 8px; } .minimap-box.pos-tr { right: 8px; top: 8px; }
.minimap-box.pos-bl { left: 8px; bottom: 8px; } .minimap-box.pos-br { right: 8px; bottom: 8px; }
.mini-bar { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 3px; }
.mini-handle { flex: 1; min-height: 26px; display: grid; place-items: center; color: rgba(255,255,255,.75); cursor: grab; touch-action: none; user-select: none; letter-spacing: 2px; }
.mini-btn { min-width: 30px; min-height: 26px; border: 0; border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; padding: 0 6px; }
.stage .minimap-box.folded canvas.minimap { display: none; }
.minimap-box.folded { padding: 2px; }
.stage .minimap-box canvas.minimap { position: static; inset: auto; width: auto; height: auto; max-width: 100%; display: block; border: 2px solid rgba(255,255,255,.6); border-radius: 6px; opacity: .92; image-rendering: pixelated; touch-action: none; cursor: pointer; }
.steps { text-align: left; margin: 0; padding-left: 22px; display: grid; gap: 8px; }

/* ---- compact unit card: icons in one row, the written details fold away (open by default on wide screens) ---- */
.uc-title { display: flex; align-items: center; gap: 6px; }
.uc-title h3 { flex: 1; min-width: 0; }
.uc-toggle { min-width: 36px; min-height: 32px; border: 0; border-radius: 8px; background: var(--panel-2); cursor: pointer; transition: transform .15s; }
.unitcard.open .uc-toggle { transform: rotate(180deg); }
.unitcard .stats { gap: 4px 10px; align-items: center; margin-top: 2px; }
.unitcard .stat { white-space: nowrap; color: var(--fg); font-size: .9rem; cursor: help; }
.unitcard .stats .chip { font-size: .72rem; }
.uc-more { display: none; margin-top: 4px; }
.unitcard.open .uc-more { display: block; }
.abilities { display: flex; gap: 8px; flex-wrap: wrap; }
.abilities:empty { display: none; }
.abilities .btn { flex: 1 1 auto; min-height: 40px; }
.abilities .btn.split img { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; }
.btn.active { background: #2f5d7a; color: #e6f4ff; }
.actions { align-items: center; }
@media (max-width: 520px) {
  .topbar .btn.icon { min-width: 38px; min-height: 38px; padding: 4px; }
  .topbar .cp { padding: 3px 8px; font-size: .9rem; }
  .banner small { margin-left: 4px; }
  .banner .dot { margin-right: 4px; }
  .bottom { gap: 6px; padding: 6px 8px calc(var(--safe-bottom) + 6px); }
  .actions .btn { min-height: 40px; padding: 6px 10px; }
  label.check.small { min-height: 22px; font-size: .8rem; justify-content: flex-start; }
  .home { padding-left: 10px; padding-right: 10px; }
  .hero { padding-top: 34px; }
  .card { padding: 12px; }
  .row > * { min-width: 0; }
}
.help-body ul.log { margin: 0; padding-left: 22px; max-height: 170px; overflow-y: auto; display: grid; gap: 2px; font-size: .88rem; color: var(--muted); }
.game-item.turn { border-left: 4px solid var(--accent); }
.pill.turn { background: var(--accent); color: #241a05; font-weight: 700; }
.card-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 8px; border-top: 1px solid var(--panel-2); }
.overlay .dialog { max-height: 100%; overflow-y: auto; }
.hero-animals { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 6px; margin-bottom: 6px; }
.hero-animals img { width: 40px; height: 40px; object-fit: contain; background: var(--panel-2); border-radius: 12px; padding: 4px; }
@media (max-width: 520px) { .hero-animals img { width: 34px; height: 34px; padding: 3px; } }

/* E-52 (2026-09-26): Quick game + Multiplayer side by side once there's room; still stacks on phones. */
.entry-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 480px) { .entry-pair { grid-template-columns: 1fr 1fr; } }
.top-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* End turn / Ready: calm while commands are left, pulsing when there are none */
.btn.primary.idle { background: var(--panel-2); color: var(--fg); font-weight: 600; border-color: var(--accent); }
.btn.primary.pulse { animation: end-pulse 1.3s ease-in-out infinite; }
@keyframes end-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 160, 58, .75); transform: scale(1); }
  50% { box-shadow: 0 0 0 9px rgba(224, 160, 58, 0); transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .btn.primary.pulse { animation: none; box-shadow: 0 0 0 3px rgba(224, 160, 58, .6); } }
.coach { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 4; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255, 253, 245, .96); color: #23301f; box-shadow: 0 2px 10px rgba(0,0,0,.35); font-size: .92rem; }
.coach[hidden] { display: none; }
.coach-text { flex: 1; }
.coach-close { border: 0; background: transparent; color: #66705e; min-width: 32px; min-height: 32px; font-size: 1rem; cursor: pointer; }
.scoretable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.scoretable th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.scoretable td { padding: 6px; border-top: 1px solid var(--panel-2); vertical-align: top; }
.scoretable .pts { font-weight: 800; color: var(--accent); }
.scorebox { display: grid; gap: 4px; }
.scorebig { font-size: 1.8rem; font-weight: 800; color: var(--accent); }

.matrix-scroll { overflow-x: auto; margin: 6px 0 12px; border: 1px solid var(--panel-2); border-radius: 8px; }
.matrix { border-collapse: collapse; font-size: .85rem; white-space: nowrap; }
.matrix th, .matrix td { padding: 4px 8px; border-bottom: 1px solid var(--panel-2); text-align: center; }
.matrix thead th { position: sticky; top: 0; background: var(--panel); cursor: help; font-size: 1rem; }
.matrix .rowhead, .matrix thead th:first-child, .matrix tfoot th { position: sticky; left: 0; background: var(--panel); text-align: left; font-weight: 600; z-index: 1; }
.matrix tbody tr:nth-child(even) { background: rgba(0,0,0,.03); }
.matrix td.gap { color: var(--accent); font-weight: 700; }
.sym { display: inline-block; min-width: 1.6em; text-align: center; }

.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.trophy { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--panel-2); border-radius: 8px; opacity: .55; }
.trophy.earned { opacity: 1; background: rgba(255, 210, 63, .12); }
.trophy .sym { font-size: 1.5rem; }
.btn.active { outline: 2px solid var(--accent); }

.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tilecard { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--panel-2); border-radius: 8px; }
.tilecard canvas { width: 100%; height: auto; background: repeating-conic-gradient(#0002 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.tilepreview-box { overflow-x: auto; }
.tilepreview { max-width: 100%; height: auto; background: var(--panel-2); border-radius: 8px; }
.tileslider { display: grid; grid-template-columns: 4.5em 1fr 3em; gap: 6px; align-items: center; font-size: .8rem; }
.tileslider input { width: 100%; min-height: 0; }
.tilelog { max-height: 180px; overflow: auto; font-size: .72rem; background: var(--panel-2); padding: 6px; border-radius: 6px; white-space: pre-wrap; }

.decorcanvas-wrap { overflow: auto; background: var(--panel-2); border-radius: 8px; padding: 8px; }
.decorcanvas { touch-action: none; cursor: crosshair; background: repeating-conic-gradient(#0002 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.decorpalette { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.decorsprite { padding: 2px; min-height: 0; border-radius: 6px; }
.decorsprite canvas { display: block; background: repeating-conic-gradient(#0002 0 25%, transparent 0 50%) 0 0 / 8px 8px; border-radius: 4px; }
.decorsprite.armed { outline: 3px solid var(--accent, #e0a03a); }
.decorcontrols { margin: 8px 0; display: grid; gap: 4px; max-width: 320px; }

.editor-scroll { overflow: auto; max-width: 100%; background: var(--panel-2); border-radius: 8px; padding: 4px; }
.editor-canvas { touch-action: none; display: block; margin: 0 auto; cursor: crosshair; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.btn.tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 0; }
.btn.tool.active, .btn.active { outline: 3px solid var(--accent, #e0a03a); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.4); }
.army-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.chip.army { cursor: pointer; }
.gallery-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.gallery-card canvas { border-radius: 6px; max-width: 40vw; height: auto; }
/* E-59: the report button moved to the card's own top-right corner, smaller than the other actions. */
.gallery-card .report-btn { position: absolute; top: 8px; right: 8px; min-width: 0; padding: 4px 8px; }


/* the lobby's "cancel game": a quiet button, far less prominent than start / back */
.btn.quiet { background: none; border-color: color-mix(in srgb, var(--muted) 45%, transparent); color: var(--muted); }
.btn.quiet:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.overlay.fixed { position: fixed; z-index: 200; }
.slot-row.sub { margin-left: 22px; }
.btn.icon-only { min-width: 36px; padding: 4px 8px; }