/* Basement Video — shared design system (VHS rental store) */
:root{
  --bg:#0b1417; --panel:#0f1c20; --panel-2:#12242a;
  --line:#1d3a3d; --line-lit:#2c5a58;
  --text:#e6dfc8; --muted:#7e968d;
  --red:#e0524f; --red-neon:#ff5f5c; --yellow:#e9c46a; --teal:#45b08c;
  --stripe:linear-gradient(90deg,#e0524f 0 20%,#e98e4f 0 40%,#e9c46a 0 60%,#45b08c 0 80%,#4f8fe0 0 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:"Space Mono",monospace;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:var(--bg)}

/* CRT atmosphere */
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.13) 2px 4px)}
body::after{content:"";position:fixed;inset:0;z-index:101;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
  radial-gradient(ellipse 120% 90% at 50% 40%,transparent 60%,rgba(0,0,0,.5))}

.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--yellow);outline-offset:2px}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid var(--line);color:var(--teal);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase}
.panel-head a{color:var(--muted);font-weight:400;font-size:.72rem;letter-spacing:.08em}
.panel-head a:hover{color:var(--text)}
.panel-body{padding:14px}

/* Nav */
nav.store{border-bottom:1px solid var(--line);background:rgba(11,20,23,.92);
  position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}
.nav-inner{display:flex;align-items:center;gap:26px;height:58px}
.nav-links{display:flex;gap:2px;flex:1}
.nav-links a{padding:6px 12px;color:var(--muted);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--red-neon);border-bottom-color:var(--red-neon)}
.nav-play{color:var(--teal);font-size:.82rem;letter-spacing:.14em}
.nav-play:hover{text-shadow:0 0 10px rgba(69,176,140,.8)}
@media(max-width:860px){.nav-links{display:none}}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-stripes{display:flex;flex-direction:column;gap:2px;transform:skewX(-14deg)}
.logo-stripes i{height:3px;border-radius:1px}
.logo-stripes i:nth-child(1){width:22px;background:#e0524f}
.logo-stripes i:nth-child(2){width:18px;background:#e98e4f}
.logo-stripes i:nth-child(3){width:14px;background:#e9c46a}
.logo-stripes i:nth-child(4){width:10px;background:#45b08c}
.logo-text b{font-size:1.05rem;letter-spacing:.06em}
.logo-text span{display:block;font-family:"Yellowtail",cursive;color:var(--red-neon);
  font-size:.95rem;line-height:.9;margin-top:-2px}

/* Page headers */
.page-head{padding:26px 0 6px;display:flex;align-items:baseline;
  justify-content:space-between;flex-wrap:wrap;gap:8px}
.page-head h1{font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase}
.page-head h1 .bars{display:inline-block;width:34px;height:10px;background:var(--stripe);
  border-radius:2px;margin-right:12px}
.page-head .count{color:var(--muted);font-size:.78rem;letter-spacing:.12em}
.page-head .count b{color:var(--yellow);font-weight:700}
.page-sub{color:var(--muted);font-size:.8rem;margin-bottom:22px}

/* Buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:3px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid transparent;transition:filter .15s,transform .15s}
.btn-red{background:var(--red);color:#160b0b;box-shadow:0 3px 0 #7e2b29}
.btn-red:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-line{border-color:var(--line-lit);color:var(--teal);background:none}
.btn-line:hover{border-color:var(--teal)}

/* VHS cases */
.vhs{position:relative;display:block;transition:transform .15s}
.vhs:hover{transform:translateY(-4px)}
.vhs-case{aspect-ratio:3/4.6;border-radius:3px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#1b2b30,#0e181b 60%);border:1px solid var(--line-lit);
  box-shadow:inset 3px 0 0 rgba(255,255,255,.05),0 6px 14px rgba(0,0,0,.5);display:flex}
.vhs-spine{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.58rem;
  letter-spacing:.18em;color:var(--muted);text-transform:uppercase;padding:8px 3px;
  border-right:1px solid var(--line);flex-shrink:0}
.vhs-label{flex:1;margin:10px 8px;background:#e6dfc8;border-radius:2px;color:#20262a;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.lbl-stripe{height:9px;flex-shrink:0}
.s-red{background:#e0524f}.s-orange{background:#e98e4f}.s-yellow{background:#e9c46a}
.s-teal{background:#45b08c}.s-blue{background:#4f8fe0}.s-purple{background:#9a6fd0}
.s-cream{background:#cfc7ad}.s-pink{background:#d06f9a}
.lbl-title{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:8px 6px;font-weight:700;font-size:.66rem;line-height:1.3;letter-spacing:.02em;
  word-break:break-word}
.lbl-foot{font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6560;
  border-top:1px dashed #b9b09a;padding:4px 6px;display:flex;justify-content:space-between}
.sticker{position:absolute;top:-8px;right:-8px;width:46px;height:46px;border-radius:50%;
  background:var(--yellow);color:#3a2f10;display:grid;place-items:center;text-align:center;
  font-size:.5rem;font-weight:700;line-height:1.15;letter-spacing:.04em;
  transform:rotate(12deg);box-shadow:0 3px 8px rgba(0,0,0,.5);z-index:2}
.tag-new{position:absolute;top:8px;left:-4px;background:#e6dfc8;color:#20262a;
  font-size:.55rem;font-weight:700;letter-spacing:.14em;padding:2px 8px;z-index:2;
  box-shadow:0 2px 5px rgba(0,0,0,.4)}
.vhs-plays{margin-top:7px;text-align:center;color:var(--muted);font-size:.62rem;letter-spacing:.1em}

/* Grid + sidebar + toolbar */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:repeat(2,1fr)}}
.sidelist a{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;
  font-size:.8rem;color:var(--muted);border-bottom:1px dashed var(--line)}
.sidelist a:last-child{border-bottom:none}
.sidelist a:hover{color:var(--text)}
.sidelist a.on{color:var(--yellow)}
.sidelist a.on::before{content:"▸ "}
.sidelist span{font-size:.7rem;color:var(--teal)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search-box{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:9px 12px}
.search-box input{flex:1;background:none;border:none;color:var(--text);
  font-family:inherit;font-size:.82rem;letter-spacing:.04em}
.search-box input::placeholder{color:var(--muted)}
.search-box input:focus{outline:none}
.select{background:var(--panel);border:1px solid var(--line);border-radius:3px;
  color:var(--muted);font-family:inherit;font-size:.78rem;letter-spacing:.08em;
  padding:9px 12px;text-transform:uppercase;cursor:pointer}

/* Neon sign */
.neon{padding:16px;text-align:center;border-radius:6px;border:2px solid var(--red-neon);
  color:var(--red-neon);font-weight:700;font-size:.85rem;letter-spacing:.12em;line-height:1.7;
  box-shadow:0 0 18px rgba(255,95,92,.25),inset 0 0 18px rgba(255,95,92,.12);
  text-shadow:0 0 8px rgba(255,95,92,.7);animation:flicker 6s infinite}
@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.6}94%{opacity:1}96%{opacity:.75}97%{opacity:1}}

/* Ticker */
.ticker{border-top:1px solid var(--line);margin-top:8px;background:#081012}
.ticker-inner{display:flex;align-items:center;gap:26px;height:46px;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);overflow:hidden;white-space:nowrap}
.blink{animation:blink 1.1s steps(1) infinite;color:var(--teal)}
@keyframes blink{50%{opacity:0}}
.ticker b{color:var(--text);font-weight:400}
.ticker .clock{margin-left:auto;color:var(--yellow);letter-spacing:.2em}
@media(max-width:680px){.ticker .hide-sm{display:none}}

@media(prefers-reduced-motion:reduce){
  .neon,.blink{animation:none!important}
  *{transition:none!important}
}

/* Member chip (Phase 3) */
.nav-member{font-size:.72rem;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.nav-member b{color:var(--yellow);font-weight:700}
.nav-member a{margin-left:10px;color:var(--red-neon);font-size:.68rem}
.nav-member a:hover{text-shadow:0 0 8px rgba(255,95,92,.6)}
@media(max-width:680px){.nav-member{display:none}}

/* IGDB box art inside the case (Phase 5) */
.vhs-art{flex:1;min-width:0;object-fit:cover;margin:6px 6px 6px 4px;border-radius:2px;
  box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* Guest book (Phase 5) */
.gb-review{padding:10px 0;border-bottom:1px dashed var(--line);font-size:.78rem}
.gb-review:last-child{border-bottom:none}
.gb-score{display:inline-block;border:1px solid var(--teal);color:var(--teal);
  padding:1px 8px;border-radius:2px;font-weight:700;margin-right:8px;font-size:.74rem}
.gb-review p{color:var(--muted);margin-top:4px;font-size:.74rem}
.gb-review cite{color:var(--teal);font-style:normal;font-size:.66rem;letter-spacing:.08em}
.gb-form{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.gb-form select,.gb-form textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:3px;color:var(--text);font-family:inherit;font-size:.78rem;padding:8px 10px;
  margin-bottom:8px}
.gb-form textarea{resize:vertical;min-height:56px}
.gb-form select:focus,.gb-form textarea:focus{outline:none;border-color:var(--teal)}

/* hotfix: long unbroken titles were inflating grid tracks */
.vhs{min-width:0}
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.lbl-title{overflow-wrap:anywhere;word-break:normal}