/* ==========================================================================
   game.css — Batak oyun ekranı: 4 koltuk, orta masa (el), el kartları, ihale paneli
   Boyutlar JS (game.js -> layout) tarafından ayarlanır:
     --cwh : el kartlarının genişliği    --cwt : ortadaki el kartlarının genişliği
   ========================================================================== */

#screen-game {
    --cwh: 52px;
    --cwt: 56px;
    color: #fff;
    touch-action: none;
}

/* ---------- Üst çubuk ---------- */
.g-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 4px;
    flex: 0 0 auto;
}
.g-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.36);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    overflow: hidden;
}
.g-info b { color: #fff; }
.dotsep { opacity: 0.4; }
.g-tag {
    padding: 1px 7px;
    border-radius: 6px;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.g-tag.ranked { background: #d97706; }
#screen-game .icon-btn {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
#screen-game .icon-btn.is-off { opacity: 0.55; }

/* ---------- Masa alanı ---------- */
.table-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    z-index: 5;
}

/* ---------- Koltuklar ---------- */
.seat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 8px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.25s;
    min-width: 0;
}
.seat-card.is-turn {
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.9), 0 0 18px rgba(251, 191, 36, 0.4);
}
.seat-card.is-bidder::before {
    content: "👑";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.seat-card.is-auto { opacity: 0.8; }

.s-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 2px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 17px;
}
.seat-card.is-turn .s-avatar { animation: turnPulse 1.2s ease-in-out infinite; }
@keyframes turnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
    50% { box-shadow: 0 0 0 7px rgba(251, 191, 36, 0); }
}
.s-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
}
.s-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s-name { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, 0.75); min-height: 16px; }
.s-chip {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 800;
    white-space: nowrap;
}
.s-chip.bid { background: #f59e0b; color: #2b1b00; }
.s-chip.pass { opacity: 0.6; }
.s-chip .sx { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; }
.s-score { display: flex; flex-direction: column; align-items: center; min-width: 34px; line-height: 1; }
.s-score b { font-size: 22px; font-weight: 900; color: #fde047; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.s-score small { font-size: 9px; opacity: 0.6; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

.turn-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    opacity: 0;
}
.seat-card.is-turn .turn-bar { opacity: 1; }
.turn-bar i { display: block; height: 100%; width: 100%; background: #fbbf24; }

.bubble {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translate(-50%, -100%) scale(0.8);
    padding: 5px 12px;
    border-radius: 14px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}
.bubble.show { animation: bubbleIn 1.7s ease-out forwards; }
@keyframes bubbleIn {
    0% { opacity: 0; transform: translate(-50%, -80%) scale(0.6); }
    12% { opacity: 1; transform: translate(-50%, -100%) scale(1.05); }
    20% { transform: translate(-50%, -100%) scale(1); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(1); }
}

/* Üst koltuk */
.seat-top { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(70%, 260px); }

/* Yan koltuklar: dikey kart */
.seat-left, .seat-right { position: absolute; top: 50%; width: 78px; transform: translateY(-50%); }
.seat-left { left: 6px; }
.seat-right { right: 6px; }
.seat-left .seat-card, .seat-right .seat-card {
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px 9px;
    text-align: center;
}
.seat-left .s-meta, .seat-right .s-meta { align-items: center; width: 100%; }
.seat-left .s-sub, .seat-right .s-sub { justify-content: center; flex-wrap: wrap; }
.seat-left .s-name, .seat-right .s-name { max-width: 70px; font-size: 12px; }
.seat-left .bubble { left: 100%; top: 0; transform: translate(6px, 0) scale(0.8); }
.seat-right .bubble { left: auto; right: 100%; top: 0; transform: translate(-6px, 0) scale(0.8); }
.seat-left .bubble.show, .seat-right .bubble.show { animation-name: bubbleSide; }
.seat-left .bubble.show { --bx: 6px; }
.seat-right .bubble.show { --bx: -6px; }
@keyframes bubbleSide {
    0% { opacity: 0; transform: translate(var(--bx), 0) scale(0.6); }
    12% { opacity: 1; transform: translate(var(--bx), 0) scale(1.05); }
    20% { transform: translate(var(--bx), 0) scale(1); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--bx), -8px) scale(1); }
}

/* Kendi koltuğum */
.seat-me { margin: 2px 10px 4px; flex: 0 0 auto; }
.seat-me .seat-card { padding: 6px 12px 8px; }
.seat-me .bubble { top: -4px; }

/* ---------- Orta: el ---------- */
.trick-area {
    --cw: var(--cwt);
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--cwt) * 2.55);
    height: calc(var(--cwt) * 1.42 * 1.8);
    transform: translate(-50%, -50%);
}
.trick-area .slot {
    position: absolute;
    width: var(--cwt);
    height: calc(var(--cwt) * 1.42);
}
.trick-area .slot-2 { top: 0; left: 50%; margin-left: calc(var(--cwt) / -2); }
.trick-area .slot-0 { bottom: 0; left: 50%; margin-left: calc(var(--cwt) / -2); }
.trick-area .slot-1 { left: 0; top: 50%; margin-top: calc(var(--cwt) * 0.71 * -1); }
.trick-area .slot-3 { right: 0; top: 50%; margin-top: calc(var(--cwt) * 0.71 * -1); }
.trick-area .slot .pcard { position: absolute; left: 0; top: 0; }
.trick-area .slot .pcard.is-winner {
    box-shadow: 0 0 0 0.2em #fbbf24, 0 0 1.2em rgba(251, 191, 36, 0.9);
    z-index: 50;
}

.trump-badge {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.trump-badge .suit-ico { width: 20px; height: 20px; fill: currentColor; }
.trump-badge.red { color: #fca5a5; }
.trump-badge.black { color: #e5e7eb; }

.table-msg {
    position: absolute;
    left: 50%;
    top: 58px;
    transform: translateX(-50%);
    max-width: 80%;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.table-msg.is-on { opacity: 1; }

.emote-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.emote-pop {
    position: absolute;
    font-size: 34px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    animation: emotePop 2s ease-out forwards;
}
@keyframes emotePop {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
    15% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); }
    80% { opacity: 1; transform: translate(-50%, -26px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

/* ---------- Eylem çubuğu (ihale / koz / durum) ---------- */
.action-bar {
    flex: 0 0 auto;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 10px;
    z-index: 25;
}
.action-status {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.action-status b { color: #fde047; }
.action-status button { margin-left: 8px; }

.bid-panel { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; }
.bid-stepper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.bid-stepper button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}
.bid-stepper button:disabled { opacity: 0.3; }
.bid-value { font-size: 26px; font-weight: 900; color: #fde047; min-width: 40px; text-align: center; }
.bid-panel .btn { min-height: 52px; padding: 8px 16px; font-size: 15px; }
.bid-panel .btn-ghost { background: rgba(255, 255, 255, 0.16); }

.trump-panel { display: flex; align-items: center; gap: 8px; }
.trump-panel .lead { font-size: 12px; font-weight: 800; margin-right: 2px; max-width: 70px; line-height: 1.2; }
.trump-btn {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #fdfdfb;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 8px 14px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s;
}
.trump-btn:active { transform: translateY(3px); }
.trump-btn svg { width: 30px; height: 30px; }
.trump-btn.red svg { fill: #d92727; }
.trump-btn.black svg { fill: #1a1a1a; }
.trump-btn.suggested { box-shadow: 0 0 0 3px #38bdf8, 0 8px 14px rgba(0, 0, 0, 0.3); }

/* ---------- Benim elim ---------- */
.hand-row {
    --cw: var(--cwh);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: calc(var(--cwh) * 1.42 + 18px);
    padding-bottom: 6px;
    flex: 0 0 auto;
    z-index: 20;
}
.hand-row .pcard {
    transform-origin: 50% 140%;
    transform: translateY(var(--dy, 0px)) rotate(var(--rot, 0deg));
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.2s, margin 0.2s, box-shadow 0.2s;
    cursor: pointer;
    z-index: var(--z, 1);
}
.hand-row.my-turn .pcard.is-legal { --lift: calc(var(--cwh) * -0.1); transform: translateY(calc(var(--dy, 0px) + var(--lift))) rotate(var(--rot, 0deg)); }
.hand-row .pcard.is-illegal { filter: brightness(0.5) saturate(0.7); }
.hand-row.my-turn .pcard.is-legal.is-selected { --lift: calc(var(--cwh) * -0.4); z-index: 60; }
.hand-row .pcard.is-dragging { transition: none; z-index: 80; }
.hand-row .pcard.is-pending { opacity: 0.35; }

/* Çok kısa ekranlar */
@media (max-height: 640px) {
    .s-avatar { width: 32px; height: 32px; }
    .seat-top { top: 6px; }
}