:root {
  --pink: #f4a6c1;
  --pink-strong: #d97fa3;
  --pink-soft: #fde7f0;
  --blue: #9ecbff;
  --blue-strong: #6fa8e8;
  --blue-soft: #e8f3ff;
  --purple: #c8a2ff;
  --purple-strong: #9a74d6;
  --purple-soft: #f1e8ff;
  --bg: #fcfbff;
  --surface: #ffffff;
  --border: #e8def5;
  --text: #2a2233;
  --text-soft: #6a5f78;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(150deg, var(--pink-soft) 0%, var(--bg) 48%, var(--blue-soft) 100%);
}

.app {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(0.8rem, 2.3vw, 1.4rem);
}

.brand-header,
.panel,
.overlay-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(101, 76, 135, 0.13);
}

.brand-header {
  background: linear-gradient(135deg, #f4a6c1, #9ecbff, #c8a2ff);
  color: #fff;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.9rem;
  align-items: center;
  grid-template-columns: minmax(165px, 220px) 1fr auto;
}

.brand-logo-wrap {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo { max-width: 180px; width: 100%; height: auto; object-fit: contain; }
.logo-fallback { display: none; font-weight: 700; text-align: center; }
.brand-logo-wrap.logo-missing .brand-logo { display: none; }
.brand-logo-wrap.logo-missing .logo-fallback { display: block; }

.kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; }
.brand-copy h1 { margin: 0.15rem 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.subtitle { margin: 0; opacity: 0.96; }

.header-actions,
.controls-panel {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.panel { margin-top: 1rem; padding: 1rem; }

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

label { font-size: 0.9rem; color: var(--text-soft); font-weight: 700; }

select,
.btn {
  border-radius: 12px;
  border: 1px solid var(--border);
  font: inherit;
}

select { padding: 0.55rem 0.68rem; background: #fff; min-width: 165px; color: var(--text); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  padding: 0.63rem 0.95rem;
  transition: transform 0.16s ease, background-color 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn.primary {
  background: #c8a2ff;
  color: #fff;
  border-color: #c8a2ff;
}

.btn.primary:hover { background: #9a74d6; }

.btn.secondary {
  background: #e8f3ff;
  color: var(--text);
  border-color: #6fa8e8;
}

.btn.secondary:hover { background: #f4a6c1; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
  gap: 1rem;
}

.status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.status-row p {
  margin: 0;
  padding: 0.56rem;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--purple-soft), #fff);
  text-align: center;
}

.feedback {
  margin-top: 0.8rem;
  min-height: 1.5rem;
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  color: var(--text-soft);
  background: #fff;
}
.feedback.success { background: var(--pink-soft); border-color: #f4a6c1; color: var(--text); }
.feedback.error { background: #e8f3ff; border-color: #9ecbff; color: var(--text); }

.grid-wrap {
  margin-top: 0.9rem;
  display: flex;
  justify-content: center;
}

.grid {
  --size: 12;
  width: min(72vw, 620px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  gap: 4px;
  touch-action: none;
  user-select: none;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8def5;
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
  color: var(--text);
  transition: background-color 0.16s ease, transform 0.1s ease;
}

.cell:hover { background: #e8f3ff; }
.cell.selected { background: #f1e8ff; border-color: #c8a2ff; transform: scale(0.98); }
.cell.found { background: #fde7f0; border-color: #d97fa3; }

.words-panel h2 { margin-top: 0; }
.word-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.48rem;
}

.word-list li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: #fff;
  font-weight: 700;
}

.word-list li.found {
  color: #9a74d6;
  background: #fde7f0;
  text-decoration: line-through;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 51, 0.34);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.overlay.show { display: flex; }

.overlay-card {
  width: min(460px, 100%);
  text-align: center;
  padding: 1rem;
}

@media (max-width: 960px) {
  .brand-header { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .header-actions { justify-content: center; }
  .game-layout { grid-template-columns: 1fr; }
  .grid { width: min(95vw, 600px); }
}

@media (max-width: 620px) {
  .status-row { grid-template-columns: 1fr; }
  select { min-width: 145px; }
  .btn { width: 100%; }
  .controls-panel { flex-direction: column; align-items: stretch; }
}