/* ===========================================================================
   Loopreel — one stylesheet for the whole site
   =========================================================================== */

:root{
  --bg:#111111;
  --card-bg:#1a1a1a;
  --line:#2a2a2a;
  --grey:#c8c5b8;
  --accent:#26d036;
  --teal:#2ad4c4;
  --muted:#9a9a9a;
  /* Card titles. Soft yellow, ~15:1 against the page background. */
  --title:#f0e2a4;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--grey);
  font-family:Arial,sans-serif;
  font-size:9pt;
  line-height:1.5;
}
h1,h2,h3{
  font-family:Arial,sans-serif;
  background:-webkit-linear-gradient(var(--grey), var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  padding:8px 3px;margin:0;line-height:26px;
}
h1{font-size:130%;}
h2{font-size:120%;}
h3{font-size:110%;}
a{color:var(--accent);text-decoration:none;}
a:visited{color:var(--accent);}
a:hover{color:var(--grey);}
img,svg{display:block;}

/* No width cap. The 1280px one left ~160px of dead space down each side of a
   1600px screen — the player broke out of it and everything below did not,
   which is what read as a gap on the right. The small padding is all that keeps
   cards off the very edge. Blocks that genuinely need a reading width set their
   own (see .sm-intro, .contact-form). */
.wrap{margin:0 auto;padding:0 8px;}
.empty{color:var(--muted);padding:20px 4px;}

/* ---------------------------------------------------------------- shell --- */
.shell{min-height:100vh;}

.sidebar{
  width:220px;position:fixed;left:0;top:0;bottom:0;z-index:30;
  overflow-y:auto;border-right:1px solid var(--line);padding:14px 12px;
  display:flex;flex-direction:column;gap:18px;
  background:var(--bg);scrollbar-width:thin;
  transform:translateX(-100%);transition:transform .2s ease;
}
.sidebar.open{transform:translateX(0);}

.brand{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  font-weight:bold;font-size:13pt;
  background:-webkit-linear-gradient(var(--grey), var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.brand .icon{font-size:16pt;-webkit-text-fill-color:initial;}

nav.side-nav{display:flex;flex-direction:column;gap:2px;}
nav.side-nav a{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:5px;
  font-size:10.5pt;font-weight:bold;color:var(--accent);
}
nav.side-nav a:visited{color:var(--accent);}
nav.side-nav a .icon{font-size:12pt;width:18px;text-align:center;}
nav.side-nav a:hover{background:var(--card-bg);color:var(--grey);}
nav.side-nav a.active{background:var(--card-bg);color:var(--teal);}

.main{width:100%;container-type:inline-size;}

header{
  background:rgba(17,17,17,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.header-row{
  display:grid;grid-template-columns:36px 1fr 36px;align-items:center;
  padding:10px 0;
}
.menu-toggle{
  grid-column:1;justify-self:start;
  background:none;border:0;color:var(--grey);font-size:16pt;cursor:pointer;padding:0 4px;
}
.home-btn{
  grid-column:2;justify-self:center;display:flex;align-items:center;gap:6px;
  padding:6px 18px;border-radius:20px;
  background:linear-gradient(var(--card-bg), #141414);
  color:var(--accent);font-weight:bold;font-size:10.5pt;
}
.home-btn:hover{color:var(--teal);}

.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:29;}
.scrim.open{display:block;}

/* ------------------------------------------------------- sort pill row --- */
.cat-bar{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none;}
.cat-bar::-webkit-scrollbar{display:none;}
.cat-bar a{
  flex-shrink:0;padding:0 12px;height:24px;line-height:24px;border-radius:3px;
  background:linear-gradient(var(--card-bg), #141414);
  font-size:9pt;font-weight:bold;color:var(--accent);
}
.cat-bar a:hover{color:var(--grey);}
.cat-bar a.active{color:var(--teal);}

/* ------------------------------------- video grid: 1 / 2 / 3 / 4 columns --- */
.content{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;padding-top:6px;}
.th{
  position:relative;width:calc(100% - 8px);min-width:96px;max-width:500px;
  margin:4px 4px 10px 4px;
}
@container (min-width:520px){.th{width:calc(50% - 8px);margin-bottom:16px;}}
@container (min-width:760px){.th{width:calc(33.33% - 8px);}}
@container (min-width:980px){.th{width:calc(25% - 8px);}}
/* Past four columns a card's own max-width:500px starts to bind, and flex
   leaves the slack at the right end of every row — the same gap in a new place.
   More columns keep each card under that cap so the rows stay flush. */
@container (min-width:1280px){.th{width:calc(20% - 8px);}}
@container (min-width:1600px){.th{width:calc(16.666% - 8px);}}
@container (min-width:1920px){.th{width:calc(14.285% - 8px);}}

.thumb{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/9;background:#000;
}
.thumb .art{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;transition:transform .3s ease;
}
/* real generated/uploaded thumbnails */
.thumb img.art{width:100%;height:100%;object-fit:cover;}
.th:hover .art{transform:scale(1.05);}
.thumb .duration{
  position:absolute;bottom:4px;right:4px;
  font-size:9pt;font-weight:bold;color:#fff;
  text-shadow:-1px -1px 3px #000,1px -1px 3px #000,-1px 1px 3px #000,1px 1px 3px #000;
  padding:0 3px;pointer-events:none;user-select:none;
}
.thumb .live,.player .live{
  position:absolute;top:6px;left:6px;font-size:8pt;font-weight:bold;
  color:#111;background:var(--teal);padding:2px 6px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.03em;
}
.desc{
  font-size:10pt;font-weight:bold;text-align:left;color:var(--title);
  line-height:20px;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  margin-top:6px;
}
/* Two columns and up: reserve both lines so card bottoms stay level. */
@container (min-width:520px){.desc{height:40px;}}

/* Views on the left, like share on the right, under the title. */
.card-meta{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-top:3px;font-size:9pt;color:var(--muted);
}
.card-meta .views,.card-meta .likes{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.card-meta .likes{color:var(--teal);}
/* An unvoted video shows the same 100% as any other, so a fresh upload does
   not stand out as unrated. The .unvoted class stays on the element for the
   tooltip and as a styling hook: add
       .card-meta .likes.unvoted{color:var(--muted);}
   to dim them instead. */
.th:hover .desc{color:#fff;}
.th:hover .card-meta .views{color:var(--grey);}

/* ------------------------------------------------------------ pagination --- */
.pages{display:flex;justify-content:center;gap:6px;margin:20px 0 12px;flex-wrap:wrap;}
.pages a,.pages span{
  min-width:30px;height:30px;padding:0 4px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:11pt;font-weight:bold;
  background:linear-gradient(var(--card-bg), #141414);color:var(--accent);
}
.pages span.current{color:var(--teal);}
.pages span.gap{background:none;color:var(--muted);min-width:16px;}
.pages a:hover{color:var(--grey);}

/* ================================================== play page ============ */
.watch{padding-top:8px;}
.watch-main{width:calc(100% - 8px);margin:0 4px;}
/* The player runs edge to edge.
 *
 * Everything else sits inside .wrap; these negative inline margins pull this one
 * element back out to the viewport edges. --sbw is the scrollbar width, measured
 * in app.js — viewport units count the scrollbar as part of the viewport while
 * the layout does not, so without it the breakout overshoots and the page gains
 * a horizontal scrollbar.
 *
 * There is deliberately no max-height. Capping it looked sensible, but a browser
 * viewport is wider than 16:9 once the toolbar and taskbar have taken their
 * share — 1872x825 is a ratio of 2.27 — so limiting the player to the viewport
 * height also limited its width, leaving a 405px strip down the right. Width
 * wins: the player fills the screen and its bottom edge falls just below the
 * fold, which is a short scroll rather than a permanent gap.
 */
.player-box{
  margin-inline:calc(50% - 50svw + var(--sbw, 0px) / 2);
  max-width:none;
  aspect-ratio:16/9;
  border-radius:0;
}
/* real uploaded video */
.player-video{
  display:block;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:var(--radius);
}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 3px 0;}
.tags a{
  padding:0 10px;height:22px;line-height:22px;border-radius:3px;
  background:#141414;font-size:9pt;font-weight:bold;
}

.player{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/9;background:#000;
}
.player .art{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:64px;
}
.player .shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.55));}
.play-toggle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(17,17,17,.88);color:var(--teal);
  font-size:20pt;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,color .2s ease,opacity .2s ease;
}
.play-toggle:hover{color:var(--grey);transform:translate(-50%,-50%) scale(1.06);}
.controls{
  position:absolute;left:0;right:0;bottom:0;padding:14px 10px 9px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.82));
}
.controls button{
  background:none;border:0;color:#fff;cursor:pointer;
  font-size:11pt;line-height:1;padding:0;
}
.controls button:hover{color:var(--teal);}
.seek{
  flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.25);
  position:relative;cursor:pointer;
}
.seek .played{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:2px;}
.seek .knob{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;background:var(--accent);
}
.time{font-size:9pt;font-weight:bold;color:#fff;white-space:nowrap;text-shadow:0 1px 2px #000;}

.vid-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  margin:2px 3px 12px;font-size:9pt;color:var(--muted);
}
.actions{display:flex;flex-wrap:wrap;gap:6px;}
.btn{
  display:flex;align-items:center;gap:5px;
  padding:0 12px;height:26px;border-radius:3px;border:0;cursor:pointer;
  background:linear-gradient(var(--card-bg), #141414);
  color:var(--accent);font-weight:bold;font-size:9pt;font-family:inherit;
}
.btn:hover{color:var(--grey);}
.btn.on{color:var(--teal);}
.btn[disabled]{opacity:.55;cursor:default;}
.btn.vote .count{font-variant-numeric:tabular-nums;}
/* Available, not advertised: quieter than Like and Share beside it. */
.btn.report{color:var(--muted);text-decoration:none;}
.btn.report:hover{color:#ff9b7a;}

/* On a phone the block between the player and Related Videos is three stacked
   rows — title, meta, buttons — and the default spacing made it sprawl. Tighten
   the rhythm below two columns; the desktop layout is unchanged. */
@container (max-width:519px){
  .watch h1{padding-top:2px;padding-bottom:4px;line-height:22px;}
  .vid-meta{gap:6px;margin-bottom:8px;}
  .actions{gap:5px;}
  .btn{padding:0 10px;}
  .sec-head{margin-top:8px;}
  .tags{margin-top:6px;}
}

/* ------------------------------------------------ related section header --- */
/* Three tracks with the heading in the middle one: the empty first track
   mirrors the Autoplay control, so "Related Videos" sits at the true centre of
   the row rather than in the middle of whatever space is left over. */
.sec-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:8px;margin:14px 3px 0;
}
.sec-head h2{grid-column:2;text-align:center;}
.sec-head .autoplay{grid-column:3;justify-self:end;}
.autoplay{display:flex;align-items:center;gap:6px;font-size:9pt;color:var(--muted);}
.switch{
  width:34px;height:18px;border-radius:10px;cursor:pointer;padding:0;
  background:#141414;border:1px solid var(--line);position:relative;
}
.switch i{
  position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--muted);transition:left .2s ease,background .2s ease;
}
.switch.on{background:rgba(42,212,196,.18);border-color:var(--teal);}
.switch.on i{left:18px;background:var(--teal);}

/* --------------------------------------------------- contact / report ----- */
.note-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);
  padding:12px 14px;margin:8px 3px;max-width:70ch;font-size:9.5pt;
}
.note-card p{margin:0 0 6px;}
.note-card p:last-child{margin-bottom:0;}
.note-card.ok{border-color:rgba(38,208,54,.45);}
.note-card.warn{border-color:rgba(255,184,74,.5);color:#ffb84a;}
.muted-label{color:var(--muted);font-size:9pt;}

.contact-form{
  display:flex;flex-direction:column;gap:14px;
  max-width:70ch;margin:10px 3px 0;
}
.c-row{display:flex;gap:14px;flex-wrap:wrap;}
.c-row .c-field{flex:1;min-width:200px;}
.c-field{display:flex;flex-direction:column;gap:5px;}
.c-label{font-size:9.5pt;font-weight:bold;color:var(--grey);}
.req{color:#ff9b7a;}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form select,
.contact-form textarea{
  background:#141414;border:1px solid var(--line);border-radius:5px;
  color:var(--grey);padding:8px 10px;font-family:inherit;font-size:10pt;width:100%;
}
.contact-form textarea{resize:vertical;min-height:110px;}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{outline:none;border-color:var(--teal);}
.contact-form small{color:var(--muted);font-size:9pt;}

.c-actions{display:flex;align-items:center;gap:14px;}
.primary-btn{
  background:linear-gradient(var(--card-bg), #141414);
  border:1px solid var(--accent);color:var(--accent);
  height:32px;padding:0 20px;
}
.primary-btn:hover{color:var(--grey);border-color:var(--grey);}
.c-cancel{color:var(--muted);font-size:9.5pt;}

/* The honeypot. Kept out of view without display:none, which some bots check. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ------------------------------------------------------------- ad boxes --- */
/* Only ever wraps a placement that actually has code — an empty slot prints
   nothing at all, so these rules never leave a gap behind. */
.ad-box{
  display:flex;justify-content:center;align-items:center;
  margin:10px 3px;max-width:100%;overflow:hidden;
}
/* Ad units carry their own fixed sizes; stop an oversized one from widening the
   page and forcing a sideways scroll. */
.ad-box > *{max-width:100%;}
.ad-box img,.ad-box iframe{max-width:100%;height:auto;}

/* Inside the thumbnail grid. flex-basis:100% makes it claim a whole row, so
   the columns either side of it stay aligned instead of reflowing around a
   half-width block. */
.ad-in-content{width:100%;flex-basis:100%;margin:6px 3px 14px;}

footer{
  border-top:1px solid var(--line);margin-top:20px;padding:24px 8px 40px;
  color:var(--muted);font-size:9pt;text-align:center;
}
footer a{color:var(--muted);}
footer a:hover{color:var(--grey);}

/* --------------------------------------------------------- sitemap page --- */
.sm-intro{max-width:78ch;margin:0 3px 6px;color:var(--muted);font-size:9.5pt;}
.sm-intro b{color:var(--grey);}

.sm-browse{margin:0 3px;}
.sm-links{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px;padding:0;}
.sm-links a{
  display:inline-block;padding:4px 10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card-bg);
  color:var(--muted);font-size:9pt;white-space:nowrap;
}
.sm-links a:hover{color:var(--teal);border-color:var(--teal);}

.sm-sec{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card-bg);margin:10px 3px;padding:4px 12px 12px;
}
.sm-sec h2{display:flex;align-items:center;gap:8px;}
.sm-count{
  -webkit-text-fill-color:initial;
  font-size:8.5pt;font-weight:normal;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;padding:0 8px;line-height:16px;
}

.sm-list{list-style:none;margin:0;padding:0;columns:1;}
@media (min-width:620px){.sm-list{columns:2;column-gap:24px;}}
@media (min-width:1000px){.sm-list{columns:3;column-gap:24px;}}
.sm-list li{
  break-inside:avoid;padding:3px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.sm-list li:last-child{border-bottom:0;}
.sm-list li a{
  font-size:9.5pt;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.sm-meta{color:var(--muted);font-size:8.5pt;white-space:nowrap;flex-shrink:0;}

/* An uploaded logo replaces the emoji and the site name in the brand. Height is
   what is constrained, so any aspect ratio lands the same size in the bar. */
.brand-logo{max-height:34px;max-width:100%;width:auto;display:block;}