/* ============================================================
   BYMAS  ::  style.css
   Shared across every page. Link it with:
     <link rel="stylesheet" href="style.css">

   CONTENTS
     1. variables
     2. base
     3. materials      .plate .display .jcard
     4. chrome         masthead, nav, breadcrumb
     5. layout         .deck .stack .block
     6. profile parts  idcard, readout, typestrip, tabs
     7. content        index, gallery, kv
     8. graphics       stamps, blinkies, 88x31, slots
     9. footer
    10. responsive
   ============================================================ */


/* ---------- 1. VARIABLES ------------------------------------ */

:root{
  /* chassis */
  --void:#0d1018;
  --navy:#1b2340;
  --navy-2:#242e52;
  --navy-3:#101736;
  --deck:#b7bcc4;
  --deck-2:#a2a8b2;
  --deck-3:#cfd4da;
  --engrave:#2b3245;
  --engrave-dim:#5d6577;

  /* inset glass */
  --glass:#10141f;
  --glass-line:#2a3348;

  /* ---- PER-CHARACTER / PER-PAGE ----
     Override these in a <style> block on an individual page to
     retint that page without touching this file:
        <style> :root{ --led:#7c5cbf; --led-dim:#4a3379; } </style>  */
  --led:#e0453f;
  --led-dim:#8c2723;

  /* index card stock. warmer options: #e9e5da / #eae7e2 */
  --card:#dde2df;
  --card-rule:rgba(140,39,35,.30);

  --face:Verdana, Geneva, Tahoma, sans-serif;
  --mono:"Courier New", Courier, monospace;
}


/* ---------- 2. BASE ----------------------------------------- */

*{ box-sizing:border-box; }

body{
  margin:0;
  padding:0 0 3rem;
  color:var(--engrave);
  font:400 12px/1.6 var(--face);
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/6px 6px,
    linear-gradient(180deg, var(--navy), var(--void) 70%);
  background-attachment:fixed;
}

a{ color:#1c4f8c; }
a:visited{ color:#6b3fa0; }          /* stained purple, as it should be */
a:hover{ color:var(--led-dim); }
a:focus-visible{ outline:2px solid var(--led); outline-offset:2px; }

img{ image-rendering:pixelated; }    /* keeps small gifs crisp when scaled */

.wrap{ max-width:900px; margin:0 auto; padding:0 12px; }

/* screen-reader-only, for labels you want read but not seen */
.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}


/* ---------- 3. MATERIALS ------------------------------------ */

/* brushed metal chassis */
.plate{
  background:linear-gradient(180deg, var(--deck-3), var(--deck) 18%, var(--deck-2));
  border:1px solid #6e7480;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),
             inset 0 -1px 0 rgba(0,0,0,.18);
}

/* recessed lit glass */
.display{
  background:var(--glass);
  border:1px solid #05070c;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.5);
  color:var(--led);
  font-family:var(--mono);
}

/* printed label stock */
.jcard{
  background:var(--card);
  border:1px solid #969b97;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(0,0,0,.28);
  padding:9px 11px 10px;
}

/* small caps label with a trailing dotted rule */
.eyebrow{
  margin:0 0 6px;
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--engrave-dim);
}
.eyebrow::after{
  content:""; flex:1; height:1px;
  background:repeating-linear-gradient(90deg, var(--engrave-dim) 0 2px, transparent 2px 4px);
  opacity:.55;
}


/* ---------- 4. CHROME --------------------------------------- */

.masthead{
  margin-top:18px; padding:12px 14px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.logo{ display:block; max-height:34px; width:auto; }
.wordmark{ margin:0; font-size:14px; font-weight:700; line-height:1.25; }
.wordmark .short{ color:var(--led-dim); }
.tagline{
  margin:1px 0 0;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--engrave-dim);
}

.reels{ display:flex; gap:10px; flex:none; }
.reel{
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle, var(--glass) 30%, #6e7480 31% 46%, var(--deck-2) 47%);
  border:1px solid #6e7480;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* full-bleed accent rule between masthead and nav */
.rule-led{ height:3px; background:var(--led); }

.nav{
  display:flex; flex-wrap:wrap;
  background:linear-gradient(180deg, var(--navy-2), var(--navy-3));
  border:1px solid #05070c; border-top:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.nav a{
  display:block; padding:8px 14px;
  font:700 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:#aab5d4; text-decoration:none;
  border-right:1px solid rgba(0,0,0,.5);
  box-shadow:1px 0 0 rgba(255,255,255,.05);
}
.nav a:visited{ color:#aab5d4; }
.nav a:hover{ color:#fff; background:rgba(224,69,63,.22); }
.nav a[aria-current]{ color:#fff; box-shadow:inset 0 -3px 0 var(--led); }
.nav a:focus-visible{ outline:2px solid var(--led); outline-offset:-3px; }

/* light, so it never sits dark-on-dark against the page */
.crumbs{
  padding:5px 14px;
  border:1px solid #6e7480; border-top:0;
  background:linear-gradient(180deg, var(--deck-3), var(--deck-2));
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--engrave-dim);
}
.crumbs a{ color:#1c4f8c; text-decoration:none; }
.crumbs a:hover{ color:var(--led-dim); text-decoration:underline; }
.crumbs b{ color:var(--engrave); font-weight:400; }


/* ---------- 5. LAYOUT --------------------------------------- */

/* two-column: sidebar + main. use .deck.wide for a single column */
.deck{
  margin-top:10px;
  display:grid; grid-template-columns:196px 1fr; gap:10px;
  align-items:start;
}
.deck.wide{ grid-template-columns:1fr; }

.stack{ display:grid; gap:10px; }

.block{ padding:10px 12px 12px; }
.block > p{ margin:0 0 .7em; }
.block > p:last-child{ margin-bottom:0; }


/* ---------- 6. PROFILE PARTS -------------------------------- */

.idcard{ padding:10px; text-align:center; }

.avatar{
  width:100%; aspect-ratio:1; margin:0 0 8px;
  background:var(--glass); border:1px solid #05070c;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8);
  display:grid; place-items:center; overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.handle{ margin:0; font-size:14px; font-weight:700; }
.usertitle{ margin:1px 0 8px; font-size:10px; font-style:italic; color:var(--engrave-dim); }

/* rank as LED pips */
.pips{ display:flex; gap:3px; justify-content:center; margin:0 0 10px; }
.pip{
  width:8px; height:8px; border-radius:50%;
  background:var(--deck-2); box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.pip.on{
  background:var(--led);
  box-shadow:0 0 4px var(--led), inset 0 1px 1px rgba(255,255,255,.4);
}

/* tape-type strip. sits ABOVE the avatar, top corners clipped. */
.typestrip{
  clip-path:polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%, 0 9px);
  background:var(--glass); color:var(--led);
  font:700 9px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  padding:7px 11px; margin:0 0 7px;
  display:flex; align-items:center; gap:7px;
}
.typestrip .dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--led); box-shadow:0 0 5px var(--led);
}
.typestrip .dot.off{ background:#3a4152; box-shadow:none; }
.typestrip .right{ margin-left:auto; color:#5a6480; }

/* stat readout */
.readout{ padding:7px 8px; font-size:10px; }
.readout dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 8px; }
.readout dt{
  font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#5a6480;
}
.readout dd{ margin:0; text-align:right; color:var(--led); }
.readout .big{
  display:block; margin:0 0 6px; padding-bottom:5px;
  border-bottom:1px solid var(--glass-line);
  font-size:19px; letter-spacing:.14em;
  text-shadow:0 0 8px rgba(224,69,63,.45);
}
.readout .big small{
  display:block; font-size:8px; letter-spacing:.18em;
  text-transform:uppercase; color:#5a6480; text-shadow:none;
}

/* tabs. delete a .tab and its .panel together; the rest still works. */
.tabs{ display:flex; margin:-10px -12px 10px; border-bottom:1px solid #6e7480; }
.tab{
  appearance:none; border:0; border-right:1px solid #6e7480; cursor:pointer;
  background:linear-gradient(180deg, var(--deck-2), #969ca6);
  color:var(--engrave-dim);
  font:700 9px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  padding:8px 13px;
}
.tab:hover{ color:var(--engrave); }
.tab[aria-selected="true"]{
  background:linear-gradient(180deg, var(--deck-3), var(--deck));
  color:var(--engrave);
  box-shadow:inset 0 2px 0 var(--led);
}
.tab:focus-visible{ outline:2px solid var(--led); outline-offset:-3px; }
.panel[hidden]{ display:none; }


/* ---------- 7. CONTENT -------------------------------------- */

/* index / tracklist */
.jcard .side{
  margin:0 0 2px; padding-bottom:3px;
  display:flex; align-items:baseline; gap:7px;
  border-bottom:2px solid var(--card-rule);
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--led-dim);
}
.jcard .side b{ font-size:13px; letter-spacing:0; }
.jcard .side span{ margin-left:auto; color:#8d938e; letter-spacing:.1em; }

.track{
  display:grid; grid-template-columns:20px 1fr auto; gap:8px; align-items:baseline;
  padding:5px 0 4px; border-bottom:1px solid var(--card-rule);
  font-size:11px;
}
.track:last-child{ border-bottom:0; }
.track .no{ font-family:var(--mono); font-size:10px; color:#8d938e; }
.track .ttl a{ color:#2f3a52; font-weight:700; text-decoration:none; }
.track .ttl a:hover{ color:var(--led-dim); text-decoration:underline; }
.track .ttl em{ display:block; font-size:10px; font-style:normal; color:#6f746f; }
.track .len{ font-family:var(--mono); font-size:10px; color:#6f746f; white-space:nowrap; }

/* gallery */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.grid .cell{
  aspect-ratio:4/3; overflow:hidden;
  background:var(--glass); border:1px solid #05070c;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; color:#3d4761;
}
.grid .cell img{ width:100%; height:100%; object-fit:cover; }

/* key / value rows */
.kv{ margin:0; font-size:11px; }
.kv div{
  display:flex; gap:8px; padding:2px 0;
  border-bottom:1px dotted rgba(0,0,0,.18);
}
.kv div:last-child{ border-bottom:0; }
.kv dt{
  flex:none; min-width:84px; padding-top:2px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--engrave-dim);
}
.kv dd{ margin:0; }


/* ---------- 8. GRAPHICS ------------------------------------- */

.slotbox{
  display:grid; place-items:center; text-align:center;
  background:rgba(0,0,0,.07); border:1px dashed #7d8494;
  color:var(--engrave-dim); font-family:var(--mono); font-size:9px;
}

.stamps{ display:flex; flex-wrap:wrap; gap:5px; }
.stamps img, .stamps .slotbox{ width:99px; height:56px; }

.blinkies{ display:flex; flex-wrap:wrap; gap:4px; }
.blinkies img, .blinkies .slotbox{ width:150px; height:20px; }

.buttons88{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.buttons88 img, .buttons88 .slotbox{ width:88px; height:31px; }

.banner{ padding:0; line-height:0; overflow:hidden; }
.banner img{ width:100%; height:auto; display:block; }


/* ---------- 9. FOOTER --------------------------------------- */

.sig{ padding:8px 12px; font-size:11px; font-style:italic; color:var(--engrave-dim); }
.sig .mark{ color:var(--led-dim); font-style:normal; }

.foot{
  margin-top:12px; text-align:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:#5d6885;
}


/* ---------- 10. RESPONSIVE ---------------------------------- */

@media (max-width:660px){
  .deck{ grid-template-columns:1fr; }
  .idcard{ max-width:320px; margin:0 auto; }
  .grid{ grid-template-columns:repeat(2,1fr); }

  .masthead{ flex-direction:column; align-items:flex-start; gap:8px; }
  .reels{ align-self:flex-end; margin-top:-32px; }

  .nav a{ flex:1 1 auto; text-align:center; padding:8px 10px; letter-spacing:.08em; }

  .kv div{ flex-direction:column; gap:0; }
  .kv dt{ min-width:0; }

  .stamps, .blinkies{ justify-content:center; }
  .tab{ padding:8px 10px; letter-spacing:.1em; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}