/* =====================================================================
   records.css — the look of sky/records.js.
   (it used to be written inside the script, as strings; same rules, now here)
   ===================================================================== */

.turntable {
    cursor: pointer;
}
.turntable .tt-art,
.turntable>.art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.turntable .tt-playing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}
body.records-playing .turntable.has-playing .tt-playing {
    display: block;
}
body.records-playing .turntable.has-playing>.art,
body.records-playing .turntable.has-playing>.placeholder {
    visibility: hidden;
}
.turntable .tt-disc {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.turntable .tt-arm {
    transform-box: view-box;
    transform-origin: 83% 22%;
    transition: transform 1.1s cubic-bezier(.4, .1, .3, 1);
}
body.records-playing .turntable .tt-arm {
    transform: rotate(24deg);
}
/* (the records spin in the script below: slowly, winding up and slowing down like a real turntable) */
@keyframes rp-spin {
    to {
        transform: rotate(360deg);
    }
}
/* the record on a turntable of your own drawing (where its platter is: --platter-x/-y/-w on .turntable) */
.turntable .tt-record {
    position: absolute;
    left: calc(var(--platter-x, 40%) - var(--platter-w, 54%) / 2);
    top: var(--platter-y, 52.7%);
    width: var(--platter-w, 54%);
    aspect-ratio: 1;
    transform: translateY(-50%) scaleY(.3);
    pointer-events: none;
    display: none;
}
.turntable.has-art .tt-record.on {
    display: block;
}
.turntable .tt-record svg {
    width: 100%;
    height: 100%;
    display: block;
}
.turntable .tt-hint {
    position: absolute;
    left: 50%;
    top: -1.6em;
    transform: translateX(-50%);
    white-space: nowrap;
    font-style: italic;
    font-size: .95rem;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .25s;
}
.turntable:hover .tt-hint,
.turntable:focus-visible .tt-hint {
    opacity: 1;
}
.turntable .tt-notes {
    position: absolute;
    right: 8%;
    top: -10%;
    font-size: 1.1rem;
    color: #ffd98a;
    opacity: 0;
    pointer-events: none;
}
.turntable .tt-notes.n2 {
    right: 26%;
    font-size: .9rem;
}
.turntable .tt-notes.n3 {
    right: 44%;
    font-size: 1.2rem;
}
body.records-playing .turntable .tt-notes {
    animation: rp-notes 3.2s ease-in-out infinite;
}
body.records-playing .turntable .tt-notes.n2 {
    animation-delay: -1.1s;
}
body.records-playing .turntable .tt-notes.n3 {
    animation-delay: -2.2s;
}
@keyframes rp-notes {
    0% {
        opacity: 0;
        transform: translate(0, 10px) rotate(-8deg);
    }
    30% {
        opacity: .9;
    }
    100% {
        opacity: 0;
        transform: translate(14px, -34px) rotate(10deg);
    }
}
/* the player */
.records {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 8;
    width: min(760px, 100vw);
    max-height: 88vh;
    overflow: auto;
    transform: translate(-50%, 105%);
    transition: transform .5s cubic-bezier(.3, .7, .25, 1);
    padding: 22px 26px 20px;
    border-radius: 18px 18px 0 0;
    background: #eadcb9;
    color: #3a2716;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .45), inset 0 0 30px rgba(120, 80, 30, .25);
    font-family: "IM Fell English", Georgia, serif;
}
.records.open {
    transform: translate(-50%, 0);
}
.records h2 {
    margin: 0 0 14px;
    font: normal 1.5rem "IM Fell English SC", Georgia, serif;
}
.records .rp-close {
    position: absolute;
    right: 14px;
    top: 12px;
    border: 0;
    background: none;
    font: italic 1rem "IM Fell English", Georgia, serif;
    color: #6e5236;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
}
.records .rp-close:hover {
    background: rgba(110, 82, 54, .14);
    color: #3a2716;
}
.rp-now {
    display: flex;
    gap: 20px;
    align-items: center;
}
.rp-now .rp-disc {
    flex: none;
    width: 128px;
    height: 128px;
}
.rp-info {
    flex: 1;
    min-width: 0;
}
.rp-title {
    font-size: 1.35rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-artist {
    font-style: italic;
    color: #6e5236;
    min-height: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-seek {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 6px;
    font-size: .9rem;
    color: #6e5236;
    font-variant-numeric: tabular-nums;
}
.rp-seek input {
    flex: 1;
}
.rp-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rp-controls button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #3a2716;
    cursor: pointer;
}
.rp-controls button:hover {
    background: rgba(110, 82, 54, .14);
}
.rp-controls .rp-play {
    width: 46px;
    height: 46px;
    background: #3a2716;
    color: #f3e6c2;
}
.rp-controls .rp-play:hover {
    background: #9a3b1f;
}
.rp-controls svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.rp-controls .i-pause,
body.records-playing .rp-controls .i-play {
    display: none;
}
body.records-playing .rp-controls .i-pause {
    display: block;
}
.rp-controls .rp-stop {
    width: auto;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font: italic .95rem "IM Fell English", Georgia, serif;
    color: #6e5236;
}
.rp-vol {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #6e5236;
}
.rp-vol input {
    width: 96px;
}
.records input[type=range] {
    accent-color: #9a3b1f;
}
.rp-crate-title {
    margin: 20px 0 0;
    font-style: italic;
    color: #6e5236;
}
.rp-empty {
    font-style: italic;
    color: #6e5236;
}
body.records-open .signpost {
    opacity: 0;
    pointer-events: none;
}
/* the sleeves, leaning on each other */
.rp-sleeves {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    padding: 34px 90px 34px 10px;
    margin: 0 -8px;
    scrollbar-width: thin;
}
.rp-sleeve {
    position: relative;
    flex: none;
    width: 132px;
    height: 132px;
    margin-right: -62px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: rotate(var(--tilt, 0deg));
    transition: transform .22s cubic-bezier(.3, .7, .3, 1.5), margin .22s;
    font: inherit;
    color: inherit;
}
.rp-sleeve:hover,
.rp-sleeve:focus-visible {
    transform: translateY(-14px) rotate(calc(var(--tilt, 0deg) * .3));
    z-index: 60 !important;
    outline: none;
}
.rp-sleeve .sl-disc {
    position: absolute;
    left: 6%;
    top: 3%;
    width: 88%;
    height: 88%;
    transition: transform .3s ease;
}
.rp-sleeve:hover .sl-disc {
    transform: translateY(-9%);
}
.rp-sleeve.on .sl-disc {
    display: none;
}
.rp-sleeve .sl-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 2px;
    background: var(--sl, #9a3b1f);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 26px rgba(0, 0, 0, .18);
}
.rp-sleeve .sl-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rp-sleeve .sl-cover .sl-plain {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12%;
    text-align: center;
    color: #f3e6c2;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.15;
    background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(255, 240, 210, .14) 30.5% 31.5%, transparent 32% 44%, rgba(255, 240, 210, .1) 44.5% 45.5%, transparent 46%), linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .18));
}
.rp-sleeve .sl-name {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .92rem;
    font-style: italic;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.rp-sleeve:hover .sl-name,
.rp-sleeve:focus-visible .sl-name,
.rp-sleeve.on .sl-name {
    opacity: 1;
}
.rp-sleeve.on .sl-name {
    color: #9a3b1f;
}
.rp-sleeve.on .sl-cover::after {
    content: "♪ on";
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(42, 29, 20, .82);
    color: #f3e6c2;
    font-size: .8rem;
    font-style: italic;
}
.rp-sleeve.lifted {
    visibility: hidden;
}
/* an album's sleeve: a gold border just inside its edge (brushed metal: light and dark bands, a bevel) */
.rp-sleeve.album .sl-cover::before {
    content: "";
    position: absolute;
    inset: 5%;
    z-index: 1;
    pointer-events: none;
    border: 3px solid transparent;
    border-image: linear-gradient(135deg, #6e4c14, #e9c96a 14%, #fff4c8 24%, #b8892e 38%, #f6dd8e 52%, #8a6320 64%, #ffeaa8 78%, #c29636 90%, #5e400e) 1;
    box-shadow: 0 0 0 1px rgba(50, 32, 6, .45), inset 0 0 0 1px rgba(50, 32, 6, .45), 0 0 6px rgba(255, 220, 120, .25);
}
.rp-sleeve.album .sl-cover::after {
    z-index: 2;
}
.rp-sleeve .sl-count {
    position: absolute;
    left: 50%;
    bottom: 9%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(42, 29, 20, .78);
    color: #f6dd8e;
    font-size: .72rem;
    font-style: italic;
    white-space: nowrap;
}
/* the album's songs, while it plays */
.rp-album {
    margin: 14px 0 0;
    padding: 10px 12px 8px;
    border-radius: 12px;
    background: rgba(110, 82, 54, .08);
    position: relative;
    box-shadow: inset 0 0 0 1.5px rgba(196, 154, 82, .7), inset 0 0 0 3px rgba(255, 240, 190, .35);
    transform-origin: 50% 0;
}
.rp-album[hidden] {
    display: none;
}
.rp-album.pop {
    animation: rp-pop .35s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes rp-pop {
    from {
        opacity: 0;
        transform: scaleY(.6) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.rp-album h3 {
    margin: 0 0 6px;
    font: italic 1rem "IM Fell English", Georgia, serif;
    color: #8a6320;
}
.rp-album ol {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow: auto;
    columns: 2 220px;
    column-gap: 12px;
}
.rp-album li {
    break-inside: avoid;
}
.rp-album button {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: .98rem;
    color: #3a2716;
    line-height: 1.25;
}
.rp-album button:hover,
.rp-album button:focus-visible {
    background: rgba(110, 82, 54, .16);
    outline: none;
}
.rp-album button span {
    flex: none;
    min-width: 1.5em;
    color: #9a7a4a;
    font-variant-numeric: tabular-nums;
}
.rp-album button.on {
    color: #9a3b1f;
    font-style: italic;
}
.rp-album button.on span::before {
    content: "♪";
    margin-right: 2px;
}
.rp-fly {
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
}
.rp-fly>* {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 50% 50%;
}
.rp-fly .fly-disc svg {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 620px) {
    .records {
        padding: 18px 16px 16px;
    }
    .rp-now .rp-disc {
        width: 92px;
        height: 92px;
    }
    .rp-vol {
        display: none;
    }
    .rp-sleeve {
        width: 104px;
        height: 104px;
        margin-right: -50px;
    }
    .rp-sleeves {
        padding: 30px 70px 30px 8px;
    }
}

/* the lo-fi slider on the front of the record player (sky/records.js): up = the bitcrush, down = as recorded.
   where it sits: --lofi-x/-y/-w/-h (shares of the record player's box); move them to suit your own record player */
.turntable {
    --lofi-x: 6%;
    --lofi-y: 57%;
    --lofi-w: 7.5%;
    --lofi-h: 38%;
}
.turntable .tt-lofi {
    position: absolute;
    left: var(--lofi-x);
    top: var(--lofi-y);
    width: var(--lofi-w);
    height: var(--lofi-h);
    z-index: 4;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.turntable .tt-lofi-fader {
    position: absolute;
    inset: 0;
}
.turntable .tt-lofi-fader > svg,
.turntable .tt-lofi-fader > .art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
/* the knob: at the bottom of its run (off), sliding up to the top (on), in the time the sound takes (--lofi-ms) */
.turntable .tt-lofi-knob {
    position: absolute;
    left: -30%;
    width: 160%;
    aspect-ratio: 5 / 3;
    top: 72%;
    transform: translateY(-50%);
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55));
    transition: top var(--lofi-ms, 1200ms) cubic-bezier(.4, 0, .3, 1);
}
.turntable .tt-lofi.on .tt-lofi-knob {
    top: 18%;
}
.turntable .tt-lofi-knob > svg,
.turntable .tt-lofi-knob > .art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.turntable .tt-lofi:hover .tt-lofi-knob,
.turntable .tt-lofi:focus-visible .tt-lofi-knob {
    filter: drop-shadow(0 0 4px rgba(255, 220, 150, .9));
}
.turntable .tt-lofi:focus-visible {
    outline: none;
}
.turntable .tt-lofi-hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    white-space: nowrap;
    font: italic .85rem "IM Fell English", Georgia, serif;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.turntable .tt-lofi:hover .tt-lofi-hint,
.turntable .tt-lofi:focus-visible .tt-lofi-hint {
    opacity: 1;
}
/* (pointing at the slider: only its own hint, not the record player's) */
.turntable:has(.tt-lofi:hover) .tt-hint,
.turntable:has(.tt-lofi:focus-visible) .tt-hint {
    opacity: 0;
}

/* ---------------- P(Doom)'s own slot, at the end of the crate (records.js drawSpecial) ---------------- */
.rp-special {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin: -9px 0 0 84px;
    border-radius: 10px;
}
/* its glow (reset 5 on, .pure: purified): every colour, turning. before reset 4 it's just a slot of its own */
.rp-special::before {
    content: "";
    display: none;
    position: absolute;
    inset: -9px;
    border-radius: 14px;
    background: conic-gradient(#ff2a4a, #ff8a1e, #ffe23a, #52e05a, #28c8ff, #5a6cff, #c04cff, #ff2a4a);
    filter: blur(10px);
    opacity: .85;
    animation: rp-special-glow 4s linear infinite;
    z-index: 0;
}
.rp-special::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 8px;
    background: rgba(243, 230, 194, .9);
    box-shadow: inset 0 0 0 1.5px rgba(154, 59, 31, .25);
    z-index: 0;
}
.rp-special.pure::before,
.rp-special.inverted::before {
    display: block;
}
.rp-special .rp-special-mark {
    display: none;
}
.rp-special.pure .rp-special-mark,
.rp-special.inverted .rp-special-mark {
    display: block;
}
/* its caption, always showing: the name, or ??? until it's found */
.rp-special .rp-special-name {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 3;
    width: max-content;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    font-style: italic;
    color: #6e5236;
}
.rp-special.waiting:not(.pure) .rp-special-name {
    letter-spacing: .3em;
    color: #8a7258;
}
.rp-special.inverted .rp-special-name {
    color: #9a0a0a;
}
.rp-special>.rp-sleeve .sl-name {
    display: none;
}
@keyframes rp-special-glow {
    to {
        filter: blur(10px) hue-rotate(360deg);
    }
}
.rp-special>.rp-sleeve {
    margin: 0;
    z-index: 2 !important;
    --tilt: 0deg !important;
}
.rp-special .rp-special-mark {
    position: absolute;
    top: -12px;
    right: -8px;
    z-index: 3;
    font-size: 1.2rem;
    color: #c04cff;
    text-shadow: 0 0 6px #fff;
    animation: rp-special-glow 4s linear infinite;
}
/* not found yet: a faint outline, somewhere a record should be */
.rp-special.waiting.pure::before {
    opacity: .28;
}
.rp-special .rp-special-empty {
    position: relative;
    z-index: 1;
    width: 132px;
    height: 132px;
    border: 2px dashed rgba(110, 82, 54, .35);
    border-radius: 3px;
}
/* the inverted twin: a red, evil glow. it throbs like something breathing, and it flickers */
.rp-special.inverted::before {
    inset: -24px;
    border-radius: 30px;
    background: radial-gradient(closest-side, #3a0000 0 58%, #ff1408 72%, rgba(170, 0, 0, .7) 86%, transparent);
    filter: blur(8px);
    opacity: .95;
    animation: rp-evil-throb 2.4s ease-in-out infinite, rp-evil-flicker 3.7s steps(1) infinite;
}
.rp-special.inverted::after {
    background: radial-gradient(ellipse at 50% 50%, #2a0404, #0a0000 80%);
    box-shadow: inset 0 0 18px rgba(255, 0, 0, .55), inset 0 0 0 1.5px rgba(160, 0, 0, .8);
}
@keyframes rp-evil-throb {
    0%, 100% {
        transform: scale(.96);
    }
    45% {
        transform: scale(1.08);
    }
    55% {
        transform: scale(1.03);
    }
}
@keyframes rp-evil-flicker {
    0%, 100% {
        opacity: .95;
    }
    31% {
        opacity: .35;
    }
    32% {
        opacity: .95;
    }
    74% {
        opacity: .5;
    }
    75% {
        opacity: 1;
    }
}
.rp-special.inverted .rp-special-mark {
    color: #ff1a0a;
    text-shadow: 0 0 6px #600, 0 0 12px #f00;
    animation: rp-evil-flicker 3.7s steps(1) infinite;
}
.rp-special.inverted .rp-sleeve .sl-cover {
    box-shadow: 0 0 14px rgba(255, 0, 0, .6), 0 6px 12px rgba(0, 0, 0, .5);
}
.rp-sleeve.inverted .sl-cover {
    filter: invert(1) hue-rotate(180deg) contrast(1.1);
}
.rp-sleeve.inverted .sl-name {
    color: #9a0a0a;
}
@media (prefers-reduced-motion: reduce) {
    .rp-special::before,
    .rp-special .rp-special-mark,
    .rp-special.inverted::before {
        animation: none;
    }
}

/* reset 4, the pact made: the record player glows red and evil till the inverted record's put on (records.js evilWaiting) */
body.evil-waiting .turntable {
    animation: evil-waiting 1.9s ease-in-out infinite;
}
@keyframes evil-waiting {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(200, 20, 10, .6)) drop-shadow(0 0 16px rgba(150, 0, 0, .4)); }
    50% { filter: drop-shadow(0 0 11px rgba(255, 45, 25, .95)) drop-shadow(0 0 34px rgba(200, 0, 0, .65)); }
}
body.evil-waiting .turntable .tt-hint {
    opacity: 1;
    color: #ffb8a4;
    text-shadow: 0 0 8px rgba(200, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .8);
}
/* a phone held sideways (5 Oct): the record player smaller all round, so the crate's records show under it too (they
   were below the bottom of the screen) */
@media (max-height: 500px) and (min-width: 621px) {
    .records {
        max-height: 96vh;
        padding: 12px 22px 8px;
    }
    .records h2 {
        margin-bottom: 6px;
        font-size: 1.25rem;
    }
    .rp-now .rp-disc {
        width: 84px;
        height: 84px;
    }
    .rp-sleeve {
        width: 96px;
        height: 96px;
        margin-right: -46px;
    }
    .rp-sleeves {
        padding: 16px 70px 16px 8px;
    }
}

/* a record that fell out of a letter (sky/letters.js): a small red wax seal on its sleeve's corner */
.rp-sleeve.from-letter .sl-cover::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #c9573a, #8a2a14 60%, #5e1a0b);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}