/* =============================================
   2005 GAME PROMO WEBSITE — DARK AERO
   RE4 / DMC / KH2 era
   ============================================= */
:root{
  --bg:#080706;
  --panel:#0c0b09;
  --panel2:#100e0c;
  --cell:#0e0d0b;
  --bdr:#1e1a16;
  --bdr2:#2a2520;
  --bdr3:#3a3328;
  --chrome:#4a4438;
  --chrome2:#5a5448;
  --red:#6b0000;
  --red2:#991010;
  --gold:#c8a030;
  --gold2:#9a7a22;
  --gold3:#6a5218;
  --gold4:#3a2e10;
  --bone:#baa88a;
  --grey:#7a7060;
  --dim:#4a4238;
  --dead:#1a1612;
  --green:#2a8a40;
  --warn:#aa8a20;
  --glow:rgba(200,160,48,.15);
  --hd:'Cinzel',serif;
  --hd2:'Rajdhani',sans-serif;
  --mn:'Share Tech Mono',monospace;
  --logo:'Megrim',cursive;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--bg);color:var(--bone);
  font-family:var(--hd2);font-weight:400;font-size:14px;
  /* dark with subtle static grain */
  background-color:#080706;
  background-image:url("https://www.transparenttextures.com/patterns/black-linen.png");
  position:relative;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
  animation:bg-static .2s steps(4) infinite;
}
@keyframes bg-static{0%{background-position:0 0}25%{background-position:-128px -64px}50%{background-position:64px -128px}75%{background-position:-64px 64px}100%{background-position:128px -32px}}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg);border-left:1px solid var(--bdr)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--chrome),var(--bdr));border:1px solid var(--bdr2)}

/* =============================================
   SITE WRAPPER — centered 1024px, like 2005
   ============================================= */
.site-wrap{
  max-width:1040px;margin:0 auto;
  border-left:1px solid var(--bdr2);
  border-right:1px solid var(--bdr2);
  background:var(--panel);
  box-shadow:0 0 60px rgba(0,0,0,.6);
  min-height:100vh;
}

/* =============================================
   BANNER — atmospheric header like a game splash
   ============================================= */
.banner{
  position:relative;height:180px;overflow:hidden;
  border-bottom:2px solid var(--bdr2);
  /* dark metal/carbon fiber feel */
  background-color:#0a0200;
  background-image:url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
}
.banner-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 60%,rgba(120,0,0,.15)0%,transparent 50%),
    radial-gradient(ellipse at 70% 30%,rgba(80,40,0,.1)0%,transparent 45%),
    radial-gradient(ellipse at 50% 100%,rgba(0,0,40,.08)0%,transparent 40%);
}
.banner-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;
}
.banner-logo{
  font-family:var(--logo);font-size:3.8rem;
  letter-spacing:10px;color:var(--gold);
  text-transform:uppercase;
  text-shadow:0 0 20px rgba(200,160,48,.2),0 0 60px rgba(200,160,48,.06);
}
.banner-tagline2{
  font-family:'Poiret One',sans-serif;font-size:.95rem;color:var(--grey);
  letter-spacing:5px;margin-top:.3rem;
  text-transform:uppercase;
}
.banner-fade{
  position:absolute;bottom:0;left:0;right:0;height:40px;
  background:linear-gradient(transparent,var(--panel));
}

/* =============================================
   LAYOUT — sidebar + content (2005 style)
   ============================================= */
.layout{
  display:grid;grid-template-columns:220px 1fr;
  min-height:600px;
}

/* =============================================
   SIDEBAR — glossy 2005 nav buttons
   ============================================= */
.sidebar{
  border-right:1px solid var(--bdr2);
  padding:.8rem 0;
  /* dark iron grip texture */
  background-color:var(--panel2);
  background-image:url("https://www.transparenttextures.com/patterns/dark-leather.png");
}
.sb-section{
  font-family:var(--mn);font-size:.6rem;color:var(--dim);
  letter-spacing:2px;padding:.6rem .8rem .2rem;
  border-bottom:1px solid var(--bdr);margin-bottom:.2rem;
}
.sb-btn{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem .8rem;cursor:pointer;
  font-family:var(--hd2);font-size:.95rem;font-weight:500;
  letter-spacing:2px;color:var(--grey);
  text-decoration:none;
  /* glossy 2005 button */
  background:linear-gradient(180deg,rgba(255,255,255,.03)0%,transparent 50%,rgba(0,0,0,.15)100%);
  border:none;border-bottom:1px solid var(--bdr);
  transition:all .1s;position:relative;
}
.sb-icon{font-size:.5rem;color:var(--dim);transition:color .1s}
.sb-btn:hover{
  background:linear-gradient(180deg,rgba(200,160,48,.08)0%,rgba(200,160,48,.02)50%,rgba(0,0,0,.15)100%);
  color:var(--bone);
}
.sb-btn:hover .sb-icon{color:var(--gold3)}
.sb-btn.active{
  color:var(--gold);
  background:linear-gradient(180deg,rgba(200,160,48,.1)0%,rgba(200,160,48,.03)50%,rgba(0,0,0,.2)100%);
  border-left:2px solid var(--gold2);
  box-shadow:inset 3px 0 8px rgba(200,160,48,.08);
}
.sb-btn.active .sb-icon{color:var(--gold)}

.sb-link{
  display:block;padding:.25rem .8rem;
  font-family:var(--mn);font-size:.65rem;color:var(--dim);
  text-decoration:none;letter-spacing:1px;transition:color .1s;
}
.sb-link:hover{color:var(--gold3)}

.sb-sister{
  display:block;margin:.5rem .5rem .8rem;
  padding:.6rem .5rem;
  background:linear-gradient(135deg,#1a0505 0%,#2a0808 50%,#1a0505 100%);
  border:2px solid var(--red2);
  box-shadow:0 0 10px rgba(153,16,16,.5),inset 0 0 8px rgba(153,16,16,.15);
  text-decoration:none;
  text-align:center;
  animation:sister-pulse 2.5s ease-in-out infinite;
}
.sb-sister:hover{
  border-color:var(--gold);
  box-shadow:0 0 14px rgba(200,160,48,.6),inset 0 0 10px rgba(200,160,48,.1);
  animation:none;
}
.sb-sister-label{
  display:block;
  font-family:var(--hd);font-size:.8rem;font-weight:700;
  color:var(--gold);letter-spacing:1.5px;line-height:1.5;
  text-shadow:0 0 8px rgba(200,160,48,.8);
}
@keyframes sister-pulse{
  0%,100%{box-shadow:0 0 8px rgba(153,16,16,.5),inset 0 0 6px rgba(153,16,16,.1)}
  50%{box-shadow:0 0 18px rgba(200,160,48,.5),inset 0 0 12px rgba(200,160,48,.08)}
}

.sb-status{
  display:flex;align-items:center;gap:.3rem;
  padding:.3rem .8rem;font-family:var(--mn);font-size:.6rem;color:var(--green);
}
.sb-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 4px var(--green);animation:bk 1.5s step-end infinite}
@keyframes bk{0%,60%{opacity:1}61%,100%{opacity:0}}

.sb-clock{padding:0 .8rem;font-family:var(--mn);font-size:.6rem;color:var(--dim)}
/* sidebar music player */
.sb-player{padding:.3rem .6rem}
.sp-track{font-family:var(--mn);font-size:.55rem;color:var(--gold3);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.2rem}
.sp-controls{display:flex;gap:.2rem;margin-bottom:.2rem}
.sp-btn{font-family:var(--hd2);font-size:.7rem;color:var(--dim);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.15));border:1px solid var(--bdr);padding:.15rem .35rem;cursor:pointer;line-height:1}
.sp-btn:hover{border-color:var(--gold4);color:var(--gold3)}
.sp-play{color:var(--gold3);border-color:var(--gold4)}
.sp-vol{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--bdr);border-radius:1px;outline:none}
.sp-vol::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;background:var(--gold3);border-radius:50%;cursor:pointer}
.sp-vol::-moz-range-thumb{width:8px;height:8px;background:var(--gold3);border-radius:50%;cursor:pointer;border:none}

.sb-spotify{padding:.2rem .4rem;overflow:hidden}
.sb-spotify iframe{width:100%;display:block;min-height:152px}

.sb-counter{padding:.4rem .8rem;font-family:var(--mn);font-size:.55rem;color:var(--dead);letter-spacing:1px}

/* =============================================
   CONTENT PANELS — framed boxes
   ============================================= */
.content{padding:.8rem;min-height:500px;background-color:var(--panel);background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png")}

.panel{display:none}
.panel.show{display:block;animation:pIn .25s}
@keyframes pIn{from{opacity:0}to{opacity:1}}

.panel-head{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.8rem;
}
.ph-bar{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--bdr3),transparent)}
.panel-head h2{
  font-family:var(--logo);font-size:1.6rem;
  letter-spacing:6px;color:var(--gold);white-space:nowrap;
  text-shadow:0 0 12px rgba(200,160,48,.15);text-transform:uppercase;
}

.panel-body{
  border:1px solid var(--bdr);
  padding:1rem;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.02),inset -1px -1px 0 rgba(0,0,0,.2);
  /* dark worn parchment/paper texture */
  background-color:var(--cell);
  background-image:url("https://www.transparenttextures.com/patterns/black-paper.png");
}

/* =============================================
   SHARED: card headers (2005 section bars)
   ============================================= */
.hc-head{
  font-family:var(--logo);font-size:.95rem;color:var(--gold2);
  letter-spacing:3px;padding:.3rem .5rem;margin-bottom:.5rem;
  background:linear-gradient(90deg,rgba(200,160,48,.06),transparent);
  border-left:2px solid var(--gold3);
}

/* =============================================
   HOME
   ============================================= */
.intro-text{font-size:.85rem;color:var(--grey);line-height:1.6;margin-bottom:1rem}
.intro-text strong{color:var(--gold2);font-weight:700}

.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.home-card{background:var(--panel);border:1px solid var(--bdr);box-shadow:inset 1px 1px 0 rgba(255,255,255,.02)}

.hc-body{display:flex;gap:.6rem;padding:.5rem;align-items:flex-start}
.hc-rank{font-family:var(--hd);font-size:1.8rem;font-weight:700;color:var(--gold);min-width:30px;text-align:center}
.hc-body strong{font-family:var(--hd);font-size:.85rem;font-weight:700;letter-spacing:2px;color:var(--bone);text-transform:uppercase}
.hc-desc{font-size:.7rem;color:var(--grey);display:block;margin:.15rem 0}
.hc-tags{display:flex;gap:.2rem}
.hc-tags span{font-family:var(--mn);font-size:.5rem;padding:.05rem .3rem;border:1px solid var(--gold4);color:var(--gold3)}

/* photo feed */
.feed-screen{position:relative;aspect-ratio:4/3;background:#020201;overflow:hidden}
.feed-screen img{width:100%;height:100%;object-fit:cover;opacity:0;filter:contrast(1.1)brightness(.8)saturate(.5)sepia(.25);transition:opacity .2s}
.feed-screen img.on{opacity:1}
.feed-cap{position:absolute;bottom:0;left:0;right:0;padding:.2rem .4rem;font-family:var(--mn);font-size:.55rem;color:var(--gold3);background:linear-gradient(transparent,rgba(0,0,0,.85))}
.feed-desc{padding:.35rem .5rem;font-family:var(--mn);font-size:.6rem;color:var(--txt2);line-height:1.4;border-top:1px solid var(--bdr);font-style:italic}
.feed-btns{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem;border-top:1px solid var(--bdr)}
.fb{font-family:var(--hd2);font-size:.75rem;color:var(--dim);background:none;border:1px solid var(--bdr);padding:.1rem .4rem;cursor:pointer}
.fb:hover{border-color:var(--gold4);color:var(--gold3)}
.feed-ct{font-family:var(--mn);font-size:.55rem;color:var(--dead)}

/* =============================================
   MISSIONS — RE4 attache
   ============================================= */
.fil-row{display:flex;gap:.25rem;margin-bottom:.8rem;flex-wrap:wrap}
.fil{font-family:var(--hd);font-size:.7rem;font-weight:700;letter-spacing:2px;padding:.25rem .8rem;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.1));border:1px solid var(--bdr);color:var(--dim);cursor:pointer;text-transform:uppercase}
.fil:hover,.fil.on{border-color:var(--gold4);color:var(--gold2);background:linear-gradient(180deg,rgba(200,160,48,.06),rgba(0,0,0,.1));box-shadow:0 0 5px var(--glow)}

.case{display:grid;gap:1px;background:var(--bdr);border:1px solid var(--bdr);padding:1px}
.cell{display:grid;grid-template-columns:40px 1fr auto;align-items:center;padding:.6rem .7rem;transition:all .1s;position:relative;background-color:var(--cell);background-image:url("https://www.transparenttextures.com/patterns/black-scales.png")}
.cell::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold4);transition:background .1s}
.cell:hover{background-color:var(--panel2)}.cell:hover::before{background:var(--gold2)}
.c-rank{font-family:var(--hd);font-size:1.5rem;font-weight:700;color:var(--gold);text-align:center}
.c-info h3{font-family:var(--hd);font-size:.8rem;font-weight:700;letter-spacing:2px;color:var(--bone);text-transform:uppercase}
.c-info p{font-size:.68rem;color:var(--grey);line-height:1.3;margin:.1rem 0 .2rem}
.c-tags{display:flex;gap:.15rem;flex-wrap:wrap}
.c-tags span{font-family:var(--mn);font-size:.5rem;padding:.02rem .25rem;border:1px solid var(--gold4);color:var(--gold3)}
.c-download{display:inline-block;margin-top:.3rem;font-family:var(--mn);font-size:.5rem;color:var(--gold);border:1px solid var(--gold4);padding:.1rem .4rem;text-decoration:none;letter-spacing:1px;transition:all .15s}.c-download:hover{background:var(--gold4);color:var(--bone)}
.missions-disclaimer{font-family:var(--mn);font-size:.55rem;color:var(--dead);text-align:center;margin-top:1rem;font-style:italic;opacity:.7}
.c-st{font-family:var(--mn);font-size:.5rem;color:var(--dead);text-align:right;letter-spacing:1px}
.cell-placeholder{display:flex;justify-content:center;align-items:center;padding:1rem;border:1px dashed var(--bdr2);background:transparent;background-image:none}
.cell-placeholder::before{display:none}
.coming-soon{font-family:var(--mn);font-size:.65rem;color:var(--gold3);letter-spacing:2px;text-align:center;animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:0}}
.st-ok{color:var(--green)}.st-wip{color:var(--gold3);animation:bk 1.5s step-end infinite}

/* =============================================
   STATUS
   ============================================= */
.status-grid{display:grid;grid-template-columns:1fr 240px;gap:.8rem}

.guitar-box{
  position:relative;border:1px solid var(--bdr);
  min-height:280px;display:flex;align-items:center;justify-content:center;
  perspective:900px;overflow:hidden;cursor:grab;
  /* DMC weapon select dark metal */
  background-color:var(--panel);
  background-image:
    radial-gradient(ellipse at 55% 50%,rgba(100,0,0,.08)0%,transparent 50%),
    radial-gradient(ellipse at 20% 30%,rgba(0,8,30,.05)0%,transparent 40%),
    url("https://www.transparenttextures.com/patterns/dark-mosaic.png");
}
.guitar-box:active{cursor:grabbing}
#guitar-canvas{width:100%;height:100%;min-height:320px;display:block;cursor:grab}
#guitar-canvas:active{cursor:grabbing}
.guitar-hint{position:absolute;bottom:.4rem;left:0;right:0;text-align:center;font-family:var(--mn);font-size:.55rem;color:var(--dead);letter-spacing:2px;pointer-events:none;animation:bk 2.5s step-end infinite}
/* old CSS keychains removed — now 3D in Three.js */

.status-side{display:flex;flex-direction:column;gap:.6rem}
.sk-box,.dos-box{background:var(--panel);border:1px solid var(--bdr);padding:.6rem;box-shadow:inset 1px 1px 0 rgba(255,255,255,.02)}
.sk-box h3{font-family:var(--hd);font-size:1rem;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin:.3rem 0 .2rem}
.sk-box p,.dos-box p{font-size:.72rem;color:var(--grey);line-height:1.5}
.dos-portrait{width:100%;aspect-ratio:3/4;background:var(--cell);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;margin-bottom:.4rem;position:relative;overflow:hidden}
.dos-portrait img{width:100%;height:100%;object-fit:cover;filter:contrast(1.3) brightness(.75) saturate(.4) sepia(.35);image-rendering:pixelated}
.dos-portrait span{font-family:var(--mn);font-size:.6rem;color:var(--dead)}
/* VHS / RE4 shitty cam filter */
.vhs-filter{background:#000}
.vhs-overlay{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.35) 2px,rgba(0,0,0,.35) 4px);pointer-events:none;mix-blend-mode:multiply}
.vhs-overlay::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(107,0,0,.15) 85%,transparent 100%);animation:vhs-roll 4s linear infinite}
.vhs-overlay::after{content:'';position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(180deg,rgba(200,160,48,.06),transparent);pointer-events:none}
.vhs-tracking{position:absolute;left:0;right:0;height:3px;background:rgba(255,255,255,.08);animation:vhs-track 3s linear infinite;pointer-events:none}
.vhs-timestamp{position:absolute;bottom:6px;right:8px;font-family:var(--mn);font-size:.5rem;color:rgba(255,255,255,.7);text-shadow:1px 1px 0 rgba(255,0,0,.5),-1px 0 0 rgba(0,255,255,.3);letter-spacing:1px;animation:vhs-flicker 0.1s infinite}
@keyframes vhs-roll{0%{background-position:0 0}100%{background-position:0 100vh}}
@keyframes vhs-track{0%{top:-5%}100%{top:105%}}
@keyframes vhs-flicker{0%,100%{opacity:.9}50%{opacity:1}}
.vhs-static{position:absolute;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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)'/%3E%3C/svg%3E");background-size:128px 128px;animation:vhs-noise .15s steps(3) infinite}
@keyframes vhs-noise{0%{background-position:0 0}33%{background-position:-64px -32px}66%{background-position:32px -64px}100%{background-position:-32px 32px}}
.feed-screen.vhs-filter img{filter:contrast(1.2) brightness(.8) saturate(.45) sepia(.3)}
.dos-name{font-family:var(--hd);font-size:1rem;font-weight:700;letter-spacing:3px;color:var(--gold);text-transform:uppercase}
.dos-class{font-family:var(--mn);font-size:.55rem;color:var(--gold3);letter-spacing:2px;margin-bottom:.3rem}
.classified{font-family:var(--mn);font-size:.55rem;color:var(--dead);animation:bk 2s step-end infinite}

/* =============================================
   INTEL
   ============================================= */
.spotify-box{border:1px solid var(--bdr);margin-bottom:.8rem}
.shelf-sub{font-family:var(--mn);font-size:.55rem;color:var(--dead);letter-spacing:2px;margin-bottom:.4rem}
.shelf-box{background:var(--panel);border:1px solid var(--bdr);background-image:radial-gradient(ellipse at 50% 60%,rgba(50,20,0,.05)0%,transparent 50%)}
#shelf-canvas{width:100%;height:380px;display:block;cursor:grab}
#shelf-canvas:active{cursor:grabbing}
.shelf-info-box{background:var(--panel);border:1px solid var(--bdr);padding:.6rem;margin-top:.4rem;box-shadow:inset 1px 1px 0 rgba(255,255,255,.02)}
.shelf-info-box h4{font-family:var(--hd);font-size:.9rem;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:.15rem}
.shelf-info-box p{font-size:.7rem;color:var(--grey);line-height:1.4}

/* =============================================
   COMMS
   ============================================= */
.tl-g{font-family:var(--mn);font-size:.65rem;color:var(--green);margin-bottom:.15rem}
.tl-w{font-family:var(--mn);font-size:.65rem;color:var(--warn);margin-bottom:.6rem}
#cform label{display:block;font-family:var(--hd);font-size:.7rem;font-weight:700;letter-spacing:2px;color:var(--gold3);margin:.4rem 0 .1rem;text-transform:uppercase}
#cform input,#cform textarea{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--bdr);color:var(--bone);font-family:var(--mn);font-size:.75rem;padding:.4rem;outline:none}
#cform input:focus,#cform textarea:focus{border-color:var(--gold4);box-shadow:0 0 5px var(--glow)}
#cform textarea{resize:vertical}
.tx-btn{font-family:var(--hd);font-size:.85rem;font-weight:700;letter-spacing:4px;color:var(--gold3);text-transform:uppercase;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.15));border:1px solid var(--bdr2);padding:.4rem;width:100%;margin-top:.4rem;cursor:pointer}
.tx-btn:hover{background:linear-gradient(180deg,rgba(200,160,48,.08),rgba(0,0,0,.15));color:var(--gold);border-color:var(--gold4);box-shadow:0 0 8px var(--glow)}

/* =============================================
   FOOTER — 2005 style
   ============================================= */
.site-footer{
  padding:.6rem 1rem;text-align:center;
  border-top:1px solid var(--bdr);
}
.footer-line{width:60%;max-width:300px;height:1px;margin:0 auto .4rem;background:linear-gradient(90deg,transparent,var(--bdr2),transparent)}
.site-footer p{font-family:var(--mn);font-size:.5rem;color:var(--dead);letter-spacing:2px}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:768px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:flex;flex-wrap:wrap;gap:0;border-right:none;border-bottom:1px solid var(--bdr2);padding:.4rem}
  .sb-section{display:none}
  .sb-btn{padding:.3rem .6rem;font-size:.8rem;border-bottom:none;border-right:1px solid var(--bdr)}
  .sb-link,.sb-status,.sb-clock,.sb-counter{display:none}
  .sb-sister{display:block}
  .sb-btn.active{border-left:none;border-bottom:2px solid var(--gold2)}
  .home-grid{grid-template-columns:1fr}
  .status-grid{grid-template-columns:1fr}
  .guitar-box{min-height:220px}
  .banner{height:120px}
  .banner-logo{font-size:2.2rem}
}
@media(max-width:480px){
  .panel-head h2{font-size:1rem;letter-spacing:2px}
  .banner-logo{font-size:1.8rem;letter-spacing:6px}
}