/* ============================================================
   style.css — SHAREWOODZ Main Styles
   Uses tokens from tokens.css exclusively — no random values.
   Mobile-first approach (PLAYBOOK §12).
   ============================================================ */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-dark);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Form fields opt back out of the game-surface reset above. Both of those
   inherit into inputs: user-select:none stops a caret being placed (iOS
   Safari in particular) and touch-action:none swallows the tap that would
   focus the field, so a text input inside the game is otherwise unusable. */
input, textarea, select, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}

/* ── Canvas (Three.js) ── */
#game-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-world);
  display: block;
}

/* ── UI Overlay Container ── */
#ui-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-hud);
}

#ui-overlay > * {
  pointer-events: auto;
}

/* ── HUD Layer ── */
#hud-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-hud);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

#hud-layer > * {
  pointer-events: auto;
}

/* ── HUD Top-Left: HP + Mana ── */
.hud-bars {
  position: absolute;
  bottom: calc(var(--sp-6) + var(--touch-btn-size) + var(--sp-4));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: clamp(200px, 30vw, 300px);
}

.hud-bar-container {
  position: relative;
  width: 100%;
  height: 20px;
  background: rgba(15, 20, 25, 0.7);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  overflow: hidden;
}

.hud-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--transition-normal);
}

.hud-bar-fill.hp {
  background: linear-gradient(90deg, #d32f2f, #ff5252);
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
}
.hud-bar-fill.mana {
  background: linear-gradient(90deg, #1976d2, #448aff);
  box-shadow: 0 0 10px rgba(68, 138, 255, 0.5);
}

.hud-bar-label {
  position: absolute;
  top: 50%;
  left: var(--sp-2);
  transform: translateY(-50%);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  line-height: 1;
}

/* ── HUD Top-Right: Point + Level ── */
.hud-stats {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

.hud-stat {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  background: linear-gradient(180deg, rgba(35, 40, 45, 0.8), rgba(15, 20, 25, 0.9));
  backdrop-filter: blur(6px);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}

/* ── HUD Skill Buttons ── */
.hud-skills {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-end;
}

.skill-hotkey {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--color-white);
  color: var(--color-bg-dark);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  border: 1px solid var(--color-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 2;
}

.skill-btn {
  position: relative;
  width: var(--touch-btn-size);
  height: var(--touch-btn-size);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-primary);
  background: rgba(0,0,0,0.7);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  -webkit-touch-callout: none;
}

.skill-btn:hover {
  border-color: var(--color-primary-hover);
  transform: scale(1.05);
}

.skill-btn:active, .skill-btn.pressed {
  transform: scale(0.92);
  border-color: var(--color-primary-active);
  background: rgba(63, 185, 80, 0.2);
}

.skill-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.skill-btn:disabled, .skill-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--color-text-dim);
}

.skill-btn.on-cooldown {
  border-color: var(--color-text-muted);
}

.skill-btn.no-mana {
  border-color: var(--color-danger);
  animation: shake-subtle 0.3s ease;
}

.skill-cooldown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  clip-path: polygon(50% 50%, 50% 0%, 50% 0%);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.skill-cooldown-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  pointer-events: none;
}

.skill-btn.ultimate {
  border-color: var(--color-accent);
  width: calc(var(--touch-btn-size) + 8px);
  height: calc(var(--touch-btn-size) + 8px);
}

.skill-btn.ultimate:active, .skill-btn.ultimate.pressed {
  background: rgba(212, 160, 37, 0.2);
}

/* ── Touch Controls (D-Pad Left) ── */
.touch-controls {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  display: none; /* shown on touch devices */
  z-index: var(--z-touch);
}

.touch-dpad {
  position: relative;
  width: 120px;
  height: 120px;
}

.touch-dpad-btn {
  position: absolute;
  width: var(--touch-btn-size);
  height: var(--touch-btn-size);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-circle);
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.5);
  color: var(--color-text);
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
  -webkit-touch-callout: none;
}

.touch-dpad-btn:active, .touch-dpad-btn.pressed {
  background: rgba(63, 185, 80, 0.3);
  transform: scale(0.9);
}

.touch-dpad-btn.left  { left: 0;    top: 50%;  transform: translateY(-50%); }
.touch-dpad-btn.right { right: 0;   top: 50%;  transform: translateY(-50%); }
.touch-dpad-btn.up    { top: 0;     left: 50%; transform: translateX(-50%); }
.touch-dpad-btn.down  { bottom: 0;  left: 50%; transform: translateX(-50%); }

.touch-dpad-btn.left:active,  .touch-dpad-btn.left.pressed  { transform: translateY(-50%) scale(0.9); }
.touch-dpad-btn.right:active, .touch-dpad-btn.right.pressed { transform: translateY(-50%) scale(0.9); }
.touch-dpad-btn.up:active,    .touch-dpad-btn.up.pressed    { transform: translateX(-50%) scale(0.9); }
.touch-dpad-btn.down:active,  .touch-dpad-btn.down.pressed  { transform: translateX(-50%) scale(0.9); }

/* Touch action buttons (right side) */
.touch-actions {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  display: none; /* shown on touch devices */
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-end;
  z-index: var(--z-touch);
}

.touch-action-row {
  display: flex;
  gap: var(--sp-2);
}

/* ── Nametag ── */
.nametag {
  position: absolute;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-nametag);
  text-align: center;
  transform: translateX(-50%);
}

.nametag-bar {
  width: 48px;
  height: 4px;
  background: rgba(0,0,0,0.5);
  border-radius: var(--radius-pill);
  margin-top: 2px;
  overflow: hidden;
}

.nametag-bar-fill {
  height: 100%;
  background: var(--color-hp);
  border-radius: var(--radius-pill);
  transition: width 0.15s ease;
}

/* ── Player Nametag Enhancements ── */
.player-nametag {
  font-size: var(--fs-sm);
  color: var(--color-primary-hover);
  font-weight: var(--fw-bold);
  text-shadow: 0 2px 4px rgba(0,0,0,1);
}

.player-nametag .nametag-bar {
  width: 72px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.player-nametag .nametag-bar-fill {
  background: linear-gradient(90deg, #3fb950, #56d364);
  box-shadow: 0 0 6px rgba(86, 211, 100, 0.6);
}

/* ── Boss Health Bar ── */
.boss-health-container {
  position: absolute;
  top: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 90%;
  max-width: 500px;
  z-index: var(--z-hud);
}

.boss-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-danger);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 10px rgba(248, 81, 73, 0.5);
}

.boss-health-bar {
  width: 100%;
  height: 24px;
  background: rgba(15, 20, 25, 0.8);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 16px rgba(0,0,0,0.7);
  overflow: hidden;
  position: relative;
}

.boss-health-fill {
  height: 100%;
  background: linear-gradient(90deg, #b71c1c, #f85149);
  box-shadow: 0 0 16px rgba(248, 81, 73, 0.8);
  border-radius: var(--radius-pill);
  transition: width 0.2s ease-out;
}

/* ── Screen Overlays (Wallet Gate, World Map, etc.) ── */
.screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.screen-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.screen-overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Wallet Gate Screen ── */
.wallet-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12);
  max-width: 420px;
  width: 90%;
}

.wallet-gate-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-shadow: var(--shadow-glow-green);
  text-align: center;
  letter-spacing: var(--ls-wide);
}

.wallet-gate-subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── World Map Screen ── */
.worldmap-container {
  position: relative;
  width: 90%;
  max-width: 800px;
  padding: var(--sp-8);
}

.worldmap-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-accent);
  text-align: center;
  margin-bottom: var(--sp-8);
}

.worldmap-stages {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-height: 60vh;
  overflow-y: auto;
  padding-right: var(--sp-2);
}

.stage-node {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.stage-node:hover:not(.locked) {
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  transform: translateX(4px);
}

.stage-node:active:not(.locked) {
  transform: translateX(2px) scale(0.98);
}

.stage-node.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.stage-node.cleared {
  border-color: var(--color-primary-active);
}

.stage-node-number {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-dim);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stage-node.locked .stage-node-number {
  background: var(--color-bg-light);
  color: var(--color-text-dim);
}

.stage-node-info {
  flex: 1;
}

.stage-node-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  color: var(--color-text);
}

.stage-node-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.stage-node-status {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-primary);
}

.stage-node.locked .stage-node-status {
  color: var(--color-text-dim);
}

/* ── Stage Intro Overlay ── */
.stage-intro {
  position: relative;
  text-align: center;
}

.stage-intro-name {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-shadow: var(--shadow-glow-green);
  animation: fadeSlideUp 0.6s ease-out;
}

.stage-intro-tip {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin-top: var(--sp-4);
  animation: fadeSlideUp 0.6s ease-out 0.2s both;
}

/* ── Inventory Panel ── */
.inventory-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 100%);
  height: 100%;
  background: var(--color-bg-mid);
  border-left: 1px solid var(--color-border);
  z-index: var(--z-inventory);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
}

.inventory-panel.open {
  transform: translateX(0);
}

.inventory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
}

.inventory-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-accent);
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  flex: 1;
  overflow-y: auto;
  align-content: start;
}

.inventory-slot {
  aspect-ratio: 1;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.inventory-slot:hover:not(:empty) {
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
}

.inventory-slot-qty {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ── Pause Modal ── */
.pause-modal {
  position: relative;
  background: var(--color-bg-mid);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: var(--sp-10);
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  box-shadow: var(--shadow-lg);
}

.pause-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-accent);
}

/* ── How to Play Guide ── */
.guide-modal {
  position: relative;
  width: min(520px, calc(100% - var(--sp-8)));
  max-height: min(720px, calc(100% - var(--sp-8)));
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--color-bg-mid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.guide-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-accent);
}

.guide-body {
  display: grid;
  gap: var(--sp-4);
  color: var(--color-text-muted);
}

.guide-body section {
  padding: var(--sp-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.guide-body h3 {
  margin-bottom: var(--sp-2);
  color: var(--color-primary);
  font-size: var(--fs-md);
}

.guide-body p {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
}

.guide-body strong { color: var(--color-text); }
.guide-body kbd,
.guide-body code {
  padding: 2px var(--sp-1);
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
}

.guide-tip { border-color: var(--color-accent) !important; }

/* ── Stage Clear Screen ── */
.stage-clear {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.stage-clear-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  text-shadow: var(--shadow-glow-gold);
}

.stage-clear-rewards {
  display: flex;
  gap: var(--sp-6);
}

.reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.reward-value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* ── Respawn Countdown ── */
.respawn-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.respawn-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.respawn-count {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-shadow: 0 0 40px rgba(63, 185, 80, 0.5);
  animation: pulseCount 1s ease-in-out infinite;
}

/* ── Toast Notification ── */
.toast-container {
  position: fixed;
  bottom: var(--sp-24);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  animation: toastIn 0.3s ease-out, toastOut 0.3s ease-in forwards;
  animation-delay: 0s, 2.7s;
  pointer-events: auto;
}

.toast.success { border-color: var(--color-primary); }
.toast.warning { border-color: var(--color-accent); }
.toast.error   { border-color: var(--color-danger); }

/* ── Tooltip ── */
.tooltip {
  position: absolute;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  z-index: var(--z-toast);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Loading Screen ── */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  z-index: 999;
  transition: opacity 0.5s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-primary);
  letter-spacing: var(--ls-wide);
}

.loading-bar {
  width: clamp(200px, 50vw, 400px);
  height: 6px;
  background: var(--color-bg-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.loading-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.loading-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── Animations ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseCount {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.8; }
}

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

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-16px); }
}

@keyframes shake-subtle {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* ── Responsive: Show touch controls on touch devices ── */
@media (hover: none) and (pointer: coarse) {
  .touch-controls,
  .touch-actions {
    display: flex;
  }

  .hud-skills {
    display: none; /* replaced by touch-actions */
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 480px) {
  .inventory-panel {
    width: 100%;
  }

  .inventory-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pause-modal {
    min-width: auto;
    width: 90%;
  }

  .worldmap-container {
    padding: var(--sp-4);
  }

  .wallet-gate {
    padding: var(--sp-6);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Minimap ── */
.hud-minimap {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  width: 220px;
  height: 220px;
  background: rgba(15, 20, 25, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: var(--z-hud);
  pointer-events: none;
}

#minimap-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@media (max-width: 480px) {
  .hud-minimap {
    width: 150px;
    height: 150px;
    bottom: var(--sp-4);
    right: var(--sp-4);
  }
}

/* ============================================================
   Character Select Screen
   ============================================================ */
.charselect {
  position: relative;
  width: min(1000px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.charselect-header {
  text-align: center;
}

.charselect-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-shadow: var(--shadow-glow-green);
  letter-spacing: var(--ls-wide);
  margin: 0;
}

.charselect-subtitle {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}

.charselect-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: stretch;
}

/* ── Live 3D preview ── */
.charselect-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(63, 185, 80, 0.16), transparent 62%),
    linear-gradient(180deg, var(--color-bg-mid), var(--color-bg-dark));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.charselect-canvas {
  width: 100%;
  height: 360px;
  display: block;
  touch-action: none;      /* drag-to-turn owns the gesture */
  cursor: grab;
}

.charselect-canvas:active {
  cursor: grabbing;
}

.charselect-hint {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  pointer-events: none;
}

.charselect-blurb {
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  text-align: center;
  min-height: 3.4em;
}

/* ── Controls column ── */
.charselect-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.charselect-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.charselect-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.charselect-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.charselect-input::placeholder {
  color: var(--color-text-dim);
}

.charselect-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-dim);
}

.charselect-input.has-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-dim);
}

.charselect-error {
  font-size: var(--fs-sm);
  color: var(--color-danger);
  min-height: 1.2em;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.charselect-error.is-visible {
  opacity: 1;
}

/* ── Roster cards ── */
.charselect-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.charselect-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-4);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform var(--transition-spring);
}

.charselect-card:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary-active);
  transform: translateY(-2px);
}

.charselect-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.charselect-card.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-dim);
  box-shadow: var(--shadow-glow-green);
}

.charselect-card-gender {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.charselect-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

.charselect-card-name {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.charselect-confirm {
  width: 100%;
  margin-top: auto;
}

/* ── Narrow screens: stack preview above controls ── */
@media (max-width: 860px) {
  .charselect {
    padding: var(--sp-5);
    gap: var(--sp-5);
  }

  .charselect-title {
    font-size: var(--fs-2xl);
  }

  .charselect-body {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .charselect-canvas {
    height: 260px;
  }

  .charselect-blurb {
    min-height: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }

  .charselect-confirm {
    margin-top: var(--sp-2);
  }
}

@media (max-width: 420px) {
  .charselect-roster {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Landing Page
   ============================================================ */
.landing {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  transition: opacity var(--transition-slow);
}

.landing.active {
  opacity: 1;
  pointer-events: auto;
}

/* Live diorama sits behind everything and never eats a click. */
/* ── Hero key art ──
   Three plates stacked in place, one visible at a time. Cross-fading
   opacity rather than swapping a src keeps the change from flashing the
   page background between images. */
.landing-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--color-bg-dark);
}

.landing-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  /* A slow drift stops a still image from reading as a dead screenshot. */
  transform: scale(1.06);
  will-change: opacity;
}

.landing-slide.is-active { opacity: 1; animation: hero-drift 22s ease-in-out infinite alternate; }

@keyframes hero-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-slide.is-active { animation: none; transform: scale(1.02); }
  .landing-slide { transition: opacity 0.4s linear; }
}

.landing-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Only as dark as the copy needs. The scrim is here to make the hero text
     readable, not to hide the art it sits on. */
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(6, 10, 8, 0.52), transparent 76%),
    linear-gradient(180deg, rgba(9, 13, 11, 0.58) 0%, rgba(9, 13, 11, 0.28) 38%, rgba(13, 17, 23, 0.92) 100%);
}

.landing-content {
  position: relative;
  z-index: 2;
  width: min(1080px, 92vw);
  margin: 0 auto;
  padding: var(--sp-16) 0 var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

/* ── Hero ── */
.landing-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.landing-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgba(212, 160, 37, 0.35);
  background: rgba(212, 160, 37, 0.10);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
}

.landing-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 84px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  color: var(--color-primary);
  text-shadow: 0 0 28px rgba(63, 185, 80, 0.45), 0 4px 18px rgba(0, 0, 0, 0.65);
  margin: 0;
}

.landing-tagline {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 24px);
  color: var(--color-text);
  margin: 0;
}

.landing-desc {
  max-width: 54ch;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
  margin: 0;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-2);
}

/* ── Cards ── */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

/* One card left in the row — cap it so the leaderboard doesn't stretch to
   the full content width and lose its card shape. */
.landing-grid--single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

.landing-card {
  background: rgba(28, 33, 40, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--shadow-lg);
}

.landing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.landing-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-accent);
  margin: 0;
}

.landing-card-sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Wallet ── */
.landing-wallet-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.landing-wallet-list .is-not-installed {
  opacity: 0.72;
}

.landing-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  word-break: break-all;
}

.landing-chip.is-connected {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-dim);
}

.landing-guest-btn {
  width: 100%;
  margin-top: auto;
}

/* ── Leaderboard ── */
.landing-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.landing-board-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  grid-template-areas: "rank name score" "rank meta score";
  align-items: center;
  column-gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: rgba(13, 17, 23, 0.45);
  border: 1px solid transparent;
}

.landing-board-row.is-you {
  border-color: var(--color-primary);
  background: var(--color-primary-dim);
}

.landing-board-rank {
  grid-area: rank;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-dim);
  text-align: center;
}

.landing-board-rank.is-medal-1 { color: #ffd700; }
.landing-board-rank.is-medal-2 { color: #c0c8d0; }
.landing-board-rank.is-medal-3 { color: #cd7f32; }

.landing-board-name {
  grid-area: name;
  font-weight: var(--fw-semi);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-board-wallet {
  color: var(--color-mana);
  font-size: var(--fs-xs);
  margin-left: var(--sp-1);
}

.landing-board-meta {
  grid-area: meta;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.landing-board-score {
  grid-area: score;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.landing-board-empty {
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
}

.landing-board-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

/* ── Footer ── */
.landing-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.landing-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
}

.landing-link:hover {
  color: var(--color-primary);
}

.landing-ca {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  word-break: break-all;
}

@media (max-width: 720px) {
  .landing-content {
    padding: var(--sp-10) 0 var(--sp-8);
    gap: var(--sp-8);
  }

  .landing-actions .ui-btn {
    flex: 1 1 100%;
  }
}

/* ============================================================
   Crypto Landing — Navbar, Wallet Modal, Sections
   ============================================================ */

/* ── Navbar ── */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) clamp(var(--sp-4), 4vw, var(--sp-8));
  padding-top: calc(var(--sp-3) + var(--safe-top));
  background: rgba(13, 17, 23, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(63, 185, 80, 0.18);
}

.landing-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  cursor: pointer;
  margin-right: auto;
}

.landing-nav-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), #1f7a33);
  color: var(--color-bg-dark);
  font-size: var(--fs-md);
  box-shadow: 0 0 16px rgba(63, 185, 80, 0.45);
}

.landing-nav-wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #eafff0, var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-nav-links {
  display: flex;
  gap: var(--sp-5);
}

.landing-nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-crypto);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.landing-nav-link:hover { color: var(--color-primary); }

.landing-nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Connect button — gradient pill, the web3 convention. */
.landing-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  min-height: 40px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-crypto);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: #08130c;
  background: linear-gradient(135deg, #56d364, var(--color-primary) 55%, #1f7a33);
  box-shadow: 0 0 18px rgba(63, 185, 80, 0.40);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.landing-connect-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(63, 185, 80, 0.60);
}

.landing-connect-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.landing-connect-btn.is-connected {
  color: var(--color-primary);
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid var(--color-primary);
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.landing-connect-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

/* ── Wallet modal ── */
.wallet-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(5, 8, 11, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.wallet-modal-overlay.active { opacity: 1; pointer-events: auto; }

.wallet-modal {
  width: min(420px, 100%);
  background: linear-gradient(180deg, #171d26, #10151b);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(63, 185, 80, 0.10);
}

.wallet-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-modal-title {
  font-family: var(--font-crypto);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.wallet-modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: var(--sp-1);
  line-height: 1;
}

.wallet-modal-close:hover { color: var(--color-text); }

.wallet-modal-sub,
.wallet-modal-note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.wallet-modal-note {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

.wallet-modal-list,
.wallet-gate-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Wallet rows carry a status tag on the right. */
.wallet-option { position: relative; justify-content: flex-start; }

.wallet-option-tag {
  margin-left: auto;
  padding-left: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
  opacity: 0.9;
}

.wallet-option.is-not-installed { opacity: 0.78; }

.wallet-connected-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  background: var(--color-primary-dim);
  font-size: var(--fs-sm);
}

.wallet-connected-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
  flex-shrink: 0;
}

.wallet-connected-provider { font-weight: var(--fw-semi); color: var(--color-text); }
.wallet-connected-address {
  margin-left: auto;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.wallet-divider {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--color-border);
  line-height: 0;
  margin: var(--sp-2) 0;
}

.wallet-divider span {
  background: var(--color-bg-dark);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
}

/* ── Landing card modifiers ── */
.landing-card--wallet { justify-content: space-between; }
.landing-card--board  { min-height: 100%; }

.landing-wallet-status:empty { display: none; }
.landing-wallet-status {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── Crypto typography on the hero ── */
/* The game face. Press Start 2P is the pixel font the voxel art has been
   asking for — and a busy battle scene behind it means the title needs a
   HARD dark outline (offset shadows in eight directions), not a soft glow
   alone, or the letterforms melt into the trees. */
.landing-title {
  font-family: 'Press Start 2P', var(--font-wordmark), monospace;
  font-weight: 400;                 /* the face only ships one weight */
  font-size: clamp(26px, 6.2vw, 88px);
  letter-spacing: 0.02em;
  color: #6bff8e;
  text-shadow:
    /* outline */
    3px 3px 0 #0a1f10, -3px 3px 0 #0a1f10, 3px -3px 0 #0a1f10, -3px -3px 0 #0a1f10,
    3px 0 0 #0a1f10, -3px 0 0 #0a1f10, 0 3px 0 #0a1f10, 0 -3px 0 #0a1f10,
    /* drop + glow */
    0 8px 0 rgba(6, 16, 9, 0.85),
    0 0 26px rgba(77, 255, 106, 0.55),
    0 0 60px rgba(77, 255, 106, 0.30);
}

.landing-tagline {
  font-family: var(--font-crypto);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(6, 16, 9, 0.9), 0 4px 16px rgba(0, 0, 0, 0.8);
}

/* Muted gray body copy disappears into the battle scene — near-white with
   a solid shadow is the floor for text sitting on art. */
.landing-desc {
  color: #dbe4dd;
  text-shadow: 0 1px 0 rgba(6, 16, 9, 0.9), 0 3px 12px rgba(0, 0, 0, 0.85);
}

.landing-badge {
  color: #ffd35c;
  border-color: rgba(255, 211, 92, 0.55);
  background: rgba(10, 14, 10, 0.78);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.landing-card-title { font-family: var(--font-crypto); font-weight: 700; }

.landing-section-title {
  font-family: var(--font-crypto);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 var(--sp-6);
}

/* Push content clear of the fixed navbar. */
.landing-content { padding-top: calc(var(--sp-16) + 56px); }

/* ── Stat strip ── */
.landing-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(63, 185, 80, 0.20);
  background: rgba(22, 27, 34, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.landing-stat { text-align: center; }

.landing-stat-value {
  font-family: var(--font-wordmark);
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

.landing-stat-label {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* ── Features ── */
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
}

.landing-feature {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(28, 33, 40, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--transition-fast), transform var(--transition-spring);
}

.landing-feature:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
}

.landing-feature-icon { font-size: var(--fs-2xl); line-height: 1; }

.landing-feature-title {
  font-family: var(--font-crypto);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--sp-3) 0 var(--sp-2);
}

.landing-feature-body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* ── Wordmark elsewhere ── */
.loading-title,
.wallet-gate-title {
  font-family: var(--font-wordmark);
  font-weight: 800;
  letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .landing-nav-links { display: none; }
  .landing-content { padding-top: calc(var(--sp-10) + 56px); }
  .landing-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .landing-connect-btn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
}

.landing-features {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Landing — layout corrections & contract address
   ============================================================ */

/* Hero fills the space under the fixed navbar instead of starting
   underneath it. The nav is ~64px; content clears it explicitly. */
.landing-content {
  /* Fill the viewport: the hero owns the middle, the footer sits at the
     bottom edge. Without this the two blocks stacked at the top and left
     the lower half of the key art as dead space. */
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding-top: calc(56px + clamp(var(--sp-6), 4vh, var(--sp-12)));
  padding-bottom: var(--sp-6);
  gap: 0;
}

.landing-hero {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  /* Larger vertical rhythm on tall screens so the block breathes instead
     of compressing into its old fixed height. */
  gap: clamp(var(--sp-4), 2.4vh, var(--sp-8));
}

.landing-title { margin-bottom: var(--sp-1); }

.landing-desc { max-width: 48ch; }

/* ── Contract address pill ── */
.landing-ca-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(100%, 560px);
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(77, 255, 106, 0.55);
  box-shadow: 0 0 18px rgba(77, 255, 106, 0.22), inset 0 0 0 1px rgba(255,255,255,0.04);
  background: rgba(10, 15, 12, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.landing-ca-label {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #7ff09a;
  text-shadow: 0 0 8px rgba(77, 255, 106, 0.5);
}

/* min-width:0 lets the ellipsis actually engage inside the flex row —
   without it the address forces the pill to overflow its container. */
.landing-ca-value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-size: var(--fs-sm);
  color: var(--color-text);
  user-select: all;            /* one click selects the whole address */
  -webkit-user-select: all;
}

.is-pending .landing-ca-value {
  color: #ffd35c;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-style: normal;
  text-shadow: 0 0 10px rgba(255, 211, 92, 0.45);
  user-select: none;
}

.landing-ca-copy {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  min-height: 32px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-crypto);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #08130c;
  background: var(--color-primary);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.landing-ca-copy:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.landing-ca-copy:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.landing-ca-copy.is-copied { background: var(--color-accent); }

/* Buy sits next to Copy in gold, so the two reads — "take the address" and
   "go spend it" — never get mistaken for one another at a glance. */
.landing-ca-buy {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  min-height: 32px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-crypto);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #1a1206;
  background: var(--color-accent);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.landing-ca-buy:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.landing-ca-buy:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* Pending contract: both actions stay in place but read as not-yet-live,
   so the pill never reflows when the real address lands. */
.is-pending .landing-ca-copy,
.is-pending .landing-ca-buy { opacity: 0.55; }

/* ── Wallet rows (hand-built, not ui-btn) ── */
.wallet-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  min-height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.wallet-option:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.wallet-option:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.wallet-option:disabled { opacity: 0.6; cursor: progress; }

.wallet-option.is-primary {
  border-color: rgba(63, 185, 80, 0.55);
  background: linear-gradient(180deg, rgba(63,185,80,0.16), rgba(63,185,80,0.06));
}

.wallet-option.is-not-installed { opacity: 0.72; }
.wallet-option.is-not-installed:hover { opacity: 1; }

/* Fixed box so an <img> icon can never resize the row. */
.wallet-option-icon {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  border-radius: var(--radius-sm);
  object-fit: contain;
  overflow: hidden;
}

.wallet-option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-semi);
}

.wallet-option-tag {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.wallet-option-tag.is-detected { color: var(--color-primary); }

/* ── Cards: equal height, tighter rhythm ── */
.landing-grid { align-items: stretch; }
.landing-card { height: 100%; }

.landing-card-head { margin-bottom: var(--sp-1); }

.landing-card--board .landing-board { flex: 1 1 auto; }

/* Ghost rows for an empty board. */
.landing-board-row.is-ghost {
  opacity: 0.30;
  grid-template-areas: "rank name score";
}

.landing-board-row.is-ghost .landing-board-score { color: var(--color-text-dim); }

.landing-board-empty {
  padding: var(--sp-4) var(--sp-3) 0;
  border: none;
}

/* Refresh control was nearly invisible against the card. */
.landing-card--board .ui-btn--ghost {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 34px;
  min-height: 34px;
}

.landing-card--board .ui-btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Footer ── */
.landing-footer {
  flex-direction: column;
  gap: var(--sp-3);
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: center;
}

.landing-footer-note {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  text-align: center;
}

@media (max-width: 720px) {
  .landing-hero { min-height: auto; }

  .landing-ca-bar {
    width: 100%;
    padding-left: var(--sp-3);
  }

  .landing-ca-label { display: none; }
}

.wallet-option.is-connecting .wallet-option-tag::after {
  content: '…';
  margin-left: 2px;
}

/* ============================================================
   World-Anchored Combat UI — damage numbers & enemy health bars
   ============================================================ */
.worldui-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-nametag);
  pointer-events: none;   /* never steals a click from the game */
  overflow: hidden;
}

/* ── Floating damage numbers ── */
.dmg-number {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
     0 2px 4px rgba(0, 0, 0, 0.9),
     0 0 10px rgba(0, 0, 0, 0.7),
    -1px -1px 0 rgba(0, 0, 0, 0.85),
     1px -1px 0 rgba(0, 0, 0, 0.85),
    -1px  1px 0 rgba(0, 0, 0, 0.85),
     1px  1px 0 rgba(0, 0, 0, 0.85);
}

/* Damage the player DEALS — bright, reads as progress. */
.dmg-number.is-deal {
  font-size: 26px;
  color: #ffe066;
}

/* Damage the player TAKES — red and larger, impossible to miss. */
.dmg-number.is-take {
  font-size: 30px;
  color: #ff5b52;
}

/* Ultimate hits get their own weight. */
.dmg-number.is-crit {
  font-size: 40px;
  color: #ffb02e;
  letter-spacing: var(--ls-wide);
}

.dmg-number.is-heal {
  font-size: 24px;
  color: var(--color-primary);
}

/* ── Enemy health bars ── */
.enemy-hpbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(8, 11, 15, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  overflow: visible;
  will-change: transform;
  transition: opacity var(--transition-fast);
}

/* Undamaged trash mobs dim out so a full arena isn't a wall of bars. */
.enemy-hpbar.is-untouched { opacity: 0.35; }

.enemy-hpbar.is-boss {
  width: 128px;
  height: 9px;
  border-color: var(--color-accent);
  box-shadow: 0 0 10px rgba(212, 160, 37, 0.45);
}

.enemy-hpbar-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #3fb950, #56d364);
  transition: width var(--transition-fast);
}

.enemy-hpbar-fill.is-mid { background: linear-gradient(90deg, #d4a025, #e8b63a); }
.enemy-hpbar-fill.is-low { background: linear-gradient(90deg, #d32f2f, #ff5252); }

.enemy-hpbar.is-boss .enemy-hpbar-fill {
  background: linear-gradient(90deg, #c9302c, #f85149);
}


/* ── Ticker above the contract pill ──
   Pulled out of the pill row so it reads as the token's name rather than
   as a field label. Bright green with a glow: this is the one word on the
   page that has to be legible from across a room. */
.landing-ca-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.landing-ticker {
  font-family: 'Press Start 2P', var(--font-wordmark), monospace;
  font-size: clamp(15px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #5dff7c;
  text-shadow:
    2px 2px 0 #0a1f10, -2px 2px 0 #0a1f10, 2px -2px 0 #0a1f10, -2px -2px 0 #0a1f10,
    0 0 10px rgba(77, 255, 106, 0.95),
    0 0 26px rgba(77, 255, 106, 0.65),
    0 0 54px rgba(77, 255, 106, 0.35);
}

/* The pill sat on its own margin when it was the only element here; inside
   the block the wrapper owns the spacing. */
.landing-ca-block .landing-ca-bar { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ticker-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.82; }
  }
  .landing-ticker { animation: ticker-pulse 2.8s ease-in-out infinite; }
}

/* ── Ghost mode entry ──
   Sits under a divider so it reads as an alternative to playing, not as a
   second wallet option. Muted on purpose: it changes nothing and saves
   nothing, and the button should not promise otherwise. */
.wallet-modal-divider {
  position: relative;
  margin: var(--sp-5) 0 var(--sp-4);
  text-align: center;
}

.wallet-modal-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--color-border);
}

.wallet-modal-divider span {
  position: relative;
  padding: 0 var(--sp-3);
  background: var(--color-surface);
  color: var(--color-text-dim);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wallet-ghost-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.wallet-ghost-btn:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
}

.wallet-ghost-btn small {
  margin-left: auto;
  color: var(--color-text-dim);
  font-weight: 400;
  font-size: var(--fs-xs);
}

/* ── Ghost banner, in-world ── */
.ghost-banner {
  position: fixed;
  /* Below the camp's material counters, which own the same top-centre slot. */
  top: calc(var(--sp-4) + 46px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-pill);
  border: 1px dashed rgba(139, 148, 158, 0.5);
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.ghost-banner.active { display: flex; }
.ghost-banner svg { color: var(--color-text-muted); }

.ghost-banner button {
  padding: var(--sp-1) var(--sp-4);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #08130c;
  font-family: var(--font-crypto);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.ghost-banner button:hover { background: var(--color-primary-hover); }

/* Logo images sit inside the existing mark chips, which were sized for a
   glyph — drop their padding-ish background so the art is the whole mark. */
.landing-nav-mark img,
.page-brand-mark img,
.hud-wordmark-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.landing-nav-mark,
.page-brand-mark { background: transparent !important; border-color: transparent !important; }

/* ── Launch countdown ──
   One quiet line under the contract block. The ticker above it is the loud
   element; this only has to be legible, not to compete. */
.landing-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}

.landing-countdown-label {
  color: #dbe4dd;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  text-shadow: 0 1px 0 rgba(6, 16, 9, 0.9), 0 2px 10px rgba(0, 0, 0, 0.8);
}

.landing-countdown-clock {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #ffd35c;
  text-shadow: 0 0 10px rgba(255, 211, 92, 0.4), 0 1px 0 rgba(6, 16, 9, 0.9);
}

.landing-countdown.is-live .landing-countdown-label {
  color: #5dff7c;
  text-shadow: 0 0 12px rgba(77, 255, 106, 0.7);
}