/* ── Custom properties ─────────────────────────────────────────── */
:root {
  --color-bg:           #0e0e12;
  --color-hud-bg:       #16161c;
  --color-hud-border:   #2a2a38;
  --color-hud-text:     #a0a0c0;
  --color-hud-value:    #e8e8ff;

  --color-tile-base:    #2a2a44;
  --color-tile-shard:   #1e4a44;
  --color-tile-void:    #3a2350;
  --color-tile-apex:    #5a4416;
  --color-tile-leech:   #4a5520;
  --color-tile-jammer:  #5a1e2a;
  /* Brighter sibling of the jammer hue, for text/badges that must read on the
     dark panel background (the base jammer red is a tile fill, too dark for text). */
  --color-tile-jammer-accent: #d0566e;
  --color-tile-border:  #3a3a5c;
  --color-tile-flash:   #6060c0;
  --color-tile-text:    #c8c8f0;

  --color-resistance-bar-bg:   #1a1a28;
  --color-resistance-bar-fill: #5050a0;

  --color-poison:       #7ec050;
  /* Coil stored-charge readout (issue #76) — electric cyan reads as banked energy. */
  --color-charge:       #58b0e0;

  --color-condition-broken:  #9a7a6a;
  --color-condition-worn:    #b0b0b8;
  --color-condition-good:    #80c0a0;
  --color-condition-perfect: #e0c050;

  --tile-size:    120px;
  --tile-radius:  6px;
  --tile-gap:     12px;

  --panel-width:  220px;

  --font-main: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Layout ────────────────────────────────────────────────────── */
body {
  background: var(--color-bg);
  color: var(--color-hud-text);
  font-family: var(--font-main);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#hud {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 24px;
  background: var(--color-hud-bg);
  border-bottom: 1px solid var(--color-hud-border);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.hud-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-label {
  text-transform: uppercase;
  opacity: 0.5;
  font-size: 0.75rem;
}

.hud-stat > span:last-child {
  color: var(--color-hud-value);
  font-size: 1rem;
  min-width: 2ch;
}

#game {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

#grid-container {
  display: grid;
  gap: var(--tile-gap);
}

/* ── Side panel ────────────────────────────────────────────────── */
#side-panel {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel-title {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
  font-weight: normal;
  margin-bottom: 8px;
}

.odds-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  font-size: 0.8rem;
  border-left: 3px solid var(--color-tile-base);
  margin-bottom: 4px;
}

.odds-row[data-type="base"]   { border-left-color: var(--color-tile-base); }
.odds-row[data-type="shard"]  { border-left-color: var(--color-tile-shard); }
.odds-row[data-type="void"]   { border-left-color: var(--color-tile-void); }
.odds-row[data-type="apex"]   { border-left-color: var(--color-tile-apex); }
.odds-row[data-type="leech"]  { border-left-color: var(--color-tile-leech); }
.odds-row[data-type="jammer"] { border-left-color: var(--color-tile-jammer); }

.odds-name { text-transform: capitalize; cursor: help; }
.odds-pct  { color: var(--color-hud-value); }

.item-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--color-tile-border);
  border-radius: var(--tile-radius);
  font-size: 0.8rem;
}

.item-info { display: flex; gap: 8px; align-items: baseline; }
.item-name { color: var(--color-tile-text); cursor: help; }
.item-level { color: var(--color-hud-value); opacity: 0.8; }
.item-charge { color: var(--color-charge); }
.item-charge:empty { display: none; }

.item-slot--empty {
  justify-content: center;
  color: var(--color-hud-text);
  opacity: 0.35;
  font-style: italic;
}

/* Jammed: a Jammer tile is suppressing this item (Concept.md §13.4). Dim the
   slot, but only to 0.55 — child opacity is capped by the parent, so a harder
   dim would wash out the JAMMED badge. */
.item-slot--jammed {
  opacity: 0.55;
  border-color: var(--color-tile-jammer);
}
.item-slot--jammed .item-name { text-decoration: line-through; }

.item-jammed-badge {
  display: none;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--color-tile-jammer-accent);
}
.item-slot--jammed .item-jammed-badge { display: inline; }

/* ── Tile ──────────────────────────────────────────────────────── */
.tile {
  --tile-color: var(--color-tile-base);
  width: var(--tile-size);
  height: var(--tile-size);
  background: var(--tile-color);
  border: 1px solid var(--color-tile-border);
  border-radius: var(--tile-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: filter 80ms ease, border-color 80ms ease;
  /* Resistance drain: tile fades slightly as HP drops */
  opacity: calc(0.55 + var(--tile-hp, 1) * 0.45);
}

.tile[data-type="base"]   { --tile-color: var(--color-tile-base); }
.tile[data-type="shard"]  { --tile-color: var(--color-tile-shard); }
.tile[data-type="void"]   { --tile-color: var(--color-tile-void); }
.tile[data-type="apex"]   { --tile-color: var(--color-tile-apex); }
.tile[data-type="leech"]  { --tile-color: var(--color-tile-leech); }
.tile[data-type="jammer"] { --tile-color: var(--color-tile-jammer); }

.tile:hover {
  filter: brightness(1.3);
  border-color: var(--color-resistance-bar-fill);
}

.tile-resistance {
  color: var(--color-tile-text);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* ── Poison stack badge ────────────────────────────────────────── */
.tile-poison {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--color-poison);
  color: var(--color-bg);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.tile-poison--active { display: flex; }

/* ── Jammer victim caption ─────────────────────────────────────── */
/* Names the held item this Jammer tile is suppressing, anchored to the tile's
   bottom edge so the hazard on the grid is visibly tied to the disabled item. */
.tile-jammed {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  color: var(--color-tile-text);
  text-decoration: line-through;
  display: none;
  pointer-events: none;
}
.tile-jammed--active { display: block; }

/* ── Resistance bar ────────────────────────────────────────────── */
.tile-bar-track {
  width: 72%;
  height: 4px;
  background: var(--color-resistance-bar-bg);
  border-radius: 2px;
  overflow: hidden;
}

.tile-bar-fill {
  height: 100%;
  background: var(--color-resistance-bar-fill);
  border-radius: 2px;
  transition: width 60ms ease;
}

/* ── Click pulse animation ─────────────────────────────────────── */
@keyframes tile-click-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.tile--clicked {
  animation: tile-click-pulse 120ms ease-out forwards;
}

/* ── Break flash ───────────────────────────────────────────────── */
@keyframes tile-break-flash {
  0%   { background: var(--color-tile-flash); border-color: var(--color-tile-flash); }
  100% { background: var(--tile-color);       border-color: var(--color-tile-border); }
}

.tile--breaking {
  animation: tile-break-flash 200ms ease-out forwards;
}

/* ── Item rarity colours ───────────────────────────────────────── */
.item-rarity--common   { color: #a0c0a0; }
.item-rarity--uncommon { color: #80b0d0; }
.item-rarity--rare     { color: #b080d0; }
.item-rarity--epic     { color: #d08040; }

/* ── Item condition colours (per-drop quality tier) ────────────── */
.item-condition--broken  { color: var(--color-condition-broken); }
.item-condition--worn    { color: var(--color-condition-worn); }
.item-condition--good    { color: var(--color-condition-good); }
.item-condition--perfect { color: var(--color-condition-perfect); }

/* ── Pending item-drop picker (transforms the Items section) ───── */
.pending-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 6px;
}

.pending-offered-name {
  color: var(--color-hud-value);
  font-size: 0.9rem;
}

.pending-offered-rarity {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pending-offered-desc {
  font-size: 0.75rem;
  color: var(--color-hud-text);
  opacity: 0.85;
}

.pending-divider {
  height: 1px;
  background: var(--color-hud-border);
  margin: 8px 0;
}

.pending-queue-footer {
  margin-top: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  text-align: center;
}

.pending-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-main);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: var(--tile-radius);
  border: 1px solid var(--color-hud-border);
  cursor: pointer;
  background: transparent;
  color: var(--color-hud-text);
  transition: background 80ms ease, color 80ms ease;
}

.btn:hover {
  background: var(--color-hud-border);
  color: var(--color-hud-value);
}

.btn--swap {
  border-color: var(--color-tile-shard);
  color: #6cbfbf;
  padding: 4px 8px;
}

.btn--swap:hover {
  background: var(--color-tile-shard);
  color: var(--color-hud-value);
}

.btn--swap:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn--take {
  width: 100%;
  margin-top: 6px;
  text-align: center;
  border-color: var(--color-tile-shard);
  color: #6cbfbf;
}

.btn--take:hover {
  background: var(--color-tile-shard);
  color: var(--color-hud-value);
}

.btn--discard-pending {
  width: 100%;
  margin-top: 6px;
  text-align: center;
  opacity: 0.6;
}

.btn--discard-pending:hover {
  opacity: 1;
}

.btn--upgrade {
  border-color: var(--color-tile-apex);
  color: #c8a44a;
  padding: 4px 8px;
}

.btn--upgrade:hover {
  background: var(--color-tile-apex);
  color: var(--color-hud-value);
}

.btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.btn--upgrade:disabled:hover {
  background: transparent;
  color: #c8a44a;
}

/* ── HUD Ascend button ─────────────────────────────────────────── */
#hud-ascend {
  margin-left: auto;
  border-color: var(--color-tile-apex);
  color: #c8a44a;
  padding: 6px 14px;
}

#hud-ascend:hover:not(:disabled) {
  background: var(--color-tile-apex);
  color: var(--color-hud-value);
}

/* ── Debug section (Wipe save) ─────────────────────────────────── */
#hud-debug {
  display: flex;
  justify-content: flex-end;
  padding: 6px 24px;
  background: var(--color-hud-bg);
  border-bottom: 1px solid var(--color-hud-border);
}

.btn--debug {
  font-size: 0.65rem;
  padding: 3px 8px;
  opacity: 0.4;
}

.btn--debug:hover { opacity: 1; }

/* ── Owned-upgrades panel ──────────────────────────────────────── */
.owned-upgrade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  font-size: 0.8rem;
  border-left: 3px solid var(--color-tile-apex);
  margin-bottom: 4px;
}

.owned-upgrade-name { cursor: help; }
.owned-upgrade-count { color: var(--color-hud-value); }

/* Cap the list height so a full 13-node spread scrolls instead of pushing the
   HUD (Concept.md §13.7). */
#owned-upgrades-list {
  max-height: 220px;
  overflow-y: auto;
}

/* ── Ascension screen ──────────────────────────────────────────── */
.ascension-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.ascension-modal {
  background: var(--color-hud-bg);
  border: 1px solid var(--color-hud-border);
  border-radius: var(--tile-radius);
  padding: 28px 32px;
  min-width: 520px;
  max-width: 80vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-main);
}

.ascension-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ascension-title {
  color: var(--color-hud-value);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}

.ascension-tokens {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.ascension-tokens-label {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

.ascension-tokens-value {
  color: var(--color-hud-value);
  font-size: 1.1rem;
  min-width: 2ch;
  text-align: right;
}

.ascension-divider {
  height: 1px;
  background: var(--color-hud-border);
}

/* Shared escalating price — the same for every node, so shown once above the rows. */
.ascension-next-cost {
  color: #c8a44a;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 6px 0;
}

.ascension-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Scroll the node list rather than the whole modal, so the header and
     "Start next run" button stay in view with the full 13-node spread. */
  min-height: 0;
  overflow-y: auto;
}

.ascension-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--color-hud-border);
  border-left: 3px solid var(--color-tile-apex);
  border-radius: var(--tile-radius);
  background: transparent;
  color: var(--color-hud-text);
  font-family: var(--font-main);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
}

.ascension-row:hover:not(:disabled) {
  background: var(--color-hud-border);
  color: var(--color-hud-value);
}

.ascension-row:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ascension-row--capped {
  border-left-color: var(--color-hud-border);
}

.ascension-row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ascension-row-name {
  color: var(--color-hud-value);
  font-size: 0.9rem;
}

.ascension-row-desc {
  opacity: 0.7;
  font-size: 0.75rem;
}

.ascension-row-meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 0.8rem;
}

.ascension-row-owned {
  color: var(--color-hud-value);
  opacity: 0.7;
  min-width: 4ch;
  text-align: right;
}

.btn--start-run {
  margin-top: 8px;
  padding: 10px;
  width: 100%;
  border-color: var(--color-tile-apex);
  color: #c8a44a;
  font-size: 0.85rem;
}

.btn--start-run:hover {
  background: var(--color-tile-apex);
  color: var(--color-hud-value);
}