:root {
    /* Font Sizes */
    --ui-font-size-large: clamp(1.5em, 3vw, 2em);
    --ui-font-size-medium: clamp(1.1em, 2.2vw, 1.5em);
    --ui-font-size-base: clamp(0.9em, 1.8vw, 1em);
    --ui-font-size-small: clamp(0.7em, 1.5vw, 0.8em);

    /* Askeri Renk Paleti */
    --olive-dark: #2d3a1f;
    --olive-mid: #4a5d23;
    --olive-light: #6b7c3f;
    --khaki: #c3b091;
    --sand: #d4c4a8;
    --rust: #8b4513;
    --metal-dark: #3a3a3a;
    --metal-mid: #5a5a5a;
    --metal-light: #7a7a7a;
    --warning-red: #8b0000;
    --warning-orange: #b8600f;
    --health-green: #4a7c23;
    --shield-blue: #4a6a8a;

    /* Panel Arka Planları */
    --panel-bg: linear-gradient(180deg, #3d4a2f 0%, #2d3a1f 100%);
    --panel-border: #1a2010;
    --panel-inset: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(255,255,255,0.1);

    /* Texture Patterns */
    --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    --metal-scratches: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 3px,
        rgba(255,255,255,0.02) 3px,
        rgba(255,255,255,0.02) 4px,
        transparent 4px,
        transparent 12px
    ), repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 8px,
        rgba(0,0,0,0.03) 8px,
        rgba(0,0,0,0.03) 9px
    );

    --canvas-texture: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.05) 1px,
        rgba(0,0,0,0.05) 2px
    ), repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.05) 1px,
        rgba(0,0,0,0.05) 2px
    );

    --rivet-shadow: inset 1px 1px 2px rgba(255,255,255,0.1), inset -1px -1px 2px rgba(0,0,0,0.3);

    /* Juice Renkleri (Askeri) */
    --juice-gold: #d4a017;
    --juice-orange: #ff8040;
    --juice-green: #6b8e23;
    --juice-blue: #5a8aba;
    --juice-purple: #8b4a8b;

    /* Eski uyumluluk için (geçiş süreci) */
    --crt-color: var(--olive-light);
    --bar-bg: rgba(45, 58, 31, 0.8);
    --shield-color: var(--shield-blue);
}

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    /* Mobil browser bar'ı gizle */
    -webkit-overflow-scrolling: touch;
    /* Askeri eldiven custom cursor */
    cursor: url('Asset/image/cursor-32.png') 7 0, auto;
}

/* Tıklanabilir elemanlar — büyük pointer cursor */
button:not(:disabled),
a,
select,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"] {
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer !important;
}

/* Disabled/kilitli elemanlar — custom not-allowed */
button:disabled,
button.max-level {
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed !important;
}

body {
    background: var(--canvas-texture), linear-gradient(135deg, #1a1a14 0%, #2a2a1e 50%, #1a1a14 100%);
    color: var(--khaki);
    font-family: 'Oxanium', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    /* iOS Safari safe area desteği */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ================================================================
   JUICE EFEKT SİSTEMİ - Global Animasyonlar
   ================================================================ */

@keyframes shine-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes elastic-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(0.95); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes juice-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes pulse-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    50% { filter: brightness(1.2) drop-shadow(0 0 15px var(--juice-gold)); }
}

@keyframes rotate-shine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

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

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

@keyframes number-pop {
    0% { transform: scale(0) translateY(0); opacity: 0; }
    20% { transform: scale(1.5) translateY(-10px); opacity: 1; }
    40% { transform: scale(0.9) translateY(-15px); }
    60% { transform: scale(1.1) translateY(-25px); }
    100% { transform: scale(0.8) translateY(-50px); opacity: 0; }
}

@keyframes liquid-wobble {
    0%, 100% { transform: translateY(0) scaleY(1); }
    25% { transform: translateY(-2px) scaleY(1.02); }
    50% { transform: translateY(0) scaleY(0.98); }
    75% { transform: translateY(1px) scaleY(1.01); }
}

@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 5px rgba(195, 176, 145, 0.3); }
    50% { text-shadow: 0 0 20px rgba(195, 176, 145, 0.6), 0 0 30px rgba(255, 215, 0, 0.3); }
}

/* Juice Utility Classes */
.juice-bounce { animation: elastic-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.juice-pop { animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.juice-shake { animation: juice-shake 0.4s ease-out; }
.juice-pulse { animation: pulse-glow 1.5s ease-in-out infinite; }

/* Rivet Detayları */
.rivet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #6a6a6a, #3a3a3a);
    border-radius: 50%;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), inset -1px -1px 2px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.5);
}

#gameCanvas {
    display: block;
    background-color: #0c0c0c;
}

#gameCanvas {
    position: relative;
    z-index: 1; /* Canvas 2D: arka plan, birimler, mermiler */
}

#gameContainer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--canvas-texture), #1a1a14;
    /* Mobilde border'ı kaldır (ekranı taşırıyor) */
    border: none;
    box-shadow: none;
    /* iOS Safari için */
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    /* Oyun sırasında cursor gizle */
    cursor: none;
}

.game-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000; /* HUD - Tüm oyun katmanlarının çok üstünde (child elementler 6-10 arası z-index kullanıyor) */
}

/* gameContainer içindeki tüm modaller/overlay'ler — custom cursor geri getir */
#achievement-modal-overlay,
#tutorial-modal-overlay,
#reminder-modal-overlay,
#controls-help-overlay,
#statsPanelModal,
.level-up-screen,
.game-over-screen,
.pause-menu,
.lootbox-overlay,
#crewSelectionModal,
#missionLoading {
    cursor: url('Asset/image/cursor-32.png') 7 0, auto;
}

#top-head-band {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--metal-scratches), var(--panel-bg);
    border-bottom: clamp(2px, 0.3vh, 3px) solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    padding: clamp(3px, 1vh, 8px) clamp(8px, 1.5vw, 15px);
    box-sizing: border-box;
    z-index: 6;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* Noise texture overlay */
#top-head-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--noise-texture);
    opacity: 0.04;
    pointer-events: none;
}

.top-ui {
    position: relative;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(6px, 1.5vw, 15px);
}

.top-left-ui {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 10px);
}

.top-center-ui {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

.top-right-ui {
    display: flex;
    align-items: center;
    gap: 15px;
}

#bossBarsWrapper {
    position: absolute;
    top: clamp(36px, 12vh, 120px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40%, 50vw, 50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.boss-health-container {
    width: 100%;
    height: clamp(14px, 3vh, 25px);
    background-color: rgba(51, 51, 51, 0.7);
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    position: relative;
    transition: all 0.3s ease-in-out;
}

.boss-health-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 68, 68, 0.4), rgba(255, 0, 0, 0.4));
    transition: width 0.2s linear;
}

.boss-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: var(--ui-font-size-base);
    text-shadow: 1px 1px 2px black;
    width: 100%;
    text-align: center;
}

/* --- Panel and HUD Styles --- */

.info-display {
    background: var(--canvas-texture), linear-gradient(180deg, #2a2a22 0%, #1a1a14 100%);
    border: 2px solid transparent;
    border-radius: 2px;
    padding: clamp(2px, 0.8vh, 6px) clamp(6px, 1vw, 12px);
    color: var(--khaki);
    font-family: 'Oxanium', sans-serif;
    font-size: var(--ui-font-size-small);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--panel-inset), inset 0 0 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
    position: relative;
}

/* Ekran cam efekti */
.info-display::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    border-radius: 1px;
    pointer-events: none;
}

/* === GÖREV CHECKLIST === */
.mission-checklist {
    position: fixed;
    top: clamp(36px, 8vh, 80px);
    left: 10px;
    background: linear-gradient(180deg, rgba(45, 58, 31, 0.95) 0%, rgba(30, 40, 20, 0.95) 100%);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: clamp(4px, 1vh, 10px) clamp(6px, 1vw, 12px);
    min-width: clamp(120px, 18vw, 200px);
    max-width: clamp(160px, 22vw, 240px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 100;
    font-family: 'Segoe UI', sans-serif;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mission-checklist.hidden {
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
}

.mission-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
}

.mission-icon {
    font-size: 16px;
}

.mission-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--sand);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mission-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mission-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border-left: 3px solid var(--olive-mid);
    transition: all 0.3s ease;
}

.mission-item.completed {
    border-left-color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

.mission-item.completed .mission-checkbox {
    color: #4ade80;
    text-shadow: 0 0 8px #4ade80;
}

.mission-item.completed .mission-text {
    color: #4ade80;
    text-decoration: line-through;
    opacity: 0.8;
}

.mission-item.active {
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    animation: mission-pulse 2s infinite ease-in-out;
}

@keyframes mission-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
}

.mission-checkbox {
    font-size: 14px;
    color: var(--khaki);
    min-width: 18px;
    text-align: center;
}

.mission-text {
    font-size: 11px;
    color: var(--sand);
    line-height: 1.3;
}

.mission-progress {
    margin-top: 10px;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.mission-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px #4ade80;
}

/* Görev tamamlandığında animasyon */
.mission-item.just-completed {
    animation: mission-complete 0.6s ease forwards;
}

@keyframes mission-complete {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); background: rgba(74, 222, 128, 0.3); }
    100% { transform: scale(1); }
}

#totalMoneyDisplay {
    border-color: #ffd700;
    color: #ffd700;
    text-shadow: 0 0 8px #ffd700;
    animation: money-glow 2s infinite ease-in-out;
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    padding: 8px 16px;
}

@keyframes money-glow {
    0%, 100% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 10px rgba(255, 215, 0, 0.7);
        border-color: #ffd700;
    }
    50% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 20px rgba(255, 215, 0, 1);
        border-color: #fff;
    }
}

#magazine-display {
    display: flex !important; /* Şarjör her zaman görünür */
    justify-content: center;
    align-items: center;
    min-height: clamp(18px, 4vh, 30px);
    font-weight: bold;
    font-size: clamp(10px, 2.5vh, 16px);
    color: var(--khaki);
}

#gameTimer { font-size: var(--ui-font-size-large); }
#score, #flag-counter, #money { font-size: var(--ui-font-size-medium); }

/* Sol üstteki silah UI kaldırıldı - alt bar kullanılıyor */
#weapon-ui {
    display: none !important;
}

#dashboard {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* PixiJS canvas (z-3) üzerinde */
    background: var(--metal-scratches), var(--panel-bg);
    border-top: clamp(2px, 0.3vh, 3px) solid transparent;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
    padding: clamp(3px, 0.5vh, 5px) clamp(6px, 1.5vw, 16px);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(6px, 1.5vw, 20px);
    pointer-events: auto;
    transition: opacity 0.3s ease;
    overflow: visible; /* CRT ve diğer elemanlar taşabilir */
}

/* Noise overlay */
#dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--noise-texture);
    opacity: 0.04;
    pointer-events: none;
}

.panel-section {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 15px);
}
/* Eski panel isimleri - geriye uyumluluk */
#left-panel { flex: 1 1 30%; }
#center-panel { flex: 1 1 40%; }
#right-panel { flex: 1 1 30%; justify-content: flex-end; }

/* Yeni panel yapısı - 4 bölüm: CRT Monitör | Radar | (Zırh+Şarjör) + Silahlar | Kalkan+Atılma */
#radar-panel {
    flex: 0 0 auto;
}
#stats-panel {
    flex: 1 1 auto; /* Ekran genişliğine göre esner */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Zırh sol, Silahlar sağ */
    gap: clamp(6px, 1.5vw, 15px);
    position: relative; /* Pasif yetenekler için anchor */
}
#skills-panel {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* Grup 1: Zırh + Şarjör (dikey düzen) */
#health-ammo-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: clamp(4px, 1vh, 8px);
    flex: 0 1 auto; /* Sabit genişlik, küçülebilir */
    width: clamp(150px, 22vw, 280px);
    align-self: center; /* stats-panel stretch'ten etkilenmesin */
}

/* Sol üstteki silah gösterimi kaldırıldı */

/* Harita & Pause HTML butonları — her cihazda görünür */

/* =====================================================
   XP BAR STRIP - Dashboard üstünde ince çizgi
   ===================================================== */
#xp-bar-strip {
    position: absolute;
    bottom: var(--dashboard-height, 170px); /* Dashboard yüksekliği */
    left: 0;
    width: 100%;
    height: clamp(5px, 1.2vh, 10px);
    background: linear-gradient(180deg, #0d0d0a 0%, #1a1a14 50%, #0a0a08 100%);
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    z-index: 100;
    pointer-events: none;
}

#xp-bar-strip #xp-bar-container {
    height: 100%;
    border-radius: 0;
    border: none;
    background: transparent;
}

#xp-bar-strip #xp-bar {
    position: absolute;
    top: 1px;
    left: 0;
    width: 0%;
    height: calc(100% - 2px);
    border-radius: 0;
    background: linear-gradient(180deg,
        rgba(0, 180, 255, 0.9) 0%,
        rgba(0, 120, 200, 0.8) 50%,
        rgba(0, 80, 150, 0.9) 100%);
    box-shadow: 0 0 10px rgba(0, 153, 238, 0.5),
                0 0 20px rgba(0, 153, 238, 0.3);
    transition: width 0.3s ease-out;
}

#xp-bar-strip .xp-strip-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(6px, 1vh, 9px);
    color: var(--sand);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 5;
}

#xp-bar-strip .xp-strip-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(6px, 1vh, 9px);
    color: var(--khaki);
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 5;
}

/* =====================================================
   RADAR PANEL - Minimap canvas
   ===================================================== */
#radar-panel {
    display: flex;
    align-items: center;
    justify-content: center;
}

#radarCanvas {
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(0, 0, 0, 0.3);
    background: rgba(0, 20, 0, 0.8);
    /* Dashboard küçültüldü — radar orantılı */
    width: clamp(70px, 12.5vh, 115px);
    height: clamp(70px, 12.5vh, 115px);
}

/* =====================================================
   WEAPONS PANEL - Aktif silahlar listesi (5 slot + 1 kilitli)
   ===================================================== */
/* =====================================================
   CREW PANEL - Mürettebat slotları (2x2 grid)
   ===================================================== */
#crew-display {
    --slot-size: clamp(26px, 7.5vh, 62px);
    display: grid;
    grid-template-columns: repeat(2, var(--slot-size));
    grid-template-rows: repeat(2, var(--slot-size));
    column-gap: clamp(4px, 1vh, 10px);
    row-gap: clamp(4px, 1vh, 8px);
    justify-items: stretch;
    align-items: stretch;
    justify-content: center;
    align-content: center;
    width: auto;
    height: auto;
    flex-shrink: 0;
    align-self: center;
    margin-left: auto; /* Mürettebat slotları silah slotlarının hemen soluna */
    padding: clamp(2px, 0.5vh, 5px);
    background: linear-gradient(180deg, rgba(25, 40, 50, 0.6) 0%, rgba(15, 25, 30, 0.8) 100%);
    border: clamp(2px, 0.3vh, 3px) solid transparent;
    border-radius: 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    margin-top: calc(-1 * clamp(4px, 1.5vh, 15px));
    margin-bottom: calc(-1 * clamp(4px, 1.5vh, 15px));
}

#active-weapons-display {
    --slot-size: clamp(26px, 7.5vh, 62px);
    display: grid;
    grid-template-columns: repeat(3, var(--slot-size));
    grid-template-rows: repeat(2, var(--slot-size));
    column-gap: clamp(4px, 1vh, 10px);
    row-gap: clamp(4px, 1vh, 8px);
    justify-items: stretch;
    align-items: stretch;
    justify-content: center;
    align-content: center;
    width: auto;
    height: auto;
    flex-shrink: 0;
    align-self: center; /* stats-panel stretch'ten etkilenmesin */
    padding: clamp(2px, 0.5vh, 5px);
    background: linear-gradient(180deg, rgba(40, 45, 30, 0.6) 0%, rgba(30, 35, 20, 0.8) 100%);
    border: clamp(2px, 0.3vh, 3px) solid transparent;
    border-radius: 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    margin-top: calc(-1 * clamp(4px, 1.5vh, 15px)); /* Dashboard üst padding'i iptal */
    margin-bottom: calc(-1 * clamp(4px, 1.5vh, 15px)); /* Dashboard alt padding'i iptal */
}

/* =====================================================
   PASSIVE ABILITIES - Aktif pasif yetenek göstergeleri
   ===================================================== */
#passive-abilities-display {
    /* Slotları kaydırmamak için absolute: flex akışının dışında */
    position: absolute;
    top: 2px; /* stats-panel sağ üst köşesi — silah slotları üzerinde yüzer */
    right: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 320px;
    pointer-events: none;
    z-index: 20;
    padding: 0;
    background: transparent;
    border: none;
}

#passive-abilities-display:empty {
    display: none;
}

.passive-badge {
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.5vw, 5px);
    padding: clamp(2px, 0.5vh, 4px) clamp(5px, 1vw, 10px);
    border-radius: 5px;
    font-size: clamp(9px, 2vh, 13px);
    font-weight: bold;
    font-family: var(--ui-font);
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    border: 1px solid;
    background: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    animation: passive-badge-in 0.4s ease-out;
}

.passive-badge .passive-icon {
    font-size: 16px;
    line-height: 1;
}

.passive-badge .passive-label {
    line-height: 1;
}

.passive-badge.bullet-hoarder {
    border-color: #d4a017;
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.4), inset 0 0 8px rgba(212, 160, 23, 0.1);
    color: #ffd54f;
}

.passive-badge.arsonist {
    border-color: #ff8040;
    box-shadow: 0 0 6px rgba(255, 128, 64, 0.4), inset 0 0 8px rgba(255, 128, 64, 0.1);
    color: #ffab76;
}

.passive-badge.tech-enthusiast {
    border-color: #5a8aba;
    box-shadow: 0 0 6px rgba(90, 138, 186, 0.4), inset 0 0 8px rgba(90, 138, 186, 0.1);
    color: #8bb8e8;
}

.passive-badge.toy-lover {
    border-color: #8b4a8b;
    box-shadow: 0 0 6px rgba(139, 74, 139, 0.4), inset 0 0 8px rgba(139, 74, 139, 0.1);
    color: #c88ac8;
}

.passive-badge.blade-master {
    border-color: #c0392b;
    box-shadow: 0 0 6px rgba(192, 57, 43, 0.4), inset 0 0 8px rgba(192, 57, 43, 0.1);
    color: #e8706a;
}

@keyframes passive-badge-in {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

.weapon-slot-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--slot-size, 75px);
    height: var(--slot-size, 75px);
    background: linear-gradient(180deg, rgba(30, 30, 25, 0.9) 0%, rgba(15, 15, 12, 0.95) 100%);
    border: 2px solid transparent;
    border-radius: clamp(4px, 1vh, 8px);
    font-size: clamp(14px, 3.5vh, 28px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 2px 8px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.2s ease;
    overflow: hidden;
}

/* Dolu slot */
.weapon-slot-box.filled {
    background: linear-gradient(180deg, var(--metal-mid) 0%, var(--metal-dark) 100%);
    border-color: var(--olive);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 8px rgba(107, 142, 35, 0.3);
}

/* Boş slot */
.weapon-slot-box.empty {
    opacity: 0.6;
}
.weapon-slot-box.empty::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px dashed rgba(150, 150, 140, 0.3);
    border-radius: 4px;
}

/* Kilitli slot */
.weapon-slot-box.locked {
    background: linear-gradient(180deg, rgba(40, 20, 20, 0.9) 0%, rgba(20, 10, 10, 0.95) 100%);
    border-color: rgba(100, 50, 50, 0.6);
    opacity: 0.5;
}
.weapon-slot-box.locked .locked-icon {
    font-size: clamp(12px, 3vh, 22px);
    opacity: 0.7;
    line-height: 1;
    pointer-events: none;
}

/* Görevde mürettebat slotu — soluk + turuncu çerçeve */
.weapon-slot-box.on-mission {
    opacity: 0.55;
    border-color: rgba(255, 160, 40, 0.75);
    box-shadow: 0 0 6px rgba(255, 140, 0, 0.45);
}
.weapon-slot-box.on-mission::after {
    content: '↓';
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: 9px;
    color: #ffaa33;
    font-weight: bold;
    pointer-events: none;
}

.weapon-slot-box .weapon-level {
    position: absolute;
    top: clamp(1px, 0.3vh, 3px);
    right: clamp(1px, 0.3vh, 3px);
    font-size: clamp(8px, 2vh, 16px);
    background: var(--olive);
    color: #fff;
    padding: clamp(1px, 0.3vh, 3px) clamp(2px, 0.8vh, 6px);
    border-radius: clamp(2px, 0.4vh, 5px);
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    min-width: clamp(12px, 3vh, 20px);
    text-align: center;
    z-index: 2;
}

/* Silah adı etiketi — kutunun içinde alt kısım */
.weapon-slot-box .weapon-slot-name {
    position: absolute;
    bottom: clamp(10px, 1.8vh, 16px);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(6px, 1.1vh, 9px);
    color: #c3b091;
    white-space: nowrap;
    text-align: center;
    font-family: var(--ui-font);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    pointer-events: none;
    line-height: 1;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Silah hasar/can/xp istatistiği — kutunun içinde en alt */
.weapon-slot-box .weapon-slot-stat {
    position: absolute;
    bottom: clamp(1px, 0.3vh, 4px);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(6px, 1vh, 9px);
    color: #f0c040;
    white-space: nowrap;
    text-align: center;
    font-family: var(--ui-font);
    font-weight: bold;
    text-shadow: 0 0 4px rgba(240,192,64,0.4), 0 1px 2px rgba(0,0,0,0.9);
    pointer-events: none;
    line-height: 1;
}

/* Silah grubu renkleri */
.weapon-slot-box.filled.bullet-hoarder {
    border-color: #d4a017;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(212, 160, 23, 0.15),
                0 0 10px rgba(212, 160, 23, 0.25);
}
.weapon-slot-box.filled.bullet-hoarder .weapon-level { background: #d4a017; }

.weapon-slot-box.filled.arsonist {
    border-color: #ff8040;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 128, 64, 0.15),
                0 0 10px rgba(255, 128, 64, 0.25);
}
.weapon-slot-box.filled.arsonist .weapon-level { background: #ff8040; }

.weapon-slot-box.filled.tech-enthusiast {
    border-color: #5a8aba;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(90, 138, 186, 0.15),
                0 0 10px rgba(90, 138, 186, 0.25);
}
.weapon-slot-box.filled.tech-enthusiast .weapon-level { background: #5a8aba; }

.weapon-slot-box.filled.toy-lover {
    border-color: #8b4a8b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(139, 74, 139, 0.15),
                0 0 10px rgba(139, 74, 139, 0.25);
}
.weapon-slot-box.filled.toy-lover .weapon-level { background: #8b4a8b; }

.weapon-slot-box.filled.blade-master {
    border-color: #c0392b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(192, 57, 43, 0.15),
                0 0 10px rgba(192, 57, 43, 0.25);
}
.weapon-slot-box.filled.blade-master .weapon-level { background: #c0392b; }

.weapon-slot-box.filled.crew {
    border-color: #2e86ab;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(46, 134, 171, 0.15),
                0 0 10px rgba(46, 134, 171, 0.25);
}
.weapon-slot-box.filled.crew .weapon-level { background: #2e86ab; }

/* Mürettebat fotoğrafı üzerinde isim okunabilirliği */
.weapon-slot-box.filled.crew .weapon-slot-name {
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    left: 0; right: 0; bottom: 0;
    transform: none;
    padding: 12px 4px 2px;
    max-width: 100%;
    color: #fff;
    font-size: clamp(7px, 1.2vh, 10px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0,0,0,1);
}

/* === MÜRETTEBAT LEVEL-UP ANİMASYONLARI === */
@keyframes crew-lv-slot-flash {
    0%   { transform: scale(1);    border-color: #ffd700; box-shadow: 0 0 28px rgba(255,215,0,0.85), inset 0 0 10px rgba(255,215,0,0.18); }
    22%  { transform: scale(1.16); border-color: #fff;    box-shadow: 0 0 55px rgba(255,255,255,0.7), 0 0 90px rgba(255,215,0,0.45), inset 0 0 18px rgba(255,215,0,0.28); }
    50%  { transform: scale(1.08); border-color: #ffd700; box-shadow: 0 0 28px rgba(255,215,0,0.55), inset 0 0 6px rgba(255,215,0,0.12); }
    80%  { transform: scale(1.02); border-color: #ffe770; box-shadow: 0 0 12px rgba(255,215,0,0.28); }
    100% { transform: scale(1);    border-color: #2e86ab; box-shadow: 0 0 10px rgba(46,134,171,0.25); }
}
@keyframes crew-lv-badge-pop {
    0%   { transform: scale(1);   background: #2e86ab; color: #fff; }
    22%  { transform: scale(2.5); background: #ffd700; color: #1a1400; box-shadow: 0 0 14px rgba(255,215,0,0.9); }
    55%  { transform: scale(1.7); background: #ffd700; color: #1a1400; }
    80%  { transform: scale(1.2); background: #4ab8e8; color: #fff; }
    100% { transform: scale(1);   background: #2e86ab; color: #fff; }
}
@keyframes crew-lv-float-up {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px)  scale(0.45); }
    18%  { opacity: 1; transform: translateX(-50%) translateY(-6px)  scale(1.35); }
    65%  { opacity: 1; transform: translateX(-50%) translateY(-28px) scale(1.0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-48px) scale(0.8); }
}
@keyframes crew-lv-icon-pulse {
    0%   { filter: brightness(1); }
    30%  { filter: brightness(2.2) saturate(1.5); }
    100% { filter: brightness(1); }
}
.weapon-slot-box.crew-lv-up {
    animation: crew-lv-slot-flash 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    position: relative;
    z-index: 150;
    overflow: visible; /* Float label slot dışına çıkabilsin */
}
.weapon-slot-box.crew-lv-up .weapon-level {
    animation: crew-lv-badge-pop 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.weapon-slot-box.crew-lv-up .emoji-fallback,
.weapon-slot-box.crew-lv-up svg,
.weapon-slot-box.crew-lv-up canvas,
.weapon-slot-box.crew-lv-up > img {
    animation: crew-lv-icon-pulse 0.7s ease-out forwards;
}
.crew-lv-float {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Oxanium', sans-serif;
    font-weight: 900;
    font-size: clamp(9px, 2vh, 15px);
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,0.95), 0 1px 4px rgba(0,0,0,0.9);
    pointer-events: none;
    animation: crew-lv-float-up 1.05s ease-out forwards;
    z-index: 20;
    letter-spacing: 1px;
}
.weapon-slot-box.crew-lv-up.crew-lv-passive .crew-lv-float {
    color: #fff;
    text-shadow: 0 0 14px rgba(255,215,0,1), 0 0 28px rgba(255,215,0,0.7), 0 1px 4px rgba(0,0,0,0.9);
    font-size: clamp(10px, 2.3vh, 17px);
}

.gauge-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.xp-gauge {
    justify-content: center;
}
.gauge-label {
    position: absolute;
    left: clamp(6px, 1.5vw, 20px);
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(9px, 2.5vh, 20px);
    color: var(--sand);
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.3vw, 4px);
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
    z-index: 5;
    pointer-events: none;
}

.gauge-text {
    position: absolute;
    right: clamp(6px, 1.5vw, 20px);
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(10px, 2.8vh, 22px);
    color: var(--khaki);
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
    z-index: 5;
}
.gauge-bar-container {
    width: 100%;
    height: clamp(18px, 5vh, 40px);
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 3px),
                linear-gradient(180deg, #1a1a14 0%, #0a0a08 100%);
    border: clamp(2px, 0.3vh, 3px) solid transparent;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), inset 0 0 15px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
}

/* Glass reflection */
.gauge-bar-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

#health-bar-container {
    height: clamp(28px, 8vh, 64px);
    overflow: hidden; /* Animasyonların taşmamasını sağla */
}

/* Büyük hasar alındığında container'ı sarsar */
#health-bar-container.big-hit {
    animation: health-container-shake 0.4s ease-out;
}

@keyframes health-container-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
/* Eski XP bar container stili - artık #xp-bar-strip içinde */
/* #xp-bar-container stilini #xp-bar-strip altında tanımladık */

/* Hasar izi - can barının arkasında yavaşça azalan renkli bar */
#health-bar-trail {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    max-width: calc(100% - 6px); /* Animasyonların taşmamasını sağla */
    height: calc(100% - 6px);
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0px, transparent 1px, transparent 4px),
                linear-gradient(to right, var(--warning-red), var(--warning-orange), #8b6914);
    border-radius: 1px;
    z-index: 0;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hasar alındığında pulse animasyonu */
#health-bar-trail.damage-pulse {
    animation: health-trail-pulse 0.4s ease-out;
}

@keyframes health-trail-pulse {
    0% {
        box-shadow: 0 0 8px rgba(255, 204, 68, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 1), 0 0 30px rgba(255, 136, 68, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.4);
        filter: brightness(1.3);
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 204, 68, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
        filter: brightness(1);
    }
}
#health-bar {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    max-width: calc(100% - 6px); /* Animasyonların taşmamasını sağla */
    height: calc(100% - 6px);
    z-index: 1;
    /* Gerçekçi metal bar - fırçalanmış çelik görünümü */
    background: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px, transparent 3px, transparent 5px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 6px),
                linear-gradient(180deg, #8a8a7a 0%, #6a6a5a 15%, #5a5a4a 40%, #4a4a3a 60%, #5a5a4a 85%, #6a6a5a 100%);
    border-radius: 1px;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.4), inset 2px 0 3px rgba(0,0,0,0.2), inset -2px 0 3px rgba(0,0,0,0.2);
}

/* Shimmer sweep effect */
#health-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 3s ease-in-out infinite;
    z-index: 2;
}

/* Top highlight */
#health-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    border-radius: 1px 1px 0 0;
}

/* Liquid wobble on change */
#health-bar.changing {
    animation: liquid-wobble 0.3s ease-out;
}

/* Kritik can seviyesinde (<%25) sürekli pulse */
#health-bar.critical {
    animation: health-bar-critical 0.8s ease-in-out infinite;
}

@keyframes health-bar-critical {
    0%, 100% {
        background: linear-gradient(180deg, #8b3a3a 0%, #5a2020 50%, #6b3030 100%);
    }
    50% {
        background: linear-gradient(180deg, #aa4a4a 0%, #7a3030 50%, #8b4040 100%);
    }
}

/* Hasar alındığında can barı kırmızı yanıp söner */
#health-bar.hit-flash {
    animation: health-bar-hit 0.3s ease-out;
}

@keyframes health-bar-hit {
    0% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
    40% {
        filter: brightness(0.6) saturate(0);
        box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.8), 0 0 15px rgba(255, 0, 0, 0.6);
    }
    100% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
}

/* İyileşme efekti - yeşil parıltı */
#health-bar.heal-flash {
    animation: health-bar-heal 0.5s ease-out;
}

@keyframes health-bar-heal {
    0% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
    50% {
        filter: brightness(1.4) saturate(1.2);
        box-shadow: inset 0 0 15px rgba(107, 124, 63, 0.8), 0 0 20px rgba(107, 124, 63, 0.8), 0 0 30px rgba(107, 124, 63, 0.5);
    }
    100% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
}
#xp-bar {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 0%;
    height: calc(100% - 6px);
    max-width: calc(100% - 6px);
    overflow: hidden; /* Animasyonlar sadece dolu bölümde görünsün */
    /* CANLI MAVİ METAL - Yüksek Saturation */
    background: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(255,255,255,0.12) 2px, rgba(255,255,255,0.12) 3px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 5px),
                linear-gradient(180deg, #00aaff 0%, #0099ee 15%, #0088dd 40%, #0077cc 60%, #0088dd 85%, #0099ee 100%);
    border-radius: 1px;
    transition: width 0.3s ease-out;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), /* Parlak highlight */
                inset 0 -1px 0 rgba(0,0,0,0.3),
                inset 2px 0 3px rgba(0,0,0,0.15),
                0 0 30px rgba(0, 170, 255, 1), /* Canlı mavi glow */
                0 0 20px rgba(0, 204, 255, 0.8),
                0 0 40px rgba(0, 153, 238, 0.6),
                inset 0 0 25px rgba(102, 204, 255, 0.2); /* İçten mavi glow */
}

/* Shimmer sweep - DAHA PARLAK, sadece dolu bölümde */
#xp-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: shimmer 2.5s ease-in-out infinite;
    animation-delay: 0.5s;
    z-index: 2;
}

/* Top highlight - DAHA PARLAK */
#xp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%);
    pointer-events: none;
}

/* XP kazanımında parlama efekti - CANLI MAVİ GLOW */
@keyframes xp-gain-pulse {
    0% {
        filter: brightness(1.4) saturate(1.3);
        transform: scaleY(1);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.5),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 30px rgba(0, 170, 255, 1),
                    0 0 20px rgba(0, 204, 255, 0.8),
                    0 0 40px rgba(0, 153, 238, 0.6),
                    inset 0 0 25px rgba(102, 204, 255, 0.2);
    }
    30% {
        filter: brightness(2.2) saturate(2.0);
        transform: scaleY(1.15);
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.7),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 50px rgba(0, 170, 255, 1),
                    0 0 40px rgba(0, 204, 255, 1),
                    0 0 65px rgba(0, 153, 238, 0.8),
                    inset 0 0 35px rgba(102, 204, 255, 0.4);
    }
    50% {
        filter: brightness(2.6) saturate(2.2) drop-shadow(0 0 25px rgba(0, 204, 255, 1));
        transform: scaleY(1.18);
        box-shadow: inset 0 4px 0 rgba(255,255,255,0.9),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 70px rgba(0, 170, 255, 1),
                    0 0 55px rgba(0, 204, 255, 1),
                    0 0 85px rgba(0, 153, 238, 1),
                    inset 0 0 45px rgba(102, 204, 255, 0.6);
    }
    100% {
        filter: brightness(1.4) saturate(1.3);
        transform: scaleY(1);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.5),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 30px rgba(0, 170, 255, 1),
                    0 0 20px rgba(0, 204, 255, 0.8),
                    0 0 40px rgba(0, 153, 238, 0.6),
                    inset 0 0 25px rgba(102, 204, 255, 0.2);
    }
}

#xp-bar.pulse {
    animation: xp-gain-pulse 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center center;
    overflow: hidden; /* Animasyon sadece dolu bölümde */
}

/* XP bar glow when near full - CANLI MAVİ PARLAK */
@keyframes xp-almost-full-glow {
    0%, 100% {
        filter: brightness(1.6) saturate(1.4);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.5),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 35px rgba(0, 170, 255, 1),
                    0 0 28px rgba(0, 204, 255, 0.9),
                    0 0 45px rgba(0, 153, 238, 0.7),
                    inset 0 0 28px rgba(102, 204, 255, 0.25);
    }
    50% {
        filter: brightness(2.2) saturate(1.9);
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.7),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 55px rgba(0, 170, 255, 1),
                    0 0 45px rgba(0, 204, 255, 1),
                    0 0 70px rgba(0, 153, 238, 0.9),
                    inset 0 0 40px rgba(102, 204, 255, 0.45);
    }
}

#xp-bar.almost-full {
    animation: xp-almost-full-glow 1.2s ease-in-out infinite;
    overflow: hidden; /* Animasyon sadece dolu bölümde */
}
.gauge-text {
    text-align: center;
    color: #fff;
    font-size: var(--ui-font-size-base);
    font-weight: bold;
    margin-top: calc(-1 * clamp(23px, 3vh, 28px));
    text-shadow: 1px 1px 2px #000;
    position: relative;
    pointer-events: none;
}
#health-bar-container > #health-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 2; /* Barların üstünde görünsün */
}

#xp-bar-container > #xp-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 2; /* Barların üstünde görünsün */
    text-align: center;
}

.skill-gauge {
    width: 160px; /* 2x büyük */
    height: 12px; /* 2x büyük */
    display: flex;
    gap: 4px; /* 2x büyük */
    background: transparent;
    border: none;
}

.fuel-segment, .shield-segment {
    flex: 1;
    background: var(--metal-dark);
    border-radius: 2px; /* 2x büyük */
    transition: all 0.3s;
    border: 2px solid #222; /* 2x büyük */
}

.fuel-segment.charged {
    background: linear-gradient(180deg, #b8860b 0%, #8b6914 100%);
    border-color: #d4a017;
    box-shadow: 0 0 8px rgba(184, 134, 11, 0.6);
    animation: segment-fill 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.shield-segment.charged {
    background: linear-gradient(180deg, var(--shield-blue) 0%, #3a5a7a 100%);
    border-color: #5a8aba;
    box-shadow: 0 0 8px rgba(74, 106, 138, 0.6);
    animation: segment-fill 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes segment-fill {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Depleted segment shake */
.fuel-segment.depleted, .shield-segment.depleted {
    animation: segment-deplete 0.3s ease-out;
}

@keyframes segment-deplete {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); filter: brightness(0.5); }
    100% { transform: scale(1); opacity: 1; }
}

/* Full gauge pulse */
.skill-gauge.full .fuel-segment.charged,
.skill-gauge.full .shield-segment.charged {
    animation: segment-full-pulse 1s ease-in-out infinite;
}

@keyframes segment-full-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

#dash-fuel-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffc400, #ffd700);
    border-radius: 3px;
    transition: width 0.1s linear;
}

#skills-container {
    display: flex;
    gap: clamp(10px, 2vw, 20px);
}
.skill-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 2x büyük */
}
.skill-label {
    font-size: 18px; /* 2x büyük */
    color: var(--sand);
    text-transform: uppercase;
    letter-spacing: 2px; /* 2x büyük */
}

.skill-button {
    background: linear-gradient(180deg, var(--metal-mid) 0%, var(--metal-dark) 100%);
    border: 4px solid transparent; /* 2x büyük */
    color: #666;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    padding: 12px 24px; /* 2x büyük */
    border-radius: 4px; /* 2x büyük */
    font-family: inherit;
    font-size: 20px; /* 2x büyük */
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 2px; /* 2x büyük */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.1); /* 2x büyük */
}

.skill-button:hover {
    transform: translateY(-4px); /* 2x büyük */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* 2x büyük */
}

.skill-button:active {
    transform: translateY(2px) scale(0.95); /* 2x büyük */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 2x büyük */
    transition: all 0.05s;
}

.skill-button.ready {
    border-color: var(--olive-light);
    color: var(--khaki);
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    animation: skill-ready-pulse 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes skill-ready-pulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(107, 124, 63, 0.3);
    }
    50% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 20px rgba(107, 124, 63, 0.6);
    }
}

.skill-button.ready::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

.skill-button.ready:hover {
    filter: brightness(1.2);
    transform: translateY(-4px) scale(1.05); /* 2x büyük translate */
    box-shadow: 0 8px 24px rgba(107, 124, 63, 0.5); /* 2x büyük */
}

/* Kalkan hazır ama kullanılmıyor — mavi nudge */
#shieldSkill.nudge {
    animation: shield-nudge 0.8s ease-in-out infinite !important;
    border-color: #5a8aba !important;
    color: #88ccff !important;
    background: linear-gradient(180deg, #1a3a5c 0%, #0d2240 100%) !important;
}

@keyframes shield-nudge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(90, 138, 186, 0.5), 0 0 30px rgba(90, 138, 186, 0.2);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 30px rgba(90, 138, 186, 0.9), 0 0 60px rgba(90, 138, 186, 0.4);
    }
}

/* Atılma hazır ama kullanılmıyor — altın/amber nudge */
#dashSkill.nudge {
    animation: dash-nudge 0.8s ease-in-out infinite !important;
    border-color: #d4a017 !important;
    color: #ffe066 !important;
    background: linear-gradient(180deg, #4a3a10 0%, #2a2008 100%) !important;
}

@keyframes dash-nudge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(212, 160, 23, 0.5), 0 0 30px rgba(212, 160, 23, 0.2);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 30px rgba(212, 160, 23, 0.9), 0 0 60px rgba(212, 160, 23, 0.4);
    }
}

/* Skill used flash */
.skill-button.used {
    animation: skill-used 0.3s ease-out;
}

@keyframes skill-used {
    0% { filter: brightness(2); transform: scale(1.1); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* --- Pop-up & Menu Styles --- */
.objective-popup {
    display: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    pointer-events: none;
    text-align: center;
    max-width: 90vw;
    white-space: normal;
}

.objective-popup.show {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: objPopupEntrance 2.8s ease-in-out forwards;
}

/* Birinci satır: kasa adı */
.objective-popup .obj-line1 {
    font-size: clamp(1.2em, 3vw, 2em);
    font-weight: bold;
    color: #c3b091;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(195, 176, 145, 0.5);
    opacity: 0;
    animation: objLine1In 0.5s 0.1s ease-out forwards;
}

/* İkinci satır: silah isimleri */
.objective-popup .obj-line2 {
    font-size: clamp(1.8em, 5vw, 3.5em);
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px var(--olive-light), 0 0 20px var(--olive-light), 0 0 40px rgba(107, 124, 63, 0.6);
    opacity: 0;
    animation: objLine2In 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Tek satır modu (→ yoksa) */
.objective-popup .obj-single {
    font-size: clamp(2.5em, 6vw, 4.5em);
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px var(--olive-light), 0 0 20px var(--olive-light), 0 0 40px rgba(107, 124, 63, 0.6);
}

@keyframes objPopupEntrance {
    0%   { opacity: 0; transform: translate(-50%, -60%) scale(0.8); }
    10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    18%  { transform: translate(-50%, -50%) scale(0.97); }
    25%  { transform: translate(-50%, -50%) scale(1); }
    80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes objLine1In {
    0%   { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes objLine2In {
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

/* === ACHIEVEMENT MODAL === */
#achievement-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

#achievement-modal-overlay.show {
    display: flex;
    animation: achievement-fade-in 0.3s ease-out;
}

@keyframes achievement-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#achievement-modal {
    background: linear-gradient(180deg, #2a2a1a 0%, #1a1a10 100%);
    border: clamp(2px, 0.4vh, 3px) solid #c9a825;
    border-radius: 6px;
    padding: clamp(15px, 3vh, 30px) clamp(20px, 4vw, 45px) clamp(12px, 2.5vh, 25px);
    text-align: center;
    width: 90%;
    max-width: 460px;
    box-shadow:
        0 0 30px rgba(201, 168, 37, 0.4),
        0 0 60px rgba(201, 168, 37, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.8);
    animation: achievement-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-sizing: border-box;
}

@keyframes achievement-entrance {
    0% { opacity: 0; transform: scale(0.5) translateY(-30px); }
    60% { transform: scale(1.05) translateY(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#achievement-star {
    font-size: clamp(28px, 6vh, 42px);
    color: #ffd700;
    text-shadow: 0 0 15px #ffd700, 0 0 30px #ff8c00, 0 0 45px #ff6600;
    animation: achievement-star-pulse 1.5s ease-in-out infinite;
    margin-bottom: clamp(2px, 0.5vh, 4px);
}

@keyframes achievement-star-pulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 15px #ffd700, 0 0 30px #ff8c00; }
    50% { transform: scale(1.15); text-shadow: 0 0 25px #ffd700, 0 0 50px #ff8c00, 0 0 70px #ff6600; }
}

#achievement-modal-title {
    color: #c9a825;
    font-size: clamp(10px, 2vh, 13px);
    letter-spacing: clamp(2px, 0.5vw, 4px);
    text-transform: uppercase;
    margin-bottom: clamp(3px, 0.8vh, 6px);
    font-weight: bold;
}

#achievement-modal-name {
    color: #ffd700;
    font-size: clamp(18px, 4vh, 28px);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: clamp(8px, 2vh, 16px);
    letter-spacing: 1px;
}

#achievement-weapons-list {
    display: flex;
    justify-content: center;
    gap: clamp(5px, 1vw, 10px);
    flex-wrap: wrap;
    margin-bottom: clamp(8px, 2vh, 16px);
}

#achievement-weapons-list .ach-weapon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(201, 168, 37, 0.3);
    border-radius: 4px;
    padding: clamp(4px, 0.8vh, 6px) clamp(8px, 1.5vw, 12px);
    color: var(--khaki);
    font-size: clamp(10px, 1.8vh, 12px);
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.5vw, 5px);
}

#achievement-weapons-list .ach-weapon .ach-weapon-icon {
    width: clamp(16px, 3vh, 22px);
    height: clamp(16px, 3vh, 22px);
}

#achievement-modal-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a825, transparent);
    margin: 0 auto 14px;
}

#achievement-bonus-label {
    color: #8b7514;
    font-size: clamp(9px, 1.6vh, 11px);
    letter-spacing: clamp(1px, 0.4vw, 3px);
    text-transform: uppercase;
    margin-bottom: clamp(3px, 0.8vh, 6px);
    font-weight: bold;
}

#achievement-modal-desc {
    color: #ffffff;
    font-size: clamp(14px, 3vh, 20px);
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: clamp(12px, 3vh, 22px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

#achievement-ok-btn {
    background: linear-gradient(180deg, #8b7514 0%, #6a5a10 100%);
    border: 2px solid #c9a825;
    border-radius: 4px;
    color: #fff;
    font-size: clamp(12px, 2.5vh, 16px);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.4vw, 3px);
    padding: clamp(8px, 1.5vh, 10px) clamp(30px, 6vw, 50px);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    min-height: 44px;
}

#achievement-ok-btn:hover {
    background: linear-gradient(180deg, #a08a1a 0%, #8b7514 100%);
    box-shadow: 0 0 15px rgba(201, 168, 37, 0.5);
    transform: scale(1.05);
}

#achievement-ok-btn:active {
    transform: scale(0.97);
}

/* === TUTORIAL MODAL === */
#tutorial-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9998;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

#tutorial-modal-overlay.show {
    display: flex;
    animation: achievement-fade-in 0.3s ease-out;
}

#tutorial-modal {
    background: linear-gradient(180deg, #3d4a2f 0%, #2d3a1f 100%);
    border: clamp(2px, 0.4vh, 3px) solid #6b7c3f;
    border-radius: 6px;
    padding: clamp(14px, 3vh, 28px) clamp(16px, 4vw, 40px) clamp(12px, 2.5vh, 22px);
    text-align: center;
    width: 90%;
    max-width: 480px;
    box-shadow:
        0 0 30px rgba(107, 124, 63, 0.4),
        0 0 60px rgba(107, 124, 63, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.8);
    animation: tutorial-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    box-sizing: border-box;
}

@keyframes tutorial-entrance {
    0% { opacity: 0; transform: scale(0.5) translateY(-30px); }
    60% { transform: scale(1.05) translateY(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#tutorial-step-indicator {
    position: absolute;
    top: clamp(4px, 1vh, 8px);
    right: clamp(8px, 1.5vw, 14px);
    color: #6b7c3f;
    font-size: clamp(9px, 1.6vh, 11px);
    letter-spacing: 2px;
    font-weight: bold;
}

#tutorial-icon {
    font-size: clamp(24px, 6vh, 38px);
    margin-bottom: clamp(3px, 0.8vh, 6px);
    text-shadow: 0 0 15px rgba(107, 124, 63, 0.6);
}

#tutorial-title {
    color: #c3b091;
    font-size: clamp(16px, 3.5vh, 22px);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    margin-bottom: clamp(4px, 1vh, 8px);
    text-shadow: 0 0 8px rgba(195, 176, 145, 0.3);
}

#tutorial-desc {
    color: #a89070;
    font-size: clamp(11px, 2vh, 14px);
    line-height: 1.5;
    margin-bottom: clamp(8px, 2vh, 14px);
}

#tutorial-keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(4px, 1vw, 8px);
    margin-bottom: clamp(10px, 2.5vh, 20px);
    color: #c3b091;
    font-size: clamp(11px, 2vh, 13px);
    align-items: center;
}

#tutorial-keys kbd {
    display: inline-block;
    background: linear-gradient(180deg, #4a4a3a 0%, #2a2a1a 100%);
    border: 2px solid #6b7c3f;
    border-bottom-width: 3px;
    border-radius: 4px;
    padding: clamp(3px, 0.6vh, 4px) clamp(6px, 1.2vw, 10px);
    color: #fff;
    font-size: clamp(11px, 2vh, 13px);
    font-weight: bold;
    font-family: 'Oxanium', monospace;
    min-width: clamp(22px, 4vw, 28px);
    text-align: center;
    box-shadow: 0 2px 0 #1a1a10, 0 0 6px rgba(107, 124, 63, 0.3);
}

/* Elit Düşman Varyantları Listesi */
.elite-variants {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1vh, 10px);
    width: 100%;
    text-align: left;
}

.elite-variants .variant {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
    background: rgba(0, 0, 0, 0.3);
    padding: clamp(5px, 1vh, 8px) clamp(8px, 1.5vw, 12px);
    border-radius: 6px;
    border-left: 3px solid #6b7c3f;
}

.elite-variants .variant-icon {
    font-size: clamp(14px, 3vh, 20px);
    min-width: clamp(20px, 4vw, 28px);
    text-align: center;
}

.elite-variants .variant-name {
    font-weight: bold;
    color: #d4c4a4;
    min-width: clamp(40px, 8vw, 60px);
    font-size: clamp(11px, 2vh, 13px);
}

.elite-variants .variant-desc {
    color: #a89070;
    font-size: 12px;
    flex: 1;
}

#tutorial-ok-btn {
    background: linear-gradient(180deg, #4a5d23 0%, #3d4a1f 100%);
    border: 2px solid #6b7c3f;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 10px 50px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    font-family: 'Oxanium', monospace;
}

#tutorial-ok-btn:hover {
    background: linear-gradient(180deg, #5a6d33 0%, #4a5d23 100%);
    box-shadow: 0 0 15px rgba(107, 124, 63, 0.5);
    transform: scale(1.05);
}

#tutorial-ok-btn:active {
    transform: scale(0.97);
}

#tutorial-skip-label {
    display: block;
    margin-top: 12px;
    color: #6b7c3f;
    font-size: 11px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    user-select: none;
}

#tutorial-skip-label input[type="checkbox"] {
    margin-right: 5px;
    accent-color: #6b7c3f;
    vertical-align: middle;
}

/* Tutorial HUD Highlight */
.tutorial-highlight {
    animation: tutorial-highlight-pulse 1.5s ease-in-out infinite !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.3) !important;
    border-color: #ffd700 !important;
    z-index: 100 !important;
    position: relative;
}

@keyframes tutorial-highlight-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4); }
}

/* Tutorial Ok İşareti */
.tutorial-arrow {
    position: fixed;
    z-index: 9997;
    pointer-events: none;
    transform: translateX(-50%);
}

.tutorial-arrow-inner {
    color: #ffd700;
    font-size: 24px;
    text-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255, 215, 0, 0.5);
    animation: tutorial-arrow-bounce 0.8s ease-in-out infinite;
}

@keyframes tutorial-arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* === HATIRLATMA MODALI (Tekrar eden, tuşa basarak kapatılır) === */
#reminder-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

#reminder-modal-overlay.show {
    display: flex;
    animation: achievement-fade-in 0.3s ease-out;
}

#reminder-modal {
    background: linear-gradient(180deg, #3a2a1a 0%, #2a1a0a 100%);
    border: clamp(2px, 0.4vh, 3px) solid #d4a017;
    border-radius: 6px;
    padding: clamp(14px, 3vh, 28px) clamp(16px, 4vw, 40px) clamp(12px, 2.5vh, 22px);
    text-align: center;
    width: 90%;
    max-width: 440px;
    box-shadow:
        0 0 30px rgba(212, 160, 23, 0.4),
        0 0 60px rgba(212, 160, 23, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.8);
    animation: reminder-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    box-sizing: border-box;
}

@keyframes reminder-entrance {
    0% { opacity: 0; transform: scale(0.5) translateY(-30px); }
    60% { transform: scale(1.05) translateY(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#reminder-icon {
    font-size: clamp(28px, 6vh, 42px);
    margin-bottom: clamp(4px, 1vh, 8px);
    text-shadow: 0 0 15px rgba(212, 160, 23, 0.6);
}

#reminder-title {
    color: #d4c4a0;
    font-size: clamp(14px, 3vh, 20px);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    margin-bottom: clamp(4px, 1vh, 8px);
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.3);
}

#reminder-desc {
    color: #a89070;
    font-size: clamp(11px, 2vh, 14px);
    line-height: 1.5;
    margin-bottom: clamp(8px, 2vh, 16px);
}

#reminder-key-prompt {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 1vw, 8px);
    padding: clamp(5px, 1vh, 8px) clamp(10px, 2vw, 18px);
    background: rgba(212, 160, 23, 0.15);
    border: 2px solid rgba(212, 160, 23, 0.5);
    border-radius: 4px;
    color: #ffe066;
    font-size: clamp(12px, 2.2vh, 15px);
    font-weight: bold;
    letter-spacing: 2px;
    animation: reminder-key-pulse 1.2s ease-in-out infinite;
}

#reminder-key-prompt kbd {
    display: inline-block;
    background: rgba(212, 160, 23, 0.3);
    border: 1px solid #d4a017;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: bold;
    color: #ffe066;
    min-width: 28px;
    text-align: center;
}

@keyframes reminder-key-pulse {
    0%, 100% { border-color: rgba(212, 160, 23, 0.5); box-shadow: 0 0 8px rgba(212, 160, 23, 0.2); }
    50% { border-color: rgba(212, 160, 23, 0.9); box-shadow: 0 0 20px rgba(212, 160, 23, 0.5); }
}

/* === KONTROLLER YARDIM MODALI === */
#controls-help-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: auto;
}

#controls-help-overlay.show {
    display: flex;
    animation: controls-fade-in 0.2s ease-out;
}

@keyframes controls-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#controls-help-modal {
    background: linear-gradient(180deg, #2a3520 0%, #1a2510 100%);
    border: clamp(2px, 0.4vh, 3px) solid #4a5d30;
    border-radius: 8px;
    padding: 0;
    width: 90%;
    max-width: 400px;
    box-shadow:
        0 0 30px rgba(74, 93, 48, 0.5),
        0 15px 50px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: controls-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}

@keyframes controls-entrance {
    0% { opacity: 0; transform: scale(0.9) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#controls-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(8px, 2vh, 14px) clamp(10px, 2vw, 18px);
    background: linear-gradient(180deg, #3a4530 0%, #2a3520 100%);
    border-bottom: 2px solid #4a5d30;
    border-radius: 5px 5px 0 0;
}

.controls-help-icon {
    font-size: clamp(16px, 3vh, 22px);
    margin-right: clamp(5px, 1vw, 10px);
}

.controls-help-title {
    flex: 1;
    color: #c3b091;
    font-size: clamp(12px, 2.5vh, 16px);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.4vw, 3px);
    text-shadow: 0 0 8px rgba(195, 176, 145, 0.3);
}

#controls-help-close {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 4px;
    color: #a89070;
    font-size: clamp(12px, 2.5vh, 16px);
    width: clamp(24px, 5vh, 32px);
    height: clamp(24px, 5vh, 32px);
    min-width: 44px;
    min-height: 44px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

#controls-help-close:hover {
    background: #5a6d40;
    color: #fff;
}

#controls-help-content {
    padding: clamp(8px, 2vh, 16px) clamp(10px, 2vw, 20px);
    max-height: clamp(200px, 55vh, 400px);
    overflow-y: auto;
}

.controls-section {
    margin-bottom: clamp(10px, 2vh, 18px);
}

.controls-section:last-child {
    margin-bottom: 0;
}

.controls-section-title {
    color: #6b7c3f;
    font-size: clamp(9px, 1.6vh, 11px);
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: clamp(4px, 1vh, 8px);
    padding-bottom: clamp(2px, 0.5vh, 4px);
    border-bottom: 1px solid #3a4530;
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(4px, 0.8vh, 6px) clamp(5px, 1vw, 8px);
    margin: clamp(2px, 0.4vh, 4px) 0;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.control-row:hover {
    background: rgba(107, 124, 63, 0.15);
}

.control-row.highlight {
    background: rgba(107, 124, 63, 0.25);
    border: 1px solid rgba(107, 124, 63, 0.4);
}

.control-row.highlight:hover {
    background: rgba(107, 124, 63, 0.35);
}

.control-row kbd {
    display: inline-block;
    background: linear-gradient(180deg, #4a4a3a 0%, #2a2a1a 100%);
    border: 2px solid #5a6d40;
    border-bottom-width: 3px;
    border-radius: 4px;
    padding: clamp(3px, 0.5vh, 4px) clamp(8px, 1.5vw, 12px);
    color: #fff;
    font-size: clamp(10px, 1.8vh, 12px);
    font-weight: bold;
    font-family: 'Oxanium', monospace;
    min-width: clamp(35px, 7vw, 50px);
    text-align: center;
    box-shadow: 0 2px 0 #1a1a10;
}

.control-row span {
    color: #a89070;
    font-size: clamp(11px, 2vh, 13px);
    text-align: right;
}

#controls-help-footer {
    padding: clamp(6px, 1.5vh, 12px) clamp(10px, 2vw, 18px);
    background: linear-gradient(180deg, #2a3520 0%, #1a2510 100%);
    border-top: 1px solid #3a4530;
    border-radius: 0 0 5px 5px;
    text-align: center;
}

.hint-text {
    color: #5a6d40;
    font-size: clamp(9px, 1.6vh, 11px);
}

.hint-text kbd {
    display: inline-block;
    background: #2a2a1a;
    border: 1px solid #4a5d30;
    border-radius: 3px;
    padding: 2px 6px;
    color: #8a9a70;
    font-size: 10px;
    font-family: 'Oxanium', monospace;
}

.map-hint {
    position: absolute;
    top: 320px; /* Görev checklist'inin altında */
    left: 20px;
    background: var(--panel-bg);
    border: 2px solid var(--olive-dark);
    border-radius: 2px;
    padding: 8px 15px;
    color: var(--khaki);
    font-size: var(--ui-font-size-base);
    z-index: 10;
    pointer-events: none;
    animation: hint-pulse 2s infinite ease-in-out;
}

@keyframes hint-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

#activeQuestUI {
    position: absolute;
    top: 120px;
    left: 20px;
    background-color: rgba(50, 40, 20, 0.8);
    border: 1px solid #ffd700;
    border-radius: 5px;
    padding: 8px 15px;
    color: #ffd700;
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700;
    font-size: var(--ui-font-size-base);
    z-index: 10;
    pointer-events: none;
}

/* Modal overlay stilleri - Polish UI bölümünde tanımlandı */
#levelUpScreen { z-index: 1050; }
#discardWeaponScreen { z-index: 1040; }

/* Silah grupları için askeri stiller */
.pause-panel.bullet-hoarder { border-color: #d4a017; }
.pause-panel.bullet-hoarder h3, .pause-panel.bullet-hoarder .weapon-list .weapon-icon { color: #d4a017; text-shadow: none; }

.pause-panel.arsonist { border-color: #ff8040; }
.pause-panel.arsonist h3, .pause-panel.arsonist .weapon-list .weapon-icon { color: #ff8040; text-shadow: none; }

.pause-panel.tech-enthusiast { border-color: #5a8aba; }
.pause-panel.tech-enthusiast h3, .pause-panel.tech-enthusiast .weapon-list .weapon-icon { color: #5a8aba; text-shadow: none; }

.pause-panel.toy-lover { border-color: #8b4a8b; }
.pause-panel.toy-lover h3, .pause-panel.toy-lover .weapon-list .weapon-icon { color: #8b4a8b; text-shadow: none; }

.pause-panel.blade-master { border-color: #c0392b; }
.pause-panel.blade-master h3, .pause-panel.blade-master .weapon-list .weapon-icon { color: #c0392b; text-shadow: none; }

.pause-panel.crew { border-color: #2e86ab; }
.pause-panel.crew h3, .pause-panel.crew .weapon-list .weapon-icon { color: #2e86ab; text-shadow: none; }

.pause-panel.gizli-fuzyon { border-color: #ccaa00; }
.pause-panel.gizli-fuzyon h3, .pause-panel.gizli-fuzyon .weapon-list .weapon-icon { color: #ccaa00; text-shadow: none; }

.pause-panel.wip-panel {
    position: relative;
    overflow: hidden;
    border-color: #555;
    pointer-events: none;
}

.pause-panel.wip-panel h3 {
    color: #666;
    border-bottom-color: rgba(100, 100, 100, 0.3);
}

.pause-panel.wip-panel .wip-list li {
    color: #444;
    opacity: 0.5;
}

.pause-panel.wip-panel .wip-list .weapon-icon {
    color: #555;
    text-shadow: none;
}

.wip-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(80, 70, 30, 0.15) 8px,
        rgba(80, 70, 30, 0.15) 16px
    );
}

.wip-text {
    background: rgba(20, 15, 10, 0.85);
    color: #c9a84c;
    font-family: 'Oxanium', sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 6px 16px;
    border: 1px solid #c9a84c;
    transform: rotate(-18deg);
    white-space: nowrap;
    text-transform: uppercase;
}

.weapon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--ui-font-size-small);
}

.weapon-list li {
    padding: clamp(1px, 0.2vh, 2px) 0;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(8px, 1.5vh, 11px);
}

.weapon-list li, .pause-panel h3[data-achievement-id] {
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: background-color 0.2s ease;
}
.pause-panel h3[data-achievement-id]:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.weapon-list li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.weapon-list .weapon-icon {
    font-size: 1.2em;
    width: 22px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* Meta Upgrade #1: Silah seviye etiketi */
.weapon-level-tag {
    font-size: 0.75em;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Meta Upgrade #33: Başarım ilerleme göstergesi */
.achievement-progress {
    font-size: 0.7em;
    color: #a89070;
    padding: 0 8px 4px;
    text-align: right;
}

/* Meta Upgrade #3: Silah açıklama ipucu (level-up kartında) */
.weapon-desc-hint {
    display: block;
    font-size: 0.7em;
    color: #a89070;
    margin-bottom: 6px;
    line-height: 1.2;
}

.game-over-screen p { font-size: 1.1em; }

#upgrade-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    overflow: visible;
    padding: 15px 10px 35px 10px;
}
.menu-buttons { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    flex: 1;
    justify-content: flex-end;
    align-items: flex-start; /* Sola yaslamak için */
    order: 1; /* Sola yaslamak için */
}

#discard-weapon-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
#discard-weapon-options .upgrade-button {
    flex-direction: column;
    width: 110px;
    height: 100px;
    padding: 10px;
}
#discard-weapon-options .upgrade-text {
    text-align: center;
}

/* === MENU BUTTON === */
.menu-button {
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.9) 0%, rgba(40, 50, 25, 0.95) 100%);
    color: #ccc;
    border: 2px solid transparent;
    padding: 15px 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    font-family: 'Oxanium', sans-serif;
    font-size: 1em;
    border-radius: 4px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.menu-button:hover {
    color: #1a1a1a;
    background-color: #ccc;
    transform: scale(1.05) translateY(-2px);
}

.menu-button:active {
    transform: scale(0.95) translateY(1px);
    transition: all 0.05s ease-out;
}

/* === UPGRADE BUTTON (Kart Stili) === */
.upgrade-button {
    background: linear-gradient(180deg, #4a4a45 0%, #3a3a35 100%);
    border: 2px solid transparent;
    border-radius: 3px;
    padding: 14px 10px;
    width: fit-content;
    min-width: 140px;
    max-width: 210px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Oxanium', sans-serif;
    opacity: 0;
    transform: scale(0.9);
    animation: slot-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Shine sweep efekti - clip-path ile sınırlandırılmış */
.upgrade-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        transparent 30%,
        rgba(255,255,255,0.2) 50%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position 0.5s ease;
    z-index: 10;
    pointer-events: none;
    border-radius: 3px;
    overflow: hidden;
}

.upgrade-button:hover::before {
    background-position: -100% 0;
}

/* Glow border efekti */
.upgrade-button::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(107, 124, 63, 0.5), transparent);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.upgrade-button:hover::after {
    opacity: 1;
}

/* Hover efektleri - 3D transform */
.upgrade-button:not(.max-level):hover {
    border-color: #6b7c3f;
    background: linear-gradient(180deg, #4a5d28 0%, #3a4a1f 100%);
    transform: translateY(-8px) rotateX(5deg);
    box-shadow:
        0 15px 30px rgba(0,0,0,0.4),
        0 5px 15px rgba(107, 124, 63, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
    opacity: 1;
    animation: none;
}

.upgrade-button:not(.max-level):active {
    transform: translateY(-2px) scale(0.98);
    transition: all 0.1s;
}

@keyframes slot-in {
    0% { opacity: 0; transform: scale(0.7) rotate(-5deg); }
    50% { opacity: 1; }
    60% { transform: scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.upgrade-button.max-level {
    color: #888;
    border-color: #555;
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed;
    filter: grayscale(0.7);
    opacity: 0.6;
}

/* İkon stili */
.upgrade-icon {
    font-size: 36px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
}

.upgrade-button:not(.max-level):hover .upgrade-icon {
    transform: scale(1.2) rotate(-5deg);
    animation: heartbeat 1s ease-in-out infinite;
}

/* Metin stili */
.upgrade-text {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.upgrade-text span:last-child {
    margin-top: auto;
    margin-bottom: auto;
}

.upgrade-text strong {
    display: block;
    color: var(--khaki);
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s, text-shadow 0.2s;
}

.upgrade-button:not(.max-level):hover .upgrade-text strong {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.upgrade-text span {
    display: block;
    color: var(--sand);
    font-size: 10px;
    opacity: 0.8;
    transition: opacity 0.2s;
    line-height: 1.6;
}

.upgrade-button:not(.max-level):hover .upgrade-text span {
    opacity: 1;
}

/* Stat karşılaştırma tablosu (Excel grid) */
.sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
    line-height: 1.3;
}

.sg-table td {
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2px 4px;
    vertical-align: middle;
}

.sg-label {
    color: #e0c060;
    font-weight: 700;
}

.sg-old {
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
}

.sg-new {
    text-align: center;
    color: #fff;
}

.sg-new.sg-changed {
    color: #6f6;
    font-weight: 700;
}

.sg-abilities {
    margin-top: 3px;
    text-align: center;
}

.sg-new-ability {
    background: rgba(100, 255, 100, 0.2) !important;
    border-color: rgba(100, 255, 100, 0.5) !important;
    color: #6f6 !important;
}

/* Stat etiketi vurgulama */
.st {
    color: #e0c060;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 0.3px;
}

/* Özel yetenek tag'i */
.st-tag {
    display: inline-block;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
    font-weight: 700;
    font-size: 0.9em;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 2px;
    vertical-align: middle;
}

/* Tooltip tablosunda da stat vurgulama */
.weapon-stats-table .st {
    color: #e0c060;
    font-size: 1em;
}

.weapon-stats-table .st-tag {
    font-size: 0.85em;
    padding: 0 3px;
}

/* === SİLAH GRUPLARI (Askeri Renkler) === */
.upgrade-button.bullet-hoarder { border-color: #d4a017; }
.upgrade-button.bullet-hoarder .upgrade-text strong { color: #d4a017; }
.upgrade-button.bullet-hoarder:not(.max-level):hover {
    background: linear-gradient(180deg, #5a4a20 0%, #4a3a15 100%);
    border-color: #ffd700;
}

.upgrade-button.arsonist { border-color: #ff8040; }
.upgrade-button.arsonist .upgrade-text strong { color: #ff8040; }
.upgrade-button.arsonist:not(.max-level):hover {
    background: linear-gradient(180deg, #5a3020 0%, #4a2515 100%);
    border-color: #ff9060;
}

.upgrade-button.tech-enthusiast { border-color: #5a8aba; }
.upgrade-button.tech-enthusiast .upgrade-text strong { color: #5a8aba; }
.upgrade-button.tech-enthusiast:not(.max-level):hover {
    background: linear-gradient(180deg, #2a3a5a 0%, #1a2a4a 100%);
    border-color: #7aaada;
}

.upgrade-button.toy-lover { border-color: #8b4a8b; }
.upgrade-button.toy-lover .upgrade-text strong { color: #8b4a8b; }
.upgrade-button.toy-lover:not(.max-level):hover {
    background: linear-gradient(180deg, #4a2a4a 0%, #3a1a3a 100%);
    border-color: #ab6aab;
}

.upgrade-button.blade-master { border-color: #c0392b; }
.upgrade-button.blade-master .upgrade-text strong { color: #c0392b; }
.upgrade-button.blade-master:not(.max-level):hover {
    background: linear-gradient(180deg, #5a2020 0%, #4a1515 100%);
    border-color: #e05050;
}

/* === GLOWING ANİMASYONLAR (Askeri Renkler) === */
.upgrade-button.glowing.bullet-hoarder { animation: slot-in 0.5s forwards, glowing-mermi 1.5s ease-in-out infinite; }
.upgrade-button.glowing.arsonist { animation: slot-in 0.5s forwards, glowing-arsonist 1.5s ease-in-out infinite; }
.upgrade-button.glowing.tech-enthusiast { animation: slot-in 0.5s forwards, glowing-teknoloji 1.5s ease-in-out infinite; }
.upgrade-button.glowing.toy-lover { animation: slot-in 0.5s forwards, glowing-oyuncak 1.5s ease-in-out infinite; }
.upgrade-button.glowing.blade-master { animation: slot-in 0.5s forwards, glowing-kesici 1.5s ease-in-out infinite; }

@keyframes glowing-mermi {
    0%, 100% { box-shadow: 0 0 10px rgba(212, 160, 23, 0.7), 0 0 15px #d4a017; border-color: #d4a017; }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px #ffd700, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-arsonist {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 120, 50, 0.7), 0 0 15px #ff8040; border-color: #ff8040; }
    50% { box-shadow: 0 0 20px rgba(255, 120, 50, 1), 0 0 30px #ff8040, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-teknoloji {
    0%, 100% { box-shadow: 0 0 10px rgba(90, 138, 186, 0.7), 0 0 15px #5a8aba; border-color: #5a8aba; }
    50% { box-shadow: 0 0 20px rgba(90, 138, 186, 1), 0 0 30px #5a8aba, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-oyuncak {
    0%, 100% { box-shadow: 0 0 10px rgba(139, 74, 139, 0.7), 0 0 15px #8b4a8b; border-color: #8b4a8b; }
    50% { box-shadow: 0 0 20px rgba(139, 74, 139, 1), 0 0 30px #8b4a8b, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-kesici {
    0%, 100% { box-shadow: 0 0 10px rgba(192, 57, 43, 0.7), 0 0 15px #c0392b; border-color: #c0392b; }
    50% { box-shadow: 0 0 20px rgba(192, 57, 43, 1), 0 0 30px #c0392b, 0 0 10px #fff inset; border-color: #fff; }
}

/* === FINAL CHOICE ANİMASYONU === */
@keyframes pulsing-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.upgrade-button.final-choice .upgrade-icon,
.upgrade-button.final-choice .upgrade-text strong {
    animation: pulsing-scale 1.2s ease-in-out infinite;
}

/* Final choice için ekstra margin (recommended badge için) */
.upgrade-button.final-choice {
    margin-bottom: 20px;
}

/* ÖNERİLEN badge */
.recommended-badge {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
    color: #1a1a14;
    font-size: 9px;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 3px;
    border: 2px solid #ffcc00;
    white-space: nowrap;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(212, 160, 23, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
    z-index: 20;
    animation: recommended-pulse 1.5s ease-in-out infinite;
}

@keyframes recommended-pulse {
    0%, 100% {
        box-shadow: 0 3px 10px rgba(212, 160, 23, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
        transform: translateX(-50%) scale(1);
    }
    50% {
        box-shadow: 0 3px 15px rgba(212, 160, 23, 0.9), 0 0 30px rgba(255, 215, 0, 0.6);
        transform: translateX(-50%) scale(1.08);
    }
}

/* YENİ etiketi */
.new-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb000 100%);
    color: #1a1a14;
    font-size: 9px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
    animation: new-tag-pulse 1.5s ease-in-out infinite;
    z-index: 5;
}

@keyframes new-tag-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 12px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4);
        transform: scale(1.05);
    }
}

/* Silah seviye yükseltme badge'i - çok belirgin */
.weapon-level-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #00cc66 0%, #00aa44 50%, #009933 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    border: 2px solid #00ff88;
    box-shadow: 0 2px 10px rgba(0, 255, 100, 0.6), 0 0 20px rgba(0, 255, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: level-badge-pulse 1.2s ease-in-out infinite;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.weapon-level-badge .level-current {
    color: #aaffcc;
    font-size: 12px;
}

.weapon-level-badge .level-arrow {
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: arrow-bounce 0.6s ease-in-out infinite;
}

.weapon-level-badge .level-next {
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 255, 100, 0.6);
}

@keyframes level-badge-pulse {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(0, 255, 100, 0.6), 0 0 20px rgba(0, 255, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 15px rgba(0, 255, 100, 0.9), 0 0 35px rgba(0, 255, 100, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transform: scale(1.08);
    }
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

.upgrade-text span { font-size: 0.8em; color: #ccc; }
#restartButton { background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%); color: var(--khaki); border: 2px solid transparent; padding: 15px 30px; font-family: 'Oxanium', sans-serif; font-size: 1.2em; font-weight: bold; border-radius: 4px; cursor: url('Asset/image/cursor-40.png') 9 0, pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); }
#restartButton:hover { background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive-mid) 100%); border-color: var(--khaki); color: var(--sand); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); transform: scale(1.05); }

#gameOverStatsContainer {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 30px;
    width: 100%;
}

#scoreboard, #weaponDamageScoreboard {
    flex: 1;
    text-align: left;
    color: var(--khaki);
    background: linear-gradient(180deg, rgba(45, 50, 35, 0.9) 0%, rgba(35, 40, 25, 0.95) 100%);
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 15px;
    box-shadow: inset 0 0 10px #000;
}
.game-over-screen.win #scoreboard, .game-over-screen.win #weaponDamageScoreboard { 
    color: #ffd700; 
    border-color: #ffd700;
}
#scoreboard h3, #weaponDamageScoreboard h3 { text-align: center; margin-bottom: 10px; }
#scoreboard ol, #weaponDamageScoreboard ol { padding-left: 0; list-style: none; font-size: 1.1em; }
#scoreboard li, #weaponDamageScoreboard li { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 15px; align-items: center;}
#scoreboard li span:first-child, #weaponDamageScoreboard li span:first-child { flex-grow: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scoreboard small { color: #aaa; font-size: 0.8em; }
.ui-button {
    pointer-events: auto;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    background: var(--metal-scratches), linear-gradient(180deg, var(--metal-mid) 0%, var(--metal-dark) 100%);
    border: 2px solid transparent;
    color: var(--khaki);
    font-size: clamp(14px, 2.5vh, 18px);
    width: clamp(32px, 5vh, 44px);
    height: clamp(32px, 5vh, 44px);
    border-radius: 3px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

/* Button wear effect */
.ui-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
    border-radius: 2px;
}

/* Button press ripple */
.ui-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.ui-button:active::before {
    width: 100px;
    height: 100px;
}

.ui-button:hover {
    background: var(--metal-scratches), linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--olive-light);
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4), 0 0 15px rgba(107, 124, 63, 0.4);
}

.ui-button:active {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.05s;
}

#mainMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #252520 0%, #1a1a16 60%, #0f0f0c 100%);
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    z-index: 2000;
    color: var(--khaki);
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
}

/* Mute Butonu */
#mainMenu .mute-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    border: 2px solid var(--olive-light);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(45,58,31,0.9) 0%, rgba(26,32,16,0.95) 100%);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.mute-btn:hover {
    border-color: var(--khaki);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(107,124,63,0.4);
}
.mute-btn:active {
    transform: scale(0.95);
}
.mute-btn .mute-icon {
    font-size: 20px;
    line-height: 1;
}
.mute-btn.muted {
    border-color: var(--warning-red);
    background: linear-gradient(180deg, rgba(80,30,30,0.9) 0%, rgba(40,15,15,0.95) 100%);
}

#mainMenu h1 {
    font-size: clamp(3em, 10vw, 6em);
    margin: 0;
    letter-spacing: 5px;
    animation: text-flicker 3s infinite alternate;
}
#mainMenu .subtitle {
    font-size: var(--ui-font-size-medium);
    margin: 5px 0 20px 0;
    opacity: 0.8;
}
#startButton {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    color: var(--khaki);
    border: 2px solid var(--olive-light);
    padding: 20px 40px;
    font-family: 'Oxanium', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 4px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
#startButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: shine-sweep 3s infinite;
}
#startButton:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive-mid) 100%);
    border-color: var(--khaki);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.instructions {
   display: none;
}
.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    text-align: left;
}
.controls-grid p {
    margin: 0;
    font-size: var(--ui-font-size-base);
}
.controls-grid p strong {
    color: #fff;
    min-width: 80px;
    display: inline-block;
}

.main-layout-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
    max-width: 1500px;
    height: 100%;
}

/* Üst: Başlık + Slogan */
.menu-title-row {
    text-align: center;
    flex-shrink: 0;
}
.menu-title-row h1 {
    line-height: 1;
}

/* Alt: Silahlar (sol) | Çizgi | Butonlar (orta) | Çizgi | Araçlar (sağ) */
.menu-content-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: 100%;
}

/* Sol/Sağ: Kartlar doğrudan menu-content-row içinde */
.menu-content-row > .menu-card {
    margin: 10px 10px;
}

/* Yeni panel stili (stats + leaderboard sütunları) */
.menu-panel {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(38, 48, 28, 0.92) 0%, rgba(28, 36, 18, 0.96) 100%);
    border: 1px solid rgba(107, 124, 63, 0.5);
    border-radius: 6px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
    width: 220px;
    flex-shrink: 0;
    margin: 10px 5px;
}
/* Liderlik tablosu daha geniş */
.leaderboard-panel {
    width: 265px;
}

.menu-panel .menu-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px 6px 0 0;
}

.menu-panel .menu-card-header h3 {
    margin: 0;
    font-size: 12px;
    color: var(--olive-light);
    letter-spacing: 2px;
}

.menu-panel-body {
    padding: 10px 12px;
    flex: 1;
    overflow-y: auto;
}

/* ═══ OYUNCU STATLARI PANELİ ═══ */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(107, 124, 63, 0.12);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    font-family: 'Oxanium', monospace;
    font-size: 10px;
    color: #8a9a5f;
    letter-spacing: 0.5px;
}

.stat-value {
    font-family: 'Oxanium', monospace;
    font-size: 12px;
    color: #c3b091;
    font-weight: 700;
}

/* ═══ LİDERLİK TABLOSU PANELİ ═══ */
.leaderboard-panel .leaderboard-content {
    max-height: none;
    overflow-y: auto;
}

/* Orta: Dikey çizgi seperatör */
.menu-separator {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(107, 124, 63, 0.6) 20%, rgba(107, 124, 63, 0.6) 80%, transparent);
    flex-shrink: 0;
}

/* Orta: Buton grubu */
.menu-buttons-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex: 0 0 auto;
    padding: 10px 20px;
}

/* Göreve Başla wrapper - dikeyde ortalı */
.start-game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

/* Meta butonlar - alta yapışık */
.menu-buttons-column > .meta-button-row {
    margin-top: auto;
}


/* ═══ MENU CARD - Ortak kart stili ═══ */
.menu-card {
    background: linear-gradient(180deg, rgba(38, 48, 28, 0.92) 0%, rgba(28, 36, 18, 0.96) 100%);
    border: 1px solid rgba(107, 124, 63, 0.5);
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
    width: 290px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
/* Silahlar paneli daha geniş — isimlerin tek satıra sığması için */
#weapons-panel {
    width: 360px;
}
.menu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px 6px 0 0;
}
.menu-card-header h3 {
    margin: 0;
    font-size: 13px;
    color: var(--olive-light);
    letter-spacing: 2px;
}
.menu-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    flex: 1;
}

/* ═══ İNLİNE ARAÇ GELİŞTİRME ═══ */
.vehicle-upgrade-inline {
    display: none;
    padding: 0 12px 12px;
}
.vehicle-upgrade-inline .upgrade-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 124, 63, 0.5), transparent);
    margin-bottom: 8px;
}
.vehicle-upgrade-inline .selected-vehicle-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 8px;
}
.vehicle-upgrade-inline .selected-vehicle-header .vehicle-name {
    font-size: 15px;
    font-weight: bold;
    color: var(--khaki);
    letter-spacing: 1px;
}

/* ═══ SİLAH GRUPLARI ═══ */
.weapons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 10px 12px 12px;
    align-content: start;
}
.weapon-group {
    padding: 6px 8px;
    border: 1px solid var(--metal-dark);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
}
.weapon-group h4 {
    font-size: 9px;
    color: var(--olive-light);
    letter-spacing: 0.8px;
    margin: 0 0 5px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.25);
    text-transform: uppercase;
    font-family: 'Oxanium', sans-serif;
}
.weapon-group:hover {
    border-color: var(--olive);
}
/* Silah grubu renkleri */
.weapon-group.bullet-hoarder { border-color: rgba(212, 160, 23, 0.4); }
.weapon-group.bullet-hoarder h4 { color: #d4a017; }
.weapon-group.arsonist { border-color: rgba(255, 128, 64, 0.4); }
.weapon-group.arsonist h4 { color: #ff8040; }
.weapon-group.tech-enthusiast { border-color: rgba(90, 138, 186, 0.4); }
.weapon-group.tech-enthusiast h4 { color: #5a8aba; }
.weapon-group.toy-lover { border-color: rgba(139, 74, 139, 0.4); }
.weapon-group.toy-lover h4 { color: #8b4a8b; }
.weapon-group.blade-master { border-color: rgba(192, 57, 43, 0.4); }
.weapon-group.blade-master h4 { color: #c0392b; }
.weapon-group.crew { border-color: rgba(46, 134, 171, 0.4); }
.weapon-group.crew h4 { color: #2e86ab; }
.weapon-group.gizli-fuzyon { border-color: rgba(204, 170, 0, 0.4); }
.weapon-group.gizli-fuzyon h4 { color: #ccaa00; }

/* Silah listesi */
.menu-card .weapon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-card .weapon-list li {
    padding: 2px 2px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: background-color 0.15s;
    border-radius: 2px;
}
.menu-card .weapon-list li:hover {
    background-color: rgba(255, 255, 255, 0.06);
}
.menu-card .weapon-list .weapon-icon {
    font-size: 1em;
    width: 18px;
    text-align: center;
}
.menu-card .weapon-level-tag {
    font-size: 0.7em;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 3px;
}
/* Fuzyon grid */
.fusion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
}
.fusion-grid li {
    font-size: 9px !important;
}
/* Locked durumları */
.weapon-group h4.locked { color: #555; }
.menu-card .weapon-list li.locked { color: #444; opacity: 0.6; }
.menu-card .weapon-list li.locked .weapon-icon { filter: grayscale(1); opacity: 0.4; }

/* ═══ GÖREVE BAŞLA BUTONU - En göze batan ═══ */
.start-button {
    background: linear-gradient(180deg, #4a7c23 0%, #2d5a10 100%);
    border: 4px solid #6b9c3f;
    color: #fff;
    padding: 22px 20px;
    font-family: 'Oxanium', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
    border-radius: 8px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    animation: start-button-glow 1.2s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(107, 156, 63, 0.7), 0 8px 25px rgba(0, 0, 0, 0.5);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

@keyframes start-button-glow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(107, 156, 63, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5);
        border-color: #6b9c3f;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 50px rgba(107, 156, 63, 1), 0 0 80px rgba(150, 200, 80, 0.5), 0 6px 20px rgba(0, 0, 0, 0.5);
        border-color: #9ccc5f;
        transform: scale(1.02);
    }
}

.start-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: start-shine 2s infinite;
}

@keyframes start-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.start-button:hover {
    animation: none;
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(107, 156, 63, 1), 0 0 100px rgba(150, 200, 80, 0.6), 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: #afd85f;
    background: linear-gradient(180deg, #5a9c33 0%, #3d7a20 100%);
}

.start-button:active {
    transform: scale(0.98);
    box-shadow: 0 0 20px rgba(107, 156, 63, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ═══ KOLAY MOD TOGGLE - Küçük buton ═══ */
.start-mode-toggles {
    display: flex;
    gap: 8px;
}

.easy-mode-toggle {
    background: linear-gradient(180deg, #3a3a35 0%, #2a2a25 100%);
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border-radius: 4px;
    padding: 8px 16px;
    font-family: 'Oxanium', sans-serif;
    font-size: 11px;
    color: #999;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0.7;
    flex: 1;
}

.easy-mode-toggle:hover {
    opacity: 1;
    border-color: #7a7a75;
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.easy-mode-toggle.active {
    background: linear-gradient(180deg, #5a6a35 0%, #4a5a25 100%);
    border-color: #8a9a5f;
    opacity: 1;
    box-shadow: 0 0 20px rgba(138, 154, 95, 0.5);
}

/* ═══ PRESTIGE SEÇİCİ ═══ */
.prestige-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(180deg, rgba(80, 40, 10, 0.85) 0%, rgba(50, 25, 5, 0.9) 100%);
    border: 1px solid rgba(200, 150, 50, 0.4);
    border-radius: 4px;
}
.prestige-arrow {
    background: rgba(200, 150, 50, 0.15);
    border: 1px solid rgba(200, 150, 50, 0.3);
    border-radius: 3px;
    color: #c89632;
    font-family: 'Oxanium', sans-serif;
    font-size: 14px;
    font-weight: bold;
    width: 28px;
    height: 28px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prestige-arrow:hover {
    background: rgba(200, 150, 50, 0.3);
    border-color: #c89632;
    transform: scale(1.1);
}
.prestige-arrow:disabled {
    opacity: 0.3;
    cursor: url('Asset/image/cursor-32.png') 7 0, default;
    transform: none;
}
.prestige-label {
    color: #e8c060;
    font-family: 'Oxanium', sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    min-width: 120px;
    text-align: center;
}

/* ═══ KALE SAVUNMASI BUTONU ═══ */
.castle-defense-btn {
    background: linear-gradient(180deg, #4a2a1a 0%, #3a1a0a 100%);
    border: 2px solid #cc6633;
    box-shadow: 0 2px 8px rgba(204, 102, 51, 0.25);
    border-radius: 6px;
    padding: 14px 30px;
    font-family: 'Oxanium', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff9944;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.castle-defense-btn:hover {
    border-color: #ff8833;
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(255, 136, 51, 0.4);
    color: #ffbb66;
    background: linear-gradient(180deg, #5a3a2a 0%, #4a2a1a 100%);
}

/* ═══ GELİŞTİRMELER CTA BUTONU ═══ */
.meta-upgrade-cta {
    background: linear-gradient(180deg, rgba(90, 70, 15, 0.95) 0%, rgba(55, 40, 5, 0.98) 100%);
    border: 2px solid #ffd700;
    color: #ffd700;
    padding: 16px 45px;
    font-family: 'Oxanium', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.25), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.2);
    animation: meta-cta-pulse 2.5s ease-in-out infinite;
    width: 100%;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.meta-upgrade-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
    animation: meta-cta-sweep 4s ease-in-out infinite;
}

@keyframes meta-cta-sweep {
    0%, 70% { left: -100%; }
    100% { left: 200%; }
}

@keyframes meta-cta-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), 0 4px 12px rgba(0,0,0,0.5); border-color: #ffd700; }
    50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.45), 0 4px 12px rgba(0,0,0,0.5), 0 0 60px rgba(255, 215, 0, 0.15); border-color: #ffe44d; }
}

.meta-upgrade-cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5), 0 8px 20px rgba(0,0,0,0.5);
    filter: brightness(1.15);
    animation-play-state: paused;
}

.meta-upgrade-cta:active {
    transform: translateY(1px) scale(0.97);
    transition: all 0.1s;
}

/* Meta buton satırı (madalya göstergesi için wrapper) */
.meta-button-row {
    position: relative;
    display: flex;
    width: 100%;
}

/* Meta buton madalya göstergesi */
.meta-medal-anim {
    right: -12px;
    top: -8px;
}

/* Menü ikincil buton satırı */
.menu-secondary-row {
    display: flex;
    gap: 10px;
    width: 100%;
    position: relative;
}

.menu-secondary-row .badge-btn {
    flex: 1;
    color: #c9a825;
    border-color: #c9a825;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    position: relative;
}

.menu-secondary-row .badge-btn:hover {
    color: #1a1a1a;
    background-color: #c9a825;
}

/* Menü yardımcı buton satırı */
.menu-utility-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.menu-button.utility-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 1px;
    opacity: 0.7;
    border-color: #666;
    color: #999;
}

.menu-button.utility-btn:hover {
    opacity: 1;
    color: #ccc;
    background-color: rgba(100,100,100,0.3);
}

.menu-button.danger-btn {
    color: #ff6666;
    border-color: #883333;
}

.menu-button.danger-btn:hover {
    color: #1a1a1a;
    background-color: #ff6666;
    border-color: #ff6666;
}

/* Araç kategori ayırıcıları */
.vehicle-category {
    margin-bottom: 3px;
}
.vehicle-category:last-child {
    margin-bottom: 0;
}

.money-badge {
    background: linear-gradient(180deg, rgba(60, 55, 20, 0.9), rgba(40, 35, 10, 0.95));
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Oxanium', sans-serif;
    font-size: 9px;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.15);
}

/* Upgrade satırları */
.upgrade-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Eski panel tabs gizle (artık kullanılmıyor) */
.panel-tabs {
    display: none;
    width: 100%;
    margin-bottom: 20px;
}

.panel-tab {
    flex: 1;
    padding: 10px;
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.8) 0%, rgba(40, 50, 25, 0.9) 100%);
    border: 2px solid var(--olive-dark);
    color: var(--khaki);
    font-family: 'Oxanium', sans-serif;
    font-size: var(--ui-font-size-base);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

.panel-tab:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 1px solid var(--olive-dark);
}

.panel-tab:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 1px solid var(--olive-dark);
}

.panel-tab:hover:not(.active) {
    background: linear-gradient(180deg, rgba(60, 70, 45, 0.9) 0%, rgba(50, 60, 35, 0.95) 100%);
    border-color: var(--olive-light);
}

.panel-tab.active {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--olive-light);
    color: var(--sand);
    text-shadow: none;
    font-weight: bold;
}

.panel-content {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    justify-content: flex-start;
}

#vehiclesContent {
    overflow-y: hidden;
}

.panel-content.active {
    display: flex;
}

.upgrade-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.upgrade-label {
    font-size: 11px;
    flex: 0 0 auto;
    text-align: left;
    white-space: nowrap;
    min-width: 48px;
}

.upgrade-slots {
    display: flex;
    gap: 4px;
}

.upgrade-slot {
    width: 22px;
    height: 12px;
    border: 1px solid var(--olive-light);
    background-color: rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    border-radius: 2px;
}
.upgrade-slot.purchased {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive-mid) 100%);
    border-color: var(--khaki);
    box-shadow: 0 0 5px rgba(107, 124, 63, 0.5);
}

.upgrade-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    flex: 1;
    justify-content: center;
}

.upgrade-cost {
    font-size: 10px;
    color: #ccc;
    min-height: 1.2em;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.buy-upgrade-button {
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.8) 0%, rgba(40, 50, 25, 0.9) 100%);
    color: var(--khaki);
    border: 1.5px solid var(--olive-light);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: 'Oxanium', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.buy-upgrade-button:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--khaki);
    color: var(--sand);
}
.buy-upgrade-button:disabled {
    border-color: #444;
    color: #555;
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed;
    opacity: 0.5;
    background: rgba(30, 30, 30, 0.5);
}

/* Upgrade Button Tooltip */
.buy-upgrade-button {
    position: relative;
}
.buy-upgrade-button[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 25, 15, 1);
    color: var(--sand);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 1000;
    border: 1px solid var(--olive-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    margin-bottom: 6px;
}
.buy-upgrade-button[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Vehicle Selection Styles */
.vehicle-selection-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
    margin-top: 4px;
}

.vehicle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 5px 4px;
    border: 1.5px solid var(--olive-dark);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.7) 0%, rgba(40, 50, 25, 0.8) 100%);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.3s ease;
    height: 68px;
}

.vehicle-item.has-card-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.vehicle-item.has-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: rgba(20, 35, 10, 0.7);
    transition: opacity 0.3s ease;
}

.vehicle-item.has-card-image.selected::after {
    opacity: 0;
}

.vehicle-item.has-card-image .vehicle-name,
.vehicle-item.has-card-image .vehicle-price {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5);
}

.vehicle-item:not(.locked):not(.selected):hover {
    border-color: var(--khaki);
    transform: scale(1.1);
}

.vehicle-item.buyable {
     border-color: var(--olive-light);
     box-shadow: 0 0 8px rgba(107, 124, 63, 0.4);
     color: var(--khaki);
}

.vehicle-item.buyable:hover {
    border-color: var(--khaki);
    transform: scale(1.1);
}

.vehicle-item.selected {
    border-color: #ffd700;
    box-shadow: 0 0 15px #ffd700;
    cursor: url('Asset/image/cursor-32.png') 7 0, default;
}

.vehicle-item.selected:hover {
    transform: none; /* Seçili öğenin büyümesini engelle */
}

.vehicle-item.locked:not(.buyable) {
    border-color: #555;
    color: #555;
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed;
    opacity: 0.6;
}

.vehicle-item.locked:not(.buyable):hover {
    background-color: rgba(0,0,0,0.5);
    color: #555;
}

.vehicle-icon {
    font-size: 2em;
    line-height: 1;
}

.vehicle-name {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
}

.vehicle-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #ffd700;
}

/* Tooltip styles */
.vehicle-tooltip {
    display: none;
    position: absolute;
    background: linear-gradient(180deg, rgba(45, 58, 31, 0.98) 0%, rgba(35, 48, 21, 0.98) 100%);
    border: 2px solid var(--olive-dark);
    border-radius: 4px;
    padding: 15px;
    color: #e0e0e0;
    text-shadow: none;
    z-index: 2010;
    width: 300px;
    pointer-events: none;
    font-size: var(--ui-font-size-small);
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.vehicle-tooltip h4 {
    margin: 0 0 10px 0;
    color: var(--khaki);
    text-shadow: none;
    font-size: var(--ui-font-size-base);
}

.vehicle-tooltip p {
    margin: 0 0 10px 0;
    color: #ccc;
}

.vehicle-tooltip .stats {
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.stat-bar-label {
    width: 60px; /* Sabit genişlik */
    flex-shrink: 0;
    color: #fff;
    font-weight: bold;
}
.stat-bar-wrapper {
    flex-grow: 1;
    display: flex;
    height: 12px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #555;
}
.stat-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--olive-mid), var(--olive-light));
    border-radius: 2px;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
}

.weapon-list li.locked {
    color: #555;
    cursor: url('Asset/image/cursor-32.png') 7 0, default;
}
.pause-panel h3.locked {
    color: #555;
    cursor: url('Asset/image/cursor-32.png') 7 0, default;
}
.pause-panel h3.locked:hover {
    background-color: transparent;
}
.weapon-list li.locked .weapon-icon {
    opacity: 0.4;
}

/* Kilitli panel — grup rengini bastır */
.pause-panel.panel-locked {
    border-color: #555 !important;
}
.pause-panel.panel-locked h3,
.pause-panel.panel-locked .weapon-list .weapon-icon {
    color: #555 !important;
}
.weapon-list li.locked:hover {
    background-color: transparent;
}

.weapon-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em;
}
.weapon-stats-table th, .weapon-stats-table td {
    border: 1px solid rgba(107, 124, 63, 0.3);
    padding: 4px;
    text-align: left;
}
.weapon-stats-table th {
    background-color: rgba(0, 0, 0, 0.3);
}
.weapon-stats-table tr.current-level {
    background: rgba(107, 124, 63, 0.35);
    color: #fff;
    font-weight: bold;
}
.weapon-stats-table tr.current-level td {
    border-color: rgba(107, 124, 63, 0.6);
}
.weapon-level-badge {
    font-size: 0.7em;
    background: var(--olive);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.weapon-level-badge.inactive {
    background: #555;
    color: #999;
}

@keyframes button-pulse-military {
    0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 15px rgba(107, 124, 63, 0.3); }
    50% { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 25px rgba(107, 124, 63, 0.5); }
}

.difficulty-button {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: var(--khaki);
    padding: 15px 50px;
    font-family: 'Oxanium', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 3px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    animation: button-pulse-military 2s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Shine sweep */
.difficulty-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.4s ease;
}

.difficulty-button:hover::before {
    left: 150%;
}

.difficulty-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 20px rgba(107, 124, 63, 0.4);
    filter: brightness(1.1);
    border-color: #8b9c5f;
    animation-play-state: paused;
}

.difficulty-button:active {
    transform: translateY(1px) scale(0.98);
    transition: all 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.difficulty-button.secondary {
    background: linear-gradient(180deg, #4a4a45 0%, #3a3a35 100%);
    border: 2px solid #5a5a55;
    color: var(--sand);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    animation: none;
    font-size: 14px;
    padding: 12px 35px;
}

.difficulty-button.secondary:hover {
    background: linear-gradient(180deg, #5a5a55 0%, #4a4a45 100%);
    border-color: var(--khaki);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(90, 90, 85, 0.3);
}

#muteButton {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    font-size: 2em;
    z-index: 2001;
}

#lootBoxAnimationContainer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1040;
    pointer-events: none;
}

/* Askeri sandık animasyonu */
@keyframes crate-glow {
    0%, 100% { box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 0 8px rgba(107, 124, 63, 0.4); }
    50% { box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 0 15px rgba(107, 124, 63, 0.6), 0 0 25px rgba(107, 124, 63, 0.3); }
}

@keyframes lock-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(107, 124, 63, 0.5); }
    50% { box-shadow: 0 0 15px rgba(107, 124, 63, 0.8), 0 0 25px rgba(195, 176, 145, 0.5); }
}

#lootBoxChest {
    position: relative;
    width: 320px;
    height: 240px;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
}

#lootBoxChest.visible {
    transform: scale(1);
    opacity: 1;
}

#lootBoxChest .chest-lid,
#lootBoxChest .chest-base {
    position: absolute;
    width: 100%;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px),
                linear-gradient(180deg, #4a5d23 0%, #3a4a1a 50%, #2d3a15 100%);
    border: 4px solid #1a2010;
    animation: crate-glow 2.5s infinite ease-in-out;
    box-sizing: border-box;
}

#lootBoxChest .chest-lid {
    height: 72px;
    top: 0;
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid #1a2010;
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#lootBoxChest .chest-base {
    height: 168px;
    top: 72px;
    border-radius: 0 0 6px 6px;
}

/* Metal band on lid */
#lootBoxChest .chest-lid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 18px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 50%, #4a4a4a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 3px;
}

/* Lock on lid */
#lootBoxChest .chest-lid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #6b7c3f, #3a4a1a);
    border-radius: 50%;
    border: 4px solid #2a3a15;
    animation: lock-glow 1.5s infinite ease-in-out;
}

/* SUPPLY text — artık .loot-label span ile render ediliyor */
#lootBoxChest .chest-base::before {
    display: none;
}

#lootBoxChest .chest-base .loot-label {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Oxanium', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: rgba(195, 176, 145, 0.4);
    letter-spacing: 6px;
    white-space: nowrap;
    pointer-events: none;
}

/* Metal plate on base */
#lootBoxChest .chest-base::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 50px;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 4px;
}

/* Shake animation makes glow faster */
#lootBoxChest.shake .chest-lid,
#lootBoxChest.shake .chest-base {
    animation: crate-glow 0.3s infinite ease-in-out;
}



#lootBoxChest.grow {
    animation: grow-in 0.5s ease-out forwards;
}

#lootBoxChest.shake {
    animation-name: shake-animation;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes grow-in {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

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

/* ═══ DAMAGE OVERLAY - Kademeli Hasar Sistemi ═══ */
#damageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* Kırmızı vignette katmanı */
#damage-vignette {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

#damageOverlay[data-stage="1"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(100, 0, 0, 0.12) 65%,
        rgba(80, 0, 0, 0.25) 85%,
        rgba(60, 0, 0, 0.4) 100%
    );
}

#damageOverlay[data-stage="2"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        transparent 30%,
        rgba(120, 0, 0, 0.18) 55%,
        rgba(100, 0, 0, 0.35) 75%,
        rgba(70, 0, 0, 0.55) 100%
    );
    animation: vignette-pulse-soft 2s ease-in-out infinite;
}

#damageOverlay[data-stage="3"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        transparent 20%,
        rgba(140, 0, 0, 0.22) 45%,
        rgba(110, 0, 0, 0.45) 65%,
        rgba(80, 0, 0, 0.7) 100%
    );
    animation: vignette-pulse-med 1.5s ease-in-out infinite;
}

#damageOverlay[data-stage="4"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(80, 0, 0, 0.1) 10%,
        rgba(150, 0, 0, 0.3) 35%,
        rgba(120, 0, 0, 0.55) 55%,
        rgba(90, 0, 0, 0.8) 100%
    );
    animation: vignette-pulse-crit 0.9s ease-in-out infinite;
}

@keyframes vignette-pulse-soft {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
@keyframes vignette-pulse-med {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
@keyframes vignette-pulse-crit {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* SVG katmanı */
#damageOverlay svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    will-change: opacity;
}

/* ─── Çatlak stage'leri - kademeli görünürlük ─── */
.crack-stage, .blood-stage {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Stage 1: Hafif kenar çatlakları */
#damageOverlay[data-stage="1"] .crack-stage-1,
#damageOverlay[data-stage="2"] .crack-stage-1,
#damageOverlay[data-stage="3"] .crack-stage-1,
#damageOverlay[data-stage="4"] .crack-stage-1 {
    opacity: 1;
    animation: crack-shimmer-soft 3s ease-in-out infinite;
}

/* Stage 2: Genişleyen çatlaklar + hafif kan */
#damageOverlay[data-stage="2"] .crack-stage-2,
#damageOverlay[data-stage="3"] .crack-stage-2,
#damageOverlay[data-stage="4"] .crack-stage-2 {
    opacity: 1;
    animation: crack-shimmer-soft 2.5s ease-in-out infinite;
}
#damageOverlay[data-stage="2"] .blood-stage-2,
#damageOverlay[data-stage="3"] .blood-stage-2,
#damageOverlay[data-stage="4"] .blood-stage-2 {
    opacity: 1;
}

/* Stage 3: Ağır çatlaklar + kan */
#damageOverlay[data-stage="3"] .crack-stage-3,
#damageOverlay[data-stage="4"] .crack-stage-3 {
    opacity: 1;
    animation: crack-shimmer-med 2s ease-in-out infinite;
}
#damageOverlay[data-stage="3"] .blood-stage-3,
#damageOverlay[data-stage="4"] .blood-stage-3 {
    opacity: 1;
}

/* Stage 4: Kritik - merkez örümcek ağı + ağır kan */
#damageOverlay[data-stage="4"] .crack-stage-4 {
    opacity: 1;
    animation: crack-shimmer-crit 1.2s ease-in-out infinite;
}
#damageOverlay[data-stage="4"] .blood-stage-4 {
    opacity: 1;
    animation: blood-pulse 1s ease-in-out infinite;
}

/* Kan damla animasyonu */
#damageOverlay[data-stage="4"] .blood-drip-el {
    animation: blood-drip-flow 3s ease-in infinite;
}
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(2) { animation-delay: 0.6s; }
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(3) { animation-delay: 1.2s; }
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(4) { animation-delay: 0.3s; }
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(5) { animation-delay: 0.9s; }

@keyframes blood-drip-flow {
    0% { transform: translateY(-100%); opacity: 0; }
    15% { opacity: 0.8; }
    85% { opacity: 0.6; }
    100% { transform: translateY(80px); opacity: 0; }
}

/* Çatlak parıltı animasyonları (stage'e göre yoğunluk) */
@keyframes crack-shimmer-soft {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
@keyframes crack-shimmer-med {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes crack-shimmer-crit {
    0%, 100% { opacity: 0.5; }
    40% { opacity: 1; }
    60% { opacity: 0.9; }
}

/* Kan nabız efekti */
@keyframes blood-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Hasar alınca anlık parlama */
#damageOverlay.hit-pulse #damage-vignette {
    animation: damage-hit-flash 0.25s ease-out !important;
}

@keyframes damage-hit-flash {
    0% { background: radial-gradient(ellipse at center, rgba(200,0,0,0.3) 0%, rgba(150,0,0,0.6) 100%); }
    100% { background: inherit; }
}

/* Yeni Uyarı Modalı Stili */
#easyModeConfirmModal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 20, 10, 0.95);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 600px;
    z-index: 2020; /* Ana menünün üzerinde olması için */
    pointer-events: auto;
    border: 2px solid #ffd700;
    color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
#easyModeConfirmModal h2 {
    margin: 0 0 20px 0;
    font-size: 2.5em;
    text-shadow: 0 0 10px currentColor;
}
#easyModeConfirmModal p {
    font-size: 1.2em;
    color: #e0e0e0;
    text-shadow: none;
    line-height: 1.6;
    margin-bottom: 30px;
}
#easyModeConfirmModal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}


/* Responsiveness */
@media (max-width: 1024px) {
    #dashboard {
        flex-wrap: wrap;
        justify-content: center;
    }
    #left-panel, #right-panel {
        flex-basis: 45%;
        flex-grow: 1;
    }
    #center-panel {
        flex-basis: 100%;
        order: 3;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    #top-head-band {
        padding: 5px;
    }
    .top-ui {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    #weapon-ui {
        order: 3;
        justify-content: center;
    }
    #dashboard {
        padding: 5px;
        gap: 5px;
        flex-direction: row !important;
    }
    .panel-section {
        width: auto;
        justify-content: center;
    }
    #left-panel, #right-panel, #center-panel {
        flex-basis: auto;
    }
    #right-panel {
        justify-content: center;
    }

    #bossBarsWrapper {
        top: 60px;
        width: 80%;
    }

    #activeQuestUI {
        top: 50px;
        left: 10px;
        width: auto;
        text-align: center;
    }
}

/* ================================================================
   POLISH UI - ASKERİ TEMA
   ================================================================ */

:root {
    /* Askeri Tema Renkleri */
    --olive: #6b7c3f;
    --olive-dark: #3a4a1a;
    --olive-light: #8fa04f;
    --khaki: #c3b091;
    --sand: #a89070;
    --metal-dark: #3a3a35;
    --warning-red: #d94a4a;

    /* Juice Renkleri */
    --juice-gold: #ffd700;
    --juice-orange: #ff8c00;
    --juice-green: #4ad94a;
}

/* === JUICE ANİMASYONLARI === */

/* Sparkle Particles */
.sparkle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: var(--juice-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: float-up 0.8s ease-out forwards;
    box-shadow: 0 0 6px var(--juice-gold), 0 0 12px var(--juice-orange);
    z-index: 9999;
}

.sparkle:nth-child(odd) { width: 3px; height: 3px; }
.sparkle:nth-child(3n) { width: 5px; height: 5px; background: var(--juice-orange); }
.sparkle:nth-child(5n) { width: 6px; height: 6px; box-shadow: 0 0 8px #fff, 0 0 16px var(--juice-gold); }

@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 1;
    }
    30% { opacity: 1; }
    100% {
        transform: translateY(var(--float-y, -60px)) translateX(var(--float-x, 0px)) scale(0.3);
        opacity: 0;
    }
}

/* Screen Flash */
#screen-flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
}

#screen-flash.flash-gold {
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: screen-flash-anim 0.3s ease-out;
}

#screen-flash.flash-green {
    background: radial-gradient(ellipse at center, rgba(107, 124, 63, 0.5) 0%, transparent 70%);
    animation: screen-flash-anim 0.25s ease-out;
}

#screen-flash.flash-red {
    background: radial-gradient(ellipse at center, rgba(255, 50, 50, 0.4) 0%, transparent 70%);
    animation: screen-flash-anim 0.2s ease-out;
}

#screen-flash.flash-orange {
    background: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.45) 0%, transparent 70%);
    animation: screen-flash-anim 0.25s ease-out;
}

#screen-flash.flash-hit {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(255, 255, 255, 0.2) 100%);
    animation: screen-flash-anim 0.2s ease-out;
}

@keyframes screen-flash-anim {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Confetti */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 10px;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* === SEVİYE ATLAMA - SLOT MAKİNESİ === */

#levelUpOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

#levelUpOverlay.show {
    display: flex;
}

.levelup-popup {
    position: relative;
    background: linear-gradient(180deg, #2a2a25 0%, #1a1a16 100%);
    border: 4px solid var(--metal-dark);
    border-radius: 3px;
    padding: 25px 35px 35px 35px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    animation: popup-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: visible;
}

@keyframes popup-entrance {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateX(-15deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

.levelup-popup h2 {
    color: #d4a017;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(212, 160, 23, 0.5);
}

.levelup-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    padding: 10px;
}

/* Upgrade Card */
.upgrade-card {
    background: linear-gradient(180deg, #4a4a45 0%, #3a3a35 100%);
    border: 2px solid transparent;
    border-radius: 3px;
    padding: 18px 15px;
    width: 140px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    position: relative;
    overflow: visible;
}

.upgrade-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: var(--olive);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 20px rgba(107, 124, 63, 0.3);
}

.upgrade-card .shine-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

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

.upgrade-card:hover .shine-container::before {
    left: 200%;
}

.upgrade-card .icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.upgrade-card .name {
    font-size: 11px;
    font-weight: bold;
    color: var(--khaki);
    margin-bottom: 4px;
}

.upgrade-card .desc {
    font-size: 9px;
    color: #888;
}

/* YENİ Tag */
.new-tag {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb000 100%);
    color: #1a1a14;
    font-size: 8px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
    z-index: 20;
    animation: new-tag-pulse 1.5s infinite;
}

@keyframes new-tag-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Glowing Cards */
.upgrade-card.glowing {
    animation: glowing-card 2s infinite;
}

@keyframes glowing-card {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
        border-color: #ffd700;
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.5);
        border-color: #fff;
    }
}

/* Slot Machine Animations */
#upgrade-options.slot-mode .upgrade-button {
    opacity: 0;
    transform: translateY(-200px) scale(0.3);
}

/* Kart ilk oluştuğunda - giriş animasyonu */
#upgrade-options.slot-mode .upgrade-button.slot-entering {
    opacity: 0;
    transform: translateY(-100px) scale(0.5);
    animation: slot-enter 0.3s ease-out forwards;
}

@keyframes slot-enter {
    0% {
        opacity: 0;
        transform: translateY(-100px) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#upgrade-options.slot-mode .upgrade-button.slot-spinning {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: slot-spin 0.15s linear infinite;
}

#upgrade-options.slot-mode .upgrade-button.slot-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: slot-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               slot-impact-glow 0.6s ease-out forwards;
}

/* Glowing kartlar slot-revealed olduktan sonra glowing animasyonuna geçsin */
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.bullet-hoarder {
    animation: slot-land 0.4s forwards, glowing-mermi 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.arsonist {
    animation: slot-land 0.4s forwards, glowing-arsonist 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.tech-enthusiast {
    animation: slot-land 0.4s forwards, glowing-teknoloji 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.toy-lover {
    animation: slot-land 0.4s forwards, glowing-oyuncak 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.blade-master {
    animation: slot-land 0.4s forwards, glowing-kesici 1.5s 0.4s ease-in-out infinite;
}

/* Final-choice kartları için pulsing ekle */
#upgrade-options.slot-mode .upgrade-button.slot-revealed.final-choice {
    margin-bottom: 24px;
}

@keyframes slot-spin {
    0% { transform: translateY(-120px) scale(0.4) rotateX(0deg); opacity: 0.2; filter: blur(4px); }
    25% { transform: translateY(-40px) scale(0.7) rotateX(90deg); opacity: 0.5; filter: blur(2px); }
    50% { transform: translateY(0) scale(0.9) rotateX(180deg); opacity: 0.7; filter: blur(1px); }
    75% { transform: translateY(40px) scale(0.7) rotateX(270deg); opacity: 0.5; filter: blur(2px); }
    100% { transform: translateY(120px) scale(0.4) rotateX(360deg); opacity: 0.2; filter: blur(4px); }
}

@keyframes slot-land {
    0% { transform: translateY(-60px) scale(0.7) rotateX(25deg); opacity: 0.6; filter: blur(2px) brightness(1.5); }
    20% { transform: translateY(0) scale(1.15) rotateX(-3deg); filter: blur(0) brightness(1.8); }
    35% { transform: translateY(12px) scale(1.08) rotateX(2deg); filter: brightness(1.4); }
    50% { transform: translateY(-6px) scale(0.97); filter: brightness(1.2); }
    65% { transform: translateY(4px) scale(1.03); filter: brightness(1.1); }
    80% { transform: translateY(-2px) scale(0.99); }
    100% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; filter: blur(0) brightness(1); }
}

@keyframes slot-impact-glow {
    0% { box-shadow: 0 0 60px rgba(255, 255, 255, 0.9), 0 0 100px rgba(195, 176, 145, 0.8); filter: brightness(1.5); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 50px rgba(195, 176, 145, 0.4); filter: brightness(1.2); }
    100% { box-shadow: 0 0 15px rgba(195, 176, 145, 0.3), 0 5px 15px rgba(0,0,0,0.4); filter: brightness(1); }
}

/* Slot Tension */
.levelup-container.slot-tension {
    animation: slot-tension-shake 0.08s linear infinite;
}

@keyframes slot-tension-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: translate(-1px, -1px) rotate(-0.3deg); }
    75% { transform: translate(1px, 1px) rotate(0.3deg); }
}

#upgrade-options.slot-mode {
    position: relative;
}

#upgrade-options.slot-mode::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 25px, rgba(255,255,255,0.02) 25px, rgba(255,255,255,0.02) 50px);
    animation: slot-lines 0.3s linear infinite;
    pointer-events: none;
    z-index: 100;
    border-radius: 8px;
}

#upgrade-options.slot-mode::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: linear-gradient(90deg,
        transparent,
        rgba(195, 176, 145, 0.3),
        rgba(107, 124, 63, 0.4),
        rgba(195, 176, 145, 0.3),
        transparent
    ) border-box;
    animation: slot-border-glow 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 99;
}

#upgrade-options.slot-complete::before,
#upgrade-options.slot-complete::after { display: none; }

@keyframes slot-border-glow {
    0%, 100% {
        opacity: 0.3;
        box-shadow: 0 0 20px rgba(195, 176, 145, 0.2);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 40px rgba(195, 176, 145, 0.5), 0 0 60px rgba(107, 124, 63, 0.3);
    }
}

@keyframes slot-lines {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/* === OYUN BİTTİ === */

.game-over-container {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 15, 10, 0.98) 0%, rgba(30, 25, 18, 0.98) 100%);
    border: 3px solid transparent;
    border-radius: 4px;
    padding: clamp(12px, 3vh, 30px) clamp(15px, 3vw, 40px);
    text-align: center;
    max-width: min(520px, 95%);
    width: 90%;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: gameover-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
    max-height: 90vh;
    overflow-y: auto;
}

.game-over-container::before,
.game-over-container::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid var(--olive);
    opacity: 0.4;
}

.game-over-container::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.game-over-container::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

@keyframes gameover-entrance {
    0% { opacity: 0; transform: scale(0.8) translateY(-30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Scrollbar Styling (Game Over Modal) */
.game-over-container::-webkit-scrollbar {
    width: 8px;
}

.game-over-container::-webkit-scrollbar-track {
    background: rgba(20, 15, 10, 0.5);
    border-radius: 4px;
}

.game-over-container::-webkit-scrollbar-thumb {
    background: var(--olive-dark);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.game-over-container::-webkit-scrollbar-thumb:hover {
    background: var(--olive);
}

.game-over-container h2 {
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin: 0 0 6px 0;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.8), 0 0 20px rgba(255, 68, 68, 0.5);
    animation: glitch-text 3s infinite;
}

.game-over-container.victory h2 {
    color: #d4a017;
    text-shadow: 0 0 10px rgba(212, 160, 23, 0.8), 0 0 20px rgba(212, 160, 23, 0.5);
    animation: none;
}

@keyframes glitch-text {
    0%, 90%, 100% { transform: translateX(0); filter: none; }
    92% { transform: translateX(-3px); filter: hue-rotate(90deg); }
    94% { transform: translateX(3px); filter: hue-rotate(-90deg); }
    96% { transform: translateX(-2px); }
    98% { transform: translateX(2px); }
}

.new-highscore-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d4a017 0%, #ffcc00 50%, #d4a017 100%);
    background-size: 200% 100%;
    color: #1a1a14;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 8px 25px;
    border-radius: 3px;
    margin-bottom: 15px;
    animation: highscore-shine 2s linear infinite, highscore-bounce 0.6s ease-out;
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.6);
}

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

@keyframes highscore-bounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.gameover-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}

@media (max-width: 768px) {
    .gameover-stats-grid {
        grid-template-columns: 1fr;
    }

    .game-over-container {
        max-width: 95%;
        padding: 20px 16px;
    }
}

.battle-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 11px;
    color: #ccc;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.battle-stat-row span:last-child {
    color: var(--khaki);
    font-weight: bold;
}

.gameover-stat-box {
    background: linear-gradient(180deg, rgba(50, 45, 35, 0.9) 0%, rgba(35, 30, 22, 0.95) 100%);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 10px 12px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    text-align: left;
}

.gameover-stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--olive), transparent);
    opacity: 0.6;
}

.gameover-stat-box:hover {
    border-color: var(--olive);
}

.gameover-stat-box h3 {
    font-size: 10px;
    color: var(--olive);
    letter-spacing: 2px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
    padding-bottom: 6px;
}

/* === TAKTİK HARİTA === */

#mapOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(20, 25, 15, 0.98) 0%, rgba(30, 35, 22, 0.98) 100%);
    z-index: 9999; /* Tüm katmanların üstünde — HUD dahil */
}

#mapOverlay.show {
    display: flex;
    flex-direction: column;
}

.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(40, 45, 30, 0.95) 0%, rgba(30, 35, 20, 0.95) 100%);
    border-bottom: 2px solid var(--olive-dark);
}

.map-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--khaki);
    letter-spacing: 3px;
}

.map-close-btn {
    padding: 8px 16px;
    background: linear-gradient(180deg, #5a3a3a 0%, #4a2a2a 100%);
    border: 2px solid #6a4a4a;
    color: #ffaaaa;
    font-family: 'Oxanium', sans-serif;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
}

.map-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.map-legend, .map-objectives {
    width: 180px;
    background: linear-gradient(180deg, rgba(35, 40, 25, 0.95) 0%, rgba(25, 30, 18, 0.95) 100%);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.map-legend {
    border-right: 2px solid var(--olive-dark);
}

.map-objectives {
    border-left: 2px solid var(--olive-dark);
}

.map-legend h3, .map-objectives h3 {
    font-size: 10px;
    color: var(--olive);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
}

.map-view {
    flex: 1;
    position: relative;
    background: #1a1f12;
    border: 3px solid transparent;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#tacticalMapCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.map-zone {
    position: absolute;
    border: 2px dashed;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-zone.safe {
    background: rgba(74, 217, 74, 0.1);
    border-color: rgba(74, 217, 74, 0.4);
}

.map-zone.danger {
    background: rgba(217, 74, 74, 0.15);
    border-color: rgba(217, 74, 74, 0.5);
    animation: danger-pulse 2s infinite;
}

@keyframes danger-pulse {
    0%, 100% { background: rgba(217, 74, 74, 0.15); }
    50% { background: rgba(217, 74, 74, 0.25); }
}

.map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.map-marker.player {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #4a90d9 40%, transparent 70%);
    border: 3px solid #4a90d9;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(74, 144, 217, 0.8);
    animation: player-pulse 1.5s infinite;
}

@keyframes player-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(74, 144, 217, 0.8); transform: translate(-50%, -50%) scale(1); }
    50% { box-shadow: 0 0 25px rgba(74, 144, 217, 1); transform: translate(-50%, -50%) scale(1.1); }
}

.map-marker.enemy {
    width: 10px;
    height: 10px;
    background: #d94a4a;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(217, 74, 74, 0.6);
    animation: enemy-blink 1s infinite;
}

@keyframes enemy-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.map-marker.boss {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #9a4ad9 30%, rgba(154, 74, 217, 0.3) 70%);
    border: 2px solid #9a4ad9;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(154, 74, 217, 0.7);
    animation: boss-glow 2s infinite;
}

@keyframes boss-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(154, 74, 217, 0.7); }
    50% { box-shadow: 0 0 30px rgba(154, 74, 217, 1); }
}

.map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(180deg, rgba(30, 35, 20, 0.95) 0%, rgba(40, 45, 30, 0.95) 100%);
    border-top: 2px solid var(--olive-dark);
}

.map-hint {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 10px;
    color: #888;
}

.map-hint .key {
    background: rgba(107, 124, 63, 0.3);
    color: var(--olive-light);
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: bold;
}

/* === SCANLINES EFEKT === */

.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    z-index: 1;
    opacity: 0.6;
}

/* === OYUN BİTTİ BUTONLARI === */

.gameover-btn {
    padding: 10px 24px;
    font-family: 'Oxanium', sans-serif;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    overflow: hidden;
}

.gameover-btn.primary {
    background: linear-gradient(180deg, var(--olive) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: #fff;
    box-shadow: 0 4px 15px rgba(107, 124, 63, 0.4);
}

.gameover-btn.primary:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    box-shadow: 0 6px 25px rgba(107, 124, 63, 0.6);
    transform: translateY(-2px);
}

.gameover-btn.secondary {
    background: linear-gradient(180deg, #4a4540 0%, #3a3530 100%);
    border: 2px solid transparent;
    color: var(--khaki);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.gameover-btn.secondary:hover {
    background: linear-gradient(180deg, #5a5550 0%, #4a4540 100%);
    border-color: var(--khaki);
    transform: translateY(-2px);
}

.gameover-btn.prestige {
    background: linear-gradient(180deg, #8b6914 0%, #6b4f10 100%);
    border: 2px solid #ffd700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: prestigePulse 2s ease-in-out infinite;
}

.gameover-btn.prestige:hover {
    background: linear-gradient(180deg, #a07818 0%, #8b6914 100%);
    border-color: #ffe44d;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

@keyframes prestigePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
}

/* === PAUSE MENU === */

.pause-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pause-container {
    background: linear-gradient(180deg, rgba(35, 40, 28, 0.98) 0%, rgba(25, 30, 18, 0.98) 100%);
    border: 3px solid transparent;
    border-radius: 4px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: pause-entrance 0.3s ease-out;
}

@keyframes pause-entrance {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.pause-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(6px, 1.5vh, 12px) clamp(10px, 2vw, 20px);
    background: linear-gradient(180deg, rgba(45, 50, 35, 0.95) 0%, rgba(35, 40, 25, 0.95) 100%);
    border-bottom: 2px solid var(--olive-dark);
    flex-shrink: 0;
}

.pause-header h2 {
    font-size: clamp(12px, 2.5vh, 18px);
    color: var(--khaki);
    letter-spacing: clamp(2px, 0.5vw, 4px);
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.pause-stats {
    display: flex;
    gap: clamp(4px, 0.8vw, 12px);
    flex-wrap: wrap;
}

.pause-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(9px, 1.8vh, 12px);
    color: #aaa;
    background: rgba(0, 0, 0, 0.3);
    padding: clamp(2px, 0.5vh, 4px) clamp(5px, 0.8vw, 10px);
    border-radius: 3px;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.pause-stat .stat-icon {
    font-size: clamp(9px, 1.6vh, 12px);
}

#pause-main-content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; /* flex child scroll fix */
    -webkit-overflow-scrolling: touch;
}

.pause-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: clamp(3px, 0.6vh, 6px);
    padding: clamp(4px, 1vh, 8px) clamp(6px, 1vw, 12px);
}

@media (max-width: 800px) {
    .pause-panels {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
}

.pause-panel {
    background: linear-gradient(180deg, rgba(50, 55, 40, 0.8) 0%, rgba(40, 45, 30, 0.9) 100%);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: clamp(3px, 0.6vh, 6px) clamp(4px, 0.8vw, 8px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.pause-panel:hover {
    border-color: var(--olive);
    transform: translateY(-2px);
}

.pause-panel h3 {
    font-size: clamp(7px, 1.3vh, 9px);
    color: var(--olive-light);
    letter-spacing: 1px;
    margin: 0 0 clamp(2px, 0.4vh, 4px) 0;
    padding-bottom: clamp(2px, 0.4vh, 4px);
    border-bottom: 1px solid rgba(107, 124, 63, 0.4);
    text-transform: uppercase;
}

/* İpucu kutusu */
.pause-tip {
    text-align: center;
    padding: clamp(4px, 1vh, 12px) clamp(8px, 1.5vw, 18px);
    margin: clamp(4px, 0.8vh, 10px) clamp(8px, 1.5vw, 16px);
    font-size: clamp(10px, 1.8vh, 13px);
    color: #8a9f55;
    font-style: italic;
    background: rgba(107, 124, 63, 0.1);
    border-radius: 4px;
    border-left: 3px solid #6b7c3f;
    line-height: 1.4;
    flex-shrink: 1;
    overflow: hidden;
}

.pause-tip .tip-icon {
    margin-right: 8px;
    font-style: normal;
}

/* Alt bar: butonlar + ses ayarları tek satır */
.pause-footer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    padding: clamp(4px, 1vh, 10px) clamp(8px, 1.5vw, 16px);
    border-top: 2px solid var(--olive-dark);
    background: linear-gradient(180deg, rgba(30, 35, 22, 0.95) 0%, rgba(25, 30, 18, 0.98) 100%);
    gap: clamp(8px, 1.5vw, 16px);
    flex-shrink: 0;
}

.pause-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    justify-content: center;
}

/* Ses Ayarları Paneli — Pause menü */
.volume-controls-panel {
    flex: 1;
    max-width: 380px;
    background: linear-gradient(180deg, rgba(40, 50, 28, 0.95) 0%, rgba(30, 38, 20, 0.98) 100%);
    border: 1px solid var(--olive-dark);
    border-radius: 8px;
    padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.5vw, 18px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vh, 10px);
}

.volume-row {
    display: grid;
    grid-template-columns: 70px 1fr 40px;
    align-items: center;
    gap: 8px;
}

.volume-row.toggle-row {
    grid-template-columns: 1fr auto;
    padding-top: 2px;
    border-top: 1px solid rgba(107, 124, 63, 0.2);
}

.volume-label {
    font-size: clamp(11px, 1.8vh, 14px);
    color: var(--khaki);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.volume-slider-wide {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    border: 1px solid var(--metal-dark);
    outline: none;
}

.volume-slider-wide::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    border-radius: 50%;
    border: 2px solid var(--khaki);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.volume-slider-wide::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    border-radius: 50%;
    border: 2px solid var(--khaki);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.volume-value {
    font-size: clamp(10px, 1.6vh, 13px);
    color: var(--metal-light);
    text-align: right;
    font-family: monospace;
}

/* Eski ses ayarları (uyumluluk) */
.volume-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(4px, 0.6vh, 8px) clamp(6px, 1vw, 14px);
    align-items: center;
    max-width: min(480px, 95%);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.volume-control label {
    font-size: clamp(10px, 1.8vh, 13px);
    line-height: 1;
    cursor: url('Asset/image/cursor-32.png') 7 0, default;
}

.volume-slider {
    -webkit-appearance: none;
    width: 70px;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    border: 1px solid var(--metal-dark);
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    border-radius: 50%;
    border: 2px solid var(--khaki);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    border-radius: 50%;
    border: 2px solid var(--khaki);
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.volume-value {
    font-size: clamp(8px, 1.4vh, 10px);
    color: #888;
    min-width: 28px;
    text-align: right;
}

/* Toggle Switch */
.toggle-control { gap: 4px; }
.toggle-label { font-size: clamp(7px, 1.3vh, 9px); color: #aaa; white-space: nowrap; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #666;
    border-radius: 8px;
    transition: 0.2s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 12px; width: 12px;
    left: 2px; bottom: 2px;
    background: #aaa;
    border-radius: 50%;
    transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: #4caf50; }
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background: #fff;
}

.pause-btn {
    padding: clamp(5px, 1.2vh, 10px) clamp(10px, 2vw, 20px);
    font-family: 'Oxanium', sans-serif;
    font-size: clamp(10px, 1.8vh, 12px);
    font-weight: bold;
    border-radius: 4px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s ease-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.pause-btn.primary {
    background: linear-gradient(180deg, var(--olive) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: #fff;
    box-shadow: 0 4px 15px rgba(107, 124, 63, 0.4);
}

.pause-btn.primary:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    box-shadow: 0 6px 25px rgba(107, 124, 63, 0.6);
    transform: translateY(-2px);
}

.pause-btn.secondary {
    background: linear-gradient(180deg, #4a4540 0%, #3a3530 100%);
    border: 2px solid transparent;
    color: var(--khaki);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.pause-btn.secondary:hover {
    background: linear-gradient(180deg, #5a5550 0%, #4a4540 100%);
    border-color: var(--khaki);
    transform: translateY(-2px);
}

/* === ASKERİ SANDIK (MILITARY CHEST) === */

.military-chest {
    position: relative;
    width: 200px;
    height: 150px;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease-out;
}

/* Visible state - sandık belirme animasyonu */
.military-chest.visible {
    transform: scale(1);
    opacity: 1;
}

/* Grow state (eski uyumluluk) */
.military-chest.grow {
    transform: scale(1);
    opacity: 1;
}

.military-chest .chest-lid,
.military-chest .chest-base {
    position: absolute;
    width: 100%;
    background:
        repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px),
        linear-gradient(180deg, #4a5d23 0%, #3a4a1a 50%, #2d3a15 100%);
    border: 4px solid #1a2010;
    box-sizing: border-box;
    animation: crate-glow 2.5s infinite ease-in-out;
}

.military-chest .chest-lid {
    height: 45px;
    top: 0;
    border-radius: 4px 4px 0 0;
    border-bottom: 2px solid #1a2010;
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.military-chest .chest-base {
    height: 105px;
    top: 45px;
    border-radius: 0 0 4px 4px;
}

/* Metal bant (kapak üstünde) */
.military-chest .chest-lid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 12px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 50%, #4a4a4a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 2px;
}

/* Kilit dairesi */
.military-chest .chest-lid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, #6b7c3f, #3a4a1a);
    border-radius: 50%;
    border: 3px solid #2a3a15;
    animation: lock-glow 1.5s infinite ease-in-out;
}

/* SUPPLY yazısı — artık .loot-label span ile render ediliyor */
.military-chest .chest-base::before {
    display: none;
}

.military-chest .chest-base .loot-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Oxanium', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: rgba(195, 176, 145, 0.4);
    letter-spacing: 4px;
    white-space: nowrap;
    pointer-events: none;
}

/* Metal plaka (alt) */
.military-chest .chest-base::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 35px;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 3px;
}

/* Perçinler */
.crate-rivet {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #6a6a5a 0%, #4a4a3a 50%, #3a3a2a 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* === SANDIK ANİMASYONLARI === */

/* Shake animasyonu - güçlendirilmiş */
@keyframes shake-animation {
    0%, 100% { transform: scale(1) translateX(0); }
    10% { transform: scale(1) translateX(-8px) rotate(-3deg); }
    20% { transform: scale(1) translateX(8px) rotate(3deg); }
    30% { transform: scale(1) translateX(-8px) rotate(-3deg); }
    40% { transform: scale(1) translateX(8px) rotate(3deg); }
    50% { transform: scale(1) translateX(-6px) rotate(-2deg); }
    60% { transform: scale(1) translateX(6px) rotate(2deg); }
    70% { transform: scale(1) translateX(-4px) rotate(-1deg); }
    80% { transform: scale(1) translateX(4px) rotate(1deg); }
    90% { transform: scale(1) translateX(0); }
}

.military-chest.shake {
    animation: shake-animation 0.1s linear infinite;
}

.military-chest.shake.visible,
.military-chest.shake.grow {
    transform: scale(1);
    opacity: 1;
}

/* Shake sırasında hızlı glow + parlaklık */
.military-chest.shake .chest-lid,
.military-chest.shake .chest-base {
    animation: crate-glow 0.3s infinite ease-in-out, shake-glow 0.1s infinite;
}

/* Shake sırasında parlaklık değişimi */
@keyframes shake-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

/* Crate glow animasyonu */
@keyframes crate-glow {
    0%, 100% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 5px rgba(107, 124, 63, 0.2);
    }
    50% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 15px rgba(107, 124, 63, 0.5), 0 0 25px rgba(195, 176, 145, 0.3);
    }
}

/* Lock glow animasyonu */
@keyframes lock-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(107, 124, 63, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(107, 124, 63, 0.8), 0 0 25px rgba(195, 176, 145, 0.5);
    }
}


/* === LOOT BURST === */

.loot-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,
        rgba(255,255,255,0.9) 0%,
        rgba(195, 176, 145, 0.7) 20%,
        rgba(107, 124, 63, 0.5) 45%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.loot-burst.active {
    animation: loot-burst 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Shake sırasında pulse */
.military-chest.shake .loot-burst {
    opacity: 1;
    animation: burst-pulse 0.3s ease-out infinite;
}

@keyframes loot-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

@keyframes burst-pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* === IŞIK HÜZMELERİ === */

.light-rays {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.15) 10deg,
        transparent 20deg,
        transparent 45deg,
        rgba(255, 215, 0, 0.15) 55deg,
        transparent 65deg,
        transparent 90deg,
        rgba(255, 215, 0, 0.15) 100deg,
        transparent 110deg,
        transparent 135deg,
        rgba(255, 215, 0, 0.15) 145deg,
        transparent 155deg,
        transparent 180deg,
        rgba(255, 215, 0, 0.15) 190deg,
        transparent 200deg,
        transparent 225deg,
        rgba(255, 215, 0, 0.15) 235deg,
        transparent 245deg,
        transparent 270deg,
        rgba(255, 215, 0, 0.15) 280deg,
        transparent 290deg,
        transparent 315deg,
        rgba(255, 215, 0, 0.15) 325deg,
        transparent 335deg,
        transparent 360deg
    );
    opacity: 0;
    pointer-events: none;
}

/* Açılınca ışık hüzmeleri */
.military-chest.open .light-rays {
    animation: light-rays-spin 1.5s ease-out forwards;
}

@keyframes light-rays-spin {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    }
}

/* Lootbox Overlay */
.lootbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1040;
    /* display controlled by JS - starts as none */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lootbox-overlay.show {
    opacity: 1;
}

/* Sandık ortalama - üstten biraz aşağıda */
.lootbox-overlay .military-chest {
    margin-top: -10%;
}

/* === SEVİYE ATLAMA CONTAINER === */

.levelup-container {
    position: relative;
    background:
        var(--metal-scratches),
        var(--panel-bg);
    border: 4px solid transparent;
    border-radius: 3px;
    padding: clamp(10px, 2.5vh, 25px) clamp(15px, 3vw, 35px) clamp(15px, 3vh, 35px) clamp(15px, 3vw, 35px);
    text-align: center;
    max-width: 95%;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.7),
        var(--panel-inset),
        0 0 0 1px rgba(255,255,255,0.05);
    overflow: visible;
    animation: popup-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Noise overlay */
.levelup-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--noise-texture);
    opacity: 0.04;
    pointer-events: none;
    border-radius: 2px;
}

@keyframes popup-entrance {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateX(-15deg);
    }
    50% {
        transform: scale(1.05) rotateX(3deg);
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.levelup-container h2 {
    color: var(--khaki);
    font-size: 22px;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-bottom: 2px solid var(--olive-dark);
    padding-bottom: 10px;
    animation: text-glow 2s ease-in-out infinite;
}

@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 5px rgba(195, 176, 145, 0.3); }
    50% { text-shadow: 0 0 20px rgba(195, 176, 145, 0.6), 0 0 30px rgba(255, 215, 0, 0.3); }
}

.levelup-btn {
    padding: 14px 35px;
    font-family: 'Oxanium', sans-serif;
    font-size: 13px;
    font-weight: bold;
    border-radius: 3px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(180deg, var(--olive) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: #fff;
    box-shadow: 0 4px 15px rgba(107, 124, 63, 0.4);
    margin-top: 20px;
}

.levelup-btn:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    box-shadow: 0 6px 25px rgba(107, 124, 63, 0.6);
    transform: translateY(-2px);
}

/* === GAME OVER SCREEN EK STİLLER === */

.game-over-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gameover-extra-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.gameover-btn-wrapper {
    position: relative;
    display: inline-flex;
}

.gameover-medal-anim {
    right: -10px;
    top: -10px;
}

.gameover-btn.meta-btn {
    background: linear-gradient(180deg, #4a3a20 0%, #3a2a15 100%);
    border: 1px solid #c9a84c;
    color: #c9a84c;
    font-size: 11px;
    padding: 8px 16px;
}

.gameover-btn.meta-btn:hover {
    background: linear-gradient(180deg, #5a4a2a 0%, #4a3a20 100%);
    border-color: #e0c060;
    color: #e0c060;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(201, 168, 76, 0.3);
}

.gameover-btn.badge-btn {
    background: linear-gradient(180deg, #2a3a2a 0%, #1a2a1a 100%);
    border: 1px solid var(--olive-light);
    color: var(--olive-light);
    font-size: 11px;
    padding: 8px 16px;
}

.gameover-btn.badge-btn:hover {
    background: linear-gradient(180deg, #3a4a3a 0%, #2a3a2a 100%);
    border-color: #a0b870;
    color: #a0b870;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(107, 124, 63, 0.3);
}

.gameover-btn.badge-btn.has-unclaimed {
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
    animation: btn-unclaimed-glow 3s ease-in-out infinite;
}

/* === NG+ BÖLÜMÜ === */
.ng-plus-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 215, 0, 0.25);
}

.gameover-btn.ng-plus-btn {
    min-width: 190px;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 12px 28px;
}

.ng-plus-desc {
    margin: 0;
    font-family: 'Oxanium', sans-serif;
    font-size: 10px;
    color: rgba(255, 215, 0, 0.55);
    text-align: center;
    letter-spacing: 0.4px;
}

.gameover-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}

.final-score-display {
    font-size: 16px;
    color: var(--khaki);
    margin: 4px 0 8px 0;
    letter-spacing: 2px;
}

/* Madalya ve TL yan yana container */
.rewards-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.medals-earned-display {
    font-size: 14px;
    color: #ffd700;
    margin: 0;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.15));
    border: 1px solid #ffd700;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
    animation: medal-glow 2s ease-in-out infinite;
    flex: 1;
    min-width: 120px;
    max-width: 180px;
}

.medals-earned-display .medals-icon {
    font-size: 24px;
    animation: medal-spin 3s linear infinite;
}

@keyframes medal-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }
}

@keyframes medal-spin {
    0%, 90% {
        transform: rotate(0deg);
    }
    95% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.money-earned-display {
    font-size: 14px;
    color: #4caf50;
    margin: 0;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.15));
    border: 1px solid #4caf50;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: bold;
    flex: 1;
    min-width: 120px;
    max-width: 180px;
}

.money-earned-display .money-icon {
    font-size: 22px;
    font-weight: 900;
    color: #66bb6a;
}

.high-scores-list,
.weapon-damage-list {
    font-size: 11px;
    color: #ccc;
    line-height: 1.6;
}

.weapon-damage-list ol {
    margin: 0;
    padding-left: 18px;
}

.weapon-damage-list li {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.weapon-damage-list li span:last-child {
    color: var(--khaki);
    font-weight: bold;
}

/* === LOOTBOX AKSİYON BUTONLARI (Ban/Kilitle) === */

/* Kart wrapper - kart + aksiyon butonları */
.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Wrapper içindeki kart eşit yükseklikte olsun */
.card-wrapper .upgrade-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Aksiyon butonları container */
.card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    min-height: 52px;
    width: 100%;
}

/* Genel aksiyon buton stili */
.card-action-btn {
    background: rgba(40, 40, 50, 0.9);
    border: 1px solid transparent;
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    font-family: 'Oxanium', sans-serif;
    letter-spacing: 0.5px;
}

/* Ban butonu */
.card-action-btn.ban-btn {
    background: rgba(120, 25, 25, 0.9);
    border-color: #cc4444;
    color: #ffaaaa;
}

.card-action-btn.ban-btn:hover {
    background: #a02020;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}

/* Kilitle butonu */
.card-action-btn.lock-btn {
    background: rgba(25, 70, 120, 0.9);
    border-color: #44aaff;
    color: #aaddff;
}

.card-action-btn.lock-btn:hover {
    background: #1860a0;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(68, 170, 255, 0.5);
}

.card-action-btn .ban-count,
.card-action-btn .lock-count {
    opacity: 0.7;
    font-size: 9px;
}

/* Aksiyon butonu durumları */

/* Meta yükseltme alınmamış - kilitli */
.card-action-btn.locked-action {
    opacity: 0.4;
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed;
    filter: grayscale(0.8);
}

.card-action-btn.locked-action:hover {
    transform: none;
    box-shadow: none;
    background: rgba(60, 60, 70, 0.9);
}

/* Hak kalmamış */
.card-action-btn.exhausted-action {
    opacity: 0.5;
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed;
}

.card-action-btn.exhausted-action:hover {
    transform: none;
    box-shadow: none;
}

/* Kullanılmış (bu kartta) */
.card-action-btn.used-action {
    opacity: 0.3;
    pointer-events: none;
}

/* Banlanan kart stili */
.upgrade-button.banned {
    opacity: 0.35 !important;
    border-color: #ff4444 !important;
    pointer-events: none;
}

.upgrade-button.banned::after {
    content: '🚫';
    position: absolute;
    font-size: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}

/* Kilitleme fazında seçilebilir kartlar */
.upgrade-button.lockable {
    border-color: #44aaff !important;
    animation: lock-pulse 1.2s ease-in-out infinite;
}

@keyframes lock-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(68, 170, 255, 0.3); }
    50% { box-shadow: 0 0 15px rgba(68, 170, 255, 0.6); }
}

/* Kilitlenmiş kart stili */
.upgrade-button.locked-card {
    border-color: #44aaff !important;
    box-shadow: 0 0 12px rgba(68, 170, 255, 0.5) !important;
    opacity: 1 !important;
}

.upgrade-button.locked-card::after {
    content: '🔒';
    position: absolute;
    font-size: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}

/* Seçilen kart stili */
.upgrade-button.selected-card {
    border-color: #22cc44 !important;
    background: linear-gradient(180deg, #1a3a1a 0%, #0d260d 100%) !important;
    box-shadow: 0 0 20px rgba(34, 204, 68, 0.5), inset 0 0 15px rgba(34, 204, 68, 0.15) !important;
    animation: selected-card-pulse 1.5s ease-in-out infinite !important;
    pointer-events: none;
    position: relative;
}

@keyframes selected-card-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(34, 204, 68, 0.4), inset 0 0 10px rgba(34, 204, 68, 0.1); }
    50% { box-shadow: 0 0 25px rgba(34, 204, 68, 0.7), inset 0 0 20px rgba(34, 204, 68, 0.2); }
}

/* Seçilen kartın üzerine büyük onay işareti */
.selection-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 72px;
    z-index: 25;
    pointer-events: none;
    animation: checkmark-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 0 12px rgba(34, 204, 68, 0.9)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    color: #22cc44;
    line-height: 1;
}

@keyframes checkmark-pop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

/* Seçilen kartın içeriğini hafif soldur */
.upgrade-button.selected-card .upgrade-icon,
.upgrade-button.selected-card .upgrade-text {
    opacity: 0.4;
    transition: opacity 0.3s;
}

/* Seçim sayacı — levelUpInfo içindeki büyük rakam */
.selection-counter {
    display: inline-block;
    font-size: 56px;
    font-weight: 900;
    margin: 8px 0;
    line-height: 1;
    transition: transform 0.1s;
}

.selection-counter.counter-pop {
    animation: counter-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes counter-pop {
    0% { transform: scale(2.5); opacity: 0; text-shadow: 0 0 40px currentColor; }
    40% { transform: scale(0.85); opacity: 1; }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); text-shadow: 0 0 10px currentColor; }
}

/* === SEVİYE ATLAMA SCREEN === */

.level-up-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Levelup ekranı - aktif silahlar paneli */
#levelup-current-weapons {
    margin-top: 18px;
    text-align: center;
}

.levelup-weapons-label {
    font-size: 10px;
    color: var(--sand, #a89070);
    letter-spacing: 2px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.levelup-weapons-grid {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.levelup-weapons-grid .weapon-slot-box {
    width: 50px;
    height: 50px;
}

.levelup-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.levelup-btn.secondary {
    background: linear-gradient(180deg, #4a4540 0%, #3a3530 100%);
    border: 2px solid transparent;
    color: var(--khaki);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.levelup-btn.secondary:hover {
    background: linear-gradient(180deg, #5a5550 0%, #4a4540 100%);
    border-color: var(--khaki);
}

/* ================================================================
   UI_TEST'TEN ALINAN GELİŞMİŞ GERİ BİLDİRİM SİSTEMLERİ
   ================================================================ */

/* === JUICE RENK DEĞİŞKENLERİ === */
:root {
    --juice-gold: #ffd700;
    --juice-orange: #ff8c00;
    --juice-green: #00ff88;
    --juice-blue: #00aaff;
    --juice-purple: #aa55ff;
}

/* === GLOBAL JUICE ANİMASYONLARI === */

/* Shine Sweep - Parlama geçişi */
@keyframes shine-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Elastic Bounce */
@keyframes elastic-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(0.9); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Pop In */
@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

/* Juice Shake */
@keyframes juice-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Pulse Glow */
@keyframes pulse-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    50% { filter: brightness(1.2) drop-shadow(0 0 15px var(--juice-gold)); }
}

/* Heartbeat */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

/* Juice Class'ları */
.juice-pop {
    animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.juice-shake {
    animation: juice-shake 0.4s ease-out;
}

.juice-pulse {
    animation: pulse-glow 1.5s ease-in-out infinite;
}

/* === HASAR SAYILARI (DAMAGE NUMBERS) === */
/* === KILL FEED === */
/* Kill feed kaldırıldı - combo display sağ üst köşeye taşındı */
#kill-feed {
    display: none !important;
}

#damage-numbers-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.damage-number {
    position: absolute;
    font-family: 'Oxanium', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255,68,68,0.5);
    animation: damage-pop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    z-index: 1000;
}

.laser-damage-display {
    position: absolute;
    font-family: 'Oxanium', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffaacc;
    text-shadow: 0 0 8px rgba(255,170,200,0.6), 0 0 20px rgba(255,100,150,0.3);
    pointer-events: none;
    z-index: 1001;
    transform: translateX(-50%);
    transition: font-size 0.15s ease-out, color 0.2s ease-out;
}

.damage-number.crit {
    font-size: 28px;
    color: var(--juice-gold);
    text-shadow: 0 0 15px var(--juice-gold), 0 0 30px var(--juice-orange);
    animation: crit-damage-pop 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.damage-number.heal {
    color: var(--juice-green);
    text-shadow: 0 0 10px rgba(0,255,100,0.5);
}

.damage-number.xp {
    font-size: 22px;
    font-weight: bold;
    /* Renk orb.color'dan gelecek (custom color support) */
    animation: xp-float-pop 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes xp-float-pop {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.3);
    }
    20% {
        transform: translateY(-20px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.9);
    }
}

.damage-number.shield {
    color: var(--juice-blue);
    text-shadow: 0 0 10px rgba(0,170,255,0.5);
}

.damage-number.player {
    font-size: 24px;
    color: #ff3333;
    text-shadow: 0 0 15px rgba(255,50,50,0.8);
    animation: player-damage-pop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes player-damage-pop {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.5);
    }
    20% {
        transform: translateY(-15px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }
}

.damage-number.money {
    font-size: 26px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255,215,0,0.9), 0 0 24px rgba(255,170,0,0.6), 0 2px 4px rgba(0,0,0,0.8);
    animation: money-pop 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes money-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.3) rotate(-5deg);
        filter: brightness(3);
    }
    10% {
        opacity: 1;
        transform: translateY(-20px) scale(1.5) rotate(3deg);
        filter: brightness(2);
    }
    20% {
        transform: translateY(-28px) scale(1.1) rotate(-1deg);
        filter: brightness(1.2);
    }
    35% {
        transform: translateY(-35px) scale(1.15) rotate(0deg);
        filter: brightness(1.5);
    }
    50% {
        transform: translateY(-42px) scale(1.05);
        filter: brightness(1);
    }
    70% {
        opacity: 1;
        transform: translateY(-50px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-65px) scale(0.85);
    }
}

.damage-number.reload {
    font-size: 20px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 0 0 14px rgba(255,200,0,0.8), 0 0 28px rgba(255,150,0,0.4);
    animation: reload-pulse 2s ease-out forwards;
}

@keyframes reload-pulse {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0.5);
        filter: brightness(2);
    }
    8% {
        opacity: 1;
        transform: translateY(-15px) scale(1.3);
        filter: brightness(1.5);
    }
    16% {
        transform: translateY(-20px) scale(1);
        filter: brightness(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-22px) scale(1.08);
        text-shadow: 0 0 20px rgba(255,200,0,1), 0 0 35px rgba(255,150,0,0.6);
    }
    45% {
        transform: translateY(-24px) scale(0.98);
        text-shadow: 0 0 10px rgba(255,200,0,0.6);
    }
    60% {
        opacity: 1;
        transform: translateY(-26px) scale(1.05);
        text-shadow: 0 0 18px rgba(255,200,0,0.9), 0 0 30px rgba(255,150,0,0.5);
    }
    75% {
        transform: translateY(-28px) scale(0.98);
    }
    100% {
        opacity: 0;
        transform: translateY(-35px) scale(0.9);
    }
}

.damage-number.ready {
    font-size: 24px;
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0,255,136,0.9);
    animation: ready-pop 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ready-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translateY(-25px) scale(1.4);
    }
    20% {
        transform: translateY(-30px) scale(1.1);
    }
    70% {
        opacity: 1;
        transform: translateY(-35px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
}

.damage-number.streak {
    font-size: 32px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 12px rgba(255,68,68,0.9), 0 0 24px rgba(255,0,0,0.6), 0 2px 4px rgba(0,0,0,0.8);
    animation: streak-pop 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes streak-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.3);
    }
    8% {
        opacity: 1;
        transform: translateY(-30px) scale(1.6);
    }
    16% {
        transform: translateY(-35px) scale(1.1);
    }
    60% {
        opacity: 1;
        transform: translateY(-40px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

.damage-number.dodge {
    font-size: 18px;
    font-weight: bold;
    color: #00eeff;
    text-shadow: 0 0 8px rgba(0,238,255,0.8), 0 0 16px rgba(0,150,255,0.5);
    animation: dodge-pop 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dodge-pop {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    15% { opacity: 1; transform: translateY(-15px) scale(1.3); }
    50% { opacity: 1; transform: translateY(-25px) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

@keyframes damage-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translateY(-15px) scale(1.3);
    }
    30% {
        transform: translateY(-20px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

@keyframes crit-damage-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.3) rotate(-10deg);
    }
    15% {
        opacity: 1;
        transform: translateY(-20px) scale(1.5) rotate(5deg);
    }
    25% {
        transform: translateY(-25px) scale(1.2) rotate(-3deg);
    }
    40% {
        transform: translateY(-35px) scale(1.1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.7);
    }
}
/* === XP BAR GELİŞTİRMELERİ === */

/* XP Bar Shimmer Sweep */
#xp-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine-sweep 2s ease-in-out infinite;
    animation-delay: 0.5s;
    z-index: 2;
}

/* XP Bar Pulse on Gain */
#xp-bar.pulse {
    animation: xp-gain-pulse 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes xp-gain-pulse {
    0% { filter: brightness(1); transform: scaleX(1); }
    30% { filter: brightness(1.8); transform: scaleX(1.02); }
    50% { filter: brightness(1.5) drop-shadow(0 0 10px rgba(90, 138, 186, 0.6)); }
    100% { filter: brightness(1); transform: scaleX(1); }
}

/* XP Bar Almost Full Glow */
#xp-bar.almost-full {
    animation: xp-almost-full 1s ease-in-out infinite;
}

@keyframes xp-almost-full {
    0%, 100% {
        filter: brightness(1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
    }
    50% {
        filter: brightness(1.3);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), 0 0 15px rgba(90, 138, 186, 0.6);
    }
}

/* === HEALTH BAR GELİŞTİRMELERİ === */

/* Health Bar Hit Flash */
#health-bar.hit-flash {
    animation: health-bar-hit 0.3s ease-out;
}

@keyframes health-bar-hit {
    0% { filter: brightness(1); }
    50% { filter: brightness(2) saturate(1.5); }
    100% { filter: brightness(1); }
}

/* Health Trail Damage Pulse */
#health-bar-trail.damage-pulse {
    animation: health-trail-pulse 0.4s ease-out;
}

@keyframes health-trail-pulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

/* Health Container Big Hit Shake */
#health-bar-container.big-hit {
    animation: big-hit-shake 0.3s ease-out;
}

@keyframes big-hit-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* === WEAPON SLOT GELİŞTİRMELERİ KALDIRİLDI (Alt bar weapon-slot-box kullanılıyor) === */

/* === LOW HEALTH HEARTBEAT === */
#health-bar-container.low-health {
    animation: heartbeat 1s ease-in-out infinite;
}

#health-bar-container.low-health #health-bar {
    animation: health-bar-critical 0.8s ease-in-out infinite;
}

/* === DAMAGE OVERLAY HIT PULSE === */
#damageOverlay.pulse #damage-vignette {
    animation: damage-overlay-hit 0.3s ease-out !important;
}

@keyframes damage-overlay-hit {
    0% { filter: brightness(2); }
    50% { filter: brightness(1.4); }
    100% { filter: brightness(1); }
}

/* === META UPGRADES MODAL === */
.meta-upgrades-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.meta-upgrades-container {
    width: 92%;
    max-width: 1200px;
    height: 90%;
    background: linear-gradient(180deg, rgba(30, 28, 18, 0.97), rgba(18, 16, 10, 0.97));
    border: 3px solid #c9a825;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(201, 168, 37, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.meta-upgrades-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid #c9a825;
}

.meta-upgrades-header h2 {
    color: #ffd700;
    font-size: clamp(18px, 4vh, 28px);
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    letter-spacing: clamp(1px, 0.3vw, 2px);
}

.medals-display {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1vw, 10px);
    font-size: clamp(16px, 3.5vh, 22px);
    color: #ffd700;
    background: rgba(201, 168, 37, 0.1);
    padding: clamp(5px, 1vh, 8px) clamp(10px, 2vw, 18px);
    border-radius: 8px;
    border: 2px solid #c9a825;
}

.medal-icon {
    font-size: clamp(20px, 4vh, 28px);
    animation: medal-pulse 2s ease-in-out infinite;
}

@keyframes medal-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.close-meta-btn {
    background: rgba(139, 32, 32, 0.2);
    border: 2px solid rgba(139, 32, 32, 0.5);
    color: #aa6666;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.3s ease;
}

.close-meta-btn:hover {
    background: rgba(139, 32, 32, 0.4);
    border-color: #8b2020;
    color: #ff8888;
    transform: scale(1.1);
}

.meta-upgrades-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Kategori kutuları */
.meta-category {
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(201, 168, 37, 0.4);
    border-radius: 10px;
    padding: 18px;
}

.meta-category-header {
    font-size: clamp(16px, 3vh, 22px);
    color: #c9a825;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(201, 168, 37, 0.3);
    border-left: 4px solid #c9a825;
    padding-left: 12px;
    letter-spacing: 1px;
}

.meta-upgrades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 15px;
}

/* Upgrade kartları */
.meta-upgrade-card {
    background: rgba(30, 28, 18, 0.6);
    border: 2px solid rgba(107, 124, 63, 0.3);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
}

.meta-upgrade-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
}

.meta-upgrade-card.locked {
    opacity: 0.5;
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed;
}

.meta-upgrade-card.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: #666;
}

.meta-upgrade-card.max-level {
    border-color: #8cc63f;
    background: rgba(40, 50, 25, 0.6);
}

.meta-upgrade-card.active-weapon {
    border-color: #ffcc00;
    background: linear-gradient(135deg, rgba(60, 50, 20, 0.8), rgba(70, 55, 15, 0.8));
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.25);
}

.meta-upgrade-title {
    font-size: 18px;
    color: #ffd700;
    margin-bottom: 8px;
    font-weight: bold;
}

.meta-upgrade-level {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 10px;
}

.meta-upgrade-description {
    font-size: 13px;
    color: #ddd;
    line-height: 1.4;
    margin-bottom: 12px;
    min-height: 60px;
    white-space: pre-line;
}

.meta-stat-current {
    color: #8cc63f;
    font-weight: 700;
    font-size: 12px;
}

.meta-stat-next {
    color: #e0c060;
    font-weight: 700;
    font-size: 12px;
}

.meta-stat-max {
    color: #00ff00;
    font-weight: 700;
    font-size: 12px;
}

.meta-upgrade-progress {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.meta-upgrade-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #8a7a3f, #c9a825);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.meta-upgrade-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.meta-upgrade-cost {
    font-size: 16px;
    color: #ffd700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-upgrade-buy-btn {
    background: linear-gradient(135deg, #8a7a3f, #6a5a2f);
    border: 2px solid #c9a825;
    color: #ffd700;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.meta-upgrade-buy-btn:hover {
    background: linear-gradient(135deg, #a89a4f, #8a7a3f);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(201, 168, 37, 0.4);
}

.meta-upgrade-buy-btn:disabled {
    background: #444;
    border-color: #666;
    color: #888;
    cursor: url('Asset/image/cursor-32.png') 7 0, not-allowed;
    transform: none;
}

.meta-upgrade-buy-btn.max-level {
    background: #00aa00;
    border-color: #00ff00;
}

/* Silah ikonu başlıkta */
.meta-weapon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 4px;
}

.meta-weapon-emoji {
    font-size: 20px;
    vertical-align: middle;
}

/* Aktif silah toggle butonu */
.starting-weapon-toggle-btn {
    background: rgba(80, 80, 80, 0.6);
    border: 2px solid #666;
    color: #999;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-left: auto;
}

.starting-weapon-toggle-btn:hover {
    background: rgba(100, 100, 100, 0.8);
    border-color: #aaa;
    color: #ddd;
}

.starting-weapon-toggle-btn.active {
    background: linear-gradient(135deg, #cc9900, #aa7700);
    border-color: #ffcc00;
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.4);
    text-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

.starting-weapon-toggle-btn.active:hover {
    background: linear-gradient(135deg, #ddaa00, #bb8800);
    box-shadow: 0 0 18px rgba(255, 204, 0, 0.6);
}

.prereq-warning {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 100, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

/* Scrollbar styling */
.meta-upgrades-content::-webkit-scrollbar {
    width: 12px;
}

.meta-upgrades-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.meta-upgrades-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4a9eff, #ffd700);
    border-radius: 6px;
}

.meta-upgrades-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6ab9ff, #ffe44a);
}

/* ================================================================
   BADGE (ROZET) SİSTEMİ
   ================================================================ */

/* Badge Overlay */
.badge-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}

.badge-overlay.show {
    display: flex;
    animation: badge-fade-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-fade-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Badge Modal */
.badge-modal {
    background: linear-gradient(180deg, #2a2a1a 0%, #1a1a10 100%);
    border: 3px solid #c9a825;
    border-radius: 12px;
    padding: 30px 40px;
    text-align: center;
    max-width: 420px;
    box-shadow:
        0 0 30px rgba(201, 168, 37, 0.4),
        0 0 60px rgba(201, 168, 37, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Badge Shine Effect */
.badge-modal::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 215, 0, 0.1),
        transparent,
        rgba(255, 215, 0, 0.1),
        transparent
    );
    animation: badge-rotate 4s linear infinite;
    pointer-events: none;
}

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

/* Badge Header */
.badge-header {
    margin-bottom: 20px;
}

.badge-ribbon {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a10;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); }
}

/* Badge Content */
.badge-content {
    position: relative;
    z-index: 1;
}

.badge-icon {
    display: block;
    font-size: 64px;
    margin: 20px 0;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    animation: badge-icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-icon-bounce {
    0% { transform: scale(0) rotate(-20deg); }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.badge-name {
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    margin: 15px 0 10px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    letter-spacing: 2px;
}

.badge-category {
    display: inline-block;
    background: rgba(74, 93, 35, 0.6);
    color: #c3b091;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 12px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.badge-desc {
    color: #d4c4a8;
    font-size: 16px;
    margin: 15px 0;
    line-height: 1.5;
}

/* Badge Difficulty */
.badge-difficulty {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.badge-difficulty.kolay {
    background: linear-gradient(135deg, #4a7c23, #6b8e23);
    color: #e8f5e9;
    border: 1px solid #6b8e23;
}

.badge-difficulty.orta {
    background: linear-gradient(135deg, #1565c0, #42a5f5);
    color: #e3f2fd;
    border: 1px solid #42a5f5;
}

.badge-difficulty.zor {
    background: linear-gradient(135deg, #b8600f, #ff8c00);
    color: #fff3e0;
    border: 1px solid #ff8c00;
}

.badge-difficulty.epik {
    background: linear-gradient(135deg, #7b1fa2, #ba68c8);
    color: #f3e5f5;
    border: 1px solid #ba68c8;
    animation: epik-glow 1.5s ease-in-out infinite;
}

@keyframes epik-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(186, 104, 200, 0.5); }
    50% { box-shadow: 0 0 20px rgba(186, 104, 200, 0.8), 0 0 30px rgba(186, 104, 200, 0.4); }
}

.badge-difficulty.efsanevi {
    background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);
    color: #fff8e1;
    border: 1px solid #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
    animation: efsanevi-glow 1.5s ease-in-out infinite;
}

@keyframes efsanevi-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 24px rgba(255, 215, 0, 1), 0 0 36px rgba(255, 215, 0, 0.5); }
}

/* Badge Reward (Madalya Bonusu) */
.badge-reward {
    display: inline-block;
    background: linear-gradient(135deg, #1a5a2a, #2d8a45);
    color: #ffd700;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    margin-top: 15px;
    border: 2px solid #3fa855;
    box-shadow: 0 0 15px rgba(61, 168, 85, 0.5);
    letter-spacing: 1px;
    animation: badge-reward-shine 2s ease-in-out infinite;
}

@keyframes badge-reward-shine {
    0%, 100% {
        box-shadow: 0 0 15px rgba(61, 168, 85, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(61, 168, 85, 0.8), 0 0 40px rgba(255, 215, 0, 0.3);
        transform: scale(1.05);
    }
}

/* Badge OK Button */
.badge-ok-btn {
    margin-top: 25px;
    padding: 12px 40px;
    background: linear-gradient(180deg, #4a5d23 0%, #3a4a1a 100%);
    border: 2px solid #6b7c3f;
    border-radius: 6px;
    color: #c3b091;
    font-family: 'Oxanium', sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.badge-ok-btn:hover {
    background: linear-gradient(180deg, #5a6d33 0%, #4a5a2a 100%);
    border-color: #8b9c5f;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(107, 124, 63, 0.5);
}

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

/* Badge List (Ana Menü için) */
.badges-panel {
    background: var(--panel-bg);
    border: 2px solid var(--panel-border);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.badges-panel h3 {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 2px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
}

.badge-slot {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
}

.badge-slot.unlocked {
    border-color: #c9a825;
    background: rgba(201, 168, 37, 0.1);
}

.badge-slot.unlocked:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(201, 168, 37, 0.4);
}

.badge-slot.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.badge-slot.locked::after {
    content: '🔒';
    font-size: 16px;
    position: absolute;
    bottom: -5px;
    right: -5px;
}

/* Badge Count Display */
.badge-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    font-size: 14px;
    color: #c3b091;
}

.badge-count-number {
    color: #ffd700;
    font-weight: bold;
    font-size: 16px;
}

/* Badge Tooltip */
.badge-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 26, 16, 0.95);
    border: 2px solid #c9a825;
    border-radius: 6px;
    padding: 10px 15px;
    min-width: 180px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.badge-slot:hover .badge-tooltip {
    opacity: 1;
}

.badge-tooltip-name {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.badge-tooltip-desc {
    color: #d4c4a8;
    font-size: 12px;
    line-height: 1.4;
}

/* --- BADGE KOLEKSİYONU MODAL --- */
.badge-collection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 2000;
}

.badge-collection-container {
    width: 92%;
    max-width: 1200px;
    height: 90%;
    background: linear-gradient(180deg, rgba(30, 28, 18, 0.97), rgba(18, 16, 10, 0.97));
    border: 3px solid #c9a825;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(201, 168, 37, 0.3);
}

.badge-collection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 2px solid #c9a825;
    background: rgba(0, 0, 0, 0.3);
}

.badge-collection-header h2 {
    color: #ffd700;
    font-size: clamp(18px, 4vh, 28px);
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    letter-spacing: clamp(1px, 0.3vw, 2px);
}

.badge-collection-count {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1vw, 10px);
    font-size: clamp(16px, 3.5vh, 22px);
    color: #ffd700;
    padding: clamp(5px, 1vh, 8px) clamp(10px, 2vw, 18px);
    background: rgba(201, 168, 37, 0.1);
    border: 2px solid #c9a825;
    border-radius: 8px;
}

.badge-collection-icon {
    font-size: clamp(20px, 4vh, 28px);
}

.badge-collection-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.badge-collection-content::-webkit-scrollbar {
    width: 10px;
}

.badge-collection-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.badge-collection-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #c9a825, #8a7518);
    border-radius: 5px;
}

/* Kategori bölümleri */
.badge-cat-section {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(201, 168, 37, 0.3);
    border-radius: 10px;
    padding: 18px;
}

.badge-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201, 168, 37, 0.2);
}

.badge-cat-title {
    font-size: 20px;
    color: #c9a825;
    font-weight: bold;
    letter-spacing: 1px;
}

.badge-cat-progress {
    font-size: 14px;
    color: #8a7e5a;
}

.badge-cat-progress .done {
    color: #ffd700;
    font-weight: bold;
}

/* Badge kartları grid */
.badge-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* Tek badge kartı */
.badge-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 2px solid transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, rgba(40, 38, 28, 0.8), rgba(30, 28, 18, 0.8));
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.badge-card.unlocked {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(60, 52, 15, 0.95), rgba(45, 38, 10, 0.95));
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

.badge-card.unlocked:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.35);
    border-color: #ffe44d;
}

.badge-card.revealed {
    opacity: 0.7;
    border-color: #555;
}

.badge-card.revealed:hover {
    opacity: 0.85;
    border-color: #777;
}

.badge-card.locked {
    opacity: 0.5;
    filter: grayscale(0.6);
}

/* Badge ikonu */
.badge-card-icon {
    font-size: 36px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(201, 168, 37, 0.3);
}

.badge-card.revealed .badge-card-icon {
    border-color: rgba(100, 100, 100, 0.3);
}

.badge-card.locked .badge-card-icon {
    font-size: 20px;
}

/* Badge bilgileri */
.badge-card-info {
    flex: 1;
    min-width: 0;
}

.badge-card-name {
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-card.revealed .badge-card-name {
    color: #ccc;
}

.badge-card.locked .badge-card-name {
    color: #888;
}

.badge-card-desc {
    font-size: 12px;
    color: #aaa;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}

/* Zorluk etiketi */
.badge-card-diff {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    flex-shrink: 0;
    text-transform: uppercase;
}

.badge-card-diff.kolay {
    background: rgba(74, 124, 35, 0.6);
    color: #a5d66f;
    border: 1px solid rgba(107, 142, 35, 0.5);
}

.badge-card-diff.orta {
    background: rgba(21, 101, 192, 0.5);
    color: #7ec8f5;
    border: 1px solid rgba(66, 165, 245, 0.5);
}

.badge-card-diff.zor {
    background: rgba(184, 96, 15, 0.5);
    color: #ffb74d;
    border: 1px solid rgba(255, 140, 0, 0.5);
}

.badge-card-diff.epik {
    background: rgba(123, 31, 162, 0.5);
    color: #ce93d8;
    border: 1px solid rgba(186, 104, 200, 0.5);
}

.badge-card-diff.efsanevi {
    background: rgba(184, 134, 11, 0.5);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

/* Kilit ikonu overlay - kilitli ve keşfedilmiş */
.badge-card.locked .badge-card-icon::after,
.badge-card.revealed .badge-card-icon::after {
    content: '🔒';
    position: absolute;
    font-size: 14px;
}

/* Açılmış badge check */
.badge-card.unlocked::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 14px;
    color: #00cc44;
    font-weight: bold;
}

/* Toplanmamış madalya - açılmış ama madalyası toplanmamış rozet */
.badge-card.unclaimed {
    border-color: #00e676;
    background: linear-gradient(135deg, rgba(10, 70, 30, 0.95), rgba(8, 50, 20, 0.95));
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.3), inset 0 0 20px rgba(0, 230, 118, 0.05);
    animation: unclaimed-pulse 2s ease-in-out infinite;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
}

.badge-card.unclaimed:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 20px rgba(0, 230, 118, 0.5), 0 0 25px rgba(0, 200, 100, 0.3);
    border-color: #69f0ae;
}

@keyframes unclaimed-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(0, 230, 118, 0.2), inset 0 0 15px rgba(0, 230, 118, 0.03);
    }
    50% {
        box-shadow: 0 0 18px rgba(0, 230, 118, 0.45), inset 0 0 25px rgba(0, 230, 118, 0.08);
    }
}

/* Unclaimed badge'de madalya toplama göstergesi */
.badge-claim-indicator {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #00e676;
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.2), rgba(0, 200, 100, 0.15));
    border: 1px solid rgba(0, 230, 118, 0.4);
    border-radius: 4px;
    animation: claim-indicator-glow 1.5s ease-in-out infinite;
}

@keyframes claim-indicator-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(0, 230, 118, 0.4); }
    50% { text-shadow: 0 0 10px rgba(0, 230, 118, 0.8); }
}

/* Toplama flash animasyonu */
.badge-claim-indicator.claimed-flash {
    animation: claimed-pop 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.5);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 100, 0.15));
}

@keyframes claimed-pop {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.5); opacity: 1; filter: brightness(2); }
    100% { transform: scale(0.5) translateY(-15px); opacity: 0; }
}

/* Just-claimed geçiş animasyonu */
.badge-card.just-claimed {
    animation: just-claimed-flash 0.6s ease-out;
}

@keyframes just-claimed-flash {
    0% { filter: brightness(2); transform: scale(1.05); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* Rozet ilerleme barı */
.badge-progress-wrap {
    margin-top: 5px;
}

.badge-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(100, 100, 100, 0.3);
}

.badge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a6b2a, #6b8e3a);
    border-radius: 3px;
    transition: width 0.3s ease;
    min-width: 0;
}

.badge-progress-text {
    display: block;
    font-size: 10px;
    color: #8a8a6a;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* Unclaimed badge sayaç - header'daki bildirim */
.unclaimed-badge-count {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    animation: unclaimed-pulse 2s ease-in-out infinite;
}

/* Ana menü rozet butonundaki madalya animasyonu */
.badge-medal-anim {
    position: absolute;
    right: -8px;
    top: -12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(30, 20, 0, 0.85);
    border: 1px solid #ffd700;
    border-radius: 12px;
    padding: 2px 8px;
    z-index: 1;
    pointer-events: none;
}

.badge-medal-anim .medal-icon-bounce {
    display: inline-block;
    font-size: 18px;
    animation: medal-float 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

@keyframes medal-float {
    0%, 100% {
        transform: translateY(0) rotate(-5deg) scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    }
    25% {
        transform: translateY(-4px) rotate(5deg) scale(1.15);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1));
    }
    50% {
        transform: translateY(-1px) rotate(-3deg) scale(1.05);
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
    }
    75% {
        transform: translateY(-5px) rotate(4deg) scale(1.2);
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1));
    }
}

.badge-medal-anim .medal-count {
    font-size: 13px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    animation: medal-count-pulse 2s ease-in-out infinite;
}

@keyframes medal-count-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 215, 0, 0.9); }
}

/* Butonun kendisine de hafif glow */
.menu-secondary-row .badge-btn.has-unclaimed {
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
    animation: btn-unclaimed-glow 3s ease-in-out infinite;
}

@keyframes btn-unclaimed-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.15); }
    50% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.35); }
}

/* Rozet modal'daki toplama ipucu */
.badge-reward.unclaimed-hint {
    color: #ffd700;
    font-size: 13px;
    animation: claim-indicator-glow 1.5s ease-in-out infinite;
}

/* === COMBO DISPLAY === */
/* ============================================
   COMBO DISPLAY - Sağ Üst Köşe, Diagonal Juice
   ============================================ */
.combo-display {
    position: fixed;
    top: clamp(32px, 7vh, 55px);
    right: 10px;
    transform: rotate(-12deg) scale(1);
    transform-origin: top right;
    font-family: 'Oxanium', sans-serif;
    z-index: 1001;
    pointer-events: none;
    padding: clamp(4px, 1vh, 8px) clamp(14px, 2vw, 28px) clamp(6px, 1.2vh, 12px) clamp(12px, 1.8vw, 22px);
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.12) 0%, rgba(255, 120, 0, 0.2) 100%);
    border-left: 4px solid #ffd700;
    border-bottom: 2px solid rgba(255, 200, 0, 0.2);
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    text-align: center;
    min-width: 110px;
    backdrop-filter: blur(4px);
}

.combo-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 200, 0, 0.25), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
    transition: all 0.3s ease;
}

.combo-inner {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
}

#combo-count {
    font-size: 48px;
    font-weight: 900;
    color: #ffd700;
    text-shadow:
        0 0 10px #ffd700,
        0 0 25px #ff8800,
        0 0 50px rgba(255, 136, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.9);
    line-height: 1;
    letter-spacing: -2px;
    transition: font-size 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.combo-label {
    font-size: 14px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 0 0 8px #ff8800, 0 1px 3px rgba(0,0,0,0.8);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.combo-bonus {
    font-size: 11px;
    color: #aaffaa;
    text-shadow: 0 0 6px rgba(100, 255, 100, 0.5);
    margin-top: 2px;
    letter-spacing: 1px;
    min-height: 14px;
}

/* Combo açılış animasyonu - SLAM efekti */
.combo-display.active {
    display: block !important;
}

.combo-display.combo-slam {
    animation: comboSlam 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes comboSlam {
    0% {
        transform: rotate(-18deg) scale(2.2);
        filter: brightness(3) saturate(2);
    }
    40% {
        transform: rotate(-8deg) scale(0.85);
    }
    70% {
        transform: rotate(-14deg) scale(1.1);
    }
    100% {
        transform: rotate(-12deg) scale(1.0);
        filter: brightness(1) saturate(1);
    }
}

/* Milestone büyük slam */
.combo-display.combo-mega-slam {
    animation: comboMegaSlam 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes comboMegaSlam {
    0% {
        transform: rotate(-25deg) scale(3.0);
        filter: brightness(5) saturate(3);
    }
    30% {
        transform: rotate(-5deg) scale(0.7);
    }
    50% {
        transform: rotate(-16deg) scale(1.3);
        filter: brightness(2);
    }
    75% {
        transform: rotate(-10deg) scale(0.95);
    }
    100% {
        transform: rotate(-12deg) scale(1.0);
        filter: brightness(1) saturate(1);
    }
}

/* Timer bar */
.combo-timer-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    margin-top: 6px;
    overflow: hidden;
}

.combo-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff2200, #ffd700);
    border-radius: 1px;
    transition: width 0.05s linear;
    box-shadow: 0 0 8px #ffd700, 0 0 3px #ff4400;
}

/* Timer acil durum yanıp sönmesi */
@keyframes comboTimerUrgent {
    from { opacity: 1; background: #ff2200; box-shadow: 0 0 12px #ff0000; }
    to { opacity: 0.4; background: #ff6600; box-shadow: 0 0 4px #ff4400; }
}

/* ============================
   COMBO TİER SİSTEMİ
   ============================ */

/* Tier: HOT (10-19 kill) - Turuncu ateş */
.combo-display[data-tier="hot"] {
    border-left-color: #ff6600;
    background: linear-gradient(135deg, rgba(255, 100, 0, 0.2) 0%, rgba(255, 50, 0, 0.3) 100%);
}
.combo-display[data-tier="hot"] #combo-count {
    color: #ff8800;
    text-shadow: 0 0 15px #ff6600, 0 0 35px #ff4400, 0 0 60px rgba(255, 50, 0, 0.5), 0 2px 6px rgba(0,0,0,0.9);
}
.combo-display[data-tier="hot"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 100, 0, 0.35), transparent 70%);
}
.combo-display[data-tier="hot"] .combo-label {
    color: #ff9944;
}

/* Tier: FIRE (20-29 kill) - Kırmızı alev */
.combo-display[data-tier="fire"] {
    border-left-color: #ff2200;
    background: linear-gradient(135deg, rgba(255, 50, 0, 0.25) 0%, rgba(200, 0, 0, 0.35) 100%);
    animation: comboFirePulse 0.6s ease-in-out infinite alternate;
}
.combo-display[data-tier="fire"] #combo-count {
    color: #ff4400;
    text-shadow: 0 0 20px #ff2200, 0 0 40px #ff0000, 0 0 70px rgba(255, 0, 0, 0.6), 0 2px 6px rgba(0,0,0,0.9);
}
.combo-display[data-tier="fire"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 30, 0, 0.5), transparent 70%);
    filter: blur(25px);
}
.combo-display[data-tier="fire"] .combo-label {
    color: #ff6644;
}

@keyframes comboFirePulse {
    from { box-shadow: 0 0 20px rgba(255, 50, 0, 0.3), inset 0 0 15px rgba(255, 50, 0, 0.1); }
    to { box-shadow: 0 0 45px rgba(255, 50, 0, 0.6), 0 0 90px rgba(255, 0, 0, 0.15), inset 0 0 25px rgba(255, 50, 0, 0.15); }
}

/* Tier: ULTRA (30-49 kill) - Mor enerji */
.combo-display[data-tier="ultra"] {
    border-left-color: #cc00ff;
    background: linear-gradient(135deg, rgba(200, 0, 255, 0.25) 0%, rgba(150, 0, 200, 0.35) 100%);
    animation: comboUltraPulse 0.45s ease-in-out infinite alternate;
}
.combo-display[data-tier="ultra"] #combo-count {
    color: #dd44ff;
    text-shadow: 0 0 20px #cc00ff, 0 0 40px #8800cc, 0 0 70px rgba(200, 0, 255, 0.6), 0 2px 6px rgba(0,0,0,0.9);
}
.combo-display[data-tier="ultra"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(180, 0, 255, 0.5), transparent 70%);
    filter: blur(30px);
}
.combo-display[data-tier="ultra"] .combo-label {
    color: #cc88ff;
}

@keyframes comboUltraPulse {
    from { box-shadow: 0 0 25px rgba(200, 0, 255, 0.4), inset 0 0 15px rgba(180, 0, 255, 0.1); }
    to { box-shadow: 0 0 55px rgba(200, 0, 255, 0.7), 0 0 110px rgba(150, 0, 200, 0.2), inset 0 0 30px rgba(180, 0, 255, 0.15); }
}

/* Tier: LEGENDARY (50+ kill) - Gökkuşağı */
.combo-display[data-tier="legendary"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 200, 0, 0.2) 33%, rgba(255, 0, 100, 0.2) 66%, rgba(0, 200, 255, 0.15) 100%);
    animation: comboLegendaryPulse 0.35s ease-in-out infinite alternate, comboRainbowBorder 2s linear infinite;
    border-left-width: 5px;
}
.combo-display[data-tier="legendary"] #combo-count {
    animation: comboRainbowText 1.5s linear infinite;
    font-weight: 900;
}
.combo-display[data-tier="legendary"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 200, 0, 0.6), rgba(255, 0, 150, 0.3) 50%, transparent 70%);
    filter: blur(35px);
    animation: comboGlowRotate 3s linear infinite;
}
.combo-display[data-tier="legendary"] .combo-label {
    animation: comboRainbowLabel 2s linear infinite;
}

@keyframes comboLegendaryPulse {
    from { box-shadow: 0 0 30px rgba(255, 200, 0, 0.5), inset 0 0 20px rgba(255, 150, 0, 0.1); }
    to { box-shadow: 0 0 70px rgba(255, 100, 0, 0.8), 0 0 140px rgba(255, 0, 100, 0.2), inset 0 0 40px rgba(255, 200, 0, 0.15); }
}

@keyframes comboRainbowBorder {
    0% { border-left-color: #ff0000; border-bottom-color: rgba(255, 0, 0, 0.3); }
    16% { border-left-color: #ff8800; border-bottom-color: rgba(255, 136, 0, 0.3); }
    33% { border-left-color: #ffff00; border-bottom-color: rgba(255, 255, 0, 0.3); }
    50% { border-left-color: #00ff88; border-bottom-color: rgba(0, 255, 136, 0.3); }
    66% { border-left-color: #0088ff; border-bottom-color: rgba(0, 136, 255, 0.3); }
    83% { border-left-color: #cc00ff; border-bottom-color: rgba(200, 0, 255, 0.3); }
    100% { border-left-color: #ff0000; border-bottom-color: rgba(255, 0, 0, 0.3); }
}

@keyframes comboRainbowText {
    0% { color: #ff4444; text-shadow: 0 0 25px #ff0000, 0 0 50px #ff0000, 0 2px 6px rgba(0,0,0,0.9); }
    25% { color: #ffaa00; text-shadow: 0 0 25px #ff8800, 0 0 50px #ff8800, 0 2px 6px rgba(0,0,0,0.9); }
    50% { color: #44ff88; text-shadow: 0 0 25px #00ff66, 0 0 50px #00ff66, 0 2px 6px rgba(0,0,0,0.9); }
    75% { color: #4488ff; text-shadow: 0 0 25px #0066ff, 0 0 50px #0066ff, 0 2px 6px rgba(0,0,0,0.9); }
    100% { color: #ff4444; text-shadow: 0 0 25px #ff0000, 0 0 50px #ff0000, 0 2px 6px rgba(0,0,0,0.9); }
}

@keyframes comboRainbowLabel {
    0% { color: #ff8888; }
    25% { color: #ffcc66; }
    50% { color: #88ffaa; }
    75% { color: #88aaff; }
    100% { color: #ff8888; }
}

@keyframes comboGlowRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Combo sarsıntı efekti (JS ile tetiklenir) */
.combo-display.combo-shake {
    animation: comboShake 0.15s ease-out;
}
@keyframes comboShake {
    0% { transform: rotate(-12deg) scale(1) translate(0, 0); }
    25% { transform: rotate(-14deg) scale(1.02) translate(-3px, 2px); }
    50% { transform: rotate(-10deg) scale(1.04) translate(3px, -2px); }
    75% { transform: rotate(-13deg) scale(1.01) translate(-2px, 1px); }
    100% { transform: rotate(-12deg) scale(1) translate(0, 0); }
}
/* ================================================
   ASKERİ TEMA - KONTROLLER VE SIFIRLA MODALLERİ
   ================================================ */

/* Military Modal Container */
.military-modal {
    background: linear-gradient(180deg, #1a1f14 0%, #0f140a 100%);
    border: clamp(2px, 0.4vh, 3px) solid #4a5d23;
    border-radius: 2px;
    max-width: min(700px, 95vw);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
    position: relative;
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(107, 124, 63, 0.3);
    animation: military-entrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}

.military-modal.danger {
    border-color: #8b2020;
    max-width: 650px;
    margin: auto;
}

@keyframes military-entrance {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Military Modal Header */
.military-modal-header {
    background: linear-gradient(180deg, #2d3820 0%, #232b18 100%);
    border-bottom: 2px solid #4a5d23;
    padding: clamp(10px, 2.5vh, 18px) clamp(12px, 2.5vw, 25px);
    position: relative;
    overflow: hidden;
}

.military-modal-header.danger {
    background: linear-gradient(180deg, #3d1a1a 0%, #2b1212 100%);
    border-bottom: 2px solid #8b2020;
}

.military-modal-header h2 {
    font-family: 'Oxanium', monospace;
    font-size: clamp(13px, 3vh, 20px);
    font-weight: 900;
    letter-spacing: clamp(2px, 0.6vw, 6px);
    color: #c3b091;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.military-modal-header.danger h2 {
    color: #ff8888;
}

/* Header Decorations */
.header-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        #4a5d23 0px,
        #4a5d23 20px,
        #2d3820 20px,
        #2d3820 40px
    );
}

.header-stripe.danger {
    background: repeating-linear-gradient(
        45deg,
        #8b2020 0px,
        #8b2020 15px,
        #ffdd00 15px,
        #ffdd00 30px
    );
    height: 4px;
}

.header-corner {
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid #6b7c3f;
}

.header-corner.top-left {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.header-corner.top-right {
    top: 8px;
    right: 8px;
    border-left: none;
    border-bottom: none;
}

.danger-stripes {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        135deg,
        #8b2020 0px,
        #8b2020 10px,
        transparent 10px,
        transparent 20px
    );
    opacity: 0.4;
}

/* Military Modal Body */
.military-modal-body {
    padding: clamp(12px, 2.5vh, 25px) clamp(14px, 3vw, 30px);
    background: rgba(20, 25, 15, 0.4);
}

/* Controls Sections */
.controls-section {
    margin-bottom: clamp(12px, 2.5vh, 25px);
}

.controls-section:last-child {
    margin-bottom: 0;
}

.section-label {
    font-family: 'Oxanium', monospace;
    font-size: clamp(9px, 1.8vh, 11px);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.4vw, 3px);
    color: #6b7c3f;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
    position: relative;
}

.section-label::before {
    content: '█';
    margin-right: 8px;
    color: #4a5d23;
}

/* Control Row */
.military-modal-body .control-row {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
    margin-bottom: clamp(5px, 1vh, 10px);
    padding: clamp(5px, 1vh, 8px) clamp(8px, 1.5vw, 12px);
    background: rgba(35, 40, 25, 0.3);
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
}

.control-row:hover {
    background: rgba(74, 93, 35, 0.2);
    border-left-color: #6b7c3f;
}

/* Key Badges */
.key-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(28px, 5vw, 35px);
    height: clamp(24px, 4vh, 30px);
    padding: 0 clamp(6px, 1vw, 10px);
    background: linear-gradient(180deg, #3d4a28 0%, #2d3820 100%);
    border: 2px solid #6b7c3f;
    border-radius: 3px;
    font-family: 'Oxanium', monospace;
    font-size: clamp(10px, 1.8vh, 12px);
    font-weight: bold;
    color: #c3b091;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.key-badge.wide {
    min-width: clamp(60px, 12vw, 90px);
}

.control-desc {
    flex: 1;
    font-size: clamp(11px, 2vh, 13px);
    color: #d4c4a8;
    line-height: 1.4;
}

/* Warning Box (Reset Modal) */
.warning-box {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 15px);
    background: linear-gradient(135deg, rgba(139, 32, 32, 0.2) 0%, rgba(139, 32, 32, 0.1) 100%);
    border: 2px solid #8b2020;
    border-radius: 4px;
    padding: clamp(10px, 2vh, 18px) clamp(12px, 2vw, 20px);
    margin-bottom: clamp(12px, 2.5vh, 25px);
}

.warning-icon {
    font-size: clamp(28px, 6vh, 42px);
    color: #ffdd00;
    line-height: 1;
    text-shadow:
        0 0 10px rgba(255, 221, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
    animation: warning-pulse 1.5s ease-in-out infinite;
}

@keyframes warning-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.warning-text {
    flex: 1;
    font-family: 'Oxanium', monospace;
    font-size: clamp(11px, 2vh, 14px);
    font-weight: bold;
    letter-spacing: 1px;
    color: #ff8888;
    margin: 0;
    line-height: 1.5;
}

/* Data List (Reset Modal) */
.data-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(5px, 1vh, 10px);
    margin-bottom: clamp(12px, 2.5vh, 25px);
}

.data-item {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1vw, 10px);
    padding: clamp(6px, 1.2vh, 10px) clamp(8px, 1.5vw, 14px);
    background: rgba(35, 40, 25, 0.4);
    border-left: 3px solid #8b2020;
    font-size: clamp(11px, 2vh, 13px);
    color: #d4c4a8;
    transition: all 0.2s ease;
}

.data-item:hover {
    background: rgba(139, 32, 32, 0.2);
    border-left-color: #ff5555;
}

.item-icon {
    color: #8b2020;
    font-size: 10px;
}

.confirm-text {
    text-align: center;
    font-family: 'Oxanium', monospace;
    font-size: clamp(11px, 2vh, 13px);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    color: #ffaa88;
    padding: clamp(8px, 2vh, 15px);
    background: rgba(139, 32, 32, 0.15);
    border: 1px dashed #8b2020;
}

/* Military Modal Footer */
.military-modal-footer {
    padding: clamp(10px, 2.5vh, 20px) clamp(12px, 2.5vw, 25px);
    background: rgba(20, 25, 15, 0.6);
    border-top: 2px solid rgba(74, 93, 35, 0.3);
    display: flex;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 15px);
    flex-wrap: wrap;
}

/* Military Buttons */
.military-button {
    font-family: 'Oxanium', sans-serif;
    font-size: clamp(11px, 2vh, 14px);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.4vw, 3px);
    padding: clamp(8px, 2vh, 14px) clamp(20px, 4vw, 40px);
    border: 2px solid #6b7c3f;
    background: linear-gradient(180deg, #4a5d23 0%, #3a4a1a 100%);
    color: #c3b091;
    border-radius: 2px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.military-button::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;
}

.military-button:hover::before {
    left: 100%;
}

.military-button:hover {
    background: linear-gradient(180deg, #6b7c3f 0%, #5a6b33 100%);
    border-color: #8a9b4f;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.military-button:active {
    transform: translateY(0);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.military-button.secondary {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border-color: #5a5a5a;
    color: #aaa;
}

.military-button.secondary:hover {
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-color: #7a7a7a;
    color: #fff;
}

.military-button.danger {
    background: linear-gradient(180deg, #b82020 0%, #8b2020 100%);
    border-color: #ff5555;
    color: #fff;
    min-width: 180px;
}

.military-button.danger:hover {
    background: linear-gradient(180deg, #d82020 0%, #b82020 100%);
    border-color: #ff8888;
    box-shadow:
        0 6px 12px rgba(139, 32, 32, 0.6),
        0 0 20px rgba(255, 85, 85, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   AYARLAR MODALI - Settings Modal
   ═══════════════════════════════════════════════════════════ */
.settings-modal {
    max-width: 500px;
}

.settings-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
}

.settings-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-section .section-label {
    font-family: 'Oxanium', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--olive-light, #6b7c3f);
    letter-spacing: 2px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.2);
}

/* Setting Rows */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(6px, 1.2vh, 10px) 0;
    gap: clamp(10px, 2vw, 20px);
}

.setting-label {
    font-size: clamp(11px, 2vh, 13px);
    color: var(--khaki, #c3b091);
    flex-shrink: 0;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 12px);
}

.setting-value {
    font-family: 'Oxanium', sans-serif;
    font-size: clamp(10px, 1.8vh, 12px);
    color: var(--olive-light, #6b7c3f);
    min-width: clamp(30px, 6vw, 40px);
    text-align: right;
}

/* Settings Slider */
.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(100px, 20vw, 150px);
    height: 8px;
    background: linear-gradient(90deg, #2d3a1f 0%, #3d4a2f 100%);
    border-radius: 4px;
    border: 1px solid #4a5d23;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #6b7c3f 0%, #4a5d23 100%);
    border: 2px solid #8b9c5f;
    border-radius: 50%;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(180deg, #8b9c5f 0%, #6b7c3f 100%);
    transform: scale(1.1);
}

.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #6b7c3f 0%, #4a5d23 100%);
    border: 2px solid #8b9c5f;
    border-radius: 50%;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

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

.toggle-slider {
    position: absolute;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #555 0%, #333 100%);
    border: 1px solid #666;
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: linear-gradient(180deg, #999 0%, #777 100%);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    border-color: #4caf50;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background: linear-gradient(180deg, #66bb6a 0%, #4caf50 100%);
}

/* Language Dropdown */
.language-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.language-dropdown-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(180deg, #2d3a1f 0%, #1a2010 100%);
    border: 2px solid #3a4a25;
    border-radius: 6px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.language-dropdown-selected:hover {
    background: linear-gradient(180deg, #3d4a2f 0%, #2d3a1f 100%);
    border-color: #5a6a35;
}

.language-dropdown-selected.open {
    border-color: #6b7c3f;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 0 15px rgba(107, 124, 63, 0.2);
}

.language-dropdown-selected .lang-flag {
    font-size: 20px;
    flex-shrink: 0;
}

.language-dropdown-selected .lang-name {
    font-family: 'Oxanium', sans-serif;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.5px;
    flex: 1;
}

.lang-dropdown-arrow {
    font-size: 12px;
    color: var(--khaki, #c3b091);
    transition: transform 0.2s ease;
    margin-left: auto;
}

.language-dropdown-selected.open .lang-dropdown-arrow {
    transform: rotate(180deg);
}

.language-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #1e2812 0%, #151c0c 100%);
    border: 2px solid #3a4a25;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.language-dropdown-list.open {
    display: block;
}

.language-dropdown-list::-webkit-scrollbar {
    width: 6px;
}

.language-dropdown-list::-webkit-scrollbar-track {
    background: #111a08;
    border-radius: 3px;
}

.language-dropdown-list::-webkit-scrollbar-thumb {
    background: #3a4a25;
    border-radius: 3px;
}

.language-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: #4a5d23;
}

.language-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: background 0.15s ease;
}

.language-dropdown-item:hover {
    background: rgba(74, 93, 35, 0.4);
}

.language-dropdown-item.active {
    background: linear-gradient(90deg, rgba(74, 93, 35, 0.6) 0%, rgba(74, 93, 35, 0.2) 100%);
    border-left: 3px solid #6b7c3f;
}

.language-dropdown-item .lang-flag {
    font-size: 18px;
    flex-shrink: 0;
}

.language-dropdown-item .lang-name {
    font-family: 'Oxanium', sans-serif;
    font-size: 12px;
    color: var(--khaki, #c3b091);
    letter-spacing: 0.5px;
}

.language-dropdown-item.active .lang-name {
    color: #fff;
    font-weight: 600;
}

.language-note {
    margin-top: clamp(6px, 1.5vh, 12px);
    font-size: clamp(9px, 1.6vh, 11px);
    color: #777;
    font-style: italic;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .military-modal {
        width: 95%;
        max-width: none;
    }

    .military-modal-header h2 {
        font-size: 16px;
        letter-spacing: 3px;
    }

    .military-modal-body {
        padding: 20px 18px;
    }

    .key-badge.wide {
        min-width: 70px;
    }

    .data-list {
        grid-template-columns: 1fr;
    }

    .language-dropdown-selected {
        padding: 8px 12px;
    }

    .language-dropdown-selected .lang-name {
        font-size: 12px;
    }

    .language-dropdown-item {
        padding: 8px 12px;
    }

    .language-dropdown-list {
        max-height: 200px;
    }

    .military-button {
        padding: 12px 25px;
        font-size: 12px;
    }
}

/* =============================================
   MOBİL DESTEK
   ============================================= */

/* "Ana Ekrana Ekle" yönlendirme banner'ı */
#install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    animation: install-slide-up 0.4s ease-out;
}

#install-prompt.hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: all 0.3s ease-in;
}

.install-prompt-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(45, 58, 31, 0.97) 0%, rgba(30, 40, 20, 0.98) 100%);
    border: 2px solid rgba(107, 124, 63, 0.7);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(107, 124, 63, 0.2);
    backdrop-filter: blur(8px);
    max-width: min(400px, 90vw);
}

.install-prompt-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.install-prompt-text {
    flex: 1;
}

.install-prompt-title {
    font-family: 'Oxanium', monospace, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #d4c4a0;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.install-prompt-desc {
    font-family: 'Oxanium', monospace, sans-serif;
    font-size: 11px;
    color: #a89070;
    line-height: 1.4;
}

.install-prompt-desc strong {
    color: #c3b091;
}

.install-prompt-close {
    background: none;
    border: 1px solid rgba(107, 124, 63, 0.4);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: #6b7c3f;
    font-size: 14px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.install-prompt-close:hover {
    background: rgba(107, 124, 63, 0.2);
    color: #c3b091;
}

@keyframes install-slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Portrait uyarı overlay */
#portrait-warning {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: linear-gradient(180deg, #1a1f14 0%, #0d1208 60%, #0a0e06 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Oxanium', monospace, sans-serif;
    color: #c3b091;
}

#portrait-warning .portrait-warning-content {
    text-align: center;
}

#portrait-warning .portrait-warning-icon {
    font-size: 48px;
    margin-bottom: 20px;
    animation: portrait-rotate 2s ease-in-out infinite;
}

#portrait-warning .portrait-warning-title {
    font-size: 22px;
    font-weight: 700;
    color: #d4c4a0;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(107,124,63,0.5);
}

#portrait-warning .portrait-warning-desc {
    font-size: 13px;
    color: #6b7c3f;
    letter-spacing: 2px;
}

@keyframes portrait-rotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(90deg); }
    75% { transform: rotate(0deg); }
}

/* Portrait modunda oyun-içi düzen */
@media (orientation: portrait) {
    /* Top bar — yatay tut, kompakt */
    .top-ui {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    .top-left-ui {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Dashboard — kompakt row, radar ve skills gizle */
    #dashboard {
        flex-direction: row !important;
        padding: 4px 8px;
        gap: 6px;
    }
    #radar-panel { display: none !important; }
    #skills-panel { display: none !important; }
    #stats-panel { flex: 1 1 100%; gap: 6px; }
    #health-ammo-group { max-width: 50vw; }
    .mobile-hud #health-ammo-group { max-width: none !important; width: 100% !important; }

    /* Görev listesi gizle */
    .mission-checklist { display: none !important; }
}

/* === MOBİL TÜM CİHAZLAR - GENEL VIEWPORT OPTİMİZASYONU === */
@media (max-width: 900px) and (max-height: 600px) {
    /* Tüm canvas'ları viewport'a sığdır */
    body, html {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #gameContainer {
        /* Safe area desteği */
        padding: max(env(safe-area-inset-top), 0px) max(env(safe-area-inset-right), 0px) max(env(safe-area-inset-bottom), 0px) max(env(safe-area-inset-left), 0px);
    }

    /* Tüm canvas elementlerini container'a göre ölçeklendir */
    canvas {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

/* =============================================================
   MOBİL UI — KAPSAMLI ÖLÇEKLEME
   Hedef: Mobil landscape (yükseklik 300-500px, genişlik 500-900px)
   Strateji: vh/vw/clamp ile viewport-relative boyutlandırma
   ============================================================= */

/* --- OYUN İÇİ UI — Kısa ekranlar (landscape telefon/tablet) --- */
/* === MOBİL LANDSCAPE / KISA EKRANLAR (< 500px yükseklik) === */
@media (max-height: 500px) {

    /* === ÜST BAR === */
    #top-head-band {
        padding: clamp(2px, 0.5vh, 4px) clamp(6px, 1.5vw, 10px);
        border-bottom-width: clamp(1px, 0.2vh, 2px);
    }

    .top-ui {
        /* 768px breakpoint'un column yapmasını engelle */
        flex-direction: row !important;
        align-items: center;
        gap: clamp(4px, 1vw, 8px);
        padding: 0;
    }

    .top-left-ui {
        gap: clamp(3px, 0.8vw, 6px);
        flex-wrap: nowrap;
    }

    .info-display {
        font-size: clamp(7px, 1.6vh, 11px);
        padding: clamp(1px, 0.3vh, 3px) clamp(4px, 1vw, 8px);
        border-width: 1px;
        white-space: nowrap;
    }

    .ui-button {
        font-size: clamp(11px, 2.3vh, 16px);
        padding: clamp(2px, 0.4vh, 4px) clamp(4px, 1vw, 8px);
    }

    /* Combo */
    .combo-display {
        top: clamp(28px, 6vh, 35px);
        right: clamp(3px, 1vw, 8px);
        padding: clamp(3px, 0.8vh, 5px) clamp(10px, 2.5vw, 14px) clamp(4px, 1vh, 6px) clamp(8px, 2vw, 12px);
        min-width: clamp(60px, 12vw, 80px);
    }

    #combo-count {
        font-size: clamp(18px, 5.5vh, 35px);
    }

    .combo-label {
        font-size: clamp(7px, 1.6vh, 10px);
        letter-spacing: clamp(1px, 0.2vw, 2px);
    }

    .combo-timer-bar {
        height: clamp(1px, 0.3vh, 2px);
    }

    /* === BOSS BAR === */
    #bossBarsWrapper {
        top: clamp(30px, 6.5vh, 40px);
        width: clamp(45%, 55vw, 60%);
        left: 50%;
        transform: translateX(-50%);
    }

    .boss-health-container {
        height: clamp(10px, 2.5vh, 18px);
        border-width: 1px;
    }

    .boss-health-text {
        font-size: clamp(7px, 1.5vh, 10px);
    }

    /* === GÖREV LİSTESİ === */
    .mission-checklist {
        top: clamp(30px, 6.5vh, 40px);
        left: clamp(3px, 1vw, 8px);
        padding: clamp(3px, 0.8vh, 5px) clamp(4px, 1vw, 8px);
        min-width: clamp(100px, 20vw, 140px);
        max-width: clamp(130px, 25vw, 180px);
        border-width: 1px;
    }

    .mission-header {
        padding: 0 0 clamp(2px, 0.5vh, 4px) 0;
        gap: clamp(3px, 0.8vw, 5px);
    }

    .mission-icon {
        font-size: clamp(8px, 1.8vh, 11px);
    }

    .mission-title {
        font-size: clamp(7px, 1.5vh, 9px);
        letter-spacing: clamp(0.5px, 0.1vw, 1px);
    }

    .mission-item {
        font-size: clamp(7px, 1.5vh, 9px);
        padding: clamp(1px, 0.2vh, 2px) 0;
    }

    .mission-checkbox {
        font-size: clamp(8px, 1.7vh, 10px);
    }

    .mission-progress {
        height: clamp(1px, 0.3vh, 2px);
        margin-top: clamp(2px, 0.5vh, 4px);
    }

    /* === XP BAR === */
    #xp-bar-strip {
        height: 8px;
    }

    .xp-strip-label, .xp-strip-text {
        font-size: 6px;
    }

    /* === DASHBOARD === */
    #dashboard {
        /* 768px breakpoint'un column yapmasını engelle */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 4px 6px;
        gap: 6px;
        border-top-width: 2px;
    }

    /* Radar — mobilde gizle, minimap yeterli */
    #radar-panel {
        display: none !important;
    }

    #stats-panel {
        gap: 6px;
    }

    /* --- Sağlık & Şarjör --- */
    #health-ammo-group {
        gap: 3px;
        width: clamp(120px, 35vw, 220px);
    }
    .mobile-hud #health-ammo-group {
        width: 100% !important;
        max-width: none !important;
    }

    .gauge-bar-container {
        height: clamp(14px, 4vh, 24px);
        border-width: 2px;
    }

    .gauge-label {
        font-size: clamp(7px, 2vh, 14px);
        left: 6px;
        letter-spacing: 1px;
    }

    .gauge-text {
        font-size: clamp(8px, 2.2vh, 15px);
        right: 6px;
    }

    #magazine-display {
        font-size: clamp(9px, 2.2vh, 14px) !important;
        padding: 1px 4px;
    }

    /* --- Mürettebat Slotları (2×2 grid) — viewport-relative --- */
    #crew-display {
        --slot-size: clamp(26px, 8vh, 55px);
        grid-template-columns: repeat(2, var(--slot-size));
        grid-template-rows: repeat(2, var(--slot-size));
        column-gap: clamp(2px, 0.5vh, 5px);
        row-gap: clamp(3px, 0.6vh, 6px);
        padding: clamp(2px, 0.5vh, 4px);
        margin-top: clamp(-4px, -1vh, -2px);
        margin-bottom: -4px;
        border-width: 2px;
    }

    /* --- Silah Slotları (3×2 grid) — viewport-relative --- */
    #active-weapons-display {
        --slot-size: clamp(26px, 8vh, 55px);
        grid-template-columns: repeat(3, var(--slot-size));
        grid-template-rows: repeat(2, var(--slot-size));
        column-gap: clamp(2px, 0.5vh, 5px);
        row-gap: clamp(3px, 0.6vh, 6px);
        width: auto;
        height: auto;
        padding: clamp(2px, 0.5vh, 4px);
        margin-top: clamp(-4px, -1vh, -2px);
        margin-bottom: -4px;
        border-width: 2px;
    }

    .weapon-slot-box {
        width: var(--slot-size, 30px);
        height: var(--slot-size, 30px);
        font-size: clamp(14px, 4vh, 28px);
        border-width: 1px;
        border-radius: 4px;
    }

    .weapon-slot-box .weapon-level {
        font-size: clamp(8px, 2.5vh, 16px);
        padding: 1px 4px;
        border-radius: 3px;
    }

    /* --- Pasif Yetenekler --- */
    #passive-abilities-display {
        gap: 3px;
        padding: 0;
    }

    .passive-badge {
        font-size: clamp(8px, 2vh, 12px);
        padding: 2px 5px;
        gap: 3px;
    }

    .passive-badge .passive-icon {
        font-size: clamp(10px, 2.5vh, 15px);
    }

    /* --- Skills Panel — mobilde gizle (touch butonları var) --- */
    #skills-panel {
        display: none !important;
    }

    /* === SLIDER'LAR — touch-friendly === */
    .volume-slider,
    .settings-slider {
        height: 28px;
        -webkit-appearance: none;
    }

    .volume-slider::-webkit-slider-thumb,
    .settings-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    /* === MODAL / OVERLAY EKRANLARI === */

    /* Game Over */
    .game-over-container {
        max-width: 95%;
        padding: 12px;
    }

    .game-over-container h2 {
        font-size: clamp(18px, 5vh, 32px);
    }

    .gameover-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .gameover-stat-box h3 {
        font-size: 9px;
    }

    .gameover-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .gameover-extra-buttons {
        gap: 6px;
    }

    /* Level Up */
    .levelup-container {
        max-width: 95%;
        padding: 10px;
    }

    .levelup-container h2 {
        font-size: clamp(16px, 4.5vh, 28px);
    }

    .levelup-options {
        gap: 6px;
    }

    /* Pause */
    .pause-container {
        max-width: 98%;
        max-height: 95vh;
        overflow-y: auto;
    }

    .pause-header h2 {
        font-size: clamp(14px, 4vh, 24px);
    }

    .pause-panels {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }

    .pause-panel {
        padding: 4px;
    }

    .pause-panel h3 {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .pause-panel .weapon-list li {
        font-size: 8px;
        padding: 1px 0;
    }

    .pause-footer {
        flex-direction: column;
        align-items: center;
    }

    .pause-buttons {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .volume-controls-panel {
        max-width: 95%;
        padding: 6px 10px;
        gap: 5px;
    }

    .volume-row {
        grid-template-columns: 55px 1fr 32px;
        gap: 5px;
    }

    .volume-label {
        font-size: 10px;
    }

    .volume-controls {
        gap: 4px;
    }

    .volume-control {
        gap: 4px;
    }

    .volume-control label {
        font-size: 12px;
    }

    .volume-value, .toggle-label {
        font-size: 9px;
    }

    /* Meta Upgrades */
    .meta-upgrades-container {
        max-width: 98%;
        max-height: 90vh;
    }

    /* Badge Collection */
    .badge-collection-container {
        max-width: 98%;
        max-height: 90vh;
    }

    /* Tutorial, Controls Help, Military Modal — artık base stiller viewport-relative */
}

/* --- ANA MENÜ — Küçük ekranlar (genişlik veya yükseklik dar) --- */
@media (max-height: 500px), (max-width: 800px) {

    #mainMenu {
        padding: clamp(5px, 1vh, 10px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .main-layout-container {
        gap: clamp(4px, 1vh, 8px);
        max-width: 100%;
        padding: 0 clamp(5px, 2vw, 10px);
    }

    /* Başlık küçült */
    .menu-title-row h1 {
        font-size: clamp(14px, 3.5vh, 32px) !important;
        letter-spacing: clamp(2px, 0.5vw, 4px) !important;
        line-height: 1.1;
    }

    .menu-title-row .subtitle {
        font-size: clamp(7px, 1.2vh, 11px);
        letter-spacing: 1px;
    }

    /* 3-sütun düzeni: panelleri gizle, sadece butonlar göster */
    .menu-content-row {
        flex-direction: column;
        align-items: center;
        gap: clamp(4px, 1vh, 8px);
        overflow-y: auto;
        max-height: calc(100vh - clamp(80px, 15vh, 120px));
        padding-bottom: 10px;
    }

    /* Sol/sağ paneller (silahlar/araçlar) gizlenebilir veya küçültülebilir */
    .menu-content-row > .menu-card {
        width: min(300px, 92vw);
        margin: 0;
        max-height: 25vh;
        overflow-y: auto;
    }

    /* Stats ve leaderboard panelleri mobilde */
    .menu-panel {
        width: min(300px, 92vw);
        margin: 0;
    }

    .stats-panel {
        order: 5; /* Butonlardan sonra */
    }

    .leaderboard-panel {
        order: 6;
    }

    .menu-separator {
        display: none;
    }

    .menu-buttons-column {
        order: -1; /* Butonlar en üste */
        padding: clamp(3px, 1vh, 8px) clamp(5px, 2vw, 10px);
        gap: clamp(4px, 1vh, 8px);
        width: 100%;
        max-width: 400px;
    }

    .start-button {
        padding: clamp(10px, 2vh, 14px) clamp(14px, 3vw, 18px);
        font-size: clamp(13px, 2.5vh, 20px);
        letter-spacing: clamp(2px, 0.5vw, 4px);
    }

    .castle-defense-btn {
        padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2.5vw, 20px);
        font-size: clamp(11px, 2vh, 15px);
        letter-spacing: 1px;
    }

    .menu-card-header h3 {
        font-size: clamp(9px, 1.8vh, 11px);
    }

    .weapons-grid {
        gap: clamp(2px, 0.5vh, 4px);
    }

    .weapon-group h4 {
        font-size: clamp(8px, 1.5vh, 10px);
    }

    .weapon-list li {
        font-size: clamp(8px, 1.5vh, 10px);
        padding: clamp(1px, 0.3vh, 2px) clamp(1px, 0.5vw, 3px);
    }

    /* Araç paneli */
    .vehicle-selection-container {
        gap: clamp(3px, 0.8vh, 5px);
    }

    /* Meta/Badge/Utility butonları */
    .meta-upgrade-cta {
        padding: clamp(6px, 1.5vh, 10px);
        font-size: clamp(10px, 2vh, 13px);
    }

    .menu-button {
        padding: clamp(5px, 1.2vh, 8px) clamp(8px, 2vw, 12px);
        font-size: clamp(9px, 1.8vh, 11px);
        gap: clamp(5px, 1vw, 10px);
    }

    .menu-utility-row {
        gap: clamp(3px, 0.8vh, 5px);
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Araç geliştirme paneli */
    .vehicle-upgrade-inline {
        padding: clamp(3px, 0.8vh, 6px) clamp(5px, 1.5vw, 8px);
    }

    .upgrade-row {
        gap: clamp(3px, 0.8vh, 5px);
    }

    .upgrade-label {
        font-size: clamp(8px, 1.6vh, 10px);
    }

    .buy-upgrade-button {
        font-size: clamp(10px, 2vh, 12px);
        padding: clamp(2px, 0.5vh, 3px) clamp(6px, 1.5vw, 8px);
    }
}

/* --- ÇOK KISA EKRANLAR (< 380px yükseklik, küçük telefonlar) --- */
@media (max-height: 380px) {

    #top-head-band {
        padding: 2px 6px;
    }

    #dashboard {
        padding: 2px 4px;
        gap: 4px;
    }

    /* Mürettebat slotları daha da küçük */
    #crew-display {
        --slot-size: clamp(24px, 8vh, 40px);
        padding: 2px;
        row-gap: clamp(2px, 0.5vh, 4px);
    }

    /* Silah slotları daha da küçük */
    #active-weapons-display {
        --slot-size: clamp(24px, 8vh, 40px);
        padding: 2px;
        row-gap: clamp(2px, 0.5vh, 4px);
    }

    .gauge-bar-container {
        height: clamp(10px, 3vh, 16px);
    }

    /* Görev listesi gizle - çok yer kaplıyor */
    .mission-checklist {
        display: none;
    }

    /* XP bar minimal */
    #xp-bar-strip {
        height: 5px;
    }

    .xp-strip-label, .xp-strip-text {
        display: none;
    }

    /* Ana menü — panelleri tamamen gizle */
    .menu-content-row > .menu-card {
        display: none;
    }

    /* Sadece butonlar görünsün */
    .menu-buttons-column {
        order: -1;
    }
}

/* --- TOUCH CİHAZLAR — Genel dokunma iyileştirmeleri --- */
@media (pointer: coarse) {

    /* Tüm butonlara minimum dokunma alanı */
    .ui-button,
    .skill-button,
    .levelup-btn,
    .gameover-btn,
    .pause-btn,
    .military-button,
    .menu-button,
    .meta-upgrade-cta,
    .buy-upgrade-button,
    .start-button,
    .start-mode-toggles button,
    .castle-defense-btn {
        min-height: 36px;
        min-width: 36px;
    }

    /* Volume slider — kalın thumb */
    .volume-slider,
    .settings-slider {
        height: 28px;
    }

    .volume-slider::-webkit-slider-thumb,
    .settings-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .volume-slider::-moz-range-thumb,
    .settings-slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    /* Level up seçenekleri — daha geniş dokunma alanı */
    .upgrade-option {
        min-height: 44px;
    }
}

/* =============================================================
   MOBİL HUD YENİDEN TASARIM — .mobile-hud (JS ile eklenir)
   Portre yönlü mobil için temiz, profesyonel düzen
   ============================================================= */

/* ─── 1. GİZLE: Gereksiz öğeler ─── */
.mobile-hud #score,
.mobile-hud #money,
.mobile-hud #combo-display,
.mobile-hud .mission-checklist,
.mobile-hud #passive-abilities-display,
.mobile-hud #skills-panel,
.mobile-hud #mapHint,
.mobile-hud #magazine-display,
.mobile-hud #mapButton {
    display: none !important;
}

/* === iOS/Mobil Ses İzni Overlay === */
#audioUnlockOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#audioUnlockContent {
    text-align: center;
    color: var(--sand, #d4c5a0);
    animation: audioUnlockPulse 2s ease-in-out infinite;
}
#audioUnlockIcon {
    font-size: 64px;
    margin-bottom: 16px;
}
#audioUnlockText {
    font-size: 18px;
    font-family: var(--font-ui, 'Segoe UI', sans-serif);
    letter-spacing: 1px;
    text-transform: uppercase;
}
@keyframes audioUnlockPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* Klavye hatırlatıcıları — mobilde anlamsız (SHIFT, SPACE, M, H tuşları yok) */
.mobile-hud #tutorial-keys,
.mobile-hud #reminder-key-prompt,
.mobile-hud #controls-help-overlay {
    display: none !important;
}

/* top-right-ui: desktop'ta normal flow, mobile-hud'da gizle ama içindeki mobil butonlar ayrıca absolute ile konumlandırılır */
.mobile-hud .top-right-ui {
    display: none !important;
}

/* ─── 2. GİZLE: Dashboard — içerikler absolute ile konumlandırılır ─── */
.mobile-hud #dashboard {
    display: none !important;
}

/* ─── 3. ÜST BAR: #top-head-band ─── */
/* Tam genişlik, yarı saydam koyu şerit; butonlar solda, timer sağda */
.mobile-hud #top-head-band {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    z-index: 20;
    background: rgba(0, 0, 0, 0.55) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)) !important;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mobile-hud #top-head-band > * { pointer-events: auto; }
.mobile-hud #top-head-band::before { display: none !important; }

/* .top-ui: TL solda, timer ortada, pause sağda — flex row */
.mobile-hud .top-ui {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0 !important;
    min-height: 36px;
}

/* Sol grup: TL (para) gösterimi */
.mobile-hud .top-left-ui {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    flex: 1 !important;
}

/* TL (money) — sol üstte göster */
.mobile-hud #money {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Oxanium', monospace !important;
    color: #f5d87a !important;
    letter-spacing: 0.5px !important;
    padding: 3px 8px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(245, 216, 122, 0.3) !important;
    border-radius: 6px !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

/* Pause butonu — sağda */
.mobile-hud #pauseButton {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    pointer-events: auto;
    z-index: auto !important;
}
/* mapButton: top-left-ui'da artık yok, display:none zaten uygulanmış */
.mobile-hud #mapButton {
    display: none !important;
}
.mobile-hud #pauseButton:active {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Orta: timer — flex büyür, kendisi sınırlı */
.mobile-hud .top-center-ui {
    position: static !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Sağ grup: sadece pause butonu */
.mobile-hud .top-right-ui {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 !important;
    gap: 0 !important;
    pointer-events: auto !important;
}

/* Timer — ortada, kompakt */
.mobile-hud #gameTimer {
    display: flex !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 4px 10px !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #e8e8e8 !important;
}
.mobile-hud #scoreDisplay {
    display: none !important;
}

/* ─── 4. SAĞLIK BARI: #health-ammo-group ─── */
/* Üst barın hemen altında, ekranın tam genişliğinde */
.mobile-hud #health-ammo-group {
    position: absolute !important;
    top: calc(max(6px, env(safe-area-inset-top)) + 6px + 36px + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 15;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    pointer-events: none;
    padding: 0 !important;
}

.mobile-hud .gauge-bar-container {
    height: 14px !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    width: 100% !important;
}
.mobile-hud .gauge-bar-container::after { display: none !important; }
.mobile-hud .gauge-label {
    font-size: 7px !important;
    left: 6px !important;
}
.mobile-hud .gauge-text {
    font-size: 7px !important;
    right: 6px !important;
}

/* ─── 5. XP BARI: #xp-bar-strip ─── */
/* Sağlık barının hemen altında, ekranın tam genişliğinde */
.mobile-hud #xp-bar-strip {
    position: absolute !important;
    bottom: auto !important;
    top: calc(max(6px, env(safe-area-inset-top)) + 6px + 36px + 6px + 14px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 15;
    overflow: hidden;
}
.mobile-hud #xp-bar-strip .xp-strip-label,
.mobile-hud #xp-bar-strip .xp-strip-text {
    display: none !important;
}
.mobile-hud #xp-bar-strip #xp-bar {
    border-radius: 0 !important;
    height: 100% !important;
}

/* ─── 6. MOBİL TAB/MAP BUTONLARI: sağ üst köşe, XP barı altında ─── */
/* XP barı alt kenarı: safe-area-top + 6px + 36px (üst bar) + 6px + 14px (armor) + 4px (xp) = ~66px + safe-area */
.mobile-hud #mobileTabBtn,
.mobile-hud #mobileMapBtn {
    display: flex !important;
    position: absolute !important;
    top: calc(max(6px, env(safe-area-inset-top)) + 6px + 36px + 6px + 14px + 4px + 4px) !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 1px !important;
    width: 42px !important;
    height: 34px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    font-family: 'Oxanium', monospace !important;
    letter-spacing: 0.8px !important;
    padding: 0 !important;
    /* Askeri gradient arka plan */
    background: linear-gradient(160deg, rgba(45, 58, 28, 0.92) 0%, rgba(22, 30, 12, 0.95) 100%) !important;
    border: 1px solid rgba(107, 160, 63, 0.75) !important;
    border-top: 1px solid rgba(160, 200, 80, 0.5) !important;
    border-radius: 7px !important;
    color: rgba(212, 196, 168, 0.92) !important;
    /* Taktik glow */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 0 6px rgba(80, 140, 40, 0.20),
        inset 0 1px 0 rgba(180, 220, 100, 0.12) !important;
    cursor: pointer;
    z-index: 1200;
    pointer-events: auto !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
    text-transform: uppercase;
    overflow: hidden;
    /* İnce diyagonal çizgi dokusu */
    background-image:
        linear-gradient(160deg, rgba(45, 58, 28, 0.92) 0%, rgba(22, 30, 12, 0.95) 100%),
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 3px,
            rgba(255,255,255,0.015) 3px,
            rgba(255,255,255,0.015) 4px
        ) !important;
}
.mobile-hud #mobileMapBtn {
    right: max(8px, env(safe-area-inset-right)) !important;
}
.mobile-hud #mobileTabBtn {
    right: calc(max(8px, env(safe-area-inset-right)) + 42px + 6px) !important;
}
/* İkon üstü + metin altı kompozisyon */
.mobile-hud #mobileTabBtn::before {
    content: '◈';
    font-size: 11px;
    line-height: 1;
    color: rgba(160, 210, 90, 0.85);
    display: block;
}
.mobile-hud #mobileMapBtn::before {
    content: '◎';
    font-size: 11px;
    line-height: 1;
    color: rgba(100, 180, 240, 0.85);
    display: block;
}
.mobile-hud #mobileTabBtn:active,
.mobile-hud #mobileMapBtn:active {
    background: linear-gradient(160deg, rgba(80, 110, 40, 0.92) 0%, rgba(40, 60, 20, 0.97) 100%) !important;
    border-color: rgba(195, 230, 120, 0.9) !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.7),
        0 0 10px rgba(120, 200, 60, 0.35),
        inset 0 1px 0 rgba(200, 240, 120, 0.2) !important;
    transform: scale(0.95);
}

/* ─── 7. ALT BAR HUD: Silah + Mürettebat slotları ─── */
/* Tek parça bar — ekranın altında boydan boya */
.mobile-hud #active-weapons-display {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    z-index: 15;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    padding: 4px 6px calc(env(safe-area-inset-bottom, 4px) + 4px) 6px !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 100%) !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
}

.mobile-hud .weapon-slot-box {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 11px !important;
    border-width: 1px !important;
    border-radius: 4px !important;
    padding: 1px !important;
}

/* Mürettebat slotları — sağ alt, aynı bar */
.mobile-hud #crew-display {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    top: auto !important;
    z-index: 15;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    padding: 4px 6px calc(env(safe-area-inset-bottom, 4px) + 4px) 6px !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 100%) !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
}

/* Mürettebat slot boyutları */
.mobile-hud #crew-display .crew-slot,
.mobile-hud #crew-display .crew-member-slot {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    padding: 1px !important;
    border-width: 1px !important;
}

/* Mürettebat isim/seviye etiketlerini gizle — sadece ikon görünsün */
.mobile-hud #crew-display .crew-name,
.mobile-hud #crew-display .crew-level-badge,
.mobile-hud #crew-display .crew-slot-label {
    display: none !important;
}

/* ─── 8. BOSS BARLARI: #bossBarsWrapper ─── */
/* XP barının altında, ortada */
.mobile-hud #bossBarsWrapper {
    position: absolute !important;
    top: calc(max(6px, env(safe-area-inset-top)) + 6px + 36px + 6px + 14px + 3px + 5px + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 15;
    width: calc(100% - 16px) !important;
    max-width: 340px !important;
}

/* ═══ AUTH — Sağ Üst Köşe ═══ */
.auth-corner {
    position: fixed;
    top: 15px;
    right: 70px;
    z-index: 2100;
}

.auth-corner-btn {
    font-family: 'Oxanium', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffd700;
    border: 2px solid rgba(255, 215, 0, 0.6);
    background: linear-gradient(180deg, rgba(90, 70, 15, 0.85) 0%, rgba(55, 40, 5, 0.95) 100%);
    padding: 8px 18px;
    border-radius: 4px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.15);
    transition: all 0.2s ease;
    animation: auth-pulse 2.5s ease-in-out infinite;
}

.auth-corner-btn:hover {
    border-color: #ffd700;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
    transform: scale(1.05);
}

@keyframes auth-pulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(255, 215, 0, 0.15); }
    50% { box-shadow: 0 2px 16px rgba(255, 215, 0, 0.3); }
}

.auth-corner .user-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(74, 93, 35, 0.3);
    border: 1px solid rgba(107, 124, 63, 0.5);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.user-icon {
    color: #c3b091;
    font-size: 14px;
}

.username-text {
    font-family: 'Oxanium', monospace;
    font-size: 12px;
    color: #c3b091;
    letter-spacing: 1px;
    font-weight: bold;
}

.logout-btn {
    background: none;
    border: 1px solid rgba(139, 32, 32, 0.5);
    color: #aa6666;
    font-size: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s ease;
    font-family: 'Oxanium', monospace;
}

.logout-btn:hover {
    background: rgba(139, 32, 32, 0.3);
    border-color: #8b2020;
    color: #ff8888;
}

/* Auth Modal */
.auth-modal {
    max-width: 400px;
}


.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid rgba(107, 124, 63, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.auth-tab {
    flex: 1;
    padding: 10px 16px;
    background: rgba(35, 40, 25, 0.5);
    border: none;
    color: #6b7c3f;
    font-family: 'Oxanium', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    transition: all 0.2s ease;
}

.auth-tab:first-child {
    border-right: 1px solid rgba(107, 124, 63, 0.3);
}

.auth-tab.active {
    background: rgba(74, 93, 35, 0.4);
    color: #c3b091;
}

.auth-tab:hover:not(.active) {
    background: rgba(74, 93, 35, 0.2);
    color: #8a9b55;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-label {
    font-family: 'Oxanium', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #6b7c3f;
}

.auth-input {
    padding: 10px 14px;
    background: rgba(10, 15, 5, 0.8);
    border: 2px solid rgba(107, 124, 63, 0.3);
    border-radius: 2px;
    color: #c3b091;
    font-family: 'Oxanium', monospace;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.auth-input:focus {
    border-color: #6b7c3f;
}

.auth-input::placeholder {
    color: rgba(107, 124, 63, 0.4);
}

.auth-error {
    padding: 8px 12px;
    background: rgba(139, 32, 32, 0.2);
    border: 1px solid rgba(139, 32, 32, 0.5);
    border-radius: 2px;
    color: #ff8888;
    font-family: 'Oxanium', monospace;
    font-size: 11px;
    text-align: center;
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
}

/* ═══ LEADERBOARD (Skor Tablosu) ═══ */
.leaderboard-section {
    margin-top: 15px;
    padding: 12px 16px;
    background: rgba(35, 40, 25, 0.3);
    border: 1px solid rgba(107, 124, 63, 0.25);
    border-radius: 3px;
}

.leaderboard-title {
    font-family: 'Oxanium', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #6b7c3f;
    margin: 0 0 10px 0;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.2);
}

.leaderboard-content {
    max-height: 200px;
    overflow-y: auto;
}

.leaderboard-loading {
    text-align: center;
    color: #6b7c3f;
    font-family: 'Oxanium', monospace;
    font-size: 11px;
    padding: 12px;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Oxanium', monospace;
    font-size: 11px;
}

.leaderboard-table th {
    color: #6b7c3f;
    font-size: 9px;
    letter-spacing: 1px;
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.2);
}

.leaderboard-table td {
    color: #c3b091;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.1);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-table tr:hover td {
    background: rgba(74, 93, 35, 0.15);
}

.leaderboard-table .rank-cell {
    width: 30px;
    text-align: center;
    font-weight: bold;
}

.leaderboard-table .rank-1 { color: #ffd700; }
.leaderboard-table .rank-2 { color: #c0c0c0; }
.leaderboard-table .rank-3 { color: #cd7f32; }

.leaderboard-table .current-user td {
    background: rgba(74, 93, 35, 0.25);
    color: #d4c4a0;
    font-weight: bold;
}
.leaderboard-table .current-user.rank-1 td { color: #ffd700; }
.leaderboard-table .current-user.rank-2 td { color: #c0c0c0; }
.leaderboard-table .current-user.rank-3 td { color: #cd7f32; }

.leaderboard-empty {
    text-align: center;
    color: rgba(107, 124, 63, 0.5);
    font-family: 'Oxanium', monospace;
    font-size: 11px;
    padding: 16px;
    font-style: italic;
}

/* Leaderboard scrollbar */
.leaderboard-content::-webkit-scrollbar {
    width: 6px;
}

.leaderboard-content::-webkit-scrollbar-track {
    background: rgba(20, 15, 10, 0.5);
    border-radius: 3px;
}

.leaderboard-content::-webkit-scrollbar-thumb {
    background: var(--olive-dark);
    border-radius: 3px;
}

.leaderboard-content::-webkit-scrollbar-thumb:hover {
    background: var(--olive-mid);
}

/* ============================================================
   MUHAREBE ANALİZİ PANELİ — CTR TV fosfor yeşil teması
   ============================================================ */

/* Pause buton: tertiary (analiz butonu) */
.pause-btn.tertiary {
    background: linear-gradient(180deg, #0a1a0a 0%, #050e05 100%);
    border: 2px solid #1a4a1a;
    color: #39ff14;
    box-shadow: 0 0 8px rgba(57,255,20,0.2), 0 3px 8px rgba(0,0,0,0.4);
    font-family: 'Courier New', 'Oxanium', monospace;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
    letter-spacing: 1px;
    padding: clamp(5px, 1.2vh, 10px) clamp(10px, 2vw, 20px);
    font-size: clamp(10px, 1.8vh, 12px);
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.pause-btn.tertiary:hover {
    border-color: #39ff14;
    box-shadow: 0 0 16px rgba(57,255,20,0.45), 0 4px 12px rgba(0,0,0,0.5);
    color: #aaff66;
}

/* Modal gövde ve dış çerçeve */
.sp-modal {
    max-width: 98vw;
    width: fit-content;
    min-width: 400px;
}

/* 3 kolon düzen — içeriğe göre boyutlanır */
.sp-3col {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.sp-col { min-width: 0; flex-shrink: 0; }
.sp-col-left { width: 320px; }
.sp-col-right { width: 210px; }
.sp-col-center { flex: 0 1 auto; }

/* Kolon başlıkları */
.sp-col-hdr {
    font-family: 'Oxanium', monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 3px;
    color: #6a8a5a; text-transform: uppercase; text-align: center;
    padding: 5px 0 7px;
    border-bottom: 1px solid #1a2a14;
    margin-bottom: 10px;
}

.sp-modal-body {
    padding: 12px 16px 6px;
    overflow: hidden;
}
.sp-modal-footer {
    padding: 8px 16px 14px;
    display: flex;
    justify-content: center;
}

/* ═══ MÜRETTEBAT PANELİ — 2x3 grid ═══ */
.sp-crew-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sp-crew-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 8px 8px; text-align: center;
    border: 1px solid #2a3820; border-radius: 4px;
    background: linear-gradient(180deg, #1e261a 0%, #141a10 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}
.sp-crew-card.sp-crew-empty {
    opacity: 0.3; border-style: dashed; border-color: #1a2a14;
}
.sp-crew-photo {
    width: 52px; height: 64px; border-radius: 3px; flex-shrink: 0;
    border: 2px solid #3a5a2a; object-fit: cover;
    background: #0a1406; margin-bottom: 6px;
}
.sp-crew-photo.sp-crew-locked {
    filter: grayscale(1) brightness(0.3);
    border-color: #1a2a14;
}
.sp-crew-info { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.sp-crew-name {
    font-family: 'Oxanium', monospace; font-size: 12px; font-weight: 700;
    color: #a0e060; letter-spacing: 1.5px; text-transform: uppercase;
}
.sp-crew-card.sp-crew-empty .sp-crew-name { color: #3a5a2a; }
.sp-crew-lv {
    font-size: 11px; color: #8aaa6a; font-family: 'Oxanium', monospace; font-weight: 600;
}
.sp-crew-stat {
    font-size: 9px; color: #5a7a4a; line-height: 1.4;
    font-family: 'Courier New', monospace; text-align: center;
}
.sp-crew-stat b { color: #8aaa6a; }
.sp-crew-passive {
    font-size: 9px; color: #c0a040; margin-top: 2px;
    font-family: 'Courier New', monospace;
}

/* ═══ SİLAH PANELİ — 1x6 dikey ═══ */
.sp-wpn-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sp-wpn-card {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border: 1px solid #2a3820; border-radius: 3px;
    background: linear-gradient(180deg, #1e261a 0%, #141a10 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.sp-wpn-icon {
    font-size: 20px; flex-shrink: 0; width: 28px; text-align: center;
    filter: drop-shadow(0 0 3px rgba(160,224,96,0.3));
}
.sp-wpn-info { flex: 1; min-width: 0; }
.sp-wpn-name {
    font-family: 'Oxanium', monospace; font-size: 12px; font-weight: 700;
    color: #a0e060; letter-spacing: 0.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.sp-wpn-lv {
    font-size: 16px; font-weight: 900; color: #6a8a5a;
    font-family: 'Oxanium', monospace; flex-shrink: 0;
    background: #0e1c08; border: 1px solid #2a3820;
    border-radius: 3px; padding: 2px 8px; min-width: 28px; text-align: center;
}
.sp-wpn-lv.sp-wpn-max { color: #ffd700; border-color: #a08020; }
.sp-wpn-sub {
    font-size: 9px; color: #5a7a4a; font-family: 'Courier New', monospace;
}

/* Stat kartı ızgarası — masonry/organik */
.sp-grid {
    columns: 2;
    column-gap: 8px;
}
.sp-grid .sp-card {
    break-inside: avoid;
    margin-bottom: 8px;
}

/* Tek stat kartı: askeri dış + CRT iç */
.sp-card {
    border: 1px solid #2a3820;
    border-radius: 3px;
    background: linear-gradient(180deg, #1e261a 0%, #141a10 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}

.sp-card-hdr {
    background: linear-gradient(90deg, #1a2e10 0%, #0e1c08 100%);
    border-bottom: 1px solid #2a3820;
    color: #8aaa6a;
    font-family: 'Oxanium', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 5px 8px;
    /* text-transform: uppercase kaldırıldı — Türkçe İ/I dengesini bozuyor */
}

/* CRT ekran alanı */
.sp-screen {
    background: #060d06;
    position: relative;
    padding: 7px 9px 6px;
    overflow: hidden;
}

/* Tarama çizgileri (scanlines) */
.sp-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(0,0,0,0.20) 3px,
        rgba(0,0,0,0.20) 4px
    );
    pointer-events: none;
    z-index: 3;
}
/* Fosfor parlaması */
.sp-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 20%,
        rgba(0,255,65,0.04) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

/* Satır */
.sp-rows { position: relative; z-index: 2; }

.sp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    line-height: 1.4;
}

.sp-lbl {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #3a6a3a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-val {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #2a4a2a;
    text-align: right;
    min-width: 70px;
    padding-left: 4px;
    white-space: nowrap;
}

/* Aktif satırlar — canlı değer */
.sp-row-active .sp-lbl { color: #5a9a5a; }
.sp-val-lit {
    color: #39ff14;
    text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

/* Pasif / boş satırlar */
.sp-row-dim .sp-lbl { color: #1e351e; }
.sp-row-dim .sp-val { color: #1e351e; }

/* Bölücü çizgi */
.sp-div {
    height: 1px;
    background: #1a3a1a;
    margin: 5px 0 4px;
    position: relative;
    z-index: 2;
}

/* Toplam satırı */
.sp-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    z-index: 2;
    padding: 1px 0;
}
.sp-total-lbl {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #5aaa5a;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sp-total-val {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    color: #4a6a4a;
    text-align: right;
    white-space: nowrap;
    padding-left: 4px;
}

/* Aktif toplam — parlak beyaz-yeşil */
.sp-total-bonus .sp-total-lbl { color: #7acc7a; }
.sp-total-bonus .sp-total-val {
    color: #ffffff;
    text-shadow:
        0 0 10px rgba(57,255,20,0.7),
        0 0 4px  rgba(57,255,20,0.4);
}

/* =====================================================
   CRT HUD MONİTÖR — Alt panel en sol, sınırlara dayalı
   ===================================================== */

/* Eski TV titreme — steps(1) ile ani kesim hissi */
@keyframes crt-tv-flicker {
    0%,  88% { opacity: 1;   filter: brightness(1); }
    89%       { opacity: 1;   filter: brightness(0.93); }
    90%       { opacity: 1;   filter: brightness(1.04); }
    91%       { opacity: 1;   filter: brightness(0.97); }
    92%,  96% { opacity: 1;   filter: brightness(1); }
    97%       { opacity: 1;   filter: brightness(0.96); }
    98%,  100%{ opacity: 1;   filter: brightness(1); }
}

/* Yatay jitter — eski TV sinyali kaymasi */
@keyframes crt-hsync {
    0%, 94%  { transform: translateX(0); }
    95%      { transform: translateX(1.5px); }
    96%      { transform: translateX(-1px); }
    97%      { transform: translateX(0.5px); }
    98%, 100%{ transform: translateX(0); }
}

#crt-monitor-panel {
    flex: 0 0 auto;
    width: clamp(170px, 19vw, 260px);
    align-self: stretch; /* Dashboard padding sınırlarını doldur */
    cursor: url('Asset/image/cursor-40.png') 9 0, pointer;
    display: flex;
    align-items: stretch;
}

.crt-hud-bezel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    border: 1px solid #2a4018;
    box-shadow: 0 0 8px rgba(57,255,20,0.06);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#crt-monitor-panel:hover .crt-hud-bezel {
    border-color: #3e6022;
    box-shadow: 0 0 14px rgba(57,255,20,0.2);
}

.crt-hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    background: linear-gradient(90deg, #08100a 0%, #0d180e 50%, #08100a 100%);
    border-bottom: 1px solid #1a2c12;
    flex-shrink: 0;
}

.crt-hud-title {
    font-family: 'Courier New', monospace;
    font-size: clamp(7px, 0.9vh, 9px);
    font-weight: bold;
    letter-spacing: 2.5px;
    color: #4a8a3a;
    text-transform: uppercase;
}

.crt-hud-dot {
    color: #243a1a;
    font-size: 7px;
    line-height: 1;
    display: inline-block;
}

@keyframes crt-blink {
    0%, 45%  { opacity: 1;   color: #39ff14; text-shadow: 0 0 6px #39ff14; }
    50%, 100% { opacity: 0.15; color: #1a4a0a; text-shadow: none; }
}

.crt-hud-blink {
    animation: crt-blink 1.4s infinite;
}

.crt-hud-screen {
    background: #020602;
    position: relative;
    padding: clamp(4px, 0.55vh, 7px) clamp(7px, 1vw, 12px);
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    border-radius: 2px;
    /* İç vignette — CRT tüp kenar kararması */
    box-shadow:
        inset 0  0  60px rgba(0,0,0,0.75),
        inset 0  0  15px rgba(0,0,0,0.5),
        inset 5px  0 25px rgba(0,0,0,0.45),
        inset -5px 0 25px rgba(0,0,0,0.45),
        inset 0  8px 20px rgba(0,0,0,0.35),
        inset 0 -8px 20px rgba(0,0,0,0.35);
    /* Eski TV titreme + yatay jitter */
    animation:
        crt-tv-flicker 9s linear infinite,
        crt-hsync 12s linear infinite;
}

/* Tarama çizgileri — belirgin, eski TV */
.crt-hud-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.26) 1px,
        rgba(0,0,0,0.26) 2px
    );
    pointer-events: none;
    z-index: 3;
}

/* Fosfor parlaması + sıcak bloom */
.crt-hud-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 50% 40%,
            rgba(0,255,65,0.12) 0%,
            rgba(0,255,65,0.04) 40%,
            transparent 65%
        );
    pointer-events: none;
    z-index: 1;
}

.crt-hud-data {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.crt-hud-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: clamp(1px, 0.2vh, 2px) 0;
    border-bottom: 1px solid rgba(57,255,20,0.07);
}

.crt-hud-row:last-child {
    border-bottom: none;
}

.crt-hud-lbl {
    font-family: 'Courier New', monospace;
    font-size: clamp(8px, 1.05vh, 11px);
    color: #2e6028;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex: 0 0 auto;
    min-width: 28px;
}

.crt-hud-val {
    font-family: 'Courier New', monospace;
    font-size: clamp(8px, 1.05vh, 11px);
    color: #39ff14;
    text-shadow:
        0 0 4px  rgba(57,255,20,0.95),
        0 0 10px rgba(57,255,20,0.5),
        0 0 22px rgba(57,255,20,0.18);
    font-weight: bold;
    letter-spacing: 0.5px;
    text-align: right;
    transition: color 0.3s;
}

.crt-hud-val.crt-dim {
    color: #193019;
    text-shadow: none;
}

/* Cam yansıması + barrel distortion katmanı */
.crt-glass-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: 2px;
    background:
        /* Sol üst cam parlak şerit */
        linear-gradient(
            128deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.035) 22%,
            transparent 42%
        ),
        /* Sağ alt hafif yansıma */
        linear-gradient(
            308deg,
            rgba(255,255,255,0.03) 0%,
            transparent 28%
        ),
        /* Barrel distortion — köşe kararması (CRT tüp eğriliği) */
        radial-gradient(
            ellipse 115% 115% at 50% 50%,
            transparent 52%,
            rgba(0,0,0,0.5) 80%,
            rgba(0,0,0,0.82) 100%
        );
}

.crt-hud-footer {
    padding: 3px 8px;
    background: linear-gradient(90deg, #08100a 0%, #0d180e 50%, #08100a 100%);
    border-top: 1px solid #1a2c12;
    font-family: 'Courier New', monospace;
    font-size: clamp(6px, 0.8vh, 8px);
    color: #2e6028;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: color 0.2s, text-shadow 0.2s;
    flex-shrink: 0;
}

#crt-monitor-panel:hover .crt-hud-footer {
    color: #7aff5a;
    text-shadow: 0 0 8px rgba(57,255,20,0.55);
}

/* Küçük ekran: CRT monitörü gizle */
@media (max-width: 1000px) {
    #crt-monitor-panel { display: none; }
}
@media (max-width: 768px) {
    #crt-monitor-panel { display: none; }
}

/* =============================================================
   MOBİL RESPONSIVE — Tüm Modal / Menü Düzeltmeleri
   Hedef: portrait + landscape telefon/tablet
   ============================================================= */

/* ─── 1. STATS PANELİ (Tab menüsü) — 3 kolon → tek kolon ─── */
@media (max-height: 500px), (max-width: 600px) {
    .sp-modal {
        width: 95vw;
        max-width: 95vw;
        min-width: 0;
        max-height: 90vh;
    }
    .sp-modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sp-3col {
        flex-direction: column;
        gap: 10px;
    }
    .sp-col,
    .sp-col-left,
    .sp-col-right,
    .sp-col-center {
        width: 100% !important;
        flex: none !important;
        flex-shrink: 1 !important;
    }
    .sp-col-hdr {
        font-size: 10px;
        letter-spacing: 2px;
        padding: 4px 0 5px;
    }
    .sp-crew-grid {
        grid-template-columns: 1fr;
    }
    .sp-crew-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 8px;
        padding: 8px;
    }
    .sp-crew-photo {
        width: 40px;
        height: 50px;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .sp-crew-info {
        align-items: flex-start;
    }
    .sp-crew-name { font-size: 11px; }
    .sp-crew-lv   { font-size: 10px; }
    .sp-crew-stat { font-size: 8px; }
}

/* ─── 2. PAUSE MENÜ — silah kategorileri 3 → 2 kolon ─── */
@media (max-width: 600px) {
    .pause-container {
        max-height: 95vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pause-panels {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px;
        padding: 4px;
    }
    .pause-panel {
        padding: 5px 4px;
    }
    .pause-panel h3 {
        font-size: 8px;
        letter-spacing: 1px;
    }
    .pause-panel .weapon-list li {
        font-size: 8px;
        padding: 1px 0;
    }
}
/* Çok dar dikey ekranlarda (telefon portrait) → tek kolon */
@media (max-width: 420px) {
    .pause-panels {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 3. LEVEL-UP MODALI — kart satırı → sarılabilir veya dikey ─── */
@media (max-width: 600px) {
    .levelup-popup {
        max-width: 98vw;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 10px;
    }
    .levelup-popup h2 {
        font-size: clamp(16px, 5vw, 24px);
        letter-spacing: 2px;
        margin-bottom: 6px;
    }
    .levelup-options {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
    }
    .upgrade-card {
        width: min(260px, 90vw);
        padding: 12px 12px;
    }
    .upgrade-card .icon { font-size: 26px; margin-bottom: 6px; }
    .upgrade-card .name { font-size: 10px; }
    .upgrade-card .desc { font-size: 8px; }
    /* Level-up container (ana modal wrapper) */
    .levelup-container {
        max-width: 98vw;
        max-height: 95vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .levelup-container h2 {
        font-size: clamp(14px, 5vw, 22px);
    }
}

/* ─── 4. GAME OVER EKRANI — ek küçültmeler ─── */
@media (max-width: 600px) {
    .game-over-container {
        padding: 16px 12px;
        max-width: 96vw;
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .game-over-container h2 {
        font-size: clamp(18px, 7vw, 28px);
        letter-spacing: 3px;
        margin-bottom: 4px;
    }
    .gameover-stats-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .gameover-stat-box {
        padding: 8px 10px;
    }
    .gameover-stat-box h3 {
        font-size: 10px;
    }
    .gameover-extra-buttons {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }
    .gameover-btn {
        padding: 8px 10px;
        font-size: 10px;
        min-height: 44px;
    }
    .gameover-btn-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ─── 5. MİLİTER MODALLER (Ayarlar, Kontroller, Sıfırla) ─── */
@media (max-width: 600px) {
    .military-modal {
        max-width: 96vw;
        width: 96vw;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .military-modal.danger {
        max-width: 96vw;
    }
    .military-modal-body {
        padding: 14px 12px;
    }
    .military-modal-header {
        padding: 10px 12px;
    }
    .military-modal-header h2 {
        font-size: clamp(12px, 4vw, 17px);
        letter-spacing: 2px;
    }
    .military-modal-footer {
        padding: 10px 12px;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .military-button {
        padding: 12px 16px;
        font-size: 11px;
        min-height: 44px;
        text-align: center;
    }
    /* Ayarlar grid: tek kolon */
    .settings-grid {
        grid-template-columns: 1fr !important;
    }
    /* Kontrol satırları: wrap */
    .military-modal-body .control-row {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ─── 6. ANA MENÜ — ek dar ekran düzeltmeleri ─── */
@media (max-width: 480px) {
    .menu-content-row {
        flex-direction: column;
        align-items: center;
    }
    .menu-content-row > .menu-card {
        width: min(320px, 96vw);
    }
    .menu-separator {
        display: none;
    }
    .start-button {
        font-size: clamp(12px, 4vw, 18px);
        padding: 12px 18px;
        min-height: 44px;
    }
}

/* ─── 7. MOBİL HUD — etiket boyutları ─── */
.mobile-hud .gauge-label {
    font-size: 7px !important;
}
.mobile-hud .gauge-text {
    font-size: 8px !important;
}
.mobile-hud #magazine-display {
    font-size: 9px !important;
}

/* ─── 8. GENEL: Yatay kaydırmayı önle ─── */
@media (max-width: 600px) {
    body {
        overflow-x: hidden;
    }
    /* Tüm modal konteynerleri taşmayı önle */
    .military-modal,
    .pause-container,
    .levelup-popup,
    .levelup-container,
    .game-over-container,
    .sp-modal {
        box-sizing: border-box;
    }
}

/* =============================================================
   MOBİL PORTRAIT ANA MENÜ — TAB TABANLI DÜZEN
   Hedef: max-width 600px VE portrait (veya çok dar)
   Desktop düzenine HİÇBİR dokunma yapılmaz.
   ============================================================= */

/* --- Tab çubuğu ve panel overlay: Masaüstünde gizli --- */
.mobile-tab-bar {
    display: none;
}
.mobile-panel-overlay {
    display: none;
}

/* ─── MOBİL PORTRAIT BREAKPOINT ─── */
@media (max-width: 600px) and (orientation: portrait) {

    /* ── Kök menü: flex column, scroll yok ── */
    #mainMenu {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
    }

    /* ── Layout container: sadece başlık + butonlar ── */
    .main-layout-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        /* #mainMenu overflow: hidden → bu container scrollable olmalı */
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0 76px; /* alt: 60px tab + 16px nefes payı */
        box-sizing: border-box;
    }

    /* ── Başlık: kompakt ── */
    .menu-title-row {
        padding: 8px 16px 4px;
        flex-shrink: 0;
    }
    .menu-title-row h1 {
        font-size: clamp(22px, 8vw, 36px) !important;
        letter-spacing: 3px !important;
        line-height: 1.05;
    }
    .menu-title-row .subtitle {
        font-size: 10px;
        margin: 2px 0 4px;
        letter-spacing: 2px;
    }

    /* ── Yan panelleri (silahlar, stats, leaderboard, araçlar) GİZLE ── */
    /* Sadece butonlar sütunu görünür kalır */
    #mainMenu .menu-content-row > .menu-card,
    #mainMenu .menu-content-row > .menu-panel,
    #mainMenu .menu-content-row > .menu-separator,
    #mainMenu .menu-content-row > .leaderboard-panel {
        display: none !important;
    }

    /* ── Butonlar sütunu: tam genişlik, ortalı ── */
    .menu-content-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        overflow: visible !important;
        max-height: none !important;
        padding: 0 16px !important;
        width: 100%;
    }

    .menu-buttons-column {
        order: 0 !important;
        width: 100%;
        max-width: 340px;
        padding: 0;
        gap: 10px;
        align-items: stretch;
    }

    /* ── OYNA Butonu: Büyük ve belirgin ── */
    .start-game-wrapper {
        gap: 8px;
        margin: 0;
    }

    .start-button {
        padding: 18px 24px !important;
        font-size: clamp(16px, 5vw, 22px) !important;
        letter-spacing: 3px !important;
        min-height: 58px !important;
        border-width: 2px;
        box-shadow: 0 4px 20px rgba(107, 124, 63, 0.4), 0 0 30px rgba(107, 124, 63, 0.15) !important;
    }

    .castle-defense-btn {
        padding: 12px 16px !important;
        font-size: clamp(12px, 3.5vw, 16px) !important;
        letter-spacing: 1px !important;
        min-height: 46px !important;
    }

    .easy-mode-toggle {
        padding: 10px 14px !important;
        font-size: clamp(11px, 3.2vw, 14px) !important;
        min-height: 42px !important;
    }

    /* ── Prestige seçici: kompakt ── */
    .prestige-selector {
        gap: 8px;
        padding: 6px 0;
    }
    .prestige-label {
        font-size: 12px;
    }
    .prestige-arrow {
        min-width: 36px;
        min-height: 36px;
    }

    /* ── Meta / Rozetler / Utility butonları ── */
    .meta-button-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .meta-upgrade-cta {
        flex: 1;
        padding: 12px 10px !important;
        font-size: clamp(11px, 3.2vw, 14px) !important;
        min-height: 44px !important;
        letter-spacing: 1px;
    }

    .menu-secondary-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .badge-btn {
        flex: 1;
        padding: 10px !important;
        font-size: clamp(10px, 3vw, 13px) !important;
        min-height: 42px !important;
    }

    .menu-utility-row {
        gap: 6px !important;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    /* Mobilde Kontroller butonu gizle (klavye kontrolleri anlamsız) */
    .menu-utility-row #controlsButton {
        display: none !important;
    }

    .menu-utility-row .utility-btn {
        flex: 1;
        min-width: 80px;
        padding: 9px 8px !important;
        font-size: clamp(9px, 2.8vw, 12px) !important;
        min-height: 40px !important;
    }

    /* Sıfırla sol, Ayarlar sağ — order ile düzen */
    .menu-utility-row #resetDataButton { order: -1; }
    .menu-utility-row #settingsButton { order: 1; }

    /* ── Köşe elemanlar: kompakt konumlandırma ── */
    #mainMenu .mute-btn {
        top: 8px;
        right: 8px;
        width: 38px;
        height: 38px;
    }

    #authCorner {
        top: 8px !important;
    }

    /* ── TAB ÇUBUĞU: Sabit altta, her zaman görünür ── */
    .mobile-tab-bar {
        display: flex !important;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(180deg, rgba(22, 28, 14, 0.98) 0%, rgba(15, 19, 9, 1) 100%);
        border-top: 1px solid rgba(107, 124, 63, 0.5);
        z-index: 2050;
        align-items: stretch;
        justify-content: stretch;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
    }

    .mobile-tab-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: transparent;
        border: none;
        border-top: 2px solid transparent;
        color: rgba(139, 157, 90, 0.6);
        cursor: pointer;
        padding: 4px 2px;
        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px;
        font-family: 'Oxanium', sans-serif;
    }

    .mobile-tab-btn:active {
        background: rgba(107, 124, 63, 0.12);
    }

    .mobile-tab-btn.active {
        color: var(--khaki, #c3b091);
        border-top-color: var(--olive-light, #8b9d5a);
        background: rgba(107, 124, 63, 0.1);
    }

    .mobile-tab-icon {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-tab-label {
        font-size: 8px;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1;
    }

    /* ── PANEL OVERLAY: Tab'a basınca yukarı kayar ── */
    .mobile-panel-overlay {
        display: flex !important;
        position: absolute;
        bottom: 60px; /* Tab çubuğunun üstü */
        left: 0;
        right: 0;
        top: 0;
        background: linear-gradient(180deg, rgba(22, 28, 14, 0.99) 0%, rgba(15, 19, 9, 1) 100%);
        border-top: 1px solid rgba(107, 124, 63, 0.4);
        z-index: 2040;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        pointer-events: none;
    }

    .mobile-panel-overlay.open {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mobile-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(107, 124, 63, 0.3);
        background: rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }

    .mobile-panel-title {
        font-family: 'Oxanium', sans-serif;
        font-size: 13px;
        letter-spacing: 3px;
        color: var(--olive-light, #8b9d5a);
        text-transform: uppercase;
    }

    .mobile-panel-close {
        background: transparent;
        border: 1px solid rgba(107, 124, 63, 0.4);
        color: var(--khaki, #c3b091);
        font-size: 16px;
        width: 36px;
        height: 36px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
        font-family: sans-serif;
    }

    .mobile-panel-close:active {
        background: rgba(107, 124, 63, 0.2);
        border-color: var(--olive-light, #8b9d5a);
    }

    .mobile-panel-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 12px;
    }

    /* ── Panel içeriği: silahlar grid ── */
    .mobile-panel-content .weapons-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px 12px;
    }

    .mobile-panel-content .weapon-group {
        background: rgba(38, 48, 28, 0.6);
        border: 1px solid rgba(107, 124, 63, 0.25);
        border-radius: 5px;
        padding: 8px;
        break-inside: avoid;
    }

    /* Gizli füzyon grubu tam genişlik */
    .mobile-panel-content .weapon-group.gizli-fuzyon {
        grid-column: 1 / -1;
    }

    .mobile-panel-content .weapon-group h4 {
        font-size: 9px;
        letter-spacing: 2px;
        margin: 0 0 5px;
        color: var(--olive-light, #8b9d5a);
        text-transform: uppercase;
    }

    .mobile-panel-content .weapon-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-panel-content .weapon-list li {
        font-size: 9px;
        padding: 2px 0;
        display: flex;
        align-items: center;
        gap: 4px;
        border-bottom: 1px solid rgba(107, 124, 63, 0.08);
    }

    .mobile-panel-content .weapon-list li:last-child {
        border-bottom: none;
    }

    .mobile-panel-content .weapon-icon {
        font-size: 11px;
        flex-shrink: 0;
    }

    /* Füzyon grid: 3 kolon */
    .mobile-panel-content .fusion-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
    }

    /* ── Panel içeriği: liderlik tablosu ── */
    .mobile-panel-content .leaderboard-content {
        max-height: none;
    }

    /* ── Panel içeriği: stats ── */
    .mobile-panel-content .stat-row {
        padding: 7px 16px;
        border-bottom: 1px solid rgba(107, 124, 63, 0.1);
    }

    .mobile-panel-content .stat-label {
        font-size: 10px;
    }

    .mobile-panel-content .stat-value {
        font-size: 11px;
    }

    /* ── Panel içeriği: araçlar ── */
    .mobile-panel-content .vehicle-category {
        padding: 0 8px;
    }

    .mobile-panel-content .vehicle-selection-container {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mobile-panel-content .vehicle-upgrade-inline {
        display: block;
        padding: 8px 16px;
    }

    /* ── Panel içeriği: ayarlar (utility butonlar grubu) ── */
    .mobile-settings-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }

    .mobile-settings-list .menu-button,
    .mobile-settings-list .utility-btn {
        width: 100%;
        padding: 14px 16px !important;
        font-size: 12px !important;
        min-height: 48px !important;
        text-align: left;
        letter-spacing: 2px;
    }

    /* ── Mute + auth köşesi: z-index düzeltme ── */
    #mainMenu .mute-btn,
    #authCorner {
        z-index: 2100;
    }
}

/* ─── Küçük portrait (< 380px genişlik) ─── */
@media (max-width: 380px) and (orientation: portrait) {

    .mobile-tab-bar {
        height: 54px;
    }

    .main-layout-container {
        padding-bottom: 70px; /* 54px tab + 16px nefes payı */
    }

    .mobile-panel-overlay {
        bottom: 54px;
    }

    .mobile-tab-icon {
        font-size: 16px;
    }

    .mobile-tab-label {
        font-size: 7px;
    }

    .start-button {
        padding: 14px 18px !important;
        font-size: clamp(13px, 4.5vw, 18px) !important;
        min-height: 50px !important;
    }
}


/* =============================================================
   MOBİL PORTRAIT — KAPSAMLI EKRAN DÜZELTMELERİ v2
   Tüm oyun ekranları: Pause, Level-Up, Game Over, Stats Panel
   Desktop: DOKUNULMADI. Sadece portrait/landscape mobile.
   ============================================================= */

/* Pause tab yapıları — masaüstünde gizli */
.pause-tab-bar { display: none; }
.pause-tab-panel { display: block; }

/* Stats panel tab yapıları — masaüstünde gizli */
.sp-tab-bar { display: none; }

/* ─────────────────────────────────────────────────────────────
   1. PAUSE MENÜ — Portrait Phone
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) {

    .pause-container {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .pause-header {
        flex-direction: column !important;
        gap: 5px;
        padding: 8px 12px !important;
    }
    .pause-header h2 {
        font-size: 13px !important;
        letter-spacing: 3px !important;
    }
    .pause-stats { justify-content: center; gap: 8px; }
    .pause-stat { font-size: 11px !important; padding: 3px 8px !important; }

    /* Tab çubuğu */
    .pause-tab-bar {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(107, 124, 63, 0.4);
        background: rgba(20, 25, 14, 0.98);
        -ms-overflow-style: none;
    }
    .pause-tab-bar::-webkit-scrollbar { display: none; }

    .pause-tab-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 14px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: rgba(139, 157, 90, 0.6);
        font-family: 'Oxanium', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        min-height: 44px;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .pause-tab-btn:active { background: rgba(107, 124, 63, 0.1); }
    .pause-tab-btn.pause-tab-active {
        color: var(--khaki, #c3b091);
        border-bottom-color: var(--olive-light, #8b9d5a);
        background: rgba(107, 124, 63, 0.08);
    }
    .pause-tab-icon { font-size: 14px; }

    #pause-main-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    /* Tab modu aktifken (JS pause-tab-mode class ekler): sadece .pause-panel-active görünür */
    #pause-main-content.pause-tab-mode .pause-panel {
        display: none !important;
    }
    #pause-main-content.pause-tab-mode .pause-panel.pause-panel-active {
        display: block !important;
    }

    .pause-panels {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        padding: 6px 8px !important;
    }
    .pause-panel.gizli-fuzyon { grid-column: span 2 !important; }
    .pause-panel { padding: 5px 6px !important; }
    .pause-panel h3 {
        font-size: 9px !important;
        letter-spacing: 1px !important;
        margin-bottom: 3px !important;
    }
    .pause-panel .weapon-list li { font-size: 9px !important; padding: 2px 0 !important; }
    .pause-panel .weapon-icon { font-size: 11px !important; }

    .pause-tip {
        padding: 6px 10px !important;
        margin: 4px 8px !important;
        font-size: 10px !important;
    }

    .pause-footer {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px 10px 10px !important;
        flex-shrink: 0;
    }

    .volume-controls-panel { max-width: 100% !important; padding: 6px 8px !important; gap: 6px !important; }
    .volume-row { grid-template-columns: 60px 1fr 36px !important; gap: 6px !important; }
    .volume-label { font-size: 10px !important; }
    .volume-slider-wide { height: 20px !important; }
    .volume-slider-wide::-webkit-slider-thumb { width: 22px !important; height: 22px !important; }
    .volume-value { font-size: 10px !important; }

    .pause-buttons {
        flex-direction: row !important;
        gap: 8px !important;
        width: 100%;
        justify-content: stretch !important;
    }
    .pause-btn {
        flex: 1;
        padding: 12px 8px !important;
        font-size: 11px !important;
        min-height: 44px !important;
        text-align: center;
        white-space: nowrap;
        letter-spacing: 1px !important;
    }
}

/* Pause — Landscape Phone */
@media (max-height: 400px) {
    .pause-container { max-height: 98vh; overflow-y: auto; }
    .pause-header { flex-direction: row; padding: 5px 12px !important; }
    .pause-header h2 { font-size: 12px !important; }
    .pause-panels { grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; padding: 4px 6px !important; }
    .pause-panel h3 { font-size: 8px !important; margin-bottom: 2px !important; }
    .pause-panel .weapon-list li { font-size: 8px !important; padding: 1px 0 !important; }
    .pause-tip { display: none !important; }
    .pause-footer { flex-direction: row !important; gap: 8px !important; padding: 5px 10px !important; }
    .volume-controls-panel { max-width: 280px; padding: 5px 8px !important; gap: 4px !important; }
    .volume-row { grid-template-columns: 50px 1fr 30px !important; gap: 4px !important; }
    .volume-label { font-size: 9px !important; }
    .volume-slider-wide { height: 14px !important; }
    .pause-buttons { flex-direction: column; gap: 4px; }
    .pause-btn { padding: 6px 10px !important; font-size: 10px !important; min-height: 36px !important; }
}

/* ─────────────────────────────────────────────────────────────
   2. LEVEL-UP MODALI — Portrait Phone
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) {

    .level-up-screen {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
    }

    .levelup-container {
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        padding: 12px 12px env(safe-area-inset-bottom, 16px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .levelup-container h2 {
        font-size: clamp(15px, 5.5vw, 20px) !important;
        letter-spacing: 3px !important;
        margin-bottom: 4px !important;
        padding-bottom: 8px !important;
        flex-shrink: 0 !important;
    }

    #levelUpInfo { font-size: 11px !important; margin-bottom: 10px !important; flex-shrink: 0 !important; }

    .levelup-options {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 6px !important;
        padding: 0 !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        align-content: start !important;
        -webkit-overflow-scrolling: touch;
    }

    /* card-wrapper: grid hücresini doldur */
    .card-wrapper {
        width: 100% !important;
        align-items: stretch !important;
    }

    /* upgrade-button: kompakt dikey kart — max boyut sınırlı */
    .upgrade-button {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 120px !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 8px 6px !important;
        gap: 4px !important;
        min-height: 0 !important;
        text-align: center !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    .upgrade-icon {
        font-size: 22px !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }

    .upgrade-text {
        text-align: center !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .upgrade-text strong {
        font-size: 10px !important;
        margin-bottom: 1px !important;
        white-space: normal !important;
        letter-spacing: 0.3px !important;
    }
    .upgrade-text span {
        font-size: 7.5px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    /* Hover animasyonu: mobilde kapat */
    .upgrade-button:not(.max-level):hover .upgrade-icon {
        transform: scale(1.05) !important;
        animation: none !important;
    }

    #levelup-current-weapons { margin-top: 8px; flex-shrink: 0 !important; overflow: hidden; }
    .levelup-weapons-grid { gap: 4px !important; }
    .levelup-weapons-grid .weapon-slot-box { padding: 4px !important; }

    .levelup-buttons {
        gap: 8px !important;
        margin-top: 10px !important;
        flex-direction: row !important;
        align-items: stretch !important;
        flex-shrink: 0 !important;
    }
    .levelup-btn {
        flex: 1 !important;
        padding: 12px 8px !important;
        font-size: 11px !important;
        min-height: 44px !important;
        letter-spacing: 1px !important;
        margin-top: 0 !important;
        text-align: center !important;
    }

    .new-tag { top: -6px !important; right: -6px !important; font-size: 7px !important; }
    #fusion-weapon-preview { gap: 8px !important; margin: 8px 0 !important; }

    #discardWeaponScreen .levelup-container,
    #fusionConfirmScreen .levelup-container {
        min-height: auto !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        border-radius: 0 0 4px 4px !important;
        margin-top: 5dvh !important;
        padding: 16px 14px !important;
    }

    #discard-weapon-options {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #discard-weapon-options .upgrade-card {
        width: 100% !important;
        flex-direction: row !important;
        min-height: 56px !important;
        padding: 10px 12px !important;
    }

    .levelup-weapons-label { font-size: 9px !important; letter-spacing: 2px !important; }
    .levelup-weapons-grid { flex-wrap: wrap !important; gap: 4px !important; }
    .levelup-weapons-grid .weapon-slot-box { min-width: 52px !important; }
}

/* Level-Up — Landscape Phone */
@media (max-height: 400px) {
    .levelup-container { max-height: 95vh !important; overflow-y: auto !important; padding: 8px 12px 10px !important; }
    .levelup-container h2 { font-size: 14px !important; margin-bottom: 4px !important; padding-bottom: 5px !important; }
    .levelup-options {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 4px 0 !important;
    }
    /* Landscape: normal dikey düzen, sola kaydırılabilir */
    .card-wrapper { width: 130px !important; flex-shrink: 0 !important; }
    .upgrade-button {
        width: 130px !important;
        max-width: 130px !important;
        flex-direction: column !important;
        padding: 10px !important;
        min-height: auto !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .upgrade-icon { font-size: 22px !important; margin-bottom: 5px !important; width: auto !important; }
    .upgrade-text { text-align: center !important; }
    .upgrade-text strong { font-size: 9px !important; }
    .upgrade-text span { font-size: 7px !important; }
    .levelup-buttons { margin-top: 8px !important; }
    .levelup-btn { padding: 8px 12px !important; font-size: 10px !important; min-height: 38px !important; margin-top: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────
   3. GAME OVER EKRANI — Portrait Phone
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) {

    .game-over-screen { align-items: flex-start !important; padding-top: 0 !important; }

    .game-over-container {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 14px 12px 80px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        position: relative !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .game-over-container h2 { font-size: clamp(20px, 8vw, 30px) !important; letter-spacing: 4px !important; margin-bottom: 4px !important; }
    .final-score-display { font-size: 14px !important; margin: 3px 0 6px !important; }
    .rewards-row { gap: 8px !important; margin-bottom: 6px !important; }

    .gameover-stats-grid { grid-template-columns: 1fr !important; gap: 8px !important; margin: 8px 0 !important; width: 100%; }
    .gameover-stat-box { padding: 8px 10px !important; }
    .gameover-stat-box h3 { font-size: 10px !important; letter-spacing: 2px !important; margin-bottom: 6px !important; }

    .gameover-extra-buttons { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; width: 100%; }
    .gameover-btn.meta-btn,
    .gameover-btn.badge-btn {
        flex: 1;
        min-width: 130px;
        min-height: 44px !important;
        font-size: 11px !important;
    }

    .ng-plus-section { margin-top: 10px !important; }
    .gameover-btn.ng-plus-btn { min-width: 160px !important; font-size: 12px !important; }

    /* Ana butonlar: yapışık alt bar */
    .gameover-buttons {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 10px 12px 12px !important;
        background: linear-gradient(0deg, rgba(10, 8, 5, 0.98) 0%, rgba(10, 8, 5, 0.92) 100%) !important;
        border-top: 1px solid rgba(107, 124, 63, 0.4) !important;
        z-index: 10 !important;
        margin-top: 0 !important;
        box-sizing: border-box;
    }
    .gameover-btn.primary,
    .gameover-btn.secondary,
    .gameover-btn.prestige {
        flex: 1 !important;
        min-height: 48px !important;
        font-size: 11px !important;
        padding: 10px 6px !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }
}

/* Game Over — Landscape Phone */
@media (max-height: 400px) {
    .game-over-container { max-height: 96vh !important; overflow-y: auto !important; padding: 10px 14px !important; max-width: 98vw !important; }
    .game-over-container h2 { font-size: clamp(16px, 5vw, 22px) !important; letter-spacing: 3px !important; }
    .gameover-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin: 6px 0 !important; }
    .gameover-stat-box { padding: 6px 8px !important; }
    .gameover-stat-box h3 { font-size: 9px !important; }
    .gameover-buttons { flex-direction: row !important; gap: 6px !important; margin-top: 8px !important; }
    .gameover-btn { padding: 8px 10px !important; font-size: 10px !important; min-height: 38px !important; }
}

/* ─────────────────────────────────────────────────────────────
   4. STATS PANEL — Portrait Phone Tab Sistemi
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) {

    .sp-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .sp-modal-body { padding: 0 !important; flex: 1; overflow: hidden; display: flex; flex-direction: column; }

    .sp-tab-bar {
        display: flex;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(42, 56, 32, 0.8);
        background: rgba(14, 28, 8, 0.98);
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sp-tab-bar::-webkit-scrollbar { display: none; }

    .sp-tab-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 6px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: rgba(90, 154, 90, 0.5);
        font-family: 'Oxanium', monospace;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        cursor: pointer;
        min-height: 50px;
        white-space: nowrap;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .sp-tab-btn:active { background: rgba(42, 56, 32, 0.3); }
    .sp-tab-btn.sp-tab-active { color: #a0e060; border-bottom-color: #6a9a4a; background: rgba(42, 56, 32, 0.2); }
    .sp-tab-icon { font-size: 16px; line-height: 1; }
    .sp-tab-label { font-size: 8px; letter-spacing: 1px; }

    .sp-3col { flex-direction: column !important; gap: 0 !important; flex: 1; overflow: hidden; }

    .sp-col,
    .sp-col-left,
    .sp-col-right,
    .sp-col-center {
        width: 100% !important;
        flex: none !important;
        flex-shrink: 1 !important;
        display: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
    }

    .sp-col.sp-col-active,
    .sp-col-left.sp-col-active,
    .sp-col-right.sp-col-active,
    .sp-col-center.sp-col-active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        padding: 8px !important;
    }

    .sp-col-hdr { display: none !important; }

    .sp-crew-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .sp-crew-card { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 8px !important; padding: 8px !important; }
    .sp-crew-photo { width: 38px !important; height: 48px !important; margin-bottom: 0 !important; flex-shrink: 0 !important; }
    .sp-crew-info { align-items: flex-start !important; }
    .sp-crew-name { font-size: 10px !important; }
    .sp-crew-lv { font-size: 9px !important; }
    .sp-crew-stat { font-size: 8px !important; }
    .sp-crew-passive { font-size: 8px !important; }

    .sp-grid { columns: 1 !important; }
    .sp-grid .sp-card { margin-bottom: 6px !important; }
    .sp-card-hdr { font-size: 9px !important; padding: 4px 7px !important; }
    .sp-lbl { font-size: 9px !important; }
    .sp-val { font-size: 10px !important; min-width: 60px !important; }
    .sp-total-val { font-size: 11px !important; }

    .sp-wpn-grid { gap: 4px !important; }
    .sp-wpn-card { padding: 5px 7px !important; gap: 7px !important; }
    .sp-wpn-icon { font-size: 18px !important; width: 24px !important; }
    .sp-wpn-name { font-size: 11px !important; }
    .sp-wpn-lv { font-size: 14px !important; padding: 2px 6px !important; min-width: 24px !important; }

    .sp-modal-footer { flex-shrink: 0; padding: 8px 12px 12px !important; }
}

/* Stats Panel — Landscape Phone */
@media (max-height: 400px) {
    .sp-modal { width: 98vw !important; max-width: 98vw !important; max-height: 96vh !important; }
    .sp-modal-body { overflow-y: auto !important; }
    .sp-3col { flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; overflow-x: auto !important; }
    .sp-col,
    .sp-col-left,
    .sp-col-right,
    .sp-col-center {
        width: auto !important;
        flex-shrink: 0 !important;
        min-width: 200px !important;
        max-width: 280px !important;
        overflow-y: auto !important;
        max-height: 80vh !important;
        display: flex !important;
    }
    .sp-col-left { min-width: 240px !important; }
    .sp-crew-card { flex-direction: row !important; padding: 6px !important; gap: 6px !important; }
    .sp-crew-photo { width: 34px !important; height: 42px !important; margin-bottom: 0 !important; }
    .sp-crew-name { font-size: 10px !important; }
    .sp-crew-stat { font-size: 7px !important; }
    .sp-grid { columns: 1 !important; }
    .sp-wpn-card { padding: 4px 6px !important; }
}

/* ─────────────────────────────────────────────────────────────
   5. MİLİTER MODALLER — Portrait ince ayar
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) {
    .military-modal {
        border-radius: 0 !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        display: flex;
        flex-direction: column;
    }
    .military-modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .settings-slider { height: 24px !important; -webkit-appearance: none !important; }
    .settings-slider::-webkit-slider-thumb { width: 26px !important; height: 26px !important; }
    .settings-slider::-moz-range-thumb { width: 26px !important; height: 26px !important; }
}

/* ─────────────────────────────────────────────────────────────
   6. PASSIVE SEÇIM KARTLARI — Portrait ince ayar
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) {
    .passive-option-card {
        width: 100% !important;
        min-height: 56px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }
    .passive-option-card .passive-icon {
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* =============================================================
   MOBİL PERFORMANS OPTİMİZASYONU — .mobile-hud
   GPU/CPU yükü azaltma: backdrop-filter, shimmer, filter animasyonları
   ============================================================= */

/* ── 1. backdrop-filter: blur() devre dışı — GPU compositor katmanı oluşturur ──
   Mobil GPU'da pahalı işlem. Şeffaf arka plan ile aynı görsel etki sağlanır. */
.mobile-hud .pause-container,
.mobile-hud .military-modal,
.mobile-hud .mobile-panel-overlay,
.mobile-hud #perfOverlay,
.mobile-hud .sp-modal,
.mobile-hud .tooltip-box,
.mobile-hud [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── 2. Sürekli çalışan shimmer animasyonları durdur ──
   Health bar ::after ve ::before shimmer geçişleri her frame GPU iter.
   Gameplay sırasında görsel fark ihmal edilebilir seviyede. */
.mobile-hud #health-bar::after,
.mobile-hud #health-bar::before,
.mobile-hud #armor-bar::after,
.mobile-hud #xp-bar::after,
.mobile-hud #xp-bar::before,
.mobile-hud .skill-ready-shimmer,
.mobile-hud .skill-button::after {
    animation: none !important;
}

/* ── 3. Performans maliyeti yüksek sürekli animasyonları durdur ──
   .juice-pulse filter:drop-shadow içerir → GPU shader maliyeti yüksek */
.mobile-hud .juice-pulse {
    animation: none !important;
}

/* ── 4. filter: drop-shadow() genel devre dışı ──
   CSS filter yeni bir compositor katmanı oluşturur. Mobilde devre dışı. */
.mobile-hud .badge-item .badge-icon,
.mobile-hud .crew-card-dossier,
.mobile-hud [style*="filter: drop-shadow"] {
    filter: none !important;
}

/* ── 5. will-change sıfırla — gereksiz GPU katman tahsisi önle ──
   will-change: opacity açık kalan elemanlarda GPU bellek ayırır */
.mobile-hud #damageOverlay,
.mobile-hud #screen-flash {
    will-change: auto !important;
}

/* =============================================================
   GÖREV #29 — Kilitle ve Banla butonları tek satırda yan yana
   card-actions flex-direction: column → row
   ============================================================= */
@media (max-width: 600px) {
    .card-actions {
        flex-direction: row !important;
        min-height: auto !important;
        gap: 3px !important;
    }
    .card-action-btn {
        flex: 1 !important;
        font-size: 9px !important;
        padding: 4px 4px !important;
        white-space: nowrap !important;
    }
}

/* =============================================================
   GÖREV #24 — Mobil panel overlay başlığı çok yukarda
   iOS safe-area-inset-top ile header'ı notch'tan aşağıya çek
   ============================================================= */
@media (max-width: 600px) and (orientation: portrait) {
    .mobile-panel-overlay {
        top: 0 !important;
        padding-top: max(0px, env(safe-area-inset-top)) !important;
    }
    .mobile-panel-header {
        padding-top: max(12px, calc(env(safe-area-inset-top) + 4px)) !important;
    }
}

/* =============================================================
   GÖREV #23 — Hapishane temizleme (crew selection) modalı taşıyor
   #crewSelectionModal overflow: auto zaten var ama içerik yükseklik
   sınırı yok → mobilde max-height + scroll ekle
   ============================================================= */
@media (max-width: 600px) {
    #crewSelectionModal {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    #crewSelectionModal .desk {
        overflow: hidden !important;
        max-height: none !important;
        flex-shrink: 0 !important;
    }
    #crewSelectionModal .fan {
        overflow: visible !important;
    }
}

/* =============================================================
   GÖREV #27 — Araç upgrade paneli mobil overlay'de taşıyor
   vehicleUpgradePanel max-height ve scroll ile sınırla
   ============================================================= */
@media (max-width: 600px) and (orientation: portrait) {
    .mobile-panel-content .vehicle-upgrade-inline {
        max-height: 45vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }
    .mobile-panel-content .upgrade-rows {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    .mobile-panel-content .upgrade-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 4px 0 !important;
        flex-wrap: wrap !important;
    }
    .mobile-panel-content .upgrade-label {
        font-size: 10px !important;
        min-width: 60px !important;
        flex-shrink: 0 !important;
    }
    .mobile-panel-content .buy-upgrade-button {
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 16px !important;
    }
}

/* =============================================================
   GÖREV #26 — Araçlar sekmesi para göstergesi
   Mobile panel overlay içinde vehicles açıldığında para miktarı
   panel title satırının yanında gösterilir (JS ile eklenir),
   fallback olarak CSS ile .mobile-vehicles-money görünür yap
   ============================================================= */
.mobile-vehicles-money {
    font-family: 'Oxanium', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 1px;
    background: rgba(60, 40, 0, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 4px;
    padding: 3px 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* =============================================================
   GÖREV #38 — Panel overlay açıkken mute ve auth gizle
   Panel z-index:2040, butonlar z-index:2100 — görsel çakışma var.
   .open sınıfı overlay'e eklenince fixed butonları gizle.
   ============================================================= */
@media (max-width: 600px) and (orientation: portrait) {
    /* Panel overlay açıkken üst köşe butonlarını gizle */
    .mobile-panel-overlay.open ~ * #muteButton,
    .mobile-panel-overlay.open ~ * #authCorner,
    body:has(.mobile-panel-overlay.open) #mainMenu .mute-btn,
    body:has(.mobile-panel-overlay.open) #authCorner {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease !important;
    }
}

/* =============================================================
   GÖREV #39 — PWA "Ana Ekrana Ekle" butonu — askeri tema
   beforeinstallprompt ile yakalanır, JS tarafından eklenir.
   ============================================================= */
#pwaInstallBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(160deg, rgba(30, 40, 18, 0.92) 0%, rgba(15, 22, 8, 0.97) 100%);
    border: 1px solid rgba(107, 160, 63, 0.6);
    border-top: 1px solid rgba(160, 220, 90, 0.3);
    color: var(--olive-light, #8b9d5a);
    font-family: 'Oxanium', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 8px rgba(80, 140, 40, 0.15),
                inset 0 1px 0 rgba(180, 220, 100, 0.08);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

#pwaInstallBtn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        110deg,
        transparent 0px, transparent 8px,
        rgba(107, 160, 63, 0.04) 8px, rgba(107, 160, 63, 0.04) 9px
    );
    pointer-events: none;
}

#pwaInstallBtn .pwa-install-icon {
    font-size: 16px;
    flex-shrink: 0;
}

#pwaInstallBtn:active {
    background: linear-gradient(160deg, rgba(60, 80, 30, 0.95) 0%, rgba(30, 45, 15, 0.98) 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 12px rgba(120, 200, 60, 0.25),
                inset 0 1px 0 rgba(200, 240, 120, 0.15) !important;
    transform: scale(0.97);
}

/* Ana menüde butonu konumlandır — portrait mobil */
@media (max-width: 600px) and (orientation: portrait) {
    #pwaInstallBtn {
        width: calc(100% - 32px);
        max-width: 280px;
        justify-content: center;
        margin: 8px auto 0;
    }
}