/**
 * Zappy Suite — design system (sotto-app only).
 * Non importare in index.html / grazie.html.
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap");

:root {
  --z-font: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --z-ink: #0b1020;
  --z-ink-muted: rgba(11, 16, 32, 0.58);
  --z-white: #ffffff;
  --z-surface: rgba(255, 255, 255, 0.82);
  --z-surface-soft: rgba(255, 255, 255, 0.62);
  --z-glass-edge: rgba(255, 255, 255, 0.72);
  --z-glass-edge-dim: rgba(255, 255, 255, 0.22);
  --z-line: rgba(15, 23, 42, 0.08);
  --z-line-strong: rgba(15, 23, 42, 0.12);
  --z-shadow-xs: 0 2px 12px rgba(15, 23, 42, 0.06);
  --z-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
  --z-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.1);
  --z-shadow-lg: 0 24px 72px rgba(15, 23, 42, 0.14);

  /* Layout — 8px grid, card 16px, pill full */
  --z-space: 8px;
  --z-radius-card: 16px;
  --z-radius-pill: 999px;
  --z-trans: 0.2s ease;
  --z-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-fast: 0.2s;

  /* Alias per compatibilità con CSS pagina esistenti */
  --z-radius: var(--z-radius-card);
  --z-radius-lg: var(--z-radius-card);
  --z-radius-xl: 20px;
  --z-norm: 0.32s;

  --z-accent: #0ea5e9;
  --z-accent-2: #6366f1;
  --z-teal: #14b8a6;
  --z-mint: #5eead4;
  --z-rose: #fb7185;
  --z-amber: #fbbf24;
  --z-success: #22c55e;
  --z-danger: #ef4444;

  /* Background mesh (quiz / room) */
  --z-bg-app:
    radial-gradient(120% 90% at 0% -10%, rgba(99, 102, 241, 0.2) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(14, 165, 233, 0.18) 0%, transparent 50%),
    linear-gradient(168deg, #f8fafc 0%, #ecfeff 45%, #fffbeb 100%);

  /* Kids / land hub */
  --z-bg-play:
    radial-gradient(100% 80% at 10% 10%, rgba(94, 234, 212, 0.35) 0%, transparent 55%),
    radial-gradient(80% 60% at 90% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 45%),
    linear-gradient(165deg, #ecfeff 0%, #eef2ff 50%, #f5f3ff 100%);

  /* Chat */
  --z-bg-chat:
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(251, 113, 133, 0.35) 0%, transparent 55%),
    linear-gradient(165deg, #1a0a14 0%, #2d1522 40%, #451a2e 100%);

  /* Lucky — gold / midnight premium */
  --z-bg-lucky:
    radial-gradient(115% 85% at 50% -18%, rgba(250, 204, 21, 0.42) 0%, transparent 52%),
    radial-gradient(80% 55% at 0% 95%, rgba(245, 158, 11, 0.2) 0%, transparent 48%),
    radial-gradient(70% 50% at 100% 60%, rgba(234, 179, 8, 0.12) 0%, transparent 45%),
    linear-gradient(168deg, #1c1917 0%, #292524 42%, #451a03 100%);

  /* Photo / gallery */
  --z-bg-photo:
    radial-gradient(90% 70% at 0% 0%, rgba(45, 212, 191, 0.22) 0%, transparent 50%),
    linear-gradient(168deg, #ecfdf5 0%, #f0fdfa 50%, #ecfeff 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--z-font);
  color: var(--z-ink);
  min-height: 100dvh;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Brand logo (header / hero) — non deformare ─── */
.z-app-brand-logo {
  display: block;
  width: min(144px, 40vw);
  max-height: 72px;
  height: auto;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(var(--z-space) * 2);
}

.z-app-brand-logo--compact {
  width: min(120px, 34vw);
  max-height: 56px;
  margin-bottom: var(--z-space);
}

.z-app-brand-logo--inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0 var(--z-space) 0 0;
}

/* Header fila logo — chat */
.header-brand {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--z-space) 0 calc(var(--z-space) * 1.5);
}

.header-brand .z-app-brand-logo {
  margin-bottom: 0;
}

/* Nav “Elenco app” — comportamento comune (colori restano nelle pagine) */
#app-list-btn,
.top-left-btn {
  border-radius: var(--z-radius-pill);
  transition:
    transform var(--z-trans),
    box-shadow var(--z-trans),
    filter var(--z-trans),
    opacity var(--z-trans);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app-list-btn:hover,
.top-left-btn:hover {
  filter: brightness(1.04);
}

#app-list-btn:active,
.top-left-btn:active {
  transform: scale(0.97);
}

/* ─── Glass panels ─── */
.z-glass {
  background: var(--z-surface-soft);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--z-glass-edge);
  box-shadow: var(--z-shadow-sm);
  border-radius: var(--z-radius-card);
}

.z-glass-solid {
  background: var(--z-surface);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  border: 1px solid var(--z-glass-edge);
  box-shadow: var(--z-shadow-md);
  border-radius: var(--z-radius-card);
}

/* ─── Buttons (optional utility) ─── */
.z-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.015em;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--z-radius-pill);
  cursor: pointer;
  transition:
    transform var(--z-trans),
    box-shadow var(--z-trans),
    background 0.22s ease,
    opacity 0.2s ease;
  box-shadow: var(--z-shadow-xs);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.z-btn:active {
  transform: scale(0.97);
}

.z-btn--primary {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: var(--z-white);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
}

.z-btn--primary:hover {
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.26);
  transform: translateY(-1px);
}

.z-btn--accent {
  background: linear-gradient(135deg, var(--z-accent) 0%, var(--z-accent-2) 100%);
  color: var(--z-white);
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.3);
}

.z-btn--ghost {
  background: rgba(255, 255, 255, 0.55);
  color: var(--z-ink);
  border: 1px solid var(--z-line-strong);
}

/* Shell contenuto centrato */
.z-app-page {
  width: min(560px, 100%);
  margin: 0 auto;
  padding-left: calc(var(--z-space) * 2);
  padding-right: calc(var(--z-space) * 2);
}

/* Zappy Land — giochi interni */
.z-land-brand {
  display: flex;
  justify-content: center;
  padding: var(--z-space) 0 calc(var(--z-space) * 2);
}

.z-land-brand .z-app-brand-logo {
  margin-bottom: 0;
}

/* ─── Unified game ecosystem (structure only, colors remain page-specific) ─── */
:is(.mem-shell, .cat-shell, .imp-shell, .lucky-shell, .page-wrap) {
  width: min(520px, 100%);
  margin-left: auto;
  margin-right: auto;
}

:is(.mem-shell, .cat-shell, .imp-shell) {
  padding-left: 16px;
  padding-right: 16px;
}

:is(.mem-title, .cat-title, .imp-title) {
  margin-bottom: 10px;
}

:is(.mem-sub, .cat-desc, .imp-desc) {
  margin-bottom: 18px;
}

:is(.mem-title, .cat-title, .imp-title) {
  letter-spacing: -0.03em;
  line-height: 1.1;
}

:is(.mem-sub, .cat-desc, .imp-desc, .zappy-room-hero__tagline, .lucky-sub) {
  line-height: 1.5;
}

:is(.mem-panel, .cat-panel, .imp-panel, .zappy-room-howto, .lucky-grid-wrap, .reward-card, .cat-rules, .imp-rules, .mem-rules) {
  border-radius: var(--z-radius-card);
  box-shadow: var(--z-shadow-md);
}

:is(.mem-panel, .cat-panel, .imp-panel) {
  width: 100%;
  padding: 20px 16px;
  margin-bottom: 16px;
}

:is(.mem-back, .cat-back, .imp-back) {
  min-height: 42px;
  border-radius: var(--z-radius-pill);
  font-weight: 800;
  letter-spacing: 0.01em;
  transition:
    transform var(--z-fast) var(--z-ease),
    box-shadow var(--z-trans),
    filter var(--z-trans);
}

:is(.mem-btn, .cat-btn, .imp-btn, .styled-redeem, .banner) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--z-radius-pill);
  font-weight: 800;
  font-size: 0.93rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  transition:
    transform var(--z-fast) var(--z-ease),
    box-shadow var(--z-trans),
    filter var(--z-trans);
}

:is(.mem-btn, .cat-btn, .imp-btn, .styled-redeem, .banner):hover {
  filter: brightness(1.03);
}

:is(.mem-btn, .cat-btn, .imp-btn, .styled-redeem, .banner):active {
  transform: scale(0.97);
}

:is(.mem-select, .imp-input, .cat-select) {
  border-radius: 12px;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

:is(.cat-rules, .imp-rules, .mem-rules) h2 {
  font-size: 1rem;
  margin-top: 0;
}

:is(.mem-field, .cat-field, .imp-field) {
  margin-bottom: 14px;
}

:is(.mem-field label, .cat-field label, .imp-field label) {
  margin-bottom: 6px;
  font-weight: 700;
}

:is(.imp-rules, .cat-rules, .mem-rules) {
  margin-top: 12px;
  padding: 16px;
}

:is(.land-nicks-hint, .mem-setup-err, .imp-toast) {
  margin-bottom: 12px;
}

/* "Come si gioca" — bottone + accordion uniforme */
.z-howto-toggle {
  width: 100%;
}

.z-howto-panel[hidden] {
  display: none !important;
}

.z-howto-panel:not([hidden]) {
  display: block;
  animation: z-slide-up 0.22s var(--z-ease) both;
}

/* Slider struttura comune (colori restano nelle pagine) */
:is(.imp-field input[type="range"], .cat-field input[type="range"]) {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

:is(.imp-field input[type="range"], .cat-field input[type="range"])::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
}

:is(.imp-field input[type="range"], .cat-field input[type="range"])::-moz-range-track {
  height: 6px;
  border-radius: 999px;
}

:is(.imp-field input[type="range"], .cat-field input[type="range"])::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  appearance: none;
  -webkit-appearance: none;
}

:is(.imp-field input[type="range"], .cat-field input[type="range"])::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
}
:is(.cat-rules, .imp-rules, .mem-rules) ol,
:is(.cat-rules, .imp-rules, .mem-rules) p {
  line-height: 1.52;
}

/* Shared modal foundation for rewards and end-game popups */
.z-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9997;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: z-fade-in 0.24s var(--z-ease) both;
}

.z-modal-overlay.is-visible {
  display: flex;
}

/* ─── Animations ─── */
@keyframes z-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes z-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes z-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes z-sheet-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.z-animate-in {
  animation: z-slide-up var(--z-norm) var(--z-ease) both;
}

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