/* Kid-friendly, clean styling */
:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --primary: #2563eb;
  --secondary: #0ea5e9;
  --good: #16a34a;
  --bad: #dc2626;
  --border: #e2e8f0;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #f0f9ff, #f8fafc);
  color: var(--text);
}

.container {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px;
}

header { text-align: center; margin-bottom: 16px; }
h1 { margin: 0; font-size: 2rem; }
.subtitle { color: var(--muted); margin-top: 4px; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(2, 8, 23, 0.06);
}

.control-row { display: flex; gap: 8px; align-items: center; }
select {
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 1rem;
}

.buttons { display: flex; gap: 8px; flex-wrap: wrap; }
button {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}
button.primary { background: var(--primary); color: #fff; }
button.secondary { background: var(--secondary); color: #083344; }
button:active { transform: translateY(1px); }

.hint {
  color: var(--muted);
  margin: 0;
  width: 100%;
  text-align: center;
  order: 99; /* ensure it sits after buttons in the flex container */
}

.score {
  margin: 12px 0 0;
  font-weight: 700;
  background: #ecfeff;
  border: 1px solid #bae6fd;
  color: #075985;
  border-radius: 12px;
  padding: 10px 14px;
  display: none;
}

.questions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.q-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 20px rgba(2, 8, 23, 0.06);
}

.q-label { font-weight: 700; margin-bottom: 8px; text-align: center; }
.q-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 1rem;
  appearance: textfield;
  -moz-appearance: textfield;
}

.result {
  font-weight: 700;
  min-width: 110px;
}
.result.ok { color: var(--good); }
.result.bad { color: var(--bad); }

footer { text-align: center; color: var(--muted); margin-top: 16px; }

/* Mobile responsiveness */
@media (max-width: 768px) {
  .container {
    padding: 12px;
  }
  .questions {
    grid-template-columns: 1fr;
  }
  .q-card {
    width: 100%;
    padding: 12px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .du {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
  }
  .q-row {
    width: 100%;
    justify-content: center;
  }
  .q-label {
    width: 100%;
  }
}

/* Decine/Unità (D/U) vertical columns */
.du {
  display: grid;
  grid-template-columns: 32px 84px 84px; /* op | DA | U */
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
}
.du .head { color: var(--muted); font-weight: 700; text-align: center; }
.du .blank { width: 100%; height: 100%; }
.du .cell { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.du .op { display: flex; align-items: center; justify-content: center; font-weight: 700; }
.du-line { display: none; }

/* Answer inputs in D/U */
.answer-du {
  display: grid;
  grid-template-columns: 48px 48px; /* D | U */
  align-items: center;
  justify-content: start;
  gap: 4px;
  margin-left: 8px;
}
.answer-du .head { color: var(--muted); font-weight: 700; text-align: center; }
.answer-du input[type="number"] {
  width: 48px;
  text-align: center;
  padding: 6px 8px;
}

/* Lined boxes for answers inside the DU grid */
.line-box {
  width: 100%;
  height: 44px;
  border-top: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.line-box input[type="number"] {
  width: 90%;
  max-width: 64px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Vertical divider between DA and U */
.du .col-u { border-left: 2px solid var(--border); }
.du .head.col-u { border-left: 2px solid var(--border); }

/* Bottom feedback under the grid */
.result-bottom {
  margin-top: 8px;
  font-weight: 700;
  text-align: center;
}
.result-bottom.ok { color: var(--good); }
.result-bottom.bad { color: var(--bad); }