/* =========================================================
   main stylesheet
   Colors live in the variables below. Change them here and
   the whole site follows.
   ========================================================= */

/* ---------- colors ---------- */
:root {
    --text: #e6e6e6;
    --muted: #8e8e8e;
    --panel: rgba(255, 255, 255, 0.055);   /* panel fill, lets the background show through */
    --line: rgba(255, 255, 255, 0.3);      /* panel borders */
    --line-soft: rgba(255, 255, 255, 0.12);
    --well: rgba(0, 0, 0, 0.35);           /* sunken boxes: status bubble, code box */
    --link: #ffffff;
    --link-hover: #ffffff;
    /* anime status colors */
    --st-watching: #f5a9c8;     /* pastel pink */
    --st-completed: #9fc8f2;    /* pastel blue */
    --st-on-hold: #f4e3a1;      /* pastel yellow */
    --st-dropped: #d0474a;
    --st-plan: #9a9a9a;
    color-scheme: dark;
}


/* ---------- elements ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    background: #0d0d0d url("images/background.png") center / cover no-repeat fixed;
    color: var(--text);
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-x: hidden;
}

p {
    margin: 0.7em 0.8em;
}

b, strong {
    font-weight: 700;
}

a:link,
a:visited {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--link-hover);
    text-decoration: underline dotted;
}

/* ---------- cursors: "Black Blue" set by Hellfire Scorpion (public domain) ---------- */
html {
    cursor: url("images/cursors/pointer.png") 6 8, auto;
}

a[href],
button,
summary,
select,
input[type="range"],
label:has(> input[type="checkbox"]),
[role="tab"] {
    cursor: url("images/cursors/link.png") 16 7, pointer;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]),
textarea {
    cursor: url("images/cursors/text.png") 16 14, text;
}

button:disabled {
    cursor: url("images/cursors/pointer.png") 6 8, default;
}

/* things with extra info on hover: status time, "updated" date, header picture */
time[title],
#site-updated[title],
header[title] {
    cursor: url("images/cursors/help.png") 6 8, help;
}

a[href] [title] {
    cursor: inherit;
}

/* while content is loading or saving (siteBusy in format.js) */
.is-busy,
.is-busy * {
    cursor: url("images/cursors/busy.png") 15 14, progress !important;
}

:focus-visible {
    outline: 2px dashed var(--link);
    outline-offset: 2px;
}

ul {
    margin: 0.7em 0.8em 0.7em 0;
    padding-left: 2em;
}

li::marker {
    content: "✦  ";
    color: var(--muted);
    font-size: 0.8em;
}

button {
    padding: 0.35em 0.9em;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 3px;
    font: inherit;
    font-size: 0.9em;
}

button:hover {
    background: rgba(255, 255, 255, 0.16);
}


/* ---------- panels + heading bars ---------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* heading strip: solid black on the left, fading out to the right */
.bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8em;
    margin: 0;
    padding: 0.4em 0.8em;
    font-size: 1.15em;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.8) 10%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0) 90%);
}

.bar small {
    font-size: 0.72em;
    font-weight: 400;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}


/* ---------- page grid ---------- */
.site-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px 24px;
}

.grid {
    position: relative;
    display: grid;
    width: 75vw;
    min-width: 720px;
    max-width: 1500px;
    height: 81vh;
    min-height: 520px;
    grid-template-columns: minmax(200px, 23%) 1fr;
    grid-template-rows: 78px 1fr auto;
    grid-template-areas:
        "header  main"
        "sidebar main"
        "footer  footer";
    gap: 6px;
}


/* ---------- header (sky picture + clock) ----------
   script.js picks day, night or rain from the time and your weather. */
header {
    grid-area: header;
    position: relative;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    background: #16213a url("images/night.jpg") center 30% / cover no-repeat;
}

header.sky-day {
    background-image: url("images/day.jpg");
    background-position: center 40%;
}

header.sky-rain {
    background-image: url("images/rain.jpg");
    background-position: center 25%;
}

#clock {
    position: absolute;
    right: 4px;
    bottom: 3px;
    margin: 0.2rem;
    color: #fff;
    font-family: "Roboto", system-ui, sans-serif;
    font-size: 0.75em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px #000;
}



/* ---------- sidebar ---------- */
.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#wide {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

#wide::-webkit-scrollbar {
    display: none;
}

.menu {
    list-style: none;
    margin: 0.5em 0 0.8em 1.6rem;
    padding: 0;
}

.menu li {
    margin: 0.45em 0;
    white-space: nowrap;
}

.menu li::marker {
    content: none;
}

.menu a:hover::before {
    content: "▸";
    margin-right: 4px;
}

.menu a.current::after {
    content: "✦";
    margin-left: 6px;
    color: var(--muted);
    font-size: 0.8em;
}


#narrow {
    display: none;
}

#narrow summary {
    padding: 0.5em 0.8em;
    font-weight: 500;
}

#narrow nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding-bottom: 0.4em;
}

#narrow nav .bar {
    display: none;
}


/* ---------- main column ---------- */
main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 8px;
}

main::-webkit-scrollbar {
    display: none;
}

main > .panel {
    flex: none;
}

.scroll-box {
    max-height: 120px;
    overflow-y: auto;
    margin: 0.7em 0.8em;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.scroll-box p {
    margin: 0 0 0.6em;
}

.date {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}


/* status box */
#status {
    display: flex;
    align-items: center;
    gap: 0.8em;
    min-height: 64px;
    padding: 0.6em 0.8em;
}

.status-bubble {
    flex: 1;
    background: var(--well);
    padding: 0.4em 0.8em;
    border-radius: 4px;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.status-bubble p {
    margin: 0;
}

.status-meta {
    flex: none;
    font-size: 0.8em;
    color: var(--muted);
}

a.status-meta:link,
a.status-meta:visited {
    color: var(--muted);
}

a.status-meta:hover {
    color: #ffffff;
}

/* status page */
.status-history {
    display: flex;
    flex-direction: column;
    gap: 1em;
    list-style: none;
    margin: 0.8em;
    padding: 0;
}

.status-history li::marker {
    content: none;
}

.status-when {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.35em;
    font-size: 0.8em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}


/* projects */
.projects {
    list-style: none;
    margin: 0.4em 0.8em 0.8em;
    padding: 0;
}

.projects li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    padding: 0.45em 0;
    border-bottom: 1px solid var(--line-soft);
}

.projects li:last-child {
    border-bottom: none;
}

.projects li::marker {
    content: none;
}

.projects .note {
    display: block;
    font-size: 0.85em;
    color: var(--muted);
}

.tag {
    flex: none;
    font-size: 0.75em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-soft);
    border-radius: 3px;
    padding: 0.1em 0.5em;
}



/* ---------- footer ---------- */
footer {
    grid-area: footer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3em 0.9em;
    padding: 0.75em 1em;
    font-size: 0.8em;
    color: var(--muted);
}

footer b {
    color: var(--text);
    font-weight: 500;
}


/* ---------- content from the admin page (built by content.js) ---------- */
.content-slot {
    display: contents;
}

.formatted {
    padding-bottom: 0.1em;
}

.formatted ul {
    margin-top: 0.4em;
}

.post-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.4em 0;
    border: 1px solid var(--line-soft);
}


/* ---------- anime pages (built by anime.js) ---------- */
.muted {
    color: var(--muted);
}

.st-watching { background: var(--st-watching); }
.st-completed { background: var(--st-completed); }
.st-on-hold { background: var(--st-on-hold); }
.st-dropped { background: var(--st-dropped); }
.st-plan { background: var(--st-plan); }

.anime-note {
    font-size: 0.85em;
    color: var(--muted);
}

/* profile card */
.mal-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em;
    margin: 0.8em;
}

.mal-avatar {
    flex: none;
    width: 120px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line);
}

.mal-profile-info {
    flex: 1 1 200px;
    min-width: 0;
}

.mal-name {
    margin: 0 0 0.4em;
    font-size: 1.3em;
    font-weight: 700;
}

.mal-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2em 1em;
    margin: 0 0 0.9em;
    font-size: 0.9em;
}

.mal-facts dt {
    color: var(--muted);
}

.mal-facts dd {
    margin: 0;
}

.mal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

a.mal-button:link,
a.mal-button:visited {
    display: inline-block;
    padding: 0.3em 0.9em;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 0.9em;
}

a.mal-button:hover {
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none;
}

.mal-bio {
    border-top: 1px solid var(--line-soft);
    margin: 0 0.8em;
    padding: 0.2em 0 0.4em;
}

.mal-bio p {
    margin: 0.6em 0;
}

.mal-bio ul {
    margin: 0.3em 0 0.6em;
}

/* statistics */
.mal-stat-head {
    display: flex;
    justify-content: space-between;
    margin: 0.8em 0.8em 0.4em;
    font-variant-numeric: tabular-nums;
}

.mal-bar {
    display: flex;
    height: 14px;
    margin: 0 0.8em;
    border-radius: 2px;
    overflow: hidden;
    background: var(--well);
}

.mal-bar span {
    display: block;
    height: 100%;
}

.mal-stat-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 2.5em;
    margin: 0.8em;
}

.mal-legend,
.mal-totals {
    flex: 1 1 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.mal-legend li,
.mal-totals li {
    display: flex;
    justify-content: space-between;
    padding: 0.2em 0;
}

.mal-legend li::marker,
.mal-totals li::marker,
.mal-updates li::marker,
.mal-favs li::marker,
.mal-list li::marker {
    content: none;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.5em;
    border-radius: 50%;
}

/* last updates */
.mal-updates {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    list-style: none;
    margin: 0.7em 0.8em 0.8em;
    padding: 0;
}

.mal-update {
    display: flex;
    gap: 0.7em;
}

.mal-update img {
    display: block;
    width: 48px;
    height: 68px;
    object-fit: cover;
    border: 1px solid var(--line-soft);
}

.mal-update-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    font-size: 0.9em;
}

.mal-update-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8em;
}

.mal-update-top .muted {
    flex: none;
    font-size: 0.85em;
}

.mal-progress {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--well);
}

.mal-progress span {
    display: block;
    height: 100%;
}

/* favorites */
.mal-sub {
    margin: 0.9em 0.8em 0.5em;
    font-size: 0.8em;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.mal-favs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 0.8em;
    list-style: none;
    margin: 0 0.8em 0.9em;
    padding: 0;
}

.mal-favs a {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.mal-favs a:hover {
    text-decoration: none;
}

.mal-favs img {
    display: block;
    width: 100%;
    aspect-ratio: 70 / 110;
    object-fit: cover;
    border: 1px solid var(--line-soft);
}

.mal-favs a:hover img {
    border-color: #ffffff;
}

.fav-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8em;
    line-height: 1.25;
}

.fav-sub {
    font-size: 0.72em;
    color: var(--muted);
}

/* full list */
.list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.3em;
    margin: 0.6em 0.8em 0;
    border-bottom: 1px solid var(--line-soft);
}

.list-tabs a:link,
.list-tabs a:visited {
    margin-bottom: -1px;
    padding: 0.45em 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 0.82em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.list-tabs a:hover {
    color: #ffffff;
    text-decoration: none;
}

.list-tabs a.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.list-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    margin: 0.8em;
}

.list-controls input,
.list-controls select {
    padding: 0.35em 0.6em;
    font: inherit;
    font-size: 0.9em;
    color: var(--text);
    background: var(--well);
    border: 1px solid var(--line-soft);
    border-radius: 3px;
}

.list-controls input {
    flex: 1 1 180px;
    min-width: 0;
}

.list-controls select option {
    background: #1b1b1b;
}

#list-count {
    margin-left: auto;
    font-size: 0.85em;
}

.mal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mal-row {
    display: grid;
    grid-template-columns: 2.2em 40px minmax(0, 1fr) 3em 6.5em;
    align-items: center;
    gap: 0.7em;
    padding: 0.45em 0.8em 0.45em 0.5em;
    border-left: 3px solid transparent;
    border-top: 1px solid var(--line-soft);
}

.st-edge-watching { border-left-color: var(--st-watching); }
.st-edge-completed { border-left-color: var(--st-completed); }
.st-edge-on-hold { border-left-color: var(--st-on-hold); }
.st-edge-dropped { border-left-color: var(--st-dropped); }
.st-edge-plan { border-left-color: var(--st-plan); }

.mal-num {
    text-align: right;
    font-size: 0.85em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.mal-row img {
    display: block;
    width: 40px;
    height: 56px;
    object-fit: cover;
}

.mal-row-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mal-row-title .muted {
    font-size: 0.75em;
}

.mal-alt {
    font-size: 0.78em;
    color: var(--muted);
}

.mal-score {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mal-eps {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.mal-eps .muted {
    font-size: 0.72em;
}

.mal-empty {
    padding: 1em 0.8em;
    color: var(--muted);
}

@media (max-width: 520px) {
    .mal-row {
        grid-template-columns: 40px minmax(0, 1fr) 2.5em;
    }

    .mal-num,
    .mal-eps {
        display: none;
    }
}


/* ---------- nyanko-sensei sticker, peeking over the bottom-left corner ---------- */
.sticker {
    position: absolute;
    left: -55px;
    bottom: -36px;
    z-index: 5;
    width: 130px;
    height: auto;
    rotate: -12deg;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
}


/* ---------- the cat walking along the top of the panels (cat.js) ---------- */
.cat-lane {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 4;
    height: 64px;
    pointer-events: none;
}

.cat {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 64px;
    background: url("images/cat/cat-sheet.png") 0 0 / 704px 3392px no-repeat;
    image-rendering: pixelated;
    pointer-events: auto;
    will-change: transform;
}


/* ---------- music player (music.js), faint until hovered ---------- */
.music {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    color: #ffffff;
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.music:hover,
.music:focus-within,
.music.is-playing:hover {
    opacity: 1;
}

.music.is-playing {
    opacity: 0.55;
}

.music button {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    color: inherit;
    background: none;
    border: none;
    box-shadow: none;
}

.music button:hover {
    background: none;
}

.music svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.music-mute svg {
    width: 14px;
}

.music-volume {
    width: 84px;
    height: 14px;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

.music-volume::-webkit-slider-runnable-track {
    height: 2px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 1px;
}

.music-volume::-moz-range-track {
    height: 2px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 1px;
}

.music-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -5.5px;
    background: #f2f2f2;
    border: 1px solid #9a9a9a;
    border-radius: 50%;
}

.music-volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #f2f2f2;
    border: 1px solid #9a9a9a;
    border-radius: 50%;
}


/* ---------- phones + small windows ---------- */
@media (max-width: 860px) {
    .site-center {
        display: block;
        padding: 16px;
    }

    .grid {
        width: 100%;
        min-width: 0;
        max-width: 640px;
        height: auto;
        min-height: 0;
        margin: 0 auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "sidebar"
            "main"
            "footer";
    }

    header {
        min-height: 110px;
    }

    main {
        overflow: visible;
        padding: 0;
    }

    #wide {
        display: none;
    }

    #narrow {
        display: block;
    }

    #status {
        flex-direction: column;
        align-items: stretch;
    }

    .cat {
        pointer-events: none;
    }

    .music {
        position: static;
        margin: 10px 12px -6px;
        width: max-content;
    }

    .sticker {
        left: -8px;
        bottom: -22px;
        width: 88px;
    }
}
main:focus {
    outline: none;
}