/* SSP Society v50 — unified premium visual language.
   Lightweight CSS: no large animated blur surfaces, no external font request. */
:root {
  color-scheme: dark;
  --ssp-ink: #070b13;
  --ssp-surface: #101825;
  --ssp-surface-high: #182334;
  --ssp-stroke: #ffffff20;
  --ssp-stroke-strong: #ffffff35;
  --ssp-text: #f5f8fb;
  --ssp-muted: #a7b2c2;
  --ssp-gold: #eec879;
  --ssp-mint: #6cf0c2;
  --ssp-cubic: cubic-bezier(.2,.8,.2,1);
  --ssp-radius-sm: 12px;
  --ssp-radius: 18px;
  --ssp-radius-lg: 26px;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ssp-ink);
}
html, body { max-width: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #8af9da;
  outline-offset: 4px;
}
::selection { background: #55bfa780; color: #fff; }
/* Financial numbers always have stable glyph widths and may shrink/wrap safely. */
#balance, #bet, #last, #personalBest, #sideBet, #lobbyBalance,
#maxCounter, #winValue, #preludeCounter, #drainValue,
.rank-value, .rank-amount, .ranking li span, .rank-you b,
.ssp-xp-percentage, .ssp-xp-total, .ssp-xp-remaining {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.025em;
}
#balance, #personalBest, #lobbyBalance, #last, #bet,
#sideBet, #maxCounter, #preludeCounter, #drainValue, #winValue {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.controls > *, .user-chip, .ranking li, .global-rank li,
.game-shell > *, .game-card, .game-shell,
.metric, .rank-you, .board, .ranking {
  min-width: 0;
}
/* Use one restrained spring-like motion language for interactive surfaces. */
button:not(:disabled), a, input {
  transition-timing-function: var(--ssp-cubic);
}
button:not(:disabled):active {
  transform: translateY(1px) scale(.985);
}
dialog, .modal { scrollbar-gutter: stable; }
@media (hover: none) {
  button:hover, a:hover { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 600px) {
  input, textarea, select { font-size: max(16px, 1em); }
}