/* ═══════════════════════════════════════════════════════════════════════════
   World of Clashes — "WORLD AXIS" theme layer  (loads AFTER styles.css)
   Based on the reference scene wocbgv3.png:
       LEFT  = dark gothic Moon City (violet + ember/lava)
       MIDDLE= golden Najd sand + the Kahf cave-seal
       RIGHT = shining Sun City (sky-blue + gold + water)
   Purely additive: retints the existing glass + background, adds pixel-art
   framing and set-pieces. Nothing structural is removed.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* zone accents */
  --z-dark-1:  #9b6dff;   /* moon violet      */
  --z-dark-2:  #ff5a1e;   /* lava ember       */
  --z-sand-1:  #e8c170;   /* najd sand        */
  --z-sand-2:  #ffd700;   /* gold             */
  --z-light-1: #64c7f5;   /* sky / water      */
  --z-light-2: #ffcf4a;   /* sun gold         */
  --ink-2:     #0a0718;
}

/* ── 1. WORLD-AXIS BACKDROP ──────────────────────────────────────────────────
   .aurora (existing fixed layer) becomes the soft colour field of the world:
   dark-violet+ember on the left, warm sand in the middle, sky-blue+gold right. */
body { background: #0c0a1c; }

/* aurora sits BEHIND the painted world (z-index:-1) as a translucent colour field,
   stronger on the shiny right (sky-blue + a near-white highlight) per the reference. */
.aurora {
  z-index: -1 !important;
  background:
    radial-gradient(900px 760px at 6% 26%,  rgba(155,109,255,.26), transparent 60%),
    radial-gradient(760px 680px at 12% 74%, rgba(255,80,28,.16),   transparent 58%),
    radial-gradient(1000px 900px at 50% 84%, rgba(232,193,112,.15), transparent 62%),
    radial-gradient(980px 820px at 94% 24%, rgba(90,185,255,.34),  transparent 60%),
    radial-gradient(560px 480px at 90% 30%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(760px 680px at 88% 68%, rgba(120,210,255,.22), transparent 58%),
    linear-gradient(100deg, rgba(27,15,48,.60) 0%, rgba(36,19,52,.48) 22%, rgba(43,35,54,.32) 46%, rgba(47,42,49,.28) 55%, rgba(40,42,62,.4) 74%, rgba(32,48,78,.56) 100%) !important;
  filter: blur(42px);
  opacity: .9;
  will-change: transform;
}
/* translate-only drift (no scale) so the heavy blur isn't re-rasterised every frame */
@keyframes auroraDrift {
  from { transform: translate3d(-1.4%, -1%, 0); }
  to   { transform: translate3d(1.4%, 1.2%, 0); }
}

/* the painted world itself — now prominent, on its own compositor layer */
.worldbg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('assets/web_world_bg.jpg?v=2') center 16% / cover no-repeat;
  opacity: .5;
  transform: translateZ(0); will-change: transform; contain: strict;
}
.worldbg::after {            /* scrim: keep the castles legible up top, darken the foot for text */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,28,.46) 0%, rgba(12,10,28,.20) 24%, rgba(12,10,28,.16) 54%, rgba(12,10,28,.42) 80%, rgba(12,10,28,.84) 100%);
}
@media (max-width: 760px){ .worldbg{ opacity:.6; background-position:center top; } }
/* PC only: native widescreen panorama — no portrait crop (mobile rule above is untouched) */
@media (min-width: 761px){ .worldbg{ background-image:url('assets/web_world_pano.jpg?v=2'); background-position:center 32%; opacity:.6; } }

/* ── 2. ZONE-TINTED GLASS ────────────────────────────────────────────────────
   Add z-dark / z-sand / z-light to ANY .glass or .glass-frame to retint it to
   its side of the world. Works by re-setting the glass vars locally. */
.z-dark.glass, .z-dark.glass-frame {
  --glass-bg: linear-gradient(150deg, rgba(155,109,255,.20), rgba(58,16,42,.12) 46%, rgba(255,90,30,.07));
  --glass-bd: rgba(176,124,255,.40);
  box-shadow: 0 16px 52px rgba(6,2,16,.6), 0 0 40px rgba(155,109,255,.14),
              inset 0 1px 0 rgba(255,255,255,.20);
}
.z-sand.glass, .z-sand.glass-frame {
  --glass-bg: linear-gradient(150deg, rgba(255,212,120,.18), rgba(120,90,40,.10) 46%, rgba(255,255,255,.03));
  --glass-bd: rgba(232,193,112,.42);
  box-shadow: 0 16px 52px rgba(6,2,16,.55), 0 0 40px rgba(232,193,112,.14),
              inset 0 1px 0 rgba(255,255,255,.22);
}
.z-light.glass, .z-light.glass-frame {
  --glass-bg: linear-gradient(150deg, rgba(150,212,255,.18), rgba(255,242,205,.08) 46%, rgba(255,207,74,.07));
  --glass-bd: rgba(120,200,255,.42);
  box-shadow: 0 16px 52px rgba(6,2,16,.55), 0 0 40px rgba(120,200,255,.16),
              inset 0 1px 0 rgba(255,255,255,.24);
}

/* ── 3. PIXEL-ART CORNER FRAMING ─────────────────────────────────────────────
   .framed adds chunky pixel-bracket corners (in the element's zone colour) on
   top of the glass — "more graphy" without losing the frosted look. */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border: 3px solid var(--pf, var(--gold));
  pointer-events: none; opacity: .9;
  image-rendering: pixelated;
}
.framed::before { top: 8px;  left: 8px;  border-right: 0; border-bottom: 0; }
.framed::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.framed.z-dark  { --pf: var(--z-dark-1);  }
.framed.z-sand  { --pf: var(--z-sand-2);  }
.framed.z-light { --pf: var(--z-light-1); }

/* a stronger full pixel-frame ring (square-stepped) for showcase containers */
.pixel-ring {
  border-radius: 10px !important;
  box-shadow:
    0 0 0 2px var(--ink-2),
    0 0 0 4px var(--pf, rgba(255,215,0,.55)),
    0 0 0 6px var(--ink-2),
    0 22px 64px rgba(4,2,14,.6),
    0 0 60px var(--pfg, rgba(255,207,74,.16)) !important;
}
.pixel-ring.z-dark  { --pf: rgba(176,124,255,.7); --pfg: rgba(155,109,255,.2); }
.pixel-ring.z-light { --pf: rgba(120,200,255,.7); --pfg: rgba(120,200,255,.2); }

/* ── 4. VS STRIP — hard world-axis recolour ──────────────────────────────────*/
.vs-strip {
  background:
    linear-gradient(105deg,
      rgba(70,20,110,.55) 0%, rgba(120,30,40,.40) 22%,
      rgba(110,80,40,.30) 46%, rgba(120,90,40,.28) 54%,
      rgba(60,150,210,.50) 78%, rgba(130,205,255,.62) 100%) !important;
  border-top: 1px solid rgba(255,215,0,.18);
  border-bottom: 1px solid rgba(255,215,0,.18);
}

/* ── 5. MORE-GRAPHY SECTION POLISH ───────────────────────────────────────────*/
/* sand-dune divider drawn between major sections */
.wrap { position: relative; }
section + section .wrap::before,
main > section .wrap::before {
  content: ''; position: absolute; top: -2px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent,
              rgba(155,109,255,.5) 12%, rgba(232,193,112,.65) 50%, rgba(120,200,255,.5) 88%, transparent);
  opacity: .5;
}

/* zone cards: thicker pixel border + crisp art */
.zone-card { border-width: 2px !important; }
.zone-card .z-bg { image-rendering: pixelated; image-rendering: crisp-edges; }

/* faction cards lean fully into their side */
.faction-card.f-dark  { --glass-bd: rgba(176,124,255,.45); box-shadow: 0 16px 52px rgba(6,2,16,.6), 0 0 46px rgba(155,109,255,.18); }
.faction-card.f-light { --glass-bd: rgba(255,207,74,.45); box-shadow: 0 16px 52px rgba(6,2,16,.6), 0 0 46px rgba(255,207,74,.18); }

/* class cards: warrior steel / mage frost edge */
.class-card.c-warrior { --glass-bd: rgba(207,214,224,.4);  box-shadow: 0 14px 48px rgba(4,2,14,.55), 0 0 34px rgba(207,214,224,.12); }
.class-card.c-mage    { --glass-bd: rgba(100,199,245,.42); box-shadow: 0 14px 48px rgba(4,2,14,.55), 0 0 34px rgba(100,199,245,.16); }

/* mob tiles + features get a touch more frame presence */
.mob-tile { border-width: 2px !important; }
.mob-tile:hover { box-shadow: 0 18px 56px rgba(4,2,14,.6), 0 0 30px rgba(255,90,30,.18) !important; }
.feature { border-left: 3px solid rgba(255,215,0,.35) !important; }

/* the gold glass-frame gets a stronger world glow */
.glass-frame { box-shadow:
    0 0 0 1px rgba(255,215,0,.16),
    0 26px 76px rgba(4,2,14,.7),
    0 0 64px rgba(255,207,74,.16),
    inset 0 1px 0 rgba(255,255,255,.26) !important; }

/* ── 6. SET-PIECE DIORAMAS (framed pixel-art cities / cave) ───────────────────
   Markup added in index.html; swapped to the OpenAI web_* art once generated. */
.setpiece {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  background: #14112a center/cover no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.setpiece > .sp-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px; font-size: 13px; letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9);
  background: linear-gradient(0deg, rgba(8,6,20,.92) 0%, rgba(8,6,20,.78) 55%, rgba(8,6,20,.32) 100%);
}
/* mobile/base: existing landscape fallbacks (cover) — keeps the mobile view identical */
.setpiece.sp-moon { background-image: url('assets/bg_darkcity.png'); }
.setpiece.sp-sun  { background-image: url('assets/bg_suncity.png');  }
.setpiece.sp-cave { background-image: url('assets/cave_entrance.png'); }
/* PC only: bespoke generated set-pieces on an atmospheric sky */
@media (min-width: 761px){
  .setpiece.sp-moon {
    background-image: url('assets/sp_moon_v2.png?v=1');
    background-size: cover; background-position: center 30%; background-repeat: no-repeat;
  }
  .setpiece.sp-sun {
    background-image: url('assets/sp_sun_v2.png?v=1');
    background-size: cover; background-position: center 35%; background-repeat: no-repeat;
  }
  .setpiece.sp-cave {
    background-image: url('assets/sp_cave_v2.png?v=1');
    background-size: cover; background-position: center 45%; background-repeat: no-repeat;
  }
}

.setpiece-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 760px){ .setpiece-row{ grid-template-columns: 1fr; } }

/* ── 7. REVIEW HARDENING — contrast + compositor isolation ───────────────────*/
/* bare-on-background headings get a protective shadow over the now-visible sand band */
.section-title, .section-sub, .hero-tagline, .hero-sub,
.realms-title, .lore-canon-title, .map-hint, .journey-cap {
  text-shadow: 0 2px 12px rgba(8,6,20,.85);
}
.section-sub { color: #c6bbe8; }   /* lift the muted sub a touch over the sandy mid-band */

/* isolate continuously-swapped sprites onto their own layer so frame swaps
   don't force the frosted-glass cards to re-blur the heavy backdrop each frame */
.f-stage img, .c-stage img, .champ, .walker, #heroWalker, .jinn, .mob-stage img {
  transform: translateZ(0);
}