/* Activity Heatmap - 모던 레트로 스타일 */
#activity-heatmap {
    /* Minimal, GitHub-like grid */
    --heatmap-cell-size: 18px;
    --heatmap-gap: 8px;
    --heatmap-neutral: rgba(15, 23, 42, 0.9);
    --heatmap-l1: #fecaca;
    --heatmap-l2: #f87171;
    --heatmap-l3: #dc2626;
    --heatmap-l4: #991b1b;

    display: grid;
    grid-template-columns: repeat(7, var(--heatmap-cell-size));
    grid-auto-rows: var(--heatmap-cell-size);
    gap: var(--heatmap-gap);
    justify-content: center;
    margin: 1rem auto 0;
}
.heatmap-cell {
    width: var(--heatmap-cell-size);
    height: var(--heatmap-cell-size);
    background: var(--heatmap-neutral);
    border-radius: 0;
    border: 0.2rem solid #000000;
    transition: none;
    box-shadow: 0.1rem 0.1rem 0 #000000;
}
.heatmap-cell:hover {
    transform: translate(-0.1rem, -0.1rem);
    box-shadow: 0.2rem 0.2rem 0 #000000;
    border: 0.2rem solid var(--accent);
}
.heatmap-cell:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.heatmap-cell.level-1 {
    background: var(--heatmap-l1);
    border: 1px solid #000000;
}
.heatmap-cell.level-2 {
    background: var(--heatmap-l2);
    border: 1px solid #000000;
}
.heatmap-cell.level-3 {
    background: var(--heatmap-l3);
    border: 1px solid #000000;
}
.heatmap-cell.level-4 {
    background: var(--heatmap-l4);
    border: 2px solid #000000; /* 최고 레벨은 두꺼운 테두리 */
}
.heatmap-cell.empty {
    background: rgba(10, 18, 42, 0.3); /* 네이비 - 투명도 높임 */
    border-color: rgba(0, 0, 0, 0.3); /* 연한 검은색 테두리 */
}

/* Heatmap panel placement next to settings */
#start-modal .modal-boxes {
    display: flex;
    gap: 2.6rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
#settings-panel {
    position: relative;
    width: min(68vw, 720px);
    max-width: 720px;
    flex-shrink: 0;
    overflow-y: visible;
    padding: 2.4rem !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

#settings-panel h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-light);
    text-align: left;
    padding: 0 0 0.8rem;
    background: transparent;
    border-bottom: 0.3rem solid var(--primary);
    border-radius: 0;
    font-family: var(--font-display);
    text-shadow: none;
    box-shadow: none;
}

#settings-panel h2:first-of-type {
    margin-top: 0;
}
#heatmap-panel {
    max-width: 280px;
    text-align: center;
    flex-shrink: 0;
}
#heatmap-group {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 280px;
}

/* Responsive: stack panels and allow full width on small screens */
@media (max-width: 900px) {
    #start-modal {
        align-items: flex-start;
        padding: var(--space-sm);
    }
    #start-modal .modal-boxes {
        width: 100%;
        margin: 0 auto;
    }
    #settings-panel {
        width: 100%;
        max-width: none;
    }
    #heatmap-group,
    #heatmap-panel,
    #dday-panel {
        max-width: none;
        width: 100%;
    }
    #heatmap-panel,
    #dday-panel {
        box-sizing: border-box;
    }
    #activity-heatmap {
        --heatmap-cell-size: 16px;
        --heatmap-gap: 6px;
    }
}

@media (max-width: 600px) {
    #activity-heatmap {
        --heatmap-cell-size: 14px;
        --heatmap-gap: 5px;
    }
}

@media (max-width: 420px) {
    #activity-heatmap {
        --heatmap-cell-size: 12px;
        --heatmap-gap: 4px;
    }
}

/* If screen space is insufficient, hide heatmap and D-Day to prioritize buttons */
@media (max-width: 900px), (max-height: 750px) {
    #heatmap-group {
        display: none !important;
    }
}
#heatmap-panel {
    position: relative;
}

#heatmap-panel h2 {
    margin-bottom: 1rem;
    font-size: 2.2rem;
    font-family: var(--font-display);
    word-break: keep-all;
    color: var(--text-light);
}

/* Heatmap title: emphasize label in red */
#heatmap-panel .heatmap-label {
    color: var(--primary);
    font-weight: 700;
}
#heatmap-panel #heatmap-count {
    color: var(--accent);
    font-weight: 700;
}

/* 히트맵 확장 버튼 */
.expand-heatmap-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: var(--text-light);
    border: 0.2rem solid var(--secondary);
    border-radius: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: none;
    box-shadow: 0.15rem 0.15rem 0 var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.expand-heatmap-btn:hover {
    background: var(--accent);
    transform: translate(-0.1rem, -0.1rem);
    box-shadow: 0.25rem 0.25rem 0 var(--secondary);
}

.expand-heatmap-btn:active {
    transform: scale(0.95) translate(2px, 2px);
    box-shadow: 0px 0px 0px var(--secondary);
}

/* Responsive Styles */
@media (max-width: 768px) {
    :root {
        font-size: 8px;
    }
    /* Avoid horizontal scroll due to large fixed widths */
    body {
        overflow-x: hidden;
    }
    header {
        padding: 1rem;
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }
    .hud-left,
    .hud-center,
    .hud-right {
        flex: none;
        width: 100%;
        justify-content: center;
    }
    .hud-right {
        flex-wrap: wrap;
    }
    header h1 {
        margin-bottom: 1rem;
    }
    main {
        padding-top: 22rem; /* Adjust based on new header height */
    }
    .tabs {
        flex-wrap: wrap;
    }
    .tab {
        flex-basis: 48%;
    }
    .grade-container {
        flex-direction: column;
    }
}
@media (max-width: 480px) {
    .hud-center {
        flex-direction: column;
    }
    main {
        padding-top: 28rem;
    }
}