/* ============ magical spider monkey — 2011 channel layout ============ */
:root {
  --blue:   #74d1ff;
  --green:  #73ffc5;
  --yellow: #fffd74;
  --salmon: #ff8673;
  --ink:    #1d1d1d;
  --muted:  #3d3d3d;
  --link:   #0a3d7a;
  --line:   rgba(0, 0, 0, .28);
  --page-w: 950px;
  --side-w: 300px;
}

* { box-sizing: border-box; }
html { background: #fff; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 12px/1.35 Arial, Helvetica, sans-serif;
}
a { color: var(--link); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
img { border: 0; }
h1, h2 { font-weight: normal; margin: 0; }

.box {
  border: 1px solid var(--line);
  border-radius: 4px;
}
.c-blue   { background: var(--blue); }
.c-green  { background: var(--green); }
.c-yellow { background: var(--yellow); }
.c-salmon { background: var(--salmon); }

.box > h2 {
  font-size: 18px;
  color: var(--ink);
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.note { color: var(--muted); font-size: 11px; padding: 6px 0; }
.note.err { color: #7a0000; font-weight: bold; }

.btn {
  font: bold 12px Arial, sans-serif;
  color: #222;
  background: linear-gradient(#fff, #e6e6e6);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 4px 9px;
  cursor: pointer;
}
.btn:hover { background: linear-gradient(#fff, #d8d8d8); }

/* ---------------- top bar ---------------- */
#topnav {
  border-width: 0 0 1px;
  border-radius: 0;
}
#topnav .inner {
  width: var(--page-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
}
.yt-logo { font: bold 25px/1 Arial, sans-serif; letter-spacing: -1px; text-decoration: none !important; }
.yt-logo .you  { color: #222; }
.yt-logo .tube { color: #fff; background: linear-gradient(#e62117, #b3120b); border-radius: 6px; padding: 1px 4px 3px; margin-left: 1px; }
.yt-search { display: flex; }
.yt-search input { width: 320px; height: 26px; border: 1px solid #888; border-right: 0; padding: 3px 6px; font-size: 13px; }
.yt-search .btn { border-radius: 0 3px 3px 0; height: 26px; }
.yt-links a, .yt-account a { font-size: 12px; padding: 0 7px; border-left: 1px solid rgba(0,0,0,.25); }
.yt-links a:first-child, .yt-account a:first-child { border-left: 0; }
.yt-account { margin-left: auto; }

/* ---------------- page ---------------- */
#page {
  width: var(--page-w);
  margin: 10px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row { display: flex; gap: 10px; align-items: flex-start; }
.col-main { width: calc(var(--page-w) - var(--side-w) - 10px); flex: none; display: flex; flex-direction: column; gap: 8px; }
.col-side { width: var(--side-w); flex: none; display: flex; flex-direction: column; gap: 8px; }

/* ---------------- banner ---------------- */
#banner { padding: 7px; line-height: 0; }
.banner-wrap { background: #fff; border: 1px solid var(--line); }
.banner-wrap { position: relative; }
.banner-wrap img { display: block; width: 100%; height: auto; }
.hot { position: absolute; display: block; }
.hot:hover { outline: 2px dashed rgba(0,0,0,.35); outline-offset: -2px; }
/* percentages of the 950x148 banner artwork */
.hot-channel   { left: 0;      top: 0;     width: 20%;    height: 65.5%; }
.hot-subscribe { left: 0;      top: 65.5%; width: 22.9%;  height: 34.5%; }
.hot-youtube   { left: 23.7%;  top: 64.9%; width: 5.1%;   height: 35.1%; }
.hot-patreon   { left: 28.85%; top: 64.9%; width: 5.1%;   height: 35.1%; }

/* ---------------- channel bar ---------------- */
#channelbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  height: 44px;
}
.pfp { background: #fff; object-fit: cover; }
.pfp-mini { width: 32px; height: 32px; border: 1px solid var(--line); }
.cb-name { font-size: 16px; font-weight: bold; color: var(--ink); }
.subscribe-img img { display: block; height: 30px; width: auto; }
.subscribe-img.small img { height: 26px; }
.cb-links { margin-left: auto; }
.cb-links a { font-weight: bold; padding: 0 7px; border-left: 1px solid var(--line); }
.cb-links a:first-child { border-left: 0; }

/* ---------------- player ---------------- */
#player { padding: 8px 8px 0; }
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 13px; }
.embed.ready .embed-empty { display: none; }
.tabs { display: flex; align-items: center; gap: 16px; padding: 6px 2px 7px; }
.tabs .tab { font-weight: bold; color: var(--muted); }
.tabs .tab.on { color: var(--ink); }
.share-msg { font-size: 11px; color: var(--muted); }

/* ---------------- video info ---------------- */
#info { padding: 12px 14px 14px; position: relative; }
#info::before { /* little pointer up to the "Info" tab, like 2011 */
  content: ""; position: absolute; top: -8px; left: 16px;
  border: 8px solid transparent; border-top: 0; border-bottom-color: var(--salmon);
  filter: drop-shadow(0 -1px 0 var(--line));
}
.info-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#videoTitle { font: bold 17px/1.25 Arial, sans-serif; color: var(--ink); text-transform: uppercase; }
.rate { display: flex; gap: 8px; flex: none; }
.rate-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 8px;
  background: linear-gradient(#fff, #e8e8e8);
  border: 1px solid #999; border-radius: 3px;
  color: #222; font-size: 12px; text-decoration: none !important;
}
.rate-btn svg { width: 15px; height: 15px; fill: #444; }
.rate-btn b { font-weight: normal; color: #555; padding-left: 4px; border-left: 1px solid #ccc; margin-left: 2px; }
.rate-btn b:empty { display: none; }
.rate-btn.dislike { padding: 0 6px; }
.meta { font-size: 11px; color: var(--muted); margin: 5px 0 8px; }
.meta a { font-weight: bold; }
.desc { font-size: 11.5px; white-space: pre-line; overflow-wrap: anywhere; max-height: 4.1em; overflow: hidden; }
.desc.open { max-height: none; }
.desc-more { text-align: right; font-size: 11px; font-weight: bold; margin-top: 2px; }
.view-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: bold; }

/* ---------------- right video list ---------------- */
#videos { padding: 10px; align-self: stretch; display: flex; flex-direction: column; }
.list-search { display: flex; gap: 6px; }
.list-search input { flex: 1; height: 26px; border: 1px solid #888; padding: 3px 6px; font-size: 12px; min-width: 0; }
.sorts { font-size: 11px; margin: 8px 0 6px; color: var(--muted); }
.sorts a { color: var(--muted); }
.sorts a.on { color: var(--ink); font-weight: bold; }
.sorts .caret { font-size: 9px; }
.chan-filter { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.chan-filter a { font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.55); color: var(--ink); text-decoration: none; }
.chan-filter a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vlist {
  flex: 1 1 0; min-height: 300px; overflow-y: auto;
  margin-top: 6px; padding-right: 4px;
  background: rgba(255,255,255,.35); border: 1px solid var(--line);
}
.vitem { display: flex; gap: 8px; padding: 7px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.08); }
.vitem:hover { background: rgba(255,255,255,.55); }
.vitem.on { background: rgba(255,255,255,.8); }
.thumb { position: relative; flex: none; background: #000; border: 1px solid rgba(0,0,0,.4); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb .dur { position: absolute; right: 2px; bottom: 2px; background: rgba(0,0,0,.82); color: #fff; font: bold 10px Arial, sans-serif; padding: 1px 3px; border-radius: 2px; }
.vitem .thumb { width: 106px; height: 60px; }
.vitem .vt { font-size: 12.5px; font-weight: bold; color: var(--link); text-transform: uppercase; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vitem .vm { font-size: 11px; color: var(--muted); margin-top: 2px; }
.vitem .vc { font-size: 10px; color: var(--muted); font-style: italic; }

/* ---------------- profile card ---------------- */
#profileCard { display: flex; gap: 10px; padding: 10px; }
.pfp-big { width: 96px; height: 96px; border: 1px solid var(--line); display: block; }
.pc-right { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-name { font-size: 18px; color: var(--ink); }
.pc-links { font-size: 11px; }

/* ---------------- profile stats ---------------- */
#profile { padding: 10px 12px 12px; }
.stats { margin: 0; }
.stats > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.stats > div:last-child { border-bottom: 0; }
.stats dt { font-weight: bold; white-space: nowrap; }
.stats dd { margin: 0; text-align: right; }
.stats > div.stack { display: block; }
.stats > div.stack dd { text-align: left; margin-top: 2px; }

/* ---------------- ads ---------------- */
#ads { padding: 8px; }
.ad-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; background: rgba(255,255,255,.4); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.ad-frame .note { padding: 16px; }
.ad-frame a, .ad-frame img.ad { position: absolute; inset: 0; }
.ad-frame img.ad { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.ad-frame img.ad.show { opacity: 1; }
.dots { text-align: center; margin-top: 6px; line-height: 8px; min-height: 8px; }
.dots span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--ink); opacity: .25; cursor: pointer; }
.dots span.on { opacity: 1; }

/* ---------------- instagram ---------------- */
#instagram { padding: 10px 12px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ig-grid a { display: block; aspect-ratio: 1 / 1; background: rgba(255,255,255,.45); border: 1px solid var(--line); overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-grid .note { grid-column: 1 / -1; }
.see-all { display: block; text-align: right; font-weight: bold; margin-top: 8px; }

/* ---------------- guestbook ---------------- */
#guestbook { padding: 10px 12px 12px; }
#guestbook > h2 { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
#gbCount { font-size: 18px; }
.gb-refresh { text-align: right; font-size: 11px; font-weight: bold; margin: 2px 0 6px; }
.gb-list { border: 1px solid var(--line); background: rgba(255,255,255,.35); padding: 0 8px; }
.gb-item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.gb-item:last-child { border-bottom: 0; }
.gb-av { width: 34px; height: 34px; flex: none; border: 1px solid var(--line); }
.gb-who { font-weight: bold; color: var(--link); }
.gb-when { color: var(--muted); font-size: 11px; }
.gb-msg { white-space: pre-line; overflow-wrap: anywhere; margin-top: 1px; }
.gb-form { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.gb-form input, .gb-form textarea { width: 100%; border: 1px solid #888; padding: 5px 6px; font: 12px Arial, sans-serif; resize: vertical; }
.gb-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.gb-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gb-status { font-size: 11px; color: var(--muted); }
.gb-pages { text-align: right; margin-top: 8px; font-weight: bold; }
.gb-pages a { margin-left: 7px; }
.gb-pages a.on { color: var(--ink); text-decoration: none; cursor: default; }

/* ---------------- patreon ---------------- */
#patreon { padding: 10px 14px 14px; }
.pt-post { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pt-post:last-child { border-bottom: 0; }
.pt-icon { width: 34px; height: 34px; flex: none; }
.pt-body { min-width: 0; flex: 1; }
.pt-title { font-weight: bold; font-size: 13px; }
.pt-date { color: var(--muted); font-size: 11px; font-weight: normal; }
.pt-text { margin-top: 3px; overflow-wrap: anywhere; }
.pt-img { display: block; max-width: 100%; max-height: 220px; margin-top: 6px; border: 1px solid var(--line); }
.pt-post.locked .pt-lockwrap { position: relative; margin-top: 3px; min-height: 44px; }
.pt-post.locked .pt-text,
.pt-post.locked .pt-img { filter: blur(5px); user-select: none; pointer-events: none; }
.pt-lockbadge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: bold; text-decoration: none !important;
}
.pt-lockbadge span { background: #fff; border: 1px solid #222; border-radius: 3px; padding: 4px 10px; color: #222; }
.pt-cta { display: block; margin-top: 10px; text-align: center; font-weight: bold; font-size: 13px; background: #fff; border: 1px solid #222; border-radius: 3px; padding: 6px; color: #222; }

/* ---------------- jorel edits ---------------- */
#edits { padding: 10px 14px 14px; }
.ed-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.ed-item:last-child { border-bottom: 0; }
.ed-item .thumb { width: 96px; height: 54px; cursor: pointer; }
.ed-main { flex: 1; min-width: 0; }
.ed-title { font-weight: bold; font-size: 12.5px; cursor: pointer; }
.ed-chan { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ed-desc { font-size: 11.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ed-stats { width: 170px; flex: none; font-size: 11px; line-height: 1.4; color: var(--ink); }
.ed-stats .k { color: var(--muted); }
.ed-stats .sep { border-top: 1px solid rgba(0,0,0,.15); margin: 2px 0; }

footer { text-align: center; color: #777; font-size: 11px; padding: 18px 0 24px; }

/* ---------------- narrow screens: stack the columns ---------------- */
@media (max-width: 980px) {
  :root { --page-w: 100%; }
  #page { padding: 0 10px; }
  #topnav .inner { padding: 0 10px; flex-wrap: wrap; height: auto; padding-block: 8px; }
  .yt-search input { width: 180px; }
  .row { flex-direction: column; }
  .col-main, .col-side { width: 100%; }
  .row-bottom .col-left { order: 2; }
  .vlist { flex: none; height: 420px; }
  #channelbar { height: auto; flex-wrap: wrap; }
  .ed-item { flex-wrap: wrap; }
  .ed-stats { width: 100%; }
}