/* Crypto Heroes — shared stylesheet (index / home / select)
   Direction: READABILITY first. Inter for body text and values;
   Cinzel (dark-fantasy display) only on large headings (>=16px). Stone panels
   and the game map as the backdrop remain. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cinzel:wght@600;700&display=swap');

:root {
  /* stone / depths */
  --abyss:      #0b0e14;
  --abyss-2:    #0e131c;
  --stone:      #161b26;
  --stone-2:    #1d2431;
  --edge:       #2b3447;
  --edge-soft:  #222a39;

  /* torch / fire (warm primary accent) */
  --torch:      #e8a33d;
  --torch-hi:   #f6c977;
  --ember:      #c2502e;

  /* arcane / healing (violet) */
  --arcane:     #8b6fc7;
  --arcane-hi:  #b29ce6;

  /* archer (torch green) */
  --verdant:    #79b46e;

  /* text */
  --bone:       #e6dfd0;
  --ash:        #8a93a6;
  --ash-dim:    #5c6577;

  /* fonts: display only on large headings (>=16px);
     body/values/labels in Inter. --font-px is a compatibility alias for the display font —
     small usages should migrate to --font-ui. */
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-ui:      'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-px:      var(--font-display);

  --shadow:     0 18px 50px -20px rgba(0,0,0,.8);
  --glow-torch: 0 0 30px -6px rgba(232,163,61,.55);
}

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

html, body { height: 100%; }

body {
  background: var(--abyss);
  color: var(--bone);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ---- BACKDROP: the game map as a living background (slow parallax, pixelated) ---- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene .l { position: absolute; left: 0; right: 0; image-rendering: pixelated; background-repeat: repeat-x; }
.scene .l.far   { top: 0; bottom: 0; background-image: url('/assets/map/near.png'); background-size: auto 100%;
  filter: brightness(.34) saturate(.85); animation: sceneDrift 2400s linear infinite; }
.scene .l.mid   { top: 0; bottom: 0; background-image: url('/assets/map/mid.png'); background-size: auto 100%;
  filter: brightness(.4) saturate(.85); animation: sceneDrift 1500s linear infinite; }
.scene .l.fog   { top: 0; bottom: 0; background-image: url('/assets/map/far.png'); background-size: auto 100%;
  filter: brightness(.48); animation: sceneDrift 900s linear infinite; }
.scene .l.trees { bottom: 40px; height: 160px; background-image: url('/assets/map/trees.png'); background-size: auto 100%;
  background-position: 0 bottom; filter: brightness(.5); animation: sceneDrift 460s linear infinite; }
.scene .l.floor { bottom: 0; height: 64px; background-image: url('/assets/map/floor.png'); background-size: auto 64px;
  filter: brightness(.55); box-shadow: inset 0 16px 22px -12px rgba(0,0,0,.85); animation: sceneDrift 300s linear infinite; }
.scene .veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,10,16,.9), rgba(7,10,16,.55) 42%, rgba(7,10,16,.8)); }
@keyframes sceneDrift { from { background-position-x: 0; } to { background-position-x: -24000px; } }

/* atmosphere: torch glow at the top + vignette on the edges */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232,163,61,.10), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, rgba(139,111,199,.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: flicker 6s ease-in-out infinite;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,.7);
  pointer-events: none;
  z-index: 0;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: .86; }
  60%      { opacity: .95; }
  75%      { opacity: .8; }
}

/* ---- content layer ---- */
.shell {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  display: flex;
  flex-direction: column;
}

/* ---- wordmark (pixel) ---- */
.brand {
  font-family: var(--font-px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.brand .hollow { color: var(--bone); text-shadow: 0 3px 0 rgba(0,0,0,.55); }
.brand .delve  { color: var(--torch); text-shadow: 0 3px 0 rgba(0,0,0,.55), var(--glow-torch); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 8px;
}
.topbar .brand { font-size: 20px; }
.topbar .who {
  font-size: 13px; color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.topbar .who b { color: var(--torch-hi); font-weight: 500; }

/* divider with a diamond (threshold / descent) */
.threshold {
  display: flex; align-items: center; gap: 14px;
  color: var(--edge); margin: 18px 0 28px;
}
.threshold::before, .threshold::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}
.threshold .diamond {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--torch); box-shadow: var(--glow-torch);
}

/* ---- eyebrow + title (pixel) ---- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--torch); font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 5px; height: 16px; border-radius: 2px;
  background: var(--torch); box-shadow: 0 0 8px -1px var(--torch); }
h1.title {
  font-family: var(--font-px);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: .02em;
  margin: 10px 0 6px;
  text-shadow: 0 3px 0 rgba(0,0,0,.55);
}
.lede {
  color: var(--ash);
  font-size: 15px;
  max-width: 58ch;
}
.lede em { color: var(--torch-hi); font-style: normal; }

/* ---- buttons (pixel, matching the in-game ones) ---- */
.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 14px;
  border: 2px solid var(--edge);
  background: linear-gradient(180deg, var(--stone-2), var(--stone));
  color: var(--bone);
  padding: 13px 24px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.45);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.btn:hover {
  transform: translateY(-2px);
  border-color: var(--torch);
  box-shadow: var(--glow-torch);
}
.btn:focus-visible { outline: 2px solid var(--torch-hi); outline-offset: 2px; }
.btn.primary {
  background: linear-gradient(180deg, #f0b455, var(--torch));
  border-color: var(--torch-hi);
  color: #2a1c08;
}
.btn.primary:hover { box-shadow: 0 0 34px -6px rgba(232,163,61,.75); }
.btn.ghost { background: transparent; color: var(--ash); }
.btn.ghost:hover { color: var(--bone); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .4; cursor: not-allowed; pointer-events: none;
  transform: none; box-shadow: none; border-color: var(--edge);
}

/* ---- LOGIN ---- */
.login {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px;
}
.login .brand { font-size: clamp(40px, 9vw, 78px); margin-bottom: 4px; }
.login .tag {
  color: var(--ash); font-size: 18px; font-weight: 300; max-width: 44ch;
  margin: 8px 0 30px;
}
.login .actions { display: flex; flex-direction: column; gap: 12px; width: min(320px, 90vw); }
.login .actions .btn { justify-content: center; }
.fineprint { color: var(--ash-dim); font-size: 12px; margin-top: 26px; max-width: 40ch; }

/* ---- HOME (Play / Market) ---- */
.gates { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.gate {
  position: relative;
  border: 2px solid var(--edge);
  background: linear-gradient(180deg, rgba(29,36,49,.92), rgba(14,19,28,.94));
  border-radius: 14px;
  padding: 30px 28px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px; min-height: 180px;
  box-shadow: 0 10px 26px -14px #000, inset 0 0 0 1px rgba(0,0,0,.4);
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.gate:hover { transform: translateY(-3px); border-color: var(--torch); box-shadow: var(--glow-torch), 0 10px 26px -14px #000; }
.gate:focus-visible { outline: 2px solid var(--torch-hi); outline-offset: 2px; }
.gate .gate-eyebrow {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ash);
}
.gate h2 { font-family: var(--font-px); font-size: 30px; font-weight: 700; letter-spacing: .04em;
  text-shadow: 0 3px 0 rgba(0,0,0,.5); display: flex; align-items: center; gap: 12px; }
.gate p { color: var(--ash); font-size: 14px; }
.gate .cta { margin-top: auto; color: var(--torch); font-family: var(--font-ui); font-weight: 600;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.gate.play h2 { color: var(--bone); }
.gate.market { opacity: .9; }
.gate.market .soon {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--arcane-hi); border: 1px solid var(--edge); padding: 3px 9px; border-radius: 6px; background: rgba(8,12,20,.6);
}
.gate .glow {
  position: absolute; inset: auto -40% -60% -40%; height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(232,163,61,.18), transparent 70%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.gate.play:hover .glow { opacity: 1; }

/* ---- HERO SELECTION (the signature screen) ---- */
.roster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px;
}
.hero-card {
  position: relative;
  border: 2px solid var(--edge);
  background: linear-gradient(180deg, rgba(29,36,49,.92), rgba(14,19,28,.95));
  border-radius: 14px;
  padding: 0 0 22px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 10px 26px -14px #000, inset 0 0 0 1px rgba(0,0,0,.4);
  transition: transform .18s ease, border-color .2s ease, box-shadow .25s ease;
  overflow: hidden;
  --hue: var(--torch);
}
.hero-card:hover { transform: translateY(-4px); }
.hero-card:focus-visible { outline: 2px solid var(--hue); outline-offset: 3px; }
.hero-card::before { /* carved corners */
  content: ""; position: absolute; inset: 8px; border-radius: 5px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--hue), var(--hue)) top left,
    linear-gradient(var(--hue), var(--hue)) top left,
    linear-gradient(var(--hue), var(--hue)) top right,
    linear-gradient(var(--hue), var(--hue)) top right,
    linear-gradient(var(--hue), var(--hue)) bottom left,
    linear-gradient(var(--hue), var(--hue)) bottom left,
    linear-gradient(var(--hue), var(--hue)) bottom right,
    linear-gradient(var(--hue), var(--hue)) bottom right;
  background-size: 14px 1px, 1px 14px;
  background-repeat: no-repeat;
  background-position:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right;
  opacity: .35; transition: opacity .25s ease; pointer-events: none;
}
.hero-card:hover::before { opacity: .9; }

/* emblem / portico */
.hero-emblem {
  position: relative;
  height: 168px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 90% at 50% 35%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.2), transparent);
}
.hero-emblem svg { width: 78px; height: 78px; color: var(--hue);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--hue) 55%, transparent)); }
.hero-emblem .ring {
  position: absolute; width: 128px; height: 128px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--hue) 40%, transparent);
  opacity: .5; transition: transform .3s ease, opacity .3s ease;
}
.hero-card:hover .hero-emblem .ring { transform: scale(1.12); opacity: .9; }

.hero-body { padding: 0 18px; }
.hero-name {
  font-family: var(--font-px); font-weight: 700; font-size: 24px;
  letter-spacing: .03em; margin-top: 4px; text-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.hero-role {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--hue); margin-top: 2px;
}
.hero-flavor { color: var(--ash); font-size: 13px; margin: 12px 4px 16px; min-height: 58px; }

/* affinity bars (indicative values, styled independently of the stats system) */
.affinity { display: flex; flex-direction: column; gap: 7px; text-align: left; padding: 0 4px; }
.aff-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.aff-row span { font-family: var(--font-ui); font-size: 12px; letter-spacing: .08em; color: var(--ash); text-transform: uppercase; }
.aff-bar { height: 5px; border-radius: 3px; background: var(--edge-soft); overflow: hidden; }
.aff-bar i { display: block; height: 100%; background: var(--hue); border-radius: 3px; }

/* selected state */
.hero-card.selected {
  border-color: var(--hue);
  box-shadow: 0 0 0 1px var(--hue), 0 0 36px -8px color-mix(in srgb, var(--hue) 70%, transparent);
}
.hero-card.selected::before { opacity: 1; }
.hero-card .seal {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hue); color: #14110a;
  opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease;
  font-size: 14px;
}
.hero-card.selected .seal { opacity: 1; transform: scale(1); }

/* selection action footer */
.confirm-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 30px; flex-wrap: wrap;
}
.confirm-bar .hint { color: var(--ash); font-size: 15px; font-family: var(--font-ui); }
.confirm-bar .hint b { color: var(--torch-hi); font-weight: 700; }

/* hue per class */
.hero-card[data-hero="tank"]   { --hue: var(--torch); }
.hero-card[data-hero="priest"] { --hue: var(--arcane); }
.hero-card[data-hero="archer"] { --hue: var(--verdant); }

/* ---- entrance (staggered fade up) ---- */
.rise { opacity: 0; transform: translateY(14px); animation: rise .6s ease forwards; }
.rise.d1 { animation-delay: .05s; }
.rise.d2 { animation-delay: .14s; }
.rise.d3 { animation-delay: .23s; }
.rise.d4 { animation-delay: .32s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* errors / simple toasts */
.note { font-size: 13px; color: var(--ember); min-height: 18px; margin-top: 8px; }

/* responsive */
@media (max-width: 720px) {
  .roster { grid-template-columns: 1fr; }
  .gates  { grid-template-columns: 1fr; }
  .hero-flavor { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .scene .l { animation: none; }
  .rise { animation: none; opacity: 1; transform: none; }
  .btn:hover, .gate:hover, .hero-card:hover { transform: none; }
}