/*
  Vactrol web client stylesheet — plain CSS (no build step, no CDN).

  Served as a static file from web/, so the running dev server picks up edits from
  disk: change this file and refresh the browser — no server restart. Every element
  is styled through one labelled class here, keeping the Go markup readable.

  Theme: dark surfaces with per-house KeyForge-inspired colours. Each .card-<house>
  sets CSS variables the card face reads: --nm (name banner), --tp (type band),
  --edge (border). To retheme a house, edit its variables.
*/

html,
body {
  margin: 0;
  background-color: #1c1c1b;
  color: #f7f1ff;
  /* tabular figures so counters keep a fixed width and don't shift (e.g. 0 -> 1) */
  font-variant-numeric: tabular-nums;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #525053 transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background-color: #525053;
  border-radius: 9999px;
}

/* ---- app shell: full-width board on the left, fixed sidebar on the right ---- */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #1c1c1b;
  color: #f7f1ff;
}
.loading {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  color: #8b888f;
}
.board-area {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
  overflow: hidden;
  padding: 0.75rem;
}
/* The play rows between the two score pills; also the drop zone for hand cards.
   flex-grow matches its four card rows so each is the same height as the single
   hand row (flex-grow 1) below. */
.play-zone {
  display: flex;
  flex: 4 1 0%;
  min-height: 0;
  flex-direction: column;
  gap: 0.25rem;
}
.play-zone--drop {
  outline: 2px dashed rgb(252 229 102 / 0.5);
  outline-offset: -4px;
  border-radius: 0.5rem;
}
.sidebar {
  display: flex;
  width: 20rem;
  height: 100vh;
  flex-shrink: 0;
  flex-direction: column;
  border-left: 1px solid #363537;
  background-color: #1f1f1e;
}

/* ---- sidebar: brand, log (grows), details, controls ---- */
.brandbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #363537;
}
.brand-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #7bd88f;
}
.badge-busy {
  font-size: 0.75rem;
  color: #fce566;
}
.badge-error {
  font-size: 0.75rem;
  color: #fc618d;
}

/* turn/phase status line under the brand bar */
.hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid #363537;
  font-size: 0.8125rem;
  color: #a8a5ac;
}
.hud-turn {
  font-weight: 700;
  color: #d8d5cd;
}
.hud-player {
  font-weight: 600;
  color: #fce566;
}
.hud-step {
  color: #8b888f;
}
.hud-house {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  color: var(--nm);
  font-weight: 600;
}

.log {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  flex-direction: column;
  padding: 0.75rem;
  border-bottom: 1px solid #363537;
}
.log-list {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.5rem;
  overflow-y: auto;
  font-size: 0.75rem;
  color: #8b888f;
}
/* card names mentioned in the log open the card in the detail panel on click */
.log-card {
  color: #7bd88f;
  cursor: pointer;
}
.log-card:hover {
  color: #96e3a6;
  text-decoration: underline;
}
/* one bubble per root action, tinted by whose turn produced it */
.log-group {
  padding: 0.25rem 0.375rem;
  border-radius: 0.2rem;
  border-left: 2px solid transparent;
}
.log-group--p0 {
  background-color: rgb(123 216 143 / 0.05);
  border-left-color: rgb(123 216 143 / 0.4);
}
.log-group--p1 {
  background-color: rgb(252 229 102 / 0.05);
  border-left-color: rgb(252 229 102 / 0.4);
}
/* the newest bubble flashes and fades over 5s (overlay leaves the tint intact) */
.log-group--new {
  animation: logHighlight 5s ease-out forwards;
}
@keyframes logHighlight {
  from {
    box-shadow: inset 0 0 0 999px rgb(252 229 102 / 0.18);
  }
  to {
    box-shadow: inset 0 0 0 999px rgb(252 229 102 / 0);
  }
}
.log-line {
  padding: 0.0625rem 0;
}
/* hover card preview: an enlarged card floating by the log (board hover) or just
   left of the log (a log mention) */
.card-preview {
  position: fixed;
  top: 4.25rem;
  z-index: 40;
  width: 13rem;
  height: 18rem;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.6));
}
.card-preview--board {
  right: 0.75rem;
}
.card-preview--log {
  right: calc(20rem + 0.75rem);
}
.card-preview .card {
  width: 100%;
  height: 100%;
  max-height: none;
  --card-full-h: 18rem;
}
.card-preview .card-rules {
  font-size: 12px;
}
.card-preview .card-name-text {
  font-size: 13px;
}

.details {
  padding: 0.75rem;
  border-bottom: 1px solid #363537;
  max-height: 38vh;
  overflow-y: auto;
}
.detail-text {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.375;
  color: #f7f1ff;
}
.detail-empty {
  font-size: 0.875rem;
  color: #69676c;
}
.detail-sub {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8b888f;
}
.detail-amber {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fce566;
}
.detail-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fce566;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
}

.panel-label {
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #69676c;
}
.section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f7f1ff;
}
.hint {
  font-size: 0.875rem;
  color: #8b888f;
}
.prompt {
  font-size: 0.875rem;
  font-weight: 600;
  color: #7bd88f;
}

/* ---- buttons ---- */
.btn-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.btn-primary,
.btn-secondary,
.btn-warning,
.btn-danger {
  width: 100%;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-primary {
  background-color: #7bd88f;
  color: #1c1c1b;
}
.btn-primary:hover {
  background-color: #96e3a6;
}
.btn-secondary {
  background-color: #363537;
  color: #f7f1ff;
}
.btn-secondary:hover {
  background-color: #525053;
}
.btn-warning {
  background-color: #f0a029;
  color: #1c1c1b;
}
.btn-warning:hover {
  background-color: #f7b750;
}
.btn-danger {
  background-color: #fc618d;
  color: #1c1c1b;
}
.btn-danger:hover {
  background-color: #fb82a5;
}
/* compact nav button (New game, Zones) */
.btn-nav {
  border: 0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  background-color: #363537;
  color: #f7f1ff;
}
.btn-nav:hover {
  background-color: #525053;
}
/* compact square button for icon-only actions (Undo/Redo) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.45rem;
}
.icon-nav {
  width: 1.15em;
  height: 1.15em;
}
/* the Manual toggle when sandbox mode is on */
.btn-nav-on {
  background-color: #fce566;
  color: #1c1c1b;
}
/* the light icon needs darkening on the yellow active toggle */
.btn-nav-on .icon-nav {
  filter: brightness(0);
}
.btn-nav-on:hover {
  background-color: #fdee8f;
}
/* ---- manual (sandbox) controls ---- */
.manual-panel {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed #363537;
}
.btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.btn-mini {
  flex: 1 1 auto;
  border: 1px solid #363537;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  background-color: #262625;
  color: #f7f1ff;
}
.btn-mini:hover {
  background-color: #363537;
}
/* ---- card picker (fuzzy, text-only) ---- */
.picker-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(92vw, 32rem);
  max-height: 80vh;
  padding: 1.25rem;
  border: 1px solid #363537;
  border-radius: 0.75rem;
  background-color: #1f1f1e;
}
.picker-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #363537;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background-color: #161615;
  color: #f7f1ff;
}
.picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
}
.picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
  background-color: transparent;
  color: #f7f1ff;
}
.picker-item:hover {
  background-color: #2a2a29;
}
.picker-name {
  flex: 1 1 auto;
}
.picker-kind {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b888f;
}
/* flexible gap that pushes the brand-bar nav buttons to the right */
.spacer {
  flex: 1 1 auto;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- house picker (stacked) ---- */
.house-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  border: 1px solid var(--edge, #363537);
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--tp, #262625);
  color: var(--nm, #f7f1ff);
}
.house-btn:hover {
  filter: brightness(1.2);
}

/* ---- board: rows squeeze vertically; each strip scrolls horizontally ---- */
.board-row {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 0.25rem;
}
.board-row--fill {
  flex: 1 1 0%;
}
.row-label {
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #69676c;
}
.row-empty {
  font-size: 0.75rem;
  font-style: italic;
  color: #55535a;
}
.card-strip {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  align-items: flex-start;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  /* room so the 2px selection/targeting ring is not clipped by overflow */
  padding: 3px 2px 5px;
}
.midline {
  margin: 0.25rem 0;
  border-top: 1px dashed #363537;
}

.score-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}
.score-pill-idle {
  background-color: #262625;
}
.score-pill-active {
  background-color: #333230;
  box-shadow: 0 0 0 1px rgb(252 229 102 / 0.4);
}
.score-name {
  font-weight: 600;
}
.score-detail {
  color: #8b888f;
}
.score-houses {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.score-house {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--nm);
  font-weight: 600;
}
.score-house-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.score-house-dim {
  opacity: 0.4;
  filter: grayscale(0.55);
  font-weight: 400;
}
.score-zones {
  margin-left: auto;
  color: #6f6c73;
  font-size: 0.8125rem;
  cursor: pointer;
}
.score-zones:hover {
  color: #a8a5ac;
}
/* sandbox Æmber steppers and clickable key slots in the score pill */
.amber-manual {
  gap: 0.25rem;
}
.amber-btn {
  width: 1.15rem;
  height: 1.15rem;
  border: none;
  border-radius: 0.2rem;
  background-color: #333230;
  color: #d8d5cd;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.amber-btn-minus {
  background-color: #7a2f33;
  color: #f4dcde;
}
.amber-btn-plus {
  background-color: #2f6b28;
  color: #dcefd9;
}
.key-btn {
  display: inline-flex;
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
}
.amber-btn:hover,
.key-btn:hover {
  filter: brightness(1.35);
}
/* the card being resolved, named above a prompt's buttons */
.prompt-source {
  font-weight: 700;
  color: #d8d5cd;
  padding-bottom: 0.25rem;
}

/* ---- overlays ---- */
.over-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(18 18 17 / 0.82);
}
.over-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid #363537;
  border-radius: 0.75rem;
  background-color: #1f1f1e;
}
.over-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fce566;
}

/* ---- out-of-play zone viewer (archives + discard piles) ---- */
.zones-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
  width: min(92vw, 60rem);
  height: 100vh;
  overflow-y: auto;
  padding: 1.25rem;
  border-left: 1px solid #363537;
  border-right: 1px solid #363537;
  background-color: #1f1f1e;
}
/* the panel title stays pinned to the top as the piles scroll */
.zones-header {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -1.25rem -1.25rem 0;
  padding: 1.25rem 1.25rem 0.5rem;
  background-color: #1f1f1e;
}
.zones-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 1;
  border: none;
  background: transparent;
  color: #cc4657;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.zones-close:hover {
  color: #ff6b7d;
}
.zones-player {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.zone-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* each zone's name floats above its cards, below the pinned header */
.zone-row .row-label {
  position: sticky;
  top: 3.25rem;
  z-index: 2;
  padding: 0.25rem 0;
  background-color: #1f1f1e;
}
.zone-row .card-strip {
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-x: visible;
  overflow-y: visible;
}
.zone-row .card {
  height: 12rem;
}

/* ---- card face: gradient frame (name banner -> type band) over a dark body ---- */
.card {
  position: relative;
  display: flex;
  width: 9rem;
  height: 100%;
  max-height: 12rem;
  min-height: 0;
  flex-shrink: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.375rem;
  /* the frame is two colours split by an elongated-S (ogee) boundary: the type
     band (--tp) is the base, and the ::before overlay paints the name banner
     (--nm) over the upper-left, masked so their border sweeps in an S with
     horizontal tips instead of a straight diagonal. The mask stretches to the
     card width but is pinned to the card's *full* height (--card-full-h) rather
     than the current height, so as the card squishes the S curve slides off the
     bottom and flattens to a solid name banner — keeping a squished title legible
     instead of two-toned. At full height it is indistinguishable from a stretch. */
  --card-full-h: 12rem;
  --card-frame-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L100 0 L100 30 C25 30 75 70 0 70 Z' fill='white'/%3E%3C/svg%3E");
  background: var(--tp, #2a2a29);
  font-size: 0.75rem;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.3),
    0 2px 4px -2px rgb(0 0 0 / 0.3);
}
.card::before {
  content: "";
  position: absolute;
  /* overhang so the blur feathers only the interior S curve; the card's own
     overflow:hidden clips the softened outer edges, keeping the frame crisp */
  inset: -10px;
  z-index: 0;
  background: var(--nm, #3a3a38);
  -webkit-mask: var(--card-frame-mask) left top / 100% var(--card-full-h) no-repeat;
  mask: var(--card-frame-mask) left top / 100% var(--card-full-h) no-repeat;
  filter: blur(6px);
}
/* keep the card's contents above the ::before frame overlay */
.card > * {
  position: relative;
  z-index: 1;
}
.card--selected {
  box-shadow: 0 0 0 2px #fce566;
}
.card--targetable {
  cursor: pointer;
  box-shadow: 0 0 0 2px #7bd88f;
}
.card--dimmed {
  opacity: 0.45;
}
.card--clickable {
  cursor: pointer;
}
.card--clickable:hover {
  filter: brightness(1.15);
}
.card-name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--nm-fg, #f7f1ff);
}
.card-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* dark inner body, inset left/right so the gradient frame shows as side borders */
.card-body {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  margin: 0 3px;
  background-color: #1d1d1c;
}
.card-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  color: #d8d5cd;
}
.stat-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.stat-tag {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
  color: #8b888f;
}
.card-rules {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  white-space: pre-wrap;
  font-size: 10px;
  line-height: 1.375;
  color: #e6e3dc;
}
.card-kind {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  padding: 0.125rem 0.5rem;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* paint the type band's own solid colour so the S overlay behind it can never
     bleed in and split it two-toned when the card squishes and the curve's tip
     reaches this far down */
  background: var(--tp, #2a2a29);
  color: var(--tp-fg, #8b888f);
}

/* ---- icons (static SVGs from web/assets) ---- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  object-fit: contain;
}
.icon-stat {
  width: 1.1em;
  height: 1.1em;
}
.icon-inline {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
}
.icon-house {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}
/* a 1px black outline traced on every side (hard shadows, no blur) so a house
   emblem stays legible on any background — an outline, not a blob beneath. The
   padding reserves room for that outline so it isn't clipped when the art fills
   the icon (e.g. tall house emblems, type icons). */
.icon-outline {
  box-sizing: border-box;
  padding: 1.5px;
  filter: drop-shadow(1px 0 0 rgb(0 0 0 / 0.85))
    drop-shadow(-1px 0 0 rgb(0 0 0 / 0.85))
    drop-shadow(0 1px 0 rgb(0 0 0 / 0.85))
    drop-shadow(0 -1px 0 rgb(0 0 0 / 0.85));
}
.icon-kind {
  width: 1.2em;
  height: 1.2em;
}
/* stun token: a larger badge on the card face */
.icon-token {
  width: 1.4em;
  height: 1.4em;
  flex: 0 0 auto;
}
/* keys in the score pill: coloured icons plus empty slots for keys to forge */
.score-keys {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  vertical-align: -0.15em;
}
/* a key still to forge: shown dimmed rather than as an empty slot */
.key-unforged {
  opacity: 0.3;
}

/* ---- per-house colours (name banner / type band / edge) ---- */
.card-brobnar {
  --nm: #e08a3c;
  --nm-fg: #1c130a;
  --tp: #7a3b2c;
  --tp-fg: #f5e6dc;
  --edge: #e08a3c;
}
.card-dis {
  --nm: #cc4657;
  --nm-fg: #1b0c0f;
  --tp: #46283f;
  --tp-fg: #f0e3ee;
  --edge: #cc4657;
}
.card-logos {
  --nm: #3fc1e6;
  --nm-fg: #04222c;
  --tp: #2c5f7f;
  --tp-fg: #e2f4fb;
  --edge: #3fc1e6;
}
.card-mars {
  --nm: #6d3f96;
  --nm-fg: #f2ecfa;
  --tp: #8fd14f;
  --tp-fg: #16210a;
  --edge: #6d3f96;
}
.card-sanctum {
  --nm: #1c6adb;
  --nm-fg: #eaf0ff;
  --tp: #e8b420;
  --tp-fg: #2a1e02;
  --edge: #1c6adb;
}
.card-shadows {
  --nm: #aeb4bb;
  --nm-fg: #14181c;
  --tp: #3d434b;
  --tp-fg: #e6e9ec;
  --edge: #aeb4bb;
}
.card-untamed {
  --nm: #b5661f;
  --nm-fg: #fbeee0;
  --tp: #2f6b39;
  --tp-fg: #e8f4ea;
  --edge: #b5661f;
}
.card-none {
  --nm: #3a3a38;
  --nm-fg: #f7f1ff;
  --tp: #2a2a29;
  --tp-fg: #8b888f;
  --edge: #3a3a38;
}