: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; }
header a, #archiveBanner a, footer a { color: var(--accent); }
footer { margin-top: 2rem; }
.archivebtn { display: block; margin: 1.2rem auto 0; background: transparent; color: var(--accent); text-decoration: underline; font-weight: 600; }
.modeswitch { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; margin: .5rem 0 .2rem; }
.modeswitch a { padding: .35rem 1rem; color: var(--fg); text-decoration: none; font-size: .85rem; font-weight: 600; }
.modeswitch a.active { background: var(--accent); color: #fff; }
.pbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; margin: .4rem 0; }
.pbar[hidden] { display: none; } /* flex above otherwise overrides the hidden attribute */
.pbar .modeswitch { margin: 0; }
.pdist { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.pdist input { width: 3.5rem; padding: .3rem .4rem; border: 2px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); font: inherit; text-align: center; }
.calendar { margin: .8rem auto 0; max-width: 320px; border: 2px solid var(--line); border-radius: 12px; padding: .6rem; }
.calhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-weight: 600; }
.calhead button { background: transparent; color: var(--fg); padding: .1rem .7rem; font-size: 1.3rem; }
.calhead button:disabled { opacity: .3; cursor: default; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.caldow span { font-size: .7rem; color: #888; padding: .2rem 0; text-align: center; }
.calgrid button.d, .calgrid span.off { padding: .4rem 0; font-size: .85rem; text-align: center; border-radius: 6px; background: transparent; color: var(--fg); position: relative; }
.calgrid button.d { cursor: pointer; border: 1px solid var(--line); }
.calgrid button.d:hover { background: var(--line); }
.calgrid span.off { color: #bbb; opacity: .45; }
.calgrid .today { outline: 2px solid var(--accent); }
.calgrid .cur { background: var(--accent); color: #fff; border-color: var(--accent); }
.calgrid i { position: absolute; top: -3px; right: 1px; font-size: .62rem; color: var(--accent2); font-style: normal; }

.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; }
.ac { position: relative; flex: 1; }
#guess { width: 100%; padding: .7rem; font-size: 1rem; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
#suggest { list-style: none; margin: 4px 0 0; padding: 0; position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  background: var(--bg); border: 2px solid var(--line); border-radius: 8px; max-height: 244px; overflow-y: auto; text-align: left; }
#suggest:empty { display: none; }
#suggest li { padding: .6rem .8rem; cursor: pointer; }
#suggest li:hover { background: var(--line); }
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; }
.aux { display: flex; gap: 1.4rem; justify-content: center; margin-top: .7rem; }
.hint { background: transparent; color: var(--accent); text-decoration: underline; font-weight: 600; padding: .3rem; }
button:disabled { opacity: .4; cursor: default; text-decoration: none; }

.map { margin: 1rem auto 0; max-width: 520px; }
.map svg { width: 100%; height: auto; min-height: 220px; background: #eef1ee; border: 2px solid var(--line); border-radius: 10px; display: block; }
.map .bg path { fill: #dde2dd; stroke: #c5cbc5; stroke-width: .6; vector-effect: non-scaling-stroke; }
.map .rt path { fill: var(--accent); fill-opacity: .5; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map .ln line { stroke: #2f3e35; stroke-width: 1.6; stroke-dasharray: 4 2.5; vector-effect: non-scaling-stroke; }
.map .mk circle.stp { fill: #fff; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.map .mk circle.tgt { fill: var(--accent2); stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.map .mk text { fill: #14241a; font-weight: 700; }
@media (prefers-color-scheme: dark) { .map svg { background: #1b2320; } .map .bg path { fill: #2b352f; stroke: #3a463f; } }
.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; }

/* Win firework: particles burst outward from a point near the top, then fade. */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; }
.confetti i { position: absolute; left: 50%; top: 35%; width: 8px; height: 8px; border-radius: 1px; opacity: 0; animation: burst 1.1s ease-out forwards; }
@keyframes burst {
  0% { transform: translate(0, 0) scale(.3); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1) rotate(240deg); opacity: 0; }
}