/* v22 — مشهد العلم المرفرف (من قسم الهدايا في تطبيق «تواصل») بألوان Jokt */
.tlg-flag{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden;
  background:radial-gradient(90% 60% at 50% 42%,rgba(70,30,140,.88),rgba(14,8,36,.95));backdrop-filter:blur(3px);animation:tfIn .45s ease-out both}
.tlg-flag.out{animation:tfOut .6s ease-in forwards}
@keyframes tfIn{from{opacity:0}to{opacity:1}}
@keyframes tfOut{to{opacity:0}}
.tf-rays{position:absolute;left:50%;top:42%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;opacity:.22;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,170,.55) 0 7deg,transparent 7deg 20deg);animation:tfSpin 14s linear infinite}
@keyframes tfSpin{to{transform:rotate(360deg)}}
.tf-stage{position:relative;display:flex;align-items:flex-start;animation:tfRise .8s cubic-bezier(.2,1.3,.4,1) both}
@keyframes tfRise{from{transform:translateY(60px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.tf-pole{width:10px;height:calc(min(80vw,420px)*.75 + 120px);border-radius:6px;margin-top:-14px;position:relative;
  background:linear-gradient(90deg,#8a6a1f,#f8e08e 45%,#b8892c);box-shadow:0 0 14px rgba(250,204,21,.45)}
.tf-pole span{position:absolute;top:-16px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c9,#f2c440 45%,#a8761a)}
.tf-cloth{--w:min(80vw,420px);width:var(--w);height:calc(var(--w)*.75);display:flex;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.tf-cloth i{flex:1;height:100%;position:relative;background-size:calc(var(--n)*100%) 100%;background-repeat:no-repeat;
  animation:tfWave 1.5s ease-in-out infinite;animation-delay:var(--d)}
.tf-cloth i::after{content:'';position:absolute;inset:0;background:#000;opacity:0;animation:tfShade 1.5s ease-in-out infinite;animation-delay:var(--d)}
.tf-cloth i:first-child{border-radius:3px 0 0 3px}
@keyframes tfWave{0%,100%{transform:translateY(calc(var(--a) * -1))}50%{transform:translateY(var(--a))}}
@keyframes tfShade{0%,100%{opacity:0}25%{opacity:.08}50%{opacity:.24}75%{opacity:.06}}
.tf-txt{position:relative;text-align:center;color:#fff;padding:0 22px;animation:tfRise .8s .25s cubic-bezier(.2,1.3,.4,1) both}
.tf-txt b{display:block;font-size:22px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.tf-txt small{display:block;margin-top:4px;font-size:15px;font-weight:700;color:#fde68a}
.tf-sp{position:absolute;bottom:-12px;width:7px;height:12px;border-radius:2px;opacity:.85;animation:tfUp 3s linear infinite;
  background:linear-gradient(#fde68a,#f59e0b)}
.tf-sp:nth-child(3n){background:linear-gradient(#a7f3d0,#10b981)}
.tf-sp:nth-child(3n+1){background:linear-gradient(#fff,#e5e7eb)}
@keyframes tfUp{to{transform:translateY(-110vh) rotate(540deg);opacity:0}}
/* شارة العدد فوق مشاهد الهدايا (كل الأنواع) */
.tlg-xn{position:absolute;top:calc(env(safe-area-inset-top) + 18%);left:50%;transform:translateX(-50%);z-index:5;
  font-size:44px;font-weight:900;color:#fde047;font-style:italic;letter-spacing:1px;
  text-shadow:0 0 12px rgba(236,72,153,.9),0 3px 0 #9d174d,0 6px 18px rgba(0,0,0,.6);pointer-events:none}
.tlg-xn.pop{animation:tfX .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes tfX{from{transform:translateX(-50%) scale(2.2);opacity:.3}to{transform:translateX(-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.tf-cloth i,.tf-cloth i::after,.tf-rays,.tf-sp{animation:none}}