/* «Моя полка» — книги на полке, достижения, статистика (php/shelf.php, shelf.php, u.php, главная). */
:root {
    --sh-gold: #ffd99a; --sh-amber: #ffbe6a; --sh-ink: #f4ede2; --sh-muted: #b9b2a6; --sh-faint: #8d877e;
    --sh-card: rgba(255,255,255,.04); --sh-line: rgba(255,217,154,.18);
    --sh-bronze: #d39a6a; --sh-silver: #cfd8e3; --sh-goldt: #ffd56a; --sh-diamond: #8fe3ff;
}

/* Лента книг прокручивается вбок; без min-width:0 она распирала сетку страницы шире экрана. */
.shelf-page, .st-page { grid-template-columns: minmax(0, 1fr); }
.shelf-page > *, .shelf-row, .shelf-wood, .shelf-home, [data-shelf-pane] { min-width: 0; max-width: 100%; }

/* ── Шапка полки ── */
.shelf-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; margin: 0 0 16px;
    border-radius: 22px; border: 1px solid var(--sh-line); overflow: hidden;
    background: radial-gradient(120% 140% at 0% 0%, rgba(255,190,106,.16), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(143,227,255,.08), transparent 60%), rgba(20,16,12,.7); }
.shelf-hero__ava { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; font: 800 38px/1 Georgia, serif; color: #2a1a08;
    background: linear-gradient(135deg, #ffe2a8, #ffb05d); box-shadow: 0 10px 30px rgba(255,176,93,.25); }
.shelf-hero h1 { margin: 2px 0 6px; font-size: clamp(24px, 4vw, 34px); }
.shelf-hero__rank { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 99px; background: rgba(255,217,154,.1);
    border: 1px solid rgba(255,217,154,.35); color: var(--sh-gold); font-weight: 700; font-size: 13.5px; }
.shelf-hero__meta { color: var(--sh-muted); font-size: 13.5px; margin: 8px 0 0; }
.shelf-hero__meta .shelf-bar { max-width: 320px; margin-top: 6px; }
@media (max-width: 560px) { .shelf-hero { grid-template-columns: 1fr; text-align: left; padding: 18px; } .shelf-hero__ava { width: 64px; height: 64px; font-size: 30px; border-radius: 18px; } }

/* ── Плитки цифр ── */
.shelf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 0 0 18px; }
.shelf-tile { padding: 12px 14px; border-radius: 16px; background: var(--sh-card); border: 1px solid rgba(255,255,255,.07); }
.shelf-tile b { display: block; font-size: 24px; line-height: 1.15; color: var(--sh-ink); }
.shelf-tile small { color: var(--sh-muted); font-size: 12.5px; }
.shelf-tile.is-gold b { color: var(--sh-gold); }

/* ── Вкладки ── */
.shelf-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding-bottom: 4px; scrollbar-width: none; }
.shelf-tabs::-webkit-scrollbar { display: none; }
.shelf-tab { flex: none; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
    color: var(--sh-muted); font: inherit; font-weight: 700; cursor: pointer; }
.shelf-tab span { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 12px; }
.shelf-tab.is-on { background: linear-gradient(135deg, #ffd99a, #ffb05d); color: #2a1a08; border-color: transparent; }
.shelf-tab.is-on span { background: rgba(0,0,0,.12); }

/* ── Полка: ряд книг на доске ── */
.shelf-row { margin: 0 0 22px; }
.shelf-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.shelf-row__head h2, .shelf-row__head h3 { margin: 0; font-size: 19px; }
.shelf-row__head small { color: var(--sh-faint); }
.shelf-plank { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 172px); gap: 16px; overflow-x: auto;
    padding: 4px 4px 22px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.shelf-plank::after { content: ''; position: sticky; }
.shelf-plank--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; }
.shelf-wood { position: relative; }
.shelf-wood::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 14px; border-radius: 4px; pointer-events: none;
    background: linear-gradient(180deg, #6b4423, #3b2412 60%, #26170b); box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,214,160,.25); opacity: .85; }

.shelf-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.shelf-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb05d, #ffd99a); }
.shelf-bar--thin { height: 4px; }

.shelf-empty { padding: 22px; border-radius: 18px; border: 1px dashed rgba(255,217,154,.3); color: var(--sh-muted); text-align: center; }
.shelf-empty b { display: block; color: var(--sh-ink); font-size: 17px; margin-bottom: 4px; }
.shelf-empty .party-button { margin-top: 10px; }

/* ── Кнопка «На полку» в каталоге ── */
.shelf-add { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255,217,154,.35);
    background: rgba(255,217,154,.06); color: var(--sh-gold); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sp-actions .shelf-add { align-self: center; padding: 10px 16px; font-size: 14px; }
.st-card__shelf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.st-card__shelf .story-library-form { margin: 0; }
.shelf-add.is-on { background: rgba(157,240,184,.08); color: #9df0b8; border-color: rgba(157,240,184,.35); }
.shelf-add:disabled { opacity: .6; }

/* ── Персонажи и ИИ-истории ── */
.shelf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.shelf-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; text-decoration: none; color: inherit;
    border: 1px solid rgba(255,255,255,.08); background: var(--sh-card); transition: border-color .2s, transform .2s; }
.shelf-card:hover { border-color: rgba(255,217,154,.35); transform: translateY(-2px); }
.shelf-card__pic { width: 64px; height: 64px; border-radius: 14px; background: #241a12 var(--img) center / cover; display: grid; place-items: center; font-size: 26px; }
.shelf-card__body { display: grid; gap: 3px; min-width: 0; }
.shelf-card__body b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-card__body small { color: var(--sh-muted); font-size: 12.5px; }
.shelf-card__lvl { justify-self: start; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(255,143,176,.1); color: #ffd0dd; border: 1px solid rgba(255,143,176,.3); }
.shelf-card__lvl--0 { background: rgba(255,255,255,.05); color: var(--sh-muted); border-color: rgba(255,255,255,.1); }

/* ── Достижения ── */
.shelf-ach-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.shelf-ach-head .shelf-bar { flex: 1; min-width: 160px; height: 8px; }
.shelf-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0 0 22px; }
.shelf-ach { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 16px;
    background: var(--sh-card); border: 1px solid rgba(255,255,255,.08); --t: var(--sh-gold); }
.shelf-ach__icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 45%), color-mix(in srgb, var(--t) 30%, #1a140e);
    box-shadow: 0 0 0 2px var(--t), 0 0 18px color-mix(in srgb, var(--t) 35%, transparent); }
.shelf-ach__body { display: grid; gap: 3px; min-width: 0; }
.shelf-ach__body b { font-size: 14.5px; }
.shelf-ach__body small { color: var(--sh-muted); font-size: 12.5px; line-height: 1.35; }
.shelf-ach__pips { display: flex; gap: 4px; }
.shelf-ach__pips i { width: 14px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.shelf-ach__pips i.on { background: var(--t); }
.shelf-ach__next { color: var(--sh-faint) !important; font-size: 11.5px !important; }
.shelf-ach__new { position: absolute; top: 8px; right: 10px; padding: 1px 7px; border-radius: 99px; background: #ff7a59; color: #fff; font: 700 11px system-ui, sans-serif; font-style: normal; }
.shelf-ach.tier-1 { --t: var(--sh-bronze); }
.shelf-ach.tier-2 { --t: var(--sh-silver); }
.shelf-ach.tier-3 { --t: var(--sh-goldt); }
.shelf-ach.tier-4 { --t: var(--sh-diamond); border-color: rgba(143,227,255,.3); }
.shelf-ach.is-locked { --t: rgba(255,255,255,.18); }
.shelf-ach.is-locked .shelf-ach__icon { filter: grayscale(1); opacity: .45; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.shelf-ach.is-locked .shelf-ach__body b { color: var(--sh-muted); }
.shelf-ach.is-new { border-color: rgba(255,122,89,.5); }
.shelf-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.shelf-badges .shelf-ach { grid-template-columns: 40px 1fr; padding: 8px 12px 8px 8px; }
.shelf-badges .shelf-ach__icon { width: 40px; height: 40px; font-size: 20px; }

/* ── Статистика ── */
.shelf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.shelf-panel { padding: 16px; border-radius: 18px; background: var(--sh-card); border: 1px solid rgba(255,255,255,.08); }
.shelf-panel h3 { margin: 0 0 10px; font-size: 16px; }
.shelf-lines { display: grid; gap: 7px; }
.shelf-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--sh-muted); }
.shelf-line b { color: var(--sh-ink); }
.shelf-genre { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.shelf-genre span { color: var(--sh-muted); }
.shelf-genre small { color: var(--sh-faint); white-space: nowrap; }
.shelf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.shelf-gallery a { aspect-ratio: 1; border-radius: 10px; background: #241a12 var(--img) center / cover; }

/* ── Поделиться ── */
.shelf-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.shelf-share__net { padding: 7px 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: #fff; text-decoration: none;
    font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--c) 18%, transparent); }
.shelf-share__net:hover { background: color-mix(in srgb, var(--c) 32%, transparent); }
.shelf-public { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; font-size: 13.5px; color: var(--sh-muted); }

.shelf-toast { position: fixed; z-index: 9999; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 12px;
    background: rgba(20,16,12,.95); border: 1px solid rgba(255,217,154,.35); color: var(--sh-ink); font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; }
.shelf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Reader desk: clear controls, a compact home shelf and accessible gallery. */
.shelf-page [hidden], .shelf-home [hidden] { display:none !important; }

.shelf-plank { grid-auto-columns:clamp(156px,17vw,190px); gap:18px; padding:8px 4px 26px; scroll-padding:4px; }
.shelf-plank::after { content:none; }
.shelf-wood::after { bottom:4px; height:10px; opacity:.55; }

.shelf-plank--wrap { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); overflow:visible; padding-bottom:14px; }
.shelf-page .shelf-plank--wrap { gap:22px; }
.shelf-page .shelf-wood:has(.shelf-plank--wrap)::after { display:none; }
.shelf-tools { display:flex; flex-wrap:wrap; gap:12px; padding:16px; background:#ffffff04; border:1px solid var(--sh-line); border-radius:18px; margin:0 0 24px; }
.shelf-tools label { display:grid; gap:6px; flex:1 1 190px; font-size:12px; color:var(--sh-muted); }
.shelf-tools input, .shelf-tools select { width:100%; box-sizing:border-box; min-height:44px; border:1px solid #ffffff24; border-radius:12px; background:#17130f; color:var(--sh-ink); padding:10px 12px; font:inherit; font-size:16px; }
.shelf-filters { display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%; }
.shelf-filters button, .shelf-scroll button, .shelf-lightbox button { min-height:44px; padding:8px 14px; border:1px solid #ffffff26; border-radius:12px; background:#211b15; color:var(--sh-gold); font:inherit; cursor:pointer; }
.shelf-filters [aria-pressed=true] { background:#f0c780; color:#23190b; border-color:#f0c780; }
.shelf-tools [data-shelf-found] { margin:0; color:var(--sh-muted); font-size:13px; }
.shelf-scroll { display:flex; justify-content:flex-end; gap:8px; margin:0 0 6px; }
.shelf-scroll button { width:44px; padding:0; }
.shelf-scroll button:disabled, .shelf-lightbox button:disabled { opacity:.3; cursor:default; }
.shelf-book a:focus-visible, .shelf-page button:focus-visible, .shelf-home button:focus-visible { outline:2px solid var(--sh-gold); outline-offset:3px; }
.shelf-gallery { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.shelf-gallery button { display:flex; flex-direction:column; text-align:left; min-width:0; padding:0; border:1px solid #ffffff16; border-radius:12px; background:#17130f; color:var(--sh-ink); overflow:hidden; cursor:zoom-in; }
.shelf-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.shelf-gallery button span { padding:9px 10px; font-size:12px; line-height:1.4; }
.shelf-gallery-hint { color:var(--sh-muted); font-size:14px; line-height:1.5; }
.shelf-lightbox { box-sizing:border-box; width:min(1000px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:16px; border:1px solid #ac8750; border-radius:18px; background:#15120f; color:var(--sh-ink); }
.shelf-lightbox::backdrop { background:#000c; backdrop-filter:blur(6px); }
.shelf-lightbox:not([open]) { display:none; }
.shelf-lightbox__head, .shelf-lightbox__nav { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.shelf-lightbox__head { margin-bottom:12px; }
.shelf-lightbox > img { display:block; width:100%; max-height:calc(100dvh - 210px); object-fit:contain; background:#090807; border-radius:8px; }
.shelf-lightbox__nav { margin-top:12px; font-size:13px; }
.shelf-toast { max-width:calc(100vw - 36px); box-sizing:border-box; bottom:max(24px,env(safe-area-inset-bottom)); }
@media (max-width:560px) {

 .shelf-plank--wrap { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .shelf-page .shelf-plank--wrap { gap:16px 12px; }

 .shelf-row__head { flex-wrap:wrap; align-items:center; }
 .shelf-stats { grid-template-columns:minmax(0,1fr); }
 .shelf-genre { grid-template-columns:90px minmax(0,1fr) auto; }
}
@media (prefers-reduced-motion:reduce) { .shelf-book, .shelf-book__cover, .shelf-toast { transition:none; } }

/* Грани: общая геометрия с первым экраном, компактная библиотека. */
.shelf-icon { flex:none; display:inline-block; vertical-align:middle; width:20px; height:20px; }
.shelf-home h2, .shelf-row__head h2, .shelf-panel h3 { display:flex; align-items:center; gap:9px; }

.shelf-tab { display:inline-flex; align-items:center; gap:7px; min-height:44px; }
.shelf-tab span { margin-left:0; }
.shelf-tab .shelf-icon { width:18px; height:18px; }

.shelf-home, .shelf-hero { isolation:isolate; border-radius:22px 8px 22px 8px; border-color:#dfb77b44; background:radial-gradient(ellipse at 0 0,#bd803d22,transparent 55%),radial-gradient(ellipse at 100% 100%,#7e5cb21a,transparent 60%),#100f13; }
.shelf-home::before, .shelf-hero::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg,transparent 32%,#ffd99a06 32.1%,transparent 53%),linear-gradient(40deg,transparent 71%,#c2a3ff08 71.1%,transparent 90%); }

.shelf-plank { grid-auto-columns:174px; gap:14px; padding:8px 2px 16px; }
.shelf-plank--wrap { grid-auto-columns:auto; grid-template-columns:repeat(auto-fill,minmax(162px,1fr)); }
.shelf-wood::after { height:1px; bottom:0; opacity:1; background:linear-gradient(90deg,transparent,#e9bc7a88,#ad91f066,transparent); box-shadow:0 0 14px #dca65d44; }

.shelf-ach__icon { color:var(--t); background:linear-gradient(135deg,#ffd99a14,#b296e112),#16141c; border-radius:14px 4px 14px 4px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 45%,transparent),0 0 20px color-mix(in srgb,var(--t) 12%,transparent); }
.shelf-ach__icon .shelf-icon { width:28px; height:28px; }
.shelf-ach.is-locked .shelf-ach__icon { box-shadow:inset 0 0 0 1px #ffffff24; }
.shelf-ach__body { padding-right:0; }
.shelf-ach.is-new .shelf-ach__body { padding-top:15px; }
.shelf-card, .shelf-panel, .shelf-tile { background:linear-gradient(140deg,#e6bc7a06,#b59ae607); border-color:#e4bd8022; border-radius:16px 5px 16px 5px; }
.shelf-album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
.shelf-album { padding:6px; text-align:left; font:inherit; color:var(--sh-ink); cursor:pointer; border:1px solid #d5af7755; border-radius:16px 5px 16px 5px; background:linear-gradient(140deg,#b8873020,#a88bd414),#131117; transition:transform .2s,border-color .2s,box-shadow .2s; }
.shelf-album > img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px 2px 10px 2px; }
.shelf-album__body { padding:12px 8px 8px; display:grid; grid-template-columns:24px minmax(0,1fr); gap:5px 8px; }
.shelf-album__body .shelf-icon { grid-row:span 2; color:var(--sh-gold); }
.shelf-album__body b { font-size:15px; overflow-wrap:anywhere; line-height:1.3; }
.shelf-album__body small { font-size:12px; color:var(--sh-muted); }
.shelf-album-heading { margin-top:20px; }
.shelf-album-heading h2 { outline:none; }
.shelf-gallery { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.shelf-gallery button { border-radius:12px 3px 12px 3px; }
.shelf-gallery img { aspect-ratio:4/3; }
.shelf-lightbox { background:#100e15; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {

 .shelf-album:hover { transform:translateY(-4px); border-color:#ffdc9f; box-shadow:0 12px 30px #0006,0 0 20px #e6ba6b12; }
}
@media (max-width:560px) {

 .shelf-page .shelf-plank--wrap { gap:12px 8px; }

 .shelf-album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .shelf-album__body { padding:10px 4px 6px; grid-template-columns:1fr; }
 .shelf-album__body .shelf-icon { grid-row:auto; width:18px; height:18px; }
 .shelf-album__body b { font-size:13px; }
 .shelf-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
@media (prefers-reduced-motion:reduce) { .shelf-album { transition:none; } }

.shelf-new-dot { width:7px; height:7px; border-radius:50%; background:#ff9268; box-shadow:0 0 8px #ff926877; }
@media (max-width:560px) {
 .shelf-plank--wrap { grid-template-columns:repeat(2,minmax(0,1fr)); }

}

/* ══ Книга на полке (03.11.2026, по образцу владельца): крупная обложка с видео, ярлыки на обложке, прогресс в процентах ══ */
.shelf-book { position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:10px; box-sizing:border-box;
    border:1px solid #e3bd8326; border-radius:18px; background:linear-gradient(160deg,#2a211a,#16131a 60%,#121016);
    box-shadow:0 14px 30px #0005; transition:transform .25s, border-color .25s, box-shadow .25s, opacity .3s; }
.shelf-book.is-gone { opacity:0; transform:scale(.94); }
.shelf-book__cover { position:relative; display:grid; place-items:center; aspect-ratio:4/5; border-radius:12px; overflow:hidden; text-decoration:none;
    background:#1c1611 var(--img) center top / cover no-repeat; color:var(--sh-gold); }
.shelf-book__cover > i { font:800 52px/1 Georgia, serif; font-style:normal; }
.shelf-book__cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,#000a); pointer-events:none; }
/* Ролик выше обложки: прижимаем к верху, как картинку, иначе название на кадре уезжает за край. */
.shelf-book__cover video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:0; transition:opacity .4s; }
.shelf-book__cover video.is-on { opacity:1; }
.shelf-book__pills { position:absolute; z-index:1; left:10px; right:10px; bottom:10px; display:flex; flex-wrap:wrap; gap:6px; }
.shelf-pill { display:inline-flex; align-items:center; padding:5px 11px; border-radius:99px; font-family:inherit; font-size:12.5px; font-weight:700; line-height:1.15; font-style:normal;
    color:#ffe2ae; background:#16110bd9; border:1px solid #ffd99a59; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.shelf-pill--reading { color:#a6f5c2; background:#0f2a1cd9; border-color:#7fe2a466; }
.shelf-pill--replay { color:#ffd08a; background:#33220ad9; border-color:#ffc06b66; }
.shelf-pill--want { color:#cddcff; background:#141c33d9; border-color:#a9bfff66; }
.shelf-pill--full { color:#2a1a06; background:linear-gradient(135deg,#ffe6b0,#ffbe6a); border-color:transparent; }
.shelf-pill--age { color:#ffc2d4; background:#4a1027e0; border-color:#ff8fb066; }
.shelf-x { position:absolute; z-index:2; top:18px; right:18px; display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%;
    border:1px solid #ffffff2e; background:#0c0a09b3; color:#f1e4cf; cursor:pointer; opacity:0; transition:opacity .2s, background .2s; }
.shelf-x .shelf-icon { width:16px; height:16px; }
.shelf-book:hover .shelf-x, .shelf-x:focus-visible { opacity:1; }
.shelf-x:hover { background:#5a1d1dd9; border-color:#ff9a9a88; }
@media (hover:none) { .shelf-x { opacity:.85; } }
.shelf-book__body { display:flex; flex-direction:column; flex:1; gap:8px; min-width:0; padding:0 2px 2px; }
.shelf-book__title { color:var(--sh-ink); text-decoration:none; font-size:17px; font-weight:800; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shelf-book__progress { display:flex; justify-content:space-between; gap:8px; color:var(--sh-muted); font-size:13.5px; }
.shelf-book__progress b { color:var(--sh-gold); font-weight:700; }
.shelf-book .shelf-bar { height:6px; }
.shelf-book--reading .shelf-bar i { background:linear-gradient(90deg,#3fbf7f,#9df0b8); }
.shelf-book__chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.shelf-book__chips > span { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:3px 8px; padding:9px 10px; border-radius:12px; }
.shelf-book__chips > span .shelf-icon { width:24px; height:24px; }
.shelf-book__chips > span b { font-size:16px; line-height:1.1; color:#fff3dd; }
.shelf-book__chips > span small { grid-column:1 / -1; font-size:11.5px; font-weight:500; line-height:1.2; color:var(--sh-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shelf-book__chips span { font-size:13px; font-weight:600;
    color:#eadcc6; background:#ffffff08; border:1px solid #e6c18a26; }
.shelf-book__chips .shelf-icon { width:15px; height:15px; color:#f0c57f; }
.shelf-cta { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin-top:auto; border-radius:14px; text-decoration:none;
    color:#241705; font-size:15px; font-weight:800; background:linear-gradient(180deg,#ffe2a8,#f6b863); box-shadow:0 10px 24px -12px #ffbe6a; transition:transform .15s, box-shadow .15s; }
.shelf-cta:hover { transform:translateY(-1px); box-shadow:0 14px 30px -12px #ffc77d; }
.shelf-again { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; margin-top:auto; border-radius:12px; text-decoration:none;
    color:#ffdca0; font-size:14px; font-weight:700; background:#ffbe6a12; border:1px solid #ffd99a59; transition:background .2s, border-color .2s; }
.shelf-again:hover { background:#ffbe6a2b; border-color:#ffd99acc; }
.shelf-cta + .shelf-again { margin-top:0; }
.shelf-book.is-hero { border-color:#f2c27c99; background:radial-gradient(120% 70% at 50% 0%,#ffb35a26,transparent 70%),linear-gradient(160deg,#33251a,#181319);
    box-shadow:0 0 0 1px #ffcf8a33, 0 18px 46px #0007, 0 0 40px #ffad4a26; }
.shelf-book.is-hero .shelf-book__title { font-size:20px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .shelf-book:hover { transform:translateY(-5px); border-color:#f2c27c88; box-shadow:0 22px 40px #0007, 0 0 26px #ffad4a1f; }
}

/* Ряды на странице «Моя полка» и в публичном профиле — те же книги, крупнее прежнего. */
.shelf-plank { grid-auto-columns:220px; gap:18px; padding:8px 4px 20px; }
.shelf-plank--wrap { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }

/* ══ Полка на главной и в «Историях» ══ */
.showcase__allstories { text-align:center; margin:18px 0; }
.shelf-switch { display:inline-flex; gap:4px; padding:4px; border-radius:99px; background:#ffffff0d; border:1px solid #ffffff14; margin:0 0 14px; }
.shelf-switch a { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:99px; color:var(--sh-muted); text-decoration:none; font-weight:700; font-size:14px; }
.shelf-switch .shelf-icon { width:18px; height:18px; color:var(--sh-gold); }
.shelf-switch a.is-on .shelf-icon { color:#2a1a08; }
.shelf-switch a.is-on { background:linear-gradient(135deg,#ffd99a,#ffb05d); color:#2a1a08; }
.shelf-switch a span { opacity:.7; margin-left:3px; }
.shelf-home { position:relative; isolation:isolate; min-width:0; max-width:100%; box-sizing:border-box; padding:clamp(16px,2.6vw,28px); border-radius:28px;
    border:1px solid #e0b87a59; color:var(--sh-ink);
    background:radial-gradient(70% 90% at 0% 0%,#c27b3330,transparent 60%),radial-gradient(60% 80% at 100% 100%,#7a55b322,transparent 65%),linear-gradient(180deg,#1a1512,#110f13);
    box-shadow:0 30px 70px #0007, inset 0 1px 0 #ffe3b026; }
/* На широком экране полка шире колонки сайта (1200px): цифры в один ряд, книг в ряду больше. */
@media (min-width:1280px) {
 .shelf-home { margin-inline:min(0px, calc((100% - min(1560px, 100vw - 64px)) / 2)); max-width:none; }
 .shelf-switch { margin-left:min(0px, calc((100% - min(1560px, 100vw - 64px)) / 2)); }
}
.shelf-home [hidden] { display:none !important; }
.shelf-home button:focus-visible, .shelf-home a:focus-visible { outline:2px solid var(--sh-gold); outline-offset:3px; }
.shelf-home__top { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.shelf-home__top h2 { display:flex; align-items:center; gap:12px; margin:0 8px 0 0; font-size:clamp(24px,2.6vw,32px); line-height:1.1; color:#fff3dd; }
.shelf-home__logo { display:inline-flex; }
.shelf-home__logo .shelf-icon { width:42px; height:42px; color:var(--sh-gold); filter:drop-shadow(0 0 12px #ffbd6a77); stroke-width:1.4; }
.shelf-home__stats { display:flex; flex-wrap:wrap; gap:8px; }
.shelf-home__stats > span { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:14px; font-size:14.5px; color:#d9cbb4;
    background:#ffffff06; border:1px solid #ffd99a33; }
.shelf-home__stats b { color:#fff3dd; }
.shelf-home__stats .shelf-icon { width:18px; height:18px; color:var(--sh-gold); }
.shelf-home__stats .is-rank b { color:var(--sh-gold); }
.shelf-home__open { margin-left:auto; display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:14px; text-decoration:none; white-space:nowrap;
    color:#241705; font-size:15px; font-weight:800; background:linear-gradient(180deg,#ffe2a8,#f6b863); box-shadow:0 12px 28px -14px #ffbe6a; }
.shelf-home__bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0 16px; }
.shelf-home__filters { display:flex; flex-wrap:wrap; gap:8px; }
.shelf-home__filters button, .shelf-home__arrows button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border-radius:14px; cursor:pointer;
    font:inherit; font-size:14.5px; font-weight:700; color:#eadcc6; background:#ffffff08; border:1px solid #ffd99a33; transition:background .2s, border-color .2s; }
.shelf-home__filters button:hover, .shelf-home__arrows button:hover { border-color:#ffd99a80; }
.shelf-home__filters .shelf-icon { width:17px; height:17px; color:var(--sh-gold); }
.shelf-home__filters [aria-pressed=true] { color:#241705; background:linear-gradient(180deg,#ffe2a8,#f6b863); border-color:transparent; }
.shelf-home__filters [aria-pressed=true] .shelf-icon { color:#241705; }
.shelf-home__search { position:relative; flex:1 1 220px; max-width:340px; margin-left:auto; }
.shelf-home__search .shelf-icon { position:absolute; left:13px; top:50%; width:17px; height:17px; transform:translateY(-50%); color:var(--sh-muted); pointer-events:none; }
.shelf-home__search input { width:100%; box-sizing:border-box; min-height:44px; padding:0 14px 0 40px; border-radius:14px; border:1px solid #ffd99a33; background:#0d0b0e;
    color:var(--sh-ink); font:inherit; font-size:15px; }
.shelf-home__search input:focus { outline:none; border-color:#ffd99a99; }
.shelf-home__arrows { display:flex; gap:8px; }
.shelf-home__arrows button { width:46px; padding:0; font-size:18px; }
.shelf-home__arrows button:last-child:not(:disabled) { color:#241705; background:linear-gradient(180deg,#ffe2a8,#f6b863); border-color:transparent; }
.shelf-home__arrows button:disabled { opacity:.35; cursor:default; }
.shelf-home__row { display:flex; align-items:stretch; gap:18px; overflow-x:auto; padding:6px 4px 18px; margin:0 -4px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#e0b87a55 transparent; }
.shelf-home__row > .shelf-book { flex:0 0 232px; scroll-snap-align:start; }
.shelf-home__row > .shelf-book.is-hero { flex-basis:300px; }
.shelf-home__row .shelf-book__cover { aspect-ratio:auto; height:280px; }
.shelf-home__empty { margin:0 0 12px; color:var(--sh-muted); }
.shelf-home__more { display:inline-block; margin:0 0 6px; color:var(--sh-gold); font-weight:700; text-decoration:none; }
.shelf-home__foot { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:16px; margin-top:10px; }
.shelf-tips, .shelf-trophies { display:grid; gap:12px; padding:16px; border-radius:20px; border:1px solid #ffd99a2e; background:#ffffff05; color:inherit; text-decoration:none; }
.shelf-tips { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.shelf-tips > .shelf-tips__head { grid-column:1 / -1; }
.shelf-tips__head { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; }
.shelf-tips__head .shelf-icon { grid-row:span 2; width:26px; height:26px; color:var(--sh-gold); filter:drop-shadow(0 0 8px #ffbd6a66); }
.shelf-tips__head b { font-size:17px; color:#fff3dd; }
.shelf-tips__head small { color:var(--sh-muted); font-size:12.5px; line-height:1.35; }
.shelf-tip { display:grid; grid-template-columns:60px minmax(0,1fr) 28px; gap:10px; align-items:center; padding:8px; border-radius:14px; text-decoration:none; color:inherit;
    background:#0000002e; border:1px solid #ffffff12; transition:border-color .2s, transform .2s; }
.shelf-tip:hover { border-color:#ffd99a66; transform:translateY(-2px); }
.shelf-tip__pic { width:60px; height:60px; border-radius:10px; background:#241a12 var(--img) center top / cover; }
.shelf-tip__body { display:grid; gap:3px; min-width:0; }
.shelf-tip__body b { font-size:14.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shelf-tip__body small { color:var(--sh-muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shelf-tip__go { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid #ffd99a55; color:var(--sh-gold); }
.shelf-trophies { align-content:start; transition:border-color .2s; }
.shelf-trophies:hover { border-color:#ffd99a66; }
.shelf-trophies__list { display:flex; justify-content:space-around; gap:10px; }
.shelf-trophy { --t:var(--sh-gold); display:grid; justify-items:center; gap:7px; max-width:110px; text-align:center; }
.shelf-trophy i { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; color:var(--t);
    background:radial-gradient(circle at 35% 30%,#ffffff30,transparent 50%),color-mix(in srgb,var(--t) 22%,#17120d);
    box-shadow:0 0 0 2px var(--t), 0 0 22px color-mix(in srgb,var(--t) 40%,transparent); }
.shelf-trophy .shelf-icon { width:30px; height:30px; }
.shelf-trophy small { font-size:13px; font-weight:700; line-height:1.25; color:#eadcc6; }
.shelf-trophy.tier-1 { --t:var(--sh-bronze); }
.shelf-trophy.tier-2 { --t:var(--sh-silver); }
.shelf-trophy.tier-3 { --t:var(--sh-goldt); }
.shelf-trophy.tier-4 { --t:var(--sh-diamond); }
.shelf-trophies__none { color:var(--sh-muted); }
@media (max-width:1100px) {
 .shelf-home__foot { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
 .shelf-tips { grid-template-columns:minmax(0,1fr); }
 .shelf-home__open { margin-left:0; width:100%; justify-content:center; }
 .shelf-home__search { max-width:none; margin-left:0; flex-basis:100%; order:3; }
 .shelf-home__arrows { display:none; }
 .shelf-home__stats > span { padding:7px 11px; font-size:13.5px; }
 .shelf-home__row > .shelf-book { flex-basis:min(62vw,232px); }
 .shelf-home__row > .shelf-book.is-hero { flex-basis:min(72vw,300px); }
 .shelf-home__row .shelf-book__cover { height:clamp(240px,40svh,290px); }
 .shelf-home__row .is-hero .shelf-book__cover { height:clamp(280px,46svh,360px); }
 .shelf-home__filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; }
 .shelf-home__filters button { flex:none; }
}
@media (max-width:560px) {
 .shelf-plank { grid-auto-columns:min(62vw,220px); }
 .shelf-plank--wrap { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; }
 .shelf-plank--wrap .shelf-book { padding:7px; }
 .shelf-plank--wrap .shelf-book__title { font-size:15px; }
 .shelf-plank--wrap .shelf-book__chips { gap:5px; }
 .shelf-plank--wrap .shelf-book__chips > span { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; padding:6px 4px; }
 .shelf-plank--wrap .shelf-book__chips > span .shelf-icon { width:20px; height:20px; }
 .shelf-plank--wrap .shelf-book__chips > span b { font-size:14px; }
 .shelf-plank--wrap .shelf-book__chips > span small { display:none; }
 .shelf-pill { font-size:11.5px; padding:4px 9px; }
 .shelf-x { top:13px; right:13px; }
}
@media (prefers-reduced-motion:reduce) { .shelf-book, .shelf-tip, .shelf-cta { transition:none; } }