/* =============================================================================
   theme.css — "OPERATOR COMMAND DECK"  (layered redesign)
   A premium dark sci-fi console skin. Loaded AFTER style.css so it overrides
   the flat light palette without touching markup or game logic. Deep navy
   chrome frames the vivid game canvas like a real device screen; warm amber is
   the brand accent, cyan reads as tech/info, rarity hues glow on the dark.
   ============================================================================= */

/* ----------------------------------------------------------------- TOKENS -- */
:root{
  --bg:#0b1018;            /* app background — near-black navy            */
  --panel:#151d2b;         /* base surface                               */
  --panel-2:#1a2231;       /* slightly raised                            */
  --panel-3:#212c3e;       /* control / input fill                       */
  --line:#28344a;          /* hairline border                            */
  --line-2:#37475f;        /* stronger border                            */
  --gold:#f2b24b;          /* PRIMARY accent — warm amber                */
  --gold-dim:#c5872a;      /* amber pressed / border                     */
  --cyan:#5fd1ff;          /* secondary tech accent                      */
  --text:#eaf0fa;          /* primary text                               */
  --muted:#93a2ba;         /* secondary text                             */
  --muted-2:#5f6f88;       /* tertiary / disabled                        */
  --hp:#ff495f; --xp:#4fa6ff;
  --c-common:#9aa7b8; --c-uncommon:#46d27a; --c-rare:#4fa6ff; --c-epic:#b87bff;
  --c-legendary:#ffa838; --c-mythic:#ff5168; --c-ancient:#23d8c6; --c-divine:#ffd450;
  --c-cosmic:#ff62d2; --c-void:#9a6bff; --c-eternal:#8e9dff; --c-primordial:#ffd070;
  --good:#3fc56b; --bad:#ff495f;
  --shadow:0 14px 38px rgba(0,0,0,.55);
  --glow-gold:0 0 18px rgba(242,178,75,.32);
}

/* ------------------------------------------------------------------ SHELL -- */
html,body{ background:#05070d; }
#stage{
  background:
    radial-gradient(120% 90% at 50% -10%, #1a2236 0%, #0c1119 48%, #05070d 100%);
}
#stage::before{ /* faint starfield haze behind the device */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(180,200,255,.30), transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 18%, rgba(180,200,255,.22), transparent 60%),
    radial-gradient(1.2px 1.2px at 60% 70%, rgba(180,200,255,.18), transparent 60%),
    radial-gradient(1.2px 1.2px at 35% 80%, rgba(180,200,255,.16), transparent 60%);
}
#phone{
  background:linear-gradient(155deg,#2a3142,#161b26 60%,#10141d);
  box-shadow:
    0 40px 90px rgba(0,0,0,.6),
    0 0 0 2px #2c3445, 0 0 0 11px #11151e, 0 0 0 13px #2a313f,
    inset 0 1px 0 rgba(255,255,255,.05);
}
#app{ background:var(--bg); }
#notch{ background:#0c1019; }
#statusbar{ color:var(--text); background:transparent; }
#statusbar .dots i{ background:var(--text); }

/* -------------------------------------------------------------------- HUD -- */
#hud{
  background:linear-gradient(180deg,#141c2a,#0e1421);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(0,0,0,.4);
}
.lvl-badge{
  background:radial-gradient(120% 120% at 50% 0%,#222d40,#141b28);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.4);
  cursor:pointer; transition:transform .12s, box-shadow .12s;
}
.lvl-badge:active{ transform:scale(.95); }
.lvl-badge .lab{ color:var(--muted); }
.lvl-badge .num{ color:var(--gold); text-shadow:0 0 12px rgba(242,178,75,.4); }
.power-block{
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(242,178,75,.14), transparent 70%);
  border:1px solid rgba(242,178,75,.16);
  border-radius:13px; cursor:pointer; transition:box-shadow .2s;
}
.power-block:active{ box-shadow:inset 0 0 0 1px rgba(242,178,75,.4); }
.power-block .pb-label{ color:var(--gold); opacity:.8; }
.power-block .pb-val{
  color:var(--gold);
  text-shadow:0 0 22px rgba(242,178,75,.45), 0 1px 0 rgba(0,0,0,.4);
}
.gold-chip{
  background:linear-gradient(180deg,#1c2433,#141b27);
  border:1px solid var(--line-2); color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.bar-wrap{
  background:#0a0f18; border:1px solid var(--line);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5);
}
.bar-fill{ box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.bar-fill.xp{ background:linear-gradient(90deg,#2f6fc4,#4fa6ff); }
.bar-fill.hp{ background:linear-gradient(90deg,#a01f30,#ff495f); }
.bar-label{ text-shadow:0 1px 2px rgba(0,0,0,.9); }
.hud-sub{ color:var(--muted); }
.hud-sub b.dmg,.hud-sub #hud-power{ color:var(--cyan); }

/* ---------------------------------------------------------------- SCREENS -- */
.screen{ background:var(--bg); }
.scr-head{
  background:linear-gradient(180deg,#141c2a,#0f1521);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.scr-title{ color:var(--gold); text-shadow:0 0 14px rgba(242,178,75,.25); }
.scr-sub{ color:var(--muted); }
.scr-body::-webkit-scrollbar-thumb{ background:var(--line-2); }
.empty-note,.store-empty{ color:var(--muted-2); }
.store-empty{ border-color:var(--line-2); }

/* ----------------------------------------------------------------- B-NAV -- */
#nav{
  background:linear-gradient(180deg,#121a27,#0b1019);
  border-top:1px solid var(--line);
  box-shadow:0 -3px 16px rgba(0,0,0,.4);
}
.nav-btn{ color:var(--muted-2); transition:color .15s; gap:2px; padding:0 1px; min-width:0; }
/* 6-tab fit: shrink labels, allow two-word labels to wrap rather than overflow */
.nav-btn svg{ width:20px; height:20px; }
.nav-btn .nl{
  font-size:8.5px; letter-spacing:.015em; line-height:1.08;
  text-align:center; white-space:normal; max-width:100%;
}
.nav-btn:active{ transform:translateY(1px); }
.nav-btn.active{ color:var(--gold); }
.nav-btn.active svg{ filter:drop-shadow(0 0 7px rgba(242,178,75,.55)); }
.nav-btn.active::before{ background:var(--gold); box-shadow:0 0 9px rgba(242,178,75,.7); }
.nav-btn .badge{ box-shadow:0 0 0 2px #0b1019, 0 0 8px rgba(255,73,95,.6); }

/* ------------------------------------------------------ BATTLE CONTROLS -- */
.spd{
  background:linear-gradient(180deg,#1a2230,#121a26);
  border:1px solid var(--line-2); color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:transform .1s,border-color .12s;
}
.spd:active{ transform:scale(.93); }
.spd .pl{ color:var(--gold); }
.spd.active{
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(242,178,75,.28),rgba(242,178,75,.06));
  color:var(--gold); box-shadow:0 0 12px rgba(242,178,75,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.auto-btn{
  background:linear-gradient(180deg,#1a2230,#121a26);
  border:1px solid var(--line-2); color:var(--muted);
}
.auto-btn.on{ color:var(--good); border-color:rgba(63,197,107,.5); box-shadow:0 0 12px rgba(63,197,107,.25); }
.auto-btn.on .led{ background:var(--good); box-shadow:0 0 8px var(--good); }
.bail-btn{ background:linear-gradient(180deg,rgba(226,59,78,.2),rgba(226,59,78,.08)); border-color:rgba(226,59,78,.55); color:#ff7e8c; box-shadow:0 0 12px rgba(226,59,78,.22); }
.hd-btn{ background:rgba(14,20,32,.82); border:1px solid rgba(95,209,255,.24); color:#dfe8f5; }
.hd-btn svg{ color:var(--cyan); }

/* ------------------------------------------------------- GENERIC CARDS -- */
.equip-slot,.item-card,.zone-row,.store-card,.lb-row,.skill-node,.legend,
.autosell,.shop-card,.ship-card,.stat-block,.res-pill{
  background:linear-gradient(180deg,#172030,#131a28) !important;
  border-color:var(--line) !important;
  transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.equip-slot:active,.item-card:active,.zone-row:active,.store-card:active,
.lb-row:active,.death-zone:active{ transform:translateY(1px) scale(.995); }
.equip-slot:hover,.item-card:hover,.zone-row:hover,.lb-row:hover{
  border-color:var(--line-2) !important; box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.slot-icon,.ic-icon,.sec-ic,.ship-ic{
  background:linear-gradient(180deg,#1d2839,#141c2a) !important;
  border:1px solid var(--line-2);
}
.slot-label{ color:var(--muted-2); }
.slot-item{ color:var(--text); }
.equip-slot.empty .slot-item{ color:var(--muted-2); }
.ic-sub,.z-sub,.sc-desc,.ship-tag,.ship-desc,.lb-meta,.sn-desc,.legend-title,
.bag-sub,.shop-timer,.store-note,.galaxy-help{ color:var(--muted); }
.z-name,.sc-name,.ic-name,.lb-name,.sn-name{ color:var(--text); }
.z-num{ color:var(--gold); }

/* rarity left-borders get a matching glow on the card */
.item-card[class*="bl-"],.shop-card[class*="bl-"]{ box-shadow:inset 3px 0 0 -0px transparent; }
.ic-tag.up{ background:rgba(63,197,107,.12); }

/* legend dots already glow via currentColor; strengthen */
.legend-dot{ box-shadow:0 0 8px currentColor; }
.legend-pct{ color:var(--muted-2); }

/* zone states */
.zone-row.active{ border-color:var(--gold) !important; background:linear-gradient(180deg,rgba(242,178,75,.12),rgba(242,178,75,.02)) !important; }
.zone-row.rec{ border-color:var(--good) !important;
  box-shadow:0 0 0 1px var(--good) inset, 0 0 18px rgba(63,197,107,.35) !important; }
.z-rec,.dz-rec{ background:var(--good); color:#04140a; box-shadow:0 0 10px rgba(63,197,107,.5); }
.z-go,.dz-go{ color:var(--gold); }

/* inputs / selects */
.inv-controls select,.inv-controls button,.autosell select{
  background:var(--panel-3) !important; border:1px solid var(--line-2) !important; color:var(--text) !important;
}
.autosell .as-lbl,.autosell .as-keep{ color:var(--muted); }
.store-cats{ background:#0e1420; border:1px solid var(--line-2); }
.store-cat{ color:var(--muted); }
.store-cat.active{ background:linear-gradient(180deg,#212c3e,#172030); color:var(--gold); box-shadow:0 1px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(242,178,75,.25); }
.sec-head h3,.store-sec h3{ color:var(--gold); }
.sec-right,.sec-blurb,.store-sec .blurb{ color:var(--muted); }
.lo-chip{ background:#0f1623; border:1px solid var(--line-2); color:var(--muted); }
.lo-chip.drone{ color:var(--cyan); border-color:rgba(95,209,255,.4); }
.mod-chip{ color:var(--gold); background:rgba(242,178,75,.1); border:1px solid rgba(242,178,75,.35); }
.bp-chip{ background:#0f1623; border:1px solid var(--line-2); color:var(--muted-2); }
.bp-chip.have{ color:var(--cyan); border-color:rgba(95,209,255,.45); background:rgba(95,209,255,.08); }
.ship-card.is-active{ border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold) inset, 0 0 16px rgba(242,178,75,.18); }
.ship-lock{ background:rgba(95,120,170,.08); border:1px solid var(--line-2); color:var(--muted); }
.ship-lock.ready{ background:rgba(95,209,255,.07); border-color:rgba(95,209,255,.28); }
.lk-bar{ background:#0f1623; }

/* ------------------------------------------------------------- BUTTONS -- */
.opt-btn{ border:1px solid var(--line-2); color:var(--text); background:linear-gradient(180deg,#1c2433,#141b27); }
.opt-btn.equip,.buy-btn,.btn.primary,.sn-buy.able{
  background:linear-gradient(180deg,#34b465,#1d8a48) !important;
  border:1px solid #3fc56b !important; color:#04140a !important; font-weight:800;
  box-shadow:0 4px 14px rgba(45,160,90,.3), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.opt-btn.sell,.btn.gold,.ship-btn.switch,.lk-go,.shop-card .sc-buy,.lg-primary{
  background:linear-gradient(180deg,#3f8df2,#2061c8) !important;
  border:1px solid #2061c8 !important; color:#fff !important;
  box-shadow:0 4px 14px rgba(47,120,230,.3), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.ship-btn.buy{
  background:linear-gradient(180deg,#f2b24b,#c5872a) !important;
  border:1px solid #d79a36 !important; color:#1c1206 !important; font-weight:800;
  box-shadow:0 4px 14px rgba(242,178,75,.32), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.buy-btn.owned{ background:var(--panel-3) !important; border-color:var(--line-2) !important; color:var(--good) !important; box-shadow:none !important; }
.shop-card .sc-buy:disabled{ background:var(--panel-3) !important; border-color:var(--line-2) !important; color:var(--muted-2) !important; box-shadow:none !important; }
.btn{ background:var(--panel-3); border:1px solid var(--line-2); color:var(--text); }
.btn.danger{ background:linear-gradient(180deg,#b3303c,#7a1c26) !important; border-color:#c93a47 !important; color:#fff !important; }
.btn:active,.opt-btn:active,.buy-btn:active,.ship-btn:active,.lg-primary:active,.sn-buy:active{ transform:translateY(1px) scale(.985); }
.ship-badge.active{ color:var(--good); background:rgba(63,197,107,.12); border:1px solid rgba(63,197,107,.4); }
.ship-badge.locked{ color:var(--muted-2); background:#0f1623; border:1px solid var(--line-2); }
.sn-buy{ background:var(--panel-3); border:1px solid var(--line-2); color:var(--text); }
.sn-buy.maxed{ color:var(--good); }

/* ---------------------------------------------------- STATS / POPOVER -- */
.stat-row{ border-bottom:1px solid rgba(255,255,255,.05); }
.stat-row .s-name{ color:var(--muted); }
.stat-row .s-val{ color:var(--text); }
.stat-row.special .s-name,.stat-row.special .s-val,.ip-stat.special .ip-sname{ color:var(--c-uncommon); }
#char-portrait{ background:radial-gradient(80% 70% at 50% 38%,#1a2333,#0e1521); border:1px solid var(--line); }
#char-power{ color:var(--muted); }
#char-power b{ color:var(--gold); }
#item-pop .ip-type,.ip-cmp{ color:var(--muted); }
.ip-cmp{ border-top:1px solid var(--line); }
.ip-stat .v{ color:var(--text); }
.ip-stat .ip-sname{ color:var(--muted); }

/* skill tree */
.skill-top{ background:linear-gradient(180deg,#172030,#131a28); border:1px solid var(--line); }
.skill-top .pts b{ color:var(--gold); }
.skill-top .reset{ background:var(--panel-3); border:1px solid var(--line-2); color:var(--muted); }
.skill-node.cap{ background:linear-gradient(180deg,rgba(242,178,75,.07),transparent) !important; }
.skill-node .sn-name .capm{ color:var(--gold); border:1px solid var(--gold-dim); }
.sn-pip{ background:var(--line-2); }
.sn-pip.on{ background:var(--gold); box-shadow:0 0 6px rgba(242,178,75,.6); }
.skill-cta{ background:linear-gradient(180deg,rgba(242,178,75,.12),rgba(242,178,75,.03)); border:1px solid var(--line-2); }
.skill-cta .sc-l{ color:var(--gold); }
.skill-cta .sc-r,.skill-cta .sc-r b{ color:var(--muted); }
.skill-cta .sc-r b{ color:var(--gold); }
.skill-cta.has{ box-shadow:0 0 0 1px var(--gold) inset, 0 0 14px rgba(242,178,75,.2); }
.branch-h .bspent{ color:var(--muted); }

/* ----------------------------------------------------- MODALS / SHEETS -- */
.backdrop{ background:rgba(4,7,13,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.sheet{
  background:linear-gradient(180deg,#1a2333,#121925);
  border:1px solid var(--line-2);
  box-shadow:0 28px 70px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
}
.sheet-head{ color:var(--gold); border-bottom:1px solid var(--line); }
.sheet-body p{ color:var(--muted); }
.sheet-body p b{ color:var(--text); }
.stat-block{ background:#0f1623 !important; border:1px solid var(--line); }
.stat-block .sb-name{ color:var(--muted); }

/* leaderboard */
.lb-tab{ background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.lb-tab.active{ border-color:var(--gold); color:var(--gold); background:linear-gradient(180deg,rgba(242,178,75,.12),transparent); }
.lb-info{ color:var(--muted); }
.lb-row.me{ border-color:var(--gold) !important; background:linear-gradient(180deg,rgba(242,178,75,.1),transparent) !important; box-shadow:0 0 14px rgba(242,178,75,.15); }
.lb-rank{ color:var(--muted); }
.lb-rank.top{ color:var(--gold); text-shadow:0 0 10px rgba(242,178,75,.5); }
.lb-pow{ color:var(--gold); }
.lb-pow .pl{ color:var(--muted-2); }

/* galaxy */
.res-pill{ border-left:3px solid var(--rc) !important; }
/* sell → salvage hints */
.ip-salvage{ margin-top:9px; text-align:center; font-size:10.5px; letter-spacing:.02em; color:var(--muted-2); }
.as-salvage{ margin:9px 0 2px; font-size:11px; line-height:1.55; color:var(--muted); }
.galaxy-wrap{ border:1px solid var(--line-2); background:radial-gradient(circle at 50% 40%,#0e1730,#05070f); }
.gx-c{ fill:#e6edfa; }
.galaxy-help b{ color:var(--text); }

/* ------------------------------------------------------------- LOGIN -- */
#login{
  background:
    radial-gradient(120% 80% at 50% -10%, #1a2438 0%, #0c1119 50%, #06080e 100%);
}
.lg-logo{
  background:radial-gradient(120% 120% at 50% 0%,#212c40,#141c2a);
  border:1px solid var(--line-2);
  box-shadow:0 0 36px rgba(242,178,75,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.lg-title{ color:var(--gold); text-shadow:0 0 26px rgba(242,178,75,.3); }
.lg-tag{ color:var(--muted); }
.lg-div{ color:var(--muted-2); }
.lg-div::before,.lg-div::after{ background:var(--line); }
.lg-form input{ background:#0f1623; border:1px solid var(--line-2); color:var(--text); }
.lg-form input::placeholder{ color:var(--muted-2); }
.lg-form input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,178,75,.14); }
.lg-switch{ color:var(--muted); }
.lg-switch button{ color:var(--gold); }
.lg-guest{ color:var(--muted-2); }
.lg-note{ color:var(--muted-2); }
.sso.google{ background:#fff; color:#1f1f1f; }
.signout-btn{ background:var(--panel-3); border:1px solid var(--line-2); color:var(--muted); }

/* boss / siege bars sit on canvas — already dark glass, just sharpen accents */
#boss-bar.active{ box-shadow:0 0 14px rgba(255,73,95,.6); border-color:var(--hp); }

/* ----------------------------------------------------- MICRO-MOTION -- */
.opt-btn,.buy-btn,.ship-btn,.btn,.sn-buy,.lg-primary,.sc-buy,.store-cat,.lb-tab{
  transition:transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.opt-btn.equip:hover,.buy-btn:hover,.btn.primary:hover,.ship-btn.buy:hover,.lg-primary:hover{
  filter:brightness(1.06);
}
@keyframes deckGlow{0%,100%{box-shadow:0 0 0 1px var(--good) inset,0 0 12px rgba(63,197,107,.3);}50%{box-shadow:0 0 0 1px var(--good) inset,0 0 26px rgba(63,197,107,.6);}}
.zone-row.rec{ animation:deckGlow 2s ease-in-out infinite; }

/* ============================================================ AAA POLISH -- */
/* screen transitions — every menu glides in instead of snapping */
@keyframes scrIn{ from{ opacity:0; transform:translateY(10px) scale(.992); } to{ opacity:1; transform:none; } }
.screen.active{ animation:scrIn .26s cubic-bezier(.22,1,.36,1); }

/* modal entrances — sheet springs up over a fading backdrop */
@keyframes sheetIn{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
.sheet{ animation:sheetIn .3s cubic-bezier(.22,1,.36,1); }
@keyframes bdIn{ from{ opacity:0; } to{ opacity:1; } }
.backdrop{ animation:bdIn .22s ease; }

/* HP/XP bars — smooth fill motion + a slow premium sheen
   (NOTE: no position override — the base rule positions the fill absolutely,
   which is what gives it height; absolute also already contains the ::after) */
.bar-fill{ transition:width .35s cubic-bezier(.22,1,.36,1); overflow:hidden; }
.bar-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.25) 50%, transparent 68%);
  background-size:230% 100%; animation:sheen 3.4s linear infinite;
}
@keyframes sheen{ from{ background-position:210% 0; } to{ background-position:-70% 0; } }

/* toasts pop with a soft spring */
@keyframes toastPop{ 0%{ opacity:0; transform:translateY(10px) scale(.88); } 62%{ opacity:1; transform:translateY(-2px) scale(1.05); } 100%{ opacity:1; transform:none; } }
.lvl-toast{ animation:toastPop .42s cubic-bezier(.18,1.4,.4,1); }

/* nav icon pops when it becomes active */
@keyframes navPop{ from{ transform:scale(.8); } to{ transform:scale(1); } }
.nav-btn.active svg{ animation:navPop .26s cubic-bezier(.18,1.6,.4,1); }

/* tile cards lift slightly on hover (pointer devices) */
@media (hover:hover){
  .gtile:hover,.sk-tier:hover,.ship-card:hover{ border-color:var(--line-2); box-shadow:0 6px 18px rgba(0,0,0,.45); }
}

/* accessibility — visible keyboard focus + slightly stronger tertiary text */
button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}
:root{ --muted-2:#6f7f99; }

/* reduced motion — honor the OS setting: kill decorative animation, keep state */
@media (prefers-reduced-motion: reduce){
  .screen.active,.sheet,.backdrop,.lvl-toast,.nav-btn.active svg{ animation:none !important; }
  .bar-fill{ transition:none; }
  .bar-fill::after{ display:none; }
  .zone-row.rec{ animation:none !important; }
  .skt-caret{ transition:none; }
  #login::before,.lg-title{ animation:none !important; }
}

/* ===== CINEMATIC LOGIN — drifting starfield + shine-swept title =====
   (must NOT override the base #login positioning: it's an absolute overlay) */
#login::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 12%, rgba(190,210,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 71% 8%,  rgba(190,210,255,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 30%, rgba(190,210,255,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 26%, rgba(190,210,255,.32), transparent 60%),
    radial-gradient(1.4px 1.4px at 9% 41%,  rgba(190,210,255,.38), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 62%, rgba(190,210,255,.42), transparent 60%),
    radial-gradient(1.2px 1.2px at 79% 68%, rgba(190,210,255,.3),  transparent 60%),
    radial-gradient(1.4px 1.4px at 50% 82%, rgba(190,210,255,.36), transparent 60%);
  background-size:280px 280px; background-repeat:repeat;
  animation:loginStars 60s linear infinite;
}
@keyframes loginStars{ to{ background-position:0 280px; } }
@keyframes lgShine{ 0%,72%{ background-position:200% 0; } 100%{ background-position:-80% 0; } }
.lg-title{
  background:linear-gradient(110deg, var(--gold) 42%, #fff3d2 50%, var(--gold) 58%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 0 26px rgba(242,178,75,.35));
  animation:lgShine 6s ease-in-out infinite;
}