/* ============================================================
   BASE — design tokens, reset, and elements shared across
   ALL screens (buttons, utilities). If you're adding a new
   color or size, it probably belongs here as a variable.
   ============================================================ */

:root {
  --bg: #14121a;
  --panel: #1f1b29;
  --panel-2: #262038;
  --line: #3a3350;
  --cream: #ede8dc;
  --cream-dim: #a89fc0;
  --mana: #4fc3e8;
  --mana-dim: #2c5e73;
  --gold: #e8b34f;
  --hp: #d64545;
  --mythic: #d63a2a;
  --mythic-dim: #7a1a10;
  --mythic-glow: rgba(214, 58, 42, 0.55);
  --taunt: #7fb069;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  /* Discord provides these variables inside Activities. The env() fallback
     also keeps local browser and iOS standalone testing safe. */
  --safe-top: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-right: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-bottom: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  width: 100%;
  background: radial-gradient(ellipse at top, #201a2c 0%, var(--bg) 60%);
  color: var(--cream);
  font-family: "Inter", sans-serif;
  overflow: hidden;
}

body {
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

.hidden { display: none !important; }
.screen { width: 100%; height: 100%; min-width: 0; min-height: 0; }

/* ---- Buttons ---- */

.btn {
  border: none;
  border-radius: 3px;
  padding: 12px 18px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--mana); outline-offset: 2px; }

.btn-primary { width: 100%; background: linear-gradient(180deg, var(--mana), #2f8fb0); color: #0c1a1f; }
.btn-secondary { background: var(--panel-2); color: var(--cream); border: 1px solid var(--line); flex-shrink: 0; }
.btn-npc { width: 100%; background: linear-gradient(180deg, var(--taunt), #4d7a3a); color: #0d1509; }

.btn-link {
  background: none;
  border: none;
  color: var(--cream-dim);
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
}

.back-link,
.back-link-inline {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(232, 179, 79, 0.32);
  border-radius: 4px;
  background: rgba(13, 9, 20, 0.66);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 239, 190, 0.07), 0 3px 8px rgba(0, 0, 0, 0.24);
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible,
.back-link-inline:hover,
.back-link-inline:focus-visible {
  border-color: var(--gold);
  background: rgba(38, 30, 45, 0.88);
  color: var(--gold);
  outline: none;
}

.shop-header,
.inventory-header,
.trade-header {
  padding: 10px 0 18px;
  border-bottom: 1px solid rgba(232, 179, 79, 0.16);
}