/* PlayTool Theme for Idle Empire */
/* Applies PlayTool's specific aesthetics to override the game's default styles */

:root {
    --playtool-bg-dark: #030712;
    --playtool-glass: rgba(17, 24, 39, 0.4);
    --playtool-glass-border: rgba(255, 255, 255, 0.05);
    --playtool-text: #f3f4f6;
    --playtool-text-dim: #9ca3af;
    --accent-primary: #8b5cf6;
    --accent-secondary: #d946ef;
    --accent-cyan: #06b6d4;

    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Global Overrides */
body {
    background-color: transparent !important;
    /* Let PlayTool background show through */
    font-family: var(--font-main) !important;
    color: var(--playtool-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* Apply Outfit font to all text elements */
* {
    font-family: var(--font-main) !important;
}

#game-container {
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    position: relative !important;
    display: none !important; /* Hidden by default */
    visibility: visible !important;
    box-sizing: border-box !important;
    flex-direction: row !important; /* Changed to row for side-by-side layout */
    gap: 15px !important;
}

/* Ensure flex display when visible */
body #game-container.active {
    display: flex !important;
    flex-direction: row !important; /* Side-by-side layout */
    gap: 15px !important;
}

/* Game board container - Left side */
.game-board-container {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    backdrop-filter: blur(10px) !important;
}

/* Game info panel - Right side */
.game-info {
    min-width: 160px !important;
    max-width: 180px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    backdrop-filter: blur(10px) !important;
    box-sizing: border-box !important;
}

/* Legacy support - keep for backward compatibility */
#game-play-area {
    position: relative !important;
    flex: 0 0 70% !important;
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
}

#ui-area {
    position: relative !important;
    flex: 0 0 30% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(0, 0, 0, 0.85) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* Show game container when active class is present - HIGHEST PRIORITY */
body #game-container.active,
html body #game-container.active {
    display: flex !important;
    visibility: visible !important;
    flex-direction: row !important; /* Side-by-side layout */
    gap: 15px !important;
}

/* Also show if inline style explicitly sets display to block */
body #game-container[style*="display: block"],
body #game-container[style*="display:block"],
html body #game-container[style*="display: block"],
html body #game-container[style*="display:block"] {
    display: flex !important;
    visibility: visible !important;
    flex-direction: row !important; /* Side-by-side layout */
    gap: 15px !important;
}

/* UI Panel - Glassmorphism */
#ui {
    background: transparent !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    padding: 0.5vh 1vw !important;
    box-shadow: none !important;
    flex: 1 !important;
    overflow-y: auto !important;
}

/* UI Text - Enhanced Readability */
#ui * {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 255, 255, 0.2) !important;
}

#ui div {
    font-size: clamp(9px, 1.2vw, 12px) !important;
}

#ui span {
    font-weight: 700 !important;
    font-size: clamp(10px, 1.5vw, 14px) !important;
}

#ui #skill-points {
    font-weight: 800 !important;
    font-size: clamp(10px, 1.8vw, 16px) !important;
    color: #8b5cf6 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 10px rgba(139, 92, 246, 0.6) !important;
}

/* Stats Bars - Modern Look */
#skill-points-ui,
#player-hp-ui,
#level-ui,
#score-ui,
#top-stats-row {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    font-family: var(--font-main) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: clamp(14px, 2vw, 16px) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Stats Text Colors - Enhanced Readability */
#skill-points-ui *,
#player-hp-ui *,
#level-ui *,
#score-ui *,
#top-stats-row * {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

/* Top Stats Row - Enhanced Visibility */
#top-stats-row {
    padding: 0.5vh 1vw !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

#top-stats-row > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5vw !important;
    padding: 0.3vh 0 !important;
    background: transparent !important;
}

#top-stats-row > div:first-child > div {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: clamp(10px, 1.2vw, 14px) !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

#top-stats-row span {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.4) !important;
}

/* Buttons - PlayTool Style (Purple Gradient) */
#ui button,
#game-menu button,
.button,
#pause-menu button,
#settings-menu button,
#stats-menu button {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
    text-shadow: none !important;
    font-family: var(--font-main) !important;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

#ui button:hover,
#game-menu button:hover,
.button:hover,
#pause-menu button:hover,
#settings-menu button:hover,
#stats-menu button:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5) !important;
    filter: brightness(1.1) !important;
}

#ui button:active,
#game-menu button:active,
.button:active,
#pause-menu button:active {
    transform: translateY(1px) !important;
}

/* Menus - Dark Glass Overlay (Default Hidden) */
#game-menu,
#pause-menu,
#settings-menu,
#stats-menu {
    display: none !important; /* All menus hidden by default */
    background: rgba(3, 7, 18, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--playtool-glass-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    z-index: 1000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Game Menu - Show by default during start */
#game-menu {
    display: flex !important;
}

/* Show menus when active class is present - HIGHEST PRIORITY */
body #pause-menu.active,
body #settings-menu.active,
body #stats-menu.active,
html body #pause-menu.active,
html body #settings-menu.active,
html body #stats-menu.active {
    display: flex !important;
    visibility: visible !important;
}

/* Explicitly hide menus using class or inline style override */
#game-menu.hidden,
#game-menu[style*="display: none"],
#pause-menu.hidden,
#settings-menu.hidden,
#stats-menu.hidden {
    display: none !important;
}

/* Menu Text Colors */
#game-menu *,
#pause-menu *,
#settings-menu *,
#stats-menu * {
    color: var(--playtool-text) !important;
}

/* Typography in Menus */
h1,
h2 {
    font-family: var(--font-main) !important;
    font-weight: 800 !important;
    background: linear-gradient(to right, #fff, var(--playtool-text-dim));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* Settings Menu Title - Compact */
#settings-menu h2,
#stats-menu h2 {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Settings/Stats Content Box - Compact */
#settings-content,
#stats-content {
    background: rgba(17, 24, 39, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--playtool-glass-border) !important;
    border-radius: 1.6vh !important;
    box-shadow: 0 2vh 5vh rgba(0, 0, 0, 0.5) !important;
    padding: 1.4vh 2.2vw !important;
    min-width: 41.25vw !important;
    max-width: 49.5vw !important;
    color: var(--playtool-text) !important;
    max-height: 49vh !important;
    overflow-y: auto !important;
}

/* Settings Close Button - Next to Title */
#settings-menu > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 49.5vw !important;
    margin-bottom: 1.6vh !important;
}

#settings-menu h2 {
    margin: 0 !important;
}

#settings-close-btn {
    padding: 6px 16px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* Settings Items - Compact */
#settings-content .settings-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    margin-bottom: 4px !important;
    font-size: clamp(13px, 1.8vw, 15px) !important;
}

#settings-content .settings-item label {
    font-size: clamp(13px, 1.8vw, 15px) !important;
    margin-right: 12px !important;
}

#settings-content .settings-item input[type="range"] {
    width: 120px !important;
    margin: 0 8px !important;
}

#settings-content .settings-item select {
    padding: 6px 8px !important;
    font-size: clamp(13px, 1.8vw, 15px) !important;
}

/* Statistics section in settings - Compact */
#settings-content .stats-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#settings-content .stats-item:last-child {
    border-bottom: none !important;
}

#settings-content .stats-label {
    font-size: clamp(12px, 1.8vw, 14px) !important;
    color: var(--playtool-text-dim) !important;
    font-weight: 500 !important;
}

#settings-content .stats-value {
    font-size: clamp(13px, 2vw, 15px) !important;
    color: var(--playtool-text) !important;
    font-weight: 700 !important;
    font-family: var(--font-main) !important;
}

/* Stats Items Styling */
.stats-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.stats-item:last-child {
    border-bottom: none !important;
}

.stats-label {
    font-size: clamp(14px, 2vw, 16px) !important;
    color: var(--playtool-text-dim) !important;
    font-weight: 500 !important;
}

.stats-value {
    font-size: clamp(16px, 2.5vw, 18px) !important;
    color: var(--playtool-text) !important;
    font-weight: 700 !important;
    font-family: var(--font-main) !important;
}

/* Hide Debug Elements in Production */
#dev-sidebar {
    display: none !important;
}

/* Small Buttons (Settings) - Stats button removed */
#settings-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: clamp(30px, 4vw, 40px) !important;
    height: clamp(30px, 4vw, 40px) !important;
    top: 0.5vh !important;
    right: 0.5vw !important;
    z-index: 103 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Hide stats button - integrated into settings */
#stats-btn {
    display: none !important;
}

/* Text Elements - Ensure Readability */
p, span, div, label, input, select, textarea {
    color: var(--playtool-text) !important;
}

/* Input Fields */
input, select, textarea {
    background: rgba(3, 7, 18, 0.6) !important;
    border: 1px solid var(--playtool-glass-border) !important;
    border-radius: 8px !important;
    color: var(--playtool-text) !important;
    padding: 8px 12px !important;
}

/* Scrollbar Hide */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Zero Scroll Layout - Prevent iframe overflow */
html {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* Ensure game fits within iframe */
#game-container canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Experience Bar - Enhanced Readability */
#exp-bar {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

#exp-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: clamp(13px, 2vw, 16px) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.4) !important;
    font-family: var(--font-main) !important;
}

#exp-fill {
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.6) !important;
}

/* HP Bar - Enhanced Visibility */
#hp-bar {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

#hp-fill {
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6) !important;
}