:root{--red:#e01c1c;--cream:#efe6d2;--mute:#9a9183;--bg:#0b0b0b;--panel:#151515;--line:#2a2a2a;--wood:#6b4423;--wood2:#3b2412;--bar:52px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--cream);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.btn{display:inline-flex;align-items:center;gap:6px;background:#1d1d1d;color:var(--cream);border:1px solid #333;border-radius:8px;padding:8px 14px;text-decoration:none;font-weight:600;white-space:nowrap}
.btn:hover{border-color:#555}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#ff2b2b}

/* top bar */
#bar{position:fixed;top:0;left:0;right:0;height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;z-index:20;display:flex;align-items:center;gap:14px;background:rgba(8,8,8,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{font:26px Anton,Impact,"Arial Black",sans-serif;letter-spacing:1px;text-decoration:none;color:#fff;white-space:nowrap}
.brand b{color:var(--red);font-weight:400}
.brand span{font-size:15px;letter-spacing:3px;color:var(--cream);margin-left:4px}
.clock{font-size:13px;color:var(--mute);white-space:nowrap}
.clock b{color:#fff;font-size:15px}
.clock .st{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:9px;font-weight:700;font-size:12px;letter-spacing:1px}
.clock .st.open{background:#123d1f;color:#4fe07c}.clock .st.closed{background:#3d1212;color:#ff6b6b}
.live{display:inline-flex;align-items:center;gap:7px;background:#3d0808;border:1px solid var(--red);color:#fff;border-radius:999px;padding:5px 12px;font-weight:800;font-size:12px;letter-spacing:1.5px;text-decoration:none;white-space:nowrap}
.live i{width:9px;height:9px;border-radius:50%;background:#ff3030;box-shadow:0 0 8px #ff3030;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.35}}
.grow{flex:1}
main{padding-top:calc(var(--bar) + env(safe-area-inset-top))}

/* storefront */
#front{position:relative;height:calc(100vh - var(--bar) - env(safe-area-inset-top));height:calc(100dvh - var(--bar) - env(safe-area-inset-top));background:#050505;overflow:hidden}
#frontScroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;display:flex;align-items:center;justify-content:center}
#frontScroll::-webkit-scrollbar{display:none}
#frontInner{position:relative;flex:none}
#storeCv{display:block;width:100%;height:100%}
#doorHint{position:absolute;transform:translate(-50%,0);background:rgba(0,0,0,.75);border:1px solid var(--red);color:#fff;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.5px;pointer-events:none;white-space:nowrap;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.55;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,-4px)}}
#tip{position:absolute;pointer-events:none;background:rgba(0,0,0,.85);border:1px solid #444;border-radius:6px;padding:4px 8px;font-size:12px;max-width:260px;transform:translate(-50%,-120%);white-space:normal}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:22px Anton,Impact,"Arial Black",sans-serif;letter-spacing:2px;color:var(--mute);background:#050505;transition:opacity .8s}
#loading.gone{opacity:0;pointer-events:none}

/* inside the store */
#inside{max-width:1500px;margin:0 auto;padding:18px 16px 40px}
.insideTop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.insideTop h1{margin:0;font:30px Anton,Impact,"Arial Black",sans-serif;letter-spacing:1px;color:#fff;text-shadow:0 0 18px rgba(224,28,28,.55)}
#search{flex:1;min-width:220px;background:#161616;border:1px solid #333;color:var(--cream);border-radius:10px;padding:11px 14px;font:inherit}
#search:focus{outline:none;border-color:var(--red)}
.aisle{margin:34px 0 10px}
.sign{display:flex;justify-content:center;margin-bottom:-14px;position:relative;z-index:2}
.sign span{background:#0b0b0b;border:3px solid var(--red);border-radius:7px;padding:4px 18px;font:22px Anton,Impact,"Arial Black",sans-serif;letter-spacing:2.5px;color:#fff;text-shadow:0 0 10px rgba(255,60,60,.8);box-shadow:0 0 18px rgba(224,28,28,.45)}
.shelf{position:relative;background:linear-gradient(#1a0f08,#0f0805);border:10px solid var(--wood);border-image:linear-gradient(#8a5a30,#5a3618) 1;padding:26px 6px 0;box-shadow:inset 0 10px 30px rgba(0,0,0,.8)}
.shelf::before{content:"";position:absolute;left:12%;right:12%;top:6px;height:3px;border-radius:2px;background:#fff6dc;box-shadow:0 0 18px 4px rgba(255,236,190,.55)}
.row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 46px 0;scrollbar-width:thin;scrollbar-color:#5a3618 transparent}
.row::after{content:"";flex:0 0 1px}
.ledge{height:16px;background:linear-gradient(#8a5a30,#4a2c14);box-shadow:0 6px 12px rgba(0,0,0,.6)}
.case{color:var(--cream);flex:none;scroll-snap-align:start;background:none;border:0;padding:0 0 4px;cursor:pointer;position:relative}
.case img{display:block;height:230px;width:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.8));transition:transform .15s}
.case:hover img,.case:focus-visible img{transform:translateY(-8px) rotate(-1.5deg)}
.case .ph{height:230px;width:160px;background:#141414;border-radius:4px}
.case .tag{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);background:rgba(0,0,0,.85);border:1px solid #333;border-radius:9px;padding:0 7px;font-size:11px;white-space:nowrap}
.arrow{position:absolute;top:50%;z-index:3;width:38px;height:64px;margin-top:-28px;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:26px;border-radius:6px}
.arrow.l{left:4px}.arrow.r{right:4px}
#results .row{flex-wrap:wrap;overflow:visible;justify-content:center}
.foot{text-align:center;color:var(--mute);margin-top:40px;font-size:13px}

/* the 3D case */
#case{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.caseBox{position:relative;width:min(1400px,100%);height:min(900px,100%);overflow:auto;background:radial-gradient(ellipse at 30% 40%,#3b2412,#120a05 70%);border:1px solid #3a2a1a;border-radius:14px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}
.caseBox .x{position:absolute;right:10px;top:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid #444;background:#111;color:#fff;font-size:16px}
.stage{position:relative;min-height:440px;height:100%;perspective:1300px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;user-select:none}
.stage:active{cursor:grabbing}
.box{position:relative;transform-style:preserve-3d}
.box .f{position:absolute;left:50%;top:50%;backface-visibility:hidden;background-size:100% 100%;background-color:#111}
.box .f.edge{background:linear-gradient(#1b1b1b,#0c0c0c)}
.hint3d{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px;color:var(--mute)}
.info{padding:34px 26px 26px 8px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.info .cat{color:var(--red);font-weight:800;letter-spacing:2px;font-size:12px}
.info h2{margin:0;font:28px/1.1 Anton,Impact,"Arial Black",sans-serif;letter-spacing:.5px;color:#fff}
.meta{color:var(--mute);font-size:14px}
.meta b{color:var(--cream)}
.desc{white-space:pre-line;overflow-wrap:anywhere;color:#cfc6b4;font-size:14px;flex:1;min-height:80px;overflow:auto;margin:0;padding-right:6px}
.desc a{color:#ff6b6b}
.critics h3{margin:4px 0 6px;font:20px Anton,Impact,"Arial Black",sans-serif;letter-spacing:1px;color:var(--red)}
.critics blockquote{margin:0 0 10px;font:italic 15px/1.35 Georgia,"Times New Roman",serif;color:var(--cream)}
.critics cite{display:block;font:600 12px system-ui,sans-serif;font-style:normal;color:var(--mute);margin-top:3px;letter-spacing:.5px}
.critics .stars{color:#f2b134}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.play{font-size:17px;padding:12px 20px}

/* phones and small tablets */
@media (max-width:820px){
  .brand span{display:none}
  .clock{font-size:12px}
  #bar{gap:10px}
  .case img,.case .ph{height:180px}
  .row{gap:12px;padding:6px 12px 0}
  .arrow{display:none}
  .caseBox{grid-template-columns:1fr;height:auto;max-height:100%}
  .stage{min-height:60vh;height:60vh}
  .desc{flex:none;max-height:none}
  .info{padding:4px 18px 22px}
  .info h2{font-size:23px}
  .acts .btn{flex:1;justify-content:center}
}
@media (max-width:480px){
  .clock .yt,.clock .lbl{display:none}
  .brand{font-size:22px}
  #bar{padding-left:10px;padding-right:10px}
  #goInside,#goOutside{padding:7px 11px}
  .live{padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){#doorHint,.live i{animation:none}.case img{transition:none}}

/* browse menu, full aisles */
.sel{background:#161616;border:1px solid #333;color:var(--cream);border-radius:10px;padding:10px 12px;font:inherit;max-width:100%}
.sel:focus{outline:none;border-color:var(--red)}
.sign span.link{cursor:pointer}
.sign span.link:hover{background:#1a0606}
.sign small{font:600 12px system-ui,sans-serif;letter-spacing:.5px;color:#ffb3b3;margin-left:10px;vertical-align:middle}
.fullHead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 30px}
.fullHead h2{margin:0;font:30px Anton,Impact,"Arial Black",sans-serif;letter-spacing:1px;color:#fff}
.fullHead .n{color:var(--mute)}
.gridShelf{margin-bottom:6px}
.gridShelf .shelf{padding-top:18px}
.gridShelf .row{overflow:visible;justify-content:center;flex-wrap:nowrap;padding:6px 12px 0}
.gridShelf .shelf::before{display:none}
.gridShelf:first-of-type .shelf::before{display:block}
/* zooming the case */
.stage{overflow:hidden}
.zoomBtns{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.zoomBtns button{min-width:38px;height:38px;border-radius:19px;border:1px solid #444;background:rgba(0,0,0,.65);color:#fff;font-size:18px;padding:0 12px}
.zoomBtns #zFlip{font-size:13px;font-weight:700;letter-spacing:1px}
@media (max-width:820px){.insideTop .sel{flex:1 1 100%}.fullHead h2{font-size:24px}}

/* ===== the openable case ===== */
.caseBox{display:flex;flex-direction:column;grid-template-columns:none;height:min(920px,100%);width:min(1500px,100%)}
.stage{flex:1;min-height:0;height:auto}
.box .f{background-size:100% 100%}
.box.anim{transition:transform 1s cubic-bezier(.45,.05,.2,1)}
.lid{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform-origin:0 50%;transition:transform 1.05s cubic-bezier(.45,.05,.2,1)}
.lf{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lf.front{background-size:100% 100%;background-color:#111}
.lf.inside{transform:rotateY(180deg);transform-style:preserve-3d;background:linear-gradient(90deg,#0b0b0b,#1d1d1d 80%,#121212);border-radius:3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.05);padding:5% 6% 10%}
.box .f.tray{background:radial-gradient(circle at 50% 46%,#262626 0 30%,#141414 31% 60%,#0b0b0b 100%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),inset 0 0 40px rgba(0,0,0,.8)}
.hub{position:absolute;left:50%;top:46%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(#1c1c1c 0 15deg,#2c2c2c 15deg 30deg);box-shadow:0 0 0 3px #111}
.disc{position:relative;width:86%;aspect-ratio:1;margin-top:-8%;border-radius:50%;overflow:hidden;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.12);background:#bbb}
.disc .art{position:absolute;inset:0;background-size:cover;background-position:center}
.disc .label{position:absolute;left:14%;right:14%;bottom:12%;text-align:center;color:#fff;text-shadow:0 1px 4px #000;font:700 clamp(9px,2.2cqi,15px)/1.2 system-ui,sans-serif;container-type:inline-size}
.disc .label b{display:block;font:400 1.5em Anton,Impact,sans-serif;letter-spacing:1px}
.disc .label b i{color:#ff2b2b;font-style:normal}
.disc .label span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:4px}
.disc .sheen{position:absolute;inset:0;background:conic-gradient(from 20deg,rgba(255,0,80,.25),rgba(255,220,0,.2),rgba(0,255,160,.25),rgba(0,140,255,.25),rgba(200,0,255,.25),rgba(255,0,80,.25));mix-blend-mode:screen;opacity:.55}
.disc .hole{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#0e0e0e 0 22%,rgba(220,225,230,.85) 23% 40%,rgba(255,255,255,.25) 41% 100%);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
@keyframes discspin{to{transform:rotate(360deg)}}
.disc:hover{animation:discspin 5s linear infinite}
.tape{position:relative;width:88%;aspect-ratio:1.6;margin-top:-6%;background:linear-gradient(#1b1b1b,#0c0c0c);border-radius:6px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,255,255,.08)}
.tape .tlabel{position:absolute;left:8%;right:8%;top:8%;height:34%;background:#f2ece0;color:#111;border-radius:3px;padding:3% 4%;font:700 12px/1.2 system-ui,sans-serif;overflow:hidden}
.tape .tlabel b{display:block;font:400 16px Anton,Impact,sans-serif}.tape .tlabel b i{color:#e8000d;font-style:normal}
.tape .reels{position:absolute;left:18%;right:18%;bottom:14%;height:30%;background:rgba(255,255,255,.08);border-radius:30px;display:flex;justify-content:space-between;align-items:center;padding:0 6%}
.tape .reels i{width:26%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#ddd 0 20deg,#888 20deg 60deg)}
.tape:hover .reels i{animation:discspin 3s linear infinite}
/* the booklet */
.booklet{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.page{position:absolute;inset:0;background:linear-gradient(100deg,#e9e2d1,#f6f1e5 12%,#f3eee2);color:#1b1712;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.55);transform-origin:0 50%;transition:transform .75s cubic-bezier(.45,.05,.3,1),opacity .2s .5s;backface-visibility:hidden;-webkit-backface-visibility:hidden;cursor:pointer;user-select:none}
.page.gone{transform:rotateY(-170deg);opacity:0;pointer-events:none}
.pin{position:absolute;left:7%;right:7%;top:6%;bottom:9%;overflow:hidden;font:calc(var(--u)*2.15)/1.42 Georgia,"Times New Roman",serif}
.pfoot{position:absolute;bottom:3%;left:0;right:0;text-align:center;font:600 calc(var(--u)*1.5) system-ui,sans-serif;color:#8a7f6c}
.ptop{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #e8000d;padding-bottom:calc(var(--u)*.8);margin-bottom:calc(var(--u)*1.6);font:600 calc(var(--u)*1.5) system-ui,sans-serif;letter-spacing:1px;color:#6b6152}
.ptop b{font:400 calc(var(--u)*2.6) Anton,Impact,sans-serif;color:#111;letter-spacing:1px}.ptop b i{color:#e8000d;font-style:normal}
.pin h3{margin:0 0 calc(var(--u)*.9);font:400 calc(var(--u)*3.4)/1.08 Anton,Impact,"Arial Black",sans-serif;color:#111}
.pmeta{font:600 calc(var(--u)*1.6) system-ui,sans-serif;color:#6b6152;margin-bottom:calc(var(--u)*1.6)}
.pin h4{margin:calc(var(--u)*1.4) 0 calc(var(--u)*.7);font:400 calc(var(--u)*2.3) Anton,Impact,sans-serif;letter-spacing:1px;color:#c40010}
.pin blockquote{margin:0 0 calc(var(--u)*1.1);font-style:italic}
.pin cite{display:block;font:600 calc(var(--u)*1.45) system-ui,sans-serif;font-style:normal;color:#6b6152;margin-top:2px}
.pin .stars{color:#d18b00}
.pin p{margin:0 0 calc(var(--u)*.9)}
.pin a{color:#b0000e;word-break:break-all}
.pend{margin-top:calc(var(--u)*2);font:600 calc(var(--u)*1.45) system-ui,sans-serif;color:#8a7f6c;text-align:center}
.bnav{position:absolute;left:0;right:0;bottom:2.5%;display:flex;justify-content:center;align-items:center;gap:12px;color:#ddd;font:600 13px system-ui,sans-serif;transform:translateZ(3px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bnav button{width:32px;height:32px;border-radius:50%;border:1px solid #555;background:#111;color:#fff;font-size:18px;line-height:1}
.bnav button:disabled{opacity:.3}
.openBar{display:none;justify-content:center;gap:10px;padding:10px 12px 14px;flex-wrap:wrap}
.isOpen .openBar{display:flex}
.sideBtn{display:none!important}
.openHint{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#eee;font-weight:700;letter-spacing:.5px;pointer-events:none;animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:1}}
.openHint.quiet{opacity:.45;font-weight:500;animation:none}
@media (max-width:820px){
  .caseBox{height:100%;max-height:100%}
  .stage{min-height:0;height:auto}
  .sideBtn{display:inline-flex!important}
  .openBar .btn{flex:1 1 40%;justify-content:center}
}

/* ===== disc centre: the TRMZ logo printed round the spindle ===== */
.disc .label{bottom:9%}
.disc .center{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#161616 0 60%,#0a0a0a 100%);box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 18px rgba(0,0,0,.6)}
.disc .center::after{content:"";position:absolute;inset:14%;background:url(logo.png) center/contain no-repeat}
.disc .hole{width:12%;background:radial-gradient(circle,#0b0b0b 0 52%,rgba(215,220,226,.9) 54% 78%,rgba(255,255,255,.35) 80% 100%);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.tape .tlabel img{height:42%;display:block;margin-bottom:3%}
/* ===== the booklet, dressed up ===== */
.page{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,0) 6%),
  radial-gradient(ellipse at 60% 40%,#fbf7ee,#efe7d6 75%,#e4dac4);
  box-shadow:0 3px 14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.06)}
.page::before,.page::after{content:"";position:absolute;left:2.2%;width:1.4%;height:6%;border-radius:2px;background:linear-gradient(90deg,#9aa0a6,#e6e9ec,#8b9095);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.page::before{top:16%}.page::after{bottom:16%}
.phead{position:absolute;left:0;right:0;top:0;height:13%;background:linear-gradient(180deg,#141414,#070707);border-bottom:calc(var(--u)*.5) solid #e8000d;display:flex;align-items:center;gap:4%;padding:0 6% 0 7%}
.phead img{height:72%;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.phead .em{font:400 calc(var(--u)*2.1)/1.02 Anton,Impact,sans-serif;letter-spacing:.18em;color:#f2ece0}
.phead .no{margin-left:auto;font:700 calc(var(--u)*1.45) system-ui,sans-serif;letter-spacing:.15em;color:#ff5a5a;border:1px solid rgba(255,90,90,.6);border-radius:calc(var(--u)*.6);padding:calc(var(--u)*.35) calc(var(--u)*.8)}
.page.first .pin{top:17%}
.prun{position:absolute;left:7%;right:7%;top:3.5%;display:flex;align-items:center;gap:3%;padding-bottom:calc(var(--u)*.6);border-bottom:1px solid rgba(232,0,13,.5);font:600 calc(var(--u)*1.35) system-ui,sans-serif;color:#8a7f6c;letter-spacing:.06em;text-transform:uppercase}
.prun img{height:calc(var(--u)*2.4)}
.prun span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page:not(.first) .pin{top:10%}
.pin h3{font-size:calc(var(--u)*3.6);letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.pmeta{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6);margin-bottom:calc(var(--u)*1.8)}
.pmeta span{display:inline-flex;align-items:center;gap:.4em;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:.2em .7em;font:700 calc(var(--u)*1.4) system-ui,sans-serif;color:#4f473b}
.pmeta i{font-style:normal;color:#c40010}
.pin h4{display:flex;align-items:center;gap:.5em;font-size:calc(var(--u)*2.4)}
.pin h4::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#c40010,rgba(196,0,16,0))}
.pin blockquote{position:relative;margin:0 0 calc(var(--u)*1.2);padding:calc(var(--u)*.4) 0 calc(var(--u)*1) calc(var(--u)*3.4);border-bottom:1px dashed rgba(0,0,0,.15)}
.pin blockquote::before{content:"\201C";position:absolute;left:0;top:calc(var(--u)*-.6);font:400 calc(var(--u)*5.5)/1 Georgia,serif;color:#c40010;opacity:.85}
.pin blockquote p{margin:0;font-style:italic;font-size:calc(var(--u)*2.05)}
.pin cite{display:flex;align-items:center;gap:.6em;margin-top:calc(var(--u)*.5);font:600 calc(var(--u)*1.4) system-ui,sans-serif}
.pin cite b{color:#2d2720;letter-spacing:.04em}
.pin cite em{font-style:normal;color:#9a8f7c}
.pin .stars{color:#d18b00;letter-spacing:.1em}
.pin h4.about + p::first-letter{float:left;font:400 calc(var(--u)*5)/0.85 Anton,Impact,sans-serif;color:#c40010;margin:.06em .12em 0 0}
.pfoot{display:flex;justify-content:center;align-items:center;gap:.6em}
.pfoot::before,.pfoot::after{content:"";width:12%;height:1px;background:rgba(0,0,0,.2)}
.pfoot span{font:700 calc(var(--u)*1.4) system-ui,sans-serif;color:#8a7f6c}
.pend{border-top:1px solid rgba(0,0,0,.12);padding-top:calc(var(--u)*1)}
/* clips in the case holding the booklet */
.lf.inside::before,.lf.inside::after{content:"";position:absolute;left:50%;width:16%;height:2.2%;margin-left:-8%;background:linear-gradient(#2a2a2a,#111);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.7);transform:translateZ(4px);z-index:60}
.lf.inside::before{top:3.4%}.lf.inside::after{bottom:7.6%}

/* ===== booklet: link chips, scenes, credits, coupon, special features ===== */
.chip{display:inline-flex;align-items:center;gap:.35em;max-width:100%;vertical-align:middle;margin:.12em .25em .12em 0;padding:.12em .65em .12em .35em;border-radius:999px;background:#fff9ef;border:1px solid rgba(196,0,16,.35);box-shadow:0 1px 0 rgba(0,0,0,.08);text-decoration:none;color:#2d2720;font:600 calc(var(--u)*1.45)/1.4 system-ui,sans-serif;white-space:nowrap;overflow:hidden}
.chip i{font-style:normal;display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:#c40010;color:#fff;font-size:.8em}
.chip b{font-weight:800}
.chip span{color:#8a7f6c;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.chip:hover{background:#fff;border-color:#c40010}
.pin p.lead::first-letter{float:left;font:400 calc(var(--u)*5)/0.85 Anton,Impact,sans-serif;color:#c40010;margin:.06em .12em 0 0}
.pin h4.about + p::first-letter{float:none;font:inherit;color:inherit;margin:0}
.pin h4.about + p.lead::first-letter{float:left;font:400 calc(var(--u)*5)/0.85 Anton,Impact,sans-serif;color:#c40010;margin:.06em .12em 0 0}
.scene{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8em;padding:calc(var(--u)*.7) calc(var(--u)*.4);border-bottom:1px dashed rgba(0,0,0,.15);text-decoration:none;color:#2d2720}
.scene:hover{background:rgba(196,0,16,.06)}
.scene .sn{font:400 calc(var(--u)*2.6)/1 Anton,Impact,sans-serif;color:#c40010;min-width:1.6em}
.scene .sl{font:italic calc(var(--u)*1.9)/1.3 Georgia,serif}
.scene .st{font:700 calc(var(--u)*1.35) system-ui,sans-serif;color:#fff;background:#141414;border-radius:999px;padding:.2em .7em}
.pin h4.credits{justify-content:center;letter-spacing:.3em}
.pin h4.credits::before{content:"";flex:1;height:2px;background:linear-gradient(270deg,#c40010,rgba(196,0,16,0))}
.crow{display:grid;grid-template-columns:40% 1fr;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.8) 0;border-bottom:1px dotted rgba(0,0,0,.15)}
.crole{text-align:right;font:800 calc(var(--u)*1.35)/1.5 system-ui,sans-serif;letter-spacing:.14em;color:#c40010}
.cname{font:calc(var(--u)*1.9)/1.35 Georgia,serif;margin-bottom:calc(var(--u)*.5)}
.clinks{margin-top:.15em}
.coupon{margin:calc(var(--u)*1.4) 0;border:2px dashed #c40010;border-radius:calc(var(--u)*1);padding:calc(var(--u)*1.2);text-align:center;background:repeating-linear-gradient(-45deg,rgba(196,0,16,.04) 0 8px,transparent 8px 16px)}
.ctop{font:800 calc(var(--u)*1.3) system-ui,sans-serif;letter-spacing:.3em;color:#c40010}
.ccode{display:inline-block;margin:.25em 0;font:400 calc(var(--u)*4.4)/1 Anton,Impact,sans-serif;letter-spacing:.08em;color:#111;cursor:pointer;border-bottom:3px solid #c40010}
.ccode[data-copied]::after{content:" ✓ copied";font:700 calc(var(--u)*1.4) system-ui,sans-serif;color:#2a8a3a;letter-spacing:0}
.ctext{font:calc(var(--u)*1.6)/1.35 Georgia,serif;color:#4f473b;margin-bottom:.4em}
.sf{display:flex;flex-direction:column;height:100%}
.pin h4.sfh{justify-content:center;letter-spacing:.25em;margin-top:0}
.pin h4.sfh::before{content:"";flex:1;height:2px;background:linear-gradient(270deg,#c40010,rgba(196,0,16,0))}
.sfgrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1)}
.sfb{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6em;align-items:center;padding:calc(var(--u)*1) calc(var(--u)*1.1);border-radius:calc(var(--u)*1);background:#141414;color:#f2ece0;text-decoration:none;box-shadow:0 2px 0 #000,inset 0 0 0 1px rgba(255,255,255,.06)}
.sfb i{grid-row:1/3;font-style:normal;display:grid;place-items:center;width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);border-radius:50%;background:#e8000d;color:#fff;font-size:calc(var(--u)*1.7)}
.sfb.tw i{background:#7a3cff}.sfb.dc i{background:#4f5bd5}.sfb.xx i{background:#2b2b2b;border:1px solid #555}.sfb.sh i{background:#d18b00}
.sfb b{font:400 calc(var(--u)*2)/1.1 Anton,Impact,sans-serif;letter-spacing:.04em}
.sfb span{font:600 calc(var(--u)*1.25) system-ui,sans-serif;color:#a89f8e}
.sfb:hover{background:#1f1f1f}
.sfb.sh{grid-column:1/-1}
.qr{display:flex;align-items:center;gap:calc(var(--u)*1.6);margin:auto 0 0;padding:calc(var(--u)*1.2);border:1px solid rgba(0,0,0,.12);border-radius:calc(var(--u)*1);background:rgba(255,255,255,.55)}
.qrimg{width:calc(var(--u)*13);height:calc(var(--u)*13);flex:none;padding:calc(var(--u)*.6);background:#fff;border-radius:calc(var(--u)*.6)}
.qrimg svg{width:100%;height:100%;display:block}
.qrt b{display:block;font:400 calc(var(--u)*2.6)/1.05 Anton,Impact,sans-serif;color:#111}
.qrt span{font:calc(var(--u)*1.6) Georgia,serif;color:#6b6152}
.sf .pend{margin-top:calc(var(--u)*1.2)}

.pin a.chip{color:#2d2720}.pin a.sfb{color:#f2ece0}.pin a.scene{color:#2d2720}

/* ===== live: top-bar pill, banner inside, "which one?" popup ===== */
.live{display:inline-flex;align-items:center;gap:6px;background:#2a0505;border:1px solid var(--red);border-radius:999px;padding:3px 4px 3px 12px;font-size:12px}
.live .lv{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:1.5px;color:#fff;margin-right:4px}
.live .lv i,#liveBanner .lv i,.lcOn i{width:9px;height:9px;border-radius:50%;background:#ff3030;box-shadow:0 0 8px #ff3030;animation:pulse 1.2s infinite;display:inline-block}
.live a{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.5px}
.live a.tw,#liveBanner a.tw,.lcb.tw{background:#9146ff}.live a.yt,#liveBanner a.yt,.lcb.yt{background:#e01c1c}
.live a em,#liveBanner a em{font-style:normal;font-weight:600;opacity:.85}
.live a em:not(:empty)::before,#liveBanner a em:not(:empty)::before{content:"· "}
#liveBanner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,#3a0606,#1a0505);border:1px solid var(--red);box-shadow:0 0 22px rgba(224,28,28,.35)}
#liveBanner .lv{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:1px;color:#fff}
#lbTitle{flex:1;min-width:160px;color:#f2d6d6;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#liveBanner a{display:inline-flex;align-items:center;gap:5px;color:#fff;text-decoration:none;font-weight:800;border-radius:8px;padding:7px 12px}
#liveChoice{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.lcBox{position:relative;width:min(420px,100%);background:#141414;border:1px solid #3a1010;border-radius:16px;padding:26px 22px 22px;text-align:center;box-shadow:0 0 40px rgba(224,28,28,.35)}
.lcx{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid #444;background:#111;color:#fff}
.lcOn{display:inline-flex;align-items:center;gap:8px;font:800 13px system-ui,sans-serif;letter-spacing:2px;color:#ff6b6b}
.lcTitle{margin:10px 0 18px;font:22px/1.15 Anton,Impact,"Arial Black",sans-serif;color:#fff}
.lcb{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:14px 16px;border-radius:12px;color:#fff;text-decoration:none;font-size:17px}
.lcb em{font-style:normal;font-weight:600;font-size:14px;opacity:.9}
.lcb em:not(:empty)::after{content:" watching"}
.lcb:hover{filter:brightness(1.12)}
@media (max-width:480px){.live .lv{display:none}.live{padding-left:4px}}