/* =========================================================================
   هکم رنک — hokmrank.com
   هویت: کاغذ کِرِم · تیتر نسخ · خط‌کشی مویی · شنگرف و طلایی کهنه
   موبایل‌اول، RTL. فونت متن: استعداد · فونت تیتر: نسخ عربی
   ========================================================================= */

@font-face { font-family: "Estedad"; src: url("/assets/fonts/estedad-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Estedad"; src: url("/assets/fonts/estedad-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Estedad"; src: url("/assets/fonts/estedad-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Estedad"; src: url("/assets/fonts/estedad-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Estedad"; src: url("/assets/fonts/estedad-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "NaskhH"; src: url("/assets/fonts/naskh-arabic-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "NaskhH"; src: url("/assets/fonts/naskh-arabic-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF; }

:root {
  --paper: #faf8f3;
  --paper-2: #f2eee4;
  --paper-3: #e9e3d5;
  --white: #fffdf9;
  --ink: #1d1a16;
  --ink-2: #443d33;
  --na: #7d7365;
  --hair: #ddd5c4;
  --hair-2: #c8bda6;
  --red: #8c2f2a;
  --red-d: #6d221e;
  --red-l: #f6ece9;
  --gold: #a8801f;
  --gold-l: #faf2dd;
  --green: #35682f;

  --col: 1100px;
  --r: 4px;
  --serif: "NaskhH", "Times New Roman", serif;
}

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

body {
  margin: 0;
  font-family: "Estedad", "Tahoma", system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.95;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.5; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.75rem, 5vw, 2.85rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.8rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1.05rem; }
ul, ol { margin: 0 0 1.05rem; padding-inline-start: 1.35rem; }
li { margin-bottom: .4rem; }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-d); }
img { max-width: 100%; height: auto; }
.na { color: var(--na); font-size: .88em; }
small { font-size: .85rem; }
b, strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

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

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

/* ------------------------------------------------------------ سرآیند */
.head { background: var(--white); border-bottom: 2px solid var(--ink); }
.strip { background: var(--ink); color: var(--paper-2); font-size: .74rem; }
.strip .col { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: space-between; padding: .35rem 0; }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0 .9rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.logo img { width: 44px; height: 44px; }
.logo span { display: grid; line-height: 1.2; }
.logo b { font-family: var(--serif); font-size: 1.45rem; letter-spacing: -.01em; }
.logo i { font-style: normal; font-size: .76rem; color: var(--na); }
.burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; background: none; border: 1px solid var(--hair-2); border-radius: var(--r); cursor: pointer; }
.burger span { display: block; width: 19px; height: 2px; background: var(--ink); }
.head-nav { display: none; border-top: 1px solid var(--hair); }
.head-nav .col { display: flex; flex-wrap: wrap; gap: 0; }
.head-nav a {
  font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink-2);
  padding: .6rem 1rem; border-bottom: 3px solid transparent;
}
.head-nav a:hover { color: var(--red); border-bottom-color: var(--hair-2); }
.head-nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); font-weight: 700; }
.menu { border-top: 1px solid var(--hair); background: var(--white); }
.menu ul { list-style: none; margin: 0; padding: .4rem 0 1rem; }
.menu li { margin: 0; }
.menu a { display: block; padding: .7rem .2rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--paper-2); font-weight: 500; }
.menu a[aria-current="page"] { color: var(--red); font-weight: 700; }
@media (min-width: 900px) {
  .head-nav { display: block; }
  .burger { display: none; }
  .menu { display: none !important; }
}

/* ------------------------------------------------------------ مسیر */
.path { border-bottom: 1px solid var(--hair); background: var(--paper); }
.path ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: .5rem 0; font-size: .8rem; }
.path li + li::before { content: "‹"; color: var(--na); margin-inline-end: .35rem; }
.path a { color: var(--na); text-decoration: none; }
.path a:hover { color: var(--red); }
.path [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ دکمه‌ها */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 46px; padding: .55rem 1.2rem; border-radius: var(--r);
  font: inherit; font-weight: 700; font-size: .94rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: background .14s, color .14s;
}
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-d); color: var(--white); }
.btn-plain { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.btn-plain:hover { border-color: var(--red); color: var(--red); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; color: var(--paper); }
.btn-sm { min-height: 40px; padding: .35rem .9rem; font-size: .88rem; }
.btn-xs { min-height: 34px; padding: .2rem .7rem; font-size: .84rem; }
.btn-lg { min-height: 54px; padding: .75rem 1.7rem; font-size: 1.05rem; }

/* ------------------------------------------------------ تیتر با خط */
.rule-h {
  position: relative; padding-bottom: .45rem; margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--ink);
}
.rule-h::after { content: ""; position: absolute; bottom: -5px; inset-inline-start: 0; width: 84px; height: 3px; background: var(--red); }
.kicker { display: block; font-family: "Estedad", sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--red); margin-bottom: .3rem; }
.deck { font-size: 1.1rem; color: var(--ink-2); line-height: 1.85; }

.stamp { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .78rem; color: var(--na); border-block: 1px solid var(--hair); padding: .55rem 0; margin: 0 0 1.5rem; }
.stamp span:first-child { color: var(--ink-2); font-weight: 700; }

/* ------------------------------------------------------------ جعبه‌ها */
.box { background: var(--white); border: 1px solid var(--hair); padding: 1.2rem; }
.box + .box { margin-top: 1rem; }
.cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cards.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ed-note {
  background: var(--gold-l); border-inline-start: 3px solid var(--gold);
  padding: .9rem 1.1rem; margin: 1.2rem 0;
}
.ed-note b { display: block; font-family: var(--serif); color: var(--ink); margin-bottom: .2rem; }
.ed-note p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.ed-note.warn { background: var(--red-l); border-inline-start-color: var(--red); }
.ed-note.plain { background: var(--paper-2); border-inline-start-color: var(--hair-2); }

/* --------------------------------------------------------- نشان برند */
.em { display: inline-grid; place-items: center; flex: 0 0 auto; width: 70px; height: 42px; padding: 4px 6px; background: #1d1a16; border-radius: 3px; }
.em img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.em-b { width: 112px; height: 66px; padding: 7px 10px; }

/* --------------------------------------------------- امتیاز و مقیاس */
.medal {
  display: inline-grid; place-items: center; line-height: 1.1; min-width: 58px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 3px; padding: .3rem .5rem;
}
.medal b { font-family: var(--serif); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.medal i { font-style: normal; font-size: .58rem; color: var(--na); }
.medal.sm { min-width: 48px; padding: .2rem .4rem; border-width: 1px; }
.medal.sm b { font-size: 1rem; }
.medal.lg { min-width: 92px; padding: .55rem 1rem; }
.medal.lg b { font-size: 2.2rem; }

.scale { display: inline-flex; align-items: center; gap: .45rem; min-width: 96px; }
.scale-t { flex: 1; height: 3px; background: var(--paper-3); min-width: 46px; }
.scale-t > span { display: block; height: 100%; background: var(--ink); }
.scale b { font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.stars { color: var(--gold); letter-spacing: -1px; white-space: nowrap; }
.stars .off { color: var(--paper-3); }

/* ------------------------------------------------------------- جدول */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rank { width: 100%; min-width: 660px; border-collapse: collapse; background: var(--white); font-size: .92rem; }
.rank caption { caption-side: bottom; text-align: start; padding: .7rem .1rem 0; font-size: .8rem; color: var(--na); }
.rank th, .rank td { padding: .6rem .7rem; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--hair); }
.rank thead th { background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 700; white-space: nowrap; border-bottom: 0; }
.rank tbody tr.top { background: #fffcf4; }
.rank tbody tr:hover { background: var(--paper-2); }
.rank .rk { width: 52px; }
.rank .bn { min-width: 200px; }
.rank .bn a { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.rk-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair-2); font-family: var(--serif); font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; }
tr.top:nth-child(1) .rk-n { background: var(--red); color: var(--white); border-color: var(--red); }
tr.top:nth-child(2) .rk-n, tr.top:nth-child(3) .rk-n { background: var(--gold-l); border-color: var(--gold); color: var(--gold); }
.sort { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; display: inline-flex; gap: .25rem; align-items: center; }
.sort:hover { color: #ffd9a0; }

@media (max-width: 760px) {
  .rank { min-width: 0; display: block; }
  .rank thead { display: none; }
  .rank tbody, .rank tr, .rank td { display: block; }
  .rank tr { border: 1px solid var(--hair); border-top: 3px solid var(--ink); margin-bottom: .9rem; padding: .8rem .9rem; background: var(--white); }
  .rank tr.top { border-top-color: var(--red); }
  .rank td { border: 0; padding: .28rem 0; display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
  .rank td::before { content: attr(data-h); font-size: .82rem; color: var(--na); }
  .rank td.bn, .rank td.rk { display: inline-flex; }
  .rank td.rk { padding-inline-end: .7rem; }
  .rank td.bn::before, .rank td.rk::before { content: none; }
  /* در حالت display:block، caption باید بلوکِ تمام‌عرض شود. */
  .rank caption { display: block; width: 100%; caption-side: top; padding: 0 0 .7rem; text-align: start; }
}

/* -------------------------------------------------------- مدخل بررسی */
.entries { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.entry { padding: 1.3rem 0; border-bottom: 1px solid var(--hair); }
.entry-top { display: grid; grid-template-columns: auto auto 1fr auto; gap: .8rem; align-items: center; margin-bottom: .7rem; }
.entry-rank { font-family: var(--serif); font-size: 2rem; color: var(--hair-2); font-variant-numeric: tabular-nums; line-height: 1; }
.entry-name h3 { margin: 0; font-size: 1.2rem; }
.entry-name h3 a { text-decoration: none; color: var(--ink); }
.entry-name h3 a:hover { color: var(--red); }
.entry-name p { margin: 0; font-size: .84rem; color: var(--na); }
.entry-score { display: grid; gap: .25rem; justify-items: center; }
.entry-verdict { margin: 0 0 .8rem; color: var(--ink-2); }
.entry-foot { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 560px) {
  .entry-top { grid-template-columns: auto auto 1fr; }
  .entry-score { grid-column: 3; justify-self: end; }
}

/* -------------------------------------------------------- تفکیک امتیاز */
.bd { display: grid; gap: .55rem; }
.bd-row { display: grid; grid-template-columns: 11rem 1fr; gap: .8rem; align-items: center; font-size: .92rem; }
.bd-k i { display: block; font-style: normal; font-size: .74rem; color: var(--na); }
@media (max-width: 520px) { .bd-row { grid-template-columns: 8.5rem 1fr; font-size: .86rem; } }

/* ------------------------------------------------------------ پرسش‌ها */
.qlist { margin: 0; }
.qlist > div { border-bottom: 1px solid var(--hair); padding: .9rem 0; }
.qlist dt { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; margin-bottom: .3rem; }
.qlist dd { margin: 0; color: var(--ink-2); font-size: .94rem; }
.qlist dd p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ بیشتر بخوانید */
.morelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.morelist li { margin: 0; border-bottom: 1px solid var(--hair); }
.morelist a { display: grid; gap: .1rem; padding: .85rem .2rem; text-decoration: none; }
.morelist a:hover { background: var(--paper-2); }
.morelist b { color: var(--ink); font-size: 1rem; }
.morelist a:hover b { color: var(--red); }
.morelist span { color: var(--na); font-size: .86rem; }

/* -------------------------------------------------------------- متن */
.article { max-width: 720px; }
.article.wide { max-width: none; }
.article h2 { margin-top: 2.2rem; scroll-margin-top: 74px; }
.article h2:first-child { margin-top: 0; }
.article h3 { margin-top: 1.5rem; }
.article > p:first-of-type::first-letter {
  float: inline-start; font-family: var(--serif); font-size: 3.1rem; line-height: .82;
  padding-inline-end: .35rem; padding-top: .3rem; color: var(--red);
}
.article table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: .92rem; }
.article th, .article td { border: 1px solid var(--hair); padding: .55rem .75rem; text-align: start; }
.article th { background: var(--paper-2); font-weight: 700; }
.article blockquote {
  margin: 1.4rem 0; padding: .3rem 1.2rem; border-inline-start: 3px solid var(--red);
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink);
}
.jump-list { display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; border-block: 1px solid var(--hair); padding: .6rem 0; margin-bottom: 1.6rem; font-size: .85rem; }
.jump-list a { color: var(--ink-2); text-decoration: none; }
.jump-list a:hover { color: var(--red); text-decoration: underline; }

/* ------------------------------------------------------------ مزایا */
.prosc { display: grid; gap: 1rem; }
@media (min-width: 700px) { .prosc { grid-template-columns: 1fr 1fr; } }
.prosc ul { list-style: none; padding: 0; margin: 0; }
.prosc li { position: relative; padding-inline-start: 1.5rem; margin-bottom: .55rem; font-size: .93rem; }
.prosc li::before { position: absolute; inset-inline-start: 0; font-weight: 700; }
.prosc .yes li::before { content: "✚"; color: var(--green); }
.prosc .no li::before { content: "✖"; color: var(--red); }
.prosc .yes h3 { color: var(--green); }
.prosc .no h3 { color: var(--red); }

/* -------------------------------------------------------------- نظرها */
.ops { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.op { padding: .9rem 0; border-bottom: 1px solid var(--hair); }
.op-h { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: .3rem; }
.op-h b { font-size: .93rem; }
.op-h time { color: var(--na); margin-inline-start: auto; }
.op p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.hold-tag { background: var(--red-l); color: var(--red); border: 1px solid rgba(140,47,42,.3); padding: .05rem .5rem; font-size: .72rem; font-weight: 700; }
.seed-tag { background: var(--paper-2); color: var(--na); padding: .05rem .5rem; font-size: .72rem; }

/* ------------------------------------------------------------- فرم‌ها */
.fields { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fields.one { grid-template-columns: 1fr; } }
.fields label, .fields > div { display: grid; gap: .3rem; }
.fields span, .fl { font-weight: 700; font-size: .87rem; }
.fields input, .fields select, .fields textarea {
  font: inherit; font-size: .95rem; padding: .6rem .8rem; min-height: 46px;
  border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--white); color: var(--ink); width: 100%;
}
.fields textarea { min-height: 130px; resize: vertical; line-height: 1.8; }
.star-in { display: flex; gap: .1rem; }
.star-in .st { background: none; border: 0; cursor: pointer; font-size: 1.75rem; line-height: 1; color: var(--paper-3); padding: .1rem .15rem; min-height: 44px; }
.star-in .st.on { color: var(--gold); }
.fmsg { margin-top: .9rem; padding: .75rem 1rem; font-size: .9rem; background: var(--gold-l); border-inline-start: 3px solid var(--gold); }
.fmsg.ok { background: #eaf3e8; border-inline-start-color: var(--green); }

/* -------------------------------------------------------- کارت بازی */
.card { display: inline-grid; place-items: center; width: 36px; height: 50px; border: 1px solid var(--hair-2); border-radius: 3px; background: var(--white); color: var(--ink); margin: 2px; line-height: 1.05; }
.card b { font-family: var(--serif); font-size: .88rem; }
.card i { font-style: normal; font-size: .85rem; }
.card.red { color: var(--red); }
.cardrow { display: flex; flex-wrap: wrap; gap: .1rem; align-items: center; margin: .8rem 0; }

/* ------------------------------------------------------------ قهرمان */
.lead-block { border-bottom: 2px solid var(--ink); padding-bottom: 1.6rem; margin-bottom: 2rem; }
.lead-grid { display: grid; gap: 1.6rem; }
@media (min-width: 920px) { .lead-grid { grid-template-columns: 1.25fr .75fr; align-items: start; } }
.lead-side { background: var(--white); border: 1px solid var(--hair); padding: 1.1rem; }
.lead-side h2 { font-size: 1.05rem; border-bottom: 1px solid var(--hair); padding-bottom: .4rem; }
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--hair); background: var(--white); margin-top: 1.2rem; }
.fig { padding: .8rem .5rem; text-align: center; border-inline-start: 1px solid var(--hair); }
.fig:first-child { border-inline-start: 0; }
.fig b { display: block; font-family: var(--serif); font-size: 1.55rem; color: var(--red); font-variant-numeric: tabular-nums; }
.fig span { font-size: .76rem; color: var(--na); }

/* ------------------------------------------------------------- نوار */
.band-cta { background: var(--ink); color: var(--paper); padding: 1.6rem; display: grid; gap: 1rem; margin-block: 2.6rem; }
.band-cta h2 { color: var(--paper); margin: 0; }
.band-cta p { color: #c9c0b2; margin: 0; }
.band-cta .btn-plain { color: var(--paper); border-color: rgba(250,248,243,.45); }
.band-cta .btn-plain:hover { background: rgba(250,248,243,.12); color: var(--paper); }
@media (min-width: 780px) { .band-cta { grid-template-columns: 1fr auto; align-items: center; } }

/* =========================================================================
   میز حکم — پوستهٔ نشریه (نمد سبز کلاسیک، تابلوی امتیاز بالای میز)
   ========================================================================= */
.board { background: var(--white); border: 1px solid var(--hair); border-top: 3px solid var(--ink); margin-block: 1.2rem; }
.board-wait { padding: 2.5rem 1.2rem; text-align: center; }
.board-wait p { margin: 0 0 .3rem; }

.bd-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--hair); background: var(--paper-2); }
.bd-bar .sp { margin-inline-start: auto; }
.bd-ic { min-width: 40px; min-height: 40px; display: grid; place-items: center; border: 1px solid var(--hair-2); background: var(--white); border-radius: var(--r); cursor: pointer; font-size: 1rem; color: var(--ink-2); }
.bd-ic:hover { border-color: var(--red); color: var(--red); }
.bd-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; background: var(--white); border: 1px solid var(--hair); padding: .25rem .75rem; color: var(--ink-2); }
.bd-tag b { color: var(--red); }

/* تابلوی امتیاز — سبک اسکوربورد نشریه */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; background: var(--ink); color: var(--paper); }
.sb { padding: .6rem 1rem; display: grid; gap: .05rem; }
.sb.b { text-align: end; }
.sb .l { font-size: .72rem; color: #b7ac9b; }
.sb .v { font-family: var(--serif); font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sb.a .v { color: #ffd9a0; }
.sb.b .v { color: #ffb0ab; }
.sb .t { font-size: .72rem; color: #b7ac9b; }
.sb-mid { display: grid; place-items: center; padding: .5rem 1rem; background: #2a251f; font-size: .72rem; color: #b7ac9b; text-align: center; min-width: 90px; }
.sb-mid b { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--paper); font-variant-numeric: tabular-nums; }

.felt {
  position: relative; padding: 1rem .8rem;
  background: radial-gradient(120% 95% at 50% 40%, #1a6b4e 0%, #0f4d38 55%, #0a3728 100%);
  border-block: 6px solid #3a2a1c;
  display: grid; gap: .5rem;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-areas: ". n ." "w c e" ". s .";
  min-height: 320px;
}
.s-n { grid-area: n; } .s-e { grid-area: e; } .s-w { grid-area: w; } .s-s { grid-area: s; }
.s-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; }
}

.seat { display: grid; justify-items: center; gap: .25rem; align-content: center; }
.seat-tag { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; background: rgba(0,0,0,.4); color: #f2ede2; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; padding: .2rem .65rem; font-size: .77rem; font-weight: 700; }
.seat-tag.you { background: var(--gold-l); color: var(--ink); border-color: var(--gold); }
.seat-tag.turn { box-shadow: 0 0 0 2px var(--gold); }
.seat .crown { color: #ffd76a; }
.seat-info { font-size: .7rem; color: rgba(242,237,226,.85); min-height: 1em; }
.fan { display: flex; }
.fan i { display: block; width: 19px; height: 27px; border-radius: 2px; margin-inline-start: -10px; background: #0f3d2c; border: 1px solid rgba(255,214,120,.45); }
.fan 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: 40px; min-height: 56px; display: grid; place-items: center; }
.k-n { grid-area: tn; } .k-e { grid-area: te; } .k-s { grid-area: ts; } .k-w { grid-area: tw; }
.trump-note { position: absolute; top: -2px; inset-inline-end: -2px; background: var(--paper); color: var(--ink); border: 1px solid var(--gold); padding: .12rem .6rem; font-size: .74rem; font-weight: 700; }
.empty-note { color: rgba(242,237,226,.8); font-size: .85rem; text-align: center; padding: 1rem .5rem; }

.hand-box { padding: 1rem; }
.turn-msg { text-align: center; font-family: var(--serif); font-weight: 700; min-height: 1.6em; margin: 0 0 .7rem; font-size: 1.05rem; }
.turn-msg.err { color: var(--red); font-family: "Estedad", sans-serif; font-weight: 400; font-size: .9rem; }
.hand { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: .25rem; }
.hand.scroll { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .5rem; }
.pl {
  position: relative; flex: 0 0 auto; width: 50px; height: 72px; border-radius: 4px;
  background: var(--white); border: 1px solid var(--hair-2); box-shadow: 0 2px 5px rgba(29,26,22,.25);
  display: grid; place-items: center; padding: 0; font: inherit; line-height: 1.05; color: var(--ink);
  cursor: default; transition: transform .12s, box-shadow .12s;
}
.pl.red { color: var(--red); }
.pl .r { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.pl .s { font-size: 1.1rem; }
.pl.ok { cursor: pointer; box-shadow: 0 0 0 2px var(--gold), 0 3px 7px rgba(29,26,22,.3); }
.pl.ok:hover { transform: translateY(-9px); }
.pl.off { opacity: .4; cursor: not-allowed; }
.pl.tr::after { content: ""; position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--gold); pointer-events: none; }
.pl.mini { width: 40px; height: 58px; }
.pl.mini .r { font-size: .86rem; } .pl.mini .s { font-size: .92rem; }
@media (max-width: 420px) { .pl { width: 44px; height: 64px; } }

.pick-trump { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1rem; }
@media (min-width: 520px) { .pick-trump { grid-template-columns: repeat(4, 1fr); } }
.tbtn { display: grid; place-items: center; gap: .15rem; padding: .8rem .4rem; cursor: pointer; background: var(--white); border: 1px solid var(--hair-2); border-radius: var(--r); font: inherit; font-weight: 700; min-height: 44px; color: var(--ink); }
.tbtn:hover { border-color: var(--red); background: var(--red-l); }
.tbtn .sy { font-size: 1.7rem; line-height: 1; }
.tbtn.red .sy { color: var(--red); }
.tbtn .n { font-size: .74rem; color: var(--na); font-weight: 400; }

.start-box { padding: 1.2rem; display: grid; gap: 1rem; }
.modes { display: grid; gap: .7rem; }
@media (min-width: 620px) { .modes { grid-template-columns: 1fr 1fr; } }
.mode { text-align: start; display: grid; gap: .2rem; padding: 1rem 1.1rem; cursor: pointer; background: var(--paper-2); border: 1px solid var(--hair); border-radius: var(--r); font: inherit; color: var(--ink); }
.mode:hover { border-color: var(--red); background: var(--red-l); }
.mode b { font-family: var(--serif); font-size: 1.05rem; }
.mode span { font-size: .85rem; color: var(--na); }
.opts { display: grid; gap: .7rem; }
@media (min-width: 620px) { .opts { grid-template-columns: repeat(3, 1fr); } }
.opt { display: grid; gap: .25rem; font-size: .85rem; font-weight: 700; }
.opt select { font: inherit; font-weight: 400; font-size: .92rem; min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--white); color: var(--ink); }

.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(29,26,22,.55); }
.overlay-in { background: var(--white); border-top: 4px solid var(--red); padding: 1.6rem; max-width: 420px; width: 100%; text-align: center; }
.overlay-in .mk { font-size: 2.2rem; line-height: 1; margin-bottom: .3rem; }

/* ------------------------------------------------------------- پاورقی */
.foot { margin-top: 3.4rem; background: var(--ink); color: #c9c0b2; border-top: 5px solid var(--red); }
.foot a { color: #e2dacd; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot .logo { color: var(--paper); }
.foot .logo i { color: #9c9184; }
.foot-grid { display: grid; gap: 1.6rem; padding: 2.3rem 0 1.4rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.7fr repeat(2, 1fr); } }
@media (min-width: 1020px) { .foot-grid { grid-template-columns: 1.8fr repeat(4, 1fr); } }
.foot-about p { font-size: .87rem; color: #9c9184; margin-top: .8rem; }
.foot-col h2 { font-family: var(--serif); font-size: .95rem; color: var(--paper); margin-bottom: .55rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: .35rem; font-size: .87rem; }
.foot-warn { display: flex; gap: .9rem; align-items: flex-start; border-top: 1px solid #3a342c; padding: 1rem 0; }
.foot-warn p { margin: 0; font-size: .82rem; color: #9c9184; }
.plus18 { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #b4655f; color: #d99b95; font-weight: 700; font-size: .76rem; }
.foot-end { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; border-top: 1px solid #3a342c; padding: .9rem 0; font-size: .79rem; color: #8b8175; }