/* Morfall — game screen. Cartoon "lobby" style: thick dark outlines, chunky buttons that squash when pressed,
   Lilita One for titles / numbers, Nunito for text, landscape worlds drawn behind (game.js). */
:root{
  --ink:#1B1340; --inkDeep:#0F0A26;
  --panel:#2D2370; --panel2:#3B2F8F;
  --text:#FFFFFF; --muted:#C9C3F2;
  --danger:#FF5E57; --dangerDeep:#C7302B;
  --success:#3DDC84;
  --gold:#FFD23F; --goldDeep:#E0A200;
  --purple:#9B5DFF; --purpleDeep:#6A32D1;
  --green:#3DDC84; --greenDeep:#1E9E57;
  --blue:#3DA9FC; --blueDeep:#1C74C2;
  --whiteDeep:#C9CCE6;
  --accent:#3DA9FC; --sky:#5FB8F0; --sky2:#BDE8FF;
  --display:'Lilita One',Impact,'Arial Black',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--sky);color:var(--text);font-family:Nunito,system-ui,sans-serif;font-weight:800;overflow:hidden;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
.outlined{font-family:var(--display);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}

/* ---------- shared chunky look: outline + hard shadow below + top shine; squashes when pressed ---------- */
.chunk,.btn,.sideBtn,.bonusBtn,.stBack,.xBtn,.capNew{
  --c:var(--gold); --d:var(--goldDeep);
  position:relative;border:3px solid var(--ink);border-radius:18px;background:var(--c);color:#fff;cursor:pointer;font:inherit;text-decoration:none;
  box-shadow:inset 0 -6px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.5),0 5px 0 var(--ink);
  transition:transform .08s,box-shadow .08s}
.chunk:active,.btn:active,.sideBtn:active,.bonusBtn:active,.stBack:active,.xBtn:active,.capNew:active{
  transform:translateY(4px);box-shadow:inset 0 -3px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.5),0 1px 0 var(--ink)}
.chunk::after,.btn::after{content:"";position:absolute;left:10px;right:10px;top:4px;height:32%;border-radius:12px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,0))}
.purple{--c:var(--purple);--d:var(--purpleDeep)} .green{--c:var(--green);--d:var(--greenDeep)}
.blue{--c:var(--blue);--d:var(--blueDeep)} .white{--c:#fff;--d:var(--whiteDeep);color:var(--ink)}
.red{--c:var(--danger);--d:var(--dangerDeep)}

/* ---------- HUD (in game) ---------- */
#hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.topRow{align-self:stretch;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 0}
.stageBadge{font-family:var(--display);font-size:15px;letter-spacing:.03em;color:#fff;background:var(--ink);padding:6px 12px;border-radius:7px;
  min-width:84px;text-align:center;transform:skewX(-8deg);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.scoreBox{display:flex;flex-direction:column;align-items:center;gap:0}
#score{font-family:var(--display);font-size:38px;line-height:1;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}
#mult{font-family:var(--display);font-size:15px;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;margin-top:1px}
#mult.hot{color:var(--gold)}
.progBox{margin-top:4px;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
#progTxt{font-family:var(--display);font-size:15px;letter-spacing:.04em;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
/* wide gate bar: 70px free on each side for the music / pause buttons */
.progBar{width:min(440px,calc(100vw - 140px));height:18px;border-radius:11px;background:rgba(27,19,64,.55);border:3px solid var(--ink);overflow:hidden;box-shadow:0 3px 0 var(--ink)}
#progFill{height:100%;width:0;border-radius:0 8px 8px 0;transition:width .3s;
  background:linear-gradient(180deg,#FFF3A8 0 30%,var(--gold) 30% 72%,var(--goldDeep) 72%)}
.timeBadge{font-family:var(--display);font-size:16px;background:#fff;color:var(--ink);padding:4px 9px;border-radius:9px;border:3px solid var(--ink);
  min-width:84px;text-align:center;box-shadow:0 3px 0 var(--ink)}

.sideBtn{--c:#fff;--d:var(--whiteDeep);position:fixed;left:14px;width:46px;height:46px;border-radius:14px;color:var(--ink);pointer-events:auto;
  display:flex;align-items:center;justify-content:center;z-index:5;padding:0}
.sideBtn svg{width:22px;height:22px}
#musicBtn{top:calc(env(safe-area-inset-top) + 58px);z-index:12}
#pauseBtn{top:calc(env(safe-area-inset-top) + 114px)}
#musicBtn.off svg{opacity:.45}
#musicBtn .slash{display:none}
#musicBtn.off .slash{display:inline}
/* menu: music button at the top right, next to the stars */
body:not(.inGame) #musicBtn{left:auto;right:16px;top:calc(env(safe-area-inset-top) + 14px)}
body.inGame #musicBtn{left:14px;right:auto}

/* ---------- Bonus buttons ---------- */
#bonusCol{position:fixed;right:14px;top:calc(env(safe-area-inset-top) + 58px);display:none;flex-direction:column;gap:12px;z-index:5}
.bonusBtn{--c:#fff;--d:var(--whiteDeep);width:48px;height:48px;border-radius:14px;color:var(--ink);display:flex;align-items:center;justify-content:center;
  opacity:.45;touch-action:none;padding:0}
.bonusBtn svg{width:24px;height:24px;position:relative;z-index:1}
.bonusBtn .sweep{position:absolute;inset:0;border-radius:11px;overflow:hidden;pointer-events:none}
.bonusBtn .cnt{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;border-radius:11px;background:var(--success);color:var(--ink);border:2px solid var(--ink);
  font:13px var(--display);display:none;align-items:center;justify-content:center;padding:0 5px;z-index:2}
.bonusBtn{background:#fff}                     /* --c is an "r,g,b" triplet here (set in index.php) */
.bonusBtn.ready{opacity:1;background:rgb(var(--c));color:#fff}
.bonusBtn.ready svg{filter:drop-shadow(0 2px 0 var(--ink))}
.bonusBtn.ready .cnt{display:flex}
.bonusBtn.ready .sweep::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sweep 1.8s infinite}
.bonusBtn.on{opacity:1;background:rgb(var(--c));color:#fff;box-shadow:0 0 0 3px #fff,0 0 22px rgba(var(--c),.9),0 5px 0 var(--ink)}
@keyframes sweep{to{left:130%}}

/* ---------- in-game message (no box: outlined text, the game stays visible) ---------- */
#tuto{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);max-width:300px;padding:0;text-align:center;
  font:900 17px/1.4 Nunito,sans-serif;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
  display:none;pointer-events:none;z-index:4}
#tuto b{color:var(--gold)}

/* ---------- Overlays and cards ---------- */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(27,19,64,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}
.overlay.show{display:flex}
.card{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:4px solid var(--ink);border-radius:26px;
  padding:26px 22px 22px;width:100%;max-width:350px;text-align:center;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.14),0 8px 0 var(--ink),0 24px 50px rgba(0,0,0,.35)}
.card h1{font:40px/1 var(--display)}
.card h2{font:30px/1.05 var(--display);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);margin-bottom:6px}
.card p{color:var(--muted);font-size:15px;font-weight:700;line-height:1.45;margin:10px 0 18px}
.card p b{color:#fff}
.tag{display:inline-block;font:15px var(--display);letter-spacing:.04em;color:var(--ink);background:var(--gold);border:3px solid var(--ink);
  border-radius:10px;padding:3px 14px;margin:-44px 0 12px;transform:rotate(-2deg);box-shadow:0 3px 0 var(--ink)}
.tag.bad{background:var(--danger);color:#fff}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:10px 14px;margin-top:14px;border-radius:18px;
  font:24px var(--display);letter-spacing:.02em;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.btn.ghost{--c:#fff;--d:var(--whiteDeep);color:var(--ink);-webkit-text-stroke:0;font:900 16px Nunito,sans-serif;min-height:48px;padding:8px 14px}
.btn.danger,#confirmBox .btn.danger{--c:var(--danger);--d:var(--dangerDeep);color:#fff}
.btn:disabled{opacity:.55}
.small{font-size:12px;color:var(--muted);margin-top:14px}
.bigNum{font:46px var(--display);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);margin:8px 0 2px}

/* ================= Splash ================= */
#splash{position:fixed;inset:0;z-index:50;background:linear-gradient(180deg,#5FB8F0,#BDE8FF 70%,#4F9A5A 70.2%,#2F7A45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .5s}
#splash.hide{opacity:0;pointer-events:none}
#splash .logo{font-size:56px;transform:rotate(-4deg);-webkit-text-stroke:9px var(--ink);text-shadow:0 6px 0 var(--ink)}
#splash .logo{display:block}
#splash .bar{width:140px;height:16px;border-radius:10px;background:rgba(27,19,64,.4);border:3px solid var(--ink);overflow:hidden}
#splash .bar i{display:block;height:100%;width:40%;background:var(--gold);border-radius:6px;animation:load 1s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ================= Main menu ================= */
#menu{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.menuWrap{position:relative;width:100%;max-width:440px;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 14px)}
.mTop{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-right:62px}   /* room for the music button */
.mPlayer{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.player{--c:#fff;--d:var(--whiteDeep);display:flex;align-items:center;gap:8px;padding:4px 14px 6px 4px;border-radius:30px;color:var(--ink);max-width:100%}
.player::after{display:none}
.player .av{width:38px;height:38px;flex:none;border-radius:50%;background:var(--purple);border:3px solid var(--ink);display:grid;place-items:center}
.player .av svg{width:22px;height:22px;color:#fff}
.pTxt{min-width:0;text-align:left}
.pTxt b{display:block;font:18px/1.05 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.pTxt small{display:block;font-weight:900;font-size:11.5px;color:#6A6F9C;line-height:1.2;white-space:nowrap}
.who{display:flex;align-items:center;gap:8px;padding-left:6px}
.who a{font:900 12px Nunito,sans-serif;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-decoration:none}
.who .adminLink{font:12px var(--display);letter-spacing:.06em;color:#fff;background:var(--danger);border:2px solid var(--ink);border-radius:8px;padding:1px 8px;-webkit-text-stroke:0}
.starsChip{--c:var(--ink);--d:var(--inkDeep);display:flex;align-items:center;gap:6px;padding:5px 13px 5px 8px;border-radius:30px;flex:none;cursor:default;
  box-shadow:0 5px 0 rgba(0,0,0,.25)}
.starsChip::after{display:none}
.starsChip:active{transform:none}
.starsChip svg{width:25px;height:25px;color:var(--gold);filter:drop-shadow(0 2px 0 #9A6A00)}
.starsChip b{font:20px var(--display)}

.brand{margin-top:3.5vh;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.mascot{width:96px;height:78px;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(27,19,64,.35))}
.mascot .mBody{fill:#FF6B5E}
.mascot .eye{animation:blink 4s infinite;transform-origin:center;transform-box:fill-box}
@keyframes bob{50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.logo{font-size:clamp(54px,17vw,78px);line-height:.9;margin-top:6px;transform:rotate(-4deg);-webkit-text-stroke:9px var(--ink);text-shadow:0 7px 0 var(--ink);
  display:flex;justify-content:center}
.logo span{display:inline-block;animation:hop 3.2s ease-in-out infinite}
.logo span:nth-child(odd){color:var(--gold)}
.logo span:nth-child(2){animation-delay:.08s}.logo span:nth-child(3){animation-delay:.16s}.logo span:nth-child(4){animation-delay:.24s}
.logo span:nth-child(5){animation-delay:.32s}.logo span:nth-child(6){animation-delay:.40s}.logo span:nth-child(7){animation-delay:.48s}
@keyframes hop{0%,70%,100%{transform:none}78%{transform:translateY(-8px)}86%{transform:translateY(1px)}}

/* main block (Play, Map, Endless) in the middle of the screen */
.mMain{margin:auto 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:14px}

/* bottom dock: lobby-style icon buttons, Feedback in the middle */
.mDock{position:relative;width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding:0 2px 19px;margin-top:14px}
.ico{position:relative;width:58px;height:58px;display:grid;place-items:center;border-radius:16px;padding:0;flex:none}
.ico svg{width:30px;height:30px;position:relative;z-index:1}
.ico:not(.white) svg{color:#fff;filter:drop-shadow(0 2px 0 var(--ink))}
.ico.white svg{color:var(--ink)}
.ico i{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font:12.5px var(--display);font-style:normal;white-space:nowrap;
  color:#fff;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;z-index:2}
.shareToast{position:absolute;left:50%;bottom:96px;z-index:6;padding:7px 12px;border-radius:10px;white-space:nowrap;
  background:var(--ink);color:#fff;font:900 13px Nunito,sans-serif;opacity:0;transform:translate(-50%,6px);transition:.25s;pointer-events:none}
.shareToast.show{opacity:1;transform:translate(-50%,0)}

/* Feedback button: bigger, coral, pulsing ring + "!" badge + a little shake every few seconds (calms down once a message is sent) */
.coral{--c:#FF5E7E;--d:#C92F55}
.fbBtn{width:70px;height:70px;border-radius:20px}
.fbBtn svg{width:36px;height:36px}
.fbBtn .ring{position:absolute;inset:-4px;border-radius:24px;border:3px solid #FF5E7E;opacity:0;pointer-events:none}
.fbBadge{position:absolute;top:-10px;right:-10px;z-index:3;width:24px;height:24px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);
  display:grid;place-items:center;font:15px/1 var(--display);color:var(--ink);font-style:normal}
.fbBtn:not(.hot) .fbBadge{display:none}
.fbBtn.hot{animation:fbWiggle 4s ease-in-out infinite}
.fbBtn.hot .ring{animation:fbRing 2s ease-out infinite}
.fbBtn.hot .fbBadge{animation:fbPop 2s ease-in-out infinite}
@keyframes fbRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
@keyframes fbWiggle{0%,82%,100%{transform:none}85%{transform:rotate(-9deg) scale(1.06)}88%{transform:rotate(8deg) scale(1.06)}91%{transform:rotate(-6deg)}94%{transform:rotate(4deg)}}
@keyframes fbPop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.fbBtn.hot:active{animation:none}

.worldBanner{display:flex;align-items:center;gap:10px;padding:6px 18px;background:var(--ink);transform:skewX(-10deg);border-radius:7px;box-shadow:0 5px 0 rgba(0,0,0,.25);max-width:100%}
.worldBanner>*{transform:skewX(10deg);white-space:nowrap}
.worldBanner small{font-weight:900;font-size:11px;letter-spacing:1px;color:#A9ADDA}
.worldBanner b{font:18px var(--display);letter-spacing:.02em}
.wbStars{display:flex;align-items:center;gap:4px;font:15px var(--display);color:var(--gold)}
.wbStars svg{width:16px;height:16px}

.play{width:100%;height:90px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible;
  box-shadow:inset 0 -9px 0 var(--d),inset 0 4px 0 rgba(255,255,255,.6),0 7px 0 var(--ink),0 14px 22px rgba(0,0,0,.22);animation:breathe 1.6s ease-in-out infinite}
.play:active{animation:none;box-shadow:inset 0 -4px 0 var(--d),inset 0 4px 0 rgba(255,255,255,.6),0 2px 0 var(--ink)}
.play .t{font:46px/.95 var(--display);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);position:relative;z-index:1}
.play .s{font-weight:900;font-size:14px;color:var(--ink);opacity:.8;letter-spacing:1px;margin-top:3px;position:relative;z-index:1}
.play .shine{position:absolute;inset:0;border-radius:21px;overflow:hidden;pointer-events:none}
.play .shine::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-50%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%,55%{left:-50%}100%{left:130%}}
@keyframes breathe{50%{transform:scale(1.025)}}

.mRow{width:100%;display:flex;gap:12px}
.mid{flex:1;height:60px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:18px;padding:0 8px}
.mid svg{width:28px;height:28px;color:#fff;filter:drop-shadow(0 2px 0 var(--ink));position:relative;z-index:1;flex:none}
.mid span{font:23px var(--display);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;position:relative;z-index:1}
.mid small{position:absolute;top:-13px;right:-6px;z-index:2;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:10px;
  font:13px var(--display);padding:1px 7px;transform:rotate(6deg)}
.signin{display:flex;align-items:center;gap:8px;padding:7px 16px 9px;border-radius:30px;font:900 14px Nunito,sans-serif}
.signin svg{width:20px;height:20px;color:var(--purple)}
.signin::after{display:none}
.mBottom{width:100%;display:flex;flex-direction:column;align-items:center}
.mBottom:has(.getAppRow:not(:empty)),.mBottom:has(.getApp[style*="flex"]){margin-top:12px}

/* "Get the app" (website only) */
.getAppRow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.getAppRow:empty{display:none}
.getApp{display:flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:14px;text-decoration:none;color:#fff;
  background:#000;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .08s}
.getApp:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.gaIcon{width:32px;height:32px;border-radius:8px;flex:none}
.gaTxt{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.gaTxt small{font-size:8.5px;letter-spacing:.06em;font-weight:900;color:#ddd}
.gaTxt b{font:16px var(--display);letter-spacing:.01em}
.gaStore{width:18px;height:18px;color:#3DDC84;margin-left:2px;flex:none}
.getApp.duo{gap:7px;padding:4px 10px 4px 4px}
.getApp.duo .gaIcon{width:28px;height:28px}
.getApp.duo .gaTxt b{font-size:14px}

@media (max-height:740px){ .brand{margin-top:1vh} .mascot{width:74px;height:60px} .logo{font-size:clamp(48px,14vw,64px)}
  .play{height:78px} .play .t{font-size:40px} .mMain{gap:12px} .mid{height:54px} .ico{width:52px;height:52px} .fbBtn{width:62px;height:62px} .mDock{margin-top:8px} }
@media (max-height:640px){ .mascot{display:none} .worldBanner{display:none} }
@media (max-width:345px){ .ico{width:50px;height:50px} .ico svg{width:26px;height:26px} .fbBtn{width:60px;height:60px} .ico i{font-size:11px} }

/* feedback on game over / stage cleared: a small link, and now and then a bigger bubble asking for it */
.fbLink{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px auto 0;padding:4px 8px;background:none;border:0;cursor:pointer;
  color:var(--muted);font:800 13px Nunito,sans-serif;text-decoration:underline;text-underline-offset:3px}
.fbLink svg{width:16px;height:16px;flex:none}
.fbLink.ask{width:100%;margin-top:16px;padding:11px 14px;border-radius:16px;background:var(--gold);border:3px solid var(--ink);color:var(--ink);
  font:900 14.5px/1.25 Nunito,sans-serif;text-decoration:none;box-shadow:0 4px 0 var(--ink);animation:fbAsk 2.4s ease-in-out infinite;position:relative}
.fbLink.ask::before{content:"";position:absolute;top:-11px;left:50%;margin-left:-9px;border:9px solid transparent;border-top:0;border-bottom:10px solid var(--ink)}
.fbLink.ask svg{width:22px;height:22px;color:#FF5E7E}
@keyframes fbAsk{0%,100%{transform:none}50%{transform:translateY(-3px)}}

/* account wizard: a guest adding a password keeps its name — big reminder */
.nameRemind{margin:4px 0 12px;padding:10px 12px;border-radius:14px;background:rgba(255,210,63,.14);border:2px dashed var(--gold);display:flex;flex-direction:column;align-items:center;gap:3px}
.nameRemind small{font-size:10.5px;font-weight:900;letter-spacing:.06em;color:var(--gold)}
.nameRemind b{font:28px var(--display);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;word-break:break-all}
.nameRemind span{font-size:12.5px;color:var(--muted);font-weight:800}
.nameRemind a{color:#fff}

/* guest name card */
.nameCard p{margin:8px 0 14px}
.nbRow{display:flex;gap:8px}
#nbName{flex:1;min-width:0;border-radius:14px;border:3px solid var(--ink);padding:10px 12px;font:20px var(--display);color:var(--ink);background:#fff;outline:none;text-align:center;letter-spacing:.02em}
#nbName:focus{box-shadow:0 0 0 3px var(--gold)}
.nbDice{flex:none;width:54px;border-radius:14px;border:3px solid var(--ink);background:var(--gold);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.nbDice svg{width:28px;height:28px}
.nbDice:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.nbDice.spin svg{animation:nbSpin .4s ease-out}
@keyframes nbSpin{to{transform:rotate(360deg)}}

/* feedback form */
.fbCard{max-width:370px}
.fbCard p{margin:8px 0 14px}
.fbYou{margin:10px 0 8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.1);font-size:13px;line-height:1.35;color:rgba(255,255,255,.85);text-align:left;white-space:pre-wrap;word-break:break-word}
.fbYou b{display:block;font-size:11px;color:rgba(255,255,255,.55);margin-bottom:2px}
.fbAns{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:var(--gold);border:3px solid var(--ink);font-weight:700;font-size:15px;line-height:1.4;color:var(--ink);text-align:left;white-space:pre-wrap;word-break:break-word}
.fbChips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:12px}
.fbChips button{padding:6px 12px;border-radius:20px;border:3px solid var(--ink);background:#fff;color:var(--ink);font:900 13.5px Nunito,sans-serif;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.fbChips button.on{background:var(--gold);transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#fbText{width:100%;resize:none;border-radius:14px;border:3px solid var(--ink);padding:10px 12px;font:700 15px/1.35 Nunito,sans-serif;color:var(--ink);background:#fff;outline:none}
#fbText:focus{box-shadow:0 0 0 3px var(--gold)}
.fbCount{text-align:right;font-size:11px;color:var(--muted);margin-top:4px}
.fbErr{color:#FFB3AE;font-size:13px;min-height:0;margin-top:4px}
.fbErr:empty{display:none}

/* ================= Stage map ================= */
#stages{padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px)}
.stCard{max-width:440px;max-height:min(100%,800px);width:100%;min-width:0;display:flex;flex-direction:column;padding:14px 12px 12px}
.stHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.stHead h2{margin:0;font-size:26px;line-height:1.05}
.stCount{font-size:12.5px;font-weight:900;color:var(--muted);margin-top:4px}
.stBack{--c:#fff;--d:var(--whiteDeep);width:44px;height:44px;flex:none;border-radius:13px;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0}
.stBack svg{width:24px;height:24px}
.stBack.ghostSpace{visibility:hidden}
.stGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:min-content;align-content:start;gap:9px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 auto;
  padding:9px 4px 6px;margin:0 -4px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;border-radius:16px}
.stGrid::-webkit-scrollbar{display:none}
.stGrid.map{display:block;position:relative;padding:0;margin:0;border:3px solid var(--ink)}
.mapWrap{position:relative;width:100%}
.mapWorld{position:absolute;left:0;right:0;border-top:3px solid var(--ink);overflow:hidden}
.mapWorld:first-child{border-top:0}
.mwLbl{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;align-items:flex-end;font:15px var(--display);color:#fff;
  -webkit-text-stroke:4px var(--ink);paint-order:stroke fill;line-height:1}
.mwLbl.lft{right:auto;left:8px;align-items:flex-start}
.mwLbl small{font:900 9.5px Nunito,sans-serif;letter-spacing:.1em;-webkit-text-stroke:3px var(--ink)}
.mapPath{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mapPath path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mapPath .road{stroke:rgba(255,255,255,.75);stroke-width:9;stroke-dasharray:1 15}
.mapPath .done{stroke:var(--gold);stroke-width:10;filter:drop-shadow(0 3px 0 var(--ink))}
.mapNode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;padding:0;margin:0;color:#fff;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;z-index:1}
.mnBall{width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  background:var(--kc,#3DA9FC);border:3px solid var(--ink);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.45),0 4px 0 var(--ink);transition:transform .1s}
.mnBall b{font:21px/1 var(--display);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.mnBall svg{width:14px;height:14px;color:#fff;filter:drop-shadow(0 1px 0 var(--ink))}
.mapNode:active .mnBall{transform:translateY(3px)}
.mapNode.k-classic{--kc:#5C6BC0}.mapNode.k-run{--kc:#3DA9FC}.mapNode.k-moving{--kc:#9C6BFF}.mapNode.k-meteor{--kc:#FF8A4C}
.mapNode.k-twin{--kc:#2FC98A}.mapNode.k-tap{--kc:#FF6F98}.mapNode.k-orbit{--kc:#E8B33C}
.mapNode.locked{cursor:default}
.mapNode.locked .mnBall{background:#8C88B3;color:#fff}
.mapNode.locked .mnBall svg{width:22px;height:22px}
.mapNode.next .mnBall{width:72px;height:72px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.45),0 0 0 4px #fff,0 0 0 7px var(--ink),0 0 26px 8px rgba(255,210,63,.8);
  animation:nodePulse 1.6s ease-in-out infinite}
.mapNode.next .mnBall b{font-size:27px}
@keyframes nodePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.mapNode.final .mnBall{width:76px;height:76px;--kc:#E8B33C}
.mapNode.final.locked .mnBall{background:#B79A4C}
.mnStars{display:flex;gap:0;margin-top:1px}
.mnStars i{width:17px;height:17px;color:rgba(255,255,255,.55);display:block}
.mnStars i svg{width:100%;height:100%;stroke:var(--ink);stroke-width:2;paint-order:stroke fill;overflow:visible}
.mnStars i.on{color:var(--gold)}
.mnPlay{position:absolute;top:-34px;left:50%;transform:translateX(-50%);padding:2px 12px 3px;border-radius:10px;background:var(--gold);color:#fff;border:3px solid var(--ink);
  font:16px var(--display);-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;box-shadow:0 3px 0 var(--ink);animation:playBob 1.2s ease-in-out infinite}
@keyframes playBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
.mnFinal{font:12px var(--display);letter-spacing:.08em;color:var(--gold);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.mnName{display:none;font:900 11px Nunito,sans-serif;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;white-space:nowrap}
.mapNode.next .mnName,.mapNode.final .mnName{display:block}
.mapNode.nope .mnBall{animation:nodeNope .35s}
@keyframes nodeNope{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.mapNode.unlocking .mnBall{animation:nodeUnlock 1.1s .3s cubic-bezier(.2,1.6,.4,1) both,nodePulse 1.6s 1.4s ease-in-out infinite}
@keyframes nodeUnlock{0%{transform:scale(.5);filter:brightness(2.4)}60%{transform:scale(1.25)}100%{transform:scale(1);filter:none}}
.stCount .mapStarsTot{color:var(--gold);display:inline-flex;align-items:center;gap:2px}
.stCount .mapStarsTot svg{width:13px;height:13px}
.stCount .mapRank{color:#fff}
.stLegend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:4px;flex:none}
#stLegend .btn{margin-top:10px;width:100%}
body.stOpen #musicBtn{display:none}   /* stage map: the music button would cover the back arrow */
/* old grid tiles (not used by the map, kept for safety) */
.stTile{border:3px solid var(--ink);border-radius:14px;background:var(--panel2);color:#fff}

/* ================= Sign in / create account ================= */
#welcome{z-index:20;background:rgba(27,19,64,.7)}
.xBtn{--c:#fff;--d:var(--whiteDeep);position:absolute;top:-16px;right:-12px;width:42px;height:42px;border-radius:13px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.xBtn svg{width:20px;height:20px}
.field{width:100%;border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:14px;
  padding:12px 14px;font:900 16px Nunito,sans-serif;margin-top:10px;outline:none;text-align:center;box-shadow:inset 0 3px 0 rgba(27,19,64,.12)}
.field::placeholder{color:#9A97B8;font-weight:800}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(61,169,252,.35)}
.field.bad{border-color:var(--danger)}
.capRow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.capImg{width:200px;height:64px;border-radius:12px;background:var(--panel);border:3px solid var(--ink)}
.capNew{--c:#fff;--d:var(--whiteDeep);width:46px;height:46px;border-radius:13px;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0}
.capNew svg{width:22px;height:22px}
.capIn{text-transform:uppercase;letter-spacing:.3em}
.capIn::placeholder{letter-spacing:normal;text-transform:none}
.linkBtn{background:none;border:0;color:#fff;font:900 14px Nunito,sans-serif;margin-top:16px;cursor:pointer;text-decoration:underline}
.note{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.45}
.note a{color:var(--gold);font-weight:900}
.okLine{color:var(--success)!important;font-weight:900;margin:4px 0 8px!important}
.card .warnNote,.warnNote{font-size:13px;font-weight:800;line-height:1.45;color:var(--ink);background:var(--gold);border:3px solid var(--ink);border-radius:12px;padding:8px 11px;margin-top:12px}
#wMsg{font-size:14px;font-weight:900;min-height:18px;margin-top:12px;line-height:1.4}
#wMsg.err{color:#FF8A84} #wMsg.ok{color:var(--success)}
#confirmBox{z-index:40}
.keyBox{font:24px var(--display);letter-spacing:.06em;color:var(--ink);background:#fff;border:3px dashed var(--ink);border-radius:14px;padding:12px 8px;margin-top:12px;
  user-select:all;-webkit-user-select:all}

/* HUD only during a game */
body:not(.inGame) #hud{display:none}

/* ---------- Playable ad (Google Ads, includes/build_playable.php) ---------- */
body.playable #menu, body.playable #quitBtn, body.playable #shareBtn{display:none!important}
/* ad review ("misleading ad design"): nothing that could pass for a system / player control or a notification badge */
body.playable #musicBtn, body.playable #pauseBtn, body.playable #time, body.playable #bonusCol, body.playable #tipBox{display:none!important}
#pEnd p{margin:8px 0 16px;line-height:1.45}
#pEnd, body.playable #done{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
#pEnd .card, body.playable #done .card{background:rgba(45,35,112,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}   /* see-through: the game stays visible */
.pHand{position:fixed;left:50%;top:79%;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  transform:translateX(-50%);color:#fff}
.pHand svg{width:58px;height:58px;filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink));animation:pSwipe 1.8s ease-in-out infinite}
.pHand span{font:17px var(--display);letter-spacing:.04em;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;animation:pBlink 1.8s ease-in-out infinite}
@keyframes pSwipe{0%,100%{transform:translateX(-46px) rotate(-8deg)}50%{transform:translateX(46px) rotate(8deg)}}
@keyframes pBlink{0%,100%{opacity:.75}50%{opacity:1}}
.pInstall{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);z-index:30;display:none;
  font:900 12px Nunito,sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.9);background:rgba(27,19,64,.45);border:2px solid rgba(27,19,64,.6);
  border-radius:999px;padding:6px 16px}   /* discreet: never the main button of the ad */

/* game tips: see-through, the game stays visible behind */
#tipBox{background:rgba(27,19,64,.3);-webkit-backdrop-filter:none;backdrop-filter:none}
#tipBox .card{background:linear-gradient(180deg,rgba(59,47,143,.92),rgba(45,35,112,.92))}

/* ---------- stage cleared: festive victory card ---------- */
.winFlash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
.winFlash.go{animation:winFlash .55s ease-out}
@keyframes winFlash{0%{opacity:.75}100%{opacity:0}}
#done{background:rgba(27,19,64,.25);-webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden}   /* fireworks stay visible */
#done.show{animation:doneIn .35s .85s both}
@keyframes doneIn{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
#done .card{z-index:1;border-color:var(--ink);box-shadow:inset 0 3px 0 rgba(255,255,255,.14),0 0 0 4px var(--gold),0 8px 0 4px var(--ink),0 0 60px rgba(255,210,63,.45)}
#done.show .card{animation:cardPop .6s .85s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cardPop{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
#doneTitle{font-size:32px;color:var(--gold)}
#done.show #doneTitle{animation:titleBounce .7s 1.15s both}
@keyframes titleBounce{0%{transform:scale(.3)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
#doneScore{font-size:54px}
.rays{position:absolute;left:50%;top:50%;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,210,63,.22) 0 9deg,transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);
  animation:raysSpin 14s linear infinite}
@keyframes raysSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rays,#done.show #doneTitle,.play,.logo span,.mascot{animation:none}}
.doneStars{display:flex;justify-content:center;gap:8px;margin:8px 0 0;min-height:48px}
.doneStars i{width:42px;height:42px;color:rgba(255,255,255,.22);display:block}
.doneStars i:nth-child(2){width:52px;height:52px;margin-top:-8px}
.doneStars i svg{width:100%;height:100%;overflow:visible;stroke:var(--ink);stroke-width:2;paint-order:stroke fill}
.doneStars i.on{color:var(--gold);filter:drop-shadow(0 3px 0 var(--ink))}
#done.show .doneStars i.on{animation:starPop .45s cubic-bezier(.2,1.8,.4,1) both}
@keyframes starPop{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.doneStarsHint{font-size:12.5px;font-weight:800;color:var(--muted);min-height:16px;margin:-2px 0 6px}
#doneRank{font:15px var(--display);color:var(--success);min-height:18px;margin:-8px 0 8px}
#doneRank .up,.overRank .up{color:var(--success)}
.overRank{font:15px var(--display);color:var(--success);min-height:18px;margin:-6px 0 10px}

/* ---------- big gate counter (see-through, never in the way) ---------- */
#gateCount{position:fixed;left:50%;top:29%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;text-align:center;opacity:0;
  color:#fff;font-family:var(--display);line-height:1;white-space:nowrap}
#gateCount b{display:block;font-size:60px;font-weight:400;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill}
#gateCount b i{font-style:normal;font-size:.55em;margin:0 .08em;vertical-align:.18em}
#gateCount span{display:block;margin-top:3px;font-size:14px;letter-spacing:.12em;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
#gateCount.last b, #gateCount.last span{color:var(--gold)}
#gateCount.pop{animation:gcFade 2.2s ease-in-out both}
@keyframes gcFade{0%{opacity:0}30%{opacity:.75}60%{opacity:.75}100%{opacity:0}}

/* first-launch demo: discreet way to the sign-in */
.demoSignin{position:fixed;right:14px;top:calc(env(safe-area-inset-top) + 62px);z-index:13;padding:6px 13px 7px;border-radius:999px;
  font:900 12.5px Nunito,sans-serif;color:var(--ink);background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}

/* ================= Endless mode: its own sober, dark look (a real fall through the sky) ================= */
.depthBox,#zoneBanner,#gauge{display:none}
body.endless{--tech:'Chakra Petch',system-ui,sans-serif;background:#05060C}
body.endless.inGame .depthBox{display:block;text-align:center;margin-top:2px}
.depthBox b{display:block;font:700 58px/1 var(--tech);color:#fff;letter-spacing:.01em;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.depthBox b i{font-style:normal;font-size:22px;color:#9AA6BF;margin-left:4px}
body.endless .stageBadge{font:700 11.5px var(--tech);letter-spacing:.25em;color:#C9D2E3;background:transparent;border:1px solid rgba(201,210,227,.45);
  border-radius:3px;padding:4px 8px;transform:none;box-shadow:none;min-width:0}
body.endless .scoreBox{display:none!important}
body.endless .progBar{height:6px;border:0;border-radius:3px;background:rgba(255,255,255,.12);box-shadow:none;width:min(300px,calc(100vw - 150px));margin-top:2px}
body.endless #progFill{background:#E6EBF4;border-radius:3px;transition:width .3s,background .3s}
body.endless .progBox.beat #progFill{background:#F2B24A;box-shadow:0 0 10px rgba(242,178,74,.7)}
body.endless #gateCount{font-family:var(--tech);top:33%}
body.endless #gateCount b{font:700 64px var(--tech);-webkit-text-stroke:0;text-shadow:0 2px 16px rgba(0,0,0,.6);color:#fff}
body.endless #gateCount b i{color:#9AA6BF}
body.endless #gateCount span{font:600 12px var(--tech);letter-spacing:.3em;-webkit-text-stroke:0;color:#C9D2E3}
body.endless #gateCount.last b,body.endless #gateCount.last span{color:#F2B24A}
body.endless .timeBadge{font:700 15px var(--tech);background:transparent;color:#DDE3EE;border:1px solid rgba(255,255,255,.3);border-radius:3px;box-shadow:none;min-width:74px;padding:3px 8px;letter-spacing:.04em}
body.endless .scoreBox{align-items:flex-end}
body.endless #score{font:700 19px var(--tech);-webkit-text-stroke:0;text-shadow:none;color:#fff}
body.endless #mult,body.endless #mult.hot{font:600 11.5px var(--tech);-webkit-text-stroke:0;color:#E8B07A;letter-spacing:.08em}
body.endless .progBox{margin-top:2px}
body.endless #progTxt{font:600 11px var(--tech);letter-spacing:.28em;color:#8C93C9;-webkit-text-stroke:0}
body.endless .sideBtn{background:rgba(5,6,12,.35);border:1px solid rgba(255,255,255,.3);color:#fff;box-shadow:none;border-radius:10px;width:42px;height:42px}
body.endless .sideBtn::after{display:none}
body.endless.inGame #zoneBanner{display:block;position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 150px);transform:translateX(-50%);z-index:4;pointer-events:none;
  font:700 12.5px var(--tech);letter-spacing:.35em;color:var(--z,#E8B07A);white-space:nowrap;padding:5px 14px;
  border-top:1px solid var(--z,#E8B07A);border-bottom:1px solid var(--z,#E8B07A);background:rgba(5,7,15,.35);opacity:0}
#zoneBanner.show{animation:zoneIn 3s ease-in-out both}
@keyframes zoneIn{0%{opacity:0;letter-spacing:.6em}15%,75%{opacity:1;letter-spacing:.35em}100%{opacity:0}}
body.endless.inGame #gauge{display:block;position:fixed;right:9px;top:calc(env(safe-area-inset-top) + 210px);bottom:calc(env(safe-area-inset-bottom) + 170px);width:5px;
  border-radius:3px;background:linear-gradient(#4A3A55,#33405A 25%,#1C2433 50%,#151A2C 75%,#06070D);border:1px solid rgba(255,255,255,.15);z-index:3;pointer-events:none}
#gauge i{position:absolute;left:50%;width:13px;height:13px;margin:-6px 0 0 -6.5px;border-radius:50%;background:#F2B24A;box-shadow:0 0 0 3px rgba(242,178,74,.25);transition:top .4s}
/* endless cards (pause, game over, tip): dark glass, sharp type */
body.endless .overlay{background:rgba(3,4,10,.55)}
body.endless .card{background:rgba(14,17,28,.92);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
body.endless .card h2{font:700 28px var(--tech);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.02em}
body.endless .card p{color:#9AA3B8}
body.endless .tag{font:700 11px var(--tech);letter-spacing:.25em;color:#E8B07A;background:transparent;border:1px solid rgba(232,176,122,.5);box-shadow:none;transform:none;margin:0 0 12px;border-radius:3px}
body.endless .tag.bad{color:#E0675C;border-color:rgba(224,103,92,.5)}
body.endless .btn{font:700 17px var(--tech);letter-spacing:.12em;-webkit-text-stroke:0;color:#14100A;background:#F2B24A;border:0;border-radius:10px;box-shadow:none;min-height:52px}
body.endless .btn::after{display:none}
body.endless .btn.ghost{background:transparent;color:#DDE3EE;border:1px solid rgba(255,255,255,.25);font:600 14px var(--tech);letter-spacing:.1em}
body.endless .overRank{font:600 14px var(--tech);color:#C9D2E3}
body.endless .trapNote{color:#E8B07A}
body.endless #tipBox .card{background:rgba(14,17,28,.9)}
body.endless #tipBox p b{color:#F2B24A}
body.endless .runBig{display:inline-block;font:700 64px/1 var(--tech);color:#fff;margin:4px 0 2px}

/* victory card: the friend to free (one per world, one padlock per stage) */
.prison{margin:6px -6px 0}
.prison:empty{display:none}
.prisonSvg{display:block;width:100%;height:auto;max-height:124px;border-radius:14px;overflow:visible}
.prisonSvg text{font:900 10.5px Nunito,sans-serif;fill:#1B1340}
.prisonCap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin-top:4px;font-size:12.5px}
.prisonCap b{font-family:'Lilita One',sans-serif;font-weight:400;letter-spacing:.5px;color:#fff;font-size:14px}
.prisonCap em{font-style:normal;color:rgba(255,255,255,.7);font-weight:700;width:100%;text-align:center;font-size:11.5px}
.prisonCap .locks{display:inline-flex;gap:4px}
.prisonCap .locks i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid var(--ink)}
.prisonCap .locks i.on{background:var(--gold)}
.prisonCap .locks i.new{animation:dotIn .4s 2.6s both}
@keyframes dotIn{0%{background:rgba(255,255,255,.18);transform:scale(1)}60%{transform:scale(1.6)}100%{background:var(--gold);transform:scale(1)}}
/* the padlock of this stage: shakes, springs open, drops away; its bar slides up and away */
#done.show .lockGo{animation:lockGo 1s 2s both;transform-box:fill-box;transform-origin:center}
#done.show .lockGo .sh{animation:shackle .2s 2.35s both}
@keyframes lockGo{0%,30%{transform:rotate(0)}8%,22%{transform:rotate(-14deg)}15%{transform:rotate(14deg)}45%{transform:translateY(-6px) rotate(-8deg);opacity:1}100%{transform:translate(18px,60px) rotate(70deg);opacity:0}}
@keyframes shackle{to{transform:translateY(-5px)}}
#done.show .barGo{animation:barGo .6s 2.55s both}
@keyframes barGo{to{transform:translateY(-90px);opacity:0}}
#done.show .cageGone{animation:barGo .7s 2.2s both}
/* the friend inside hops for joy; your shape bounces; the bubble pops */
.prisonSvg .spark,.prisonSvg .ray{opacity:0;transform-box:view-box}
#done.show .spark{animation:spark .6s 2.35s both;transform-box:fill-box;transform-origin:center}
#done.show .ray{animation:ray .5s 2.35s both}
@keyframes spark{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.2)}}
@keyframes ray{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.prisonSvg .fr,.prisonSvg .me{transform-box:fill-box;transform-origin:50% 100%}
#done.show .fr.hop{animation:hop .5s 2.75s 3 both}
#done.show .me.jump2{animation:hop .5s 2.9s 3 both}
#done.show .fr.jump{animation:hop .55s 2.9s 4 both}
#done.show .frOut{animation:frOut .7s 2.45s both}
@keyframes frOut{0%{transform:translateY(70px)}70%{transform:translateY(-14px)}100%{transform:translateY(0)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.12,.86)}55%{transform:translateY(-12px) scale(.94,1.08)}}
.prisonSvg .bubble{transform-box:fill-box;transform-origin:10% 100%}
#done.show .bubble.pop{animation:bubPop .45s 2.8s both}
@keyframes bubPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.prison.freedNow .prisonCap b{animation:titleBounce .7s 2.9s both;color:var(--gold)}
@media (prefers-reduced-motion:reduce){#done.show .lockGo,#done.show .barGo,#done.show .fr,#done.show .me,#done.show .bubble,#done.show .frOut,#done.show .cageGone{animation:none}#done.show .lockGo,#done.show .barGo,#done.show .cageGone{opacity:0}}
@media (max-height:720px){
  .prisonSvg{max-height:92px}
  #done .doneStars{min-height:34px;margin-top:2px}
  #done .doneStars i{width:30px;height:30px}
  #done .doneStars i:nth-child(2){width:38px;height:38px;margin-top:-5px}
  #done .doneStarsHint{display:none}
  #done #doneInfo{margin:2px 0}
  #done .btn{margin-top:6px;min-height:44px}
  #done #nextBtn{min-height:52px}
  #done .bigNum{font-size:36px;margin:4px 0 0}
  #done .prisonCap em{display:none}
  #done .fbLink{margin-top:8px;font-size:11px}
  #done.overlay{padding:12px 20px}
}