/* app.css — مكوّنات الواجهة. الألوان والخطوط كلها رموز من brand.css — لا تكتب لونًا هنا. */
[hidden]{display:none !important}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
:root{
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html,body{margin:0; height:100%}
body{
  font-family:var(--font-body),'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.7;
  overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
}
/* الثيمات (النهار/الليل) والخطوط في brand.css */
body{transition:background .45s ease}

#frame{min-height:100dvh; display:flex; justify-content:center}
#app{
  position:relative; width:100%; max-width:430px; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:calc(20px + var(--safe-t)) 18px calc(18px + var(--safe-b));
  overflow:hidden;
}
@media (min-width:520px){
  #frame{align-items:center; padding:24px 0}
  #app{min-height:min(844px, 96dvh); border-radius:28px; border:1px solid var(--line); box-shadow:0 10px 50px rgba(0,0,0,0.18)}
}
/* شاشة المجلس — full-bleed TV: no phone frame, big type, landscape-friendly */
#frame.tv{padding:0 !important; align-items:stretch}
#frame.tv #app{
  max-width:none; width:100%; min-height:100dvh; height:100dvh;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:clamp(16px,3.4vh,40px) clamp(16px,3.6vw,56px) calc(clamp(16px,3.4vh,40px) + var(--safe-b));
}
#frame.tv .center-col{gap:clamp(14px,3vh,34px)}

.glow{position:absolute; border-radius:50%; pointer-events:none}
h1,h2,h3{margin:0; font-weight:600}
.kufi{font-family:var(--font-display),sans-serif}
.mono, input[inputmode="numeric"]{font-family:var(--font-mono),var(--font-body),monospace; font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1}
p{margin:0}
button{
  font-family:inherit; font-size:inherit; color:inherit; background:none; border:none;
  padding:0; cursor:pointer; text-align:center; touch-action:manipulation;
}
button:active{transform:scale(0.985)}
input{
  font-family:inherit; font-size:16px; color:var(--ink); background:transparent; border:none; outline:none;
  width:100%; padding:0;
}
input::placeholder{color:var(--faint)}

/* ---------- shared components ---------- */
.topbar{display:flex; align-items:center; gap:12px; margin-bottom:16px; position:relative; z-index:2}
.iconbtn{
  width:44px; height:44px; border-radius:12px; background:var(--card); border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
}
.iconbtn::after{content:""; position:absolute; inset:-6px}
.topbar .tt{flex-grow:1; min-width:0}
.topbar .tt .big{font-size:18px; font-weight:600}
.topbar .tt .big.kufi{font-size:24px; font-weight:400}
.topbar .tt .sub{font-size:11.5px; color:var(--muted); margin-top:3px}

.card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow)}
.btn{
  width:100%; min-height:58px; border-radius:15px; background:var(--brass); color:var(--on-brass);
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:17px; font-weight:700; padding:8px 16px; position:relative; z-index:2;
}
.btn.red{background:var(--red); color:var(--dk-ink)}
.btn.blue{background:var(--blue); color:var(--dk-bg2)}
.btn.green{background:var(--green); color:var(--dk-bg2)}
.btn.dark{background:var(--sunk); border:1px solid var(--line2); color:var(--ink); font-weight:600}
.btn.big{min-height:66px; font-size:19px; border-radius:17px}
.btn:disabled{opacity:0.4}
.ghost{
  width:100%; min-height:50px; border-radius:14px; border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:14.5px; color:var(--muted); padding:6px 14px; position:relative; z-index:2;
}
.stack{display:flex; flex-direction:column; gap:11px; position:relative; z-index:1}
.spacer{flex-grow:1}
.center-col{flex-grow:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; position:relative; z-index:1}

.stepbtn{width:48px; height:48px; border-radius:14px; background:var(--sunk); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center}
.stepbtn.hot{background:var(--brass); border-color:var(--brass)}
.stepbtn:disabled{opacity:0.35}
.minibtn{width:38px; height:38px; border-radius:10px; background:var(--sunk); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.minibtn:disabled{opacity:0.35}

.toggle{width:46px; height:27px; border-radius:14px; background:var(--line2); padding:3px; display:flex; justify-content:flex-start; flex-shrink:0; transition:background .2s; position:relative}
.toggle::after{content:""; position:absolute; inset:-8px}
.toggle.on{background:var(--brass); justify-content:flex-end}
.toggle .knob{width:21px; height:21px; border-radius:50%; background:var(--white)}

.chip{padding:8px 13px; border-radius:9px; background:var(--sunk); font-size:12.5px; display:inline-flex; align-items:center; gap:7px}
.pill{padding:10px 15px; border-radius:10px; background:var(--card); border:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.pill.on{background:var(--brass-soft); border-color:var(--brass); color:var(--brass-deep)}

.namegrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px; position:relative; z-index:1}
.namecell{
  min-height:74px; border-radius:16px; background:var(--card); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 6px;
}
.namecell .nm{font-family:var(--font-display),sans-serif; font-size:25px; line-height:1.35; color:var(--ink2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.namecell.sel{border-width:2px}
.namecell.sel .nm{color:var(--ink)}
.namecell.off{opacity:0.5; border-style:dashed; background:var(--bg)}
.namecell.off .nm{color:var(--faint); font-size:21px}
.namecell .why{font-size:10px; color:var(--faint)}

.narr{font-family:var(--font-display),sans-serif; font-size:25px; line-height:1.8; color:var(--ink2); text-align:center; max-width:310px}
.eyebrow{font-size:12px; color:var(--muted)}
.huge{font-family:var(--font-display),sans-serif; line-height:1.3; text-align:center}

.ring{position:relative; flex-shrink:0}
.ring .lbl{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}

/* progress segments (deal) */
.segs{display:flex; gap:5px; flex-grow:1}
.segs span{flex-grow:1; height:4px; border-radius:2px; background:var(--line2)}
.segs span.on{background:var(--brass)}

.hint{padding:15px 17px; border-radius:15px; background:var(--card); border:1px solid var(--line); display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:1.7; color:var(--muted); position:relative; z-index:1}
.hint svg{flex-shrink:0; margin-top:2px}

.rowitem{padding:14px 16px; border-radius:15px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; gap:13px; position:relative; z-index:1}

/* host sheet */
#overlay{position:fixed; inset:0; background:rgba(var(--dk-rgb),0.72); z-index:40; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
#sheet{
  position:fixed; bottom:0; inset-inline:0; z-index:41; margin:0 auto; max-width:430px;
  background:var(--card); border-top:1px solid var(--line2); border-radius:26px 26px 0 0;
  padding:14px 20px calc(24px + var(--safe-b)); max-height:88dvh; overflow-y:auto;
  display:flex; flex-direction:column; gap:11px;
}
#sheet .grab{width:44px; height:4px; border-radius:2px; background:var(--line2); margin:0 auto 8px}
.sheetrow{padding:15px 17px; border-radius:15px; background:var(--sunk); border:1px solid var(--line2); display:flex; align-items:center; gap:14px; text-align:start; width:100%}
.sheetrow .st{flex-grow:1; min-width:0}
.sheetrow .st b{display:block; font-size:15px; font-weight:600}
.sheetrow .st span{display:block; font-size:11.5px; color:var(--muted); margin-top:3px}

#toast{
  position:fixed; bottom:calc(28px + var(--safe-b)); inset-inline:0; margin:0 auto; width:fit-content; max-width:86%;
  background:var(--ink-fixed); color:var(--paper); font-size:13.5px; padding:12px 20px; border-radius:12px; z-index:60;
  box-shadow:0 6px 24px rgba(0,0,0,0.35); text-align:center;
}
body.night #toast{background:var(--dk-ink); color:var(--dk-bg)}

@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.screen-anim{animation:fadeUp .3s ease}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* شريط وقت الصلاة: يظهر ٢٠ دقيقة بعد دخول الوقت، فوق كل الشاشات، ويُغلق بضغطة */
.praybar{position:fixed; top:calc(var(--safe-t) + 10px); inset-inline:10px; z-index:60; margin:0 auto; max-width:520px; display:flex; align-items:center; gap:10px; padding:10px 12px 10px 14px; border-radius:16px; background:var(--card); border:1px solid var(--brass); box-shadow:0 8px 28px rgba(var(--dk-rgb),0.35); color:var(--ink); font-size:13px; line-height:1.55; animation:praybar-in .35s ease}
.praybar[hidden]{display:none}
.praybar .ic{font-size:22px; flex-shrink:0}
.praybar .tx{flex-grow:1; min-width:0}
.praybar .tx b{display:block; font-size:13.5px}
.praybar .tx span{color:var(--muted); font-size:12px}
.praybar .ac{display:flex; flex-direction:column; gap:4px; flex-shrink:0}
.praybar button{font:inherit; min-height:34px; padding:0 12px; border-radius:10px; border:1px solid var(--line2); background:var(--sunk); color:var(--ink2); font-size:12px; cursor:pointer}
.praybar button.ok{background:var(--brass); color:var(--on-brass); border-color:var(--brass); font-weight:600}
@keyframes praybar-in{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .praybar{animation:none} }
/* v74: تكبير الخط والتباين (لكل جوال) */
html.a11y-big #app, html.a11y-big .fbbox, html.a11y-big #introOverlay > .card{zoom:1.14}
html.a11y-contrast .day{--muted:#45453F; --faint:#6A6A62; --line:#BDBCB0; --line2:#A5A498; --ink2:#1E1E1C}
html.a11y-contrast .night{--muted:#C4C4BC; --faint:#9C9C96; --line:#46464F; --line2:#5C5C66; --ink2:#EFEFE8}
/* زر «وش أسوي الحين؟» */
.helpfab{position:fixed; bottom:calc(16px + env(safe-area-inset-bottom,0px)); inset-inline-end:14px; z-index:55; width:50px; height:50px; border-radius:50%; border:1px solid var(--brass); background:var(--card); color:var(--brass-deep); font-size:24px; font-weight:700; box-shadow:0 8px 22px rgba(0,0,0,.28); cursor:pointer; font-family:var(--font-display),sans-serif; line-height:1}
.helpfab[hidden]{display:none}
.featured-tag{align-self:flex-start; margin-bottom:-6px; padding:4px 11px; border-radius:999px 999px 999px 4px; background:var(--brass); color:var(--on-brass); font-size:11.5px; font-weight:700; position:relative; z-index:2}
/* العب وتعلّم */
.lrow{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.lavatar{width:44px; height:44px; border-radius:50%; background:var(--sunk); border:1px solid var(--line2); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; color:var(--ink2); flex-shrink:0}
.lavatar.me{background:var(--brass); color:var(--on-brass); border-color:var(--brass)} .lavatar.out{opacity:.35; text-decoration:line-through}
.lp{font-size:15px; line-height:1.9; color:var(--ink2); text-align:center; max-width:34ch; margin:0 auto}
.lcard{all:unset; box-sizing:border-box; width:100%; max-width:340px; min-height:190px; border-radius:24px; padding:24px 20px; background:linear-gradient(160deg, rgba(var(--blue-rgb),.28), rgba(var(--dk-rgb),.92) 72%); color:var(--dk-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center}
.lcard.hidden{cursor:pointer; background:var(--dk-card, #15151A); border:2px dashed rgba(var(--paper-rgb),.25); font-size:16px; font-weight:600}
.lbubble{display:flex; gap:10px; align-items:flex-start; margin-top:9px; animation:lpop .35s ease both; animation-delay:calc(var(--k) * .45s)}
.lbubble > div{background:var(--card); border:1px solid var(--line); border-radius:4px 16px 16px 16px; padding:8px 12px; flex:1} .lbubble b{font-size:12.5px; color:var(--brass-deep)} .lbubble p{margin:2px 0 0; font-size:14.5px; line-height:1.7}
.lnight{border-radius:22px; padding:26px 18px; background:#0B0B14; color:#EDEDF3; text-align:center}
.ldots{display:flex; gap:7px; justify-content:center; margin:10px 0} .ldots span{width:9px; height:9px; border-radius:50%; background:#E6B84A; animation:lblink 1.2s infinite} .ldots span:nth-child(2){animation-delay:.2s} .ldots span:nth-child(3){animation-delay:.4s}
@keyframes lpop{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes lblink{0%,100%{opacity:.25} 50%{opacity:1}}
/* الشرح المتحرك */
.iart{height:110px; border-radius:16px; background:var(--sunk); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden}
.iart.night{background:linear-gradient(180deg,#10101C,#1D1D33)}
.iart .moon{position:absolute; top:12px; inset-inline-end:22px; width:30px; height:30px; border-radius:50%; box-shadow:-8px 4px 0 0 #E6B84A; animation:lfloat 3s ease-in-out infinite}
.iart .row5{display:flex; gap:12px; align-items:center}
.iart .eye{width:26px; height:26px; border-radius:50%; background:#EDEDF3; animation:leye 3s ease-in-out infinite; animation-delay:calc(var(--k) * .15s)}
.iart .eye:nth-child(2), .iart .eye:nth-child(4){background:#D47745; animation:none}
.iart .who{width:30px; height:30px; border-radius:50%; background:var(--line2); display:grid; place-items:center; font-size:16px; animation:lfloat 2.4s ease-in-out infinite; animation-delay:calc(var(--k) * .2s)}
.iart .who.caught{background:#D47745; animation:lpulse 1.4s ease-in-out infinite}
.iart .bubbles{display:flex; gap:10px}
.iart .bub{padding:3px 10px; border-radius:10px; background:var(--card); border:1px solid var(--line2); font-size:13px; font-weight:700; animation:lbub 2.4s ease-in-out infinite; animation-delay:calc(var(--k) * .5s)}
.iart .teams{display:flex; align-items:center; gap:16px} .iart .team{display:flex; gap:6px} .iart .vs{font-size:22px}
.iart .tok{width:18px; height:18px; border-radius:50%; background:#75BEA0} .iart .maf .tok{background:#D47745; animation:lfade 3s ease-in-out infinite; animation-delay:calc(var(--k) * .8s)}
.iart .card{width:34px; height:46px; border-radius:7px; background:var(--card); border:2px solid #5E00D0; animation:lflip 3s ease-in-out infinite; animation-delay:calc(var(--k) * .25s)}
.iart .card.spy{background:#D47745; border-color:#D47745; color:#fff; display:grid; place-items:center; font-weight:800}
.iart .arrows{display:flex; gap:14px} .iart .arr{width:0; height:0; border-inline:7px solid transparent; border-top:11px solid var(--brass); animation:lfloat 1.2s ease-in-out infinite; animation-delay:calc(var(--k) * .2s)}
.iart .fan{position:relative; width:120px; height:70px} .iart .pc{position:absolute; inset-inline-start:45px; top:6px; width:36px; height:54px; border-radius:7px; background:var(--card); border:2px solid var(--brass); transform-origin:bottom center; animation:lfan 3s ease-in-out infinite; --r:calc((var(--k) - 1.5) * 16deg)}
.iart .coins{display:flex; flex-direction:column-reverse; gap:3px} .iart .coin{width:46px; height:9px; border-radius:50%; background:#E6B84A; border:1px solid #B78E3C; animation:lcoin 2.6s ease-in-out infinite; animation-delay:calc(var(--k) * .3s)}
.iart .duel{display:flex; align-items:center; gap:12px} .iart .duel .pc{position:static; display:grid; place-items:center; font-weight:800; font-size:18px; animation:lflip 2.6s ease-in-out infinite} .iart .duel .pc.b{border-color:#75BEA0; animation-delay:.6s}
@keyframes lfloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
@keyframes leye{0%,40%,100%{transform:scaleY(1)} 50%,85%{transform:scaleY(.1)}}
@keyframes lpulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.15)}}
@keyframes lbub{0%,100%{opacity:.3; transform:translateY(4px)} 50%{opacity:1; transform:none}}
@keyframes lfade{0%,60%{opacity:1} 80%,100%{opacity:.15}}
@keyframes lflip{0%,70%,100%{transform:rotateY(0)} 80%{transform:rotateY(90deg)}}
@keyframes lfan{0%,100%{transform:rotate(0)} 50%{transform:rotate(var(--r))}}
@keyframes lcoin{0%,100%{transform:translateY(0); opacity:1} 50%{transform:translateY(-6px); opacity:.8}}
@media (prefers-reduced-motion:reduce){ .iart *, .lbubble, .ldots span{animation:none !important} }
/* الإعلان: بطاقة هادئة بعلامة «إعلان» واضحة — خارج اللعب فقط */
.adslot{margin-top:14px; position:relative; z-index:1}
.adslot:empty{display:none}
.adcard{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:16px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink); min-height:64px}
.adcard img{width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0; background:var(--sunk)}
.adtxt{flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.55}
.adtxt b{font-size:14px; font-weight:600}
.adtxt span{font-size:12px; color:var(--muted)}
.adtxt .adlbl{font-size:10px; color:var(--faint)}
.adcta{flex-shrink:0; padding:7px 12px; border-radius:999px; background:var(--brass-soft); color:var(--brass-deep); font-size:12px; font-weight:600; border:1px solid var(--brass)}
.grace{font-size:12.5px; color:var(--muted); text-align:center; line-height:1.65; margin-top:12px; padding:0 8px}

/* نموذج «قل لنا»: ورقة من الأسفل على الجوال، ومربّع في الوسط على الشاشات الكبيرة */
.fbsheet{position:fixed; inset:0; z-index:90; background:rgba(var(--dk-rgb),0.72); display:none; align-items:flex-end; justify-content:center}
.fbbox{width:100%; max-width:560px; max-height:92dvh; overflow:auto; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:22px 22px 0 0; padding:18px 16px calc(16px + var(--safe-b)); display:flex; flex-direction:column; gap:12px; animation:fb-in .3s ease}
.fbbox textarea{font-family:inherit}
@keyframes fb-in{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}
@media (min-width:640px){ .fbsheet{align-items:center; padding:16px} .fbbox{border-radius:22px} }
@media (prefers-reduced-motion:reduce){ .fbbox{animation:none} }

/* ===== الهوية الزرقاء: شريط الغلاف وبطاقات الألعاب ===== */
.brand-hero{position:relative; margin:-2px -4px 16px; height:176px; border-radius:24px; overflow:hidden; background:var(--brand); box-shadow:0 10px 30px rgba(var(--ink-rgb),.14); z-index:1}
.brand-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:48% 42%}
.brand-hero-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,33,48,0) 45%, rgba(15,33,48,.55) 100%)}
.brand-hero-tag{position:absolute; inset-inline:16px; bottom:10px; color:#EBF8FF; font-size:12.5px; font-weight:500; text-shadow:0 1px 6px rgba(0,0,0,.35)}
.brand-hero-acc{position:absolute !important; top:10px; inset-inline-end:10px; background:rgba(235,248,255,.92) !important; border-color:transparent !important; backdrop-filter:blur(6px)}
.gcard{position:relative; overflow:hidden; display:block; width:100%; text-align:start; padding:20px 20px 18px; min-height:136px; border-radius:22px; border:1px solid var(--line); background:var(--card); color:var(--ink); box-shadow:0 8px 22px rgba(var(--ink-rgb),.07); font:inherit; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease}
.gcard:active{transform:scale(.985)}
.gcard .gc-art{position:absolute; inset-inline-end:-14px; bottom:-18px; width:128px; height:auto; pointer-events:none; filter:drop-shadow(0 12px 18px rgba(20,40,58,.22)); transform:rotate(-8deg); transition:transform .35s ease}
.gcard.wide .gc-art{width:150px; bottom:-8px; transform:none}
.gcard:hover .gc-art{transform:rotate(-2deg) translateY(-3px)}
.gcard .gc-body{position:relative; display:block; max-width:calc(100% - 92px)}
.gcard .gc-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.gcard .gc-title{font-size:26px; line-height:1.4; font-weight:800; color:var(--ink)}
.gcard .gc-tag{padding:3px 10px; border-radius:999px; background:var(--gc-accent); color:#fff; font-size:10.5px; font-weight:700}
.gcard .gc-line{display:block; font-size:13px; line-height:1.7; color:var(--ink2); margin-top:4px}
.gcard .gc-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.gcard .gc-meta span{padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid rgba(var(--ink-rgb),.06); font-size:11px; color:var(--ink2)}
.gcard.dark{background:radial-gradient(120% 140% at 0% 100%, #2A4858 0%, #0F2130 62%); border-color:#24405A; box-shadow:0 10px 28px rgba(10,24,36,.35)}
.gcard.dark .gc-title{color:#EBF8FF} .gcard.dark .gc-line{color:#C5DCEA}
.gcard.dark .gc-meta span{background:rgba(235,248,255,.08); border-color:rgba(235,248,255,.1); color:#8BA6B8}
.gcard.dark .gc-art{width:132px; bottom:-14px; inset-inline-end:-16px; mix-blend-mode:screen; filter:none; transform:rotate(-6deg); -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent 100%); mask-image:radial-gradient(closest-side, #000 62%, transparent 100%)}
/* ألوان الألعاب من «دليل الهوية»: المافيا عنّابي، المداقش أخضر طاولة الورق — وأيقونة اللعبة ثلاثية الأبعاد بدل التيلة */
.gcard.maroon{background:radial-gradient(120% 140% at 0% 100%, var(--brand-burgundy-hi) 0%, var(--brand-burgundy) 46%, var(--brand-burgundy-deep) 100%); border-color:rgba(142,56,84,.7); box-shadow:0 10px 28px rgba(46,17,27,.32)}
.gcard.felt{background:radial-gradient(120% 140% at 0% 100%, var(--brand-green-hi) 0%, var(--brand-green) 44%, var(--brand-green-deep) 100%); border-color:rgba(78,154,126,.6); box-shadow:0 10px 28px rgba(28,70,55,.3)}
.gcard.maroon .gc-title, .gcard.felt .gc-title{color:var(--brand-offwhite)}
.gcard.maroon .gc-line{color:#F3D9E1} .gcard.felt .gc-line{color:#D8EEE5}
.gcard.maroon .gc-meta span, .gcard.felt .gc-meta span{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.14); color:#F6ECE4}
.gcard.maroon .gc-art, .gcard.felt .gc-art{width:138px; bottom:-10px; inset-inline-end:-12px; filter:drop-shadow(0 14px 16px rgba(0,0,0,.34)); transform:rotate(-6deg)}
.gcard .gc-pair{display:flex; align-items:flex-end; width:auto; bottom:-8px; inset-inline-end:-2px; transform:none}
.gcard .gc-pair .char-art + .char-art{margin-inline-start:-24px}
.gcard:hover .gc-pair{transform:translateY(-3px)}
.kufi{font-weight:700}
.mono{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .gcard, .gcard .gc-art{transition:none} }

/* ===== شاشة الباقات: ثلاث بطاقات، الفرق بينها المدة ===== */
.plans-row{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:760px){ .plans-row{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start} }
.plan-card{position:relative; padding:18px; display:flex; flex-direction:column; gap:6px}
.plan-card.featured{border:2px solid var(--brass); background:var(--brass-soft); padding:22px 18px 18px}
.plan-badge{position:absolute; top:-11px; inset-inline-start:16px; padding:4px 11px; border-radius:999px; background:var(--brass); color:var(--on-brass); font-size:11px; font-weight:700}
.plan-name{font-size:21px; line-height:1.4}
.plan-card.featured .plan-name{font-size:23px}
.plan-price{display:flex; align-items:baseline; gap:6px; margin-top:2px}
.plan-qar{font-size:40px; font-weight:800; line-height:1.15; color:var(--brass-deep)}
.plan-cur{font-size:14px; color:var(--muted)}
.plan-span{font-size:14px; font-weight:600; color:var(--ink2)}
.plan-blurb{font-size:13px; color:var(--muted)}
.plan-note{font-size:11.5px; color:var(--muted); line-height:1.7}
.plan-buy{min-height:50px; margin-top:8px}
.plan-perks{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:13px; line-height:1.8; color:var(--ink2); text-align:center}
.plan-perks span{color:var(--faint)}
.plan-once{text-align:center; font-size:12.5px; color:var(--muted)}

/* ===== شخصيات المصمّم: بطاقة الدور على مسرح بلون الفريق ===== */
.role-card{position:relative; overflow:hidden; width:100%; box-sizing:border-box; border-radius:26px; padding:14px 22px 24px; display:flex; flex-direction:column; align-items:center; gap:6px; color:#EBF8FF; background-color:#46799E; background-size:cover; background-position:center; box-shadow:0 22px 50px rgba(10,24,36,.35)}
.role-card.stage-mafia{background-color:#5B2334; background-image:url(assets/bg/stage-mafia.svg); border:1px solid rgba(224,96,126,.45)}
.role-card.stage-town{background-color:#46799E; background-image:url(assets/bg/stage-town.svg); border:1px solid rgba(156,203,232,.45)}
.role-card.stage-light{background-color:#EEF5FA; background-image:url(assets/bg/stage-light.svg); border:1px solid #CCE4F2; color:#14283A}
.role-card-art{line-height:0; margin-bottom:2px}
.role-card-art .char-art{filter:drop-shadow(0 16px 20px rgba(10,24,36,.35)); animation:charIn .55s cubic-bezier(.2,.9,.3,1.25) both, charFloat 3.8s ease-in-out .6s infinite}
.role-card-name{font-size:46px; line-height:1.4; font-weight:800; text-align:center; color:#FFFFFF; text-shadow:0 2px 14px rgba(10,24,36,.28)}
.role-card-en{font-size:11px; letter-spacing:.3em; opacity:.78; font-family:var(--font-mono),var(--font-body),monospace}
.role-card-desc{margin:6px 0 0; text-align:center; font-size:14.5px; line-height:1.8; color:rgba(235,248,255,.92); max-width:290px}
.role-card.stage-light .role-card-name{color:#14283A; text-shadow:none}
.role-card.stage-light .role-card-desc{color:#2A4858}
.out-art{line-height:0}
.out-art .char-art{filter:drop-shadow(0 16px 22px rgba(0,0,0,.35)); animation:charIn .6s cubic-bezier(.2,.9,.3,1.25) both, charWobble 4.2s ease-in-out .7s infinite}
.rowitem .char-art{filter:drop-shadow(0 3px 4px rgba(10,24,36,.25))}
@keyframes charIn{from{opacity:0; transform:translateY(16px) scale(.88)} to{opacity:1; transform:none}}
@keyframes charFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
@keyframes charWobble{0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){ .role-card-art .char-art, .out-art .char-art{animation:none} }
/* ألعاب الشخصين: الاثنان جنب بعض في نهاية الجلسة، والفائز يتقدّم شوي */
.duo-pair{display:flex; align-items:flex-end; justify-content:center; line-height:0}
.duo-pair-one + .duo-pair-one{margin-inline-start:-16px}
.duo-pair-one .char-art{filter:drop-shadow(0 10px 14px rgba(10,24,36,.22)); animation:charIn .55s cubic-bezier(.2,.9,.3,1.25) both}
.duo-pair-one.win{position:relative; z-index:1}
.duo-pair-one.win .char-art{animation:charIn .55s cubic-bezier(.2,.9,.3,1.25) both, charFloat 3.8s ease-in-out .6s infinite}
/* ملعب التيل الليلي — للكل (قرار المالك): قماش أزرق وتيل حقيقي من الدليل، والسطر الخاص صغير وخافت */
.marble-pit{flex-grow:1; position:relative; z-index:1; margin-top:12px; min-height:300px; border-radius:26px; overflow:hidden; touch-action:none; background:var(--brand-blue-deep); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.32)}
.night-note{position:relative; z-index:1; margin-top:10px; padding:9px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:13px; line-height:1.7; color:var(--muted); text-align:center}
.night-note b{color:var(--ink2); font-weight:700}
.nn-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:7px; vertical-align:1px; background:var(--muted)}
.nn-dot.red{background:var(--red)} .nn-dot.green{background:var(--green)} .nn-dot.blue{background:var(--blue)}
/* كفّ «عدد اللاعبين» (دليل الهوية) */
.hand-art{filter:drop-shadow(0 6px 8px rgba(20,40,58,.16))}
.count-hand{display:flex; flex-shrink:0}
.count-hand .hand-art{width:min(74px,18vw) !important; height:auto !important}
.tight-hand{display:flex; flex-shrink:0}
@media (max-width:359px){ .count-hand, .tight-hand{display:none} }   /* جوال ٣٢٠px: ما فيه مكان — الكفّ زخرفة والرقم مكتوب، فنخفيها بدل ما تدفّ زرّ + برّا الشاشة */
@media (prefers-reduced-motion:reduce){ .duo-pair-one .char-art{animation:none} }

/* ============================================================
   v95 — عوالم الألعاب من «دليل الهوية» (مراجعة بمهارتي ui-ux-pro-max و frontend-design)
   التوقيع: «الملصق» الأبيض المائل بخطّ Tajawal الأسود (من منشورات التواصل في الدليل: «يلا تيلة!» «يلا مافيا!»)
   + لكل لعبة عالم لون من لوحة الهوية ونمط العلامة فوقه، وشخصياتها أو أيقونتها ثلاثية الأبعاد.
   ============================================================ */
/* ألوان كل عالم: الخلفية، ولون النص فوقها (غامق على الفاتح، أبيض على الغامق — تباين ≥ ٤٫٥) */
.w-mafia{--w-a:var(--w-mafia-hi); --w-b:var(--w-mafia); --w-c:var(--w-mafia-deep); --w-ink:#FFFFFF; --w-sub:rgba(255,255,255,.84); --w-chip:rgba(255,255,255,.12); --w-chip-line:rgba(255,255,255,.18); --w-pat:.08}
.w-md{--w-a:var(--w-md-hi); --w-b:var(--w-md); --w-c:var(--w-md-deep); --w-ink:#FFFFFF; --w-sub:rgba(255,255,255,.86); --w-chip:rgba(255,255,255,.12); --w-chip-line:rgba(255,255,255,.2); --w-pat:.08}
.w-dg{--w-a:var(--w-dg-hi); --w-b:var(--w-dg); --w-c:var(--w-dg-deep); --w-ink:#FFFFFF; --w-sub:rgba(255,255,255,.88); --w-chip:rgba(255,255,255,.14); --w-chip-line:rgba(255,255,255,.22); --w-pat:.09}
.w-qz{--w-a:var(--w-qz-hi); --w-b:var(--w-qz); --w-c:var(--w-qz-deep); --w-ink:#FFFFFF; --w-sub:rgba(235,248,255,.8); --w-chip:rgba(235,248,255,.1); --w-chip-line:rgba(235,248,255,.16); --w-pat:.06}
.w-ml{--w-a:var(--w-ml-hi); --w-b:var(--w-ml); --w-c:var(--w-ml-deep); --w-ink:var(--brand-black); --w-sub:rgba(20,40,58,.86); --w-chip:rgba(255,255,255,.28); --w-chip-line:rgba(20,40,58,.12); --w-pat:.14}
.w-ch{--w-a:var(--w-ch-hi); --w-b:var(--w-ch); --w-c:var(--w-ch-deep); --w-ink:var(--brand-black); --w-sub:rgba(20,40,58,.84); --w-chip:rgba(255,255,255,.3); --w-chip-line:rgba(20,40,58,.12); --w-pat:.16}
.w-duo{--w-a:var(--w-duo-hi); --w-b:var(--w-duo); --w-c:var(--w-duo-deep); --w-ink:var(--brand-black); --w-sub:rgba(20,40,58,.84); --w-chip:rgba(255,255,255,.34); --w-chip-line:rgba(20,40,58,.12); --w-pat:.16}
.w-teelah{--w-a:var(--w-dg-hi); --w-b:var(--w-dg); --w-c:var(--brand-black); --w-ink:#FFFFFF; --w-sub:rgba(255,255,255,.88); --w-pat:.07}
/* الأرضيّة: تدرّج من ضوء فوق-يمين + نمط العلامة */
.world-ground{background:radial-gradient(130% 120% at 100% 0%, var(--w-a) 0%, var(--w-b) 48%, var(--w-c) 100%)}
.world-pat{position:absolute; inset:0; background:url(assets/bg/pattern-marks.svg) 0 0/128px repeat; opacity:var(--w-pat); pointer-events:none}

/* الملصق: أبيض مائل بخطّ أسود — توقيع الهوية (بلا letter-spacing على العربي، وارتفاع سطر ≥ ١٫٤) */
.sticker{display:inline-block; background:#FFFFFF; color:var(--brand-black); font-weight:900; line-height:1.4; padding:2px 12px 0; border-radius:6px; transform:rotate(-3deg); box-shadow:0 6px 14px rgba(10,24,36,.24)}

/* ---- رأس الرئيسية: تحيّة + الحساب ---- */
.home-top{display:flex; align-items:center; gap:12px; margin:4px 0 12px; position:relative; z-index:2}
.home-top .hello{flex-grow:1; display:flex; flex-direction:column; min-width:0}
.home-top .hello small{font-size:13px; color:var(--muted); line-height:1.5}
.home-top .hello b{font-size:26px; font-weight:900; line-height:1.4; color:var(--brass-deep); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.home-top .avatar{width:50px; height:50px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#FFFFFF; font-size:21px; font-weight:800; border:3px solid var(--card); box-shadow:0 6px 16px rgba(var(--ink-rgb),.16); cursor:pointer; transition:transform .15s ease}
.home-top .avatar:active{transform:scale(.94)}
.home-top .avatar.guest{background:var(--card); color:var(--brass); border-color:var(--line)}
.home-top .lock{flex-shrink:0; color:var(--brass); opacity:.9}

/* ---- البانر: شرائح تنسحب (بلا دوران تلقائي — قاعدة الوصول) + نقاط أزرار ---- */
.hero-rail{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-top:26px; margin-top:-18px; overscroll-behavior-x:contain; position:relative; z-index:1}
.hero-rail::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%; scroll-snap-align:center; position:relative; height:190px; border:0; padding:0; font:inherit; text-align:start; cursor:pointer; background:none; color:var(--w-ink)}
.hero-slide .hs-bg{position:absolute; inset:0; border-radius:26px; overflow:hidden; box-shadow:0 14px 30px rgba(var(--ink-rgb),.2)}
.hero-slide .hs-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 55%}
.hero-slide .hs-shade{position:absolute; inset:0; background:linear-gradient(270deg, rgba(10,24,36,.62) 0%, rgba(10,24,36,.2) 55%, rgba(10,24,36,0) 80%)}
.hero-slide .hs-text{position:absolute; inset-inline-start:18px; bottom:18px; max-width:62%; display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.hero-slide .sticker{font-size:30px}
.hero-slide .hs-line{font-size:14.5px; line-height:1.6; font-weight:700; color:var(--w-sub); text-shadow:0 1px 8px rgba(10,24,36,.35)}
.hero-slide .hs-go{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#FFFFFF; backdrop-filter:blur(6px)}
.hero-slide .hs-art{position:absolute; inset-inline-end:6px; bottom:0; height:214px; width:auto; pointer-events:none; filter:drop-shadow(0 18px 20px rgba(0,0,0,.4))}
.hero-slide .hs-art.cards{height:170px; bottom:12px; inset-inline-end:-6px; transform:rotate(-6deg)}
/* شريحة الصورة: الصورة (اليد والتيل) في جهة، والنص على أزرق الهوية في الجهة الثانية — ما يغطّي الشعار اللي في الصورة */
.hero-slide.w-teelah .hs-photo{inset:0 auto 0 0; width:60%; object-position:50% 62%; -webkit-mask-image:linear-gradient(to right, #000 66%, transparent 100%); mask-image:linear-gradient(to right, #000 66%, transparent 100%)}
.hero-slide.w-teelah .hs-shade{display:none}
.hero-slide.w-teelah .hs-text{max-width:48%; gap:9px}
.hero-slide.w-teelah .hs-line{font-size:13.5px}
[dir="ltr"] .hero-slide.w-teelah .hs-photo{inset:0 0 0 auto; -webkit-mask-image:linear-gradient(to left, #000 62%, transparent 100%); mask-image:linear-gradient(to left, #000 62%, transparent 100%)}
.hero-slide:focus-visible{outline:none} .hero-slide:focus-visible .hs-bg{outline:3px solid var(--brass); outline-offset:3px}
.hero-dots{display:flex; justify-content:center; gap:0; margin:0 0 2px; position:relative; z-index:1}
.hero-dots button{width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; cursor:pointer}   /* هدف لمس ٤٤ — النقطة نفسها صغيرة */
.hero-dots button:focus-visible{outline:2px solid var(--brass); outline-offset:-6px}
.world-band .wb-back:focus-visible{outline:3px solid #FFFFFF; outline-offset:2px}
.hero-dots button span{width:8px; height:8px; border-radius:99px; background:var(--line2); transition:width .25s ease, background .25s ease}
.hero-dots button.on span{width:22px; background:var(--brand-yellow)}

/* ---- عنوان القسم ---- */
.sec-head{display:flex; align-items:baseline; gap:10px; margin:18px 2px 10px; position:relative; z-index:1}
.sec-head h2{margin:0; font-size:21px; font-weight:900; line-height:1.4; color:var(--ink)}
.sec-head span{font-size:12.5px; color:var(--muted); line-height:1.5}

/* ---- بطاقة اللعبة = عالمها ---- */
.gcard.world{border:0; color:var(--w-ink); box-shadow:0 12px 26px rgba(var(--ink-rgb),.16); min-height:148px}
.gcard.world .world-pat{border-radius:inherit}
.gcard.world .gc-body{z-index:1}
.gcard.world .gc-title{color:var(--w-ink); font-weight:900; font-size:27px}
.gcard.world .gc-line{color:var(--w-sub); font-weight:500}
.gcard.world .gc-meta span{background:var(--w-chip); border-color:var(--w-chip-line); color:var(--w-ink); font-weight:600}
.gcard.world .gc-tag{background:#FFFFFF; color:var(--brand-black); font-weight:900; font-size:11.5px; border-radius:6px; padding:2px 9px 1px; transform:rotate(-3deg); box-shadow:0 4px 10px rgba(10,24,36,.2)}
.gcard.world .gc-art{z-index:1; width:136px; bottom:-10px; inset-inline-end:-10px; filter:drop-shadow(0 16px 16px rgba(0,0,0,.32)); transform:rotate(-6deg)}
.gcard.world .gc-pair{transform:none; bottom:-6px; inset-inline-end:-2px}
.gcard.world:focus-visible{outline:3px solid var(--brass); outline-offset:3px}

/* ---- شريط عالم اللعبة أعلى شاشات الإعداد واللوبي ---- */
.world-band{position:relative; border-radius:26px; min-height:156px; margin:0 0 14px; color:var(--w-ink); z-index:1; box-shadow:0 14px 30px rgba(var(--ink-rgb),.18)}
.world-band .wb-bg{position:absolute; inset:0; border-radius:inherit; overflow:hidden}
.world-band .wb-top{position:relative; display:flex; align-items:center; gap:10px; padding:12px 12px 0}
.world-band .wb-back{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); color:var(--w-ink); cursor:pointer; backdrop-filter:blur(6px)}
.world-band.w-ml .wb-back, .world-band.w-ch .wb-back, .world-band.w-duo .wb-back{background:rgba(255,255,255,.4); border-color:rgba(20,40,58,.12)}
.world-band .wb-text{position:relative; z-index:2; padding:10px 18px 18px; max-width:calc(100% - 128px); display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.world-band .sticker{font-size:clamp(21px, 6.6vw, 27px); white-space:nowrap}
.world-band .wb-sub{font-size:13.5px; font-weight:600; line-height:1.65; color:var(--w-sub)}
.world-band .wb-cast{position:absolute; inset-inline-end:8px; bottom:0; display:flex; align-items:flex-end; pointer-events:none}
.world-band .wb-cast .char-art + .char-art{margin-inline-start:-22px}
.world-band .wb-cast .char-art{filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.world-band .wb-cast img.wb-icon{width:122px; height:auto; transform:rotate(-6deg); margin-bottom:6px; filter:drop-shadow(0 14px 16px rgba(0,0,0,.35))}
.world-band .wb-extra{position:relative; padding:0 12px 12px}
.world-band.no-back .wb-text{padding-top:26px}
/* شريط المرحلة وسط اللعب (v96): أصغر، والأزرار الصغيرة على الطرف */
.world-band.phase{min-height:112px; margin-bottom:12px}
.world-band.phase .wb-top{justify-content:flex-end; padding:10px 10px 0; flex-wrap:wrap; gap:8px}
.world-band.phase .wb-text{padding:8px 16px 14px; gap:6px}
.world-band.phase:not(:has(.wb-top)) .wb-text{padding-top:20px}
.world-band.phase .sticker{font-size:clamp(20px, 6vw, 25px)}
.world-band.phase .wb-sub{font-size:13px}
.world-band.phase .wb-cast .hand-art{margin-bottom:-4px; filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.world-band .chip{background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.26) !important; color:#FFFFFF !important}
.world-band .chip svg *{stroke:#FFFFFF}
.world-band .iconbtn{background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.26) !important}
.world-band .iconbtn svg *{stroke:#FFFFFF}
.world-band .band-timer{font-size:15px; font-weight:700; color:#FFFFFF; padding:6px 10px; border-radius:999px; background:rgba(10,24,36,.28); min-height:32px; display:inline-flex; align-items:center}
.wdot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--w-b); margin-inline-end:7px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.world-band .wb-eyebrow{font-size:12.5px; font-weight:700; color:var(--w-sub)}
@media (max-width:370px){ .world-band .wb-cast .char-art{width:74px !important; height:74px !important} .world-band .sticker, .hero-slide .sticker{font-size:25px} }
[dir="ltr"] .hero-slide .hs-shade{transform:scaleX(-1)}
[dir="ltr"] .sticker, [dir="ltr"] .gcard.world .gc-tag{transform:rotate(3deg)}
@media (prefers-reduced-motion:reduce){ .hero-dots button span{transition:none} .home-top .avatar{transition:none} }

/* ================= v97 · أقسام التطبيق والرئيسية المختصرة والشاشات العريضة — صفحة «App» في دليل الهوية ================= */
/* نمط العلامة الخفيف على خلفية الأقسام (مثل خلفية صفحة التطبيق في الدليل) — على الصفحة كلها، مو داخل العمود بس */
body.has-tabbar::before{content:""; position:fixed; inset:0; background:var(--brand); -webkit-mask:url(assets/bg/pattern-marks.svg) 0 0/132px repeat; mask:url(assets/bg/pattern-marks.svg) 0 0/132px repeat; opacity:.05; pointer-events:none; z-index:0}
body.has-tabbar #frame{position:relative; z-index:1}
/* رأس الأقسام: أزرار دائرية زرقاء (سؤال اليوم بنقطة حمراء، شاشة المجلس) */
.home-top .hbtns{display:flex; gap:8px; flex-shrink:0}
.home-top .hbtn{position:relative; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#FFFFFF; box-shadow:0 6px 14px rgba(var(--ink-rgb),.16)}
.home-top .hbtn .dot{position:absolute; top:5px; inset-inline-end:5px; width:11px; height:11px; border-radius:50%; background:var(--red); border:2px solid var(--brand)}
.home-top .hbtn:focus-visible, .tabbar .tb:focus-visible, .gr-item:focus-visible, .sec-more:focus-visible{outline:3px solid var(--brand-yellow); outline-offset:2px}
/* التنبيهات: سطر واحد */
.notice{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding-block:4px; padding-inline:14px 6px; margin:0 0 10px; border-radius:14px; background:var(--card); border:1px solid var(--line); font:inherit; font-size:13px; line-height:1.55; color:var(--ink2); text-align:start; position:relative; z-index:1}
.notice > svg{flex-shrink:0; color:var(--brass)}
.notice > span:not(.nbtn):not(.n-em){flex:1; min-width:0}
.notice.dashed{border-style:dashed; border-color:var(--line2)}
.notice.red{border-color:rgba(var(--red-rgb),.45); background:rgba(var(--red-rgb),.06)}
.notice.red > svg{color:var(--red)}
.notice.brass{border-color:var(--brass); background:var(--brass-soft)}
.notice .nbtn{flex-shrink:0; min-height:44px; padding:0 12px; display:inline-flex; align-items:center; border-radius:12px; font-size:13px; font-weight:800; color:var(--brass-deep); text-decoration:underline; text-underline-offset:3px}
/* عنوان القسم + «الكل» */
.sec-head.home-sec{margin-top:6px}
.sec-head .sec-more{margin-inline-start:auto; min-height:44px; padding:0 6px; font-size:14px; font-weight:800; color:var(--brass-deep)}
/* دوّارة الألعاب: بطاقة النص أكبر، والجانبية أصغر وتطلّ من الطرفين */
.grail{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; padding:8px calc(50% - 76px) 10px; margin:0 -18px; position:relative; z-index:1}
.grail::-webkit-scrollbar{display:none}
.gr-item{flex:0 0 152px; height:152px; scroll-snap-align:center; position:relative; border:0; padding:0; border-radius:28px; overflow:hidden; cursor:pointer; color:var(--w-ink); transform:scale(.8); opacity:.9; box-shadow:0 10px 22px rgba(var(--ink-rgb),.16); transition:transform .25s ease, opacity .25s ease, box-shadow .25s ease}
.gr-item.on{transform:none; opacity:1; box-shadow:0 16px 30px rgba(var(--ink-rgb),.26)}
.gr-item .world-pat{border-radius:inherit}
.gr-item .gr-art{position:absolute; inset:0; margin:auto; width:74%; height:74%; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(0,0,0,.3)); pointer-events:none}
.gr-item .gr-pair{display:flex; align-items:flex-end; justify-content:center; width:auto; height:auto; inset:auto 0 -4px 0}
.gr-item .gr-pair .char-art + .char-art{margin-inline-start:-22px}
.gr-item .gr-badge{position:absolute; top:10px; inset-inline-start:10px; background:#FFFFFF; color:var(--brand-black); font-size:11px; font-weight:900; line-height:1.4; padding:2px 8px 1px; border-radius:6px; transform:rotate(-3deg); box-shadow:0 4px 10px rgba(10,24,36,.2)}
.gr-item .gr-label{display:none}
.gr-cap{text-align:center; min-height:112px; padding:2px 8px 0; position:relative; z-index:1}
.gr-cap > b{display:block; font-size:26px; font-weight:900; line-height:1.4; color:var(--ink)}
.gr-cap > p{font-size:13.5px; line-height:1.75; color:var(--muted); max-width:34ch; margin:2px auto 0}
.gr-cap .gr-meta{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.gr-cap .gr-meta span{padding:3px 10px; border-radius:999px; background:var(--sunk); border:1px solid var(--line); font-size:11.5px; color:var(--ink2)}
.home-cta{display:flex; gap:9px; margin-top:8px; position:relative; z-index:1}
.home-cta .btn{flex:1.4; min-height:54px; font-size:16.5px}
.home-cta .ghost{flex:1; min-height:54px; font-size:14px; color:var(--ink2); border-color:var(--line2)}
/* الألعاب والغرف والأندية */
.gcat{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; position:relative; z-index:1}
.gcat-item{display:flex; flex-direction:column; min-width:0}
.tab-row{display:flex; gap:9px; margin-top:16px; position:relative; z-index:1}
.tab-row .ghost{flex:1; min-height:50px; font-size:14px; color:var(--ink2); border-color:var(--line2)}
.tab-cols{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; position:relative; z-index:1}
.tab-link{display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:start; font:inherit; color:var(--ink)}
.tab-link .tl-ic{width:44px; height:44px; border-radius:14px; background:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.tab-link .tl-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.tab-link .tl-t b{font-size:15px; font-weight:800}
.tab-link .tl-t span{font-size:12.5px; line-height:1.6; color:var(--muted)}
.foot-line{text-align:center; font-size:11px; color:var(--faint); margin-top:18px; position:relative; z-index:1}
/* شريط الأقسام: كحلي، أربعة أقسام، والحالي بخلفية زرقاء خلف أيقونته */
.tabbar{position:fixed; bottom:0; inset-inline:0; z-index:30; margin:0 auto; max-width:430px; display:flex; gap:2px; background:var(--brand-black); padding:6px 8px calc(6px + var(--safe-b)); border-radius:22px 22px 0 0; box-shadow:0 -8px 24px rgba(10,24,36,.2)}
.tabbar .tb{flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:14px; color:rgba(235,248,255,.74); font-size:11.5px; font-weight:700; line-height:1.3}
.tabbar .tb-ic{width:42px; height:30px; border-radius:15px; display:flex; align-items:center; justify-content:center; transition:background .2s ease}
.tabbar .tb.on{color:#FFFFFF}
.tabbar .tb.on .tb-ic{background:var(--brand)}
body.has-tabbar #app{padding-bottom:calc(92px + var(--safe-b))}
body.has-tabbar .helpfab{bottom:calc(88px + var(--safe-b))}
@media (prefers-reduced-motion:reduce){ .gr-item, .tabbar .tb-ic{transition:none} }

/* ---- الآيباد وما فوق: بلا إطار جوال — الصفحة كاملة والمحتوى في النص ---- */
@media (min-width:700px){
  #frame{padding:0; align-items:stretch}
  #app{max-width:640px; min-height:100dvh; border:0; border-radius:0; box-shadow:none; padding-inline:28px}
  #app.wide{max-width:1040px}
  .tabbar{bottom:14px; inset-inline:16px; max-width:520px; border-radius:22px; padding-bottom:6px}
  body.has-tabbar #app{padding-bottom:calc(104px + var(--safe-b))}
  body.has-tabbar .helpfab{bottom:calc(96px + var(--safe-b))}
  .hero-slide{height:240px}
  .hero-slide .sticker{font-size:38px}
  .hero-slide .hs-line{font-size:17px}
  .grail{margin-inline:-28px; padding-inline:calc(50% - 92px)}
  .gr-item{flex-basis:184px; height:184px}
  .gcat{grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start}
  .tab-cols{grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start}
  .tab-row{max-width:640px}
}
/* ---- اللابتوب: شريط الأقسام فوق، والألعاب شبكة ثابتة كل بطاقة باسمها ---- */
@media (min-width:1100px){
  #app.wide{max-width:1240px; padding:0 40px 40px}
  body.has-tabbar #app{padding-bottom:40px}
  body.has-tabbar .helpfab{bottom:calc(16px + var(--safe-b))}
  .tabbar{position:relative; order:-1; inset:auto; bottom:auto; margin:18px auto 6px; width:100%; max-width:600px; border-radius:18px; padding:6px; box-shadow:none}
  .tabbar .tb{flex-direction:row; gap:8px; min-height:48px; font-size:15px}
  .tabbar .tb-ic{width:36px; height:36px; border-radius:50%}
  .hero-slide{height:270px}
  .hero-slide .hs-art{height:300px}
  .grail{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-flow:dense; gap:16px; overflow:visible; padding:4px 0 0; margin:0}
  .gr-item{flex:none; width:auto; height:200px; transform:none; opacity:1; box-shadow:0 12px 26px rgba(var(--ink-rgb),.16)}
  .gr-item:first-child{grid-column:span 2}
  .gr-item:hover{transform:translateY(-3px)}
  .gr-item .gr-art{inset:auto; inset-block-end:10px; inset-inline-end:12px; margin:0; width:auto; height:62%}
  .gr-item .gr-pair{inset:auto; inset-block-end:-4px; inset-inline-end:10px; height:auto}
  .gr-item .gr-label{display:flex; flex-direction:column; position:absolute; inset-inline-start:18px; top:16px; max-width:62%; text-align:start; gap:2px}
  .gr-item .gr-label b{font-size:22px; font-weight:900; line-height:1.4; color:var(--w-ink)}
  .gr-item .gr-label span{font-size:13px; font-weight:700; color:var(--w-sub)}
  .gr-item .gr-badge{top:auto; bottom:14px; inset-inline-start:18px}
  .gr-cap{display:none}
  .home-cta{max-width:560px; margin:22px auto 0; width:100%}
  .gcat{grid-template-columns:repeat(3, minmax(0,1fr))}
  .tab-cols{max-width:1040px; margin:0 auto; width:100%}
}

/* ================= v98 · قوانين المجلس، وألعاب الشخصين بنفس المستوى، والشعار في البانر ================= */
/* الشعار في الشريحة الأولى بدل «يلا تيلة!» — أبيض على الأزرق، بلا ظلّ ولا تأثير (أخطاء الشعار في الدليل) */
.hero-slide .hs-logo{display:block; line-height:0}
.hero-slide .hs-logo svg{height:58px; width:auto}
@media (min-width:700px){ .hero-slide .hs-logo svg{height:72px} }
@media (min-width:1100px){ .hero-slide .hs-logo svg{height:84px} }
/* «للمجلس» و«لشخصين» فوق الدوّارة */
.gr-jump{display:flex; gap:6px; margin-inline-start:auto}
.gr-jump .pill{min-height:44px; padding:0 14px; display:inline-flex; align-items:center; font-size:13.5px; font-weight:700; border-radius:22px}
.sec-head.home-sec{align-items:center}
@media (min-width:1100px){ .gr-jump{display:none} }
/* صندوق «قوانين المجلس»: كل قانون سطر — عنوانه ووش يصير، والمضيف يبدّله */
.rules-card{padding:14px 16px 6px; margin-top:12px; position:relative; z-index:1}
.rules-card .rc-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:8px}
.rules-card .rc-head b{font-size:15.5px; font-weight:900; color:var(--ink); line-height:1.4}
.rules-card .rc-head span{flex-basis:100%; font-size:12px; color:var(--muted); line-height:1.6}
.rule-row{display:flex; align-items:center; gap:12px; min-height:62px; padding:10px 0; border-top:1px solid var(--line)}
.rule-row .rr-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.rule-row .rr-t b{font-size:14px; font-weight:700; color:var(--ink); line-height:1.5}
.rule-row .rr-t span{font-size:11.5px; line-height:1.6; color:var(--muted)}
.rule-row .rr-st{flex-shrink:0; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--sunk); color:var(--muted)}
.rule-row .rr-st.on{background:var(--brand); color:#FFFFFF}
.rule-roles{display:flex; flex-direction:column; gap:8px; padding:12px 0 10px; border-top:1px solid var(--line)}
.rule-roles > b{font-size:14px; font-weight:700; color:var(--ink)}
.rule-roles > span{font-size:13px; color:var(--ink2); line-height:1.7}
.rule-roles small{font-size:11px; color:var(--muted); line-height:1.6}
.rr-pills{display:flex; flex-wrap:wrap; gap:7px}
.rr-pills .pill{min-height:44px}

/* ================= v100 · أيقونات الهوية بدل الإيموجي، ولوبي الغرف بعمودين على اللابتوب ================= */
/* أيقونة وسط سطر نص: تتوسّط السطر وتاخذ لون النص */
.ic-in{display:inline-flex; vertical-align:-0.18em; line-height:0}
/* ميدالية المركز: دائرة بلون الهوية ورقم المركز — بدل 🥇🥈🥉 */
.medal{display:inline-grid; place-items:center; width:1.4em; height:1.4em; min-width:20px; min-height:20px; border-radius:50%; vertical-align:middle; line-height:1; flex-shrink:0; background:var(--brand-yellow); color:var(--brand-black)}
.medal b{font-size:max(.62em, 11px); font-weight:800; line-height:1}
.medal.m2{background:var(--paper-line)}
.medal.m3{background:var(--brand-orange); color:var(--white)}
/* بطاقة الحكم الصفراء والحمراء بجنب اسم اللاعب */
.pcard{display:inline-block; width:.62em; height:.86em; min-width:9px; min-height:12px; border-radius:2px; vertical-align:-0.08em; margin-inline-start:2px}
.pcard.y{background:var(--brand-yellow)}
.pcard.r{background:var(--card-red)}
/* v106 «مكان للإعدادات»: تبويبا «الغرفة/المجلس | الإعدادات» تحت شريط اللعبة بدل صفحة وحدة طويلة */
.set-tabs{display:flex; gap:4px; padding:4px; margin:0 0 12px; border-radius:15px; background:var(--sunk); border:1px solid var(--line); position:relative; z-index:1}
.set-tabs .pill{flex:1; min-width:0; min-height:46px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:14.5px; font-weight:700; line-height:1.4; border-radius:11px; border-color:transparent; background:transparent; color:var(--muted)}
.set-tabs .pill.on{background:var(--card); border-color:var(--brass); color:var(--brass-deep); box-shadow:var(--shadow)}
.set-pane > *{margin-top:0 !important}
/* مجموعة إعدادات: بطاقة بعنوان صغير وصفوف بفواصل — بدل بطاقة لكل إعداد */
.set-group{padding:4px 16px 2px; margin-top:12px; position:relative; z-index:1}
.set-group .sg-h{font-size:12.5px; font-weight:800; color:var(--muted); line-height:1.5; padding:10px 0 6px}
.set-row{display:flex; align-items:center; gap:12px; min-height:60px; padding:9px 0; border-top:1px solid var(--line)}
.set-row .sr-ic{display:flex; flex-shrink:0}
.set-row .sr-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.set-row .sr-t b{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.5}
.set-row .sr-t span{font-size:11px; color:var(--muted); line-height:1.6}
.set-row .sr-c{display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap}
.set-row .pill{min-height:44px; min-width:44px; padding:8px 12px; display:inline-flex; align-items:center; justify-content:center}
.set-row.wrap{flex-wrap:wrap}
.set-row.wrap .sr-c{flex-basis:100%; padding-inline-start:30px}
/* اللوبي: على الجوال والآيباد عمود واحد بتبويبين؛ على اللابتوب يظهر الكل — اللعبة فوق، الرمز واللاعبون ثم القوانين | الإعدادات */
.lobby-cols, .lobby-cols > div, .lobby-go{display:contents}
.lobby-cols.tab-main > :not(.lc-main), .lobby-cols.tab-set > .lc-main{display:none}
#app:not(.lobby-wide) .lobby-cols > .lc-sw:empty + .lc-rules > :first-child{margin-top:0}
#app:not(.lobby-wide) .lobby-cols > .lc-sw:empty + .lc-rules:empty + .lc-side > :first-child{margin-top:0 !important}
@media (min-width:1100px){
  #app.lobby-wide{max-width:1180px}
  #app.lobby-wide .set-tabs{display:none}
  #app.lobby-wide .lobby-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"sw sw" "main side" "rules side"; grid-template-rows:auto auto 1fr; gap:0 28px; align-items:start; position:relative; z-index:1}
  #app.lobby-wide .lobby-cols > div{display:flex; flex-direction:column; min-width:0}
  #app.lobby-wide .lobby-cols > .lc-sw{grid-area:sw}
  #app.lobby-wide .lobby-cols > .lc-sw > .card{margin-bottom:14px}
  #app.lobby-wide .lobby-cols > .lc-main{grid-area:main}
  #app.lobby-wide .lobby-cols > .lc-rules{grid-area:rules}
  #app.lobby-wide .lobby-cols > .lc-side{grid-area:side}
  #app.lobby-wide .lobby-cols > div:not(.lc-rules) > :first-child{margin-top:0 !important}
  #app.lobby-wide .lobby-go{display:flex; flex-direction:column; width:100%; max-width:560px; align-self:center}
}
/* v109: اسم طويل بلا مسافات («عبدالرحمنعبدالعزيز») في العناوين الكبيرة والشرائح ينكسر على سطرين، بدل ما ينقص من طرفي الشاشة.
   ما يكسر كلمة تكفيها المساحة — بس اللي ما لها مكان */
.kufi, .chip{overflow-wrap:anywhere}