:root {
  --radiant: #4caf50;
  --radiant-dim: #2e7d32;
  --dire: #e53935;
  --dire-dim: #b71c1c;
  --bg: #0d0e10;
  --panel: #1a1c1f;
  --text: #e8e8e8;
  --muted: #888;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 16px;
}

header { display: flex; gap: 16px; align-items: baseline; margin-bottom: 16px; }
header h1 { margin: 0; font-size: 18px; }
.hint { color: var(--muted); font-size: 12px; margin-left: 8px; }

#modes { display: flex; gap: 4px; }
#modes button.active { background: #4a5266; }

canvas#map { cursor: crosshair; }
canvas#map.dead { cursor: not-allowed; }

#play-status { color: var(--muted); font-size: 12px; }

#loader, #play-loader {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border-radius: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.hero-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.hero-pick select {
  background: #2a2d31;
  color: var(--text);
  border: 1px solid #3a3d41;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: inherit;
}

button {
  background: #2a2d31;
  color: var(--text);
  border: 1px solid #3a3d41;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
button:hover { background: #34373b; }

#hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  padding: 8px 12px;
  background: var(--panel);
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 13px;
}

.hud-team { display: flex; gap: 12px; align-items: center; }
.hud-team.radiant { color: var(--radiant); }
.hud-team.dire { color: var(--dire); justify-content: flex-end; }
.hud-team strong { font-weight: 600; }

#hud-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
}

#winner { color: gold; font-weight: bold; height: 16px; }

canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #181a1c;
  border-radius: 6px;
}

#controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border-radius: 6px;
}

#scrub { flex: 1; }

label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

#play { width: 40px; }

/* T-475 selection info panel — between hero panels and play panels.
   Stat grid is compact (label/value pairs) so the four-or-so rows of info
   sit above the inventory without scrolling. */
#selection-panel {
  background: var(--panel);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 12px;
  border-left: 3px solid #ffeb3b;
}
#selection-panel .sel-title { display: block; margin-bottom: 4px; }
#selection-panel .sel-title .sel-tag {
  font-weight: 500;
  color: var(--muted);
  margin-left: 8px;
  font-size: 11px;
}
#selection-panel .sel-title .sel-tag.radiant { color: var(--radiant); }
#selection-panel .sel-title .sel-tag.dire    { color: var(--dire); }
#selection-panel .sel-body {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 2px 16px;
}
#selection-panel .sel-empty,
#selection-panel .sel-fogged {
  grid-column: 1 / -1;
  color: var(--muted);
}
#selection-panel .sel-row { display: flex; gap: 6px; }
#selection-panel .sel-row .sel-label { color: var(--muted); }
#selection-panel .sel-row .sel-val { color: var(--text); }

#play-panels {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-top: 8px;
}

#inventory-panel,
#shop-panel {
  background: var(--panel);
  border-radius: 6px;
  padding: 8px 12px;
}

#inventory-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 4px;
}

.inv-slot {
  background: #2a2d31;
  border: 1px solid #3a3d41;
  border-radius: 4px;
  padding: 4px;
  font-size: 10px;
  font-weight: 600;
  height: 56px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --cd-frac: 0;
}

.inv-slot.backpack { filter: brightness(0.7); }
.inv-slot.empty {
  color: var(--muted);
  background: #2a2d31 !important;
  border-color: #3a3d41;
}
.inv-slot:hover { filter: brightness(1.15); }
.inv-slot.backpack:hover { filter: brightness(0.85); }

.inv-slot .abbr {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.inv-slot .charges {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 9px;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

/* T-473 cooldown wedge: dark sweep from 12 o'clock representing remaining cd.
   `--cd-frac` is set per-frame from JS as `cd_ticks / max_cd_ticks`. */
.inv-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: conic-gradient(
    rgba(0, 0, 0, 0.6) calc(var(--cd-frac) * 360deg),
    transparent 0
  );
  opacity: var(--cd-frac);
}

#shop-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 4px;
}

.shop-item {
  background: #2a2d31;
  border: 1px solid #3a3d41;
  border-radius: 4px;
  padding: 4px;
  font-size: 10px;
  cursor: pointer;
  text-align: center;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.shop-item:hover { filter: brightness(1.15); }
.shop-item.unaffordable { opacity: 0.45; cursor: not-allowed; }
.shop-item .cost {
  color: gold;
  font-size: 9px;
  font-weight: 500;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
.shop-item .abbr {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

#play-status.cast-mode { color: #f6c049; font-weight: 600; }
canvas#map.cast-mode { cursor: crosshair; outline: 2px solid #f6c049; }

/* T-340b hero panels */
#hero-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.hero-panel {
  background: var(--panel);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  border-left: 3px solid transparent;
}
.hero-panel.radiant { border-left-color: var(--radiant); }
.hero-panel.dire   { border-left-color: var(--dire); }

.hero-panel .hp-row {
  display: grid;
  grid-template-columns: 32px 80px 40px 1fr;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.hero-panel .mana-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

/* T-473 portrait stand-in: colored disc with hero initials, team-tinted.
   Sets up the slot for real portrait assets in M10. */
.hero-panel .portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.4);
}
.hero-panel.radiant .portrait { background: #3b6ea5; }
.hero-panel.dire    .portrait { background: #a53b3b; }

.hero-panel strong { font-weight: 600; }
.hero-panel.radiant strong { color: var(--radiant); }
.hero-panel.dire   strong { color: var(--dire); }

.hero-panel .lvl {
  font-weight: 600;
  color: gold;
}

.bar {
  position: relative;
  display: block;
  height: 14px;
  background: #15171a;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #2a2d31;
}
.bar .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--radiant);
}
.bar.hp .bar-fill   { background: #5cb85c; }
.bar.mana .bar-fill { background: #5b8def; }
.bar.xp .bar-fill   { background: gold; }
.bar .bar-text {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
}

.ability-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 4px;
}

.ability {
  position: relative;
  background: #2a2d31;
  border: 1px solid #3a3d41;
  border-radius: 3px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 10px;
  overflow: hidden;
}
.ability.unleveled { opacity: 0.35; }
.ability.unaffordable { border-color: #5b8def66; }
.ability.cooling .cd { color: #f6c049; font-weight: 600; }
.ability .key {
  position: absolute;
  top: 1px;
  left: 3px;
  color: var(--muted);
  font-weight: 600;
}
.ability .cost {
  position: absolute;
  bottom: 1px;
  right: 3px;
  color: #5b8def;
  font-size: 9px;
}
.ability .cd {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.ability .cd.empty { visibility: hidden; }
.ability .lvl-pips {
  display: flex;
  gap: 2px;
}
.ability .lvl-pips span {
  width: 5px;
  height: 5px;
  background: #4a4d51;
  border-radius: 1px;
}
.ability .lvl-pips span.lit { background: gold; }

.status-badges {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  min-height: 18px;
}
.status-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9px;
  background: #2a2d31;
  border: 1px solid #3a3d41;
}
.status-badge.stun    { color: #f6c049; border-color: #f6c049; }
.status-badge.slow    { color: #5b8def; border-color: #5b8def; }
.status-badge.channel { color: #b66cff; border-color: #b66cff; }
.status-badge.regen   { color: #5cb85c; border-color: #5cb85c; }

#keybinds-overlay {
  margin-top: 8px;
  background: var(--panel);
  border: 1px solid #2a2d31;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
}
#keybinds-overlay summary { cursor: pointer; color: var(--muted); }
#keybinds-overlay table.kb-table {
  border-collapse: collapse;
  margin: 6px 0;
}
#keybinds-overlay table.kb-table td,
#keybinds-overlay table.kb-table th {
  padding: 1px 8px;
  border-bottom: 1px solid #2a2d31;
  text-align: left;
}
#keybinds-overlay table.kb-table th { color: var(--muted); font-weight: normal; }