/* ============ TOKENS ============ */
:root{
  --cream:#F0E3C1;
  --gold:#FFC94D;
  --deep-red:#9B251B;
  --deep-red-2:#6E1712;
  --ember:#FF6B35;
  --near-black:#120303;
  --ink:#3a1208;
  --font-display-ar:'Aref Ruqaa', serif;
  --font-ui-ar:'Reem Kufi', sans-serif;
  --font-display-en:'Great Vibes', cursive;
  --font-ui-en:'Cormorant Garamond', serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:var(--deep-red);
  font-family:var(--font-ui-ar);
  color:var(--ink);
  user-select:none;
}
body[data-lang="en"]{ font-family:var(--font-ui-en); direction:ltr; }
body[data-lang="ar"]{ font-family:var(--font-ui-ar); direction:rtl; }

button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* language toggle */
.lang-toggle{
  position:fixed; top:14px; z-index:50;
  inset-inline-end:14px;
  background:rgba(240,227,193,0.15);
  border:1px solid rgba(255,201,77,0.55);
  color:var(--gold);
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:.5px;
  backdrop-filter:blur(6px);
  transition:transform .2s ease, background .2s ease;
}
.lang-toggle:hover{ transform:scale(1.06); background:rgba(240,227,193,0.28); }

/* language visibility */
[data-ar],[data-en]{ }
body[data-lang="ar"] [data-en-only]{ display:none !important; }
body[data-lang="en"] [data-ar-only]{ display:none !important; }

/* ============ APP / SCREENS ============ */
#app{ position:relative; width:100vw; height:100vh; }
.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  opacity:0; pointer-events:none;
  transition:opacity .7s ease;
  overflow:hidden;
}
.screen.active{ opacity:1; pointer-events:auto; }

/* ============ SCREEN 1: ENVELOPE ============ */
#screen-envelope{ background:radial-gradient(ellipse at 50% 20%, var(--deep-red-2), var(--deep-red) 70%); }

.embers{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ember-particle{
  position:absolute; bottom:-10px;
  width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, #FFF4B0 0%, #FFE88A 25%, #FFD86B 50%, #FFB347 75%, transparent 100%);
  box-shadow:0 0 8px 2px rgba(255,150,60,0.7);
  animation-name:rise; animation-timing-function:ease-in; animation-iteration-count:infinite;
  opacity:0;
}
@keyframes rise{
  0%{ transform:translate(0,0) scale(0.4); opacity:0; }
  8%{ opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translate(var(--driftX,20px), calc(-1 * var(--riseHeight, 60vh))) scale(0.8); opacity:0; }
}

.envelope-wrap{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; }

.stars-ring{ position:absolute; inset:-40px; pointer-events:none; z-index:1; }
.stars-ring.soft{ opacity:.6; }
.star-el{
  position:absolute; color:var(--gold);
  font-size:14px;
  animation:twinkle 2.6s ease-in-out infinite, spin-slow 9s linear infinite;
  filter:drop-shadow(0 0 4px var(--gold));
}
@keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(.7);} 50%{ opacity:1; transform:scale(1.15);} }
@keyframes spin-slow{ from{ transform:rotate(0deg) translateY(0);} to{ transform:rotate(360deg) translateY(0);} }

.message-box{
  position:relative; z-index:2;
  width:min(78vw, 320px);
  padding:38px 26px 30px;
  border-radius:22px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  border:1px solid rgba(255,201,77,0.6);
  box-shadow:0 0 0 1px rgba(255,201,77,0.15), 0 20px 60px rgba(0,0,0,0.45), 0 0 40px rgba(255,201,77,0.15);
  animation:wave 5s ease-in-out infinite;
  transform-origin:center;
  transition:transform .15s ease;
}
.message-box:active{ transform:scale(.97); }
.message-box .glass{
  position:absolute; inset:0; border-radius:22px;
  background:var(--cream);
  opacity:0.92;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:-1;
}
@keyframes wave{
  0%{ transform:translate(0,0);}
  25%{ transform:translate(10px,-6px);}
  50%{ transform:translate(0,-10px);}
  75%{ transform:translate(-10px,-6px);}
  100%{ transform:translate(0,0);}
}
.message-box::before{
  content:"";
  position:absolute; inset:-18px;
  border-radius:34px;
  background:rgba(240,227,193,0.35);
  filter:blur(18px);
  z-index:-2;
}
.message-icon{ font-size:34px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.message-text{
  font-family:var(--font-display-ar); font-size:22px; line-height:1.5; color:var(--deep-red-2);
}
body[data-lang="en"] .message-text{ font-family:var(--font-display-en); font-size:30px; }

.tap-hint{
  font-family:var(--font-display-en);
  font-size:20px; letter-spacing:.5px; color:#8a5a12;
  opacity:0; height:0; overflow:hidden;
  transition:opacity .4s ease;
}
.tap-hint.show{
  opacity:1; height:auto;
  animation:pulseHint 1.6s ease-in-out infinite;
}
@keyframes pulseHint{ 0%,100%{ opacity:.55;} 50%{ opacity:1;} }

/* ============ SCREEN 2 : QUESTION ============ */
#screen-question{ background:radial-gradient(ellipse at 50% 30%, var(--deep-red-2), var(--deep-red) 75%); }
.question-card{
  position:relative; z-index:2;
  width:min(84vw, 380px);
  background:var(--cream);
  border-radius:24px;
  padding:40px 24px;
  text-align:center;
  border:1px solid rgba(255,201,77,0.6);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.question-text{
  font-family:var(--font-display-ar); font-size:24px; color:var(--deep-red-2); margin:0 0 26px;
  line-height:1.6;
}
body[data-lang="en"] .question-text{ font-family:var(--font-display-en); font-size:32px; }

.question-buttons{ display:flex; flex-direction:column; gap:14px; }
.btn{
  padding:14px 20px; border-radius:14px; font-size:16px; font-weight:600;
  transition:transform .15s ease, filter .15s ease;
}
.btn:active{ transform:scale(.96); }
.btn-yes{ background:var(--deep-red); color:var(--cream); box-shadow:0 8px 20px rgba(155,37,27,0.35); }
.btn-yes:hover{ filter:brightness(1.1); }
.btn-no{ background:transparent; color:var(--deep-red-2); border:1.5px solid var(--deep-red); }

/* ============ SCREEN 3 : REJECT ============ */
#screen-reject{ background:var(--near-black); }
.reject-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(155,37,27,0.35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,201,77,0.12), transparent 45%);
}
.sticker-cats{
  position:absolute; top:6%; z-index:1;
  display:flex; justify-content:center; align-items:flex-end;
  gap:10px; width:100%; padding:0 12px;
}
.sticker-cat{
  width:min(28vw, 110px);
  height:auto;
  object-fit:contain;
  border-radius:12px;
  animation:tremble 0.28s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.cat-fallback{ font-size:64px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45)); animation:tremble 0.28s ease-in-out infinite; }
@keyframes tremble{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  20%{ transform:translate(-2px,1px) rotate(-3deg); }
  40%{ transform:translate(2px,-1px) rotate(3deg); }
  60%{ transform:translate(-1px,2px) rotate(-2deg); }
  80%{ transform:translate(1px,-2px) rotate(2deg); }
}

.reject-card{
  position:relative; z-index:2;
  width:min(84vw,380px);
  text-align:center;
  background:rgba(240,227,193,0.06);
  border:1px solid rgba(255,201,77,0.35);
  border-radius:22px;
  padding:34px 22px;
  backdrop-filter:blur(4px);
}
.reject-buttons{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.btn-sad{ background:transparent; color:var(--gold); border:1.5px solid rgba(255,201,77,0.5); padding:12px 20px; border-radius:14px; font-weight:600; }
.reject-text{
  color:var(--gold); font-family:var(--font-display-ar); font-size:21px; line-height:1.7; margin:0 0 24px;
  text-shadow:0 0 12px rgba(255,201,77,0.35);
}
body[data-lang="en"] .reject-text{ font-family:var(--font-display-en); font-size:28px; }
.btn-again{ background:var(--gold); color:var(--near-black); padding:14px 22px; border-radius:14px; font-weight:700; }

/* ============ SCREEN 4 : BOOK ============ */
#screen-book{ background:linear-gradient(165deg, var(--deep-red-2) 0%, var(--deep-red) 55%, #4a1008 100%); }
.book-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; z-index:2; }
.book{
  position:relative;
  width:min(78vw, 300px); height:min(62vh, 420px);
  perspective:1600px;
  transform-style:preserve-3d;
}
.book::before{
  content:"";
  position:absolute;
  inset:4px -4px -4px 4px;
  background:var(--deep-red-2);
  border-radius:14px;
  z-index:-1;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.book-page{
  position:absolute; inset:0;
  background:var(--cream);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.28), inset -10px 0 16px -12px rgba(0,0,0,0.2);
  overflow:hidden;
  transform-origin:right center;
  transition:transform .65s cubic-bezier(.4,.1,.2,1), opacity .35s ease;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.book-page.is-flipped{
  pointer-events:none;
}
.book-page.is-current{
  pointer-events:auto;
  animation:pageReveal .4s ease;
}
@keyframes pageReveal{
  from{ opacity:.7; }
  to{ opacity:1; }
}
body[data-lang="en"] .book-page,
body[dir="ltr"] .book-page{
  transform-origin:left center;
  box-shadow:0 6px 18px rgba(0,0,0,0.28), inset 10px 0 16px -12px rgba(0,0,0,0.2);
}

.book-page img{ width:100%; height:100%; object-fit:cover; display:block; }
.book-page.cover{
  flex-direction:column; gap:14px; padding:24px; text-align:center;
  background:linear-gradient(160deg, var(--deep-red), var(--deep-red-2));
  color:var(--gold);
}
.book-page.cover .cover-title{ font-family:var(--font-display-ar); font-size:26px; line-height:1.6; }
body[data-lang="en"] .book-page.cover .cover-title{ font-family:var(--font-display-en); font-size:34px; }
.book-page.cover .cover-sub{ font-size:13px; opacity:.75; letter-spacing:1px; }

.book-page .no-photo{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, #e9d9ab, #e9d9ab 10px, #ecdfb4 10px, #ecdfb4 20px);
  color:var(--deep-red-2); font-size:14px; text-align:center; padding:20px;
}

.book-controls{ display:flex; align-items:center; gap:22px; }
.book-arrow{
  width:44px; height:44px; border-radius:50%;
  background:var(--cream); color:var(--deep-red-2);
  font-size:22px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.book-arrow:active{ transform:scale(.92); }
.book-page-count{ color:var(--cream); font-size:14px; letter-spacing:1px; min-width:54px; text-align:center; }

/* heart sticker burst */
.heart-pop{
  position:fixed; pointer-events:none; z-index:80;
  font-size:22px;
  animation:heartPop 1s ease-out forwards;
}
@keyframes heartPop{
  0%{ transform:translate(-50%,-50%) scale(.3) rotate(0deg); opacity:0; filter:drop-shadow(0 0 0 var(--gold));}
  15%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx,0px)), calc(-50% - 90px)) scale(1.1) rotate(var(--rot,15deg)); opacity:0; filter:drop-shadow(0 0 10px var(--gold));}
}

/* ============ SCREEN 5 : END ============ */
#screen-end{ background:radial-gradient(ellipse at 50% 25%, var(--deep-red-2), var(--near-black) 85%); }
.end-card{
  position:relative; z-index:2; width:min(84vw,380px); text-align:center;
  background:var(--cream); border-radius:24px; padding:42px 24px;
  border:1px solid rgba(255,201,77,0.6); box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.end-text{
  font-family:var(--font-display-ar); font-size:23px; color:var(--deep-red-2); line-height:1.7; margin:0 0 26px;
}
body[data-lang="en"] .end-text{ font-family:var(--font-display-en); font-size:30px; }
.btn-replay{ background:var(--deep-red); color:var(--cream); padding:14px 22px; border-radius:14px; font-weight:600; }

/* ============ RESPONSIVE / MOTION ============ */

@media (max-width:360px){
  .message-text{ font-size:19px; }
  .question-text{ font-size:20px; }
}