/* =====================================================================
   skin-rich.css — WO-485 SKIN 4: RICH (pair-04, Jason's render)
   Every rule is scoped to html[data-skin="rich"], so this file is inert
   (and its art is never fetched) unless the saved skin is Rich.

   Art layers (cut from Jason's pair-04 renders by docs/wo485-rich/cut.py,
   never stretched — every art box carries its plate's own aspect ratio, or
   uses cover sizing with the SAME geometry for each overlay):
     world-night.webp   the world band of the home render (mansion, marble
                        tower, glass pavilion, fountain, skyline at dusk),
                        cut below the baked top UI + tagline and above the
                        baked tab bar; the three black signboards BLANKED
                        (every baked word removed); the real place names are
                        HTML text laid on those boards.
     login-scene.webp   sky / emblem / mansion / helicopter / skyline band of
                        the login render, cut below the baked "BUILDS
                        FREEDOM" line and above the baked titles + keypad.
     *-lights-*.webp    transparent overlays, same pixel size as their plate:
                        the city's lit windows (found on the render itself).
     *-beacons.webp     red warning lights on the tallest spire + the
                        helicopter's tail fin (positions read off the render).
   Controls: black lacquer + gold (keys, menus, nav, chips, popups), gold bar
   for the primary action, ivory code slots — as in the render. Digits and
   words are solid, high-contrast, never animated.
   Motion (the living parts of THIS world, as element layers, transform /
   opacity only — the plate never moves or warps):
     r-fall      the fountain's water falling (two strand layers, clipped to
                 the falls)                     r-mist     spray at its foot
     r-shimmer   light moving on the wet marble plaza
     r-twinkle-* the skyline's windows twinkling (two out-of-phase sets)
     r-beacon    the spire / helicopter warning lights blinking
     r-glint     a light travelling across each gold-framed signboard
     r-sparkle   a glint flashing on the gold emblems
   prefers-reduced-motion: every motion layer is removed.
   ===================================================================== */

html[data-skin="rich"] {
  --apex-bg: #0a0a0c;
  --apex-bg-2: #19160f;
  --apex-panel: #121115;
  --apex-panel-edge: #c9a24e;
  --apex-blue: #c9a24e;
  --apex-purple: #b8944a;
  --apex-yellow: #eec766;          /* accent text on black: bright gold */
  --apex-cyan: #f1d58e;            /* links / sub-heads: pale gold */
  --apex-text: #f7f0e0;
  --apex-text-dim: #cdbd97;
  --apex-ok: #5fd08a;
  --apex-warn: #f2a93b;
  --apex-danger: #ff6f6f;
  --apex-offline: #948a78;
  --apex-line: rgba(201, 162, 78, .3);
  --sheet-solid: #121115;
  --r-black: #0a0a0c;
  --r-lacquer: #141317;
  --r-lacquer-2: #1e1c21;
  --r-gold: #d9ae55;
  --r-gold-hi: #f7dd96;
  --r-gold-deep: #9c7228;
  --r-ivory: #f8f1df;
  --r-ivory-2: #e9dcb9;
  --r-ink: #f7f0e0;
  --r-onGold: #17120a;
  --r-serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif;
  --r-sign: "Avenir Next Condensed", "Futura Condensed", "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  /* black marble: soft white veins on black lacquer */
  --r-marble:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .07) 39%, rgba(255, 255, 255, 0) 41%),
    linear-gradient(62deg, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, 0) 67%),
    linear-gradient(160deg, #1f1d22 0, #121115 45%, #0b0b0d 100%);
  --r-goldbar: linear-gradient(180deg, #fbe6a6 0, #e7c06a 40%, #c99a43 75%, #a7792c 100%);
  --r-key: linear-gradient(180deg, #24222a 0, #141317 55%, #0c0b0e 100%);
  /* --font-display is NOT overridden: the default condensed sans is already the
     render's clean UI face, and keeping it keeps every control's box frozen.
     The serif is applied to titles only. */
  --panel-clip: none;
  --radius: 14px;
  --shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 162, 78, .35);
  --sitenav-bar: #0d0c10;
  --sitenav-edge: #c9a24e;
  --sitenav-lit: #17120a;
  --sitenav-pill: #e7c06a;
  --crew-body: #d9ae55; --crew-head: #f8f1df; --crew-legs: #1e1c21;
  color-scheme: dark;
}

/* ---------- page backdrop: dusk over black ---------------------------- */
html[data-skin="rich"] body {
  color: var(--r-ink);
  background:
    radial-gradient(120% 60% at 50% 0, rgba(201, 132, 54, .32), rgba(201, 132, 54, 0) 70%),
    linear-gradient(180deg, #17120c 0, #0c0b0d 420px, #0a0a0c 100%) fixed;
}
html[data-skin="rich"] .arena,
html[data-skin="rich"] .candles,
html[data-skin="rich"] .rocket { display: none !important; }

/* ---------- panels, cards, popups: black marble, gold hairline -------- */
html[data-skin="rich"] .panel,
html[data-skin="rich"] .apex-panel,
html[data-skin="rich"] .subcard {
  background: var(--r-marble);
  border: 1px solid var(--r-gold);
  border-radius: 16px;
  clip-path: none;
  box-shadow: inset 0 1px 0 rgba(247, 221, 150, .18), 0 10px 26px rgba(0, 0, 0, .55);
  color: var(--r-ink);
}
html[data-skin="rich"] .apex-panel::before { display: none; }
html[data-skin="rich"] .panel__head { border-bottom: 1px solid rgba(201, 162, 78, .45); }
html[data-skin="rich"] .panel__title,
html[data-skin="rich"] .stopsheet__title { font-family: var(--r-serif); font-weight: 700; color: var(--r-gold-hi); letter-spacing: .02em; }
html[data-skin="rich"] .subhead { color: var(--r-gold); }
html[data-skin="rich"] a { color: #f1d58e; }

html[data-skin="rich"] .acctrow,
html[data-skin="rich"] .worldrow,
html[data-skin="rich"] .skinpick__row,
html[data-skin="rich"] .bell__item {
  background: #17161b; border: 1px solid rgba(201, 162, 78, .55); color: var(--r-ink);
}
html[data-skin="rich"] .skinpick__row:has(input:checked) { border-color: var(--r-gold-hi); box-shadow: inset 0 0 0 1px var(--r-gold); }
html[data-skin="rich"] .skinpick__row input { accent-color: #d9ae55; }
html[data-skin="rich"] .bell__item { border-left: 4px solid var(--apex-warn); }
html[data-skin="rich"] .soon { background: #1c1810; border-color: var(--r-gold); color: var(--r-ink); }

/* ---------- buttons: black lacquer + gold edge; primary = gold bar ---- */
html[data-skin="rich"] .btn,
html[data-skin="rich"] .apex-btn {
  background: var(--r-key);
  color: var(--r-gold-hi); border-color: var(--r-gold); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(247, 221, 150, .2), 0 2px 6px rgba(0, 0, 0, .5); clip-path: none; text-shadow: none;
}
html[data-skin="rich"] .btn--primary,
html[data-skin="rich"] .apex-btn--primary {
  background: var(--r-goldbar);
  color: var(--r-onGold); border-color: #8a6420; box-shadow: inset 0 1px 0 rgba(255, 250, 225, .7), 0 3px 10px rgba(0, 0, 0, .5); text-shadow: none;
}
html[data-skin="rich"] .btn--ghost,
html[data-skin="rich"] .apex-btn--ghost {
  background: transparent; color: var(--r-gold-hi); border-color: var(--r-gold); box-shadow: none; text-shadow: none;
}
html[data-skin="rich"] .stopfilter__chip { background: #141317; color: var(--r-gold-hi); border-color: var(--r-gold); }
html[data-skin="rich"] .stopfilter__chip.is-on { background: var(--r-goldbar); color: var(--r-onGold); border-color: #8a6420; }
html[data-skin="rich"] input, html[data-skin="rich"] select, html[data-skin="rich"] textarea {
  background: #0f0e12; color: var(--r-ink); border-color: var(--r-gold); border-radius: 10px;
}

/* ---------- top bar: black, gold-ringed controls ---------------------- */
html[data-skin="rich"] .topbar2 { background: transparent; }
html[data-skin="rich"] .profile__btn,
html[data-skin="rich"] .bell__btn,
html[data-skin="rich"] .gear {
  background: #121115; color: var(--r-gold-hi); border-color: var(--r-gold);
  box-shadow: inset 0 1px 0 rgba(247, 221, 150, .2);
}
html[data-skin="rich"] .acctbox {
  background: linear-gradient(180deg, #1a191e, #0e0d11); color: var(--r-ink);
  border-color: var(--r-gold); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
html[data-skin="rich"] .acctbox__stop { color: var(--r-ivory); }
html[data-skin="rich"] .profile__panel,
html[data-skin="rich"] .bell__panel,
html[data-skin="rich"] .appmenu__panel,
html[data-skin="rich"] details > .appmenu__list {
  background: #121115; color: var(--r-ink); border-color: var(--r-gold); border-radius: 14px;
}
html[data-skin="rich"] .modepill { background: var(--r-goldbar); color: var(--r-onGold); border-color: #8a6420; font-weight: 800; }
html[data-skin="rich"] .modepill[data-mode="live"] { background: linear-gradient(180deg, #ff9a8a, #d9473a); color: #fff; border-color: #7a1d14; }
html[data-skin="rich"] .modepill[data-mode="none"],
html[data-skin="rich"] .modepill[data-mode="unknown"] { background: #1e1c21; color: var(--r-gold-hi); border-color: var(--r-gold); }
html[data-skin="rich"] .bookline__label { background: #17161b; color: var(--r-ink); }

/* ---------- the floating bottom bar: black, gold pill on the active --- */
@media (max-width: 768px) {
  html[data-skin="rich"] .sitenav--tabs {
    background: linear-gradient(180deg, #16151a, #0b0b0d); border-color: var(--r-gold); border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(247, 221, 150, .25), 0 12px 28px rgba(0, 0, 0, .65);
  }
  html[data-skin="rich"] .sitenav--tabs .sitenav__item { color: var(--r-gold-hi); }
  html[data-skin="rich"] .sitenav--tabs .sitenav__item.is-active .sitenav__glyph {
    background: var(--r-goldbar); color: var(--r-onGold); box-shadow: inset 0 0 0 1px #8a6420;
  }
}
html[data-skin="rich"] .sitenav--side { background: #0e0d11; border-right-color: var(--r-gold); }
html[data-skin="rich"] .sitenav__item { color: var(--r-gold-hi); }

/* ---------- the world: one art plate, places on their buildings ------- */
html[data-skin="rich"] .panel.world { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
html[data-skin="rich"] .world__map {
  display: block; position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1306 / 1508; min-height: 0; padding: 0;
  container-type: inline-size;
  background: #0b0b0d url("../img/skins/rich/world-night.webp") center / cover no-repeat;
  border-radius: 18px; border: 0;
  /* the gold rule is drawn OUTSIDE the art box, so the box is the plate */
  box-shadow: 0 0 0 1.5px var(--r-gold), 0 12px 30px rgba(0, 0, 0, .6);
  overflow: hidden;
}

/* places = hotspots over their buildings + boards (all %, of the plate) */
html[data-skin="rich"] .place {
  position: absolute; display: block; padding: 0; min-height: 0;
  background: transparent; border: 0; border-radius: 12px; box-shadow: none; color: var(--r-ink);
  transform: none;
}
/* the tapped place lights its gold edge; nothing scales or moves */
html[data-skin="rich"] .place.is-zoomed {
  transform: none; border: 0;
  box-shadow: 0 0 0 2px rgba(247, 221, 150, .95), 0 0 24px rgba(231, 192, 106, .7);
}
html[data-skin="rich"] .place__art { position: absolute; width: auto; height: auto; border-radius: 10px; background: none; }
/* name = real text on the blanked black board (inside its gold frame) */
html[data-skin="rich"] .place__name {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--r-sign); font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
  color: #f3c95c; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .9);
  font-size: 3.6cqw;
  overflow: hidden; isolation: isolate; border-radius: 4px;
}
/* sub = live line on a lacquer plaque hung just under its own board: exactly
   the board's width (so the three plaques keep the boards' clear gaps and
   never touch), a clear gap below the gold frame, lines balanced at the
   " · " breaks so a long live line reads as tidy centred rows — never cut. */
html[data-skin="rich"] .place__sub {
  position: absolute; translate: -50% 0; transform: none; box-sizing: border-box;
  white-space: normal; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
  font-size: max(9.5px, 2.6cqw); font-weight: 700; line-height: 1.22; letter-spacing: .01em;
  padding: .16rem .35rem; border-radius: 7px;
  background: linear-gradient(180deg, #19181d, #0c0b0e); color: var(--r-ivory);
  border: 1px solid rgba(217, 174, 85, .85); box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

/* Prop Farm — the glass mansion's lower floors, board on its terrace */
html[data-skin="rich"] .place--prop  { left: 1%;  top: 38%; width: 32%; height: 39%; }
html[data-skin="rich"] .place--prop .place__art  { left: 3%; top: 0; width: 94%; height: 64%; }
html[data-skin="rich"] .place--prop .place__name { left: 15.5%; top: 71.5%; width: 72.3%; height: 21.8%; }
html[data-skin="rich"] .place--prop .place__sub  { left: 50.8%; top: 98.6%; width: 86%; }

/* Forex Factory — the black-marble tower with the gold emblem */
html[data-skin="rich"] .place--forex { left: 34%; top: 40%; width: 31%; height: 38%; }
html[data-skin="rich"] .place--forex .place__art  { left: 1%; top: 5.3%; width: 97%; height: 61.3%; }
html[data-skin="rich"] .place--forex .place__name { left: 8.4%; top: 70.3%; width: 83%; height: 23.7%; font-size: 2.85cqw; letter-spacing: 0; }
html[data-skin="rich"] .place--forex .place__sub  { left: 49.6%; top: 99.6%; width: 92%; }

/* Plexy Market — the glass pavilion */
html[data-skin="rich"] .place--plexy { left: 67%; top: 54%; width: 32%; height: 26.5%; }
html[data-skin="rich"] .place--plexy .place__art  { left: 3%; top: 5.7%; width: 94%; height: 51%; }
html[data-skin="rich"] .place--plexy .place__name { left: 8.4%; top: 60%; width: 76.6%; height: 33.1%; font-size: 3.4cqw; }
html[data-skin="rich"] .place--plexy .place__sub  { left: 46.5%; top: 100.6%; width: 88%; }

html[data-skin="rich"] .world__road { display: none; }

/* status sign at Plexy Market: a lacquer plaque */
html[data-skin="rich"] .worldsign {
  right: 2.5%; bottom: 2%;
  background: rgba(12, 11, 14, .92); color: var(--r-ivory);
  border: 1px solid var(--r-gold); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
html[data-skin="rich"] .worldsign[data-state="ok"] .worldsign__icon { background: #6fe39a; }
html[data-skin="rich"] .worldsign[data-state="warn"] .worldsign__icon { background: #ffc24a; }

/* ---------- the travel object: a black-and-gold helicopter ----------- */
html[data-skin="rich"] .traveller {
  left: -22px; top: -14px; width: 44px; height: 28px; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 28'%3E%3Cpath d='M4 4h30' stroke='%23e7c06a' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19 4v4' stroke='%23e7c06a' stroke-width='2'/%3E%3Cpath d='M26 14h14l2-4' fill='none' stroke='%23141317' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M41 9v6' stroke='%23e7c06a' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='18' cy='14' rx='11' ry='6.5' fill='%23141317' stroke='%23e7c06a' stroke-width='1.6'/%3E%3Cpath d='M9 13a9 5 0 0 1 9-5v5z' fill='%23f7dd96' opacity='.85'/%3E%3Cpath d='M9 24h20M13 20.5v3.5M24 20.5v3.5' stroke='%23e7c06a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- summary sheet: solid black marble, gold frame ------------- */
html[data-skin="rich"] .stopsheet {
  background: var(--sheet-solid); background-image: none;
  border: 1px solid var(--r-gold); border-radius: 18px; color: var(--r-ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .7);
}
html[data-skin="rich"] .stopsheet::backdrop { background: rgba(0, 0, 0, .72); }

/* =====================================================================
   MOTION — element layers over the still plate (transform / opacity only)
   ===================================================================== */
/* the skyline's windows: two out-of-phase sets of the render's own lights */
html[data-skin="rich"] .world__map::before,
html[data-skin="rich"] .world__map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("../img/skins/rich/world-lights-a.webp") center / cover no-repeat;
  opacity: .3; animation: r-twinkle-a 3.8s ease-in-out infinite;
}
html[data-skin="rich"] .world__map::after {
  background-image: url("../img/skins/rich/world-lights-b.webp");
  animation: r-twinkle-b 4.7s ease-in-out -1.9s infinite;
}
@keyframes r-twinkle-a { 0%, 100% { opacity: .2; } 18% { opacity: .9; } 34% { opacity: .4; } 52% { opacity: 1; } 70% { opacity: .25; } 86% { opacity: .75; } }
@keyframes r-twinkle-b { 0%, 100% { opacity: .85; } 22% { opacity: .2; } 40% { opacity: .95; } 61% { opacity: .35; } 80% { opacity: 1; } }

/* the fountain: a window on the falls; two strand layers fall through it */
html[data-skin="rich"] .world__road {
  display: block; position: absolute; margin: 0; padding: 0; z-index: 0;
  left: 42.57%; top: 86.21%; width: 15.31%; height: 9.08%; bottom: auto;
  background: none; border-radius: 0; opacity: 1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
}
html[data-skin="rich"] .world__road::before,
html[data-skin="rich"] .world__road::after {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 28%, rgba(255, 255, 255, 0) 44%,
              rgba(255, 255, 255, 0) 58%, rgba(235, 245, 255, .7) 76%, rgba(255, 255, 255, 0) 90%) 0 0 / 100% 25% repeat-y;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 1.4px, transparent 1.4px 3.6px);
  mask-image: repeating-linear-gradient(90deg, #000 0 1.4px, transparent 1.4px 3.6px);
  opacity: .5; animation: r-fall .85s linear infinite; will-change: transform;
}
html[data-skin="rich"] .world__road::after {
  background-position: 0 12%;
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 1.8px, #000 1.8px 2.8px, transparent 2.8px 5px);
  mask-image: repeating-linear-gradient(90deg, transparent 0 1.8px, #000 1.8px 2.8px, transparent 2.8px 5px);
  opacity: .38; animation-duration: 1.15s;
}
@keyframes r-fall { from { transform: translateY(0); } to { transform: translateY(50%); } }

/* spray at the foot of the falls + light moving on the wet plaza */
html[data-skin="rich"] .place--forex::before,
html[data-skin="rich"] .place--forex::after { content: ""; position: absolute; pointer-events: none; }
html[data-skin="rich"] .place--forex::before {
  left: 25%; top: 141%; width: 54%; height: 7%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(255, 255, 255, .7), rgba(230, 240, 255, .25) 55%, rgba(255, 255, 255, 0) 75%);
  opacity: .35; animation: r-mist 2.6s ease-in-out infinite alternate;
}
html[data-skin="rich"] .place--forex::after {
  left: -6%; top: 147%; width: 118%; height: 10%;
  background:
    radial-gradient(14% 22% at 22% 40%, rgba(255, 226, 160, .55), rgba(255, 226, 160, 0) 100%),
    radial-gradient(10% 18% at 58% 65%, rgba(255, 240, 200, .5), rgba(255, 240, 200, 0) 100%),
    radial-gradient(12% 20% at 84% 35%, rgba(255, 226, 160, .45), rgba(255, 226, 160, 0) 100%);
  opacity: .2; animation: r-shimmer 4.2s ease-in-out infinite alternate;
}
@keyframes r-mist { from { opacity: .22; transform: scale(.94, .9); } to { opacity: .6; transform: scale(1.06, 1.1); } }
@keyframes r-shimmer { from { opacity: .15; transform: translateX(-4%); } 50% { opacity: .75; } to { opacity: .25; transform: translateX(4%); } }

/* red warning lights: spire tip + helicopter tail fin (full-plate overlay,
   laid on the plexy hotspot with the PLATE's geometry: -L/W, -T/H, 1/W, 1/H) */
html[data-skin="rich"] .place--plexy::after {
  content: ""; position: absolute; pointer-events: none;
  left: -209.375%; top: -203.774%; width: 312.5%; height: 377.358%;
  background: url("../img/skins/rich/world-beacons.webp") center / cover no-repeat;
  opacity: 0; animation: r-beacon 1.8s linear infinite;
}
@keyframes r-beacon { 0%, 100% { opacity: 0; } 5%, 16% { opacity: 1; } 24% { opacity: 0; } }

/* a light travelling across each gold-framed board (behind the letters) */
html[data-skin="rich"] .place--prop .place__name::before,
html[data-skin="rich"] .place--forex .place__name::before,
html[data-skin="rich"] .place--plexy .place__name::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -45%; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, rgba(247, 221, 150, 0) 0, rgba(247, 221, 150, .28) 50%, rgba(247, 221, 150, 0) 100%);
  transform: translateX(0); animation: r-glint 7s ease-in-out infinite;
}
html[data-skin="rich"] .place--forex .place__name::before { animation-delay: -2.4s; }
html[data-skin="rich"] .place--plexy .place__name::before { animation-delay: -4.8s; }
@keyframes r-glint { 0% { transform: translateX(0); } 28%, 100% { transform: translateX(380%); } }

/* a glint flashing on the gold emblems (tower emblem apex, sky emblem apex) */
html[data-skin="rich"] .place--forex .place__art::after,
html[data-skin="rich"] .place--prop::after {
  content: ""; position: absolute; pointer-events: none; aspect-ratio: 1; translate: -50% -50%;
  background:
    linear-gradient(90deg, rgba(255, 250, 225, 0) 0, rgba(255, 250, 225, .95) 50%, rgba(255, 250, 225, 0) 100%) center / 100% 7% no-repeat,
    linear-gradient(180deg, rgba(255, 250, 225, 0) 0, rgba(255, 250, 225, .95) 50%, rgba(255, 250, 225, 0) 100%) center / 7% 100% no-repeat,
    radial-gradient(circle, rgba(255, 246, 210, .9) 0, rgba(255, 220, 140, .35) 18%, rgba(255, 220, 140, 0) 40%);
  opacity: 0; transform: scale(.2) rotate(0deg); animation: r-sparkle 5.5s ease-out infinite;
}
html[data-skin="rich"] .place--forex .place__art::after { left: 51.1%; top: 16.6%; width: 23%; }
html[data-skin="rich"] .place--prop::after { left: 152.9%; top: -89.9%; width: 21.9%; animation-delay: -2.7s; }
@keyframes r-sparkle {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  7% { opacity: 1; transform: scale(1) rotate(25deg); }
  16% { opacity: 0; transform: scale(.35) rotate(50deg); }
  100% { opacity: 0; transform: scale(.2) rotate(50deg); }
}

/* ---------- login: night-gold titles, the dusk scene, lacquer keypad --- */
html[data-skin="rich"] body.page-login {
  background:
    radial-gradient(90% 40% at 50% 0, rgba(201, 132, 54, .18), rgba(201, 132, 54, 0) 70%),
    linear-gradient(180deg, #0c0b0e 0, #0a0a0c 100%);
}
html[data-skin="rich"] .page-login .ticker {
  background: #0d0c10; color: var(--r-ink); border-bottom: 1px solid var(--r-gold);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-skin="rich"] .page-login .brand__text strong { color: #ecd08c; font-family: var(--r-serif); letter-spacing: .04em; text-shadow: none; }
html[data-skin="rich"] .page-login .brand__text em { color: var(--r-ivory); letter-spacing: .22em; text-shadow: none; }
html[data-skin="rich"] .page-login .pitch__title,
html[data-skin="rich"] .page-login .pitch__title-hero,
html[data-skin="rich"] .page-login .pitch__title-lead {
  font-family: var(--r-serif); color: #ecd08c; filter: none;
  text-shadow: 0 2px 0 #000, 0 4px 14px rgba(0, 0, 0, .7);
  -webkit-text-fill-color: #ecd08c; background: none;
}
html[data-skin="rich"] .page-login .pitch__eyebrow { color: var(--r-gold-hi); text-shadow: none; }
html[data-skin="rich"] .page-login .pitch__lead,
html[data-skin="rich"] .page-login .pitch__body { color: #efe6d2; text-shadow: none; }
html[data-skin="rich"] .page-login .pitch__lead strong,
html[data-skin="rich"] .page-login .pitch__body strong { color: #f1d58e; }
html[data-skin="rich"] .page-login .perk.apex-panel,
html[data-skin="rich"] .page-login .quote.apex-panel { filter: none; }
html[data-skin="rich"] .page-login .perk h2 { color: var(--r-gold-hi); font-family: var(--r-serif); }
html[data-skin="rich"] .page-login .perk p,
html[data-skin="rich"] .page-login .quote { color: var(--r-ink); }

/* the scene band, right above the card (the card overlaps its foot by 30px) */
html[data-skin="rich"] .page-login .gate { position: relative; padding-top: 180px; }
html[data-skin="rich"] .page-login .gate::before,
html[data-skin="rich"] .page-login .gate::after,
html[data-skin="rich"] .page-login .login.apex-panel::before {
  content: ""; display: block; position: absolute; left: 0; right: 0; width: auto; height: 210px; pointer-events: none;
  background: url("../img/skins/rich/login-scene.webp") 72% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
  border-radius: 0; clip-path: none;
}
html[data-skin="rich"] .page-login .gate::before { top: 0; z-index: 0; }
html[data-skin="rich"] .page-login .gate::after {
  top: 0; z-index: 0; background-image: url("../img/skins/rich/login-lights-a.webp");
  opacity: .3; animation: r-twinkle-a 3.8s ease-in-out infinite;
}
/* the card's own pseudo carries the warning lights; the card has NO border
   (gold edge = inset shadow), so its box == the gate's box and -180px lands
   this layer exactly on the scene */
html[data-skin="rich"] .page-login .login.apex-panel::before {
  top: -180px; z-index: 0; background-image: url("../img/skins/rich/login-beacons.webp");
  opacity: 0; animation: r-beacon 1.8s linear infinite;
}
html[data-skin="rich"] .page-login .gate > * { position: relative; z-index: 1; }
html[data-skin="rich"] .page-login .login.apex-panel {
  background: var(--r-marble);
  border: 0; border-radius: 22px; clip-path: none; filter: none;
  box-shadow: inset 0 0 0 1.5px var(--r-gold), inset 0 1px 0 2px rgba(247, 221, 150, .15), 0 18px 40px rgba(0, 0, 0, .7);
  color: var(--r-ink);
}
html[data-skin="rich"] .page-login .code__slot {
  background: linear-gradient(180deg, #fffaf0, var(--r-ivory) 55%, var(--r-ivory-2));
  border-color: #c9a24e; box-shadow: inset 0 1px 3px rgba(80, 60, 20, .25); border-radius: 9px;
  clip-path: none; animation: none;
}
html[data-skin="rich"] .page-login .code__slot.is-filled { border-color: #8a6420; background: linear-gradient(180deg, #fff2c8, #f1d58e); }
html[data-skin="rich"] .page-login .code__slot.is-next { border-color: #fff; box-shadow: 0 0 0 2px var(--r-gold); animation: none; }
html[data-skin="rich"] .page-login .code__slot::after { background: #17120a; }
html[data-skin="rich"] .page-login .keypad .apex-btn--key,
html[data-skin="rich"] .page-login .keypad .apex-btn--ghost {
  background: var(--r-key);
  color: #fffaf0; border-color: #b8914a; border-radius: 12px; clip-path: none;
  box-shadow: inset 0 1px 0 rgba(247, 221, 150, .22), 0 3px 8px rgba(0, 0, 0, .55);
  text-shadow: none;
}
html[data-skin="rich"] .page-login .keypad .apex-btn--key:hover:not(:disabled) { border-color: var(--r-gold-hi); }
html[data-skin="rich"] .page-login .login__submit {
  background: var(--r-goldbar);
  color: var(--r-onGold); border-color: #8a6420; border-radius: 14px; clip-path: none;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .75), 0 4px 12px rgba(0, 0, 0, .6);
}
html[data-skin="rich"] .page-login .login__submit:not(:disabled) { animation: none; }
html[data-skin="rich"] .page-login .login__submit:disabled { filter: none; opacity: .7; }
html[data-skin="rich"] .page-login .remember__box { background: #0f0e12; border-color: var(--r-gold); border-radius: 5px; clip-path: none; }
html[data-skin="rich"] .page-login .remember input:checked + .remember__box { background: var(--r-gold); border-color: var(--r-gold-hi); }
html[data-skin="rich"] .page-login .login__lead,
html[data-skin="rich"] .page-login .login__fine,
html[data-skin="rich"] .page-login .code__hint { color: #efe6d2; }
html[data-skin="rich"] .page-login .sig__name { color: #ecd08c; font-family: var(--r-serif); font-style: italic; }
html[data-skin="rich"] .page-login .sig__role,
html[data-skin="rich"] .page-login .footer__fine { color: var(--r-ivory-2); }
html[data-skin="rich"] .page-login .pitch { min-width: 0; }
html[data-skin="rich"] .page-login .pitch__title { font-size: clamp(1.8rem, 9vw, 4.2rem); overflow-wrap: anywhere; }
html[data-skin="rich"] .page-login .pitch__eyebrow { letter-spacing: .14em; white-space: normal; overflow-wrap: anywhere; }
html[data-skin="rich"] .page-login .topbar__chip { background: var(--r-goldbar); color: var(--r-onGold); border-color: #8a6420; }
html[data-skin="rich"] .page-login .ticker .chip { background: #17161b; color: var(--r-gold-hi); border-color: var(--r-gold); }

/* panel heads ("Member access", perks): an ivory-gold name plate, as in the render */
html[data-skin="rich"] .apex-panel__head {
  display: inline-block; align-self: center; justify-self: center;
  padding: .4rem 1.1rem; border-radius: 12px;
  background: linear-gradient(180deg, #fbf3dc, #ecd9a6); color: #17120a;
  font-family: var(--r-sign); letter-spacing: .1em;
  box-shadow: inset 0 0 0 1px #b8914a, 0 2px 6px rgba(0, 0, 0, .5);
}
html[data-skin="rich"] .apex-panel__head::after { display: none; }

/* ---------- app shell: black header, gold rule; default neon off ------ */
html[data-skin="rich"] body.app-body .app-header {
  /* translucency held at the default's 86% + blur (Ace's acceptance call) */
  background: color-mix(in srgb, #0b0b0d 86%, transparent);
  border-bottom: 1px solid var(--r-gold); border-image: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
html[data-skin="rich"] body.app-body .brand__name { color: #ecd08c; font-family: var(--r-serif); text-shadow: none; }
html[data-skin="rich"] body.app-body .brand__chev { filter: none; }
html[data-skin="rich"] body.app-body .boot-veil { background: linear-gradient(180deg, #17120c, #0a0a0c); }
html[data-skin="rich"] .appmenu__btn,
html[data-skin="rich"] .acctpicker__btn {
  background: #121115; color: var(--r-ivory);
  border-color: var(--r-gold); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(247, 221, 150, .2);
}
html[data-skin="rich"] .appmenu__panel,
html[data-skin="rich"] .acctpicker__panel {
  background: #121115; color: var(--r-ink); border-color: var(--r-gold); border-radius: 12px;
}
html[data-skin="rich"] .appmenu__item { color: var(--r-ink); }
html[data-skin="rich"] .chip { background: #17161b; color: var(--r-ink); }
html[data-skin="rich"] body.app-body {
  background:
    radial-gradient(120% 50% at 50% 0, rgba(201, 132, 54, .22), rgba(201, 132, 54, 0) 70%),
    linear-gradient(180deg, #15110c 0, #0c0b0d 380px, #0a0a0c 100%);
  background-attachment: fixed;
}
html[data-skin="rich"] body.app-body::before,
html[data-skin="rich"] body.app-body::after { display: none; }
html[data-skin="rich"] body.app-body .panel {
  border: 1px solid var(--r-gold); border-image: none;
  background: var(--r-marble);
  box-shadow: inset 0 1px 0 rgba(247, 221, 150, .18), 0 10px 26px rgba(0, 0, 0, .55);
  backdrop-filter: none;
}
html[data-skin="rich"] body.app-body .panel.world { border: 0; background: transparent; box-shadow: none; }
html[data-skin="rich"] body.app-body .panel::after { display: none; }
html[data-skin="rich"] body.app-body .panel--hero { border-color: var(--r-gold-hi); border-image: none; }
html[data-skin="rich"] body.app-body .panel__head { border-bottom: 1px solid rgba(201, 162, 78, .45); border-image: none; }
html[data-skin="rich"] body.app-body .panel__title,
html[data-skin="rich"] body.app-body .subhead { text-shadow: none; }
html[data-skin="rich"] body.app-body .chip { background: #17161b; box-shadow: none; text-shadow: none; }
html[data-skin="rich"] body.app-body .btn--accent:not(:disabled),
html[data-skin="rich"] body.app-body .btn:not(.btn--primary):not(.btn--ghost):not(:disabled) {
  background: var(--r-key); color: var(--r-gold-hi); border-color: var(--r-gold); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(247, 221, 150, .2), 0 2px 6px rgba(0, 0, 0, .5); text-shadow: none;
}
html[data-skin="rich"] body.app-body .btn--primary:not(:disabled) {
  background: var(--r-goldbar); color: var(--r-onGold); border-color: #8a6420; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .7), 0 3px 10px rgba(0, 0, 0, .5); text-shadow: none;
}
html[data-skin="rich"] body.app-body .btn--ghost:not(:disabled),
html[data-skin="rich"] body.app-body .viewbar__back {
  background: transparent; color: var(--r-gold-hi); border-color: var(--r-gold); border-radius: 12px;
  box-shadow: none; text-shadow: none;
}
html[data-skin="rich"] body.app-body .btn:disabled { box-shadow: none; background: #17161b; color: #8f877a; border-color: #4a4336; }
html[data-skin="rich"] body.app-body .stat {
  background: #141317; border: 1px solid rgba(201, 162, 78, .5); border-left: 4px solid var(--r-gold);
  border-image: none; box-shadow: none; border-radius: 10px; color: var(--r-ink);
}
html[data-skin="rich"] body.app-body .offline-card { background: #141317; box-shadow: none; border-color: #4a4336; color: #b8ad95; }
html[data-skin="rich"] body.app-body .sitenav--side { background: #0e0d11; border-right-color: var(--r-gold); border-image: none; box-shadow: none; }
html[data-skin="rich"] body.app-body .sitenav--tabs { border-color: var(--r-gold); box-shadow: inset 0 1px 0 rgba(247, 221, 150, .25), 0 12px 28px rgba(0, 0, 0, .65); }
html[data-skin="rich"] body.app-body .sitenav__item.is-active { text-shadow: none; }
html[data-skin="rich"] body.app-body .sitenav__item.is-active .sitenav__icon { filter: none; }
html[data-skin="rich"] body.app-body .appmenu__btn,
html[data-skin="rich"] body.app-body .acctpicker__btn { border-color: var(--r-gold); }
html[data-skin="rich"] body.app-body .appmenu__panel,
html[data-skin="rich"] body.app-body .acctpicker__panel { border-color: var(--r-gold); box-shadow: 0 12px 28px rgba(0, 0, 0, .65); }
html[data-skin="rich"] body.app-body .stepup { box-shadow: 0 0 0 2px var(--r-gold), 0 12px 30px rgba(0, 0, 0, .65); background: #121115; color: var(--r-ink); }
html[data-skin="rich"] body.app-body .app-footer__sig { color: #ecd08c; text-shadow: none; }

/* calendar: lacquer day cards, gold week column */
html[data-skin="rich"] .cal__cell { background: #141317; border-color: rgba(201, 162, 78, .4); color: var(--r-ink); }
html[data-skin="rich"] .cal__cell--pad { background: transparent; border-color: transparent; }
html[data-skin="rich"] .cal__cell--week { background: #1f1a10; border-color: rgba(201, 162, 78, .6); }
html[data-skin="rich"] .cal__cell--blank { border-color: #4a4336; }
html[data-skin="rich"] .cal__colhead--week { color: var(--r-gold); }

/* ---------- THE EYE (eye.html): tokens above carry in; plus materials --
   Reached: page backdrop, panels/blocks/cards (black marble + gold hairline),
   section/fleet tabs (lacquer, gold pill when on), back link, title face,
   the emblem's frame. NOT reached: the emblem picture itself is THE EYE's
   own image file (not Rich art) — it is framed in gold, not redrawn. */
html[data-skin="rich"] .eye-body {
  background:
    radial-gradient(120% 40% at 50% 0, rgba(201, 132, 54, .2), rgba(201, 132, 54, 0) 70%),
    linear-gradient(180deg, #15110c 0, #0a0a0c 420px) fixed;
}
html[data-skin="rich"] .eye-hero__title { color: #ecd08c; font-family: var(--r-serif); }
html[data-skin="rich"] .eye-hero__emblem { border-color: var(--r-gold); box-shadow: 0 0 0 3px #0a0a0c, 0 0 0 4px rgba(201, 162, 78, .55); }
html[data-skin="rich"] .eye-sections { background: #0b0b0d; box-shadow: 0 1px 0 rgba(201, 162, 78, .45); }
html[data-skin="rich"] .eye-sec,
html[data-skin="rich"] .eye-tab { background: var(--r-key); color: var(--r-gold-hi); border-color: var(--r-gold); }
html[data-skin="rich"] .eye-sec--on,
html[data-skin="rich"] .eye-tab--on { background: var(--r-goldbar); color: var(--r-onGold); border-color: #8a6420; }
html[data-skin="rich"] .eye-card,
html[data-skin="rich"] .eye-block { background: var(--r-marble); border: 1px solid rgba(201, 162, 78, .55); }
html[data-skin="rich"] .eye-card:hover { border-color: var(--r-gold-hi); }
html[data-skin="rich"] .eye-backlink,
html[data-skin="rich"] .eye-back { color: #f1d58e; }

/* ---------- reduced motion: every motion layer is removed ------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="rich"] .world__map::before,
  html[data-skin="rich"] .world__map::after,
  html[data-skin="rich"] .world__road,
  html[data-skin="rich"] .world__road::before,
  html[data-skin="rich"] .world__road::after,
  html[data-skin="rich"] .place--forex::before,
  html[data-skin="rich"] .place--forex::after,
  html[data-skin="rich"] .place--plexy::after,
  html[data-skin="rich"] .place--prop::after,
  html[data-skin="rich"] .place--forex .place__art::after,
  html[data-skin="rich"] .place__name::before,
  html[data-skin="rich"] .page-login .gate::after,
  html[data-skin="rich"] .page-login .login.apex-panel::before { animation: none !important; content: none !important; display: none !important; }
}

/* login: ticker badge + footer rule in the same materials */
html[data-skin="rich"] .page-login .ticker .apex-chip { background: #17161b; color: var(--r-gold-hi); border-color: var(--r-gold); }
html[data-skin="rich"] .page-login .footer { border-top-color: rgba(201, 162, 78, .45); }