:root {
  --ink: #26294a;
  --paper: #fbf8ef;
  --rule: rgba(90, 140, 220, 0.28);
  --margin: rgba(230, 70, 80, 0.45);
  --hand: "Segoe Print", "Comic Sans MS", "Marker Felt", "Chalkboard SE", cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--paper);
  font-family: var(--hand); color: var(--ink);
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
}

#canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* Hand-drawn button: irregular border radius + offset "shadow" stroke */
.sk-btn {
  font-family: var(--hand); font-size: 18px; font-weight: bold; color: var(--ink);
  background: #fff; border: 2.5px solid var(--ink); padding: 8px 16px; cursor: pointer;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .08s;
}
.sk-btn:hover { transform: rotate(-1deg) scale(1.03); }
.sk-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.sk-btn.small { font-size: 14px; padding: 5px 10px; }
.sk-btn.alt { background: #b9f6ca; }
.sk-btn.ghost { background: transparent; box-shadow: none; }

/* icons */
.ic { display: block; width: 100%; height: 100%; overflow: visible; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 64px; height: 56px; padding: 0; color: var(--ink); --ic: 34px;
}
.icon-btn .ic { flex: none; width: var(--ic); height: var(--ic); }
.icon-btn.small { width: 44px; height: 40px; --ic: 24px; }
.icon-btn.big { width: 96px; height: 64px; --ic: 42px; }
.icon-btn.wide { width: 96px; --ic: 32px; }
.icon-btn.ad { background: #ffd60a; }

.corner { position: fixed; top: 10px; left: 10px; z-index: 20; }
.corner.right { left: auto; right: 10px; }

.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.overlay.dim { background: rgba(38, 41, 74, 0.35); z-index: 30; }

.sheet {
  position: relative; width: 100%; min-width: 0; max-width: 640px; max-height: 100%; display: flex; flex-direction: column;
  background:
    linear-gradient(90deg, transparent 38px, var(--margin) 38px, var(--margin) 40px, transparent 40px),
    repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px),
    var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 6px 18px 8px 22px / 20px 6px 24px 8px;
  box-shadow: 6px 6px 0 rgba(38, 41, 74, 0.85);
  padding: 14px 16px 12px 52px;
  transform: rotate(-0.4deg);
}


/* ---- level map ---- */
.menu-sheet { max-width: 880px; padding-top: 12px; padding-bottom: 10px; }
.menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.logo { width: clamp(150px, 26vw, 220px); animation: title-in .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.logo-svg { display: block; width: 100%; height: auto; }
@keyframes title-in { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.total {
  flex: none; display: flex; align-items: center; gap: 6px; font-size: 22px; padding: 4px 12px 4px 8px; background: #fff;
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  border-radius: 16px 6px 18px 5px / 6px 18px 5px 16px; transform: rotate(4deg);
}
.total .ic { width: 30px; height: 30px; animation: spin-star 4s ease-in-out infinite; }
.hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; height: 34px; opacity: .8; }
.hint .ic { width: 34px; height: 34px; }
.hint .or { font-size: 22px; opacity: .6; }
.hint-hero { width: 28px; animation: hop 1s cubic-bezier(.3, 0, .7, 1) infinite; }
.hint-hero svg { display: block; width: 100%; }
@keyframes spin-star { 0%, 80% { transform: rotate(0); } 90% { transform: rotate(72deg) scale(1.3); } 100% { transform: rotate(144deg); } }

.menu-body { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.map {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto; row-gap: 34px; column-gap: 8px; padding: 34px 4px 16px;
}
.trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail path { fill: none; stroke-linecap: round; }
.t-dash { stroke: rgba(38, 41, 74, .35); stroke-width: 3; stroke-dasharray: 2 9; }
.t-solid { stroke: var(--ink); stroke-width: 3.5; stroke-dasharray: 14 7; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -21; } }

.node {
  position: relative; justify-self: center; width: 100%; max-width: 74px; padding: 0; border: none;
  background: none; cursor: pointer; font-family: var(--hand); color: var(--ink);
  animation: node-in .45s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: var(--d);
}
.node:nth-child(odd) { margin-top: 10px; }
@keyframes node-in { from { transform: scale(0) rotate(-30deg); } }
.cube {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%;
  background:
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, .45) 6px 9px),
    var(--c);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  border-radius: 10px 4px 12px 5px / 5px 12px 4px 10px;
  transition: transform .15s cubic-bezier(.3, 1.8, .5, 1), box-shadow .15s;
}
.node:nth-child(even) .cube { border-radius: 4px 12px 5px 10px / 12px 4px 10px 5px; transform: rotate(3deg); }
.node:nth-child(odd) .cube { transform: rotate(-3deg); }
.num {
  font-size: clamp(22px, 4.6vw, 34px); font-weight: bold; line-height: 1;
  text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
}
.node:hover .cube { transform: rotate(0) scale(1.08); }
.node:active .cube { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.node.sel .cube { transform: rotate(0) scale(1.14); box-shadow: 5px 5px 0 var(--ink), 0 0 0 5px #fff, 0 0 0 8px var(--ink); }
.node.locked .cube { background: repeating-linear-gradient(-45deg, #e9e6dc 0 6px, #d6d2c4 6px 9px); }
.node.locked .cube .ic { width: 52%; height: 52%; color: var(--ink); }
.node.current:not(.sel) .cube { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(1.07) rotate(0); } }

.grade {
  position: absolute; right: -10px; top: -12px; width: 30px; height: 30px; padding: 4px; color: #2a9d55; background: #fff;
  border: 2.5px solid #2a9d55; border-radius: 50% 45% 52% 48% / 48% 52% 45% 50%;
  transform: rotate(12deg); animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d) + .35s);
}
@keyframes stamp { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } }
.pct {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%) rotate(-2deg);
  font-size: 13px; font-weight: bold; background: #fff; padding: 0 5px; border: 2px solid var(--ink); border-radius: 6px;
}
.hero {
  position: absolute; left: 50%; top: -34px; width: 34px; margin-left: -17px; pointer-events: none;
  animation: hop 1s cubic-bezier(.3, 0, .7, 1) infinite;
}
.hero svg { display: block; width: 100%; }
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1.1, .9); }
  15% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) rotate(90deg); }
  85% { transform: translateY(0) rotate(180deg); }
}

/* sticky note with the selected level */
.card { min-width: 0; display: flex; justify-content: center; }
.note {
  position: relative; width: 100%; max-width: 420px; padding: 18px 16px 14px;
  background: #fff6a8; border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 rgba(38, 41, 74, .85);
  border-radius: 3px 3px 22px 3px / 3px 3px 14px 3px; transform: rotate(-1.2deg);
}
.note::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 22px; margin-left: -45px;
  background: color-mix(in srgb, var(--c) 55%, transparent); border: 1.5px dashed rgba(38, 41, 74, .4);
  transform: rotate(3deg);
}
.card.pop .note { animation: note-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes note-pop { from { transform: rotate(-6deg) scale(.85); opacity: .3; } }
.note-top { display: flex; align-items: center; gap: 12px; }
.face { width: clamp(64px, 14vw, 92px); flex: none; animation: wobble 2.4s ease-in-out infinite; }
.face svg { display: block; width: 100%; }
@keyframes wobble { 50% { transform: rotate(-5deg) translateY(-3px); } }
.badge {
  position: relative; display: grid; place-items: center; width: clamp(56px, 11vw, 76px); aspect-ratio: 1;
  background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, .45) 6px 9px), var(--c);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(4deg);
  border-radius: 10px 4px 12px 5px / 5px 12px 4px 10px;
}
.badge .num { font-size: clamp(30px, 6vw, 44px); }
.badge .grade { --d: 0s; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bar { display: flex; align-items: center; gap: 8px; }
.bar > .ic { flex: none; width: 26px; height: 26px; }
.pbar {
  position: relative; flex: 1; height: 20px; background: #fff; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px;
}
.pbar i { position: absolute; inset: 0 auto 0 0; transition: width .6s ease-out; }
.bar.normal i { background: repeating-linear-gradient(-45deg, #57cc99 0 5px, #b9f6ca 5px 8px); }
.bar.practice i { background: repeating-linear-gradient(-45deg, #4cc9f0 0 5px, #c4f1ff 5px 8px); }
.pbar b { position: relative; display: block; text-align: center; font-size: 13px; line-height: 16px; }
.actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sk-btn.play {
  width: 110px; height: 66px; --ic: 44px; background: #80ed99;
  animation: play-pulse 1.4s ease-in-out infinite;
}
@keyframes play-pulse { 50% { transform: scale(1.07) rotate(-1.5deg); } }
.sk-btn.play:hover { animation: none; transform: scale(1.1) rotate(-2deg); }
.sk-btn.practice { background: #c4f1ff; }
.sk-btn.ad[data-action] { width: 110px; height: 66px; --ic: 48px; animation: play-pulse 1.4s ease-in-out infinite; }
.lock-big { width: 52px; height: 52px; }
.card.locked .note-top, .card.locked .bars { filter: grayscale(.8); opacity: .75; }
.card.locked .face { animation: none; }

/* wide screens and landscape phones: map on the left, note on the right */
@media (min-width: 540px) and (min-aspect-ratio: 4/3) {
  .menu-body { flex-direction: row; align-items: center; gap: 18px; }
  .map { flex: 1.5; min-width: 0; }
  .card { flex: 1; }
}
@media (max-height: 520px) {
  .hint { display: none; }
  .menu-sheet { padding-top: 8px; padding-bottom: 8px; }
  .logo { width: clamp(120px, 30vh, 170px); }
  .total { font-size: 17px; padding: 2px 10px 2px 6px; }
  .total .ic { width: 24px; height: 24px; }
  .node { max-width: min(74px, 14.5vh); }
  .map { row-gap: 26px; padding: 30px 4px 12px; }
  .note { padding: 12px 12px 10px; }
  .face { width: 52px; }
  .badge { width: 54px; }
  .bars { margin-top: 6px; gap: 4px; }
  .pbar { height: 18px; }
  .pbar b { line-height: 14px; }
  .actions { margin-top: 8px; gap: 8px; }
  .sk-btn.play, .sk-btn.ad[data-action] { width: 92px; height: 54px; --ic: 38px; }
  .icon-btn.practice { width: 56px; height: 48px; }
}

/* keep the star counter clear of the fixed sound button when the sheet reaches the screen edge */
@media (max-width: 1000px) {
  .total { margin-right: 46px; }
}
/* landscape phones: tighter map so the whole menu fits in ~320px of height */
@media (min-width: 540px) and (min-aspect-ratio: 4/3) and (max-height: 520px) {
  .menu-head { margin-bottom: -6px; }
  .map { row-gap: 22px; padding: 26px 0 8px; column-gap: 4px; }
  .node { max-width: min(64px, 15vh); }
  .num { font-size: clamp(18px, 6vh, 28px); }
  .card { flex: 1; max-width: 260px; }
  .note-top { gap: 8px; }
  .face { width: 44px; }
  .badge { width: 46px; }
  .badge .num { font-size: 26px; }
}
@media (min-width: 540px) and (min-aspect-ratio: 4/3) and (max-height: 340px) {
  .note::before { display: none; }
}

.dialog { max-width: 480px; align-items: center; padding: 18px 20px 20px 52px; }
.d-icon { height: 70px; display: flex; justify-content: center; animation: title-in .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.d-icon > .ic { width: 70px; height: 70px; }
.d-stars { display: flex; align-items: flex-end; gap: 4px; }
.d-stars .ic { width: 52px; height: 52px; animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.d-stars .ic:nth-child(2) { width: 70px; height: 70px; animation-delay: .15s; }
.d-stars .ic:nth-child(3) { animation-delay: .3s; }
.d-stars.all .ic { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both, spin-star 3s ease-in-out infinite; }
.d-info { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: 22px; min-height: 40px; }
.d-info > .ic { width: 32px; height: 32px; }
.lvl {
  display: grid; place-items: center; width: 40px; height: 40px; font-weight: bold; font-size: 22px; background: var(--c);
  border: 2.5px solid var(--ink); border-radius: 8px 3px 9px 4px / 4px 9px 3px 8px; transform: rotate(-4deg);
}
.mini-bar { position: relative; width: 90px; height: 16px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.mini-bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, #57cc99 0 5px, #b9f6ca 5px 8px); }
.hero-mini { width: 34px; }
.hero-mini svg { display: block; width: 100%; }
#dButtons.arming { pointer-events: none; opacity: .55; transition: opacity .2s; }
#dButtons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }

@media (max-width: 520px) {
  .sheet { padding-left: 40px; padding-right: 10px; background:
    linear-gradient(90deg, transparent 28px, var(--margin) 28px, var(--margin) 30px, transparent 30px),
    repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px), var(--paper); }
  .map { column-gap: 4px; }
  .total { font-size: 16px; }
  .grade { width: 24px; height: 24px; padding: 3px; right: -6px; top: -10px; }
  .hero { width: 28px; margin-left: -14px; top: -29px; }
}