/* styles.css — Pink Fuzzy Wool / Teddy Premium */

:root{
  --bg1:#fff0f7;
  --bg2:#ffe4f1;
  --bg3:#ffd0e7;

  --ink:#23161f;
  --muted:#6a3f56;

  --pink:#ff4fa3;
  --pink2:#ff86c2;
  --cream:#fff7fb;

  --glass: rgba(255,255,255,.56);
  --stroke: rgba(255, 79, 163, .22);

  --shadow: 0 18px 55px rgba(25, 8, 18, .18);
  --shadow2: 0 14px 40px rgba(255, 79, 163, .18);

  --radius: 22px;
  --radius2: 28px;

  --ease: cubic-bezier(.2,.85,.12,1);

  /* ✅ Texture: ضع صورة صوف هنا (اختياري بس هيفرق جامد) */
  --wool-photo: url("imgphoto.jpg");

  /* ✅ Fallback wool texture (inline svg) */
  --wool-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 0.92 0 0 0  0 0 0.98 0 0  0 0 0 .55 0'/%3E%3CfeGaussianBlur stdDeviation='.25'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--ink);
  font-family:"Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;

  /* ✅ Felt/Wool background stack */
  background:
    var(--wool-photo),
    var(--wool-svg),
    radial-gradient(1100px 700px at 18% 10%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(900px 640px at 88% 12%, rgba(255,79,163,.20), transparent 62%),
    radial-gradient(900px 760px at 55% 95%, rgba(255,208,231,.85), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 40%, var(--bg3));

  background-size:
    720px 720px,
    360px 360px,
    auto, auto, auto, auto;

  background-repeat:
    repeat,
    repeat,
    no-repeat, no-repeat, no-repeat, no-repeat;

  background-position:
    center,
    center,
    center, center, center, center;

  /* blend gives real fabric vibe */
  background-blend-mode:
    soft-light,
    soft-light,
    normal, normal, normal, normal;

  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* Soft wool haze */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 340px at 15% 20%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(520px 360px at 85% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 420px at 75% 85%, rgba(255,255,255,.16), transparent 65%);
  opacity:.55;
  filter: blur(8px);
  mix-blend-mode: screen;
}

/* Tiny fibers pass on whole page */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(35deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 2px 8px),
    repeating-linear-gradient(-35deg, rgba(0,0,0,.03) 0 1px, rgba(0,0,0,0) 2px 10px);
  opacity:.32;
  mix-blend-mode: overlay;
}

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

.container{
  width:min(980px, 100%);
  margin:0 auto;
  padding:20px 16px 36px;
  position:relative;
  z-index:1;
}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}

.names{
  font-family:"Aref Ruqaa Ink", serif;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.15;
  font-size: clamp(28px, 7vw, 48px);
  color:#2a1720;
  text-shadow:
    0 12px 28px rgba(255,79,163,.18),
    0 2px 0 rgba(255,255,255,.55);
}

.subtitle{
  color:var(--muted);
  font-size: 13px;
  opacity:.92;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:
    var(--wool-svg),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255, 235, 246, .78));
  background-size: 220px 220px, auto;
  background-blend-mode: overlay, normal;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 16px 34px rgba(20, 5, 12, .12),
    0 6px 0 rgba(181, 75, 128, .10),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -12px 18px rgba(181, 75, 128, .10);
}

.spark{
  width:16px; height:16px;
  display:inline-block;
  background:
    radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 50%, transparent 70%),
    radial-gradient(circle at 60% 60%, rgba(255,79,163,.9), transparent 60%);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(255,79,163,.10),
    0 12px 22px rgba(181, 75, 128, .18);
}

.cta{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

.btn{
  border:0;
  cursor:pointer;
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  user-select:none;
  position:relative;
  overflow:hidden;

  background:
    var(--wool-svg),
    radial-gradient(160px 90px at 25% 20%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ff7db7, #ff4fa3);

  background-size: 260px 260px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  border: 1px solid rgba(255,255,255,.58);
  box-shadow:
    0 18px 42px rgba(255,79,163,.22),
    0 6px 0 rgba(181, 75, 128, .18),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -12px 18px rgba(90, 20, 50, .16);

  transition: transform .18s ease, filter .18s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-60% -30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%);
  transform: translateX(-40%) rotate(18deg);
  opacity:.6;
  transition: transform .8s var(--ease);
  pointer-events:none;
}
.btn:hover::before{ transform: translateX(35%) rotate(18deg); }

.btn:active{
  transform: translateY(1px) scale(.985);
}

.btn:focus-visible{
  outline: 3px solid rgba(255,79,163,.35);
  outline-offset: 3px;
}
.btn[disabled]{ cursor:not-allowed; }

.btn.secondary{
  background:
    var(--wool-svg),
    radial-gradient(160px 90px at 25% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255, 235, 246, .78));

  background-size: 260px 260px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  color: #2a1720;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 16px 34px rgba(20, 5, 12, .12),
    0 6px 0 rgba(181, 75, 128, .12),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -12px 18px rgba(181, 75, 128, .10);
  font-weight: 800;
}

.icon{ width:18px; height:18px; display:inline-block; }

.grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* =============================
   CARD: Plush + Wool + Threads
   ============================= */
.card{
  position:relative;
  overflow:hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.66);

  background:
    var(--wool-svg),
    radial-gradient(900px 320px at 20% 0%, rgba(255,255,255,.42), transparent 55%),
    linear-gradient(180deg, rgba(255, 236, 246, .88), rgba(255, 214, 234, .78));

  background-size: 340px 340px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  box-shadow:
    0 30px 80px rgba(10, 3, 7, .18),
    0 12px 0 rgba(181, 75, 128, .16),
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -26px 34px rgba(181, 75, 128, .14);
}

/* wool fibers layer */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    repeating-linear-gradient(35deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 2px 8px),
    repeating-linear-gradient(-35deg, rgba(0,0,0,.04) 0 1px, rgba(0,0,0,0) 2px 10px);
  opacity:.72;
  mix-blend-mode: overlay;
}

/* ✅ frayed threads coming out of the card edges */
.card::after{
  content:"";
  position:absolute;
  inset:-16px; /* خارج الكارت */
  pointer-events:none;
  border-radius: 40px;

  background:
    /* long threads */
    repeating-linear-gradient(12deg, rgba(255,255,255,.22) 0 1px, rgba(255,255,255,0) 2px 9px),
    repeating-linear-gradient(-18deg, rgba(0,0,0,.06) 0 1px, rgba(0,0,0,0) 2px 12px);

  opacity:.55;
  filter: blur(.6px);

  /* mask: تظهر فقط عند الحواف */
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 22px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 22px));
}

/* stitched ring */
.card-inner{
  position:relative;
  z-index:1;
  padding: 18px 16px;
}
.card-inner::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 26px;
  pointer-events:none;
  border: 2px dotted rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(181,75,128,.18);
  opacity:.82;
}
.card-inner::after{
  content:"";
  position:absolute;
  inset: 24px;
  border-radius: 22px;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(181,75,128,.12) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 22%, rgba(181,75,128,.12) 0 6px, transparent 7px),
    radial-gradient(circle at 18% 78%, rgba(181,75,128,.10) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 78%, rgba(181,75,128,.10) 0 6px, transparent 7px);
  opacity:.65;
}

.corner{
  position:absolute;
  width: 120px;
  height: 120px;
  opacity:.22;
  filter: drop-shadow(0 18px 18px rgba(255,79,163,.10));
  pointer-events:none;
  z-index:0;
}
.corner.tr{ top:-22px; right:-22px; transform: rotate(10deg); }
.corner.bl{ bottom:-22px; left:-22px; transform: rotate(-15deg); }

.stage{
  padding: 18px 16px 20px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items:center;
  justify-content:center;
  min-height: 350px;
}

.hint{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  opacity:.92;
  text-align:center;
  line-height:1.75;
}

/* =============================
   ENVELOPE: Plush + Stitch + Wool
   ============================= */
.envelope-wrap{
  width: min(390px, 96%);
  height: 230px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateZ(0);
}

.envelope{
  width: 100%;
  height: 100%;
  position:relative;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform .65s var(--ease);
  cursor:pointer;

  box-shadow:
    0 30px 78px rgba(20, 5, 12, .18),
    0 12px 0 rgba(181, 75, 128, .14);
}

/* extra stitch border on envelope */
.envelope::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events:none;
  border: 2px dotted rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(181,75,128,.18);
  opacity:.75;
}

.env-back{
  position:absolute;
  inset:0;
  border-radius: 22px;

  background:
    var(--wool-svg),
    radial-gradient(500px 180px at 18% 10%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, #ffeef7, #ffd7ea 52%, #ffc4df);

  background-size: 300px 300px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  border: 1px solid rgba(255,255,255,.62);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -18px 28px rgba(181,75,128,.10);
}

.env-front{ position:absolute; inset:0; border-radius: 22px; pointer-events:none; }

.env-bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 62%;
  border-radius: 0 0 22px 22px;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,79,163,.10) 51%),
    linear-gradient(-135deg, transparent 50%, rgba(255,79,163,.10) 51%),
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0));
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
  border-top: 1px solid rgba(255,79,163,.18);
}

.env-sides{
  position:absolute;
  inset:0;
  border-radius:22px;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 50% 62%, 0 100%);
  background: linear-gradient(180deg, rgba(255,134,194,.14), rgba(255,255,255,0));
  opacity:.95;
}

.env-flap{
  position:absolute;
  left:0; right:0; top:0;
  height: 60%;
  transform-origin: top;
  transform: rotateX(0deg);
  transition: transform .7s var(--ease);
  border-radius: 22px 22px 12px 12px;

  background:
    var(--wool-svg),
    radial-gradient(500px 180px at 18% 10%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, #fff, #ffe4f1 34%, #ffd2e7);

  background-size: 280px 280px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  clip-path: polygon(0 0, 100% 0, 50% 92%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 30px rgba(25,8,18,.08);
  backface-visibility: hidden;
}

.seal{
  position:absolute;
  left:50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background:
    var(--wool-svg),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #ff5aa8, #ff9acb);

  background-size: 220px 220px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  box-shadow:
    0 22px 48px rgba(255,79,163,.20),
    0 7px 0 rgba(181, 75, 128, .18),
    inset 0 1px 0 rgba(255,255,255,.75);

  border: 1px solid rgba(255,255,255,.65);
  display:grid;
  place-items:center;
}
.seal span{
  font-family:"Aref Ruqaa Ink", serif;
  font-size: 22px;
  color:#fff;
  text-shadow: 0 8px 18px rgba(25,8,18,.18);
  transform: translateY(1px);
}

/* paper preview */
.paper{
  position:absolute;
  width: 86%;
  height: 84%;
  bottom: 10px;
  border-radius: 16px;
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(180deg, #fff, #fff7fb 55%, #fff0f8);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 20px 44px rgba(20, 5, 12, .14),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform: translateY(30px);
  opacity: 0;
  transition: transform .72s var(--ease), opacity .35s ease;
  overflow:hidden;
}
.paper::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(500px 220px at 20% 0%, rgba(255,134,194,.20), transparent 55%),
    radial-gradient(520px 260px at 90% 10%, rgba(255,79,163,.14), transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.paper-inner{
  position:relative;
  z-index:1;
  padding: 14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}
.paper-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.2px;
  opacity:.92;
}

.mini-photo{
  width: 74px;
  height: 74px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.72);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3CradialGradient id='g' cx='30%25' cy='25%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='55%25' stop-color='%23ffd0e7'/%3E%3Cstop offset='100%25' stop-color='%23ff86c2'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='240' rx='34' fill='url(%23g)'/%3E%3Cpath d='M58 168c20-40 50-60 78-60s58 20 78 60' fill='none' stroke='%23ffffff' stroke-width='14' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M82 92c0-18 14-32 32-32s32 14 32 32-14 32-32 32-32-14-32-32z' fill='%23ffffff' opacity='.85'/%3E%3Cpath d='M108 92c0-11 9-20 20-20s20 9 20 20-9 20-20 20-20-9-20-20z' fill='%23ff4fa3' opacity='.45'/%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
  box-shadow: 0 16px 26px rgba(25,8,18,.12);
  flex: 0 0 auto;
}

.paper-lines{ flex:1; display:flex; flex-direction:column; gap:8px; padding-top: 4px; }
.line{ height: 10px; border-radius: 10px; background: rgba(181,75,128,.10); }
.line.w1{ width: 92%; }
.line.w2{ width: 76%; }
.line.w3{ width: 86%; }
.line.w4{ width: 64%; }

/* open anim */
.opened .env-flap{ transform: rotateX(160deg); }
.opened .paper{ transform: translateY(-16px); opacity: 1; }
.opened .envelope{ transform: translateY(2px); }
.opened .seal{ transform: translate(-50%, -50%) scale(.92); opacity:.92; }

/* =============================
   MODAL: Plush wool
   ============================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  z-index: 50;
}
.modal.show{ display:flex; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(20, 6, 14, .52);
  backdrop-filter: blur(18px) saturate(120%);
  opacity:0;
  transition: opacity .28s ease;
}
.modal.show .modal-backdrop{ opacity:1; }

.modal-panel{
  position:relative;
  width:min(680px, 100%);
  border-radius: 34px;
  overflow:hidden;

  background:
    var(--wool-svg),
    radial-gradient(900px 320px at 20% 0%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, rgba(255, 250, 253, .92), rgba(255, 231, 245, .86));

  background-size: 320px 320px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  border: 1px solid rgba(255,255,255,.66);
  box-shadow:
    0 34px 90px rgba(10, 3, 7, .40),
    0 10px 0 rgba(181, 75, 128, .14),
    inset 0 1px 0 rgba(255,255,255,.7);

  transform: translateY(18px) scale(.985);
  opacity:0;
  transition: transform .34s var(--ease), opacity .34s ease;
}
.modal.show .modal-panel{
  transform: translateY(0) scale(1);
  opacity:1;
}

/* modal fibers + slight fray */
.modal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    repeating-linear-gradient(35deg, rgba(255,255,255,.08) 0 1px, rgba(255,255,255,0) 2px 8px),
    repeating-linear-gradient(-35deg, rgba(0,0,0,.04) 0 1px, rgba(0,0,0,0) 2px 10px);
  opacity:.65;
  mix-blend-mode: overlay;
}
.modal-panel::after{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 26px;
  pointer-events:none;
  border: 2px dotted rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(181,75,128,.18);
  opacity:.72;
}

.modal-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 16px 16px 10px;
}

.modal-title{
  margin:0;
  font-family:"Aref Ruqaa Ink", serif;
  font-size: 26px;
  line-height:1.1;
  text-shadow: 0 12px 24px rgba(255,79,163,.14);
  color:#2a1720;
}

.modal-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.badge{
  padding: 8px 12px;
  border-radius: 999px;
  background:
    var(--wool-svg),
    rgba(255,255,255,.82);
  background-size: 220px 220px, auto;
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(255,255,255,.72);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  box-shadow:
    0 10px 22px rgba(20, 5, 12, .10),
    inset 0 1px 0 rgba(255,255,255,.85);
  white-space:nowrap;
}

.close{
  border:0;
  background:
    var(--wool-svg),
    rgba(255,255,255,.84);
  background-size: 220px 220px, auto;
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(255,255,255,.72);
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  box-shadow:
    0 14px 28px rgba(20, 5, 12, .10),
    0 5px 0 rgba(181, 75, 128, .12),
    inset 0 1px 0 rgba(255,255,255,.85);
  cursor:pointer;
}
.close:active{ transform: scale(.98); }

.modal-body{
  position:relative;
  z-index:1;
  padding: 2px 16px 14px;
}

.letter-shell{
  background:
    var(--wool-svg),
    radial-gradient(700px 260px at 20% 0%, rgba(255,255,255,.40), transparent 60%),
    linear-gradient(180deg, rgba(255, 210, 231, .55), rgba(255, 190, 220, .52));
  background-size: 320px 320px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  border: 1px solid rgba(255,255,255,.66);
  border-radius: 22px;
  padding: 14px 14px 16px;
  box-shadow:
    0 22px 52px rgba(20, 5, 12, .12),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -18px 28px rgba(181, 75, 128, .10);
  overflow:hidden;
  position:relative;
  min-height: 220px;
}

.typed{
  position:relative;
  z-index:1;
  font-size: 16px;
  line-height: 2.15;
  color: #24161f;
  white-space: pre-wrap;
  word-break: break-word;

  /* cotton paper */
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(255,255,255,.72), transparent 55%),
    linear-gradient(180deg, #ffffff, #fff9fc 55%, #fff2f8);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow:
    0 18px 40px rgba(20, 5, 12, .10),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.caret{
  display:inline-block;
  width: 10px;
  transform: translateY(2px);
  border-left: 2px solid rgba(36,22,31,.55);
  margin-right: 2px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink{ to { visibility:hidden; } }

.modal-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  padding: 12px 16px 16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.sig{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  opacity:.95;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.sig .name{
  font-family:"Aref Ruqaa Ink", serif;
  font-size: 20px;
  color: var(--pink);
  text-shadow: 0 12px 24px rgba(255,79,163,.18);
}

.next{
  display:none;
  align-items:center;
  gap:10px;
}
.next.show{ display:flex; }

.btn.small{ padding: 11px 12px; border-radius: 18px; font-size: 14px; }

#fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
}

.foot{
  margin-top: 14px;
  text-align:center;
  color: var(--muted);
  font-size: 12px;
  opacity:.92;
}

@media (min-width: 760px){
  .grid{ grid-template-columns: 1fr; }
  .stage{ min-height: 420px; }
  .modal{ align-items:center; padding: 18px; }
}

@media (prefers-reduced-motion: reduce){
  .btn, .envelope, .env-flap, .paper, .modal-backdrop, .modal-panel{ transition:none !important; }
  .caret{ animation:none !important; }
}

/* (Optional) Scroll inside typed area */
#typed{
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 4px;
  padding-right: 4px;
}
#typed::-webkit-scrollbar{ width: 0; height: 0; }



/* =========================
2) CSS (ADD ONLY)
الصق ده في آخر styles.css خالص
========================= */
.countdown{
  width: min(510px, 100%);
  margin-top: -8px;
  border-radius: 26px;
  padding: 10px 22px 10px;
  position: relative;
  overflow: hidden;
  background:
    var(--wool-photo, none),
    var(--wool-svg, none),
    radial-gradient(700px 260px at 18% 0%, rgba(255,255,255,.42), transparent 60%),
    linear-gradient(180deg, rgba(255, 250, 253, .72), rgba(255, 231, 245, .62));
  background-size: 720px 720px, 320px 320px, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-blend-mode: soft-light, overlay, screen, normal;
  border: 1px solid rgba(255,255,255,.68);
  box-shadow:
    0 18px 40px rgba(20, 5, 12, .12),
    0 7px 0 rgba(181, 75, 128, .12),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -16px 26px rgba(181, 75, 128, .10);
}

.countdown::before{
  content:"";
  position:absolute;
  inset:-14px;
  pointer-events:none;
  border-radius: 30px;

  /* خيوط طالعة من الحواف */
  background:
    repeating-linear-gradient(12deg, rgba(255,255,255,.18) 0 1px, rgba(255,255,255,0) 2px 9px),
    repeating-linear-gradient(-18deg, rgba(0,0,0,.06) 0 1px, rgba(0,0,0,0) 2px 12px);
  opacity:.42;
  filter: blur(.6px);

  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 22px), #000 calc(100% - 18px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 22px), #000 calc(100% - 18px));
}

.countdown::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events:none;
  border: 2px dotted rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(181,75,128,.16);
  opacity:.78;
}

.cd-head{
  position: relative;
  z-index: 1;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}

.cd-title{
  font-family:"Aref Ruqaa Ink", serif;
  font-size: 18px;
  color:#2a1720;
  text-shadow: 0 10px 22px rgba(255,79,163,.14);
}

.cd-date{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  opacity: .95;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(20, 5, 12, .08), inset 0 1px 0 rgba(255,255,255,.8);
  white-space: nowrap;
}

.cd-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cd-unit{
  border-radius: 18px;
  padding: 12px 10px;
  text-align:center;
  background:
    var(--wool-svg, none),
    radial-gradient(240px 120px at 20% 0%, rgba(255,255,255,.52), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255, 235, 246, .74));
  background-size: 240px 240px, auto, auto;
  background-blend-mode: overlay, screen, normal;

  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 14px 28px rgba(20, 5, 12, .10),
    0 5px 0 rgba(181, 75, 128, .12),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -12px 18px rgba(181, 75, 128, .10);
}

.cd-unit b{
  display:block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .5px;
  color:#2a1720;
  line-height: 1.05;
  will-change: transform, filter, opacity;
}

.cd-unit span{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  opacity: .95;
}

/* فليب/سفْر خفيف للأرقام عند التغيير */
.cd-flip{
  animation: cdFlip .32s cubic-bezier(.2,.85,.12,1);
}
@keyframes cdFlip{
  0%{ transform: translateY(0) rotateX(0deg); filter: blur(0); opacity:1; }
  45%{ transform: translateY(-4px) rotateX(55deg); filter: blur(.6px); opacity:.78; }
  100%{ transform: translateY(0) rotateX(0deg); filter: blur(0); opacity:1; }
}

.cd-foot{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.cd-note{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  opacity: .95;
}

/* زرار السكشن */
.cd-btn{
  box-shadow:
    0 18px 42px rgba(255,79,163,.22),
    0 6px 0 rgba(181, 75, 128, .18),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -12px 18px rgba(90, 20, 50, .16);
}



/* ✅ styles.css (ADD ONLY) — الصق ده في آخر styles.css خالص */

/* =========================
   RED + REAL PAPER OVERRIDES
   (no breaking changes)
========================= */

/* 1) Theme: pink -> red, keep creamy secondary */
:root{
  --pink:#d7263d;     /* primary red */
  --pink2:#ff6b6b;    /* soft secondary */
  --bg1:#fff6f1;
  --bg2:#ffe6dc;
  --bg3:#ffd2c6;

  /* paper fibers (light) */
  --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='12'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 0.98 0 0 0  0 0 0.92 0 0  0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");

  /* parchment texture (older paper) */
}

.btn{
  background:
    var(--wool-svg),
    radial-gradient(160px 90px at 25% 20%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ff6b6b, #d7263d);
}
.btn::before{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%);
}
.btn:focus-visible{ outline: 3px solid rgba(215,38,61,.30); }

.badge{
  border-color: rgba(255,255,255,.72);
}

/* 3) Envelope: real paper look (grain + creases + edges) */
.envelope{
  border-radius: 22px;
  background:
    var(--paper-fiber),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,245,240,.78));
  background-size: 320px 320px, auto;
  background-blend-mode: overlay, normal;
}

/* paper rim + subtle crease highlights */
.envelope::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  background:
    /* top fold highlight */
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%),
    /* mid crease line */
    linear-gradient(180deg, transparent 52%, rgba(140,70,70,.12) 53%, transparent 54%),
    /* side edge shading */
    radial-gradient(260px 180px at 0% 50%, rgba(0,0,0,.06), transparent 55%),
    radial-gradient(260px 180px at 100% 50%, rgba(0,0,0,.05), transparent 55%);
  opacity:.85;
  mix-blend-mode: multiply;
}

/* back sheet */
.env-back{
  background:
    var(--paper-fiber),
    radial-gradient(520px 200px at 16% 10%, rgba(255,255,255,.65), transparent 60%),
    linear-gradient(180deg, #fffaf7, #fff0ea 52%, #ffe2d7);
  background-size: 320px 320px, auto, auto;
  background-blend-mode: overlay, screen, normal;
  border: 1px solid rgba(120, 60, 60, .14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -18px 28px rgba(120,60,60,.08);
}

/* flap: paper + edge */
.env-flap{
  background:
    var(--paper-fiber),
    radial-gradient(520px 200px at 18% 10%, rgba(255,255,255,.70), transparent 60%),
    linear-gradient(180deg, #ffffff, #fff3ee 34%, #ffe0d6);
  background-size: 320px 320px, auto, auto;
  background-blend-mode: overlay, screen, normal;
  border: 1px solid rgba(120, 60, 60, .14);
  box-shadow:
    0 16px 30px rgba(25,8,18,.08),
    inset 0 -10px 18px rgba(120,60,60,.06);
}

/* front triangles: keep shape but warm tones */
.env-bottom{
  border-top: 1px solid rgba(215,38,61,.18);
  background:
    linear-gradient(135deg, transparent 50%, rgba(215,38,61,.10) 51%),
    linear-gradient(-135deg, transparent 50%, rgba(215,38,61,.10) 51%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}
.env-sides{
  background: linear-gradient(180deg, rgba(255,107,107,.14), rgba(255,255,255,0));
}

/* wax seal: red wax */
.seal{
  background:
    var(--paper-fiber),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #c4162e, #ff6b6b);
  background-size: 220px 220px, auto, auto;
  background-blend-mode: overlay, screen, normal;
  box-shadow:
    0 22px 48px rgba(215,38,61,.22),
    0 7px 0 rgba(120, 25, 35, .22),
    inset 0 1px 0 rgba(255,255,255,.60);
}

/* 4) Message background: old parchment + classic Arabic font */
#typed, .typed{
  font-family: "Amiri", "Aref Ruqaa Ink", serif;
  letter-spacing: .1px;
}

.typed{
  background:
    var(--parchment),
    /* stains */
    radial-gradient(220px 140px at 18% 24%, rgba(215,38,61,.10), transparent 70%),
    radial-gradient(240px 170px at 82% 18%, rgba(160,120,60,.16), transparent 70%),
    radial-gradient(280px 190px at 70% 86%, rgba(110,80,55,.14), transparent 70%),
    /* vignette */
    radial-gradient(900px 420px at 50% 35%, rgba(255,255,255,.62), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fff8ef, #fff0e3 55%, #ffe8d6);
  background-size: 520px 520px, auto, auto, auto, auto, auto;
  background-blend-mode: multiply, normal, normal, normal, screen, normal;

  border: 1px solid rgba(120, 60, 35, .18);
  box-shadow:
    0 18px 40px rgba(20, 5, 12, .10),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -18px 26px rgba(120,60,35,.08);
}

/* typed inner card: parchment sheet itself */
.typed{
  color:#2a1718;
}
.caret{
  border-left-color: rgba(70,25,25,.55);
}

/* 5) Titles / accents (optional) */
.modal-title{
  color:#2a1718;
  text-shadow: 0 12px 24px rgba(215,38,61,.12);
}
.sig .name{ color: var(--pink); }

/* 6) Countdown accents follow red (keeps layout) */
.countdown{
  box-shadow:
    0 18px 40px rgba(20, 5, 12, .12),
    0 7px 0 rgba(215, 38, 61, .10),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -16px 26px rgba(181, 75, 128, .06);
}