:root {
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-color: #212529;
    --muted-color: #6c757d;
    --accent-color: #d6336c;
    --border-color: #dee2e6;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 1rem;
}

.page-wrapper { max-width: 1400px; margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; position: relative; }
.page-header h1 { font-size: 2.2rem; font-weight: 800; color: var(--accent-color); margin: 0; text-align: center; }
.back-link { order: -1; position: static; margin-right: auto; text-decoration: none; color: var(--muted-color); font-weight: 600; }

.main-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem; }
.game-column { flex: 1 1 auto; min-width: 0; }
.info-column { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 2rem; }

/* --- Overrides & Fixes --- */
#game-container { display: flex; flex-direction: row; background-color: var(--card-bg); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); border: 1px solid var(--border-color); }
#grid-container { position: relative; width: auto !important; height: auto !important; margin-right: 0; border: 2px solid #ccc; }
#sidebar { width: 300px; margin-top: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }

/* Apple Overflow Fix: Target the pseudo-element */
.apple::before {
    top: -2px !important; /* Pull the stem down inside the box */
}

/* --- New UI Elements --- */
#leaderboard-container, .how-to-play { background: var(--card-bg); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); border: 1px solid var(--border-color); }
#leaderboard-container h2, .how-to-play h2 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 0.8rem; margin-bottom: 1rem; color: var(--accent-color); }
#leaderboard-list { list-style: none; padding: 0; }
.how-to-play ul { padding-left: 1.2rem; }
.how-to-play li { margin-bottom: 0.5rem; }

/* --- Responsive Scaling --- */
@media (max-width: 1100px) {
    .main-content { flex-direction: column; align-items: center; }
    .game-column, .info-column { min-width: 100%; width: 100%; max-width: 100%; }
    .page-header h1 { font-size: 1.8rem; }
}

@media (max-width: 850px) {
    /* Stack sidebar below grid on small screens */
    #game-container { flex-direction: column; align-items: center; }
    #sidebar { width: 100%; }
}

/* Mobile: hide apple stem so numbers are readable */
@media (max-width: 600px) {
    #grid .apple::before { display: none !important; }
}

/* --- Interaction Robustness: prevent selection and event eating --- */
#game-container, #grid-container, #grid, .apple {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

/* Selection overlay should never block pointer events */
#selection-box { pointer-events: none; }

/* Ensure auto-solve overlays are clearly visible and non-interactive */
.auto-solve-overlay {
    border: 2px dashed var(--accent-color);
    background: rgba(214, 51, 108, 0.08);
    pointer-events: none;
    border-radius: 6px;
}

/* Subtle toast for secret hint activation */
.hint-toast {
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background: #212529;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    font-size: 14px;
    z-index: 9999;
    opacity: 0.95;
}

/* Floating button to explicitly trigger the hint via password */
.hint-fab {
    position: fixed;
    right: 14px;
    bottom: 18px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    font-weight: 700;
    cursor: pointer;
    z-index: 9999;
}

/* Responsive grid sizing: cell/gap scale with viewport, not transform */
#grid {
    --cell: clamp(32px, 5.2vw, 50px);
    --gap: clamp(3px, 0.7vw, 5px);
    display: grid;
    grid-template-columns: repeat(var(--cols, 17), var(--cell));
    grid-template-rows: repeat(var(--rows, 10), var(--cell));
    gap: var(--gap);
    padding: var(--gap);
    box-sizing: border-box;
}

/* Floating button to explicitly trigger the hint via password */
.hint-fab {
    position: fixed;
    right: 14px;
    bottom: 18px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    font-weight: 700;
    cursor: pointer;
    z-index: 9999;
}