/* ورقنا — components: games, rooms, store, board, modal, toasts */
.games-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:20px}
.gcard{
  position:relative; overflow:hidden; background:var(--glass); border:1px solid var(--border);
  border-radius:var(--r-md); padding:20px; backdrop-filter:blur(12px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gcard:hover{transform:translateY(-4px); border-color:rgba(240,196,96,.4); box-shadow:0 22px 40px -24px rgba(0,0,0,.9)}
.gcard-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.gicon{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:1.5rem; font-family:var(--head); font-weight:800; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.gcard h3{margin:0; font-size:1.15rem}
.gcard .gsub{color:var(--fg-3); font-size:.82rem}
.gcard p{font-size:.9rem; margin:0 0 14px; min-height:44px}
.gmeta{display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; color:var(--fg-3); margin-bottom:16px}
.gmeta span{display:flex; align-items:center; gap:6px}
.gmeta .ic{width:15px; height:15px; color:var(--accent-2)}
.gcard-foot{display:flex; align-items:center; justify-content:space-between; gap:10px}
.badge{position:absolute; top:14px; inset-inline-end:14px; font-size:.7rem; font-weight:800; padding:5px 10px; border-radius:999px; font-family:var(--head)}
.badge-live{background:rgba(34,197,94,.16); color:#8ef0b4; border:1px solid rgba(34,197,94,.4)}
.badge-soon{background:rgba(255,255,255,.07); color:var(--fg-3); border:1px solid var(--border-2)}

.filters{display:flex; gap:10px; flex-wrap:wrap}
.field-icon{display:flex; align-items:center; gap:9px; background:var(--glass); border:1px solid var(--border-2); border-radius:var(--r-sm); padding:0 12px; color:var(--fg-3)}
.field-icon input{background:none; border:0; color:var(--fg); padding:12px 0; outline:none; font-family:inherit; min-width:200px}
select{background:var(--card); border:1px solid var(--border-2); color:var(--fg); border-radius:var(--r-sm); padding:12px 14px; font-family:inherit; outline:none}
select:focus-visible,input:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

.room-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.room{
  display:flex; align-items:center; gap:16px; background:var(--glass); border:1px solid var(--border);
  border-radius:var(--r-md); padding:16px; transition:transform .22s, border-color .22s
}
.room:hover{transform:translateY(-3px); border-color:rgba(240,196,96,.35)}
.room-ico{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(140deg,#0f4c2c,#15803d); font-weight:800; font-family:var(--head)}
.room-body{flex:1; min-width:0}
.room-body b{font-family:var(--head); font-size:.98rem; display:block}
.room-body span{color:var(--fg-3); font-size:.78rem}
.seats{display:flex; gap:4px; margin-top:7px}
.seat-dot{width:16px; height:9px; border-radius:3px; background:rgba(255,255,255,.14)}
.seat-dot.on{background:var(--ok)}
.room-fee{text-align:center; font-size:.78rem; color:var(--fg-3); line-height:1.4}
.room-fee b{display:block; color:var(--gold); font-family:var(--head); font-size:1rem}
.room-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:26px; padding-top:20px; border-top:1px solid var(--border)}
.room-foot p{margin:0; font-size:.9rem}
.empty{grid-column:1/-1; text-align:center; padding:40px; color:var(--fg-3); border:1px dashed var(--border-2); border-radius:var(--r-md)}

.packages{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.pkg{
  position:relative; background:linear-gradient(170deg,rgba(21,128,61,.14),rgba(19,31,51,.7));
  border:1px solid var(--border); border-radius:var(--r-md); padding:22px; backdrop-filter:blur(12px);
  transition:transform .25s, box-shadow .25s, border-color .25s
}
.pkg:hover{transform:translateY(-4px); border-color:rgba(240,196,96,.45); box-shadow:0 24px 44px -26px rgba(0,0,0,.95)}
.pkg-hot{border-color:rgba(240,196,96,.55); background:linear-gradient(170deg,rgba(217,119,6,.2),rgba(19,31,51,.75))}
.pkg-tag{position:absolute; top:-12px; inset-inline-start:18px; background:linear-gradient(100deg,var(--accent),var(--gold)); color:#20160a; font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:999px; font-family:var(--head)}
.pkg-off{position:absolute; top:16px; inset-inline-end:16px; background:rgba(34,197,94,.18); color:#9df0bd; border:1px solid rgba(34,197,94,.45); font-size:.72rem; font-weight:800; padding:5px 10px; border-radius:999px}
.pkg-ico{font-size:1.9rem; margin-bottom:8px}
.pkg h3{font-size:1.5rem; margin:0}
.pkg .tokens{color:var(--fg-3); font-size:.85rem; margin-bottom:14px}
.price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.price-now{font-family:var(--head); font-size:1.9rem; font-weight:900; color:var(--gold)}
.price-cur{color:var(--fg-2); font-size:.85rem}
.price-was{color:var(--fg-3); text-decoration:line-through; font-size:.9rem}
.per{color:var(--fg-3); font-size:.76rem; margin-bottom:14px; display:block}
.bonus{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:#9df0bd; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); padding:6px 11px; border-radius:999px; margin-bottom:14px}
.store-note{display:flex; gap:12px; align-items:flex-start; margin-top:24px; padding:18px; border-radius:var(--r-md); background:rgba(19,31,51,.6); border:1px solid var(--border)}
.store-note .ic{color:var(--gold); margin-top:4px}
.store-note p{margin:0; font-size:.86rem}
.plans{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.plan{background:var(--glass); border:1px solid var(--border); border-radius:var(--r-md); padding:22px}
.plan ul{list-style:none; padding:0; margin:14px 0 18px; display:flex; flex-direction:column; gap:9px}
.plan li{display:flex; gap:9px; font-size:.88rem; color:var(--fg-2)}
.plan li .ic{color:var(--ok); width:16px; height:16px; margin-top:4px}
.pay-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:26px; color:var(--fg-3); font-size:.84rem}
.pay-chip{padding:6px 13px; border:1px solid var(--border-2); border-radius:8px; background:var(--glass); font-size:.78rem; font-weight:600; color:var(--fg-2)}

.board{background:var(--glass); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.board-head,.board-row{display:grid; grid-template-columns:56px 1.6fr 1fr .7fr .8fr; gap:10px; align-items:center; padding:14px 18px}
.board-head{background:rgba(11,18,32,.6); font-family:var(--head); font-weight:700; font-size:.84rem; color:var(--fg-3); border-bottom:1px solid var(--border)}
.board-row{border-bottom:1px solid var(--border); font-size:.92rem; transition:background .2s}
.board-row:hover{background:rgba(255,255,255,.04)}
.board-row:last-child{border-bottom:0}
.board-row .rk{font-family:var(--head); font-weight:900; font-size:1.05rem; color:var(--fg-3)}
.board-row.top1 .rk{color:var(--gold)} .board-row.top2 .rk{color:#cbd5e1} .board-row.top3 .rk{color:#c98b52}
.pcell{display:flex; align-items:center; gap:10px; font-weight:600}
.avatar{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(140deg,#22406b,#31527f); font-family:var(--head); font-weight:800; font-size:.85rem}
.pts{font-family:var(--head); font-weight:800; color:var(--gold)}

.modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:rgba(5,9,17,.78); backdrop-filter:blur(6px); animation:fadeUp .2s both}
.modal-card{position:relative; width:min(560px,94vw); max-height:88vh; overflow:auto; background:linear-gradient(170deg,#16233a,#101a2c); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow)}
.modal-card h3{margin-bottom:12px}
.modal-body{color:var(--fg-2); font-size:.94rem}
.modal-body ul{padding-inline-start:20px}
.modal-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.modal-x{position:absolute; top:14px; inset-inline-end:14px; background:var(--glass); border:1px solid var(--border-2); color:var(--fg-2); width:34px; height:34px; border-radius:50%; display:grid; place-items:center}
.modal-x:hover{color:#fff; background:rgba(255,255,255,.12)}
.summary{display:flex; flex-direction:column; gap:8px; margin:16px 0; padding:16px; border-radius:var(--r-sm); background:rgba(11,18,32,.6); border:1px solid var(--border)}
.summary div{display:flex; justify-content:space-between; font-size:.9rem}
.summary b{font-family:var(--head); color:var(--gold)}

.toasts{position:fixed; inset-block-end:22px; inset-inline-start:22px; z-index:95; display:flex; flex-direction:column; gap:10px}
.toast{display:flex; align-items:center; gap:11px; padding:13px 17px; border-radius:var(--r-sm); background:rgba(19,31,51,.96); border:1px solid var(--border-2); box-shadow:var(--shadow); font-size:.9rem; animation:fadeUp .25s both}
.toast .ic{color:var(--ok)}
.toast.warn .ic{color:var(--accent-2)}
.toast.err .ic{color:var(--danger)}
.skeleton{height:96px; border-radius:var(--r-md); background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 37%,rgba(255,255,255,.05) 63%); background-size:400% 100%; animation:shimmer 1.3s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (max-width:700px){.board-head,.board-row{grid-template-columns:40px 1.4fr .9fr; font-size:.84rem} .board-head span:nth-child(4),.board-row span:nth-child(4){display:none}}