@font-face {
    font-family: Coolvetica;
    src: url(resources/Coolvetica.woff2) format("woff2");
    font-display: swap;
}

:root {
    --title: #6f9c7d;
    --border: #4c6e58;
    --white: #fff;
    --dim: #0000008c;
    --red: #9b5555;
    --font: Verdana, Geneva, Tahoma, sans-serif;
}

[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #d4ddd1 0%, #f1f3ef 100%) fixed;
    min-height: 100vh;
    font-family: var(--font);
}

/* header */

.introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 8px 0;
}

.introduction img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 2px solid var(--border);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
}

.introduction h1 {
    font-family: Coolvetica, var(--font);
    font-size: 42px;
    font-weight: normal;
    margin: 10px 0 0;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--white);
    -webkit-text-stroke: 4px #272626;
    paint-order: stroke fill;
    text-shadow: 3px 3px 2px rgba(84, 88, 81, 0.212);
    user-select: none;
}

/* buttons + nav */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font);
    font-size: 11px;
    color: var(--white);
    background: linear-gradient(180deg, #cbd3cd 0%, #bcdac7 45%, #7fac8d 46%, var(--title) 100%);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.15);
    padding: 3px 12px;
    cursor: pointer;
    text-decoration: none;
}

.btn img { width: 16px; height: 16px; image-rendering: pixelated; }

.btn:hover {
    background: linear-gradient(180deg, #fff 0%, #cdeeda 45%, #8fc19d 46%, #7aab88 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 4px rgba(111, 156, 125, 0.6);
}

.btn:active, .btn[aria-current] {
    background: linear-gradient(180deg, var(--border) 0%, var(--title) 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    text-shadow: none;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px 0;
}

/* window */

.window {
    width: 50%;
    margin: 18px auto 25px;
}

.window-title, .window-body {
    box-sizing: border-box;
    border: 2px solid var(--border);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
}

.window-title {
    background: var(--title);
    color: var(--white);
    padding: 0 20px;
}

.window-title h1 {
    font-size: 13px;
    text-align: center;
    margin: 8px 0;
}

.window-body {
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--white);
    border-top: 0;
    padding: 4px 20px;
}

.window-body > * { margin: 0; }
.window-body-start { margin-top: 11px !important; }
.window-body-end { margin-top: auto !important; }
.window-body > :last-child { margin-bottom: 11px; }

.window-body p, .window-body li { font-size: 11px; }
.window-body b { color: rgb(59, 58, 58); }
.window-body img { image-rendering: pixelated; }

.window-body a { color: var(--border); text-decoration: none; }
.window-body a:hover { color: var(--title); text-decoration: underline; }

.window-body ul { padding-left: 20px; }
.window-body li { list-style: square; }
.window-body li::marker { color: var(--border); }

.window-body ul.icons { padding-left: 4px; }
.window-body ul.icons li { list-style: none; margin: 0 0 6px; }
.window-body ul.icons img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.window-body ul.icons li::marker { content: none; }

.window-body ol { padding-left: 24px; }
.window-body ol li { margin-bottom: 4px; }
.window-body ol li::marker { color: var(--border); font-size: 11px; }

.meta, .note { color: rgba(0, 0, 0, 0.65); }
.note { font-style: italic; }
.plays { color: var(--dim); }

/* now playing / activity */

.np {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px;
    border: 1px solid var(--border);
    background: #f6f9f5;
}

.np .art {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #e4ebe2;
    image-rendering: auto;
}

.np-info { flex: 1; min-width: 0; }

.np-info p {
    margin: 0 0 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.np-info p img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.np-label { color: var(--dim); font-size: 10px !important; }
.np-song { font-weight: bold; }
.np-time { color: var(--dim); font-size: 10px !important; }

.bar {
    height: 10px;
    margin: 4px 0 3px;
    border: 1px solid var(--border);
    background: var(--white);
    overflow: hidden;
}

.bar i {
    display: block;
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(90deg, var(--title) 0 6px, var(--white) 6px 8px);
}

/* lyrics */

.lyrics {
    position: relative;
    height: 120px;
    overflow-y: auto;
    padding: 4px 0;
    border: 1px solid var(--border);
    background: #f6f9f5;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12);
    scrollbar-width: thin;
    scrollbar-color: var(--title) #e4ebe2;
}

.lyrics.big { height: 280px; }

.lyrics p {
    margin: 0;
    padding: 2px 8px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.45);
}

.lyrics p.on {
    background: var(--title);
    color: var(--white);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}

.lyrics p.msg { color: var(--dim); font-style: italic; }

/* folds: sections that slide open / closed when app.js shows or hides what's inside
   (spotify, lyrics, game activity). closed = zero height and no gap, so the window
   shrinks to fit its content and grows smoothly when something shows up. */

.window-body > .fold {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0 0 -11px;   /* cancels the flex gap this section would otherwise leave behind */
    transition: grid-template-rows 0.35s ease, margin 0.35s ease;
}

.window-body > .fold.open {
    grid-template-rows: 1fr;
    margin-bottom: 0;
}

.fold-in {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s 0.35s;   /* stay painted until the close animation is done */
}

.fold.open > .fold-in {
    visibility: visible;
    transition-delay: 0s;
}

/* the [hidden] attribute still flips on/off from app.js; inside a fold it must not remove the
   box from layout, or there would be nothing left to animate */
.fold-in > .np[hidden] { display: flex !important; }
.fold-in > .lyrics[hidden] { display: block !important; }

@media (prefers-reduced-motion: reduce) {
    .window-body > .fold, .fold-in { transition: none; }
}

/* about me (bio.md) */

.bio {
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: #f6f9f5;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.window-body .bio p, .window-body .bio ul { margin: 0 0 8px; }
.window-body .bio > :last-child { margin-bottom: 0; }
.window-body .bio img.ico { width: 16px; height: 16px; vertical-align: -3px; }
.window-body .bio code {
    font-size: 10px;
    padding: 0 3px;
    background: #e4ebe2;
    border: 1px solid #c5d3c9;
}

/* games page lists */

#g-body { display: flex; flex-direction: column; gap: 11px; }
#g-body > * { margin: 0; }

.window-body .glist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.window-body .glist li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    background: #f6f9f5;
}

.window-body .glist li::marker { content: none; }

.window-body .glist .gi {
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #e4ebe2;
    image-rendering: auto;
}

.glist .gm { flex: 1; min-width: 0; }

.glist .gn, .glist .gs {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.window-body .glist .gn { font-weight: bold; color: rgb(59, 58, 58); }
.window-body .glist a.gn:hover { color: var(--title); }
.glist .gs { font-size: 10px; }
.glist .gs.wrap { white-space: normal; }
.glist .gh { flex: none; font-weight: bold; color: rgb(59, 58, 58); text-align: right; }
.glist .bar { height: 6px; margin: 4px 0 0; }
.glist .empty { display: block; color: var(--dim); font-style: italic; border-style: dashed; }

/* footer */

.end {
    text-align: center;
    font-size: 10px;
    padding: 0 8px 25px;
}

.end p { color: var(--dim); margin: 0 0 4px; }
.end a { color: var(--border); }
.end a:hover { color: var(--title); }

/* hover tooltip */

.tip {
    display: none;
    position: fixed;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    background: #fff5b1;
    border: 2px solid #434029;
    border-radius: 3px;
    padding: 2px 3px;
    color: #434029;
    font-size: 9px;
    font-weight: 600;
    -webkit-font-smoothing: none;
}

.tip.visible { display: block; }

/* 404 */

.center { text-align: center; }
.window-body .btn { align-self: center; padding: 4px 18px; }

/* top artists carousels (music page) */

.car {
    display: flex;
    align-items: stretch;
    gap: 6px;
    font-size: 11px;
}

.window-body .car-btn {
    align-self: center;
    justify-content: center;
    height: 52px;
    padding: 0 9px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.car-track {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: 6px;
    scrollbar-width: none;
    border: 1px solid var(--border);
    background: #f6f9f5;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12);
}

.car-track::-webkit-scrollbar { display: none; }
.car-track.panning { scroll-snap-type: none; }   /* snapping would fight the slow auto-pan */
.car-track:focus-visible { outline: 2px solid var(--title); outline-offset: -2px; }

.window-body a.car-item {
    flex: none;
    width: 104px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
}

.car-img {
    position: relative;
    display: block;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #e4ebe2;
}

.window-body .car-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
}

.car-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Coolvetica, var(--font);
    font-size: 40px;
    color: var(--title);
    background: linear-gradient(180deg, #e4ebe2 0%, #cfdccf 100%);
}

.car-rank {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1px 5px;
    font-size: 10px;
    color: var(--white);
    background: var(--title);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}

.car-name, .car-plays {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.car-name { font-weight: bold; color: rgb(59, 58, 58); }
.car-plays { font-size: 10px; color: var(--dim); }
.window-body a.car-item:hover .car-name { color: var(--title); text-decoration: underline; }
.car-msg { margin: 0; align-self: center; }

/* responsive */

@media (max-width: 1200px) {
    .window { width: 75%; }
}

@media (max-width: 768px) {
    .window { width: 90%; }
    .window-title, .window-body { padding-left: 14px; padding-right: 14px; }
    .introduction h1 { font-size: 32px; }
}

@media (max-width: 480px) {
    .window { width: 95%; }
    .window-title, .window-body { padding-left: 10px; padding-right: 10px; }
    .window-body { gap: 8px; }
    .introduction h1 { font-size: 24px; -webkit-text-stroke: 3px #272626; }
    .introduction img { width: 48px; height: 48px; }
    .window-body p, .window-body li { font-size: 10px; }
    .lyrics.big { height: 220px; }
    .car { font-size: 10px; }
    .window-body .car-btn { padding: 0 7px; height: 44px; }
}