/* Dragonball.LT – bendras stilius.
   Tailwind daro didžiąją dalį darbo; čia tik pasikartojantys elementai. */

/* ------------------------------------------------------------
   TEMOS
   Spalvos aprašytos RGB kanalais (be „rgb()"), nes taip Tailwind
   gali pritaikyti permatomumą, pvz. bg-electric-blue/20.
   Temą keisti: Nustatymai -> Išvaizda.
   ------------------------------------------------------------ */

/* 901: kiekviena tema TONUOJA visą žaidimą — fonas, juosta ir kortelės nusidažo
   pasirinkta spalva. Anksčiau visos tamsios temos turėjo beveik juodą foną, tad
   pasirinkus raudoną ar violetinę skirtumas matėsi tik nuorodų spalvoje. */

:root,
[data-theme="dark"] {
  --c-bg:      7 16 36;      /* gilus jūros mėlynumas */
  --c-bar:     10 26 58;
  --c-panel:   14 35 76;
  --c-primary: 56 182 255;
  --c-accent:  255 204 0;
  --c-ember:   247 169 58;
  --c-purple:  155 75 255;
  --c-red:     255 59 48;
  --c-text:    206 220 240;
}

/* Violetinė */
[data-theme="midnight"] {
  --c-bg:      23 10 46;
  --c-bar:     35 16 68;
  --c-panel:   45 21 86;
  --c-primary: 178 116 255;
  --c-accent:  226 172 255;
  --c-ember:   204 140 255;
  --c-purple:  150 86 255;
  --c-red:     255 84 134;
  --c-text:    228 216 245;
}

/* Raudona */
[data-theme="crimson"] {
  --c-bg:      40 8 10;
  --c-bar:     60 12 15;
  --c-panel:   76 16 19;
  --c-primary: 255 128 74;
  --c-accent:  255 190 60;
  --c-ember:   255 150 60;
  --c-purple:  255 112 162;
  --c-red:     255 80 66;
  --c-text:    246 214 206;
}

/* DBZ (tamsi): Goku oranžinė ant gilaus žydro dangaus */
[data-theme="dbz"] {
  --c-bg:      7 28 40;
  --c-bar:     10 42 56;
  --c-panel:   13 54 70;
  --c-primary: 56 216 240;   /* žydra */
  --c-accent:  255 152 40;   /* oranžinė */
  --c-ember:   255 184 48;
  --c-purple:  52 211 108;   /* žalia */
  --c-red:     255 104 58;
  --c-text:    206 232 238;
}

/* ŠVIESI DBZ tema (868; paletė iš Astra 874 — „šviesi salotinė“): melsvai pilkas
   fonas, salotinės kortelės, žydra, oranžinė, žalia. Nuo 874 perkama visiems (50 Orb). */
[data-theme="dbz-light"] {
  --c-bg:      223 233 232;   /* #DFE9E8 melsvai pilkas puslapio fonas */
  --c-bar:     244 248 234;   /* #F4F8EA labai šviesi viršutinė juosta */
  --c-panel:   237 247 217;   /* #EDF7D9 švelniai salotinės kortelės */
  --c-primary: 0 111 145;     /* #006F91 žydros nuorodos, navigacija, XP */
  --c-accent:  173 69 0;      /* #AD4500 oranžiniai skaičiai ir akcentai */
  --c-ember:   137 86 0;      /* #895600 antrinis gintaro akcentas */
  --c-purple:  20 109 53;     /* #146D35 žalias Orb ir retų daiktų tekstas */
  --c-red:     190 48 37;     /* #BE3025 klaidos, pavojus */
  --c-text:    30 41 59;      /* #1E293B pagrindinis tekstas */
}

/* Šviesi tema */
[data-theme="light"] {
  --c-bg:      244 245 248;
  --c-bar:     255 255 255;
  --c-panel:   255 255 255;
  --c-primary: 0 122 204;
  --c-accent:  214 154 0;
  --c-ember:   224 138 20;
  --c-purple:  124 45 220;
  --c-red:     214 40 32;
  --c-text:    38 45 58;
}

body { -webkit-font-smoothing: antialiased; }
/* Telefonas nebesistumdo i sonus: uzrakinam horizontalu slinkima sakni.
   min-width:0 NEnaudojam globaliai (sugadintu flex) — tik sakni + medijai. */
html, body { max-width: 100vw; overflow-x: hidden; overscroll-behavior-x: none; }
img, svg, video { max-width: 100%; height: auto; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Kortelės ---------- */
.panel {
  background: linear-gradient(180deg, rgb(var(--c-panel) / .92), rgb(var(--c-bar) / .92));
  border: 1px solid rgb(var(--c-primary) / .18);
  border-radius: 1rem;
}
.panel-hover:hover { border-color: rgb(var(--c-primary) / .45); }

/* ---------- Būsenos juostos elementai ---------- */
.stat-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem;
  background: rgb(var(--c-bg) / .7);
  border: 1px solid rgb(var(--c-text) / .12);
  border-radius: 9999px;
  white-space: nowrap;
  font-size: .75rem;
  transition: border-color .15s;
}

.nav-link {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem;
  border-radius: .5rem;
  color: #8A93A6;
  white-space: nowrap;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-link-active { background: rgb(var(--c-primary) / .14); box-shadow: inset 0 -2px 0 rgb(var(--c-primary)); }

/* ---------- Mygtukai ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.4rem;
  border-radius: .6rem;
  font-weight: 700;
  /* SAUGIKLIS: ilgas tekstas laužomas, mygtukas niekada nekyšo iš kortelės */
  white-space: normal; line-height: 1.25; min-width: 0; max-width: 100%; text-align: center;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .03em;
  cursor: pointer;
  transition: transform .08s, filter .15s, box-shadow .15s;
  border: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, rgb(var(--c-primary)), rgb(var(--c-primary) / .72));
  color: #fff;
  box-shadow: 0 3px 0 rgb(var(--c-primary) / .45), 0 0 22px rgb(var(--c-primary) / .28);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-primary:active { box-shadow: 0 1px 0 rgb(var(--c-primary) / .45); }
.btn-gold {
  background: linear-gradient(180deg, rgb(var(--c-accent)), rgb(var(--c-accent) / .78));
  color: #201700;
  box-shadow: 0 3px 0 rgb(var(--c-accent) / .5), 0 0 22px rgb(var(--c-accent) / .28);
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.07); }
.btn-ghost {
  background: rgb(var(--c-text) / .07);
  color: rgb(var(--c-text));
  border: 1px solid rgb(var(--c-text) / .18);
}
.btn-ghost:hover { background: rgb(var(--c-text) / .14); }

/* ---------- Formos ---------- */
.field { display: block; margin-bottom: 1rem; }
.field-label {
  display: block; margin-bottom: .35rem;
  font-size: .8rem; font-weight: 600; color: #9AA4B8;
}
.field-hint { margin-top: .3rem; font-size: .7rem; color: #5E6879; }
.input {
  width: 100%;
  padding: .7rem .9rem;
  background: rgb(var(--c-bg) / .75);
  border: 1px solid rgb(var(--c-text) / .18);
  border-radius: .6rem;
  color: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #4A5365; }
.input:focus {
  border-color: rgb(var(--c-accent));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / .18);
}
.input:focus-visible { outline: none; }

/* ---------- Pranešimai ---------- */
.flash {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1rem;
  border-radius: .6rem;
  font-size: .875rem;
  border: 1px solid;
}
.flash-success { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.35);  color: #86EFAC; }
.flash-error   { background: rgba(255,59,48,.1);  border-color: rgba(255,59,48,.35);  color: #FCA5A5; }
.flash-info    { background: rgba(0,164,255,.1);  border-color: rgba(0,164,255,.35);  color: #7DD3FC; }

/* ---------- Juostos (HP, XP) ---------- */
.bar { height: .5rem; background: rgb(var(--c-text) / .12); border-radius: 9999px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 9999px; transition: width .4s ease; }
.bar-hp  > span { background: linear-gradient(90deg, #FF3B30, #FF7A45); }
.bar-xp  > span { background: linear-gradient(90deg, #00A4FF, #7DD3FC); }
.bar-gold> span { background: linear-gradient(90deg, #E5A700, #FFD84D); }

/* ---------- Rasės pasirinkimas ---------- */
.race-card {
  position: relative;
  display: block;
  padding: 1rem;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgb(var(--c-panel) / .6);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.race-card:hover { border-color: rgb(var(--c-primary) / .5); transform: translateY(-2px); }
.race-card input { position: absolute; opacity: 0; pointer-events: none; }
.race-card:has(input:checked) {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent) / .09);
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / .35), 0 0 26px rgb(var(--c-accent) / .12);
}
.race-card input:focus-visible + .race-inner { outline: 2px solid rgb(var(--c-accent)); outline-offset: 4px; }

/* ---------- Prieinamumas ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ------------------------------------------------------------
   Šviesios temos pataisos.
   Tailwind klasės text-white ir text-gray-* sukurtos tamsiam fonui,
   todėl šviesioje temoje jas perrašome.
   ------------------------------------------------------------ */
[data-theme="light"] { color-scheme: light; }
[data-theme="light"] .text-white       { color: #16202E !important; }
[data-theme="light"] .text-gray-400    { color: #55606F !important; }
[data-theme="light"] .text-gray-500    { color: #5C6875 !important; }
[data-theme="light"] .text-gray-600    { color: #6B7684 !important; }
[data-theme="light"] .text-gray-700    { color: #8A94A2 !important; }
[data-theme="light"] .text-green-400   { color: #128A48 !important; }
[data-theme="light"] .panel {
  background: #fff;
  border-color: rgb(var(--c-primary) / .22);
  box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.05);
}
[data-theme="light"] .stat-pill { background: #fff; border-color: rgba(16,24,40,.12); }
[data-theme="light"] .input     { background: #fff; border-color: rgba(16,24,40,.18); color: #16202E; }
[data-theme="light"] .input::placeholder { color: #9AA3AF; }
[data-theme="light"] .nav-link  { color: #5C6875; }
[data-theme="light"] .nav-link:hover { background: rgba(16,24,40,.05); color: #16202E; }
[data-theme="light"] .bar       { background: rgba(16,24,40,.1); }
[data-theme="light"] .btn-ghost { background: #fff; border-color: rgba(16,24,40,.16); color: #3A4552; }
[data-theme="light"] .btn-ghost:hover { background: #F2F4F7; }
[data-theme="light"] .race-card { background: #fff; border-color: rgba(16,24,40,.12); }
[data-theme="light"] .flash-info { color: #1D4ED8; }
[data-theme="light"] .flash-success { color: #15803D; }
[data-theme="light"] .flash-error { color: #B42318; }

/* Tamsūs fonai (bg-black/40 ir pan.) šviesioje temoje virsta šviesiais */
[data-theme="light"] .bg-black\/30,
[data-theme="light"] .bg-black\/40,
[data-theme="light"] .bg-black\/50,
[data-theme="light"] .bg-black\/60 { background-color: #F4F6F9 !important; }
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10 { border-color: rgba(16,24,40,.10) !important; }
[data-theme="light"] .bg-white\/5 { background-color: rgba(16,24,40,.04) !important; }

/* Tos pačios pataisos ŠVIESIAI DBZ temai (868) + oranžinės/žalios detalės */
[data-theme="dbz-light"] { color-scheme: light; }
[data-theme="dbz-light"] .text-white       { color: #1E293B !important; }
[data-theme="dbz-light"] .text-gray-400    { color: #334155 !important; }
[data-theme="dbz-light"] .text-gray-500    { color: #475569 !important; }
[data-theme="dbz-light"] .text-gray-600    { color: #596779 !important; }
[data-theme="dbz-light"] .text-gray-700    { color: #5D6B7F !important; }
[data-theme="dbz-light"] .text-green-400   { color: #15803D !important; }
[data-theme="dbz-light"] .panel {
  background: rgb(var(--c-panel));
  border-color: rgb(var(--c-primary) / .22);
  box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.05);
}
[data-theme="dbz-light"] .stat-pill { background: #fff; border-color: rgba(16,24,40,.12); }
[data-theme="dbz-light"] .input     { background: #fff; border-color: rgba(16,24,40,.18); color: #16202E; }
[data-theme="dbz-light"] .input::placeholder { color: #9AA3AF; }
[data-theme="dbz-light"] .nav-link  { color: #5C6875; }
[data-theme="dbz-light"] .nav-link:hover { background: rgba(16,24,40,.05); color: #16202E; }
[data-theme="dbz-light"] .bar       { background: rgba(16,24,40,.1); }
[data-theme="dbz-light"] .btn-ghost { background: #fff; border-color: rgba(16,24,40,.16); color: #3A4552; }
[data-theme="dbz-light"] .btn-ghost:hover { background: #F2F4F7; }
[data-theme="dbz-light"] .race-card { background: #fff; border-color: rgba(16,24,40,.12); }
[data-theme="dbz-light"] .flash-info { color: #075985; background: #E0F2FE; }
[data-theme="dbz-light"] .flash-success { color: #166534; background: #DCFCE7; }
[data-theme="dbz-light"] .flash-error { color: #991B1B; background: #FEE2E2; }

/* Tamsūs fonai (bg-black/40 ir pan.) šviesioje temoje virsta šviesiais */
[data-theme="dbz-light"] .bg-black\/30,
[data-theme="dbz-light"] .bg-black\/40,
[data-theme="dbz-light"] .bg-black\/50,
[data-theme="dbz-light"] .bg-black\/60 { background-color: #F6FAEC !important; }
[data-theme="dbz-light"] .border-white\/5,
[data-theme="dbz-light"] .border-white\/10 { border-color: rgba(16,24,40,.10) !important; }
[data-theme="dbz-light"] .bg-white\/5 { background-color: rgba(16,24,40,.04) !important; }

[data-theme="dbz-light"] .text-saiyan-gold { color: #AD4500 !important; }
[data-theme="dbz-light"] .text-electric-blue { color: #006F91 !important; }
[data-theme="dbz-light"] .text-aura-purple { color: #146D35 !important; }
[data-theme="dbz-light"] .text-gray-300 { color: #2B3646 !important; }
[data-theme="dbz-light"] .text-gray-200 { color: #1E293B !important; }
[data-theme="dbz-light"] .bg-black\/80, [data-theme="dbz-light"] .bg-black\/85 { background-color: rgba(255,255,255,.92) !important; }
[data-theme="dbz-light"] .border-white\/20 { border-color: rgba(16,24,40,.16) !important; }
[data-theme="dbz-light"] .bg-white\/10 { background-color: rgba(16,24,40,.06) !important; }
[data-theme="dbz-light"] .btn-primary { color: #fff; }
/* Balti mygtukai ant sodrių akcentų lieka balti (Astra pastaba) */
[data-theme="dbz-light"] .btn-primary, [data-theme="dbz-light"] .btn-primary .text-white { color: #fff !important; }
[data-theme="dbz-light"] .btn-gold { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
[data-theme="dbz-light"] .side-item { background: #F4F8EA; border-color: rgba(16,24,40,.10); color: #2B3646; }
[data-theme="dbz-light"] .side-item:hover { color: #0F172A; background: rgb(var(--c-primary) / .10); }
[data-theme="dbz-light"] .side-item-active { color: #0F172A; background: rgb(var(--c-primary) / .16); }
[data-theme="dbz-light"] .side-btn { background: #fff; }
[data-theme="dbz-light"] .mobile-nav { background: #ffffff; border-top-color: rgba(16,24,40,.12); box-shadow: 0 -2px 12px rgba(16,24,40,.08); }
[data-theme="dbz-light"] .mobile-nav-item { color: #64748B; }
[data-theme="dbz-light"] .mobile-nav-active { color: #0F172A; }
[data-theme="dbz-light"] .field-label { color: #475569; }
[data-theme="dbz-light"] .field-hint { color: #64748B; }
[data-theme="dbz-light"] .text-white\/80, [data-theme="dbz-light"] .text-white\/90, [data-theme="dbz-light"] .text-white\/70 { color: #1E293B !important; }

/* ---------- Laukimo juosta ---------- */
.cooldown {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.cooldown-track {
  flex: 1;
  min-width: 90px;
  height: .45rem;
  background: rgb(var(--c-text) / .12);
  border-radius: 9999px;
  overflow: hidden;
}
.cooldown-track > span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  transition: width .25s linear, background .4s ease;
}
.cooldown-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 2.2rem;
  text-align: right;
}

/* ---------- Grupuotas meniu ----------
   Naudojame <details>, todėl veikia ir be JavaScript. */
.menu-group { position: relative; }
.menu-group > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.menu-group > summary::-webkit-details-marker { display: none; }
.menu-group[open] > summary { color: #fff; background: rgb(var(--c-text) / .08); }

.menu-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 210px;
  padding: .35rem;
  border-radius: .75rem;
  background: rgb(var(--c-panel));
  border: 1px solid rgb(var(--c-primary) / .25);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.menu-drop-right { left: auto; right: 0; }

.menu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: .5rem;
  font-size: .8rem;
  color: rgb(var(--c-text));
  white-space: nowrap;
}
.menu-item:hover { background: rgb(var(--c-text) / .09); color: #fff; }
.menu-item-active { background: rgb(var(--c-primary) / .16); color: #fff; }

.menu-title {
  padding: .5rem .65rem .25rem;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(var(--c-text) / .5);
}

/* Telefone išskleistas meniu užima visą plotį */
@media (max-width: 767px) {
  .menu-drop {
    position: fixed;
    left: .75rem;
    right: .75rem;
    top: auto;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
}

[data-theme="light"] .menu-drop { background: #fff; border-color: rgba(16,24,40,.14); box-shadow: 0 12px 32px rgba(16,24,40,.12); }
[data-theme="light"] .menu-item:hover { background: rgba(16,24,40,.06); color: #16202E; }

/* ---------- Šriftų variantai ----------
   Keičiasi antraštės IR skaičiai (balansai, statistika) —
   kad nusipirktas šriftas matytųsi iš karto. */
[data-font="inter"] body, [data-font="inter"], [data-font="inter"] input, [data-font="inter"] button,
[data-font="inter"] select, [data-font="inter"] textarea, [data-font="inter"] .font-display,
[data-font="inter"] h1, [data-font="inter"] h2, [data-font="inter"] h3
  { font-family: 'Inter', sans-serif; letter-spacing: -.01em; }
[data-font="rajdhani"] body, [data-font="rajdhani"], [data-font="rajdhani"] input, [data-font="rajdhani"] button,
[data-font="rajdhani"] select, [data-font="rajdhani"] textarea, [data-font="rajdhani"] .font-display,
[data-font="rajdhani"] h1, [data-font="rajdhani"] h2, [data-font="rajdhani"] h3
  { font-family: 'Rajdhani', sans-serif; letter-spacing: .02em; }
[data-font="russo"] body, [data-font="russo"], [data-font="russo"] input, [data-font="russo"] button,
[data-font="russo"] select, [data-font="russo"] textarea, [data-font="russo"] .font-display,
[data-font="russo"] h1, [data-font="russo"] h2, [data-font="russo"] h3
  { font-family: 'Russo One', sans-serif; letter-spacing: .01em; }
[data-font="orbitron"] .stat-pill b, [data-font="orbitron"] .tabular-nums
  { font-family: 'Orbitron', sans-serif; }

/* ============================================================
   Fonai per visą ekraną.

   .site-bg – fiksuotas sluoksnis už viso turinio. Paveikslėlis
   lėtai plaukia (Ken Burns efektas), kad puslapis atrodytų gyvas.
   Viršuje – pritemdymas, kad tekstas liktų įskaitomas.
   ============================================================ */
.site-bg {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.site-bg::after {
  content: ''; position: absolute; inset: 0;
  /* 901: uždanga imama iš TEMOS (--c-bg), o ne fiksuota juoda — todėl su ekrano
     fonu raudona tema lieka raudona, violetinė violetinė ir t. t. */
  background:
    linear-gradient(180deg, rgb(var(--c-bg) / .58) 0%, rgb(var(--c-bg) / var(--bg-dim, .74)) 55%, rgb(var(--c-bg) / .93) 100%);
}
.site-bg-img {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.bg-motion .site-bg-img { animation: bg-drift 70s ease-in-out infinite alternate; }

@keyframes bg-drift {
  0%   { transform: scale(1.02) translate(-1.5%, 0); }
  50%  { transform: scale(1.08) translate(1.5%, -1.2%); }
  100% { transform: scale(1.03) translate(-0.8%, 1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-bg-img, .bg-star, .bg-blob { animation: none !important; }
}

/* ---------- Kosmosas: žvaigždės dviem sluoksniais ---------- */
.bg-kosmosas { background: radial-gradient(120% 100% at 50% 0%, #0B1530 0%, #05070E 60%, #02030A 100%); }
.bg-kosmosas .bg-star {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 54% 34%, rgba(180,215,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 84% 56%, rgba(255,240,200,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 78%, rgba(200,180,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 30%, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size: 46% 46%;
}
.bg-kosmosas .bg-star-toli { opacity: .5; background-size: 28% 28%; animation: star-drift 160s linear infinite; }
.bg-kosmosas .bg-star-arti { animation: star-drift 90s linear infinite; }
@keyframes star-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-8%, -5%, 0); } }

/* ---------- Namekas: žalias dangus su plaukiančiomis auromis ---------- */
.bg-namekas { background: linear-gradient(180deg, #0A2E1E 0%, #08331F 45%, #041710 100%); }
.bg-namekas .bg-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: blob-float 34s ease-in-out infinite alternate;
}
.bg-namekas .bg-blob-1 { width: 44vw; height: 44vw; left: -8vw; top: 6vh; background: #16A34A44; }
.bg-namekas .bg-blob-2 { width: 36vw; height: 36vw; right: -6vw; top: 30vh; background: #22D3EE33; animation-delay: -12s; }
.bg-namekas .bg-blob-3 { width: 30vw; height: 30vw; left: 30vw; bottom: -10vh; background: #A3E63533; animation-delay: -22s; }

/* ---------- Saulėlydis: šilti debesys ---------- */
.bg-saulelydis { background: linear-gradient(180deg, #1E2A5E 0%, #7C3A5A 45%, #E8763A 78%, #331B2E 100%); }
.bg-saulelydis .bg-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: blob-float 40s ease-in-out infinite alternate;
}
.bg-saulelydis .bg-blob-1 { width: 50vw; height: 24vw; left: -10vw; top: 14vh; background: #FF912055; }
.bg-saulelydis .bg-blob-2 { width: 42vw; height: 20vw; right: -8vw; top: 34vh; background: #FF3B3033; animation-delay: -15s; }
.bg-saulelydis .bg-blob-3 { width: 34vw; height: 16vw; left: 24vw; top: 58vh; background: #FFD16644; animation-delay: -28s; }

@keyframes blob-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4vw, -3vh) scale(1.08); }
  100% { transform: translate(-3vw, 2vh) scale(.96); }
}

/* Kai fonas įjungtas, skydeliai gauna lengvą stiklo efektą */
.has-bg .panel { background: linear-gradient(180deg, rgb(var(--c-panel) / .86), rgb(var(--c-bar) / .88)); backdrop-filter: blur(6px); }
.has-bg header, .has-bg .site-header { backdrop-filter: blur(8px); }
/* ŠVIESI DBZ tema + ekrano fonas (876): tamsi uždanga virsta šviesia, skydeliai
   lieka salotiniai — kitaip įjungus foną visa šviesi tema virsdavo tamsia. */
[data-theme="dbz-light"] .site-bg::after {
  background:
    linear-gradient(180deg, rgba(223,233,232,.70) 0%, rgba(223,233,232,var(--bg-dim, .72)) 55%, rgba(223,233,232,.90) 100%);
}
[data-theme="dbz-light"] .has-bg .panel { background: rgb(var(--c-panel) / .94); }
[data-theme="dbz-light"] .has-bg .bg-kosmosas,
[data-theme="dbz-light"] .has-bg .bg-namekas,
[data-theme="dbz-light"] .has-bg .bg-saulelydis { filter: saturate(.85) brightness(1.1); }

/* ============================================================
   Šoninės kolonos (trijų kolonų išdėstymas kompiuteryje)
   ============================================================ */
.sidebar-sticky { position: sticky; top: 4.25rem; max-height: calc(100vh - 5rem); overflow-y: auto; scrollbar-width: thin; }

.side-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .75rem; border-radius: .65rem;
  border: 1px solid rgb(255 255 255 / .07);
  background: rgb(0 0 0 / .25);
  font-size: .8rem; color: #B7C0CD;
  transition: border-color .15s, color .15s, background .15s;
}
.side-item:hover { color: #fff; border-color: rgb(var(--c-primary) / .5); background: rgb(var(--c-primary) / .08); }
.side-item-active { color: #fff; border-color: rgb(var(--c-primary) / .6); background: rgb(var(--c-primary) / .12); }

.side-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .5rem; border-radius: .6rem;
  border: 1px solid; font-size: .72rem; font-weight: 600;
  transition: background .15s;
}


/* Ilgi žodžiai ir tekstai niekada nelipa per kortelių kraštus */
.panel p, .panel li, .panel .text-xs, .panel .text-sm { overflow-wrap: break-word; min-width: 0; }
.btn { white-space: nowrap; }

/* ---------- Mobilus interfeisas ---------- */
/* Apatine mobili juosta.
   backdrop-filter iOS/Facebook narsyklese kartais „uzstringa" — juosta lieka
   pakibusi vidury ekrano ir nebegrizta i apacia. Todel: vientisas fonas be
   blur, GPU sluoksnis (translateZ) ir position: sticky atsarga per fallback. */
.mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: space-around; align-items: stretch;
  background: #05080f;
  border-top: 1px solid rgb(255 255 255 / .08);
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  contain: layout paint;
}
.mobile-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .3rem 0; border-radius: .6rem; color: #6b7280;
  font-size: .6rem; letter-spacing: .02em; -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item i { font-size: 1rem; }
.mobile-nav-active { color: #fff; background: rgb(var(--c-primary) / .14); }

@media (max-width: 767px) {
  /* vietos apatiniam meniu */
  body { padding-bottom: 4.2rem; }
  /* mažiau oro – daugiau turinio ekrane */
  .panel { padding-left: .9rem !important; padding-right: .9rem !important; }
  main { padding-left: .75rem !important; padding-right: .75rem !important; }
  h1 { font-size: 1.25rem !important; }
  /* dideli, patogūs pirštui mygtukai */
  .btn { min-height: 2.6rem; }
  /* stat-pill juostos slenka horizontaliai, o ne laužo išdėstymą */
  .stat-pill { white-space: nowrap; }
  /* lentelės ir ilgos eilutės slenka, o ne išlenda */
  .panel { overflow-x: auto; }
}

/* ============================================================
   SVYTĖJIMAS (glow) — daiktams nuo tam tikro lygio ir
   transformacijoms. Spalvos tos pačios kaip retumo rėmeliuose,
   kad vaizdas liktų vientisas.
   Stiprumas: glow-1 (vos) ... glow-4 (ryškus).
   ============================================================ */
.glow { position: relative; }

.glow-gray   { --glow-c: 148 163 184; }
.glow-green  { --glow-c: 74 222 128; }
.glow-blue   { --glow-c: 56 189 248; }
.glow-purple { --glow-c: 167 139 250; }
.glow-gold   { --glow-c: 250 204 21; }

.glow-1 { filter: drop-shadow(0 0 3px  rgb(var(--glow-c) / .45)); }
.glow-2 { filter: drop-shadow(0 0 5px  rgb(var(--glow-c) / .60))
                  drop-shadow(0 0 10px rgb(var(--glow-c) / .30)); }
.glow-3 { filter: drop-shadow(0 0 7px  rgb(var(--glow-c) / .70))
                  drop-shadow(0 0 16px rgb(var(--glow-c) / .40)); }
.glow-4 { filter: drop-shadow(0 0 9px  rgb(var(--glow-c) / .85))
                  drop-shadow(0 0 22px rgb(var(--glow-c) / .55));
          animation: glow-pulse 2.6s ease-in-out infinite; }

@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .82; }
}

/* Kas išjungė animacijas — nemirksi */
@media (prefers-reduced-motion: reduce) {
  .glow-4 { animation: none; }
}


/* ============================================================
   NUSTATYMŲ IŠSKLEIDŽIAMOS SKILTYS (901)
   Ilgas nustatymų puslapis suskaidytas: matosi tik antraštės,
   turinys atsiveria paspaudus.
   ============================================================ */
.dset {
  border: 1px solid rgb(var(--c-primary) / .18);
  border-radius: .85rem;
  background: rgb(var(--c-bg) / .35);
  overflow: hidden;
}
.dset + .dset { margin-top: .55rem; }
.dset > summary {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  cursor: pointer; list-style: none;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  color: #fff;
  transition: background .15s;
}
.dset > summary::-webkit-details-marker { display: none; }
.dset > summary:hover { background: rgb(var(--c-primary) / .08); }
.dset[open] > summary { border-bottom: 1px solid rgb(var(--c-primary) / .14); }
.dset-now {
  margin-left: auto; text-align: right;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: .7rem;
  letter-spacing: 0; color: #8A94A2;
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dset-arrow { font-size: .7rem; color: #6B7684; transition: transform .18s; flex-shrink: 0; }
.dset[open] > summary .dset-arrow { transform: rotate(180deg); }
.dset-body { padding: .9rem 1rem 1.1rem; }