/* POP-UTKA v8: three subtle spaces, one visual language. Pure CSS backgrounds. */
:root { color-scheme: dark; }
body { transition:background-color .18s ease; }
body[data-section="films"] { --room-accent: #bb9060; background-color:#0b100e; }
body[data-section="series"] { --room-accent: #86a8b7; background-color:#0b1115; }
body[data-section="comics"] { --room-accent: #bba184; background-color:#12110f; }
body[data-section="watchlist"] { --room-accent: #bfd59a; background-color:#0c110e; }
/* Matte background; hardly noticeable until the shelves appear. */
body::before {
 content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
 background:
  radial-gradient(ellipse 105% 58% at 52% 0%, rgba(140,102,57,.16),transparent 70%),
  linear-gradient(90deg, transparent 0 7%, rgba(131,115,79,.025) 7% 7.15%, transparent 7.15% 92%, rgba(131,115,79,.025) 92% 92.15%,transparent 92.15%),
  linear-gradient(180deg,#101411 0%,#0b100e 85%);
 opacity:1;
}
body[data-section="series"]::before {
 background:
  radial-gradient(ellipse 110% 58% at 65% 13%, rgba(83,132,170,.23), transparent 70%),
  repeating-linear-gradient(180deg, transparent 0 5px, rgba(156,184,206,.011) 5px 6px),
  linear-gradient(180deg,#0d151a 0%,#0b1014 70%,#090e12 100%);
}
body[data-section="comics"]::before {
 background:
  radial-gradient(ellipse 95% 65% at 40% 13%,rgba(158,114,72,.22),transparent 70%),
  radial-gradient(circle at 1px 1px,rgba(184,155,109,.045) .65px,transparent .95px),
  linear-gradient(180deg,#181714,#111310 85%);
 background-size:auto,7px 7px,auto;
}
body[data-section="watchlist"]::before {background:linear-gradient(145deg,#0c1410,#0b100e 70%)}
/* Gentle wall glow around shelves; the artworks keep all attention. */
body[data-section="films"] #cardGrid.physical-shelves,
body[data-section="series"] #cardGrid.physical-shelves,
body[data-section="comics"] #cardGrid.physical-shelves {position:relative}
body[data-section="films"] #cardGrid.physical-shelves .physical-shelf{
 background:linear-gradient(180deg,rgba(205,170,119,.030),transparent 54%);
}
body[data-section="series"] #cardGrid.physical-shelves .physical-shelf{
 background:linear-gradient(180deg,rgba(123,157,176,.042),transparent 60%);
}
body[data-section="series"] #cardGrid.physical-shelves .physical-shelf-rail{
 filter:saturate(.72) brightness(.82);
}
body[data-section="comics"] #cardGrid.physical-shelves .physical-shelf{
 background:linear-gradient(180deg,rgba(175,133,90,.06),transparent 80%);
}
/* The app's shell is transparent; the room backdrop is behind it. */
.site-shell {position:relative;z-index:1;background:transparent!important;}
/* Each review opens like a collectible dossier rather than a plain text form. */
.entry-dialog {
 --r-accent: #d7e69e;
 position:fixed; inset:auto 0 0; margin:auto auto 0; padding:0!important;
 max-width:690px; width:100%; max-height:min(94dvh,920px);
 background:#101715!important; color:#eeeadd; overflow:auto; overscroll-behavior:contain;
 border:1px solid rgba(177,198,164,.18)!important; border-bottom:0!important;
 border-radius:25px 25px 0 0!important; box-shadow:0 -20px 85px #000b;
 scrollbar-width:thin; scrollbar-color:#43564a transparent;
}
.entry-dialog[data-review-kind="film"] { --r-accent:#e5bd88; background:#171813!important }
.entry-dialog[data-review-kind="series"] { --r-accent:#a3c6d7; background:#10181c!important }
.entry-dialog[data-review-kind="comic"] { --r-accent:#e0c39e; background:#191713!important }
.entry-dialog::backdrop {background:rgba(0,4,3,.83); backdrop-filter:blur(7px)}
.entry-dialog .dialog-close {
 position:sticky!important; float:right; top:12px; right:12px; z-index:15;
 margin:12px 12px -56px 0; width:40px;height:40px;
 background:rgba(10,15,13,.8)!important; color:#fff!important; border:1px solid #ffffff35!important;
 border-radius:50%;font-size:18px;display:grid;place-items:center; padding:0;
 backdrop-filter:blur(10px);
}
.review-scene{isolation:isolate;position:relative;overflow:hidden;padding:30px 24px 30px;}
.review-atmosphere{position:absolute;inset:-15px;z-index:-1;overflow:hidden;background:
 radial-gradient(ellipse at 60% 16%,rgba(175,156,99,.12),transparent 65%),linear-gradient(180deg,#283129,#101715)}
[data-review-kind="series"] .review-atmosphere{background:radial-gradient(ellipse at 65% 18%,#47647965,transparent 67%),#10181c}
[data-review-kind="comic"] .review-atmosphere{background:radial-gradient(ellipse at 45% 23%,#835f3763,transparent 67%),#191713}
.review-atmosphere:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,16,.36),rgba(11,16,14,.8) 70%,#101715 100%)}
.entry-dialog[data-review-kind="film"] .review-atmosphere:after{background:linear-gradient(180deg,#1418118c,#171813dc 75%,#171813)}
.entry-dialog[data-review-kind="series"] .review-atmosphere:after{background:linear-gradient(180deg,#0a171cab,#10181ce5 75%,#10181c)}
.entry-dialog[data-review-kind="comic"] .review-atmosphere:after{background:linear-gradient(180deg,#1a160e97,#191713e6 75%,#191713)}
.review-atmosphere-photo{width:100%;height:100%;object-fit:cover;opacity:.55;filter:blur(27px) saturate(.65);transform:scale(1.18)}
.review-scene-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.16em;font-weight:720;color:#ffffffc0;position:relative;padding-right:48px}
.review-scene-top i{font-style:normal;color:var(--r-accent);padding:0 4px}
.review-hero{display:flex;align-items:end;gap:22px;position:relative;margin-top:29px}
.review-cover-frame{width:35%;max-width:202px;aspect-ratio:2/3;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;background:linear-gradient(140deg,#4f5e4e,#1a251c);border:4px solid #1b2220;outline:1px solid #ffffff2c;box-shadow:9px 14px 22px #0009;border-radius:5px}
[data-review-kind="comic"] .review-cover-frame{border-color:#e1d5bb;outline-color:#ffffff40;box-shadow:7px 10px 15px #0008}
.review-cover-frame img{width:100%;height:100%;object-fit:cover}
.review-cover-fallback{font-family:Georgia,serif;font-size:66px;color:var(--r-accent)}
.review-heading{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:2px}
.review-kind{color:#f5eedac5;font-size:10px;font-weight:780;letter-spacing:.13em}
.review-heading h2{font-size:clamp(25px,5vw,39px);line-height:1.06;font-family:Georgia,serif;letter-spacing:-.05em;font-weight:normal;margin:0;overflow-wrap:anywhere;text-wrap:balance}
.review-status{font-size:11px;letter-spacing:.06em;color:#e5e9d2a8;border:1px solid #ffffff29;border-radius:5px;padding:5px 9px}
.review-rating{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--r-accent);margin-top:3px}
.review-rating strong{font-family:Georgia,serif;font-size:26px;line-height:1;font-weight:normal}
.review-rating strong small{font-size:13px;opacity:.7}
.review-rating-stars{font-size:17px;letter-spacing:1px}
.review-not-rated{font-size:11px;letter-spacing:.06em;color:#bfc8ae}
.review-body{padding:25px 27px max(38px,calc(23px + env(safe-area-inset-bottom)));background:transparent;}
.review-body-intro{display:flex;align-items:center;gap:11px;color:var(--r-accent);font-size:10px;font-weight:790;letter-spacing:.14em;margin-bottom:18px}
.review-rule{height:1px;background:linear-gradient(90deg,#c9d0bf68,transparent);flex:1}
.review-body .detail-note{font-family:Georgia,"Times New Roman",serif;color:#e8e6d9;font-size:17px;line-height:1.8;letter-spacing:.005em;white-space:pre-wrap;margin:0 0 25px;max-width:60ch;overflow-wrap:anywhere}
.review-body .detail-note::first-letter{font-size:1.5em;color:var(--r-accent)}
.review-body .detail-link,.review-body .detail-edit{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:0;max-width:100%;font-size:12px;letter-spacing:.02em;
 margin:0 9px 10px 0;padding:12px 16px;border-radius:9px;background:transparent!important;
 border:1px solid #ffffff37;color:#e9edda!important;text-decoration:none;
}
.review-body .detail-link{border-color:var(--r-accent);color:var(--r-accent)!important}
.review-signature{display:flex;align-items:center;gap:10px;opacity:.52;border-top:1px solid #ffffff25;margin-top:18px;padding-top:17px;font-size:9px;letter-spacing:.11em}
.review-signature img{object-fit:contain;border-radius:5px}
.review-edit-area .modal-fields{margin:0}
.review-edit-area .modal-fields label{color:#dadcce}
.review-edit-area .modal-fields input:not([type=file]),.review-edit-area .modal-fields select,.review-edit-area .modal-fields textarea{color:#f6f2e7;background:#ffffff0c;border:1px solid #ffffff35}
.review-edit-area .modal-controls button{background:var(--r-accent)!important;color:#172018!important}
.review-edit-area .modal-rating{display:flex;flex-wrap:wrap;gap:0}
.review-edit-area .modal-rating button{color:#556055}
.review-edit-area .modal-rating button.lit{color:var(--r-accent)}
@media(max-width:480px){
 .entry-dialog{max-height:94dvh}
 .review-scene{padding:26px 20px 25px}
 .review-hero{margin-top:26px;gap:17px}
 .review-cover-frame{width:41%;max-width:172px;border-width:3px}
 .review-heading{gap:10px}
 .review-heading h2{font-size:clamp(23px,6vw,31px)}
 .review-scene-top{font-size:9px}
 .review-rating strong{font-size:23px}
 .review-rating-stars{font-size:14px}
 .review-body{padding:23px 22px max(39px,calc(22px + env(safe-area-inset-bottom)))}
 .review-body .detail-note{font-size:16px;line-height:1.74}
}
@media(max-width:350px){
 .review-hero{align-items:start;gap:12px}
 .review-cover-frame{width:37%}
 .review-heading h2{font-size:22px}
 .review-rating-stars{font-size:13px}
}
@media(prefers-reduced-motion: reduce){body{transition:none}}