/* ======================================================
   Anastra: masadaki perler, kart sahipliği, kapalı deste ve açık atık, büyüyebilen el.
   Lobi, oyuncu yerleri, sonuç penceresi kozlu.css'ten; masa ve kartlar game.css'ten gelir.
   ====================================================== */
.an-page {
    --own-0: #e5a93b;
    --own-1: #5fc39b;
    --own-2: #e2675f;
    --own-3: #7aa6e8;
}

/* ---------- Hedef seçimi ---------- */
.an-targets { border: 0; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.an-targets legend { margin-bottom: 8px; color: var(--p-cream); font-weight: 600; font-size: 15px; }
.an-target { position: relative; display: block; cursor: pointer; }
.an-target input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.an-target span {
    display: grid;
    place-items: center;
    min-height: 48px;
    border-radius: 10px;
    border: 1.5px solid rgba(246, 231, 208, .22);
    background: rgba(255, 255, 255, .04);
    color: var(--p-cream);
    font: 700 18px var(--sans);
    font-variant-numeric: tabular-nums;
}
.an-target input:checked + span { background: var(--p-mustard); border-color: var(--p-mustard); color: var(--p-brown); }
.an-target input:focus-visible + span { outline: 3px solid var(--p-mustard); outline-offset: 3px; }

/* ---------- Masa ---------- */
.an-table {
    /* Hamle çubukları görünüp gizlenirken masa zıplamasın: yükseklik içerikten gelir, boşluğu doldurmaz. */
    flex: none;
    grid-template-columns: minmax(0, .8fr) minmax(0, 3.2fr) minmax(0, .8fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top top top" "left center right" "me me me";
    gap: 6px 10px;
    min-height: clamp(300px, 44vh, 520px);
    padding: 14px 20px 12px;
}
.an-center { grid-area: center; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.an-seat .an-won-btn {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(195, 210, 189, .3);
    background: rgba(0, 0, 0, .25);
    color: var(--p-sage);
    font: 500 12px var(--sans);
    cursor: pointer;
    white-space: nowrap;
}
.an-seat .an-won-btn:hover { color: var(--p-mustard); border-color: var(--p-mustard); }
.an-own-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #21130c;
    background: var(--own-color);
}
.an-own-0 { --own-color: var(--own-0); }
.an-own-1 { --own-color: var(--own-1); }
.an-own-2 { --own-color: var(--own-2); }
.an-own-3 { --own-color: var(--own-3); }

/* ---------- Perler ---------- */
.an-melds {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    /* Sabit yükseklik: perler eklendikçe masa uzayıp oyuncu yerleri kaymasın; fazlası kendi içinde kayar. */
    height: clamp(150px, 30vh, 360px);
    overflow-y: auto;
    padding: 4px;
    border-radius: 12px;
    overscroll-behavior: contain;
}
.an-empty { margin: auto; color: var(--p-sage-dim); font-size: 14px; }
.an-meld {
    display: inline-flex;
    padding: 6px 8px 10px;
    border-radius: 10px;
    border: 1.5px solid rgba(195, 210, 189, .14);
    background: rgba(0, 0, 0, .22);
    color: inherit;
    font: inherit;
    cursor: default;
}
.an-meld:not(:disabled) { cursor: pointer; border-color: rgba(229, 169, 59, .4); }
.an-meld:not(:disabled):hover { border-color: var(--p-mustard); background: rgba(229, 169, 59, .1); }
.an-meld-cards { display: inline-flex; align-items: center; gap: 3px; }
.an-mini-card, .an-gap {
    --cw: 32px;
    --ch: 45px;
    --radius: 3px;
    position: relative;
    width: var(--cw);
    height: var(--ch);
    flex-shrink: 0;
}
.an-mini-card .pc-pip, .an-mini-card .pc-court-suit { display: none; }
/* Kartın altındaki renkli çizgi: puanın sahibi. */
.an-own::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: -6px;
    height: 4px;
    border-radius: 2px;
    background: var(--own-color);
}
.an-own.is-fresh .pc-face { box-shadow: 0 0 0 2px var(--p-mustard), 0 0 12px rgba(229, 169, 59, .6); }
.an-gap {
    display: grid;
    place-items: center;
    border: 1.5px dashed rgba(195, 210, 189, .35);
    border-radius: 3px;
    color: var(--p-sage-dim);
    font-size: 11px;
    font-weight: 600;
}
.an-end {
    min-width: 22px;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(229, 169, 59, .14);
    color: var(--p-mustard);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}
.an-end-closed { background: rgba(0, 0, 0, .25); color: var(--p-sage-dim); font-weight: 500; }

/* ---------- Deste ve atık ---------- */
.an-piles { display: flex; align-items: center; gap: 14px; min-width: 0; }
.an-stock { --cw: 34px; --ch: 48px; --radius: 3px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.an-stock-backs { position: relative; width: calc(var(--cw) + 8px); height: var(--ch); }
.an-stock-backs .kz-back { transform: translate(calc(var(--i) * 3px), calc(var(--i) * -2px)); }
.an-stock-count {
    min-width: 2.2em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: var(--p-cream);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}
.an-discard-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.an-pile-label { color: var(--p-sage); font-size: 12.5px; }
.an-discard {
    display: flex;
    overflow-x: auto;
    padding: 10px 6px 6px;
    min-height: 66px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .18);
    scrollbar-width: thin;
}
.an-discard-card {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .12s;
}
.an-discard-card + .an-discard-card { margin-left: -4px; }
.an-discard-card:disabled { cursor: default; }
.an-discard-card .an-mini-card { --cw: 36px; --ch: 50px; }
.an-discard-card:not(:disabled):hover { transform: translateY(-4px); }
.an-discard-card.is-taken { transform: translateY(-8px); }
.an-discard-card.is-taken .pc-face { box-shadow: 0 0 0 2px rgba(229, 169, 59, .7); }
.an-discard-card.is-base { transform: translateY(-8px); }
.an-discard-card.is-base .pc-face { box-shadow: 0 0 0 3px var(--p-mustard), 0 0 14px rgba(229, 169, 59, .7); }

/* ---------- Hazırlık ve hamleler ---------- */
.an-draft[hidden] { display: flex !important; visibility: hidden; }
.an-draft { min-height: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.an-draft-item {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: var(--p-cream);
    font-size: 13px;
    font-weight: 600;
}
.an-draft-item:first-child { background: transparent; color: var(--p-mustard); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.an-draft-item.is-ok { background: rgba(134, 215, 166, .18); color: #cfeedd; }
.an-draft-item.is-warn { background: rgba(155, 17, 30, .45); color: #ffd9d4; }
.an-actions[hidden] { display: flex !important; visibility: hidden; }
.an-actions { min-height: 46px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.an-act:disabled { opacity: .45; cursor: default; }
.an-act-note { color: var(--p-sage); font-size: 13px; }

/* ---------- El ---------- */
.an-hand-tools { display: flex; justify-content: center; align-items: center; gap: 12px; }
.an-hand-title { color: var(--p-sage); font-size: 13.5px; }
.an-mini {
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid rgba(246, 231, 208, .22);
    background: rgba(255, 255, 255, .04);
    color: var(--p-cream);
    font: 500 13px var(--sans);
    cursor: pointer;
}
.an-hand-wrap { container-type: inline-size; width: 100%; position: relative; }
.an-hand {
    --cw: clamp(46px, min(5vw, 7.4vh), 66px);
    --ch: calc(var(--cw) * 1.4);
    --radius: calc(var(--cw) * 0.09);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 6px;
    padding-top: 14px;
}
.an-card { width: var(--cw); height: var(--ch); }
.an-card.is-selected { transform: translateY(-12px); }
.an-card.is-selected .pc-face { box-shadow: 0 0 0 3px var(--p-mustard), 0 6px 14px rgba(0, 0, 0, .45); }
.an-card.is-new::after {
    content: "yeni";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--p-green);
    color: #cfeedd;
    font: 700 10px/1.3 var(--sans);
}
.an-card.is-base::after { content: "kullan"; background: var(--p-mustard); color: var(--p-brown); }
.an-card.is-base .pc-face { box-shadow: 0 0 0 2px var(--p-mustard); }
.an-hand.is-locked .an-card { filter: brightness(.85) saturate(.9); }
/* Elle dizme: kartlar sürüklenebilir; uzun basmada metin seçimi ve sistem menüsü açılmaz. */
.an-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Otomatik dizmenin bulduğu perler arasında küçük aralık (grup bozulunca kendiliğinden kalkar). */
.an-card.is-group-start { margin-left: 10px; }
.an-card.is-group-end { margin-right: 10px; }
.an-card.is-group-start:first-child { margin-left: 0; }
.an-card.is-dragging { opacity: .3; }
.an-drag-ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.an-drop-marker {
    position: absolute;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--p-mustard);
    box-shadow: 0 0 0 2px rgba(229,169,59,.3), 0 0 12px rgba(229,169,59,.6);
    pointer-events: none;
    z-index: 5;
}
.an-drop-marker[hidden] { display: none; }

.an-won-list { display: flex; flex-wrap: wrap; gap: 6px; }
.an-won-list .an-mini-card { --cw: 40px; --ch: 56px; }

/* ---------- Duyarlı yerleşim ---------- */
@media (max-width: 760px) {
    .an-table {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "left top right" "center center center" "me me me";
        padding: 10px 8px;
        min-height: 0;
    }
    .an-table .kz-seat-top { flex-direction: column; text-align: center; }
    .an-table .kz-seat-top .kz-seat-info { align-items: center; }
    .an-table .kz-seat-stats { flex-direction: column; gap: 0; align-items: center; }
    .an-melds { height: clamp(150px, 30vh, 300px); }
    .an-mini-card, .an-gap { --cw: 28px; --ch: 39px; }
    .an-own-dot { width: 13px; height: 13px; }
}
@media (max-width: 600px) {
    .an-hand {
        --cw: min(56px, calc((100cqw - 6 * 5px) / 7));
        gap: 10px 5px;
    }
    .an-hand .pg-card-btn:hover:not([aria-disabled="true"]) { transform: none; }
    .an-hand .an-card.is-selected { transform: translateY(-8px); }
    .an-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-actions .pg-btn { padding: 8px 12px; font-size: 14px; }
}

/* ---------- Yeni çekilen kart ve serideki boşluk ---------- */
.an-card.is-drawn::after {
    content: "Yeni";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--p-mustard);
    color: var(--p-brown);
    font: 700 10.5px/1.3 var(--sans);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    z-index: 2;
    pointer-events: none;
}
.an-card.is-new::after { content: "atıktan"; }
.an-meld .an-gap {
    width: 10px;
    border: 0;
    background: radial-gradient(circle, rgba(195, 210, 189, .55) 1.5px, transparent 2px) center / 10px 6px repeat-y;
}
.an-card.is-base::after { content: "kullan"; }