/* =========================================================
   KRITR PLAYER
   8 / 16 BIT COMPACT UI
   ========================================================= */

:root {
    --ui-scale: 1;

    --bg-color: #181420;
    --window-bg: #282133;
    --window-header: #332941;

    --panel-bg: #17131e;
    --panel-raised: #382d46;

    --accent-main: #ff8fc7;
    --accent-secondary: #8fdcff;

    --accent-rgb: 255, 143, 199;
    --accent2-rgb: 143, 220, 255;

    --text-color: #fff7fd;
    --muted-color: #b5a5bb;

    --border-color: #665471;

    --dark-outline: #0c0910;

    --energy: 0;
    --bass: 0;

    --pixel-shadow:
        3px 3px 0 var(--dark-outline);

    --pixel-shadow-big:
        5px 5px 0 var(--dark-outline);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

button,
input,
select {
    font: inherit;
}

button,
select,
input[type="range"],
label {
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0 1px,
            transparent 1px 4px
        ),
        var(--bg-color);

    color: var(--text-color);

    font-family:
        "Courier New",
        "Lucida Console",
        monospace;

    font-size: 12px;

    image-rendering: pixelated;
}


/* =========================================================
   WINDOW
   ========================================================= */

.kritr-window {
    position: relative;

    width: min(
        calc(560px * var(--ui-scale)),
        calc(100vw - 24px)
    );

    height: min(
        calc(680px * var(--ui-scale)),
        calc(100vh - 24px)
    );

    min-width: 420px;
    min-height: 520px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--window-bg);

    border:
        3px solid
        var(--dark-outline);

    outline:
        2px solid
        var(--border-color);

    box-shadow:
        8px 8px 0
        rgba(0,0,0,.55);

    transform: translateZ(0);
}


/* little pixel corners */

.kritr-window::before,
.kritr-window::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    background: var(--accent-main);

    z-index: 20;
}

.kritr-window::before {
    left: 3px;
    top: 3px;
}

.kritr-window::after {
    right: 3px;
    bottom: 3px;
}


/* =========================================================
   TITLEBAR
   ========================================================= */

.titlebar {
    height: 52px;

    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 8px;

    background: var(--window-header);

    border-bottom:
        3px solid
        var(--dark-outline);
}


.brand {
    display: flex;
    align-items: center;

    gap: 9px;
}


.brand-mascot {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    background: var(--accent-main);

    border:
        2px solid
        var(--dark-outline);

    color: var(--dark-outline);

    box-shadow:
        2px 2px 0
        var(--dark-outline);
}


.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.brand-text strong {
    font-size: 15px;

    letter-spacing: 2px;
}


.brand-text small {
    margin-top: 5px;

    color: var(--muted-color);

    font-size: 7px;

    letter-spacing: 1px;
}


/* =========================================================
   WINDOW BUTTONS
   ========================================================= */

.window-buttons {
    display: flex;
    gap: 5px;
}


.window-buttons button {
    width: 28px;
    height: 25px;

    padding: 0;

    border:
        2px solid
        var(--dark-outline);

    border-radius: 0;

    background: var(--panel-raised);

    color: var(--text-color);

    box-shadow:
        2px 2px 0
        var(--dark-outline);

    cursor: pointer;
}


.window-buttons button:hover {
    background: var(--accent-secondary);

    color: var(--dark-outline);
}


#close-btn:hover {
    background: #ff6688;
}


/* =========================================================
   TABS
   ========================================================= */

.tabs {
    height: 44px;

    flex: 0 0 44px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 4px;

    padding: 5px;

    background: var(--panel-bg);

    border-bottom:
        3px solid
        var(--dark-outline);
}


.tab {
    position: relative;

    border:
        2px solid
        transparent;

    border-radius: 0;

    background: transparent;

    color: var(--muted-color);

    cursor: pointer;

    font-weight: 900;

    font-size: 10px;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.tab:hover {
    color: var(--text-color);

    background:
        rgba(
            var(--accent-rgb),
            .08
        );
}


.tab.active {
    border-color:
        var(--dark-outline);

    background:
        var(--accent-main);

    color:
        var(--dark-outline);

    box-shadow:
        2px 2px 0
        var(--dark-outline);
}


/* =========================================================
   PAGES
   ========================================================= */

.tab-page {
    display: none;

    flex: 1;

    min-height: 0;

    overflow: hidden;
}


.tab-page.active {
    display: flex;

    flex-direction: column;
}


#player-tab {
    padding: 10px;

    gap: 8px;

    overflow-y: auto;
}


/* =========================================================
   PLAYER HERO
   ========================================================= */

.hero-grid {
    display: grid;

    grid-template-columns:
        138px
        minmax(0, 1fr);

    gap: 8px;

    min-height: 220px;
}


.cover-shell,
.visualizer-container {
    background: var(--panel-bg);

    border:
        3px solid
        var(--dark-outline);

    box-shadow:
        3px 3px 0
        rgba(0,0,0,.38);
}


/* =========================================================
   ALBUM ART
   ========================================================= */

.cover-shell {
    padding: 6px;
}


.album-art {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 200px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--accent-rgb),
                .30
            ),
            transparent 50%
        ),
        var(--window-header);

    border:
        2px solid
        var(--accent-main);

    transform:
        scale(
            calc(
                1 +
                var(--bass) * .015
            )
        );
}


.album-pattern {
    position: absolute;

    inset: 0;

    opacity: .2;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,.2)
            2px,
            transparent 2px
        ),
        linear-gradient(
            rgba(255,255,255,.2)
            2px,
            transparent 2px
        );

    background-size:
        14px 14px;
}


.album-glyph {
    position: absolute;

    inset: 0;

    display: grid;
    place-items: center;

    color: var(--accent-main);

    font-size: 64px;
    font-weight: 900;

    text-shadow:
        4px 4px 0
        var(--dark-outline);
}


.album-caption {
    position: absolute;

    left: 6px;
    right: 6px;
    bottom: 6px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 5px;

    background: var(--dark-outline);

    color: var(--text-color);

    font-size: 7px;
}


.album-heart {
    color: var(--accent-main);
}


/* =========================================================
   VISUALIZER
   ========================================================= */

.visualizer-container {
    position: relative;

    min-width: 0;
    min-height: 220px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(
                var(--accent-rgb),
                .08
            ),
            transparent 40%
        ),
        #0c0a10;
}


.visualizer-container::before {
    content: "";

    position: absolute;

    inset: 27px 0 0;

    pointer-events: none;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.2)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.15)
            1px,
            transparent 1px
        );

    background-size:
        12px 12px;
}


.viz-header {
    position: absolute;

    z-index: 5;

    top: 0;
    left: 0;
    right: 0;

    height: 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 7px;

    background:
        var(--window-header);

    border-bottom:
        2px solid
        var(--dark-outline);

    color: var(--muted-color);

    font-size: 8px;

    font-weight: bold;
}


#energy-readout {
    color: var(--accent-main);
}


#visualizer {
    position: absolute;

    inset: 28px 0 0;

    width: 100%;
    height: calc(100% - 28px);

    image-rendering: pixelated;
}


/* =========================================================
   PET
   ========================================================= */

.pet-display {
    position: absolute;

    z-index: 6;

    right: 8px;
    bottom: 8px;

    width: 128px;
    min-height: 77px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 19px 6px 7px;

    background:
        var(--panel-raised);

    border:
        2px solid
        var(--dark-outline);

    box-shadow:
        3px 3px 0
        var(--dark-outline);

    transform:
        translateY(
            calc(
                var(--energy) * -2px
            )
        );
}


.pet-name {
    position: absolute;

    left: 4px;
    top: 4px;

    color: var(--accent-main);

    font-size: 6px;

    letter-spacing: .5px;
}


.pet-bubble {
    position: absolute;

    right: 5px;
    top: 4px;

    color:
        var(--accent-secondary);

    font-size: 10px;
}


.pet-sprite {
    position: relative;

    z-index: 2;

    color: var(--text-color);

    font-size: 19px;
    font-weight: 900;

    white-space: nowrap;

    text-shadow:
        2px 2px 0
        var(--dark-outline);
}


.pet-shadow {
    width: 64px;
    height: 6px;

    margin-top: 7px;

    background:
        var(--dark-outline);

    opacity: .6;
}


/* =========================================================
   TRACK CARD
   ========================================================= */

.track-card {
    min-height: 57px;

    display: grid;

    grid-template-columns:
        39px
        1fr
        24px;

    align-items: center;

    gap: 8px;

    padding: 7px;

    background:
        var(--panel-bg);

    border:
        3px solid
        var(--dark-outline);
}


.track-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    background:
        var(--accent-main);

    border:
        2px solid
        var(--dark-outline);

    color:
        var(--dark-outline);

    font-size: 17px;

    box-shadow:
        2px 2px 0
        var(--dark-outline);
}


.track-info {
    min-width: 0;
}


.track-title {
    overflow: hidden;

    color:
        var(--text-color);

    font-size: 11px;

    font-weight: 900;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.track-artist {
    margin-top: 5px;

    overflow: hidden;

    color:
        var(--muted-color);

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.track-status {
    color:
        var(--accent-main);

    font-size: 15px;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-container {
    display: grid;

    grid-template-columns:
        36px
        1fr
        36px;

    align-items: center;

    gap: 6px;

    color:
        var(--muted-color);

    font-size: 8px;
}


.progress-container span:last-child {
    text-align: right;
}


/* =========================================================
   RANGE
   ========================================================= */

input[type="range"] {
    appearance: none;

    width: 100%;

    height: 11px;

    padding: 0;

    background:
        var(--dark-outline);

    border:
        2px solid
        var(--border-color);

    cursor: pointer;
}


input[type="range"]::-webkit-slider-thumb {
    appearance: none;

    width: 10px;
    height: 17px;

    border: 0;

    background:
        var(--accent-main);

    box-shadow:
        2px 0 0
        var(--dark-outline);
}


input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 17px;

    border: 0;
    border-radius: 0;

    background:
        var(--accent-main);
}


/* =========================================================
   MAIN CONTROLS
   ========================================================= */

.player-controls {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;
}


.control-button {
    width: 47px;
    height: 38px;

    padding: 0;

    border:
        2px solid
        var(--dark-outline);

    border-radius: 0;

    background:
        var(--panel-raised);

    color:
        var(--text-color);

    box-shadow:
        3px 3px 0
        var(--dark-outline);

    cursor: pointer;

    font-weight: 900;
}


.control-button:hover {
    background:
        var(--accent-secondary);

    color:
        var(--dark-outline);
}


.play-button {
    width: 59px;
    height: 46px;

    background:
        var(--accent-main);

    color:
        var(--dark-outline);

    font-size: 17px;
}


.play-button:hover {
    background:
        var(--accent-secondary);
}


/* =========================================================
   SECONDARY CONTROLS
   ========================================================= */

.secondary-controls {
    display: grid;

    grid-template-columns:
        1fr
        110px;

    gap: 7px;
}


.volume-control,
.speed-control {
    min-height: 35px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 6px;

    background:
        var(--panel-bg);

    border:
        2px solid
        var(--dark-outline);
}


.volume-control > span,
.speed-control > span {
    color:
        var(--accent-main);

    font-size: 8px;

    font-weight: bold;
}


.volume-control input {
    flex: 1;
}


select {
    width: 100%;

    min-height: 24px;

    padding: 3px 5px;

    border:
        2px solid
        var(--dark-outline);

    border-radius: 0;

    outline: none;

    background:
        var(--panel-raised);

    color:
        var(--text-color);

    cursor: pointer;
}


.speed-control select {
    width: 64px;
}


/* =========================================================
   ADD MUSIC
   ========================================================= */

.music-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding-top: 2px;
}


.action-button,
.small-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 11px;

    border:
        2px solid
        var(--dark-outline);

    border-radius: 0;

    background:
        var(--accent-main);

    color:
        var(--dark-outline);

    box-shadow:
        3px 3px 0
        var(--dark-outline);

    cursor: pointer;

    font-weight: 900;

    font-size: 9px;
}


.action-button:hover,
.small-button:hover {
    background:
        var(--accent-secondary);
}


#drop-hint {
    color:
        var(--muted-color);

    font-size: 8px;
}


/* =========================================================
   GENERIC PAGE HEADER
   ========================================================= */

.page-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 12px;

    border-bottom:
        3px solid
        var(--dark-outline);
}


.page-header h2 {
    margin: 3px 0 0;

    color:
        var(--text-color);

    font-size: 15px;

    letter-spacing: 2px;
}


.eyebrow {
    color:
        var(--accent-main);

    font-size: 8px;
}


/* =========================================================
   PLAYLIST
   ========================================================= */

.playlist {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 10px;

    overflow-y: auto;
}


.playlist-item {
    display: flex;

    align-items: center;

    min-height: 42px;

    padding: 7px;

    border:
        2px solid
        var(--dark-outline);

    background:
        var(--panel-bg);

    color:
        var(--text-color);

    cursor: pointer;
}


.playlist-item:hover {
    background:
        var(--panel-raised);
}


.playlist-item.active {
    background:
        var(--accent-main);

    color:
        var(--dark-outline);
}


.empty-playlist {
    margin: auto;

    min-width: 210px;

    padding: 24px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 7px;

    border:
        3px solid
        var(--dark-outline);

    background:
        var(--panel-bg);

    text-align: center;

    box-shadow:
        4px 4px 0
        var(--dark-outline);
}


.empty-face {
    color:
        var(--accent-main);

    font-size: 24px;
}


.empty-playlist span {
    color:
        var(--muted-color);

    font-size: 9px;
}


/* =========================================================
   PET PAGE
   ========================================================= */

.pet-settings,
.settings {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 10px;

    overflow-y: auto;
}


.pet-preview-card {
    min-height: 160px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 11px;

    background:
        var(--panel-bg);

    border:
        3px solid
        var(--dark-outline);

    box-shadow:
        4px 4px 0
        rgba(0,0,0,.35);
}


.pet-preview-title {
    color:
        var(--accent-main);

    font-size: 8px;
}


.pet-preview {
    font-size: 27px;

    font-weight: 900;

    text-shadow:
        3px 3px 0
        var(--dark-outline);
}


.pet-preview-message {
    padding: 5px 8px;

    background:
        var(--text-color);

    color:
        var(--dark-outline);

    font-size: 8px;

    box-shadow:
        2px 2px 0
        var(--dark-outline);
}


/* =========================================================
   SETTINGS
   ========================================================= */

.setting-box {
    min-height: 46px;

    display: grid;

    grid-template-columns:
        120px
        1fr;

    align-items: center;

    gap: 10px;

    padding: 7px;

    border:
        2px solid
        var(--dark-outline);

    background:
        var(--panel-bg);
}


.setting-box > span {
    color:
        var(--accent-main);

    font-size: 9px;

    font-weight: bold;
}


.toggle-setting {
    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px;

    border:
        2px solid
        var(--dark-outline);

    background:
        var(--panel-bg);

    cursor: pointer;
}


.toggle-setting input {
    appearance: none;

    width: 20px;
    height: 20px;

    margin: 0;

    border:
        2px solid
        var(--dark-outline);

    background:
        var(--panel-raised);
}


.toggle-setting input:checked {
    background:
        var(--accent-main);

    box-shadow:
        inset 0 0 0 4px
        var(--panel-raised);
}


/* =========================================================
   STATUS
   ========================================================= */

.statusbar {
    height: 28px;

    flex: 0 0 28px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 8px;

    padding:
        0 8px;

    border-top:
        3px solid
        var(--dark-outline);

    background:
        var(--panel-bg);

    color:
        var(--muted-color);

    font-size: 7px;
}


.status-center {
    color:
        var(--accent-main);
}


.statusbar span:last-child {
    text-align: right;
}


/* =========================================================
   DROP OVERLAY
   ========================================================= */

.drop-overlay {
    position: absolute;

    inset: 0;

    z-index: 100;

    display: none;

    place-items: center;

    background:
        rgba(
            10,
            7,
            14,
            .88
        );
}


.drag-over .drop-overlay {
    display: grid;
}


.drop-box {
    min-width: 240px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding: 25px;

    border:
        4px solid
        var(--accent-main);

    background:
        var(--window-bg);

    color:
        var(--text-color);

    box-shadow:
        7px 7px 0
        var(--dark-outline);
}


.drop-face {
    color:
        var(--accent-main);

    font-size: 23px;
}


.drop-box small {
    color:
        var(--muted-color);
}


/* =========================================================
   RESTORE
   ========================================================= */

.restore-button {
    display: none;

    position: fixed;

    left: 50%;
    bottom: 20px;

    transform:
        translateX(-50%);

    padding:
        9px 13px;

    border:
        3px solid
        var(--dark-outline);

    border-radius: 0;

    background:
        var(--accent-main);

    color:
        var(--dark-outline);

    box-shadow:
        4px 4px 0
        var(--dark-outline);

    cursor: pointer;

    font-weight: 900;
}


.hidden-player > *:not(.restore-button) {
    display: none !important;
}


.kritr-window.hidden-player {
    width: 0;
    height: 0;

    min-width: 0;
    min-height: 0;

    border: 0;
    outline: 0;
    box-shadow: none;

    overflow: visible;
}


.hidden-player .restore-button {
    display: block;
}


/* =========================================================
   COMPACT
   ========================================================= */

.kritr-window.compact {
    width: 430px;

    height: 420px;

    min-height: 420px;
}


.kritr-window.compact .cover-shell,
.kritr-window.compact .secondary-controls,
.kritr-window.compact .music-actions {
    display: none;
}


.kritr-window.compact .hero-grid {
    grid-template-columns: 1fr;

    min-height: 195px;
}


.kritr-window.compact .visualizer-container {
    min-height: 195px;
}


/* =========================================================
   MAXIMIZED
   ========================================================= */

.kritr-window.maximized {
    width:
        calc(100vw - 16px);

    height:
        calc(100vh - 16px);

    max-width:
        900px;
}


/* =========================================================
   REACTIVE
   ========================================================= */

.reactive-on.is-playing {
    box-shadow:
        8px 8px 0
        rgba(0,0,0,.55),
        0 0
        calc(
            10px +
            var(--energy) * 28px
        )
        rgba(
            var(--accent-rgb),
            calc(
                .08 +
                var(--energy) * .18
            )
        );
}


.reactive-on .pet-display {
    filter:
        brightness(
            calc(
                1 +
                var(--energy) * .15
            )
        );
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 10px;
}


::-webkit-scrollbar-track {
    background:
        var(--panel-bg);
}


::-webkit-scrollbar-thumb {
    background:
        var(--accent-main);

    border:
        2px solid
        var(--dark-outline);
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background:
        var(--accent-main);

    color:
        var(--dark-outline);
}


/* =========================================================
   READABILITY AND CUSTOMIZATION
   ========================================================= */

:root {
    --font-scale: 1;
    --viz-intensity: 1;
    --crt-opacity: .18;
}

body {
    font-size: calc(12px * var(--font-scale));
}

.kritr-window {
    width: min(calc(620px * var(--ui-scale)), calc(100vw - 24px));
    height: min(calc(700px * var(--ui-scale)), calc(100vh - 24px));
    min-width: 0;
    min-height: 0;
}

.brand-text strong {
    font-size: calc(15px * var(--font-scale));
}

.brand-text small {
    font-size: calc(7px * var(--font-scale));
}

.tab {
    font-size: calc(10px * var(--font-scale));
}

.track-title {
    font-size: calc(11px * var(--font-scale));
}

.track-artist {
    font-size: calc(9px * var(--font-scale));
}

.progress-container,
.setting-box > span,
.toggle-setting,
.action-button,
.small-button,
.control-button,
.play-button {
    font-size: calc(10px * var(--font-scale));
}

.settings {
    gap: 10px;
    padding: 10px;
}

.settings-category {
    display: grid;
    gap: 7px;
    padding: 8px;
    border: 2px solid var(--dark-outline);
    background: var(--panel-raised);
    box-shadow: 3px 3px 0 var(--dark-outline);
}

.settings-category h3 {
    margin: 0;
    padding: 5px 7px;
    border: 2px solid var(--dark-outline);
    background: var(--accent-main);
    color: var(--dark-outline);
    font-size: calc(9px * var(--font-scale));
    letter-spacing: 1px;
    text-transform: uppercase;
}

.settings-face {
    margin-left: 5px;
    color: var(--accent-secondary);
    font-size: calc(12px * var(--font-scale));
}

.setting-box {
    min-height: 42px;
}

.setting-box > span {
    font-size: calc(9px * var(--font-scale));
}

.setting-box output {
    margin-left: 5px;
    color: var(--text-color);
    font-size: .9em;
}

.setting-box select {
    min-width: 0;
    max-width: 100%;
}

.pet-display {
    min-width: 128px;
    text-align: center;
}

.pet-sprite {
    font-size: calc(19px * var(--font-scale));
}

.reactive-on.is-playing .pet-display.pet-reactions-on .pet-sprite {
    filter: brightness(calc(1 + var(--energy)));
}

#visualizer {
    filter: brightness(var(--viz-intensity));
}

body[data-density="cozy"] .settings {
    gap: 12px;
    padding: 12px;
}

body[data-density="cozy"] .settings-category {
    gap: 9px;
    padding: 10px;
}

body[data-density="cozy"] .setting-box,
body[data-density="cozy"] .toggle-setting {
    min-height: 46px;
    padding: 9px;
}

body[data-density="cozy"] .track-card {
    min-height: 62px;
    gap: 10px;
    padding: 9px;
}

body[data-density="cozy"] .control-button {
    width: 50px;
    height: 41px;
}

body[data-density="compact"] .settings {
    gap: 6px;
    padding: 7px;
}

body[data-density="compact"] .settings-category {
    gap: 5px;
    padding: 6px;
}

body[data-density="compact"] .setting-box,
body[data-density="compact"] .toggle-setting {
    min-height: 36px;
    padding: 5px;
}

body[data-density="compact"] .track-card {
    min-height: 50px;
    gap: 6px;
    padding: 5px;
}

body[data-density="compact"] #player-tab {
    gap: 6px;
    padding: 7px;
}

body[data-density="compact"] .control-button {
    width: 43px;
    height: 35px;
}
/* =========================================================
   KRITR 0.4 FEATURE + POLISH PASS
   ========================================================= */

.pixel-input {
    width: 100%; min-height: 30px; padding: 6px 8px;
    border: 2px solid var(--dark-outline); border-radius: 0;
    background: var(--panel-bg); color: var(--text-color); outline: none;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,.18);
}
.pixel-input:focus { border-color: var(--accent-main); }

.favorite-button {
    width: 28px; height: 28px; padding: 0; border: 2px solid var(--dark-outline);
    background: var(--panel-raised); color: var(--accent-main); cursor: pointer;
    box-shadow: 2px 2px 0 var(--dark-outline); font-size: 16px;
}
.favorite-button.active { background: var(--accent-main); color: var(--dark-outline); }
.favorite-button:disabled { opacity: .35; cursor: default; }

.utility-control { width: 40px !important; font-size: 12px; color: var(--muted-color); }
.control-button.active, .small-button.active {
    background: var(--accent-secondary); color: var(--dark-outline);
    outline: 2px solid var(--accent-main); outline-offset: -4px;
}

.playlist-tools {
    display: grid; grid-template-columns: 1fr auto; gap: 7px;
    padding: 8px 10px 0;
}
.playlist-item { gap: 8px; }
.playlist-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.playlist-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.playlist-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-color); font-size: 8px; }
.playlist-fav {
    width: 25px; height: 25px; padding: 0; border: 0; background: transparent;
    color: var(--accent-main); cursor: pointer; font-size: 15px;
}
.playlist-item.active .playlist-artist, .playlist-item.active .playlist-fav { color: var(--dark-outline); }

.settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.danger-button { background: #e86a72; }
.shortcut-help {
    padding: 8px; border: 2px dashed var(--border-color); background: var(--panel-bg);
    color: var(--muted-color); font-size: 8px; line-height: 1.6;
}

.pet-display, .pet-preview { cursor: pointer; }
.pet-preview-message { max-width: 90%; min-height: 25px; text-align: center; }
.message-pop { animation: messagePop .22s steps(3); }

.track-swap { animation: trackSwap .28s steps(4); }

/* Tiny mode: meant to feel like a desktop music charm. */
.kritr-window.mini-mode {
    width: min(430px, calc(100vw - 18px));
    height: min(345px, calc(100vh - 18px));
    min-width: 360px; min-height: 315px;
}
.kritr-window.mini-mode .tabs,
.kritr-window.mini-mode .cover-shell,
.kritr-window.mini-mode .secondary-controls,
.kritr-window.mini-mode .music-actions,
.kritr-window.mini-mode .progress-container { display: none; }
.kritr-window.mini-mode #player-tab { display: flex !important; padding: 7px; gap: 6px; }
.kritr-window.mini-mode .hero-grid { grid-template-columns: 1fr; min-height: 158px; }
.kritr-window.mini-mode .visualizer-container { min-height: 158px; }
.kritr-window.mini-mode .track-card { min-height: 48px; }
.kritr-window.mini-mode .player-controls { margin-top: auto; }
.kritr-window.mini-mode .statusbar { height: 24px; flex-basis: 24px; }

/* Bass FX levels */
body[data-bass-fx="subtle"] .reactive-on.is-playing { --bass-multiplier: .45; }
body[data-bass-fx="normal"] .reactive-on.is-playing { --bass-multiplier: 1; }
body[data-bass-fx="wild"] .reactive-on.is-playing { --bass-multiplier: 1.8; }
body[data-bass-fx="wild"] .kritr-window.bass-hit .album-art { filter: brightness(1.35) saturate(1.25); }
body[data-screen-shake="off"] .kritr-window.bass-hit { animation: none !important; }
body[data-screen-shake="off"] .kritr-window.bass-hit .visualizer-container { animation: bassFlash .18s steps(2); }

/* Theme personality details */
body[data-theme="lcd"] #crt-overlay { mix-blend-mode: multiply; }
body[data-theme="famicom"] .brand-mascot::after { content:"F"; color:var(--dark-outline); font-weight:900; }
body[data-theme="candy"] .album-pattern { background-size: 11px 11px; }
body[data-theme="midnight"] .kritr-window { box-shadow: 8px 8px 0 rgba(0,0,0,.65), 0 0 20px rgba(var(--accent-rgb),.18); }

/* Terminal boot variant */
body[data-boot-style="terminal"] .boot-card { text-align:left; border-color:var(--accent-main); }
body[data-boot-style="terminal"] .boot-mascot { display:none; }
body[data-boot-style="terminal"] .boot-logo::before { content:"> boot kritr.exe\A> audio_core ........ OK\A> pet_daemon ........ OK\A"; white-space:pre; display:block; margin-bottom:10px; color:var(--accent-main); font-size:8px; line-height:1.7; letter-spacing:0; }
body[data-boot-style="terminal"] .boot-logo { font-size:14px; letter-spacing:2px; }

@keyframes messagePop { 0%{transform:translateY(3px);opacity:.2} 60%{transform:translateY(-2px)} 100%{transform:none;opacity:1} }
@keyframes trackSwap { 0%{transform:translateX(5px);opacity:.35} 100%{transform:none;opacity:1} }