/**
 * Base Styles
 * Foundation styles including body, typography, containers, sections, and cards
 */

/* ===================================== */
/* BODY & LAYOUT                         */
/* ===================================== */

body {
    font-family: 'Quicksand', 'Rounded Mplus 1c', 'Arial Rounded MT Bold', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    padding-top: max(90px, calc(90px + env(safe-area-inset-top)));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    box-sizing: border-box;
    background: var(--background-color);
    color: var(--text-color);
    transition: background 0.3s ease, color 0.3s ease;
}

/* ===================================== */
/* PAGE CONTAINERS                       */
/* ===================================== */

#home-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1; /* Take remaining space in game-container */
    min-height: 0; /* Allow flexbox to work properly */
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#home-page::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Prevent sections from being compressed */
#home-page .section {
    flex-shrink: 0;
}

#game-page, #daily-challenge-page, #time-attack-page, #survival-page {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Game container - outer wrapper with border and shadow */
#game-container {
    width: 100%;
    max-width: 650px;
    max-height: calc(100vh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); /* Fit viewport minus header and safe areas */
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    background: var(--card-background);
    border-radius: 30px;
    box-shadow: var(--bubble-shadow);
    border: 1px solid var(--border-color);
    overflow-y: auto; /* Allow scrolling as fallback for extreme zoom */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#game-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Game status display - fixed size */
#game-status-display {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Game input section with inline stats */
#game-page .section:nth-child(1), #daily-challenge-page .section:nth-child(1), #time-attack-page .section:nth-child(1), #survival-page .section:nth-child(1) {
    background: var(--card-background);
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 32px var(--shadow-color);
    position: relative;
}

#game-page .section:nth-child(1) > *, #daily-challenge-page .section:nth-child(1) > *, #time-attack-page .section:nth-child(1) > * {
    position: relative;
    z-index: 1;
}

/* ===================================== */
/* SECTIONS & CARDS                      */
/* ===================================== */

.section {
    background-color: var(--card-background);
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.08);
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(13, 148, 136, 0.08);
}

#game-page .section,
#time-attack-page .section {
    padding: 15px;
    margin-bottom: 12px;
}

.section:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(13, 148, 136, 0.15);
    background-color: var(--card-hover-background);
}

body.dark-mode .section {
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.15);
}

body.dark-mode .section:hover {
    box-shadow: 0 8px 30px rgba(13, 148, 136, 0.25);
    background-color: #2d2f48;
}

.section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.card {
    background-color: var(--card-background);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(13, 148, 136, 0.1);
    padding: 25px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(13, 148, 136, 0.12);
    z-index: 2;
}

/* Result pages - ensure they fit in container */
#result-page,
#time-attack-result-page,
#daily-result-page,
#survival-result-page {
    max-width: 100%;
    margin-bottom: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* Stats containers */
#game-stats,
#daily-game-stats,
#time-attack-stats {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.18);
    background-color: var(--card-hover-background);
}

body.dark-mode .card {
    border: 1px solid rgba(13, 148, 136, 0.2);
    box-shadow: 0 5px 20px rgba(13, 148, 136, 0.2);
}

body.dark-mode .card:hover {
    box-shadow: 0 10px 35px rgba(13, 148, 136, 0.3);
    background-color: var(--card-hover-background);
}

/* Disable hover effects on result pages - they're informational, not interactive */
#result-page.card:hover,
#daily-result-page.card:hover,
#time-attack-result-page.card:hover,
#survival-result-page.card:hover,
#mp-result-page.card:hover {
    transform: none;
    box-shadow: 0 10px 50px rgba(13, 148, 136, 0.25);
    background-color: var(--card-background);
}

body.dark-mode #result-page.card:hover,
body.dark-mode #daily-result-page.card:hover,
body.dark-mode #time-attack-result-page.card:hover,
body.dark-mode #survival-result-page.card:hover,
body.dark-mode #mp-result-page.card:hover {
    box-shadow: 0 5px 20px rgba(13, 148, 136, 0.2);
    background-color: var(--card-background);
}

/* ===================================== */
/* TYPOGRAPHY                            */
/* ===================================== */

h1, h3, h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 700;
}

/* ===================================== */
/* GENERIC BUTTONS                       */
/* ===================================== */

/* Exclude header buttons, hint button, and modal buttons from generic styling */
button:not(.header-icon-btn):not(.auth-btn):not(.dropdown-item):not(.simple-toast-close):not(.modal-close-btn):not(.hint-button):not(.achievement-toast-close):not(.profile-logout-btn) {
    background: var(--primary-color);
    color: var(--button-text-color);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    width: 100%;
    box-shadow: 0 6px 20px var(--shadow-color);
}

button:not(.header-icon-btn):not(.auth-btn):not(.dropdown-item):not(.simple-toast-close):not(.modal-close-btn):not(.hint-button):not(.achievement-toast-close):not(.challenge-btn):not(.remove-btn):not(.profile-logout-btn):hover {
    background: var(--primary-dark);
    transform: translateY(var(--hover-lift)) scale(1.02);
    box-shadow: 0 10px 30px var(--shadow-color);
}

button:not(.header-icon-btn):not(.auth-btn):not(.dropdown-item):not(.simple-toast-close):not(.modal-close-btn):not(.hint-button):not(.achievement-toast-close):not(.challenge-btn):not(.remove-btn):not(.profile-logout-btn):active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 4px 15px var(--shadow-color);
}

/* ===================================== */
/* BUTTON GROUPS                         */
/* ===================================== */

.button-group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.button-group button {
    flex: 1;
    min-width: 120px;
}

/* Result page button group (used by all game modes) */
.result-button-group {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    width: 100%;
}

.result-button-group button {
    flex: 1;
    width: auto !important;
    margin-bottom: 0 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
}

/* ===================================== */
/* INPUT CONTAINERS                      */
/* ===================================== */

#input-container {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 20px 0;
    padding: 15px;
    min-height: 75px;
}

#ta-input-container,
#daily-input-container,
#survival-input-container {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 20px 0;
    padding: 15px;
    min-height: 75px;
}

#game-page #input-container,
#time-attack-page #ta-input-container,
#daily-challenge-page #daily-input-container,
#survival-page #survival-input-container {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 15px;
}

body.dark-mode #game-page #input-container,
body.dark-mode #time-attack-page #ta-input-container,
body.dark-mode #daily-challenge-page #daily-input-container,
body.dark-mode #survival-page #survival-input-container {
    background: rgba(255, 255, 255, 0.05);
}

/* ===================================== */
/* FONT AWESOME FALLBACKS                */
/* ===================================== */
/*
 * Provides Unicode emoji fallbacks if Font Awesome CDN fails to load
 * JavaScript detects if Font Awesome loaded and adds .fa-fallback class to body
 * These styles only apply when Font Awesome fails to load
 */

/* Trophy icon fallback */
body.fa-fallback .fa-trophy::before {
    content: "🏆";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Moon/Sun icon fallback */
body.fa-fallback .fa-moon::before {
    content: "🌙";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
body.fa-fallback .fa-sun::before {
    content: "☀️";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Coins icon fallback */
body.fa-fallback .fa-coins::before {
    content: "💰";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Fire/streak icon fallback */
body.fa-fallback .fa-fire::before {
    content: "🔥";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Calendar icon fallback */
body.fa-fallback .fa-calendar-day::before,
body.fa-fallback .fa-calendar-alt::before,
body.fa-fallback .fa-calendar-check::before {
    content: "📅";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Bolt/lightning icon fallback */
body.fa-fallback .fa-bolt::before {
    content: "⚡";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* User/profile icon fallback */
body.fa-fallback .fa-user-circle::before {
    content: "👤";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Settings icon fallback */
body.fa-fallback .fa-sliders-h::before,
body.fa-fallback .fa-cog::before {
    content: "⚙️";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Gamepad icon fallback */
body.fa-fallback .fa-gamepad::before {
    content: "🎮";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Award/achievement icon fallback */
body.fa-fallback .fa-award::before {
    content: "🏅";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Star icon fallback */
body.fa-fallback .fa-star::before {
    content: "⭐";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Bell/notification icon fallback */
body.fa-fallback .fa-bell::before {
    content: "🔔";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Users/group icon fallback */
body.fa-fallback .fa-users::before {
    content: "👥";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Sign-in icon fallback */
body.fa-fallback .fa-sign-in-alt::before {
    content: "🔑";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Power-off/logout icon fallback */
body.fa-fallback .fa-power-off::before {
    content: "⏻";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Play icon fallback */
body.fa-fallback .fa-play::before {
    content: "▶";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Times/close icon fallback */
body.fa-fallback .fa-times::before {
    content: "✕";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Question/help icon fallback */
body.fa-fallback .fa-question-circle::before {
    content: "❓";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Volume icons fallback */
body.fa-fallback .fa-volume-up::before {
    content: "🔊";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
body.fa-fallback .fa-volume-mute::before {
    content: "🔇";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Chevron/arrow icons fallback */
body.fa-fallback .fa-chevron-down::before {
    content: "▼";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
body.fa-fallback .fa-chevron-up::before {
    content: "▲";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Signal/difficulty icon fallback */
body.fa-fallback .fa-signal::before {
    content: "📶";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Percentage icon fallback */
body.fa-fallback .fa-percentage::before {
    content: "%";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: bold;
}

/* Stopwatch icon fallback */
body.fa-fallback .fa-stopwatch::before {
    content: "⏱️";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Check/success icon fallback */
body.fa-fallback .fa-check::before,
body.fa-fallback .fa-check-circle::before {
    content: "✓";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Info icon fallback */
body.fa-fallback .fa-info-circle::before {
    content: "ℹ️";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Warning/exclamation icon fallback */
body.fa-fallback .fa-exclamation-circle::before,
body.fa-fallback .fa-exclamation-triangle::before {
    content: "⚠️";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Bullseye icon fallback */
body.fa-fallback .fa-bullseye::before {
    content: "🎯";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Chart icon fallback */
body.fa-fallback .fa-chart-line::before {
    content: "📈";
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}