/*
  BunBun's A-Z Letter Hunt — scene-specific styling (v2).
  Shared chrome (topbar, speech bubble, character states, living
  background decor, tile float/correct/wrong animations) lives in
  games/shared/game-shell.css — this file covers what's unique to
  this game: the meadow backdrop, a soft ground strip for the tree
  and flowers to stand on, the letter-tile look, and small per-tile
  variety (tilt / scale / occasionally "peeking" from behind a decor
  element) so the scene never feels like 26 identical grids.
*/

#gameStage{
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--gold) 55%, transparent), transparent 40%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, #fff 22%, transparent), transparent 45%),
    linear-gradient(160deg, var(--green) 0%, var(--blue) 55%, var(--purple) 100%);
}
/* Soft ground strip so the tree trunk and flower stems look planted
   in something, rather than floating over the sky gradient. */
#gameStage::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:16%; z-index:1;
  background:linear-gradient(to top, color-mix(in srgb, var(--green) 70%, black 10%), transparent);
  pointer-events:none;
}

#bunbunChar{
  left:4%; top:10%; width:min(22vw,140px); height:min(22vw,140px);
}
/* The bubble sits BESIDE BunBun (not above) so it can never poke past
   the stage's own rounded, clipped top edge no matter how close to the
   top BunBun sits or how long the line is. */
#bunbunChar .speech-bubble-game{
  left:100%; top:50%; margin-left:14px; right:auto; bottom:auto;
  transform-origin:left center; transform:translateY(-50%) scale(0.92);
}
#bunbunChar .speech-bubble-game.is-visible{ transform:translateY(-50%) scale(1); }
#bunbunChar .speech-bubble-game::after{ content:none; }

#letterField{ position:absolute; inset:0; z-index:4; }

.letter-tile-wrap{ width:clamp(64px,13vw,104px); height:clamp(64px,13vw,104px); }
.letter-tile{
  border-radius:22px; font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  font-weight:800; font-size:clamp(2rem,5.5vw,3rem); color:#fff;
  box-shadow:0 10px 0 rgba(0,0,0,0.18), 0 14px 24px -8px rgba(0,0,0,0.35), inset 0 -4px 0 rgba(0,0,0,0.12);
}
.letter-tile:nth-of-type(7n+1){ background:linear-gradient(155deg,#FF6B5B,#E5342A); }
.letter-tile:nth-of-type(7n+2){ background:linear-gradient(155deg,#3EC7F4,#1595DE); }
.letter-tile:nth-of-type(7n+3){ background:linear-gradient(155deg,#FFCD4B,#E5A400); }
.letter-tile:nth-of-type(7n+4){ background:linear-gradient(155deg,#3EDB9C,#189E64); }
.letter-tile:nth-of-type(7n+5){ background:linear-gradient(155deg,#B98CF0,#7A46E0); }
.letter-tile:nth-of-type(7n+6){ background:linear-gradient(155deg,#FF9FC2,#E5568C); }
.letter-tile:nth-of-type(7n+7){ background:linear-gradient(155deg,#FFA65E,#E5732B); }

/* A tile marked "peeking" sits partly tucked behind the tree or the
   flowers — a soft clip on its OUTER edge only (never the side a
   finger needs to tap), purely for the "lives in a scene" feeling.
   Never applied to the target letter. */
.letter-tile-wrap.is-peeking-left .letter-tile{ clip-path:inset(0 0 0 26%); }
.letter-tile-wrap.is-peeking-right .letter-tile{ clip-path:inset(0 26% 0 0); }

@media (max-width:600px){
  #bunbunChar{ width:110px; height:110px; }
}