/* Kolpip — home menu ("lobby"), straight from the Shapile model. The menu never scrolls. */
body.menu{height:100%;overflow:hidden;touch-action:none}
#menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.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,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 14px)}

/* top row: player chip + best-stage chip, never bare text */
.mTop{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-right:62px}
.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:66%}
.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}
.starsChip{--c:var(--ink);--d:var(--inkDeep);display:flex;align-items:center;gap:6px;padding:5px 13px 5px 8px;border-radius:30px;flex:none;
  box-shadow:0 5px 0 rgba(0,0,0,.25)}
.starsChip::after{display:none}
.starsChip svg{width:25px;height:25px;color:var(--gold);filter:drop-shadow(0 2px 0 #9A6A00)}
.starsChip b{font:20px var(--display)}

/* floating settings button */
.sideBtn{--c:#fff;--d:var(--whiteDeep);position:fixed;right:16px;top:calc(env(safe-area-inset-top,0px) + 14px);width:46px;height:46px;
  border-radius:14px;color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:12;padding:0}
.sideBtn svg{width:22px;height:22px;position:relative;z-index:1}

/* logo + mascots: three Kolpip balls bobbing out of step */
.brand{margin-top:3vh;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.mascots{display:flex;gap:6px;align-items:flex-end}
.mascots svg{width:54px;height:54px;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(27,19,64,.35))}
.mascots svg:nth-child(2){width:66px;height:66px;animation-delay:.35s}
.mascots svg:nth-child(3){animation-delay:.7s}
.logo{font-size:clamp(46px,15vw,70px);line-height:.9;margin-top:10px;font-family:var(--display);font-weight:400;transform:rotate(-4deg);
  -webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink);color:#fff;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}

/* centre: world banner, giant PLAY, stages + sign-in */
.mMain{margin:auto 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:14px}
.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%;transition:transform .08s}
.worldBanner:active{transform:skewX(-10deg) translateY(3px)}
.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;color:var(--wt,#fff)}
.worldBanner .cnt{font:15px var(--display);background:var(--panel2);border-radius:5px;padding:1px 7px}

.play{--c:var(--green);--d:var(--greenDeep);width:100%;height:90px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  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}

.mRow{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mRow .chunk{height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;
  font:21px var(--display);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.mRow .chunk.white{-webkit-text-stroke:0}
.mRow .chunk svg{width:24px;height:24px;position:relative;z-index:1}
.mRow .chunk:not(.white) svg{color:#fff;filter:drop-shadow(0 2px 0 var(--ink))}
.mRow .chunk span{position:relative;z-index:1}

.signin{--c:#fff;--d:var(--whiteDeep);color:var(--ink);display:flex;align-items:center;gap:8px;padding:7px 16px 9px;border-radius:30px;font:900 14px var(--body)}
.signin svg{width:20px;height:20px;color:var(--purple)}
.signin::after{display:none}

/* dock: icon buttons with a short caption under each */
.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}
.hot{width:70px;height:70px;border-radius:20px;animation:wiggle 4s ease-in-out infinite}
.hot svg{width:36px;height:36px}
.hot .ring{position:absolute;inset:-4px;border-radius:24px;border:3px solid var(--c,var(--coral));opacity:0;pointer-events:none;animation:ring 2s ease-out infinite}
.hot:active{animation:none}
.badge{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}
.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 var(--body);opacity:0;transform:translate(-50%,6px);transition:.25s;pointer-events:none}
.shareToast.show{opacity:1;transform:translate(-50%,0)}

/* store badge */
.mBottom{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:10px}
.getApp{display:flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:14px;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;display:grid;place-items:center;overflow:hidden;background:var(--ink)}
.gaIcon img{width:32px;height:32px}
.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}

@media (max-height:740px){ .brand{margin-top:1vh} .mascots svg{width:44px;height:44px} .mascots svg:nth-child(2){width:54px;height:54px}
  .logo{font-size:clamp(40px,12vw,56px)} .play{height:78px} .play .t{font-size:40px} .mMain{gap:12px}
  .ico{width:52px;height:52px} .hot{width:62px;height:62px} .mDock{margin-top:8px} .mRow .chunk{height:48px} }
@media (max-height:640px){ .mascots{display:none} .mRow .chunk{height:44px;font-size:18px} }