/* Learning Pool — Board Game Tokens */
:root {
  /* Tabellone: carta crema, inchiostro caldo */
  --board-paper: #f2e9d6;
  --board-paper-2: #ece0c5;
  --board-line: #3a2e24;
  --ink: #1f1710;
  --ink-soft: #5a4a3b;
  --ink-mute: #8a7a68;

  /* Accenti gioco da tavolo */
  --dice-red: #c8352a;
  --felt-green: #3f7a4d;
  --mustard: #d9a21b;
  --royal-blue: #2b4b8f;
  --plum: #7a3b6a;

  /* Stati */
  --gold: #d9a21b;
  --gold-deep: #a97a10;
  --victory: #3f7a4d;

  /* Form / superfici */
  --chip-bg: #fff8e7;
  --chip-edge: #c7b48a;
  --shadow-card: 0 2px 0 #1f17101a, 0 10px 24px -12px #1f171033;
  --shadow-pop: 0 3px 0 #1f17101a, 0 18px 40px -18px #1f171055;

  --radius-chip: 14px;
  --radius-card: 20px;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Figtree", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -10%, #f7efd9 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #ead9b6 0%, transparent 55%),
    var(--board-paper);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* Texture carta: sottile noise via SVG */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }

/* focus-ring sobrio */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Scrollbar neutra */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c7b48a; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* Animazioni */
@keyframes pop-in {
  0% { transform: scale(.6) rotate(-8deg); opacity: 0; }
  70% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes confetti-fall {
  0% { transform: translate3d(var(--cx,0), -20vh, 0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate3d(calc(var(--cx,0) + var(--dx,0)), 110vh, 0) rotate(var(--rot,360deg)); opacity: 1; }
}
@keyframes advance-step {
  0% { transform: translateX(-12px) scale(.9); opacity: 0; }
  60% { transform: translateX(4px) scale(1.06); }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}