/* ============ خمّنها — استايل كرتوني فاتح (كريم/تيل) ============ */
:root{
  --bg0:#f7e9d6; --bg1:#f3ddc0; --bg2:#efd4b3;
  --ink:#2c2722;            /* حدود ونصوص داكنة */
  --card:#fdf8f0;           /* بطاقات بيضاء دافئة */
  --card2:#fbf2e6;
  --txt:#2c2722; --muted:#9b8b76;
  --teal:#2bb6a8; --teal-d:#1f9c90; --teal-ink:#15756c;
  --coral:#ef5b46; --coral-d:#e0432e;
  --yellow:#ffd23f; --yellow-d:#f5b800;
  --blue:#46a7e0; --green:#37c08a; --red:#ef5a6e; --purple:#9b6dff;
  --gold:#f5a623;
  --line:rgba(44,39,34,.14);
  --radius:24px;
  --sh-card:6px 6px 0 rgba(44,39,34,.10), 0 14px 34px rgba(44,39,34,.10);
  --bd:2.5px solid var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Cairo',system-ui,sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,210,63,.18), transparent 9%),
    radial-gradient(circle at 85% 22%, rgba(43,182,168,.16), transparent 8%),
    radial-gradient(circle at 70% 80%, rgba(239,91,70,.12), transparent 9%),
    radial-gradient(circle at 25% 75%, rgba(155,109,255,.12), transparent 8%),
    linear-gradient(160deg,var(--bg0),var(--bg1) 55%,var(--bg2));
  color:var(--txt); min-height:100vh; overflow-x:hidden;
}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}
.app{position:relative;z-index:1;max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:16px}

/* ===== screens & anims ===== */
.screen{display:none;flex:1;flex-direction:column;animation:fade .35s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pop-in{animation:pop .42s cubic-bezier(.2,1.5,.5,1) both}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.float{animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ===== VS انميشن ===== */
.vs-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  animation:vsFade .5s ease both}
.vs-overlay.hide{animation:vsFade .4s ease reverse both;pointer-events:none}
.vs-bg{position:absolute;inset:0;background:linear-gradient(150deg,var(--teal-d),var(--coral-d));opacity:.97}
.vs-content{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;width:100%;max-width:480px;padding:20px}
.vs-side{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.vs-avatar{font-size:72px;animation:vsPop .5s cubic-bezier(.2,1.5,.5,1) both;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.2))}
.vs-name{font-size:22px;font-weight:900;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.2)}
.vs-middle{display:flex;flex-direction:column;align-items:center;gap:6px}
.vs-letter{font-size:52px;animation:vsPulse 1s ease infinite;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.25))}
.vs-round{font-size:14px;font-weight:900;color:rgba(255,255,255,.85);background:rgba(0,0,0,.2);border-radius:20px;padding:4px 14px}
@keyframes vsFade{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}
@keyframes vsPop{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes vsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* ===== brand ===== */
.brand{text-align:center;margin-bottom:18px}
.logo-badge{width:88px;height:88px;margin:0 auto 10px;border-radius:24px;
  display:flex;align-items:center;justify-content:center;font-size:46px;
  background:linear-gradient(150deg,var(--coral),var(--yellow));
  border:var(--bd); box-shadow:5px 5px 0 var(--ink)}
.brand-name{font-size:42px;font-weight:900;letter-spacing:.5px;color:var(--teal-ink);
  text-shadow:2px 2px 0 rgba(44,39,34,.12)}
.brand-name.big{font-size:54px}
.brand-tag{display:block;color:var(--muted);font-weight:800;font-size:12px;letter-spacing:2px;margin-top:4px}

/* ===== login ===== */
.login-card{background:var(--card);border:var(--bd);border-radius:var(--radius);
  padding:26px 22px;box-shadow:var(--sh-card);margin:auto;width:100%}
.field-label{display:block;font-weight:800;font-size:13px;color:var(--muted);margin:14px 2px 8px}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avatar-opt{aspect-ratio:1;border:var(--bd);background:#fff;border-radius:14px;font-size:24px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.16s;box-shadow:2px 2px 0 rgba(44,39,34,.18)}
.avatar-opt:hover{transform:translateY(-2px)}
.avatar-opt.sel{background:var(--yellow);box-shadow:3px 3px 0 var(--ink);transform:scale(1.05)}
.text-input{width:100%;padding:14px 16px;border-radius:14px;border:var(--bd);background:#fff;
  color:var(--txt);font-family:inherit;font-size:16px;font-weight:700;outline:none;transition:.16s}
.text-input::placeholder{color:#c4b6a3}
.text-input:focus{box-shadow:3px 3px 0 var(--teal)}
.code-input{text-align:center;letter-spacing:10px;font-size:28px;font-weight:900;text-transform:uppercase}

/* ===== buttons ===== */
.btn{position:relative;border:var(--bd);cursor:pointer;font-family:inherit;font-weight:900;font-size:16px;
  color:#fff;border-radius:16px;padding:14px 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.12s}
.btn span{position:relative;z-index:1}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-block{width:100%;margin-top:16px}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:12px;border-width:2px}
.btn-ic{font-size:20px}
.btn-primary{background:linear-gradient(150deg,var(--teal),var(--teal-d));box-shadow:0 5px 0 var(--ink)}
.btn-secondary{background:linear-gradient(150deg,var(--blue),#3a8fc7);box-shadow:0 5px 0 var(--ink)}
.btn-accent{background:linear-gradient(150deg,var(--coral),var(--coral-d));box-shadow:0 5px 0 var(--ink)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn-3d:active,.btn-primary:active,.btn-secondary:active,.btn-accent:active,.btn-ghost:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.btn-hint{background:linear-gradient(150deg,var(--yellow),var(--yellow-d));color:#5a4200;font-size:14px;padding:10px 14px;box-shadow:0 4px 0 var(--ink)}
.btn-smart{background:linear-gradient(150deg,var(--purple),#7d4dff);font-size:14px;padding:10px 14px;box-shadow:0 4px 0 var(--ink)}
.btn-hint:active,.btn-smart:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}

/* ===== menu ===== */
.topbar{display:flex;justify-content:flex-start;margin-bottom:10px}
.menu-hero{text-align:center;margin:auto 0 18px}
.subtitle{color:var(--muted);font-weight:800;margin-top:8px}
.menu-buttons{display:flex;flex-direction:column;gap:14px;margin-top:0;margin-bottom:auto}
.menu-row{display:flex;gap:14px}
.btn.half{flex:1}
.profile-chip{display:flex;align-items:center;gap:10px;background:var(--card);border:var(--bd);
  border-radius:44px;padding:5px 6px 5px 14px;box-shadow:4px 4px 0 rgba(44,39,34,.14)}
.profile-avatar{font-size:22px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--yellow),var(--yellow-d));border:2px solid var(--ink);border-radius:50%}
.profile-name{font-weight:900;font-size:14px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--teal-ink)}
.coins-pill{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(150deg,var(--yellow),var(--yellow-d));color:#5a4200;font-weight:900;
  padding:7px 14px;border-radius:30px;font-size:14px;border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(44,39,34,.18)}
.chip-x{background:#fff;border:2px solid var(--ink);color:var(--coral);width:30px;height:30px;border-radius:50%;cursor:pointer;font-weight:900;transition:.14s}
.chip-x:hover{background:var(--coral);color:#fff}

/* ===== titles / panels ===== */
.title-lg{font-size:23px;font-weight:900;color:var(--teal-ink)}
.title-xl{font-size:32px;font-weight:900;color:var(--teal-ink)}
.center{text-align:center}
.title-lg.center{margin:8px 0 18px}
.panel{background:var(--card);border:var(--bd);border-radius:var(--radius);padding:22px;box-shadow:var(--sh-card);margin:auto 0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.back-btn{align-self:flex-start;background:#fff;border:var(--bd);color:var(--ink);font-family:inherit;font-weight:900;
  padding:8px 16px;border-radius:30px;cursor:pointer;margin-bottom:14px;box-shadow:3px 3px 0 rgba(44,39,34,.15);text-decoration:none;display:inline-block}
.muted{color:var(--muted);font-size:13px;text-align:center;margin-top:10px;font-weight:700}

/* ===== modes ===== */
.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mode-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:right;
  background:var(--card);border:var(--bd);border-radius:20px;padding:18px;cursor:pointer;color:var(--txt);
  font-family:inherit;transition:.16s;box-shadow:5px 5px 0 rgba(44,39,34,.12)}
.mode-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--teal)}
.mc-ic{font-size:40px}
.mc-name{font-size:19px;font-weight:900;color:var(--teal-ink)}
.mc-desc{font-size:12px;color:var(--muted);font-weight:700;line-height:1.5}

/* ===== chips ===== */
.chips-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{display:flex;align-items:center;gap:8px;background:#fff;border:var(--bd);border-radius:14px;padding:12px;
  cursor:pointer;color:var(--txt);font-family:inherit;font-weight:800;font-size:14px;transition:.14s;box-shadow:2px 2px 0 rgba(44,39,34,.15)}
.chip:hover{transform:translateY(-2px)}
.chip.sel{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.chip .c-ic{font-size:22px}
.chip .c-count{margin-right:auto;font-size:11px;color:var(--muted)}
.cfg-group{margin-top:4px}
.rounds-row{display:flex;gap:10px;flex-wrap:wrap}
.pill-opt{min-width:54px;text-align:center;background:#fff;border:var(--bd);border-radius:30px;padding:10px 16px;
  cursor:pointer;font-weight:900;color:var(--txt);transition:.14s;box-shadow:2px 2px 0 rgba(44,39,34,.15)}
.pill-opt.sel{background:var(--teal);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.switch-row{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:800;font-size:14px;color:var(--muted);cursor:pointer}
.switch-row input{width:20px;height:20px;accent-color:var(--teal)}

/* ===== room browser ===== */
.rooms-list{display:flex;flex-direction:column;gap:12px;max-height:62vh;overflow-y:auto;padding:4px}
.room-item{display:flex;align-items:center;gap:12px;background:#fff;border:var(--bd);border-radius:18px;padding:14px;
  cursor:pointer;animation:pop .35s both;box-shadow:3px 3px 0 rgba(44,39,34,.12);transition:.14s}
.room-item:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--teal)}
.room-mode-ic{font-size:30px}
.room-info{flex:1;min-width:0}
.room-host{font-weight:900;font-size:15px;color:var(--teal-ink)}
.room-sub{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
.room-count{font-size:14px;font-weight:900;color:var(--teal-d)}
.room-empty{text-align:center;color:var(--muted);font-weight:800;padding:40px 0;line-height:1.8}
.room-code-mini{font-family:monospace;font-weight:900;color:var(--coral);letter-spacing:1px}

/* ===== lobby ===== */
.room-code-box{display:flex;align-items:center;gap:10px;justify-content:center;background:#fff;
  border:2.5px dashed var(--ink);border-radius:16px;padding:12px;margin:14px 0}
.rc-label{color:var(--muted);font-weight:800;font-size:13px}
.rc-value{font-size:30px;font-weight:900;letter-spacing:6px;color:var(--coral)}
.lobby-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.meta-pill{background:#fff;border:2px solid var(--ink);border-radius:30px;padding:6px 14px;font-weight:800;font-size:13px;color:var(--teal-ink)}
.players-list{display:flex;flex-direction:column;gap:10px}
.player-row{display:flex;align-items:center;gap:12px;background:#fff;border:var(--bd);border-radius:14px;padding:12px;
  animation:pop .3s both;box-shadow:2px 2px 0 rgba(44,39,34,.12)}
.pr-avatar{font-size:26px}
.pr-name{font-weight:900;flex:1}
.pr-badge{font-size:11px;font-weight:900;padding:3px 10px;border-radius:20px;border:2px solid var(--ink)}
.pr-host{background:var(--yellow);color:#5a4200}
.pr-ai{background:#d5edfb;color:#1c6e9c}

/* ===== game ===== */
.game-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.round-pill{background:#fff;border:var(--bd);border-radius:30px;padding:8px 16px;font-weight:900;font-size:14px;color:var(--teal-ink)}
.timer-pill{background:linear-gradient(150deg,var(--coral),var(--coral-d));color:#fff;border:2px solid var(--ink);
  border-radius:30px;padding:8px 16px;font-weight:900;font-size:16px}
.timer-pill.low{animation:pulse .6s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.players-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0;margin-bottom:8px}
.ps-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:var(--bd);
  border-radius:14px;padding:8px 12px;min-width:64px;transition:.2s;box-shadow:2px 2px 0 rgba(44,39,34,.12)}
.ps-item.turn{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.ps-item.out{opacity:.4;filter:grayscale(1)}
.ps-av{font-size:22px}
.ps-name{font-size:11px;font-weight:800;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-score{font-size:13px;font-weight:900;color:var(--coral)}
.commentary{background:#fff;border:var(--bd);border-radius:14px;padding:10px 14px;font-weight:800;font-size:14px;
  margin-bottom:8px;animation:pop .3s both;color:var(--teal-ink);box-shadow:3px 3px 0 rgba(43,182,168,.25)}
.commentary::before{content:"\ud83e\udd16 ";}
.turn-banner{text-align:center;font-weight:900;font-size:15px;margin-bottom:10px;min-height:22px;transition:.2s}
.turn-banner.mine{color:var(--teal);animation:pulse .8s infinite}
.turn-banner.wait{color:var(--muted)}
.secret-card{background:linear-gradient(150deg,#fff,var(--card2));border:var(--bd);border-radius:18px;padding:16px;
  text-align:center;box-shadow:var(--sh-card);margin-bottom:12px}
.sc-tag{display:block;color:var(--muted);font-weight:800;font-size:12px}
.sc-name{display:block;font-size:26px;font-weight:900;margin:6px 0 12px;color:var(--teal-ink)}
.sc-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hint-box{margin-top:12px;background:#fffaf0;border:2px dashed var(--gold);border-radius:12px;padding:10px;
  font-weight:800;font-size:14px;color:#9a6a00;animation:pop .3s both}
.chat-wrap{flex:1;display:flex;flex-direction:column;background:#fff;border:var(--bd);border-radius:16px;padding:10px;margin-bottom:10px;min-height:140px}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px;max-height:30vh}
.msg{max-width:82%;padding:8px 12px;border-radius:14px;font-size:14px;font-weight:700;animation:pop .25s both;word-break:break-word;border:2px solid var(--ink)}
.msg .m-name{display:block;font-size:11px;color:rgba(255,255,255,.85);font-weight:900;margin-bottom:2px}
.msg.them{align-self:flex-start;background:#f1e7d8;color:var(--ink);border-bottom-right-radius:4px}
.msg.them .m-name{color:var(--muted)}
.msg.me{align-self:flex-end;background:linear-gradient(150deg,var(--teal),var(--teal-d));color:#fff;border-bottom-left-radius:4px}
.msg.sys{align-self:center;background:var(--yellow);color:#5a4200;font-size:12px;font-weight:900;text-align:center}
.chat-input-row{display:flex;gap:6px;align-items:center;margin-top:8px}
.icon-btn{flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:var(--bd);background:#fff;color:var(--ink);
  font-size:18px;cursor:pointer;transition:.14s;box-shadow:2px 2px 0 rgba(44,39,34,.15)}
.icon-btn:disabled{opacity:.4;pointer-events:none}
.icon-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}
.icon-btn.send{background:linear-gradient(150deg,var(--teal),var(--teal-d));color:#fff}
.icon-btn.on{background:linear-gradient(150deg,var(--green),#2aa873);color:#fff}
.icon-btn.rec{background:var(--red);color:#fff;animation:pulse .8s infinite}
.target-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.target-label{font-weight:900;font-size:13px;color:var(--muted)}
.target-chips{display:flex;gap:6px;flex-wrap:wrap}
.target-chip{background:#fff;border:2px solid var(--ink);border-radius:30px;padding:6px 12px;font-weight:800;font-size:13px;cursor:pointer;color:var(--txt);transition:.14s}
.target-chip.sel{background:var(--blue);color:#fff}
.guess-wrap{display:flex;gap:8px;align-items:center}
.guess-wrap .text-input{flex:1}
.guess-wrap .btn{flex:0 0 auto;padding:14px 16px}
.guess-wrap .btn:disabled{opacity:.4;pointer-events:none}
.guess-wrap .text-input:disabled{opacity:.4}

/* ===== over ===== */
.over-panel{text-align:center}
.trophy{font-size:70px;margin-bottom:6px}
.over-scores{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.os-row{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:10px 14px}
.os-row.win{background:var(--yellow)}
.os-rank{font-weight:900;width:24px}
.os-name{flex:1;text-align:right;font-weight:900}
.os-score{font-weight:900;color:var(--coral)}

/* ===== modal / toast / footer ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(44,39,34,.45);backdrop-filter:blur(3px);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border:var(--bd);border-radius:var(--radius);padding:24px;box-shadow:var(--sh-card);width:100%;max-width:440px}
.lb-list{display:flex;flex-direction:column;gap:8px;margin:16px 0;max-height:50vh;overflow-y:auto}
.lb-row{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:10px 12px}
.lb-rank{font-weight:900;width:30px;font-size:18px}
.lb-name{flex:1;font-weight:900}
.lb-coins{font-weight:900;color:var(--coral);font-size:13px}
.sound-toggle{position:fixed;top:12px;left:12px;z-index:40;width:46px;height:46px;border-radius:50%;
  border:var(--bd);background:#fff;color:var(--ink);font-size:18px;cursor:pointer;box-shadow:3px 3px 0 rgba(44,39,34,.18)}
.sound-toggle:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}
.site-footer{text-align:center;color:var(--muted);font-weight:800;font-size:12px;padding:14px 0 6px}
.site-footer a{color:var(--coral);font-weight:900;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:60;
  background:linear-gradient(150deg,var(--teal),var(--teal-d));color:#fff;font-weight:900;padding:12px 22px;
  border-radius:30px;border:var(--bd);box-shadow:4px 4px 0 var(--ink);animation:pop .3s both;max-width:90vw;text-align:center}
.toast.err{background:linear-gradient(150deg,var(--coral),var(--coral-d))}
.toast.coin{background:linear-gradient(150deg,var(--yellow),var(--yellow-d));color:#5a4200}

@media(max-width:420px){
  .brand-name.big{font-size:44px}
  .modes-grid{gap:10px}
  .mc-ic{font-size:34px}
}

/* تأكيد إخفاء العناصر المخفية */
[hidden]{display:none!important}

.lobby-ai-controls{display:flex;gap:10px;justify-content:center;margin:6px 0 12px;flex-wrap:wrap}
.lobby-ai-controls .btn{flex:1;min-width:130px}
.lobby-ai-controls .btn:disabled{opacity:.45;cursor:not-allowed}

/* ===== profile level + modals ===== */
.profile-meta{display:flex;flex-direction:column;line-height:1.1}
.profile-level{font-size:11px;font-weight:900;color:var(--teal);background:#fff;border:2px solid var(--ink);border-radius:20px;padding:1px 7px;margin-top:2px;align-self:flex-start}
.prof-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.prof-avatar{font-size:38px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--card2);border:var(--bd);border-radius:50%}
.prof-title{font-weight:800;color:var(--coral);font-size:14px}
.prof-level-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.prof-lvl-badge{font-weight:900;color:#fff;background:linear-gradient(150deg,var(--teal),var(--teal-d));border:2px solid var(--ink);border-radius:20px;padding:4px 12px;font-size:13px;white-space:nowrap}
.xp-bar{flex:1;height:14px;background:#fff;border:2px solid var(--ink);border-radius:20px;overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--coral));border-radius:20px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.prof-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.prof-stat{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:3px 3px 0 rgba(44,39,34,.12)}
.ps-ic{font-size:20px}
.ps-num{font-size:19px;font-weight:900;color:var(--teal-ink)}
.ps-lbl{font-size:10px;font-weight:800;color:var(--muted);margin-top:2px}
.set-sep{border:none;border-top:2.5px dashed var(--line,#e6d8c4);margin:16px 0}
@media(max-width:480px){.prof-stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== themes ===== */
[data-theme="ocean"]{--bg0:#dff1fb;--bg1:#cfe9f7;--bg2:#bfe0f2;--teal:#2e8fd8;--teal-d:#2374b3;--teal-ink:#185a8c;--coral:#ff7a59;--coral-d:#ef5e3c;--yellow:#ffce4d;--yellow-d:#f4b41e;--card:#f6fbff;--card2:#ecf6fd}
[data-theme="candy"]{--bg0:#fce7f3;--bg1:#fbd9ec;--bg2:#f9cbe3;--teal:#e1559b;--teal-d:#c93f86;--teal-ink:#a32a69;--coral:#7b6cf0;--coral-d:#6354dd;--yellow:#ffc24d;--yellow-d:#f5a91e;--card:#fff5fb;--card2:#fdeaf5}
[data-theme="forest"]{--bg0:#e4f3e1;--bg1:#d6ecd0;--bg2:#c8e4bf;--teal:#3a9d5d;--teal-d:#2e8049;--teal-ink:#1f6336;--coral:#e08b3c;--coral-d:#cf7526;--yellow:#f4cf45;--yellow-d:#e6b71f;--card:#f6fcf3;--card2:#ecf6e8}
[data-theme="sunset"]{--bg0:#ffe9d6;--bg1:#ffdcc0;--bg2:#ffcfab;--teal:#f0803a;--teal-d:#dd6824;--teal-ink:#b54e15;--coral:#e0506b;--coral-d:#cb3a55;--yellow:#ffc24d;--yellow-d:#f5a81e;--card:#fff6ee;--card2:#ffeadc}

/* ===== settings: theme + sound ===== */
.set-sep{border:none;border-top:2px dashed var(--line);margin:14px 0}
.theme-row{display:flex;gap:12px;justify-content:center;margin:6px 0 12px}
.theme-dot{width:34px;height:34px;border-radius:50%;border:var(--bd);cursor:pointer;transition:.14s;box-shadow:2px 2px 0 rgba(44,39,34,.12)}
.theme-dot:hover{transform:translateY(-2px)}
.theme-dot.sel{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--ink);transform:scale(1.08)}
.set-toggle-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0 4px}
.toggle-btn{border:var(--bd);border-radius:20px;padding:6px 16px;font-family:inherit;font-weight:900;font-size:13px;cursor:pointer;background:#ddd;color:var(--muted);transition:.14s}
.toggle-btn.on{background:linear-gradient(150deg,var(--teal),var(--teal-d));color:#fff}

/* ===== achievements ===== */
.sect-h{font-weight:900;font-size:15px;margin:14px 0 8px;text-align:center;color:var(--teal-ink)}
.achv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.achv{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:2px solid var(--ink);border-radius:14px;background:var(--card2);transition:.14s}
.achv.off{opacity:.38;filter:grayscale(.7)}
.achv.on{background:linear-gradient(160deg,#fff6df,#ffe9b0)}
.achv-ic{font-size:24px;line-height:1}
.achv-nm{font-weight:800;font-size:10px;text-align:center;color:var(--ink)}

/* ===== shop ===== */
.coins-pill{background:linear-gradient(150deg,var(--yellow),var(--yellow-d));border:var(--bd);border-radius:20px;padding:4px 12px;font-weight:900;font-size:14px;color:#5a4200}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;max-height:46vh;overflow:auto}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:var(--bd);border-radius:16px;background:var(--card2)}
.shop-item.owned{background:linear-gradient(160deg,#e7f7ee,#cfeede)}
.shop-av{font-size:38px;line-height:1}
.shop-buy{border:var(--bd);border-radius:18px;padding:5px 12px;font-family:inherit;font-weight:900;font-size:13px;cursor:pointer;background:linear-gradient(150deg,var(--coral),var(--coral-d));color:#fff;transition:.12s}
.shop-buy:hover{transform:translateY(-1px)}
.shop-tag.own{font-weight:900;font-size:12px;color:var(--teal-ink)}

/* ===== Phase-13: skins / shop tabs / wheel / report / card-info ===== */
.game-tools{display:flex;justify-content:flex-start;margin:2px 0 4px}
.btn-report{font-size:12px;padding:3px 10px;opacity:.85}
.card-info{margin-top:8px;background:rgba(43,160,150,.10);border:1px solid rgba(43,160,150,.35);border-radius:12px;padding:9px 12px;text-align:right;font-size:13px;line-height:1.5}
.card-info .ci-title{font-weight:800;margin-bottom:4px;color:var(--accent,#2ba096)}
.card-info ul{margin:0;padding-inline-start:18px}
.card-info li{margin:2px 0}

.shop-tabs{display:flex;gap:8px;margin-bottom:12px}
.shop-tab{flex:1;padding:9px 6px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:transparent;color:inherit;cursor:pointer;font-weight:800;font-size:13px;transition:.18s}
.shop-tab.sel{background:var(--accent,#2ba096);color:#fff;box-shadow:0 4px 14px rgba(43,160,150,.4)}
.shop-grid.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.skin-item{border-radius:16px;padding:10px 8px;text-align:center;border:2px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);position:relative}
.skin-item.tier-epic{border-color:#3aa0d0}
.skin-item.tier-legendary{border-color:#e0b341}
.skin-item.equipped{outline:2px solid #5cc28a;outline-offset:1px}
.skin-preview{width:62px;height:84px;margin:0 auto 6px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),0 6px 16px rgba(0,0,0,.35);overflow:hidden;position:relative}
.skin-name{font-weight:800;font-size:13px}
.skin-tier{font-size:11px;opacity:.85;margin-bottom:6px}
.skin-tier.t-epic{color:#3aa0d0}
.skin-tier.t-legendary{color:#e0b341}
.shop-equip,.skin-item .shop-buy{border:none;border-radius:9px;padding:5px 12px;font-weight:800;cursor:pointer;font-size:12px}
.shop-equip{background:#5cc28a;color:#06281c}

/* skin palettes (preview + secret-card) */
.skin-classic{background:linear-gradient(135deg,#3a4a5a,#22303c)}
.skin-paper{background:linear-gradient(135deg,#efe6d0,#cbb88f);color:#3a2f1a}
.skin-wood{background:linear-gradient(135deg,#8a5a2b,#5a3a1a)}
.skin-ocean{background:linear-gradient(135deg,#1c6ea4,#0b3d63)}
.skin-flame{background:linear-gradient(135deg,#ff6a3d,#b21f1f)}
.skin-neon{background:linear-gradient(135deg,#00f0ff,#7d00ff)}
.skin-galaxy{background:radial-gradient(circle at 30% 25%,#7d5cff 0,transparent 45%),radial-gradient(circle at 75% 70%,#ff5ce0 0,transparent 40%),linear-gradient(135deg,#1a1140,#0a0820)}
.skin-gold{background:linear-gradient(135deg,#fff1a8,#e0b341 55%,#a87a1a)}
.skin-phoenix{background:radial-gradient(circle at 50% 110%,#ffd23d 0,transparent 55%),linear-gradient(135deg,#ff9a3d,#ff3d3d 60%,#7d1f1f)}

/* secret card adopts the skin */
.secret-card.skin-paper{color:#3a2f1a}
.secret-card.skin-paper,.secret-card.skin-wood,.secret-card.skin-ocean,.secret-card.skin-flame,.secret-card.skin-neon,.secret-card.skin-classic{background-blend-mode:overlay}
.secret-card[class*="skin-"]{transition:background .4s,box-shadow .4s}

/* legendary effects */
@keyframes legGlow{0%,100%{box-shadow:0 0 16px rgba(224,179,65,.45),inset 0 0 18px rgba(224,179,65,.25)}50%{box-shadow:0 0 34px rgba(224,179,65,.95),inset 0 0 26px rgba(224,179,65,.5)}}
@keyframes legBorder{0%,100%{border-color:#e0b341}50%{border-color:#ffe27a}}
@keyframes legFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes legSpark{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:.75;transform:scale(1.1)}}
.secret-card.legendary-skin{position:relative;border:2.5px solid #e0b341;border-radius:18px;animation:legGlow 2.4s ease-in-out infinite,legBorder 3s ease-in-out infinite,legFloat 4.4s ease-in-out infinite;box-shadow:0 0 18px rgba(224,179,65,.45),0 0 42px rgba(255,210,90,.18)}
.secret-card.legendary-skin::after{content:"\2728";position:absolute;top:8px;left:11px;font-size:15px;opacity:.65;animation:legSpark 2.6s ease-in-out infinite;pointer-events:none}
.skin-item.tier-legendary .skin-preview{box-shadow:inset 0 0 14px rgba(255,210,90,.35);border:1px solid rgba(224,179,65,.6)}
.skin-item.tier-legendary .skin-preview::after{content:"\2728";position:absolute;top:4px;right:6px;font-size:12px;opacity:.7;animation:legSpark 2.8s ease-in-out infinite}

/* wheel of luck */
.wheel-wrap{text-align:center;padding:6px 0}
.wheel-stage{position:relative;width:248px;height:248px;margin:6px auto 14px}
.wheel{width:248px;height:248px;border-radius:50%;position:relative;border:7px solid #e0b341;box-shadow:0 0 0 4px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.5);transform:rotate(0deg)}
.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:28px;color:#e0b341;z-index:6;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.wheel-labels{position:absolute;inset:0;border-radius:50%}
.wheel-lab{position:absolute;inset:0;display:flex;justify-content:center;transform-origin:50% 50%}
.wheel-lab span{margin-top:16px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}


/* ===================== Phase 14 ===================== */
/* ---- profile frames (avatar borders) ---- */
.avframe{ position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.avframe::before{ content:""; position:absolute; inset:-4px; border-radius:50%; padding:3px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; }
.frame-none::before{ background:transparent; padding:0; }
.frame-silver::before{ background:linear-gradient(135deg,#eef3fa,#9aa6b8); }
.frame-bronze::before{ background:linear-gradient(135deg,#f0b27a,#a85c1f); }
.frame-aqua::before{ background:linear-gradient(135deg,#46e8ff,#0a8bd6); }
.frame-violet::before{ background:linear-gradient(135deg,#c594ff,#7a2bff); }
.frame-emerald::before{ background:linear-gradient(135deg,#67ffa6,#119c52); }
.frame-aqua,.frame-violet,.frame-emerald{ filter:drop-shadow(0 0 4px rgba(120,180,255,.5)); }
.frame-rainbow::before{ background:conic-gradient(from 0deg,#ff004c,#ffb300,#3bff5e,#00d4ff,#9b5cff,#ff004c); animation:spinFrame 4s linear infinite; }
.frame-inferno::before{ background:conic-gradient(from 0deg,#ff3d00,#ff9100,#ffd000,#ff3d00); animation:spinFrame 3s linear infinite; }
.frame-crown::before{ background:conic-gradient(from 0deg,#fff3b0,#ffd700,#b8860b,#ffd700); animation:spinFrame 5s linear infinite; }
.frame-rainbow,.frame-inferno,.frame-crown{ filter:drop-shadow(0 0 7px rgba(255,180,40,.65)); }
@keyframes spinFrame{ to{ transform:rotate(360deg); } }
.frame-preview{ width:64px; height:64px; font-size:30px; margin:0 auto 6px; }
.ps-av.avframe{ padding:1px; }

/* ---- turn indicator marks ---- */
#turn-banner.mine{ background:linear-gradient(135deg,#1f9d62,#27c06f); color:#fff; box-shadow:0 0 14px rgba(39,192,111,.5); }
#turn-banner.wait{ background:linear-gradient(135deg,#5a5f6e,#3c4150); color:#dfe3ec; opacity:.92; }
.turn-active{ position:relative; border-radius:12px; animation:turnPulse 1.4s ease-in-out infinite; }
@keyframes turnPulse{ 0%,100%{ box-shadow:0 0 0 2px #ffd35c,0 0 8px rgba(255,211,92,.35);} 50%{ box-shadow:0 0 0 2px #ffe79a,0 0 18px rgba(255,211,92,.75);} }

/* ---- owner counts ---- */
.own-count{ font-size:11px; color:#9aa6bd; margin-top:3px; font-weight:600; }

/* ---- buy animations ---- */
.buy-pop{ animation:buyPop .6s ease; }
@keyframes buyPop{ 0%{transform:scale(1);} 30%{transform:scale(1.13);} 60%{transform:scale(.96);} 100%{transform:scale(1);} }

/* ---- legendary purchase overlay ---- */
.legend-ov{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(8,6,20,.78); backdrop-filter:blur(4px); animation:legendFade .3s ease; }
.legend-ov.out{ animation:legendFadeOut .3s ease forwards; }
@keyframes legendFade{ from{opacity:0;} to{opacity:1;} }
@keyframes legendFadeOut{ to{opacity:0;} }
.legend-card{ position:relative; text-align:center; padding:34px 30px; border-radius:22px; max-width:90vw;
  background:linear-gradient(160deg,#241a3f,#15102b); border:2px solid #ffd700; overflow:hidden;
  box-shadow:0 0 55px rgba(255,200,40,.5); animation:legendPop .55s cubic-bezier(.2,1.3,.4,1); }
@keyframes legendPop{ from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;} }
.legend-rays{ position:absolute; inset:-60%; background:conic-gradient(from 0deg,rgba(255,215,0,.16) 0 12deg,transparent 12deg 30deg); animation:spinFrame 9s linear infinite; }
.legend-burst{ font-size:56px; position:relative; animation:legendBounce 1.1s ease infinite; }
@keyframes legendBounce{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-8px) scale(1.08);} }
.legend-title{ position:relative; font-size:26px; font-weight:800; color:#ffd700; margin-top:6px; text-shadow:0 2px 10px rgba(255,200,40,.5); }
.legend-sub{ position:relative; color:#cbb8ff; font-size:14px; margin-top:2px; }
.legend-name{ position:relative; font-size:20px; font-weight:700; color:#fff; margin:12px 0 4px; }
.legend-owners{ position:relative; font-size:14px; color:#9fe7ff; margin-bottom:16px; }
.legend-close{ position:relative; }

/* ---- my bag ---- */
.bag-body{ max-height:56vh; overflow:auto; padding-right:4px; }
.bag-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.bag-item{ position:relative; width:90px; padding:12px 6px; border-radius:14px; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); }
.bag-item.equipped{ border-color:#ffd35c; box-shadow:0 0 12px rgba(255,211,92,.4); }
.bag-item .bag-ic{ font-size:30px; display:inline-flex; }
.bag-item .bag-nm{ font-size:12px; margin-top:4px; font-weight:600; }
.bag-item .shop-tag.own{ position:absolute; top:6px; left:6px; }

/* ---- wheel labels (no overlap) ---- */
.wheel-lab{ position:absolute; left:50%; top:50%; width:64px; margin:0; padding:0; transform-origin:center;
  font-size:11px; line-height:1.15; font-weight:800; color:#fff; text-align:center; pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.75); }
.wheel-lab span{ display:inline-block; max-width:64px; word-break:break-word; }


/* ===== Phase-15: wheel SVG + responsive shop ===== */
.wheel-svg{ width:100%; height:100%; display:block; }
.wheel{ overflow:hidden; }

/* responsive shop / skin / frame grids */
.shop-grid{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important; align-content:start; }
.shop-grid.skins{ grid-template-columns:repeat(auto-fill,minmax(108px,1fr)) !important; }
.shop-item, .skin-item{ min-width:0; }
.shop-av{ font-size:clamp(30px,7vw,42px); }
.shop-buy, .shop-equip, .skin-item .shop-buy{ max-width:100%; white-space:nowrap; }
.skin-name{ font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.own-count{ white-space:nowrap; }

/* shop modal: roomy on large screens, scrollable on small */
#shop-modal .modal, #bag-modal .modal{ width:min(96vw,640px); max-width:96vw; max-height:92vh; display:flex; flex-direction:column; }
#shop-modal .shop-grid, #bag-modal .bag-body{ max-height:none; flex:1; }
.shop-head{ flex:0 0 auto; }
.shop-tabs{ flex-wrap:wrap; }

@media (min-width:900px){
  #shop-modal .modal, #bag-modal .modal{ width:min(90vw,760px); padding:28px; }
  .shop-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important; gap:14px; }
  .shop-grid.skins{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important; gap:14px; }
  .wheel-stage{ width:300px; height:300px; }
  .wheel{ width:300px; height:300px; }
}

@media (max-width:480px){
  .modal{ padding:16px; }
  #shop-modal .modal, #bag-modal .modal{ width:96vw; max-height:94vh; }
  .shop-grid{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) !important; gap:8px; }
  .shop-grid.skins{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important; gap:8px; }
  .shop-tab{ font-size:12px; padding:8px 4px; }
  .wheel-stage{ width:84vw; height:84vw; max-width:300px; max-height:300px; }
  .wheel{ width:100%; height:100%; }
  .skin-preview{ width:54px; height:74px; }
}

/* ===================== المرحلة 16: واجهات جديدة ===================== */
/* شريط الوقت المتدرّج */
.phase-timer{height:12px;border-radius:8px;background:rgba(0,0,0,.18);overflow:hidden;margin:6px auto 4px;width:min(420px,92%);box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.phase-timer-fill{height:100%;width:100%;border-radius:8px;transition:width .9s linear,background .4s}
.phase-timer-fill.t-green{background:linear-gradient(90deg,#36d07a,#22b765)}
.phase-timer-fill.t-yellow{background:linear-gradient(90deg,#ffd54a,#f6b73c)}
.phase-timer-fill.t-red{background:linear-gradient(90deg,#ff6b6b,#e23b3b)}
.phase-timer-fill.t-pulse{animation:tpulse .7s ease-in-out infinite}
@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== انميشن دخول الروم ===== */
.enter-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  animation:enterFade .6s ease both}
.enter-overlay.out{animation:enterFade .5s ease reverse both;pointer-events:none}
.enter-bg{position:absolute;inset:0;background:linear-gradient(150deg,#1c6e9c,#0f4a6b);opacity:.98}
.enter-content{position:relative;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px}
.enter-spark{font-size:48px;animation:enterSpin 1.8s linear infinite}
.enter-icon{font-size:72px;animation:enterBounce .6s cubic-bezier(.2,1.5,.5,1) both;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.25))}
.enter-text{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.enter-line{font-weight:800;font-size:17px;text-shadow:1px 1px 0 rgba(0,0,0,.2)}
.enter-line:last-child{font-size:14px;opacity:.85}
@keyframes enterFade{from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}
@keyframes enterSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes enterBounce{from{opacity:0;transform:scale(.3) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}

/* الإشعارات + البلاغات + القواعد */
.notif-chip{position:relative}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#ff3b6b;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.notif-body{max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.notif-item{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.05);font-size:14px;border-right:4px solid #2bb6a8;text-align:right}
.notif-item.k-reward{border-right-color:#36d07a;background:rgba(54,208,122,.1)}
.notif-item.k-penalty{border-right-color:#ff6b6b;background:rgba(255,107,107,.1)}
.notif-item.k-warn{border-right-color:#f6b73c;background:rgba(246,183,60,.1)}
.report-reasons{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.rules-body{text-align:right;display:flex;flex-direction:column;gap:8px;margin:4px 0 14px;font-size:14px;line-height:1.7;max-height:55vh;overflow-y:auto}
.rules-body p{margin:0}
.btn-mini{padding:4px 10px;font-size:12px}

/* تأثيرات المكافآت */
.screen-flash{position:fixed;inset:0;z-index:9998;pointer-events:none;animation:sflash .7s ease-out forwards}
@keyframes sflash{0%{opacity:.55}100%{opacity:0}}
.screen-flash.rv-gold{background:radial-gradient(circle,#ffe27a,transparent 70%)}
.screen-flash.rv-aurora{background:radial-gradient(circle,#5cf0a0,transparent 70%)}
.screen-flash.rv-inferno{background:radial-gradient(circle,#ff8a3d,transparent 70%)}
.screen-flash.rv-ocean{background:radial-gradient(circle,#5ad1ff,transparent 70%)}
.screen-flash.rv-candy{background:radial-gradient(circle,#ff5da2,transparent 70%)}
.screen-flash.rv-cosmic{background:radial-gradient(circle,#9b7bff,transparent 70%)}
.fw-dot{position:fixed;width:8px;height:8px;border-radius:50%;z-index:9998;pointer-events:none;animation:fwgo .9s ease-out forwards}
@keyframes fwgo{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.legend-ov.mega .legend-card{animation:megapop .5s cubic-bezier(.2,1.4,.3,1)}
@keyframes megapop{0%{transform:scale(0) rotate(-10deg)}100%{transform:scale(1) rotate(0)}}
.legend-burst{font-size:60px;text-align:center;animation:legSpark 1.2s ease-in-out infinite}
.legend-title{font-size:24px;font-weight:900;text-align:center;color:#fff;margin:6px 0}
.legend-sub{font-size:15px;text-align:center;color:#ffe27a;margin-bottom:10px}
.legend-rays{display:none}
.legend-ov.rv-aurora .legend-card{box-shadow:0 0 60px rgba(92,240,160,.6)}
.legend-ov.rv-inferno .legend-card{box-shadow:0 0 60px rgba(255,138,61,.6)}
.legend-ov.rv-gold .legend-card{box-shadow:0 0 60px rgba(255,226,122,.6)}
.legend-ov.rv-ocean .legend-card{box-shadow:0 0 60px rgba(90,209,255,.6)}
.legend-ov.rv-candy .legend-card{box-shadow:0 0 60px rgba(255,93,162,.6)}
.legend-ov.rv-cosmic .legend-card{box-shadow:0 0 60px rgba(155,123,255,.6)}

/* شاشة VS التمهيدية */
.vs-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:stretch;justify-content:center;background:radial-gradient(circle at 50% 50%,#1a1030,#070410 80%);opacity:0;transition:opacity .35s;overflow:hidden}
.vs-overlay.show{opacity:1}
.vs-overlay.out{opacity:0;transition:opacity .4s}
.vs-side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;position:relative;transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.vs-side.right{transform:translateX(120%)}
.vs-overlay.show .vs-side{transform:translateX(0)}
.vs-side.left{background:linear-gradient(135deg,rgba(43,182,168,.22),transparent)}
.vs-side.right{background:linear-gradient(225deg,rgba(225,85,155,.22),transparent)}
.vs-glow{position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(55px);opacity:.5;background:#2bb6a8;top:28%}
.vs-side.right .vs-glow{background:#e1559b}
.vs-av{font-size:74px;width:120px;height:120px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:0 8px 30px rgba(0,0,0,.5);animation:vsPop .6s .3s both}
@keyframes vsPop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.vs-name{font-size:24px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.vs-lvl{font-size:15px;font-weight:800;color:#ffd54a;background:rgba(0,0,0,.35);padding:3px 12px;border-radius:20px}
.vs-title{font-size:13px;color:#cdbff0}
.vs-legend-badge{margin-top:4px;font-size:12px;font-weight:800;color:#1a1030;background:linear-gradient(90deg,#ffe27a,#ffb43d);padding:4px 12px;border-radius:20px;box-shadow:0 0 18px rgba(255,210,90,.7);animation:legSpark 1.6s ease-in-out infinite}
.vs-side.vs-legend{box-shadow:inset 0 0 90px rgba(255,210,90,.25)}
.vs-side.vs-legend .vs-av{box-shadow:0 0 30px rgba(255,210,90,.85),0 0 60px rgba(255,160,40,.5);animation:vsPop .6s .3s both,legSpark 1.8s ease-in-out infinite}
.vs-mid{display:flex;align-items:center;justify-content:center;position:relative;width:0}
.vs-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0) rotate(-25deg);font-size:90px;font-weight:1000;color:#fff;-webkit-text-stroke:3px #ff3b6b;text-shadow:0 0 30px rgba(255,59,107,.8);font-family:Impact,system-ui,sans-serif}
.vs-overlay.show .vs-vs{animation:vsIn .6s 1.1s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes vsIn{0%{transform:translate(-50%,-50%) scale(0) rotate(-25deg);opacity:0}60%{transform:translate(-50%,-50%) scale(1.4) rotate(8deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
.vs-overlay.clash .vs-vs{animation:vsShake .45s ease-in-out}
@keyframes vsShake{0%,100%{transform:translate(-50%,-50%) scale(1)}20%{transform:translate(-54%,-50%) scale(1.15) rotate(-6deg)}50%{transform:translate(-46%,-50%) scale(1.2) rotate(6deg)}80%{transform:translate(-52%,-50%) scale(1.1)}}
.vs-spark{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:0}
.vs-overlay.clash .vs-spark{animation:vsBoom .5s ease-out}
@keyframes vsBoom{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.9)}100%{opacity:0;box-shadow:0 0 0 240px rgba(255,90,120,0)}}
@media (max-width:560px){.vs-vs{font-size:58px}.vs-av{font-size:52px;width:88px;height:88px}.vs-name{font-size:19px}.vs-glow{width:160px;height:160px}}

/* تقليل الحركة */
body.reduce-anim *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.05s!important}
body.reduce-anim .fw-dot,body.reduce-anim .screen-flash{display:none!important}

.app-ver{display:block;margin-top:4px;font-size:11px;opacity:.6;font-weight:700}


/* ===== Phase18: شاشة تحميل ===== */
.app-loader{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--bg0),var(--bg2));transition:opacity .5s ease}
.app-loader.hide{opacity:0;pointer-events:none}
.loader-box{display:flex;flex-direction:column;align-items:center;gap:14px}
.loader-logo{font-size:64px;animation:float 1.6s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(44,39,34,.2))}
.loader-title{font-size:34px;font-weight:900;color:var(--teal-ink);letter-spacing:1px}
.loader-ring{width:46px;height:46px;border-radius:50%;border:5px solid rgba(44,39,34,.15);border-top-color:var(--teal);animation:ldspin .8s linear infinite}
.loader-tip{font-size:14px;font-weight:700;color:var(--muted);min-height:20px;animation:fade .4s}
@keyframes ldspin{to{transform:rotate(360deg)}}

/* ===== Phase18: ماين منيو منظّم ===== */
.btn-play{font-size:19px;padding:16px}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2px}
.menu-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--card);border:var(--bd);border-radius:18px;padding:14px 6px;cursor:pointer;font-family:inherit;font-weight:800;color:var(--txt);box-shadow:3px 3px 0 rgba(44,39,34,.10);transition:.15s;animation:pop .4s both}
.menu-tile:nth-child(2){animation-delay:.04s}.menu-tile:nth-child(3){animation-delay:.08s}.menu-tile:nth-child(4){animation-delay:.12s}.menu-tile:nth-child(5){animation-delay:.16s}.menu-tile:nth-child(6){animation-delay:.2s}
.menu-tile:hover{transform:translateY(-3px);box-shadow:3px 7px 0 rgba(44,39,34,.14);background:var(--card2)}
.menu-tile:active{transform:translateY(0) scale(.97)}
.menu-tile .mt-ic{font-size:26px;line-height:1}
.menu-tile .mt-lbl{font-size:13px}
@media(max-width:480px){.menu-grid{gap:9px}.menu-tile{padding:11px 4px;border-radius:15px}.menu-tile .mt-ic{font-size:22px}.menu-tile .mt-lbl{font-size:11px}}

/* ===== Phase18: تنوّع شاشة VS ===== */
.vs-overlay.v-warm{background:radial-gradient(circle at 50% 38%,#34c5b5,#0f6f64 82%)}
.vs-overlay.v-warm .vs-side.left{background:linear-gradient(135deg,rgba(255,210,63,.20),transparent)}
.vs-overlay.v-warm .vs-side.right{background:linear-gradient(225deg,rgba(239,91,70,.20),transparent)}
.vs-overlay.v-warm .vs-glow{background:#ffd23f}
.vs-overlay.v-warm .vs-side.right .vs-glow{background:#ef5b46}
.vs-overlay.v-warm .vs-vs{-webkit-text-stroke:3px #ffd23f;text-shadow:0 0 30px rgba(255,210,63,.9)}
.vs-overlay.v-neon{background:radial-gradient(circle at 50% 50%,#1b1145,#04020c 82%)}
.vs-overlay.v-neon .vs-glow{background:#9b6dff}
.vs-overlay.v-neon .vs-side.right .vs-glow{background:#46e0d0}
.vs-overlay.v-neon .vs-vs{-webkit-text-stroke:3px #46e0ff;text-shadow:0 0 34px rgba(70,224,255,.9);color:#eafcff}

/* ===== Phase18b: زر الإبلاغ المصغّر ===== */
.report-mini{margin-inline-start:auto;background:#fff;border:2px solid var(--line);color:var(--coral);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;transition:.14s;opacity:.65}
.report-mini:hover{opacity:1;border-color:var(--coral);background:var(--coral);color:#fff}
.report-mini:active{transform:scale(.92)}

/* ===== مرحلة 20: مقدمات VS حسب التصنيف ===== */
.vs-overlay .vs-floats{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.vs-float{position:absolute;top:108%;opacity:0;animation:vsFloatUp linear infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
@keyframes vsFloatUp{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(-130vh) rotate(150deg);opacity:0}}
.vs-mode-badge{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(0,0,0,.45);color:#fff;font-weight:800;font-size:15px;padding:6px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);animation:fade .5s both}
.vs-side,.vs-mid{position:relative;z-index:3}
.vs-overlay.cat-default{background:radial-gradient(circle at 50% 50%,#1a1030,#070410 80%)}
.vs-overlay.cat-animals{background:radial-gradient(circle at 50% 40%,#2f7d4f,#0c3a22 82%)}
.vs-overlay.cat-animals .vs-vs{-webkit-text-stroke:3px #7be0a0;text-shadow:0 0 30px rgba(123,224,160,.9)}
.vs-overlay.cat-anime{background:radial-gradient(circle at 50% 45%,#3a1a6b,#0a0420 82%)}
.vs-overlay.cat-anime .vs-vs{-webkit-text-stroke:3px #ff5da2;text-shadow:0 0 34px rgba(255,93,162,.95);color:#fff0fb}
.vs-overlay.cat-football{background:radial-gradient(circle at 50% 42%,#1f7a43,#06351c 82%)}
.vs-overlay.cat-football .vs-vs{-webkit-text-stroke:3px #ffffff;text-shadow:0 0 30px rgba(120,255,160,.8)}
.vs-overlay.cat-food{background:radial-gradient(circle at 50% 40%,#b85c1f,#3a1c06 82%)}
.vs-overlay.cat-food .vs-vs{-webkit-text-stroke:3px #ffd23f;text-shadow:0 0 30px rgba(255,210,63,.9)}
.vs-overlay.cat-countries{background:radial-gradient(circle at 50% 45%,#1e5fa8,#04162e 82%)}
.vs-overlay.cat-countries .vs-vs{-webkit-text-stroke:3px #5ad1ff;text-shadow:0 0 32px rgba(90,209,255,.9);color:#eafcff}
.vs-overlay.cat-cartoon{background:radial-gradient(circle at 50% 42%,#7a2f8a,#240a2c 82%)}
.vs-overlay.cat-cartoon .vs-vs{-webkit-text-stroke:3px #ff8a3d;text-shadow:0 0 30px rgba(255,138,61,.9)}
.vs-overlay.cat-celebrities{background:radial-gradient(circle at 50% 42%,#9b7a1f,#2c2106 82%)}
.vs-overlay.cat-celebrities .vs-vs{-webkit-text-stroke:3px #ffd54a;text-shadow:0 0 30px rgba(255,213,74,.95)}
.vs-overlay.cat-youtubers{background:radial-gradient(circle at 50% 42%,#a32020,#2c0606 82%)}
.vs-overlay.cat-youtubers .vs-vs{-webkit-text-stroke:3px #ff5d5d;text-shadow:0 0 30px rgba(255,93,93,.9)}
/* ===== عدّاد 3-2-1 ===== */
.cd-overlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(8,4,16,.32);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);animation:cdFade .25s ease-out}
@keyframes cdFade{from{opacity:0}to{opacity:1}}
.cd-num{font-size:140px;font-weight:1000;color:#fff;font-family:Impact,system-ui,sans-serif;-webkit-text-stroke:4px #ff5b6b;text-shadow:0 0 40px rgba(255,91,107,.8);animation:cdPop .72s ease-out forwards}
.cd-num.go{font-size:96px;-webkit-text-stroke:4px #5cf0a0;text-shadow:0 0 44px rgba(92,240,160,.9)}
@keyframes cdPop{0%{transform:scale(2.4);opacity:0}28%{transform:scale(1);opacity:1}72%{opacity:1}100%{transform:scale(.5);opacity:0}}
@media (max-width:560px){.cd-num{font-size:92px}.cd-num.go{font-size:60px}.vs-mode-badge{font-size:13px}}

/* ===================== v1.6: لمسات حماسية + اجتماعي ===================== */
.encore{position:fixed;top:34%;left:50%;transform:translate(-50%,-50%);z-index:99999;pointer-events:none;font-size:28px;font-weight:900;color:#fff;background:linear-gradient(135deg,#ff8a3d,#ef5b46);padding:12px 26px;border-radius:18px;border:3px solid #2c2722;box-shadow:0 10px 30px rgba(0,0,0,.35);white-space:nowrap;animation:encorePop .42s cubic-bezier(.2,1.3,.4,1) forwards}
.encore.out{animation:encoreOut .36s ease forwards}
@keyframes encorePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes encoreOut{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}}
.float-emoji{position:fixed;bottom:118px;z-index:9997;pointer-events:none;font-size:34px;animation:floatUp 2.1s ease-out forwards;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
@keyframes floatUp{0%{opacity:0;transform:translateY(20px) scale(.5)}15%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-260px) scale(1)}}
.quick-bar{display:flex;flex-direction:column;gap:6px;margin:4px auto;width:min(560px,96%)}
.emoji-bar,.phrase-bar{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.emoji-bar::-webkit-scrollbar,.phrase-bar::-webkit-scrollbar{height:5px}
.emoji-bar::-webkit-scrollbar-thumb,.phrase-bar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:6px}
.qe-btn{flex:0 0 auto;font-size:20px;line-height:1;background:var(--card,#fff);border:2px solid rgba(0,0,0,.12);border-radius:50%;width:40px;height:40px;cursor:pointer;transition:transform .12s}
.qe-btn:hover{transform:scale(1.18) translateY(-2px)}
.qe-btn:active{transform:scale(.92)}
.qp-btn{flex:0 0 auto;font-size:13px;font-weight:700;background:var(--card,#fff);color:var(--teal-ink,#185a8c);border:2px solid rgba(0,0,0,.12);border-radius:20px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:transform .12s,background .15s}
.qp-btn:hover{transform:translateY(-2px);background:var(--card2,#eef2f7)}
.qp-btn:active{transform:scale(.95)}
body.reduce-anim .encore,body.reduce-anim .float-emoji{animation:none!important}


/* === تأثير كشف بطاقة الخصم عند التعادل (v1.6) === */
.card-reveal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none;background:rgba(8,12,20,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:rvOvIn .25s ease both;}
.card-reveal-overlay.out{animation:rvOvOut .4s ease both;}
.reveal-card{background:linear-gradient(145deg,#1f2a3a,#0f1620);border:2px solid #5ad1ff;border-radius:20px;padding:26px 34px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 30px rgba(90,209,255,.35);transform-style:preserve-3d;animation:rvCardIn .6s cubic-bezier(.2,.9,.25,1.3) forwards;}
.reveal-card .reveal-label{color:#9fdcff;font-size:15px;font-weight:700;margin-bottom:10px;}
.reveal-card .reveal-name{color:#ffd54a;font-size:26px;font-weight:900;margin:4px 0;text-shadow:0 2px 10px rgba(255,213,74,.4);}
@keyframes rvOvIn{from{opacity:0}to{opacity:1}}
@keyframes rvOvOut{from{opacity:1}to{opacity:0}}
@keyframes rvCardIn{0%{transform:scale(.4) rotateY(80deg);opacity:0}60%{transform:scale(1.08) rotateY(-8deg);opacity:1}100%{transform:scale(1) rotateY(0);opacity:1}}

/* ===== لعب سريع (بحث عن خصم) ===== */
.qp-wrap{max-width:440px;margin:24px auto;text-align:center;padding:26px;border-radius:22px;background:rgba(255,255,255,.04);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.qp-radar{position:relative;width:150px;height:150px;margin:6px auto 18px}
.qp-ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(120,180,255,.45);animation:qpPulse 1.8s ease-out infinite}
.qp-ring.r2{animation-delay:.9s}
.qp-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px;animation:qpSpin 3.2s linear infinite}
@keyframes qpPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes qpSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.qp-status{font-size:20px;font-weight:800;margin-bottom:12px}
.qp-bar{height:10px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;margin:10px 0}
.qp-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#5ad1ff,#a06bff);transition:width .5s linear}
.qp-sub{font-size:13px;opacity:.75;margin-bottom:8px}
.qp-tip{min-height:22px;font-size:14px;color:#ffd54a;margin-bottom:16px;transition:opacity .3s}

/* ============ QUICK PLAY ============ */
.qp-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:70vh;text-align:center;padding:20px}
.qp-radar{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.qp-ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(124,92,255,.5);animation:qpPulse 2s ease-out infinite}
.qp-ring.r2{animation-delay:1s}
@keyframes qpPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.qp-core{position:relative;width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(135deg,#7c5cff,#37c6ff);box-shadow:0 0 30px rgba(124,92,255,.6);animation:qpSpin 3.5s linear infinite}
@keyframes qpSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.qp-status{font-size:1.4rem;font-weight:800;margin:0}
.qp-bar{width:min(420px,86%);height:12px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.qp-bar #qp-bar-fill{display:block;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#7c5cff,#37c6ff);transition:width .5s linear}
.qp-sub{opacity:.8;margin:0;font-size:.95rem}
.qp-tip{opacity:.95;margin:0;font-size:1.02rem;min-height:1.4em;font-weight:600;color:#ffd86b}
#qp-cancel{margin-top:8px}

/* ============ PREMIUM ============ */
.premium-badge{display:inline-block;font-size:.7rem;font-weight:800;padding:1px 8px;border-radius:99px;background:linear-gradient(135deg,#ffd86b,#ff9e2c);color:#3a2600;box-shadow:0 0 10px rgba(255,180,60,.6);margin-top:2px}
.menu-tile-gold{background:linear-gradient(135deg,rgba(255,216,107,.22),rgba(255,158,44,.12));border:1px solid rgba(255,200,80,.55)!important}
.menu-tile-gold .mt-ic{filter:drop-shadow(0 0 6px rgba(255,200,80,.8))}
.premium-box{text-align:center;border:1px solid rgba(255,200,80,.45);box-shadow:0 0 40px rgba(255,180,60,.25)}
.premium-crown{font-size:52px;animation:qpSpin 6s linear infinite;margin-bottom:4px}
.premium-status{background:rgba(80,220,140,.16);color:#7cf0b0;border-radius:12px;padding:8px 10px;font-weight:700;margin:0 0 10px}
.premium-perks{list-style:none;padding:0;margin:6px 0 14px;text-align:right;display:flex;flex-direction:column;gap:9px}
.premium-perks li{background:rgba(255,255,255,.06);border-radius:12px;padding:9px 12px;font-size:.96rem;line-height:1.5}
.premium-perks b{color:#ffd86b}
.premium-price{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.premium-price .pp-usd{font-size:1.25rem;font-weight:900;color:#ffd86b}
.premium-price .pp-coins{font-size:1.05rem;font-weight:800;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:99px}
.premium-price .pp-or{opacity:.6;font-size:.85rem}


/* ============================================================
   v1.7 — تبويبات القائمة + بريميوم جديد + صفحة دفع
   ============================================================ */

/* ---- menu tabs ---- */
.menu-tabs{position:relative;display:flex;gap:6px;background:var(--card2);border:var(--bd);
  border-radius:18px;padding:5px;margin:0 auto 16px;max-width:380px;box-shadow:3px 3px 0 var(--ink)}
.menu-tab{flex:1;position:relative;z-index:2;border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:15px;color:var(--muted);padding:11px 8px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:color .25s, transform .15s}
.menu-tab .mtb-ic{font-size:18px;transition:transform .3s}
.menu-tab.active{color:#fff}
.menu-tab.active .mtb-ic{transform:scale(1.2) rotate(-6deg)}
.menu-tab:active{transform:scale(.96)}
.menu-tab-ind{position:absolute;z-index:1;top:5px;bottom:5px;right:5px;width:calc(50% - 5px);
  border-radius:13px;background:linear-gradient(140deg,var(--teal),var(--teal-d));
  border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  transition:transform .34s cubic-bezier(.34,1.56,.64,1)}

.menu-pane{animation:none}
.pane-in{animation:paneIn .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---- tournament button on menu ---- */
.btn-tourney{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#ffd23f,#f5a623 55%,#ef5b46);
  color:#3a2410;border:var(--bd);box-shadow:5px 5px 0 var(--ink)}
.btn-tourney .btn-tag{margin-inline-start:auto;font-size:12px;font-weight:900;
  background:rgba(0,0,0,.16);color:#3a2410;padding:3px 9px;border-radius:999px}
.btn-tourney::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);animation:tourSweep 3.2s ease-in-out infinite}
@keyframes tourSweep{0%,60%{left:-60%}100%{left:130%}}

/* ---- shine effect for CTAs ---- */
.btn-shine{position:relative;overflow:hidden}
.btn-shine::before{content:"";position:absolute;top:-50%;left:-70%;width:40%;height:200%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:shineSweep 2.6s ease-in-out infinite}
@keyframes shineSweep{0%,55%{left:-70%}100%{left:140%}}

/* ---- premium tile (account tab) ---- */
.menu-tile-premium{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;
  text-align:start;font-family:inherit;color:#3a2410;margin-bottom:14px;
  background:linear-gradient(135deg,#fff3c4,#ffd86b 50%,#f5a623);
  border:var(--bd);border-radius:18px;padding:14px 16px;box-shadow:5px 5px 0 var(--ink);
  position:relative;overflow:hidden;transition:transform .15s, box-shadow .15s}
.menu-tile-premium:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.menu-tile-premium:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.menu-tile-premium::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg);animation:tourSweep 3.6s ease-in-out infinite}
.mtp-gem{font-size:34px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));animation:gemFloat 2.4s ease-in-out infinite}
.mtp-txt{display:flex;flex-direction:column;line-height:1.3;z-index:2}
.mtp-txt b{font-size:16px;font-weight:900}
.mtp-txt small{font-size:11px;font-weight:700;opacity:.8}
.mtp-price{margin-inline-start:auto;font-size:22px;font-weight:900;z-index:2;white-space:nowrap}
.mtp-price small{font-size:11px;font-weight:700;opacity:.75}
@keyframes gemFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(6deg)}}

/* ---- premium modal gem ---- */
.premium-gem{position:relative;width:84px;height:84px;margin:0 auto 6px;font-size:54px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));animation:gemFloat 2.6s ease-in-out infinite}
.gem-sparkle{position:absolute;font-size:18px;opacity:0;animation:sparkle 1.8s ease-in-out infinite}
.gem-sparkle.s1{top:2px;left:8px;animation-delay:.2s}
.gem-sparkle.s2{bottom:6px;right:6px;font-size:13px;animation-delay:1s}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.1)}}
.premium-price2{text-align:center;margin:6px 0 14px}
.pp2-amt{font-size:34px;font-weight:900;color:var(--teal-ink)}
.pp2-per{font-size:14px;font-weight:800;color:var(--muted);margin-inline-start:4px}

/* close X on modals */
.modal-x{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--ink);background:var(--card2);cursor:pointer;font-size:15px;font-weight:900;
  color:var(--txt);display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 var(--ink);
  transition:transform .12s}
.modal-x:hover{transform:rotate(90deg)}
.modal-x:active{transform:scale(.9)}
.premium-box,.pay-box{position:relative}

/* ============ payment modal ============ */
.pay-box{max-width:420px;width:100%}
.pay-head{text-align:center;margin-bottom:14px}
.pay-gem{font-size:42px;animation:gemFloat 2.6s ease-in-out infinite}
.pay-amount{font-size:26px;font-weight:900;color:var(--teal-ink);margin-top:2px}
.pay-amount small{font-size:13px;color:var(--muted);font-weight:800;margin-inline-start:3px}

.pay-tabs{display:flex;gap:8px;margin-bottom:14px}
.pay-tab{flex:1;border:var(--bd);background:var(--card2);border-radius:14px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:13px;color:var(--muted);padding:11px 6px;
  box-shadow:2px 2px 0 var(--ink);transition:transform .12s, background .2s, color .2s}
.pay-tab.active{background:linear-gradient(140deg,var(--teal),var(--teal-d));color:#fff;
  box-shadow:3px 3px 0 var(--ink);transform:translateY(-1px)}
.pay-tab:active{transform:scale(.96)}

.pm-pane{animation:paneIn .34s cubic-bezier(.34,1.56,.64,1)}
.pay-label{display:block;font-weight:800;font-size:12px;color:var(--muted);margin:12px 2px 6px}
.pay-input{width:100%;border:var(--bd);background:#fff;border-radius:13px;padding:12px 14px;
  font-family:inherit;font-size:16px;font-weight:700;color:var(--txt);box-shadow:inset 2px 2px 0 rgba(44,39,34,.05);
  letter-spacing:.5px;outline:none;transition:border-color .2s, box-shadow .2s}
.pay-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,182,168,.22)}
.pay-row2{display:flex;gap:10px}
.pay-col{flex:1}
.pay-cta{margin-top:16px}
.pay-secure{text-align:center;font-size:11px;margin-top:12px}

.wallet-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wallet-opt{display:flex;align-items:center;gap:8px;border:var(--bd);background:var(--card2);
  border-radius:13px;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;color:var(--txt);
  padding:11px 12px;box-shadow:2px 2px 0 var(--ink);transition:transform .12s, background .2s}
.wallet-opt .wo-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);flex:none}
.wallet-opt.active{background:#fff7e3;box-shadow:0 0 0 3px var(--gold),3px 3px 0 var(--ink);transform:translateY(-1px)}
.wallet-opt:active{transform:scale(.96)}

/* ---- visa card preview ---- */
.visa-card{position:relative;overflow:hidden;border-radius:18px;padding:18px 18px 16px;
  background:linear-gradient(125deg,#1f9c90,#15756c 55%,#0e5751);color:#fff;
  border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);min-height:155px;margin-bottom:6px}
.visa-shine{position:absolute;inset:0;background:radial-gradient(circle at 80% -10%,rgba(255,255,255,.4),transparent 45%);
  pointer-events:none;animation:visaGlow 4s ease-in-out infinite}
@keyframes visaGlow{0%,100%{opacity:.5}50%{opacity:1}}
.visa-chip{width:46px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,#ffe9a8,#f5c542);border:1.5px solid rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.visa-chip::after{content:"";display:block;width:60%;height:1.5px;background:rgba(0,0,0,.35);margin:10px auto 0;
  box-shadow:0 5px 0 rgba(0,0,0,.25),0 -5px 0 rgba(0,0,0,.25)}
.visa-brand{position:absolute;top:16px;left:18px;font-size:24px;font-weight:900;font-style:italic;letter-spacing:1px;
  text-shadow:1px 1px 0 rgba(0,0,0,.3)}
.visa-num{font-size:21px;font-weight:800;letter-spacing:3px;margin:22px 0 14px;
  font-family:"Courier New",monospace;direction:ltr;text-shadow:1px 1px 2px rgba(0,0,0,.3)}
.visa-row{display:flex;justify-content:space-between;font-size:12px;font-weight:700;direction:ltr;opacity:.92}

/* ---- payment processing overlay ---- */
.pay-processing{position:absolute;inset:0;border-radius:var(--radius);z-index:30;
  background:rgba(253,248,240,.92);backdrop-filter:blur(3px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  animation:paneIn .25s ease}
.pay-spinner{width:62px;height:62px;border-radius:50%;
  border:6px solid rgba(43,182,168,.22);border-top-color:var(--teal);
  animation:paySpin .8s linear infinite;box-shadow:0 0 0 3px rgba(44,39,34,.06)}
@keyframes paySpin{to{transform:rotate(360deg)}}
.pay-proc-txt{font-weight:900;color:var(--teal-ink);font-size:15px;animation:procPulse 1.2s ease-in-out infinite}
@keyframes procPulse{0%,100%{opacity:.6}50%{opacity:1}}


/* ============================================================
   v1.8 — تحسين شامل لواجهة القائمة (نفس الثيم)
   أولوية أعلى لأنها في آخر الملف
   ============================================================ */

/* توسيط وحصر القائمة في عرض موحّد */
#screen-menu{justify-content:flex-start}
.menu-hero{text-align:center;margin:6px 0 14px}
.menu-hero .logo-badge{width:76px;height:76px;border-radius:22px;margin-bottom:8px}
.menu-hero .brand-name.big{font-size:38px;margin:0}
.menu-hero .subtitle{font-size:13px;color:var(--muted);font-weight:700;margin-top:4px}

.menu-tabs{max-width:430px}

/* حاوية أزرار القائمة — بطاقة متماسكة */
.menu-buttons{width:100%;max-width:430px;margin:0 auto auto;gap:13px}

/* زر "العب الآن" — CTA رئيسي بعرض كامل وأبرز */
.btn-play{width:100%;font-size:21px;padding:20px 18px;border-radius:20px;
  background:linear-gradient(135deg,var(--teal),var(--teal-d) 60%,var(--teal-ink));
  box-shadow:0 6px 0 var(--ink),0 14px 26px rgba(43,182,168,.32);
  position:relative;overflow:hidden}
.btn-play .btn-ic{font-size:24px}
.btn-play::after{content:"";position:absolute;top:-50%;left:-70%;width:40%;height:200%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);animation:shineSweep 3s ease-in-out infinite}
.btn-play:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink),0 4px 12px rgba(43,182,168,.25)}

/* الصف (الغرف + انضمام) — عرض متساوٍ */
.menu-row{gap:13px}
.menu-row .btn.half{padding:15px 10px;font-size:15px;border-radius:18px}

/* زر البطولات — توافق العرض وارتفاع أوضح */
.menu-buttons .btn-tourney.btn-block{margin-top:0;padding:16px 18px;font-size:16px;border-radius:18px}

/* تأثير رفع عند المرور لكل أزرار القائمة */
@media(hover:hover){
  .btn-play:hover,.menu-row .btn:hover,.menu-buttons .btn-tourney:hover{
    transform:translateY(-2px);filter:brightness(1.04)}
}

/* دخول متدرّج لعناصر القائمة */
#pane-play>*{animation:menuItemIn .5s both}
#pane-play>*:nth-child(1){animation-delay:.02s}
#pane-play>*:nth-child(2){animation-delay:.09s}
#pane-play>*:nth-child(3){animation-delay:.16s}
@keyframes menuItemIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* تحسين الشريط العلوي — توسيط وتباعد */
.topbar{justify-content:center;margin-bottom:16px}
.profile-chip{box-shadow:4px 4px 0 rgba(44,39,34,.12);max-width:100%}

/* شبكة حسابي — توسيط */
#pane-account{width:100%;max-width:430px;margin:0 auto}

@media(max-width:480px){
  .menu-hero .brand-name.big{font-size:32px}
  .btn-play{font-size:18px;padding:17px 14px}
  .menu-row .btn.half{font-size:13px}
}


/* ============================================================
   v1.8b — تباعد أكبر + تناسق ألوان دقيق (main menu)
   أولوية أعلى — آخر الملف
   ============================================================ */

/* مسافات أوسع وأريح بين الأزرار */
.menu-buttons{gap:18px;max-width:420px}
.menu-row{gap:16px}
.menu-tabs{margin-bottom:20px}

/* الزر الرئيسي — تركواز هو لون البطولة الأساسي */
.btn-play{margin-bottom:2px}

/* الزران الثانويان — لون كريمي هادئ بأيقونات ملوّنة (تناسق) */
.menu-row .btn.half{
  background:var(--card);
  color:var(--ink);
  box-shadow:0 4px 0 var(--line),0 8px 18px rgba(44,39,34,.07);
  border:var(--bd);
  padding:16px 12px;font-size:15px;border-radius:18px;
  flex-direction:column;gap:7px}
.menu-row .btn.half .btn-ic{font-size:26px;line-height:1;
  filter:drop-shadow(0 2px 2px rgba(44,39,34,.12))}
.menu-row .btn.half:active{transform:translateY(4px);box-shadow:0 0 0 var(--line)}
/* لمسة لون صغيرة تربط كل زر بهويته بدون تضارب */
#btn-join-nav .btn-ic{color:var(--coral)}
.menu-row [data-go="browser"] .btn-ic{color:var(--blue)}
.menu-row .btn.half:hover{background:var(--card2);border-color:var(--teal)}

/* زر البطولات — العنصر المميّز الوحيد بتدرّج ذهبي أنعم */
.menu-buttons .btn-tourney.btn-block{
  background:linear-gradient(135deg,#ffd86b,#f5a623 70%,#ef8a3d);
  box-shadow:0 5px 0 var(--ink),0 12px 24px rgba(245,166,35,.28);
  margin-top:2px}
.menu-buttons .btn-tourney.btn-block:active{transform:translateY(5px);
  box-shadow:0 0 0 var(--ink),0 4px 10px rgba(245,166,35,.2)}

/* الأيقونة داخل الزر الرئيسي والبطولات تبقى بيضاء */
.btn-play .btn-ic{color:#fff}

/* تبويبات القائمة — تناسق مع التركواز */
.menu-tab.active{color:#fff}
.menu-tab-ind{background:linear-gradient(140deg,var(--teal),var(--teal-d));
  box-shadow:0 3px 0 var(--ink)}

/* توازن رأسي أفضل للقائمة */
#screen-menu{justify-content:flex-start;padding-top:8px}
.menu-hero{margin:4px 0 16px}

@media(max-width:480px){
  .menu-buttons{gap:15px}
  .menu-row{gap:12px}
  .menu-row .btn.half{padding:14px 8px;font-size:13px}
  .menu-row .btn.half .btn-ic{font-size:23px}
}

/* ===================== إصدار 1.6 — سكينات وبراويز جديدة ===================== */
/* --- سكينات عادية --- */
.skin-ice{background:linear-gradient(135deg,#dff6ff,#7fc7e8 60%,#3a8fc7);color:#0b3d52}
.skin-desert{background:linear-gradient(135deg,#f3dca0,#c9a35e 60%,#8a6a30)}
.skin-forest{background:linear-gradient(135deg,#3da35a,#155e2e)}
.skin-candy{background:linear-gradient(135deg,#ff9ad5,#ff5da2 55%,#a64bff)}
.skin-marble{background:linear-gradient(135deg,#f7f7fb,#cfd3da 60%,#a7adba);color:#2a2f3a}
/* --- سكينات قوية --- */
.skin-electric{background:linear-gradient(135deg,#fff75e,#ffb300 45%,#7d4dff)}
.skin-holo{background:conic-gradient(from 0deg at 50% 50%,#a0f0ff,#ffb3f0,#b8ffd0,#fff0a0,#a0f0ff);color:#22303c}
.skin-toxic{background:linear-gradient(135deg,#b6ff3d,#3da30f 60%,#1c5e00)}
.skin-royal{background:linear-gradient(135deg,#9b6dff,#3a1080)}
.skin-aurora{background:linear-gradient(135deg,#5cf0a0,#46a7e0 50%,#9b6dff)}
.skin-sakura{background:radial-gradient(circle at 30% 20%,#fff 0,transparent 35%),linear-gradient(135deg,#ffd1e8,#ff8ab8 60%,#d65f93)}
/* --- سكينات أسطورية --- */
.skin-dragon{background:radial-gradient(circle at 70% 75%,#ff3d3d 0,transparent 45%),linear-gradient(135deg,#1c7a3d,#0a3d1f 70%,#06140c)}
.skin-cosmic{background:radial-gradient(circle at 25% 25%,#9b5cff 0,transparent 42%),radial-gradient(circle at 78% 68%,#46e8ff 0,transparent 38%),linear-gradient(135deg,#160a40,#070318)}
.skin-diamond{background:linear-gradient(135deg,#eafcff,#a8e6ff 45%,#5ca8e0 70%,#bfeaff);color:#0b3d52}
.skin-shadow{background:radial-gradient(circle at 50% 30%,#5a2bd0 0,transparent 50%),linear-gradient(135deg,#1a1226,#070409)}
.skin-ember{background:radial-gradient(circle at 50% 110%,#ffd23d 0,transparent 50%),linear-gradient(135deg,#ff7a3d,#b21f1f 60%,#5a1010)}

/* --- براويز عادية --- */
.frame-pearl::before{ background:linear-gradient(135deg,#fdfdff,#dfe6f0); }
.frame-copper::before{ background:linear-gradient(135deg,#e8a06a,#a85c2f); }
.frame-mint::before{ background:linear-gradient(135deg,#9affd0,#2bbf8f); }
.frame-rose::before{ background:linear-gradient(135deg,#ffb3c8,#e0436e); }
/* --- براويز قوية --- */
.frame-wave::before{ background:linear-gradient(135deg,#46e8ff,#1c6ea4); }
.frame-lava::before{ background:linear-gradient(135deg,#ff7a3d,#b21f1f); }
.frame-nebula::before{ background:linear-gradient(135deg,#c594ff,#3a1080); }
.frame-neonf::before{ background:linear-gradient(135deg,#00f0ff,#7d00ff); }
.frame-ivy::before{ background:linear-gradient(135deg,#67ffa6,#119c52); }
.frame-wave,.frame-lava,.frame-nebula,.frame-neonf,.frame-ivy{ filter:drop-shadow(0 0 4px rgba(120,180,255,.5)); }
/* --- براويز أسطورية --- */
.frame-stars::before{ background:conic-gradient(from 0deg,#fff,#8ad0ff,#c8a0ff,#fff,#8ad0ff); animation:spinFrame 5s linear infinite; }
.frame-thunder::before{ background:conic-gradient(from 0deg,#fff75e,#46a7e0,#fff75e,#7d4dff); animation:spinFrame 2.6s linear infinite; }
.frame-phoenixf::before{ background:conic-gradient(from 0deg,#ffd23d,#ff7a3d,#ff3d3d,#ffd23d); animation:spinFrame 3.4s linear infinite; }
.frame-hearts::before{ background:conic-gradient(from 0deg,#ffb3d0,#ff3d7a,#ff8ab8,#ffb3d0); animation:spinFrame 4.2s linear infinite; }
.frame-royalgold::before{ background:conic-gradient(from 0deg,#fff3b0,#ffd700,#b8860b,#ffd700); animation:spinFrame 5s linear infinite; }
.frame-stars,.frame-thunder,.frame-phoenixf,.frame-hearts,.frame-royalgold{ filter:drop-shadow(0 0 7px rgba(255,180,40,.65)); }

/* ===== إصدار 1.6 — شريط إعلان المدير ===== */
#admin-announce{position:fixed;top:-90px;left:50%;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:10px;max-width:92vw;width:max-content;
  padding:12px 16px;border-radius:16px;border:var(--bd,2.5px solid #2c2722);
  background:linear-gradient(135deg,#f5a623,#ef5b46);color:#fff;font-weight:800;font-size:14.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transition:top .45s cubic-bezier(.2,1.2,.4,1),opacity .35s}
#admin-announce.show{top:14px;opacity:1}
#admin-announce .aa-ico{font-size:20px;animation:aaShake 1.6s ease-in-out infinite}
#admin-announce .aa-txt{flex:1;line-height:1.4}
#admin-announce .aa-x{background:rgba(255,255,255,.25);border:none;color:#fff;border-radius:8px;
  width:24px;height:24px;cursor:pointer;font-weight:900;flex:none}
@keyframes aaShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}


/* ===== nosan PREMIUM — professional payment screen ===== */
.pay-screen{backdrop-filter:blur(3px)}
.pay-box.pay-pro{max-width:430px;width:100%;text-align:right;padding:22px 20px 20px;
  background:linear-gradient(170deg,var(--card) 0%,var(--card2) 100%)}
.pay-pro .pay-head{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:14px}
.pay-pro .pay-gem{font-size:40px;filter:drop-shadow(0 4px 8px rgba(245,166,35,.4));animation:gemFloat 2.6s ease-in-out infinite}
@keyframes gemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pay-brand{font-weight:900;font-size:20px;letter-spacing:.5px;color:var(--ink)}
.pay-brand-pre{display:inline-block;font-size:11px;font-weight:900;color:#fff;background:var(--gold);
  padding:2px 8px;border-radius:999px;vertical-align:middle;margin-inline-start:4px;letter-spacing:1px}
.pay-plan{border:var(--bd);border-radius:18px;background:#fff;padding:14px;margin-bottom:14px;
  box-shadow:0 6px 0 rgba(44,39,34,.06)}
.pay-plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pay-plan-name{font-weight:900;font-size:16px;color:var(--ink)}
.pay-plan-cycle{font-size:12px;font-weight:800;color:var(--teal-ink);background:rgba(43,182,168,.14);
  padding:3px 10px;border-radius:999px}
.pay-price-wrap{text-align:center;padding:8px 0 4px;border-block:1.5px dashed rgba(155,139,118,.4);margin:8px 0}
.pay-local-price{font-size:34px;font-weight:900;color:var(--coral);line-height:1.1}
.pay-usd-note{font-size:13px;font-weight:800;color:var(--muted);margin-top:2px}
.pay-geo{font-size:12px;margin-top:4px}
.pay-perks{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.pay-perks li{font-size:13px;font-weight:700;color:var(--ink);background:var(--card2);border-radius:10px;padding:7px 10px}
.pay-method-title{font-weight:900;font-size:14px;margin-bottom:8px;color:var(--ink)}
.pay-pro .pay-tabs{display:flex;gap:8px;margin-bottom:8px}
.pay-pro .pay-tab{flex:1;border:var(--bd);background:#fff;border-radius:14px;padding:11px 6px;
  font-weight:800;font-size:13px;cursor:pointer;color:var(--ink);transition:.16s;font-family:inherit}
.pay-pro .pay-tab.active{background:var(--teal);color:#fff;transform:translateY(-2px);
  box-shadow:0 5px 0 var(--teal-d)}
.pay-redirect-note{font-size:12px;line-height:1.5;margin:4px 2px 12px}
.pay-pro .pay-cta{margin-top:2px}
.pay-trust{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.pay-trust-badge{font-size:11px;font-weight:800;color:var(--muted);background:var(--card2);
  border:1.5px solid rgba(155,139,118,.3);border-radius:999px;padding:4px 9px}
.pay-processing{position:absolute;inset:0;background:rgba(253,248,240,.94);border-radius:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:5}
.pay-spinner{width:46px;height:46px;border:5px solid rgba(43,182,168,.25);border-top-color:var(--teal);
  border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pay-proc-txt{font-weight:800;color:var(--teal-ink)}

/* ===== Admin — AI provider/keys + Paymob config ===== */
.ai-cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ai-cfg-grid .full{grid-column:1/-1}
.ai-cfg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ai-keys-box{border:var(--bd);border-radius:14px;background:#fff;padding:12px;margin-top:8px}
.ai-keys-add{display:flex;gap:8px;margin-bottom:10px}
.ai-keys-add input{flex:1}
.ai-keys-list{display:flex;flex-direction:column;gap:8px}
.ai-key-row{display:flex;align-items:center;gap:10px;background:var(--card2);border-radius:10px;padding:8px 12px}
.ai-key-mask{flex:1;font-family:monospace;font-weight:800;letter-spacing:1px;color:var(--ink)}
.ai-key-idx{font-size:12px;font-weight:900;color:#fff;background:var(--teal);border-radius:8px;
  min-width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.ai-key-del{background:var(--coral);color:#fff;border:none;border-radius:8px;width:30px;height:30px;
  cursor:pointer;font-weight:900;flex:none}
.ai-keys-empty{color:var(--muted);font-size:13px;text-align:center;padding:8px}
.cfg-switch{display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer}
.cfg-switch input{width:20px;height:20px}
.ai-models-box{background:var(--card2);border-radius:10px;padding:10px;margin-top:8px;font-size:13px;
  max-height:160px;overflow:auto;display:none}
.ai-models-box.show{display:block}
.ai-model-chip{display:inline-block;background:#fff;border:1.5px solid rgba(155,139,118,.3);
  border-radius:999px;padding:3px 9px;margin:3px;font-size:12px;font-weight:700}

/* ===== Tournament UI polish (same theme) ===== */
.tour-card{border:var(--bd);border-radius:18px;background:linear-gradient(165deg,#fff,var(--card2));
  padding:14px;margin-bottom:12px;box-shadow:0 6px 0 rgba(44,39,34,.06);transition:.16s;position:relative;overflow:hidden}
.tour-card:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(44,39,34,.08)}
.tour-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;
  background:linear-gradient(var(--teal),var(--gold))}
.tour-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.tour-name{font-weight:900;font-size:16px;color:var(--ink)}
.tour-by{font-size:12px;color:var(--muted);font-weight:700}
.tour-state{font-size:11px;font-weight:900;padding:3px 10px;border-radius:999px;color:#fff;white-space:nowrap}
.tour-state.open{background:var(--green)}
.tour-state.live{background:var(--coral);animation:livePulse 1.4s ease-in-out infinite}
.tour-state.done{background:var(--muted)}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.55}}
.tour-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tour-chip{font-size:12px;font-weight:800;background:var(--card2);border-radius:999px;padding:4px 10px;color:var(--ink)}
.tour-chip.prize{background:rgba(245,166,35,.18);color:var(--gold)}
.tour-chip.fee{background:rgba(43,182,168,.15);color:var(--teal-ink)}
.tour-seats{margin-top:10px}
.tour-seats-bar{height:9px;border-radius:999px;background:rgba(155,139,118,.25);overflow:hidden}
.tour-seats-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--green));transition:width .4s}
.tour-seats-txt{font-size:11px;font-weight:800;color:var(--muted);margin-top:4px}
/* bracket */
.tour-bracket{display:flex;gap:18px;overflow-x:auto;padding:8px 2px 14px}
.tour-round{display:flex;flex-direction:column;justify-content:space-around;gap:14px;min-width:150px}
.tour-round-title{font-weight:900;font-size:13px;color:var(--teal-ink);text-align:center;margin-bottom:4px}
.tour-match{border:var(--bd);border-radius:12px;background:#fff;padding:8px 10px;min-width:140px}
.tour-seat{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;
  padding:4px 2px;color:var(--ink)}
.tour-seat.win{color:var(--green)}
.tour-seat.win::after{content:"\2713";color:var(--green);font-weight:900}
.tour-seat+.tour-seat{border-top:1.5px dashed rgba(155,139,118,.35)}
.tour-seat-bot{color:var(--purple)}


/* ===================== التفاعل والاحتفاظ (v1.7) ===================== */
.btn-daily{ background:linear-gradient(135deg,var(--purple),#7d4fe0); color:#fff; }
.btn-daily .btn-tag{ background:var(--coral); color:#fff; border-radius:999px; padding:0 8px; font-weight:800; }

.daily-wrap{ display:flex; flex-direction:column; gap:14px; padding:4px 2px 24px; }
.daily-card{ background:var(--card); border:var(--bd); border-radius:var(--radius); padding:14px 16px; box-shadow:0 6px 0 rgba(0,0,0,.06); }
.dc-head{ font-weight:800; color:var(--ink); margin-bottom:10px; font-size:1.05rem; }
.dc-sub{ color:var(--muted); font-size:.82rem; margin-top:8px; }

.streak-row{ display:flex; gap:6px; justify-content:space-between; }
.streak-day{ flex:1; background:var(--card2); border:2px solid rgba(0,0,0,.08); border-radius:14px; padding:8px 2px; text-align:center; opacity:.55; }
.streak-day.on{ opacity:1; border-color:var(--teal); background:rgba(43,182,168,.12); }
.streak-day.today{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,166,35,.25); transform:translateY(-2px); }
.streak-day .sd-n{ display:block; font-weight:800; color:var(--ink); font-size:.8rem; }
.streak-day .sd-r{ display:block; font-size:.68rem; color:var(--muted); }

.daily-grab{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grab-card{ background:var(--card); border:var(--bd); border-radius:18px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; transition:transform .12s; }
.grab-card:active{ transform:scale(.95); }
.grab-card.done{ opacity:.5; filter:grayscale(.4); cursor:default; }
.grab-card .gc-ic{ font-size:1.8rem; }
.grab-card .gc-t{ font-weight:800; font-size:.8rem; color:var(--ink); }
.grab-card .gc-s{ font-size:.72rem; color:var(--teal-ink); font-weight:700; }

.quest-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1.5px dashed rgba(0,0,0,.08); }
.quest-row:first-of-type{ border-top:none; }
.quest-row.claimed{ opacity:.55; }
.quest-row .q-ic{ font-size:1.5rem; }
.quest-row .q-mid{ flex:1; }
.q-txt{ font-weight:700; color:var(--ink); font-size:.9rem; }
.q-bar{ height:8px; background:var(--card2); border-radius:999px; overflow:hidden; margin:5px 0 2px; }
.q-fill{ height:100%; background:linear-gradient(90deg,var(--teal),var(--green)); border-radius:999px; transition:width .4s; }
.q-prog{ font-size:.7rem; color:var(--muted); }
.q-act{ border:none; border-radius:12px; padding:7px 12px; font-weight:800; font-size:.8rem; white-space:nowrap; }
.q-act.claim{ background:var(--gold); color:#3a2a00; cursor:pointer; animation:pulse 1.4s infinite; }
.q-act.wait{ background:var(--card2); color:var(--muted); }
.q-act.done{ background:transparent; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

/* الأصدقاء */
.friend-add{ display:flex; gap:8px; margin-bottom:12px; }
.friend-add .text-input{ flex:1; }
.friend-reqs{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.friend-req{ display:flex; align-items:center; justify-content:space-between; background:rgba(245,166,35,.12); border:2px solid var(--gold); border-radius:14px; padding:8px 12px; }
.fr-name{ font-weight:700; color:var(--ink); }
.fr-acts{ display:flex; gap:6px; }
.friend-list{ display:flex; flex-direction:column; gap:8px; }
.friend-card{ display:flex; align-items:center; gap:10px; background:var(--card); border:var(--bd); border-radius:16px; padding:10px 12px; }
.fc-av{ position:relative; font-size:1.7rem; }
.fc-dot{ position:absolute; bottom:0; left:-2px; width:11px; height:11px; border-radius:50%; border:2px solid var(--card); }
.fc-dot.on{ background:#37c08a; } .fc-dot.off{ background:#b9ab97; }
.fc-mid{ flex:1; }
.fc-name{ font-weight:800; color:var(--ink); }
.fc-sub{ font-size:.74rem; color:var(--muted); }
.fc-acts{ display:flex; gap:4px; }

/* إهداء */
#gift-amounts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:12px 0; }
.modal-x{ position:absolute; top:10px; left:12px; }

/* لوحات الصدارة */
.lb-tabs{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; justify-content:center; }
.lb-tab{ border:2px solid rgba(0,0,0,.1); background:var(--card2); border-radius:999px; padding:5px 11px; font-weight:700; font-size:.78rem; color:var(--muted); cursor:pointer; }
.lb-tab.active{ background:var(--teal); color:#fff; border-color:var(--teal-d); }
.lb-row.me{ background:rgba(43,182,168,.14); border-radius:12px; }
.lb-season-note{ text-align:center; font-size:.8rem; color:var(--gold); font-weight:800; margin-bottom:8px; }

/* المتجر اليومي */
.dshop-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:4px 2px 24px; }
.dshop-card{ background:var(--card); border:var(--bd); border-radius:18px; padding:14px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.dshop-card.tier-epic{ border-color:var(--purple); }
.dshop-card.tier-legendary{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,166,35,.18); }
.dshop-card.owned{ opacity:.6; }
.ds-ic{ font-size:2.2rem; }
.ds-name{ font-weight:800; color:var(--ink); }
.ds-tier{ font-size:.72rem; color:var(--muted); }
.ds-price{ display:flex; gap:8px; align-items:center; }
.ds-old{ text-decoration:line-through; color:var(--muted); font-size:.8rem; }
.ds-new{ color:var(--coral); font-weight:800; }
.ds-owned{ color:var(--green); font-weight:800; font-size:.82rem; }

/* التحدي الفردي */
.solo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:4px 2px 24px; }
.solo-card{ background:var(--card); border:var(--bd); border-radius:20px; padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; transition:transform .12s; }
.solo-card:active{ transform:scale(.96); }
.sl-ic{ font-size:2.4rem; }
.sl-name{ font-weight:800; color:var(--ink); font-size:1.02rem; }
.sl-desc{ font-size:.74rem; color:var(--muted); text-align:center; }
.sl-best{ font-size:.72rem; color:var(--teal-ink); font-weight:700; margin-top:3px; }

.solo-top{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px 12px; }
.solo-mode-name{ font-weight:800; color:var(--ink); }
.solo-score-pill{ background:var(--teal); color:#fff; border-radius:999px; padding:5px 14px; font-weight:800; }
.solo-meter{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.solo-lives{ display:flex; gap:3px; font-size:1.1rem; }
.solo-lives .heart.dead{ filter:grayscale(1); opacity:.35; }
.solo-timer-wrap{ position:relative; flex:1; height:26px; background:var(--card2); border:2px solid var(--ink); border-radius:999px; overflow:hidden; }
.solo-timer-fill{ position:absolute; inset:0; right:0; background:linear-gradient(90deg,var(--green),var(--yellow),var(--coral)); width:100%; transition:width 1s linear; }
.solo-timer-wrap span{ position:relative; z-index:1; display:block; text-align:center; line-height:22px; font-weight:800; color:var(--ink); }
.solo-q{ background:var(--card); border:var(--bd); border-radius:var(--radius); padding:20px 16px; text-align:center; }
.solo-cat{ display:inline-block; background:var(--card2); border-radius:999px; padding:3px 12px; font-size:.78rem; color:var(--muted); font-weight:700; margin-bottom:10px; }
.solo-hint{ font-size:1.25rem; font-weight:800; color:var(--ink); margin-bottom:18px; min-height:48px; }
.solo-opts{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.solo-opt{ background:var(--card2); border:2.5px solid var(--ink); border-radius:16px; padding:14px 8px; font-weight:800; color:var(--ink); cursor:pointer; transition:transform .1s; }
.solo-opt:active{ transform:scale(.95); }
.solo-opt.right{ background:var(--green); color:#fff; }
.solo-opt.wrong{ background:var(--coral); color:#fff; }
.solo-streak{ text-align:center; margin-top:14px; font-weight:800; color:var(--coral); font-size:1.1rem; opacity:0; transition:opacity .2s, transform .2s; transform:scale(.8); }
.solo-streak.show{ opacity:1; transform:scale(1); }
.solo-over-box{ text-align:center; }
.so-ic{ font-size:3rem; }
.so-stats{ display:flex; justify-content:space-around; margin:14px 0; }
.so-stats div{ display:flex; flex-direction:column; }
.so-stats b{ font-size:1.4rem; color:var(--teal-ink); }
.so-stats span{ font-size:.72rem; color:var(--muted); }
.so-reward{ background:rgba(245,166,35,.16); border-radius:14px; padding:10px; font-weight:800; color:var(--gold); margin-bottom:14px; }


/* ============================================================
   v1.7.2 — متجر/إهداء/شات/حظر + أنيمشنات احترافية (نفس الثيم)
   ============================================================ */

/* ---- تبويبات الإهداء ---- */
.gift-modal-pro{ max-width:440px; }
.gift-tabs{ display:flex; gap:8px; margin:10px 0 14px; background:var(--card2); border:var(--bd); border-radius:16px; padding:5px; }
.gift-tab{ flex:1; border:none; background:transparent; cursor:pointer; font:inherit; font-weight:800;
  color:var(--muted); padding:9px 6px; border-radius:12px; transition:.18s transform,.18s background,.18s color; }
.gift-tab:hover{ transform:translateY(-1px); color:var(--txt); }
.gift-tab.sel{ background:var(--teal); color:#fff; box-shadow:3px 3px 0 rgba(44,39,34,.18); }
.gift-pane[hidden]{ display:none; }

/* ---- شبكة عناصر الحقيبة للإهداء ---- */
.gift-items-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:10px; max-height:46vh; overflow:auto; padding:2px; }
.gift-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  background:var(--card); border:var(--bd); border-radius:16px; padding:12px 6px 8px; font:inherit; overflow:hidden;
  box-shadow:4px 4px 0 rgba(44,39,34,.10); transition:transform .16s, box-shadow .16s; animation:gi-pop .32s backwards; }
.gift-item:nth-child(2){ animation-delay:.04s } .gift-item:nth-child(3){ animation-delay:.08s }
.gift-item:nth-child(4){ animation-delay:.12s } .gift-item:nth-child(5){ animation-delay:.16s }
.gift-item:hover{ transform:translateY(-3px) scale(1.03); box-shadow:6px 8px 0 rgba(44,39,34,.16); }
.gift-item:active{ transform:scale(.96); }
.gift-item .gi-ic{ font-size:30px; line-height:1; filter:drop-shadow(0 3px 3px rgba(0,0,0,.18)); }
.gift-item .gi-nm{ font-weight:800; font-size:.78rem; text-align:center; color:var(--txt); }
.gift-item .gi-tier{ font-size:.62rem; font-weight:800; color:var(--muted); }
.gift-item .gi-give{ margin-top:3px; font-size:.66rem; font-weight:800; color:#fff; background:var(--coral);
  border-radius:10px; padding:2px 8px; opacity:0; transform:translateY(6px); transition:.16s; }
.gift-item:hover .gi-give{ opacity:1; transform:none; }
.gift-item.gi-sent{ animation:gi-sent .6s forwards; pointer-events:none; }
.gift-item.gi-tier-rare{ box-shadow:0 0 0 2px var(--blue) inset, 4px 4px 0 rgba(44,39,34,.10); }
.gift-item.gi-tier-epic{ box-shadow:0 0 0 2px var(--purple) inset, 4px 4px 0 rgba(44,39,34,.10); }
.gift-item.gi-tier-legendary{ box-shadow:0 0 0 2px var(--gold) inset, 4px 4px 0 rgba(44,39,34,.10);
  background:linear-gradient(135deg,var(--card),#fff7e0); }
.gift-item.gi-tier-legendary::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%); animation:gi-shine 2.6s infinite; }
@keyframes gi-pop{ from{ opacity:0; transform:scale(.6) translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes gi-sent{ 50%{ transform:scale(1.18) rotate(-6deg); } 100%{ opacity:0; transform:scale(.3) translateY(-30px); } }
@keyframes gi-shine{ 0%,70%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }

/* ---- نافذة الشات ---- */
.chat-modal{ max-width:460px; width:94%; display:flex; flex-direction:column; height:min(74vh,560px); padding:0; overflow:hidden; }
.chat-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--teal); color:#fff; border-bottom:var(--bd); }
.chat-head .chip-x{ background:rgba(255,255,255,.22); color:#fff; }
.chat-av{ font-size:26px; width:40px; height:40px; display:grid; place-items:center; background:rgba(255,255,255,.2); border-radius:50%; }
.chat-who{ flex:1; min-width:0; }
.chat-name{ font-weight:900; font-size:1rem; }
.chat-status{ font-size:.72rem; opacity:.92; }
.chat-block{ background:rgba(0,0,0,.18)!important; }
.chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;
  background:repeating-linear-gradient(135deg,var(--bg0),var(--bg0) 22px,var(--bg1) 22px,var(--bg1) 44px); }
.chat-bubble{ max-width:78%; padding:8px 12px; border-radius:16px; font-size:.92rem; line-height:1.4; word-break:break-word;
  border:2px solid var(--ink); box-shadow:2px 2px 0 rgba(44,39,34,.12); animation:cb-in .26s backwards; }
.chat-bubble.mine{ align-self:flex-start; background:var(--teal); color:#fff; border-bottom-right-radius:5px; }
.chat-bubble.theirs{ align-self:flex-end; background:var(--card); color:var(--txt); border-bottom-left-radius:5px; }
@keyframes cb-in{ from{ opacity:0; transform:translateY(8px) scale(.92); } to{ opacity:1; transform:none; } }
.chat-note{ align-self:center; background:var(--red); color:#fff; font-weight:800; font-size:.78rem; padding:5px 12px; border-radius:12px; }
.chat-input-row{ display:flex; gap:8px; padding:10px 12px; border-top:var(--bd); background:var(--card2); }
.chat-input-row .text-input{ flex:1; }
.chat-input-row .btn{ padding:0 16px; }
.chat-input-row .text-input:disabled{ opacity:.5; }

/* ---- قائمة المحظورين ---- */
.friend-blocked{ margin-top:14px; }
.blk-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--card2);
  border:var(--bd); border-radius:14px; padding:8px 12px; margin-bottom:8px; }
.blk-nm{ font-weight:800; color:var(--muted); }

/* ---- أنيمشن انفجار العملات/الهدايا ---- */
.fx-layer{ position:fixed; inset:0; pointer-events:none; z-index:9999; }
.fx-coin{ position:absolute; bottom:32%; font-size:26px; will-change:transform,opacity;
  animation:fx-coin-fly 1.4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fx-coin-fly{ 0%{ opacity:0; transform:translate(0,0) scale(.4) rotate(0); }
  15%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(var(--rot)); } }
.fx-gift{ position:fixed; font-size:30px; pointer-events:none; z-index:9999; will-change:transform,opacity;
  transform:translate(-50%,-50%); animation:fx-gift-fly 1.1s cubic-bezier(.3,.8,.2,1) forwards; }
@keyframes fx-gift-fly{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); }
  25%{ opacity:1; transform:translate(-50%,-50%) scale(1.3); }
  100%{ opacity:0; transform:translate(-50%,-220%) scale(.7) rotate(20deg); } }
@media (prefers-reduced-motion: reduce){
  .fx-coin,.fx-gift,.gift-item,.gift-item.gi-tier-legendary::after,.chat-bubble{ animation:none!important; }
}


/* ============================================================
   v1.7.3 — مسافات بسيطة وموحّدة بين كل الأزرار
   ============================================================ */
.menu-pane{ display:flex; flex-direction:column; gap:14px; }
.menu-pane .btn-block{ margin-top:0; }      /* إلغاء الهامش المزدوج داخل القائمة */
.menu-row{ gap:12px; }
.menu-grid{ gap:12px; }
/* فاصل خفيف بين الأزرار المتراصّة خارج الحاويات المرنة */
.btn-block + .btn-block{ margin-top:12px; }

/* ===== v1.7.5: تجهيز الحقيبة + بحث الأصدقاء + دعوة صديق + تباعد أزرار البطولات ===== */
.bag-equip{margin-top:6px;width:100%;border:none;border-radius:10px;padding:5px 8px;font-size:12px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#2ba096,#3aa0d0);color:#fff}
.bag-equip:active{transform:scale(.96)}
.bag-item.equipped{outline:2px solid #e0b341;outline-offset:1px}
.friend-results{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.friend-res{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px}
.friend-res .fr-av{font-size:26px}
.friend-res .fr-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.friend-res .fr-nm{font-weight:800;font-size:14px}
.friend-res .fr-un{font-size:12px;opacity:.7;direction:ltr;text-align:right}
.btn-mini{border:none;border-radius:10px;padding:6px 12px;font-size:12px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#2ba096,#3aa0d0);color:#fff;white-space:nowrap}
.btn-mini:active{transform:scale(.96)}
.invite-card .invite-row{display:flex;gap:8px;margin:8px 0;align-items:center}
.invite-card #invite-link{flex:1;min-width:0;direction:ltr;font-size:12px}
/* تباعد أزرار صفحة البطولات */
#screen-tournaments .tour-create-cta{display:flex;flex-direction:column;gap:12px;margin-top:14px}
#screen-tournaments .tour-join-code{display:flex;gap:8px;margin-top:4px}
#screen-tournaments .panel .btn-block{margin-top:12px}
#screen-tournaments .panel .btn-block:first-of-type{margin-top:4px}

/* =====================================================================
   تحسينات الأنميشن الشاملة (v1.8) — تُحترم تلقائيًا مع وضع تقليل الحركة
   عبر القاعدة body.reduce-anim * { animation/transition معطّلة }
   ===================================================================== */
@keyframes riseIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes iconWiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-10deg) scale(1.14)}75%{transform:rotate(10deg) scale(1.14)}}
@keyframes softBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes chipPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes sheen{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:drop-shadow(0 0 10px rgba(255,210,80,.55))}}
@keyframes coinKick{0%{transform:scale(1)}35%{transform:scale(1.28) rotate(-6deg)}100%{transform:scale(1)}}

/* دخول متدرّج لعناصر القوائم والشاشات */
.menu-grid>*{animation:riseIn .5s cubic-bezier(.2,1,.4,1) both}
.menu-grid>*:nth-child(1){animation-delay:.04s}
.menu-grid>*:nth-child(2){animation-delay:.10s}
.menu-grid>*:nth-child(3){animation-delay:.16s}
.menu-grid>*:nth-child(4){animation-delay:.22s}
.menu-grid>*:nth-child(5){animation-delay:.28s}
.menu-grid>*:nth-child(6){animation-delay:.34s}
.modes-grid .mode-card{animation:riseIn .55s cubic-bezier(.2,1,.4,1) both}
.modes-grid .mode-card:nth-child(1){animation-delay:.05s}
.modes-grid .mode-card:nth-child(2){animation-delay:.14s}
.modes-grid .mode-card:nth-child(3){animation-delay:.23s}
.pane-in>*{animation:riseIn .45s cubic-bezier(.2,1,.4,1) both}
.pane-in>*:nth-child(2){animation-delay:.06s}
.pane-in>*:nth-child(3){animation-delay:.12s}
.pane-in>*:nth-child(4){animation-delay:.18s}

/* تفاعلات اللمس/المرور على الأزرار */
.btn{transition:transform .15s cubic-bezier(.2,1.5,.4,1),box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.97)}
.btn-ic{display:inline-block;transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
.btn:hover .btn-ic{transform:scale(1.2) rotate(-8deg)}

/* لمعان خفيف يمر على الأزرار الرئيسية عند المرور */
.btn-primary,.btn-accent{position:relative;overflow:hidden}
.btn-primary::after,.btn-accent::after{content:"";position:absolute;top:0;left:-20%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none;opacity:0}
.btn-primary:hover::after,.btn-accent:hover::after{opacity:1;animation:sheen 1s ease}

/* بطاقات الأوضاع: ارتفاع + رقص الأيقونة */
.mode-card{transition:transform .2s cubic-bezier(.2,1.3,.4,1),box-shadow .2s,filter .2s}
.mode-card:hover{transform:translateY(-7px) scale(1.025)}
.mode-card:hover .mc-ic{display:inline-block;animation:iconWiggle .65s ease}

/* بلاطات القائمة */
.menu-tile{transition:transform .16s cubic-bezier(.2,1.4,.4,1),box-shadow .16s}
.menu-tile:hover{transform:translateY(-4px) scale(1.03)}
.menu-tile:hover .mt-ic,.menu-tile:active .mt-ic{display:inline-block;animation:iconWiggle .6s ease}

/* شرائح/أزرار صغيرة */
.chip-x,.flt-chip,.pill-opt{transition:transform .14s cubic-bezier(.2,1.5,.4,1),background .14s}
.chip-x:hover{transform:scale(1.18) rotate(8deg)}
.flt-chip:hover,.pill-opt:hover{transform:translateY(-2px)}

/* الأفاتار وحبّة العملات */
#profile-avatar{transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
#profile-avatar:hover{transform:scale(1.08) rotate(-4deg);animation:softBob 1.6s ease-in-out infinite}
.coins-pill,.coin-chip,#coins{transition:transform .2s}
.coins-pill:hover,.coin-chip:hover{transform:scale(1.07)}
.coin-bump{display:inline-block;animation:coinKick .5s ease}

/* بطاقات الأصدقاء وصفوف لوحة الصدارة تدخل بنعومة */
.friend-card{animation:riseIn .4s ease both}
.lb-row{animation:chipPop .4s cubic-bezier(.2,1.2,.4,1) both}
.lb-row:nth-child(2){animation-delay:.04s}
.lb-row:nth-child(3){animation-delay:.08s}
.lb-row:nth-child(4){animation-delay:.12s}
.lb-row.me{animation:glowPulse 2.2s ease-in-out infinite}

/* بطاقات الإحصائيات (لوحة المدير) */
.stat-card{transition:transform .18s cubic-bezier(.2,1.3,.4,1),box-shadow .18s;animation:riseIn .45s ease both}
.stat-card:hover{transform:translateY(-4px) scale(1.03)}

/* ظهور المودالات بقفزة لطيفة */
.modal-overlay:not([hidden]) .modal,.modal-overlay:not([hidden]) .modal-card,.modal-overlay:not([hidden]) .sheet{animation:chipPop .34s cubic-bezier(.2,1.3,.4,1)}

/* مؤشّر تبويب القائمة يتحرّك بسلاسة أكبر */
.menu-tab-ind{transition:transform .32s cubic-bezier(.3,1.4,.4,1)}
.menu-tab{transition:transform .14s}
.menu-tab:active{transform:scale(.94)}

/* التوست يدخل من الأعلى */
.toast:not([hidden]){animation:riseIn .3s ease}

/* =====================================================================
   طبقة التنعيم والاحترافية (v1.8.1)
   ترفع السلاسة والإحساس الاحترافي دون تغيير هوية العلامة
   (تُعطّل تلقائيًا عبر body.reduce-anim *)
   ===================================================================== */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);          /* دخول ناعم */
  --ease-out:cubic-bezier(.16,1,.3,1);          /* تباطؤ سلس */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);   /* ارتداد خفيف */
  --dur:.22s; --dur-lg:.4s;
}

/* تنعيم عام للعرض والتمرير والخطوط */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1;-webkit-text-size-adjust:100%}
*{scrollbar-width:thin;scrollbar-color:rgba(44,39,34,.28) transparent}

/* تحديد النص بلون العلامة */
::selection{background:var(--teal);color:#fff}

/* أشرطة تمرير احترافية أنيقة */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(44,39,34,.22);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(44,39,34,.4);background-clip:padding-box}

/* تمرير بزخم لمسي على الحاويات */
.app,.modal,.panel,.pane-in,.menu-buttons{-webkit-overflow-scrolling:touch}

/* توحيد منحنى التنعيم لكل العناصر التفاعلية */
a,button,input,select,textarea,
.btn,.chip,.chip-x,.mode-card,.menu-tile,.menu-tab,.avatar-opt,.text-input,
.profile-chip,.coins-pill,.back-btn,.flt-chip,.pill-opt,.modal-x,.stat-card{
  transition-timing-function:var(--ease-out);
}

/* حالات التركيز الاحترافية (وصولية + أناقة) */
:focus{outline:none}
.btn:focus-visible,.chip:focus-visible,.menu-tile:focus-visible,.mode-card:focus-visible,
.avatar-opt:focus-visible,.menu-tab:focus-visible,.back-btn:focus-visible,.chip-x:focus-visible,
.flt-chip:focus-visible,.modal-x:focus-visible,a:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;
}
.text-input:focus-visible,.pay-input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* حلقة تركيز ناعمة للإدخالات */
.text-input{transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.text-input:focus{box-shadow:3px 3px 0 var(--teal),0 0 0 4px rgba(43,182,168,.16)}

/* عمق تفاعلي أنعم للبطاقات واللوحات */
.panel,.login-card,.modal{transition:box-shadow var(--dur-lg) var(--ease-out),transform var(--dur-lg) var(--ease-out)}
.avatar-opt{transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}

/* الشرائح والأزرار الصغيرة أنعم */
.chip{transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.back-btn{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.back-btn:hover{transform:translateX(3px)}
.coins-pill{transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out)}
.profile-chip{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.profile-chip:hover{transform:translateY(-2px);box-shadow:5px 6px 0 rgba(44,39,34,.16)}

/* انتقال الشاشات أسلس */
.screen{animation:fade var(--dur-lg) var(--ease-out)}

/* نوافذ منبثقة بخلفية ضبابية أنعم وظهور سلس */
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal-overlay:not([hidden]){animation:overlayIn var(--dur) var(--ease-out);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);background:rgba(44,39,34,.5)}

/* تلميع زر إغلاق النافذة */
.modal-x{transition:transform var(--dur) var(--ease-spring),background var(--dur) var(--ease-out)}

/* مؤشّر التبويب والبلاطات أكثر انسيابًا */
.menu-tab-ind{transition:transform var(--dur-lg) var(--ease-spring)}
.menu-tile{transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}

/* تقليل ارتعاش الرسوم وتحسين الحدّة */
.btn,.mode-card,.menu-tile,.modal,.panel,.coins-pill,.profile-chip,.chip{will-change:transform}
img,svg,.mc-ic,.mt-ic,.btn-ic{-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* ===== إعدادات اللاعب ===== */
.set-sep{border:none;border-top:2px dashed var(--line,rgba(44,39,34,.14));margin:14px 0}

/* ===== تابات متحركة (play/account) ===== */
.menu-tabs{display:flex;position:relative;gap:0;margin-bottom:16px;background:var(--card);border:var(--bd);border-radius:16px;overflow:hidden}
.menu-tab{flex:1;padding:12px 8px;border:none;background:transparent;font-family:inherit;font-weight:800;font-size:14px;color:var(--muted);cursor:pointer;position:relative;z-index:2;transition:color .3s}
.menu-tab.active{color:var(--ink)}
.menu-tab-ind{position:absolute;top:4px;bottom:4px;width:50%;background:var(--teal);border-radius:12px;z-index:1;transition:transform .35s cubic-bezier(.25,.8,.25,1);transform:translateX(0)}
.menu-tab-ind + .menu-tab{transition:color .3s}
.menu-pane{animation:paneIn .35s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* احترام تفضيل تقليل الحركة على مستوى النظام */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===== Notifications ===== */
.notif-list{display:flex;flex-direction:column;gap:10px;max-height:55vh;overflow-y:auto;padding:4px 0}
.notif-item{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px;box-shadow:2px 2px 0 rgba(44,39,34,.12)}
.notif-item.unread{border-color:var(--teal);background:#f4fdfb}
.notif-text{flex:1;font-weight:600;font-size:13px;line-height:1.5}
.notif-time{font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.notif-empty{text-align:center;color:var(--muted);font-weight:800;padding:40px 0}

/* ===== Bag ===== */
.bag-tabs{display:flex;gap:6px;margin:10px 0}
.bag-tab{flex:1;padding:8px;background:#fff;border:2px solid var(--ink);border-radius:12px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;transition:.12s;color:var(--muted)}
.bag-tab.sel{background:var(--teal);color:#fff;box-shadow:2px 2px 0 var(--ink)}
.bag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-height:50vh;overflow-y:auto;padding:4px 0}
.bag-item{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px 6px;text-align:center;box-shadow:2px 2px 0 rgba(44,39,34,.12);transition:.12s}
.bag-item.equipped{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.bag-item .bi-ic{font-size:28px;display:block;margin-bottom:4px}
.bag-item .bi-name{font-size:11px;font-weight:800;color:var(--muted)}
.bag-item .bi-tag{display:inline-block;margin-top:4px;font-size:10px;font-weight:900;background:var(--teal);color:#fff;padding:2px 8px;border-radius:10px;border:1px solid var(--ink)}
@media(max-width:480px){.bag-grid{grid-template-columns:repeat(3,1fr)}}

/* ===== Friends ===== */
.friends-tabs{display:flex;gap:6px;margin:10px 0}
.fr-tab{flex:1;padding:8px;background:#fff;border:2px solid var(--ink);border-radius:12px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;transition:.12s;color:var(--muted)}
.fr-tab.sel{background:var(--teal);color:#fff;box-shadow:2px 2px 0 var(--ink)}
.fr-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;padding:4px 0}
.fr-row{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 12px;box-shadow:2px 2px 0 rgba(44,39,34,.12)}
.fr-av{font-size:24px}
.fr-nm{flex:1;font-weight:800;font-size:14px}
.fr-empty{text-align:center;color:var(--muted);font-weight:800;padding:30px 0}
.fr-search-area{margin-top:10px}
.fr-search-row{display:flex;gap:8px}
.fr-search-row .text-input{flex:1}
.fr-search-results{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:30vh;overflow-y:auto}

/* ================================================================ */
/* ===== انميشن VS المتقدم من v1.8.2 ===== */
/* ================================================================ */
.vs-overlay.vs-enhanced{background:radial-gradient(circle at 50% 50%,#1a1030,#070410 80%)}
.vs-overlay.vs-enhanced .vs-side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;position:relative;transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.vs-overlay.vs-enhanced .vs-side.right{transform:translateX(120%)}
.vs-overlay.vs-enhanced.show .vs-side{transform:translateX(0)}
.vs-overlay.vs-enhanced .vs-side.left{background:linear-gradient(135deg,rgba(43,182,168,.22),transparent)}
.vs-overlay.vs-enhanced .vs-side.right{background:linear-gradient(225deg,rgba(225,85,155,.22),transparent)}
.vs-overlay.vs-enhanced .vs-glow{position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(55px);opacity:.5;background:#2bb6a8;top:28%}
.vs-overlay.vs-enhanced .vs-side.right .vs-glow{background:#e1559b}
.vs-overlay.vs-enhanced .vs-av{font-size:74px;width:120px;height:120px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:0 8px 30px rgba(0,0,0,.5);animation:vsPop2 .6s .3s both}
@keyframes vsPop2{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.vs-overlay.vs-enhanced .vs-name{font-size:24px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.vs-overlay.vs-enhanced .vs-lvl{font-size:15px;font-weight:800;color:#ffd54a;background:rgba(0,0,0,.35);padding:3px 12px;border-radius:20px}
.vs-overlay.vs-enhanced .vs-title{font-size:13px;color:#cdbff0}
.vs-overlay.vs-enhanced .vs-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0) rotate(-25deg);font-size:90px;font-weight:1000;color:#fff;-webkit-text-stroke:3px #ff3b6b;text-shadow:0 0 30px rgba(255,59,107,.8);font-family:Impact,system-ui,sans-serif}
.vs-overlay.vs-enhanced.show .vs-vs{animation:vsIn2 .6s 1.1s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes vsIn2{0%{transform:translate(-50%,-50%) scale(0) rotate(-25deg);opacity:0}60%{transform:translate(-50%,-50%) scale(1.4) rotate(8deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
.vs-overlay.vs-enhanced.clash .vs-vs{animation:vsShake2 .45s ease-in-out}
@keyframes vsShake2{0%,100%{transform:translate(-50%,-50%) scale(1)}20%{transform:translate(-54%,-50%) scale(1.15) rotate(-6deg)}50%{transform:translate(-46%,-50%) scale(1.2) rotate(6deg)}80%{transform:translate(-52%,-50%) scale(1.1)}}
.vs-overlay.vs-enhanced .vs-spark{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:0}
.vs-overlay.vs-enhanced.clash .vs-spark{animation:vsBoom2 .5s ease-out}
@keyframes vsBoom2{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.9)}100%{opacity:0;box-shadow:0 0 0 240px rgba(255,90,120,0)}}
.vs-overlay.vs-enhanced .vs-floats{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.vs-overlay.vs-enhanced .vs-float{position:absolute;top:108%;opacity:0;animation:vsFloatUp linear infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
@keyframes vsFloatUp{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(-130vh) rotate(150deg);opacity:0}}
.vs-overlay.vs-enhanced .vs-mode-badge{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(0,0,0,.45);color:#fff;font-weight:800;font-size:15px;padding:6px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35)}
@media (max-width:560px){.vs-overlay.vs-enhanced .vs-vs{font-size:58px}.vs-overlay.vs-enhanced .vs-av{font-size:52px;width:88px;height:88px}.vs-overlay.vs-enhanced .vs-name{font-size:19px}.vs-overlay.vs-enhanced .vs-glow{width:160px;height:160px}}

/* VS حسب التصنيف */
.vs-overlay.vs-enhanced.cat-animals{background:radial-gradient(circle at 50% 40%,#2f7d4f,#0c3a22 82%)}
.vs-overlay.vs-enhanced.cat-animals .vs-vs{-webkit-text-stroke:3px #7be0a0;text-shadow:0 0 30px rgba(123,224,160,.9)}
.vs-overlay.vs-enhanced.cat-anime{background:radial-gradient(circle at 50% 45%,#3a1a6b,#0a0420 82%)}
.vs-overlay.vs-enhanced.cat-anime .vs-vs{-webkit-text-stroke:3px #ff5da2;text-shadow:0 0 34px rgba(255,93,162,.95);color:#fff0fb}
.vs-overlay.vs-enhanced.cat-football{background:radial-gradient(circle at 50% 42%,#1f7a43,#06351c 82%)}
.vs-overlay.vs-enhanced.cat-football .vs-vs{-webkit-text-stroke:3px #fff;text-shadow:0 0 30px rgba(120,255,160,.8)}
.vs-overlay.vs-enhanced.cat-food{background:radial-gradient(circle at 50% 40%,#b85c1f,#3a1c06 82%)}
.vs-overlay.vs-enhanced.cat-food .vs-vs{-webkit-text-stroke:3px #ffd23f;text-shadow:0 0 30px rgba(255,210,63,.9)}
.vs-overlay.vs-enhanced.cat-countries{background:radial-gradient(circle at 50% 45%,#1e5fa8,#04162e 82%)}
.vs-overlay.vs-enhanced.cat-countries .vs-vs{-webkit-text-stroke:3px #5ad1ff;text-shadow:0 0 32px rgba(90,209,255,.9);color:#eafcff}
.vs-overlay.vs-enhanced.cat-cartoon{background:radial-gradient(circle at 50% 42%,#7a2f8a,#240a2c 82%)}
.vs-overlay.vs-enhanced.cat-cartoon .vs-vs{-webkit-text-stroke:3px #ff8a3d;text-shadow:0 0 30px rgba(255,138,61,.9)}
.vs-overlay.vs-enhanced.cat-celebrities{background:radial-gradient(circle at 50% 42%,#9b7a1f,#2c2106 82%)}
.vs-overlay.vs-enhanced.cat-celebrities .vs-vs{-webkit-text-stroke:3px #ffd54a;text-shadow:0 0 30px rgba(255,213,74,.95)}
.vs-overlay.vs-enhanced.cat-youtubers{background:radial-gradient(circle at 50% 42%,#a32020,#2c0606 82%)}
.vs-overlay.vs-enhanced.cat-youtubers .vs-vs{-webkit-text-stroke:3px #ff5d5d;text-shadow:0 0 30px rgba(255,93,93,.9)}

/* عدّاد 3-2-1 */
.cd-overlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(8,4,16,.32);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);animation:cdFade .25s ease-out}
@keyframes cdFade{from{opacity:0}to{opacity:1}}
.cd-num{font-size:140px;font-weight:1000;color:#fff;font-family:Impact,system-ui,sans-serif;-webkit-text-stroke:4px #ff5b6b;text-shadow:0 0 40px rgba(255,91,107,.8);animation:cdPop .72s ease-out forwards}
.cd-num.go{font-size:96px;-webkit-text-stroke:4px #5cf0a0;text-shadow:0 0 44px rgba(92,240,160,.9)}
@keyframes cdPop{0%{transform:scale(2.4);opacity:0}28%{transform:scale(1);opacity:1}72%{opacity:1}100%{transform:scale(.5);opacity:0}}
@media (max-width:560px){.cd-num{font-size:92px}.cd-num.go{font-size:60px}}

/* ===== شريط الوقت ===== */
.phase-timer{height:12px;border-radius:8px;background:rgba(0,0,0,.18);overflow:hidden;margin:6px auto 4px;width:min(420px,92%);box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.phase-timer-fill{height:100%;width:100%;border-radius:8px;transition:width .9s linear,background .4s}
.phase-timer-fill.t-green{background:linear-gradient(90deg,#36d07a,#22b765)}
.phase-timer-fill.t-yellow{background:linear-gradient(90deg,#ffd54a,#f6b73c)}
.phase-timer-fill.t-red{background:linear-gradient(90deg,#ff6b6b,#e23b3b)}
.phase-timer-fill.t-pulse{animation:tpulse2 .7s ease-in-out infinite}
@keyframes tpulse2{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== turn banner المحسّن ===== */
#turn-banner.mine{background:linear-gradient(135deg,#1f9d62,#27c06f);color:#fff;box-shadow:0 0 14px rgba(39,192,111,.5)}
#turn-banner.wait{background:linear-gradient(135deg,#5a5f6e,#3c4150);color:#dfe3ec;opacity:.92}
.turn-active{position:relative;border-radius:12px;animation:turnPulse2 1.4s ease-in-out infinite}
@keyframes turnPulse2{0%,100%{box-shadow:0 0 0 2px #ffd35c,0 0 8px rgba(255,211,92,.35)}50%{box-shadow:0 0 0 2px #ffe79a,0 0 18px rgba(255,211,92,.75)}}

/* ===== انميشن البحث السريع ===== */
.qp-wrap{max-width:440px;margin:24px auto;text-align:center;padding:26px;border-radius:22px;background:rgba(255,255,255,.04);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.qp-radar{position:relative;width:150px;height:150px;margin:6px auto 18px}
.qp-ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(120,180,255,.45);animation:qpPulse 1.8s ease-out infinite}
.qp-ring.r2{animation-delay:.9s}
.qp-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px;animation:qpSpin 3.2s linear infinite}
@keyframes qpPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes qpSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.qp-status{font-size:20px;font-weight:800;margin-bottom:12px}
.qp-bar{height:10px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;margin:10px 0}
.qp-bar-fill{height:100%;width:0%;border-radius:9px;background:linear-gradient(90deg,#2ba096,#3ac0b0);transition:width .5s}
.qp-sub{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:10px}
.qp-tip{font-size:12px;color:rgba(255,200,100,.7);margin-bottom:10px;font-weight:800}

/* ===== بروفايل متقدم ===== */
.prof-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.prof-avatar{font-size:38px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--card2);border:var(--bd);border-radius:50%}
.prof-title{font-weight:800;color:var(--coral);font-size:14px}
.prof-level-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.prof-lvl-badge{font-weight:900;color:#fff;background:linear-gradient(150deg,var(--teal),var(--teal-d));border:2px solid var(--ink);border-radius:20px;padding:4px 12px;font-size:13px;white-space:nowrap}
.xp-bar{flex:1;height:14px;background:#fff;border:2px solid var(--ink);border-radius:20px;overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--coral));border-radius:20px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.prof-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.prof-stat{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:3px 3px 0 rgba(44,39,34,.12)}
.ps-ic{font-size:20px}
.ps-num{font-size:19px;font-weight:900;color:var(--teal-ink)}
.ps-lbl{font-size:10px;font-weight:800;color:var(--muted);margin-top:2px}
@media(max-width:480px){.prof-stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== الإنجازات ===== */
.sect-h{font-weight:900;font-size:15px;margin:14px 0 8px;text-align:center;color:var(--teal-ink)}
.achv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.achv{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:2px solid var(--ink);border-radius:14px;background:var(--card2);transition:.14s}
.achv.off{opacity:.38;filter:grayscale(.7)}
.achv.on{background:linear-gradient(160deg,#fff6df,#ffe9b0)}
.achv-ic{font-size:24px;line-height:1}
.achv-nm{font-weight:800;font-size:10px;text-align:center;color:var(--ink)}

/* ===== المتجر المحسّن ===== */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;max-height:46vh;overflow:auto}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:var(--bd);border-radius:16px;background:var(--card2)}
.shop-item.owned{background:linear-gradient(160deg,#e7f7ee,#cfeede)}
.shop-av{font-size:38px;line-height:1}
.shop-buy{border:var(--bd);border-radius:18px;padding:5px 12px;font-family:inherit;font-weight:900;font-size:13px;cursor:pointer;background:linear-gradient(150deg,var(--coral),var(--coral-d));color:#fff;transition:.12s}
.shop-buy:hover{transform:translateY(-1px)}
.shop-tabs{display:flex;gap:8px;margin-bottom:12px}
.shop-tab{flex:1;padding:9px 6px;border-radius:12px;border:1px solid rgba(44,39,34,.15);background:transparent;color:var(--ink);cursor:pointer;font-weight:800;font-size:13px;transition:.18s}
.shop-tab.sel{background:var(--teal);color:#fff;box-shadow:0 4px 14px rgba(43,160,150,.4)}
.skin-item{border-radius:16px;padding:10px 8px;text-align:center;border:2px solid var(--bd);background:var(--card2);position:relative}
.skin-preview{width:62px;height:84px;margin:0 auto 6px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.1);overflow:hidden;position:relative}
.skin-name{font-weight:800;font-size:13px}
.skin-tier{font-size:11px;opacity:.85;margin-bottom:6px}
.shop-equip{border:none;border-radius:9px;padding:5px 12px;font-weight:800;cursor:pointer;font-size:12px;background:#5cc28a;color:#06281c}
.shop-tag.own{font-weight:900;font-size:12px;color:var(--teal-ink)}

/* ===== الحقيبة ===== */
.bag-body{max-height:56vh;overflow:auto;padding-right:4px}
.bag-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.bag-item{position:relative;width:90px;padding:12px 6px;border-radius:14px;text-align:center;background:var(--card2);border:2px solid var(--ink)}
.bag-item.equipped{border-color:#ffd35c;box-shadow:0 0 12px rgba(255,211,92,.4)}
.bag-item .bag-ic{font-size:30px;display:inline-flex}
.bag-item .bag-nm{font-size:12px;margin-top:4px;font-weight:600}
.bag-item .shop-tag.own{position:absolute;top:6px;left:6px}
.bag-equip{margin-top:6px;width:100%;border:none;border-radius:10px;padding:5px 8px;font-size:12px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#2ba096,#3aa0d0);color:#fff}
.bag-equip:active{transform:scale(.96)}

/* ===== تأثيرات أسطورية ===== */
@keyframes legGlow{0%,100%{box-shadow:0 0 16px rgba(224,179,65,.45),inset 0 0 18px rgba(224,179,65,.25)}50%{box-shadow:0 0 34px rgba(224,179,65,.95),inset 0 0 26px rgba(224,179,65,.5)}}
@keyframes legBorder{0%,100%{border-color:#e0b341}50%{border-color:#ffe27a}}
@keyframes legFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes legSpark{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:.75;transform:scale(1.1)}}
.secret-card.legendary-skin{position:relative;border:2.5px solid #e0b341;border-radius:18px;animation:legGlow 2.4s ease-in-out infinite,legBorder 3s ease-in-out infinite,legFloat 4.4s ease-in-out infinite;box-shadow:0 0 18px rgba(224,179,65,.45),0 0 42px rgba(255,210,90,.18)}
.secret-card.legendary-skin::after{content:"\2728";position:absolute;top:8px;left:11px;font-size:15px;opacity:.65;animation:legSpark 2.6s ease-in-out infinite;pointer-events:none}

/* ===== عجلة الحظ ===== */
.wheel-wrap{text-align:center;padding:6px 0}
.wheel-stage{position:relative;width:248px;height:248px;margin:6px auto 14px}
.wheel{width:248px;height:248px;border-radius:50%;position:relative;border:7px solid #e0b341;box-shadow:0 0 0 4px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.5);transform:rotate(0deg)}
.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:28px;color:#e0b341;z-index:6;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}

/* ===== أوفرلاي شراء أسطوري ===== */
.legend-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(8,6,20,.78);backdrop-filter:blur(4px);animation:legendFade .3s ease}
.legend-ov.out{animation:legendFadeOut .3s ease forwards}
@keyframes legendFade{from{opacity:0}to{opacity:1}}
@keyframes legendFadeOut{to{opacity:0}}
.legend-card{position:relative;text-align:center;padding:34px 30px;border-radius:22px;max-width:90vw;background:linear-gradient(160deg,#241a3f,#15102b);border:2px solid #ffd700;overflow:hidden;box-shadow:0 0 55px rgba(255,200,40,.5);animation:legendPop .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes legendPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.legend-rays{position:absolute;inset:-60%;background:conic-gradient(from 0deg,rgba(255,215,0,.16) 0 12deg,transparent 12deg 30deg);animation:spinFrame 9s linear infinite}
.legend-burst{font-size:56px;position:relative;animation:legendBounce 1.1s ease infinite}
@keyframes legendBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.08)}}
.legend-title{position:relative;font-size:26px;font-weight:800;color:#ffd700;margin-top:6px;text-shadow:0 2px 10px rgba(255,200,40,.5)}
.legend-sub{position:relative;color:#cbb8ff;font-size:14px;margin-top:2px}
.legend-name{position:relative;font-size:20px;font-weight:700;color:#fff;margin:12px 0 4px}
.legend-owners{position:relative;font-size:14px;color:#9fe7ff;margin-bottom:16px}

/* ============ شاهد إعلان قبل إنشاء غرفة ============ */
.ad-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  background:rgba(44,39,34,.55);padding:18px;backdrop-filter:blur(3px)}
.ad-overlay[hidden]{display:none}
.ad-modal{width:100%;max-width:340px;background:var(--card);border:var(--bd);border-radius:22px;
  box-shadow:var(--sh-card);padding:18px;text-align:center}
.ad-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ad-modal-head h3{font-size:16px;font-weight:800;color:var(--ink)}
.ad-progress-chip{background:var(--teal);color:#fff;font-weight:900;font-size:12px;border-radius:20px;padding:4px 12px}
.ad-stage{position:relative;border:2.5px dashed var(--teal);border-radius:18px;background:var(--card2);
  padding:22px 16px;margin-bottom:14px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden}
.ad-stage::before{content:"AD";position:absolute;top:6px;left:8px;font-size:9px;font-weight:800;
  color:var(--muted);letter-spacing:1px}
.ad-badge{font-size:52px}
.ad-count{font-size:40px;font-weight:900;color:var(--teal-d);font-variant-numeric:tabular-nums}
.ad-hint{font-size:13px;color:var(--muted);font-weight:600}
.ad-bar{width:100%;height:10px;background:rgba(44,39,34,.12);border-radius:20px;overflow:hidden;margin-top:8px}
.ad-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--yellow));border-radius:20px;transition:width .4s linear}
.ad-note{font-size:12px;color:var(--muted);margin-top:10px}

/* ============ بانر إعلاني سفلي ============ */
.ad-banner{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--card);
  border-top:var(--bd);box-shadow:0 -6px 16px rgba(44,39,34,.15)}
.ad-banner-inner{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px;
  padding:8px 14px;position:relative}
.ad-banner-tag{background:var(--coral);color:#fff;font-size:9px;font-weight:800;border-radius:4px;padding:2px 6px;letter-spacing:.5px}
.ad-banner-text{flex:1;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-banner-close{border:none;background:rgba(44,39,34,.12);color:var(--ink);width:22px;height:22px;border-radius:50%;
  cursor:pointer;font-size:12px;line-height:1}
.ad-banner[hidden]{display:none}