:root{
  --c-bg:#160f24;
  --c-panel:#241a3a;
  --c-panel2:#3a2a54;
  --c-panel3:#4a3568;
  --c-text:#F2E6D6;
  --c-muted:#a99bc4;
  --c-accent:#E585C4;
  --c-accent-text:#1b1330;
}
/* No :root palette override here on purpose — every translucent tone below is
   mixed live from whatever --c-panel / --c-accent / --c-text already are (see
   colorsOverrideCss), so this always matches the site's actual current colors,
   including if they're changed later from the Colors tab. Needs color-mix(),
   supported in all current browsers. */

/* ---------- Glass panels: translucent panel color + blurred backdrop + soft glowing edge ---------- */
.header__content, .footer__content, .content, .game-offer__window, .description,
.game-offer__description, .character-games, .character-guides, .game-card,
.adv-block, .game-banner, .eg-character{
  background:color-mix(in srgb, var(--c-panel) 55%, transparent) !important;
  outline:1px solid color-mix(in srgb, var(--c-text) 22%, transparent) !important;
  outline-offset:-1px !important;
  box-shadow:0 22px 50px rgba(3,4,14,0.5), inset 0 1px 0 color-mix(in srgb, var(--c-text) 6%, transparent) !important;
  border-radius:26px !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
  background-image:none !important;
}

/* ---------- Header menu: glass pills, colored glow per category (same 6 hues
   as the menu icon sprite, so icon + pill glow always match) ---------- */
.header .menu ul li a{
  background:color-mix(in srgb, var(--c-panel) 55%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--c-text) 28%, transparent) !important;
  border-radius:18px !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.header .menu ul li.menu-orange > a{ border-color:rgba(217,140,61,0.6)  !important; background:rgba(217,140,61,0.14)  !important; }
.header .menu ul li.menu-red    > a{ border-color:rgba(217,72,76,0.6)   !important; background:rgba(217,72,76,0.14)   !important; }
.header .menu ul li.menu-blue   > a{ border-color:rgba(76,143,224,0.6)  !important; background:rgba(76,143,224,0.14)  !important; }
.header .menu ul li.menu-pink   > a{ border-color:rgba(217,84,140,0.6)  !important; background:rgba(217,84,140,0.14)  !important; }
.header .menu ul li.menu-green  > a{ border-color:rgba(69,179,122,0.6)  !important; background:rgba(69,179,122,0.14)  !important; }
.header .menu ul li.menu-navy   > a{ border-color:rgba(92,111,232,0.6)  !important; background:rgba(92,111,232,0.14)  !important; }
.header .menu ul li a:hover{
  background:color-mix(in srgb, var(--c-panel2) 75%, transparent) !important;
  box-shadow:0 10px 24px rgba(3,4,14,0.5) !important;
  transform:translateY(-2px) !important;
}
.header .menu .dropdown_first{
  background:color-mix(in srgb, var(--c-bg) 85%, transparent) !important;
  outline:1px solid color-mix(in srgb, var(--c-text) 28%, transparent) !important;
  border-radius:18px !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  box-shadow:0 20px 44px rgba(3,4,14,0.55) !important;
}

/* ---------- Buttons: soft glass pills in the site's own accent color ---------- */
.player-overlay__start, .btn-search, .btn-fullscreen, .btn-favorite{
  background:color-mix(in srgb, var(--c-accent) 18%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--c-accent) 55%, transparent) !important;
  border-radius:18px !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  box-shadow:0 6px 16px rgba(3,4,14,0.35) !important;
  color:var(--c-text) !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.player-overlay__start:hover, .btn-search:hover, .btn-fullscreen:hover, .btn-favorite:hover{
  background:color-mix(in srgb, var(--c-accent) 32%, transparent) !important;
  box-shadow:0 10px 24px rgba(3,4,14,0.5) !important;
  transform:translateY(-2px) !important;
}
.header .search input{
  background:color-mix(in srgb, var(--c-panel) 55%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--c-text) 28%, transparent) !important;
  border-radius:18px !important;
  color:var(--c-text) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.header .search input::placeholder{ color:var(--c-muted) !important; }

/* ---------- Game cards: frosted glass tiles that lift on hover ---------- */
.game-card{
  background:color-mix(in srgb, var(--c-panel) 50%, transparent) !important;
  outline:1px solid color-mix(in srgb, var(--c-text) 22%, transparent) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 10px 30px rgba(3,4,14,0.45) !important;
  border-radius:20px !important;
  transition:transform .15s ease, outline-color .15s ease, background .15s ease !important;
}
.game-card:hover{
  background:color-mix(in srgb, var(--c-panel2) 70%, transparent) !important;
  outline-color:color-mix(in srgb, var(--c-accent) 85%, transparent) !important;
  transform:translateY(-4px) !important;
  box-shadow:0 16px 34px rgba(3,4,14,0.55) !important;
}
.game-card .thumb img{ border-radius:14px !important; }
.character-games, .character-guides{
  background:color-mix(in srgb, var(--c-accent) 8%, transparent) !important;
  outline:1px solid color-mix(in srgb, var(--c-accent) 50%, transparent) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
.character-games__list{ background:color-mix(in srgb, var(--c-panel) 55%, transparent) !important; border-radius:18px !important; backdrop-filter:blur(10px) !important; }
.character-name{ background:rgba(3,4,14,0.65) !important; backdrop-filter:blur(6px) !important; border-radius:12px !important; }
.character-games__list li a:hover .character-name{ background:color-mix(in srgb, var(--c-accent) 90%, transparent) !important; }

/* ---------- Pagination: tiny glass chips ---------- */
.pagination li, .pagination-left, .pagination-right{
  background:color-mix(in srgb, var(--c-panel) 55%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--c-text) 30%, transparent) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.pagination li.current{ background:color-mix(in srgb, var(--c-accent) 85%, transparent) !important; border-color:var(--c-accent) !important; }
.pagination li:hover{ background:color-mix(in srgb, var(--c-accent) 60%, transparent) !important; }

/* ---------- Content blocks — each keeps its own established hue, just glassy now ---------- */
.game-offer__description .pp-quote{
  background:rgba(161,143,244,0.1) !important; outline:1px solid rgba(161,143,244,0.55) !important;
  backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border-radius:20px !important;
}
.game-offer__description .pp-tip{
  background:rgba(94,211,175,0.1) !important; outline:1px solid rgba(94,211,175,0.55) !important;
  backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border-radius:20px !important;
}
.game-offer__description .pp-faq-item{
  background:rgba(116,188,236,0.1) !important; outline:1px solid rgba(116,188,236,0.55) !important;
  backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border-radius:20px !important;
}
.game-offer__description .pp-controls{
  background:color-mix(in srgb, var(--c-accent) 10%, transparent) !important; outline:1px solid color-mix(in srgb, var(--c-accent) 55%, transparent) !important;
  backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border-radius:20px !important;
}
.game-offer__description table{
  background:color-mix(in srgb, var(--c-panel) 50%, transparent) !important; outline:1px solid color-mix(in srgb, var(--c-accent) 50%, transparent) !important;
  backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important; border-radius:20px !important;
}
.game-offer__description table th{ background:color-mix(in srgb, var(--c-accent) 20%, transparent) !important; }
.game-offer__description table tr td:first-child{ background:color-mix(in srgb, var(--c-accent) 10%, transparent) !important; }
.game-offer__description h2{ border-bottom:1px solid color-mix(in srgb, var(--c-text) 25%, transparent) !important; }

/* ---------- Player overlay: soft glass sheen instead of the smooth animated multicolor gradient ---------- */
.player-overlay{
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c-bg) 92%, black) 0%, color-mix(in srgb, var(--c-panel) 85%, black) 60%, color-mix(in srgb, var(--c-accent) 22%, var(--c-bg)) 100%) !important;
  animation:none !important;
}
.player-overlay-image img{
  border:1px solid color-mix(in srgb, var(--c-text) 35%, transparent) !important;
  border-radius:16px !important;
  backdrop-filter:blur(6px) !important;
}

/* ---------- Dropdown hint: a small chevron on any top-level item that opens a
   submenu on hover — otherwise there's no visual cue that these are dropdowns
   at all. Pure CSS, only appears on items that actually have a .dropdown_first
   next to them (:has() — no markup change needed). ---------- */
.header .menu ul > li:has(> .dropdown_first) > a{
  padding-right:26px !important;
  position:relative;
}
.header .menu ul > li:has(> .dropdown_first) > a::after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-5px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.65;
  transition:transform .2s ease, opacity .2s ease;
}
.header .menu ul > li:has(> .dropdown_first):hover > a::after{
  transform:rotate(225deg);
  opacity:1;
}