/* LuckyStudio WorldFX · 2026-10. Original CSS-only thematic art.
   Works on live Web editor AND exported owned START HTML. No franchise images,
   third-party logos, network APIs, heavy canvas or autoplaying media. */

/* Keep premium, lightweight headers across cinema/game worlds, never giant retro bars. */
.live-preview[data-world-variant] .live-topbar,
body[data-world-variant] header{
  background:color-mix(in srgb,var(--world-surface,#142637) 78%,#09121d)!important;
  border-bottom:1px solid color-mix(in srgb,var(--world-accent,#9adcb4) 48%,transparent)!important;
  box-shadow:0 2px 0 #0002;
}
.live-preview[data-world-variant] .live-logo,
body[data-world-variant] .brand{font-family:system-ui,sans-serif;font-weight:850;letter-spacing:-.045em}
body[data-world-variant] .header{min-height:71px;padding-block:16px}
body[data-world-variant] nav a:not(.nav-cta){font-family:system-ui,sans-serif;text-transform:none;letter-spacing:normal}
.live-preview[data-world-variant] .live-hero,
body[data-world-variant] .hero{position:relative;isolation:isolate;overflow:hidden}
.live-preview[data-world-variant] .live-hero::before,
body[data-world-variant] .hero::before{
  content:"";position:absolute;inset:-12%;z-index:-1;pointer-events:none;
  opacity:.7;
  background:radial-gradient(circle at 83% 27%,var(--world-accent,#9adcb4) 0,transparent 26%),
    repeating-linear-gradient(115deg,transparent 0 46px,#fff1 47px,transparent 48px);
  mask-image:linear-gradient(90deg,transparent 12%,#000 100%);
}
.live-preview[data-world-variant] .lw-world-name,
body[data-world-variant] .world-banner span{
  font-family:system-ui,sans-serif;font-weight:850;letter-spacing:.11em;text-transform:uppercase
}
.live-preview[data-world-variant] .live-cta,
body[data-world-variant] .cta{
  border-radius:12px;box-shadow:0 7px 24px color-mix(in srgb,var(--world-accent) 19%,transparent);
}
.live-preview[data-world-variant] .live-card,
body[data-world-variant] .content-section{
  border-radius:14px;border:1px solid color-mix(in srgb,var(--world-accent) 49%,transparent);
}
.live-preview[data-world-variant] .live-art:not(.with-photo),
body[data-world-variant] .hero-abstract{position:relative;isolation:isolate;overflow:hidden}
.live-preview[data-world-variant] .live-art:not(.with-photo)::before,
body[data-world-variant] .hero-abstract::before{
  content:"";position:absolute;inset:14%;border-radius:50%;pointer-events:none;
  border:2px solid color-mix(in srgb,var(--world-accent) 84%,#fff);
  box-shadow:0 0 0 13px color-mix(in srgb,var(--world-accent) 13%,transparent),
    0 0 0 43px color-mix(in srgb,var(--world-accent) 6%,transparent);
  animation:lw-world-orbit 10s ease-in-out infinite alternate;
}
/* Creature collection / Pokémon community: fan-made visuals and original cards.
   The text may describe Pokémon fandom; no Pokémon asset is packaged. */
.live-preview.layout-pixel-arcade[data-world-variant="pokemon-fan"],
body[data-style="pixel-arcade"][data-world-variant="pokemon-fan"]{
  --world-ink:#f8ffeb;--world-decoration:#ffde59;
}
.live-preview.layout-pixel-arcade[data-world-variant="pokemon-fan"] .live-hero,
body[data-style="pixel-arcade"][data-world-variant="pokemon-fan"] .hero{
  background:radial-gradient(ellipse at 83% 45%,#275b82 0,transparent 53%),
  linear-gradient(116deg,#0d2137,#183e64 55%,#17293c)!important;
}
.live-preview.layout-pixel-arcade[data-world-variant="pokemon-fan"] .live-art:not(.with-photo),
body[data-style="pixel-arcade"][data-world-variant="pokemon-fan"] .hero-abstract{
  clip-path:none!important;border-radius:24px!important;
  background:linear-gradient(155deg,#214e7a,#0c2543)!important;
  box-shadow:inset 0 1px #8bd0ff33,0 16px 35px #07121e99!important;
}
.live-preview.layout-pixel-arcade[data-world-variant="pokemon-fan"] .live-art:not(.with-photo)::before,
body[data-style="pixel-arcade"][data-world-variant="pokemon-fan"] .hero-abstract::before{
  inset:15%;border:12px solid #152539;
  background:radial-gradient(circle at center,#ffde59 0 13%,#13314d 14% 19%,transparent 20%),
    linear-gradient(180deg,#f36b62 0 46%,#112c42 47% 53%,#f4f0d9 54%);
  box-shadow:0 16px 35px #0715269c,0 0 0 10px #a7d6f31e;animation:lw-world-orbit 6s ease-in-out infinite alternate;
}
.live-preview.layout-pixel-arcade[data-world-variant="pokemon-fan"] .lw-world-crest,
body[data-style="pixel-arcade"][data-world-variant="pokemon-fan"] .world-crest{
  border-radius:50%;clip-path:none;background:linear-gradient(160deg,#eb6b62,#fbdc66);color:#102d48;
}
.live-preview.layout-pixel-arcade[data-world-variant="pokemon-fan"] .live-hero h3,
body[data-style="pixel-arcade"][data-world-variant="pokemon-fan"] h1{
  font-family:system-ui,sans-serif;font-weight:900;letter-spacing:-.065em
}
.live-preview.layout-pixel-arcade[data-world-variant="pokemon-fan"] .live-card,
body[data-style="pixel-arcade"][data-world-variant="pokemon-fan"] .content-section{
  background:linear-gradient(135deg,#173e5c,#142a45);color:#edf9fc;border-color:#f6d65b70;
}
.live-preview.layout-pixel-arcade[data-world-variant="creature-dex"] .live-hero,
body[data-style="pixel-arcade"][data-world-variant="creature-dex"] .hero{
  background:repeating-linear-gradient(90deg,transparent 0 67px,#a1ffe60b 68px 69px),
    linear-gradient(130deg,#0a2d31,#174e50)!important;
}
.live-preview.layout-pixel-arcade[data-world-variant="gym-arena"] .live-hero,
body[data-style="pixel-arcade"][data-world-variant="gym-arena"] .hero{
  background:radial-gradient(circle at 72% 32%,#d26c6c7a,transparent 32%),
    repeating-linear-gradient(0deg,transparent 0 38px,#ffd2c00e 39px),#231d36!important;
}
/* Cinematic world compositions: orbital command bridge / astral codex / neon city. */
.live-preview.layout-starfront[data-world-variant] .live-hero,
body[data-style="starfront"][data-world-variant] .hero{
  background:radial-gradient(circle at 80% 35%,color-mix(in srgb,var(--world-accent) 41%,transparent),transparent 27%),
    repeating-radial-gradient(circle at 86% 50%,#ffffff26 0 1px,transparent 2px 44px),
    linear-gradient(135deg,#09192e,#1a3756)!important;
}
.live-preview.layout-starfront[data-world-variant] .live-art:not(.with-photo),
body[data-style="starfront"][data-world-variant] .hero-abstract{
  clip-path:none!important;border:1px solid var(--world-accent);border-radius:20px!important;
  background:repeating-linear-gradient(90deg,transparent 0 31px,#ffffff1c 32px),
    linear-gradient(160deg,#153f5a,#081725)!important;
}
.live-preview.layout-starfront[data-world-variant] .live-art:not(.with-photo)::before,
body[data-style="starfront"][data-world-variant] .hero-abstract::before{
  inset:12% 21%;border-radius:50% 8% 50% 8%;transform:rotate(-22deg);
}
.live-preview.layout-arcane-codex[data-world-variant] .live-hero,
body[data-style="arcane-codex"][data-world-variant] .hero{
  background:radial-gradient(circle at 82% 47%,color-mix(in srgb,var(--world-accent) 32%,transparent),transparent 39%),
    repeating-conic-gradient(from 8deg at 83% 47%,#ffffff0a 0 3deg,transparent 4deg 22deg),#161b30!important;
}
.live-preview.layout-arcane-codex[data-world-variant] .live-art:not(.with-photo),
body[data-style="arcane-codex"][data-world-variant] .hero-abstract{
  clip-path:none!important;border-radius:50%!important;
  background:radial-gradient(circle,#7c71988a,#1a1e3d 60%,#101625)!important;
}
.live-preview.layout-neon-district[data-world-variant] .live-hero,
body[data-style="neon-district"][data-world-variant] .hero{
  background:linear-gradient(90deg,#101427dd,#121a3b88),
    repeating-linear-gradient(90deg,transparent 0 59px,var(--world-accent) 60px 61px,transparent 62px 84px),
    linear-gradient(140deg,#16112c,#312652)!important;
}
.live-preview.layout-neon-district[data-world-variant] .live-art:not(.with-photo),
body[data-style="neon-district"][data-world-variant] .hero-abstract{
  clip-path:none!important;border-radius:10px!important;
  background:linear-gradient(0deg,#080b18 0 20%,transparent 21%),
    repeating-linear-gradient(90deg,transparent 0 19%,#ffffff20 20% 21%,transparent 22% 25%),
    linear-gradient(145deg,#432468,#171a40)!important;
}
.live-preview.layout-wasteland-terminal[data-world-variant] .live-hero,
body[data-style="wasteland-terminal"][data-world-variant] .hero{
  background:repeating-linear-gradient(0deg,transparent 0 4px,#cfffb40a 5px),
    linear-gradient(135deg,#182a24,#293a2b)!important;
}
.live-preview.layout-wasteland-terminal[data-world-variant] .live-art:not(.with-photo),
body[data-style="wasteland-terminal"][data-world-variant] .hero-abstract{
  clip-path:none!important;border-radius:14px!important;
  background:repeating-linear-gradient(0deg,#121e16 0 6px,#192b1e 7px),
    linear-gradient(130deg,#2b3e27,#131f14)!important;
}
@keyframes lw-world-orbit{
  from{transform:translateY(0) rotate(-3deg)}
  to{transform:translateY(-8px) rotate(3deg)}
}
@media(max-width:700px){
  .live-preview[data-world-variant] .live-art:not(.with-photo)::before,
  body[data-world-variant] .hero-abstract::before{animation:none}
  body[data-world-variant] .hero{overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  .live-preview[data-world-variant] *,
  .live-preview[data-world-variant] *::before,
  body[data-world-variant] *,
  body[data-world-variant] *::before{animation-duration:0.001ms!important;transition-duration:0.001ms!important}
}


/* The fusion picker lives in the existing premium Web world controls, collapsed by default. */
.lw-world-fusions{border:1px solid #4d7266;border-radius:12px;background:#12251e;padding:10px 12px;color:#e1ffec}
.lw-world-fusions summary{font:800 13px/1.4 system-ui,sans-serif;cursor:pointer;padding:7px 3px;list-style-position:inside}
.lw-world-fusions summary:focus-visible{outline:2px solid #a5ffd0;outline-offset:4px}
.lw-world-fusions-hint{margin:8px 2px 11px;color:#bad6c8;font:500 12px/1.5 system-ui,sans-serif}
.lw-world-fusions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lw-world-fusion{display:grid;gap:5px;min-width:0;min-height:70px;padding:11px 12px;text-align:left;
  border:1px solid #42645a;border-radius:10px;background:#19352a;color:#eafff2;cursor:pointer;
  transition:background .16s,border-color .16s}
.lw-world-fusion strong{font:800 13px/1.3 system-ui,sans-serif}
.lw-world-fusion small{font:500 11px/1.4 system-ui,sans-serif;color:#b7d1c3}
.lw-world-fusion:hover,.lw-world-fusion.selected{background:#22523b;border-color:#89edb3}
.lw-world-fusion:focus-visible{outline:3px solid #abf9cc;outline-offset:2px}
@media(max-width:620px){.lw-world-fusions-grid{grid-template-columns:1fr}}

/* 2026 cinematic header harmonization: keep each world's character, prevent dated bars.
   Designed for editor preview AND exported static START pages. No JS menu dependency. */
.live-preview[data-world-variant] .live-topbar,
body[data-world-variant] header{
 position:relative!important;z-index:3;isolation:isolate;
 background:color-mix(in srgb,var(--world-surface,#13261c) 78%,#071014)!important;
 border-bottom:1px solid color-mix(in srgb,var(--world-accent,#b0dfb4) 44%,transparent)!important;
 box-shadow:0 9px 26px #0004,inset 0 1px #ffffff17!important;
}
body[data-world-variant] .header{min-height:72px!important;padding-block:14px!important;gap:20px}
.live-preview[data-world-variant] .live-topbar{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 min-height:65px!important;gap:16px!important;padding:13px clamp(15px,2vw,26px)!important
}
.live-preview[data-world-variant] .live-logo,
body[data-world-variant] header .brand{
 font-family:system-ui,sans-serif!important;
 font-size:clamp(17px,1.75vw,23px)!important;
 font-weight:850!important;letter-spacing:-.05em!important;
 color:#f4fff5!important;text-shadow:0 2px 12px #0007
}
.live-preview[data-world-variant] .live-nav,
body[data-world-variant] nav{display:flex;align-items:center;gap:clamp(9px,1.3vw,19px)!important}
.live-preview[data-world-variant] .live-nav span,
body[data-world-variant] nav a:not(.nav-cta){
 font:700 12px/1.4 system-ui,sans-serif!important;
 text-transform:none!important;letter-spacing:0!important;
 color:#d5e5de!important;opacity:1!important;white-space:nowrap
}
body[data-world-variant] nav a:not(.nav-cta):hover,
body[data-world-variant] nav a:not(.nav-cta):focus-visible{
 color:#fff!important;text-decoration:underline;text-decoration-color:var(--world-accent);
 text-underline-offset:6px
}
body[data-world-variant] .nav-cta{
 display:inline-flex;align-items:center;min-height:39px;padding:9px 14px;
 border:1px solid color-mix(in srgb,var(--world-accent) 60%,#fff);
 border-radius:9px;background:var(--world-accent)!important;
 color:#101612!important;text-shadow:none;box-shadow:0 5px 18px #0003
}
.live-preview[data-world-variant] .lwstudio-menu-glyph{
 flex:none;display:grid!important;place-items:center;
 width:27px;height:27px;border-radius:7px;border:1px solid #ffffff2a;
 background:#ffffff10;color:#d9ffeb;font-size:15px
}
.live-preview[data-world-variant] .live-hero,
body[data-world-variant] .hero{max-width:100%;min-width:0}
.live-preview[data-world-variant] .live-hero h3,
body[data-world-variant] .hero h1{overflow-wrap:anywhere}
@media(max-width:780px){
 body[data-world-variant] .header{display:flex!important;flex-wrap:wrap!important;min-height:0!important;padding-block:12px!important}
 body[data-world-variant] nav{flex:1 1 100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px;scrollbar-width:thin}
 body[data-world-variant] nav a{flex:none;min-height:34px;display:flex;align-items:center}
 .live-preview[data-world-variant] .live-topbar{min-height:54px!important;padding:10px 13px!important}
 .live-preview[data-world-variant] .live-nav{min-width:0;overflow-x:auto;white-space:nowrap}
 .live-preview[data-world-variant] .live-nav span{font-size:10px!important}
}
@media(max-width:450px){
 body[data-world-variant] nav{gap:9px!important}
 body[data-world-variant] .header .brand{font-size:20px!important}
 .live-preview[data-world-variant] .live-logo{font-size:15px!important}
 .live-preview[data-world-variant] .live-nav{gap:8px!important}
}
@media(prefers-reduced-motion:reduce){
 body[data-world-variant] header *, .live-preview[data-world-variant] .live-topbar *{
   animation:none!important;transition:none!important
 }
}