* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "DM Sans", Arial, 'Segoe UI', Calibri, Helvetica, Ubuntu, sans-serif;
  background-color: #0f172a;
  color: #e2e8f0;
  overflow: hidden;
}

.font1 {
  font-family: "Press Start 2P", system-ui;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Press Start 2P", system-ui;
}

.font2 {
  font-family: "DM Sans", Arial, 'Segoe UI', Calibri, Helvetica, Ubuntu, sans-serif;
}

.sr-only {
  display: none!important;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Map Container */
#map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: #1e293b;
  cursor: grab;
}

#map-container:active {
  cursor: grabbing;
}

#mapCanvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Controls */
/* Pan/zoom panel: hidden — the wheel zooms and dragging pans, so it was pure clutter. Still in the
   DOM (index.html) so mapControls.js keeps its button handlers and the #zoomLevel readout. */
#controls {
  display: none;
  position: absolute;
  top: 60px; /* clears the fixed player-identity widget (top-right) */
  right: 20px;
  background-color: rgba(30, 41, 59, 0.9);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #475569;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.control-group {
  margin-bottom: 0.75rem;
}

.control-group:last-child {
  margin-bottom: 0;
}

.control-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #cbd5e1;
}

#zoomLevel {
  font-weight: bold;
  color: #f59e0b;
}

button {
  background-color: #475569;
  color: #e2e8f0;
  border: 1px solid #64748b;
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

button:hover {
  background-color: #64748b;
  border-color: #94a3b8;
}

button:active {
  transform: scale(0.95);
}

.hint {
  font-size: 0.8rem;
  color: #94a3b8;
  font-style: italic;
}

/* ===== God Powers Hotbar ===== */
#powerbar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 14px; /* was 6px + the global button margin-right; now the gap owns ALL the spacing */
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(20, 26, 40, 0.92), rgba(12, 17, 30, 0.95));
  border: 1px solid #3b4860;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 20;
}

.powerbar-sep {
  width: 1px;
  margin: 4px 3px;
  background: linear-gradient(180deg, transparent, #3b4860, transparent);
}

.power-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  height: 58px;
  background: rgba(51, 65, 85, 0.25);
  border: 2px solid color-mix(in srgb, var(--domain, #64748b) 55%, #334155);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  user-select: none;
  padding: 0;
  margin: 0; /* kill the global `button { margin-right: 0.5rem }` — it padded the bar's right edge by 8px */
}

.power-slot:hover {
  transform: translateY(-3px);
  background: rgba(51, 65, 85, 0.45);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), 0 0 10px color-mix(in srgb, var(--domain, #94a3b8) 35%, transparent);
}

.power-slot-icon {
  font-size: 1.5rem;
  line-height: 1;
}
/* PNG power icons (POWER_META.img) — sized to sit like the old emoji glyph in the 58px slot */
.power-slot-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.power-slot-name {
  font-size: 0.52rem;
  color: #cbd5e1;
  letter-spacing: 0.2px;
}

.power-slot-key {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: "Press Start 2P", system-ui;
  font-size: 0.45rem;
  color: #7d8aa3;
}

.power-slot-lock {
  display: none;
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.65rem;
}

/* armed: gold ring + lift */
.power-slot.active {
  transform: translateY(-4px);
  background: color-mix(in srgb, var(--domain, #f59e0b) 22%, rgba(15, 23, 42, 0.9));
  border-color: #fbbf24;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.5),
    0 0 16px rgba(251, 191, 36, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.45);
  animation: slotArmedPulse 1.8s ease-in-out infinite;
}

@keyframes slotArmedPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 0 12px rgba(251, 191, 36, 0.35), 0 6px 14px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.8), 0 0 22px rgba(251, 191, 36, 0.6), 0 6px 14px rgba(0, 0, 0, 0.45); }
}

/* locked: dimmed, padlocked */
.power-slot.locked {
  opacity: 0.45;
  filter: grayscale(70%);
  cursor: not-allowed;
}

.power-slot.locked:hover {
  transform: none;
  box-shadow: none;
}

.power-slot.locked .power-slot-lock {
  display: block;
}

/* instant action (Level Up): gold accent */
.power-slot.instant {
  border-style: dashed;
}

/* cooldown sweep overlay */
.power-slot-cd {
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* the hidden attribute must win over our display: flex */
.power-slot-cd[hidden] {
  display: none;
}

.power-slot-cd .cd-num {
  font-family: "Press Start 2P", system-ui;
  font-size: 0.5rem;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.power-slot.on-cooldown .power-slot-icon {
  filter: grayscale(0.7);
  opacity: 0.65;
}

/* gold glint when a power comes off cooldown */
.power-slot.cd-ready {
  animation: cdReady 0.45s ease;
}

@keyframes cdReady {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
  100% { box-shadow: 0 0 14px 6px rgba(251, 191, 36, 0); }
}

/* cast success feedback */
.power-slot.cast-bounce {
  animation: castBounce 0.28s ease;
}

@keyframes castBounce {
  0% { transform: translateY(-4px) scale(1); }
  40% { transform: translateY(-7px) scale(1.12); }
  100% { transform: translateY(-4px) scale(1); }
}

/* ---------- skill bar: drag-reorder, drag-off-to-remove, tech-tree-open drag surface ---------- */

/* the slot being dragged */
.power-slot.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* a slot the drag is hovering over (the dragged skill drops in BEFORE it) */
.power-slot.drag-over {
  box-shadow: -3px 0 0 0 #fbbf24, 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* the bar background lit as a drop target (drop-to-end / re-add a skill from the tech tree) */
#powerbar.bar-drop-active {
  border-color: #fbbf24;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* empty bar (fresh god, or Level Up removed for release) keeps a small footprint + drop area */
#powerbar:empty {
  min-width: 44px;
  min-height: 44px;
}

/* Hidden until the god awakens (Divine Powers unlocked); pre-awakening it holds only the debug
   Level Up slot. Toggled off in client.js updateProgressionUI once divineAwakening is unlocked. */
#powerbar.pre-awakening { display: none; }

/* While the tech tree is open the hotbar floats ABOVE the modal (z 1000) as a clean, non-
   interactive "active-look" drag surface: no hover-lift, no armed pulse - just draggable slots. */
body.tech-tree-open #powerbar {
  z-index: 1001;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(251, 191, 36, 0.35);
}
body.tech-tree-open .power-slot { cursor: grab; }
body.tech-tree-open .power-slot:hover { transform: none; }
body.tech-tree-open .power-slot.active { animation: none; transform: none; }

/* Armed-power banner above the hotbar */
.power-banner {
  position: absolute;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(12, 17, 30, 0.92);
  border: 1px solid color-mix(in srgb, var(--domain, #fbbf24) 55%, #3b4860);
  border-radius: 999px;
  color: #e2e8f0;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.power-banner strong {
  color: color-mix(in srgb, var(--domain, #fbbf24) 80%, #ffffff);
}

.power-banner .banner-icon {
  margin-right: 2px;
}

.power-banner .banner-cancel {
  margin-left: 8px;
  color: #7d8aa3;
  font-size: 0.7rem;
}

/* Toast stack above the banner */
#toastStack {
  position: absolute;
  bottom: 124px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 21;
  pointer-events: none;
}

.power-toast {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(12, 17, 30, 0.94);
  border: 1px solid #3b4860;
  color: #e2e8f0;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: toastIn 0.2s ease;
}

.power-toast.warn {
  border-color: rgba(248, 113, 113, 0.6);
  color: #fca5a5;
}

.power-toast.omen {
  border-color: rgba(167, 139, 250, 0.6);
  color: #c4b5fd;
}

.power-toast.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* crosshair whenever any power is armed */
#map-container.casting {
  cursor: crosshair;
}

/* Custom cursors for god powers */
#map-container.cursor-life {
  cursor: crosshair;
}

#map-container.cursor-wildlife {
  cursor: crosshair;
}

#map-container.cursor-death {
  cursor: crosshair;
}

/* Bottom-left stack: status line + event log, in that order. A flex column keeps the status 12px
   above the log no matter how tall the log is, so it rides up as the log expands. */
#bottomLeftStack {
  position: absolute;
  bottom: 20px;
  left: 16px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none; /* click-through; the log header re-enables itself */
}

/* Status */
#status {
  background-color: rgba(30, 41, 59, 0.9);
  padding: 0.75rem; /* shared HUD panel padding */
  border-radius: 8px;
  border: 1px solid #475569;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  font-size: 0.8rem; /* shared HUD panel body size */
}

#connectionStatus {
  color: #94a3b8;
}

#connectionStatus.connected {
  color: #22c55e;
}

#connectionStatus.disconnected {
  color: #ef4444;
}

/* Progression Panel */
#progression {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: rgba(30, 41, 59, 0.95);
  /* padding lives on .panel-header / .panel-body so the full header strip is clickable */
  border-radius: 8px;
  border: 1px solid #f59e0b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 0 20px rgba(245, 158, 11, 0.2);
  z-index: 10;
  /* fixed (was min-width: 250px, but the big god title stretched it to ~430px): ~20% narrower and
     no longer resized by how long the god's name is. */
  width: 345px;
}

/* The god title doubles as the panel's collapse header — sized like the other HUD headers, but it
   keeps the amber accent since it's the player's name, not a generic label. */
#progression h3 {
  color: #f59e0b;
}

.progress-item {
  margin-bottom: 0.75rem;
}

.progress-item:last-child {
  margin-bottom: 0;
}

/* 0.8rem is the shared HUD panel body size (stats, progress, roster, event entries) — emphasis
   comes from weight + color, not size. */
.progress-label {
  font-size: 0.8rem;
  color: #cbd5e1;
  display: inline-block;
  margin-right: 0.5rem;
}

.progress-value {
  font-size: 0.8rem;
  font-weight: bold;
  color: #22c55e;
}

.progress-value.divine-sparks {
  color: #fbbf24;
}

/* Level Up Pulse Animation */
.level-up-pulse {
  animation: levelUpPulse 1s ease-out;
}

@keyframes levelUpPulse {
  0% {
    transform: scale(1);
    color: #22c55e;
  }
  25% {
    transform: scale(1.5);
    color: #fbbf24;
    text-shadow: 0 0 20px #fbbf24, 0 0 40px #fbbf24;
  }
  50% {
    transform: scale(1.3);
    color: #f59e0b;
  }
  75% {
    transform: scale(1.4);
    color: #fbbf24;
    text-shadow: 0 0 15px #fbbf24;
  }
  100% {
    transform: scale(1);
    color: #22c55e;
    text-shadow: none;
  }
}

.progress-bar-container {
  width: 100%;
  height: 20px;
  background-color: rgba(71, 85, 105, 0.5);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.25rem;
  border: 1px solid #475569;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #f59e0b);
  transition: width 0.3s ease;
  border-radius: 10px;
}

.progress-text {
  font-size: 0.8rem;
  color: #cbd5e1;
  display: block;
  text-align: center;
}

/* Level Up Notification */
.level-up-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  animation: levelUpAppear 4s ease-in-out;
}

.level-up-content {
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  padding: 2rem 3rem;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(245, 158, 11, 0.6);
  text-align: center;
  border: 2px solid #fbbf24;
}

.level-up-content h2 {
  font-size: 2.5rem;
  color: #fff;
  margin: 0 0 1rem 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  animation: pulse 1s infinite;
}

.level-up-title {
  font-size: 1.5rem;
  color: #fff;
  margin: 0.5rem 0;
  font-weight: bold;
}

.level-up-sparks {
  font-size: 1.2rem;
  color: #fbbf24;
  margin: 0.5rem 0 0 0;
  font-weight: bold;
}

@keyframes levelUpAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Stats Panel */
#stats {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(30, 41, 59, 0.9);
  /* padding lives on .panel-header / .panel-body so the full header strip is clickable */
  border-radius: 8px;
  border: 1px solid #475569;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  z-index: 10;
  min-width: 150px;
}

/* ---------- shared collapsible HUD panel header (player, Events, Population) ----------
   The whole strip is the toggle <button>, so strip the global button chrome. Panels carry
   `.collapsed` on their root (client.js setupCollapsiblePanel) and CSS hides `.panel-body`. */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  /* The panels carry NO padding of their own — it lives here and on .panel-body — so the whole
     header strip, padding ring included, is one click target rather than just the text + caret. */
  padding: 0.75rem;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: none;
}

.panel-header:hover {
  background: none;
}

.panel-header:active {
  transform: none; /* the global button:active scale would shrink the whole header */
}

.panel-header h3 {
  font-size: 0.65rem;
  margin: 0;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-caret {
  font-size: 0.6rem;
  color: #94a3b8;
  line-height: 1;
  flex: none;
}

.panel-header:hover h3,
.panel-header:hover .panel-caret {
  color: #cbd5e1;
}

.collapsed > .panel-body {
  display: none;
}

/* no top padding: the header's bottom padding already supplies the gap */
.panel-body {
  padding: 0 0.75rem 0.75rem;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  font-size: 0.8rem;
  color: #cbd5e1;
}

.stat-value {
  font-size: 0.8rem;
  font-weight: bold;
  color: #22c55e;
}

/* Color-coded creature labels */
.creature-tiny { color: #ff9800; }
.creature-bear { color: #5d4037; }
.creature-rabbit { color: #eeeeee; }
.creature-fox { color: #ff6f00; }
.creature-eagle { color: #1565c0; }
.creature-deer { color: #a1887f; }

/* Tech Tree Button */
.tech-tree-button {
  width: 100%;
  margin-top: 0.75rem;
  background: linear-gradient(135deg, #a855f7, #f59e0b);
  border: 2px solid #f59e0b;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.75rem;
}

.tech-tree-button:hover {
  background: linear-gradient(135deg, #9333ea, #d97706);
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
}

/* Unspent divine sparks: a #ffcc00 glow-breath + gentle swell to pull the eye to the tree.
   Toggled by client.js via the .has-sparks class; keeps pulsing even on hover. */
@keyframes techTreeSparkPulse {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(255, 204, 0, 0.36); transform: scale(1); }
  50%      { box-shadow: 0 0 20px 7px rgba(255, 204, 0, 0.76); transform: scale(1.03); }
}
.tech-tree-button.has-sparks {
  animation: techTreeSparkPulse 1.5s ease-in-out infinite;
}

/* Nature essence-on-creation passive: a private "[icon] +N ✦" that starts to the right of the essence
   (Power Level) bar and drifts left to land on it, then fades. Anchored on the bar center by client.js
   showNatureEssenceFloat(); --drift-start (set there) is the starting rightward offset. */
.nature-essence-float {
  position: fixed;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  color: #1d9700; /* Nature deep green */
  font-family: "Press Start 2P", system-ui;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 0 8px #1d9700, 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  z-index: 2000;
  white-space: nowrap;
  animation: natureEssenceDrift 1.2s ease-out forwards;
}
/* The Nature branch icon leading the float - names the source of the essence. */
.nature-essence-float-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  filter: drop-shadow(0 0 4px #1d9700);
}
@keyframes natureEssenceDrift {
  0%   { transform: translate(-50%, -50%) translateX(var(--drift-start, 150px)); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(calc(var(--drift-start, 50px) - 225px)); opacity: 0; }
}

/* Tech Tree Modal */
.tech-tree-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.tech-tree-container {
  background-color: #1e293b;
  border-radius: 12px;
  border: 2px solid #f59e0b;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(245, 158, 11, 0.3);
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.tech-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #475569;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(245, 158, 11, 0.1));
}

.tech-tree-title-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
}

.tech-tree-header h2 {
  margin: 0;
  color: #f59e0b;
  font-size: 1.25rem;
}

.tech-tree-sparks {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.5rem 1rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid #fbbf24;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

.sparks-icon {
  font-size: 1.2rem;
}

.sparks-count {
  font-size: 1.25rem;
  font-weight: bold;
  color: #fbbf24;
  min-width: 2ch;
  text-align: center;
}

.sparks-label {
  font-size: 0.85rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.close-button {
  background: none;
  border: none;
  color: #f5a623; /* gold/orange X */
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.close-button .close-x { display: block; }

.close-button:hover {
  background: none; /* override the global button:hover slate fill */
  color: #fff6d5; /* yellow-white on hover */
  transform: scale(1.18);
  filter: drop-shadow(0 0 7px rgba(255, 214, 110, 0.65));
}
.close-button:active { transform: scale(1.1); } /* override the global button:active shrink */

.tech-tree-content {
  padding: 0;
  overflow: hidden;
  flex: 1;
  position: relative;
  background: #0d1128; /* matches the canvas night-sky wash when panning */
}

/* Tech Tree Canvas (backdrop + constellation lines) */
#techTreeCanvas {
  z-index: 0;
}

/* Domain label pill riding the connector line above each path's first node */
.tech-domain-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Press Start 2P", system-ui;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(13, 17, 40, 0.94);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  text-shadow: 0 0 10px currentColor;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
}

/* Reserved columns (Nature/Weather) with no nodes yet: dimmed + dashed border to read as
   "coming soon" rather than a fully-earned domain header. */
.tech-domain-label--reserved {
  opacity: 0.5;
  border-style: dashed;
}

/* Tech Node - medallion tile */
.tech-node {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(160deg, #1a2440, #0d1526);
  border: 2px solid #334155;
  border-radius: 14px;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: absolute;
  display: flex;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: visible;
  z-index: 10;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* dormant: dimmed to starlight */
.tech-node.locked {
  filter: grayscale(65%) brightness(0.72);
}

/* affordable: gold pulse, the divine-spark call to action */
.tech-node.available {
  box-shadow:
    0 0 0 1px rgba(255, 204, 0, 0.32),
    0 0 17px rgba(255, 204, 0, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.55);
  animation: pulse-available 1.5s ease-in-out infinite;
}

/* awakened: filled with its domain's light */
.tech-node.unlocked {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--path, #22c55e) 30%, #101a30), #0d1526);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--path, #22c55e) 45%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* the root node: gold sunburst at the heart of the sky */
.tech-node.root {
  border-radius: 50%;
  border-width: 3px;
  background:
    radial-gradient(circle at 50% 35%, rgba(251, 191, 36, 0.3), transparent 65%),
    linear-gradient(160deg, #2a2410, #14110a);
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.45),
    0 0 70px rgba(251, 191, 36, 0.15),
    0 6px 16px rgba(0, 0, 0, 0.55);
}

/* Active (grants a castable power) vs passive (perception/buff) node shapes. Active reads as a
   bold rounded square; passive as a softer circle - so the split is legible at a glance in the
   tree (the bar itself is actives-only). The root medallion keeps its own look. */
.tech-node--active {
  border-width: 6px;
  border-radius: 4px;
}
.tech-node--passive {
  border-width: 1px;
  border-radius: 50%;
}

/* unlocked active nodes are drag sources onto the hotbar */
.tech-node.draggable-skill { cursor: grab; }
.tech-node.draggable-skill:active { cursor: grabbing; }

.tech-node.clickable {
  cursor: pointer;
}

.tech-node.clickable:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.7),
    0 0 34px rgba(251, 191, 36, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.tech-node-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
  gap: 0.4rem;
}

.tech-node-icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  transition: all 0.2s;
}

.tech-node.locked .tech-node-icon {
  opacity: 0.45;
}

.tech-node.clickable:hover .tech-node-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
}

.tech-node-name {
  font-weight: 600;
  color: #e2e8f0;
  font-size: 0.6rem;
  line-height: 1.3;
  word-wrap: break-word;
  max-width: 100%;
  letter-spacing: 0.3px;
}

/* State badges */
.tech-node-check {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--path, #22c55e);
  color: #0b1220;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.tech-node-cost {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 9px;
  background: #241c06;
  border: 1px solid rgba(251, 191, 36, 0.75);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.tech-node-cost.dim {
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
  background: #10182b;
}

.tech-node-req {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 9px;
  background: #250d10;
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #f87171;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Global Tooltip (appended to body) */
.tech-node-tooltip {
  display: none;
  position: fixed;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
  border: 2px solid #475569;
  border-radius: 10px;
  padding: 1rem;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  pointer-events: none;
  white-space: normal;
  text-align: left;
  opacity: 1;
}

.tooltip-header {
  display: block;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid;
  margin-bottom: 1.1rem; /* clearance for the kind badge that straddles the bottom border */
  position: relative;
}

.tooltip-header strong {
  font-family: "Press Start 2P", system-ui;
  color: #e2e8f0;
  font-size: 0.6rem;
  font-weight: 500;
  display: block;
  width: 100%;
  line-height: 130%;
  padding: 0.3rem 0 0 0;
}

/* ACTIVE / PASSIVE badge - straddles the BOTTOM border of the title area (~half below it).
   Background + text color are set inline per-node in techTree.js to match the branch (title-border)
   color, so the badge reads as one accented family; the label carries active-vs-passive meaning. */
.tooltip-header { padding-bottom: 1rem; }
.tooltip-kind {
  position: absolute;
  left: 0.5rem;
  bottom: -0.4rem; /* hang ~50% below the header's bottom border */
  font-family: "Press Start 2P", system-ui;
  font-size: 0.4rem;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
}
/* --active / --passive kept as semantic hooks; the fill + text color are branch-matched inline (techTree.js). */

/* "UPGRADE" badge (top-left) shown on a stacked upgrade node (e.g. Smite II when you own Smite I).
   Badge straddles the top border (top: -0.4rem), so only a little clearance is needed - the base
   0.5rem plus a hair, matching how the kind badge straddles the bottom. */
.tooltip-header--upgrade { padding-top: 0.75rem; }
.tooltip-upgrade {
  position: absolute;
  top: -0.4rem;
  margin-bottom: -0.5rem;
  left: 0.5rem;
  font-family: "Press Start 2P", system-ui;
  font-size: 0.4rem;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  /* background + text color set inline per-node in techTree.js to match the branch (title-border) color */
}
/* Up-arrow to the left of the title, gently swaying to signal "this improves the skill". */
.tooltip-upgrade-arrow {
  display: inline-block;
  font-family: system-ui, sans-serif;
  color: #34d399;
  margin-right: 0.4rem;
  animation: tooltip-arrow-sway 0.9s ease-in-out infinite;
}
@keyframes tooltip-arrow-sway {
  0%, 100% { transform: translateY(2px); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip-upgrade-arrow { animation: none; }
}

/* Structured stat rows (the Smite stack); on an upgrade the changed values show as "was -> now". */
.tooltip-stats { list-style: none; margin: 0; padding: 0; }
.tooltip-stats li { color: #cbd5e1; font-size: 0.85rem; line-height: 1.7; }
.tooltip-stats .stat-key { color: #94a3b8; }
.tooltip-stats .stat-was { color: #94a3b8; text-decoration: line-through; opacity: 0.85; }
.tooltip-stats .stat-arrow { color: #34d399; padding: 0 0.15rem; }
.tooltip-stats .stat-now { color: #34d399; font-weight: 700; }

/* Inline SVG arrow icons (Bootstrap Icons) - align with adjacent text. */
.ui-arrow { vertical-align: -0.15em; }
.tooltip-upgrade-arrow .ui-arrow { vertical-align: middle; position: relative; bottom: 2px; }

.tooltip-path {
  font-size: 0.6rem;
  color: #94a3b8;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  padding: 0.25rem 0 0 0;
}

.tooltip-description {
  color: #cbd5e1;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.tooltip-section {
  margin-bottom: 0.75rem;
}

.tooltip-section strong {
  color: #f59e0b;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}

.tooltip-section ul {
  margin: 0;
  padding-left: 1.25rem;
  color: #cbd5e1;
  font-size: 0.85rem;
}

.tooltip-section li {
  margin: 0.25rem 0;
  line-height: 1.4;
}

.prereq-met {
  color: #22c55e;
}

.prereq-unmet {
  color: #94a3b8;
}

.tooltip-status {
  text-align: center;
  padding: 0.5rem;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

.unlocked-status {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid #22c55e;
}

.available-status {
  background: rgba(34, 197, 94, 0.3);
  color: #22c55e;
  border: 1px solid #22c55e;
  animation: pulse-status 1.5s infinite;
}

.locked-status {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid #ef4444;
}

/* Animations */
@keyframes pulse-available {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 204, 0, 0.4),
      0 0 15px 2px rgba(255, 204, 0, 0.36),
      0 6px 16px rgba(0, 0, 0, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 1.5px rgba(255, 204, 0, 0.76),
      0 0 35px 9px rgba(255, 204, 0, 0.68),
      0 6px 16px rgba(0, 0, 0, 0.55);
    transform: scale(1.045);
  }
}

@keyframes pulse-status {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Power Locked Notification */
.power-locked-notification {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  animation: slideDown 0.3s ease-out;
}

.power-locked-notification.fade-out {
  animation: fadeOut 0.3s ease-out;
  opacity: 0;
}

.power-locked-notification .notification-content {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  padding: 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 30px rgba(220, 38, 38, 0.4);
  text-align: center;
  border: 2px solid #ef4444;
  min-width: 300px;
}

.power-locked-notification .notification-content p {
  margin: 0.5rem 0;
  color: #fff;
  font-size: 1rem;
}

.power-locked-notification .notification-content strong {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 0.5rem;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ===== CREATURE INSPECT PANEL ===== */
.inspect-panel {
  position: absolute;
  bottom: 20px;
  left: 352px; /* clears the event log (left:16px, width 325px) */
  background-color: rgba(30, 41, 59, 0.95);
  border-radius: 8px;
  border: 1px solid #f59e0b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(245, 158, 11, 0.15);
  z-index: 10;
  min-width: 220px;
  max-width: 280px;
  /* quick in/out: fade + lift (JS toggles .visible; display flips after out) */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.inspect-panel.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .inspect-panel {
    transition: none;
  }
}

.inspect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #475569;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(168, 85, 247, 0.1));
  border-radius: 8px 8px 0 0;
}

.inspect-name {
  font-family: "Press Start 2P", system-ui;
  font-size: 0.65rem;
  color: #fbbf24;
  font-weight: bold;
}

.inspect-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.inspect-close:hover {
  color: #ef4444;
  transform: none;
}

.inspect-body {
  padding: 0.6rem 0.8rem;
}

.inspect-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.inspect-label {
  font-size: 0.8rem;
  color: #94a3b8;
}

.inspect-value {
  font-size: 0.8rem;
  color: #e2e8f0;
  font-weight: 600;
}

.inspect-hp-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(71, 85, 105, 0.5);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.25rem 0 0.35rem 0;
  border: 1px solid #475569;
}

.inspect-hp-fill {
  height: 100%;
  background: #4caf50;
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: 4px;
}

.inspect-status-infected {
  color: #7cfc00;
}

.inspect-status-zombified {
  color: #9333ea;
}

.inspect-status-worshiper {
  color: #fbbf24;
}

/* Favor toward the god: red = unmoved, yellow = building, gold-green = worshiper */
.inspect-favor-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(71, 85, 105, 0.5);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.2rem 0 0.35rem 0;
  border: 1px solid #475569;
}

.inspect-favor-fill {
  height: 100%;
  width: 0;
  background: #ef4444;
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: 3px;
}

.inspect-favor-fill.mid {
  background: #eab308;
}

.inspect-favor-fill.worshiper {
  background: linear-gradient(90deg, #22c55e, #fbbf24);
}

/* ===== EVENT LOG ===== */
/* positioned by #bottomLeftStack, which keeps the status line 12px above it */
.event-log {
  background-color: rgba(15, 23, 42, 0.85);
  border-radius: 8px;
  border: 1px solid #334155;
  width: 325px; /* clears the centered hotbar (~290px) and the inspect panel (left:352px) */
  max-height: 243px;
  /* padding lives on .panel-header / .panel-body so the full header strip is clickable */
}

.event-log-header {
  border-bottom: 1px solid #334155;
  pointer-events: auto; /* re-enable clicks (the stack is click-through) so the header can collapse */
}

/* collapsed: nothing under the header, so drop its divider */
.event-log.collapsed .event-log-header {
  border-bottom: none;
}

/* the divider replaces the header's bottom padding as the separator, so put the gap back on top */
.event-log .panel-body {
  padding-top: 0.6rem;
}

.event-log-body {
  overflow-y: auto;
  max-height: 189px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.event-log-entry {
  font-size: 0.8rem;
  color: #cbd5e1;
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(71, 85, 105, 0.2);
  opacity: 1;
  transition: opacity 1s ease;
}

.event-log-entry.fading {
  opacity: 0.3;
}

.event-log-entry.event-death {
  color: #ef4444;
}

.event-log-entry.event-birth {
  color: #22c55e;
}

.event-log-entry.event-zombie {
  color: #a855f7;
}

.event-log-entry.event-smite {
  color: #fbbf24;
  font-weight: bold;
}

.event-log-entry.event-blessing {
  color: #ffd700;
}

.event-log-entry.event-worship {
  color: #fbbf24;
  font-weight: 600;
}

.event-log-entry.event-combat {
  color: #f97316;
}

.event-log-entry.event-omen {
  color: #a78bfa;
  font-style: italic;
}

.event-log-entry.event-event {
  color: #f472b6;
  font-weight: 600;
}

/* ===== SMITE FLASH ===== */
.smite-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.smite-flash.active {
  animation: smiteFlashAnim 0.3s ease-out;
}

@keyframes smiteFlashAnim {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* ===== LIFE FLASH ===== */
.life-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--flash-color, #ffd700);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.life-flash.active {
  animation: lifeFlashAnim 0.4s ease-out;
}

@keyframes lifeFlashAnim {
  0% { opacity: 0.4; }
  100% { opacity: 0; }
}

/* ===== DEATH DIM FLASH ===== */
.death-dim-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 0, 15, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.death-dim-flash.active {
  animation: deathDimAnim 0.5s ease-out;
}

@keyframes deathDimAnim {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* Smite cursor */
#map-container.cursor-smite {
  cursor: crosshair;
}

/* ===== World-travel "universe zoom" transition (docs/WORLD_TRAVEL_ANIMATION_PLAN.md) =====
   Increment 1: scaffold. #transitionFreeze holds the world we're LEAVING for the outro;
   #universeOverlay is a plain dark "void" placeholder (the real galaxy lands in increment 3).
   All motion is rAF-driven inline styles from worldTransition.js — these rules only lay out
   the layers (stacking, origin). */
#transitionFreeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6; /* above the flash overlays (5), below the on-map UI (10) */
  transform-origin: center center;
  will-change: transform, filter, opacity;
  image-rendering: pixelated;
}

/* Warp streaks (increment 2): radiate from center over the shrinking world during the outro. */
#warpCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 7; /* above the frozen world (6), below the on-map UI (10) */
}

#universeOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9000; /* above game UI, below the tech-tree modal (10000) */
  will-change: opacity;
  background: #05040c; /* deep-space base; the galaxy is painted on #universeCanvas (increment 3) */
}

#universeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ===== WORLD CLOCK ===== */
.world-clock {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(30, 41, 59, 0.9);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border: 1px solid #475569;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #cbd5e1;
}

/* World switcher: a globe pill (left of the auth widget) that reveals "Worlds" on hover and the
   world list on click. Populated by renderWorldPanel; styled to match the auth-widget pill. */
.world-switch {
  display: flex;
  align-items: center;
  height: 28px;            /* fixed so opening the chips never changes the pill's height */
  box-sizing: border-box;
  background: rgba(26, 31, 46, 0.85);
  border: 1px solid #475569;
  border-radius: 999px;
  padding: 0 9px;          /* no vertical padding: children are centred within the fixed height */
  color: #cbd5e1;
  font-size: 0.8rem;
}
.world-switch-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Neutralize the global button:hover/:active (grey fill + scale) - the only hover cue here is
   the "Worlds" label sliding open. */
.world-switch-toggle:hover,
.world-switch-toggle:active {
  background: none;
  border: none;
  transform: none;
}
.world-switch-globe { font-size: 1.05rem; line-height: 1; }
/* "Worlds" label: hidden by default, slides open on hover or when clicked open. */
.world-switch-label {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.18s ease, opacity 0.18s ease, margin-left 0.18s ease;
}
.world-switch:hover .world-switch-label,
.world-switch.open .world-switch-label { max-width: 90px; opacity: 1; margin-left: 5px; }
/* World chips slide open (max-width) once the globe is clicked. overflow:hidden makes
   min-width:auto compute to 0 so max-width:0 can fully collapse them; flex-wrap:nowrap keeps
   them on one row while clipped. */
.world-switch .world-chips {
  max-width: 0;
  min-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
}
/* max-width just above the real content width so the transition maps to the visible reveal
   (a much larger cap would finish growing while still clipped, making it look instant). */
.world-switch.open .world-chips { max-width: 340px; opacity: 1; margin-left: 6px; }
.world-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.world-chip {
  background-color: rgba(15, 23, 42, 0.8);
  border: 1px solid #475569;
  color: #cbd5e1;
  border-radius: 999px;
  padding: 3px 12px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.world-chip:hover { background-color: rgba(51, 65, 85, 0.95); border-color: #64748b; }
.world-chip.current {
  background-color: #d4af37;
  border-color: #d4af37;
  color: #1a1f2e;
  font-weight: 700;
  cursor: default;
}
.world-chip.traveling { opacity: 0.55; cursor: progress; }

#clockIcon {
  font-size: 1.1rem;
}

#clockTime {
  font-family: "DM Sans", monospace;
  font-weight: bold;
  min-width: 3.5ch;
}

/* Responsive */
@media (max-width: 768px) {
  header h1 {
    font-size: 1.5rem;
  }

  header .tagline {
    font-size: 0.8rem;
  }

  #controls, #powerbar, #status, #stats, #progression {
    font-size: 0.8rem;
    padding: 0.75rem;
  }

  button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* Summon picker: creature chooser shown above the hotbar while Summon is armed */
.summon-picker {
  position: absolute;
  bottom: 120px; /* above the armed-power banner (86px) + hotbar (16px), same anchor as the HUD */
  left: 50%;
  transform: translateX(-50%);
  z-index: 22; /* above the hotbar (20) and toasts (21) so its chips are clickable */
  max-width: min(720px, 92vw);
  background: rgba(15, 20, 30, 0.92);
  border: 1px solid rgba(120, 200, 140, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}
.summon-picker[hidden] { display: none; }
.summon-picker-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fe3b4;
  margin-bottom: 6px;
}
.summon-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 132px;
  overflow-y: auto;
}
.summon-chip {
  font: inherit;
  font-size: 13px;
  color: #e8f0e8;
  background: rgba(40, 60, 45, 0.6);
  border: 1px solid rgba(120, 200, 140, 0.3);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.summon-chip:hover { background: rgba(60, 90, 65, 0.75); }
.summon-chip:active { transform: translateY(1px); }
.summon-chip.owned { border-color: rgba(250, 204, 21, 0.5); }
.summon-chip.selected {
  background: rgba(34, 197, 94, 0.85);
  border-color: #22c55e;
  color: #06210f;
  font-weight: 600;
}
.summon-picker-empty {
  font-size: 12px;
  color: #9aa;
  padding: 4px 2px;
}

/* --- God identity + roster (MG-4) --- */
.god-swatch {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: -0.25rem auto 0.85rem;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  background-color: #fbbf24; /* JS overwrites with your allegiance color */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.god-swatch:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.god-swatch > span {
  background: rgba(15, 23, 42, 0.55);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
}

.identity-popover {
  position: absolute;
  top: 20px;
  left: 375px; /* just clear of the progression panel (left:20px, width 345px) */
  z-index: 30;
  width: 210px;
  background-color: rgba(30, 41, 59, 0.98);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 0.85rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.identity-popover-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 0.6rem;
}
.palette-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 0.75rem;
}
.palette-swatch {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s ease, border-color 0.08s ease;
}
.palette-swatch:hover { transform: scale(1.12); border-color: rgba(255, 255, 255, 0.85); }
.identity-name-label {
  display: block;
  font-size: 0.72rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.identity-name-row { display: flex; gap: 6px; }
.god-name-input {
  flex: 1;
  min-width: 0;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #475569;
  border-radius: 6px;
  color: #f8fafc;
  padding: 5px 8px;
  font-size: 0.85rem;
}
.god-name-input:focus { outline: none; border-color: #f59e0b; }
.identity-save {
  background: #f59e0b;
  color: #1e293b;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}
.identity-save:hover { background: #fbbf24; }
.identity-error { margin-top: 0.5rem; font-size: 0.72rem; color: #f87171; }

.god-roster {
  position: absolute;
  top: 56px; /* tucked under the Sign in pill (#topBar: top 14px, ~28px tall) now the zoom panel is hidden */
  right: 20px;
  z-index: 10;
  width: 190px;
  background-color: rgba(30, 41, 59, 0.95);
  border: 1px solid #475569;
  border-radius: 8px;
  padding: 0.75rem; /* shared HUD panel padding */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* matches the other HUD panel headers (.panel-header h3) — this one just doesn't collapse */
.god-roster-title {
  font-size: 0.65rem;
  color: #94a3b8;
  margin: 0 0 0.6rem; /* matches .panel-body's margin-top on the collapsible panels */
}
.god-roster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.god-roster-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: #e2e8f0; }
.god-roster-item.is-you { font-weight: 700; }
.god-roster-item.is-you .god-roster-name { color: #fbbf24; }
.god-roster-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.god-roster-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.god-roster-count { color: #cbd5e1; font-variant-numeric: tabular-nums; }

/* ===== Achievements board (docs/ACHIEVEMENTS_PLAN.md) ===== */
.achievements-content {
  overflow-y: auto;
  max-height: calc(80vh - 90px);
  padding: 4px 6px 8px;
}
.ach-empty { color: #94a3b8; text-align: center; padding: 40px 0; font-size: 0.95rem; }

.ach-tier-section { margin-bottom: 18px; }
.ach-tier-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px 8px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ach-tier-icon { font-size: 1.05rem; }
.ach-tier-name { font-weight: 700; color: var(--tier, #e2e8f0); letter-spacing: 0.02em; }
.ach-tier-count {
  margin-left: auto; color: #cbd5e1; font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.ach-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.ach-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--tier, #64748b);
  border-radius: 8px;
  padding: 10px 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ach-card.ach-locked { opacity: 0.6; }
.ach-card.ach-done {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--tier, #64748b);
  box-shadow: 0 0 16px -8px var(--tier);
}
.ach-card:hover { transform: translateY(-1px); }

.ach-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ach-status { font-size: 0.9rem; }
.ach-card.ach-done .ach-status { color: var(--tier); }
.ach-name { font-weight: 700; color: #f1f5f9; font-size: 0.92rem; }
.ach-desc { color: #94a3b8; font-size: 0.8rem; line-height: 1.35; }

.ach-progress {
  margin-top: 8px; height: 6px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
.ach-progress-bar { height: 100%; background: var(--tier, #64748b); border-radius: 4px; }
.ach-progress-text {
  margin-top: 3px; font-size: 0.72rem; color: #cbd5e1;
  font-variant-numeric: tabular-nums; text-align: right;
}
.ach-reward {
  margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.02em;
  color: var(--tier, #cbd5e1); opacity: 0.9;
}

/* --- Skin picker + placeholder per-branch theming --- */
.ach-skins {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 2px 2px 12px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ach-skins-label { color: #94a3b8; font-size: 0.8rem; margin-right: 2px; }
.ach-skin-swatch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer;
  font-size: 0.78rem; transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.ach-skin-swatch:hover { background: rgba(255, 255, 255, 0.1); }
.ach-skin-swatch.selected {
  border-color: var(--tier, #fbbf24);
  box-shadow: 0 0 0 1px var(--tier, #fbbf24);
  color: #fff;
}
.ach-skin-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tier, #64748b); }

/* Per-branch UI skins: placeholder palette theming. Real per-branch art/particles drop in behind
   this same data-skin hook later (docs/ACHIEVEMENTS_PLAN.md). */
:root[data-skin="insight"]     { --skin-accent: #5f87fd; }
:root[data-skin="nature"]      { --skin-accent: #1d9700; }
:root[data-skin="pestilence"]  { --skin-accent: #9ec347; }
:root[data-skin="creation"]    { --skin-accent: #c5ba22; }
:root[data-skin="protection"]  { --skin-accent: #9fbac5; }
:root[data-skin="destruction"] { --skin-accent: #dc2626; }
:root[data-skin="death"]       { --skin-accent: #a458ad; }
:root[data-skin="weather"]     { --skin-accent: #06b6d4; }
:root[data-skin] .tech-tree-button {
  border-color: var(--skin-accent);
  color: var(--skin-accent);
  box-shadow: 0 0 14px -6px var(--skin-accent);
}

/* ===== AWAKENING ONBOARDING (first-open intro, shown until Divine Awakening is unlocked) ===== */
.awakening-intro {
  position: relative;
  height: 100%;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  /* a divine glow rising from where the medallion sits, plus a cool crown of light up top */
  background:
    radial-gradient(120% 90% at 50% 116%, rgba(251, 191, 36, 0.16), transparent 55%),
    radial-gradient(90% 70% at 50% -12%, rgba(168, 85, 247, 0.12), transparent 60%);
}
.awakening-intro__inner {
  max-width: 620px;
  text-align: center;
  color: #dbe4f3;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* fade the copy out beneath the burst when awakening begins */
.awakening-intro--awakening .awakening-intro__inner {
  opacity: 0;
  transform: scale(1.06);
}
.awakening-intro__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f6c453;
  opacity: 0.85;
}
.awakening-intro__title {
  margin: 0 0 1.1rem;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #ffd76a;
  text-shadow: 0 0 24px rgba(251, 191, 36, 0.45);
}
.awakening-intro__lede {
  margin: 0 auto 1.6rem;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #c4cfe0;
}
.awakening-intro__steps {
  list-style: none;
  margin: 0 auto 1.7rem;
  padding: 0;
  max-width: 30rem;
  text-align: left;
  display: grid;
  gap: 0.7rem;
}
/* each step is split: a gold "cap" on the left (~26%) carrying the number + short label, and the
   description body on the right. The circled number hangs off the cap's left edge like a coin. */
.awakening-intro__step {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #0c0b08;
  background: linear-gradient(180deg, #32280e, #0c0b08);
  border-radius: 10px;
  overflow: visible;
  min-height: 3.3rem;
}
.awakening-intro__cap {
  flex: 0 0 32%;
  align-self: stretch; /* fill the full row height while the body stays vertically centered */
  display: flex;
  align-items: center;
  padding: 0.5rem 0.6rem 0.5rem 1.55rem; /* left padding leaves room beside the overhanging number */
  border-radius: 9px 0 0 9px;
  background: linear-gradient(180deg, #ffd76a, #f0a92a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
  text-transform: uppercase;
}
.awakening-intro__num {
  position: absolute;
  left: -0.85rem; /* hangs off the left side of the row */
  top: 50%;
  transform: translateY(-50%);
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #0d1428;
  border: 2px solid #ffd76a;
  color: #ffd76a;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.awakening-intro__step-k {
  color: #4a2f08; /* dark brown on the gold cap */
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.15;
  letter-spacing: 0.2px;
}
.awakening-intro__step-body {
  flex: 1;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #c8d2e4;
}
.awakening-intro__steps em { color: #ffd76a; font-style: normal; font-weight: 600; }
/* inline Divine Sparks token in step 3, mirroring the header pill so first-timers learn the icon */
.awakening-intro__spark-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.35rem;
  margin: 0 0.12rem;
  border: 1px solid #fbbf24;
  border-radius: 9px;
  background: rgba(251, 191, 36, 0.14);
  vertical-align: middle;
  line-height: 1;
}
.awakening-intro__spark-chip .sparks-icon { font-size: 0.95rem; }
.awakening-intro__prompt {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  color: #aab6cc;
}
.awakening-intro__node {
  display: flex;
  justify-content: center;
  margin: 0 0 1.5rem;
}
/* static (in-flow) override of the tree medallion, which is normally position:absolute */
.awakening-intro__medallion {
  position: relative;
  left: auto;
  top: auto;
  width: 132px;
  height: 132px;
}
.awakening-intro__cta {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #fbbf24;
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-size: 0.82rem;
  letter-spacing: 1px;
  color: #1a1204;
  background: linear-gradient(180deg, #ffd76a, #f0a92a);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.awakening-intro__cta:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 0 34px rgba(251, 191, 36, 0.6), 0 8px 20px rgba(0, 0, 0, 0.55);
}
.awakening-intro__cta:active { transform: scale(0.98); }

/* ===== AWAKENING BURST (full-screen godly animation on first unlock; grander than #smiteFlash) ===== */
.awakening-burst {
  position: fixed;
  inset: 0;
  z-index: 4000; /* above .tech-tree-modal (1000) */
  pointer-events: none;
  overflow: hidden;
}
.awakening-burst__flash {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffe9a8 26%, rgba(255, 210, 90, 0) 62%);
  opacity: 0;
  animation: awakenFlash 2.2s ease-out forwards;
}
.awakening-burst__bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.9) 0%, rgba(251, 191, 36, 0.5) 35%, rgba(251, 191, 36, 0) 70%);
  opacity: 0;
  animation: awakenBloom 2.2s ease-out forwards;
}
.awakening-burst__rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220vmax;
  height: 220vmax;
  margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 224, 150, 0) 0deg,
    rgba(255, 228, 160, 0.5) 2.4deg,
    rgba(255, 224, 150, 0) 6deg);
  opacity: 0;
  animation: awakenRays 2.2s ease-out forwards;
}
.awakening-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffd25a 55%, rgba(255, 210, 90, 0) 100%);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: awakenSpark 2.2s ease-out forwards;
}
@keyframes awakenFlash {
  0% { opacity: 0; }
  10% { opacity: 0.95; }
  100% { opacity: 0; }
}
@keyframes awakenBloom {
  0% { opacity: 0; transform: scale(0.15); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes awakenRays {
  0% { opacity: 0; transform: scale(0.1) rotate(0deg); }
  22% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1) rotate(42deg); }
}
@keyframes awakenSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(1.1); }
}
/* reduced motion: skip the rays + sparks, collapse the bloom/flash to a brief gold fade */
.awakening-burst--reduced .awakening-burst__rays,
.awakening-burst--reduced .awakening-spark { display: none; }
.awakening-burst--reduced .awakening-burst__flash,
.awakening-burst--reduced .awakening-burst__bloom { animation-duration: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .awakening-intro__inner { transition: opacity 0.2s ease; }
}