:root{
  --bg1:#baf4ff;
  --bg2:#5f8cff;
  --bg3:#5b2ab5;
  --ink:#1f1953;
  --gold:#ffd530;
  --cell:80px;
  --gap:8px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.82), transparent 14%),
    linear-gradient(145deg,var(--bg1),var(--bg2) 56%,var(--bg3));
  overflow-x:hidden;
  touch-action:manipulation;
}

body.playing{
  width:100vw;
  height:100dvh;
  overflow:hidden;
}

button{font:inherit}
.hidden{display:none!important}

.pillBtn,
.nameTag,
.homeLink{
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#211653;
  font-weight:1000;
  box-shadow:0 .9vh 1.8vh rgba(23,18,80,.18);
  cursor:pointer;
  text-decoration:none;
}

.roundBtn{
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#211653;
  font-weight:1000;
  font-size:1.25rem;
  box-shadow:0 .9vh 1.8vh rgba(23,18,80,.18);
  cursor:pointer;
}

.screen{display:none}
.screen.active{display:block}

/* Shared header for lobby only */
.brandHeader{
  width:100vw;
  height:20dvh;
  min-height:135px;
  max-height:220px;
  position:relative;
}

.brandHeader .gameLogo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(58vw,900px);
  max-width:88vw;
  height:19dvh;
  max-height:210px;
  object-fit:contain;
  filter:drop-shadow(0 1.2vh 1.8vh rgba(11,14,61,.32));
}

.brandHeader .roundBtn{
  position:absolute;
  right:3vw;
  top:3vh;
}

body.playing .brandHeader{
  display:none!important;
}

/* Loading */
.loadingScreen{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--bg1),var(--bg2),var(--bg3));
  color:white;
  font-weight:1000;
  z-index:9999;
}

.loadingScreen img{
  width:min(620px,82vw);
  filter:drop-shadow(0 1.2vh 2vh rgba(0,0,0,.25));
}

/* LOBBY */
#lobbyScreen.active{
  width:100vw;
  height:80dvh;
  overflow:hidden;
  padding:0;
}

.lobbyTop{
  width:min(1000px,90vw);
  height:7dvh;
  min-height:46px;
  margin:0 auto 1vh;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1vw;
}

.nameTag{
  justify-self:start;
  max-width:230px;
  padding:.7em 1.15em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(.9rem,1vw,1.1rem);
}

.starBank{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  padding:.65em 1.05em;
  font-weight:1000;
  box-shadow:0 .9vh 1.8vh rgba(23,18,80,.18);
}

.starBank span{
  color:#ffb719;
  font-size:1.3em;
  text-shadow:0 2px 0 #a65d00;
}

.lobbyTop .pillBtn{
  justify-self:end;
  padding:.72em 1.25em;
  font-size:clamp(.9rem,1vw,1.1rem);
}

.worldNav{
  width:min(1120px,90vw);
  height:69dvh;
  margin:0 auto;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 54px;
  align-items:center;
  gap:1vw;
}

.navBtn{
  justify-self:center;
}

.worldMap{
  width:100%;
  height:100%;
}

.worldCard{
  width:100%;
  height:100%;
  border:2px solid rgba(255,255,255,.65);
  border-radius:32px;
  padding:clamp(18px,2vw,30px);
  overflow:hidden;
  color:white;
  box-shadow:0 1.8vh 4vh rgba(20,15,80,.25);
  position:relative;
}

.worldCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle,rgba(255,255,255,.27),transparent 32%);
  pointer-events:none;
}

.worldHead{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:1vw;
}

.worldTitle{
  font-size:clamp(2.2rem,3.7vw,4.1rem);
  line-height:1;
  margin:0;
  font-weight:1000;
  text-shadow:0 .35vh .8vh rgba(0,0,0,.28);
}

.worldStars{
  background:rgba(0,0,0,.2);
  border-radius:999px;
  padding:.55em .85em;
  font-weight:1000;
  font-size:clamp(1rem,1.2vw,1.35rem);
}

.puzzleDots{
  position:relative;
  z-index:1;
  height:calc(69dvh - 118px);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1vw,17px);
  margin-top:clamp(16px,1.7vw,24px);
  align-items:center;
}

.puzzleDot{
  width:min(100%,9.2vh);
  min-width:58px;
  max-width:94px;
  aspect-ratio:1;
  justify-self:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.93);
  color:#211653;
  font-weight:1000;
  font-size:clamp(1.25rem,1.55vw,1.9rem);
  display:grid;
  place-items:center;
  position:relative;
  cursor:pointer;
  box-shadow:
    inset -4px -6px 10px rgba(0,0,0,.14),
    inset 4px 6px 10px rgba(255,255,255,.6),
    0 .7vh 1.4vh rgba(0,0,0,.18);
}

.puzzleDot.locked{
  background:rgba(38,62,119,.55);
  color:transparent;
  cursor:not-allowed;
}

.puzzleDot.locked::after{
  content:"🔒";
  color:#ffd44d;
  font-size:clamp(1.6rem,2.1vw,2.5rem);
  line-height:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

.puzzleDot.current{
  outline:4px solid #ffe839;
  outline-offset:3px;
}

.puzzleDot.hasStars{
  padding-bottom:1.05em;
}

.puzzleDot .miniStars{
  position:absolute;
  bottom:10%;
  left:0;
  right:0;
  text-align:center;
  color:#ffe839;
  font-size:clamp(.9rem,1vw,1.2rem);
  line-height:1;
  text-shadow:0 2px 0 #7a4a00, 0 0 5px rgba(255,255,255,.5);
}

/* PLAY SCREEN - rebuilt cleanly to match mockup */
#playScreen.active{
  width:100vw;
  height:100dvh;
  overflow:hidden;
  padding:0;
  margin:0;
}

.playGrid{
  width:100vw;
  height:100dvh;
  display:grid;
  grid-template-columns:48vw 52vw;
  overflow:hidden;
}

.leftBrandPanel{
  position:relative;
  height:100dvh;
  min-width:0;
}

.topButtonRow{
  position:absolute;
  top:13.5vh;
  left:50%;
  transform:translateX(-50%);
  width:42vw;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1vw;
}

.topButtonRow .pillBtn,
.topButtonRow .homeLink{
  height:4.4vh;
  min-height:34px;
  max-height:48px;
  padding:0 1.25vw;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(.82rem,.95vw,1.05rem);
  white-space:nowrap;
}

.topButtonRow .homeLink{
  border-radius:0;
  min-width:13vw;
  color:#050505;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}

.leftGameLogo{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  width:39vw;
  max-width:650px;
  height:42vh;
  object-fit:contain;
  filter:drop-shadow(0 1.6vh 2.2vh rgba(11,14,61,.32));
}

.playerRow{
  position:absolute;
  left:50%;
  top:73%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1vw;
}

.playerRow .nameTag,
.playStarBank{
  height:4.8vh;
  min-height:36px;
  max-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 1.05vw;
  font-size:clamp(.9rem,1vw,1.1rem);
}

.playStarBank{
  border-radius:999px;
  background:rgba(255,255,255,.92);
  font-weight:1000;
  box-shadow:0 .9vh 1.8vh rgba(23,18,80,.18);
}

.playStarBank span{
  color:#ffb719;
  font-size:1.35em;
  text-shadow:0 2px 0 #a65d00;
  margin-right:.45em;
}

.rightGamePanel{
  position:relative;
  height:100dvh;
  min-width:0;
  overflow:hidden;
}

.puzzleTitle{
  position:absolute;
  left:50%;
  top:10.5vh;
  transform:translateX(-50%);
  width:46vw;
  text-align:center;
  color:#3c4a69;
  font-family:"Trebuchet MS",system-ui,sans-serif;
  font-weight:1000;
  font-size:clamp(2rem,3vw,3.9rem);
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.titleStars{
  position:absolute;
  left:50%;
  top:16.2vh;
  transform:translateX(-50%);
  width:46vw;
  text-align:center;
  color:#ffe839;
  font-size:clamp(1.6rem,2.2vw,2.8rem);
  line-height:1;
  letter-spacing:.06em;
  text-shadow:0 2px 0 #7a4a00,0 0 8px rgba(255,255,255,.55);
  z-index:5;
  pointer-events:none;
}

.rightGamePanel .boardPanel{
  position:absolute;
  left:50%;
  top:49.5vh;
  transform:translate(-50%,-50%);
  max-width:43vw;
  max-height:62vh;
  padding:clamp(8px,.85vw,13px);
  border:3px solid rgba(255,255,255,.76);
  border-radius:clamp(22px,2vw,34px);
  background:rgba(255,255,255,.32);
  box-shadow:0 1.8vh 4vh rgba(20,15,80,.25), inset 0 0 0 2px rgba(255,255,255,.22);
  overflow:hidden;
}

.board{
  display:grid;
  grid-template-columns:repeat(var(--n),var(--cell));
  grid-template-rows:repeat(var(--n),var(--cell));
  gap:var(--gap);
  position:relative;
  z-index:2;
}

.bubble{
  width:var(--cell);
  height:var(--cell);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  cursor:pointer;
  font-weight:1000;
  font-size:calc(var(--cell) * .38);
  color:white;
  text-shadow:0 3px 4px rgba(0,0,0,.34);
  box-shadow:
    inset calc(var(--cell)*-.11) calc(var(--cell)*-.13) calc(var(--cell)*.2) rgba(0,0,0,.18),
    inset calc(var(--cell)*.1) calc(var(--cell)*.11) calc(var(--cell)*.17) rgba(255,255,255,.36),
    0 calc(var(--cell)*.12) calc(var(--cell)*.2) rgba(25,23,85,.24);
  position:relative;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .2s ease;
}

.bubble::after{
  content:"";
  position:absolute;
  top:14%;
  left:18%;
  width:30%;
  height:22%;
  border-radius:50%;
  background:rgba(255,255,255,.58);
  filter:blur(1px);
  transform:rotate(-25deg);
}

.bubble.selected{
  transform:scale(1.08);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.96),
    0 0 0 9px rgba(255,232,95,.74),
    inset -8px -10px 18px rgba(0,0,0,.18),
    inset 7px 8px 15px rgba(255,255,255,.36),
    0 12px 22px rgba(25,23,85,.3);
  z-index:8;
}

.bubble.neighbor{
  filter:brightness(1.16) saturate(1.12);
}

.bubble.pop{
  animation:popBurst .68s cubic-bezier(.15,.9,.2,1) forwards;
  pointer-events:none;
  z-index:20;
}

@keyframes popBurst{
  0%{transform:scale(1);opacity:1;filter:brightness(1)}
  24%{transform:scale(1.24);filter:brightness(1.7)}
  42%{transform:scale(.82);filter:brightness(2.2)}
  70%{transform:scale(1.65);opacity:.74;filter:brightness(2)}
  100%{transform:scale(0);opacity:0;filter:brightness(2)}
}

.floatLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:30;
}

.floatEq{
  position:absolute;
  transform:translate(-50%,-50%);
  font-weight:1000;
  font-size:clamp(1.05rem,4vw,2.4rem);
  color:white;
  text-shadow:0 5px 12px rgba(0,0,0,.42),0 0 16px rgba(255,255,255,.95);
  animation:floatAway 2.7s ease-out forwards;
  white-space:nowrap;
}

@keyframes floatAway{
  0%{opacity:0;transform:translate(-50%,0) scale(.82)}
  12%{opacity:1;transform:translate(-50%,-15px) scale(1.08)}
  72%{opacity:1;transform:translate(-50%,-78px) scale(1.14)}
  100%{opacity:0;transform:translate(-50%,-135px) scale(1.2)}
}

.spark{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:white;
  box-shadow:0 0 14px white;
  animation:spark .85s ease-out forwards;
}

@keyframes spark{
  from{transform:translate(0,0) scale(1);opacity:1}
  to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}

.rightGamePanel .playHud{
  position:absolute;
  left:50%;
  top:82.5vh;
  transform:translateX(-50%);
  width:min(42vw,620px);
  height:4.8vh;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.7vw;
  margin:0;
}

.rightGamePanel .hudCard{
  height:100%;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.82);
  border-radius:11px;
  padding:.25vh .7vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 .7vh 1.5vh rgba(23,18,80,.14);
}

.rightGamePanel .hudCard span{
  font-size:clamp(.42rem,.48vw,.58rem);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:1000;
  opacity:.72;
  line-height:1;
}

.rightGamePanel .hudCard strong{
  font-size:clamp(.78rem,.9vw,1.05rem);
  line-height:1.05;
}

.gameFooter{
  position:absolute;
  left:50%;
  top:91.5vh;
  transform:translateX(-50%);
  width:44vw;
  text-align:center;
  font-size:clamp(.9rem,1.12vw,1.3rem);
  color:white;
  text-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* Overlays */
.overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(7,10,38,.6);
  z-index:100;
  padding:18px;
}

.modal{
  width:min(520px,94vw);
  background:rgba(255,255,255,.96);
  border:3px solid rgba(255,255,255,.9);
  border-radius:30px;
  text-align:center;
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.resultStars{
  font-size:3rem;
  color:#ffbd19;
  text-shadow:0 3px 0 #9a5900;
  letter-spacing:.06em;
}

.modal h2{
  font-size:2.1rem;
  margin:.2rem 0 .3rem;
}

.modal p{
  font-weight:800;
  font-size:1.05rem;
}

.modalActions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:16px;
}

.tutorialBubbles{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:14px 0;
}

.miniBubble{
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  font-weight:1000;
  font-size:1.9rem;
  background:linear-gradient(145deg,#61d7ff,#197bd5);
  text-shadow:0 3px 4px rgba(0,0,0,.32);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.18),inset 8px 9px 16px rgba(255,255,255,.37),0 9px 16px rgba(0,0,0,.24);
}

.miniBubble:nth-child(2){
  background:linear-gradient(145deg,#7aff75,#22a849);
}

/* Mobile/tablet */
@media(max-width:900px){
  body.playing{
    overflow:auto;
  }

  #playScreen.active{
    height:auto;
    min-height:100dvh;
    overflow:auto;
  }

  .playGrid{
    height:auto;
    min-height:100dvh;
    grid-template-columns:1fr;
  }

  .leftBrandPanel{
    height:32dvh;
  }

  .topButtonRow{
    top:2vh;
    width:94vw;
    gap:2vw;
  }

  .topButtonRow .homeLink{
    min-width:0;
    flex:1;
  }

  .leftGameLogo{
    width:82vw;
    height:18vh;
    top:16vh;
  }

  .playerRow{
    top:28vh;
  }

  .rightGamePanel{
    height:68dvh;
  }

  .puzzleTitle{
    top:1vh;
    width:94vw;
    font-size:clamp(1.45rem,7vw,2.3rem);
  }

  .titleStars{
    top:6.3vh;
    width:94vw;
    font-size:clamp(1.4rem,6vw,2.2rem);
  }

  .rightGamePanel .boardPanel{
    top:36vh;
    max-width:94vw;
    max-height:50vh;
  }

  .rightGamePanel .playHud{
    top:62vh;
    width:90vw;
  }

  .gameFooter{
    top:66vh;
    width:94vw;
    font-size:.82rem;
  }

  #lobbyScreen.active{
    height:auto;
    min-height:80dvh;
    overflow:auto;
    padding-bottom:2vh;
  }

  .worldNav{
    width:96vw;
    height:auto;
    min-height:66dvh;
    grid-template-columns:40px minmax(0,1fr) 40px;
  }

  .worldCard{
    height:auto;
    min-height:66dvh;
    padding:14px;
  }

  .puzzleDots{
    height:auto;
    min-height:48dvh;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
  }

  .puzzleDot{
    min-width:46px;
    width:min(100%,8vh);
  }
}


/* ===== ZoodlePop 100 v1.8 polish ===== */

/* ZoodleBug Home now matches the Lobby/Restart hotdog style */
.topButtonRow .homeLink{
  border-radius:999px !important;
  min-width:clamp(170px,15vw,260px);
  background:rgba(255,255,255,.94);
  color:#211653;
  text-decoration:none;
  box-shadow:0 .9vh 1.8vh rgba(23,18,80,.18);
}

/* Make the main ZoodlePop 100 play logo much larger */
.leftGameLogo{
  width:min(47vw,820px) !important;
  height:56vh !important;
  max-height:58vh !important;
  top:46% !important;
}

/* Move player row slightly lower to make room for larger logo */
.playerRow{
  top:78% !important;
}

/* Double the stat header text, but keep stat boxes the same size */
.rightGamePanel .hudCard span{
  font-size:clamp(.84rem,.96vw,1.16rem) !important;
  line-height:1 !important;
  letter-spacing:.03em;
}

/* Slightly shrink stat numbers so the doubled headers still fit inside the same boxes */
.rightGamePanel .hudCard strong{
  font-size:clamp(.68rem,.82vw,.95rem) !important;
  line-height:1 !important;
}

/* Mobile: keep logo large but not destructive */
@media(max-width:900px){
  .leftGameLogo{
    width:92vw !important;
    height:21vh !important;
    max-height:22vh !important;
    top:16vh !important;
  }

  .playerRow{
    top:29vh !important;
  }

  .topButtonRow .homeLink{
    min-width:0;
  }
}


/* ===== ZoodlePop 100 v1.9 lobby rebuild from mockup ===== */

/* Hide old header on lobby; new lobby has its own left logo panel. */
body:not(.playing) .brandHeader{
  display:none !important;
}

body:not(.playing){
  width:100vw;
  height:100dvh;
  overflow:hidden;
}

#lobbyScreen.active{
  width:100vw;
  height:100dvh;
  padding:0;
  margin:0;
  overflow:hidden;
  display:block;
}

.lobbyGrid{
  width:100vw;
  height:91dvh;
  display:grid;
  grid-template-columns:40vw 60vw;
  align-items:center;
  overflow:hidden;
}

.lobbyBrandPanel{
  position:relative;
  height:91dvh;
  min-width:0;
}

.lobbyPlayerRow{
  position:absolute;
  top:14dvh;
  left:50%;
  transform:translateX(-50%);
  width:22vw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6vw;
}

.lobbyPlayerRow .nameTag,
.lobbyPlayerRow .starBank{
  height:clamp(34px,4.8dvh,54px);
  min-width:clamp(72px,7vw,112px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 clamp(12px,1vw,18px);
  background:rgba(255,255,255,.92);
  color:#211653;
  font-weight:1000;
  font-size:clamp(.9rem,1vw,1.12rem);
  box-shadow:0 .9dvh 1.8dvh rgba(23,18,80,.18);
}

.lobbyPlayerRow .starBank span{
  color:#ffb719;
  font-size:1.35em;
  text-shadow:0 2px 0 #a65d00;
}

.lobbyBigLogo{
  position:absolute;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%);
  width:37vw;
  max-width:600px;
  max-height:45dvh;
  object-fit:contain;
  filter:drop-shadow(0 1.6dvh 2.2dvh rgba(11,14,61,.32));
}

.lobbyButtonRow{
  position:absolute;
  left:50%;
  top:70dvh;
  transform:translateX(-50%);
  width:29vw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4vw;
}

.lobbyButtonRow .homeLink,
.lobbyButtonRow .pillBtn{
  height:clamp(34px,4.8dvh,54px);
  border:0;
  border-radius:999px;
  padding:0 clamp(18px,1.8vw,34px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.94);
  color:#211653;
  font-weight:1000;
  font-size:clamp(.86rem,1vw,1.08rem);
  box-shadow:0 .9dvh 1.8dvh rgba(23,18,80,.18);
  text-decoration:none;
  white-space:nowrap;
}

.lobbyButtonRow .homeLink{
  min-width:clamp(170px,17vw,290px);
}

.lobbyWorldPanel{
  position:relative;
  height:91dvh;
  min-width:0;
  display:grid;
  place-items:center;
}

.lobbyWorldPanel .worldNav{
  width:55vw;
  height:56dvh;
  margin:0;
  display:grid;
  grid-template-columns:clamp(38px,3.6vw,58px) minmax(0,1fr) clamp(38px,3.6vw,58px);
  align-items:center;
  gap:.7vw;
}

.lobbyWorldPanel .worldMap{
  width:100%;
  height:100%;
}

.lobbyWorldPanel .worldCard{
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  padding:clamp(18px,2vw,30px);
  border-radius:clamp(24px,2vw,34px);
  overflow:hidden;
}

.lobbyWorldPanel .worldTitle{
  font-size:clamp(2.1rem,3.5vw,4rem);
  line-height:1;
}

.lobbyWorldPanel .worldStars{
  font-size:clamp(.9rem,1.15vw,1.25rem);
  padding:.55em .85em;
}

.lobbyWorldPanel .puzzleDots{
  height:calc(56dvh - 100px);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(8px,.8vw,14px);
  margin-top:clamp(14px,1.4vw,22px);
  align-items:center;
}

.lobbyWorldPanel .puzzleDot{
  width:min(100%,7.6dvh);
  min-width:46px;
  max-width:78px;
  font-size:clamp(1.05rem,1.25vw,1.55rem);
}

.lobbyWorldPanel .puzzleDot.locked::after{
  font-size:clamp(1.25rem,1.55vw,1.9rem) !important;
}

.lobbyWorldPanel .puzzleDot .miniStars{
  font-size:clamp(.78rem,.9vw,1.05rem);
}

.lobbyWorldPanel .navBtn{
  width:clamp(38px,3.4vw,54px);
  height:clamp(38px,3.4vw,54px);
}

.lobbyFooter{
  position:absolute;
  left:50%;
  bottom:2.4dvh;
  transform:translateX(-50%);
  width:80vw;
  text-align:center;
  color:white;
  font-size:clamp(1rem,1.25vw,1.4rem);
  text-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* Compact screens: stack lobby cleanly */
@media(max-width:900px){
  body:not(.playing){
    overflow:auto;
  }

  #lobbyScreen.active{
    height:auto;
    min-height:100dvh;
    overflow:auto;
    padding-bottom:3dvh;
  }

  .lobbyGrid{
    height:auto;
    min-height:96dvh;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
  }

  .lobbyBrandPanel{
    height:36dvh;
  }

  .lobbyPlayerRow{
    top:2dvh;
    width:80vw;
  }

  .lobbyBigLogo{
    width:86vw;
    max-height:22dvh;
    top:17dvh;
  }

  .lobbyButtonRow{
    top:30dvh;
    width:92vw;
  }

  .lobbyWorldPanel{
    height:60dvh;
  }

  .lobbyWorldPanel .worldNav{
    width:96vw;
    height:58dvh;
    grid-template-columns:38px minmax(0,1fr) 38px;
  }

  .lobbyWorldPanel .worldCard{
    padding:14px;
  }

  .lobbyWorldPanel .worldTitle{
    font-size:clamp(1.6rem,7vw,2.6rem);
  }

  .lobbyWorldPanel .puzzleDots{
    height:calc(58dvh - 90px);
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
  }

  .lobbyWorldPanel .puzzleDot{
    width:min(100%,7.5dvh);
    min-width:42px;
  }

  .lobbyFooter{
    position:relative;
    bottom:auto;
    margin:1dvh auto 0;
    transform:none;
    left:auto;
    font-size:.9rem;
  }
}


/* ===== ZoodlePop 100 v1.10 lobby logo spacing fix ===== */

/* Give the user/star row its own space and move logo down. */
.lobbyPlayerRow{
  top:10.5dvh !important;
}

/* Bigger logo, shifted downward so it does not feel jammed into player info. */
.lobbyBigLogo{
  width:42vw !important;
  max-width:720px !important;
  max-height:50dvh !important;
  top:43.5dvh !important;
}

/* Move lower lobby buttons down slightly to balance the larger logo. */
.lobbyButtonRow{
  top:73dvh !important;
}

/* Keep left area balanced on slightly smaller screens. */
@media(max-width:900px){
  .lobbyPlayerRow{
    top:1.5dvh !important;
  }

  .lobbyBigLogo{
    width:90vw !important;
    max-height:24dvh !important;
    top:18dvh !important;
  }

  .lobbyButtonRow{
    top:31dvh !important;
  }
}


/* ===== v118 mobile play-screen repair: moves-only HUD ===== */

.hiddenCounter {
  display: none !important;
}

.movesOnlyHud {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}

.movesOnlyHud .movesCard {
  width: min(42vw, 220px);
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body.playing {
    overflow: hidden;
  }

  #playScreen.active {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .playGrid {
    width: 100vw !important;
    height: 100svh !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 22svh 78svh !important;
    overflow: hidden !important;
  }

  .leftBrandPanel {
    height: 22svh !important;
    width: 100vw !important;
    position: relative !important;
  }

  .topButtonRow {
    top: 1.8svh !important;
    left: 50% !important;
    width: 94vw !important;
    transform: translateX(-50%) !important;
    gap: 1.6vw !important;
    justify-content: center !important;
    z-index: 5 !important;
  }

  .topButtonRow .pillBtn,
  .topButtonRow .homeLink {
    height: 6.2svh !important;
    min-height: 34px !important;
    max-height: 48px !important;
    border-radius: 999px !important;
    padding: 0 3.1vw !important;
    font-size: clamp(.82rem, 3.45vw, 1rem) !important;
    text-decoration: none !important;
    color: #211653 !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 .7svh 1.3svh rgba(23,18,80,.16) !important;
  }

  .topButtonRow .homeLink {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .leftGameLogo {
    top: 14svh !important;
    left: 50% !important;
    width: 62vw !important;
    max-width: none !important;
    height: 12svh !important;
    max-height: 12svh !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    z-index: 3 !important;
  }

  .playerRow {
    display: none !important;
  }

  .rightGamePanel {
    height: 78svh !important;
    width: 100vw !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .puzzleTitle {
    top: 1.1svh !important;
    left: 50% !important;
    width: 94vw !important;
    font-size: clamp(1.55rem, 7vw, 2.45rem) !important;
    line-height: 1.02 !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 4 !important;
  }

  .titleStars {
    top: 6.5svh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
    z-index: 4 !important;
  }

  .boardPanel {
    position: absolute !important;
    left: 50% !important;
    top: 36svh !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 54svh) !important;
    height: min(88vw, 54svh) !important;
    padding: 2.2vw !important;
    border-radius: 24px !important;
    overflow: visible !important;
  }

  .board {
    width: 100% !important;
    height: 100% !important;
  }

  .bubble {
    font-size: clamp(1.75rem, 10vw, 3rem) !important;
  }

  .playHud {
    position: absolute !important;
    left: 50% !important;
    bottom: 6.2svh !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
    z-index: 5 !important;
  }

  .playHud .hudCard {
    width: min(46vw, 230px) !important;
    min-width: 130px !important;
    height: 7.2svh !important;
    min-height: 44px !important;
    max-height: 58px !important;
    padding: .3em .45em !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .playHud .hudCard span {
    font-size: clamp(.72rem, 3.25vw, .95rem) !important;
    line-height: 1 !important;
  }

  .playHud .hudCard strong {
    font-size: clamp(.95rem, 4.2vw, 1.35rem) !important;
    line-height: 1 !important;
  }

  .gameFooter {
    display: none !important;
  }

  #zoodlepop-account-debug-strip {
    font-size: 12px !important;
    bottom: 1svh !important;
    max-height: 18svh !important;
    overflow: auto !important;
  }
}

@media (max-width: 760px) and (max-height: 760px) {
  .playGrid {
    grid-template-rows: 19svh 81svh !important;
  }

  .leftBrandPanel {
    height: 19svh !important;
  }

  .leftGameLogo {
    top: 13.2svh !important;
    width: 54vw !important;
    height: 10svh !important;
  }

  .rightGamePanel {
    height: 81svh !important;
  }

  .puzzleTitle {
    top: .8svh !important;
    font-size: clamp(1.35rem, 6.4vw, 2rem) !important;
  }

  .titleStars {
    top: 5.4svh !important;
    font-size: clamp(1.35rem, 6.5vw, 1.95rem) !important;
  }

  .boardPanel {
    top: 34.2svh !important;
    width: min(84vw, 51svh) !important;
    height: min(84vw, 51svh) !important;
  }

  .playHud {
    bottom: 5.4svh !important;
  }
}


/* ===== ZoodlePop 100 v118 phone play layout reset ===== */
/* This is a full phone layout takeover, not another small nudge. */

@media (max-width: 700px) and (orientation: portrait) {
  html,
  body {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #app,
  main,
  #playScreen.active {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.playing .brandHeader {
    display: none !important;
  }

  #playScreen.active .playGrid {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #playScreen.active .leftBrandPanel {
    position: relative !important;
    flex: 0 0 165px !important;
    width: 100vw !important;
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
    overflow: visible !important;
  }

  #playScreen.active .topButtonRow {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 22px) !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: 82px 1fr 92px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #playScreen.active .topButtonRow .pillBtn,
  #playScreen.active .topButtonRow .homeLink {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  #playScreen.active .leftGameLogo {
    position: absolute !important;
    top: 103px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(76vw, 330px) !important;
    height: 105px !important;
    max-height: 105px !important;
    object-fit: contain !important;
    z-index: 2 !important;
  }

  /* Hide this row on phone play screen. It was colliding with the title. */
  #playScreen.active .playerRow {
    display: none !important;
  }

  #playScreen.active .rightGamePanel {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 0 8px !important;
  }

  #playScreen.active .puzzleTitle {
    position: static !important;
    transform: none !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(30px, 8.2vw, 38px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 1 !important;
  }

  #playScreen.active .titleStars {
    position: static !important;
    transform: none !important;
    width: 100vw !important;
    margin: 6px auto 8px !important;
    text-align: center !important;
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1 !important;
    z-index: 1 !important;
  }

  #playScreen.active .boardPanel {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 34px) !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 7px !important;
    border-width: 3px !important;
    border-radius: 22px !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  #playScreen.active .board {
    margin: 0 auto !important;
  }

  #playScreen.active .bubble {
    font-size: clamp(29px, 9.5vw, 43px) !important;
  }

  #playScreen.active .playHud {
    position: static !important;
    transform: none !important;
    width: calc(100vw - 34px) !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    flex: 0 0 48px !important;
    z-index: 3 !important;
  }

  #playScreen.active .hudCard {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 12px !important;
    padding: 3px 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #playScreen.active .hudCard span {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
  }

  #playScreen.active .hudCard strong {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  #playScreen.active .gameFooter {
    display: none !important;
  }
}


/* ===== v119 phone HUD centering fix ===== */
@media (max-width: 700px) and (orientation: portrait) {
  #playScreen.active .playHud,
  #playScreen.active .hudCard,
  #playScreen.active .hudCard span,
  #playScreen.active .hudCard strong {
    text-align: center !important;
  }

  #playScreen.active .hudCard {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ===== v120 phone top menu / logo balance ===== */
@media (max-width: 700px) and (orientation: portrait) {
  #playScreen.active .leftBrandPanel {
    flex-basis: 178px !important;
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }

  #playScreen.active .topButtonRow {
    top: 12px !important;
    width: calc(100vw - 28px) !important;
    height: 34px !important;
    grid-template-columns: 70px 1fr 78px !important;
    gap: 8px !important;
  }

  #playScreen.active .topButtonRow .pillBtn,
  #playScreen.active .topButtonRow .homeLink {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 6px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
  }

  #playScreen.active .topButtonRow .homeLink {
    font-size: 16px !important;
  }

  #playScreen.active .leftGameLogo {
    top: 102px !important;
    width: min(88vw, 385px) !important;
    height: 132px !important;
    max-height: 132px !important;
  }

  #playScreen.active .puzzleTitle {
    margin-top: 2px !important;
  }
}


/* ===== v121 stronger phone top/menu/logo balance ===== */
@media (max-width: 700px) and (orientation: portrait) {
  body.playing #playScreen.active .leftBrandPanel {
    flex: 0 0 195px !important;
    height: 195px !important;
    min-height: 195px !important;
    max-height: 195px !important;
  }

  body.playing #playScreen.active .topButtonRow {
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 365px) !important;
    height: 32px !important;
    display: grid !important;
    grid-template-columns: 64px 1fr 74px !important;
    gap: 7px !important;
  }

  body.playing #playScreen.active .topButtonRow .pillBtn,
  body.playing #playScreen.active .topButtonRow .homeLink,
  body.playing #playScreen.active .topButtonRow a,
  body.playing #playScreen.active .topButtonRow button {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  body.playing #playScreen.active .topButtonRow .homeLink {
    font-size: 15px !important;
  }

  body.playing #playScreen.active .leftGameLogo {
    top: 112px !important;
    left: 50% !important;
    width: min(94vw, 430px) !important;
    height: 150px !important;
    max-height: 150px !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
  }

  body.playing #playScreen.active .puzzleTitle {
    margin-top: 0 !important;
    font-size: clamp(30px, 8vw, 38px) !important;
  }
}


/* ===== v122 phone bottom cleanup: board box + HUD centering ===== */
@media (max-width: 700px) and (orientation: portrait) {
  body.playing #playScreen.active .boardPanel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  body.playing #playScreen.active .board {
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body.playing #playScreen.active .playHud {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
  }

  body.playing #playScreen.active .playHud .hudCard {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 3px 4px !important;
    box-sizing: border-box !important;
  }

  body.playing #playScreen.active .playHud .hudCard span,
  body.playing #playScreen.active .playHud .hudCard strong,
  body.playing #playScreen.active .playHud .hudCard:first-child span,
  body.playing #playScreen.active .playHud .hudCard:first-child strong {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1.05 !important;
  }

  body.playing #playScreen.active .playHud .hudCard span {
    font-size: 13px !important;
  }

  body.playing #playScreen.active .playHud .hudCard strong {
    font-size: 20px !important;
  }
}


/* ===== v123 phone logo bigger + centered Moves card ===== */
@media (max-width: 700px) and (orientation: portrait) {
  body.playing #playScreen.active .leftBrandPanel {
    flex: 0 0 230px !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
  }

  body.playing #playScreen.active .leftGameLogo {
    top: 132px !important;
    left: 50% !important;
    width: min(98vw, 455px) !important;
    height: 190px !important;
    max-height: 190px !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
  }

  body.playing #playScreen.active .rightGamePanel {
    padding-top: 0 !important;
  }

  body.playing #playScreen.active .puzzleTitle {
    margin-top: -2px !important;
  }

  /* On phone, show the most important stat as one centered card. */
  body.playing #playScreen.active .playHud {
    width: 100vw !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  body.playing #playScreen.active .playHud .hudCard:not(:first-child) {
    display: none !important;
  }

  body.playing #playScreen.active .playHud .hudCard:first-child {
    width: min(58vw, 245px) !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 auto !important;
    padding: 4px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body.playing #playScreen.active .playHud .hudCard:first-child span,
  body.playing #playScreen.active .playHud .hudCard:first-child strong {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  body.playing #playScreen.active .playHud .hudCard:first-child span {
    font-size: 14px !important;
  }

  body.playing #playScreen.active .playHud .hudCard:first-child strong {
    font-size: 22px !important;
  }
}


/* ===== v124 phone logo nudge + pull-to-refresh restore ===== */
@media (max-width: 700px) and (orientation: portrait) {
  /* Allow browser pull-to-refresh again on phones. */
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    height: auto !important;
    min-height: 100svh !important;
  }

  body.playing {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  body.playing #app,
  body.playing main {
    overflow: visible !important;
    min-height: 100svh !important;
  }

  body.playing #playScreen.active {
    overflow: visible !important;
    min-height: 100svh !important;
    height: auto !important;
  }

  /* Nudge the logo down away from the menu buttons. */
  body.playing #playScreen.active .leftBrandPanel {
    flex: 0 0 238px !important;
    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;
  }

  body.playing #playScreen.active .leftGameLogo {
    top: 146px !important;
    width: min(98vw, 455px) !important;
    height: 190px !important;
    max-height: 190px !important;
  }

  body.playing #playScreen.active .puzzleTitle {
    margin-top: -4px !important;
  }
}


/* ===== v125 scoring HUD: Minimum Moves left/over ===== */
@media (max-width: 700px) and (orientation: portrait) {
  body.playing #playScreen.active .playHud .hudCard:first-child,
  body.playing #playScreen.active .playHud .movesCard {
    width: min(82vw, 330px) !important;
  }

  body.playing #playScreen.active .playHud .movesCard span {
    font-size: 13px !important;
    letter-spacing: .04em !important;
  }

  body.playing #playScreen.active .playHud .movesCard strong {
    font-size: 20px !important;
    white-space: nowrap !important;
  }
}


/* ===== v126 safe bubble swap animation ===== */
.bubble {
  will-change: transform, filter;
  transform-origin: center center;
}

.bubble.swapping {
  position: relative;
  z-index: 60;
  pointer-events: none;
}


/* ===== v127 slower juicy swap polish ===== */
.bubble.swapping {
  z-index: 80;
  filter: drop-shadow(0 10px 12px rgba(30, 20, 90, .22));
}


/* ===== v129 visual clear celebration ===== */
.boardPanel.clearCelebrating {
  animation: clearBoardPulse 1.15s ease-out both;
  overflow: visible !important;
}

.clearCelebrationLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  overflow: visible;
}

.clearRing {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 18px rgba(255,255,255,.9),
    0 0 34px rgba(255,229,87,.72),
    inset 0 0 16px rgba(255,255,255,.6);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: clearRingPulse 1.05s cubic-bezier(.1,.72,.18,1) var(--delay, 0ms) forwards;
}

.clearFloatBubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0 14%, transparent 28%),
    radial-gradient(circle at 65% 72%, hsla(var(--hue), 90%, 68%, .82), hsla(var(--hue), 90%, 54%, .42) 62%, rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    inset -3px -4px 7px rgba(0,0,0,.08),
    inset 3px 4px 9px rgba(255,255,255,.38),
    0 0 12px hsla(var(--hue), 95%, 68%, .65);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  animation: clearBubbleRise var(--duration, 1400ms) cubic-bezier(.08,.65,.2,1) var(--delay, 0ms) forwards;
}

.clearBug {
  position: absolute;
  left: 50%;
  top: 53%;
  width: min(30vw, 116px);
  height: min(30vw, 116px);
  transform: translate(-50%, -50%) scale(.25) rotate(-8deg);
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 8%, transparent 16%),
    linear-gradient(145deg, #6effa8, #20c76d 52%, #168653);
  box-shadow:
    inset -12px -15px 18px rgba(0,0,0,.18),
    inset 9px 11px 16px rgba(255,255,255,.36),
    0 14px 26px rgba(25,23,85,.25),
    0 0 22px rgba(255,255,255,.72);
  opacity: 0;
  animation: clearBugDance 1.45s cubic-bezier(.16,.9,.2,1.18) .12s forwards;
}

.clearBug::before,
.clearBug::after {
  content: "";
  position: absolute;
  top: -20%;
  width: 32%;
  height: 36%;
  border-top: 5px solid #168653;
  border-radius: 50%;
}

.clearBug::before {
  left: 14%;
  transform: rotate(-25deg);
}

.clearBug::after {
  right: 14%;
  transform: rotate(25deg);
}

.clearBugWing {
  position: absolute;
  top: 30%;
  width: 44%;
  height: 42%;
  border-radius: 55% 45% 60% 40%;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 0 12px rgba(255,255,255,.5);
}

.clearBugWing.left {
  left: -25%;
  transform: rotate(-25deg);
  animation: clearWingFlap .22s ease-in-out infinite alternate;
}

.clearBugWing.right {
  right: -25%;
  transform: rotate(25deg);
  animation: clearWingFlap .22s ease-in-out infinite alternate-reverse;
}

.clearBugEye {
  position: absolute;
  top: 34%;
  width: 13%;
  height: 13%;
  border-radius: 50%;
  background: #17113d;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.55);
}

.clearBugEye.left { left: 33%; }
.clearBugEye.right { right: 33%; }

@keyframes clearBoardPulse {
  0% {
    box-shadow: 0 1.8vh 4vh rgba(20,15,80,.25), inset 0 0 0 2px rgba(255,255,255,.22);
    filter: brightness(1);
  }
  22% {
    box-shadow:
      0 0 0 7px rgba(255,255,255,.78),
      0 0 38px rgba(255,238,90,.95),
      0 1.8vh 4vh rgba(20,15,80,.22),
      inset 0 0 30px rgba(255,255,255,.7);
    filter: brightness(1.25);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes clearRingPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  12% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.4); }
}

@keyframes clearBubbleRise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0,0) scale(.2) rotate(0deg);
  }
  12% {
    opacity: .95;
  }
  70% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.15) rotate(35deg);
  }
}

@keyframes clearBugDance {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-8deg); }
  16% { opacity: 1; transform: translate(-50%, -66%) scale(1.06) rotate(7deg); }
  32% { transform: translate(-50%, -48%) scale(.92) rotate(-9deg); }
  48% { transform: translate(-50%, -60%) scale(1.1) rotate(10deg); }
  66% { opacity: 1; transform: translate(-50%, -52%) scale(1) rotate(-5deg); }
  100% { opacity: 0; transform: translate(-50%, -92%) scale(.65) rotate(14deg); }
}

@keyframes clearWingFlap {
  from { transform: rotate(-32deg) scaleX(1); }
  to { transform: rotate(14deg) scaleX(1.12); }
}

@media (max-width: 700px) and (orientation: portrait) {
  .clearBug {
    width: 96px;
    height: 96px;
  }

  .clearRing {
    border-width: 4px;
  }
}


/* ===== v130 remove placeholder mascot from clear celebration ===== */
/* Keep the polished board glow, rings, and bubble particles. Hide/remove the CSS-built bug. */
.clearBug,
.clearBug::before,
.clearBug::after,
.clearBugWing,
.clearBugEye {
  display: none !important;
  animation: none !important;
}

/* Slightly cleaner, more professional clear particle feel. */
.clearFloatBubble {
  opacity: 0;
  filter: saturate(.95) brightness(1.03);
}

.clearRing {
  border-color: rgba(255,255,255,.82);
  box-shadow:
    0 0 16px rgba(255,255,255,.72),
    0 0 30px rgba(255,229,87,.48),
    inset 0 0 13px rgba(255,255,255,.42);
}


/* ===== v131 bubble rupture pop effect ===== */
/* More bubble-like pop: stress, lopsided tear, membrane shards, mist. */
.bubble.pop {
  animation: popRuptureV131 .82s cubic-bezier(.12,.9,.16,1) forwards !important;
  pointer-events: none;
  z-index: 40;
  transform-origin: 64% 42%;
}

.bubble.pop::after {
  animation: popHighlightTearV131 .52s ease-out forwards;
}

.bubbleSkinShard {
  position: absolute;
  width: 15px;
  height: 8px;
  border-radius: 999px 999px 999px 2px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.95), rgba(255,255,255,.24) 58%, rgba(126,231,255,.16));
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: 0 0 9px rgba(255,255,255,.64);
  transform: translate(-50%, -50%) scale(.35) rotate(0deg);
  opacity: 0;
  animation: bubbleSkinShardFlyV131 .72s cubic-bezier(.09,.7,.2,1) var(--delay,0ms) forwards;
  z-index: 80;
}

.bubbleMistDot {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 8px rgba(178,241,255,.9);
  transform: translate(-50%, -50%) scale(.25);
  opacity: 0;
  animation: bubbleMistFlyV131 .66s ease-out var(--delay,0ms) forwards;
  z-index: 78;
}

@keyframes popRuptureV131 {
  0% {
    transform: scale(1) skew(0deg, 0deg);
    opacity: 1;
    filter: brightness(1) saturate(1);
    border-radius: 50%;
  }
  15% {
    transform: scaleX(1.16) scaleY(.88) skew(-5deg, 2deg);
    filter: brightness(1.18) saturate(1.15);
    border-radius: 54% 46% 48% 52%;
  }
  28% {
    transform: scaleX(.92) scaleY(1.18) skew(7deg, -3deg);
    filter: brightness(1.42) saturate(1.22);
    border-radius: 44% 56% 57% 43%;
  }
  39% {
    transform: scaleX(1.24) scaleY(.78) translate(2px,-1px) skew(-9deg, 4deg);
    filter: brightness(1.82) saturate(1.3);
    border-radius: 62% 38% 45% 55%;
  }
  48% {
    transform: scale(1.36) translate(4px,-3px);
    opacity: .88;
    filter: brightness(2.45) saturate(1.35);
    border-radius: 68% 32% 42% 58%;
  }
  58% {
    transform: scale(.72) translate(-2px,1px) rotate(-7deg);
    opacity: .62;
    filter: brightness(2.25) blur(.2px);
  }
  76% {
    transform: scale(1.48) translate(8px,-6px) rotate(8deg);
    opacity: .24;
    filter: brightness(2.1) blur(1px);
  }
  100% {
    transform: scale(.05) translate(18px,-12px) rotate(18deg);
    opacity: 0;
    filter: brightness(2.4) blur(2px);
  }
}

@keyframes popHighlightTearV131 {
  0% {
    opacity: .85;
    transform: translate(0,0) rotate(-25deg) scale(1);
  }
  30% {
    opacity: 1;
    transform: translate(20%, -8%) rotate(-16deg) scale(1.35, .72);
  }
  100% {
    opacity: 0;
    transform: translate(58%, -22%) rotate(24deg) scale(.15, .35);
  }
}

@keyframes bubbleSkinShardFlyV131 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.22) rotate(0deg);
  }
  10% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.05) rotate(var(--rot));
  }
}

@keyframes bubbleMistFlyV131 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
  }
  14% {
    opacity: .86;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.1);
  }
}


/* ===== v133 stronger simultaneous equation fan-out ===== */
.floatEq.airyEq {
  max-width: 42vw;
  text-align: center;
}

@media (max-width: 700px) and (orientation: portrait) {
  .floatEq.airyEq {
    max-width: 34vw;
    font-size: clamp(.82rem, 3.8vw, 1.2rem) !important;
    padding: .14em .36em !important;
  }
}


/* ===== v135 iPhone lobby polish: spacing, title, completed puzzle dots ===== */

/* Base number wrapper: keeps existing unlocked/uncleared dots looking normal. */
.puzzleDot .puzzleNumber {
  display: block;
  line-height: 1;
}

/* Keep locked dots unchanged. */
.puzzleDot.locked .puzzleNumber {
  display: none !important;
}

@media (max-width: 700px) and (orientation: portrait) {
  body:not(.playing) {
    overflow: hidden !important;
  }

  #lobbyScreen.active {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .lobbyGrid {
    height: 100svh !important;
    min-height: 100svh !important;
    grid-template-rows: 33svh 63svh !important;
    overflow: hidden !important;
  }

  .lobbyBrandPanel {
    height: 33svh !important;
    min-height: 33svh !important;
  }

  .lobbyPlayerRow {
    top: 1.2svh !important;
  }

  .lobbyBigLogo {
    top: 15.8svh !important;
    width: 90vw !important;
    max-height: 22svh !important;
  }

  /* Move the two logo-area buttons up and leave a cleaner buffer before the puzzle box. */
  .lobbyButtonRow {
    top: 28.2svh !important;
    width: 92vw !important;
    gap: 10px !important;
  }

  .lobbyButtonRow .homeLink,
  .lobbyButtonRow .pillBtn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }

  .lobbyButtonRow .homeLink {
    min-width: 0 !important;
    width: min(56vw, 245px) !important;
  }

  .lobbyWorldPanel {
    height: 63svh !important;
    min-height: 63svh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: .6svh !important;
    box-sizing: border-box !important;
  }

  .lobbyWorldPanel .worldNav {
    width: 96vw !important;
    height: 55.5svh !important;
    min-height: 0 !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .lobbyWorldPanel .navBtn {
    width: 34px !important;
    height: 34px !important;
    transform: translateY(-10px) !important;
    font-size: 1.05rem !important;
  }

  .lobbyWorldPanel .worldCard {
    height: 55.5svh !important;
    min-height: 0 !important;
    padding: 13px 12px 12px !important;
    border: 3px solid rgba(255,255,255,.72) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .lobbyWorldPanel .worldHead {
    align-items: center !important;
    gap: 8px !important;
  }

  /* Slicker, less blocky world title. */
  .lobbyWorldPanel .worldTitle {
    font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif !important;
    font-weight: 950 !important;
    font-size: clamp(1.75rem, 7.4vw, 2.75rem) !important;
    letter-spacing: -.045em !important;
    line-height: .92 !important;
    text-shadow:
      0 2px 0 rgba(20,15,80,.22),
      0 8px 18px rgba(20,15,80,.22),
      0 0 16px rgba(255,255,255,.34) !important;
  }

  .lobbyWorldPanel .worldStars {
    font-size: .88rem !important;
    padding: .46em .72em !important;
  }

  /* Pull the puzzle area up and tighten it so the bottom border stays visible. */
  .lobbyWorldPanel .puzzleDots {
    height: calc(55.5svh - 82px) !important;
    min-height: 0 !important;
    margin-top: 9px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: center !important;
  }

  .lobbyWorldPanel .puzzleDot {
    width: min(100%, 7.35svh) !important;
    min-width: 42px !important;
    max-width: 58px !important;
    font-size: 1.24rem !important;
    overflow: visible !important;
  }

  /* Uncompleted unlocked dots remain simple and readable. */
  .lobbyWorldPanel .puzzleDot:not(.hasStars):not(.locked) .puzzleNumber {
    position: static !important;
    color: #211653 !important;
    font-weight: 1000 !important;
  }

  /* Completed dot redesign: number in upper half, stars across horizontal diameter. */
  .lobbyWorldPanel .puzzleDot.hasStars {
    padding: 0 !important;
    color: transparent !important;
    background:
      radial-gradient(circle at 33% 24%, rgba(255,255,255,.98) 0 10%, transparent 23%),
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,249,255,.92)) !important;
    box-shadow:
      inset -4px -6px 10px rgba(0,0,0,.13),
      inset 4px 6px 10px rgba(255,255,255,.72),
      0 .6vh 1.2vh rgba(0,0,0,.18),
      0 0 0 2px rgba(255,255,255,.72) !important;
  }

  .lobbyWorldPanel .puzzleDot.hasStars .puzzleNumber {
    position: absolute !important;
    left: 50% !important;
    top: 24% !important;
    transform: translate(-50%, -50%) !important;
    color: #201747 !important;
    font-weight: 1000 !important;
    font-size: clamp(1.22rem, 5.5vw, 1.75rem) !important;
    line-height: 1 !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.85),
      0 2px 4px rgba(20,15,80,.18) !important;
    z-index: 2 !important;
  }

  .lobbyWorldPanel .puzzleDot.hasStars .miniStars {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 58% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    color: #ffd83d !important;
    font-size: clamp(.74rem, 3.6vw, 1.02rem) !important;
    line-height: 1 !important;
    letter-spacing: -.08em !important;
    -webkit-text-stroke: 1.35px #17113d !important;
    paint-order: stroke fill !important;
    text-shadow:
      -1px -1px 0 #17113d,
       1px -1px 0 #17113d,
      -1px  1px 0 #17113d,
       1px  1px 0 #17113d,
       0 2px 3px rgba(0,0,0,.35),
       0 0 5px rgba(255,255,255,.58) !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  .lobbyWorldPanel .puzzleDot.current {
    outline-width: 3px !important;
    outline-offset: 3px !important;
  }

  .lobbyFooter {
    display: none !important;
  }
}


/* ===== v136 iPhone lobby: completed numbers outside circles + smaller centered buttons ===== */
@media (max-width: 700px) and (orientation: portrait) {
  /* Smaller buttons, centered in the buffer between logo and puzzle box. */
  .lobbyButtonRow {
    top: 30.3svh !important;
    width: 82vw !important;
    gap: 8px !important;
  }

  .lobbyButtonRow .homeLink,
  .lobbyButtonRow .pillBtn {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    padding: 0 11px !important;
    font-size: 12.5px !important;
    line-height: 29px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }

  .lobbyButtonRow .homeLink {
    width: min(43vw, 185px) !important;
    min-width: 0 !important;
  }

  .lobbyButtonRow .pillBtn {
    width: min(27vw, 118px) !important;
  }

  /* Give completed puzzle numbers room to sit above their circles. */
  .lobbyWorldPanel .puzzleDots {
    overflow: visible !important;
    row-gap: 12px !important;
    column-gap: 7px !important;
    padding-top: 9px !important;
    height: calc(55.5svh - 86px) !important;
  }

  .lobbyWorldPanel .puzzleDot {
    overflow: visible !important;
  }

  /* Completed puzzle: number floats ABOVE the bubble, stars stay across the middle. */
  .lobbyWorldPanel .puzzleDot.hasStars .puzzleNumber {
    top: -13px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #201747 !important;
    font-size: clamp(1.18rem, 5.1vw, 1.62rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.95),
      0 2px 4px rgba(20,15,80,.22),
      0 0 7px rgba(255,255,255,.45) !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  .lobbyWorldPanel .puzzleDot.hasStars .miniStars {
    top: 50% !important;
    font-size: clamp(.78rem, 3.8vw, 1.05rem) !important;
    letter-spacing: -.075em !important;
  }

  /* Slightly reduce completed circle size so number-above layout breathes. */
  .lobbyWorldPanel .puzzleDot.hasStars {
    width: min(100%, 6.85svh) !important;
    min-width: 40px !important;
    max-width: 54px !important;
  }

  /* Locked circles stay as-is visually. */
  .lobbyWorldPanel .puzzleDot.locked {
    width: min(100%, 7.35svh) !important;
    min-width: 42px !important;
    max-width: 58px !important;
  }
}


/* ===== v139 phone lobby: buttons-only vertical correction ===== */
/* Do not touch puzzle box, grid rows, world panel, game JS, or lobby rendering. */
@media (max-width: 700px) and (orientation: portrait) {
  body:not(.playing) #lobbyScreen.active .lobbyBrandPanel .lobbyButtonRow {
    top: 23.2svh !important;
  }
}