/* Fredoka, self-hosted (latin + latin-ext) */
@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{
  --paper:      oklch(96.6% 0.024 84);
  --tile:       oklch(99.4% 0.008 92);
  --ink:        oklch(29% 0.034 62);
  --ink-soft:   oklch(50% 0.03 66);
  --terracotta: oklch(62% 0.155 42);
  --leaf:       oklch(64% 0.125 152);
  --mustard:    oklch(84% 0.135 88);
  --sky:        oklch(66% 0.10 235);
  --sky-deep:   oklch(52% 0.09 240);
  --berry:      oklch(61% 0.155 12);
  --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,20px);
  padding-top:max(clamp(10px,2.6vw,20px), env(safe-area-inset-top));
  padding-bottom:max(clamp(10px,2.6vw,20px), env(safe-area-inset-bottom));
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-family:var(--font);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, oklch(29% 0.034 62 / .05) 1px, transparent 0),
    radial-gradient(120% 80% at 84% -12%, oklch(84% 0.135 88 / .26), transparent 62%),
    radial-gradient(90% 70% at 2% 110%, oklch(66% 0.10 235 / .16), transparent 60%);
  background-size:22px 22px, auto, auto;
  -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,20px));
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1.6vw,10px);
}

/* ---------- header ---------- */
.top{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.brand h1{
  margin:0;
  font-size:clamp(1.35rem, 5.6vw, 1.75rem);
  font-weight:700;
  line-height:1.1;
}
.brand h1::after{
  content:'';
  display:block;
  width:4.4em;
  height:.28em;
  margin-top:.16em;
  border-radius:999px;
  background:var(--sky);
  clip-path:polygon(0 44%, 100% 0, 100% 100%, 0 88%);
}
.brand p{ margin:.4em 0 0; font-size:.78rem; 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); }

/* ---------- hud ---------- */
.hud{
  display:flex;
  align-items:center;
  gap:clamp(6px,1.8vw,10px);
  font-size:.78rem;
}
.hud__dist{ font-variant-numeric:tabular-nums; color:var(--ink-soft); white-space:nowrap; }
.hud__dist b{ color:var(--ink); font-size:1rem; }
.bar{
  flex:1;
  height:12px;
  min-width:50px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--tile);
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  width:0%;
  background:var(--sky);
  border-radius:999px;
  transition:width .2s linear;
}
.hud__stars{ display:flex; align-items:center; gap:.2em; font-variant-numeric:tabular-nums; }
.hud__stars svg{ width:17px; height:17px; }
.lives{ display:flex; gap:2px; }
.lives svg{ width:18px; height:18px; }

/* ---------- stage ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:280px;
}
#board{
  box-sizing:content-box;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:block;
  border:3px solid var(--ink);
  border-radius:20px;
  background:oklch(93% 0.045 225);
  box-shadow:0 5px 0 var(--ink);
  touch-action:none;
}

.overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:8px;
  z-index:5;
  border-radius:20px;
  animation:fade .25s var(--ease);
}
.overlay[hidden]{ display:none; }
.overlay__card{
  width:min(100%, 320px);
  max-height:100%;
  overflow:auto;
  padding:clamp(14px,3.6vw,22px);
  text-align:center;
  background:oklch(99.4% 0.008 92 / .96);
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:0 7px 0 var(--ink);
  animation:rise .4s var(--ease);
}
.overlay__kicker{ margin:0; font-size:.74rem; letter-spacing:.16em; color:var(--ink-soft); }
.overlay__stars{ display:flex; justify-content:center; gap:6px; margin:-.1em 0 .55em; }
.overlay__stars[hidden]{ display:none; }
.overlay__stars svg{ width:30px; height:30px; }
.overlay__title{ margin:.24em 0 .45em; font-size:clamp(1.25rem,5.2vw,1.6rem); font-weight:700; }
.overlay__text{ margin:0 0 .9em; font-size:.82rem; line-height:1.6; color:var(--ink-soft); }
.legend{
  list-style:none;
  margin:0 0 1em;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.42em;
  text-align:left;
  font-size:.76rem;
  color:var(--ink-soft);
}
.legend li{ display:flex; align-items:center; gap:.55em; }
.chip{ width:14px; height:14px; flex:none; border:2px solid var(--ink); }
.chip--cloud{ border-radius:8px 8px 5px 5px; background:oklch(84% 0.03 235); }
.chip--star{ border-radius:50%; background:var(--mustard); }
.chip--heart{ border-radius:4px 4px 8px 8px; background:var(--berry); }

.btn{
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 20px;
  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(--terracotta); color:oklch(98% 0.012 60); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }

/* ---------- controls ---------- */
.controls{
  display:flex;
  gap:12px;
  justify-content:center;
}
.ctrl{
  flex:1;
  max-width:200px;
  height:clamp(54px, 9svh, 68px);
  display:grid;
  place-items:center;
  border:2.5px solid var(--ink);
  border-radius:18px;
  background:var(--tile);
  color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
  cursor:pointer;
  user-select:none;
  touch-action:none;
}
.ctrl svg{ width:34px; height:34px; }
.ctrl.is-down,
.ctrl:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); background:var(--mustard); }

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

/* ---------- parent notes ---------- */
.parent{
  border-top:2px dashed oklch(29% 0.034 62 / .25);
  padding-top:8px;
  font-size:.78rem;
  color:var(--ink-soft);
}
.parent summary{
  cursor:pointer;
  font-weight:700;
  color:var(--ink);
  list-style:none;
  display:flex;
  align-items:center;
  gap:.5em;
}
.parent summary::-webkit-details-marker{ display:none; }
.parent summary::before{
  content:'';
  width:.5em; height:.5em;
  border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .2s var(--ease);
}
.parent[open] summary::before{ transform:rotate(45deg); }
.parent__body{ padding-top:.4em; }
.parent__body p{ margin:.4em 0; line-height:1.6; }
.parent__body ul{ margin:.4em 0; padding-left:1.1em; line-height:1.65; }
.parent__body b{ color:var(--ink); }

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

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

/* 矮屏/小屏：把非游戏元素收紧，高度让给天空 */
@media (max-height: 660px){
  .brand p{ display:none; }
  .hint{ display:none; }
  .ctrl{ height:52px; }
  .app{ gap:5px; }
  .parent{ padding-top:6px; }
  .parent summary{ font-size:.74rem; }
}