/* --------------------------------------------------
   VISCORA - CSS DESIGN SYSTEM & UI LAYERS
-------------------------------------------------- */

:root {
    --bg-dark: #0a0a0f;
    --bg-card: rgba(18, 18, 28, 0.75);
    --border-glow: rgba(255, 255, 255, 0.08);
    
    /* Viskozite Durum Renkleri */
    --color-normal: #10b981; /* Canlı Emerald */
    --color-low: #06b6d4;    /* Canlı Cyan/Aqua */
    --color-high: #d946ef;   /* Canlı Fuşya/Mor */
    --color-hazard: #ef4444; /* Parlak Kırmızı */
    
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    
    --font-game: 'Outfit', sans-serif;
    --glow-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

/* Temel Sıfırlamalar */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    outline: none;
}

/* Menüler ve alt elemanlarında dikey kaydırmayı serbest bırak (Oyun kontrolleri hariç) */
#start-screen, #start-screen *,
#codex-screen, #codex-screen *,
#community-screen, #community-screen *,
#pause-screen, #pause-screen *,
#win-screen, #win-screen *,
#gameover-screen, #gameover-screen *,
#shop-screen, #shop-screen * {
    touch-action: pan-y !important;
}

/* Ses ve Boyut sürgüleri için yatay kaydırma */
input[type="range"] {
    touch-action: pan-x !important;
}

/* Ekran Kapsayıcılarının Kaydırma Çubukları (Modern & Geniş) */
.screen::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.screen::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}
.screen::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.35); /* Canlı Cyan */
    border: 2px solid rgba(10, 10, 15, 0.9);
    border-radius: 6px;
    transition: background 0.2s ease;
}
.screen::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.65);
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-dark);
    font-family: var(--font-game);
    color: var(--text-primary);
}

/* Menü ekranlarının kaydırılabilir olması için */
.screen.scrollable {
    overflow-y: auto;
    align-items: flex-start;
    padding: 1.5rem 0;
}

/* Ekran Kapsayıcıları */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    overflow-y: auto;
    transition: opacity 0.3s ease, visibility 0.3s;
    background: radial-gradient(circle at center, rgba(16, 16, 28, 0.8) 0%, var(--bg-dark) 100%);
    box-sizing: border-box;
}

.screen:not(.hidden) {
    touch-action: pan-y !important;
}

#start-screen {
    background: transparent;
    align-items: flex-start;
    padding: 1rem 0 76px 0; /* Bottom space reserved for AdMob banner */
    justify-content: center;
}

/* Codex ve Community ekranları merkezi hizalanmış kalmalı */
#codex-screen,
#community-screen {
    align-items: center;
    overflow-y: auto;
    padding: 1rem 0;
}

.screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Yönlendirme Uyarısı */
#orientation-warning {
    display: none;
}

/* Dikey (portrait) modda yönlendirme kuralları */
@media (orientation: portrait) {
    /* Oyunda veya editörde iken dikey tutulursa yönlendirme uyarısı göster ve oyunu gizle */
    body.game-active #orientation-warning {
        display: flex !important;
        z-index: 99999 !important;
    }
    body.game-active #game-container {
        display: none !important;
    }
}

.warning-card {
    padding: 2rem;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-icon-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    color: var(--color-low);
    animation: rotatePhone 2.5s ease-in-out infinite;
}

.phone-icon {
    width: 100%;
    height: 100%;
}

@keyframes rotatePhone {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(90deg); }
    70% { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}

/* Yatay Modda Uyarının Gizlenmesi */
@media (orientation: landscape) {
    #orientation-warning {
        display: none !important;
    }
}

/* Oyun Konteyneri */
#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #050508;
    overflow: hidden;
}

/* Yüksek Teknoloji CRT/Scanline Ekran Efekti */
#game-container::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%);
    background-size: 100% 3px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0.22;
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Cam Görünümlü Kart Tasarımları (Glassmorphism) */
.menu-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 3rem;
    border-radius: 24px;
    width: 480px;
    max-width: 90%;
    max-height: none;
    text-align: center;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.65), 
        0 0 30px rgba(255, 255, 255, 0.02) inset,
        -6px -6px 25px rgba(6, 182, 212, 0.14),
        6px 6px 25px rgba(217, 70, 239, 0.14);
    transform: translateY(0) scale(1);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
    flex-shrink: 0;
}

.menu-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.75), 
        0 0 40px rgba(255, 255, 255, 0.04) inset,
        -8px -8px 30px rgba(6, 182, 212, 0.2),
        8px 8px 30px rgba(217, 70, 239, 0.2);
}

.pulse-border {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.15), 0 20px 50px rgba(0, 0, 0, 0.5);
}

.hazard-border {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.15), 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Yazı Stilleri */
.game-title {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: 0.4rem;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 50%, var(--color-low) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.2rem;
    filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.3));
}

.game-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.win-title {
    background: linear-gradient(135deg, #fff 0%, var(--color-low) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gameover-title {
    background: linear-gradient(135deg, #fff 0%, var(--color-hazard) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Ödüllü Reklam Butonları */
.rewarded-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    animation: rewardedPulse 2s ease-in-out infinite;
}
.rewarded-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}
.rewarded-btn:hover::after {
    left: 120%;
    transition: all 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}
.rewarded-btn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: scale(1.03);
}
.rewarded-btn:active {
    transform: scale(0.97);
}
.rewarded-btn.skip-btn {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%) !important;
    border: 1px solid rgba(6, 182, 212, 0.6) !important;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    animation: rewardedPulseSkip 2s ease-in-out infinite;
}
.rewarded-btn.skip-btn:hover {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #0891b2 100%) !important;
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
.rewarded-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(0,0,0,0.3);
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@keyframes rewardedPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
    50% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
}
@keyframes rewardedPulseSkip {
    0%, 100% { box-shadow: 0 0 12px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
    50% { box-shadow: 0 0 22px rgba(6, 182, 212, 0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
}

/* Talimatlar Paneli */
.instructions {
    position: relative;
    margin-bottom: 2rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.02);
}

.codex-btn {
    display: block;
    margin: 0 auto 0.7rem auto;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #06b6d4;
    border-radius: 8px;
    padding: 5px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.1);
    letter-spacing: 0.05em;
}
.codex-btn:hover {
    background: rgba(6, 182, 212, 0.3);
    border-color: #06b6d4;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.35);
    transform: translateY(-1px);
}
.codex-btn:active {
    transform: translateY(0);
}

.codex-card {
    width: 92%;
    max-width: 680px;
    height: auto;
    min-height: 0;
    max-height: min(520px, 88vh);
    display: flex;
    flex-direction: column;
    padding: 1.5rem !important;
    box-sizing: border-box;
    overflow: hidden;
}

.codex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
}
.codex-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
.codex-header .close-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}
.codex-header .close-btn:hover {
    transform: scale(1.15);
}

.codex-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.codex-tab-btn {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.codex-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.codex-tab-btn.active {
    background: rgba(217, 70, 239, 0.15);
    border-color: #d946ef;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(217, 70, 239, 0.2);
}

.codex-content-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
}
/* Scrollbar styling - Codex (Modern & Geniş) */
.codex-content-container::-webkit-scrollbar {
    width: 10px;
}
.codex-content-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}
.codex-content-container::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.35); /* Cyan */
    border: 2px solid rgba(10, 10, 15, 0.9);
    border-radius: 6px;
}
.codex-content-container::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.65);
}

.codex-tab-content {
    display: none;
    flex-direction: column;
    gap: 12px;
}
.codex-tab-content.active {
    display: flex;
}

.codex-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    transition: background 0.2s ease;
}
.codex-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.codex-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05);
}
.codex-icon .icon-svg {
    margin-right: 0 !important;
    top: 0 !important;
    width: 22px !important;
    height: 22px !important;
}
.codex-icon.green-icon {
    color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.codex-icon.blue-icon {
    color: #00f2fe;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.35);
    border: 1px solid rgba(0, 242, 254, 0.35);
}
.codex-icon.pink-icon {
    color: #e100ff;
    box-shadow: 0 0 12px rgba(225, 0, 255, 0.35);
    border: 1px solid rgba(225, 0, 255, 0.35);
}

.codex-info {
    text-align: left;
}
.codex-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
}
.codex-info p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.35;
}

.inst-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.6rem 0;
    display: flex;
    align-items: center;
}

.key {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0 8px;
    font-weight: 600;
    color: #fff;
    margin-right: 8px;
    font-size: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    line-height: 1;
    box-sizing: border-box;
}

.inst-or {
    margin-right: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.inst-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Buton Tasarımları */
.menu-btn {
    font-family: var(--font-game);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    padding: 1.15rem 2.8rem;
    border-radius: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    width: 100%;
    margin-top: 0.5rem;
}

.primary-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-low) 0%, #0891b2 100%);
    color: #fff;
    box-shadow: var(--glow-shadow);
}

.primary-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.13);
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}

.primary-btn:hover::after {
    left: 120%;
    transition: all 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}

.primary-btn:hover {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.6);
    transform: scale(1.02);
}

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

.secondary-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.danger-btn {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-hazard);
    border: 1px solid rgba(239, 68, 68, 0.25);
    font-size: 0.95rem;
}

.danger-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
}

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

/* Ana Menü Ayarlar Bölümü */
.menu-settings {
    display: flex;
    justify-content: center;
    margin-bottom: 0.8rem;
    width: 100%;
}

/* Premium Settings Control */
.settings-control {
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 14px;
    padding: 8px 16px;
    gap: 12px;
    width: 100%;
    margin-bottom: 0.8rem;
    box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.05);
    box-sizing: border-box;
}

.inline-settings {
    margin-top: 0.5rem;
}

.sound-toggle-mini-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-low);
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
    padding: 4px;
    transition: transform 0.2s;
    touch-action: auto !important;
    pointer-events: auto !important;
}

.sound-toggle-mini-btn:active {
    transform: scale(0.85);
}

.sound-toggle-mini-btn.muted {
    color: var(--color-hazard);
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.slider-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
    min-width: 0;
}

.volume-slider {
    flex: 1;
    width: 100%;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    transition: background 0.3s;
    touch-action: auto !important;
    pointer-events: auto !important;
}

/* Slider Track */
.volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Slider thumb */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-low);
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 0 10px var(--color-low);
    transition: transform 0.1s, background-color 0.2s;
}

.volume-slider:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* FireFox Slider Thumb */
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--color-low);
    cursor: pointer;
    box-shadow: 0 0 10px var(--color-low);
    transition: transform 0.1s, background-color 0.2s;
}

.volume-slider:active::-moz-range-thumb {
    transform: scale(1.2);
}

/* Muted state for Slider */
.volume-slider.muted::-webkit-slider-thumb {
    background: var(--color-hazard);
    box-shadow: 0 0 10px var(--color-hazard);
}
.volume-slider.muted::-moz-range-thumb {
    background: var(--color-hazard);
    box-shadow: 0 0 10px var(--color-hazard);
}

.volume-val-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
}

/* Global button and inputs interaction overrides to combat touch-action blocks */
button, input, select, textarea, .menu-btn, .sound-toggle-btn, .sound-toggle-mini-btn, .volume-slider, .menu-settings, .settings-control, .level-btn, .control-btn, .hud-btn {
    touch-action: auto !important;
    pointer-events: auto !important;
}

/* Responsive button texts default styles */
.short-text {
    display: none;
}
.full-text {
    display: inline;
}

/* Kaydırılabilir alanlar için mobil dokunma/kaydırma kilidini aç */
.screen.scrollable, #codex-screen, #community-screen, #shop-screen, .codex-content-container, .community-content-container, .shop-content-scroll, .map-grid, .codex-tab-content {
    touch-action: pan-y !important;
    pointer-events: auto !important;
}

.menu-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* HUD (Göstergeler) */
.hud-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding: 1.5rem;
    padding-left: calc(1.5rem + env(safe-area-inset-left));
    padding-right: calc(1.5rem + env(safe-area-inset-right));
    padding-top: calc(1.5rem + env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 30;
}

.hud-layer.hidden {
    display: none;
}

.hud-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.hud-left-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    pointer-events: none;
}

.minimap-placeholder {
    width: 260px;
    height: 45px;
    pointer-events: none;
}

/* Can Damlaları (Jöle Kalıbı/Pasta Tasarımı) */
.health-container {
    display: flex;
    gap: 8px;
    margin-left: 6px;
}

.health-drop {
    position: relative;
    width: 22px;
    height: 20px;
    background: radial-gradient(circle at 35% 25%, #ffffff 0%, #cbd5e1 50%, #64748b 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px 10px 4px 4px; /* Curved top, flat bottom like a jelly mold cup */
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.health-drop.active {
    background: radial-gradient(circle at 35% 25%, #ff9ebb 0%, #ef4444 45%, #b91c1c 80%, #7f1d1d 100%);
    border-color: rgba(255, 100, 100, 0.65);
    box-shadow: 
        0 4px 10px rgba(239, 68, 68, 0.45), 
        inset 0 -3px 6px rgba(0,0,0,0.45);
    animation: jellyWobble 2.5s ease-in-out infinite alternate;
}

/* Islak jöle parlaması */
.health-drop::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 6px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: rotate(-10deg);
}

@keyframes jellyWobble {
    0%, 100% { transform: scale(1.0) rotate(0deg); }
    33% { transform: scale(1.1, 0.95) rotate(-4deg); }
    66% { transform: scale(0.95, 1.05) rotate(4deg); }
}

/* HUD Butonu (Pause vb.) */
.hud-btn {
    pointer-events: auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(15, 15, 25, 0.6);
    border: 1px solid var(--border-glow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.hud-btn svg {
    width: 22px;
    height: 22px;
}

.hud-btn:active {
    transform: scale(0.9);
}

/* Viskozite Rozeti */
.hud-bottom-info {
    display: flex;
    justify-content: center;
    width: 100%;
}

.viscosity-badge {
    background: rgba(15, 15, 25, 0.7);
    border: 1.5px solid var(--color-normal);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
    border-radius: 30px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.15rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.viscosity-badge .badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-normal);
    box-shadow: 0 0 8px var(--color-normal);
    transition: all 0.3s ease;
}

.viscosity-badge.low {
    border-color: var(--color-low);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
    color: var(--color-low);
}

.viscosity-badge.low .badge-dot {
    background-color: var(--color-low);
    box-shadow: 0 0 8px var(--color-low);
}

.viscosity-badge.high {
    border-color: var(--color-high);
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
    color: var(--color-high);
}

.viscosity-badge.high .badge-dot {
    background-color: var(--color-high);
    box-shadow: 0 0 8px var(--color-high);
}

/* MOBİL DOKUNMATİK KONTROLLER */
.controls-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Tüm ekranı kaplar, çökmez ve tam ekran sürüklemeye izin verir */
    pointer-events: none;
    padding: 1.5rem 2rem;
    padding-left: calc(1.2rem + env(safe-area-inset-left));
    padding-right: calc(2.8rem + env(safe-area-inset-right));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Butonların varsayılan konumlarını en altta tutar */
    box-sizing: border-box;
    z-index: 10;
}

.controls-layer.hidden {
    display: none;
}

.dpad-left {
    display: flex;
    gap: 0.6rem;
    pointer-events: auto;
    align-items: center;
}

.dpad-right {
    display: grid !important;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0.5rem;
    align-items: end;
    justify-items: end;
    pointer-events: auto;
}

#btn-down {
    grid-column: 1;
    grid-row: 1;
    margin-right: -10px; /* Ergonomik kümeleme için hafif sağa kaydır */
}

#btn-shift {
    grid-column: 1;
    grid-row: 2;
}

#btn-jump {
    grid-column: 2;
    grid-row: 2;
}

.control-btn {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(20, 20, 32, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    /* backdrop-filter kaldırıldı — Android'de kasma yapıyor */
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    touch-action: none !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent; /* iOS/Android dokunma gecikmesini önler */
    transition: none; /* Görsel gecikmeyi sıfırla — anında tepki */
    opacity: 0.55;
    will-change: opacity;
}

.control-btn svg {
    width: 38px;
    height: 38px;
}

.control-btn:active, .control-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    opacity: 1;
    transform: scale(0.92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Aşağı / Eğilme Butonu */
.down-btn {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: rgba(16, 185, 129, 0.55);
    width: 80px;
    height: 80px;
}
.down-btn:active, .down-btn.active {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.7);
    color: #10b981;
    opacity: 1;
}

/* Özel Aksiyon Tuşları */
.shift-btn {
    width: 114px;
    border-radius: 48px;
    background: rgba(15, 15, 25, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    position: relative;
    overflow: hidden;
    opacity: 0.55;
}
.shift-btn:active, .shift-btn.active {
    opacity: 1;
}

.shift-inner {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    color: var(--text-primary);
}

/* Farklı viskozite durumlarında mobil shift butonunu renklendir */
.shift-btn.low {
    border-color: var(--color-low);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}
.shift-btn.low .shift-inner { color: var(--color-low); }

.shift-btn.high {
    border-color: var(--color-high);
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
}
.shift-btn.high .shift-inner { color: var(--color-high); }

.jump-btn {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--color-low);
}

/* Animasyon Tanımları */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Win/Game Over İnce Detay İstatistikleri */
.win-stats {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 0.8rem;
    margin: 1rem 0;
    border: 1px solid rgba(255, 255, 255, 0.02);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Bölüm Seçimi Tasarımı */
#level-selector-wrapper {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}

/* Custom scrollbar for level selector (Modern & Geniş) */
#level-selector-wrapper::-webkit-scrollbar {
    width: 10px;
}
#level-selector-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}
#level-selector-wrapper::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.35); /* Cyan */
    border: 2px solid rgba(10, 10, 15, 0.9);
    border-radius: 6px;
}
#level-selector-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.65);
}

.level-tutorial-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 0.2rem 0.5rem;
    margin-bottom: -0.3rem;
    flex-shrink: 0;
}

.level-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    color: var(--color-low);
    text-transform: uppercase;
}

.level-group-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0.6rem 0.8rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    flex-shrink: 0;
}

.level-group-card.unlocked {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.level-group-card.locked {
    opacity: 0.65;
    background: rgba(0, 0, 0, 0.15);
}

.level-group-card.group-1 {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(217, 70, 239, 0.02) 100%);
    border-color: rgba(6, 182, 212, 0.15);
}

.level-group-card.group-2 {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.04) 0%, rgba(0, 0, 0, 0) 100%);
}

.level-group-card.group-3 {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, rgba(0, 0, 0, 0) 100%);
}

.level-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 0.3rem;
    transition: border-color 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.level-group-title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    color: #ffffff;
}

.level-group-status {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.accordion-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.level-group-card.collapsed .accordion-arrow {
    transform: rotate(-90deg);
}

.level-group-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
    max-height: 300px;
    opacity: 1;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease;
    overflow: hidden;
}

.level-group-card.collapsed .level-group-grid {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

.level-group-card.collapsed .level-group-header {
    border-bottom-color: transparent;
    margin-bottom: 0;
    padding-bottom: 0;
}

.level-btn {
    font-family: var(--font-game);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.5rem 0.2rem 0.4rem;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.level-btn:not(.locked) {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(217, 70, 239, 0.03) 100%);
    border-color: rgba(6, 182, 212, 0.25);
}

.btn-num {
    line-height: 1;
    font-size: 0.95rem;
    font-weight: 700;
}

.btn-stars-row {
    display: flex;
    gap: 2px;
    line-height: 1;
    justify-content: center;
}

.btn-star {
    font-size: 0.6rem;
    color: #eab308;
    text-shadow: 0 0 5px rgba(234,179,8,0.8);
    transition: opacity 0.2s;
}

.btn-star.empty {
    color: rgba(255,255,255,0.15);
    text-shadow: none;
}

.level-btn:hover:not(.locked) {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(217, 70, 239, 0.1) 100%);
    border-color: rgba(6, 182, 212, 0.5);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(6, 182, 212, 0.25);
}

.level-btn.active {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(217, 70, 239, 0.15) 100%) !important;
    color: #06b6d4 !important;
    border-color: #06b6d4 !important;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.45) !important;
    transform: scale(1.05);
}

.level-btn.locked {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------
   TOPLULUK SUNUCULARI (COMMUNITY DASHBOARD) TASARIMI
-------------------------------------------------- */

.community-card {
    width: 92%;
    max-width: 720px;
    height: auto;
    min-height: 300px;
    max-height: min(540px, 94vh);
    display: flex;
    flex-direction: column;
    padding: 1.5rem !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

.community-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
}

.community-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

.community-header .close-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}

.community-header .close-btn:hover {
    transform: scale(1.15);
}

.community-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.community-tab-btn {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.community-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.community-tab-btn.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--color-low);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

.community-content-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
}

/* Scrollbar - Community (Modern & Geniş) */
.community-content-container::-webkit-scrollbar {
    width: 10px;
}
.community-content-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}
.community-content-container::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.35); /* Cyan */
    border: 2px solid rgba(10, 10, 15, 0.9);
    border-radius: 6px;
}
.community-content-container::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.65);
}

.map-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px;
}

.no-maps {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.map-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    transition: all 0.2s ease;
}

.map-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(6, 182, 212, 0.2);
    transform: translateY(-1px);
}

.map-info {
    text-align: left;
}

.map-info h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.map-info .map-author {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.map-info .map-author span {
    color: var(--color-low);
    font-weight: 600;
}

.map-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.map-likes {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.map-expiry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-normal);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.05);
}

.map-expiry.warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.15);
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.05);
}

.map-expiry.danger {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.05);
}

.map-expiry.immortal {
    color: #eab308;
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.3);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.15);
}

.btn-like {
    background: rgba(217, 70, 239, 0.15);
    border: 1px solid rgba(217, 70, 239, 0.3);
    color: #d946ef;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: var(--font-game);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-like:hover {
    background: rgba(217, 70, 239, 0.25);
    box-shadow: 0 0 10px rgba(217, 70, 239, 0.2);
}

.btn-like.liked {
    background: #d946ef;
    color: #fff;
    border-color: #d946ef;
}

.btn-play-map {
    background: linear-gradient(135deg, var(--color-low) 0%, #0891b2 100%);
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 6px 16px;
    font-family: var(--font-game);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}

.btn-play-map:hover {
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
    transform: scale(1.02);
}

/* --------------------------------------------------
   MOBİL UYUMLULUK — Küçük ekranlar için kompakt tasarım
   (max-height: 700px = küçük telefonlar, portrait mod)
-------------------------------------------------- */
@media (max-height: 700px), (max-width: 480px) {
    #start-screen {
        padding: 0.8rem 0 1.2rem 0;
        align-items: flex-start;
    }

    .menu-card {
        padding: 1.2rem 1.4rem !important;
        border-radius: 16px;
        max-width: 94%;
        width: 94%;
    }

    .game-title {
        font-size: 2.2rem;
        letter-spacing: 0.25rem;
        margin-bottom: 0;
    }

    .game-subtitle {
        font-size: 0.65rem;
        letter-spacing: 0.3rem;
        margin-bottom: 0.8rem;
    }

    .instructions {
        margin-bottom: 0.8rem;
        padding: 0.6rem 0.8rem;
    }

    .inst-item {
        font-size: 0.75rem;
        margin: 0.3rem 0;
    }

    .codex-btn {
        font-size: 0.7rem;
        padding: 3px 7px;
    }

    #level-selector-wrapper {
        gap: 0.6rem !important;
        margin-bottom: 0.6rem !important;
        max-height: 180px !important;
        touch-action: pan-y !important;
        pointer-events: auto !important;
    }
    
    .level-group-grid {
        gap: 5px !important;
    }
    
    .level-group-card {
        padding: 0.6rem !important;
    }
    
    .level-group-header {
        margin-bottom: 0.5rem !important;
    }

    .level-btn {
        width: 34px !important;
        min-height: 50px !important;
        height: auto !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
        padding: 3px 2px !important;
    }
    .btn-star {
        font-size: 0.42rem !important;
    }
    .btn-num {
        font-size: 0.78rem !important;
    }

    .menu-settings {
        margin-bottom: 0.4rem !important;
    }

    .menu-btn {
        font-size: 0.9rem;
        padding: 0.65rem 1.5rem;
        margin-top: 0.35rem;
        border-radius: 10px;
    }

    .settings-control {
        gap: 6px !important;
    }

    .volume-slider {
        max-width: 90px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Ekstra küçük ekranlar (eski veya ufak telefonlar) */
@media (max-height: 640px) {
    .game-title {
        font-size: 1.8rem;
    }

    .game-subtitle {
        display: none;
    }

    /* Küçük ekranlarda klavye ipuçlarını gizle, rehber butonu hep görünür kalır */
    .instructions {
        display: none;
    }

    /* Rehber butonu küçük ekranda daha kompakt */
    .codex-btn {
        font-size: 0.7rem;
        padding: 4px 10px;
        margin-bottom: 0.4rem;
    }

    /* Codex kartı küçük ekranda neredeyse tam ekran ve kaydırılabilir */
    .codex-card {
        height: 90vh;
        max-height: 90vh;
        min-height: unset;
        padding: 0.8rem 1rem !important;
    }

    .codex-header {
        padding-bottom: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .codex-header h2 {
        font-size: 1.1rem;
    }

    .codex-tabs {
        margin-bottom: 0.6rem;
        gap: 6px;
    }

    .codex-tab-btn {
        padding: 6px 8px;
        font-size: 0.7rem;
        min-width: unset;
    }

    .codex-row {
        padding: 0.6rem 0.8rem;
        gap: 0.8rem;
    }

    .codex-row h3 {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }

    .codex-row p {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .codex-icon {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }

    .menu-card {
        padding: 0.9rem 1.2rem !important;
    }

    .menu-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }
}

/* Yatay Modda Kompakt Kontroller */
@media (orientation: landscape) and (max-height: 500px) {
    .controls-layer {
        padding: 0.6rem 1rem;
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    }

    .control-btn {
        width: 76px;
        height: 76px;
    }

    .control-btn svg {
        width: 32px;
        height: 32px;
    }

    .down-btn {
        width: 64px;
        height: 64px;
    }

    .shift-btn {
        width: 96px;
        height: 76px;
        border-radius: 38px;
    }

    .shift-inner {
        font-size: 0.8rem;
    }

    .dpad-left {
        gap: 0.35rem;
    }

    .dpad-left-move {
        gap: 0.4rem;
    }

    .dpad-right {
        gap: 0.4rem;
    }
}

/* ──────────────────────────────────────────────────
   KONTROL ÖZELLEŞTİRİCİ (CONTROLS CUSTOMIZER) STİLLERİ
   ────────────────────────────────────────────────── */

.hud-right-panel {
    display: flex;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}

#ctrl-edit-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(18, 18, 28, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 340px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.02);
    color: #fff;
    text-align: center;
}

.cep-title {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    color: #06b6d4;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.cep-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.cep-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    margin-bottom: 8px;
}

.cep-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cep-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.cep-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #06b6d4;
    cursor: pointer;
    box-shadow: 0 0 8px #06b6d4;
}

.cep-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: #06b6d4;
    cursor: pointer;
    box-shadow: 0 0 8px #06b6d4;
}

.cep-val {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}


.cep-btns {
    display: flex;
    gap: 8px;
    width: 100%;
}

.cep-btn {
    flex: 1;
    padding: 8px 12px;
    font-family: var(--font-game);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.cep-primary {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #fff;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.cep-primary:hover {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

.cep-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cep-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cep-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.cep-danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Edit Modu Durumları */
.ctrl-editing {
    background: rgba(0, 0, 0, 0.35) !important;
    pointer-events: all !important;
}

.ctrl-editable {
    border: 2px dashed #06b6d4 !important;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4) !important;
    animation: ctrlPulse 1.5s infinite ease-in-out;
    transform: scale(1.02);
    opacity: 0.85 !important;
}

.ctrl-dragging {
    border: 2px solid #d946ef !important;
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.6) !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
    z-index: 1000 !important;
}

@keyframes ctrlPulse {
    0%, 100% { border-color: rgba(6, 182, 212, 0.5); }
    50% { border-color: rgba(217, 70, 239, 0.8); }
}

.ctrl-selected {
    border: 2.5px solid #eab308 !important; /* Seçilen butona özel belirgin altın sarısı çerçeve */
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.75) !important;
    opacity: 1 !important;
}

/* Yatay Modda Başlangıç Ekranı İki Sütunlu Kompakt Yerleşim Optimizasyonu */
@media (orientation: landscape) and (max-height: 640px) {
    #start-screen {
        padding-top: 35px !important; /* Üstten hafif boşluk */
        padding-bottom: 60px !important; /* Reklam alanına doğru aradaki boşluğu azalt */
        align-items: flex-end !important; /* Ana menüyü biraz aşağı çek */
        justify-content: center !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    
    #start-screen .menu-card {
        width: 98% !important;
        max-width: 900px !important;
        padding: 1.2rem 1.8rem !important;
        border-radius: 20px !important;
        display: grid !important;
        grid-template-columns: 1.15fr 1.25fr !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 2rem !important;
        row-gap: 0.6rem !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Sol Sütun: Brand - Row 1 */
    #start-screen .brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-bottom: 0 !important;
        text-align: left !important;
        align-self: center !important;
    }
    
    #start-screen .brand .game-title {
        font-size: 2.2rem !important; /* Enlarged from 1.8rem */
        letter-spacing: 0.18rem !important;
        margin-bottom: 0 !important;
    }
    
    #start-screen .brand .game-subtitle {
        font-size: 0.65rem !important; /* Enlarged from 0.55rem */
        letter-spacing: 0.22rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Sol Sütun: Rehber ve Ses Butonları - Row 2 */
    #start-screen .start-top-buttons {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        gap: 0.8rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    
    #start-screen .start-top-buttons .codex-btn {
        flex: 1 !important;
        margin: 0 !important;
        padding: 0.45rem 1rem !important; /* Enlarged from 0.3rem 0.8rem */
        font-size: 0.88rem !important; /* Enlarged from 0.8rem */
        text-align: center !important;
    }
    
    /* Sol Sütun: Klavye ipuçlarını gizle */
    #start-screen .instructions {
        display: none !important;
    }
    
    /* Sol Sütun: Zorluk Ayarı - Row 3 */
    #start-screen .difficulty-container {
        grid-column: 1 !important;
        grid-row: 3 !important;
        margin: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    #start-screen .difficulty-title {
        font-size: 0.72rem !important; /* Enlarged from 0.65rem */
        margin-bottom: 4px !important;
        display: block !important;
    }
    
    #start-screen .difficulty-buttons {
        gap: 6px !important; /* Enlarged from 4px */
    }
    
    #start-screen .diff-btn {
        padding: 0.45rem 0.7rem !important; /* Enlarged from 0.3rem 0.5rem */
        font-size: 0.78rem !important; /* Enlarged from 0.7rem */
        border-radius: 9px !important;
    }
    
    #start-screen .diff-btn .diff-sub {
        display: none !important; /* Can/checkpoint açıklamalarını yatayda gizle */
    }
    
    /* Sağ Sütun: Bölüm Seçici - Row 1-2 span (Genişletilmiş Yükseklik) */
    #start-screen #level-selector-wrapper {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        max-height: 190px !important; /* Expanded grid height to stretch menu card downwards */
        min-height: 150px !important;
        margin-bottom: 0 !important;
        overflow-y: auto !important;
        align-self: stretch !important;
    }

    /* Sağ Sütun: Bölüm Butonları Süslemeleri */
    #start-screen .level-btn {
        width: 44px !important; /* Wider buttons */
        min-height: 52px !important;
        height: auto !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        padding: 4px 2px !important;
    }

    #start-screen .btn-star {
        font-size: 0.5rem !important;
    }

    #start-screen .btn-num {
        font-size: 0.85rem !important;
    }
    
    /* Sağ Sütun: Aksiyon Butonları Kapsayıcısı (Yan Yana) - Row 3 */
    #start-screen .menu-actions-wrapper {
        grid-column: 2 !important;
        grid-row: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Landscape modda kısa metinleri göster */
    #start-screen .menu-actions-wrapper .full-text {
        display: none !important;
    }
    #start-screen .menu-actions-wrapper .short-text {
        display: inline !important;
    }
    
    #start-screen #btn-play {
        flex: 1 !important;
        margin: 0 !important;
        font-size: 0.82rem !important;
        padding: 0.5rem 0.3rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    #start-screen #btn-community {
        flex: 1.4 !important;
        margin: 0 !important;
        font-size: 0.74rem !important;
        padding: 0.5rem 0.3rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #start-screen #btn-shop {
        flex: 1.2 !important;
        margin: 0 !important;
        font-size: 0.74rem !important;
        padding: 0.5rem 0.3rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Çok küçük ekranlar için yatay mod (420px veya daha az yükseklik) */
@media (orientation: landscape) and (max-height: 420px) {
    #start-screen {
        padding-top: 25px !important; /* Üstten hafif boşluk */
        padding-bottom: 56px !important; /* Reklam alanına doğru aradaki boşluğu azalt */
        align-items: flex-end !important; /* Ana menüyü biraz aşağı çek */
    }

    #start-screen .menu-card {
        padding: 0.5rem 1.2rem !important;
        row-gap: 0.25rem !important;
        column-gap: 1.5rem !important;
    }
    
    #start-screen .brand .game-title {
        font-size: 1.5rem !important;
        letter-spacing: 0.1rem !important;
    }
    
    #start-screen .brand .game-subtitle {
        display: none !important;
    }
    
    #start-screen #level-selector-wrapper {
        max-height: 115px !important;
    }
    
    .menu-btn {
        padding: 0.45rem 1rem !important;
        font-size: 0.8rem !important;
        margin-top: 0.15rem !important;
    }
    
    .level-group-card {
        padding: 0.4rem !important;
    }
    
    #start-screen .level-btn {
        width: 32px !important;
        height: 32px !important;
        min-height: unset !important;
        font-size: 0.75rem !important;
        padding: 2px !important;
        border-radius: 6px !important;
    }

    #start-screen .btn-star {
        font-size: 0.4rem !important;
    }

    #start-screen .btn-num {
        font-size: 0.75rem !important;
    }
}

/* Zorluk Derecesi Seçici */
.difficulty-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.difficulty-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}

.difficulty-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.diff-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-transform: uppercase;
}

.diff-btn .diff-sub {
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-transform: none;
}

.diff-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.diff-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.diff-btn.active[data-diff="easy"] {
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35), inset 0 0 8px rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.diff-btn.active[data-diff="normal"] {
    border-color: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.35), inset 0 0 8px rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.diff-btn.active[data-diff="hard"] {
    border-color: #eab308;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.35), inset 0 0 8px rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.diff-btn.active[data-diff="hardcore"] {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.35), inset 0 0 8px rgba(239, 68, 68, 0.1);
    color: #ef4444;
    animation: pulseRedBorder 1.5s infinite alternate;
}

@keyframes pulseRedBorder {
    0% { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 6px rgba(239, 68, 68, 0.15); }
    100% { border-color: rgba(239, 68, 68, 1.0); box-shadow: 0 0 14px rgba(239, 68, 68, 0.55); }
}

/* Mobilde (küçük ekran) zorluk alanını daha kompakt yap */
@media screen and (max-height: 500px) {
    .difficulty-container {
        margin-bottom: 8px !important;
        gap: 4px !important;
    }
    .difficulty-title {
        font-size: 0.7rem !important;
    }
    .diff-btn {
        padding: 4px 6px !important;
        font-size: 0.65rem !important;
        border-radius: 8px !important;
    }
    .diff-btn .diff-sub {
        font-size: 0.55rem !important;
    }
}

/* ===================================================
   WIN SCREEN STARS
=================================================== */
@keyframes star-pop {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
    80%  { transform: scale(0.9) rotate(-4deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes star-glow-pulse {
    0%, 100% { text-shadow: 0 0 12px #facc15, 0 0 28px #eab308; }
    50%       { text-shadow: 0 0 24px #fde047, 0 0 48px #facc15; }
}

.win-stars-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0.8rem 0 0.4rem;
}

.win-star {
    font-size: 2.8rem;
    color: rgba(255,255,255,0.13);
    display: inline-block;
    line-height: 1;
}

.win-star.earned {
    color: #facc15;
    animation: star-pop 0.55s cubic-bezier(.36,.07,.19,.97) both,
               star-glow-pulse 2s 0.6s ease-in-out infinite;
}

/* ===================================================
   CHAPTER STAR BADGE (X/30 on group header)
=================================================== */
.chapter-star-badge {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2px 8px;
    letter-spacing: 0.02em;
    transition: all 0.5s ease;
    white-space: nowrap;
}

.chapter-star-badge.golden {
    color: #facc15;
    background: rgba(234,179,8,0.12);
    border-color: rgba(234,179,8,0.35);
    box-shadow: 0 0 10px rgba(234,179,8,0.25);
    animation: badge-golden-pulse 2s ease-in-out infinite;
}

@keyframes badge-golden-pulse {
    0%, 100% { opacity: 0.85; }
    50%       { opacity: 1; }
}

/* ===================================================
   STAR GATE MODAL
=================================================== */
.star-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fade-in 0.2s ease;
}

.star-gate-overlay.hidden {
    display: none;
}
.star-gate-card {
    background: linear-gradient(145deg, rgba(20,20,40,0.97) 0%, rgba(12,12,24,0.99) 100%);
    border: 1px solid rgba(234,179,8,0.22);
    border-radius: 20px;
    padding: 2rem 2rem 1.6rem;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04) inset;
    animation: slide-up 0.3s cubic-bezier(.18,.89,.32,1.28);
    
    /* Responsive layout enhancements */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.star-gate-card .menu-settings {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.star-gate-card .menu-settings::-webkit-scrollbar {
    width: 4px;
}
.star-gate-card .menu-settings::-webkit-scrollbar-track {
    background: transparent;
}
.star-gate-card .menu-settings::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.3);
    border-radius: 2px;
}
.star-gate-card .menu-settings::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.6);
}
.sound-settings-card {
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 
                0 0 30px rgba(255, 255, 255, 0.02) inset,
                -6px -6px 20px rgba(6, 182, 212, 0.15),
                6px 6px 20px rgba(217, 70, 239, 0.15) !important;
}

@keyframes slide-up {
    from { transform: translateY(40px) scale(0.94); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.star-gate-lock-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(234,179,8,0.4));
    animation: badge-golden-pulse 2s ease-in-out infinite;
}

.star-gate-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 0.3rem;
    letter-spacing: 0.06em;
}

.star-gate-req {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.15rem;
}

.star-gate-req-stars {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.9rem;
}

.star-gate-req-stars strong {
    color: #facc15;
}

.star-gate-count {
    font-size: 2.2rem;
    font-weight: 900;
    font-family: var(--font-game);
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
    transition: all 0.4s ease;
    line-height: 1;
}

.star-gate-count.golden {
    color: #facc15;
    text-shadow: 0 0 18px rgba(234,179,8,0.65), 0 0 36px rgba(234,179,8,0.3);
    animation: badge-golden-pulse 1.8s ease-in-out infinite;
}

.star-gate-bar-wrap {
    position: relative;
    background: rgba(255,255,255,0.07);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.star-gate-bar {
    height: 100%;
    background: linear-gradient(90deg, #d97706 0%, #facc15 100%);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    width: 0%;
    box-shadow: 0 0 10px rgba(234,179,8,0.5);
}

.star-gate-threshold-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 80%; /* 24/30 = 80% */
    width: 2px;
    background: rgba(255,255,255,0.55);
    border-radius: 1px;
    z-index: 2;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .level-btn {
        min-height: 46px !important;
    }
    .btn-star {
        font-size: 0.48rem !important;
    }
    .win-star {
        font-size: 2.2rem !important;
    }
    .star-gate-card {
        padding: 1.2rem 1.2rem 1rem !important;
        border-radius: 16px !important;
    }
}

/* ===================================================
   SPLASH SCREEN & GEL GOOEY INTRO
   =================================================== */
.splash-screen {
    position: fixed;
    inset: 0;
    background: #06060c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
    overflow: hidden;
}

.splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.splash-goo-container {
    filter: url('#goo');
    width: 200px;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.blob {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4 0%, #d946ef 100%);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.8), 0 0 60px rgba(217, 70, 239, 0.6);
}

.blob-1 {
    width: 80px;
    height: 80px;
    animation: blob-one 3s infinite ease-in-out;
}

.blob-2 {
    width: 60px;
    height: 60px;
    animation: blob-two 3s infinite ease-in-out;
}

@keyframes blob-one {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    30% {
        transform: translate(-40px, -20px) scale(1.1);
    }
    60% {
        transform: translate(40px, 20px) scale(0.9);
    }
}

@keyframes blob-two {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    30% {
        transform: translate(50px, 30px) scale(0.85);
    }
    60% {
        transform: translate(-50px, -30px) scale(1.15);
    }
}

.splash-logo {
    font-family: var(--font-game);
    font-size: 3.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.4rem;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.8), 0 0 30px rgba(6, 182, 212, 0.4);
    opacity: 0;
    transform: scale(0.9);
    animation: logo-fade-in 1.2s forwards ease-out;
    animation-delay: 1.5s;
}

@keyframes logo-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(5px);
    }
    50% {
        opacity: 0.8;
        filter: blur(0);
        text-shadow: 0 0 25px rgba(217, 70, 239, 0.8);
    }
    65% {
        opacity: 0.3;
        text-shadow: none;
    }
    75% {
        opacity: 0.9;
        text-shadow: 0 0 15px rgba(6, 182, 212, 0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
        text-shadow: 0 0 10px rgba(6, 182, 212, 0.8), 0 0 35px rgba(217, 70, 239, 0.8);
    }
}

.splash-tap-hint {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 2px;
    font-family: 'Outfit', sans-serif;
    animation: pulse-glow 2s infinite ease-in-out;
    opacity: 0;
    animation-delay: 2.2s;
    animation-fill-mode: forwards;
    cursor: pointer;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.15;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }
    50% {
        opacity: 0.7;
        color: #06b6d4;
        text-shadow: 0 0 10px rgba(6, 182, 212, 0.6), 0 0 20px rgba(217, 70, 239, 0.4);
    }
}

/* AdMob Banner Placeholder styling */
#admob-banner-placeholder {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 50px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 999;
}

/* Landscape compact overrides for settings modals to prevent layout overflow */
@media (orientation: landscape) and (max-height: 640px) {
    .star-gate-card {
        padding: 0.8rem 1.2rem !important;
        max-width: 380px !important;
        width: 95% !important;
        border-radius: 16px !important;
    }
    .star-gate-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.1rem !important;
    }
    .menu-settings {
        margin: 6px 0 !important;
        gap: 8px !important;
    }
    .settings-control {
        font-size: 0.8rem !important;
    }
    .volume-slider {
        max-width: 100px !important;
    }
    #btn-close-settings {
        padding: 0.4rem 1rem !important;
        font-size: 0.85rem !important;
        margin-top: 0.2rem !important;
    }
}

/* Custom Premium Alert & Confirm Modal */
.viscora-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: viscoraModalFadeIn 0.2s ease-out;
    touch-action: none !important;
}

.viscora-modal {
    background: rgba(18, 18, 28, 0.95);
    border: 2px solid rgba(217, 70, 239, 0.4);
    box-shadow: 0 0 30px rgba(217, 70, 239, 0.25);
    border-radius: 12px;
    padding: 24px;
    width: 380px;
    max-width: 90vw;
    color: #f3f4f6;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    box-sizing: border-box;
    animation: viscoraModalZoomIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    touch-action: none !important;
}

.viscora-modal-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #d946ef;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(217, 70, 239, 0.3);
}

.viscora-modal-message {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin-bottom: 20px;
}

.viscora-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.viscora-modal-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    outline: none;
    border: 1px solid rgba(255,255,255,0.1);
}

.viscora-modal-btn.primary {
    background: linear-gradient(135deg, #d946ef 0%, #a855f7 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(217, 70, 239, 0.2);
}

.viscora-modal-btn.primary:hover {
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4);
    transform: translateY(-1px);
}

.viscora-modal-btn.secondary {
    background: rgba(30, 41, 59, 0.6);
    color: #cbd5e1;
}

.viscora-modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

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

@keyframes viscoraModalZoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Community Search & Tag Filters */
.tag-filter-btn {
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    outline: none;
}

.tag-filter-btn:hover {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.35);
    color: #ffffff;
}

.tag-filter-btn.active {
    background: rgba(6, 182, 212, 0.25);
    border-color: var(--color-low);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

/* Map Card Tag Badges */
.map-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.map-tag-badge {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    color: var(--color-low);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* --------------------------------------------------
   KRİSTAL DÜKKANI (CRYSTAL SHOP) TASARIMI
-------------------------------------------------- */

.shop-content-scroll {
    max-height: 380px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}

.shop-item {
    background: rgba(15, 23, 42, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
}

.shop-item:hover {
    border-color: rgba(6, 182, 212, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.15);
}

.shop-item-preview-box {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.05);
}

.shop-item-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
}

.shop-item-description {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 12px;
    min-height: 32px;
}

.shop-item-price {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.shop-item-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    border: none;
    outline: none;
}

.shop-item-btn.buy {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.shop-item-btn.buy:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
}

.shop-item-btn.equip {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.shop-item-btn.equip:hover {
    background: rgba(6, 182, 212, 0.2);
    color: #ffffff;
}

.shop-item-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    cursor: default;
    border: none;
}

.shop-item.equipped {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}

/* Custom previews for cosmetic elements in the shop card */
.preview-trail-particle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
}

.preview-glow-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid currentColor;
    filter: drop-shadow(0 0 6px currentColor);
}

.preview-eye-shape {
    width: 28px;
    height: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

.preview-eye-pupil {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

/* Shop Preview & Toast Styles */
.shop-preview-panel {
    transition: border-color 0.3s ease;
}
.shop-preview-panel:hover {
    border-color: rgba(0, 242, 254, 0.4) !important;
}

/* Dikey modda (portrait) önizleme avatarını büyüt */
.shop-preview-panel .preview-avatar-container {
    width: 90px !important;
    height: 90px !important;
}
.shop-preview-panel .preview-avatar-container canvas {
    width: 90px !important;
    height: 90px !important;
}

@keyframes toast-in-out {
    0% { transform: translate(-50%, 20px); opacity: 0; }
    12% { transform: translate(-50%, 0); opacity: 1; }
    88% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -20px); opacity: 0; }
}

.shop-toast {
    animation: toast-in-out 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Mobile Landscape Community Screen Adjustments */
@media (orientation: landscape) and (max-height: 640px) {
    #community-screen {
        padding: 0 !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }
    #community-screen .community-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 0.5rem 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 0 !important;
    }
    #community-screen .community-header {
        flex-shrink: 0 !important;
        padding-bottom: 0.3rem !important;
        margin-bottom: 0.3rem !important;
    }
    #community-screen .community-header h2 {
        font-size: 1rem !important;
    }
    /* Tabs + Tasarla butonunu tek satırda tut */
    #community-screen .community-tabs-row {
        flex-shrink: 0 !important;
        margin-bottom: 4px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    #community-screen .community-tab-btn {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
        min-width: 60px !important;
    }
    #community-screen #btn-design-map {
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }
    /* Arama/filtre satırını kompakt yap, etiketleri gizle */
    #community-screen .search-filter-row {
        flex-shrink: 0 !important;
        margin-bottom: 4px !important;
        padding-bottom: 4px !important;
        gap: 8px !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    #community-screen .search-box-container {
        flex: 1 !important;
        width: auto !important;
    }
    #community-screen #community-search-input {
        padding: 6px 10px 6px 36px !important;
        font-size: 0.78rem !important;
    }
    #community-screen .tags-filter-container {
        display: flex !important;
        flex: 1.5 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 2px !important;
        gap: 6px !important;
    }
    #community-screen .tags-filter-container span {
        display: none !important;
    }
    #community-screen .tag-filter-btn {
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    /* Harita listesi kalan alanı doldursun */
    #community-screen .community-content-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    /* Harita kartlarını kompakt yap */
    #community-screen .map-grid {
        gap: 8px !important;
    }
}

@media (orientation: landscape) and (max-height: 420px) {
    #community-screen .community-card {
        padding: 0.3rem 0.8rem !important;
    }
    #community-screen .community-header {
        padding-bottom: 0.15rem !important;
        margin-bottom: 0.15rem !important;
    }
    #community-screen .community-header h2 {
        font-size: 0.9rem !important;
    }
    #community-screen .community-tabs-row {
        margin-bottom: 2px !important;
    }
    #community-screen .search-filter-row {
        margin-bottom: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Mobile Landscape Shop Layout Adjustments */
@media (orientation: landscape) and (max-height: 640px) {
    #shop-screen {
        padding: 0 !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }
    #shop-screen .menu-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 0.4rem 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* Header kompakt */
    #shop-screen .community-header {
        flex-shrink: 0 !important;
        padding-bottom: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    #shop-screen .community-header h2 {
        font-size: 1rem !important;
    }
    /* Bakiye satırı — bilgi metnini gizle */
    #shop-screen .shop-header-row {
        margin-bottom: 2px !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }
    #shop-screen .shop-header-row > div:last-child {
        display: none !important;
    }
    #shop-screen .shop-balance-display {
        font-size: 0.9rem !important;
    }
    /* Önizleme paneli — sadece avatar, arka plan/kenarlık yok, sıfır padding */
    #shop-screen .shop-preview-panel {
        padding: 0 !important;
        margin-bottom: 2px !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border: none !important;
        gap: 0 !important;
        justify-content: flex-end !important;
        width: auto !important;
    }
    /* Açıklama metnini gizle */
    #shop-screen .shop-preview-panel > div:first-child {
        display: none !important;
    }
    /* Avatar — 56px yatayda */
    #shop-screen .shop-preview-panel .preview-avatar-container {
        width: 56px !important;
        height: 56px !important;
    }
    #shop-screen .shop-preview-panel .preview-avatar-container canvas {
        width: 56px !important;
        height: 56px !important;
    }
    /* Tabs kompakt */
    #shop-screen .shop-tabs {
        margin-bottom: 3px !important;
        flex-shrink: 0 !important;
    }
    #shop-screen .community-tab-btn {
        padding: 5px 8px !important;
        font-size: 0.72rem !important;
    }
    /* Ürün listesi kalan alanı doldursun */
    #shop-screen .shop-content-scroll {
        max-height: none !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

@media (orientation: landscape) and (max-height: 420px) {
    #shop-screen .menu-card {
        padding: 0.3rem 0.8rem !important;
    }
    /* Çok küçük ekranlarda avatar biraz küçültsün */
    #shop-screen .shop-preview-panel .preview-avatar-container {
        width: 50px !important;
        height: 50px !important;
    }
    #shop-screen .shop-preview-panel .preview-avatar-container canvas {
        width: 50px !important;
        height: 50px !important;
    }
    #shop-screen .shop-header-row {
        margin-bottom: 2px !important;
    }
    #shop-screen .shop-tabs {
        margin-bottom: 2px !important;
    }
}

/* Custom SVG Icon system to replace Emojis */
.icon-svg {
    width: 1.1em;
    height: 1.1em;
    stroke: currentColor;
    fill: none;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: 6px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Button hover transitions for SVG icons */
button:hover .icon-svg,
.menu-btn:hover .icon-svg,
.codex-tab-btn:hover .icon-svg,
.community-tab-btn:hover .icon-svg,
.tag-filter-btn:hover .icon-svg {
    transform: scale(1.1);
}

/* Special styling for Crystal Gem Icon */
.icon-gem {
    color: #00f2fe;
    filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.6));
    animation: gemPulse 2.5s infinite ease-in-out;
}

@keyframes gemPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* Styled neon dots for difficulty and list markers */
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    box-shadow: 0 0 8px currentColor;
}
.dot-easy {
    background-color: #10b981;
    color: #10b981;
}
.dot-normal {
    background-color: #00f2fe;
    color: #00f2fe;
}
.dot-hard {
    background-color: #ffb700;
    color: #ffb700;
}
.dot-hardcore {
    background-color: #ef4444;
    color: #ef4444;
}

/* Specific alignments for close buttons containing SVG X icons */
.close-btn {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #ffffff !important;
    opacity: 0.82 !important;
}
.close-btn:hover {
    transform: scale(1.15) !important;
    opacity: 1 !important;
    color: #ffffff !important;
}
.close-btn .icon-svg {
    margin-right: 0 !important;
    width: 18px !important;
    height: 18px !important;
    top: 0 !important;
}

/* Specific alignment for search box SVG icon positioning */
.search-box-container .search-icon-svg {
    transition: color 0.3s ease;
}
.search-box-container:focus-within .search-icon-svg {
    color: #00f2fe !important;
}

/* Slot Selection Modal Styles */
.slot-select-btn {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    width: 100% !important;
    border-radius: 8px !important;
    text-align: left !important;
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1.5px solid rgba(6, 182, 212, 0.3) !important;
    transition: all 0.2s ease !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

.slot-select-btn:hover {
    background: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.2) !important;
}

/* Responsive adjustments for Settings Modal */
#settings-modal .star-gate-card {
    max-width: 400px;
}

@media (max-width: 350px) {
    .restore-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .restore-row input {
        width: 100% !important;
    }
    .restore-row button {
        width: 100% !important;
    }
}