/* nyaaa.online — the 2006 chrome.
 *
 * Class names deliberately match MySpace's originals (.nametext, .orangetext15,
 * .contactTable, .friendSpace, .blacktext10 ...) so that layout codes copied
 * off period layout sites target the right things and actually work.
 */

body {
  background: #e5e5e5;
  color: #000;
  font-family: 'Noto Sans', Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  margin: 0;
  padding: 0;
}
td, div, p, span, li { font-family: 'Noto Sans', Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
a         { color: #003399; text-decoration: underline; }
a:hover   { color: #ff6600; }
img       { border: 0; }

/* ---------------------------------------------------------------- chrome */
#masthead {
  background: #003399;
  background-image: linear-gradient(#4b7fd4, #003399);
  border-bottom: 2px solid #ff9933;
}
#masthead .inner { width: 800px; margin: 0 auto; padding: 6px 0; }
.logo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px; font-weight: bold; color: #fff;
  text-decoration: none; letter-spacing: -1px;
}
.logo span { color: #ff9933; }
.logo:hover { color: #fff; }
.tagline { color: #b8cdf0; font-size: 9px; margin-left: 6px; }

#navbar {
  width: 800px; margin: 0 auto;
  background: #6699cc;
  border-bottom: 1px solid #003399;
}
#navbar a {
  display: inline-block; padding: 3px 9px;
  color: #fff; text-decoration: none; font-size: 10px; font-weight: bold;
}
#navbar a:hover { background: #ff9933; color: #fff; }
#navbar .sep { color: #b8cdf0; }

#page { width: 800px; margin: 0 auto 24px; background: #fff; padding: 0 0 12px; }
#content { padding: 10px; }

/* ------------------------------------------------------------ profile panels
 *
 * Structure is shop-layout/Tumblr-shaped: named panels in named columns, so a layout
 * can hide, move or restyle any piece by id. The MySpace appearance is applied
 * here as a skin over that structure — it is not baked into the markup.
 *
 * Deliberately NO position:relative on #profile or #columns: that way a layout
 * writing `#id_friends{position:absolute;top:40px;left:600px}` positions against
 * the page, the way art layouts expect, instead of being trapped in a column.
 */
#profile  { width: 800px; margin: 0 auto; }
#columns  { display: flex; align-items: flex-start; gap: 10px; }
#column_1  { width: 300px; flex: 0 0 auto; }   /* width-controlled so a layout's #column_1{width} works */
#column_2  { flex: 1 1 auto; min-width: 0; }

.panel      { margin-bottom: 10px; }
.panel-head {
  background: #6699cc; color: #fff; font-weight: bold;
  font-size: 11px; padding: 3px 5px; margin: 0;
  font-family: 'Noto Sans', Verdana, Arial, sans-serif;
}
.panel-body { }

/* panels that are just loose text, not a boxed table */
.panel-name .panel-body,
.panel-network .panel-body { padding: 0 0 4px; }

/* the boxed sections */
table.profileInfo {
  width: 100%; border: 1px solid #6699cc; border-collapse: collapse;
  background: #fff;
}
table.profileInfo td { padding: 3px 4px; font-size: 10px; vertical-align: top; }
table.profileInfo td.label {
  width: 34%; background: #b8cdf0; font-weight: bold; color: #003399;
}
/* .sectionHead kept as an alias so older markup and pasted codes still hit it */
.sectionHead {
  background: #6699cc; color: #fff; font-weight: bold;
  padding: 3px 5px; font-size: 11px;
}

/* ------------------------------------------------------------- profile bits */
.profilePhotoWrap { margin: 6px 0; }
.profilePhoto { border: 1px solid #999; padding: 2px; background: #fff; max-width: 250px; }
.mediaPlayer { border: 1px solid #6699cc; background: #fff; padding: 6px; }
.onlineNow {
  display: inline-block; background: #ffcc00; color: #003399;
  border: 1px solid #ff9933; font-weight: bold; font-size: 9px;
  padding: 1px 4px; margin-left: 4px;
}
.headline { font-style: italic; margin: 2px 0 6px; }
.userProfileURL { font-size: 10px; color: #666; word-break: break-all; }

table.contactTable { width: 100%; border: 1px solid #6699cc; border-collapse: collapse; }
table.contactTable td {
  width: 50%; padding: 4px; font-size: 10px; text-align: center;
  border: 1px solid #d5e2f5;
}

.friendSpace { }
.friendSpace .friend {
  display: inline-block; width: 88px; vertical-align: top;
  text-align: center; margin: 0 6px 10px 0; font-size: 10px;
}
.friendSpace .friend img {
  width: 80px; height: 80px; object-fit: cover;
  border: 1px solid #999; background: #eee;
}

.commentRow { border-bottom: 1px solid #d5e2f5; }
.commentRow td { padding: 6px 4px; vertical-align: top; }
.commentAuthor { width: 100px; text-align: center; }
.commentAuthor img { width: 70px; height: 70px; object-fit: cover; border: 1px solid #999; }
.commentDate { color: #666; font-size: 9px; }

/* --------------------------------------------------------------- forms */
.formBox { width: 380px; margin: 24px auto; border: 1px solid #6699cc; background: #fff; }
.formBox .sectionHead { margin: 0; }
.formBox .body { padding: 12px; }
.formBox label { display: block; font-weight: bold; margin: 8px 0 2px; color: #003399; }
input[type=text], input[type=password], textarea, select {
  font-family: 'Noto Sans', Verdana, Arial, sans-serif; font-size: 11px;
  border: 1px solid #7f9db9; padding: 3px; width: 100%; box-sizing: border-box;
  background: #fff; color: #000;
}
textarea { min-height: 120px; }
input[type=submit], button {
  font-family: 'Noto Sans', Verdana, Arial, sans-serif; font-size: 11px; font-weight: bold;
  background: #6699cc; color: #fff; border: 1px solid #003399;
  padding: 3px 14px; cursor: pointer; margin-top: 10px; width: auto;
}
input[type=submit]:hover, button:hover { background: #ff9933; }

.error { border: 1px solid #cc0000; background: #ffecec; color: #cc0000;
         padding: 6px 8px; margin: 8px 0; font-weight: bold; }
.notice { border: 1px solid #ff9933; background: #fff8e5; padding: 6px 8px; margin: 8px 0; }
.hint   { color: #666; font-size: 9px; font-weight: normal; }

#footer {
  width: 800px; margin: 0 auto 30px; text-align: center;
  color: #666; font-size: 9px; padding: 8px 0; border-top: 1px solid #ccc;
}

/* No browser has supported <blink> since about 2013. It is not a 2006 site
   without it, so it comes back as an animation. */
@keyframes nyaaaBlink { 0%,49% { visibility: visible } 50%,100% { visibility: hidden } }
blink, .blink { animation: nyaaaBlink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { blink, .blink { animation: none } }

/* ------------------------------------------------- legacy MySpace class hooks
 *
 * Real 2006 layout codes address these names. They are defined here (rather
 * than left undefined) so that a pasted code overriding them actually changes
 * something visible, and so the defaults look period-correct on their own.
 */
.text          { font-size: 10px; }
.btext         { font-weight: bold; }
.blacktext10   { font-size: 10px; color: #000; }
.blacktext12   { font-size: 12px; color: #000; }
.whitetext12   { font-size: 12px; color: #fff; }
.lightbluetext8{ font-size: 9px;  color: #6699cc; }
.orangetext15  { font-size: 15px; font-weight: bold; color: #ff6600; }
.redtext       { color: #cc0000; }
.redbtext      { color: #cc0000; font-weight: bold; }
.nametext      { font-size: 15px; font-weight: bold; color: #ff6600; }
.redlink:link, .redlink:visited { color: #cc0000; }
.extendedNetwork { }
.interestsAndDetails { }
.blurbs { }
.friendsComments { }
.latestBlogEntry { }
.userProfileURL { word-break: break-all; }

/* A layout that hides a panel should hide its heading too — panels carry their
   own <h2>, so #id_x{display:none} already does the whole block. */

/* Inside the customiser's preview frame, strip the site chrome so what you see
   is the profile itself and nothing else. */
body.previewMode #masthead,
body.previewMode #navbar,
body.previewMode #footer { display: none; }
body.previewMode #page   { padding-top: 8px; }

/* profile song + banner (new fields) */
.profileBanner { margin-bottom: 6px; }
.profileBanner img { width: 100%; display: block; border: 1px solid #6699cc; }
.songTitle { margin-bottom: 4px; }
audio.mediaPlayer { background: #fff; }

/* ---------------------------------------------------- decorations (stickers) */
#profile { position: relative; }   /* anchor stickers + floated panels to the profile box */
.decorLayer { position: absolute; inset: 0; pointer-events: none; }
.decor-item { position: absolute; pointer-events: auto; max-width: none; user-select: none; }
.decorLayer.editing .decor-item { outline: 1px dashed rgba(53,192,255,.6); cursor: move; }
.decor-handle { position: absolute; width: 14px; height: 14px; background: #35c0ff;
                border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; pointer-events: auto; }
.decorLayer:not(.editing) .decor-handle { display: none; }

/* ---------------------------------------------------------------- playlist */
.pl-bar { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:4px 0; }
.pl-bar button { background:#6699cc; color:#fff; border:1px solid #003399; border-radius:3px;
                 cursor:pointer; font-size:11px; padding:2px 6px; line-height:1; }
.pl-bar button:hover { background:#ff9933; }
.pl-bar button.on { background:#ff9933; }
.pl-vol { width:60px; }
.pl-np { display:flex; align-items:center; gap:5px; width:100%; margin-top:3px; }
.pl-np-art { width:38px; height:29px; object-fit:cover; border:1px solid #6699cc; background:#000; }
.pl-np-title { font-size:10px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-count { font-size:9px; color:#666; margin-left:auto; }
ol.pl-list { list-style:none; margin:4px 0 0; padding:0; max-height:300px; overflow-y:auto;
             border:1px solid #b8cdf0; background:#fff; }
li.pl-track { display:flex; align-items:baseline; gap:5px; padding:2px 5px; cursor:pointer;
              border-bottom:1px solid #eef2fb; font-size:10px; }
li.pl-track:hover { background:#eef4ff; }
li.pl-track.playing { background:#ffe9c9; font-weight:bold; }
li.pl-track.dead { color:#999; text-decoration:line-through; }
.pl-title { color:#003399; }
.pl-artist { color:#666; }
.pl-track .pl-dur { margin-left:auto; color:#999; font-size:9px; }
.pl-dead { color:#cc0000; font-size:9px; }

/* ---------------------------------------------------- builder effect animations */
@keyframes nyaaaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes nyaaaPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes nyaaaSway  { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes nyaaaSpin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce) { *{ animation: none !important } }

/* ------------------------------------------------------------- IM bottom bar */
#imbar{ position:fixed; right:16px; bottom:0; width:210px; z-index:1000;
        font-family:'Noto Sans',Verdana,sans-serif; box-shadow:0 -2px 10px rgba(0,0,0,.25); }
#imbar-head{ background:#003399;   /* flat fill (no gradient) so a profile's Chat-button colour picker wins */
             color:#fff; font-weight:bold; font-size:11px; padding:6px 9px; cursor:pointer;
             border-radius:6px 6px 0 0; border:1px solid #003399; display:flex; align-items:center; gap:5px; }
#imbar-unread{ color:#ffde5c; }
#imbar-caret{ margin-left:auto; font-size:9px; }
#imbar-body{ display:none; background:#fff; border:1px solid #6699cc; border-top:0; max-height:320px; overflow-y:auto; }
#imbar-buddies{ padding:4px; }
.imbuddy{ padding:4px 6px; font-size:11px; cursor:pointer; border-radius:3px; display:flex; align-items:center; gap:5px; }
.imbuddy:hover{ background:#eef4ff; }
.imdot{ width:8px; height:8px; border-radius:50%; background:#ccc; display:inline-block; }
.imdot.on{ background:#3a3; }
.imbadge{ background:#cc0000; color:#fff; border-radius:8px; font-size:9px; padding:0 5px; margin-left:auto; }
.imhint{ color:#999; font-size:10px; padding:4px 6px; display:block; }
#imbar-foot{ border-top:1px solid #eef2fb; padding:5px 7px; font-size:10px; }
#imchat{ position:fixed; right:236px; bottom:0; width:260px; height:320px; z-index:1000;
         background:#fff; border:1px solid #6699cc; border-radius:6px 6px 0 0; display:none; flex-direction:column;
         box-shadow:0 -2px 12px rgba(0,0,0,.3); font-family:'Noto Sans',Verdana,sans-serif; }
#imchat-head{ background:#6699cc; color:#fff; font-weight:bold; font-size:11px; padding:6px 9px;
              border-radius:6px 6px 0 0; display:flex; }
#imchat-x{ margin-left:auto; cursor:pointer; }
#imchat-log{ flex:1; overflow-y:auto; padding:6px; background:#fff; }
.immsg{ font-size:11px; margin:2px 0; } .immsg b{ color:#003399; } .immsg.mine b{ color:#cc0000; }
.imtime{ color:#aaa; font-size:9px; }
#imchat-form{ display:flex; border-top:1px solid #d5e2f5; }
#imchat-input{ flex:1; border:0; padding:6px; font:11px 'Noto Sans',sans-serif; }
#imchat-input:focus{ outline:none; }
#imchat-form button{ background:#6699cc; color:#fff; border:0; padding:0 12px; cursor:pointer; font-size:11px; }
#imchat-form button:hover{ background:#ff9933; }

/* ---- home feed ------------------------------------------------------------ */
.postCard { border: 1px solid #8ba7c9; background: #fff; margin: 0 0 8px; }
.postHead { display: flex; align-items: center; gap: 8px; padding: 5px 7px;
            background: #e5eefa; border-bottom: 1px solid #b8cde4; }
.postHead img { width: 34px; height: 34px; object-fit: cover; border: 1px solid #8ba7c9; display: block; }
.postWho { font-weight: bold; font-size: 11px; }
.postDel { margin-left: auto; }
.postDel input { font-size: 10px; padding: 1px 5px; }
/* A post is user HTML, so it must not be able to shove the page around. */
.postBody { padding: 8px 9px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.postBody img { max-width: 100%; height: auto; }
.postBody iframe { max-width: 100%; }
#feedMore { text-align: center; margin: 6px 0 14px; font-size: 11px; }
.postMedia { background: #000; text-align: center; }
.postMedia img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.postVideo { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.postAudio { width: 100%; display: block; }
.mangaLink { display: flex; align-items: center; gap: 10px; background: #fff; padding: 7px;
             text-align: left; font-size: 11px; }
.mangaLink img { width: 60px; height: auto; border: 1px solid #8ba7c9; }
.shelf { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; }
.shelfBook { width: 120px; font-size: 10px; text-align: center; }
.shelfBook img { width: 120px; height: 170px; object-fit: cover; border: 1px solid #8ba7c9; background: #eee; display: block; }
.shelfTitle { font-weight: bold; margin: 3px 0 1px; overflow-wrap: anywhere; }
.shelfBook input[type=submit] { font-size: 9px; padding: 0 4px; margin-top: 3px; }