/* ===== IMPORTS & VARIABLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600;800&family=Readex+Pro:wght@400;600;800&family=Lalezar&family=Fredoka:wght@600;700&family=Noto+Sans+JP:wght@700&family=Noto+Sans+KR:wght@700&family=Noto+Sans+SC:wght@700&display=swap');

:root {
    --game-bg-top: #4cd137;
    --game-bg-bottom: #4bfa5e;
    --primary-btn: #2ed573;
    --dock-bg: rgba(255, 255, 255, 0.5); /* Changed from backdrop-filter for performance */
    --dock-border: rgba(255, 255, 255, 0.6);
}

/* ===== BASE STYLES ===== */
body {
    margin: 0;
    font-family: 'Fredoka', sans-serif;
    background-color: #2d3436; 
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Language-specific font families */
html[lang="ar"] body { font-family: 'Readex Pro', sans-serif; }
html[lang="ja"] body { font-family: 'Noto Sans JP', sans-serif; }
html[lang="ko"] body { font-family: 'Noto Sans KR', sans-serif; }
html[lang="zh"] body { font-family: 'Noto Sans SC', sans-serif; }

/* ===== PHONE FRAME (MOBILE = FULL) ===== */
#mobile-frame {
    width: 100%;
    height: 100dvh; /* lebih akurat dari vh */
    position: relative;
    min-height: 100dvh;
    background-image: url('photo/1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== DESKTOP MODE (PC = FRAME) ===== */
@media (min-width: 768px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #2c3e50;
    }

    #mobile-frame {
        width: 360px;
        height: 720px;

        border-radius: 30px;
        border: 8px solid #1e272e;
        box-shadow: 0 0 40px rgba(0,0,0,0.6);
    }
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
}

.center-game-area {
  overflow: visible;
}

/* ===== PAGE STRUCTURE ===== */
.page-container {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    display: flex; 
    flex-direction: column; 
    align-items: center;
}
.page-container.hidden { display: none; }

#shopPage, #coinsPage, #settingsPage, #languagePage, #appearancePage, #levelsPage {
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }

/* ===== MAIN PAGE ===== */
#mainPage { 
    justify-content: flex-start; 
    padding-top: 18vh; 
}

.main-menu-content {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    gap: 30px; 
    animation: fadeIn 1s ease-out; 
    width: 100%;
}

/* Title and Subtitle */
h1 {
    font-family: 'Fredoka', sans-serif;
    font-size: 3.5rem; 
    margin: 0; 
    line-height: 1.1; 
    color: #ffd32a; 
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 3px 3px 0 #2d3436, 0 5px 0 #d35400, 0 8px 10px rgba(0,0,0,0.3);
    text-align: center; 
    position: relative; 
    z-index: 100;
    animation: floatTitle 3s ease-in-out infinite alternate;
}

html[lang="ar"] h1 { 
    font-family: 'Baloo Bhaijaan 2', cursive; 
    letter-spacing: 0; 
    font-size: 3.5rem; 
}

html[lang="ja"] h1, 
html[lang="zh"] h1, 
html[lang="ko"] h1 { 
    font-size: 2.8rem; 
    letter-spacing: 0; 
}

#mainSubtitle {
    display: block; 
    font-family: inherit; 
    font-weight: 800;
    font-size: 1.3rem; 
    margin: 40px auto; 
    background: #ff9f43; 
    color: #fff;
    padding: 8px 30px; 
    border-radius: 50px; 
    border: 3px solid #fff;
    width: fit-content; 
    box-shadow: 0 3px 0 #e67e22, 0 5px 8px rgba(0,0,0,0.2);
    transform: rotate(-2deg); 
    animation: pulseBadge 2s infinite;
}

/* ===== ANIMATIONS ===== */
@keyframes floatTitle { 
    0% { transform: translateY(0) rotate(-2deg); } 
    100% { transform: translateY(-5px) rotate(2deg); } 
}

@keyframes pulseBadge { 
    0% { transform: rotate(-2deg) scale(1); } 
    50% { transform: rotate(-2deg) scale(1.05); } 
    100% { transform: rotate(-2deg) scale(1); } 
}

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

/* ===== HEADER CONTROLS ===== */
.top-header-controls { 
    position: absolute; 
    top: 20px; 
    width: 100%; 
    padding: 0 20px; 
    display: flex; 
    justify-content: space-between; 
    z-index: 10; 
    box-sizing: border-box; 
    align-items: center;
}

.right-group { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.left-group { 
    display: flex; 
    align-items: center; 
}

/* ===== COIN DISPLAY ===== */
.coin-display {
    position: relative; 
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 25px; 
    padding: 4px 30px 4px 12px;
    min-width: 100px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.1rem; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    height: 44px; 
    box-sizing: border-box;
}

html[dir="rtl"] .coin-display { 
    padding: 4px 12px 4px 30px; 
}

.coin-display i {
    color: #f1c40f;
    font-size: 1.1rem; 
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
    text-shadow: 0 0 2px rgba(0,0,0,0.5); 
}

.coin-display span { 
    margin-left: 2px; 
}

.buy-coins-btn {
    position: absolute; 
    top: -4px; 
    right: -4px; 
    left: auto;
    width: 24px; 
    height: 24px; 
    background: #fff; 
    color: #e6c619; 
    border: 2px solid #fff; 
    border-radius: 50%; 
    font-size: 0.8rem; 
    padding: 0; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    transition: transform 0.1s; 
    z-index: 10; 
}

html[dir="rtl"] .buy-coins-btn { 
    right: auto; 
    left: -4px; 
}

.buy-coins-btn:active { 
    transform: translateY(2px); 
    box-shadow: none; 
}

.buy-coins-btn i { 
    margin: 0; 
    line-height: 1; 
}

/* ===== BUTTONS ===== */
.game-icon-btn {
    width: 44px; 
    height: 44px; 
    border: none; 
    border-radius: 50%; 
    background: #fff; 
    color: #e6c619; 
    font-size: 1.2rem; 
    cursor: pointer;
    box-shadow: 0 4px 0 #dcdde1, 0 4px 6px rgba(0,0,0,0.1);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: all 0.1s;
}

.game-icon-btn:hover { 
    transform: translateY(-2px); 
}

.game-icon-btn:active { 
    transform: translateY(2px); 
    box-shadow: 0 0 0 #dcdde1; 
}

.game-icon-btn.hidden-in-header { 
    display: none !important; 
}

.start-btn {
    padding: 12px 50px; 
    font-size: 1.8rem; 
    font-weight: 800; 
    color: #fff;
    background: var(--primary-btn); 
    border: none; 
    border-radius: 50px; 
    cursor: pointer;
    box-shadow: 0 8px 0 #218c74, 0 10px 20px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.4);
    transition: transform 0.1s; 
    animation: pulseBtn 2s infinite;
    display: flex; 
    align-items: center; 
    gap: 15px; 
    max-width: 90%; 
    justify-content: center;
    font-family: inherit; 
    margin-top: 50px; 
}

.start-btn:active { 
    transform: translateY(4px) scale(0.98); 
    box-shadow: 0 0 0 #218c74; 
    animation: none; 
}

@keyframes pulseBtn { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
}

/* ===== SUB PAGES ===== */
.sub-page-wrapper { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
}

.sub-page-header {
    background: #fff; 
    width: 100%; 
    height: 70px; 
    padding: 0 20px; 
    box-sizing: border-box;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    position: sticky; 
    top: 0; 
    border-radius: 0 0 25px 25px; 
    z-index: 50; 
    flex-shrink: 0;
}

.sub-page-header h2 { 
    margin: 0; 
    color: #e6c619; 
    font-size: 1.8rem; 
    font-family: inherit; 
}

.scrollable-content {
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start;
    width: 100%; 
    box-sizing: border-box; 
    padding-bottom: 20px; 
    padding-top: 20px;
}

.back-btn-fixed, .header-save-btn {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    width: 45px; 
    height: 45px; 
    background: transparent; 
    border: none;
    font-size: 1.6rem; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.back-btn-fixed { 
    left: 15px; 
    color: #e6c619; 
}

.header-save-btn { 
    right: 15px; 
    color: #e6c619; 
}

html[dir="rtl"] .back-btn-fixed { 
    left: auto; 
    right: 15px; 
    transform: translateY(-50%) rotate(180deg); 
}

html[dir="rtl"] .header-save-btn { 
    right: auto; 
    left: 15px; 
}

/* ===== NOTIFICATIONS ===== */
.toast-notification {
    position: absolute; 
    top: -100px; 
    left: 50%; 
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.95); 
    color: #fff; 
    padding: 10px 20px; 
    font-size: 1rem; 
    border-radius: 20px; 
    font-family: inherit; 
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    z-index: 20000; 
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: flex; 
    align-items: center; 
    gap: 6px; 
    pointer-events: none; 
    width: max-content; 
    max-width: 90%;
}

.toast-notification.show { 
    top: 30px; 
}

/* ===== SHOP PAGE ===== */
.shop-grid {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
    width: 100%; 
    max-width: 320px; 
    padding: 0 10px; 
    box-sizing: border-box;
}

.shop-card {
    position: relative; 
    background: #fff; 
    border-radius: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05), inset 0 -4px 0 rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s; 
    border: 2px solid #fff;
    width: 100%; 
    aspect-ratio: 1 / 1.4; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    overflow: visible; 
}

.shop-card:active { 
    transform: scale(0.96); 
}

/* Shop card themes */
.magic-theme { 
    background: linear-gradient(160deg, #ffffff 50%, #fce4ec 100%); 
    border: 2px solid #fc859c; 
}

.undo-theme { 
    background: linear-gradient(160deg, #ffffff 50%, #e3f2fd 100%); 
    border: 2px solid #0fb928; 
}

.coin-theme { 
    background: linear-gradient(160deg, #ffffff 50%, #fff3cd 100%); 
    border: 2px solid #ffe6a7; 
}

.shop-card-content {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-content: space-between; 
    gap: 5px; 
    width: 100%; 
    height: 100%;
    padding: 12px 10px; 
    box-sizing: border-box; 
    z-index: 2;
}

.shop-icon-container { 
    flex-shrink: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.shop-icon-circle {
    width: 50px; 
    height: 50px; 
    border-radius: 18px;
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 1.6rem; 
    color: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15), inset 0 3px 5px rgba(255,255,255,0.4); 
    border: 3px solid #fff;
}

.magic-theme .shop-icon-circle { 
    background: linear-gradient(to bottom right, #fc859c, #ea5ebf); 
    box-shadow: 0 8px 20px rgba(165, 94, 234, 0.4); 
}

.undo-theme .shop-icon-circle { 
    background: linear-gradient(to bottom right, #4bfa5e, #0fb928); 
    box-shadow: 0 8px 20px rgba(15, 185, 177, 0.4); 
}

.coin-theme .shop-icon-circle { 
    background: linear-gradient(to bottom right, #f1c40f, #f39c12); 
    box-shadow: 0 8px 20px rgba(241, 196, 15, 0.4); 
}

.shop-card-title {
    font-family: inherit; 
    font-size: 1rem; 
    font-weight: 800;
    margin: 0; 
    text-shadow: 0 2px 0 rgba(0,0,0,0.05); 
    text-align: center; 
    line-height: 1.1;
}

.magic-theme .shop-card-title { 
    color: #fc859c; 
}

.undo-theme .shop-card-title { 
    color: #4bfa5e; 
}

.coin-theme .shop-card-title { 
    color: #d35400; 
}

.coin-amount-display {
    font-family: inherit; 
    font-size: 0.9rem; 
    font-weight: 800;
    color: #d35400; 
    background: #fff8e1; 
    padding: 3px 12px;
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    gap: 4px;
    border: 1px solid #ffe6a7; 
    box-shadow: 0 2px 0 rgba(0,0,0,0.05); 
    margin-bottom: 5px; 
}

.shop-action { 
    width: 100%; 
    flex-shrink: 0; 
}

.buy-btn-3d {
    border: none; 
    border-radius: 15px; 
    padding: 8px 0; 
    width: 100%;
    color: #fff; 
    cursor: pointer; 
    display: flex; 
    flex-direction: row-reverse; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    transition: all 0.1s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative; 
    top: 0; 
    text-transform: uppercase;
}

.buy-btn-3d:active { 
    top: 4px; 
    box-shadow: 0 0 0 transparent !important; 
    transform: scale(0.98); 
}

.magic-theme .buy-btn-3d { 
    background: linear-gradient(to bottom, #fc859c, #ea5ebf); 
    box-shadow: 0 4px 0 #ea5ebf, 0 8px 15px rgba(196, 69, 105, 0.4), inset 0 2px 0 rgba(255,255,255,0.25); 
}

.undo-theme .buy-btn-3d { 
    background: linear-gradient(to bottom, #4bfa5e, #0fb928); 
    box-shadow: 0 4px 0 #12a750, 0 8px 15px rgba(18, 167, 53, 0.4), inset 0 2px 0 rgba(255,255,255,0.25); 
}

.coin-theme .buy-btn-3d { 
    background: linear-gradient(to bottom, #2ecc71, #27ae60); 
    box-shadow: 0 4px 0 #1e8449, 0 8px 15px rgba(39, 174, 96, 0.3), inset 0 2px 0 rgba(255,255,255,0.25); 
}

.coin-icon i { 
    color: #f1c40f; 
    font-size: 1rem; 
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); 
}

.coin-theme .coin-icon i { 
    color: #fff; 
}

.price-text { 
    font-family: inherit; 
    font-weight: 800; 
    font-size: 1.1rem; 
    line-height: 1; 
    text-shadow: 0 2px 2px rgba(0,0,0,0.1); 
}

.card-glow { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: rgba(255,255,255,0.3); 
    border-radius: 50%; 
    top: -30px; 
    right: -30px; 
    z-index: 1; 
    pointer-events: none; 
}

/* ===== CONTENT BOXES ===== */
.content-box {
    background: rgba(255,255,255,0.95); 
    padding: 15px; 
    border-radius: 18px; 
    width: calc(100% - 40px); 
    max-width: 350px; 
    box-sizing: border-box; 
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    margin-bottom: 15px; 
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.disabled-area { 
    opacity: 0.5; 
    pointer-events: none; 
    filter: grayscale(0.8); 
}

#appearancePage .content-box, 
#levelsPage .content-box, 
#settingsPage .content-box, 
#languagePage .content-box {
    width: calc(100% - 40px) !important; 
    background: transparent; 
    box-shadow: none; 
    padding: 0; 
    margin-top: 10px;
}

/* ===== SETTINGS PAGE ===== */
.settings-row { 
    background: #fff; 
    width: 100%; 
    box-sizing: border-box; 
    margin: 0 0 10px 0; 
    padding: 15px; 
    border-radius: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 1rem; 
    color: #2d3436; 
    font-weight: bold; 
    box-shadow: 0 3px 0 #dfe6e9; 
    transition: transform 0.1s; 
    cursor: pointer; 
}

.settings-row:active { 
    transform: translateY(2px); 
    box-shadow: 0 1px 0 #dfe6e9; 
}

.arrow-btn { 
    background: transparent; 
    border: none; 
    width: 25px; 
    height: 25px; 
    font-size: 1.1rem; 
    color: #b2bec3; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.search-box { 
    background: #fff; 
    width: 100%; 
    height: 45px; 
    border-radius: 22px; 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    box-sizing: border-box; 
    box-shadow: 0 3px 8px rgba(0,0,0,0.05); 
    margin-bottom: 12px; 
    border: 2px solid transparent; 
}

.search-box input { 
    font-family: inherit; 
    font-size: 1rem; 
    font-weight: 600; 
    outline: none; 
    margin: 0 10px; 
    width: 100%; 
    border: none; 
    background: transparent; 
    color: #2d3436; 
}

/* Toggle Switch */
.switch { 
    position: relative; 
    display: inline-block; 
    width: 45px; 
    height: 24px; 
}

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

.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    transition: .4s; 
    border-radius: 34px; 
}

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

input:checked + .slider { 
    background-color: #2ed573; 
}

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

/* ===== APPEARANCE PAGE ===== */
.theme-tabs-container { 
    background: #dfe6e9; 
    border-radius: 15px; 
    padding: 4px; 
    display: flex; 
    gap: 4px; 
    width: 100%; 
    box-sizing: border-box; 
    margin-bottom: 15px; 
}

.theme-tab { 
    flex: 1; 
    padding: 8px; 
    border: none; 
    background: transparent; 
    border-radius: 12px; 
    font-size: 0.9rem; 
    font-weight: bold; 
    color: #b2bec3; 
    cursor: pointer; 
    transition: all 0.2s; 
    font-family: inherit; 
}

.theme-tab.active { 
    background: #fff; 
    color: #e6c619; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.theme-content-section { 
    display: none; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
    width: 100%; 
}

.theme-content-section.active { 
    display: grid; 
    animation: fadeIn 0.3s ease-out; 
}

.theme-option { 
    width: 100%; 
    aspect-ratio: 3 / 5; 
    border-radius: 15px; 
    cursor: pointer; 
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); 
    border: 4px solid #fff; 
    position: relative; 
    box-sizing: border-box; 
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; 
    overflow: hidden; 
    background: #eee; 
}

.theme-option:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0,0,0,0.15); 
}

.theme-option.active { 
    border-color: #2ed573; 
    transform: scale(1.02); 
    box-shadow: 0 0 0 2px #2ed573, 0 8px 20px rgba(46, 213, 115, 0.3); 
}

.theme-option-bg {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background-size: cover !important; 
    background-position: center !important; 
    background-repeat: no-repeat !important;
    z-index: 1; 
}

.theme-option i { 
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #fff; 
    font-size: 1.5rem; 
    background: #2ed573; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.2); 
    z-index: 10; 
}

.theme-option.active i { 
    display: flex; 
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

@keyframes popIn { 
    0% { transform: translate(-50%, -50%) scale(0); } 
    100% { transform: translate(-50%, -50%) scale(1); } 
}

/* ===== LEVELS PAGE ===== */
.levels-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
    padding: 0; 
    width: 100%; 
    box-sizing: border-box; 
}

.level-card { 
    background: #fff; 
    border-radius: 15px; 
    padding: 8px; 
    cursor: pointer; 
    box-shadow: 0 4px 0 #dfe6e9; 
    position: relative; 
    border: 2px solid transparent; 
    aspect-ratio: 1 / 1; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.level-card:active { 
    transform: translateY(2px); 
    box-shadow: 0 1px 0 #dfe6e9; 
}

.level-card.active { 
    border-color: #2ed573; 
    background: #f0fff4; 
}

.mini-board-container { 
    position: relative; 
    transform-origin: center center; 
}

.mini-tile { 
    position: absolute; 
    width: 10px; 
    height: 12px; 
    background: linear-gradient(to bottom, #ffffff 0%, #dfe6e9 100%); 
    border: 1px solid #b2bec3; 
    border-radius: 2px; 
    box-shadow: 0 1px 0 #95a5a6; 
}

.level-card .check-mark { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
    color: #2ed573; 
    font-size: 1rem; 
    background: #fff; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    display: none; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    z-index: 100; 
}

html[dir="rtl"] .level-card .check-mark { 
    left: 5px; 
    right: auto; 
}

.level-card.active .check-mark { 
    display: flex; 
}

/* ===== GAME PAGE ===== */
#gamePage { 
    transition: background 0.5s ease; 
    overflow: hidden; 
    justify-content: flex-start; 
}

#game-bg-layer {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    filter: blur(8px); 
    -webkit-filter: blur(8px); 
    transform: scale(1.1); 
    transition: background 0.5s ease; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.game-top-bar, 
.center-game-area, 
.game-controls { 
    position: relative; 
    z-index: 2; 
}

.center-game-area { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    flex: 1; 
    width: 100%; 
    padding-bottom: 90px; 
}

.game-top-bar { 
    width: 100%; 
    padding: 15px 20px; 
    display: grid; 
    grid-template-columns: auto 1fr auto; 
    grid-template-areas: "level-area space coin-area"; 
    align-items: center; 
    box-sizing: border-box; 
    position: relative; 
    z-index: 10; 
}

.level-indicator { 
    grid-area: level-area; 
    font-family: inherit; 
    font-weight: 800; 
    font-size: 2rem; 
    color: #e6c619; 
    text-shadow: 0 2px 0 rgba(0,0,0,0.2); 
    text-align: left; 
    margin: 0; 
}

html[dir="rtl"] .level-indicator { 
    text-align: right; 
}

#gamePage .coin-group-wrapper { 
    grid-area: coin-area; 
    justify-self: end; 
    display: flex; 
    gap: 5px; 
}

/* ===== DOCK ===== */
.dock-wrapper { 
    background: var(--dock-bg); 
    /* backdrop-filter: blur(10px); REMOVED for performance */
    padding: 5px; 
    border-radius: 15px; 
    display: flex; 
    gap: 2px; 
    margin-bottom: 20px; 
    border: 2px solid var(--dock-border); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); 
    position: relative; 
    z-index: 5; 
    box-sizing: border-box; 
    max-width: 98%; 
}

.dock-slot { 
    width: 42px; 
    height: 42px; 
    background-color: rgba(0,0,0,0.1); 
    border-radius: 8px; 
    flex-shrink: 0; 
}

.dock-wrapper.danger { 
    background: rgba(255, 0, 0, 0.3); 
    border-color: #ff7675; 
}

/* ===== GAME BOARD ===== */
.game-board {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible; /* 🔥 ini penting */
}

/* ===== GAME CONTROLS ===== */
.game-controls {
    position: absolute; 
    bottom: 50px; 
    left: 50%; 
    transform: translateX(-50%);
    background: transparent; 
    border: none; 
    backdrop-filter: none; 
    box-shadow: none; 
    padding: 0;              
    border-radius: 25px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 1000; 
    width: auto; 
    gap: 25px;
}

.game-action-btn {
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    background: #fff; 
    border: none; 
    color: #e6c619;
    font-size: 1.8rem; 
    cursor: pointer;
    box-shadow: 0 4px 0 #dfe6e9, 0 5px 10px rgba(0,0,0,0.15);
    transition: all 0.1s; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
}

.game-action-btn:active { 
    transform: translateY(3px); 
    box-shadow: 0 0 0 #dfe6e9; 
}

.btn-badge {
    position: absolute; 
    top: -2px; 
    right: -2px;
    background: #ff4757; 
    color: #fff;
    font-size: 0.85rem; 
    font-family: inherit; 
    font-weight: 800;
    width: 22px; 
    height: 22px; 
    border-radius: 50%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    border: 2px solid #fff; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    z-index: 10;
}

/* ===== TILES ===== */
.tile { 
    width: 56px; 
    height: 56px; 
    background: linear-gradient(to bottom, #ffffff 0%, #ecf0f1 100%); 
    border-radius: 10px; 
    position: absolute; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0 4px 0 #bdc3c7, 0 5px 8px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.4); 
    border: 1px solid #bdc3c7; 
    cursor: pointer; 
    z-index: 1; 
    transition: transform 0.1s, filter 0.1s; 
    /* Performance optimization: hint the browser about upcoming changes */
    will-change: transform, opacity;
}

.tile.flying { 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-out; /* Optimized transition properties */
    z-index: 5000 !important; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); 
    transform: scale(1.15); 
}

.tile.in-dock { 
    width: 42px !important; 
    height: 42px !important; 
    box-shadow: 0 1px 0 #bdc3c7; 
    border-radius: 8px; 
    transform: none !important; 
    z-index: 2000 !important; 
}

.tile.blocked { 
    filter: brightness(0.65) contrast(0.9); 
    background-color: #95a5a6; 
    cursor: default; 
    pointer-events: none; 
    color: rgba(0,0,0,0.15); 
    box-shadow: 0 2px 0 #7f8c8d; 
    border-color: #7f8c8d; 
}

.tile.blocked i { 
    opacity: 0.5; 
}

.tile:not(.blocked):not(.in-dock):hover { 
    filter: brightness(1.05); 
    transform: translateY(-2px); 
    z-index: 999 !important; 
}

.tile.removed {
    animation: dropDown 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards !important;
    box-shadow: none !important; 
    border-color: transparent !important; 
    z-index: 5 !important;
}

.tile i { 
    font-size: 2.2rem; 
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); 
    pointer-events: none; 
}

.tile.in-dock i { 
    font-size: 1.4rem; 
}
 
/* TILE IMAGE*/

.tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* LOGO TITLE*/
.game-logo {
  width: 800px;
  max-width: 90%;
  display: block;
  margin: 0 auto;
}

/* ===== DROP DOWN ANIMATION ===== */
@keyframes dropDown {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(60px) scale(0.8); opacity: 0; }
}

/* ===== WIN MODAL ===== */
.win-modal {
    background: linear-gradient(180deg, #ffffff 0%, #f0f3f6 100%);
    border: 4px solid #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    padding-top: 60px;
    margin-top: 40px;
    position: relative;
    overflow: visible; 
    transform: scale(0.9);
    animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes modalPopIn { 
    to { transform: scale(1); } 
}

.win-icon-container {
    position: absolute; 
    top: -65px;
    left: 50%; 
    transform: translateX(-50%);
    width: 90px; 
    height: 90px; 
    background: linear-gradient(45deg, #f1c40f, #f39c12);
    border-radius: 50%; 
    border: 5px solid #fff; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
    z-index: 10; 
    animation: floatCrown 3s ease-in-out infinite;
}

.win-icon-container i { 
    font-size: 3rem; 
    color: #fff; 
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.1)); 
}

@keyframes floatCrown {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

.win-modal .modal-title {
    font-size: 2.2rem; 
    margin-top: 10px;
    margin-bottom: 5px; 
    color: #2d3436; 
    text-shadow: none; 
    font-family: inherit;
}

.win-stars { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-bottom: 15px; 
}

.win-stars i { 
    color: #dcdde1; 
    font-size: 1.5rem; 
    text-shadow: 0 2px 0 rgba(0,0,0,0.1); 
}

.win-stars i.active { 
    color: #f1c40f; 
    animation: starPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

.win-stars i:nth-child(1) { 
    animation-delay: 0.2s; 
}

.win-stars i:nth-child(2) { 
    animation-delay: 0.4s; 
    font-size: 2rem; 
    margin-top: -10px; 
}

.win-stars i:nth-child(3) { 
    animation-delay: 0.6s; 
}

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

.win-reward {
    background: #fff8e1; 
    color: #f39c12; 
    padding: 10px 25px; 
    border-radius: 50px;
    font-family: inherit; 
    font-weight: 800; 
    font-size: 1.4rem;
    border: 2px solid #ffe6a7; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 0 rgba(0,0,0,0.05);
}

.win-buttons-row { 
    display: flex; 
    gap: 10px; 
    justify-content: center; 
    width: 100%; 
}

.win-buttons-row button { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    padding: 6px 20px; 
    height: 45px;
}

.win-glow {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 200%; 
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); 
    z-index: -1; 
    pointer-events: none; 
    animation: rotateGlow 10s linear infinite;
}

/* Loss specific styles */
.win-modal.is-loss .win-icon-container {
    background: linear-gradient(45deg, #ff7675, #d63031);
}

.win-modal.is-loss .win-stars,
.win-modal.is-loss .win-reward {
    display: none;
}

.win-modal.is-loss .modal-title {
    color: #d63031 !important;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* ===== MODAL OVERLAY ===== */
.modal-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 20000; 
    display: none; 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(5px); /* Kept here as it's for a modal overlay, not constant game elements */
    border-radius: inherit; 
}

.modal-content { 
    background: #fff; 
    padding: 15px; 
    border-radius: 25px; 
    text-align: center; 
    width: 75%; 
    max-width: 250px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.3); 
}

.modal-title { 
    font-size: 1.6rem; 
    font-family: inherit; 
    font-weight: 800; 
    margin-bottom: 15px; 
    color: #2d3436; 
    text-shadow: 0 2px 0 rgba(0,0,0,0.05); 
}

html[lang="ar"] .modal-title { 
    font-family: 'Lalezar', sans-serif; 
}

.modal-btn { 
    margin-top: 10px; 
    padding: 8px 16px; 
    font-size: 1rem; 
    border-radius: 15px; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    font-family: inherit; 
    transition: all 0.1s; 
    position: relative; 
    top: 0; 
    color: #fff; 
    font-weight: bold;
}

.modal-btn:active { 
    top: 4px; 
    box-shadow: none !important; 
    transform: scale(0.98); 
}

.btn-green { 
    background: linear-gradient(to bottom, #55efc4, #00b894); 
    box-shadow: 0 4px 0 #00947e, 0 5px 10px rgba(0, 184, 148, 0.3); 
}

.btn-red { 
    background: linear-gradient(to bottom, #ff7675, #d63031); 
    box-shadow: 0 4px 0 #b32627, 0 5px 10px rgba(214, 48, 49, 0.3); 
}

/* ===== EXTENDED MENU ===== */
#extendedMenu {
    position: absolute; 
    top: 80px; 
    right: 20px;
    left: auto;
    background: #fff; 
    border-radius: 15px; 
    padding: 8px;
    display: none; 
    flex-direction: column; 
    gap: 8px; 
    z-index: 1000; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    transition: opacity 0.2s, transform 0.2s;
    transform-origin: top right;
}

#extendedMenu.show { 
    display: flex; 
    opacity: 1; 
    transform: scaleY(1); 
}

html[dir="rtl"] #extendedMenu {
    left: 20px;
    right: auto;
    transform-origin: top left;
}

.menu-popover-btn { 
    width: 45px; 
    height: 45px; 
    border-radius: 12px; 
    background: #fff; 
    color: #e6c619; 
    border: 1px solid #dfe6e9; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    font-size: 1.3rem; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    transition: all 0.1s; 
}

.menu-popover-btn:hover { 
    background: #f1f2f6; 
    transform: translateY(-1px); 
}

/* ===== تخصيص صفحة شراء العملات ===== */
#coinsPage .scrollable-content {
    justify-content: center;
}

#coinsPage .shop-grid {
    padding: 0 20px;
}