@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Serif+SC:wght@500;700;900&display=swap');

:root {
  --ink: #3f2940;
  --cream: #fff3d0;
  --paper: #f5d996;
  --paper-dark: #d6a35e;
  --pink: #e96f8d;
  --purple: #392451;
  --purple-2: #241934;
  --green: #4f8d48;
  --deep-green: #245141;
  --gold: #f4c34f;
  --pixel-border: 4px solid #6f4028;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #13131d;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 20%, #273759 0 1px, transparent 2px) 0 0 / 24px 24px,
    #13131d;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible,
a:focus-visible {
  outline: 3px solid #fff6b0;
  outline-offset: 4px;
}
img { display: block; max-width: 100%; }

.h5-shell {
  width: min(100%, 480px);
  margin-inline: auto;
  overflow: hidden;
  background: #7fbd69;
  box-shadow: 0 0 70px #000b;
}

.panel {
  position: relative;
  min-height: 100svh;
  padding: 72px 26px;
  overflow: hidden;
  isolation: isolate;
}

.panel::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 9px;
  z-index: 20;
  background: repeating-linear-gradient(90deg, #563926 0 9px, #bd8b50 9px 18px);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.delay-1 { transition-delay: .16s; }
.reveal.is-visible { opacity: 1; transform: none; }

.section-heading {
  position: relative;
  z-index: 4;
  margin: 0 auto 30px;
  text-align: center;
}

.section-heading p,
.eyebrow {
  margin: 0 0 7px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 11px;
  letter-spacing: .24em;
}

.section-heading h2 {
  margin: 0;
  color: #78462f;
  font-size: 30px;
  letter-spacing: .12em;
  text-shadow: 2px 2px #f6d979;
}

.section-heading h2::after {
  content: '◆  ❀  ◆';
  display: block;
  margin-top: 12px;
  color: var(--pink);
  font-size: 11px;
  letter-spacing: .55em;
  text-shadow: none;
}

.section-heading.light { color: #fff7df; }
.section-heading.light h2 { color: #fff7df; text-shadow: 3px 3px #6e3c79; }
.tiny-leaf { font-size: 22px; }

/* Opening */
.hero {
  min-height: 100svh;
  padding: max(76px, 11svh) 24px 24px;
  color: white;
  background:
    linear-gradient(45deg, #ffffff09 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(-45deg, #ffffff08 25%, transparent 25%) 0 0 / 12px 12px,
    radial-gradient(circle at 13% 20%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 73% 11%, #fff6ba 0 1px, transparent 2px),
    linear-gradient(#111d6c 0%, #14559a 42%, #278bc0 68%, #67b8d0 100%);
  background-size: 12px 12px, 12px 12px, 37px 41px, 57px 61px, auto;
}

.hero::before {
  content: '';
  position: absolute;
  right: 33px;
  top: 42px;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff1b8;
  box-shadow: 0 0 28px #fff5b878;
  opacity: .88;
}

.hero-copy { position: relative; z-index: 5; text-align: center; transform: translateY(clamp(0px, 2svh, 18px)); }
.hero-copy .eyebrow { color: #f8e4ad; }

.hero .game-title {
  position: relative;
  margin: 18px auto 11px;
  display: grid;
  justify-items: center;
  color: #e6a520;
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: clamp(48px, 14.4vw, 67px);
  font-weight: 900;
  letter-spacing: .015em;
  line-height: .84;
  -webkit-text-stroke: 2px #754414;
  text-shadow:
    0 3px 0 #ffc83f,
    0 7px 0 #6f4316,
    3px 8px 0 #1b4270;
  transform: scaleX(.9);
}

.hero .game-title span { display: block; white-space: nowrap; }
.hero-cn { margin: 20px 0 0; color: #fff6d2; font-size: 15px; font-weight: 900; letter-spacing: .2em; text-shadow: 2px 3px #274276; }
.hero-cn i { color: #ffc34f; font-style: normal; }
.hero-date { margin-top: 12px; font: 700 14px Georgia, serif; letter-spacing: .27em; text-shadow: 2px 2px #264675; }

.pixel-world { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.cloud { display: none; }
.cloud-a { top: 29%; left: 8%; animation: drift 7s ease-in-out infinite alternate; }
.cloud-b { top: 37%; right: 16%; transform: scale(.7); animation: drift 9s ease-in-out infinite alternate-reverse; }
.flower { position: absolute; z-index: 2; color: #ffd364; animation: sparkle 1.8s infinite alternate; }
.flower-1 { bottom: 19%; left: 8%; }.flower-2 { bottom: 8%; right: 12%; color: #ff9ab0; }.flower-3 { bottom: 15%; right: 36%; color: white; }

.hero-mountains {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(680px, 76svh);
  background: url('/assets/hero-mountains.webp') center bottom / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: saturate(1.08) contrast(1.03);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
}

.hero-mountains::before {
  display: none;
}

.wedding-arch { position: absolute; z-index: 3; width: 226px; height: 191px; left: 50%; bottom: 80px; transform: translateX(-50%); }
.wedding-arch .arch-top { position: absolute; left: 23px; top: 6px; width: 180px; height: 110px; border: 9px solid #f4c5da; border-bottom: 0; border-radius: 90px 90px 0 0; box-shadow: inset 0 0 0 4px #fff8e3, 0 0 0 3px #7a4d58; }
.wedding-arch .arch-top span { position: relative; top: -15px; margin: 0 2px; color: #fff5d7; text-shadow: 2px 2px #db6685; }
.arch-leg { position: absolute; top: 80px; width: 13px; height: 102px; background: #f4c5da; border: 3px solid #7a4d58; }
.arch-leg.left { left: 23px; }.arch-leg.right { right: 23px; }
.couple { position: absolute; display: flex; align-items: flex-end; gap: 7px; left: 50%; bottom: 10px; transform: translateX(-50%); }
.pixel-person { position: relative; width: 34px; height: 68px; }
.pixel-person b { position: absolute; left: 7px; top: 0; width: 23px; height: 25px; background: #e7b18c; border: 3px solid #593e3e; box-shadow: -4px 4px #633a2b; }
.pixel-person i { position: absolute; left: 3px; bottom: 0; width: 31px; height: 42px; background: #473b5f; border: 3px solid #2d2740; clip-path: polygon(14% 0,86% 0,100% 100%,0 100%); }
.pixel-person.bride b { box-shadow: 4px 4px #6b362c; }
.pixel-person.bride i { background: #fff6ed; border-color: #e0bdc7; width: 38px; left: -2px; }
.heart { align-self: center; color: #ff6686; font-size: 16px; animation: heartbeat 1.1s infinite; }

.scroll-hint { position: absolute; z-index: 10; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; min-width: 164px; padding: 9px 16px 7px; border: 3px solid #ffe39c; outline: 2px solid #55354c; outline-offset: -7px; color: #fff6d5; background: linear-gradient(#34456bcc, #1d284bd9); box-shadow: 0 0 0 3px #1a223d, 5px 6px 0 #10182fbd; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-shadow: 2px 2px #3f2946; transition: transform .18s ease, filter .18s ease; }
.scroll-hint:hover { filter: brightness(1.13); }
.scroll-hint:active { transform: translate(calc(-50% + 3px), 3px); box-shadow: 0 0 0 3px #1a223d, 2px 3px 0 #10182fbd; }
.scroll-hint b { color: #ffd96c; font: 900 22px/.7 sans-serif; text-shadow: 2px 2px #70414a; animation: bob 1.3s infinite; }

/* Shared meadow texture */
.meadow {
  background-color: #87bd63;
  background-image:
    linear-gradient(90deg, transparent 49%, #76ac5830 50%),
    linear-gradient(transparent 49%, #a8d67833 50%),
    radial-gradient(circle, #d3eb8f 1px, transparent 2px);
  background-size: 18px 18px, 18px 18px, 31px 31px;
}

/* Notice */
.wood-board { position: relative; z-index: 2; padding: 27px 19px 17px; border: 9px solid #7a492c; outline: 4px solid #bd7c42; background: #edbd72; box-shadow: 0 8px 0 #4d392c55, inset 0 0 0 3px #f7dda3; }
.wood-board::before, .wood-board::after { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 2px dashed #b27846; }
.wood-board::after { inset: auto -5px -7px; height: 11px; border: 0; background: #895534; }
.board-ribbon { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); padding: 6px 17px; color: #fff; background: #c84f69; border: 3px solid #7a3549; box-shadow: 3px 3px 0 #692a3e; font: 12px Georgia, serif; letter-spacing: .12em; white-space: nowrap; }
.event-list { position: relative; z-index: 1; margin: 0; }
.event-list div { display: grid; grid-template-columns: 74px 1fr; gap: 9px; padding: 11px 0; border-bottom: 2px dashed #bd854f; }
.event-list div:last-child { border-bottom: 0; }
.event-list dt { font-weight: 900; font-size: 12px; }.event-list dd { margin: 0; font-size: 12px; line-height: 1.7; }
.ring-icon { position: absolute; right: -15px; bottom: -20px; width: 48px; image-rendering: pixelated; filter: drop-shadow(3px 4px #75492b); }

.calendar-card { margin-top: 27px; border: var(--pixel-border); background: #fff0c8; box-shadow: 7px 7px 0 #4d6f3b; }
.season-line { padding: 9px; color: #fff; background: #c96758; text-align: center; font-size: 12px; letter-spacing: .12em; }
.calendar-main { display: flex; align-items: center; justify-content: center; gap: 17px; padding: 16px; }
.calendar-main strong { color: #bb4e54; font: 900 56px Georgia, serif; line-height: 1; text-shadow: 3px 3px #e6b477; }
.calendar-main span { color: #7e624c; font: 700 12px Georgia, serif; writing-mode: vertical-rl; letter-spacing: .15em; }
.countdown { display: flex; align-items: baseline; justify-content: center; gap: 7px; padding: 10px; background: #f1d48d; border-top: 3px solid #ba8550; font-size: 12px; }
.countdown strong { color: #b84453; font: 900 25px Georgia, serif; }

/* Quest */
.quest { background: radial-gradient(circle at 20% 30%, #664a79 0 1px, transparent 2px) 0 0 / 24px 24px, linear-gradient(#291b3b, #492a5f 58%, #372341); }
.quest::before { content: ''; position: absolute; inset: 0; opacity: .13; background: repeating-linear-gradient(90deg, transparent 0 21px, #fff 22px 23px), repeating-linear-gradient(0deg, transparent 0 21px, #fff 22px 23px); }
.quest-card { position: relative; padding: 38px 21px 21px; color: #faefd5; border: 6px solid #a06f51; outline: 5px solid #4a263f; background: #352247; box-shadow: 10px 12px 0 #1c1328; }
.quest-card::before { content: ''; position: absolute; inset: 8px; border: 2px solid #7d5878; pointer-events: none; }
.quest-pin { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 49px; height: 49px; display: grid; place-items: center; border-radius: 50%; color: white; background: #cf4f63; border: 5px solid #ffbd72; box-shadow: 3px 5px #20162b; font: 900 25px sans-serif; }
.quest-intro { position: relative; margin: 0 0 20px; font-size: 12px; line-height: 1.9; }
.quest-objectives { position: relative; display: grid; gap: 14px; padding: 18px 0; margin: 0; list-style: none; border-block: 2px dashed #76516f; }
.quest-objectives li { display: grid; grid-template-columns: 23px 44px 1fr; align-items: start; font-size: 11px; line-height: 1.6; }
.quest-objectives b { color: #ffd44f; font-size: 19px; text-shadow: 2px 2px #a06223; }.quest-objectives span { color: #ffc988; font-weight: 900; }.quest-objectives em { font-style: normal; color: #f8ead3; }
.quest-reward { position: relative; margin-top: 17px; padding: 10px; color: #ffeda8; border: 2px solid #7c5577; background: #2a1c38; text-align: center; font-size: 11px; }.quest-reward span { color: #ffb66b; font-weight: 900; }
.junimo-row { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 4px; margin-top: 45px; }
.junimo-row img { width: 100%; image-rendering: pixelated; animation: bounce 1.7s ease-in-out infinite alternate; }
.junimo-row img:nth-child(2) { filter: hue-rotate(45deg); animation-delay: -.2s; }.junimo-row img:nth-child(3) { filter: hue-rotate(100deg); animation-delay: -.4s; }.junimo-row img:nth-child(4) { filter: hue-rotate(170deg); animation-delay: -.6s; }.junimo-row img:nth-child(5) { filter: hue-rotate(240deg); animation-delay: -.8s; }.junimo-row img:nth-child(6) { filter: hue-rotate(300deg); animation-delay: -1s; }

/* Ceremony */
.ceremony-scene { position: relative; height: 390px; border: 7px solid #70462f; outline: 4px solid #bc864b; overflow: hidden; background: linear-gradient(#65a357 0 44%, #b79061 45% 100%); box-shadow: 8px 9px 0 #4f703b; }
.ceremony-scene::before { content: ''; position: absolute; inset: 44% 0 0; opacity: .35; background: repeating-linear-gradient(90deg, transparent 0 31px, #6c4c33 32px 34px), repeating-linear-gradient(0deg, transparent 0 31px, #6c4c33 32px 34px); }
.scene-house { position: absolute; top: 13px; left: 50%; width: 132px; height: 96px; transform: translateX(-50%); background: #a45e42; border: 5px solid #633627; }
.scene-house::before { content: ''; position: absolute; left: -16px; top: -16px; width: 154px; height: 27px; background: #6f3d35; border: 4px solid #4e2d28; transform: skewX(-21deg); }
.scene-house span { position: absolute; left: 50%; bottom: 0; width: 28px; height: 51px; transform: translateX(-50%); background: #71442f; border: 3px solid #4a2b28; }.scene-house i { position: absolute; left: 15px; top: 34px; width: 26px; height: 25px; background: #9ce0e2; border: 4px solid #553733; box-shadow: 70px 0 #9ce0e2, 70px 0 0 4px #553733; }
.scene-tree { position: absolute; top: 20px; width: 80px; height: 95px; border-radius: 50% 50% 36% 44%; background: #275f3d; border: 5px solid #17462f; box-shadow: 13px 7px #3f8a4c, -12px 11px #4b914d; }.scene-tree::after { content: ''; position: absolute; left: 34px; top: 72px; width: 14px; height: 65px; background: #73452f; border: 3px solid #4c3028; }.tree-left { left: -18px; }.tree-right { right: -19px; }
.aisle { position: absolute; left: 50%; bottom: 0; width: 105px; height: 225px; transform: translateX(-50%); background: #b96f68; clip-path: polygon(29% 0,71% 0,100% 100%,0 100%); border-top: 4px solid #774445; }
.scene-arch { bottom: 141px; transform: translateX(-50%) scale(.66); transform-origin: bottom center; }
.guest-lines { position: absolute; inset: auto 19px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 110px; }
.guest-lines div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 2px; }.guest-lines i { position: relative; height: 25px; width: 20px; background: #844a76; border: 3px solid #493143; box-shadow: inset 0 8px #dba678; }.guest-lines i:nth-child(2n) { background: #4d6da1; }.guest-lines i:nth-child(3n) { background: #b95f56; }.guest-lines i:nth-child(4n) { background: #598046; }
.ceremony-scene.authentic-scene {
  height: auto;
  aspect-ratio: 673 / 655;
  background: #b78e5e;
}
.ceremony-scene.authentic-scene::before { display: none; }
.authentic-scene > img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pixel-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pixel-petals i { position: absolute; top: -8%; width: 6px; height: 6px; background: #ffb6c8; box-shadow: 7px 5px #fff0da; animation: petalFall 6s linear infinite; }
.pixel-petals i:nth-child(1) { left: 8%; animation-delay: -1s; }.pixel-petals i:nth-child(2) { left: 25%; animation-delay: -4s; }.pixel-petals i:nth-child(3) { left: 43%; animation-delay: -2.5s; }.pixel-petals i:nth-child(4) { left: 62%; animation-delay: -.5s; }.pixel-petals i:nth-child(5) { left: 78%; animation-delay: -3.4s; }.pixel-petals i:nth-child(6) { left: 91%; animation-delay: -5.3s; }
.dialogue-box { display: grid; grid-template-columns: 65px 1fr; margin-top: 24px; border: var(--pixel-border); background: #ffedbf; box-shadow: 7px 7px 0 #4e713e; }
.dialogue-box img { width: 65px; height: 65px; object-fit: cover; image-rendering: pixelated; border-right: 4px solid #6f4028; }.dialogue-box div { padding: 9px 11px; }.dialogue-box b { color: #a64d52; font-size: 12px; }.dialogue-box p { margin: 4px 0 0; font-size: 11px; line-height: 1.7; }
.timeline { margin-top: 30px; display: grid; gap: 13px; }.timeline div { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 3px solid #74472e; background: #f5dba0; box-shadow: 5px 5px #527740; }.timeline b { color: #b65357; }.timeline span { font-size: 11px; }

/* Map */
.map-section { background: linear-gradient(#23576d, #3e7c72 38%, #5d855f); }
.map-frame { position: relative; border: 8px solid #6e442e; outline: 5px solid #b57c47; background: #dba868; box-shadow: 9px 10px 0 #1b3c45; }
.map-frame img { width: 100%; aspect-ratio: 1.08; object-fit: cover; image-rendering: auto; filter: saturate(.82) sepia(.08); }
.map-pin { position: absolute; left: 55%; top: 43%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: white; background: #d94c63; border: 3px solid white; box-shadow: 3px 4px #5b3040; font-family: sans-serif; animation: mapPulse 1.6s infinite; }.map-pin > svg { display: block; width: 22px; height: 22px; transform: rotate(45deg); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.map-pin small { position: absolute; left: 23px; top: 32px; width: 95px; padding: 5px; transform: rotate(45deg); color: #502f36; background: #fff0bc; border: 2px solid #70432d; font: 700 9px serif; }
.location-card { margin-top: 27px; padding: 19px; border: var(--pixel-border); background: #f3d28a; box-shadow: 8px 9px 0 #1c4143; text-align: center; }.location-card h3 { margin: 0 0 8px; color: #8f4247; font-size: 17px; }.location-card > p { margin: 0; font-size: 11px; line-height: 1.7; }
.transport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 18px 0; }.transport-grid div { display: grid; align-content: start; justify-items: center; min-height: 126px; padding: 9px 6px; border: 3px solid #8a5938; background: #fff0c2; }.transport-grid img { width: 72px; height: 49px; object-fit: contain; image-rendering: pixelated; }.transport-grid b { margin-top: 5px; font-size: 11px; }.transport-grid span { font-size: 11px; }
.pixel-button { display: inline-block; min-width: 168px; padding: 11px 16px; color: #fff9d7; background: #b94c5d; border: 3px solid #6f2e43; box-shadow: inset 0 0 0 2px #e87b7e, 4px 5px 0 #543347; text-decoration: none; text-align: center; font-weight: 900; font-size: 12px; letter-spacing: .08em; }
.pixel-button:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px #e87b7e, 1px 2px 0 #543347; }

/* Guests */
.portrait-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; border: 5px solid #78472f; background: #edbd72; box-shadow: 8px 9px 0 #4e703c; }
.portrait-grid figure { margin: 0; border: 3px solid #71432f; background: #fff1c1; overflow: hidden; text-align: center; }
.portrait-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; image-rendering: pixelated; }
.portrait-grid figcaption { padding: 4px 2px; color: #71402f; font: 700 8px Georgia, serif; background: #e8c884; }
.portrait-grid .you { display: grid; grid-template-rows: 1fr auto; min-height: 107px; background: #463754; }.portrait-grid .you > span { align-self: center; color: #ffd677; font: 900 37px Georgia, serif; }
.harvest { display: flex; justify-content: center; align-items: flex-end; margin-top: 42px; }.harvest img { width: 66px; margin: 0 -7px; image-rendering: pixelated; filter: drop-shadow(4px 5px #47703e); animation: bounce 2s ease-in-out infinite alternate; }.harvest img:nth-child(2) { animation-delay: -.4s; }.harvest img:nth-child(3) { width: 82px; z-index: 2; animation-delay: -.8s; }.harvest img:nth-child(4) { animation-delay: -1.2s; }.harvest img:nth-child(5) { animation-delay: -1.6s; }

/* Ending */
.ending { display: grid; align-content: center; justify-items: center; min-height: 100svh; color: #fff8dc; background: radial-gradient(circle at 50% 37%, #503b68, #1c1b35 52%, #11162a); text-align: center; }
.ending::before { content: ''; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle, #fff 0 1px, transparent 2px) 0 0 / 43px 47px; }
.ending-stars { position: relative; color: #f7cb64; font-size: 18px; animation: sparkle 2s infinite alternate; }
.ending-junimo { position: relative; width: 72px; margin: 25px 0 22px; image-rendering: pixelated; filter: drop-shadow(0 7px #0b1024); animation: bounce 1.4s ease-in-out infinite alternate; }
.ending-copy { position: relative; }.ending-copy p { margin: 0; color: #eac8a9; font-size: 12px; letter-spacing: .3em; }.ending-copy h2 { margin: 16px 0 22px; font-size: 30px; line-height: 1.55; text-shadow: 3px 3px #7e3d61; }.ending-copy span, .ending-copy strong { display: block; }.ending-copy span { color: #ffc2cf; font-size: 17px; letter-spacing: .18em; }.ending-copy strong { margin: 8px 0 28px; color: #ffd477; font: 700 15px Georgia, serif; letter-spacing: .3em; }
.light-button { position: relative; color: #392a45; background: #f3d277; border-color: #9a6438; box-shadow: inset 0 0 0 2px #fff0a8, 4px 5px 0 #0e1225; }
.ending footer { position: absolute; left: 20px; right: 20px; bottom: 25px; color: #a8a3b8; font-size: 10px; line-height: 1.7; }

.floating-tools { position: fixed; z-index: 99; right: max(22px, calc((100vw - 480px) / 2 + 22px)); top: 118px; display: grid; gap: 9px; }
.floating-tools button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 3px solid #fff1be; color: #fff2c7; background: #2f2948d9; box-shadow: 2px 3px 0 #121325a8; backdrop-filter: blur(5px); font: 700 17px/1 sans-serif; }
.floating-tools svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.floating-tools button.playing { animation: spin 3s linear infinite; color: #ffca68; }

@keyframes drift { to { translate: 30px 8px; } }
@keyframes sparkle { to { opacity: .35; transform: scale(.8); } }
@keyframes heartbeat { 50% { transform: scale(1.35); } }
@keyframes bob { 50% { transform: translateY(6px); } }
@keyframes bounce { to { transform: translateY(-8px); } }
@keyframes mapPulse { 50% { box-shadow: 3px 4px #5b3040, 0 0 0 9px #ffcad366; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes petalFall { to { transform: translate(36px, 520px) rotate(180deg); } }

@media (max-height: 690px) {
  .hero { padding-top: 55px; }
  .hero-copy { transform: none; }
  .scroll-hint { bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}