/*
  oshi.wtf - profile page
  structure follows an old-school profile layout: 800px page, 300px left column, the rest on the right.
  whole page uses the starfield gif (assets/banner-bg.gif).
*/

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}

body{
  margin:0;
  padding:8px 0 40px;
  font:11px/1.3 Verdana,Arial,Helvetica,sans-serif;
  color:#fff;
  background-color:#000;
  background-image:url("assets/backgrounds/starfield.gif");
  background-repeat:repeat;
  background-attachment:fixed;
  background-position:0 0;
  background-size:auto;
  transition:background-image .4s ease, background-color .4s ease;
}
body.bg-starfield{
  background-image:url("assets/backgrounds/starfield.gif");
  background-repeat:repeat;
  background-attachment:fixed;
  background-size:auto;
}
body.bg-basement,
body.bg-basement.track-4me,
body.bg-basement.track-way{
  background-color:#0a060c;
  background-image:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)), url("assets/pfp.gif");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  background-blend-mode:normal;
}
body.bg-stretch{
  background-image:url("assets/backgrounds/starfield.gif");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}
body.track-4me{
  background-image:url("assets/covers/4me.jpg"), url("assets/backgrounds/starfield.gif");
  background-size:cover, auto;
  background-repeat:no-repeat, repeat;
  background-position:center, 0 0;
  background-blend-mode:soft-light, normal;
}
body.track-lose .eq i{background:#7ad7ff}
body.track-lose .seek-fill{background:#7ad7ff}
body.track-weak .info{outline:1px dashed #ff8eb8;padding:0 2px}
body.track-way{background-color:#120810}
.music .way-out-note{margin:6px 3px 0}

a{color:#ff8eb8;text-decoration:underline}
a:visited{color:#ff4ea7}
a:hover{color:#fff}
img{border:0}
p{margin:0 0 6px;line-height:1.3}
h1,h2,h3{margin:0}
ul{list-style:none;margin:0;padding:0}
table{border-collapse:separate}
button{font:inherit}

.hidden{display:none !important}

/* ================= master container ================= */
.master-container{
  width:800px;
  margin:0 auto;
  background:transparent;
}

/* ================= header ================= */
.main-header{background:transparent;color:#fff}
.main-header ul{list-style:none;margin:0;padding:0}
.main-header a,.main-header a:visited{color:#fff;text-decoration:none}
.main-header a:hover{color:#ff8eb8;text-decoration:underline}

.search-bar{
  display:grid;
  grid-template-columns:200px 1fr 200px;
  align-items:center;
  padding:3px 6px;
  font-size:10px;
}
.search-bar form{justify-self:center;margin:0;display:flex;align-items:center;gap:6px;white-space:nowrap}
.search-bar input[type="text"]{font:10px Verdana,Arial,sans-serif;width:150px;border:1px solid #666;padding:1px 2px}
.search-bar input[type="radio"]{margin:0 2px 0 0;vertical-align:middle}
.topnav{display:flex}
.topnav li+li:before,.topnav li:first-child:after{content:""}
.topnav li:first-child:after{content:"|";margin:0 5px}
.signup{justify-self:end}

.submit-btn{
  font:10px Verdana,Arial,sans-serif;
  padding:1px 6px;
  background:#e0ffff;
  border:1px solid #bababa;
  border-top-color:#fff;border-left-color:#fff;
  color:#000;
  cursor:pointer;
}
.submit-btn:active{border:1px solid #666;border-top-color:#333;border-left-color:#333}

.logo-row{padding:6px 10px 8px;display:flex;align-items:baseline;gap:10px;border-top:1px solid #333}
.logo{
  font:italic bold 30px/1 "Times New Roman",Times,serif;
  letter-spacing:-1px;
  color:#fff !important;
  text-decoration:none !important;
}
.logo span{font-size:18px;color:#ff4ea7}
.logo-sub{font:italic 11px "Times New Roman",Times,serif;color:#ff8eb8}

.nav-blinkie{margin:0;padding:8px 6px 2px;text-align:center;line-height:0}
.nav-blinkie img{display:inline-block;image-rendering:pixelated}
.navbar{background:transparent;border:0;padding:6px 6px 4px;font-size:11px}
.navbar ul{display:flex;flex-wrap:wrap;justify-content:center}
.navbar li:after{content:"|";margin:0 4px;color:#ff4ea7}
.navbar li:last-child:after{content:""}
.navbar a{text-shadow:0 0 4px #000, 1px 1px 0 #000}
.navbar a:hover{color:#ff8eb8;text-decoration:underline}
.new{color:#ff0;background:#c00;font:bold 8px Arial,sans-serif;padding:0 2px;margin-left:2px;vertical-align:top;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{visibility:hidden}}

/* ================= two-column grid ================= */
.page-content-container{
  display:grid;
  grid-template-columns:300px 1fr;
  column-gap:14px;
  padding:8px 10px 14px;
  align-items:start;
}

/* ================= sidebar ================= */
.profile-sidebar{width:300px}
.profile-sidebar h1{font:bold 13px Verdana,Arial,sans-serif;margin:2px 0 0;color:#ff4ea7}
.headline{font-size:10px;color:#ff8eb8;margin:0 0 4px}

.profile-picture-container{display:flex;gap:10px;margin-bottom:6px}
.pic-col{width:160px;flex:none;text-align:center}
.profile-pic-frame{
  display:block;
  width:160px;
  margin:0 auto 5px;
  padding:4px;
  background:#fff;
  border:1px solid #000;
}
.profile-pic{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  margin:0 auto;
  border:0;
  background:#fff;
}
.pics-videos{margin:0;font-size:10px}
.pics-videos a{font-weight:bold;text-decoration:none}
.info-col{flex:1;display:flex;flex-direction:column;min-width:0}
.personal-msg{font-weight:bold;margin:0 0 8px;line-height:1.25}
.location{margin-bottom:6px;font-size:10px}
.stat-list{font-size:10px;margin-bottom:6px}
.last-login{font-size:10px;margin-top:auto}
.mood-line{font-size:10px;margin:0 0 8px}
#mood{background:#000;color:#ff4ea7;padding:0 3px}

/* contact box */
.contact-box{border:2px solid #000;margin-bottom:8px;background:#ff9ec0;color:#000}
.contact-box h2{background:#ff4ea7;color:#000;font:bold 11px Verdana,Arial,sans-serif;padding:2px 8px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 4px;padding:5px 6px 6px}
.contact-grid a{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:bold;text-decoration:none;color:#003399}
.contact-grid a:hover{text-decoration:underline;color:#cc0000}
.contact-grid i{
  flex:none;
  display:inline-block;
  width:16px;height:16px;
  line-height:14px;
  text-align:center;
  font:bold 10px Arial,sans-serif;
  font-style:normal;
  color:#fff;
  background:#ff4ea7;
  border:1px solid #000;
}
.contact-grid li:nth-child(4n+2) i,.contact-grid li:nth-child(4n+3) i{background:#000;border-color:#000;color:#ffb6c1}

.url-box{border:1px solid #000;padding:2px 4px;margin-bottom:8px;background:#ff9ec0;color:#000}
.url-box h3{font-size:10px}
.url-box p{margin:0;padding-left:4px;font-size:10px}

/* sidebar tables */
.sidebar-table{
  width:100%;
  border:2px solid #000;
  border-spacing:2px;
  margin-bottom:8px;
  background:transparent;
}
.sidebar-table caption{padding:0}
.sidebar-table-h2{
  background:#ff4ea7;
  color:#000;
  text-align:left;
  font:bold 11px Verdana,Arial,sans-serif;
  padding:2px 8px;
  border:2px solid #000;
  border-bottom:0;
}
.sidebar-table th{
  width:84px;
  vertical-align:top;
  text-align:left;
  background:#ff8eb8;
  color:#000;
  padding:3px;
  font-size:10px;
}
.sidebar-table td{
  vertical-align:top;
  background:#ffc0d4;
  color:#000;
  padding:3px;
  font-size:10px;
}
.sidebar-table td a{color:#0033cc}
.sidebar-table td a:visited{color:#551a8b}
.sidebar-table td a:hover{color:#cc0000}
.sidebar-table td p{margin:0 0 5px}
.sidebar-table td p:last-child{margin-bottom:0}

/* webring + badges */
.webring{border:1px dashed #000;background:#ff9ec0;color:#000;padding:4px;text-align:center;font-size:10px;margin-bottom:4px}
.ring-title{font:italic bold 11px "Times New Roman",Times,serif;margin:0 0 2px;color:#ff4ea7}
.webring a{color:#0033cc}
.webring a:visited{color:#551a8b}
.ring-nav{margin:0 0 5px}
.badges{display:flex;justify-content:center;gap:4px}
.badge{
  display:inline-block;
  width:88px;height:31px;
  font:bold 8px/1.1 Arial,sans-serif;
  text-align:center;
  padding-top:5px;
  border:1px solid #000;
  color:#fff;
}
.b1{background:#000;color:#ff4ea7}
.b2{background:#6b4cff}
.b3{background:#ff4ea7;color:#000}
.b-grammy{background:linear-gradient(#ffe08a,#d4a017);color:#000;border-color:#8a6a00}
.grammy{color:#b8860b;letter-spacing:.02em}

/* ================= main column ================= */
main{min-width:0}

.banner{
  border:1px solid #000;
  margin-bottom:3px;
  background:#000 url("assets/banner-bg.gif") center / cover;
  line-height:0;
  text-align:center;
  padding:18px 8px;
}
.banner img{width:auto;max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto}

.ticker{
  overflow:hidden;
  white-space:nowrap;
  border:1px solid #000;
  background:#000;
  color:#ff4ea7;
  font:10px "Courier New",Courier,monospace;
  margin-bottom:8px;
  padding:1px 0;
}
.ticker span{display:inline-block;padding-left:100%;animation:ticker 28s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}

.main-section-header{background:#ff4ea7;border:1px solid #000;border-left:0;border-right:0;padding:2px 0;margin-bottom:5px}
.main-section-h2{color:#000;font:bold 11px Verdana,Arial,sans-serif;margin-left:8px}
.main-section-h2 .tag{font-weight:normal;font-size:9px;color:#fff;margin-left:4px}

main section{margin-bottom:12px}

/* player */
.player{border:1px solid #000;background:#ff9ec0;color:#000;margin:0 3px 6px;font-size:10px}
.player-title{
  display:flex;justify-content:space-between;
  background:#ff4ea7;color:#000;
  padding:1px 5px;
  font-size:9px;
}
.player-title #playerState{color:#fff}
.player-body{padding:4px 5px;border-top:1px solid #fff}
.player-now{margin-bottom:4px;background:#000;color:#ff4ea7;padding:2px 4px;font:10px "Courier New",Courier,monospace;border:1px inset #808080}
.player-ctrl{display:flex;align-items:center;gap:2px}
.player button{
  min-width:22px;height:17px;
  padding:0 3px;
  font:bold 9px Arial,sans-serif;
  color:#000;
  background:#d4d0c8;
  border:1px solid;
  border-color:#fff #404040 #404040 #fff;
  cursor:pointer;
  line-height:1;
}
.player button:active{border-color:#404040 #fff #fff #404040}
.seek{
  flex:1;
  height:11px;
  margin:0 4px;
  background:#fff0f5;
  border:1px solid;
  border-color:#d48aa8 #fff #fff #d48aa8;
  cursor:pointer;
  position:relative;
  touch-action:none;
  user-select:none;
}
.seek-fill{
  height:100%;
  width:0;
  background:#ffb6c1;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.seek.is-dragging .seek-fill{background:#ff8eb8}
.time{font:9px "Courier New",Courier,monospace;min-width:62px;text-align:right}
.player-row2{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:9px}
.vol{display:flex;align-items:center;gap:3px}
.vol input{width:52px;height:10px;margin:0}
.player-links{margin-left:auto}
.eq{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:18px;
  width:56px;
  background:#000;
  padding:2px;
  border:1px solid #333;
}
.eq i{
  display:block;
  flex:1;
  min-width:2px;
  background:#ff8eb8;
  height:2px;
  transition:height .05s linear;
}

.credits-intro{margin:0 8px 5px;font-size:10px}
.credits-more{margin:2px 8px 0;text-align:right}
.tracks,.plain-table,.loop-table{width:calc(100% - 6px);margin:0 3px 4px;border-spacing:1px;font-size:10px}
.tracks th,.plain-table th,.loop-table th{background:#ff4ea7;color:#000;text-align:left;padding:2px 4px;font-size:10px}
.tracks td,.plain-table td,.loop-table td{background:#ffc0d4;color:#000;padding:2px 4px;vertical-align:middle}
.tracks td a,.plain-table td a,.loop-table td a{color:#0033cc}
.tracks td a:visited,.plain-table td a:visited,.loop-table td a:visited{color:#551a8b}
.tracks tr.active td{background:#ff8eb8}
.tracks td:first-child,.tracks th:first-child{width:22px;text-align:center}
.tracks .plays{text-align:right;width:44px}
.tracks td:nth-child(4){width:34px}
.tracks td:nth-child(5){width:64px}
.track-link{font-weight:bold}

.fineprint{font-size:9px;color:#ff8eb8;margin:2px 3px 0}
.tracks + .fineprint,.loop-table + .fineprint,.comment-form .fineprint,.patreon-box .fineprint{color:#333}

/* blog */
.blog{margin-left:3px}
.blog p{margin:0 0 5px}

/* blurbs */
.blurbs h3,.blurbs p{margin-left:8px;margin-right:8px}
.blurbs h3{color:#ff4ea7;font:bold 11px Verdana,Arial,sans-serif;margin-top:4px}
.blurbs p{margin-bottom:8px}
.info{color:#ff8eb8;font-weight:bold}

/* projects bars */
.bar{display:inline-block;width:50px;height:7px;border:1px solid #000;background:#ffe0ea;vertical-align:middle;margin-right:3px}
.bar i{display:block;height:100%;background:#ff4ea7}

/* releases */
/* videos */
.videos-intro{margin:0 8px 8px;font-size:10px;line-height:1.4}
.videos-intro a{font-weight:bold}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 6px;margin-bottom:4px}
.video-card{margin:0}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid #000;
  background:#000;
  overflow:hidden;
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card figcaption{margin-top:3px;font-size:10px;font-weight:bold}
.videos-more{margin:4px 8px 0;text-align:right}
@media (max-width:620px){.video-grid{grid-template-columns:1fr}}

.release-row{display:flex;flex-wrap:wrap;gap:10px;padding:0 6px}
.release-row figure{margin:0;width:100px;text-align:center;font-size:10px}
.release-row a{text-decoration:none}
.cover{
  width:100px;height:100px;
  border:1px solid #000;
  display:block;
  object-fit:cover;
  margin:0 auto 3px;
  background:#111;
}
.release-row figcaption{color:#ff8eb8;line-height:1.25}
.release-row figcaption a{color:#ff8eb8;font-weight:bold;text-decoration:underline}

/* shared placeholder art */
.art-a{background:repeating-linear-gradient(45deg,#ff7b00 0 8px,#ffdf66 8px 16px)}
.art-b{background:repeating-linear-gradient(-45deg,#5ce1e6 0 6px,#5a45ff 6px 12px)}
.art-c{background:radial-gradient(circle at 30% 30%,#111 0 10%,transparent 11%),linear-gradient(135deg,#ff4ea7 0 45%,#111 45%)}

/* loops */
.loop-table td:first-child,.loop-table th:first-child{width:34px;padding:2px}
.mini-art{
  width:28px;height:28px;
  border:1px solid #000;
  display:block;
  object-fit:cover;
  background:#111;
  image-rendering:pixelated;
}
.loop-table td:last-child{width:72px}

/* patreon */
.patreon-box{margin:0 3px;border:2px dashed #000;background:#ff9ec0;color:#000;padding:6px 8px;text-align:center}
.patreon-box p{margin:0 0 5px}
.go-btn,.go-btn:visited{
  display:inline-block;
  background:#ff4ea7;
  color:#000;
  font-weight:bold;
  text-decoration:none;
  padding:3px 8px;
  border:2px solid;
  border-color:#fff #000 #000 #fff;
}
.go-btn:hover{background:#ff8eb8;color:#000;text-decoration:none}

/* friends */
.friend-count{margin:0 8px 6px}
.focus-highlight{color:#cc0000;font-weight:normal;font-size:12px}
.friend-pic-container{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;padding:0 3px}
.friend-pic-container figure{margin:0;text-align:center}
.friend-pic-container figcaption{font-size:10px;margin-bottom:2px;font-weight:bold}
.friend-pic{
  width:84px;height:84px;
  margin:0 auto;
  border:1px solid #000;
  display:grid;place-items:center;
  font:bold 34px Arial,sans-serif;
  color:#fff;
  text-shadow:1px 1px #000;
  object-fit:cover;
  background:#ccc;
}
img.friend-pic{display:block;padding:0;text-shadow:none}
.p1{background:#6b4cff}
.p2{background:repeating-linear-gradient(45deg,#999 0 6px,#bbb 6px 12px)}
.p3{background:repeating-linear-gradient(45deg,#8a8a8a 0 6px,#aaa 6px 12px)}
.p4{background:repeating-linear-gradient(45deg,#999 0 6px,#bbb 6px 12px)}
.p5{background:repeating-linear-gradient(45deg,#8a8a8a 0 6px,#aaa 6px 12px)}
.p6{background:repeating-linear-gradient(45deg,#999 0 6px,#bbb 6px 12px)}
.p7{background:repeating-linear-gradient(45deg,#8a8a8a 0 6px,#aaa 6px 12px)}
.p8{background:repeating-linear-gradient(45deg,#ff9933 0 6px,#ffcc99 6px 12px)}
.friends-list-link{text-align:right;margin:4px 8px 0}
.friends-list-link a{color:#cc0000}

/* comments */
.comment-wall .main-section-header{margin-bottom:3px}
#comment-counter{margin:0 8px 4px}
#commentTable{width:calc(100% - 6px);margin:0 3px 4px;border-spacing:2px}
#commentTable th{
  width:110px;
  background:#ff4ea7;
  color:#000;
  padding:3px;
  vertical-align:top;
  text-align:left;
  font-size:10px;
}
#commentTable td{background:#ffc0d4;color:#000;padding:3px;vertical-align:top}
#commentTable a{color:#0033cc}
#commentTable a:visited{color:#551a8b}
#commentTable figure{margin:0}
#commentTable figcaption{margin-bottom:3px}
.c-pic{
  width:56px;height:56px;
  border:1px solid #000;
  display:grid;place-items:center;
  font:bold 24px Arial,sans-serif;
  color:#fff;
  text-shadow:1px 1px #000;
  object-fit:cover;
  background:#ccc;
}
img.c-pic{display:block;padding:0;text-shadow:none}
.cp1{background:#6b4cff}
.cp2{background:repeating-linear-gradient(-45deg,#5ce1e6 0 6px,#5a45ff 6px 12px)}
.cp3{background:repeating-linear-gradient(45deg,#ff7b00 0 8px,#ffdf66 8px 16px)}
.cp0{background:repeating-linear-gradient(45deg,#999 0 6px,#bbb 6px 12px)}
#commentTable h3{font:bold 11px Verdana,Arial,sans-serif;margin-bottom:6px}
#commentTable p{margin:0;white-space:pre-wrap;word-wrap:break-word}
#add-comment{text-align:right;margin:0 8px 4px}
.comment-form{margin:0 3px;padding:5px;border:1px solid #000;background:#ff9ec0;color:#000}
.comment-form p{margin:0 0 5px}
.comment-form input[type="text"]{font:11px Verdana,Arial,sans-serif;border:1px solid #666;padding:1px 3px}
.comment-form textarea{width:100%;font:11px Verdana,Arial,sans-serif;border:1px solid #666;padding:3px;resize:vertical}

/* ================= footer ================= */
.footer{background:transparent;border-top:1px solid #ff4ea7;padding:8px 10px 6px;text-align:center}
.footer ul{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0}
.footer li:after{content:" | ";margin:0 3px;color:#ff4ea7}
.footer li#last:after{content:""}
.footer a{font-size:10px}
.footer small{display:block;margin-top:8px;font-size:9px;color:#ff8eb8}

/* ================= status tooltip ================= */
.status{
  position:fixed;
  left:10px;bottom:10px;
  max-width:300px;
  background:#ffffe1;
  color:#000;
  border:1px solid #000;
  padding:3px 6px;
  font:11px Tahoma,Verdana,sans-serif;
  display:none;
  z-index:10;
}
.status.show{display:block}

/* ================= mobile: just stack it, keep everything crusty ================= */
@media (max-width:830px){
  body{padding:0 0 40px}
  .master-container{width:100%;border-left:0;border-right:0}
  .search-bar{grid-template-columns:1fr;gap:4px;justify-items:start}
  .search-bar form{justify-self:start;flex-wrap:wrap;white-space:normal}
  .signup{justify-self:start}
  .page-content-container{display:block;padding:8px 6px 10px}
  .profile-sidebar{width:100%;margin-bottom:10px}
  .friend-pic-container{grid-template-columns:repeat(4,1fr)}
  .friend-pic{width:100%;max-width:84px;height:auto;aspect-ratio:1}
  .release-row{flex-wrap:wrap}
  .player-row2{flex-wrap:wrap}
  .player-links{margin-left:0}
}
@media (max-width:480px){
  .time{min-width:0}
  .friend-pic-container{grid-template-columns:repeat(2,1fr)}
  #commentTable th{width:80px}
  .ticker{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker span,.new{animation:none}
}

/* ================= handmade / inconsistent skins ================= */
.blinkie-row,.blinkie-strip{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0;justify-content:flex-start}
.blinkie-strip{justify-content:center;margin:4px 3px 8px}
.blinkie-row img,.blinkie-strip img{image-rendering:pixelated;border:1px solid #000}
.divider-line{text-align:center;margin:6px 0 10px;line-height:0}
.divider-line img{max-width:100%;height:auto}
.button-rack{
  display:flex;flex-wrap:wrap;gap:4px;
  justify-content:center;
  margin:6px 0 4px;
}
.button-rack img{image-rendering:pixelated;border:1px solid #222}
.glitter-line{margin:4px 0;line-height:0}
.badge-img{border:1px solid #000;background:#111}
.banner .welcome-glitter,
.banner .banner-glitter{display:block;margin:0 auto 8px;image-rendering:auto}
.banner img:last-child{margin-bottom:0}
.inline-glitter{vertical-align:middle;margin-right:4px;height:40px;width:auto}
.music-banner{
  padding:0;
  background:#000;
  border:1px solid #000;
  line-height:0;
  overflow:hidden;
}
.music-banner .main-section-h2{margin:0}
.music-banner-gif{
  display:block;
  width:100%;
  height:56px;
  object-fit:fill;
}
.sidebar-table .blinkie-row{margin-top:4px}
.footer-glitter{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;margin:0 0 4px}

.hdr-black{background:#111;border-color:#ff4ea7}
.hdr-black .main-section-h2{color:#ff8eb8}
.hdr-gray{background:#bbb;border-color:#666}
.hdr-gray .main-section-h2{color:#111}
.hdr-plain{background:transparent;border:1px dashed #ff8eb8}
.hdr-plain .main-section-h2{color:#ff8eb8}
.hdr-folder{background:#c9a227;border-color:#000}
.hdr-folder .main-section-h2{color:#111}
.hdr-glitter{background:#000 url("assets/backgrounds/checker-pink.gif");border-color:#ff4ea7}
.hdr-glitter .main-section-h2{color:#fff;text-shadow:1px 1px #000}

.skin-black .player{background:#1a1014;color:#ffc0d4;border-color:#ff4ea7}
.skin-black .player-title{background:#000;color:#ff8eb8}
.skin-black .player-body{border-top-color:#ff4ea7}
.skin-black .tracks th{background:#000;color:#ff8eb8}
.skin-black .tracks td{background:#2a1520;color:#ffc0d4}
.skin-black .tracks tr.active td{background:#4a2035}
.skin-black .tracks td a{color:#ff8eb8}
.skin-black .fineprint{color:#ff8eb8}

.skin-paper{
  background:#f5f0eb url("assets/backgrounds/paper.gif");
  color:#111;
  border:1px solid #000;
  padding-bottom:6px;
}
.skin-paper .blurbs h3{color:#cc0066}
.skin-paper .blurbs p,.skin-paper .info{color:#222}
.skin-paper .info{color:#cc0066}

.skin-gray .plain-table th,.table-gray th{background:#888;color:#fff}
.skin-gray .plain-table td,.table-gray td{background:#ddd;color:#111}
.skin-gray .credits-intro{color:#ddd}

.skin-text{padding:0 2px}
.skin-text .blog p{color:#ffc0d4}
.skin-folder{border:2px outset #e6c35c;background:#3a2a10;padding-bottom:4px}
.junk-intro{margin:0 8px 6px;font-size:10px;color:#ffe08a}
.junk-construction{
  margin:0 6px 8px;
  padding:6px;
  border:2px dashed #ff0;
  background:#1a1200;
  text-align:center;
  color:#ffe08a;
  font-size:10px;
}
.junk-construction img{display:block;margin:0 auto 6px;max-width:100%;height:auto}
.junk-construction p{margin:0 0 4px}
.junk-construction b{color:#ff0;letter-spacing:.04em}
.junk-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:0 6px 4px;
}
.junk-grid-unfinished{opacity:.72}
.junk-item{margin:0;text-align:center;font-size:9px;color:#ffc0d4}
.junk-item img{border:1px solid #000;background:#111;display:block;margin:0 auto 3px;image-rendering:pixelated}
.junk-item span{color:#aaa;font-style:italic}

/* guestbook */
.guestbook{margin-bottom:12px;padding-bottom:6px}
.guestbook-count{margin:0 8px 6px;font-size:10px}
.guestbook-form{margin:0 6px 8px;padding:6px;border:1px solid #000;background:#fff8f0;color:#111;font-size:10px}
.guestbook-form p{margin:0 0 5px}
.guestbook-form input[type="text"]{font:10px Verdana,Arial,sans-serif;border:1px solid #666;padding:1px 3px}
.guestbook-form textarea{width:100%;max-width:100%;font:10px Verdana,Arial,sans-serif;border:1px solid #666;padding:3px;resize:vertical;box-sizing:border-box}
.guestbook-form .fineprint{color:#333;min-height:1em}
.guestbook-recent-label{margin:0 8px 4px;font-size:10px}
.guestbook-list{margin:0 6px 4px;padding:0;list-style:none;font-size:10px;color:#222}
.guestbook-list li{margin:0 0 7px;padding:4px;border:1px solid #ccc;background:#fff;word-wrap:break-word}
.gb-when{color:#666;font-size:9px}
.gb-name{color:#000}
.gb-site{font-size:9px}
.gb-site a{color:#0033cc}
.gb-msg{display:inline-block;margin-top:2px}

.currently{margin-bottom:8px}
.currently .sidebar-table th{width:90px}
.skin-glitter .patreon-box{
  background:#000 url("assets/backgrounds/checker-pink.gif");
  color:#fff;
  border-style:solid;
  border-color:#ff4ea7;
}

/* player personality */
.player-art-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.player-cover{border:1px solid #000;object-fit:cover;background:#111;flex:none}
.player-art-meta{min-width:0;flex:1}
.player-status{margin:2px 0 0;font:9px "Courier New",Courier,monospace;color:#ff8eb8}
.track-note{
  margin:6px 0 0;
  padding:3px 5px;
  border:1px dashed #ff4ea7;
  background:#000;
  color:#ffc0d4;
  font:10px "Courier New",Courier,monospace;
}
.dont-click{color:#aa8899;font-size:10px}
.dont-click:hover{color:#ff0}

/* videos — old embedded media, not cards */
.video-table{width:calc(100% - 6px);margin:0 3px 4px;border-spacing:2px;font-size:10px}
.video-table td{background:#1a1014;color:#ffc0d4;padding:4px;vertical-align:top;border:1px solid #000}
.video-table a{color:#ff8eb8}
.vid-thumb{width:124px}
.vid-thumb img{display:block;border:1px solid #000;background:#000}
.vid-meta{color:#aaa;font-size:9px}
.vid-embed{margin-top:4px;border:1px solid #000;max-width:100%;background:#000}
.skin-black .videos-intro{color:#ffc0d4}

/* releases — small list, not gallery */
.release-list{list-style:none;margin:0 6px;padding:0}
.release-list li{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:10px;color:#ffc0d4}
.cover-sm{width:64px;height:64px;border:1px solid #000;object-fit:cover;display:block;background:#111}
.release-list a{color:#ff8eb8;font-weight:bold}
.anno{color:#aaa;font-size:9px}

/* archive + eggs */
.archive-box{
  margin:0 3px;
  padding:8px;
  border:2px dashed #ff4ea7;
  background:#0a060c url("assets/backgrounds/basement-tile.gif");
  color:#ffc0d4;
  font-size:10px;
}
.archive-box ul{margin:6px 0 8px 16px;list-style:disc}
.archive-box li{margin:0 0 3px}
.way-out-note{border:1px solid #ff4ea7;padding:4px;background:#000;color:#fff}
.hidden-track-text{margin:8px;padding:4px;border:1px dotted #cc0066;background:#fff0f5;color:#111;font-style:italic}

.egg-popup{
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  z-index:20;
  display:grid;place-items:center;
}
.egg-popup.hidden{display:none !important}
.egg-popup-inner{
  background:#ffffe1;
  color:#000;
  border:3px double #000;
  padding:14px 18px;
  max-width:280px;
  text-align:center;
  font:12px Verdana,Arial,sans-serif;
}
.egg-popup-inner p{margin:0 0 8px}
.egg-popup-wide{max-width:340px;text-align:left}
.egg-popup-wide > p:first-child,
.egg-popup-wide > p:last-child{text-align:center}
.terms-sub{font-weight:normal;font-style:italic;color:#666}
.terms-dict{margin:8px 0 12px;max-height:240px;overflow:auto;font-size:11px}
.terms-dict dt{font-weight:bold;margin-top:6px}
.terms-dict dt:first-child{margin-top:0}
.terms-dict dd{margin:1px 0 0 12px;color:#333}
.screen-takeover{
  position:fixed;inset:0;
  z-index:30;
  display:grid;place-items:center;
}
.screen-takeover.hidden{display:none !important}
.screen-black{background:#000}
.screen-white{background:#fff}
.screen-box{text-align:center;padding:20px}
.screen-box-dark{
  background:#111;
  color:#fff;
  border:2px solid #fff;
  padding:18px 24px;
  font:14px Verdana,Arial,sans-serif;
  max-width:280px;
}
.screen-box-dark a{color:#ff8eb8}
.screen-box-lol a{color:#000}
.lol-text{
  margin:0 0 16px;
  font:bold 72px/1 "Times New Roman",Times,serif;
  color:#000;
  letter-spacing:.04em;
}
.screen-explosion{
  background:#fff;
  overflow:hidden;
}
.explosion-stretch{
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  object-fit:fill;
  image-rendering:pixelated;
  pointer-events:none;
}
.explosion-back{
  position:relative;
  z-index:1;
  margin:0;
  padding:8px 12px;
  background:#ffffe1;
  border:2px solid #000;
  font:12px Verdana,Arial,sans-serif;
}
.explosion-back a{color:#000}
#profilePic{cursor:pointer}
.grammy-badge{cursor:pointer}

/* ================= hacked / corrupted sequence ================= */
body.is-hacking{cursor:wait;user-select:none}
body.is-hacking a{pointer-events:none}
body.hack-flash{background-color:#fff !important;background-image:none !important}
body.hack-invert{filter:invert(1) hue-rotate(180deg)}
body.hack-glitch .master-container{animation:hackShake .12s steps(2) infinite}
@keyframes hackShake{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3px,1px)}
  50%{transform:translate(2px,-2px)}
  75%{transform:translate(-1px,2px)}
  100%{transform:translate(0,0)}
}
.hack-corrupt-text{color:#ff0 !important;background:#c00;padding:0 2px}
.hack-error-bar{
  position:fixed;top:0;left:0;right:0;
  background:#ffffe1;color:#000;
  border-bottom:2px solid #000;
  padding:4px 8px;
  font:11px Tahoma,Verdana,sans-serif;
  z-index:40;
  text-align:center;
}
.recovered-file{
  margin:8px 0 0;
  text-align:center;
  font:bold 11px Verdana,Arial,sans-serif;
}
.recovered-file a{
  color:#ff0 !important;
  background:#000;
  padding:2px 6px;
  border:1px dashed #ff4ea7;
  text-decoration:none !important;
  animation:blink 1s steps(2,start) infinite;
}
.recovered-file a:hover{background:#ff4ea7;color:#000 !important}

.footer-meta{margin:0 0 4px;font-size:10px;color:#ff8eb8}
.footer-meta a{color:#ff8eb8}

@media (max-width:620px){
  .junk-grid{grid-template-columns:repeat(2,1fr)}
  .vid-embed{width:100%;height:auto;aspect-ratio:16/9}
}