/* CORE RUSH - styles (stage is a fixed 720 x 1280 portrait canvas scaled to the window) */
@font-face { font-family: Bowlby; src: url('../assets/fonts/Bowlby.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: RC; src: url('../assets/fonts/RobotoCondensed.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #0d2233; --ink2: #071722; --cream: #fff6d8; --gold: #ffc943; --gold2: #ff9f1c;
  --teal: #43e1cf; --teal2: #1fa9b8; --violet: #a66bff; --red: #ff5a5f; --sel: #ffe14a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: radial-gradient(ellipse at 50% 35%, #1d2f6e 0, #0b1433 50%, #03060f 100%);
  font-family: RC, Arial, sans-serif; color: var(--cream);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button > * { pointer-events: none; }
svg { display: block; flex-shrink: 0; }

#game {
  position: absolute; left: 50%; top: 50%; width: 720px; height: 1280px;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center;
  overflow: hidden; background: #050c24; box-shadow: 0 0 120px #000a; isolation: isolate;
}
#world { position: absolute; inset: 0; width: 720px; height: 1280px; display: block; outline: none; touch-action: none; }
#ui, #fx { position: absolute; inset: 0; pointer-events: none; }
#ui { z-index: 3; }
#fx { z-index: 6; overflow: hidden; }
.hidden { display: none !important; }

/* ---------- generic chunky buttons ---------- */
.btn {
  pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 92px; padding: 0 30px; border: 5px solid var(--ink); border-radius: 30px;
  font: 32px Bowlby, sans-serif; letter-spacing: .5px; color: var(--ink);
  background: linear-gradient(#ffe98f 0%, #ffcc3f 52%, #ffa51f 100%);
  box-shadow: 0 9px 0 var(--ink2), inset 0 5px 0 #fff6c4, inset 0 -6px 0 #e5850e44;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--ink2), inset 0 4px 0 #fff6c4; }
.btn svg { width: 46px; height: 46px; }
.btn.teal { background: linear-gradient(#a9fff1 0%, #4fe3cf 55%, #20b9b0 100%); box-shadow: 0 9px 0 var(--ink2), inset 0 5px 0 #e6fffb; }
.btn.blue { background: linear-gradient(#b6e2ff 0%, #6ab8f5 55%, #3d86d6 100%); box-shadow: 0 9px 0 var(--ink2), inset 0 5px 0 #eaf6ff; }
.btn.violet { background: linear-gradient(#e2c9ff 0%, #b07dff 55%, #7d48e6 100%); box-shadow: 0 9px 0 var(--ink2), inset 0 5px 0 #f4ebff; color: #1a0d33; }
.btn.red { background: linear-gradient(#ffb0a8 0%, #ff6b66 55%, #e2393f 100%); box-shadow: 0 9px 0 var(--ink2), inset 0 5px 0 #ffe1de; }
.btn.dark { background: linear-gradient(#3c5a78 0%, #24405c 100%); color: var(--cream); box-shadow: 0 9px 0 var(--ink2), inset 0 4px 0 #6d8fae; }
.btn.small { min-height: 70px; font-size: 24px; padding: 0 22px; border-radius: 24px; }
.btn.icon { width: 76px; min-height: 72px; height: 72px; padding: 0; border-radius: 24px; }
.btn.icon svg { width: 42px; height: 42px; }
.btn[disabled] { filter: grayscale(.85) brightness(.75); pointer-events: none; }
.btn.sel, .tile.sel, .tab.sel { outline: 6px solid var(--sel); outline-offset: 5px; filter: brightness(1.08); }
.btn .sub { display: block; font: 800 19px RC, sans-serif; letter-spacing: 1px; opacity: .8; margin-top: -2px; }
.btn .stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }

.panel {
  pointer-events: auto; border: 5px solid var(--ink); border-radius: 36px;
  background: linear-gradient(160deg, #1e4466f2, #12294af5 60%, #0f1f3cf7);
  box-shadow: 0 12px 0 var(--ink2), inset 0 4px 0 #5f8fb877, 0 30px 80px #000a;
}
.title { font: 64px Bowlby, sans-serif; line-height: .95; color: var(--gold); text-align: center;
  text-shadow: 0 5px 0 #b45f0c, 0 9px 0 var(--ink), 0 0 30px #ffb3264d; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.title.teal { color: #6ff3e1; text-shadow: 0 5px 0 #138a8f, 0 9px 0 var(--ink), 0 0 30px #43e1cf55; }
.title.red { color: #ff7a6e; text-shadow: 0 5px 0 #9c1f2a, 0 9px 0 var(--ink); }
.h2 { font: 30px Bowlby, sans-serif; color: var(--cream); text-shadow: 0 4px 0 var(--ink); letter-spacing: .5px; }
.muted { color: #a8cbe0; font-weight: 700; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; pointer-events: auto; animation: fadeIn .25s ease both; }
.screen.clear { pointer-events: none; }
.screen.clear .panel, .screen.clear .btn, .screen.clear .tile, .screen.clear .tab { pointer-events: auto; }
.shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #04102acc, #020814ee); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } }
.pop { animation: popIn .38s cubic-bezier(.2,1.4,.4,1) both; }

/* splash */
.splash { cursor: pointer; background: #061026; }
.splash img.art { position: absolute; inset: 0; width: 720px; height: 1280px; object-fit: cover; }
.splash .vig { position: absolute; inset: 0; background: linear-gradient(#030a1fd9 0%, #030a1f22 26%, transparent 55%, #030a1fa8 76%, #030a1ff2 100%); }
.splash .logo { position: absolute; top: 70px; left: 0; right: 0; }
.splash .tag { position: absolute; top: 300px; left: 0; right: 0; text-align: center; font: 900 26px RC, sans-serif; letter-spacing: 6px; color: #e8fff7; text-shadow: 0 3px 0 #0b2a3c, 0 0 14px #43e1cf88; }
.splash .tap { position: absolute; left: 70px; right: 70px; bottom: 250px; height: 112px; border-radius: 40px;
  display: flex; align-items: center; justify-content: center; background: #08162fb3; border: 4px solid #ffffff44;
  font: 36px Bowlby, sans-serif; color: #fff; letter-spacing: 1px; text-shadow: 0 4px 0 #000a; box-shadow: 0 0 40px #43e1cf44; }
.splash .mapi { position: absolute; bottom: 52px; left: 50%; width: 250px; transform: translateX(-50%); filter: drop-shadow(0 6px 12px #000c); }

.logo-word { font: 118px Bowlby, sans-serif; line-height: .86; text-align: center; letter-spacing: 2px;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.logo-word .a { display: block; color: #ffd23f; text-shadow: 0 6px 0 #c4650b, 0 12px 0 var(--ink), 0 0 40px #ffbf3a66; }
.logo-word .b { display: block; color: #6ff3e1; text-shadow: 0 6px 0 #138a8f, 0 12px 0 var(--ink), 0 0 40px #43e1cf66; }

/* menu */
.menu .logo { position: absolute; top: 118px; left: 0; right: 0; transform: scale(.74); transform-origin: top center; pointer-events: none; }
.menu .tag { position: absolute; top: 300px; left: 0; right: 0; text-align: center; font: 900 22px RC, sans-serif; letter-spacing: 6px; color: #d9fff6; text-shadow: 0 3px 0 #0b2a3c; }
.menu .col { position: absolute; left: 90px; right: 90px; bottom: 150px; display: flex; flex-direction: column; gap: 26px; }
.menu .col .btn { justify-content: flex-start; padding-left: 26px; }
.menu .row { display: flex; gap: 22px; }
.menu .row .btn { flex: 1; }
.menu .corner { position: absolute; top: 26px; right: 26px; display: flex; gap: 14px; z-index: 2; }
.menu .coins { position: absolute; top: 26px; left: 26px; }
.menu .mapi { position: absolute; bottom: 38px; left: 50%; width: 150px; transform: translateX(-50%); filter: drop-shadow(0 4px 8px #000c); }

.pill { display: inline-flex; align-items: center; gap: 8px; height: 66px; padding: 0 22px 0 10px; border: 4px solid var(--ink); border-radius: 26px;
  background: linear-gradient(#fffbe8, #f4e4b4); color: var(--ink); font: 28px Bowlby, sans-serif; box-shadow: 0 6px 0 var(--ink2), inset 0 3px 0 #fff; pointer-events: auto; }
.pill svg { width: 44px; height: 44px; }
.pill.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* header used by sub screens */
.header { position: absolute; top: 26px; left: 26px; right: 26px; display: flex; align-items: center; gap: 18px; }
.header .h2 { flex: 1; text-align: center; font-size: 38px; }

/* map */
.tabs { position: absolute; top: 132px; left: 26px; right: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tab { pointer-events: auto; height: 104px; border: 4px solid var(--ink); border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 19px Bowlby, sans-serif; color: var(--cream); background: linear-gradient(#2b4d72, #1b3557); box-shadow: 0 6px 0 var(--ink2), inset 0 3px 0 #ffffff22; }
.tab small { font: 800 18px RC, sans-serif; color: #ffe07a; display: flex; align-items: center; gap: 4px; }
.tab small svg { width: 20px; height: 20px; }
.tab.on { background: linear-gradient(#5ff0dc, #22b5b0); color: var(--ink); }
.tab.on small { color: var(--ink); }
.tab.locked { filter: grayscale(.8) brightness(.7); }
.grid { position: absolute; top: 280px; left: 46px; right: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile { pointer-events: auto; height: 192px; border: 5px solid var(--ink); border-radius: 30px; position: relative;
  background: linear-gradient(#ffffff 0%, #d9ecff 100%); color: var(--ink); box-shadow: 0 8px 0 var(--ink2), inset 0 -8px 0 #9fc3e655;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tile b { font: 54px Bowlby, sans-serif; line-height: 1; }
.tile .nm { font: 800 16px RC, sans-serif; letter-spacing: .5px; opacity: .75; max-width: 170px; text-align: center; line-height: 1.05; }
.tile .st { display: flex; gap: 2px; }
.tile .st svg { width: 30px; height: 30px; }
.tile.next { background: linear-gradient(#fff1a8, #ffc53d); animation: nextGlow 1.4s ease-in-out infinite; }
.tile.locked { background: linear-gradient(#4b6585, #34506f); color: #9fb6cf; }
.tile.locked svg.lock { width: 56px; height: 56px; }
@keyframes nextGlow { 50% { box-shadow: 0 8px 0 var(--ink2), 0 0 34px #ffd84a; } }
.map .foot { position: absolute; bottom: 44px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; }

/* game hud */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud .top { position: absolute; top: 22px; left: 22px; right: 22px; display: flex; align-items: center; gap: 12px; }
.hud .room { flex: 1; text-align: center; }
.hud .room b { display: block; font: 30px Bowlby, sans-serif; color: var(--cream); text-shadow: 0 4px 0 var(--ink); }
.hud .room small { display: block; font: 900 17px RC, sans-serif; letter-spacing: 3px; color: #9fe9f0; text-shadow: 0 2px 0 var(--ink); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .goal { position: absolute; top: 112px; left: 22px; right: 22px; height: 128px; padding: 14px 20px; border-radius: 30px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; gap: 6px 14px; }
.hud .cores { display: flex; align-items: center; gap: 10px; font: 22px Bowlby, sans-serif; }
.hud .cores .slot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #0a1a30; border: 3px solid #2d4d72; transition: transform .2s; }
.hud .cores .slot svg { width: 34px; height: 34px; opacity: .25; filter: grayscale(1); transition: all .25s; }
.hud .cores .slot.got { border-color: #c38bff; box-shadow: 0 0 18px #a66bffaa; animation: bump .45s ease; }
.hud .cores .slot.got svg { opacity: 1; filter: none; }
.hud .exit { justify-self: end; align-self: center; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 18px; font: 18px Bowlby, sans-serif;
  background: #3a1426; color: #ff9aa2; border: 3px solid #ff5a5f88; }
.hud .exit svg { width: 26px; height: 26px; }
.hud .exit.open { background: #0d3d3a; color: #7fffe9; border-color: #43e1cf; box-shadow: 0 0 22px #43e1cf88; animation: bump .5s ease; }
.hud .moves { display: flex; align-items: center; gap: 18px; font: 900 21px RC, sans-serif; letter-spacing: 1px; color: #bfe0f2; }
.hud .moves b { font: 28px Bowlby, sans-serif; color: #fff; margin-left: 6px; }
.hud .meter { justify-self: end; display: flex; gap: 4px; align-items: center; }
.hud .meter svg { width: 38px; height: 38px; transition: transform .25s, opacity .25s, filter .25s; }
.hud .meter svg.off { opacity: .28; filter: grayscale(1); transform: scale(.82); }
.hud .bottom { position: absolute; left: 22px; right: 22px; bottom: 26px; height: 236px; }
.hud .tipline { position: absolute; top: -6px; left: 0; right: 0; text-align: center; font: 900 21px RC, sans-serif; letter-spacing: 2px; color: #d6fff8; text-shadow: 0 3px 0 var(--ink), 0 0 12px #43e1cf88; }
.hud .side { position: absolute; bottom: 22px; display: flex; flex-direction: column; gap: 16px; }
.hud .side.l { left: 6px; } .hud .side.r { right: 6px; align-items: flex-end; }
.hud .side .btn { min-height: 84px; height: 84px; width: 152px; padding: 0 14px; font-size: 23px; border-radius: 26px; gap: 8px; }
.hud .side .btn svg { width: 38px; height: 38px; }
.dpad { position: absolute; left: 50%; bottom: 8px; width: 270px; height: 196px; transform: translateX(-50%); }
.dpad .btn { position: absolute; width: 88px; height: 88px; min-height: 88px; padding: 0; border-radius: 26px; }
.dpad .btn svg { width: 44px; height: 44px; }
.dpad .u { left: 91px; top: 0; } .dpad .l { left: 0; top: 104px; } .dpad .d { left: 91px; top: 104px; } .dpad .r { left: 182px; top: 104px; }
.dpad .btn.hint { animation: hintPulse .5s ease-in-out 5 alternate; }
@keyframes hintPulse { to { filter: brightness(1.4); box-shadow: 0 9px 0 var(--ink2), 0 0 40px #ffe14a; } }

/* rush hud */
.hud .rushbar { position: absolute; top: 112px; left: 22px; right: 22px; height: 128px; padding: 14px 20px; border-radius: 30px; }
.rushbar .line { display: flex; align-items: center; justify-content: space-between; font: 22px Bowlby, sans-serif; }
.rushbar .time { display: flex; align-items: center; gap: 8px; font: 36px Bowlby, sans-serif; color: #fff; }
.rushbar .time svg { width: 38px; height: 38px; }
.rushbar .time.warn { color: #ff7d73; animation: bump .5s ease infinite; }
.rushbar .bar { margin-top: 12px; height: 24px; border-radius: 14px; background: #06132a; border: 3px solid #04101f; overflow: hidden; }
.rushbar .fill { height: 100%; background: linear-gradient(#a2fff0, #3bd8c4); border-radius: 12px; transition: width .2s linear; }
.rushbar .fill.warn { background: linear-gradient(#ffb0a0, #ff5a5f); }

/* modal cards */
.card { position: absolute; left: 50px; right: 50px; top: 50%; translate: 0 -50%; padding: 44px 40px 46px; text-align: center; }
.card .btns { display: flex; flex-direction: column; gap: 24px; margin-top: 30px; }
.card .btns .row { display: flex; gap: 20px; }
.card .btns .row .btn { flex: 1; }
.stars { display: flex; justify-content: center; gap: 10px; margin: 26px 0 8px; }
.stars svg { width: 120px; height: 120px; opacity: .25; filter: grayscale(1); transform: scale(.7); transition: all .35s cubic-bezier(.2,1.6,.4,1); }
.stars svg:nth-child(2) { transform: translateY(-22px) scale(.7); }
.stars svg.on { opacity: 1; filter: drop-shadow(0 0 16px #ffd84a); transform: scale(1); }
.stars svg.on:nth-child(2) { transform: translateY(-22px) scale(1.1); }
.stats { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.stat { min-width: 150px; padding: 12px 16px; border-radius: 22px; background: #08172dcc; border: 3px solid #2d4d72; }
.stat small { display: block; font: 900 17px RC, sans-serif; letter-spacing: 2px; color: #9fc0de; }
.stat b { font: 36px Bowlby, sans-serif; color: #fff; }
.stat b.gold { color: var(--gold); }
.reward { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font: 34px Bowlby, sans-serif; color: var(--gold); text-shadow: 0 4px 0 var(--ink); }
.reward svg { width: 50px; height: 50px; }
.badge { display: inline-block; margin-top: 10px; padding: 8px 18px; border-radius: 16px; background: linear-gradient(#ffe98f, #ffb02a); color: var(--ink); font: 22px Bowlby, sans-serif; border: 3px solid var(--ink); transform: rotate(-3deg); }
.toggles { display: flex; gap: 18px; justify-content: center; margin-top: 8px; }
.toggles .btn { flex: 1; }
.btn.off { filter: grayscale(1) brightness(.7); }
.keys { margin-top: 22px; font: 800 19px RC, sans-serif; color: #a6c4dd; letter-spacing: .5px; line-height: 1.45; }

/* shop */
.shop .info { position: absolute; left: 40px; right: 40px; bottom: 60px; padding: 30px 30px 34px; text-align: center; }
.shop .nav { position: absolute; top: 560px; left: 30px; right: 30px; display: flex; justify-content: space-between; }
.shop .nm { font: 40px Bowlby, sans-serif; color: var(--cream); text-shadow: 0 4px 0 var(--ink); }
.shop .dots { display: flex; justify-content: center; gap: 10px; margin: 14px 0 22px; }
.shop .dots i { width: 16px; height: 16px; border-radius: 50%; background: #2d4d72; }
.shop .dots i.on { background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* trophies / help lists */
.list { position: absolute; top: 136px; left: 30px; right: 30px; bottom: 40px; padding: 22px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.trow { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: 22px; background: #0a1b33cc; border: 3px solid #23426a; }
.trow svg { width: 52px; height: 52px; }
.trow .tx { flex: 1; text-align: left; }
.trow .tx b { display: block; font: 22px Bowlby, sans-serif; color: var(--cream); }
.trow .tx small { font: 800 17px RC, sans-serif; color: #9fc0de; }
.trow .pg { width: 120px; text-align: right; font: 20px Bowlby, sans-serif; color: #9fc0de; }
.trow.done { border-color: #ffc943; background: linear-gradient(90deg, #3a2c0acc, #0a1b33cc); }
.trow.done .pg { color: var(--gold); }
.trow.locked svg { opacity: .35; filter: grayscale(1); }
.help .trow { padding: 8px 14px; }
.help .trow svg { width: 58px; height: 58px; }

/* toast + tip banner */
.toast { position: absolute; left: 60px; right: 60px; top: 262px; padding: 16px 22px; border-radius: 26px; text-align: center; font: 24px Bowlby, sans-serif; color: var(--ink);
  background: linear-gradient(#fffbe6, #ffe3a0); border: 4px solid var(--ink); box-shadow: 0 7px 0 var(--ink2); animation: toastIn .35s cubic-bezier(.2,1.5,.4,1) both; pointer-events: none; }
.toast.teal { background: linear-gradient(#d8fff8, #7af0de); }
.toast.red { background: linear-gradient(#ffe0dc, #ff9a90); }
.toast.out { animation: toastOut .3s ease both; }
@keyframes toastIn { from { transform: translateY(-30px) scale(.8); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-20px); opacity: 0; } }
.banner { position: absolute; left: 0; right: 0; top: 520px; text-align: center; pointer-events: none; animation: bannerIn 1.9s ease both; }
.banner .t { font: 70px Bowlby, sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink), 0 0 30px #43e1cf; }
.banner .s { font: 900 24px RC, sans-serif; letter-spacing: 5px; color: #9ff7ea; text-shadow: 0 3px 0 var(--ink); margin-top: 6px; }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(1.6); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }

/* fx layer */
.float { position: absolute; transform: translate(-50%, -50%); font: 34px Bowlby, sans-serif; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); animation: floatUp 1.25s ease-out both; }
.float.core { color: #e2c4ff; } .float.gold { color: var(--gold); } .float.red { color: #ff8a80; } .float.teal { color: #7fffe9; } .float.big { font-size: 46px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -200%) scale(1); } }
.flash { position: absolute; inset: 0; opacity: 0; animation: flash .45s ease-out; mix-blend-mode: screen; }
@keyframes flash { 10% { opacity: var(--o); } 100% { opacity: 0; } }
.confetti { position: absolute; width: 16px; height: 22px; top: -30px; border-radius: 4px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(1400px) rotate(var(--r)); } }

/* level complete celebration */
.sunburst { position: absolute; left: 50%; top: 50%; width: 1800px; height: 1800px; margin: -900px 0 0 -900px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #ffd84a55 0deg 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0, #000 18%, transparent 58%); mask: radial-gradient(circle, #000 0, #000 18%, transparent 58%);
  animation: spin 14s linear infinite, burstIn .5s ease-out both; }
.screen > .sunburst { opacity: .8; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes burstIn { from { scale: .2; opacity: 0; } }
.celebrate { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, #ffe08a55 0, #04102a88 75%); animation: fadeIn .2s ease both; }
.celebrate .sunburst { background: repeating-conic-gradient(from 0deg, #fff3a8aa 0deg 8deg, transparent 8deg 20deg); }
.celebrate.out { animation: celebOut .35s ease forwards; }
@keyframes celebOut { to { opacity: 0; transform: scale(1.15); } }
.ctext { position: relative; text-align: center; animation: slam .55s cubic-bezier(.2,1.6,.35,1) both; }
.ctext .l1, .ctext .l2 { font: 96px Bowlby, sans-serif; line-height: .92; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.ctext .l1 { color: #6ff3e1; text-shadow: 0 7px 0 #138a8f, 0 13px 0 var(--ink); }
.ctext .l2 { color: #ffd23f; font-size: 92px; text-shadow: 0 7px 0 #c4650b, 0 13px 0 var(--ink), 0 0 60px #ffcf3a; }
.cstars { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.cstars span { animation: starPop .45s cubic-bezier(.2,1.8,.4,1) both; opacity: .25; filter: grayscale(1); }
.cstars span.on { opacity: 1; filter: drop-shadow(0 0 18px #ffd84a); }
.cstars span:nth-child(2) { translate: 0 -20px; }
.cstars svg { width: 110px; height: 110px; }
@keyframes slam { 0% { transform: scale(3) rotate(-8deg); opacity: 0; } 60% { transform: scale(.92) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(-2deg); } }
@keyframes starPop { from { transform: scale(0) rotate(-90deg); } }

/* tutorial hand */
.hand { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 5; }
.hand svg { position: absolute; width: 96px; height: 96px; left: -30px; top: -10px; filter: drop-shadow(0 6px 8px #000a); animation: handUp 1.4s ease-in-out infinite; }
.hand .lbl { position: absolute; left: -110px; width: 220px; top: 96px; text-align: center; font: 26px Bowlby, sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.hand .trail { position: absolute; width: 18px; left: -9px; border-radius: 10px; background: linear-gradient(#6fffe800, #6fffe8); box-shadow: 0 0 18px #6fffe8; animation: trailUp 1.4s ease-in-out infinite; }
@keyframes handUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 65% { transform: translateY(-260px); opacity: 1; } 85%, 100% { transform: translateY(-260px); opacity: 0; } }
@keyframes trailUp { 0% { top: 0; height: 0; opacity: 0; } 15% { opacity: .9; } 65% { top: -250px; height: 250px; opacity: .9; } 100% { top: -250px; height: 250px; opacity: 0; } }
.hand.down { rotate: 180deg; } .hand.down .lbl, .hand.down svg { rotate: 0deg; }
.hand.left { rotate: -90deg; } .hand.right { rotate: 90deg; }
.hand.down .lbl { rotate: 180deg; } .hand.left .lbl { rotate: 90deg; top: 60px; } .hand.right .lbl { rotate: -90deg; top: 60px; }

/* loading screen */
#loader { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  background: radial-gradient(ellipse at 50% 40%, #1d2f6e 0, #0b1433 55%, #03060f 100%); transition: opacity .4s; }
#loader.gone { opacity: 0; pointer-events: none; }
#loader .logo-word { font-size: 120px; }
#loader .lbar { width: 460px; height: 36px; border-radius: 20px; background: #06132a; border: 5px solid var(--ink); box-shadow: 0 7px 0 var(--ink2), inset 0 3px 0 #000a; overflow: hidden; }
#loader .lfill { width: 0; height: 100%; border-radius: 14px; background: linear-gradient(#a2fff0, #3bd8c4); box-shadow: inset 0 4px 0 #ffffff88; transition: width .2s; }
#loader .ltxt { font: 28px Bowlby, sans-serif; color: #cfeaf5; letter-spacing: 2px; text-shadow: 0 3px 0 var(--ink); }
#loader .mapi { position: absolute; bottom: 60px; width: 220px; }

.hud .side .btn span { white-space: nowrap; }

/* HUD: R restart button and hint badge */
.btn.rbtn b { font: 44px Bowlby, sans-serif; line-height: 1; color: #fff6d8; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); margin-top: -4px; }
.hud .side .btn[data-action="hint"] { overflow: visible; }
.badge { position: absolute; top: -16px; right: -10px; display: flex; align-items: center; gap: 3px; height: 34px; min-width: 34px; padding: 0 10px;
  border-radius: 17px; border: 3px solid var(--ink); font: 17px Bowlby, sans-serif; font-style: normal; color: #fff; box-shadow: 0 3px 0 var(--ink2); white-space: nowrap; }
.badge svg { width: 22px !important; height: 22px !important; }
.badge.free { background: linear-gradient(#7dffa8, #22c467); color: var(--ink); }
.badge.coin { background: linear-gradient(#fffbe8, #f4e4b4); color: var(--ink); padding-left: 4px; }
.badge.video { background: linear-gradient(#ff8a8a, #e2393f); padding: 0 6px; }
.badge.video svg { width: 26px !important; height: 26px !important; }
.badge.time { background: linear-gradient(#ff8a8a, #e2393f); }