/* HTML chrome only — the table itself is rendered on the PixiJS canvas behind
   everything. Theme tokens mirror the sim-viewer for a consistent look. */
:root {
  --bg: #0f1115;
  --panel: #1c2029;
  --panel-2: #232834;
  --line: #2c3340;
  --text: #e7ebf0;
  --muted: #97a1b0;
  --accent: #6ee7a8;
  --accent-2: #ffd479;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  --round: 14px;
  /* Table-log sidebar width. Capped at 40vw so opening it on a narrow window
     still leaves the table + action bar usable rather than pushing them off. */
  --log-w: min(340px, 40vw);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font:
    14px/1.45 ui-rounded,
    'Segoe UI Rounded',
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#stage canvas {
  display: block;
}

/* --- top bar --- */
.topbar {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(15, 17, 21, 0.92), rgba(15, 17, 21, 0.55));
  backdrop-filter: blur(6px);
}

.brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.brand-gub {
  height: 1.25em;
  width: auto;
  vertical-align: -0.25em;
}

.brand .tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
  margin-left: 4px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.controls select,
.controls button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
}

.controls button:hover {
  border-color: var(--accent);
}

.status {
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
}

.status.you {
  color: var(--accent);
}

/* Corner panel toggle (table-log sidebar) — an icon button at the far right of
   the top bar, kept apart from the game controls. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* --- table log --- */
/* An on-demand full-height sidebar, hidden until toggled from the top bar. While
   open, body.log-open shrinks the canvas (its renderer resizes to the freed
   width — see app.js) so the table is pushed left and stays fully visible beside
   the log; the top bar and action bar inset to match so the panel never covers
   them. Because it is closed by default there is no panel for seats to avoid, so
   drawOpponent no longer reserves any rect. */
.log {
  position: fixed;
  z-index: 6;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--log-w);
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-left: 1px solid var(--line);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

body.log-open .log {
  display: flex;
}
body.log-open .topbar {
  right: var(--log-w);
}
body.log-open .banner {
  left: calc(50% - var(--log-w) / 2);
}
/* Keep the corner/centre HUD badges (z-index 1000, above the sidebar) clear of
   the open panel: shift the build badge in from the right edge and re-centre the
   PR-preview branch pill over the table area. */
body.log-open .version-badge {
  right: calc(var(--log-w) + 8px);
}
body.log-open .branch-badge {
  left: calc(50% - var(--log-w) / 2);
}

#logToggle[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent);
}

.log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.log-close {
  font: inherit;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
}
.log-close:hover {
  color: var(--text);
  border-color: var(--accent);
}

.log-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

/* The full game record, newest at the bottom, scrolls within the fixed box. */
.log-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.log-turn {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A turn divider: small uppercase header with a hairline above it. */
.log-turn-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding-top: 5px;
  border-top: 1px solid var(--line);
}
.log-turn:first-child .log-turn-head {
  border-top: none;
  padding-top: 0;
}
.log-turn-head.you {
  color: var(--accent);
}

.log-entries {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}

/* One logged line. A coloured left rail keys the kind at a glance. */
.log-entry {
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
  padding-left: 7px;
  border-left: 2px solid transparent;
}
.log-entry.you {
  color: var(--accent-2);
}
.log-entry.letter {
  border-left-color: #ffd479;
}
.log-entry.lure,
.log-entry.steal,
.log-entry.kill {
  border-left-color: #e0594f;
}
.log-entry.trap,
.log-entry.destroy {
  border-left-color: #9a6ad1;
}
.log-entry.protect,
.log-entry.plague {
  border-left-color: #43c06d;
}
.log-entry.cancel,
.log-entry.interrupt {
  border-left-color: #6ea8ff;
}

/* The "jump to latest" pill, shown only when scrolled up from the newest line. */
.log-jump {
  align-self: center;
  margin-top: 6px;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.log-jump:hover {
  background: color-mix(in srgb, var(--accent) 36%, transparent);
}

/* --- center banner (thinking / game over) --- */
.banner {
  position: fixed;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 26px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.banner.win {
  font-size: 24px;
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.hidden {
  display: none !important;
}

/* Build-identity badge (bottom-right). Rendered by version-badge.js from
   /api/version — unobtrusive at rest, brightens on hover. */
.version-badge {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 1000;
  font:
    11px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  color: var(--muted);
  background: rgba(28, 32, 41, 0.55);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  opacity: 0.45;
  transition: opacity 0.15s ease;
  pointer-events: auto;
}
.version-badge:hover {
  opacity: 1;
}
.version-badge a {
  color: var(--accent);
  text-decoration: none;
}
.version-badge a:hover {
  text-decoration: underline;
}

/* Source-branch pill (top-center). Rendered by version-badge.js only on PR
   previews (info.branch set) so a shared URL announces which branch it runs. */
.branch-badge {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(90vw, 480px);
  font:
    11px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  color: var(--muted);
  background: rgba(28, 32, 41, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.branch-badge svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* --- report-issue modal (ADR 0005) --- */
.report-modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(3px);
}

.report-card {
  width: min(440px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.report-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.report-blurb {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.report-desc {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  resize: vertical;
}

.report-priority {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.report-priority select {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
}

.report-result {
  font-size: 13px;
  min-height: 1.2em;
  color: var(--muted);
  word-break: break-word;
}

.report-result a {
  color: var(--accent);
}

.report-result.error {
  color: #ff9a9a;
}

.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.report-actions button {
  font: inherit;
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  border: 1px solid var(--line);
}

.report-secondary {
  color: var(--text);
  background: var(--panel-2);
}

.report-primary {
  color: #0f1115;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.report-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}