:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #092d45; overflow: hidden; }
body { font-family: "Trebuchet MS", Arial, sans-serif; user-select: none; -webkit-user-select: none; }
button { font: inherit; }
.page-shell { min-height: 100svh; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #31789b, #08283f 70%); }
.game { position: relative; width: min(100vw, calc(100svh * 4 / 9)); height: min(100svh, calc(100vw * 9 / 4)); overflow: hidden; touch-action: none; isolation: isolate; container-type: inline-size; background: #71c6e6; }
.flow-screen { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); overflow: hidden; background: linear-gradient(#0b537855,#082f5270), url("assets/glacier-seamless-1200x2700.webp") center/cover no-repeat; }
.flow-card { width: min(92%, 470px); max-height: 96%; overflow: hidden; padding: clamp(15px, 4.2cqw, 23px); border: clamp(3px,.9cqw,5px) solid #1498d5; border-radius: clamp(24px,7cqw,38px); background: rgba(245,251,255,.96); color: #173d53; text-align: center; box-shadow: 0 clamp(7px,1.8cqw,10px) 0 #075b8e, 0 18px 44px #06273d66; }
.flow-eyebrow { margin: 0; color: #0a659d; font-size: clamp(11px,2.9cqw,14px); font-weight: 900; letter-spacing: .09em; }
.flow-card h1 { margin: clamp(4px,1.2cqw,7px) 0; color: #e84434; font-size: clamp(33px,9cqw,47px); line-height: 1; letter-spacing: -.035em; text-shadow: 0 2px 0 #fff; }
.flow-start-art { display: block; width: min(82%, 350px); max-height: 20svh; object-fit: contain; margin: 3px auto 2px; }
.flow-intro { max-width: 34ch; margin: 0 auto 4px; font-size: clamp(13px,3.4cqw,16px); font-weight: 700; line-height: 1.25; }
.flow-character { position: relative; width: min(31%,130px); aspect-ratio: 1/.95; margin: 1px auto 2px; }
.flow-snowman { position: absolute; z-index: 2; width: 72%; left: 14%; bottom: 0; }
.flow-twig { position: absolute; z-index: 1; width: 50%; bottom: 22%; }
.flow-twig-left { left: -8%; }
.flow-twig-right { right: -8%; }
.flow-form { display: grid; gap: clamp(5px,1.35cqw,8px); text-align: left; }
.flow-form label span { display: block; margin: 0 0 3px; font-size: clamp(12px,3.2cqw,15px); font-weight: 900; }
.flow-form input, .flow-form select { width: 100%; height: clamp(38px,10cqw,46px); padding: 0 13px; border: 2px solid #1498d5; border-radius: 14px; background: #fff; color: #173d53; font: 700 clamp(14px,3.5cqw,16px) inherit; outline: none; }
.flow-form input:focus, .flow-form select:focus { box-shadow: 0 0 0 3px #57c9f455; }
.form-error { margin: 0; color: #c82f25; font-size: 12px; font-weight: 900; text-align: center; }
.flow-button { display: grid; width: 100%; min-height: clamp(37px,9.5cqw,44px); padding: 0 18px; place-items: center; border: 0; border-radius: 999px; color: #fff; text-decoration: none; font: 900 clamp(14px,3.7cqw,17px)/1.1 inherit; cursor: pointer; }
.flow-primary { margin-top: 2px; background: #e84434; box-shadow: 0 4px 0 #a62620; }
.flow-secondary { margin-top: 8px; background: #159bd5; box-shadow: 0 4px 0 #096090; }
.flow-home { margin-top: 8px; background: #92501f; box-shadow: 0 4px 0 #5e3016; }
.flow-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #173d53; }
.flow-note { margin: clamp(9px,2.4cqw,13px) 0 0; color: #466779; font-size: clamp(10px,2.6cqw,12px); line-height: 1.25; }
.end-card h2 { margin: 4px auto; color: #0a78b2; font-size: clamp(20px,5.7cqw,28px); line-height: 1.08; }
.end-art { position: relative; width: min(56%,230px); aspect-ratio: 1.15; margin: 5px auto; }
.end-snowman { position: absolute; width: 58%; left: 5%; bottom: 0; }
.end-gift { position: absolute; width: 43%; right: 0; bottom: 2%; transform: rotate(5deg); }
.end-screen-art { display: block; width: min(48%, 205px); max-height: 34svh; object-fit: contain; margin: 5px auto; }
.end-card { position: relative; }
.glide-end-photo-face { position: absolute; z-index: 3; overflow: hidden; transform: translate(-50%,-50%); border-radius: 48%; background: #fff7d0; pointer-events: none; }
.glide-end-photo-face img { position: absolute; left: 50%; top: 50%; width: 125%; height: 125%; object-fit: cover; transform: translate(-50%,-50%); }
.end-message { max-width: 35ch; margin: 7px auto; font-size: clamp(14px,3.7cqw,18px); font-weight: 800; line-height: 1.28; }
.end-from { margin: 5px auto 11px; color: #81441f; font-size: clamp(12px,3.2cqw,15px); font-weight: 900; }
.glacier-track { position: absolute; z-index: -4; left: 0; top: -100%; width: 100%; height: 200%; animation: glacierScroll 12s linear infinite; }
.glacier-track img { display: block; width: 100%; height: 50%; object-fit: fill; }
.is-paused .glacier-track, .is-falling .glacier-track, .is-flow .glacier-track { animation-play-state: paused; }
@keyframes glacierScroll { from { transform: translateY(0); } to { transform: translateY(50%); } }
.bank { position: absolute; top: 0; height: 103%; width: 63%; z-index: -2; pointer-events: none; }
.bank-left { left: -32%; }
.bank-right { right: -32%; transform: scaleX(-1); }
.hud-top { position: absolute; z-index: 20; top: 2.2%; left: 3.5%; right: 3.5%; display: grid; grid-template-columns: 13% 1fr 13%; align-items: center; gap: 2.2%; }
.hud-button { padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 3px 3px #17384b66); }
.hud-button img { width: 100%; display: block; }
.counter { position: relative; display: grid; place-items: center; }
.counter img { width: 100%; display: block; }
.counter span { position: absolute; color: #fff5de; font-weight: 900; font-size: clamp(10px, 2.7vw, 19px); letter-spacing: .04em; text-shadow: 0 2px 0 #3e1e0d, 0 0 4px #1b0d08; }
.gift-counter { position: absolute; inset: 16% 9% 17%; display: flex; align-items: center; justify-content: center; gap: 3.5%; }
.gift-counter span { position: relative; width: 14%; height: 100%; overflow: visible; filter: none; }
.gift-counter span.has-gift { animation: counterGiftIn .28s ease-out; }
.gift-counter span img { position: absolute; top: 50%; left: 50%; width: auto; height: 82%; max-width: 92%; object-fit: contain; transform: translate(-50%, -50%); filter: none; }
@keyframes counterGiftIn { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.16); } 100% { transform: scale(1); opacity: 1; } }
.obstacle { position: absolute; z-index: 4; transform-origin: center bottom; will-change: left, top, transform; }
.obstacle-art { display: block; width: 100%; height: auto; }
.object-ice { width: 26%; }
.object-hole { width: 28%; }
.object-gift { width: 19%; }
.object-seal { width: 22%; }
.object-fish { width: 22%; }
.object-boot { width: 18%; }
.object-bear { width: 20%; }
.object-acorn { width: 15%; }
.is-collected .obstacle-art { animation: giftVanish .28s ease-out forwards; }
@keyframes giftVanish { 0% { opacity: 1; transform: scale(1); } 45% { transform: scale(1.18); } 100% { opacity: 0; transform: scale(.25); } }
.object-wrong.is-collected .obstacle-art { animation: wrongBounce .42s ease-out forwards; }
@keyframes wrongBounce { 0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); } 35% { transform: translate(18%,-16%) rotate(16deg) scale(1.08); } 100% { opacity: 0; transform: translate(70%,-34%) rotate(55deg) scale(.72); } }
.collect-particles { position: absolute; inset: 28% 15% 18%; pointer-events: none; }
.collect-particles i { position: absolute; left: 50%; top: 50%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: #fff7a6; box-shadow: 0 0 8px #fff, 0 0 14px #ffd437; animation: particlePop .55s ease-out forwards; }
.collect-particles i:nth-child(1) { --px: -70%; --py: -95%; }
.collect-particles i:nth-child(2) { --px: -20%; --py: -125%; }
.collect-particles i:nth-child(3) { --px: 48%; --py: -105%; }
.collect-particles i:nth-child(4) { --px: 90%; --py: -35%; }
.collect-particles i:nth-child(5) { --px: 72%; --py: 55%; }
.collect-particles i:nth-child(6) { --px: 5%; --py: 90%; }
.collect-particles i:nth-child(7) { --px: -72%; --py: 58%; }
.collect-particles i:nth-child(8) { --px: -95%; --py: -25%; }
@keyframes particlePop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.7); } }
.player { position: absolute; z-index: 8; bottom: 13%; width: 42%; transform: translateX(-50%); transition: left .28s cubic-bezier(.2,.9,.2,1); }
.lost-gift { position: absolute; z-index: 12; width: 18%; left: 43%; bottom: 31%; pointer-events: none; animation: lostGiftToss .66s cubic-bezier(.2,.75,.35,1) forwards; }
@keyframes lostGiftToss {
  0% { opacity: 0; transform: translate(0,0) scale(.35) rotate(0); }
  14% { opacity: 1; }
  58% { opacity: 1; transform: translate(75%,-125%) scale(.8) rotate(28deg); }
  100% { opacity: 0; transform: translate(135%,-75%) scale(.55) rotate(65deg); }
}
.player-shadow { position: absolute; width: 58%; left: 21%; bottom: -1%; opacity: .56; filter: blur(1.6px); transform: scaleX(1.12) scaleY(.72); transform-origin: center; transition: transform .2s, opacity .2s; }
.snowman-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1.18; transform-origin: 50% 88%; animation: idleBalance 1.8s ease-in-out infinite; }
.snowman { position: absolute; width: 54%; left: 23%; bottom: 0; z-index: 3; }
.player-face-window { position: absolute; z-index: 2; left: 35%; top: 43.3%; width: 29.1%; height: 20%; overflow: hidden; border-radius: 48% 48% 50% 50%; pointer-events: none; background: #d9efff; }
.player-face-window img { position: absolute; max-width: none; object-fit: cover; transform: translate(-50%, -50%); transform-origin: center; }
.twig { position: absolute; width: 39%; bottom: 27%; z-index: 2; }
.twig-left { left: 2%; transform-origin: 88% 66%; }
.twig-right { right: 2%; transform-origin: 12% 66%; }
.jumping .snowman-wrap { animation: jump 1.05s cubic-bezier(.36,.05,.62,.98); }
.jumping .twig-left { animation: twigLeftJump 1.05s ease-in-out; }
.jumping .twig-right { animation: twigRightJump 1.05s ease-in-out; }
.jumping .player-shadow { transform: scaleX(.64) scaleY(.48); opacity: .22; }
@keyframes twigLeftJump { 0%,100% { transform: rotate(0); } 14% { transform: rotate(-34deg); } 28% { transform: rotate(9deg); } 43% { transform: rotate(-42deg); } 58% { transform: rotate(7deg); } 73% { transform: rotate(-36deg); } 88% { transform: rotate(4deg); } }
@keyframes twigRightJump { 0%,100% { transform: rotate(0); } 14% { transform: rotate(34deg); } 28% { transform: rotate(-9deg); } 43% { transform: rotate(42deg); } 58% { transform: rotate(-7deg); } 73% { transform: rotate(36deg); } 88% { transform: rotate(-4deg); } }
@keyframes jump {
  0% { transform: translateY(0) scaleY(1); }
  48% { transform: translateY(-68%) rotate(-2deg) scaleY(1.02); }
  90% { transform: translateY(1%) rotate(1deg) scaleY(.92); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes idleBalance {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-2.5%) rotate(1deg); }
}
.player:not(.jumping):not(.wobble) .player-shadow { animation: idleShadow 1.8s ease-in-out infinite; }
@keyframes idleShadow { 0%, 100% { transform: scaleX(1.12) scaleY(.72); opacity: .56; } 50% { transform: scaleX(1.03) scaleY(.66); opacity: .43; } }
.wobble .snowman-wrap { animation: wobble .42s ease; }
@keyframes wobble { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-10deg) translateX(-5%); } 45% { transform: rotate(9deg) translateX(4%); } 70% { transform: rotate(-5deg); } }
.cheering .snowman-wrap { animation: cheer .56s ease-out; filter: drop-shadow(0 0 10px #fff4a8); }
@keyframes cheer { 0%,100% { transform: scale(1); } 35% { transform: translateY(-5%) scale(1.08) rotate(-2deg); } 65% { transform: translateY(-2%) scale(1.04) rotate(2deg); } }
.falling .snowman-wrap { transform-origin: 50% 87%; animation: fallInHole 2.4s ease-in-out forwards; }
.falling .player-shadow { animation: shadowInHole 2.4s ease-in-out forwards; }
@keyframes fallInHole {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  9% { transform: scale(1.03) rotate(-4deg); }
  17% { transform: scale(.98) rotate(4deg); }
  31% { opacity: 1; transform: scale(.08) rotate(0); }
  35%, 72% { opacity: 0; transform: scale(0) rotate(0); }
  73% { opacity: 0; transform: scale(.02) rotate(0); }
  88% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes shadowInHole { 0% { opacity: .56; } 30%, 72% { opacity: 0; transform: scale(.2); } 100% { opacity: .56; } }
.hud-bottom { position: absolute; z-index: 20; left: 16%; right: 16%; bottom: 2.2%; display: grid; place-items: center; pointer-events: none; }
.hud-bottom img { width: 100%; display: block; }
.hud-bottom p { position: absolute; width: 82%; margin: 0; color: #fff5de; font-weight: 700; font-size: clamp(8px, 2.25cqw, 14px); line-height: 1.18; text-align: center; text-shadow: 0 2px 0 #3e1e0d; white-space: normal; }
.hud-bottom strong { color: #ffdc73; }
.paused-label { position: absolute; z-index: 25; inset: 0; display: grid; place-items: center; background: #08293f55; color: white; font-size: clamp(24px, 8vw, 48px); font-weight: 900; letter-spacing: .1em; text-shadow: 0 4px 0 #16374c; pointer-events: none; }
.is-paused .snowman-wrap, .is-paused .player-shadow { animation-play-state: paused !important; }
@media (min-aspect-ratio: 4/9) { .counter span { font-size: min(1.65svh, 19px); } .hud-bottom p { font-size: min(1.25svh, 14px); } }
@media (max-height: 650px) { .flow-card { max-height: 98%; padding: 12px 16px; } .flow-character { max-height: 14svh; } .flow-note { margin-top: 6px; } }
/* v49 paid end-photo reliability: keep the uploaded face visibly above the illustrated end art. */
.glide-end-photo-face { z-index: 30 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.glide-end-photo-face img { max-width: none !important; object-fit: cover !important; }