:root {
  --bg: #FFF6E8;
  --card: #FFFFFF;
  --ink: #1F1A14;
  --muted: #6B6258;
  --subtle: #9A9084;
  --accent: #FFE08A;
  --danger: #E85D4C;
  --danger-bg: #FFE8E4;
  --success: #2F9E6A;
  --success-bg: #E4F7EE;
  --candy-0: #FF8A7A;
  --candy-1: #FFD36E;
  --candy-2: #7ED7C1;
  --candy-3: #8BB7FF;
  --candy-4: #C9A0FF;
  --candy-5: #FF9ECF;
  --shadow: 0 6px 0 var(--ink);
  --radius: 24px;
  --font: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { padding: 16px 12px 40px; }

.app {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--card);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.hero {
  background: var(--accent);
  text-align: center;
}
.hero-emoji { font-size: 40px; line-height: 1; }
.hero h1 {
  font-size: 28px;
  font-weight: 900;
  margin: 8px 0 0;
  line-height: 1.25;
}
.hero-desc {
  font-size: 15px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}

.steps, .chips, .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.steps { margin-top: 12px; }

.chip {
  appearance: none;
  background: var(--bg);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}
.chip.on {
  box-shadow: 0 3px 0 var(--ink);
  color: #fff;
}
.chip.on.c0 { background: var(--candy-0); }
.chip.on.c1 { background: var(--candy-1); color: var(--ink); }
.chip.on.c2 { background: var(--candy-2); color: var(--ink); }
.chip.on.c3 { background: var(--candy-3); color: var(--ink); }
.chip.on.c4 { background: var(--candy-4); }
.chip.on.c5 { background: var(--candy-5); color: var(--ink); }
.chip.on.c6 { background: var(--danger); }

.score {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 800;
}

.section-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 10px;
}

.input {
  width: 100%;
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 12px 14px;
  font-size: 22px;
  font-weight: 800;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  font-family: inherit;
}
.input::placeholder { color: var(--subtle); font-weight: 700; }
.field-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.field { flex: 1 1 200px; }

.chips { justify-content: flex-start; margin-top: 12px; }

.group { margin-top: 18px; }
.group-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 8px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.fruit-btn {
  appearance: none;
  background: var(--bg);
  border: 3px solid var(--ink);
  border-top-width: 10px;
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  color: var(--ink);
  font-family: inherit;
}
.fruit-btn.b0 { border-top-color: var(--candy-0); }
.fruit-btn.b1 { border-top-color: var(--candy-1); }
.fruit-btn.b2 { border-top-color: var(--candy-2); }
.fruit-btn.b3 { border-top-color: var(--candy-3); }
.fruit-btn.b4 { border-top-color: var(--candy-4); }
.fruit-btn.b5 { border-top-color: var(--candy-5); }
.fruit-btn.b6 { border-top-color: var(--danger); }
.fruit-emoji { font-size: 34px; line-height: 1.1; }
.fruit-name {
  font-size: 14px;
  font-weight: 800;
  margin-top: 4px;
  word-break: break-all;
}
.fruit-spec {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.picked {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--accent);
  border: 3px dashed var(--ink);
  border-radius: 18px;
  padding: 12px;
}
.picked-emoji { font-size: 46px; }
.picked-name { font-size: 20px; font-weight: 900; }
.picked-hint { font-size: 15px; color: var(--muted); }

.preview {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
}

.btn {
  appearance: none;
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink);
  padding: 10px 20px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
}
.btn.primary {
  background: var(--danger);
  color: #fff;
}
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: #D9D2C8;
  color: var(--subtle);
}
.actions { justify-content: flex-start; margin-top: 18px; gap: 12px; }

.muted { color: var(--muted); }
.tiny { font-size: 13px; }
.empty { margin-top: 16px; font-size: 16px; color: var(--muted); }

.drum {
  text-align: center;
  padding: 40px 18px;
}
.drum-emoji {
  font-size: 90px;
  display: inline-block;
  animation: shake .45s ease-in-out infinite;
}
.drum-title {
  font-size: 24px;
  font-weight: 900;
  margin-top: 12px;
}
.dot { animation: dots 1s infinite; }

.result { text-align: center; position: relative; overflow: hidden; }
.result-name { font-size: 18px; font-weight: 900; }
.compare {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
  position: relative;
}
.price-card {
  flex: 1 1 130px;
  max-width: 200px;
  height: 130px;
  background: var(--bg);
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.price-label { font-size: 15px; font-weight: 800; }
.price-num { font-size: 34px; font-weight: 900; margin-top: 4px; }
.price-unit { font-size: 13px; color: var(--muted); }
.vs { align-self: center; font-size: 26px; font-weight: 900; }

.flipbox {
  flex: 1 1 130px;
  max-width: 200px;
  height: 138px;
  perspective: 800px;
}
.flipper {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  animation: flip .8s cubic-bezier(.3,1.4,.5,1) .3s both;
}
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border: 4px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.face-front { background: var(--candy-1); }
.face-back {
  background: var(--bg);
  transform: rotateY(180deg);
}
.qmark { font-size: 52px; font-weight: 900; }
.ding {
  display: inline-block;
  color: var(--danger);
  animation: ding .45s cubic-bezier(.3,1.6,.5,1) 1s both;
}

.verdict {
  margin-top: 16px;
  border-radius: 20px;
  padding: 8px 8px 14px;
  position: relative;
  animation: popin .55s cubic-bezier(.3,1.6,.5,1) 1.5s both;
}
.verdict.fish { background: var(--danger-bg); }
.verdict.fox { background: var(--success-bg); }
.mascot {
  font-size: 88px;
  line-height: 1;
  display: inline-block;
  margin-top: 8px;
}
.verdict.fish .mascot { animation: bob 1.8s ease-in-out infinite; }
.verdict.fox .mascot { animation: jump 1s ease-in-out infinite; }
.verdict-title {
  font-size: 32px;
  font-weight: 900;
  margin-top: 6px;
}
.verdict.fish .verdict-title { color: var(--danger); }
.verdict.fox .verdict-title { color: var(--success); }
.verdict-badge {
  display: inline-block;
  margin-top: 12px;
  background: var(--bg);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 900;
}

.conf {
  position: absolute;
  top: 0;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  animation: fall 2.2s linear infinite;
  animation-fill-mode: backwards;
  pointer-events: none;
}

.log h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 8px;
}
.log-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: 2px dashed #D9D2C8;
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-size: 15px;
}
.log-item:last-child { border-bottom: none; margin-bottom: 0; }
.log-name { font-weight: 800; flex: 1 1 140px; }
.log-tag { font-weight: 800; }
.log-tag.fish { color: var(--danger); }
.log-tag.fox { color: var(--success); }

.footer {
  font-size: 13px;
  color: var(--subtle);
  text-align: center;
  line-height: 1.6;
  padding: 0 4px;
}

.pop { transition: transform .15s cubic-bezier(.3,1.6,.5,1); }
.pop:hover { transform: translateY(-3px) scale(1.04); }
.pop:active { transform: translateY(2px) scale(.96); }
.in { animation: popin .5s cubic-bezier(.3,1.6,.5,1); }

@keyframes shake {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-12deg) scale(1.1); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg) scale(1.15); }
  80% { transform: rotate(6deg); }
}
@keyframes dots {
  0% { opacity: .2; }
  50% { opacity: 1; }
  100% { opacity: .2; }
}
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}
@keyframes jump {
  0%,100% { transform: translateY(0); }
  40% { transform: translateY(-22px); }
  60% { transform: translateY(-22px) rotate(4deg); }
}
@keyframes fall {
  0% { transform: translateY(-30px) rotate(0); opacity: 1; }
  100% { transform: translateY(340px) rotate(540deg); opacity: 0; }
}
@keyframes popin {
  0% { transform: scale(.3); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes flip {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(180deg); }
}
@keyframes ding {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.4) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 24px; }
  .verdict-title { font-size: 26px; }
  .mascot { font-size: 72px; }
}

.home-link {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: 2px 4px;
}
.home-link:hover, .home-link:focus-visible { color: var(--ink); text-decoration: underline; }