/*
  casecs2 global UI layer.
  Keep this file loaded after page-level styles for the public app.
*/
:root {
  --gb-bg-0: #111110;
  --gb-bg-1: #141413;
  --gb-bg-2: #20201d;
  --gb-panel: #191917;
  --gb-panel-strong: #20201d;
  --gb-panel-soft: rgba(255, 255, 255, 0.045);
  --gb-border: rgba(255, 255, 240, 0.09);
  --gb-border-strong: rgba(182, 244, 0, 0.3);
  --gb-text: #f5f5ef;
  --gb-text-soft: #c5c5bc;
  --gb-muted: #a2a299;
  --gb-muted-2: #85857c;
  --gb-accent: #b6f400;
  --gb-accent-2: var(--gb-accent);
  --gb-accent-3: #d9dfbb;
  --gb-danger: #ff607d;
  --gb-success: #b6f400;
  --gb-radius-sm: 12px;
  --gb-radius-md: 12px;
  --gb-radius-lg: 16px;
  --gb-radius-xl: 20px;
  --gb-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  --gb-shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.24);
  --gb-font: "Manrope", "Space Grotesk", "Segoe UI", sans-serif;
  --gb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--gb-bg-0);
  color-scheme: dark;
  text-rendering: geometricPrecision;
}

body.home-page,
body.case-page,
body.upgrade-page,
body.crash-page,
body.double-page,
body.jackpot-page,
body.case-race-page,
body.profile-page,
body.news-page,
body.news-article-page,
body.slot-game-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--gb-text);
  font-family: var(--gb-font);
  background: radial-gradient(ellipse at 72% 0%, rgba(150, 157, 77, 0.055), transparent 38rem), var(--gb-bg-0);
}

body.home-page::before,
body.case-page::before,
body.upgrade-page::before,
body.crash-page::before,
body.double-page::before,
body.jackpot-page::before,
body.case-race-page::before,
body.profile-page::before,
body.news-page::before,
body.news-article-page::before,
body.slot-game-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg,
canvas {
  max-width: 100%;
}

::selection {
  background: rgba(114, 230, 164, 0.3);
  color: var(--gb-text);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(7, 16, 25, 0.7);
}

::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 16, 25, 0.7);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gb-accent-2), var(--gb-accent));
}

:focus-visible {
  outline: 3px solid rgba(114, 230, 164, 0.45);
  outline-offset: 3px;
}

.page-shell,
.slot-page {
  width: min(1500px, calc(100vw - 24px));
  margin-inline: auto;
}

.page-shell {
  padding-inline: clamp(12px, 2.2vw, 28px);
}

.home-page .page-shell,
.case-page .page-shell,
.upgrade-page .page-shell,
.crash-page .page-shell,
.double-page .page-shell,
.jackpot-page .page-shell,
.case-race-page .page-shell,
.profile-page .page-shell,
.news-page .page-shell,
.news-article-page .page-shell {
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-kicker,
.case-eyebrow,
.slot-kicker,
.admin-kicker {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-page h1,
.case-page h1,
.upgrade-page h1,
.crash-page h1,
.double-page h1,
.jackpot-page h1,
.case-race-page h1,
.profile-page h1,
.news-page h1,
.news-article-page h1,
.slot-page h1 {
  font-family: "Space Grotesk", "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -0.045em;
}

.home-page h2,
.case-page h2,
.upgrade-page h2,
.crash-page h2,
.double-page h2,
.jackpot-page h2,
.case-race-page h2,
.profile-page h2,
.news-page h2,
.news-article-page h2,
.slot-page h2 {
  letter-spacing: -0.03em;
}

.home-hero,
.cases-surface,
.case-hero,
.case-stage,
.case-catalog,
.upgrade-hero,
.upgrade-panel,
.upgrade-library,
.upgrade-market,
.crash-hero,
.crash-stage,
.crash-sidebar__panel,
.crash-pool,
.double-hero,
.double-stage,
.double-sidebar__panel,
.double-pool,
.jackpot-hero,
.room-rail,
.jackpot-stage,
.jackpot-sidebar__panel,
.jackpot-panel,
.case-race-hero,
.race-stage,
.race-panel,
.profile-hero,
.profile-panel,
.news-hero,
.news-card,
.article-shell,
.slot-shell,
.slot-board {
  border: 1px solid var(--gb-border) !important;
  background: var(--gb-panel) !important;
  border-radius: var(--gb-radius-lg);
  box-shadow: none;
  backdrop-filter: none;
}

.home-hero,
.case-hero,
.upgrade-hero,
.crash-hero,
.double-hero,
.jackpot-hero,
.case-race-hero,
.profile-hero,
.news-hero,
.slot-shell {
  position: relative;
  overflow: hidden;
}

.home-hero::after,
.case-hero::after,
.upgrade-hero::after,
.crash-hero::after,
.double-hero::after,
.jackpot-hero::after,
.case-race-hero::after,
.profile-hero::after,
.news-hero::after,
.slot-shell::after {
  content: "";
  position: absolute;
  inset: auto -8% -34% 36%;
  height: 260px;
  pointer-events: none;
  background: none;
  filter: blur(10px);
}

.hero-action,
.primary-button,
.secondary-button,
.ghost-button,
.tool-button,
.start,
#upgrade-btn,
.crash-button,
.double-button,
.jackpot-button,
.jackpot-inline-button,
.race-button,
.spin-button,
.side-button,
.sound-toggle,
.filter-pills button,
.modes button,
.jackpot-modal__tab,
.pagination button,
.mode-nav a {
  min-height: 44px;
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform 180ms var(--gb-ease),
    box-shadow 180ms var(--gb-ease),
    border-color 180ms var(--gb-ease),
    background 180ms var(--gb-ease),
    opacity 180ms var(--gb-ease);
}

.hero-action:hover,
.primary-button:not(:disabled):hover,
.secondary-button:not(:disabled):hover,
.ghost-button:not(:disabled):hover,
.tool-button:not(:disabled):hover,
.start:not(:disabled):hover,
#upgrade-btn:not(:disabled):hover,
.crash-button:not(:disabled):hover,
.double-button:not(:disabled):hover,
.jackpot-button:not(:disabled):hover,
.jackpot-inline-button:not(:disabled):hover,
.race-button:not(:disabled):hover,
.spin-button:not(:disabled):hover,
.side-button:not(:disabled):hover,
.sound-toggle:not(:disabled):hover,
.filter-pills button:not(:disabled):hover,
.modes button:not(:disabled):hover,
.jackpot-modal__tab:not(:disabled):hover,
.pagination button:not(:disabled):hover,
.mode-nav a:hover {
  transform: translateY(-2px);
}

.hero-action--primary,
.primary-button,
.start:not(.start--secondary):not(.start--ghost),
#upgrade-btn,
.crash-button--primary,
.double-button--primary,
.jackpot-button--primary,
.race-button--primary,
.spin-button {
  border-color: transparent !important;
  background: var(--gb-accent) !important;
  color: #111110 !important;
  box-shadow: none;
}

.secondary-button,
.start--secondary,
.crash-button--secondary,
.double-button--secondary,
.jackpot-button--secondary,
.race-button--secondary,
.tool-button {
  border: 1px solid var(--gb-border) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--gb-text) !important;
}

.ghost-button,
.start--ghost,
.double-button--ghost,
.jackpot-button--ghost {
  border: 1px solid rgba(147, 169, 196, 0.12) !important;
  background: rgba(255, 255, 240, 0.025) !important;
  color: var(--gb-text-soft) !important;
}

button:disabled,
.is-disabled {
  cursor: not-allowed !important;
  opacity: 0.52 !important;
  transform: none !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-sm);
  background: #151513;
  color: var(--gb-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--gb-muted-2);
}

select {
  color: var(--gb-text);
  color-scheme: dark;
}

.mode-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mode-nav a {
  border: 1px solid var(--gb-border);
  background: rgba(255, 255, 255, 0.055);
  color: var(--gb-text-soft);
}

.mode-nav a.is-active,
.mode-nav a[aria-current="page"] {
  border-color: var(--gb-border-strong);
  background: linear-gradient(135deg, rgba(87, 200, 255, 0.2), rgba(114, 230, 164, 0.17));
  color: var(--gb-text);
}

.case-stat,
.upgrade-stat,
.crash-stat,
.double-stat,
.jackpot-stat,
.hero-stat,
.economy-card,
.round-badge,
.bank-chip,
.summary-chip,
.panel-count,
.pool-meta {
  border: 1px solid rgba(147, 169, 196, 0.12) !important;
  background: rgba(255, 255, 240, 0.025) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.case-stat__value,
.upgrade-stat__value,
.crash-stat__value,
.double-stat__value,
.jackpot-stat__value,
.economy-card__value,
.featured-case__price-value {
  color: var(--gb-accent-3) !important;
}

.drop-reveal,
.jackpot-modal,
.admin-modal {
  padding: clamp(10px, 2.4vw, 24px);
}

.drop-reveal__shell,
.jackpot-modal__dialog,
.modal-content {
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

.drop-reveal__card,
.jackpot-modal__dialog,
.modal-content {
  border: 1px solid var(--gb-border-strong) !important;
  box-shadow: var(--gb-shadow);
}

.slot-page {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: clamp(12px, 2vw, 22px);
}

.slot-shell {
  min-height: min(780px, calc(100dvh - 24px));
}

.slot-board {
  align-items: stretch;
}

.slot-controls {
  position: sticky;
  top: 82px;
  align-self: start;
}

.spin-button {
  width: 100%;
  min-height: 58px;
  font-size: clamp(18px, 3vw, 28px);
}

.jackpot-modal__dialog {
  width: min(980px, calc(100vw - 20px));
}

.jackpot-modal__body,
.modal-items-grid,
.modal-item-grid,
.i18n-keys-list {
  overscroll-behavior: contain;
}

@media (max-width: 1180px) {
  .page-shell {
    margin-left: auto !important;
    padding-top: 18px;
  }

  .home-hero,
  .case-hero,
  .upgrade-hero,
  .crash-hero,
  .double-hero,
  .jackpot-hero {
    grid-template-columns: 1fr !important;
  }

  .slot-board {
    grid-template-columns: 1fr !important;
  }

  .slot-controls {
    position: static;
  }
}

@media (max-width: 820px) {
  .page-shell,
  .slot-page {
    width: min(100%, calc(100vw - 12px));
    padding-inline: 6px;
  }

  .home-page h1,
  .case-page h1,
  .upgrade-page h1,
  .crash-page h1,
  .double-page h1,
  .jackpot-page h1,
  .case-race-page h1,
  .profile-page h1,
  .news-page h1,
  .news-article-page h1,
  .slot-page h1 {
    font-size: clamp(32px, 11vw, 44px) !important;
  }

  .home-hero,
  .cases-surface,
  .case-hero,
  .case-stage,
  .case-catalog,
  .upgrade-hero,
  .upgrade-panel,
  .upgrade-library,
  .upgrade-market,
  .crash-hero,
  .crash-stage,
  .crash-sidebar__panel,
  .crash-pool,
  .double-hero,
  .double-stage,
  .double-sidebar__panel,
  .double-pool,
  .jackpot-hero,
  .room-rail,
  .jackpot-stage,
  .jackpot-sidebar__panel,
  .jackpot-panel,
  .slot-shell,
  .slot-board {
    border-radius: 14px !important;
  }

  .case-stage__actions,
  .crash-actions,
  .double-actions,
  .jackpot-modal__footer,
  .button-group {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .case-stage__actions button,
  .crash-actions button,
  .double-actions button,
  .jackpot-modal__footer button,
  .button-group button {
    width: 100%;
  }

  .drop-reveal__shell,
  .jackpot-modal__dialog,
  .modal-content {
    max-height: calc(100dvh - 14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared surfaces: restrained graphite and a single action accent. */
.main-header { padding: 18px 28px; gap: 30px; background: rgba(17,17,16,.96); border-bottom-color: #262623; box-shadow:none; }
.main-header .logo { border:0; border-radius:0; background:none; box-shadow:none; padding:0; gap:9px; }
.main-header .logo::before { display:none; }
.main-header .logo:hover { box-shadow:none; }
.main-header .logo-text strong { font-size:26px; letter-spacing:-1.2px; }
.main-header .logo-text small { display:none; }
.main-header .logo-mark { background:none; border:0; box-shadow:none; }
.main-header .logo-mark__svg { filter:none; }
.main-header .logo-text strong span:last-child { color:var(--gb-accent); }
.main-header .nav-links { gap:6px; }
.main-header .nav-links a { padding:12px 13px; font-size:13px; color:#9c9c94; font-weight:650; border-radius:10px; }
.main-header .nav-links a.is-active { background:#272723; color:#f7f7f0; box-shadow:none; }
.main-header .nav-links a:hover { background:#242421; color:#f7f7f0; transform:none; }
.main-header .account-pill { background:#232320; border:1px solid #33332d; border-radius:12px; box-shadow:none; padding:8px 10px; }
.main-header .balance-block__value { color:var(--gb-text); font-variant-numeric:tabular-nums; }
.main-header .balance-block #add-funds { background:var(--gb-accent); width:32px; height:32px; border-radius:9px; box-shadow:none; }
.main-header .user-info .avatar { border:1px solid #525249; box-shadow:none; }
.main-header .login-button { background:var(--gb-accent); color:#171b0c; border:0; border-radius:12px; min-height:46px; box-shadow:none; }
.main-header .language-switcher__trigger { border-radius:10px; border-color:#33332d; background:#232320; box-shadow:none; padding:5px 10px; }
.main-header .language-switcher__current { background:none; padding:5px 0; font-weight:600; }
.main-header .language-switcher__current-currency { color:#a4a49b; }
.main-header .language-switcher__menu { background:#20201d; border-color:#35352f; border-radius:12px; box-shadow:0 18px 50px #0008; }
.main-header .header-menu-toggle { background:#272723; border-color:#35352e; box-shadow:none; border-radius:10px; }
.topup-modal { z-index:2000; }
.topup-modal__backdrop { background:#000a; backdrop-filter:blur(10px); }
.topup-modal__dialog { background:#191917; border-color:#35352e; border-radius:16px; padding:30px; gap:24px; max-height:calc(100dvh - 32px); overflow-y:auto; box-shadow:0 30px 120px #0009; }
.topup-modal__head h2 { font-size:27px; letter-spacing:-.8px; line-height:1.2; }
.topup-modal__eyebrow { color:#a2a299; letter-spacing:.08em; }
.topup-modal__close { border-radius:10px; background:#272723; border-color:#393933; }
.topup-method, .topup-preset, .topup-modal__summary-card, .topup-modal__amount input { background:#232320; border-color:#363630; border-radius:12px; }
.topup-method { grid-template-columns:1fr; gap:10px; padding:16px; min-height:126px; }
.topup-method__badge { width:54px; height:34px; background:#30332a; color:#d5e2b1; border-radius:7px; }
.topup-method.is-active, .topup-method:not(:disabled):hover, .topup-preset.is-active { background:#2c321f; border-color:#859f2a; box-shadow:none; transform:none; }
.topup-modal__button--primary { background:var(--gb-accent); border:0; color:#151a09; box-shadow:none; }
.topup-modal__button--ghost { background:#282825; border-color:#373731; color:#c8c8c0; }
.topup-modal__amount input:focus { border-color:var(--gb-accent); box-shadow:0 0 0 3px rgba(var(--brand-accent-rgb, 182, 244, 0), 0.071); }
.topup-method__hint, .topup-modal__section-head, .topup-modal__amount, .topup-modal__summary-label { color:#a8a89e; }
.drop-feed { background:#1c1c19; border-color:#37372f; box-shadow:0 12px 40px #0006; }
.drop-source { color:var(--gb-accent); }
@media (max-width:1280px) {
  .main-header { padding:12px 18px; gap:16px; }
  .main-header .header-panel { background:#191917; border-color:#33332d; box-shadow:0 24px 40px #0006; }
}
@media (max-width:600px) {
  .main-header { padding:10px 14px; }
  .main-header .logo-text strong { font-size:24px; }
  .topup-modal { padding:12px; }
  .topup-modal__dialog { padding:20px; gap:20px; }
  .topup-modal__head h2 { font-size:23px; }
  .topup-modal__methods { gap:8px; }
  .topup-method { padding:10px; min-height:116px; }
  .topup-method__title { font-size:13px; }
  .topup-method__hint { font-size:11px; }
}
.main-header .gamification-mini { background:#282c20; border:0; border-radius:9px; box-shadow:none; }
.main-header .gamification-mini__level { background:none; color:var(--gb-accent); border-radius:6px; font-weight:700; }
@media (max-width:1280px) {
 .main-header { --header-menu-top:76px; }
 .main-header .nav-links a { background:#252522; border-color:#33332d; }
 .main-header .header-panel { border-radius:14px; }
}
@media (max-width:600px) { .main-header { --header-menu-top:68px; } }
/* Live activity stays beside the catalogue instead of covering controls. */
@media (min-width:1281px) {
 body:has(.drop-feed.is-visible) .page-shell { width:calc(100% - 154px); margin-left:154px !important; margin-right:0 !important; }
 .drop-feed.is-visible { top:94px; bottom:10px; left:8px; right:auto; width:138px; max-height:none; border-radius:12px; padding:5px; background:#1b1b18; box-shadow:none; }
 .drop-feed::before { content:'LIVE DROPS'; display:block; color:var(--gb-accent); text-align:center; padding:10px 0; font-size:10px; font-weight:700; letter-spacing:.1em; }
 #drop-feed-list { max-height:calc(100vh - 148px); overflow:hidden; }
 #drop-feed-list li { flex-direction:column; gap:4px; padding:8px; margin-bottom:6px; border-radius:9px; border-bottom:0; min-height:108px; }
 #drop-feed-list img { flex:0 0 55px; height:55px; width:94px; }
 .drop-feed__content { width:100%; }
 .drop-feed .drop-title { text-align:center; font-size:10px; font-weight:600; }
 .drop-meta { font-size:9px; justify-content:center; margin-top:4px; }
 .drop-source { display:none; }
}
@media (max-width:1280px) { .drop-feed.is-visible { display:none; } }
.home-page .seo-breadcrumbs { display:none; }
body .seo-content, body .seo-news-hub, body .seo-faq { background:#191917; border-color:#30302b; border-radius:16px; box-shadow:none; }
body .seo-breadcrumbs a[aria-current="page"] { color:var(--gb-accent); }
body .seo-content__head span { color:#aaa99b; }
:root { --gb-font: "Segoe UI", Arial, sans-serif; }
body:is(.home-page,.case-page,.upgrade-page,.crash-page,.double-page,.jackpot-page,.case-race-page,.profile-page,.news-page,.news-article-page) :is(h1,h2,h3) { font-family:"Segoe UI",Arial,sans-serif; font-weight:700; }

.main-header .avatar--fallback { display:grid; place-items:center; background:#373b2b; color:#d5ebae; font-size:14px; font-weight:600; }
.main-header .logo-text strong { font-weight:750; }
.home-page .hero-stat { border:0 !important; background:none !important; box-shadow:none; }
@media (max-width:600px) {
 .topup-modal .topup-modal__dialog { padding:20px; gap:18px; }
 .topup-modal .topup-modal__methods { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .topup-modal .topup-method { padding:9px; min-height:115px; align-content:start; gap:9px; }
 .topup-modal .topup-method__hint { display:none; }
 .topup-modal .topup-method__title { font-size:12px; line-height:1.4; }
 .topup-modal .topup-modal__presets, .topup-modal .topup-modal__summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .topup-modal .topup-modal__summary-card { padding:12px; }
 .topup-modal .topup-modal__summary-card strong { font-size:17px; }
 .topup-modal .topup-modal__head h2 { font-size:22px; }
}
/* Brand settings are supplied by /appearance.css; game outcome/rarity colors remain semantic. */
:root { --brand-accent-rgb:182,244,0; --brand-on-accent:#111110; --brand-texture:none; --brand-texture-opacity:.12; --brand-art-hue:0deg; --brand-art-saturation:1; }
body:is(.home-page,.case-page,.upgrade-page,.crash-page,.double-page,.jackpot-page,.case-race-page,.profile-page,.news-page,.news-article-page,.slot-game-page) { isolation:isolate; }
body:is(.home-page,.case-page,.upgrade-page,.crash-page,.double-page,.jackpot-page,.case-race-page,.profile-page,.news-page,.news-article-page,.slot-game-page)::before { content:''; display:block !important; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:var(--brand-texture); background-size:cover; background-position:center top; mask-image:none; opacity:var(--brand-texture-opacity); }
body:is(.home-page,.case-page,.upgrade-page,.crash-page,.double-page,.jackpot-page,.case-race-page,.profile-page,.news-page,.news-article-page,.slot-game-page) :is(.hero-action--primary,.primary-button,.login-button,.featured-case__link,.start:not(.start--secondary):not(.start--ghost),#upgrade-btn,.crash-button--primary,.double-button--primary,.jackpot-button--primary,.race-button--primary,.spin-button,.topup-modal__button--primary) { color:var(--brand-on-accent) !important; }
.main-header .balance-block #add-funds { color:var(--brand-on-accent); }
.home-page .filter-pill.is-active, .topup-method.is-active, .topup-preset.is-active { background:color-mix(in srgb,var(--gb-accent) 12%,#1b1b18); border-color:color-mix(in srgb,var(--gb-accent) 32%,#1b1b18); }
.main-header .gamification-mini { background:color-mix(in srgb,var(--gb-accent) 9%,#1b1b18); }
.home-page .case-card__link { background:color-mix(in srgb,var(--gb-accent) 12%,#1b1b18); }
body.motion-ready :is(button,a,input,select,textarea,[tabindex]):focus-visible { outline-color:var(--gb-accent); box-shadow:0 0 0 4px rgba(var(--brand-accent-rgb),.12); }
.home-page .home-hero { background:#14150f !important; }
.home-page .home-hero::before { content:''; position:absolute; inset:0; background:url('/img/case-hero-lime.png') right center / auto 135% no-repeat; filter:hue-rotate(var(--brand-art-hue)) saturate(var(--brand-art-saturation)); pointer-events:none; }
.home-page .home-hero__copy, .home-page .featured-case { position:relative; z-index:1; }
@media(max-width:640px) { .home-page .home-hero::before { background-position:right bottom; background-size:auto 280px; } }