*{box-sizing:border-box}body{margin:0;background:#07070a;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(70% 40% at 50% 0%,rgba(224,30,43,.22),transparent 70%)}
a{color:#ff6a64}.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;flex-wrap:wrap}
.top img{height:56px;width:auto}.btn{display:inline-flex;gap:6px;align-items:center;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:#141414;color:#fff;text-decoration:none;font-weight:700}
.btn:hover{border-color:#e01e2b;box-shadow:0 0 16px rgba(224,30,43,.5)}
h1.shelf-title{font-size:clamp(1.6rem,5vw,2.6rem);margin:10px 0 4px;letter-spacing:.04em}.sub{color:#aaa;margin:0 0 20px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-rows:296px;gap:46px 16px;padding:30px 10px 40px;perspective:1200px;
background:repeating-linear-gradient(to bottom,transparent 0,transparent 318px,#2a1a12 318px,#3b2618 334px,#000 334px,#000 342px)}
@media(max-width:600px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr));padding:30px 0 40px}.box{--w:130px;--h:182px;--d:26px}.shelf{grid-auto-rows:262px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 284px,#2a1a12 284px,#3b2618 300px,#000 300px,#000 308px)}}
.item{text-decoration:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px}
.box{--w:150px;--h:210px;--d:30px;width:var(--w);height:var(--h);position:relative;transform-style:preserve-3d;transform:rotateY(22deg) rotateX(2deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.item:hover .box,.item:focus-visible .box{transform:rotateY(48deg) rotateX(4deg) translateY(-6px)}
.box .front,.box .spine,.box .back{position:absolute;top:0;height:100%}
.box .front{width:100%;left:0;transform:translateZ(calc(var(--d)/2));box-shadow:0 18px 30px rgba(0,0,0,.6)}
.box .front img{width:100%;height:100%;display:block}
.box .front::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.18),transparent 40%)}
.box .back{width:100%;left:0;background:#111;transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.box .spine{width:var(--d);left:calc(50% - var(--d)/2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:var(--spine,#e01e2b);display:flex;align-items:center;justify-content:center}
.box .spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;font-size:12px;letter-spacing:.1em;color:#000;white-space:nowrap;overflow:hidden;max-height:95%}
.label{font-weight:700;font-size:.95rem;text-align:center}.tag{font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.15em}
.detail{display:grid;gap:40px;align-items:center;padding:30px 0 60px}@media(min-width:800px){.detail{grid-template-columns:auto 1fr}}
.detail .stage{perspective:1400px;display:flex;justify-content:center;padding:20px 40px}
.detail .box{--w:300px;--h:420px;--d:56px;animation:spin 9s ease-in-out infinite alternate}
@keyframes spin{from{transform:rotateY(18deg)}to{transform:rotateY(52deg)}}@media(prefers-reduced-motion:reduce){.detail .box{animation:none;transform:rotateY(25deg)}}
.detail .box .spine span{font-size:20px}
.detail h1{font-size:clamp(2rem,6vw,3.4rem);margin:0}.detail .desc{color:#ccc;font-size:1.1rem;line-height:1.6;max-width:60ch}
.play{display:inline-block;margin:22px 0;padding:18px 46px;font-size:1.5rem;font-weight:900;letter-spacing:.12em;border-radius:14px;background:#e01e2b;color:#fff;text-decoration:none;box-shadow:0 6px 0 #7a0a12,0 0 30px rgba(224,30,43,.5)}
.play:hover{background:#ff3344}.play:active{transform:translateY(4px);box-shadow:0 2px 0 #7a0a12}
.controls{background:#121212;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 20px;max-width:60ch}.controls h2{margin:0 0 8px;font-size:1.1rem}
.controls dt{font-weight:800;color:#ff6a64}.controls dd{margin:0 0 8px;color:#ccc}
footer{text-align:center;color:#888;padding:20px 0 40px;font-size:.9rem}
/* ---- Ink Blob theme (Superdooper, dark arcade) ---- */
body{background:radial-gradient(ellipse at top,#1a0204 0,#08080a 60%) fixed;font-family:var(--ink-body)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.wrap{border-top:3px solid var(--ink-red);box-shadow:0 -10px 30px -12px rgba(225,6,0,.7)}
.top .ink-logo{font-size:clamp(1.4rem,4vw,2.1rem)}
h1.shelf-title,.detail h1{font-family:var(--ink-display);font-weight:400;color:var(--ink-white);transform:skewX(-8deg);
  transform-origin:left;text-shadow:4px 4px 0 #000,6px 6px 0 #000,0 0 18px rgba(225,6,0,.5);letter-spacing:.03em;display:table}
h1.shelf-title:has(.ink-logo){text-shadow:none;transform:none;font-size:clamp(2.2rem,7vw,3.8rem);margin:6px 0 10px}
.btn{font-family:var(--ink-display);letter-spacing:.04em;background:#141414;color:var(--ink-white);border:2px solid var(--ink-red);
  box-shadow:0 0 12px rgba(225,6,0,.35)}
.btn:hover{background:var(--ink-red)}
.label{font-family:var(--ink-display);font-weight:400;letter-spacing:.03em;text-shadow:2px 2px 0 #000}
.play{font-family:var(--ink-display);font-weight:400;background:var(--ink-red);border:3px solid #000;border-radius:999px;
  box-shadow:0 6px 0 #5a0008,0 0 28px rgba(225,6,0,.6);text-shadow:2px 2px 0 #000}
.controls{background:#101010;border:2px solid var(--ink-red);border-radius:16px;box-shadow:0 0 22px -6px rgba(225,6,0,.6)}
.controls h2{font-family:var(--ink-display);font-weight:400;color:var(--ink-white);text-shadow:2px 2px 0 #000}
.tag{color:#ff5a52}
.top:not(:has(.ink-logo)){justify-content:flex-end}
/* ---- Cover-art box fronts (Moon Axis, Unleashed): banner + cover image, CSS-only FX ---- */
.poster{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.poster .art{position:absolute;left:0;right:0;bottom:0;top:11%;overflow:hidden}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.item:hover .poster img,.item:focus-visible .poster img,.detail .stage:hover .poster img{transform:translate(-1.5%,0) scale(1.05)}
.poster-banner{position:absolute;left:0;right:0;top:0;height:11%;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e01e2b55;font:900 calc(var(--w)*.045) "Arial Black",Arial,sans-serif;
  letter-spacing:.3em;color:#e01e2b;background:#050505;z-index:3}
.poster img{background:#05070a}
.fx{position:absolute;pointer-events:none;z-index:2}
.fx.sheen{inset:0;background:linear-gradient(105deg,#0000 35%,#ffffff22 48%,#0000 60%);background-size:250% 100%;background-position:120% 0;mix-blend-mode:screen;animation:fxSheen 7s ease-in-out infinite}
@keyframes fxSheen{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
.poster .art{box-shadow:inset 0 0 18px #000a}
@media (prefers-reduced-motion:reduce){.fx{animation:none!important;display:none}.poster img{transition:none;transform:none!important}}

.archive-link{text-align:center;margin:10px 0 0}.archive-link a{font-family:var(--ink-display);color:#bbb;text-decoration:none;border:2px dashed #555;border-radius:999px;padding:8px 16px;display:inline-block}.archive-link a:hover{color:#fff;border-color:var(--ink-red)}
html{background:#08080a}