:root{
    --bg:#FBF1EC; --bg-2:#F4DFD8; --card:#FFFCF9; --paper:#FFFFFF;
    --ink:#3B2A2E; --ink-soft:#7A5A5D;
    --accent:#B8425A; --accent-soft:#E9B9BD; --gold:#B08D57;
    --ring:rgba(184,66,90,.22);
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#1F0E14; --bg-2:#2E1520; --card:#2F1922; --paper:#3A2029;
      --ink:#F3E1DE; --ink-soft:#C79BA0;
      --accent:#F0879C; --accent-soft:#6E3A45; --gold:#D8B876;
      --ring:rgba(240,135,156,.28);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#1F0E14; --bg-2:#2E1520; --card:#2F1922; --paper:#3A2029;
    --ink:#F3E1DE; --ink-soft:#C79BA0;
    --accent:#F0879C; --accent-soft:#6E3A45; --gold:#D8B876;
    --ring:rgba(240,135,156,.28);
    color-scheme:dark;
  }
  @property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  html{ overflow-x:hidden; }
  [hidden]{ display:none !important; }
  body{
    direction:rtl;
    min-height:100vh; min-height:100dvh;
    background:radial-gradient(70% 55% at 50% 0%, var(--bg-2), transparent 70%), var(--bg);
    color:var(--ink);
    font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;
    display:flex; align-items:center; justify-content:center;
    padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
  }

  /* ---------- atmosphere ---------- */
  .aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .aurora::before, .aurora::after{ content:""; position:absolute; width:90vmax; height:90vmax; border-radius:50%; }
  .aurora::before{ left:-35vmax; top:-30vmax; background:radial-gradient(closest-side, var(--accent-soft), transparent); opacity:.55; animation:driftA 18s ease-in-out infinite alternate; }
  .aurora::after{ right:-40vmax; bottom:-40vmax; background:radial-gradient(closest-side, var(--gold), transparent); opacity:.22; animation:driftB 22s ease-in-out infinite alternate; }

  canvas.layer{ position:fixed; inset:0; pointer-events:none; }
  #bg{ z-index:0; }
  #fx{ z-index:30; }

  .glory-wrap{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
  .glory{
    position:absolute; left:50%; top:42%;
    width:120vmax; height:120vmax; opacity:0;
    background:repeating-conic-gradient(from 0deg, var(--gold) 0deg 4deg, transparent 4deg 15deg);
    -webkit-mask:radial-gradient(closest-side, #000 6%, transparent 50%);
            mask:radial-gradient(closest-side, #000 6%, transparent 50%);
    transform:translate(-50%,-50%);
    transition:opacity .8s ease;
    animation:rays 14s linear infinite paused;
  }
  .glory.on{ opacity:.38; animation-play-state:running; }

  .flash{ position:fixed; inset:0; z-index:28; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--fx,50%) var(--fy,42%), var(--gold), transparent 55%); }
  .flash.on{ animation:flash .9s ease-out; }

  /* ---------- intro ---------- */
  .intro{
    position:fixed; inset:0; z-index:20; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:0 16px; text-align:center;
    transition:opacity .8s ease, transform .8s ease, filter .8s ease;
  }
  .intro.hide{ opacity:0; transform:translateY(-30px) scale(.96); filter:blur(8px); }
  .intro-1{
    margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700;
    font-size:clamp(3.2rem, 17vw, 5.5rem); line-height:1.35; padding-inline:.15em;
    background:linear-gradient(100deg, var(--accent) 30%, var(--gold) 50%, var(--accent) 70%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 6px 22px var(--ring));
    animation:introIn 1.5s cubic-bezier(.2,.7,.2,1) .3s both, shimmer 3.5s linear infinite;
  }
  .intro-2{ margin:0; font-size:1.25rem; line-height:1.7; color:var(--ink-soft); animation:introIn 1.2s cubic-bezier(.2,.7,.2,1) 2.6s both; }
  .intro-2 b{ display:block; font-weight:500; color:var(--accent); }
  .intro-sig{ width:min(88vw, 540px); height:auto; overflow:visible; filter:drop-shadow(0 6px 22px var(--ring)); }
  .sig-t{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:170px; fill:url(#sigG); fill-opacity:0; stroke:var(--gold); stroke-width:2.2; stroke-linejoin:round; stroke-dasharray:1600; stroke-dashoffset:1600; animation:sigDraw 2.3s cubic-bezier(.5,0,.3,1) .3s forwards, sigFill 1s ease 2.2s forwards; }
  @keyframes sigDraw{ to{ stroke-dashoffset:0; } }
  @keyframes sigFill{ to{ fill-opacity:1; stroke-width:.6; } }

  .quick{ all:unset; box-sizing:border-box; position:fixed; z-index:15; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 22px); transform:translateX(-50%); padding:10px 20px; border-radius:999px; cursor:pointer; white-space:nowrap; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.9rem; color:var(--accent); background:var(--card); box-shadow:0 0 0 1.5px var(--accent-soft), 0 10px 26px -12px var(--ring); animation:barIn 1s ease both; }
  .quick:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .toast{ position:fixed; z-index:35; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 26px); transform:translateX(-50%); max-width:calc(100vw - 32px); padding:12px 22px; border-radius:999px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.2rem; color:var(--accent); background:var(--card); box-shadow:0 0 0 1.5px var(--accent-soft), 0 14px 34px -12px var(--ring); animation:toastIn 5.5s ease forwards; pointer-events:none; }
  .shout{ position:fixed; z-index:36; left:50%; top:24%; transform:translate(-50%,-50%); width:max-content; max-width:calc(100vw - 32px); text-align:center; padding:10px 22px 14px; border-radius:22px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.6rem, 7.5vw, 2.6rem); line-height:1.4; color:#FFF3F7; background:rgba(26,6,18,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 0 0 1px rgba(255,160,190,.45), 0 0 40px rgba(255,90,140,.6); text-shadow:0 0 14px rgba(255,90,140,.95); pointer-events:none; animation:shoutIn 2.8s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes shoutIn{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-4deg); } 12%{ opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(2deg); } 22%{ transform:translate(-50%,-50%) scale(1) rotate(0); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-85%) scale(.96); } }
  @keyframes toastIn{ 0%{ opacity:0; transform:translate(-50%,20px); } 10%,85%{ opacity:1; transform:translate(-50%,0); } 100%{ opacity:0; transform:translate(-50%,10px); } }
  .scene{ position:relative; z-index:1; width:100%; max-width:460px; display:flex; justify-content:center; }

  /* ---------- envelope ---------- */
  .envelope-wrap{ position:relative; z-index:0; padding-block:120px 130px; transition:opacity .6s ease, transform .6s ease, filter .6s ease; }
  .envelope-wrap::before{
    content:""; position:absolute; inset:5% -8%; z-index:-1; pointer-events:none;
    background:radial-gradient(closest-side, var(--ring), transparent);
    animation:glow 3.4s ease-in-out infinite;
  }
  .scene.opening .envelope-wrap::before{ animation:flare 1.6s ease forwards; }
  .envelope-wrap.leave{ opacity:0; transform:translateY(-16px) scale(1.06); filter:blur(6px); }

  .dropper{ opacity:0; }
  .scene.entered .dropper{ animation:dropin 1.3s cubic-bezier(.25,.8,.35,1) both; }

  .bobber{ perspective:900px; animation:bob 3.4s ease-in-out infinite; }
  .scene.opening .bobber{ animation-play-state:paused; }

  .envelope{
    all:unset; box-sizing:border-box;
    position:relative; display:block;
    width:min(340px, 84vw); aspect-ratio:3 / 2;
    --e-b1:#7A1236; --e-b2:#4A0A20; --e-p1:#FFF9F2; --e-p2:#F1DFCC; --e-f1:#A8174C; --e-f2:#6B0F30; --e-n1:#7A4E12; --e-n2:#C9953F;
    border-radius:14px; cursor:pointer;
    perspective:1200px;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .35s ease;
  }
  .envelope:focus-visible{ outline:2px solid var(--accent); outline-offset:8px; }

  .env-back{ position:absolute; inset:0; border-radius:14px; background:linear-gradient(180deg,var(--e-b1),var(--e-b2)); box-shadow:0 34px 60px -24px rgba(90,10,40,.6), 0 0 0 1px rgba(201,149,63,.45); }

  .paper{
    position:absolute; left:7%; right:7%; top:7%; bottom:5%; z-index:2;
    background:var(--paper); border-radius:8px;
    box-shadow:0 4px 14px -6px rgba(0,0,0,.18);
    display:flex; flex-direction:column; align-items:center; gap:9px; padding-top:9%;
    transition:transform 1s cubic-bezier(.2,.8,.2,1), box-shadow 1s ease;
  }
  .paper b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.35rem; line-height:1.2; color:var(--accent); }
  .paper i{ display:block; height:2px; width:60%; border-radius:2px; background:var(--accent-soft); }
  .paper i:nth-of-type(2){ width:48%; }
  .paper i:nth-of-type(3){ width:54%; }
  .scene.rising .paper{ transform:translateY(-60%); box-shadow:0 0 50px 8px var(--ring); }

  .pocket{
    position:absolute; inset:0; z-index:3; border-radius:14px;
    background:repeating-linear-gradient(0deg, rgba(120,80,40,.035) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120,80,40,.03) 0 1px, transparent 1px 4px), linear-gradient(180deg,var(--e-p1),var(--e-p2));
    clip-path:polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
  }

  .flap{
    position:absolute; top:0; left:0; right:0; height:60%; z-index:4;
    transform-origin:50% 0; transform-style:preserve-3d;
    transition:transform .75s cubic-bezier(.45,0,.2,1) .15s;
  }
  .flap span{
    position:absolute; inset:0; border-radius:14px 14px 0 0;
    clip-path:var(--e-clip, polygon(0 0, 100% 0, 50% 100%));
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .flap .front{ background:radial-gradient(circle at 50% 0, rgba(255,215,140,.22), transparent 60%), repeating-radial-gradient(circle at 50% 20%, rgba(255,230,190,.05) 0 2px, transparent 2px 9px), linear-gradient(165deg,var(--e-f1),var(--e-f2)); }
  .flap .front svg{ position:absolute; inset:0; width:100%; height:100%; }
  .flap .back{ background:linear-gradient(15deg,#F1DFCC,#FFF9F2) !important; }
  .env-gold{ position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
  .env-name{ position:absolute; left:0; right:0; bottom:8%; z-index:3; text-align:center; pointer-events:none; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.1rem, 5vw, 1.4rem); background:linear-gradient(100deg,var(--e-n1),var(--e-n2) 50%,var(--e-n1)); filter:drop-shadow(0 1px 0 rgba(255,240,210,.8)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
  .env-shine{ position:absolute; inset:0; z-index:6; border-radius:14px; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(255,245,220,.38) 50%, transparent 62%); background-size:260% 100%; background-position:120% 0; animation:envShine 5s ease-in-out infinite; mix-blend-mode:screen; }
  .scene.opening .env-shine{ opacity:0; transition:opacity .3s; }
  @keyframes envShine{ 0%,55%{ background-position:120% 0; } 85%,100%{ background-position:-20% 0; } }
  .flap .back{ background:linear-gradient(15deg, var(--accent-soft), var(--card)); transform:rotateX(180deg); }
  .scene.opening .flap{ transform:rotateX(180deg); }
  .scene.flap-done .flap{ z-index:1; }

  .seal, .seal-half, .ripple{ position:absolute; z-index:5; width:80px; height:80px; left:calc(50% - 40px); top:calc(60% - 42px); border-radius:50%; }
  .seal, .seal-half{
    display:grid; place-items:center;
    box-shadow:0 10px 22px -8px rgba(40,0,15,.6), 0 0 26px rgba(255,213,138,.45);
  }
  .seal{ animation:heartbeat 1.6s ease-in-out infinite; }
  .seal svg, .seal-half svg{ width:100%; height:100%; display:block; }
  .seal-half{ opacity:0; pointer-events:none; }
  .seal-half.l{ clip-path:inset(-10px 50% -10px -10px); }
  .seal-half.r{ clip-path:inset(-10px -10px -10px 50%); }
  .scene.opening .seal{ animation:none; opacity:0; }
  .scene.opening .seal-half.l{ animation:halfL .9s cubic-bezier(.3,.6,.4,1) forwards; }
  .scene.opening .seal-half.r{ animation:halfR .9s cubic-bezier(.3,.6,.4,1) forwards; }
  .ripple{ border:2px solid var(--gold); opacity:0; pointer-events:none; }
  .scene.opening .ripple{ animation:ripple 1s ease-out forwards; }
  .scene.opening .ripple.r2{ animation-delay:.2s; }
  .scene.opening .ripple.r3{ animation-delay:.4s; }

  .hint{
    position:absolute; left:-16px; right:-16px; top:calc(100% + 26px);
    text-align:center; line-height:1.8; font-size:.98rem; color:var(--ink-soft);
    transition:opacity .6s ease;
  }
  .hint strong{ color:var(--accent); font-weight:700; }
  .hint .tap{ display:block; color:var(--accent); font-weight:500; animation:breathe 2.4s ease-in-out infinite; }
  .hint small{ display:block; font-size:.8rem; opacity:.85; }
  .scene:not(.landed) .hint, .scene.opening .hint{ opacity:0; }

  /* ---------- letter ---------- */
  .letter{ width:100%; perspective:1200px; }
  .letter-card{
    position:relative;
    background:var(--card); border-radius:22px;
    padding:52px 30px 38px;
    box-shadow:0 34px 80px -30px var(--ring);
    clip-path:inset(0 0 100% 0 round 22px);
  }
  .letter.show .letter-card{ animation:unroll 3.2s cubic-bezier(.5,.05,.3,1) .2s both; }
  @keyframes unroll{ from{ clip-path:inset(0 0 100% 0 round 22px); } to{ clip-path:inset(0 0 0 0 round 22px); } }
  .letter{ position:relative; }
  .rod{ position:absolute; z-index:3; left:-8px; right:-8px; top:-10px; height:20px; border-radius:10px; opacity:0; pointer-events:none; background:linear-gradient(180deg,#FFF1C4,#D9A55B 45%,#8A5A1A); box-shadow:0 6px 14px -4px rgba(0,0,0,.45); transition:opacity .5s ease; }
  .rod::before, .rod::after{ content:""; position:absolute; top:-4px; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFF1C4, #B07C3A 70%); box-shadow:0 3px 8px rgba(0,0,0,.35); }
  .rod::before{ left:-10px; } .rod::after{ right:-10px; }
  .letter.show .rod{ opacity:1; }
  .letter.show .rod-bot{ animation:rodDown 3.2s cubic-bezier(.5,.05,.3,1) .2s both; }
  @keyframes rodDown{ from{ transform:translateY(0); } to{ transform:translateY(var(--ch,600px)); } }
  .letter-card::before{
    content:""; position:absolute; inset:10px; border:1px solid var(--accent-soft); border-radius:15px; opacity:.6; pointer-events:none;
    background:
      linear-gradient(var(--gold),var(--gold)) top left / 20px 2px no-repeat,
      linear-gradient(var(--gold),var(--gold)) top left / 2px 20px no-repeat,
      linear-gradient(var(--gold),var(--gold)) top right / 20px 2px no-repeat,
      linear-gradient(var(--gold),var(--gold)) top right / 2px 20px no-repeat,
      linear-gradient(var(--gold),var(--gold)) bottom left / 20px 2px no-repeat,
      linear-gradient(var(--gold),var(--gold)) bottom left / 2px 20px no-repeat,
      linear-gradient(var(--gold),var(--gold)) bottom right / 20px 2px no-repeat,
      linear-gradient(var(--gold),var(--gold)) bottom right / 2px 20px no-repeat;
  }
  .letter-card::after{
    content:""; position:absolute; inset:0; border-radius:22px; padding:2px; pointer-events:none;
    background:conic-gradient(from var(--ang), transparent 0deg 60deg, var(--gold) 100deg, transparent 140deg 240deg, var(--accent) 290deg, transparent 330deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:spin 5s linear infinite;
  }

  .replay{
    all:unset; box-sizing:border-box; position:absolute; top:18px; left:18px; z-index:1;
    width:34px; height:34px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer; color:var(--ink-soft);
  }
  .replay svg{ width:18px; height:18px; }
  .replay:hover, .replay:focus-visible{ background:var(--bg-2); color:var(--accent); }

  .letter-today{ display:inline-block; margin:0 auto 10px; padding:6px 16px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.8rem; color:#FFD58A; background:rgba(255,213,138,.1); box-shadow:inset 0 0 0 1px rgba(255,213,138,.35); }
  .eyebrow{ margin:0 0 8px; text-align:center; font-size:.82rem; font-weight:500; color:var(--accent); }
  .title{ margin:0; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:2.6rem; line-height:1.4; color:var(--ink); text-wrap:balance; }
  .name{
    padding-inline:.1em;
    background:linear-gradient(100deg, var(--accent) 30%, var(--gold) 50%, var(--accent) 70%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 4px 14px var(--ring));
    animation:shimmer 3.5s linear infinite;
  }
  .subtitle{ margin:4px 0 18px; text-align:center; font-size:.95rem; color:var(--ink-soft); text-wrap:balance; }

  .divider{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 24px; color:var(--gold); }
  .divider span{ width:44px; height:1px; background:linear-gradient(90deg, transparent, var(--accent-soft)); }
  .divider span:last-child{ background:linear-gradient(90deg, var(--accent-soft), transparent); }
  .divider svg{ position:relative; z-index:1; width:15px; height:15px; fill:currentColor; animation:heartbeat 1.6s ease-in-out infinite; filter:drop-shadow(0 0 8px var(--ring)); }

  .para{ margin:0 0 16px; font-size:1.04rem; line-height:2.05; }
  .emphasis{ position:relative; margin:30px 0; padding:20px 18px; border-radius:18px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.5rem; line-height:1.9; color:var(--accent); text-shadow:0 0 18px var(--ring); background:radial-gradient(60% 100% at 50% 0%, var(--accent-soft) 0%, transparent 100%); opacity:.9; }
  .emphasis::before, .emphasis::after{ content:"❝"; position:absolute; top:2px; font-size:1.6rem; color:var(--gold); opacity:.45; font-family:Georgia,serif; pointer-events:none; }
  .emphasis::before{ right:14px; } .emphasis::after{ content:"❞"; left:14px; }
  .w{ display:inline-block; }

  .signature{ margin:30px 0 0; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.35rem; color:var(--ink); }
  .signature svg{ display:inline-block; width:18px; height:18px; fill:var(--accent); vertical-align:-3px; margin-inline-start:6px; animation:heartbeat 1.6s ease-in-out infinite; }
  .signature small{ display:block; margin-top:4px; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.85rem; color:var(--ink-soft); }

  .reply{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:32px; }
  .heart-btn{
    all:unset; box-sizing:border-box; cursor:pointer; position:relative;
    width:72px; height:72px; border-radius:50%;
    display:grid; place-items:center;
    color:var(--paper);
    background:radial-gradient(circle at 35% 30%, var(--gold), var(--accent) 72%);
    box-shadow:0 12px 26px -10px var(--accent);
    animation:heartbeat 1.6s ease-in-out infinite;
  }
  .heart-btn::before{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--accent-soft); animation:halo 1.6s ease-out infinite; }
  .heart-btn svg{ width:32px; height:32px; fill:currentColor; }
  .heart-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; }
  .heart-btn.press{ animation:press .4s ease, heartbeat 1.6s ease-in-out .4s infinite; }
  .reply-text{ margin:0; min-height:1.8em; text-align:center; font-size:1rem; color:var(--ink-soft); }
  .reply-text.pop{ color:var(--accent); font-weight:500; animation:pop .5s ease both; }

  .finale{ display:flex; justify-content:center; margin-top:30px; }
  .finale-btn{
    all:unset; box-sizing:border-box; cursor:pointer; position:relative; overflow:hidden;
    padding:14px 28px; border-radius:999px;
    font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:1.02rem;
    color:var(--paper);
    background:linear-gradient(120deg, var(--accent), var(--gold));
    animation:glowPulse 2.2s ease-in-out infinite;
  }
  .finale-btn::after{
    content:""; position:absolute; top:0; bottom:0; left:-50%; width:40%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-20deg);
    animation:sweep 2.8s ease-in-out infinite;
  }
  .finale-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

  .credit{ margin:26px 0 0; text-align:center; font-size:.68rem; color:var(--ink-soft); opacity:.6; }
  [data-reveal]{ opacity:0; }
  .letter.show [data-reveal]{ animation:ink 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s) both; }
  .letter.show .w[data-reveal]{ animation-name:word; animation-duration:.9s; }

  .music{
    all:unset; box-sizing:border-box;
    position:fixed; z-index:60; top:calc(env(safe-area-inset-top,0px) + 14px); right:14px;
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer;
    background:var(--card); color:var(--accent);
    box-shadow:0 8px 20px -10px var(--ring), 0 0 0 1px var(--accent-soft);
  }
  .music svg{ width:20px; height:20px; }
  .music .slash{ display:none; }
  .music[aria-pressed="false"] .slash{ display:inline; }
  .music[aria-pressed="true"] svg{ animation:sway 2.2s ease-in-out infinite; }
  .music:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* ---------- finale: night sky + 3D heart (one fixed look in both themes) ---------- */
  .night{ position:fixed; inset:0; z-index:50; overflow:hidden; background:#07030A; opacity:0; transition:opacity 1.2s ease; }
  .night.on{ opacity:1; }
  .night canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
  .night canvas:active{ cursor:grabbing; }
  .night-close{
    all:unset; box-sizing:border-box; position:absolute; z-index:4;
    top:calc(env(safe-area-inset-top,0px) + 14px); left:14px;
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer;
    color:#FFD9E4; background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,200,220,.25);
  }
  .night-close svg{ width:18px; height:18px; }
  .tap-say{ position:absolute; z-index:2; pointer-events:none; white-space:nowrap; transform:translate(-50%,-50%); font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.6rem, 7vw, 2.4rem); color:#FFF3F7; padding:2px 18px 8px; border-radius:999px; background:rgba(26,6,18,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 0 0 1px rgba(255,160,190,.45), 0 0 26px rgba(255,90,140,.55); text-shadow:0 0 12px rgba(255,90,140,.95); animation:saysUp 2s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes saysUp{ 0%{ opacity:0; transform:translate(-50%,-30%) scale(.6); } 15%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); } 30%{ transform:translate(-50%,-55%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-160%) scale(1); } }
  .night-close:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .night-text{ position:absolute; z-index:1; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 6vh); text-align:center; pointer-events:none; transition:opacity .5s ease; }
  .night.kissing .night-text{ opacity:0; }
  .nt-name{
    margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700;
    font-size:clamp(2.6rem, 12vw, 4rem); line-height:1.3; color:#FFE3EC;
    text-shadow:0 0 12px rgba(255,105,150,.9), 0 0 32px rgba(255,105,150,.6), 0 0 60px rgba(255,205,120,.35);
    opacity:0; transform:translateY(16px) scale(.9); filter:blur(8px);
    transition:opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1.4s ease;
  }
  .nt-line{ margin:6px 0 0; font-size:1.12rem; color:#FFD9A0; opacity:0; transform:translateY(10px); transition:opacity 1.2s ease .8s, transform 1.2s ease .8s; }
  .nt-hint{ margin:14px 0 0; font-size:.8rem; color:rgba(255,220,230,.62); opacity:0; transition:opacity 1s ease 2s; }
  .night.ready .nt-name{ opacity:1; transform:none; filter:blur(0); }
  .night.ready .nt-line{ opacity:1; transform:none; }
  .night.ready .nt-hint{ opacity:1; }

  .kiss-btn{
    all:unset; box-sizing:border-box; cursor:pointer; display:inline-block;
    margin-top:18px; padding:12px 24px; border-radius:999px;
    font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:1rem;
    color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A);
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity 1s ease 3.2s, transform 1s ease 3.2s;
    animation:kGlow 2s ease-in-out infinite;
  }
  .night.ready .kiss-btn{ opacity:1; transform:none; pointer-events:auto; }
  .night.kissing .kiss-btn{ pointer-events:none; }
  .kiss-btn:focus-visible{ outline:2px solid #FFD58A; outline-offset:4px; }

  .kiss{ position:absolute; inset:0; z-index:1; pointer-events:none; display:flex; align-items:center; justify-content:center; }
  .k-prints{ position:absolute; inset:0; overflow:hidden; transition:opacity 1.2s ease; }
  .kiss.fin .k-prints{ opacity:.3; }
  .k-print{
    position:absolute; width:var(--s); height:calc(var(--s) * .6);
    opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(1.8);
    filter:drop-shadow(0 0 6px rgba(255,80,130,.6));
    animation:stamp .3s cubic-bezier(.3,1.4,.5,1) forwards;
  }
  .k-print svg, .k-lips svg{ width:100%; height:100%; display:block; }
  .k-flash{ position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 40%, rgba(255,120,170,.85), transparent 60%); }
  .k-flash.on{ animation:flash 1s ease-out; }

  .k-lips{
    position:absolute; left:50%; top:40%;
    width:min(62vw, 300px); aspect-ratio:200 / 120;
    opacity:0; transform:translate(-50%,-50%) scale(.3);
    filter:drop-shadow(0 0 18px rgba(255,70,120,.7));
    transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  }
  .kiss.approach .k-lips{ opacity:1; transform:translate(-50%,-50%) scale(.85); }
  .kiss.long .k-lips{ transform:translate(-50%,-50%) scale(1.25); filter:drop-shadow(0 0 40px rgba(255,70,120,.95)); transition:transform 3.4s cubic-bezier(.3,0,.3,1), filter 3.4s ease, opacity .6s ease; }
  .kiss.long .k-lips svg{ animation:pucker .45s ease-in-out infinite alternate; }
  .kiss.smack .k-lips{ opacity:0; transform:translate(-50%,-50%) scale(1.8); transition:transform .2s cubic-bezier(.5,0,.8,.4), opacity .4s ease .15s; }

  .k-sound{
    position:absolute; left:0; right:0; top:calc(40% + min(24vw, 115px)); margin:0;
    text-align:center; white-space:nowrap;
    font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.8rem, 8.5vw, 3rem);
    color:#FFD3E0; text-shadow:0 0 14px rgba(255,90,140,.9), 0 0 34px rgba(255,90,140,.5);
    transition:opacity .6s ease;
  }
  .kiss.fin .k-sound{ opacity:0; }

  .k-final{ position:relative; text-align:center; padding:0 16px; pointer-events:none; }
  .k-final > *{ opacity:0; }
  .kiss.fin .k-final > *{ animation:kIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .kiss.fin .k-crown{ animation-delay:.1s; }
  .kiss.fin .k-l1{ animation-delay:.5s; }
  .kiss.fin .k-l2{ animation-delay:1.2s; }
  .kiss.fin .k-l3{ animation-delay:1.9s; }
  .kiss.fin .k-ask{ animation-delay:2.7s; }
  .kiss.fin .k-actions{ animation-delay:3s; }
  .k-ask{ margin:22px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.6rem; color:#FFD58A; text-shadow:0 0 12px rgba(255,205,120,.8); }
  .k-crown{ display:block; width:68px; height:47px; margin:0 auto 4px; filter:drop-shadow(0 0 12px rgba(255,205,120,.85)); }
  .k-l1, .k-l2, .k-l3{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; color:#FFE3EC; text-wrap:balance; }
  .k-l1{ font-size:clamp(3.2rem, 16vw, 5.5rem); line-height:1.25; text-shadow:0 0 14px rgba(255,90,140,.95), 0 0 40px rgba(255,90,140,.6), 0 0 80px rgba(255,205,120,.3); }
  .k-l2{ font-size:clamp(2.2rem, 11vw, 3.6rem); line-height:1.35; color:#FFD3E0; text-shadow:0 0 12px rgba(255,90,140,.9), 0 0 32px rgba(255,90,140,.5); }
  .k-l3{ margin-top:4px; font-size:clamp(1.9rem, 9.5vw, 3.1rem); line-height:1.4; text-shadow:0 0 12px rgba(255,90,140,.9), 0 0 32px rgba(255,90,140,.5); }
  .k-gold{ color:#FFD58A; text-shadow:0 0 14px rgba(255,205,120,.9), 0 0 36px rgba(255,170,80,.5); }
  .k-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
  .kiss.fin .k-actions{ pointer-events:auto; }
  .k-again, .k-back{ all:unset; box-sizing:border-box; cursor:pointer; padding:11px 20px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.95rem; }
  .k-again{ color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); box-shadow:0 8px 26px -8px rgba(255,100,150,.8); }
  .k-back{ color:#FFD9E4; background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,200,220,.3); }
  .k-again:focus-visible, .k-back:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }

  @keyframes stamp{
    0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(1.8); }
    60%{ opacity:.95; transform:translate(-50%,-50%) rotate(var(--r)) scale(.92); }
    100%{ opacity:.88; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
  }
  @keyframes pucker{ from{ transform:scale(1,1); } to{ transform:scale(.93,1.08); } }
  @keyframes kIn{ from{ opacity:0; transform:translateY(18px) scale(.85); filter:blur(10px); } to{ opacity:1; transform:none; filter:blur(0); } }
  @keyframes kGlow{ 0%,100%{ box-shadow:0 8px 24px -10px rgba(255,110,160,.8); } 50%{ box-shadow:0 8px 40px -2px rgba(255,110,160,.95); } }

  .story{ position:absolute; inset:0; z-index:1; pointer-events:none; }
  .st-label{ position:absolute; width:130px; text-align:center; opacity:0; transform:translateY(8px) scale(.9); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
  .st-label.show{ opacity:1; transform:none; }
  .st-label b{ display:block; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.9rem; color:#FFD58A; text-shadow:0 0 10px rgba(255,205,120,.7); }
  .st-label span{ display:block; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.05rem; line-height:1.4; color:#FFE3EC; text-shadow:0 0 10px rgba(255,90,140,.85); }
  .st-label small{ display:block; font-size:.78rem; color:#FFD9E4; opacity:.85; line-height:1.4; }
  .st-tick{ position:absolute; left:16px; right:16px; margin:0; text-align:center; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:clamp(1.3rem, 6vw, 1.9rem); color:#FFD58A; text-shadow:0 0 12px rgba(255,205,120,.8); font-variant-numeric:tabular-nums; opacity:0; transition:opacity .4s ease; }
  .st-tick.show{ opacity:1; }
  .st-tick b{ display:block; }
  .st-tick small{ display:block; margin-top:4px; font-size:.95rem; font-weight:500; color:#FFD9E4; text-shadow:0 0 10px rgba(255,90,140,.7); }
  .st-tick .inf{ font-size:clamp(3.5rem, 18vw, 5.5rem); line-height:1; transition:font-size .9s ease; }
  .st-tick{ transition:opacity .4s ease, top .9s cubic-bezier(.2,.8,.2,1); }
  .st-tick.final small{ opacity:0; transition:opacity .5s ease; }
  .st-tick.final .inf{ font-size:clamp(2.4rem, 11vw, 3.4rem); }
  .st-tick.flip b, .st-tick.flip small{ animation:tickIn .38s cubic-bezier(.2,.8,.2,1) both; }
  .st-tick.flip small{ animation-delay:.06s; }
  @keyframes tickIn{ from{ opacity:0; transform:translateY(14px); filter:blur(4px); } to{ opacity:1; transform:none; filter:blur(0); } }
  .st-center span{ color:#FFD58A; text-shadow:0 0 14px rgba(255,205,120,.9), 0 0 34px rgba(255,170,80,.5); }
  .st-center{ position:absolute; left:16px; right:16px; margin:0; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.5rem, 6.5vw, 2.3rem); color:#FFE3EC; text-shadow:0 0 14px rgba(255,90,140,.9), 0 0 34px rgba(255,90,140,.5); opacity:0; transition:opacity 1.2s ease; }
  .st-center.show{ opacity:1; }

  .meter-cta{ display:flex; justify-content:center; margin-top:30px; }
  .meter-open{
    all:unset; box-sizing:border-box; cursor:pointer;
    padding:13px 28px; border-radius:999px;
    font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:1.02rem;
    color:var(--accent); background:var(--card);
    box-shadow:inset 0 0 0 2px var(--accent);
    animation:glowPulse 2.2s ease-in-out infinite;
  }
  .meter-open:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

  .lovepage{
    position:fixed; inset:0; z-index:26; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:calc(env(safe-area-inset-top,0px) + 60px) 16px calc(env(safe-area-inset-bottom,0px) + 66px);
    text-align:center;
    background:radial-gradient(80% 60% at 50% 45%, #4A1030, #1A0612 60%, #0A0308);
    opacity:0; transition:opacity .8s ease;
    --heat:0;
  }
  .lovepage.on{ opacity:1; }
  .lp-bg2{ position:absolute; inset:0; pointer-events:none; opacity:var(--heat); background:radial-gradient(60% 45% at 50% 50%, rgba(255,70,140,.55), rgba(255,190,110,.18) 50%, transparent 75%); }
  .lp-back{
    all:unset; box-sizing:border-box; position:absolute; z-index:2;
    top:calc(env(safe-area-inset-top,0px) + 14px); left:14px;
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer;
    color:#FFD9E4; background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,200,220,.25);
  }
  .lp-back svg{ width:18px; height:18px; }
  .lp-back:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .lp-title{ position:relative; margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(2.4rem, 11vw, 3.4rem); line-height:1.3; color:#FFE3EC; text-shadow:0 0 14px rgba(255,90,140,.9), 0 0 36px rgba(255,90,140,.5); }
  .lp-hint{ position:relative; margin:0; font-size:.95rem; color:rgba(255,220,230,.75); }
  .lp-stage{
    position:relative; width:min(74vw, 340px); aspect-ratio:32 / 29; margin:22px 0 10px;
    cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  }
  .lp-stage:focus-visible{ outline:2px solid #FFD58A; outline-offset:10px; border-radius:24px; }
  .lp-ring{ position:absolute; inset:-4%; border-radius:50%; border:2px solid rgba(255,140,180,.55); pointer-events:none; animation:lpRing 2.4s ease-out infinite; }
  .lp-ring:nth-child(2){ animation-delay:.8s; }
  .lp-ring:nth-child(3){ animation-delay:1.6s; }
  .lovepage.holding .lp-ring{ animation-duration:.9s; border-color:rgba(255,205,120,.7); }
  .lp-heart{ position:relative; width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 0 calc(12px + var(--heat) * 44px) rgba(255,80,140,.85)); }
  .lovepage.holding .lp-heart{ animation:heartbeat .5s ease-in-out infinite; }
  .lovepage.over .lp-stage{ animation:shake .1s linear infinite; }
  .lovepage.wild .lp-stage{ animation:shakeHard .07s linear infinite; }
  .lovepage.wild .lp-res{ font-size:1.35rem; font-weight:700; color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.9); }
  @keyframes shakeHard{ 0%,100%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(-5px,3px) rotate(-1.5deg); } 50%{ transform:translate(4px,-4px) rotate(1deg); } 75%{ transform:translate(-3px,-2px) rotate(-1deg); } }
  .lovepage.broken .lp-heart{ animation:lpBreak .6s cubic-bezier(.3,0,.3,1) forwards; }
  .lovepage.broken .lp-ring{ display:none; }
  .lp-num{
    position:absolute; left:0; right:0; top:42%; transform:translateY(-50%); margin:0;
    direction:ltr; font-weight:700; font-size:clamp(2.6rem, 13vw, 4.2rem); line-height:1;
    color:#fff; font-variant-numeric:tabular-nums; pointer-events:none;
    text-shadow:0 0 16px rgba(255,90,150,.95), 0 2px 0 rgba(0,0,0,.25);
  }
  .lovepage.broken .lp-num{ font-size:clamp(4.5rem, 24vw, 8rem); color:#FFD58A; text-shadow:0 0 24px rgba(255,205,120,.95), 0 0 60px rgba(255,120,160,.6); animation:pop .7s ease both; }
  .lp-res{ position:relative; margin:4px 0 0; min-height:1.8em; font-size:1.05rem; color:#FFD9A0; }
  .lp-res.big{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.6rem, 7vw, 2.3rem); line-height:1.5; color:#FFE3EC; text-shadow:0 0 14px rgba(255,90,140,.9), 0 0 34px rgba(255,90,140,.5); animation:pop .6s ease both; }
  .lp-done{
    all:unset; box-sizing:border-box; position:relative; cursor:pointer; margin-top:14px;
    padding:11px 22px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.95rem;
    color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A);
    opacity:0; pointer-events:none; transition:opacity 1s ease 2s;
  }
  .lovepage.broken .lp-done{ opacity:1; pointer-events:auto; }
  .lp-done:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .page2{
    position:fixed; inset:0; z-index:27; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding:calc(env(safe-area-inset-top,0px) + 60px) 16px calc(env(safe-area-inset-bottom,0px) + 66px);
    text-align:center;
    background:radial-gradient(80% 60% at 50% 45%, #4A1030, #1A0612 60%, #0A0308);
    opacity:0; transition:opacity .8s ease;
  }
  .page2{ overflow-x:hidden; overflow-y:auto; justify-content:safe center; }
  .page2 > *{ flex-shrink:0; }
  .page2.on{ opacity:1; }
  .page2.iris{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 28.5C16 28.5 2 19.8 2 9.8C2 4.6 6 1 10.3 1C13 1 15 2.4 16 4.6C17 2.4 19 1 21.7 1C26 1 30 4.6 30 9.8C30 19.8 16 28.5 16 28.5Z'/%3E%3C/svg%3E") 50% 50% / 0 0 no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 28.5C16 28.5 2 19.8 2 9.8C2 4.6 6 1 10.3 1C13 1 15 2.4 16 4.6C17 2.4 19 1 21.7 1C26 1 30 4.6 30 9.8C30 19.8 16 28.5 16 28.5Z'/%3E%3C/svg%3E") 50% 50% / 0 0 no-repeat; transition:opacity .25s ease, -webkit-mask-size 1.4s cubic-bezier(.8,0,.3,1), mask-size 1.4s cubic-bezier(.8,0,.3,1); }
  .page2.iris.on{ -webkit-mask-size:300vmax 300vmax; mask-size:300vmax 300vmax; }
  .jr{ position:absolute; z-index:3; top:calc(env(safe-area-inset-top,0px) + 30px); left:50%; transform:translateX(-50%); display:flex; gap:6px; align-items:center; direction:rtl; pointer-events:none; }
  .jr i{ width:6px; height:6px; border-radius:50%; background:rgba(255,220,230,.25); }
  .jr i.past{ background:#FF9DBB; }
  .jr i.far{ width:3px; height:3px; opacity:.7; }
  .jr b{ margin-inline-start:4px; font-size:.6rem; font-weight:600; color:rgba(255,220,230,.65); white-space:nowrap; letter-spacing:.02em; }
  .jr i.now{ width:11px; height:11px; background:#FFD58A; box-shadow:0 0 10px #FFD58A; animation:heartbeat 1.6s ease-in-out infinite; }
  .p2-title{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(2.2rem, 10vw, 3.2rem); line-height:1.3; color:#FFE3EC; text-shadow:0 0 14px rgba(255,90,140,.9), 0 0 36px rgba(255,90,140,.5); }
  .p2-hint{ margin:0; font-size:.95rem; color:rgba(255,220,230,.75); }
  .p2-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
  .sc-card{ position:relative; width:min(84vw, 360px); aspect-ratio:1.45; margin:18px 0 6px; border-radius:20px; overflow:hidden; background:linear-gradient(160deg,#FFF7F2,#FFE4EC); box-shadow:0 0 0 2px rgba(255,213,138,.6), 0 20px 60px -20px rgba(255,90,140,.8); }
  .sc-msg{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px; }
  .sc-msg svg{ width:34px; height:34px; fill:#C2185B; animation:heartbeat 1.6s ease-in-out infinite; }
  .sc-msg p{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.15rem, 5vw, 1.45rem); line-height:1.7; color:#8A1C3F; }
  .sc-msg b{ display:block; color:#C2185B; font-size:1.15em; }
  #scCanvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; transition:opacity .9s ease; }
  .scratch.revealed #scCanvas{ opacity:0; pointer-events:none; }
  .end-name{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(3.4rem, 17vw, 5.5rem); line-height:1.25; color:#FFE3EC; text-shadow:0 0 16px rgba(255,90,140,.95), 0 0 44px rgba(255,90,140,.6), 0 0 90px rgba(255,205,120,.3); }
  .end-line{ margin:0; max-width:30ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.3rem, 5.6vw, 1.8rem); line-height:1.7; color:#FFD9E4; }
  .end-line b{ color:#FFD58A; }
  .endpage > *{ opacity:0; }
  .endpage.on > *{ animation:kIn 1.3s cubic-bezier(.2,.7,.2,1) both; }
  .endpage.on > :nth-child(2){ animation-delay:.3s; }
  .endpage.on > :nth-child(3){ animation-delay:1.2s; }
  .endpage.on > :nth-child(4){ animation-delay:2.2s; }
  .endpage.on > :nth-child(5){ animation-delay:3.4s; }
  .p2-nav{ position:relative; z-index:3; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; opacity:0; pointer-events:none; transition:opacity .8s ease .4s; }
  .page2.done .p2-nav{ opacity:1; pointer-events:auto; }
  .page2 > .p2-title, .page2 > .p2-hint{ position:relative; z-index:2; }

  .bl-field{ position:relative; width:100%; max-width:520px; height:min(50vh, 420px); overflow:hidden; }
  .balloon{ all:unset; position:absolute; bottom:-130px; width:62px; height:120px; cursor:pointer; animation:blRise var(--dur) linear var(--delay) infinite; -webkit-tap-highlight-color:transparent; }
  .balloon .bb{ position:absolute; left:0; top:0; width:62px; height:78px; border-radius:50% 50% 47% 47%; background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 7%, var(--bc) 30%, var(--bd) 100%); box-shadow:inset -6px -8px 14px rgba(0,0,0,.18); animation:blSway 2.6s ease-in-out infinite alternate; transform-origin:50% 100%; }
  .balloon .bb::after{ content:""; position:absolute; left:50%; bottom:-7px; width:12px; height:9px; transform:translateX(-50%); background:var(--bd); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
  .balloon.gold .bb{ box-shadow:inset -6px -8px 14px rgba(0,0,0,.12), 0 0 22px rgba(255,213,138,.8); }
  .balloon.gold em{ position:absolute; inset:0; display:grid; place-items:center; font-style:normal; color:#fff; font-size:1.3rem; text-shadow:0 0 8px #FFD58A; }
  .balloon .bs{ position:absolute; left:30px; top:84px; width:1.5px; height:36px; background:rgba(255,220,230,.45); }
  .balloon:focus-visible .bb{ outline:2px solid #FFD58A; outline-offset:4px; }
  .bl-reason{ position:relative; margin:4px 0 0; min-height:2.6em; max-width:28ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.3rem, 5.6vw, 1.8rem); line-height:1.5; color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.85); }
  .bl-reason.pop{ animation:pop .5s ease both; }
  .bl-reason.big{ color:#FFD58A; text-shadow:0 0 14px rgba(255,205,120,.9); }
  @keyframes blRise{ from{ transform:translateY(0); } to{ transform:translateY(calc(-50vh - 300px)); } }
  @keyframes blSway{ from{ transform:rotate(-6deg) translateX(-6px); } to{ transform:rotate(6deg) translateX(6px); } }

  .gift{ position:relative; width:min(54vw, 210px); aspect-ratio:1; margin:34px auto 6px; cursor:pointer; animation:wiggle 2.2s ease-in-out infinite; -webkit-tap-highlight-color:transparent; }
  .gift:focus-visible{ outline:2px solid #FFD58A; outline-offset:10px; border-radius:16px; }
  .g-box{ position:absolute; left:7%; right:7%; bottom:0; height:62%; border-radius:8px; background:linear-gradient(90deg, transparent 44%, #FFD58A 44% 56%, transparent 56%), linear-gradient(#E0457B, #A8154A); box-shadow:0 18px 40px -14px rgba(255,80,140,.8); z-index:1; }
  .g-lid{ position:absolute; left:0; right:0; top:24%; height:18%; border-radius:8px; z-index:2; background:linear-gradient(90deg, transparent 44%, #FFE7A8 44% 56%, transparent 56%), linear-gradient(#FF6E97, #C2185B); transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s ease; }
  .g-bow{ position:absolute; left:50%; bottom:88%; width:76px; height:40px; transform:translateX(-50%); }
  .g-bow::before, .g-bow::after{ content:""; position:absolute; bottom:0; width:38px; height:30px; border:7px solid #FFD58A; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }
  .g-bow::before{ left:0; transform:rotate(-20deg); }
  .g-bow::after{ right:0; transform:rotate(20deg); }
  .g-rays{ position:absolute; left:50%; top:55%; width:320%; aspect-ratio:1; z-index:0; opacity:0; background:repeating-conic-gradient(rgba(255,213,138,.55) 0 5deg, transparent 5deg 16deg); -webkit-mask:radial-gradient(closest-side, #000 10%, transparent 70%); mask:radial-gradient(closest-side, #000 10%, transparent 70%); transform:translate(-50%,-50%) scale(.2); transition:opacity .8s ease, transform 1s ease; }
  .gift.open{ animation:none; }
  .gift.open .g-lid{ transform:translate(60px,-170px) rotate(40deg); opacity:0; }
  .gift.open .g-rays{ opacity:1; transform:translate(-50%,-50%) scale(1); animation:raysSpin 10s linear infinite; }
  .g-card{ position:relative; z-index:3; max-width:300px; padding:16px 22px; border-radius:18px; background:linear-gradient(160deg,#FFF7F2,#FFE4EC); box-shadow:0 0 0 2px rgba(255,213,138,.6), 0 20px 50px -20px rgba(255,90,140,.9); opacity:0; transform:translateY(40px) scale(.8); transition:opacity .9s ease .7s, transform .9s cubic-bezier(.2,.8,.2,1) .7s; }
  .g-card.pop{ animation:pop .45s cubic-bezier(.3,1.4,.5,1) both; }
  .g-hint{ position:relative; margin:10px 0 0; min-height:1.4em; font-size:.85rem; color:rgba(255,220,230,.7); }
  .g-card p{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.3rem; line-height:1.6; color:#8A1C3F; }
  .g-card b{ display:block; color:#C2185B; font-size:1.15em; }
  .page2.opened .g-card{ opacity:1; transform:none; }
  @keyframes wiggle{ 0%,70%,100%{ transform:rotate(0); } 76%{ transform:rotate(-5deg); } 82%{ transform:rotate(5deg); } 88%{ transform:rotate(-3deg); } 94%{ transform:rotate(2deg); } }
  @keyframes raysSpin{ from{ transform:translate(-50%,-50%) scale(1) rotate(0); } to{ transform:translate(-50%,-50%) scale(1) rotate(360deg); } }

  .treepg{ background:radial-gradient(70% 45% at 80% 12%, rgba(255,230,190,.12), transparent 60%), radial-gradient(80% 60% at 50% 40%, #3A0F2E, #160616 60%, #080309); }
  .tree-cv{ position:relative; width:100%; max-width:500px; height:min(50vh, 440px); touch-action:manipulation; cursor:pointer; }
  .tr-actions{ position:relative; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:4px; opacity:0; pointer-events:none; transition:opacity .8s ease; }
  .page2.done .tr-actions{ opacity:1; pointer-events:auto; }
  .tr-actions button[disabled]{ opacity:.55; cursor:default; }
  .tree-line{ position:relative; margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.3rem, 5.6vw, 1.8rem); color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.85); opacity:0; transition:opacity 1.2s ease; }
  .page2.done .tree-line{ opacity:1; }

  .qz-n{ margin:10px 0 0; font-size:.85rem; color:#FFD58A; letter-spacing:.04em; }
  .qz-q{ margin:0; max-width:24ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.5rem, 6.5vw, 2.1rem); line-height:1.5; color:#FFE3EC; }
  .qz-q.pop, .qz-a.pop{ animation:pop .5s ease both; }
  .qz-opts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:14px; max-width:420px; }
  .qz-opt{ all:unset; box-sizing:border-box; cursor:pointer; min-width:96px; padding:12px 18px; border-radius:14px; text-align:center; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:1rem; color:#FFE3EC; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,160,190,.5); transition:transform .2s ease, background .3s ease; }
  .qz-opt:hover{ background:rgba(255,255,255,.14); }
  .qz-opt:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .qz-opt.picked{ background:linear-gradient(120deg,#FF7AA2,#FFD58A); color:#2A0714; transform:scale(1.06); }
  .qz-opt[disabled]{ cursor:default; }
  .qz-a{ margin:14px 0 0; min-height:2.4em; max-width:26ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.2rem, 5vw, 1.55rem); line-height:1.5; color:#FFD58A; text-shadow:0 0 12px rgba(255,205,120,.7); }

  .lanternpg{ background:radial-gradient(80% 60% at 50% 25%, #2A1440, #120818 60%, #05020A); }
  .ln-sky{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
  .ln-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .bg-ln{ position:absolute; bottom:-130px; width:var(--s); opacity:0; filter:drop-shadow(0 0 14px rgba(255,170,80,.85)) blur(var(--b)); animation:bgRise var(--d) cubic-bezier(.3,0,.6,1) var(--dl) forwards; }
  .bg-ln svg{ width:100%; height:auto; display:block; }
  @keyframes bgRise{ 0%{ opacity:0; transform:translate(0,0) scale(1); } 10%{ opacity:.95; } 50%{ transform:translate(calc(var(--dx) * .5), -55vh) scale(.8); } 100%{ opacity:0; transform:translate(var(--dx), -118vh) scale(.45); } }
  .lanternpg .lantern, .lanternpg .ln-form, .lanternpg .ln-res, .lanternpg .ln-count{ position:relative; z-index:2; }
  .lantern{ width:84px; height:116px; margin:18px auto 8px; filter:drop-shadow(0 0 24px rgba(255,160,70,.75)) drop-shadow(0 0 60px rgba(255,120,60,.35)); }
  .lantern svg{ width:100%; height:100%; display:block; }
  .lantern.relight{ animation:introIn 1s ease both; }
  .ln-flame{ transform-box:fill-box; transform-origin:50% 100%; animation:flame .9s ease-in-out infinite alternate; }
  @keyframes flame{ from{ transform:scale(1,1); opacity:.85; } to{ transform:scale(.82,1.18); opacity:1; } }
  .ln-wish{ position:absolute; left:50%; top:calc(100% + 10px); width:240px; transform:translateX(-50%); font-size:.9rem; color:#FFE7C2; text-shadow:0 0 8px rgba(255,170,80,.8); }
  .lantern.fly{ animation:lnFly 4.2s cubic-bezier(.4,0,.6,1) forwards; }
  .ln-form{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:26px; transition:opacity .6s ease; }
  .ln-form.hide{ opacity:0; pointer-events:none; }
  .ln-chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:440px; }
  .ln-chips button{ all:unset; box-sizing:border-box; cursor:pointer; padding:7px 13px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.85rem; color:#FFE7C2; background:rgba(255,190,120,.1); box-shadow:inset 0 0 0 1px rgba(255,190,120,.4); }
  .ln-chips button:hover{ background:rgba(255,190,120,.2); }
  .ln-chips button:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .ln-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .ln-form input{ all:unset; box-sizing:border-box; width:min(70vw, 260px); padding:12px 16px; border-radius:999px; text-align:right; direction:rtl; font-family:'Tajawal','Segoe UI',sans-serif; font-size:1rem; color:#FFE7C2; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,190,120,.5); }
  .ln-form input::placeholder{ color:rgba(255,231,194,.5); }
  .ln-form input:focus-visible{ box-shadow:inset 0 0 0 2px #FFD58A; }
  .ln-res{ margin:10px 0 0; min-height:2.4em; max-width:26ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.3rem, 5.6vw, 1.8rem); line-height:1.5; color:#FFE7C2; text-shadow:0 0 12px rgba(255,170,80,.8); }
  .ln-res.pop{ animation:pop .5s ease both; }
  .ln-count{ margin:2px 0 0; min-height:1.3em; font-size:.9rem; color:#FFD58A; }
  @keyframes lnFly{ 0%{ transform:translate(0,0) scale(1); opacity:1; } 30%{ transform:translate(-18px,-18vh) scale(.8); } 60%{ transform:translate(16px,-34vh) scale(.5); } 90%{ transform:translate(-6px,-46vh) scale(.2); opacity:1; } 100%{ transform:translate(0,-48vh) scale(.08); opacity:0; } }

  .tc-pad{ position:relative; width:190px; height:190px; margin:30px auto 10px; border-radius:50%; display:grid; place-items:center; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
    background:repeating-radial-gradient(circle, rgba(255,160,190,.18) 0 2px, transparent 2px 11px), conic-gradient(#FFD58A calc(var(--p,0) * 1turn), rgba(255,255,255,.08) 0);
    -webkit-mask:radial-gradient(circle, #000 0 100%); box-shadow:0 0 0 2px rgba(255,160,190,.4), 0 0 calc(10px + var(--p,0) * 50px) rgba(255,90,140,.7); }
  .tc-pad:focus-visible{ outline:2px solid #FFD58A; outline-offset:6px; }
  .tc-pad::before{ content:""; position:absolute; inset:8px; border-radius:50%; background:radial-gradient(circle, #3A0F28, #1A0612); }
  .tc-heart{ position:relative; width:40%; height:40%; transform:scale(calc(.3 + var(--p,0) * .5)); opacity:calc(.25 + var(--p,0) * .75); transition:transform .2s ease; }
  .tc-heart svg{ width:100%; height:100%; fill:#FF5C8A; filter:drop-shadow(0 0 12px rgba(255,90,140,.9)); }
  .touched .tc-heart{ transform:scale(1.2); opacity:1; animation:heartbeat 1.2s ease-in-out infinite; }
  .tc-res{ margin:8px 0 0; min-height:2.4em; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.5rem, 6.5vw, 2.1rem); color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.9); }
  .tc-res.pop{ animation:pop .6s ease both; }

  .clk{ width:min(62vw, 230px); aspect-ratio:1; margin:24px auto 8px; cursor:pointer; filter:drop-shadow(0 0 18px rgba(255,90,140,.5)); -webkit-tap-highlight-color:transparent; }
  .clk:focus-visible{ outline:2px solid #FFD58A; outline-offset:8px; border-radius:50%; }
  .clk svg{ width:100%; height:100%; display:block; }
  .clk-h, .clk-m{ transform-box:view-box; transform-origin:100px 100px; }
  .clk.settle .clk-h, .clk.settle .clk-m{ transition:transform .9s cubic-bezier(.2,.8,.2,1); }
  .clk-say{ margin:8px 0 0; min-height:2.6em; max-width:24ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.3rem, 5.8vw, 1.8rem); line-height:1.5; color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.85); }
  .clk-say.pop{ animation:pop .5s ease both; }

  .nt-field{ position:relative; width:100%; max-width:520px; height:min(46vh, 400px); overflow:hidden; }
  .note{ all:unset; box-sizing:border-box; position:absolute; top:-70px; width:56px; height:46px; border-radius:6px; cursor:pointer; display:grid; place-items:center; background:linear-gradient(160deg,#FFF7EC,#FFE0E8); box-shadow:0 8px 18px -8px rgba(0,0,0,.5); color:#C2185B; font-size:1.2rem; animation:ntFall var(--dur) linear var(--delay) infinite; -webkit-tap-highlight-color:transparent; }
  .note::before{ content:""; position:absolute; top:0; right:0; width:14px; height:14px; background:linear-gradient(225deg, #E9B9BD 50%, transparent 50%); border-radius:0 6px 0 0; }
  .note:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .nt-msg{ margin:6px 0 0; min-height:1.6em; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(2rem, 9vw, 3rem); color:#FFE3EC; text-shadow:0 0 14px rgba(255,90,140,.95), 0 0 34px rgba(255,90,140,.5); }
  .nt-msg.pop{ animation:pop .5s ease both; }
  @keyframes ntFall{ 0%{ transform:translateY(0) rotate(-12deg); } 50%{ transform:translateY(calc(23vh + 230px)) rotate(12deg); } 100%{ transform:translateY(calc(46vh + 470px)) rotate(-10deg); } }

  .sn-grid{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; width:100%; max-width:420px; margin:22px 0 6px; direction:rtl; }
  .sn-box{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 4px 10px; border-radius:16px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,160,190,.35), 0 10px 30px -14px rgba(255,90,140,.7); }
  .sn-box b{ font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:clamp(1.6rem, 8vw, 2.4rem); line-height:1.1; color:#FFE3EC; font-variant-numeric:tabular-nums; text-shadow:0 0 14px rgba(255,90,140,.8); }
  .sn-box b.tick{ animation:tickIn .35s cubic-bezier(.2,.8,.2,1); }
  .sn-box span{ font-size:.8rem; color:#FFD58A; }
  .sn-line{ position:relative; margin:10px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.4rem, 6vw, 1.9rem); color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.85); }

  .gm-legend{ position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:4px 0 0; font-size:.8rem; color:rgba(255,220,230,.75); }
  .gm-legend b{ color:#FFD58A; }
  .gm-top{ margin:10px 0 0; font-weight:700; font-size:1.1rem; color:#FFD58A; font-variant-numeric:tabular-nums; }
  .gm-top i{ font-style:normal; opacity:.5; margin:0 6px; }
  .gm-cv{ width:100%; max-width:460px; height:min(42vh, 400px); border-radius:18px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,160,190,.3); touch-action:none; cursor:grab; }
  .gm-start{ position:relative; margin-top:10px; }
  .gm-res{ margin:6px 0 0; min-height:1.8em; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.3rem, 5.6vw, 1.8rem); color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.85); }
  .gm-res.pop{ animation:pop .5s ease both; }

  .lk-env{ position:relative; width:min(78vw, 320px); aspect-ratio:1.5; margin:20px 0 4px; border-radius:18px; cursor:pointer; overflow:hidden; background:linear-gradient(160deg,#FFF7F2,#FFE4EC); box-shadow:0 0 0 2px rgba(255,213,138,.6), 0 20px 60px -20px rgba(255,90,140,.8); }
  .lk-env::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(165deg,#E0457B,#A8154A); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transition:clip-path 1s cubic-bezier(.2,.8,.2,1); }
  .lk-env::after{ content:""; position:absolute; left:0; right:0; top:0; height:55%; z-index:2; background:linear-gradient(180deg,#FF6E97,#C2185B); clip-path:polygon(0 0,100% 0,50% 100%); transition:transform 1s ease, opacity 1s ease; }
  .lk-lock{ position:absolute; left:50%; top:52%; z-index:3; width:58px; height:58px; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; color:#FFD58A; background:#2A0714; box-shadow:0 0 0 3px #FFD58A, 0 0 26px rgba(255,205,120,.7); transition:transform .8s cubic-bezier(.3,1.4,.5,1), opacity .8s ease; }
  .lk-lock svg{ width:28px; height:28px; }
  .lk-env.shake .lk-lock{ animation:lockShake .5s ease; }
  .lk-msg{ position:absolute; inset:0; display:grid; place-items:center; padding:16px; }
  .lk-msg p{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1rem, 4.4vw, 1.25rem); line-height:1.7; color:#8A1C3F; }
  .lk-msg b{ display:block; color:#C2185B; }
  .lk-msg small{ display:block; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.8rem; color:#8A1C3F; opacity:.8; }
  .lk-env.open::before{ clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%); }
  .lk-env.open::after{ transform:translateY(-110%); opacity:0; }
  .lk-env.open .lk-lock{ transform:translate(-50%,-50%) scale(0) rotate(40deg); opacity:0; }
  .lk-grid .sn-box{ padding:10px 4px 8px; }
  .lk-grid .sn-box b{ font-size:clamp(1.3rem, 6.5vw, 1.9rem); }
  .lk-say{ margin:8px 0 0; min-height:1.8em; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.2rem, 5vw, 1.6rem); color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.85); }
  .lk-say.pop{ animation:pop .5s ease both; }
  @keyframes lockShake{ 0%,100%{ transform:translate(-50%,-50%) rotate(0); } 20%{ transform:translate(-50%,-50%) rotate(-14deg); } 40%{ transform:translate(-50%,-50%) rotate(12deg); } 60%{ transform:translate(-50%,-50%) rotate(-8deg); } 80%{ transform:translate(-50%,-50%) rotate(5deg); } }

  .ln-res small{ display:block; margin-top:6px; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.9rem; font-weight:500; color:#FFD58A; }

  .endpage{ justify-content:flex-start; overflow-y:auto; }
  .endpage > :first-child + *{ margin-top:auto; }
  .endpage > :last-child{ margin-bottom:auto; }
  .endpage.on > :nth-child(6), .endpage.on > :nth-child(7){ animation-delay:4.2s; }
  .end-menu-t{ margin:18px 0 0; font-size:.95rem; color:rgba(255,220,230,.8); }
  .end-menu{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; width:100%; max-width:460px; margin-top:8px; }
  .end-menu button{ all:unset; box-sizing:border-box; cursor:pointer; padding:10px 6px; border-radius:12px; text-align:center; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.85rem; color:#FFE3EC; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,160,190,.35); }
  .end-menu button:hover{ background:rgba(255,255,255,.13); }
  .end-menu button:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }

  .mt-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; width:100%; max-width:380px; margin-top:12px; }
  .mt-card{ all:unset; box-sizing:border-box; display:block; aspect-ratio:3 / 4; perspective:700px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .mt-card:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; border-radius:12px; }
  .mt-in{ position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,.7,.3,1); }
  .mt-card.flip .mt-in{ transform:rotateY(180deg); }
  .mt-back, .mt-front{ position:absolute; inset:0; display:grid; place-items:center; border-radius:12px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
  .mt-back{ background:radial-gradient(circle at 50% 30%, rgba(255,215,140,.2), transparent 60%), linear-gradient(160deg,#A8174C,#6B0F30); box-shadow:inset 0 0 0 2px rgba(255,213,138,.55), 0 8px 18px -10px rgba(0,0,0,.6); }
  .mt-back svg{ width:54%; height:auto; }
  .mt-front{ transform:rotateY(180deg); background:linear-gradient(160deg,#FFF9F2,#F1DFCC); box-shadow:inset 0 0 0 2px #D9A55B; }
  .mt-front svg{ width:60%; height:60%; }
  .mt-card.matched .mt-front{ box-shadow:inset 0 0 0 2px #FFD58A, 0 0 20px rgba(255,213,138,.85); }
  .mt-card.matched{ animation:matchPop .5s ease; }
  @keyframes matchPop{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.1); } }

  .ht-field{ position:relative; width:100%; max-width:460px; height:min(46vh, 400px); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,160,190,.3); touch-action:manipulation; }
  .ht-lips{ all:unset; position:absolute; width:78px; height:48px; transform:translate(-50%,-50%) scale(0); cursor:pointer; animation:htPop var(--life) ease forwards; -webkit-tap-highlight-color:transparent; }
  .ht-lips svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 0 10px rgba(255,80,130,.7)); }
  .ht-lips.gold svg{ filter:drop-shadow(0 0 14px rgba(255,213,138,.95)) sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.15); }
  @keyframes htPop{ 0%{ transform:translate(-50%,-50%) scale(0) rotate(-12deg); } 18%{ transform:translate(-50%,-50%) scale(1.15) rotate(4deg); } 30%{ transform:translate(-50%,-50%) scale(1) rotate(0); } 75%{ opacity:1; } 100%{ transform:translate(-50%,-50%) scale(.3); opacity:0; } }

  .bell{ all:unset; box-sizing:border-box; position:fixed; z-index:55; left:14px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#2A0714; background:radial-gradient(circle at 35% 30%, #FFF1C4, #D9A55B 75%); box-shadow:0 0 0 3px rgba(122,18,54,.85), 0 10px 26px -8px rgba(255,90,140,.9), 0 0 24px rgba(255,213,138,.6); animation:bellIn .8s cubic-bezier(.3,1.4,.5,1) both; -webkit-tap-highlight-color:transparent; }
  .bell svg{ width:24px; height:24px; transform-origin:50% 12%; animation:bellRing 2.6s ease-in-out infinite; }
  .bell .cnt{ position:absolute; top:-5px; right:-5px; min-width:22px; height:22px; padding:0 5px; border-radius:999px; display:grid; place-items:center; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.75rem; color:#fff; background:#C2185B; box-shadow:0 0 0 2px #FFF3F7; }
  .bell-tip{ position:absolute; left:0; bottom:calc(100% + 10px); white-space:nowrap; padding:7px 13px; border-radius:12px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.82rem; color:#8A1C3F; background:#FFF3F7; box-shadow:0 8px 20px -8px rgba(0,0,0,.45); animation:tipShow 7s ease-in-out infinite; pointer-events:none; max-width:calc(100vw - 44px); overflow:hidden; text-overflow:ellipsis; }
  .bell-tip::after{ content:""; position:absolute; left:20px; top:100%; border:6px solid transparent; border-top-color:#FFF3F7; }
  .bell:focus-visible{ outline:2px solid #FFD58A; outline-offset:4px; }
  @keyframes bellIn{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
  @keyframes bellRing{ 0%,64%,100%{ transform:rotate(0); } 68%{ transform:rotate(16deg); } 72%{ transform:rotate(-14deg); } 76%{ transform:rotate(10deg); } 80%{ transform:rotate(-6deg); } 84%{ transform:rotate(3deg); } }
  body:has(.page2.on) .bell-tip, body:has(.lovepage.on) .bell-tip{ display:none; }
  body:has(.page2.on) .bell, body:has(.page2.on) .duy-bell, body:has(.lovepage.on) .bell, body:has(.lovepage.on) .duy-bell{ width:44px; height:44px; bottom:calc(env(safe-area-inset-bottom,0px) + 10px); }
  @keyframes tipShow{ 0%,5%{ opacity:0; transform:translateY(6px); } 10%,48%{ opacity:1; transform:none; } 55%,100%{ opacity:0; transform:translateY(6px); } }
  .menu-new::after{ content:"جديد"; display:inline-block; margin-inline-start:6px; padding:1px 7px; border-radius:999px; font-size:.7rem; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); vertical-align:1px; }

  .celeb{ position:fixed; inset:0; z-index:29; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 16px; text-align:center; background:radial-gradient(70% 55% at 50% 45%, rgba(90,15,50,.92), rgba(20,5,15,.96)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .celeb > *{ animation:kIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .celeb > :nth-child(2){ animation-delay:.4s; } .celeb > :nth-child(3){ animation-delay:1.1s; } .celeb > :nth-child(4){ animation-delay:2s; }
  .cl-top{ margin:0; font-weight:700; letter-spacing:.02em; color:#FFD58A; }
  .cl-big{ margin:0; max-width:14ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(2.4rem, 11vw, 3.8rem); line-height:1.35; color:#FFE3EC; text-shadow:0 0 16px rgba(255,90,140,.95), 0 0 44px rgba(255,90,140,.55); }
  .cl-sub{ margin:0 0 14px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.6rem, 7vw, 2.3rem); color:#FFD58A; text-shadow:0 0 14px rgba(255,205,120,.85); }

  .wh-wrap{ position:relative; width:calc(100% - 28px); max-width:330px; aspect-ratio:1; margin-top:14px; }
  .wh-cv{ width:100%; height:100%; display:block; border-radius:50%; box-shadow:0 0 0 6px #D9A55B, 0 0 0 9px #7A1236, 0 20px 50px -14px rgba(255,90,140,.8); transition:transform 4.8s cubic-bezier(.12,.72,.14,1); }
  .wh-pointer{ position:absolute; z-index:2; left:50%; top:-14px; width:30px; height:38px; transform:translateX(-50%); background:linear-gradient(#FFE7A8,#C9953F); clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
  .wh-spin{ all:unset; box-sizing:border-box; position:absolute; z-index:2; left:50%; top:50%; width:26%; aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; cursor:pointer; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.4rem; color:#2A0714; background:radial-gradient(circle at 35% 30%, #FFF1C4, #D9A55B 70%); box-shadow:0 0 0 4px #7A1236, 0 8px 20px -6px rgba(0,0,0,.6); }
  .wh-spin[disabled]{ cursor:default; filter:saturate(.6); }
  .wh-spin:focus-visible{ outline:2px solid #FFD58A; outline-offset:4px; }

  .pz-board{ position:relative; width:100%; max-width:320px; aspect-ratio:1; margin-top:12px; border-radius:14px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 2px rgba(217,165,91,.5); }
  .pz-tile{ all:unset; box-sizing:border-box; position:absolute; width:calc(33.333% - 4px); height:calc(33.333% - 4px); border-radius:10px; cursor:pointer; background-size:300% 300%; box-shadow:inset 0 0 0 1.5px rgba(255,231,168,.6), 0 6px 14px -8px rgba(0,0,0,.6); transition:left .18s ease, top .18s ease, opacity .6s ease; }
  .pz-tile:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .pz-board.solved{ box-shadow:inset 0 0 0 2px #FFD58A, 0 0 34px rgba(255,213,138,.7); }
  .pz-board.solved .pz-tile{ box-shadow:none; border-radius:0; cursor:default; }

  .dl-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; width:100%; max-width:360px; margin-top:16px; }
  .dl-cards .mt-front{ padding:6px; }
  .dl-cards .mt-front b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.6rem; color:#C2185B; }
  .dl-card.chosen .mt-front{ box-shadow:inset 0 0 0 2px #FFD58A, 0 0 24px rgba(255,213,138,.9); }
  .dl-msg{ margin:18px 0 0; min-height:2.8em; max-width:22ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.5rem, 6.8vw, 2.2rem); line-height:1.5; color:#FFE3EC; text-shadow:0 0 14px rgba(255,90,140,.9); }
  .dl-msg.pop{ animation:pop .6s ease both; }
  .dl-note{ margin:6px 0 0; min-height:1.3em; font-size:.9rem; color:#FFD58A; }

  .hub-link{ display:flex; justify-content:center; margin-top:12px; }
  .hub-link button{ all:unset; cursor:pointer; padding:8px 14px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.92rem; color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
  .hub-link button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .hubpg{ justify-content:flex-start; padding-top:calc(env(safe-area-inset-top,0px) + 72px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px); }
  .hub-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; width:100%; max-width:460px; margin-top:16px; }
  .hub-card{ all:unset; box-sizing:border-box; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:92px; padding:12px 6px 10px; border-radius:16px; cursor:pointer; text-align:center; background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px rgba(255,160,190,.35), 0 10px 24px -14px rgba(255,90,140,.8); transition:transform .2s ease, box-shadow .2s ease; animation:kIn .6s cubic-bezier(.2,.7,.2,1) both; }
  .hub-card:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px #FFD58A, 0 12px 28px -12px rgba(255,90,140,.9); }
  .hub-card:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .hub-card svg{ width:34px; height:34px; }
  .hub-card span{ font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.82rem; line-height:1.3; color:#FFE3EC; }
  .hub-card .hb{ position:absolute; top:6px; left:6px; padding:1px 7px; border-radius:999px; font-size:.65rem; font-weight:700; }
  .hub-card .hb.new{ color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); }
  .hub-card .hb.upd{ color:#2A0714; background:linear-gradient(120deg,#FFD58A,#FFF1C4); box-shadow:0 0 10px rgba(255,213,138,.7); }
  .hub-card .hb.done{ color:#FFD58A; background:rgba(255,213,138,.14); }
  .hub-card.feat{ grid-column:span 3; flex-direction:row; min-height:70px; gap:12px; background:linear-gradient(120deg, rgba(194,24,91,.45), rgba(217,165,91,.3)); box-shadow:inset 0 0 0 1.5px #D9A55B, 0 14px 30px -14px rgba(255,90,140,.9); }
  .hub-card.feat span{ font-size:1rem; }

  .sm-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; width:100%; max-width:280px; margin-top:16px; }
  .sm-h{ all:unset; box-sizing:border-box; aspect-ratio:1; display:grid; place-items:center; border-radius:24px; cursor:pointer; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,160,190,.3); transition:transform .15s ease, filter .15s ease; -webkit-tap-highlight-color:transparent; }
  .sm-h svg{ width:68%; height:68%; opacity:.45; transition:opacity .15s ease, filter .15s ease, transform .15s ease; }
  .sm-h.lit svg{ opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 18px currentColor) brightness(1.25); }
  .sm-h.lit{ background:rgba(255,255,255,.12); }
  .sm-h[disabled]{ cursor:default; }
  .sm-h:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }

  .tw-cv{ touch-action:none; }

  .gm-bar{ position:relative; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:10px 0 0; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.95rem; color:#FFD58A; }
  .gm-bar b{ color:#fff; font-variant-numeric:tabular-nums; }
  .gm-combo{ min-width:4.5em; color:#FF9DBB; font-weight:700; }
  .gm-combo.pop{ animation:pop .35s ease both; }
  .p2-hint .hl{ color:#FFD58A; }
  .cd{ position:fixed; inset:0; z-index:34; display:grid; place-items:center; pointer-events:none; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(5rem, 30vw, 9rem); color:#FFE3EC; text-shadow:0 0 30px rgba(255,90,140,.95), 0 0 70px rgba(255,90,140,.5); }
  .cd.go{ animation:cdPop .62s ease both; }
  @keyframes cdPop{ 0%{ opacity:0; transform:scale(2.2); } 30%{ opacity:1; transform:scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:scale(.7); } }
  .gm-res{ font-family:'Aref Ruqaa','Traditional Arabic',serif; }
  .rs-stars{ display:flex; gap:8px; justify-content:center; margin:4px 0 6px; direction:ltr; }
  .rs-stars i{ width:36px; height:36px; display:block; background:#5A2A40; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
  .rs-stars i.on{ background:linear-gradient(#FFF1C4,#D9A55B); animation:starIn .55s cubic-bezier(.3,1.6,.5,1) both; }
  .rs-stars i:nth-child(2){ animation-delay:.18s; } .rs-stars i:nth-child(3){ animation-delay:.36s; }
  @keyframes starIn{ from{ transform:scale(.45) rotate(-30deg); opacity:.55; } to{ transform:none; opacity:1; } }
  .rs-t{ display:block; font-size:clamp(1.3rem, 5.6vw, 1.8rem); color:#FFE3EC; }
  .rs-s{ display:block; margin-top:2px; font-size:clamp(1.1rem, 4.6vw, 1.4rem); color:#FFD58A; }
  .rs-rec{ display:inline-block; margin-top:8px; padding:3px 12px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.8rem; font-weight:700; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); animation:pop .6s ease .5s both; }

  .mt-card.peek .mt-in{ transform:rotateY(180deg); }
  .mt-grid.l2{ max-width:400px; }

  .ht-field.shake{ animation:shakeHard .08s linear 5; }
  .ht-field.fever{ box-shadow:inset 0 0 0 2px #FFD58A, 0 0 34px rgba(255,213,138,.65); animation:feverGlow .6s ease-in-out infinite alternate; }
  @keyframes feverGlow{ from{ background:rgba(255,213,138,.04); } to{ background:rgba(255,213,138,.12); } }
  .ht-broken{ all:unset; position:absolute; width:52px; height:48px; transform:translate(-50%,-50%) scale(0); cursor:pointer; animation:htPop var(--life) ease forwards; }
  .ht-broken svg{ width:100%; height:100%; }

  .wh-bulb{ position:absolute; z-index:1; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#FFF1C4; box-shadow:0 0 10px #FFD58A, 0 0 3px #fff; animation:bulb 1.2s ease-in-out infinite; }
  .wh-bulb:nth-child(odd){ animation-delay:.6s; }
  .wh-wrap.spinning .wh-bulb{ animation-duration:.25s; }
  @keyframes bulb{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
  .wh-pointer.wob{ animation:wob .18s ease; }
  @keyframes wob{ 0%{ transform:translateX(-50%) rotate(0); } 40%{ transform:translateX(-50%) rotate(-18deg); } 100%{ transform:translateX(-50%) rotate(0); } }
  .wh-got{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:360px; margin-top:10px; }
  .wh-got span{ padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:700; color:rgba(255,220,230,.45); box-shadow:inset 0 0 0 1px rgba(255,160,190,.25); }
  .wh-got span.got{ color:#2A0714; background:linear-gradient(120deg,#FF9DBB,#FFD58A); box-shadow:none; }
  .wh-got p{ width:100%; margin:0 0 2px; font-size:.85rem; color:#FFD58A; }

  .seg-row{ position:relative; display:flex; gap:0; margin-top:10px; padding:4px; border-radius:999px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,160,190,.3); }
  .seg{ all:unset; cursor:pointer; padding:7px 16px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.88rem; color:#FFD9E4; }
  .seg.on{ color:#2A0714; background:linear-gradient(120deg,#FF9DBB,#FFD58A); }
  .seg:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .pz-wrap{ position:relative; width:100%; max-width:320px; margin-top:12px; }
  .pz-wrap .pz-board{ margin-top:0; }
  .pz-ghost{ position:absolute; inset:0; border-radius:14px; background-size:cover; opacity:0; pointer-events:none; transition:opacity .35s ease; }
  .pz-ghost.on{ opacity:.85; }

  .dl-streak{ margin:6px 0 0; min-height:1.3em; font-weight:700; color:#FFD58A; }
  .dl-cards .dl-card{ transition:transform .35s cubic-bezier(.3,.7,.3,1), opacity .4s ease; }
  .dl-album{ display:grid; gap:8px; width:100%; max-width:380px; margin-top:10px; max-height:40vh; overflow-y:auto; padding:4px; }
  .dl-album p{ margin:0; padding:10px 14px; border-radius:12px; text-align:right; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.05rem; line-height:1.5; color:#8A1C3F; background:linear-gradient(160deg,#FFF9F2,#F1DFCC); }
  .dl-album .empty{ background:none; color:rgba(255,220,230,.6); text-align:center; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.9rem; }

  .sm-status{ margin:8px 0 0; min-height:1.5em; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.35rem; color:#FFE3EC; }
  .sm-status.turn{ color:#FFD58A; animation:pop .4s ease both; }
  .sm-dots{ display:flex; gap:6px; justify-content:center; min-height:12px; margin-top:12px; }
  .sm-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,220,230,.25); }
  .sm-dots i.ok{ background:#FFD58A; box-shadow:0 0 8px #FFD58A; }

  .bl-album-t{ all:unset; box-sizing:border-box; cursor:pointer; margin-top:8px; padding:6px 14px; border-radius:999px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.82rem; color:#FFD58A; box-shadow:inset 0 0 0 1px rgba(255,213,138,.5); }
  .bl-album-t:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .bl-album{ display:grid; gap:6px; width:100%; max-width:380px; margin-top:8px; max-height:32vh; overflow-y:auto; padding:4px; }
  .bl-album p{ margin:0; padding:8px 14px; border-radius:12px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:.95rem; color:#FFE3EC; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,160,190,.28); animation:kIn .4s ease both; }

  .g-more{ margin:10px 0 0; min-height:1.6em; max-width:26ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.15rem; color:#FFD58A; text-shadow:0 0 10px rgba(255,205,120,.6); }
  .g-more.pop{ animation:pop .5s ease both; }

  .qz-dots{ display:flex; gap:6px; justify-content:center; margin:6px 0 2px; }
  .qz-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,220,230,.25); transition:background .3s ease, transform .3s ease; }
  .qz-dots i.on{ background:#FF9DBB; }
  .qz-dots i.now{ background:#FFD58A; box-shadow:0 0 8px #FFD58A; transform:scale(1.3); }

  .tc-stage{ margin:6px 0 0; min-height:1.3em; font-size:.85rem; font-weight:700; color:#FFD58A; opacity:0; transition:opacity .3s ease; }
  .tc-stage.show{ opacity:1; }
  .tc-stage.pop{ animation:pop .4s ease both; }

  .clk-dots{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; max-width:230px; margin-top:10px; }
  .clk-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,220,230,.25); }
  .clk-dots i.on{ background:#FFD58A; box-shadow:0 0 6px #FFD58A; }

  .nt-count{ margin:4px 0 0; font-size:.85rem; color:#FFD58A; }
  .nt-echo{ margin:14px 0 0; max-width:24ch; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.25rem; line-height:1.7; color:#FFE3EC; text-shadow:0 0 12px rgba(255,90,140,.8); }
  .nt-echo.show{ animation:kIn .8s ease both; }

  .duy-bell{ all:unset; box-sizing:border-box; position:fixed; z-index:56; right:14px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#2A0714; background:radial-gradient(circle at 35% 30%, #FFF1C4, #D9A55B 75%); box-shadow:0 0 0 3px rgba(122,18,54,.85), 0 10px 26px -8px rgba(255,90,140,.9), 0 0 24px rgba(255,213,138,.6); animation:bellIn .8s cubic-bezier(.3,1.4,.5,1) both; -webkit-tap-highlight-color:transparent; }
  .duy-bell svg{ width:22px; height:22px; }
  .duy-bell .cnt{ position:absolute; top:-5px; left:-5px; min-width:22px; height:22px; padding:0 5px; border-radius:999px; display:grid; place-items:center; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.75rem; color:#fff; background:#C2185B; box-shadow:0 0 0 2px #FFF3F7; }
  .duy-bell[hidden]{ display:none; }
  .duy-bell:focus-visible{ outline:2px solid #FFD58A; outline-offset:4px; }
  .duy-bell .bell-tip{ left:auto; right:0; animation-delay:-3.5s; }
  .duy-bell .bell-tip::after{ left:auto; right:20px; }

  .duy-panel{ position:fixed; inset:0; z-index:58; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,3,10,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .4s ease; }
  .duy-panel.on{ opacity:1; pointer-events:auto; }
  .duy-card{ position:relative; width:100%; max-width:400px; max-height:82vh; overflow-y:auto; padding:52px 24px 26px; border-radius:22px; background:var(--card); box-shadow:0 30px 70px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(217,165,91,.4); }
  .duy-title{ margin:0 0 4px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.6rem; color:var(--accent); }
  .duy-sub{ margin:0 0 16px; text-align:center; font-size:.85rem; color:var(--ink-soft); }
  .duy-list{ display:flex; flex-direction:column; gap:10px; }
  .duy-day{ margin:6px 2px -2px; font-size:.74rem; font-weight:700; color:var(--accent); }
  .duy-bell.ring{ animation:duyRing .9s ease; }
  @keyframes duyRing{ 0%,100%{ transform:none; } 15%{ transform:rotate(-16deg); } 30%{ transform:rotate(14deg); } 45%{ transform:rotate(-10deg); } 60%{ transform:rotate(6deg); } }
  .duy-note{ position:relative; padding:12px 16px; border-radius:14px; background:var(--bg-2); box-shadow:inset 0 0 0 1px rgba(217,165,91,.3); animation:kIn .5s ease both; }
  .duy-note.unread{ box-shadow:inset 0 0 0 1.5px #D9A55B, 0 0 16px rgba(255,213,138,.3); }
  .duy-note.unread::before{ content:"جديد"; position:absolute; top:-8px; left:10px; padding:1px 8px; border-radius:999px; font-size:.65rem; font-weight:700; color:#2A0714; background:linear-gradient(120deg,#FF9DBB,#FFD58A); }
  .duy-note p{ margin:0 0 4px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.05rem; line-height:1.6; color:var(--ink); }
  .duy-note span{ font-size:.72rem; color:var(--ink-soft); }

  .tr-fruit-layer{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:2; }
  .tr-wrap{ position:relative; width:100%; max-width:500px; }
  .tr-fruit{ all:unset; position:absolute; width:70px; height:70px; margin:-35px 0 0 -35px; cursor:pointer; pointer-events:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(255,213,138,.6)); animation:fruitDrop 1.9s cubic-bezier(.45,0,.6,1) forwards; -webkit-tap-highlight-color:transparent; }
  .tr-fruit svg{ width:100%; height:100%; display:block; animation:fruitWiggle 1.1s ease-in-out infinite alternate; }
  .tr-fruit:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; border-radius:50%; }
  .tr-fruit.fade{ transition:opacity .6s ease; opacity:0; }
  .tr-fruit.gone{ animation-play-state:paused; }
  .tr-fruit.gone svg{ animation:none; transform:scale(1.9) rotate(30deg); opacity:0; transition:transform .3s ease, opacity .3s ease; }
  @keyframes fruitDrop{ 0%{ transform:translateY(0) scale(.5); } 50%{ transform:translateY(var(--fy)) scale(1); } 62%{ transform:translateY(calc(var(--fy) - 24px)) scale(1.05,.95); } 74%{ transform:translateY(var(--fy)) scale(1.08,.92); } 84%{ transform:translateY(calc(var(--fy) - 6px)); } 100%{ transform:translateY(var(--fy)); } }
  @keyframes fruitWiggle{ from{ transform:rotate(-14deg); } to{ transform:rotate(14deg); } }

  .photo-panel{ position:fixed; inset:0; z-index:59; display:flex; align-items:center; justify-content:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; background:rgba(10,3,10,.68); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .4s ease; }
  .photo-panel.on{ opacity:1; pointer-events:auto; }
  .photo-card{ position:relative; width:100%; max-width:320px; margin:auto; text-align:center; padding:56px 26px 28px; border-radius:24px; background:var(--card); box-shadow:0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(217,165,91,.4); }
  .photo-panel.on .photo-card{ animation:kIn .6s cubic-bezier(.3,1.3,.4,1) both; }
  .photo-pop{ position:absolute; top:10px; left:50%; transform:translateX(-50%) rotate(-4deg); margin:0; padding:3px 14px; border-radius:10px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.1rem; color:#2A0714; background:linear-gradient(120deg,#FFD58A,#FF9DBB); }
  .photo-frame{ position:relative; width:min(210px,60vw); aspect-ratio:5/6; margin:2px auto 18px; padding:8px; border-radius:16px; background:linear-gradient(160deg,#FFF6E8,#F1D7B4); box-shadow:0 18px 40px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(217,165,91,.55), 0 0 36px -6px rgba(255,122,162,.6); transform:rotate(-3deg); }
  .photo-frame img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 28%; border-radius:10px; background:#2A0714; }
  .photo-tape{ position:absolute; top:-11px; left:50%; width:78px; height:22px; margin-left:-39px; transform:rotate(5deg); border-radius:3px; background:rgba(255,213,138,.8); box-shadow:0 2px 6px rgba(0,0,0,.25); }
  .photo-panel.on .photo-frame{ animation:photoPop .8s cubic-bezier(.3,1.5,.45,1) .15s both; }
  @keyframes photoPop{ 0%{ transform:scale(.15) rotate(-20deg); opacity:0; } 60%{ transform:scale(1.08) rotate(2deg); opacity:1; } 100%{ transform:rotate(-3deg); opacity:1; } }
  @media (max-height:640px){ .photo-frame{ width:min(160px,48vw); } .photo-card{ padding-top:50px; } }

  .photo-joke{ margin:-4px 0 10px; font-size:.9rem; font-weight:700; line-height:1.5; color:#B8134A; }
  .photo-joke[hidden]{ display:none; }
  .tr-fruit.gold{ filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(255,213,138,1)); }
  .tap-say.sm{ font-size:clamp(1.05rem, 4.8vw, 1.45rem); white-space:normal; width:max-content; max-width:min(84vw, 340px); text-align:center; line-height:1.5; }
  .tr-rose{ flex-basis:100%; max-width:290px; }
  @media (max-height:800px){ .tree-cv{ height:min(44vh, 440px); } }


  .tr-birds.wet .bd{ animation:birdShiver .22s ease-in-out 5; }
  @keyframes birdShiver{ 0%,100%{ transform:none; } 50%{ transform:rotate(-9deg) translateY(-2px); } }
  .bird-big{ position:fixed; inset:0; z-index:61; display:flex; align-items:center; justify-content:center; padding:16px; cursor:pointer; background:radial-gradient(circle at 50% 55%, rgba(20,6,20,.3), rgba(10,3,10,.72)); opacity:0; transition:opacity .35s ease; -webkit-tap-highlight-color:transparent; }
  .bird-big[hidden]{ display:none; }
  .bird-big.on{ opacity:1; }
  .bb-wrap{ --fx:0px; --fy:0px; display:flex; flex-direction:column; align-items:center; transform:translate(var(--fx),var(--fy)) scale(.12); }
  .bird-big.on .bb-wrap{ animation:bbZoom .9s cubic-bezier(.3,1.3,.5,1) forwards; }
  .bird-big.out .bb-wrap{ animation:bbBack .5s ease-in forwards; }
  @keyframes bbZoom{ from{ transform:translate(var(--fx),var(--fy)) scale(.12) rotate(-25deg); } to{ transform:none; } }
  @keyframes bbBack{ from{ transform:none; opacity:1; } to{ transform:translate(var(--fx),var(--fy)) scale(.12) rotate(25deg); opacity:.2; } }
  .bb-bird{ display:block; width:min(62vw, 280px); height:auto; overflow:visible; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
  .bird-big.on .bb-bird{ animation:bbShake .45s ease-in-out .95s 3; }
  @keyframes bbShake{ 0%,100%{ transform:none; } 25%{ transform:rotate(-7deg); } 75%{ transform:rotate(7deg); } }
  .bb-jaw{ transform-box:fill-box; transform-origin:50% 0; }
  .bird-big.on .bb-jaw{ animation:bbTalk .16s ease-in-out .9s 16 alternate; }
  @keyframes bbTalk{ from{ transform:none; } to{ transform:translateY(4px) scaleY(1.4); } }
  .bb-wr{ transform-box:fill-box; transform-origin:10% 90%; animation:bbWave .3s ease-in-out infinite alternate; }
  @keyframes bbWave{ from{ transform:rotate(-14deg); } to{ transform:rotate(10deg); } }
  .bb-drop{ animation:bbDrip 1.1s ease-in infinite; }
  @keyframes bbDrip{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(34px); opacity:0; } }
  .bb-say{ position:relative; margin:0 0 14px; max-width:min(86vw, 340px); padding:14px 20px; border-radius:22px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.25rem, 5.6vw, 1.7rem); line-height:1.45; color:#8A1C3F; background:#FFFFFF; box-shadow:0 14px 34px -10px rgba(0,0,0,.6); transform:scale(0); }
  .bb-say::after{ content:""; position:absolute; left:50%; top:100%; margin-left:-12px; border:12px solid transparent; border-top-color:#FFFFFF; }
  .bb-say b{ display:block; font-size:1.3em; color:#E0457B; }
  .bird-big.on .bb-say{ animation:bbSay .5s cubic-bezier(.3,1.6,.5,1) .75s forwards; }
  @keyframes bbSay{ from{ transform:scale(0) rotate(-8deg); } to{ transform:none; } }
  .tr-birds{ all:unset; position:absolute; left:0; top:0; width:78px; height:52px; margin:-47px 0 0 -39px; z-index:3; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .tr-birds[hidden]{ display:none; }
  .tr-birds:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; border-radius:12px; }
  .tr-birds svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
  .tr-birds.in svg{ animation:birdsIn 1.5s cubic-bezier(.3,1.15,.5,1) both; }
  @keyframes birdsIn{ from{ transform:translate(-150px,-130px) scale(.5) rotate(-20deg); opacity:0; } to{ transform:none; opacity:1; } }
  .tr-birds .bd{ transform-box:fill-box; transform-origin:50% 100%; animation:birdBob 1.6s ease-in-out infinite alternate; }
  .tr-birds .bd2{ animation-delay:-.8s; }
  @keyframes birdBob{ from{ transform:none; } to{ transform:translateY(-2px) rotate(-3deg); } }
  .tr-birds.kiss .bd1{ animation:birdKissL .9s ease both; }
  .tr-birds.kiss .bd2{ animation:birdKissR .9s ease both; }
  @keyframes birdKissL{ 0%,100%{ transform:none; } 35%,65%{ transform:translateX(3px) rotate(9deg); } }
  @keyframes birdKissR{ 0%,100%{ transform:none; } 35%,65%{ transform:translateX(-3px) rotate(-9deg); } }
  .tr-birds .bh{ opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
  .tr-birds.kiss .bh{ animation:birdHeart 1s ease both; }
  @keyframes birdHeart{ 0%{ opacity:0; transform:scale(.3); } 40%{ opacity:1; transform:scale(1.25) translateY(-4px); } 100%{ opacity:0; transform:scale(1) translateY(-26px); } }


  .seapg{ background:radial-gradient(70% 40% at 80% 10%, rgba(255,230,190,.12), transparent 60%), radial-gradient(80% 60% at 50% 40%, #1E0F33, #0C0717 60%, #05030A); }
  .fs-wrap{ position:relative; width:100%; max-width:460px; }
  .fs-cv{ display:block; height:min(52vh, 460px); background:#0B3A5C; box-shadow:inset 0 0 0 1px rgba(127,209,255,.3); touch-action:manipulation; cursor:pointer; }
  .fs-toast{ position:absolute; left:12px; right:12px; top:28%; z-index:2; padding:14px 16px 12px; border-radius:14px; text-align:center; pointer-events:none; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.1rem, 4.8vw, 1.4rem); line-height:1.55; color:#5A2A12; background:linear-gradient(#FFF6E3,#F1D9AE); box-shadow:0 16px 36px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(201,149,63,.6); }
  .fs-toast[hidden]{ display:none; }
  .fs-toast.on{ animation:fsToastIn .5s cubic-bezier(.3,1.4,.5,1) both; }
  .fs-toast small{ display:block; margin-top:4px; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.78rem; color:#8A5A1C; }
  @keyframes fsToastIn{ from{ transform:scale(.4) rotate(-6deg); opacity:0; } to{ transform:none; opacity:1; } }
  .fs-btns{ position:relative; display:flex; justify-content:center; min-height:46px; margin-top:8px; }
  .fs-btns button[hidden]{ display:none; }
  .divepg{ background:radial-gradient(80% 60% at 50% 30%, #0E3553, #071A2C 60%, #030A12); }
  .dv-cv{ height:min(46vh, 420px); background:#0B4F73; box-shadow:inset 0 0 0 1px rgba(127,209,255,.3); }

  .hugpg{ background:radial-gradient(60% 40% at 50% 45%, rgba(255,120,160,.22), transparent 70%), radial-gradient(80% 60% at 50% 40%, #3A0F2E, #160616 60%, #080309); }
  .hg-types{ position:relative; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .hg-type{ all:unset; box-sizing:border-box; padding:8px 14px; border-radius:999px; cursor:pointer; font-weight:700; font-size:.92rem; color:#FFE3EC; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,157,187,.45); -webkit-tap-highlight-color:transparent; }
  .hg-type.on{ color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); box-shadow:0 8px 20px -8px rgba(255,100,150,.8); }
  .hg-type:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .hg-types.locked .hg-type{ pointer-events:none; opacity:.55; }
  .hg-types.locked .hg-type.on{ opacity:1; }
  .hg-stage{ position:relative; width:100%; max-width:380px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; }
  .hg-svg{ display:block; width:100%; height:auto; max-height:min(38vh, 300px); overflow:visible; }
  .hg-stage.shake .hg-svg{ animation:hgShake .12s linear infinite; }
  @keyframes hgShake{ 0%{ transform:translate(1px,0); } 50%{ transform:translate(-2px,1px); } 100%{ transform:translate(1px,-1px); } }
  .hg-bob{ animation:hgBob 1.6s ease-in-out infinite alternate; }
  .hg-bob.b2{ animation-delay:-.8s; }
  @keyframes hgBob{ from{ transform:translateY(0); } to{ transform:translateY(-3px); } }
  .hg-eyes-shut{ display:none; }
  .hg-svg.done .hg-eyes-open{ display:none; }
  .hg-svg.done .hg-eyes-shut{ display:inline; }
  .hg-blush{ opacity:.35; transition:opacity .4s ease; }
  .hg-svg.near .hg-blush, .hg-svg.done .hg-blush{ opacity:.9; }
  #hgBoth{ transform-box:fill-box; transform-origin:50% 100%; }
  .hg-svg.done #hgBoth{ animation:hgSqueeze .9s ease-in-out infinite; }
  @keyframes hgSqueeze{ 0%,100%{ transform:none; } 50%{ transform:scale(.95,1.03); } }
  .hg-say{ position:absolute; left:50%; top:-4px; z-index:2; margin:0; transform:translateX(-50%); max-width:92%; width:max-content; padding:7px 16px; border-radius:16px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.05rem, 4.8vw, 1.35rem); color:#8A1C3F; background:#FFFFFF; box-shadow:0 10px 24px -10px rgba(0,0,0,.6); opacity:0; pointer-events:none; text-align:center; }
  .hg-say.on{ animation:hgSay .35s cubic-bezier(.3,1.6,.5,1) forwards; }
  @keyframes hgSay{ from{ opacity:0; transform:translateX(-50%) scale(.6); } to{ opacity:1; transform:translateX(-50%); } }
  .hg-meter{ position:relative; width:min(280px, 80%); height:16px; border-radius:999px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,157,187,.4); overflow:hidden; }
  .hg-meter i{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,#FF7AA2,#FFD58A); box-shadow:0 0 14px rgba(255,120,160,.8); }
  .hg-meter b{ position:absolute; inset:0; display:grid; place-items:center; font-size:.72rem; color:#2A0714; }
  .hg-btn{ all:unset; box-sizing:border-box; position:relative; display:flex; align-items:center; gap:10px; padding:12px 22px 12px 16px; border-radius:999px; cursor:pointer; font-weight:700; font-size:1rem; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); box-shadow:0 10px 28px -8px rgba(255,100,150,.9); -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; -webkit-tap-highlight-color:transparent; }
  .hg-btn svg{ width:30px; height:28px; fill:#C2185B; }
  .hg-btn.hold{ transform:scale(.96); box-shadow:0 0 0 6px rgba(255,122,162,.25), 0 0 40px rgba(255,122,162,.9); }
  .hg-btn.hold svg{ animation:heartbeat .8s ease-in-out infinite; }
  .hg-btn[hidden]{ display:none; }
  .hg-btn:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .hg-receipt{ position:relative; width:min(300px, 86%); padding:16px 18px 14px; border-radius:6px; text-align:right; color:#3A2A1A; font-size:.9rem; line-height:1.9; background:#FFFDF6; box-shadow:0 18px 40px -14px rgba(0,0,0,.8); -webkit-mask:radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/16px 100% repeat-x; mask:radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/16px 100% repeat-x; animation:fsToastIn .6s cubic-bezier(.3,1.4,.5,1) both; }
  .hg-receipt[hidden]{ display:none; }
  .hg-receipt h4{ margin:0 0 6px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.25rem; color:#8A1C3F; border-bottom:1.5px dashed #C9B89A; padding-bottom:6px; }
  .hg-receipt p{ margin:0; display:flex; justify-content:space-between; gap:10px; }
  .hg-receipt p b{ color:#8A1C3F; }
  .hg-receipt .hg-stamp{ display:block; margin:8px auto 0; width:max-content; padding:2px 12px; border:2px solid #2E9D5B; border-radius:8px; color:#2E9D5B; font-weight:700; transform:rotate(-6deg); }
  .hg-receipt button{ display:block; margin:10px auto 0; }

  .liepg{ background:radial-gradient(80% 60% at 50% 40%, #102A2A, #081414 60%, #030808); }
  .ld-machine{ position:relative; width:100%; max-width:380px; padding:12px 14px 14px; border-radius:20px; background:linear-gradient(#2E3A48,#1B232D); box-shadow:inset 0 0 0 2px #4A5A6E, 0 20px 40px -16px rgba(0,0,0,.9); }
  .ld-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; direction:ltr; font-size:.72rem; letter-spacing:.08em; color:#9FB3C8; }
  .ld-brand{ font-weight:700; }
  .ld-led{ width:12px; height:12px; border-radius:50%; background:#2E9D5B; box-shadow:0 0 10px #2E9D5B; }
  .ld-machine.lie .ld-led{ background:#FF3B3B; box-shadow:0 0 14px #FF3B3B; animation:twinkle .15s linear infinite alternate; }
  .ld-machine.lie{ animation:hgShake .1s linear 6; }
  .ld-cv{ display:block; width:100%; height:86px; border-radius:10px; background:#0B1A14; box-shadow:inset 0 0 0 1px rgba(80,220,140,.25); }
  .ld-q{ margin:12px 0 4px; min-height:2.6em; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.3rem, 6vw, 1.75rem); line-height:1.4; color:#FFFFFF; }
  .ld-verdict{ margin:0; min-height:1.6em; text-align:center; font-weight:700; font-size:1rem; color:#7CF0A8; }
  .ld-machine.lie .ld-verdict{ color:#FF6B6B; }
  .ld-ans{ position:relative; display:flex; justify-content:center; gap:14px; width:100%; max-width:380px; min-height:120px; padding-top:8px; }
  .ld-ans[hidden], .ld-again[hidden]{ display:none; }
  .ld-yes, .ld-no{ min-width:110px; transition:transform .25s cubic-bezier(.3,1.4,.5,1), font-size .2s ease; }
  .ld-no{ position:relative; touch-action:none; }
  .ld-again{ position:relative; }

  .pillowpg{ background:radial-gradient(60% 40% at 50% 45%, rgba(255,150,190,.18), transparent 70%), radial-gradient(80% 60% at 50% 40%, #3A0F2E, #160616 60%, #080309); }
  .pl-board{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:6px 12px; width:100%; max-width:340px; padding:16px 14px 10px; border-radius:22px; background:repeating-linear-gradient(45deg, #6E1B43 0 12px, #7C2250 12px 24px); box-shadow:inset 0 0 0 3px rgba(255,213,138,.35), 0 20px 44px -18px rgba(0,0,0,.9); touch-action:manipulation; -webkit-user-select:none; user-select:none; }
  .pl-board.shake{ animation:hgShake .1s linear 5; }
  .pl-hole{ position:relative; aspect-ratio:1/1.08; }
  .pl-hole::before{ content:""; position:absolute; left:6%; right:6%; bottom:3%; height:30%; border-radius:50%; background:radial-gradient(ellipse at 50% 40%, #12040C 45%, #3A0F2E 75%, #5A1A3E); box-shadow:inset 0 4px 8px rgba(0,0,0,.8); }
  .pl-mask{ position:absolute; left:0; right:0; top:0; bottom:17%; overflow:hidden; }
  .pl-pop{ all:unset; position:absolute; left:8%; right:8%; bottom:0; height:94%; cursor:pointer; transform:translateY(105%); transition:transform .15s cubic-bezier(.3,1.4,.5,1); -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .pl-pop svg{ display:block; width:100%; height:100%; }
  .pl-pop.up{ transform:translateY(6%); }
  .pl-pop.hit{ transform:translateY(22%) scale(1.05,.84); transition-duration:.07s; }
  .pl-pop:focus-visible{ outline:2px solid #FFD58A; outline-offset:-2px; }
  .pl-rim{ position:absolute; left:5%; right:5%; bottom:3%; height:16%; border-radius:50%; box-shadow:0 -3px 0 rgba(255,190,210,.3); pointer-events:none; }
  .pl-fx{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:3; }
  .pl-feather{ position:absolute; width:12px; height:5px; margin:-2px 0 0 -6px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 4px rgba(255,255,255,.8); animation:plFeather .9s ease-out forwards; }
  @keyframes plFeather{ from{ transform:translate(0,0) rotate(0); opacity:1; } to{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:0; } }
  .pl-pillow{ position:absolute; width:62px; height:40px; margin:-20px 0 0 -31px; border-radius:14px; background:linear-gradient(#FFF6FA,#FFC2D4); box-shadow:0 6px 14px rgba(0,0,0,.4), inset 0 -4px 0 rgba(224,69,123,.35); animation:plSwing .28s ease-in forwards; }
  @keyframes plSwing{ 0%{ transform:translate(-40px,-50px) rotate(-50deg) scale(.8); opacity:.9; } 70%{ transform:translate(0,0) rotate(8deg) scale(1.05); opacity:1; } 100%{ transform:translate(4px,6px) rotate(14deg) scale(.95); opacity:0; } }
  .pl-float{ position:absolute; z-index:4; margin:0; transform:translate(-50%,-50%); white-space:nowrap; font-weight:700; font-size:1rem; color:#FFE3EC; text-shadow:0 2px 6px rgba(0,0,0,.8); animation:plFloat .9s ease-out forwards; }
  .pl-float.bad{ color:#FF9DBB; }
  .pl-float.gold{ color:#FFD58A; font-size:1.1rem; }
  @keyframes plFloat{ from{ transform:translate(-50%,-30%); opacity:1; } to{ transform:translate(-50%,-160%); opacity:0; } }
  .drivepg{ background:radial-gradient(80% 60% at 50% 30%, #3A2410, #1A0F08 60%, #080403); }
  .dr-cv{ height:min(56vh, 480px); background:#E8C98F; touch-action:none; cursor:pointer; }

  .mergepg, .rpspg, .kabsapg{ background:radial-gradient(60% 40% at 50% 40%, rgba(255,150,190,.16), transparent 70%), radial-gradient(80% 60% at 50% 40%, #3A0F2E, #160616 60%, #080309); }
  .flypg{ background:radial-gradient(80% 60% at 50% 30%, #4A2240, #1E0A1E 60%, #0A030A); }
  .mg-board{ position:relative; width:min(340px, 90vw); aspect-ratio:1/1; border-radius:18px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 2px rgba(255,157,187,.35), 0 20px 44px -18px rgba(0,0,0,.9); touch-action:none; -webkit-user-select:none; user-select:none; }
  .mg-cell{ position:absolute; border-radius:12px; background:rgba(255,255,255,.06); }
  .mg-tile{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; transition:transform .12s ease; box-shadow:0 5px 12px -5px rgba(0,0,0,.7), inset 0 -3px 0 rgba(0,0,0,.12); }
  .mg-tile .e{ font-size:calc(var(--cs) * .44); line-height:1.05; }
  .mg-tile .l{ margin-top:1px; font-size:max(10px, calc(var(--cs) * .14)); font-weight:700; color:#5A1A3A; }
  .mg-tile.new{ animation:mgNew .2s ease both; }
  .mg-tile.pop{ animation:mgPop .24s ease; z-index:2; }
  @keyframes mgNew{ from{ opacity:0; scale:.3; } to{ opacity:1; scale:1; } }
  @keyframes mgPop{ 0%{ scale:1; } 50%{ scale:1.2; } 100%{ scale:1; } }
  .mg-tile.lv1{ background:#FFE3EC; } .mg-tile.lv2{ background:#FFC2D4; } .mg-tile.lv3{ background:#E8B48F; } .mg-tile.lv4{ background:#FF9DBB; }
  .mg-tile.lv5{ background:linear-gradient(135deg,#FFF1C4,#FFD58A); } .mg-tile.lv6{ background:linear-gradient(135deg,#C8F2DE,#8FD3B6); }
  .mg-tile.lv7{ background:linear-gradient(135deg,#FFE7A8,#E0A84A); box-shadow:0 0 20px rgba(255,213,138,.9); } .mg-tile.lv8{ background:linear-gradient(135deg,#E6D0FF,#B38BFF); box-shadow:0 0 22px rgba(179,139,255,.9); }
  .mg-chain{ display:flex; gap:6px; justify-content:center; font-size:1.25rem; }
  .mg-chain span{ opacity:.25; filter:grayscale(1); transition:opacity .4s, filter .4s; }
  .mg-chain span.on{ opacity:1; filter:none; }
  .rp-score{ position:relative; display:flex; align-items:center; gap:14px; margin:0; font-weight:700; color:#FFE3EC; }
  .rp-score b{ display:inline-block; min-width:1.6em; padding:2px 8px; border-radius:10px; text-align:center; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); }
  .rp-score i{ font-style:normal; font-size:.85rem; color:rgba(255,220,230,.6); }
  .rp-arena{ position:relative; display:flex; flex-direction:column; align-items:center; width:100%; max-width:360px; }
  .rp-face{ width:min(120px, 30vw); aspect-ratio:100/110; }
  .rp-face svg{ width:100%; height:100%; display:block; }
  .rp-face.bounce{ animation:mgPop .35s ease 3; }
  .rp-say{ margin:4px 0 8px; min-height:1.6em; padding:6px 16px; border-radius:16px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.05rem, 4.8vw, 1.35rem); color:#8A1C3F; background:#FFFFFF; box-shadow:0 10px 24px -10px rgba(0,0,0,.6); }
  .rp-hands{ display:flex; align-items:center; justify-content:center; gap:22px; direction:ltr; }
  .rp-hands div{ display:flex; flex-direction:column; align-items:center; gap:2px; color:rgba(255,220,230,.7); font-size:.8rem; }
  .rp-hand{ display:grid; place-items:center; width:84px; height:84px; border-radius:50%; font-size:2.8rem; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 2px rgba(255,157,187,.35); }
  .rp-hand.shake{ animation:rpShake .3s ease-in-out 3; }
  .rp-hand.win{ box-shadow:0 0 0 3px #FFD58A, 0 0 26px rgba(255,213,138,.8); }
  @keyframes rpShake{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px) rotate(-8deg); } }
  .rp-vs{ font-weight:700; color:#FFD58A; }
  .rp-picks{ position:relative; display:flex; gap:12px; justify-content:center; }
  .rp-pick{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; width:84px; padding:10px 0 8px; border-radius:18px; cursor:pointer; font-size:2.2rem; line-height:1.1; background:linear-gradient(160deg,#FF7AA2,#C2185B); box-shadow:0 10px 24px -10px rgba(255,90,140,.9); -webkit-tap-highlight-color:transparent; }
  .rp-pick small{ margin-top:4px; font-size:.8rem; font-weight:700; color:#FFF3F7; }
  .rp-pick:active{ transform:scale(.94); }
  .rp-pick:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .rp-picks.off .rp-pick{ opacity:.45; pointer-events:none; }
  .rp-again[hidden]{ display:none; }
  .rp-again{ position:relative; }
  .kb-recipe{ position:relative; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:380px; }
  .kb-recipe span{ padding:4px 10px; border-radius:999px; font-size:.9rem; font-weight:700; color:#FFE3EC; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,157,187,.35); }
  .kb-recipe span.ok{ color:#2A0714; background:linear-gradient(120deg,#9BE38A,#FFD58A); box-shadow:none; }
  .kb-cv{ height:min(46vh, 420px); background:linear-gradient(#FFF3E0,#F7D9B0); touch-action:none; }
  .kb-taste{ width:92px; margin:0 auto 4px; }
  .kb-taste svg{ width:100%; height:auto; display:block; }
  .fl-cv{ height:min(54vh, 470px); background:#FFB88A; touch-action:none; cursor:pointer; }

  .hosppg{ background:radial-gradient(70% 50% at 50% 40%, rgba(127,209,255,.14), transparent 70%), radial-gradient(80% 60% at 50% 40%, #2A1030, #120616 60%, #06030A); }
  .hs-room{ position:relative; width:100%; max-width:480px; aspect-ratio:10/9.2; border-radius:22px; overflow:hidden; background:linear-gradient(#EAF6F4 0 60%, #D5E3EA 60% 100%); box-shadow:inset 0 0 0 3px rgba(255,255,255,.6), 0 20px 44px -18px rgba(0,0,0,.9); -webkit-user-select:none; user-select:none; }
  .hs-window{ position:absolute; right:12%; top:9%; width:19%; height:21%; border-radius:8px; background:linear-gradient(#8FCFF2,#DDF2FF); box-shadow:inset 0 0 0 4px #FFFFFF, 0 3px 8px rgba(0,0,0,.12); }
  .hs-window::before, .hs-window::after{ content:""; position:absolute; background:#FFFFFF; }
  .hs-window::before{ left:48%; top:0; bottom:0; width:4%; } .hs-window::after{ top:48%; left:0; right:0; height:5%; }
  .hs-monitor{ position:absolute; left:3%; top:4%; width:47%; height:29%; border-radius:10px; background:#0B1A14; box-shadow:inset 0 0 0 3px #3A4A56, 0 4px 10px rgba(0,0,0,.25); }
  .hs-monitor canvas{ display:block; width:100%; height:100%; border-radius:10px; }
  .hs-bpm{ display:none; }
  .hs-monitor.cured .hs-bpm{ color:#FF9DBB; }
  .hs-iv{ position:absolute; right:6%; top:36%; width:2px; height:50%; background:#9AA3B2; }
  .hs-iv b{ position:absolute; left:-9px; top:-6px; width:20px; height:24px; border-radius:6px 6px 10px 10px; background:rgba(255,122,162,.75); box-shadow:inset 0 -8px 0 rgba(224,69,123,.6); }
  .hs-head{ position:absolute; left:42%; right:12%; top:37%; height:40%; border-radius:16px 16px 4px 4px; background:linear-gradient(#B8C6D4,#9AAABB); }
  .hs-patient{ all:unset; position:absolute; left:47%; width:34%; top:27%; aspect-ratio:100/112; cursor:pointer; transform-origin:50% 90%; transition:transform .25s ease; -webkit-tap-highlight-color:transparent; }
  .hs-patient svg{ display:block; width:100%; height:100%; }
  .hs-patient.shake{ animation:hgShake .1s linear 8; }
  .hs-gh-shake{ transform-box:fill-box; transform-origin:50% 20%; animation:hsGhShake .12s linear infinite; }
  @keyframes hsGhShake{ 0%,100%{ transform:rotate(-1.5deg); } 50%{ transform:rotate(1.5deg); } }
  .hs-patient.hide{ transform:translateY(34%); }
  .hs-patient:focus-visible{ outline:2px solid #E0457B; outline-offset:2px; border-radius:12px; }
  .hs-blanket{ position:absolute; left:39%; right:9%; top:66%; bottom:4%; border-radius:18px 18px 8px 8px; background:#8FC7E8; background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 5px, transparent 6px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0 5px, transparent 6px); background-size:34px 30px; box-shadow:inset 0 6px 0 rgba(255,255,255,.5), 0 -2px 6px rgba(0,0,0,.08); }
  .hs-doc{ position:absolute; left:1%; bottom:-3%; width:36%; aspect-ratio:100/170; z-index:3; transition:transform .45s cubic-bezier(.3,1.25,.5,1); }
  .hs-doc svg{ display:block; width:100%; height:100%; animation:hgBob 1.8s ease-in-out infinite alternate; }
  .hs-doc.treat{ transform:translateX(26%) rotate(-4deg); }
  .hs-doc.yay svg{ animation:hsYay .45s ease-in-out 3; }
  @keyframes hsYay{ 0%,100%{ transform:none; } 50%{ transform:translateY(-8%) rotate(3deg); } }
  .hs-blink{ transform-box:fill-box; transform-origin:50% 50%; animation:hsBlink 3.8s infinite; }
  @keyframes hsBlink{ 0%,93%,100%{ transform:none; } 96%{ transform:scaleY(.12); } }
  .hs-patient svg{ transform-origin:50% 100%; animation:hsBreath 2.8s ease-in-out infinite; }
  @keyframes hsBreath{ 0%,100%{ transform:none; } 50%{ transform:scale(1.015,1.03); } }
  .hs-patient.out{ opacity:0; transform:translateY(45%) scale(.7); }
  .hs-patient.in{ transition:transform .55s cubic-bezier(.3,1.5,.5,1), opacity .3s ease; }
  .hs-patient.jump{ animation:hsJump .5s ease-in-out 4; }
  @keyframes hsJump{ 0%,100%{ transform:none; } 50%{ transform:translateY(-10%) rotate(-3deg); } }
  .hs-banner{ position:absolute; left:50%; top:40%; z-index:5; margin:0; padding:8px 16px; border-radius:14px; white-space:nowrap; font-weight:700; font-size:clamp(.9rem, 4vw, 1.05rem); color:#FFFFFF; background:linear-gradient(120deg,#E8352E,#FF5C8A); box-shadow:0 10px 24px -8px rgba(232,53,46,.8); transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none; }
  .hs-banner.on{ animation:hsBanner 2.1s cubic-bezier(.3,1.4,.5,1) forwards; }
  @keyframes hsBanner{ 0%{ transform:translate(-50%,-50%) scale(.3) rotate(-6deg); opacity:0; } 15%{ transform:translate(-50%,-50%) scale(1.08); opacity:1; } 25%,80%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 100%{ transform:translate(-50%,-80%) scale(.9); opacity:0; } }
  .hs-amb{ position:absolute; left:100%; bottom:3%; z-index:5; width:30%; pointer-events:none; opacity:0; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
  .hs-amb svg{ display:block; width:100%; height:auto; animation:hgBob .18s linear infinite alternate; }
  .hs-amb.go{ animation:hsAmb 2.4s cubic-bezier(.4,0,.5,1) forwards; }
  .hs-amb.go::after{ content:""; position:absolute; left:45%; top:-4%; width:14px; height:14px; border-radius:50%; background:#FF3B3B; box-shadow:0 0 18px 8px rgba(255,59,59,.85); animation:twinkle .18s linear infinite alternate; }
  .hs-siren{ animation:twinkle .18s linear infinite alternate-reverse; }
  @keyframes hsAmb{ 0%{ left:100%; opacity:1; } 42%,62%{ left:46%; opacity:1; } 100%{ left:-38%; opacity:0; } }
  .hs-say{ position:absolute; left:52%; right:2%; top:3%; z-index:3; margin:0; padding:6px 10px; border-radius:14px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(.88rem, 3.9vw, 1.1rem); line-height:1.45; color:#8A1C3F; background:#FFFFFF; box-shadow:0 8px 18px -8px rgba(0,0,0,.45); opacity:0; }
  .hs-say.on{ animation:hsSay .35s cubic-bezier(.3,1.6,.5,1) forwards; }
  @keyframes hsSay{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
  .hs-fx{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  .hs-fly{ position:fixed; z-index:70; margin:-18px 0 0 -18px; font-size:34px; line-height:1; pointer-events:none; transition:left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1), transform .45s ease; }
  .hs-float{ position:absolute; margin:0; transform:translate(-50%,-50%); white-space:nowrap; font-weight:700; font-size:1rem; color:#E0457B; text-shadow:0 1px 0 #fff; animation:plFloat 1.1s ease-out forwards; }
  .hs-thermo{ position:absolute; left:79%; top:30%; width:16px; height:42%; margin-left:-8px; border-radius:8px; background:#FFFFFF; box-shadow:0 0 0 2px #9AA3B2, 0 6px 14px rgba(0,0,0,.2); }
  .hs-thermo::after{ content:""; position:absolute; left:50%; bottom:-10px; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:#E8352E; box-shadow:0 0 0 2px #9AA3B2; }
  .hs-thermo i{ position:absolute; left:4px; right:4px; bottom:2px; height:8%; border-radius:4px; background:#E8352E; animation:hsMerc 1.4s cubic-bezier(.3,0,.3,1) forwards; }
  .hs-thermo.cool i{ animation-name:hsMercLow; }
  .hs-thermo b{ position:absolute; left:50%; top:-26px; transform:translateX(-50%); white-space:nowrap; font-size:.95rem; color:#E8352E; opacity:0; animation:hsPopIn .3s ease 1.2s forwards; }
  @keyframes hsMerc{ to{ height:100%; } }
  @keyframes hsMercLow{ to{ height:45%; } }
  @keyframes hsPopIn{ from{ opacity:0; transform:translateX(-50%) scale(.4); } to{ opacity:1; transform:translateX(-50%) scale(1.15); } }
  .hs-xray{ position:absolute; left:44%; width:42%; top:22%; height:56%; border-radius:12px; background:rgba(8,24,48,.94); box-shadow:0 0 0 3px #9ED8FF, 0 0 26px rgba(158,216,255,.6); animation:hsFade 2.8s ease forwards; }
  .hs-xray svg{ display:block; width:100%; height:100%; }
  @keyframes hsFade{ 0%{ opacity:0; transform:scale(.8); } 12%,82%{ opacity:1; transform:none; } 100%{ opacity:0; } }
  .hs-mark{ position:absolute; font-size:1.1rem; pointer-events:none; animation:mgNew .3s ease both; }
  .hs-lips{ position:absolute; width:26px; height:16px; pointer-events:none; animation:mgNew .3s ease both; }
  .hs-lips svg{ width:100%; height:100%; display:block; }

  .hs-rail{ position:absolute; left:0; right:0; top:1.5%; height:3px; background:#9AA3B2; box-shadow:0 1px 0 rgba(255,255,255,.6); }
  .hs-curtain{ position:absolute; top:2%; bottom:40%; width:9%; background:repeating-linear-gradient(90deg, #5FB7B0 0 6px, #7FCFC8 6px 12px); box-shadow:0 4px 10px rgba(0,0,0,.15); border-radius:0 0 6px 6px; }
  .hs-curtain.l{ left:0; } .hs-curtain.r{ right:0; }
  .hs-lamp{ position:absolute; left:51%; top:-5%; width:16%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, #FFFFFF 0 30%, #E8EEF3 32% 55%, #C3CAD6 57%); box-shadow:0 0 30px 12px rgba(255,255,240,.55); }
  .hs-er{ position:absolute; right:12%; top:33%; padding:1px 6px; border-radius:4px; font-size:.58rem; font-weight:700; letter-spacing:.02em; color:#FFFFFF; background:#C62839; box-shadow:0 0 0 1.5px #FFFFFF; }
  .hs-gas{ position:absolute; right:12%; top:40%; width:10%; height:9%; border-radius:4px; background:#E8EEF3; box-shadow:inset 0 0 0 1.5px #B8C6D4; display:flex; gap:10%; align-items:center; justify-content:center; }
  .hs-gas b{ width:30%; aspect-ratio:1; border-radius:50%; background:#2E9D5B; box-shadow:inset 0 0 0 2px #1E6B3E; }
  .hs-gas b+b{ background:#E8EEF3; box-shadow:inset 0 0 0 2px #7B8494; }
  .hs-iv em{ position:absolute; left:-2px; top:20px; width:5px; height:7px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:rgba(255,122,162,.9); animation:hsDrip 1.3s ease-in infinite; }
  @keyframes hsDrip{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 100%{ transform:translateY(60px); opacity:0; } }
  .hs-tag{ position:absolute; left:44%; bottom:6%; z-index:2; padding:2px 7px; border-radius:6px; font-size:.56rem; font-weight:700; color:#2A3A55; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.18); white-space:nowrap; }
  .hs-alarm{ position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, transparent 40%, rgba(232,20,40,.45)); }
  .hs-room.red .hs-alarm{ animation:hsAlarm .7s ease-in-out infinite alternate; }
  .hs-room.red .hs-er{ animation:twinkle .25s linear infinite alternate; box-shadow:0 0 0 1.5px #FFFFFF, 0 0 16px 4px rgba(255,40,40,.9); }
  @keyframes hsAlarm{ from{ opacity:.15; } to{ opacity:1; } }
  .hs-note{ position:absolute; left:8%; right:8%; top:24%; z-index:7; padding:10px 12px 9px; border-radius:12px; text-align:right; font-size:.8rem; line-height:1.6; color:#2A3A55; background:#FFFFFF; box-shadow:0 16px 34px -10px rgba(0,0,0,.6), inset 0 4px 0 #C62839; animation:fsToastIn .45s cubic-bezier(.3,1.4,.5,1) both; }
  .hs-note[hidden]{ display:none; }
  .hs-note b{ display:block; margin-bottom:2px; font-size:.86rem; color:#C62839; }
  .hs-chart{ position:relative; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; width:100%; max-width:480px; }
  .hs-chart span{ padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:700; color:rgba(255,227,236,.55); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,157,187,.25); }
  .hs-chart span.ok{ color:#12391F; background:linear-gradient(120deg,#9BE38A,#CFF5C0); box-shadow:none; animation:mgNew .3s ease both; }
  .hs-status{ position:relative; display:flex; align-items:center; gap:10px; width:100%; max-width:480px; font-weight:700; font-size:.85rem; color:#FFE3EC; }
  .hs-status > span{ white-space:nowrap; }
  .hs-status .hg-meter{ flex:1; width:auto; }
  .hs-case{ position:relative; margin:0; min-height:1.4em; font-size:.9rem; color:#FFD58A; font-weight:700; }
  .hs-tools{ position:relative; display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; width:100%; max-width:480px; }
  .hs-tools[hidden]{ display:none; }
  .hs-tool{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 0 5px; border-radius:12px; cursor:pointer; font-size:clamp(1.25rem, 6vw, 1.6rem); line-height:1.1; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px rgba(255,157,187,.4); -webkit-tap-highlight-color:transparent; }
  .hs-tool small{ font-size:.62rem; font-weight:700; color:#FFE3EC; }
  .hs-tool:active{ transform:scale(.93); }
  .hs-tool:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .hs-tool.hint{ animation:hsHint .6s ease-in-out infinite alternate; }
  @keyframes hsHint{ from{ box-shadow:inset 0 0 0 1.5px rgba(255,157,187,.4); } to{ box-shadow:inset 0 0 0 3px #FFD58A, 0 0 20px rgba(255,213,138,.8); } }
  .hs-tools.off .hs-tool{ opacity:.5; pointer-events:none; }
  .hs-report p b{ max-width:62%; text-align:left; }

  .hs-menu{ position:relative; display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; width:100%; max-width:480px; }
  .ct-stage{ position:relative; width:100%; max-width:440px; aspect-ratio:10/11; border-radius:22px; overflow:hidden; background:#2A160E; box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,213,138,.3); isolation:isolate; }
  .ct-stage.bang .ct-cam{ animation:ctBang .3s ease; }
  @keyframes ctBang{ 0%,100%{ translate:0 0; } 25%{ translate:2px 1px; } 50%{ translate:-3px -1px; } 75%{ translate:1px 1px; } }
  .ct-cam{ position:absolute; inset:0; transform-origin:50% 50%; transition:transform .75s cubic-bezier(.4,0,.2,1), transform-origin .75s cubic-bezier(.4,0,.2,1); }
  .ct-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .ct-plaque{ position:absolute; left:3%; top:4%; width:28%; padding:6px 4px; border-radius:10px; text-align:center; font-weight:700; font-size:.62rem; line-height:1.45; color:#FFE7A8; background:linear-gradient(180deg,#3A2012,#2A140A); box-shadow:inset 0 0 0 1.5px #C9A45C, 0 6px 14px rgba(0,0,0,.5); z-index:1; }
  .ct-plaque small{ display:block; font-size:.55rem; font-weight:500; color:#E9C46A; }
  .ct-char{ position:absolute; }
  .ct-char > svg{ display:block; width:100%; height:auto; overflow:visible; transform-origin:50% 100%; animation:ctBreath 3.4s ease-in-out infinite; }
  .ct-pros > svg{ animation-delay:-1.1s; } .ct-police > svg{ animation-delay:-2.2s; } .ct-cafguy > svg{ animation-delay:-.6s; } .ct-diyaa > svg{ animation-delay:-1.7s; }
  @keyframes ctBreath{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.018); } }
  .ct-char.talk > svg{ animation:ctTalk .42s ease-in-out infinite alternate; }
  @keyframes ctTalk{ from{ transform:translateY(0) rotate(0); } to{ transform:translateY(-2.5px) rotate(.6deg); } }
  .ct-char .m-open{ opacity:0; }
  .ct-char.mouth .m-open{ animation:ctMouth .24s linear infinite; }
  @keyframes ctMouth{ 0%,49%{ opacity:0; } 50%,100%{ opacity:1; } }
  .ct-judge{ left:35%; width:30%; top:9%; z-index:2; transform:translateY(30%); opacity:0; transition:transform .9s cubic-bezier(.2,.9,.2,1), opacity .6s ease; }
  .ct-judge.in{ transform:none; opacity:1; }
  .ct-judge .jb-stern, .ct-judge .j-laugh{ display:none; }
  .ct-judge.stern .jb-stern{ display:inline; } .ct-judge.stern .jb-soft{ display:none; }
  .ct-judge.laugh .j-laugh{ display:inline; } .ct-judge.laugh .j-eyes{ display:none; }
  .ct-bench{ position:absolute; left:22%; width:56%; top:33%; height:22%; z-index:3; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#B07442 0 9%,#8A5530 9% 13%,#7A4A28 13%); box-shadow:0 12px 20px -6px rgba(0,0,0,.75), inset 0 -8px 0 rgba(0,0,0,.2); }
  .ct-bench::before{ content:""; position:absolute; left:5%; right:5%; top:22%; bottom:14%; border-radius:5px; box-shadow:inset 0 0 0 2px rgba(255,213,138,.35), inset 0 0 0 5px rgba(0,0,0,.12); }
  .ct-medal{ position:absolute; left:50%; top:24%; width:22px; height:22px; margin-left:-11px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; color:#6B4410; background:radial-gradient(circle at 35% 30%,#FFF0B8,#D9A94A 70%); box-shadow:0 2px 5px rgba(0,0,0,.45); }
  .ct-nameplate{ position:absolute; left:50%; top:58%; transform:translateX(-50%); padding:2px 10px; border-radius:4px; white-space:nowrap; font-size:.64rem; font-weight:700; color:#3A2012; background:linear-gradient(180deg,#FFE7A8,#D9B35E); box-shadow:0 2px 4px rgba(0,0,0,.4); }
  .ct-mic{ position:absolute; z-index:4; }
  .ct-mic svg{ display:block; width:100%; height:auto; }
  .ct-mic-j{ left:60%; width:4.5%; top:25%; } .ct-mic-p{ left:21%; width:4.5%; top:59%; }
  .ct-gavel{ position:absolute; left:19%; width:21%; top:21%; z-index:4; }
  .ct-gavel svg{ display:block; width:100%; height:auto; overflow:visible; }
  .ct-gavel .gv{ transform-box:view-box; transform-origin:70px 30px; transform:rotate(-14deg); }
  .ct-gavel.hit .gv{ animation:ctGavel .36s cubic-bezier(.5,0,.6,1); }
  @keyframes ctGavel{ 0%{ transform:rotate(-14deg); } 40%{ transform:rotate(-34deg); } 62%{ transform:rotate(15deg); } 100%{ transform:rotate(-14deg); } }
  .ct-caf{ position:absolute; left:73%; width:25%; top:6%; height:50%; z-index:2; }
  .ct-caf::before{ content:""; position:absolute; left:0; right:0; top:12%; bottom:12%; border-radius:4px; background:linear-gradient(180deg,#FBEAD2,#EED3AE); box-shadow:inset 0 0 0 2px rgba(0,0,0,.12); }
  .ct-awning{ position:absolute; left:-5%; right:-5%; top:0; height:21%; z-index:2; border-radius:6px 6px 0 0; background:repeating-linear-gradient(90deg,#E53935 0 12.5%,#FFF3E0 12.5% 25%); box-shadow:0 4px 8px rgba(0,0,0,.35); }
  .ct-awning::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:7px; background:radial-gradient(circle at 50% 0, #E53935 5px, transparent 5.5px) 0 0/14px 7px repeat-x; }
  .ct-awning span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; padding:1px 5px; border-radius:4px; font-size:.5rem; font-weight:700; color:#3A2012; background:#FFF8E7; box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .ct-menu{ position:absolute; left:8%; right:8%; top:24%; z-index:0; padding:2px 3px; border-radius:3px; text-align:center; font-size:.38rem; line-height:1.35; font-weight:700; color:#FFF3D6; background:#2E3A2E; box-shadow:inset 0 0 0 1.5px #8A5A34; }
  .ct-caf .ct-cafguy{ left:10%; width:80%; top:30%; z-index:1; transition:opacity .3s ease; }
  .ct-cafguy.away{ opacity:0; }
  .ct-counter{ position:absolute; left:-3%; right:-3%; bottom:0; height:32%; z-index:3; display:flex; justify-content:center; gap:3px; font-size:.95rem; line-height:1; border-radius:4px; background:linear-gradient(180deg,#C98A4B 0 14%,#9A6438 14%); box-shadow:0 8px 14px -6px rgba(0,0,0,.7); }
  .ct-counter span{ transform:translateY(-58%); }
  .ct-pros{ left:1%; width:27%; top:42%; z-index:2; }
  .ct-pros .p-ang, .ct-pros .p-shk{ display:none; }
  .ct-pros.angry .p-ang{ display:inline; } .ct-pros.angry .p-n{ display:none; }
  .ct-pros.shock .p-shk{ display:inline; } .ct-pros.shock .p-n, .ct-pros.shock .p-mc{ display:none; }
  .ct-pros .p-arm{ transform-box:view-box; transform-origin:73px 92px; transform:rotate(68deg); transition:transform .38s cubic-bezier(.3,1.5,.5,1); }
  .ct-pros.point .p-arm{ transform:rotate(-4deg); }
  .ct-lectern{ position:absolute; left:3%; width:24%; top:66%; height:27%; z-index:3; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#9A6438 0 10%,#6B4226 10%); box-shadow:0 10px 16px -6px rgba(0,0,0,.7); }
  .ct-lectern span, .ct-dock span{ position:absolute; left:50%; top:26%; transform:translateX(-50%); white-space:nowrap; padding:2px 6px; border-radius:4px; font-size:.56rem; font-weight:700; color:#FFE7A8; background:rgba(0,0,0,.32); }
  .ct-diyaa{ left:39%; width:25%; top:49%; z-index:2; }
  .ct-dock{ position:absolute; left:34%; width:35%; top:74%; height:24%; z-index:3; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#9A6438 0 9%,#6B4226 9%); box-shadow:0 10px 16px -6px rgba(0,0,0,.7); }
  .ct-dock::before{ content:""; position:absolute; left:4%; right:4%; bottom:100%; height:22px; border-top:3px solid #C9A45C; background:repeating-linear-gradient(90deg, #D4AF63 0 3px, transparent 3px 15px); }
  .ct-police{ left:71%; width:27%; top:55%; z-index:2; }
  .ct-police .po-sleep{ display:none; } .ct-police.sleep .po-sleep{ display:inline; } .ct-police.sleep .po-eye{ display:none; }
  .ct-police.sleep > svg{ animation:ctSnore 2.2s ease-in-out infinite; }
  @keyframes ctSnore{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(4deg) translateY(2px); } }
  .ct-police .po-arm{ transform-box:view-box; transform-origin:27px 92px; transition:transform .38s cubic-bezier(.3,1.5,.5,1); }
  .ct-police.salute .po-arm{ transform:rotate(-164deg); }
  .ct-walker{ position:absolute; left:80%; top:40%; width:12%; z-index:5; transform:translateX(-50%); transition:left 1.4s linear, top 1.4s linear; }
  .ct-walker[hidden]{ display:none; }
  .ct-walker svg{ display:block; width:100%; height:auto; overflow:visible; }
  .ct-walker .lg{ transform-box:fill-box; transform-origin:50% 0; }
  .ct-walker.walking .lg1{ animation:ctLeg .28s ease-in-out infinite alternate; }
  .ct-walker.walking .lg2{ animation:ctLeg .28s ease-in-out infinite alternate-reverse; }
  .ct-walker.walking svg{ animation:ctStep .28s ease-in-out infinite alternate; }
  @keyframes ctLeg{ from{ transform:rotate(-16deg); } to{ transform:rotate(16deg); } }
  @keyframes ctStep{ from{ transform:translateY(0); } to{ transform:translateY(-3px); } }
  .ct-rail{ position:absolute; left:0; right:0; bottom:0; height:8%; z-index:6; background:linear-gradient(180deg,#B07442 0 14%,#6B4226 14%); box-shadow:0 -6px 14px rgba(0,0,0,.45); }
  .ct-rail::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:13px; background:repeating-linear-gradient(90deg, transparent 0 18px, #7A4A28 18px 24px); }
  .ct-dim{ position:absolute; inset:0; z-index:7; pointer-events:none; opacity:0; transition:opacity .6s ease; background:radial-gradient(circle at var(--sp,50% 50%), rgba(0,0,0,0) 0 16%, rgba(8,2,4,.72) 40%); }
  .ct-dim.on{ opacity:1; }
  .ct-flash{ position:absolute; inset:0; z-index:8; pointer-events:none; background:#FFF6DC; opacity:0; }
  .ct-flash.on{ animation:ctFlash .28s ease-out; }
  @keyframes ctFlash{ from{ opacity:.55; } to{ opacity:0; } }
  .ct-sandhud{ position:absolute; left:3.5%; top:17%; z-index:9; padding:3px 10px; border-radius:999px; font-weight:700; font-size:.8rem; color:#3A2012; background:linear-gradient(135deg,#FFE7A8,#E9C46A); box-shadow:0 4px 10px rgba(0,0,0,.45); }
  .ct-sandhud.pop{ animation:ctPop .45s cubic-bezier(.3,1.6,.5,1); }
  @keyframes ctPop{ from{ transform:scale(1.7); } to{ transform:none; } }
  .ct-fx{ position:absolute; inset:0; z-index:9; pointer-events:none; }
  .ct-fly{ position:absolute; transform:translate(-50%,-50%); font-size:1.6rem; line-height:1; text-align:center; filter:drop-shadow(0 4px 6px rgba(0,0,0,.55)); transition:left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,-1,.6,1), transform .55s ease; }
  .ct-fly i{ display:block; margin-top:1px; padding:1px 5px; border-radius:5px; font-style:normal; font-size:.5rem; font-weight:700; white-space:nowrap; color:#3A2012; background:#FFE7A8; }
  .ct-fly.eat{ transition:transform .3s ease, opacity .3s ease; transform:translate(-50%,-50%) scale(.2) !important; opacity:0; }
  .ct-crumb{ position:absolute; width:4px; height:4px; border-radius:1px; background:#D9A054; animation:ctCrumb .8s ease-in forwards; }
  @keyframes ctCrumb{ to{ transform:translate(var(--dx),34px) rotate(200deg); opacity:0; } }
  .ct-nom{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-weight:700; font-size:.8rem; color:#FFE7A8; text-shadow:0 2px 6px rgba(0,0,0,.8); animation:plFloat 1.1s ease-out forwards; }
  .ct-ev{ position:absolute; left:11%; right:11%; top:9%; z-index:10; border-radius:12px; overflow:hidden; background:#FFFDF6; box-shadow:0 24px 50px -12px rgba(0,0,0,.9), 0 0 0 3px rgba(233,196,106,.9); opacity:0; transform:translateY(-120%) rotate(-8deg); pointer-events:none; }
  .ct-ev.on{ animation:ctEvIn .55s cubic-bezier(.3,1.35,.5,1) forwards; }
  .ct-ev.off{ animation:ctEvOut .35s ease-in forwards; }
  @keyframes ctEvIn{ from{ opacity:0; transform:translateY(-120%) rotate(-8deg); } to{ opacity:1; transform:rotate(-1.5deg); } }
  @keyframes ctEvOut{ from{ opacity:1; transform:rotate(-1.5deg); } to{ opacity:0; transform:translateY(40%) rotate(4deg) scale(.9); } }
  .ev-h{ padding:5px 10px; font-size:.68rem; font-weight:700; color:#FFE7A8; background:linear-gradient(90deg,#6E0D20,#9E1B36); }
  .ev-b{ padding:8px; }
  .ev-cap{ margin:6px 2px 0; text-align:center; font-size:.72rem; font-weight:700; line-height:1.5; color:#3A2A1A; }
  .ev-phone{ border-radius:10px; overflow:hidden; background:#ECE5DD; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
  .ev-top{ display:flex; align-items:center; gap:6px; padding:5px 8px; color:#FFF; background:#075E54; font-size:.7rem; font-weight:700; }
  .ev-top i{ width:18px; height:18px; border-radius:50%; background:#B2DFDB; display:grid; place-items:center; font-style:normal; font-size:.6rem; }
  .ev-top small{ display:block; font-size:.52rem; font-weight:500; opacity:.8; }
  .ev-msgs{ display:flex; flex-direction:column; gap:4px; padding:6px; }
  .ev-m{ max-width:78%; padding:4px 8px 3px; border-radius:8px; font-size:.74rem; line-height:1.45; color:#1B1B1B; background:#FFF; box-shadow:0 1px 1px rgba(0,0,0,.12); }
  .ev-m.out{ align-self:flex-end; background:#DCF8C6; }
  .ev-m.in{ align-self:flex-start; }
  .ev-m em{ display:block; font-style:normal; font-size:.5rem; color:#7A8A7A; text-align:left; direction:ltr; }
  .ev-m em b{ color:#34B7F1; font-weight:700; } .ev-m em b.g{ color:#9AA3A0; }
  .ev-m.big{ font-size:2rem; background:transparent; box-shadow:none; }
  .ev-cctv{ position:relative; height:118px; border-radius:6px; overflow:hidden; background:#1E2A22; filter:saturate(.3) contrast(1.1); }
  .ev-cctv::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); }
  .ev-cctv .ev-rec{ position:absolute; left:6px; top:5px; font-size:.55rem; font-weight:700; color:#FF3B3B; animation:ctBlink 1s steps(1) infinite; }
  .ev-cctv .ev-ts{ position:absolute; right:6px; top:5px; font-size:.52rem; font-weight:700; color:#CFE8D5; direction:ltr; }
  .ev-cctv .ev-sc{ position:absolute; left:0; right:0; top:50%; transform:translateY(-45%); text-align:center; font-size:2.3rem; letter-spacing:4px; }
  @keyframes ctBlink{ 50%{ opacity:0; } }
  .ev-pol{ width:70%; margin:2px auto 0; padding:7px 7px 4px; background:#FFF; box-shadow:0 6px 14px rgba(0,0,0,.3); transform:rotate(-3deg); }
  .ev-pol .ev-pic{ position:relative; height:92px; display:grid; place-items:center; font-size:3rem; background:linear-gradient(135deg,#FFD6E4,#FFE7A8); }
  .ev-pol .ev-pic::after{ content:"مُصادَر"; position:absolute; right:4px; bottom:4px; padding:0 5px; border:2px solid #C62828; border-radius:4px; font-size:.55rem; font-weight:700; color:#C62828; transform:rotate(-10deg); }
  .ev-aud{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:22px; background:#DCF8C6; }
  .ev-aud .ev-pl{ width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; color:#FFF; background:#075E54; }
  .ev-aud .ev-wv{ flex:1; display:flex; align-items:center; gap:2px; height:26px; }
  .ev-aud .ev-wv i{ flex:1; border-radius:2px; background:#4E8A63; animation:ctWave .7s ease-in-out infinite alternate; }
  @keyframes ctWave{ from{ transform:scaleY(.35); } to{ transform:scaleY(1); } }
  .ev-aud small{ font-size:.6rem; color:#4E6A58; }
  .ev-chart{ display:flex; align-items:flex-end; justify-content:center; gap:10px; height:96px; padding:6px 10px 0; border-bottom:2px solid #8A6A4A; }
  .ev-chart i{ width:26px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#FF5C8A,#C2185B); transform-origin:bottom; animation:ctBar .9s cubic-bezier(.3,1.3,.5,1) both; }
  .ev-chart i:last-child{ background:linear-gradient(180deg,#FFD58A,#E0457B); }
  @keyframes ctBar{ from{ transform:scaleY(0); } }
  .ev-chart .ev-inf{ align-self:center; font-size:2.4rem; font-weight:700; color:#E0457B; }
  .ev-note{ padding:10px 12px; border-radius:4px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1rem; line-height:1.8; color:#1E3A8A; white-space:pre-line; background:repeating-linear-gradient(180deg,#FFFDF0 0 27px,#C9D6F0 27px 28px); }
  .ev-note small{ display:block; text-align:left; font-size:.85rem; color:#8A1C3F; }
  .ct-title{ position:absolute; left:0; right:0; top:36%; z-index:11; padding:12px 16px; text-align:center; pointer-events:none; opacity:0; background:linear-gradient(90deg, transparent, rgba(22,8,4,.94) 14%, rgba(22,8,4,.94) 86%, transparent); box-shadow:0 -2px 0 rgba(233,196,106,.7), 0 2px 0 rgba(233,196,106,.7); clip-path:inset(0 0 0 100%); }
  .ct-title small{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.04em; color:#E9C46A; }
  .ct-title b{ display:block; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.5rem; color:#FFF3E0; text-shadow:0 2px 12px rgba(233,196,106,.5); }
  .ct-title.on{ animation:ctTitleIn .55s cubic-bezier(.3,.8,.3,1) forwards; }
  .ct-title.off{ animation:ctTitleOut .4s ease-in forwards; }
  @keyframes ctTitleIn{ from{ opacity:1; clip-path:inset(0 0 0 100%); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
  @keyframes ctTitleOut{ from{ opacity:1; clip-path:inset(0 0 0 0); } to{ opacity:1; clip-path:inset(0 100% 0 0); } }
  .ct-delib{ position:absolute; inset:0; z-index:11; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#FFE7A8; background:rgba(14,5,8,.86); animation:pop .4s ease both; }
  .ct-delib[hidden]{ display:none; }
  .ct-delib .ct-hg{ font-size:2.4rem; animation:ctHg 1.2s ease-in-out infinite; }
  @keyframes ctHg{ 0%,40%{ transform:rotate(0); } 60%,100%{ transform:rotate(180deg); } }
  .ct-delib b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.5rem; }
  .ct-delib small{ font-size:.75rem; color:rgba(255,231,168,.75); }
  .ct-ov{ position:absolute; inset:0; z-index:12; pointer-events:none; }
  .ct-burst{ position:absolute; left:50%; top:40%; padding:22px 30px; transform:translate(-50%,-50%) scale(2.4) rotate(-10deg); opacity:0; clip-path:polygon(50% 0,60% 18%,80% 6%,76% 28%,100% 26%,84% 44%,100% 60%,78% 64%,86% 88%,62% 76%,50% 100%,40% 78%,16% 92%,22% 66%,0 62%,16% 46%,2% 24%,26% 28%,20% 4%,40% 18%); animation:ctBurstIn .32s cubic-bezier(.3,1.6,.5,1) forwards; }
  .ct-burst span{ display:block; padding:14px 18px; white-space:nowrap; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:2rem; font-weight:700; line-height:1; color:#FFF; text-shadow:0 3px 0 rgba(0,0,0,.35); }
  .ct-burst.red{ background:linear-gradient(135deg,#FF6B6B,#B71C1C); } .ct-burst.gold{ background:linear-gradient(135deg,#FFE08A,#C98A1E); } .ct-burst.blue{ background:linear-gradient(135deg,#6EC6FF,#1565C0); }
  .ct-burst.out{ animation:ctBurstOut .3s ease-in forwards; }
  @keyframes ctBurstIn{ to{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-6deg); } }
  @keyframes ctBurstOut{ from{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-6deg); } to{ opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(-6deg); } }
  .ct-stamp{ position:absolute; left:50%; top:44%; z-index:12; padding:6px 18px 5px; border:4px solid currentColor; border-radius:12px; text-align:center; white-space:nowrap; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.8rem; font-weight:700; line-height:1.3; background:rgba(255,253,246,.92); opacity:0; transform:translate(-50%,-50%) scale(2.4) rotate(-12deg); pointer-events:none; }
  .ct-stamp.on{ animation:ctStampIn .45s cubic-bezier(.3,1.5,.5,1) forwards; }
  .ct-stamp.fade{ transition:opacity .5s ease; opacity:0 !important; animation:none; transform:translate(-50%,-50%) rotate(-12deg); }
  @keyframes ctStampIn{ to{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-12deg); } }
  .ct-stamp.g{ color:#C62828; } .ct-stamp.i{ color:#2E7D32; }
  .ct-stamp small{ display:block; max-width:230px; white-space:normal; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.74rem; line-height:1.5; }
  .ct-curtain{ position:absolute; inset:0; z-index:13; display:grid; place-items:center; font-size:3rem; background:linear-gradient(90deg,#6E0D20,#B3203D 12%,#7F1128 25%,#B3203D 37%,#6E0D20 50%,#B3203D 63%,#7F1128 75%,#B3203D 88%,#6E0D20); transition:transform 1.2s cubic-bezier(.6,0,.3,1); transform-origin:top; }
  .ct-curtain.up{ transform:translateY(-102%); }
  .ct-curtain span{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
  .ct-case{ position:relative; margin:2px 0 0; min-height:1.3em; font-weight:700; font-size:.88rem; color:#FFD58A; }
  .ct-dlg{ position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; width:100%; max-width:440px; padding:12px 12px 10px; border-radius:18px; text-align:right; cursor:pointer; background:linear-gradient(180deg,rgba(40,14,22,.92),rgba(24,8,14,.95)); box-shadow:inset 0 0 0 1.5px var(--nc,#FFD58A), 0 14px 30px -14px rgba(0,0,0,.8); -webkit-tap-highlight-color:transparent; }
  .ct-dlg[hidden]{ display:none; }
  .ct-dlg-p{ flex:0 0 54px; width:54px; height:54px; border-radius:50%; overflow:hidden; background:#FFF3E6; box-shadow:0 0 0 2.5px var(--nc,#FFD58A); }
  .ct-dlg-p svg{ display:block; width:100%; height:100%; }
  .ct-dlg-t{ flex:1 1 0; min-width:0; padding-left:26px; }
  .ct-dlg-t b{ display:inline-block; margin-bottom:3px; padding:1px 9px; border-radius:999px; font-size:.74rem; color:#1A0A10; background:var(--nc,#FFD58A); }
  .ct-dlg-t p{ margin:0; min-height:3.4em; font-size:.96rem; line-height:1.75; color:#FFF3F6; }
  .ct-dlg-next{ flex:1 0 100%; margin-top:2px; }
  .ct-skip{ all:unset; position:absolute; left:8px; top:8px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; cursor:pointer; color:#FFE7A8; background:rgba(255,255,255,.08); }
  .ct-ask, .ct-verdict, .ct-pun{ position:relative; width:100%; max-width:440px; padding:12px 10px; border-radius:18px; text-align:center; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,213,138,.3); animation:pop .35s ease both; }
  .ct-ask[hidden], .ct-verdict[hidden], .ct-pun[hidden]{ display:none; }
  .ct-q{ margin:0 0 10px; font-weight:700; color:#FFE3EC; }
  .ct-qbtns{ display:flex; flex-direction:column; gap:8px; }
  .ct-qb{ all:unset; box-sizing:border-box; padding:11px 12px; border-radius:12px; text-align:right; font-size:.9rem; font-weight:700; color:#E3F2FD; background:linear-gradient(135deg,#1E3A5F,#274C77); box-shadow:inset 0 0 0 1px rgba(158,216,255,.35); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ct-vbtns{ position:relative; display:flex; justify-content:center; gap:10px; }
  .ct-vb{ all:unset; box-sizing:border-box; flex:1; max-width:170px; padding:13px 8px; border-radius:14px; text-align:center; font-weight:700; font-size:1.02rem; cursor:pointer; transition:transform .28s cubic-bezier(.3,1.5,.5,1), opacity .25s ease; -webkit-tap-highlight-color:transparent; }
  .ct-inno{ color:#12391F; background:linear-gradient(135deg,#B9F0A8,#7ED36A); box-shadow:0 8px 18px -8px rgba(126,211,106,.8); }
  .ct-guilty{ color:#FFFFFF; background:linear-gradient(135deg,#FF6B6B,#C62828); box-shadow:0 8px 18px -8px rgba(198,40,40,.9); }
  .ct-inno.off{ opacity:.45; pointer-events:none; font-size:.82rem; }
  .ct-pbtns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .ct-pb{ all:unset; box-sizing:border-box; padding:10px 8px; border-radius:12px; text-align:center; font-size:.84rem; font-weight:700; line-height:1.5; color:#3A2012; background:linear-gradient(135deg,#FFF3D6,#FFD58A); box-shadow:0 6px 14px -8px rgba(0,0,0,.7); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ct-vb:active, .ct-pb:active, .ct-qb:active{ transform:scale(.96); }
  .ct-record{ position:relative; width:min(350px,94%); padding:18px 16px 16px; border-radius:6px; text-align:right; color:#3A2A1A; background:#FFFBEF; box-shadow:0 20px 44px -16px rgba(0,0,0,.85), inset 0 0 0 3px #E9C46A, inset 0 0 0 6px #FFFBEF, inset 0 0 0 7px #C9A45C; animation:pop .5s ease both; }
  .ct-record[hidden]{ display:none; }
  .ct-record .ct-seal{ width:50px; height:50px; margin:0 auto 4px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; background:radial-gradient(circle at 35% 30%,#FFF0B8,#D9A94A 70%); box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 0 0 3px rgba(122,84,24,.45); }
  .ct-record h4{ margin:0; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.45rem; color:#8A1C3F; }
  .ct-record .ct-rsub{ display:block; margin:0 0 8px; padding-bottom:6px; text-align:center; font-size:.7rem; color:#8A6A4A; border-bottom:1.5px dashed #D8C8A8; }
  .ct-record .ct-row{ display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px dashed #E3D6BE; line-height:1.55; }
  .ct-record .ct-row .ct-rn{ flex:0 0 20px; height:20px; margin-top:2px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#FFF; background:#8A1C3F; }
  .ct-record .ct-row b{ display:block; font-size:.8rem; }
  .ct-record .ct-row em{ display:block; font-style:normal; font-size:.64rem; color:#8A6A4A; }
  .ct-record .ct-row small{ font-size:.76rem; font-weight:700; } .ct-record small.g{ color:#C62828; } .ct-record small.i{ color:#2E7D32; }
  .ct-record .ct-tot{ display:flex; justify-content:space-between; margin-top:8px; font-weight:700; color:#8A1C3F; }
  .ct-record .ct-fin{ margin:10px 0 0; padding:9px; border-radius:8px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.02rem; line-height:1.6; color:#8A1C3F; background:#FFF0F4; }
  .ct-record .ct-fin small{ display:block; font-family:'Tajawal','Segoe UI',sans-serif; font-size:.7rem; color:#8A6A4A; }
  .ct-record .ct-sig{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; font-size:.66rem; color:#8A6A4A; }
  .ct-record .ct-sig b{ display:block; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.05rem; color:#1E3A8A; }
  .ct-record .ct-ok{ position:absolute; left:14px; top:16px; padding:3px 10px; border:2.5px solid #C62828; border-radius:8px; font-weight:700; font-size:.8rem; color:#C62828; transform:rotate(-14deg); opacity:.85; }
  .ct-record button{ display:block; margin:12px auto 0; }
  .ct-exec{ position:fixed; inset:0; z-index:2147482000; overflow:hidden; background:rgba(10,3,6,0); transition:background .5s ease, opacity .5s ease; }
  .ct-exec[hidden]{ display:none; }
  .ct-exec.dim{ background:rgba(10,3,6,.6); }
  .ct-exec.off{ opacity:0; }
  .ct-exec-bar{ position:absolute; left:10px; right:10px; top:calc(env(safe-area-inset-top,0px) + 12px); z-index:3; display:flex; align-items:center; gap:8px; width:fit-content; max-width:calc(100% - 20px); margin:0 auto; padding:7px 8px 7px 14px; border-radius:999px; white-space:nowrap; font-weight:700; font-size:.8rem; color:#3A2012; background:linear-gradient(135deg,#FFE7A8,#E9C46A); box-shadow:0 8px 20px rgba(0,0,0,.5); animation:pop .35s ease both; }
  .ct-exec-bar b{ overflow:hidden; text-overflow:ellipsis; }
  .ct-exec-bar span{ padding:2px 10px; border-radius:999px; color:#FFE7A8; background:#3A2012; }
  .ct-exec-bar span:empty{ display:none; }
  .ct-exec-layer{ position:absolute; inset:0; z-index:1; }
  .ct-exec-center{ position:absolute; left:50%; top:50%; z-index:2; width:min(330px,86vw); transform:translate(-50%,-50%); text-align:center; }
  .cx-w{ position:absolute; line-height:1.1; white-space:nowrap; transform:translate(-50%,-50%) rotate(var(--r)); animation:cxPop .32s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes cxPop{ from{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(0); } to{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); } }
  .cx-word{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.55); }
  .cx-bub{ padding:6px 11px; border-radius:14px 14px 14px 4px; font-weight:700; color:#3A1020; background:#FFFFFF; box-shadow:0 6px 16px rgba(0,0,0,.45); }
  .cx-note{ font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.5); }
  .cx-fall{ position:absolute; top:-8%; font-size:var(--s,2rem); animation:cxFall var(--d,2.4s) linear forwards; }
  @keyframes cxFall{ to{ transform:translateY(118vh) rotate(var(--rr,300deg)); } }
  .ct-exec-done{ position:absolute; left:50%; top:50%; z-index:4; padding:14px 22px; border-radius:18px; transform:translate(-50%,-50%); white-space:nowrap; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.35rem; color:#FFFFFF; background:linear-gradient(135deg,#2E9D5B,#1B5E20); box-shadow:0 14px 34px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.25); animation:fsToastIn .45s cubic-bezier(.3,1.5,.5,1) both; }
  .cx-card{ padding:16px 16px 14px; border-radius:16px; color:#3A2A1A; background:#FFFDF6; box-shadow:0 18px 44px rgba(0,0,0,.6); animation:fsToastIn .45s cubic-bezier(.3,1.5,.5,1) both; }
  .cx-card h5{ margin:0 0 8px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.25rem; color:#8A1C3F; }
  .cx-li{ display:flex; justify-content:space-between; margin:0; padding:5px 0; font-size:.9rem; border-bottom:1px dashed #D8C8A8; opacity:0; animation:fsToastIn .35s ease forwards; animation-delay:var(--dl); }
  .cx-li b{ color:#8A1C3F; } .cx-tot{ font-weight:700; border-bottom:none; }
  .cx-paid{ display:inline-block; margin:8px 0 0; padding:3px 12px; border:3px solid #2E9D5B; border-radius:8px; font-weight:700; color:#2E9D5B; transform:rotate(-8deg); opacity:0; animation:fsToastIn .4s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay:var(--dl); }
  .cx-cal{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
  .cx-cal i{ aspect-ratio:1; border-radius:7px; display:grid; place-items:center; font-style:normal; font-size:.66rem; font-weight:700; color:#8A6A4A; background:#F3E9D6; }
  .cx-cal i.on{ font-size:1.05rem; background:#6B3E20; animation:ctPop .3s ease; }
  .cx-jail{ position:relative; width:200px; height:190px; margin:0 auto; }
  .cx-jail .cx-face{ position:absolute; left:50%; top:16%; width:48%; transform:translateX(-50%); }
  .cx-face svg{ display:block; width:100%; height:auto; }
  .cx-jail svg.cx-bars, .cx-jail svg.cx-heart{ position:absolute; inset:0; width:100%; height:100%; }
  .cx-jail .cx-bars{ animation:cxBars .6s cubic-bezier(.4,1.5,.5,1) .4s both; }
  @keyframes cxBars{ from{ transform:translateY(-110%); } to{ transform:none; } }
  .cx-heart{ filter:drop-shadow(0 0 14px rgba(255,92,138,.8)); }
  .cx-lock{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); font-size:2rem; animation:cxPop .4s cubic-bezier(.3,1.6,.5,1) 1s both; --r:0deg; }
  .cx-clock{ margin:12px 0 0; font-size:1.7rem; font-weight:700; color:#FFE7A8; direction:ltr; font-variant-numeric:tabular-nums; text-shadow:0 2px 10px rgba(0,0,0,.7); }
  .cx-big{ font-size:6rem; line-height:1; filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)); animation:cxShake .5s ease-in-out infinite alternate; }
  .cx-big.open{ animation:fsToastIn .45s cubic-bezier(.3,1.6,.5,1) both; }
  .cx-hug{ animation:heartbeat 1.1s ease-in-out infinite; }
  @keyframes cxShake{ from{ transform:rotate(-6deg); } to{ transform:rotate(6deg); } }
  .cx-cc{ position:relative; width:250px; height:150px; margin:0 auto; padding:16px; border-radius:16px; text-align:right; color:#FFF; background:linear-gradient(135deg,#6A1B9A,#E0457B); box-shadow:0 18px 40px rgba(0,0,0,.6); animation:cxSwipe 1s cubic-bezier(.3,1.2,.5,1) both; }
  .cx-cc .chip{ display:block; width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#FFE7A8,#C9A45C); }
  .cx-cc b{ display:block; margin-top:22px; font-size:1.1rem; } .cx-cc small{ font-size:.85rem; opacity:.9; }
  @keyframes cxSwipe{ from{ transform:translateX(-120vw) rotate(-10deg); } to{ transform:none; } }
  .cx-sing{ position:relative; }
  .cx-sing .cx-face{ width:120px; margin:0 auto; animation:ctTalk .35s ease-in-out infinite alternate; }
  .cx-mic{ position:absolute; left:calc(50% + 30px); top:86px; font-size:2rem; }
  .cx-lyr{ margin:8px 0 0; min-height:1.6em; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.2rem; color:#8A1C3F; }
  .cx-lyr.pop{ animation:pop .35s ease both; }
  .ml-studio{ position:relative; width:100%; max-width:440px; height:210px; border-radius:22px; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%, #2A3F9E 0%, #101B55 45%, #070B26 100%); box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(160,190,255,.35); }
  .ml-beams{ position:absolute; left:50%; top:-60%; width:220%; aspect-ratio:1; transform:translateX(-50%); background:repeating-conic-gradient(from 0deg, rgba(160,200,255,.13) 0 6deg, transparent 6deg 18deg); -webkit-mask:radial-gradient(closest-side, #000 30%, transparent 80%); mask:radial-gradient(closest-side, #000 30%, transparent 80%); animation:mlBeams 26s linear infinite; }
  @keyframes mlBeams{ to{ transform:translateX(-50%) rotate(360deg); } }
  .ml-floor{ position:absolute; left:0; right:0; bottom:0; height:30%; background:radial-gradient(60% 100% at 50% 0%, rgba(120,160,255,.35), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px); }
  .ml-logo{ position:absolute; left:6%; top:14%; width:40%; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle, #1B2C7A 55%, #0A1240 100%); box-shadow:0 0 0 3px #C9A45C, 0 0 0 6px rgba(201,164,92,.35), 0 0 34px rgba(120,160,255,.55); animation:mlGlow 3s ease-in-out infinite alternate; }
  .ml-logo i{ font-style:normal; font-size:1.4rem; } .ml-logo b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.02rem; line-height:1.25; color:#FFE7A8; text-shadow:0 2px 10px rgba(255,213,138,.5); }
  @keyframes mlGlow{ from{ box-shadow:0 0 0 3px #C9A45C, 0 0 0 6px rgba(201,164,92,.35), 0 0 22px rgba(120,160,255,.4); } to{ box-shadow:0 0 0 3px #C9A45C, 0 0 0 6px rgba(201,164,92,.35), 0 0 44px rgba(150,190,255,.8); } }
  .ml-host{ position:absolute; right:4%; bottom:0; width:34%; z-index:2; }
  .ml-host svg{ display:block; width:100%; height:auto; transform-origin:50% 100%; animation:ctBreath 3.4s ease-in-out infinite; }
  .ml-host.talk svg{ animation:ctTalk .42s ease-in-out infinite alternate; }
  .ml-host .m-open{ opacity:0; } .ml-host.talk .m-open{ animation:ctMouth .24s linear infinite; }
  .ml-say{ position:absolute; right:36%; top:12%; z-index:3; max-width:52%; margin:0; padding:7px 10px; border-radius:12px 12px 2px 12px; font-size:.78rem; font-weight:700; line-height:1.5; color:#0B1A4A; background:#FFFFFF; box-shadow:0 8px 18px rgba(0,0,0,.45); opacity:0; transform:scale(.85); transition:opacity .25s ease, transform .25s ease; }
  .ml-say.on{ opacity:1; transform:none; }
  .ml-life{ position:absolute; left:4%; bottom:8px; z-index:3; display:flex; gap:6px; }
  .ml-lf{ all:unset; box-sizing:border-box; min-width:40px; height:30px; padding:0 8px; border-radius:15px; display:grid; place-items:center; font-weight:700; font-size:.78rem; color:#FFE7A8; background:linear-gradient(180deg,#1E3190,#0E1A5C); box-shadow:inset 0 0 0 1.5px #C9A45C, 0 4px 10px rgba(0,0,0,.4); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ml-lf.used{ opacity:.35; pointer-events:none; background:#2A2A3A; box-shadow:inset 0 0 0 1.5px #666; position:relative; }
  .ml-lf.used::after{ content:""; position:absolute; left:6px; right:6px; top:50%; height:2px; background:#FF5252; transform:rotate(-20deg); }
  .ml-lf:disabled{ opacity:.45; }
  .ml-prize{ position:absolute; right:4%; top:8px; z-index:3; padding:3px 11px; border-radius:999px; font-weight:700; font-size:.72rem; color:#1A1030; background:linear-gradient(135deg,#FFE7A8,#E9C46A); box-shadow:0 4px 10px rgba(0,0,0,.4); }
  .ml-ladder{ position:relative; display:flex; gap:3px; width:100%; max-width:440px; }
  .ml-ladder i{ flex:1; height:22px; border-radius:6px; display:grid; place-items:center; font-style:normal; font-size:.58rem; font-weight:700; color:rgba(220,230,255,.6); background:rgba(40,60,160,.35); box-shadow:inset 0 0 0 1px rgba(160,190,255,.25); }
  .ml-ladder i.safe{ box-shadow:inset 0 0 0 1.5px #C9A45C; color:#FFE7A8; }
  .ml-ladder i.done{ color:#0E3A1E; background:#8CE0A0; }
  .ml-ladder i.now{ color:#1A1030; background:linear-gradient(135deg,#FFE7A8,#E9C46A); transform:scale(1.12); box-shadow:0 0 12px rgba(255,213,138,.7); }
  .ml-q, .ml-o{ position:relative; width:100%; max-width:440px; padding:2px; clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%); background:linear-gradient(90deg,#7A5A22,#F1D58A 50%,#7A5A22); }
  .ml-q[hidden]{ display:none; }
  .ml-q > span{ display:block; padding:14px 26px; clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%); text-align:center; font-weight:700; font-size:1rem; line-height:1.6; color:#FFFFFF; background:linear-gradient(180deg,#132A6E,#0A1745); animation:pop .35s ease both; }
  .ml-opts{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:440px; }
  .ml-o{ all:unset; box-sizing:border-box; display:block; width:100%; padding:2px; clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%); background:linear-gradient(90deg,#7A5A22,#F1D58A 50%,#7A5A22); cursor:pointer; -webkit-tap-highlight-color:transparent; animation:pop .35s ease both; }
  .ml-o > span{ display:flex; align-items:center; gap:8px; padding:11px 24px; clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%); text-align:right; font-weight:700; font-size:.94rem; color:#FFFFFF; background:linear-gradient(180deg,#132A6E,#0A1745); transition:background .25s ease; }
  .ml-o > span i{ font-style:normal; color:#FFD58A; }
  .ml-o.sel > span{ background:linear-gradient(180deg,#FFB02E,#E07A00); color:#1A1030; } .ml-o.sel > span i{ color:#1A1030; }
  .ml-o.ok > span{ background:linear-gradient(180deg,#34C759,#1E8E3E); color:#FFFFFF; animation:mlOk .5s ease 3; } .ml-o.ok > span i{ color:#FFFFFF; }
  .ml-o.bad > span{ background:linear-gradient(180deg,#FF5A5A,#B71C1C); }
  .ml-o.gone{ visibility:hidden; }
  .ml-opts.lock .ml-o{ pointer-events:none; }
  @keyframes mlOk{ 50%{ filter:brightness(1.35); } }
  .ml-final{ position:relative; width:100%; max-width:440px; padding:10px; border-radius:16px; text-align:center; background:rgba(255,176,46,.12); box-shadow:inset 0 0 0 1.5px rgba(255,176,46,.5); animation:pop .3s ease both; }
  .ml-final[hidden]{ display:none; }
  .ml-final p{ margin:0 0 8px; font-weight:700; color:#FFE7A8; }
  .ml-final div{ display:flex; gap:8px; justify-content:center; }
  .ml-next[hidden]{ display:none; }
  .ml-modal{ position:fixed; inset:0; z-index:2147482500; display:grid; place-items:center; padding:18px; background:rgba(5,8,30,.82); animation:pop .25s ease both; }
  .ml-modal[hidden]{ display:none; }
  .ml-mbox{ width:min(340px,92vw); padding:18px 16px 16px; border-radius:22px; text-align:center; color:#FFFFFF; background:linear-gradient(180deg,#16236A,#0A1240); box-shadow:0 24px 50px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(201,164,92,.7); }
  .ml-mbox h5{ margin:0 0 10px; font-size:1.05rem; color:#FFE7A8; }
  .ml-call .av{ width:92px; height:92px; margin:0 auto 6px; border-radius:50%; overflow:hidden; background:#FFF3E6; box-shadow:0 0 0 3px #34C759, 0 0 0 9px rgba(52,199,89,.2); }
  .ml-call .av svg{ display:block; width:100%; height:100%; }
  .ml-call.ringing .av{ animation:mlRing .9s ease-in-out infinite; }
  @keyframes mlRing{ 0%,100%{ box-shadow:0 0 0 3px #34C759, 0 0 0 9px rgba(52,199,89,.2); } 50%{ box-shadow:0 0 0 3px #34C759, 0 0 0 18px rgba(52,199,89,0); } }
  .ml-call b{ display:block; font-size:1.15rem; } .ml-call small{ display:block; margin:2px 0 10px; font-size:.78rem; color:#9EE6B0; direction:rtl; }
  .ml-call p{ min-height:3.2em; margin:0 0 12px; padding:10px 12px; border-radius:14px; font-size:.95rem; line-height:1.7; color:#1B1B1B; background:#DCF8C6; text-align:right; }
  .ml-call p:empty{ visibility:hidden; }
  .ml-aud{ display:flex; justify-content:space-around; align-items:flex-end; gap:8px; height:150px; margin:6px 0 4px; padding:0 6px; border-bottom:2px solid rgba(255,231,168,.6); }
  .ml-aud div{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; }
  .ml-aud span{ font-size:.72rem; font-weight:700; color:#FFE7A8; }
  .ml-aud i{ display:block; width:100%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#6EC6FF,#1565C0); transform-origin:bottom; animation:ctBar 1.2s cubic-bezier(.3,1.2,.5,1) both; }
  .ml-aud b{ font-size:.9rem; color:#FFFFFF; }
  .ml-audn{ margin:4px 0 12px; font-size:.72rem; color:rgba(255,255,255,.7); }
  .ml-cheque{ position:relative; width:min(360px,96%); padding:16px 16px 14px; border-radius:10px; text-align:right; color:#1E2A3A; background:repeating-linear-gradient(135deg,#F4F8EC 0 12px,#EEF4E2 12px 24px); box-shadow:0 20px 44px -16px rgba(0,0,0,.85), inset 0 0 0 2px #9BB88A; animation:fsToastIn .6s cubic-bezier(.3,1.4,.5,1) both; }
  .ml-cheque[hidden]{ display:none; }
  .ml-cheque .bk{ display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; margin-bottom:8px; border-bottom:1.5px solid #9BB88A; font-weight:700; color:#2E5A2E; }
  .ml-cheque .bk small{ font-size:.66rem; color:#5A7A5A; direction:ltr; }
  .ml-cheque .ln{ display:flex; gap:8px; align-items:baseline; margin:7px 0; font-size:.78rem; color:#5A6A5A; }
  .ml-cheque .ln b{ flex:1; padding:1px 6px 2px; border-bottom:1.5px dotted #7A8A7A; font-size:.98rem; color:#12306B; }
  .ml-cheque .amt{ margin:10px 0 6px; padding:8px 10px; border-radius:8px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.25rem; color:#8A1C3F; background:#FFFFFF; box-shadow:inset 0 0 0 1.5px #9BB88A; }
  .ml-cheque .sg{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:10px; font-size:.7rem; color:#5A6A5A; }
  .ml-cheque .sg b{ display:block; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.3rem; color:#12306B; transform:rotate(-4deg); }
  .ml-cheque .sc{ display:block; margin-top:8px; text-align:center; font-weight:700; font-size:.82rem; color:#2E5A2E; }
  .ml-cheque button{ display:block; margin:12px auto 0; }
  .wd-scene{ position:relative; width:100%; max-width:440px; aspect-ratio:10/11; border-radius:22px; overflow:hidden; background:#2A160E; box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,213,138,.3); }
  .wd-bgw{ position:absolute; inset:0; }
  .wd-bgw svg{ position:absolute; inset:0; width:100%; height:100%; display:block; animation:wdFade .6s ease both; }
  @keyframes wdFade{ from{ opacity:0; } to{ opacity:1; } }
  .wd-kosha{ position:absolute; left:20%; width:60%; top:19%; z-index:2; }
  .wd-kosha svg, .wd-cake svg, .wd-p svg{ display:block; width:100%; height:auto; overflow:visible; }
  .wk-tw{ animation:wkTw 1.4s ease-in-out infinite alternate; }
  @keyframes wkTw{ from{ opacity:.3; } to{ opacity:1; } }
  .wd-cake{ position:absolute; left:4%; width:16%; top:36%; z-index:3; }
  .wd-p{ position:absolute; z-index:4; transition:left 5.6s ease-in-out, top 5.6s ease-in-out, width 5.6s ease-in-out; }
  .wd-p svg{ transform-origin:50% 100%; animation:ctBreath 3.4s ease-in-out infinite; }
  .wd-bride{ left:33%; width:16%; top:21%; }
  .wd-groom{ left:51%; width:16%; top:21%; }
  .wd-bride.walk svg{ animation:wdWalk .55s ease-in-out infinite alternate; }
  @keyframes wdWalk{ from{ transform:rotate(-1.6deg); } to{ transform:rotate(1.6deg) translateY(-1.5px); } }
  .wd-pop{ animation:wdPop .5s cubic-bezier(.3,1.6,.5,1); }
  @keyframes wdPop{ from{ transform:scale(.7); opacity:.3; } to{ transform:none; opacity:1; } }
  .wd-dim{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .9s ease; background:radial-gradient(38% 60% at 50% 55%, rgba(0,0,0,0), rgba(6,2,4,.62)); }
  .wd-dim.on{ opacity:1; }
  .wd-fx{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
  .wd-petal{ position:absolute; top:-8%; font-size:var(--s,1.2rem); animation:cxFall var(--d,3s) linear forwards; }
  .wd-zg{ position:absolute; padding:3px 8px; border-radius:10px 10px 10px 2px; white-space:nowrap; font-size:.7rem; font-weight:700; color:#8A1C3F; background:#FFFFFF; box-shadow:0 4px 10px rgba(0,0,0,.4); animation:plFloat 2s ease-out forwards; }
  .wd-inst{ position:absolute; font-size:1.5rem; animation:plFloat 1.8s ease-out forwards; }
  .wd-mab{ position:absolute; left:50%; top:6%; z-index:7; transform:translateX(-50%); white-space:nowrap; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:2rem; line-height:1.3; color:#FFE7A8; text-shadow:0 3px 14px rgba(0,0,0,.8), 0 0 24px rgba(255,213,138,.6); animation:fsToastIn .7s cubic-bezier(.3,1.5,.5,1) both; }
  .wd-mab small{ display:block; font-size:1.1rem; color:#FFFFFF; }
  .wd-step{ position:relative; margin:4px 0 0; min-height:1.3em; font-weight:700; font-size:.92rem; color:#FFD58A; }
  .wd-opts{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; max-width:440px; }
  .wd-o{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:14px; font-weight:700; font-size:.88rem; color:#FFE3EC; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1.5px rgba(255,213,138,.25); cursor:pointer; transition:transform .2s ease; -webkit-tap-highlight-color:transparent; animation:pop .35s ease both; }
  .wd-o i{ font-style:normal; font-size:1.35rem; }
  .wd-o:active{ transform:scale(.96); }
  .wd-o.on{ color:#3A1020; background:linear-gradient(135deg,#FFE7A8,#FFB3C8); box-shadow:0 8px 18px -8px rgba(255,150,180,.8); }
  .wd-say{ position:relative; display:flex; gap:10px; align-items:center; width:100%; max-width:440px; padding:10px 12px; border-radius:16px; text-align:right; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,213,138,.3); animation:pop .3s ease both; }
  .wd-say[hidden]{ display:none; }
  .wd-say .av{ flex:0 0 48px; width:48px; height:48px; border-radius:50%; overflow:hidden; background:#FFF3E6; box-shadow:0 0 0 2px #FFD58A; }
  .wd-say .av svg{ display:block; width:100%; height:100%; }
  .wd-say p{ margin:0; font-size:.93rem; line-height:1.6; color:#FFF3F6; }
  #wdNext[hidden], #wdStart[hidden]{ display:none; }
  .wd-card{ position:relative; width:min(350px,94%); padding:26px 20px 20px; border-radius:8px; text-align:center; color:#5A3A2A; background:linear-gradient(180deg,#FFFDF7,#FBF3E4); box-shadow:0 22px 50px -16px rgba(0,0,0,.85), inset 0 0 0 3px #E0B45A, inset 0 0 0 7px #FFFDF7, inset 0 0 0 8px #C9A45C; animation:fsToastIn .7s cubic-bezier(.3,1.4,.5,1) both; }
  .wd-card[hidden]{ display:none; }
  .wd-card::before, .wd-card::after{ content:"🌸"; position:absolute; top:10px; font-size:1.2rem; }
  .wd-card::before{ right:12px; } .wd-card::after{ left:12px; }
  .wd-ayah{ margin:0 0 8px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1rem; color:#8A6A2A; }
  .wd-pre{ margin:4px 0; font-size:.86rem; color:#7A5A4A; }
  .wd-card h4{ margin:4px 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:2rem; line-height:1.4; color:#8A1C3F; }
  .wd-card h4 span{ color:#E0457B; font-size:1.4rem; }
  .wd-det{ display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:12px 0 8px; padding:10px 12px; border-radius:10px; text-align:right; font-size:.82rem; background:rgba(224,180,90,.12); }
  .wd-det span{ color:#8A6A4A; } .wd-det b{ color:#5A2A1A; }
  .wd-date{ margin:8px 0 2px; font-weight:700; color:#8A1C3F; }
  .wd-rsvp{ margin:0; font-size:.78rem; color:#8A6A4A; }
  .wd-card button{ display:block; margin:14px auto 0; }
  .pk-stage{ position:relative; width:100%; max-width:440px; aspect-ratio:10/11; border-radius:22px; overflow:hidden; background:#050A24; box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(160,190,255,.3); touch-action:manipulation; -webkit-user-select:none; user-select:none; cursor:crosshair; }
  .pk-stage.bang{ animation:ctBang .3s ease; }
  .pk-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .pk-fl{ animation:pkFl 1.6s steps(1) infinite; } @keyframes pkFl{ 0%,85%{ opacity:0; } 86%,100%{ opacity:1; } }
  .pk-board{ position:absolute; left:50%; top:1.5%; z-index:5; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:4px 12px; border-radius:10px; white-space:nowrap; font-weight:700; font-size:.78rem; color:#FFFFFF; background:rgba(8,12,40,.88); box-shadow:inset 0 0 0 1.5px #FFD58A, 0 6px 14px rgba(0,0,0,.5); }
  .pk-board b{ padding:1px 10px; border-radius:6px; font-size:1rem; color:#1A1030; background:#FFD58A; }
  .pk-shots{ position:absolute; left:50%; top:9.5%; z-index:5; transform:translateX(-50%); display:flex; gap:5px; }
  .pk-shots i{ width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }
  .pk-shots i.g{ background:#34C759; } .pk-shots i.x{ background:#FF5252; } .pk-shots i.now{ box-shadow:0 0 0 2px #FFD58A; }
  .pk-keeper{ position:absolute; left:50%; top:37%; width:23%; z-index:3; transform:translateX(-50%); transform-origin:50% 92%; transition:transform .42s cubic-bezier(.2,.8,.3,1); }
  .pk-keeper svg{ display:block; width:100%; height:auto; overflow:visible; }
  .pk-keeper.ready svg{ animation:pkBob .55s ease-in-out infinite alternate; }
  @keyframes pkBob{ from{ transform:translateX(-4px); } to{ transform:translateX(4px); } }
  .pk-keeper.dl{ transform:translateX(-50%) translate(-105%,10%) rotate(-74deg); }
  .pk-keeper.dr{ transform:translateX(-50%) translate(105%,10%) rotate(74deg); }
  .pk-keeper.jump{ transform:translateX(-50%) translateY(-16%); }
  .pk-keeper.hug{ transition:transform 1s cubic-bezier(.3,.8,.3,1); transform:translateX(-50%) translateY(62%) scale(1.9); z-index:6; }
  .pk-say{ position:absolute; left:50%; top:23%; z-index:6; max-width:70%; padding:5px 10px; border-radius:12px; transform:translateX(-50%) scale(.8); white-space:nowrap; font-weight:700; font-size:.74rem; color:#1A1030; background:#FFFFFF; box-shadow:0 6px 14px rgba(0,0,0,.5); opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
  .pk-say.on{ opacity:1; transform:translateX(-50%) scale(1); }
  .pk-aim{ position:absolute; z-index:4; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; box-shadow:inset 0 0 0 3px #FFD58A, 0 0 0 2px rgba(0,0,0,.35); opacity:0; pointer-events:none; }
  .pk-aim::before, .pk-aim::after{ content:""; position:absolute; left:50%; top:50%; background:#FFD58A; transform:translate(-50%,-50%); }
  .pk-aim::before{ width:2px; height:44px; } .pk-aim::after{ width:44px; height:2px; }
  .pk-aim.on{ opacity:1; animation:pkAim .5s ease-in-out infinite alternate; }
  @keyframes pkAim{ from{ transform:scale(.85); } to{ transform:scale(1.1); } }
  .pk-ball{ position:absolute; left:50%; top:89%; width:9%; z-index:5; transform:translate(-50%,-50%); transition:left .55s cubic-bezier(.3,.55,.35,1), top .55s cubic-bezier(.3,.55,.35,1), width .55s ease, opacity .4s ease; filter:drop-shadow(0 4px 5px rgba(0,0,0,.5)); pointer-events:none; }
  .pk-ball svg{ display:block; width:100%; height:auto; }
  .pk-ball.spin svg{ animation:pkSpin .3s linear infinite; }
  @keyframes pkSpin{ to{ transform:rotate(360deg); } }
  .pk-fx{ position:absolute; inset:0; z-index:7; pointer-events:none; }
  .pk-ripple{ position:absolute; width:70px; height:40px; margin:-20px 0 0 -35px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.8); animation:pkRip .6s ease-out forwards; }
  @keyframes pkRip{ from{ transform:scale(.3); opacity:1; } to{ transform:scale(1.8); opacity:0; } }
  .pk-goal{ position:absolute; left:50%; top:52%; z-index:8; transform:translate(-50%,-50%); white-space:nowrap; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1.5rem, 8vw, 2.05rem); color:#FFE7A8; text-shadow:0 4px 0 #B8872E, 0 8px 22px rgba(0,0,0,.8); animation:fsToastIn .45s cubic-bezier(.3,1.6,.5,1) both; }
  .pk-goal.save{ color:#9ED8FF; text-shadow:0 4px 0 #1565C0, 0 8px 22px rgba(0,0,0,.8); }
  .pk-goal.miss{ color:#FFB3B3; text-shadow:0 4px 0 #B71C1C, 0 8px 22px rgba(0,0,0,.8); }
  .pk-com{ position:relative; display:flex; align-items:center; gap:10px; width:100%; max-width:440px; padding:10px 12px; border-radius:16px; text-align:right; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,213,138,.3); }
  .pk-com i{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:1.2rem; background:linear-gradient(135deg,#1E3190,#0E1A5C); box-shadow:0 0 0 2px #FFD58A; }
  .pk-com p{ margin:0; min-height:1.6em; font-size:.94rem; font-weight:700; line-height:1.6; color:#FFF3F6; }
  .pk-res{ position:relative; width:min(340px,94%); padding:18px 16px; border-radius:18px; text-align:center; color:#FFFFFF; background:linear-gradient(180deg,#16236A,#0A1240); box-shadow:0 22px 50px -16px rgba(0,0,0,.85), inset 0 0 0 2px #FFD58A; animation:fsToastIn .6s cubic-bezier(.3,1.4,.5,1) both; }
  .pk-res[hidden]{ display:none; }
  .pk-res .cup{ font-size:3.4rem; line-height:1; animation:heartbeat 1.4s ease-in-out infinite; }
  .pk-res h4{ margin:6px 0 2px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.5rem; color:#FFE7A8; }
  .pk-res .sc{ margin:4px 0 8px; font-size:1.4rem; font-weight:800; }
  .pk-res p{ margin:0; font-size:.9rem; line-height:1.7; color:rgba(255,255,255,.88); }
  .pk-res button{ display:block; margin:12px auto 0; }
  .ch-phone{ position:relative; display:flex; flex-direction:column; width:100%; max-width:400px; height:min(600px,72vh); border-radius:30px; overflow:hidden; background:#ECE5DD; box-shadow:0 26px 60px -24px rgba(0,0,0,.95), 0 0 0 8px #161018, 0 0 0 9.5px #3A2A34; }
  .ch-top{ display:flex; align-items:center; gap:9px; padding:12px 12px 10px; color:#FFFFFF; background:#075E54; }
  .ch-back{ font-size:1.6rem; line-height:1; opacity:.9; }
  .ch-av{ width:40px; height:40px; flex:0 0 40px; border-radius:50%; overflow:hidden; background:#FFF3E6; }
  .ch-av svg{ display:block; width:100%; height:100%; }
  .ch-who{ flex:1; min-width:0; text-align:right; } .ch-who b{ display:block; font-size:.98rem; } .ch-who small{ font-size:.72rem; opacity:.85; }
  .ch-who small.typing{ color:#9EF0B6; font-weight:700; }
  .ch-ic{ font-size:1.05rem; opacity:.9; }
  .ch-body{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:12px 10px; background-color:#ECE5DD; background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.4px); background-size:16px 16px; scroll-behavior:smooth; }
  .ch-day{ align-self:center; padding:3px 10px; border-radius:8px; font-size:.68rem; color:#54656F; background:#E1F2FB; box-shadow:0 1px 1px rgba(0,0,0,.08); }
  .ch-m{ position:relative; max-width:80%; padding:6px 9px 4px; border-radius:10px; font-size:.95rem; line-height:1.5; color:#111B21; background:#FFFFFF; box-shadow:0 1px 1px rgba(0,0,0,.13); text-align:right; animation:chIn .28s cubic-bezier(.3,1.3,.5,1) both; }
  .ch-m.in{ align-self:flex-start; border-top-right-radius:2px; }
  .ch-m.out{ align-self:flex-end; background:#D9FDD3; border-top-left-radius:2px; }
  .ch-m em{ display:block; margin-top:1px; font-style:normal; font-size:.62rem; color:#667781; text-align:left; direction:ltr; }
  .ch-m em b{ color:#53BDEB; }
  @keyframes chIn{ from{ opacity:0; transform:translateY(10px) scale(.96); } to{ opacity:1; transform:none; } }
  .ch-typing{ align-self:flex-start; display:flex; gap:4px; padding:10px 12px; border-radius:10px; border-top-right-radius:2px; background:#FFFFFF; box-shadow:0 1px 1px rgba(0,0,0,.13); animation:chIn .2s ease both; }
  .ch-typing i{ width:7px; height:7px; border-radius:50%; background:#8696A0; animation:chDot 1s ease-in-out infinite; }
  .ch-typing i:nth-child(2){ animation-delay:.15s; } .ch-typing i:nth-child(3){ animation-delay:.3s; }
  @keyframes chDot{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
  .ch-voice{ display:flex; align-items:center; gap:8px; min-width:210px; }
  .ch-vbtn{ all:unset; flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; color:#FFFFFF; background:#00A884; cursor:pointer; box-shadow:0 0 0 4px rgba(0,168,132,.18); animation:chPulse 1.2s ease-in-out infinite; }
  .ch-voice.playing .ch-vbtn, .ch-voice.done .ch-vbtn{ animation:none; }
  @keyframes chPulse{ 50%{ box-shadow:0 0 0 9px rgba(0,168,132,.05); } }
  .ch-wave{ position:relative; flex:1; display:flex; align-items:center; gap:2px; height:28px; }
  .ch-wave i{ flex:1; border-radius:2px; background:#B7C4CB; }
  .ch-wave i.on{ background:#00A884; }
  .ch-voice small{ font-size:.66rem; color:#667781; direction:ltr; }
  .ch-vav{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; overflow:hidden; background:#FFF3E6; }
  .ch-vav svg{ display:block; width:100%; height:100%; }
  .ch-choices{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:0 10px 8px; background:#ECE5DD; }
  .ch-choices:empty{ display:none; }
  .ch-c{ all:unset; box-sizing:border-box; padding:8px 14px; border-radius:18px; font-size:.9rem; font-weight:700; color:#075E54; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.14), inset 0 0 0 1.5px #25D366; cursor:pointer; animation:chIn .3s ease both; -webkit-tap-highlight-color:transparent; }
  .ch-c:active{ transform:scale(.95); }
  .ch-c.hint{ color:#8696A0; box-shadow:none; background:transparent; cursor:default; font-weight:500; font-size:.8rem; }
  .ch-input{ display:flex; align-items:center; gap:8px; margin:0 8px 8px; padding:10px 14px; border-radius:24px; color:#8696A0; background:#FFFFFF; font-size:.88rem; }
  .ch-input span{ flex:1; text-align:right; } .ch-input i{ font-style:normal; }
  .ch-end{ align-self:center; margin-top:4px; padding:4px 12px; border-radius:8px; font-size:.72rem; color:#54656F; background:#FFF3C4; }
  #chAgain[hidden]{ display:none; }
  .sk-stage{ position:relative; width:100%; max-width:420px; aspect-ratio:10/13; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#FFE3EC,#FFD1DE 60%,#F8B6CB); box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.5); touch-action:manipulation; -webkit-user-select:none; user-select:none; cursor:pointer; }
  .sk-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .sk-hud{ position:absolute; left:50%; top:10px; z-index:2; transform:translateX(-50%); text-align:center; pointer-events:none; }
  .sk-hud b{ display:block; font-size:2.6rem; font-weight:800; line-height:1; color:#FFFFFF; text-shadow:0 3px 0 #E0457B, 0 6px 16px rgba(160,20,70,.45); }
  .sk-hud b.pop{ animation:ctPop .3s cubic-bezier(.3,1.6,.5,1); }
  .sk-hud small{ font-size:.72rem; font-weight:700; color:#8A1C3F; }
  .sk-say{ position:absolute; left:8px; bottom:8px; z-index:2; display:flex; align-items:center; gap:7px; max-width:78%; padding:6px 10px 6px 6px; border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 6px 16px rgba(160,20,70,.25); pointer-events:none; transition:transform .25s ease; }
  .sk-say.pop{ animation:pop .3s ease both; }
  .sk-say .av{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; overflow:hidden; background:#FFF3E6; box-shadow:0 0 0 2px #FFD58A; }
  .sk-say .av svg{ display:block; width:100%; height:100%; }
  .sk-say p{ margin:0; font-size:.8rem; font-weight:700; line-height:1.5; color:#5A1A30; text-align:right; }
  .sk-pop{ position:absolute; left:50%; top:22%; z-index:3; transform:translateX(-50%); white-space:nowrap; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.5rem; color:#FFFFFF; text-shadow:0 3px 0 #C9A45C, 0 6px 14px rgba(0,0,0,.35); opacity:0; pointer-events:none; }
  .sk-pop.on{ animation:skPop .9s ease-out forwards; }
  @keyframes skPop{ 0%{ opacity:0; transform:translateX(-50%) scale(.6); } 20%{ opacity:1; transform:translateX(-50%) scale(1.1); } 100%{ opacity:0; transform:translateX(-50%) translateY(-30px); } }
  .sk-over{ position:absolute; inset:0; z-index:4; width:78%; height:fit-content; margin:auto; padding:18px 14px; border-radius:18px; text-align:center; background:rgba(255,255,255,.95); box-shadow:0 18px 40px rgba(120,20,60,.45); animation:fsToastIn .5s cubic-bezier(.3,1.4,.5,1) both; }
  .sk-over[hidden]{ display:none; }
  .sk-over .n{ font-size:3rem; line-height:1; } .sk-over h4{ margin:6px 0 2px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.4rem; color:#8A1C3F; }
  .sk-over p{ margin:0; font-size:.88rem; color:#5A3A4A; } .sk-over .rec{ display:inline-block; margin-top:6px; padding:2px 10px; border-radius:999px; font-weight:700; font-size:.8rem; color:#3A2012; background:linear-gradient(135deg,#FFE7A8,#E9C46A); }
  .sk-over button{ display:block; margin:12px auto 0; }
  .rs-stage{ position:relative; width:100%; max-width:440px; height:250px; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#F6D9B4 0%,#EBC392 62%,#8A5A34 62%,#6B4226 100%); box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,213,138,.35); }
  .rs-stage::before{ content:""; position:absolute; left:0; right:0; top:0; height:62%; background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 22px, transparent 22px 44px); }
  .rs-hud{ position:absolute; left:8px; right:8px; top:8px; z-index:3; display:flex; justify-content:space-between; gap:6px; }
  .rs-hud span{ padding:3px 10px; border-radius:999px; font-weight:700; font-size:.8rem; color:#3A2012; background:rgba(255,255,255,.9); box-shadow:0 3px 8px rgba(0,0,0,.2); }
  .rs-hud b.low{ color:#C62828; }
  .rs-board{ position:absolute; right:10px; top:40px; z-index:1; padding:6px 10px; border-radius:6px; text-align:center; color:#FFF3D6; background:#2E3A2E; box-shadow:inset 0 0 0 3px #8A5A34, 0 4px 10px rgba(0,0,0,.3); }
  .rs-board b{ display:block; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.05rem; } .rs-board small{ font-size:.58rem; opacity:.85; }
  .rs-lamp{ position:absolute; top:0; width:26px; height:46px; z-index:1; }
  .rs-lamp::before{ content:""; position:absolute; left:12px; top:0; width:2px; height:26px; background:#3A2A1A; }
  .rs-lamp::after{ content:""; position:absolute; left:0; top:24px; width:26px; height:14px; border-radius:13px 13px 3px 3px; background:#3A2A1A; box-shadow:0 12px 30px 8px rgba(255,220,150,.55); }
  .rs-lamp.l1{ left:30%; } .rs-lamp.l2{ left:56%; }
  .rs-diyaa{ position:absolute; left:20%; bottom:30%; width:26%; z-index:1; }
  .rs-diyaa svg{ display:block; width:100%; height:auto; transform-origin:50% 100%; animation:ctBreath 3.4s ease-in-out infinite; }
  .rs-diyaa.eat svg{ animation:ctTalk .25s ease-in-out infinite alternate; }
  .rs-counter{ position:absolute; left:0; right:0; bottom:0; height:38%; z-index:2; background:linear-gradient(180deg,#B07442 0 10%,#8A5530 10%); box-shadow:0 -6px 14px rgba(0,0,0,.3); }
  .rs-plate{ position:absolute; left:22%; top:-14px; width:22%; height:24px; border-radius:50%; background:#FFFFFF; box-shadow:0 4px 8px rgba(0,0,0,.3), inset 0 -3px 0 #DDE3EA; display:grid; place-items:center; font-size:1.7rem; line-height:0; }
  .rs-plate.served{ animation:wdPop .5s cubic-bezier(.3,1.6,.5,1); }
  .rs-bubble{ position:absolute; left:47%; top:38px; z-index:3; width:44%; padding:8px 10px 10px; border-radius:14px 14px 14px 3px; text-align:center; background:#FFFFFF; box-shadow:0 8px 18px rgba(0,0,0,.28); animation:pop .3s ease both; }
  .rs-bubble b{ display:block; font-size:.9rem; color:#5A1A30; line-height:1.4; }
  .rs-need{ display:flex; justify-content:center; flex-wrap:wrap; gap:3px; margin:4px 0 6px; font-size:1.2rem; line-height:1.1; }
  .rs-need span{ position:relative; } .rs-need span i{ position:absolute; right:-6px; bottom:-4px; font-style:normal; font-size:.6rem; font-weight:800; color:#FFFFFF; background:#E0457B; border-radius:8px; padding:0 4px; }
  .rs-pat{ height:7px; border-radius:999px; overflow:hidden; background:#EEE3E6; }
  .rs-pat i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#34C759,#FFD54F 60%,#FF5252); transform-origin:right center; }
  .rs-say{ position:absolute; left:47%; bottom:40%; z-index:3; max-width:50%; margin:0; padding:5px 9px; border-radius:10px; font-size:.74rem; font-weight:700; color:#3A2012; background:#FFF8E7; box-shadow:0 4px 10px rgba(0,0,0,.2); opacity:0; transition:opacity .25s ease; }
  .rs-say.on{ opacity:1; }
  .rs-tray{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; width:100%; max-width:440px; min-height:48px; padding:8px; border-radius:14px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1.5px rgba(255,213,138,.3); }
  .rs-tray span{ font-size:1.5rem; animation:wdPop .3s cubic-bezier(.3,1.6,.5,1); }
  .rs-tray .rs-empty{ font-size:.8rem; color:rgba(255,227,236,.6); animation:none; }
  .rs-pad{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; max-width:440px; }
  .rs-ing{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 2px; border-radius:12px; text-align:center; font-size:1.45rem; line-height:1.15; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,213,138,.25); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .rs-ing small{ font-size:.62rem; font-weight:700; color:#FFE3EC; }
  .rs-ing:active{ transform:scale(.92); background:rgba(255,213,138,.25); }
  .rs-acts{ display:flex; gap:8px; justify-content:center; }
  .rs-pad.off, .rs-acts.off{ opacity:.4; pointer-events:none; }
  .rs-res{ position:relative; width:min(340px,94%); padding:18px 16px; border-radius:18px; text-align:center; color:#3A2A1A; background:#FFFDF6; box-shadow:0 22px 50px -16px rgba(0,0,0,.85), inset 0 0 0 2px #E0B45A; animation:fsToastIn .6s cubic-bezier(.3,1.4,.5,1) both; }
  .rs-res[hidden]{ display:none; }
  .rs-res h4{ margin:0 0 6px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.4rem; color:#8A1C3F; }
  .rs-res .st{ font-size:1.6rem; letter-spacing:2px; } .rs-res p{ margin:6px 0 0; font-size:.9rem; line-height:1.7; }
  .rs-res .rv{ margin-top:10px; padding:8px 10px; border-radius:10px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.02rem; color:#5A2A1A; background:#FFF3D6; }
  .rs-res button{ display:block; margin:12px auto 0; }
  .cm-stage{ position:relative; width:100%; max-width:440px; aspect-ratio:10/10; border-radius:22px; overflow:hidden; background:#F3C98B; box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,213,138,.4); touch-action:manipulation; -webkit-user-select:none; user-select:none; }
  .cm-sky{ position:absolute; left:0; right:0; top:0; height:42%; background:linear-gradient(180deg,#6EC6FF,#BDE6FF 70%,#FFE6B8); }
  .cm-sun{ position:absolute; right:14%; top:16%; width:42px; height:42px; border-radius:50%; background:#FFF3B0; box-shadow:0 0 30px 10px rgba(255,236,150,.8); }
  .cm-dunes{ position:absolute; left:0; width:200%; display:flex; animation:cmScroll 14s linear infinite; animation-play-state:paused; }
  .cm-dunes svg{ width:50%; height:100%; display:block; }
  .cm-dunes.far{ top:22%; height:22%; animation-duration:22s; } .cm-dunes.near{ top:30%; height:16%; }
  .cm-stage.running .cm-dunes, .cm-stage.running .cm-posts{ animation-play-state:running; }
  @keyframes cmScroll{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
  .cm-track{ position:absolute; left:0; right:0; top:44%; bottom:0; background:linear-gradient(180deg,#E9B97C,#D9A363); }
  .cm-lane{ height:33.33%; box-shadow:inset 0 -2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(150,90,40,.25); }
  .cm-posts{ position:absolute; left:0; top:-6px; width:200%; height:14px; background:repeating-linear-gradient(90deg, #FFFFFF 0 4px, transparent 4px 46px); animation:cmScroll 3s linear infinite; animation-play-state:paused; }
  .cm-finish{ position:absolute; left:7%; top:44%; bottom:0; width:10px; background:repeating-conic-gradient(#111 0 25%, #FFF 0 50%) 0 0/10px 10px; box-shadow:0 0 0 2px rgba(0,0,0,.2); }
  .cm-startl{ position:absolute; right:6%; top:44%; bottom:0; width:3px; background:#FFFFFF; opacity:.8; }
  .cm-camel{ position:absolute; left:74%; width:23%; z-index:2; transform:translateY(-100%); transition:left .12s linear; }
  #cmC1{ z-index:3; } #cmC2{ z-index:4; }
  .cm-camel svg{ display:block; width:100%; height:auto; overflow:visible; }
  .cm-camel .lg{ transform-box:fill-box; transform-origin:50% 0; }
  .cm-camel.run .lg1, .cm-camel.run .lg4{ animation:cmLeg .3s ease-in-out infinite alternate; }
  .cm-camel.run .lg2, .cm-camel.run .lg3{ animation:cmLeg .3s ease-in-out infinite alternate-reverse; }
  .cm-camel.run svg{ animation:cmBob .3s ease-in-out infinite alternate; }
  .cm-camel.fast .lg{ animation-duration:.18s !important; } .cm-camel.fast svg{ animation-duration:.18s; }
  @keyframes cmLeg{ from{ transform:rotate(-24deg); } to{ transform:rotate(24deg); } }
  @keyframes cmBob{ from{ transform:translateY(0) rotate(-1deg); } to{ transform:translateY(-4px) rotate(1deg); } }
  .cm-camel .eat{ position:absolute; left:-4%; top:6%; font-size:1.3rem; animation:ctTalk .3s ease-in-out infinite alternate; }
  .cm-cd{ position:absolute; left:50%; top:40%; z-index:5; transform:translate(-50%,-50%); font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:4rem; color:#FFFFFF; text-shadow:0 5px 0 #B8752E, 0 10px 24px rgba(0,0,0,.4); pointer-events:none; }
  .cm-cd.pop{ animation:ctPop .45s cubic-bezier(.3,1.6,.5,1); }
  .cm-pos{ position:absolute; left:8px; top:8px; z-index:5; padding:3px 10px; border-radius:999px; font-weight:700; font-size:.78rem; color:#3A2012; background:rgba(255,255,255,.9); }
  .cm-pos:empty{ display:none; }
  .cm-com{ position:relative; display:flex; align-items:center; gap:10px; width:100%; max-width:440px; padding:10px 12px; border-radius:16px; text-align:right; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,213,138,.3); }
  .cm-com i{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:1.2rem; background:linear-gradient(135deg,#B8752E,#7A4A20); box-shadow:0 0 0 2px #FFD58A; }
  .cm-com p{ margin:0; min-height:1.6em; font-size:.94rem; font-weight:700; line-height:1.6; color:#FFF3F6; }
  .cm-tap{ all:unset; box-sizing:border-box; width:100%; max-width:440px; padding:20px 12px; border-radius:22px; text-align:center; font-weight:800; font-size:1.3rem; color:#3A2012; background:linear-gradient(135deg,#FFE7A8,#F2B24B); box-shadow:0 10px 0 #B8752E, 0 16px 30px -10px rgba(0,0,0,.7); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .06s ease, box-shadow .06s ease; }
  .cm-tap:active{ transform:translateY(6px); box-shadow:0 4px 0 #B8752E, 0 8px 18px -10px rgba(0,0,0,.7); }
  .cm-tap:disabled{ opacity:.45; }
  .cm-res{ position:relative; width:min(340px,94%); padding:18px 16px; border-radius:18px; text-align:center; color:#3A2A1A; background:#FFF8EC; box-shadow:0 22px 50px -16px rgba(0,0,0,.85), inset 0 0 0 2px #E0B45A; animation:fsToastIn .6s cubic-bezier(.3,1.4,.5,1) both; }
  .cm-res[hidden]{ display:none; }
  .cm-res .cup{ font-size:3.2rem; line-height:1; animation:heartbeat 1.4s ease-in-out infinite; }
  .cm-res h4{ margin:6px 0 8px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.4rem; color:#8A1C3F; }
  .cm-res ol{ margin:0 auto 8px; padding:0; list-style:none; text-align:right; max-width:260px; }
  .cm-res li{ padding:5px 0; border-bottom:1px dashed #E3D2B4; font-size:.88rem; }
  .cm-res p{ margin:6px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.05rem; line-height:1.6; color:#5A2A1A; }
  .cm-res button{ display:block; margin:12px auto 0; }
  .hm-scene{ position:relative; width:100%; max-width:440px; aspect-ratio:10/11; border-radius:22px; overflow:hidden; box-shadow:0 22px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,213,138,.35); }
  .hm-svg{ display:block; width:100%; height:100%; }
  .hm-svg .hm-sky{ fill:#FFD9E4; transition:fill 1.4s ease; } .hm-scene.hm-night .hm-sky{ fill:#0E1238; }
  .hm-svg .hm-grass{ fill:#7FBF6A; transition:fill 1.4s ease; } .hm-scene.hm-night .hm-grass{ fill:#2E4A2A; }
  .hm-svg .hm-stars{ opacity:0; transition:opacity 1.4s ease; } .hm-scene.hm-night .hm-stars{ opacity:1; }
  .hm-svg .hm-moonbite{ fill:#0E1238; }
  .hm-svg .hm-hl{ fill:none; stroke:#FFD58A; stroke-width:4; filter:drop-shadow(0 0 6px rgba(255,213,138,.9)); transition:x .5s ease, y .5s ease; animation:hmHl 1.2s ease-in-out infinite alternate; }
  .hm-scene.hm-night .hm-hl, .hm-scene.idle .hm-hl{ display:none; }
  @keyframes hmHl{ from{ stroke-opacity:.35; } to{ stroke-opacity:1; } }
  .hm-svg .hm-glow{ opacity:0; transition:opacity 1.4s ease; } .hm-scene.hm-night .hm-glow{ opacity:1; }
  .hm-svg .hm-roomdark{ opacity:0; transition:opacity 1.4s ease; } .hm-scene.hm-night .hm-roomdark{ opacity:.28; }
  .hm-svg .pop{ animation:hmPop .5s cubic-bezier(.3,1.6,.5,1); transform-box:fill-box; transform-origin:50% 100%; }
  @keyframes hmPop{ from{ transform:scale(.6); opacity:.2; } to{ transform:none; opacity:1; } }
  .hm-svg .tw{ animation:wkTw 1.3s ease-in-out infinite alternate; }
  .hm-fx{ position:absolute; inset:0; pointer-events:none; }
  .hm-key{ position:absolute; left:50%; top:50%; font-size:4rem; transform:translate(-50%,-50%); filter:drop-shadow(0 6px 16px rgba(255,213,138,.8)); animation:hmKey 1.6s cubic-bezier(.3,1.3,.5,1) both; }
  @keyframes hmKey{ 0%{ transform:translate(-50%,-300%) rotate(-120deg) scale(.4); opacity:0; } 60%{ opacity:1; } 100%{ transform:translate(-50%,-50%) rotate(0) scale(1); opacity:1; } }
  .hm-card .wd-det{ grid-template-columns:auto 1fr; }
  .gi-ov{ position:fixed; inset:0; z-index:2147482400; display:grid; place-items:center; padding:18px; background:rgba(12,4,10,.72); opacity:0; transition:opacity .25s ease; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .gi-ov[hidden]{ display:none; }
  .gi-ov.on{ opacity:1; }
  .gi-card{ position:relative; width:min(360px,92vw); max-height:86vh; overflow-y:auto; padding:22px 18px 18px; border-radius:24px; text-align:center; color:#FFF3F6; background:linear-gradient(180deg,#3A1426,#1E0A14); box-shadow:0 26px 60px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,213,138,.55); transform:translateY(24px) scale(.94); transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
  .gi-ov.on .gi-card{ transform:none; }
  .gi-badge{ display:inline-block; padding:3px 12px; border-radius:999px; font-size:.78rem; font-weight:800; color:#1A0A10; background:linear-gradient(135deg,#FFE7A8,#FF9DBB); }
  .gi-badge.upd{ background:linear-gradient(135deg,#B9F0A8,#FFE7A8); } .gi-badge.how{ background:#FFFFFF; }
  .gi-ic{ margin:10px 0 2px; font-size:3.2rem; line-height:1; animation:gamePop .9s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes gamePop{ from{ transform:scale(.3) rotate(-20deg); opacity:0; } to{ transform:none; opacity:1; } }
  .gi-t{ margin:4px 0 4px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.7rem; color:#FFE7A8; }
  .gi-story{ margin:0 0 12px; font-size:.92rem; line-height:1.7; color:rgba(255,227,236,.85); }
  .gi-h{ margin:0 0 6px; text-align:right; font-weight:800; font-size:.86rem; color:#FF9DBB; }
  .gi-list{ margin:0 0 12px; padding:0; list-style:none; counter-reset:gi; text-align:right; }
  .gi-list li{ position:relative; margin:0 0 7px; padding:9px 40px 9px 10px; border-radius:12px; font-size:.9rem; line-height:1.6; background:rgba(255,255,255,.07); counter-increment:gi; animation:pop .35s ease both; }
  .gi-list li:nth-child(2){ animation-delay:.08s; } .gi-list li:nth-child(3){ animation-delay:.16s; } .gi-list li:nth-child(4){ animation-delay:.24s; }
  .gi-list li::before{ content:counter(gi, arabic-indic); position:absolute; right:10px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:800; color:#1A0A10; background:#FFD58A; }
  .gi-say{ display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:8px 10px; border-radius:14px; text-align:right; background:rgba(255,213,138,.1); box-shadow:inset 0 0 0 1px rgba(255,213,138,.25); }
  .gi-say .av{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; overflow:hidden; background:#FFF3E6; box-shadow:0 0 0 2px #FFD58A; }
  .gi-say .av svg{ display:block; width:100%; height:100%; }
  .gi-say p{ margin:0; font-size:.86rem; font-weight:700; line-height:1.5; color:#FFE7A8; }
  .gi-help{ all:unset; box-sizing:border-box; position:absolute; z-index:3; top:calc(env(safe-area-inset-top,0px) + 14px); left:66px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.15rem; color:#FFD9E4; background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,200,220,.25); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ct-tick{ position:absolute; left:0; right:0; top:0; z-index:9; height:22px; overflow:hidden; background:linear-gradient(90deg,#B71C1C,#7F1128); box-shadow:0 2px 8px rgba(0,0,0,.4); opacity:0; transition:opacity .4s ease; pointer-events:none; }
  .ct-tick.on{ opacity:1; }
  .ct-tick span{ position:absolute; top:3px; right:0; white-space:pre; font-size:.66rem; font-weight:700; color:#FFFFFF; animation:ctTick 26s linear infinite; }
  @keyframes ctTick{ from{ transform:translateX(0); } to{ transform:translateX(25%); } }
  .ct-l3{ position:absolute; right:0; bottom:10%; z-index:9; display:flex; align-items:stretch; max-width:84%; transform:translateX(110%); transition:transform .5s cubic-bezier(.2,.8,.2,1); pointer-events:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
  .ct-l3.on{ transform:none; }
  .ct-l3 b{ display:grid; place-items:center; padding:6px 10px; font-size:.72rem; color:#FFFFFF; background:#C62828; white-space:nowrap; }
  .ct-l3 span{ padding:6px 12px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1rem; font-weight:700; color:#1A0A10; background:linear-gradient(90deg,#FFFFFF,#FFE7A8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ct-react{ position:absolute; inset:0; z-index:10; pointer-events:none; overflow:hidden; }
  .ct-react span{ position:absolute; bottom:4%; animation:ctRise 2.2s ease-out forwards; }
  @keyframes ctRise{ 0%{ transform:translate(0,0) scale(.6); opacity:0; } 15%{ opacity:1; transform:translate(0,-20px) scale(1.1); } 100%{ transform:translate(var(--dx),-300px) scale(.9); opacity:0; } }
  .ct-wave{ position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,231,168,.95), 0 0 18px 4px rgba(255,213,138,.6); animation:ctShock .6s ease-out forwards; }
  @keyframes ctShock{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(9); opacity:0; } }
  .ct-cam.punch{ animation:ctPunch .35s ease; }
  @keyframes ctPunch{ 0%{ scale:1; } 35%{ scale:1.04; } 100%{ scale:1; } }
  .ev-calls{ border-radius:10px; overflow:hidden; background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
  .ev-call{ display:flex; align-items:center; gap:8px; margin:0; padding:5px 10px; border-bottom:1px solid #EEF1F4; font-size:.74rem; color:#D32F2F; }
  .ev-call i{ font-style:normal; } .ev-call span{ flex:1; font-weight:700; } .ev-call em{ font-style:normal; font-size:.64rem; color:#8696A0; direction:ltr; }
  .ev-more{ margin:0; padding:4px 10px 6px; font-size:.66rem; color:#8696A0; text-align:center; }
  html.no-song #musicBtn{ display:none !important; }
  /* ---- إحساس أشعر به الآن ---- */
  .fl-ov{ position:fixed; inset:0; z-index:2147482800; display:grid; place-items:center; padding:14px; overflow:hidden; background:radial-gradient(120% 90% at 50% 20%, rgba(74,20,48,.94), rgba(16,5,12,.97)); opacity:0; transition:opacity .6s ease; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .fl-ov.on{ opacity:1; }
  .fl-bk{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.45; pointer-events:none; animation:flFloat 14s ease-in-out infinite alternate; }
  .fl-bk.b1{ width:260px; height:260px; background:#E0457B; top:-60px; right:-70px; }
  .fl-bk.b2{ width:220px; height:220px; background:#FFB36B; bottom:-50px; left:-60px; animation-delay:-5s; opacity:.3; }
  .fl-bk.b3{ width:180px; height:180px; background:#9D6BFF; top:45%; left:55%; animation-delay:-9s; opacity:.22; }
  @keyframes flFloat{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-30px,40px) scale(1.15); } }
  .fl-card{ position:relative; width:min(100%, 420px); max-height:calc(100dvh - 28px); overflow:hidden; border-radius:26px; padding:14px; background:linear-gradient(170deg, rgba(58,20,40,.96), rgba(28,9,20,.97)); box-shadow:0 30px 70px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,213,138,.28); transform:translateY(18px) scale(.97); transition:transform .7s cubic-bezier(.2,.9,.25,1); }
  .fl-ov.on .fl-card{ transform:none; }
  .fl-cover{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px 12px 26px; text-align:center; }
  .fl-from{ font-size:.78rem; font-weight:600; letter-spacing:.02em; color:rgba(255,215,228,.75); padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.07); }
  .fl-title{ margin:4px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:clamp(1.7rem, 8.4vw, 2.2rem); line-height:1.45; font-weight:700; background:linear-gradient(120deg,#FFE7A8,#FFB3CB 55%,#FFE7A8); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 30px rgba(255,157,187,.25); }
  .fl-sub{ margin:0; font-size:.92rem; line-height:1.8; color:rgba(255,226,236,.8); }
  .fl-go{ all:unset; box-sizing:border-box; cursor:pointer; margin-top:6px; padding:12px 30px; border-radius:99px; font-weight:700; font-size:1rem; color:#3A0A1C; background:linear-gradient(120deg,#FFD58A,#FF9DBB); box-shadow:0 12px 26px -10px rgba(255,120,160,.8); -webkit-tap-highlight-color:transparent; animation:flPulse 2.2s ease-in-out infinite; }
  .fl-go:active{ transform:scale(.96); }
  @keyframes flPulse{ 0%,100%{ box-shadow:0 12px 26px -10px rgba(255,120,160,.8), 0 0 0 0 rgba(255,157,187,.45); } 50%{ box-shadow:0 12px 26px -10px rgba(255,120,160,.8), 0 0 0 12px rgba(255,157,187,0); } }
  .fl-show{ display:flex; flex-direction:column; gap:9px; }
  .fl-head{ display:flex; align-items:center; gap:8px; }
  .fl-htitle{ flex:1; min-width:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.08rem; font-weight:700; color:#FFE3EC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fl-x{ all:unset; cursor:pointer; flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-size:.85rem; color:#FFE3EC; background:rgba(255,255,255,.1); -webkit-tap-highlight-color:transparent; }
  .fl-bars{ display:flex; gap:4px; direction:rtl; }
  .fl-bars i{ flex:1; height:3px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.2); }
  .fl-bars i b{ display:block; height:100%; width:0; background:linear-gradient(90deg,#FFD58A,#FF9DBB); margin-inline-start:0; }
  .fl-bars i.done b{ width:100%; }
  .fl-bars i.now b{ animation:flBar 2.7s linear forwards; }
  .fl-bars.paused i.now b{ animation-play-state:paused; }
  @keyframes flBar{ from{ width:0; } to{ width:100%; } }
  .fl-stage{ position:relative; width:min(100%, calc((100dvh - 230px) * .75)); aspect-ratio:3/4; margin:0 auto; border-radius:18px; overflow:hidden; background:#CFC8BC; box-shadow:0 18px 40px -16px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12); touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:pointer; }
  .fl-stage::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(30,10,20,.35)); }
  .fl-slide{ position:absolute; inset:0; transition:transform .85s cubic-bezier(.22,.8,.2,1), opacity .85s ease; will-change:transform; }
  .fl-slide img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; pointer-events:none; }
  .fl-slide.from-l{ transform:translateX(-100%); }
  .fl-slide.from-r{ transform:translateX(100%); }
  .fl-slide.cur{ transform:none; }
  .fl-slide.cur img{ animation:flKen 5s ease-out forwards; }
  .fl-stage.paused .fl-slide.cur img{ animation-play-state:paused; }
  .fl-slide.out-r{ transform:translateX(38%); opacity:0; }
  .fl-slide.out-l{ transform:translateX(-38%); opacity:0; }
  @keyframes flKen{ from{ transform:scale(1.0); } to{ transform:scale(1.07); } }
  .fl-cap{ margin:2px 0 0; min-height:3.3em; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.18rem; line-height:1.65; color:rgba(255,226,236,.72); }
  .fl-cap em{ font-style:normal; color:#FFE7A8; text-shadow:0 0 16px rgba(255,213,138,.45); display:inline-block; animation:flWord .8s ease both; }
  @keyframes flWord{ from{ opacity:0; transform:translateY(6px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
  .fl-tip{ margin:-4px 0 2px; text-align:center; font-size:.66rem; color:rgba(255,220,230,.45); }
  .fl-end{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 12px 24px; text-align:center; }
  .fl-end.on > *:not(.fl-hearts){ animation:flWord .9s ease both; }
  .fl-end.on .fl-q{ animation-delay:.25s; } .fl-end.on .fl-a{ animation-delay:.7s; } .fl-end.on .fl-sign{ animation-delay:1.2s; } .fl-end.on .fl-btns{ animation-delay:1.7s; }
  .fl-endic{ font-size:2.6rem; animation:flBeat 1.6s ease-in-out infinite !important; }
  @keyframes flBeat{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.18); } 30%{ transform:scale(1); } 45%{ transform:scale(1.12); } }
  .fl-q{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.45rem; line-height:1.6; color:#FFE7A8; }
  .fl-a{ margin:0; font-size:.98rem; line-height:1.95; color:#FFE3EC; }
  .fl-sign{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.1rem; color:#FF9DBB; }
  .fl-btns{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:4px; }
  .fl-again{ all:unset; cursor:pointer; padding:10px 18px; border-radius:99px; font-size:.86rem; font-weight:600; color:#FFE3EC; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,213,138,.3); -webkit-tap-highlight-color:transparent; }
  .fl-hearts{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.55; }
  .fl-end > :not(.fl-hearts){ position:relative; z-index:1; }
  .fl-hearts span{ position:absolute; bottom:-30px; animation:flUp linear forwards; opacity:0; }
  @keyframes flUp{ 0%{ transform:translate(0,0) rotate(0); opacity:0; } 12%{ opacity:.9; } 100%{ transform:translate(var(--dx),-460px) rotate(var(--r)); opacity:0; } }
  /* ---- ألعاب ٢٠٢٦: سيف الحلا • جواهر بيشو • عزف القلب ---- */
  .g3-stage{ position:relative; width:100%; max-width:440px; aspect-ratio:3/4; max-height:calc(100dvh - 230px); min-height:360px; margin:6px auto 0; border-radius:24px; overflow:hidden; background:#12060F; box-shadow:0 26px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(255,213,138,.22), inset 0 0 0 1px rgba(255,255,255,.06); touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; isolation:isolate; }
  .g3-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
  .jw-stage{ aspect-ratio:3/4.15; }
  .pn-stage{ aspect-ratio:3/4.4; }
  .g3-hud{ position:absolute; left:12px; right:12px; top:10px; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; pointer-events:none; }
  .pn-hud{ justify-content:center; }
  .g3-score{ text-align:right; }
  .pn-hud .g3-score{ text-align:center; }
  .g3-score b{ display:block; font-size:2.3rem; font-weight:800; line-height:1.05; color:#FFFFFF; text-shadow:0 0 18px rgba(255,120,170,.75), 0 3px 0 rgba(160,20,70,.6); }
  .g3-score b.pop{ animation:g3Pop .3s cubic-bezier(.3,1.7,.5,1); }
  .g3-score small{ font-size:.7rem; font-weight:700; color:rgba(255,226,236,.72); }
  .sl-lives{ display:flex; gap:6px; margin-top:6px; }
  .sl-lives i{ width:22px; height:20px; background:rgba(255,255,255,.18); clip-path:path('M11 19.5C11 19.5 1 13.2 1 6.6C1 3.3 3.6 1 6.5 1C8.4 1 10 2.1 11 3.6C12 2.1 13.6 1 15.5 1C18.4 1 21 3.3 21 6.6C21 13.2 11 19.5 11 19.5Z'); transition:background .3s ease, transform .3s ease; }
  .sl-lives i.on{ background:linear-gradient(180deg,#FFB3CB,#E0457B); }
  .sl-lives.hit{ animation:g3Shake .45s ease; }
  .g3-say{ position:absolute; left:8px; bottom:8px; z-index:2; display:flex; align-items:center; gap:7px; max-width:80%; padding:6px 10px 6px 6px; border-radius:16px; background:rgba(22,6,18,.66); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,213,138,.24); pointer-events:none; }
  .g3-say.pop{ animation:pop .3s ease both; }
  .g3-say .av{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; overflow:hidden; background:#FFF3E6; box-shadow:0 0 0 2px #FFD58A; }
  .g3-say .av svg{ display:block; width:100%; height:100%; }
  .g3-say p{ margin:0; font-size:.78rem; font-weight:700; line-height:1.5; color:#FFE3EC; text-align:right; }
  .jw-stage .g3-say{ top:7px; bottom:auto; max-width:68%; }
  .pn-stage .g3-say{ top:66px; bottom:auto; left:0; right:0; margin:0 auto; width:fit-content; max-width:86%; }
  .g3-say p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .g3-say{ transition:opacity .5s ease, translate .5s ease; }
  .g3-say.fade{ opacity:0; translate:0 6px; }
  .g3-menu{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:20px; text-align:center; background:radial-gradient(100% 75% at 50% 45%, rgba(26,7,22,.62), rgba(10,3,9,.86)); }
  .g3-menu[hidden], .g3-over[hidden]{ display:none; }
  .g3-logo{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .g3-ic{ display:inline-block; font-size:3.7rem; line-height:1; filter:drop-shadow(0 10px 24px rgba(255,120,170,.65)); animation:g3Float 2.6s ease-in-out infinite; }
  .g3-logo b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:2.2rem; line-height:1.35; background:linear-gradient(110deg,#FFE7A8 20%,#FFFFFF 40%,#FFB3CB 60%,#FFE7A8 80%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:g3Shine 3.6s linear infinite; }
  .g3-logo small{ max-width:280px; font-size:.84rem; line-height:1.75; color:rgba(255,226,236,.85); }
  .g3-go{ all:unset; box-sizing:border-box; cursor:pointer; padding:13px 32px; border-radius:99px; font-weight:800; font-size:1.02rem; color:#3A0A1C; background:linear-gradient(120deg,#FFD58A,#FF9DBB); box-shadow:0 14px 30px -10px rgba(255,120,160,.9); -webkit-tap-highlight-color:transparent; animation:flPulse 2.2s ease-in-out infinite; }
  .g3-go:active{ transform:scale(.96); }
  .g3-over{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:16px; background:rgba(10,3,8,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:g3Fade .4s ease both; }
  .g3-ov-in{ width:min(90%, 320px); padding:22px 16px 18px; border-radius:22px; text-align:center; background:linear-gradient(170deg, rgba(64,20,46,.97), rgba(30,9,22,.98)); box-shadow:0 24px 60px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,213,138,.32); animation:g3In .55s cubic-bezier(.2,1.3,.4,1) both; }
  .g3-ov-ic{ display:block; font-size:3rem; line-height:1; margin-bottom:6px; animation:g3Float 2.4s ease-in-out infinite; }
  .g3-ov-in h4{ margin:0 0 8px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.55rem; line-height:1.4; color:#FFE7A8; }
  .g3-ov-sc{ margin:0; font-size:.95rem; color:#FFE3EC; }
  .g3-ov-sc b{ font-size:2.2rem; font-weight:800; color:#FFFFFF; text-shadow:0 0 16px rgba(255,120,170,.7); margin-inline-end:4px; }
  .g3-ov-kiss{ margin:10px 0 4px; font-size:.9rem; line-height:1.7; color:#FFD1DF; }
  .g3-ov-kiss b{ color:#FF9DBB; }
  .g3-ov-in small{ display:block; font-size:.74rem; color:rgba(255,220,230,.62); }
  .g3-ov-in .g3-go{ margin-top:14px; }
  @keyframes g3Pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
  @keyframes g3Shake{ 0%,100%{ transform:none; } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
  @keyframes g3Float{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-9px) rotate(3deg); } }
  @keyframes g3Shine{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }
  @keyframes g3Fade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes g3In{ from{ opacity:0; transform:translateY(26px) scale(.9); } to{ opacity:1; transform:none; } }
  .tp-list{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; width:100%; max-width:440px; }
  .tp-tile{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:5px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .tp-thumb{ position:relative; display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#1A0A10 center/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(255,213,138,.3), 0 10px 22px -12px rgba(0,0,0,.9); transition:transform .15s ease; }
  .tp-tile:active .tp-thumb{ transform:scale(.95); }
  .tp-pb{ position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:linear-gradient(135deg,#FF7AA2,#E0457B); box-shadow:0 0 0 3px rgba(255,255,255,.2), 0 6px 16px rgba(224,69,123,.7); }
  .tp-pb::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-36%,-50%); border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent #FFF; }
  .tp-dur{ position:absolute; left:6px; bottom:6px; padding:1px 6px; border-radius:6px; font-style:normal; font-size:.62rem; font-weight:700; color:#FFF; background:rgba(0,0,0,.6); direction:ltr; }
  .tp-tile.seen .tp-thumb::after{ content:"✓"; position:absolute; right:6px; top:6px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:.65rem; font-weight:700; color:#12391F; background:#9BE38A; }
  .tp-tile b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.74rem; font-weight:700; line-height:1.45; color:#FFE3EC; text-align:center; }
  .tp-lb{ position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; padding:16px; background:rgba(12,4,8,.92); opacity:0; transition:opacity .25s ease; }
  .tp-lb[hidden]{ display:none; }
  .tp-lb.on{ opacity:1; }
  .tp-lb-box{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:460px; text-align:center; }
  .tp-lb-v{ display:block; width:100%; max-height:68vh; border-radius:16px; background:#000; }
  .tp-lb-x{ all:unset; box-sizing:border-box; position:absolute; top:-50px; left:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#FFD9E4; background:rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(255,200,220,.3); }
  .tp-lb-x svg{ width:18px; height:18px; }
  .tp-lb-t{ margin-top:6px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.2rem; color:#FFE3EC; }
  .tp-lb-n{ font-size:.86rem; line-height:1.6; color:rgba(255,227,236,.8); }
  .tp-more{ position:relative; margin:4px 0 0; font-size:.85rem; color:rgba(255,220,230,.65); }
  .hs-menu[hidden]{ display:none; }
  .hs-menu-stats{ position:relative; margin:0; min-height:1.3em; font-weight:700; font-size:.88rem; color:#FFD58A; }
  .hs-menu-stats.done{ color:#FFE7A8; text-shadow:0 0 14px rgba(255,213,138,.8); animation:hsMenuTrophy 1.6s ease-in-out infinite alternate; }
  @keyframes hsMenuTrophy{ from{ opacity:.75; } to{ opacity:1; } }
  .hs-ch-card{ all:unset; box-sizing:border-box; position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:16px 10px 12px; border-radius:18px; cursor:pointer; text-align:center; background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1.5px rgba(255,157,187,.4), 0 12px 26px -14px rgba(0,0,0,.7); -webkit-tap-highlight-color:transparent; animation:barIn .5s ease both; }
  .hs-ch-card:nth-child(2){ animation-delay:.05s; } .hs-ch-card:nth-child(3){ animation-delay:.1s; } .hs-ch-card:nth-child(4){ animation-delay:.15s; } .hs-ch-card:nth-child(5){ animation-delay:.2s; }
  .hs-ch-card:active{ transform:scale(.96); }
  .hs-ch-card b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.08rem; color:#FFE3EC; }
  .hs-ch-card small{ font-size:.72rem; color:rgba(255,220,230,.65); line-height:1.4; }
  .hs-ch-n{ position:absolute; right:10px; top:8px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#2A0714; background:linear-gradient(120deg,#FFD58A,#FF9DBB); }
  .hs-ch-ic{ font-size:1.9rem; margin-bottom:2px; }
  .hs-ch-stars{ display:flex; gap:2px; min-height:14px; }
  .hs-ch-stars i{ width:12px; height:12px; background:#5A2A40; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
  .hs-ch-stars i.on{ background:linear-gradient(#FFF1C4,#D9A55B); }
  .hs-ch-card.locked{ opacity:.6; }
  .hs-ch-card.locked .hs-ch-ic{ filter:grayscale(1); }
  .hs-ch-card.soon{ opacity:.4; }
  .hs-ch-card.done::after{ content:"✓"; position:absolute; left:8px; top:8px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:.65rem; font-weight:700; color:#12391F; background:#9BE38A; }
  .hs-room[hidden]{ display:none; }
  .hs-statuswrap[hidden], .hs-ch2[hidden]{ display:none; }
  .hs-statuswrap, .hs-ch2{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
  .hs-dlg{ position:absolute; inset:0; z-index:9; display:flex; flex-direction:column; justify-content:flex-end; padding:8% 4% 6%; background:linear-gradient(to top, rgba(8,6,12,.92) 0%, rgba(8,6,12,.6) 48%, rgba(8,6,12,0) 100%); -webkit-tap-highlight-color:transparent; }
  .hs-dlg[hidden]{ display:none; }
  .hs-dlg-skip{ all:unset; position:absolute; left:3%; top:2%; padding:4px 10px; border-radius:999px; font-size:.68rem; font-weight:700; color:#FFE3EC; background:rgba(255,255,255,.14); cursor:pointer; }
  .hs-dlg-box{ display:flex; align-items:flex-end; gap:8px; transform:scale(.9); opacity:0; animation:hsDlgIn .3s cubic-bezier(.3,1.3,.5,1) forwards; }
  @keyframes hsDlgIn{ to{ transform:none; opacity:1; } }
  .hs-dlg-portrait{ flex:0 0 auto; width:19%; filter:drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
  .hs-dlg-portrait svg{ display:block; width:100%; height:auto; }
  .hs-dlg-portrait.radio{ display:grid; place-items:center; aspect-ratio:1; border-radius:50%; background:#2E3A48; font-size:1.6rem; box-shadow:inset 0 0 0 2px #4A5A6E; }
  .hs-dlg-text{ flex:1; padding:9px 13px 10px; border-radius:14px 14px 14px 3px; background:#FFFFFF; box-shadow:0 12px 26px -10px rgba(0,0,0,.6); }
  .hs-dlg-name{ display:block; margin-bottom:2px; font-size:.78rem; font-weight:700; color:#C2185B; }
  .hs-dlg-text p{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(.98rem, 4.1vw, 1.2rem); line-height:1.55; color:#2A1A20; }
  .hs-dlg-next{ position:relative; align-self:center; margin-top:10px; padding:8px 22px; font-size:.88rem; }
  .hs-tests{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:100%; max-width:440px; }
  .hs-readout{ position:relative; display:flex; flex-direction:column; gap:6px; width:100%; max-width:440px; min-height:1.6em; }
  .hs-readout p{ margin:0; padding:8px 12px; border-radius:12px; text-align:right; font-size:.86rem; line-height:1.6; color:#2A3A55; background:#FFFFFF; box-shadow:0 10px 22px -12px rgba(0,0,0,.6); animation:fsToastIn .4s cubic-bezier(.3,1.4,.5,1) both; }
  .hs-readout p b{ color:#C2185B; }
  .hs-diag{ position:relative; display:flex; flex-direction:column; gap:8px; width:100%; max-width:400px; }
  .hs-diag[hidden]{ display:none; }
  .hs-diag-opt{ all:unset; box-sizing:border-box; padding:11px 16px; border-radius:16px; cursor:pointer; text-align:center; font-weight:700; font-size:.98rem; color:#FFFFFF; background:linear-gradient(120deg,#FF7AA2,#C2185B); box-shadow:0 10px 24px -10px rgba(255,90,140,.8); -webkit-tap-highlight-color:transparent; }
  .hs-diag-opt:active{ transform:scale(.97); }
  .hs-diag-opt.wrong{ animation:hgShake .1s linear 5; }
  .hs-diag-opt.hint{ animation:hsHint .6s ease-in-out infinite alternate; }
  .hs-outro-tease{ margin:6px 0 0; font-size:.82rem; color:rgba(90,42,18,.85); text-align:center; }
  .hs-room.shake-lite{ animation:hgShake .08s linear 3; }

  .hs-ch3[hidden], .hs-ch4[hidden], .hs-ch5[hidden]{ display:none; }
  .hs-ch3, .hs-ch4, .hs-ch5{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
  .hs-op-wrap{ position:relative; width:100%; max-width:420px; }
  .hs-op-heart{ display:block; width:100%; height:auto; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
  .op-spot{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .op-spot circle.ring{ transform-box:fill-box; transform-origin:50% 50%; }
  .op-spot .glow{ fill:url(#opGlow); }
  .op-spot.gone{ pointer-events:none; }
  .hs-op-fx{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
  .op-float{ position:absolute; margin:0; transform:translate(-50%,-50%); font-weight:700; font-size:1rem; color:#FFD58A; text-shadow:0 2px 6px rgba(0,0,0,.7); animation:plFloat 1s ease-out forwards; white-space:nowrap; }
  .hs-op-hint{ position:relative; margin:0; min-height:1.4em; font-size:.88rem; color:rgba(255,220,230,.75); }
  .hs-op-chips{ position:relative; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; min-height:30px; }
  .hs-op-chips span{ padding:4px 11px; border-radius:999px; font-size:.82rem; font-weight:700; color:rgba(255,227,236,.4); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,157,187,.25); }
  .hs-op-chips span.ok{ color:#12391F; background:linear-gradient(120deg,#9BE38A,#CFF5C0); box-shadow:none; animation:mgNew .3s ease both; }
  .op-stitches path{ stroke-dasharray:6 6; stroke:#7A2A1E; stroke-width:2.4; fill:none; stroke-linecap:round; opacity:0; transition:opacity .25s ease; }
  .op-stitches path.on{ opacity:1; }
  .hs-op-shock{ position:absolute; inset:0; background:radial-gradient(circle at 50% 55%, rgba(158,216,255,.55), transparent 60%); opacity:0; pointer-events:none; }
  .hs-op-shock.on{ animation:hsShockFlash .5s ease; }
  @keyframes hsShockFlash{ 0%{ opacity:0; } 25%{ opacity:1; } 100%{ opacity:0; } }
  .hs-night-tools{ position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; width:100%; max-width:440px; }
  .hs-night-tools .hs-tool small{ font-size:.6rem; }
  .hs-n-event{ position:relative; width:100%; max-width:420px; min-height:52px; padding:10px 14px; border-radius:16px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.05rem; color:#FFE3EC; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,157,187,.35); opacity:0; transform:scale(.9); transition:opacity .25s ease, transform .25s ease; }
  .hs-n-event.on{ opacity:1; transform:none; }
  .hs-n-event.urgent{ box-shadow:inset 0 0 0 2px #FF5C5C, 0 0 20px rgba(255,92,92,.6); animation:hsAlarm .5s ease-in-out infinite alternate; }
  .hs-n-timer{ position:relative; width:100%; max-width:420px; height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
  .hs-n-timer i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#FFD58A,#FF7AA2); transform-origin:right center; }
  .hs-contract{ position:relative; width:100%; max-width:400px; padding:18px 20px 16px; border-radius:8px; text-align:right; color:#3A2A1A; font-size:.88rem; line-height:1.9; background:#FFFDF6; box-shadow:0 20px 44px -16px rgba(0,0,0,.8); }
  .hs-contract[hidden]{ display:none; }
  .hs-contract h4{ margin:0 0 4px; text-align:center; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.4rem; color:#8A1C3F; }
  .hs-contract .sub{ display:block; margin:0 0 10px; text-align:center; font-size:.78rem; color:#8A6A4A; }
  .hs-contract ol{ margin:0 0 10px; padding-inline-start:18px; }
  .hs-contract li{ margin-bottom:6px; opacity:0; animation:fsToastIn .5s ease both; }
  .hs-contract .sign-line{ margin-top:10px; padding-top:10px; border-top:1.5px dashed #C9B89A; display:flex; justify-content:space-between; align-items:flex-end; font-size:.8rem; color:#8A6A4A; }
  .hs-contract .sign-line svg{ width:90px; height:34px; }
  .hs-contract .sign-line path{ stroke:#2A0714; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:220; stroke-dashoffset:220; }
  .hs-contract.signed .sign-line path{ animation:hsSign 1s cubic-bezier(.3,.7,.4,1) forwards; }
  @keyframes hsSign{ to{ stroke-dashoffset:0; } }
  .hs-stampheart{ position:absolute; right:24px; bottom:52px; width:50px; height:50px; opacity:0; transform:scale(2) rotate(-20deg); }
  .hs-contract.signed .hs-stampheart{ animation:hsStamp .5s cubic-bezier(.3,1.4,.5,1) .6s forwards; }
  @keyframes hsStamp{ to{ opacity:.9; transform:scale(1) rotate(-16deg); } }
  #hsSignBtn[hidden]{ display:none; }
  .hs-credits{ position:relative; width:100%; max-width:380px; min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; }
  .hs-credits[hidden]{ display:none; }
  .hs-credits p{ margin:0; opacity:0; transform:translateY(14px); animation:hsCredit .7s ease forwards; }
  .hs-credits .role{ font-size:.72rem; letter-spacing:.08em; color:rgba(255,220,230,.6); }
  .hs-credits .name{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.35rem; color:#FFE3EC; text-shadow:0 0 14px rgba(255,90,140,.7); margin-bottom:10px; }
  .hs-credits .trophy-line{ margin-top:8px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.15rem; color:#FFE7A8; text-shadow:0 0 16px rgba(255,213,138,.8); }
  @keyframes hsCredit{ to{ opacity:1; transform:none; } }


  .rosepg{ background:radial-gradient(60% 40% at 50% 34%, rgba(255,90,140,.2), transparent 70%), radial-gradient(80% 60% at 50% 40%, #3A0F2E, #160616 60%, #080309); }
  .rs-stage{ position:relative; display:flex; justify-content:center; width:100%; max-width:360px; }
  .rs-svg{ display:block; height:min(42vh, 360px); width:calc(min(42vh, 360px) * 2 / 3); overflow:visible; touch-action:manipulation; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .rs-stem{ transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
  .rs-glow{ opacity:0; transition:opacity 1.4s ease; }
  .rs-svg.st4 .rs-glow{ opacity:1; }
  .rs-svg.gold .rs-glow{ animation:rsGlow 1.4s ease-in-out infinite alternate; }
  @keyframes rsGlow{ from{ opacity:.6; } to{ opacity:1; } }
  .rs-leaf, .rs-svg .rp, .rs-core{ transform-box:fill-box; }
  .rs-leaf{ transform-origin:100% 100%; transform:scale(0); transition:transform .9s cubic-bezier(.3,1.5,.5,1); }
  .rs-leaf.b{ transform-origin:0 100%; transition-delay:.25s; }
  .rs-svg.st2 .rs-leaf.a, .rs-svg.st3 .rs-leaf, .rs-svg.st4 .rs-leaf{ transform:none; }
  .rs-seed{ opacity:0; transform:translateY(-230px); }
  .rs-svg.st1 .rs-seed{ opacity:1; transform:none; transition:transform .75s cubic-bezier(.55,0,.9,.5), opacity .2s ease; }
  .rs-svg .rp{ transform-origin:50% 100%; transform:scale(0); opacity:0; transition:transform 1s cubic-bezier(.3,1.35,.5,1), opacity .5s ease; }
  .rs-svg .rp.o{ stroke:#FFC2D4; stroke-opacity:.35; stroke-width:1; }
  .rs-svg .rp.m{ stroke:#FF9DBB; stroke-opacity:.25; stroke-width:1; }
  .rs-svg.st3 .rp.i, .rs-svg.st4 .rp.i{ transform:none; opacity:1; }
  .rs-svg.st3 .rp.m{ transform:scale(.4); opacity:1; }
  .rs-svg.st4 .rp.m, .rs-svg.st4 .rp.o{ transform:none; opacity:1; }
  .rs-svg .rp.o.kissed{ fill:url(#rsPG); animation:rsPetal .55s ease; }
  @keyframes rsPetal{ 0%{ transform:none; } 40%{ transform:scale(1.14); } 100%{ transform:none; } }
  .rs-core{ transform-origin:50% 50%; transform:scale(0); transition:transform .8s cubic-bezier(.3,1.5,.5,1); }
  .rs-svg.st3 .rs-core, .rs-svg.st4 .rs-core{ transform:none; }
  .rs-svg.ready .rs-core{ animation:rsCore .8s ease-in-out infinite alternate; }
  @keyframes rsCore{ from{ transform:none; } to{ transform:scale(1.3); } }
  .rs-kisses{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:3; }
  .rs-kiss{ position:absolute; width:60px; height:36px; margin:-18px 0 0 -30px; filter:drop-shadow(0 0 10px rgba(255,90,140,.9)); animation:rsKiss 1.6s cubic-bezier(.2,.7,.3,1) forwards; }
  .rs-kiss svg{ width:100%; height:100%; display:block; }
  @keyframes rsKiss{ 0%{ transform:scale(.2) rotate(-12deg); opacity:0; } 20%{ transform:scale(1.25) rotate(6deg); opacity:1; } 45%{ transform:translateY(-22px) scale(1); opacity:1; } 100%{ transform:translateY(-120px) scale(.8) rotate(-6deg); opacity:0; } }
  .rs-drop{ position:absolute; width:7px; height:11px; margin-left:-3.5px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:linear-gradient(#E4F4FF,#7FC4FF); box-shadow:0 0 8px rgba(150,210,255,.8); opacity:0; animation:rsDrop .85s cubic-bezier(.5,0,.9,.6) forwards; }
  @keyframes rsDrop{ 0%{ transform:translateY(0); opacity:0; } 15%,85%{ opacity:1; } 100%{ transform:translateY(var(--dy)); opacity:0; } }
  .rs-count{ position:relative; margin:0; min-height:1.5em; font-weight:700; font-size:1.02rem; color:#FFD58A; }
  .rs-actions{ position:relative; display:flex; justify-content:center; min-height:48px; }
  .rs-actions button[hidden]{ display:none; }
  .rs-big{ position:fixed; left:50%; top:44%; z-index:6; width:min(72vw, 340px); aspect-ratio:200/120; transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none; filter:drop-shadow(0 0 30px rgba(255,90,140,.9)); }
  .rs-big svg{ width:100%; height:100%; display:block; }
  .rs-big.on{ animation:rsBig 2.6s cubic-bezier(.3,1.2,.5,1) forwards; }
  @keyframes rsBig{ 0%{ transform:translate(-50%,-50%) scale(.2); opacity:0; } 22%{ transform:translate(-50%,-50%) scale(1.12); opacity:1; } 36%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 72%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1.35); opacity:0; } }
  .photo-title{ margin:0 0 6px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.7rem; color:var(--accent); }
  .photo-sub{ margin:0 0 10px; font-size:.95rem; color:var(--ink); }
  .photo-note{ margin:0 0 16px; font-size:.75rem; color:var(--ink-soft); line-height:1.5; }

  @keyframes lpRing{ 0%{ transform:scale(.75); opacity:.7; } 100%{ transform:scale(1.55); opacity:0; } }
  @keyframes lpBreak{ 0%{ transform:scale(1); } 35%{ transform:scale(1.3); } 100%{ transform:scale(0) rotate(25deg); opacity:0; } }
  @keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-2px) rotate(-.5deg); } 75%{ transform:translateX(2px) rotate(.5deg); } }

  @keyframes driftA{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(18vmax,14vmax) scale(1.15); } }
  @keyframes driftB{ 0%{ transform:translate(0,0) scale(1.1); } 100%{ transform:translate(-16vmax,-12vmax) scale(.95); } }
  @keyframes rays{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  @keyframes flash{ 0%{ opacity:0; } 12%{ opacity:.6; } 100%{ opacity:0; } }
  @keyframes introIn{ from{ opacity:0; transform:scale(1.3); filter:blur(14px); } to{ opacity:1; transform:none; filter:blur(0); } }
  @keyframes dropin{
    0%{ opacity:0; transform:translateY(-70vh) rotate(-25deg) scale(.6); }
    55%{ opacity:1; transform:translateY(14px) rotate(4deg) scale(1.04); }
    75%{ transform:translateY(-8px) rotate(-2deg) scale(1); }
    100%{ opacity:1; transform:none; }
  }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  @keyframes glow{ 0%,100%{ opacity:.55; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.06); } }
  @keyframes flare{ 0%{ opacity:.8; transform:scale(1); } 35%{ opacity:1; transform:scale(1.5); } 100%{ opacity:0; transform:scale(1.8); } }
  @keyframes heartbeat{ 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.13); } 28%{ transform:scale(1); } 42%{ transform:scale(1.08); } 70%{ transform:scale(1); } }
  @keyframes halfL{ 0%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translate(-70px,60px) rotate(-60deg); } }
  @keyframes halfR{ 0%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translate(70px,60px) rotate(60deg); } }
  @keyframes ripple{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(6); } }
  @keyframes halo{ 0%{ opacity:.9; transform:scale(.9); } 100%{ opacity:0; transform:scale(1.5); } }
  @keyframes breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
  @keyframes ink{ from{ opacity:0; transform:translateY(16px); filter:blur(8px); } to{ opacity:1; transform:none; filter:blur(0); } }
  @keyframes word{ 0%{ opacity:0; transform:translateY(12px) scale(.6); filter:blur(6px); } 60%{ opacity:1; transform:scale(1.15); filter:blur(0); } 100%{ opacity:1; transform:none; filter:blur(0); } }
  @keyframes shimmer{ from{ background-position:100% 50%; } to{ background-position:0% 50%; } }
  @keyframes spin{ to{ --ang:360deg; } }
  @keyframes press{ 0%{ transform:scale(1); } 40%{ transform:scale(.8); } 100%{ transform:scale(1); } }
  @keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.95); } to{ opacity:1; transform:none; } }
  @keyframes sway{ 0%,100%{ transform:rotate(-10deg); } 50%{ transform:rotate(10deg); } }
  @keyframes glowPulse{ 0%,100%{ box-shadow:0 10px 26px -12px var(--accent); } 50%{ box-shadow:0 10px 40px -4px var(--accent); } }
  @keyframes sweep{ 0%{ left:-50%; } 60%,100%{ left:130%; } }

  @media (max-width:420px){
    .letter-card{ padding:48px 22px 34px; }
    .title{ font-size:2.2rem; }
    .emphasis{ font-size:1.35rem; }
  }

  .motion-btn{ all:unset; box-sizing:border-box; position:fixed; z-index:45; left:50%; top:calc(env(safe-area-inset-top,0px) + 16px); transform:translateX(-50%); max-width:calc(100vw - 32px); padding:11px 20px; border-radius:999px; cursor:pointer; text-align:center; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:700; font-size:.92rem; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); box-shadow:0 10px 26px -10px rgba(255,90,140,.9); }
  .motion-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  @media (prefers-reduced-motion:reduce){
    html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important;
      transition-duration:.01ms !important; transition-delay:0s !important;
    }
  }
  .activity-load-error{ margin:18px auto; max-width:32rem; padding:12px 16px; border:1px solid var(--accent-soft); border-radius:14px; background:var(--card); color:var(--accent); text-align:center; }

  /* ================= عيادة الفيلر ================= */
  .fillerpg{ background:radial-gradient(70% 50% at 50% 35%, rgba(255,157,187,.18), transparent 70%), radial-gradient(80% 60% at 50% 40%, #3A0E2A, #160614 60%, #07030A); }
  .fc-stage{ position:relative; width:100%; max-width:420px; min-height:460px; margin:6px auto 0; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#FFF7F9 0%,#FDE8EF 60%,#F6D2DE 100%); color:#4A1830; box-shadow:0 26px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(255,213,138,.3); }
  .fc-lock{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; background:radial-gradient(100% 70% at 50% 30%, #4A1534, #1E0816 70%); perspective:900px; transition:opacity .6s ease .5s; }
  .fc-lock[hidden], .fc-room[hidden]{ display:none; }
  .fc-door{ position:relative; width:150px; height:200px; border-radius:16px 16px 6px 6px; background:linear-gradient(160deg,#F7B5C9,#D96C93); box-shadow:inset 0 0 0 6px rgba(255,255,255,.18), 0 18px 40px -12px rgba(0,0,0,.8); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; transform-origin:0 50%; transition:transform 1s cubic-bezier(.5,0,.3,1); }
  .fc-sign{ display:flex; flex-direction:column; align-items:center; padding:6px 10px; border-radius:10px; background:#FFF7F2; box-shadow:0 0 0 2px #FFD58A; }
  .fc-sign b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.05rem; color:#9E1450; line-height:1.3; }
  .fc-sign small{ font-size:.66rem; font-weight:700; color:#B8425A; }
  .fc-lockic{ font-size:2rem; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
  .fc-knob{ position:absolute; left:14px; top:52%; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FFF1C4, #C9953F); }
  .fc-lock.open .fc-door{ transform:rotateY(-80deg); }
  .fc-lock.open{ opacity:0; pointer-events:none; }
  .fc-form{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:280px; }
  .fc-form.shake{ animation:shakeHard .4s ease; }
  .fc-form .fc-q{ color:#FFE3EC; }
  #fcPass{ box-sizing:border-box; width:100%; padding:12px 16px; border:none; border-radius:14px; font:inherit; font-size:1rem; text-align:center; color:#4A1830; background:#FFF7F9; box-shadow:0 0 0 2px rgba(255,213,138,.7); outline:none; }
  #fcPass:focus{ box-shadow:0 0 0 3px #FFD58A; }
  .fc-lock-msg{ margin:0; min-height:1.4em; font-size:.85rem; font-weight:700; line-height:1.6; color:#FFD58A; text-align:center; }
  .fc-room{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 12px 16px; }
  .fc-steps{ display:flex; gap:5px; justify-content:center; flex-wrap:wrap; }
  .fc-steps span{ padding:4px 8px; border-radius:99px; font-size:.68rem; font-weight:700; color:#9A4A66; background:rgba(194,24,91,.08); }
  .fc-steps span.on{ color:#FFFFFF; background:#C2185B; }
  .fc-steps span.done{ color:#5A2A10; background:#FFD58A; }
  .fc-say{ display:flex; align-items:center; gap:8px; width:100%; min-height:52px; padding:6px 10px 6px 6px; border-radius:16px; background:#3A0A1C; box-shadow:0 8px 20px -10px rgba(58,10,28,.8); }
  .fc-say.pop{ animation:pop .3s ease both; }
  .fc-say .av{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; overflow:hidden; background:#FFF3E6; box-shadow:0 0 0 2px #FFD58A; }
  .fc-say .av svg{ display:block; width:100%; height:100%; }
  .fc-say p{ margin:0; font-size:.84rem; font-weight:700; line-height:1.6; color:#FFE3EC; text-align:right; }
  .fc-face{ position:relative; width:min(56vw, 210px); aspect-ratio:200/220; margin:4px 0 0; }
  .fc-face > svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 12px 20px rgba(122,30,68,.25)); }
  .fc-face.exam{ touch-action:none; cursor:none; }
  .fc-face.gone{ display:none; }
  .fc-face.wob > svg{ animation:shakeHard .35s ease 4; }
  .fc-es, .fc-brow-angry, .fc-lines{ display:none; }
  .fc-face.ouch .fc-eo, .angry .fc-brow{ display:none; }
  .fc-face.ouch .fc-es, .angry .fc-brow-angry, .angry .fc-lines{ display:inline; }
  .fc-wr{ transition:opacity .45s ease; }
  .fc-wr.gone{ opacity:0; }
  .fc-lips, .fc-ck{ transform-box:fill-box; transform-origin:50% 50%; transition:transform .25s ease; }
  .fc-pt{ position:absolute; top:-4px; right:-18px; z-index:3; max-width:150px; padding:6px 10px; border-radius:14px 14px 4px 14px; font-size:.78rem; font-weight:700; line-height:1.5; color:#7A1E44; background:#FFFFFF; box-shadow:0 8px 18px -8px rgba(122,30,68,.5); opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
  .fc-pt.on{ opacity:1; transform:none; }
  .fc-mag{ position:absolute; z-index:2; width:58px; height:58px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; border:4px solid #C9953F; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), rgba(255,255,255,.12) 60%); box-shadow:0 8px 18px -6px rgba(0,0,0,.4); }
  .fc-mag::after{ content:""; position:absolute; right:-14px; bottom:-24px; width:9px; height:32px; border-radius:5px; background:#8A5A2B; transform:rotate(-45deg); }
  .fc-mark{ position:absolute; z-index:1; transform:translate(-50%,-50%); font-size:.95rem; animation:pop .35s ease both; pointer-events:none; }
  /* شريط الإبرة: تسحبينه بإصبعك يمين ويسار */
  html{ touch-action:manipulation; }
  .fc-track{ position:relative; direction:ltr; width:100%; max-width:320px; height:58px; border-radius:16px; background:#F3D6DF; box-shadow:inset 0 2px 8px rgba(122,30,68,.25); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; cursor:grab; outline:none; }
  .fc-track.on{ cursor:grabbing; box-shadow:inset 0 2px 8px rgba(122,30,68,.25), 0 0 0 4px rgba(255,122,162,.3); }
  .fc-track:focus-visible{ box-shadow:inset 0 2px 8px rgba(122,30,68,.25), 0 0 0 3px #C2185B; }
  .fc-zone{ position:absolute; top:6px; bottom:6px; border-radius:12px; background:linear-gradient(90deg,#FFB3CB,#FF5C8A,#FFB3CB); opacity:.75; transition:box-shadow .15s ease, opacity .15s ease; }
  .fc-zone.hit{ opacity:1; box-shadow:0 0 14px #FF5C8A; }
  .fc-needle{ position:absolute; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:1.4rem; background:#FFFFFF; box-shadow:0 4px 12px rgba(58,10,28,.35), 0 0 0 3px #3A0A1C; pointer-events:none; }
  .fc-track.on .fc-needle{ transform:scale(1.08); }
  .fc-syr{ position:absolute; z-index:2; width:92px; transform:translate(0,-50%) rotate(-32deg); transform-origin:0 50%; pointer-events:none; }
  .fc-syr svg{ display:block; width:100%; }
  .fc-panel{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
  .fc-q{ margin:0; font-size:.88rem; font-weight:700; color:#7A1E44; }
  .fc-card{ width:100%; max-width:300px; padding:10px 14px; border-radius:14px; background:#FFFFFF; text-align:right; box-shadow:0 8px 20px -12px rgba(122,30,68,.5); }
  .fc-card b{ display:block; margin-bottom:4px; color:#C2185B; }
  .fc-card p{ margin:2px 0; font-size:.84rem; }
  .fc-card span, .fc-rx p span{ color:#9A4A66; font-weight:700; }
  .fc-opts{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:300px; }
  .fc-opt{ all:unset; box-sizing:border-box; cursor:pointer; padding:11px 14px; border-radius:14px; font-size:.9rem; font-weight:700; color:#7A1E44; background:#FFFFFF; box-shadow:0 0 0 1.5px #F3B6C9; text-align:center; -webkit-tap-highlight-color:transparent; }
  .fc-opt.on{ color:#FFFFFF; background:#C2185B; box-shadow:none; }
  .fc-opt:focus-visible{ outline:2px solid #C2185B; outline-offset:2px; }
  .fc-prog{ display:flex; align-items:center; gap:6px; }
  .fc-prog i{ width:12px; height:12px; border-radius:50%; background:#F3D6DF; }
  .fc-prog i.on{ background:#FF5C8A; box-shadow:0 0 8px #FF5C8A; }
  .fc-prog b{ margin-inline-start:6px; font-size:.8rem; color:#7A1E44; }
  .fc-bars{ display:grid; gap:6px; width:100%; max-width:300px; }
  .fc-bars label{ display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; color:#7A1E44; }
  .fc-bars label > span:first-child{ flex:0 0 64px; text-align:right; }
  .fc-bar{ flex:1; height:10px; border-radius:6px; background:#F6D9E2; overflow:hidden; }
  .fc-bar i{ display:block; width:0; height:100%; border-radius:6px; background:linear-gradient(90deg,#FF9DBB,#FF5C8A); }
  .fc-bar.pain i{ background:linear-gradient(90deg,#FFD58A,#FF6B4A); }
  .fc-press{ all:unset; box-sizing:border-box; cursor:pointer; padding:16px 30px; border-radius:99px; font-weight:800; font-size:1.02rem; color:#3A0A1C; background:linear-gradient(120deg,#FF7AA2,#FFD58A); box-shadow:0 14px 30px -10px rgba(255,100,150,.9); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; transition:transform .1s ease, box-shadow .1s ease; }
  .fc-press.on{ transform:scale(.95); box-shadow:0 0 0 7px rgba(255,122,162,.28), 0 8px 18px -10px rgba(255,100,150,.9); }
  .fc-press:focus-visible{ outline:2px solid #C2185B; outline-offset:3px; }
  .fc-next{ margin-top:4px; }
  .fc-stars{ margin:0; font-size:2rem; letter-spacing:4px; color:#FFB800; text-shadow:0 2px 8px rgba(255,184,0,.4); }
  .fc-stars span{ color:#E9CFD8; text-shadow:none; }
  .fc-ba{ position:relative; width:min(56vw, 210px); aspect-ratio:200/220; border-radius:46% 46% 40% 40%; overflow:hidden; background:radial-gradient(circle at 50% 40%, #FFFFFF, #F3E3EA); box-shadow:0 0 0 7px #E2B868, 0 0 0 9px #FFF1C4, 0 18px 30px -12px rgba(122,30,68,.5); }
  .fc-ba-img{ position:absolute; inset:0; }
  .fc-ba-img .fc-spark{ z-index:1; }
  .fc-ba-img.after .fc-lips, .fc-ba-img.after .fc-ck{ transition:none; }
  .fc-ba-img svg{ display:block; width:100%; height:100%; }
  .fc-ba-img.after{ background:radial-gradient(circle at 50% 40%, #FFF9E6, #F6E6C8); }
  .fc-ba-l, .fc-ba-r{ position:absolute; top:10px; z-index:2; padding:2px 8px; border-radius:99px; font-size:.7rem; font-weight:800; color:#FFFFFF; background:rgba(58,10,28,.75); }
  .fc-ba-l{ left:12px; } .fc-ba-r{ right:12px; }
  .fc-ba-line{ position:absolute; top:0; bottom:0; z-index:2; width:3px; margin-left:-1.5px; background:#FFFFFF; box-shadow:0 0 8px rgba(0,0,0,.35); }
  .fc-range{ width:min(70vw, 260px); accent-color:#C2185B; }
  .fc-report{ margin:0; min-height:1.6em; font-weight:800; font-size:.9rem; line-height:1.7; color:#7A1E44; text-align:center; }
  .fc-rx{ position:relative; box-sizing:border-box; width:100%; max-width:320px; padding:14px 16px; border-radius:16px; background:#FFFDF8; border:1.5px dashed #E3B7C6; text-align:right; font-size:.85rem; line-height:1.7; color:#4A1830; box-shadow:0 10px 30px -14px rgba(122,30,68,.45); animation:kIn .8s cubic-bezier(.2,.7,.2,1) both; }
  .fc-rx p{ margin:2px 0; }
  .fc-rx ul{ margin:2px 0 4px; padding-inline-start:20px; }
  .fc-rx-h{ display:flex; flex-direction:column; align-items:center; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #F3D6DF; }
  .fc-rx-h b{ font-size:1rem; color:#C2185B; }
  .fc-rx-h small{ font-size:.7rem; color:#9A4A66; }
  .fc-rx-next{ font-weight:700; color:#B8425A; }
  .fc-rx-sign{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.3rem; color:#3A0A1C; text-align:left; }
  .fc-rx-stars{ position:absolute; left:14px; top:12px; color:#FFB800; font-size:.9rem; }
  .fc-again{ margin-top:4px; }

  /* تفعيل إشعارات رسايل ضيو */
  .duy-push{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 0 12px; padding:10px 12px; border-radius:14px; background:rgba(184,66,90,.06); box-shadow:inset 0 0 0 1px var(--accent-soft); }
  .duy-push[hidden], .duy-push-btn[hidden]{ display:none; }
  .duy-push-btn{ all:unset; box-sizing:border-box; cursor:pointer; padding:9px 18px; border-radius:99px; font-weight:800; font-size:.88rem; color:#3A0A1C; background:linear-gradient(120deg,#FFD58A,#FF9DBB); box-shadow:0 8px 20px -10px rgba(255,120,160,.9); -webkit-tap-highlight-color:transparent; }
  .duy-push-btn:disabled{ opacity:.6; }
  .duy-push-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .duy-push small{ font-size:.75rem; line-height:1.6; color:var(--ink-soft); text-align:center; }
  .duy-reply{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; padding:12px; border-radius:14px; background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--accent-soft); }
  .duy-reply-t{ margin:0; font-weight:800; font-size:.9rem; color:var(--accent); }
  .duy-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .duy-chip{ all:unset; cursor:pointer; padding:5px 10px; border-radius:99px; font-size:.78rem; font-weight:700; color:var(--accent); background:rgba(184,66,90,.08); -webkit-tap-highlight-color:transparent; }
  .duy-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .duy-row{ display:flex; gap:8px; align-items:flex-end; }
  .duy-row textarea{ flex:1; min-width:0; resize:none; padding:9px 12px; border:none; border-radius:12px; font:inherit; font-size:.9rem; line-height:1.6; color:var(--ink); background:var(--bg); box-shadow:inset 0 0 0 1px var(--accent-soft); outline:none; }
  .duy-row textarea:focus{ box-shadow:inset 0 0 0 2px var(--accent); }
  .duy-reply small{ min-height:1.2em; font-size:.75rem; color:var(--ink-soft); }
  .fc-tgt{ all:unset; position:absolute; z-index:3; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; box-sizing:border-box; border:3px solid #FF5C8A; background:radial-gradient(circle, rgba(255,92,138,.4), rgba(255,92,138,.1) 55%, transparent 70%); cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent; }
  .fc-tgt[hidden]{ display:none; }
  .fc-tgt.on{ animation:fcPulse .8s ease-in-out infinite; }
  @keyframes fcPulse{ 0%,100%{ transform:scale(.85); } 50%{ transform:scale(1.12); } }
  .fc-mask{ position:absolute; inset:0; z-index:2; width:100%; height:100%; touch-action:none; cursor:grab; transition:opacity .5s ease; }
  .fc-mask.gone{ opacity:0; }
  .fc-face.glow > svg, .fc-ba-img.glow > svg{ filter:drop-shadow(0 0 16px rgba(255,226,150,.95)) brightness(1.06) saturate(1.12); }
  .fc-spark{ position:absolute; z-index:3; transform:translate(-50%,-50%); font-size:1rem; pointer-events:none; animation:fcTw 1.6s ease-in-out infinite both; }
  @keyframes fcTw{ 0%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.5); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); } }
  .fc-soft{ font-weight:500; font-size:.78rem; opacity:.75; }
  .fc-rx-badges{ margin-top:6px !important; padding-top:6px; border-top:1px dashed #F3D6DF; font-size:.78rem; color:#9A4A66; }
  .fc-send:disabled{ opacity:.85; }
  .fc-ba-legend{ direction:ltr; display:flex; justify-content:space-between; width:min(70vw, 260px); margin-top:-4px; font-size:.78rem; font-weight:800; color:#7A1E44; }
  .fc-ba-legend span:first-child{ color:#C2185B; }

  /* ================= مسرح ضيو ================= */
  .stagepg{ background:radial-gradient(70% 45% at 50% 30%, rgba(255,90,150,.16), transparent 70%), radial-gradient(90% 60% at 50% 40%, #1E0A22, #0A040C 65%, #040205); }
  .st-wrap{ position:relative; height:min(calc(100dvh - 250px), calc(min(100vw - 32px, 440px) * 1.5)); min-height:400px; aspect-ratio:2/3; max-width:100%; margin:6px auto 0; border-radius:22px; overflow:hidden; background:#07030A; box-shadow:0 30px 70px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(255,213,138,.25), 0 0 60px -20px rgba(255,90,150,.45); }
  .st-cam{ position:absolute; inset:0; container-type:size; transform-origin:50% 50%; transition:transform 1.4s cubic-bezier(.4,0,.2,1); will-change:transform; }
  .st-cam.shake{ animation:shakeHard .45s ease; }
  .st-bg, .st-fg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .st-bg{ z-index:1; } .st-fg{ z-index:5; pointer-events:none; }
  .st-singer{ position:absolute; left:50%; bottom:35.5%; z-index:2; width:34%; transform:translateX(-50%); filter:drop-shadow(0 0 18px var(--lc, rgba(255,120,170,.4))); opacity:0; transition:opacity 1s ease .3s; }
  .st-cam.open .st-singer{ opacity:1; }
  .st-singer svg{ display:block; width:100%; height:auto; transform-origin:50% 100%; animation:stSway 2.5s ease-in-out infinite; }
  .st-singer .st-arm-up{ display:none; } .st-singer.belt .st-arm-up{ display:inline; } .st-singer.belt .st-arm-down{ display:none; }
  .st-singer .sg-sing, .st-singer .sg-eyes-closed{ display:none; }
  .st-singer.sing .sg-sing{ display:inline; transform-box:fill-box; transform-origin:50% 30%; animation:stMouth .24s ease-in-out infinite alternate; }
  .st-singer.sing .sg-mouth{ display:none; }
  .st-singer.belt .sg-eyes-closed{ display:inline; } .st-singer.belt .sg-eyes{ display:none; }
  .st-singer.wink svg{ animation:stHop .5s ease; }
  .st-curtain{ position:absolute; top:0; bottom:35.5%; width:51%; z-index:3; background:linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, rgba(0,0,0,.4)), repeating-linear-gradient(90deg, #4A0717 0 14px, #8A1630 14px 22px, #5C0A1D 22px 34px); box-shadow:inset 0 -6px 0 #C9953F; transition:transform 1.8s cubic-bezier(.6,0,.2,1); }
  .st-curtain.l{ left:0; } .st-curtain.r{ right:0; }
  .st-curtain::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:10px; background:repeating-linear-gradient(90deg, #E2B868 0 3px, transparent 3px 6px); opacity:.85; }
  .st-curtain::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.35), transparent 18%, transparent 82%, rgba(0,0,0,.35)); }
  .st-cam.open .st-curtain.l{ transform:translateX(-80%); } .st-cam.open .st-curtain.r{ transform:translateX(80%); }
  .st-valance{ position:absolute; top:0; left:0; right:0; z-index:4; height:5.5%; display:grid; place-items:center; background:linear-gradient(180deg, rgba(0,0,0,.4), transparent), repeating-linear-gradient(90deg, #5C0A1D 0 10px, #7E1229 10px 20px); box-shadow:inset 0 -3px 0 #C9953F, 0 6px 14px rgba(0,0,0,.6); }
  .st-valance b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:clamp(.8rem, 3.6cqw, 1.1rem); color:#FFE7A8; text-shadow:0 0 10px rgba(255,200,120,.8); }
  .st-mc{ position:absolute; right:2%; bottom:35.5%; z-index:4; width:24%; transform:translateX(135%); transition:transform .9s cubic-bezier(.3,1.2,.5,1); filter:drop-shadow(0 0 16px rgba(255,220,150,.55)); }
  .st-mc.in{ transform:none; }
  .st-mc .st-av svg, .st-fan .st-av svg, .st-shout .st-av svg{ display:block; width:100%; height:auto; }
  .st-mc .mc-talk{ display:none; }
  .st-mc.talk .mc-talk{ display:inline; transform-box:fill-box; transform-origin:50% 20%; animation:stMouth .2s ease-in-out infinite alternate; }
  .st-mc.talk .mc-mouth{ display:none; }
  .st-mc.talk .st-av{ animation:stBob .5s ease-in-out infinite alternate; }
  .st-podium{ margin-top:-14%; aspect-ratio:2.3/1; display:grid; place-items:center; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#4A3416,#1A1208); box-shadow:inset 0 3px 0 #FFD58A; }
  .st-podium span{ font-size:clamp(.55rem, 2.6cqw, .75rem); font-weight:800; color:#FFE7A8; }
  .st-fan{ position:absolute; left:1%; bottom:-7%; z-index:6; width:27%; transition:filter .6s ease; }
  .st-wrap.live .st-fan{ animation:stBounce .625s ease-in-out infinite alternate; }
  .st-fan.lit{ filter:drop-shadow(0 0 22px rgba(255,240,200,.95)); }
  .st-sign{ position:absolute; bottom:96%; left:50%; z-index:1; margin-left:-2.6em; padding:4px 10px; border-radius:8px; white-space:nowrap; font-weight:900; font-size:clamp(.66rem, 3.4cqw, .92rem); color:#C2185B; background:#FFF7F2; box-shadow:0 0 0 2px #FF5C8A, 0 6px 14px rgba(0,0,0,.5); transform:rotate(-7deg); animation:stSign 1.25s ease-in-out infinite alternate; }
  .st-sign.flip{ animation:stFlip .7s ease, stSign 1.25s ease-in-out .7s infinite alternate; color:#FFFFFF; background:#FF5C8A; box-shadow:0 0 0 2px #FFF, 0 0 22px rgba(255,90,150,.9); }
  .st-name{ position:absolute; bottom:8%; left:50%; transform:translateX(-50%); padding:1px 8px; border-radius:99px; font-size:clamp(.55rem, 2.6cqw, .72rem); font-weight:800; color:#fff; background:#C2185B; }
  .st-fan .fn-phone{ display:none; }
  .st-fan.phone-on .fn-phone{ display:inline; filter:drop-shadow(0 0 8px #FFFFFF) drop-shadow(0 0 16px rgba(255,255,255,.8)); }
  .st-shout{ position:absolute; bottom:-5%; z-index:6; width:23%; transform:translateY(115%); transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
  .st-shout.a{ right:2%; } .st-shout.b{ left:50%; }
  .st-shout.on{ transform:none; }
  .st-bub{ position:absolute; bottom:94%; right:0; width:max-content; max-width:min(56cqw, 230px); padding:6px 10px; border-radius:14px 14px 4px 14px; font-size:clamp(.68rem, 3.4cqw, .9rem); font-weight:900; line-height:1.5; color:#3A0A1C; background:#FFFFFF; box-shadow:0 8px 20px rgba(0,0,0,.5); }
  .st-shout.b .st-bub{ right:auto; left:-30%; border-radius:14px 14px 14px 4px; }
  .st-shout.on .st-bub{ animation:pop .35s ease both; }
  .st-lyric{ position:absolute; left:4%; right:4%; top:56%; z-index:8; text-align:center; opacity:0; transition:opacity .35s ease; pointer-events:none; }
  .st-lyric.on{ opacity:1; }
  .st-lyric small{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:.68rem; font-weight:800; color:#FFD58A; background:rgba(0,0,0,.5); }
  .st-lyric p{ margin:4px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:clamp(1rem, 5.2vw, 1.45rem); line-height:1.5; color:#FFFFFF; text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 18px rgba(255,90,150,.65); }
  .st-lyric .kar{ background:linear-gradient(to left, #FFD58A var(--p,0%), #FFFFFF var(--p,0%)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.95)) drop-shadow(0 0 10px rgba(255,90,150,.6)); }
  .st-hud{ position:absolute; top:1%; left:50%; z-index:9; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:.7rem; font-weight:800; color:#FFE3EC; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .4s ease; }
  .st-wrap.live .st-hud{ opacity:1; }
  .st-hbar{ width:86px; height:7px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.15); }
  .st-hbar i{ display:block; width:30%; height:100%; background:linear-gradient(90deg,#FFD58A,#FF5C8A); transition:width .2s linear; }
  .st-lock, .st-menu, .st-end{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; text-align:center; background:radial-gradient(100% 70% at 50% 35%, rgba(40,10,32,.82), rgba(6,2,6,.94)); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:opacity .8s ease, transform .8s ease; }
  .st-lock[hidden], .st-menu[hidden], .st-end[hidden], .st-ctl[hidden]{ display:none; }
  .st-lock.open{ opacity:0; transform:scale(1.08); pointer-events:none; }
  .st-ticket{ position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 20px; border-radius:14px; color:#3A0A1C; background:linear-gradient(135deg,#FFE7A8,#FF9DBB); box-shadow:0 18px 40px -12px rgba(255,90,150,.8), inset 0 0 0 2px rgba(255,255,255,.5); transform:rotate(-3deg); }
  .st-ticket::before, .st-ticket::after{ content:""; position:absolute; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:#1E0816; }
  .st-ticket::before{ left:-9px; } .st-ticket::after{ right:-9px; }
  .st-tk-top{ font-size:.72rem; font-weight:900; letter-spacing:.04em; color:#9E1450; }
  .st-ticket b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.45rem; line-height:1.3; }
  .st-ticket small{ font-size:.68rem; font-weight:700; color:#6A1A3A; }
  .st-form{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:270px; }
  .st-form.shake{ animation:shakeHard .4s ease; }
  #stPass{ box-sizing:border-box; width:100%; padding:12px 16px; border:none; border-radius:14px; font:inherit; font-size:1rem; text-align:center; color:#3A0A1C; background:#FFF7F9; box-shadow:0 0 0 2px rgba(255,213,138,.7); outline:none; }
  #stPass:focus{ box-shadow:0 0 0 3px #FFD58A; }
  .st-lock-msg{ margin:0; min-height:1.4em; font-size:.82rem; font-weight:700; line-height:1.6; color:#FFD58A; }
  .st-menu-ic{ font-size:3.6rem; line-height:1; filter:drop-shadow(0 10px 26px rgba(255,120,170,.75)); animation:g3Float 2.6s ease-in-out infinite; }
  .st-menu b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:2rem; line-height:1.3; background:linear-gradient(110deg,#FFE7A8 20%,#FFFFFF 45%,#FFB3CB 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .st-menu small{ max-width:290px; font-size:.8rem; line-height:1.8; color:rgba(255,226,236,.85); }
  .st-menu .st-vol{ font-weight:800; color:#FFD58A; }
  .st-end-card{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; max-width:310px; padding:20px 16px; border-radius:20px; background:linear-gradient(160deg, rgba(74,16,48,.95), rgba(26,6,18,.95)); box-shadow:0 0 0 1px rgba(255,213,138,.4), 0 24px 50px -16px rgba(255,90,150,.6); animation:kIn .9s cubic-bezier(.2,.7,.2,1) both; }
  .st-end-ic{ font-size:2.6rem; }
  .st-end-card h4{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.6rem; color:#FFE7A8; }
  .st-stars{ margin:0; font-size:1.9rem; letter-spacing:4px; color:#FFB800; text-shadow:0 2px 10px rgba(255,184,0,.5); }
  .st-stars span{ color:rgba(255,255,255,.18); text-shadow:none; }
  .st-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
  .st-stats div{ display:flex; flex-direction:column; gap:2px; padding:8px 4px; border-radius:12px; background:rgba(255,255,255,.07); }
  .st-stats b{ font-size:1.2rem; color:#FFFFFF; } .st-stats small{ font-size:.66rem; color:rgba(255,226,236,.75); }
  .st-thanks{ margin:4px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.05rem; line-height:1.7; color:#FFE3EC; }
  .st-best{ font-size:.7rem; color:rgba(255,226,236,.6); }
  .st-ctl{ display:flex; gap:12px; justify-content:center; margin-top:10px; }
  .st-btn{ all:unset; box-sizing:border-box; cursor:pointer; width:66px; height:66px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:1.55rem; line-height:1; background:radial-gradient(circle at 35% 30%, #5A1E46, #1E0818); box-shadow:0 0 0 2px rgba(255,213,138,.5), 0 10px 22px -8px rgba(255,90,150,.75); touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; transition:transform .08s ease, box-shadow .2s ease; }
  .st-btn small{ font-size:.58rem; font-weight:800; color:#FFE3EC; }
  .st-btn:active{ transform:scale(.9); }
  .st-btn.on{ box-shadow:0 0 0 3px #FFD58A, 0 0 26px #FFD58A; }
  .st-btn:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .st-btn.skip{ width:54px; height:54px; align-self:center; font-size:1.2rem; opacity:.85; }
  .st-rose{ position:absolute; left:14%; bottom:24%; z-index:7; font-size:1.7rem; pointer-events:none; animation:stRose .9s cubic-bezier(.3,.1,.4,1) forwards; }
  .st-pop{ position:absolute; bottom:26%; z-index:8; white-space:nowrap; font-size:.85rem; font-weight:900; color:#FFFFFF; text-shadow:0 2px 6px rgba(0,0,0,.9); pointer-events:none; animation:stPop 1.2s ease-out forwards; }
  .st-pop.gold{ color:#FFD58A; }
  @keyframes stSway{ 0%,100%{ transform:rotate(-1.6deg); } 50%{ transform:rotate(1.6deg); } }
  @keyframes stMouth{ from{ transform:scaleY(.35); } to{ transform:scaleY(1.15); } }
  @keyframes stHop{ 0%,100%{ transform:none; } 40%{ transform:translateY(-4%) scale(1.04); } }
  @keyframes stBob{ from{ transform:translateY(0); } to{ transform:translateY(-3%); } }
  @keyframes stBounce{ from{ transform:translateY(0); } to{ transform:translateY(-3.5%); } }
  @keyframes stSign{ from{ transform:rotate(-9deg) translateY(0); } to{ transform:rotate(-2deg) translateY(-6%); } }
  @keyframes stFlip{ from{ transform:rotateY(0) rotate(-7deg); } to{ transform:rotateY(360deg) rotate(-7deg); } }
  @keyframes stRose{ 0%{ transform:translate(0,0) rotate(0) scale(.7); opacity:1; } 60%{ transform:translate(30cqw,-46cqh) rotate(240deg) scale(1.15); } 100%{ transform:translate(36cqw,-36cqh) rotate(400deg) scale(.6); opacity:0; } }
  @keyframes stPop{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(-14cqh); opacity:0; } }
  /* مسرح ضيو: الإضافات */
  .st-songs{ display:flex; flex-direction:column; gap:7px; width:100%; max-width:280px; }
  .st-song{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:9px 14px; border-radius:14px; text-align:right; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,213,138,.25); -webkit-tap-highlight-color:transparent; }
  .st-song b{ font-size:.92rem; color:#FFE3EC; } .st-song small{ font-size:.7rem; color:rgba(255,226,236,.7); }
  .st-song.on{ background:linear-gradient(120deg, rgba(255,213,138,.25), rgba(255,122,162,.25)); box-shadow:inset 0 0 0 2px #FFD58A; }
  .st-song.locked{ cursor:default; opacity:.55; }
  .st-song:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .st-next{ font-size:.72rem !important; font-weight:700; color:#FFD58A !important; }
  .st-lane{ position:absolute; left:4%; right:4%; top:7%; z-index:9; height:40px; direction:ltr; overflow:hidden; border-radius:99px; background:rgba(10,3,10,.62); box-shadow:inset 0 0 0 1px rgba(255,213,138,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); touch-action:none; cursor:pointer; }
  .st-lane[hidden]{ display:none; }
  .st-hitz{ position:absolute; left:84%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:1rem; box-shadow:0 0 0 3px #FFD58A, 0 0 14px #FFD58A; }
  .st-note{ position:absolute; left:0; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFFFFF, #FF7AA2 55%, #C2185B); box-shadow:0 0 10px rgba(255,122,162,.9); }
  .st-note.hit{ background:radial-gradient(circle, #FFF1C4, #FFD58A); box-shadow:0 0 18px #FFD58A; opacity:.8; transition:opacity .3s ease; }
  .st-note.miss{ opacity:.25; }
  .st-judge{ position:absolute; top:13.5%; right:6%; z-index:9; font-size:.9rem; font-weight:900; color:#FFFFFF; text-shadow:0 2px 6px rgba(0,0,0,.9); opacity:0; pointer-events:none; }
  .st-judge.on{ animation:pop .3s ease both; opacity:1; }
  .st-judge.p{ color:#FFD58A; } .st-judge.miss{ color:#FF9DBB; }
  .st-btn.more{ width:auto; padding:0 18px; border-radius:99px; color:#3A0A1C; background:linear-gradient(120deg,#FFD58A,#FF7AA2); animation:stPulse .9s ease-in-out infinite; }
  .st-btn.more small{ color:#3A0A1C; }
  @keyframes stPulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,213,138,.7); } 50%{ transform:scale(1.07); box-shadow:0 0 0 12px rgba(255,213,138,0); } }
  .st-deliver{ position:absolute; left:24%; bottom:-6%; z-index:6; width:21%; transform:translateY(115%); transition:transform .5s cubic-bezier(.3,1.4,.5,1); }
  .st-deliver.in{ transform:none; }
  .st-deliver .st-av svg{ display:block; width:100%; height:auto; }
  .st-deliver .st-bub{ left:20%; right:auto; border-radius:14px 14px 14px 4px; }
  .st-deliver.in .st-bub{ animation:pop .35s ease both; }
  .st-bouquet{ position:absolute; right:-6%; top:34%; z-index:2; font-size:clamp(1.4rem, 7cqw, 2.1rem); opacity:0; transform:scale(.3) rotate(-20deg); transition:opacity .4s ease, transform .6s cubic-bezier(.3,1.6,.5,1); filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
  .st-bouquet.on{ opacity:1; transform:rotate(-12deg); }
  .st-end-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .st-photo{ position:absolute; inset:0; z-index:12; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; background:rgba(6,2,6,.94); }
  .st-photo[hidden]{ display:none; }
  .st-photo p{ margin:0; font-weight:800; color:#FFE3EC; }
  .st-photo img{ max-width:100%; max-height:70%; border-radius:12px; box-shadow:0 18px 40px -12px rgba(255,90,150,.7); }
  .st-photo img:not([src]){ display:none; }
  .st-photo-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .st-photo-btns a{ text-decoration:none; }
  /* عيادة الفيلر: العلاجات الجديدة */
  .fc-pores, .fc-lashes, .fc-teeth, .fc-sleep, .fc-tired, .fc-brow-bold, .fc-brow-guide{ display:none; }
  .look-pores .fc-pores, .look-lashes .fc-lashes, .look-teeth .fc-teeth, .look-sleep .fc-sleep, .look-tired .fc-tired, .look-bold .fc-brow-bold, .look-guide .fc-brow-guide{ display:inline; }
  .look-teeth .fc-lips, .look-sleep .fc-eo, .look-sleep .fc-es, .look-bold .fc-brow{ display:none; }
  .look-faint .fc-brow{ opacity:.22; }
  .fc-pore.gone{ display:none; }
  .fc-lash{ opacity:0; transition:opacity .25s ease; }
  .fc-lash.on{ opacity:1; }
  .fc-lash.crooked{ transform-box:fill-box; transform-origin:0 100%; transform:rotate(22deg); }
  .fc-brow-guide.act{ stroke:#FF2E7A; stroke-width:1.6; }
  .fc-face > svg{ transition:transform .6s cubic-bezier(.4,0,.2,1); }
  .fc-face.zoomed{ overflow:hidden; border-radius:22px; box-shadow:0 0 0 3px #FFD58A, 0 12px 26px -12px rgba(122,30,68,.6); background:#FCE4EC; }
  .fc-face.zoomed .fc-pt{ right:6px; top:6px; }
  .fc-face.work{ touch-action:none; user-select:none; -webkit-user-select:none; }
  .fc-face.steam::after{ content:""; position:absolute; inset:-6%; z-index:3; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); pointer-events:none; animation:fcSteam 1.5s ease-out forwards; }
  @keyframes fcSteam{ 0%{ opacity:0; transform:scale(.6); } 40%{ opacity:1; } 100%{ opacity:0; transform:scale(1.25) translateY(-10%); } }
  .fc-vac, .fc-brush, .fc-glue, .fc-ring, .fc-mglow{ position:absolute; z-index:3; transform:translate(-50%,-50%); pointer-events:none; }
  .fc-vac{ width:44px; height:44px; border-radius:50%; border:3px solid #4FB3E8; background:radial-gradient(circle, rgba(127,209,255,.35), rgba(127,209,255,.08) 70%); box-shadow:0 6px 14px -4px rgba(0,60,100,.5); }
  .fc-vac::after{ content:"💨"; position:absolute; right:-16px; bottom:-14px; font-size:1rem; }
  .fc-brush{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; font-size:1.2rem; background:radial-gradient(circle, rgba(170,220,255,.75), rgba(120,190,255,0) 70%); }
  .fc-brush::before{ content:"🪥"; }
  .fc-glue{ width:12px; height:12px; border-radius:50%; background:#FF2E7A; box-shadow:0 0 10px #FF2E7A, 0 0 0 2px #FFFFFF; }
  .fc-ring{ width:26px; height:26px; border-radius:50%; border:2.5px dashed #FFB800; box-shadow:0 0 10px rgba(255,184,0,.6); }
  .fc-mglow{ width:70px; height:70px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,200,220,0) 70%); opacity:0; transition:opacity .25s ease; }
  .fc-mglow.on{ opacity:1; }
  .fc-z{ font-weight:900; color:#7A1E44; font-size:1.1rem; }
  .fc-tints{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:100%; max-width:280px; }
  .fc-tint{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:14px; font-size:.85rem; font-weight:800; color:#7A1E44; background:#FFFFFF; box-shadow:0 0 0 1.5px #F3B6C9; -webkit-tap-highlight-color:transparent; }
  .fc-tint i{ width:18px; height:18px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px #FFFFFF, 0 0 0 3px var(--c); }
  .fc-tint:focus-visible{ outline:2px solid #C2185B; outline-offset:2px; }

  /* بوسات ضيو على الشاشة */
  .kz-layer{ position:fixed; inset:0; z-index:26; pointer-events:none; overflow:hidden; }
  .kz-print{ all:unset; position:absolute; width:var(--s); display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-50%) rotate(var(--r)); pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; animation:kzIn .45s cubic-bezier(.2,1.6,.4,1) both; filter:drop-shadow(0 6px 10px rgba(122,15,53,.35)); }
  .kz-print svg{ display:block; width:100%; height:auto; }
  .kz-print small{ margin-top:-4px; padding:1px 8px; border-radius:99px; white-space:nowrap; font-size:.68rem; font-weight:800; color:#C2185B; background:rgba(255,255,255,.9); }
  .kz-print.fade{ animation:kzOut .7s ease forwards; }
  .kz-print.take{ animation:none; transition:transform .6s cubic-bezier(.5,0,.3,1), opacity .6s ease; transform:translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.15); opacity:0; }
  .kz-print:focus-visible{ outline:2px solid #C2185B; outline-offset:2px; }
  @keyframes kzIn{ from{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(1.9); } to{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); } }
  @keyframes kzOut{ to{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(.85); } }
  .kz-chip{ all:unset; box-sizing:border-box; position:fixed; top:calc(env(safe-area-inset-top,0px) + 14px); left:14px; z-index:26; padding:6px 12px; border-radius:99px; cursor:pointer; font-size:.9rem; font-weight:800; color:#C2185B; background:rgba(255,255,255,.92); box-shadow:0 6px 18px -6px rgba(194,24,91,.5), 0 0 0 1.5px rgba(255,122,162,.5); -webkit-tap-highlight-color:transparent; }
  .kz-chip[hidden]{ display:none; }
  .kz-chip.bump{ animation:heartbeat .7s ease; }
  .kz-chip:focus-visible{ outline:2px solid #C2185B; outline-offset:2px; }
  .kz-pop{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 56px); left:14px; z-index:26; width:min(76vw, 280px); padding:14px; border-radius:18px; text-align:center; background:var(--card); box-shadow:0 20px 50px -18px rgba(122,30,68,.6), 0 0 0 1px var(--accent-soft); animation:pop .3s ease both; }
  .kz-pop[hidden]{ display:none; }
  .kz-pop p{ margin:0 0 6px; } .kz-t{ font-weight:900; color:var(--accent); } .kz-s{ font-size:.8rem; line-height:1.7; color:var(--ink-soft); }
  .kz-back{ all:unset; box-sizing:border-box; cursor:pointer; margin-top:6px; padding:10px 18px; border-radius:99px; font-weight:800; color:#3A0A1C; background:linear-gradient(120deg,#FFD58A,#FF7AA2); box-shadow:0 8px 20px -10px rgba(255,100,150,.9); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .kz-back:active{ transform:scale(.94); }
  .kz-n{ display:block; min-height:1.3em; margin-top:6px; font-size:.75rem; font-weight:700; color:var(--accent); }
  .kz-toast{ position:fixed; left:0; right:0; margin:0 auto; bottom:calc(env(safe-area-inset-bottom,0px) + 100px); z-index:26; width:max-content; max-width:86vw; padding:9px 16px; border-radius:16px; font-size:.85rem; font-weight:800; line-height:1.6; text-align:center; color:#FFFFFF; background:rgba(122,15,53,.92); box-shadow:0 12px 30px -10px rgba(0,0,0,.5); animation:pop .35s ease both; pointer-events:none; }
  .kz-fly{ position:fixed; z-index:40; font-size:1.7rem; transform:translate(-50%,-50%); pointer-events:none; animation:kzFly 1.2s ease-out forwards; }
  @keyframes kzFly{ to{ transform:translate(-50%,-260px) scale(1.6) rotate(-20deg); opacity:0; } }
  /* بوسة طايرة في المسرح */
  .st-kiss{ position:absolute; left:50%; top:30%; z-index:7; font-size:clamp(1.4rem, 8cqw, 2.2rem); pointer-events:none; animation:stKiss 1.4s cubic-bezier(.3,.1,.4,1) forwards; filter:drop-shadow(0 0 10px rgba(255,90,150,.9)); }
  @keyframes stKiss{ 0%{ transform:translate(-50%,0) scale(.4); opacity:0; } 15%{ opacity:1; transform:translate(-50%,0) scale(1.2); } 100%{ transform:translate(-34cqw,54cqh) scale(.9) rotate(-30deg); opacity:.9; } }
  /* زر 🎨 لتغيير شكل الظرف */
  .env-style-btn{ all:unset; box-sizing:border-box; position:absolute; top:68px; right:max(4px, calc(50% - min(170px, 42vw) - 6px)); z-index:5; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; cursor:pointer; font-size:1.15rem; background:var(--card); box-shadow:0 6px 16px -6px rgba(122,30,68,.5), 0 0 0 1px var(--accent-soft); -webkit-tap-highlight-color:transparent; transition:opacity .4s ease; }
  .env-style-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .scene.opening .env-style-btn, .scene.opening .env-style{ opacity:0; pointer-events:none; }
  .env-style{ position:absolute; top:114px; right:max(4px, calc(50% - min(170px, 42vw) - 6px)); z-index:6; width:min(84vw, 300px); padding:12px; border-radius:16px; text-align:right; background:var(--card); box-shadow:0 18px 40px -16px rgba(122,30,68,.55), 0 0 0 1px var(--accent-soft); animation:pop .25s ease both; }
  .env-style[hidden]{ display:none; }
  .env-style p{ margin:0 0 6px; font-size:.78rem; font-weight:800; color:var(--accent); }
  .es-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .es-row:last-child{ margin-bottom:0; }
  .es-row button{ all:unset; box-sizing:border-box; cursor:pointer; padding:6px 10px; border-radius:99px; font-size:.78rem; font-weight:700; color:var(--ink); background:var(--bg); box-shadow:inset 0 0 0 1px var(--accent-soft); -webkit-tap-highlight-color:transparent; }
  .es-row button.on{ color:#FFFFFF; background:var(--accent); box-shadow:none; }
  .es-row .es-c{ width:34px; height:34px; padding:0; border-radius:50%; display:grid; place-items:center; }
  .es-row .es-c i{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow:0 0 0 1px rgba(0,0,0,.1); }
  .es-row .es-c.on{ background:var(--bg); box-shadow:0 0 0 2px var(--accent); }
  .es-row button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ================= شهر العسل في إسبانيا ================= */
  .honeypg{ background:radial-gradient(70% 45% at 50% 25%, rgba(255,183,77,.22), transparent 70%), radial-gradient(90% 60% at 50% 40%, #3A1420, #1A0710 65%, #0A0306); }
  .hn-stage{ position:relative; width:100%; max-width:430px; min-height:520px; margin:6px auto 0; border-radius:24px; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(180deg,#FFF6E6,#FCE3C2); color:#4A2410; box-shadow:0 26px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,213,138,.35); }
  .hn-stage::before{ content:""; position:absolute; inset:0 0 auto 0; height:8px; background:repeating-linear-gradient(90deg,#C62828 0 18px,#F9A825 18px 36px); z-index:2; }
  .hn-top{ display:flex; justify-content:space-between; gap:8px; padding:14px 12px 6px; }
  .hn-tbtn{ all:unset; cursor:pointer; padding:6px 12px; border-radius:99px; font-size:.78rem; font-weight:800; color:#7A2E12; background:#FFFFFF; box-shadow:0 4px 12px -6px rgba(122,46,18,.5), inset 0 0 0 1px #F2C79A; -webkit-tap-highlight-color:transparent; }
  .hn-tbtn b{ color:#C62828; }
  .hn-tbtn:focus-visible{ outline:2px solid #C62828; outline-offset:2px; }
  .hn-say{ display:flex; align-items:center; gap:8px; margin:0 12px; padding:6px 10px 6px 6px; border-radius:16px; background:#5A1E12; box-shadow:0 8px 18px -10px rgba(90,30,18,.8); }
  .hn-say[hidden]{ display:none; }
  .hn-say.pop{ animation:pop .3s ease both; }
  .hn-say .av{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; overflow:hidden; background:#FFE9D6; box-shadow:0 0 0 2px #F9A825; }
  .hn-say .av svg{ display:block; width:100%; height:100%; }
  .hn-say p{ margin:0; font-size:.82rem; font-weight:700; line-height:1.6; color:#FFE9D6; }
  .hn-view{ flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 12px 16px; }
  .hn-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .hn-stars{ margin:0; font-size:1.8rem; letter-spacing:4px; color:#F9A825; text-shadow:0 2px 8px rgba(249,168,37,.5); }
  .hn-stars span{ color:#E8CFAE; text-shadow:none; }
  /* التذكرة */
  .hn-ticket{ display:flex; width:100%; max-width:360px; margin-top:6px; border-radius:16px; overflow:hidden; filter:drop-shadow(0 14px 22px rgba(122,46,18,.35)); transform:rotate(-1.5deg); animation:kIn .8s cubic-bezier(.2,.7,.2,1) both; }
  .hn-tk-main{ flex:1; padding:12px 14px; background:#FFFFFF; position:relative; }
  .hn-tk-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; border-bottom:2px solid #C62828; }
  .hn-tk-head b{ color:#C62828; font-size:.95rem; } .hn-tk-head small{ font-size:.6rem; font-weight:900; letter-spacing:.12em; color:#9E6B4A; }
  .hn-tk-route{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; direction:ltr; }
  .hn-tk-route div{ display:flex; flex-direction:column; align-items:center; }
  .hn-tk-route small{ font-size:.6rem; color:#9E6B4A; } .hn-tk-route b{ font-size:1.7rem; font-weight:900; color:#3E1A0A; letter-spacing:.04em; } .hn-tk-route span{ font-size:.7rem; color:#7A2E12; }
  .hn-tk-plane{ flex:1; text-align:center; color:#C62828; font-size:1.2rem; background:linear-gradient(90deg, transparent, transparent 10%, #F2C79A 10%, #F2C79A 90%, transparent 90%) center/100% 2px no-repeat; }
  .hn-tk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 8px; }
  .hn-tk-grid div{ display:flex; flex-direction:column; } .hn-tk-grid small{ font-size:.58rem; color:#9E6B4A; } .hn-tk-grid b{ font-size:.78rem; color:#3E1A0A; }
  .hn-tk-bar{ height:28px; margin-top:10px; background:repeating-linear-gradient(90deg,#3E1A0A 0 2px,transparent 2px 4px,#3E1A0A 4px 5px,transparent 5px 8px,#3E1A0A 8px 11px,transparent 11px 12px); opacity:.85; }
  .hn-tk-stub{ width:74px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:linear-gradient(180deg,#C62828,#8E1B1B); color:#FFF3E0; border-left:3px dashed rgba(255,255,255,.6); }
  .hn-tk-stub small{ font-size:.6rem; opacity:.8; } .hn-tk-stub b{ font-size:1rem; margin-bottom:6px; }
  .hn-go{ margin-top:6px; }
  /* الطيارة */
  .v-flight{ padding:0; }
  .hn-sky{ position:relative; width:100%; flex:1; min-height:360px; overflow:hidden; background:linear-gradient(180deg,#4FA9DD,#BDE3F7 70%,#FFE0B2); }
  .hn-cloud{ position:absolute; height:40px; border-radius:40px; background:#FFFFFF; opacity:.9; animation:hnCloud linear infinite; }
  .hn-cloud::before{ content:""; position:absolute; left:20%; top:-20px; width:50%; height:50px; border-radius:50%; background:inherit; }
  .hn-cloud.c1{ top:14%; width:140px; animation-duration:6s; } .hn-cloud.c2{ top:58%; width:110px; animation-duration:4.4s; animation-delay:-2s; } .hn-cloud.c3{ top:78%; width:170px; animation-duration:7s; animation-delay:-4s; } .hn-cloud.c4{ top:34%; width:90px; animation-duration:3.6s; animation-delay:-1s; opacity:.7; }
  @keyframes hnCloud{ from{ transform:translateX(-200px); } to{ transform:translateX(560px); } }
  .hn-plane{ position:absolute; left:50%; top:38%; width:62%; transform:translate(-50%,-50%); filter:drop-shadow(0 12px 14px rgba(0,40,80,.3)); animation:hnPlane 2.4s ease-in-out infinite; }
  @keyframes hnPlane{ 0%,100%{ transform:translate(-50%,-50%) rotate(-2deg); } 50%{ transform:translate(-50%,-56%) rotate(1deg); } }
  .hn-fly-tx{ position:absolute; left:0; right:0; bottom:10%; margin:0; text-align:center; font-weight:900; font-size:1rem; color:#5A1E12; text-shadow:0 1px 0 rgba(255,255,255,.8); }
  /* الخريطة */
  .hn-map{ width:100%; border-radius:16px; box-shadow:0 10px 24px -14px rgba(0,60,100,.6); touch-action:manipulation; }
  .hn-pin{ cursor:pointer; outline:none; }
  .hn-pin > path{ transition:transform .2s ease; transform-box:fill-box; transform-origin:50% 100%; animation:hnPin 1.8s ease-in-out infinite; }
  .hn-pin:hover > path, .hn-pin:focus-visible > path{ transform:scale(1.18); }
  .hn-pin.done > path{ animation:none; }
  .hn-pin-name{ font-size:8px; font-weight:900; fill:#5A1E12; paint-order:stroke; stroke:#FFF6E6; stroke-width:2.4px; }
  @keyframes hnPin{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
  .hn-map-foot{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:.85rem; color:#7A2E12; }
  /* مقدمة المدينة */
  .hn-intro{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; width:100%; }
  .hn-intro-pc{ width:min(78%, 300px); border-radius:12px; overflow:hidden; box-shadow:0 0 0 4px #FFFFFF, 0 12px 26px -12px rgba(0,0,0,.5); transform:rotate(-2deg); }
  .hn-intro-pc svg{ display:block; width:100%; height:auto; }
  .hn-intro h4{ margin:8px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.8rem; color:var(--c); }
  .hn-intro h4 small{ font-family:Georgia,serif; font-size:.9rem; font-style:italic; color:#9E6B4A; }
  .hn-intro > b{ font-size:1rem; color:#3E1A0A; } .hn-intro p{ margin:0; max-width:300px; font-size:.85rem; line-height:1.7; color:#7A4A2A; }
  .hn-best{ font-size:.8rem; color:#9E6B4A; } .hn-best span{ color:#E8CFAE; }
  /* شاشة الختم والصورة */
  .hn-done{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; text-align:center; }
  .hn-line{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.15rem; color:#7A2E12; }
  .hn-pass-page{ width:150px; height:150px; display:grid; place-items:center; border-radius:10px; background:repeating-linear-gradient(0deg, rgba(122,46,18,.05) 0 1px, transparent 1px 12px), #FFF9EE; box-shadow:inset 0 0 0 1px #E6C9A3, 0 8px 18px -10px rgba(122,46,18,.5); }
  .hn-stamp-wrap{ width:120px; opacity:0; transform:scale(2.4) rotate(-20deg); }
  .hn-stamp-wrap.slam{ animation:hnSlam .45s cubic-bezier(.3,1.6,.5,1) forwards; }
  @keyframes hnSlam{ 0%{ opacity:0; transform:scale(2.4) rotate(-20deg); } 70%{ opacity:1; transform:scale(.92) rotate(-8deg); } 100%{ opacity:.9; transform:scale(1) rotate(-8deg); } }
  .hn-stamp{ display:block; width:100%; height:auto; transform:rotate(var(--r,-8deg)); mix-blend-mode:multiply; }
  .hn-polaroid{ width:min(70%, 260px); padding:8px 8px 10px; background:#FFFFFF; box-shadow:0 14px 28px -12px rgba(0,0,0,.45); transform:translateY(30px) rotate(4deg); opacity:0; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
  .hn-polaroid.in{ transform:rotate(3deg); opacity:1; }
  .hn-polaroid svg{ display:block; width:100%; height:auto; }
  .hn-polaroid small{ display:block; margin-top:6px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:.95rem; line-height:1.5; color:#5A1E12; text-align:center; }
  /* الألعاب */
  .hn-game{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
  .hn-game > svg{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 10px 22px -14px rgba(0,0,0,.6); touch-action:none; user-select:none; -webkit-user-select:none; }
  .hn-hud{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; font-size:.8rem; font-weight:700; color:#7A2E12; text-align:center; }
  .hn-hud b{ font-size:1rem; color:#C62828; }
  .hn-hold{ all:unset; box-sizing:border-box; cursor:pointer; padding:14px 28px; border-radius:99px; font-weight:900; color:#FFFFFF; background:linear-gradient(120deg,#C62828,#F9A825); box-shadow:0 12px 24px -10px rgba(198,40,40,.8); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; transition:transform .08s ease; }
  .hn-hold.on, .hn-hold:active{ transform:scale(.94); }
  .hn-steam path{ animation:hnSteam 2.4s ease-in-out infinite; } .hn-steam path:nth-child(2){ animation-delay:.8s; } .hn-steam path:nth-child(3){ animation-delay:1.4s; }
  @keyframes hnSteam{ 0%{ opacity:0; transform:translateY(8px); } 40%{ opacity:.8; } 100%{ opacity:0; transform:translateY(-12px); } }
  .hn-cam{ position:relative; width:100%; aspect-ratio:3/4; max-height:52vh; overflow:hidden; border-radius:14px; background:#000; touch-action:none; cursor:grab; box-shadow:0 0 0 3px #3E1A0A; }
  .hn-cam.good{ box-shadow:0 0 0 3px #43A047, 0 0 18px rgba(67,160,71,.6); }
  .hn-pano{ position:absolute; inset:0; width:100%; height:100%; transform-origin:50% 50%; }
  .hn-vf{ position:absolute; inset:4%; pointer-events:none; }
  .hn-vf i{ position:absolute; width:24px; height:24px; border:3px solid #FFFFFF; filter:drop-shadow(0 0 2px rgba(0,0,0,.6)); }
  .hn-vf .tl{ top:0; left:0; border-right:0; border-bottom:0; } .hn-vf .tr{ top:0; right:0; border-left:0; border-bottom:0; } .hn-vf .bl{ bottom:0; left:0; border-right:0; border-top:0; } .hn-vf .br{ bottom:0; right:0; border-left:0; border-top:0; }
  .hn-vf b{ position:absolute; background:rgba(255,255,255,.35); } .hn-vf .g1,.hn-vf .g2{ top:0; bottom:0; width:1px; } .hn-vf .g1{ left:33.3%; } .hn-vf .g2{ left:66.6%; } .hn-vf .g3,.hn-vf .g4{ left:0; right:0; height:1px; } .hn-vf .g3{ top:33.3%; } .hn-vf .g4{ top:66.6%; }
  .hn-focus{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); padding:4px 10px; border-radius:99px; white-space:nowrap; font-size:.75rem; font-weight:800; color:#FFFFFF; background:rgba(0,0,0,.55); }
  .hn-cam.good .hn-focus{ background:rgba(46,125,50,.85); }
  .hn-flash{ position:absolute; inset:0; background:#FFFFFF; opacity:0; pointer-events:none; }
  .hn-flash.on{ animation:hnFlash .5s ease-out; }
  @keyframes hnFlash{ from{ opacity:.95; } to{ opacity:0; } }
  .hn-cam-ctl{ display:flex; align-items:center; gap:18px; }
  .hn-z{ width:44px; height:44px; padding:0 !important; display:grid !important; place-items:center; color:#7A2E12 !important; background:#FFFFFF !important; box-shadow:inset 0 0 0 1px #F2C79A !important; }
  .hn-shutter{ all:unset; cursor:pointer; width:62px; height:62px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 0 5px #C62828, 0 8px 18px -6px rgba(0,0,0,.5); -webkit-tap-highlight-color:transparent; }
  .hn-shutter:active{ transform:scale(.92); }
  .hn-tip{ margin:0; font-size:.75rem; color:#9E6B4A; text-align:center; }
  .hn-pan{ max-width:330px; }
  .hn-lay{ animation:pop .35s ease both; }
  .hn-recipe{ position:absolute; top:16px; left:50%; z-index:3; width:min(82%, 270px); transform:translateX(-50%) rotate(-2deg); padding:12px 16px; border-radius:6px; background:#FFF8E1; box-shadow:0 14px 28px -10px rgba(0,0,0,.45); text-align:right; transition:opacity .4s ease, transform .4s ease; }
  .hn-recipe.hide{ opacity:0; transform:translateX(-50%) translateY(-20px) rotate(-6deg); pointer-events:none; }
  .hn-recipe b{ display:block; text-align:center; color:#C62828; font-size:1rem; } .hn-recipe ol{ margin:8px 0 4px; padding-inline-start:22px; font-size:.9rem; line-height:1.8; color:#3E1A0A; } .hn-recipe small{ display:block; text-align:center; font-weight:800; color:#9E6B4A; }
  .hn-ings{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%; max-width:330px; }
  .hn-ing{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:14px; font-size:.75rem; font-weight:800; color:#5A1E12; background:#FFFFFF; box-shadow:0 6px 14px -8px rgba(122,46,18,.6), inset 0 0 0 1px #F2C79A; -webkit-tap-highlight-color:transparent; }
  .hn-ing span{ font-size:1.6rem; } .hn-ing.ok{ opacity:.35; } .hn-ing.no{ animation:shakeHard .35s ease; box-shadow:inset 0 0 0 2px #C62828; }
  .hn-peek{ padding:5px 10px !important; font-size:.75rem !important; color:#7A2E12 !important; background:#FFFFFF !important; }
  .hn-dancer{ transform-origin:150px 200px; animation:hnSway 1s ease-in-out infinite alternate; }
  .hn-dancer.twirl{ animation:hnTwirl .45s ease; }
  @keyframes hnSway{ from{ transform:rotate(-2deg); } to{ transform:rotate(2deg); } }
  @keyframes hnTwirl{ 0%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(-6deg) scale(1.04); } 100%{ transform:rotate(0) scale(1); } }
  .hn-lane{ position:relative; width:100%; height:44px; direction:ltr; overflow:hidden; border-radius:99px; background:#3E1A0A; box-shadow:inset 0 0 0 2px #F9A825; touch-action:none; }
  .hn-hit{ position:absolute; left:86%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px; display:grid; place-items:center; font-style:normal; border-radius:50%; box-shadow:0 0 0 3px #F9A825, 0 0 14px #F9A825; }
  .hn-note{ position:absolute; left:0; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFFFFF, #E53935 55%, #8E1B1B); }
  .hn-note.hit{ background:#F9A825; opacity:.7; } .hn-note.miss{ opacity:.2; }
  .hn-judge{ position:absolute; top:46%; left:50%; transform:translateX(-50%); font-size:1.4rem; font-weight:900; color:#FFFFFF; text-shadow:0 2px 8px rgba(0,0,0,.8); opacity:0; pointer-events:none; white-space:nowrap; }
  .hn-judge.on{ opacity:1; animation:pop .3s ease both; } .hn-judge.p{ color:#FFD54F; } .hn-judge.m{ color:#FFAB91; }
  .hn-hh{ transition:fill .3s ease; }
  .hn-hh.found{ fill:#FF2E7A; filter:drop-shadow(0 0 4px #FF2E7A); transform-box:fill-box; transform-origin:center; animation:heartbeat .8s ease; }
  .hn-hh.hintme{ fill:#FFEB3B; filter:drop-shadow(0 0 6px #FFEB3B); }
  .hn-miss{ fill:none; stroke:#FFFFFF; stroke-width:2; opacity:.8; animation:hnMiss .5s ease-out forwards; }
  @keyframes hnMiss{ to{ r:16; opacity:0; } }
  /* آخر ليلة */
  .hn-finale{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; text-align:center; }
  .hn-sunset{ width:100%; border-radius:16px; box-shadow:0 12px 26px -12px rgba(0,0,0,.6); }
  .hn-fheart{ transform-box:fill-box; transform-origin:center; animation:heartbeat 1.6s ease-in-out infinite; }
  .hn-fin-msg{ margin:0; min-height:5.2em; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.1rem; line-height:1.8; color:#5A1E12; }
  /* الجواز والألبوم */
  .hn-modal{ position:absolute; inset:0; z-index:8; display:grid; place-items:center; padding:12px; background:rgba(40,12,6,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .hn-modal[hidden]{ display:none; }
  .hn-mbox{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-height:100%; overflow-y:auto; padding:14px; border-radius:18px; background:#FFF6E6; animation:pop .3s ease both; }
  .hn-passport{ width:100%; border-radius:12px; overflow:hidden; box-shadow:0 0 0 2px #7A1E12; }
  .hn-pp-cover{ display:flex; flex-direction:column; align-items:center; padding:12px; background:linear-gradient(160deg,#8E1B1B,#5A0F0F); color:#FFE7A8; }
  .hn-pp-cover b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.4rem; } .hn-pp-cover small{ font-size:.62rem; letter-spacing:.14em; opacity:.85; }
  .hn-pp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:12px; background:repeating-linear-gradient(0deg, rgba(122,46,18,.05) 0 1px, transparent 1px 12px), #FFF9EE; }
  .hn-pp-slot{ aspect-ratio:1/1; display:grid; place-items:center; border-radius:10px; box-shadow:inset 0 0 0 1.5px dashed #E6C9A3; }
  .hn-pp-slot > span{ display:flex; flex-direction:column; align-items:center; font-size:1.6rem; opacity:.3; } .hn-pp-slot > span small{ font-size:.7rem; }
  .hn-alb-t{ font-size:1.1rem; color:#7A2E12; }
  .hn-album{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; }
  .hn-album .hn-polaroid{ width:100%; }
  .hn-album .hn-polaroid:nth-child(even){ transform:rotate(-3deg); }
  .hn-empty{ color:#9E6B4A; }
  .hn-stage .k-back{ color:#7A2E12; background:#FFFFFF; box-shadow:inset 0 0 0 1px #F2C79A, 0 4px 10px -6px rgba(122,46,18,.5); }
  .hn-stage .k-back:focus-visible{ outline:2px solid #C62828; }

  /* ================= آلة الدمى ================= */
  .clawpg{ background:radial-gradient(70% 45% at 50% 30%, rgba(255,90,150,.25), transparent 70%), radial-gradient(90% 60% at 50% 40%, #2A0F33, #12051A 65%, #06020A); }
  .cw-wrap{ position:relative; width:100%; max-width:400px; margin:4px auto 0; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .cw-machine{ width:100%; padding:10px 10px 12px; border-radius:26px 26px 18px 18px; background:linear-gradient(180deg,#FF7AA2,#C2185B 60%,#8E0F3C); box-shadow:0 0 0 3px #FFD58A, 0 0 30px rgba(255,122,162,.55), 0 26px 50px -20px rgba(0,0,0,.9), inset 0 2px 0 rgba(255,255,255,.4); }
  .cw-marquee{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:8px; padding:6px; border-radius:16px; background:#2A0F33; box-shadow:inset 0 0 0 2px #FFD58A; }
  .cw-marquee b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.5rem; color:#FFE7A8; text-shadow:0 0 8px #FF7AA2, 0 0 18px #FF2E7A; }
  .cw-bulbs{ display:flex; gap:9px; }
  .cw-bulbs i{ width:8px; height:8px; border-radius:50%; background:#FFD58A; box-shadow:0 0 8px #FFD58A; animation:cwBulb 1.4s ease-in-out infinite; animation-delay:var(--d); }
  @keyframes cwBulb{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  .cw-glass{ position:relative; border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 3px #FFD58A, 0 0 0 4px #5A0F2C; }
  .cw-svg{ display:block; width:100%; height:auto; }
  .cw-it{ transition:transform .3s ease; }
  .cw-fall.go{ animation:cwFall .7s cubic-bezier(.5,0,.8,.4) forwards; }
  @keyframes cwFall{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(160px); opacity:0; } }
  .cw-panel{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:8px 12px; border-radius:14px; background:#3A0F25; box-shadow:inset 0 2px 8px rgba(0,0,0,.5); }
  .cw-coins{ display:flex; align-items:center; gap:4px; color:#FFE7A8; } .cw-coins span{ font-size:1.3rem; } .cw-coins b{ font-size:1.3rem; } .cw-coins small{ font-size:.62rem; opacity:.8; max-width:4.5em; line-height:1.3; }
  .cw-ctl{ display:flex; gap:10px; }
  .cw-btn{ all:unset; box-sizing:border-box; cursor:pointer; width:56px; height:56px; display:grid; place-items:center; border-radius:50%; font-size:1.3rem; color:#FFFFFF; background:radial-gradient(circle at 35% 30%, #7FD1FF, #1E88E5 60%, #0D47A1); box-shadow:0 6px 0 #0A2E66, 0 10px 16px -6px rgba(0,0,0,.6); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; transition:transform .08s ease, box-shadow .08s ease; }
  .cw-btn.on, .cw-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #0A2E66, 0 4px 8px -4px rgba(0,0,0,.6); }
  .cw-btn.drop{ width:64px; height:64px; font-size:1.5rem; background:radial-gradient(circle at 35% 30%, #FFD58A, #FF5C8A 60%, #C2185B); box-shadow:0 6px 0 #7A0F35, 0 10px 16px -6px rgba(0,0,0,.6); }
  .cw-btn:disabled{ opacity:.45; cursor:default; }
  .cw-btn:focus-visible{ outline:2px solid #FFD58A; outline-offset:3px; }
  .cw-say{ width:100%; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,213,138,.3); }
  .cw-say.pop{ animation:pop .3s ease both; }
  .cw-say p{ margin:0; font-size:.85rem; font-weight:700; line-height:1.6; color:#FFE3EC; text-align:center; }
  .cw-links{ display:flex; gap:10px; }
  .cw-link{ all:unset; cursor:pointer; padding:8px 14px; border-radius:99px; font-size:.82rem; font-weight:800; color:#3A0A1C; background:linear-gradient(120deg,#FFD58A,#FF9DBB); -webkit-tap-highlight-color:transparent; }
  .cw-link b{ color:#C2185B; } .cw-link:focus-visible{ outline:2px solid #FFD58A; outline-offset:2px; }
  .cw-pop{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:12px; background:rgba(10,3,10,.65); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border-radius:20px; }
  .cw-pop[hidden]{ display:none; }
  .cw-pbox{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-height:100%; overflow-y:auto; padding:18px 14px; border-radius:20px; text-align:center; background:linear-gradient(160deg,#FFF7F9,#FCE4EC); color:#4A1830; box-shadow:0 20px 40px -14px rgba(0,0,0,.6); animation:kIn .6s cubic-bezier(.2,.7,.2,1) both; }
  .cw-prize{ display:flex; flex-direction:column; align-items:center; gap:4px; }
  .cw-plush, .cw-cap-open{ font-size:4.5rem; line-height:1; filter:drop-shadow(0 10px 16px rgba(194,24,91,.35)); animation:cwWin 1s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes cwWin{ from{ transform:scale(.2) rotate(-30deg); } to{ transform:none; } }
  .cw-prize small{ font-weight:800; color:#C2185B; } .cw-prize b{ font-size:1.1rem; } .cw-prize p{ margin:0; font-size:.8rem; color:#7A4A5A; }
  .cw-prize.cap b{ padding:8px 12px; border-radius:12px; border:2px dashed #FF7AA2; background:#FFFFFF; }
  .cw-pt{ font-size:1.1rem; color:#C2185B; }
  .cw-shelf{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; padding:10px; border-radius:12px; background:linear-gradient(180deg, transparent 0 78%, #C9A27E 78% 84%, transparent 84%), #FFFFFF; }
  .cw-shelf div{ display:flex; flex-direction:column; align-items:center; } .cw-shelf span{ font-size:2rem; } .cw-shelf small{ font-size:.62rem; color:#7A4A5A; }
  .cw-coupons{ display:flex; flex-direction:column; gap:8px; width:100%; }
  .cw-coupon{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 12px; border-radius:12px; background:#FFFFFF; border:2px dashed #FF7AA2; }
  .cw-coupon b{ font-size:.88rem; } .cw-coupon small{ font-size:.7rem; color:#2E7D32; font-weight:800; }
  .cw-coupon.used{ opacity:.55; border-style:solid; border-color:#BDBDBD; } .cw-coupon.used small{ color:#757575; }
  .cw-use{ all:unset; cursor:pointer; padding:6px 14px; border-radius:99px; font-size:.78rem; font-weight:800; color:#FFFFFF; background:#C2185B; }
  .cw-use:disabled{ opacity:.7; }
  .cw-empty{ margin:0; color:#7A4A5A; }
  .cw-pbox .k-back{ color:#7A1E44; background:#FFFFFF; box-shadow:inset 0 0 0 1px #F3B6C9; }
  .cw-ctl{ direction:ltr; }

  /* --- كلمة الحب اليومية --- */
  .wordpg{ background:radial-gradient(80% 45% at 50% 16%, rgba(255,110,160,.24), transparent 70%), radial-gradient(130% 80% at 50% 100%, #3E1033, #170717 60%, #08030A); }
  .wd-wrap{ --t:clamp(30px, min(13.4vw, calc((100vh - 470px) / 6)), 58px); --t:clamp(30px, min(13.4vw, calc((100dvh - 470px) / 6)), 58px); position:relative; z-index:2; width:100%; max-width:420px; margin:2px auto 0; display:flex; flex-direction:column; align-items:center; gap:9px; direction:rtl; }
  .wordpg .p2-hint b{ color:#FFD58A; }
  .wd-legend{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; font-size:.72rem; font-weight:700; color:rgba(255,220,230,.72); }
  .wd-legend i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-inline-end:5px; vertical-align:-1px; }
  .wd-legend i.g, .wd-tile.g, .wd-key.g{ background:linear-gradient(160deg,#5BD49A,#239060); }
  .wd-legend i.y, .wd-tile.y, .wd-key.y{ background:linear-gradient(160deg,#FFDB8F,#E39E2F); }
  .wd-legend i.b{ background:#4A3442; }
  .wd-grid{ display:flex; flex-direction:column; gap:6px; perspective:600px; }
  .wd-row{ display:flex; gap:6px; direction:rtl; }
  .wd-tile{ width:var(--t); height:var(--t); display:grid; place-items:center; border-radius:12px; font-family:'Tajawal','Segoe UI',sans-serif; font-weight:800; font-size:calc(var(--t)*.5); line-height:1; color:#FFF3F7; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1.5px rgba(255,213,138,.16); transition:box-shadow .2s; }
  .wd-tile.fill{ box-shadow:inset 0 0 0 2px rgba(255,157,187,.75), 0 0 14px -4px rgba(255,120,170,.6); animation:wdPop .14s ease; }
  .wd-tile.flip{ animation:wdFlip .4s ease-in-out both; }
  .wd-tile.g{ color:#fff; box-shadow:0 0 16px -2px rgba(91,212,154,.55); text-shadow:0 1px 2px rgba(0,60,30,.35); }
  .wd-tile.y{ color:#3A1A05; box-shadow:0 0 16px -2px rgba(255,200,110,.55); }
  .wd-tile.b{ color:rgba(255,240,245,.75); background:#4A3442; box-shadow:none; }
  .wd-row.shake{ animation:wdShake .42s ease; }
  .wd-row.win .wd-tile{ animation:wdJump .55s cubic-bezier(.3,1.6,.5,1) both; }
  .wd-row.win .wd-tile:nth-child(2){ animation-delay:.08s; } .wd-row.win .wd-tile:nth-child(3){ animation-delay:.16s; } .wd-row.win .wd-tile:nth-child(4){ animation-delay:.24s; } .wd-row.win .wd-tile:nth-child(5){ animation-delay:.32s; }
  .wd-msg{ min-height:1.5em; margin:0; padding:0 8px; font-size:.92rem; font-weight:700; line-height:1.5; color:#FFD9E4; }
  .wd-msg.pop{ animation:wdMsg .35s ease; }
  .wd-kb{ width:100%; display:flex; flex-direction:column; gap:6px; direction:rtl; }
  .wd-krow{ display:flex; gap:4px; justify-content:center; }
  .wd-key{ all:unset; box-sizing:border-box; flex:1 1 0; max-width:40px; min-width:0; height:min(6.4vh, 52px); min-height:42px; display:grid; place-items:center; border-radius:9px; font-family:'Tajawal','Segoe UI',sans-serif; font-size:1.08rem; font-weight:800; color:#FFE9F0; background:rgba(255,255,255,.13); box-shadow:inset 0 -2px 0 rgba(0,0,0,.28); cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background .3s, color .3s, transform .08s; }
  .wd-key:active{ transform:scale(.9); }
  .wd-key.wide{ flex:1.7 1 0; max-width:70px; font-size:.86rem; }
  .wd-key[data-k="⏎"]{ color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); }
  .wd-key.g{ color:#fff; } .wd-key.y{ color:#3A1A05; }
  .wd-key.b{ color:rgba(255,233,240,.32); background:rgba(255,255,255,.04); box-shadow:none; }
  .wd-end{ width:100%; }
  .wd-card{ padding:14px 14px 16px; border-radius:22px; text-align:center; color:#5A1A30; background:linear-gradient(170deg,#FFF6F9,#FFE1EA); box-shadow:0 0 0 2px rgba(255,213,138,.7), 0 22px 50px -18px rgba(255,90,140,.75); }
  .wd-card.in{ animation:wdCard .65s cubic-bezier(.2,.8,.2,1.15) both; }
  .wd-ans{ display:block; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:2.3rem; line-height:1.3; color:#C2185B; }
  .wd-love{ margin:2px 0 12px; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:1.22rem; line-height:1.6; color:#8A1C3F; }
  .wd-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
  .wd-stats div{ padding:6px 2px; border-radius:12px; background:rgba(194,24,91,.07); }
  .wd-stats b{ display:block; font-size:1.25rem; color:#8A1C3F; }
  .wd-stats small{ font-size:.66rem; font-weight:700; color:#9A5A6A; }
  .wd-dist{ display:flex; flex-direction:column; gap:3px; margin:0 6px 8px; }
  .wd-dist div{ display:flex; align-items:center; gap:6px; font-size:.74rem; font-weight:800; }
  .wd-dist span{ width:12px; color:#9A5A6A; }
  .wd-dist i{ font-style:normal; box-sizing:border-box; padding:1px 7px; border-radius:5px; text-align:left; color:#fff; background:#B79AA3; transition:width .6s ease; }
  .wd-dist i.me{ background:linear-gradient(90deg,#5BD49A,#239060); }
  .wd-next{ display:block; margin-bottom:10px; font-size:.78rem; font-weight:700; color:#9A5A6A; }
  @keyframes wdPop{ 0%{ transform:scale(.86); } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
  @keyframes wdFlip{ 0%{ transform:rotateX(0); } 50%{ transform:rotateX(90deg); } 100%{ transform:rotateX(0); } }
  @keyframes wdShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px); } 40%{ transform:translateX(7px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(3px); } }
  @keyframes wdJump{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-16px) scale(1.06); } 70%{ transform:translateY(2px); } }
  @keyframes wdMsg{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
  @keyframes wdCard{ from{ opacity:0; transform:translateY(16px) scale(.94); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){ .wd-tile, .wd-row, .wd-card, .wd-msg{ animation:none !important; } }
  .wd-dict{ margin:0 4px 10px; }
  .wd-dict small{ display:block; margin-bottom:5px; font-size:.74rem; font-weight:800; color:#9A5A6A; }
  .wd-dict p{ margin:0; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
  .wd-dict i{ font-style:normal; padding:3px 10px; border-radius:99px; font-size:.82rem; font-weight:800; color:#8A1C3F; background:#fff; box-shadow:0 0 0 1px rgba(194,24,91,.22); }
  .wd-next b{ color:#C2185B; }
  @media (max-height:740px){
    .wordpg .p2-title{ font-size:2rem; line-height:1.2; }
    .wordpg .wd-legend{ display:none; }
    .wd-wrap{ gap:7px; --t:clamp(30px, min(13.4vw, calc((100vh - 410px) / 6)), 58px); --t:clamp(30px, min(13.4vw, calc((100dvh - 410px) / 6)), 58px); }
    .wd-key{ min-height:40px; height:40px; }
  }

  /* --- البوابة: مين معانا؟ --- */
  html.gate-wait{ background:#12050C; }
  html.gate-wait body > *:not(.bgate){ visibility:hidden !important; }
  .bgate{ position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; overflow-y:auto; padding:calc(env(safe-area-inset-top,0px) + 24px) 16px calc(env(safe-area-inset-bottom,0px) + 24px); text-align:center; direction:rtl; color:#FFE9F0; font-family:'Tajawal','Segoe UI',Tahoma,sans-serif; background:radial-gradient(90% 55% at 50% -5%, #5E1739 0%, transparent 70%), radial-gradient(80% 50% at 50% 105%, #3D0E2C 0%, transparent 70%), #12050C; color-scheme:dark; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; -webkit-tap-highlight-color:transparent; }
  .bgate.on{ opacity:1; visibility:visible; transition:opacity .45s ease; }
  .bg-sky{ position:fixed; inset:0; overflow:hidden; pointer-events:none; }
  .bg-sky i{ position:absolute; bottom:-30px; font-style:normal; font-size:var(--s); color:#FF8FB1; opacity:0; animation:bgFloat var(--d) linear var(--w) infinite; }
  .bg-box{ position:relative; width:100%; max-width:380px; padding:24px 20px 20px; border-radius:28px; background:linear-gradient(170deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px rgba(255,213,138,.22), 0 30px 80px -30px rgba(0,0,0,.85), 0 0 70px -24px rgba(255,90,140,.45); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
  .bg-box.shake{ animation:bgShake .45s ease; }
  .bg-crest{ width:88px; height:88px; margin:-2px auto 6px; filter:drop-shadow(0 8px 20px rgba(255,90,140,.45)); animation:bgBeat 2.6s ease-in-out infinite; }
  .bg-crest svg{ display:block; width:100%; height:100%; }
  .bg-step{ animation:bgIn .45s cubic-bezier(.2,.8,.2,1) both; }
  .bg-t{ margin:0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-weight:700; font-size:2.3rem; line-height:1.3; color:#FFE3EC; text-shadow:0 0 18px rgba(255,90,140,.6); }
  .bg-s{ margin:4px 0 0; font-size:.95rem; line-height:1.6; color:rgba(255,227,236,.72); }
  .bg-who{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
  .bg-pick{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 8px 14px; border-radius:22px; background:linear-gradient(170deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px rgba(255,213,138,.25); transition:transform .18s ease, box-shadow .25s ease, background .25s ease; }
  .bg-pick:hover, .bg-pick:focus-visible{ background:linear-gradient(170deg, rgba(255,122,162,.24), rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1.5px #FFD58A, 0 14px 30px -14px rgba(255,120,170,.85); }
  .bg-pick:active{ transform:scale(.96); }
  .bg-pick b{ font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.55rem; line-height:1.2; color:#FFE9F0; }
  .bg-pick small{ font-size:.76rem; color:rgba(255,227,236,.6); }
  .bg-av{ display:grid; place-items:center; width:74px; height:74px; border-radius:50%; font-size:2.6rem; line-height:1; background:radial-gradient(circle at 35% 30%, #FFF4F8, #FFC9DA 60%, #F48FB1); box-shadow:0 0 0 3px rgba(255,213,138,.65), 0 10px 24px -8px rgba(255,90,140,.75); }
  .bg-pick[data-who="duy"] .bg-av, .bg-av.big[data-who="duy"]{ background:radial-gradient(circle at 35% 30%, #F5F2FF, #D3CAF6 60%, #9F8EE2); box-shadow:0 0 0 3px rgba(255,213,138,.65), 0 10px 24px -8px rgba(140,110,230,.75); }
  .bg-av.big{ width:82px; height:82px; font-size:2.9rem; margin-top:2px; }
  .bg-form{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .bg-back{ all:unset; cursor:pointer; align-self:flex-start; display:inline-flex; align-items:center; gap:2px; margin:-8px -6px -4px; padding:6px 10px 6px 12px; border-radius:99px; font-size:.82rem; font-weight:700; color:rgba(255,227,236,.72); }
  .bg-back svg{ width:16px; height:16px; }
  .bg-back:hover, .bg-back:focus-visible{ color:#FFE9F0; background:rgba(255,255,255,.08); }
  .bg-hi{ margin:2px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:1.9rem; line-height:1.3; color:#FFE3EC; }
  .bg-s2{ margin:-6px 0 4px; font-size:.9rem; line-height:1.6; color:rgba(255,227,236,.72); }
  .bg-field{ position:relative; width:100%; }
  .bg-field input{ box-sizing:border-box; width:100%; height:54px; padding:0 52px; border:none; border-radius:16px; outline:none; font:700 1.05rem 'Tajawal','Segoe UI',sans-serif; letter-spacing:.03em; text-align:center; color:#3A0A1C; background:#FFF7FA; box-shadow:0 10px 26px -14px rgba(0,0,0,.7); transition:box-shadow .2s ease; }
  .bg-field input:focus{ box-shadow:0 0 0 3px #FFD58A, 0 10px 26px -14px rgba(0,0,0,.7); }
  .bg-eye{ all:unset; cursor:pointer; position:absolute; top:50%; inset-inline-end:8px; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#8A4A60; transform:translateY(-50%); }
  .bg-eye svg{ width:22px; height:22px; }
  .bg-eye:hover, .bg-eye:focus-visible{ color:#C2185B; background:rgba(194,24,91,.08); }
  .bg-hint{ margin:0; padding:8px 14px; border-radius:12px; font-size:.86rem; line-height:1.6; color:#FFE3A3; background:rgba(255,213,138,.1); box-shadow:inset 0 0 0 1px rgba(255,213,138,.25); }
  .bg-err{ min-height:1.4em; margin:-2px 0 0; font-size:.88rem; font-weight:700; line-height:1.5; color:#FFA3BA; }
  .bg-go{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; width:100%; height:52px; display:grid; place-items:center; border-radius:16px; font-size:1.06rem; font-weight:800; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); box-shadow:0 12px 30px -12px rgba(255,100,150,.9); transition:transform .15s ease, opacity .2s ease; }
  .bg-go:active{ transform:scale(.97); }
  .bg-go:focus-visible{ outline:2px solid #FFE3A3; outline-offset:3px; }
  .bg-go.busy{ opacity:.8; pointer-events:none; }
  .bg-go.busy span{ visibility:hidden; }
  .bg-go.busy::after{ content:""; position:absolute; width:22px; height:22px; border-radius:50%; border:3px solid rgba(42,7,20,.25); border-top-color:#2A0714; animation:bgSpin .8s linear infinite; }
  .bg-keep{ margin:0; font-size:.74rem; line-height:1.6; color:rgba(255,227,236,.5); }
  .bg-hide{ position:absolute !important; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; opacity:0; pointer-events:none; }
  .bg-wait{ margin:12px 0 8px; font-size:1rem; color:rgba(255,227,236,.7); }
  .bg-wait span{ animation:bgDot 1.2s ease-in-out infinite; }
  .bg-wait span:nth-child(2){ animation-delay:.2s; } .bg-wait span:nth-child(3){ animation-delay:.4s; }
  .bg-okh{ font-size:3.4rem; line-height:1.2; animation:bgPop .7s cubic-bezier(.2,1.6,.4,1) both; }
  .bg-okt{ margin:4px 0 0; font-family:'Aref Ruqaa','Traditional Arabic',serif; font-size:2rem; line-height:1.3; color:#FFE3EC; }
  @keyframes bgFloat{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 10%,85%{ opacity:var(--o); } 100%{ transform:translateY(-110vh) rotate(var(--r)); opacity:0; } }
  @keyframes bgBeat{ 0%,48%,100%{ transform:scale(1); } 12%{ transform:scale(1.07); } 36%{ transform:scale(1.04); } }
  @keyframes bgIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  @keyframes bgShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-9px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(3px); } }
  @keyframes bgSpin{ to{ transform:rotate(360deg); } }
  @keyframes bgDot{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }
  @keyframes bgPop{ from{ transform:scale(.3); opacity:0; } to{ transform:none; opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .bgate, .bgate *{ animation:none !important; transition:none !important; } }

  /* ضيو يتفرّج على موقعها: لسان «وضع المعاينة» */
  .bg-peek{ position:fixed; z-index:2147482000; top:50%; left:0; transform:translateY(-50%); direction:rtl; font-family:'Tajawal','Segoe UI',sans-serif; }
  .bg-peek-tab{ all:unset; cursor:pointer; display:grid; place-items:center; width:34px; height:46px; border-radius:0 14px 14px 0; font-size:1.1rem; background:rgba(30,8,20,.86); box-shadow:0 0 0 1px rgba(255,213,138,.45), 0 8px 20px -8px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .bg-peek-card{ position:absolute; top:50%; left:42px; width:230px; padding:12px 14px; border-radius:16px; text-align:right; color:#FFE9F0; background:rgba(30,8,20,.94); box-shadow:0 0 0 1px rgba(255,213,138,.4), 0 16px 36px -12px rgba(0,0,0,.8); transform:translateY(-50%); }
  .bg-peek-card b{ display:block; font-size:.9rem; color:#FFD58A; }
  .bg-peek-card p{ margin:4px 0 10px; font-size:.78rem; line-height:1.6; color:rgba(255,227,236,.8); }
  .bg-peek-card a{ display:block; padding:8px 12px; border-radius:12px; font-size:.82rem; font-weight:800; text-align:center; text-decoration:none; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); }

  /* رسايل ضيو الفورية داخل «من حبيبك ضيو» */
  .duy-note.live{ background:var(--bg-2); background:linear-gradient(160deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 82%, #FFD58A)); box-shadow:inset 0 0 0 1.5px rgba(217,165,91,.75), 0 8px 22px -14px rgba(217,165,91,.8); }
  .duy-note.live.unread{ box-shadow:inset 0 0 0 2px #D9A55B, 0 0 18px rgba(255,213,138,.45); }
  .duy-note.live span{ font-weight:700; color:var(--gold); }

  /* --- مساحتنا --- */
  .uspg{ background:radial-gradient(90% 45% at 50% 0%, rgba(255,110,160,.22), transparent 70%), radial-gradient(120% 70% at 50% 100%, #3A1240, #1A0716 60%, #0A0308); }
  .uspg .us-root{ position:relative; z-index:2; width:100%; max-width:440px; margin:4px auto 0; }
  .us-chip{ all:unset; box-sizing:border-box; position:fixed; z-index:26; top:calc(env(safe-area-inset-top,0px) + 14px); left:50%; max-width:calc(100vw - 150px); padding:7px 14px; border-radius:99px; cursor:pointer; font:800 .82rem/1.3 'Tajawal','Segoe UI',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); box-shadow:0 10px 26px -10px rgba(255,100,150,.9), 0 0 0 2px rgba(255,255,255,.35); transform:translateX(-50%); animation:usChipIn .6s cubic-bezier(.2,1.4,.4,1) both, usChipGlow 2.4s ease-in-out 1s infinite; -webkit-tap-highlight-color:transparent; }
  .us-chip[hidden]{ display:none; }
  body:has(.page2.on) .us-chip, body:has(.duy-panel.on) .us-chip, html.gate-wait .us-chip{ display:none; }
  @keyframes usChipIn{ from{ opacity:0; transform:translate(-50%,-14px) scale(.9); } to{ opacity:1; transform:translate(-50%,0); } }
  @keyframes usChipGlow{ 0%,100%{ box-shadow:0 10px 26px -10px rgba(255,100,150,.9), 0 0 0 2px rgba(255,255,255,.35); } 50%{ box-shadow:0 10px 30px -8px rgba(255,100,150,1), 0 0 0 4px rgba(255,213,138,.5); } }
  @media (prefers-reduced-motion: reduce){ .us-chip{ animation:none; } }

  /* تنبيه تفعيل الإشعارات (بدونها ما يوصلها اتصال ضيو ولا رسايله) */
  .push-nudge{ position:fixed; z-index:57; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 82px); display:flex; align-items:center; gap:8px; width:max-content; max-width:calc(100vw - 32px); padding:9px 10px 9px 14px; border-radius:18px; direction:rtl; font:700 .84rem/1.5 'Tajawal','Segoe UI',sans-serif; color:#2A0714; background:linear-gradient(120deg,#FFE3EC,#FFD58A); box-shadow:0 14px 34px -12px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.5); transform:translateX(-50%); animation:usChipIn .6s cubic-bezier(.2,1.4,.4,1) both; }
  .push-nudge[hidden]{ display:none; }
  .push-nudge button{ all:unset; cursor:pointer; flex-shrink:0; padding:6px 12px; border-radius:99px; font-weight:800; color:#fff; background:linear-gradient(120deg,#E2245A,#FF7AA2); }
  .push-nudge button[data-x]{ padding:6px 8px; color:#7A3A4E; background:transparent; }
  body:has(.page2.on) .push-nudge, html.gate-wait .push-nudge{ display:none; }
  .push-how{ position:fixed; inset:0; z-index:2147482700; display:grid; place-items:center; padding:20px; background:rgba(8,2,6,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); direction:rtl; }
  .push-how-box{ width:100%; max-width:360px; padding:20px 18px 16px; border-radius:22px; text-align:right; font-family:'Tajawal','Segoe UI',sans-serif; color:#FFE9F0; background:#24091A; box-shadow:inset 0 0 0 1px rgba(255,213,138,.25), 0 30px 70px -20px rgba(0,0,0,.9); }
  .push-how-box > b{ display:block; margin-bottom:10px; font-size:1.05rem; }
  .push-how-box ol{ margin:0; padding-inline-start:20px; display:grid; gap:8px; font-size:.92rem; line-height:1.7; }
  .push-how-box .ic{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.12); }
  .push-how-box p{ margin:12px 0 14px; font-size:.84rem; line-height:1.7; color:rgba(255,227,236,.75); }
  .push-how-box button{ all:unset; cursor:pointer; display:block; width:100%; padding:11px 0; border-radius:14px; text-align:center; font-weight:800; color:#2A0714; background:linear-gradient(120deg,#FF7AA2,#FFD58A); }

  /* الخلفية مغطّاة بلعبة أو صفحة: نوقف الحركات اللي وراها (توفّر بطارية وما يسخن الجوال) */
  .covered .aurora::before, .covered .aurora::after, .covered .scene, .covered .scene *, .covered .bell, .covered .bell *, .covered .duy-bell, .covered .duy-bell *{ animation-play-state:paused !important; }
  /* نافذة «إحساس» وهي مسكّرة: لا تتحرك ولا تنرسم */
  .fl-ov:not(.on){ visibility:hidden; }
  .fl-ov:not(.on), .fl-ov:not(.on) *{ animation-play-state:paused !important; }
  /* لهب الفانوس محفوظ كقالب مخفي: يتحرك بس لما صفحة الفانوس مفتوحة (كان يجبر الصفحة تعيد ترتيبها كل إطار) */
  html:not(.lantern-on) .ln-flame{ animation:none !important; }