:root {
  --stage-width: max(100vw, calc(100vh * 16 / 9));
  --ui: min(calc(100vw / 160), calc(100vh / 90));
  --font-display: "Caveat", "Segoe Print", cursive;
  --font-body: "Patrick Hand", "Comic Neue", "Segoe Print", sans-serif;
  --ink: #6b4a2e;
  --honey: #e2a03f;
  --honey-deep: #b8741f;
  --skin: #f6d6bf;
  --hair: #1c1a1a;
  --parchment: #fdf4e1;
}

@supports (height: 100dvh) {
  :root {
    --stage-width: max(100vw, calc(100dvh * 16 / 9));
    --ui: min(calc(100vw / 160), calc(100dvh / 90));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky-bottom, #fbeed4);
}

body {
  font-family: var(--font-body);
  color: #5b3b22;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Stage and layers */

.stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--stage-width);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.world {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.definitions {
  position: absolute;
  width: 0;
  height: 0;
}

.layer {
  position: absolute;
  inset: 0;
}

.layer > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.layer--parallax,
.layer--clouds {
  will-change: transform;
}

.layer--clouds {
  width: 200%;
}

.tile,
.prop {
  position: absolute;
  top: 0;
  overflow: visible;
}

.layer > .tile {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.props {
  position: absolute;
  inset: 0;
}

.is-culled {
  display: none;
}

.paint,
.actor {
  filter: url(#watercolor);
}

.tile .paint {
  filter: url(#watercolor-world);
}

.ink {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-opacity: 0.55;
  stroke-linejoin: round;
}

.paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-color: rgba(250, 238, 214, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.34 0 0 0 0 0.2 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, transparent 55%, rgba(120, 82, 40, 0.28) 100%);
}

/* Scenery */

.sky { fill: url(#sky-gradient); }
.sky-stop-top { stop-color: var(--sky-top); }
.sky-stop-bottom { stop-color: var(--sky-bottom); }
.sun { fill: var(--sun); }
.sun-glow { fill: var(--sun); opacity: 0.28; }
.cloud > * { fill: var(--cloud); fill-opacity: 0.84; }

.hill-far { fill: var(--hill-far); fill-opacity: 0.84; }
.hill-mid { fill: var(--hill-mid); fill-opacity: 0.84; }
.tree-far { fill: var(--tree-far); fill-opacity: 0.84; }
.tree-far-trunk { fill: var(--trunk); }

.trunk { fill: var(--trunk); }
.branch { fill: none; stroke: var(--trunk); stroke-width: 9; stroke-linecap: round; }
.crown { fill-opacity: 0.84; }
.crown--1 { fill: var(--crown-1); }
.crown--2 { fill: var(--crown-2); }
.crown--3 { fill: var(--crown-3); }

.snowcap { fill: #fbfdff; opacity: 0; transition: opacity 1.2s ease; }
[data-season="winter"] .snowcap { opacity: 0.95; }

.ground { fill: var(--ground); fill-opacity: 0.9; }
.road { fill: var(--road); }
.pebble { fill: var(--trunk); opacity: 0.3; }
.grass { fill: var(--grass); }
.grass-front { fill: var(--grass-front); }

.flower { fill: var(--flower); }
.flower-center { fill: #f4c95d; }
.flower-stem { fill: none; stroke: var(--grass); stroke-width: 3; stroke-linecap: round; }
.flower-group { transition: opacity 1.2s ease; }
[data-season="winter"] .flower-group { opacity: 0; }

.mushroom-cap { fill: #c8553d; }
.mushroom-stem { fill: #f3e6cc; }
.mushroom-dot { fill: #fff6e6; }

.hive { fill: #e0a842; }
.hive-hole { fill: #5a3b1c; }
.hive-string { fill: none; stroke: var(--trunk); stroke-width: 3; }
.hive,
.hive-hole,
.hive-string { transition: opacity 1s ease; }
[data-season="winter"] .hive,
[data-season="winter"] .hive-hole,
[data-season="winter"] .hive-string { opacity: 0; }

.shadow { fill: #3b2a17; opacity: 0.16; }

/* Props */

.cottage-wall { fill: #ecd3a8; }
.cottage-roof { fill: #b8653f; }
.cottage-chimney { fill: #a5774f; }
.cottage-door { fill: #7a5235; }
.cottage-knob { fill: #f2c14e; }
.cottage-window { fill: url(#window-glow); }
.cottage-frame { fill: none; stroke: #7a5235; stroke-width: 4; }
.pumpkin { fill: #e08a3c; }
.pumpkin--small { fill: #eba24e; }
.pumpkin-stem { fill: none; stroke: #6f7d3c; stroke-width: 4; stroke-linecap: round; }
.smoke-puff { fill: #f4ede2; opacity: 0; }

.post { fill: #8a6040; }
.rope { fill: none; stroke: #c9b08a; stroke-width: 3; }
.garment-onesie { fill: #f3c7c3; }
.garment-sock { fill: #bcd6c8; }
.garment-bib { fill: #fbeed2; }
.garment-heart { fill: #e48c88; }
.garment-pin { fill: #c9955b; }

.xmas-trunk { fill: #7a5235; }
.xmas-fir { fill-opacity: 0.92; }
.xmas-fir--1 { fill: #4f7a5c; }
.xmas-fir--2 { fill: #5f8a6a; }
.xmas-fir--3 { fill: #6e9c78; }
.xmas-garland { fill: none; stroke: #f1e3c6; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.bauble--red { fill: #c9483b; }
.bauble--gold { fill: #e2a03f; }
.bauble--blue { fill: #6f8fb8; }
.xmas-light { fill: #ffe9a8; }
.xmas-star { fill: #f2c14e; stroke: #b8741f; stroke-width: 2; }

.gift { fill-opacity: 0.95; }
.gift--red { fill: #c96a5a; }
.gift--green { fill: #7fa38a; }
.gift--honey { fill: #e2a03f; }
.gift--blue { fill: #7e9cc0; }
.gift--rose { fill: #e8b4b8; }
.gift--gold { fill: #d9b45a; }
.gift-ribbon,
.gift-bow { fill: #fbf1dc; }
.gift-ribbon--red { fill: #c9483b; }
.gift-ribbon--gold { fill: #f2c14e; }

.wall--adobe { fill: #e6c99a; }
.wall--stone { fill: #d3c1a2; }
.roof { fill: #bf6a4b; }
.chimney { fill: #b59a78; }
.door { fill: #7a5235; }
.window { fill: #8fb2c4; }
.flowerpot { fill: #b8653f; }
.geranium { fill: #d9484a; }
.stone { fill: #a8957a; opacity: 0.45; }
.stone-wall { fill: #c7b494; }
.balcony { fill: #7a5235; }
.balcony-rail { fill: none; stroke: #7a5235; stroke-width: 3; }
.belfry-wall { fill: #dccaa8; }
.belfry-opening { fill: #5b4632; }
.bell-body { fill: #c08d3e; }
.bell-clapper { fill: #6b4a2e; }
.nest { fill: #8a6a45; }
.nest-twigs { fill: none; stroke: #6b4f33; stroke-width: 3; stroke-linecap: round; }

.sign-post { fill: #8a6040; }
.sign-board { fill: #c99a62; }
.sign-text { fill: #4a2e17; font-family: var(--font-body); font-size: 30px; }

.distant { opacity: 0.95; }

.picnic-cloth { fill: #f3d3cf; }
.picnic-check { fill: none; stroke: #e2a7a2; stroke-width: 5; opacity: 0.7; }
.bowl { fill: #f1e6d2; }
.bowl-stripe { fill: none; stroke: #7fa38a; stroke-width: 4; }
.puree { fill: #f4d77a; }
.banana { fill: #f2cf55; }
.banana-tip { stroke: #6b4a2e; stroke-width: 4; stroke-linecap: round; }
.spoon-handle { stroke: #c9b8a2; stroke-width: 7; stroke-linecap: round; }
.spoon-bowl { fill: #e6ddd0; }
.splat { fill: #f4d77a; stroke: #d9b04a; stroke-width: 1.5; }

.lagoon { fill: #8fbccc; fill-opacity: 0.9; }
.lagoon-glint { fill: none; stroke: #fff4dc; stroke-width: 4; stroke-linecap: round; opacity: 0.8; }
.reed { fill: none; stroke: #7d8c3c; stroke-width: 4; stroke-linecap: round; }
.boat-hull { fill: #8a5a3a; }
.boat-mast { stroke: #6b4a2e; stroke-width: 5; stroke-linecap: round; }
.boat-sail { fill: #fbf1dc; }
.boat-ripple { fill: none; stroke: #e9f3f2; stroke-width: 3; stroke-linecap: round; }
.dune { fill: #efd9a6; }
.dune-shade { fill: none; stroke: #d8bc80; stroke-width: 6; stroke-linecap: round; opacity: 0.7; }
.pine-trunk { fill: #7a5235; }
.pine-crown { fill: #5f8a52; fill-opacity: 0.92; }
.pine-crown--light { fill: none; stroke: #86ad6a; stroke-width: 8; stroke-linecap: round; }
.towel--a { fill: #f6efe1; }
.towel--b { fill: #6fa8c9; opacity: 0.85; }
.paella-handle { fill: #3e3a36; }
.paella-pan { fill: #4a4540; }
.paella-rice { fill: #e7a93c; }
.paella-pepper { fill: none; stroke: #c9483b; stroke-width: 5; stroke-linecap: round; }
.paella-pea { fill: #7fa34a; }
.paella-lemon { fill: #f6e27a; }

.palace-wall { fill: #ebe6dc; }
.palace-roof,
.palace-cone { fill: #7f8b98; }
.palace-crenel { fill: none; stroke: #ebe6dc; stroke-width: 5; stroke-linejoin: round; }
.palace-arch,
.palace-window { fill: #6f6a64; opacity: 0.75; }

.block-face { fill-opacity: 0.95; }
.block--honey { fill: #e2a03f; }
.block--sage { fill: #9cbf95; }
.block--rose { fill: #e8a6a6; }
.block--sky { fill: #a9c7de; }
.block-letter { fill: #fff8ec; font-family: var(--font-display); font-weight: 700; font-size: 44px; }
.block-heart { fill: #fff8ec; }
.backpack-body { fill: #b8753e; }
.backpack-flap { fill: #9a5f30; }
.backpack-pocket { fill: #c98a4f; }
.backpack-strap { fill: none; stroke: #7a4a25; stroke-width: 8; stroke-linecap: round; }
.backpack-patch { fill: #f2c14e; }
.backpack-patch-stripe { fill: none; stroke: #3a2a1a; stroke-width: 3; }

.duomo { fill: #efe6d8; }
.duomo-spire { fill: #e6dccb; }
.madonnina { fill: #e2b13f; }
.duomo-door,
.duomo-lancet { fill: #8b8174; opacity: 0.7; }

.balloon-string { fill: none; stroke: #8a6a45; stroke-width: 2; }
.balloon--honey { fill: #e8b04f; }
.balloon--rose { fill: #e8a2a6; }
.balloon--sky { fill: #a5c4dc; }
.stump { fill: #8a6040; }
.stump-bark { fill: none; stroke: #6b4a2e; stroke-width: 3; opacity: 0.6; }
.stump-top { fill: #d9b88a; }
.stump-ring { fill: none; stroke: #b08a5a; stroke-width: 2; }
.cake { fill: #f6e3c8; }
.icing { fill: #fbf6ee; }
.berry { fill: #c9483b; }
.berry--blue { fill: #5f6f9e; }
.candle { fill: #f3c7c3; }
.candle-stripe { fill: none; stroke: #fff; stroke-width: 2.5; }
.flame { fill: #f6a13c; }
.candle--blue { fill: #a9c7de; }
.candle-slot--second { display: none; }
.cake--double .candle-slot--first { transform: translateX(-14px); }
.cake--double .candle-slot--second { display: inline; transform: translateX(14px); }
.sling { fill: none; stroke: #f6efe1; stroke-width: 5; stroke-linecap: round; }
.sling-knot { fill: #f6efe1; stroke: #c9b8a2; stroke-width: 1.5; }
#delivery-stork { opacity: 0; visibility: hidden; }
.flame-glow { fill: #ffe08a; opacity: 0.45; }
.puff-line { fill: none; stroke: #fdf7ea; stroke-width: 5; stroke-linecap: round; opacity: 0; }
.candle-smoke-puff { fill: #ece7df; opacity: 0; }

.vesuvius { fill: #9a8f9c; }
.vesuvius-shade { fill: none; stroke: #7f7584; stroke-width: 5; stroke-linecap: round; opacity: 0.6; }
.smoke-puff--volcano { fill: #ddd6d0; }
.pizza-crust { fill: #d79a4f; }
.pizza-cheese { fill: #f6d77a; }
.pepperoni { fill: #c9483b; }
.basil { fill: #5f8a52; }
.cheese-drip { fill: none; stroke: #f6d77a; stroke-width: 6; stroke-linecap: round; }
.steam { fill: none; stroke: #fff8ec; stroke-width: 4; stroke-linecap: round; opacity: 0.8; }

.lights-wire { fill: none; stroke: #4f5a4a; stroke-width: 3; }
.string-bulb { opacity: 0; }
.string-bulb--0 { fill: #f2c14e; }
.string-bulb--1 { fill: #e48c88; }
.string-bulb--2 { fill: #9cc7a2; }
.string-bulb--3 { fill: #a9c7de; }
.string-bulb-cap { fill: #4f5a4a; }
.little-shoe { fill: #e8a6a6; }
.little-shoe-strap { fill: none; stroke: #b86f6f; stroke-width: 4; stroke-linecap: round; }
.plate { fill: #f6efe1; }
.roscon { fill: #d99a52; }
.roscon-sugar { fill: none; stroke: #fff8ec; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 6; }
.candied--red { fill: #c9483b; }
.candied--green { fill: #7fa34a; }
.candied--orange { fill: #ef9b3a; }

.party-wall { fill: #f6cfd6; }
.party-awning { fill: #8cc5bf; }
.party-awning-stripe { fill: none; stroke: #fdf4e1; stroke-width: 10; }
.party-door { fill: #e2a03f; }
.party-window { fill: url(#window-glow); }
.party-sign { fill: #fdf4e1; }
.party-sign-text { fill: #b8475c; font-family: var(--font-display); font-weight: 700; font-size: 36px; }
.lollipop-stick { fill: #f6efe1; }
.lollipop { fill: #f39ab0; }
.lollipop-swirl { fill: none; stroke: #fff8ec; stroke-width: 5; stroke-linecap: round; }
.balloon-two-shape { fill: none; stroke: #e2b13f; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.balloon-two-shine { fill: none; stroke: #fff4cf; stroke-width: 7; stroke-linecap: round; opacity: 0.8; }

.stork-body { fill: #fbfaf6; }
.stork-wing { fill: #fbfaf6; }
.stork-wingtip { fill: #2b2622; }
.stork-eye { fill: #2b2622; }
.stork-beak { fill: #d9663f; }
.stork-neck { fill: none; stroke: #fbfaf6; stroke-width: 7; stroke-linecap: round; }
.stork-leg { fill: none; stroke: #d9663f; stroke-width: 3; stroke-linecap: round; }

/* Characters */

.skin { fill: var(--skin); }
.hair { fill: var(--hair); }
.eye { fill: #2b2220; }
.cheek { fill: #f0a3a0; opacity: 0.6; }
.mouth { fill: none; stroke: #8a4b3c; stroke-width: 3; stroke-linecap: round; }

.mum-dress { fill: #a9bfa0; }
.mum-belly-shine { fill: #c8d8bc; opacity: 0.8; }
.mum-hair { fill: #4a3426; }
.mum-scarf { fill: var(--crown-1); }
.mum-foot { fill: #7a5235; }
.mum-eye { fill: none; stroke: #2b2220; stroke-width: 2.5; stroke-linecap: round; }
.mum-arm,
.mum-arm-back { fill: none; stroke: #97ad8e; stroke-width: 15; stroke-linecap: round; }
.mum-arm-back { stroke: #8ea386; }
.heart use { fill: #e48c88; }

.basket { fill: #c99a5b; }
.basket-rim { fill: #b4844a; }
.weave { fill: none; stroke: #9a6b36; stroke-width: 3; stroke-linecap: round; }
.runner { fill: none; stroke: #7a5235; stroke-width: 6; stroke-linecap: round; }
.blanket { fill: var(--blanket); }
.blanket-dot { fill: #fff8ec; opacity: 0.85; }

.beanie,
.hair-flower,
.sunhat,
.outfit-cardigan,
.outfit-coat { opacity: 0; transition: opacity 1s ease; }
[data-season="winter"] .beanie,
[data-season="spring"] .hair-flower,
[data-season="summer"] .sunhat,
[data-season="autumn"] .outfit-cardigan,
[data-season="winter"] .outfit-coat { opacity: 1; }
.hair-curls { opacity: var(--curls, 0); }

.sunhat-brim,
.sunhat-crown { fill: #efd9a0; }
.sunhat-band { fill: none; stroke: #e48c88; stroke-width: 6; }

.romper { fill: #f3c7c3; transition: fill 1s ease; }
[data-season="summer"] .romper { fill: #f6d77a; }
[data-season="autumn"] .romper { fill: #d98b6a; }
.crawl-limb { fill: none; stroke-linecap: round; }
.crawl-limb--leg { stroke: #e9b3ae; stroke-width: 22; transition: stroke 1s ease; }
[data-season="summer"] .crawl-limb--leg { stroke: #ecc562; }
[data-season="autumn"] .crawl-limb--leg { stroke: #c97a5a; }
.crawl-limb--arm { stroke: var(--skin); stroke-width: 15; }

.dress { fill: #f3c7c3; transition: fill 1s ease; }
[data-season="summer"] .dress { fill: #f6d77a; }
[data-season="autumn"] .dress { fill: #c96a5a; }
[data-season="winter"] .dress { fill: #8aa4c4; }
.dress-hem { fill: none; stroke: #fff8ec; stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; }
.cardigan { fill: #e2a03f; }
.cardigan-button { fill: #fff3d6; }
.coat { fill: #8aa4c4; }
.coat-trim { stroke: #6f89a8; stroke-width: 3; }
.coat-button { fill: #f2c14e; }
.scarf { fill: #c96a5a; }
.sleeve { fill: none; stroke: var(--skin); stroke-width: 15; stroke-linecap: round; transition: stroke 1s ease; }
[data-season="autumn"] .sleeve { stroke: #e2a03f; }
[data-season="winter"] .sleeve { stroke: #8aa4c4; }
.tights { fill: none; stroke: var(--skin); stroke-width: 17; stroke-linecap: round; transition: stroke 1s ease; }
[data-season="autumn"] .tights { stroke: #a2584a; }
[data-season="winter"] .tights { stroke: #6f7f96; }
.shoe { fill: #b8475c; }
.mouth-wow { fill: #8a4b3c; opacity: 0; }

.pelayo-cap { fill: #a9c7de; }
.pelayo-cap-pom { fill: #fff8ec; }
.pelayo-blanket { fill: #bcd6e8; }
.sleepy-eye { fill: none; stroke: #2b2220; stroke-width: 2.5; stroke-linecap: round; }
#pelayo { opacity: 0; visibility: hidden; }
.beanie-cap { fill: #c96a5a; }
.beanie-band { fill: #ead9c4; }
.beanie-pom { fill: #fff8ec; }
.hair-flower-petal { fill: #f6c1cf; }
.hair-flower-center { fill: #f4c95d; }

.bee-body { fill: #f2c14e; }
.bee-stripe { fill: none; stroke: #3a2a1a; stroke-width: 5; stroke-linecap: round; }
.bee-wing { fill: #ffffff; opacity: 0.75; }
.bee-eye,
.bee-sting { fill: #3a2a1a; }
.bee-antenna { fill: none; stroke: #3a2a1a; stroke-width: 2; stroke-linecap: round; }

.butterfly-wing { fill: var(--butterfly); }
.butterfly-wing--low { opacity: 0.85; }
.butterfly-body { stroke: #4a3324; stroke-width: 4; stroke-linecap: round; }

.bee,
.butterfly { transition: opacity 1s ease; }
[data-season="winter"] .bee,
[data-season="winter"] .butterfly,
[data-season="autumn"] .butterfly { opacity: 0; }

/* Particles and effects */

.particles { display: none; }
[data-season="autumn"] .particles--leaves,
[data-season="winter"] .particles--snow,
[data-season="spring"] .particles--petals,
[data-season="summer"] .particles--pollen { display: inline; }
.leaf--0 { fill: var(--crown-1); }
.leaf--1 { fill: var(--crown-2); }
.leaf--2 { fill: var(--crown-3); }
.snow { fill: #ffffff; opacity: 0.9; }
.petal { fill: #f6c1cf; }
.pollen { fill: #ffe39a; opacity: 0.85; }

#birth-glow,
#pelayo-glow { opacity: 0; }
.burst--0 { fill: #e2a03f; }
.burst--1 { fill: #f3c7c3; }
.burst--2 { fill: #a9bfa0; }
.burst--3 { fill: #bcd0e6; }
.burst--4 { fill: #fff3d6; }

.fx-title {
  fill: #5b3b22;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 108px;
  paint-order: stroke;
  stroke: rgba(253, 244, 225, 0.85);
  stroke-width: 14px;
  stroke-linejoin: round;
}

.fact-card {
  fill: rgba(253, 244, 225, 0.92);
  stroke: rgba(107, 74, 46, 0.45);
  stroke-width: 2;
}

.fact-text {
  fill: #5b3b22;
  font-family: var(--font-body);
  font-size: 28px;
  dominant-baseline: middle;
}

.fx-title,
.fact,
.heart,
#puree-spoon,
.splat,
#paper-plane,
#pizza-slice { opacity: 0; }

.plane-paper { fill: #fdf7ea; }
.plane-fold { fill: none; stroke: #c9b8a2; stroke-width: 2; }

.jet-body { fill: #e9ecef; stroke: #59626b; stroke-width: 2; }
.jet-wing,
.jet-tail { fill: #c9483b; stroke: #59626b; stroke-width: 1.5; }
.jet-canopy { fill: #6f8fb8; }
.jet-stripe { fill: none; stroke: #f2c14e; stroke-width: 3; }
.jet-trail { opacity: 0.88; }
.jet-trail--red { fill: #d0453a; }
.jet-trail--yellow { fill: #f4c43c; }

.grape-body { fill: #9bbd5c; fill-opacity: 0.92; stroke: #6f8a3c; stroke-width: 1.5; stroke-opacity: 0.6; }
.grape--light .grape-body { fill: #b7cf72; }
.grape-shine { fill: #fff; opacity: 0.55; }
.grape-stem { fill: none; stroke: #7a5235; stroke-width: 5; stroke-linecap: round; }
.grape-leaf { fill: #7fa34a; }

.sol-clock-art,
.grape-bunch-art { visibility: hidden; }
.clock-facade { fill: #c9714f; }
.clock-window { fill: #f3e1bf; opacity: 0.85; }
.clock-tower,
.clock-housing { fill: #efe3cf; }
.clock-cornice { fill: #d9c7a8; }
.clock-dome { fill: #7f8b98; }
.clock-pole { fill: #7f8b98; }
.clock-balcony { fill: #4a4540; }
.clock-door { fill: #7a5235; }
.clock-face { fill: #fffaf0; }
.clock-tick { stroke: #4a3a2c; stroke-width: 2.5; stroke-linecap: round; }
.clock-hand { stroke: #2b2220; stroke-linecap: round; }
.clock-hand--hour { stroke-width: 5; }
.clock-hand--minute { stroke-width: 3.5; }
.clock-pin { fill: #2b2220; }
.clock-ball { fill: #e2b13f; }
.clock-chime { fill: none; stroke: #ffe39a; stroke-width: 4; opacity: 0; }

.dove-body,
.dove-wing { fill: #fbfaf6; stroke: #b9b2a6; stroke-width: 1.5; }
.dove-wing--back { fill: #ece8e0; }
.dove-tail { fill: #ece8e0; }
.dove-eye { fill: #2b2622; }
.dove-beak { fill: #e8a36c; }
.dove { opacity: 0; }

.shell { fill: #f6efe1; }
.shell-ribs { fill: none; stroke: #d9c7a8; stroke-width: 2; }
.water-drop { fill: #7ebfe0; stroke: #4a8fb5; stroke-width: 1.5; }
#christening-shell { opacity: 0; visibility: hidden; }

.outfit-christening { opacity: 0; }
.christening-gown { fill: #fbf8f2; }
.christening-lace { fill: none; stroke: #e6ddd0; stroke-width: 4; stroke-linecap: round; }
.christening-sash { fill: #cfe0ee; }
.christening-bow-loop { fill: #fbf8f2; }
.christening-bow-knot { fill: #cfe0ee; }

.hair-ringlets { opacity: var(--curls, 0); }
.firework-ray { fill: none; stroke-width: 4; stroke-linecap: round; }
.firework-ray--0 { stroke: #f2c14e; }
.firework-ray--1 { stroke: #e48c88; }
.firework-ray--2 { stroke: #bcd0e6; }

.king-silhouette { opacity: 0.8; }
.king-silhouette--1 { fill: #7d6a8e; }
.king-silhouette--2 { fill: #6b7f96; }
.king-silhouette--3 { fill: #94706a; }
.king-crown { fill: #e8b84e; }
.reyes-star-core { fill: #ffe39a; stroke: #e2a03f; stroke-width: 2; }
.reyes-star-trail { fill: none; stroke: #ffe9b8; stroke-width: 5; stroke-linecap: round; opacity: 0.7; }

/* Interface */

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.date-banner {
  position: absolute;
  top: calc(var(--ui) * 2.4);
  left: 50%;
  isolation: isolate;
  min-width: calc(var(--ui) * 42);
  max-width: calc(var(--ui) * 78);
  padding: calc(var(--ui) * 1.2) calc(var(--ui) * 8) calc(var(--ui) * 1.5);
  text-align: center;
  color: #5b3b22;
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(var(--ui) * 0.5) calc(var(--ui) * 0.8) rgba(110, 70, 30, 0.28));
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.date-banner::before,
.date-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}

.date-banner::before {
  inset: 0;
  background: rgba(107, 74, 46, 0.55);
}

.date-banner::after {
  inset: 2px 3px;
  background:
    radial-gradient(ellipse at 22% 30%, rgba(255, 255, 255, 0.7), transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(226, 160, 63, 0.25), transparent 55%),
    linear-gradient(180deg, #fff7e6, #f7e2b8);
}

.date-banner-date {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--ui) * 5.4);
  line-height: 1;
}

.date-banner-caption {
  margin: calc(var(--ui) * 0.4) 0 0;
  font-size: calc(var(--ui) * 3.5);
  line-height: 1.1;
  color: #8a5326;
}

.date-banner-caption:empty {
  display: none;
}

.card {
  position: fixed;
  left: 50%;
  top: calc(var(--ui) * 7);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ui) * 1.4);
  padding: calc(var(--ui) * 3) calc(var(--ui) * 9);
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(253, 244, 225, 0.94) 40%, rgba(253, 244, 225, 0) 72%);
}

.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--ui) * 10);
  font-weight: 700;
  line-height: 0.95;
  color: #5b3b22;
}

.card-subtitle {
  margin: 0 0 calc(var(--ui) * 1.2);
  font-size: calc(var(--ui) * 3.2);
  color: #8a5326;
}

.button {
  --wash: #e6a948;
  --wash-light: #fbe2a6;
  --tilt: -1deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ui) * 1);
  padding: calc(var(--ui) * 1.3) calc(var(--ui) * 3.4);
  font-family: var(--font-body);
  font-size: calc(var(--ui) * 3);
  line-height: 1.1;
  color: #4a2e17;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(255, 255, 255, 0.55), transparent 50%),
    radial-gradient(ellipse at 80% 85%, rgba(120, 70, 20, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 50%, var(--wash-light), var(--wash) 78%);
  border: 2px solid rgba(110, 66, 28, 0.6);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: 2px 3px 0 rgba(110, 70, 30, 0.25);
  transform: rotate(var(--tilt));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button::after {
  content: "";
  position: absolute;
  inset: calc(var(--ui) * 0.6);
  border: 1.5px dashed rgba(90, 55, 25, 0.4);
  border-radius: inherit;
  pointer-events: none;
}

.button:hover {
  transform: rotate(0deg) scale(1.04);
}

.button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 1px 1px 0 rgba(110, 70, 30, 0.25);
}

.button--honey { --wash: #e6a948; --wash-light: #fbe2a6; --tilt: -1deg; }
.button--sage { --wash: #9fc08f; --wash-light: #e3eed5; --tilt: 1deg; }
.button--rose { --wash: #e6a3a3; --wash-light: #f9ddd6; --tilt: -0.6deg; }
.button--paper { --wash: #eedfc0; --wash-light: #fffaf0; --tilt: 0.8deg; }

.button--large {
  padding: calc(var(--ui) * 1.6) calc(var(--ui) * 5);
  font-size: calc(var(--ui) * 4);
}

.button-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button:focus-visible,
.hud-button:focus-visible {
  outline: 3px solid #5b3b22;
  outline-offset: 4px;
}

#invitation-button {
  display: none;
  font-size: calc(var(--ui) * 2.6);
}

@media (prefers-reduced-motion: reduce) {
  #invitation-button {
    display: inline-flex;
  }
}

.hud-button {
  position: absolute;
  pointer-events: auto;
  font-family: var(--font-body);
  color: #4a2e17;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.6), transparent 50%),
    radial-gradient(ellipse at 50% 50%, #fffaf0, #eedfc0 80%);
  border: 2px solid rgba(110, 66, 28, 0.55);
  box-shadow: 2px 2px 0 rgba(110, 70, 30, 0.22);
  cursor: pointer;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hud-button--sound {
  top: calc(var(--ui) * 3);
  right: calc(var(--ui) * 4);
  width: calc(var(--ui) * 7);
  height: calc(var(--ui) * 7);
  padding: calc(var(--ui) * 1.3);
  border-radius: 52% 48% 55% 45% / 48% 55% 45% 52%;
}

.hud-button--sound svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sound-speaker { fill: #6b4a2e; }
.sound-waves,
.sound-mute { fill: none; stroke: #6b4a2e; stroke-width: 2.6; stroke-linecap: round; }
.sound-mute,
.hud-button--sound[aria-pressed="true"] .sound-waves { display: none; }
.hud-button--sound[aria-pressed="true"] .sound-mute { display: inline; }

.hud-button--skip {
  right: calc(var(--ui) * 4);
  bottom: calc(var(--ui) * 3);
  padding: calc(var(--ui) * 1) calc(var(--ui) * 2.8);
  font-size: calc(var(--ui) * 2.6);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  transform: rotate(1deg);
}

[data-state="intro"] .hud-button,
[data-state="intro"] .date-banner,
[data-state="finale"] .hud-button--skip,
[data-state="finale"] .date-banner,
[data-state="finale"] .bee,
[data-state="finale"] .butterfly,
[data-audio="missing"] .hud-button--sound {
  opacity: 0;
  visibility: hidden;
}

/* Finale invitation */

.finale {
  position: fixed;
  top: calc(var(--ui) * 4);
  right: calc(var(--ui) * 4);
  width: calc(var(--ui) * 58);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ui) * 2.6);
}

.speech-bubble,
.wooden-sign,
.finale-actions > * {
  visibility: hidden;
}

.speech-bubble {
  position: relative;
  padding: calc(var(--ui) * 2.4) calc(var(--ui) * 3.6);
  background:
    radial-gradient(ellipse at 25% 25%, rgba(255, 255, 255, 0.8), transparent 50%),
    var(--parchment);
  border: 2px solid rgba(107, 74, 46, 0.6);
  border-radius: 48% 52% 46% 54% / 56% 50% 50% 44%;
  box-shadow: 2px 4px 0 rgba(110, 70, 30, 0.2);
  text-align: center;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: calc(var(--ui) * -3.4);
  bottom: calc(var(--ui) * 1.2);
  width: calc(var(--ui) * 6);
  height: calc(var(--ui) * 4);
  background: var(--parchment);
  border-left: 2px solid rgba(107, 74, 46, 0.6);
  border-bottom: 2px solid rgba(107, 74, 46, 0.6);
  clip-path: polygon(0 100%, 100% 0, 100% 70%);
  transform: rotate(4deg);
}

.speech-bubble p {
  margin: 0;
  font-size: calc(var(--ui) * 3.5);
  line-height: 1.2;
}

.wooden-sign {
  position: relative;
  padding: calc(var(--ui) * 1.8) calc(var(--ui) * 4.6);
  color: #fdf1d8;
  text-align: center;
  background:
    repeating-linear-gradient(176deg, rgba(90, 55, 25, 0) 0 calc(var(--ui) * 1.6), rgba(90, 55, 25, 0.18) calc(var(--ui) * 1.6) calc(var(--ui) * 1.9)),
    linear-gradient(180deg, #b47c45, #93602f);
  border: 3px solid #6b4423;
  border-radius: calc(var(--ui) * 1.4) calc(var(--ui) * 2) calc(var(--ui) * 1.2) calc(var(--ui) * 1.8);
  box-shadow: 0 8px 18px rgba(80, 50, 20, 0.35), inset 0 0 calc(var(--ui) * 2) rgba(60, 35, 10, 0.35);
  text-shadow: 0 2px 0 rgba(60, 35, 10, 0.45);
}

.wooden-sign::before,
.wooden-sign::after {
  content: "";
  position: absolute;
  top: calc(var(--ui) * 1.2);
  width: calc(var(--ui) * 1.2);
  height: calc(var(--ui) * 1.2);
  border-radius: 50%;
  background: #5a3a1c;
}

.wooden-sign::before { left: calc(var(--ui) * 1.4); }
.wooden-sign::after { right: calc(var(--ui) * 1.4); }

.wooden-sign p {
  margin: 0;
}

.wooden-sign-question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--ui) * 5.6);
  line-height: 1;
}

.wooden-sign-date {
  margin-top: calc(var(--ui) * 0.6);
  font-size: calc(var(--ui) * 3.4);
}

.finale-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--ui) * 1.8);
  width: 100%;
}

.finale-actions .button {
  min-height: calc(var(--ui) * 9.5);
  padding: calc(var(--ui) * 1) calc(var(--ui) * 1.6);
  font-size: calc(var(--ui) * 2.9);
}

/* Rotate device overlay */

.rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px;
  text-align: center;
  font-size: 22px;
  line-height: 1.4;
  color: #5b3b22;
  background:
    radial-gradient(ellipse at center, rgba(253, 244, 225, 0) 50%, rgba(120, 82, 40, 0.25) 100%),
    #f8ecd4;
}

.rotate-overlay p {
  max-width: 22ch;
  margin: 0;
}

.rotate-phone {
  width: 64px;
  height: 108px;
  border: 5px solid #6b4a2e;
  border-radius: 14px;
  position: relative;
  animation: rotate-phone 2.4s ease-in-out infinite;
}

.rotate-phone::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: #6b4a2e;
  transform: translateX(-50%);
}

@keyframes rotate-phone {
  0%, 20% { transform: rotate(0deg); }
  50%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

@media (orientation: portrait) and (pointer: coarse) {
  .rotate-overlay {
    display: flex;
  }
}