/* =============================================================
   SKIPPY SWAGS — layout.css
   Zone-specific styling: nav, stream panel, socials rail.
   (Chat lives in chat.css.)
   ============================================================= */

/* ---------------------------------------------------------- NAV */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  border-radius: var(--radius);
}

.brand__mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line-strong), 0 6px 16px -6px rgba(110, 168, 255, 0.6);
  transition: transform var(--dur-med) var(--ease-spring);
}
.brand:hover .brand__mark {
  transform: rotate(-6deg) scale(1.06);
}

/* Chrome wordmark: the 90s metallic type treatment, kept crisp with
   background-clip text and a faint violet underglow. */
.brand__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  font-style: italic;
  transform: skewX(-6deg);
}
/* Right padding keeps the italic overhang inside the clipped background. */
.brand__logo-chrome {
  padding-right: 0.12em;
}
.brand__logo-chrome {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%), var(--chrome);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: chromeGlint 6s var(--ease-in-out) infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(110, 168, 255, 0.25));
}
/* Only "SWAGS" shifts color: a slow drift through the blue–violet band
   of the palette, glow following along. */
.brand__logo-accent {
  color: var(--accent);
  animation: swagsCycle 10s var(--ease-in-out) infinite;
}
@keyframes swagsCycle {
  0%,
  100% {
    color: #6ea8ff;
    text-shadow: 0 0 16px rgba(110, 168, 255, 0.5);
  }
  25% {
    color: #8f9bff;
    text-shadow: 0 0 16px rgba(143, 155, 255, 0.5);
  }
  50% {
    color: #b48cff;
    text-shadow: 0 0 16px rgba(180, 140, 255, 0.5);
  }
  75% {
    color: #7cc4ff;
    text-shadow: 0 0 16px rgba(124, 196, 255, 0.5);
  }
}

/* --------------------------------------------------- NAV TICKER */
/* A recessed crawl lane between the wordmark and the hotlinks. JS
   (ticker.js) moves the track; CSS only handles the look, the edge
   fades, and the per-phrase color/glitch treatments. */
.ticker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 0 0 13px;
  background: linear-gradient(180deg, rgba(4, 6, 14, 0.42), rgba(10, 14, 28, 0.3));
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 0 var(--line-hi);
  overflow: hidden;
  cursor: default;
  user-select: none;
  animation: tickerIn 700ms var(--ease-out) 200ms both;
}
/* faint CRT scanlines over the lane */
.ticker::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
  border-radius: inherit;
}
@keyframes tickerIn {
  from {
    opacity: 0;
    transform: scaleX(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ticker__led {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 2px rgba(255, 77, 94, 0.18), 0 0 10px rgba(255, 77, 94, 0.8);
  animation: tickerLed 1.6s var(--ease-in-out) infinite;
}
@keyframes tickerLed {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.ticker__lane {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 48px), transparent 100%);
}

.ticker__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  will-change: transform;
}

.ticker__text {
  font-family: var(--font-pixel);
  font-size: 11.5px;
  letter-spacing: 1.4px;
  line-height: 1;
  color: var(--text-2);
}
.ticker__item--plain .ticker__text {
  color: var(--text);
  text-shadow: 0 0 10px rgba(200, 222, 255, 0.18);
}
.ticker__item--accent .ticker__text {
  color: var(--accent-hi);
  text-shadow: 0 0 12px rgba(110, 168, 255, 0.55);
}
.ticker__item--pink .ticker__text {
  color: var(--pink);
  text-shadow: 0 0 12px rgba(255, 143, 200, 0.5);
}
.ticker__item--chrome .ticker__text {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%), var(--chrome);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(110, 168, 255, 0.35));
  animation: chromeGlint 4s var(--ease-in-out) infinite;
}

/* Occasional RGB-split stutter, desynced per phrase. */
.ticker__text--glitch {
  animation: tickerGlitch 6s steps(1, end) var(--glitch-delay, 0s) infinite;
}
.ticker__item--chrome .ticker__text--glitch {
  animation: chromeGlint 4s var(--ease-in-out) infinite, tickerGlitch 6s steps(1, end) var(--glitch-delay, 0s) infinite;
}
@keyframes tickerGlitch {
  0%,
  91%,
  100% {
    transform: none;
    text-shadow: none;
  }
  92% {
    transform: translate(-1.5px, 0) skewX(-8deg);
    text-shadow: 2px 0 rgba(255, 77, 94, 0.85), -2px 0 rgba(110, 168, 255, 0.85);
  }
  94% {
    transform: translate(1.5px, -1px);
    text-shadow: -2px 0 rgba(255, 77, 94, 0.85), 2px 0 rgba(156, 240, 201, 0.8);
  }
  96% {
    transform: translate(0, 1px) skewX(6deg);
    text-shadow: 1px 0 rgba(255, 143, 200, 0.9), -1px 0 rgba(110, 168, 255, 0.9);
  }
}

.ticker:hover {
  border-color: var(--line-strong);
}

/* Still mode (reduced motion / FX off): one phrase, crossfaded. */
.ticker[data-mode="still"] .ticker__track {
  position: relative;
  width: 100%;
}
.ticker__item--still {
  position: absolute;
  inset: 0 0 0 10px;
  animation: tickerFadeIn 400ms var(--ease-out) both;
}
.ticker__item--still.is-leaving {
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
@keyframes tickerFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------- AUTH (chat) */
.auth-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
}

.google-signin-button {
  position: relative;
  display: inline-flex;
  min-height: 32px;
  line-height: normal;
  border-radius: var(--radius-pill);
  overflow: hidden;
  animation: fadeIn var(--dur-med) var(--ease-out) both;
}

/* Google renders its button in a light-scheme iframe. Inside our dark
   page that scheme mismatch makes the browser paint an opaque white box
   behind it; matching the iframe's scheme keeps its backdrop transparent. */
.google-signin-button iframe {
  color-scheme: light;
  background: transparent;
}

.google-signin-fallback {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px 0 6px;
  color: #1a1726;
  background: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(255, 255, 255, 0.5);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.google-signin-fallback:hover {
  box-shadow: 0 8px 22px -6px rgba(110, 168, 255, 0.7);
}
.google-signin-fallback:active {
  transform: scale(0.96);
}
.google-signin-fallback__icon {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.auth-user {
  display: flex;
  align-items: center;
  animation: fadeIn var(--dur-med) var(--ease-out) both;
}

.auth-user__avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 3px rgba(110, 168, 255, 0.5);
  animation: popIn var(--dur-med) var(--ease-spring) both;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Toast-style status bubble anchored under the auth controls. */
.auth-status {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 9px 12px;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  line-height: 1.35;
  animation: toastIn var(--dur-med) var(--ease-spring) both;
}
.auth-status::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 9px;
  height: 9px;
  background: inherit;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
.auth-status--error {
  color: #ffd2d8;
  border-color: rgba(255, 124, 142, 0.45);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Gentle halo when chat asks the user to sign in. */
.auth-slot--attention {
  animation: authAttention 1.1s var(--ease-out) 1;
}
@keyframes authAttention {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 168, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(110, 168, 255, 0);
  }
}

/* --------------------------------------------------------- VIDEO */
.win--video .win__body {
  padding: var(--gap);
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #05040a;
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.video-frame__player {
  position: absolute;
  inset: 0;
}

.video-frame iframe,
.video-frame__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- chrome-less player (player.js) ---- */
.player {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.player iframe,
.player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* Transparent layer over the iframe: YouTube never sees hover, so its
   title/share overlays never appear. Clicking toggles playback. */
.player-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.player-shield:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -4px;
}

/* Our poster hides YouTube's start, pause and end screens. */
.player-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: #05060c;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear 0s;
}
.player[data-state="playing"] .player-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.player-poster__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(1.05);
}
.player-poster__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 22px 20px 22px 24px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(110, 168, 255, 0.18), 0 18px 40px -12px rgba(110, 168, 255, 0.8);
  transition: transform var(--dur-med) var(--ease-spring);
}
.player-poster__play svg {
  fill: currentColor;
}
.player:hover .player-poster__play {
  transform: scale(1.08);
}
/* While YouTube's start-up overlay settles, the play button becomes a
   loading ring. */
.player[data-state="starting"] .player-poster__play {
  background: transparent;
  box-shadow: none;
  border: 3px solid rgba(110, 168, 255, 0.2);
  border-top-color: var(--accent);
  animation: spin 800ms linear infinite;
  transform: none;
}
.player[data-state="starting"] .player-poster__play svg {
  visibility: hidden;
}

/* YouTube-style bar: full width along the bottom over a dark gradient,
   playback on the left, clip and fullscreen on the right. */
.player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 36px 12px 6px;
  background: linear-gradient(to top, rgba(8, 6, 16, 0.82), rgba(8, 6, 16, 0.4) 55%, transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.player-controls__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.player-controls__group {
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
}
.player:has(.timeline.is-scrubbing) .player-controls,
.player.is-awake .player-controls,
.player:focus-within .player-controls,
.player[data-state="idle"] .player-controls,
.player[data-state="starting"] .player-controls {
  opacity: 1;
  transform: none;
}
.player:not(.is-awake)[data-state="playing"] {
  cursor: none;
}

.player-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 9px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.player-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.player-btn:active {
  transform: scale(0.9);
}
.player-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}
.player-btn--solid svg {
  fill: currentColor;
}

.video-frame:fullscreen {
  border-radius: 0;
  border: 0;
}

.video-frame__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--text);
  background: radial-gradient(circle at 50% 40%, rgba(110, 168, 255, 0.12), transparent 60%);
}
.video-frame__fallback-icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
}
.video-frame__fallback-title {
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: 1px;
}
.video-frame__fallback-sub {
  max-width: 380px;
  font-size: 13px;
  color: var(--text-2);
}

/* ---- recent videos strip ---- */
.video-gallery-wrap {
  flex-shrink: 0;
  min-width: 0;
  margin-top: var(--gap);
}

.video-gallery__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 10px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-2);
}
.video-gallery__header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.video-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 196px;
  gap: 10px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
}

.video-gallery__status {
  align-self: center;
  padding: 18px 4px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-3);
  white-space: nowrap;
}
a.video-gallery__status:hover {
  color: var(--text);
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  scroll-snap-align: start;
  border-radius: var(--radius);
  animation: fadeIn var(--dur-slow) var(--ease-out) both;
}
.video-card:nth-child(2) {
  animation-delay: 40ms;
}
.video-card:nth-child(3) {
  animation-delay: 80ms;
}
.video-card:nth-child(4) {
  animation-delay: 120ms;
}
.video-card:nth-child(n + 5) {
  animation-delay: 160ms;
}

/* Thumb wrapper is the <img> itself; scanline sheen sits on a
   pseudo-element of the card via a positioned overlay. */
.video-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-sunken);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out),
    filter var(--dur-med) var(--ease-out);
}
.video-card:hover .video-card__thumb,
.video-card:focus-visible .video-card__thumb {
  transform: translateY(-3px);
  filter: saturate(1.15) contrast(1.05);
  box-shadow: 0 0 0 1px rgba(110, 168, 255, 0.5), -3px 0 0 -1px rgba(110, 168, 255, 0.45),
    3px 0 0 -1px rgba(110, 168, 255, 0.45), 0 16px 30px -14px rgba(110, 168, 255, 0.7);
}
.video-card:focus-visible {
  outline: none;
}

.video-card__title {
  min-width: 0;
  padding: 0 2px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.video-card:hover .video-card__title {
  color: var(--text);
}

/* ------------------------------------------------------- SOCIALS */
.socials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: var(--gap);
}

.social-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.social-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 10px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-2);
}

.social-box__header-link {
  position: relative;
  flex-shrink: 0;
  padding: 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease-out);
}
.social-box__header-link:hover,
.social-box__header-link:focus-visible {
  color: var(--pink);
}
.social-box__header-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* SHOW ANGER: a rage face springs up out of the label on hover, then
   shakes and screams with glowing red eyes. The wrapper owns the grow
   (scale from the label), the inner face owns the shake, so the two
   never fight over one transform. Everything is transform/opacity. */
#socialFeedToggle {
  z-index: 1;
  isolation: isolate;
  padding-inline: 4px;
  transition: color 220ms var(--ease-out), text-shadow 320ms var(--ease-out);
}
.anger-toggle__label {
  position: relative;
  z-index: 2;
  display: inline-block;
  transition: transform 320ms var(--ease-spring);
}
.anger-rage {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 55%;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  translate: -50% 0;
  transform: scale(0.05);
  transform-origin: 50% 100%;
  transition: opacity 120ms var(--ease-out) 40ms, transform 160ms var(--ease-in-out);
}
.anger-rage__face {
  position: relative;
  display: block;
  filter: drop-shadow(0 0 0 rgba(255, 30, 30, 0));
  transition: filter 240ms var(--ease-out);
}
.anger-rage__img,
.anger-rage__eyes {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.anger-rage__eyes {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(255, 40, 30, 0.9));
  transition: opacity 140ms var(--ease-out);
}
#socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) {
  color: #ffe1dc;
  text-shadow: 0 0 6px rgba(255, 60, 40, 0.9), 0 0 14px rgba(200, 0, 0, 0.6), 0 1px 1px rgba(40, 0, 0, 0.9);
}
#socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) .anger-toggle__label {
  transform: translateY(-1px);
}
#socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) .anger-rage {
  opacity: 1;
  transform: scale(1);
  transition: opacity 80ms var(--ease-out), transform 240ms var(--ease-spring);
}
/* Shake + scream only once the face has finished growing. */
#socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) .anger-rage__face {
  filter: drop-shadow(0 0 6px rgba(255, 30, 30, 0.75));
  animation: anger-shake 0.11s linear 0.22s infinite, anger-scream 0.5s ease-in-out 0.22s infinite alternate;
}
#socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) .anger-rage__eyes {
  opacity: 1;
  transition-delay: 0.2s;
  animation: anger-eyes 0.36s ease-in-out 0.22s infinite alternate;
}
#socialFeedToggle[aria-pressed="false"]:active .anger-rage {
  transform: scale(1.15);
  transition-duration: 100ms;
}
@keyframes anger-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-1.5px, 0.5px) rotate(-3deg); }
  40% { transform: translate(1.5px, -1px) rotate(2.5deg); }
  60% { transform: translate(-1px, -0.5px) rotate(-2deg); }
  80% { transform: translate(1px, 1px) rotate(3deg); }
}
@keyframes anger-scream {
  from { filter: drop-shadow(0 0 4px rgba(255, 30, 30, 0.55)); }
  to { filter: drop-shadow(0 0 10px rgba(255, 20, 20, 0.95)); }
}
@keyframes anger-eyes {
  from { opacity: 0.8; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) .anger-rage__face,
  #socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) .anger-rage__eyes { animation: none; }
}
html[data-fx="off"] #socialFeedToggle[aria-pressed="false"]:is(:hover, :focus-visible) .anger-rage__face { animation: none; }

.social-list--compact {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  align-items: center;
}

.social-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  transition: transform var(--dur-med) var(--ease-spring), color var(--dur-fast) var(--ease-out),
    filter var(--dur-med) var(--ease-out);
}
.social-link__icon {
  width: 20px;
  height: 20px;
}
.social-link:hover,
.social-link:focus-visible {
  color: var(--text);
  transform: translateY(-3px);
}
.social-link:active {
  transform: translateY(0) scale(0.94);
}

/* -------------------------------------------------- SOCIALS RAIL
   app-shell.css makes it a collapsible side column at 1200px+; below
   that, responsive.css splits it into the top links row and the posts
   panel. */
.win--rail {
  position: relative;
  display: flex;
  flex-direction: column;
}

.rail__content {
  min-width: 0;
}

.rail__handle {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.rail__handle-icon {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------- POSTS */
.social-box--feed {
  min-height: 0;
  overflow: visible;
}

.social-feed {
  flex: 1;
  min-height: 240px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px 4px;
}

.tweet-feed-loading,
.tweet-feed-error {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--text-3);
}
.tweet-feed-loading strong,
.tweet-feed-error strong {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-2);
}
.tweet-feed-loading small,
.tweet-feed-error small {
  font-size: 12px;
}

.tweet-feed-loading__led {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(110, 168, 255, 0.15);
  border-top-color: var(--accent);
  animation: spin 900ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tweet-feed-retry {
  margin-top: 4px;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tweet-feed-retry:hover {
  background: rgba(255, 255, 255, 0.11);
}

.social-posts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-post {
  display: block;
  padding: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  animation: fadeIn var(--dur-slow) var(--ease-out) both;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.social-post:nth-child(2) {
  animation-delay: 50ms;
}
.social-post:nth-child(3) {
  animation-delay: 100ms;
}
.social-post:nth-child(n + 4) {
  animation-delay: 150ms;
}
.social-post[href]:hover,
.social-post[href]:focus-visible {
  background: rgba(110, 168, 255, 0.07);
  border-color: rgba(110, 168, 255, 0.28);
  transform: translateY(-1px);
  outline: none;
}

.social-post__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.troll-video {
  padding: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.troll-video__preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-3);
}
.troll-video__preview img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.troll-video__play {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-solid);
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.troll-video:hover .troll-video__play,
.troll-video:focus-visible .troll-video__play {
  transform: scale(1.08);
  color: var(--pink);
}
.troll-video__details {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
}
.troll-video__details strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.troll-video__details span {
  flex-shrink: 0;
  color: var(--text-3);
}
.troll-video__watch {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}

@media (pointer: coarse) {
  .social-box__header-link {
    min-height: 44px;
  }
}
.social-post__handle {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.social-post__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.social-post__text {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.social-post__media {
  display: block;
  width: 100%;
  max-height: 200px;
  margin-bottom: 10px;
  object-fit: cover;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

.social-post__actions {
  display: flex;
  gap: 18px;
  color: var(--text-3);
}
.social-post__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}
.social-post__action-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
}
.social-post__action-icon svg {
  width: 100%;
  height: 100%;
}
.social-post[href]:hover .social-post__action--comments {
  color: var(--cyan);
}
.social-post[href]:hover .social-post__action--likes {
  color: var(--pink);
}

/* Each platform lights up in its own brand color on hover. */
.social-link:has([data-icon="youtube"]) {
  --brand: #ff3b4f;
}
.social-link:has([data-icon="twitch"]) {
  --brand: #a970ff;
}
.social-link:has([data-icon="kick"]) {
  --brand: #53fc18;
}
.social-link:has([data-icon="discord"]) {
  --brand: #7d8bff;
}
.social-link:has([data-icon="instagram"]) {
  --brand: #ff5fa2;
}
.social-link:has([data-icon="x"]) {
  --brand: #ffffff;
}
.social-link:has([data-icon="donate"]) {
  --brand: #3ddc84;
}
.social-link:has([data-icon="shop"]) {
  --brand: var(--accent);
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--brand, var(--text));
  filter: drop-shadow(0 0 7px var(--brand, #fff));
}

/* ---- gallery: the video currently in the player ---- */
.video-card__media {
  position: relative;
  display: block;
}
.video-card.is-playing .video-card__thumb {
  box-shadow: 0 0 0 2px var(--accent), 0 14px 28px -14px rgba(110, 168, 255, 0.8);
}
.video-card.is-playing .video-card__title {
  color: var(--text);
}
.video-card__now {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 8px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-pill);
  animation: fadeIn var(--dur-med) var(--ease-out) both;
}

/* ---- "Back to live" (shown while a picked video plays during a stream) ---- */
.back-live {
  height: 28px;
  padding: 0 12px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  animation: fadeIn var(--dur-med) var(--ease-out) both;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.back-live:hover {
  background: rgba(255, 77, 94, 0.16);
  border-color: rgba(255, 77, 94, 0.5);
}
.back-live:active {
  transform: scale(0.95);
}

/* ---- player volume: slider slides out of the speaker button ---- */
.player-volume {
  display: flex;
  align-items: center;
  border-radius: var(--radius-pill);
}
.player-volume__slider {
  --fill: 0%;
  width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: width var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out),
    margin var(--dur-med) var(--ease-out);
}
.player-volume:hover .player-volume__slider,
.player-volume:focus-within .player-volume__slider {
  width: 88px;
  margin: 0 10px 0 4px;
  opacity: 1;
}
.player-volume__slider:focus {
  outline: none;
}
.player-volume__slider:focus-visible::-webkit-slider-thumb,
.clip-panel__slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.45);
}
.player-volume__slider::-webkit-slider-runnable-track,
.clip-panel__slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent) var(--fill), rgba(255, 255, 255, 0.22) var(--fill));
}
.player-volume__slider::-webkit-slider-thumb,
.clip-panel__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.player-volume__slider:active::-webkit-slider-thumb,
.clip-panel__slider:active::-webkit-slider-thumb {
  transform: scale(1.2);
}
.player-volume__slider::-moz-range-track,
.clip-panel__slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
}
.player-volume__slider::-moz-range-progress,
.clip-panel__slider::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.player-volume__slider::-moz-range-thumb,
.clip-panel__slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.player-volume__slider:focus-visible::-moz-range-thumb,
.clip-panel__slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.45);
}

/* ---- live clip: length picker that opens above the player bar ---- */
.player-clip {
  position: relative;
  display: flex;
}
.player.has-clip-panel .player-controls {
  opacity: 1;
  transform: none;
}
.clip-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  width: 230px;
  padding: 10px 12px 12px 14px;
  background: rgba(6, 8, 16, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  cursor: default;
}
.clip-panel[hidden] {
  display: none;
}
.clip-panel__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.clip-panel__label {
  font-size: 12px;
  color: var(--text-2);
}
.clip-panel__length {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.clip-panel__slider {
  --fill: 0%;
  grid-column: 1 / -1;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.clip-panel__slider:focus {
  outline: none;
}
.clip-panel__slider:disabled {
  opacity: 0.5;
  cursor: default;
}
.clip-panel__status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}
.clip-panel__status.is-error {
  color: var(--coral);
}

/* ---- timeline: YouTube-style seek bar above the control row ---- */
.timeline {
  position: relative;
  height: 16px;
  margin: 0 2px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
.timeline:focus {
  outline: none;
}
.timeline:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}
.timeline__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%);
  transition: height var(--dur-fast) var(--ease-out);
}
.timeline:hover .timeline__track,
.timeline.is-scrubbing .timeline__track {
  height: 5px;
}
.timeline__buffered,
.timeline__played {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
}
.timeline__buffered {
  background: rgba(255, 255, 255, 0.35);
}
.timeline__played {
  background: var(--accent);
}
.timeline__scrubber {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.timeline:hover .timeline__scrubber,
.timeline:focus-visible .timeline__scrubber,
.timeline.is-scrubbing .timeline__scrubber {
  transform: translate(-50%, -50%) scale(1);
}
.timeline__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  background: rgba(8, 6, 16, 0.85);
  border-radius: 6px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.timeline__tooltip.is-visible {
  opacity: 1;
}