/* =====================================================================
   skin-heaven.css — WO-485 SKIN 3: HEAVEN (pair-03, Jason's original
   login-heaven-members-arena + home-heaven renders)
   Every rule is scoped to html[data-skin="heaven"], so this file is inert
   (and its art is never fetched) unless the saved skin is Heaven.

   Art layers (cut from Jason's pair-03 renders by docs/wo485-heaven/cut.py,
   never stretched — each art box carries the plate's own aspect ratio):
     world-heaven.webp  1320x1646 — the world band of the home render: the
                        golden gate, the three floating islands, the cloud
                        sea. Baked account box removed (mirrored sky), every
                        baked word on the three place plates removed, the
                        baked tagline removed. The gate inscription stays
                        (it is carved scenery). Real place names = HTML text.
     login-scene.webp   1320x525 — the gate / sun / fences band of the login
                        render, cut below all baked titles and above the
                        baked "YOUR WORLD" titles and keypad card.
     cloud-a/-b.webp    two soft-alpha cloud banks cut from the render's own
                        cloud sea: the drifting-cloud motion layers.
   Materials (sampled from the renders): cream sky (#fdf6e8 -> #f1e2c0),
   white-marble panels and keys, gold leaf edges and the gold ENTER bar,
   dark bronze name plaques (#4a3b26), deep glass-green place plates.

   Movement (Heaven's living elements — all separate layers, transform /
   opacity only, never the still itself):
     home:  light rays turning slowly behind the gate (h-rays), water falling
            off the islands (h-fall, two streak layers inside a fixed mask of
            the render's six falls), two cloud banks drifting (h-drift-a/b),
            three gold glints on the buildings (h-glint).
     login: the same gate rays over the scene band (h-rays), two cloud banks
            drifting across the sky (h-drift-a/b), gold motes of light rising
            (h-mote).
   Controls, numbers and words never move. Reduced motion: no motion.
   ===================================================================== */

html[data-skin="heaven"] {
  --apex-bg: #fbf3e2;
  --apex-bg-2: #efe0bf;
  --apex-panel: #fffaf0;
  --apex-panel-edge: #c9a24a;
  --apex-blue: #2d5f9a;
  --apex-purple: #8a6a2a;
  --apex-yellow: #7a5612;          /* accent TEXT on cream: deep gold-brown */
  --apex-cyan: #2a5a94;            /* links / accents: the dome's heaven blue */
  --apex-text: #2e2416;
  --apex-text-dim: #66553b;
  --apex-ok: #2e7d32;
  --apex-warn: #9a5c00;
  --apex-danger: #b3261e;
  --apex-offline: #85775f;
  --apex-line: rgba(160, 120, 40, .3);
  --sheet-solid: #fffaf0;
  --h-cream: #fdf6e8;
  --h-cream-2: #f1e2c0;
  --h-marble: #fffdf8;
  --h-marble-2: #efe6d2;
  --h-gold: #e9c46a;
  --h-gold-deep: #c9a24a;
  --h-gold-dark: #9c7526;
  --h-bronze: #4a3b26;
  --h-bronze-2: #352a1a;
  --h-ink: #2e2416;
  --h-serif: "Trajan Pro", "Cinzel", "Cormorant SC", "Times New Roman", "Liberation Serif", Georgia, serif;
  --h-sign: "Avenir Next Condensed", "Bahnschrift", "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", sans-serif;
  --h-sans: "Lato", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans", sans-serif;
  --font-display: var(--h-sans);   /* the renders set keys, plaques, ENTER in a clean sans; serif = titles only */
  --panel-clip: none;
  --radius: 14px;
  --shadow: 0 6px 16px rgba(120, 90, 30, .18), 0 0 0 1px rgba(201, 162, 74, .45);
  --sitenav-bar: #fffaf0;
  --sitenav-edge: #c9a24a;
  --sitenav-lit: #2e2416;
  --sitenav-pill: #e9c46a;
  accent-color: #9c7526;          /* radios / checkboxes in gold, not system blue */
  color-scheme: light;
}

/* ---------- page backdrop: the cream-gold sky of the renders ---------- */
html[data-skin="heaven"] body {
  color: var(--h-ink);
  background:
    radial-gradient(70vw 40vh at 50% 0, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #fdf6e8 0, #f6ead0 280px, #f1e2c0 560px, #f9f2df 100%) fixed;
}
html[data-skin="heaven"] .candles,
html[data-skin="heaven"] .rocket { display: none !important; }

/* ---------- panels, cards, popups: white marble + gold leaf ----------- */
html[data-skin="heaven"] .panel,
html[data-skin="heaven"] .apex-panel,
html[data-skin="heaven"] .subcard {
  background: linear-gradient(180deg, var(--h-marble), #fbf5e8 45%, var(--h-marble-2));
  border: 2px solid var(--h-gold-deep);
  border-radius: 18px;
  clip-path: none;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(156, 117, 38, .35), 0 10px 24px rgba(120, 90, 30, .16);
  color: var(--h-ink);
}
html[data-skin="heaven"] .apex-panel::before { display: none; }
html[data-skin="heaven"] .panel__head { border-bottom: 1px solid rgba(201, 162, 74, .55); }
html[data-skin="heaven"] .panel__title,
html[data-skin="heaven"] .stopsheet__title { font-family: var(--h-serif); font-weight: 700; color: var(--h-ink); letter-spacing: .02em; }
html[data-skin="heaven"] .subhead { color: var(--apex-yellow); }
html[data-skin="heaven"] a { color: var(--apex-cyan); }

html[data-skin="heaven"] .acctrow,
html[data-skin="heaven"] .worldrow,
html[data-skin="heaven"] .skinpick__row,
html[data-skin="heaven"] .bell__item {
  background: #fffdf8; border: 1.5px solid rgba(201, 162, 74, .7); color: var(--h-ink);
}
html[data-skin="heaven"] .bell__item { border-left: 4px solid var(--apex-warn); }
html[data-skin="heaven"] .soon { background: #fff6dc; border-color: var(--h-gold-deep); }

/* ---------- buttons: marble keys, gold ENTER bar, bronze plaques ------ */
html[data-skin="heaven"] .btn,
html[data-skin="heaven"] .apex-btn {
  background: linear-gradient(180deg, #fffefb, var(--h-marble) 40%, var(--h-marble-2));
  color: var(--h-ink); border: 1.5px solid var(--h-gold-deep); border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(156, 117, 38, .45); clip-path: none; text-shadow: none; font-weight: 700;
}
html[data-skin="heaven"] .btn--primary,
html[data-skin="heaven"] .apex-btn--primary {
  background: linear-gradient(180deg, #f6dc95, var(--h-gold) 50%, #c99a3c);
  color: var(--h-bronze-2); border-color: var(--h-gold-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--h-gold-dark); text-shadow: none;
}
html[data-skin="heaven"] .btn--ghost,
html[data-skin="heaven"] .apex-btn--ghost {
  background: var(--h-cream); color: var(--h-ink); border-color: var(--h-gold-deep); box-shadow: 0 1px 0 var(--h-gold-deep); text-shadow: none;
}
html[data-skin="heaven"] .stopfilter__chip { background: #fffdf8; color: var(--h-ink); border: 1.5px solid var(--h-gold-deep); }
html[data-skin="heaven"] .stopfilter__chip.is-on { background: var(--h-gold); color: var(--h-bronze-2); border-color: var(--h-gold-dark); }
html[data-skin="heaven"] input, html[data-skin="heaven"] select, html[data-skin="heaven"] textarea {
  background: #fffdf8; color: var(--h-ink); border: 1.5px solid var(--h-gold-deep); border-radius: 10px;
}

/* ---------- top bar: cream pills with gold edges, as in the render ---- */
html[data-skin="heaven"] .topbar2 { background: transparent; }
html[data-skin="heaven"] .profile__btn,
html[data-skin="heaven"] .bell__btn,
html[data-skin="heaven"] .gear {
  background: linear-gradient(180deg, #fffdf8, var(--h-cream-2)); color: var(--h-ink);
  /* geometry frozen: 1 px border as Original; the gold rim is an inset shadow */
  border: 1px solid var(--h-gold-deep); box-shadow: inset 0 0 0 1px var(--h-gold-deep), 0 2px 6px rgba(120, 90, 30, .22);
}
html[data-skin="heaven"] .acctbox {
  background: linear-gradient(180deg, #fffdf8, #f8eedb); color: var(--h-ink);
  border: 1px solid var(--h-gold-deep); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--h-gold-deep), 0 3px 8px rgba(120, 90, 30, .22);
}
html[data-skin="heaven"] .acctbox__stop { color: var(--h-ink); font-weight: 800; }
html[data-skin="heaven"] .acctbox__v { color: var(--h-ink); }
html[data-skin="heaven"] .profile__panel,
html[data-skin="heaven"] .bell__panel,
html[data-skin="heaven"] .appmenu__panel,
html[data-skin="heaven"] details > .appmenu__list {
  background: #fffdf8; color: var(--h-ink); border: 2px solid var(--h-gold-deep); border-radius: 14px;
}
/* DEMO / LIVE pill: the render's gold DEMO button; LIVE stays unmistakable */
html[data-skin="heaven"] .modepill { color: var(--h-bronze-2); border-color: var(--h-gold-dark); }
html[data-skin="heaven"] .modepill[data-mode="demo"] { background: linear-gradient(180deg, #f6dc95, var(--h-gold) 55%, #c99a3c); }
html[data-skin="heaven"] .modepill[data-mode="live"] { background: #fde3e0; color: #7a1610; border-color: #b3261e; }
html[data-skin="heaven"] .bookline__label { background: #fffdf8; }

/* ---------- the floating bottom bar: marble board, gold active pill --- */
@media (max-width: 768px) {
  html[data-skin="heaven"] .sitenav--tabs {
    background: linear-gradient(180deg, #fffdf8, var(--h-cream)); border: 1px solid var(--h-gold-deep); border-radius: 22px;
    box-shadow: inset 0 0 0 1px var(--h-gold-deep), 0 -1px 0 rgba(255, 255, 255, .9) inset, 0 10px 26px rgba(120, 90, 30, .28);
  }
  html[data-skin="heaven"] .sitenav--tabs .sitenav__item { color: var(--h-ink); font-weight: 800; }
  html[data-skin="heaven"] .sitenav--tabs .sitenav__item.is-active .sitenav__glyph {
    background: linear-gradient(180deg, #f6dc95, var(--h-gold) 55%, #c99a3c); box-shadow: inset 0 0 0 1.5px var(--h-gold-dark);
  }
}
html[data-skin="heaven"] .sitenav--side { background: #fffdf8; border-right: 2px solid var(--h-gold-deep); }
html[data-skin="heaven"] .sitenav__item { color: var(--h-ink); }

/* ---------- the world: one art plate, places laid on its islands ----- */
html[data-skin="heaven"] .panel.world {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
html[data-skin="heaven"] .world__map {
  display: block; position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1320 / 1646; min-height: 0; padding: 0;
  container-type: inline-size;
  background: #f6ead0 url("../img/skins/heaven/world-heaven.webp") center / cover no-repeat;
  border-radius: 20px; border: 2px solid var(--h-gold-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 8px 22px rgba(120, 90, 30, .22);
  overflow: hidden; isolation: isolate;
}

/* places become hotspots over their islands (all %, of the plate) */
html[data-skin="heaven"] .place {
  position: absolute; display: block; padding: 0; min-height: 0; z-index: 2;
  background: transparent; border: 0; border-radius: 14px; box-shadow: none; color: var(--h-ink);
  transform-origin: 50% 60%;
}
html[data-skin="heaven"] .place.is-zoomed {
  transform: scale(1.05); border: 0;
  box-shadow: 0 0 0 3px rgba(233, 196, 106, .95), 0 0 28px rgba(255, 244, 200, .9);
}
html[data-skin="heaven"] .place__art {
  position: absolute; width: auto; height: auto; border-radius: 12px; background: none; overflow: visible;
}
/* name = real text on the blanked glass-green plate of the render */
html[data-skin="heaven"] .place__name {
  position: absolute; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 0 .3em;
  font-family: var(--h-sign); font-stretch: condensed; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1; white-space: nowrap; overflow: hidden;
  color: #fff3c8; text-shadow: 0 1px 0 #1d2a12, 0 0 6px rgba(0, 0, 0, .55);
  font-size: 3.5cqw;
  background: linear-gradient(180deg, rgba(34, 52, 24, .9), rgba(16, 28, 12, .94));
  border: 1px solid rgba(233, 196, 106, .55); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .35);
}
/* sub = the live line, a small marble tag hanging under the plate */
html[data-skin="heaven"] .place__sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  box-sizing: border-box; max-width: 104%; width: max-content;
  white-space: normal; text-align: center;
  font-size: max(10px, 2.5cqw); font-weight: 700; line-height: 1.2;
  padding: .12rem .5rem; border-radius: 999px;
  background: #fffdf8; color: var(--h-ink); border: 1.5px solid var(--h-gold-deep);
  box-shadow: 0 2px 4px rgba(80, 60, 20, .3);
}

/* Prop Farm — the white temple on the left island */
html[data-skin="heaven"] .place--prop  { left: 2.3%;  top: 34%;   width: 30.3%; height: 34.6%; }
html[data-skin="heaven"] .place--prop .place__art  { left: 11.75%; top: 4.2%; width: 85%; height: 65.6%; }
html[data-skin="heaven"] .place--prop .place__name { left: 15%; top: 75.4%; width: 76%; height: 14%; }
html[data-skin="heaven"] .place--prop .place__sub  { left: 53%; top: 90%; max-width: 100%; }

/* Forex Factory — the cathedral on the centre island */
html[data-skin="heaven"] .place--forex { left: 35.6%; top: 43.7%; width: 31.1%; height: 36.5%; }
html[data-skin="heaven"] .place--forex .place__art  { left: 4.9%; top: 3.3%; width: 90.2%; height: 70%; }
html[data-skin="heaven"] .place--forex .place__name { left: 7.3%; top: 75.8%; width: 85.4%; height: 12.5%; font-size: 3.1cqw; }
html[data-skin="heaven"] .place--forex .place__sub  { left: 50%; top: 89.5%; }

/* Plexy Market — the blue-domed rotunda on the right island */
html[data-skin="heaven"] .place--plexy { left: 68.2%; top: 34%;  width: 30.3%; height: 34.6%; }
html[data-skin="heaven"] .place--plexy .place__art  { left: 3.25%; top: 10.5%; width: 94%; height: 61.4%; }
html[data-skin="heaven"] .place--plexy .place__name { left: 12.5%; top: 75%; width: 78%; height: 14%; font-size: 3.2cqw; }
html[data-skin="heaven"] .place--plexy .place__sub  { left: 51.5%; top: 90%; max-width: 100%; }

/* plexy status sign: a bronze plaque on the cloud sea */
html[data-skin="heaven"] .worldsign {
  right: 3%; bottom: 2.5%; z-index: 3;
  background: linear-gradient(180deg, #5a4930, var(--h-bronze)); color: #fff3d6;
  border: 1.5px solid var(--h-gold-deep); border-radius: 10px; box-shadow: 0 2px 6px rgba(60, 40, 10, .35);
}
html[data-skin="heaven"] .worldsign[data-state="ok"] .worldsign__icon { background: #7ee07e; }
html[data-skin="heaven"] .worldsign[data-state="warn"] .worldsign__icon { background: #ffc94a; }

/* ---------- movement 1: light rays turning behind the gate ------------ */
html[data-skin="heaven"] .world__map::before {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  left: 50.4%; top: 26.1%; width: 92%; aspect-ratio: 1; margin: -46% 0 0 -46%;
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 246, 210, 0) 0deg 7deg, rgba(255, 240, 190, .7) 9deg, rgba(255, 246, 210, 0) 11deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 30%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 30%, transparent 68%);
  mix-blend-mode: screen; opacity: .5;
  animation: h-rays 110s linear infinite;
  will-change: transform;
}
@keyframes h-rays {
  0%   { transform: rotate(0deg);   opacity: .38; }
  50%  { transform: rotate(180deg); opacity: .58; }
  100% { transform: rotate(360deg); opacity: .38; }
}

/* ---------- movement 2: water falling off the islands ----------------
   .world__road is the fall layer: a fixed mask traced on the render's six
   waterfalls (plate coordinates); inside it two streak layers fall at two
   speeds. The mask never moves; the plate never moves. */
html[data-skin="heaven"] .world__road {
  display: block; position: absolute; inset: 0; left: 0; top: 0; bottom: auto;
  width: 100%; height: 100%; margin: 0; border-radius: 0; opacity: .9;
  background: none; overflow: hidden; z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1320 1646' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cpath d='M350 1222h56l10 180h-76z'/%3E%3Cpath d='M412 958h26l6 140h-36z'/%3E%3Cpath d='M175 1122h18l4 96h-26z'/%3E%3Cpath d='M874 962h38l4 176h-46z'/%3E%3Cpath d='M542 1322h16l3 136h-22z'/%3E%3Cpath d='M782 1318h16l3 132h-22z'/%3E%3Cpath d='M916 1202h28l4 146h-36z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1320 1646' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cpath d='M350 1222h56l10 180h-76z'/%3E%3Cpath d='M412 958h26l6 140h-36z'/%3E%3Cpath d='M175 1122h18l4 96h-26z'/%3E%3Cpath d='M874 962h38l4 176h-46z'/%3E%3Cpath d='M542 1322h16l3 136h-22z'/%3E%3Cpath d='M782 1318h16l3 132h-22z'/%3E%3Cpath d='M916 1202h28l4 146h-36z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
html[data-skin="heaven"] .world__road::before,
html[data-skin="heaven"] .world__road::after {
  content: ""; position: absolute; left: 0; right: 0; top: -48px; bottom: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 2px, rgba(255, 255, 255, .55) 3px, rgba(255, 255, 255, 0) 4px 6px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 10px, rgba(255, 255, 255, .85) 22px, rgba(255, 255, 255, 0) 34px 48px);
  background-blend-mode: multiply;
  animation: h-fall .9s linear infinite;
  will-change: transform;
}
html[data-skin="heaven"] .world__road::after {
  left: 3px; opacity: .55; animation-duration: 1.35s;
}
@keyframes h-fall { from { transform: translateY(0); } to { transform: translateY(48px); } }

/* ---------- movement 3: cloud banks drifting over the cloud sea ------- */
html[data-skin="heaven"] .world__map::after {
  content: ""; position: absolute; pointer-events: none; z-index: 1;
  left: -4%; top: 82.6%; width: 31.8%; aspect-ratio: 420 / 286;
  background: url("../img/skins/heaven/cloud-a.webp") center / contain no-repeat;
  opacity: .9;
  animation: h-drift-a 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes h-drift-a { from { transform: translateX(0); } to { transform: translateX(26%); } }
html[data-skin="heaven"] .place--plexy::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  left: 2%; top: 129.8%; width: 90%; aspect-ratio: 360 / 300;
  background: url("../img/skins/heaven/cloud-b.webp") center / contain no-repeat;
  opacity: .85;
  animation: h-drift-b 41s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes h-drift-b { from { transform: translateX(6%); } to { transform: translateX(-24%); } }

/* ---------- movement 4: gold glints on the three buildings ------------ */
html[data-skin="heaven"] .place__art::before {
  content: ""; position: absolute; pointer-events: none;
  width: 9%; aspect-ratio: 1;
  background:
    radial-gradient(circle, #fff 0 12%, rgba(255, 236, 160, .9) 18%, rgba(255, 236, 160, 0) 42%),
    linear-gradient(90deg, transparent 46%, rgba(255, 250, 220, .95) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 250, 220, .95) 50%, transparent 54%);
  opacity: 0; transform: scale(.3);
  animation: h-glint 5.5s ease-in-out infinite;
}
html[data-skin="heaven"] .place--prop .place__art::before  { left: 52%; top: 14%; }
html[data-skin="heaven"] .place--forex .place__art::before { left: 45%; top: 0;   animation-delay: -1.8s; }
html[data-skin="heaven"] .place--plexy .place__art::before { left: 42%; top: 8%;  animation-delay: -3.6s; }
@keyframes h-glint {
  0%, 62%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  74%           { opacity: 1; transform: scale(1) rotate(45deg); }
  86%           { opacity: 0; transform: scale(.4) rotate(90deg); }
}

/* ---------- the travel object: a small gold chariot ------------------- */
html[data-skin="heaven"] .traveller {
  left: -20px; top: -14px; width: 40px; height: 28px; border-radius: 0; z-index: 4;
  box-shadow: none; filter: drop-shadow(0 0 4px rgba(255, 240, 190, .95)) drop-shadow(0 2px 2px rgba(60, 40, 10, .45));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M4 8c5-5 11-5 14-1-5 0-9 2-11 5z' fill='%23fffdf8' stroke='%239c7526' stroke-width='1.2'/%3E%3Cpath d='M12 11h20l-3 9H14z' fill='%23e9c46a' stroke='%234a3b26' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M32 11l4-5' stroke='%234a3b26' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='21' r='5.5' fill='%23fffdf8' stroke='%234a3b26' stroke-width='1.8'/%3E%3Cpath d='M20 15.5v11M14.5 21h11' stroke='%23c9a24a' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- summary sheet: solid marble, gold frame ------------------- */
html[data-skin="heaven"] .stopsheet {
  background: var(--sheet-solid); background-image: none;
  border: 2px solid var(--h-gold-deep); border-radius: 20px; color: var(--h-ink);
  box-shadow: 0 12px 30px rgba(80, 60, 20, .35);
}
html[data-skin="heaven"] .stopsheet::backdrop { background: rgba(60, 46, 24, .62); }

/* ---------- login: cream sky, the gate scene, marble keypad ----------- */
html[data-skin="heaven"] body.page-login {
  background:
    radial-gradient(60vw 30vh at 50% 0, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%) no-repeat,
    linear-gradient(180deg, #fdf6e8 0, #f8eedb 160px, #f1e2c0 340px, #f6ead0 900px, #f9f2df 100%);
}
/* the default arena: its neon parts off; its sky + haze + floor + motes
   become Heaven's backdrop layers (cloud banks drifting, motes of light) */
html[data-skin="heaven"] .arena__aurora,
html[data-skin="heaven"] .arena__city,
html[data-skin="heaven"] .arena__beams,
html[data-skin="heaven"] .arena__ring,
html[data-skin="heaven"] .arena__shards,
html[data-skin="heaven"] .arena__sparks,
html[data-skin="heaven"] .arena__sky::after { display: none !important; }   /* fortnite.css magenta sky tint */
html[data-skin="heaven"] .arena__sky {
  inset: 0; background: radial-gradient(90vw 50vh at 50% -5%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
}
html[data-skin="heaven"] .arena__haze,
html[data-skin="heaven"] .arena__floor {
  position: absolute; inset: auto; height: auto; transform: none; border: 0; box-shadow: none; filter: none;
  -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal; opacity: .8; will-change: transform;
}
html[data-skin="heaven"] .arena__haze {
  top: 9vh; left: -14vw; width: min(78vw, 560px); aspect-ratio: 420 / 286;
  background: url("../img/skins/heaven/cloud-a.webp") center / contain no-repeat;
  animation: h-drift-a 38s ease-in-out infinite alternate;
}
html[data-skin="heaven"] .arena__floor {
  top: auto; bottom: 4vh; left: auto; right: -16vw; width: min(80vw, 560px); aspect-ratio: 360 / 300;
  background: url("../img/skins/heaven/cloud-b.webp") center / contain no-repeat;
  animation: h-drift-b 46s ease-in-out infinite alternate;
}
html[data-skin="heaven"] .arena__motes i {
  background: radial-gradient(circle, #fff 0 30%, #f6dc95 55%, rgba(233, 196, 106, 0) 72%);
  box-shadow: 0 0 10px rgba(233, 196, 106, .9);
  animation: h-mote 16s linear infinite; animation-delay: var(--d);
}
@keyframes h-mote {
  0%   { transform: translateY(0) scale(.6);       opacity: 0; }
  15%  {                                           opacity: .9; }
  80%  {                                           opacity: .6; }
  100% { transform: translateY(-100vh) scale(1.1); opacity: 0; }
}

html[data-skin="heaven"] .page-login .ticker {
  background: rgba(255, 253, 248, .92); color: var(--h-ink); border-bottom: 2px solid var(--h-gold-deep);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-skin="heaven"] .page-login .brand__mark { animation: none; filter: none; }
/* the logo: the render's gold A (inner cut in cream, not the default navy) */
html[data-skin="heaven"] .page-login .brand__mark path:nth-child(1) { fill: #c9a24a; }
html[data-skin="heaven"] .page-login .brand__mark path:nth-child(2) { fill: #fdf6e8; }
html[data-skin="heaven"] .page-login .brand__mark path:nth-child(3) { fill: #fff6d6; opacity: .5; }
html[data-skin="heaven"] .page-login .ticker .apex-chip {
  background: #f3ead6; color: #4a3b26; border: 1.5px solid #a8956e; font-family: var(--h-sans); font-weight: 800; text-shadow: none; box-shadow: none;
}
html[data-skin="heaven"] .page-login .ticker__message { color: #4a3b26; font-family: var(--h-sans); }
html[data-skin="heaven"] .page-login .brand__text strong { color: var(--h-bronze-2); text-shadow: none; font-family: var(--h-serif); font-weight: 700; }
html[data-skin="heaven"] .page-login .brand__text em { color: var(--h-bronze); letter-spacing: .28em; font-style: normal; font-weight: 700; }
html[data-skin="heaven"] .page-login .pitch__title,
html[data-skin="heaven"] .page-login .pitch__title-hero,
html[data-skin="heaven"] .page-login .pitch__title-lead {
  font-family: var(--h-serif); color: var(--h-bronze-2); filter: none; animation: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-text-fill-color: var(--h-bronze-2); background: none;
}
html[data-skin="heaven"] .page-login .pitch__title-hero { color: #7a5612; -webkit-text-fill-color: #7a5612; }
html[data-skin="heaven"] .page-login .pitch__eyebrow { color: #66553b; letter-spacing: .14em; }
html[data-skin="heaven"] .page-login .pitch__lead,
html[data-skin="heaven"] .page-login .pitch__body { color: var(--h-ink); text-shadow: none; }
html[data-skin="heaven"] .page-login .pitch__lead strong,
html[data-skin="heaven"] .page-login .pitch__body strong { color: #7a5612; }
html[data-skin="heaven"] .page-login .perk.apex-panel,
html[data-skin="heaven"] .page-login .quote.apex-panel { filter: none; }
html[data-skin="heaven"] .page-login .perk h2 { color: #7a5612; font-family: var(--h-serif); }
html[data-skin="heaven"] .page-login .perk p,
html[data-skin="heaven"] .page-login .quote { color: var(--h-ink); }

/* the scene band, right above the card (as in the render) */
html[data-skin="heaven"] .page-login .gate { position: relative; padding-top: 250px; }
html[data-skin="heaven"] .page-login .gate::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, 760px); height: 292px; z-index: 0; pointer-events: none;
  background: url("../img/skins/heaven/login-scene.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
}
/* the gate's light: rays turning over the scene's sun (layer, not the still) */
html[data-skin="heaven"] .page-login .gate::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  left: 50%; top: 210px; width: 340px; aspect-ratio: 1; margin: -170px 0 0 -170px;
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 246, 210, 0) 0deg 7deg, rgba(255, 240, 190, .75) 9deg, rgba(255, 246, 210, 0) 11deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 28%, transparent 66%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 28%, transparent 66%);
  mix-blend-mode: screen; opacity: .5;
  animation: h-rays 110s linear infinite;
  will-change: transform;
}
html[data-skin="heaven"] .page-login .gate > * { position: relative; z-index: 1; }
html[data-skin="heaven"] .page-login .login.apex-panel {
  background: linear-gradient(180deg, #fffdf8, #fcf6e8 50%, #f5ead3);
  border: 3px solid var(--h-gold-deep); border-radius: 24px; clip-path: none;
  filter: none; box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--h-gold-dark), 0 18px 36px rgba(90, 64, 20, .28);
  color: var(--h-ink);
}
html[data-skin="heaven"] .page-login .login.apex-panel::before { display: none; }
html[data-skin="heaven"] .page-login .code__slot {
  background: #fffdf8; border: 1.5px solid var(--h-gold-deep); box-shadow: inset 0 1px 3px rgba(120, 90, 30, .18); border-radius: 9px;
  animation: none;
}
html[data-skin="heaven"] .page-login .code__slot.is-filled { background: #fff3cf; border-color: var(--h-gold-dark); }
html[data-skin="heaven"] .page-login .code__slot.is-next { border-color: var(--h-bronze); box-shadow: 0 0 0 2px rgba(233, 196, 106, .6); }
html[data-skin="heaven"] .page-login .code__slot::after { background: var(--h-ink); }
html[data-skin="heaven"] .page-login .keypad .apex-btn--key,
html[data-skin="heaven"] .page-login .keypad .apex-btn--ghost {
  background: linear-gradient(180deg, #ffffff 0, var(--h-marble) 45%, #f1e7d3 100%);
  color: var(--h-ink); border: 1.5px solid var(--h-gold-deep); border-radius: 12px; clip-path: none;
  font-family: var(--h-sans); font-weight: 800; font-size: 1.35rem;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(201, 162, 74, .25), 0 2px 0 rgba(156, 117, 38, .55);
  text-shadow: none;
}
html[data-skin="heaven"] .page-login .keypad .apex-btn--ghost { font-size: 1rem; letter-spacing: .04em; }
html[data-skin="heaven"] .page-login .keypad .apex-btn--key svg { color: var(--h-ink); stroke: currentColor; }
html[data-skin="heaven"] .page-login .keypad .apex-btn--key:hover:not(:disabled) { filter: brightness(1.03); border-color: var(--h-gold-dark); }
html[data-skin="heaven"] .page-login .login__submit {
  background: linear-gradient(180deg, #f6dc95, var(--h-gold) 50%, #c99a3c);
  color: var(--h-bronze-2); border: 2px solid var(--h-gold-dark); border-radius: 16px; clip-path: none;
  font-family: var(--h-sans); font-weight: 900; letter-spacing: .03em; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--h-gold-dark);
}
html[data-skin="heaven"] .page-login .login__submit:not(:disabled) { animation: none; }
html[data-skin="heaven"] .page-login .login__submit:disabled { filter: none; opacity: .72; }
html[data-skin="heaven"] .page-login .remember__box { background: #fffdf8; border-color: var(--h-bronze); }
html[data-skin="heaven"] .page-login .login__lead,
html[data-skin="heaven"] .page-login .login__fine,
html[data-skin="heaven"] .page-login .code__hint,
html[data-skin="heaven"] .page-login .remember__text { color: var(--h-ink); }
html[data-skin="heaven"] .page-login .sig__name { color: var(--h-bronze-2); text-shadow: none; }
html[data-skin="heaven"] .page-login .sig__role,
html[data-skin="heaven"] .page-login .footer__fine { color: #5a4a32; text-shadow: none; }

/* panel heads ("Member access", perks): the render's dark bronze plaque */
html[data-skin="heaven"] .apex-panel__head {
  display: inline-block; align-self: center; justify-self: center;
  padding: .4rem 1.1rem; border-radius: 12px;
  background: linear-gradient(180deg, #5a4930, var(--h-bronze) 55%, var(--h-bronze-2)); color: #fff6e0;
  border: 1.5px solid var(--h-gold-deep);
  font-family: var(--h-sans); font-weight: 800; letter-spacing: .1em; text-shadow: none;
  box-shadow: 0 2px 4px rgba(60, 40, 10, .35);
}
html[data-skin="heaven"] .apex-panel__head::after { display: none; }

/* login: the serif runs wider than the condensed default — size the hero
   so nothing overflows a 390 px phone */
html[data-skin="heaven"] .page-login .pitch { min-width: 0; }
html[data-skin="heaven"] .page-login .pitch__title { font-size: clamp(1.8rem, 9vw, 4.2rem); overflow-wrap: anywhere; }
html[data-skin="heaven"] .page-login .pitch__eyebrow { white-space: normal; overflow-wrap: anywhere; }
html[data-skin="heaven"] .page-login .topbar__chip { background: var(--h-bronze); color: #fff6e0; border-color: var(--h-bronze-2); }
html[data-skin="heaven"] .page-login .ticker .chip { background: #f3ead6; color: #5a4a32; border-color: #a8956e; }

/* ---------- app: the default look's neon layer (fortnite-app.css) off -- */
html[data-skin="heaven"] body.app-body {
  background:
    radial-gradient(70vw 40vh at 50% 0, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #fdf6e8 0, #f6ead0 280px, #f1e2c0 560px, #f9f2df 100%);
  background-attachment: fixed;
}
html[data-skin="heaven"] body.app-body::before,
html[data-skin="heaven"] body.app-body::after { display: none; }
html[data-skin="heaven"] body.app-body .app-header {
  /* translucency HELD at the default's 86% + blur (as Western) */
  background: color-mix(in srgb, #fdf6e8 86%, transparent);
  border-bottom: 2px solid var(--h-gold-deep); border-image: none;
  box-shadow: 0 3px 10px rgba(120, 90, 30, .14);
}
html[data-skin="heaven"] body.app-body .boot-veil { background: linear-gradient(180deg, #fdf6e8, #f1e2c0); color: var(--h-ink); }
html[data-skin="heaven"] .appmenu__btn,
html[data-skin="heaven"] .acctpicker__btn {
  background: linear-gradient(180deg, #fffdf8, #f8eedb); color: var(--h-ink);
  border: 1px solid var(--h-gold-deep); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--h-gold-deep), 0 3px 8px rgba(120, 90, 30, .22);
}
html[data-skin="heaven"] .appmenu__panel,
html[data-skin="heaven"] .acctpicker__panel {
  background: #fffdf8; color: var(--h-ink); border: 2px solid var(--h-gold-deep); border-radius: 14px;
}
html[data-skin="heaven"] .appmenu__item { color: var(--h-ink); }
html[data-skin="heaven"] body.app-body .app-footer__sig { color: var(--h-bronze-2); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
html[data-skin="heaven"] .chip { background: #fffdf8; }
html[data-skin="heaven"] body.app-body .panel {
  border: 2px solid var(--h-gold-deep); border-image: none;
  background: linear-gradient(180deg, var(--h-marble), #fbf5e8 45%, var(--h-marble-2));
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(156, 117, 38, .35), 0 10px 24px rgba(120, 90, 30, .16);
  backdrop-filter: none;
}
html[data-skin="heaven"] body.app-body .panel.world { border: 0; background: transparent; box-shadow: none; }
html[data-skin="heaven"] body.app-body .panel::after { display: none; }
html[data-skin="heaven"] body.app-body .panel--hero { border-color: var(--h-gold-dark); border-image: none; }
html[data-skin="heaven"] body.app-body .panel__head { border-bottom: 1px solid rgba(201, 162, 74, .55); border-image: none; }
html[data-skin="heaven"] body.app-body .panel__title,
html[data-skin="heaven"] body.app-body .subhead { text-shadow: none; }
html[data-skin="heaven"] body.app-body .chip { background: #fffdf8; box-shadow: none; text-shadow: none; }
html[data-skin="heaven"] body.app-body .btn--accent:not(:disabled),
html[data-skin="heaven"] body.app-body .btn:not(.btn--primary):not(.btn--ghost):not(:disabled) {
  background: linear-gradient(180deg, #fffefb, var(--h-marble) 40%, var(--h-marble-2));
  color: var(--h-ink); border: 1.5px solid var(--h-gold-deep); border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(156, 117, 38, .45); text-shadow: none;
}
html[data-skin="heaven"] body.app-body .btn--primary:not(:disabled) {
  background: linear-gradient(180deg, #f6dc95, var(--h-gold) 50%, #c99a3c);
  color: var(--h-bronze-2); border: 2px solid var(--h-gold-dark); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--h-gold-dark); text-shadow: none;
}
html[data-skin="heaven"] body.app-body .btn--ghost:not(:disabled),
html[data-skin="heaven"] body.app-body .viewbar__back {
  background: var(--h-cream); color: var(--h-ink); border: 1.5px solid var(--h-gold-deep); border-radius: 12px;
  box-shadow: 0 1px 0 var(--h-gold-deep); text-shadow: none;
}
html[data-skin="heaven"] body.app-body .btn:disabled { box-shadow: none; background: #f3ead6; color: #85775f; border-color: #c8b98f; }
html[data-skin="heaven"] body.app-body .stat {
  background: #fffdf8; border: 1.5px solid rgba(201, 162, 74, .6); border-left: 5px solid var(--h-gold-deep);
  border-image: none; box-shadow: none; border-radius: 12px; color: var(--h-ink);
}
html[data-skin="heaven"] body.app-body .offline-card { background: #f7f0e0; box-shadow: none; border-color: #c8b98f; color: #5a4a32; }
html[data-skin="heaven"] body.app-body .sitenav--side { background: #fffdf8; border-right: 2px solid var(--h-gold-deep); border-image: none; box-shadow: none; }
html[data-skin="heaven"] body.app-body .sitenav--tabs { border-color: var(--h-gold-deep); box-shadow: inset 0 0 0 1px var(--h-gold-deep), 0 10px 26px rgba(120, 90, 30, .28); }
html[data-skin="heaven"] body.app-body .sitenav__item.is-active { text-shadow: none; }
html[data-skin="heaven"] body.app-body .sitenav__item.is-active .sitenav__icon { filter: none; }
html[data-skin="heaven"] body.app-body .appmenu__btn,
html[data-skin="heaven"] body.app-body .acctpicker__btn { border-color: var(--h-gold-deep); }
html[data-skin="heaven"] body.app-body .appmenu__panel,
html[data-skin="heaven"] body.app-body .acctpicker__panel { border-color: var(--h-gold-deep); box-shadow: 0 10px 22px rgba(120, 90, 30, .3); }
html[data-skin="heaven"] body.app-body .stepup { box-shadow: 0 0 0 3px var(--h-gold-deep), 0 10px 26px rgba(80, 60, 20, .35); background: #fffdf8; color: var(--h-ink); }

/* calendar: marble day cards, cream week column */
html[data-skin="heaven"] .cal__cell { background: #fffdf8; border-color: rgba(201, 162, 74, .55); color: var(--h-ink); }
html[data-skin="heaven"] .cal__cell--pad { background: transparent; border-color: transparent; }
html[data-skin="heaven"] .cal__cell--week { background: #f6ead0; border-color: rgba(201, 162, 74, .7); }
html[data-skin="heaven"] .cal__cell--blank { border-color: #c8b98f; }
html[data-skin="heaven"] .cal__colhead--week { color: #7a5612; }

/* ---------- reduced motion: the world is still ----------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="heaven"] .world__map::before,
  html[data-skin="heaven"] .world__map::after,
  html[data-skin="heaven"] .world__road::before,
  html[data-skin="heaven"] .world__road::after,
  html[data-skin="heaven"] .place--plexy::after,
  html[data-skin="heaven"] .place__art::before,
  html[data-skin="heaven"] .page-login .gate::after,
  html[data-skin="heaven"] .arena__haze,
  html[data-skin="heaven"] .arena__floor,
  html[data-skin="heaven"] .arena__motes i { animation: none !important; }
  html[data-skin="heaven"] .place__art::before,
  html[data-skin="heaven"] .arena__motes i { opacity: 0; }
  html[data-skin="heaven"] .world__road { opacity: 0; }
}