/* Top navigation and full pages (Anime, My watchlist). */

.topbar { gap: 16px; }

.topnav { display: flex; gap: 4px; margin-right: auto; margin-left: 24px; }

.topnav a {
    padding: 7px 12px;
    border-radius: var(--radius-md);
    color: var(--ink-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.topnav a:hover { color: var(--ink); background: var(--surface); }
.topnav a.active { color: var(--ink); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }

/* Groups (Media, Kitchen): a button that opens its pages below it. */
.topnav__group { position: relative; display: flex; }
.topnav__toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px 7px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--ink-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.topnav__toggle:hover, .topnav__toggle.is-open { color: var(--ink); background: var(--surface); }
.topnav__toggle.active { color: var(--ink); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
.topnav__caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.topnav__toggle.is-open .topnav__caret { transform: rotate(180deg); }
.topnav__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 21;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: shani-fade 0.12s ease;
}
/* Bridges the gap to the button: the mouse on its way down still counts as on the group. */
.topnav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.topnav__menu a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.topnav__menu a .icon { width: 17px; height: 17px; color: var(--ink-muted); flex: none; }
.topnav__menu a.active .icon, .topnav__menu a:hover .icon { color: var(--area); }
/* Ideas: only the light bulb in the bar. */
.topnav a.topnav__icon { display: grid; place-items: center; padding: 7px 9px; }
.topnav__icon .icon { width: 18px; height: 18px; }
.topnav__menu a.active { box-shadow: inset 3px 0 0 var(--accent); background: var(--surface-2); }
.topnav__backdrop { position: fixed; inset: 0; z-index: 19; }

.page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-top: clamp(8px, 3vh, 28px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* Big monitors: plain pages may widen a little (text and forms stay readable, lists get room). */
@media (min-width: 2000px) {
    .page:not(.page--wide) { max-width: 1440px; }
}


.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.filters__search { flex: 1; min-width: 220px; }
.filters__toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 0.9rem; cursor: pointer; }


.releases__link {
    margin-left: 10px;
    color: var(--accent);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
}

.upcoming { display: flex; flex-direction: column; gap: 10px; }

.upcoming__list {
    margin: 0;
    padding: 0 0 6px;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 280px);
    gap: 10px;
    overflow-x: auto;
}

.upcoming__item {
    width: 100%;
    display: flex;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
}

.upcoming__item:hover { border-color: var(--accent); }
.upcoming__item img { width: 60px; height: 86px; flex: none; object-fit: cover; border-radius: var(--radius-sm); }
.upcoming__item span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.upcoming__item strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming__item small { color: var(--ink-muted); font-size: 0.78rem; }
.upcoming__item small:first-of-type { color: var(--accent); font-weight: 600; }

/* ---------- Hover image preview (see shani.js) ---------- */

.image-preview {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    padding: 4px;
    border: 1px solid var(--line, #444);
    border-radius: 14px;
    background: var(--surface, #222);
    box-shadow: 0 18px 50px rgb(0 0 0 / 40%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.image-preview.is-visible { opacity: 1; }

.image-preview img {
    display: block;
    max-width: min(340px, 45vw);
    max-height: min(480px, 70vh);
    border-radius: var(--radius-md);
}

/* Phones and tablets upright (up to 980px: below that the top bar's menu and tools don't fit side by side): the
   pages sit behind a burger button at the bottom left (in reach of the thumb) and open upwards. The quick-access
   button (launcher.css) and the sound mixer (below) move beside and above it at the same width. */
.nav-fab, .bottomnav, .bottomnav-backdrop { display: none; }

@media (max-width: 980px) {
    .topbar { gap: 8px; padding-block: 12px; }
    .topbar .topnav { display: none; }
    .topbar__tools { margin-left: auto; }
    /* Room for the burger button under the last things on the page. */
    .shani .content { padding-bottom: 96px; }

    .nav-fab {
        position: fixed;
        left: 20px;
        bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
        z-index: 19; /* below the settings drawer (21), above the cart button (15) */
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
        cursor: pointer;
    }
    .nav-fab.is-open { z-index: 41; background: var(--accent); color: var(--bg); border-color: transparent; }
    .nav-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

    .bottomnav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: max(90px, calc(env(safe-area-inset-bottom) + 82px));
        z-index: 40;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
        /* Never taller than the screen above the button: the rest scrolls, inside the menu only. */
        max-height: calc(100dvh - 110px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Solid: the themes' surface is see-through, and the page behind made the menu hard to read. */
        background: linear-gradient(var(--surface), var(--surface)), var(--bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        animation: shani-fade 0.15s ease;
    }
    /* Pages as tiles, two a row (three on top: start, statistics, ideas), each with its icon. */
    .bottomnav__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex: none; }
    .bottomnav__tiles--top { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
    .bottomnav a {
        display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; border-radius: 12px;
        background: var(--surface-2); color: var(--ink); font-size: var(--text-md); text-decoration: none;
    }
    .bottomnav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bottomnav a .icon { width: 20px; height: 20px; flex: none; color: var(--area); }
    .bottomnav__tiles--top a { flex-direction: column; gap: 4px; padding: 10px 6px; font-size: var(--text-sm); }
    .bottomnav a.active { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--accent); }
    .bottomnav__group { padding: 10px 14px 2px; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
    .bottomnav-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / 25%); }

    /* Toasts sat in the same corner: above the button. */
    .shani .toasts { bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px)); }
}
.page-error__detail { margin: 0; color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ---------- Activity log ---------- */

.activity__filters { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 8px; }
.activity__filters .chip--toggle { display: inline-flex; align-items: center; gap: 5px; }
.activity__search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.activity__search input[type="search"] {
    flex: 1 1 260px;
}
.activity__problems { margin: 0; gap: 10px; }
.activity__day { margin-top: 22px; }
.activity__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.activity__more { align-self: center; margin-top: 18px; }

.activity-entry {
    --level: var(--ink-muted);
    border: 1px solid var(--line);
    border-left: 3px solid var(--level);
    border-radius: 12px;
    background: var(--surface);
}
.activity-entry--success { --level: #4caf7d; }
.activity-entry--warning { --level: #e0a33a; }
.activity-entry--error { --level: #e05a4f; }
.activity-entry--error, .activity-entry--warning { background: color-mix(in srgb, var(--level) 7%, var(--surface)); }

.activity-entry__row {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 14px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
.activity-entry__level { display: grid; color: var(--level); font-size: 1.05rem; }
.activity-entry__time { color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.82rem; }
.activity-entry__text { min-width: 0; overflow-wrap: anywhere; }
.activity-entry__text strong { font-weight: 600; }
.activity-entry__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--ink-muted); font-size: var(--text-xs); white-space: nowrap; }
.activity-entry__category { display: inline-flex; align-items: center; gap: 4px; }

.activity-entry__details { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px 48px; }
.activity-entry__details pre {
    margin: 0;
    padding: 10px 12px;
    max-height: 320px;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.activity-entry__details dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: var(--text-sm); }
.activity-entry__details dt { color: var(--ink-muted); }
.activity-entry__details dd { margin: 0; overflow-wrap: anywhere; }
.activity-entry__details .text-button { align-self: flex-start; }

@media (max-width: 720px) {
    .activity-entry__row { grid-template-columns: auto auto minmax(0, 1fr); }
    .activity-entry__meta { grid-column: 3; flex-direction: row; justify-content: flex-start; gap: 10px; }
    .activity-entry__details { padding-left: 14px; }
}

.bell__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}
.bell__footer:hover { color: var(--accent); }

/* ---------- Profile menu (top bar, right) ---------- */

.profile-menu { position: relative; display: flex; margin-left: 4px; }
.profile-menu__button {
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.profile-menu__button:hover, .profile-menu__button.is-open { border-color: var(--accent); }
.profile-menu__avatar { width: 34px; height: 34px; font-size: var(--text-md); }
.profile-menu__avatar--guest {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink-muted);
}
.profile-menu__avatar--guest .icon { width: 20px; height: 20px; }
.profile-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 21;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: shani-fade 0.12s ease;
}
.profile-menu__who { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; min-width: 0; }
.profile-menu__who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__who small { color: var(--ink-muted); }
.profile-menu__panel > a, .profile-menu__panel > button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ink);
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.profile-menu__panel > a:hover, .profile-menu__panel > button:hover { background: var(--surface-2); }
.profile-menu__panel .icon { width: 18px; height: 18px; color: var(--ink-muted); }
.profile-menu__danger, .profile-menu__danger .icon { color: var(--danger) !important; }
.profile-menu__line { height: 1px; margin: 4px 6px; background: var(--line); }

/* ---------- Quick settings (the drawer) ---------- */

.quick-settings__all {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}
.quick-settings__all:hover { border-color: var(--accent); }
.quick-settings__all > .icon { width: 22px; height: 22px; color: var(--accent); }
.quick-settings__all span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quick-settings__all small { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Settings page ---------- */

.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}
.settings-nav__item .icon { width: 18px; height: 18px; }
.settings-nav__item:hover { background: var(--surface); color: var(--ink); }
.settings-nav__item.is-active { background: var(--surface); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.settings-nav__item.is-active .icon { color: var(--accent); }
.settings-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.settings-card > h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.settings-card > .toggle__hint { margin: 0 0 6px; }
.settings-card .secondary-button, .settings-card .primary-button { align-self: flex-start; }
.theme-grid--wide { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

@media (max-width: 760px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .settings-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -4px;
        padding: 0 4px 2px;
    }
    .settings-nav__item { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
    .settings-nav__item.is-active { box-shadow: none; border-color: var(--accent); }
    .settings-card { padding: 16px; }
}

/* ---------- Text size and motion (settings → appearance) ---------- */

html:has(.shani[data-text-size="small"]) { font-size: 93.75%; }
html:has(.shani[data-text-size="large"]) { font-size: 112.5%; }
html:has(.shani[data-text-size="larger"]) { font-size: 125%; }

.shani[data-motion="reduced"] *,
.shani[data-motion="reduced"] *::before,
.shani[data-motion="reduced"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ---------- Achievements: the undiscovered ones (counted, not shown) ---------- */

.achievement-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.achievement-reveal { gap: 10px; padding: 0; font-size: 0.9rem; color: var(--ink-muted); }
.achievement--hidden { border-style: dashed; background: transparent; opacity: 0.85; }

/* ---------- Avatars and the profile ---------- */

.avatar {
    position: relative;
    width: var(--avatar-size, 40px);
    height: var(--avatar-size, 40px);
    flex: none;
    display: inline-grid;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}
.avatar__face {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--avatar-color, var(--accent));
}
.avatar img, .avatar .pixel-creature { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__initial { font-size: calc(var(--avatar-size, 40px) * 0.45); text-shadow: 0 1px 2px rgb(0 0 0 / 25%); }
.avatar__icon { width: 58%; height: 58%; color: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%)); }

.profile-menu__me { display: flex; align-items: center; gap: 12px; min-width: 0; }
.profile-menu__me > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.profile-menu__me strong, .profile-menu__me small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-title { color: var(--accent) !important; font-weight: 600; }

.profile-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--avatar-color) 22%, var(--surface)), var(--surface));
    border: 1px solid color-mix(in srgb, var(--avatar-color) 35%, var(--line));
}
.profile-preview__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-preview__text strong { font-size: 1.2rem; }
.profile-preview__text small { color: var(--ink-muted); }

.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin-top: 10px; }
.avatar-picker--icons { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.avatar-picker__item {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--surface-2);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.avatar-picker--icons .avatar-picker__item { background: var(--avatar-color); color: #fff; }
.avatar-picker--icons .avatar-picker__item .icon { width: 55%; height: 55%; }
.avatar-picker__item img { width: 100%; height: 100%; object-fit: cover; }
.avatar-picker__item:hover { transform: scale(1.06); }
.avatar-picker__item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.avatar-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.avatar-upload .toggle__hint { flex-basis: 100%; margin: 0; }
.avatar-upload__button { position: relative; margin: 0; cursor: pointer; }
.avatar-upload__button input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.avatar-upload__button.is-busy { opacity: 0.6; pointer-events: none; }

.color-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.color-picker__item {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--line);
    cursor: pointer;
}
.color-picker__item.is-selected { box-shadow: 0 0 0 2px var(--ink); }
.color-picker__item .avatar { border: 1px solid #fff; }

/* ---------- People in the household (who cooks, who added, who asked) ---------- */

.plan-day__cook {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px dashed transparent;
    border-radius: 50%;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
}
.plan-day__cook.is-empty { border-color: var(--line); }
.plan-day__cook.is-empty .icon { width: 15px; height: 15px; }
.plan-day__cook:hover { border-color: var(--accent); color: var(--accent); }
.shopping-item__who { margin-left: auto; }
.video-requests__by { display: inline-flex; align-items: center; gap: 6px; }
.stats-versus__title { display: flex; align-items: center; gap: 6px; }
.stats-versus__title .avatar + .avatar { margin-left: -12px; box-shadow: 0 0 0 2px var(--surface); }
.activity-entry__actor { display: inline-flex; align-items: center; gap: 5px; }
.household__members .avatar { flex: none; }

/* ---------- Avatar frames (shop) ----------
   The frame is a ring behind the face (::before), the face sits inside it; extras (a blossom, a flame) on ::after. */

.avatar--frame { --frame-w: max(2px, calc(var(--avatar-size, 40px) * 0.08)); padding: var(--frame-w); }
.avatar--frame::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: var(--frame-bg, var(--accent)); }
.avatar--frame::after {
    position: absolute;
    right: -8%;
    bottom: -8%;
    z-index: 2;
    font-size: max(10px, calc(var(--avatar-size, 40px) * 0.36));
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 40%));
}

.avatar--frame-gold { --frame-bg: conic-gradient(from 200deg, #fff1b8, #e7b53c, #a8761a, #f8d877, #e7b53c, #fff1b8); }
.avatar--frame-gold::before { box-shadow: 0 0 calc(var(--avatar-size) * 0.12) rgb(231 181 60 / 45%); }

.avatar--frame-sakura { --frame-bg: conic-gradient(#ffd1dc, #ff8fb1, #ffd1dc, #ffb3c8, #ffd1dc); }
.avatar--frame-sakura::before { box-shadow: 0 0 0 1px #fff inset, 0 0 calc(var(--avatar-size) * 0.12) rgb(255 143 177 / 55%); }

.avatar--frame-pixel { --frame-bg: repeating-conic-gradient(#7c5cff 0 22.5deg, #36f9f6 22.5deg 45deg); }
.avatar--frame-pixel::before { border-radius: 22%; }
.avatar--frame-pixel .avatar__face { border-radius: 18%; }

.avatar--frame-neon { --frame-bg: conic-gradient(#ff2bd6, #19f0ff, #ff2bd6); }
.avatar--frame-neon::before {
    box-shadow: 0 0 calc(var(--avatar-size) * 0.18) #ff2bd6, 0 0 calc(var(--avatar-size) * 0.3) rgb(25 240 255 / 45%);
    animation: frame-pulse 2.4s ease-in-out infinite;
}

.avatar--frame-flame { --frame-bg: conic-gradient(from 180deg, #ffde59, #ff8a00, #ff3b1f, #ff8a00, #ffde59); }
.avatar--frame-flame::before { box-shadow: 0 0 calc(var(--avatar-size) * 0.2) rgb(255 106 0 / 60%); animation: frame-pulse 1.4s ease-in-out infinite; }


.avatar--frame-rainbow { --frame-bg: conic-gradient(#ff4d4d, #ffb84d, #fff24d, #5dff7a, #4dc3ff, #9b6bff, #ff4dd8, #ff4d4d); }
.avatar--frame-rainbow::before { animation: frame-spin 6s linear infinite; }

@keyframes frame-pulse { 50% { filter: brightness(1.25) saturate(1.2); } }
@keyframes frame-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
    .avatar--frame::before { animation: none !important; }
}

.pixel-creature { background: #222; }

/* ---------- Celebrations (shop): over the whole screen, a few seconds, then gone ---------- */

.celebration { position: fixed; inset: 0; z-index: 59; overflow: hidden; pointer-events: none; }
.celebration > span {
    position: absolute;
    top: -6%;
    left: var(--x);
    animation: celebrate-fall var(--t) cubic-bezier(0.3, 0.1, 0.6, 1) var(--d) both;
}
.celebration--confetti > span { width: 8px; height: 14px; border-radius: 2px; background: hsl(var(--h) 90% 60%); transform: rotate(var(--r)); }
.celebration--petals > span {
    width: 14px; height: 10px; border-radius: 80% 0 80% 0;
    background: radial-gradient(circle at 30% 30%, #ffe3ec, #ff9ab8);
    animation-name: celebrate-sway;
}
.celebration--pixels > span {
    width: 10px; height: 10px; background: hsl(calc(var(--h) / 3 + 250) 95% 65%);
    box-shadow: 0 0 6px hsl(calc(var(--h) / 3 + 250) 95% 65%);
    animation-timing-function: steps(14);
}
.celebration__burst { position: absolute; left: var(--x); top: var(--y); }
.celebration__burst span {
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: hsl(var(--h) 95% 65%); box-shadow: 0 0 8px hsl(var(--h) 95% 65%);
    --angle: calc(var(--i) * 25.7deg);
    animation: celebrate-burst 1.3s cubic-bezier(0.1, 0.8, 0.3, 1) var(--d) both;
}

@keyframes celebrate-fall {
    0% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(112vh) rotate(calc(var(--r, 0deg) + 540deg)); opacity: 0; }
}
@keyframes celebrate-sway {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    25% { transform: translate(30px, 28vh) rotate(90deg); }
    50% { transform: translate(-20px, 56vh) rotate(180deg); }
    75% { transform: translate(25px, 84vh) rotate(270deg); opacity: 1; }
    100% { transform: translate(0, 112vh) rotate(360deg); opacity: 0; }
}
@keyframes celebrate-burst {
    0% { transform: rotate(var(--angle)) translateX(0) scale(1.4); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: rotate(var(--angle)) translateX(120px) translateY(30px) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .celebration { display: none; }
}
.shani[data-motion="reduced"] .celebration { display: none; }

.avatar-picker__set { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 14px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); }
.avatar-picker__set .text-button { padding: 0; font-weight: 500; }
.avatar-picker.is-locked { opacity: 0.55; }
.avatar-picker.is-locked .avatar-picker__item { cursor: not-allowed; }
.avatar-picker__item .pixel-creature { width: 100%; height: 100%; }
.frame-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.frame-picker__item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 72px; padding: 10px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer;
}
.frame-picker__item small { color: var(--ink-muted); font-size: var(--text-xs); }
.frame-picker__item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.profile-title .icon { width: 1em; height: 1em; vertical-align: -0.12em; }
/* ---------- Shop: frames, celebrations, sounds, pictures ---------- */

.shop-tabs { flex-wrap: wrap; margin-bottom: 4px; }
.shop-tabs .tab .icon { width: 1em; height: 1em; vertical-align: -0.12em; }
.shop-offer__preview {
    display: grid;
    place-items: center;
    height: 110px;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2));
    color: var(--accent);
}
.shop-offer__preview > .icon { width: 44px; height: 44px; }
.shop-offer__pictures { display: grid; grid-template-columns: repeat(3, 34px); gap: 6px; }
.shop-offer__pictures img, .shop-offer__pictures .pixel-creature { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ---------- The greeting's line and the tone of voice ---------- */

.greeting__line { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--ink-muted); font-size: 1.02rem; }
.greeting__line .icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
.tone-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tone-picker__item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer;
}
.tone-picker__item small { color: var(--ink-muted); font-style: italic; }
.tone-picker__item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ---------- Your own accent, the start page's backdrop ---------- */

.color-picker__item--theme { display: grid; place-items: center; background: var(--surface-2); color: var(--ink-muted); }
.color-picker__item--theme .icon { width: 16px; height: 16px; }
.color-picker__custom { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-muted); font-size: var(--text-sm); }
.color-picker__custom input[type="color"] {
    width: 34px; height: 34px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: none; cursor: pointer; overflow: hidden;
}
.color-picker__custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker__custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-picker__custom input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* The backdrop: a small picture stretched over the page (soft by itself), darkened into the theme's ground. */
.shani.has-backdrop {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 40%, var(--bg) 85%),
        var(--backdrop) center top / cover no-repeat fixed,
        var(--bg);
}
.shani.has-backdrop .topbar { background: color-mix(in srgb, var(--bg) 60%, transparent); }

/* ---------- Seasonal decorations (every page): in the background, never in the way ---------- */

.seasonal { position: fixed; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; }
.seasonal > span {
    position: absolute;
    top: -4%;
    left: var(--x);
    animation: season-fall var(--t) linear var(--d) infinite;
}
.seasonal--winter > span {
    width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: 50%;
    background: #fff; opacity: 0.75; box-shadow: 0 0 6px rgb(255 255 255 / 60%);
    animation-name: season-snow;
}
.seasonal--spring > span {
    width: calc(16px * var(--s)); height: calc(11px * var(--s)); border-radius: 80% 0 80% 0;
    background: radial-gradient(circle at 30% 30%, #ffe8ef, #ff9ab8); opacity: 0.85;
    animation-name: season-petal;
}
.seasonal--birthday > span {
    width: 7px; height: 12px; border-radius: 2px; background: hsl(var(--h) 90% 62%);
    animation-iteration-count: 2;
}
.seasonal--halloween::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 35vh;
    background: linear-gradient(transparent, rgb(255 120 20 / 12%));
}
.seasonal__bat {
    position: absolute;
    left: -10%;
    top: var(--y);
    width: 64px;
    fill: color-mix(in srgb, var(--ink) 75%, #2a1400);
    opacity: 0.7;
    filter: drop-shadow(0 0 6px rgb(255 120 20 / 35%));
    animation: season-bat var(--t) linear var(--d) infinite;
}
.seasonal__burst { position: absolute; left: var(--x); top: var(--y); }
.seasonal__burst span {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: hsl(var(--h) 95% 65%); box-shadow: 0 0 8px hsl(var(--h) 95% 65%);
    --angle: calc(var(--i) * 30deg);
    animation: season-burst 3.6s cubic-bezier(0.1, 0.8, 0.3, 1) var(--d) infinite;
}

@keyframes season-fall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes season-snow {
    0% { transform: translate(0, 0); }
    50% { transform: translate(24px, 55vh); }
    100% { transform: translate(-12px, 110vh); }
}
@keyframes season-petal {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(40px, 36vh) rotate(120deg); }
    66% { transform: translate(-30px, 72vh) rotate(240deg); }
    100% { transform: translate(20px, 110vh) rotate(360deg); }
}
@keyframes season-bat {
    0% { transform: translate(0, 0) scaleY(1); }
    10% { transform: translate(12vw, -12px) scaleY(0.6); }
    20% { transform: translate(24vw, 6px) scaleY(1); }
    50% { transform: translate(60vw, -20px) scaleY(0.6); }
    100% { transform: translate(125vw, 10px) scaleY(1); }
}
@keyframes season-burst {
    0% { transform: rotate(var(--angle)) translateX(0) scale(1.3); opacity: 0; }
    5% { opacity: 1; }
    40% { transform: rotate(var(--angle)) translateX(90px) translateY(18px) scale(0.5); opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal { display: none; }
}

/* ---------- A year ago ---------- */

.memories__when { margin: 0 0 10px; color: var(--ink-muted); font-size: var(--text-sm); }
.memories__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.memories__item {
    display: flex; align-items: center; gap: 12px; padding: 10px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.memories__poster { width: 48px; height: 68px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.memories__poster--icon { display: grid; place-items: center; color: var(--accent); }
.memories__poster--icon .icon { width: 24px; height: 24px; }
.memories__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.memories__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memories__text small, .memories__text span { color: var(--ink-muted); font-size: 0.8rem; }
.memories__text small .icon { width: 1em; height: 1em; vertical-align: -0.12em; }

/* ---------- What's new ---------- */

.whats-new__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.whats-new__item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.whats-new__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.whats-new__icon .icon { width: 20px; height: 20px; }
.whats-new__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.whats-new__text > span { color: var(--ink-muted); font-size: 0.88rem; line-height: 1.4; }
.whats-new__text small { color: var(--ink-muted); font-size: var(--text-xs); }
.whats-new__badge { margin-left: 6px; vertical-align: 0.1em; }
/* Hearts: the count (Shani's own always in it), then who gave them. Yours is filled. */
.whats-new__hearts { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.whats-new__heart {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin-right: 2px;
    border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--ink-muted); font: inherit; font-size: 0.78rem; cursor: pointer;
}
.whats-new__heart .icon { width: 14px; height: 14px; }
.whats-new__heart:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.whats-new__heart.is-mine { border-color: var(--accent); color: var(--accent); }
.whats-new__heart.is-mine .icon { fill: currentColor; }
.whats-new__by { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); }
.whats-new__by svg { width: 13px; height: 13px; }
.whats-new__all { display: inline-block; margin-top: 4px; }
.news-page__day { margin-bottom: 22px; }
.news-page__date { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; color: var(--ink-muted); }

/* ---------- Pinboard: notes as coloured paper (the paper's colour mixed into the theme, so dark stays dark) ---------- */

.pin-note { --paper: #f5d76e; background: color-mix(in srgb, var(--paper) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--paper) 45%, var(--line)); border-radius: 14px; }
.pin-note--pink { --paper: #f29bb8; }
.pin-note--blue { --paper: #7fb3f0; }
.pin-note--green { --paper: #8fd19e; }
.pin-note--orange { --paper: #f4a261; }
.pin-note--purple { --paper: #b79cf0; }

.pinboard__compose { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 14px; transition: background 0.2s; }
.pinboard__compose textarea {
    width: 100%; min-height: 3.2em; resize: vertical; padding: 8px 10px; color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--paper) 40%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.pinboard__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pinboard__tools .secondary-button { margin: 0; }
.pinboard__tools .primary-button { margin-left: auto; }
.pinboard__colors { display: flex; gap: 6px; }
.pinboard__swatch {
    width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--paper); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}
.pinboard__swatch.is-active { border-color: var(--ink); }
.pinboard__file { position: relative; overflow: hidden; }
.pinboard__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pinboard__file .icon, .pinboard__picked .icon { width: 1em; height: 1em; }
.pinboard__expiry {
    max-width: 12em; padding: 7px 34px 7px 10px; font: inherit; font-size: var(--text-sm); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--paper) 40%, var(--line)); border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--surface) 70%, transparent);
}
.pinboard__picked { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--ink-muted); }

.pinboard__notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pinboard__notes .pin-note { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
/* A slight tilt, alternating, like paper pinned by hand. */
.pinboard__notes .pin-note:nth-child(odd) { transform: rotate(-0.6deg); }
.pinboard__notes .pin-note:nth-child(even) { transform: rotate(0.5deg); }
.pin-note__image { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-md); }
.pin-note__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pin-note__meta { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--ink-muted); font-size: 0.78rem; }
.pin-note__by { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-note__until { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pin-note__comments { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 0 0; list-style: none;
    border-top: 1px dashed color-mix(in srgb, var(--paper) 40%, var(--line)); font-size: var(--text-sm); }
.pin-note__comments li { display: flex; align-items: flex-start; gap: 6px; }
.pin-note__comments li > span:not(.avatar) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pin-note__comments small { color: var(--ink-muted); }
.pin-note__reply { display: flex; align-items: center; gap: 4px; }
.pin-note__reply input { flex: 1; min-width: 0; padding: 5px 8px; font-size: var(--text-sm); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--paper) 40%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.pin-note__until .icon { width: 1em; height: 1em; }
@media (prefers-reduced-motion: reduce) {
    .pinboard__notes .pin-note { transform: none; }
}

.seasonal-preview { align-items: center; gap: 6px; }
.seasonal-preview .chip { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.seasonal-preview .chip .icon { width: 14px; height: 14px; }

/* ---------- Shani Wrapped: the year as cards ---------- */

.wrapped-page { max-width: 560px; }
.wrapped { display: flex; flex-direction: column; gap: 14px; outline: none; }
.wrapped__dots { display: flex; gap: 4px; }
.wrapped__dot { flex: 1; height: 4px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--line); cursor: pointer; }
.wrapped__dot.is-done, .wrapped__dot.is-active { background: var(--accent); }
.wrapped__dot.is-active { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }

.wrapped__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: min(560px, 72vh);
    padding: 36px 28px;
    border-radius: 24px;
    overflow: hidden;
    text-align: center;
    color: #fff;
    background: linear-gradient(150deg, var(--w1, #ff3b4e), var(--w2, #ff8a5c) 55%, var(--w3, #ffd98a));
    box-shadow: var(--shadow);
    animation: wrapped-in 0.45s cubic-bezier(0.2, 1, 0.3, 1);
}
.wrapped__card--intro { --w1: #ff3b4e; --w2: #ff8a5c; --w3: #ffd98a; }
.wrapped__card--watch { --w1: #2b1055; --w2: #7597de; --w3: #3fc1e0; }
.wrapped__card--top { --w1: #0b1030; --w2: #3e63dd; --w3: #8e4ec6; }
.wrapped__card--months { --w1: #12372a; --w2: #46a758; --w3: #b8e986; }
.wrapped__card--kitchen { --w1: #6b2d12; --w2: #f76b15; --w3: #ffb224; }
.wrapped__card--money { --w1: #0d3b2e; --w2: #1f9d6b; --w3: #c8e66b; }
.wrapped__card--requests { --w1: #10263a; --w2: #12a594; --w3: #9be7d8; }
.wrapped__card--achievements { --w1: #3a2a00; --w2: #d99a16; --w3: #ffe28a; }
.wrapped__card--together { --w1: #4a0d2c; --w2: #d6409f; --w3: #ffb3d1; }
.wrapped__card--outro { --w1: #140b0d; --w2: #ff3b4e; --w3: #ffd98a; }

.wrapped__side { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; border: 0; background: none; cursor: pointer; }
.wrapped__side--back { left: 0; cursor: w-resize; }
.wrapped__side--next { right: 0; cursor: e-resize; }
.wrapped__side:disabled { cursor: default; }
.wrapped__end, .wrapped__posters, .wrapped__people { position: relative; z-index: 3; }

.wrapped__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(255 255 255 / 18%); }
.wrapped__icon .icon { width: 28px; height: 28px; }
.wrapped__kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.wrapped__big { font-family: var(--font-display); font-size: clamp(3.5rem, 16vw, 6rem); font-weight: 800; line-height: 1; text-shadow: 0 4px 24px rgb(0 0 0 / 25%); }
.wrapped__title { margin: 0; font-size: 1.5rem; font-weight: 700; }
.wrapped__text { margin: 0; max-width: 34ch; opacity: 0.9; }

.wrapped__posters { display: flex; justify-content: center; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.wrapped__posters li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; }
.wrapped__posters img { width: 110px; height: 160px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 24px rgb(0 0 0 / 35%); }
.wrapped__posters strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wrapped__posters small { opacity: 0.8; font-size: var(--text-xs); }

.wrapped__months { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; width: 100%; height: 120px; margin-top: 10px; }
.wrapped__months span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.wrapped__months i { display: block; width: 100%; height: var(--h); border-radius: 6px 6px 2px 2px; background: rgb(255 255 255 / 45%); }
.wrapped__months .is-top i { background: #fff; box-shadow: 0 0 12px rgb(255 255 255 / 60%); }
.wrapped__months small { font-size: 0.65rem; opacity: 0.8; }

.wrapped__people { display: flex; gap: 32px; margin-top: 10px; }
.wrapped__people span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wrapped__people strong { font-size: 2rem; }
.wrapped__end { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.wrapped__end .secondary-button { margin: 0; background: rgb(255 255 255 / 15%); border-color: rgb(255 255 255 / 30%); color: #fff; }
.wrapped__hint { margin: 0; text-align: center; color: var(--ink-muted); font-size: 0.8rem; }

@keyframes wrapped-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

.wrapped-banner {
    display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 16px; max-width: 520px;
    border-radius: var(--radius-lg); color: #fff; text-decoration: none;
    background: linear-gradient(120deg, #ff3b4e, #ff8a5c 55%, #ffd98a);
    box-shadow: var(--shadow);
}
.wrapped-banner > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.wrapped-banner small { opacity: 0.9; }
.wrapped-banner__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 20%); }
.wrapped-banner__go { font-size: 1.3rem; }

@media (prefers-reduced-motion: reduce) { .wrapped__card { animation: none; } }

/* ---------- Points (shop) in the top bar ---------- */

.points-button {
    display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; margin-right: 4px;
    border: 1px solid color-mix(in srgb, #f5c542 45%, var(--line)); border-radius: var(--radius-pill);
    background: color-mix(in srgb, #f5c542 10%, var(--surface)); color: var(--ink);
    font-size: var(--text-sm); font-weight: 700; text-decoration: none;
}
.points-button .icon { width: 15px; height: 15px; color: #e3b341; }
.points-button:hover { border-color: #f5c542; }
@media (max-width: 520px) { .points-button span { display: none; } .points-button { padding: 0 9px; } }

/* Autumn: leaves in reds, oranges and browns, drifting down. */
.seasonal--autumn > span {
    width: calc(18px * var(--s)); height: calc(13px * var(--s)); border-radius: 0 80% 0 80%;
    background: hsl(calc(var(--h) / 8 + 10) 75% calc(38% + var(--h) / 30 * 1%));
    opacity: 0.8;
    animation-name: season-petal;
}

/* ---------- Screen saver ---------- */

.screensaver {
    position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: none;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 22%, #000), #000 75%);
    color: #fff;
    animation: screensaver-in 1.2s ease;
}
.screensaver__picture {
    position: absolute; inset: -4%;
    background: center / cover no-repeat;
    opacity: 0;
    transition: opacity 3s ease;
    animation: screensaver-pan 40s ease-in-out infinite alternate;
}
.screensaver__picture.is-shown { opacity: 0.55; }
.screensaver::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 65%)); }
.screensaver__content {
    position: absolute; left: 8%; bottom: 12%; z-index: 1;
    display: flex; flex-direction: column; gap: 6px;
    text-shadow: 0 2px 18px rgb(0 0 0 / 60%);
    animation: screensaver-drift 120s ease-in-out infinite alternate;
}
.screensaver__clock { width: min(46vw, 560px); --face: transparent; --hand: #fff; --second: var(--accent); }
.screensaver__clock .clock { color: #fff; }
.screensaver__date { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.8rem); opacity: 0.9; }
.screensaver__weather { margin: 0; font-size: clamp(1rem, 1.8vw, 1.35rem); opacity: 0.85; }
.screensaver .greeting__line { color: rgb(255 255 255 / 85%); font-size: clamp(1rem, 1.6vw, 1.25rem); }
.screensaver__hint { position: absolute; right: 24px; bottom: 18px; z-index: 1; margin: 0; font-size: 0.8rem; opacity: 0.45; }

@keyframes screensaver-in { from { opacity: 0; } }
@keyframes screensaver-pan { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, -1%); } }
@keyframes screensaver-drift {
    0% { transform: translate(0, 0); }
    50% { transform: translate(min(30vw, 420px), -12vh); }
    100% { transform: translate(min(10vw, 140px), -30vh); }
}
@media (prefers-reduced-motion: reduce) {
    .screensaver__picture, .screensaver__content { animation: none; }
}

/* ---------- Spotify: settings, Wrapped's music card, the screen saver's song ---------- */

.spotify-mark { background: #1db954; color: #fff; }
.spotify-mark .icon { width: 20px; height: 20px; }
.wrapped__card--music { --w1: #0b2a17; --w2: #1db954; --w3: #a8f0c0; }
.wrapped__artists { position: relative; z-index: 3; display: flex; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.wrapped__artists li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; }
.wrapped__artists img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgb(0 0 0 / 35%); }
.wrapped__artists small { font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wrapped__tracks { position: relative; z-index: 3; margin: 6px 0 0; padding-left: 1.4em; text-align: left; font-size: var(--text-sm); }
.wrapped__tracks li { margin: 2px 0; }
.screensaver__music { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; font-size: clamp(0.95rem, 1.5vw, 1.2rem); }
.screensaver__music img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); }
.screensaver__music small { opacity: 0.7; }

/* ---------- The search across Shani: a panel at the top, hits grouped by part ---------- */

.search-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 40%); animation: shani-fade 0.15s ease; }
.search {
    position: fixed; z-index: 46; top: 8vh; left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100vw - 24px)); max-height: 78vh; display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 24px 64px rgb(0 0 0 / 40%); overflow: hidden;
}
.search__field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.search__field .icon { width: 20px; height: 20px; color: var(--ink-muted); flex: none; }
.search__field input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font-size: 1.05rem; outline: none; }
.search__hint { padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-muted); font-size: 0.72rem; }
.search__results { overflow-y: auto; padding: 6px 8px 10px; }
.search__results ul { margin: 0; padding: 0; list-style: none; }
.search__group { margin: 10px 8px 4px; color: var(--ink-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.search__hit { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.search__hit.is-active, .search__hit:hover { background: var(--surface); }
.search__hit img { width: 32px; height: 44px; flex: none; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.search__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--accent); }
.search__icon .icon { width: 18px; height: 18px; }
.search__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.search__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font-size: 0.78rem; }
.search__external { color: var(--ink-muted); }
.search__empty { margin: 14px 8px; color: var(--ink-muted); font-size: 0.9rem; }
@media (max-width: 640px) {
    .search { top: 12px; max-height: calc(100vh - 24px); }
    .search__hint { display: none; }
}

/* ---------- Sound mixer (settings, "Sound"): one row per channel, icon · name · slider · value · sample ---------- */

.sound-mixer { display: flex; flex-direction: column; gap: 6px; }
.sound-mixer__row {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(120px, 2fr) 3.2em 36px; align-items: center; gap: 10px;
    padding: 8px 4px; border-top: 1px solid var(--line);
}
.sound-mixer__row--master { border-top: 0; }
.sound-mixer__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.sound-mixer__icon .icon { width: 18px; height: 18px; }
.sound-mixer__name { display: flex; flex-direction: column; min-width: 0; }
.sound-mixer__name small { color: var(--ink-muted); font-size: 0.78rem; }
.sound-mixer__row input[type="range"] { width: 100%; accent-color: var(--accent); }
.sound-mixer__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: var(--text-sm); }
.sound-mixer__row.is-muted { opacity: 0.5; }
@media (max-width: 560px) {
    /* Phones: the slider gets its own line under the name. */
    .sound-mixer__row { grid-template-columns: 32px minmax(0, 1fr) 3.2em 36px; }
    .sound-mixer__row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
}
.sound-mixer--compact .sound-mixer__row { grid-template-columns: 32px minmax(0, 1fr) 3.2em 36px; gap: 4px 8px; padding: 6px 2px; }
.sound-mixer--compact .sound-mixer__row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }

/* The quick mixer: a round speaker button at the bottom left (phones: above the menu button), its panel opens upwards. */
.quick-mixer {
    position: fixed; left: 20px; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 18;
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-muted);
    box-shadow: 0 8px 24px rgb(0 0 0 / 22%); cursor: pointer; opacity: 0.85;
}
.quick-mixer:hover, .quick-mixer.is-open { opacity: 1; color: var(--accent); border-color: var(--accent); }
.quick-mixer.is-muted { color: var(--ink-muted); }
.quick-mixer .icon { width: 20px; height: 20px; }
.quick-mixer__backdrop { position: fixed; inset: 0; z-index: 42; }
.quick-mixer__panel {
    position: fixed; left: 20px; bottom: 76px; z-index: 43; width: min(340px, calc(100vw - 40px));
    max-height: calc(100vh - 120px); overflow-y: auto; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow);
    animation: shani-fade 0.15s ease;
}
.quick-mixer__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
@media (max-width: 980px) {
    /* Above the burger button (58px at the same corner). */
    .quick-mixer { left: 27px; bottom: max(90px, calc(env(safe-area-inset-bottom) + 82px)); }
    .quick-mixer__panel { left: 12px; right: 12px; width: auto; bottom: max(144px, calc(env(safe-area-inset-bottom) + 136px)); }
}

/* ---------- Sign-in screen: Shani only opens signed in ---------- */

.signin-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.signin-screen__card { width: min(420px, 100%); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.signin-screen__brand { display: flex; align-items: center; gap: 10px; font-size: var(--text-xl); margin-bottom: 4px; }
.signin-screen__brand svg { width: 34px; height: 34px; }

/* Two-factor sign-in (settings, account): the steps, the QR code (always dark on white, so every app can read it). */
.two-factor__steps { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 12px; }
.two-factor__qr { width: 180px; margin: 8px 0; padding: 8px; border-radius: var(--radius-md); background: #fff; }
.two-factor__qr svg { display: block; width: 100%; height: auto; }
.two-factor__key { display: block; color: var(--ink-muted); }
.two-factor__key code, .two-factor__codes code { font-size: var(--text-md); letter-spacing: 0.04em; user-select: all; }
.two-factor__confirm { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.two-factor__codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 4px 0 8px; padding-left: 1.2em; }

/* Shani as an app (settings, "App", in the browser): one big button per platform. */
.app-downloads { display: flex; flex-wrap: wrap; gap: 10px; }
.app-downloads__item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 220px; flex: 1 1 220px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.app-downloads__item:hover { border-color: var(--accent); }
.app-downloads__item .icon { width: 28px; height: 28px; color: var(--accent); flex: none; }
.app-downloads__item span { display: flex; flex-direction: column; }
.app-downloads__item small { color: var(--ink-muted); font-size: 0.8rem; }

/* ---------- Ideas for Shani: a form on top, then cards with status, hearts and comments ---------- */

.idea-new { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin-bottom: 14px; }
.idea-new__title { font-size: 1rem; }
.idea-new__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.ideas-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ideas-toolbar__sort select { min-width: 160px; }
.ideas-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.idea { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
/* The comments borrow the pinboard's look, which mixes in the note's paper colour: here the theme's line. */
.idea { --paper: var(--line); }
.idea__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.idea__status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.idea__status .icon { width: 14px; height: 14px; }
.idea.is-done .idea__status { background: color-mix(in srgb, #3fb950 18%, transparent); color: #3fb950; }
.idea.is-declined .idea__status { background: var(--surface-2); color: var(--ink-muted); }
.idea.is-declined .idea__title, .idea.is-done .idea__title { color: var(--ink-muted); }
.idea__status-pick { width: auto; }
.idea__title { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.idea__text { margin: 0; color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.idea__meta { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 0.82rem; }
.idea__meta > span:not(.avatar) { flex: 1; min-width: 0; }
.idea__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.idea__talk { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.idea__talk .icon { width: 16px; height: 16px; }
.idea__edit { display: flex; flex-direction: column; gap: 8px; }
.idea__shani { width: 22px; height: 22px; }
.idea__shani svg { width: 14px; height: 14px; }

/* Small phones (≤ 400 px): the top bar's buttons sit closer and Shani shows only its mark, so nothing runs off. */
@media (max-width: 400px) {
    .topbar { gap: 4px; padding-inline: 12px; }
    .topbar .brand { gap: 0; font-size: 0; }
    .topbar__tools { gap: 0; }
    .topbar__tools > .icon-button { width: 36px; height: 36px; }
}

/* The end of an endless list (EndlessScroll): a spinner while the next part loads, a button just in case. */
.endless__more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: var(--ink-muted); }
.endless__sentinel { height: 1px; }

/* ---------- Admin (/admin): Hoshimura's catalog as tables, every player's game ---------- */

.admin__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.admin__bar input[type="search"] { flex: 1 1 220px; max-width: 360px; }
.admin__scroll { overflow-x: auto; }

.admin-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th, .admin-table td { padding: var(--space-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table thead th { position: sticky; top: 0; background: var(--bg); color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.admin-table__num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-table__name { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.admin-table__name .icon { width: 18px; height: 18px; flex: none; }
.admin-table__name img.item-art { width: 28px; height: 28px; }
.admin-table code { font-size: var(--text-xs); }

.admin-player { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); }
.admin-player summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); cursor: pointer; }
.admin-player__facts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: auto; font-size: var(--text-sm); }
.admin-player__facts .icon { width: 14px; height: 14px; vertical-align: -2px; }
.admin-player__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-4); }
.admin-player__body h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.admin-player__list { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.admin-player__list li { display: flex; align-items: center; gap: var(--space-2); padding: 4px 0; border-bottom: 1px solid var(--line); }
.admin-player__list li > span { margin-left: auto; font-variant-numeric: tabular-nums; }
.admin-player__list .icon { width: 16px; height: 16px; flex: none; }

/* The figures: every race's woman and man in all ten stages, the drawn layers below, a picture opens large. */
.admin-figures__race { margin-bottom: var(--space-6); }
.admin-figures__race h2 { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.admin-figures__race code, .admin-figures__paths code { font-size: var(--text-xs); }
.admin-figures__figure { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); min-width: 0; }
.admin-figures__figure h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-md); }
.admin-figures__figure h3 .muted { font-size: var(--text-sm); font-weight: 400; }
.admin-figures__figure h4 { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
.admin-figures__stages { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-2); }
.admin-figures__layers { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-2); }
.admin-figures__pic { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; padding: var(--space-1);
    border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-muted); font-size: var(--text-xs); cursor: zoom-in; }
.admin-figures__pic:hover, .admin-figures__pic:focus-visible { border-color: var(--accent); color: var(--ink); }
.admin-figures__pic > img { display: block; width: 100%; height: auto; aspect-ratio: 488 / 800; object-fit: contain; }
.admin-figures__pic > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-figures__missing { margin: 0; font-size: var(--text-sm); }
.admin-figures__sheet { width: min(520px, 100%); }
.admin-figures__big { display: flex; justify-content: center; }
.admin-figures__big .game-pic { width: min(100%, 320px); max-height: 62vh; }
.admin-figures__paths { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; overflow-wrap: anywhere; }
.admin-figures__steps { display: flex; justify-content: space-between; gap: var(--space-2); }
@media (max-width: 640px) {
    .admin-figures__stages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* The media menu's parts (watch and read, listen, overview). */
.topnav__section { padding: 8px 12px 2px; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.topnav__section:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }

/* The top bar's own entries (calendar, news, notes, statistics): icon and name; on a narrower screen only the icon. */
.topnav a.topnav__solo { display: flex; align-items: center; gap: 6px; }
.topnav__solo .icon { width: 16px; height: 16px; flex: none; }
.topnav__solo:first-of-type { margin-left: 6px; }
@media (max-width: 1440px) {
    .topnav a.topnav__solo { padding: 7px 9px; }
    .topnav__solo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 981px) and (max-width: 1180px) {
    .topnav { margin-left: 8px; gap: 0; }
    .topnav a, .topnav__toggle { padding-inline: 8px; }
    .topbar__tools { gap: 2px; }
}