/* --- RESET & TEMEL --- */
* { box-sizing: border-box; user-select: none; outline: none; }

body {
    margin: 0; padding: 0;
    /* Mobilde masaüstü görünümü için min-width şart */
    min-width: 1280px; 
    height: 100vh;
    background: #0f1c25;
    font-family: 'Fredoka One', sans-serif;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- BACKGROUND --- */
.bg-animation {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    background: radial-gradient(circle at center, #1e272e 0%, #000000 100%);
}
.hex-grid {
    position: absolute; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/hexagon.png');
    opacity: 0.1;
}
.particles span {
    position: absolute; bottom: -50px; background: rgba(255, 255, 255, 0.1);
    border-radius: 50%; animation: rise 15s infinite ease-in;
}
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(-100vh); opacity: 0; } }

/* --- ARAYÜZ (SABİT 3 SÜTUN) --- */
.game-interface {
    position: relative; z-index: 10;
    width: 1200px; /* Sabit Genişlik */
    height: 700px; /* Sabit Yükseklik */
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 30px; 
    align-items: center;
    margin-bottom: 40px;
}

.panel { display: flex; flex-direction: column; height: 100%; justify-content: center; }

/* --- KUTULAR --- */
.box {
    background: rgba(30, 39, 46, 0.75);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 15px; margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* --- SOL PANEL --- */
.profile-box { display: flex; align-items: center; gap: 15px; height: 90px; }
.avatar-container img { width: 60px; height: 60px; border-radius: 10px; border: 2px solid #34495e; }
.user-details { flex: 1; }
.username { font-size: 1.1rem; margin-bottom: 5px; }
.xp-bar-wrap { width: 100%; height: 12px; background: rgba(0,0,0,0.5); border-radius: 6px; position: relative; }
.xp-fill { height: 100%; background: #e67e22; border-radius: 6px; }
.xp-text { position: absolute; top: -18px; right: 0; font-size: 0.8rem; color: #ccc; }

.server-box { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.btn-connect { width: 100%; background: #2980b9; color: white; border: none; padding: 12px; border-radius: 8px; margin-bottom: 15px; font-family: inherit; font-size: 1rem; cursor: pointer; }
.flags-area { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; }
.flag {
    width: 45px; height: 32px; background-size: cover; border-radius: 4px;
    cursor: pointer; opacity: 0.6; transition: 0.2s; border: 2px solid transparent;
}
.flag:hover, .flag.active { opacity: 1; border-color: #f1c40f; transform: scale(1.1); }
.f-us { background-image: url('https://flagcdn.com/w80/us.png'); }
.f-br { background-image: url('https://flagcdn.com/w80/br.png'); }
.f-de { background-image: url('https://flagcdn.com/w80/de.png'); }
.f-tr { background-image: url('https://flagcdn.com/w80/tr.png'); }

.server-list {
    flex: 1; overflow-y: auto; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 5px;
}
.server-list::-webkit-scrollbar { width: 6px; }
.server-list::-webkit-scrollbar-thumb { background: #e67e22; border-radius: 3px; }

.s-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer; font-size: 0.95rem; transition: 0.2s;
}
.s-item:hover { background: rgba(255,255,255,0.1); color: #f1c40f; }
.ww-icon { color: #f1c40f; margin-left: 5px; }

.side-buttons { display: flex; gap: 15px; height: 60px; }

/* --- ORTA PANEL --- */
.col-center { align-items: center; justify-content: flex-start; padding-top: 50px; }
.logo-text {
    font-size: 4.5rem; margin: 0;
    background: linear-gradient(to bottom, #ffeaa7, #fab1a0);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(4px 4px 0 #000); letter-spacing: 2px;
}
.season-text { color: #74b9ff; margin-bottom: 30px; font-size: 1.3rem; }

/* Skin Viewer & Solucan Animasyonu */
.skin-viewer { display: flex; align-items: center; margin-bottom: 30px; }
.arrow-btn { background: none; border: none; color: #f39c12; font-size: 2.5rem; cursor: pointer; transition: 0.2s; }
.arrow-btn:hover { transform: scale(1.1); }
.worm-display { 
    width: 300px; height: 80px; background: rgba(0,0,0,0.25); 
    border-radius: 40px; margin: 0 20px; 
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.worm-body-css {
    width: 240px; height: 45px; 
    background: repeating-linear-gradient(45deg, #2ecc71, #2ecc71 15px, #27ae60 15px, #27ae60 30px);
    border-radius: 25px; border: 3px solid white; position: relative; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: swim 2s infinite ease-in-out alternate;
}
@keyframes swim {
    0% { transform: translateY(0) rotate(0deg) scaleX(1); }
    25% { transform: translateY(-3px) rotate(-1deg); }
    50% { transform: translateY(0) rotate(0deg) scaleX(1.02); } 
    75% { transform: translateY(3px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg) scaleX(1); }
}

.face { position: absolute; right: 8px; top: 0; height: 100%; width: 30px; }
.eye { position: absolute; width: 10px; height: 10px; background: black; border-radius: 50%; border: 2px solid white; top: 12px; }
.eye.left { left: 0; } .eye.right { right: 0; }

.play-controls { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 15px; }
.input-wrapper input {
    width: 100%; padding: 15px; border-radius: 12px; border: none; text-align: center;
    font-family: 'Fredoka One'; font-size: 1.3rem; background: #ecf0f1; color: #2c3e50; outline: none;
}
.btn-play {
    width: 100%; padding: 20px; font-size: 2.2rem; background: linear-gradient(to bottom, #2ecc71, #27ae60);
    color: white; border: none; border-radius: 15px; font-family: 'Fredoka One'; cursor: pointer;
    box-shadow: 0 8px 0 #1e8449; transition: 0.1s; letter-spacing: 1px;
}
.btn-play:active { transform: translateY(6px); box-shadow: none; }
.sub-actions { display: flex; gap: 15px; }

.mobile-apps { display: flex; gap: 15px; margin-top: 30px; justify-content: center; }
.app-badge { 
    background: rgba(0,0,0,0.8); padding: 10px 15px; border-radius: 8px; 
    font-size: 0.9rem; border: 1px solid #555; cursor: pointer; 
    display: flex; align-items: center; gap: 8px; white-space: nowrap; 
}

/* --- SAĞ PANEL --- */
.col-right { justify-content: center; }
.coin-display { 
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; 
    background: rgba(0,0,0,0.5); padding: 12px; border-radius: 12px; margin-bottom: 20px; 
}
.text-yellow { color: #f1c40f; font-size: 1.6rem; }
.amount { font-size: 1.6rem; color: white; }
.btn-add { background: #27ae60; border: none; color: white; width: 35px; height: 35px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 1.2rem; }

.ad-space { 
    flex: 1; background: rgba(255,255,255,0.05); border: 2px dashed rgba(255,255,255,0.2); 
    border-radius: 12px; display: flex; align-items: center; justify-content: center; 
    margin-bottom: 20px; color: #666; font-size: 1.2rem; 
}
.store-controls { display: flex; gap: 15px; height: 75px; }

/* --- ORTAK BUTONLAR --- */
.btn { border: none; border-radius: 10px; cursor: pointer; color: white; font-family: 'Fredoka One'; padding: 0 15px; flex: 1; box-shadow: 0 5px 0 rgba(0,0,0,0.3); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.btn:active { transform: translateY(4px); box-shadow: none; }
.blue { background: #3498db; border-bottom: 4px solid #2980b9; }
.orange { background: #e67e22; border-bottom: 4px solid #d35400; }
.green { background: #2ecc71; border-bottom: 4px solid #27ae60; font-size: 1.4rem; gap: 10px; }
.white { background: #ecf0f1; color: #2c3e50; border-bottom: 4px solid #bdc3c7; height: 45px; }
.dark { background: #34495e; border-bottom: 4px solid #2c3e50; }
.square { flex: none; width: 75px; font-size: 1.8rem; }

/* --- MODAL --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 2000; display: none;
    align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.modal-overlay.active { display: flex; }
.modal-box { width: 500px; height: 400px; background: #2c3e50; border-radius: 20px; border: 3px solid #f39c12; overflow: hidden; display: flex; flex-direction: column; }
.modal-header { padding: 20px; background: rgba(0,0,0,0.2); display: flex; justify-content: space-between; align-items: center; color: #f1c40f; font-size: 1.2rem; }
.modal-body { padding: 30px; display: flex; gap: 20px; justify-content: center; align-items: center; flex: 1; }
.store-item { width: 100px; height: 100px; background: #34495e; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.store-item:hover { background: #3d566e; border-color: white; transform: translateY(-5px); }
.store-item i { font-size: 2.5rem; margin-bottom: 10px; color: #bdc3c7; }
.modal-footer-text { padding: 15px; text-align: right; background: rgba(0,0,0,0.3); font-size: 1.2rem; }
.btn-close { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }

/* --- FOOTER --- */
.site-footer {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(11, 16, 22, 0.95);
    padding: 10px; text-align: center; font-family: 'Arial', sans-serif;
    border-top: 1px solid rgba(255,255,255,0.05); z-index: 900;
}
.footer-links { margin-bottom: 5px; }
.footer-links a { color: #888; text-decoration: none; font-size: 0.85rem; transition: 0.2s; margin: 0 5px; }
.footer-links a:hover { color: white; }
.sep { color: #444; font-size: 0.8rem; }
.copyright { color: #555; font-size: 0.75rem; }

/* --- GAME CANVAS --- */
#gameCanvas {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #0b1016; z-index: 9999;
}