/* ============================================================
   THEME — Sistema temi chiaro/scuro
   Chiaro = bianco + blu
   Scuro = blu notte + blu brillante
   ============================================================ */

:root {
  /* ---------- TEMA CHIARO ---------- */
  --game-bg:          #F7F9FC;
  --game-bg-soft:     #EDF2FA;
  --game-card:        #FFFFFF;
  --game-card-soft:   #FAFBFE;
  --game-border:      #DCE4F2;
  --game-border-soft: #E8EFF9;

  --game-text:        #1B2733;
  --game-text-soft:   #566072;
  --game-text-dim:    #7C8698;
  --game-text-mute:   #97A0B5;
  --game-text-invert: #FFFFFF;

  --game-accent:      #2E6FF2;
  --game-accent-soft: #E8F0FE;
  --game-accent-dark: #1E5BD6;
  --game-success:     #1E9E5A;
  --game-success-soft:#E4F8EC;
  --game-error:       #E4483A;
  --game-error-soft:  #FDE9E7;
  --game-warning:     #E5A500;
  --game-warning-soft:#FDF3DC;
  --game-info:        #2E6FF2;
  --game-info-soft:   #E8F0FE;

  --game-shadow:      0 2px 8px rgba(20, 40, 80, 0.06);
  --game-shadow-md:   0 4px 16px rgba(20, 40, 80, 0.08);
  --game-shadow-lg:   0 8px 32px rgba(20, 40, 80, 0.10);

  --game-bg-image: none;

  --game-font:        'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --game-mono:        'JetBrains Mono', 'Courier New', monospace;

  --game-radius:      12px;
  --game-radius-lg:   20px;
  --game-radius-pill: 999px;
}

/* ---------- TEMA SCURO ---------- */
[data-theme="dark"] {
  --game-bg:          #0f1a2a;
  --game-bg-soft:     #16223a;
  --game-card:        #1a2542;
  --game-card-soft:   #21304f;
  --game-border:      rgba(255, 255, 255, 0.12);
  --game-border-soft: rgba(255, 255, 255, 0.08);

  --game-text:        #e0eaff;
  --game-text-soft:   rgba(224, 234, 255, 0.75);
  --game-text-dim:    rgba(224, 234, 255, 0.6);
  --game-text-mute:   rgba(224, 234, 255, 0.45);
  --game-text-invert: #0f1a2a;

  --game-accent:      #4C8DFF;
  --game-accent-soft: rgba(76, 141, 255, 0.18);
  --game-accent-dark: #3B7AEC;
  --game-success:     #38D08A;
  --game-success-soft:rgba(56, 208, 138, 0.15);
  --game-error:       #FF6B6B;
  --game-error-soft:  rgba(255, 107, 107, 0.15);
  --game-warning:     #FFD166;
  --game-warning-soft:rgba(255, 209, 102, 0.15);
  --game-info:        #4C8DFF;
  --game-info-soft:   rgba(76, 141, 255, 0.15);

  --game-shadow:      0 2px 8px rgba(0, 0, 0, 0.3);
  --game-shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
  --game-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);

  --game-bg-image:
    radial-gradient(ellipse at 15% 10%, rgba(76, 141, 255, 0.15), transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(124, 92, 252, 0.10), transparent 50%);
}

/* ---------- Reset e base ---------- */

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

html, body {
  min-height: 100vh;
  font-family: var(--game-font);
  color: var(--game-text);
  background-color: var(--game-bg);
  background-image: var(--game-bg-image);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- PULSANTE SWITCH TEMA ---------- */

.theme-toggle {
  position: fixed;
  top: 68px;
  right: 14px;
  z-index: 9998;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--game-border);
  background: var(--game-card);
  color: var(--game-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--game-shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  padding: 0;
  font-family: inherit;
}
.theme-toggle:hover {
  transform: scale(1.06);
  border-color: var(--game-accent);
  box-shadow: var(--game-shadow-lg);
}
.theme-toggle:active { transform: scale(0.97); }

.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
  display: none;
  line-height: 1;
}
html[data-theme="light"] .theme-toggle .theme-icon-light,
html:not([data-theme]) .theme-toggle .theme-icon-light { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; }

html.is-iframe .theme-toggle {
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  font-size: 1rem;
  opacity: 0.9;
}
html.is-iframe .theme-toggle:hover { opacity: 1; }