/* POP-UTKA — VHS video rental + face-out comic shelves.
   Visual layer only: no changes to Cloudflare worker, D1 or admin logic. */
:root{--vhs-amber:#f5bc6c;--vhs-coral:#d77b65;--vhs-rust:#51352b;--shelf-wood:#8a5b38}
body{background-color:#101412}
.brandmark{box-shadow:0 0 0 3px #14231b,0 3px 16px #0007}
/* Split worlds, common visual identity */
body[data-section="films"] .hero,body[data-section="watchlist"] .hero{background:repeating-linear-gradient(125deg,#312a28 0,#312a28 4px,#352a24 4px,#352a24 9px);border:1px solid #886047;box-shadow:inset 0 0 48px #0c0e0e9c}
body[data-section="films"] .hero:after{content:'REWIND ◀◀   •   PLAY ▶   •   REC ●';position:absolute;bottom:0;right:0;left:0;display:block;text-align:center;letter-spacing:.26em;color:#ffd09b60;font:700 10px monospace;padding:7px 2px;background:#130f0d99}
body[data-section="films"] .hero-index,body[data-section="films"] .section-kicker,body[data-section="films"] .eyebrow{color:#f5c58b}
body[data-section="films"] .hero h1 i{color:#f6c283}
body[data-section="films"] .hero-art{background:radial-gradient(circle at 50% 50%,#76503880,transparent 70%)}
body[data-section="comics"] .hero{background:linear-gradient(115deg,#322519,#1d2920 75%);border:1px solid #806448}
body[data-section="comics"] .hero:after{content:'НОВЫЕ ПОСТУПЛЕНИЯ  •  КОЛЛЕКЦИЯ ОБЛОЖЕК';position:absolute;bottom:0;left:0;right:0;text-align:center;padding:8px;color:#ffd3a17a;letter-spacing:.16em;font:700 10px monospace;background:#21160980}
body[data-section="comics"] .hero h1 i{color:#eac28c}
body[data-section="comics"] .hero-art{background:linear-gradient(120deg,#574029,#1c2f25)}
body[data-section="comics"] .section-kicker{color:#e4b982}
/* Archival entrance signage */
body[data-section="films"] .section-heading:before,body[data-section="comics"] .section-heading:before{content:'';display:block;width:5px;min-height:66px;align-self:stretch;background:repeating-linear-gradient(180deg,#d7855f 0 6px,#f3c684 6px 12px);border-radius:3px}
body[data-section="comics"] .section-heading:before{background:repeating-linear-gradient(180deg,#cb9c5e 0 6px,#6c9a76 6px 12px)}
body[data-section="films"] .section-heading h2,body[data-section="comics"] .section-heading h2{font-family:Georgia,serif}
body[data-section="films"] .section-heading p{color:#c1ab9c}
/* VHS: small cassette spine on left of a full cover, analog wear / foil label */
.vhs-card:not(.editing) .cover{border-radius:4px 10px 9px 4px;border:4px solid #12120f;border-left-width:10px;box-shadow:inset 0 0 0 1px #d9ae7955,0 2px 0 #3e3a31, 0 11px 21px #0009;transform:rotate(-.5deg);overflow:hidden}
.vhs-card:not(.editing) .cover:after{background:linear-gradient(90deg,#070808aa 0 7%,transparent 16%),linear-gradient(0deg,#080905bb,transparent 46%);pointer-events:none}
.vhs-card:not(.editing) .vhs-side{pointer-events:none;position:absolute;z-index:2;top:-3px;bottom:-3px;left:-9px;width:10px;background:repeating-linear-gradient(180deg,#141414 0 6px,#37342d 6px 9px,#0b0b0b 9px 13px);box-shadow:inset -2px 0 2px #000b,2px 0 7px #0007}
.vhs-sp{position:absolute;left:4px;top:42%;transform:rotate(-90deg) translateX(-50%);transform-origin:left center;z-index:4;white-space:nowrap;color:#fde4b2;opacity:.82;font:700 7px monospace;letter-spacing:.2em;pointer-events:none}
.vhs-card:not(.editing) .type-tag{background:#151615d9;border:1px solid #c5a276;font-size:8px;color:#f6d2a1;border-radius:2px}
.vhs-card:not(.editing) .poster-index{color:#f6e1c4;font:700 9px monospace;letter-spacing:.08em;background:#17130da3;padding:4px 6px;border-radius:2px}
.vhs-card:not(.editing) .cover-title{font-family:Arial,Helvetica,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:1.02}
.vhs-card:not(.editing) .cover.photo .cover-title{display:none}
.vhs-card:not(.editing) .media-content{padding:12px 3px 0}
.vhs-card:not(.editing) .film-title{color:#f0e4cb}
.vhs-card:not(.editing) .film-meta{color:#c6a989}
.vhs-card:not(.editing) .score-text{color:#d6b893}
.vhs-card:not(.editing) .star.filled,.vhs-card:not(.editing) .read-star.filled{color:var(--vhs-amber)}
.vhs-card:not(.editing) .cover-upload{background:#efbd72;color:#282018;border:1px solid #fff4d27a;z-index:19}
body[data-section="films"] .library-toolbar{background:linear-gradient(90deg,#33292244,transparent)}
/* Comic shop: covers face the reader, horizontal shelves. */
#cardGrid.comics-on-shelves{display:flex;flex-direction:column;gap:17px;margin:8px 0 24px;overflow:visible}
.comic-shelf{width:100%;min-width:0;position:relative;padding:10px 0 1px;background:radial-gradient(ellipse at 50% 90%,#9d71452b,transparent 78%),linear-gradient(180deg,#24302811,#392c2060);border-radius:7px}
.comic-shelf-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 13px 12px;font:800 10px monospace;letter-spacing:.15em;color:#d9c09b}
.comic-shelf-heading span:last-child{font-weight:500;color:#bda88b;font-size:9px}
.comic-shelf-items{position:relative;display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 16px 29px;align-items:flex-start;-webkit-overflow-scrolling:touch}
.comic-shelf-items::-webkit-scrollbar{display:none}
.comic-shelf-items .media-card{flex:0 0 clamp(130px,20vw,182px);scroll-snap-align:start;min-width:0}
.comic-shelf .cover{aspect-ratio: .71!important;border:3px solid #e2d1a8;border-radius:1px;box-shadow:4px 4px 0 #0009,0 9px 19px #0008,0 0 0 1px #f8daa6;transform:rotate(-.3deg);padding:8px}
.comic-shelf .media-card:nth-child(2n) .cover{transform:rotate(.6deg)}
.comic-shelf .cover-title{font-family:Georgia,serif;line-height:1.05;font-size:clamp(17px,2vw,24px)}
.comic-shelf .cover.photo .cover-title{display:none}
.comic-shelf .cover-top .type-tag{border-radius:0;background:#4e2b29bd}
.comic-shelf .poster-index{font:700 9px monospace;color:#f3e6c6;background:#2e201c93;padding:3px}
.comic-shop-price{position:absolute;z-index:3;bottom:7px;left:7px;font:700 8px monospace;color:#30251a;background:#e8d19c;padding:3px 6px;transform:rotate(-2deg);pointer-events:none;box-shadow:1px 2px 0 #0006}
.comic-shelf .media-content{padding:11px 2px 0}
.comic-shelf .film-title{font-size:13px;min-height:33px;line-height:1.25}
.comic-shelf .film-meta{color:#d6b88c}
.comic-shelf .film-note{display:none}
.comic-shelf .quick-stars .star{font-size:18px}
.comic-shelf .quick-stars .score-text{font-size:9px}
.comic-shelf .quick-status{max-width:100%;padding:6px 3px}
.comic-shelf .status-row{align-items:start;gap:2px}
.comic-shelf-plank{position:absolute;height:15px;left:0;right:0;bottom:0;border-top:2px solid #e8b878;border-bottom:3px solid #3d2116;background:repeating-linear-gradient(176deg,#92603a 0 24px,#865432 24px 28px,#ae7851 28px 42px);box-shadow:0 7px 10px #0008,0 2px 2px #24130d;z-index:2;pointer-events:none}
.comic-shelf:after{content:'';position:absolute;bottom:-7px;left:12px;right:12px;height:6px;background:#1a0b08;filter:blur(5px);opacity:.75;pointer-events:none}
/* Comic listings in combined/wishlist view should still read as comics. */
.comic-card:not(.editing) .cover{border:2px solid #baa17f}
.comic-card:not(.editing) .film-meta{color:#d1ad7f}
.comic-card:not(.editing) .comic-shop-price{display:none}
.comic-shelf .comic-shop-price{display:block!important}
/* Detail pop-up with vintage tag by type */
body[data-section="films"] .entry-dialog{border-color:#a27556;background:#201c18}
body[data-section="films"] .detail-eyebrow{color:#edbf85}
body[data-section="comics"] .entry-dialog{border-color:#a58c6a;background:#28231c}
body[data-section="comics"] .detail-eyebrow{color:#f2cb91}
/* Accessibility and compact iPhone adjustments */
@media(max-width:800px){.comic-shelf-items .media-card{flex-basis:158px}}
@media(max-width:560px){
 body[data-section="films"] .hero{background:linear-gradient(115deg,#523529,#231d1a 95%);border-color:#78553e}
 body[data-section="comics"] .hero{background:linear-gradient(120deg,#49351f,#18291e)}
 body[data-section="films"] .hero:after,body[data-section="comics"] .hero:after{font-size:7px;letter-spacing:.12em;padding:4px}
 body[data-section="films"] .hero-copy,body[data-section="comics"] .hero-copy{padding-bottom:27px}
 body[data-section="films"] .hero h1{font-size:clamp(30px,9.3vw,40px)}
 .vhs-card:not(.editing) .cover{border-left-width:8px;border-top-width:3px;border-right-width:3px;border-bottom-width:3px}
 .vhs-sp{font-size:6px}
 .comic-shelf-items{padding:4px 12px 27px;gap:12px}
 .comic-shelf-items .media-card{flex-basis:138px}
 .comic-shelf-heading{padding:3px 12px 10px;font-size:9px}
 .comic-shelf .cover{padding:7px}
 .comic-shelf .film-title{font-size:12px}
 .comic-shelf .quick-stars button{min-width:19px}
 .comic-shelf .status-row{flex-direction:column}
 .comic-shelf .media-content{padding-top:8px}
 .comic-shelf .cover-upload{font-size:7px;padding:5px}
}
@media(prefers-reduced-motion:reduce){.vhs-card:not(.editing) .cover,.comic-shelf .cover{transform:none!important;transition:none!important}}