/* Scary Social — works, Dread Meter, Vault, billing, séances, lore, badges. */
.ss-vault { max-inline-size: 60rem; margin-inline: auto; color: var(--ss-text, #ececec); }
.ss-work-grid, .ss-story-grid, .ss-seance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin-block: 1rem; }
.ss-work-card, .ss-story-card, .ss-seance-card { display: flex; flex-direction: column; gap: 0.35rem; background: #141418; border: 1px solid #2e2e36; border-radius: 0.75rem; padding: 0.75rem; color: #fff; text-decoration: none; }
.ss-work-card:hover, .ss-story-card:hover, .ss-seance-card:hover { border-color: #c1121f; }
.ss-work-card:focus-visible, .ss-story-card:focus-visible, .ss-seance-card:focus-visible { outline: 3px solid #ffd166; }
.ss-work-cover { aspect-ratio: 2 / 3; background: #1c1c22; border-radius: 0.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ss-work-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ss-work-kind { color: #a3a3ad; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.ss-story-card { min-block-size: 9rem; justify-content: flex-end; background-size: cover; background-position: center; }
.ss-seance-card.ss-live { border-color: #c1121f; box-shadow: 0 0 0 1px #c1121f; }
.ss-dread { block-size: 8px; background: #26262e; border-radius: 999px; overflow: hidden; }
.ss-dread-fill { block-size: 100%; background: linear-gradient(90deg, #7a0a12, #e63946); }
.ss-work-head { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-block-end: 1rem; }
.ss-work-poster { inline-size: 12rem; max-inline-size: 40%; border-radius: 0.75rem; object-fit: cover; }
.ss-work h1, .ss-story h1 { margin: 0 0 0.5rem; color: #fff; }
.ss-meter { background: #141418; border: 1px solid #2e2e36; border-radius: 0.75rem; padding: 1rem; margin-block: 1rem; }
.ss-meter-row { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: 0.75rem; margin-block: 0.4rem; }
.ss-rate-form { background: #141418; border: 1px solid #2e2e36; border-radius: 0.75rem; padding: 1rem; margin-block: 1rem; }
.ss-rate-row { display: flex; align-items: center; gap: 0.25rem; margin-block: 0.35rem; flex-wrap: wrap; }
.ss-rate-row > span:first-child { inline-size: 8rem; }
.ss-rate-skull { cursor: pointer; font-size: 1.4rem; filter: grayscale(1) opacity(0.4); padding: 0.2rem; }
.ss-rate-skull:has(input:checked), .ss-rate-skull:has(~ .ss-rate-skull input:checked) { filter: none; }
.ss-rate-skull:focus-within { outline: 3px solid #ffd166; border-radius: 0.35rem; }
.ss-rate-form textarea { inline-size: 100%; box-sizing: border-box; background: #1c1c22; color: #ececec; border: 1px solid #2e2e36; border-radius: 0.5rem; padding: 0.6rem; font: inherit; margin-block-start: 0.5rem; }
.ss-story { max-inline-size: 42rem; margin-inline: auto; font-size: 1.1rem; line-height: 1.8; }
.ss-story-cover { inline-size: 100%; max-block-size: 24rem; object-fit: cover; border-radius: 0.75rem; }
.ss-warnings { color: #ffb4b4; }
.ss-chapter-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-block: 1rem; }
.ss-chapter { margin-block: 2rem; }
.ss-chapter-body p { margin: 0 0 1.2em; }
.ss-scene-break { border: 0; text-align: center; margin: 2rem 0; }
.ss-scene-break::before { content: '✦ ✦ ✦'; color: #6d6d78; }
body.ss-dark-reading { background: #000 !important; }
body.ss-dark-reading .ss-story { color: #bdbdbd; }
body.ss-dark-reading :not(.ss-story):not(.ss-story *) { opacity: 0.35; }
body.ss-dark-reading .ss-story, body.ss-dark-reading .ss-story * { opacity: 1; }
.ss-editor textarea, .ss-editor input, .ss-editor select, .ss-chapter-editor input, .ss-chapter-editor textarea { inline-size: 100%; box-sizing: border-box; background: #1c1c22; color: #ececec; border: 1px solid #2e2e36; border-radius: 0.5rem; padding: 0.6rem; font: inherit; margin-block-end: 0.5rem; }
.ss-chapter-editor { border-block-start: 1px solid #2e2e36; padding-block: 1rem; }
.ss-billing { display: flex; flex-direction: column; gap: 0.75rem; max-inline-size: 26rem; }
.ss-perks { line-height: 1.8; }
.ss-reco h2 { margin-block: 1.5rem 0.5rem; }
.ss-reco-members { display: flex; flex-wrap: wrap; gap: 1rem; }
.ss-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.ss-badge-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; background: #141418; border: 1px solid #2e2e36; border-radius: 0.75rem; padding: 1rem; }
.ss-badge-icon { font-size: 2rem; }
.ss-tier-3 { border-color: #c1121f; } .ss-tier-4 { border-color: #ffd166; }
.ss-seance-head { margin-block-end: 1rem; }
.ss-seance-chat { block-size: 24rem; overflow-y: auto; background: #0f0f12; border: 1px solid #2e2e36; border-radius: 0.75rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ss-msg { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ss-msg-host strong { color: #e63946; }
.ss-msg-body p { margin: 0; }
.ss-sync { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-block: 0.75rem; }
.ss-sync input { inline-size: 6rem; background: #1c1c22; color: #ececec; border: 1px solid #2e2e36; border-radius: 0.5rem; padding: 0.5rem; }
.ss-clock { font-family: ui-monospace, monospace; color: #a3a3ad; }
.ss-lore-map { block-size: 70vh; min-block-size: 24rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid #2e2e36; }
.ss-lore-list { list-style: none; padding: 0; margin-block: 1rem; }
.ss-lore-list li { padding: 0.5rem 0; border-block-end: 1px solid #2e2e36; }
.leaflet-container { background: #0b0b0d; }
@media (prefers-reduced-motion: reduce) { .ss-seance-card.ss-live { box-shadow: none; } }