/* =====================================================================
   جولة 59 — اشتراك «التصريح الأحمر»: صفحته، والإطار الأحمر للقائمة، والاسم المميز.
   شكلي بس. يحترم «تقليل الحركة»، ويشتغل بالجوال بالعرض والطول بدون تمرير جانبي.
   ===================================================================== */
:root { --rp-name: #ff3b4a; --rp-red: #c8141f; --rp-deep: #3a060b }

/* ---------- الاسم والشارة (البروفايل · الغرف · النتائج · الشريط) ---------- */
.rp-name { color: var(--rp-name) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--rp-name) 55%, transparent) }
.rp-noglow .rp-name { text-shadow: none }
.rp-badge { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 1px 7px 1px 6px; font-size: .68rem; font-weight: 900; line-height: 1.5;
  color: #fff; background: linear-gradient(180deg, #d4202c, #7d0911); border: 1px solid #ff6b7466; vertical-align: middle; white-space: nowrap;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); letter-spacing: .2px }
.rp-badge::before { content: ''; width: 6px; height: 6px; background: #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); flex: none }

/* ---------- البروفايل المميز: خلفية متحركة + إطار الأيقونة ---------- */
.pf-hero.rp .pf-banner { border-color: color-mix(in srgb, var(--rp-name) 60%, transparent); box-shadow: 0 0 0 1px #000, 0 0 26px color-mix(in srgb, var(--rp-name) 30%, transparent) }
.pf-hero.rp .pf-av { border-color: var(--rp-name); box-shadow: 0 0 0 2px #000, 0 0 18px color-mix(in srgb, var(--rp-name) 55%, transparent) }
.pf-hero.rp .pf-banner { position: relative; overflow: hidden }
.rp-hero-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 20% 120%, color-mix(in srgb, var(--rp-name) 35%, transparent), transparent 60%),
              repeating-linear-gradient(0deg, #ff1e2e0d 0 2px, transparent 2px 5px) }
.rp-hero-fx::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, var(--rp-red) 0 9px, #0a0b0f 9px 18px) top / 100% 4px no-repeat, repeating-linear-gradient(-45deg, var(--rp-red) 0 9px, #0a0b0f 9px 18px) bottom / 100% 4px no-repeat; opacity: .9 }
.rp-hero-fx i { position: absolute; width: 3px; height: 3px; background: #ff5a63; border-radius: 50%; bottom: -6px; box-shadow: 0 0 6px #ff3b4a; animation: rpEmber 5.5s linear infinite }
.rp-hero-fx i:nth-child(1) { left: 18% } .rp-hero-fx i:nth-child(2) { left: 52%; animation-delay: 1.8s; animation-duration: 6.5s } .rp-hero-fx i:nth-child(3) { left: 81%; animation-delay: 3.4s }
.rp-hero-fx::after { content: ''; position: absolute; inset-inline: 0; height: 40%; top: -40%; background: linear-gradient(180deg, transparent, #ff2b3a1f, transparent); animation: rpScan 4.5s linear infinite }
@keyframes rpEmber { from { transform: translateY(0); opacity: 0 } 15% { opacity: 1 } to { transform: translateY(-300px); opacity: 0 } }
@keyframes rpScan { to { top: 100% } }

/* ---------- الإطار الأحمر للقائمة الرئيسية: زوايا تحذير حمراء وخط متوهج ---------- */
.rp-mframe { position: absolute; inset: 6px; pointer-events: none; z-index: 3;
  border: 2px solid color-mix(in srgb, var(--rp-name) 55%, transparent);
  box-shadow: inset 0 0 0 1px #000a, inset 0 0 44px color-mix(in srgb, var(--rp-name) 22%, transparent), 0 0 22px color-mix(in srgb, var(--rp-name) 18%, transparent) }
.rp-mframe .rp-c { position: absolute; width: 64px; height: 64px; --hz: repeating-linear-gradient(-45deg, var(--rp-red) 0 7px, #0a0b0f 7px 14px) }
.rp-mframe .rp-c::before, .rp-mframe .rp-c::after { content: ''; position: absolute; background: var(--hz); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rp-name) 70%, transparent)) }
.rp-mframe .rp-c::before { width: 100%; height: 6px } .rp-mframe .rp-c::after { width: 6px; height: 100% }
.rp-mframe .tl { top: -4px; left: -4px } .rp-mframe .tl::before, .rp-mframe .tl::after { top: 0; left: 0 }
.rp-mframe .tr { top: -4px; right: -4px } .rp-mframe .tr::before, .rp-mframe .tr::after { top: 0; right: 0 }
.rp-mframe .bl { bottom: -4px; left: -4px } .rp-mframe .bl::before, .rp-mframe .bl::after { bottom: 0; left: 0 }
.rp-mframe .br { bottom: -4px; right: -4px } .rp-mframe .br::before, .rp-mframe .br::after { bottom: 0; right: 0 }
.rp-mframe .rp-e { position: absolute; left: 50%; width: min(38%, 320px); height: 3px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--rp-name), transparent); filter: drop-shadow(0 0 6px var(--rp-name)) }
.rp-mframe .rp-e.t { top: -2px } .rp-mframe .rp-e.b { bottom: -2px }
body:not(.rp-noanim) .rp-mframe { animation: rpBreathe 4s ease-in-out infinite }
body:not(.rp-noanim) .rp-mframe .rp-e { animation: rpSweep 6s ease-in-out infinite }
@keyframes rpBreathe { 50% { box-shadow: inset 0 0 0 1px #000a, inset 0 0 60px color-mix(in srgb, var(--rp-name) 30%, transparent), 0 0 30px color-mix(in srgb, var(--rp-name) 24%, transparent) } }
@keyframes rpSweep { 0%, 100% { left: 30% } 50% { left: 70% } }
.rp-noglow .rp-mframe { box-shadow: inset 0 0 0 1px #000a } .rp-noglow .rp-mframe .rp-c::before, .rp-noglow .rp-mframe .rp-c::after, .rp-noglow .rp-mframe .rp-e { filter: none }
/* زر القائمة */
/* جولة 63: زر «التصريح الأحمر» — بطاقة صلاحية فخمة: معدن أحمر، ختم متوهّج، لمعة تمر، شريط خطر، وجمر يطير */
.tile.t-red { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  border: 1px solid #ff3b4a8c !important; background: linear-gradient(115deg, #160205 0%, #36060d 42%, #6a0b17 78%, #8e1020 100%) !important;
  box-shadow: inset 0 0 0 1px #000c, inset 0 0 26px #ff1f3a26, 0 0 0 1px #ff3b4a22, 0 6px 22px #ff1f3a26 !important; animation: rpTPulse 3.6s ease-in-out infinite }
.tile.t-red > * { position: relative; z-index: 1 }
.tile.t-red > .t-ic { color: #fff !important; background: radial-gradient(circle at 50% 38%, #ff4d5a 0, #b0101e 55%, #4d050c 100%) !important; border-inline-end-color: #ff6b7466 !important; box-shadow: inset 0 0 12px #0008 }
.tile.t-red > .t-ic svg { width: 24px !important; height: 24px !important; color: #fff !important; filter: drop-shadow(0 0 5px #ffb3ba) drop-shadow(0 0 10px #ff3b4a); animation: rpTSeal 3.6s ease-in-out infinite }
.tile.t-red > b { color: #fff; font-weight: 900; letter-spacing: .3px; text-shadow: 0 0 12px #ff3b4acc, 0 1px 0 #000 }
.tile.t-red::after { background: linear-gradient(90deg, #ff3b4a, #ffd0d4, #ff3b4a) !important }
.tile.t-red:hover { border-color: #ff6b74 !important; box-shadow: inset 0 0 0 1px #000c, inset 0 0 34px #ff1f3a40, 0 0 0 1px #ff3b4a55, 0 10px 30px #ff1f3a44 !important }
.rp-tfx { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden }
.rp-tshine { position: absolute; top: -60%; bottom: -60%; width: 34%; inset-inline-start: -50%; background: linear-gradient(100deg, transparent, #ffffff38, transparent); transform: skewX(-22deg); animation: rpTShine 5s ease-in-out infinite }
.rp-thz { position: absolute; inset-block: 0; inset-inline-end: 0; width: 9px; background: repeating-linear-gradient(-45deg, #ff3b4a 0 5px, #120104 5px 10px); opacity: .8; box-shadow: -2px 0 8px #ff1f3a55 }
.rp-tcn { position: absolute; width: 9px; height: 9px; border: 2px solid #ff9aa2; opacity: .75 }
.rp-tcn.a { top: 4px; inset-inline-start: 56px; border-inline-end: 0; border-bottom: 0 } .rp-tcn.b { bottom: 4px; inset-inline-end: 14px; border-inline-start: 0; border-top: 0 }
.rp-tember { position: absolute; bottom: -4px; inset-inline-start: 40%; width: 3px; height: 3px; border-radius: 50%; background: #ffb070; box-shadow: 0 0 6px #ff5a1f; opacity: 0; animation: rpTEmber 3.8s linear infinite }
.rp-tember.e2 { inset-inline-start: 62%; animation-delay: 1.3s } .rp-tember.e3 { inset-inline-start: 80%; animation-delay: 2.5s }
.rp-tchip { position: absolute !important; top: 4px; inset-inline-end: 15px; z-index: 2 !important; font-style: normal; font-size: .6rem; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 99px; background: #000a; color: #ffd0d4; border: 1px solid #ff3b4a88 }
.rp-tchip.on { color: #b9ff8a; border-color: #6fd35a88 }
@media (max-height: 520px) { .rp-tcn { display: none } .rp-tchip { top: 50%; transform: translateY(-50%); inset-inline-end: 14px } }
@keyframes rpTPulse { 50% { box-shadow: inset 0 0 0 1px #000c, inset 0 0 34px #ff1f3a3a, 0 0 0 1px #ff3b4a44, 0 8px 30px #ff1f3a44 } }
@keyframes rpTSeal { 50% { transform: scale(1.08); filter: drop-shadow(0 0 7px #ffd0d4) drop-shadow(0 0 16px #ff3b4a) } }
@keyframes rpTShine { 0%, 62% { inset-inline-start: -50% } 100% { inset-inline-start: 130% } }
@keyframes rpTEmber { 0% { opacity: 0; transform: translateY(0) } 15% { opacity: 1 } 100% { opacity: 0; transform: translate(-10px, -70px) } }
@media (prefers-reduced-motion: reduce) { .tile.t-red, .tile.t-red > .t-ic svg, .rp-tshine, .rp-tember { animation: none !important } }

/* ---------- تنبيه قبل الانتهاء (مرة وحدة) ---------- */
.rp-warn { position: fixed; z-index: 60; inset-inline: 12px; bottom: calc(14px + var(--safe-b, 0px)); margin-inline: auto; max-width: 520px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: linear-gradient(180deg, #1e222c, #0c0e13); border: 1px solid #ff3b4a55; border-top: 3px solid var(--rp-red); box-shadow: 0 16px 40px #000c; animation: fzPop .2s both }
.rp-warn > div { flex: 1 1 200px; min-width: 0 } .rp-warn b { display: block } .rp-warn small { color: #c9c6bd }
.rp-warn-ic { width: 34px; height: 34px; display: grid; place-items: center; color: #ff5a63; background: #0a0b10; border: 1px solid #ff3b4a66; flex: none }
.rp-warn-ic svg { width: 18px; height: 18px }

/* ---------- صفحة التصريح ---------- */
.sub-page { width: min(860px, 100%) }
.sub-body { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.rp-hero { display: flex; gap: 14px; align-items: center; padding: 16px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 0% 50%, #b7101a40, transparent 70%), linear-gradient(180deg, #1a0a0e, #0c0e13); border: 1px solid #ff3b4a33 }
.rp-hero::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--rp-red) 0 9px, #0a0b0f 9px 18px) }
.rp-hero h3 { margin: 0 0 2px; font-size: 1.35rem; font-weight: 900 } .rp-hero p { margin: 0 0 8px; color: #c9c6bd }
.rp-hero-seal, .rp-seal { width: 58px; height: 58px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #d4202c, #5a070c);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 0 1px #ff8a9155 }
.rp-hero-seal svg { width: 30px; height: 30px } .rp-seal { width: 44px; height: 44px } .rp-seal svg { width: 22px; height: 22px }
.rp-fair { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-weight: 900; font-size: .85rem; color: #9be15d; background: #0f1a0c; border: 1px solid #9be15d55 }
.rp-fair svg { width: 15px; height: 15px }
.rp-st { display: flex; align-items: center; gap: 12px; padding: 12px; background: #0e1016; border: 1px solid var(--line) }
.rp-st > div { min-width: 0 } .rp-st b { display: block; font-size: 1.05rem } .rp-st small { color: #b9b6ad }
.rp-st:not(.on) .rp-seal { background: linear-gradient(180deg, #2a2e39, #12141a); box-shadow: inset 0 0 0 1px #ffffff1f }
.rp-st.on { border-color: #ff3b4a55; box-shadow: inset 3px 0 0 var(--rp-red) }
.rp-fd { font-style: normal; color: #ffd166; font-weight: 900 }
.rp-act { display: flex; flex-direction: column; gap: 6px }
.rp-code { display: flex; gap: 8px; flex-wrap: wrap }
.rp-code input { flex: 1 1 200px; min-width: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 1.05rem }
.rp-msg { margin: 0; min-height: 1.2em; font-weight: 700 } .rp-msg.good { color: #9be15d } .rp-msg.bad { color: #ff6b6b }
.rp-h { margin: 6px 0 0; font-size: 1rem; font-weight: 900; color: #e8e6df }
.rp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px }
.rp-plan { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #10121a; border: 1px solid var(--line); min-width: 0 }
.rp-plan.best { border-color: #ff3b4a66; box-shadow: inset 0 3px 0 var(--rp-red) } .rp-plan.fd { border-color: #ffd16666; box-shadow: inset 0 3px 0 #ffd166 }
.rp-pl-n { font-size: 1rem } .rp-pl-p { display: flex; align-items: baseline; gap: 4px } .rp-pl-p .mono { font-size: 1.5rem; font-weight: 900 } .rp-pl-m { color: #9a978f }
.rp-plan .btn { margin-top: auto; justify-content: center } .rp-plan .btn svg { width: 13px; height: 13px }
.rp-giftln { display: flex; align-items: center; gap: 12px; padding: 12px; color: inherit; text-decoration: none; background: #10121a; border: 1px dashed #ff3b4a55 }
.rp-giftln > svg { width: 22px; height: 22px; flex: none; color: #ff5a63 } .rp-giftln > svg:last-child { width: 14px; height: 14px; color: #9a978f }
.rp-giftln span { flex: 1; min-width: 0 } .rp-giftln b { display: block } .rp-giftln small { color: #b9b6ad }
.rp-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px }
.rp-pk { display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: #0e1016; border: 1px solid var(--line) }
.rp-pk svg { width: 20px; height: 20px; flex: none; color: #ff5a63; margin-top: 2px } .rp-pk b { display: block } .rp-pk small { color: #b9b6ad }
.rp-faq { background: #0e1016; border: 1px solid var(--line); padding: 4px 12px }
.rp-faq summary { cursor: pointer; font-weight: 900; padding: 8px 0 } .rp-faq ul { margin: 0 0 10px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; color: #d6d3ca }

/* ---------- كروت المراحل والصنّاع ---------- */
.mkav.rp { box-shadow: 0 0 0 2px var(--rp-name), 0 0 10px color-mix(in srgb, var(--rp-name) 50%, transparent) }
[data-maker]:has(> .mkav.rp) > b, [data-maker]:has(> .mkav.rp) > span > b, .mkx-mk:has(> .mkav.rp) { color: var(--rp-name) }

/* ---------- الجوال ---------- */
@media (max-width: 560px) {
  .rp-hero { padding: 12px } .rp-hero-seal { width: 46px; height: 46px } .rp-hero h3 { font-size: 1.15rem }
  .rp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rp-mframe { inset: 3px } .rp-mframe .rp-c { width: 36px; height: 36px }
}
@media (orientation: landscape) and (max-height: 500px) {
  .rp-hero { padding: 10px } .rp-hero p { margin-bottom: 4px } .rp-plans { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) }
  .rp-warn { bottom: calc(6px + var(--safe-b, 0px)); padding: 6px 10px }
  .rp-mframe { inset: 2px } .rp-mframe .rp-c { width: 30px; height: 30px } .rp-mframe .rp-e { display: none }
}
@media (prefers-reduced-motion: reduce) { .rp-hero-fx i, .rp-hero-fx::after, .rp-mframe, .rp-mframe .rp-e { animation: none !important } }
.rp-noanim .rp-hero-fx i, .rp-noanim .rp-hero-fx::after { animation: none; display: none }

/* جولة 84: الجوالات الصغيرة بالعرض — «مفعّل» كان يغطي «التصريح الأحمر»: تطلع بالزاوية فوق */
@media (max-height: 520px) and (max-width: 720px) { .rp-tchip { top: 3px; transform: none; inset-inline-end: 6px; font-size: .55rem; padding: 2px 5px } }