/* Umumiy karta ko'rinishi: faqat CSS. O'lcham --card-w orqali. */
:root {
  --card-w-sm: 34px;
  --card-w-md: 50px;
  --card-w-lg: min(19vw, 76px);
  --card-face: #ffffff;
  --card-edge: rgba(0, 0, 0, 0.18);
  --card-red: #d32f2f;
  --card-black: #1b1b1f;
}
:root[data-scheme="dark"] {
  --card-face: #f3f1ea;
  --card-edge: rgba(0, 0, 0, 0.5);
}

.card {
  --card-w: var(--card-w-md);
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--card-w) * 0.1);
  background: var(--card-face);
  box-shadow: 0 1px 0 var(--card-edge), 0 2px 6px rgba(0, 0, 0, 0.18);
  color: var(--card-black);
  font-family: Georgia, "Times New Roman", serif;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
}
.card.size-sm { --card-w: var(--card-w-sm); }
.card.size-lg { --card-w: var(--card-w-lg); }
.card.red { color: var(--card-red); }

/* Burchak: qiymat va mast, pastkisi teskari */
.card .corner {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15%;
  line-height: 0.9;
}
.card .corner b {
  font-size: calc(var(--card-w) * 0.19);
  font-weight: 700;
  letter-spacing: -0.09em;
  white-space: nowrap;
}
.card .corner i { font-style: normal; font-size: calc(var(--card-w) * 0.16); }
.card .corner.tl { top: 3.5%; left: 3%; }
.card .corner.br { bottom: 3.5%; right: 3%; transform: rotate(180deg); }

/* Kichik karta: burchak + markazda bitta mast */
.card .pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--card-w) * 0.5);
}
.card.size-sm .corner { width: auto; }
.card.size-sm .corner b { font-size: calc(var(--card-w) * 0.3); }
.card.size-sm .corner i { font-size: calc(var(--card-w) * 0.26); }
.card.size-sm .corner.br { display: none; }
.card.size-sm .pip { font-size: calc(var(--card-w) * 0.46); padding: 30% 0 0 20%; }

/* Raqamli kartalar: klassik pip joylashuvi */
.card .face { position: absolute; pointer-events: none; }
.card .face.pips { top: 14%; bottom: 14%; left: 17%; right: 17%; }
.card .face.pips .p {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--card-w) * 0.25);
  line-height: 1;
}
.card .face.pips .p.flip { transform: translate(-50%, -50%) rotate(180deg); }
.card .face.ace { inset: 0; display: grid; place-items: center; }
.card .face.ace .pip-ace { font-size: calc(var(--card-w) * 0.5); line-height: 1; }
.card[data-code="AS"] .face.ace .pip-ace { font-size: calc(var(--card-w) * 0.72); }

/* Saroy kartalari (J, Q, K): SVG figura ramkada */
.card .face.court { top: 7%; bottom: 7%; left: 17%; right: 17%; }
.card .face.court svg { display: block; width: 100%; height: 100%; }

/* SVG dizayn (static/cards/deck): o'z oq foni, ramkasi va burchaklari bor */
.card.has-img { background: transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); }
.card .face-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; pointer-events: none; user-select: none; -webkit-user-drag: none;
}
:root[data-scheme="dark"] .card .face-img { filter: brightness(0.96); }
/* Rasm yuklanguncha: oddiy oq karta; keyin rasm va burchak belgisi bir vaqtda chiqadi */
.card.has-img .face-img, .card.has-img .corner.big { transition: opacity .12s ease; }
.card.has-img:not(.ready) { background: var(--card-face); }
.card.has-img:not(.ready) .face-img, .card.has-img:not(.ready) .corner.big { opacity: 0; }

/* Kattalashtirilgan burchak belgisi (dizayndagi mayda belgini yopadi) */
.card.has-img .corner.big {
  width: auto;
  min-width: 15%;
  padding: 1px 1px 2px;
  background: #fff;
  border-radius: calc(var(--card-w) * 0.05);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 0.92;
}
.card.has-img .corner.big.tl { top: 1.2%; left: 1.2%; }
.card.has-img .corner.big.br { bottom: 1.2%; right: 1.2%; }
.card.has-img .corner.big b { font-size: calc(var(--card-w) * 0.23); letter-spacing: -0.06em; }
.card.has-img .corner.big.ten b { letter-spacing: -0.12em; font-size: calc(var(--card-w) * 0.2); }
.card.has-img .corner.big i { font-size: calc(var(--card-w) * 0.18); }
.card.has-img .corner.big { color: #111; }
.card.has-img.red .corner.big { color: #b3150f; }

.card.has-img.selected { box-shadow: 0 0 0 2px var(--tg-theme-button-color, #2f7de1), 0 6px 14px rgba(0, 0, 0, 0.25); }
.card.has-img.highlight { box-shadow: 0 0 0 2px #f5b301, 0 2px 8px rgba(0, 0, 0, 0.25); }

.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 4px, transparent 4px 8px),
    var(--tg-theme-button-color, #2f7de1);
  border: 2px solid var(--card-face);
}

.card.clickable { cursor: pointer; }
.card.selected {
  transform: translateY(calc(var(--card-w) * -0.22));
  box-shadow: 0 0 0 2px var(--tg-theme-button-color, #2f7de1), 0 6px 14px rgba(0, 0, 0, 0.25);
}
.card.disabled { opacity: 0.55; }
.card.highlight { box-shadow: 0 0 0 2px #f5b301, 0 2px 8px rgba(0, 0, 0, 0.25); }

.card.enter { animation: card-in 0.28s cubic-bezier(.2,.8,.2,1); }
@keyframes card-in {
  from { transform: translateY(-18px) scale(0.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.fan { display: flex; align-items: flex-end; }
.fan > .card + .card { margin-left: calc(var(--card-w) * -0.55); }
.fan.no-overlap { gap: 4px; }
.fan.no-overlap > .card + .card { margin-left: 0; }
.fan.backs > .card + .card { margin-left: calc(var(--card-w) * -0.7); }

.hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  padding-top: calc(var(--card-w-lg) * 0.3);
  min-height: calc(var(--card-w-lg) * 1.4 + var(--card-w-lg) * 0.3);
}