:root {
  color-scheme: light;
  --bg: linear-gradient(180deg, #fff9f1 0%, #fff6ff 50%, #eef7ff 100%);
  --panel: rgba(255, 255, 255, 0.94);
  --ink: #3a3558;
  --muted: #7b7597;
  --line: rgba(102, 90, 155, 0.12);
  --pink: #ff77ae;
  --orange: #ffaf4d;
  --purple: #7b5fe0;
  --green: #4db77a;
  --yellow: #ffd55c;
  --red: #ff7a7a;
  --blue: #6fa7ff;
  --shadow: 0 22px 50px rgba(113, 92, 179, 0.14);
  font-family: "Nunito", "Noto Sans SC", "PingFang SC", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

.app {
  width: min(960px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 18px 0 32px;
}

.hero,
.prompt-card,
.game-card,
.panel,
.feedback {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 22px;
  border-radius: 28px;
  padding: 24px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero h1,
.result-title {
  margin: 0;
  line-height: 1.12;
}

.intro,
.progress-sub,
.result-summary {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.7;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hero-tags span,
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.hero-tags span {
  background: #fff0d2;
  color: #9b6a14;
}

.hero-actions,
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.primary-btn,
.secondary-btn,
.hint-btn,
.tool-btn,
.pad-btn {
  border: none;
  font: inherit;
  cursor: pointer;
}

.primary-btn,
.secondary-btn {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 800;
}

.primary-btn {
  background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 100%);
  color: #fff;
  box-shadow: 0 16px 28px rgba(255, 129, 172, 0.26);
}

.secondary-btn {
  background: #fff;
  color: #5f518f;
  border: 1px solid rgba(95, 81, 143, 0.16);
}

.secondary-btn--ghost {
  color: var(--muted);
}

.hero-preview {
  display: grid;
  gap: 16px;
  align-content: center;
}

.preview-card {
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(118, 95, 190, 0.12);
  box-shadow: 0 14px 30px rgba(111, 87, 175, 0.12);
}

.preview-card--picture {
  min-height: 190px;
  display: grid;
  place-items: center;
}

.preview-art {
  font-size: 92px;
  line-height: 1;
}

.preview-toolbar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-weight: 700;
}

.preview-toolbar span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff4f8;
}

.preview-card--board {
  text-align: center;
}

.mini-grid {
  width: 120px;
  margin: 0 auto 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mini-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  background: #f4f0ff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  color: #7d63cf;
}

.mini-cell--snake,
.mini-cell--snake-head {
  background: linear-gradient(135deg, #7b5fe0 0%, #a17dff 100%);
}

.mini-cell--snake-head {
  box-shadow: 0 0 0 3px rgba(255, 174, 84, 0.35) inset;
}

.mini-cell--target {
  background: linear-gradient(135deg, #ffd560 0%, #ffb64e 100%);
  color: #8e5206;
}

.mini-cell--decoy {
  background: #ffe6ef;
  color: #bf5787;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 6px 14px;
}

.score-group {
  display: flex;
  gap: 10px;
  align-self: flex-start;
}

.score-pill {
  background: rgba(255, 255, 255, 0.92);
  color: #66578b;
}

.score-pill strong {
  margin-left: 6px;
}

.score-pill--pink {
  background: #fff0f7;
  color: #cf5b94;
}

.prompt-card,
.game-card,
.panel {
  border-radius: 28px;
  padding: 22px;
}

.prompt-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.prompt-visual {
  min-height: 200px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fffdf8 0%, #fff8f1 100%);
  border: 1px solid rgba(255, 182, 76, 0.16);
  display: grid;
  place-items: center;
}

.art-frame {
  width: min(100%, 300px);
  min-height: 164px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top left, rgba(255, 226, 127, 0.28), transparent 30%),
    radial-gradient(circle at bottom right, rgba(111, 168, 255, 0.22), transparent 32%),
    #fff;
  box-shadow: inset 0 0 0 1px rgba(122, 95, 224, 0.08);
}

.art-emoji {
  font-size: clamp(92px, 18vw, 128px);
  line-height: 1;
}

.prompt-actions {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.hint-btn {
  min-height: 48px;
  min-width: 138px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff4f7;
  color: #c65289;
  font-size: 15px;
  font-weight: 800;
}

.hint-btn--voice {
  background: #fff5df;
  color: #ac6f0f;
}

.hint-btn.is-speaking {
  background: #ffe0ab;
}

.word-text {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 34px;
  font-weight: 900;
  color: #5d4fa1;
  letter-spacing: 0.08em;
  text-align: center;
}

.spelling-progress {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.progress-chip {
  min-width: 42px;
  height: 48px;
  padding: 0 12px;
  border-radius: 14px;
  background: #efe9ff;
  color: #8b81ab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
}

.progress-chip.is-filled {
  background: linear-gradient(135deg, #ffd96e 0%, #ffb962 100%);
  color: #94570a;
}

.target-hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

.game-card {
  margin-top: 16px;
}

.game-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  color: var(--muted);
  font-weight: 700;
}

.game-meta p {
  margin: 0;
}

.board-wrap {
  border-radius: 26px;
  padding: 16px;
  background: linear-gradient(180deg, #fefcff 0%, #f7fbff 100%);
  box-shadow: inset 0 0 0 1px rgba(123, 95, 224, 0.08);
  transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.board-wrap.is-hit {
  transform: scale(1.01);
  box-shadow:
    inset 0 0 0 1px rgba(123, 95, 224, 0.08),
    0 0 0 6px rgba(255, 214, 96, 0.22);
  background: linear-gradient(180deg, #fffdf1 0%, #fff9de 100%);
}

.board-wrap.is-celebrating {
  transform: scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(123, 95, 224, 0.08),
    0 0 0 8px rgba(255, 175, 77, 0.18),
    0 16px 38px rgba(255, 157, 77, 0.22);
  background:
    radial-gradient(circle at top left, rgba(255, 226, 120, 0.35), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255, 126, 175, 0.2), transparent 30%),
    linear-gradient(180deg, #fffdf2 0%, #fff7df 100%);
}

.board {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px;
  touch-action: manipulation;
}

.board-cell {
  aspect-ratio: 1;
  border-radius: 14px;
  background: #f4f1ff;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 900;
  color: #735ec9;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.board-cell.is-body {
  background: linear-gradient(135deg, #ff8dbe 0%, #ffb3d2 100%);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.46),
    inset 0 -4px 6px rgba(213, 89, 142, 0.18);
}

.board-cell.is-body::before {
  content: "";
  position: absolute;
  inset: 10% 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
}

.board-cell.is-body::after {
  content: "";
  position: absolute;
  right: 18%;
  left: 18%;
  bottom: 16%;
  height: 18%;
  border-radius: 999px;
  background: rgba(208, 82, 137, 0.18);
}

.board-cell.is-head {
  background: radial-gradient(circle at 30% 28%, #ffd7e8 0%, #ff94bf 48%, #ff72ac 100%);
  border-radius: 18px;
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.55),
    inset 0 -6px 8px rgba(207, 73, 129, 0.22),
    0 0 0 3px rgba(255, 186, 83, 0.28) inset;
  z-index: 1;
}

.board-cell.is-head::before,
.board-cell.is-head::after {
  content: "";
  position: absolute;
  width: 14%;
  height: 14%;
  border-radius: 999px;
  background: #4b2a58;
  top: 34%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.board-cell.is-head::before {
  left: 28%;
}

.board-cell.is-head::after {
  right: 28%;
}

.board-cell.is-head[data-dir="up"] {
  transform: rotate(0deg);
}

.board-cell.is-head[data-dir="right"] {
  transform: rotate(90deg);
}

.board-cell.is-head[data-dir="down"] {
  transform: rotate(180deg);
}

.board-cell.is-head[data-dir="left"] {
  transform: rotate(270deg);
}

.board-cell.is-head::before,
.board-cell.is-head::after {
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.board-cell.is-head[data-dir="right"]::before,
.board-cell.is-head[data-dir="right"]::after {
  right: 32%;
  left: auto;
}

.board-cell.is-head[data-dir="right"]::before {
  top: 27%;
}

.board-cell.is-head[data-dir="right"]::after {
  top: auto;
  bottom: 27%;
}

.board-cell.is-head[data-dir="left"]::before,
.board-cell.is-head[data-dir="left"]::after {
  left: 32%;
  right: auto;
}

.board-cell.is-head[data-dir="left"]::before {
  top: 27%;
}

.board-cell.is-head[data-dir="left"]::after {
  top: auto;
  bottom: 27%;
}

.board-cell.is-head[data-dir="down"]::before,
.board-cell.is-head[data-dir="down"]::after {
  top: auto;
  bottom: 34%;
}

.board-cell.is-target {
  background: linear-gradient(135deg, #ffd760 0%, #ffb84f 100%);
  color: #8d5506;
  box-shadow: 0 0 0 3px rgba(255, 183, 79, 0.18);
}

.board-cell.is-decoy {
  background: #ffe8f1;
  color: #c55c8d;
}

.board-cell.is-target,
.board-cell.is-decoy {
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.board-cell.is-target:active,
.board-cell.is-decoy:active {
  transform: scale(0.94);
}

.board-cell.is-target:hover {
  box-shadow: 0 0 0 4px rgba(255, 183, 79, 0.24);
}

.feedback {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.feedback--success {
  background: #e6fff1;
  color: #238056;
}

.feedback--warning {
  background: #fff3e1;
  color: #9f6511;
}

.feedback--neutral {
  background: #eef3ff;
  color: #5667a8;
}

.tool-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.tool-btn {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  background: #fff0f7;
  color: #a74e82;
  font-size: 15px;
  font-weight: 800;
}

.tool-btn--ghost {
  background: #f6f4ff;
  color: #6d63a5;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.panel h3 {
  margin: 0 0 14px;
}

.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.review-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: #faf8ff;
  color: #675b92;
  font-weight: 700;
}

.review-list li span:last-child {
  text-align: right;
  color: var(--muted);
  font-size: 13px;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  border-radius: 20px;
  padding: 18px 14px;
  background: #fff8eb;
  text-align: center;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  color: #8e5a06;
}

.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .app {
    width: min(100vw, 100%);
    padding: 12px 12px 26px;
  }

  .hero,
  .result-grid,
  .prompt-card {
    grid-template-columns: 1fr;
  }

  .prompt-actions {
    grid-auto-flow: column;
    justify-content: center;
  }

  .topbar {
    flex-direction: column;
  }

  .score-group {
    align-self: stretch;
  }
}

@media (max-width: 640px) {
  .hero,
  .prompt-card,
  .game-card,
  .panel {
    border-radius: 24px;
    padding: 18px;
  }

  .hero h1,
  .result-title {
    font-size: 32px;
  }

  .art-frame {
    min-height: 144px;
  }

  .art-emoji {
    font-size: 86px;
  }

  .board-wrap {
    padding: 12px;
  }

  .board {
    gap: 3px;
  }

  .board-cell {
    border-radius: 10px;
    font-size: 18px;
  }

  .result-stats {
    grid-template-columns: 1fr;
  }
}