:root {
  --ink: #1c3048;
  --cream: #fff4d6;
}

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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #14384c;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-family: "Fredoka", "Noto Sans Khmer", "Khmer OS Content", "Leelawadee UI", sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

button {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}

.is-off {
  display: none !important;
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

@media (orientation: landscape) {
  #stage {
    width: min(100%, calc(100dvh * 9 / 16));
    height: 100%;
  }
}

.bg-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.cloud {
  position: absolute;
  opacity: 0.7;
}

.cloud.c1 {
  width: 58%;
  top: 8%;
  left: -20%;
  animation: drift 32s linear infinite;
}

.cloud.c2 {
  width: 44%;
  top: 28%;
  left: 40%;
  animation: drift 40s linear infinite reverse;
}

.cloud.c3 {
  width: 36%;
  top: 62%;
  left: 10%;
  animation: drift 36s linear infinite;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(70%, 8%, 0); }
}

.screen,
.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.overlay {
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay .veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.65);
}

.overlay.is-in .veil {
  animation: veil-in 0.3s ease-out forwards;
}

@keyframes veil-in {
  from { opacity: 0; }
  to { opacity: 0.55; }
}

.home-score {
  position: absolute;
  top: calc(3.2% + env(safe-area-inset-top));
  left: 5%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.8% 3.2% 2.2%;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: calc(var(--w, 390px) * 0.04);
  background: rgba(35, 143, 174, 0.82);
  box-shadow: 0 4px 0 rgba(22, 78, 105, 0.3);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(20, 68, 89, 0.35);
  font-size: calc(var(--w, 390px) * 0.04);
}

.home-score span {
  white-space: nowrap;
}

.home-score strong {
  margin-top: 0.08em;
  font-size: calc(var(--w, 390px) * 0.072);
}

.lang-row {
  position: absolute;
  top: calc(2.4% + env(safe-area-inset-top));
  right: 3%;
  z-index: 5;
  display: flex;
  gap: 6px;
  display: none;
}

.lang-btn {
  width: calc(var(--w, 390px) * 0.125);
}

.lang-btn img,
.icon-btn img {
  width: 100%;
  height: auto;
}

.logo {
  position: absolute;
  top: 16%;
  left: 8%;
  width: 84%;
  z-index: 4;
}

.home-balloons {
  position: absolute;
  inset: 32% 0 4% 0;
  z-index: 3;
}

.hb {
  position: absolute;
  height: auto;
  padding: 0;
}

.hb-bob {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  transform-origin: 50% 10%;
}

.hb-bob > img:first-of-type {
  height: auto;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.hb-play {
  left: 20%;
  top: 0;
  width: 60%;
  z-index: 5;
}

.hb-play .hb-bob {
  animation: bob 3.2s ease-in-out infinite;
}

.hb-green {
  left: 1%;
  top: 58%;
  width: 32%;
  z-index: 3;
}

.hb-hit {
  display: block;
  width: 100%;
  height: 100%;
}

.hb-green .hb-bob {
  animation: bob 3.7s ease-in-out infinite 0.3s;
}

.hb-green:active .hb-bob {
  animation-play-state: paused;
  transform: scale(0.91);
}

.hb-purple {
  right: 1%;
  top: 58%;
  width: 32%;
  z-index: 4;
  cursor: pointer;
}

.hb-purple .hb-bob {
  animation: bob 3.4s ease-in-out infinite 0.6s;
}

.hb-yellow {
  left: 34%;
  right: auto;
  top: 58%;
  width: 32%;
  z-index: 2;
  cursor: pointer;
}

.hb-yellow .hb-bob {
  animation: bob 4s ease-in-out infinite 0.15s;
}

.hb-menu-icon,
.hb-menu-label {
  position: absolute;
  left: -22%;
  right: -22%;
  z-index: 2;
  color: #fff;
  text-align: center;
  font-weight: 700;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
}

.hb-menu-icon { top: 18%; font-size: calc(var(--w, 390px) * 0.082); }
.hb-menu-label { top: 48%; font-size: calc(var(--w, 390px) * 0.038); white-space: nowrap; }
.hb-yellow:active .hb-bob,
.hb-purple:active .hb-bob { animation-play-state: paused; transform: scale(0.92); }

.hb-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  text-align: center;
  font-size: calc(var(--w, 390px) * 0.095);
  font-weight: 700;
  color: var(--cream);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.28em 0 rgba(20, 40, 60, 0.22);
  pointer-events: none;
}

.hb-inf {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 38%;
  transform: translateX(-50%);
  pointer-events: none;
}

.hb-play:active .hb-bob {
  animation-play-state: paused;
  transform: scale(0.96);
}

.home-audio {
  position: absolute;
  right: 3%;
  bottom: calc(2.5% + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  gap: 8px;
  padding: 1.6%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: calc(var(--w, 390px) * 0.045);
  background: rgba(255, 255, 255, 0.2);
  display: none;
}

.hb-endless-label {
  position: absolute;
  left: -18%;
  right: -18%;
  top: 48%;
  color: #ffffff;
  font-size: calc(var(--w, 390px) * 0.048);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(18, 72, 52, 0.3);
  pointer-events: none;
}

.icon-btn {
  width: calc(var(--w, 390px) * 0.125);
}

.img-btn:active,
.icon-btn:active,
.lang-btn:active {
  transform: scale(0.96);
}

@keyframes bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

.hud {
  position: absolute;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 3% 4% 0;
  pointer-events: none;
}

.hud button {
  pointer-events: auto;
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.5%;
}

.eq-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 4.5%;
  gap: 2.2%;
}

.eq-wrap.is-wrong-answer {
  animation: wrong-equation 1.5s ease-out both;
}

.eq-wrap.is-wrong-answer .eq-op,
.eq-wrap.is-wrong-answer .eq-slot.is-fill span,
.eq-wrap.is-wrong-answer .eq-goal span {
  color: #ff6b72;
}

.eq-wrap.is-wrong-answer .eq-goal {
  filter: drop-shadow(0 0 7px rgba(255, 87, 96, 0.75));
}

@keyframes wrong-equation {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.1); }
  18% { transform: scale(1.03) translateX(-2%); }
  26% { transform: scale(1.03) translateX(2%); }
  34% { transform: scale(1.03) translateX(-1%); }
  45%, 82% { transform: scale(1.03); }
}

.lv-wrap img,
.eq-slot img,
.eq-goal img {
  width: 100%;
  height: auto;
}

.eq-slot {
  position: relative;
  width: calc(var(--w, 390px) * 0.105);
  flex-shrink: 0;
}

.eq-slot:not(.is-fill) {
  animation: slot-wait 1.5s ease-in-out infinite;
}

@keyframes slot-wait {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.eq-slot span {
  position: absolute;
  inset: 0 0 8% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--w, 390px) * 0.047);
  font-weight: 700;
  color: #5a7388;
}

.eq-slot.is-fill span {
  color: var(--cream);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}

.eq-op {
  margin: 0;
  color: var(--cream);
  font-weight: 700;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  line-height: 1;
  font-size: calc(var(--w, 390px) * 0.064);
}

.eq-goal {
  position: relative;
  width: calc(var(--w, 390px) * 0.235);
  flex-shrink: 0;
}

.eq-goal span {
  position: absolute;
  inset: 0 4% 10% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: calc(var(--w, 390px) * 0.061);
  font-weight: 700;
  color: var(--ink);
}

.hearts {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

.hearts img {
  width: calc(var(--w, 390px) * 0.064);
  height: auto;
}

.lv-wrap {
  position: relative;
  width: calc(var(--w, 390px) * 0.16);
  aspect-ratio: 1.55;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 30%;
}

.lv-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hud-pause {
  width: calc(var(--w, 390px) * 0.115);
  flex-shrink: 0;
}

.lv-label {
  position: absolute;
  inset: 0 2% 10% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--cream);
  gap: 0.12em;
  font-size: calc(var(--w, 390px) * 0.037);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lv-prefix {
  font-size: 0.62em;
  letter-spacing: 0.04em;
  opacity: 0.92;
}

#field {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.howto {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.howto p {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 8%;
  margin: 0;
  text-align: center;
  font-size: calc(var(--w, 390px) * 0.055);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

#howto-hand {
  position: absolute;
  width: 22%;
  animation: tap-hand 1s ease-in-out infinite;
  transform-origin: 20% 10%;
  z-index: 5;
}

@keyframes tap-hand {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-18deg); }
  50% { transform: translate3d(-6%, 8%, 0) rotate(-18deg); }
}

.balloon-fly {
  position: absolute;
  width: 24%;
  animation: pop-in 0.32s ease-out both;
}

.balloon-sway {
  position: relative;
  width: 100%;
  animation: float-bob 3.2s ease-in-out infinite;
  transform-origin: 50% 80%;
}

.balloon-fly.is-still {
  animation: pop-in 0.28s ease-out both;
  width: 28%;
}

.balloon-fly.is-still .balloon-sway {
  animation: balloon-alive 3.4s ease-in-out infinite;
}

.balloon-fly.is-still:nth-child(2n) .balloon-sway {
  animation-delay: -1.1s;
}

.balloon-fly.is-still:nth-child(3n) .balloon-sway {
  animation-delay: -2.2s;
}

@keyframes balloon-alive {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.8deg) scale(1); }
  50% { transform: translate3d(0, -3%, 0) rotate(0.8deg) scale(1.015); }
}

#field.hitstop .balloon-sway {
  animation-play-state: paused;
}

.balloon-sway img.balloon-body {
  width: 100%;
  height: auto;
  transition: filter 0.18s ease, transform 0.18s ease;
}

.balloon-num {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  height: 72%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--w, 390px) * 0.08);
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transition: transform 0.18s ease;
}

#field.grid-2 .balloon-num {
  font-size: calc(var(--w, 390px) * 0.068);
}

#field.grid-3 .balloon-num {
  font-size: calc(var(--w, 390px) * 0.062);
}

#field.grid-4 .balloon-num {
  font-size: calc(var(--w, 390px) * 0.052);
}

#field.grid-5 .balloon-num {
  font-size: calc(var(--w, 390px) * 0.044);
}

.balloon-glow {
  position: absolute;
  left: -8%;
  top: -6%;
  width: 116%;
  display: none;
}

.balloon-fly.is-on .balloon-body {
  transform: scale(1.035);
  filter:
    drop-shadow(0 0 2px #fff8c9)
    drop-shadow(0 0 5px #ffe36c)
    drop-shadow(0 0 8px rgba(255, 211, 62, 0.8));
}

.balloon-fly.is-on .balloon-num {
  transform: scale(1.04);
}

.balloon-fly.is-correct .balloon-body {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 3px #ffffff)
    drop-shadow(0 0 7px #75ef8c)
    drop-shadow(0 0 12px rgba(42, 197, 93, 0.8));
}

.balloon-fly.is-pop .balloon-sway {
  animation: pop-burst 0.48s ease-out forwards;
}

.balloon-fly.is-wrong .balloon-sway {
  animation: shake 0.65s ease-in-out;
}

.fx-pop {
  position: absolute;
  left: -10%;
  top: -8%;
  width: 120%;
  opacity: 0;
  pointer-events: none;
}

.balloon-fly.is-pop .fx-pop {
  animation: fx-in 0.48s ease-out forwards;
}

.correct-badge {
  position: absolute;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.28em;
  padding: 0.2em 0.55em 0.28em;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(#66df7c, #2fbd5b);
  color: #ffffff;
  font-size: calc(var(--w, 390px) * 0.052);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 0 rgba(17, 91, 58, 0.35), 0 0 14px rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -70%) scale(0.5);
  animation: correct-show 1.05s ease-out forwards;
}

.correct-check {
  display: grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #ffffff;
  color: #28aa52;
  line-height: 1;
}

@keyframes correct-show {
  0% { opacity: 0; transform: translate(-50%, -45%) scale(0.5); }
  18% { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
  32%, 72% { opacity: 1; transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -105%) scale(0.94); }
}

.float-pts {
  position: absolute;
  font-size: calc(var(--w, 390px) * 0.07);
  font-weight: 700;
  color: var(--cream);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
  animation: rise-fade 0.7s ease-out forwards;
  z-index: 6;
}

@keyframes pop-in {
  from { transform: scale(0.45); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes float-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(5deg); }
}

@keyframes pop-burst {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.28); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10%); }
  75% { transform: translateX(10%); }
}

@keyframes fx-in {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes rise-fade {
  from { transform: translate(-50%, 0); opacity: 1; }
  to { transform: translate(-50%, -80px); opacity: 0; }
}

.panel {
  position: relative;
  width: 78%;
  z-index: 2;
}

.home-veil { background: rgba(21, 65, 88, 0.68); }

.home-modal {
  position: relative;
  z-index: 2;
  width: 82%;
  padding: 8% 7% 7%;
  border: 4px solid #fff;
  border-radius: 9%;
  background: linear-gradient(#fafdff, #dff5ff);
  box-shadow: 0 8px 0 rgba(22, 75, 101, 0.38);
  color: var(--ink);
  text-align: center;
}

.overlay.is-in .home-modal { animation: card-pop 0.42s cubic-bezier(0.18, 1.45, 0.32, 1) both; }
.home-modal-close { position: absolute; top: 3%; right: 3%; width: 13%; }
.home-modal-icon { display: grid; place-items: center; width: 24%; aspect-ratio: 1; margin: -18% auto 2%; border: 4px solid var(--ink); border-radius: 50%; color: #fff; font-size: calc(var(--w, 390px) * 0.09); font-weight: 700; }
.home-modal-icon.yellow { background: #ffd83d; }
.home-modal-icon.purple { background: #a846ef; }
.home-modal h1 { margin: 2% 12% 7%; font-size: calc(var(--w, 390px) * 0.065); }
.howto-steps { display: grid; gap: 12px; text-align: left; }
.howto-steps p { display: flex; align-items: center; gap: 4%; margin: 0; font-size: calc(var(--w, 390px) * 0.037); line-height: 1.4; }
.howto-steps b { display: grid; place-items: center; flex: 0 0 2em; height: 2em; border-radius: 50%; background: #27abc5; color: #fff; }
.settings-list { display: grid; gap: 10px; }
.settings-list button { display: grid; grid-template-columns: 1.2fr 3fr 1.5fr; align-items: center; padding: 3% 4%; border: 2px solid #a9d8e8; border-radius: 999px; background: #fff; color: var(--ink); font-size: calc(var(--w, 390px) * 0.04); }
.settings-list em { padding: 0.25em 0.4em; border-radius: 999px; background: #31b767; color: #fff; font-style: normal; font-size: 0.8em; }

.pause-card {
  width: 72%;
}

.overlay.is-in .pause-card {
  animation: card-pop 0.46s cubic-bezier(0.18, 1.45, 0.32, 1) both;
}

@keyframes card-pop {
  0% { transform: scale(0.68) translateY(28px); opacity: 0; }
  72% { transform: scale(1.05) translateY(-6px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.pause-deco {
  position: absolute;
  width: 16%;
  z-index: 3;
  pointer-events: none;
}

.pause-deco.d1 {
  top: 5%;
  left: 7%;
  animation: deco-bob 2.8s ease-in-out infinite;
}

.pause-deco.d2 {
  top: 5%;
  right: 7%;
  animation: deco-bob-flip 3.2s ease-in-out 0.35s infinite;
}

@keyframes deco-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes deco-bob-flip {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-12px); }
}

.pop-close {
  position: absolute;
  top: -3%;
  right: -4%;
  z-index: 4;
  pointer-events: auto;
  width: calc(var(--w, 390px) * 0.115);
}

.overlay.is-in .pop-close {
  animation: stamp-pop 0.4s 0.14s cubic-bezier(0.2, 1.5, 0.35, 1) backwards;
}

.pause-body {
  inset: 7% 10% 8%;
  gap: 3.5%;
}

.pause-stamp {
  width: 36%;
  height: auto;
}

.overlay.is-in .pause-stamp {
  animation: stamp-pop 0.55s 0.1s cubic-bezier(0.2, 1.55, 0.35, 1) both;
}

@keyframes stamp-pop {
  0% { transform: scale(0) rotate(-20deg); }
  70% { transform: scale(1.14) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

.pause-title {
  margin: 0 0 1% 0;
  font-size: calc(var(--w, 390px) * 0.055);
  font-weight: 500;
  color: var(--ink);
  -webkit-text-stroke: 0;
  line-height: 1.1;
}

.overlay.is-in .pause-title {
  animation: title-in 0.32s 0.2s ease-out both;
}

.pop-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 5%;
  width: 100%;
}

.pop-actions .img-btn {
  flex: 1;
  width: auto;
  min-width: 0;
}

.pop-actions .img-btn span,
.pop-actions .img-btn.secondary span {
  font-size: calc(var(--w, 390px) * 0.048);
  font-weight: 500;
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: none;
  paint-order: normal;
}

.overlay.is-in .pop-actions {
  animation: btn-in 0.36s 0.24s ease-out backwards;
}

@keyframes title-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes btn-in {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.panel-bg {
  width: 100%;
  height: auto;
}

.panel-body {
  position: absolute;
  inset: 12% 10% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3%;
}

.pause-body {
  inset: 7% 10% 8%;
  gap: 3.5%;
}

.panel-bg {
  width: 100%;
  height: auto;
}

.panel-body {
  position: absolute;
  inset: 12% 10% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3%;
}

.img-btn {
  position: relative;
  width: 100%;
}

.img-btn img {
  width: 100%;
}

.img-btn span {
  position: absolute;
  inset: 0 0 8% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--w, 390px) * 0.07);
  font-weight: 700;
  color: var(--cream);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
}

.img-btn.secondary span {
  font-size: calc(var(--w, 390px) * 0.055);
}

.overlay.is-in .over-stamp {
  animation: stamp-sad 0.55s 0.1s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

@keyframes stamp-sad {
  0% { transform: scale(0.4) rotate(-14deg); opacity: 0; }
  58% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  76% { transform: translateX(-5%) rotate(-5deg); }
  90% { transform: translateX(4%) rotate(3deg); }
  100% { transform: none; }
}

.over-score-wrap {
  position: relative;
  width: 48%;
}

.over-score-wrap img {
  width: 100%;
  height: auto;
}

.over-score-wrap strong {
  position: absolute;
  inset: 0 0 10% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--w, 390px) * 0.07);
  font-weight: 700;
  color: var(--ink);
}

.over-best {
  margin: 0;
  font-size: calc(var(--w, 390px) * 0.04);
  font-weight: 700;
  color: var(--ink);
}

#field .confetti {
  position: absolute;
  width: 4.5%;
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  animation: bit 0.75s cubic-bezier(0.12, 0.7, 0.28, 1) forwards;
}

@keyframes bit {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  }
  14% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx) * 0.28), calc(-50% + var(--dy) * 0.18 - 18px)) scale(var(--scale)) rotate(calc(var(--rot) * 0.25));
  }
  72% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(calc(var(--scale) * 0.72)) rotate(var(--rot));
  }
}

.levels-panel {
  position: relative;
  width: 88%;
  z-index: 2;
}

.levels-ui {
  position: absolute;
  inset: 4% 5% 5%;
}

.levels-title {
  margin: 0;
  text-align: center;
  font-size: calc(var(--w, 390px) * 0.07);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
}

.levels-close {
  position: absolute;
  top: -1%;
  right: -1%;
  z-index: 3;
}

.levels-grid {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 14%;
  bottom: 2%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 24%;
  align-items: center;
  justify-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1% 1% 4%;
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.levels-grid::-webkit-scrollbar { display: none; }

.lv {
  position: relative;
  width: 86%;
  padding: 0;
}

.lv-body {
  width: 100%;
  height: auto;
}

.lv-ring {
  position: absolute;
  left: -8%;
  top: -6%;
  width: 116%;
  opacity: 0;
  pointer-events: none;
}

.lv.is-pick .lv-ring {
  opacity: 1;
}

.lv span {
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  height: 72%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--w, 390px) * 0.052);
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
}

.lv.is-lock span {
  color: #6a7680;
}

.lv:active .lv-body {
  transform: scale(0.94);
}

.lv.is-lock:active .lv-body {
  animation: shake 0.32s ease-in-out;
}