* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #f3efe4;
  color: #171717;
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
#app { min-height: 100%; }

.board {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 64px;
}
.play {
  width: min(640px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 72px;
}

.hero h1 {
  margin: 0;
  font-size: 44px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.hero p { margin: 10px 0 0; font-size: 18px; }
.hero { margin-bottom: 22px; }

.cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 148px;
  padding: 18px 18px 16px;
  text-align: left;
  background: #fff;
  border: 3px solid #171717;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #171717;
}
.cat:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #171717; }
.cat.yellow { background: #ffd23a; }
.cat.blue { background: #d7e2ff; }
.cat b { font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; }
.cat em { font-style: normal; font-size: 14px; font-weight: 700; }
.cat small { color: #3a3a3a; line-height: 1.45; }

.foot {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.quiet, .next, .go {
  border: 3px solid #171717;
  border-radius: 999px;
  background: #fff;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 3px 3px 0 #171717;
}
.quiet.yellow, .go { background: #ffd23a; }
.go { background: #171717; color: #fff; box-shadow: 3px 3px 0 #d7261e; }

.dock {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f3efe4;
  padding: 8px 0 6px;
}
.story { margin: 0 0 14px; line-height: 1.5; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.back {
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 700;
}
.voice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.voice label { font-weight: 700; }
.voice input[type="range"] { width: 150px; accent-color: #171717; }
.meter {
  height: 10px;
  border: 2px solid #171717;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
}
.meter i {
  display: block;
  height: 100%;
  background: #1847b5;
}

.card {
  background: #fff;
  border: 3px solid #171717;
  border-radius: 22px;
  box-shadow: 8px 8px 0 #171717;
  padding: 22px 22px 18px;
}
.tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffd23a;
  font-size: 13px;
  font-weight: 700;
}
.stem {
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.choices, .judge {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.judge { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  text-align: left;
  background: #fff;
  border: 3px solid #171717;
  border-radius: 16px;
  font-size: 17px;
  line-height: 1.35;
}
.choice .key {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.choice.on { background: #fff6cc; }
.choice.good { background: #d9f5c8; }
.choice.bad { background: #ffd7d4; animation: shake .35s linear; }
.choice:disabled { cursor: default; }
.judge .choice { justify-content: center; font-size: 28px; font-weight: 700; min-height: 84px; }

.verdict {
  margin-top: 14px;
  padding: 12px 14px;
  border: 3px solid #171717;
  border-radius: 16px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.verdict.ok { background: #d9f5c8; }
.verdict.no { background: #ffd7d4; }
.verdict small { display: block; margin-top: 4px; font-size: 18px; letter-spacing: 0; }
.choice .mark { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; }
.judge .choice { flex-direction: column; gap: 2px; }
.note { margin-top: 8px; font-size: 14px; }

.tools {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.slots, .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.slot, .chip {
  min-height: 42px;
  padding: 8px 12px;
  border: 3px solid #171717;
  border-radius: 12px;
  background: #fff;
}
.slot { min-width: 72px; background: #f6f3ea; }
.slot.filled { background: #fff6cc; }

.score {
  font-size: 72px;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 8px 0 12px;
}

.line-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin: 8px 0 14px;
}
.line-row button {
  flex: none;
  border: 2px solid #171717;
  border-radius: 999px;
  background: #fff;
  padding: 7px 12px;
  font-weight: 700;
}
.line-row button.on { background: #171717; color: #fff; }
.search {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 3px solid #171717;
  border-radius: 14px;
  background: #fff;
}
.group { margin: 0 0 18px; }
.group h2 { margin: 0 0 8px; font-size: 16px; }
.q {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  text-align: left;
  background: #fff;
  border: 2px solid #171717;
  border-radius: 14px;
}
.q.reading { background: #fff6cc; }
.q small { display: block; margin-top: 6px; color: #555; }
.q .answer { margin-top: 8px; font-weight: 700; }
.seal {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ffd23a;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
}

@keyframes shake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@media (max-width: 700px) {
  .hero h1 { font-size: 34px; }
  .cats { grid-template-columns: 1fr; }
  .stem { font-size: 20px; }
}