/* مين الأسرع ؟ — the look from /images/design/web/asra.png, shared by the lobby
   (both trees), player.php and play.php. display.php scales in vw and keeps its own. */
:root{
  --navy-0:#01163f;      /* page floor */
  --navy-1:#03215a;      /* screen */
  --navy-2:#082a6e;      /* panel fill */
  --navy-3:#0f3a8a;      /* raised row */
  --line:rgba(96,156,255,.32);
  --line-hi:rgba(120,180,255,.6);
  --sky:#42a1fe;
  --gold-1:#fee134; --gold-2:#ffab0f;
  --ink:#08204f;         /* text on gold / white */
  --red-1:#fc5b74; --red-2:#e8143f;
  --green-1:#3ddc7d; --green-2:#17a352;
  --violet-1:#5b3fd6; --violet-2:#3a1fa8;
  --muted:rgba(214,228,255,.62);
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;}
html,body{width:100%;overflow-x:hidden;}
body{
  min-height:100vh;min-height:100svh;font-family:'Cairo',sans-serif;color:#fff;
  background:
    radial-gradient(110% 50% at 50% -6%,rgba(66,161,254,.42) 0%,transparent 60%),
    radial-gradient(60% 40% at 100% 100%,rgba(66,161,254,.14) 0%,transparent 70%),
    linear-gradient(180deg,#0a3a92 0%,var(--navy-1) 38%,var(--navy-0) 100%);
  background-attachment:fixed;
}
button,input{font-family:inherit;}

/* ── panels ── */
.panel{position:relative;border-radius:20px;padding:14px;border:1.5px solid var(--line);
  background:linear-gradient(180deg,rgba(18,64,150,.55),rgba(6,32,94,.72));
  box-shadow:0 12px 28px rgba(0,8,40,.45),inset 0 1px 0 rgba(255,255,255,.08);}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;font-weight:900;margin-bottom:10px;}
.panel-h small{font-size:13px;font-weight:800;color:var(--muted);}
.screen-title{text-align:center;font-size:22px;font-weight:900;}
.screen-sub{text-align:center;font-size:13px;font-weight:700;color:var(--muted);}

/* ── buttons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:8px 16px;border:none;border-radius:16px;
  font-size:19px;font-weight:900;cursor:pointer;text-decoration:none;color:#fff;transition:transform .12s,filter .15s;}
.btn svg{width:22px;height:22px;flex:none;}
.btn:active{transform:translateY(2px);}
.btn:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed;transform:none;}
.btn-gold{background:linear-gradient(180deg,var(--gold-1) 0%,#ffc81f 55%,var(--gold-2) 100%);color:var(--ink);
  box-shadow:0 6px 0 #b86d00,0 12px 24px rgba(255,171,15,.35),inset 0 2px 0 rgba(255,255,255,.55);}
.btn-gold:active{box-shadow:0 3px 0 #b86d00,inset 0 2px 0 rgba(255,255,255,.55);}
.btn-red{background:linear-gradient(180deg,var(--red-1),var(--red-2));box-shadow:0 6px 0 #9c0b2b,0 12px 24px rgba(232,20,63,.35),inset 0 2px 0 rgba(255,255,255,.35);}
.btn-green{background:linear-gradient(180deg,var(--green-1),var(--green-2));box-shadow:0 5px 0 #0c6b35,inset 0 2px 0 rgba(255,255,255,.35);}
.btn-violet{background:linear-gradient(180deg,var(--violet-1),var(--violet-2));box-shadow:0 5px 0 #26107a,inset 0 2px 0 rgba(255,255,255,.3);}
.btn-sky{background:linear-gradient(180deg,#4fb0ff,#1f78e6);box-shadow:0 5px 0 #0e4fa8,inset 0 2px 0 rgba(255,255,255,.35);}
.btn-navy{background:linear-gradient(180deg,#123f8f,#0a2a6a);border:1.5px solid var(--line-hi);box-shadow:0 5px 0 #031a48;}
.btn .sub{display:block;font-size:12px;font-weight:800;opacity:.75;line-height:1.1;}
.btn .stack{display:flex;flex-direction:column;align-items:center;line-height:1.25;}

.icon-btn{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;
  border:1.5px solid var(--line-hi);background:linear-gradient(180deg,#13449a,#0a2a6a);color:#fff;text-decoration:none;}
.icon-btn svg{width:20px;height:20px;}

/* ── rows / avatars / rank badges ── */
.av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.85);background:#0a2a6a;}
.list{display:flex;flex-direction:column;gap:6px;}
.lrow{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,70,160,.45),rgba(8,40,110,.55));border:1.5px solid var(--line);}
.lrow .nm{flex:1;min-width:0;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lrow .sc{font-size:18px;font-weight:900;direction:ltr;min-width:48px;text-align:left;}
.lrow.me{border:2px solid var(--gold-1);background:linear-gradient(180deg,rgba(254,225,52,.24),rgba(255,171,15,.12));
  box-shadow:0 0 0 3px rgba(254,225,52,.14),0 8px 18px rgba(255,171,15,.18);}
.lrow.me .sc{color:var(--gold-1);}
.rank{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900;background:#0c2d78;border:1.5px solid var(--line-hi);}
.rank.r1{background:linear-gradient(180deg,#fff08a,#f4b400);color:var(--ink);border-color:#fff3a8;}
.rank.r2{background:linear-gradient(180deg,#f2f6fb,#a9b8cc);color:#1d2c44;border-color:#fff;}
.rank.r3{background:linear-gradient(180deg,#f7a866,#c1652a);color:#fff;border-color:#ffc79a;}
.crown{font-size:18px;line-height:1;flex:none;}
.kebab{width:30px;height:30px;border:none;background:none;color:rgba(255,255,255,.8);cursor:pointer;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;}
.kebab svg{width:20px;height:20px;}
.kebab:hover{background:rgba(255,255,255,.08);}
.up{color:#4ade80}.down{color:#fb7185}

/* ── pill chips ── */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;font-size:14px;font-weight:800;white-space:nowrap;
  background:linear-gradient(180deg,#1561d4,#0b3a9a);border:1.5px solid var(--line-hi);}
.chip img{width:22px;height:22px;border-radius:50%;object-fit:cover;}
.chip.gold{color:var(--gold-1);}

/* ── spinner ── */
.spin{width:16px;height:16px;border-radius:50%;border:2.5px dotted rgba(255,255,255,.7);animation:spin 1.6s linear infinite;flex:none;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}

/* ── modals ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,10,40,.72);z-index:999;align-items:center;justify-content:center;padding:16px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.modal-overlay.active{display:flex;}
.modal-box{position:relative;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;border-radius:22px;padding:18px 16px;text-align:center;
  border:1.5px solid var(--line-hi);background:linear-gradient(180deg,#0b3585 0%,#05205c 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);animation:pop .22s ease-out;}
.modal-title{font-size:21px;font-weight:900;margin:2px 36px 14px;}
.modal-x{position:absolute;top:12px;left:12px;width:34px;height:34px;border:none;background:none;color:#fff;cursor:pointer;font-size:26px;line-height:1;}
.modal-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.modal-btns .btn{min-height:48px;font-size:16px;}
.field{width:100%;padding:13px;border-radius:14px;border:1.5px solid var(--line-hi);background:rgba(1,22,63,.6);color:#fff;
  font-size:19px;font-weight:800;text-align:center;outline:none;}
.field::placeholder{color:rgba(255,255,255,.35);}
.field:focus{border-color:var(--gold-1);box-shadow:0 0 0 3px rgba(254,225,52,.18);}
.av-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
@media (max-width:420px){.av-pick{grid-template-columns:repeat(4,1fr);}}
.av-pick button{padding:0;border-radius:50%;overflow:hidden;line-height:0;aspect-ratio:1;cursor:pointer;background:#0a2a6a;
  border:3px solid rgba(255,255,255,.14);transition:transform .15s;}
.av-pick img{width:100%;height:100%;object-fit:cover;}
.av-pick .sel{border-color:var(--gold-1);transform:scale(1.08);box-shadow:0 0 0 3px rgba(254,225,52,.25);}
.err{color:#fda4af;font-weight:800;font-size:14px;}

.toast{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:1000;
  background:#04163f;border:1.5px solid var(--line-hi);padding:8px 18px;border-radius:999px;font-weight:800;font-size:14px;}

/* ═════════ lobby ═════════ */
.lobby{width:100%;margin:0 auto;display:grid;gap:14px;align-items:start;}
.col{display:flex;flex-direction:column;gap:14px;min-width:0;}
.hero{position:relative;border-radius:22px;overflow:hidden;line-height:0;border:1.5px solid var(--line);
  background:linear-gradient(180deg,#1a58c4,#0d3a94);box-shadow:0 14px 30px rgba(0,8,40,.45);}
.hero img{width:100%;height:auto;display:block;}
.hero .icon-btn{position:absolute;top:10px;z-index:2;background:rgba(6,30,90,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.hero .tl{left:10px;} .hero .tl2{left:58px;} .hero .tr{right:10px;}

.code-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;color:var(--ink);
  background:linear-gradient(180deg,#e3f1ff 0%,#a9d0fb 100%);border:2px solid #fff;
  box-shadow:0 14px 30px rgba(0,8,40,.45),inset 0 -3px 0 rgba(8,32,79,.12);}
.code-card .info{flex:1;min-width:0;text-align:center;}
.code-card .lbl{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:900;}
.code-card .lbl svg{width:16px;height:16px;}
.code-pill{display:block;width:100%;margin-top:6px;padding:4px 10px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#0b2a66,#03184a);color:#cfe6ff;direction:ltr;font-size:clamp(26px,7vw,34px);font-weight:900;letter-spacing:2px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4);}
.code-card .hint{margin-top:6px;font-size:12px;font-weight:800;color:#2b4f8f;}
.qr-plate{flex:none;background:#fff;border-radius:14px;padding:6px;line-height:0;text-align:center;cursor:pointer;border:none;
  box-shadow:0 6px 14px rgba(8,32,79,.25);}
.qr-plate img{width:112px;height:112px;display:block;image-rendering:pixelated;}
.qr-plate span{display:block;line-height:1.4;margin-top:2px;font-size:11px;font-weight:800;color:var(--ink);}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pair .btn{min-height:64px;font-size:16px;border-radius:16px;flex-direction:column;gap:2px;}
.pair .btn svg{width:24px;height:24px;}

.status-pill{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:13px;font-weight:800;color:var(--muted);}
.status-pill.bad{color:#fda4af;}
.status-pill.bad .spin{display:none;}

.set-list{display:flex;flex-direction:column;gap:8px;}
.set-row{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 8px 6px 10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,70,160,.45),rgba(8,40,110,.6));border:1.5px solid var(--line);}
.set-row .ico{width:24px;height:24px;flex:none;color:#dbe9ff;}
.set-row .ico svg{width:100%;height:100%;display:block;}
.set-row .lbl{flex:1;font-size:15px;font-weight:800;}
button.set-row{width:100%;color:#fff;cursor:pointer;text-align:right;}
.stepper{display:flex;align-items:center;gap:0;direction:ltr;border-radius:10px;overflow:hidden;background:rgba(1,22,63,.65);border:1.5px solid var(--line);}
.stepper button{width:34px;height:36px;border:none;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.stepper button svg{width:16px;height:16px;}
.stepper button:disabled{opacity:.3;cursor:default;}
.stepper .val{min-width:74px;height:36px;display:flex;align-items:center;justify-content:center;direction:rtl;font-size:15px;font-weight:900;
  background:linear-gradient(180deg,#1d5fd0,#0f45a8);}
.select-val{display:flex;align-items:center;gap:8px;padding:0 12px;height:36px;border-radius:10px;background:rgba(1,22,63,.65);border:1.5px solid var(--line);
  font-size:14px;font-weight:800;white-space:nowrap;}
.select-val svg{width:16px;height:16px;}
.switch{position:relative;width:54px;height:30px;border-radius:999px;border:none;cursor:pointer;flex:none;
  background:rgba(1,22,63,.8);box-shadow:inset 0 0 0 1.5px var(--line-hi);transition:background .2s;}
.switch::after{content:'';position:absolute;top:3px;right:27px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:right .2s;}
.switch[aria-checked="true"]{background:linear-gradient(180deg,var(--green-1),var(--green-2));box-shadow:none;}
.switch[aria-checked="true"]::after{right:3px;}

.cat-search{position:relative;margin-bottom:12px;}
.cat-search input{width:100%;height:40px;padding:0 38px 0 12px;border-radius:12px;border:1.5px solid var(--line);background:rgba(1,22,63,.6);
  color:#fff;font-size:14px;font-weight:700;outline:none;}
.cat-search svg{position:absolute;right:12px;top:11px;width:18px;height:18px;color:var(--muted);}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.cat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;padding:8px 4px;
  border-radius:14px;cursor:pointer;color:#fff;font-size:13px;font-weight:800;line-height:1.25;
  background:linear-gradient(180deg,rgba(20,70,160,.5),rgba(8,40,110,.65));border:1.5px solid var(--line);transition:.15s;}
.cat .ic{font-size:26px;line-height:1.1;}
.cat .tick{position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:var(--sky);color:#fff;font-size:11px;font-weight:900;border:1.5px solid #fff;}
.cat .tick::after{content:'✓';}
.cat.sel{background:linear-gradient(180deg,#3d9bff,#1a64d8);border-color:#bfe0ff;box-shadow:0 0 0 3px rgba(66,161,254,.25);}
.cat.sel .tick{display:flex;}
.cat-tools{display:flex;justify-content:space-between;align-items:center;margin:-4px 2px 10px;font-size:13px;font-weight:800;color:var(--muted);}
.cat-tools button{border:none;background:none;color:var(--sky);font-size:13px;font-weight:900;cursor:pointer;}

.share-qr{background:#fff;border-radius:18px;padding:14px;color:var(--ink);margin-bottom:14px;}
.share-qr img{width:min(62vw,240px);height:min(62vw,240px);display:block;margin:0 auto;image-rendering:pixelated;}
.share-qr b{display:block;direction:ltr;font-size:30px;font-weight:900;letter-spacing:2px;line-height:1.2;margin-top:6px;}
.share-qr span{font-size:13px;font-weight:800;color:#2b4f8f;}
.share-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.share-acts>*{display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;color:#fff;cursor:pointer;
  font-size:12px;font-weight:800;text-decoration:none;}
.share-acts i{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#13449a,#0a2a6a);border:1.5px solid var(--line-hi);}
.share-acts i svg{width:24px;height:24px;}
.share-acts .wa i{background:linear-gradient(180deg,#3ddc7d,#17a352);border-color:#8ff0b5;}

.steps{display:flex;flex-direction:column;gap:10px;text-align:right;margin-bottom:14px;}
.step{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1.5px solid var(--line);
  background:linear-gradient(180deg,rgba(20,70,160,.5),rgba(8,40,110,.65));}
.step .art{font-size:34px;flex:none;width:44px;text-align:center;}
.step h4{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;}
.step h4 i{width:22px;height:22px;border-radius:50%;background:var(--sky);font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center;}
.step p{font-size:13px;font-weight:700;color:var(--muted);line-height:1.6;margin-top:2px;}
.step p b{color:#fff;}