/* student-shelves-v1b.css — LibraryAid student-home bookcase: an old school-library cabinet.
   Carved dark oak, fluted pilasters, brass nameplates, lamplit bays. "My Books" is a gilded
   display with books on stands. Pure CSS (no images). To undo: remove the <link> and the
   student-shelves script from student-home.html; the old carousels return by themselves. */

body.ss-on #legacyCarousels,
body.ss-on #myBorrowedBooksSection { display: none !important; }

.ss {
    --pil: 16px;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --brass: #d9b45a; --brass-hi: #f6e3a6; --brass-lo: #8a6a1e;
    --oak-dark: #24130a; --oak: #3d2212; --oak-mid: #6a3f22;
    --ink: #4a2b17; --parchment: #f4e7c5;
    /* long thin streaks, drawn once: vertical grain for uprights, horizontal for rails and boards */
    --grain-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.012' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.02  0 0 0 0 0  1.1 0 0 0 -0.38'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
    --grain-h: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.9' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.02  0 0 0 0 0  1.1 0 0 0 -0.38'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
    width: 100%; max-width: 1100px; margin: 20px auto; box-sizing: border-box;
}
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss [hidden] { display: none !important; }

/* ---------- the cabinet ---------- */
.ss-case {
    position: relative; padding: 0 var(--pil); overflow: hidden; border-radius: 3px;
    background: var(--grain-v), linear-gradient(90deg, #2a170c, #4a2a16 8%, #3b2112 50%, #4a2a16 92%, #2a170c);
    box-shadow: 0 22px 44px rgba(20,8,2,.55), 0 0 0 2px #1d0e05, 0 0 0 4px rgba(217,180,90,.45);
}
.ss-pil {
    position: absolute; top: 0; bottom: 0; width: var(--pil); z-index: 3; pointer-events: none;
    background:
        linear-gradient(180deg, #ecd089, #a9822c) top / 100% 11px no-repeat,
        linear-gradient(180deg, #a9822c, #ecd089) bottom / 100% 11px no-repeat,
        repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1.5px, rgba(255,205,140,.12) 1.5px 5px, rgba(0,0,0,.25) 5px 6.5px),
        var(--grain-v),
        linear-gradient(90deg, #35200f, #6e4224 50%, #35200f);
    box-shadow: 0 0 12px rgba(0,0,0,.7);
}
.ss-pil.l { left: 0; } .ss-pil.r { right: 0; }

/* ---------- the pediment: title, links, filters ---------- */
.ss-top {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 calc(-1 * var(--pil)); padding: 24px calc(var(--pil) + 10px) 14px;
    background: var(--grain-h), linear-gradient(180deg, #4a2a16, #2f1a0d);
    border-bottom: 3px solid var(--brass-lo);
    box-shadow: inset 0 -2px 0 var(--brass), 0 8px 14px rgba(0,0,0,.45);
}
.ss-top::before {  /* dentil moulding along the top edge */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
    background: repeating-linear-gradient(90deg, var(--brass) 0 7px, #2a170c 7px 12px);
    box-shadow: 0 2px 0 #1a0d05;
}
.ss-title {
    margin: 0; flex: 1 1 0; min-width: 0; font: 700 24px/1.15 var(--serif); letter-spacing: .4px;
    color: var(--brass-hi); text-shadow: 0 2px 0 #1a0d05, 0 0 14px rgba(255,200,110,.35);
}
.ss-search {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 19px; line-height: 1;
    border: 2px solid var(--brass-lo); background: radial-gradient(circle at 35% 30%, #fff2c2, #d9b45a 60%, #9a7424);
    box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
.ss-links { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.ss-pill {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 6px;
    border: 2px solid var(--brass); color: #fbf0d0; font: 700 15px/1 var(--serif); text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.ss-pill.all { background: linear-gradient(180deg, #a63a47, #701d2a); }
.ss-pill.top { background: linear-gradient(180deg, #3f7f5f, #24503a); }
.ss-tools { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; flex-wrap: wrap; }
.ss-tab {  /* a card-catalogue drawer label */
    min-height: 44px; padding: 0 18px; cursor: pointer; border-radius: 4px; color: var(--ink);
    font: 700 15px/1 var(--serif);
    border: 2px solid var(--brass-lo);
    background: linear-gradient(180deg, #f8edcf, #e6d29c);
    box-shadow: inset 0 0 0 2px #f8edcf, 0 3px 0 #5b3d0d, 0 5px 8px rgba(0,0,0,.45);
}
.ss-tab[aria-pressed="true"] {
    background: linear-gradient(180deg, #fff3b8, #f1cf6a);
    box-shadow: inset 0 0 0 2px #fff6cf, 0 0 14px 2px rgba(255,214,120,.65), 0 3px 0 #5b3d0d;
    transform: translateY(2px);
}
.ss-pill:focus-visible, .ss-tab:focus-visible, .ss-search:focus-visible, .ss-book:focus-visible { outline: 3px solid #fff3b0; outline-offset: 3px; }

.ss-hint {
    display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 14px; padding: 10px 14px;
    border: 2px solid var(--brass-lo); border-radius: 6px; color: var(--ink);
    background: linear-gradient(180deg, #f6ebcb, #ead9a8);
    font: 600 14px/1.45 var(--serif); box-shadow: inset 0 0 0 2px #f8efd3, 0 4px 10px rgba(0,0,0,.4);
}
.ss-hint-ico { font-size: 20px; line-height: 1.2; }

/* ---------- a bay: carved rail with a nameplate, lamplit recess, shelf board ---------- */
.ss-shelf { position: relative; margin: 0; }
.ss-rail {
    position: relative; height: 46px; display: flex; align-items: center; justify-content: center;
    background: var(--grain-h), linear-gradient(180deg, #62391f, #3a2011 70%, #2b170b);
    border-top: 2px solid rgba(255,214,150,.22);
    box-shadow: inset 0 -7px 9px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,225,185,.12);
}
.ss-plaque {
    margin: 0; padding: 7px 26px 8px; position: relative; border-radius: 4px; text-align: center;
    font: 700 16px/1.15 var(--serif); letter-spacing: .5px; color: #3f2a07; text-shadow: 0 1px 0 rgba(255,245,210,.7);
    background:
        radial-gradient(circle at 9px 50%, #6e4e10 0 2px, transparent 2.6px),
        radial-gradient(circle at calc(100% - 9px) 50%, #6e4e10 0 2px, transparent 2.6px),
        linear-gradient(180deg, #f6e3a6, #d9b45a 55%, #b08a2c);
    box-shadow: 0 3px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(110,78,16,.55);
}
.ss-back {
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255,214,130,.55), rgba(255,214,130,0) 72%),
        repeating-linear-gradient(90deg, rgba(0,0,0,.24) 0 2px, rgba(0,0,0,0) 2px 56px),
        linear-gradient(180deg, #4b2d19, #6a4125 55%, #7b4e2c);
    box-shadow: inset 0 16px 20px -6px rgba(0,0,0,.8), inset 14px 0 16px -8px rgba(0,0,0,.65), inset -14px 0 16px -8px rgba(0,0,0,.65);
}
.ss-row {
    display: flex; align-items: flex-end; gap: 20px; min-width: 0;
    padding: 24px 18px 4px; overflow-x: auto; overflow-y: hidden;
    scroll-padding: 0 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.ss-board {
    height: 24px; margin: 0;
    background: var(--grain-h), linear-gradient(180deg, #e0b074 0, #c9915a 3px, #8d5733 3px, #6a3f22 55%, #43260f 100%);
    box-shadow: 0 7px 12px rgba(0,0,0,.55), inset 0 -2px 0 rgba(0,0,0,.4);
}

/* ---------- a book: the whole cover is one big button ---------- */
.ss-book {
    position: relative; flex: 0 0 auto; height: 132px; margin: 0 0 2px; padding: 0; border: 0;
    background: none; cursor: pointer; border-radius: 4px; scroll-snap-align: start; font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.ss-book img, .ss-tile {
    display: block; height: 100%; width: auto; min-width: 88px; max-width: 120px; object-fit: cover;
    border-radius: 2px 5px 5px 2px; box-shadow: 8px 5px 10px rgba(20,8,2,.6), 2px 0 2px rgba(0,0,0,.25);
}
.ss-book::after {
    content: ""; position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.30) 0, rgba(255,255,255,.22) 3%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 70%, rgba(255,255,255,.10) 88%, rgba(0,0,0,.12) 100%);
}
.ss-tile {
    width: 96px; padding: 10px 8px; display: flex; align-items: center; justify-content: center; text-align: center;
    color: #fff; font-size: 12px; font-weight: 800; line-height: 1.25; overflow: hidden; word-break: break-word;
}
.ss-tile.c0 { background: linear-gradient(160deg, #3f7cac, #274c6b); }
.ss-tile.c1 { background: linear-gradient(160deg, #c0563a, #7d2e1c); }
.ss-tile.c2 { background: linear-gradient(160deg, #5a9a62, #2f5e36); }
.ss-tile.c3 { background: linear-gradient(160deg, #8e5fb0, #522f6e); }
.ss-tile.c4 { background: linear-gradient(160deg, #d19a2a, #8b5f10); }
.ss-tile.c5 { background: linear-gradient(160deg, #3b9a9a, #1d5c5c); }

.ss-badge, .ss-mark {
    position: absolute; top: -9px; z-index: 3; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
    background: #fff; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.ss-badge { right: -9px; } .ss-mark { left: -9px; }
.ss-badge.gem { background: radial-gradient(circle at 35% 30%, #e9d5ff, #9c27b0); }
.ss-badge.award { background: radial-gradient(circle at 35% 30%, #fff3b0, #e0a800); }
.ss-ribbon {  /* bookmark ribbon on borrowed books */
    position: absolute; top: -5px; right: 10px; z-index: 3; width: 15px; height: 36px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); background: #2e7d32;
}
.ss-ribbon.t-soon { background: #e08a00; } .ss-ribbon.t-late { background: #a8322a; }

.ss-tag, .ss-avail {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 4px 4px 5px; text-align: center;
    font-size: 11px; font-weight: 800; line-height: 1.2; color: #fff; border-radius: 0 0 5px 2px;
}
.ss-tag.t-ok { background: rgba(46,125,50,.94); }
.ss-tag.t-soon { background: rgba(214,120,0,.96); }
.ss-tag.t-late { background: rgba(168,50,42,.96); }
.ss-tag.t-reading { background: rgba(60,80,190,.95); }
.ss-tag.t-want { background: rgba(20,140,92,.96); }
.ss-avail.in { background: rgba(34,150,80,.94); }
.ss-avail.out { background: rgba(200,60,60,.94); }

/* ---------- My Books: a gilded display, books on stands ---------- */
.ss-mine .ss-rail { background: var(--grain-h), linear-gradient(180deg, #7a1f2c, #4a1019 75%, #32090f); }
.ss-mine .ss-plaque { font-size: 19px; }
.ss-mine .ss-rail { height: 54px; }
.ss-mine .ss-book { height: 164px; }
.ss-mine .ss-book img, .ss-mine .ss-tile { min-width: 108px; max-width: 150px; }
.ss-mine .ss-tile { width: 112px; }
.ss-mine .ss-ghost { width: 112px; height: 164px; }
.ss-mine .ss-tag { font-size: 12px; }
.ss-mine .ss-back {
    background:
        radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255,250,215,.85), rgba(255,250,215,0) 70%),
        repeating-linear-gradient(45deg, rgba(130,90,15,.14) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(-45deg, rgba(130,90,15,.14) 0 1px, transparent 1px 15px),
        linear-gradient(180deg, #f3dc8e, #dcb650 50%, #bb8d2e);
    box-shadow: inset 0 0 0 3px #8a6a1e, inset 0 0 0 5px #f6e3a6, inset 0 0 0 7px #8a6a1e, inset 0 14px 18px -6px rgba(70,40,0,.5);
}
.ss-mine .ss-row { padding: 32px 26px 22px; gap: 26px; }
.ss-mine .ss-book { margin-bottom: 12px; }
.ss-mine .ss-book:hover { transform: none; }
.ss-mine .ss-board { background: var(--grain-h), linear-gradient(180deg, #f6e3a6 0, #c9a24a 4px, #8d5733 4px, #6a3f22 55%, #43260f 100%); }
.ss-mine .ss-book::before, .ss-ghost::before {  /* the display stand under the book */
    content: ""; position: absolute; left: -9%; right: -9%; bottom: -12px; height: 14px; border-radius: 3px 3px 7px 7px; z-index: 0;
    background: linear-gradient(180deg, #f6e3a6 0, #c9a24a 3px, #7b4a29 3px, #4a2b17 100%);
    box-shadow: 0 6px 8px rgba(40,20,0,.5);
}
.ss-ghosts { pointer-events: none; justify-content: center; overflow: visible; padding-top: 4px; }
.ss-ghost {
    position: relative; flex: 0 0 auto; width: 96px; height: 132px; margin-bottom: 12px;
    border: 2px dashed rgba(90,56,12,.6); border-radius: 3px;
}
.ss-msg { margin: 0; padding: 22px 20px 14px; text-align: center; color: var(--ink); font: 700 15px/1.4 var(--serif); }
.ss-msg strong { display: block; font-size: 20px; }
.ss-sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }

/* ---------- footer: note + plinth ---------- */
.ss-note { margin: 0; padding: 14px 6px 12px; text-align: center; font-size: 10.5px; font-style: italic; color: rgba(246,227,166,.75); }
.ss-plinth {
    height: 26px; margin: 0 calc(-1 * var(--pil));
    background: linear-gradient(180deg, var(--brass) 0, var(--brass-lo) 4px, #3a2011 4px, #1f0f06 100%);
    box-shadow: inset 0 3px 0 rgba(255,235,170,.4);
}

@media (min-width: 700px) {
    .ss { --pil: 32px; }
    .ss-title { font-size: 30px; }
    .ss-links { flex: 0 0 auto; }
    .ss-tools { flex: 1 1 100%; }
    .ss-rail { height: 52px; }
    .ss-plaque { font-size: 18px; padding: 8px 34px 9px; }
    .ss-mine .ss-plaque { font-size: 23px; }
    .ss-mine .ss-rail { height: 62px; }
    .ss-mine .ss-book { height: 236px; }
    .ss-mine .ss-book img, .ss-mine .ss-tile { min-width: 150px; max-width: 200px; }
    .ss-mine .ss-tile { width: 156px; font-size: 16px; }
    .ss-mine .ss-ghost { width: 156px; height: 236px; }
    .ss-mine .ss-tag { font-size: 14px; padding: 6px 4px 7px; }
    .ss-row { gap: 28px; padding: 28px 26px 4px; scroll-padding: 0 26px; }
    .ss-mine .ss-row { padding: 38px 40px 26px; gap: 36px; }
    .ss-book { height: 188px; }
    .ss-book img, .ss-tile { min-width: 110px; max-width: 150px; }
    .ss-tile { width: 124px; font-size: 14px; }
    .ss-ghost { width: 124px; height: 188px; }
    .ss-tag, .ss-avail { font-size: 12.5px; }
    .ss-hint { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ss-book { transition: transform .25s cubic-bezier(.25, 1, .5, 1); transform-origin: 50% 100%; }
    .ss-book:hover { transform: translateY(-8px); }
    .ss-tab { transition: transform .15s, box-shadow .15s; }
}

/* ---------- crown (top) and curved feet (bottom): one shape, mirrored ---------- */
.ss-crown, .ss-feet { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 calc(var(--pil) + 4px); height: 40px; }
.ss-crown { margin-bottom: -1px; z-index: 1; }
.ss-feet { align-items: flex-start; margin-top: -1px; }
.ss-ear, .ss-foot {
    display: block; width: 66px; height: 40px;
    background: var(--grain-v), linear-gradient(90deg, #3d2212, #6e4224 50%, #3d2212);
    clip-path: path('M0 0 H66 C66 13 55 16 50 27 C48 32 51 36 55 40 H11 C15 36 18 32 16 27 C11 16 0 13 0 0 Z');
}
.ss-ear { transform: scaleY(-1); }
.ss-arch {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 170px; height: 40px;
    border-radius: 85px 85px 0 0 / 40px 40px 0 0; border: 3px solid var(--brass-lo); border-bottom: 0;
    background: radial-gradient(circle at 50% 58%, #f6e3a6 0 11px, #b08a2c 12px 14px, transparent 15px), var(--grain-h), linear-gradient(180deg, #62391f, #2f1a0d);
    box-shadow: inset 0 2px 0 rgba(255,225,160,.35), 0 -3px 8px rgba(0,0,0,.35);
}
.ss-feet::after {  /* soft shadow on the floor */
    content: ""; position: absolute; left: 6%; right: 6%; bottom: -8px; height: 16px; z-index: -1;
    background: radial-gradient(ellipse at 50% 50%, rgba(10,4,0,.5), transparent 70%); filter: blur(4px);
}
@media (min-width: 1300px) {
    .ss-crown, .ss-feet { height: 54px; padding: 0 calc(var(--pil) + 8px); }
    .ss-ear, .ss-foot { width: 90px; height: 54px; clip-path: path('M0 0 H90 C90 18 75 22 68 37 C65 44 70 49 75 54 H15 C20 49 25 44 22 37 C15 22 0 18 0 0 Z'); }
    .ss-arch { width: 260px; height: 54px; border-radius: 130px 130px 0 0 / 54px 54px 0 0;
        background: radial-gradient(circle at 50% 58%, #f6e3a6 0 15px, #b08a2c 16px 19px, transparent 20px), var(--grain-h), linear-gradient(180deg, #62391f, #2f1a0d); }
}

/* ---------- Hidden Gems sparkle ---------- */
.ss-spark {
    position: absolute; z-index: 4; left: var(--sx); top: var(--sy); width: 22px; height: 22px; pointer-events: none; opacity: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #ffe38a, 0 0 18px #ffc83d;
}
.ss-spark::before { content: "\2726"; }
@keyframes ss-twinkle {
    0%, 62%, 100% { opacity: 0; transform: scale(.25) rotate(0deg); }
    74% { opacity: 1; transform: scale(1.25) rotate(30deg); }
    88% { opacity: .35; transform: scale(.7) rotate(60deg); }
}

/* ---------- My Books pulse ---------- */
@keyframes ss-glow {
    0%, 100% { box-shadow: inset 0 0 26px 2px rgba(255,238,170,.10); }
    50% { box-shadow: inset 0 0 64px 14px rgba(255,238,170,.6); }
}
@keyframes ss-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes ss-ghostpulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .ss-spark { animation: ss-twinkle 3.2s ease-in-out infinite; animation-delay: calc(-1 * var(--sd)); }
    .ss-mine .ss-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: ss-glow 4.8s ease-in-out infinite; }
    .ss-mine .ss-book img, .ss-mine .ss-book .ss-tile { transform-origin: 50% 100%; animation: ss-breathe 4.8s ease-in-out infinite; }
    .ss-mine .ss-book:nth-child(2n) img, .ss-mine .ss-book:nth-child(2n) .ss-tile { animation-delay: -1.2s; }
    .ss-mine .ss-book:nth-child(3n) img, .ss-mine .ss-book:nth-child(3n) .ss-tile { animation-delay: -2.4s; }
    .ss-mine .ss-book:hover img, .ss-mine .ss-book:hover .ss-tile { animation-play-state: paused; }
    .ss-ghost { animation: ss-ghostpulse 2.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .ss-spark { display: none; } }

/* ================= v1d: wider and shorter ================= */
.ss-bays { display: block; }
.ss-hint-txt { flex: 1 1 auto; }
.ss-hint-x {
    flex: 0 0 auto; align-self: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--brass-lo); border-radius: 4px; cursor: pointer;
    background: linear-gradient(180deg, #fff3b8, #f1cf6a); color: var(--ink); font: 700 14px/1 var(--serif);
}
/* nameplate hangs over the top of the recess instead of sitting on its own tall rail */
.ss-rail { height: 16px; }
.ss-plaque { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; font-size: 15px; padding: 5px 22px 6px; }
.ss-mine .ss-rail { height: 16px; }
.ss-mine .ss-plaque { font-size: 17px; padding: 6px 26px 7px; }
.ss-row { padding-top: 32px; }
.ss-mine .ss-row { padding-top: 38px; padding-bottom: 20px; }
.ss-board { height: 18px; }
.ss-hint { margin: 10px 0; padding: 6px 10px 6px 12px; font-size: 14px; }
@media (min-width: 700px) {
    .ss-rail, .ss-mine .ss-rail { height: 18px; }
    .ss-plaque { font-size: 16px; }
    .ss-mine .ss-plaque { font-size: 18px; }
    .ss-row { padding: 36px 24px 4px; gap: 24px; }
    .ss-mine .ss-row { padding: 44px 28px 22px; gap: 28px; }
    .ss-book { height: 156px; }
    .ss-book img, .ss-tile { min-width: 92px; max-width: 130px; }
    .ss-tile { width: 104px; font-size: 13px; }
    .ss-mine .ss-book { height: 196px; }
    .ss-mine .ss-book img, .ss-mine .ss-tile { min-width: 120px; max-width: 165px; }
    .ss-mine .ss-tile { width: 130px; }
    .ss-ghost, .ss-mine .ss-ghost { width: 130px; height: 196px; }
    .ss-tag, .ss-avail, .ss-mine .ss-tag { font-size: 12px; padding: 4px 4px 5px; }
    .ss-board { height: 20px; }
    .ss-top { padding-top: 22px; padding-bottom: 12px; }
    .ss-hint { font-size: 14.5px; }
}
@media (min-width: 900px) {
    .ss { max-width: 1600px; }
    .ss-top { flex-wrap: nowrap; gap: 14px; }
    .ss-title { flex: 0 0 auto; white-space: nowrap; font-size: 26px; }
    .ss-tools { order: 2; flex: 1 1 auto; }
    .ss-search { order: 3; }
    .ss-links { order: 4; flex: 0 0 auto; }
    .ss-bays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
    .ss-shelf.ss-span2 { grid-column: 1 / -1; }
    .ss-bays .ss-plaque { font-size: 15px; }
    .ss-bays .ss-span2 .ss-row { padding-left: 34px; }
}
/* bays side by side share a height: the recess grows, books keep standing on the board */
.ss-shelf { display: flex; flex-direction: column; }
.ss-back { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.ss-back > .ss-row { flex: 0 0 auto; }

/* ---------- Picked for you: who picked what ---------- */
.ss-source { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 36px 18px 0; position: relative; z-index: 3; }
.ss-chip {
    display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 12px; border-radius: 15px;
    border: 2px solid var(--brass-lo); color: var(--ink); background: linear-gradient(180deg, #f8edcf, #e6d29c);
    font: 700 14px/1.2 var(--serif); box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 0 0 1px #f8edcf;
}
.ss-picked .ss-row { padding-top: 14px; }
@media (min-width: 700px) { .ss-source { padding: 40px 24px 0; } .ss-picked .ss-row { padding-top: 14px; } .ss-chip { font-size: 15px; } }

/* ---------- Class News: rotating leaderboard headlines, a pulsing newspaper flash ---------- */
.ss-news {
    display: flex; align-items: stretch; margin: 0 4px 14px; min-height: 64px; border-radius: 8px; overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(255,230,160,.05) 0 1px, rgba(0,0,0,0) 1px 4px),
        linear-gradient(180deg, #2b1a0c, #170d05);
    box-shadow: 0 0 0 2px #d9a520, 0 4px 14px rgba(0,0,0,.55), 0 0 12px rgba(255,200,60,.35);
}
.ss-news-tag {
    flex: 0 0 auto; display: flex; align-items: center; padding: 0 18px; background: linear-gradient(180deg, #d9301f, #9c1a12); color: #fff;
    font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0,0,0,.4); box-shadow: inset -3px 0 0 rgba(0,0,0,.3);
}
.ss-news-link {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 10px 18px; text-decoration: none; color: #fff3d6;
    font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 800; line-height: 1.25;
}
.ss-news-link:hover .ss-news-text { text-decoration: underline; text-decoration-color: rgba(255,215,94,.7); }
.ss-news-link:focus-visible, .ss-news-pause:focus-visible { outline: 3px solid #ffd75e; outline-offset: -3px; }
.ss-news-hl {
    position: relative; display: inline-block; padding: 0 3px; color: #ffd75e; white-space: nowrap;
    text-shadow: 0 0 8px rgba(255,200,60,.65), 0 1px 0 rgba(0,0,0,.5);
}
.ss-news-hl::before, .ss-news-hl::after {
    position: absolute; color: #fff7c2; font-size: .55em; line-height: 1; pointer-events: none; content: "✦"; text-shadow: 0 0 6px #ffd75e;
}
.ss-news-hl::before { top: -.35em; left: -.2em; }
.ss-news-hl::after { top: -.15em; right: -.3em; }
.ss-news-pause {
    flex: 0 0 auto; width: 56px; border: 0; border-left: 1px solid rgba(255,215,94,.3); background: transparent; cursor: pointer;
    font-size: 18px; color: #ffd75e;
}
.ss-news-pause:hover { background: rgba(255,215,94,.15); }
@media (max-width: 700px) {
    .ss-news-link { font-size: 20px; }
}
@media (max-width: 520px) {
    .ss-news { min-height: 56px; }
    .ss-news-tag { padding: 0 9px; font-size: 11px; letter-spacing: .4px; white-space: normal; text-align: center; line-height: 1.1; max-width: 66px; }
    .ss-news-link { font-size: 16px; padding: 6px 10px; min-height: 56px; line-height: 1.2; }
    .ss-news-pause { width: 44px; min-height: 56px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ss-news { animation: ss-news-pulse 2.4s ease-in-out infinite; }
    .ss-news-tag { animation: ss-news-tag 1.2s ease-in-out infinite; }
    .ss-news-text.flash { animation: ss-news-in .6s cubic-bezier(.2, .9, .3, 1); }
    .ss-news-hl::before { animation: ss-news-twinkle 1.7s ease-in-out infinite; }
    .ss-news-hl::after { animation: ss-news-twinkle 1.7s ease-in-out .8s infinite; }
    @keyframes ss-news-pulse { 0%, 100% { box-shadow: 0 0 0 2px #d9a520, 0 4px 14px rgba(0,0,0,.55), 0 0 10px rgba(255,200,60,.3); } 50% { box-shadow: 0 0 0 3px #ffd75e, 0 4px 14px rgba(0,0,0,.55), 0 0 26px rgba(255,210,80,.8); } }
    @keyframes ss-news-tag { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
    @keyframes ss-news-in { 0% { opacity: 0; transform: translateY(16px) scale(.97); } 55% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
    @keyframes ss-news-twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
}

/* ---------- desktop sizing: on wide screens the whole bookcase scales down (100% looks like a 75% browser zoom) ---------- */
/* mouse-and-keyboard desktops only: tablets (touch) keep full-size tap targets */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ss { zoom: .75; max-width: 1600px; } }

/* ---------- hover pop-out: a bigger floating cover for mouse users ---------- */
.ss-pop {
    position: fixed; z-index: 9999; pointer-events: none; overflow: hidden; border-radius: 4px 9px 9px 4px; background: #2b1a0c;
    box-shadow: 0 20px 44px rgba(0,0,0,.65), 0 0 0 3px #f6e3a6, 0 0 30px rgba(255,214,102,.7);
}
.ss-pop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-pop .ss-tile { display: flex; height: 100%; width: 100%; min-width: 0; border-radius: 0; box-shadow: none; padding: 16px; }
.ss-pop-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px 9px; text-align: center; color: #fff; font: 800 15px/1.2 system-ui, sans-serif; }
.ss-pop-tag.t-ok { background: rgba(46,125,50,.94); } .ss-pop-tag.t-soon { background: rgba(230,130,0,.96); }
.ss-pop-tag.t-late { background: rgba(176,58,46,.96); } .ss-pop-tag.t-reading { background: rgba(70,90,200,.94); } .ss-pop-tag.t-want { background: rgba(24,140,95,.95); }
@media (prefers-reduced-motion: no-preference) {
    .ss-pop { animation: ss-pop-in .17s cubic-bezier(.2, .9, .3, 1); }
    @keyframes ss-pop-in { from { opacity: .4; transform: scale(.6); } to { opacity: 1; transform: none; } }
}

/* ---------- My Goals strip (under the greeting) ---------- */
.ss-goals {
    display: flex; align-items: stretch; margin: 0 0 16px; min-height: 52px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, #14504a, #0c332f); box-shadow: 0 0 0 2px #e0b13a, 0 4px 12px rgba(0,0,0,.2);
}
.ss-goals-tag {
    flex: 0 0 auto; display: flex; align-items: center; padding: 0 16px; background: linear-gradient(180deg, #f2b632, #c98a10); color: #3a2400;
    font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
.ss-goals-text { flex: 1 1 auto; min-width: 0; display: block; align-self: center; padding: 8px 16px; color: #fff3d6; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-weight: 700; line-height: 1.25; }
.ss-goals-pause { flex: 0 0 auto; width: 48px; border: 0; border-left: 1px solid rgba(255,215,94,.3); background: transparent; color: #ffd75e; font-size: 18px; cursor: pointer; }
.ss-goals-pause:hover { background: rgba(255,215,94,.15); }
.ss-goals-pause:focus-visible { outline: 3px solid #ffd75e; outline-offset: -3px; }
@media (max-width: 520px) {
    .ss-goals-tag { padding: 0 9px; font-size: 11px; max-width: 62px; white-space: normal; text-align: center; line-height: 1.1; }
    .ss-goals-text { font-size: 16px; padding: 6px 10px; }
    .ss-goals-pause { width: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ss-goals-text.flash { animation: ss-news-in .6s cubic-bezier(.2, .9, .3, 1); }
}

/* ---------- moving books into My Books ---------- */
.ss-book { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.ss-book img { -webkit-user-drag: none; pointer-events: none; }
.ss-book.ss-lifted { outline: 4px solid #ffd75e; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 24px 6px rgba(255,215,94,.8); opacity: .7; }
.ss-how {
    display: block; margin: -4px 14px 10px; padding: 6px 12px; min-height: 44px; border: 0; background: transparent; cursor: pointer;
    color: #ffe8a8; font: 700 15px/1.2 Georgia, 'Times New Roman', serif; text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.ss-how:hover { color: #fff; }
.ss-how:focus-visible { outline: 3px solid #ffd75e; outline-offset: 2px; }
.ss-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #3b2412, #1c0f06); border-top: 4px solid #e0b13a; box-shadow: 0 -8px 24px rgba(0,0,0,.5);
    font-family: Georgia, 'Times New Roman', serif; text-align: center;
}
.ss-dock-title { color: #fff3d6; font-size: 18px; font-weight: 800; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-dock-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ss-dock-btn {
    flex: 1 1 150px; max-width: 280px; min-height: 60px; padding: 8px 12px; border: 3px solid #e0b13a; border-radius: 14px; cursor: pointer;
    font: 800 19px/1.15 Georgia, 'Times New Roman', serif; color: #3a2400; background: linear-gradient(180deg, #ffe08a, #e0a82a);
}
.ss-dock-btn.want { background: linear-gradient(180deg, #d9c2ff, #a77be0); border-color: #d9c2ff; color: #2c0f52; }
.ss-dock-btn.cancel { background: #f0e6d2; border-color: #bba37a; color: #4a3a22; }
.ss-dock-btn.over, .ss-dock-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 4px #fff3b0, 0 6px 16px rgba(0,0,0,.5); }
.ss-dock-btn:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.ss-dock-btn:disabled { opacity: .5; cursor: default; }
.ss-ghostcard { position: fixed; z-index: 100002; pointer-events: none; border-radius: 6px; overflow: hidden; opacity: .92; transform: rotate(5deg); box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 0 18px rgba(255,215,94,.8); background: #222; }
.ss-ghostcard img, .ss-ghostcard .ss-tile { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; min-width: 0; }
.ss-flash {
    position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 100003; width: min(92vw, 560px); padding: 14px 18px; cursor: pointer;
    background: #fff8e1; color: #3a2a10; border: 3px solid #e0b13a; border-radius: 16px; box-shadow: 0 8px 26px rgba(0,0,0,.45);
    font: 700 18px/1.35 Georgia, 'Times New Roman', serif;
}
@media (max-width: 520px) { .ss-dock-btn { font-size: 17px; flex-basis: 100%; max-width: none; min-height: 56px; } .ss-flash { font-size: 16px; } }

.ss-dock-btn.remove { background: linear-gradient(180deg, #cfe8d5, #8fc79c); border-color: #cfe8d5; color: #123b21; }

/* hint box: short lines with wand bullets, big enough for young readers */
.ss .ss-hint { padding: 12px 16px; font-size: 20px; line-height: 1.4; align-items: center; }
.ss .ss-hint-ico { font-size: 30px; }
.ss .ss-hint-list { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; }
.ss .ss-hint-list li { position: relative; padding: 3px 0 3px 36px; font-weight: 700; }
.ss .ss-hint-list li::before { content: "\1FA84"; position: absolute; left: 0; top: 1px; font-size: 24px; line-height: 1.3; }
.ss .ss-hint-x { font-size: 18px; padding: 0 18px; min-height: 48px; }
@media (max-width: 520px) { .ss .ss-hint { font-size: 17px; flex-wrap: wrap; } .ss .ss-hint-list li { padding-left: 32px; } .ss .ss-hint-ico { display: none; } .ss .ss-hint-x { flex: 1 1 100%; } }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {   /* the cabinet is shown at 75% here, so lift the sizes to match */
    .ss .ss-hint { font-size: 26px; padding: 14px 20px; }
    .ss .ss-hint-ico { font-size: 38px; }
    .ss .ss-hint-list li { padding-left: 44px; }
    .ss .ss-hint-list li::before { font-size: 30px; }
    .ss .ss-hint-x { font-size: 22px; min-height: 56px; }
    .ss .ss-how { font-size: 21px; }
}

/* ================= magic: lantern light, gem glow, gilding, floating dust ================= */
/* lantern light from the top corners (static; flickers only when motion is allowed) */
.ss-case::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 320px; z-index: 2; pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 28% 100% at 6% 0%, rgba(255,190,90,.30), rgba(255,190,90,0) 70%),
        radial-gradient(ellipse 28% 100% at 94% 0%, rgba(255,190,90,.30), rgba(255,190,90,0) 70%);
}
/* Hidden Gems: the shelf glows violet and teal, as if the gems light it from within */
.ss-gems .ss-back { position: relative; }
.ss-gems .ss-back::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 45% 90% at 20% 90%, rgba(170,90,255,.38), rgba(170,90,255,0) 70%),
        radial-gradient(ellipse 45% 90% at 80% 90%, rgba(60,220,200,.32), rgba(60,220,200,0) 70%);
}
.ss-gems .ss-plaque { box-shadow: 0 0 14px 2px rgba(190,120,255,.65), 0 2px 5px rgba(0,0,0,.5); }
/* floating golden dust */
.ss-dust { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ss-mote {
    position: absolute; left: var(--dx); bottom: -8px; width: var(--dz); height: var(--dz); border-radius: 50%; opacity: 0;
    background: #fff3b0; box-shadow: 0 0 6px 2px rgba(255,214,110,.85), 0 0 14px 4px rgba(255,190,70,.4);
}
@keyframes ss-mote-rise {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: .85; }
    50% { transform: translate(14px, -45vh); opacity: .6; }
    100% { transform: translate(-10px, -90vh); opacity: 0; }
}
@keyframes ss-lantern {
    0%, 100% { opacity: 1; } 22% { opacity: .78; } 38% { opacity: .95; } 61% { opacity: .72; } 80% { opacity: .92; }
}
@keyframes ss-gem-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ss-gild { 0%, 78%, 100% { filter: none; } 88% { filter: brightness(1.4) saturate(1.25); } }
@keyframes ss-crown-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,214,120,0)); } 50% { filter: drop-shadow(0 0 10px rgba(255,214,120,.85)); } }
@media (prefers-reduced-motion: no-preference) {
    .ss-case::before { animation: ss-lantern 7s ease-in-out infinite; }
    .ss-gems .ss-back::before { animation: ss-gem-breathe 5.5s ease-in-out infinite; }
    .ss-mote { animation: ss-mote-rise var(--dt) linear infinite; animation-delay: var(--dd); }
    .ss-plaque { animation: ss-gild 7s ease-in-out infinite; }
    .ss-shelf:nth-child(2n) .ss-plaque { animation-delay: -2.3s; }
    .ss-shelf:nth-child(3n) .ss-plaque { animation-delay: -4.6s; }
    .ss-arch { animation: ss-crown-glow 6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .ss-dust { display: none; } }
@media (max-width: 520px) { .ss-mote:nth-child(n+8) { display: none; } }

/* ================= bigger nameplates and news tag, jewel-coloured backboards, embroidered dividers ================= */
.ss .ss-plaque { font-size: 21px; padding: 9px 32px 10px; top: 2px; }
.ss .ss-mine .ss-plaque { font-size: 24px; padding: 10px 36px 11px; }
.ss .ss-rail, .ss .ss-mine .ss-rail { height: 24px; }
.ss .ss-row { padding-top: 50px; }
.ss .ss-mine .ss-row { padding-top: 56px; }
.ss .ss-picked .ss-row { padding-top: 14px; }
.ss .ss-source { padding-top: 54px; }
@media (min-width: 700px) { .ss .ss-plaque { font-size: 23px; } .ss .ss-mine .ss-plaque { font-size: 27px; } .ss .ss-source { padding-top: 58px; } }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {   /* shown at 75%, so lift the sizes to match */
    .ss .ss-plaque, .ss .ss-bays .ss-plaque { font-size: 30px; padding: 10px 40px 11px; }
    .ss .ss-mine .ss-plaque { font-size: 34px; padding: 11px 44px 12px; }
    .ss .ss-rail, .ss .ss-mine .ss-rail { height: 28px; }
    .ss .ss-row { padding-top: 62px; } .ss .ss-mine .ss-row { padding-top: 68px; } .ss .ss-picked .ss-row { padding-top: 14px; } .ss .ss-source { padding-top: 70px; }
}
/* Class News and My Goals tags */
.ss-news { min-height: 76px; }
.ss-news-tag { font-size: 25px; padding: 0 26px; letter-spacing: 1px; }
.ss-goals-tag { font-size: 19px; padding: 0 18px; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ss-news { min-height: 88px; } .ss-news-tag { font-size: 32px; padding: 0 32px; } .ss-news-link { font-size: 28px; } }
@media (max-width: 520px) {
    .ss-news { min-height: 64px; }
    .ss-news-tag { font-size: 14px; max-width: 84px; padding: 0 8px; }
    .ss-goals-tag { font-size: 12px; }
}
/* jewel-coloured backboards: each shelf has its own colour, lit from above, with a fine gold lattice */
.ss-gems     { --s1: #7a3fc4; --s2: #4b2380; --s3: #2a1257; }
.ss-picked   { --s1: #c43a66; --s2: #8a1f3d; --s3: #55102a; }
.ss-fiction  { --s1: #2fa468; --s2: #1f7a4d; --s3: #0e4a2c; }
.ss-nonfiction { --s1: #2f8fd0; --s2: #1d6fa8; --s3: #0e3d68; }
.ss-awards   { --s1: #d98a1f; --s2: #a86512; --s3: #6e3d07; }
.ss-fun      { --s1: #f07a3c; --s2: #d4502c; --s3: #8f2414; }
.ss-gems .ss-back, .ss-picked .ss-back, .ss-fiction .ss-back, .ss-nonfiction .ss-back, .ss-awards .ss-back, .ss-fun .ss-back {
    background:
        radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255,236,180,.50), rgba(255,236,180,0) 72%),
        repeating-linear-gradient(45deg, rgba(255,226,140,.10) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(255,226,140,.10) 0 1px, transparent 1px 22px),
        linear-gradient(180deg, var(--s2), var(--s3));
}
/* embroidered divider band above each shelf: coloured cloth, gold stitching, a row of gold diamonds */
.ss-gems .ss-rail, .ss-picked .ss-rail, .ss-fiction .ss-rail, .ss-nonfiction .ss-rail, .ss-awards .ss-rail, .ss-fun .ss-rail {
    background:
        repeating-linear-gradient(90deg, #f6e3a6 0 7px, transparent 7px 13px) 0 5px / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, #f6e3a6 0 7px, transparent 7px 13px) 0 calc(100% - 5px) / 100% 2px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='14'><path d='M15 1 L21 7 L15 13 L9 7 Z' fill='none' stroke='%23f6e3a6' stroke-width='1.4'/><circle cx='15' cy='7' r='1.6' fill='%23f6e3a6'/><circle cx='2' cy='7' r='1.3' fill='%23f6e3a6'/><circle cx='28' cy='7' r='1.3' fill='%23f6e3a6'/></svg>") 0 50% / 30px 14px repeat-x,
        linear-gradient(180deg, var(--s1), var(--s2) 60%, var(--s3));
    border-top: 2px solid #f6e3a6; box-shadow: inset 0 -5px 8px rgba(0,0,0,.4), 0 2px 0 rgba(0,0,0,.4);
}
/* the shelf board becomes a stitched ribbon in the same colour */
.ss-gems .ss-board, .ss-picked .ss-board, .ss-fiction .ss-board, .ss-nonfiction .ss-board, .ss-awards .ss-board, .ss-fun .ss-board {
    height: 26px;
    background:
        repeating-linear-gradient(90deg, #f6e3a6 0 8px, transparent 8px 14px) 0 50% / 100% 2px no-repeat,
        linear-gradient(180deg, #f6e3a6 0, var(--s1) 4px, var(--s2) 55%, var(--s3));
    box-shadow: 0 7px 12px rgba(0,0,0,.55), inset 0 -2px 0 rgba(0,0,0,.4);
}

/* ================= 3D carpentry: stepped frame, turned pillars, bevelled crown, legs and plinth ================= */
/* the case sits in a stepped moulding frame (gold bead, dark groove, raised wood step) with a deep floor shadow */
.ss-case {
    box-shadow:
        0 26px 40px -8px rgba(15,6,0,.65),
        0 0 0 2px #1d0e05, 0 0 0 5px #c9a24a, 0 0 0 6px #5a370f,
        0 0 0 10px #6e4224, 0 0 0 11px #2a170c, 0 0 0 13px #8d5733, 0 0 0 14px #1d0e05,
        inset 0 0 0 1px rgba(255,225,160,.25);
}
/* turned pillars: round shading with a highlight, gold collars, fluting */
.ss-pil {
    background:
        linear-gradient(180deg, #fff0b8, #a9822c) top / 100% 11px no-repeat,
        linear-gradient(180deg, #a9822c, #fff0b8) bottom / 100% 11px no-repeat,
        linear-gradient(180deg, #f6e3a6, #8a6a1e 60%, #4a3008) 0 9% / 100% 6px no-repeat,
        linear-gradient(180deg, #f6e3a6, #8a6a1e 60%, #4a3008) 0 91% / 100% 6px no-repeat,
        linear-gradient(90deg, rgba(0,0,0,.62) 0, rgba(255,222,170,.34) 26%, rgba(255,238,200,.14) 40%, rgba(0,0,0,.04) 62%, rgba(0,0,0,.66) 100%),
        repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 1.5px, rgba(255,205,140,.10) 1.5px 5px, rgba(0,0,0,.2) 5px 6.5px),
        var(--grain-v),
        linear-gradient(90deg, #35200f, #7a4a28 50%, #35200f);
    box-shadow: 0 0 14px rgba(0,0,0,.75), 5px 0 9px -2px rgba(0,0,0,.55);
}
.ss-pil.r { box-shadow: 0 0 14px rgba(0,0,0,.75), -5px 0 9px -2px rgba(0,0,0,.55); }
/* cornice: a lit top edge and a deep shadow where it overhangs the shelves */
.ss-top { box-shadow: inset 0 3px 0 rgba(255,232,170,.35), inset 0 -2px 0 var(--brass), 0 12px 16px -2px rgba(0,0,0,.65); }
.ss-top::before { box-shadow: 0 2px 0 #1a0d05, 0 4px 0 rgba(0,0,0,.35); }
/* crown: bevelled ears and arch that cast a shadow behind them */
.ss-crown, .ss-feet { filter: drop-shadow(0 4px 3px rgba(0,0,0,.55)); }
.ss-ear, .ss-foot {
    background:
        linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(255,222,170,.38) 24%, rgba(255,238,200,.12) 42%, rgba(0,0,0,.05) 62%, rgba(0,0,0,.6) 100%),
        var(--grain-v), linear-gradient(90deg, #3d2212, #7a4a28 50%, #3d2212);
}
.ss-foot { background-blend-mode: normal; }
.ss-foot {  /* bevel the flat face that meets the floor, so the leg reads as a solid block */
    background:
        linear-gradient(180deg, rgba(255,235,185,.45) 0, rgba(255,235,185,0) 7px),
        linear-gradient(180deg, rgba(0,0,0,0) calc(100% - 9px), rgba(0,0,0,.55)),
        linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(255,222,170,.38) 24%, rgba(255,238,200,.12) 42%, rgba(0,0,0,.05) 62%, rgba(0,0,0,.6) 100%),
        var(--grain-v), linear-gradient(90deg, #3d2212, #7a4a28 50%, #3d2212);
}
.ss-ear {   /* flipped shape: its lit edge is the bottom of the paint box */
    background:
        linear-gradient(180deg, rgba(0,0,0,0) calc(100% - 7px), rgba(255,235,185,.45)),
        linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 9px),
        linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(255,222,170,.38) 24%, rgba(255,238,200,.12) 42%, rgba(0,0,0,.05) 62%, rgba(0,0,0,.6) 100%),
        var(--grain-v), linear-gradient(90deg, #3d2212, #7a4a28 50%, #3d2212);
}
.ss-arch {
    box-shadow: inset 0 3px 0 rgba(255,225,160,.5), inset 0 -8px 10px rgba(0,0,0,.45), inset 4px 0 0 rgba(255,225,160,.2), inset -4px 0 0 rgba(0,0,0,.3), 0 -4px 10px rgba(0,0,0,.4);
}
/* the floor shadow under the legs gets deeper */
.ss-feet::after { height: 22px; bottom: -14px; background: radial-gradient(ellipse at 50% 50%, rgba(8,3,0,.75), transparent 72%); }
/* plinth: stepped skirting with a lit top edge and a carved groove */
.ss-plinth {
    height: 32px;
    background:
        linear-gradient(180deg, #fff0b8 0, var(--brass) 3px, var(--brass-lo) 6px, #5a3a18 6px, #3a2011 14px, #1a0d05 15px, #4a2a14 17px, #2a170c 24px, #120904 100%),
        var(--grain-h);
    box-shadow: inset 0 3px 0 rgba(255,240,190,.5), 0 6px 10px rgba(0,0,0,.6);
}

/* drifting rows must not fight the snap points */
.ss.ss-drift-on .ss-row { scroll-snap-type: none; }
.ss-drift-btn { margin-top: -10px; }

/* ================= colour match: Class News = Hidden Gems amethyst, Reading Preferences = Picked for you burgundy ================= */
.ss-news {
    background:
        repeating-linear-gradient(45deg, rgba(255,226,140,.10) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(255,226,140,.10) 0 1px, transparent 1px 22px),
        linear-gradient(180deg, #8a1f3d, #55102a);          /* the red-maroon of the Picked for you shelf */
}
body.ss-on .preferences-section {
    background:
        linear-gradient(135deg, #8a1f3d, #55102a);
    border-color: #e0b13a;
    box-shadow: 0 8px 25px rgba(85,16,42,.45), inset 0 0 0 2px rgba(246,227,166,.35);
}
body.ss-on .preferences-section h2 { color: #fff3d6; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
body.ss-on .preferences-section .pref-label { color: #8a1f3d; }
body.ss-on .preferences-section .pref-input { border-color: #e3a6b8; }
body.ss-on .preferences-section .pref-input:focus { border-color: #c43a66; box-shadow: 0 0 10px rgba(196,58,102,.4); }
body.ss-on .preferences-section .save-btn { background: linear-gradient(135deg, #c43a66, #8a1f3d); }

/* Class News label: Hidden Gems purple instead of red */
.ss-news-tag { background: linear-gradient(180deg, #d24a74, #8a1f3d); color: #fff3d6; box-shadow: inset -3px 0 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35); }
@media (max-width: 520px) { .ss-news-tag { box-shadow: inset 0 -3px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35); } }

/* music button */
.ss-music {
    position: fixed; right: 16px; bottom: 16px; z-index: 99990; width: 56px; height: 56px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 3px solid #8a6a1e; background: radial-gradient(circle at 35% 30%, #fff2c2, #d9b45a 60%, #9a7424); font-size: 26px; line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.6);
}
.ss-music:hover { filter: brightness(1.08); }
.ss-music:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.ss-music:not(.on) { opacity: .92; }
@media (prefers-reduced-motion: no-preference) {
    .ss-music.on { animation: ss-music-bob 2.4s ease-in-out infinite; }
    @keyframes ss-music-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ss-music { width: 60px; height: 60px; font-size: 28px; } }

/* wizard voice button sits above the music button */
.ss-voice {
    position: fixed; right: 16px; bottom: 82px; z-index: 99990; width: 56px; height: 56px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 3px solid #4b2380; background: radial-gradient(circle at 35% 30%, #e6d2ff, #9a62e0 60%, #4b2380); font-size: 27px; line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.55);
}
.ss-voice:hover { filter: brightness(1.1); }
.ss-voice:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.ss-voice.off { opacity: .6; filter: grayscale(.7); }
.ss-voice.off::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 4px; background: #c0392b; border-radius: 2px; transform: rotate(-40deg); box-shadow: 0 0 0 1px #fff; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ss-voice { width: 60px; height: 60px; font-size: 29px; bottom: 88px; } }

/* voice chooser (opens from the wizard button) */
.ss-voice-panel { position: fixed; right: 16px; bottom: 146px; z-index: 99991; width: 230px; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #4b2a7b, #2d1750); border: 3px solid #ffd54a; box-shadow: 0 10px 28px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 10px; font-family: inherit; }
.ss-voice-title { color: #ffe9a0; font-weight: 800; font-size: 17px; text-align: center; }
.ss-voice-opt { min-height: 48px; border-radius: 14px; border: 2px solid #b79be0; background: #6a3fa5; color: #fff; font-size: 18px; font-weight: 800; cursor: pointer; font-family: inherit; }
.ss-voice-opt:hover { filter: brightness(1.12); }
.ss-voice-opt:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.ss-voice-opt.on { background: #ffd54a; color: #3a1d63; border-color: #fff; }
.ss-voice-opt.off { background: #3b2a55; font-size: 16px; }
.ss-voice-opt.off.on { background: #c0392b; color: #fff; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ss-voice-panel { bottom: 160px; width: 250px; } }

/* music controls (opens from the music button) */
.ss-music-panel { position: fixed; right: 84px; bottom: 16px; z-index: 99991; width: 250px; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #4b2a7b, #2d1750); border: 3px solid #ffd54a; box-shadow: 0 10px 28px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 10px; font-family: inherit; }
.ss-music-info { color: #fff; font-size: 14px; line-height: 1.25; text-align: center; min-height: 1.25em; overflow-wrap: anywhere; }
.ss-music-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-music-row .ss-voice-opt { font-size: 16px; padding: 0 6px; }
.ss-music-row .ss-voice-opt:disabled { opacity: .45; cursor: default; }
.ss-music-vol { display: flex; flex-direction: column; gap: 6px; color: #ffe9a0; font-weight: 800; font-size: 16px; }
.ss-music-vol input[type=range] { width: 100%; height: 32px; accent-color: #ffd54a; cursor: pointer; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ss-music-panel { right: 92px; bottom: 20px; width: 270px; } }

/* My Goals now sits inside the Fortnight Goals card */
.fortnight-box .ss-goals { margin: 38px 0 0; max-width: 760px; min-height: 46px; border-radius: 12px; box-shadow: 0 0 0 2px #e0b13a, 0 3px 8px rgba(0,0,0,.3); }
.fortnight-box .ss-goals-text { font-size: 18px; padding: 6px 14px; }
.fortnight-box .ss-goals-tag { font-size: 14px; padding: 0 12px; }
/* My Reading Preferences: panel only when opened from the button in the greeting card */
body.ss-on .preferences-section:not(.ss-open) { display: none !important; }
body.ss-on .ss-prefs-btn { margin-top: 6px; border-radius: 12px; padding: 3px 8px; cursor: pointer; background: rgba(224,177,58,.14); }
@media (max-width: 520px) { .fortnight-box .ss-goals-text { font-size: 15px; } }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .fortnight-box .ss-goals-text { font-size: 24px; }
    .fortnight-box .ss-goals-tag { font-size: 18px; }
    .fortnight-box .ss-goals { min-height: 56px; width: 90%; max-width: none; }     /* reaches about half way between the last star and the worm */
}
.ss-voice-note { color: #fff3d6; font-size: 13px; line-height: 1.3; text-align: center; background: rgba(0,0,0,.25); border-radius: 10px; padding: 6px 8px; }

/* ---------- calmer header: fewer things shouting at once ---------- */
.ss-pill.all, .ss-pill.top { background: rgba(0,0,0,.28); color: var(--brass-hi); border: 2px solid var(--brass-lo); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.ss-pill:hover { background: rgba(255,215,94,.18); color: #fff; }
.ss-news { margin-top: 16px; margin-bottom: 16px; }
.ss-aids { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 14px 12px; }
.ss-aids .ss-how { display: inline-block; margin: 0; padding: 4px 10px; min-height: 44px; font-size: 14px; font-weight: 600; opacity: .85; text-decoration: none; border-bottom: 1px dashed rgba(255,232,168,.45); }
.ss-aids .ss-how:hover { opacity: 1; }
.ss-aids .ss-drift-btn { margin-top: 0; }
.ss-how[hidden] { display: none !important; }
.ss-top { gap: 14px 18px; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .ss { width: calc(100% * var(--ss-zfix, 1)); }
    .ss-aids .ss-how { font-size: 18px; }
    /* the desktop zoom shrinks things by a quarter, so the small lettering is made bigger to stay easy to read */
    .ss-pill, .ss-tab { font-size: 22px; min-height: 52px; padding: 0 22px; }
    .ss-title { font-size: 42px; }
    .ss-search { width: 52px; height: 52px; font-size: 22px; }
    .ss-tag, .ss-avail { font-size: 14px; }
    .ss-mine .ss-tag { font-size: 15px; }
    .ss-chip { font-size: 18px; }
    .ss-news-tag { font-size: 24px; }
    .fortnight-box .ss-goals-tag { font-size: 20px; }
}
.ss-aids .ss-drift-btn { margin-left: auto; }

/* My Goals strip width: set for every screen size (not only mouse desktops), and last in the file so nothing overrides it */
.fortnight-box .ss-goals { width: 92%; max-width: none; box-sizing: border-box; }
@media (max-width: 700px) { .fortnight-box .ss-goals { width: 100%; } }

@media (max-width: 899px), (pointer: coarse) { .ss-title { font-size: 28px; } }


/* ---------- the title lives in the arch of the crown ---------- */
.ss-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; flex: 0 0 auto !important; }
.ss-crown { margin-top: 26px; height: 64px; }
.ss-arch {
    width: 300px; height: 64px; border-radius: 150px 150px 0 0 / 64px 64px 0 0;
    background: var(--grain-h), radial-gradient(ellipse at 50% 100%, rgba(255,214,130,.22), transparent 70%), linear-gradient(180deg, #6e4224, #2f1a0d);
    display: flex; align-items: flex-end; justify-content: center;
}
.ss-arch-t {
    padding: 0 10px 9px; white-space: nowrap; font: 700 22px/1.1 var(--serif); letter-spacing: .4px;
    color: var(--brass-hi); text-shadow: 0 2px 0 #1a0d05, 0 0 14px rgba(255,200,110,.45);
}
@media (min-width: 700px) {
    .ss-crown { height: 84px; }
    .ss-arch { width: 400px; height: 84px; border-radius: 200px 200px 0 0 / 84px 84px 0 0; }
    .ss-arch-t { font-size: 30px; padding-bottom: 12px; }
}
@media (min-width: 1300px) {
    .ss-crown { height: 104px; }
    .ss-arch { width: 540px; height: 104px; border-radius: 270px 270px 0 0 / 104px 104px 0 0;
        background: var(--grain-h), radial-gradient(ellipse at 50% 100%, rgba(255,214,130,.22), transparent 70%), linear-gradient(180deg, #6e4224, #2f1a0d); }
    .ss-arch-t { font-size: 40px; padding-bottom: 16px; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .ss-crown { margin-top: 34px; }
    .ss-arch-t { font-size: 44px; }
}


/* ---------- All Books / Top Rated now sit under all the shelves ---------- */
.ss-links.ss-links-bottom { order: 0; flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 22px 12px 8px; }
.ss-links-bottom .ss-pill { min-height: 52px; padding: 0 26px; font-size: 18px; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ss-links-bottom .ss-pill { font-size: 26px; min-height: 60px; padding: 0 34px; } }

/* the worm has left the Fortnight card, so the My Goals strip can use the full width */
.fortnight-box .ss-goals { width: 100%; }


/* help link + stop-moving button under the shelves */
.ss-aids.ss-aids-bottom { justify-content: center; margin: 4px 14px 6px; gap: 10px 28px; }
.ss-aids.ss-aids-bottom .ss-drift-btn { margin-left: 0; }

/* a little more green under My Goals */
.fortnight-box .ss-goals { margin-bottom: 30px; }


/* ---------- lite look: only switched on (by the page) for computers that cannot keep up; everything above stays as designed for the rest ---------- */
@keyframes ss-glow2 { 0%, 100% { opacity: .17; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    html.ss-lite .ss-mine .ss-back::after { box-shadow: inset 0 0 64px 14px rgba(255,238,170,.6); animation: ss-glow2 4.8s ease-in-out infinite; }
    html.ss-lite .ss-news { animation: none; box-shadow: 0 0 0 3px #f2c23d, 0 4px 14px rgba(0,0,0,.55), 0 0 18px rgba(255,205,70,.55); }
    html.ss-lite .ss-news-tag, html.ss-lite .ss-plaque { animation: none; }
    html.ss-lite .ss-arch { animation: none; box-shadow: inset 0 3px 0 rgba(255,225,160,.5), inset 0 -8px 10px rgba(0,0,0,.45), 0 -4px 12px rgba(255,214,120,.35); }
    html.ss-lite .ss-mote:nth-child(n+7) { display: none; }
}