/* y2k19 — SPLXCE Magazine newsstand (Y2K HUD) */
:root{
  --void:#050505;--acid:#c8ff00;--acid-hot:#eaff66;--magenta:#ff2bd6;--cyan:#00f0ff;
  --ink:#f2ffe6;--muted:#8a8a8a;--yellow:#ffe600;--line:rgba(200,255,0,.55);
  --mono:"Lucida Console","Courier New",monospace;
  --font:"Segoe UI",Tahoma,Arial,sans-serif;
  --display:"Arial Black","Arial Narrow",Impact,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--void);color:var(--ink);font-family:var(--font)}
body.room-mag{overflow-x:hidden;overflow-y:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wipe{position:fixed;inset:0;z-index:100;pointer-events:none!important;opacity:0;background:var(--void);transition:opacity .22s ease}
.wipe.on{opacity:1;pointer-events:none!important}

.mag-stage{
  min-height:100dvh;position:relative;
  padding-bottom:calc(clamp(2.6rem,4.2vw,3.2rem) + 1rem);
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%,rgba(255,43,214,.08),transparent 55%),
    radial-gradient(ellipse 60% 40% at 20% 10%,rgba(200,255,0,.06),transparent 50%),
    linear-gradient(180deg,#030303 0%,#0a0a0a 45%,#050505 100%);
}
.bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.city-glow{
  position:absolute;left:0;right:0;bottom:18%;height:40%;
  background:radial-gradient(ellipse 70% 80% at 50% 100%,rgba(0,240,255,.05),transparent 60%);
  opacity:.7;
}
.noise{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E")}
.scan{position:absolute;inset:0;opacity:.14;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}

.stand-chrome{
  position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  padding:.55rem .85rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid rgba(200,255,0,.25);
}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .4rem;border:1px solid rgba(200,255,0,.55);
  background:rgba(0,0,0,.55);color:var(--acid);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.chip.dim{color:var(--muted);border-color:rgba(138,138,138,.45)}
.chip.right{margin-left:auto;background:var(--acid);color:#050505;border-color:var(--acid);font-weight:800}
.chip.clock{color:var(--yellow)}
.chip a:hover{color:var(--magenta)}

/* —— newsstand booth —— */
.newsstand{
  position:relative;z-index:2;max-width:980px;margin:0 auto;
  padding:1.1rem .85rem 2rem;
  perspective:1400px;
}

.awning{
  position:relative;z-index:3;margin:0 auto .15rem;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.65));
}
.awning-fabric{
  display:grid;grid-template-columns:repeat(6,1fr);height:28px;overflow:hidden;
  border:2px solid #111;border-bottom:0;border-radius:4px 4px 0 0;
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.4);
}
.awning-stripe{
  background:repeating-linear-gradient(180deg,#0c1a00 0 6px,#142800 6px 12px);
  border-right:1px solid rgba(0,0,0,.5);
  position:relative;
}
.awning-stripe:nth-child(even){
  background:repeating-linear-gradient(180deg,#1a0012 0 6px,#2a0020 6px 12px);
}
.awning-stripe::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:14px;
  background:inherit;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);
  opacity:.95;
}
.awning-sign{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.85rem 1rem 1.1rem;
  background:
    linear-gradient(180deg,rgba(200,255,0,.12),transparent 40%),
    linear-gradient(90deg,#0a0a0a,#111 50%,#0a0a0a);
  border:2px solid var(--acid);
  border-top:0;
  box-shadow:0 8px 0 #000, inset 0 1px 0 rgba(200,255,0,.2);
  text-align:center;
}
.sign-city{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.28em;color:var(--magenta);text-transform:uppercase;
}
.sign-title{
  font-family:var(--display);font-size:clamp(1.6rem,6vw,3.2rem);letter-spacing:.14em;line-height:.95;
  color:var(--acid);
  text-shadow:
    4px 4px 0 #000,
    -2px 0 0 var(--magenta),
    2px 0 0 var(--cyan),
    0 0 24px rgba(200,255,0,.35);
}
.sign-tag{
  font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;color:var(--muted);margin-top:.15rem;
}
.awning-lamp{
  position:relative;height:22px;display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;border:2px solid #111;border-top:0;
}
.awning-lamp .tube{
  display:block;width:78%;height:7px;border-radius:4px;
  background:linear-gradient(180deg,#f5ffe0,#c8ff00 40%,#8ab800);
  box-shadow:
    0 0 12px rgba(200,255,0,.85),
    0 0 28px rgba(200,255,0,.45),
    0 8px 30px rgba(200,255,0,.25);
  animation:tubeFlicker 4.5s ease-in-out infinite;
}
.awning-lamp .glow{
  position:absolute;left:10%;right:10%;top:100%;height:90px;pointer-events:none;
  background:linear-gradient(180deg,rgba(200,255,0,.22),transparent 70%);
  mix-blend-mode:screen;
}
@keyframes tubeFlicker{
  0%,100%{opacity:1;filter:brightness(1)}
  48%{opacity:1}
  50%{opacity:.82;filter:brightness(.9)}
  52%{opacity:1}
  78%{opacity:1}
  79%{opacity:.7}
  81%{opacity:1}
}

.rack-frame{
  position:relative;z-index:2;
  margin:0 auto;padding:0 0 .5rem;
  background:
    linear-gradient(180deg,rgba(200,255,0,.04),transparent 30%),
    linear-gradient(90deg,#080808,#0e0e0e 50%,#080808);
  border:2px solid rgba(200,255,0,.35);
  border-top:0;
  box-shadow:
    0 18px 40px rgba(0,0,0,.75),
    inset 0 0 60px rgba(0,0,0,.55),
    inset 0 30px 40px rgba(200,255,0,.04);
}
.rack-rail{
  height:10px;background:linear-gradient(180deg,#2a2a2a,#111);
  border-bottom:1px solid rgba(200,255,0,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.rack-rail.bottom{border-bottom:0;border-top:1px solid rgba(200,255,0,.15)}

.rack-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.45rem,1.4vw,.75rem);
  padding:clamp(.75rem,2vw,1.15rem);
  align-items:stretch;
}
@media(max-width:720px){.rack-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.rack-grid{grid-template-columns:repeat(2,1fr)}}

.rack-shelf{
  position:relative;height:28px;margin:0 .5rem .35rem;
  perspective:600px;
}
.shelf-tilt{
  height:100%;
  background:linear-gradient(180deg,#1a1a1a,#0a0a0a);
  border:1px solid rgba(200,255,0,.2);
  transform:rotateX(55deg);transform-origin:top;
  box-shadow:0 10px 20px rgba(0,0,0,.5);
}

/* —— magazine covers —— */
.cover{
  position:relative;aspect-ratio:3/4;min-height:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.55rem .5rem .5rem;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:
    4px 5px 0 #000,
    0 0 0 1px rgba(0,0,0,.8),
    inset 0 0 40px rgba(0,0,0,.35);
  overflow:hidden;text-align:left;
  transform:translateY(0) scale(1);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
  cursor:pointer;
}
.cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 35%,transparent 70%,rgba(0,0,0,.25));
}
.cover::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:7px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.35));
  border-left:1px solid rgba(255,255,255,.06);
}
.cover:hover,.cover:focus-visible{
  outline:none;z-index:5;
  transform:translateY(-10px) scale(1.04);
  border-color:var(--acid);
  box-shadow:
    6px 10px 0 #000,
    0 0 0 2px var(--acid),
    0 0 28px rgba(200,255,0,.45),
    0 0 48px rgba(255,43,214,.2);
  filter:brightness(1.08);
}
.cover.is-on{
  border-color:var(--magenta);
  box-shadow:
    6px 10px 0 #000,
    0 0 0 2px var(--magenta),
    0 0 32px rgba(255,43,214,.55);
}

.cover-mast{
  position:relative;z-index:3;
  font-family:var(--mono);font-size:clamp(.42rem,.9vw,.55rem);letter-spacing:.22em;
  color:rgba(255,255,255,.85);text-transform:uppercase;font-weight:700;
  text-shadow:1px 1px 0 #000;
}
.cover-art{
  position:absolute;inset:18% 8% 28%;z-index:0;display:flex;align-items:center;justify-content:center;
  opacity:.35;pointer-events:none;
}
.cover-art .glyph{
  font-size:clamp(2.4rem,8vw,4rem);line-height:1;
  filter:drop-shadow(0 0 12px currentColor);
}
.cover-hed{
  position:relative;z-index:3;margin-top:auto;
  font-family:var(--display);font-size:clamp(.78rem,2.2vw,1.15rem);line-height:.92;letter-spacing:.04em;
  color:#fff;font-weight:900;
  text-shadow:2px 2px 0 #000,0 0 12px rgba(0,0,0,.6);
}
.cover-meta{
  position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:.35rem;margin-top:.4rem;
}
.cover-meta b{
  font-family:var(--mono);font-size:.48rem;letter-spacing:.12em;color:rgba(255,255,255,.75);font-weight:700;
}
.cover-meta .bc{
  display:block;width:42px;height:16px;flex:0 0 auto;
  background:repeating-linear-gradient(90deg,
    #fff 0 1px, transparent 1px 2px,
    #fff 2px 3px, transparent 3px 5px,
    #fff 5px 6px, transparent 6px 7px,
    #fff 7px 9px, transparent 9px 10px);
  opacity:.75;box-shadow:0 0 0 1px rgba(0,0,0,.4);
}

/* colorways */
.c-steel{background:linear-gradient(165deg,#121212 10%,#2a2a2a 45%,#8a9a40 120%);color:var(--acid)}
.c-steel .cover-art{color:var(--acid)}
.c-bloom{background:linear-gradient(165deg,#0a0508 10%,#2a0018 50%,#ff2bd6 130%);color:var(--magenta)}
.c-bloom .cover-art{color:var(--magenta)}
.c-drive{background:linear-gradient(165deg,#050508 10%,#001820 50%,#00f0ff 130%);color:var(--cyan)}
.c-drive .cover-art{color:var(--cyan)}
.c-grid{background:linear-gradient(165deg,#101000 10%,#2a2200 50%,#ffe600 125%);color:var(--yellow)}
.c-grid .cover-art{color:var(--yellow)}
.c-hud{background:linear-gradient(165deg,#050805 5%,#142200 45%,#c8ff00 125%);color:var(--acid-hot)}
.c-hud .cover-art{color:var(--acid)}
.c-tape{background:linear-gradient(165deg,#0a0a0a 10%,#1a0014 50%,#ff2bd6 120%,#c8ff00 160%);color:#fff}
.c-tape .cover-art{color:var(--magenta)}
.c-pulse{background:linear-gradient(165deg,#0a0a12 10%,#1a0030 45%,#ff2bd6 90%,#00f0ff 140%);color:var(--cyan)}
.c-pulse .cover-art{color:var(--magenta)}
.c-booth{background:linear-gradient(165deg,#0c0c0c 10%,#1a1a00 50%,#c8ff00 120%);color:var(--acid)}
.c-booth .cover-art{color:var(--yellow)}
.c-memory{background:linear-gradient(165deg,#080810 10%,#001428 50%,#00f0ff 110%,#c8ff00 150%);color:var(--cyan)}
.c-memory .cover-art{color:var(--acid)}
.c-jolt{background:linear-gradient(165deg,#120800 10%,#3a1800 50%,#ffe600 115%);color:var(--yellow)}
.c-jolt .cover-art{color:var(--yellow)}
.c-void{background:linear-gradient(165deg,#000 5%,#111 40%,#222 70%,#c8ff00 160%);color:#ddd}
.c-void .cover-art{color:var(--acid)}
.c-fox{background:linear-gradient(165deg,#0a0a0a 10%,#1a0a00 40%,#ff2bd6 90%,#c8ff00 140%);color:#fff}
.c-fox .cover-art{color:var(--acid)}

.stand-hint{
  margin:1rem auto 0;text-align:center;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
}

/* —— preview panel —— */
.preview-panel{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;padding-bottom:calc(clamp(2.6rem,4.2vw,3.2rem) + 1rem);
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
}
.preview-panel[hidden]{display:none!important}
.preview-card{
  position:relative;display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:1rem;
  width:min(520px,94vw);padding:1rem;
  background:#0a0a0a;border:2px solid var(--acid);
  box-shadow:8px 8px 0 #000,0 0 40px rgba(200,255,0,.2);
  animation:previewIn .18s ease-out;
}
@keyframes previewIn{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@media(max-width:520px){.preview-card{grid-template-columns:1fr}}
.preview-x{
  position:absolute;top:.4rem;right:.45rem;z-index:2;
  width:1.6rem;height:1.6rem;background:var(--magenta);color:#fff;font-weight:800;border:1px solid #000;
  box-shadow:2px 2px 0 #000;line-height:1;
}
.preview-x:hover{background:var(--acid);color:#050505}
.preview-cover{
  aspect-ratio:3/4;border:2px solid rgba(200,255,0,.4);
  box-shadow:4px 4px 0 #000;background:#111;
  display:flex;flex-direction:column;justify-content:flex-end;padding:.55rem;
  font-family:var(--display);font-size:.85rem;letter-spacing:.04em;color:#fff;font-weight:900;
  text-shadow:2px 2px 0 #000;
}
.preview-body{display:flex;flex-direction:column;gap:.35rem;min-width:0;padding-right:1.2rem}
.preview-issue{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;color:var(--magenta);text-transform:uppercase}
.preview-body h2{font-size:clamp(1.2rem,4vw,1.8rem);letter-spacing:.06em;color:var(--acid);line-height:1.05}
.preview-tag{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;color:var(--yellow);text-transform:uppercase}
.preview-blurb{font-size:.88rem;line-height:1.45;color:#ccc;margin-top:.25rem}
.preview-barcode{
  margin-top:auto;padding-top:.75rem;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;color:var(--muted);
  display:flex;align-items:center;gap:.5rem;
}
.preview-barcode::before{
  content:"";display:block;width:56px;height:22px;flex:0 0 auto;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 1px, transparent 1px 2px,
    var(--ink) 2px 3px, transparent 3px 5px,
    var(--ink) 5px 6px, transparent 6px 7px,
    var(--ink) 7px 9px, transparent 9px 10px);
}

/* tab tray (match site) */
.tabtray{position:fixed;left:0;right:0;bottom:0;z-index:5;height:clamp(2.6rem,4.2vw,3.2rem);display:flex;align-items:stretch;gap:1px;background:#000;border-top:2px solid #c8ff00;padding:0 .3rem}
.tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;font-family:var(--mono);font-size:clamp(.45rem,.7vw,.55rem);letter-spacing:.08em;color:#8a8a8a;border-left:1px solid rgba(200,255,0,.15);border-right:1px solid rgba(200,255,0,.15)}
.tab-ico{font-size:clamp(.75rem,1.4vw,1rem);line-height:1;color:#c8ff00}
.tab:hover{background:rgba(200,255,0,.12);color:#c8ff00}
.tab.is-on{background:#c8ff00;color:#050505}
.tab.is-on .tab-ico{color:#050505}
.tab.spacer{flex:1.4 1 0;pointer-events:none;border:0}
@media(max-width:560px){.tab span:not(.tab-ico){display:none}.tab{flex-direction:row;gap:.35rem}}