:root {
  --lx-bloom: .72;
  --lx-vfx: 1;
  --lx-sky: #101846;
  --lx-accent: #76e7ff;
  --lx-pink: #ff65b5;
  --lx-gold: #ffd568;
}

.lx-launcher {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top));
  z-index: 220;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 13px 8px 9px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(26, 36, 98, .96), rgba(106, 55, 155, .96));
  box-shadow: 0 13px 36px rgba(50, 49, 117, .36), inset 0 1px rgba(255,255,255,.24);
  font: 900 13px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lx-launcher b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #20315d; background: conic-gradient(#77e9ff, #ff8acb, #ffe376, #77e9ff); font-size: 18px; box-shadow: 0 0 16px #7deaffaa; }
.lx-launcher:hover { transform: translateY(-2px); }
.lx-launcher:focus-visible, .lx-console button:focus-visible, .lx-console input:focus-visible { outline: 3px solid #ff58ad; outline-offset: 3px; }

.lx-console {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  color: #eef6ff;
  background:
    radial-gradient(circle at 9% 12%, rgba(106, 226, 255, .2), transparent 34%),
    radial-gradient(circle at 91% 86%, rgba(255, 90, 181, .19), transparent 35%),
    linear-gradient(145deg, #08102b, #17143d 58%, #0d2442);
  font: 400 16px/1.45 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  overscroll-behavior: contain;
}
.lx-console[data-open="true"] { display: grid; grid-template-rows: auto auto 1fr; }
.lx-console * { box-sizing: border-box; }
.lx-console button, .lx-console input { font: inherit; }
.lx-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(17px, env(safe-area-inset-right)) 11px max(17px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(7, 13, 42, .8);
  backdrop-filter: blur(20px);
}
.lx-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lx-brand-mark { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 16px; color: #18244c; background: conic-gradient(from 30deg, #ff6db7, #ffe16c, #68e9ff, #9b7cff, #ff6db7); font-size: 21px; font-weight: 1000; box-shadow: 0 0 27px rgba(112, 229, 255, .35); }
.lx-brand small { display: block; color: #aebee2; font-size: .69rem; font-weight: 900; letter-spacing: .14em; }
.lx-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1rem, 2.5vw, 1.35rem); }
.lx-close { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; font-size: 1.45rem !important; }

.lx-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 10px max(17px, env(safe-area-inset-right)) 9px max(17px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(8, 14, 43, .66); scrollbar-width: thin; }
.lx-tab { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #b8c8e7; background: rgba(255,255,255,.05); cursor: pointer; font-weight: 900; }
.lx-tab[aria-selected="true"] { color: #18244c; border-color: transparent; background: linear-gradient(135deg, #70e8ff, #ffd76d); }
.lx-body { min-height: 0; overflow: auto; padding: 15px max(17px, env(safe-area-inset-right)) max(28px, calc(env(safe-area-inset-bottom) + 16px)) max(17px, env(safe-area-inset-left)); }
.lx-inner { width: min(1220px, 100%); margin: 0 auto; }
.lx-view { display: none; }
.lx-view[data-active="true"] { display: block; animation: lx-rise .35s ease both; }
@keyframes lx-rise { from { opacity: 0; transform: translateY(8px); } }
.lx-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin: 2px 0 15px; }
.lx-heading h2 { margin: 0; font: 900 clamp(1.7rem, 5vw, 3.4rem)/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; letter-spacing: -.045em; }
.lx-heading p { max-width: 560px; margin: 0; color: #b9c8e5; }
.lx-card { border: 1px solid rgba(255,255,255,.14); border-radius: 25px; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); box-shadow: 0 22px 55px rgba(0,0,0,.18); backdrop-filter: blur(17px); }
.lx-kicker { color: #75e6ff; font-size: .72rem; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
.lx-action { min-height: 43px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; color: #fff; background: rgba(255,255,255,.07); cursor: pointer; font-weight: 900; }
.lx-action--primary { color: #18244c; border-color: transparent; background: linear-gradient(135deg, #71e8ff, #ffd66d); }
.lx-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.lx-realms-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 14px; }
.lx-realms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lx-realm { position: relative; min-height: 170px; overflow: hidden; padding: 17px; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; color: #fff; background: radial-gradient(circle at 85% 15%, var(--realm-color), transparent 47%), rgba(255,255,255,.055); cursor: pointer; text-align: left; transition: transform .22s ease, border-color .22s ease; }
.lx-realm:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.4); }
.lx-realm[aria-current="true"] { outline: 3px solid #fff; outline-offset: 3px; }
.lx-realm::after { content: attr(data-glyph); position: absolute; right: 13px; bottom: -18px; color: rgba(255,255,255,.13); font-size: 82px; font-weight: 1000; }
.lx-realm small { display: block; margin-bottom: 8px; color: #c7d7ef; font-weight: 900; letter-spacing: .08em; }
.lx-realm b { display: block; max-width: 80%; font-size: 1.06rem; }
.lx-realm span { display: block; margin-top: 8px; color: #becbe3; font-size: .78rem; }
.lx-realm-detail { position: sticky; top: 0; align-self: start; overflow: hidden; padding: 22px; }
.lx-realm-orbit { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto 17px; }
.lx-realm-orbit::before, .lx-realm-orbit::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; animation: lx-orbit 9s linear infinite; }
.lx-realm-orbit::after { inset: 28px; border-color: #79e9ff; animation-duration: 5s; animation-direction: reverse; }
.lx-realm-orbit b { font-size: 3rem; text-shadow: 0 0 28px var(--realm-color, #76e7ff); }
@keyframes lx-orbit { to { transform: rotate(360deg); } }
.lx-realm-detail h3 { margin: 3px 0; font-size: 1.55rem; }
.lx-realm-detail p { color: #bdcbe4; }
.lx-progress { height: 10px; overflow: hidden; margin: 15px 0; border-radius: 999px; background: rgba(255,255,255,.08); }
.lx-progress i { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #61e4ff, #ff69b7, #ffd66f); transition: width .45s ease; }

.lx-memory-missions { margin: 18px 0; padding: 14px; border: 1px solid rgba(121,233,255,.2); border-radius: 18px; background: rgba(4,10,32,.35); }
.lx-memory-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.lx-memory-heading h4 { margin: 2px 0 0; font-size: 1.05rem; }
.lx-memory-heading > small, .lx-memory-empty { color: #aebddd; font-size: .74rem; }
.lx-memory-groups { display: grid; gap: 12px; max-height: 310px; overflow: auto; padding-right: 3px; scrollbar-color: #64deff rgba(255,255,255,.06); }
.lx-memory-group h5 { margin: 0 0 7px; color: #ffd66f; font-size: .7rem; letter-spacing: .13em; }
.lx-memory-grid { display: grid; grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 6px; }
.lx-memory-level { min-width: 0; min-height: 48px; padding: 6px 4px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #eef8ff; background: linear-gradient(145deg, rgba(97,228,255,.12), rgba(162,118,255,.11)); cursor: pointer; }
.lx-memory-level b, .lx-memory-level small { display: block; }
.lx-memory-level b { font-size: 1rem; }
.lx-memory-level small { margin-top: 2px; color: #b8c7e3; font-size: .52rem; font-weight: 900; letter-spacing: .04em; }
.lx-memory-level:hover, .lx-memory-level:focus-visible { border-color: #79e9ff; outline: none; background: linear-gradient(145deg, rgba(97,228,255,.27), rgba(255,105,183,.2)); box-shadow: 0 0 0 3px rgba(121,233,255,.12); }

.memory-replay-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(116,228,255,.6); border-radius: 16px; color: #eefbff; background: linear-gradient(120deg, rgba(21,31,78,.96), rgba(75,30,92,.94)); box-shadow: 0 8px 24px rgba(32,41,105,.2); }
.memory-replay-bar[hidden] { display: none; }
.memory-replay-bar div span, .memory-replay-bar div strong, .memory-replay-bar div small { display: block; }
.memory-replay-bar div span { color: #7eeaff; font-size: .68rem; font-weight: 1000; letter-spacing: .12em; }
.memory-replay-bar div small { color: #c6d5ec; font-size: .7rem; }
.memory-replay-bar button { min-height: 44px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 12px; color: #172953; background: linear-gradient(135deg, #7cecff, #ffe07b); font-weight: 1000; cursor: pointer; }
.memory-replay-bar button:focus-visible { outline: 3px solid #ff62b7; outline-offset: 3px; }
.memory-replay-active #boardWrap { box-shadow: 0 0 0 2px rgba(116,228,255,.35), 0 18px 55px rgba(80,75,196,.18); }
.memory-replay-note { padding: 10px 12px; border-left: 3px solid #72e8ff; color: #bfd5ea; background: rgba(90,216,255,.08); }

.lx-nyra-layout, .lx-boss-layout, .lx-vfx-layout { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(320px, 1.1fr); gap: 14px; }
.lx-nyra-stage { position: relative; display: grid; place-items: center; min-height: 530px; overflow: hidden; }
.lx-nyra-stage::before { content: ""; position: absolute; width: min(72%, 430px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; box-shadow: 0 0 0 38px rgba(112,232,255,.035), 0 0 0 76px rgba(255,100,182,.025); animation: lx-breathe 4s ease-in-out infinite; }
@keyframes lx-breathe { 50% { transform: scale(1.06); opacity: .7; } }
.lx-nyra-core { position: relative; z-index: 2; text-align: center; }
.lx-nyra-glyph { display: grid; place-items: center; width: 155px; height: 155px; margin: auto; border-radius: 48px; background: radial-gradient(circle at 35% 25%, #fff, #9eefff 24%, #9a73ff 67%, #381b6d); box-shadow: 0 0 70px rgba(112,230,255,.45); font-size: 76px; transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s; }
.lx-nyra-stage[data-evoking="true"] .lx-nyra-glyph { transform: scale(1.3) rotate(8deg); filter: brightness(1.5) saturate(1.2); }
.lx-nyra-core h3 { margin: 18px 0 3px; font-size: 1.65rem; }
.lx-forms { display: grid; gap: 9px; padding: 20px; }
.lx-form { display: grid; grid-template-columns: 48px 1fr auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.04); }
.lx-form[data-active="true"] { border-color: #78e8ff; background: linear-gradient(135deg, rgba(100,226,255,.14), rgba(255,101,183,.1)); }
.lx-form-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(255,255,255,.09); font-size: 27px; }
.lx-form b { display: block; }
.lx-form small { color: #afc0de; }
.lx-form em { color: #ffd66c; font-style: normal; font-size: .75rem; font-weight: 900; }
.lx-memory { padding: 20px; }

.lx-boss-stage { position: relative; min-height: 510px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(126,81,255,.2), transparent 38%), rgba(2,6,24,.5); }
.lx-boss-rings { position: absolute; width: min(70%, 430px); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.15); border-radius: 50%; animation: lx-orbit 12s linear infinite; }
.lx-boss-rings::before, .lx-boss-rings::after { content: ""; position: absolute; border: 1px solid rgba(116,230,255,.32); border-radius: 50%; }
.lx-boss-rings::before { inset: 14%; transform: rotate(58deg); }
.lx-boss-rings::after { inset: -12% 22%; border-color: rgba(255,94,180,.35); }
.lx-boss-entity { position: relative; z-index: 2; display: grid; place-items: center; width: 175px; height: 175px; border-radius: 50%; background: radial-gradient(circle at 46% 42%, #fff 0 5%, #ff76c2 7% 11%, #512a98 28%, #080c2c 68%); box-shadow: 0 0 70px rgba(255,90,188,.4), inset 0 0 32px rgba(255,255,255,.2); font-size: 2.8rem; }
.lx-boss-stage[data-phase="2"] { filter: hue-rotate(65deg); }
.lx-boss-stage[data-phase="3"] { animation: lx-fracture .42s steps(2) infinite; filter: saturate(1.35); }
@keyframes lx-fracture { 50% { transform: translateX(2px); } }
.lx-boss-caption { position: absolute; inset: auto 20px 18px; z-index: 3; text-align: center; }
.lx-boss-caption b { display: block; font-size: 1.25rem; }
.lx-boss-console { padding: 22px; }
.lx-phase-list { display: grid; gap: 8px; margin: 16px 0; }
.lx-phase { padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.045); }
.lx-phase[data-active="true"] { border-color: #ffd56a; background: rgba(255,213,106,.1); }
.lx-phase b { display: block; }
.lx-phase span { color: #b7c5df; font-size: .8rem; }

.lx-atlas-card { position: relative; min-height: min(70vh, 690px); overflow: hidden; }
#lx-atlas { width: 100%; height: min(70vh, 690px); display: block; }
#lx-atlas:focus-visible { outline: 3px solid #ff58ad; outline-offset: -5px; border-radius: 22px; }
.lx-atlas-detail { position: absolute; left: 18px; right: 18px; bottom: 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 15px 17px; border: 1px solid rgba(255,255,255,.16); border-radius: 19px; background: rgba(7,12,39,.76); backdrop-filter: blur(17px); }
.lx-atlas-detail b { display: block; font-size: 1.15rem; }
.lx-atlas-detail span { color: #b8c7e3; font-size: .82rem; }

.lx-vfx-preview { position: relative; min-height: 500px; overflow: hidden; display: grid; place-items: center; }
.lx-vfx-board { display: grid; grid-template-columns: repeat(6, 48px); gap: 6px; padding: 15px; border-radius: 28px; background: linear-gradient(145deg, #a4eaff, #c9beff 55%, #ffd0e7); box-shadow: 0 20px 80px rgba(93,126,255,.36), inset 0 0 0 2px #fff; filter: drop-shadow(0 0 calc(24px * var(--lx-bloom)) rgba(105,224,255,.7)); }
.lx-vfx-gem { aspect-ratio: 1; border-radius: 15px; background: conic-gradient(from var(--spin), #fff, var(--gem), #432a9b, #fff); box-shadow: inset 0 -8px 13px rgba(19,33,86,.2), 0 5px 13px rgba(32,55,118,.25); animation: lx-gem 3s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes lx-gem { 50% { transform: translateY(-4px) rotate(5deg); filter: brightness(1.18); } }
.lx-vfx-controls { padding: 22px; }
.lx-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.lx-control label b { display: block; }
.lx-control label small { color: #b3c2de; }
.lx-control input[type="range"] { width: min(220px, 38vw); accent-color: #73e8ff; }
.lx-switch { min-width: 66px; min-height: 36px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #b8c5dc; background: rgba(255,255,255,.06); cursor: pointer; font-size: .75rem !important; font-weight: 1000; }
.lx-switch[aria-pressed="true"] { color: #152650; border-color: transparent; background: linear-gradient(135deg, #71e9ff, #ffd76e); }
.lx-local { color: #aebddd; font-size: .76rem; }

.lx-mobile-hud { display: none; }
.lx-board-vfx { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; border-radius: inherit; mix-blend-mode: screen; }
.lx-vfx-particle { position: absolute; width: var(--size); height: var(--size); left: var(--x); top: var(--y); border-radius: 50%; background: var(--color); box-shadow: 0 0 14px var(--color); animation: lx-particle .8s ease-out forwards; }
@keyframes lx-particle { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.lx-trail-on .cell.pop::after { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.8), transparent 60%); animation: lx-trail .7s ease-out forwards; }
@keyframes lx-trail { to { transform: scale(2.2); opacity: 0; } }
.lx-bloom-on #boardWrap { filter: drop-shadow(0 0 calc(22px * var(--lx-bloom)) rgba(91,222,255,.65)); }
.lx-constellation-on #board::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 47px 41px; mix-blend-mode: screen; }
.lx-boss-live #boardWrap { animation: lx-live-boss 2.4s ease-in-out infinite; }
@keyframes lx-live-boss { 50% { box-shadow: 0 0 58px rgba(255,67,162,.3), inset 0 0 0 2px #fff; } }
.lx-cinematic-flash { position: fixed; inset: 0; z-index: 450; pointer-events: none; display: grid; place-items: center; color: #fff; background: radial-gradient(circle, rgba(139,103,255,.2), rgba(4,7,27,.94)); animation: lx-cinema 1.35s ease forwards; font-size: clamp(2rem, 9vw, 6rem); font-weight: 1000; letter-spacing: .08em; }
@keyframes lx-cinema { 0% { opacity: 0; transform: scale(1.2); } 25%,72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.93); } }
.lx-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
body.lx-lock { overflow: hidden !important; }

@media (max-width: 900px) {
  .lx-heading { display: block; }
  .lx-heading p { margin-top: 8px; }
  .lx-realms-layout, .lx-nyra-layout, .lx-boss-layout, .lx-vfx-layout { grid-template-columns: 1fr; }
  .lx-realm-detail { position: static; }
  .lx-nyra-stage, .lx-boss-stage, .lx-vfx-preview { min-height: 420px; }
}

@media (max-width: 620px) {
  .lx-launcher { top: auto; bottom: max(78px, calc(env(safe-area-inset-bottom) + 68px)); right: 8px; padding: 8px; }
  .lx-launcher span { display: none; }
  .lx-header { padding-inline: 11px; }
  .lx-tabs { padding-inline: 10px; }
  .lx-body { padding-inline: 9px; }
  .lx-realms { grid-template-columns: 1fr; }
  .lx-atlas-card, #lx-atlas { min-height: 70dvh; height: 70dvh; }
  .lx-atlas-detail { display: block; }
  .lx-atlas-detail .lx-action { margin-top: 8px; }
  .lx-vfx-board { grid-template-columns: repeat(6, min(10vw, 42px)); }
  .lx-control { grid-template-columns: 1fr; }
  .lx-control input[type="range"] { width: 100%; }
  .lx-memory-heading { display: block; }
  .lx-memory-grid { grid-template-columns: repeat(4, minmax(50px, 1fr)); }
  .lx-memory-groups { max-height: 42dvh; }
  .memory-replay-bar { align-items: stretch; padding: 8px 9px; }
  .memory-replay-bar button { flex: 0 0 42%; padding-inline: 7px; font-size: .66rem; }
  #game:not(.hidden) ~ .lx-mobile-hud, body:has(#game:not(.hidden)) .lx-mobile-hud { display: grid; }
  .lx-mobile-hud { position: fixed; z-index: 115; left: max(7px, env(safe-area-inset-left)); right: max(7px, env(safe-area-inset-right)); bottom: max(65px, calc(env(safe-area-inset-bottom) + 58px)); grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: rgba(255,255,255,.87); box-shadow: 0 10px 30px rgba(41,69,121,.2); backdrop-filter: blur(15px); color: #203b65; pointer-events: none; }
  .lx-mobile-hud div { min-width: 0; text-align: center; }
  .lx-mobile-hud small { display: block; color: #637694; font-size: 8px; font-weight: 1000; letter-spacing: .05em; }
  .lx-mobile-hud b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-console *, .lx-console *::before, .lx-console *::after, .lx-boss-live #boardWrap { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .lx-launcher:hover, .lx-realm:hover { transform: none; }
}

/* Correzioni di collisione e tocco: il launcher resta sopra l'HUD mobile. */
#formulaHelp.formula-help { min-width: 44px; }

@media (max-width: 620px) {
  body:has(#game:not(.hidden)) .lx-launcher {
    bottom: max(122px, calc(env(safe-area-inset-bottom) + 112px));
  }
}