/* 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(92.8% 0.034 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);
  --mustard:    oklch(84% 0.135 88);
  --teal:       oklch(58% 0.088 205);
  --berry:      oklch(61% 0.155 12);
  --board:      min(88vw, 52svh, 430px);
  --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(14px,3.4vw,26px);
  padding-top:max(clamp(14px,3.4vw,26px), env(safe-area-inset-top));
  padding-bottom:max(clamp(14px,3.4vw,26px), 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 82% -10%, oklch(84% 0.135 88 / .34), transparent 62%),
    radial-gradient(90% 70% at 4% 108%, oklch(62% 0.155 42 / .14), transparent 60%);
  background-size:22px 22px, auto, auto;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}

.app{
  width:min(100%, 540px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,2.6vw,18px);
}

/* ---------- header ---------- */
.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
}
.brand h1{
  margin:0;
  font-size:clamp(1.45rem, 6.2vw, 1.95rem);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.1;
}
.brand h1::after{
  content:'';
  display:block;
  width:5.4em;
  height:.32em;
  margin-top:.18em;
  border-radius:999px;
  background:var(--mustard);
  clip-path:polygon(0 42%, 100% 0, 100% 100%, 0 88%);
}
.brand p{
  margin:.5em 0 0;
  font-size:.82rem;
  color:var(--ink-soft);
  letter-spacing:.01em;
}

.meters{ display:flex; align-items:center; gap:clamp(8px,2vw,14px); }
.meter{ text-align:right; line-height:1.1; }
.meter span{
  display:block;
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.meter strong{
  font-size:clamp(1rem,4.2vw,1.22rem);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.meter strong em{
  font-style:normal;
  font-size:.62em;
  margin-left:.08em;
  color:var(--ink-soft);
}

.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; }

/* ---------- level chips ---------- */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  padding:9px 15px;
  display:flex;
  align-items:baseline;
  gap:.45em;
  border:2px solid var(--ink);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background-color .2s var(--ease);
}
.chip small{ font-size:.72em; font-weight:500; color:var(--ink-soft); }
.chip[aria-pressed="true"]{
  background:var(--mustard);
  box-shadow:0 3px 0 var(--ink);
  transform:translateY(-1px);
}
.chip[aria-pressed="true"] small{ color:var(--ink); }
.chips.is-nudged{ animation:nudge .6s var(--ease) 2; }

/* ---------- cue row ---------- */
.cue{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cue__text{
  margin:0;
  display:flex;
  align-items:center;
  gap:.6em;
  font-size:.86rem;
  color:var(--ink-soft);
}
.cue__text b{
  min-width:1.9em;
  padding:.1em .3em .16em;
  font-size:1.55rem;
  font-weight:700;
  line-height:1;
  text-align:center;
  color:var(--ink);
  background:var(--tile);
  border:2.5px solid var(--ink);
  border-radius:14px;
  box-shadow:0 3px 0 var(--ink);
  font-variant-numeric:tabular-nums;
}
.cue__text b.is-pulsing{ animation:pop .34s var(--ease); }

/* ---------- buttons ---------- */
.btn{
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:11px 18px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--tile);
  color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
  cursor:pointer;
  transition:transform .1s var(--ease), box-shadow .1s var(--ease);
}
.btn svg{ width:18px; height:18px; }
.btn--ghost{ padding:9px 14px; box-shadow:0 3px 0 var(--ink); }
.btn--primary{ background:var(--terracotta); color:oklch(98% 0.012 60); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }

/* ---------- board ---------- */
.stage{ position:relative; display:grid; place-items:center; }

.board{
  --n:3;
  display:grid;
  grid-template-columns:repeat(var(--n), 1fr);
  gap:calc(var(--board) * .022);
  width:var(--board);
  touch-action:manipulation;
}
.board.is-locked{ pointer-events:none; }

.tile{
  position:relative;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  font:inherit;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:calc(var(--board) / var(--n) * .46);
  color:var(--ink);
  background:var(--tile);
  border:3px solid var(--ink);
  border-radius:clamp(10px, calc(var(--board) / var(--n) * .18), 20px);
  box-shadow:0 calc(var(--board) * .011) 0 var(--ink);
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease),
             background-color .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
}
@media (hover:hover){
  .tile:hover:not(.is-done){ transform:translateY(-2px); }
}
.tile:active:not(.is-done){ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.tile:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }

.tile.is-done{
  background:var(--paper-deep);
  color:oklch(62% 0.03 70);
  box-shadow:0 2px 0 var(--ink);
  transform:translateY(3px) scale(.97);
  pointer-events:none;
}
.tile.is-done::after{
  content:'';
  position:absolute;
  top:7%; right:7%;
  width:26%; height:26%;
  background:var(--leaf);
  border:2px solid var(--ink);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.2 4.2L19 7' fill='none' stroke='%23231a12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:70%;
  background-position:center;
  background-repeat:no-repeat;
}
.tile.is-miss{ animation:shake .36s var(--ease); }
.tile.is-hint::before{
  content:'';
  position:absolute;
  inset:-7%;
  border:3px dashed var(--terracotta);
  border-radius:calc(clamp(10px, calc(var(--board) / var(--n) * .18), 20px) + 4px);
  animation:ring 1s var(--ease) infinite;
  pointer-events:none;
}

/* ---------- confetti ---------- */
.fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
}

/* ---------- win card ---------- */
.win{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:6;
  background:oklch(96.6% 0.024 84 / .72);
  backdrop-filter:blur(3px);
  animation:fade .3s var(--ease);
}
.win[hidden]{ display:none; }
.win__card{
  width:min(100%, 320px);
  padding:clamp(18px,4vw,26px);
  text-align:center;
  background:var(--tile);
  border:3px solid var(--ink);
  border-radius:26px;
  box-shadow:0 8px 0 var(--ink);
  animation:rise .42s var(--ease);
}
.win__kicker{
  margin:0;
  font-size:.84rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.win__time{
  margin:.3em 0 .5em;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.16em;
}
.win__time strong{
  font-size:clamp(2.6rem, 13vw, 3.4rem);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.win__time span{ font-size:.85rem; color:var(--ink-soft); }
.win__stars{ display:flex; justify-content:center; gap:6px; }
.win__stars svg{ width:30px; height:30px; }
.win__best{
  margin:.7em 0 1.1em;
  font-size:.82rem;
  color:var(--ink-soft);
  min-height:1.2em;
}
.win__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- tips + parent notes ---------- */
.tip{
  margin:0;
  text-align:center;
  font-size:.86rem;
  color:var(--ink-soft);
  min-height:1.5em;
  transition:color .2s var(--ease);
}
.tip.is-warn{ color:var(--berry); }

.parent{
  border-top:2px dashed oklch(29% 0.034 62 / .25);
  padding-top:10px;
  font-size:.82rem;
  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:.6em; }
.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); }
  22%{ transform:translateX(-6px) rotate(-1.4deg); }
  55%{ transform:translateX(5px) rotate(1.2deg); }
  80%{ transform:translateX(-2px); }
}
@keyframes ring{
  0%{ transform:scale(.94); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:scale(1.06); opacity:0; }
}
@keyframes pop{
  0%{ transform:scale(.86); }
  60%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to{ opacity:1; transform:none; }
}
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes nudge{
  0%,100%{ transform:translateX(0); }
  40%{ transform:translateX(5px); }
  70%{ transform:translateX(-3px); }
}

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