/* Поп-утка · физические полки. Pure presentation; existing Cloudflare Worker/D1 unchanged. */
:root{--pine:#101712;--wood:#815334;--edge:#edb979}
/* Minimal shelf gallery: no control overlays, no stars and no film/type marks. */
#cardGrid.physical-shelves{display:flex!important;flex-direction:column;gap:24px;margin:24px 0 34px;overflow:visible}
#cardGrid.physical-shelves .physical-shelf{position:relative;min-width:0;width:100%;border-radius:11px 11px 3px 3px;padding:16px 0 23px;background:radial-gradient(ellipse at 50% 50%,#61503b22,transparent 75%),linear-gradient(180deg,#242820 0%,#161d17 100%);box-shadow:inset 0 1px 0 #b9a28521}
#cardGrid.physical-shelves .physical-shelf-items{position:relative;display:flex;align-items:flex-end;gap:16px;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:17px;padding:10px 18px 13px;-webkit-overflow-scrolling:touch}
#cardGrid.physical-shelves .physical-shelf-items::-webkit-scrollbar{display:none}
#cardGrid.physical-shelves .shelf-card{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;flex:none;min-width:0;padding:0;scroll-snap-align:start}
#cardGrid.physical-shelves .shelf-card .media-content,#cardGrid.physical-shelves .shelf-card .cover-top,#cardGrid.physical-shelves .shelf-card .cover-upload,#cardGrid.physical-shelves .shelf-card .comic-shop-price,#cardGrid.physical-shelves .shelf-card .vhs-sp{display:none!important}
#cardGrid.physical-shelves .physical-shelf-rail{position:absolute;z-index:5;pointer-events:none;left:0;right:0;bottom:0;height:21px;background:linear-gradient(#b5895c 0 2px,#79502f 2px 5px,#966540 5px 14px,#3f291a 14px 17px,#21180e 17px 21px);box-shadow:0 11px 16px #000b,0 2px 1px #251407;border-radius:2px}
#cardGrid.physical-shelves .physical-shelf-rail:after{content:'';position:absolute;inset:4px 2px 8px;background:repeating-linear-gradient(3deg,transparent 0 35px,#e6aa6430 35px 36px,transparent 37px 72px);opacity:.35}
/* Physical VHS plastic clamshell cases with their *fronts* facing the reader. */
#cardGrid.film-shelves .shelf-card{width:clamp(148px,37vw,207px);padding:0 1px 0 8px}
.physical-case{position:relative;isolation:isolate;cursor:pointer;transition:transform .18s ease,filter .18s ease;}
.physical-case:active{transform:translateY(-3px)}
#cardGrid.film-shelves .physical-case{border:4px solid #181a19;border-left-width:10px;border-bottom-width:7px;border-radius:7px 5px 4px 4px;background:#101112;box-shadow:0 2px 0 #000,3px 5px 0 #101010,6px 8px 15px #000c,0 0 0 1px #77735a85}
#cardGrid.film-shelves .physical-case:before{content:'';pointer-events:none;position:absolute;z-index:3;left:-10px;top:-4px;bottom:-7px;width:9px;border-radius:5px 0 0 4px;background:linear-gradient(90deg,#050505,#41413d 40%,#0b0d0c 80%);box-shadow:inset -1px 0 0 #79756a44}
#cardGrid.film-shelves .physical-case:after{content:'';pointer-events:none;position:absolute;z-index:4;left:0;right:0;top:0;bottom:0;background:linear-gradient(105deg,#ffffff1c 0%,transparent 24%,transparent 72%,#ffffff08 100%),linear-gradient(0deg,#00000025,transparent 22%);border:1px solid #ffffff24}
#cardGrid.film-shelves .cover{aspect-ratio:0.69!important;border:0!important;border-radius:1px!important;transform:none!important;box-shadow:none!important;overflow:hidden;padding:10px;background-color:var(--cover-base)}
#cardGrid.film-shelves .cover.photo .cover-title{display:none!important}
#cardGrid.film-shelves .cover:not(.photo) .cover-title{font-size:clamp(16px,5vw,27px);line-height:1.03;bottom:15px;letter-spacing:-.045em}
#cardGrid.film-shelves .cover .cover-title small{font-size:8px}
#cardGrid.film-shelves .cover.photo .cover-photo{object-fit:cover}
/* Comic bag and board: paper covers point forward, independent of admin state. */
#cardGrid.comics-on-shelves .shelf-card{width:clamp(134px,32vw,179px);padding:0 2px 0 1px}
#cardGrid.comics-on-shelves .physical-shelf{background:linear-gradient(180deg,#2b2820 0%,#25251d 64%,#1d2219 100%)}
#cardGrid.comics-on-shelves .physical-case{padding:4px;background:#d2cdbe;border:1px solid #dedbc9;border-radius:2px 2px 0 0;box-shadow:2px 2px 0 #8e806e,5px 7px 12px #0009,0 0 0 2px #ffffff18}
#cardGrid.comics-on-shelves .physical-case:after{content:'';z-index:4;position:absolute;pointer-events:none;inset:1px;border-left:1px solid #ffffff62;background:linear-gradient(115deg,#ffffff32,transparent 23%,transparent 60%,#ffffff13 75%,transparent 89%)}
#cardGrid.comics-on-shelves .cover{aspect-ratio:.665!important;border:0!important;border-radius:0!important;transform:none!important;box-shadow:none!important;padding:7px}
#cardGrid.comics-on-shelves .cover.photo .cover-title{display:none!important}
#cardGrid.comics-on-shelves .cover:not(.photo) .cover-title{font-size:clamp(13px,3.5vw,22px)}
#cardGrid.comics-on-shelves .physical-shelf-rail{background:linear-gradient(#efd1a1 0 2px,#a7794b 2px 5px,#87603c 5px 15px,#51351d 15px 19px,#342113 19px 21px)}
/* Hide magazine secondary UI in shelf view - maintain list view for people who want it. */
#cardGrid.physical-shelves .cover-details{z-index:6;inset:0;outline-offset:3px;border-radius:4px}
body[data-section="films"] .section-heading:before,body[data-section="comics"] .section-heading:before{display:none}
body[data-section="films"] .section-heading,body[data-section="comics"] .section-heading{margin-bottom:18px}
body[data-section="films"] .view-mode,body[data-section="comics"] .view-mode{margin-top:8px}
body[data-section="films"] .list-meta,body[data-section="comics"] .list-meta{opacity:.65}
/* No metadata on covers; details are in the bottom sheet where they belong. */
.entry-dialog .detail-edit{background:#dfee9b;color:#18231a;border:0;border-radius:11px;font-weight:800;padding:13px 15px;margin-top:15px;width:100%;min-height:44px}
.modal-fields{display:flex;flex-direction:column;gap:14px;margin:16px 0 4px}
.modal-fields label{display:flex;flex-direction:column;gap:6px;color:#acbcab;font-size:12px;font-weight:700}
.modal-fields input:not([type="file"]),.modal-fields select,.modal-fields textarea{width:100%;color:#fff6dc;background:#15221a;border:1px solid #465849;border-radius:10px;font-size:14px;padding:12px 13px;outline-offset:2px;min-height:46px}
.modal-fields textarea{resize:vertical;line-height:1.55}
.modal-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-fields .modal-upload{display:block;position:relative;padding:14px 16px;min-height:47px;background:#e2f29b;color:#1a261b;text-align:center;font-size:13px;border-radius:12px;font-weight:900;cursor:pointer}
.modal-upload input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.modal-remove{background:transparent;border:1px solid #6c4c45;color:#f0b6a4;border-radius:9px;padding:10px}
.modal-rating{display:flex;gap:0;align-items:center;flex-wrap:nowrap;}
.modal-rating button{background:none;border:0;font-size:24px;line-height:1.3;color:#667267;padding:2px 5px 2px 0;min-width:33px}
.modal-rating button.lit{color:#e7b779}
.modal-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.modal-controls span{font-size:10px;color:#9aa99b}
.modal-controls button{background:#e5f29d;color:#152017;border:0;border-radius:10px;min-height:43px;padding:10px 19px;font-weight:850}
@media(max-width:560px){
 #cardGrid.physical-shelves{gap:21px;margin-top:15px}
 #cardGrid.physical-shelves .physical-shelf{padding-top:14px;padding-bottom:22px}
 #cardGrid.physical-shelves .physical-shelf-items{padding:8px 14px 12px;gap:13px}
 #cardGrid.film-shelves .shelf-card{width:clamp(145px,42vw,178px)}
 #cardGrid.comics-on-shelves .shelf-card{width:clamp(123px,36vw,157px)}
 .modal-fields input:not([type="file"]),.modal-fields select,.modal-fields textarea{font-size:16px}
 .modal-two{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.physical-case{transition:none}}

/* Small, unobtrusive navigation — browsing a shop rather than editing a database. */
body[data-section="films"] .view-mode,body[data-section="comics"] .view-mode{display:none!important}
body[data-section="films"] .list-meta,body[data-section="comics"] .list-meta{font-size:9px;padding:1px 1px 4px;opacity:.63}
body[data-section="films"] .sort-label,body[data-section="comics"] .sort-label{display:none!important}
body[data-section="films"] .list-meta span:last-child,body[data-section="comics"] .list-meta span:last-child{display:none}
/* Cross-category home and wish-list galleries also stay quiet and clean. */
#cardGrid.poster-first:not(.physical-shelves) .shelf-card{background:transparent;border:0;box-shadow:none}
#cardGrid.poster-first:not(.physical-shelves) .shelf-card .media-content{display:none}
#cardGrid.poster-first:not(.physical-shelves) .physical-case{border:4px solid #181a18;border-left-width:7px;border-radius:5px;box-shadow:3px 6px 12px #0008}
#cardGrid.poster-first:not(.physical-shelves) .comic-face{border:4px solid #c8c2aa;border-left-width:4px;box-shadow:3px 6px 12px #0008}
#cardGrid.poster-first:not(.physical-shelves) .cover.photo .cover-title{display:none}
#cardGrid.poster-first:not(.physical-shelves) .cover{aspect-ratio: .69;box-shadow:none}
@media(max-width:560px){
 body[data-section="films"] .hero,body[data-section="comics"] .hero{min-height:0}
 body[data-section="films"] .hero-art,body[data-section="comics"] .hero-art{display:none}
 body[data-section="films"] .hero-copy,body[data-section="comics"] .hero-copy{padding:20px 19px 18px}
 body[data-section="films"] .hero h1,body[data-section="comics"] .hero h1{font-size:32px;margin:7px 0 8px}
 body[data-section="films"] .hero-copy>p,body[data-section="comics"] .hero-copy>p{font-size:11px;margin:0 0 8px}
 body[data-section="films"] .dashboard,body[data-section="comics"] .dashboard{display:none}
}


/* V3 · More natural physical shelves, slightly denser, still cover-first. */
#cardGrid.physical-shelves{
  gap:17px;
  margin-top:18px;
  margin-bottom:28px;
}
#cardGrid.physical-shelves .physical-shelf{
  padding:9px 0 16px;
  border-radius:6px 6px 2px 2px;
  background:
    linear-gradient(0deg,rgba(0,0,0,.48),transparent 24%),
    radial-gradient(ellipse 120% 60% at 50% 26%,#484b3d24,transparent 75%),
    linear-gradient(180deg,#252921 0%,#151b16 100%);
  box-shadow:inset 0 1px 0 #c9ba8730,inset 0 13px 19px #0508073c;
  border:1px solid #78654b23;
}
#cardGrid.physical-shelves .physical-shelf-items{
  gap:10px;
  padding:8px 10px 9px;
  scroll-padding-left:10px;
  align-items:flex-end;
}
#cardGrid.physical-shelves .physical-shelf-rail{
  height:13px;
  background:linear-gradient(#ad8454 0 1px,#92633c 1px 4px,#704629 4px 10px,#2b1e13 10px 13px);
  box-shadow:0 7px 12px #000c,0 2px 3px #140d09;
}
#cardGrid.physical-shelves .physical-shelf-rail:after{
  inset:4px 1px 5px;
  background:repeating-linear-gradient(6deg,transparent 0 42px,#ffd79c22 44px 45px,transparent 47px 87px);
  opacity:.27;
}
/* Scuffed plastic VHS cases: a narrow three-dimensional edge, shell lip and plastic sheen. */
#cardGrid.film-shelves .shelf-card{width:clamp(118px,32.4vw,162px);padding:0 2px 0 5px}
#cardGrid.film-shelves .physical-case{
  border:3px solid #171b19;
  border-left:8px solid #101311;
  border-right-width:5px;
  border-bottom-width:6px;
  border-radius:5px 6px 3px 3px;
  background:#101311;
  box-shadow:
    0 1px 0 #50524b inset,
    1px 1px 0 #54554b73,
    3px 2px 0 #0b0d0d,
    5px 4px 0 #232722,
    7px 9px 14px #000b;
}
#cardGrid.film-shelves .physical-case:before{
  left:-8px;top:-3px;bottom:-6px;width:7px;
  background:
    repeating-linear-gradient(0deg,transparent 0 32px,#b3b4a112 32px 35px,transparent 36px 64px),
    linear-gradient(90deg,#080908 0%,#343a34 40%,#151b16 70%,#080b09 100%);
  box-shadow:inset -1px 0 #a6a69638, 1px 0 1px #050605;
}
#cardGrid.film-shelves .physical-case:after{
  inset:0;
  border:1px solid #e2e4ce29;
  border-radius:1px;
  background:
    linear-gradient(100deg,#fff9e51b 0%,transparent 17%,transparent 78%,#fff8e30e 100%),
    repeating-linear-gradient(107deg,transparent 0 28px,#dcd9be0b 29px,transparent 30px 69px),
    linear-gradient(180deg,transparent 75%,#00000024 100%);
  opacity:.85;
}
#cardGrid.film-shelves .cover{aspect-ratio:.69!important;padding:4px!important}
#cardGrid.film-shelves .cover .cover-photo{width:100%;height:100%;object-fit:cover}
#cardGrid.film-shelves .cover:not(.photo) .cover-title{font-size:clamp(15px,4.3vw,23px);bottom:12px}
/* Comics in clear bags with clean thin lips; shelf timber is secondary to cover art. */
#cardGrid.comics-on-shelves .physical-shelf{
  background:
    radial-gradient(ellipse at 48% 30%,#69583e1b,transparent 72%),
    linear-gradient(180deg,#292923,#181c16);
}
#cardGrid.comics-on-shelves .shelf-card{width:clamp(107px,29.2vw,144px);padding:0 2px 0 1px}
#cardGrid.comics-on-shelves .physical-case{
  padding:3px;
  border:1px solid #d3d1c991;
  border-top:3px solid #e1e4d08c;
  background:#cdcaba;
  box-shadow:1px 0 0 #e7e8d854,2px 3px 0 #756e5d,4px 6px 11px #0008;
}
#cardGrid.comics-on-shelves .physical-case:before{
  content:'';position:absolute;pointer-events:none;z-index:3;
  top:-3px;left:5px;right:5px;height:3px;
  background:linear-gradient(90deg,transparent,#ffffff8a 36%,#afab9b99 75%,transparent);
}
#cardGrid.comics-on-shelves .physical-case:after{
  inset:1px;
  border:1px solid #ffffff63;
  background:linear-gradient(111deg,#ffffff4d,transparent 15%,transparent 74%,#ffffff29 86%,transparent 95%);
  opacity:.55;
}
#cardGrid.comics-on-shelves .cover{aspect-ratio:.665!important;padding:1px!important}
#cardGrid.comics-on-shelves .physical-shelf-rail{
  background:linear-gradient(#d4b38a 0 1px,#9d744b 1px 3px,#835733 3px 10px,#392515 10px 13px);
}
/* No button-like overlays or card subtitles. All actions stay in details. */
#cardGrid.physical-shelves .shelf-card .media-content,
#cardGrid.physical-shelves .shelf-card .cover-upload,
#cardGrid.physical-shelves .shelf-card .cover-top,
#cardGrid.physical-shelves .shelf-card .vhs-sp,
#cardGrid.physical-shelves .shelf-card .comic-shop-price{display:none!important}
#cardGrid.physical-shelves .physical-case:hover{filter:brightness(1.045);transform:translateY(-2px)}
#cardGrid.physical-shelves .physical-case:active{transform:translateY(-5px)}
@media(max-width:560px){
 #cardGrid.physical-shelves{gap:16px;margin-top:13px}
 #cardGrid.physical-shelves .physical-shelf{padding:9px 0 15px}
 #cardGrid.physical-shelves .physical-shelf-items{gap:9px;padding:7px 9px 9px}
 #cardGrid.film-shelves .shelf-card{width:clamp(114px,32.5vw,150px);padding-left:5px}
 #cardGrid.comics-on-shelves .shelf-card{width:clamp(103px,29vw,137px);padding-left:1px}
}
@media(max-width:340px){
 #cardGrid.film-shelves .shelf-card{width:111px}
 #cardGrid.comics-on-shelves .shelf-card{width:99px}
 #cardGrid.physical-shelves .physical-shelf-items{gap:8px}
}
@media(prefers-reduced-motion:reduce){#cardGrid.physical-shelves .physical-case{transition:none}}

/* Readable fallback covers until a real photo is added. */
#cardGrid.film-shelves .cover:not(.photo) .cover-title{font-size:clamp(13px,3.4vw,19px)!important;line-height:1.07;max-height:72%;overflow:hidden}
#cardGrid.comics-on-shelves .cover:not(.photo) .cover-title{font-size:clamp(11px,3.2vw,17px)!important;line-height:1.09;max-height:74%;overflow:hidden}
#cardGrid.physical-shelves .cover:not(.photo) .cover-title-text{display:block;overflow-wrap:anywhere;hyphens:auto}