/* STREAM App — Cozy Pixel theme (v5) */
@import url('/app/cozy-pixel.css');

:root {
  --stream-card-radius: 0;
  --stream-ease: steps(4, end);
}

html {
  background: var(--cp-bg);
}

body {
  background: var(--cp-bg) !important;
  color: var(--cp-text) !important;
}

/* Browser download button */
header .stream-download-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 6px 12px;
  font-family: var(--cp-font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--cp-text) !important;
  background: linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(232, 212, 176, 0.92));
  border: 2px solid var(--cp-border);
  box-shadow: 2px 2px 0 var(--cp-shadow);
  white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

header .stream-download-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--cp-shadow);
  color: var(--cp-text) !important;
}

/* Override dark Tailwind bg on games/media pages */
.bg-stream-bg,
[class*="bg-stream"] {
  background: var(--cp-bg) !important;
}

.text-white {
  color: var(--cp-text) !important;
}

/* Topbar logo */
header .stream-logo-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

header .stream-logo-icon {
  display: inline-flex;
  filter: drop-shadow(2px 2px 0 var(--cp-shadow));
}

header .stream-logo-text {
  font-family: var(--cp-font-pixel);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--cp-text);
  text-shadow: 2px 2px 0 var(--cp-accent-soft);
}

/* Search in topbar */
header .stream-search-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 0 12px !important;
}

header .stream-search-topbar {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

header .stream-search-topbar::before {
  content: '\f002';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-orange);
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
}

header .stream-search-input,
header input[type="search"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 36px !important;
  border-radius: 0 !important;
  border: 2px solid var(--cp-border) !important;
  background: #fff !important;
  color: var(--cp-text) !important;
  padding: 0 12px 0 2.25rem !important;
  font-size: 13px !important;
  font-family: var(--cp-font-body) !important;
  box-shadow: inset 2px 2px 0 rgba(107,68,35,0.08) !important;
  transition: border-color 0.15s !important;
}

header .stream-search-input:focus,
header input[type="search"]:focus {
  border-color: var(--cp-orange) !important;
  box-shadow: inset 2px 2px 0 rgba(107,68,35,0.08), 0 0 0 2px var(--cp-orange-soft) !important;
  outline: none !important;
}

/* Card entrance */
.grid > .stream-card-ready {
  animation: stream-card-in 0.35s var(--stream-ease) both;
}

@keyframes stream-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.grid > .stream-card-ready {
  transition: transform 0.1s, box-shadow 0.1s !important;
  border-radius: 0 !important;
  border: 2px solid var(--cp-border) !important;
  box-shadow: var(--cp-pixel-shadow-sm) !important;
}

.grid > .stream-card-ready:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--cp-shadow) !important;
}

/* Play buttons */
.btn-play-cloud {
  border-radius: 0 !important;
  font-weight: 800 !important;
  font-family: var(--cp-font-body) !important;
  background: var(--cp-green) !important;
  border: 2px solid var(--cp-border) !important;
  box-shadow: var(--cp-pixel-shadow-sm) !important;
  transition: transform 0.08s !important;
}

.btn-play-cloud::before {
  content: '\f04b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-right: 8px;
  font-size: 0.85em;
}

#catalog .btn-play-cloud::before {
  content: '\f04b';
}

.btn-play-cloud:hover:not(:disabled) {
  transform: translate(-1px, -1px) !important;
  filter: brightness(1.05);
}

.stream-dup-admin-hidden {
  display: none !important;
}

.stream-save-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--cp-blue);
  border: 2px solid var(--cp-border);
  color: var(--cp-text-light);
}

.stream-save-badge i {
  font-size: 9px;
}

.stream-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cp-font-pixel);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 1rem;
  color: var(--cp-text);
  line-height: 1.6;
}

.stream-section-title i {
  color: var(--cp-accent);
}

/* Nav tabs */
header .stream-nav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

header .stream-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 0;
  border: 2px solid var(--cp-border);
  background: var(--cp-bg-alt);
  color: var(--cp-text-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--cp-pixel-shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s;
  line-height: 1.2;
}

header .stream-nav-tab:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--cp-shadow);
  color: var(--cp-text);
  background: var(--cp-accent-soft);
}

header .stream-nav-tab.active {
  color: var(--cp-text-on-dark) !important;
  background: var(--cp-active-bg) !important;
  border-color: var(--cp-active-border) !important;
}

header .stream-nav-tab i {
  font-size: 10px;
  color: inherit;
}

/* Glass panel override */
.glass-panel {
  background: var(--cp-bg-panel) !important;
  backdrop-filter: none !important;
  border-color: var(--cp-border) !important;
}

.bg-aurora-mesh {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139,105,20,0.04) 3px, rgba(139,105,20,0.04) 6px),
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(196,165,116,0.15), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(107,142,78,0.1), transparent 55%) !important;
}

/* Games SPA — override compiled Tailwind dark theme */
#root,
#root > div,
main {
  background: var(--cp-bg) !important;
  color: var(--cp-text) !important;
}

header.glass-panel,
header[class*="glass-panel"] {
  background: var(--cp-bg-panel) !important;
  border-bottom: 2px solid var(--cp-border) !important;
  box-shadow: none !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.neon-border-cyan,
[class*="neon-border"] {
  border-radius: 0 !important;
  border: 2px solid var(--cp-border) !important;
  box-shadow: var(--cp-pixel-shadow-sm) !important;
  background: var(--cp-bg-panel) !important;
}

.grid > *:not(.stream-card-ready) {
  border-radius: 0 !important;
  border: 2px solid var(--cp-border) !important;
  box-shadow: var(--cp-pixel-shadow-sm) !important;
  background: var(--cp-bg-panel) !important;
}

.grid > *:not(.stream-card-ready):hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--cp-shadow) !important;
}

header button,
header a:not(.stream-nav-tab) {
  border-radius: 0 !important;
}

[class*="text-cyan"],
[class*="text-sky"],
.text-cyan-400 {
  color: var(--cp-accent) !important;
}

[class*="bg-slate"],
[class*="bg-gray-9"],
[class*="from-slate"],
[class*="from-gray"] {
  background-color: var(--cp-bg-panel) !important;
}

.border-white\/10,
[class*="border-white"] {
  border-color: var(--cp-border-light) !important;
}

/* ── Readability: kill invisible white/faded text on cream ── */
.text-white,
[class*="text-white"],
.text-slate-100, .text-slate-200, .text-slate-300,
.text-gray-100, .text-gray-200, .text-gray-300,
[class*="text-white/"],
[class*="text-slate-1"], [class*="text-slate-2"], [class*="text-slate-3"],
[class*="text-slate-4"], [class*="text-slate-5"],
[class*="text-gray-1"], [class*="text-gray-2"], [class*="text-gray-3"],
[class*="text-gray-4"], [class*="text-gray-5"],
.text-zinc-100, .text-zinc-200, .text-zinc-300, .text-zinc-400,
.text-neutral-100, .text-neutral-200, .text-neutral-300 {
  color: var(--cp-text) !important;
}

[class*="text-white/"][class*="opacity"],
[class*="text-slate-"][class*="opacity"],
.opacity-40, .opacity-50, .opacity-60 {
  opacity: 1 !important;
  color: var(--cp-text-muted) !important;
}

.text-cyan-400, .text-sky-400, .text-blue-400,
[class*="text-cyan"], [class*="text-sky-400"] {
  color: var(--cp-active-bg) !important;
}

header button,
header a:not(.stream-nav-tab) {
  color: var(--cp-text) !important;
}

header .text-white,
header [class*="text-white"] {
  color: var(--cp-text) !important;
}

/* Card inner text */
.grid .text-sm, .grid .text-xs,
.grid [class*="font-semibold"], .grid [class*="font-bold"] {
  color: var(--cp-text) !important;
}

.grid [class*="text-white/"], .grid [class*="opacity-"] {
  color: var(--cp-text-muted) !important;
  opacity: 1 !important;
}

/* Active tab — dark bg, light text */
header .stream-nav-tab.active {
  color: var(--cp-text-on-dark) !important;
  background: var(--cp-active-bg) !important;
  border-color: var(--cp-active-border) !important;
}

header .stream-nav-tab {
  color: var(--cp-text-muted) !important;
}

header .stream-search-input::placeholder,
header input[type="search"]::placeholder {
  color: var(--cp-text-subtle) !important;
  opacity: 1 !important;
}

/* Neon borders → wood frame */
.neon-border-cyan,
[class*="neon-border"] {
  color: var(--cp-text) !important;
}

/* Modal / overlay text in games */
[role="dialog"], [class*="modal"], [class*="Modal"] {
  color: var(--cp-text) !important;
  background: var(--cp-bg-panel) !important;
}

/* ── Games library: PC jewel case cards ── */
.stream-games-page .grid > .stream-jewel-card {
  position: relative;
  overflow: visible !important;
  padding: 0 0 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.12s ease, filter 0.12s ease !important;
}

.stream-games-page .grid > .stream-jewel-card::before,
.stream-games-page .grid > .stream-jewel-card::after {
  content: none !important;
}

.stream-games-page .grid > .stream-jewel-card:hover,
.stream-games-page .grid > .stream-jewel-card.stream-card-ready:hover {
  transform: translate(-2px, -3px) !important;
  box-shadow: none !important;
  filter: none;
}

.cozy-pixel .stream-games-page .grid > .stream-jewel-card:hover {
  box-shadow: none !important;
}

/* Plastic jewel case shell — classic ~140×125 mm ratio */
.stream-games-page .stream-jewel-case-top {
  --jewel-spine: 11%;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 140 / 125;
  overflow: hidden;
  border: 2px solid #8b6914;
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 238, 0.55),
    inset 0 -3px 8px rgba(61, 41, 20, 0.18),
    inset 2px 0 6px rgba(255, 248, 238, 0.25),
    3px 4px 0 var(--cp-shadow),
    0 8px 18px rgba(61, 41, 20, 0.14);
  background:
    linear-gradient(165deg,
      rgba(255, 252, 245, 0.92) 0%,
      rgba(232, 212, 176, 0.45) 38%,
      rgba(196, 165, 116, 0.35) 100%);
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

/* Left spine strip */
.stream-games-page .stream-jewel-case-top::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--jewel-spine);
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #3d2914 0%,
      #5c4033 12%,
      #8b6914 28%,
      #a88858 52%,
      rgba(212, 184, 150, 0.85) 78%,
      rgba(255, 248, 238, 0.2) 100%);
  border-right: 1px solid rgba(61, 41, 20, 0.45);
  box-shadow:
    inset -2px 0 4px rgba(0, 0, 0, 0.15),
    1px 0 0 rgba(255, 248, 238, 0.35);
}

/* Plastic front gloss + edge highlight */
.stream-games-page .stream-jewel-case-top::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.08) 22%,
      transparent 42%),
    linear-gradient(200deg,
      transparent 55%,
      rgba(255, 248, 238, 0.12) 72%,
      rgba(152, 184, 216, 0.08) 88%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(255, 248, 238, 0.18) 0%,
      transparent 8%,
      transparent 92%,
      rgba(61, 41, 20, 0.06) 100%);
  mix-blend-mode: soft-light;
}

.stream-games-page .stream-jewel-card:hover .stream-jewel-case-top {
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 238, 0.7),
    inset 0 -3px 8px rgba(61, 41, 20, 0.12),
    inset 2px 0 6px rgba(255, 248, 238, 0.35),
    5px 6px 0 var(--cp-shadow),
    0 12px 24px rgba(61, 41, 20, 0.2);
}

/* Cover insert — full rectangular front face behind plastic */
.stream-games-page .stream-jewel-poster {
  position: absolute !important;
  z-index: 2;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--jewel-spine) !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  flex: none !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(61, 41, 20, 0.2) !important;
  background: #2a1f14 !important;
  transition: filter 0.15s ease;
}

.stream-games-page .stream-jewel-poster img,
.stream-games-page .stream-jewel-poster .media-poster-img,
.stream-games-page .stream-jewel-poster > img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Subtle disc hub visible through case center */
.stream-games-page .stream-jewel-poster::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 54%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(26, 18, 8, 0.55) 0%,
      rgba(26, 18, 8, 0.25) 28%,
      rgba(255, 248, 238, 0.08) 42%,
      transparent 58%);
  box-shadow:
    0 0 0 1px rgba(255, 248, 238, 0.15),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
  mix-blend-mode: multiply;
}

/* PC DVD-ROM corner badge */
.stream-games-page .stream-jewel-poster::after {
  content: 'PC';
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 4;
  pointer-events: none;
  padding: 2px 5px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: rgba(255, 248, 238, 0.95);
  background: linear-gradient(180deg, rgba(61, 41, 20, 0.82), rgba(45, 30, 15, 0.92));
  border: 1px solid rgba(255, 248, 238, 0.35);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  opacity: 0.88;
}

.stream-games-page .stream-jewel-card:hover .stream-jewel-poster {
  transform: none;
  filter: brightness(1.04);
}

/* Cloud sticker — top-right on case */
.stream-games-page .stream-jewel-poster .stream-save-badge {
  z-index: 8;
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
  transform: rotate(2deg);
  border-radius: 0 !important;
  font-size: 8px !important;
  padding: 2px 6px !important;
  box-shadow: 2px 2px 0 rgba(61, 41, 20, 0.35);
}

/* SPA gradient + bottom action bar — hidden until hover */
.stream-games-page .stream-jewel-poster > [class*='bg-gradient-to-t'] {
  opacity: 0 !important;
  transition: opacity 0.15s ease;
}

.stream-games-page .stream-jewel-card:hover .stream-jewel-poster > [class*='bg-gradient-to-t'] {
  opacity: 0.72 !important;
}

.stream-games-page .stream-jewel-poster > [class*='bottom-0'][class*='flex-col'] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 9;
  padding: 6px 8px 8px !important;
  gap: 4px !important;
}

.stream-games-page .stream-jewel-card:hover .stream-jewel-poster > [class*='bottom-0'][class*='flex-col'] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Play action — compact bar at case bottom on hover */
.stream-games-page .stream-jewel-poster .btn-play-cloud {
  position: relative !important;
  z-index: 9;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  padding: 5px 8px !important;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--cp-shadow) !important;
}

.stream-games-page .stream-jewel-poster .btn-play-cloud::before {
  margin-right: 5px;
  font-size: 0.75em;
}

.stream-games-page .stream-jewel-poster [class*='border-stream-cyan'] {
  border-radius: 0 !important;
  font-size: 8px !important;
  padding: 4px 6px !important;
}

/* Title strip below case */
.stream-games-page .stream-jewel-card > .glass-panel,
.stream-games-page .stream-jewel-card > [class*='glass-panel'] {
  position: relative;
  z-index: 3;
  margin-top: 6px !important;
  margin-left: 0;
  padding: 4px 6px 5px !important;
  border: 2px solid var(--cp-border-light) !important;
  border-top: 2px solid var(--cp-border) !important;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.96), rgba(232, 212, 176, 0.88)) !important;
  box-shadow: 2px 2px 0 var(--cp-shadow-sm, var(--cp-shadow)) !important;
}

@media (max-width: 640px) {
  .stream-games-page .stream-jewel-case-top {
    --jewel-spine: 10%;
  }

  .stream-games-page .stream-jewel-poster .btn-play-cloud {
    font-size: 8px !important;
    padding: 4px 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stream-games-page .stream-jewel-card:hover .stream-jewel-poster {
    filter: none;
  }

  .stream-games-page .stream-jewel-poster .btn-play-cloud {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .grid > .stream-card-ready {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  header .stream-search-topbar {
    max-width: 180px;
  }
  header .stream-logo-text {
    display: none;
  }
}

/* Music app — search inherits topbar styles via header.music-topbar */
.music-topbar .stream-search-topbar {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.music-topbar .stream-search-topbar::before {
  content: '\f002';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-orange);
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
}

.music-topbar .stream-search-input,
.music-topbar input[type="search"] {
  width: 100% !important;
  height: 34px !important;
  border-radius: 0 !important;
  border: 2px solid var(--cp-border) !important;
  background: #fff !important;
  color: var(--cp-text) !important;
  padding: 0 12px 0 2.25rem !important;
  font-size: 13px !important;
  font-family: var(--cp-font-body) !important;
  font-weight: 600 !important;
  box-shadow: inset 2px 2px 0 rgba(107,68,35,0.08), 0 2px 8px rgba(61,41,20,0.06) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.music-topbar .stream-search-input:focus,
.music-topbar input[type="search"]:focus {
  border-color: var(--cp-orange) !important;
  box-shadow: inset 2px 2px 0 rgba(107,68,35,0.08), 0 0 0 2px var(--cp-orange-soft) !important;
  outline: none !important;
}

.music-topbar .stream-search-input::placeholder,
.music-topbar input[type="search"]::placeholder {
  color: var(--cp-text-subtle) !important;
  opacity: 1 !important;
}

/* Fixed download banner (fallback) */
.stream-dl-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--cp-font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--cp-text) !important;
  background: linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(232, 212, 176, 0.95));
  border: 2px solid var(--cp-border);
  box-shadow: 3px 3px 0 var(--cp-shadow);
}

.stream-dl-banner:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cp-shadow);
}