/* Slovra V6 — PART 1.2 NEUTRAL DARK + RGB ACCENTS
   Dark mode uses graphite/black surfaces; color lives in accents, not in a navy canvas. */
:root{
  --p1-bg:#111111;
  --p1-surface:#191919;
  --p1-surface-2:#222222;
  --p1-surface-3:#2b2b2b;
  --p1-line:rgba(255,255,255,.105);
  --p1-text-main:#f7f7f8;
  --p1-text-muted:#aaaeb5;
  --p1-shadow:0 18px 48px rgba(0,0,0,.30);
}
body.light-mode,body.light,html[data-theme="light"]{
  --p1-bg:#f2f3f5;
  --p1-surface:#fafafa;
  --p1-surface-2:#f0f1f3;
  --p1-surface-3:#e7e9ed;
  --p1-line:rgba(23,26,31,.10);
  --p1-text-main:#181a1f;
  --p1-text-muted:#686d76;
  --p1-shadow:0 18px 44px rgba(28,31,38,.09);
}

body,#app-container{background-color:var(--p1-bg)!important}

/* No navy base: graphite canvas + colored atmospheric light only. */
#screen-home{
  background:
    radial-gradient(720px 390px at 4% -6%,rgba(176,92,255,.13),transparent 62%),
    radial-gradient(660px 360px at 97% 2%,rgba(48,218,221,.10),transparent 61%),
    radial-gradient(520px 300px at 70% 90%,rgba(255,92,126,.055),transparent 65%),
    linear-gradient(180deg,#111111 0%,#151515 48%,#101010 100%)!important;
}
body.light-mode #screen-home,body.light #screen-home,html[data-theme="light"] #screen-home{
  background:
    radial-gradient(760px 410px at 3% -7%,rgba(174,105,255,.115),transparent 63%),
    radial-gradient(700px 390px at 98% 1%,rgba(38,203,220,.09),transparent 62%),
    radial-gradient(540px 310px at 72% 92%,rgba(255,106,131,.055),transparent 65%),
    linear-gradient(180deg,#f5f5f6 0%,#f0f1f3 52%,#f5f5f6 100%)!important;
}

/* Floating bars: neutral graphite, never blue/navy. */
.game-header,.settings-topbar,.contribute-topbar,.v28-topbar,.v31-topbar,.v32-topbar,.v33-top,.v35-top,.v4145-top,.v4650-top,.v70-screen-head,.v30-topbar{
  background:linear-gradient(135deg,rgba(37,37,37,.94),rgba(24,24,24,.91))!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.29)!important;
}
body.light-mode .game-header,body.light-mode .settings-topbar,body.light-mode .contribute-topbar,body.light-mode .v28-topbar,body.light-mode .v70-screen-head,
body.light .game-header,body.light .settings-topbar,body.light .contribute-topbar,html[data-theme="light"] .game-header{
  background:linear-gradient(135deg,rgba(253,253,253,.93),rgba(241,242,244,.91))!important;
  border-color:rgba(22,25,30,.09)!important;
  box-shadow:0 12px 34px rgba(24,27,33,.10)!important;
}

/* Hero and focus keep playful color without tinting the whole surface blue. */
#screen-home.slovra-home-simple .hero-banner{
  background:
    radial-gradient(105% 175% at 98% 0%,rgba(54,224,220,.13),transparent 48%),
    radial-gradient(95% 150% at 0% 100%,rgba(176,92,255,.11),transparent 54%),
    linear-gradient(145deg,#202020,#191919)!important;
  border-color:rgba(190,120,255,.20)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.22)!important;
}
body.light-mode #screen-home.slovra-home-simple .hero-banner,
body.light #screen-home.slovra-home-simple .hero-banner{
  background:
    radial-gradient(105% 175% at 98% 0%,rgba(50,205,213,.12),transparent 48%),
    radial-gradient(95% 150% at 0% 100%,rgba(173,102,255,.10),transparent 54%),
    linear-gradient(145deg,#fafafa,#f3f3f5)!important;
  border-color:rgba(142,84,217,.16)!important;
}

.slovra-simple-focus{
  position:relative!important;
  background:
    radial-gradient(620px 280px at 0% 0%,rgba(169,91,255,.085),transparent 62%),
    linear-gradient(145deg,#1f1f1f,#191919)!important;
  border-color:rgba(255,255,255,.105)!important;
}
body.light-mode .slovra-simple-focus,body.light .slovra-simple-focus{
  background:
    radial-gradient(520px 250px at 0% 0%,rgba(166,94,255,.08),transparent 62%),
    linear-gradient(145deg,#fafafa,#f1f2f4)!important;
  border-color:rgba(24,27,32,.09)!important;
}

/* A restrained RGB motion accent: visible, but not a gaming-neon wash. */
.slovra-simple-continue{
  background:linear-gradient(115deg,#9c62ff 0%,#3fc9ef 28%,#5edb8a 53%,#ff8a68 78%,#b868ff 100%)!important;
  background-size:260% 260%!important;
  animation:slovraP12RgbShift 11s ease-in-out infinite!important;
  color:#fff!important;
  box-shadow:0 13px 30px rgba(0,0,0,.22),0 0 28px rgba(110,102,255,.10)!important;
}
body.light-mode .slovra-simple-continue,body.light .slovra-simple-continue,html[data-theme="light"] .slovra-simple-continue{
  background:linear-gradient(115deg,#9259f5 0%,#28bddd 28%,#41c976 53%,#fa775d 78%,#a553f1 100%)!important;
  background-size:260% 260%!important;
  color:#fff!important;
}
@keyframes slovraP12RgbShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Neutral action-card bases; semantic color stays on glow, icon and border. */
.slovra-simple-action.tone-units,
.slovra-simple-action.tone-review,
.slovra-simple-action.tone-social,
.slovra-simple-action.tone-speech{
  background:
    radial-gradient(120px 100px at 105% 105%,var(--p1-action-glow,transparent),transparent 72%),
    linear-gradient(145deg,#262626,#202020)!important;
}
body.light-mode .slovra-simple-action.tone-units,body.light .slovra-simple-action.tone-units,
body.light-mode .slovra-simple-action.tone-review,body.light .slovra-simple-action.tone-review,
body.light-mode .slovra-simple-action.tone-social,body.light .slovra-simple-action.tone-social,
body.light-mode .slovra-simple-action.tone-speech,body.light .slovra-simple-action.tone-speech{
  background:
    radial-gradient(120px 100px at 105% 105%,var(--p1-action-glow,transparent),transparent 72%),
    linear-gradient(145deg,#fbfbfb,#f0f1f3)!important;
}

/* Make the former blue social card a bright cyan accent, never a navy tile. */
.slovra-simple-action.tone-social{
  --p1-action:#39d2e8;--p1-action-glow:rgba(57,210,232,.20);--icon-main:#3ed6ea;--icon-accent:#a9f4ff;--icon-soft:rgba(57,210,232,.16);
  border-color:rgba(57,210,232,.29)!important;
}

/* Unit cards use graphite/frosted bases; themes color only the accent band/icon. */
.slovra-preview-unit,.slovra-preview-unit.theme-0,.slovra-preview-unit.theme-1,.slovra-preview-unit.theme-2,.slovra-preview-unit.theme-3{
  background:
    radial-gradient(150px 100px at 100% 0%,var(--unit-soft),transparent 72%),
    linear-gradient(150deg,#242424,#1c1c1c)!important;
  box-shadow:0 12px 25px rgba(0,0,0,.19)!important;
}
body.light-mode .slovra-preview-unit,body.light .slovra-preview-unit{
  background:
    radial-gradient(150px 100px at 100% 0%,var(--unit-soft),transparent 72%),
    linear-gradient(150deg,#fbfbfc,#eff0f2)!important;
  box-shadow:0 12px 25px rgba(25,28,34,.08)!important;
}
.slovra-preview-unit.theme-1{--unit-accent:#35d2e6;--unit-soft:rgba(53,210,230,.16);--icon-main:#35d2e6;--icon-accent:#aaf4ff;--icon-soft:rgba(53,210,230,.17)}

/* Tool dock stays colorful on a neutral base. */
.slovra-tool-dock{
  background:linear-gradient(145deg,#202020,#191919)!important;
  border-color:rgba(255,255,255,.10)!important;
}
body.light-mode .slovra-tool-dock,body.light .slovra-tool-dock{
  background:linear-gradient(145deg,#fafafa,#eff0f2)!important;
  border-color:rgba(24,27,32,.09)!important;
}
.slovra-tool-dock button{
  background:linear-gradient(145deg,#282828,#222)!important;
}
body.light-mode .slovra-tool-dock button,body.light .slovra-tool-dock button{
  background:linear-gradient(145deg,#fff,#f2f3f5)!important;
}

/* Small RGB shimmer for the blue/cyan quick tool only; keeps the UI alive. */
#slovra-tool-listen{
  --icon-main:#37d5e7;--icon-accent:#a5f4ff;--icon-soft:rgba(55,213,231,.16);
  border-color:rgba(55,213,231,.20)!important;
}

@media(max-width:720px){
  #screen-home{background:linear-gradient(180deg,#121212 0%,#171717 48%,#101010 100%)!important}
  body.light-mode #screen-home,body.light #screen-home,html[data-theme="light"] #screen-home{background:linear-gradient(180deg,#f4f4f5 0%,#eeeeef 100%)!important}
}

@media(prefers-reduced-motion:reduce){
  .slovra-simple-continue{animation:none!important;background-position:45% 50%!important}
}
body.reduce-motion .slovra-simple-continue,.reduce-motion .slovra-simple-continue{animation:none!important;background-position:45% 50%!important}