@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,500&display=swap");


/* =====================================================
   BASIS
===================================================== */

:root {
  --bg: #fff7f4;
  --paper: #fffdfb;

  --ink: #493d3d;
  --muted: #827373;

  --pink: #e78aa3;
  --pink-dark: #b95472;
  --pink-soft: #f8dce4;

  --yellow: #f3c96b;
  --yellow-soft: #fff0be;

  --green: #8eaa8d;
  --green-soft: #e3eee2;

  --peach: #f2b18f;
  --lavender: #c6afd7;

  --shadow:
    0 24px 65px
    rgba(120, 72, 81, 0.11);

  --soft-shadow:
    0 14px 35px
    rgba(120, 72, 81, 0.08);

  --serif:
    "Playfair Display",
    Georgia,
    "Times New Roman",
    serif;

  --hand:
    "Caveat",
    "Segoe Print",
    cursive;

  --sans:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


[hidden] {
  display: none !important;
}


body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;

  color: var(--ink);

  background:
    radial-gradient(
      circle at 5% 5%,
      rgba(242, 177, 143, 0.22),
      transparent 25rem
    ),
    radial-gradient(
      circle at 95% 22%,
      rgba(231, 138, 163, 0.18),
      transparent 28rem
    ),
    radial-gradient(
      circle at 20% 75%,
      rgba(198, 175, 215, 0.12),
      transparent 25rem
    ),
    var(--bg);

  font-family: var(--sans);
  line-height: 1.65;
}


body.locked {
  overflow: hidden;
}


button,
input {
  font: inherit;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}


a {
  color: inherit;
}


::selection {
  background:
    rgba(231, 138, 163, 0.25);
}



/* =====================================================
   LOCKSCREEN
===================================================== */

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 20000;

  display: grid;
  place-items: center;

  min-height: 100svh;

  padding: 28px 18px;

  overflow: hidden;

  color: #704252;

  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(255, 255, 255, 0.88),
      transparent 19rem
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(243, 201, 107, 0.28),
      transparent 20rem
    ),
    radial-gradient(
      circle at 95% 80%,
      rgba(198, 175, 215, 0.27),
      transparent 20rem
    ),
    linear-gradient(
      155deg,
      #ffeef3 0%,
      #fff7ed 48%,
      #fce7ef 100%
    );

  transition:
    opacity 0.85s ease,
    visibility 0.85s ease,
    transform 0.85s ease;
}


.lock-screen::before {
  content: "";

  position: absolute;
  inset: 14px;

  border:
    1px solid
    rgba(185, 84, 114, 0.13);

  border-radius: 30px;

  pointer-events: none;
}


.lock-screen.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: scale(1.035);
}


.lock-background {
  position: absolute;
  inset: 0;

  overflow: hidden;
  pointer-events: none;
}


.lock-float {
  position: absolute;

  display: block;

  opacity: 0.48;

  filter:
    drop-shadow(
      0 10px 18px
      rgba(120, 72, 81, 0.08)
    );

  animation:
    lockFloat
    7s
    ease-in-out
    infinite;
}


.float-one {
  top: 7%;
  left: 5%;
  font-size: 3.6rem;
}


.float-two {
  top: 16%;
  right: 9%;

  color: var(--pink-dark);
  font-size: 3rem;

  animation-delay: -2s;
}


.float-three {
  top: 48%;
  left: 4%;

  color: #c69648;
  font-size: 2.1rem;

  animation-delay: -4s;
}


.float-four {
  bottom: 8%;
  right: 5%;

  font-size: 3.5rem;

  animation-delay: -1s;
}


.float-five {
  bottom: 20%;
  left: 12%;

  color: var(--pink);
  font-size: 2.4rem;

  animation-delay: -5s;
}


.float-six {
  top: 38%;
  right: 3%;

  font-size: 2.9rem;

  animation-delay: -3s;
}


@keyframes lockFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-3deg);
  }

  50% {
    transform:
      translateY(-13px)
      rotate(4deg);
  }

}


.lock-inner {
  position: relative;
  z-index: 5;

  width: min(520px, 100%);

  padding:
    clamp(30px, 7vw, 48px)
    clamp(18px, 5vw, 38px);

  border:
    1px solid
    rgba(185, 84, 114, 0.12);

  border-radius: 32px;

  background:
    rgba(255, 253, 251, 0.72);

  box-shadow:
    0 25px 70px
    rgba(130, 73, 88, 0.12);

  backdrop-filter: blur(18px);

  text-align: center;
}


.lock-icon {
  margin-bottom: 5px;

  font-size:
    clamp(3.4rem, 12vw, 5rem);

  line-height: 1;

  animation:
    cakeBounce
    2.6s
    ease-in-out
    infinite;
}


@keyframes cakeBounce {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  50% {
    transform:
      translateY(-7px)
      rotate(2deg);
  }

}


.lock-small {
  margin: 15px 0 8px;

  color: var(--pink-dark);

  font-size: 0.7rem;
  font-weight: 900;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.lock-inner h1 {
  margin: 0;

  color: #7f4256;

  font-family: var(--serif);

  font-size:
    clamp(2.8rem, 12vw, 4.8rem);

  font-weight: 600;

  line-height: 0.95;
  letter-spacing: -0.05em;
}


.lock-copy {
  margin: 14px 0 30px;

  color: #7e6a6e;

  font-family: var(--hand);

  font-size:
    clamp(1.35rem, 5vw, 1.7rem);
}


.pin-inputs {
  display: flex;
  justify-content: center;

  gap:
    clamp(5px, 1.8vw, 10px);

  margin:
    0 auto
    19px;
}


.pin {
  width:
    clamp(39px, 11vw, 56px);

  aspect-ratio: 0.86 / 1;

  border:
    2px solid
    rgba(185, 84, 114, 0.24);

  border-radius: 13px;

  outline: none;

  background:
    rgba(255, 255, 255, 0.75);

  color: var(--pink-dark);

  font-family: var(--serif);

  font-size:
    clamp(1.2rem, 5vw, 1.65rem);

  font-weight: 600;

  text-align: center;

  caret-color: var(--pink-dark);

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.pin:focus {
  border-color: var(--pink);

  background: white;

  box-shadow:
    0 0 0 4px
    rgba(231, 138, 163, 0.12);
}


.pin.correct {
  border-color: #83aa88;

  background: #f0f8f0;

  color: #5d8562;
}


.pin-inputs.wrong {
  animation:
    wrongShake
    0.38s ease;
}


@keyframes wrongShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-9px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-6px);
  }

  80% {
    transform: translateX(4px);
  }

}


.pin-clue {
  margin: 0 0 23px;

  color: #988084;

  font-size: 0.78rem;
  font-style: italic;
}


.lock-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 9px;
}


.lock-button {
  min-width: 120px;

  padding: 12px 18px;

  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 900;

  letter-spacing: 0.1em;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.lock-button.primary {
  border: 0;

  background:
    linear-gradient(
      135deg,
      #c85f7d,
      #e58ba2
    );

  color: white;

  box-shadow:
    0 11px 25px
    rgba(185, 84, 114, 0.21);
}


.lock-button.secondary {
  border:
    1px solid
    rgba(185, 84, 114, 0.18);

  background:
    rgba(255, 255, 255, 0.65);

  color: #9a5065;
}


.lock-button:active {
  transform: scale(0.96);
}


.hint-text {
  height: 0;

  margin-top: 0;

  overflow: hidden;

  color: #a24f68;

  font-family: var(--hand);

  font-size: 1.28rem;

  opacity: 0;

  transition:
    height 0.35s ease,
    margin 0.35s ease,
    opacity 0.35s ease;
}


.hint-text.visible {
  height: 32px;

  margin-top: 17px;

  opacity: 1;
}


.lock-message {
  min-height: 27px;

  margin-top: 10px;

  color: #be536d;

  font-size: 0.75rem;
  font-weight: 700;
}


.access-granted {
  position: absolute;
  inset: 0;
  z-index: 20;

  display: grid;
  place-content: center;

  gap: 9px;

  padding: 30px;

  background:
    radial-gradient(
      circle at center,
      #fff9f3,
      #f9d9e2
    );

  text-align: center;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.45s ease;
}


.access-granted.visible {
  opacity: 1;
  visibility: visible;
}


.access-emoji {
  font-size: 4rem;

  animation:
    successPop
    0.7s ease;
}


@keyframes successPop {

  0% {
    transform:
      scale(0.4)
      rotate(-20deg);
  }

  70% {
    transform:
      scale(1.18)
      rotate(7deg);
  }

  100% {
    transform:
      scale(1)
      rotate(0);
  }

}


.access-granted strong {
  color: #9b4962;

  font-family: var(--serif);

  font-size:
    clamp(1.7rem, 7vw, 2.8rem);
}


.access-granted span {
  color: #856870;

  font-family: var(--hand);

  font-size:
    clamp(1.3rem, 5vw, 1.7rem);
}



/* =====================================================
   WEBSITE
===================================================== */

.site-shell {
  opacity: 0.25;

  filter: blur(9px);

  transform: scale(1.01);

  transition:
    opacity 1s ease,
    filter 1s ease,
    transform 1s ease;
}


body.unlocked .site-shell {
  opacity: 1;

  filter: none;

  transform: none;
}



/* =====================================================
   SCROLL PROGRESS
===================================================== */

.scroll-progress {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 9999;

  height: 4px;

  pointer-events: none;
}


.scroll-progress span {
  display: block;

  width: 0;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #e78aa3,
      #f3c96b,
      #c6afd7
    );
}



/* =====================================================
   HERO
===================================================== */

.birthday-hero {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 100svh;

  padding: 75px 20px;

  overflow: hidden;

  text-align: center;
}


.birthday-hero::before {
  content: "";

  position: absolute;
  inset: 18px;

  border:
    1px solid
    rgba(185, 84, 114, 0.09);

  border-radius: 36px;

  pointer-events: none;
}


.birthday-hero-inner {
  position: relative;
  z-index: 3;

  width: min(760px, 100%);
}


.hero-date {
  margin: 0 0 12px;

  color: var(--pink-dark);

  font-size: 0.73rem;
  font-weight: 900;

  letter-spacing: 0.18em;
}


.birthday-hero h1 {
  margin: 0;

  color: #b95370;

  font-family: var(--serif);

  font-size:
    clamp(7rem, 30vw, 13rem);

  font-weight: 500;

  line-height: 0.78;
  letter-spacing: -0.08em;
}


.hero-title {
  margin: 29px 0 0;

  color: #694953;

  font-family: var(--serif);

  font-size:
    clamp(1.8rem, 6vw, 3rem);

  font-style: italic;

  line-height: 1.1;
}


.hero-copy {
  width: min(540px, 100%);

  margin: 20px auto 0;

  color: #7d6e70;
}


.start-button,
.next-button,
.back-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  text-decoration: none;

  cursor: pointer;
}


.start-button {
  margin-top: 29px;

  padding: 13px 20px;

  border:
    1px solid
    rgba(185, 84, 114, 0.13);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.68);

  box-shadow: var(--soft-shadow);

  color: #9d5066;

  font-size: 0.78rem;
  font-weight: 900;

  letter-spacing: 0.08em;
}


.hero-decorations {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.hero-float {
  position: absolute;

  opacity: 0.42;

  animation:
    heroFloat
    6.5s
    ease-in-out
    infinite;
}


.hero-float-1 {
  top: 14%;
  left: 7%;
  font-size: 3rem;
}


.hero-float-2 {
  top: 9%;
  right: 10%;
  font-size: 2.3rem;
}


.hero-float-3 {
  bottom: 14%;
  left: 6%;
  font-size: 3.3rem;
}


.hero-float-4 {
  bottom: 11%;
  right: 7%;
  font-size: 3rem;
}


.hero-float-5 {
  top: 55%;
  right: 4%;
  font-size: 2.3rem;
}


@keyframes heroFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-3deg);
  }

  50% {
    transform:
      translateY(-13px)
      rotate(4deg);
  }

}



/* =====================================================
   GENERELL
===================================================== */

.birthday-section {
  width:
    min(
      940px,
      calc(100% - 28px)
    );

  margin:
    0 auto
    115px;

  padding-top: 35px;
}


.section-heading {
  width: min(680px, 100%);

  margin:
    0 auto
    42px;

  text-align: center;
}


.section-kicker {
  margin: 0 0 10px;

  color: var(--pink-dark);

  font-size: 0.68rem;
  font-weight: 900;

  letter-spacing: 0.17em;
  text-transform: uppercase;
}


.section-heading h2 {
  margin: 0;

  color: #61474f;

  font-family: var(--serif);

  font-size:
    clamp(2.5rem, 8vw, 4.6rem);

  font-weight: 500;

  line-height: 1;
  letter-spacing: -0.045em;
}


.section-heading > p:last-child {
  margin:
    18px auto
    0;

  color: var(--muted);
}


.next-button {
  margin-top: 8px;

  padding: 11px 18px;

  border-radius: 999px;

  background: var(--pink-dark);

  color: white;

  font-size: 0.8rem;
  font-weight: 800;
}



/* =====================================================
   RUND-KUCHEN
===================================================== */

.candles-section {
  min-height: 100svh;

  display: grid;
  align-content: center;
}


.cake-area {
  width: min(530px, 100%);

  margin: 45px auto 0;

  text-align: center;
}


.round-cake {
  position: relative;

  display: grid;
  place-items: center;

  width:
    min(
      390px,
      88vw
    );

  aspect-ratio: 1;

  margin: 0 auto;
}


.cake-shadow {
  position: absolute;

  width: 84%;
  height: 30%;

  bottom: 7%;

  border-radius: 50%;

  background:
    rgba(116, 65, 79, 0.14);

  filter: blur(18px);
}


.cake-plate {
  position: absolute;

  width: 94%;
  height: 94%;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 16px 35px
    rgba(120, 72, 81, 0.11);

  transform:
    scaleY(0.46)
    translateY(76%);
}


.cake-body {
  position: relative;

  width: 78%;
  height: 78%;

  border:
    12px solid
    #ecb7c4;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 40% 34%,
      #fff8f1 0 14%,
      #ffd6df 35%,
      #f4a8bc 72%,
      #dc7f98 100%
    );

  box-shadow:
    inset
    0 -15px 25px
    rgba(162, 75, 100, 0.12),
    0 22px 40px
    rgba(120, 72, 81, 0.15);
}


.cake-frosting {
  position: absolute;
  inset: 11px;

  border:
    4px solid
    rgba(255, 255, 255, 0.7);

  border-radius: 50%;

  pointer-events: none;
}


.cake-center {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 2;

  display: grid;
  place-items: center;

  width: 30%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    rgba(255, 250, 248, 0.75);

  box-shadow:
    0 8px 22px
    rgba(131, 73, 89, 0.1);

  transform:
    translate(-50%, -50%);
}


.cake-center span {
  color: #b45671;

  font-family: var(--serif);

  font-size:
    clamp(2.1rem, 9vw, 3.3rem);

  font-weight: 600;
}


.candles-random {
  position: absolute;
  inset: 0;

  z-index: 6;
}


.candle {
  position: absolute;

  width: 15px;
  height: 42px;

  padding: 0;

  border: 0;

  border-radius:
    5px 5px
    3px 3px;

  background:
    repeating-linear-gradient(
      135deg,
      #fff 0,
      #fff 5px,
      #de7793 5px,
      #de7793 10px
    );

  box-shadow:
    0 4px 10px
    rgba(104, 58, 72, 0.12);

  cursor: pointer;

  transform:
    translate(-50%, -50%)
    rotate(var(--angle, 0deg));

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.candle::before {
  content: "";

  position: absolute;

  top: -16px;
  left: 50%;

  width: 11px;
  height: 16px;

  border-radius:
    50% 50%
    46% 46%;

  background:
    radial-gradient(
      circle at 50% 65%,
      #fff1a5 0 22%,
      #f6ba49 23% 58%,
      #ec7b4e 59% 100%
    );

  box-shadow:
    0 0 12px
    rgba(245, 177, 66, 0.66);

  transform:
    translateX(-50%);

  transform-origin:
    bottom center;

  animation:
    flameMove
    0.78s
    ease-in-out
    infinite alternate;
}


@keyframes flameMove {

  from {
    transform:
      translateX(-50%)
      rotate(-5deg)
      scale(0.94);
  }

  to {
    transform:
      translateX(-50%)
      rotate(5deg)
      scale(1.05);
  }

}


.candle.out {
  opacity: 0.45;

  transform:
    translate(-50%, -50%)
    translateY(3px)
    scale(0.9)
    rotate(var(--angle, 0deg));
}


.candle.out::before {
  opacity: 0;
  animation: none;
}


.candle.relighting {
  animation:
    candleRelight
    0.55s ease;
}


@keyframes candleRelight {

  0% {
    transform:
      translate(-50%, -50%)
      scale(0.85);
  }

  60% {
    transform:
      translate(-50%, -50%)
      scale(1.18);
  }

  100% {
    transform:
      translate(-50%, -50%)
      scale(1);
  }

}


.candle-counter {
  margin:
    15px 0
    0;

  color: #96566a;

  font-family: var(--hand);

  font-size:
    clamp(1.4rem, 5vw, 1.8rem);
}


.candle-message {
  min-height: 32px;

  margin-top: 5px;

  color: #ac6578;

  font-size: 0.84rem;
  font-weight: 750;
}


.candles-finished {
  display: grid;
  place-items: center;

  gap: 8px;

  width:
    min(
      520px,
      100%
    );

  height: 0;

  margin:
    0 auto;

  overflow: hidden;

  text-align: center;

  opacity: 0;

  transition:
    opacity 0.5s ease,
    margin 0.5s ease,
    height 0.5s ease;
}


.candles-finished.visible {
  height: auto;

  margin-top: 35px;

  padding: 28px 20px;

  border:
    1px solid
    rgba(185, 84, 114, 0.11);

  border-radius: 28px;

  background:
    rgba(255, 255, 255, 0.65);

  box-shadow: var(--soft-shadow);

  opacity: 1;
}


.finished-emoji {
  font-size: 3rem;
}


.candles-finished h3 {
  margin: 0;

  color: #7d4758;

  font-family: var(--serif);

  font-size:
    clamp(1.6rem, 5vw, 2.3rem);

  font-weight: 500;
}


.candles-finished p {
  margin: 0;

  color: #9c6072;

  font-family: var(--hand);

  font-size: 1.4rem;
}



/* =====================================================
   CAR START
===================================================== */

.car-game {
  width: min(720px, 100%);

  margin: 0 auto;

  padding:
    clamp(24px, 6vw, 40px);

  border:
    1px solid
    rgba(113, 141, 120, 0.12);

  border-radius: 34px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(142, 170, 141, 0.15),
      transparent 20rem
    ),
    #f9fbf7;

  box-shadow: var(--shadow);

  text-align: center;
}


.car-start-screen {
  display: grid;
  place-items: center;

  gap: 8px;

  min-height: 410px;
}


.car-start-emoji {
  font-size: 5rem;
}


.car-start-screen p {
  margin: 0;

  color: #657c68;

  font-family: var(--hand);

  font-size: 1.7rem;
}


.car-start-screen strong {
  width: min(400px, 100%);

  color: #685f5c;

  font-family: var(--serif);

  font-size: 1.2rem;
  font-weight: 500;
}


.car-start-screen small {
  color: #7f7571;

  font-size: 0.75rem;
}


.car-route-preview {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin: 18px 0 8px;

  color: #728375;

  font-family: var(--hand);

  font-size: 1.5rem;
}


.car-route-preview span:first-child,
.car-route-preview span:last-child {
  font-size: 2.2rem;
}


.car-start-button,
.car-retry-button {
  margin-top: 18px;

  padding: 12px 20px;

  border: 0;

  border-radius: 999px;

  background: #718d78;

  color: white;

  font-size: 0.75rem;
  font-weight: 900;

  letter-spacing: 0.08em;

  cursor: pointer;
}



/* =====================================================
   CAR ROAD
===================================================== */

.road-game {
  display: none;
}


.road-game.active {
  display: block;
}


.road-sky {
  position: relative;

  height: 80px;

  overflow: hidden;

  border-radius:
    22px 22px 0 0;

  background:
    linear-gradient(
      #cde2ee,
      #eaf1e9
    );
}


.road-sky span {
  position: absolute;

  font-size: 1.7rem;

  opacity: 0.8;
}


.road-sky span:nth-child(1) {
  left: 13%;
  top: 22px;
}


.road-sky span:nth-child(2) {
  right: 20%;
  top: 13px;
}


.road-sky span:nth-child(3) {
  right: 6%;
  top: 34px;
}


.road {
  position: relative;

  width: 100%;
  height: 460px;

  overflow: hidden;

  border-left:
    22px solid
    #8daa7f;

  border-right:
    22px solid
    #8daa7f;

  background:
    linear-gradient(
      #666,
      #4b4b4b
    );

  touch-action: none;
}


.road::before,
.road::after {
  content: "🌲  🌲  🌲  🌲  🌲  🌲";

  position: absolute;

  top: 0;
  bottom: 0;

  z-index: 1;

  width: 28px;

  font-size: 1.15rem;

  line-height: 3.5;

  writing-mode: vertical-lr;

  opacity: 0.85;
}


.road::before {
  left: -24px;
}


.road::after {
  right: -24px;
}


.road-line {
  position: absolute;

  left: 50%;

  width: 6px;
  height: 70px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.75);

  transform:
    translateX(-50%);
}


.road-line-1 {
  top: 15px;
}


.road-line-2 {
  top: 135px;
}


.road-line-3 {
  top: 255px;
}


.road-line-4 {
  top: 375px;
}


.car-player {
  position: absolute;

  left: 50%;
  bottom: 32px;

  z-index: 10;

  font-size: 3rem;

  transform:
    translateX(-50%);

  transition:
    left 0.16s ease,
    transform 0.16s ease;
}


.car-player.hit {
  animation:
    carHit
    0.4s ease;
}


@keyframes carHit {

  0%,
  100% {
    transform:
      translateX(-50%)
      rotate(0);
  }

  25% {
    transform:
      translateX(-50%)
      rotate(-12deg);
  }

  70% {
    transform:
      translateX(-50%)
      rotate(12deg);
  }

}


.road-objects {
  position: absolute;
  inset: 0;

  z-index: 8;

  pointer-events: none;
}


.road-object {
  position: absolute;

  top: -70px;

  font-size: 2rem;

  animation:
    roadObjectFall
    linear
    forwards;
}


@keyframes roadObjectFall {

  from {
    transform:
      translateY(0);
  }

  to {
    transform:
      translateY(560px);
  }

}



/* =====================================================
   CAR DASHBOARD
===================================================== */

.car-dashboard {
  display: grid;

  grid-template-columns:
    auto auto auto 1fr;

  align-items: center;

  gap: 14px;

  padding:
    15px 14px;

  border-radius:
    0 0
    22px 22px;

  background: #f2eee8;
}


.car-info span {
  display: block;

  color: #92837f;

  font-size: 0.58rem;
  font-weight: 900;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.car-info strong {
  display: block;

  margin-top: 2px;

  font-size: 1.25rem;
}


.car-timer {
  min-width: 70px;

  padding: 8px 10px;

  border-radius: 11px;

  background: #fff;

  color: #665d59;

  box-shadow:
    0 5px 12px
    rgba(80, 65, 58, 0.06);

  font-family: var(--serif);

  font-size: 1.05rem;
  font-weight: 600;

  font-variant-numeric: tabular-nums;
}


.car-timer.warning {
  color: #ba5362;

  animation:
    timerPulse
    0.8s ease
    infinite;
}


@keyframes timerPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }

}


.car-lives {
  white-space: nowrap;

  font-size: 1rem;
}


.car-controls {
  display: flex;
  justify-content: flex-end;

  gap: 8px;
}


.car-control,
.car-blinker {
  min-height: 47px;

  border:
    1px solid
    rgba(90, 76, 70, 0.1);

  border-radius: 14px;

  background: white;

  color: #665955;

  box-shadow:
    0 5px 12px
    rgba(80, 65, 58, 0.06);

  cursor: pointer;
}


.car-control {
  width: 52px;

  font-size: 1.35rem;
  font-weight: 900;
}


.car-blinker {
  padding:
    0 13px;

  font-size: 0.65rem;
  font-weight: 900;

  letter-spacing: 0.06em;
}


.car-blinker.active {
  background: #f4c95f;

  color: #6c5723;
}


.car-message {
  min-height: 33px;

  margin-top: 13px;

  color: #6e7e6e;

  font-size: 0.82rem;
  font-weight: 800;
}



/* =====================================================
   CAR FAIL / SUCCESS
===================================================== */

.car-failed,
.car-finished {
  display: none;

  place-items: center;

  gap: 8px;

  min-height: 380px;

  text-align: center;
}


.car-failed.visible,
.car-finished.visible {
  display: grid;
}


.car-failed > span,
.car-finished > span {
  font-size: 4rem;
}


.car-failed h3,
.car-finished h3 {
  margin: 0;

  color: #687a69;

  font-family: var(--serif);

  font-size:
    clamp(2rem, 6vw, 3rem);

  font-weight: 500;
}


.car-failed p,
.car-finished p {
  width: min(420px, 100%);

  margin: 0;

  color: #756b67;

  font-family: var(--hand);

  font-size: 1.5rem;
}


.car-failed h3 {
  color: #a35c67;
}


.car-retry-button {
  background: #b96876;
}



/* =====================================================
   PIZZA
===================================================== */

.pizza-game {
  width: min(620px, 100%);

  margin: 0 auto;

  padding:
    clamp(25px, 6vw, 44px);

  border:
    1px solid
    rgba(156, 105, 64, 0.1);

  border-radius: 36px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(243, 201, 107, 0.18),
      transparent 20rem
    ),
    #fffaf3;

  box-shadow: var(--shadow);

  text-align: center;
}


.pizza-board {
  display: grid;
  place-items: center;

  min-height: 310px;
}


.pizza-base {
  position: relative;

  width:
    min(
      285px,
      72vw
    );

  aspect-ratio: 1;

  border:
    17px solid
    #dca25d;

  border-radius: 50%;

  background:
    #efc27b;

  box-shadow:
    inset
    0 0 0
    3px
    rgba(139, 83, 44, 0.08),
    0 24px 35px
    rgba(117, 76, 47, 0.15);

  overflow: hidden;
}


.pizza-sauce {
  position: absolute;
  inset: 6px;

  border-radius: 50%;

  background: #ce584d;

  opacity: 0;

  transform: scale(0.82);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}


.pizza-sauce.active {
  opacity: 1;

  transform: scale(1);
}


.pizza-sauce.active::after {
  content: "";

  position: absolute;
  inset: 9px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,0.08),
      transparent 22%
    );

  pointer-events: none;
}


.pizza-toppings-placed {
  position: absolute;
  inset: 0;

  z-index: 5;

  pointer-events: none;
}


.placed-topping {
  position: absolute;

  display: grid;
  place-items: center;

  width: 45px;
  height: 45px;

  font-size: 1.9rem;

  transform:
    translate(-50%, -50%)
    rotate(var(--rotation, 0deg));

  animation:
    toppingPop
    0.35s ease;
}


.cheese-piece {
  width: 42px;
  height: 32px;

  border-radius:
    55% 45%
    50% 50%;

  background:
    #fff2b7;

  border:
    2px solid
    rgba(225, 189, 95, 0.55);

  box-shadow:
    0 3px 7px
    rgba(131, 95, 61, 0.12);

  color: transparent;

  font-size: 0;
}


.cheese-piece:nth-child(2n) {
  width: 34px;
  height: 39px;
}


.cheese-piece:nth-child(3n) {
  border-radius: 50%;
}


.placed-topping.bad {
  animation:
    toppingReject
    0.7s ease forwards;
}


@keyframes toppingPop {

  0% {
    transform:
      translate(-50%, -50%)
      scale(0.4);
  }

  70% {
    transform:
      translate(-50%, -50%)
      scale(1.2);
  }

  100% {
    transform:
      translate(-50%, -50%)
      scale(1);
  }

}


@keyframes toppingReject {

  0% {
    opacity: 1;
  }

  30% {
    transform:
      translate(-50%, -50%)
      scale(1.2)
      rotate(-12deg);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -120%)
      scale(0.6)
      rotate(80deg);
  }

}


.pizza-instruction {
  margin:
    2px 0
    18px;

  color: #97664e;

  font-family: var(--hand);

  font-size: 1.55rem;
}


.topping-tray {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 9px;
}


.topping {
  display: grid;
  place-items: center;

  gap: 2px;

  min-width: 78px;
  min-height: 72px;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(152, 98, 63, 0.11);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 9px 20px
    rgba(104, 70, 47, 0.07);

  cursor: pointer;

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}


.topping span {
  font-size: 1.6rem;
}


.topping small {
  color: #846c61;

  font-size: 0.64rem;
  font-weight: 800;
}


.topping:active {
  transform:
    scale(0.9)
    rotate(-5deg);
}


.topping.rejected {
  animation:
    toppingButtonReject
    0.35s ease;
}


@keyframes toppingButtonReject {

  0%,
  100% {
    transform: translateX(0);
  }

  30% {
    transform:
      translateX(-4px)
      rotate(-3deg);
  }

  70% {
    transform:
      translateX(4px)
      rotate(3deg);
  }

}


.pizza-message {
  min-height: 31px;

  margin-top: 14px;

  color: #a0644e;

  font-size: 0.81rem;
  font-weight: 800;
}


.pizza-finish-button {
  margin-top: 8px;

  padding: 12px 20px;

  border: 0;

  border-radius: 999px;

  background: #be665c;

  color: white;

  font-size: 0.76rem;
  font-weight: 900;

  letter-spacing: 0.08em;

  cursor: pointer;
}


.pizza-result {
  height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    height 0.45s ease,
    margin 0.45s ease,
    opacity 0.45s ease;
}


.pizza-result.visible {
  height: auto;

  margin-top: 24px;

  padding: 19px;

  border-radius: 18px;

  background:
    rgba(243, 201, 107, 0.14);

  opacity: 1;
}


.pizza-result > span {
  font-size: 2.5rem;
}


.pizza-result p {
  margin: 5px 0 0;

  color: #a06550;

  font-family: var(--hand);

  font-size: 1.55rem;
}


.pizza-result strong {
  display: block;

  margin-top: 4px;

  color: #8b4f4c;

  font-family: var(--serif);

  font-size: 1.15rem;
}


.pizza-result .next-button {
  margin-top: 18px;
}



/* =====================================================
   18ER PASS
===================================================== */

.birthday-pass-section {
  padding-top: 70px;
}


.birthday-pass {
  width: min(650px, 100%);

  margin: 0 auto;

  padding:
    clamp(26px, 6vw, 42px);

  border:
    1px solid
    rgba(185, 84, 114, 0.12);

  border-radius: 32px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(243, 201, 107, 0.15),
      transparent 20rem
    ),
    #fffaf8;

  box-shadow: var(--shadow);
}


.pass-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  padding-bottom: 22px;

  border-bottom:
    1px solid
    rgba(120, 72, 81, 0.1);
}


.pass-small {
  display: block;

  margin-bottom: 5px;

  color: #aa5b70;

  font-size: 0.64rem;
  font-weight: 900;

  letter-spacing: 0.15em;
}


.pass-top strong {
  display: block;

  color: #674a54;

  font-family: var(--serif);

  font-size: 2rem;
  font-weight: 500;
}


.pass-big-number {
  color:
    rgba(185, 84, 114, 0.2);

  font-family: var(--serif);

  font-size: 4.3rem;
  font-weight: 600;

  line-height: 1;
}


.pass-stamps {
  display: grid;

  gap: 12px;

  margin-top: 25px;
}


.pass-stamp {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 14px;

  padding: 15px 16px;

  border:
    1px solid
    rgba(112, 86, 78, 0.09);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.65);
}


.pass-stamp.completed {
  border-color:
    rgba(111, 146, 116, 0.22);

  background:
    rgba(227, 238, 226, 0.65);
}


.stamp-icon {
  font-size: 1.6rem;
}


.pass-stamp strong {
  display: block;

  color: #674f56;

  font-size: 0.9rem;
}


.pass-stamp small {
  display: block;

  margin-top: 2px;

  color: #748078;

  font-size: 0.7rem;
}


.stamp-check {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  border-radius: 50%;

  background: #85a589;

  color: white;

  font-weight: 900;
}


.pass-result {
  margin-top: 22px;

  padding-top: 18px;

  border-top:
    1px dashed
    rgba(120, 72, 81, 0.14);

  color: #8f6170;

  font-family: var(--hand);

  font-size: 1.45rem;

  text-align: center;
}



/* =====================================================
   BESTANDEN
===================================================== */

.pass-complete-section {
  min-height: 72svh;

  display: grid;
  place-items: center;
}


.pass-complete {
  width: min(570px, 100%);

  padding:
    clamp(35px, 7vw, 58px);

  border:
    1px solid
    rgba(113, 141, 120, 0.12);

  border-radius: 34px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(142, 170, 141, 0.16),
      transparent 19rem
    ),
    rgba(255, 255, 255, 0.72);

  box-shadow: var(--shadow);

  text-align: center;
}


.pass-complete-icon {
  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  margin: 0 auto 18px;

  border-radius: 50%;

  background: #85a589;

  color: white;

  font-size: 2rem;
  font-weight: 900;
}


.pass-complete h2 {
  margin: 0;

  color: #657367;

  font-family: var(--serif);

  font-size:
    clamp(2.5rem, 8vw, 4.2rem);

  font-weight: 500;

  line-height: 1;
}


.pass-complete > p:last-of-type {
  color: #766b67;

  font-family: var(--hand);

  font-size: 1.55rem;
}



/* =====================================================
   18 WÜNSCHE
===================================================== */

.wishes-section {
  width:
    min(
      760px,
      calc(100% - 28px)
    );
}


.wishes-list {
  display: grid;

  gap: 35px;

  width: min(620px, 100%);

  margin: 0 auto;
}


.wish-card {
  position: relative;

  display: grid;
  place-content: center;

  min-height:
    clamp(
      280px,
      55svh,
      430px
    );

  padding:
    clamp(30px, 7vw, 55px);

  overflow: hidden;

  border:
    1px solid
    rgba(185, 84, 114, 0.1);

  border-radius: 30px;

  background: #fff9f8;

  box-shadow: var(--soft-shadow);

  text-align: center;

  opacity: 0;

  transform:
    translateY(38px)
    scale(0.97);

  transition:
    opacity 0.75s ease,
    transform 0.75s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    );
}


.wish-card:nth-child(4n + 1) {
  background: #fff3f6;
}


.wish-card:nth-child(4n + 2) {
  background: #fff9e9;
}


.wish-card:nth-child(4n + 3) {
  background: #f4f8f2;
}


.wish-card:nth-child(4n) {
  background: #f8f3fb;
}


.wish-card.is-visible {
  opacity: 1;
  transform: none;
}


.wish-number {
  position: absolute;

  top: 18px;
  left: 22px;

  color:
    rgba(185, 84, 114, 0.17);

  font-family: var(--serif);

  font-size:
    clamp(3.3rem, 10vw, 5rem);

  font-weight: 600;

  line-height: 1;
}


.wish-card p {
  width: min(440px, 100%);

  margin: 0 auto;

  color: #71575f;

  font-family: var(--serif);

  font-size:
    clamp(1.45rem, 5vw, 2.05rem);

  font-style: italic;

  line-height: 1.45;
}



/* =====================================================
   BRIEF
===================================================== */

.letter-section {
  padding-top: 45px;
}


.birthday-envelope {
  display: grid;
  place-items: center;

  margin-top: 20px;
}


.birthday-envelope-button {
  position: relative;

  width:
    min(
      330px,
      82vw
    );

  aspect-ratio: 1.5 / 1;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  perspective: 1000px;
}


.birthday-envelope-back {
  position: absolute;
  inset: 0;

  border-radius: 12px;

  background: #f1c7d1;

  box-shadow:
    0 22px 42px
    rgba(120, 72, 81, 0.13);
}


.birthday-envelope-paper {
  position: absolute;

  left: 9%;
  right: 9%;

  top: 15%;
  bottom: 8%;

  z-index: 2;

  display: grid;
  place-items: center;

  background: #fff8e8;

  color: #9b5268;

  font-family: var(--hand);

  font-size: 1.55rem;

  transform:
    translateY(23%);

  transition:
    transform 0.75s
    cubic-bezier(
      0.23,
      0.82,
      0.22,
      1
    );
}


.birthday-envelope-front {
  position: absolute;
  inset: 0;

  z-index: 4;

  overflow: hidden;

  border-radius: 12px;

  pointer-events: none;
}


.birthday-envelope-front::before,
.birthday-envelope-front::after {
  content: "";

  position: absolute;

  bottom: -1px;

  width: 72%;
  height: 94%;

  background: #e9b2c0;
}


.birthday-envelope-front::before {
  left: -22%;

  clip-path:
    polygon(
      0 20%,
      100% 100%,
      0 100%
    );
}


.birthday-envelope-front::after {
  right: -22%;

  clip-path:
    polygon(
      100% 20%,
      0 100%,
      100% 100%
    );
}


.birthday-envelope-flap {
  position: absolute;

  top: 0;
  left: 0;

  z-index: 5;

  width: 100%;
  height: 58%;

  background: #f3c7d2;

  clip-path:
    polygon(
      0 0,
      100% 0,
      50% 100%
    );

  transform-origin:
    top center;

  transition:
    transform 0.65s ease;
}


.birthday-envelope-heart {
  position: absolute;

  top: 47%;
  left: 50%;

  z-index: 8;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: #b95370;

  color: white;

  transform:
    translate(-50%, -50%);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.birthday-envelope-button.open
.birthday-envelope-flap {
  z-index: 1;

  transform:
    rotateX(180deg);
}


.birthday-envelope-button.open
.birthday-envelope-paper {
  transform:
    translateY(-46%);
}


.birthday-envelope-button.open
.birthday-envelope-heart {
  opacity: 0;

  transform:
    translate(-50%, -45%)
    scale(0.7);
}


.birthday-letter {
  display: grid;

  grid-template-rows: 0fr;

  width: min(720px, 100%);

  margin: 0 auto;

  opacity: 0;

  transition:
    grid-template-rows 0.65s ease,
    opacity 0.55s ease,
    margin 0.55s ease;
}


.birthday-letter > * {
  overflow: hidden;
}


.birthday-letter.visible {
  grid-template-rows: 1fr;

  margin-top: 55px;

  opacity: 1;
}


.birthday-letter-paper {
  padding:
    clamp(34px, 7vw, 62px);

  border:
    1px solid
    rgba(129, 88, 59, 0.14);

  border-radius: 5px;

  background:
    linear-gradient(
      100deg,
      #fff4d9,
      #fffaf0,
      #f8e9cb
    );

  box-shadow:
    0 25px 55px
    rgba(93, 65, 48, 0.14);
}


.birthday-letter-paper p {
  margin:
    0 0
    21px;

  color: #665045;

  font-family: var(--hand);

  font-size:
    clamp(1.35rem, 4vw, 1.65rem);

  line-height: 1.5;
}


.letter-date {
  font-family: var(--serif) !important;
  font-size: 0.88rem !important;
}


.letter-greeting {
  color: #8c4d5e !important;

  font-size:
    clamp(1.8rem, 5vw, 2.1rem) !important;
}


.letter-signature {
  margin-top: 34px !important;

  color: #874657 !important;

  font-size: 1.8rem !important;

  text-align: right;
}



/* =====================================================
   GESCHENK
===================================================== */

.real-gift-section {
  min-height: 75svh;

  display: grid;
  place-items: center;
}


.gift-tease {
  width: min(590px, 100%);

  padding:
    clamp(35px, 7vw, 58px);

  border:
    1px solid
    rgba(185, 84, 114, 0.1);

  border-radius: 38px;

  background:
    rgba(255, 253, 251, 0.86);

  box-shadow: var(--shadow);

  text-align: center;
}


.gift-tease-emoji {
  display: block;

  margin-bottom: 12px;

  font-size:
    clamp(4rem, 14vw, 6.3rem);

  animation:
    presentWiggle
    2.5s
    ease-in-out
    infinite;
}


@keyframes presentWiggle {

  0%,
  100% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(-4deg);
  }

  60% {
    transform: rotate(4deg);
  }

}


.gift-tease h2 {
  margin: 0;

  color: #684a53;

  font-family: var(--serif);

  font-size:
    clamp(2.4rem, 8vw, 4rem);

  font-weight: 500;
}


.gift-reveal-button {
  margin-top: 28px;

  padding: 13px 22px;

  border: 0;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #b95370,
      #e0879f
    );

  color: white;

  font-size: 0.78rem;
  font-weight: 900;

  letter-spacing: 0.08em;

  cursor: pointer;
}


.gift-reveal-result {
  height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    height 0.5s ease,
    opacity 0.5s ease,
    margin 0.5s ease;
}


.gift-reveal-result.visible {
  height: auto;

  margin-top: 29px;

  opacity: 1;
}


.gift-reveal-result p {
  margin: 0;

  color: #95546a;

  font-family: var(--hand);

  font-size:
    clamp(1.45rem, 5vw, 1.9rem);
}


.gift-reveal-result strong {
  display: block;

  margin-top: 6px;

  color: #724f58;

  font-family: var(--serif);

  font-size:
    clamp(1.1rem, 3.5vw, 1.35rem);
}



/* =====================================================
   ENDING
===================================================== */

.birthday-ending {
  min-height: 85svh;

  display: grid;
  place-content: center;

  width:
    min(
      740px,
      calc(100% - 32px)
    );

  margin: 0 auto;

  padding: 80px 20px;

  text-align: center;
}


.ending-small {
  margin: 0 0 12px;

  color: var(--pink-dark);

  font-size: 0.7rem;
  font-weight: 900;

  letter-spacing: 0.16em;
}


.birthday-ending h2 {
  margin: 0;

  color: #774b59;

  font-family: var(--serif);

  font-size:
    clamp(2.8rem, 10vw, 5.3rem);

  font-weight: 500;
  font-style: italic;

  line-height: 1;
}


.ending-copy {
  margin: 23px 0 0;

  color: #806970;

  font-family: var(--hand);

  font-size:
    clamp(1.4rem, 5vw, 1.8rem);
}


.back-button {
  width: fit-content;

  margin:
    28px auto
    0;

  padding:
    12px 18px;

  border:
    1px solid
    rgba(185, 84, 114, 0.13);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.68);

  box-shadow: var(--soft-shadow);

  color: #955167;

  font-size: 0.77rem;
  font-weight: 900;
}



/* =====================================================
   FOOTER
===================================================== */

footer {
  padding:
    25px 20px
    45px;

  color: #a08e91;

  font-size: 0.75rem;

  text-align: center;
}


.footer-small {
  font-family: var(--hand);
  font-size: 1.15rem;
}



/* =====================================================
   REVEAL
===================================================== */

.reveal {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}


.reveal.is-visible {
  opacity: 1;
  transform: none;
}



/* =====================================================
   CONFETTI
===================================================== */

.confetti-piece {
  position: fixed;

  top: -30px;
  left: var(--left);

  z-index: 30000;

  width: var(--size);

  height:
    calc(var(--size) * 1.6);

  border-radius: 3px;

  background: var(--confetti-color);

  pointer-events: none;

  animation:
    confettiFall
    var(--duration)
    linear
    forwards;
}


@keyframes confettiFall {

  0% {
    opacity: 1;

    transform:
      translateY(-20px)
      rotate(var(--rotation));
  }

  100% {
    opacity: 0;

    transform:
      translateY(calc(100vh + 80px))
      translateX(var(--drift))
      rotate(calc(var(--rotation) + 540deg));
  }

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 780px) {

  .birthday-section {
    margin-bottom: 90px;
  }


  .birthday-pass,
  .car-game,
  .pizza-game,
  .gift-tease {
    border-radius: 28px;
  }


  .round-cake {
    width:
      min(
        360px,
        90vw
      );
  }


  .road {
    height: 420px;
  }


  .car-dashboard {
    grid-template-columns:
      auto auto 1fr;
  }


  .car-info {
    display: none;
  }


  .wishes-list {
    gap: 27px;
  }

}



/* =====================================================
   PHONE
===================================================== */

@media (max-width: 520px) {

  .lock-screen {
    padding:
      15px 12px;
  }


  .lock-inner {
    padding:
      28px 15px;

    border-radius: 26px;
  }


  .pin {
    width:
      min(
        42px,
        11vw
      );

    border-radius: 10px;
  }


  .pin-inputs {
    gap: 5px;
  }


  .birthday-hero {
    padding:
      60px 18px;
  }


  .birthday-hero h1 {
    font-size:
      clamp(
        7rem,
        37vw,
        10rem
      );
  }


  .birthday-section {
    width:
      calc(100% - 20px);

    margin-bottom: 78px;

    padding-top: 24px;
  }


  .section-heading {
    margin-bottom: 30px;
  }


  .section-heading h2 {
    font-size:
      clamp(
        2.35rem,
        11vw,
        3.45rem
      );
  }


  /* CAKE */

  .cake-area {
    margin-top: 30px;
  }


  .round-cake {
    width:
      min(
        330px,
        92vw
      );
  }


  .cake-body {
    width: 80%;
    height: 80%;
  }


  .candle {
    width: 13px;
    height: 37px;
  }


  .candle::before {
    width: 10px;
    height: 15px;
  }


  /* CAR */

  .car-game {
    padding:
      20px 11px;
  }


  .car-start-screen {
    min-height: 360px;
  }


  .road {
    height: 390px;

    border-left-width: 15px;
    border-right-width: 15px;
  }


  .car-dashboard {
    grid-template-columns:
      auto auto;

    gap: 9px;

    justify-content: center;
  }


  .car-timer {
    min-width: 65px;
  }


  .car-lives {
    font-size: 0.9rem;
  }


  .car-controls {
    grid-column:
      1 / -1;

    justify-content: center;

    width: 100%;
  }


  .car-control {
    width: 60px;
  }


  .car-blinker {
    min-width: 100px;
  }


  .car-failed,
  .car-finished {
    min-height: 340px;

    padding:
      25px 10px;
  }


  /* PIZZA */

  .pizza-game {
    padding:
      26px 14px;
  }


  .pizza-board {
    min-height: 270px;
  }


  .pizza-base {
    width:
      min(
        250px,
        73vw
      );

    border-width: 15px;
  }


  .topping {
    min-width: 73px;
    min-height: 68px;

    padding:
      7px 8px;
  }


  /* PASS */

  .birthday-pass {
    padding:
      26px 17px;
  }


  .pass-big-number {
    font-size: 3.6rem;
  }


  .pass-stamp {
    gap: 10px;

    padding: 13px;
  }


  /* WISHES */

  .wishes-section {
    width:
      calc(100% - 20px);
  }


  .wishes-list {
    gap: 22px;
  }


  .wish-card {
    min-height: 48svh;

    padding:
      36px 24px;

    border-radius: 25px;
  }


  .wish-number {
    top: 14px;
    left: 17px;

    font-size: 3.5rem;
  }


  .wish-card p {
    font-size:
      clamp(
        1.4rem,
        7vw,
        1.85rem
      );
  }


  /* LETTER */

  .birthday-letter-paper {
    padding:
      34px 22px;
  }


  .gift-tease {
    padding:
      35px 20px;
  }

}



/* =====================================================
   SMALL PHONE
===================================================== */

@media (max-width: 370px) {

  .pin {
    width: 36px;
  }


  .pin-inputs {
    gap: 4px;
  }


  .round-cake {
    width: 305px;
  }


  .car-control {
    width: 52px;
  }


  .car-blinker {
    min-width: 87px;

    font-size: 0.58rem;
  }


  .topping {
    min-width: 68px;
  }

}



/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }


  .reveal,
  .wish-card {
    opacity: 1;
    transform: none;
  }

}
/* =====================================================
   FINAL BIRTHDAY TWEAKS
   candles + cheese + driving turn menu
===================================================== */


/* =====================================================
   BRIGHTER CANDLES
===================================================== */

.candle {
  background:
    repeating-linear-gradient(
      135deg,
      #fffafd 0,
      #fffafd 5px,
      #f28ba8 5px,
      #f28ba8 10px
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.55);

  box-shadow:
    0 4px 10px
    rgba(173, 80, 108, 0.14),
    0 0 8px
    rgba(255, 255, 255, 0.45);
}


.candle::before {
  background:
    radial-gradient(
      circle at 50% 65%,
      #fffce2 0 20%,
      #ffd968 21% 56%,
      #ff965f 57% 100%
    );

  box-shadow:
    0 0 15px
    rgba(255, 194, 75, 0.82);
}


/* phone screens were making them look darker */

@media (max-width: 520px) {

  .candle {
    filter:
      brightness(1.12)
      saturate(1.04);

    box-shadow:
      0 4px 9px
      rgba(173, 80, 108, 0.12),
      0 0 9px
      rgba(255, 255, 255, 0.6);
  }

}



/* =====================================================
   LIGHTER / MORE MOZZARELLA-LOOKING CHEESE
===================================================== */

.cheese-piece {
  background:
    linear-gradient(
      145deg,
      #fffdf2,
      #fff7cf
    );

  border:
    2px solid
    rgba(241, 222, 159, 0.7);

  box-shadow:
    0 3px 7px
    rgba(135, 107, 71, 0.08);

  color: transparent;
}


.cheese-piece:nth-child(2n) {
  background:
    linear-gradient(
      145deg,
      #fffef7,
      #fff6c8
    );
}


.cheese-piece:nth-child(3n) {
  background:
    #fffceb;
}



/* =====================================================
   BLINKER CHOICE OVERLAY
===================================================== */

.turn-choice {
  position: absolute;

  inset: 0;

  z-index: 40;

  display: grid;
  place-items: center;

  padding: 18px;

  background:
    rgba(49, 52, 48, 0.52);

  backdrop-filter:
    blur(5px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}


.turn-choice.visible {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


.turn-choice-card {
  width:
    min(
      370px,
      100%
    );

  padding:
    25px 18px
    20px;

  border:
    1px solid
    rgba(255, 255, 255, 0.5);

  border-radius: 25px;

  background:
    rgba(255, 252, 247, 0.96);

  box-shadow:
    0 20px 55px
    rgba(30, 34, 30, 0.25);

  text-align: center;

  animation:
    turnChoicePop
    0.32s
    cubic-bezier(
      0.2,
      0.8,
      0.25,
      1
    );
}


@keyframes turnChoicePop {

  0% {
    opacity: 0;

    transform:
      scale(0.88)
      translateY(12px);
  }

  100% {
    opacity: 1;

    transform:
      scale(1)
      translateY(0);
  }

}


.turn-choice-icon {
  display: block;

  margin-bottom: 6px;

  font-size: 2rem;
}


.turn-choice-praise {
  width:
    min(
      300px,
      100%
    );

  margin:
    0 auto
    12px;

  color: #7a6268;

  font-family: var(--hand);

  font-size: 1.25rem;

  line-height: 1.25;
}


.turn-choice-card h3 {
  margin:
    7px 0
    17px;

  color: #625653;

  font-family: var(--serif);

  font-size:
    clamp(
      1.45rem,
      5vw,
      1.9rem
    );

  font-weight: 500;
}


.turn-choice-buttons {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;
}


.turn-choice-button {
  display: grid;
  place-items: center;

  gap: 2px;

  min-height: 77px;

  padding:
    10px 6px;

  border:
    1px solid
    rgba(104, 88, 81, 0.1);

  border-radius: 17px;

  background: white;

  box-shadow:
    0 7px 16px
    rgba(75, 61, 56, 0.07);

  color: #665955;

  font-size: 1.65rem;
  font-weight: 900;

  cursor: pointer;

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}


.turn-choice-button span {
  font-size: 0.66rem;
  font-weight: 800;

  letter-spacing: 0.03em;
}


.turn-choice-button:hover {
  background: #f8fbf4;

  box-shadow:
    0 10px 20px
    rgba(75, 61, 56, 0.1);

  transform:
    translateY(-2px);
}


.turn-choice-button:active {
  transform:
    scale(0.93);
}



/* =====================================================
   VISUALLY PAUSE THE ROAD
===================================================== */

.road.paused .road-object {
  animation-play-state:
    paused !important;
}


.road.paused .road-line {
  opacity: 0.6;
}


.road.paused .car-player {
  transform:
    translateX(-50%)
    scale(0.96);
}



/* =====================================================
   BLINKER BUTTON ACTIVE
===================================================== */

.car-blinker.active {
  background: #f5d361;

  color: #68531c;

  box-shadow:
    0 0 0 4px
    rgba(245, 211, 97, 0.18),
    0 5px 12px
    rgba(80, 65, 58, 0.06);
}



/* =====================================================
   FAIL SCREEN
===================================================== */

.car-failed p {
  max-width: 430px;
}


.car-retry-button {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.car-retry-button:active {
  transform: scale(0.95);
}



/* =====================================================
   LETTER FINAL LINE
===================================================== */

.letter-final {
  margin-top:
    38px !important;

  color:
    #934d61 !important;

  font-size:
    clamp(
      1.55rem,
      4.5vw,
      1.9rem
    ) !important;

  font-weight: 600;
}



/* =====================================================
   NEW ENDING
===================================================== */

.birthday-ending h2 {
  width:
    min(
      680px,
      100%
    );

  margin:
    0 auto;

  font-size:
    clamp(
      2.6rem,
      9vw,
      4.8rem
    );

  line-height: 1.08;
}



/* =====================================================
   PHONE TURN MENU
===================================================== */

@media (max-width: 520px) {

  .turn-choice {
    padding: 13px;
  }


  .turn-choice-card {
    padding:
      21px 12px
      16px;

    border-radius: 22px;
  }


  .turn-choice-praise {
    font-size: 1.18rem;
  }


  .turn-choice-buttons {
    gap: 6px;
  }


  .turn-choice-button {
    min-height: 72px;

    border-radius: 14px;

    font-size: 1.45rem;
  }


  .turn-choice-button span {
    font-size: 0.61rem;
  }


  .birthday-ending h2 {
    font-size:
      clamp(
        2.3rem,
        10vw,
        3.6rem
      );
  }

}