/* Raga Aur Taal palette, header logo and footer for VDO.Ninja 30.2.
 * The original streaming controls, cards and workflows are retained.
 * Upstream streaming behavior and status/error colors remain intact.
 * SPDX-License-Identifier: AGPL-3.0-only
 */
:root {
  --color-mode: dark;
  --rat-black: #0c0d10;
  --rat-surface: #191a1f;
  --rat-gold: #dbaf67;
  --rat-gold-hover: #edc889;
  --rat-offwhite: #f1eadb;
  --rat-border: #665137;
  --background-color: #0c0d10;
  --dark-background-color: #08090c;
  --container-color: #191a1f;
  --button-color: #30291e;
  --blue-accent: #6e5533;
  --green-accent: #645138;
  --olive-accent: #756344;
  --light-grey: #f1eadb;
  --near-black: #08090c;
  --accent-color: #dbaf67;
  --accent-hover-color: #edc889;
  --muted-icon: #c9baa0;
  --discord-grey-0: #08090c;
  --discord-grey-1: #0c0d10;
  --discord-grey-2: #111217;
  --discord-grey-3: #14151a;
  --discord-grey-4: #191a1f;
  --discord-grey-5: #1c1d22;
  --discord-grey-6: #292720;
  --discord-grey-7: #222329;
  --discord-grey-8: #665137;
  --discord-text: #f1eadb;
  --lighttheme-1: #0c0d10;
  --lighttheme-2: #14151a;
  --lighttheme-3: #191a1f;
  --lighttheme-4: #665137;
  --lighttheme-5: #30291e;
  --lighttheme-6: #8b7451;
  --lighttheme-7: #403727;
  --lighttheme-8: #f1eadb;
  --lighttheme-text: #f1eadb;
  --a-link: #dbaf67;
  --a-visited: #dbaf67;
  --a-hover: #edc889;
  --a-focus: #edc889;
  --a-active: #c99546;
  --a-dark-link: #dbaf67;
  --a-dark-visited: #dbaf67;
  --a-dark-hover: #edc889;
  --a-dark-focus: #edc889;
  --a-dark-active: #c99546;
  --a-darker-link: #e4c28c;
  --a-darker-visited: #e4c28c;
  --a-darker-hover: #f1eadb;
  --a-darker-focus: #f1eadb;
  --a-darker-active: #dbaf67;
  --a-lighter-link: #dbaf67;
  --a-lighter-visited: #dbaf67;
  --a-lighter-hover: #edc889;
  --a-lighter-focus: #edc889;
  --a-lighter-active: #c99546;
}

::selection { background-color: #dbaf6770; color: var(--rat-offwhite); }
#header, .darktheme #header {
  background-color: #0c0d10e6 !important;
  border-bottom-color: #dbaf6738;
  color: var(--rat-offwhite);
}
.column, .column.card, .darktheme .column, .darktheme .column.card {
  background-color: var(--rat-surface) !important;
  border-color: var(--rat-border);
  color: var(--rat-offwhite);
}
.column > h2, .darktheme .column > h2 { color: var(--rat-offwhite); }
/* Keep labels and close controls legible even with ?lightmode or ?darkmode=0. */
#mainmenu .column th, #mainmenu .column td, #mainmenu .column label {
  color: var(--rat-offwhite);
}
.column .inner::before, .column .inner::after { background-color: var(--rat-offwhite); }
.column > .largeDarkIcon, .darktheme .column > .largeDarkIcon { color: var(--rat-gold) !important; }
#dropButton, #jumptoroomButton, .gobutton, .gowebcam, .gowebcam:enabled {
  background-color: var(--rat-gold) !important;
  color: #18130b !important;
  border-color: #c99a52 !important;
}
#dropButton:hover, #jumptoroomButton:hover, .gobutton:hover, .gowebcam:enabled:hover {
  background-color: var(--rat-gold-hover) !important;
}
/* Upstream enabled buttons have a green gradient above the background color. */
.gobutton, .gowebcam, .gowebcam:enabled { background-image: none !important; }
.gowebcam:enabled { animation-name: rat-gold-pulse; }
.gowebcam:disabled {
  background-color: #463a29 !important;
  color: #c2b59f !important;
  border-color: #665137 !important;
  cursor: not-allowed;
}
@keyframes rat-gold-pulse {
  0%, 100% { box-shadow: 0 0 31px #dbaf6726; transform: scale(1); }
  50% { box-shadow: 0 0 17px #0004; transform: scale(.99); }
}
@media (prefers-reduced-motion: reduce) {
  .gowebcam:enabled { animation: none; }
}
#mainmenu input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
#mainmenu select, #mainmenu textarea, #joinroomID {
  background-color: #111217;
  color: var(--rat-offwhite);
  border-color: var(--rat-border);
}
#mainmenu input::placeholder, #joinroomID::placeholder { color: #b9ad98 !important; }
#mainmenu .container-inner input[type="text"],
#mainmenu .container-inner input[type="password"] { max-width: 100%; }
#audioSource, #audioSource3, .darktheme ul#audioSource, .darktheme ul#audioSource3 {
  background-color: #14151a !important;
  color: var(--rat-offwhite);
}
#audioSource label, #audioSource3 label { color: var(--rat-offwhite); }
#audioSource input:checked + label, #audioSource3 input:checked + label,
.darktheme #audioSource input:checked + label, .darktheme #audioSource3 input:checked + label {
  background-color: #6e5533;
  color: var(--rat-offwhite);
}
.modal-content, .alertModalInner, .darktheme .modal-content, .darktheme .alertModalInner {
  background-color: #f1eadbf5 !important;
  color: #18130b;
  border-color: #dbaf6770 !important;
}
.chatBarInputButton { color: #18130b !important; border-color: #c99a52 !important; }
#copythisurl, .darktheme #copythisurl { color: #c9baa0 !important; }
input[type="range"]::-webkit-slider-thumb { border-color: #b48b4e; }
input[type="range"]::-moz-range-thumb { border-color: #b48b4e; }

/* Generated invites use inline pastel backgrounds in the upstream client. */
#gencontent2 > h2 { color: var(--rat-offwhite) !important; }
#gencontent2 #qrcode h2 { color: #18130b !important; }
#gencontent2 a.task {
  color: var(--rat-offwhite) !important;
  background-color: #30291e !important;
  border-color: var(--rat-gold) !important;
  max-width: 100%;
}
@media (max-width: 480px) {
  #gencontent2 #qrcode { max-width: 100% !important; padding: 20px !important; }
  #gencontent2 #qrcode img, #gencontent2 #qrcode canvas { max-width: 100%; height: auto !important; }
}
@media (max-width: 360px) {
  #mainmenu > .column.card:not(.skip-animation):not(.in-animation) {
    min-width: 0;
    width: calc(100% - 12px);
  }
  #mainmenu > .column.skip-animation > h2 { padding-right: 50px; }
}

/* Brand chrome. Kept inside upstream containers so clean/view modes hide it. */
#logoname, #info, #helpbutton { display: none !important; }
#raga-brand {
  display: inline-flex;
  vertical-align: middle;
  margin: 8px 18px 8px 16px;
}
#raga-brand img { display: block; width: 210px; height: 60px; object-fit: contain; }
#head1 { vertical-align: middle; }
#mainmenu.row {
  position: relative;
  height: auto;
  min-height: calc(100dvh - 99px);
  padding-bottom: 0;
}
#credits.rat-footer {
  position: relative;
  inset: auto;
  width: calc(100% + 20px);
  margin: 50px 0 0 -10px;
  padding: 30px 5.5% 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  border-top: 1px solid #dbaf6720;
  background-color: #080c12;
  color: #bcb09b;
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
}
.rat-footer p { margin: 0; padding: 0; }
.rat-footer nav { margin-top: 7px; }
#credits.rat-footer nav a, #credits.rat-footer nav a:visited {
  color: #dbaf67;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#credits.rat-footer .rat-footer-right a, #credits.rat-footer .rat-footer-right a:visited {
  color: #bcb09b;
  text-decoration: none;
}
#credits.rat-footer a:hover { color: #f1eadb; }
#credits.rat-footer a:focus-visible { outline: 2px solid #dbaf67; outline-offset: 4px; }
@media (max-width: 700px) {
  #raga-brand { margin-left: 10px; margin-right: 12px; }
  #raga-brand img { width: 189px; height: 54px; }
  #credits.rat-footer { flex-direction: column; gap: 18px; padding: 25px 22px; font-size: 12px; }
  .rat-footer-right { overflow-wrap: anywhere; }
}

/* Original SVG icons, with only their black stroke recolored gold. */
#container-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='342.728' height='325.878' viewBox='0 0 90.68 86.222' fill='none' stroke='%23dbaf67' stroke-width='5.6' stroke-linejoin='round' stroke-dashoffset='22.7149601' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M3.15 3.15h37.378v35.24H3.15zm47.002 0H87.53v35.24H50.152zM3.15 47.832h37.378v35.24H3.15zm47.002 0H87.53v35.24H50.152z'/%3E%3C/svg%3E"); }
#container-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='347.569' height='278.797' viewBox='0 0 91.961 73.765' fill='none' stroke='%23dbaf67' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M3.02 3.02h85.921v54.399H3.02z' stroke-width='6.04' stroke-linejoin='round' stroke-dashoffset='22.7149601'/%3E%3Cg stroke-width='6.3'%3E%3Cpath d='M35.607 70.527l21.839.071' stroke-linecap='round' paint-order='markers fill stroke'/%3E%3Cpath d='M46.404 73.517l.142-15.596' paint-order='markers fill stroke'/%3E%3C/g%3E%3C/svg%3E"); }
#container-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='347.184' height='187.007' viewBox='0 0 91.859 49.479' fill='none' stroke='%23dbaf67' stroke-width='5' stroke-linejoin='round' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M3.15 3.15h65.569v43.179H3.15z' stroke-dashoffset='22.7149601' paint-order='markers fill stroke'/%3E%3Cpath d='M68.919 28.837L88.709 44.73V7.148L69.019 22.341z'/%3E%3C/svg%3E"); }
#container-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='303.594' height='274.946' viewBox='0 0 80.326 72.746' fill='none' stroke='%23dbaf67' stroke-width='4.6' stroke-linejoin='round' stroke-dashoffset='6.01000023' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M2 51.27L78.326 2l-8.03 63.359-37.093-12.414z'/%3E%3Cpath d='M33.047 70.746l.157-17.802L78.326 2 33.203 52.944l10.314 3.39z'/%3E%3C/svg%3E"); }