/* RTWL.FUN futuristic skin. Loaded after /desk.css; every rule is scoped to body.fx so other pages are untouched.
   Palette from desk.css: field #f0fcf0, ink #144936, brand #19c155, brand-deep #0e7a36. */
body.fx {
  --fx-bg: #030f09;
  --fx-text: #e6fff0;
  --fx-dim: #a6d8bb;
  --fx-neon: #3dff8a;
  --fx-glass: rgba(8, 36, 23, 0.62);
  --fx-edge: rgba(61, 255, 138, 0.24);
  background: var(--fx-bg);
  color: var(--fx-text);
  position: relative;
  overflow-x: hidden;
}
body.fx a { color: inherit; }

/* ---- backdrop: nebula glow, starfield, perspective grid, scanlines ---- */
.fx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1100px 650px at 82% -8%, rgba(25, 193, 85, 0.24), transparent 62%),
    radial-gradient(900px 600px at -8% 38%, rgba(14, 122, 54, 0.30), transparent 62%),
    radial-gradient(700px 500px at 60% 110%, rgba(25, 193, 85, 0.14), transparent 60%),
    linear-gradient(180deg, #04150d 0%, #020a06 100%); }
.fx-bg i { position: absolute; display: block; }
.fx-bg .stars { top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; animation: fx-twinkle 5s ease-in-out infinite alternate;
  box-shadow: 45.2vw 56.0vh 0 rgba(160,255,200,.8),45.2vw 85.5vh 0 rgba(230,255,240,.9),18.5vw 51.2vh 0 rgba(255,255,255,.7),61.4vw 18.6vh 0 rgba(160,255,200,.8),30.3vw 9.1vh 0 rgba(255,255,255,.7),63.4vw 59.5vh 0 rgba(160,255,200,.8),96.5vw 65.4vh 0 rgba(255,255,255,.7),65.0vw 62.3vh 0 rgba(255,255,255,.7),6.3vw 3.6vh 0 rgba(230,255,240,.9),60.0vw 77.8vh 0 rgba(160,255,200,.8),44.1vw 84.2vh 0 rgba(255,255,255,.7),23.4vw 29.4vh 0 rgba(230,255,240,.9),66.2vw 45.7vh 0 rgba(160,255,200,.8),40.7vw 55.1vh 0 rgba(230,255,240,.9),70.8vw 31.5vh 0 rgba(230,255,240,.9),51.3vw 3.0vh 0 rgba(255,255,255,.7),76.6vw 40.0vh 0 rgba(160,255,200,.8),38.7vw 95.8vh 0 rgba(255,255,255,.7),0.1vw 21.0vh 0 rgba(230,255,240,.9),47.0vw 98.0vh 0 rgba(160,255,200,.8),42.0vw 56.6vh 0 rgba(230,255,240,.9),77.9vw 27.0vh 0 rgba(230,255,240,.9),31.1vw 1.5vh 0 rgba(160,255,200,.8),75.8vw 11.8vh 0 rgba(230,255,240,.9),70.7vw 1.1vh 0 rgba(160,255,200,.8),79.7vw 17.8vh 0 rgba(255,255,255,.7),18.8vw 50.9vh 0 rgba(255,255,255,.7),77.0vw 41.9vh 0 rgba(160,255,200,.8),11.7vw 42.1vh 0 rgba(230,255,240,.9),0.0vw 86.4vh 0 rgba(255,255,255,.7),30.4vw 88.5vh 0 rgba(230,255,240,.9),18.7vw 99.6vh 0 rgba(255,255,255,.7),64.2vw 10.0vh 0 rgba(230,255,240,.9),21.3vw 25.8vh 0 rgba(255,255,255,.7),32.9vw 29.6vh 0 rgba(230,255,240,.9),7.4vw 20.9vh 0 rgba(255,255,255,.7),24.3vw 60.1vh 0 rgba(160,255,200,.8),62.2vw 12.7vh 0 rgba(255,255,255,.7),48.4vw 57.5vh 0 rgba(160,255,200,.8),18.3vw 15.4vh 0 rgba(230,255,240,.9),81.8vw 24.9vh 0 rgba(230,255,240,.9),15.8vw 62.9vh 0 rgba(255,255,255,.7),19.7vw 95.0vh 0 rgba(160,255,200,.8),60.4vw 42.1vh 0 rgba(230,255,240,.9),10.9vw 51.2vh 0 rgba(160,255,200,.8),23.8vw 70.5vh 0 rgba(160,255,200,.8),42.1vw 90.5vh 0 rgba(160,255,200,.8),29.3vw 17.5vh 0 rgba(255,255,255,.7),97.7vw 12.6vh 0 rgba(160,255,200,.8),55.9vw 85.2vh 0 rgba(255,255,255,.7),7.4vw 21.2vh 0 rgba(230,255,240,.9),74.9vw 6.9vh 0 rgba(160,255,200,.8),44.6vw 6.0vh 0 rgba(230,255,240,.9),28.2vw 53.1vh 0 rgba(230,255,240,.9),9.2vw 13.8vh 0 rgba(160,255,200,.8),98.0vw 65.7vh 0 rgba(255,255,255,.7),52.2vw 94.7vh 0 rgba(255,255,255,.7),3.5vw 1.8vh 0 rgba(160,255,200,.8),70.1vw 96.3vh 0 rgba(230,255,240,.9),59.8vw 7.5vh 0 rgba(230,255,240,.9),73.0vw 31.9vh 0 rgba(230,255,240,.9),7.5vw 54.6vh 0 rgba(255,255,255,.7),4.4vw 93.6vh 0 rgba(255,255,255,.7),70.4vw 79.3vh 0 rgba(160,255,200,.8),35.2vw 68.5vh 0 rgba(230,255,240,.9),87.1vw 41.7vh 0 rgba(230,255,240,.9),86.3vw 57.3vh 0 rgba(255,255,255,.7),66.2vw 37.9vh 0 rgba(230,255,240,.9),60.9vw 8.0vh 0 rgba(255,255,255,.7),11.6vw 25.7vh 0 rgba(160,255,200,.8); }
.fx-bg .stars.s2 { width: 2px; height: 2px; animation-duration: 7s; animation-delay: -2s;
  box-shadow: 72.8vw 38.8vh 0 rgba(230,255,240,1),44.1vw 83.8vh 0 rgba(61,255,138,.95),51.9vw 51.5vh 0 rgba(230,255,240,1),60.1vw 48.1vh 0 rgba(61,255,138,.95),95.7vw 11.3vh 0 rgba(230,255,240,1),25.6vw 1.1vh 0 rgba(230,255,240,1),14.3vw 61.2vh 0 rgba(61,255,138,.95),75.4vw 34.3vh 0 rgba(230,255,240,1),49.8vw 24.1vh 0 rgba(230,255,240,1),66.6vw 19.9vh 0 rgba(230,255,240,1),80.4vw 75.5vh 0 rgba(61,255,138,.95),88.0vw 38.4vh 0 rgba(230,255,240,1),21.0vw 13.5vh 0 rgba(230,255,240,1),83.7vw 84.9vh 0 rgba(61,255,138,.95),95.0vw 27.7vh 0 rgba(61,255,138,.95),11.3vw 47.1vh 0 rgba(61,255,138,.95),83.1vw 38.3vh 0 rgba(230,255,240,1),67.2vw 71.6vh 0 rgba(230,255,240,1),32.0vw 82.9vh 0 rgba(230,255,240,1),87.3vw 4.1vh 0 rgba(230,255,240,1),57.1vw 30.9vh 0 rgba(61,255,138,.95),64.1vw 40.5vh 0 rgba(61,255,138,.95),2.5vw 83.0vh 0 rgba(61,255,138,.95),77.9vw 79.7vh 0 rgba(61,255,138,.95),44.6vw 63.0vh 0 rgba(230,255,240,1),95.8vw 68.4vh 0 rgba(61,255,138,.95),82.4vw 25.6vh 0 rgba(61,255,138,.95),75.5vw 53.5vh 0 rgba(61,255,138,.95),17.9vw 27.2vh 0 rgba(230,255,240,1),54.0vw 94.7vh 0 rgba(61,255,138,.95),39.4vw 79.2vh 0 rgba(61,255,138,.95),8.7vw 93.3vh 0 rgba(230,255,240,1),13.0vw 45.4vh 0 rgba(61,255,138,.95),37.7vw 56.9vh 0 rgba(230,255,240,1),46.4vw 65.1vh 0 rgba(61,255,138,.95); }
.fx-bg .grid { left: -50%; right: -50%; bottom: -8%; height: 62%;
  background-image:
    linear-gradient(rgba(61, 255, 138, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 255, 138, 0.26) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg); transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  opacity: 0.55; animation: fx-grid 6s linear infinite; }
.fx-bg .scan { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px); }
.fx-bg .scan::after { content: ""; position: absolute; left: 0; right: 0; height: 160px; top: -160px;
  background: linear-gradient(180deg, transparent, rgba(61, 255, 138, 0.07), transparent); animation: fx-sweep 11s linear infinite; }
@keyframes fx-twinkle { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes fx-grid { from { background-position: 0 0; } to { background-position: 0 64px; } }
@keyframes fx-sweep { to { transform: translateY(calc(100vh + 320px)); } }

/* ---- layout ---- */
body.fx .mast, body.fx main, body.fx footer { width: min(1080px, calc(100% - 32px)); }
body.fx .mast { padding: 40px 0 8px; }
.hero { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 24px; align-items: center; }
body.fx .mark { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 6px 14px; border-radius: 999px;
  color: var(--fx-neon); background: rgba(25, 193, 85, 0.10); border: 1px solid var(--fx-edge);
  font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; }
body.fx .mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fx-neon);
  box-shadow: 0 0 10px var(--fx-neon); animation: fx-pulse 2s ease-in-out infinite; }
body.fx h1 { color: #fff; filter: drop-shadow(0 0 22px rgba(25, 193, 85, 0.45)); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.fx h1 { background: linear-gradient(180deg, #ffffff 0%, #b8ffd2 42%, #19c155 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
body.fx .lede { color: var(--fx-dim); max-width: 32rem; }
body.fx .lede strong { color: var(--fx-neon); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cta a { text-decoration: none; font-weight: 600; padding: 12px 22px; border-radius: 999px; transition: transform .2s, box-shadow .2s; }
.cta .go { background: linear-gradient(180deg, #3dff8a, #19c155); color: #03140b; box-shadow: 0 0 24px rgba(25, 193, 85, 0.55); }
.cta .alt { border: 1px solid var(--fx-edge); background: rgba(25, 193, 85, 0.08); color: var(--fx-text); }
.cta a:hover { transform: translateY(-3px); box-shadow: 0 0 34px rgba(61, 255, 138, 0.6); }
body.fx a:focus-visible, body.fx button:focus-visible { outline: 3px solid var(--fx-neon); outline-offset: 3px; }

/* ---- rocket / orbit motif (pure CSS) ---- */
.orbit-art { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin: 0 auto; }
.orbit-art .planet { position: absolute; inset: 29%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #9dffc2 0%, #19c155 38%, #0e7a36 68%, #052e18 100%);
  box-shadow: 0 0 70px rgba(25, 193, 85, 0.55), inset -16px -20px 34px rgba(0, 0, 0, 0.55); animation: fx-float 7s ease-in-out infinite; }
.orbit-art .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(61, 255, 138, 0.38); }
.orbit-art .r1 { inset: 11%; animation: fx-spin 20s linear infinite; }
.orbit-art .r2 { inset: 0; border-style: dashed; border-color: rgba(61, 255, 138, 0.2); animation: fx-spin 46s linear infinite reverse; }
.orbit-art .ship { position: absolute; top: -17px; left: 50%; margin-left: -17px; width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 26px; line-height: 1; transform: rotate(45deg); filter: drop-shadow(0 0 8px rgba(61, 255, 138, 0.9)); }
.orbit-art .sat { position: absolute; bottom: -5px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--fx-neon); box-shadow: 0 0 14px var(--fx-neon); }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-float { 50% { transform: translateY(-6px); } }
@keyframes fx-pulse { 50% { opacity: 0.35; } }

/* ---- section headings ---- */
body.fx main { padding-top: 22px; }
body.fx h2 { display: flex; align-items: center; gap: 14px; color: var(--fx-neon); margin: 34px 0 16px; }
body.fx h2:first-child, body.fx main > h2:first-of-type { margin-top: 12px; }
body.fx h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(61, 255, 138, 0.55), transparent); }

/* ---- glass cards ---- */
body.fx .shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
body.fx .shelf.games { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
body.fx .card { position: relative; overflow: hidden; color: var(--fx-text);
  background: linear-gradient(160deg, rgba(25, 193, 85, 0.15), var(--fx-glass) 55%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--fx-edge); border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
body.fx .card::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(61, 255, 138, 0.13), transparent); transform: skewX(-18deg); transition: left .7s ease; }
body.fx .card:hover { transform: translateY(-6px); border-color: var(--fx-neon);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.5), 0 0 30px rgba(25, 193, 85, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
body.fx .card:hover::before { left: 130%; }
body.fx .card:focus-visible { outline: 3px solid var(--fx-neon); outline-offset: 3px; }
body.fx .card-plain { min-height: 0; align-content: start;
  background: linear-gradient(160deg, rgba(25, 193, 85, 0.15), var(--fx-glass) 55%); }
body.fx .card-plain.card-wide { align-content: start; }
body.fx .card img { background: #04150d; border: 1px solid var(--fx-edge); }
body.fx .card h3 { color: #fff; margin-top: 4px; text-shadow: 0 0 18px rgba(25, 193, 85, 0.35); }
body.fx .card p { color: var(--fx-dim); }
body.fx .card .status, body.fx .status { background: rgba(25, 193, 85, 0.16); color: #7dffb0; border: 1px solid rgba(61, 255, 138, 0.35); }
body.fx .card-feature { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 22px; padding: 22px;
  background: linear-gradient(120deg, rgba(25, 193, 85, 0.30), rgba(8, 36, 23, 0.7) 60%); border-color: rgba(61, 255, 138, 0.45); }
body.fx .card-feature h3 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
body.fx .card-feature .thumb { width: 96px; height: 96px; font-size: 3rem; }
body.fx .card .thumb { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; font-size: 1.9rem;
  background: radial-gradient(circle at 30% 25%, rgba(61, 255, 138, 0.35), rgba(14, 122, 54, 0.35));
  border: 1px solid var(--fx-edge); box-shadow: 0 0 20px rgba(25, 193, 85, 0.3); }

body.fx .card-wide { grid-column: auto; }
body.fx .card img { width: 148px; height: 200px; }
/* ---- hub panels, boards, forms ---- */
body.fx table.board { width: 100%; border-collapse: collapse; }
body.fx table.board td, body.fx table.board th { padding: 8px 10px; text-align: left; }
body.fx table.board td.num { text-align: right; font-variant-numeric: tabular-nums; }
body.fx table.board th { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
body.fx .panel { background: linear-gradient(160deg, rgba(25, 193, 85, 0.12), var(--fx-glass) 60%); border: 1px solid var(--fx-edge);
  border-radius: 20px; color: var(--fx-text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
body.fx .panel h3 { color: #fff; }
body.fx table.board td, body.fx table.board th { border-bottom-color: rgba(61, 255, 138, 0.16); }
body.fx table.board th { color: var(--fx-neon); }
body.fx .muted { color: var(--fx-dim); }
body.fx footer { color: var(--fx-neon); padding-top: 16px; border-top: 1px solid rgba(61, 255, 138, 0.16); display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
body.fx footer a { text-decoration: none; border-bottom: 1px dashed rgba(61, 255, 138, 0.5); }
body.fx footer a:hover { color: #fff; }
body.fx footer .fine { color: var(--fx-dim); font-size: 0.9rem; }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 6px; }
  .orbit-art { width: min(240px, 62vw); order: -1; margin-bottom: 4px; }
  body.fx .mast { padding-top: 24px; }
  body.fx .card-feature { grid-template-columns: 1fr; gap: 8px; }
  body.fx .card img { width: 100%; height: auto; max-height: 360px; }
  body.fx .card-feature .thumb { width: 72px; height: 72px; font-size: 2.2rem; }
  body.fx .fx-bg .grid { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-bg .stars, .fx-bg .grid, .fx-bg .scan::after, .orbit-art .planet, .orbit-art .ring, body.fx .mark::before { animation: none !important; }
  body.fx .card, body.fx .card::before, .cta a { transition: none !important; }
  body.fx .card:hover, .cta a:hover { transform: none; }
}