/* ======================================================
   Hoşkin: King/İhale ile aynı löve masası (kozlu.css). Burada yalnızca Hoşkin'e özgü parçalar var:
   aşama şeridi, takım puanları, açma listesi, 20 kartlık el ve takım sonucu dökümü.
   ====================================================== */
.hk-page { --team-a: #e5a93b; --team-b: #e2747d; }
/* hidden özniteliği düğme ve kart stillerine her zaman üstün gelir (King ile aynı: sonuç penceresindeki gizli düğme). */
.hk-page [hidden] { display: none !important; }

/* ---------- Aşama şeridi: ihale → koz → açmalar → löveler → takım sonucu ---------- */
.hk-phases {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hk-step;
}
.hk-phases li {
    counter-increment: hk-step;
    flex: 1;
    min-width: 0;
    padding: 3px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(195, 210, 189, .14);
    color: var(--p-sage-dim);
    font: 600 12px/1.2 var(--sans);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hk-phases li::before { content: counter(hk-step) ". "; opacity: .7; }
.hk-phases li.is-done { color: var(--p-sage); border-color: rgba(134, 215, 166, .35); }
.hk-phases li.is-done::before { content: "✓ "; opacity: 1; color: #86d7a6; }
.hk-phases li.is-current { background: var(--p-mustard); border-color: var(--p-mustard); color: var(--p-brown); }

/* ---------- Takım puanları ---------- */
.hk-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hk-team-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 3px 12px;
    border-radius: 10px;
    background: rgba(20, 11, 7, .72);
    border: 1px solid rgba(229, 169, 59, .25);
    border-left: 4px solid var(--team-a);
}
.hk-team-box.hk-team-1 { border-left-color: var(--team-b); }
.hk-team-box.is-contract { box-shadow: inset 0 0 0 1px var(--p-mustard); }
.hk-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-cream); font-weight: 600; font-size: 14px; }
.hk-team-score { grid-column: 2; grid-row: 1 / span 2; font: 400 21px/1 var(--serif); color: var(--p-mustard); font-variant-numeric: tabular-nums; }
.hk-team-1 .hk-team-score { color: #f3aab0; }
.hk-team-sub { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-sage-dim); font-size: 12px; }

/* ---------- Koltuk: takım rozeti ---------- */
.hk-team { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.hk-team[data-team="0"] { background: rgba(229, 169, 59, .2); color: var(--p-mustard); }
.hk-team[data-team="1"] { background: rgba(226, 116, 125, .2); color: #f3aab0; }
.hk-page .kz-avatar { display: grid; place-items: center; }
.hk-page .kz-avatar img, .hk-page .kz-avatar-me { grid-area: 1 / 1; }
.kz-seat[data-team="1"] .kz-avatar img { border-color: rgba(226, 116, 125, .7); }

/* ---------- Panel: ihale, koz, açmalar ---------- */
.hk-page .kz-panel { width: min(560px, 100%); }
.hk-panel-inner { max-height: 100%; overflow-y: auto; }
.hk-bid-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hk-panel-inner .kz-confirm { min-height: 40px; }
.hk-preview { margin: 0; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); color: var(--p-sage); font-size: 12.5px; text-align: center; }
.hk-melds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hk-meld-seat { min-width: 0; padding: 5px 8px 7px; border-radius: 10px; background: rgba(0, 0, 0, .22); border-left: 3px solid var(--team-a); }
.hk-meld-seat[data-team="1"] { border-left-color: var(--team-b); }
.hk-meld-seat h3 { margin: 0 0 4px; font: 600 13px/1.2 var(--sans); color: var(--p-cream); }
.hk-meld-wait { margin: 0; color: var(--p-sage-dim); font-size: 12.5px; }
.hk-meld-item { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.hk-meld-name { color: var(--p-mustard); font-size: 12px; font-weight: 600; }
.hk-meld-cards { display: flex; flex-wrap: wrap; gap: 2px; }
.hk-mini-card { --cw: 22px; width: 22px; height: 31px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.hk-mini-card .pc-face, .hk-mini-card img { width: 100%; height: 100%; display: block; }

/* ---------- El: 20 kart; açılan kartlar elde kalır, küçük işaretle gösterilir ---------- */
.hk-page .kz-hand .kz-card + .kz-card { margin-left: clamp(calc(var(--cw) * -0.7), calc((100cqw - var(--n) * var(--cw)) / (var(--n) - 1)), 6px); }
.kz-card.is-melded::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--p-mustard);
    box-shadow: 0 0 0 2px rgba(28, 15, 10, .8);
    pointer-events: none;
}

/* ---------- Sonuç ---------- */
.hk-page .pg-result-table tr[data-team="0"] th { color: var(--p-mustard); }
.hk-page .pg-result-table tr[data-team="1"] th { color: #f3aab0; }

@media (max-width: 600px) {
    .hk-phases li { padding: 4px 2px; font-size: 11px; }
    .hk-phases li::before { content: none; }
    .hk-phases li.is-done::before { content: none; }
    .hk-teams { gap: 5px; }
    .hk-team-box { padding: 4px 8px; column-gap: 4px; }
    .hk-team-name { font-size: 12.5px; }
    .hk-team-score { font-size: 19px; }
    .hk-team-sub { white-space: normal; font-size: 11px; }
    .hk-melds { grid-template-columns: 1fr; }
    .hk-bid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* 20 kart dar ekranda üç sıraya dizilir: her kart dokunulacak genişlikte kalır. */
    .hk-page .kz-hand {
        --cw: min(54px, calc((100cqw - 6 * 4px) / 7));
        --ch: calc(var(--cw) * 1.4);
        min-height: calc(var(--ch) * 3 + 12px);
    }
    .hk-page .kz-hand .kz-card + .kz-card { margin-left: 0; }
}