/* ==========================================================================
   Wembuno — game styles (hero, screens, gameplay, rewards)
   ========================================================================== */
html.stage-open, html.stage-open body { overflow: hidden; }
.app-page { background: var(--paper); }
#stage {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; color: var(--ink);
  background: var(--sky-deco), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  background-attachment: fixed;
}
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; }
.float-text {
  position: fixed; z-index: 950; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font: 900 1.7rem/1 var(--font-display); color: #fff;
  text-shadow: 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 4px 0 var(--ink);
  animation: float-up 1.1s ease-out forwards;
}
.ft-speedy { color: var(--sun); font-size: 1.2rem; }
.ft-hit { color: var(--coral); font-size: 2.2rem; }

/* ── Characters & art animation ─────────────────────────────────────── */
.svg-wrap { display: contents; }
.char, .boss, .isle, .critter, .crystal, .chest { display: block; width: 100%; height: auto; overflow: visible; }
.char .char-body { transform-box: fill-box; transform-origin: 50% 100%; animation: squish 2.8s ease-in-out infinite; }
.char .char-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.char-antenna-star { transform-box: fill-box; transform-origin: center; animation: twirl 3s ease-in-out infinite; }
.char-sparkles { animation: twinkle 1.2s ease-in-out infinite; }
.boss { transform-box: fill-box; transform-origin: 50% 100%; animation: boss-idle 2.6s ease-in-out infinite; }
.boss-gear { transform-box: fill-box; transform-origin: center; animation: spin 7s linear infinite; }
.isle-smoke { animation: smoke 3.2s ease-in-out infinite; }
.isle-star { transform-box: fill-box; transform-origin: center; animation: twirl 4s ease-in-out infinite; }

/* ── Home hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: var(--sky-deco), linear-gradient(180deg, var(--sky-top), var(--sky-mid) 58%, var(--sky-bottom));
}
.hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 70px; z-index: 1;
  background: var(--paper); border-top: 3px solid var(--ink); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cloud { position: absolute; left: 0; width: var(--w); height: calc(var(--w) * .34); background: #fff; border-radius: 999px; opacity: .92; animation: drift var(--d) linear infinite; animation-delay: var(--delay); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 52%; height: 150%; left: 14%; bottom: 28%; }
.cloud::after { width: 38%; height: 118%; right: 14%; bottom: 34%; }
.cloud.c1 { --w: 180px; --d: 70s; --delay: -10s; top: 12%; }
.cloud.c2 { --w: 120px; --d: 55s; --delay: -38s; top: 30%; opacity: .8; }
.cloud.c3 { --w: 240px; --d: 90s; --delay: -60s; top: 58%; opacity: .7; }
.cloud.c4 { --w: 90px; --d: 48s; --delay: -5s; top: 72%; opacity: .85; }
.cloud.c5 { --w: 150px; --d: 80s; --delay: -25s; top: 6%; opacity: .6; }
.spark { position: absolute; width: 22px; height: 22px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 2.4s ease-in-out infinite; }
.spark.s1 { top: 18%; left: 8%; }
.spark.s2 { top: 26%; right: 12%; width: 16px; height: 16px; animation-delay: -.8s; background: var(--sun); }
.spark.s3 { top: 62%; left: 14%; width: 14px; height: 14px; animation-delay: -1.4s; }
.spark.s4 { top: 10%; right: 34%; width: 12px; height: 12px; animation-delay: -2s; background: #ffd6e7; }
.spark.s5 { top: 50%; right: 6%; animation-delay: -.3s; }

.hero-hud { position: relative; z-index: 5; display: flex; align-items: center; gap: .5rem; width: 100%; max-width: 1200px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px 0; }
.hero-hud .brand { color: #fff; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 0 3px 0 var(--ink); margin-right: auto; }
.hero-hud .brand-name { display: inline; }
.hud-actions { display: flex; gap: .45rem; }
.lang-btn { font: 900 1rem var(--font); }
@media (max-width: 480px) {
  .hero-hud .brand-name { display: none; }
  .hero-hud .icon-btn { width: 46px; height: 46px; }
  .hero-hud .chip { min-height: 38px; font-size: .95rem; }
}

.hero-main { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1rem; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem 16px 5.5rem; }
.hero-scene { position: relative; width: 100%; max-width: 540px; margin: 0 auto; }
.hero-float { position: relative; animation: float 6s ease-in-out infinite; }
.hero-isle { display: block; }
#hero-buddy { position: absolute; left: 29%; width: 42%; bottom: 43%; }
.hero-copy { text-align: left; }
.logo { margin: 0; font: 900 clamp(3.4rem, 10vw, 6.4rem)/.92 var(--font-display); letter-spacing: -.02em; }
.logo-word { display: inline-flex; }
.logo-word .l {
  display: inline-block; color: var(--lc, #fff); animation: letter-bob 2.8s ease-in-out infinite;
  text-shadow: 4px 4px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 0 8px 0 var(--ink), 0 14px 0 rgba(42,35,86,.2);
}
.logo-word .l:nth-child(1) { --lc: #ffd23f; animation-delay: 0s; }
.logo-word .l:nth-child(2) { --lc: #ff8fb1; animation-delay: .1s; }
.logo-word .l:nth-child(3) { --lc: #7ef0c0; animation-delay: .2s; }
.logo-word .l:nth-child(4) { --lc: #ffffff; animation-delay: .3s; }
.logo-word .l:nth-child(5) { --lc: #c9b3ff; animation-delay: .4s; }
.logo-word .l:nth-child(6) { --lc: #ffb86b; animation-delay: .5s; }
.logo-word .l:nth-child(7) { --lc: #ffd23f; animation-delay: .6s; }
.logo-sub { display: block; width: fit-content; margin-top: .9rem; font: 900 clamp(1rem, 2.6vw, 1.4rem)/1.2 var(--font); letter-spacing: .02em; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .35em .95em; box-shadow: 0 4px 0 var(--ink); }
.tagline { margin: 1rem 0 0; font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 800; max-width: 32ch; background: rgba(255,255,255,.82); border-radius: 18px; padding: .5em .85em; display: inline-block; }
.btn-play {
  position: relative; display: inline-flex; align-items: center; gap: .35em; margin-top: 1.3rem;
  padding: .32em 1.2em .32em .5em; font: 900 clamp(2.4rem, 7.5vw, 3.8rem)/1 var(--font-display); color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #6ff4bb, #20bd79); border: 5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 9px 0 var(--ink), 0 18px 34px rgba(42,35,86,.28);
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 4px 0 var(--ink);
  animation: play-pulse 1.9s ease-in-out infinite; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-play::after { content: ""; position: absolute; inset: -12px; border-radius: 999px; border: 4px solid rgba(255,255,255,.85); animation: ring 1.9s ease-out infinite; pointer-events: none; }
.btn-play:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--ink); animation: none; }
.play-ico { display: grid; place-items: center; width: 1.15em; height: 1.15em; background: #fff; border: 4px solid var(--ink); border-radius: 50%; color: var(--mint-2); text-shadow: none; }
.play-ico svg { width: 52%; height: 52%; margin-left: 10%; }
.hero-quick { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.hero-quick a { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 92px; padding: .55rem .6rem .5rem; background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink); color: var(--ink); text-decoration: none; font-weight: 900; font-size: .92rem; transition: transform .1s; }
.hero-quick a:hover { transform: translateY(-2px); }
.hero-quick a:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.hero-quick svg { width: 38px; height: 38px; }
.hero-extras { display: grid; gap: .8rem; margin-top: 1.4rem; max-width: 470px; }
.hero-extras:empty { display: none; }
.continue-card { display: flex; align-items: center; gap: .7rem; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); padding: .45rem .8rem .45rem .45rem; text-decoration: none; color: var(--ink); text-align: left; }
.cc-art { width: 82px; flex: 0 0 auto; }
.cc-label { display: block; font-size: .85rem; font-weight: 800; color: var(--muted); }
.cc-text strong { font: 900 1.1rem/1.15 var(--font-display); }
.cc-go { margin-left: auto; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--mint); border: 3px solid var(--ink); display: grid; place-items: center; }
.cc-go svg { width: 20px; height: 20px; margin-left: 3px; }
.hero-more { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4; font-weight: 900; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .3rem 1rem; text-decoration: none; white-space: nowrap; }
.noscript { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: .7rem 1rem; font-weight: 800; }
@media (max-width: 820px) {
  .hero-main { grid-template-columns: 1fr; text-align: center; padding-top: 0; gap: .2rem; }
  .hero-scene { max-width: 330px; }
  .hero-copy { text-align: center; }
  .logo-sub { margin-left: auto; margin-right: auto; }
  .hero-quick { justify-content: center; }
  .hero-extras { margin-left: auto; margin-right: auto; }
}
@media (max-height: 700px) and (max-width: 820px) { .hero-scene { max-width: 240px; } .logo { font-size: 3.2rem; } }

/* Quests (hero + hub) */
.quests { background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); padding: .7rem .9rem .8rem; text-align: left; }
.quests-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font: 900 1.1rem/1.1 var(--font-display); }
.quests-ico svg { width: 28px; height: 28px; }
.quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.quest { display: grid; grid-template-columns: 34px 1fr auto; gap: .55rem; align-items: center; }
.quest-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #f4efff; border: 2px solid var(--ink); }
.quest-ico svg { width: 22px; height: 22px; }
.quest.is-done .quest-ico { background: var(--mint); }
.quest-name { display: block; font-weight: 800; font-size: .92rem; line-height: 1.2; margin-bottom: .2rem; }
.bar-quest { height: 11px; border-width: 2px; }
.quest-reward { display: flex; align-items: center; gap: 2px; font-weight: 900; font-size: .9rem; }
.quest-reward svg { width: 20px; height: 20px; }
.quest.is-done .quest-reward { opacity: .5; }
.quests-done { margin: .5rem 0 0; font-weight: 900; color: var(--ok); }

/* ── Screen chrome ───────────────────────────────────────────────────── */
.screen { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: rgba(255,255,255,.94); border-bottom: 3px solid var(--ink);
}
@supports (backdrop-filter: blur(8px)) { .topbar { background: rgba(255,255,255,.84); backdrop-filter: blur(8px); } }
.topbar-title { margin: 0; font: 900 clamp(1.2rem, 3.4vw, 1.8rem)/1.1 var(--font-display); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title:focus { outline: none; }
@media (max-width: 560px) {
  /* Long titles in some languages wrap to two lines instead of being cut off. */
  .topbar-title { white-space: normal; text-overflow: clip; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
.topbar-right { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.hud-chips { display: flex; gap: .4rem; }
@media (max-width: 560px) {
  .topbar .chip-level, .topbar .chip-stars { display: none; }
  .topbar-title { text-align: left; }
}
.screen-body { width: 100%; max-width: 1080px; margin: 0 auto; padding: 18px 16px calc(44px + env(safe-area-inset-bottom)); display: grid; gap: 18px; align-content: start; }
.panel { background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); padding: 18px; min-width: 0; }
.panel-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font: 900 1.35rem/1.15 var(--font-display); }
.panel-ico svg { width: 30px; height: 30px; display: block; }
.panel-note { color: var(--muted); font-weight: 700; margin: -.3rem 0 1rem; }
.panel-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.panel-head .panel-title { margin: 0; }
.load-error { margin: 30vh auto 0; text-align: center; font-weight: 800; background: #fff; padding: 1.2rem; border-radius: 22px; border: 3px solid var(--ink); max-width: 380px; display: grid; gap: .8rem; justify-items: center; }

/* ── Hub ─────────────────────────────────────────────────────────────── */
.bubble-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .6rem; }
.num-bubble {
  min-height: 62px; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 50%; background: var(--bub, #fff); color: var(--ink);
  font: 900 1.75rem/1 var(--font-display); box-shadow: 0 5px 0 var(--ink); cursor: pointer; transition: transform .1s; touch-action: manipulation;
}
@media (hover: hover) { .num-bubble:hover { transform: translateY(-3px) rotate(-4deg); } }
.num-bubble:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.nb-1 { --bub: #ffe38a; } .nb-2 { --bub: #ffc4d8; } .nb-3 { --bub: #bfe8ff; } .nb-4 { --bub: #c9f5dd; }
.nb-5 { --bub: #e2d6ff; } .nb-6 { --bub: #ffd8b8; } .nb-7 { --bub: #ffe38a; } .nb-8 { --bub: #ffc4d8; }
.nb-9 { --bub: #bfe8ff; } .nb-10 { --bub: #c9f5dd; } .nb-11 { --bub: #e2d6ff; } .nb-12 { --bub: #ffd8b8; }
.nb-all { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; font: 900 1.05rem/1.1 var(--font); --bub: var(--sun); padding: 0 .8rem; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mode-card {
  position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: .85rem; align-items: center;
  padding: 16px; background: var(--mc, #fff); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink);
  color: var(--ink); text-decoration: none; min-height: 116px; overflow: hidden; transition: transform .12s;
}
@media (hover: hover) { .mode-card:hover { transform: translateY(-3px); } }
.mode-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.mode-icon { display: grid; place-items: center; width: 66px; height: 66px; background: #fff; border: 3px solid var(--ink); border-radius: 20px; }
.mode-icon svg { width: 44px; height: 44px; }
.mode-text { position: relative; z-index: 1; min-width: 0; }
.mode-name { display: block; font: 900 1.35rem/1.1 var(--font-display); }
.mode-desc { display: block; margin-top: .2rem; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.mode-meta { display: inline-block; margin-top: .45rem; font-size: .82rem; font-weight: 900; background: rgba(255,255,255,.85); border: 2px solid var(--ink); border-radius: 999px; padding: .1em .65em; }
.mode-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--coral); border: 2px solid var(--ink); border-radius: 999px; padding: .1em .55em; font-size: .8rem; font-weight: 900; }
.mode-quick { --mc: #fff3b0; } .mode-timeattack { --mc: #c9ecff; } .mode-streak { --mc: #ffd9c6; }
.mode-boss { --mc: #e6dbff; } .mode-practice { --mc: #d4f7e4; } .mode-mistakes { --mc: #ffd6e3; }
.mode-card.is-featured { grid-column: 1 / -1; grid-template-columns: 66px minmax(0, 1fr) 200px; min-height: 160px; background: linear-gradient(120deg, #7fd6ff, #b9f3cf); }
.mode-card.is-featured .mode-name { font-size: 1.8rem; }
.mode-art { grid-column: 3; grid-row: 1; width: 200px; margin: -20px -10px -30px 0; animation: float 6s ease-in-out infinite; }
.mode-card.is-featured .mode-text { grid-column: 2; grid-row: 1; }
@media (max-width: 600px) {
  .mode-card.is-featured { grid-template-columns: 66px minmax(0, 1fr); }
  .mode-art { position: absolute; right: -34px; bottom: -40px; width: 150px; margin: 0; opacity: .85; }
  .mode-card.is-featured .mode-text { padding-right: 64px; }
}

/* ── Setup ──────────────────────────────────────────────────────────── */
.setup-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.setup-icon { display: grid; place-items: center; width: 86px; height: 86px; background: var(--sun); border: 3px solid var(--ink); border-radius: 24px; }
.setup-icon svg { width: 58px; height: 58px; }
.setup-desc { font-size: 1.15rem; font-weight: 800; margin: 0 0 .5rem; }
.setup-note { font-weight: 800; margin: 0; font-size: 1.1rem; }
.rule-chip { display: inline-block; background: #efeaff; border: 2px solid var(--ink); border-radius: 999px; padding: .2em .8em; font-weight: 900; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .7rem; }
.table-toggle {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .05rem; min-height: 74px;
  border: 3px solid var(--ink); border-radius: 20px; background: #fff; color: var(--ink); font: 900 1.9rem/1 var(--font-display);
  box-shadow: 0 5px 0 var(--ink); cursor: pointer; touch-action: manipulation;
}
.table-toggle:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.tt-x { font-size: 1.1rem; opacity: .55; }
.table-toggle[aria-pressed="true"] { background: var(--sun); }
.tt-check { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); border: 3px solid var(--ink); display: none; place-items: center; }
.tt-check svg { width: 16px; height: 16px; }
.table-toggle[aria-pressed="true"] .tt-check { display: grid; }
.table-picker-actions { margin-top: .9rem; }
.diff-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.diff-card { position: relative; display: grid; gap: .2rem; padding: .9rem 1rem; border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); cursor: pointer; }
.diff-card:has(input:checked) { background: var(--c); }
.diff-card:has(input:focus-visible) { outline: 4px solid var(--focus); outline-offset: 3px; }
.diff-easy { --c: #c9f5dd; } .diff-normal { --c: #fff0a8; } .diff-challenge { --c: #ffc9d6; }
.diff-level { display: flex; gap: 2px; }
.diff-level svg { width: 24px; height: 24px; }
.diff-name { font: 900 1.3rem/1.1 var(--font-display); }
.diff-desc { font-weight: 700; font-size: .92rem; color: var(--ink-2); }
input:checked ~ .diff-name::after { content: " ✓"; }
.boss-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .6rem; }
.boss-option { display: grid; justify-items: center; gap: .2rem; padding: .5rem; border: 3px solid var(--ink); border-radius: 18px; background: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--ink); text-align: center; font-weight: 800; font-size: .85rem; }
.boss-option:has(input:checked) { background: var(--sun); }
.boss-option:has(input:focus-visible) { outline: 4px solid var(--focus); outline-offset: 3px; }
input:checked ~ .boss-name { text-decoration: underline 3px; }
.boss-thumb { width: 84px; }
.setup-footer { position: sticky; bottom: 0; display: grid; justify-items: center; gap: .5rem; padding: 14px 0 calc(10px + env(safe-area-inset-bottom)); }
.setup-warn { margin: 0; font-weight: 900; color: #a4161a; background: #fff; border-radius: 999px; padding: .1rem .8rem; border: 2px solid var(--ink); }
.setup-warn:empty { display: none; }

/* ── Adventure map ───────────────────────────────────────────────────── */
.map-body { max-width: 640px; }
.map-list { display: grid; gap: 26px; }
.map-isle { position: relative; aspect-ratio: 1 / 1.04; }
.isle-head { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.95); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); padding: .3rem .9rem .3rem .4rem; width: max-content; max-width: 94%; }
.isle-crystal { width: 32px; flex: 0 0 auto; }
.isle-name { margin: 0; display: flex; align-items: center; gap: .4rem; font: 900 1.2rem/1.1 var(--font-display); }
.isle-no { display: grid; place-items: center; width: 1.65em; height: 1.65em; flex: 0 0 auto; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); font-size: .8rem; }
.isle-tables { margin: 0; font-weight: 800; font-size: .85rem; color: var(--ink-2); }
.isle-art { position: absolute; left: 7%; right: 7%; top: 9%; animation: float 7s ease-in-out infinite; }
.is-mirror .isle-art { animation-delay: -3.5s; }
.map-isle.is-locked .isle-art { filter: grayscale(.85); opacity: .7; }
.map-nodes { position: absolute; inset: 0; }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-path polyline { fill: none; stroke: #fff; stroke-width: 9; stroke-dasharray: 1 18; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-node { position: absolute; transform: translate(-50%, -50%); width: 76px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; touch-action: manipulation; }
.map-node[disabled] { cursor: default; }
.node-disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); font: 900 1.9rem/1 var(--font-display); color: var(--ink); transition: transform .12s; }
.map-node:not([disabled]):active .node-disc { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.map-node.is-done .node-disc { background: var(--sun); }
.map-node.is-current .node-disc { background: var(--mint); animation: node-pulse 1.6s ease-in-out infinite; }
.map-node.is-locked .node-disc { background: #dcd9ec; color: #6f6b96; }
.node-disc .ico-lock { width: 30px; height: 30px; }
.map-node.node-boss { width: 108px; height: 108px; }
.node-boss .node-disc { background: #ffe6f0; padding: 4px; }
.node-boss.is-done .node-disc { background: #fff3b0; }
.node-boss.is-locked .node-disc .boss { filter: grayscale(1) opacity(.6); animation: none; }
.node-stars { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); }
.stars { display: inline-flex; white-space: nowrap; }
.stars svg { width: 24px; height: 24px; }
.stars .is-off { opacity: .28; filter: grayscale(1); }
.map-buddy { position: absolute; left: 50%; bottom: 80%; width: 62px; transform: translateX(-50%); animation: hop 1.2s ease-in-out infinite; pointer-events: none; }
.isle-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: flex; align-items: center; gap: .45rem; margin: 0; max-width: 88%; background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .45rem 1rem; font-weight: 900; box-shadow: 0 4px 0 var(--ink); text-align: center; }
.isle-lock svg { width: 22px; height: 22px; flex: 0 0 auto; }
.node-sheet { text-align: center; }
.ns-art { width: 140px; margin: 0 auto; }
.ns-desc { font-weight: 800; font-size: 1.1rem; margin: .4rem 0; }
.ns-facts { list-style: none; padding: 0; display: grid; gap: .45rem; text-align: left; max-width: 340px; margin: .8rem auto; }
.ns-facts li { display: flex; gap: .55rem; align-items: center; font-weight: 800; }
.ns-facts svg { width: 26px; height: 26px; flex: 0 0 auto; }
.ns-best { display: flex; justify-content: center; align-items: center; gap: .4rem; font-weight: 900; }

/* ── Gameplay ────────────────────────────────────────────────────────── */
.screen-game { position: relative; min-height: 100%; display: flex; flex-direction: column; }
.screen-game::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(circle at 50% 62%, rgba(255,214,90,.55), transparent 62%); }
.screen-game[data-combo="2"]::before { opacity: .55; }
.screen-game[data-combo="3"]::before { opacity: .8; background: radial-gradient(circle at 50% 62%, rgba(255,143,177,.5), transparent 66%); }
.screen-game[data-combo="4"]::before { opacity: 1; background: radial-gradient(circle at 50% 62%, rgba(255,214,90,.55), rgba(139,92,246,.18) 50%, transparent 75%); }
.game-top { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 8px; }
.game-progress { display: flex; align-items: center; justify-content: center; gap: .6rem; min-width: 0; }
.qdots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.qdot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.75); border: 3px solid var(--ink); display: grid; place-items: center; color: #fff; }
.qdot svg { width: 12px; height: 12px; }
.qdot.is-ok { background: var(--ok); }
.qdot.is-bad { background: var(--bad); }
@media (max-width: 420px) { .qdot { width: 20px; height: 20px; border-width: 2px; } .qdots { gap: 4px; } }
.timer { display: flex; align-items: center; gap: .5rem; width: 100%; max-width: 480px; }
.timer-ico svg { width: 32px; height: 32px; display: block; }
.timer-bar { flex: 1; height: 20px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.timer-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--sun)); }
.timer-num { min-width: 2.2ch; font: 900 1.6rem/1 var(--font-display); text-align: right; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: .1em .3em; }
.timer.is-low .timer-fill { background: var(--coral); }
.timer.is-low .timer-num { color: #a4161a; animation: throb .6s ease-in-out infinite; }
.shields { display: flex; gap: 4px; }
.shield { width: 36px; transition: opacity .3s, transform .3s; }
.shield svg { width: 100%; height: auto; display: block; }
.shield.is-lost { opacity: .25; filter: grayscale(1); transform: scale(.8); }
.streak-now, .practice-count, .boss-label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 900; background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .25em .8em; white-space: nowrap; }
.boss-label svg { width: 22px; height: 22px; }
.game-score { display: flex; align-items: center; gap: .3rem; background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .2rem .7rem .2rem .3rem; box-shadow: 0 4px 0 var(--ink); font: 900 1.35rem/1 var(--font-display); }
.score-ico svg { width: 28px; height: 28px; display: block; }
.score-val { min-width: 2ch; text-align: right; }
.score-val.bump { animation: bump .3s; }
.combo-chip { background: var(--tang); border: 2px solid var(--ink); border-radius: 999px; padding: .05em .45em; font-size: 1rem; }
.combo-chip.tier-3, .combo-chip.tier-4 { background: var(--coral); animation: throb .8s ease-in-out infinite; }

.game-main { position: relative; z-index: 1; flex: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 14px calc(16px + env(safe-area-inset-bottom)); }
.game-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 1rem; min-height: clamp(92px, 16vh, 170px); }
.game-stage.has-boss { justify-content: space-between; }
.buddy-wrap { position: relative; }
.stage-buddy { width: clamp(88px, 16vh, 160px); }
.stage-buddy.jump { animation: jump .55s cubic-bezier(.2,1.4,.4,1); }
.speech { position: absolute; left: 88%; top: 4%; z-index: 3; background: #fff; border: 3px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: .3em .7em; font: 900 1.1rem/1 var(--font-display); white-space: nowrap; opacity: 0; pointer-events: none; }
.speech.show { animation: speech 1s ease-out forwards; }
.boss-wrap { display: grid; justify-items: center; gap: 6px; }
.stage-boss { width: clamp(108px, 19vh, 210px); }
.stage-boss.hit { animation: shake .45s; }
.hp-row { display: grid; gap: 3px; justify-items: center; }
.hp-name { font-weight: 900; font-size: .85rem; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 0 .6em; }
.hp { width: clamp(130px, 32vw, 250px); height: 20px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.hp-fill { display: block; height: 100%; background: linear-gradient(90deg, #b76bff, #ff6b8b); transition: width .35s ease-out; }

.game-play { display: grid; grid-template-rows: auto auto; gap: 14px; align-content: start; width: 100%; max-width: 760px; margin: 0 auto; }
.question-card { position: relative; display: grid; gap: 10px; justify-items: center; text-align: center; background: #fff; border: 4px solid var(--ink); border-radius: 32px; box-shadow: 0 8px 0 var(--ink); padding: clamp(14px, 3vh, 28px) 14px; transition: box-shadow .2s; }
.question-card.pop { animation: card-pop .38s cubic-bezier(.2,1.3,.4,1); }
.question-card.is-correct { box-shadow: 0 8px 0 var(--ink), 0 0 0 9px rgba(61,220,151,.5); }
.question-card.is-wrong { animation: shake .4s; }
.equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1em .22em; margin: 0; font: 900 clamp(2.8rem, 11vw, 5.4rem)/1 var(--font-display); color: var(--ink); }
.tok.op { color: var(--grape); }
.tok.slot { display: inline-flex; justify-content: center; min-width: 1.35em; padding: .02em .16em; border: 4px dashed var(--grape); border-radius: 20px; background: #f4efff; color: var(--grape); }
.tok.slot.has-value { border-style: solid; color: var(--ink); background: #fff; }
.tok.slot.is-correct { background: #c9f5dd; border: 4px solid var(--ok); color: var(--ink); }
.tok.slot.is-wrong { background: #ffe0cc; border: 4px solid var(--bad); }
.tok.slot.nudge { animation: shake .35s; }
.tok.claim { background: #fff3b0; border-radius: 18px; padding: 0 .14em; }
.tf-q { color: var(--coral); }
.q-visual:empty { display: none; }
.groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.group-bubble { display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; padding: 8px; border: 3px solid var(--ink); border-radius: 18px; background: #fff8d9; }
.group-bubble svg { width: 22px; height: 22px; display: block; }
.hint-figure { margin: 0; display: grid; justify-items: center; gap: 6px; }
.hint-figure figcaption { font-weight: 900; }
.dot-array { display: grid; grid-template-columns: repeat(var(--cols), 14px); gap: 4px; padding: 10px; background: #f4efff; border: 3px solid var(--ink); border-radius: 16px; }
.dot-array i { width: 14px; height: 14px; border-radius: 50%; background: var(--grape); }
.hint-btn[disabled] { display: none; }

.answers-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.answers-choice.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer-btn {
  position: relative; min-height: clamp(74px, 12vh, 112px); border: 4px solid var(--ink); border-radius: 26px; background: #fff; color: var(--ink);
  font: 900 clamp(2rem, 7vw, 3.3rem)/1 var(--font-display); box-shadow: 0 7px 0 var(--ink); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .08s, background-color .15s;
}
@media (hover: hover) { .answer-btn:not([aria-disabled="true"]):hover { background: #fff8d6; transform: translateY(-2px); } }
.answer-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.answer-btn[aria-disabled="true"] { cursor: default; }
.answer-btn.is-typed { background: #efe7ff; }
.answer-btn.is-correct { background: var(--mint); animation: correct-pop .45s cubic-bezier(.2,1.4,.4,1); }
.answer-btn.is-wrong { background: #ffb68f; animation: shake .4s; }
.answer-btn.is-reveal { background: #c9f5dd; outline: 4px dashed var(--ok); outline-offset: 4px; }
.answer-btn.is-hinted { animation: hint-glow 1.2s ease-in-out infinite; }
.ans-mark { position: absolute; top: -13px; right: -13px; width: 40px; height: 40px; border-radius: 50%; display: none; place-items: center; border: 3px solid var(--ink); color: #fff; }
.ans-mark:not(:empty) { display: grid; }
.ans-mark svg { width: 22px; height: 22px; }
.is-correct .ans-mark, .is-reveal .ans-mark { background: var(--ok); }
.is-wrong .ans-mark { background: var(--bad); }
.answers-tf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.answers-tf .answer-btn { display: flex; align-items: center; justify-content: center; gap: .35em; font-size: clamp(1.4rem, 4.6vw, 2.3rem); }
.tf-ico { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; border: 3px solid var(--ink); flex: 0 0 auto; }
.tf-true .tf-ico { background: var(--mint); }
.tf-false .tf-ico { background: var(--coral); }
.tf-ico svg { width: 62%; height: 62%; color: var(--ink); }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 430px; margin: 0 auto; }
.key { min-height: clamp(54px, 8.5vh, 78px); border: 4px solid var(--ink); border-radius: 20px; background: #fff; color: var(--ink); font: 900 clamp(1.6rem, 4.8vw, 2.3rem)/1 var(--font-display); box-shadow: 0 5px 0 var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.key:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.key svg { width: 32px; height: 32px; display: block; margin: auto; }
.key-ok { background: var(--mint); }
.key-erase { background: #ffe0cc; }
.finish-btn { white-space: nowrap; }

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .game-main { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: 1fr; align-items: center; gap: 30px; }
  .game-stage, .game-stage.has-boss { flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
  .stage-buddy { width: min(26vh, 230px); }
  .game-stage.has-boss .stage-buddy { width: min(16vh, 140px); }
  .stage-boss { width: min(32vh, 270px); }
  .game-play { align-content: center; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .game-main { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); grid-template-rows: 1fr; align-items: center; }
  .game-stage { min-height: 0; flex-direction: column; align-items: center; }
  .stage-buddy { width: 84px; }
  .stage-boss { width: 100px; }
  .equation { font-size: 2.3rem; }
  .question-card { padding: 8px; }
  .answer-btn { min-height: 54px; font-size: 1.8rem; }
  .key { min-height: 40px; font-size: 1.3rem; }
  .keypad { gap: 6px; }
}

.combo-banner {
  position: fixed; left: 50%; top: 24%; z-index: 60; display: flex; flex-direction: column; align-items: center; pointer-events: none;
  transform: translate(-50%, -50%) scale(.3); opacity: 0; color: #fff; font: 900 clamp(2.2rem, 8vw, 3.8rem)/1 var(--font-display);
  text-shadow: 3px 3px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 0 6px 0 var(--ink);
}
.combo-banner svg { width: 70px; height: 70px; }
.combo-banner small { font-size: .42em; background: var(--ink); color: #fff; border-radius: 999px; padding: .25em .8em; margin-top: .35em; text-shadow: none; }
.combo-banner.show { animation: banner 1.3s cubic-bezier(.2,1.2,.4,1) forwards; }

.feedback { position: fixed; inset: 0; z-index: 70; display: grid; place-items: end center; background: rgba(26,20,64,.38); padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); animation: fade .2s; }
@media (min-width: 700px) { .feedback { place-items: center; } }
.feedback-card { position: relative; width: min(540px, 100%); background: #fff; border: 4px solid var(--ink); border-radius: 32px; box-shadow: 0 10px 0 var(--ink); padding: 14px 18px 20px; text-align: center; animation: slide-up .38s cubic-bezier(.2,1.25,.4,1); }
.fb-buddy { width: 104px; margin: -72px auto 0; }
.fb-title { font: 900 1.3rem/1.2 var(--font-display); margin: .2rem 0; }
.fb-eq { margin: .2rem 0 .5rem; font: 900 clamp(2.4rem, 10vw, 3.8rem)/1.05 var(--font-display); }
.fb-eq .op { color: var(--grape); }
.fb-eq strong { color: var(--ink); background: var(--mint); border: 4px solid var(--ink); border-radius: 18px; padding: 0 .2em; display: inline-block; }
.fb-not { font-weight: 900; color: #a4161a; margin: 0 0 .4rem; }
.fb-count-label { font-weight: 800; margin: .2rem 0 .3rem; }
.skip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 1rem; }
.skip-chip { min-width: 2.5em; padding: .22em .4em; border: 3px solid var(--ink); border-radius: 12px; background: #f4efff; font: 900 1.15rem/1 var(--font-display); animation: chip-in .3s both; }
.skip-chip:nth-child(2) { animation-delay: .04s; } .skip-chip:nth-child(3) { animation-delay: .08s; } .skip-chip:nth-child(4) { animation-delay: .12s; }
.skip-chip:nth-child(5) { animation-delay: .16s; } .skip-chip:nth-child(6) { animation-delay: .2s; } .skip-chip:nth-child(7) { animation-delay: .24s; } .skip-chip:nth-child(8) { animation-delay: .28s; }
.skip-chip:nth-child(9) { animation-delay: .32s; } .skip-chip:nth-child(10) { animation-delay: .36s; } .skip-chip:nth-child(11) { animation-delay: .4s; } .skip-chip:nth-child(12) { animation-delay: .44s; }
.skip-chip.is-last { background: var(--sun); transform: scale(1.1); }

.game-intro { position: fixed; inset: 0; z-index: 65; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(26,20,64,.28); animation: fade .2s; pointer-events: none; }
.intro-title { padding: 0 1rem; text-align: center; color: #fff; font: 900 clamp(1.8rem, 6vw, 3.1rem)/1.1 var(--font-display); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 5px 0 var(--ink); animation: pop-in .4s cubic-bezier(.2,1.3,.4,1); }
.intro-count { color: #fff; font: 900 clamp(4.5rem, 20vw, 9rem)/1 var(--font-display); text-shadow: 5px 5px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink), 0 9px 0 var(--ink); animation: count .62s ease-out forwards; }
.intro-boss { width: min(50vw, 270px); animation: boss-enter .9s cubic-bezier(.2,1.3,.4,1); }

/* ── Results ─────────────────────────────────────────────────────────── */
.results { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; background: rgba(26,20,64,.5); padding: 30px 14px calc(30px + env(safe-area-inset-bottom)); animation: fade .25s; }
.results-panel { position: relative; max-width: 640px; margin: 96px auto 0; background: #fff; border: 4px solid var(--ink); border-radius: 36px; box-shadow: 0 12px 0 var(--ink); padding: 16px 18px 24px; text-align: center; animation: pop-in .45s cubic-bezier(.2,1.3,.4,1); }
.res-art { display: flex; justify-content: center; align-items: flex-end; gap: .2rem; height: 140px; margin: -120px auto 0; }
.res-buddy { width: 150px; }
.res-art-boss .res-boss { width: 150px; }
.res-art-boss .res-buddy { width: 110px; }
.res-title { margin: .3rem 0 .1rem; font: 900 clamp(1.8rem, 6vw, 2.7rem)/1.05 var(--font-display); }
.res-sub { margin: 0 0 .5rem; font-weight: 800; color: var(--ink-2); }
.res-stars { display: flex; justify-content: center; align-items: flex-start; gap: 6px; margin: .2rem 0 .8rem; }
.res-star { width: 66px; }
.res-star:nth-child(2) { width: 84px; margin-top: -14px; }
.res-star svg { width: 100%; height: auto; display: block; filter: grayscale(1); opacity: .22; transition: filter .3s, opacity .3s; }
.res-star.is-on svg { filter: none; opacity: 1; animation: star-pop .55s cubic-bezier(.2,1.6,.4,1); }
.res-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.stat-tile { display: grid; justify-items: center; align-content: center; gap: 2px; padding: .65rem .4rem; background: #f7f4ff; border: 3px solid var(--ink); border-radius: 18px; text-align: center; }
.st-ico svg { width: 32px; height: 32px; display: block; }
.st-val { font: 900 1.5rem/1.1 var(--font-display); }
.st-label { font-weight: 800; font-size: .82rem; color: var(--ink-2); }
.res-gains { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; margin: 12px 0; }
.res-xp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; background: #f1ebff; border: 3px solid var(--ink); border-radius: 18px; padding: .5rem .7rem; }
.res-level { display: flex; align-items: center; gap: 4px; font-weight: 900; white-space: nowrap; }
.res-level svg { width: 26px; height: 26px; }
.res-xp .bar-fill { width: 0; }
.res-xp-gain { font-weight: 900; color: var(--grape-2); white-space: nowrap; }
.res-coins { display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff3b0; border: 3px solid var(--ink); border-radius: 18px; padding: .4rem .9rem; font: 900 1.45rem/1 var(--font-display); }
.res-coins svg { width: 30px; height: 30px; }
@media (max-width: 480px) { .res-gains { grid-template-columns: 1fr; } }
.res-rewards { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.reward { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .45rem .7rem; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(90deg, #fff6c9, #fff); animation: slide-in .45s both; }
.reward:nth-child(2) { animation-delay: .1s; } .reward:nth-child(3) { animation-delay: .2s; } .reward:nth-child(4) { animation-delay: .3s; } .reward:nth-child(n+5) { animation-delay: .4s; }
.reward-ico svg { width: 40px; height: 40px; display: block; }
.reward-kicker { display: block; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.reward-coins { display: flex; gap: 3px; align-items: center; font-weight: 900; }
.reward-coins svg { width: 22px; height: 22px; }
.res-note { font-weight: 800; }
.res-review { margin: 12px 0; text-align: left; background: #f1fbff; border: 3px dashed #57b8ec; border-radius: 18px; padding: .6rem .8rem; }
.res-review h3 { margin: 0 0 .45rem; display: flex; gap: .4rem; align-items: center; font: 900 1.1rem var(--font-display); }
.res-review h3 svg { width: 24px; height: 24px; color: var(--sun-2); }
.review-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.review-chip { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: .2em .6em; font: 800 1.15rem var(--font-display); }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }

/* ── Celebration modals ──────────────────────────────────────────────── */
.modal-celebrate .modal-panel { background: radial-gradient(circle at 50% 28%, #fff6c4, #fff 62%); }
.celebrate { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.lvl-badge { position: relative; display: grid; place-items: center; width: 156px; height: 156px; border: 5px solid var(--ink); border-radius: 50%; background: conic-gradient(var(--grape), var(--coral), var(--sun), var(--mint), var(--sky), var(--grape)); animation: spin-in .8s cubic-bezier(.2,1.3,.4,1); }
.lvl-badge::before { content: ""; position: absolute; inset: 15px; background: #fff; border: 4px solid var(--ink); border-radius: 50%; }
.lvl-num { position: relative; font: 900 4.2rem/1 var(--font-display); }
.celebrate-text { margin: .3rem 0; font: 900 1.3rem/1.3 var(--font-display); }
.celebrate-sub { margin: 0; font-weight: 800; }
.crystal-hero { display: flex; align-items: flex-end; justify-content: center; gap: .4rem; }
.ch-boss { width: 136px; }
.ch-crystal { width: 82px; filter: drop-shadow(0 0 14px rgba(255,240,150,.95)); animation: glow 1.6s ease-in-out infinite; }
.new-buddy { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; background: #eaf7ff; border: 3px solid var(--ink); border-radius: 20px; padding: .4rem .9rem .4rem .4rem; }
.nb-art { width: 84px; flex: 0 0 auto; }
.new-buddy p { margin: 0; font-weight: 900; text-align: left; }
.chest-art { width: 190px; }
.chest-art:not(.is-open) { animation: wiggle 1.3s ease-in-out infinite; }
.chest-art.is-open { animation: pop-in .4s; }
.chest-reveal { display: grid; justify-items: center; gap: .3rem; }
.chest-coins { display: flex; align-items: center; gap: .3rem; margin: 0; font: 900 1.7rem var(--font-display); }
.chest-coins svg { width: 36px; height: 36px; }
.chest-critter { display: grid; justify-items: center; }
.cc-critter { width: 116px; animation: star-pop .6s cubic-bezier(.2,1.6,.4,1); }
.chest-critter p { margin: 0; font-weight: 900; }

/* ── Onboarding ──────────────────────────────────────────────────────── */
.modal-onboard { max-width: min(620px, calc(100vw - 20px)); }
.onboard { position: relative; display: grid; justify-items: center; gap: .65rem; text-align: center; }
.ob-skip { position: absolute; top: -12px; right: -8px; min-height: 44px; padding: .4rem .6rem; background: none; border: 0; font-weight: 900; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.ob-scene { position: relative; width: min(330px, 76vw); margin-top: .6rem; }
.ob-isle { display: block; }
.ob-buddy { position: absolute; left: 29%; width: 42%; bottom: 43%; }
.ob-title { margin: 0; font: 900 clamp(1.9rem, 5.5vw, 2.5rem)/1.1 var(--font-display); }
.ob-title:focus { outline: none; }
.ob-text { margin: 0; max-width: 34ch; font-weight: 800; font-size: 1.15rem; }
.ob-msg { min-height: 1.6em; }
.ob-q { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .8rem; }
.ob-buddy-small { width: 92px; flex: 0 0 auto; }
.ob-q .question-card { padding: 12px 18px; }
.equation.ob-eq { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.onboard .answers { width: 100%; max-width: 440px; }
.onboard .answer-btn { min-height: 80px; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots span { width: 10px; height: 10px; border-radius: 50%; background: #d9d6ea; }
.ob-dots .is-on { background: var(--ink); }
.ob-next:empty { display: none; }
@media (max-width: 440px) { .ob-buddy-small { width: 64px; } }

/* ── Trophy room ─────────────────────────────────────────────────────── */
.trophy-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sum-tile { display: grid; justify-items: center; gap: .1rem; padding: .7rem .4rem; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); text-align: center; }
.sum-ico svg { width: 42px; height: 42px; display: block; }
.sum-val { font: 900 1.6rem/1.1 var(--font-display); }
.sum-label { font-weight: 800; font-size: .85rem; line-height: 1.2; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 16px 10px; }
.shelf-item { display: grid; justify-items: center; text-align: center; }
.shelf-crystal { width: 52px; }
.shelf-item.is-earned .shelf-crystal { filter: drop-shadow(0 0 10px rgba(255,230,120,.95)); animation: glow 2.4s ease-in-out infinite; }
.shelf-pedestal { width: 76px; height: 16px; margin-top: -4px; background: linear-gradient(#cbbcf7, #9f8ae6); border: 3px solid var(--ink); border-radius: 8px; }
.shelf-name { margin-top: .3rem; font-weight: 800; font-size: .8rem; line-height: 1.15; }
.medals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.medal-link { display: grid; justify-items: center; gap: .3rem; padding: .3rem; border-radius: 18px; color: var(--ink); text-decoration: none; }
.medal-ring, .ring { position: relative; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: conic-gradient(var(--mint) calc(var(--p, 0) * 360deg), #e7e3f5 0); }
.medal-ring { width: 86px; height: 86px; }
.medal-ring::before, .ring::before { content: ""; position: absolute; inset: 10px; background: #fff; border: 3px solid var(--ink); border-radius: 50%; }
.medal-num, .ring-val { position: relative; font: 900 1.3rem/1 var(--font-display); }
.medal.is-gold .medal-ring { background: var(--sun); }
.medal.is-gold .medal-ring::before { background: #fff3b0; }
.medal-label { font-weight: 800; font-size: .8rem; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: #efeaff; border: 3px solid var(--ink); border-radius: 999px; }
.seg-btn, .seg-option { display: inline-flex; align-items: center; min-height: 42px; padding: .4rem .95rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 800 .98rem var(--font); cursor: pointer; }
.seg-btn[aria-pressed="true"], .seg-option:has(input:checked) { background: #fff; box-shadow: 0 0 0 3px var(--ink); }
.seg-option:has(input:focus-visible) { outline: 4px solid var(--focus); outline-offset: 2px; }
.seg-option input:checked + span { text-decoration: underline 3px; text-underline-offset: 4px; }
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.ach-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .7rem .8rem; border: 3px solid var(--ink); border-radius: 20px; background: #f5f3fb; }
.ach-card.is-earned { background: linear-gradient(135deg, #fff5c2, #ffe2ee); }
.ach-ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: #fff; border: 3px solid var(--ink); }
.ach-ico svg { width: 40px; height: 40px; }
.ach-card:not(.is-earned) .ach-ico svg { filter: grayscale(1); opacity: .45; }
.ach-name { display: block; font: 900 1.05rem/1.15 var(--font-display); }
.ach-desc { display: block; font-size: .88rem; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.ach-date { display: flex; gap: .3rem; align-items: center; margin-top: .25rem; font-size: .8rem; font-weight: 800; color: var(--ok); }
.ach-date svg { width: 16px; height: 16px; }
.ach-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: center; margin-top: .35rem; }
.bar-ach { height: 11px; border-width: 2px; }
.ach-count { font-size: .8rem; font-weight: 900; }
.ach-reward { align-self: start; display: flex; align-items: center; gap: 2px; font-weight: 900; font-size: .9rem; }
.ach-reward svg { width: 20px; height: 20px; }
.ach-lock { position: absolute; left: 50px; top: 50px; display: grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: #fff; border-radius: 50%; }
.ach-lock svg { width: 14px; height: 14px; }
.ach-empty { font-weight: 800; padding: 1rem; }

/* ── Collection ──────────────────────────────────────────────────────── */
.wardrobe { position: relative; display: grid; justify-items: center; }
.wardrobe-figure { width: min(210px, 48vw); animation: float 4s ease-in-out infinite; }
.wardrobe-name { margin: 0; font: 900 1.3rem/1.2 var(--font-display); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .2rem 1rem; box-shadow: 0 4px 0 var(--ink); text-align: center; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; min-height: 50px; padding: .35rem 1rem .35rem .45rem; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 900 1rem var(--font); cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.tab[aria-selected="true"] { background: var(--sun); }
.tab-ico svg { width: 30px; height: 30px; display: block; }
.collection-panel { background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); padding: 16px; }
.item-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.item-card { display: grid; justify-items: center; align-content: start; gap: .35rem; padding: .7rem .6rem .8rem; border: 3px solid var(--ink); border-radius: 22px; background: #f5f2fc; text-align: center; }
.item-card.is-owned { background: #fff; }
.item-card.is-equipped { background: #e4fbef; box-shadow: inset 0 0 0 4px var(--mint); }
.item-art { display: grid; place-items: center; width: 112px; height: 112px; }
.item-art > svg { width: 100%; height: 100%; }
.item-name { font: 900 1.05rem/1.15 var(--font-display); }
.item-desc { font-size: .8rem; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.item-status { display: inline-flex; align-items: center; gap: .3rem; min-height: 42px; font-weight: 900; color: var(--ok); }
.item-status svg { width: 20px; height: 20px; }
.item-buy { display: grid; justify-items: center; gap: .25rem; }
.item-need, .item-hint { font-size: .75rem; font-weight: 800; color: var(--ink-2); line-height: 1.2; }
.theme-swatch { position: relative; display: block; width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--ink); overflow: hidden; }
.theme-swatch i { position: absolute; height: 12px; background: #fff; border-radius: 999px; }
.theme-swatch i:nth-child(1) { width: 42px; top: 28px; left: 12px; }
.theme-swatch i:nth-child(2) { width: 30px; top: 52px; right: 12px; }
.theme-swatch i:nth-child(3) { width: 18px; top: 72px; left: 30px; }
.swatch-day { background: linear-gradient(#45b4ff, #e2f7ff); }
.swatch-sunset { background: linear-gradient(#7a5cff, #ff8fb1, #ffe0b0); }
.swatch-candy { background: linear-gradient(#ff86cc, #fff2c9); }
.swatch-ocean { background: linear-gradient(#1d7ed0, #3cc6da, #c2f5ec); }
.swatch-night { background: linear-gradient(#131948, #5b61c6); }
.swatch-night i, .swatch-aurora i, .swatch-cosmos i, .swatch-lava i { width: 5px !important; height: 5px !important; }
.swatch-lavender { background: linear-gradient(#8e7dff, #c9b8ff, #f3ecff); }
.swatch-jungle { background: linear-gradient(#1f8a5b, #6fd49a, #dcfce7); }
.swatch-desert { background: linear-gradient(#f59e0b, #fcd9a0, #fff5e1); }
.swatch-lava { background: linear-gradient(#6e1a28, #d9483a, #ffb37a); }
.swatch-lava i { background: #ffd23f; }
.swatch-cosmos { background: radial-gradient(ellipse at 30% 35%, rgba(127,240,255,.45), transparent 55%), linear-gradient(#1b0b3a, #4f2a86, #b04fa3); }
.swatch-rainbow { background: radial-gradient(circle at 50% 110%, transparent 34%, #ff6b8b 34% 40%, #ffd23f 40% 46%, #3ddc97 46% 52%, #5cc4ff 52% 58%, #8b5cf6 58% 64%, transparent 64%), linear-gradient(#7fd6ff, #ffd6f0); }
.swatch-aurora { background: radial-gradient(ellipse at 30% 30%, rgba(61,220,151,.8), transparent 55%), linear-gradient(#0b2240, #38c98f); }
.critter-top { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.critter-count { display: flex; align-items: center; gap: .4rem; margin: 0; font: 900 1.2rem var(--font-display); }
.critter-count svg { width: 32px; height: 32px; }
.chest-progress { display: grid; grid-template-columns: auto minmax(160px, 1fr); gap: .2rem .6rem; align-items: center; }
.cp-ico { grid-row: span 2; }
.cp-ico svg { width: 38px; height: 38px; display: block; }
.cp-text { font-weight: 800; font-size: .9rem; }
.critter-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.critter-card { display: grid; justify-items: center; gap: 2px; padding: .4rem; border: 3px solid var(--ink); border-radius: 18px; background: #efedf6; }
.critter-card.is-found { background: #fff; }
.critter-art { width: 70px; }
.critter-name { font-weight: 900; font-size: .85rem; }

/* ── Progress ────────────────────────────────────────────────────────── */
.level-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: linear-gradient(135deg, #efe7ff, #fff); }
.lc-badge { position: relative; display: grid; place-items: center; width: 98px; height: 98px; border-radius: 50%; border: 4px solid var(--ink); background: conic-gradient(var(--grape), var(--coral), var(--sun), var(--mint), var(--sky), var(--grape)); }
.lc-badge::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.lc-num { position: relative; font: 900 2.5rem/1 var(--font-display); }
.lc-kicker { margin: 0; font-weight: 900; color: var(--ink-2); }
.lc-title { margin: .05rem 0 .5rem; font: 900 1.7rem/1.1 var(--font-display); }
.lc-sub { margin: .35rem 0 0; font-weight: 800; font-size: .9rem; }
.lc-buddy { width: 116px; }
@media (max-width: 560px) { .level-card { grid-template-columns: auto minmax(0, 1fr); } .lc-buddy { display: none; } }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat-grid .stat-tile { background: #fff; box-shadow: 0 5px 0 var(--ink); }
.ring { width: 80px; height: 80px; }
.ring::before { inset: 9px; }
.ring-val { font-size: 1.1rem; }
.table-crystals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tc { display: grid; justify-items: center; gap: 3px; padding: .55rem .3rem; border: 3px solid var(--ink); border-radius: 18px; background: #f7f4ff; color: var(--ink); text-decoration: none; box-shadow: 0 4px 0 var(--ink); }
.tc:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tc.is-mastered { background: #fff3b0; }
.tc-gem { width: 38px; }
.tc-n { font: 900 1.25rem/1 var(--font-display); }
.tc-bar { width: 80%; height: 10px; border-radius: 9px; background: #e1dcf2; overflow: hidden; border: 2px solid var(--ink); }
.tc-bar span { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--mint-2); }
.tc-label { font-size: .72rem; font-weight: 800; }
.garden-wrap { overflow-x: auto; padding-bottom: 4px; }
.garden { border-collapse: separate; border-spacing: 3px; margin: 0 auto; }
.garden th { width: 28px; height: 28px; font: 900 .85rem/1 var(--font-display); background: var(--sun); border-radius: 8px; border: 2px solid var(--ink); }
.garden .g-corner { background: var(--grape); color: #fff; }
.plant { width: 28px; height: 28px; padding: 0; border-radius: 8px; background: #f1e9da; text-align: center; vertical-align: middle; }
.plant-shape { display: block; margin: auto; }
.st-seed .plant-shape { width: 7px; height: 7px; border-radius: 50%; background: #a8916f; }
.st-sprout .plant-shape { width: 14px; height: 14px; background: #6fd45a; border-radius: 0 100% 0 100%; border: 2px solid #2f8a3f; }
.st-bud .plant-shape { width: 14px; height: 19px; background: #3fae54; border-radius: 50% 50% 40% 40%; border: 2px solid #22703a; }
.st-bloom { background: #fff1b3; }
.st-bloom .plant-shape { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #ffd23f 0 32%, #ff6fa8 34%); border: 2px solid var(--ink); }
.st-thirsty { background: #ffe1d3; }
.st-thirsty .plant-shape { width: 13px; height: 13px; background: #3aa9f5; border-radius: 0 50% 50% 50%; transform: rotate(45deg); border: 2px solid #1f6fb0; }
.garden-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: .9rem 0 0; font-weight: 800; font-size: .9rem; }
.garden-legend li { display: flex; align-items: center; gap: .35rem; }
.garden-legend .plant { display: inline-grid; place-items: center; }
.records { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.record-card { border: 3px solid var(--ink); border-radius: 18px; padding: .6rem .8rem; background: #f7f4ff; }
.record-card h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font: 900 1.05rem var(--font-display); }
.record-card h3 svg { width: 26px; height: 26px; }
.record-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.record-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 .45rem; align-items: center; }
.rec-rank { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); font-weight: 900; font-size: .8rem; }
.record-list li:first-child .rec-rank { background: var(--sun); }
.rec-val { font-weight: 900; }
.rec-meta { font-size: .75rem; font-weight: 700; color: var(--ink-2); }
.grownups-link { text-align: center; margin: 0; }

/* ── Settings ────────────────────────────────────────────────────────── */
.setting-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 2px dashed #e3def3; }
.setting-row:last-child { border-bottom: 0; }
.setting-ico svg { width: 30px; height: 30px; display: block; }
.setting-label { font-weight: 900; font-size: 1.1rem; }
.switch { position: relative; width: 74px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 999px; background: #e3def3; cursor: pointer; transition: background .2s; }
.switch-knob { position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--mint); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(30px); }
.lang-links, .grownup-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.panel-warn { background: #fff0e0; border: 2px solid #f59e0b; border-radius: 12px; padding: .5rem .7rem; font-weight: 800; }
.settings-links { margin: 1rem 0 0; font-weight: 800; }
.settings-links a { color: var(--ink); }
.gate { text-align: center; }
.gate-words { margin: .3rem 0; font: 900 1.8rem/1.2 var(--font-display); }
.gate-input { width: 6ch; padding: .3rem; text-align: center; font: 900 1.8rem var(--font-display); border: 3px solid var(--ink); border-radius: 14px; }
.gate-msg { min-height: 1.4em; margin: .4rem 0 0; font-weight: 800; color: #a4161a; }
.confirm-buy { text-align: center; font-weight: 800; font-size: 1.1rem; }
.confirm-buy p { margin: .3rem 0; }
.confirm-balance { display: flex; justify-content: center; align-items: center; gap: .3rem; }
.confirm-balance svg { width: 24px; height: 24px; }
.pause-body { display: grid; justify-items: center; gap: .6rem; }
.pause-art { width: 120px; }
.pause-body .setting-row { width: 100%; max-width: 340px; }

/* ── Keyframes ───────────────────────────────────────────────────────── */
@keyframes squish { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes twirl { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg) scale(1.08); } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes boss-idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4px) scale(1.02, .98); } }
@keyframes smoke { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-8px); opacity: .6; } }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(120vw); } }
@keyframes letter-bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-8px) rotate(-3deg); } 60% { transform: translateY(2px) rotate(2deg); } }
@keyframes play-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ring { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes node-pulse { 0%, 100% { box-shadow: 0 6px 0 var(--ink), 0 0 0 0 rgba(255,255,255,.9); } 50% { box-shadow: 0 6px 0 var(--ink), 0 0 0 12px rgba(255,255,255,0); } }
@keyframes hop { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }
@keyframes jump { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-22px) scale(1.06, .94); } 70% { transform: translateY(0) scale(.96, 1.04); } 100% { transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px) rotate(-1deg); } 40% { transform: translateX(8px) rotate(1deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes bump { 50% { transform: scale(1.35); } }
@keyframes throb { 50% { transform: scale(1.12); } }
@keyframes card-pop { from { transform: scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes correct-pop { 0% { transform: scale(1); } 40% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes hint-glow { 0%, 100% { box-shadow: 0 7px 0 var(--ink), 0 0 0 0 rgba(255,210,63,.9); } 50% { box-shadow: 0 7px 0 var(--ink), 0 0 0 12px rgba(255,210,63,0); } }
@keyframes speech { 0% { opacity: 0; transform: scale(.5) translateY(10px); } 20% { opacity: 1; transform: scale(1.08); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); } 40% { transform: translate(-50%, -50%) scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes chip-in { from { transform: scale(.4); opacity: 0; } }
@keyframes count { 0% { transform: scale(2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
@keyframes boss-enter { 0% { transform: translateY(-60px) scale(.5); opacity: 0; } 60% { transform: translateY(8px) scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes star-pop { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes slide-in { from { transform: translateX(-24px); opacity: 0; } }
@keyframes spin-in { from { transform: rotate(-200deg) scale(.3); opacity: 0; } }
@keyframes glow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(1); } }