/* The original guytv.com look, carried over to the public pages:
   dark grey, mid-grey text, white links, uppercase grey headings, dark
   rounded buttons, and matrix-green glitch text. */
body.public { background-color: #212121; color: #666666; }
.public a { color: #ffffff; border-bottom: 0; }
.public p { color: #00ff00; }
.public h1 { color: #999999; font-size: 2em; text-transform: uppercase; font-weight: bold; }
.public h3 { color: #999999; text-transform: uppercase; }

/* nav + channel switcher as the old dark buttons */
.public .nav { gap: 10px; }
.public .nav a, .public .chanlist a {
  display: block; background-color: #0B0B0B; color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 5px; font-size: 20px; border: 0; text-transform: uppercase;
}
.public .nav a.on, .public .chanlist a.on { outline: 1px solid #666; }
.public .nav a:hover, .public .chanlist a:hover { background-color: #000; }

.public .nowbar { border-bottom-color: #333; }
.public .nowbar .title { color: #fff; text-transform: uppercase; }
.public .later li { border-bottom-color: #333; }
.public .later span { color: #ccc; }
.public .player { outline-color: #333; }

/* big logo when nothing's on, like the old #guytvLogo header */
#guytvLogo { padding-top: 60px; text-align: center; }
#guytvLogo img { width: min(320px, 60vw); height: auto; }
#guytvLogo h1 { font-size: 50px; margin-top: 30px; }

#matrixtext {
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00, 0 0 80px #00ff00;
  animation: glitch 1s infinite;
}
@keyframes glitch {
  0% { transform: translate(0); }
  25% { transform: translate(2px, -3px); }
  50% { transform: translate(-3px, 2px); }
  75% { transform: translate(3px, -2px); }
  100% { transform: translate(-2px, 3px); }
}
@media (prefers-reduced-motion: reduce) { #matrixtext { animation: none; } }
@media (max-width: 640px) { .public .nav a, .public .chanlist a { padding: 8px 14px; font-size: 17px; } }
.public .brand img { height: 96px; }
@media (max-width: 640px) { .public .brand img { height: 64px; } }

/* ------------------------------------------------------------ player tools */
.player-tools { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 6px;
                opacity: 0; transition: opacity .2s; }
.player:hover .player-tools, .player:focus-within .player-tools, .player-tools:has([aria-expanded="true"]) { opacity: 1; }
@media (hover: none) { .player-tools { opacity: .85; } }
.player-tools button { background: rgba(11, 11, 11, .85); color: #fff; border: 0; border-radius: 5px;
                       padding: 6px 12px; font: 16px var(--font); text-transform: uppercase; cursor: pointer; }
.player-tools button:hover { background: #000; filter: none; }
.settings-pop { position: absolute; top: 40px; right: 0; width: 260px; background: #0B0B0B; border: 1px solid #333;
                border-radius: 5px; padding: 12px; }
.settings-pop label.inline { color: #ddd; font-size: .95rem; }

/* ------------------------------------------------------------ theatre mode */
body.theatre { background: #000; }
body.theatre .wrap { max-width: none; padding: 0; }
body.theatre .top { padding: 10px 16px; }
body.theatre .top .brand img { height: 48px; }
body.theatre .stage { background: #000; }
body.theatre .player { width: 100%; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px);
                       aspect-ratio: 16 / 9; margin: 0 auto; outline: 0; }
body.theatre .player video { object-fit: contain; }
body.theatre .nowbar, body.theatre .later, body.theatre h3, body.theatre .chanlist { margin-left: 16px; margin-right: 16px; }

/* ------------------------------------------------------------ now-playing card */
.np-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 18px; align-items: flex-end;
           padding: 18px 22px; background: linear-gradient(transparent, rgba(0, 0, 0, .55) 25%, rgba(0, 0, 0, .9));
           transform: translateY(110%); visibility: hidden; pointer-events: none;
           transition: transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s; }
.np-card.show { transform: translateY(0); visibility: visible; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.np-card img { width: clamp(70px, 12vw, 150px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px;
               box-shadow: 0 4px 18px rgba(0, 0, 0, .6); flex: none; }
.np-card img.logo { object-fit: contain; background: #111; padding: 10px; }
.np-info { min-width: 0; padding-bottom: 4px; }
.np-ch { color: #00ff00; text-transform: uppercase; font-size: clamp(.75rem, 1.3vw, 1rem); }
.np-title { color: #fff; text-transform: uppercase; font-size: clamp(1.3rem, 3.2vw, 2.6rem); line-height: 1.05; }
.np-sub { color: #bbb; font-size: clamp(.85rem, 1.6vw, 1.2rem); margin-top: 4px; }
.np-desc { color: #999; font-size: clamp(.8rem, 1.3vw, 1rem); margin-top: 6px; max-width: 70ch;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-desc:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .np-card { transition: opacity .3s; opacity: 0; transform: none; } .np-card.show { opacity: 1; } }

/* ------------------------------------------------------------ on-screen chat (Nico Nico style) */
.danmaku { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; contain: strict; }
.danmaku .dm { position: absolute; left: 0; white-space: nowrap; color: #fff; font-weight: 700; line-height: 1.2;
               font-family: var(--font), "Helvetica Neue", Arial, sans-serif; will-change: transform; opacity: .92;
               text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.danmaku .dm img { height: 1.2em; vertical-align: -.25em; }
.player:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; max-height: none; outline: 0; }
.settings-pop label.inline { display: block; margin: 4px 0; }