:root {
  --bg: var(--sx-color-void);
  --panel: var(--sx-color-surface-elevated);
  --panel-2: var(--sx-color-surface-interactive);
  --panel2: var(--sx-color-surface-interactive);
  --text: var(--sx-color-text);
  --muted: var(--sx-color-text-secondary);
  --blue: var(--sx-color-cyan);
  --green: var(--sx-color-success);
  --yellow: var(--sx-color-warning);
  --red: var(--sx-color-danger);
  --pink: var(--sx-color-purple-highlight);
}

html, body { font-family: var(--sx-font-ui); background-color: var(--sx-color-void); color: var(--sx-color-text); }
body {
  background-image:
    linear-gradient(rgba(32, 231, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 92, 255, .022) 1px, transparent 1px);
  background-size: 48px 48px;
}

button, input, select, textarea { letter-spacing: 0; }
button {
  border-color: var(--sx-color-border-soft);
  border-radius: var(--sx-radius-md);
  background: var(--sx-color-surface-interactive);
  color: var(--sx-color-text);
  transition: transform var(--sx-duration-fast) var(--sx-ease-standard), border-color var(--sx-duration-fast) var(--sx-ease-standard), background-color var(--sx-duration-fast) var(--sx-ease-standard), opacity var(--sx-duration-fast) var(--sx-ease-standard);
}
button:hover:not(:disabled) { border-color: var(--sx-color-cyan); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { color: var(--sx-color-text-disabled); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--sx-focus-width) solid var(--sx-color-cyan-highlight);
  outline-offset: 2px;
}

.primary, .primary-onboard, #overlayBtn {
  border-color: var(--sx-color-cyan);
  background: var(--sx-color-cyan);
  color: var(--sx-color-void);
  box-shadow: var(--sx-glow-ui);
}
.primary:hover:not(:disabled), .primary-onboard:hover:not(:disabled), #overlayBtn:hover:not(:disabled) { border-color: var(--sx-color-cyan-highlight); background: var(--sx-color-cyan-highlight); }
.success { border-color: var(--sx-color-success); background: rgba(67, 217, 156, .16); }
.danger { border-color: var(--sx-color-danger); color: var(--sx-color-danger); }
#onlineBtn { border-color: var(--sx-color-purple) !important; background: var(--sx-color-purple-soft) !important; color: var(--sx-color-text) !important; box-shadow: none !important; }

.panel, .menu, .dialog, .settings-dialog, .profile-dialog, .game-picker-card, .country-picker-card, .release-modal-card {
  border-color: var(--sx-color-border-soft);
  border-radius: var(--sx-radius-lg);
  background: var(--sx-color-surface-glass);
  box-shadow: var(--sx-shadow-panel);
}
.arena-shell, .arena { border-color: var(--sx-color-border); border-radius: var(--sx-radius-lg); background: var(--sx-color-arena); }
.overlay, .settings-modal, .profile-modal, .release-modal, .game-picker, .country-picker { background: var(--sx-color-overlay); }

.spintrix-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  color: var(--sx-color-cyan-highlight);
  font-family: var(--sx-font-display);
  font-size: var(--sx-type-display);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.spintrix-wordmark__text {
  line-height: 1;
  color: var(--sx-color-cyan-highlight);
  background: linear-gradient(112deg, var(--sx-color-cyan-highlight) 0%, var(--sx-color-text) 38%, var(--sx-color-purple-highlight) 76%, var(--sx-color-purple) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(32, 231, 255, .16);
}
.spintrix-wordmark__x {
  width: 1.08em;
  height: .96em;
  margin: .02em 0 0 -.03em;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(32, 231, 255, .28));
}
.spintrix-x-underlay, .spintrix-x-cyan, .spintrix-x-purple, .spintrix-x-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.spintrix-x-underlay { stroke: var(--sx-color-void); stroke-width: 13; opacity: .94; }
.spintrix-x-cyan { stroke: var(--sx-color-cyan); stroke-width: 8; }
.spintrix-x-purple { stroke: var(--sx-color-purple); stroke-width: 8; }
.spintrix-x-highlight { stroke: var(--sx-color-cyan-highlight); stroke-width: 2; opacity: .78; }
.spintrix-wordmark--compact { font-size: 23px; }
.spintrix-wordmark--hero { font-size: 68px; }

.brand-summary { display: grid; justify-items: start; min-width: 0; }

.pwa-splash { background: var(--sx-color-void); }
.pwa-splash::before, .onboarding::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(32, 231, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 92, 255, .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.pwa-splash-inner { position: relative; z-index: 1; animation: spintrix-entry var(--sx-duration-reward) var(--sx-ease-standard) both; }
.pwa-splash-ball, .onboarding-ball { display: none; }
.pwa-splash-loader { height: 4px; border-radius: var(--sx-radius-pill); background: var(--sx-color-surface-interactive); }
.pwa-splash-loader i { background: linear-gradient(90deg, var(--sx-color-cyan), var(--sx-color-purple)); animation-duration: 1.05s; }

.onboarding { background: var(--sx-color-overlay) !important; }
.onboarding-card {
  position: relative;
  z-index: 1;
  border-color: var(--sx-color-border-active) !important;
  border-radius: var(--sx-radius-lg) !important;
  background: var(--sx-color-surface) !important;
  box-shadow: var(--sx-shadow-modal), var(--sx-glow-ui) !important;
}
.onboarding-card h3 { margin: var(--sx-space-5) 0 var(--sx-space-2); font-size: 20px; }
.onboarding-card > p { color: var(--sx-color-text-secondary); }
.onboarding-card input { border-radius: var(--sx-radius-md); border-color: var(--sx-color-border); background: var(--sx-color-arena); }

.menu > .spintrix-wordmark { margin-bottom: var(--sx-space-2); }
.menu p { color: var(--sx-color-text-secondary); }
.menu-action-grid button { border-radius: var(--sx-radius-md); background: var(--sx-color-surface-interactive); }
.menu-action-grid button span { filter: saturate(.72); }
.version-chip { border-color: var(--sx-color-border-active); border-radius: var(--sx-radius-pill); background: var(--sx-color-cyan-soft); color: var(--sx-color-cyan-highlight); }
.top-tools .language-btn { border-radius: var(--sx-radius-md); background: var(--sx-color-surface-glass); }
.mobile-dock { border-color: var(--sx-color-border-active); border-radius: var(--sx-radius-lg); background: var(--sx-color-surface-glass); }
.mobile-dock button { border-radius: var(--sx-radius-md); }
.mobile-menu-btn, .mobile-pause-btn { border-radius: var(--sx-radius-md); background: var(--sx-color-surface-glass); }
.mobile-sheet-backdrop { background: rgba(5, 7, 13, .72); }

.about-logo .spintrix-wordmark { font-size: 34px; }
.about-developer-credit { display: block; }
.about-developer-link {
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--sx-color-cyan-highlight);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(32, 231, 255, .5);
  text-underline-offset: 3px;
}
.about-developer-link:hover:not(:disabled) { border-color: transparent; background: transparent; color: var(--sx-color-purple-highlight); }
.about-developer-contact { display: block; width: 100%; margin-top: var(--sx-space-1); color: var(--sx-color-text-secondary); font-size: var(--sx-type-micro); line-height: var(--sx-line-micro); }
.about-developer-contact[hidden] { display: none; }
.about-developer-contact strong { color: var(--sx-color-text); }

body[data-quality-effective="low"] .spintrix-wordmark__x { filter: none; }
body[data-quality-effective="low"] .spintrix-wordmark__text { text-shadow: none; }
.performance-post-reduced .pwa-splash::before, .performance-post-reduced .onboarding::before { display: none; }

@keyframes spintrix-entry {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px), (pointer: coarse) {
  button, input, select, textarea { min-height: 48px; }
  .spintrix-wordmark--hero { font-size: 48px; }
  .about-developer-link { min-height: 48px; }
}

@media (max-width: 360px) {
  .spintrix-wordmark--hero { font-size: 40px; }
}

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