/* 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);
}

/* The Gubs brand doubles as the button that opens the rules & card guide, so it
   is a real <button> with its chrome reset back to plain text. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.brand:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.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;
}

/* --- rules & card guide overlay -------------------------------------------- */
/* Opened from the Gubs brand. A "field guide" book: the dark panel theme warmed
   with a faint parchment wash and a serif body, paged section-by-section. */
.guide-modal {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 14, 0.74);
  backdrop-filter: blur(4px);
}

.guide-card {
  --guide-paper: #f3e9d2;
  --guide-ink: #2a2117;
  --guide-ink-soft: #6a5d45;
  --guide-rule: #d8c79e;
  width: min(720px, 94vw);
  height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #221d15, #1a1610);
  border: 1px solid #3c3220;
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.guide-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(255, 212, 121, 0.1), transparent);
  border-bottom: 1px solid #3c3220;
}
.guide-mark {
  height: 26px;
  width: auto;
}
.guide-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--accent-2);
}
.guide-close {
  margin-left: auto;
  font: inherit;
  line-height: 1;
  color: #cbb88c;
  background: transparent;
  border: 1px solid #4a3e26;
  border-radius: 8px;
  padding: 3px 9px;
  cursor: pointer;
}
.guide-close:hover {
  color: #fff;
  border-color: var(--accent-2);
}

/* The page itself — parchment, serif, scrolls when a section is taller than the
   book. Each '##' section of the guide is one page. */
.guide-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 30px 26px;
  margin: 14px;
  border-radius: 10px;
  background: var(--guide-paper);
  color: var(--guide-ink);
  font:
    15px/1.6 'Iowan Old Style',
    'Palatino Linotype',
    Palatino,
    Georgia,
    'Times New Roman',
    serif;
  box-shadow: inset 0 0 40px rgba(120, 95, 45, 0.18);
}
.guide-page:focus {
  outline: none;
}
.guide-page::-webkit-scrollbar {
  width: 10px;
}
.guide-page::-webkit-scrollbar-thumb {
  background: var(--guide-rule);
  border-radius: 6px;
}

.guide-page h1 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #5b3d18;
}
.guide-page h2 {
  font-size: 21px;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--guide-rule);
  color: #6b4416;
}
.guide-page h3 {
  font-size: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 20px 0 8px;
  color: #7a5320;
}
.guide-page p {
  margin: 0 0 12px;
}
.guide-page em {
  color: var(--guide-ink-soft);
}
.guide-page strong {
  color: #4a2f12;
}
.guide-page ul,
.guide-page ol {
  margin: 0 0 12px;
  padding-left: 24px;
}
.guide-page li {
  margin: 0 0 5px;
}
.guide-page blockquote {
  margin: 0 0 14px;
  padding: 8px 14px;
  border-left: 4px solid #c69a3f;
  background: rgba(198, 154, 63, 0.14);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #5a4621;
}
.guide-page hr {
  border: 0;
  border-top: 1px solid var(--guide-rule);
  margin: 16px 0;
}
.guide-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 14px;
}
.guide-page th,
.guide-page td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--guide-rule);
}
.guide-page th {
  color: #6b4416;
  border-bottom: 2px solid #c69a3f;
}

/* A card-list entry: the card's art tucked beside its name + description. */
.guide-entry {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 16px;
}
.guide-entry-art {
  flex: none;
  width: 64px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(60, 45, 20, 0.4);
}
.guide-entry-body {
  flex: 1;
  min-width: 0;
}
.guide-entry-name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #4a2f12;
  margin-bottom: 2px;
}

/* Pages that show their mentioned cards as larger art in a right-hand rail
   (How to Win, The Three Gub States) instead of inline chips. */
.guide-layout {
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 26px;
  align-items: start;
}
.guide-main {
  min-width: 0;
}
.guide-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.guide-aside-card {
  margin: 0;
}
.guide-aside-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(60, 45, 20, 0.45);
}
.guide-aside-name {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #4a2f12;
}

/* Card art embedded inside a table row (The Three Gub States) — Complete-Card-List
   size, captionless since the card names itself. */
.guide-cell-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.guide-cell-art {
  width: 64px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 3px 8px rgba(60, 45, 20, 0.4);
}

/* Inline card mention — a small thumbnail chip wrapping the first reference to a
   card in running prose. */
.guide-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
  white-space: nowrap;
}
.guide-ref-img {
  height: 1.5em;
  width: auto;
  border-radius: 3px;
  vertical-align: -0.35em;
  box-shadow: 0 1px 3px rgba(60, 45, 20, 0.45);
}

/* Footer: paging controls + section dots. */
.guide-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid #3c3220;
}
.guide-nav {
  font: inherit;
  font-weight: 600;
  color: #1a1610;
  background: var(--accent-2);
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
}
.guide-nav:hover {
  filter: brightness(1.08);
}
.guide-nav[disabled] {
  opacity: 0.35;
  cursor: default;
  filter: none;
}
.guide-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  flex: 1;
}
.guide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: #4a3e26;
  cursor: pointer;
}
.guide-dot:hover {
  background: #6a5733;
}
.guide-dot.active {
  background: var(--accent-2);
}