:root { --accent: #6aaa64; --accent2: #6aaa64; --bg: #f4f2ec; --fg: #23272e; --line: #ddd8cc; }
@media (prefers-color-scheme: dark) { :root { --accent: #6aaa64; --accent2: #6aaa64; --bg: #181a1d; --fg: #e6e6e6; --line: #34383d; } }

* { box-sizing: border-box; }
body {
  margin: 0; padding: 1rem; max-width: 480px; margin-inline: auto;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--fg); text-align: center;
}
h1 { font-size: 1.6rem; letter-spacing: .15em; margin: .2rem 0; }
.muted { color: #888; font-size: .85rem; }
.label { font-size: .65rem; letter-spacing: .1em; color: #888; }

.goal {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  border: 2px solid var(--line); border-radius: 12px; padding: 1rem; margin: 1rem 0;
}
.goal .to { font-size: 1.5rem; color: #888; }
.big { font-size: 1.2rem; font-weight: 700; }

.chain { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; align-items: center; min-height: 2rem; margin: 1rem 0 .3rem; }
.pill { background: var(--line); border-radius: 999px; padding: .25rem .7rem; font-size: .95rem; }
.pill.cur { background: var(--accent); color: #fff; }
.arrow { color: #888; }

.msg { min-height: 1.2rem; color: #c0392b; font-size: .9rem; opacity: 0; }
.msg.show { animation: pop .4s; opacity: 1; }
@keyframes pop { 0% { transform: scale(.9); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.input-row { display: flex; gap: .4rem; margin-top: .5rem; }
#guess { flex: 1; padding: .7rem; font-size: 1rem; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
button { padding: .7rem 1.2rem; font-size: 1rem; border: none; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; letter-spacing: .03em; cursor: pointer; }
#go { background: var(--accent2); padding-inline: 1.4rem; }
#undo { background: transparent; color: #888; padding-inline: .9rem; }

.win { display: none; margin-top: 1rem; }
.win h2 { margin: .3rem 0; }
.actions { margin-top: 1rem; display: flex; gap: .5rem; justify-content: center; }
.share { display: none; }
.reset { background: transparent; color: #888; font-weight: 400; text-decoration: underline; }