/* ======================================================================
   SQUARE WAR - TAKTİK KOMUTA MERKEZİ 2.0
   Modern Military Command Center Theme
   ====================================================================== */

/* === FONT İMPORTLARI === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ======================================================================
   CSS DEĞİŞKENLERİ - RENK PALETİ
   ====================================================================== */
:root {
    --bg-darkest: #030508;
    --bg-dark: #0a0e17;
    --bg-medium: #111827;
    --bg-light: #1a2234;
    --bg-panel: rgba(17, 24, 39, 0.9);
    
    --glass-bg: rgba(10, 14, 23, 0.8);
    --glass-border: rgba(255, 107, 53, 0.25);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    
    --accent-primary: #ff6b35;
    --accent-primary-light: #ff8c5a;
    --accent-primary-dark: #cc4a1a;
    --accent-primary-glow: rgba(255, 107, 53, 0.5);
    --accent-secondary: #00d4ff;
    --accent-secondary-glow: rgba(0, 212, 255, 0.4);
    
    --success-color: #10b981;
    --success-glow: rgba(16, 185, 129, 0.4);
    --warning-color: #f59e0b;
    --warning-glow: rgba(245, 158, 11, 0.4);
    --danger-color: #ef4444;
    --danger-glow: rgba(239, 68, 68, 0.4);
    
    --text-bright: #ffffff;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-dark: #1e293b;
    --text-light: #e2e8f0;
    --text-medium: #94a3b8;
    
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-medium: rgba(255, 107, 53, 0.3);
    --border-bright: rgba(255, 107, 53, 0.6);
    --border-color: rgba(255, 255, 255, 0.1);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px var(--accent-primary-glow);
    --shadow-glow-sm: 0 0 15px var(--accent-primary-glow);
    --shadow-glow-cyan: 0 0 30px var(--accent-secondary-glow);
    --inset-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-light: 0 0 15px var(--accent-primary-glow);
    --shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.4);
    
    --bg-dark-main: #0a0e17;
    --primary-dark: #ff6b35;
    --primary-light: #ff8c5a;
    --neon-cyan: #00d4ff;
    --canvas-max-width: 1900px;
    --accent-primary-hover: #ff8c5a;
}

/* ======================================================================
   KEYFRAME ANİMASYONLARI
   ====================================================================== */

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px var(--accent-primary-glow); }
    50% { box-shadow: 0 0 40px var(--accent-primary-glow), 0 0 60px rgba(255, 107, 53, 0.2); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ping {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes playerPulse { 
    0%, 100% { box-shadow: 0 0 10px var(--player-glow-color); border-color: var(--player-glow-color); transform: scale(1.0); } 
    50% { box-shadow: 0 0 20px 5px var(--player-glow-color); border-color: #fff; transform: scale(1.02); } 
}

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

@keyframes ripple { 
    0% { transform: scale(0); opacity: 1; } 
    100% { transform: scale(4); opacity: 0; } 
}

@keyframes captureEffect { 
    0% { opacity: 1; box-shadow: 0 0 5px #4BFF73; } 
    50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 15px 5px #4BFF73; } 
    100% { transform: scale(1.8); opacity: 0; } 
}

@keyframes lostEffect { 
    0% { opacity: 1; box-shadow: 0 0 5px #FF4B4B; } 
    50% { transform: scale(0.8) rotateZ(15deg); opacity: 0.9; } 
    100% { transform: scale(1.8) rotateZ(0); opacity: 0; } 
}

@keyframes coinFloat { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-15px); } 
}

@keyframes shake { 
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 
    25% { transform: translate(-50%, -50%) rotate(-5deg); } 
    75% { transform: translate(-50%, -50%) rotate(5deg); } 
}

@keyframes victoryPulse { 
    0%, 100% { box-shadow: 0 20px 60px rgba(16, 185, 129, 0.5); } 
    50% { box-shadow: 0 25px 70px rgba(16, 185, 129, 0.7); } 
}

@keyframes logSlide { 
    0% { opacity: 0; transform: translateX(-20px); } 
    100% { opacity: 1; transform: translateX(0); } 
}

@keyframes pulse-dot { 
    0% { transform: scale(1); } 
    100% { transform: scale(1.3); } 
}

@keyframes zoomInBounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes floatUpFade {
    0% { transform: translate(-50%, 0) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}

@keyframes zonePulse {
    from { opacity: 0.8; box-shadow: 0 0 15px #fff; }
    to { opacity: 1; box-shadow: 0 0 35px #fff, 0 0 15px #00ff00; }
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 107, 53, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 107, 53, 0.8); }
}

@keyframes particle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ======================================================================
   TEMEL STİLLER
   ====================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-weight: 500;
    background: var(--bg-darkest);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
    user-select: none;
    background-image: 
        radial-gradient(ellipse at 20% 20%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-darkest) 0%, var(--bg-dark) 100%);
    background-attachment: fixed;
}

body.in-game {
    overflow: hidden;
    justify-content: flex-start;
    align-items: stretch;
    height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 107, 53, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 107, 53, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary), var(--accent-primary-dark)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary-light); }
::selection { background: var(--accent-primary); color: var(--text-dark); }

/* Tipografi */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0 0 1rem 0;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 1.5rem 0;
}

/* ======================================================================
   BUTON STİLLERİ
   ====================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    margin: 0.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-bright);
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-dark) 100%);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before { left: 100%; }

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow), var(--shadow-md);
    background: linear-gradient(135deg, var(--accent-primary-light) 0%, var(--accent-primary) 100%);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    animation: none;
}

/* Sistem Butonları */
.btn-system {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-system .icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    transition: transform 0.2s ease;
    color: var(--accent-primary);
    opacity: 0.7;
}

.btn-system:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: var(--accent-primary);
    color: var(--text-bright);
    transform: translateX(5px);
}

.btn-system:hover .icon {
    transform: scale(1.15);
    opacity: 1;
}

#logoutBtn { border-color: rgba(239, 68, 68, 0.3); color: var(--danger-color); }
#logoutBtn .icon { color: var(--danger-color); }
#logoutBtn:hover { background: rgba(239, 68, 68, 0.15); border-color: var(--danger-color); }

/* ======================================================================
   INPUT & FORM STİLLERİ
   ====================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    outline: none;
    transition: all 0.25s ease;
}

input::placeholder, textarea::placeholder { color: var(--text-muted); }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15), var(--inset-shadow);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ff6b35' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

select option { background: var(--bg-dark); color: var(--text-primary); }

label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.option-group { margin-bottom: 1.25rem; text-align: left; animation: fadeIn 0.5s ease-out backwards; }
.option-group:nth-child(1) { animation-delay: 0.1s; }
.option-group:nth-child(2) { animation-delay: 0.2s; }
.option-group:nth-child(3) { animation-delay: 0.3s; }

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* ======================================================================
   CONTAINER & PANEL STİLLERİ
   ====================================================================== */

.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
    animation: fadeInScale 0.5s ease-out;
    z-index: 1;
    text-align: center;
    color: var(--text-light);
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0.5;
}

.panel {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.5rem;
}

/* ======================================================================
   AUTH EKRANI (GİRİŞ/KAYIT)
   ====================================================================== */

#auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

#auth-container.container {
    max-width: 420px;
    padding: 2.5rem;
}

#auth-container h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-primary);
    text-shadow: 0 0 30px var(--accent-primary-glow);
    margin-bottom: 0.5rem;
    letter-spacing: 3px;
    animation: glow-pulse 3s ease-in-out infinite;
}

#auth-container h1::after {
    content: '';
    display: block;
    width: 60%;
    height: 2px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}

#auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-subtle);
}

.auth-tab {
    flex: 1;
    padding: 0.875rem 1rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.auth-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-primary);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.auth-tab:hover { color: var(--text-secondary); }
.auth-tab.active-tab { color: var(--accent-primary); }
.auth-tab.active-tab::after { transform: scaleX(1); }

#login-form, #register-form { text-align: left; }

#auth-container .btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    margin-top: 0.5rem;
}

#auth-message {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    min-height: 20px;
}

#auth-message.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

#auth-message.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

#guestLoginBtn {
    margin-top: 1rem;
    background: transparent;
    border: 1px dashed var(--text-muted);
    color: var(--text-muted);
}

#guestLoginBtn:hover {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    box-shadow: var(--shadow-glow-cyan);
}

/* ======================================================================
   ANA MENÜ (LOBİ MENÜSÜ) - YENİ DASHBOARD TASARIMI
   ====================================================================== */

#lobby-menu {
    display: none;
    min-height: 100vh;
    padding: 1.5rem;
}

#lobby-menu.container {
    max-width: 1400px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    box-shadow: none;
}

#lobby-menu.container::before { display: none; }

#lobby-menu h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: var(--accent-primary);
    text-shadow: 0 0 20px var(--accent-primary-glow);
    margin: 0;
}

/* Üst Bar (Header) */
.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(20px);
}

.lobby-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lobby-logo h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-primary);
    margin: 0;
    text-shadow: 0 0 20px var(--accent-primary-glow);
}

.lobby-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-sp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    color: var(--success-color);
}

.user-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--text-bright);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

.user-profile-btn:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: var(--accent-primary);
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Ana İçerik Grid */
#lobby-menu-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    
    /* min-height: calc(100vh - 150px);  <-- BU SATIRI SİLDİK VEYA auto YAPTIK */
    min-height: auto; 
    
    text-align: left;
    align-items: stretch; /* Sol ve sağ panelin boyunu birbirine eşitler */
}



/* Sol Panel - Açık Lobiler */
.lobbies-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideInLeft 0.5s ease-out;
}

.lobbies-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lobbies-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.lobbies-title .pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: 50%;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.lobbies-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#lobbyFilterSelect {
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    font-size: 0.75rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-secondary);
    min-width: 120px;
}

#refreshLobbiesBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 1rem;
}

#refreshLobbiesBtn:hover {
    background: rgba(255, 107, 53, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

#refreshLobbiesBtn:hover .refresh-icon {
    animation: rotate 0.5s ease;
}

/* Lobi Listesi */
.lobbies-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    
    /* Ekran boyuna göre değil, bulunduğu kutuya göre sınırla */
    max-height: 600px; 
    min-height: 300px; /* Çok küçülmesini engellemek için */
}

#public-lobby-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lobby-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.lobby-card:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: var(--border-medium);
    transform: translateX(5px);
}

.lobby-card.full {
    opacity: 0.4;
}

.lobby-card.full .lobby-join-btn {
    background: var(--text-muted);
    cursor: not-allowed;
}

.lobby-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lobby-host {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-bright);
}

.lobby-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.lobby-players {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lobby-players.has-space { color: var(--success-color); }

.lobby-mode {
    padding: 0.15rem 0.5rem;
    background: rgba(0, 212, 255, 0.15);
    border-radius: 4px;
    color: var(--accent-secondary);
    font-weight: 600;
    font-size: 0.7rem;
}

.lobby-join-btn {
    padding: 0.5rem 1.25rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-bright);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-dark));
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.lobby-join-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-glow-sm);
}

/* Boş Durum */
.lobbies-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
}

.lobbies-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.lobbies-empty-text { font-size: 0.95rem; }

/* Yükleniyor durumu */
.lobbies-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
    gap: 0.5rem;
}

.lobbies-loading::before {
    content: '⟳';
    animation: rotate 1s linear infinite;
}

/* Sağ Panel - Eylemler */
.actions-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: slideInRight 0.5s ease-out;
}

/* Hızlı Eylemler */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.action-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow), var(--shadow-md);
}

.action-card-icon { font-size: 2.5rem; }

.action-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.action-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.action-card.primary {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.05));
    border-color: var(--border-medium);
}

.action-card.primary:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 107, 53, 0.1));
}

/* Kod ile Katıl */
.join-code-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
}

.join-code-section h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--accent-secondary);
    margin-bottom: 1rem;
    margin-top: 0;
}

.join-code-form {
    display: flex;
    gap: 0.75rem;
}

.join-code-form input {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
}

.join-code-form .btn { white-space: nowrap; margin: 0; }

/* Sistem Menüsü */
.system-menu {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
}

.system-menu h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    margin-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

#system-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

/* Eski yapı için gizle */
#primary-actions,
#secondary-actions,
#create-game-group,
#join-game-group,
#public-lobbies-menu,
#viewPublicLobbiesBtn {
    display: none !important;
}

/* ======================================================================
   LOBİ BEKLEME EKRANI
   ====================================================================== */

#lobby {
    display: none;
    padding: 1.5rem;
}


#lobby h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--accent-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.75rem;
    margin: 0 0 1rem 0;
}




#playerList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#playerList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

#playerList li:hover {
    border-color: var(--border-medium);
    transform: translateX(3px);
}

.player-name-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.lobby-host-tag, .lobby-you-tag {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.lobby-host-tag { background: var(--warning-color); color: var(--text-dark); }
.lobby-you-tag { background: var(--success-color); color: var(--text-dark); }

.kick-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
    background: var(--danger-color);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kick-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

#lobby-code-display-container {
    text-align: center;
    margin: 1rem 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

#lobbyIdDisplay {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--bg-dark);
    border: 1px dashed var(--accent-primary);
    border-radius: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 3px;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: text;
}

#lobbyIdDisplay:hover {
    box-shadow: var(--shadow-glow-sm);
    transform: scale(1.02);
}

#lobby-actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
}

#lobby-actions-wrapper .btn {
    width: 100%;
    margin: 0;
}

.ai-button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

#startGameBtn {
    background: linear-gradient(135deg, var(--success-color), #059669);
    border-color: var(--success-color);
}

#startGameBtn:hover { box-shadow: 0 0 25px var(--success-glow); }

#addAiBtn {
    background: linear-gradient(135deg, var(--accent-secondary), #0891b2);
    border-color: var(--accent-secondary);
}

#removeAiBtn {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    border-color: var(--danger-color);
}

#leaveLobbyBtn {
    background: transparent;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

#leaveLobbyBtn:hover { background: rgba(239, 68, 68, 0.15); }

#public-lobby-setting {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

#publicLobbyToggle { display: none; }

#public-lobby-setting-label {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

#publicLobbyToggle:checked + #public-lobby-setting-label {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--success-color);
    color: var(--success-color);
}

#castle-info-lobby {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

#castle-hp-display { font-weight: bold; color: var(--accent-primary); }


/* ======================================================================
   MODAL STİLLERİ
   ====================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    background: var(--bg-medium);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg), 0 0 50px rgba(255, 107, 53, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    color: var(--text-light);
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-top: 0;
}

.modal-content h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-primary);
}

.btn-close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-modal:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* Settings Modal */
#settings-modal .modal-content { max-width: 800px; }

#settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.settings-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-group {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.25rem;
}

.settings-group h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--accent-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.setting-item { margin-bottom: 1rem; }
.setting-item:last-child { margin-bottom: 0; }
.setting-item label { font-size: 0.8rem; margin-bottom: 0.4rem; }
.setting-item select { padding: 0.6rem 0.75rem; font-size: 0.9rem; }

#settings-content #closeSettingsBtn {
    display: block;
    margin: 1rem auto 0;
    width: 50%;
}

/* Attack Modal */
#attack-modal-overlay { z-index: 2000; }
#attack-modal { max-width: 450px; text-align: center; }

#modal-region-info {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
    margin-top: 0;
}

#attack-type-info {
    color: var(--danger-color);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    min-height: 1.2em;
}

#chance-formula-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: var(--accent-secondary);
    margin-bottom: 0.5rem;
}

#chance-values-display {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

#attack-amount-select {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    padding: 1rem;
}

#attack-modal .btn { margin: 0.25rem; }

#attack-all-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    padding: 0.75rem;
}

#attack-all-btn small { font-size: 0.75rem; opacity: 0.8; }

#attack-select-btn { flex: 1; }

#attack-cancel-btn {
    width: 100%;
    margin-top: 1rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

#attack-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* View Settings Modal */
#view-settings-modal .modal-content { max-width: 450px; text-align: left; }
#view-settings-content h2 { text-align: center; }

#view-settings-content p {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin: 0.5rem 0;
    border-left: 2px solid var(--border-subtle);
    font-size: 1rem;
    transition: all 0.2s ease;
}

#view-settings-content p:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(5px);
}

#view-settings-content p strong { color: var(--accent-primary); }

/* Game Over Modal */
#game-over-modal .modal-content {
    text-align: center;
    border-color: var(--success-color);
    box-shadow: 0 0 50px var(--success-glow);
}

#winner-announcement {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#winner-announcement .winner-name {
    display: block;
    font-size: 2.5rem;
    color: var(--success-color);
    text-shadow: 0 0 20px var(--success-glow);
    margin-top: 0.5rem;
    font-weight: 900;
}

/* Profile Modal */
#profile-modal .modal-content { max-width: 500px; }
#profile-content { text-align: left; }

/* Leaderboard Modal */
#leaderboard-modal .modal-content { max-width: 600px; }

/* Store Modal */
#store-modal .modal-content { max-width: 550px; }
#store-content h2 { text-align: center; margin-top: 0; }

#store-sp-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.5rem;
    color: var(--success-color);
}

.store-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.store-section h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* How To Play Modal */
#how-to-play-modal .modal-content { max-width: 700px; }
#how-to-play-content { text-align: left; }
#how-to-play-content h2 { text-align: center; }

#how-to-play-content p,
#how-to-play-content li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

#how-to-play-content ul { padding-left: 1.5rem; }

/* Guest Login Modal */
#guest-login-modal .modal-content {
    max-width: 400px;
    text-align: center;
}

#guest-login-modal h2 {
    font-size: 2rem;
    border-bottom: none;
    margin-bottom: 0.5rem;
}

#guestNicknameInput {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.25rem;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#guest-error-msg {
    color: var(--danger-color);
    font-weight: 600;
    min-height: 24px;
    margin-top: 1rem;
}

/* Daily Reward Modal */
#daily-reward-modal {
    z-index: 2000;
}

#daily-reward-modal .modal-content {
    max-width: 450px;
    text-align: center;
    border: 2px solid #ffd700;
    background: radial-gradient(circle, var(--bg-medium) 0%, var(--bg-darkest) 100%);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.4);
}

#daily-reward-modal h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    border-bottom: none;
    margin-bottom: 0;
}

#chest-container {
    margin: 2rem auto;
    font-size: 5rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#chest-container:hover { transform: scale(1.1); }

#chest-opened { animation: bounceIn 0.8s; }

#reward-reveal { animation: zoomIn 0.5s ease-out; }
#reward-icon { font-size: 4rem; margin-bottom: 0.5rem; }

#reward-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#closeRewardBtn {
    width: 100%;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border-color: #ffa500;
    color: var(--text-dark);
    font-weight: 900;
}

/* QTE Modal */
#qte-modal-overlay {
    z-index: 200;
    overflow: hidden !important;
}

#qte-modal-overlay .modal-content {
    max-width: 400px;
    text-align: center;
}

#qte-timer-wrapper {
    width: 100%;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--border-subtle);
}

#qte-timer-bar {
    width: 100%;
    height: 100%;
    background: var(--danger-color);
    transition: width 5s linear;
}

#qte-bar-container {
    position: relative;
    height: 60px;
    background: var(--bg-dark);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.qte-zone { height: 100%; }

#qte-zone-red {
    width: 50%;
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

#qte-zone-yellow {
    width: 25%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

#qte-zone-green {
    width: 21%;
    background: linear-gradient(90deg, #10b981, #34d399);
}

#qte-zone-perfect {
    width: 4%;
    background: #fff;
    box-shadow: 0 0 20px #fff, 0 0 40px var(--success-color);
    animation: zonePulse 0.5s infinite alternate;
    z-index: 5;
}

#qte-marker {
    position: absolute;
    width: 8px;
    height: 100%;
    background: var(--accent-primary);
    box-shadow: 0 0 15px var(--accent-primary);
    border: 2px solid #fff;
    border-radius: 4px;
    z-index: 20;
    top: 0;
}

#qte-feedback {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    min-height: 40px;
    margin-top: 1rem;
    font-weight: bold;
    text-shadow: 2px 2px 0 #000;
}

#qte-stop-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border-color: #ffa500;
    color: var(--text-dark);
    font-family: 'Orbitron', sans-serif;
}

#qte-stop-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
}

/* Global QTE Notification */
#global-qte-notification {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    text-align: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

#global-qte-notification.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
}

#qte-notif-player {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 0 0 10px #000;
    margin-bottom: 5px;
}

#qte-notif-result {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    line-height: 1;
    -webkit-text-stroke: 2px #000;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
    margin-top: 10px;
}

/* ======================================================================
   COIN FLIP ANİMASYONU
   ====================================================================== */

/* ======================================================================
   RESİMLİ YAZI TURA SİSTEMİ (IMAGE BASED COIN FLIP)
   ====================================================================== */

#coin-flip {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    perspective: 1000px; /* 3D derinlik */
}

.coin {
    /* Paranın ekrandaki boyutu */
    width: 250px;
    height: 250px;
    position: relative;
    transform-style: preserve-3d; /* 3D dönüş için şart */
    /* Dönüş animasyonu JS tarafından kontrol edilecek */
}

.coin .side {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* İŞTE SİHİR BURADA: */
    border-radius: 50%;  /* Kutuyu yuvarlak yap */
    overflow: hidden;    /* Kare resmin dışarı taşan köşelerini gizle (kes) */
    
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden;
    
    /* Metalik Çerçeve Efekti */
    border: 4px solid #555; 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    background: #111;
}

/* --- RESMİ ZOOM YAPMA (DAHA BÜYÜK GÖRÜNÜM) --- */
.coin .side img {
    /* BURAYI DEĞİŞTİR: %100 yerine %130 (veya daha fazla) yap */
    width: 114%;  
    height: 114%;
    
    /* Resmi bozmadan doldur */
    object-fit: cover; 
    
    /* Resmi tam ortada tutmak için bu kısım ŞART */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    
    /* Yuvarlak kesim */
    border-radius: 50%;
}

/* --- ÖN YÜZ (YAZI) --- */
.heads-side {
    /* Başlangıç açısı 0 derece */
    transform: rotateY(0deg);
    z-index: 2;
}

/* --- ARKA YÜZ (TURA) --- */
.tails-side {
    /* Başlangıç açısı 180 derece (Ters duruyor) */
    transform: rotateY(180deg);
}


/* ======================================================================
   ELİMİNASYON BİLDİRİMİ
   ====================================================================== */

#elimination-notice {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem 3rem;
    background: rgba(239, 68, 68, 0.95);
    border: 2px solid #fff;
    border-radius: 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    z-index: 1500;
    box-shadow: 0 0 50px var(--danger-glow);
    animation: shake 0.5s ease-in-out;
}

/* ======================================================================
   EMOTE SİSTEMİ
   ====================================================================== */

#emote-menu, .emote-menu-container {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    z-index: 100;
    animation: fadeInUp 0.3s ease-out;
}

.emote-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.emote-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.2);
}

.player-emote-bubble {
    position: absolute;
    font-size: 2.5rem;
    animation: floatUpFade 2.5s forwards;
    pointer-events: none;
    z-index: 150;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ======================================================================
   LEVEL UP OVERLAY
   ====================================================================== */

#levelup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s;
}

.levelup-container {
    text-align: center;
    animation: zoomInBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.levelup-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
    margin: 0;
}

.levelup-stars {
    font-size: 3rem;
    letter-spacing: 10px;
    margin: 1rem 0;
}

.levelup-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    color: #fff;
}

#new-level-display {
    color: #ffd700;
    font-size: 2rem;
}

/* ======================================================================
   CHAT SİSTEMİ
   ====================================================================== */

#chat-container {
    display: flex;
    flex-direction: column;
    height: 200px;
    border-top: 1px solid var(--border-subtle);
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-message {
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-size: 0.85rem;
}

.chat-message .sender {
    font-weight: 700;
    color: var(--accent-primary);
}

.chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

#chat-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

#send-chat-btn { padding: 0.5rem 1rem; margin: 0; }

#chat-notification-dot {
    display: none;
    width: 8px;
    height: 8px;
    background: var(--danger-color);
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: -2px;
    animation: pulse-dot 1s infinite alternate;
}

/* ======================================================================
   YARDIMCI SINIFLAR & ESKİ UYUMLULUK
   ====================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.hidden { display: none !important; }

.glowing-text, .stat-value.glowing-text {
    color: var(--success-color);
    text-shadow: 0 0 10px var(--success-glow), 0 0 20px var(--success-glow);
}

/* Action Group (eski uyumluluk) */
.action-group {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.action-group h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: var(--accent-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    text-transform: uppercase;
}

/* ======================================================================
   RESPONSIVE TASARIM
   ====================================================================== */

/* 1200px media query devre dışı - PC görünümü mobilde de korunacak */
/* @media (max-width: 1200px) { ... } DEVRE DIŞI */

/* 900px media query devre dışı - PC görünümü mobilde de korunacak */
/* @media (max-width: 900px) { ... } DEVRE DIŞI */

/* 768px media query devre dışı - PC görünümü mobilde de korunacak */
/* @media (max-width: 768px) { ... } DEVRE DIŞI */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ====================================================================== */
/* ====================================================================== */
/* === OYNANIŞ EKRANI STİLLERİ (YENİ TEMA: SAVAŞ ODASI) === */
/* ====================================================================== */
/* ====================================================================== */

#game-container { 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    background: var(--bg-dark-main); /* Ana arka planla aynı */
    padding: 1vh 1vw; /* Kenarlara boşluk */
    border-radius: 4px; /* Keskin kenar */
    box-shadow: var(--shadow-dark); 
    color: var(--text-light); /* Açık renk yazı */
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
    border: 1px solid var(--border-color); /* Kenarlık */
    gap: 0; /* Arayüz elemanları arası boşluk */
    animation: fadeInScale 0.6s cubic-bezier(.175,.885,.32,1.275);
}
#game-layout { 
    display: flex; 
    flex-direction: row; 
    gap: 1.3vw; 
    width: 100%; 
    justify-content: center; 
    flex: 1; 
    min-height: 0; 
}
#left-panel { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    flex-grow: 1; 
    position: relative; 
    width: 100%; 
    height: 100%; 
}
#right-panel { display: none; } /* Orijinalde de kapalıydı, kalsın */

/* "TOPRAK/HARİTA" TEMALI KANVAS */
canvas { 
    border: 2px solid var(--border-color); /* Mavi kenarlığı değiştir */
    background: linear-gradient(135deg, #fffef8 0%, #fff5e6 100%); /* Bu "parşömen" rengi kalmalı, temaya uyuyor */
    box-shadow: var(--inset-shadow), var(--shadow-dark); /* Konsola gömülmüş efekti */
    user-select: none; 
    cursor: pointer !important; 
    touch-action: manipulation; 
    width: 100%; 
    max-width: 98.95vw; 
    display: block; 
    flex: 1; 
    min-height: 0; 
    border-radius: 4px; /* Keskin kenar */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
canvas:hover { 
    transform: scale(1.005); /* Hafif zoom */
    box-shadow: var(--inset-shadow), var(--shadow-light); /* Vurgu */
    border-color: var(--accent-primary-dark);
}

/* SKOR TABLOSU PANELİ */
#scoreboard { 
    display: flex; 
    flex-direction: row;
    margin-bottom: 0 !important; 
    gap: 0.5vw; 
    width: 100%; 
    padding: 0.5vh 0.5vw !important; 
    border-radius: 4px; /* Keskin kenar */
    font-weight: 500; 
    box-sizing: border-box; 
    justify-content: center; 
    background: var(--bg-panel); /* Koyu panel rengi */
    border: 1px solid var(--border-color); 
    box-shadow: var(--inset-shadow); 
}

/* OYUNCU SKOR KUTUSU */
.player-score { 
    padding: 0.2vh 0.3vw !important; 
    border-radius: 4px; /* Keskin kenar */
    transition: all .4s cubic-bezier(.175,.885,.32,1.275); 
    border: 1px solid var(--border-color); /* Sadece kenarlık */
    font-size: 0.9em !important; 
    font-family: 'Oswald', sans-serif; /* Askeri font */
    color: var(--text-light); /* Açık renk yazı */
    display: flex; 
    align-items: center; 
    background: var(--bg-dark-main); /* Panelden bir tık koyu */
    box-shadow: none; 
    position: relative; 
    overflow: hidden; 
    flex-grow: 1; 
    justify-content: center; 
    min-width: auto !important;
    height: auto !important; 
}
.player-score::before { content: none; } /* Parıltı efektini kaldır */
.player-score:hover::before { content: none; } /* Parıltı efektini kaldır */

.active-player { 
    background: var(--bg-panel) !important; 
    color: var(--text-light) !important; 
    transform: scale(1.05); 
    
    /* YENİ: script.js'ten gelen dinamik rengi kullanır */
    /* (Eğer renk gelmezse varsayılan olarak turuncu parlar) */
    --player-glow-color: var(--active-player-color, var(--accent-primary));
    
    border: 1px solid var(--player-glow-color); 
    animation: playerPulse 1.5s infinite alternate;
    box-shadow: 0 0 10px 0px var(--player-glow-color);
}


.eliminated-player { 
    color: var(--text-medium); 
    text-decoration: line-through; 
    background: var(--bg-dark-main) !important; 
    border-color: var(--border-color) !important; 
    animation: none !important; 
    opacity: 0.6; 
    filter: grayscale(1); 
}

/* KONTROL PANELİ */
#control-panel { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    gap: 0.52vw; 
    align-items: center; 
    margin-top: 1.38vh; 
    width: 100%; 
}

/* KONTROL PANELİ BUTON VE AÇILIR MENÜLERİ */
#control-panel .btn, #control-panel details summary { 
    flex: 1; 
    margin: 0; 
    padding: 1.11vh 1.04vw; 
    font-size: 1.2em; /* Yazı büyüdü */
    text-align: center; 
    border-radius: 4px; /* Keskin kenar */
    border: 1px solid var(--accent-primary-dark); /* Kenarlık */
    cursor: pointer; 
    font-weight: 700; 
    font-family: 'Teko', 'Oswald', sans-serif; /* Askeri font */
    text-transform: uppercase; /* BÜYÜK HARF */
    transition: all .3s cubic-bezier(.175,.885,.32,1.275); 
}
#control-panel details { flex: 1; position: relative; }
#control-panel summary { 
    list-style: none; 
    background: var(--accent-primary); /* Turuncu buton */
    color: var(--text-light); 
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3); /* .btn stili */
}
#control-panel summary:hover { 
    transform: translateY(-2px); 
    background: var(--accent-primary-hover);
    box-shadow: var(--shadow-light), inset 0 -2px 0 rgba(0,0,0,0.2); /* .btn:hover stili */
}

/* Butonlara özel renkler (HTML'deki inline style'ları ezer) */
#passBtn {
    background: var(--warning-color) !important;
    border-color: #c89c0a !important;
    color: var(--text-dark) !important;
}
#passBtn:hover {
    background: #ffc107 !important;
    box-shadow: 0 0 10px #ffc107;
}
#menuBtn {
    background: var(--bg-panel) !important;
    border-color: var(--border-color) !important;
    color: var(--text-medium) !important;
}
#menuBtn:hover {
    background: var(--border-color) !important;
    color: var(--text-light) !important;
    box-shadow: none !important;
}


/* Chat & Log Pencereleri */
#chat-container, #log-popup-container { 
    display: flex; 
    position: absolute; 
    bottom: 100%; 
    left: 0; 
    right: 0; 
    margin-bottom: 0.92vh; 
    width: auto; 
    z-index: 10; 
    flex-direction: column; 
    border-radius: 4px; /* Keskin kenar */
    padding: 1.38vh 0.78vw; 
    box-shadow: var(--shadow-dark); 
    height: 32.4vh; 
    box-sizing: border-box; 
    background: var(--bg-panel); /* Koyu panel */
    border: 1px solid var(--border-color); /* Kenarlık */
}
#chat-messages { 
    flex-grow: 1; 
    overflow-y: auto; 
    margin-bottom: 0.92vh; 
    padding-right: 0.52vw; 
    color: var(--text-light); /* Yazı rengi */
}
#chat-messages .chat-msg { 
    margin-bottom: 0.74vh; 
    word-break: break-word; 
    line-height: 1.4; 
    animation: fadeIn 0.3s ease; 
    padding: 0.74vh 0.62vw; 
    border-radius: 4px; /* Keskin kenar */
    background: var(--bg-dark-main); /* Koyu arka plan */
    box-shadow: none; 
}
#chat-messages .chat-msg strong { font-weight: 700; }

#chat-input-container { display: flex; gap: 0.52vw; }
#chat-input { 
    flex-grow: 1; 
    border: 1px solid var(--border-color); 
    padding: 1.11vh 0.93vw; 
    border-radius: 4px; /* Keskin kenar */
    background: var(--bg-dark-main); /* Koyu input */
    transition: all 0.3s ease; 
    font-size: 1em; 
    color: var(--text-light); /* Yazı rengi */
    font-family: 'Oswald', sans-serif;
}
#chat-input:focus { 
    border-color: var(--accent-primary); 
    outline: none; 
    background: var(--bg-dark-main); 
    box-shadow: 0 0 5px var(--accent-primary); 
    transform: none; 
}
#send-chat-btn { 
    background: var(--accent-primary); 
    color: white; 
    border: 1px solid var(--accent-primary-dark);
    padding: 1.11vh 1.25vw; 
    border-radius: 4px; /* Keskin kenar */
    cursor: pointer; 
    font-weight: 600; 
    font-family: 'Oswald', sans-serif;
    transition: all 0.3s cubic-bezier(.175,.885,.32,1.275); 
}
#send-chat-btn:hover { 
    background: var(--accent-primary-hover); 
    transform: translateY(-2px) scale(1.05); 
    box-shadow: var(--shadow-light); 
}

/* Bildirim noktası (Aynen kalır, renkleri temayla uyumlu) */
.notification-dot { 
    display: inline-block; 
    width: 2vh; height: 2vh; 
    background-color: var(--danger-color); 
    border-radius: 50%; 
    margin-left: 0.8vw; 
    box-shadow: 0 0 1.5vh rgba(231, 76, 60, 0.9); 
    transform: scale(0); 
    transition: transform 0.3s cubic-bezier(.175,.885,.32,1.275); 
    vertical-align: middle; 
    position: absolute; 
    top: -0.5vh; right: -0.5vh; 
    z-index: 100; 
    border: 0.2vh solid white; 
}
.notification-dot.visible { transform: scale(1); animation: pulse-dot 1.5s infinite alternate; }

/* Log Kutuları */
#log-container, #log-container-popup { 
    width: 100%; 
    height: 100%; 
    background: var(--bg-panel); /* Koyu panel */
    color: var(--text-light); /* Yazı rengi */
    padding: 1.38vh 0.78vw; 
    border-radius: 4px; /* Keskin kenar */
    box-shadow: var(--inset-shadow); 
    overflow-y: auto; 
    font-size: .85em; 
    display: flex; 
    flex-direction: column-reverse; 
    border: 1px solid var(--border-color); 
}
#log-content, #log-content-popup { 
    display: flex; 
    flex-direction: column; 
    gap: 0.46vh; 
}
.log-entry { 
    padding: 0.74vh 0.62vw; 
    border-radius: 4px; /* Keskin kenar */
    word-break: break-word; 
    opacity: 0; 
    animation: logSlide 0.5s ease forwards; 
    color: #fff; /* Renkli arkaplan üstü beyaz yazı */
    font-weight: 600; 
    box-shadow: none; /* Gölgeyi kaldır */
    position: relative; 
    overflow: hidden; 
}
.log-entry::before { content: none; } /* Parıltıyı kaldır */

/* Renkler (Aynen kalır, temaya uyumlu) */
.log-win { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); } 
.log-loss { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); } 
.log-neutral { background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%); color: var(--text-dark); }

/* === 1. YETENEKLER MENÜSÜ DÜZELTMESİ (Yukarı Açılır Popup) === */
#control-panel details {
    position: relative; /* Menünün butonun hizasında kalmasını sağlar */
}

/* Detaylar açıldığında içeriğin pozisyonu */
#control-panel details[open] > summary ~ * {
    animation: fadeInUp 0.3s ease-out;
}

#abilities-container {
    position: absolute;
    bottom: 115%; /* Butonun hemen üstünde başlar */
    left: 0;
    width: 100%;
    min-width: 200px;
    background: rgba(17, 24, 39, 0.95); /* Koyu, yarı saydam arka plan */
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px var(--accent-primary-glow);
    z-index: 100; /* Diğer öğelerin üstünde */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Yetenekler açıldığında canvas'ı itmemesi için summary ayarı */
#control-panel details > summary {
    list-style: none;
    outline: none;
}

/* === 2. TÜM BUTONLARIN STİLİNİ GÜNCELLEME === */
/* Mevcut .btn sınıfını bu yeni, havalı stille eziyoruz */
.btn, button, input[type="submit"], #control-panel summary {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%), #1f2937;
    border: 1px solid var(--accent-primary);
    border-radius: 4px; /* Keskin, askeri kenar */
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Hover Efekti - Parlama ve Yükselme */
.btn:hover, button:hover, input[type="submit"]:hover, #control-panel summary:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%), var(--accent-primary-dark);
    box-shadow: 0 0 15px var(--accent-primary-glow), 0 6px 12px rgba(0,0,0,0.4);
    border-color: #fff;
}

/* Active (Tıklama) Efekti */
.btn:active, button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Yetenekler menüsü içindeki butonları biraz daha sıkı yapalım */
.ability-btn {
    width: 100%;
    margin: 0 !important;
    text-align: left;
    font-size: 0.9em;
    padding: 8px 12px;
    border-left: 3px solid var(--warning-color); /* Sol tarafa şerit */
}
/* ======================================================================
   FİNAL GİRİŞ EKRANI (BÜYÜK, ORTALANMIŞ & SABİT)
   ====================================================================== */

#auth-container.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* GENİŞLİK VE YÜKSEKLİK */
    width: 85vw;
    max-width: 1400px;
    height: 75vh;
    min-height: 650px;
    
    /* DÜZEN AYARLARI (KRİTİK KISIM) */
    display: flex;           /* Flexbox kullan */
    flex-direction: row;     /* Yan yana diz */
    align-items: stretch;    /* YÜKSEKLİĞİ EŞİTLE (Boşluk kalmaz) */
    
    /* BOŞLUKLARI SİLME (RESİMDEKİ SORUNU ÇÖZEN KOD) */
    padding: 0 !important;   
    
    /* Görünüm */
    background: rgba(10, 14, 23, 0.96);
    border: 1px solid var(--accent-primary);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
    border-radius: 16px;
    overflow: hidden;        /* İçerik taşarsa (köşelerden) kes */
    z-index: 1000;
}

.auth-left-panel {
    flex: 1.5;
    height: 100%;            /* Yüksekliği %100 yap */
    min-height: 100%;        /* Küçülmesini engelle */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Arka plan ayarları (önceki verdiğim kod) */
    background: 
        linear-gradient(180deg, rgba(10, 14, 23, 0.8) 0%, rgba(10, 14, 23, 0.95) 100%),
        url('https://assets.codepen.io/13471/war-map-bg.jpg');
    background-size: cover;
    background-position: center;
    
    border-right: 1px solid rgba(255, 107, 53, 0.3);
}

/* Sağ Taraf (Form - Ortalanmış) */
.auth-right-panel {
    flex: 1;
    padding: 4rem; /* İç boşluğu artırdım */
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikey olarak TAM ORTALA */
    align-items: center;
    background: var(--bg-dark);
    position: relative;
}

/* Form Genişliği */
#login-form, #register-form {
    width: 100%;
    max-width: 400px; /* Form çok yayılmasın */
}

/* Mobilde Dikey Olması İçin */
@media (max-width: 1024px) {
    #auth-container.container {
        flex-direction: column; 
        width: 95vw;
        height: auto;
        min-height: auto;
        top: 2rem;
        transform: translate(-50%, 0);
        margin-bottom: 2rem;
    }
    .auth-left-panel { 
        padding: 3rem; 
        border-right: none; 
        border-bottom: 1px solid var(--border-color); 
        min-height: 250px;
    }
    .auth-right-panel { 
        padding: 2rem; 
        justify-content: flex-start;
    }
}
#guest-login-modal {
    z-index: 3000 !important; /* Giriş ekranının (1000) üstüne çıkması şart */
}

/* Eğer "Kayıt Ol" vb. uyarı mesajları da arkada kalıyorsa */
.modal-overlay {
    z-index: 2000; /* Genel modalları da giriş ekranının önüne alalım */
}
/* ======================================================================
   KAYMA SORUNU İÇİN ÖZEL ANİMASYON DÜZELTMESİ (FIX)
   ====================================================================== */

/* 1. Yeni Animasyon Tanımı: Hem ortada tutar hem büyütür */
@keyframes fadeInCentered {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.95); /* Başlangıçta da ortada olsun */
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1);    /* Bitişte de ortada olsun */
    }
}

/* 2. Giriş Ekranına Bu Animasyonu Uygula */
#auth-container.container {
    /* Mevcut animasyonu ezmek için !important kullanıyoruz */
    animation: fadeInCentered 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    
    /* Eğer sayfada kaydırma çubuğu çıkarsa bunu engellemek için: */
    transform-origin: center center;
}
/* ======================================================================
   SAYAÇ ÇUBUĞU (YAZISIZ - SADECE DOLUM)
   ====================================================================== */

#horizontal-timer-container {
    width: 100%;
    height: 12px; /* Yazı olmadığı için incelttik, daha zarif durur */
    background: #111; /* Boş hali koyu renk */
    margin: 5px 0 10px 0;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#horizontal-timer-fill {
    height: 100%;
    width: 0%; /* Başlangıçta 0 */
    
    /* Yeşil -> Sarı -> Kırmızı Geçişli Renk */
    background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); 
    
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* Parlama Efekti */
    
    /* Animasyonu JS yönetecek */
}
/* ======================================================================
   YENİ GİRİŞ EKRANI TASARIMI (PRO LOGO & GENİŞ PANEL)
   ====================================================================== */

/* Sol Panel: Arka Plan ve Düzen */
.auth-left-panel {
    flex: 1.5;
    position: relative;
    overflow: hidden;
    /* Daha koyu, ciddi ve profesyonel bir arka plan geçişi */
    background: 
        linear-gradient(180deg, rgba(10, 14, 23, 0.8) 0%, rgba(10, 14, 23, 0.95) 100%),
        url('https://assets.codepen.io/13471/war-map-bg.jpg'); /* Mevcut harita resmi */
    background-size: cover;
    background-position: center;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255, 107, 53, 0.3);
    
    /* Panele derinlik katan iç gölge */
    box-shadow: inset -10px 0 50px rgba(0,0,0,0.8);
}

/* Dekoratif Izgara (Grid) Efekti */
.tactical-grid {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 107, 53, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 107, 53, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
}

/* Logo Taşıyıcısı */
.logo-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(-20px); /* Biraz yukarı taşıyarak dengeler */
}

/* 1. İkon Tasarımı (Dönen Halkalar) */
.logo-icon-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.logo-icon {
    font-size: 4rem;
    filter: drop-shadow(0 0 15px var(--accent-primary));
    z-index: 2;
}

.icon-ring {
    position: absolute;
    border: 2px dashed rgba(255, 107, 53, 0.4);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: rotate 20s linear infinite;
}

.icon-ring.inner {
    width: 70%;
    height: 70%;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate 10s linear infinite reverse;
}

/* 2. Ana Başlık (Square War) */
.logo-main-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 4.5rem;
    line-height: 0.9;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.logo-main-text .highlight-text {
    color: var(--accent-primary);
    display: block; /* Alt satıra indirir */
    font-size: 1.1em; /* WAR kelimesi biraz daha büyük */
    text-shadow: 0 0 30px rgba(255, 107, 53, 0.6);
}

/* 3. Ayırıcı Çizgi */
.logo-divider {
    width: 60px;
    height: 4px;
    background: var(--accent-secondary);
    margin: 1.5rem 0;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--accent-secondary);
}

/* 4. Alt Metin (Slogan) */
.logo-sub-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    color: var(--text-secondary);
    letter-spacing: 3px;
    line-height: 1.6;
    margin: 0;
}

.version-text {
    display: block;
    font-size: 0.8em;
    color: var(--success-color);
    opacity: 0.7;
    margin-top: 5px;
}

/* Mobil Uyumluluk */
@media (max-width: 1024px) {
    .auth-left-panel {
        padding: 3rem 1rem;
        min-height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .logo-main-text { font-size: 3rem; }
    .logo-icon-container { width: 80px; height: 80px; margin-bottom: 1rem; }
    .logo-icon { font-size: 2.5rem; }
}
/* ======================================================================
   YENİ MODAL TASARIMLARI (PROFİL, LİDERLİK, REHBER)
   ====================================================================== */

/* Modalları Genişlet */
    #profile-modal .modal-content,
#leaderboard-modal .modal-content,
#how-to-play-modal .modal-content,
#player-info-modal .modal-content {


    max-width: 900px !important; /* Daha geniş yatay alan */
    width: 90%;
    background: rgba(10, 14, 23, 0.98); /* Neredeyse opak koyu zemin */
    border: 1px solid var(--accent-primary);
    box-shadow: 0 0 40px rgba(0,0,0,0.8), inset 0 0 20px rgba(255, 107, 53, 0.1);
}

/* --- PROFİL DOSYASI TASARIMI --- */
.profile-dossier {
    display: grid;
    grid-template-columns: 300px 1fr; /* Sol: Avatar, Sağ: Detaylar */
    gap: 2rem;
    text-align: left;
}

.dossier-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 2rem;
    border-radius: 8px;
    border: 1px dashed var(--border-subtle);
}

.dossier-avatar-large {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--accent-primary), #bd3b0a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px var(--accent-primary-glow);
    border: 4px solid rgba(255,255,255,0.1);
}

.dossier-rank {
    font-family: 'Share Tech Mono', monospace;
    color: var(--accent-secondary);
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.dossier-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dossier-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.stats-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Yan Yana */
    gap: 1rem;
}

.stat-card {
    background: rgba(0,0,0,0.4);
    padding: 1rem;
    border-radius: 6px;
    border-left: 3px solid var(--accent-primary);
}

.stat-card.win { border-color: var(--success-color); }
.stat-card.loss { border-color: var(--danger-color); }

.stat-card h4 { font-size: 0.8rem; color: #aaa; margin: 0; font-weight: normal; }
.stat-card .value { font-size: 1.5rem; font-weight: bold; color: #fff; font-family: 'Rajdhani', sans-serif; }

/* --- LİDERLİK TABLOSU (TACTICAL DATA LIST) --- */
.leaderboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px; /* Satırlar arası boşluk */
    margin-top: 1rem;
}

.leaderboard-table th {
    text-align: left;
    color: var(--text-muted);
    font-family: 'Share Tech Mono', monospace;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.leaderboard-table td {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    border: 1px solid transparent;
}

.leaderboard-table tr:hover td {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.3);
    cursor: default;
}

.leaderboard-table tr td:first-child { border-radius: 6px 0 0 6px; }
.leaderboard-table tr td:last-child { border-radius: 0 6px 6px 0; }

/* İlk 3 Sıra Renklendirme */
.rank-1 td { border: 1px solid #FFD700; background: rgba(255, 215, 0, 0.05); color: #FFD700; }
.rank-2 td { border: 1px solid #C0C0C0; background: rgba(192, 192, 192, 0.05); color: #C0C0C0; }
.rank-3 td { border: 1px solid #CD7F32; background: rgba(205, 127, 50, 0.05); color: #CD7F32; }

/* --- NASIL OYNANIR REHBERİ --- */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    text-align: left;
}

.guide-card {
    background: rgba(255,255,255,0.03);
    padding: 1.5rem;
    border-radius: 8px;
    border-top: 2px solid var(--accent-secondary);
}

.guide-card h3 { color: var(--accent-secondary); font-size: 1.2rem; }
.guide-card ul { padding-left: 1.2rem; margin: 0; color: var(--text-light); }
.guide-card li { margin-bottom: 0.5rem; }

/* Mobil Uyumluluk */
@media (max-width: 800px) {
    .profile-dossier, .guide-grid { grid-template-columns: 1fr; }
    .stats-grid-horizontal { grid-template-columns: 1fr 1fr; }
    .dossier-left { flex-direction: row; gap: 1rem; padding: 1rem; }
    .dossier-avatar-large { width: 80px; height: 80px; font-size: 2rem; margin: 0; }
}
/* ======================================================================
   Z-INDEX DÜZELTMESİ (KRİTİK)
   Misafir modalının giriş ekranının arkasında kalmasını önler
   ====================================================================== */

#guest-login-modal {
    z-index: 99999 !important; /* Giriş ekranından (1000) çok daha yüksek */
}

/* Modal açıldığında arkadaki giriş ekranını biraz daha karartalım */
#guest-login-modal.active {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* Giriş ekranındaki butonun tıklanabilir olduğundan emin olalım */
#guestLoginBtn {
    position: relative;
    z-index: 1002;
    cursor: pointer;
}
/* style.css EN ALTINA EKLE */

#guest-login-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.96) !important; /* Arkayı simsiyah yap */
    z-index: 2147483647 !important; /* Max Integer Değeri */
}

/* Modal içindeki kutuyu da garantiye alalım */
#guest-login-modal.active .modal-content {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
    z-index: 2147483648 !important; /* Overlay'den 1 fazla */
}
/* ======================================================================
   LOBİ GENİŞLETME & POPOVER AYARLARI
   ====================================================================== */
#lobby.container {
    /* ORTALAMA İŞLEMİ (Giriş ekranı gibi tam ortaya sabitliyoruz) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* BOYUT AYARLARI (Biraz daralttık) */
    width: 90%;          /* %95'ten %90'a çektik */
    max-width: 1450px;   /* 1600px'ten 1450px'e çektik (Hala geniş ama devasa değil) */
    height: 85vh;        /* Ekranın %85'i kadar yükseklik */
    
    /* İÇ DÜZEN */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0; /* İç dolguyu sıfırladık, paneller halledecek */
    
    /* GÖRÜNÜM */
    background: transparent; /* Arkası şeffaf kalsın, paneller dolu zaten */
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}

#lobby-layout {
    display: grid;
    grid-template-columns: 1fr 2.5fr; /* Sağ tarafı biraz daha genişlettik */
    gap: 1.5rem;
    height: 100%;       /* Kutunun tamamını kapla */
    align-items: stretch;
    padding: 1rem;
}

/* Panellerin içini düzenle */
.lobby-column {
    background: rgba(10, 14, 23, 0.95); /* Koyu yarı saydam */
    border: 1px solid var(--accent-primary);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto; /* İçerik taşarsa kaydırma çubuğu çıksın */
}

/* Oyuncu Listesi Öğesi (Popover için referans noktası olacak) */
#playerList li {
    position: relative; /* KRİTİK: Popover buna göre konumlanacak */
    padding: 1.2rem;    /* Daha büyük tıklama alanı */
    margin-bottom: 10px;
}

/* 2. Oyuncu Seçenekleri Menüsü (Popover) Tasarımı */
.player-popover {
    position: absolute;
    /* Konumlandırma JS ile değil CSS ile yapılacak artık */
    top: 50%;           
    right: 10px;        /* İsmin sağ tarafında belirsin */
    transform: translateY(-50%) translateX(10px); /* Dikey ortala */
    
    background: rgba(10, 14, 23, 0.98);
    border: 1px solid var(--accent-primary);
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    border-radius: 6px;
    padding: 5px;
    display: flex;
    gap: 5px;
    z-index: 100;
    
    /* Animasyon */
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

.player-popover.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.player-popover button {
    font-size: 0.8rem;
    padding: 8px 15px;
    white-space: nowrap;
    margin: 0;
}

/* Mobil uyumluluk */
@media (max-width: 1000px) {
    #lobby-layout { grid-template-columns: 1fr; }
    .player-popover { 
        top: 100%; 
        right: 0; 
        left: 0; 
        transform: translateY(5px);
        width: 100%;
        justify-content: center;
    }
}
/* ======================================================================
   DÜZELTMELER: ANİMASYON & OYUNCU LİSTESİ HİZALAMA
   ====================================================================== */

/* 1. SORUN ÇÖZÜMÜ: Ortalamayı bozmadan animasyon yap */
@keyframes fadeInCentered {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.95); /* Başlarken de ortada */
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1);    /* Biterken de ortada */
    }
}

/* Lobiye bu yeni animasyonu uygula */
#lobby.container {
    animation: fadeInCentered 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    /* Eski animasyonların ezmemesi için transform-origin'i sıfırlıyoruz */
    transform-origin: center center;
}

/* 2. SORUN ÇÖZÜMÜ: Sol Panel Yukarı, Sağ Panel Alt-Üst */
.lobby-column {
    justify-content: flex-start !important; /* Her şeyi yukarı yasla */

}

/* Sağ paneldeki buton grubunu en aşağı it */
#lobby-actions-wrapper {
    margin-top: auto !important; /* Sihirli kod: En alta yapıştırır */
}

/* Oyuncu listesi her zaman yukarıdan başlasın ve boşlukları korusun */
#playerList {
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    justify-content: flex-start; /* Listeyi yukarı yasla */
}

/* Oyuncu kartları arasındaki boşluk */
#playerList li {
    margin-bottom: 0.8rem;
}
/* ======================================================================
   OYUN İÇİ TIKLAMA SORUNU DÜZELTMESİ (Z-INDEX BOOST)
   ====================================================================== */

/* Oyun ekranını, diğer tüm arka planların üzerine çıkar */
#game-container {
    position: relative;
    z-index: 100 !important; /* Giriş ekranının altında ama arkaplanın üstünde */
}

/* Kontrol Panelini (Butonlar, Emote, Chat) daha da yukarı al */
#control-panel {
    position: relative;
    z-index: 200 !important;
    pointer-events: auto !important; /* Tıklamayı garantiye al */
}

/* Emote Menüsünü en üste al (Açıldığında arkada kalmasın) */
#emote-menu, .emote-menu-container {
    z-index: 300 !important;
}

/* Harita (Canvas) tıklanabilir olsun */
canvas {
    position: relative;
    z-index: 150 !important;
    pointer-events: auto !important;
}

/* Eğer yanlışlıkla açık kalan bir modal varsa tıklamayı engellemesin */
.modal-overlay:not(.active) {
    pointer-events: none !important;
    z-index: -1 !important; /* Görünmezse en alta gönder */
}
/* ======================================================================
   YENİ TAKTİKSEL SALDIRI EKRANI (PRO DESIGN)
   ====================================================================== */

/* Modalın kendisi */
.tactical-modal {
    max-width: 800px !important; /* Genişlik artırıldı */
    width: 95%;
    background: linear-gradient(180deg, #0f131a 0%, #050505 100%);
    border: 1px solid var(--accent-primary);
    box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(255, 107, 53, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem !important;
}

/* Büyük Monitörler İçin Ölçekleme */
@media (min-width: 1600px) {
    .tactical-modal {
        transform: scale(1.15); /* %15 daha büyük göster */
        transform-origin: center center;
    }
}

/* Header Kısmı */
.tactical-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1rem;
}

.tactical-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-light);
}

.chance-big-display {
    text-align: right;
}

#final-chance-percent {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
}

.chance-big-display .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* Grid Yapısı (Saldıran VS Savunan) */
.combatants-grid {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 1rem;
    align-items: center;
}

.combatant-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.combatant-card.attacker { border-color: var(--accent-primary); background: rgba(255, 107, 53, 0.05); }
.combatant-card.defender { border-color: var(--accent-secondary); background: rgba(0, 212, 255, 0.05); }

.combatant-role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.combatant-avatar {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    border: 2px solid rgba(255,255,255,0.1);
}

.combatant-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: #fff;
}

.combatant-power {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* VS Logosu */
.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Buff/Debuff Etiketleri */
.buff-container {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.tactical-tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}
.tag-green { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid #10b981; }
.tag-red { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid #ef4444; }
.tag-gold { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid #f59e0b; }

/* Alt Kontroller */
.attack-controls {
    background: rgba(0,0,0,0.2);
    padding: 1.5rem;
    border-radius: 8px;
}

.attack-controls label { margin-bottom: 0.5rem; display: block; }
#attack-amount-select { margin-bottom: 1rem; background: var(--bg-dark); }

.action-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Mobil Uyumluluk - DEVRE DIŞI (PC görünümü korunuyor) */
/* @media (max-width: 700px) { ... } DEVRE DIŞI */
/* ======================================================================
   MOUSE TAKİPLİ SPOT IŞIĞI (SAVAŞ ODASI EFEKTİ)
   ====================================================================== */

#left-panel {
    position: relative;
    overflow: hidden;
    cursor: none; /* Mouse imlecini gizler (daha gerçekçi fener hissi için) */
    /* Eğer mouse'u görmek istersen üstteki satırı sil */
}

#spotlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 160;
    
    --cursor-x: 50%;
    --cursor-y: 50%;

    /* GÜNCELLENMİŞ "HARD LIGHT" AYARLARI */
    background: radial-gradient(
        /* 400px: İdeal genişlik */
        circle 250px at var(--cursor-x) var(--cursor-y),
        
        /* MERKEZ (Işığın Vurduğu Yer): 
           Beyaz/Hafif Sarı ekleyerek haritayı PARLATIYORUZ. 
           0.4 opacity değeri parlaklık şiddetidir. */
        rgba(255, 255, 230, 0.4) 0%,    
        
        /* GEÇİŞ BÖLGESİ: 
           Burada haritanın orijinal rengine dönüyoruz */
        rgba(255, 255, 255, 0) 30%,       
        
        /* KENARLAR (Işığın Vurmadığı Yer): 
           Koyu karanlık. 0.85 değeri bayağı koyu yapar. */
        rgba(0, 0, 0, 0.85) 100%       
    );

    /* KRİTİK DEĞİŞİKLİK: 'multiply' yerine 'hard-light' */
    /* Bu mod hem aydınlatmaya hem karartmaya izin verir */
    mix-blend-mode: hard-light;
    
    transition: background 0.05s ease-out;
}
/* style.css EN ALTINA EKLE: Boyut ve Renk Eşitleme */

/* 1. Kapsayıcıyı Dikeyde Eşitle */
#control-panel {
    display: flex !important;
    align-items: stretch !important; /* Tüm düğmelerin boyunu en uzuna göre eşitler */
    gap: 5px !important;
    padding-top: 5px !important;
    margin-top: 0 !important;
    background: var(--bg-dark-main);
    /* Eğer panelin kendi yüksekliği yetersiz geliyorsa min-height verebiliriz: */
    min-height: 50px !important; 
}

/* 2. Lobi ve Emote Butonlarını Diğerlerine Benzet (Koyu Stil & Tam Boy) */
#menuBtn, #toggleEmoteBtn {
    /* Boyut Ayarları */
    flex: 1 !important;
    height: auto !important; /* Stretch sayesinde panel kadar uzar */
    min-height: 100% !important; /* Garanti olsun diye */
    
    /* İçerik Ortalama */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Font ve Kenar */
    padding: 0 10px !important; /* Dikey padding'i kaldırdık, flex halledecek */
    font-size: 1.2em !important;
    font-family: 'Teko', 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;

    /* RENK: Koyu Zemin + Turuncu Çerçeve (Resimdeki gibi) */
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%), #1f2937 !important;
    border: 1px solid var(--accent-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Hover (Üzerine Gelince) Efekti */
#menuBtn:hover, #toggleEmoteBtn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%), var(--accent-primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px var(--accent-primary-glow) !important;
}

/* 3. Sohbet ve Olay Günlüğü Summary Düğmelerini de Garantiye Al */
/* (Bunlar zaten düzgün görünüyor ama yükseklik farkı oluşmasın diye flex yapıyoruz) */
#control-panel details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#control-panel details summary {
    height: 100% !important; /* Details kutusunu tamamen doldur */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important; /* Çok küçülmesini engelle */
}
/* style.css EN ALTINA EKLE: Tıklama Sorunu Çözümü */

/* 1. Yazı-Tura Ekranının Tıklamaları Engellemesini Kapat */
#coin-flip {
    pointer-events: none !important; /* Tıklamaların içinden geçip arkadaki butonlara ulaşmasını sağlar */
    background: transparent !important; /* Garanti olsun diye */
}

/* 2. Kontrol Panelini Her Zaman Tıklanabilir ve En Üstte Tut */
#control-panel {
    position: relative !important;
    z-index: 10000 !important; /* Coin Flip'ten (9999) bile daha yüksek yapıyoruz */
    pointer-events: auto !important; /* Tıklamayı zorla aç */
}

/* 3. Paneldeki Butonların Tıklanabilirliğini Garantiye Al */
#control-panel button, 
#control-panel summary, 
#control-panel .btn {
    pointer-events: auto !important; /* Her durumda tıklanabilir olsun */
    cursor: pointer !important;
}
/* === TOGGLE SWITCH TASARIMI === */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid #555;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

/* Açıkken (Checked) Rengi */
input:checked + .slider {
  background-color: var(--success-color); /* Yeşil */
  border-color: var(--success-color);
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* Yuvarlak Köşeler */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* ======================================================================
   DEMİR PERDE (ULTİ) UYARI STİLİ - FİNAL
   ====================================================================== */
.iron-curtain-alert {
    position: fixed;
    top: 50%;      /* Tam orta */
    left: 50%;     /* Tam orta */
    /* Transform burada animasyon tarafından yönetilecek */
    
    background: rgba(10, 14, 23, 0.98); /* Daha koyu arka plan */
    border: 3px solid var(--accent-secondary); /* Kalın çerçeve */
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.6), inset 0 0 20px rgba(0, 212, 255, 0.2);
    
    color: #fff;
    padding: 2.5rem 4rem; /* İyice büyüttük */
    border-radius: 16px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    
    z-index: 10000; 
    pointer-events: none; /* Tıklamalar arkaya geçer */
    
    /* Yeni Animasyon Tanımı */
    animation: popInCenter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.iron-curtain-alert strong {
    font-size: 2.2rem; /* Başlık devasa */
    color: var(--accent-secondary);
    display: block;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px var(--accent-secondary);
}

.iron-curtain-alert span {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem; /* Alt yazı okunabilir */
    color: #e2e8f0;
    font-weight: 600;
}

/* Merkeze sabitleyen özel animasyon */
@keyframes popInCenter {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.5); /* Ortada ama küçük başla */
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1); /* Ortada ve normal boyut */
    }
}

/* ======================================================================
   MOBİL İÇİN PC GÖRÜNÜMÜ ÖLÇEKLEMESİ
   Telefonda PC'deki aynı görünümü, sadece küçültülmüş olarak gösterir
   ====================================================================== */

/* Mobil cihazlar için temel ayarlar */
@media screen and (max-width: 1200px) {
    /* HTML ve Body'nin PC gibi davranmasını sağla */
    html {
        font-size: 16px !important; /* PC boyutunu koru */
    }
    
    body {
        min-width: 1920px !important; /* PC genişliğini zorla */
        overflow-x: auto;
        overflow-y: auto;
    }
    
    /* Tüm container'ların PC boyutunu korumasını sağla */
    .container {
        max-width: 1200px !important;
        width: 100% !important;
    }
    
    /* Auth container PC boyutunda kalsın */
    #auth-container.container {
        max-width: 420px !important;
        min-height: 100vh;
    }
    
    /* Lobby menüsü PC boyutunda */
    #lobby-menu.container,
    #lobby.container {
        max-width: 1200px !important;
    }
    
    /* Oyun container PC boyutunda */
    #game-container {
        min-width: 1200px !important;
        width: 100% !important;
        height: 100vh !important;
    }
    
    /* Canvas PC boyutunda */
    canvas {
        min-width: 800px !important;
    }
    
    /* Scoreboard PC düzeninde */
    #scoreboard {
        flex-wrap: nowrap !important;
    }
    
    /* Kontrol paneli PC düzeninde */
    #control-panel {
        flex-wrap: nowrap !important;
    }
    
    /* Modal'lar PC boyutunda */
    .modal-content {
        min-width: 400px !important;
    }
    
    .tactical-modal {
        min-width: 700px !important;
    }
}

/* Yatay mod için özel ayarlar */
@media screen and (max-width: 1200px) and (orientation: landscape) {
    body {
        min-height: 100vh;
    }
    
    #game-container {
        height: 100vh !important;
        min-height: 500px !important;
    }
}

/* Dikey mod için uyarı */
@media screen and (max-width: 1200px) and (orientation: portrait) {
    body::after {
        content: '📱 Lütfen cihazınızı yatay çevirin / Please rotate your device to landscape';
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 107, 53, 0.95);
        color: white;
        padding: 15px 25px;
        border-radius: 10px;
        font-family: 'Orbitron', sans-serif;
        font-size: 14px;
        z-index: 99997;
        text-align: center;
        box-shadow: 0 5px 20px rgba(0,0,0,0.5);
        animation: bounce 2s infinite;
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(-10px); }
    }
}

/* Tam ekran modunda mobil uyarıları gizle */
.fullscreen-active body::after {
    display: none !important;
}

/* Touch cihazlar için buton boyutlarını koruma */
@media (pointer: coarse) {
    .btn, button, summary {
        min-height: 44px !important; /* Apple'ın önerdiği minimum touch hedef boyutu */
    }
    
    /* Emote butonları için touch alanı */
    .emote-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}
/* EKRAN GÖRÜNÜRLÜK GARANTİSİ */

/* Auth Container geçişlerde takılmasın */
#auth-container {
    transition: opacity 0.3s ease;
}

/* Landing View ve Form Container çakışmasın */
#auth-landing-view {
    display: flex; /* Script ile none yapılmadığı sürece flex */
    flex-direction: column;
}

/* Misafir butonu efekti */
#btn-instant-guest:active {
    transform: scale(0.98);
}

#lobby-menu {
    flex-direction: column !important; /* Yan yana değil, alt alta diz */
    width: 100%;
    max-width: 1400px; /* Genişliği koru */
}

/* Header'ın genişliğini garantiye al */
.lobby-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
/* ======================================================================
   SOL PANEL YÜKSEKLİK & ANİMASYON DÜZELTMESİ (FIX - FINAL)
   Hem orantısız büyümeyi engeller, hem de sağ alttan kayma sorununu çözer.
   ====================================================================== */

/* 1. ÖZEL ANİMASYON: Translate değerini koruyarak scale yapar */
@keyframes fadeInCentered {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.95); /* Başlangıç: Ortada ve biraz küçük */
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1);    /* Bitiş: Ortada ve tam boy */
    }
}

/* 2. Ana Kutuyu İçeriğe Göre Daralt ve Ortala */
#lobby-menu.container {
    height: fit-content !important; /* Kutuyu içeriği kadar yap */
    min-height: auto !important;    /* Minimum zorunluluğu kaldır */
    max-height: 90vh;               /* Ekranın dışına taşmasını engelle */
    
    /* Ortalamayı koru */
    position: absolute;
    top: 50%;
    left: 50%;
    /* Statik duruşta ortada kalması için: */
    transform: translate(-50%, -50%); 
    
    /* ANİMASYON DÜZELTMESİ: Eski animasyonu eziyoruz */
    animation: fadeInCentered 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transform-origin: center center;
    
    /* İçerik taşarsa (küçük ekranda) scroll çıkar */
    overflow-y: auto; 
}

/* 3. Grid Yapısını Sıkılaştır */
#lobby-menu-content {
    height: auto !important; /* Grid'in boyunu serbest bırak */
    align-items: stretch;    /* Sol ve Sağ panelin boyunu birbirine eşitle */
    min-height: 0;
}

/* 4. Panellerin Animasyonunu Güncelle (Sağdan/Soldan gelmeyi kapat) */
.lobbies-panel {
    height: auto !important;    /* Zorlama yüksekliği kaldır */
    display: flex;
    flex-direction: column;
    /* Yandan kayma yerine aşağıdan yukarı hafifçe belirsin */
    animation: fadeInUp 0.5s ease-out !important; 
}

.actions-panel {
    height: auto !important; /* Kendi içeriği kadar yer kaplasın */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Sağ panel de aşağıdan yukarı belirsin */
    animation: fadeInUp 0.6s ease-out !important; 
}

/* 5. Listenin İç Kaydırması */
.lobbies-list {
    flex: 1;             /* Kalan alanı kapla */
    overflow-y: auto;    /* Eğer liste sağ panelden uzunsa scroll çıkar */
    
    /* Kritik Ayar: İçerik çok azsa bile paneli çökertme, çoksa da kutuyu patlatma */
    min-height: 200px;   
    max-height: 100%;
}