/*
 * The settings panel.
 *
 * Split out of space3d.css so neither file runs long. Everything here dresses
 * the sidebar: the achievement list, the switches, and the option rows.
 */

/* Achievements in the sidebar: solid, no outline, two across */

#settings-body .achievement-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#settings-body .achievement {
    min-width: 0;
    padding: 12px;
    gap: 10px;
    width: 100%;
    border: none;
    background: #202a3c;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    align-items: center;
    font-family: Arial, sans-serif;
    transition: background 0.2s ease, opacity 0.2s ease;
}

#settings-body .achievement.locked {
    opacity: 0.62;
    background: #1b2432;
}

#settings-body .achievement.unlocked {
    background: #2c2447;
}

#settings-body .achievement:hover {
    background: #33405a;
    opacity: 1;
}

#settings-body .achievement.unlocked .achievement-icon {
    color: #a98cf0;
}

#settings-body .achievement.locked .achievement-icon {
    color: rgba(255, 255, 255, 0.45);
}

/* Two columns leave less room per card, so the text has to wrap rather than spill. */
#settings-body .achievement-info {
    min-width: 0;
}

#settings-body .achievement-name {
    font-size: 13px;
    line-height: 1.25;
}

#settings-body .achievement-desc {
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

#settings-body .achievement-icon {
    font-size: 20px;
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    #settings-body .achievement-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.achievement-bar {
    margin-top: 9px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.achievement-bar span {
    display: block;
    height: 100%;
    background: #6f8fd0;
    border-radius: 2px;
}

.achievement.unlocked .achievement-bar {
    display: none;
}

/* Unlock modal */

.achievement-overlay.show {
    pointer-events: auto;
}

.achievement-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.achievement-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.achievement-modal-progress {
    margin: 22px auto 8px auto;
    width: 220px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.achievement-modal-progress span {
    display: block;
    height: 100%;
    background: #7f66d8;
    border-radius: 3px;
}

.achievement-modal-pct {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    /* The stat boxes drop to 12px side padding here, so the track follows them. */
    .level-track {
        left: 12px;
        right: 12px;
        bottom: 8px;
    }

    .pp-corner-btn {
        padding: 10px 14px;
        font-size: 12px;
    }
}

/*
 * The level box makes the stat row three wide, which on a narrow screen runs into
 * the tier counters pinned to the right. The row is capped to the space beside them
 * and the boxes share what is left.
 */
@media (max-width: 520px) {
    .game-stats {
        gap: 6px;
        max-width: calc(100vw - 96px);
    }

    .game-stats .stat-box {
        flex: 0 1 auto;
        min-width: 0;
        padding: 8px 12px;
    }

    .game-stats .stat-label {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .game-stats .stat-value {
        font-size: 20px;
    }
}

/*
 * Hull heat. The sun holds a real place in the world, so this fills as you fly
 * into its corona and drains once you pull away.
 */
.pp-heat {
    /* Below the browse stat boxes; flight and runs pull it up under the
       hull bar, where those boxes are gone. */
    position: fixed;
    top: 190px;
    left: 26px;
    z-index: 60;
    width: 220px;
    padding: 10px 14px 12px;
    border-radius: 12px;
    background: rgba(23, 30, 43, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.pp-heat.pp-on {
    opacity: 1;
}

/* Runs move the stat boxes to the top right, so heat rises under the
   run's own hull bar; free flight keeps the boxes and the lower slot. */
body.pp-run .pp-heat {
    top: 128px;
}

.pp-heat-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
    margin-bottom: 7px;
}

.pp-heat-label i {
    margin-right: 6px;
}

.pp-heat-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.pp-heat-track span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: #d9853f;
    transition: width 0.12s linear;
}

.pp-heat.pp-critical .pp-heat-track span {
    background: #e0563f;
}

.pp-heat.pp-critical {
    animation: pp-heat-pulse 0.7s ease-in-out infinite;
}

@keyframes pp-heat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/*
 * Switches and rows
 * ---------------------------------------------------------------
 * A setting with two states is a switch, not two cards to choose between: the
 * card pair says "pick one of these things", the switch says "this is on".
 */

.pp-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.pp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pp-toggle:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.24);
}

.pp-toggle-on {
    background: rgb(77 130 196 / 26%);
    border-color: rgba(255, 255, 255, 0.3);
}

.pp-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pp-toggle-label {
    font-weight: 600;
}

.pp-toggle-note {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.55);
}

.pp-switch {
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    transition: background 0.2s ease;
    position: relative;
}

.pp-toggle-on .pp-switch {
    background: #4d82c4;
}

.pp-switch-dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s ease;
}

.pp-toggle-on .pp-switch-dot {
    transform: translateX(18px);
}

/* Option cards laid out across instead of down. */
.pp-opt-btns.pp-row-2,
.pp-opt-btns.pp-row-3,
.pp-opt-btns.pp-row-4,
.pp-opt-btns.pp-row-5 {
    display: grid;
    gap: 8px;
}

.pp-opt-btns.pp-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-opt-btns.pp-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-opt-btns.pp-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-opt-btns.pp-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.pp-opt-btns.pp-row-3 .pp-opt-btn,
.pp-opt-btns.pp-row-4 .pp-opt-btn,
.pp-opt-btns.pp-row-5 .pp-opt-btn {
    padding: 11px 8px;
    font-size: 13px;
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.pp-opt-btns.pp-row-3 .pp-opt-note,
.pp-opt-btns.pp-row-4 .pp-opt-note,
.pp-opt-btns.pp-row-5 .pp-opt-note {
    font-size: 11px;
    text-align: center;
}

/* Cursor styles as icon cards, three across. The generic .style-buttons
   grid in panels.css is 1fr 1fr with !important, so this outranks it. */
#settings-body .pp-cursor-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
}

#settings-body .pp-cursor-row .style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    font-size: 11px;
}

#settings-body .pp-cursor-row .style-btn i {
    font-size: 16px;
    opacity: 0.85;
}

@media (max-width: 480px) {
    .pp-opt-btns.pp-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-opt-btns.pp-row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #settings-body .pp-cursor-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/*
 * Achievements, grouped
 * ---------------------------------------------------------------
 * Thirty-two cards in one run is a wall. Each group gets a heading with its own
 * count, so the list reads as a set of goals rather than a pile.
 */

#settings-body .achievement-list {
    display: block;
}

#settings-body .achievement-group {
    margin-bottom: 20px;
}

#settings-body .achievement-group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#settings-body .achievement-group-head i {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

#settings-body .achievement-group-name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

#settings-body .achievement-group-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

#settings-body .achievement-group-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 480px) {
    #settings-body .achievement-group-cards {
        grid-template-columns: 1fr;
    }
}

/*
 * Icon spacing
 * ---------------------------------------------------------------
 * An icon sitting right against its label reads as one crowded glyph. These give
 * it a gap, and a fixed width so a column of them lines up.
 */

#settings-body .pp-opt-btn i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
}

#settings-body .pp-opt-btns.pp-row-3 .pp-opt-btn i,
#settings-body .pp-opt-btns.pp-row-4 .pp-opt-btn i,
#settings-body .pp-cursor-row .style-btn i {
    margin-right: 0;
    margin-bottom: 2px;
    width: auto;
}

#settings-body .style-btn i {
    margin-right: 9px;
}