/* ==========================================================================
   Theming (Dark Mode Default)
   ========================================================================== */
:root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --menu-bg: #2d2d2d;
    --menu-border: #444;
    --btn-bg: #3d3d3d;
    --btn-text: #e0e0e0;
    --btn-hover: #4d4d4d;
    --header-bg: #2d2d2d;
    --canvas-bg: #111;
    --text-muted: #999;
}

[data-theme="light"] {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --menu-bg: #fff;
    --menu-border: #ccc;
    --btn-bg: #fff;
    --btn-text: #333;
    --btn-hover: #f0f0f0;
    --header-bg: #fff;
    --canvas-bg: #e0e0e0;
    --text-muted: #666;
}

/* ==========================================================================
   Base Styles & Top Navigation Bar
   ========================================================================== */
body { font-family: sans-serif; margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); transition: background 0.3s; }

.top-bar { 
    position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; 
    align-items: center; background: var(--header-bg); padding: 10px 20px; 
    border-bottom: 1px solid var(--menu-border); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-icons { font-size: 24px; cursor: pointer; user-select: none; }
.puzzle-header-info { text-align: center; flex-grow: 1; }
.puzzle-header-info h2 { margin: 0; font-size: 1.2em; color: var(--text-color); }

/* ==========================================================================
   Dropdown Menus & Calendar
   ========================================================================== */
.dropdown-menu { display: none; position: absolute; background: var(--menu-bg); border: 1px solid var(--menu-border); padding: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); z-index: 1000; top: 55px; border-radius: 5px; }
#hamburger-menu { left: 10px; width: 280px; }
#gear-menu { right: 10px; width: 220px; }
.menu-item { margin-bottom: 12px; font-size: 0.9em; }

/* Hamburger Menu Header Links */
.games-menu-header { margin: 0 0 10px 0; color: var(--text-color); font-size: 1.1em; border-bottom: 1px solid var(--menu-border); padding-bottom: 8px;}
.game-link { text-decoration: none; color: var(--text-color); font-weight: bold; display: block; padding: 5px 0; transition: color 0.2s;}
.game-link:hover { color: #d9534f; }

.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: bold; }
.calendar-nav { cursor: pointer; padding: 0 5px; user-select: none; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendar-day-header { font-size: 0.8em; color: var(--text-muted); }
.calendar-day { padding: 5px; font-size: 0.9em; border-radius: 3px; }
.calendar-day.active { background: #d9534f; color: white; cursor: pointer; font-weight: bold; }
.calendar-day.active:hover { background: #c9302c; }
.calendar-day.empty { background: transparent; }
.calendar-day.disabled { color: var(--menu-border); }

/* Buttons & Inputs */
.custom-btn { padding: 8px 12px; cursor: pointer; margin-top: 5px; width: 100%; border: 1px solid var(--menu-border); border-radius: 4px; background: var(--btn-bg); color: var(--btn-text); transition: background 0.2s;}
.custom-btn:hover { background: var(--btn-hover); }
.custom-btn.attention-highlight { background: #777; color: white; border-color: #555; font-weight: bold; }
[data-theme="light"] .custom-btn.attention-highlight { background: #ccc; color: black; border-color: #aaa; }
.btn-close-menu { background: var(--btn-hover); font-weight: bold; margin-top: 10px; }
select.piece-dropdown { padding: 6px; width: 100%; border-radius: 4px; border: 1px solid var(--menu-border); background: var(--btn-bg); color: var(--btn-text); }

/* ==========================================================================
   Puzzle Container & HUD
   ========================================================================== */
#error-banner { display: none; background: #ffdddd; color: #d8000c; padding: 10px; text-align: center; border-bottom: 1px solid #d8000c; }
#puzzle-wrapper { position: relative; width: 100vw; height: 75vh; background: var(--canvas-bg); overflow: hidden; visibility: hidden; }
#forPuzzle { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* Overlays */
#start-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 50; }
[data-theme="light"] #start-overlay { background: rgba(224, 224, 224, 0.85); }
.intro-card { background: var(--menu-bg); padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); text-align: center; max-width: 80%; border-top: 5px solid #d9534f; }
.intro-card h1 { margin: 0 0 5px 0; color: var(--text-color); font-size: 2em; }
#start-overlay-title { margin: 0 0 15px 0; color: #d9534f; font-size: 1.2em; font-weight: normal;}
.intro-card p { font-size: 1.1em; color: var(--text-muted); margin-bottom: 25px; line-height: 1.4; }
#btn-start-game { font-size: 1.2em; padding: 12px 35px; cursor: pointer; border-radius: 5px; border: none; background: #d9534f; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: background 0.2s; }
#btn-start-game:hover { background: #c9302c; }

/* HUD Elements */
#puzzle-timer { position: absolute; top: 10px; left: 10px; background: var(--menu-bg); color: var(--text-color); padding: 5px 10px; border-radius: 5px; font-family: monospace; font-size: 1.2em; font-weight: bold; z-index: 10; display: none; cursor: pointer; user-select: none; border: 1px solid var(--menu-border); opacity: 0.9;}
#btn-fullscreen { position: absolute; bottom: 15px; left: 15px; background: var(--menu-bg); color: var(--text-color); border: 1px solid var(--menu-border); font-size: 24px; padding: 5px 10px; cursor: pointer; border-radius: 5px; z-index: 10; opacity: 0.8;}
#ghost-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.15; pointer-events: none; z-index: 1; display: none; }

/* Toolbar & Icons */
#puzzle-toolbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; display: none; }
.toolbar-btn { background: var(--menu-bg); color: var(--text-color); border: 1px solid var(--menu-border); border-radius: 5px; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.2s; opacity: 0.9;}
.toolbar-btn:hover { background: var(--btn-hover); opacity: 1; }
.toolbar-btn.active { background: #d9534f; color: white; border-color: #c9302c; }
.toolbar-btn svg { width: 22px; height: 22px; }

/* Image Modal (Borderless) & Help Modal */
#image-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 2000; display: none; justify-content: center; align-items: center; cursor: pointer; }
#image-modal img { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: 0 5px 25px rgba(0,0,0,0.5); border-radius: 5px;}
.popup-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--menu-bg); color: var(--text-color); padding: 25px 30px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 60; display: none; max-width: 80%; border: 1px solid var(--menu-border);}
#help-modal { width: 400px; }
#help-modal h3 { margin-top: 0; color: var(--text-color); }
#help-modal ul { padding-left: 20px; color: var(--text-muted); line-height: 1.5; }
#help-modal li { margin-bottom: 10px; }
.btn-close-popup { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 20px; color: var(--text-muted); line-height: 1; user-select: none; z-index: 10;}
.btn-close-popup:hover { color: var(--text-color); }
#image-modal .btn-close-popup { color: #fff; top: 20px; right: 30px; font-size: 30px; }

/* Q&A Success Popup Container */
#puzzle-qa-container { border-top: 5px solid #4CAF50; text-align: center; width: 450px; }
.success-heading { color: #4CAF50; margin-top: 0; font-size: 1.8em; }
.puzzle-stats { font-size: 0.95em; color: var(--text-muted); margin: 0 0 15px 0; background: var(--canvas-bg); padding: 8px; border-radius: 5px;}
#puzzle-question { font-size: 1.1em; color: var(--text-color); margin: 15px 0; line-height: 1.4; }
#btn-reveal-answer { margin-top: 10px; padding: 10px 20px; cursor: pointer; width: auto; background: #d9534f; color: white; border: none; border-radius: 4px; font-weight: bold; }
#btn-reveal-answer:hover { background: #c9302c; }
#puzzle-answer { margin: 0 0 15px 0; font-weight: bold; color: var(--text-color); font-size: 1.1em; }
#puzzle-come-back { margin-top: 20px; font-style: italic; color: var(--text-muted); font-size: 0.9em; }
.attribution-bottom { font-size: 0.75em; color: var(--text-muted); margin: 20px 0 0 0; text-align: center; display: block;}
.feedback-link { color: var(--text-muted); font-size: 0.85em; margin-top: 10px;}
.feedback-link a { color: #d9534f; text-decoration: none; }
#social-share { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--menu-border); }
.social-btn { display: inline-block; width: auto; margin: 0 3px; font-size: 0.85em; }

#phantom-basement { display: none !important; }