:root {
  --tecnici-red: #d32f2f;
  --tecnici-red-dark: #a91818;
  --tecnici-ink: #242424;
  --tecnici-muted: #626262;
  --tecnici-line: #dedede;
  --tecnici-page: #f6f7f9;
  --tecnici-surface: #ffffff;
  --tecnici-shadow: 0 7px 20px rgba(25, 28, 32, .07);
}

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

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--tecnici-page);
  color: var(--tecnici-ink);
}

main {
  color: var(--tecnici-ink);
}

.game-card,
.action-card,
.section-panel,
.manual-card,
.module-card,
.term-card {
  text-align: center;
}

.sheet-question,
.answer-list,
.answer-option,
.table-responsive,
.term-definition,
.term-card dd,
.info-list {
  text-align: left;
}

/* Navigazione compatta sopra l'introduzione */
.home-links,
.home-actions,
.back-links {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px !important;
  margin: 24px auto 22px !important;
  padding: 0 16px;
  text-align: center;
}

.home-links > a,
.home-actions > a,
.back-links > a,
.home-link,
.back-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  margin: 0 !important;
  padding: 7px 12px !important;
  border: 1px solid var(--tecnici-red) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--tecnici-ink) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  text-decoration: none !important;
}

.home-links > a:hover,
.home-links > a:focus,
.home-actions > a:hover,
.home-actions > a:focus,
.back-links > a:hover,
.back-links > a:focus,
.home-link:hover,
.home-link:focus,
.back-link:hover,
.back-link:focus {
  background: var(--tecnici-red) !important;
  color: #fff !important;
}

/* Introduzioni bianche con testo nero e bordo rosso */
.game-hero,
.hero,
.exercise-hero {
  width: min(1100px, calc(100% - 36px));
  margin: 0 auto 26px !important;
  padding: 28px clamp(20px, 4vw, 42px) !important;
  border: 2px solid var(--tecnici-red) !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: var(--tecnici-ink) !important;
  box-shadow: var(--tecnici-shadow) !important;
  text-align: center;
}

.game-hero h1,
.hero h1,
.exercise-hero h1 {
  color: var(--tecnici-ink) !important;
}

.game-hero p,
.hero p,
.exercise-hero p {
  color: #363636 !important;
}

.hero .eyebrow {
  color: var(--tecnici-red) !important;
}

/* Pulsanti più piccoli e uniformi */
.hero-actions,
.test-actions {
  gap: 10px !important;
  margin-top: 18px !important;
}

.hero-btn,
.play-btn,
.btn,
.button,
.quiz-link,
.btn-red,
.btn-light,
.btn-danger,
.module-reset-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px !important;
  border: 1px solid var(--tecnici-red) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--tecnici-ink) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25;
  text-decoration: none !important;
  cursor: pointer;
}

.hero-btn:hover,
.hero-btn:focus,
.play-btn:hover,
.play-btn:focus,
.btn:hover,
.btn:focus,
.button:hover,
.button:focus,
.quiz-link:hover,
.quiz-link:focus,
.btn-red:hover,
.btn-red:focus,
.btn-light:hover,
.btn-light:focus,
.btn-danger:hover,
.btn-danger:focus,
.module-reset-btn:hover,
.module-reset-btn:focus {
  background: var(--tecnici-red) !important;
  color: #fff !important;
}

/* Riquadri e schede */
.game-card,
.action-card,
.section-panel,
.test-card,
.riepilogo-card,
.panel,
.exercise-card,
.manual-card,
.module-card,
.term-card {
  border-color: var(--tecnici-line) !important;
  background: var(--tecnici-surface) !important;
  box-shadow: var(--tecnici-shadow) !important;
}

.game-card::before {
  background: var(--tecnici-red) !important;
}

.game-card:hover,
.action-card:hover,
.manual-card:hover,
.module-card:hover {
  box-shadow: 0 10px 25px rgba(25, 28, 32, .10) !important;
}

.game-card h2,
.action-card h3,
.section-panel h2,
.test-card h2,
.riepilogo-card h2,
.panel h2,
.manual-card h3,
.module-card h3,
.term-card h3 {
  color: var(--tecnici-ink) !important;
}

.level-badge,
.module-code,
.term-tag {
  background: var(--tecnici-red) !important;
  color: #fff !important;
}

.notice {
  padding: 11px 14px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.field,
.glossary-input,
.glossary-select,
input[type="search"],
select {
  border-color: #cfcfcf !important;
  background: #fff !important;
  color: var(--tecnici-ink) !important;
}

.field:focus,
.glossary-input:focus,
.glossary-select:focus,
input[type="search"]:focus,
select:focus {
  border-color: var(--tecnici-red) !important;
  outline: 3px solid rgba(211, 47, 47, .14) !important;
}

/* Tema scuro per l'intera area manutentori. La navbar resta chiara per
   conservare la leggibilità dei loghi originali. */
html[data-theme="dark"] {
  color-scheme: dark;
  --tecnici-ink: #eef3f6;
  --tecnici-muted: #bdc7ce;
  --tecnici-line: #3b4a55;
  --tecnici-page: #121a21;
  --tecnici-surface: #1b2731;
  --tecnici-shadow: 0 8px 24px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] body,
html[data-theme="dark"] main {
  background: var(--tecnici-page) !important;
  color: var(--tecnici-ink) !important;
}

html[data-theme="dark"] .main-header {
  background: #202c35 !important;
  border-color: var(--tecnici-line) !important;
}

html[data-theme="dark"] .game-hero,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .exercise-hero,
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .section-panel,
html[data-theme="dark"] .test-card,
html[data-theme="dark"] .riepilogo-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .exercise-card,
html[data-theme="dark"] .manual-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .term-card,
html[data-theme="dark"] .sheet-question,
html[data-theme="dark"] .results-box {
  background: var(--tecnici-surface) !important;
  color: var(--tecnici-ink) !important;
  border-color: var(--tecnici-line) !important;
}

html[data-theme="dark"] .game-hero h1,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .exercise-hero h1,
html[data-theme="dark"] .game-card h2,
html[data-theme="dark"] .action-card h3,
html[data-theme="dark"] .sheet-question h3,
html[data-theme="dark"] .section-panel h2,
html[data-theme="dark"] .test-card h2,
html[data-theme="dark"] .riepilogo-card h2 {
  color: #91cdf1 !important;
}

html[data-theme="dark"] .game-hero p,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .exercise-hero p,
html[data-theme="dark"] .game-card p,
html[data-theme="dark"] .action-card p,
html[data-theme="dark"] .question-meta,
html[data-theme="dark"] .progress-label,
html[data-theme="dark"] .info-list {
  color: var(--tecnici-muted) !important;
}

html[data-theme="dark"] .term-card p,
html[data-theme="dark"] .term-card dd,
html[data-theme="dark"] .term-card li,
html[data-theme="dark"] .term-definition,
html[data-theme="dark"] .search-status,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .field-label {
  color: var(--tecnici-ink) !important;
}

html[data-theme="dark"] .glossary-toolbar,
html[data-theme="dark"] .module-nav,
html[data-theme="dark"] .term-image-wrap {
  background: var(--tecnici-surface) !important;
  color: var(--tecnici-ink) !important;
  border-color: var(--tecnici-line) !important;
}

html[data-theme="dark"] .home-links > a,
html[data-theme="dark"] .home-actions > a,
html[data-theme="dark"] .back-links > a,
html[data-theme="dark"] .home-link,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .hero-btn,
html[data-theme="dark"] .play-btn,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .button,
html[data-theme="dark"] .quiz-link,
html[data-theme="dark"] .btn-red,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .module-reset-btn {
  background: #22313d !important;
  color: #f2f6f8 !important;
}

html[data-theme="dark"] .answer-option,
html[data-theme="dark"] .progress-item,
html[data-theme="dark"] .field,
html[data-theme="dark"] .glossary-input,
html[data-theme="dark"] .glossary-select,
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select {
  background: #22313d !important;
  color: var(--tecnici-ink) !important;
  border-color: var(--tecnici-line) !important;
}

html[data-theme="dark"] #riepilogoModuloTable,
html[data-theme="dark"] #riepilogoModuloTable td {
  background: var(--tecnici-surface) !important;
  color: var(--tecnici-ink) !important;
  border-color: var(--tecnici-line) !important;
}

html[data-theme="dark"] .progress-mini,
html[data-theme="dark"] .sheet-box {
  background: #2b3944 !important;
  border-color: var(--tecnici-line) !important;
}

@media (max-width: 999px) {
  .navbar { flex-direction: row !important; justify-content: flex-start !important; }
  .navbar .nav-center { display: none !important; }
  .navbar .nav-left { margin: 0 !important; text-align: left !important; }
  .navbar .nav-left p { display: none !important; }
}

@media (max-width: 760px) {
  .home-links,
  .home-actions,
  .back-links {
    gap: 10px !important;
    margin: 18px auto !important;
  }

  .game-hero,
  .hero,
  .exercise-hero {
    width: min(100% - 24px, 1100px);
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .game-hero h1,
  .hero h1,
  .exercise-hero h1 {
    font-size: 23px !important;
    line-height: 1.25 !important;
  }

  .game-hero p,
  .hero p,
  .exercise-hero p,
  .game-card p,
  .action-card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .hero-btn,
  .play-btn,
  .btn,
  .button,
  .quiz-link,
  .btn-red,
  .btn-light,
  .btn-danger,
  .module-reset-btn {
    min-height: 36px;
    padding: 7px 12px !important;
    font-size: 13px !important;
  }
}