/* Warm frosted finish. Static CSS lighting keeps the stream the main focus. */
:root {
  --glass-surface: rgba(27, 29, 30, .87);
  --glass-highlight: rgba(255, 211, 166, .075);
  --glass-outline: rgba(245, 233, 211, .105);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}

.public-page .brand-copy h1 {
  text-shadow: 0 3px 28px rgba(255, 164, 93, .18);
}
.ambient-shade {
  background: radial-gradient(ellipse at 50% 15%, rgba(99, 63, 38, .16), rgba(15, 21, 19, .55) 75%);
}
.ambient-light { opacity: .105; }
.site-nav {
  background: rgba(23, 26, 28, .76);
  border-bottom-color: rgba(255, 191, 132, .16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

#public-history, #my-profile, #request-search, #past-stream-history, #archived-streams, #stream-section,
#selected-request, .request-tables > section, .login-card {
  background-color: var(--panel);
  background-image: linear-gradient(125deg, var(--glass-highlight), transparent 48%);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-outline);
}
#selected-request {
  background-color: #292c29;
  background-image: linear-gradient(120deg, rgba(255, 164, 93, .065), transparent 55%);
}
.past-stream-list article, .public-page .past-stream-list > .stream-details {
  background: rgba(37, 40, 39, .88);
  box-shadow: inset 0 0 0 1px rgba(245, 233, 211, .055);
}
.player-frame, .stream-monitor, #selected-thumbnail-link {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 212, 168, .07);
}
.brand-image { box-shadow: 0 3px 15px rgba(255, 164, 93, .1); }
.request-tables > section:has(.video-link:hover), .request-tables > section:focus-within,
#selected-request:has(.video-link:hover), #selected-request:focus-within {
  position: relative;
  z-index: 3;
}

dialog {
  background: #242827;
  border-color: rgba(245, 216, 181, .2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 225, 194, .07);
}
dialog::backdrop { background: rgba(9, 13, 11, .65); }
input, select, #export-text {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .13);
}
input:focus-visible, select:focus-visible, #export-text:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 164, 93, .07);
}
.timeline-marker { box-shadow: 0 0 10px rgba(255, 164, 93, .23); }
.secondary-button, .nav-link {
  background-image: linear-gradient(180deg, rgba(245, 233, 211, .035), transparent);
  border-color: rgba(245, 233, 211, .13);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #public-history, #my-profile, #request-search, #past-stream-history, #archived-streams, #stream-section,
  #selected-request, .request-tables > section, .login-card {
    background-color: var(--glass-surface);
    -webkit-backdrop-filter: blur(12px) saturate(108%);
    backdrop-filter: blur(12px) saturate(108%);
  }
  #selected-request { background-color: rgba(41, 44, 41, .9); }
  dialog {
    background-color: rgba(36, 40, 39, .94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  dialog::backdrop {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .past-stream-list article, .public-page .past-stream-list > .stream-details, .nav-link, button {
    transition: background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }
  .past-stream-list article:hover, .public-page .past-stream-list > .stream-details:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 183, 119, .22), 0 6px 24px rgba(0, 0, 0, .12);
  }
  .nav-link:hover, .secondary-button:hover {
    border-color: rgba(255, 191, 132, .3);
    box-shadow: 0 0 16px rgba(255, 164, 93, .055);
  }
  :is(.primary-action, #open-request-form, #new-stream, #copy-export, [data-final-state="jugado"], #login-form button[type="submit"]):hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(255, 150, 72, .2);
  }
  .timeline-marker:hover { box-shadow: 0 0 14px rgba(255, 164, 93, .4); }
}

/* Reduce large-area compositing on smaller screens; no shader render loop. */
@media (max-width: 600px) {
  #public-history, #request-search, #past-stream-history, #archived-streams, #stream-section,
  #selected-request, .request-tables > section, .login-card {
    background-color: rgba(27, 29, 30, .94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1px var(--glass-outline), 0 6px 18px rgba(0, 0, 0, .1);
  }
  #selected-request { background-color: rgba(41, 44, 41, .96); }
  dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  #public-history, #request-search, #past-stream-history, #archived-streams, #stream-section,
  #selected-request, .request-tables > section, .login-card, dialog, .site-nav {
    background-color: var(--panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  dialog::backdrop { background: rgba(9, 13, 11, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
}