@font-face{font-family:"Grenze Gotisch";src:url(/fonts/grenze-gotisch.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Lexend";src:url(/fonts/lexend.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Bangers";src:url(/fonts/bangers.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--night:#0E1613;--night2:#0A100D;--moss:#18241F;--moss2:#22332C;--moss3:#2E4239;--paper:#EFE4C6;--paper2:#E4D5AC;--ink:#121512;--pump:#FF8A1F;--pump2:#E0701A;--mint:#A6F2CF;--candle:#FFD27A;--text:#EDE6D2;--mute:#A9B5AA;
--g:"Grenze Gotisch",Georgia,serif;--s:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;--b:"Bangers","Impact","Arial Narrow",sans-serif;--r:6px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--night);color:var(--text);font:400 16px/1.6 var(--s);padding-bottom:96px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--candle)}a:hover{color:var(--pump)}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:4px}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--candle);color:var(--ink);padding:8px 14px;z-index:99;border-radius:4px}.skip:focus{left:8px}
/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(14,22,19,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid #000}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:62px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.lg{width:38px;height:38px;flex:none}
.wm{font:700 26px/1 var(--g);letter-spacing:.01em;color:var(--text)}.wm b{font:400 22px/1 var(--b);letter-spacing:.06em;color:var(--pump);margin-left:6px}
.nav{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--text);text-decoration:none;font:400 17px/1 var(--b);letter-spacing:.06em;padding:9px 11px;border-radius:4px;white-space:nowrap}
.nav a:hover{background:var(--moss2);color:var(--candle)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:2.5px solid #000;background:var(--paper);color:var(--ink);font:400 19px/1 var(--b);letter-spacing:.06em;padding:11px 18px;border-radius:var(--r);text-decoration:none;box-shadow:3px 3px 0 #000;transition:transform .12s,box-shadow .12s}
.btn svg{width:13px;height:13px;fill:currentColor}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000;color:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn.main{background:var(--pump);color:#1A0E02}
.btn.line{background:transparent;color:var(--text);border-color:var(--text);box-shadow:3px 3px 0 #000}.btn.line:hover{color:var(--candle);border-color:var(--candle)}
.btn.big{font-size:22px;padding:14px 22px}
.btn.sm{font-size:16px;padding:8px 12px;box-shadow:2px 2px 0 #000}
/* stars */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#F4EBCF;opacity:.7;animation:tw 4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:.9}}
/* comic caption */
.cap-box{display:inline-block;background:var(--candle);color:var(--ink);border:2.5px solid #000;box-shadow:3px 3px 0 #000;font:500 14px/1.3 var(--s);letter-spacing:.04em;text-transform:uppercase;padding:7px 12px;margin:0 0 18px;transform:rotate(-1deg)}
/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(80% 70% at 78% 18%,#1F332A 0%,var(--night) 60%),var(--night);padding:48px 0 60px;border-bottom:3px solid #000}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(166,242,207,.06) 1px,transparent 1.4px);background-size:7px 7px;pointer-events:none}
.hero-g{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{margin:0;font:800 clamp(52px,7.6vw,104px)/.9 var(--g);letter-spacing:-.005em;color:var(--text)}
.hero h1 span{display:block}
.hero h1 .h1a{color:var(--mint)}.hero h1 .h1b{padding-left:.55em;color:var(--text)}.hero h1 .h1c{color:var(--pump)}
.hero h1 em{font-style:normal;font:400 .62em/1 var(--b);letter-spacing:.04em;color:var(--candle);-webkit-text-stroke:0;vertical-align:.08em}
.lede{font-size:18px;max-width:560px;color:var(--text);margin:22px 0 0}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:28px 0 0;color:var(--mute);font-size:15px}
.facts b{color:var(--text);font-weight:600}
.facts li:first-child b{color:var(--candle);font:400 19px/1 var(--b);letter-spacing:.06em}
.panel-frame{position:relative;background:var(--paper);border:3px solid #000;box-shadow:8px 8px 0 #000;padding:12px;transform:rotate(.8deg)}
.panel-cap{margin:10px 2px 0;color:var(--ink);font:500 13px/1.3 var(--s);text-transform:uppercase;letter-spacing:.06em}
.house{position:relative;aspect-ratio:400/440;background:linear-gradient(#0B1310,#16241D 70%,#18241F);border:2.5px solid #000;overflow:hidden}
.house-svg{position:absolute;inset:0;width:100%;height:100%}
.win{position:absolute;border:2px solid #000;border-radius:2px;padding:0;background:
 linear-gradient(90deg,transparent calc(50% - 1.5px),#120A02 calc(50% - 1.5px),#120A02 calc(50% + 1.5px),transparent calc(50% + 1.5px)),
 linear-gradient(transparent calc(50% - 1.5px),#120A02 calc(50% - 1.5px),#120A02 calc(50% + 1.5px),transparent calc(50% + 1.5px)),
 radial-gradient(circle at 50% 60%,#C46A1A,#6E3A0E);transition:filter .2s,box-shadow .2s}
.win.attic{border-radius:50%}
.win.door{border-radius:18px 18px 0 0;background:linear-gradient(90deg,transparent 46%,#120A02 46%,#120A02 54%,transparent 54%),radial-gradient(circle at 50% 30%,#B85F17,#5A2E0A)}
.win:hover,.win:focus-visible{filter:brightness(1.45);box-shadow:0 0 18px 4px rgba(255,170,60,.55)}
.win.lit{filter:brightness(1.7) saturate(1.2);box-shadow:0 0 26px 8px rgba(255,170,60,.65);animation:flick 2.6s infinite}
@keyframes flick{0%,100%{filter:brightness(1.7)}42%{filter:brightness(1.35)}46%{filter:brightness(1.8)}70%{filter:brightness(1.5)}}
.wl{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:var(--candle);color:var(--ink);border:2px solid #000;font:400 15px/1 var(--b);letter-spacing:.05em;padding:5px 8px;box-shadow:2px 2px 0 #000;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
.win:hover .wl,.win:focus-visible .wl{opacity:1}
.ghost{animation:drift 7s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}
.bat{transform-box:fill-box;transform-origin:center;animation:flap .5s ease-in-out infinite alternate}
.bats{animation:batfly 16s linear infinite}
@keyframes flap{to{transform:scaleY(.4)}}
@keyframes batfly{0%{transform:translate(0,0)}50%{transform:translate(-30px,10px)}100%{transform:translate(0,0)}}
/* sections */
.sec{padding:72px 0;position:relative}
.sec-h{max-width:760px;margin:0 0 34px}
.kick{font:400 18px/1 var(--b);letter-spacing:.08em;color:var(--pump);margin:0 0 10px}
.sec-h h2,.libh h1{font:800 clamp(34px,4.6vw,54px)/1 var(--g);margin:0 0 12px;color:var(--text)}
.sec-h p{color:var(--mute);margin:0;font-size:17px}
.band{background:var(--moss);border-top:3px solid #000;border-bottom:3px solid #000}
/* issue covers */
.issues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 22px}
@media (max-width:1180px){.issues{grid-template-columns:repeat(3,minmax(0,1fr))}.issue:last-child{grid-column:2}}
@media (max-width:820px){.issues{grid-template-columns:repeat(2,minmax(0,1fr))}.issue:last-child{grid-column:auto}}
.cover{position:relative;height:100%;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:3px solid #000;box-shadow:6px 6px 0 #000;padding:0 12px 14px;
 background-image:radial-gradient(rgba(18,21,18,.13) 1px,transparent 1.3px);background-size:6px 6px;transition:transform .15s,box-shadow .15s}
.issue:nth-child(odd) .cover{transform:rotate(-.6deg)}.issue:nth-child(even) .cover{transform:rotate(.5deg)}
.cover:hover{transform:rotate(0) translate(-2px,-3px);box-shadow:9px 10px 0 #000}
.c-top{display:flex;justify-content:space-between;align-items:center;margin:0 -12px 12px;padding:8px 12px;background:var(--c);border-bottom:3px solid #000}
.c-mast{font:800 21px/1 var(--g);letter-spacing:.01em}.c-no{font:400 18px/1 var(--b);letter-spacing:.06em}
.c-price{position:absolute;top:30px;right:-14px;z-index:2;width:62px;height:62px;display:grid;place-items:center;background:var(--candle);color:var(--ink);font:400 15px/1 var(--b);letter-spacing:.04em;transform:rotate(14deg);
 clip-path:polygon(50% 0,61% 18%,82% 10%,80% 32%,100% 40%,85% 55%,96% 76%,74% 78%,68% 100%,50% 87%,32% 100%,26% 78%,4% 76%,15% 55%,0 40%,20% 32%,18% 10%,39% 18%)}
.c-art{border:3px solid #000;background:#000}
.c-art img{width:100%;aspect-ratio:1;object-fit:cover}
.c-sfx{margin:10px 0 0;font:400 25px/1 var(--b);letter-spacing:.05em;color:var(--c);-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000;transform:rotate(-4deg);transform-origin:left}
.c-h{margin:6px 0 4px;font:800 27px/1 var(--g)}
.c-h a{color:var(--ink);text-decoration:none}.c-h a:hover{color:#9A4300}
.c-h a::after{content:"";position:absolute;inset:0;z-index:1}
.c-cap{margin:0;font-size:14.5px;line-height:1.45;color:#3A3A30}
.c-n{margin:8px 0 12px;font:500 13px/1 var(--s);text-transform:uppercase;letter-spacing:.06em;color:#5A5A48}
.c-b{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;position:relative;z-index:2}
.issues .c-b .btn{font-size:14.5px;padding:7px 9px}
/* trick or treat */
.tot{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:stretch}
.tot-ask,.tot-res{position:relative;background:var(--paper);color:var(--ink);border:3px solid #000;box-shadow:6px 6px 0 #000;padding:26px;background-image:radial-gradient(rgba(18,21,18,.12) 1px,transparent 1.3px);background-size:6px 6px}
.tot-k{margin:0;font:500 14px/1 var(--s);text-transform:uppercase;letter-spacing:.08em;color:#6A4A1A}
.tot-q{margin:8px 0 6px;font:800 48px/1 var(--g)}
.tot-sub{margin:0 0 20px;color:#3A3A30}
.tot-b,.tot-mini{display:flex;gap:14px;flex-wrap:wrap}
.tbtn{border:3px solid #000;box-shadow:4px 4px 0 #000;font:400 30px/1 var(--b);letter-spacing:.06em;padding:14px 26px;border-radius:50% 50% 46% 54%/60% 60% 40% 40%;transition:transform .12s,box-shadow .12s}
.tbtn:hover{transform:translate(-1px,-2px) rotate(-2deg);box-shadow:6px 6px 0 #000}.tbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.tbtn.trick{background:#1C2B24;color:var(--mint)}.tbtn.treat{background:var(--pump);color:#1A0E02}
.tbtn.sm{font-size:20px;padding:10px 16px}
.tot-res{display:flex;align-items:center;min-height:250px}
.tot-res.trick{background-color:#DDEFE4}.tot-res.treat{background-color:#F6DDBA}
.tot-sfx{position:absolute;top:-22px;right:18px;margin:0;font:400 46px/1 var(--b);letter-spacing:.04em;color:var(--candle);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000;transform:rotate(8deg)}
.tot-res.trick .tot-sfx{color:var(--mint)}
.tot-sfx.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:rotate(8deg) scale(.2);opacity:0}100%{transform:rotate(8deg) scale(1);opacity:1}}
.tot-card{display:flex;gap:20px;align-items:center;width:100%}
.tot-card img{width:150px;height:150px;border:3px solid #000;flex:none}
.tot-info h4{margin:2px 0 4px;font:800 32px/1 var(--g)}.tot-info p{margin:0 0 10px;color:#3A3A30}
.tot-kind{font:400 17px/1 var(--b)!important;letter-spacing:.06em;color:#9A4300!important}
.tot-empty{margin:0;font:800 28px/1.1 var(--g);color:#5A5A48;display:flex;align-items:center;gap:20px}.tot-empty svg{width:120px;height:150px;flex:none}
/* specials */
.spcs{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.spc{display:flex;align-items:center;gap:16px;background:var(--moss);border:3px solid #000;box-shadow:5px 5px 0 #000;padding:14px 18px 14px 0;overflow:hidden}
.spc-a{flex:1;display:grid;grid-template-columns:140px 1fr 1.1fr;gap:18px;align-items:center;text-decoration:none;color:var(--text);min-width:0}
.spc-len{align-self:stretch;display:grid;place-items:center;background:var(--c);color:var(--ink);font:400 30px/1 var(--b);letter-spacing:.05em;border-right:3px solid #000;margin:-14px 0;padding:14px 6px}
.spc-l b{display:block;font:800 28px/1 var(--g);color:var(--text)}.spc-l span{color:var(--mute);font-size:14px}
.spc-best{color:var(--mute);font-size:14.5px}
.spc-a:hover .spc-l b{color:var(--candle)}
/* rules */
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rule{background:var(--paper);color:var(--ink);border:3px solid #000;box-shadow:5px 5px 0 #000;padding:20px}
.rule .rn{margin:0 0 6px;font:400 15px/1 var(--b);letter-spacing:.08em;color:#9A4300}
.rule h3{margin:0 0 8px;font:800 30px/1 var(--g)}
.rule ul{margin:0;padding-left:18px}.rule li{margin:3px 0}
.rule.n{background:#F2CFC0}.rule.y{background:#DDEFE4}
.credit{margin-top:12px}
.cv-tabs{display:flex;gap:6px;margin-bottom:8px}
.cv-tabs button{border:2px solid #000;background:transparent;padding:4px 10px;font:500 13px/1 var(--s);border-radius:4px}
.cv-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cv-text{display:block;background:#fff8e6;border:2px dashed #000;padding:8px 10px;font:500 13.5px/1.4 ui-monospace,Menlo,monospace;margin-bottom:10px;word-break:break-word}
/* faq */
.qs{display:grid;gap:10px;max-width:880px}
.qs details{background:var(--moss);border:2.5px solid #000;box-shadow:4px 4px 0 #000;padding:0 18px}
.qs summary{cursor:pointer;font:700 25px/1.2 var(--g);padding:14px 0;list-style:none;color:var(--text)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::before{content:"+";display:inline-block;width:24px;font:400 22px/1 var(--b);color:var(--pump)}
.qs details[open] summary::before{content:"–"}
.qs p{margin:0 0 16px;color:var(--mute)}
/* footer */
.foot{background:var(--night2);border-top:3px solid #000;padding:52px 0 36px;color:var(--mute);font-size:14.5px}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.foot h2{font:400 18px/1 var(--b);letter-spacing:.08em;color:var(--pump);margin:4px 0 12px}
.foot ul{list-style:none;padding:0;margin:0}.foot li{margin:6px 0}
.foot a{color:var(--text);text-decoration:none}.foot a:hover{color:var(--candle)}
.foot .fine{grid-column:1/-1;border-top:1px solid var(--moss3);padding-top:18px;margin:8px 0 0;font-size:13px}
/* playlist pages */
.plhead{position:relative;overflow:hidden;padding:40px 0 56px;border-bottom:3px solid #000;background:radial-gradient(70% 80% at 85% 10%,#1F332A,var(--night) 65%)}
.plh-g{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.plhead h1{font:800 clamp(44px,6vw,80px)/.95 var(--g);margin:0;color:var(--text)}
.crumbs{font-size:14px;color:var(--mute);margin:0 0 16px}.crumbs a{color:var(--mute)}.crumbs a:hover{color:var(--candle)}
.best{margin:18px 0 0;max-width:580px;color:var(--text);font-size:15.5px}.best span{display:inline-block;font:400 16px/1 var(--b);letter-spacing:.06em;background:var(--c);color:var(--ink);border:2px solid #000;padding:4px 8px;margin-right:10px}
.cv4{transform:rotate(-1deg)}
.covgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.covgrid img{border:2.5px solid #000;aspect-ratio:1;width:100%}
.c-sfx.big{position:absolute;z-index:3;top:-26px;left:-14px;margin:0;font-size:42px;color:var(--c);transform:rotate(-8deg)}
.pl-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:44px;padding-bottom:20px}
.sec-pl{margin:0 0 44px;min-width:0}
.sec-pl h2{font:800 36px/1 var(--g);margin:0 0 18px}
.side h2{font-size:30px}.side .mt{margin-top:30px}.side p{color:var(--mute);margin:0 0 12px}
.nextc{display:block;background:var(--paper);color:var(--ink);border:3px solid #000;box-shadow:5px 5px 0 #000;padding:12px;text-decoration:none}
.nextc .c-no{display:block;background:var(--c);margin:-12px -12px 10px;padding:7px 12px;border-bottom:3px solid #000}
.nextc img{border:2.5px solid #000}
.nextc b{display:block;font:800 28px/1 var(--g);margin:10px 0 4px}.nextc span{font-size:14px;color:#3A3A30}
.nextc:hover{color:var(--ink)}.nextc:hover b{color:#9A4300}
.total{color:var(--mute);font-size:14.5px;margin:14px 0 0}
/* track rows */
.trs{list-style:none;margin:0;padding:0;border:3px solid #000;box-shadow:5px 5px 0 #000;background:var(--moss)}
.tr{display:flex;align-items:center;gap:12px;padding:6px 12px 6px 6px;border-bottom:1.5px solid #0A100D}
.tr:last-child{border-bottom:0}
.tr.on{background:var(--moss3)}.tr.on .tt b{color:var(--pump)}
.tp{flex:1;display:flex;align-items:center;gap:12px;background:none;border:0;padding:4px;text-align:left;min-width:0;border-radius:4px}
.tp:hover .tt b{color:var(--candle)}
.tp .n{width:24px;text-align:right;font:400 16px/1 var(--b);color:var(--mute);letter-spacing:.04em;flex:none}
.tp img{width:40px;height:40px;border:1.5px solid #000;flex:none}
.tt{display:flex;flex-direction:column;min-width:0}.tt b{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt span{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d{font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.dl{font:400 15px/1 var(--b);letter-spacing:.06em;color:var(--ink);background:var(--candle);border:2px solid #000;padding:6px 8px;border-radius:4px;text-decoration:none;flex:none}.dl:hover{background:var(--pump);color:var(--ink)}
.rel{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rel a{display:flex;flex-direction:column;gap:3px;background:var(--moss);border:2.5px solid #000;border-left:10px solid var(--c);box-shadow:3px 3px 0 #000;padding:10px 14px;text-decoration:none;color:var(--text)}
.rel a:hover b{color:var(--candle)}
.rno{font:400 14px/1 var(--b);letter-spacing:.06em;color:var(--mute)}.rel b{font:800 22px/1.05 var(--g)}.rel a>span:last-child{font-size:13px;color:var(--mute)}
/* library */
.pg-lib main{padding-top:30px;padding-bottom:40px}
.libh{margin-top:6px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 18px}
.search{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border:3px solid #000;box-shadow:3px 3px 0 #000;padding:0 12px;border-radius:var(--r)}
.search input{flex:1;border:0;background:transparent;font:400 16px/1 var(--s);padding:12px 0;color:var(--ink);min-width:0}.search input:focus{outline:none}
.search:focus-within{outline:3px solid var(--mint);outline-offset:2px}
.matches{color:var(--mute);font-size:14px}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 30px}
.jump a{font-size:13px;color:var(--text);background:var(--moss);border:1.5px solid #000;padding:4px 9px;border-radius:4px;text-decoration:none}.jump a:hover{color:var(--candle)}
.rec{margin:0 0 36px}
.rec-h{display:flex;gap:18px;align-items:center;margin:0 0 14px}
.rec-h img{width:110px;height:110px;border:3px solid #000;box-shadow:4px 4px 0 #000}
.rec-h h2{font:800 34px/1 var(--g);margin:0 0 4px}.rec-h p{margin:0 0 10px;color:var(--mute);font-size:14px}
.none{color:var(--mute);font-size:18px}
/* 404 */
.nf{padding:70px 0 80px}.nf .rel{margin:26px 0}
/* player bar */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.4fr) auto;gap:18px;align-items:center;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:#070B09;border-top:3px solid var(--pump);box-shadow:0 -6px 24px rgba(0,0,0,.5)}
.pb-now{display:flex;align-items:center;gap:12px;min-width:0}
.pb-now img{width:48px;height:48px;border:2px solid #000;flex:none}
.pb-tx{display:flex;flex-direction:column;min-width:0;gap:3px}
.pb-cap{align-self:flex-start;max-width:100%;background:var(--candle);color:var(--ink);font:500 11px/1.2 var(--s);text-transform:uppercase;letter-spacing:.05em;padding:3px 6px;border:1.5px solid #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-tx b{font:800 21px/1 var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-ctl{display:flex;align-items:center;gap:8px}
.ib{width:40px;height:40px;display:grid;place-items:center;background:var(--moss);border:2px solid #000;border-radius:50%;color:var(--text)}
.ib svg{width:13px;height:13px;fill:currentColor}.ib:hover{color:var(--candle);background:var(--moss2)}
.ib[aria-pressed="true"]{background:var(--mint);color:var(--ink)}
.pp{position:relative;width:58px;height:58px;padding:0;border:0;background:none;display:grid;place-items:center}
.jack{position:absolute;inset:0}.jack svg{width:100%;height:100%;display:block}
.jack .face{fill:#3A1C05;transition:fill .3s}
.playing .jack .face{fill:#FFE08A;filter:drop-shadow(0 0 4px #FFB347);animation:candle 1.8s infinite}
@keyframes candle{0%,100%{opacity:1}40%{opacity:.82}55%{opacity:1}75%{opacity:.9}}
.ppi{position:relative;z-index:2;width:22px;height:22px;display:grid;place-items:center;background:rgba(7,11,9,.85);border-radius:50%;margin-top:8px}
.ppi svg{width:10px;height:10px;fill:var(--candle)}
.pp:hover .jack{filter:brightness(1.15)}
.pb-seek{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.pb-seek input{flex:1;accent-color:var(--pump);min-width:0}
.pb-x{display:flex;align-items:center;gap:10px}
.dlb{display:inline-flex;align-items:center;gap:6px;font:400 17px/1 var(--b);letter-spacing:.06em;color:var(--ink);background:var(--candle);border:2px solid #000;padding:9px 12px;border-radius:var(--r);text-decoration:none}.dlb svg{width:12px;height:12px;fill:currentColor}.dlb:hover{background:var(--pump);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);background:var(--paper);color:var(--ink);border:2.5px solid #000;box-shadow:3px 3px 0 #000;padding:9px 14px;font-size:14.5px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* responsive */
@media (max-width:1000px){
 .hero-g,.plh-g{grid-template-columns:1fr;gap:34px}
 .hero-r{max-width:520px}
 .plh-r{max-width:420px}
 .pl-body{grid-template-columns:minmax(0,1fr)}
 .tot{grid-template-columns:1fr}
 .rules{grid-template-columns:1fr}
 .foot .wrap{grid-template-columns:1fr 1fr}
 .spc-a{grid-template-columns:110px 1fr}.spc-best{display:none}
 .pbar{grid-template-columns:minmax(0,1fr) auto auto;gap:12px}
 .pb-seek{grid-column:1/-1;order:5}
}
@media (max-width:640px){
 body{padding-bottom:132px}
 .wrap{padding:0 16px}
 .top .wrap{height:56px}
 .wm{font-size:22px}.wm b{font-size:19px}
 .nav a:not([href="/library/"]):not([href="/#issues"]){display:none}
 .nav a{font-size:16px;padding:8px}
 .hero{padding:30px 0 44px}
 .lede{font-size:16.5px}
 .btn.big{font-size:19px;padding:12px 16px}
 .issues{gap:18px}
 .cover{padding:0 9px 11px}.c-top{margin:0 -9px 10px;padding:7px 9px}.c-mast{font-size:15px}.c-no{font-size:15px}
 .c-price{width:48px;height:48px;font-size:12px;top:26px;right:-10px}
 .c-h{font-size:23px}.c-cap{font-size:13px}.c-sfx{font-size:19px}
 .c-b .btn:not(.main){display:none}
 .tot-ask,.tot-res{padding:20px}.tot-q{font-size:40px}
 .tot-card{flex-direction:column;align-items:flex-start}.tot-card img{width:120px;height:120px}
 .spc{flex-wrap:wrap;padding:0 0 12px}.spc-a{grid-template-columns:1fr;gap:8px}.spc-len{margin:0;border-right:0;border-bottom:3px solid #000;justify-items:start;padding:10px 14px}
 .spc-l{padding:0 14px}.spc .btn{margin-left:14px}
 .foot .wrap{grid-template-columns:1fr}
 .pbar{padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}
 .pb-tx b{font-size:18px}.pb-now img{width:42px;height:42px}
 .ib{width:36px;height:36px}.pp{width:52px;height:52px}
 .pb-x .dlb span{display:none}.pb-x #pb-shuf{display:none}
 .pb-ctl #pb-prev{display:none}
 .rec-h img{width:84px;height:84px}
 .tr .d{display:none}
 .c-sfx.big{font-size:32px;top:-20px;left:-6px}
 .wl{display:none}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
}