/* v5: host moods + ROCK snowflake brand layer (keeps to transform/opacity for animation) */
#splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:14px;
  background:radial-gradient(70% 60% at 50% 45%,#3a1628,#0b0409 75%),url(../assets/img/snow_tile.webp);background-blend-mode:normal;transition:opacity .6s ease}
#splash::before{content:"";position:absolute;inset:0;background:url(../assets/img/snow_tile.webp) 0 0/120px;opacity:.06}
#splash .mk{width:min(38vw,38vh);aspect-ratio:1;background:url(../assets/img/snow_512.webp) center/contain no-repeat;
  filter:drop-shadow(0 0 22px rgba(255,190,70,.55));animation:snowin 1.1s cubic-bezier(.2,.9,.3,1.2) both, snowspin 9s linear 1.1s infinite}
#splash .nm{font:900 clamp(18px,4.2vmin,30px)/1 Georgia,serif;letter-spacing:.32em;color:#f6d488;text-shadow:0 2px 0 #6b3d00,0 0 18px rgba(255,190,70,.5);opacity:0;animation:fadeup .7s .5s forwards}
#splash .bar{width:120px;height:3px;border-radius:2px;background:rgba(255,215,120,.15);overflow:hidden}
#splash .bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,#ffd77a,transparent);animation:barslide 1s linear infinite}
#splash.done{opacity:0;pointer-events:none}
@keyframes snowin{from{transform:scale(.3) rotate(-120deg);opacity:0}to{transform:none;opacity:1}}
@keyframes snowspin{to{transform:rotate(360deg)}}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes barslide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* spin button: glossy gold snowflake replaces the arrow */
.spinbtn .ico{font-size:0!important;width:58%;aspect-ratio:1;margin-top:-14%;background:url(../assets/img/snow_512.webp) center/contain no-repeat;
  filter:drop-shadow(0 1px 0 #fff6c0) drop-shadow(0 2px 3px rgba(60,20,0,.55))}
.spinbtn .lbl{bottom:12%}
.spinbtn.spinning .ico{animation:spinbg .9s linear infinite}

/* faint snowflake pattern: page background + inside the reel window */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url(../assets/img/snow_tile.webp) 0 0/150px;opacity:.035}
.reel{background-image:url(../assets/img/snow_tile.webp),linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.05) 50%,rgba(0,0,0,.35));background-size:110px,auto}
.snowdiv{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;z-index:4;pointer-events:none;
  background:url(../assets/img/snow_mark40.webp) center/contain no-repeat;opacity:.8;filter:drop-shadow(0 0 3px rgba(255,200,80,.85))}
.reel::before{display:none}
/* host mood flourishes */
#host[data-mood=sad] .bubble{background:linear-gradient(#e9eef8,#b9c6dc);color:#223}
#host[data-mood=celebrate] .bubble,#host[data-mood=jump] .bubble{background:linear-gradient(#fff3a8,#ffbe3d);color:#4a1a00}
#host[data-mood=dog] canvas.sprite{animation:dogwalk 4s ease-in-out both}
@keyframes dogwalk{0%{transform:translateX(-22%)}50%{transform:translateX(18%)}100%{transform:translateX(-22%)}}
#host[data-mood=jump] canvas.sprite{animation:hopy .5s ease-in-out infinite alternate}
@keyframes hopy{to{transform:translateY(-6%)}}
/* v7.2 host chibi canvas (js/host72.js): sits on the sprite's box, bottom-centred; base sprite hidden while it shows */
canvas.h72{position:absolute;left:50%;bottom:0;transform:translateX(-50%);pointer-events:none;display:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.h72on>canvas.h72{display:block}.h72on>canvas#hostcv{visibility:hidden}
.ghost,.ahost{position:relative}