/* =========================================================================
   هکم پیک — hokmpick.com
   هویت: سفیدِ روشن · بنفشِ تصمیم · کارت‌های گرد و بزرگ · بدون خط‌کشی شلوغ
   موبایل‌اول، RTL. فونت: ایران‌سنس‌ایکس (میزبانی محلی)
   ========================================================================= */

@font-face { font-family: "IRANSansX"; src: url("/assets/fonts/iransansx-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("/assets/fonts/iransansx-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("/assets/fonts/iransansx-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("/assets/fonts/iransansx-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-2: #f6f5ff;
  --bg-3: #efeefb;
  --ink: #17162a;
  --ink-2: #474468;
  --dim: #6f6b92;
  --line: #e6e4f5;
  --v: #5b47e5;
  --v-d: #4433c4;
  --v-l: #eeebff;
  --lime: #4a9c2d;
  --lime-l: #eef7e8;
  --rose: #d63b5c;
  --amber: #b26a05;
  --amber-l: #fff5e6;

  --r: 14px;
  --r-l: 22px;
  --r-xl: 30px;
  --sh: 0 2px 4px rgba(23, 22, 42, .04), 0 8px 24px rgba(91, 71, 229, .07);
  --sh-2: 0 6px 14px rgba(23, 22, 42, .07), 0 22px 50px rgba(91, 71, 229, .12);
  --hold: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 78px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: "IRANSansX", "Tahoma", system-ui, sans-serif;
  font-size: 16px; line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .6rem; line-height: 1.45; font-weight: 900; letter-spacing: -.015em; }
h1 { font-size: clamp(1.7rem, 5.2vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 3.5vw, 1.85rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-inline-start: 1.35rem; }
li { margin-bottom: .4rem; }
a { color: var(--v-d); text-underline-offset: 3px; }
a:hover { color: var(--v); }
img { max-width: 100%; height: auto; }
b, strong { font-weight: 700; }
.dim { color: var(--dim); }
.none { color: var(--dim); font-size: .87em; }
small { font-size: .85rem; }

:focus-visible { outline: 3px solid var(--v); outline-offset: 2px; border-radius: 6px; }

/* پیوند پرش: عمودی مخفی می‌شود تا در RTL صفحه را سرریز نکند. */
.jump { position: absolute; inset-inline-start: 0; top: -60px; z-index: 99; background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0; }
.jump:focus { top: 0; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hold { width: min(100% - 2rem, var(--hold)); margin-inline: auto; }
.band { margin-block: 3rem; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.mt { margin-top: 1rem; }
.mb0 { margin-bottom: 0; }

/* ------------------------------------------------------------- سرآیند */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px) saturate(1.4); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: .8rem; min-height: 62px; }
.mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.mark img { width: 38px; height: 38px; }
.mark span { display: grid; line-height: 1.25; }
.mark b { font-size: 1.05rem; font-weight: 900; }
.mark i { font-style: normal; font-size: .72rem; color: var(--dim); }
.top-nav { display: none; margin-inline-start: auto; gap: .1rem; }
.top-nav a { color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500; padding: .45rem .7rem; border-radius: 99px; }
.top-nav a:hover { background: var(--v-l); color: var(--v-d); }
.top-nav a[aria-current="page"] { background: var(--v-l); color: var(--v-d); font-weight: 700; }
/* سلکتور دوکلاسی لازم است تا از قاعدهٔ عمومی .b قوی‌تر بماند. */
.top .top-go { display: none; }
.top-btn { margin-inline-start: auto; min-height: 42px; padding: .4rem 1rem; border: 1px solid var(--line); background: #fff; border-radius: 99px; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--ink); }
.sheet { border-top: 1px solid var(--line); background: #fff; }
.sheet ul { list-style: none; margin: 0; padding: .4rem 0 1.2rem; display: grid; gap: .2rem; }
.sheet a { display: block; padding: .8rem 1rem; text-decoration: none; color: var(--ink); font-weight: 700; background: var(--bg-2); border-radius: var(--r); }
.sheet a[aria-current="page"] { background: var(--v); color: #fff; }
@media (min-width: 940px) {
  .top-nav { display: flex; }
  .top .top-go { display: inline-flex; }
  .top-btn { display: none; }
  .sheet { display: none !important; }
}

/* ---------------------------------------------------------- خرده‌نان */
.crumbs { background: var(--bg-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: .55rem 0; font-size: .82rem; }
.crumbs li + li::before { content: "/"; color: var(--dim); margin-inline-end: .35rem; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--v-d); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ دکمه‌ها */
.b {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .6rem 1.4rem; border-radius: 99px;
  font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s;
}
.b:hover { transform: translateY(-2px); }
.b-main { background: var(--v); color: #fff; box-shadow: 0 4px 14px rgba(91, 71, 229, .32); }
.b-main:hover { background: var(--v-d); color: #fff; box-shadow: 0 8px 22px rgba(91, 71, 229, .38); }
.b-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.b-ghost:hover { border-color: var(--v); color: var(--v-d); }
.b-lime { background: var(--lime); color: #fff; }
.b-sm { min-height: 42px; padding: .4rem 1rem; font-size: .9rem; }
.b-xs { min-height: 36px; padding: .25rem .8rem; font-size: .85rem; }
.b-lg { min-height: 56px; padding: .8rem 1.9rem; font-size: 1.06rem; }
.b-block { width: 100%; }

/* --------------------------------------------------------- تیتر بخش */
.h-sec { font-size: clamp(1.3rem, 3.5vw, 1.9rem); margin-bottom: 1.2rem; }
.h-sec small { display: block; font-size: .82rem; font-weight: 500; color: var(--dim); letter-spacing: 0; margin-top: .2rem; }
.lead { font-size: 1.08rem; color: var(--ink-2); }

.upd { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--dim); background: var(--bg-2); border-radius: 99px; padding: .3rem .9rem; }
.upd .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* --------------------------------------------------------- پنل‌ها */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem; box-shadow: var(--sh); }
.panel + .panel { margin-top: 1rem; }
.soft { background: var(--bg-2); border: 0; }
.cols { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.callout { border-radius: var(--r-l); padding: 1rem 1.2rem; background: var(--v-l); border: 1px solid rgba(91, 71, 229, .2); margin: 1.1rem 0; }
.callout b { display: block; color: var(--v-d); margin-bottom: .2rem; }
.callout p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.callout.warn { background: var(--amber-l); border-color: rgba(178, 106, 5, .22); }
.callout.warn b { color: var(--amber); }
.callout.ok { background: var(--lime-l); border-color: rgba(74, 156, 45, .22); }
.callout.ok b { color: var(--lime); }

/* --------------------------------------------------------- نشان برند */
.lg { display: inline-grid; place-items: center; flex: 0 0 auto; width: 72px; height: 44px; padding: 5px 7px; background: #191833; border-radius: 12px; }
.lg img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lg-b { width: 116px; height: 70px; padding: 8px 11px; border-radius: 16px; }

/* ------------------------------------------------------ امتیاز و نوار */
.bub { display: inline-grid; place-items: center; line-height: 1.1; background: linear-gradient(135deg, var(--v), var(--v-d)); color: #fff; border-radius: 16px; padding: .45rem .7rem; min-width: 62px; }
.bub b { font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.bub i { font-style: normal; font-size: .6rem; opacity: .85; }
.bub.s { padding: .25rem .5rem; min-width: 50px; border-radius: 11px; }
.bub.s b { font-size: 1rem; }
.bub.l { padding: .7rem 1.1rem; min-width: 90px; border-radius: 20px; }
.bub.l b { font-size: 2rem; }

.lvl { display: inline-flex; align-items: center; gap: .45rem; min-width: 100px; }
.lvl-t { flex: 1; height: 8px; background: var(--bg-3); border-radius: 99px; overflow: hidden; min-width: 48px; }
.lvl-t > span { display: block; height: 100%; background: linear-gradient(90deg, var(--v), #8b7bff); border-radius: 99px; }
.lvl b { font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.rate { color: #f2a51a; letter-spacing: -1px; white-space: nowrap; }
.rate .o { color: #dcd9ee; }

/* --------------------------------------------------------- کارت تصمیم */
.pc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.2rem; box-shadow: var(--sh); display: grid; gap: .9rem; position: relative; }
.pc-card.is-top { border-color: var(--v); box-shadow: var(--sh-2); }
.pc-flag { position: absolute; top: -13px; inset-inline-start: 1.4rem; background: var(--v); color: #fff; font-size: .74rem; font-weight: 700; border-radius: 99px; padding: .18rem .9rem; }
.pc-head { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; }
.pc-name h3 { margin: 0; font-size: 1.15rem; }
.pc-name h3 a { text-decoration: none; color: var(--ink); }
.pc-name h3 a:hover { color: var(--v-d); }
.pc-name p { margin: 0; font-size: .84rem; color: var(--dim); }
.pc-bars { display: grid; gap: .4rem; background: var(--bg-2); border-radius: var(--r); padding: .7rem .9rem; }
.pc-bars > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; align-items: center; font-size: .85rem; }
.pc-bars span { color: var(--dim); }
.pc-say { margin: 0; font-size: .94rem; color: var(--ink-2); }
.pc-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pc-rank { font-size: .78rem; color: var(--dim); margin-inline-start: auto; }
@media (max-width: 480px) {
  .pc-head { grid-template-columns: auto 1fr; }
  .pc-head > .bub { grid-column: 2; justify-self: end; }
  .pc-bars > div { grid-template-columns: 5.4rem 1fr; }
}

/* ------------------------------------------------------------ انتخابگر */
.picker { background: linear-gradient(160deg, #f7f5ff, #ffffff); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.3rem; box-shadow: var(--sh-2); display: grid; gap: 1.1rem; }
.picker-h { margin: 0; font-size: clamp(1.15rem, 3.4vw, 1.5rem); }
.picker-s { margin: .3rem 0 0; font-size: .93rem; color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.chip {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; min-height: 44px;
  padding: .4rem 1.05rem; border-radius: 99px; border: 2px solid var(--line);
  background: #fff; color: var(--ink); transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--v); }
.chip[aria-pressed="true"] { background: var(--v); border-color: var(--v); color: #fff; font-weight: 700; }
.chip[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.picker-act { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .9rem; }
.picker-count { font-size: .84rem; color: var(--dim); }
.picker-rest { display: grid; gap: .8rem; }
@media (min-width: 900px) { .picker-rest { grid-template-columns: repeat(3, 1fr); } }
.picker-why { font-size: .86rem; color: var(--dim); background: #fff; border: 1px dashed var(--line); border-radius: var(--r); padding: .7rem 1rem; margin: 0; }
.picker-c { padding: 1rem; }

/* ------------------------------------------------------------ مقایسه */
.vs { display: grid; gap: 1.1rem; }
.vs-pick { display: grid; gap: .7rem; align-items: end; background: var(--bg-2); border-radius: var(--r-l); padding: 1rem; }
@media (min-width: 700px) { .vs-pick { grid-template-columns: 1fr auto 1fr; } }
.vs-pick label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; }
.vs-pick select { font: inherit; font-size: .95rem; min-height: 48px; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); }
.vs-x { text-align: center; font-weight: 900; color: var(--v); padding-bottom: .7rem; }
.vs-out { display: grid; gap: .8rem; }
.vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem .8rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 1rem; }
.vs-grid .k { text-align: center; font-size: .78rem; color: var(--dim); font-weight: 700; }
.vs-grid .v-a, .vs-grid .v-b { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.vs-grid .v-b { justify-content: flex-end; }
.vs-grid .win { color: var(--lime); font-weight: 900; }
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; }
.vs-head .side { display: grid; gap: .4rem; justify-items: center; text-align: center; }
.vs-head .side b { font-size: 1.05rem; }

/* ------------------------------------------------------------- جدول */
.gw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gtbl { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: #fff; font-size: .92rem; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.gtbl caption { caption-side: bottom; text-align: start; padding: .7rem .2rem 0; font-size: .8rem; color: var(--dim); }
.gtbl th, .gtbl td { padding: .65rem .8rem; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--line); }
.gtbl thead th { background: var(--bg-2); font-size: .78rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.gtbl tbody tr:last-child td { border-bottom: 0; }
.gtbl tbody tr:hover { background: #fbfaff; }
.gtbl .n { width: 46px; }
.gtbl .bw { min-width: 200px; }
.gtbl .bf { max-width: 260px; font-size: .85rem; color: var(--ink-2); }
.pos { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--bg-3); color: var(--v-d); font-weight: 900; font-size: .84rem; font-variant-numeric: tabular-nums; }
tr:nth-child(1) .pos { background: var(--v); color: #fff; }
.bl { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.bl b { font-size: .94rem; }
.sortb { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; display: inline-flex; gap: .25rem; align-items: center; }
.sortb:hover { color: var(--v-d); }

@media (max-width: 760px) {
  .gtbl { min-width: 0; display: block; border: 0; }
  .gtbl thead { display: none; }
  .gtbl tbody, .gtbl tr, .gtbl td { display: block; }
  .gtbl tr { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); margin-bottom: .8rem; padding: .9rem 1rem; box-shadow: var(--sh); }
  .gtbl td { border: 0; padding: .3rem 0; display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
  .gtbl td::before { content: attr(data-l); font-size: .82rem; color: var(--dim); font-weight: 500; }
  .gtbl td.bw, .gtbl td.n { display: inline-flex; }
  .gtbl td.n { padding-inline-end: .7rem; }
  .gtbl td.bw::before, .gtbl td.n::before { content: none; }
  .gtbl td.bf { display: block; }
  /* در حالت display:block، caption باید بلوکِ تمام‌عرض شود. */
  .gtbl caption { display: block; width: 100%; caption-side: top; padding: 0 0 .7rem; text-align: start; }
}

/* --------------------------------------------------------- کارت پرسش */
.qcards { display: grid; gap: .9rem; }
@media (min-width: 760px) { .qcards { grid-template-columns: repeat(2, 1fr); } }
.qcard { background: var(--bg-2); border-radius: var(--r-l); padding: 1.1rem 1.2rem; }
.qcard h3 { font-size: 1rem; margin-bottom: .4rem; color: var(--v-d); }
.qcard div { font-size: .93rem; color: var(--ink-2); }
.qcard p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ قدم‌ها */
.steps { list-style: none; counter-reset: st; padding: 0; margin: 0; display: grid; gap: .7rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { margin: 0; }
.steps a { position: relative; display: grid; gap: .1rem; padding: 1rem 1.2rem 1rem 1.2rem; padding-inline-start: 3.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); text-decoration: none; transition: border-color .15s, transform .12s; }
.steps a:hover { border-color: var(--v); transform: translateY(-2px); }
.steps a::before { counter-increment: st; content: counter(st); position: absolute; inset-inline-start: 1.1rem; top: 1.05rem; width: 30px; height: 30px; border-radius: 50%; background: var(--v-l); color: var(--v-d); display: grid; place-items: center; font-weight: 900; font-size: .85rem; }
.steps b { color: var(--ink); font-size: 1rem; }
.steps span { color: var(--dim); font-size: .86rem; }

/* ------------------------------------------------------------- فرم‌ها */
.ff { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .ff { grid-template-columns: 1fr 1fr; } .ff.one { grid-template-columns: 1fr; } }
.ff label, .ff > div { display: grid; gap: .35rem; }
.ff span, .lbl { font-weight: 700; font-size: .88rem; }
.ff input, .ff select, .ff textarea { font: inherit; font-size: .96rem; padding: .65rem .9rem; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); width: 100%; }
.ff textarea { min-height: 130px; resize: vertical; line-height: 1.75; }
.stars-in { display: flex; gap: .1rem; }
.stars-in .s { background: none; border: 0; cursor: pointer; font-size: 1.8rem; line-height: 1; color: #dcd9ee; padding: .1rem .15rem; min-height: 44px; }
.stars-in .s.on { color: #f2a51a; }
.fmsg { margin-top: .9rem; padding: .8rem 1rem; border-radius: var(--r); font-size: .9rem; background: var(--amber-l); }
.fmsg.ok { background: var(--lime-l); color: #2f6b1c; }

/* -------------------------------------------------------------- نظرها */
.rvs { display: grid; gap: .8rem; }
@media (min-width: 900px) { .rvs.two { grid-template-columns: repeat(2, 1fr); } }
.rv { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 1rem 1.1rem; }
.rv-h { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: .35rem; }
.rv-h b { font-size: .94rem; }
.rv-h time { color: var(--dim); margin-inline-start: auto; }
.rv p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.tag-hold { background: var(--amber-l); color: var(--amber); border-radius: 99px; padding: .05rem .6rem; font-size: .73rem; font-weight: 700; }
.tag-seed { background: var(--bg-3); color: var(--dim); border-radius: 99px; padding: .05rem .6rem; font-size: .72rem; }

/* --------------------------------------------------------- کارت کوچک */
.mini-card { display: inline-grid; place-items: center; width: 38px; height: 52px; border-radius: 9px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(23,22,42,.08); color: var(--ink); margin: 2px; line-height: 1.05; }
.mini-card b { font-size: .85rem; font-weight: 900; }
.mini-card i { font-style: normal; font-size: .85rem; }
.mini-card.r { color: var(--rose); }
.cardline { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; margin: .7rem 0; }

/* -------------------------------------------------------------- قهرمان */
.hero { background: linear-gradient(180deg, #f4f1ff 0%, #ffffff 78%); padding: 2.2rem 0 1.4rem; }
.hero h1 { margin-bottom: .8rem; }
.hero .lead { max-width: 640px; }
.tagline { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: var(--v-d); background: #fff; border: 1px solid rgba(91,71,229,.25); border-radius: 99px; padding: .3rem 1rem; margin-bottom: .9rem; box-shadow: var(--sh); }
.hero-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.hstat { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .4rem 1rem; font-size: .85rem; color: var(--ink-2); }
.hstat b { color: var(--v-d); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- محتوای متنی */
.readable { max-width: 760px; margin-inline: auto; }
.readable h2 { margin-top: 2.2rem; scroll-margin-top: 80px; }
.readable h2:first-child { margin-top: 0; }
.readable h3 { margin-top: 1.5rem; }
.readable table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; }
.readable th, .readable td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: start; }
.readable th { background: var(--bg-2); font-weight: 700; }
.readable blockquote { margin: 1.2rem 0; padding: .8rem 1.2rem; background: var(--v-l); border-radius: var(--r-l); color: var(--ink-2); }
.tocbar { display: flex; flex-wrap: wrap; gap: .4rem; background: var(--bg-2); border-radius: 99px; padding: .5rem .8rem; margin-bottom: 1.6rem; }
.tocbar a { font-size: .84rem; text-decoration: none; color: var(--ink-2); background: #fff; border-radius: 99px; padding: .25rem .8rem; }
.tocbar a:hover { background: var(--v); color: #fff; }

/* ------------------------------------------------------------- مزایا */
.pn { display: grid; gap: 1rem; }
@media (min-width: 700px) { .pn { grid-template-columns: 1fr 1fr; } }
.pn ul { list-style: none; padding: 0; margin: 0; }
.pn li { position: relative; padding-inline-start: 1.6rem; margin-bottom: .55rem; font-size: .93rem; }
.pn li::before { position: absolute; inset-inline-start: 0; font-weight: 900; }
.pn .up li::before { content: "+"; color: var(--lime); }
.pn .down li::before { content: "−"; color: var(--rose); }
.pn .up h3 { color: var(--lime); }
.pn .down h3 { color: var(--rose); }

.crit-list { display: grid; gap: .6rem; }
.crit-item { display: grid; grid-template-columns: 10rem 1fr; gap: .7rem; align-items: center; font-size: .92rem; }
.crit-item .wt { font-size: .76rem; color: var(--dim); }
@media (max-width: 520px) { .crit-item { grid-template-columns: 7.5rem 1fr; font-size: .85rem; } }

.strip { background: linear-gradient(135deg, var(--v), #7a67ff); color: #fff; border-radius: var(--r-xl); padding: 1.6rem; display: grid; gap: 1rem; margin-block: 2.4rem; }
.strip h2 { color: #fff; margin: 0; }
.strip p { color: #e7e2ff; margin: 0; }
.strip .b-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.45); }
.strip .b-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }
@media (min-width: 780px) { .strip { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------------------------------------------------------- بونوس‌ها */
.bonus-cards { display: grid; gap: .9rem; }
@media (min-width: 760px) { .bonus-cards { grid-template-columns: repeat(2, 1fr); } }
.bonus { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.1rem; display: grid; gap: .7rem; }
.bonus-h { display: flex; align-items: center; gap: .7rem; }
.bonus-h b { font-size: 1.02rem; }
.bonus dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: 0; font-size: .88rem; }
.bonus dt { color: var(--dim); }
.bonus dd { margin: 0; }

/* =========================================================================
   میز حکم — پوستهٔ هکم پیک (روشن، مینیمال، بدون پنل جانبی)
   ========================================================================= */
.game { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-2); overflow: hidden; margin-block: 1.2rem; }
.game-wait { padding: 2.6rem 1.2rem; text-align: center; }
.game-wait p { margin: 0 0 .3rem; }

.gm-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.gm-bar .sp { margin-inline-start: auto; }
.gm-ico { min-width: 42px; min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; font-size: 1rem; color: var(--ink-2); }
.gm-ico:hover { border-color: var(--v); color: var(--v-d); }
.gm-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; background: var(--bg-2); border-radius: 99px; padding: .3rem .85rem; color: var(--ink-2); }
.gm-pill b { color: var(--v-d); }

/* نوار امتیاز افقی — به‌جای سه کارت مجزا */
.gm-score { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); }
.gm-side { flex: 1; padding: .7rem 1rem; display: grid; gap: .1rem; }
.gm-side.b { text-align: end; }
.gm-side .l { font-size: .74rem; color: var(--dim); }
.gm-side .v { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.gm-side.a .v { color: var(--v-d); }
.gm-side.b .v { color: var(--rose); }
.gm-side .t { font-size: .74rem; color: var(--ink-2); }
.gm-mid { display: grid; place-items: center; padding: .5rem .9rem; background: var(--bg-2); font-size: .76rem; color: var(--dim); text-align: center; min-width: 92px; }
.gm-mid b { display: block; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.felt {
  position: relative; padding: 1rem .8rem;
  background: radial-gradient(120% 95% at 50% 40%, #7a67ff 0%, #5b47e5 55%, #4433c4 100%);
  display: grid; gap: .5rem;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-areas: ". n ." "w c e" ". s .";
  min-height: 320px;
}
.p-n { grid-area: n; } .p-e { grid-area: e; } .p-w { grid-area: w; } .p-s { grid-area: s; }
.p-c { grid-area: c; display: grid; place-items: center; position: relative; min-height: 150px; }
@media (max-width: 620px) {
  .felt { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "w n e" "c c c" "s s s"; min-height: 0; }
}

.who { display: grid; justify-items: center; gap: .25rem; align-content: center; }
.who-tag { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: .22rem .7rem; font-size: .78rem; font-weight: 700; }
.who-tag.mine { background: rgba(255,255,255,.9); color: var(--v-d); }
.who-tag.turn { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.who .crown { color: #ffd76a; }
.who-sub { font-size: .7rem; color: rgba(255,255,255,.85); min-height: 1em; }
.backs { display: flex; }
.backs i { display: block; width: 20px; height: 28px; border-radius: 5px; margin-inline-start: -11px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); }
.backs i:first-child { margin-inline-start: 0; }

.trick { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". tn ." "tw . te" ". ts ."; gap: .15rem; place-items: center; }
.trick > div { min-width: 42px; min-height: 58px; display: grid; place-items: center; }
.t-n { grid-area: tn; } .t-e { grid-area: te; } .t-s { grid-area: ts; } .t-w { grid-area: tw; }
.trump-tag { position: absolute; top: -4px; inset-inline-end: -4px; background: #fff; color: var(--v-d); border-radius: 99px; padding: .15rem .7rem; font-size: .75rem; font-weight: 900; box-shadow: var(--sh); }
.trick-empty { color: rgba(255,255,255,.85); font-size: .86rem; text-align: center; padding: 1rem .5rem; }

.hand-area { padding: 1rem; }
.gm-msg { text-align: center; font-weight: 700; min-height: 1.6em; margin: 0 0 .7rem; }
.gm-msg.bad { color: var(--rose); font-weight: 500; font-size: .9rem; }
.hand { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: .25rem; }
.hand.wide { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .5rem; }
.pk { position: relative; flex: 0 0 auto; width: 52px; height: 74px; border-radius: 11px; background: #fff; border: 1px solid var(--line); box-shadow: 0 3px 8px rgba(23,22,42,.14); display: grid; place-items: center; padding: 0; font: inherit; font-weight: 900; line-height: 1.05; color: var(--ink); cursor: default; transition: transform .12s, box-shadow .12s; }
.pk.r { color: var(--rose); }
.pk .rk { font-size: 1.05rem; font-variant-numeric: lining-nums; }
.pk .st { font-size: 1.15rem; }
.pk.can { cursor: pointer; border-color: var(--v); box-shadow: 0 0 0 2px rgba(91,71,229,.35), 0 4px 10px rgba(23,22,42,.16); }
.pk.can:hover { transform: translateY(-10px); }
.pk.no { opacity: .38; cursor: not-allowed; }
.pk.tr::after { content: ""; position: absolute; inset: 0; border-radius: 11px; box-shadow: inset 0 0 0 2px #f2a51a; pointer-events: none; }
.pk.sm { width: 42px; height: 60px; }
.pk.sm .rk { font-size: .88rem; } .pk.sm .st { font-size: .95rem; }
@media (max-width: 420px) { .pk { width: 46px; height: 66px; } }

.suits { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1rem; }
@media (min-width: 520px) { .suits { grid-template-columns: repeat(4, 1fr); } }
.suit-b { display: grid; place-items: center; gap: .15rem; padding: .85rem .4rem; cursor: pointer; background: #fff; border: 2px solid var(--line); border-radius: var(--r-l); font: inherit; font-weight: 700; min-height: 44px; color: var(--ink); }
.suit-b:hover { border-color: var(--v); background: var(--v-l); }
.suit-b .sy { font-size: 1.8rem; line-height: 1; }
.suit-b.r .sy { color: var(--rose); }
.suit-b .ct { font-size: .74rem; color: var(--dim); font-weight: 500; }

.gm-start { padding: 1.3rem; display: grid; gap: 1rem; }
.gm-modes { display: grid; gap: .7rem; }
@media (min-width: 620px) { .gm-modes { grid-template-columns: 1fr 1fr; } }
.gm-mode { text-align: start; display: grid; gap: .2rem; padding: 1.1rem 1.2rem; cursor: pointer; background: var(--bg-2); border: 2px solid transparent; border-radius: var(--r-l); font: inherit; color: var(--ink); }
.gm-mode:hover { border-color: var(--v); background: var(--v-l); }
.gm-mode b { font-size: 1.02rem; }
.gm-mode span { font-size: .86rem; color: var(--dim); }
.gm-opts { display: grid; gap: .7rem; }
@media (min-width: 620px) { .gm-opts { grid-template-columns: repeat(3, 1fr); } }
.gm-opt { display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; }
.gm-opt select { font: inherit; font-weight: 400; font-size: .93rem; min-height: 46px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); }

.gm-over { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(23,22,42,.5); }
.gm-over-in { background: #fff; border-radius: var(--r-xl); padding: 1.6rem; max-width: 420px; width: 100%; box-shadow: var(--sh-2); text-align: center; }
.gm-over-in .em { font-size: 2.4rem; line-height: 1; margin-bottom: .3rem; }

/* -------------------------------------------------------------- پاورقی */
.foot { margin-top: 3.4rem; background: var(--bg-2); border-top: 1px solid var(--line); }
.foot-top { display: grid; gap: 1.6rem; padding: 2.4rem 0 1.4rem; }
@media (min-width: 760px) { .foot-top { grid-template-columns: 1.7fr repeat(2, 1fr); } }
@media (min-width: 1020px) { .foot-top { grid-template-columns: 1.8fr repeat(4, 1fr); } }
.foot-top > div:first-child p { font-size: .88rem; color: var(--dim); margin-top: .8rem; }
.foot-col h2 { font-size: .88rem; margin-bottom: .6rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: .4rem; font-size: .88rem; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--v-d); text-decoration: underline; }
.foot-note { display: flex; gap: .9rem; align-items: flex-start; border-top: 1px solid var(--line); padding: 1.1rem 0; }
.foot-note p { margin: 0; font-size: .83rem; color: var(--dim); }
.age18 { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--rose); color: var(--rose); font-weight: 900; font-size: .78rem; }
.foot-end { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; border-top: 1px solid var(--line); padding: 1rem 0; font-size: .8rem; color: var(--dim); }