/* Layout: celoplošná scéna v canvasu, text vlevo dole (na mobilu nahoře), sněhulák vpravo na závěji */
:root {
  --ice-0: #D6ECF5; --ice-1: #EEF7FB; --ice-2: #FAFDFE;
  --deep: #0F3B5C; --ink: #2B5574; --frost: #3A6F94; --warm: #C8463D; --paper: #FFFFFF;
  --display: "Unbounded", "Figtree", system-ui, sans-serif;
  --sans: "Figtree", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: linear-gradient(170deg, var(--ice-0) 0%, var(--ice-1) 55%, var(--ice-2) 100%) fixed;
  color: var(--deep); font-family: var(--sans); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }

/* Textová vrstva je jen na koukání, kliky jdou do canvasu pod ní */
.ui {
  position: fixed; inset: 0; pointer-events: none; display: grid; grid-template-rows: auto 1fr;
  padding-top: max(28px, env(safe-area-inset-top, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: 92px;
}
.stats { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 12px var(--mono); letter-spacing: .06em; color: var(--frost); font-variant-numeric: tabular-nums; }
.stats .warm { color: var(--warm); }
.hero { align-self: end; display: grid; gap: 14px; max-width: 34rem; padding-left: clamp(0px, 3vw, 40px); }
h1 { font: 300 clamp(56px, 12vw, 136px)/.9 var(--display); margin: 0; letter-spacing: -.03em; color: var(--deep); }
h1 b { font-weight: 600; }
h1 span { display: inline-block; transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), filter .4s; }
/* Tání: písmena se pomalu roztečou dolů, každé jinak (--sag nastavuje JS) */
body.melting h1 span { transform: translateY(var(--sag, 20px)) scale(1.06, .8); filter: blur(.6px); transition-duration: 2.8s; transition-timing-function: cubic-bezier(.55, 0, .9, .45); }
body.crack h1 { animation: crack .45s; }
@keyframes crack { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink); max-width: 26rem; text-wrap: pretty; }

/* Bublina, ve které mluví sněhulák */
.bubble {
  position: fixed; pointer-events: none; background: var(--paper); color: var(--deep);
  font: 500 15px var(--sans); padding: 8px 12px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(15, 59, 92, .14); transform-origin: 0 100%;
  animation: pop .25s cubic-bezier(.3, 1.6, .5, 1);
}
.bubble::after { content: ""; position: absolute; left: 14px; bottom: -6px; width: 12px; height: 12px; background: var(--paper); transform: rotate(45deg); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

@media (max-width: 759px) {
  .ui { padding-bottom: 0; }
  .hero { align-self: start; margin-top: 4vh; padding-left: 0; }
  .lede { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { h1 span, .bubble, body.crack h1 { transition: none; animation: none; } }