/* ==========================================================================
   TILE MASTER - STYLESHEET (Annotated Version)
   Professional & Organized Structure
   ========================================================================== */

/* ==========================================================================
   1. IMPORTS & VARIABLES
   ========================================================================== */

/* Importing Google Fonts for multi-language support */
@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');

/* CSS Variables for Global Theming
   (Changing these values updates the entire app theme) */
:root {
    /* Color Palette */
    --game-bg-top: #4cd137;
    --game-bg-bottom: #00a8ff;
    --primary-btn: #2ed573;
    
    /* UI Elements Colors */
    --dock-bg: rgba(255, 255, 255, 0.5);     /* Transparent white for dock */
    --dock-border: rgba(255, 255, 255, 0.6);
    
    /* Status Colors */
    --success: #2ed573;
    --danger: #ff7675;
    --text-dark: #2d3436;
}

/* ==========================================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================================== */

/* Global Reset: Ensures consistent box sizing across all browsers */
* {
    box-sizing: border-box; /* Width/Height includes padding and border */
}

/* Lock the viewport to prevent zooming and ensure full screen app */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;        /* Prevents scrolling of the main page */
    overscroll-behavior: none; /* отключает pull-to-refresh и эластичную прокрутку */
    overscroll-behavior-y: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    position: fixed;         /* Fixes position relative to the window */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

body {
    font-family: 'Fredoka', sans-serif; /* Default Font */
    background-color: var(--text-dark); 
    display: flex;
    justify-content: center;
    user-select: none; /* Disables text selection like a native app */
    -webkit-tap-highlight-color: transparent; /* Removes blue highlight on mobile tap */
    //touch-action: manipulation; /* Optimizes for touch interactions */
}

/* Language-specific Font Families: Overrides default font based on HTML lang attribute */
html[lang="ar"] body { font-family: 'Readex Pro', sans-serif; } /* Arabic */
html[lang="ja"] body { font-family: 'Noto Sans JP', sans-serif; } /* Japanese */
html[lang="ko"] body { font-family: 'Noto Sans KR', sans-serif; } /* Korean */
html[lang="zh"] body { font-family: 'Noto Sans SC', sans-serif; } /* Chinese */

/* Custom Scrollbar Styling (Webkit browsers like Chrome/Safari) */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }

/* ==========================================================================
   3. LAYOUT ARCHITECTURE
   ========================================================================== */

/* Main Container - Acts as the mobile screen wrapper */
#mobile-frame {
    width: 100vw;       /* Full Viewport Width */
    height: 100vh;      /* Full Viewport Height */
    position: relative;
    background-image: url('photo/1.png'); /* Default BG Image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-x: auto; 
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

/* Generic Page Container Logic (All pages use this class) */
.page-container {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

/* Utility class to hide pages */
.page-container.hidden { 
    display: none; 
}

/* Scrollable Sub-Pages (Settings, Shop, etc.) */
#shopPage, #coinsPage, #settingsPage, #languagePage, #appearancePage, #levelsPage {
    overflow-y: auto;      /* Allow vertical scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
}

/* Sub-Page Wrapper Structure */
.sub-page-wrapper { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
}

/* Sticky Header for Sub-pages */
.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: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; 
    justify-content: center;
    position: sticky;    /* Stays at top while scrolling */
    top: 0; 
    border-radius: 0; 
    z-index: 50;       /* High Z-index to sit above content */
    flex-shrink: 0;   /* Prevents header from shrinking */
}

.sub-page-header h2 { 
    margin: 0;
    grid-column: 2;
    color: #1e90ff; 
    font-size: clamp(1.6rem, 4.5vw, 2.2rem); /* Responsive Font Size */
    font-family: inherit; 
}

/* Scrollable Content Area */
.scrollable-content {
    flex: 1;           /* Takes available height */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start;
    width: 100%; 
    box-sizing: border-box; 
    padding: 20px; 
}

/* ==========================================================================
   4. UI COMPONENTS (BUTTONS & INPUTS)
   ========================================================================== */

/* Icon Button (Round) */
.game-icon-btn {
    width: 52px; 
    height: 52px; 
    border: none; 
    border-radius: 50%; 
    background: #fff; 
    color: #1e90ff; 
    font-size: 1.5rem; 
    cursor: pointer;
    /* 3D Button Effect using shadow */
    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); } /* Slight lift on hover */
.game-icon-btn:active { 
    transform: translateY(2px); /* Push down on click */
    box-shadow: 0 0 0 #dcdde1; /* Remove shadow to simulate depth */
}
.game-icon-btn.hidden-in-header { display: none !important; }

/* Primary Action Button (Start Button) */
.start-btn {
    padding: 16px 66px; 
    font-size: clamp(1.8rem, 5.3vw, 2.6rem); 
    font-weight: 800; 
    color: #fff;
    background: var(--primary-btn); 
    border: none; 
    border-radius: 60px; 
    cursor: pointer;
    /* Deep Shadow for 3D effect */
    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; /* Breathing animation */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    max-width: 95%; 
    font-family: inherit; 
    margin-top: 50px; 
    text-align: center;
}

.start-btn:active { 
    transform: translateY(4px) scale(0.98); /* Press effect */
    box-shadow: 0 0 0 0 #218c74; /* Remove shadow */
    animation: none; /* Stop animation while pressed */
}

/* 3D Buy Button (Used in Shop) */
.buy-btn-3d {
    border: none; 
    border-radius: 15px; 
    padding: 8px 0; 
    width: 100%;
    color: #fff; 
    cursor: pointer; 
    display: flex; 
    flex-direction: row-reverse; /* Icon right, text left (mostly) */
    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; /* Moves down */
    box-shadow: 0 0 0 transparent !important; /* Shadow disappears */
    transform: scale(0.98);
}

/* Button Variants (Gradients and Shadows) */
.magic-theme .buy-btn-3d { 
    background: linear-gradient(to bottom, #cd84f1, #c44569); 
    box-shadow: 0 4px 0 #b33771, 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, #18dcff, #17c0eb); 
    box-shadow: 0 4px 0 #1289a7, 0 8px 15px rgba(18, 137, 167, 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); 
}

/* Modal Buttons */
.modal-btn { 
    margin-top: 12px; 
    padding: 12px 20px; 
    font-size: clamp(1.1rem, 3.2vw, 1.4rem); 
    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;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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); 
}

/* Navigation Buttons (Back/Save) */
.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: #1e90ff; }
.header-save-btn { right: 15px; color: #1e90ff; }

/* RTL Adjustments for Navigation Buttons */
html[dir="rtl"] .back-btn-fixed { 
    left: auto; right: 15px; 
    transform: translateY(-50%) rotate(180deg); /* Flip arrow icon */
}
html[dir="rtl"] .header-save-btn { right: auto; left: 15px; }

/* Input Controls */
.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: 0 auto 10px auto; 
    border: 2px solid transparent; 
}

.search-box input { 
    font-family: inherit; 
    font-size: clamp(0.8rem, 2.5vw, 1.1rem); 
    font-weight: 600; 
    outline: none; 
    margin: 0 10px; 
    width: 100%; 
    border: none; 
    background: transparent; 
    color: var(--text-dark); 
}

/* Toggle Switch (Checkbox style) */
.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: var(--success); }
input:checked + .slider:before { transform: translateX(21px); }

/* ==========================================================================
   5. HEADER & UI ELEMENTS
   ========================================================================== */

/* Top Bar (Coins, Settings Button) */
.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, .left-group { display: flex; align-items: center; gap: 10px; }

/* 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 34px 4px 14px;
    min-width: 110px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(1.1rem, 3.2vw, 1.45rem); 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    height: 48px; 
    box-sizing: border-box;
    justify-self: end;
}

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

.coin-display i {
    color: #f1c40f;
    font-size: clamp(1.1rem, 3.2vw, 1.45rem); 
    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; }

/* Small Add Button inside Coin Display */
.coin-display .buy-coins-btn {
    position: absolute; top: -4px; right: -4px; left: auto;
    width: 24px !important; height: 24px !important; min-width: 0 !important;
    font-size: 18px !important; font-weight: 900 !important; color: #f1c40f !important;
    background: #ffffff; border: 2px solid #ffffff; border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    display: flex; justify-content: center; align-items: center; padding: 0; 
    cursor: pointer; z-index: 20;
}

/* RTL Adjustments for Buy Button */
html[dir="rtl"] .coin-display .buy-coins-btn, html[dir="rtl"] .buy-coins-btn { 
    right: auto; left: -4px; 
}

/* Extended Menu (Popover) */
#extendedMenu {
    position: absolute; top: 95px; 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; /* Animation pivot point */
}

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

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

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

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

/* Notifications (Toast Messages) */
.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: clamp(0.8rem, 2.5vw, 1.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); /* Bouncy effect */
    display: flex; align-items: center; justify-content: center;
    gap: 6px; pointer-events: none; width: max-content; max-width: 90%;
}

.toast-notification.show { top: 45%; } /* Slide down to visible area */

/* Notifications (Tutor Toast Messages) */
.tutor-notification {
    position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    background: #fff; color: #1e90ff;
    padding: 10px 20px; font-size: clamp(1.0rem, 2.5vw, 1.5rem); border-radius: 20px;
    font-family: inherit; font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 20001;
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy effect */
    display: flex; align-items: center; justify-content: center;
    gap: 6px; pointer-events: none; width: max-content; max-width: 90%;
}

.tutor-notification.show { top: 45%; } /* Slide down to visible area */

/* Notifications (Tutor Toast Messages) */
.tutor-girl {
    position: absolute;
    top: -500px; left: 50%;
    transform: translateX(-50%);
    z-index: 20000;
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy effect */
    display: flex; align-items: center; justify-content: center;
    gap: 6px; pointer-events: none; width: max-content; max-width: 90%;
}

.tutor-girl.show { top: 55%; } /* Slide down to visible area */

/* Notifications (Tutor Toast Messages) */
.tutor-hand {
    position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    background: #fff; color: #1e90ff;
    padding: 10px 20px; font-size: clamp(2.8rem, 2.5vw, 3.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); /* Bouncy effect */
    display: flex; align-items: center; justify-content: center;
    gap: 6px; pointer-events: none; width: max-content; max-width: 90%;
}

.tutor-hand.show { top: 280px; } /* Slide down to visible area */

/* ==========================================================================
   6. MAIN MENU
   ========================================================================== */

#mainPage { justify-content: flex-start; padding-top: 18vh; }

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

/* Title Styles */
h1 {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(2.6rem, 5.5vw, 5.7rem); margin: 0; line-height: 1.1;
    color: #ffd32a; 
    /* Multi-layer text shadow for depth */
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 3px 3px 0 var(--text-dark), 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; /* Gentle hover */
}

html[lang="ar"] h1 { font-family: 'Baloo Bhaijaan 2', cursive; letter-spacing: 0; }
html[lang="ja"] h1, html[lang="zh"] h1, html[lang="ko"] h1 { 
    font-size: clamp(2.8rem, 8.6vw, 4.3rem); letter-spacing: 0; 
}

/* Level Badge */
#mainSubtitle {
    display: block; font-family: inherit; font-weight: 800;
    font-size: clamp(1.4rem, 4.3vw, 2.1rem); margin: 40px auto; 
    background: #ff9f43; color: #fff;
    padding: 12px 43px; 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;
}

/* ==========================================================================
   7. GAMEPLAY STYLES
   ========================================================================== */

#gamePage { transition: background 0.5s ease; overflow: hidden; justify-content: space-between; }

/* Blurred Background Layer */
#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 (Level, Coins) */
.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%;
}

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

.level-indicator { 
    grid-area: level-area; font-family: inherit; font-weight: 800; 
    font-size: clamp(1.8rem, 5vw, 3rem); color: #ffffff; 
    text-shadow: 0 2px 0 rgba(0,0,0,0.2); text-align: left; margin: 15px; justify-self: center;
}

html[dir="rtl"] .level-indicator { text-align: right; }
#gamePage .coin-group-wrapper { grid-area: coin-area; justify-self: start; display: flex; gap: 5px; }

/* Dock (Tile Collection Area) */
.dock-wrapper { 
    background: var(--dock-bg); padding: 2px; border-radius: 15px;
    display: flex; gap: 2px; margin: 0 auto 10px auto;
    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: clamp(40px, 10vw, 60px); height: clamp(40px, 10vw, 60px); 
    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: var(--danger); }

/* Game Board (Where tiles spawn) */
.game-board { 
    position: relative; width: 100%; max-width: 2000px; 
    height: clamp(300px, 60vh, 600px); margin: 0 auto; 
    direction: ltr !important; /* IMPORTANT: Keeps coordinates Left->Right even in Arabic */
    left: 0; right: 0;
}

/* Tiles */
.tile { 
    width: clamp(40px, 10vw, 65px); height: clamp(40px, 10vw, 65px); 
    background: linear-gradient(to bottom, #ffffff 0%, #ecf0f1 100%); 
    border-radius: 10px; position: absolute; 
    display: flex; justify-content: center; align-items: center; 
    /* 3D effect via border and multiple shadows */
    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; 
    will-change: transform, opacity; /* Hint for browser to optimize GPU */
    overflow: hidden;
}

.tile-img {
    width: 100%; height: 100%; object-fit: cover; pointer-events: none;
    display: block; user-select: none; -webkit-user-drag: none;
}

.tile i { display: none; }

/* Tile States */
.tile.flying { 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-out;
    z-index: 5000 !important; /* On top of everything */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); /* Elevate shadow */
}

.tile.in-dock { 
    width: clamp(40px, 10vw, 60px) !important; height: clamp(40px, 10vw, 60px) !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; /* Clicks pass through */
    color: rgba(0,0,0,0.15); box-shadow: 0 2px 0 #7f8c8d; border-color: #7f8c8d; 
}

.tile.blocked .tile-img { opacity: 0.5; filter: grayscale(100%) contrast(0.8); }

.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;
}

/* Game Controls (Magic/Undo Buttons) */
.game-controls {
    flex-shrink: 0; padding: 0 0 50px 0; background: transparent; border: none;
    backdrop-filter: none; border-radius: 25px; 
    display: flex; justify-content: center; align-items: center; z-index: 1000; 
    width: 100%; gap: 25px; bottom: 10px;
}

.game-action-btn {
    width: clamp(55px, 12vw, 55px); height: clamp(55px, 12vw, 55px);
    border-radius: 50%; background: #fff; border: none; color: #1e90ff;
    font-size: clamp(1.8rem, 4vw, 2.4rem); 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;
    grid-area: settings-area;     justify-self: end;
}

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

/* Badge (Count indicator on buttons) */
.btn-badge {
    position: absolute; top: -6px; right: -6px;
    background: linear-gradient(135deg, #ff6b81, #ff4757); color: #fff;
    font-size: 12px; font-weight: 800; line-height: 1; font-family: inherit;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; text-align: center;
    padding: 0; box-sizing: border-box; 
    border: 3px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.2); 
    z-index: 10; pointer-events: none; 
}

.buy-coins-btn {
    position: absolute; top: -4px; right: -4px; left: auto;
    min-width: 26px; height: 26px; background: #fff; color: #1e90ff; 
    border: 2px solid #fff; border-radius: 13px; font-size: 0.75rem; 
    padding: 0 6px; 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; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

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

/* ==========================================================================
   8. PAGE SPECIFIC: SHOP & CARDS
   ========================================================================== */

.shop-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 15px; width: 100%; max-width: 800px; padding: 0; box-sizing: border-box; margin: 0 auto;
}

.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 Themes */
.magic-theme { background: linear-gradient(160deg, #ffffff 50%, #fce4ec 100%); border: 2px solid #f8bbd0; }
.undo-theme { background: linear-gradient(160deg, #ffffff 50%, #e3f2fd 100%); border: 2px solid #bbdefb; }
.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, #da85fc, #a55eea); box-shadow: 0 8px 20px rgba(165, 94, 234, 0.4); }
.undo-theme .shop-icon-circle { background: linear-gradient(to bottom right, #4bcffa, #0fb9b1); 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: clamp(0.9rem, 2.8vw, 1.2rem); 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: #8e44ad; }
.undo-theme .shop-card-title { color: #2980b9; }
.coin-theme .shop-card-title { color: #d35400; }

.coin-amount-display {
    font-family: inherit; font-size: clamp(1.0rem, 3.2vw, 1.3rem); font-weight: 800;
    color: #d35400; background: #fff8e1; padding: 3px 12px; border-radius: 12px;
    display: flex; align-items: center; justify-content: 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; }

.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; 
}

/* Coins Page Specific */
#coinsPage .scrollable-content { justify-content: flex-start; }

/* ==========================================================================
   9. PAGE SPECIFIC: SETTINGS, LEVELS, THEMES
   ========================================================================== */

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

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

/* Transparent content boxes for specific pages */
#appearancePage .content-box, #levelsPage .content-box, #settingsPage .content-box, #languagePage .content-box {
    background: transparent; box-shadow: none; padding: 0; margin-top: 10px;
}

/* Settings Rows */
.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: clamp(0.9rem, 2.7vw, 1.2rem); color: var(--text-dark); 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; 
}

/* Levels Page */
.levels-grid { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; 
    padding: 0; width: 100%; max-width: 800px; box-sizing: border-box; margin: 0 auto;
}

.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 { border-color: var(--success); 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: var(--success); 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; 
}

.level-card.active { 
    border-color: var(--success) !important; background-color: #f0fff4;        
    box-shadow: 0 0 0 2px var(--success); transform: scale(1.02); z-index: 5;
}

/* Appearance Page */
.theme-tabs-container { 
    background: #dfe6e9; border-radius: 15px; padding: 4px; display: flex; gap: 4px; width: 100%; 
    max-width: 600px; box-sizing: border-box; margin: 0 auto 15px auto; 
}

.theme-tab { 
    flex: 1; padding: 8px; border: none; background: transparent; border-radius: 12px; 
    font-size: clamp(0.8rem, 2.2vw, 1rem); font-weight: bold; color: #b2bec3; 
    cursor: pointer; transition: all 0.2s; font-family: inherit; display: flex; justify-content: center; align-items: center;
}

.theme-tab.active { background: #fff; color: #1e90ff; 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%; max-width: 800px; margin: 0 auto;
}

.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: var(--success); transform: scale(1.02); 
    box-shadow: 0 0 0 0 2px var(--success), 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: var(--success); 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) }

/* Filter Logic */
body.filter-main .theme-option[data-category="game"] { display: none !important; }
body.filter-game .theme-option[data-category="main"] { display: none !important; }

/* ==========================================================================
   10. MODALS & OVERLAYS
   ========================================================================== */

.modal-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); z-index: 20000; display: none; 
    justify-content: center; align-items: center; backdrop-filter: blur(8px); /* Blurs content behind */
    -webkit-backdrop-filter: blur(8px); border-radius: 0; 
}

/* Win/Loss Modal */
.win-modal {
    background: #fff; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 20px; padding-top: 55px; margin: 0; position: relative; overflow: visible; 
    transform: scale(0.9); animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    width: clamp(300px, 85vw, 380px); border-radius: 25px; text-align: center;
}

.win-icon-container {
    position: absolute; top: -55px; 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; 
}

.win-icon-container i { 
    font-size: clamp(2.5rem, 6vw, 3.5rem); color: #fff; 
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.2)); 
}

.win-modal .modal-title {
    font-family: inherit; font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.8rem); 
    margin: 10px 0 15px 0; color: var(--text-dark); text-shadow: none; 
}

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

.win-stars i { 
    color: #dcdde1; font-size: clamp(1.4rem, 4vw, 2.2rem); 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(2) { animation-delay: 0.2s; }
.win-stars i:nth-child(1) { animation-delay: 0.3s; }
.win-stars i:nth-child(3) { animation-delay: 0.4s; }

.win-reward {
    background: #fff8e1; color: #f39c12; padding: 10px 25px; border-radius: 15px;
    font-family: inherit; font-weight: 800; font-size: clamp(1rem, 3vw, 1.6rem);
    border: 2px solid #ffe6a7; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px; 
}

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

.win-buttons-row button { 
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; 
    padding: 14px; border-radius: 15px; border: none; font-family: inherit; 
    font-size: clamp(1rem, 3vw, 1.2rem); font-weight: 700; color: #fff; cursor: pointer; 
    transition: all 0.1s ease-out; box-shadow: inset 0 -5px 0 rgba(0,0,0,0.2);
}

.win-buttons-row button:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }

.win-buttons-row button:first-child { background: linear-gradient(to top, #1dd1a1, #2bdec1); }
.win-buttons-row button:last-child { background: linear-gradient(to top, #ff6b6b, #ff8b8b); }

/* Loss Specifics */
.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; margin-bottom: 25px; }
.win-glow { display: none; }

/* Generic Modal Content */
.modal-content { 
    background: #fff; padding: 25px; border-radius: 25px; text-align: center; 
    width: clamp(250px, 75vw, 340px); box-shadow: 0 15px 40px rgba(0,0,0,0.3); 
}

.modal-title { 
    font-size: clamp(1.7rem, 5vw, 1.7rem); font-family: inherit; font-weight: 800;
    margin-bottom: 20px; color: var(--text-dark); text-shadow: 0 2px 0 rgba(0,0,0,0.05); 
}

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

/* ==========================================================================
   11. 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 pulseBtn { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
}

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

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

@keyframes dropDown {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(60px) scale(0.8); opacity: 0; }
}

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

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

/* ==========================================================================
   12. RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Mobile Small */
@media (max-width: 699px) {
    .shop-grid, .levels-grid, .theme-content-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        width: 100%;
    }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 1023px) {
    .shop-grid, .levels-grid, .theme-content-section {
        width: 100%; max-width: 850px; margin: 0 auto;
    }
    #shopPage .shop-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
    #shopPage .shop-card { width: 210px; flex: 0 0 auto; }
    #coinsPage .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    #coinsPage .shop-card { width: 100% !important; flex: none; }
    .levels-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
    .theme-content-section { grid-template-columns: repeat(3, 1fr); gap: 20px; }
} 

/* Desktop */
@media (min-width: 1024px) {
    .levels-grid, .theme-content-section, #shopPage .shop-grid, #coinsPage .shop-grid {
        width: 100%; max-width: 1400px; margin: 0 auto;
    }
    .shop-card .shop-icon-circle {
        width: 85px; height: 85px; font-size: 2.5rem; border-radius: 25px; margin-bottom: 8px;
    }
    .shop-card .shop-card-title { font-size: 1.2rem; }
    #shopPage .shop-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
    #shopPage .shop-card { width: 220px; flex: 0 0 auto; }
    #coinsPage .shop-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 25px; }
    #coinsPage .shop-card { width: 100% !important; flex: none; }
    .levels-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1000px; }
    .theme-content-section { grid-template-columns: repeat(4, 1fr); gap: 25px; }
    #gamePage { justify-content: center; position: relative; }
    .game-top-bar { position: relative; top: 0; left: 0; width: 100%; }
    .center-game-area { flex: 0 1 auto; height: auto; transform: none; margin-bottom: 0; }
    .game-controls { padding-bottom: 30px; margin-top: 20px; flex-shrink: 0; }
}