/* ============================================================
   FULLY — Base + sfondo globale + boot
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--white);
  background: var(--bg-1);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Sfondo animato globale --- */
.fx-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--grad-bg);
}

.fx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.28;
}

.fx-glow {
  position: absolute;
  border-radius: var(--r-pill);
  filter: blur(95px);
}
.fx-glow.glow-a { width: 360px; height: 360px; background: rgba(47,143,255,0.18); left: -120px; top: 80px; }
.fx-glow.glow-b { width: 280px; height: 280px; background: rgba(247,213,72,0.12); right: -60px; top: 180px; }
.fx-glow.glow-c { width: 420px; height: 420px; background: rgba(47,143,255,0.10); left: 32%; bottom: -180px; }

.fx-notes { position: absolute; inset: 0; }
.fx-notes span {
  position: absolute;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.12);
  animation: floatNote 12s linear infinite;
}
.fx-notes span:nth-child(1){ left:8%;  top:14%; animation-delay:0s; }
.fx-notes span:nth-child(2){ left:22%; top:70%; animation-delay:2s; }
.fx-notes span:nth-child(3){ left:66%; top:16%; animation-delay:4s; }
.fx-notes span:nth-child(4){ left:85%; top:66%; animation-delay:1s; }
.fx-notes span:nth-child(5){ left:46%; top:84%; animation-delay:6s; }
.fx-notes span:nth-child(6){ left:72%; top:42%; animation-delay:3s; }

@keyframes floatNote {
  0%   { transform: translateY(0) scale(1);    opacity: 0.10; }
  50%  { transform: translateY(-16px) scale(1.08); opacity: 0.22; }
  100% { transform: translateY(0) scale(1);    opacity: 0.10; }
}

/* --- Boot screen --- */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--grad-bg);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.boot-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-logo {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -2px;
  background: linear-gradient(180deg, #fff, #a9ddff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.boot-logo-img {
  width: 84px; height: 84px;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.4));
  animation: boot-pulse 1.5s ease-in-out infinite;
}
@keyframes boot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.boot-spinner {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}
.boot-text { color: rgba(255,255,255,0.7); font-weight: 600; font-size: 14px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Radice app --- */
.app-root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Utility --- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: var(--maxw-narrow); }
.text-center { text-align: center; }
.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;
}
.hidden { display: none !important; }

/* Transizione di entrata schermate */
.screen { animation: screenIn 0.4s cubic-bezier(0.22,1,0.36,1); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Titoli: pesanti e geometrici come il wordmark del logo --- */
h1, h2, h3, .auth__logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.5px; }
.btn, .btn--big { font-family: var(--font-display); font-weight: 700; }

/* --- Succo: pressione pulsanti (feedback tattile) --- */
.btn { transition: transform var(--t-fast), filter var(--t-fast), box-shadow var(--t); }
.btn:active { transform: translateY(1px) scale(0.97); }
.reduce-motion .boot-logo-img { animation: none; }

/* Icone SVG coerenti (vedi js/core/icons.js) */
.ic { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }

/* Accessibilità: "Testo grande" (ingrandisce le aree di lettura principali) */
body.big-text { line-height: 1.7; }
body.big-text p,
body.big-text .world__desc,
body.big-text .char-bubble__text,
body.big-text .game__prompt,
body.big-text .game__hint,
body.big-text .mcard__title,
body.big-text .ans,
body.big-text .btn,
body.big-text .dash-lead,
body.big-text .rp__body p { font-size: 1.14em; }