/* Evertrail Idle client · design tokens, scaling, typography and backdrop.
   The UI is authored at a 1920×1080 reference (1rem = 16px) and scales with the
   viewport like a native game client; players can nudge it with --ui-user-scale. */
:root {
  color-scheme: dark;
  --ui-user-scale: 1;

  /* Surfaces */
  --ink-0: #05080e;
  --ink-1: #0a101b;
  --ink-2: #0f1827;
  --ink-3: #162338;
  --ink-4: #1f3050;
  --glass-top: rgba(22, 36, 60, .8);
  --glass-bottom: rgba(9, 15, 27, .88);
  --glass-flat: rgba(12, 19, 32, .9);
  --well-top: #1a2840;
  --well-bottom: #080d16;

  /* Gilded metal */
  --gold-0: #fff6d6;
  --gold-1: #ffe7a6;
  --gold-2: #f2c66a;
  --gold-3: #c9953f;
  --gold-4: #8a6228;
  --gold-5: #4d3616;
  --edge: rgba(214, 170, 96, .34);
  --edge-soft: rgba(214, 170, 96, .16);
  --edge-strong: rgba(242, 198, 106, .75);

  /* Text */
  --text-1: #f7eed9;
  --text-2: #cdc3aa;
  --text-3: #938d7d;
  --text-4: #626470;

  /* States */
  --emerald: #58d67f;
  --emerald-2: #2f9a52;
  --emerald-3: #17502c;
  --ember: #ff8f4f;
  --crimson: #ff5d57;
  --crimson-2: #a62a27;
  --azure: #66c6ff;
  --violet: #b98dff;

  /* Rarity */
  --rar-common: #d9d3c3;
  --rar-uncommon: #7fdc8c;
  --rar-crafted: #6fe39a;
  --rar-rare: #5db4ff;
  --rar-epic: #c38cff;
  --rar-legendary: #ffb347;

  /* Type */
  --font-display: "Sitka Banner", "Sitka Heading", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --top: 4rem;
  --left: 15.75rem;
  --right: 23.5rem;
  --gap: .625rem;
  --pad: .75rem;
  --radius: .625rem;
  --radius-sm: .375rem;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-panel: 0 .75rem 2rem rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .55);
  --skill: var(--gold-2);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: clamp(11px, calc(min(.8333vw, 1.4815vh) * var(--ui-user-scale)), 22px);
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink-0);
  color: var(--text-1);
  font: 400 .875rem/1.45 var(--font-ui);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea { user-select: text; -webkit-user-select: text; }
img { max-width: 100%; -webkit-user-drag: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: var(--gold-1); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }
::selection { background: rgba(242, 198, 106, .35); color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Scrollbars that belong in a game frame */
* { scrollbar-width: thin; scrollbar-color: rgba(214, 170, 96, .45) transparent; }
::-webkit-scrollbar { width: .5rem; height: .5rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-4), var(--gold-5)); border-radius: 1rem; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--gold-3), var(--gold-4)); background-clip: padding-box; }

.ia-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ia-emblem { width: 1.5rem; height: 1.5rem; flex: none; overflow: visible; filter: drop-shadow(0 .08rem .08rem rgba(0, 0, 0, .55)); }
.ia-glyph { width: 1rem; height: 1rem; flex: none; }

/* Typography helpers */
.t-display { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
.t-caps { text-transform: uppercase; letter-spacing: .14em; font-size: .6875rem; font-weight: 700; }
.t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.t-gold {
  background: linear-gradient(180deg, var(--gold-0) 0%, var(--gold-1) 35%, var(--gold-2) 62%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8));
}
.t-muted { color: var(--text-3); }
.t-good { color: var(--emerald); }
.t-bad { color: var(--ember); }

/* ---------------------------------------------------------------- Backdrop */
.ia-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0a1220; pointer-events: none; }
.ia-backdrop-art {
  position: absolute; left: 50%; top: 50%;
  width: max(104vw, 185vh); aspect-ratio: 1;
  translate: -50% -50%;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  filter: blur(3px) saturate(1.12) brightness(1);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out), scale 12s linear;
  scale: 1.02;
}
.ia-backdrop-art.is-current { opacity: 1; scale: 1.06; }
.ia-backdrop-art[data-sheet="oldwood"] { background-image: url(/assets/oldwood-worlds.webp); }
.ia-backdrop-art[data-sheet="bright"] { background-image: url(/assets/bright-worlds-v1.webp); }
.ia-backdrop-art[data-cell="0"] { background-position: 0 0; }
.ia-backdrop-art[data-cell="1"] { background-position: 100% 0; }
.ia-backdrop-art[data-cell="2"] { background-position: 0 100%; }
.ia-backdrop-art[data-cell="3"] { background-position: 100% 100%; }
.ia-backdrop-art[data-tint="infernal"] { filter: blur(3px) sepia(.6) saturate(2.4) hue-rotate(-28deg) brightness(.55); }
.ia-backdrop-art[data-tint="birch"] { filter: blur(3px) sepia(.45) saturate(1.5) hue-rotate(-6deg) brightness(.7); }
.ia-backdrop-art[data-tint="mangrove"] { filter: blur(3px) sepia(.4) saturate(1.3) hue-rotate(140deg) brightness(.48); }
.ia-backdrop-art[data-tint="frostpine"] { filter: blur(3px) saturate(.55) hue-rotate(175deg) brightness(.62); }
.ia-backdrop-art[data-tint="mahogany"] { filter: blur(3px) sepia(.55) saturate(1.9) hue-rotate(-20deg) brightness(.5); }
.ia-backdrop-art[data-tint="starwood"] { filter: blur(3px) saturate(1.5) hue-rotate(215deg) brightness(.42); }
.ia-backdrop-art[data-tint="essence"] { filter: blur(3px) saturate(1.1) hue-rotate(235deg) brightness(.66); }
.ia-backdrop-art[data-tint="moonwood"] { filter: blur(3px) saturate(.7) hue-rotate(200deg) brightness(.5); }
.ia-backdrop-art[data-tint="stormpine"] { filter: blur(3px) sepia(.45) saturate(1.5) hue-rotate(-35deg) brightness(.48); }
.ia-backdrop-art[data-tint="elderwillow"] { filter: blur(3px) sepia(.5) saturate(1.6) hue-rotate(-14deg) brightness(.5); }
.ia-backdrop-art[data-tint="iron"] { filter: blur(3px) sepia(.55) saturate(1.7) hue-rotate(-22deg) brightness(.56); }
.ia-backdrop-art[data-tint="tin"] { filter: blur(3px) sepia(.2) saturate(.6) hue-rotate(10deg) brightness(.66); }
.ia-backdrop-art[data-tint="coal"] { filter: blur(3px) saturate(.55) hue-rotate(195deg) brightness(.42); }
.ia-backdrop-art[data-tint="silver"] { filter: blur(3px) saturate(.45) hue-rotate(165deg) brightness(.72); }
.ia-backdrop-art[data-tint="deepiron"] { filter: blur(3px) sepia(.7) saturate(2.6) hue-rotate(-34deg) brightness(.45); }
.ia-backdrop-art[data-tint="cobalt"] { filter: blur(3px) saturate(1.8) hue-rotate(195deg) brightness(.5); }
.ia-backdrop-art[data-tint="aetherstone"] { filter: blur(3px) saturate(1.25) hue-rotate(228deg) brightness(.44); }
.ia-backdrop-art[data-tint="stormsilver"] { filter: blur(3px) saturate(.85) hue-rotate(248deg) brightness(.4); }
.ia-backdrop-art[data-tint="dawnsteel"] { filter: blur(3px) sepia(.55) saturate(1.8) hue-rotate(-12deg) brightness(.62); }
.ia-backdrop-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 50% 45%, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, .28) 58%, rgba(3, 5, 10, .72) 100%),
    linear-gradient(180deg, rgba(5, 9, 16, .42), rgba(5, 9, 16, .12) 28%, rgba(5, 9, 16, .38));
}
.ia-backdrop-tint { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--skill) 14%, transparent), transparent 70%); mix-blend-mode: soft-light; transition: background 1s; }
.ia-particles { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

/* Low detail: the painted backdrop stays sharp instead of blurred, and nothing loops a shine. */
.graphics-low .ia-backdrop-art { filter: saturate(1.05) brightness(.9); transition: opacity .4s; }
.graphics-low .ia-backdrop-art[data-tint]:not([data-tint=""]) { filter: brightness(.6); }
.graphics-low .ia-particles { display: none; }
.graphics-low .bar > i::after { animation: none; display: none; }