/* ============================================================
   EXCALIDRAW HANDWRITING FONT (local file)
   ============================================================ */
@font-face {
  font-family: 'Excalifont';
  src: url('Excalifont-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ============================================================
   COLOUR PALETTE — change these to retheme the whole site
   ============================================================ */
:root {
  /* Paper / desk background */
  --page-bg-1:  #fdeee1;       /* warm blush at top */
  --page-bg-2:  #f5dec5;       /* warm cream at bottom */

  /* Letter "paper" — three subtle variants for variety */
  --paper-a:    #fffaef;       /* off-white */
  --paper-b:    #fef3df;       /* cream */
  --paper-c:    #fdecd6;       /* warm beige */

  /* Ink + accents */
  --ink:        #3a2516;
  --ink-soft:   #6a4528;
  --pink-100:   #ffd6e7;
  --pink-200:   #ffabd1;
  --pink-300:   #ff7eb6;
  --pink-500:   #ff3d8a;
  --pink-700:   #c9286b;

  /* Shadows — soft, organic, paper-on-desk feel */
  --shadow-paper: 0 1px 2px rgba(80,50,30,0.10),
                  0 14px 28px rgba(80,50,30,0.14),
                  0 4px 10px rgba(80,50,30,0.08);
}

/* ============================================================
   GLOBAL
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Excalifont', 'Comic Sans MS', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(180deg, var(--page-bg-1) 0%, var(--page-bg-2) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle paper-grain over the whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,200,170,0.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,170,200,0.15) 0%, transparent 40%);
}

/* ============================================================
   FLOATING DECOR LAYERS (hearts, butterflies, sparkles)
   ============================================================ */
#hearts-container,
#butterflies-layer,
#sparkles-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.heart {
  position: absolute;
  top: -40px;
  color: var(--pink-500);
  user-select: none;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes fall {
  0%   { transform: translateY(-10vh) rotate(var(--start-rot)); }
  100% { transform: translateY(110vh) rotate(var(--end-rot)); }
}

.butterfly {
  position: absolute;
  top: 50vh;
  user-select: none;
  will-change: transform, left;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes butterfly-l2r {
  0%   { left: -10vw; transform: translateY(0)    rotate(-12deg); }
  25%  {              transform: translateY(-28px) rotate(14deg); }
  50%  {              transform: translateY(22px)  rotate(-12deg); }
  75%  {              transform: translateY(-22px) rotate(10deg); }
  100% { left: 110vw; transform: translateY(0)    rotate(-12deg); }
}
@keyframes butterfly-r2l {
  0%   { left: 110vw; transform: translateY(0)    rotate(12deg)  scaleX(-1); }
  50%  {              transform: translateY(-24px) rotate(-14deg) scaleX(-1); }
  100% { left: -10vw; transform: translateY(0)    rotate(12deg)  scaleX(-1); }
}

.sparkle {
  position: absolute;
  user-select: none;
  will-change: transform, opacity;
  animation: sparkle-pop 2.2s ease-out forwards;
}
@keyframes sparkle-pop {
  0%   { transform: scale(0)   rotate(0deg);   opacity: 0; }
  35%  { transform: scale(1.2) rotate(140deg); opacity: 1; }
  100% { transform: scale(0)   rotate(360deg); opacity: 0; }
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.page {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

.hero {
  text-align: center;
  padding: 36px 0 14px;
}

.title {
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  color: var(--pink-700);
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transform: rotate(-2deg);
  text-shadow: 2px 3px 0 rgba(201, 40, 107, 0.12);
}

.subtitle {
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin: 0;
  transform: rotate(1deg);
}

/* ============================================================
   LETTERS — each section is a piece of paper, tilted, with a
   bit of washi-tape at the top. NO blocky borders, NO hard
   rectangles — just soft paper on the desk.
   ============================================================ */
.letter {
  position: relative;
  margin: 50px auto;
  padding: 32px 28px;
  max-width: 100%;
  background: var(--paper-a);
  color: var(--ink);
  border: none;
  border-radius: 6px;
  box-shadow: var(--shadow-paper);
}

.letter--a { background: var(--paper-a); transform: rotate(-1.6deg); }
.letter--b { background: var(--paper-b); transform: rotate(1.4deg); }
.letter--c { background: var(--paper-c); transform: rotate(-0.9deg); }

/* Washi-tape strip at the top of each letter */
.letter::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 84px;
  height: 24px;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(80,50,30,0.12);
}
.letter--a::before { background: rgba(255, 170, 200, 0.65); transform: translateX(-50%) rotate(-3deg); }
.letter--b::before { background: rgba(255, 215, 140, 0.65); transform: translateX(-50%) rotate(4deg); }
.letter--c::before { background: rgba(190, 220, 255, 0.65); transform: translateX(-50%) rotate(-5deg); }

.letter h2 {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--pink-700);
  margin: 4px 0 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.letter p {
  font-size: 1.1rem;
  margin: 0 0 12px;
}

.letter .small {
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ============================================================
   PHOTO GALLERY — scattered polaroids on the letter
   ============================================================ */
.photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 16px;
  padding: 12px 4px;
}

.photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper-a);
  padding: 8px 8px 24px;
  border-radius: 4px;
  box-shadow: var(--shadow-paper);
  transition: transform 0.25s ease;
}

.photos img:nth-child(1) { transform: rotate(-4deg); }
.photos img:nth-child(2) { transform: rotate(3deg); }
.photos img:nth-child(3) { transform: rotate(2deg); }
.photos img:nth-child(4) { transform: rotate(-2.5deg); }

.photos img:hover {
  transform: scale(1.06) rotate(0deg);
  z-index: 4;
}

/* ============================================================
   VIDEO
   ============================================================ */
.video-section video,
.letter video {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-paper);
  background: #000;
  display: block;
}

/* ============================================================
   UTHAK BETHAK CHARACTER
   ============================================================ */
.uthak-bethak {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px auto 4px;
}

.uthak-svg {
  width: 150px;
  height: 200px;
  display: block;
  overflow: visible;
}

.uthak-svg .uthak-body {
  transform-origin: 60px 160px;
  animation: uthak-bethak 1.4s ease-in-out infinite;
}
@keyframes uthak-bethak {
  0%, 100% { transform: translateY(0)    scaleY(1)    scaleX(1); }
  50%      { transform: translateY(14px) scaleY(0.82) scaleX(1.06); }
}

.uthak-svg .uthak-shadow {
  transform-origin: 60px 160px;
  animation: uthak-shadow 1.4s ease-in-out infinite;
}
@keyframes uthak-shadow {
  0%, 100% { transform: scaleX(1);    opacity: 0.35; }
  50%      { transform: scaleX(1.25); opacity: 0.5; }
}

.uthak-svg .uthak-sweat {
  opacity: 0;
  animation: uthak-sweat 1.4s ease-in-out infinite;
}
.uthak-svg .uthak-sweat-1 { animation-delay: 0s; }
.uthak-svg .uthak-sweat-2 { animation-delay: 0.15s; }
@keyframes uthak-sweat {
  0%, 35%, 70%, 100% { opacity: 0; transform: translateY(0); }
  50%                { opacity: 1; transform: translateY(-4px); }
}

.uthak-label {
  font-size: 1rem;
  color: var(--pink-700);
  margin: 8px 0 0;
  font-style: italic;
  font-weight: 700;
}

.uthak-gif {
  width: 180px;
  max-width: 80%;
  border-radius: 18px;
  box-shadow: var(--shadow-paper);
  margin: 14px auto 0;
  display: block;
}

/* ============================================================
   THE BIG QUESTION
   ============================================================ */
.big-question {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  text-align: center;
  margin: 12px 0 14px;
  color: var(--pink-700);
  font-weight: 700;
}

.pick-when {
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 4px 0 14px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.buttons button {
  font-family: inherit;
  font-size: 1.05rem;
  padding: 10px 20px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-a);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 3px 3px 0 var(--ink);
}

.buttons button:hover {
  transform: translate(-1px, -2px);
  box-shadow: 4px 5px 0 var(--ink);
}
.buttons button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* Disabled "no" — visibly there but cannot be pressed */
.buttons button:disabled,
.buttons button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
  pointer-events: none;
}

.btn-yes   { background: var(--pink-300); }
.btn-maybe { background: var(--paper-b);  }
.btn-no    { background: var(--paper-c);  }

.buttons-time  { margin-bottom: 6px; }
.buttons-soft  { margin-bottom: 18px; opacity: 0.95; }

#note {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 2.5px solid var(--ink);
  font-family: inherit;
  font-size: 1.05rem;
  resize: vertical;
  background: var(--paper-a);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
#note:focus {
  outline: none;
  border-color: var(--pink-500);
}

.response-msg {
  text-align: center;
  font-size: 1.15rem;
  color: var(--pink-700);
  margin: 16px 0 0;
  min-height: 1.4em;
  font-weight: 700;
}

/* ============================================================
   CANDLELIGHT DINNER
   ============================================================ */
.candlelight {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 200, 130, 0.4) 0%, transparent 55%),
    var(--paper-b);
}

.candlelight p {
  font-size: 1.1rem;
}

.candle-desc {
  color: var(--pink-700);
}

.btn-candle {
  background: linear-gradient(180deg, #ffd591 0%, var(--pink-300) 100%) !important;
  font-size: 1.1rem !important;
  padding: 12px 24px !important;
}

/* ============================================================
   HINTS / SMALL TEXT
   ============================================================ */
.hint {
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.hint code {
  background: var(--paper-c);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
}

.hint-section {
  text-align: center;
  margin-top: 36px;
  color: var(--ink-soft);
  font-size: 1rem;
  transform: rotate(-1deg);
}

kbd {
  background: var(--paper-a);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ============================================================
   FLAPPY BIRD — FULL-SCREEN overlay
   ============================================================ */
.flappy-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  overflow: hidden;
}

.flappy-overlay.hidden { display: none; }

#flappy-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

.flappy-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 1002;
}
.flappy-close:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.flappy-hint {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin: 0;
  z-index: 1001;
  pointer-events: none;
}

/* Cute-message popup — sits inside the flappy overlay, pauses the game */
.flappy-cute-popup {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  padding: 20px;
  animation: cute-fade-in 0.25s ease-out;
}
.flappy-cute-popup.hidden { display: none; }

@keyframes cute-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.flappy-cute-card {
  position: relative;
  background: var(--paper-a);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 36px 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  transform: rotate(-1.5deg);
  animation: cute-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cute-pop-in {
  from { transform: rotate(-1.5deg) scale(0.7); opacity: 0; }
  to   { transform: rotate(-1.5deg) scale(1);   opacity: 1; }
}

.flappy-cute-close {
  position: absolute;
  top: -16px;
  right: -16px;
  background: var(--pink-500);
  color: white;
  border: 3px solid var(--ink);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.flappy-cute-close:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.flappy-cute-emoji {
  font-size: 2.6rem;
  margin: 0 0 6px;
}

.flappy-cute-text {
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.4;
}

.flappy-cute-resume {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   MOBILE RESPONSIVE — pull tilts in, shrink paddings,
   make sure nothing overflows on a phone.
   ============================================================ */
@media (max-width: 600px) {
  html, body { font-size: 17px; }

  .page { padding: 22px 14px 60px; }

  .letter {
    padding: 24px 20px;
    margin: 36px auto;
  }
  .letter--a { transform: rotate(-1deg); }
  .letter--b { transform: rotate(0.8deg); }
  .letter--c { transform: rotate(-0.5deg); }

  .letter::before { width: 64px; height: 20px; top: -10px; }

  .title { transform: rotate(-1.5deg); }

  .photos { gap: 16px 12px; }
  .photos img:nth-child(1) { transform: rotate(-3deg); }
  .photos img:nth-child(2) { transform: rotate(2deg); }
  .photos img:nth-child(3) { transform: rotate(1.5deg); }
  .photos img:nth-child(4) { transform: rotate(-2deg); }

  .buttons button { padding: 9px 16px; font-size: 1rem; }

  .uthak-svg { width: 130px; height: 175px; }

  .flappy-close { width: 40px; height: 40px; top: 10px; right: 10px; }
  .flappy-hint { font-size: 0.85rem; bottom: 10px; }

  .flappy-cute-card { padding: 30px 22px 20px; }
  .flappy-cute-emoji { font-size: 2.2rem; }
  .flappy-cute-text { font-size: 1.1rem; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .heart, .butterfly, .sparkle,
  .uthak-svg .uthak-body, .uthak-svg .uthak-shadow, .uthak-svg .uthak-sweat {
    animation: none !important;
  }
}