/* =====================================================================
   skin-futuristic.css — WO-485 SKIN 2: FUTURISTIC (pair-02, Jason's renders
   login-future-world-members-arena + home-future-world-combined)
   Every rule is scoped to html[data-skin="futuristic"], so this file is
   inert (and none of its art is fetched) unless the saved skin is Futuristic.

   Art layers (cut by docs/wo485-futuristic/cut.py; never stretched — each
   art box carries its plate's own aspect ratio):
     world-future.webp   the world band of the home render (y 245..1790 of
                         1980): baked account card, place words (PROP FARM,
                         FOREX FACTORY, FOREX.com, PLEXY MARKET, PlexyTrade)
                         and the two sky craft removed by mask + infill. The
                         real place names are HTML text on the blanked signs.
     login-scene.webp    the falls / road / city band of the login render,
                         cut below every baked title, above the baked card.
     craft-*.webp        the renders' own craft, cut off their sky with alpha.
     falls-mask.webp     alpha of the waterfall water on the world plate.
     login-falls.webp    16-frame flipbook of the login band's waterfalls.
     water-streaks*.webp drawn falling-water streak tiles.
   Controls: glass panels with a light edge, brushed-metal keys with a cyan
   rim, gold primary (the render's ENTER THE ARENA bar), white high-contrast
   digits. Same DOM, same layout — look only.

   MOVEMENT (Futuristic = the waterfalls and the craft lights; amendment 2):
     f-fall / f-fall-2   two streak layers TRANSLATE down inside the falls
                         mask (home) — the water moves, the plate never does.
     f-falls-flip        login falls flipbook, sprite steps.
     f-jet / f-far       home sky craft flying their paths (transform).
     f-hover             the traveller craft hovering (transform).
     f-beacon            aviation beacons on the factory stacks + silo
                         (opacity blink).
     f-glow              the market's hologram globe breathing (opacity).
     f-sky-a/b/c         login sky craft flying across the sky (transform).
   No plate is warped, skewed, wobbled or background-scrolled. Controls,
   numbers and words never move. prefers-reduced-motion: all of it is still.
   ===================================================================== */

html[data-skin="futuristic"] {
  --apex-bg: #070b26;
  --apex-bg-2: #141c52;
  --apex-panel: rgba(12, 22, 62, .9);
  --apex-panel-edge: #4a9dff;
  --apex-blue: #3d8bff;
  --apex-purple: #9a7bff;
  --apex-yellow: #ffcb52;          /* gold, as the render's signs */
  --apex-cyan: #6fd6ff;
  --apex-text: #eef4ff;
  --apex-text-dim: #b4c4ea;
  --apex-ok: #46e3a6;
  --apex-warn: #ffb54a;
  --apex-danger: #ff6f82;
  --apex-offline: #8e9ac4;
  --apex-line: rgba(95, 170, 255, .28);
  --sheet-solid: #0b1442;
  --f-navy: #070b26;
  --f-glass: #0e1a4c;
  --f-glass-2: #08113a;
  --f-edge: #4aa3ff;
  --f-edge-soft: rgba(74, 163, 255, .55);
  --f-glow: rgba(64, 150, 255, .55);
  --f-gold: #ffcb52;
  --f-gold-hi: #ffe7a0;
  --f-gold-deep: #d48a12;
  --f-ink: #eef4ff;
  --f-metal: linear-gradient(180deg, #24366f 0, #13204f 48%, #0b1540 52%, #101c4a 100%);
  --f-face: "Eurostile", "Bank Gothic", "Bahnschrift", "Rajdhani", "Exo 2", "Arial Narrow", system-ui, sans-serif;
  --font-display: var(--f-face);
  --panel-clip: none;
  --radius: 12px;
  --shadow: 0 0 0 1px rgba(74, 163, 255, .55), 0 0 18px rgba(64, 150, 255, .35), 0 10px 26px rgba(0, 0, 0, .5);
  --sitenav-bar: #0b1442;
  --sitenav-edge: #4aa3ff;
  --sitenav-lit: #1a1305;
  --sitenav-pill: #ffcb52;
  --crew-body: #6fd6ff; --crew-head: #eef4ff; --crew-legs: #24366f;
  color-scheme: dark;
}

/* ---------- page backdrop: the night sky over the city ---------------- */
html[data-skin="futuristic"] body {
  color: var(--f-ink);
  background:
    radial-gradient(1px 1px at 12% 40px, #fff, transparent 60%),
    radial-gradient(1px 1px at 37% 110px, #dfe9ff, transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 70px, #fff, transparent 60%),
    radial-gradient(1px 1px at 88% 150px, #cfe0ff, transparent 60%),
    radial-gradient(1px 1px at 22% 220px, #fff, transparent 60%),
    radial-gradient(1px 1px at 79% 260px, #fff, transparent 60%),
    linear-gradient(180deg, #060a24 0, #0c1540 280px, #1a2263 620px, #2b2a78 900px, #121a4c 100%) fixed;
}
/* the default look's arena ornaments do not belong in this world */
html[data-skin="futuristic"] .candles,
html[data-skin="futuristic"] .rocket { display: none !important; }

/* ---------- panels, cards, popups: dark glass, light edge ------------- */
html[data-skin="futuristic"] .panel,
html[data-skin="futuristic"] .apex-panel,
html[data-skin="futuristic"] .subcard {
  background: linear-gradient(180deg, rgba(22, 38, 94, .94), rgba(9, 16, 52, .95) 60%, rgba(7, 12, 42, .96));
  border-color: var(--f-edge-soft);
  border-radius: 14px;
  clip-path: none;
  box-shadow: inset 0 1px 0 rgba(170, 215, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .03),
              0 0 16px rgba(64, 150, 255, .28), 0 10px 26px rgba(0, 0, 0, .45);
  color: var(--f-ink);
}
html[data-skin="futuristic"] .apex-panel::before { display: none; }
html[data-skin="futuristic"] .panel__head { border-bottom: 1px solid rgba(74, 163, 255, .35); }
html[data-skin="futuristic"] .panel__title,
html[data-skin="futuristic"] .stopsheet__title {
  font-family: var(--f-face); font-weight: 800; letter-spacing: .06em; color: #fff;
}
html[data-skin="futuristic"] .subhead { color: var(--apex-cyan); }
html[data-skin="futuristic"] a { color: #8fdcff; }

html[data-skin="futuristic"] .acctrow,
html[data-skin="futuristic"] .worldrow,
html[data-skin="futuristic"] .skinpick__row,
html[data-skin="futuristic"] .bell__item {
  background: rgba(18, 32, 84, .85); border-color: rgba(74, 163, 255, .45); color: var(--f-ink);
  box-shadow: inset 0 1px 0 rgba(170, 215, 255, .14);
}
html[data-skin="futuristic"] .bell__item { border-left-color: var(--apex-warn); }
html[data-skin="futuristic"] .soon { background: rgba(255, 203, 82, .1); border-color: var(--f-gold); color: var(--f-ink); }

/* ---------- buttons: metal with a cyan rim; gold primary --------------- */
html[data-skin="futuristic"] .btn,
html[data-skin="futuristic"] .apex-btn {
  background: var(--f-metal);
  color: #fff; border-color: var(--f-edge); border-radius: 10px; clip-path: none;
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .35), 0 0 10px rgba(64, 150, 255, .35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
html[data-skin="futuristic"] .btn--primary,
html[data-skin="futuristic"] .apex-btn--primary {
  background: linear-gradient(180deg, var(--f-gold-hi) 0, var(--f-gold) 50%, var(--f-gold-deep) 100%);
  color: #170f02; border-color: #fff0bf; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 14px rgba(255, 190, 60, .5);
}
html[data-skin="futuristic"] .btn--ghost,
html[data-skin="futuristic"] .apex-btn--ghost {
  background: rgba(12, 22, 62, .7); color: #fff; border-color: var(--f-edge-soft); text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
html[data-skin="futuristic"] .stopfilter__chip { background: rgba(12, 22, 62, .8); color: #fff; border-color: var(--f-edge-soft); }
html[data-skin="futuristic"] .stopfilter__chip.is-on { background: var(--f-gold); color: #170f02; border-color: #fff0bf; }
html[data-skin="futuristic"] input,
html[data-skin="futuristic"] select,
html[data-skin="futuristic"] textarea {
  background: rgba(6, 12, 40, .9); color: #fff; border-color: var(--f-edge-soft); border-radius: 8px;
}

/* ---------- top bar: glass pills with a light edge --------------------- */
html[data-skin="futuristic"] .topbar2 { background: transparent; }
html[data-skin="futuristic"] .profile__btn,
html[data-skin="futuristic"] .bell__btn,
html[data-skin="futuristic"] .gear {
  background: radial-gradient(circle at 50% 35%, #1d2f72, #0a133e 70%); color: #fff;
  border-color: var(--f-edge);         /* rim drawn by shadow: border width stays the default's (layout frozen) */
  box-shadow: inset 0 0 0 .5px var(--f-edge), 0 0 10px var(--f-glow), inset 0 1px 0 rgba(190, 225, 255, .35);
}
html[data-skin="futuristic"] .acctbox {
  background: linear-gradient(180deg, rgba(20, 34, 88, .92), rgba(8, 14, 46, .94)); color: #fff;
  border-color: var(--f-edge); border-radius: 12px;
  box-shadow: inset 0 0 0 .5px var(--f-edge), 0 0 12px var(--f-glow), inset 0 1px 0 rgba(190, 225, 255, .25);
}
html[data-skin="futuristic"] .acctbox__stop { color: #fff; }
html[data-skin="futuristic"] .acctbox__k { color: var(--apex-text-dim); }
html[data-skin="futuristic"] .profile__panel,
html[data-skin="futuristic"] .bell__panel,
html[data-skin="futuristic"] .appmenu__panel,
html[data-skin="futuristic"] details > .appmenu__list {
  background: linear-gradient(180deg, #132260, #0a1442); color: #fff;
  border-color: var(--f-edge); border-radius: 12px;
  box-shadow: 0 0 16px var(--f-glow), 0 14px 30px rgba(0, 0, 0, .55);
}
html[data-skin="futuristic"] .modepill { border-color: #fff0bf; box-shadow: 0 0 12px rgba(255, 190, 60, .45); }
html[data-skin="futuristic"] .modepill[data-mode="demo"] {
  background: linear-gradient(180deg, var(--f-gold-hi), var(--f-gold) 55%, var(--f-gold-deep)); color: #170f02;
}
html[data-skin="futuristic"] .modepill[data-mode="live"] { background: linear-gradient(180deg, #ff9aa8, #e0485f); color: #fff; border-color: #ffd0d6; }
html[data-skin="futuristic"] .bookline__label { background: rgba(18, 32, 84, .9); }

/* ---------- the floating bottom bar: glass deck, gold active pill ------ */
@media (max-width: 768px) {
  html[data-skin="futuristic"] .sitenav--tabs {
    background: linear-gradient(180deg, rgba(16, 28, 76, .96), rgba(6, 11, 38, .98));
    border-color: var(--f-edge); border-radius: 22px;
    box-shadow: inset 0 0 0 .5px var(--f-edge), 0 0 18px var(--f-glow), inset 0 1px 0 rgba(170, 215, 255, .3), 0 12px 26px rgba(0, 0, 0, .55);
  }
  html[data-skin="futuristic"] .sitenav--tabs .sitenav__item { color: #fff; }
  html[data-skin="futuristic"] .sitenav--tabs .sitenav__item.is-active .sitenav__glyph {
    background: linear-gradient(180deg, var(--f-gold-hi), var(--f-gold) 55%, var(--f-gold-deep));
    color: #170f02; box-shadow: 0 0 12px rgba(255, 190, 60, .6), inset 0 0 0 1px #fff0bf;
  }
}
html[data-skin="futuristic"] .sitenav--side { background: linear-gradient(180deg, #101c4c, #070d30); border-right-color: var(--f-edge); }
html[data-skin="futuristic"] .sitenav__item { color: #fff; }

/* ---------- the world: one art plate, places laid on its buildings ---- */
html[data-skin="futuristic"] .panel.world { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
html[data-skin="futuristic"] .world__map {
  display: block; position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1320 / 1545; min-height: 0; padding: 0;
  container-type: inline-size;
  /* the plate, plus a night haze over the top-left corner where the baked
     account card was removed (an overlay colour, not a warp) */
  background:
    radial-gradient(42% 7% at 16% 0, rgba(8, 12, 40, .9), rgba(8, 12, 40, 0)) no-repeat,
    #101a48 url("../img/skins/futuristic/world-future.webp") center / cover no-repeat;
  border: 0; border-radius: 16px;
  /* light-edge frame drawn as a ring: never changes the box, so the plate
     box keeps the plate's exact aspect ratio */
  box-shadow: 0 0 0 1.5px var(--f-edge), 0 0 22px rgba(64, 150, 255, .45);
  overflow: hidden;
}

/* places become hotspots over their buildings (all %, of the plate) */
html[data-skin="futuristic"] .place {
  position: absolute; display: block; padding: 0; min-height: 0;
  background: transparent; border: 0; border-radius: 12px; box-shadow: none; color: #fff;
  transform-origin: 50% 60%;
}
html[data-skin="futuristic"] .place.is-zoomed {
  transform: scale(1.05); border: 0;
  box-shadow: 0 0 0 2px rgba(111, 214, 255, .9), 0 0 26px rgba(111, 214, 255, .55);
}
html[data-skin="futuristic"] .place__art {
  position: absolute; width: auto; height: auto; border-radius: 10px; background: none; overflow: visible;
}
/* name = real text on the blanked sign: gold light letters, as the render */
html[data-skin="futuristic"] .place__name {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-face); font-weight: 900; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1; white-space: nowrap;
  color: #ffd877; font-size: 3.4cqw;
  text-shadow: 0 0 1px #3a2500, 0 0 6px rgba(255, 180, 60, .75), 0 1px 2px rgba(0, 0, 0, .85);
}
/* sub = the live line on a small glass tag over the render's second sign */
html[data-skin="futuristic"] .place__sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: max(10px, 2.4cqw); font-weight: 700; line-height: 1.2;
  padding: .12rem .5rem; border-radius: 6px;
  background: rgba(6, 12, 40, .92); color: #fff; border: 1px solid var(--f-edge);
  box-shadow: 0 0 8px var(--f-glow);
}

/* Prop Farm — glass greenhouse barn + silo; gold-on-navy sign in the field */
html[data-skin="futuristic"] .place--prop  { left: 2%; top: 5%; width: 54%; height: 25%; }
html[data-skin="futuristic"] .place--prop .place__art  { left: .5%; top: 2%; width: 82.8%; height: 67.3%; }
html[data-skin="futuristic"] .place--prop .place__name { left: 30%; top: 70.6%; width: 47%; height: 16%; font-size: 3.9cqw; }
html[data-skin="futuristic"] .place--prop .place__sub  { left: 53.4%; top: 88%; }

/* Forex Factory — the plant on the river, big sign + the small panel */
html[data-skin="futuristic"] .place--forex { left: 47%; top: 30%; width: 51.5%; height: 35%; }
html[data-skin="futuristic"] .place--forex .place__art  { left: 2.9%; top: 2.1%; width: 95.6%; height: 47%; }
html[data-skin="futuristic"] .place--forex .place__name { left: 17.6%; top: 49.8%; width: 57.7%; height: 12.9%; font-size: 3.05cqw; }
html[data-skin="futuristic"] .place--forex .place__sub  { left: 45.8%; top: 64.8%; }

/* Plexy Market — the glass arcade, arch sign + the pill */
html[data-skin="futuristic"] .place--plexy { left: 1%; top: 62%; width: 72%; height: 32%; }
html[data-skin="futuristic"] .place--plexy .place__art  { left: 0; top: 44%; width: 100%; height: 56%; }
html[data-skin="futuristic"] .place--plexy .place__name { left: 28.3%; top: 20%; width: 40.2%; height: 12.9%; font-size: 3.3cqw; }
html[data-skin="futuristic"] .place--plexy .place__sub  { left: 48.4%; top: 33.4%; }

/* plexy status sign: a glass plate with a light edge */
html[data-skin="futuristic"] .worldsign {
  right: 3%; bottom: 2.5%;
  background: rgba(6, 12, 40, .92); color: #fff;
  border-color: var(--f-edge); border-radius: 8px; box-shadow: 0 0 10px var(--f-glow);
}
html[data-skin="futuristic"] .worldsign[data-state="ok"] { border-color: var(--apex-ok); }
html[data-skin="futuristic"] .worldsign[data-state="warn"] { border-color: var(--apex-warn); }

/* ---------- movement 1: the waterfalls (home) --------------------------
   .world__road (the default look's dashed road; an aria-hidden decoration)
   becomes the water window: it covers the plate and is MASKED to the
   waterfalls' own water (falls-mask.webp, same grid as the plate). Inside
   it two drawn streak layers translate straight down, seamlessly (one tile
   per loop). Only the water area shows them; the plate itself never moves. */
html[data-skin="futuristic"] .world__road {
  display: block; position: absolute; z-index: 0;
  left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; margin: 0;
  border-radius: 0; opacity: 1; pointer-events: none; overflow: hidden;
  background: none;
  -webkit-mask-image: url("../img/skins/futuristic/falls-mask.webp");
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
  mask-image: url("../img/skins/futuristic/falls-mask.webp");
  mask-size: 100% 100%; mask-repeat: no-repeat;
}
html[data-skin="futuristic"] .world__road::before,
html[data-skin="futuristic"] .world__road::after {
  content: ""; position: absolute; left: 0; width: 100%; pointer-events: none;
  will-change: transform;
}
html[data-skin="futuristic"] .world__road::before {
  top: -64px; height: calc(100% + 64px);
  background: url("../img/skins/futuristic/water-streaks.webp") 0 0 / 32px 64px repeat;
  opacity: .95;
  animation: f-fall .62s linear infinite;
}
html[data-skin="futuristic"] .world__road::after {
  top: -54px; height: calc(100% + 54px);
  background: url("../img/skins/futuristic/water-streaks-2.webp") 11px 0 / 44px 54px repeat;
  opacity: .6;
  animation: f-fall-2 .95s linear infinite;
}
@keyframes f-fall   { from { transform: translateY(0); } to { transform: translateY(64px); } }
@keyframes f-fall-2 { from { transform: translateY(0); } to { transform: translateY(54px); } }

/* ---------- movement 2: craft lights crossing the sky (home) ----------
   The render's own craft, cut off their sky; each flies a path above the
   farm and the city, fading in and out at the edges of its run. */
html[data-skin="futuristic"] .world__map::before,
html[data-skin="futuristic"] .world__map::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; left: 0;
  background: center / contain no-repeat; will-change: transform, opacity;
  filter: drop-shadow(0 0 3px rgba(120, 190, 255, .55));
}
/* the jet over the moon — flies right, gently climbing */
html[data-skin="futuristic"] .world__map::before {
  top: 2.6%; width: 9.5%; aspect-ratio: 126 / 47;
  background-image: url("../img/skins/futuristic/craft-jet.webp");
  animation: f-jet 17s linear infinite;
}
/* the far ship over the city — flies left, smaller (distance) */
html[data-skin="futuristic"] .world__map::after {
  top: 8.5%; width: 7%; aspect-ratio: 155 / 62;
  background-image: url("../img/skins/futuristic/craft-far.webp");
  animation: f-far 24s linear infinite; animation-delay: -9s;
}
@keyframes f-jet {
  0%   { transform: translate(-130%, 70%);  opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translate(480%, 0);     opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate(1080%, -45%); opacity: 0; }
}
@keyframes f-far {
  0%   { transform: translate(1450%, 0) scale(.92);    opacity: 0; }
  6%   { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translate(-150%, 55%) scale(1.04); opacity: 0; }
}

/* ---------- movement 3: beacons on the stacks + silo, the globe ------- */
html[data-skin="futuristic"] .place--forex::before,
html[data-skin="futuristic"] .place--forex::after,
html[data-skin="futuristic"] .place--prop::before {
  content: ""; position: absolute; pointer-events: none;
  width: 2.6%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #ff5a6e 30%, rgba(255, 60, 90, .55) 52%, rgba(255, 60, 90, 0) 72%);
  opacity: 0; animation: f-beacon 2.4s steps(1, end) infinite;
}
html[data-skin="futuristic"] .place--forex::before { left: 68.8%; top: 2.9%; }
html[data-skin="futuristic"] .place--forex::after  { left: 83.6%; top: 2.1%; animation-delay: -1.2s; }
html[data-skin="futuristic"] .place--prop::before  {
  left: 89.4%; top: -19%; width: 3%;
  background: radial-gradient(circle, #fff 0 18%, #9fe6ff 32%, rgba(120, 200, 255, .5) 52%, rgba(120, 200, 255, 0) 72%);
  animation-duration: 3.1s; animation-delay: -.7s;
}
@keyframes f-beacon {
  0%  { opacity: 1; }
  12% { opacity: .35; }
  20% { opacity: 1; }
  32% { opacity: 0; }
  100% { opacity: 0; }
}
/* the hologram globe in front of the market breathes */
html[data-skin="futuristic"] .place--plexy::before {
  content: ""; position: absolute; pointer-events: none;
  left: 7.6%; top: 66.2%; width: 20%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 220, 255, .45) 0, rgba(80, 170, 255, .28) 45%, rgba(80, 170, 255, 0) 70%);
  opacity: .25; animation: f-glow 3.6s ease-in-out infinite alternate;
}
@keyframes f-glow { from { opacity: .2; } to { opacity: .85; } }

/* ---------- the travel object: the render's hover craft (UFO) ---------
   app.js moves #traveller with an inline transform; the craft art rides
   on its ::before so the craft can hover without touching that transform. */
html[data-skin="futuristic"] .traveller {
  left: -21px; top: -15px; width: 42px; height: 29px; border-radius: 0;
  box-shadow: none; background: none;
}
html[data-skin="futuristic"] .traveller::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/skins/futuristic/craft-drone.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 210, 120, .7));
  animation: f-hover 2.8s ease-in-out infinite alternate;
}
@keyframes f-hover { from { transform: translateY(-2px); } to { transform: translateY(2px); } }

/* ---------- summary sheet: solid navy glass, light edge -------------- */
html[data-skin="futuristic"] .stopsheet {
  background: var(--sheet-solid); background-image: none;
  border-color: var(--f-edge); border-radius: 16px; color: var(--f-ink);
  box-shadow: 0 0 22px var(--f-glow);
}
html[data-skin="futuristic"] .stopsheet::backdrop { background: rgba(3, 6, 22, .78); }

/* ---------- login: night sky + craft, the falls scene, glass keypad ----
   The sky is the default look's fixed .arena backdrop re-dressed: sampled
   night-to-sunset sky, three of the render's craft crossing it. The scene
   band sits directly above the Member Access card, as in the render; the
   card is dark glass with metal keys, white digits and a gold Enter bar. */
html[data-skin="futuristic"] body.page-login { background: #070b26; }
html[data-skin="futuristic"] .page-login .arena__aurora,
html[data-skin="futuristic"] .page-login .arena__city,
html[data-skin="futuristic"] .page-login .arena__haze,
html[data-skin="futuristic"] .page-login .arena__ring,
html[data-skin="futuristic"] .page-login .arena__floor,
html[data-skin="futuristic"] .page-login .arena__motes,
html[data-skin="futuristic"] .page-login .arena__shards,
html[data-skin="futuristic"] .page-login .arena__sparks,
html[data-skin="futuristic"] .page-login .arena__beams i:nth-child(n+4),
html[data-skin="futuristic"] .page-login .arena__sky::before,
html[data-skin="futuristic"] .page-login .arena__sky::after { display: none !important; }
html[data-skin="futuristic"] .page-login .arena__sky {
  inset: 0; animation: none; filter: none;
  background:
    radial-gradient(1px 1px at 8% 6%, #fff, transparent 70%),
    radial-gradient(1px 1px at 23% 15%, #dfe9ff, transparent 70%),
    radial-gradient(1.5px 1.5px at 41% 4%, #fff, transparent 70%),
    radial-gradient(1px 1px at 57% 19%, #fff, transparent 70%),
    radial-gradient(1px 1px at 74% 9%, #cfe0ff, transparent 70%),
    radial-gradient(1.5px 1.5px at 91% 22%, #fff, transparent 70%),
    radial-gradient(1px 1px at 33% 31%, #fff, transparent 70%),
    radial-gradient(1px 1px at 84% 36%, #dfe9ff, transparent 70%),
    radial-gradient(70% 40% at 88% 18%, rgba(150, 170, 255, .22), rgba(150, 170, 255, 0) 70%),
    radial-gradient(90% 34% at 70% 100%, rgba(255, 150, 120, .38), rgba(255, 150, 120, 0) 70%),
    linear-gradient(180deg, #060a24 0, #0d1745 26%, #22296f 52%, #4a3b8e 72%, #8a5ba3 88%, #c47a98 100%);
}
html[data-skin="futuristic"] .page-login .arena__beams {
  top: 0; left: 0; width: 100%; height: 100%; transform: none; animation: none;
}
html[data-skin="futuristic"] .page-login .arena__beams i {
  top: 0; left: 0; height: auto; transform-origin: 50% 50%; filter: drop-shadow(0 0 3px rgba(120, 190, 255, .6));
  opacity: 0; background: center / contain no-repeat; will-change: transform, opacity;
}
/* a: the big ship, flying left high across the sky */
html[data-skin="futuristic"] .page-login .arena__beams i:nth-child(1) {
  top: 9vh; width: min(34vw, 170px); aspect-ratio: 148 / 55;
  background-image: url("../img/skins/futuristic/craft-login-a.webp");
  animation: f-sky-a 19s linear infinite; animation-delay: -4s;
}
/* b: the small far ship, flying right lower down */
html[data-skin="futuristic"] .page-login .arena__beams i:nth-child(2) {
  top: 34vh; width: min(20vw, 104px); aspect-ratio: 132 / 33;
  background-image: url("../img/skins/futuristic/craft-login-b.webp");
  animation: f-sky-b 27s linear infinite; animation-delay: -15s;
}
/* c: the home render's jet, crossing right near the top */
html[data-skin="futuristic"] .page-login .arena__beams i:nth-child(3) {
  top: 21vh; width: min(24vw, 120px); aspect-ratio: 126 / 47;
  background-image: url("../img/skins/futuristic/craft-jet.webp");
  animation: f-sky-c 23s linear infinite; animation-delay: -19s;
}
@keyframes f-sky-a {
  0%   { transform: translate(105vw, 0);       opacity: 0; }
  4%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translate(-45vw, 5vh);     opacity: 0; }
}
@keyframes f-sky-b {
  0%   { transform: translate(-30vw, 3vh) scale(.9); opacity: 0; }
  6%   { opacity: .9; }
  92%  { opacity: .9; }
  100% { transform: translate(110vw, -4vh) scale(1.05); opacity: 0; }
}
@keyframes f-sky-c {
  0%   { transform: translate(-35vw, 4vh);  opacity: 0; }
  5%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { transform: translate(110vw, -6vh); opacity: 0; }
}

html[data-skin="futuristic"] .page-login .ticker {
  background: linear-gradient(180deg, rgba(14, 26, 72, .96), rgba(6, 11, 38, .96)); color: #fff;
  border-bottom-color: var(--f-edge); box-shadow: 0 0 14px var(--f-glow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-skin="futuristic"] .page-login .brand__text strong {
  font-family: var(--f-face); letter-spacing: .06em;
  color: #eef3ff; text-shadow: 0 1px 0 #6b7aa8, 0 2px 6px rgba(0, 0, 0, .7);
}
html[data-skin="futuristic"] .page-login .brand__text em { color: var(--f-gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); letter-spacing: .2em; }
/* titles: chrome-silver lead, gold hero — as the render's WELCOME TO / YOUR WORLD */
html[data-skin="futuristic"] .page-login .pitch__title { font-family: var(--f-face); }
html[data-skin="futuristic"] .page-login .pitch__title-lead {
  color: #f1f5ff; -webkit-text-fill-color: #f1f5ff; background: none; filter: none;
  text-shadow: 0 2px 0 #59678f, 0 4px 12px rgba(0, 0, 0, .7);
}
html[data-skin="futuristic"] .page-login .pitch__title-hero {
  color: var(--f-gold); -webkit-text-fill-color: var(--f-gold); background: none; animation: none; filter: none;
  text-shadow: 0 2px 0 #8a5300, 0 0 14px rgba(255, 180, 60, .45), 0 4px 12px rgba(0, 0, 0, .7);
}
html[data-skin="futuristic"] .page-login .pitch__eyebrow { color: var(--f-gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
html[data-skin="futuristic"] .page-login .pitch__lead,
html[data-skin="futuristic"] .page-login .pitch__body { color: #f2f6ff; text-shadow: 0 1px 3px rgba(0, 0, 0, .95); }
html[data-skin="futuristic"] .page-login .pitch__lead strong,
html[data-skin="futuristic"] .page-login .pitch__body strong { color: var(--f-gold); }
html[data-skin="futuristic"] .page-login .perk.apex-panel,
html[data-skin="futuristic"] .page-login .quote.apex-panel { filter: none; }
html[data-skin="futuristic"] .page-login .perk h2 { color: var(--apex-cyan); font-family: var(--f-face); letter-spacing: .05em; }
html[data-skin="futuristic"] .page-login .perk p,
html[data-skin="futuristic"] .page-login .quote { color: var(--f-ink); }

/* the scene band, right above the card (the render's falls, road, city) */
html[data-skin="futuristic"] .page-login .gate {
  position: relative; padding-top: 204px;
  --sh: 236px;                               /* scene height */
  --wi: calc(var(--sh) * 1320 / 348);        /* the band's width at that height (aspect kept) */
}
html[data-skin="futuristic"] .page-login .gate::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, 760px); height: var(--sh); z-index: 0; pointer-events: none;
  background: url("../img/skins/futuristic/login-scene.webp") 50% 0 / auto 100% 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 band's three waterfalls: a flipbook laid exactly over them (same
   height, same centre, so it lands on the band's own pixels) */
html[data-skin="futuristic"] .page-login .gate::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% - var(--wi) / 2 + var(--wi) * 372 / 1320);
  top: calc(var(--sh) * 8 / 348);
  width: calc(var(--wi) * 298 / 1320);
  height: calc(var(--sh) * 172 / 348);
  background: url("../img/skins/futuristic/login-falls.webp") 0 0 / 100% 1600% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25) 0, #000 28%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25) 0, #000 28%);
  animation: f-falls-flip .96s steps(16) infinite;
}
@keyframes f-falls-flip {
  from { background-position: 0 0; }
  to   { background-position: 0 106.6667%; }
}
html[data-skin="futuristic"] .page-login .gate > * { position: relative; z-index: 1; }
html[data-skin="futuristic"] .page-login .login.apex-panel {
  background: linear-gradient(180deg, rgba(18, 34, 92, .97), rgba(8, 15, 52, .98) 55%, rgba(6, 11, 40, .98));
  border-color: var(--f-edge); border-radius: 18px; clip-path: none; filter: none;
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .35), inset 0 0 26px rgba(64, 150, 255, .14),
              0 0 22px rgba(64, 150, 255, .5), 0 18px 36px rgba(0, 0, 0, .55);
  color: var(--f-ink);
}
html[data-skin="futuristic"] .page-login .login.apex-panel::before { display: none; }
html[data-skin="futuristic"] .page-login .code__slot {
  background: linear-gradient(180deg, rgba(60, 140, 255, .28), rgba(20, 60, 150, .18));
  border-color: #6cb8ff; border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(120, 200, 255, .3), 0 0 8px rgba(64, 150, 255, .35);
}
html[data-skin="futuristic"] .page-login .code__slot.is-filled { background: linear-gradient(180deg, rgba(110, 190, 255, .45), rgba(40, 100, 200, .3)); border-color: #bfe4ff; }
html[data-skin="futuristic"] .page-login .code__slot.is-next { border-color: var(--f-gold); }
html[data-skin="futuristic"] .page-login .code__slot::after { background: #fff; }
html[data-skin="futuristic"] .page-login .keypad .apex-btn--key,
html[data-skin="futuristic"] .page-login .keypad .apex-btn--ghost {
  background: var(--f-metal);
  color: #fff; border-color: #4aa3ff; border-radius: 10px; clip-path: none;
  font-family: var(--f-face); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .4), inset 0 -2px 6px rgba(0, 0, 0, .35), 0 0 9px rgba(64, 150, 255, .45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}
html[data-skin="futuristic"] .page-login .keypad .apex-btn--key:hover:not(:disabled) { filter: brightness(1.15); }
html[data-skin="futuristic"] .page-login .login__submit {
  background: linear-gradient(180deg, var(--f-gold-hi) 0, var(--f-gold) 50%, var(--f-gold-deep) 100%);
  color: #170f02; border-color: #fff0bf; border-radius: 12px; clip-path: none;
  font-family: var(--f-face); font-weight: 900; letter-spacing: .06em; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 16px rgba(255, 190, 60, .55);
}
html[data-skin="futuristic"] .page-login .login__submit:not(:disabled) { animation: none; }
html[data-skin="futuristic"] .page-login .login__submit:disabled { filter: none; opacity: .72; }
html[data-skin="futuristic"] .page-login .remember__box { background: rgba(6, 12, 40, .9); border-color: #6cb8ff; }
html[data-skin="futuristic"] .page-login .login__lead,
html[data-skin="futuristic"] .page-login .login__fine,
html[data-skin="futuristic"] .page-login .code__hint,
html[data-skin="futuristic"] .page-login .remember__text { color: #dfe8ff; }
html[data-skin="futuristic"] .page-login .sig__name { color: var(--f-gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
html[data-skin="futuristic"] .page-login .sig__role,
html[data-skin="futuristic"] .page-login .footer__fine { color: #dfe8ff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
html[data-skin="futuristic"] .page-login .topbar__chip {
  background: linear-gradient(180deg, #1a1408, #0b0904); color: var(--f-gold); border-color: var(--f-gold);
  box-shadow: 0 0 10px rgba(255, 190, 60, .35);
}
html[data-skin="futuristic"] .page-login .ticker .chip,
html[data-skin="futuristic"] .page-login .ticker .apex-chip { background: rgba(6, 12, 40, .9); color: #c9d6f5; border-color: #6a7bb0; }
html[data-skin="futuristic"] .page-login .pitch { min-width: 0; }
html[data-skin="futuristic"] .page-login .pitch__title { overflow-wrap: anywhere; }
html[data-skin="futuristic"] .page-login .pitch__eyebrow { white-space: normal; overflow-wrap: anywhere; }

/* panel heads ("Member access", perks): a lit name-plate, as the render */
html[data-skin="futuristic"] .apex-panel__head {
  display: inline-block; align-self: center; justify-self: center;
  padding: .35rem 1rem; border-radius: 8px;
  background: linear-gradient(180deg, #1c2c6a, #0b1442); color: #dff1ff;
  font-family: var(--f-face); letter-spacing: .12em;
  border: 1px solid var(--f-edge-soft); box-shadow: 0 0 10px var(--f-glow);
}
html[data-skin="futuristic"] .apex-panel__head::after { display: none; }

/* ---------- reduced motion: everything still ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="futuristic"] .world__road::before,
  html[data-skin="futuristic"] .world__road::after,
  html[data-skin="futuristic"] .world__map::before,
  html[data-skin="futuristic"] .world__map::after,
  html[data-skin="futuristic"] .place--forex::before,
  html[data-skin="futuristic"] .place--forex::after,
  html[data-skin="futuristic"] .place--prop::before,
  html[data-skin="futuristic"] .place--plexy::before,
  html[data-skin="futuristic"] .traveller::before,
  html[data-skin="futuristic"] .page-login .gate::after,
  html[data-skin="futuristic"] .page-login .arena__beams i { animation: none !important; }
  /* the craft park in the sky; the beacons show steady; the water still */
  html[data-skin="futuristic"] .world__map::before { transform: translate(470%, 0); opacity: 1; }
  html[data-skin="futuristic"] .world__map::after  { transform: translate(1100%, 10%); opacity: .9; }
  html[data-skin="futuristic"] .place--forex::before,
  html[data-skin="futuristic"] .place--forex::after,
  html[data-skin="futuristic"] .place--prop::before { opacity: .9; }
  html[data-skin="futuristic"] .place--plexy::before { opacity: .45; }
  html[data-skin="futuristic"] .world__road { display: none; }
  html[data-skin="futuristic"] .page-login .arena__beams i:nth-child(1) { transform: translate(58vw, 0); opacity: 1; }
  html[data-skin="futuristic"] .page-login .arena__beams i:nth-child(2) { transform: translate(8vw, 0); opacity: .9; }
  html[data-skin="futuristic"] .page-login .arena__beams i:nth-child(3) { display: none; }
}

/* ---------- the app shell: the default look's neon layer is off ------- */
html[data-skin="futuristic"] body.app-body {
  background:
    radial-gradient(1px 1px at 12% 40px, #fff, transparent 60%),
    radial-gradient(1px 1px at 37% 110px, #dfe9ff, transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 70px, #fff, transparent 60%),
    radial-gradient(1px 1px at 88% 150px, #cfe0ff, transparent 60%),
    linear-gradient(180deg, #060a24 0, #0c1540 280px, #1a2263 620px, #2b2a78 900px, #121a4c 100%);
  background-attachment: fixed;
}
html[data-skin="futuristic"] body.app-body::before,
html[data-skin="futuristic"] body.app-body::after { display: none; }
html[data-skin="futuristic"] body.app-body .app-header {
  background: color-mix(in srgb, #0a1442 86%, transparent);
  border-bottom-color: var(--f-edge); border-image: none;
  box-shadow: 0 0 16px rgba(64, 150, 255, .35);
}
html[data-skin="futuristic"] body.app-body .boot-veil { background: linear-gradient(180deg, #060a24, #1a2263); }
html[data-skin="futuristic"] .appmenu__btn,
html[data-skin="futuristic"] .acctpicker__btn {
  background: linear-gradient(180deg, rgba(20, 34, 88, .95), rgba(8, 14, 46, .95)); color: #fff;
  border-color: var(--f-edge); border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--f-edge), 0 0 10px var(--f-glow);
}
html[data-skin="futuristic"] .appmenu__panel,
html[data-skin="futuristic"] .acctpicker__panel {
  background: linear-gradient(180deg, #132260, #0a1442); color: #fff; border-color: var(--f-edge); border-radius: 12px;
}
html[data-skin="futuristic"] .appmenu__item { color: #fff; }
html[data-skin="futuristic"] .appmenu__group { color: var(--apex-cyan); }
html[data-skin="futuristic"] .toolicon { background: rgba(18, 32, 84, .85); border-color: var(--f-edge-soft); color: #fff; }
html[data-skin="futuristic"] body.app-body .app-footer__sig { color: var(--f-gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
html[data-skin="futuristic"] .chip { background: rgba(18, 32, 84, .9); color: #fff; }
html[data-skin="futuristic"] body.app-body .panel {
  border-color: var(--f-edge-soft); border-image: none;
  background: linear-gradient(180deg, rgba(22, 38, 94, .94), rgba(9, 16, 52, .95) 60%, rgba(7, 12, 42, .96));
  box-shadow: inset 0 1px 0 rgba(170, 215, 255, .28), 0 0 16px rgba(64, 150, 255, .28), 0 10px 26px rgba(0, 0, 0, .45);
  backdrop-filter: none;
}
html[data-skin="futuristic"] body.app-body .panel.world { border: 0; background: transparent; box-shadow: none; }
html[data-skin="futuristic"] body.app-body .panel::after { display: none; }
html[data-skin="futuristic"] body.app-body .panel--hero { border-color: var(--f-gold); border-image: none; }
html[data-skin="futuristic"] body.app-body .panel__head { border-bottom: 1px solid rgba(74, 163, 255, .35); border-image: none; }
html[data-skin="futuristic"] body.app-body .panel__title,
html[data-skin="futuristic"] body.app-body .subhead { text-shadow: none; }
html[data-skin="futuristic"] body.app-body .chip { box-shadow: none; text-shadow: none; border-color: var(--f-edge-soft); }
html[data-skin="futuristic"] body.app-body .btn--accent:not(:disabled),
html[data-skin="futuristic"] body.app-body .btn:not(.btn--primary):not(.btn--ghost):not(:disabled) {
  background: var(--f-metal); color: #fff; border-color: var(--f-edge); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .35), 0 0 10px rgba(64, 150, 255, .35); text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
html[data-skin="futuristic"] body.app-body .btn--primary:not(:disabled) {
  background: linear-gradient(180deg, var(--f-gold-hi) 0, var(--f-gold) 50%, var(--f-gold-deep) 100%);
  color: #170f02; border-color: #fff0bf; border-radius: 10px; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 14px rgba(255, 190, 60, .5);
}
html[data-skin="futuristic"] body.app-body .btn--ghost:not(:disabled),
html[data-skin="futuristic"] body.app-body .viewbar__back {
  background: rgba(12, 22, 62, .75); color: #fff; border-color: var(--f-edge-soft); border-radius: 10px;
  box-shadow: none; text-shadow: none;
}
html[data-skin="futuristic"] body.app-body .btn:disabled { box-shadow: none; background: #1a2350; color: #8e9ac4; border-color: #3a4780; }
html[data-skin="futuristic"] body.app-body .stat {
  background: rgba(14, 26, 72, .9); border-color: rgba(74, 163, 255, .45); border-left-color: var(--f-gold);
  border-image: none; box-shadow: none; border-radius: 10px; color: #fff;
}
html[data-skin="futuristic"] body.app-body .offline-card { background: rgba(14, 22, 58, .9); box-shadow: none; border-color: #3a4780; color: #b4c4ea; }
html[data-skin="futuristic"] body.app-body .sitenav--side { border-image: none; box-shadow: 0 0 16px rgba(64, 150, 255, .3); }
html[data-skin="futuristic"] body.app-body .sitenav--tabs { border-color: var(--f-edge); }
html[data-skin="futuristic"] body.app-body .sitenav__item.is-active { text-shadow: none; }
html[data-skin="futuristic"] body.app-body .sitenav__item.is-active .sitenav__icon { filter: none; }
html[data-skin="futuristic"] body.app-body .stepup { box-shadow: 0 0 0 1.5px var(--f-edge), 0 0 26px var(--f-glow); background: var(--sheet-solid); color: #fff; }

/* calendar: glass day cells, gold week column */
html[data-skin="futuristic"] .cal__cell { background: rgba(14, 26, 72, .9); border-color: rgba(74, 163, 255, .4); color: #fff; }
html[data-skin="futuristic"] .cal__cell--pad { background: transparent; border-color: transparent; }
html[data-skin="futuristic"] .cal__cell--week { background: rgba(255, 203, 82, .1); border-color: rgba(255, 203, 82, .5); }
html[data-skin="futuristic"] .cal__cell--blank { border-color: #3a4780; }
html[data-skin="futuristic"] .cal__colhead--week { color: var(--f-gold); }

/* ---------- THE EYE (eye.html links this sheet) ----------------------
   It inherits the tokens above (glass, edge, gold, cyan) through eye.css.
   Futuristic = the circuit emblem v2 (the file eye.html already shows),
   framed here as a lit circuit plate; the sticky section bar becomes a
   glass deck. Nothing in eye.html / eye.css / eye.js is changed. */
html[data-skin="futuristic"] .eye-body {
  background:
    radial-gradient(1px 1px at 12% 40px, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 70px, #fff, transparent 60%),
    radial-gradient(1px 1px at 88% 150px, #cfe0ff, transparent 60%),
    linear-gradient(180deg, #060a24 0, #0c1540 320px, #1a2263 100%) fixed;
}
html[data-skin="futuristic"] .eye-hero__emblem {
  border-color: var(--f-edge); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(10, 20, 62, .9), 0 0 0 5.5px rgba(255, 203, 82, .85), 0 0 22px rgba(64, 150, 255, .6);
}
html[data-skin="futuristic"] .eye-hero__title {
  color: #f1f5ff; text-shadow: 0 1px 0 #59678f, 0 0 12px rgba(111, 214, 255, .45);
}
html[data-skin="futuristic"] .eye-hero__motto { color: var(--f-gold); }
html[data-skin="futuristic"] .eye-sections {
  background: linear-gradient(180deg, rgba(10, 18, 58, .97), rgba(7, 12, 40, .97));
  border-bottom: 1px solid var(--f-edge-soft);
}
html[data-skin="futuristic"] .eye-sec,
html[data-skin="futuristic"] .eye-tab {
  background: var(--f-metal); color: #fff; border-color: var(--f-edge-soft);
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .3);
}
html[data-skin="futuristic"] .eye-sec--on,
html[data-skin="futuristic"] .eye-tab--on {
  background: linear-gradient(180deg, var(--f-gold-hi), var(--f-gold) 55%, var(--f-gold-deep));
  border-color: #fff0bf; color: #170f02; box-shadow: 0 0 10px rgba(255, 190, 60, .5);
}
html[data-skin="futuristic"] .eye-card { box-shadow: inset 0 1px 0 rgba(170, 215, 255, .2), 0 0 12px rgba(64, 150, 255, .22); }
html[data-skin="futuristic"] .eye-paper { color: var(--f-gold); border-color: rgba(255, 203, 82, .6); }
html[data-skin="futuristic"] .eye-backlink { color: #8fdcff; }