/* THE COVER. Her ask 29 Aug: a start screen like theirs. Cartoony, warm, one big
   button. The backdrop is the honeycomb itself, softened, so the first thing the
   player sees is the world they are about to fill in. */

/* HER COVER. The grey room pattern was a sensible choice when the logo had to
   fight for attention, and next to a honey wordmark it read washed out. This is
   Bao and his hive in the garden, drawn with the top third and the bottom quarter
   left calm because the name sits on one and the PLAY button on the other. */
#cover { position:fixed; inset:0; overflow:hidden;
  background:#f7e6b4 url("art/ui/cover_bg.webp?v=1788299536") center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; }

/* the drifting comb behind everything, her own finished rooms */
#coverComb { position:absolute; inset:-14%; opacity:.78; filter:none;
  animation:drift 34s ease-in-out infinite alternate; }
@keyframes drift { from { transform:translate(-1.5%, -1%) scale(1.02); }
                   to   { transform:translate(1.5%, 1.5%) scale(1.06); } }
#coverComb .c { position:absolute; transform:translate(-50%,-50%);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:#eee0c6; }
#coverComb .c img { width:100%; height:100%; object-fit:cover; display:block; }
/* Her call: finished rooms in COLOUR, everything still locked in GREY, so the
   cover is a picture of how far she has got and it fills in as she plays. */
#coverComb .c.lit img { filter:none; }
#coverComb .c.dim img { filter:grayscale(1) brightness(1.06) contrast(.88); opacity:.72; }
/* THE OLD COVER, STOOD DOWN. This comb of greyed room tiles WAS the cover art:
   63 thumbnails behind the logo. It was the right answer while there was no
   cover picture. Now there is one, with Bao and his hive in a garden, and two
   backgrounds cannot both be the background. It is hidden rather than deleted,
   so putting it back is one line. */
#coverComb { display:none; }
#coverComb .c.dim     { background:#e8dcc6; }
/* board beyond the levels we have. Just texture, never a fake room. */
#coverComb .c.pad { background:#ece1cd; box-shadow:inset 0 0 0 2px #e4d6ba; }
/* a wash so the cast always reads against whatever room sits behind it */
/* The veil only has to make the words and the cast readable. Any stronger and it
   washes her rooms out, which is the opposite of what the backdrop is for. So it
   is a narrow band behind the title and the button, not a blanket over everything. */
#coverVeil { position:absolute; inset:0;
  /* lighter now: it existed to lift the cats off a busy grey pattern, and over
     a calm garden the old strength just fogged her drawing */
  background:radial-gradient(ellipse 74% 30% at 50% 54%, #faf3e79c 0%, #faf3e75c 55%, #faf3e700 100%); }

/* ------------------------------------------------------------------- the title */
#coverTitle { position:relative; width:min(86vw, 400px); height:auto; display:block;
  margin-bottom:1vh;
  filter:drop-shadow(0 6px 12px rgba(90,55,20,.30));
  animation:titleIn .7s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes titleIn { from { transform:scale(.86) rotate(-3deg); opacity:0 }
                     to   { transform:scale(1) rotate(0deg); opacity:1 } }

/* --------------------------------------------------------------------- the cast */
#coverCast { position:relative; display:flex; align-items:flex-end;
  justify-content:center; gap:clamp(-6px,-1vw,0px); margin:1vh 0 3vh; }
#coverCast img { display:block;
  filter:drop-shadow(0 6px 10px rgba(90,60,30,.34)) drop-shadow(0 0 3px #fffaf0cc); }
#coverCast .bao   { width:clamp(120px,34vw,190px); z-index:3; animation:bob 3.4s ease-in-out infinite; }
#coverCast .miso  { width:clamp(78px,22vw,124px); z-index:2; margin-right:-6%;
  animation:bob 3.9s ease-in-out infinite .5s; }
#coverCast .mochi { width:clamp(66px,19vw,106px); z-index:2; margin-left:-6%;
  transform:scaleX(-1);              /* so he leans IN, not away from the player */
  animation:bobFlip 4.3s ease-in-out infinite .9s; }
@keyframes bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
/* a mirrored sticker needs its own loop or the animation throws the flip away */
@keyframes bobFlip { 0%,100% { transform:scaleX(-1) translateY(0) }
                     50%     { transform:scaleX(-1) translateY(-6px) } }

/* -------------------------------------------------------------------- the button */
#coverPlay { position:relative; border:none; cursor:pointer; padding:0;
  width:min(70vw,290px); height:66px;
  background:url(art/ui/shop_button.webp?v=1788299536) center/100% 100% no-repeat;
  color:#fff; -webkit-text-stroke:.7px #3f7a26; paint-order:stroke fill;
  font:900 clamp(17px,5vw,23px)/66px "Avenir Next", system-ui, sans-serif;
  letter-spacing:.06em; animation:beat 2.6s ease-in-out infinite;
  filter:drop-shadow(0 5px 9px rgba(60,90,30,.3)); }
#coverPlay:active { transform:scale(.96); animation:none; }
@keyframes beat { 0%,100% { transform:scale(1) } 50% { transform:scale(1.035) } }
/* it sits over a room now, so it needs its own plate to stay readable */
#coverWhere { position:relative; margin-top:10px; color:#7a5c3e;
  font:800 12px/1 "Avenir Next", system-ui, sans-serif; min-height:12px;
  background:#fffaf0ee; border:1.5px solid #e0cba6; border-radius:12px;
  padding:5px 12px; box-shadow:0 2px 6px rgba(90,60,25,.16); }
#coverWhere:empty { display:none; }

/* --------------------------------------------------------------------- the corners */
#coverTop { position:absolute; left:0; right:0; top:0; display:flex; gap:8px;
  padding:9px 10px; align-items:center; }
#coverTop .grow { flex:1; }
#coverBottom { position:absolute; left:0; right:0; bottom:0; display:flex;
  gap:10px; justify-content:center; padding:0 10px 16px; }
.coverBtn { width:52px; height:52px; border-radius:50%; border:3px solid #e2c194;
  background:#fffaf0; cursor:pointer; display:flex; align-items:center;
  justify-content:center; box-shadow:0 4px 8px rgba(90,60,30,.18); padding:0; }
.coverBtn img { width:26px; height:26px; object-fit:contain; }

/* the coin chip, same shape as the map's so the two screens match */
.mapChip { display:flex; align-items:center; gap:5px; background:#fffaf0;
  border:2px solid #e2c194; border-radius:20px; padding:4px 10px 4px 6px;
  color:#7a5c3e; font:800 13px/1 "Avenir Next", system-ui, sans-serif; }
.mapChip img { width:20px; height:20px; object-fit:contain; }