/* ==========================================================================
   Crazee Eagle Trivia - styles.css
   A local, static stand-in for the Tailwind CDN (cdn.tailwindcss.com).
   Contains a Tailwind-equivalent preflight reset plus every utility class
   actually used across host.html, player.html, and maindisplay.html,
   generated from Tailwind's real default design tokens (colors, spacing,
   type scale, shadows, etc.) so the visual output matches the CDN version.
   ========================================================================== */

/* ---- Preflight (Tailwind's base reset) ---- */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  margin: 0;
  line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

p {
  margin: 0;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* ---- Custom keyframes used by animate-pulse / animate-bounce utilities ---- */
@keyframes eagle-pulse {
  50% { opacity: 0.5; }
}

@keyframes eagle-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* ---- Project-specific custom classes (previously in per-page <style> blocks) ---- */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}

/* ==========================================================================
   Tailwind utility classes actually used in this project
   ========================================================================== */
.align-middle { vertical-align: middle; }
.animate-bounce { animation: eagle-bounce 1s infinite; }
.animate-pulse { animation: eagle-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.bg-amber-500 { background-color: rgb(245 158 11); }
.bg-amber-500\/10 { background-color: rgb(245 158 11 / 0.1); }
.bg-amber-500\/20 { background-color: rgb(245 158 11 / 0.2); }
.bg-amber-950\/10 { background-color: rgb(69 26 3 / 0.1); }
.bg-amber-950\/20 { background-color: rgb(69 26 3 / 0.2); }
.bg-blue-500\/20 { background-color: rgb(59 130 246 / 0.2); }
.bg-blue-600 { background-color: rgb(37 99 235); }
.bg-emerald-500 { background-color: rgb(16 185 129); }
.bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.1); }
.bg-emerald-500\/20 { background-color: rgb(16 185 129 / 0.2); }
.bg-emerald-600 { background-color: rgb(5 150 105); }
.bg-emerald-900 { background-color: rgb(6 78 59); }
.bg-emerald-900\/30 { background-color: rgb(6 78 59 / 0.3); }
.bg-emerald-950\/20 { background-color: rgb(2 44 34 / 0.2); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-purple-500\/10 { background-color: rgb(168 85 247 / 0.1); }
.bg-purple-500\/20 { background-color: rgb(168 85 247 / 0.2); }
.bg-purple-900\/30 { background-color: rgb(88 28 135 / 0.3); }
.bg-rose-500 { background-color: rgb(244 63 94); }
.bg-rose-500\/10 { background-color: rgb(244 63 94 / 0.1); }
.bg-rose-500\/20 { background-color: rgb(244 63 94 / 0.2); }
.bg-rose-600 { background-color: rgb(225 29 72); }
.bg-rose-600\/20 { background-color: rgb(225 29 72 / 0.2); }
.bg-rose-950\/20 { background-color: rgb(76 5 25 / 0.2); }
.bg-slate-600 { background-color: rgb(71 85 105); }
.bg-slate-700 { background-color: rgb(51 65 85); }
.bg-slate-700\/50 { background-color: rgb(51 65 85 / 0.5); }
.bg-slate-800 { background-color: rgb(30 41 59); }
.bg-slate-800\/60 { background-color: rgb(30 41 59 / 0.6); }
.bg-slate-900 { background-color: rgb(15 23 42); }
.bg-slate-900\/60 { background-color: rgb(15 23 42 / 0.6); }
.bg-slate-900\/80 { background-color: rgb(15 23 42 / 0.8); }
.bg-slate-950 { background-color: rgb(2 6 23); }
.bg-slate-950\/90 { background-color: rgb(2 6 23 / 0.9); }
.bg-slate-950\/95 { background-color: rgb(2 6 23 / 0.95); }
.block { display: block; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-amber-400 { border-color: rgb(251 191 36); }
.border-amber-500 { border-color: rgb(245 158 11); }
.border-amber-500\/30 { border-color: rgb(245 158 11 / 0.3); }
.border-amber-500\/50 { border-color: rgb(245 158 11 / 0.5); }
.border-amber-700 { border-color: rgb(180 83 9); }
.border-b { border-bottom-width: 1px; }
.border-blue-500\/50 { border-color: rgb(59 130 246 / 0.5); }
.border-emerald-300 { border-color: rgb(110 231 183); }
.border-emerald-400 { border-color: rgb(52 211 153); }
.border-emerald-500 { border-color: rgb(16 185 129); }
.border-emerald-500\/50 { border-color: rgb(16 185 129 / 0.5); }
.border-l-4 { border-left-width: 4px; }
.border-purple-500 { border-color: rgb(168 85 247); }
.border-purple-500\/20 { border-color: rgb(168 85 247 / 0.2); }
.border-rose-300 { border-color: rgb(253 164 175); }
.border-rose-400 { border-color: rgb(251 113 133); }
.border-rose-500 { border-color: rgb(244 63 94); }
.border-rose-500\/50 { border-color: rgb(244 63 94 / 0.5); }
.border-rose-500\/60 { border-color: rgb(244 63 94 / 0.6); }
.border-rose-900 { border-color: rgb(136 19 55); }
.border-slate-300 { border-color: rgb(203 213 225); }
.border-slate-500 { border-color: rgb(100 116 139); }
.border-slate-600 { border-color: rgb(71 85 105); }
.border-slate-700 { border-color: rgb(51 65 85); }
.border-slate-800 { border-color: rgb(30 41 59); }
.border-slate-800\/80 { border-color: rgb(30 41 59 / 0.8); }
.border-t { border-top-width: 1px; }
.border-t-4 { border-top-width: 4px; }
.break-words { overflow-wrap: break-word; }
.col-span-full { grid-column: 1 / -1; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-pointer { cursor: pointer; }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); }
.drop-shadow-md { filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); }
.fixed { position: fixed; }
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.focus\:border-amber-400:focus { border-color: rgb(251 191 36); }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.font-black { font-weight: 900; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-medium { font-weight: 500; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.from-amber-600 { --tw-gradient-from: rgb(217 119 6); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
.from-emerald-600 { --tw-gradient-from: rgb(5 150 105); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.h-16 { height: 4rem; }
.h-24 { height: 6rem; }
.h-48 { height: 12rem; }
.hidden { display: none; }
.hover\:bg-amber-400:hover { background-color: rgb(251 191 36); }
.hover\:bg-blue-500:hover { background-color: rgb(59 130 246); }
.hover\:bg-emerald-400:hover { background-color: rgb(52 211 153); }
.hover\:bg-emerald-500:hover { background-color: rgb(16 185 129); }
.hover\:bg-rose-500:hover { background-color: rgb(244 63 94); }
.hover\:bg-rose-600:hover { background-color: rgb(225 29 72); }
.hover\:bg-slate-500:hover { background-color: rgb(100 116 139); }
.hover\:bg-slate-600:hover { background-color: rgb(71 85 105); }
.hover\:bg-slate-700:hover { background-color: rgb(51 65 85); }
.hover\:from-amber-500:hover { --tw-gradient-from: rgb(245 158 11); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
.hover\:from-emerald-500:hover { --tw-gradient-from: rgb(16 185 129); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
.hover\:text-white:hover { color: rgb(255 255 255); }
.hover\:to-amber-400:hover { --tw-gradient-to: rgb(251 191 36); }
.hover\:to-emerald-400:hover { --tw-gradient-to: rgb(52 211 153); }
.hover\:underline:hover { text-decoration-line: underline; }
.inline-block { display: inline-block; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.italic { font-style: italic; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.list-disc { list-style-type: disc; }
.max-h-\[80vh\] { max-height: 80vh; }
.max-w-2xl { max-width: 42rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-\[120px\] { max-width: 120px; }
.max-w-md { max-width: 28rem; }
.max-w-sm { max-width: 24rem; }
.max-w-xl { max-width: 36rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:h-20 { height: 5rem; }
}
@media (min-width: 768px) {
  .md\:h-24 { height: 6rem; }
}
@media (min-width: 768px) {
  .md\:h-64 { height: 16rem; }
}
@media (min-width: 768px) {
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 768px) {
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 768px) {
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 768px) {
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
}
@media (min-width: 768px) {
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}
@media (min-width: 768px) {
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}
.min-h-screen { min-height: 100vh; }
.min-w-\[100px\] { min-width: 100px; }
.min-w-\[4ch\] { min-width: 4ch; }
.min-w-\[60px\] { min-width: 60px; }
.min-w-\[70px\] { min-width: 70px; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-4 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pr-16 { padding-right: 4rem; }
.pr-2 { padding-right: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.relative { position: relative; }
.right-4 { right: 1rem; }
.rounded { border-radius: 0.25rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shrink-0 { flex-shrink: 0; }
@media (min-width: 640px) {
  .sm\:block { display: block; }
}
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-\[10px\] { font-size: 10px; }
.text-\[14px\] { font-size: 14px; }
.text-amber-200 { color: rgb(253 230 138); }
.text-amber-300 { color: rgb(252 211 77); }
.text-amber-400 { color: rgb(251 191 36); }
.text-amber-400\/50 { color: rgb(251 191 36 / 0.5); }
.text-amber-500 { color: rgb(245 158 11); }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-blue-300 { color: rgb(147 197 253); }
.text-center { text-align: center; }
.text-emerald-100 { color: rgb(209 250 229); }
.text-emerald-300 { color: rgb(110 231 183); }
.text-emerald-400 { color: rgb(52 211 153); }
.text-left { text-align: left; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-purple-300 { color: rgb(216 180 254); }
.text-purple-400 { color: rgb(192 132 252); }
.text-right { text-align: right; }
.text-rose-300 { color: rgb(253 164 175); }
.text-rose-400 { color: rgb(251 113 133); }
.text-rose-400\/50 { color: rgb(251 113 133 / 0.5); }
.text-rose-500 { color: rgb(244 63 94); }
.text-slate-100 { color: rgb(241 245 249); }
.text-slate-200 { color: rgb(226 232 240); }
.text-slate-300 { color: rgb(203 213 225); }
.text-slate-400 { color: rgb(148 163 184); }
.text-slate-500 { color: rgb(100 116 139); }
.text-slate-900 { color: rgb(15 23 42); }
.text-slate-900\/70 { color: rgb(15 23 42 / 0.7); }
.text-slate-950 { color: rgb(2 6 23); }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-white { color: rgb(255 255 255); }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.to-amber-500 { --tw-gradient-to: rgb(245 158 11); }
.to-emerald-500 { --tw-gradient-to: rgb(16 185 129); }
.top-4 { top: 1rem; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.transform { transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; }
.w-24 { width: 6rem; }
.w-6 { width: 1.5rem; }
.w-64 { width: 16rem; }
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.whitespace-nowrap { white-space: nowrap; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Added for single-row player boxes on maindisplay */
.flex-nowrap { flex-wrap: nowrap; }
.min-w-0 { min-width: 0px; }
.overflow-x-auto { overflow-x: auto; }
.pt-1 { padding-top: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.text-\[8px\] { font-size: 8px; }
.text-\[9px\] { font-size: 9px; }

/* Added for the index.html landing page */
.gap-6 { gap: 1.5rem; }
.h-28 { height: 7rem; }
.hover\:border-amber-400:hover { border-color: rgb(251 191 36); }
.hover\:border-blue-400:hover { border-color: rgb(96 165 250); }
.hover\:border-rose-400:hover { border-color: rgb(251 113 133); }
.max-w-4xl { max-width: 56rem; }
.mb-12 { margin-bottom: 3rem; }
@media (min-width: 768px) {
  .md\:h-48 { height: 12rem; }
}
@media (min-width: 768px) {
  .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
}
@media (min-width: 768px) {
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
}
.mt-12 { margin-top: 3rem; }
.text-blue-400 { color: rgb(96 165 250); }
.text-slate-600 { color: rgb(71 85 105); }

/* Added for the new-question visual flash cue on player.html */
.bg-amber-400 { background-color: rgb(251 191 36); }
.opacity-0 { opacity: 0.0; }
.pointer-events-none { pointer-events: none; }

@keyframes eagle-flash {
  0% { opacity: 0; }
  15% { opacity: 0.85; }
  100% { opacity: 0; }
}
.new-question-flash {
  animation: eagle-flash 0.6s ease-out;
}

/* Added for the host soundboard buttons */
.bg-purple-600 { background-color: rgb(147 51 234); }
.hover\:bg-purple-500:hover { background-color: rgb(168 85 247); }
.bg-rose-800 { background-color: rgb(159 18 57); }
.hover\:bg-rose-700:hover { background-color: rgb(190 18 60); }
.hover\:bg-slate-600:hover { background-color: rgb(71 85 105); }
.hover\:bg-slate-500:hover { background-color: rgb(100 116 139); }
.hover\:bg-emerald-500:hover { background-color: rgb(16 185 129); }
.bg-amber-600 { background-color: rgb(217 119 6); }
.hover\:bg-amber-500:hover { background-color: rgb(245 158 11); }
.hover\:bg-rose-500:hover { background-color: rgb(244 63 94); }

/* Added for the money soundboard button */
.bg-emerald-700 { background-color: rgb(4 120 87); }
.hover\:bg-emerald-600:hover { background-color: rgb(5 150 105); }

/* Added for the persistent QR code box on maindisplay */
.bottom-6 { bottom: 1.5rem; }
.left-6 { left: 1.5rem; }
.bg-white { background-color: rgb(255 255 255); }

/* Added for the host grading answer-preview width */
.max-w-\[140px\] { max-width: 140px; }

/* Added for the multiple-choice options grid */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Added for the relocated QR code in the header */
.gap-0\.5 { gap: 0.125rem; }
.p-1\.5 { padding: 0.375rem; }
.w-16 { width: 4rem; }

/* Added for the Music Bingo pages */
.absolute { position: absolute; }
.aspect-square { aspect-ratio: 1 / 1; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.h-12 { height: 3rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-lg { max-width: 32rem; }
.opacity-80 { opacity: 0.8; }
.p-10 { padding: 2.5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.mb-10 { margin-bottom: 2.5rem; }

/* Added for the admin page */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.max-w-3xl { max-width: 48rem; }

/* Added for admin.html and bingo-host.html */
.hover\:text-slate-500:hover { color: rgb(100 116 139); }
.list-decimal { list-style-type: decimal; }
.max-h-64 { max-height: 16rem; }
.text-slate-700 { color: rgb(51 65 85); }
.no-underline { text-decoration: none; }
.right-0 { right: 0px; }

/* Added for bingo-display.html layout fix */
.min-h-0 { min-height: 0px; }
.content-start { align-content: flex-start; }
.hover\:text-emerald-300:hover { color: rgb(110 231 183); }

/* Display-size zoom control (main display screens) */
#appRoot {
  transform-origin: center center;
  transition: transform 0.15s ease;
}
.scale-toggle {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 80;
  width: 42px; height: 42px;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(15,23,42,0.85);
  color: #fff;
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.scale-panel {
  position: fixed;
  top: 62px; left: 14px;
  z-index: 80;
  background: rgba(15,23,42,0.95);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 12px;
  flex-direction: column;
  gap: 6px;
  width: 240px;
  text-align: left;
}
.scale-panel-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fbbf24;
  font-size: 15px;
  margin-bottom: 2px;
}
.scale-panel-hint {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
  text-align: left;
}
.scale-panel button {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.scale-panel button.active {
  background: #fbbf24;
  color: #0f172a;
}
.scale-hint {
  position: fixed;
  top: 62px; left: 14px;
  z-index: 79;
  max-width: 240px;
  background: rgba(15,23,42,0.95);
  border: 1px solid #fbbf24;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  text-align: left;
  color: #fff;
}

/* Added for the display-scale layout reformatting */
.h-screen { height: 100vh; }
@media (min-width: 768px) {
  .md\:h-16 { height: 4rem; }
}

/* Added for admin.html branding editor */
.min-w-\[220px\] { min-width: 220px; }

/* Added for the maindisplay.html scroll safety net */
.max-h-\[75vh\] { max-height: 75vh; }

/* Added for the compacted waiting/rules/instructions screens */
.h-20 { height: 5rem; }
.pl-8 { padding-left: 2rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
@media (min-width: 768px) {
  .md\:h-28 { height: 7rem; }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Wrapping player grid - guarantees every player is visible on-screen at
   once (wraps to multiple rows as needed) instead of squeezing into one
   scrollable row that an unattended host can't scroll. */
.players-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
  align-content: start;
}
.w-40 { width: 10rem; }

/* File input styling for the admin upload buttons (native ::file-selector-button,
   not compiled Tailwind, so this is written directly rather than as file:* utility classes) */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: 0;
  background: #334155;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
  background: #475569;
}

/* Added for the maindisplay.html QR resize/reposition + refresh button */
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.text-\[7px\] { font-size: 7px; }
.hover\:bg-slate-800:hover { background-color: rgb(30 41 59); }
.hover\:text-amber-400:hover { color: rgb(251 191 36); }

/* Bingo-display-specific overrides for the zoom control cluster - the
   shared .scale-toggle/.scale-panel/.scale-hint positions were placed
   directly under the header logo, which overlapped it on this page.
   Scoped to bingo-display.html only (via these additional classes)
   rather than changing the shared position, since maindisplay.html uses
   the same shared classes with its own layout and wasn't reported as
   having this problem - changing the shared rule risked fixing one page
   by breaking the other. */
.scale-toggle-bingo { top: 120px; left: 14px; }
.scale-panel-bingo { top: 168px; left: 14px; }
.scale-hint-bingo { top: 168px; left: 14px; }

/* Same overlap, same fix, for maindisplay.html (Hosted Trivia's own
   main display) - it uses the same shared .scale-toggle/.scale-panel/
   .scale-hint classes with a header logo in the same top-left spot, so
   the gear button was sitting directly on top of the Crazee Eagle logo
   there too. Scoped the same way, so this doesn't touch bingo-display.html
   or auto-maindisplay.html, which have their own layouts. */
.scale-toggle-trivia { top: 120px; left: 14px; }
.scale-panel-trivia { top: 168px; left: 14px; }
.scale-hint-trivia { top: 168px; left: 14px; }
.w-52 { width: 13rem; }
.text-amber-400\/60 { color: rgb(251 191 36 / 0.6); }

/* ============================================================
   Music Bingo per-theme visual overrides (bingo-display.html)
   ============================================================
   The page's accent color and backgrounds are all built from a small
   set of shared utility classes (.text-amber-400, .bg-amber-500, the
   body/card background colors) rather than CSS variables, so rather
   than rework every element in the page, each theme re-scopes those
   SAME utility classes under a [data-theme="X"] attribute on <body>
   (set by bingo-display.html's JS from the live game state). Higher
   selector specificity means these always win over the plain utility
   classes, regardless of where in the file they're defined. */

/* ---- 60s: warm psychedelic orange/purple ---- */
[data-theme="60s"] body { background: linear-gradient(160deg, #3d1f2e 0%, #2a1830 55%, #1f1420 100%); }
[data-theme="60s"] .text-amber-400 { color: #f4a340; }
[data-theme="60s"] .bg-amber-500 { background-color: #e8743b; }
[data-theme="60s"] .hover\:bg-amber-400:hover { background-color: #f4a340; }
[data-theme="60s"] .border-amber-500 { border-color: #e8743b; }
[data-theme="60s"] .focus\:border-amber-400:focus { border-color: #f4a340; }
[data-theme="60s"] .bg-slate-900 { background-color: #2a1a24; }
[data-theme="60s"] .bg-slate-950 { background-color: #1f1420; }

/* ---- 70s: gold/brown disco ---- */
[data-theme="70s"] body { background: linear-gradient(160deg, #3d2817 0%, #2b1c10 55%, #1a0f0a 100%); }
[data-theme="70s"] .text-amber-400 { color: #d4af37; }
[data-theme="70s"] .bg-amber-500 { background-color: #b8860b; }
[data-theme="70s"] .hover\:bg-amber-400:hover { background-color: #d4af37; }
[data-theme="70s"] .border-amber-500 { border-color: #b8860b; }
[data-theme="70s"] .focus\:border-amber-400:focus { border-color: #d4af37; }
[data-theme="70s"] .bg-slate-900 { background-color: #2b1f14; }
[data-theme="70s"] .bg-slate-950 { background-color: #1a0f0a; }

/* ---- 80s: neon synthwave (keeps amber but adds a neon-glow backdrop) ---- */
[data-theme="80s"] body { background: linear-gradient(160deg, #1a1033 0%, #2b1045 55%, #150a24 100%); }
[data-theme="80s"] .bg-slate-900 { background-color: #1e1440; }
[data-theme="80s"] .bg-slate-950 { background-color: #150a24; }

/* ---- 90s: bold electric teal/magenta ---- */
[data-theme="90s"] body { background: linear-gradient(160deg, #0d3b3d 0%, #1a0d3d 55%, #12081f 100%); }
[data-theme="90s"] .text-amber-400 { color: #00e5c7; }
[data-theme="90s"] .bg-amber-500 { background-color: #ff2fb0; }
[data-theme="90s"] .hover\:bg-amber-400:hover { background-color: #00e5c7; }
[data-theme="90s"] .border-amber-500 { border-color: #ff2fb0; }
[data-theme="90s"] .focus\:border-amber-400:focus { border-color: #00e5c7; }
[data-theme="90s"] .bg-slate-900 { background-color: #0f2b2c; }
[data-theme="90s"] .bg-slate-950 { background-color: #12081f; }

/* ---- 2000s: Y2K metallic chrome/blue ---- */
[data-theme="2000s"] body { background: linear-gradient(160deg, #1c2733 0%, #142230 55%, #0a1420 100%); }
[data-theme="2000s"] .text-amber-400 { color: #4fc3f7; }
[data-theme="2000s"] .bg-amber-500 { background-color: #1e88c7; }
[data-theme="2000s"] .hover\:bg-amber-400:hover { background-color: #4fc3f7; }
[data-theme="2000s"] .border-amber-500 { border-color: #1e88c7; }
[data-theme="2000s"] .focus\:border-amber-400:focus { border-color: #4fc3f7; }
[data-theme="2000s"] .bg-slate-900 { background-color: #16212c; }
[data-theme="2000s"] .bg-slate-950 { background-color: #0a1420; }

/* ---- 2010s: modern flat pastel-on-dark (Instagram-era gradient) ---- */
[data-theme="2010s"] body { background: linear-gradient(160deg, #3d1a5c 0%, #5c1a4a 50%, #5c2e1a 100%); }
[data-theme="2010s"] .text-amber-400 { color: #ff6b9d; }
[data-theme="2010s"] .bg-amber-500 { background-color: #a855f7; }
[data-theme="2010s"] .hover\:bg-amber-400:hover { background-color: #ff6b9d; }
[data-theme="2010s"] .border-amber-500 { border-color: #a855f7; }
[data-theme="2010s"] .focus\:border-amber-400:focus { border-color: #ff6b9d; }
[data-theme="2010s"] .bg-slate-900 { background-color: #341a45; }
[data-theme="2010s"] .bg-slate-950 { background-color: #2a1438; }

/* ============================================================
   Music Bingo per-theme decorative GRAPHICS (bingo-display.html)
   ============================================================
   Beyond the color palette above, each of the 12 newer themes gets
   actual shaped graphics (a guitar, a pumpkin, a disco ball, etc.) -
   two simple, bold SVG icons positioned in the screen's top-right and
   bottom-right corners, behind/beside the real content rather than on
   top of it. All are hidden by default; only the pair matching the
   active [data-theme] on <body> is shown. currentColor lets each icon
   pick up that theme's own accent color automatically, so a color
   change made above stays in sync with the graphics without editing
   both places. Bottom-left is deliberately left alone - that's where
   the zoom control lives (see .scale-toggle-bingo above). */

.theme-deco {
  display: none;
  position: fixed;
  width: 220px;
  height: 220px;
  opacity: 0.38;
  pointer-events: none;
  z-index: 0;
}
/* Positioned flush against the outer viewport edges (never with a
   negative offset that clips part of the graphic off-screen), one per
   side rather than both crammed on the right. The real content is a
   centered, max-width, opaque-backed column (z-index 1 vs these at
   z-index 0), so on a wide TV screen these sit fully visible in the
   open margin on either side, and on a narrower browser window where
   that margin shrinks to nothing, the real content simply covers them
   instead of the graphic clipping or overlapping visible text. */
.theme-deco-tr { top: 100px; right: 0; }
.theme-deco-bl { bottom: 20px; left: 0; }

/* Keep the real content above the decorations, and make sure the
   decorations don't add unwanted scroll/overflow on smaller screens. */
#appRoot { position: relative; z-index: 1; }
#themeDecorations { position: fixed; inset: 0; overflow: hidden; z-index: 0; }

[data-theme="classicrock"] #deco-classicrock-tr,
[data-theme="classicrock"] #deco-classicrock-bl { display: block; color: #e8743b; }

[data-theme="heavymetal"] #deco-heavymetal-tr,
[data-theme="heavymetal"] #deco-heavymetal-bl { display: block; color: #c0c0c0; }

[data-theme="70sdisco"] #deco-70sdisco-tr,
[data-theme="70sdisco"] #deco-70sdisco-bl { display: block; color: #d4af37; }

[data-theme="80spop"] #deco-80spop-tr,
[data-theme="80spop"] #deco-80spop-bl { display: block; color: #ff6ec7; }

[data-theme="90sgrunge"] #deco-90sgrunge-tr,
[data-theme="90sgrunge"] #deco-90sgrunge-bl { display: block; color: #8b7355; }

[data-theme="90scountry"] #deco-90scountry-tr,
[data-theme="90scountry"] #deco-90scountry-bl { display: block; color: #d2a679; }

[data-theme="classiccountry"] #deco-classiccountry-tr,
[data-theme="classiccountry"] #deco-classiccountry-bl { display: block; color: #b5651d; }

[data-theme="halloween"] #deco-halloween-tr,
[data-theme="halloween"] #deco-halloween-bl { display: block; color: #ff7518; }

[data-theme="christmas"] #deco-christmas-tr,
[data-theme="christmas"] #deco-christmas-bl { display: block; color: #c41e3a; }

[data-theme="moviesoundtracks"] #deco-moviesoundtracks-tr,
[data-theme="moviesoundtracks"] #deco-moviesoundtracks-bl { display: block; color: #f5c518; }

[data-theme="tvtunes"] #deco-tvtunes-tr,
[data-theme="tvtunes"] #deco-tvtunes-bl { display: block; color: #6dd5ed; }

[data-theme="disney"] #deco-disney-tr,
[data-theme="disney"] #deco-disney-bl { display: block; color: #4fc3f7; }

/* ============================================================
   Music Bingo per-theme color palettes for the 12 newer themes
   ============================================================
   Same pattern as the decades above (60s/70s/80s/90s/2000s/2010s) -
   re-scoping the shared .text-amber-400/.bg-amber-500/background
   utility classes under each theme's [data-theme] attribute, so
   every themed accent across the page shifts together automatically.
   Each theme's accent color here matches its decorative graphics'
   currentColor above, so the icons and the rest of the page read as
   one cohesive look rather than two separate systems. */

/* ---- Classic Rock: warm amber/orange on dark charcoal ---- */
[data-theme="classicrock"] body { background: linear-gradient(160deg, #2b1a10 0%, #1f140c 55%, #150d08 100%); }
[data-theme="classicrock"] .text-amber-400 { color: #e8743b; }
[data-theme="classicrock"] .bg-amber-500 { background-color: #c25a24; }
[data-theme="classicrock"] .hover\:bg-amber-400:hover { background-color: #e8743b; }
[data-theme="classicrock"] .border-amber-500 { border-color: #c25a24; }
[data-theme="classicrock"] .focus\:border-amber-400:focus { border-color: #e8743b; }
[data-theme="classicrock"] .bg-slate-900 { background-color: #241811; }
[data-theme="classicrock"] .bg-slate-950 { background-color: #150d08; }

/* ---- Heavy Metal: silver/steel on near-black ---- */
[data-theme="heavymetal"] body { background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 55%, #050505 100%); }
[data-theme="heavymetal"] .text-amber-400 { color: #c0c0c0; }
[data-theme="heavymetal"] .bg-amber-500 { background-color: #8a8a8a; }
[data-theme="heavymetal"] .hover\:bg-amber-400:hover { background-color: #c0c0c0; }
[data-theme="heavymetal"] .border-amber-500 { border-color: #8a8a8a; }
[data-theme="heavymetal"] .focus\:border-amber-400:focus { border-color: #c0c0c0; }
[data-theme="heavymetal"] .bg-slate-900 { background-color: #1c1c1c; }
[data-theme="heavymetal"] .bg-slate-950 { background-color: #050505; }

/* ---- 70's Disco: gold on warm brown ---- */
[data-theme="70sdisco"] body { background: linear-gradient(160deg, #3d2f10 0%, #2b210b 55%, #1a1407 100%); }
[data-theme="70sdisco"] .text-amber-400 { color: #d4af37; }
[data-theme="70sdisco"] .bg-amber-500 { background-color: #b8860b; }
[data-theme="70sdisco"] .hover\:bg-amber-400:hover { background-color: #d4af37; }
[data-theme="70sdisco"] .border-amber-500 { border-color: #b8860b; }
[data-theme="70sdisco"] .focus\:border-amber-400:focus { border-color: #d4af37; }
[data-theme="70sdisco"] .bg-slate-900 { background-color: #2b2210; }
[data-theme="70sdisco"] .bg-slate-950 { background-color: #1a1407; }

/* ---- 80's Pop: hot pink/cyan neon on dark purple ---- */
[data-theme="80spop"] body { background: linear-gradient(160deg, #2a0f2e 0%, #1a1040 55%, #100826 100%); }
[data-theme="80spop"] .text-amber-400 { color: #ff6ec7; }
[data-theme="80spop"] .bg-amber-500 { background-color: #d13fa0; }
[data-theme="80spop"] .hover\:bg-amber-400:hover { background-color: #ff6ec7; }
[data-theme="80spop"] .border-amber-500 { border-color: #d13fa0; }
[data-theme="80spop"] .focus\:border-amber-400:focus { border-color: #ff6ec7; }
[data-theme="80spop"] .bg-slate-900 { background-color: #201235; }
[data-theme="80spop"] .bg-slate-950 { background-color: #100826; }

/* ---- 90's Grunge: muted olive/flannel brown, moody ---- */
[data-theme="90sgrunge"] body { background: linear-gradient(160deg, #2a2620 0%, #1c1a15 55%, #12110d 100%); }
[data-theme="90sgrunge"] .text-amber-400 { color: #b08d57; }
[data-theme="90sgrunge"] .bg-amber-500 { background-color: #6b5a3f; }
[data-theme="90sgrunge"] .hover\:bg-amber-400:hover { background-color: #b08d57; }
[data-theme="90sgrunge"] .border-amber-500 { border-color: #6b5a3f; }
[data-theme="90sgrunge"] .focus\:border-amber-400:focus { border-color: #b08d57; }
[data-theme="90sgrunge"] .bg-slate-900 { background-color: #221f1a; }
[data-theme="90sgrunge"] .bg-slate-950 { background-color: #12110d; }

/* ---- 90's Country: warm tan/denim ---- */
[data-theme="90scountry"] body { background: linear-gradient(160deg, #2e2418 0%, #241c12 55%, #170f08 100%); }
[data-theme="90scountry"] .text-amber-400 { color: #d2a679; }
[data-theme="90scountry"] .bg-amber-500 { background-color: #a67c52; }
[data-theme="90scountry"] .hover\:bg-amber-400:hover { background-color: #d2a679; }
[data-theme="90scountry"] .border-amber-500 { border-color: #a67c52; }
[data-theme="90scountry"] .focus\:border-amber-400:focus { border-color: #d2a679; }
[data-theme="90scountry"] .bg-slate-900 { background-color: #281f15; }
[data-theme="90scountry"] .bg-slate-950 { background-color: #170f08; }

/* ---- Classic Country: deep rust/leather brown ---- */
[data-theme="classiccountry"] body { background: linear-gradient(160deg, #2e1a10 0%, #21130a 55%, #140c06 100%); }
[data-theme="classiccountry"] .text-amber-400 { color: #b5651d; }
[data-theme="classiccountry"] .bg-amber-500 { background-color: #8f4e16; }
[data-theme="classiccountry"] .hover\:bg-amber-400:hover { background-color: #b5651d; }
[data-theme="classiccountry"] .border-amber-500 { border-color: #8f4e16; }
[data-theme="classiccountry"] .focus\:border-amber-400:focus { border-color: #b5651d; }
[data-theme="classiccountry"] .bg-slate-900 { background-color: #25170e; }
[data-theme="classiccountry"] .bg-slate-950 { background-color: #140c06; }

/* ---- Halloween: orange/black with a purple undertone ---- */
[data-theme="halloween"] body { background: linear-gradient(160deg, #2b1206 0%, #1f0a2e 55%, #120616 100%); }
[data-theme="halloween"] .text-amber-400 { color: #ff7518; }
[data-theme="halloween"] .bg-amber-500 { background-color: #d9600f; }
[data-theme="halloween"] .hover\:bg-amber-400:hover { background-color: #ff7518; }
[data-theme="halloween"] .border-amber-500 { border-color: #d9600f; }
[data-theme="halloween"] .focus\:border-amber-400:focus { border-color: #ff7518; }
[data-theme="halloween"] .bg-slate-900 { background-color: #241012; }
[data-theme="halloween"] .bg-slate-950 { background-color: #120616; }

/* ---- Christmas: red/green on deep evergreen-black ---- */
[data-theme="christmas"] body { background: linear-gradient(160deg, #1a2e1a 0%, #12211a 55%, #0a1510 100%); }
[data-theme="christmas"] .text-amber-400 { color: #e0525f; }
[data-theme="christmas"] .bg-amber-500 { background-color: #c41e3a; }
[data-theme="christmas"] .hover\:bg-amber-400:hover { background-color: #e0525f; }
[data-theme="christmas"] .border-amber-500 { border-color: #c41e3a; }
[data-theme="christmas"] .focus\:border-amber-400:focus { border-color: #e0525f; }
[data-theme="christmas"] .bg-slate-900 { background-color: #16261c; }
[data-theme="christmas"] .bg-slate-950 { background-color: #0a1510; }

/* ---- Movie Soundtracks: Hollywood gold/black ---- */
[data-theme="moviesoundtracks"] body { background: linear-gradient(160deg, #201c0a 0%, #171407 55%, #0e0c04 100%); }
[data-theme="moviesoundtracks"] .text-amber-400 { color: #f5c518; }
[data-theme="moviesoundtracks"] .bg-amber-500 { background-color: #c9a30f; }
[data-theme="moviesoundtracks"] .hover\:bg-amber-400:hover { background-color: #f5c518; }
[data-theme="moviesoundtracks"] .border-amber-500 { border-color: #c9a30f; }
[data-theme="moviesoundtracks"] .focus\:border-amber-400:focus { border-color: #f5c518; }
[data-theme="moviesoundtracks"] .bg-slate-900 { background-color: #1c1809; }
[data-theme="moviesoundtracks"] .bg-slate-950 { background-color: #0e0c04; }

/* ---- TV Tunes: retro cyan/teal glow ---- */
[data-theme="tvtunes"] body { background: linear-gradient(160deg, #0f2a2e 0%, #0a1e21 55%, #061214 100%); }
[data-theme="tvtunes"] .text-amber-400 { color: #6dd5ed; }
[data-theme="tvtunes"] .bg-amber-500 { background-color: #35a5bd; }
[data-theme="tvtunes"] .hover\:bg-amber-400:hover { background-color: #6dd5ed; }
[data-theme="tvtunes"] .border-amber-500 { border-color: #35a5bd; }
[data-theme="tvtunes"] .focus\:border-amber-400:focus { border-color: #6dd5ed; }
[data-theme="tvtunes"] .bg-slate-900 { background-color: #0e2124; }
[data-theme="tvtunes"] .bg-slate-950 { background-color: #061214; }

/* ---- Disney: magic blue with a soft glow ---- */
[data-theme="disney"] body { background: linear-gradient(160deg, #0f1e3d 0%, #0a1730 55%, #060e1f 100%); }
[data-theme="disney"] .text-amber-400 { color: #4fc3f7; }
[data-theme="disney"] .bg-amber-500 { background-color: #2196c9; }
[data-theme="disney"] .hover\:bg-amber-400:hover { background-color: #4fc3f7; }
[data-theme="disney"] .border-amber-500 { border-color: #2196c9; }
[data-theme="disney"] .focus\:border-amber-400:focus { border-color: #4fc3f7; }
[data-theme="disney"] .bg-slate-900 { background-color: #101d33; }
[data-theme="disney"] .bg-slate-950 { background-color: #060e1f; }

/* ---- Decade theme decorative graphics (60s/70s/80s/90s/2000s/2010s) ----
   These 6 originally only got color palettes, not icon graphics like the
   12 newer themes - added afterward once it became clear "80's Rock"
   (the DEFAULT theme every venue starts on) was showing zero graphics,
   since nothing existed for it yet. Same pattern as the 12 above:
   currentColor keys off each theme's existing accent color, so these
   automatically match the color work already in place further up. */
[data-theme="60s"] #deco-60s-tr,
[data-theme="60s"] #deco-60s-bl { display: block; color: #f4a340; }

[data-theme="70s"] #deco-70s-tr,
[data-theme="70s"] #deco-70s-bl { display: block; color: #d4af37; }

[data-theme="80s"] #deco-80s-tr,
[data-theme="80s"] #deco-80s-bl { display: block; color: #fbbf24; }

[data-theme="90s"] #deco-90s-tr,
[data-theme="90s"] #deco-90s-bl { display: block; color: #00e5c7; }

[data-theme="2000s"] #deco-2000s-tr,
[data-theme="2000s"] #deco-2000s-bl { display: block; color: #4fc3f7; }

[data-theme="2010s"] #deco-2010s-tr,
[data-theme="2010s"] #deco-2010s-bl { display: block; color: #ff6b9d; }
.hover\:text-slate-300:hover { color: rgb(203 213 225); }
.underline { text-decoration-line: underline; }
.w-48 { width: 12rem; }
.gap-y-1 { row-gap: 0.25rem; }
.max-w-xs { max-width: 20rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-2 { row-gap: 0.5rem; }
.mt-5 { margin-top: 1.25rem; }
.border-dashed { border-style: dashed; }
.gap-1\.5 { gap: 0.375rem; }