/* 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);
  --paper-deep: oklch(93% 0.032 82);
  --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);
  --leaf-deep:  oklch(52% 0.11 152);
  --mustard:    oklch(84% 0.135 88);
  --teal:       oklch(58% 0.088 205);
  --berry:      oklch(61% 0.155 12);
  --fright:     oklch(74% 0.06 250);
  --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(12px,3vw,22px);
  padding-top:max(clamp(12px,3vw,22px), env(safe-area-inset-top));
  padding-bottom:max(clamp(12px,3vw,22px), 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 / .055) 1px, transparent 0),
    radial-gradient(120% 80% at 84% -12%, oklch(84% 0.135 88 / .32), transparent 62%),
    radial-gradient(90% 70% at 2% 110%, oklch(64% 0.125 152 / .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%, 620px);
  display:flex;
  flex-direction:column;
  gap:clamp(8px,2vw,14px);
}

/* ---------- header ---------- */
.top{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.brand h1{
  margin:0;
  font-size:clamp(1.4rem, 5.8vw, 1.85rem);
  font-weight:700;
  line-height:1.1;
}
.brand h1::after{
  content:'';
  display:block;
  width:4.6em;
  height:.3em;
  margin-top:.16em;
  border-radius:999px;
  background:var(--leaf);
  clip-path:polygon(0 46%, 100% 0, 100% 100%, 0 86%);
}
.brand p{ margin:.45em 0 0; font-size:.8rem; color:var(--ink-soft); }

.tools{ display:flex; gap:8px; }
.icon-btn{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:2px solid var(--ink);
  border-radius:14px;
  background:var(--tile);
  color:var(--ink);
  box-shadow:0 3px 0 var(--ink);
  cursor:pointer;
}
.icon-btn .ico{ width:22px; height:22px; }
.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(8px,2vw,12px);
  font-size:.8rem;
}
.hud__level{
  font-weight:700;
  padding:.3em .7em;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--mustard);
  white-space:nowrap;
}
.bar{
  flex:1;
  height:12px;
  min-width:60px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--tile);
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  width:0%;
  background:var(--leaf);
  border-radius:999px;
  transition:width .25s var(--ease);
}
.hud__berry{ font-variant-numeric:tabular-nums; color:var(--ink-soft); white-space:nowrap; }
.hud__berry b{ color:var(--ink); font-size:1.05rem; }
.lives{ display:flex; gap:3px; }
.lives svg{ width:20px; height:20px; }

/* ---------- stage ---------- */
.stage{
  position:relative;
  display:grid;
  place-items:center;
}
#board{
  display:block;
  border:3px solid var(--ink);
  border-radius:20px;
  background:oklch(98.6% 0.016 86);
  box-shadow:0 5px 0 var(--ink);
  touch-action:none;
}
.stage.is-shaking #board{ animation:shake .38s var(--ease); }

.overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:12px;
  z-index:5;
  border-radius:20px;
  background:oklch(96.6% 0.024 84 / .78);
  backdrop-filter:blur(3px);
  animation:fade .25s var(--ease);
}
.overlay[hidden]{ display:none; }
.overlay__card{
  width:min(100%, 330px);
  padding:clamp(16px,4vw,24px);
  text-align:center;
  background:var(--tile);
  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:.78rem; letter-spacing:.16em; color:var(--ink-soft); }
.overlay__title{ margin:.25em 0 .5em; font-size:clamp(1.3rem,5.6vw,1.7rem); font-weight:700; }
.overlay__text{ margin:0 0 1em; font-size:.86rem; line-height:1.6; color:var(--ink-soft); }
.legend{
  list-style:none;
  margin:0 0 1.1em;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5em;
  text-align:left;
  font-size:.8rem;
  color:var(--ink-soft);
}
.legend li{ display:flex; align-items:center; gap:.6em; }
.dot{ width:14px; height:14px; flex:none; }
.dot--berry{ border-radius:50%; background:var(--mustard); border:2px solid var(--ink); }
.dot--power{ border-radius:50%; background:var(--berry); border:2px solid var(--ink); }
.dot--ghost{ background:var(--terracotta); border:2px solid var(--ink); border-radius:7px 7px 3px 3px; }

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

/* ---------- d-pad ---------- */
.pad{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:8px;
  width:min(240px, 62vw);
  margin:0 auto;
  touch-action:none;
}
.pad__btn{
  display:grid;
  place-items:center;
  aspect-ratio:1.35;
  border:2.5px solid var(--ink);
  border-radius:16px;
  background:var(--tile);
  color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
  cursor:pointer;
  user-select:none;
}
.pad__btn svg{ width:30px; height:30px; }
.pad__btn:active,
.pad__btn.is-down{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); background:var(--mustard); }
.pad__btn--up{ grid-area:1/2; }
.pad__btn--left{ grid-area:2/1; }
.pad__btn--down{ grid-area:2/2; }
.pad__btn--right{ grid-area:2/3; }

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

/* ---------- parent notes ---------- */
.parent{
  border-top:2px dashed oklch(29% 0.034 62 / .25);
  padding-top:10px;
  font-size:.8rem;
  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:.5em; }
.parent__body p{ margin:.4em 0; line-height:1.65; }
.parent__body ul{ margin:.4em 0; padding-left:1.1em; line-height:1.7; }
.parent__body b{ color:var(--ink); }

/* ---------- keyframes ---------- */
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-7px) rotate(-.6deg); }
  60%{ transform:translateX(6px) rotate(.5deg); }
  85%{ transform:translateX(-2px); }
}
@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 (orientation: landscape) and (max-height: 620px){
  .app{
    width:min(100%, 900px);
    display:grid;
    grid-template-columns:auto minmax(180px, 260px);
    grid-template-areas:
      "top   top"
      "hud   hud"
      "stage side"
      "stage hint"
      "stage parent";
    align-items:start;
    gap:10px 16px;
  }
  .top{ grid-area:top; }
  .hud{ grid-area:hud; }
  .stage{ grid-area:stage; }
  .pad{ grid-area:side; width:100%; align-self:center; }
  .hint{ grid-area:hint; }
  .parent{ grid-area:parent; }
}