/* ================================================================
   دَبرنا — شیت کامل
   جایگزین style.css · v16/17/18.css · daberna-skin.css · hub.css
   hub-skin.css · shop.css · support.css · vip.css · admin.css
   admin-skin.css · admin-observe.css
   چیدمان و رنگ، هر دو اینجاست. هیچ فایل استایل دیگری لازم نیست.
   ================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@400;500;700;900&display=swap");

/* ---------------- توکن‌ها ---------------- */
:root{
  --bg:#0A1E21; --surface:#102B2F; --surface-2:#16373C; --line:#1F474D;
  --text:#E9F2F0; --muted:#8CA8A7; --accent:#F5AC42; --accent-ink:#12240F;
  --accent-soft:#33260F; --live:#3FD09B; --win:#F2695E; --violet:#8B7BD8;
  --r:14px; --r-lg:20px; --maxw:1180px;
  --font:Vazirmatn,"Segoe UI",Tahoma,system-ui,sans-serif;
  --display:Lalezar,Vazirmatn,sans-serif;
  --shadow:0 18px 44px -22px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --bg:#F6F1E4; --surface:#FFFFFF; --surface-2:#FBF7EC; --line:#E4D9C0;
  --text:#14262A; --muted:#5F7377; --accent:#C97510; --accent-ink:#FFFFFF;
  --accent-soft:#FBE7C7; --live:#0F7C61; --win:#BE3B34; --violet:#6B5CB8;
  --shadow:0 18px 44px -22px rgba(20,38,42,.28);
}

/* ---------------- پایه ---------------- */
*{box-sizing:border-box}
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{
  margin:0; background:var(--bg); color:var(--text); direction:rtl;
  font-family:var(--font); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; padding-bottom:0;
}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:400; line-height:1.3; text-wrap:balance}
h1{font-size:clamp(24px,3.4vw,38px)} h2{font-size:clamp(19px,2.4vw,26px)}
h3{font-size:18px} h4{font-size:16px}
p{margin:0}
a{color:var(--accent); text-decoration:none}
code{font-family:ui-monospace,monospace; background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 7px; font-size:.9em; color:var(--accent); direction:ltr; display:inline-block}
small{font-size:12.5px; color:var(--muted)}
img{max-width:100%}
.hidden{display:none !important}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
::selection{background:var(--accent); color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.grain,.side-pattern,.confetti,.orbit,.sun{pointer-events:none}

/* ---------------- هدر ---------------- */
header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 18px; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:9px; color:var(--text); background:none;
  border:0; padding:0; cursor:pointer; font-size:inherit}
.brand > span:first-child, .logo, .mark, .side-brand > span:first-child{
  width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); border-radius:10px;
  font-family:var(--display); font-size:19px;
}
.brand b, .side-brand b{display:flex; flex-direction:column; font-family:var(--display);
  font-weight:400; font-size:17px; line-height:1.25}
.brand small, .side-brand small{font-family:var(--font); font-size:11.5px; color:var(--muted)}
.brand > span:last-child{display:flex; flex-direction:column; font-family:var(--display); font-size:17px}
header > a:not(.brand), .header-link{
  padding:7px 13px; border:1px solid var(--line); border-radius:9px;
  color:var(--muted); font-size:13.5px; font-weight:500;
}
header > a:not(.brand):hover, .header-link:hover{color:var(--accent); border-color:var(--accent)}
.header-actions{display:flex; align-items:center; gap:9px; margin-inline-start:auto; flex-wrap:wrap}
header > div:last-child{margin-inline-start:auto; display:flex; align-items:center; gap:10px}
.wallet{display:flex; align-items:center; gap:6px; padding:7px 13px;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:11px;
  color:var(--accent); font-weight:700; cursor:pointer}
.wallet .coin{font-size:9px}
.wallet b{font-variant-numeric:tabular-nums}
.wallet small{color:var(--accent); opacity:.75; font-size:11px}
.profile-btn{width:36px; height:36px; border-radius:10px; background:var(--accent);
  color:var(--accent-ink); border:0; font-family:var(--display); font-size:17px; cursor:pointer}
.admin-badge{padding:6px 12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; font-size:12.5px; color:var(--muted)}
.admin-badge b{color:var(--accent)}

/* فرزندان گرید نباید زیر اندازهٔ محتوا گیر کنند */
.arena > *, .game-main > *, .draw-stage > *, .panel > *, main > * ,
.grid > *, .ticket-grid > *, .rooms > *, .cards-grid > *{min-width:0}

/* ---------------- ساختار صفحه ---------------- */
main{max-width:var(--maxw); margin-inline:auto; padding:22px 18px 90px}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:18px}
.view{display:none} .view.active, .view.on{display:block}
section{margin-bottom:26px}

.eyebrow, .section-kicker,
.section-head > div > span, .section-title > div > span,
.shop-hero > div > span, .hero > div > span, .head > div > span,
.users-head > div > span, .page-head span{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  color:var(--accent); margin-bottom:5px;
}
.section-head, .section-title, .users-head, .head, .lobby-head, .card-head, .tracker-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:16px;
}
.section-head p, .section-title p, .lobby-head p, .hero p, .shop-hero p{color:var(--muted); font-size:14px}

/* ---------------- دکمه‌ها ---------------- */
button, input[type="submit"]{
  font-family:var(--font); font-size:14.5px; font-weight:700; cursor:pointer;
  padding:11px 20px; border:0; border-radius:11px;
  background:var(--accent); color:var(--accent-ink);
  transition:filter .16s, transform .16s;
}
button:hover, input[type="submit"]:hover{filter:brightness(1.09); transform:translateY(-1px)}
button:active{transform:none}
button:disabled{opacity:.5; cursor:not-allowed; transform:none; filter:none}
/* دکمه‌های ثانویه */
.section-head button, .section-title button, .users-head button, .head button,
.mini-btn, .back, .back-btn, .modal-x, .exit, .logout-btn, .sheet-x,
.room-tabs button, .user-tabs button, .auth-tabs button, .card-tabs button,
.chat-head button, .captcha-field label button{
  background:transparent; color:var(--muted); border:1.5px solid var(--line); font-weight:500;
}
.section-head button:hover, .section-title button:hover, .users-head button:hover,
.head button:hover, .mini-btn:hover{color:var(--accent); border-color:var(--accent); filter:none}
.back, .modal-x, .sheet-x, .exit, .logout-btn{padding:8px 14px}
.back:hover, .modal-x:hover, .sheet-x:hover, .exit:hover, .logout-btn:hover{
  color:var(--win); border-color:var(--win); filter:none}
.modal-x, .sheet-x{position:absolute; top:14px; inset-inline-end:14px;
  width:36px; height:36px; padding:0; display:grid; place-items:center; font-size:16px}

/* ---------------- فرم‌ها ---------------- */
label{display:block; font-size:13px; font-weight:700; margin-bottom:5px}
label small{display:block; font-weight:400; margin-top:4px}
input, select, textarea{
  width:100%; font-family:var(--font); font-size:14.5px;
  padding:11px 13px; background:var(--surface-2); color:var(--text);
  border:1.5px solid var(--line); border-radius:10px;
}
input:focus, select:focus, textarea:focus{outline:0; border-color:var(--accent)}
input::placeholder, textarea::placeholder{color:var(--muted)}
textarea{min-height:110px; resize:vertical}
input[type="checkbox"]{width:auto; accent-color:var(--accent)}
input[type="file"]{background:transparent; border-style:dashed; padding:9px}
form{display:grid; gap:12px}

/* ---------------- سطح‌ها ---------------- */
.room, .gcard, .package, .modal-card, .sheet-card, .auth-card, .pay-card,
.host-room-row, .reservation-room, .result, .ticket, .list > *, .stats article,
.hero-stat, .period-cards article, .admin-tickets article, .package-editor article,
.contacts a, .quick-settings, .admin-table-section, .users, .analytics, .room-manager,
.payment, .online-pay, .orders, .my-history, .active-reservation-rooms,
.number-tracker, .card-wrap, .players-panel, .caller, .grid > article,
.ticket-grid > *, .login form, .note-bar, .login-note{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px;
}
.hero, .shop-hero, .lobby-head, .page-head{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px;
}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface)}

/* ---------------- نشان‌ها ---------------- */
.pill, .chip, .op-badge, .vip-tag, .status{
  display:inline-block; padding:4px 11px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent);
  font-size:11.5px; font-weight:700; font-style:normal;
}
.pill.live{background:var(--live); color:#04211a}
.pill.live i, .pulse i, .legend i{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:currentColor; margin-inline-start:5px; vertical-align:1px;
  animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.status.approved, .status.answered{background:color-mix(in srgb,var(--live) 22%,transparent); color:var(--live)}
.status.rejected{background:color-mix(in srgb,var(--win) 22%,transparent); color:var(--win)}
.status.closed{background:var(--surface-2); color:var(--muted)}
.vip-tag{background:var(--violet); color:#fff; font-size:10px; padding:2px 8px; margin-inline-start:5px}

/* ---------------- جدول‌ها ---------------- */
table{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
th,td{padding:11px 12px; text-align:right; border-bottom:1px solid var(--line); vertical-align:middle}
th{background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:700;
  position:sticky; top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td small{display:block; color:var(--muted); font-size:11.5px}
td b{font-weight:700}
.uname b{display:flex; align-items:center; gap:4px}

/* ---------------- توست ---------------- */
.toast, #toast{
  position:fixed; inset-block-end:22px; left:50%;
  transform:translateX(-50%) translateY(140%);
  background:var(--text); color:var(--bg); padding:12px 22px; border-radius:11px;
  font-weight:700; font-size:14px; z-index:200; box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.34,1.3,.64,1); max-width:90vw;
}
.toast.show, #toast.show{transform:translateX(-50%) translateY(0)}

/* ---------------- نوار پایین ---------------- */
.hub-nav{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:45;
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.hub-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px; color:var(--muted); font-size:11px; font-weight:700}
.hub-nav a span{font-size:18px; line-height:1}
.hub-nav a.on{color:var(--accent)}
body:has(.hub-nav) main{padding-bottom:96px}

/* ---------------- پنجره‌ها ---------------- */
.modal, .sheet-bg{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:18px;
  background:rgba(4,14,16,.68); backdrop-filter:blur(5px);
}
.modal.hidden, .sheet-bg.hidden{display:none}
.modal-card, .sheet-card, .auth-card{
  position:relative; width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow);
}
.host-lobby-card, .profile-card{max-width:560px}
.notice, .note-bar{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 16px; color:var(--muted); font-size:13px; text-align:center;
}

/* ================================================================
   daberna.html — ورود
   ================================================================ */
section#login{display:none}
section#login.active{display:grid; grid-template-columns:.85fr minmax(0,1fr); gap:36px; align-items:center;
  padding-block:26px}
.hero-art{position:relative; aspect-ratio:1; width:100%; max-width:340px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:26px; overflow:hidden}
.hero-art .sun{position:absolute; inset-block-start:-30%; inset-inline-end:-25%;
  width:75%; aspect-ratio:1; border-radius:50%; background:var(--accent); opacity:.16; filter:blur(6px)}
.hero-art .tile{position:absolute; width:60px; height:60px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  font-family:var(--display); font-size:22px; color:var(--accent);
  font-variant-numeric:tabular-nums}
.hero-art .t1{inset-block-start:16%; inset-inline-end:14%; transform:rotate(-7deg)}
.hero-art .t2{inset-block-start:44%; inset-inline-start:12%; transform:rotate(6deg)}
.hero-art .t3{inset-block-end:16%; inset-inline-end:24%; transform:rotate(-3deg)}
.hero-art .arch{position:absolute; inset-block-end:0; left:50%;
  transform:translateX(-50%); width:112px; height:130px;
  background:var(--accent); border-start-start-radius:56px; border-start-end-radius:56px;
  display:grid; place-items:flex-end center; padding-bottom:16px}
.hero-art .arch span{font-family:var(--display); font-size:46px; color:var(--accent-ink)}
.intro h1{margin-bottom:12px}
.intro h1 em{font-style:normal; color:var(--accent)}
.intro > p{color:var(--muted); margin-bottom:20px; max-width:46ch}
.auth-tabs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px; padding:5px;
  background:var(--surface-2); border-radius:12px; margin-bottom:16px}
.auth-tabs button{padding:9px; border-radius:8px; border:0; background:transparent}
.auth-tabs button.active{background:var(--surface); color:var(--text); font-weight:700;
  box-shadow:0 2px 8px -4px rgba(0,0,0,.5)}
.auth-field{margin:0}
.captcha-field label{display:flex; align-items:center; justify-content:space-between; gap:10px}
.captcha-field label button{padding:5px 10px; font-size:12px; border-radius:8px}
.captcha-field > div{display:flex; gap:10px; align-items:center}
.captcha-field > div b{flex:0 0 auto; padding:11px 16px; background:var(--accent-soft);
  color:var(--accent); border-radius:10px; font-size:15px; font-weight:900;
  font-variant-numeric:tabular-nums}
.auth-submit{width:100%; margin-top:4px; display:flex; align-items:center;
  justify-content:center; gap:8px}
.trust{display:flex; gap:16px; flex-wrap:wrap; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line)}
.trust span{color:var(--muted); font-size:12.5px}

/* ================================================================
   daberna.html — لابی
   ================================================================ */
.lobby-head h2{margin-top:4px}
.lobby-username{display:block; color:var(--muted); font-size:12.5px; direction:ltr; text-align:right}
.rooms{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:16px;
  margin-bottom:26px}
.room{display:flex; flex-direction:column; gap:9px; transition:transform .18s, border-color .18s}
.room:hover{transform:translateY(-3px); border-color:var(--accent)}
.room.featured{border:2px solid var(--accent)}
.room-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.players{color:var(--muted); font-size:12px}
.room-icon{width:52px; height:52px; display:grid; place-items:center; border-radius:15px;
  background:var(--accent-soft); color:var(--accent); font-family:var(--display); font-size:23px;
  font-variant-numeric:tabular-nums}
.room h3{margin-top:2px}
.room p{color:var(--muted); font-size:13.5px; flex:1}
.card-picker{display:flex; align-items:center; gap:9px}
.card-picker label{margin:0; flex:0 0 auto; font-size:12.5px; color:var(--muted)}
.card-picker select{padding:8px 11px}
.rooms .room button, .rooms .room form button{width:100%; display:flex;
  align-items:center; justify-content:center; gap:7px}
.rooms .room form{gap:9px}
.reservation-room-grid, .host-room-list{display:grid; gap:11px}
.reservation-room{display:flex; align-items:center; gap:13px}
.reservation-avatar{width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
  border-radius:13px; background:var(--accent); color:var(--accent-ink);
  font-family:var(--display); font-size:19px}
.reservation-room > div:nth-child(2){flex:1}
.reservation-room span{color:var(--accent); font-size:11px; font-weight:700}
.reservation-room h4{margin:1px 0}
.reservation-room p{color:var(--muted); font-size:12.5px}
.reservation-room button{flex:0 0 auto}
.host-room-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px}
.host-room-row small{display:block}
.host-room-row.disabled{opacity:.55}
.history-table{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface)}
.finished-title{margin:18px 0 10px; font-size:15px; color:var(--muted)}

/* ================================================================
   daberna.html — میز بازی
   ================================================================ */
.game-view{padding-bottom:10px}
.gamebar{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 16px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.gamebar .back{flex:0 0 auto; font-size:18px; padding:6px 13px}
.game-room-heading{flex:1; min-width:150px}
.game-room-heading small{display:block; color:var(--muted); font-size:11.5px}
.game-room-heading h2{font-size:19px; margin:1px 0}
.game-room-heading b{font-size:12.5px; color:var(--accent); font-weight:700}
.game-metrics{display:flex; gap:16px; flex-wrap:wrap}
.game-metrics span{display:flex; flex-direction:column; align-items:center; min-width:52px}
.game-metrics b{font-size:19px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.2}
.game-metrics small{font-size:10.5px; color:var(--muted)}

.arena{display:grid; grid-template-columns:290px minmax(0,1fr); gap:16px; align-items:start}
.players-panel{position:sticky; top:82px; display:flex; flex-direction:column; gap:12px}
.players-panel h3{display:flex; align-items:center; justify-content:space-between; font-size:16px}
.players-panel h3 span{color:var(--accent); font-family:var(--font); font-size:13px; font-weight:700}
#playerList{display:grid; gap:8px}
.player{display:flex; align-items:center; gap:9px; padding:9px 11px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px}
.avatar{width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center;
  border-radius:9px; color:#fff; font-weight:900; font-size:13px}
.player-info{flex:1; display:flex; flex-direction:column; min-width:0}
.player-info b{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.player-info small{font-size:11px}
.progress{flex:0 0 46px; height:6px; background:var(--line); border-radius:20px; overflow:hidden}
.progress i{display:block; height:100%; background:var(--accent); border-radius:20px}
.empty-seats{padding:9px 11px; border:1px dashed var(--line); border-radius:11px;
  color:var(--muted); font-size:12.5px; text-align:center}
.host-controls{padding:13px; background:var(--surface-2);
  border:1px solid var(--accent); border-radius:12px}
.host-title{display:flex; align-items:center; justify-content:space-between; gap:9px;
  margin-bottom:9px}
.host-title b{color:var(--accent); font-size:13.5px}
.host-title button{padding:7px 12px; font-size:12px; white-space:nowrap}
#pendingRequests{display:grid; gap:7px}
.pending-user{display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:12.5px}
.pending-user > div{flex:1; min-width:0}
.pending-user button{padding:5px 10px; font-size:11.5px; border-radius:8px}
.pending-user .reject{background:transparent; color:var(--win); border:1.5px solid var(--win)}
.legend{color:var(--live); font-size:12px}
.host-empty-card{padding:14px; border:1px dashed var(--line); border-radius:12px;
  color:var(--muted); font-size:13px; text-align:center}
.chat{display:none}   /* از v39 روی سرور ۴۱۰ می‌گیرد */

.game-main{display:grid; gap:16px; min-width:0}
.pending-overlay{display:grid; place-items:center; gap:8px; text-align:center; padding:34px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.pending-overlay.hidden{display:none}
.pending-lock{font-size:38px}
.pending-overlay p{color:var(--muted); font-size:13.5px; max-width:40ch}
.draw-stage{display:grid; gap:16px}

/* توپ اعلام عدد */
.caller{display:grid; gap:13px; justify-items:center; text-align:center}
.caller-title{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%}
.caller-title > span{color:var(--muted); font-size:12.5px}
.pulse{padding:4px 11px; border-radius:20px; background:var(--accent-soft);
  color:var(--live); font-size:11.5px; font-weight:700}
.ball-wrap{position:relative; display:grid; place-items:center; padding:6px}
.orbit{position:absolute; width:104px; height:104px; border:2px dashed var(--line);
  border-radius:50%; animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ball{width:78px; height:78px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  font-size:31px; font-weight:900; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 7px var(--accent-soft); position:relative}
.ball.pop{animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.6);opacity:.4}100%{transform:scale(1);opacity:1}}
.history{display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center}
.history > span{color:var(--muted); font-size:11.5px}
.history b, .history i{display:grid; place-items:center; width:31px; height:31px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  font-size:12.5px; font-style:normal; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums}
.caller-mobile-stats{display:none; gap:22px}
.timer{width:100%; height:6px; background:var(--line); border-radius:20px; overflow:hidden}
.timer i{display:block; height:100%; background:var(--accent); border-radius:20px;
  transition:width .9s linear}

/* صفحهٔ ۹۰ عدد */
.tracker-head{align-items:flex-start}
.tracker-head small{display:block; color:var(--muted); font-size:11.5px}
.tracker-legend{display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11px}
.tracker-legend i{width:11px; height:11px; border-radius:4px; background:var(--accent);
  display:inline-block; margin-inline-start:3px}
.tracker-legend i:last-of-type{background:var(--win)}
.number-board{display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:5px}
.number-chip, .number-board > *{
  aspect-ratio:1; display:grid; place-items:center; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  transition:background .3s, color .3s;
}
.number-chip.on, .number-chip.active, .number-chip.called, .number-chip.hit,
.number-board > .on, .number-board > .active, .number-board > .called{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.number-chip.current, .number-chip.now, .number-board > .current{
  background:var(--win); color:#fff; border-color:var(--win)}

/* کارت‌های بازیکن */
.card-head{align-items:flex-start}
.card-head small{display:block; color:var(--muted); font-size:11.5px}
.remaining{color:var(--muted); font-size:12.5px}
.remaining b{color:var(--accent); font-variant-numeric:tabular-nums}
.card-tabs{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.card-tabs button{padding:7px 14px; font-size:12.5px; border-radius:9px}
.card-tabs button.active, .card-tabs button.selected, .card-tabs button.on{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px}
.cards-grid .ticket{background:var(--surface-2); border:1px solid var(--line);
  border-radius:15px; padding:13px; transition:border-color .2s}
.cards-grid .ticket.selected, .cards-grid .ticket.active,
.cards-grid .ticket.on{border-color:var(--accent)}
.cards-grid .ticket-no{display:block; color:var(--muted); font-size:11.5px; font-weight:700; margin-bottom:9px}
.bingo-card{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:4px}
.bingo-card .cell, .cell{
  aspect-ratio:1; display:grid; place-items:center; border-radius:7px;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  font-size:clamp(10px,1.5vw,14px); font-weight:700; font-variant-numeric:tabular-nums;
  transition:background .25s, transform .25s;
}
.cell.empty, .cell.blank{background:transparent; border-color:transparent}
.cell.on, .cell.hit, .cell.marked, .cell.mk, .cell.active, .cell.called{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  transform:scale(1.05)}
.auto-claim{display:grid; gap:3px; margin-top:14px; padding:12px 15px;
  background:var(--accent-soft); border-radius:12px; color:var(--accent); font-size:13px}
.auto-claim small{color:var(--accent); opacity:.8}

/* مودال‌های بازی */
.cup{font-size:46px; text-align:center}
.modal-card h2{text-align:center; margin:6px 0}
.modal-card > .eyebrow{display:block; text-align:center}
#resultText{text-align:center; color:var(--muted); font-size:14px}
.reward{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:16px;
  padding:13px; background:var(--accent-soft); border-radius:13px; color:var(--accent)}
.reward b{font-size:21px; font-family:var(--display)}
.reward .coin{font-style:normal}
.modal-card > button:last-child{width:100%; margin-top:16px}
.confetti{position:absolute; inset:0; pointer-events:none}
.big-avatar{width:74px; height:74px; margin:0 auto 12px; display:grid; place-items:center;
  border-radius:22px; background:var(--accent); color:var(--accent-ink);
  font-family:var(--display); font-size:34px}
.profile-card h2{text-align:center}
.profile-card .username{display:block; text-align:center; color:var(--muted);
  font-size:12.5px; direction:ltr; margin-bottom:16px}
.profile-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:18px}
.profile-stats > div{padding:11px 6px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; text-align:center}
.profile-stats b{display:block; color:var(--accent); font-size:18px; font-weight:900;
  font-variant-numeric:tabular-nums}
.profile-stats small{font-size:10.5px}
.history-title{font-size:15px; margin-bottom:9px}
.coin-history{display:grid; gap:6px; max-height:190px; overflow-y:auto; margin-bottom:16px}
.coin-history > div{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; background:var(--surface-2); border-radius:10px; font-size:13px}
.coin-history b{font-variant-numeric:tabular-nums}
.coin-history .plus{color:var(--live)} .coin-history .minus{color:var(--win)}
.profile-links{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; margin-bottom:10px}
.profile-links a, .vip-dashboard-link{display:block; padding:11px; text-align:center;
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px;
  font-size:13.5px; font-weight:700}
.vip-dashboard-link{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  margin-bottom:10px}
.logout-btn{width:100%}
.reserve-card form{margin-top:14px}
.reserve-card p{color:var(--muted); font-size:13.5px}

/* ================================================================
   shop.html
   ================================================================ */
.shop-hero{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap}
.shop-hero > div:first-child{flex:1; min-width:230px}
.balance{flex:0 0 auto; display:grid; justify-items:center; gap:1px; padding:16px 26px;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:16px}
.balance small{color:var(--accent); opacity:.75; font-size:11.5px}
.balance b{color:var(--accent); font-family:var(--display); font-size:32px;
  font-variant-numeric:tabular-nums; line-height:1.1}
.balance span{color:var(--accent); opacity:.75; font-size:11.5px}
.packages{display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:15px}
.package{display:flex; flex-direction:column; gap:7px; text-align:center;
  transition:transform .18s, border-color .18s}
.package:hover{transform:translateY(-3px); border-color:var(--accent)}
.package h3{font-size:16px}
.package .coins{color:var(--accent); font-family:var(--display); font-size:35px; line-height:1.15;
  font-variant-numeric:tabular-nums}
.package .coins small{color:var(--muted); font-family:var(--font); font-size:12px}
.package p{color:var(--muted); font-size:12.5px; flex:1}
.package strong{font-size:17px; font-weight:900; font-variant-numeric:tabular-nums}
.package button{width:100%; margin-top:4px}
.payment{display:grid; gap:18px}
.payment-info h2{margin:3px 0 12px}
.pay-card{display:grid; gap:2px; background:var(--surface-2); text-align:center}
.pay-card b{color:var(--accent); font-size:20px; direction:ltr; font-variant-numeric:tabular-nums}
#paymentGuide{color:var(--muted); font-size:13.5px; margin-top:11px; white-space:pre-line}
.online-pay{border:2px solid var(--accent); text-align:center; display:grid; gap:9px}
.op-head{display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap}
.op-head b{font-size:16px}
.online-pay p{color:var(--muted); font-size:13.5px}
.online-pay button{width:100%}
.op-or{display:flex; align-items:center; gap:11px; color:var(--muted); font-size:12px}
.op-or i{flex:1; height:1px; background:var(--line)}
.pay-result{padding:14px 17px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; margin-bottom:18px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap}
.pay-result button{padding:6px 13px; font-size:12.5px}

/* ================================================================
   vip.html
   ================================================================ */
.hero{display:block}
.hero:has(.hero-stats){display:flex; align-items:flex-start;
  justify-content:space-between; gap:24px; flex-wrap:wrap}
.hero > div:first-child{flex:1; min-width:260px}
.hero h1{margin:4px 0 8px}
.vip-create{margin-top:16px}
.vipf{gap:13px}
.vipf-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:13px}
.vipf-note{padding:10px 14px; background:var(--accent-soft); color:var(--accent);
  border-radius:10px; font-size:12.5px}
.hero-stats{display:grid; gap:11px; flex:0 0 auto}
.hero-stat{display:grid; justify-items:center; gap:1px; padding:16px 24px; text-align:center}
.hero-stat b{color:var(--accent); font-family:var(--display); font-size:28px;
  font-variant-numeric:tabular-nums; line-height:1.15}
.grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
.list{display:grid; gap:11px}
.list > p{color:var(--muted); font-size:13.5px; background:none; border:0; padding:0}
.list .room, .list .result{display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-direction:row}
.list .room > div:first-child, .list .result > div:first-child{flex:1; min-width:0}
.list .room h3, .list .result h3{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:16px; margin-bottom:5px}
.list .room p, .list .result p{color:var(--muted); font-size:12.5px; line-height:1.9}
.list .room strong, .list .result strong{flex:0 0 auto; display:grid; justify-items:center;
  gap:2px; color:var(--accent); font-size:14px; font-variant-numeric:tabular-nums; text-align:center}
.list .result strong small{color:var(--muted); font-weight:400}
.actions{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.actions button{padding:7px 13px; font-size:12.5px; border-radius:9px}
.actions .watch{background:var(--live); color:#04211a}
.actions .close{background:transparent; color:var(--win); border:1.5px solid var(--win)}
.result time{display:block; color:var(--muted); font-size:11.5px; margin-top:6px}

/* ================================================================
   support.html
   ================================================================ */
.hero > span{display:inline-block; color:var(--accent); font-size:11.5px; font-weight:700;
  letter-spacing:.12em}
.contacts{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.contacts a, .contacts > span{padding:10px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:11px; font-size:13.5px; font-weight:700}
.contacts a:hover{border-color:var(--accent)}
.ticket-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
.ticket-grid form{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px}
.ticket-grid form > span{color:var(--accent); font-size:11.5px; font-weight:700; letter-spacing:.12em}
.ticket-grid form h2{margin:3px 0 6px}
.tickets{display:grid; gap:11px}
.tickets > p{color:var(--muted); font-size:13.5px}
.tickets .ticket{display:grid; gap:5px}
.tickets .ticket .status{justify-self:flex-start}
.tickets .ticket h3{font-size:16px}
.tickets .ticket p{color:var(--muted); font-size:13.5px}
.tickets .ticket .reply, .ticket-reply{padding:11px 14px; margin-top:7px;
  background:var(--accent-soft); border-radius:11px; color:var(--text); font-size:13px}

/* ================================================================
   admin.html
   ================================================================ */
.login{display:grid; place-items:center; min-height:100dvh; padding:20px}
.login.hidden{display:none}
.login form{width:100%; max-width:370px; text-align:center; padding:30px}
.login .mark{margin:0 auto 12px}
.login h1{font-size:24px}
.login p{color:var(--muted); font-size:13px; margin-bottom:16px}
.login label{text-align:right}
.login button{width:100%; margin-top:6px}
.login small{display:block; color:var(--win); font-size:12.5px; margin-top:9px}
.panel{display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100dvh}
.panel.hidden{display:none}
.panel aside{display:flex; flex-direction:column; gap:16px; padding:18px 14px;
  background:var(--surface); border-inline-start:1px solid var(--line)}
.side-brand{display:flex; align-items:center; gap:9px}
.panel aside nav{display:grid; gap:5px; flex:1}
.panel aside nav button, .panel aside nav a{padding:10px 13px; border-radius:10px;
  background:transparent; color:var(--muted); border:0; text-align:right; font-weight:500;
  font-size:13.5px}
.panel aside nav button.active{background:var(--accent-soft); color:var(--accent); font-weight:700}
.panel main{padding:20px; max-width:none}
.panel > main > header{position:static; background:none; border:0; padding:0 0 18px;
  display:flex; align-items:flex-end; justify-content:space-between}
.panel header small{display:block; color:var(--accent); font-size:11.5px; font-weight:700}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px}
.stats article{display:grid; gap:1px; text-align:center}
.stats article span{color:var(--muted); font-size:12px}
.stats article b{color:var(--accent); font-family:var(--display); font-size:29px;
  font-variant-numeric:tabular-nums; line-height:1.15}
.quick-settings, .room-manager{display:grid; gap:16px}
.settings-fields, .simple-room-form, .room-create form{display:flex; gap:13px;
  align-items:flex-end; flex-wrap:wrap}
.settings-fields label, .simple-room-form label{flex:1; min-width:180px; margin:0}
.room-tabs, .user-tabs{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
.room-tabs button, .user-tabs button{padding:7px 14px; font-size:12.5px; border-radius:9px}
.room-tabs button.active, .user-tabs button.active{background:var(--accent);
  color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.users-head input{max-width:270px}
.action{padding:5px 11px; font-size:11.5px; border-radius:8px; margin-inline-start:4px}
.coinbtn{background:var(--accent); color:var(--accent-ink)}
.startbtn{background:var(--live); color:#04211a}
.vipbtn{background:var(--violet); color:#fff}
.blockbtn, .deletebtn{background:transparent; color:var(--win); border:1.5px solid var(--win)}
.package-editor{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:13px; margin-bottom:16px}
.package-editor article{display:grid; gap:8px}
.package-editor label{display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px}
.contact-form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:13px}
.contact-form .wide{grid-column:1/-1}
.contact-form button{grid-column:1/-1; justify-self:flex-start}
.admin-tickets{display:grid; gap:11px}
.admin-tickets article{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.admin-tickets article > div{flex:1}
.admin-tickets p{color:var(--muted); font-size:13.5px; margin-top:5px}
.period-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:16px}
.period-cards article{display:grid; gap:2px; text-align:center}
.period-cards b{color:var(--accent); font-size:19px; font-variant-numeric:tabular-nums}
.chart{display:flex; align-items:flex-end; gap:4px; height:150px; padding:13px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r)}
.chart i{flex:1; min-height:3px; background:var(--accent); border-radius:4px 4px 0 0}

/* ================================================================
   admin-observe.html
   ================================================================ */
body:has(.board-wrap) main{display:grid; grid-template-columns:220px minmax(0,1fr) 260px; gap:16px;
  align-items:start}
.current{display:grid; justify-items:center; gap:7px; text-align:center; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.current small{color:var(--muted); font-size:11.5px}
.current b{width:76px; height:76px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); font-size:30px; font-weight:900;
  font-variant-numeric:tabular-nums}
.current > div{display:flex; gap:14px; color:var(--muted); font-size:12px}
.current strong{color:var(--text); font-variant-numeric:tabular-nums}
.board-wrap{display:grid; gap:13px}
.board{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px}
.board > *{aspect-ratio:1; display:grid; place-items:center; border-radius:7px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.board > .on, .board > .active, .board > .called, .board > .drawn{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
#players{display:grid; gap:8px}
#error{color:var(--win); font-size:13px; text-align:center; padding:9px}
#status{color:var(--muted); font-size:13px}

/* ================================================================
   auth.js — پنجرهٔ ورودی که خودش می‌سازد
   ================================================================ */
.sheet-head{margin-bottom:16px}
.auth-switch{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px; padding:5px;
  background:var(--surface-2); border-radius:12px; margin-bottom:16px}
.auth-switch button{padding:9px; border-radius:8px; background:transparent;
  color:var(--muted); border:0}
.auth-switch button.on{background:var(--surface); color:var(--text); font-weight:700}
.auth-form{display:grid; gap:12px}
.af{display:grid; gap:5px}
.af.hidden{display:none}
.cap-row{display:flex; gap:10px; align-items:center}
.auth-err{padding:10px 13px; border-radius:10px; font-size:13px;
  background:color-mix(in srgb,var(--win) 16%,transparent); color:var(--win)}
.auth-err.hidden{display:none}
.auth-go{width:100%; display:flex; align-items:center; justify-content:center; gap:7px}
.auth-foot{text-align:center; color:var(--muted); font-size:12px; margin-top:14px}
.relink{color:var(--accent); font-weight:700}
.sp{flex:1}

/* ================================================================
   privacy.html
   ================================================================ */
.wrap section{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px}
.wrap header{position:static; display:block; text-align:center; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 16px; margin-bottom:18px}
.wrap h1{color:var(--accent)} .wrap h2{color:var(--accent); font-size:17px; margin-bottom:8px}
.wrap ul{padding-inline-start:0; padding-inline-end:20px; margin-top:6px}
.wrap li{margin-bottom:5px}
.wrap .note{background:var(--accent-soft); border-inline-start:4px solid var(--accent);
  border-radius:10px; padding:13px 16px; margin-top:10px; color:var(--text)}
.wrap .sub{color:var(--muted); font-size:13px}
.wrap footer{text-align:center; padding:22px 10px; color:var(--muted); font-size:12.5px}
.wrap .back{display:inline-block; padding:10px 22px; background:var(--accent);
  color:var(--accent-ink); border:0; border-radius:12px; font-weight:700; margin-top:14px}

/* ================================================================
   چاپ
   ================================================================ */
@media print{
  header, aside, .hub-nav, .toast, #toast, button{display:none !important}
  body{background:#fff; color:#000}
  .printing .print-target{display:block}
}

/* ================================================================
   واکنش‌گرا
   ================================================================ */
@media (max-width:1000px){
  .arena{grid-template-columns:1fr}
  .players-panel{position:static; order:2}
  .game-main{order:1}
  .panel{grid-template-columns:1fr}
  .panel aside{flex-direction:row; align-items:center; flex-wrap:wrap;
    border-inline-start:0; border-bottom:1px solid var(--line)}
  .panel aside nav{display:flex; flex:1; justify-content:flex-end}
  .grid, .ticket-grid, .contact-form{grid-template-columns:1fr}
  body:has(.board-wrap) main{grid-template-columns:1fr}
  .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .period-cards{grid-template-columns:1fr}
}
@media (max-width:760px){
  main{padding:16px 14px 96px}
  header{padding:10px 14px; gap:9px}
  .brand small{display:none}
  section#login.active{grid-template-columns:1fr; gap:22px}
  .hero-art{max-width:250px}
  .hero, .shop-hero, .lobby-head, .page-head{padding:18px}
  .rooms{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  .number-board{grid-template-columns:repeat(10,minmax(0,1fr))}
  .board{grid-template-columns:repeat(9,minmax(0,1fr))}
  .vipf-row{grid-template-columns:1fr}
  .profile-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .game-metrics{display:none}
  .caller-mobile-stats{display:flex; justify-content:center}
  .caller-mobile-stats span{display:flex; flex-direction:column; align-items:center}
  .caller-mobile-stats b{font-size:17px; font-weight:900; font-variant-numeric:tabular-nums}
  .balance{width:100%}
  .list .room, .list .result{flex-direction:column; gap:11px}
  .list .room strong, .list .result strong{justify-items:flex-start; text-align:right}
  .modal-card, .sheet-card, .auth-card{padding:22px}
}
@media (max-width:430px){
  .number-board{grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px}
  .board{grid-template-columns:repeat(7,minmax(0,1fr))}
  .stats{grid-template-columns:1fr}
  .packages{grid-template-columns:1fr}
  .bingo-card{gap:3px}
  .ball{width:66px; height:66px; font-size:26px}
}