:root{
  --bg:#fff7e6; --ink:#3a2e1f; --muted:#8a7a63; --card:#ffffff;
  --yellow:#ffd23f; --pink:#ff8fab; --blue:#7cc6fe; --green:#8fd694; --purple:#b69cff; --orange:#ffa94d;
  --line:#3a2e1f; --shadow:0 5px 0 var(--line);
  --font: ui-rounded, "Hiragino Maru Gothic ProN", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#2a2335; --ink:#fff4dc; --muted:#c9b99f; --card:#3a3049; --line:#120e1a; --shadow:0 5px 0 var(--line); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(#ffd23f33 2px,transparent 2px);background-size:26px 26px}
.clouds i{position:fixed;top:12%;width:120px;height:40px;background:#fff;border-radius:40px;opacity:.7;animation:drift 60s linear infinite;z-index:0}
.clouds i::before{content:"";position:absolute;left:18px;top:-18px;width:50px;height:50px;background:#fff;border-radius:50%}
.clouds i:nth-child(2){top:30%;animation-duration:90s;animation-delay:-30s;transform:scale(.7)}
.clouds i:nth-child(3){top:70%;animation-duration:75s;animation-delay:-50s;transform:scale(.9)}
@media (prefers-color-scheme: dark){.clouds i,.clouds i::before{background:#ffffff22}}
@keyframes drift{from{left:-160px}to{left:110%}}

.hero{position:relative;z-index:1;text-align:center;padding:48px 16px 8px}
.bus{width:min(260px,64vw);animation:bounce 1.6s ease-in-out infinite}
.wheel{transform-box:fill-box;transform-origin:center;animation:spin 1.2s linear infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
h1{margin:10px 0 0;font-size:clamp(28px,7vw,46px);letter-spacing:2px;text-shadow:3px 3px 0 var(--yellow)}
.sub{margin:6px 0 0;color:var(--muted)}

main{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0 26px}
.card{background:var(--card);border:3px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:14px 12px;text-align:center;
  transition:transform .15s}
.card:hover{transform:translateY(-4px) rotate(-1.5deg)}
.card:nth-child(4n+1){background:#fff3b8}.card:nth-child(4n+2){background:#ffd9e3}
.card:nth-child(4n+3){background:#d7efff}.card:nth-child(4n){background:#dcf5de}
@media (prefers-color-scheme: dark){.card:nth-child(n){background:var(--card)}}
.card .emoji{font-size:28px}
.card .num{font-size:30px;font-weight:800;line-height:1.2}
.card .lbl{font-size:13px;color:var(--muted)}

.panel{background:var(--card);border:3px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:18px 16px 20px;margin:0 0 26px}
.panel h2{margin:0 0 6px;font-size:22px}
.hint{margin:0 0 10px;color:var(--muted);font-size:13px}
.mapwrap{background:repeating-linear-gradient(45deg,#e8f7ea,#e8f7ea 14px,#def2e1 14px,#def2e1 28px);border:3px dashed var(--line);border-radius:22px;overflow:hidden}
@media (prefers-color-scheme: dark){.mapwrap{background:#2f3a3a}}
#map{width:100%;height:auto;display:block}
.cityLabel{font:700 15px var(--font);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
@media (prefers-color-scheme: dark){.cityLabel{stroke:#120e1a}}
.route{fill:none;stroke:var(--pink);stroke-linecap:round;stroke-dasharray:2 12;animation:dash 2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.cityDot{stroke:var(--line);stroke-width:3;cursor:pointer;transition:transform .2s;transform-box:fill-box;transform-origin:center}
.cityDot:hover{transform:scale(1.12)}
.rank{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rank li{background:#fff3b8;border:2px solid var(--line);border-radius:999px;padding:3px 12px;font-size:14px}
@media (prefers-color-scheme: dark){.rank li{background:#4a3f5c}}

.stickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.sticker{border:3px solid var(--line);border-radius:20px;padding:12px;text-align:center;box-shadow:var(--shadow);transform:rotate(var(--r,0deg))}
.sticker b{display:block;font-size:22px}
.sticker span{font-size:13px;color:#5a4b36}
.sticker.todo{background:transparent;border-style:dashed;box-shadow:none;opacity:.7;color:var(--muted)}
.sticker.todo span{color:var(--muted)}

.chart{overflow-x:auto}
.chart svg{display:block;width:100%;min-width:560px;height:auto}
.axis{font:11px var(--font);fill:var(--muted)}
.bar{transition:opacity .15s}.bar:hover{opacity:.7}
.fun ul,#fun{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#fun li{background:#f3ecff;border:2px solid var(--line);border-radius:16px;padding:10px 14px}
@media (prefers-color-scheme: dark){#fun li{background:#463a5c}}
footer{position:relative;z-index:1;text-align:center;padding:10px 16px 50px;color:var(--muted);font-size:14px}
.small{font-size:12px;margin:0}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}