/* حکم: لابی، میزِ بیضیِ مشکی با لبه‌ی طلایی، صندلی‌ها با حلقه‌ی زمان، بادبزنِ کارت‌ها و انیمیشن‌ها. */

:root { --team0: #d4af37; --team1: #c9d1de; --cw: clamp(52px, 15.5vw, 78px); }

/* ---------- لابی ---------- */
.hk-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.hk-people { display: flex; flex-wrap: wrap; gap: 8px; }
.hk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.hk-chip .avatar { width: 26px; height: 26px; font-size: 12px; }
.hk-chip.me { border-color: var(--accent); }
.hk-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0; }
.hk-code { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hk-code .code { font-size: 26px; font-weight: 900; letter-spacing: 4px; direction: ltr; color: var(--accent);
  border: 1px dashed var(--line-strong); border-radius: 12px; padding: 4px 16px; }
.hk-tables { display: flex; flex-direction: column; gap: 10px; }
.hk-tcard .side { flex: 1 1 0; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-tcard .side:last-child { text-align: left; }
.hk-tcard .side.win { color: var(--accent); }
.hk-tcard .score { font-size: 20px; font-weight: 900; padding: 0 10px; }
.hk-tcard.mine { border-color: var(--accent); }
.hk-result .trophy, .hk-modal .trophy { font-size: 46px; line-height: 1.2; }
.hk-suit { width: 18px; height: 18px; vertical-align: middle; }
.hk-suit.xs { width: 13px; height: 13px; }
.hk-suit.lg { width: 30px; height: 30px; }

.hk-mini-wrap { display: flex; justify-content: center; margin: 4px 0 14px; }
.hk-mini { position: relative; width: min(100%, 360px); aspect-ratio: 1.25; }
.hk-mini .felt { position: absolute; inset: 18% 14%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #232017, #0b0a07 70%);
  box-shadow: inset 0 0 0 2px #b8912f, inset 0 0 0 7px #0b0a08, inset 0 0 0 8px rgba(212,175,55,.45), 0 14px 30px rgba(0,0,0,.55);
  display: grid; place-items: center; }
.hk-mini .logo { font-weight: 900; font-size: 22px; color: rgba(212,175,55,.35); letter-spacing: 2px; }
.hk-seat-btn { position: absolute; width: 112px; min-height: 54px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; padding: 4px; transform: translate(-50%, -50%); }
.hk-seat-btn .nm { font-weight: 800; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-seat-btn .tm { font-size: 11px; color: var(--muted); }
.hk-seat-btn.free { border-style: dashed; color: var(--muted); }
.hk-seat-btn.free:hover { border-color: var(--accent); color: var(--accent); }
.hk-seat-btn.me { border-color: var(--accent); background: rgba(212,175,55,.12); }
.hk-seat-btn.team0 .tm { color: var(--team0); }
.hk-seat-btn.team1 .tm { color: var(--team1); }
.hk-seat-btn.bottom { left: 50%; top: 92%; }
.hk-seat-btn.top { left: 50%; top: 8%; }
.hk-seat-btn.right { left: 88%; top: 50%; }
.hk-seat-btn.left { left: 12%; top: 50%; }

/* ---------- میز (تمام‌صفحه) ---------- */
body.hk-fullscreen #app { max-width: none; padding: 0; }
.hk-room { display: flex; flex-direction: column; height: var(--tg-viewport-stable-height, 100svh); min-height: 560px;
  overflow: hidden; user-select: none; -webkit-user-select: none; position: relative;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px calc(env(safe-area-inset-bottom, 0px) + 6px); }
.hk-top { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 6px; padding: 4px 2px 8px; }
.hk-tools { display: flex; flex-direction: column; gap: 4px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--accent); cursor: pointer; display: grid; place-items: center; font-size: 15px; }
.hk-team { text-align: center; border-radius: 12px; padding: 4px 6px; background: var(--surface); border: 1px solid var(--line); }
.hk-team .nm { font-size: 12px; font-weight: 800; }
.hk-team.team0 .nm { color: var(--team0); }
.hk-team.team1 .nm { color: var(--team1); }
.hk-team .pts { font-size: 26px; font-weight: 900; line-height: 1.1; }
.hk-team.mine { box-shadow: 0 0 0 1px var(--accent) inset; }
.hk-team .tr { color: var(--muted); }
.hk-mid { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; }
.hk-mid .trump { display: flex; flex-direction: column; align-items: center; gap: 0; }

.hk-felt-wrap { flex: 1 1 auto; position: relative; min-height: 0; padding: 2px; }
.hk-felt { position: relative; width: 100%; height: 100%; border-radius: 46% / 40%;
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 42%, #26231a 0%, #13110c 55%, #080706 100%);
  box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 0 8px #0b0a08, inset 0 0 0 9px rgba(212,175,55,.55),
    inset 0 0 60px rgba(0,0,0,.8), 0 18px 40px rgba(0,0,0,.6); }
.hk-felt .rim { position: absolute; inset: 16px; border-radius: 46% / 40%; border: 1px dashed rgba(212,175,55,.18); pointer-events: none; }

.hk-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px;
  transform: translate(-50%, -50%); text-align: center; z-index: 3; }
.hk-seat .nm { font-size: 12px; font-weight: 800; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-seat.team0 .nm { color: var(--team0); }
.hk-seat.team1 .nm { color: var(--team1); }
.hk-seat.top { left: 50%; top: 13%; }
.hk-seat.bottom { left: 50%; top: 86%; }                    /* تماشاچی: صندلیِ پایین هم نشان داده می‌شود */
.hk-seat.left { left: 11%; top: 47%; }
.hk-seat.right { left: 89%; top: 47%; }
.hk-felt.two .hk-seat.top { top: 14%; }
.hk-seat.me { left: 50%; top: 91%; flex-direction: row; gap: 8px; width: auto; }
.hk-seat .av { position: relative; width: 46px; height: 46px; }
.hk-seat .av .avatar { width: 46px; height: 46px; font-size: 18px; position: relative; z-index: 1; }
.hk-seat.me .av, .hk-seat.me .av .avatar { width: 38px; height: 38px; font-size: 15px; }
.hk-seat .crown { position: absolute; top: -13px; right: -6px; z-index: 2; color: var(--accent); font-size: 20px;
  text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.hk-seat .ring { position: absolute; inset: -5px; border-radius: 50%; --p: 1; opacity: 0; }
.hk-seat .ring.on { opacity: 1; background: conic-gradient(var(--accent) calc(var(--p) * 360deg), rgba(212,175,55,.12) 0);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.hk-seat .ring.on.low { background: conic-gradient(#e0603f calc(var(--p) * 360deg), rgba(224,96,63,.15) 0); }
.hk-seat.turn .avatar { box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(212,175,55,.5); }
.hk-seat .fan { display: flex; justify-content: center; height: 22px; }
.hk-seat .fan .mini { width: 15px; height: 21px; margin-inline-start: -10px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hk-seat .fan .mini:first-child { margin-inline-start: 0; }
.hk-seat.left .fan, .hk-seat.right .fan { display: none; }

.hk-banner { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  background: rgba(11,10,8,.75); border: 1px solid var(--line); color: var(--muted); font-size: 13px;
  padding: 4px 12px; border-radius: 99px; }
.hk-felt.two .hk-banner { top: 34%; }

.hk-card { width: var(--cw); aspect-ratio: 609 / 864; height: auto; border-radius: 6px; display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.hk-trick { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hk-trick .hk-card { position: absolute; left: 50%; top: 50%; width: min(calc(var(--cw) * 1.12), 23vw);
  transition: transform .36s cubic-bezier(.2,.8,.2,1), opacity .36s; }
.hk-trick .t-bottom { transform: translate(-50%, 8%) rotate(-3deg); }
.hk-trick .t-top { transform: translate(-50%, -108%) rotate(4deg); }
.hk-trick .t-left { transform: translate(-122%, -50%) rotate(-7deg); }
.hk-trick .t-right { transform: translate(22%, -50%) rotate(7deg); }
.hk-felt.two .hk-trick .t-bottom { transform: translate(-50%, 4%) rotate(-3deg); }
.hk-felt.two .hk-trick .t-top { transform: translate(-50%, -104%) rotate(4deg); }
.hk-trick .enter.from-bottom { transform: translate(-50%, 140%) scale(.9); opacity: 0; }
.hk-trick .enter.from-top { transform: translate(-50%, -260%) scale(.8); opacity: 0; }
.hk-trick .enter.from-left { transform: translate(-330%, -50%) scale(.8); opacity: 0; }
.hk-trick .enter.from-right { transform: translate(230%, -50%) scale(.8); opacity: 0; }
.hk-trick .collect { opacity: 0; transition: transform .42s ease-in, opacity .42s ease-in; }
.hk-trick .collect.to-bottom { transform: translate(-50%, 160%) scale(.5); }
.hk-trick .collect.to-top { transform: translate(-50%, -280%) scale(.5); }
.hk-trick .collect.to-left { transform: translate(-360%, -50%) scale(.5); }
.hk-trick .collect.to-right { transform: translate(260%, -50%) scale(.5); }

.hk-hand { flex: 0 0 auto; padding: 6px 0 2px; min-height: calc(var(--cw) * 1.4 + 26px); }
.hk-hand .fan { display: flex; justify-content: center; direction: ltr; padding: 16px 6px 0; }
.hk-hand .fan .hk-card { cursor: pointer; transition: transform .16s ease, filter .16s;
  margin-left: min(4px, calc((100% - var(--n) * var(--cw)) / max(1, var(--n) - 1))); }
.hk-hand .fan .hk-card:first-child { margin-left: 0; }
.hk-hand .fan .hk-card.no { filter: brightness(.5) saturate(.6) drop-shadow(0 3px 5px rgba(0,0,0,.55)); cursor: not-allowed; }
.hk-hand .fan .hk-card.ok:hover { transform: translateY(-6px); }
.hk-hand .fan .hk-card.sel { transform: translateY(-18px); filter: drop-shadow(0 0 10px rgba(212,175,55,.75)); }
.hk-hand .hk-hint { margin: 0; }
.hk-watch { text-align: center; color: var(--muted); padding: 18px 0; }

.hk-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(5,4,3,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in .2s; }
.hk-modal { width: min(100%, 420px); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong); border-radius: 18px; padding: 18px 16px; display: flex; flex-direction: column;
  gap: 12px; box-shadow: var(--shadow); position: relative; }
.hk-modal::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: 14px; pointer-events: none; }
.hk-modal .big { font-size: 34px; font-weight: 900; }
.hk-modal .kot { align-self: center; font-weight: 900; color: #1a1408; background: var(--gold-grad); padding: 2px 14px; border-radius: 99px; }
.hk-five { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; direction: ltr; }
.hk-five .hk-card { width: calc(var(--cw) * .95); }
.hk-five .hk-card.big { width: calc(var(--cw) * 1.6); }
.hk-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hk-suit-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--bg-2); cursor: pointer; font-weight: 800; }
.hk-suit-btn:active { transform: scale(.97); }
.hk-reveal { display: flex; justify-content: center; direction: ltr; }
.hk-reveal .rv { width: calc(var(--cw) * .8); margin-left: -18px; animation: deal .35s both; animation-delay: calc(var(--i) * 140ms); }
.hk-reveal .rv:first-child { margin-left: 0; }
@keyframes deal { from { opacity: 0; transform: translateY(-30px) rotate(-10deg); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  :root { --cw: 82px; }
  .hk-room { max-width: 980px; margin: 0 auto; }
}

/* پایانِ دور: دستِ همه، جمع‌وجور */
.hk-modal { max-height: calc(100vh - 32px); overflow-y: auto; }
.hk-dealt { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; text-align: start; }
.hk-dealt-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 10px; background: var(--bg-2); border-inline-start: 3px solid #c0392b; }
.hk-dealt-row.t1 { border-inline-start-color: #2e6bd6; }
.hk-dealt-row .nm { font-size: 12px; font-weight: 700; color: var(--muted); }
.hk-dealt-row .cards { display: flex; direction: ltr; }
.hk-card.xs { --cw: 26px; border-radius: 3px; box-shadow: -1px 0 2px rgba(0, 0, 0, .35); }
.hk-card.xs + .hk-card.xs { margin-left: -9px; }
.hk-card.xs.tr { outline: 1px solid var(--accent); outline-offset: -1px; }