/* 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.
 */

/* ---------------------------------------------------------------- the palette
 *
 * Every colour the chrome uses, named for what it IS rather than what it looks
 * like, so a skin can repaint the site by redefining this block and nothing else.
 * The defaults below are the 2006 MySpace blue this site shipped with.
 *
 * Skins live in /assets/css/skins/ and are loaded after this file; see app/skins.php.
 * They only ever reach the site chrome — a profile is its owner's, and loads
 * nya-base.css plus their own CSS instead.
 */
:root {
  --ny-bg:         #e5e5e5;   /* the page behind the 800px column */
  --ny-ink:        #000;   /* body text */
  --ny-paper:      #fff;   /* the white of #page, panels, cards, fields */
  --ny-font:       'Noto Sans', Verdana, Arial, Helvetica, sans-serif;   /* everything */
  --ny-display:    Arial, Helvetica, sans-serif;   /* the logo */
  --ny-head:       #003399;   /* masthead fill, button edges, the brand blue */
  --ny-head-top:   #4b7fd4;   /* top of the masthead gradient */
  --ny-rule:       #ff9933;   /* the orange bar under the masthead, and hovers */
  --ny-bar:        #6699cc;   /* navbar, panel heads, borders — the mid blue */
  --ny-bar-ink:    #fff;   /* text sitting on a coloured bar */
  --ny-link:       #003399;
  --ny-link-hover: #ff6600;
  --ny-label:      #b8cdf0;   /* the label column in an info table */
  --ny-head-dim:   #b8cdf0;   /* quiet text ON the masthead — the tagline */
  --ny-bar-dim:    #b8cdf0;   /* quiet marks ON the navbar — the separators */
  --ny-tint:       #e5eefa;   /* light fill: post heads, the room bar */
  --ny-line:       #d5e2f5;   /* hairline dividers */
  --ny-edge:       #8ba7c9;   /* card borders */
  --ny-muted:      #666;   /* hints, dates, secondary text */
  --ny-danger:     #cc0000;
  --ny-field-edge: #7f9db9;   /* input borders */
}

body {
  background: var(--ny-bg);
  color: var(--ny-ink);
  font-family: var(--ny-font);
  font-size: 10px;
  margin: 0;
  padding: 0;
}
td, div, p, span, li { font-family: var(--ny-font); font-size: 10px; }
a         { color: var(--ny-link); text-decoration: underline; }
a:hover   { color: var(--ny-link-hover); }
/* Visible keyboard focus — removed on no element; 2006 pages had these too. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ny-rule); outline-offset: 1px;
}
img       { border: 0; }

/* ---------------------------------------------------------------- chrome */
#masthead {
  background: var(--ny-head);
  background-image: linear-gradient(var(--ny-head-top), var(--ny-head));
  border-bottom: 2px solid var(--ny-rule);
}
#masthead .inner { width: 800px; margin: 0 auto; padding: 6px 0; }
.logo {
  font-family: var(--ny-display);
  font-size: 26px; font-weight: bold; color: var(--ny-bar-ink);
  text-decoration: none; letter-spacing: -1px;
}
.logo span { color: var(--ny-rule); }
.logo:hover { color: var(--ny-bar-ink); }
.tagline { color: var(--ny-head-dim); font-size: 9px; margin-left: 6px; }

#navbar {
  width: 800px; margin: 0 auto; position: relative;
  background: var(--ny-bar);
  border-bottom: 1px solid var(--ny-head);
}
#navbar a {
  display: inline-block; padding: 3px 9px;
  color: var(--ny-bar-ink); text-decoration: none; font-size: 10px; font-weight: bold;
}
#navbar a:hover { background: var(--ny-rule); color: var(--ny-bar-ink); }
#navbar .sep { color: var(--ny-bar-dim); }

#page { width: 800px; margin: 0 auto 24px; background: var(--ny-paper); 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: var(--ny-bar); color: var(--ny-bar-ink); font-weight: bold;
  font-size: 11px; padding: 3px 5px; margin: 0;
  font-family: var(--ny-font);
}
.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 var(--ny-bar); border-collapse: collapse;
  background: var(--ny-paper);
}
table.profileInfo td { padding: 3px 4px; font-size: 10px; vertical-align: top; }
table.profileInfo td.label {
  width: 34%; background: var(--ny-label); font-weight: bold; color: var(--ny-link);
}
/* .sectionHead kept as an alias so older markup and pasted codes still hit it */
.sectionHead {
  background: var(--ny-bar); color: var(--ny-bar-ink); font-weight: bold;
  padding: 3px 5px; font-size: 11px;
}

/* ------------------------------------------------------------- profile bits */
.profilePhotoWrap { margin: 6px 0; }
.profilePhoto { border: 1px solid #999; padding: 2px; background: var(--ny-paper); max-width: 250px; }
.mediaPlayer { border: 1px solid var(--ny-bar); background: var(--ny-paper); padding: 6px; }
.onlineNow {
  display: inline-block; background: #ffcc00; color: var(--ny-head);
  border: 1px solid var(--ny-rule); 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: var(--ny-muted); word-break: break-all; }

table.contactTable { width: 100%; border: 1px solid var(--ny-bar); border-collapse: collapse; }
table.contactTable td {
  width: 50%; padding: 4px; font-size: 10px; text-align: center;
  border: 1px solid var(--ny-line);
}

.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 var(--ny-line); }
.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: var(--ny-muted); font-size: 9px; }

/* --------------------------------------------------------------- forms */
.formBox { width: 380px; margin: 24px auto; border: 1px solid var(--ny-bar); background: var(--ny-paper); }
.formBox .sectionHead { margin: 0; }
.formBox .body { padding: 12px; }
.formBox label { display: block; font-weight: bold; margin: 8px 0 2px; color: var(--ny-link); }
input[type=text], input[type=password], textarea, select {
  font-family: var(--ny-font); font-size: 11px;
  border: 1px solid var(--ny-field-edge); padding: 3px; width: 100%; box-sizing: border-box;
  background: var(--ny-paper); color: var(--ny-ink);
}
textarea { min-height: 120px; }
input[type=submit], button {
  font-family: var(--ny-font); font-size: 11px; font-weight: bold;
  background: var(--ny-bar); color: var(--ny-bar-ink); border: 1px solid var(--ny-head);
  padding: 3px 14px; cursor: pointer; margin-top: 10px; width: auto;
}
input[type=submit]:hover, button:hover { background: var(--ny-rule); }

.error { border: 1px solid var(--ny-danger); background: #ffecec; color: var(--ny-danger);
         padding: 6px 8px; margin: 8px 0; font-weight: bold; }
.notice { border: 1px solid var(--ny-rule); background: #fff8e5; padding: 6px 8px; margin: 8px 0; }
.hint   { color: var(--ny-muted); font-size: 9px; font-weight: normal; }

#footer {
  width: 800px; margin: 0 auto 30px; text-align: center;
  color: var(--ny-muted); 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 var(--ny-bar); }
.songTitle { margin-bottom: 4px; }
audio.mediaPlayer { background: var(--ny-paper); }

/* ---------------------------------------------------- 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 var(--ny-paper); 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:var(--ny-bar); color: var(--ny-bar-ink); border:1px solid var(--ny-head); border-radius:3px;
                 cursor:pointer; font-size:11px; padding:2px 6px; line-height:1; }
.pl-bar button:hover { background:var(--ny-rule); }
.pl-bar button.on { background:var(--ny-rule); }
.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:var(--ny-muted); margin-left:auto; }
ol.pl-list { list-style:none; margin:4px 0 0; padding:0; max-height:300px; overflow-y:auto;
             border:1px solid var(--ny-label); background:var(--ny-paper); }
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:var(--ny-link); }
.pl-artist { color:var(--ny-muted); }
.pl-track .pl-dur { margin-left:auto; color:#999; font-size:9px; }
.pl-dead { color:var(--ny-danger); 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:var(--ny-head);   /* flat fill (no gradient) so a profile's Chat-button colour picker wins */
             color: var(--ny-bar-ink); font-weight:bold; font-size:11px; padding:6px 9px; cursor:pointer;
             border-radius:6px 6px 0 0; border:1px solid var(--ny-head); display:flex; align-items:center; gap:5px; }
#imbar-unread{ color:#ffde5c; }
#imbar-caret{ margin-left:auto; font-size:9px; }
#imbar-body{ display:none; background:var(--ny-paper); border:1px solid var(--ny-bar); 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:var(--ny-danger); color: var(--ny-bar-ink); 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:var(--ny-paper); border:1px solid var(--ny-bar); 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:var(--ny-bar); color: var(--ny-bar-ink); 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:var(--ny-paper); }
.immsg{ font-size:11px; margin:2px 0; } .immsg b{ color:var(--ny-link); } .immsg.mine b{ color:var(--ny-danger); }
.imtime{ color:#aaa; font-size:9px; }
#imchat-form{ display:flex; border-top:1px solid var(--ny-line); }
#imchat-input{ flex:1; border:0; padding:6px; font:11px var(--ny-font); }
#imchat-input:focus-visible{ outline: 2px solid var(--ny-rule); outline-offset: -2px; }
#imchat-form button{ background:var(--ny-bar); color: var(--ny-bar-ink); border:0; padding:0 12px; cursor:pointer; font-size:11px; }
#imchat-form button:hover{ background:var(--ny-rule); }

/* ---- home feed ------------------------------------------------------------ */
.postCard { border: 1px solid var(--ny-edge); background: var(--ny-paper); margin: 0 0 8px; }
.postHead { display: flex; align-items: center; gap: 8px; padding: 5px 7px;
            background: var(--ny-tint); border-bottom: 1px solid #b8cde4; }
.postHead img { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--ny-edge); 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: var(--ny-paper); padding: 7px;
             text-align: left; font-size: 11px; }
.mangaLink img { width: 60px; height: auto; border: 1px solid var(--ny-edge); }
.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 var(--ny-edge); 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; }

/* A grouped item: ten volumes as one row of covers rather than ten cards. Uses the same
   tokens as .shelfBook so it reskins with everything else, just smaller. */
.postGroup .commentDate { font-size: 10px; }
.groupStrip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 8px 9px; }
.groupBook img { width: 62px; height: 88px; object-fit: cover; display: block;
                 border: 1px solid var(--ny-edge); background: #eee; }
.groupBook:hover img { outline: 2px solid var(--ny-rule); outline-offset: -1px; }
.groupMore { font-size: 10px; font-weight: bold; align-self: center; padding: 0 4px; }

/* A volume already on your shelf, and the button that removes one for everyone. The
   two actions on a library card must not look alike: one changes your shelf, the other
   deletes the book. */
.shelfBookOn img { outline: 2px solid var(--ny-rule); outline-offset: -1px; }
.shelfBook .dangerBtn { color: #7a1020; font-weight: bold; }

/* The library is one dense grid of small covers rather than a few big ones — with a
   couple of hundred volumes the point is to scan it, not to admire it. */
.shelfTight { gap: 7px; }
.shelfTight .shelfBook { width: 78px; font-size: 9px; }
.shelfTight .shelfBook img { width: 78px; height: 110px; }
.shelfTight .shelfTitle { font-weight: normal; margin: 2px 0 0; line-height: 1.25;
                          max-height: 3.75em; overflow: hidden; }
.shelfTight .shelfBook form { display: inline; }
.shelfTight .shelfBook input[type=submit] { font-size: 9px; padding: 0 3px; margin-top: 2px; }

/* search + the two views */
.libBar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.libSearch { width: 220px; }
.libTabs { margin-left: auto; display: flex; gap: 8px; }
.libTabs a { padding: 1px 6px; border: 1px solid transparent; }
.libTabs a.on { background: var(--ny-tint); border-color: var(--ny-edge); font-weight: bold; }
/* The tick is a state, not a control. Keeping them visually separate is the whole point:
   a badge that removes on click is a trap. */
.onShelf { color: #1a6b2a; font-weight: bold; }
.shelfTight .unshelfBtn { color: #555; }

/* Library additions in the rail. Three covers at a glance, not twenty feed cards. */
.libNews .libNewsCovers { display: flex; gap: 2px; flex: 0 0 auto; }
.libNews .libNewsCovers img { width: 20px; height: 28px; object-fit: cover; display: block;
                              border: 1px solid var(--ny-edge); background: #eee; }

/* ---- replies --------------------------------------------------------------- */
.postFoot { padding: 4px 9px; border-top: 1px solid #e2eaf6; font-size: 10px; }
.replyToggle { font-weight: bold; }
.replies { border-top: 1px solid #e2eaf6; background: #f7faff; padding: 5px 9px 7px; }
.reply { display: flex; gap: 6px; padding: 4px 0; }
.reply img { width: 24px; height: 24px; object-fit: cover; border: 1px solid var(--ny-edge); flex: none; }
.replyBody { flex: 1; min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.replyBody .commentDate { display: inline; margin-left: 5px; }
.replyDel { display: inline; float: right; }
.replyDel input { font-size: 9px; padding: 0 4px; line-height: 1.2; }
.replyForm { display: flex; gap: 5px; margin-top: 5px; }
.replyForm textarea { flex: 1; font: inherit; font-size: 11px; }


/* ---- the theater ----------------------------------------------------------
   Screen and chat side by side: the chat was a tall empty box under the film,
   which made the page enormous and pushed the controls below the fold. */
.theater { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.theaterMain { flex: 1 1 auto; min-width: 0; }
.theaterSide { flex: 0 0 240px; display: flex; flex-direction: column;
               border: 1px solid #b8cde4; background: var(--ny-paper); }
.sideHead { background: var(--ny-bar); color: var(--ny-bar-ink); font-weight: bold; font-size: 11px; padding: 3px 7px; }
.screen { background: #000; aspect-ratio: 16/9; display: flex; align-items: center;
          justify-content: center; border: 1px solid var(--ny-edge); overflow: hidden; }
.screen video, .screen iframe, .screen #ytbox { width: 100%; height: 100%; border: 0; display: block; }
.notyet { color: #ff9ad5; font-size: 26px; letter-spacing: 1px; text-shadow: 0 0 12px #ff5fb8; }
.roomBar { display: flex; align-items: center; gap: 8px; padding: 4px 7px; font-size: 11px;
           background: var(--ny-tint); border: 1px solid #b8cde4; border-top: 0; }
.roomBar #nowPlaying { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomBar #watchers { margin-left: auto; }
#chatLog { flex: 1; min-height: 140px; overflow-y: auto; padding: 4px 6px; font-size: 11px; }
.chatRow { padding: 2px 0; display: flex; align-items: center; gap: 5px; }
.chatRow img { width: 16px; height: 16px; object-fit: cover; border: 1px solid var(--ny-edge); flex: none; }
#chatForm { display: flex; gap: 4px; padding: 4px 6px; border-top: 1px solid #e2eaf6; }
#chatForm input[type=text] { flex: 1; min-width: 0; font: inherit; font-size: 11px; }

/* one shelf, one row per thing, the verb first */
.shelfRow, .addRow { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; }
.shelfRow .tag { font-size: 9px; background: #dbe7f8; border-radius: 3px; padding: 1px 5px;
                 color: #35506f; flex: none; min-width: 42px; text-align: center; }
.shelfRow .nm, .addRow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelfRow input[type=submit][disabled] { opacity: .4; }
.shelfRow > form { margin: 0; flex: none; }
.shelfDel { margin-left: auto; }
.shelfDel input[type=submit] {
  font-size: 11px; line-height: 1; padding: 2px 6px;
  color: #8a3d3d; background: #f4e6e6; border: 1px solid #d9b9b9;
}
.shelfDel input[type=submit]:hover { background: #e9cfcf; }
.addRow .addLbl { flex: 0 0 52px; font-weight: bold; }

/* The host's half of the theater, foldable.
   A <details> gives the whole thing a working disclosure with no JS behind it; the script
   on the page only remembers the choice. The default triangle is replaced because it sits
   outside the blue bar and looks like a rendering accident next to it. */
.hostBox { margin: 0; }
.hostBox > summary {
  cursor: pointer;
  list-style: none;          /* firefox */
  user-select: none;
}
.hostBox > summary::-webkit-details-marker { display: none; }
.hostBox > summary::before { content: "\25be\00a0"; }
.hostBox:not([open]) > summary::before { content: "\25b8\00a0"; }
.hostBox > summary:hover { background: #558abc; }
/* The channel mode that is currently on. Deliberately not a tint of the button colour —
   at a glance it has to read as "this one is running", not as a slightly different button. */
.chanOn {
  font-weight: bold; background: #35506f; color: var(--ny-bar-ink);
  border: 1px solid #24384f;
}

/* The style dropdown, down in the footer where an imageboard keeps it.
   Deliberately small and quiet: it is furniture, not a feature. The select inherits the
   skin's own field colours, so it looks like it belongs to whatever it just switched to. */
#skinPick {
  /* flex, not inline-flex: it gets its own line under the copyright rather than running
     on from "no one else is invited". */
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 7px 0 0; font-size: 9px;
}
#skinPick label { color: var(--ny-muted); }
#skinPick select {
  width: auto; font-size: 9px; padding: 1px 2px;
  background: var(--ny-paper); color: var(--ny-ink);
  border: 1px solid var(--ny-field-edge);
}
#skinPick input[type=submit] { margin-top: 0; font-size: 9px; padding: 1px 6px; }

/* Suggestions — the box viewers get, and the rows the host decides on. */
.askForm { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 6px; }
.askForm input[type=text] { font-size: 10px; padding: 2px 3px; }
.askForm input[type=submit] { margin-top: 0; align-self: flex-start; }
.askForm p { margin: 0 0 2px; }
.askRow { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; }
.askRow form { margin: 0; flex: none; }
.askRow input[type=submit] { margin-top: 0; font-size: 10px; padding: 1px 7px; }
.askRow .tag {
  font-size: 9px; background: var(--ny-tint); border-radius: 3px; padding: 1px 5px;
  color: var(--ny-link); flex: none; min-width: 42px; text-align: center;
}
.askRow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#askCount.waiting { color: var(--ny-rule); }

/* ---------------------------------------------------------------- wide pages
 *
 * The 800px column is the site's whole look and almost every page keeps it. A page with
 * a screen on it does not — marooned in the middle of a big monitor, a film is a stamp.
 * Everything that makes up the column widens together, or the nav sits in a narrow strip
 * above a wide page and looks broken. */
body.wide #masthead .inner,
body.wide #navbar,
body.wide #page,
body.wide #footer { width: min(1680px, 95vw); }

/* How tall the screen is allowed to get. Past about seven tenths of the window the room
   bar and the chat box fall off the bottom and you scroll to watch, which is the one
   thing a theater must not make you do.
   The cap goes on the COLUMN, not on the screen. .screen has an aspect-ratio, so capping
   its height makes it satisfy that by shrinking its WIDTH — it detaches from the right
   edge and leaves a gap. Capping the column keeps the screen filling it exactly. */
/* The film takes whatever the splitter leaves it.
   It used to be capped at the width that keeps it under 72vh tall, so dragging the chat
   narrower could not make the picture any bigger — main had already hit its limit and the
   freed width turned into margins, re-centring the whole block. Nothing about that reads
   as resizing anything.

   That `width: 100%` is load-bearing. .screen carries an aspect-ratio, and with an auto
   width a height limit transfers back through the ratio and shrinks the WIDTH instead —
   which is what detached the picture from the right edge and left a gap the colour of the
   page. An explicit width has nothing to transfer to.

   The height limit is generous on purpose: it is there so a very tall window cannot push
   the room bar off the bottom, not to decide how big the picture should be. */
body.wide .theaterMain { flex: 1 1 auto; min-width: 0; }
body.wide .screen      { width: 100%; max-height: 86vh; }
/* Once the box can be wider than 16:9, a video told to fill it would stretch. */
.screen video { object-fit: contain; background: #000; }
/* Chat earns a little more room when there is room to give. */
/* Whatever the screen's height cap leaves over goes to the chat rather than to margins —
   the point of the wide page was to use the room, not to centre a smaller one in it. */
@media (min-width: 1100px) {
  body.wide .theaterSide { flex: 0 0 340px; width: auto; max-width: none; }
}
/* "sent to the host" — the room's own note to itself, not something anybody said. */
.chatNote { color: var(--ny-muted); font-style: italic; font-size: 10px; padding: 1px 0 1px 21px; }


/* Chat text has to be able to break.
   A pasted URL is one unbroken word, and an unbreakable word sets a minimum width for the
   whole panel — which is why the chat grew a horizontal scrollbar and stopped shrinking
   when the splitter was dragged. */
.chatRow { flex-wrap: wrap; }
.chatRow .chatBody { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
#chatLog { overflow-x: hidden; }

/* "channel: shuffle" — said next to the buttons, then it fades.
   The buttons no longer reload the page, so without this a click has no visible answer
   beyond which button is highlighted, and a click that looks like it did nothing gets
   clicked again. */
.chanSaid {
  font-size: 10px; font-weight: bold; color: var(--ny-link);
  margin-left: 8px; opacity: 0; transition: opacity .25s;
}
.chanSaid.on { opacity: 1; }

/* At its narrowest the chat becomes a column: the box and the send button stop trying to
   sit beside each other, so the panel reads as narrow rather than as broken. */
#chatForm { flex-wrap: wrap; }
#chatForm #chatBox { min-width: 0; }

/* ---- dim mode: lights down ------------------------------------------------
   A veil over everything except the picture. The veil is fixed and ignores the
   mouse, so the page underneath keeps working — dimmed, not disabled. Two things
   are lifted above it: the screen at full brightness, because it is the point,
   and the chat at partial opacity, so the room's talk stays readable without
   competing with the film — touching it brings it back to full.
   .screen is already position:relative and none of its ancestors create a
   stacking context, so a z-index alone lifts both out of the dark.
   The veil sits above ALL the site chrome on purpose — the IM bar and #imchat
   are fixed at z-index 1000, and a buddy bar glowing at full brightness beside
   a film is exactly the light this mode exists to switch off. They stay
   clickable underneath it; the veil ignores the mouse. */
#dimVeil { position: fixed; inset: 0; background: #000; opacity: 0;
           pointer-events: none; transition: opacity .35s; z-index: 2000; }
body.dim #dimVeil { opacity: .82; }
body.dim .screen { z-index: 2001; }
body.dim .theaterSide { position: relative; z-index: 2001; opacity: .65; transition: opacity .25s; }
body.dim .theaterSide:hover, body.dim .theaterSide:focus-within { opacity: 1; }
#dimBtn, #ccBtn { font-size: 10px; padding: 1px 7px; margin: 0; width: auto; cursor: pointer;
          background: var(--ny-tint); color: var(--ny-ink); border: 1px solid var(--ny-edge); }
#dimBtn:hover, #ccBtn:hover, #ccBtn.ccOn { background: var(--ny-bar); color: var(--ny-bar-ink); }
#ccBtn[disabled] { opacity: .6; cursor: progress; }
/* The way back out must not need a hunt through the dark. */
body.dim #dimBtn, body.dim #ccBtn { position: relative; z-index: 2001;
                   background: #1c1c1c; color: #cbb7c4; border-color: #4a3a44; }
body.dim #ccBtn.ccOn { border-color: #cbb7c4; }
/* Subtitles: the browser's own renderer, with a softer box than its default solid black. */
#film::cue { background: rgba(0, 0, 0, .62); color: #fff; font-family: system-ui, sans-serif; }

/* Shown only when the browser refuses to start the film on its own. */
#tapStart {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 13px; padding: 8px 18px; margin: 0; cursor: pointer; z-index: 3;
}
.screen { position: relative; }

/* ------------------------------------------------------------------ bbcode */
.bbBar { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 3px; }
.bbBtn {
  font-size: 11px; line-height: 1; min-width: 22px; padding: 3px 5px; margin: 0;
  background: var(--ny-tint); color: var(--ny-ink);
  border: 1px solid var(--ny-edge); cursor: pointer; width: auto;
}
.bbBtn:hover { background: var(--ny-bar); color: var(--ny-bar-ink); }
.bbSmile { margin-left: auto; }
.bbEmoji {
  display: flex; flex-wrap: wrap; gap: 1px; width: 100%;
  max-height: 132px; overflow-y: auto; padding: 3px; margin: 0 0 3px;
  background: var(--ny-paper); border: 1px solid var(--ny-edge);
}
.bbEmoji button {
  font-size: 15px; line-height: 1; padding: 2px 3px; margin: 0; width: auto;
  background: none; border: 0; cursor: pointer;
}
.bbEmoji button:hover { background: var(--ny-tint); }
.bbEmoji img { width: 18px; height: 18px; display: block; }

/* what the tags render as */
.bbQuote {
  margin: 4px 0; padding: 4px 8px; font-size: 11px;
  background: var(--ny-tint); border-left: 3px solid var(--ny-bar);
}
.bbQuote cite { display: block; font-weight: bold; font-style: normal; font-size: 10px; }
.bbCode {
  margin: 4px 0; padding: 5px 7px; font-family: 'Courier New', monospace; font-size: 11px;
  background: var(--ny-tint); border: 1px solid var(--ny-edge);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bbList { margin: 3px 0 3px 18px; padding: 0; }
.bbImg { max-width: 100%; height: auto; }
/* A spoiler is hidden until it is asked for — blacked out, the way a forum did it. */
.bbSpoiler { background: currentColor; border-radius: 2px; }
.bbSpoiler:hover, .bbSpoiler:focus { background: transparent; }
.bbUp { display: inline-flex; }
.bbBtn:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------------ Blog / journal
 * The blog bar is fixed to the left of the 800px page column and pinned as the feed
 * scrolls; it lives in the left margin on a wide screen and is hidden when there is no
 * room. Blogs are a separate content type from posts and never appear in the feed. */
/* The home page is a two-column shell: the blog rail on the left, the feed on the right,
   centred as one unit and widened to fit. The rail is a first-class column (not a floating
   box), sticky so it stays with you as the feed scrolls. Below 900px it stacks on top. */
body.home #masthead .inner,
body.home #navbar,
body.home #page,
body.home #footer { width: min(1052px, 96vw); }
.homeShell { display: flex; gap: 16px; align-items: flex-start; }
.homeRail  { flex: 0 0 232px; position: sticky; top: 12px; align-self: flex-start;
             display: flex; flex-direction: column; gap: 12px; }
.homeMain  { flex: 1 1 auto; min-width: 0; }

/* the "you" card at the top of the rail */
.youCard { background: var(--ny-paper); border: 1px solid var(--ny-bar); text-align: center; padding: 12px 10px 0; }
.youAvatar img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--ny-edge); background: #eee; }
.youName { font-weight: bold; font-size: 13px; color: var(--ny-link); margin: 7px 0 1px; }
.youLinks { font-size: 10px; margin-bottom: 10px; }
.youStats { display: flex; border-top: 1px solid var(--ny-line); margin: 0 -10px; }
.youStats span { flex: 1; padding: 6px 0; font-size: 9px; color: var(--ny-muted); text-transform: uppercase; letter-spacing: .04em; }
.youStats span + span { border-left: 1px solid var(--ny-line); }
.youStats b { display: block; font-size: 16px; color: var(--ny-ink); font-family: var(--ny-display); }

/* generic rail panel (Online Now), matching the blog bar's chrome */
.railBox  { background: var(--ny-paper); border: 1px solid var(--ny-bar); }
.railHead { background: var(--ny-bar); color: var(--ny-bar-ink); font-weight: bold; font-size: 12px; padding: 4px 10px; }
.friendSpaceMini { padding: 8px; }
.friendSpaceMini .friend { width: 58px; margin: 0 3px 8px 0; font-size: 9px; }
.friendSpaceMini .friend img { width: 50px; height: 50px; }
@media (max-width: 900px) {
  body.home #masthead .inner, body.home #navbar, body.home #page, body.home #footer { width: min(800px, 96vw); }
  .homeShell { display: block; }
  .homeRail  { position: static; margin-bottom: 12px; }
}

.blogBar { background: var(--ny-paper); border: 1px solid var(--ny-bar); font-size: 11px; }
.blogBarHead {
  background: var(--ny-bar); color: var(--ny-bar-ink); font-weight: bold; padding: 6px 10px;
  font-size: 12px; display: flex; justify-content: space-between; align-items: center;
}
.blogBarHead a { color: var(--ny-bar-ink); text-decoration: none; opacity: .85; }
.blogBarHead a:hover { opacity: 1; }
.blogBarItem { display: flex; gap: 8px; padding: 9px 10px; border-top: 1px solid var(--ny-edge);
  color: var(--ny-ink); text-decoration: none; align-items: center; }
.blogBarItem:hover { background: var(--ny-tint); }
.blogBarItem img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #ddd; flex: 0 0 auto; }
.blogBarItem .bTitle { font-weight: bold; color: var(--ny-link); display: block; line-height: 1.25; }
.blogBarItem .bWho { color: var(--ny-muted); }
.blogBarEmpty { padding: 10px; color: var(--ny-muted); line-height: 1.5; }

.blogArticle { max-width: 680px; margin: 0 auto; }
.blogHead .blogTitle { font-size: 26px; margin: 0 0 4px; line-height: 1.15; }
.blogMeta { color: var(--ny-muted); font-size: 12px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--ny-edge); }
.blogBody { line-height: 1.7; font-size: 15px; word-wrap: break-word; }
.blogBody h1, .blogBody h2, .blogBody h3 { line-height: 1.25; margin: 1.3em 0 .4em; }
.blogBody h1 { font-size: 24px; } .blogBody h2 { font-size: 20px; } .blogBody h3 { font-size: 16px; }
.blogBody p { margin: 0 0 1em; }
.blogBody img { max-width: 100%; height: auto; }
.blogBody blockquote { border-left: 3px solid var(--ny-bar); margin: 1em 0; padding: .4em 1em; color: var(--ny-muted); }
.blogBody hr { border: 0; border-top: 1px solid var(--ny-edge); margin: 1.6em 0; }
.blogFoot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--ny-edge);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.blogForm { display: flex; flex-direction: column; gap: 8px; }
.blogTitleInput { font-size: 18px; font-weight: bold; padding: 6px 8px; width: 100%; box-sizing: border-box; }
.blogForm textarea { width: 100%; font: inherit; padding: 8px; box-sizing: border-box; }
.blogFormBtns { display: flex; gap: 14px; align-items: center; }

.subBtn { font: inherit; cursor: pointer; border: 1px solid var(--ny-bar); background: var(--ny-bar);
  color: var(--ny-bar-ink); padding: 3px 10px; border-radius: 5px; font-weight: bold; font-size: 11px; }
.subBtn:hover { filter: brightness(1.06); }
.subBtn.subbed { background: var(--ny-paper); color: var(--ny-bar); }
.blogList { list-style: none; padding: 0; margin: 6px 0 0; }
.blogListItem { padding: 6px 0; border-bottom: 1px dotted var(--ny-edge); }
.blogListTitle { font-weight: bold; }
.blogListMeta { color: var(--ny-muted); font-size: 10px; }
.blogListExcerpt { color: var(--ny-muted); font-size: 11px; margin-top: 2px; }
.blogNewRow, .blogSubRow { margin-bottom: 8px; }

/* ------------------------------------------------------------ Admin Mode
 * Admin-only controls get a distinct dashed-red treatment so they never blur into the
 * normal UI; the floating toolbar's "View as regular user" hides everything marked
 * .adminOnly so the admin sees the member experience. The toolbar is console-red on
 * purpose — nothing like the site's blue. */
.adminOnly { outline: 1px dashed #d9534f; outline-offset: 2px; border-radius: 2px; }
.adminOnly.adminBlock { position: relative; outline: 0; border: 1px dashed #d9534f;
  background: rgba(217,83,79,.05); padding-top: 16px; border-radius: 4px; }
.adminOnly.adminBlock::before { content: "\26A0 admin only"; position: absolute; top: 0; left: 0;
  font: bold 9px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; text-transform: uppercase;
  color: #fff; background: #d9534f; padding: 1px 7px; border-radius: 4px 0 4px 0; }
body.asUser .adminOnly { display: none !important; }

/* The Admin Mode popout styles itself — see admin_bar() in app/layout.php. They ship
   with the markup because a nyaaa-template profile loads nya-base.css INSTEAD of this
   file, and a rule that lives only here leaves the bar unstyled and in the flow on
   exactly the pages where that is most destructive. */

/* Danger buttons — was inline background:#cc0000 in four places. */
.dangerBtn { background: var(--ny-danger); color: #fff; }

/* ------------------------------------------------------------ likes + bell */
.postActions { padding: 3px 0 0; }
.likeForm { display: inline; }
.likeBtn { font: inherit; cursor: pointer; border: 0; background: none;
  color: var(--ny-muted); padding: 1px 2px; display: inline-flex; align-items: center; gap: 4px; }
.likeBtn:hover { color: var(--ny-danger); }
.likeBtn.liked { color: var(--ny-danger); }
.likeHeart { font-size: 12px; line-height: 1; }
.likeCount { font-variant-numeric: tabular-nums; }

.bellWrap { position: absolute; right: 8px; top: 2px; }
#bellCount { background: var(--ny-rule); color: #fff; font-size: 8px; font-weight: bold;
  border-radius: 8px; padding: 0 4px; margin-left: 1px; vertical-align: super; }
#bellDrop { display: none; position: absolute; right: 0; top: 100%; width: 300px; max-height: 60vh; overflow-y: auto;
  background: var(--ny-paper); border: 1px solid var(--ny-head); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 70; text-align: left; }
.bellItem  { padding: 8px 10px; border-bottom: 1px solid var(--ny-line); }
.bellMeta  { color: var(--ny-muted); font-size: 9px; margin-bottom: 3px; }
.bellBody  { color: var(--ny-ink); font-size: 11px; line-height: 1.5; }
.bellBody img { max-width: 100%; height: auto; }
.bellEmpty { padding: 12px; color: var(--ny-muted); text-align: center; }

.annRow  { padding: 5px 0; border-top: 1px solid var(--ny-line); }
.annBody { margin: 0 6px; }