/* ════════════════════════════════════════════════════════════
   SUDEMU'YA 💌 — stationery world: paper, ink, washi, polaroid
   ════════════════════════════════════════════════════════════ */

:root {
  --paper: #FFFBF7;        /* letter paper           */
  --blush: #FBE9F0;        /* room the letter sits in */
  --blush-deep: #F6D7E4;
  --env-pink: #F6BED4;     /* envelope paper          */
  --env-pink-deep: #F2AFC9;
  --rose: #E8557D;         /* accent                  */
  --rose-deep: #C13A62;    /* pressed / headings      */
  --ink: #4A3B40;          /* warm plum ink, not black*/
  --ink-soft: #7A6A70;
  --eevee: #C98850;        /* washi tape brown        */
  --shadow-paper: 0 12px 32px rgba(193, 58, 98, .13);
  --font-hand: 'Caveat', cursive;
  --font-body: 'Nunito', sans-serif;
  --font-pixel: 'Press Start 2P', monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--blush);
  background-image: radial-gradient(rgba(232, 85, 125, .06) 1px, transparent 1.6px);
  background-size: 24px 24px;
}

img { max-width: 100%; }

button { font: inherit; }

/* ---- acts ---------------------------------------------------- */

.act {
  min-height: 100vh;
  min-height: 100svh;
  animation: act-in .55s ease both;
}

/* author display rules (flex etc.) must not defeat the hidden attribute */
[hidden] { display: none !important; }

.act--leaving {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .45s ease, transform .45s ease;
}

@keyframes act-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ════════════ ACT 1 · ZARF ════════════ */

#act-envelope {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px;
}

.env-to {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 2.8rem;
  color: var(--rose-deep);
  transform: rotate(-2deg);
}

.env-hint {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-soft);
}

.envelope {
  position: relative;
  width: min(320px, 84vw);
  aspect-ratio: 3 / 2;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
  animation: env-float 3.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 22px rgba(193, 58, 98, .18));
}

.envelope:focus-visible { outline: 3px solid var(--rose); outline-offset: 6px; border-radius: 14px; }

.envelope.is-open { animation: none; }

@keyframes env-float {
  from { transform: translateY(-5px); }
  to   { transform: translateY(6px); }
}

.env-back {
  position: absolute; inset: 0;
  background: var(--env-pink-deep);
  border-radius: 12px;
}

.env-letter {
  position: absolute;
  left: 5%; right: 5%; top: 5%; bottom: 8%;
  background: var(--paper);
  border-radius: 8px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  transition: transform .7s cubic-bezier(.34, 1.2, .5, 1);
}

.env-letter-heart { color: var(--rose); font-size: 1.15rem; }

.envelope.is-letter-out .env-letter { transform: translateY(-58%); }

.env-front {
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, #F9CBDD, var(--env-pink));
  clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%);
  border-radius: 12px;
}

.env-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 58%;
  z-index: 4;
  background: linear-gradient(180deg, var(--env-pink-deep), var(--env-pink));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 12px 12px 0 0;
  transform-origin: top center;
  transition: transform .75s cubic-bezier(.6, 0, .3, 1), z-index 0s .38s;
}

.envelope.is-open .env-flap {
  transform: rotateX(180deg);
  z-index: 1;
}

.env-seal {
  position: absolute;
  z-index: 5;
  top: calc(58% - 26px);
  left: 50%;
  width: 50px; height: 50px;
  margin-left: -25px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #DE5E88, var(--rose-deep) 70%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), 0 3px 8px rgba(193, 58, 98, .4);
  color: #FFE9F1;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transform: rotate(-6deg);
  transition: transform .32s ease, opacity .32s ease;
}

.env-seal-heart { font-size: .8rem; margin-top: 10px; }

.envelope.is-open .env-seal {
  transform: scale(0) rotate(50deg);
  opacity: 0;
}

/* ════════════ ACT 2 · MEKTUP ════════════ */

#act-letter { padding: 72px 16px 80px; }

.paper {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow-paper);
  padding: 52px 24px 40px;
  font-size: 1.03rem;
  line-height: 1.75;
}

.paper p { margin: 0 0 1.15em; }

.washi {
  position: absolute;
  top: -14px; left: 50%;
  width: 140px; height: 30px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: repeating-linear-gradient(45deg,
    rgba(232, 85, 125, .72) 0 10px,
    rgba(246, 169, 196, .72) 10px 20px);
  border-radius: 3px;
  z-index: 2;
}

.eevee-peek {
  position: absolute;
  top: -57px; right: 20px;
  width: 76px;
  image-rendering: pixelated;
}

.letter-heading {
  margin: 0 0 .6em;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 3rem);
  color: var(--rose-deep);
  line-height: 1.1;
}

/* polaroids */

.polaroid {
  width: min(240px, 72%);
  margin: 10px auto 24px;
  background: #fff;
  padding: 10px 10px 12px;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(74, 59, 64, .15);
  position: relative;
}

.polaroid::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 76px; height: 24px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(201, 136, 80, .30);
  border-radius: 2px;
}

.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}

.polaroid figcaption {
  margin-top: 7px;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  text-align: center;
  color: var(--ink-soft);
}

.polaroid--left  { transform: rotate(-3deg); }
.polaroid--right { transform: rotate(2.4deg); }

@media (min-width: 720px) {
  .paper { padding: 56px 56px 44px; overflow: visible; }
  .polaroid--left  { float: left;  margin: 8px 24px 14px -84px; }
  .polaroid--right { float: right; margin: 8px -84px 14px 24px; }
  .letter-end { clear: both; }
}

.letter-end { text-align: center; padding-top: 18px; }

.hearts-divider {
  color: var(--rose);
  font-size: 1.25rem;
  letter-spacing: .5em;
  margin-bottom: 1.4em !important;
}

.surprise-line {
  font-family: var(--font-hand);
  font-size: 1.7rem;
  color: var(--rose-deep);
  margin-bottom: 1.2em !important;
}

/* pixel button — chunky game-boy press */

.pixel-btn {
  font-family: var(--font-pixel);
  font-size: .78rem;
  color: #fff;
  background: var(--rose);
  border: 0;
  border-radius: 10px;
  padding: 17px 22px 15px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--rose-deep);
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}

.pixel-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--rose-deep);
}

.pixel-btn:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 4px; }

.text-btn {
  display: block;
  margin: 22px auto 0;
  background: none;
  border: 0;
  font-weight: 700;
  font-size: .98rem;
  color: var(--rose-deep);
  text-decoration: underline dotted;
  cursor: pointer;
  padding: 10px;
}

/* ════════════ ACT 3 · HAFIZA OYUNU ════════════ */

#act-game {
  max-width: 600px;
  margin: 0 auto;
  padding: 46px 14px 64px;
}

.game-header { text-align: center; }

.pixel-eyebrow {
  font-family: var(--font-pixel);
  font-size: .58rem;
  letter-spacing: .18em;
  color: var(--rose);
  margin: 0 0 10px;
}

.game-title {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--ink);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.card {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 600px;
  -webkit-tap-highlight-color: transparent;
  border-radius: 12px;
}

.card:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

.card.is-matched { cursor: default; animation: match-pop .45s ease; }

@keyframes match-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4, .2, .2, 1);
  border-radius: 12px;
}

.card.is-flipped .card-inner,
.card.is-matched .card-inner { transform: rotateY(180deg); }

.card.is-matched .card-inner {
  box-shadow: 0 0 0 3px var(--rose), 0 6px 18px rgba(232, 85, 125, .35);
}

.card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.card-back {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='27' fill='%23FFFFFF' stroke='%23E8557D' stroke-width='4'/%3E%3Cpath d='M5 32 A27 27 0 0 1 59 32 Z' fill='%23E8557D'/%3E%3Ccircle cx='32' cy='32' r='10.5' fill='%23FFFFFF' stroke='%23E8557D' stroke-width='4'/%3E%3Cpath d='M32 38.5 c-4.6-3.7-7-5.8-7-8.8 a3.9 3.9 0 0 1 7-2.2 a3.9 3.9 0 0 1 7 2.2 c0 3-2.4 5.1-7 8.8 z' fill='%23E8557D'/%3E%3C/svg%3E")
    center / 46% no-repeat,
    linear-gradient(160deg, #FDEFF5, var(--blush-deep));
  border: 2.5px solid #fff;
  box-shadow: 0 4px 12px rgba(193, 58, 98, .10);
}

.card-front { transform: rotateY(180deg); background: #fff; }

.card-front img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* joker: the mask photobombs the deck */

.card.is-joker-open { cursor: default; animation: match-pop .45s ease; }

.card.is-joker-open .card-inner {
  box-shadow: 0 0 0 3px var(--eevee), 0 6px 18px rgba(201, 136, 80, .4);
}

/* match toast */

.match-toast {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  margin: 0;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(193, 58, 98, .25);
  padding: 9px 24px;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--rose-deep);
  text-align: center;
  line-height: 1.15;
  width: max-content;
  max-width: min(92vw, 480px);
}

.match-toast.pop { animation: toast-pop .32s cubic-bezier(.34, 1.4, .5, 1); }

@keyframes toast-pop {
  from { transform: translateX(-50%) scale(.6); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* win overlay */

.win-overlay {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255, 251, 247, .93);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: act-in .4s ease;
  text-align: center;
  padding: 24px;
}

.win-title {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  color: var(--rose-deep);
  text-shadow: 3px 3px 0 var(--blush-deep);
}

.win-sub {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ════════════ ACT 4 · FİNAL ════════════ */

#act-finale {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 110px 18px 48px;
  background: linear-gradient(180deg, var(--blush), var(--blush-deep));
}

#confetti {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.speech-bubble {
  font-family: var(--font-pixel);
  font-size: .6rem;
  color: var(--rose-deep);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(193, 58, 98, .25);
  position: relative;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

/* the chase: Ali (MUUU!!!) hunts Sudemu left→right, then she (BOOO!!!) hunts him back */

.chase {
  position: absolute;
  left: 0; right: 0;
  top: 4%;
  height: 170px;
  pointer-events: none;
  z-index: 1;
}

.chase-runner {
  position: absolute;
  bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  will-change: transform;
}

.chase-runner img {
  width: 92px; height: 92px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(193, 58, 98, .3);
  animation: chase-bob .45s ease-in-out infinite alternate;
}

.chase-bubble { font-size: .55rem; padding: 6px 8px; }

@keyframes chase-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

.chase-sude { animation: chase-sude-run 16s linear 2s infinite; transform: translateX(-200px); }
.chase-ali  { animation: chase-ali-run  16s linear 2s infinite; transform: translateX(-440px); }

@keyframes chase-sude-run {
  0%   { transform: translateX(-200px) rotate(5deg); }
  24%  { transform: translateX(calc(100vw + 300px)) rotate(5deg); }
  44%  { transform: translateX(calc(100vw + 300px)) rotate(-5deg); }
  68%  { transform: translateX(-200px) rotate(-5deg); }
  100% { transform: translateX(-200px) rotate(-5deg); }
}

@keyframes chase-ali-run {
  0%   { transform: translateX(-440px) rotate(5deg); }
  24%  { transform: translateX(calc(100vw + 60px)) rotate(5deg); }
  44%  { transform: translateX(calc(100vw + 60px)) rotate(-5deg); }
  68%  { transform: translateX(-440px) rotate(-5deg); }
  100% { transform: translateX(-440px) rotate(-5deg); }
}

.finale-title {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: 1.08;
  color: var(--rose-deep);
  position: relative;
  z-index: 2;
}

.finale-name { font-size: 1.22em; color: var(--rose); }

.shiny-sparkle {
  position: relative;
  z-index: 2;
  font-size: 1.35rem;
  margin-bottom: -12px;
  animation: sparkle-twinkle .9s ease-in-out infinite alternate;
}

@keyframes sparkle-twinkle {
  from { opacity: .55; transform: scale(.85) rotate(-8deg); }
  to   { opacity: 1;   transform: scale(1.1) rotate(8deg); }
}

.eevee-dance {
  width: 84px;
  image-rendering: pixelated;
  animation: eevee-bounce .9s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

@keyframes eevee-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}

.paper--finale {
  padding: 26px 26px 20px;
  max-width: 440px;
  z-index: 2;
}

.signature {
  font-family: var(--font-hand);
  font-size: 1.7rem;
  color: var(--rose-deep);
  text-align: right;
  margin-bottom: 0 !important;
}

#act-finale .text-btn { position: relative; z-index: 2; }

/* ---- reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .chase { display: none; }
}