/*
 * The Wisdom design system: tokens, the reset, the self-hosted fonts, the
 * page base and the motion every game shares. wisdom-games' Tailwind theme
 * written out as plain CSS; the games are permanently dark, so :root carries
 * the dark values directly.
 *
 *   primary      Quantum violet — brand, links, selected chips, CTAs
 *   success      Electric Lime  — UP / win / cashout surfaces (dark text)
 *   destructive  Neon Petal     — DOWN / lose surfaces (white text)
 *   attention    Pumpkin        — price line, warnings (dark text)
 */

:root {
  --radius: 1rem;
  --radius-sm: calc(var(--radius) - 8px);
  --radius-md: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 8px);

  --font-sans: "Poppins", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --background: #131316;
  --foreground: #fbfcfe;
  --card: #1b1c22;
  --popover: #1b1c22;
  --popover-foreground: #fbfcfe;

  --primary: #8b7cfa;
  --primary-foreground: #ffffff;
  --primary-hover: #b4a9fc;

  --secondary: #232630;
  --secondary-foreground: #fbfcfe;
  --secondary-hover: #353945;

  --muted-foreground: #b1b5c3;
  --accent: #353945;

  --destructive: #f24fe8;
  --destructive-foreground: #ffffff;
  --destructive-deep: #d938cf; /* gradient tail on DOWN/loss surfaces */

  --success: #d6ff4d;
  --success-foreground: #131316;
  --success-deep: #c3f23b;

  --attention: #f08a1d;
  --attention-foreground: #131316;
  --attention-hover: #ff9e33;

  --border: #353945;
  --ring: #8b7cfa;
  --icon: #787e91;
  --heading: #e7e9f0;

  /* the game's own colour: brand name, menu icons and numbers; a game's
     stylesheet sets it */
  --accent-color: var(--primary);

  /* every game's plot is at least this tall (layout.css) */
  --plot-min-h: 220px;
}

/* ---- reset: the part of Tailwind's preflight the games rely on ---- */

*,
::before,
::after,
::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
  border-color: var(--border);
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}
b,
strong {
  font-weight: bolder;
}
ol,
ul {
  list-style: none;
}
img,
svg,
canvas {
  display: block;
  vertical-align: middle;
}
button,
input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
  appearance: button;
}
input {
  appearance: none;
}
[hidden] {
  display: none !important;
}

/* ---- fonts: Poppins and DM Mono, latin subset, font-display swap ---- */

@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url(fonts/poppins-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(fonts/poppins-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url(fonts/poppins-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 900; font-display: swap; src: url(fonts/poppins-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 300; font-display: swap; src: url(fonts/dm-mono-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url(fonts/dm-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url(fonts/dm-mono-latin-500-normal.woff2) format("woff2"); }

/* ---- page base ---- */

body {
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--background);
  /* a game surface is not a document: no selection or callout on a
     long-press; `manipulation` drops double-tap zoom, keeps pinch zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
/* the two places selection has a job: typing a stake, copying a seed */
input,
[role="dialog"] {
  user-select: text;
  -webkit-user-select: text;
}

/* ---- shared motion ---- */

/* Tailwind's animate-pulse: the loading balance, the link glyph */
.animate-pulse {
  animation: kit-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes kit-pulse {
  50% { opacity: 0.5; }
}

/* THE BET INVITE: every live, unstaked chip flashes in unison while bets are
   open — a white wash over the chip's own fill, no rim (an outline would say
   "selected"). The wash is an overlay so :hover/:active keep their filter
   and scale. Chips must be position: relative. */
.bet-invite::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: rgba(255, 255, 255, 0.34);
  opacity: 0;
  animation: bet-invite 1.8s ease-in-out infinite;
}
.bet-invite > * {
  position: relative;
  z-index: 1;
}
@keyframes bet-invite {
  0%, 26% { opacity: 0.12; }
  50% { opacity: 1; }
  86%, 100% { opacity: 0.12; }
}
/* the ×odds leans forward on the same beat */
.bet-invite-x { display: inline-block; }
.bet-invite .bet-invite-x {
  animation: bet-invite-x 1.8s ease-in-out infinite;
}
@keyframes bet-invite-x {
  0%, 30% { transform: scale(1); }
  50% { transform: scale(1.2); }
  86%, 100% { transform: scale(1); }
}

/* The staked reveal: an empty chip reads ×odds + cue; staked, the × shrinks
   and lifts away while the amount slides up into the headline. */
.bet-chip .bet-x {
  display: block;
  font-size: 17px;
  transform: translateY(0);
  transform-origin: center bottom;
  transition: transform 400ms ease-out, font-size 400ms ease-out, opacity 400ms ease-out;
}
.bet-chip.has-stake .bet-x {
  font-size: 11px;
  transform: translateY(-3px);
  opacity: 0.5;
  font-weight: 700;
}
.bet-chip .bet-stake {
  display: block;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: bet-stake-in 400ms ease-out both;
}
@keyframes bet-stake-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .animate-pulse { animation: none; }
  .bet-chip .bet-x { transition: none; }
  .bet-chip .bet-stake { animation: none; }
  /* the invite still says "these are the buttons", lit but still */
  .bet-invite::before { animation: none; opacity: 0.45; }
  .bet-invite .bet-invite-x { animation: none; }
}