:root {
  --bg-top: #f5f2db;
  --bg-bottom: #d8ecf4;
  --panel: #fffdf8;
  --panel-border: #d7cfb4;
  --ink: #243238;
  --muted: #5e6a70;
  --brand: #ef7f44;
  --brand-strong: #d95b22;
  --accent: #1f8ea5;
  --good: #1c8f58;
  --bad: #b6473a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 20%, #ffffff66 0, transparent 45%),
    radial-gradient(circle at 80% 10%, #d7f1ff88 0, transparent 40%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.app-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.25rem;
}

.hero {
  background: linear-gradient(120deg, #fff7e5, #ffe8d9);
  border: 2px solid var(--panel-border);
  border-radius: 18px;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  animation: slide-in 300ms ease-out;
}

.hero h1 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
}

.hero p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 2fr) minmax(260px, 1fr);
}

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 8px 24px #1a2d3617;
}

.panel h2 {
  font-family: "Baloo 2", cursive;
  margin: 0 0 0.65rem;
  font-size: 1.25rem;
}

.button-grid,
.module-grid,
.choice-grid {
  display: grid;
  gap: 0.6rem;
}

.module-grid {
  margin-top: 0.75rem;
}

.pill-button,
.module-button,
.choice-button,
.primary-button,
.secondary-button,
.remove-word {
  border: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 130ms ease, filter 130ms ease;
}

.pill-button,
.module-button,
.choice-button,
.secondary-button,
.remove-word {
  background: #edf4f7;
  color: var(--ink);
}

.pill-button {
  padding: 0.55rem 0.7rem;
  text-align: left;
}

.pill-button.active {
  background: linear-gradient(120deg, #f6b06e, #ef7f44);
  color: #fff;
}

.module-button {
  padding: 0.7rem;
  text-align: left;
  display: grid;
  gap: 0.25rem;
}

.module-button span {
  font-size: 0.92rem;
  color: var(--muted);
}

.module-button.active {
  background: #d7eef6;
  outline: 2px solid #8ac3d2;
}

.module-button:hover,
.pill-button:hover,
.choice-button:hover,
.secondary-button:hover,
.remove-word:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.game-panel {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.module-head h2 {
  margin: 0;
  font-family: "Baloo 2", cursive;
}

.module-head p {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.module-help {
  min-height: 1.2rem;
}

.scoreboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.scoreboard article {
  background: #eff7fa;
  border: 1px solid #cfe2e8;
  border-radius: 12px;
  padding: 0.55rem;
  display: grid;
  gap: 0.2rem;
}

.scoreboard span {
  font-size: 0.84rem;
  color: var(--muted);
}

.scoreboard strong {
  font-size: 1.2rem;
}

.question-card {
  background: #fff;
  border: 2px dashed #d8d0b8;
  border-radius: 18px;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
}

.question-prompt {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
}

.question-hint {
  margin: 0;
  min-height: 1.2rem;
  color: var(--muted);
}

.answer-form {
  display: flex;
  gap: 0.6rem;
}

.answer-form input,
.tool-form input {
  width: 100%;
  border: 1px solid #cdd6da;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font: inherit;
}

.primary-button {
  background: linear-gradient(120deg, var(--brand), var(--brand-strong));
  color: #fff;
  padding: 0.55rem 0.95rem;
  white-space: nowrap;
}

.secondary-button {
  width: fit-content;
  padding: 0.45rem 0.8rem;
  background: #e0f0f4;
  border: 1px solid #bddde6;
}

.choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.choice-button {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border: 1px solid #c7dce3;
}

.feedback {
  margin: 0;
  font-weight: 700;
  min-height: 1.3rem;
}

.feedback.correct {
  color: var(--good);
}

.feedback.wrong {
  color: var(--bad);
}

.global-status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.global-status.error {
  color: var(--bad);
}

.tool-card {
  display: grid;
  gap: 0.65rem;
}

.tool-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.tool-card p {
  margin: 0;
  color: var(--muted);
}

.tool-form {
  display: grid;
  gap: 0.6rem;
}

.tool-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.92rem;
}

.word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.word-list li {
  background: #f8fbfc;
  border: 1px solid #d7e7ee;
  border-radius: 10px;
  padding: 0.45rem 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}

.word-label {
  display: grid;
  gap: 0.15rem;
}

.word-label strong {
  font-size: 0.95rem;
}

.word-label small {
  color: var(--muted);
  font-size: 0.82rem;
}

.remove-word {
  background: #f2d9d5;
  color: #7a2e25;
  padding: 0.35rem 0.45rem;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1140px) {
  .layout {
    grid-template-columns: 1fr 1.8fr;
  }

  .tools-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 840px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .answer-form {
    flex-direction: column;
  }

  .scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}