/* Personalisation: the background behind every page, the tiles beside the page on very wide screens, cutting your own
   avatar, and the frames and backgrounds of the shop. */

/* ---------- The background (Settings → Appearance) ----------
   Fixed behind everything (::before), with a veil of the theme's ground over it (::after, --veil): light themes get a
   light veil, dark ones a dark one, so text stays readable. Cards stand a little more solid on it. */

.shani.has-wallpaper { isolation: isolate; }
.shani.has-wallpaper::before,
.shani.has-wallpaper::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
.shani.has-wallpaper::before { z-index: -2; background: var(--wallpaper), var(--bg); }
.shani.has-wallpaper::after { z-index: -1; background: color-mix(in srgb, var(--bg) var(--veil, 55%), transparent); }

/* Cards are solid already; the start page's tiles and the edge tiles let a little less through. */
.shani.has-wallpaper :where(.start-section, .edge-tile) { background: color-mix(in srgb, var(--surface) 94%, transparent); }
.shani.has-wallpaper :is(.page-header, .greeting, .home-hero) { text-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 70%, transparent); }

/* The picker: small previews in the theme's colours. */
.background-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-3); }
.background-picker__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.background-picker__item:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.background-picker__item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.background-picker__item:disabled { cursor: default; }
.background-picker__item small { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-1) var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); }
.background-picker__item small .icon { width: 12px; height: 12px; flex: none; }
.background-swatch {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--radius-md) - 3px);
    background: var(--swatch, none), var(--bg);
    color: var(--ink-muted);
    overflow: hidden;
}
.background-swatch::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) var(--veil, 0%), transparent); }
.background-swatch .icon { position: relative; z-index: 1; width: 22px; height: 22px; }
.background-picker__item.is-locked .background-swatch { filter: saturate(0.6); opacity: 0.75; }
.background-own { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.background-own input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* The shop's preview of a background: a little page on it. */
.shop-offer__preview .background-swatch { width: 100%; height: 100%; aspect-ratio: auto; }

/* ---------- Tiles beside the page (very wide screens) ----------
   Only from 2000 px: the page moves in by a rail's width on each side, and the rails sit right beside it (at
   5120 px they hug the page instead of the screen's edges). Below that they aren't drawn. */

.edge { display: none; }

@media (min-width: 2000px) {
    .shani.has-edges {
        --edge-w: 250px;
        --edge-gap: var(--space-7);
        --edge-content: 1440px;
    }
    .shani.has-edges:has(.content > .home) { --edge-content: 1680px; }
    .shani.has-edges:has(.content > .page--wide) { --edge-content: 2600px; }
    .shani.has-edges .content { padding-inline: calc(var(--edge-w) + 2 * var(--edge-gap)); }

    .edge {
        position: fixed;
        top: 96px;
        bottom: 96px;
        z-index: 4;
        width: var(--edge-w);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        overflow-y: auto;
        scrollbar-width: none;
    }
    /* Beside the page: half the screen, less half the page (as wide as it gets in the room left), less the rail. */
    .edge--left { left: max(var(--edge-gap), calc(50% - min(var(--edge-content), 100% - 2 * (var(--edge-w) + 2 * var(--edge-gap))) / 2 - var(--edge-w) - var(--edge-gap))); }
    .edge--right { right: max(var(--edge-gap), calc(50% - min(var(--edge-content), 100% - 2 * (var(--edge-w) + 2 * var(--edge-gap))) / 2 - var(--edge-w) - var(--edge-gap))); }
}
@media (min-width: 2800px) {
    .shani.has-edges { --edge-w: 300px; }
    .shani.has-edges:has(.content > .home) { --edge-content: 2400px; }
}

.edge-tile {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: var(--shadow);
}
.edge-tile__title,
.edge-tile .hub-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edge-tile__title .icon, .edge-tile .hub-section__title .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.edge-tile .muted { margin: 0; font-size: var(--text-sm); }
.edge-tile .card { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
.edge-tile .game-section { display: flex; flex-direction: column; gap: var(--space-3); }

.edge-clock .clock { width: 100%; }
.edge-clock .digital { font-size: clamp(2rem, 2.4vw, 3rem); }

.edge-weather { display: flex; align-items: center; gap: var(--space-3); }
.edge-weather__icon { width: 48px; height: 48px; flex: none; }
.edge-weather__now { display: flex; flex-direction: column; min-width: 0; }
.edge-weather__now strong { font-size: var(--text-xl); font-weight: 600; }
.edge-weather__now small { color: var(--ink-muted); font-size: var(--text-sm); }
.edge-weather__days { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.edge-weather__days li { display: grid; grid-template-columns: 3em 20px 1fr; align-items: center; gap: var(--space-2); }
.edge-weather__days .weather-icon { width: 20px; height: 20px; }
.edge-weather__days small { color: var(--ink-muted); }

.edge-music { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.edge-music__cover { width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm); overflow: hidden; }
.edge-music__cover > * { width: 100%; height: 100%; }
.edge-music__text { display: flex; flex-direction: column; min-width: 0; }
.edge-music__text strong, .edge-music__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edge-music__text small { color: var(--ink-muted); }

.edge-links { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.edge-links a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-sm);
}
.edge-links a:hover { background: var(--surface-2); color: var(--accent); }
.edge-links .icon { width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
.edge-links span:not([aria-hidden]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The editor (Settings → Appearance): two columns of picked tiles, and what can be added. */
.edge-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.edge-editor__side { display: flex; flex-direction: column; gap: var(--space-2); }
.edge-editor__side h3 { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); font-weight: 600; }
.edge-editor__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.edge-editor__list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.edge-editor__list li > .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.edge-editor__list li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edge-editor__add { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Cutting your own avatar ---------- */

.avatar-cropper { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-3); }
.avatar-cropper__stage {
    position: relative;
    width: 240px;
    height: 240px;
    flex: none;
    border-radius: var(--radius-lg);
    background-color: var(--surface-2);
    background-repeat: no-repeat;
    cursor: grab;
    touch-action: none;
    user-select: none;
    overflow: hidden;
}
.avatar-cropper__stage.is-dragging { cursor: grabbing; }
.avatar-cropper__stage:focus-visible { outline: none; box-shadow: var(--ring); }
/* What stays: the circle; outside it is dimmed. */
.avatar-cropper__ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle closest-side, transparent calc(100% - 2px), rgb(255 255 255 / 85%) calc(100% - 2px) 100%, rgb(0 0 0 / 50%) 100%);
}
.avatar-cropper__tools { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.avatar-cropper__tools .muted { margin: 0; font-size: var(--text-sm); }
.avatar-cropper__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- More avatar frames (shop) ---------- */

.avatar--frame-ink { --frame-bg: conic-gradient(from 30deg, #1d1b18, #4a4640 20%, #1d1b18 32%, transparent 36% 44%, #2b2824 48%, #1d1b18 80%, #59544c 92%, #1d1b18); }
.avatar--frame-ink::before { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent), 0 0 calc(var(--avatar-size) * 0.1) color-mix(in srgb, var(--ink) 25%, transparent); }

.avatar--frame-frost { --frame-bg: conic-gradient(#e6f7ff, #9fd8f5, #ffffff, #7cc3e8, #e6f7ff); }
.avatar--frame-frost::before { box-shadow: 0 0 calc(var(--avatar-size) * 0.16) rgb(159 216 245 / 70%), inset 0 0 0 1px rgb(255 255 255 / 70%); }

.avatar--frame-lantern { --frame-bg: radial-gradient(circle, #ffcf6e 55%, #e8592b 75%, #a3261b); }
.avatar--frame-lantern::before { box-shadow: 0 0 calc(var(--avatar-size) * 0.22) rgb(255 160 60 / 65%); animation: frame-pulse 3.2s ease-in-out infinite; }

.avatar--frame-orbit { --frame-bg: conic-gradient(var(--accent) 0 8%, transparent 8% 46%, color-mix(in srgb, var(--accent) 60%, #fff) 46% 54%, transparent 54% 92%, var(--accent) 92%); }
.avatar--frame-orbit::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); animation: frame-spin 4s linear infinite; }

.avatar--frame-aurora { --frame-bg: conic-gradient(#3ef0b4, #36c9f6, #7f5af0, #f05af0, #3ef0b4); }
.avatar--frame-aurora::before { filter: blur(0.5px); box-shadow: 0 0 calc(var(--avatar-size) * 0.2) rgb(62 240 180 / 45%); animation: frame-spin 9s linear infinite; }

.avatar--frame-kitsune { --frame-bg: conic-gradient(from 90deg, #ff9a3d, #fff1c9, #ff5a1f, #ffd36e, #ff9a3d); }
.avatar--frame-kitsune::before {
    box-shadow: 0 0 calc(var(--avatar-size) * 0.16) #ff9a3d, 0 0 calc(var(--avatar-size) * 0.34) rgb(120 160 255 / 45%);
    animation: frame-spin 5s linear infinite, frame-pulse 1.8s ease-in-out infinite;
}

.shani[data-motion="reduced"] .avatar--frame::before { animation: none; }