:root {
  --bg1: #fff0f6; --bg2: #f4f0ff; --bg3: #eafff4;
  --accent: #b0508f; --accent-soft: #8c4a75;
  --btn1: #ff9ecf; --btn2: #b18cff;
  --ink: #4a3a45; --card: #ffffffcc;
  --pink-bg: #ffd6e8; --pink-ink: #b23a7a;
  --mint-bg: #d6f0e0; --mint-ink: #2f8f5b;
  --lav-bg: #e2dcff; --lav-ink: #6a5acd;
  --font: ui-rounded, "Quicksand", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.app { max-width: 560px; margin: 0 auto; padding: 24px 18px 60px; }

.header { text-align: center; margin-bottom: 8px; }
.mascot { display: inline-block; transform-origin: 50% 80%; }
.title { margin: 4px 0 0; color: var(--accent); font-size: 30px; font-weight: 800; }
.subtitle { margin: 2px 0 0; color: var(--accent-soft); font-size: 14px; }

.generate-area { text-align: center; margin: 22px 0; }
.btn-generate {
  border: none; cursor: pointer; color: #fff; font-family: var(--font);
  font-weight: 800; font-size: 20px; padding: 16px 40px; border-radius: 999px;
  background: linear-gradient(135deg, var(--btn1), var(--btn2));
  box-shadow: 0 8px 20px #e6a9d4; transition: transform .12s ease, box-shadow .12s ease;
}
.btn-generate:hover { transform: translateY(-1px); }
.btn-generate:active { transform: translateY(1px) scale(.98); }

.result { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 14px; min-height: 40px; }
.result .chip {
  padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 17px;
  box-shadow: 0 2px 0 rgba(0,0,0,.06); animation: pop .32s ease both;
}
.chip.c0 { background: var(--pink-bg); color: var(--pink-ink); }
.chip.c1 { background: var(--mint-bg); color: var(--mint-ink); }
.chip.c2 { background: var(--lav-bg); color: var(--lav-ink); }
.result .empty { color: var(--accent-soft); font-size: 15px; }

.btn-secondary {
  border: 2px solid var(--pink-bg); background: #fff; color: var(--accent);
  font-family: var(--font); font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
}
.btn-secondary:active { transform: scale(.97); }

.section-label { color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; margin: 18px 0 8px; }
.history-area { text-align: center; }
.history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.history li { background: var(--card); border-radius: 12px; padding: 8px 12px; font-size: 14px; }

.settings-area { margin-top: 24px; text-align: center; }
.settings-panel { text-align: left; background: var(--card); border-radius: 18px; padding: 16px; margin-top: 12px; }
.range-row { display: flex; gap: 14px; }
.range-row label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; color: var(--accent); }
.range-row input { font-family: var(--font); font-size: 18px; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--lav-bg); text-align: center; }

.bank { display: flex; flex-wrap: wrap; gap: 8px; }
.bank .tag { display: inline-flex; align-items: center; gap: 6px; background: var(--pink-bg); color: var(--pink-ink); border-radius: 999px; padding: 6px 8px 6px 14px; font-weight: 700; font-size: 14px; }
.bank .tag button { border: none; background: rgba(0,0,0,.08); color: inherit; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; }

.word-input { width: 100%; font-family: var(--font); font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--lav-bg); resize: vertical; }
.settings-actions { display: flex; gap: 10px; margin-top: 10px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.2); }

@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounce { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(-4px) rotate(5deg); } }
.mascot.bounce { animation: bounce .6s ease; }

@media (prefers-reduced-motion: reduce) {
  .result .chip, .mascot.bounce, .btn-generate { animation: none !important; transition: none !important; }
}