:root{
  --cream:#FFF8E7;
  --cream-2:#FFEFC9;
  --ink:#1E2A38;
  --coral:#FF7A5C;
  --blue:#3D9BE9;
  --gold:#FFC93C;
  --grass:#7FD16B;
  --berry:#FF5C6C;
  --straw:#D9A85C;
  --shadow:0 4px 0 var(--ink);
  --shadow-lg:0 6px 0 var(--ink);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;padding:0;}
body{
  font-family:'Fredoka',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:#A8E6FF;
  overflow:hidden;
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;user-select:none;-webkit-user-select:none;}

[data-meeem-game]{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* ---------------- HUD ---------------- */
.hud{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px 14px;
  z-index:10;
}
.hud-left,.hud-right{display:flex;align-items:center;gap:8px;min-width:0;}

.stat{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:3px 10px 4px;
  display:flex;
  flex-direction:column;
  line-height:1;
  min-width:0;
}
.stat-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
  color:#7A8794;
}
.stat-value{
  font-size:22px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transform:skewX(-7deg);
  transform-origin:left center;
  white-space:nowrap;
}
.stat-score .stat-value{color:var(--ink);min-width:44px;}
.stat-time .stat-value{color:var(--ink);min-width:52px;text-align:right;}
.stat-time.low{background:#FFE1E4;}
.stat-time.low .stat-value{color:#D3283C;}

.streak{
  background:var(--gold);
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:var(--shadow);
  font-size:16px;
  font-weight:700;
  padding:6px 8px;
  min-width:44px;
  text-align:center;
  transition:transform .16s ease-out;
}
.streak.pop{transform:scale(1.22) rotate(-4deg);}

.lives{display:flex;gap:5px;align-items:center;background:var(--cream);border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:7px 9px;}
.pip{
  width:13px;height:13px;border-radius:50%;
  background:var(--berry);
  border:2.5px solid var(--ink);
  transition:transform .18s ease-out,background .18s ease-out;
}
.pip.off{background:#D9D3C4;transform:scale(.78);}

.stamina{
  position:absolute;
  left:12px;right:12px;bottom:3px;
  height:8px;
  border:2.5px solid var(--ink);
  border-radius:99px;
  background:#E7E0CE;
  overflow:hidden;
}
.stamina-fill{
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#7FD16B,#4FA84E);
  transition:width .08s linear,background .2s linear;
}
.stamina-fill.low{background:linear-gradient(90deg,#FFC93C,#FF7A5C);}

/* ---------------- STAGE ---------------- */
#stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:#A8E6FF;
}
#scene{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

.pause-btn{
  position:absolute;
  top:8px;right:10px;
  width:44px;height:44px;
  display:grid;place-items:center;
  border:3px solid var(--ink);
  border-radius:14px;
  background:var(--cream);
  color:var(--ink);
  box-shadow:var(--shadow);
  z-index:8;
  padding:0;
  cursor:pointer;
}
.pause-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);}

/* ---------------- OVERLAYS ---------------- */
/* Menus are children of the full-height game root, never of the stage,
   so they cover the HUD and the touch controls too. */
.overlay,
[data-meeem-game-menu]{
  position:absolute;
  inset:0;
}
.overlay{
  z-index:60;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(30,42,56,.42);
  z-index:60;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.overlay.hidden{display:none !important;}
#app > .overlay{position:absolute;inset:0;}
======= REPLACE<<<<<<< SEARCH
.hidden{display:none !important;}

.card{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:16px;
  width:min(430px,100%);
  margin:auto;
  text-align:center;
}

.logo{
  font-size:clamp(28px,9vw,42px);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  color:var(--ink);
  transform:skewX(-5deg);
}
.logo span{color:var(--coral);text-shadow:2px 2px 0 var(--gold);}

.tagline{
  font-size:14px;
  line-height:1.45;
  color:#4A5A6A;
  margin:8px 0 12px;
}

.how{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:14px;
}
.how-item{
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--cream-2);
  border:2.5px solid var(--ink);
  border-radius:11px;
  padding:5px 8px;
  font-size:12px;
  font-weight:500;
  text-align:left;
}
.how-item .k{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  background:var(--ink);
  color:var(--cream);
  border-radius:6px;
  padding:3px 5px;
  white-space:nowrap;
}
.how-item .hl{color:#4A5A6A;}

.btn{
  display:block;
  width:100%;
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:var(--shadow);
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  padding:12px 14px;
  margin-top:10px;
  cursor:pointer;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:disabled{background:#9FC6E4;color:#F2F7FB;}
.btn-ghost{background:var(--cream);color:var(--ink);font-size:15px;padding:10px;}

.best-row{
  margin-top:10px;
  font-size:13px;
  color:#5C6B7A;
}
.best-row b{color:var(--ink);font-size:15px;}

/* leaderboard */
.lb{margin-top:12px;text-align:left;}
.lb-title{font-size:11px;letter-spacing:.14em;font-weight:600;color:#7A8794;margin-bottom:6px;}
.lb-row{
  display:flex;align-items:center;gap:8px;
  font-size:13px;
  padding:5px 8px;
  border-radius:9px;
  background:var(--cream-2);
  border:2px solid rgba(30,42,56,.16);
  margin-bottom:4px;
}
.lb-row.you{background:#DFF1FF;border-color:var(--blue);}
.lb-rank{width:18px;font-weight:700;color:#7A8794;}
.lb-handle{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.lb-score{font-weight:700;font-variant-numeric:tabular-nums;}
.lb-note{font-size:11px;color:#8A95A1;margin-top:6px;line-height:1.4;}
.lb-btn{
  width:100%;
  margin-top:6px;
  border:2.5px solid var(--ink);
  border-radius:11px;
  background:var(--gold);
  color:var(--ink);
  font-weight:700;
  font-size:14px;
  padding:9px;
  box-shadow:0 3px 0 var(--ink);
  cursor:pointer;
}
.lb-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);}

/* results */
.card-title{
  font-size:clamp(22px,7vw,30px);
  font-weight:700;
  letter-spacing:.02em;
  transform:skewX(-5deg);
  color:var(--coral);
}
.sub{font-size:13px;color:#5C6B7A;margin:6px 0 6px;}
.big-score{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
  margin:6px 0 12px;
  color:var(--ink);
}
.big-score span{font-size:clamp(40px,13vw,58px);font-weight:700;line-height:1;transform:skewX(-7deg);}
.big-score small{font-size:13px;color:#7A8794;font-weight:500;}

.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;}
.result-cell{
  background:var(--cream-2);
  border:2.5px solid var(--ink);
  border-radius:12px;
  padding:7px 3px;
  display:flex;flex-direction:column;gap:2px;
}
.result-cell b{font-size:20px;line-height:1;font-variant-numeric:tabular-nums;}
.result-cell span{font-size:9.5px;letter-spacing:.04em;color:#6B7A88;line-height:1.15;}

.save-status{
  font-size:12px;
  color:#5C6B7A;
  min-height:16px;
  margin-bottom:6px;
  line-height:1.35;
}
.save-status.ok{color:#2E8B4F;font-weight:600;}
.save-status.err{color:#C6303F;font-weight:600;}

/* banner + hint */
.banner{
  position:absolute;
  left:50%;top:14%;
  transform:translateX(-50%);
  background:var(--cream);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:7px 14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.03em;
  white-space:nowrap;
  z-index:9;
  pointer-events:none;
  animation:bannerIn .26s cubic-bezier(.2,1.5,.5,1);
}
.banner.bad{background:var(--berry);color:#fff;}
.banner.gold{background:var(--gold);}
.banner.good{background:#B9F0A8;}
@keyframes bannerIn{
  from{transform:translateX(-50%) scale(.6);opacity:0;}
  to{transform:translateX(-50%) scale(1);opacity:1;}
}

.hint{
  position:absolute;
  left:50%;bottom:14%;
  transform:translateX(-50%);
  background:var(--gold);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:5px 12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  z-index:9;
  pointer-events:none;
  animation:hintPulse 1s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{transform:translateX(-50%) scale(1);}
  50%{transform:translateX(-50%) scale(1.09);}
}

/* ---------------- CONTROLS DOCK ---------------- */
.controls{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 12px;
  z-index:5;
}
.stick-wrap{display:flex;align-items:center;}
.stick{
  position:relative;
  width:96px;height:96px;
  border-radius:50%;
  background:rgba(255,248,231,.62);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  touch-action:none;
  display:grid;place-items:center;
}
.stick-ring{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:2px dashed rgba(30,42,56,.28);
  pointer-events:none;
}
.stick-knob{
  position:absolute;
  left:50%;top:50%;
  width:44px;height:44px;
  margin-left:-22px;margin-top:-22px;
  border-radius:50%;
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(30,42,56,.35);
  pointer-events:none;
  will-change:transform;
}

.btns{display:flex;align-items:flex-end;gap:9px;}
.gbtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:58px;height:58px;
  padding:0;
  border-radius:50%;
  border:3px solid var(--ink);
  background:var(--cream);
  color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
  cursor:pointer;
  touch-action:none;
  transition:transform .07s ease-out,box-shadow .07s ease-out;
}
.gbtn span{
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
}
.gbtn:active,.gbtn.pressed{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);}
.gbtn-dive{
  width:74px;height:74px;
  background:var(--coral);
  color:#fff;
}
.gbtn-dive span{font-size:9.5px;}
.gbtn-sprint.pressed{background:var(--gold);color:var(--ink);}
.gbtn-jump.pressed{background:#B9F0A8;color:var(--ink);}

/* short screens */
@media (max-height:560px){
  .logo{font-size:26px;}
  .tagline{font-size:12px;margin:5px 0 8px;}
  .how{gap:4px;margin-bottom:8px;}
  .how-item{font-size:10.5px;padding:3px 6px;}
  .btn{font-size:15px;padding:9px 12px;margin-top:7px;}
  .card{padding:12px;border-radius:16px;}
  .stick{width:82px;height:82px;}
  .gbtn{width:52px;height:52px;}
  .gbtn-dive{width:66px;height:66px;}
  .controls{padding:6px 10px 8px;}
  .stat-value{font-size:19px;}
}
@media (max-width:360px){
  .stat{padding:2px 7px 3px;}
  .stat-value{font-size:19px;}
  .streak{font-size:14px;min-width:38px;padding:5px 6px;}
  .lives{padding:6px 7px;gap:4px;}
  .pip{width:11px;height:11px;}
  .gbtn{width:54px;height:54px;}
  .gbtn-dive{width:68px;height:68px;}
}

@media (prefers-reduced-motion: reduce){
  .banner{animation:none;}
  .hint{animation:none;}
  .streak.pop{transform:none;}
  *{transition-duration:.01ms !important;}
}