/* --- LOBBY REDESIGN V2 (Refined Final) --- */

/* BOŞ KOLTUK (+ İKONU MANTIĞI) */
.wait-seat.empty {
    cursor: pointer;
    transition: all 0.3s ease;
}

.wait-seat.empty:hover {
    background: radial-gradient(circle at 30% 30%, #5d4037, #3e2723);
    border-color: #bcaaa4;
    /*transform: scale(1.05);*/
}

.wait-seat.empty::after {
    content: '+';
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    position: absolute;
    transition: all 0.3s ease;
}

.wait-seat.empty:hover::after {
    color: #fff;
    text-shadow: 0 0 10px #fff;
    /*transform: scale(1.2);*/
}

/* DAVET LİSTESİ STİLLERİ */
.invite-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.invite-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.invite-btn {
    background: #2ecc71;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
}

.invite-btn:hover {
    background: #27ae60;
}

/* --- PREMIUM BOARD GAME UI (INVITE SYSTEM) --- */

/* Modal Container (Wood & Gold Theme) */
#invite-player-modal .modal-content,
#invitation-received-modal .modal-content {
    background: linear-gradient(135deg, #3e2723 0%, #251610 100%) !important;
    border: 2px solid #ffb300;
    border-radius: 12px;
    box-shadow:
        0 0 0 4px #5d4037,
        /* Outer Wood Border */
        0 20px 50px rgba(0, 0, 0, 0.9),
        inset 0 0 30px rgba(0, 0, 0, 0.8);
    font-family: 'Cinzel', serif;
    /* Classic Board Game Font */
    color: #fdf5e6;
    /* Parchment Text */
    padding: 0;
    overflow: hidden;
}

/* Modal Header */
.trade-header {
    background: linear-gradient(to bottom, #5d4037, #3e2723) !important;
    border-bottom: 2px solid #ffb300;
    padding: 15px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trade-header h2 {
    color: #ffb300 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: 1px;
}

/* Close Button (Wood Style) */
.close-btn {
    background: #8b0000;
    color: #ffd700;
    border: 1px solid #ff0000;
    font-family: serif;
    font-weight: bold;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* --- PLAYER INVITE LIST (CARDS) --- */
#invite-list-container {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    /* Inner shadow area */
}

.invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 179, 0, 0.2);
    transition: all 0.3s ease;
    cursor: default;
}

.invite-item:hover {
    background: linear-gradient(90deg, rgba(255, 179, 0, 0.15), rgba(255, 179, 0, 0.05));
    border-color: #ffb300;
    transform: translateX(5px);
}

/* Hexagon Avatar */
.invite-item img {
    width: 40px;
    height: 40px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 2px solid #ffb300;
    /* Note: clip-path cuts border, but outlines can be simulated with wrapper if needed. For now simple. */
    background: #1a1a1a;
    margin-right: 15px;
}

.invite-item span {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #fdf5e6;
    flex-grow: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* --- BUTTONS (3D GAME TOKENS) --- */
.invite-btn {
    background: linear-gradient(to bottom, #27ae60, #2ea44f);
    color: white;
    border: none;
    border-bottom: 3px solid #1e7e34;
    padding: 6px 16px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.invite-btn:active {
    border-bottom-width: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Add Bot Button */
button[onclick="requestAddBot()"] {
    background: linear-gradient(to bottom, #d35400, #a04000) !important;
    border: none;
    border-bottom: 4px solid #6e2c00 !important;
    color: #ffccbc !important;
    font-family: 'Cinzel', serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.1s;
}

button[onclick="requestAddBot()"]:active {
    border-bottom-width: 1px !important;
}

/* --- RECEIVED INVITATION MODAL --- */
#invitation-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem !important;
    color: #fdf5e6 !important;
    text-align: center;
    margin: 20px 0;
    line-height: 1.6;
}

/* Accept/Reject Buttons */
.btn-restart {
    /* Reuse class for Accept */
    background: linear-gradient(to bottom, #27ae60, #219150) !important;
    border-bottom: 4px solid #145a32 !important;
    font-family: 'Cinzel', serif !important;
}

.btn-lobby {
    /* Reuse class for Reject */
    background: linear-gradient(to bottom, #c0392b, #a93226) !important;
    border-bottom: 4px solid #7b241c !important;
    font-family: 'Cinzel', serif !important;
}

.btn-restart:active,
.btn-lobby:active {
    transform: translateY(3px);
    border-bottom-width: 1px !important;
}


@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Playfair+Display:ital,wght@0,400;1,700&display=swap');


#wait-msg {
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 15px;
    border-left: 3px solid #f1c40f;
    border-radius: 0 4px 4px 0;
    border-top: none;
    border-bottom: none;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    margin-top: 40px;
}


/* --- KOLTUKLAR (İYİCE YAKLAŞTIRILDI) --- */
.wait-seat {
    position: absolute;
    width: 80px;
    height: 80px;

    /* Koyu, şık butonumsu koltuklar */
    background: radial-gradient(circle at 30% 30%, #4e342e, #271c19);
    border-radius: 50%;
    border: 2px solid #795548;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #d7ccc8;
    z-index: 20;
}

/* Dolu: Parlak Altın Çember */
.wait-seat.taken {
    background: radial-gradient(circle at 50% 50%, #4e4e02, #fdfd83);
    border-color: #fff;
    color: #0b1724;
    box-shadow: 0 0 30px rgba(241, 196, 15, 0.5);
}

.wait-seat img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-bottom: 2px;
    display: none;
}

.p-name {
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 5px;
    border-radius: 3px;
    color: inherit;
    font-weight: bold;
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
}

.p-status {
    position: absolute;
    top: -2px !important;
    right: -2px !important;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.waiting-table-container button {
    background: linear-gradient(to bottom, #5d4037, #3e2723) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
}

.waiting-table-container #btn-leave {
    background: linear-gradient(to bottom, hsl(350, 84%, 27%), hsl(350, 84%, 27%)) !important;
    padding: 12px 30px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
}

@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

    /* 0: HOST (AŞAĞI) */
    .seat-right {
        right: 50px;
    }

    .seat-left {
        left: 50px;
    }
}