/* ============================================================
   JADE DYNASTY IMMORTAL — FROST CODE
   Sister design system to Carnage's Frost Code.
   Variable NAMES preserved (e.g. --ember-orange) so any cjd-ember-*.css
   can be ported by swapping this tokens import. VALUES are ice-palette.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel+Display:wght@600;700;900&family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Crimson+Pro:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Ma+Shan+Zheng&display=swap");

:root {
  /* ───── COLORS — surfaces (cool blue-black) ───── */
  --surface-deep:    #060912;
  --panel-surface:   #0C1220;
  --panel-elevated:  #131A2C;
  --panel-sunken:    #04070D;

  /* ───── COLORS — text ───── */
  --text-primary:    #ECEEF2;   /* off-white body */
  --text-secondary:  #B8C4D4;   /* muted bluish-gray */
  --text-muted:      #5A6478;
  --text-inverse:    #060912;
  --text-divine:     #FFFFFF;   /* pure white — divine emphasis */

  /* ───── COLORS — "imperial reds" remapped to imperial sapphire (royal) ───── */
  --imperial-red:    #2865B5;   /* royal sapphire CTA */
  --mid-red:         #1E4F92;   /* hover */
  --deep-oxblood:    #0B1F44;   /* frame backplate */
  --vermillion:      #4A8FD0;   /* seal accent */

  /* ───── COLORS — REAL GOLD (divine ornament) ───── */
  --antique-gold:    #D4A85A;   /* warm divine gold — borders, ornaments, headings */
  --highlight-gold:  #F4DDA0;   /* bright divine gold — glows, hover */
  --shadow-gold:     #7A5A2A;   /* deep gold inset */
  --pale-gold:       #E8C880;   /* mid gold for inline accents */

  /* ───── COLORS — "ember accents" remapped to ice-cyan (action / heat) ───── */
  --ember-orange:    #5BC8F0;   /* ice-cyan action accent (slightly warmer-leaning cool) */
  --ember-bright:    #7AD9F8;   /* bright */
  --ember-deep:      #2A92C8;   /* deep cyan */

  /* ───── COLORS — semantic ───── */
  --online-green:    #00E676;
  --warning-amber:   #CC8844;
  --danger-red:      #FF6666;
  --offline-gray:    #3D4F62;

  /* ───── COLORS — rank tiers (cool-tinted) ───── */
  --rank-1-gold:     #B8D4F0;
  --rank-2-silver:   #C8D4E0;
  --rank-3-bronze:   #6E9CC4;

  /* ───── TYPOGRAPHY (identical to Ember) ───── */
  --font-display:   "Cinzel Display", "Cinzel", "Trajan Pro", serif;
  --font-headings:  "Cormorant Garamond", "EB Garamond", serif;
  --font-body:      "Crimson Pro", "Crimson Text", Georgia, serif;
  --font-sans:      "Inter", system-ui, -apple-system, sans-serif;
  --font-chinese:   "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
  --font-numerals:  "Cinzel", "Cinzel Display", serif;

  --type-hero:       4rem;
  --type-h1:         3rem;
  --type-h2:         2rem;
  --type-h3:         1.5rem;
  --type-h4:         1.25rem;
  --type-body-lg:    1.05rem;
  --type-body:       0.95rem;
  --type-small:      0.825rem;
  --type-label:      0.75rem;
  --type-micro:      0.65rem;

  --tracking-titling:  0.08em;
  --tracking-caps:     0.16em;
  --tracking-tight:    -0.01em;
  --tracking-loose:    0.04em;

  /* ───── SPACING (identical) ───── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ───── BORDERS & RADII ───── */
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     6px;
  --radius-pill:   999px;
  --border-gold:   1px solid var(--antique-gold);
  --border-double: 2px double var(--antique-gold);
  --border-hair:   1px solid rgba(212, 168, 90, 0.35);

  /* ───── SHADOWS / GLOWS (gold + cyan + sapphire mix) ───── */
  --shadow-panel:    0 8px 32px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.85);
  --shadow-deep:     0 24px 64px rgba(0, 0, 0, 0.85);
  --glow-ember:      0 0 24px rgba(91, 200, 240, 0.45);                /* cyan action glow */
  --glow-ember-soft: 0 0 12px rgba(91, 200, 240, 0.25);
  --glow-gold:       0 0 18px rgba(244, 221, 160, 0.50);               /* divine gold halo */
  --glow-divine:     0 0 28px rgba(255, 255, 255, 0.40), 0 0 12px rgba(244, 221, 160, 0.45);
  --inset-oxblood:   inset 0 2px 8px rgba(11, 31, 68, 0.6);
  --text-glow-gold:  0 0 10px rgba(244, 221, 160, 0.55), 0 0 2px rgba(244, 221, 160, 0.7);
  --text-glow-ember: 0 0 12px rgba(91, 200, 240, 0.55), 0 1px 0 rgba(0, 0, 0, 0.8);
  --text-glow-divine: 0 0 16px rgba(255, 255, 255, 0.65), 0 0 4px rgba(244, 221, 160, 0.85);

  /* ───── MOTION (identical) ───── */
  --ease-ember:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ceremonial: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:     180ms;
  --dur-base:      280ms;
  --dur-slow:      520ms;
  --dur-grand:     900ms;

  /* ───── LAYERS ───── */
  --z-bg:        0;
  --z-content:   10;
  --z-overlay:   100;
  --z-modal:     1000;
  --z-toast:     2000;
}

html {
  background: var(--surface-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--surface-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.55;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-hero);
  letter-spacing: var(--tracking-titling);
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  line-height: 1.05;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h2);
  letter-spacing: var(--tracking-titling);
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-gold);
  line-height: 1.15;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: var(--type-h3);
  color: var(--antique-gold);
  letter-spacing: var(--tracking-loose);
  line-height: 1.25;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: var(--type-h4);
  color: var(--text-primary);
  letter-spacing: var(--tracking-loose);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--antique-gold);
  font-weight: 600;
}

.label-caps {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}

.tagline {
  font-family: var(--font-headings);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-h4);
  color: var(--text-primary);
  letter-spacing: var(--tracking-loose);
}

.numerals {
  font-family: var(--font-numerals);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
}

.brush-cn {
  font-family: var(--font-chinese);
  color: var(--ember-orange);
  text-shadow: var(--text-glow-ember);
}

a {
  color: var(--antique-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(80, 160, 212, 0.35);
  transition: color var(--dur-quick) var(--ease-ember),
              border-color var(--dur-quick) var(--ease-ember);
}
a:hover {
  color: var(--highlight-gold);
  border-bottom-color: var(--highlight-gold);
}

code, kbd, samp {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  color: var(--ember-orange);
  background: var(--panel-sunken);
  padding: 0.1em 0.35em;
  border: 1px solid rgba(80, 160, 212, 0.2);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--imperial-red);
  color: var(--highlight-gold);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel-sunken); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--antique-gold), var(--ember-deep));
  border: 2px solid var(--surface-deep);
  border-radius: var(--radius-pill);
}

/* ============================================================
   FROST PAGE LOADER — full-screen overlay shown briefly on every page load.
   Cyan/gold rotating ring with the Jaden token at the core. JS adds .loaded
   on window.load to fade out; CSS failsafe also fades after 2.5s in case
   JS never fires.
   ============================================================ */
@property --pl-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.page-loader {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(11, 31, 68,.92) 0%, rgba(6, 9, 18,.99) 70%),
    var(--surface-deep, #060912);
  pointer-events: auto;
  opacity: 1;
  animation: page-loader-failsafe 2.6s ease-out 1.8s forwards;
}
.page-loader.loaded {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .55s ease-out, visibility 0s linear .55s;
  animation: none;
}
@keyframes page-loader-failsafe {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.page-loader__ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--pl-angle, 0deg),
    rgba(91, 200, 240,.95)   0deg,
    rgba(244, 221, 160,1)    90deg,
    rgba(91, 200, 240,.95)  180deg,
    rgba(244, 221, 160,1)   270deg,
    rgba(91, 200, 240,.95)  360deg
  );
  -webkit-mask: radial-gradient(circle at center, transparent 36px, black 37px);
          mask: radial-gradient(circle at center, transparent 36px, black 37px);
  animation: page-loader-spin 1.4s linear infinite;
  filter: drop-shadow(0 0 22px rgba(91, 200, 240,.55)) drop-shadow(0 0 14px rgba(244, 221, 160,.4));
}
@keyframes page-loader-spin { to { --pl-angle: 360deg; } }
@supports not (background: paint(something)) {
  /* Fallback for browsers without @property — solid border spin */
  .page-loader__ring {
    background: none;
    border: 4px solid rgba(91, 200, 240,.25);
    border-top-color: rgba(244, 221, 160,1);
    border-right-color: rgba(91, 200, 240,1);
    -webkit-mask: none; mask: none;
    animation: page-loader-spin-fallback 1.2s linear infinite;
  }
  @keyframes page-loader-spin-fallback {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
}

.page-loader__core {
  position: absolute;
  width: 56px; height: 56px;
  background: url("../img/cjd_frost/jaden_token@desktop.png") center/contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(91, 200, 240,.7)) drop-shadow(0 0 8px rgba(244, 221, 160,.5));
  animation: page-loader-core-pulse 1.6s ease-in-out infinite;
}
@keyframes page-loader-core-pulse {
  0%, 100% { transform: scale(.94); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

.page-loader__label {
  position: absolute;
  bottom: calc(50% - 110px);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--antique-gold, #D4A85A);
  text-shadow: 0 0 12px rgba(244, 221, 160,.4);
  opacity: .85;
  animation: page-loader-label-fade 1.6s ease-in-out infinite;
}
@keyframes page-loader-label-fade {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__ring,
  .page-loader__core,
  .page-loader__label { animation: none; }
  .page-loader { animation: page-loader-failsafe .4s linear .2s forwards; }
}