html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /* overflow: hidden; <-- BUNU SİL veya YORUMA AL */
    /* touch-action: none; <-- BUNU SİL veya YORUMA AL */
    position: fixed;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: #1a252f;
    /* Daha koyu, mat bir renk (neredeyse siyah) */
    background: radial-gradient(circle, #2c3e50 0%, #000000 100%);
    /* Hafif gölgeli şık arka plan */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    touch-action: manipulation;
}

/* Tüm sitenin seçilebilirliğini kapatır */
body {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Standart (Chrome, Firefox, Opera) */
}

/* Form elemanları ve inputların hala çalışması için şunları hariç tutmalısınız: */
input,
textarea {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#game-screen.active {
    touch-action: none;
    overflow: hidden;
}

#lobby-screen {
    height: 100vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
}

.screen {
    display: none;
    text-align: center;
    width: 100%;
    max-width: 1200px;
}

.active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

h1,
h2 {
    color: #f1c40f;
    margin-bottom: 25px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

input,
select {
    padding: 12px;
    font-size: 1rem;
    border-radius: 5px;
    border: none;
    margin-bottom: 15px;
    width: 80%;
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(to bottom, #e67e22, #d35400);
    border: none;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.2s;
    margin: 5px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.4);
}

button:disabled {
    background: #7f8c8d;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

#room-list {
    display: grid;
    /* Mobilde 1 sütun, PC'de sığdığı kadar yan yana (en az 260px) */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 15px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    /* Padding taşmasını önler */

    /* LİSTE KENDİ İÇİNDE KAYSIN, SAYFAYI UZATMASIN */
    max-height: 55vh;
    /* Ekranın yarısından biraz fazla */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 10px;
    align-content: start;
    /* Az oda varsa yukarı yasla */
}

.list-item {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#game-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
}

#game-container {
    width: 1000px;
    height: 800px;
    background: url('../img/map-back.png') no-repeat center center;
    border-radius: 20px;
    border: 2px solid #34495e;
    position: relative;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    /* Daha güçlü gölge */
    overflow: hidden;
}

#sidebar {
    width: 300px;
    background: rgba(44, 62, 80, 0.95);
    padding: 15px;
    border-radius: 15px;
    height: 770px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

#game-status {
    background: linear-gradient(to right, #f1c40f, #f39c12);
    color: #333;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#pieces-box {
    display: flex;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

#players-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
}

.player-li {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.active-turn {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
}

#action-box {
    margin-top: auto;
    text-align: center;
    padding-top: 10px;
}

#hud-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to bottom, rgba(80, 20, 20, 0.9), rgba(40, 10, 10, 1));
    border-top: 3px solid #8b0000;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.8);
    z-index: 100;
    border-radius: 0 0 15px 15px;
}

#hud-stats {
    display: flex;
    gap: 25px;
    align-items: center;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #f1c40f;
    text-shadow: 2px 2px 0px #000;
}

.hud-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #dba72e;
    background: #2c3e50;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    object-fit: cover;
    transition: transform 0.2s;
}

.highlight-res {
    animation: flashRes 1s ease-in-out;
}

@keyframes flashRes {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.3);
        filter: brightness(2) drop-shadow(0 0 10px gold);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.player-slot {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 80;
    border: 2px solid transparent;
}

.player-slot.active-turn {
    border-color: #f1c40f;
    box-shadow: 0 0 15px #f1c40f;
}

.player-slot img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid white;
}

#p-top {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    /* Yan yana dizilim */
}

/* Yan Oyuncular: DİKEY yerleşim */
#p-left {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    flex-direction: column;
}

#p-right {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    flex-direction: column;
}

#p-bottom {
    display: none !important;
}

/* Mevcut oyuncu kutusunu tamamen gizle */
/* #p-bottom { bottom: 80px; left: 50%; transform: translateX(-50%); }  */
.resource-fly {
    position: absolute;
    width: 70px;
    height: 70px;
    z-index: 200;
    pointer-events: none;
    transition: all 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid #f1c40f;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    object-fit: contain;
    padding: 8px;
}

#robber-piece {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 30px;
    text-align: center;
    line-height: 40px;
    transition: all 1.0s ease-in-out;
    z-index: 150;
    pointer-events: none;
    text-shadow: 0 0 5px black;
    display: none;
}

.anim-dev-card {
    position: absolute;
    width: 100px;
    height: 150px;
    transition: all 1.5s ease-out;
    z-index: 600;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    border: 2px solid #f1c40f;
}

#notification-area {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-msg {
    background: rgba(0, 0, 0, 0.85);
    color: #ecf0f1;
    padding: 15px 25px;
    border-radius: 8px;
    border-left: 5px solid #f1c40f;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
    animation: fadeInOut 4s forwards;
    text-align: center;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

#btn-dev-buy {
    border: none;
    background: none;
    padding: 0;
    background-image: url('../img/get_card.png');
    background-size: cover;
    background-position: center;
    width: 150px;
    height: 100px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    transition: transform 0.2s;
    display: none;
    flex-grow: 0 !important;
}

#btn-dev-buy:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
}

#dev-counter-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: #f1c40f;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid #f1c40f;
}

#dev-card-panel {
    position: absolute;
    bottom: 0px;
    left: 20px;
    display: flex;
    gap: -20px;
    z-index: 50;
    padding-bottom: 10px;
    pointer-events: none;
}

.dev-card {
    width: 100px;
    height: 150px;
    background-color: #ecf0f1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    transform: translateY(40px) rotate(-3deg);
    pointer-events: auto;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.dev-card:hover {
    transform: translateY(-80px) scale(1.15) rotate(0deg);
    z-index: 150;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 0 5px gold);
}

.dev-card.new-card::after {
    content: "YENİ";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #e74c3c;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    box-shadow: 0 2px 5px black;
    z-index: 151;
}

.card-Knight {
    background-image: url('../img/knight.png');
}

.card-VP {
    background-image: url('../img/vp.png');
}

.card-RoadBuilding {
    background-image: url('../img/road_building.png');
}

.card-YearOfPlenty {
    background-image: url('../img/year_of_plenty.png');
}

.card-Monopoly {
    background-image: url('../img/monopoly.png');
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #2c3e50;
    width: 750px;
    border-radius: 15px;
    border: 2px solid #f1c40f;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.trade-header {
    background: #34495e;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: bold;
}

.trade-tabs {
    display: flex;
    background: #22303f;
}

.trade-tabs button {
    flex: 1;
    border: none;
    background: transparent;
    color: #7f8c8d;
    padding: 15px;
    cursor: pointer;
    font-size: 1.1rem;
    border-bottom: 3px solid transparent;
    margin: 0;
}

.trade-tabs button.active-tab {
    color: #f1c40f;
    border-bottom: 3px solid #f1c40f;
    background: rgba(255, 255, 255, 0.05);
}

.trade-body {
    display: flex;
    padding: 20px;
    align-items: flex-start;
    gap: 10px;
    flex-grow: 1;
    justify-content: center;
}

.trade-section {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.trade-arrow {
    font-size: 2rem;
    color: #fff;
    opacity: 0.5;
    align-self: center;
}

.resource-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.res-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 10px;
    border-radius: 50px;
}

.res-control img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #555;
}

.res-control .counter-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-count {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-minus {
    background: #c0392b;
    color: white;
}

.btn-plus {
    background: #27ae60;
    color: white;
}

.count-val {
    font-size: 1.2rem;
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.owned-info {
    font-size: 0.75rem;
    color: #95a5a6;
    margin-left: 10px;
}

.ratio-info {
    font-size: 0.75rem;
    color: #f39c12;
    margin-left: 10px;
    font-weight: bold;
}

.trade-footer {
    padding: 15px;
    text-align: center;
    background: #34495e;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #f1c40f;
    color: #333;
    font-weight: bold;
    font-size: 1.1rem;
}

.status-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.status-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
}

.bg-wait {
    background: #f39c12;
    color: #222;
}

.bg-accept {
    background: #27ae60;
    color: #fff;
}

.bg-reject {
    background: #c0392b;
    color: #fff;
}

#dev-select-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #34495e;
    border: 2px solid #fff;
    padding: 20px;
    z-index: 202;
    display: none;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 10px 30px black;
}

.resource-btn {
    margin: 5px;
    padding: 10px;
    background: #2c3e50;
    border: 1px solid #7f8c8d;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

.resource-btn:hover {
    background: #f1c40f;
    color: black;
}

svg {
    width: 100%;
    height: 100%;
}

.clickable {
    cursor: pointer;
    pointer-events: all;
}

.hex-bg {
    pointer-events: none;
}

.hex-robber-target {
    cursor: pointer;
    stroke: red;
    stroke-width: 4px;
}

.port-line {
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 4, 2;
    opacity: 0.7;
    pointer-events: none;
}

#trade-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #34495e;
    border: 3px solid #f1c40f;
    padding: 25px;
    z-index: 200;
    display: none;
    box-shadow: 0 25px 60px black;
    border-radius: 15px;
    text-align: center;
    min-width: 300px;
}

#steal-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2c3e50;
    border: 3px solid #e74c3c;
    padding: 20px;
    z-index: 201;
    display: none;
    box-shadow: 0 25px 60px black;
    border-radius: 15px;
    text-align: center;
    min-width: 300px;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.shake-dice {
    animation: shake 0.5s;
}

/* 3D ZAR CSS */
#dice-scene {
    width: 100%;
    height: 120px;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 30px;
    perspective: 600px;
    margin-bottom: 10px;
}

.cube {
    width: 50px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 1s ease-out;
}

.face {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 8px;
    box-shadow: inset 0 0 10px #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
}

.face::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}

.front {
    transform: translateZ(25px);
}

.back {
    transform: rotateY(180deg) translateZ(25px);
}

.right {
    transform: rotateY(90deg) translateZ(25px);
}

.left {
    transform: rotateY(-90deg) translateZ(25px);
}

.top {
    transform: rotateX(90deg) translateZ(25px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(25px);
}

.front::after {
    background-image: radial-gradient(circle at center, black 5px, transparent 6px);
}

.back::after {
    background-image: radial-gradient(circle at 12px 12px, black 5px, transparent 6px), radial-gradient(circle at 38px 38px, black 5px, transparent 6px), radial-gradient(circle at 12px 38px, black 5px, transparent 6px), radial-gradient(circle at 38px 12px, black 5px, transparent 6px), radial-gradient(circle at 12px 25px, black 5px, transparent 6px), radial-gradient(circle at 38px 25px, black 5px, transparent 6px);
}

.right::after {
    background-image: radial-gradient(circle at 12px 12px, black 5px, transparent 6px), radial-gradient(circle at 25px 25px, black 5px, transparent 6px), radial-gradient(circle at 38px 38px, black 5px, transparent 6px);
}

.left::after {
    background-image: radial-gradient(circle at 12px 12px, black 5px, transparent 6px), radial-gradient(circle at 38px 38px, black 5px, transparent 6px), radial-gradient(circle at 38px 12px, black 5px, transparent 6px), radial-gradient(circle at 12px 38px, black 5px, transparent 6px);
}

.top::after {
    background-image: radial-gradient(circle at 12px 12px, black 5px, transparent 6px), radial-gradient(circle at 25px 25px, black 5px, transparent 6px), radial-gradient(circle at 38px 38px, black 5px, transparent 6px), radial-gradient(circle at 38px 12px, black 5px, transparent 6px), radial-gradient(circle at 12px 38px, black 5px, transparent 6px);
}

.bottom::after {
    background-image: radial-gradient(circle at 12px 12px, black 5px, transparent 6px), radial-gradient(circle at 38px 38px, black 5px, transparent 6px);
}

.show-1 {
    transform: rotateX(0deg) rotateY(0deg);
}

.show-6 {
    transform: rotateX(0deg) rotateY(180deg);
}

.show-3 {
    transform: rotateX(0deg) rotateY(-90deg);
}

.show-4 {
    transform: rotateX(0deg) rotateY(90deg);
}

.show-5 {
    transform: rotateX(-90deg) rotateY(0deg);
}

.show-2 {
    transform: rotateX(90deg) rotateY(0deg);
}

@keyframes tumble {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: rotateX(360deg) rotateY(180deg);
    }

    50% {
        transform: rotateX(180deg) rotateY(360deg);
    }

    75% {
        transform: rotateX(-180deg) rotateY(-180deg);
    }

    100% {
        transform: rotateX(0deg) rotateY(0deg);
    }
}

.rolling {
    animation: tumble 0.8s linear infinite;
}

#dice-total-display {
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #f1c40f;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px black;
}

/* --- GAME OVER VE HAVAI FİŞEK --- */
#game-over-overlay {
    position: absolute;
    /* fixed yerine absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 5000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    /* Oyun köşeleriyle uyumlu olsun */
}

#fireworks-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#winner-container {
    z-index: 5001;
    text-align: center;
    padding: 50px;
    border-radius: 20px;
    border: 2px solid gold;
    box-shadow: 0 0 50px gold;
    backdrop-filter: blur(10px);
    animation: popIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#winner-name {
    font-size: 4rem;
    color: gold;
    text-shadow: 0 0 10px #e67e22, 0 0 20px #e67e22;
    margin: 10px 0;
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
}

#winner-title {
    font-size: 2rem;
    color: white;
    letter-spacing: 5px;
    text-transform: uppercase;
}

#btn-restart {
    margin-top: 30px;
    font-size: 1.5rem;
    padding: 15px 40px;
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
    cursor: pointer;
    color: white;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s;
}

#btn-restart:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(46, 204, 113, 0.8);
}

#btn-return-lobby {
    margin-top: 30px;
    font-size: 1.5rem;
    padding: 15px 40px;
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
    cursor: pointer;
    color: white;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s;
}

#btn-return-lobby:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(46, 204, 113, 0.8);
}

#restart-status {
    margin-top: 15px;
    color: #bdc3c7;
    font-size: 1rem;
}

/* --- MOBİL / RESPONSIVE AYARLARI --- */

/* 1. Ölçekleyici Kutu */
#game-scaler {
    width: 1120px;
    /* Oyunun orijinal genişliği (800 Map + 300 Sidebar + 20 Gap) */
    height: 750px;
    /* Oyunun orijinal yüksekliği */
    transform-origin: center center;
    /* Ortadan büyüt/küçült */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Telefonu Yan Çevir Uyarısı */
#rotate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2c3e50;
    z-index: 9999;
    display: none;
    /* Varsayılan gizli */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

/* Sadece Mobil cihazlarda ve Dikey (Portrait) modda uyarı göster */
@media only screen and (max-width: 900px) and (orientation: portrait) {
    #rotate-overlay {
        display: flex;
    }

    #game-screen {
        display: none !important;
    }

    .screen {
        display: none !important;
    }

    /* Giriş ekranlarını da gizle */
}

/* --- BEKLEME ODASI (KARE MASA DÜZENİ) --- */
.waiting-table-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* Yeşil masa örtüsü hissi */
    border-radius: 20px;
    /* Ahşap kenar */
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-logo {
    font-size: 3rem;
    opacity: 0.3;
    color: white;
}

/* 4 Kenar Koltukları */
.wait-seat {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    border: 3px solid #7f8c8d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ccc;
}

.wait-seat.taken {
    background: #2c3e50;
    border-color: #f1c40f;
    color: white;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.4);
}

.wait-seat img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.wait-seat .p-name {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
}

.wait-seat .p-status {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1.2rem;
}

/* --- MOBİL LOBİ DÜZENLEMESİ (GÜNCELLENMİŞ/KESİN) --- */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

    /* 1. Lobi Ekranı */
    #lobby-screen {
        padding: 0 !important;
        background: #1a252f !important;
        height: 100vh !important;
        overflow: hidden !important;
        /* Dış kaydırmayı kapat */
    }

    /* 2. Ana Kutu (Container) */
    .lobby-container {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 60px 10px 10px 10px !important;
        /* Üstten boşluk (Çıkış butonu için) */
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        /* Pozisyonlama referansı */
    }

    /* 3. Başlık Alanı (Header) Düzeni */
    .lobby-header {
        display: flex !important;
        flex-direction: column !important;
        /* Alt alta diz */
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .lobby-header h2 {
        font-size: 1.4rem !important;
        margin: 0 0 10px 0 !important;
        text-align: left;
    }

    .lobby-controls {
        display: flex !important;
        width: 100% !important;
        gap: 5px !important;
    }

    #room-name-input {
        flex: 1 !important;
        /* Boşluğu doldur */
        width: auto !important;
        margin: 0 !important;
    }

    .lobby-controls button {
        width: auto !important;
        padding: 10px !important;
        white-space: nowrap;
        margin: 0 !important;
    }

    /* 4. ODA LİSTESİ (2 SÜTUN YAPISI) */
    #room-list {
        display: grid !important;
        /* Burası ÇOK ÖNEMLİ: minmax yerine 1fr 1fr diyerek zorla 2ye bölüyoruz */
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: min-content;
        gap: 8px !important;

        width: 100% !important;
        overflow-y: auto !important;
        /* İçerik kaydırılsın */
        flex-grow: 1 !important;
        /* Ekranın kalanını kapla */
        margin-top: 5px !important;
        padding-bottom: 50px !important;
        align-content: start !important;
        max-height: none !important;
    }

    /* 5. Oda Kartları (Sıkıştırılmış) */
    .room-card {
        padding: 8px !important;
        min-height: 100px;
        /* Kart boyunu küçült */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .room-header {
        padding-bottom: 5px !important;
        margin-bottom: 5px !important;
    }

    .room-name {
        font-size: 0.85rem !important;
    }

    .room-status {
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
    }

    .room-seats {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 5px auto !important;
        transform: scale(0.8);
    }

    .seat {
        width: 14px !important;
        height: 14px !important;
        font-size: 0 !important;
    }

    /* Mini Koltuk Pozisyonları (Lobideki küçük kart için) - SAAT YÖNÜ TERSİ */
    .mini-seat-0 {
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 0: ALT */
    .mini-seat-1 {
        right: -12px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* 1: SAĞ (Eskiden Soldaydı) */
    .mini-seat-2 {
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 2: ÜST */
    .mini-seat-3 {
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* 3: SOL (Eskiden Sağdaydı) */

    .join-btn-card {
        padding: 4px !important;
        font-size: 0.8rem !important;
    }

    /* 6. ÇIKIŞ BUTONU (SAĞ ÜST KÖŞE) */
    #mobile-logout-btn {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;

        width: auto !important;
        margin: 0 !important;
        padding: 8px 15px !important;

        background: #c0392b !important;
        font-size: 0.8rem !important;
        border-radius: 20px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
        z-index: 50 !important;
    }

    /* 1. Bekleme Odası Ana Kapsayıcısı */
    #waiting-screen .lobby-container {
        display: block !important;
        /* Flex yerine Block kullanıyoruz, hizalama kolaylığı için */
        position: relative !important;
        /* Butonları buna göre konumlandıracağız */
        width: 100% !important;
        height: 100vh !important;
        /* Ekranın tamamı */
        padding: 0 !important;
        padding-top: 20px !important;
        /* Üstten biraz boşluk */
        overflow: hidden !important;
        /* Taşmayı engelle */
    }

    /* 2. Başlık ve Bilgi Mesajı (Yukarı Al) */
    #waiting-screen h2 {
        font-size: 1.5rem !important;
        margin: 5px 0 !important;
        text-align: center;
    }

    #waiting-screen #wait-msg {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
        text-align: center;
        display: block;
    }

    /* 3. Masayı Küçült ve Boşluğunu Yok Et */
    .waiting-table-container {
        transform: scale(0.95) !important;
        /* %55 oranına küçült */
        transform-origin: top center !important;
        /* Yukarıdan hizalayarak küçült */

        /* KRİTİK AYARLAR: */
        margin: 0 auto !important;
        /* Ortala */
        margin-top: 10px !important;
        /* Başlık ile arasına az mesafe */

        /* Masanın altında kalan gereksiz boşluğu silmek için yüksekliği zorla kısıyoruz */

        /* Gerekirse negatif margin ile yukarı çek */
        margin-bottom: 0 !important;
    }

    /* Masa üzerindeki logoyu küçült */
    .table-logo {
        font-size: 2rem !important;
    }
}

@media only screen and (max-width: 1024px) {

    /* Mobilde Sidebar fontlarını küçült */
    #sidebar {
        font-size: 0.8rem;
    }

    #pieces-box {
        font-size: 0.9rem;
    }

    button {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    /* Zar sahnesini biraz küçült */
    #dice-scene {
        transform: scale(0.8);
        height: 100px;
    }

    /* Avatar slotlarını küçült */
    .player-slot {
        transform: scale(0.8);
    }
}

/* --- MODAL VE HİZALAMA İYİLEŞTİRMELERİ --- */

/* Mobilde ve Yatay Ekranda (Landscape) Modal Düzeni */
@media only screen and (max-height: 600px),
screen and (max-width: 768px),
only screen and (max-device-width: 768px) {
    .modal-content {
        width: 96% !important;
        /* Genişlik: Ekranın neredeyse tamamı */
        height: 94vh !important;
        /* Yükseklik: Ekranın %94'ü (Sabit) */
        top: 3vh !important;
        /* Biraz üst boşluk */

        display: flex !important;
        flex-direction: column !important;
        /* İçerik dikey dizilsin (Header - Body - Footer) */
        overflow: hidden !important;
        /* Modalın kendisi taşmasın */
    }

    /* 1. Üst Kısım (Başlık ve Sekmeler): Sabit Kalsın */
    .trade-header,
    .trade-tabs {
        flex-shrink: 0;
        /* Küçülmesin */
        padding: 5px 10px;
        /* Biraz yer kazanmak için padding'i kıs */
    }

    .trade-header h2 {
        font-size: 1.2rem;
    }

    /* Başlığı biraz küçült */

    /* 2. Orta Kısım (Verilen/Alınan Listesi): KAYDIRILABİLİR OLSUN */
    .trade-body {
        flex-grow: 1;
        /* Kalan tüm boşluğu doldur */
        overflow-y: auto;
        /* Sadece burası aşağı doğru kaydırılsın (Scroll) */
        padding: 10px;
        align-items: flex-start;
        /* Yan yana düzeni koru */
    }

    /* 3. Alt Kısım (Butonlar): Sabit Kalsın */
    .trade-footer {
        flex-shrink: 0;
        /* Asla küçülmesin, hep en altta görünsün */
        background: #2c3e50;
        /* Arka plan ver ki liste arkasından akmasın */
        border-top: 1px solid #f1c40f;
        padding: 10px;
        z-index: 10;
    }

    /* Mobilde kaynak ikonlarını ve butonları optimize et */
    .res-control {
        padding: 4px;
    }

    .res-control img {
        width: 30px;
        height: 30px;
    }

    .count-val {
        font-size: 1.1rem;
    }

    .btn-count {
        width: 30px;
        height: 30px;
    }
}

/* --- MOBİL İÇİN KOMPAKT MODAL TASARIMI --- */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px),
screen and (max-height: 600px) {

    /* 1. Modal Genel Çerçeve */
    .modal-content {
        width: 98% !important;
        /* Kenar boşluklarını azalt */
        height: 98vh !important;
        /* Ekranı tam doldur */
        top: 1vh !important;
        border-radius: 8px !important;
        padding: 0 !important;
        /* İç boşluğu sıfırla */
    }

    /* 2. Başlık Alanı (Ticaret Pazarı / Hırsız Geldi) */
    .trade-header {
        padding: 5px 10px !important;
        /* Boşluğu çok azalt */
        min-height: 35px !important;
        /* Yüksekliği sabitle */
    }

    .trade-header h2 {
        font-size: 1.0rem !important;
        /* Yazı boyutunu küçült */
        line-height: 1.2 !important;
    }

    .close-btn {
        font-size: 1.2rem !important;
        line-height: 1 !important;
    }

    /* 3. Sekmeler (Oyuncu Takası / Kasa) */
    .trade-tabs button {
        padding: 6px 5px !important;
        /* Buton şişkinliğini al */
        font-size: 0.9rem !important;
        /* Yazıyı küçült */
        height: 35px !important;
        /* Sabit küçük yükseklik */
    }

    /* 4. İçerik Gövdesi (Kaynak Listeleri) */
    .trade-body {
        padding: 5px !important;
        /* Kenar boşluklarını daralt */
        gap: 5px !important;
    }

    /* Kaynak Satırları (Odun, Tuğla vb.) */
    .res-control {
        padding: 2px 5px !important;
        /* Satırları incelt */
        margin-bottom: 2px !important;
        min-height: 35px !important;
    }

    .res-control img {
        width: 24px !important;
        /* İkonları küçült */
        height: 24px !important;
    }

    .res-control span {
        font-size: 0.9rem !important;
        /* Kaynak isimlerini küçült */
    }

    .btn-count {
        width: 28px !important;
        /* Artı/Eksi butonlarını küçült */
        height: 28px !important;
        font-size: 1rem !important;
    }

    .trade-section h3 {
        font-size: 0.9rem !important;
        /* "Veriyorsun" başlıklarını küçült */
        margin: 2px 0 !important;
    }

    /* 5. Alt Kısım (Buton ve Bilgi Mesajı) */
    .trade-footer {
        padding: 5px 10px !important;
        /* Footer şişkinliğini al */
        min-height: 50px !important;
    }

    /* Bilgi Mesajları (Lütfen kaynak seçin / 0/5 Seçildi) */
    #trade-info-msg,
    #discard-status-msg,
    #discard-info {
        font-size: 0.8rem !important;
        margin: 0 0 5px 0 !important;
        /* Alt boşluğu azalt */
        line-height: 1.2 !important;
    }

    /* Ana İşlem Butonu (Teklifi Gönder / Kartları At) */
    .submit-btn {
        padding: 8px !important;
        /* Butonu incelt */
        font-size: 1rem !important;
        /* Yazıyı ideal boyuta getir */
        height: 40px !important;
        /* Yüksekliği sınırla */
        margin-top: 0 !important;
    }

    /* Hırsız Ekranı Özel Düzeltme */
    #discard-modal-overlay .modal-content {
        height: auto !important;
        /* İçeriğe göre uzasın */
        max-height: 95vh !important;
        /* Ekrandan taşmasın */
    }

    #discard-modal-overlay .trade-body {
        overflow-y: auto !important;
        /* Sığmazsa kaydırılsın */
    }
}

/* Alt Bar Sıra Sende Efekti */
.active-turn-hud {
    border-top: 4px solid #f1c40f !important;
    /* Sarı kalın çizgi */
    box-shadow: 0 -5px 30px rgba(241, 196, 15, 0.6) !important;
    /* Sarı ışıma */
    background: linear-gradient(to bottom, rgba(100, 80, 20, 0.95), rgba(40, 10, 10, 1)) !important;
}

/* Harita Altındaki Bilgi Metni */
#game-phase-indicator {
    position: absolute;
    bottom: 85px;
    /* HUD barın hemen üstü */
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: #ecf0f1;
    text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    /* Tıklamaları engellemesin */
    z-index: 95;
    background: rgba(0, 0, 0, 0.3);
    /* Yazının okunması için hafif şerit */
    padding: 5px 0;
    animation: pulseText 2s infinite ease-in-out;
}

/* Yanıp Sönme Animasyonu */
@keyframes pulseText {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
        color: #f1c40f;
        text-shadow: 0 0 15px gold;
    }

    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}


.hex-pop {
    animation: popHex 2.5s ease-in-out;
}

/* Grubun içindeki Polygon (Arkaplan) parlayacak */
.hex-pop polygon {
    stroke: #f1c40f !important;
    stroke-width: 8px !important;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.8));
}

/* Animasyon Tanımı */
@keyframes popHex {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.15);
        z-index: 1000;
    }

    /* Büyüme */
    85% {
        transform: scale(1.15);
        z-index: 1000;
    }

    /* Bekleme */
    100% {
        transform: scale(1);
    }

    /* Küçülme */
}

/* Grupların merkezden büyümesi için gerekli ayar */
.hex-group {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.3s;
}

/* --- SAYAÇ (TIMER) STİLLERİ --- */
#turn-timer {
    position: absolute;
    top: 20px;
    /* Üstten mesafe */
    right: 20px;
    /* Sağdan mesafe - Köşeye yapıştırır */
    width: 65px;
    height: 65px;
    background: rgba(30, 39, 46, 0.9);
    /* Koyu mat arka plan */
    border: 3px solid #f1c40f;
    /* Sarı Çerçeve */
    border-radius: 50%;
    color: #f1c40f;
    font-size: 2.2rem;
    font-family: 'Courier New', monospace;
    /* Dijital saat hissi */
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 400;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    text-shadow: 2px 2px 0 #000;
}

/* Son 10 saniye kalınca devreye giren stil */
.timer-danger {
    background: rgba(192, 57, 43, 0.95) !important;
    /* Canlı Kırmızı */
    border-color: #ffcccc !important;
    /* Açık pembe/beyaz çerçeve */
    color: white !important;
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.8), 0 0 10px white !important;
    /* Çift katmanlı parlama */
    animation: pulseCritical 0.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
    /* Kalp atışı efekti */
}

@keyframes pulseCritical {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 50px rgba(231, 76, 60, 1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- YENİ LOBİ TASARIMI (GRID SİSTEMİ) --- */
#room-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    width: 100%;
    /* İçten kaydırmayı kaldır, sayfa ile kayısın */
    /* overflow-y: auto; SİL */
    /* max-height: 60vh; SİL */
    margin-top: 10px;
}

.room-card {
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.room-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    border-color: #f1c40f;
}

.room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.room-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f1c40f;
}

.room-status {
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: #27ae60;
}

.status-playing {
    background: #c0392b;
}

/* 4 Koltuklu Görsel Düzen (Mini Masa) */
.room-seats {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 10px auto;
    /* Ortalama */
    background: rgba(255, 255, 255, 0.05);
    /* Hafif masa zemini */
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Mini Koltuklar */
.seat {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

.seat.filled {
    background: #3498db;
    border-color: white;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.8);
}

/* Mini Koltuk Pozisyonları (Lobideki küçük kart için) */
.mini-seat-0 {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

/* 0: ALT (Host) */
.mini-seat-1 {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
}

/* 1: SOL */
.mini-seat-2 {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}

/* 2: ÜST (Karşı) */
.mini-seat-3 {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

/* 3: SAĞ */



.join-btn-card {
    width: 100%;
    padding: 10px;
    background: #e67e22;
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.join-btn-card:hover {
    background: #d35400;
}

.join-btn-card:disabled {
    background: #7f8c8d;
    cursor: not-allowed;
}

#btn-ready {
    position: absolute;
    bottom: 1px !important;
    left: 100px !important;
    transform: translateX(-50%);
}

#btn-start {
    position: absolute;
    bottom: 1px !important;
    left: 100px !important;
    transform: translateX(-50%);
}

#btn-leave {
    position: absolute;
    bottom: 1px !important;
    right: -70px !important;
    transform: translateX(-50%);
}

#wait-msg {
    position: absolute;
    top: -5% !important;
    right: -10% !important;
    transform: translateX(-50%);
    font-size: 1.2rem;
    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;
}

/* --- 2. BEKLEME ODASI KOLTUKLARI (YÖN DÜZELTMESİ) --- */
.seat-bottom {
    bottom: -0px;
    left: 50%;
    transform: translateX(-50%);
}

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

/* 1: SAĞ (Akış buraya) */
.seat-top {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* 2: ÜST */
.seat-left {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
}

/* 3: SOL */
/* =========================================
           YENİ MODERN LOBİ TASARIMI (FINAL)
           ========================================= */

/* 1. Lobi Ekranı Genel Yapısı */
#lobby-screen.active {
    background: #1a252f !important;
    height: 100vh !important;
    width: 100vw !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- YENİ TAM EKRAN LOBİ TASARIMI --- */

/* 1. Kapsayıcıyı Tam Ekran Yap */
.lobby-container {
    width: 98% !important;
    /* Ekranın %98'ini kapla */
    height: 95vh !important;
    /* Yüksekliğin %95'ini kapla */
    max-width: none !important;
    /* Genişlik sınırını kaldır (PC için) */
    max-height: none !important;

    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    background: url(../img/lobby-back.png) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    border-radius: 10px;
}

/* 2. Header Satırı: Sol - Orta - Sağ */
.lobby-header-row {
    display: flex;
    justify-content: space-between;
    /* Sol ve Sağ köşelere yasla */
    align-items: center;
    /* Dikeyde ortala */
    flex-wrap: wrap;
    /* Mobilde sığmazsa aşağı kaydır */
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* Sol Taraf (Başlık) */
.header-left {
    flex: 0 0 auto;
    /* Küçülmesin */
}

.header-left h2 {
    margin: 0 !important;
    font-size: 1.5rem;
    color: #f1c40f;
    white-space: nowrap;
}

/* Orta Taraf (Input ve Buton) */
.lobby-controls-wrapper {
    flex: 1;
    /* Ortadaki boşluğu kapla */
    display: flex;
    justify-content: center;
    /* İçindekileri ortala */
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    /* Eski marginleri sıfırla */
}

/* Input ve Buton Stilleri */
#room-name-input {
    width: 250px !important;
    /* PC için ideal genişlik */
    margin: 0 !important;
    text-align: left;
    padding: 10px 15px;
}

.create-room-btn {
    margin: 0 !important;
    padding: 10px 20px;
}

/* Sağ Taraf (Çıkış Butonu) */
.header-right {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

/* --- MOBİL İÇİN DÜZELTMELER --- */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

    /* Mobilde Header Düzeni:
               1. Satır: Başlık (Sol) - Çıkış (Sağ)
               2. Satır: Input ve Buton (Ortada) 
            */

    /* Başlık ve Çıkış butonunu yukarıda tut, Input'u aşağı at */
    .header-left {
        order: 1;
    }

    .header-right {
        order: 2;
    }

    .lobby-controls-wrapper {
        order: 3;
        width: 100%;
        /* Tüm satırı kapla */
        margin-top: 10px !important;
    }

    #room-name-input {
        width: 60% !important;
        /* Mobilde biraz daralt */
        font-size: 0.9rem;
    }

    .create-room-btn {
        width: auto;
        padding: 10px;
    }
}

.lobby-header-row h2 {
    margin: 0 !important;
    color: #f1c40f;
    font-size: 1.5rem;
}

/* Çıkış Butonu Stilleri */
.logout-btn {
    background: #c0392b !important;
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    margin: 0 !important;
}

.mobile-text {
    display: none;
}

/* PC'de ikon gizli */
.desktop-text {
    display: inline;
}

/* PC'de yazı açık */

/* 3. Kontrol Paneli (Input ve Ekle Butonu) */
.lobby-controls-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

#room-name-input {
    flex-grow: 1;
    /* Kalan boşluğu doldur */
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #34495e;
    background: #ecf0f1;
    color: #2c3e50;
    font-weight: bold;
    margin: 0 !important;
    width: auto !important;
    /* Eski stilleri ezmek için */
}

.create-room-btn {
    background: #27ae60 !important;
    color: white;
    padding: 0 20px;
    border-radius: 8px;
    white-space: nowrap;
    /* Yazı alt satıra geçmesin */
    font-weight: bold;
    margin: 0 !important;
}

/* 4. Liste Alanı */
.list-label {
    color: #95a5a6;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
}

#room-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    /* PC: Sığdığı kadar */
    gap: 15px;
    overflow-y: auto;
    /* İçerik taşarsa kaydır */
    padding-right: 5px;
    /* Scrollbar tasarımı */
    scrollbar-width: thin;
    scrollbar-color: #f1c40f #2c3e50;
}

/* 5. Oda Kartları */
.room-card {
    background: #34495e;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
    min-height: 140px;
    /* Kartların boyunu eşitle */
}

.room-card:active {
    transform: scale(0.98);
}

.room-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.room-name {
    font-size: 1.1rem;
    color: #f1c40f;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100px;
}

.join-btn-card {
    width: 100%;
    margin-top: auto;
    /* Butonu en alta it */
    padding: 8px !important;
    font-size: 0.9rem !important;
}

/* =========================================
           MOBİL CİHAZ UYUMLULUĞU (KESİN ÇÖZÜM)
           ========================================= */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

    /* Lobi Kutusunu Ekrana Yay */
    .lobby-container {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding: 15px !important;
    }

    /* Header Düzeni */
    .lobby-header-row {
        margin-bottom: 15px;
    }

    .lobby-header-row h2 {
        font-size: 1.2rem;
    }

    /* Çıkış Butonu (Sadece İkon) */
    .logout-btn {
        padding: 8px 12px;
    }

    .desktop-text {
        display: none;
    }

    .mobile-text {
        display: inline;
        font-size: 1.2rem;
    }

    /* Kontrol Paneli (Oda Kur) */
    .lobby-controls-wrapper {
        gap: 5px;
    }

    #room-name-input {
        font-size: 0.9rem;
        padding: 10px;
    }

    .create-room-btn {
        padding: 0 15px;
        font-size: 0.9rem;
    }

    /* ODA LİSTESİ: İKİ SÜTUN (GRID) */
    #room-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* Mobilde KESİN 2 sütun */
        gap: 10px !important;
        align-content: start;
        /* Kartları yukarı yasla */
    }

    /* Oda Kartlarını Küçült */
    .room-card {
        padding: 10px !important;
        min-height: 120px !important;
    }

    .room-seats {
        transform: scale(0.8);
        margin: 5px auto !important;
    }

    .room-name {
        font-size: 0.9rem !important;
    }

    .join-btn-card {
        padding: 5px !important;
        font-size: 0.8rem !important;
    }
}

/* =========================================
           PROFESYONEL GİRİŞ EKRANI TASARIMI
           ========================================= */

/* =========================================
           TAM EKRAN YAN PANEL (SIDEBAR) TASARIMI
           ========================================= */

/* 1. Giriş Ekranı Kapsayıcısı */
#login-screen.active {
    /* Arka Plan */
    background: url('../img/background.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;

    /* Tam Ekran & Sabitleme */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    z-index: 1000;

    /* Hizalama: SOLA YASLI */
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    /* En sola yasla */
    align-items: stretch !important;
    /* Yukarıdan aşağıya gersin */

    padding: 0 !important;
    /* Kenar boşluklarını sıfırla */
    box-sizing: border-box;
}

/* 2. Giriş Kartı (Artık Yan Panel) */
.login-card {
    /* Boyutlandırma: Tam Boy, Sabit Genişlik */
    height: 100vh !important;
    width: 480px !important;
    /* PC için geniş ve rahat */
    max-width: 100vw !important;

    /* Konumlandırma */
    margin: 0 !important;
    margin-left: 200px !important;
    border-radius: 0 30px 30px 0;
    /* Sadece sağ tarafa kavis ver (Modern Görünüm) */

    /* Görünüm */
    background: rgba(26, 37, 47, 0.95);
    /* Koyu ve şık zemin */
    backdrop-filter: blur(15px);
    /* Arkası bulanık görünsün */
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.8);
    /* Sağa doğru gölge at */
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Sağ kenara ince çizgi */

    /* İçerik Ortalama */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* İçindekileri dikey ortala */
    padding: 40px;
    box-sizing: border-box;

    /* Animasyon */
    transform: translateX(0);
    transition: width 0.3s ease;
}

/* Hover Efekti: Kartın üzerine gelince titremesin */
.login-card:hover {
    transform: none;
}

/* 3. MOBİL UYUMLULUK (Daha Dar Panel) */
/* 3. MOBİL UYUMLULUK (Daha Dar ve Zarif Panel) */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

    #login-screen.active {
        /* Mobilde arka plan resmini ortala */
        background-position: center center;
    }

    .login-card {
        /* Mobilde genişliği İYİCE DARALT (Eski: 320px -> Yeni: 260px) */
        width: 260px !important;
        min-width: 260px !important;
        /* Daha fazla küçülmesin */

        padding: 20px !important;
        /* İç boşluğu biraz azalttık */
        border-radius: 0 20px 20px 0;
        margin-left: 50px !important;
    }

    /* Daralan alana sığması için yazı boyutlarını küçült */
    .login-header h1 {
        font-size: 1.6rem !important;
    }

    .login-header p {
        font-size: 0.85rem !important;
    }

    /* Input ve Butonları küçült */
    #username {
        font-size: 0.9rem !important;
        padding: 10px !important;
    }

    .login-btn {
        padding: 10px !important;
        font-size: 0.9rem !important;
        white-space: nowrap;
        /* Yazı alt satıra kaymasın */
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* --- SAVAŞ TEMALI GİRİŞ KARTI --- */

/* Giriş Kartı (Kutu) */
.login-card {
    /* Daha şeffaf ve koyu (Transparan) Arka Plan */
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(20, 30, 40, 0.4));
    backdrop-filter: blur(3px);
    /* Arkası buzlu cam gibi görünsün */

    /* Çerçeve ve Gölge */
    border: 2px solid rgba(74, 59, 42, 0.8);
    border-top: 2px solid rgba(241, 196, 15, 0.8);
    border-bottom: 2px solid rgba(192, 57, 43, 0.8);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
    /* Derinlik katan gölge */

    border-radius: 15px;
    text-align: center;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 50px 30px;

    /* Yan panel ayarlarını koruyoruz 
            height: 100vh !important;
            width: 480px !important;
            margin-left: 200px !important;
            display: flex;
            flex-direction: column;
            justify-content: center;*/
}

.login-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 80px rgba(192, 57, 43, 0.2);
    /* Hafif kırmızı ışıma */
}

/* Başlık Alanı - DESTANSI YAZI */
.login-header h1 {
    margin: 0;
    font-family: 'Cinzel', serif;
    /* Yeni Savaş Fontu */
    font-weight: 900;
    font-size: 3rem;
    /* Daha büyük */

    /* METALİK ALTIN EFEKTİ (Text Gradient) */
    background: linear-gradient(to bottom, #fffbcc 0%, #f1c40f 40%, #bf953f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Yazı etrafına siyah gölge atarak okunaklılığı artır */
    filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 1));

    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Alt Başlık */
.login-header p {
    color: #bdc3c7;
    font-family: 'Cinzel', serif;
    margin-top: 10px;
    font-size: 1rem;
    letter-spacing: 1px;
    border-top: 1px solid rgba(241, 196, 15, 0.3);
    /* İnce çizgi */
    display: inline-block;
    padding-top: 10px;
}

#username {
    /* Genişliği daralt ve ortala */
    width: 80% !important;
    max-width: 350px;
    /* Çok geniş ekranlarda dev gibi olmasın */
    display: block;
    margin: 0 auto;
    /* Yatayda tam ortalar */

    padding: 15px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 1.2rem;

    /* Input Arka Planı */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #555;
    border-left: 4px solid #c0392b;
    border-radius: 4px;
    color: #f1c40f;
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    /* Taşmayı kesin engeller */
}

#username::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Segoe UI', sans-serif;
    /* Placeholder normal kalsın okunması için */
    font-size: 1rem;
}

#username:focus {
    border-color: #f1c40f;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.2);
    background: rgba(0, 0, 0, 0.8);
}

/* Giriş Butonu - SAVAŞ BUTONU */
.login-btn {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: bold;

    /* Kırmızıdan koyu kırmızıya geçiş (Savaş Rengi) */
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
    border: 1px solid #922b21;
    border-top: 1px solid #ff7b7b;
    /* Üst parıltı */

    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 2px black;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.login-btn:hover {
    transform: scale(1.02);
    background: linear-gradient(to bottom, #f1c40f, #f39c12);
    /* Üzerine gelince ALTIN olsun */
    color: black;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
    text-shadow: none;
    border-color: #fff;
}

.login-btn:active {
    transform: scale(0.98);
}

/* Footer */
.login-footer {
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
}


/* =========================================
           LOBİ BUTON YÜKSEKLİK EŞİTLEME DÜZELTMESİ
           ========================================= */
/* Bu kısım, lobideki "Oda Adı Inputu", "Oluştur Butonu" ve "Çıkış Butonu"nun
           yüksekliklerini zorla eşitler (hepsini 42px yapar).
        */
.lobby-header-row #room-name-input,
.lobby-header-row .create-room-btn,
.lobby-header-row .logout-btn {
    height: 45px !important;
    /* Hepsini 45px yap */
    min-height: 45px !important;
    /* Küçülmelerini engelle */
    max-height: 45px !important;

    line-height: 45px !important;
    /* Yazıyı dikeyde ortala (tek satır için) */
    padding: 0 20px !important;
    /* Yanlardan boşluk */
    margin: 0 !important;

    display: inline-flex !important;
    /* Flex ile içerik hizala */
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    /* Çerçeveyi boyuta dahil et */
    font-size: 1rem !important;
    /* Yazı boyutunu eşitle */
    border-radius: 8px !important;
}

/* Mobilde Çıkış butonu sadece ikon olduğu için kare olabilir, onu düzeltelim */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {
    .lobby-header-row .logout-btn {
        padding: 0 15px !important;
        /* Mobilde biraz daha dar olabilir */
    }
}

/* Input için özel ayar (yazı ortalansın) */
.lobby-header-row #room-name-input {
    padding: 0 15px !important;
}

/* --- MOBİL BEKLEME ODASI VE BUTON DÜZELTMESİ (SON VE KESİN KOD) --- */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

    /* 1. Bekleme Odası Genel Yapısı */
    #waiting-screen .lobby-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        /* İçeriği yukarıdan başlat */
        align-items: center !important;
        /*padding-top: 40px !important;  Başlık için üst boşluk */
        height: 100vh !important;
        /* Tüm ekran */
        overflow: hidden !important;
        /* Kaydırmayı engelle */
        position: relative !important;
    }

    /* 2. Başlık ve Bilgi Mesajı */
    #waiting-screen h2 {
        font-size: 1.6rem !important;
        margin: 0 0 10px 0 !important;
        flex-shrink: 0;
        /* Asla küçülmesin */
    }

    #waiting-screen #wait-msg {
        margin-bottom: 20px !important;
        margin-top: 0px;
        flex-shrink: 0;
    }


}

/* --- CUSTOM MODAL (UYARI KUTUSU) MOBİL DÜZELTMESİ --- */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {
    #custom-modal .modal-content {
        /* Diğer modalların tam ekran yapma özelliğini iptal et */
        height: auto !important;
        min-height: unset !important;

        /* Genişliği ekrana sığdır (400px taşar, yüzde veriyoruz) */
        width: 85% !important;
        max-width: 350px !important;

        /* Kesin Ortalama (Absolute Centering) */
        position: fixed !important;
        /* Ekrana çivile */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        /* Dış boşlukları sıfırla */

        /* Görünüm Düzeltmeleri */
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* Taşmayı engelle */
    }

    /* İçerik yazılarını düzelt */
    #custom-modal .trade-body {
        padding: 20px 15px !important;
        overflow-y: visible !important;
        /* Kaydırma çubuğunu gizle */
        text-align: center;
    }

    #custom-modal .trade-footer {
        padding: 15px !important;
        background: #2c3e50 !important;
    }
}

/* --- SADECE SIDEBAR GÖRÜNÜM İYİLEŞTİRMESİ (AHŞAP TEMA) --- */

/* 1. Sidebar Ana Kutusu: Koyu Ahşap Zemin */
#sidebar {
    /* Arka plan: Masa görseliyle uyumlu koyu kahve/maun gradient */
    background: linear-gradient(180deg, #2b1d16 0%, #1a100b 100%) !important;

    /* Çerçeve: Altın/Bronz metalik çerçeve hissi */
    border: 2px solid #5d4037 !important;
    outline: 1px solid #d4af37;
    /* İnce altın dış hat */
    outline-offset: -5px;
    /* İçeriye doğru çizgi */

    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(0, 0, 0, 0.5) !important;
    color: #ecf0f1;
    padding: 15px !important;
}

/* 2. En Üstteki Oyun Durumu Barı */
#game-status {
    /* Daha net ve parlak bir şerit */
    background: linear-gradient(to right, #b7950b, #f1c40f, #b7950b) !important;
    color: #2c3e50 !important;
    font-family: 'Cinzel', serif !important;
    /* Varsa epik font */
    font-weight: 800 !important;
    text-transform: uppercase;
    border: 1px solid #7f6000 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    text-shadow: none !important;
    letter-spacing: 1px;
}

/* 3. İstatistik Kutusu (Yol, Köy, Şehir ikonlarının olduğu yer) */
#pieces-box {
    /* Ahşaba oyulmuş gibi içe göçük (inset) görünüm */
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: 2px solid rgba(0, 0, 0, 0.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 15px !important;
    padding: 12px 5px !important;
}

/* İstatistik yazılarını parlat */
#pieces-box span {
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    color: #bdc3c7;
    text-shadow: 1px 1px 2px black;
}

/* 4. "Oyuncular" Başlığı */
#sidebar h4 {
    color: #d4af37 !important;
    /* Altın rengi */
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase;
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
    /* İnce altın çizgi */
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
    text-align: center;
    letter-spacing: 2px;
}

/* 5. Oyuncu Listesi Alanı */
#players-ul {
    background: transparent !important;
    /* Arka planı kaldır, ahşap görünsün */
    border: none !important;
    padding: 0 !important;
}

/* 6. Oyuncu Satırları */
.player-li {
    /* Her satır için hafif koyu şerit */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 10px 5px !important;
    margin-bottom: 2px !important;
    border-radius: 4px;
}

/* Sıra Bendeyse (Aktif Oyuncu) */
.active-turn {
    /* Parlak ama şeffaf seçim */
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.15) 0%, rgba(0, 0, 0, 0) 100%) !important;
    border-left: 3px solid #f1c40f !important;
    /* Sol tarafa sarı çubuk */
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.05) !important;
}

/* 7. Zar Alanı (Dice Scene) */
#dice-scene {
    background: rgba(0, 0, 0, 0.25) !important;
    /* Hafif karartma */
    border: 1px solid rgba(139, 69, 19, 0.3) !important;
    /* Çok hafif kahve çerçeve */
    border-radius: 8px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

/* 8. Aksiyon Kutusu (Butonların olduğu alt kısım) */
#action-box {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 15px !important;
    margin-top: auto !important;
}

/* 9. Sidebar İçindeki Standart Butonlar (Roll, End Turn vb.) için Ufak Makyaj 
        (Resimli butonlara dokunmadan, sadece renkli butonları ortama uydurur) */
#sidebar button:not(#btn-dev-buy) {
    font-family: 'Cinzel', serif !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
    /* Hafif gölge */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* İnce parlak kenar */
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5) !important;
}

/* Çıkış butonu (En üstteki) daha sönük dursun */
#sidebar button[onclick="exitToLobby()"] {
    background: rgba(192, 57, 43, 0.2) !important;
    border: 1px solid rgba(192, 57, 43, 0.5) !important;
    color: #e6b0aa !important;
}

#sidebar button[onclick="exitToLobby()"]:hover {
    background: rgba(192, 57, 43, 0.8) !important;
    color: white !important;
}

/* ===============================================
           MOBİL MODAL DÜZELTMESİ (TRADE & DISCARD)
           Ekranı Tam Kaplayan & Düzgün Hizalanmış Versiyon
           =============================================== */
@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

    /* 1. Dış Katman (Overlay) Ayarları */
    #trade-modal-overlay,
    #discard-modal-overlay {
        display: none;
        /* JS açtığında flex olur, burada varsayılanı koru */
        align-items: flex-end !important;
        /* Klavye açılırsa yukarı itmesi için */
        justify-content: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        /* Arka plan kaymasın */
        z-index: 9999 !important;
    }

    /* JS ile display:flex yapıldığında düzgün çalışması için */
    #trade-modal-overlay[style*="display: flex"],
    #discard-modal-overlay[style*="display: flex"] {
        display: flex !important;
    }

    /* 2. İç Kutu (Modal Content) - TAM EKRAN */
    #trade-modal-overlay .modal-content,
    #discard-modal-overlay .modal-content {
        /* Tüm inline stilleri ve önceki CSS'leri ez */
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;

        /* Pozisyonu Sıfırla */
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;

        /* Kenarlıkları Kaldır (Tam ekran olduğu için) */
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;

        /* İçerik Düzeni (Header - Body - Footer) */
        display: flex !important;
        flex-direction: column !important;
        background: #2c3e50 !important;
    }
}

/* --- YENİ CATAN LOBİ TASARIMI --- */

/* 1. Lobi Arka Planı (Deniz ve Harita Manzarası) */
#lobby-screen.active {
    /* Buraya 2. görseldeki gibi bir Catan harita resmi koymalısın. Örnek bir link koyuyorum: */
    background: url('../img/lobby-back.png') no-repeat center center !important;
    background-size: cover !important;
    height: 100vh !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    font-family: 'Cinzel', serif !important;
    /* Catan Fontu */
}

/* 2. Üst Ahşap Bar (Header) */
.lobby-header-bar {
    width: 100%;
    height: 90px;
    background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'), linear-gradient(to bottom, #5D4037, #3E2723);
    border-bottom: 4px solid #DAA520;
    /* Altın Çizgi */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    box-sizing: border-box;
    z-index: 10;
    position: relative;
}

/* Sol Taraf: Başlık */
.lobby-title {
    font-size: 2.2rem;
    color: #FFD700;
    /* Altın Sarısı */
    text-shadow: 2px 2px 0px #000, 0 0 10px #DAA520;
    font-weight: 900;
    letter-spacing: 2px;
}

/* Orta Taraf: Parşömen Input Alanı */
.scroll-input-wrapper {
    position: relative;
    width: 400px;
    height: 55px;
    background: #F3E5AB;
    /* Parşömen Rengi */
    border-radius: 4px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid #D7C496;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Kenar kıvrım efektleri (pseudo element ile yapılabilir ama basit tutuyoruz) */
}

/* Parşömen Kenar Süsleri (Görseldeki kıvrımlar için) */
.scroll-input-wrapper::before,
.scroll-input-wrapper::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0;
    background: linear-gradient(to right, #C2B280, #F3E5AB);
    border-radius: 5px;
}

.scroll-input-wrapper::before {
    left: -10px;
    border-right: 1px solid #8B7E66;
    transform: skewY(10deg);
}

.scroll-input-wrapper::after {
    right: -10px;
    border-left: 1px solid #8B7E66;
    transform: skewY(-10deg);
}

#room-name-input {
    background: transparent !important;
    border: none !important;
    width: 90% !important;
    height: 100% !important;
    font-family: 'MedievalSharp', cursive !important;
    font-size: 1.2rem !important;
    color: #3E2723 !important;
    /* Koyu Kahve Yazı */
    text-align: center !important;
    font-weight: bold !important;
    outline: none !important;
    margin: 0 !important;
}

#room-name-input::placeholder {
    color: rgba(62, 39, 35, 0.5);
}

/* Sağ Taraf: Kalkan Butonlar */
.header-actions {
    display: flex;
    gap: 15px;
}

.catan-btn {
    background: linear-gradient(to bottom, #8B4513, #4E342E);
    border: 2px solid #DAA520;
    /* Altın Çerçeve */
    color: #FFD700;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    padding: 10px 25px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #2e1e1a, 0 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 15px 15px;
    /* Kalkan şekli (altı yuvarlak) */
    text-transform: uppercase;
    transition: transform 0.1s;
    position: relative;
    overflow: hidden;
}

.catan-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #2e1e1a, inset 0 0 10px black;
}

.catan-btn:hover {
    filter: brightness(1.2);
}

/* Kalkan İkonu Efekti */
.catan-btn::before {
    content: '🛡️';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.1;
    font-size: 2.5rem;
}

/* 3. Ana Alan (Masa Listesi Çerçevesi) */
.lobby-main-frame {
    margin-top: 40px;
    width: 80%;
    max-width: 1200px;
    height: 70vh;
    background: rgba(130, 90, 60, 0.5);
    border: 8px solid #5D4037;
    /* Kalın Ahşap Çerçeve */
    border-radius: 10px;
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.9),
        /* İç gölge */
        0 20px 50px rgba(0, 0, 0, 0.8),
        /* Dış gölge */
        0 0 0 2px #DAA520;
    /* Dış ince altın çizgi */
    padding: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Çerçeve Köşe Süsleri (Altın Vida Görünümü) */
.lobby-main-frame::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(218, 165, 32, 0.3);
    pointer-events: none;
}

/* Oda Listesi Başlığı */
.list-label {
    color: #F3E5AB;
    font-size: 1.2rem;
    border-bottom: 2px solid rgba(243, 229, 171, 0.3);
    padding-bottom: 10px;
    margin-bottom: 15px;
    width: 100%;
}

/* Oda Listesi Grid Yapısı */
#room-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    overflow-y: auto;
    padding: 10px;
    /* Scrollbar Tasarımı */
    scrollbar-width: thin;
    scrollbar-color: #DAA520 #3E2723;
}

/* Oda Kartı Tasarımı (Mini Masa) */
.room-card {
    background: linear-gradient(145deg, #3E2723, #281A16);
    border: 2px solid #8D6E63;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}

.room-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #DAA520;
    box-shadow: 0 0 15px rgba(218, 165, 32, 0.4);
}

.room-name {
    color: #F3E5AB;
    font-family: 'MedievalSharp', cursive;
    font-size: 1.4rem;
}

.room-status {
    background: #27ae60;
    border: 1px solid white;
    box-shadow: 0 0 5px rgba(39, 174, 96, 0.8);
}

.join-btn-card {
    background: #DAA520 !important;
    color: #3E2723 !important;
    border: 1px solid #5D4037 !important;
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase;
}

.join-btn-card:hover {
    background: #FFD700 !important;
    box-shadow: 0 0 10px #FFD700;
}

/* --- MOBİL UYUMLULUK --- */
@media only screen and (max-width: 768px) {
    .lobby-header-bar {
        height: auto;
        flex-direction: column;
        padding: 15px;
        gap: 10px;
    }

    .scroll-input-wrapper {
        width: 100%;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .catan-btn {
        flex: 1;
        font-size: 0.8rem;
        padding: 10px;
    }

    .lobby-main-frame {
        width: 95%;
        height: 65vh;
        margin-top: 10px;
    }
}

/* =========================================
   CUSTOM MODAL: RPG AHŞAP TEMA TASARIMI
   (Referans Görsele Göre Yeniden Dizayn)
   ========================================= */

/* 1. Ana Kutu (Ahşap Zemin ve Çerçeve) */
#custom-modal .modal-content {
    /* Mevcut boyut/konum ayarlarını koruyoruz, sadece görseli değiştiriyoruz */

    /* Koyu Ahşap Dokusu (CSS Gradient) */
    background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('https://www.transparenttextures.com/patterns/wood-pattern.png'),
        linear-gradient(to bottom, #4e342e, #3e2723) !important;

    /* Altın ve Metalik Çerçeve Efekti */
    border: 4px solid #b8860b !important;
    /* Koyu Altın */
    outline: 2px solid #1a100b;
    /* Dış Siyah Kontür */
    box-shadow:
        inset 0 0 30px #000,
        /* İç derinlik gölgesi */
        0 0 0 2px #d4af37,
        /* Dış ince altın çizgi */
        0 20px 50px rgba(0, 0, 0, 0.8) !important;
    /* Dış gölge */

    border-radius: 15px !important;
    position: relative;
}

/* Köşelerdeki Vidalar/Süsler (Pseudo-element) */
#custom-modal .modal-content::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    /* İnce iç çerçeve */
    border-radius: 10px;
    pointer-events: none;
}

/* 2. Başlık Alanı (Arka planı şeffaf yapıp yazıyı parlatıyoruz) */
#custom-modal .trade-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(184, 134, 11, 0.4) !important;
    padding-bottom: 15px !important;
    margin-bottom: 10px;
}

#custom-modal #c-modal-title {
    font-family: 'Cinzel', serif !important;
    /* Varsa savaş fontu */
    font-size: 1.8rem !important;
    color: #ffd700 !important;
    /* Parlak Altın */
    text-transform: uppercase;
    text-shadow: 2px 2px 0px #000, 0 0 15px rgba(255, 215, 0, 0.5) !important;
    letter-spacing: 2px;
}

/* 3. İçerik Metni */
#custom-modal .trade-body {
    background: transparent !important;
    color: #f0e6d2 !important;
    /* Parşömen beyazı */
    font-family: 'Segoe UI', serif !important;
    font-size: 1.1rem !important;
    text-shadow: 1px 1px 2px #000;
}

/* 4. Alt Buton Alanı */
#custom-modal .trade-footer {
    background: transparent !important;
    border: none !important;
    gap: 20px !important;
    /* Butonlar arası boşluğu aç */
    padding-top: 5px !important;
}

/* 5. Buton Tasarımları (Ahşap ve Kumaş Görünümlü) */
#custom-modal button {
    font-family: 'Cinzel', serif !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 1rem !important;
    border-radius: 8px !important;
    padding: 12px 30px !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
    transition: transform 0.1s !important;
    border: 2px solid #b8860b !important;
    /* Altın Çerçeve */
}

#custom-modal button:active {
    transform: translateY(2px);
}

/* İPTAL BUTONU (Ahşap/Kahverengi - Görseldeki Sol Buton) */
#btn-c-cancel {
    background: linear-gradient(to bottom, #5d4037, #3e2723) !important;
    color: #d7ccc8 !important;
    text-shadow: 1px 1px 0 #000;
}

#btn-c-cancel:hover {
    filter: brightness(1.2);
}

/* TAMAM/EVET BUTONU (Kırmızı/Bordo - Görseldeki Sağ Buton) */
#btn-c-ok {
    background: linear-gradient(to bottom, #c0392b, #8b0000) !important;
    color: #ffd700 !important;
    /* Altın sarısı yazı */
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 0 15px rgba(192, 57, 43, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
}

#btn-c-ok:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 25px rgba(192, 57, 43, 0.6) !important;
}

/* --- PREMIUM GAME OVER MODAL (FINAL POLISH) --- */

#fireworks-canvas {
    display: none !important;
}

#game-container {
    position: relative !important;
}

#game-over-overlay {
    display: none;
    position: absolute;
    top: 2%;
    left: 0;
    width: 100%;
    height: 90%;
    background: transparent;
    z-index: 2000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: none;
    /* Arka plan tıklanamaz olsun */
}

.premium-modal {
    pointer-events: auto;
    /* Modal tıklanabilir olsun */
    /* Derin Ahşap Arka Plan */
    background: url('../img/wood_texture.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;

    /* İnce Zarif Altın Çerçeve (Resimdeki gibi) */
    border: 2px solid #cfb53b;
    outline: 1px solid #000;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.9),
        /* İç gölge (Vignette) */
        0 0 0 4px #2b1b17,
        /* Dış koyu çerçeve */
        0 0 0 6px #cfb53b,
        /* İkinci ince altın çizgi */
        0 20px 50px rgba(0, 0, 0, 1);
    /* Derinlik gölgesi */

    border-radius: 4px;
    /* Keskin ama hafif yumuşak köşeler */
    padding: 40px;
    width: 60%;
    max-width: 750px;
    text-align: center;
    position: relative;
    color: #f5f5dc;
    font-family: 'Times New Roman', serif;
}

/* Dekoratif Köşe Süsleri (CSS ile basit simülasyon) */
.premium-modal::before,
.premium-modal::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #cfb53b;
    transition: all 0.3s;
}

.premium-modal::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.premium-modal::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

@media (min-width: 768px) {
    .premium-modal {
        width: 700px;
    }
}

.premium-header {
    font-size: 2rem;
    color: #ffecb3;
    /* Açık Altın */
    font-weight: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid rgba(207, 181, 59, 0.3);
    padding-bottom: 15px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    /* Çizgi derinliği */
}

.premium-header::before,
.premium-header::after {
    content: '🏆';
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

.premium-winner-name {
    font-size: 3.5rem;
    color: #fff8e1;
    font-weight: bold;
    margin: 25px 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 1);
    font-family: 'Georgia', serif;
}

.premium-score-table-container {
    background: rgba(20, 10, 5, 0.6);
    /* Yarı saydam koyu zemin */
    border: 1px solid rgba(207, 181, 59, 0.2);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 30px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

#game-over-score-table {
    width: 100%;
    border-collapse: collapse;
    color: #d7ccc8;
    font-size: 1rem;
}

#game-over-score-table th {
    border-bottom: 1px solid #8d6e63;
    color: #ffecb3;
    padding: 10px;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

#game-over-score-table td {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Tablo hizalamaları */
#game-over-score-table th,
#game-over-score-table td {
    text-align: center;
}

#game-over-score-table th:first-child,
#game-over-score-table td:first-child {
    text-align: left;
    padding-left: 15px;
}

.premium-actions {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(207, 181, 59, 0.3);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Genel Buton Yapısı */
.premium-btn {
    position: relative !important;
    padding: 12px 30px !important;
    /* Biraz daha dar dikey padding */
    font-size: 1.1rem !important;
    font-family: 'Times New Roman', serif !important;
    font-weight: bold !important;
    text-transform: capitalize !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    color: #fceeb5 !important;
    /* Tam beyaz değil, açık altın/krem rengi */

    /* Şekil ve Kenarlar */
    border-radius: 3px !important;
    /* Köşeler resimde çok az yuvarlatılmış */
    border: 1px solid #7a6021 !important;
    /* İçteki ince koyu altın çizgi */

    /* Metalik Çerçeve Efekti (Sihir burada) */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        /* İç üst parıltı */
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        /* İç alt gölge */
        0 0 0 2px #0c0c0c,
        /* Aradaki siyah boşluk */
        0 0 0 4px #cfb53b,
        /* Dış Altın Çerçeve */
        0 6px 8px rgba(0, 0, 0, 0.7) !important;
    /* En dış gölge (zemin) */

    transition: all 0.1s ease-in-out !important;
    text-shadow: 2px 2px 0 #000000 !important;
    /* Yazının arkasındaki sert siyah gölge */
    min-width: 160px !important;
}

/* Tıklama Efekti */
.premium-btn:active {
    transform: translateY(3px) !important;
    box-shadow:
        inset 0 2px 10px rgba(0, 0, 0, 0.8),
        0 0 0 2px #0c0c0c,
        0 0 0 4px #a08c2c,
        /* Basınca çerçeve biraz kararır */
        0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Tekrar Oyna (Yeşil Buton) */
.btn-restart {
    /* Daha derin ve dokulu bir yeşil geçiş */
    background: linear-gradient(to bottom, #2f4d2a 0%, #1e351e 50%, #112011 100%) !important;
}

.btn-restart:hover {
    /* Hover olunca hafif parlama */
    background: linear-gradient(to bottom, #3d6336 0%, #254225 100%) !important;
    color: #fff !important;
}

/* Lobiden Çık (Kahve Buton) */
.btn-lobby {
    /* Resimdeki gibi çok koyu maun/kahve tonları */
    background: linear-gradient(to bottom, #4a2c25 0%, #301814 50%, #1a0a08 100%) !important;
}

.btn-lobby:hover {
    background: linear-gradient(to bottom, #5e382f 0%, #3e1f1a 100%) !important;
    color: #fff !important;
}

.premium-status-text {
    margin-top: 20px;
    font-style: italic;
    color: #8d6e63;
    font-size: 0.95rem;
}

@media (min-width: 992px) {

    /* Doğrudan Grid'i hedefliyoruz */
    #emoji-grid {
        /* 4. Taşanları gizleme, kaydırılabilir yap */
        overflow-x: auto;

        /* Görsellik */
        padding-bottom: 10px;
        /* Scroll bar için yer */
        width: 100%;
    }
}

/* --- İSTATİSTİK MODALI PREMIUM REDESIGN --- */
#stats-modal-overlay .modal-content {
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
    border: 3px solid #f1c40f;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    min-height: auto;
    display: flex;
    flex-direction: column;
}

#stats-chart-container {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    width: 100%;
    height: 300px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding-top: 20px;
    overflow: hidden;
    /* Taşmayı engelle */
}

/* Kapsayıcı (Wrapper) */
.stat-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 7%;
    /* Hafif daralt */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Sayı Etiketi */
.stat-count {
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px black;
}

/* Bar */
.stat-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    transition: height 0.5s ease-out;
    min-height: 2px;
}

.stat-bar.bar-normal {
    background: linear-gradient(to top, #f1c40f, #f39c12);
}

.stat-bar.bar-robber {
    background: linear-gradient(to top, #c0392b, #e74c3c);
}

#stats-labels {
    display: flex;
    justify-content: space-evenly;
    /* Space around yerine evenly */
    width: 100%;
    margin-top: -5px;
}

#stats-labels span {
    width: 7%;
    text-align: center;
    font-size: 1rem;
    color: #f1c40f;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

/* MOBİL İÇİN ÖZEL DÜZELTMELER */
@media only screen and (max-width: 768px) {

    /* Modalı Ekranı Kaplamasın, ortada dursun */
    #stats-modal-overlay .modal-content {
        width: 95% !important;
        max-width: none !important;
        height: auto !important;
        max-height: 85vh !important;
        padding: 10px !important;
        top: 0 !important;
        margin: auto;
        border-width: 2px;
    }

    #stats-chart-container {
        height: 180px !important;
        /* Yüksekliği düşür */
        padding-bottom: 0px !important;
        margin-bottom: 10px !important;
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Yazıları Küçült */
    #stats-labels span {
        font-size: 0.75rem !important;
    }

    .stat-count {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
    }

    .hud-action-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* --- HUD AKSİYON BUTONLARI (Emoji & İstatistik) --- */
.hud-action-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    /* padding sıfırlama */
}

.hud-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    border-color: #fff;
}

#btn-emoji {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#btn-stats {
    background: linear-gradient(135deg, #f1c40f 0%, #d35400 100%);
}

/* Mobil için biraz küçültme */
@media only screen and (max-width: 768px) {
    .hud-action-btn {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
        border-width: 1px;
    }
}