@font-face{
  font-family:'Fredoka';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fredoka';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:        oklch(29% 0.034 62);
  --ink-soft:   oklch(50% 0.03 66);
  --paper:      oklch(96% 0.02 95);
  --paper-deep: oklch(92% 0.03 92);
  --tile:       oklch(99.4% 0.008 92);
  --leaf:       oklch(64% 0.125 152);
  --leaf-deep:  oklch(46% 0.09 152);
  --sky:        oklch(58% 0.088 205);
  --sun:        oklch(84% 0.135 88);
  --berry:      oklch(61% 0.155 12);
  --bark:       oklch(48% 0.07 55);
  --ease:       cubic-bezier(.22,1,.36,1);
  --font:'Fredoka','PingFang SC','HarmonyOS Sans SC','MiSans','Hiragino Sans GB','Source Han Sans SC','Noto Sans CJK SC','Microsoft YaHei',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }

body{
  min-height:100svh;
  padding:clamp(10px,2.6vw,18px);
  padding-top:max(clamp(10px,2.6vw,18px), env(safe-area-inset-top));
  padding-bottom:max(clamp(10px,2.6vw,18px), env(safe-area-inset-bottom));
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 90% 0%, oklch(92% 0.05 120 / .9), transparent 60%),
    radial-gradient(100% 80% at 0% 100%, oklch(93% 0.04 80 / .9), transparent 62%),
    linear-gradient(170deg, oklch(95% 0.03 130), oklch(97% 0.02 90));
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}

.app{
  width:min(100%, 520px);
  min-height:calc(100svh - 2 * clamp(10px,2.6vw,18px));
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* header */
.top{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.brand h1{
  margin:0;
  font-size:clamp(1.3rem, 5.2vw, 1.65rem);
  font-weight:700;
  line-height:1.1;
}
.brand h1::after{
  content:'';
  display:block;
  width:4.2em;
  height:.26em;
  margin-top:.16em;
  border-radius:999px;
  background:var(--leaf);
  clip-path:polygon(0 44%, 100% 0, 100% 100%, 0 88%);
}
.brand p{ margin:.4em 0 0; font-size:.76rem; color:var(--ink-soft); }
.tools{ display:flex; gap:8px; }
.icon-btn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:2px solid var(--ink);
  border-radius:13px;
  background:var(--tile);
  color:var(--ink);
  box-shadow:0 3px 0 var(--ink);
  cursor:pointer;
}
.icon-btn .ico{ width:21px; height:21px; }
.icon-btn[aria-pressed="true"] .ico--off,
.icon-btn[aria-pressed="false"] .ico--on{ display:none; }
.icon-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }

/* map */
.map-screen{ flex:1; display:flex; flex-direction:column; gap:10px; }
.map-progress{ display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--ink-soft); }
.map-progress b{ color:var(--ink); font-size:.95rem; }
.map-progress__bar{
  flex:1; height:10px; border:2px solid var(--ink); border-radius:999px;
  background:var(--tile); overflow:hidden;
}
.map-progress__bar i{ display:block; height:100%; width:0%; background:var(--leaf); border-radius:999px; transition:width .4s var(--ease); }

.regions{ display:flex; flex-direction:column; gap:9px; }
.region{
  border:2.5px solid var(--ink);
  border-radius:18px;
  background:var(--tile);
  box-shadow:0 4px 0 var(--ink);
  padding:9px 11px 11px;
}
.region h2{
  margin:0 0 8px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  font-size:.92rem;
}
.region h2 em{ font-style:normal; font-size:.7rem; color:var(--ink-soft); font-weight:400; }
.levels{ display:flex; gap:8px; }
.lv{
  flex:1;
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border:2.5px solid var(--ink);
  border-radius:14px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.lv b{ font-size:1.05rem; line-height:1; }
.lv span{ font-size:.62rem; color:var(--ink-soft); }
.lv:active:not(:disabled){ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.lv.is-locked{ opacity:.42; cursor:default; box-shadow:0 2px 0 var(--ink); }
.lv.is-done{ background:oklch(90% 0.06 130); }
.lv.is-done span::after{ content:' ★'; color:oklch(70% 0.14 80); }
.map-tip{ margin:0; text-align:center; font-size:.72rem; color:var(--ink-soft); }

/* level */
.level-screen{ flex:1; display:flex; flex-direction:column; gap:8px; }
.level-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.level-head span{ font-size:.86rem; font-weight:700; }
.mini{
  font:inherit;
  font-size:.74rem;
  font-weight:700;
  padding:7px 12px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--tile);
  color:var(--ink);
  box-shadow:0 3px 0 var(--ink);
  cursor:pointer;
}
.mini:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }

.stage{
  flex:1;
  min-height:280px;
  display:grid;
  place-items:center;
  position:relative;
}
#board{ display:block; touch-action:none; cursor:pointer; }

.hint{ margin:0; text-align:center; font-size:.74rem; color:var(--ink-soft); min-height:1.2em; }

/* overlay */
.overlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:16px;
  background:oklch(20% 0.02 120 / .35);
  backdrop-filter:blur(3px);
}
.overlay[hidden]{ display:none; }
.overlay__card{
  width:min(100%, 330px);
  padding:22px;
  text-align:center;
  background:var(--tile);
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:0 8px 0 var(--ink);
  animation:rise .35s var(--ease);
}
.overlay__kicker{ margin:0; font-size:.72rem; letter-spacing:.16em; color:var(--ink-soft); }
.overlay__title{ margin:.3em 0 .4em; font-size:1.45rem; }
.overlay__stars{ font-size:1.5rem; color:oklch(72% 0.15 85); letter-spacing:.08em; margin-bottom:.35em; }
.overlay__text{ margin:0 0 1em; font-size:.84rem; line-height:1.6; color:var(--ink-soft); }
.btn{
  font:inherit;
  font-size:.92rem;
  font-weight:700;
  padding:11px 22px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--tile);
  color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
  cursor:pointer;
}
.btn--primary{ background:var(--leaf); color:oklch(99% 0.01 140); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }

@keyframes rise{ from{ opacity:0; transform:translateY(12px) scale(.95); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media (max-height: 660px){
  .brand p{ display:none; }
  .region{ padding:7px 9px 9px; border-radius:16px; }
  .lv{ min-height:48px; }
  .lv span{ display:none; }
  .map-tip{ display:none; }
}

[hidden]{ display:none !important; }