/* ============================================================
   STYLE.CSS - DOMINO PLATFORM 2026 (Premium Casino Level)
   ============================================================ */

/* --- APP WRAPPERS --- */
#app-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: radial-gradient(ellipse at 50% 20%, #1A1333 0%, #0A0815 60%, var(--bg-void) 100%);
    box-shadow: inset 0 0 100px rgba(108, 92, 231, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

.app-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration-normal) var(--ease-out);
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.app-screen.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    z-index: 10;
}

/* --- LOGIN SCREEN --- */
#screen-login {
    justify-content: center;
    align-items: center;
    padding: var(--space-xl);
    background: radial-gradient(circle at 50% -20%, #2A1B54 0%, var(--bg-void) 80%);
}

.login-container {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

.login-logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

.logo-title-ar {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(to bottom, #FFFFFF 20%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
    letter-spacing: 1px;
}

.logo-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 1.5px;
}

.login-form {
    width: 100%;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    background: var(--glass-bg-heavy);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.05);
}

.login-form-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.phone-input-group {
    display: flex;
    gap: var(--space-sm);
    direction: ltr;
}

.country-selector {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-md);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
}

.country-selector:hover { border-color: var(--color-primary); }

.password-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-pass-btn {
    position: absolute;
    left: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}
.toggle-pass-btn:hover { color: var(--color-primary-light); }

/* --- MAIN MENU SCREEN --- */
#screen-main-menu {
    justify-content: flex-start;
    align-items: center;
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-xl);
}

.menu-profile-island {
    width: 100%;
    max-width: 600px;
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.profile-island-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
}

.pi-name { font-size: 15px; font-weight: 800; color: #FFF; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pi-level { font-size: 12px; font-weight: 700; color: var(--color-success); }

.profile-island-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.coins-badge-premium {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.5);
    padding: 6px 6px 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 215, 0, 0.3);
    font-weight: 800;
    color: var(--color-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}

.add-coins-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    border: none;
    color: #000;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-glow-gold);
}

.logout-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 56, 96, 0.1);
    border: 1px solid rgba(255, 56, 96, 0.3);
    color: var(--color-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.logout-icon-btn:hover {
    background: var(--color-danger);
    color: #FFF;
    box-shadow: var(--shadow-glow-danger);
}

/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    width: 100%;
    max-width: 600px;
}

.qa-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-md) var(--space-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
}
.qa-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px) scale(1.02);
}

.qa-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: var(--shadow-md);
}
.qa-card span { font-size: 11px; font-weight: 700; color: var(--text-primary); text-align: center; }

/* Main Action Buttons */
.premium-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 600px;
}

.main-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    text-align: right;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.main-action-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: var(--shadow-xl);
}

.btn-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-left: var(--space-lg);
    background: rgba(0,0,0,0.3);
    box-shadow: var(--shadow-inner);
}

.btn-texts { display: flex; flex-direction: column; flex: 1; gap: 4px; }
.bt-title { font-size: 18px; font-weight: 900; color: #FFF; }
.bt-sub { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.btn-arrow { color: rgba(255,255,255,0.3); font-size: 16px; transition: transform 0.3s; }
.main-action-btn:hover .btn-arrow { transform: translateX(-8px); color: #FFF; }

.lobby-btn { background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 136, 255, 0.05)); border-color: rgba(0, 240, 255, 0.3); }
.lobby-btn:hover { border-color: rgba(0, 240, 255, 0.6); box-shadow: var(--neon-cyan); }
.lobby-btn .btn-icon { background: linear-gradient(135deg, #00F0FF, #0088FF); color: #000; }

.create-btn { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(108, 92, 231, 0.05)); border-color: rgba(168, 85, 247, 0.3); }
.create-btn:hover { border-color: rgba(168, 85, 247, 0.6); box-shadow: var(--neon-purple); }
.create-btn .btn-icon { background: linear-gradient(135deg, #A855F7, #6C5CE7); color: #FFF; }

.join-btn { background: linear-gradient(135deg, rgba(0, 245, 160, 0.1), rgba(0, 192, 123, 0.05)); border-color: rgba(0, 245, 160, 0.3); }
.join-btn:hover { border-color: rgba(0, 245, 160, 0.6); box-shadow: var(--neon-green); }
.join-btn .btn-icon { background: linear-gradient(135deg, #00F5A0, #00C07B); color: #000; }

.ai-btn { opacity: 0.8; }
.ai-btn .btn-icon { background: rgba(255,255,255,0.1); color: #AAA; }

/* --- MODALS OVERLAY --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    z-index: 1000;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal-content {
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    background: var(--glass-bg-heavy);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    transform: translateY(30px) scale(0.95);
    transition: all var(--duration-slow) var(--ease-spring);
    overflow: hidden;
}
.modal-overlay.active .modal-content { transform: translateY(0) scale(1); }

.modal-header {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 { font-size: 20px; font-weight: 800; color: var(--color-gold); text-shadow: 0 0 15px rgba(255,215,0,0.2); }

.modal-body {
    padding: var(--space-xl);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-footer {
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    gap: var(--space-md);
}
.modal-footer button { flex: 1; }

.mode-selectors { display: flex; gap: var(--space-md); justify-content: center; }
.mode-option { flex: 1; position: relative; cursor: pointer; }
.mode-option input { position: absolute; opacity: 0; }
.mode-option-card {
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    transition: all var(--duration-normal) var(--ease-spring);
}
.mode-option input:checked + .mode-option-card {
    border-color: var(--color-gold);
    background: rgba(255,215,0,0.1);
    color: var(--color-gold);
    box-shadow: 0 0 20px rgba(255,215,0,0.15);
    transform: translateY(-4px);
}

/* --- THEME SHOP STYLES --- */
.theme-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(90deg, rgba(168,85,247,0.1) 0%, transparent 100%);
}
.theme-shop-header h3 { font-size: 18px; font-weight: 800; color: #FFF; display: flex; align-items: center; gap: 8px; }
.ts-coins-display {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.3);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    color: var(--color-gold);
    font-weight: 800;
}

.ts-category-tabs {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ts-category-tabs::-webkit-scrollbar { display: none; }
.ts-cat-tab {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.05);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ts-cat-tab.active { background: var(--color-primary); color: #FFF; box-shadow: var(--shadow-glow-primary); }

.ts-content-area { flex: 1; padding: var(--space-lg) var(--space-xl); overflow-y: auto; }
.ts-tab-pane { display: none; flex-direction: column; gap: var(--space-lg); }
.ts-tab-pane.active { display: flex; animation: fadeIn 0.3s ease; }

.ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md);
}

.ts-duration-bar {
    display: flex;
    background: rgba(0,0,0,0.4);
    border-radius: var(--radius-md);
    padding: 4px;
}
.ts-dur-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 0;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.ts-dur-btn.active { background: rgba(255,255,255,0.1); color: #FFF; box-shadow: var(--shadow-sm); }

.ts-lucky-box {
    text-align: center;
    padding: var(--space-2xl);
    background: radial-gradient(circle at center, rgba(168,85,247,0.2) 0%, transparent 70%);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(168,85,247,0.3);
}
.ts-lucky-title { font-size: 24px; font-weight: 900; color: var(--color-gold); margin-bottom: 8px; text-shadow: 0 0 15px rgba(255,215,0,0.3); }
.ts-lucky-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ts-lucky-btn {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-primary) 100%);
    color: #FFF;
    border: none;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: 800;
    margin-top: var(--space-lg);
    cursor: pointer;
    box-shadow: var(--neon-purple);
    transition: transform 0.2s;
}
.ts-lucky-btn:active { transform: scale(0.95); }

/* --- RESPONSIVE MOBILE FIXES --- */
@media screen and (max-width: 768px) {
    #screen-main-menu { padding: var(--space-lg); }
    .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
    .main-action-btn { padding: var(--space-md); }
    .btn-icon { width: 44px; height: 44px; font-size: 20px; }
    .bt-title { font-size: 16px; }
    .modal-content { max-width: 95vw; padding: var(--space-md); }
    .ts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Landscape Mobile Fixes */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .login-container { flex-direction: row; gap: var(--space-2xl); max-width: 800px; }
    .quick-actions-grid { grid-template-columns: repeat(4, 1fr); }
    .premium-menu-buttons { display: grid; grid-template-columns: repeat(2, 1fr); }
    .modal-content { max-height: 85vh; }
}

/* Animations that are missing */
.rotate-3d-logo {
    animation: floatingLogo 4s ease-in-out infinite;
}