/* edu-theme.css — wspólny motyw gier i narzędzi (infogranie.pl)
 *
 * Jedno źródło wyglądu: kolory, typografia, przyciski, pola, karty.
 * Każda gra linkuje ten plik PRZED własnym style.css:
 *   <link rel="stylesheet" href="../score/edu-theme.css?v=1">
 *   <link rel="stylesheet" href="style.css">
 * Kolory zgodne z modalem score2.js (ta sama paleta w całym systemie).
 * Zmiana wyglądu wszystkich gier = edycja tokenów poniżej.
 */

:root {
  /* — kolory marki — */
  --edu-primary:      #1d4ed8;
  --edu-primary-dark: #1e40af;
  --edu-primary-soft: #eef2ff;
  /* — powierzchnie i tekst — */
  --edu-bg:      #f4f4f9;
  --edu-surface: #ffffff;
  --edu-text:    #1f2937;
  --edu-muted:   #6b7280;
  --edu-border:  #cbd5e1;
  /* — stany — */
  --edu-success: #16a34a;
  --edu-danger:  #b91c1c;
  --edu-warn:    #92600a;
  /* — kształt / rytm — */
  --edu-font:      system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --edu-radius:    10px;
  --edu-radius-sm: 8px;
  --edu-shadow:    0 2px 12px rgba(0, 0, 0, .08);
  --edu-space:     16px;
}

/* ─── Baza ─────────────────────────────────────────────────────────────── */

body {
  font-family: var(--edu-font);
  background: var(--edu-bg);
  color: var(--edu-text);
  margin: 0;
  padding: 20px;
  line-height: 1.45;
}

/* Kontener gry — biała karta (kontrakt: #gameContainer w każdej grze) */
#gameContainer {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
  background: var(--edu-surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--edu-radius);
  box-shadow: var(--edu-shadow);
  box-sizing: border-box;
}

/* Panel ustawień / identyfikacji ucznia */
#gameSettingsContainer {
  margin-bottom: var(--edu-space);
}

/* ─── Przyciski ────────────────────────────────────────────────────────── */

button {
  padding: 10px 20px;
  font-size: 16px;
  font-family: inherit;
  color: #fff;
  background: var(--edu-primary);
  border: none;
  border-radius: var(--edu-radius-sm);
  cursor: pointer;
  transition: background .15s ease;
}

button:hover  { background: var(--edu-primary-dark); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Wariant drugorzędny — dodaj klasę .edu-btn-secondary */
.edu-btn-secondary {
  background: #e5e7eb;
  color: var(--edu-text);
}
.edu-btn-secondary:hover { background: #d1d5db; }

/* ─── Pola formularza ──────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--edu-text);
  background: #fff;
  border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius-sm);
  box-sizing: border-box;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--edu-primary);
  outline-offset: 1px;
}

label { font-size: 14px; color: var(--edu-muted); }

/* ─── Przełączniki trybów (kontrakt: .modeSwitch) ──────────────────────── */

.modeSwitch {
  cursor: pointer;
  color: var(--edu-primary);
  margin-right: 12px;
  font-size: 14px;
}
.modeSwitch.active {
  font-weight: 700;
  text-decoration: underline;
}

/* ─── Widoczność (kontrakt score2.js) ──────────────────────────────────── */

.hidden { display: none !important; }
.active { display: block; }

/* ─── Drobne pomocnicze ────────────────────────────────────────────────── */

.edu-muted   { color: var(--edu-muted); }
.edu-success { color: var(--edu-success); }
.edu-danger  { color: var(--edu-danger); }