/* game-override.css - Linked in all game frames to style them consistently */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Orbitron:wght@500;700;900&display=swap');

:root {
    --bg-dark: #000000;
    --neon-purple: #8b5cf6;
    --neon-purple-glow: rgba(139, 92, 246, 0.4);
    --border-color: rgba(255, 255, 255, 0.08);
}

/* Hide standalone headers, back buttons, and redundant game titles */
header,
.back-btn,
.action-btns,
#backToHubBtn,
.logo,
.game-header,
h1,
.game-title,
.title,
#helpBtn,
.help-btn {
    display: none !important;
}

body {
    background-color: transparent !important;
    background-image: none !important;
    overflow: hidden !important; /* Force no scrollbars inside the iframe */
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    width: 100% !important;
}

/* Force Jakarta Font universally in games, except for FontAwesome elements */
body, button, input, select, textarea, p, a, span:not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
}

/* 
 * 1. Adaptive Gameboard Container 
 * Centers canvas perfectly inside the viewport and removes scrolling.
 */
.game-container, .container, #game-container, .game-wrapper {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Ensure canvas doesn't stretch, keeps aspect ratio and stays within limits */
canvas, #gameCanvas, #canvas {
    max-width: 100% !important;
    max-height: 96% !important; /* Bounded inside iframe viewport height */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(139, 92, 246, 0.15) !important;
    border: 2px solid rgba(139, 92, 246, 0.25) !important;
    margin: auto !important;
}

.canvas-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 
 * 2. Tight Scoreboards (Puzzle / Multiplayer Games)
 * Kept inside layout flow (relative) to avoid overlapping.
 */
.scoreboard, .score-container, .score-box-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important; /* Kept relative to avoid overlapping */
}

.score-box, .score-item, .score-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
    text-align: center !important;
    flex: 1 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.score-title, .score-label, .score-text {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #94a3b8 !important;
    margin-bottom: 2px !important;
}

.score-val, .score-value, .score {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

/* HIDE scoreboards inside the iframe for single player canvas games (Parent Console renders it) */
.game-retroSnake .scoreboard,
.game-NeonAsteroids .scoreboard,
.game-NeonRunner .scoreboard,
.game-NeonBlocks .scoreboard,
.game-NeonBreakout .scoreboard,
.game-neonFlap .scoreboard,
.game-ColorBounce .scoreboard,
.game-NeonTower .scoreboard,
.game-NeonBouncer .scoreboard,
.game-NeonSmash .scoreboard {
    display: none !important;
}

/* 
 * 3. Modern Modals & Modifiers
 */
.modal-overlay, .popup, .overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(5, 5, 8, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 0 35px rgba(139, 92, 246, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    padding: 15px !important;
}

/* FIX: Removed .card from modal styling list to prevent layout collision in card grids */
.modal-content, .popup-content, .modal-box {
    background: rgba(15, 22, 36, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
    max-width: 90% !important;
    width: 320px !important;
    margin: auto !important;
}

.modal-box h2, .modal-content h2, .popup h2 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
    color: var(--neon-purple) !important;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.4) !important;
}

.modal-box p, .modal-content p, .popup p {
    color: #94a3b8 !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
    font-size: 0.9rem !important;
}

/* 
 * 4. Premium Arcade Buttons 
 */
button, 
.btn, 
#startGameBtn, 
#tryAgainBtn, 
#startGame, 
#restartBtn,
#playAgainBtn,
.modal-content button {
    background: linear-gradient(135deg, var(--neon-purple) 0%, #7c3aed 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

button:hover, 
.btn:hover, 
#startGameBtn:hover, 
#tryAgainBtn:hover,
#restartBtn:hover,
.modal-content button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45) !important;
    filter: brightness(1.1) !important;
}

button:active, 
.btn:active {
    transform: translateY(0) !important;
}

/* 
 * 5. Specific Game Grid/Card Sizing Adaptations
 * Prevents boards or grids from overflowing on short screen viewports.
 */

/* Memory Match board scaling */
.game-memoryMatch .game-board {
    max-width: min(90vw, 65vh) !important;
    margin: 0 auto !important;
    gap: 8px !important;
    width: 100% !important;
}
.game-memoryMatch .card {
    border-radius: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ludo Duel player cards and dice scale-down */
.game-ludo .players {
    gap: 10px !important;
}
.game-ludo .player {
    width: 120px !important;
    padding: 8px !important;
    border-radius: 12px !important;
}
.game-ludo .player h2 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
}
.game-ludo .dice {
    width: 50px !important;
    height: 50px !important;
    padding: 4px !important;
    margin: 6px auto !important;
}
.game-ludo .dice span {
    width: 5px !important;
    height: 5px !important;
}

/* Minesweeper board scaling */
.game-NeonMinesweeper .board-wrapper {
    max-width: none !important;
    width: fit-content !important;
    margin: 0 auto !important;
    padding: 6px !important;
}
.game-NeonMinesweeper .board {
    gap: 1px !important;
}

/* Word Game board scaling adaptions */
.game-NeonWords .board {
    max-width: min(100%, 35vh) !important;
    gap: 4px !important;
    padding: 5px !important;
    margin: 0 auto !important;
}
.game-NeonWords .row {
    gap: 4px !important;
}
.game-NeonWords .tile {
    font-size: 1.3rem !important;
    border-radius: 6px !important;
}
.game-NeonWords .keyboard {
    gap: 4px !important;
    padding: 5px 0 !important;
}
.game-NeonWords .key {
    height: 38px !important;
    font-size: 0.85rem !important;
}
.game-NeonWords .key.wide {
    min-width: 50px !important;
}