:root{
  /* ---- Blush & gold wedding palette ---- */
  --cream:#fbf4ea;        /* ivory page background */
  --cream-warm:#f8ead4;   /* warmer champagne stop */
  --blush:#f0c6cf;        /* soft pink */
  --blush-soft:#f7dde2;   /* lighter blush */
  --rose:#d98aa0;         /* primary accent */
  --rose-deep:#b5687f;    /* deeper rose for shadows / borders */
  --gold:#c8a04a;         /* champagne gold accent */
  --gold-soft:#d9b25e;    /* lighter gold */
  --gold-deep:#9c7426;    /* gold shadow */
  --ink:#4a3a40;          /* warm plum-brown text */
  --ink-soft:#7a6670;     /* muted text */

  /* ---- Type ---- */
  --font-head:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script:"Great Vibes", "Snell Roundhand", "Segoe Script", cursive;
  --font-body:"Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%; overflow:hidden;
  background:#2b2531; /* warm dark behind the game / any letterbox edges */
}

body{
  font-family:var(--font-body);
  color:#fff;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}

#game-canvas{
  position:absolute; top:0; left:0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  z-index:0;
}

/* ---------- Sound toggle ---------- */
#btn-mute{
  position:fixed; z-index:20;
  top:max(10px, env(safe-area-inset-top));
  right:max(10px, env(safe-area-inset-right));
  width:42px; height:42px; border-radius:50%;
  cursor:pointer; font-size:19px; line-height:1;
  border:1px solid rgba(200,160,74,.45); color:var(--ink);
  background:rgba(255,250,244,.82);
  box-shadow:0 4px 14px rgba(120,80,60,.16);
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
#btn-mute:active{ transform:scale(.92); }

/* ---------- Skip (in-game) ---------- */
/* Styled to MATCH the collectables HUD pill so the in-game top bar reads as one
   consistent set: frosted cream pill + gold hairline + blur. Rose serif text
   marks it as the tappable action (rather than the bold start-screen button). */
#btn-skip{
  position:fixed; z-index:20; display:none;
  top:max(10px, env(safe-area-inset-top));
  left:max(10px, env(safe-area-inset-left));
  -webkit-appearance:none; appearance:none; cursor:pointer;
  padding:7px 16px; border-radius:999px;
  border:1px solid rgba(200,160,74,.30);
  background:rgba(255,250,244,.82); color:var(--rose-deep);
  box-shadow:0 4px 14px rgba(120,80,60,.18);
  align-items:center; justify-content:center; line-height:1;
  font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:.4px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
#btn-skip.show{ display:inline-flex; }
#btn-skip:active{ transform:scale(.96); background:rgba(255,247,238,.95); }

/* ---------- Overlays ---------- */
.overlay{
  position:fixed; inset:0; z-index:10;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  padding-top:max(24px, env(safe-area-inset-top));
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}
.overlay.show{ display:flex; }
.overlay.passive{ pointer-events:none; }

#overlay-loading{
  background:linear-gradient(160deg, #fffaf2 0%, #f8ead4 52%, #f0c6cf 100%);
  color:var(--ink);
}
#overlay-select{
  background:radial-gradient(130% 95% at 50% -15%,
    #fffaf2 0%, #f8ead4 26%, #f4d3dc 60%, #e9b9c7 100%);
  color:var(--ink);
}

/* Start/invite screens can be taller than the viewport on small phones -> scroll. */
#overlay-select.show{ display:block; overflow-y:auto; }
#overlay-select .panel{ margin:0 auto; }

.panel{ width:100%; max-width:560px; text-align:center; }

/* "or" divider + prominent skip route on the start screen */
.or-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  max-width:300px; margin:26px auto 14px;
  color:var(--gold-deep); opacity:.7; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:2px;
}
.or-divider::before, .or-divider::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.5;
}
.btn-skip-start{ font-size:21px; padding:13px 30px; }
.title{
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(32px, 8vw, 60px); letter-spacing:.5px; color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
#overlay-loading .title{ color:var(--rose-deep); }
.subtitle{
  font-family:var(--font-body); font-size:clamp(14px, 3.6vw, 17px);
  color:var(--ink-soft); margin-top:10px;
}

/* ---------- Character cards ---------- */
.cards{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.char-card{
  cursor:pointer;
  border:1.5px solid rgba(200,160,74,.35);   /* gold hairline, like the invitation cards */
  background:rgba(255,251,245,.92);
  border-radius:18px; padding:14px 14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:124px;
  box-shadow:0 10px 24px rgba(120,80,60,.14), inset 0 0 0 1px rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.char-card:hover{ transform:translateY(-4px); border-color:var(--rose); box-shadow:0 16px 30px rgba(120,80,60,.18), inset 0 0 0 1px rgba(255,255,255,.5); }
.char-card:active{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(120,80,60,.14), inset 0 0 0 1px rgba(255,255,255,.5); }
.char-card canvas{
  image-rendering:pixelated; width:84px; height:84px;
  background:linear-gradient(180deg,#fffaf2,#f7dde2);
  border-radius:12px;
}
.char-name{ font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:17px; letter-spacing:.3px; }

/* ---------- Win / wedding ---------- */
#overlay-win{ align-items:flex-end; justify-content:center; }
.win-card{
  pointer-events:auto;
  margin-bottom:max(40px, env(safe-area-inset-bottom));
  background:rgba(255,250,243,.97); color:var(--ink);
  border:1px solid rgba(200,160,74,.35);
  border-radius:20px; padding:22px 30px; text-align:center;
  box-shadow:0 14px 36px rgba(120,80,60,.34);
  animation:pop .3s ease;
}
.win-card h2{ font-family:var(--font-head); font-weight:600; font-size:30px; color:var(--rose-deep); }
.win-card p{ margin:6px 0 16px; color:var(--ink-soft); }
@keyframes pop{ from{ transform:scale(.85); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* Buttons borrow the invitation's stationery language: flat fills, a fine gold
   or rose hairline, an inner hairline "engraved" frame, soft low shadows
   (NO chunky 3D offset, NO glossy gradients), serif type. */
.btn{
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  font-family:var(--font-head); font-weight:600; font-size:19px; letter-spacing:.4px;
  padding:13px 28px; border-radius:999px;
  border:1.5px solid var(--rose); color:var(--rose-deep);
  background:rgba(255,252,247,.88);
  box-shadow:0 6px 16px rgba(120,80,60,.10), inset 0 0 0 1px rgba(255,255,255,.55);
  transition:background .15s ease, box-shadow .15s ease, transform .08s ease;
}
.btn:hover{ background:#fff; }
.btn:active{ transform:translateY(1px); box-shadow:0 3px 9px rgba(120,80,60,.12), inset 0 0 0 1px rgba(255,255,255,.55); }
.win-collect{ font-family:var(--font-body); font-weight:700; color:var(--gold-deep); margin:0 0 14px; }
.card-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* ghost = the same flat outline (kept as an explicit alias for clarity) */
.btn-ghost{ border-color:var(--rose); color:var(--rose-deep); background:rgba(255,252,247,.82); }
/* Champagne-gold primary -- the celebratory "open the invitation" moment. */
.btn-gold{
  color:#fff; border:1.5px solid var(--gold-deep);
  background:var(--gold);
  box-shadow:0 7px 18px rgba(156,116,38,.22), inset 0 0 0 1px rgba(255,255,255,.32);
}
.btn-gold:hover{ background:var(--gold-soft); }
.btn-gold:active{ transform:translateY(1px); box-shadow:0 3px 10px rgba(156,116,38,.2), inset 0 0 0 1px rgba(255,255,255,.32); }

/* ---------- Invitation (phase 2) -- full-height parts you scroll through ---------- */
#overlay-invite{
  background:radial-gradient(135% 80% at 50% 0%,
    #fffaf2 0%, #f8ebd6 26%, #f5d6de 60%, #edc0cd 100%);
  color:var(--ink);
  padding:0; /* each section handles its own padding + safe-areas */
}
#overlay-invite.show{
  display:block; overflow-y:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:y proximity; scroll-behavior:smooth;
}

/* Slim, on-palette scrollbar for the scrollable overlays (rose->gold thumb on a
   faint champagne track). Firefox uses the two-value scrollbar-color; WebKit/
   Blink uses the pseudo-elements. Mobile hides scrollbars, so this is desktop. */
#overlay-invite, #overlay-select{
  scrollbar-width:thin;
  scrollbar-color:var(--rose) rgba(200,160,74,.14);
}
#overlay-invite::-webkit-scrollbar, #overlay-select::-webkit-scrollbar{ width:11px; }
#overlay-invite::-webkit-scrollbar-track, #overlay-select::-webkit-scrollbar-track{
  background:rgba(200,160,74,.10); border-radius:999px;
}
#overlay-invite::-webkit-scrollbar-thumb, #overlay-select::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--rose), var(--gold));
  background-clip:padding-box;            /* the transparent border becomes padding -> slimmer thumb */
  border:3px solid transparent; border-radius:999px;
}
#overlay-invite::-webkit-scrollbar-thumb:hover, #overlay-select::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, var(--rose-deep), var(--gold-deep));
  background-clip:padding-box;
}
.invite-section{
  position:relative; min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px;
  padding:max(44px, env(safe-area-inset-top)) 26px max(44px, env(safe-area-inset-bottom));
  scroll-snap-align:start;
}

/* little gold ornament that opens sections 2+ */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:min(220px,62%); color:var(--gold); margin-bottom:2px;
}
.ornament::before, .ornament::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.55; }
.ornament span{ font-size:9px; line-height:1; opacity:.85; }

.sec-eyebrow{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:3px;
  font-size:11px; font-weight:700; color:var(--gold-deep); opacity:.85;
}
.sec-title{ font-family:var(--font-head); font-weight:600; font-size:clamp(26px,7vw,40px); color:var(--ink); }

/* --- intro --- */
/* personalised greeting -- only rendered when a ?g=<name> link is used */
.invite-greeting{
  font-family:var(--font-head); font-weight:500; font-size:clamp(20px,5.5vw,28px);
  color:var(--rose-deep); line-height:1.2; margin-bottom:10px;
}
.invite-greeting:empty{ display:none; }
.invite-kicker{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:3px;
  font-size:11px; font-weight:700; color:var(--gold-deep); opacity:.85;
}
.invite-title{ font-family:var(--font-head); font-weight:600; font-size:clamp(36px,10vw,58px); color:var(--ink); margin:4px 0 0; }
.invite-names{
  font-family:var(--font-script); font-weight:400; line-height:1.15;
  font-size:clamp(34px,12vw,58px); color:var(--rose-deep); margin:2px 0 8px; padding-bottom:4px;
}
.invite-message{
  font-family:var(--font-body); font-size:clamp(14px,4vw,17px); line-height:1.6;
  color:var(--ink); max-width:32ch; opacity:.92;
}
.scroll-cue{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  font-size:28px; color:var(--rose-deep); opacity:.65; animation:bob 1.7s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,7px) } }

/* --- date (the beautiful part) --- */
.date-hero{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.date-weekday{ font-family:var(--font-script); font-size:clamp(30px,10vw,52px); color:var(--rose-deep); line-height:1.05; }
.date-main{ display:flex; align-items:baseline; justify-content:center; gap:14px; margin:2px 0; }
.date-day{ font-family:var(--font-head); font-weight:700; font-size:clamp(78px,30vw,170px); color:var(--ink); line-height:.85; }
.date-month{ font-family:var(--font-head); font-weight:500; font-size:clamp(30px,11vw,60px); color:var(--ink); }
.date-year{
  font-family:var(--font-body); font-weight:700; letter-spacing:10px;
  font-size:clamp(16px,5vw,24px); color:var(--gold-deep); padding-left:10px;
  border-top:1px solid rgba(200,160,74,.45); padding-top:12px; margin-top:8px;
}

/* live countdown */
.countdown{ display:flex; gap:clamp(10px,4.5vw,24px); justify-content:center; margin-top:22px; }
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:48px; }
.cd-num{
  font-family:var(--font-head); font-weight:700; font-size:clamp(28px,8vw,46px);
  color:var(--rose-deep); line-height:1; font-variant-numeric:tabular-nums;
}
.cd-lbl{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:2px;
  font-size:10px; font-weight:700; color:var(--gold-deep); opacity:.8; margin-top:5px;
}
.cd-done{ font-family:var(--font-head); font-weight:600; font-size:clamp(22px,6vw,32px); color:var(--rose-deep); margin-top:20px; }

/* --- program --- */
/* tier note: a short line addressed to this invitation group (set per ?to=…) */
.tier-note{
  font-family:var(--font-body); font-style:italic; font-size:clamp(13px,3.6vw,15px);
  line-height:1.5; color:var(--ink-soft); max-width:32ch; margin:-2px auto 2px;
}
.tier-note:empty{ display:none; }

.program{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:430px; margin-top:4px; }
.program-item{
  display:flex; flex-direction:column; gap:11px; text-align:left;
  background:rgba(255,251,245,.72); border:1px solid rgba(200,160,74,.30);
  border-radius:16px; padding:14px 16px;
  box-shadow:0 8px 22px rgba(120,80,60,.12);
}
.program-top{ display:flex; align-items:center; gap:14px; }
.program-details{
  font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--ink-soft);
  border-top:1px dashed rgba(200,160,74,.4); padding-top:10px;
}
.program-icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:23px;
  background:rgba(240,198,207,.45);
}
.program-body{ flex:1; min-width:0; }
.program-name{ font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--ink); line-height:1.1; }
.program-where{ font-family:var(--font-body); font-size:13px; color:var(--ink-soft); margin-top:3px; }
.program-when{ display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto; }
.program-date{ font-family:var(--font-body); font-weight:800; font-size:14px; color:var(--rose-deep); white-space:nowrap; }
.program-time{ font-family:var(--font-body); font-size:13px; color:var(--ink-soft); }

/* --- dress code --- */
.dress-text{ font-family:var(--font-body); font-size:clamp(14px,4vw,16px); line-height:1.6; color:var(--ink); max-width:34ch; }
.dress-swatches{ display:flex; gap:12px; justify-content:center; margin:8px 0 2px; }
.swatch{ width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,.85); box-shadow:0 4px 12px rgba(120,80,60,.22); }
.dress-note{ font-family:var(--font-body); font-style:italic; font-size:13px; color:var(--ink-soft); }

/* --- stats (game tie-in) --- */
.stats-title{
  font-family:var(--font-body); font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); opacity:.8; margin-bottom:2px;
}
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; max-width:420px; }
.stat{
  background:rgba(255,255,255,.66); border:1px solid rgba(200,160,74,.18);
  border-radius:12px; padding:10px 12px;
  display:flex; flex-direction:column; gap:3px; text-align:left;
}
.stat-v{ font-family:var(--font-head); font-size:24px; font-weight:700; color:var(--rose-deep); line-height:1; }
.stat-l{ font-family:var(--font-body); font-size:12px; color:var(--ink-soft); }

/* --- closing --- */
.closing-line{
  font-family:var(--font-head); font-weight:600; font-size:clamp(21px,6vw,30px);
  line-height:1.4; color:var(--ink); max-width:22ch;
}
.sec-closing .btn{ margin-top:22px; }

/* Hidden "Curious Dev" achievement -- unlocked by inspecting the sources. */
.stat.is-dev{
  grid-column:1 / -1;
  background:linear-gradient(135deg,#fdf3d8,#f3dca0);
  border:1px solid var(--gold);
  box-shadow:0 4px 14px rgba(156,116,38,.22);
}
.stat.is-dev .stat-v{ color:var(--gold-deep); }
.stat.is-dev .stat-l{ color:#6b531a; opacity:.95; font-weight:700; }

/* ---------- Collectables HUD ---------- */
#collect-hud{
  position:fixed; z-index:6; display:none;
  top:max(10px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  gap:16px; align-items:center;
  padding:7px 18px; border-radius:999px;
  background:rgba(255,250,244,.82); color:var(--ink);
  border:1px solid rgba(200,160,74,.30);
  box-shadow:0 4px 14px rgba(120,80,60,.18);
  font-family:var(--font-body); font-weight:800; font-size:16px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#collect-hud.show{ display:flex; }
#hud-dog{ transition:opacity .2s ease; }

/* ---------- Gate hint ---------- */
#gate-hint{
  position:fixed; z-index:7; display:none;
  left:50%; transform:translateX(-50%);
  top:max(50px, calc(env(safe-area-inset-top) + 46px));
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  background:rgba(217,138,160,.96); color:#fff;
  font-family:var(--font-body); font-weight:800; font-size:15px;
  box-shadow:0 6px 18px rgba(120,80,60,.32);
  animation:pop .2s ease;
}
#gate-hint.show{ display:block; }

/* ---------- Touch HUD ---------- */
#hud{ position:fixed; inset:0; z-index:5; display:none; pointer-events:none; }
body.touch #hud.show{ display:block; }

/* Delicate frosted controls: a fine white ring with a faint gold inner hairline
   (echoing the invitation), barely-there fill so the scene shows through. */
.tbtn{
  position:absolute; pointer-events:auto;
  bottom:max(26px, calc(env(safe-area-inset-bottom) + 14px));
  width:80px; height:80px; border-radius:50%;
  border:1.5px solid rgba(255,250,244,.85);
  background:rgba(255,250,244,.16);
  color:#fff; font-size:27px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 6px 18px rgba(120,80,60,.18), inset 0 0 0 1px rgba(200,160,74,.25);
  text-shadow:0 1px 3px rgba(90,50,60,.45);
  transition:transform .06s ease, background .12s ease, border-color .12s ease;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.tbtn.active{
  background:rgba(217,138,160,.55);
  border-color:rgba(255,250,244,.96);
  transform:scale(.93);
  box-shadow:0 3px 12px rgba(120,80,60,.24), inset 0 0 0 1px rgba(200,160,74,.3);
}
#btn-left{  left:max(20px, env(safe-area-inset-left)); }
#btn-right{ left:calc(max(20px, env(safe-area-inset-left)) + 94px); }
#btn-jump{
  right:max(20px, env(safe-area-inset-right));
  width:96px; height:96px; font-size:34px;
  background:rgba(200,160,74,.22);   /* faint champagne */
  border-color:rgba(255,250,244,.92);
}
#btn-jump.active{ background:rgba(200,160,74,.6); transform:scale(.93); }