/* ============================================================
   2010 YouTube-style channel shell — structure only.
   Frames drawn in light lines so they read over the art.
   Background art is LOCKED to native size and centred, so it
   always lines up with the content column; wider screens show
   solid side bands (set --band to match your art's edge).
   ============================================================ */

/* ---------- theme knobs (tweak contrast / band colour here) ---------- */
:root {
  --frame:   rgba(255, 255, 255, 0.92);  /* box / frame lines */
  --divider: rgba(255, 255, 255, 0.55);  /* fainter internal dividers */
  --ink:     #ffffff;                     /* text colour */
  --band:    #2b0620;                     /* solid fill on the sides + below the art */
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);  /* keeps text legible over the art */

  /* --- background art (1280 x 2160), locked to native size --- */
  background-color: var(--band);
  background-image: url("art.png");   /* put your file next to this .css */
  background-repeat: no-repeat;
  background-position: center top;    /* centred, anchored to the top */
  background-size: 1280px auto;       /* native 1:1 — never scales */
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;

  /* 300px clear band at top for the art; 20px on the sides and bottom */
  padding: 300px 20px 20px;

  /* Lets the lower part of the tall art be reached by scrolling before
     you've added much content. Matches the art height. Remove or raise
     once real content fills the page. */
  min-height: 2160px;
}

a { color: inherit; text-decoration: none; }

/* generic button helper */
.btn {
  display: inline-block;
  border: 1px solid var(--frame);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- outer page frame ---------- */
.page {
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid var(--frame);
  border-radius: 8px;
  padding: 12px;
}

/* ============================================================
   1. CHANNEL HEADER BAR
   ============================================================ */
.channel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--frame);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.channel-header .avatar {
  width: 40px; height: 40px;
  border: 1px solid var(--frame); border-radius: 4px;
  flex: 0 0 auto;
  background: url("img/profile.png") center / cover no-repeat;
}
.channel-header .titles .name { font-size: 15px; font-weight: bold; }
.channel-header .titles .user { font-size: 11px; }
.channel-header nav { display: flex; gap: 16px; margin-left: 4px; }
.channel-header .icons { margin-left: auto; display: flex; gap: 6px; }
.channel-header .icon {
  width: 24px; height: 18px;
  border: 1px solid var(--frame); border-radius: 3px;
}

/* ============================================================
   2. MAIN CONTENT — two columns
   ============================================================ */
.main {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.main-left  { flex: 1 1 auto; min-width: 0; }
.main-right {
  flex: 0 0 320px;
  max-height: 470px;
  overflow-y: auto;
  border: 1px solid var(--frame);
  border-radius: 6px;
  padding: 8px;
}

/* ---- 2a. video player (drop a YouTube embed into .screen) ---- */
.player {
  border: 1px solid var(--frame); border-radius: 6px;
  padding: 6px; margin-bottom: 10px;
}
.player .screen {
  border: 1px solid var(--frame); border-radius: 3px;
  aspect-ratio: 16 / 9;   /* standard YouTube embed ratio */
  width: 100%;
  overflow: hidden;       /* clips the iframe to the rounded frame */
}
.player .screen iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ---- 2a. info tab row ---- */
.tabs {
  display: flex; gap: 16px;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 6px; margin-bottom: 10px;
}

/* ---- 2a. video info block ---- */
.video-info { border: 1px solid var(--frame); border-radius: 6px; padding: 12px; }
.video-info .title { font-size: 16px; font-weight: bold; margin-bottom: 6px; }
.video-info .meta  { font-size: 11px; margin-bottom: 8px; }
.video-info .desc  { margin-bottom: 10px; }
.video-info .desc .line {
  border-bottom: 1px dotted var(--divider);
  height: 14px; margin-bottom: 4px;
}
.video-info .more { font-weight: bold; }

/* ---- 2b. sidebar sections ---- */
.side-section { margin-bottom: 14px; }
.side-section > h3 {
  font-size: 13px;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 4px; margin-bottom: 8px;
}
.vid-item { display: flex; gap: 8px; margin-bottom: 8px; }
.vid-item .thumb {
  width: 80px; height: 46px;
  border: 1px solid var(--frame); border-radius: 3px;
  flex: 0 0 auto;
}
.vid-item .info { font-size: 11px; min-width: 0; }
.vid-item .info .t { font-weight: bold; }
.see-all { font-size: 11px; }

/* ============================================================
   3. BOTTOM — channel box
   ============================================================ */
.bottom { display: flex; gap: 12px; align-items: flex-start; }
.bottom-left {
  flex: 0 0 300px;
  display: flex; flex-direction: column; gap: 12px;
}

.channel-box {
  border: 1px solid var(--frame); border-radius: 6px;
  padding: 12px; display: flex; gap: 12px;
}
.channel-box .avatar {
  width: 70px; height: 70px;
  border: 1px solid var(--frame); border-radius: 4px;
  flex: 0 0 auto;
  background: url("img/profile.png") center / cover no-repeat;
}
.channel-box .actions {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px;
}