/* ===========================================================
   Birdy Blast — native app mode UI
   Active ONLY inside the Android/iOS app (or ?appmode=1 preview).
   The live web game is completely unaffected by this file.
   =========================================================== */

:root{
  --bb-gut:96px;      /* width of the left gutter beside the canvas */
  --bb-btn:64px;      /* menu button size */
  --bb-font:'Baloo 2','Fredoka',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}

html.bb-app, html.bb-app body{
  height:100%;margin:0;padding:0;overflow:hidden;
  background:#0b1b2b;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
html.bb-app body{display:block;}

/* ---- the stage: canvas centred, gutters painted like sky, never black ---- */
html.bb-app .canvas-wrap{
  background:
    radial-gradient(90% 70% at 50% 118%, rgba(90,190,110,.55) 0%, rgba(90,190,110,0) 60%),
    radial-gradient(70% 55% at 12% 8%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(60% 50% at 88% 14%, rgba(255,244,190,.35) 0%, rgba(255,244,190,0) 60%),
    linear-gradient(180deg,#6fb6e8 0%,#8fcdf0 42%,#bfe6f7 100%) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html.bb-app .canvas-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 90px rgba(10,50,80,.28);
}
html.bb-app #cv{
  max-width:none;border-radius:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.5), 0 14px 40px rgba(0,20,40,.45);
}

/* nothing from the web build is allowed to sit on top of the game */
html.bb-app #exitBtn,
html.bb-app #_rotMsg,
html.bb-app .bb-rail,
html.bb-app .controls,
html.bb-app #dailyBar,
html.bb-app #birdyColorPicker,
html.bb-app header,
html.bb-app footer{display:none !important;}

/* ===========================================================
   THE MENU BUBBLE — one round glossy gem, and that is the whole
   of the play-screen furniture.

   It sits DOWN IN THE HUD, not in the sky. The old top-left spot
   was live play space: birds flew through it and a tap there
   opened the menu instead of firing. --bb-dx / --bb-dy are the
   exact centre of the empty gap the game leaves in its HUD strip
   between the birds counter and the weapon slots, worked out in
   bbFit() and handed over in real pixels.
   =========================================================== */
#bbDock{
  position:fixed;
  left:var(--bb-dx,50%);
  top:var(--bb-dy,50%);
  transform:translate(-50%,-50%);
  width:auto;height:auto;padding:0;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  z-index:9000;pointer-events:none;
  font-family:var(--bb-font);
  transition:opacity .35s ease;
}
/* A soft dark halo the colour of the HUD itself. On a level with a very
   long run of power-up pills the row can creep towards the gap; this
   fades them out under the bubble instead of letting them collide. */
#bbDock::before{
  content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:calc(var(--bb-btn) * 1.75);height:calc(var(--bb-btn) * 1.75);
  border-radius:999px;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(10,28,48,.82) 0%, rgba(10,28,48,.72) 52%, rgba(10,28,48,0) 100%);
}
/* In a bonus game the bubble sits in the corner of the mini-game's own dark
   title bar, which is already a clean backdrop — the halo would just look
   like a smudge, and the button needs a little breathing room from the edge
   rather than a shadow around it. Also nudge the transform origin so a
   pressed button never pokes off the screen. */
html.bb-app.bb-corner #bbDock::before{opacity:0;}
html.bb-app.bb-corner #bbMenuBtn{
  box-shadow:0 4px 0 rgba(120,70,5,.55), 0 8px 16px rgba(0,25,55,.4);
}
#bbDock>*{pointer-events:auto;position:relative;}

#bbMenuBtn{
  all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;
  width:var(--bb-btn);height:var(--bb-btn);
  border-radius:999px;                      /* fully round — kid-style bubble */
  display:flex;align-items:center;justify-content:center;position:relative;
  background:
    radial-gradient(76% 62% at 50% 116%, rgba(255,120,0,.55) 0%, rgba(255,120,0,0) 70%),
    linear-gradient(180deg,#ffe08a 0%,#ffc233 44%,#f28a06 100%);
  border:calc(var(--bb-btn) * .075) solid #fff;    /* thick white ring */
  color:#3b1d00;
  font-size:calc(var(--bb-btn) * .42);line-height:1;
  box-shadow:
    0 calc(var(--bb-btn) * .10) 0 rgba(150,74,0,.6),      /* chunky base */
    0 calc(var(--bb-btn) * .17) 20px rgba(0,20,40,.34),
    inset 0 calc(var(--bb-btn) * .06) 0 rgba(255,255,255,.62),
    inset 0 calc(var(--bb-btn) * -.09) 0 rgba(160,70,0,.2);
  touch-action:manipulation;
  transition:transform .13s cubic-bezier(.34,1.7,.5,1), box-shadow .13s ease,
             width .25s ease, height .25s ease;
}
/* glossy highlight across the top of the bubble */
#bbMenuBtn::before{
  content:'';position:absolute;left:16%;right:16%;top:7%;height:30%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.05));
}
/* tiny sparkle, top-right, so it reads as a shiny gem not a flat circle */
#bbMenuBtn::after{
  content:'';position:absolute;right:17%;top:20%;
  width:12%;height:12%;border-radius:999px;pointer-events:none;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 6px rgba(255,255,255,.8);
}
#bbMenuBtn .bars{position:relative;z-index:1;font-weight:900;
  text-shadow:0 2px 0 rgba(255,255,255,.5);}
/* springy squish on tap */
#bbMenuBtn:active{
  transform:translateY(calc(var(--bb-btn) * .085)) scale(.94);
  box-shadow:0 1px 0 rgba(150,74,0,.6), 0 3px 8px rgba(0,20,40,.3),
             inset 0 calc(var(--bb-btn) * .05) 0 rgba(255,255,255,.5);
}

/* gentle pulse while today's Daily Bonus is still unplayed */
#bbMenuBtn.ready{animation:bbReady 2s ease-in-out infinite;}
@keyframes bbReady{
  0%,100%{box-shadow:0 calc(var(--bb-btn) * .10) 0 rgba(150,74,0,.6),0 calc(var(--bb-btn) * .17) 20px rgba(0,20,40,.34),inset 0 calc(var(--bb-btn) * .06) 0 rgba(255,255,255,.62),0 0 0 0 rgba(255,205,90,.75);}
  50%    {box-shadow:0 calc(var(--bb-btn) * .10) 0 rgba(150,74,0,.6),0 calc(var(--bb-btn) * .17) 20px rgba(0,20,40,.34),inset 0 calc(var(--bb-btn) * .06) 0 rgba(255,255,255,.62),0 0 0 15px rgba(255,205,90,0);}
}

/* the old rail furniture is gone for good */
#bbMenuLbl,.bb-chip,#bbStreakChip,#bbKillChip{display:none !important;}

/* ---- PLAY STATE ----
   The bubble is deliberately IDENTICAL in every level, bonus or not: same
   size, same corner, same colour, so a child always knows where it is.
   It just steps back a touch while the shooting is happening. */
html.bb-app.bb-play #bbMenuBtn{opacity:.9;}
html.bb-app.bb-play #bbMenuBtn:active{opacity:1;}

/* ---- COLD START: the one row a first-time tap should land on ---- */
#bbMenu .mi.hero.tapnow{
  animation:bbTapNow 1.7s ease-in-out infinite;
}
@keyframes bbTapNow{
  0%,100%{transform:scale(1);   box-shadow:0 6px 0 rgba(20,95,45,.5), 0 10px 20px rgba(0,30,60,.3), 0 0 0 0 rgba(255,255,255,.55);}
  55%    {transform:scale(1.02);box-shadow:0 6px 0 rgba(20,95,45,.5), 0 10px 20px rgba(0,30,60,.3), 0 0 0 14px rgba(255,255,255,0);}
}
@media (prefers-reduced-motion:reduce){ #bbMenu .mi.hero.tapnow{animation:none;} }

/* ---- INTRO / SPLASH: rail out of the way entirely ---- */
html.bb-app.bb-hidechrome #bbDock{opacity:0;pointer-events:none;}

/* ===========================================================
   THE STREAK, PROMOTED — big cartoon badges at the top of the
   pause menu, where they cannot get in the way of a single bird.
   =========================================================== */
.bb-badges{
  flex:0 0 auto;display:flex;justify-content:center;
  gap:clamp(6px,1.4vw,12px);
  margin:clamp(4px,1vh,9px) 0 0;
}
.bb-badge{
  /* a badge is a pill, not a banner — one sits centred, two share the row */
  flex:0 1 clamp(190px,44%,430px);min-width:0;box-sizing:border-box;
  display:flex;align-items:center;gap:clamp(6px,1.2vw,11px);
  padding:clamp(6px,1.3vh,11px) clamp(8px,1.6vw,14px);
  border-radius:clamp(16px,3vh,26px);
  border:3px solid #fff;
  background:linear-gradient(180deg,#fff3cf 0%,#ffd98a 100%);
  box-shadow:0 5px 0 rgba(190,120,10,.35), 0 9px 18px rgba(0,40,80,.18),
             inset 0 3px 0 rgba(255,255,255,.75);
  position:relative;overflow:hidden;
}
.bb-badge.kills{background:linear-gradient(180deg,#dcfbee 0%,#a9edcf 100%);
  box-shadow:0 5px 0 rgba(20,140,100,.32), 0 9px 18px rgba(0,40,80,.18),
             inset 0 3px 0 rgba(255,255,255,.8);}
.bb-badge-em{
  flex:0 0 auto;font-size:clamp(20px,4.6vh,36px);line-height:1;
  filter:drop-shadow(0 3px 5px rgba(120,60,0,.35));
}
.bb-badge.fire.lit .bb-badge-em{animation:bbFlicker 1.5s ease-in-out infinite;}
.bb-badge:not(.lit) .bb-badge-em{filter:grayscale(.55) opacity(.75);}
.bb-badge-em .bem{width:clamp(22px,5vh,40px);height:auto;display:block;}
.bb-badge-tx{display:flex;flex-direction:column;min-width:0;line-height:1.05;}
.bb-badge-tx b{
  font:900 clamp(18px,4.4vh,34px)/1 var(--bb-font);color:#a04b00;
  text-shadow:0 2px 0 rgba(255,255,255,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bb-badge-tx b u{font-size:.44em;text-decoration:none;margin-left:.28em;opacity:.8;}
.bb-badge-tx i{
  font:800 clamp(8.5px,1.8vh,12.5px)/1.25 var(--bb-font);
  color:rgba(120,62,0,.82);font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bb-badge.kills .bb-badge-tx b{color:#0a7a55;}
.bb-badge.kills .bb-badge-tx i{color:rgba(8,90,64,.8);}
@keyframes bbFlicker{
  0%,100%{transform:scale(1) rotate(-3deg);}
  50%    {transform:scale(1.13) rotate(3deg);}
}
@media (prefers-reduced-motion:reduce){ .bb-badge.fire.lit .bb-badge-em{animation:none;} }

/* very short screens: badges go single-line and lose the caption */
@media (max-height:340px){
  .bb-badge-tx i{display:none;}
  .bb-badge{padding:5px 8px;}
}

/* ===========================================================
   THE PAUSE MENU — full screen sky, one tight cartoon board.
   Rebuilt to be COMPACT: every option fits on the screen at once
   on a phone held sideways, so nothing scrolls and a child sees
   the whole game in a single glance.
   =========================================================== */
#bbMenu{
  position:fixed;inset:0;z-index:99996;
  display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 10px)
          calc(env(safe-area-inset-bottom,0px) + 6px) calc(env(safe-area-inset-left,0px) + 10px);
  font-family:var(--bb-font);
  /* same friendly sky as the welcome screen, so the app feels like one place */
  background:
    radial-gradient(80% 60% at 50% 4%, rgba(255,247,196,.75) 0%, rgba(255,247,196,0) 56%),
    radial-gradient(100% 62% at 50% 122%, rgba(72,175,96,.92) 0%, rgba(72,175,96,0) 60%),
    linear-gradient(180deg,#3f9ddb 0%,#74c3ec 46%,#c6e9f8 100%);
  opacity:0;transition:opacity .22s ease;
}
#bbMenu.show{opacity:1;}
#bbMenu .bb-menu-card{
  width:min(100%,940px);max-height:100%;
  display:flex;flex-direction:column;gap:clamp(4px,.9vh,9px);
  transform:translateY(10px) scale(.98);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1);
}
#bbMenu.show .bb-menu-card{transform:none;}

/* ---- header: one short banner line, logo and name together ---- */
.bb-menu-hd{display:flex;align-items:center;gap:clamp(7px,1.6vw,13px);flex:0 0 auto;}
.bb-menu-hd .lg{
  height:clamp(26px,6.2vh,48px);width:auto;
  filter:drop-shadow(0 5px 10px rgba(0,40,70,.32));
  animation:bbBob 2.6s ease-in-out infinite alternate;
}
.bb-menu-hd .hd-tx{display:flex;flex-direction:column;line-height:1;min-width:0;}
.bb-menu-hd .hd-tx b{
  font:900 clamp(14px,3.7vh,26px)/1 var(--bb-font);color:#fff;
  letter-spacing:.5px;text-transform:uppercase;
  text-shadow:0 3px 0 #14507d, 0 6px 14px rgba(0,25,50,.35), 0 0 24px rgba(120,200,255,.3);
}
.bb-menu-hd .hd-tx i{
  font:800 clamp(8px,1.7vh,12px)/1.35 var(--bb-font);font-style:normal;
  color:#0d3f66;letter-spacing:1.3px;text-transform:uppercase;opacity:.85;
}
.bb-menu-x{
  all:unset;pointer-events:auto;margin-left:auto;cursor:pointer;flex:0 0 auto;
  position:relative;
  width:clamp(30px,6.2vh,44px);height:clamp(30px,6.2vh,44px);
  border-radius:999px;                       /* round, to match the bubble */
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(70% 60% at 50% 118%, rgba(180,20,0,.5) 0%, rgba(180,20,0,0) 70%),
    linear-gradient(180deg,#ffa285 0%,#f2543a 45%,#d0290f 100%);
  color:#fff;
  font-size:clamp(13px,2.9vh,19px);font-weight:900;
  border:3px solid #fff;
  box-shadow:0 5px 0 rgba(120,25,10,.6), 0 9px 16px rgba(0,30,60,.25),
             inset 0 3px 0 rgba(255,255,255,.45);
  touch-action:manipulation;
  transition:transform .13s cubic-bezier(.34,1.7,.5,1), box-shadow .13s ease;
}
.bb-menu-x::before{
  content:'';position:absolute;left:18%;right:18%;top:8%;height:28%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
}
.bb-menu-x:active{transform:translateY(4px) scale(.93);box-shadow:0 1px 0 rgba(120,25,10,.6);}

/* ---- the option board ----
   The tiles size themselves: as many columns as comfortably fit, so a
   sideways phone gets three or four and nothing ever has to scroll. */
.bb-menu-grid{
  flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,208px),1fr));
  align-content:start;
  gap:clamp(4px,.95vh,9px);padding:2px;
}

/* ---- a tile is a fat cartoon sticker in its own colour ---- */
.mi{
  all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:clamp(6px,1.3vw,11px);
  padding:clamp(5px,1.15vh,10px) clamp(7px,1.25vw,12px);
  border-radius:clamp(15px,3.2vh,26px);      /* rounder, and smaller with it */
  background:
    linear-gradient(180deg,#ffffff 0%,
      color-mix(in srgb, var(--mi-accent,#38bdf8) 20%, #ffffff) 100%);
  background-color:#eef8ff;
  border:clamp(2.5px,.55vh,4px) solid #fff;
  box-shadow:
    0 clamp(3px,.7vh,6px) 0 color-mix(in srgb, var(--mi-accent,#38bdf8) 62%, #0b3a5e),
    0 clamp(6px,1.3vh,13px) 18px rgba(0,40,80,.22),
    inset 0 2px 0 rgba(255,255,255,.95);
  color:#0b3a5e;touch-action:manipulation;overflow:hidden;
  transition:transform .13s cubic-bezier(.34,1.7,.5,1), box-shadow .13s ease, background .2s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .mi{background:linear-gradient(180deg,#ffffff 0%,#e2f2ff 100%);
      box-shadow:0 5px 0 rgba(21,80,125,.4), 0 10px 18px rgba(0,40,80,.22),
                 inset 0 2px 0 rgba(255,255,255,.95);}
}
/* a soft glow of the tile's own colour sweeping out from the medallion */
.mi::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 130% at -4% 50%,
             color-mix(in srgb, var(--mi-accent,#38bdf8) 40%, transparent) 0%,
             transparent 64%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .mi::after{background:linear-gradient(90deg, rgba(56,189,248,.24), transparent 55%);}
}
.mi:active{transform:translateY(clamp(3px,.6vh,5px)) scale(.972);
  box-shadow:0 1px 0 rgba(21,80,125,.4), 0 3px 8px rgba(0,40,80,.22);}

/* every option gets its own round medallion — the cartoon "sticker" look */
.mi-em{
  position:relative;z-index:1;flex:0 0 auto;
  width:clamp(29px,6.1vh,46px);height:clamp(29px,6.1vh,46px);
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(15px,3.4vh,25px);line-height:1;
  background:
    radial-gradient(70% 58% at 50% 116%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 52%),
    var(--mi-accent,#38bdf8);
  border:clamp(2px,.45vh,3px) solid #fff;
  box-shadow:0 3px 0 rgba(0,45,80,.24), 0 5px 10px rgba(0,40,80,.18);
  text-shadow:0 2px 3px rgba(0,30,60,.3);
}
.mi-tx{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;line-height:1.12;text-align:left;}
.mi-tx b{font:900 clamp(11px,2.65vh,18px)/1.08 var(--bb-font);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.mi-tx i{
  font:700 clamp(8px,1.65vh,12px)/1.28 var(--bb-font);font-style:normal;
  color:#54819f;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.mi-badge{
  position:absolute;z-index:2;top:4px;right:6px;
  background:linear-gradient(180deg,#ff8a3d,#f0431c);
  color:#fff;font:900 clamp(8px,1.6vh,11px)/1 var(--bb-font);
  border-radius:999px;padding:3px 7px;border:2px solid #fff;
  box-shadow:0 3px 0 rgba(150,35,10,.5);pointer-events:none;white-space:nowrap;
}

/* the primary action spans the row and looks like the Play button */
.mi.hero{
  grid-column:1 / -1;justify-content:center;
  border-radius:clamp(19px,4.2vh,34px);
  padding:clamp(6px,1.35vh,12px) clamp(10px,1.6vw,16px);
  background:
    radial-gradient(75% 60% at 50% 118%, rgba(6,90,40,.45) 0%, rgba(6,90,40,0) 70%),
    linear-gradient(180deg,#9df7a8 0%,#43cd6b 40%,#1ea34c 100%);
  background-color:#1ea34c;
  border:clamp(3px,.65vh,4px) solid #fff;color:#06331a;
  box-shadow:0 clamp(5px,1vh,8px) 0 rgba(11,90,42,.85), 0 14px 24px rgba(0,40,20,.35),
             inset 0 4px 0 rgba(255,255,255,.55);
}
/* a whisper of shine along the very top edge — a highlight, not a bar */
.mi.hero::after{
  content:'';position:absolute;inset:auto 0 auto 0;top:4%;height:16%;
  left:7%;right:7%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
}
.mi.hero .mi-em{
  width:clamp(30px,6.4vh,50px);height:clamp(30px,6.4vh,50px);
  background:
    radial-gradient(70% 58% at 50% 116%, rgba(0,60,25,.25) 0%, rgba(0,60,25,0) 70%),
    linear-gradient(180deg,#ffffff 0%,#dcffe6 100%);
  box-shadow:0 4px 0 rgba(8,70,35,.3), 0 6px 12px rgba(0,50,25,.22);
  text-shadow:none;
}
.mi.hero .mi-tx{text-align:center;align-items:center;}
/* White cap-letters with a dark green underline shadow. The old white shadow
   sat *under* dark text on a green button and read as a second, blurry copy
   of the word — a ghost. Cartoon lettering wants the light on top. */
.mi.hero .mi-tx b{font-size:clamp(13px,3.3vh,23px);letter-spacing:1px;text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 2px 0 rgba(6,66,30,.55), 0 4px 8px rgba(0,40,18,.28);}
.mi.hero .mi-tx i{color:rgba(255,255,255,.92);text-shadow:0 1px 0 rgba(6,66,30,.45);}
.mi.hero:active{transform:translateY(6px) scale(.98);box-shadow:0 2px 0 rgba(11,90,42,.85), 0 5px 12px rgba(0,40,20,.35);}

.m-daily{--mi-accent:#0fbf8f;}
.m-rand {--mi-accent:#8b5cf6;}
.m-col  {--mi-accent:#f4a900;}
.m-snd  {--mi-accent:#0ea5e9;}
.m-how  {--mi-accent:#f97316;}
.m-faq  {--mi-accent:#3b82f6;}
.m-rst  {--mi-accent:#f43f5e;}
.m-exit {--mi-accent:#94a3b8;}
.m-zoom {--mi-accent:#14b8a6;}
.m-draw {--mi-accent:#e11d8f;}
.m-ink  {--mi-accent:#0891b2;}
.m-notif{--mi-accent:#e0761a;}
.m-tut  {--mi-accent:#a855f7;}
.mi.pulse{animation:bbGlow 2.2s ease-in-out infinite;}
@keyframes bbGlow{
  0%,100%{border-color:#fff;}
  50%    {border-color:#0fbf8f;}
}
/* today's daily, once it is actually WON — a gold rosette, not a tick */
.mi.m-daily.won{--mi-accent:#f6b70a;}
.mi.m-daily.won .mi-em{animation:bbCheer 1.8s ease-in-out infinite;}
.mi.m-daily.won .mi-badge{background:linear-gradient(180deg,#7ee6a8,#16a34a);
  box-shadow:0 3px 0 rgba(12,90,45,.55);}


.m-map  {--mi-accent:#0ea5a4;}

/* ===========================================================
   THE THREE BIG ROUND BUTTONS
   Keep Playing / Daily Bonus / Random Bonus. A child reads a
   circle as "press me" long before they read a word, so these
   are the only round things on the board — and the word sits
   ABOVE the circle where it labels the button like a sign.
   =========================================================== */
.bb-circles{
  flex:0 0 auto;
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,3.2vw,38px);
  padding:clamp(2px,.6vh,6px) 2px clamp(3px,.8vh,8px);
}
.cbtn{
  all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(2px,.5vh,5px);
  touch-action:manipulation;min-width:0;
  --cb-a:#38bdf8;      /* the button's own colour */
  --cb-d:#0b628f;      /* the darker rim under it */
  --cb-sz:clamp(46px,12.4vh,92px);
  transition:transform .14s cubic-bezier(.34,1.7,.5,1);
}
.cbtn.big{--cb-sz:clamp(58px,15.6vh,116px);}

/* the sign above the circle */
.cb-lb{
  font:900 clamp(9.5px,2.25vh,17px)/1 var(--bb-font);
  color:#fff;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 2px 0 #14507d, 0 4px 10px rgba(0,25,50,.4);
}
.cbtn.big .cb-lb{font-size:clamp(11px,2.75vh,21px);letter-spacing:.9px;}

/* the circle itself */
.cb-o{
  position:relative;flex:0 0 auto;
  width:var(--cb-sz);height:var(--cb-sz);border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(72% 58% at 50% 118%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 46%),
    var(--cb-a);
  border:clamp(3px,.7vh,5px) solid #fff;
  box-shadow:
    0 clamp(5px,1.1vh,9px) 0 var(--cb-d),
    0 clamp(9px,1.9vh,18px) 22px rgba(0,40,80,.3),
    inset 0 clamp(3px,.6vh,5px) 0 rgba(255,255,255,.5);
  transition:transform .14s cubic-bezier(.34,1.7,.5,1), box-shadow .14s ease;
}
/* a crescent of shine across the top, the classic sticker highlight */
.cb-o::before{
  content:'';position:absolute;left:16%;right:16%;top:7%;height:26%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0));
}
.cb-em{
  position:relative;z-index:1;line-height:1;
  font-size:calc(var(--cb-sz) * .46);
  text-shadow:0 3px 5px rgba(0,30,60,.35);
}
.cb-badge{
  position:absolute;z-index:3;top:-6%;right:-8%;
  background:linear-gradient(180deg,#ff8a3d,#f0431c);
  color:#fff;font:900 clamp(8px,1.6vh,12px)/1 var(--bb-font);
  border-radius:999px;padding:3px 7px;border:2px solid #fff;
  box-shadow:0 3px 0 rgba(150,35,10,.5);pointer-events:none;white-space:nowrap;
}
/* the small caption under the circle */
.cb-sub{
  font:800 clamp(7.5px,1.6vh,12px)/1.2 var(--bb-font);font-style:normal;
  color:#0d3f66;opacity:.9;text-align:center;
  max-width:calc(var(--cb-sz) + clamp(14px,4vw,44px));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cbtn:active{transform:translateY(clamp(3px,.7vh,6px)) scale(.96);}
.cbtn:active .cb-o{box-shadow:0 1px 0 var(--cb-d), 0 3px 9px rgba(0,40,80,.3),
                              inset 0 3px 0 rgba(255,255,255,.5);}

.c-play {--cb-a:#22c55e;--cb-d:#0b6b33;}
.c-daily{--cb-a:#0fbf8f;--cb-d:#076d52;}
.c-daily.won{--cb-a:#f6b70a;--cb-d:#96690a;}

/* still to win today — a slow friendly breath, not a strobe */
.c-daily.pulse .cb-o{animation:bbCircleBreath 2.3s ease-in-out infinite;}
.c-daily.won  .cb-em{animation:bbCheer 1.8s ease-in-out infinite;}
/* a brand new session: the Play circle asks to be tapped */
.cbtn.tapnow .cb-o{animation:bbCircleTap 1.5s ease-in-out infinite;}
@keyframes bbCircleBreath{
  0%,100%{transform:scale(1);}
  50%    {transform:scale(1.055);}
}
@keyframes bbCircleTap{
  0%,100%{transform:scale(1);}
  42%    {transform:scale(1.075);}
  60%    {transform:scale(.995);}
}
@media (prefers-reduced-motion:reduce){
  .c-daily.pulse .cb-o,.cbtn.tapnow .cb-o,.c-daily.won .cb-em{animation:none;}
}
/* not much headroom: drop the captions, keep the circles */
@media (max-height:400px){ .cb-sub{display:none;} }
@media (max-height:330px){ .bb-circles{gap:clamp(6px,2vw,16px);} }

/* ---- the gear, sitting just left of the ✕ ----
   It takes the margin-left:auto so the pair floats to the right edge
   together and the ✕ stays exactly where the player expects it. */
.bb-menu-gear{
  all:unset;pointer-events:auto;margin-left:auto;cursor:pointer;flex:0 0 auto;
  position:relative;
  width:clamp(30px,6.2vh,44px);height:clamp(30px,6.2vh,44px);
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(70% 60% at 50% 118%, rgba(10,60,100,.5) 0%, rgba(10,60,100,0) 70%),
    linear-gradient(180deg,#bfe6ff 0%,#5fb6e8 45%,#2b83bf 100%);
  color:#fff;
  font-size:clamp(15px,3.4vh,23px);font-weight:900;
  border:3px solid #fff;
  box-shadow:0 5px 0 rgba(15,70,110,.6), 0 9px 16px rgba(0,30,60,.25),
             inset 0 3px 0 rgba(255,255,255,.45);
  touch-action:manipulation;
  transition:transform .13s cubic-bezier(.34,1.7,.5,1), box-shadow .13s ease;
}
.bb-menu-gear::before{
  content:'';position:absolute;left:18%;right:18%;top:8%;height:28%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
}
.bb-menu-gear:active{transform:translateY(4px) scale(.93) rotate(38deg);
  box-shadow:0 1px 0 rgba(15,70,110,.6);}
/* with a gear present the ✕ no longer needs to push itself right */
.bb-menu-hd .bb-menu-gear + .bb-menu-x{margin-left:clamp(5px,1.2vw,10px);}

/* ===========================================================
   SETTINGS — the same board, one layer up. Sound, Reminders,
   How to Play and the FAQ live here now: they are switches,
   not games, and they were crowding out the buttons that are.
   =========================================================== */
#bbSet{
  position:fixed;inset:0;z-index:99998;
  display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 10px)
          calc(env(safe-area-inset-bottom,0px) + 6px) calc(env(safe-area-inset-left,0px) + 10px);
  font-family:var(--bb-font);
  background:
    radial-gradient(80% 60% at 50% 4%, rgba(255,247,196,.75) 0%, rgba(255,247,196,0) 56%),
    radial-gradient(100% 62% at 50% 122%, rgba(72,175,96,.92) 0%, rgba(72,175,96,0) 60%),
    linear-gradient(180deg,#3f9ddb 0%,#74c3ec 46%,#c6e9f8 100%);
  opacity:0;transition:opacity .22s ease;
}
#bbSet.show{opacity:1;}
#bbSet .bb-menu-card{
  width:min(100%,760px);max-height:100%;
  display:flex;flex-direction:column;gap:clamp(4px,.9vh,9px);
  transform:translateY(10px) scale(.98);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1);
}
#bbSet.show .bb-menu-card{transform:none;}
/* only four things in here, so let them be generous */
#bbSet .bb-menu-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:clamp(5px,1.2vh,12px);
}

/* footer stats strip */
.bb-menu-ft{
  flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(7px,2.2vw,24px);
  padding:clamp(3px,.9vh,8px) 10px 0;
  border-top:2px solid rgba(255,255,255,.6);
}
.bb-menu-ft span{display:flex;flex-direction:column;align-items:center;line-height:1.1;}
.bb-menu-ft b{font:900 clamp(10px,2.2vh,16px)/1 var(--bb-font);color:#a45b00;}
.bb-menu-ft span:nth-child(3) b{color:#0a7a55;}
.bb-menu-ft span{font:800 clamp(7px,1.4vh,10px)/1.55 var(--bb-font);
  letter-spacing:1.1px;text-transform:uppercase;color:#0d3f66;}

/* very short screens: drop the second line of every tile rather than scroll */
@media (max-height:400px){
  .mi-tx i{display:none;}
  .mi.hero .mi-tx i{display:block;}
}

/* ===========================================================
   SPLASH — first screen, guarantees the audio-unlock tap
   =========================================================== */
#bbSplash{
  position:fixed;inset:0;z-index:99999;overflow:hidden;
  font-family:var(--bb-font);text-align:center;
  transition:opacity .35s ease;
}
#bbSplash.gone{opacity:0;pointer-events:none;}

/* ---- the little world behind Birdy ---- */
.bb-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.bb-scene .sky{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 50% 6%, rgba(255,247,196,.75) 0%, rgba(255,247,196,0) 56%),
    linear-gradient(180deg,#3f9ddb 0%,#74c3ec 46%,#c6e9f8 100%);
}
.bb-scene .sun{
  position:absolute;left:9%;top:8%;width:min(22vh,140px);height:min(22vh,140px);
  border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff6c2 0%,#ffdc63 52%,#ffc22e 100%);
  box-shadow:0 0 0 min(3vh,18px) rgba(255,226,120,.32), 0 0 70px rgba(255,205,80,.65);
  animation:bbSunPulse 5.5s ease-in-out infinite alternate;
}
@keyframes bbSunPulse{from{transform:scale(1);}to{transform:scale(1.07);}}

.bb-scene .cl{
  position:absolute;border-radius:999px;background:#fff;opacity:.92;
  box-shadow:0 8px 22px rgba(20,70,110,.16);
  will-change:transform;
}
.bb-scene .cl::before,.bb-scene .cl::after{
  content:'';position:absolute;border-radius:50%;background:#fff;
}
.bb-scene .cl::before{width:58%;height:150%;left:12%;top:-72%;}
.bb-scene .cl::after {width:42%;height:118%;right:12%;top:-50%;}
.bb-scene .c1{width:150px;height:44px;top:12%;animation:bbDrift 34s linear infinite;}
.bb-scene .c2{width:104px;height:32px;top:26%;opacity:.8;animation:bbDrift 46s linear infinite -12s;}
.bb-scene .c3{width:196px;height:54px;top:5%; opacity:.75;animation:bbDrift 58s linear infinite -30s;}
.bb-scene .c4{width:126px;height:38px;top:38%;opacity:.7; animation:bbDrift 41s linear infinite -22s;}
.bb-scene .c5{width:88px; height:28px;top:19%;opacity:.65;animation:bbDrift 52s linear infinite -40s;}
.bb-scene .c6{width:168px;height:48px;top:32%;opacity:.55;animation:bbDrift 66s linear infinite -50s;}
@keyframes bbDrift{from{transform:translateX(-260px);}to{transform:translateX(calc(100vw + 260px));}}

/* birds crossing the sky, gently flapping */
.bb-scene .fb{position:absolute;will-change:transform;}
.bb-scene .fb img{
  display:block;height:100%;width:auto;
  filter:drop-shadow(0 4px 8px rgba(0,40,70,.22));
  animation:bbFlapFly 1.1s ease-in-out infinite alternate;
}
/* big enough that a child reads them as Birdy's friends rather than
   as specks of colour, small enough to stay in the background */
.bb-scene .f1{height:44px;top:17%;animation:bbFly 22s linear infinite;}
.bb-scene .f2{height:33px;top:29%;opacity:.88;animation:bbFly 29s linear infinite -9s;}
.bb-scene .f3{height:26px;top:9%; opacity:.75;animation:bbFly 37s linear infinite -20s;}
.bb-scene .f4{height:37px;top:40%;opacity:.66;animation:bbFly 33s linear infinite -27s;}
@keyframes bbFly{
  0%  {transform:translateX(-140px) translateY(0);}
  25% {transform:translateX(28vw) translateY(-16px);}
  50% {transform:translateX(52vw) translateY(10px);}
  75% {transform:translateX(76vw) translateY(-12px);}
  100%{transform:translateX(calc(100vw + 140px)) translateY(0);}
}
/* the artwork faces LEFT but bbFly carries the flock left→right, so every
   bird is mirrored to face the way it is actually flying. Own keyframes —
   the generic bbFlap (defined later, shared by mascots) must NOT flip. */
@keyframes bbFlapFly{from{transform:scaleX(-1) rotate(7deg) scaleY(1);}to{transform:scaleX(-1) rotate(-6deg) scaleY(.9);}}

.bb-scene .hill{position:absolute;left:-12%;right:-12%;border-radius:50% 50% 0 0;}
.bb-scene .h2{bottom:8%;height:26vh;background:#5cb96e;opacity:.75;}
.bb-scene .h1{bottom:10%;height:19vh;background:#4aa85e;left:22%;right:-30%;}
.bb-scene .grass{
  position:absolute;left:0;right:0;bottom:0;height:13vh;
  background:linear-gradient(180deg,#66c777 0%,#3f9a53 100%);
  box-shadow:inset 0 6px 0 rgba(255,255,255,.22);
}
.bb-scene .tree{position:absolute;bottom:11vh;width:0;height:0;}
.bb-scene .tree::before{
  content:'';position:absolute;left:-4px;bottom:0;width:8px;height:26px;
  background:#7a4b22;border-radius:3px;
}
.bb-scene .tree::after{
  content:'';position:absolute;left:-26px;bottom:20px;width:52px;height:46px;
  background:radial-gradient(circle at 40% 32%,#63c473 0%,#2f8a48 100%);
  border-radius:50%;box-shadow:0 6px 14px rgba(0,50,20,.2);
}
.bb-scene .t1{left:12%;transform:scale(1.15);}
.bb-scene .t2{right:16%;left:auto;transform:scale(.9);}
.bb-scene .t3{left:38%;transform:scale(.7);opacity:.85;}

/* ---- Birdy and the words, sitting on top of the world ---- */
#bbSplash .wrapin{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vh;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 12px calc(env(safe-area-inset-bottom,0px) + 8px);
  box-sizing:border-box;
}
#bbSplash .birdbox{position:relative;display:flex;flex-direction:column;align-items:center;}
#bbSplash .bird{
  width:auto;height:22vh;max-height:170px;min-height:70px;
  filter:drop-shadow(0 10px 18px rgba(0,40,70,.35));
  animation:bbBob 2.2s ease-in-out infinite alternate;
}
/* ── Gold Birdy, forever — the reward for beating Level 50 ──────────────
   Applied from one class on <html> so every shell mascot is gilded in step
   with the canvas renders inside the game, rather than one call site at a
   time. Background flock birds (.fb, .gbd) are deliberately NOT included:
   those are ordinary birds, not Birdy. */
html.bb-gold #bbSplash .bird{
  filter:grayscale(1) sepia(1) saturate(3.0) hue-rotate(6deg) brightness(1.15) contrast(1.25)
         drop-shadow(0 0 16px rgba(255,215,0,.8))
         drop-shadow(0 10px 18px rgba(0,40,70,.35));
}
html.bb-gold .bbmasc,
html.bb-gold .bem,
html.bb-gold .bw-bird,
html.bb-gold img.lg{
  filter:grayscale(1) sepia(1) saturate(3.0) hue-rotate(6deg) brightness(1.15) contrast(1.25)
         drop-shadow(0 0 10px rgba(255,215,0,.75));
}

#bbSplash .shadow{
  width:14vh;max-width:110px;height:1.6vh;max-height:13px;margin-top:.4vh;
  border-radius:50%;background:rgba(20,70,40,.22);filter:blur(3px);
  animation:bbShadow 2.2s ease-in-out infinite alternate;
}
@keyframes bbShadow{from{transform:scale(1);opacity:.28;}to{transform:scale(.78);opacity:.16;}}
@keyframes bbBob{from{transform:translateY(0) rotate(-3deg);}to{transform:translateY(-14px) rotate(3deg);}}

#bbSplash .bb-bubble{
  position:relative;margin-bottom:.6vh;
  background:#fff;color:#0d3f66;border:3px solid #0d3f66;
  border-radius:999px;padding:.5em 1.1em;
  font:900 clamp(11px,2.6vh,18px)/1 var(--bb-font);
  box-shadow:0 5px 0 rgba(13,63,102,.22);
  animation:bbPop .5s cubic-bezier(.34,1.56,.64,1) both .3s;
}
#bbSplash .bb-bubble i{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  width:0;height:0;border:9px solid transparent;border-top-color:#0d3f66;border-bottom:0;
}
@keyframes bbPop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}

#bbSplash .ttl{
  font:900 clamp(24px,7.6vh,52px)/1 var(--bb-font);
  letter-spacing:1px;text-transform:uppercase;color:#fff;
  text-shadow:0 4px 0 #1b5f95, 0 7px 0 rgba(0,0,0,.22), 0 12px 26px rgba(0,30,60,.4);
}
#bbSplash .sub{
  font:800 clamp(10px,2.2vh,15px)/1.3 var(--bb-font);color:#0d3f66;
  background:rgba(255,255,255,.6);border-radius:999px;padding:.4em 1em;
}
#bbPlay{
  all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;
  padding:.9em 2.4em;border-radius:999px;
  background:linear-gradient(180deg,#7ff08f,#1ea34c);
  border:4px solid #fff;color:#06331a;
  font:900 clamp(16px,4.4vh,28px)/1 var(--bb-font);letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 7px 0 rgba(11,90,42,.85), 0 14px 24px rgba(0,40,20,.35), inset 0 3px 0 rgba(255,255,255,.5);
  touch-action:manipulation;
}
#bbPlay:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(11,90,42,.85), 0 5px 12px rgba(0,40,20,.35);}
#bbReplay{
  all:unset;pointer-events:auto;cursor:pointer;font:700 clamp(10px,2.2vh,14px)/1 var(--bb-font);
  color:#0d3f66;opacity:.75;text-decoration:underline;padding:8px 14px;touch-action:manipulation;
}

/* ===========================================================
   TOAST — “daily bonus is ready” style notifications
   =========================================================== */
#bbToast{
  position:fixed;left:50%;transform:translate(-50%,-20px);
  top:calc(env(safe-area-inset-top,0px) + 10px);
  z-index:99998;max-width:min(78vw,520px);
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(12,40,66,.94),rgba(6,22,40,.96));
  border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 6px 0 rgba(0,0,0,.28), 0 12px 26px rgba(0,20,40,.4);
  color:#fff;font:800 clamp(11px,2.4vh,15px)/1.25 var(--bb-font);
  cursor:pointer;opacity:0;transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  touch-action:manipulation;text-align:left;
}
#bbToast.show{opacity:1;transform:translate(-50%,0);}
#bbToast .em{font-size:1.5em;line-height:1;}
#bbToast .go{
  background:linear-gradient(180deg,#7ff08f,#1ea34c);color:#06331a;
  border:2px solid #fff;border-radius:999px;padding:5px 12px;
  font:900 .85em/1 var(--bb-font);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
}

/* ===========================================================
   IN-APP SHEET — How to Play / FAQ, layered over the menu
   =========================================================== */
#bbSheet{
  /* ⚠ TOP LAYER. How to Play and the FAQ are opened FROM the Settings
     screen (#bbSet, z-index 99998), and #bbSet paints a fully opaque
     sky. At 99997 this sheet built correctly, loaded its iframe, and
     was drawn entirely behind Settings — the buttons looked dead.
     Anything the player opens from Settings must sit ABOVE it. */
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  /* the same sunny sky as every other screen — a dark scrim here made the
     info pages feel like a different, gloomier app */
  background:linear-gradient(180deg,#7fc3ee 0%,#a9dcf5 52%,#bfe6c2 100%);
  opacity:0;transition:opacity .25s ease;font-family:var(--bb-font);
}
#bbSheet.show{opacity:1;}
#bbSheet .card{
  position:relative;width:min(92vw,900px);height:min(92vh,720px);
  background:#fff;border-radius:22px;border:4px solid #fff;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,20,40,.55);
  transform:scale(.94);transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
#bbSheet.show .card{transform:scale(1);}
#bbSheet iframe{width:100%;height:100%;border:0;display:block;background:#fff;}
#bbSheetX{
  all:unset;pointer-events:auto;position:absolute;top:10px;right:10px;z-index:2;cursor:pointer;
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ff8f6b,#e0331c);color:#fff;font-size:20px;
  border:3px solid #fff;box-shadow:0 4px 0 rgba(120,25,10,.6);touch-action:manipulation;
}
#bbSheetX:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,25,10,.6);}

/* ===========================================================
   BIRDY COLOR PICKER — the Bonus-Master reward screen.
   Inline styles are overridden with !important so the reveal
   looks like a proper unlock celebration.
   =========================================================== */
html.bb-app #_colorOv{
  left:0 !important;top:0 !important;width:100% !important;height:100% !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  gap:1.6vh !important;font-family:var(--bb-font) !important;
  background:
    radial-gradient(65% 48% at 50% 26%, rgba(255,205,90,.28) 0%, rgba(255,205,90,0) 60%),
    radial-gradient(120% 90% at 50% 118%, rgba(120,60,220,.55) 0%, rgba(120,60,220,0) 62%),
    linear-gradient(180deg,#2a1b63 0%,#170e39 52%,#0a0620 100%) !important;
  overflow:hidden !important;
}
html.bb-app #_colorOv::before{
  content:'';position:absolute;left:50%;top:42%;width:150vmax;height:150vmax;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,
    rgba(255,200,70,.16) 0deg, rgba(255,200,70,0) 42deg,
    rgba(120,220,255,.15) 90deg, rgba(120,220,255,0) 130deg,
    rgba(255,120,220,.15) 200deg, rgba(255,120,220,0) 245deg,
    rgba(255,200,70,.16) 360deg);
  animation:bbSpin 26s linear infinite;
}
@keyframes bbSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
html.bb-app #_colorOv > *{position:relative;z-index:1;}

html.bb-app #_colorOv > div:first-of-type{
  font:900 clamp(17px,5vh,34px)/1 var(--bb-font) !important;
  color:#ffd451 !important;letter-spacing:.6px;text-transform:uppercase;
  text-shadow:0 3px 0 #7a4a00, 0 6px 0 rgba(0,0,0,.28), 0 0 26px rgba(255,190,60,.55) !important;
}
html.bb-app #_colorOv img{
  height:24vh !important;min-height:70px !important;max-height:190px !important;
  animation:bbBob 2.4s ease-in-out infinite alternate;
}
html.bb-app #_colorOv > div:nth-of-type(2){
  font:900 clamp(12px,3vh,20px)/1 var(--bb-font) !important;
  letter-spacing:.4px;text-shadow:0 2px 0 rgba(0,0,0,.45), 0 0 18px currentColor !important;
}
html.bb-app #_colorOv > div:nth-of-type(3){
  max-width:min(78vw,560px) !important;gap:clamp(8px,2vw,16px) !important;
}
html.bb-app #_colorOv [data-cid]{
  width:clamp(40px,9vh,62px) !important;height:clamp(40px,9vh,62px) !important;
  font-size:clamp(17px,3.6vh,26px) !important;
  border-width:4px !important;
}
html.bb-app #_colorOv [data-cid]:active{transform:scale(.9) !important;}
html.bb-app #_colorOv > div:nth-of-type(4){
  font:700 clamp(9px,2vh,13px)/1.2 var(--bb-font) !important;
  color:rgba(255,255,255,.55) !important;letter-spacing:.4px;
}
html.bb-app #_covGo{
  width:min(60vw,300px) !important;
  padding:.85em 0 !important;border-radius:999px !important;
  background:linear-gradient(180deg,#7ff08f,#1ea34c) !important;
  border:4px solid #fff !important;color:#06331a !important;
  font:900 clamp(14px,3.6vh,24px)/1 var(--bb-font) !important;
  letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 7px 0 rgba(11,90,42,.85), 0 14px 24px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5) !important;
}
html.bb-app #_covGo:active{transform:translateY(5px) !important;box-shadow:0 2px 0 rgba(11,90,42,.85) !important;}

/* ===========================================================
   GUTTER SKY — the space either side of the play area on a very
   wide phone. Clouds and distant birds drift there so it reads
   as more sky, never as a black bar.
   =========================================================== */
#bbGutter{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
#bbGutter .gsun{
  position:absolute;left:4%;top:6%;width:min(16vh,90px);height:min(16vh,90px);border-radius:50%;
  background:radial-gradient(circle at 38% 34%,rgba(255,250,214,.95) 0%,rgba(255,220,99,.85) 55%,rgba(255,194,46,.7) 100%);
  box-shadow:0 0 60px rgba(255,205,80,.55);
}
#bbGutter .gcl{
  position:absolute;border-radius:999px;background:rgba(255,255,255,.85);will-change:transform;
}
#bbGutter .gcl::before,#bbGutter .gcl::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.85);}
#bbGutter .gcl::before{width:58%;height:150%;left:12%;top:-72%;}
#bbGutter .gcl::after {width:42%;height:118%;right:12%;top:-50%;}
#bbGutter .g1{width:120px;height:34px;top:14%;opacity:.75;animation:bbGDrift 44s linear infinite;}
#bbGutter .g2{width:86px; height:26px;top:33%;opacity:.6; animation:bbGDrift 58s linear infinite -16s;}
#bbGutter .g3{width:150px;height:42px;top:6%; opacity:.5; animation:bbGDrift 72s linear infinite -34s;}
#bbGutter .g4{width:100px;height:30px;top:52%;opacity:.45;animation:bbGDrift 64s linear infinite -48s;}
#bbGutter .g5{width:70px; height:22px;top:24%;opacity:.4; animation:bbGDrift 80s linear infinite -60s;}
@keyframes bbGDrift{from{transform:translateX(-200px);}to{transform:translateX(calc(100vw + 200px));}}
#bbGutter .gbd{position:absolute;will-change:transform;}
#bbGutter .gbd img{display:block;height:100%;width:auto;opacity:.55;
  animation:bbFlap 1.2s ease-in-out infinite alternate;}
#bbGutter .b1{height:22px;top:20%;animation:bbGFly 40s linear infinite;}
#bbGutter .b2{height:16px;top:44%;animation:bbGFly 54s linear infinite -18s;}
#bbGutter .b3{height:13px;top:11%;animation:bbGFly 68s linear infinite -38s;}
@keyframes bbGFly{
  0%  {transform:translateX(-120px) translateY(0);}
  50% {transform:translateX(50vw) translateY(-18px);}
  100%{transform:translateX(calc(100vw + 120px)) translateY(0);}
}

/* (the old Fit/Full split is gone — there is only one way to see the game
   now, always full screen and never cropped, so no per-mode rules remain) */

/* ===========================================================
   WELCOME BACK — Birdy says hello after an hour away
   =========================================================== */
#bbWelcome{
  position:fixed;inset:0;z-index:99994;display:flex;align-items:center;justify-content:center;
  padding:16px;font-family:var(--bb-font);
  background:rgba(4,20,38,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s ease;
}
#bbWelcome.show{opacity:1;}
#bbWelcome .bw-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.8vh;
  width:min(90vw,430px);box-sizing:border-box;
  padding:clamp(12px,2.6vh,22px) clamp(14px,3vw,26px) clamp(12px,2.4vh,20px);
  border-radius:26px;border:4px solid #fff;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,247,196,.9) 0%, rgba(255,247,196,0) 60%),
    linear-gradient(180deg,#7ec7ee 0%,#c6e9f8 62%,#e8f8ff 100%);
  box-shadow:0 16px 40px rgba(0,30,60,.45);
  transform:translateY(18px) scale(.94);
  transition:transform .34s cubic-bezier(.34,1.56,.64,1);
}
#bbWelcome.show .bw-card{transform:none;}
#bbWelcome .bw-bubble{
  position:relative;background:#fff;color:#0d3f66;border:3px solid #0d3f66;
  border-radius:999px;padding:.45em 1.1em;
  font:900 clamp(12px,2.6vh,18px)/1 var(--bb-font);
  box-shadow:0 5px 0 rgba(13,63,102,.2);
}
#bbWelcome .bw-bubble i{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  width:0;height:0;border:9px solid transparent;border-top-color:#0d3f66;border-bottom:0;
}
#bbWelcome .bw-bird{
  height:clamp(64px,15vh,120px);width:auto;
  filter:drop-shadow(0 9px 16px rgba(0,40,70,.35));
  animation:bbBob 2.1s ease-in-out infinite alternate;
}
#bbWelcome .bw-tx{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;}
#bbWelcome .bw-tx b{font:900 clamp(14px,3.2vh,22px)/1.1 var(--bb-font);color:#0d3f66;}
#bbWelcome .bw-tx span{font:800 clamp(10px,2.2vh,14px)/1.3 var(--bb-font);color:#2c6a95;}
#bbWelcome .bw-go{
  all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;margin-top:.6vh;
  padding:.7em 2em;border-radius:999px;
  background:linear-gradient(180deg,#7ff08f,#1ea34c);
  border:4px solid #fff;color:#06331a;
  font:900 clamp(13px,3vh,20px)/1 var(--bb-font);letter-spacing:.6px;text-transform:uppercase;
  box-shadow:0 6px 0 rgba(11,90,42,.85), 0 12px 20px rgba(0,40,20,.3), inset 0 3px 0 rgba(255,255,255,.5);
  touch-action:manipulation;
}
#bbWelcome .bw-go:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(11,90,42,.85);}

/* ===========================================================
   BONUS RESULT CARD — a real app panel, same buttons as the menu
   =========================================================== */
#bbBonus,#bbStart{
  position:fixed;inset:0;z-index:99995;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 12px)
          calc(env(safe-area-inset-bottom,0px) + 8px) calc(env(safe-area-inset-left,0px) + 12px);
  font-family:var(--bb-font);
  background:
    radial-gradient(75% 55% at 50% 2%, rgba(255,247,196,.75) 0%, rgba(255,247,196,0) 58%),
    radial-gradient(100% 62% at 50% 124%, rgba(72,175,96,.9) 0%, rgba(72,175,96,0) 60%),
    linear-gradient(180deg,#3f9ddb 0%,#74c3ec 46%,#c6e9f8 100%);
  opacity:0;transition:opacity .24s ease;
}
#bbBonus.show,#bbStart.show{opacity:1;}
#bbBonus.hide,#bbStart.hide{opacity:0;}
#bbBonus .bbb-card,#bbStart .bbb-card{
  width:min(100%,620px);max-height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:1.2vh;
  transform:translateY(14px) scale(.96);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
#bbBonus.show .bbb-card,#bbStart.show .bbb-card{transform:none;}

.bbb-hd{
  position:relative;display:flex;align-items:center;
  gap:clamp(8px,2vw,16px);justify-content:center;
}
.bbb-em{
  position:relative;
  font-size:clamp(34px,9vh,64px);line-height:1;
  filter:drop-shadow(0 5px 8px rgba(0,40,70,.3));
  animation:bbPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
/* the trophy takes a happy little bow; Birdy flaps and hovers */
.bbb-em .cup{display:inline-block;animation:bbCheer 1.5s ease-in-out .45s infinite;}
.bbb-em .bem.big{
  width:clamp(52px,13vh,104px);height:auto;display:block;
  animation:bbFlap 1.9s ease-in-out .4s infinite;
}
/* sparkles, so the moment feels like a celebration and not a failure */
.bbb-em .sp{
  position:absolute;width:.30em;height:.30em;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffd257 55%,rgba(255,210,87,0) 72%);
  opacity:0;pointer-events:none;
}
.bbb-em .sp.s1{left:-14%;top:6%;  animation:bbSpark 2.2s ease-in-out .5s infinite;}
.bbb-em .sp.s2{right:-16%;top:22%;animation:bbSpark 2.2s ease-in-out 1.0s infinite;}
.bbb-em .sp.s3{left:4%;bottom:-8%;animation:bbSpark 2.2s ease-in-out 1.5s infinite;}
.bbb-em .sp.s4{right:2%;bottom:2%;animation:bbSpark 2.2s ease-in-out 1.9s infinite;}
/* three soft clouds drifting behind the words — same sky as the game */
.bbb-sky{position:absolute;inset:-30% 0 auto 0;height:150%;pointer-events:none;overflow:hidden;}  /* left/right were -12%: a 74px sideways overflow on the result card */
.bbb-sky i{
  position:absolute;display:block;border-radius:999px;
  background:rgba(255,255,255,.55);filter:blur(1px);
}
.bbb-sky i::before,.bbb-sky i::after{
  content:'';position:absolute;bottom:0;border-radius:50%;background:inherit;
}
.bbb-sky .c1{width:26%;height:22%;left:-30%;top:8%; animation:bbDrift 26s linear infinite;}
.bbb-sky .c2{width:18%;height:16%;left:-30%;top:58%;animation:bbDrift 34s linear 6s infinite;}
.bbb-sky .c3{width:32%;height:24%;left:-40%;top:32%;animation:bbDrift 44s linear 14s infinite;opacity:.6;}
.bbb-sky i::before{width:52%;height:150%;left:12%;}
.bbb-sky i::after {width:44%;height:125%;right:10%;}
.bbb-tx em{
  font:800 clamp(10px,2.1vh,15px)/1.35 var(--bb-font);font-style:normal;
  color:#fff;margin-top:.35em;letter-spacing:.3px;
  text-shadow:0 2px 0 rgba(20,70,110,.55), 0 4px 12px rgba(0,30,60,.35);
}
/* ── gate cards ────────────────────────────────────────────────────────
   "Level 15 Still Locked" is far longer than "So Close!", and the side-by-side
   header was only ever sized for the short ones — the headline ran back under
   the trophy. Gate cards stack instead: emblem on top, everything centred. */
.bbb-hd.gate{flex-direction:column;gap:clamp(2px,.9vh,8px);}
.bbb-hd.gate .bbb-em{font-size:clamp(26px,6.6vh,48px);}
.bbb-hd.gate .bbb-em .bem.big{width:clamp(40px,9.5vh,76px);}
.bbb-hd.gate .bbb-tx{text-align:center;align-items:center;max-width:100%;}
.bbb-hd.gate .bbb-tx b{font-size:clamp(16px,4.3vh,31px);line-height:1.05;}
.bbb-hd.gate .bbb-tx em{
  max-width:min(90vw,560px);white-space:normal;text-wrap:balance;
}
@keyframes bbCheer{
  0%,100%{transform:translateY(0) rotate(0);}
  30%    {transform:translateY(-9%) rotate(-7deg);}
  60%    {transform:translateY(-4%) rotate(6deg);}
}
@keyframes bbFlap{
  0%,100%{transform:translateY(0)    rotate(-2deg) scaleY(1);}
  35%    {transform:translateY(-9%)  rotate(3deg)  scaleY(.94);}
  70%    {transform:translateY(-2%)  rotate(-3deg) scaleY(1.03);}
}
@keyframes bbSpark{
  0%,72%,100%{opacity:0;transform:scale(.4);}
  80%        {opacity:1;transform:scale(1.5);}
  90%        {opacity:.5;transform:scale(.9);}
}
@keyframes bbDrift{
  from{transform:translateX(0);}
  to  {transform:translateX(460%);}
}
@media (prefers-reduced-motion:reduce){
  .bbb-em .cup,.bbb-em .bem.big,.bbb-em .sp,.bbb-sky i{animation:none;}
}

/* ===========================================================
   THE REAL BIRDY, used anywhere a row would otherwise show a
   generic bird emoji (menu rows, result rows, game-over cards).
   =========================================================== */
.mi-em .bem{
  width:1.15em;height:auto;display:block;
  filter:drop-shadow(0 3px 5px rgba(0,40,70,.32));
}
.bbb-em .bem{width:1.2em;height:auto;display:block;filter:drop-shadow(0 4px 7px rgba(0,40,70,.3));}
.bbb-em .bem.big{width:clamp(52px,13vh,104px);}

/* ===========================================================
   THE LIVING BACKDROP — the same sunny world sits behind the
   pause menu, the result cards and the info sheets, so every
   screen in the app feels like one place instead of a flat box.
   =========================================================== */
.bb-scene.soft{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:.62;
}
.bb-scene.soft .cl{opacity:.55;}
.bb-scene.soft .hill{opacity:.5;}
.bb-scene.soft .grass{opacity:.55;}
.bb-scene.soft .tree{opacity:.6;}
.bb-scene.soft .sun{opacity:.7;}
#bbMenu>*:not(.bb-scene),
#bbOver>*:not(.bb-scene),
#bbBonus>*:not(.bb-scene),
#bbStart>*:not(.bb-scene),
#bbSheet>*:not(.bb-scene){position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce){ .bb-scene.soft .cl,.bb-scene.soft .fb{animation:none;} }
.bbb-tx{display:flex;flex-direction:column;line-height:1.05;text-align:left;}
.bbb-tx b{
  font:900 clamp(20px,5.4vh,38px)/1 var(--bb-font);
  letter-spacing:.5px;text-transform:uppercase;color:#fff;
  text-shadow:0 4px 0 #1b5f95, 0 8px 16px rgba(0,30,60,.4);
}
.bbb-tx i{
  font:800 clamp(10px,2.2vh,15px)/1.4 var(--bb-font);font-style:normal;
  color:#0d3f66;letter-spacing:1px;text-transform:uppercase;opacity:.85;
}

.bbb-prog{
  display:flex;flex-direction:column;align-items:center;gap:.5vh;
  background:rgba(255,255,255,.55);border-radius:18px;
  padding:clamp(6px,1.4vh,12px) clamp(10px,2vw,18px);
}
.bbb-prog .bar{
  width:100%;height:clamp(9px,1.7vh,14px);border-radius:999px;overflow:hidden;
  background:rgba(13,63,102,.18);box-shadow:inset 0 2px 4px rgba(0,30,60,.18);
}
.bbb-prog .bar span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#ffd257,#f4a900);
  box-shadow:0 0 12px rgba(255,190,60,.7);
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.bbb-prog .pips{display:flex;gap:clamp(2px,.8vw,6px);}
.bbb-prog .pips i{font-style:normal;font-size:clamp(10px,2.2vh,16px);
  filter:grayscale(1) opacity(.35);transition:filter .3s ease;}
.bbb-prog .pips i.w{filter:none;text-shadow:0 0 10px rgba(255,190,60,.8);}
.bbb-prog .lbl{font:800 clamp(9px,1.9vh,13px)/1.2 var(--bb-font);color:#0d3f66;letter-spacing:.4px;}
.bbb-all{
  text-align:center;font:900 clamp(12px,2.8vh,19px)/1.2 var(--bb-font);color:#7a4a00;
  background:linear-gradient(180deg,#ffe9a8,#ffd257);
  border:3px solid #fff;border-radius:18px;padding:.6em 1em;
  box-shadow:0 5px 0 rgba(160,110,10,.4);
}

.bbb-grid{display:flex;flex-direction:column;gap:clamp(6px,1.3vh,11px);padding:2px;}
#bbBonus .mi.hero,#bbStart .mi.hero{justify-content:center;}

/* ===========================================================
   GAME OVER / STILL THERE? — built into the screen, never a
   little popup. Same sky, same buttons, and it always says in
   plain words WHY the game stopped.
   =========================================================== */
#bbOver{
  position:fixed;inset:0;z-index:99996;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 12px)
          calc(env(safe-area-inset-bottom,0px) + 8px) calc(env(safe-area-inset-left,0px) + 12px);
  font-family:var(--bb-font);
  background:
    radial-gradient(78% 56% at 50% 0%, rgba(255,226,170,.72) 0%, rgba(255,226,170,0) 60%),
    radial-gradient(100% 62% at 50% 122%, rgba(58,140,86,.92) 0%, rgba(58,140,86,0) 62%),
    linear-gradient(180deg,#2e7fb8 0%,#5aa9d9 44%,#b9e0f4 100%);
  opacity:0;transition:opacity .26s ease;
}
#bbOver.show{opacity:1;}
#bbOver .bbo-card{
  width:min(100%,620px);max-height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:1.2vh;
  transform:translateY(16px) scale(.955);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
#bbOver.show .bbo-card{transform:none;}

/* the reason, in a sentence a kid can read */
.bbo-why{
  text-align:center;
  font:800 clamp(11px,2.5vh,17px)/1.35 var(--bb-font);
  color:#0d3f66;
  background:rgba(255,255,255,.62);
  border:3px solid rgba(255,255,255,.9);
  border-radius:18px;
  padding:clamp(7px,1.5vh,13px) clamp(11px,2.4vw,20px);
  box-shadow:0 4px 0 rgba(13,63,102,.14), 0 8px 18px rgba(0,40,70,.14);
}

#bbOver .bbb-grid{display:flex;flex-direction:column;gap:clamp(6px,1.3vh,11px);padding:2px;}
#bbOver .mi.hero{justify-content:center;}

/* ===========================================================
   CARTOON PASS — one kid-friendly, Birdy-themed look across
   every panel in the app: the pause menu, the bonus and
   game-over cards, the level pickers, the toast, the info
   sheets and the welcome card.

   The recipe is the same everywhere so it reads as one game:
     • fat white ring around everything
     • a flat colour "shelf" shadow underneath (0 Npx 0)
     • a glossy highlight band across the top
     • a springy squish when a finger lands on it
   =========================================================== */

/* ---- shared cartoon panel look ---------------------------- */
.bbb-prog,.bbb-all,.bbo-why{
  position:relative;overflow:hidden;
  border:3px solid #fff !important;
  border-radius:clamp(18px,3.4vh,28px) !important;
}
.bbb-prog{
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(226,244,255,.88) 100%);
  box-shadow:0 6px 0 rgba(21,80,125,.26), 0 11px 20px rgba(0,40,80,.18),
             inset 0 3px 0 rgba(255,255,255,.9);
}
.bbo-why{
  background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(224,242,255,.9) 100%) !important;
  box-shadow:0 6px 0 rgba(21,80,125,.24), 0 11px 20px rgba(0,40,80,.18),
             inset 0 3px 0 rgba(255,255,255,.9) !important;
}
.bbb-all{
  box-shadow:0 6px 0 rgba(160,110,10,.45), 0 12px 22px rgba(90,55,0,.22),
             inset 0 3px 0 rgba(255,255,255,.85) !important;
}
/* the glossy band that makes a flat panel look like a sweet */
.bbb-prog::before{
  content:'';position:absolute;left:6%;right:6%;top:5%;height:26%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
}
/* these two hold their words directly, so their gloss stays faint
   and hugs the very top — the text must never look washed out */
.bbb-all::before,.bbo-why::before{
  content:'';position:absolute;left:7%;right:7%;top:4%;height:15%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
}
/* keep the real content above the gloss */
.bbb-prog>*,.bbb-all>*{position:relative;z-index:1;}

/* the mastery bar gets a candy stripe that slides slowly */
.bbb-prog .bar{border:2px solid rgba(255,255,255,.85);height:clamp(11px,2vh,17px);}
.bbb-prog .bar span{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.34) 0 8px, rgba(255,255,255,0) 8px 17px),
    linear-gradient(180deg,#ffe487 0%,#ffc233 48%,#f09a05 100%);
  animation:bbCandy 1.1s linear infinite;
}
@keyframes bbCandy{ from{background-position:0 0,0 0;} to{background-position:34px 0,0 0;} }

/* ---- the celebration head, given a sunny halo -------------- */
.bbb-em::before{
  content:'';position:absolute;left:50%;top:50%;
  width:190%;height:190%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle closest-side, rgba(255,236,150,.8) 0%, rgba(255,214,90,.36) 46%, rgba(255,214,90,0) 100%);
  animation:bbHalo 2.8s ease-in-out infinite;
}
@keyframes bbHalo{ 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85;}
                   50%    {transform:translate(-50%,-50%) scale(1.12);opacity:1;} }
.bbb-hd.lose .bbb-em::before{
  background:radial-gradient(circle closest-side, rgba(255,255,255,.62) 0%, rgba(190,225,255,.32) 48%, rgba(190,225,255,0) 100%);
}

/* ---- level / bonus pickers: full-width cartoon rows -------- */
#bbBonus .bbb-grid .mi,
#bbStart .bbb-grid .mi,
#bbOver  .bbb-grid .mi{ width:100%; }
/* a soft cloud tucked into the right of every picker row, so the
   list feels like it is floating in Birdy's sky */
#bbBonus .bbb-grid .mi::before,
#bbStart .bbb-grid .mi::before,
#bbOver  .bbb-grid .mi::before{
  content:'';position:absolute;right:-6%;bottom:-38%;
  width:44%;height:112%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%);
}
#bbBonus .mi.hero::before,#bbStart .mi.hero::before,#bbOver .mi.hero::before{display:none;}

/* ---- the footer stats, as one rounded cartoon strip -------- */
.bb-menu-ft{
  border-top:0 !important;
  border:3px solid #fff;
  border-radius:clamp(16px,3vh,26px);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(224,242,255,.82));
  box-shadow:0 5px 0 rgba(21,80,125,.22), 0 9px 16px rgba(0,40,80,.15);
  padding:clamp(6px,1.3vh,11px) clamp(10px,2vw,18px) !important;
}

/* ---- the welcome card, chunkier and springier -------------- */
#bbWelcome .bw-card{
  border-radius:clamp(24px,5vh,34px);
  box-shadow:0 10px 0 rgba(21,80,125,.4), 0 20px 40px rgba(0,30,60,.4),
             inset 0 4px 0 rgba(255,255,255,.7);
}
#bbWelcome .bw-bubble{box-shadow:0 5px 0 rgba(13,63,102,.28), 0 9px 16px rgba(0,30,60,.2);}

/* ---- the toast, now a sunny speech bubble ------------------ */
#bbToast{
  background:linear-gradient(180deg,#fff6d8 0%,#ffdf95 100%) !important;
  border:3.5px solid #fff !important;
  color:#7a4300 !important;
  padding:11px 16px !important;
  box-shadow:0 6px 0 rgba(170,110,10,.45), 0 13px 26px rgba(0,20,40,.32) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
#bbToast .go{
  box-shadow:0 4px 0 rgba(11,90,42,.6), inset 0 2px 0 rgba(255,255,255,.5);
}

/* ---- the info sheet: fat frame + a round close bubble ------ */
#bbSheet .card{
  border-radius:clamp(20px,4vh,32px);
  border:5px solid #fff;
  box-shadow:0 12px 0 rgba(21,80,125,.34), 0 24px 46px rgba(0,20,40,.45);
}
#bbSheetX{
  width:clamp(38px,7.4vh,48px);height:clamp(38px,7.4vh,48px);
  border-radius:999px;position:absolute;
  background:
    radial-gradient(70% 60% at 50% 118%, rgba(180,20,0,.5) 0%, rgba(180,20,0,0) 70%),
    linear-gradient(180deg,#ffa285 0%,#f2543a 45%,#d0290f 100%);
  border:3px solid #fff;
  box-shadow:0 5px 0 rgba(120,25,10,.6), 0 9px 16px rgba(0,30,60,.25),
             inset 0 3px 0 rgba(255,255,255,.45);
  transition:transform .13s cubic-bezier(.34,1.7,.5,1), box-shadow .13s ease;
}
#bbSheetX::before{
  content:'';position:absolute;left:18%;right:18%;top:8%;height:28%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
}
#bbSheetX:active{transform:translateY(4px) scale(.93);box-shadow:0 1px 0 rgba(120,25,10,.6);}

/* ---- Birdy himself, wherever a row shows him --------------- */
.mi.hero .mi-em .bem{animation:bbFlap 2.2s ease-in-out infinite;}
.bb-badge-em .bem{filter:drop-shadow(0 3px 5px rgba(0,40,70,.32));}

@media (prefers-reduced-motion:reduce){
  .bbb-em::before,.bbb-prog .bar span,.mi.hero .mi-em .bem{animation:none;}
}


/* ===========================================================
   DRAW BIRDY — the finger-painting pad.
   Same sunny world as every other screen, big chunky crayon
   controls, and a ghost of the real Birdy behind the paper so
   a child can see exactly where their bird will end up.
   =========================================================== */
#bbDraw{
  position:fixed;inset:0;z-index:99997;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#7fc3ee 0%,#a9dcf5 52%,#bfe6c2 100%);
  opacity:0;transition:opacity .25s ease;font-family:var(--bb-font);
}
#bbDraw.show{opacity:1;}
#bbDraw .card{
  position:relative;z-index:2;
  width:min(94vw,760px);max-height:94vh;
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px 14px;
  background:linear-gradient(180deg,#ffffff,#eaf6ff);
  border:4px solid #fff;border-radius:26px;
  box-shadow:0 18px 50px rgba(0,20,40,.55);
  transform:scale(.94);transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
#bbDraw.show .card{transform:scale(1);}
#bbDrawX{
  all:unset;pointer-events:auto;position:absolute;top:8px;right:8px;z-index:4;cursor:pointer;
  width:40px;height:40px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ff8f6b,#e0331c);color:#fff;font-size:19px;
  border:3px solid #fff;box-shadow:0 4px 0 rgba(120,25,10,.6);touch-action:manipulation;
}
#bbDrawX:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,25,10,.6);}

#bbDraw .dhd{padding:2px 46px 0 4px;line-height:1.15;}
#bbDraw .dhd b{display:block;font:900 clamp(17px,4.4vw,23px)/1.1 var(--bb-font);color:#0b3d6b;}
#bbDraw .dhd i{display:block;font:700 clamp(11px,2.7vw,13px)/1.25 var(--bb-font);
  font-style:normal;color:#5b7fa0;margin-top:2px;}

/* the paper — aspect-locked to Birdy's own artwork so what they draw is
   literally the space Birdy occupies in the game */
#bbDraw .dpaper{
  position:relative;width:100%;aspect-ratio:274/193;
  max-height:min(46vh,340px);margin:0 auto;
  background:
    linear-gradient(180deg,#fffdf6,#fff8e6);
  border:3px dashed #ffc766;border-radius:18px;overflow:hidden;
  box-shadow:inset 0 3px 12px rgba(120,90,20,.10);
  touch-action:none;
}
#bbDraw .dghost{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill;opacity:.16;pointer-events:none;
  filter:brightness(0);
}
#bbDraw #bbDrawCv{
  position:absolute;inset:0;width:100%;height:100%;
  touch-action:none;cursor:crosshair;display:block;
}
#bbDraw .dhint{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  font:800 11px/1 var(--bb-font);color:#b08a35;opacity:.85;pointer-events:none;
  transition:opacity .2s ease;white-space:nowrap;
}
#bbDraw.inked .dhint{opacity:0;}

#bbDraw .dtools{display:flex;flex-direction:column;gap:7px;align-items:center;}
#bbDraw .dinks{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
#bbDraw .dsw{
  all:unset;cursor:pointer;touch-action:manipulation;
  width:clamp(28px,7.2vw,36px);height:clamp(28px,7.2vw,36px);border-radius:50%;
  background:var(--sw);border:3px solid #fff;
  box-shadow:0 3px 0 rgba(0,30,60,.28);
}
/* selected = a soft GLOW in the swatch's own colour. The old hard ring
   (0 0 0 6px) poked past the panel edge and looked chopped off on the top
   row — a blurred glow fades out instead of cutting. */
#bbDraw .dsw.on{
  transform:translateY(-1px) scale(1.08);
  box-shadow:0 3px 0 rgba(0,30,60,.3), 0 0 10px 2px var(--sw), 0 0 20px 5px var(--sw);
  animation:bbSwGlow 1.4s ease-in-out infinite alternate;
}
@keyframes bbSwGlow{
  from{box-shadow:0 3px 0 rgba(0,30,60,.3), 0 0 8px 2px var(--sw), 0 0 16px 4px var(--sw);}
  to  {box-shadow:0 3px 0 rgba(0,30,60,.3), 0 0 12px 3px var(--sw), 0 0 24px 7px var(--sw);}
}
#bbDraw .dsw:active{transform:translateY(2px) scale(1.02);}

#bbDraw .dbits{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;}
#bbDraw .dsz,#bbDraw .dbit{
  all:unset;cursor:pointer;touch-action:manipulation;
  min-width:clamp(38px,9.5vw,46px);height:clamp(34px,8.4vw,42px);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffffff,#dff0ff);
  border:3px solid #fff;border-radius:14px;font-size:17px;
  box-shadow:0 4px 0 rgba(11,61,107,.28);
}
#bbDraw .dsz i{display:block;background:#1f2937;border-radius:50%;}
#bbDraw .dsz.on,#bbDraw .dbit.on{
  background:linear-gradient(180deg,#ffe08a,#f4a900);
  box-shadow:0 4px 0 rgba(150,95,0,.45);
}
#bbDraw .dsz:active,#bbDraw .dbit:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(11,61,107,.28);}

#bbDraw .dbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:2px;}
#bbDraw .dbtns button{
  all:unset;cursor:pointer;touch-action:manipulation;
  padding:11px 16px;border-radius:16px;border:3px solid #fff;
  font:900 clamp(12px,3.1vw,15px)/1 var(--bb-font);text-align:center;
}
#bbDraw .dbtns button.dgo{
  background:linear-gradient(180deg,#7ff08f,#1ea34c);color:#06331a;
  box-shadow:0 5px 0 rgba(11,90,42,.75);
}
#bbDraw .dbtns button.dalt{
  background:linear-gradient(180deg,#ffffff,#d8e9f7);color:#0b3d6b;
  box-shadow:0 5px 0 rgba(11,61,107,.35);
}
#bbDraw .dbtns button.ddel{
  background:linear-gradient(180deg,#ffb0a2,#e0331c);color:#fff;
  box-shadow:0 5px 0 rgba(120,25,10,.55);
}
#bbDraw .dbtns button:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,30,60,.4);}

@media (max-height:430px){
  #bbDraw .dpaper{max-height:38vh;}
  #bbDraw .dhd i{display:none;}
}

/* ===========================================================
   THE DOCK, WITH TWO BUTTONS
   -----------------------------------------------------------
   When the Birdy colour picker is unlocked it moves out of the
   canvas HUD (where it was drawn straight underneath the menu
   bubble) and becomes a real button sitting immediately to the
   RIGHT of the menu. bbFit() already shrinks --bb-btn when the
   pair is present so the two of them still fit the 86px gap the
   game leaves between the bird counter and the weapon slots.
   =========================================================== */
#bbDock.two{gap:calc(var(--bb-btn) * .30);}
/* the soft dark halo stretches into a pill so it sits behind BOTH */
#bbDock.two::before{
  width:calc(var(--bb-btn) * 3.05);
  height:calc(var(--bb-btn) * 1.75);
  border-radius:999px;
  background:radial-gradient(closest-side,
    rgba(10,28,48,.84) 0%, rgba(10,28,48,.74) 58%, rgba(10,28,48,0) 100%);
}

/* 🎨 the colour picker bubble — same chunky kid-style gem as the menu,
   in Birdy's own pink so the two never get confused at a glance */
#bbPaint{
  all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;
  width:var(--bb-btn);height:var(--bb-btn);
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:
    radial-gradient(76% 62% at 50% 116%, rgba(255,60,140,.55) 0%, rgba(255,60,140,0) 70%),
    linear-gradient(180deg,#ffc0e2 0%,#ff5ea8 46%,#e01f74 100%);
  border:calc(var(--bb-btn) * .075) solid #fff;
  color:#4a0028;
  font-size:calc(var(--bb-btn) * .40);line-height:1;
  box-shadow:
    0 calc(var(--bb-btn) * .10) 0 rgba(150,0,70,.6),
    0 calc(var(--bb-btn) * .17) 20px rgba(0,20,40,.34),
    inset 0 calc(var(--bb-btn) * .06) 0 rgba(255,255,255,.62),
    inset 0 calc(var(--bb-btn) * -.09) 0 rgba(150,0,70,.2);
  touch-action:manipulation;
  transition:transform .13s cubic-bezier(.34,1.7,.5,1), box-shadow .13s ease,
             width .25s ease, height .25s ease;
}
#bbPaint::before{
  content:'';position:absolute;left:16%;right:16%;top:7%;height:30%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.05));
}
#bbPaint::after{
  content:'';position:absolute;right:17%;top:20%;
  width:12%;height:12%;border-radius:999px;pointer-events:none;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 6px rgba(255,255,255,.8);
}
#bbPaint .pi{position:relative;z-index:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));}
#bbPaint:active{
  transform:translateY(calc(var(--bb-btn) * .085)) scale(.94);
  box-shadow:0 1px 0 rgba(150,0,70,.6), 0 3px 8px rgba(0,20,40,.3),
             inset 0 calc(var(--bb-btn) * .05) 0 rgba(255,255,255,.5);
}
/* a slow shimmer the first time it appears, so a player notices it */
#bbPaint{animation:bbPaintPop .45s cubic-bezier(.2,1.5,.4,1) 1;}
@keyframes bbPaintPop{
  0%{transform:scale(.2) rotate(-25deg);opacity:0;}
  100%{transform:scale(1) rotate(0);opacity:1;}
}

/* ===========================================================
   ✕ BACK TO THE ORIGINAL GAME  (web build only)
   -----------------------------------------------------------
   Pinned to the top-right corner of the PICTURE, not the screen,
   so on a shape where the game cannot fill every pixel the ✕
   still hugs the artwork instead of floating alone in the sky.
   =========================================================== */
#bbExit{
  all:unset;box-sizing:border-box;cursor:pointer;
  position:fixed;
  top:calc(var(--bb-oy, 0px) + max(9px, var(--bb-ch, 100vh) * .022));
  right:calc(var(--bb-ox, 0px) + max(9px, var(--bb-cw, 100vw) * .014));
  width:clamp(28px, calc(var(--bb-ch, 420px) * .086), 44px);
  height:clamp(28px, calc(var(--bb-ch, 420px) * .086), 44px);
  border-radius:999px;z-index:9001;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(76% 62% at 50% 116%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(22,52,84,.92) 0%, rgba(10,30,54,.94) 100%);
  border:2px solid rgba(255,255,255,.86);
  color:#fff;font-weight:900;line-height:1;
  font-family:var(--bb-font);
  font-size:clamp(13px, calc(var(--bb-ch, 420px) * .040), 20px);
  box-shadow:0 3px 0 rgba(4,16,32,.55), 0 6px 16px rgba(0,20,40,.42),
             inset 0 2px 0 rgba(255,255,255,.28);
  touch-action:manipulation;
  transition:transform .13s cubic-bezier(.34,1.7,.5,1), box-shadow .13s ease, opacity .3s ease;
}
#bbExit .x{position:relative;top:-.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);}
#bbExit:active{
  transform:translateY(2px) scale(.93);
  box-shadow:0 1px 0 rgba(4,16,32,.55), 0 3px 8px rgba(0,20,40,.35);
}
/* out of the way while the chrome is hidden (splash, cinematic intro) */
html.bb-app.bb-hidechrome #bbExit{opacity:0;pointer-events:none;}

/* ═══ Centered menu header ═══════════════════════════════════════════
   On wide screens the BIRDY BLAST title sat hard-left while everything
   under it was centred. The mascot + name now sit dead centre, and the
   gear and ✕ float in the header corners — perfectly symmetrical. */
.bb-menu-hd{
  position:relative;justify-content:center;
  min-height:clamp(36px,6.6vh,50px);
  padding:0 calc(2*clamp(30px,6.2vh,44px) + clamp(14px,2.6vw,24px));
}
.bb-menu-hd .hd-tx{align-items:center;text-align:center;}
.bb-menu-hd .bb-menu-gear,
.bb-menu-hd .bb-menu-x{
  position:absolute;top:50%;margin-left:0;
  transform:translateY(-50%);
}
.bb-menu-hd .bb-menu-x{right:0;}
.bb-menu-hd .bb-menu-gear{right:calc(clamp(30px,6.2vh,44px) + clamp(8px,1.4vw,12px));}
.bb-menu-hd .bb-menu-gear:active{transform:translateY(-50%) translateY(4px) scale(.93) rotate(38deg);}
.bb-menu-hd .bb-menu-x:active{transform:translateY(-50%) translateY(4px) scale(.93);}


/* wide screens: tiles stay a sensible width and sit centred, so the
   Drawing Studio / Level Map row lines up under the play circles and
   labels no longer truncate */
.bb-menu-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),290px));
  justify-content:center;
}


/* ═══ Phone-sized Drawing Studio ══════════════════════════════════════
   On short screens (landscape phones) the stacked pad squeezed the paper
   into a strip. Below 560px of height the studio goes FULL SCREEN as two
   columns: the paper fills the left side (aspect kept, so drawings never
   distort), and tabs/inks/gallery live in a slim rail on the right.
   pointer:coarse keeps this a TOUCH-ONLY layout — a desktop browser in a
   short or zoomed window keeps the classic centred card. */
@media (max-height:560px) and (pointer:coarse){
  #bbDraw{align-items:stretch;justify-content:stretch;}
  #bbDraw .card{
    width:100vw;height:100vh;height:100dvh;max-height:none;
    border-radius:0;border:none;transform:none;
    display:grid;gap:6px;padding:6px 8px 8px;
    grid-template-columns:minmax(0,1fr) clamp(170px,30vw,240px);
    grid-template-rows:auto minmax(0,1fr) auto auto;
  }
  #bbDraw .dhd{grid-column:1;grid-row:1;padding:2px 4px 0;}
  #bbDraw .dhd i{display:none;}
  #bbDrawTabs{grid-column:2;grid-row:1;margin:0 34px 0 0 !important;flex-wrap:wrap;gap:5px !important;}
  #bbDrawTabs button{padding:5px 9px !important;font-size:11px !important;}
  #bbDraw .dpaper{
    grid-column:1;grid-row:2/4;align-self:center;justify-self:center;
    height:100%;width:auto;max-width:100%;max-height:none;
  }
  #bbDraw .dtools{
    grid-column:2;grid-row:2;min-height:0;overflow-y:auto;
    justify-content:flex-start;gap:6px;
    /* no visible scrollbar — it stole width from the rail and clipped the
       right edge of the colour swatches (still finger-scrollable if ever
       needed) */
    scrollbar-width:none;-ms-overflow-style:none;
    padding:5px 4px;width:100%;box-sizing:border-box;
  }
  #bbDraw .dtools::-webkit-scrollbar{display:none;width:0;height:0;}
  #bbDraw .dinks{max-width:100%;}
  #bbDraw .dsw{width:25px;height:25px;flex:0 0 auto;}
  #bbDrawGal{grid-column:2;grid-row:3;margin:0 !important;flex-wrap:wrap;gap:8px !important;}
  #bbDrawGal img{width:46px !important;height:34px !important;}
  #bbDraw .dbtns{grid-column:1/3;grid-row:4;display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;}
  #bbDraw .dbtns button{white-space:nowrap;}
  #bbDrawX{top:6px;right:6px;width:34px;height:34px;font-size:16px;}
}
/* very small heights: trim button padding so everything still fits */
@media (max-height:400px) and (pointer:coarse){
  #bbDraw .dbtns .dgo,#bbDraw .dbtns .dalt,#bbDraw .dbtns .ddel{
    padding:8px 10px !important;font-size:12px !important;}
  #bbDraw .dhd b{font-size:15px !important;}
}


/* bb-road-fix: under the app shell the engine's own ✕ exit button doubled up
   with the shell's EXIT GAME pill — one exit is plenty */
html.bb-app #exitBtn{display:none !important;}
/* bb-road-fix: the EXIT GAME pill also stands over the road maps */
#bbSiteX{z-index:999800 !important;}

/* bb-road-fix: first-time Drawing Studio nudge banner */
#bbNudge{position:fixed;top:calc(env(safe-area-inset-top,0px) + 106px);left:50%;transform:translate(-50%,-460%);z-index:99500;display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:999px;background:linear-gradient(135deg,#f472b6,#a855f7);border:3px solid #fff;box-shadow:0 8px 30px rgba(120,40,160,.45),0 0 24px rgba(244,114,182,.5);cursor:pointer;max-width:min(92vw,440px);transition:transform .5s cubic-bezier(.2,1.5,.4,1);font-family:var(--bb-font,system-ui,sans-serif)}
#bbNudge.show{transform:translate(-50%,0)}
#bbNudge .nj{font-size:27px;line-height:1;animation:bbNwig 1.1s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
#bbNudge .nt{display:flex;flex-direction:column;min-width:0}
#bbNudge .nt b{color:#fff;font-size:14px;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bbNudge .nt i{color:rgba(255,255,255,.94);font-style:normal;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bbNudge .nx{flex:0 0 auto;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.28);color:#fff;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
#bbNudge::after{content:'✨';position:absolute;top:-9px;right:16px;font-size:15px;animation:bbNtw 1.6s ease-in-out infinite}
#bbNudge::before{content:'✨';position:absolute;bottom:-9px;left:20px;font-size:12px;animation:bbNtw 1.6s ease-in-out .8s infinite}
@keyframes bbNwig{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(11deg) scale(1.12)}}
@keyframes bbNtw{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}