/* ==================================================================
   Castyr - the 2006 video-site stylesheet
   ==================================================================
   Pinned to what a video site looked like in late 2006: white page,
   Arial at 11-12px, 1px #ccc panel borders with a pale grey header bar,
   blue links that go purple when visited, and a five star rating bar
   rather than a thumb.

   Everything is scoped under .ct-page or a .ct- class so it cannot
   restyle the LonePortal chrome it sits inside. The one exception is the
   body class .ct-cinema, which is the whole point of Cinema Mode.

   Sections:
     1. Tokens
     2. Page frame and the Cas|tyr wordmark
     3. Masthead, nav strip, search
     4. Panels
     5. Video cards, thumbnails, the Quicklist tick
     6. Watch page: player, title bar, action row
     7. Stars
     8. The detail tabs, description, tags
     9. Comments
    10. Related and Rabbit Hole rails
    11. Channel and subscription
    12. Browse: category sidebar, paging, tag cloud
    13. Cinema Mode
    14. Small screens
   ================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────── */
:root {
  --ct-red:        #cc0000;
  --ct-red-dark:   #990000;
  --ct-red-light:  #e33;
  --ct-link:       #0033cc;
  --ct-link-visit: #551a8b;
  --ct-text:       #000000;
  --ct-dim:        #666666;
  --ct-dimmer:     #999999;
  --ct-rule:       #cccccc;
  --ct-rule-soft:  #e4e4e4;
  --ct-panel-head: #eeeeee;
  --ct-panel-alt:  #f6f6f6;
  --ct-nav:        #e8e8e8;
  --ct-star:       #ffcc00;
  --ct-star-off:   #c8c8c8;
  --ct-face:       Arial, Helvetica, sans-serif;
  --ct-face-alt:   Verdana, Geneva, sans-serif;
}

/* ── 2. Page frame ─────────────────────────────────────────────── */
.ct-page {
  font-family: var(--ct-face);
  font-size: 12px;
  color: var(--ct-text);
  background: #ffffff;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 10px 30px;
  text-align: left;
  line-height: 1.45;
}
.ct-page a          { color: var(--ct-link); text-decoration: none; }
.ct-page a:hover    { text-decoration: underline; }
.ct-page a:visited  { color: var(--ct-link-visit); }
.ct-page h1, .ct-page h2, .ct-page h3 { font-family: var(--ct-face); margin: 0; }
.ct-page img        { border: 0; max-width: 100%; }
.ct-page p          { margin: 0 0 8px; }
.ct-clear:after     { content: ""; display: block; clear: both; }
.ct-muted           { color: var(--ct-dim); }
.ct-small           { font-size: 11px; }
.ct-tiny            { font-size: 10px; color: var(--ct-dimmer); }
.ct-nowrap          { white-space: nowrap; }

/* The Cas|tyr wordmark. "tyr" sits in the badge on purpose: it is the
   half that carries the meaning, so the eye lands on the god rather
   than on a syllable. */
.ct-logo {
  display: inline-block;
  font-family: var(--ct-face);
  font-weight: bold;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1px;
  text-decoration: none !important;
  white-space: nowrap;
}
.ct-logo:visited { color: inherit; }
.ct-logo-cas {
  color: #2a2a2a;
  padding-right: 1px;
}
.ct-logo-tyr {
  display: inline-block;
  color: #ffffff;
  background: var(--ct-red);
  background: linear-gradient(180deg, #e01b1b 0%, #cc0000 55%, #a80000 100%);
  border-radius: 7px;
  padding: 1px 7px 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 1px rgba(0,0,0,0.25);
}
.ct-logo-sm            { font-size: 19px; }
.ct-logo-sm .ct-logo-tyr { border-radius: 5px; padding: 0 5px 2px; }
.ct-tagline {
  font-family: var(--ct-face);
  font-size: 10px;
  color: var(--ct-dim);
  letter-spacing: 0.3px;
  margin-top: 3px;
}
.ct-tagline sup { font-size: 7px; vertical-align: super; }

/* ── 3. Masthead, nav, search ──────────────────────────────────── */
.ct-masthead {
  padding: 10px 0 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ct-masthead-right { text-align: right; font-size: 11px; color: var(--ct-dim); }
.ct-masthead-right a { margin-left: 8px; }

.ct-navstrip {
  background: var(--ct-nav);
  background: linear-gradient(180deg, #f4f4f4 0%, #e4e4e4 100%);
  border-top: 1px solid var(--ct-rule);
  border-bottom: 1px solid var(--ct-rule);
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ct-navstrip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ct-navstrip li { margin: 0; }
.ct-navstrip li a {
  display: block;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: bold;
  color: #333333;
  border-right: 1px solid #d2d2d2;
}
.ct-navstrip li a:hover   { background: #f8f8f8; text-decoration: none; color: #000; }
.ct-navstrip li a.active  { background: #ffffff; color: var(--ct-red-dark); border-bottom: 1px solid #fff; margin-bottom: -1px; }
.ct-navstrip li a:visited { color: #333333; }

.ct-searchbar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; }
.ct-searchbar input[type=text] {
  font-family: var(--ct-face);
  font-size: 12px;
  padding: 3px 5px;
  border: 1px solid #999999;
  border-top-color: #767676;
  width: 190px;
  background: #fff;
}
.ct-btn {
  font-family: var(--ct-face);
  font-size: 11px;
  font-weight: bold;
  padding: 3px 11px;
  border: 1px solid #999999;
  background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 100%);
  color: #222;
  cursor: pointer;
  border-radius: 2px;
}
.ct-btn:hover    { background: linear-gradient(180deg, #ffffff 0%, #d8d8d8 100%); }
.ct-btn:active   { background: #d0d0d0; }
.ct-btn:disabled { color: #999; cursor: default; }
.ct-btn-primary {
  color: #ffffff;
  border-color: #8f0000;
  background: linear-gradient(180deg, #e01b1b 0%, #bb0000 100%);
}
.ct-btn-primary:hover { background: linear-gradient(180deg, #ee2727 0%, #cc0000 100%); }

/* ── 4. Panels ─────────────────────────────────────────────────── */
.ct-panel {
  border: 1px solid var(--ct-rule);
  background: #ffffff;
  margin-bottom: 14px;
}
.ct-panel-head {
  background: var(--ct-panel-head);
  background: linear-gradient(180deg, #f7f7f7 0%, #e9e9e9 100%);
  border-bottom: 1px solid var(--ct-rule);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ct-panel-head .ct-head-links { font-weight: normal; font-size: 11px; }
.ct-panel-body { padding: 9px; }
.ct-panel-body.tight { padding: 6px; }

.ct-notice {
  border: 1px solid #e0c86a;
  background: #fffbe4;
  padding: 6px 9px;
  font-size: 11px;
  margin-bottom: 10px;
}
.ct-notice-bad { border-color: #d99; background: #ffefef; }
.ct-notice-good { border-color: #9c9; background: #eefaee; }

/* ── 4b. Ad banners ────────────────────────────────────────────── */
.ct-ad {
  text-align: center;
  margin: 0 0 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ct-rule-soft);
}
.ct-ad-bottom { margin: 14px 0 0; border-bottom: 0; border-top: 1px solid var(--ct-rule-soft); }
.ct-ad img {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;      /* a 2006 banner is a small GIF; keep it crisp */
  border: 0;
  display: inline-block;
}
.ct-ad-label {
  font-size: 9px;
  color: var(--ct-dimmer);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── 4c. Featured row ──────────────────────────────────────────── */
.ct-feat-lead { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ct-feat-thumb {
  position: relative;
  flex: 0 0 232px;
  max-width: 232px;
  display: block;
  border: 1px solid #b8b8b8;
  background: #000;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ct-feat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-feat-thumb .ct-dur {
  position: absolute; right: 2px; bottom: 2px;
  background: rgba(0,0,0,0.78); color: #fff;
  font: bold 10px/1.2 var(--ct-face); padding: 1px 3px;
}
.ct-feat-flag {
  position: absolute; left: 0; top: 0;
  background: var(--ct-red); color: #fff;
  font: bold 9px/1 var(--ct-face);
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 6px;
}
.ct-feat-body { flex: 1 1 240px; min-width: 0; }
.ct-feat-title { font-size: 15px; font-weight: bold; line-height: 1.25; }

/* auto-FILL, not auto-fit. auto-fit collapses the empty tracks and lets
   two cards stretch to half the panel each, which turns a featured row
   into two enormous thumbnails. auto-fill keeps the column count honest,
   so the cards stay card-sized and the row simply fits more of them on a
   wider monitor - which is the point. */
.ct-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
  border-top: 1px solid var(--ct-rule-soft);
  padding-top: 11px;
}

/* ── 5. Video cards ────────────────────────────────────────────── */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px 12px;
}
/* position:relative is load bearing. The Quicklist tick is absolutely
   positioned, and without a positioned card to sit inside, every tick on
   the page anchors to the same ancestor and they all pile up in one
   corner - clickable one at a time and wrong the rest of the time. */
.ct-card { font-size: 11px; position: relative; }
.ct-card-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 75%;               /* 4:3, the shape a 2006 thumbnail was */
  background: #000000;
  border: 1px solid #b8b8b8;
  overflow: hidden;
}
.ct-card-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ct-card-thumb .ct-dur {
  position: absolute; right: 2px; bottom: 2px;
  background: rgba(0,0,0,0.78);
  color: #ffffff;
  font: bold 10px/1.2 var(--ct-face);
  padding: 1px 3px;
}
.ct-card-title {
  display: block;
  font-weight: bold;
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
}
.ct-card-meta { color: var(--ct-dim); font-size: 10px; line-height: 1.5; }
.ct-card-meta a { color: var(--ct-dim); }
.ct-card .ct-stars { transform: scale(0.85); transform-origin: left center; }

/* The Quicklist tick that lived in the corner of every 2006 thumbnail */
.ct-ql-add {
  position: absolute; left: 2px; top: 2px;
  width: 17px; height: 17px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #7a7a7a;
  color: #0033cc;
  font: bold 13px/15px var(--ct-face);
  text-align: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.ct-ql-add:hover  { background: #ffffcc; }
.ct-ql-add.queued { background: #cceecc; color: #060; border-color: #4a4; }

.ct-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ct-rail .ct-card { flex: 0 0 158px; }

/* ── 6. Watch page ─────────────────────────────────────────────── */
.ct-watch { display: flex; gap: 14px; align-items: flex-start; }
.ct-watch-main { flex: 1 1 auto; min-width: 0; }
.ct-watch-side { flex: 0 0 250px; }

.ct-video-title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.25;
  margin: 0 0 2px;
  color: #000;
}
.ct-video-sub { font-size: 11px; color: var(--ct-dim); margin-bottom: 7px; }
.ct-video-sub a { font-weight: bold; }

.ct-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;              /* a 2006 player was 4:3 with pillarbox */
  background: #000000;
  border: 1px solid #333333;
  overflow: hidden;
}
.ct-screen.wide { aspect-ratio: 16 / 9; }
.ct-screen iframe, .ct-screen video, .ct-screen object {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

.ct-underbar {
  border: 1px solid var(--ct-rule);
  border-top: 0;
  background: var(--ct-panel-alt);
  padding: 6px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}
.ct-rate-block { display: flex; align-items: center; gap: 7px; }
.ct-rate-block .ct-label { color: #333; font-weight: bold; }
.ct-views { font-size: 15px; font-weight: bold; color: #333; }
.ct-views span { font-size: 11px; font-weight: normal; color: var(--ct-dim); }

.ct-actions {
  border: 1px solid var(--ct-rule);
  border-top: 0;
  padding: 6px 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 0;
  align-items: center;
  font-size: 11px;
  background: #ffffff;
}
.ct-actions button, .ct-actions a.ct-act {
  background: none;
  border: 0;
  border-right: 1px solid var(--ct-rule-soft);
  font: 11px var(--ct-face);
  color: var(--ct-link);
  padding: 1px 9px;
  cursor: pointer;
}
.ct-actions button:first-child, .ct-actions a.ct-act:first-child { padding-left: 0; }
.ct-actions button:last-child, .ct-actions a.ct-act:last-child   { border-right: 0; }
.ct-actions button:hover, .ct-actions a.ct-act:hover { text-decoration: underline; }
.ct-actions button.on { color: #006600; font-weight: bold; }
.ct-actions button:disabled { color: var(--ct-dimmer); cursor: default; text-decoration: none; }

/* ── 7. Stars ──────────────────────────────────────────────────── */
.ct-stars { display: inline-block; line-height: 0; white-space: nowrap; vertical-align: middle; }
.ct-star {
  display: inline-block;
  width: 15px; height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8c8c8' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
}
.ct-star.on {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcc00' stroke='%23d9a400' stroke-width='0.7' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
}
.ct-star.half {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='h'%3E%3Cstop offset='50%25' stop-color='%23ffcc00'/%3E%3Cstop offset='50%25' stop-color='%23c8c8c8'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23h)' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
}
.ct-stars-live .ct-star { cursor: pointer; }
.ct-stars-live:hover .ct-star { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8c8c8' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E"); }
.ct-stars-live .ct-star.hot {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffdd44' stroke='%23c89000' stroke-width='0.9' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") !important;
}
.ct-rating-count { font-size: 11px; color: var(--ct-dim); vertical-align: middle; }
.ct-rate-msg { font-size: 11px; color: #006600; }
.ct-rate-msg.bad { color: #aa0000; }

/* ── 8. Detail tabs ────────────────────────────────────────────── */
.ct-tabs { border-bottom: 1px solid var(--ct-rule); margin-top: 14px; display: flex; gap: 2px; }
.ct-tabs button {
  font: bold 11px var(--ct-face);
  padding: 5px 13px;
  border: 1px solid var(--ct-rule);
  border-bottom: 0;
  background: linear-gradient(180deg, #f4f4f4 0%, #e6e6e6 100%);
  color: #444;
  cursor: pointer;
  margin-bottom: -1px;
}
.ct-tabs button.active { background: #ffffff; color: #000; border-bottom: 1px solid #ffffff; }
.ct-tabpane { border: 1px solid var(--ct-rule); border-top: 0; padding: 11px; background: #fff; }

.ct-meta-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ct-meta-table th {
  text-align: left; vertical-align: top;
  color: var(--ct-dim); font-weight: bold;
  width: 92px; padding: 3px 8px 3px 0; white-space: nowrap;
}
.ct-meta-table td { padding: 3px 0; vertical-align: top; }
.ct-desc { white-space: pre-wrap; word-wrap: break-word; font-size: 12px; line-height: 1.5; }
.ct-desc-more { font-size: 11px; }

.ct-taglist { line-height: 2; }
.ct-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  margin: 0 3px 3px 0;
  border: 1px solid #cddcee;
  background: #f2f7fd;
  color: var(--ct-link);
}
.ct-tag:hover  { background: #e4eefb; text-decoration: none !important; }
.ct-tag.pending { border-color: #e0c86a; background: #fffbe4; color: #7a5c00; }
.ct-tag-form { margin-top: 8px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ct-tag-form input[type=text] {
  font: 11px var(--ct-face); padding: 3px 5px; border: 1px solid #999; width: 170px;
}

.ct-honors { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.ct-honors li { padding: 2px 0 2px 16px; position: relative; }
.ct-honors li:before { content: "\2605"; position: absolute; left: 0; color: var(--ct-star); }

/* ── 9. Comments ───────────────────────────────────────────────── */
.ct-comment-form textarea {
  width: 100%;
  height: 62px;
  font: 12px var(--ct-face);
  padding: 5px;
  border: 1px solid #999999;
  box-sizing: border-box;
  resize: vertical;
}
.ct-comment-form .ct-cf-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 5px; font-size: 11px; color: var(--ct-dim);
}
.ct-comment {
  border-top: 1px solid var(--ct-rule-soft);
  padding: 8px 0;
  display: flex;
  gap: 9px;
}
.ct-comment:first-child { border-top: 0; }
.ct-comment-av {
  flex: 0 0 42px; width: 42px; height: 42px;
  border: 1px solid var(--ct-rule);
  background: #f4f4f4 center/cover no-repeat;
}
/* The picture is an <img> inside the box so a broken one can fall back to
   an initial. A forum picture is square and gets cropped to fill; a
   LonePortal avatar is a tall full-body render, so it is contained and
   stands on the floor of the box instead of being beheaded. */
.ct-comment-av img,
.ct-channel-av img,
.ct-picswitch-av img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ct-comment-av.ct-pic-avatar,
.ct-channel-av.ct-pic-avatar,
.ct-picswitch-av.ct-pic-avatar { background-color: #eef2f7; }
.ct-comment-av.ct-pic-avatar img,
.ct-channel-av.ct-pic-avatar img,
.ct-picswitch-av.ct-pic-avatar img {
  object-fit: contain;
  object-position: center bottom;
}
.ct-pic-initial {
  font: bold 18px/40px var(--ct-face);
  text-align: center;
  color: #8a8a8a;
  background: #f0f0f0;
}
.ct-channel-av.ct-pic-initial { font-size: 24px; line-height: 56px; }

.ct-picswitch {
  display: flex; align-items: center; gap: 9px;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--ct-rule-soft);
  flex-wrap: wrap;
}
.ct-picswitch-av {
  flex: 0 0 34px; width: 34px; height: 34px;
  border: 1px solid var(--ct-rule);
  background: #f4f4f4 center/cover no-repeat;
}
.ct-picswitch-av.ct-pic-initial { font-size: 15px; line-height: 32px; }
.ct-picswitch label { margin-right: 9px; white-space: nowrap; }
.ct-picswitch input { vertical-align: -1px; margin-right: 2px; }
.ct-comment-body { flex: 1 1 auto; min-width: 0; }
.ct-comment-head { font-size: 11px; margin-bottom: 2px; }
.ct-comment-head .ct-cname { font-weight: bold; }
.ct-comment-head .ct-ctime { color: var(--ct-dimmer); margin-left: 6px; }
.ct-comment-text { font-size: 12px; word-wrap: break-word; white-space: pre-wrap; }
.ct-comment-text .ct-quote { color: #007700; }
.ct-comment-tools { font-size: 10px; margin-top: 3px; }
.ct-comment-tools button {
  background: none; border: 0; color: var(--ct-link);
  font: 10px var(--ct-face); cursor: pointer; padding: 0 6px 0 0;
}
.ct-comment-tools button:hover { text-decoration: underline; }
.ct-comment.is-new { background: #fffde8; }
.ct-comment-empty { color: var(--ct-dim); font-size: 11px; padding: 10px 0; }

/* ── 10. Related and Rabbit Hole rails ─────────────────────────── */
.ct-side-item {
  display: flex;
  gap: 7px;
  padding: 6px 0;
  border-top: 1px solid var(--ct-rule-soft);
  font-size: 11px;
}
.ct-side-item:first-child { border-top: 0; padding-top: 0; }
.ct-side-thumb {
  flex: 0 0 60px; width: 60px; height: 45px;
  border: 1px solid #b8b8b8; background: #000;
  object-fit: cover; display: block;
}
.ct-side-body { min-width: 0; }
.ct-side-title { font-weight: bold; display: block; line-height: 1.25; }
.ct-side-meta  { color: var(--ct-dim); font-size: 10px; line-height: 1.4; }

.ct-hole-head {
  background: linear-gradient(180deg, #3a2a52 0%, #241833 100%);
  color: #f0e6ff;
  border-bottom-color: #1a1026;
}
.ct-hole-head a { color: #ffcc66; }
.ct-hole-panel { border-color: #6b5a86; }
.ct-hole-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 7px; }
.ct-trail { font-size: 10px; color: var(--ct-dim); line-height: 1.6; word-wrap: break-word; }
.ct-trail a { color: var(--ct-dim); }
.ct-trail .ct-trail-now { color: #000; font-weight: bold; }
.ct-trail-sep { color: #bbb; padding: 0 3px; }
.ct-hole-next {
  border: 1px solid #6b5a86;
  background: #f6f2fb;
  padding: 7px;
  margin-top: 8px;
  font-size: 11px;
}
.ct-hole-next .ct-hole-why {
  display: inline-block; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 1px 5px; border-radius: 2px;
  background: #6b5a86; color: #fff; margin-bottom: 4px;
}
.ct-hole-next .ct-hole-why.loose { background: #7a7a7a; }
.ct-countdown { font-weight: bold; color: #6b5a86; }

/* ── 11. Channel and subscription ──────────────────────────────── */
.ct-channel-box { display: flex; gap: 10px; align-items: flex-start; }
.ct-channel-av {
  flex: 0 0 56px; width: 56px; height: 56px;
  border: 1px solid var(--ct-rule);
  background: #f0f0f0 center/cover no-repeat;
  font: bold 24px/56px var(--ct-face); text-align: center; color: #888;
}
.ct-channel-name { font-size: 13px; font-weight: bold; }
.ct-channel-stats { font-size: 11px; color: var(--ct-dim); }
.ct-sub-btn {
  font: bold 11px var(--ct-face);
  padding: 4px 12px;
  border: 1px solid #8f0000;
  background: linear-gradient(180deg, #e01b1b 0%, #bb0000 100%);
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
}
.ct-sub-btn:hover { background: linear-gradient(180deg, #ee2727 0%, #cc0000 100%); }
.ct-sub-btn.subscribed {
  background: linear-gradient(180deg, #f2f2f2 0%, #dcdcdc 100%);
  color: #444; border-color: #999;
}
.ct-sub-btn.subscribed:hover { background: linear-gradient(180deg, #ffecec 0%, #ffd6d6 100%); color: #900; border-color: #c66; }
.ct-sub-btn:disabled { opacity: 0.6; cursor: default; }

/* ── 11b. Member channels: banner and their own HTML ───────────── */
.ct-chan-banner {
  border: 1px solid var(--ct-rule);
  background: #f0f0f0;
  margin-bottom: 12px;
  line-height: 0;
  max-height: 240px;
  overflow: hidden;
}
.ct-chan-banner img { width: 100%; display: block; object-fit: cover; }
.ct-channel-av-lg { width: 72px; height: 72px; flex: 0 0 72px; }
.ct-channel-av-lg.ct-pic-initial { font-size: 30px; line-height: 70px; }

/* Books this member put in the Reading Room. A row of spines rather than a
   grid: it is a sidebar to their videos, not a second shelf, and it scrolls
   sideways so a prolific uploader does not push the page down a screen. */
.ct-booklist {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ct-bookcard {
  flex: 0 0 auto;
  width: 84px;
  text-decoration: none;
  color: inherit;
}
/* The spine is the box, not the image. A book whose cover will not load then
   still reads as a book instead of leaving a hole in the row, which is what
   hiding the img on its own gives you. */
.ct-bookcard-cover {
  position: relative;
  display: block;          /* it is a span, so it needs telling */
  width: 84px;
  height: 116px;
  border: 1px solid #666;
  background: #6b4a22 linear-gradient(100deg, rgba(255,255,255,.12) 0 8%, transparent 20%);
  box-shadow: 1px 2px 4px rgba(0,0,0,.35);
  overflow: hidden;
}
.ct-bookcard-cover::after {
  content: '\1F4D5';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; opacity: .5;
}
.ct-bookcard-cover img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-bookcard:hover .ct-bookcard-cover { border-color: var(--ct-accent, #cc0000); }
.ct-bookcard-t {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  margin-top: 3px;
  max-height: 26px;
  overflow: hidden;
}

/* A member's own HTML. Contained on purpose: it cannot escape this box and
   restyle the page around it, and anything wide scrolls inside itself
   rather than pushing the layout sideways. The content was already run
   through the site's sanitiser when it was saved. */
.ct-userhtml {
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  max-width: 100%;
  word-wrap: break-word;
  contain: content;
}
.ct-userhtml img,
.ct-userhtml video,
.ct-userhtml iframe { max-width: 100%; }
.ct-userhtml table { max-width: 100%; }
.ct-userhtml h1 { font-size: 19px; margin: 0 0 6px; }
.ct-userhtml h2 { font-size: 16px; margin: 10px 0 5px; }
.ct-userhtml h3 { font-size: 14px; margin: 9px 0 4px; }
.ct-userhtml p  { margin: 0 0 8px; }
.ct-userhtml ul, .ct-userhtml ol { margin: 0 0 8px 22px; }
.ct-userhtml hr { border: 0; border-top: 1px solid var(--ct-rule-soft); margin: 10px 0; }
.ct-userhtml pre {
  background: #f6f6f6; border: 1px solid var(--ct-rule-soft);
  padding: 7px; overflow-x: auto; font-size: 11px;
}

/* ── 11c. Forms: submit a video, edit your channel ─────────────── */
.ct-fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 18px;
}
.ct-flabel {
  display: block;
  font-size: 11px;
  font-weight: bold;
  color: #333;
  margin: 9px 0 3px;
}
.ct-input {
  width: 100%;
  box-sizing: border-box;
  font: 12px var(--ct-face);
  padding: 4px 6px;
  border: 1px solid #999999;
  border-top-color: #767676;
  background: #fff;
}
textarea.ct-input { resize: vertical; }
.ct-code {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  height: 260px;
  white-space: pre;
  tab-size: 2;
}
.ct-check {
  display: block;
  font-size: 12px;
  margin: 3px 0;
  cursor: pointer;
}
.ct-check input { vertical-align: -1px; margin-right: 4px; }
.ct-rules {
  border: 1px solid #cddcee;
  background: #f2f7fd;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.ct-banner-preview {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border: 1px solid var(--ct-rule);
  display: block;
}
.ct-subtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.ct-subtable th {
  text-align: left; font-size: 11px; color: var(--ct-dim);
  border-bottom: 1px solid var(--ct-rule); padding: 3px 6px 3px 0;
}
.ct-subtable td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--ct-rule-soft); vertical-align: top; }
.ct-status { font-size: 10px; font-weight: bold; padding: 1px 6px; white-space: nowrap; }
.ct-status.ok   { background: #dff0d8; color: #2d6a2d; }
.ct-status.no   { background: #f6dede; color: #8a2020; }
.ct-status.wait { background: #fff3cd; color: #7a5c00; }
.ct-pill {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px;
  background: #006600; color: #fff; padding: 1px 4px; margin-left: 4px;
}

/* ── 12. Browse ────────────────────────────────────────────────── */
.ct-browse { display: flex; gap: 14px; align-items: flex-start; }
.ct-browse-side { flex: 0 0 175px; }
.ct-browse-main { flex: 1 1 auto; min-width: 0; }
.ct-catlist { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.ct-catlist li a {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 4px 9px; border-bottom: 1px solid var(--ct-rule-soft);
}
.ct-catlist li a:hover  { background: #f4f8ff; text-decoration: none; }
.ct-catlist li a.active { background: #eef3fb; font-weight: bold; }
.ct-catlist .ct-n { color: var(--ct-dimmer); font-weight: normal; }

.ct-sortbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px; padding: 5px 0 9px; color: var(--ct-dim);
}
.ct-sortbar a.active { font-weight: bold; color: #000; }

.ct-paging { text-align: center; padding: 12px 0 0; font-size: 11px; }
.ct-paging a, .ct-paging span {
  display: inline-block; padding: 3px 8px; margin: 0 2px;
  border: 1px solid var(--ct-rule); background: #fff;
}
.ct-paging span.here { background: var(--ct-red); color: #fff; border-color: var(--ct-red-dark); font-weight: bold; }
.ct-paging a:hover { background: #f2f2f2; text-decoration: none; }

.ct-cloud a { display: inline-block; margin: 0 6px 4px 0; line-height: 1.5; }
.ct-cloud .s1 { font-size: 10px; color: #6688bb; }
.ct-cloud .s2 { font-size: 12px; }
.ct-cloud .s3 { font-size: 14px; font-weight: bold; }
.ct-cloud .s4 { font-size: 17px; font-weight: bold; color: #cc3300; }

.ct-empty { padding: 26px 12px; text-align: center; color: var(--ct-dim); font-size: 12px; }

/* ── 13. Cinema Mode ───────────────────────────────────────────────
   The old Theater is not thrown away, it is a coat that goes over the
   top. Adding .ct-cinema to <body> blacks the page out, hides the site
   chrome and the side rails, and drops the curtain photo back in behind
   a big letterboxed screen. Taking the class off restores 2006. */
body.ct-cinema {
  background: #000000 !important;
  color: #cccccc;
}
body.ct-cinema #site-header,
body.ct-cinema #main-nav,
body.ct-cinema #marquee-strip,
body.ct-cinema #ie-titlebar,
body.ct-cinema #ie-menubar,
body.ct-cinema #ie-addressbar,
body.ct-cinema #site-footer,
body.ct-cinema #status-bar,
body.ct-cinema .ct-masthead,
body.ct-cinema .ct-navstrip,
body.ct-cinema .ct-watch-side,
body.ct-cinema .ct-tabs,
body.ct-cinema .ct-tabpane,
body.ct-cinema .ct-footer { display: none !important; }

body.ct-cinema #site-wrapper { background: #000 !important; border: 0 !important; box-shadow: none !important; }
body.ct-cinema .ct-page {
  max-width: none;
  background: #000 url('/assets/img/theater-bg.jpg') center top / cover no-repeat;
  min-height: 100vh;
  padding: 0;
}
body.ct-cinema .ct-watch { display: block; padding: 5vh 0 0; }
body.ct-cinema .ct-watch-main { max-width: 900px; margin: 0 auto; padding: 0 16px 40px; }
body.ct-cinema .ct-video-title { color: #ff6666; text-shadow: 0 0 8px rgba(255,0,0,0.6); text-align: center; font-size: 20px; }
body.ct-cinema .ct-video-sub   { color: #aa8888; text-align: center; }
body.ct-cinema .ct-video-sub a { color: #ff9999; }
body.ct-cinema .ct-screen {
  aspect-ratio: 16 / 9;
  border: 4px solid rgba(100,20,20,0.6);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.05),
              0 0 40px rgba(200,0,0,0.35),
              inset 0 0 20px rgba(0,0,0,0.85);
}
/* The CRT lines belong on the glass, not on the whole page. */
body.ct-cinema .ct-screen:after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px);
  pointer-events: none;
  z-index: 10;
}
body.ct-cinema .ct-underbar,
body.ct-cinema .ct-actions {
  background: rgba(10,0,0,0.82);
  border-color: #3a1010;
  color: #cbb;
}
body.ct-cinema .ct-underbar .ct-views,
body.ct-cinema .ct-underbar .ct-label { color: #ddc; }
body.ct-cinema .ct-actions button,
body.ct-cinema .ct-actions a.ct-act { color: #ff9999; border-right-color: #3a1010; }
body.ct-cinema .ct-rating-count { color: #a88; }
body.ct-cinema #ct-comments-anchor { display: none; }
/* The cream Recommended-by strip is the one thing that survives into
   Cinema Mode, so it has to stop being cream. */
body.ct-cinema .ct-notice {
  background: rgba(30,10,10,0.85);
  border-color: #5a2020;
  color: #e0c8c8;
}
body.ct-cinema .ct-notice a { color: #ffcc66; }

.ct-cinema-btn { font-weight: bold; }
body.ct-cinema .ct-cinema-btn { color: #ffcc66 !important; }

/* ── 14. Small screens ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .ct-watch, .ct-browse { display: block; }
  .ct-watch-side, .ct-browse-side { width: auto; margin-top: 14px; }
  .ct-searchbar input[type=text] { width: 130px; }
}
@media (max-width: 560px) {
  .ct-page { padding: 0 6px 22px; font-size: 13px; }
  .ct-feat-thumb { flex: 1 1 auto; max-width: none; }
  .ct-feat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .ct-picswitch label { white-space: normal; }
  .ct-logo { font-size: 25px; }
  .ct-video-title { font-size: 16px; }
  .ct-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 11px 9px; }
  .ct-navstrip { flex-direction: column; }
  .ct-navstrip ul { justify-content: center; }
  .ct-searchbar { justify-content: center; padding-bottom: 7px; }
  .ct-searchbar input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; }
  .ct-masthead { justify-content: center; text-align: center; }
  .ct-masthead-right { text-align: center; width: 100%; }
  .ct-actions { font-size: 12px; }
  .ct-actions button, .ct-actions a.ct-act { padding: 3px 8px; }
  .ct-star { width: 18px; height: 18px; background-size: 18px 18px; }
  .ct-meta-table th { width: 74px; }
}