/* Telegram Web App Styles */

body.telegram-webapp {
    padding: 0;
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #000000);
}

body.telegram-webapp .container {
    padding: 10px;
}

body.telegram-webapp header {
    padding: 15px 10px;
    margin-bottom: 20px;
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #000000);
}

body.telegram-webapp header h1 {
    font-size: 1.8em;
    margin-bottom: 5px;
    color: var(--tg-theme-text-color, #000000);
    -webkit-text-fill-color: var(--tg-theme-text-color, #000000);
}

body.telegram-webapp .subtitle {
    font-size: 1em;
    color: var(--tg-theme-hint-color, #999999);
}

body.telegram-webapp .btn {
    background: var(--tg-theme-button-color, #667eea);
    color: var(--tg-theme-button-text-color, #ffffff);
    border: none;
}

body.telegram-webapp .btn:hover {
    opacity: 0.9;
}

body.telegram-webapp .auth-card,
body.telegram-webapp .game-card {
    background: var(--tg-theme-bg-color, #ffffff);
    border: 1px solid var(--tg-theme-hint-color, #e0e0e0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

body.telegram-webapp .nav-tabs {
    background: var(--tg-theme-bg-color, #ffffff);
    border-bottom: 1px solid var(--tg-theme-hint-color, #e0e0e0);
    pointer-events: auto;
}

body.telegram-webapp .nav-tab {
    color: var(--tg-theme-text-color, #000000);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
    touch-action: manipulation;
    user-select: none;
}

body.telegram-webapp .nav-tab.active {
    border-bottom-color: var(--tg-theme-button-color, #667eea);
    color: var(--tg-theme-button-color, #667eea);
}

body.telegram-webapp .stat-card {
    background: var(--tg-theme-bg-color, #ffffff);
    border: 1px solid var(--tg-theme-hint-color, #e0e0e0);
}

body.telegram-webapp .stat-value {
    color: var(--tg-theme-button-color, #667eea);
}

body.telegram-webapp input,
body.telegram-webapp textarea,
body.telegram-webapp select {
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #000000);
    border: 1px solid var(--tg-theme-hint-color, #e0e0e0);
}

body.telegram-webapp input::placeholder,
body.telegram-webapp textarea::placeholder {
    color: var(--tg-theme-hint-color, #999999);
}

body.telegram-webapp a {
    color: var(--tg-theme-link-color, #667eea);
}

/* Hide Telegram-only elements on regular web */
.telegram-only {
    display: none;
}

/* Force-hide Telegram auth block when not in Telegram (body.not-telegram set by JS) */
body.not-telegram #telegram-auth-error {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Diagnostic banner - visible on mobile at top of auth section (only in Telegram) */
#tg-diagnostic {
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 12px 15px;
    margin-bottom: 15px;
    background: rgba(0,0,0,0.9);
    color: #0f0;
    font-size: 13px;
    border-radius: 8px;
    font-family: monospace;
}
body.telegram-webapp #tg-diagnostic {
    background: rgba(0,0,0,0.95);
    color: #4ade80;
}

/* Hide elements that don't make sense in Telegram */
body.telegram-webapp .telegram-hide {
    display: none !important;
}

/* Telegram-specific adjustments */
@media (max-width: 600px) {
    body.telegram-webapp {
        font-size: 14px;
    }
    
    body.telegram-webapp header h1 {
        font-size: 1.5em;
    }
    
    body.telegram-webapp .container {
        padding: 5px;
    }
}