@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Oswald:wght@400;500;700&family=Russo+One&family=Share+Tech+Mono&display=swap');

:root {
  --night: #06010f;
  --black: #020006;
  --panel: rgba(8,5,15,0.90);
  --panel2: rgba(21,11,48,0.84);
  --deep-violet: #1c0a52;
  --grid-violet: #59197a;
  --brand-magenta: #ff3aa2;
  --hot-pink: #e81b78;
  --sun-orange: #ff6a3d;
  --glow-orchid: #ff6fcf;
  --radar-green: #4cff88;
  --gold: #d9b45b;
  --off-white: #f5f0ff;
  --muted: rgba(245,240,255,0.62);
  --danger: #ff3158;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--off-white);
  font-family: 'Oswald', sans-serif;
}

.obs-page html,
.obs-page body {
  width: 100%;
  height: 100%;
  min-width: 1920px;
  min-height: 1080px;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1100px 620px at 50% 44%, rgba(255,45,143,0.18), transparent 68%),
    radial-gradient(ellipse 900px 500px at 76% 50%, rgba(76,255,136,0.08), transparent 70%),
    linear-gradient(180deg, #080016 0%, #06010f 55%, #020008 100%);
}

.transparent-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
}

.bg-hero,
.bg-hero-close {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.06) saturate(1.06);
}
.bg-hero {
  background-image:
    linear-gradient(90deg, rgba(6,1,15,0.55), rgba(6,1,15,0.20), rgba(6,1,15,0.78)),
    url('/assets/retroboys_hero_wide.png');
  opacity: 0.58;
}
.bg-hero-close {
  background-image:
    linear-gradient(90deg, rgba(6,1,15,0.68), rgba(6,1,15,0.30), rgba(6,1,15,0.75)),
    url('/assets/retroboys_hero_close.jpg');
  opacity: 0.42;
}

.stars {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 60% 5%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 75% 18%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 15% 28%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.6), transparent);
}

.grid-floor {
  position: absolute;
  left: 50%;
  bottom: -110px;
  width: 3000px;
  height: 920px;
  transform: translateX(-50%) perspective(560px) rotateX(67deg);
  background-image:
    repeating-linear-gradient(to right, rgba(255,45,143,0.34) 0px, rgba(255,45,143,0.34) 2px, transparent 2px, transparent 92px),
    repeating-linear-gradient(to bottom, rgba(89,25,122,0.52) 0px, rgba(89,25,122,0.52) 2px, transparent 2px, transparent 92px);
  filter: drop-shadow(0 0 12px rgba(255,45,143,0.45));
  opacity: 0.68;
}

.sun {
  position: absolute;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brand-magenta) 0%, var(--hot-pink) 58%, var(--sun-orange) 100%);
  box-shadow: 0 0 150px rgba(250,6,104,0.42);
  opacity: 0.38;
  overflow: hidden;
}
.sun::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 24px, rgba(6,1,15,0.92) 24px 42px);
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 5px);
  mix-blend-mode: overlay;
  opacity: 0.52;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.48) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.25), transparent 20%, transparent 80%, rgba(0,0,0,0.3));
}

.corner-frame {
  position: absolute;
  inset: 34px;
  pointer-events: none;
  z-index: 70;
}
.corner-frame::before,
.corner-frame::after {
  content: '';
  position: absolute;
  width: 230px;
  height: 120px;
  border-color: rgba(255,45,143,0.78);
  filter: drop-shadow(0 0 10px rgba(255,45,143,0.5));
}
.corner-frame::before {
  left: 0; top: 0;
  border-top: 3px solid;
  border-left: 3px solid;
}
.corner-frame::after {
  right: 0; bottom: 0;
  border-right: 3px solid;
  border-bottom: 3px solid;
}

.brand-title {
  font-family: 'Permanent Marker', cursive;
  text-transform: uppercase;
  color: #ff4aae;
  background: linear-gradient(180deg, #ff89d8 0%, #ff49ad 36%, #df116f 72%, #9b0c4f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px rgba(255, 122, 209, 0.24);
  filter: drop-shadow(0 0 5px rgba(255, 45, 143, 0.55))
          drop-shadow(0 0 16px rgba(255, 45, 143, 0.48))
          drop-shadow(0 5px 2px rgba(45, 0, 35, 0.72))
          drop-shadow(0 10px 12px rgba(0, 0, 0, 0.88));
  text-shadow: none;
}

.sub-label {
  text-transform: uppercase;
  letter-spacing: 6px;
  color: var(--hot-pink);
  font-weight: 500;
}

.tactical-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--radar-green);
  text-shadow: 0 0 10px rgba(76,255,136,0.7);
}

.panel,
.retro-panel {
  background: linear-gradient(135deg, rgba(8,5,15,0.92), rgba(28,10,82,0.72));
  border: 2px solid rgba(255,45,143,0.72);
  box-shadow: 0 0 32px rgba(255,45,143,0.27), inset 0 0 28px rgba(76,255,136,0.035);
  border-radius: 22px;
}

.pixel-logo,
.small-logo {
  image-rendering: pixelated;
  object-fit: contain;
}
.pixel-logo { width: 70px; height: 70px; }
.small-logo { width: 52px; height: 52px; }

.radar {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(76,255,136,0.85);
  background:
    radial-gradient(circle at center, rgba(76,255,136,0.18) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at center, rgba(76,255,136,0.16) 0 2px, transparent 2px 52px),
    linear-gradient(90deg, rgba(76,255,136,0.16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(76,255,136,0.16) 1px, transparent 1px),
    rgba(0,18,10,0.45);
  box-shadow: 0 0 28px rgba(76,255,136,0.4), inset 0 0 50px rgba(76,255,136,0.11);
  overflow: hidden;
}
.radar::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  border-radius: 50%;
  background:
    conic-gradient(
      from -28deg at 50% 50%,
      rgba(76,255,136,0.58) 0deg,
      rgba(76,255,136,0.26) 16deg,
      rgba(76,255,136,0.08) 34deg,
      transparent 48deg,
      transparent 360deg
    );
  animation: radarSweep 3.2s linear infinite;
}
.radar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--hot-pink);
  box-shadow: 0 0 14px var(--hot-pink);
}
.radar .blip {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--radar-green);
  box-shadow: 0 0 16px var(--radar-green);
  animation: blip 1.7s ease-in-out infinite;
}
.radar .b1 { left: 62%; top: 28%; animation-delay: 0.2s; }
.radar .b2 { left: 35%; top: 62%; animation-delay: 0.8s; }
.radar .b3 { left: 70%; top: 65%; animation-delay: 1.2s; }
@keyframes radarSweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%,100%{opacity:.28; transform:scale(.75)} 50%{opacity:1; transform:scale(1.3)} }

.live-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--hot-pink);
  box-shadow: 0 0 12px var(--hot-pink);
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.btn {
  background: rgba(58,0,77,0.45);
  border: 2px solid rgba(255,45,143,0.35);
  color: var(--off-white);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.15s;
}
.btn:hover {
  border-color: var(--glow-orchid);
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(255,45,143,0.24);
}
.btn.active {
  border-color: var(--brand-magenta);
  background: rgba(255,45,143,0.22);
}
.btn.green {
  border-color: rgba(76,255,136,0.55);
  color: var(--radar-green);
}
.btn.red {
  border-color: rgba(250,6,104,0.75);
  color: #ff9cc3;
}

/* OBS dynamic player cards */
.player-card-large {
  width: 500px;
  min-height: 500px;
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.player-card-large.right { border-color: rgba(250,6,104,0.8); }
.avatar-large {
  width: 190px; height: 190px;
  border-radius: 50%;
  border: 4px solid var(--brand-magenta);
  box-shadow: 0 0 34px rgba(255,45,143,0.55);
  overflow: hidden;
  background: radial-gradient(circle, rgba(255,45,143,0.35), rgba(8,5,15,0.9));
}
.player-card-large.right .avatar-large {
  border-color: var(--hot-pink);
  box-shadow: 0 0 34px rgba(250,6,104,0.55);
}
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.player-name {
  max-width: 440px;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
}
.player-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.stat-chip {
  padding: 8px 14px;
  border: 1px solid rgba(255,45,143,0.55);
  background: rgba(0,0,0,0.38);
  border-radius: 10px;
  color: var(--off-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.stat-chip strong { color: var(--radar-green); }

/* v3.13 double sun fix
   Das Hero-Hintergrundbild enthält bereits die Retro-Sonne.
   Auf Szenen mit .no-extra-sun wird die zusätzliche CSS-Sonne ausgeblendet.
*/
.stage.no-extra-sun .sun {
  display: none;
}


/* v3.25 global RetroBoys title readability
   Macht alle RetroBoys-Schriftzüge dunkler, plastischer und näher am Referenzbild.
*/
.retroboys-title,
.live-topbar .titletext {
  font-family: 'Permanent Marker', cursive;
  text-transform: uppercase;
  color: #ff4aae;
  background: linear-gradient(180deg, #ff89d8 0%, #ff49ad 36%, #df116f 72%, #9b0c4f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px rgba(255, 122, 209, 0.20);
  filter: drop-shadow(0 0 5px rgba(255, 45, 143, 0.55))
          drop-shadow(0 0 14px rgba(255, 45, 143, 0.42))
          drop-shadow(0 4px 2px rgba(45, 0, 35, 0.72))
          drop-shadow(0 8px 10px rgba(0, 0, 0, 0.85));
  text-shadow: none !important;
}


/* v3.27 Dark Retro Broadcast master polish */
:root {
  --panel: rgba(7,5,16,0.92);
  --panel2: rgba(28,10,82,0.78);
  /* rbc-obs-cleanup (2026-07-15): --brand-magenta hier auf #ff2f9b
     ueberschrieben widersprach der Basis-Definition #ff3aa2 (Zeile 10) und
     galt inkonsistent nur fuer Dateien, die theme.css NACH diesem Block
     laden. Entfernt - #ff3aa2 bleibt jetzt ueberall der einzige Wert. */
  --hot-pink: #f10e76;
  --glow-orchid: #ff7fd6;
}
.stage {
  background:
    radial-gradient(ellipse 1000px 620px at 32% 28%, rgba(255,45,143,0.18), transparent 68%),
    radial-gradient(ellipse 820px 520px at 78% 48%, rgba(76,255,136,0.075), transparent 70%),
    linear-gradient(180deg, #090018 0%, #05010d 56%, #020005 100%);
}
.panel,
.retro-panel {
  background: linear-gradient(135deg, rgba(7,5,16,0.94), rgba(27,11,56,0.80));
  border-color: rgba(255,47,155,0.70);
  box-shadow: 0 0 30px rgba(255,47,155,0.24), inset 0 0 26px rgba(255,255,255,0.035);
}
.brand-title,
.retroboys-title {
  background: linear-gradient(180deg, #ff99dd 0%, #ff47af 32%, #e61175 70%, #8c0845 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 172, 228, 0.22);
  filter: drop-shadow(0 0 5px rgba(255, 45, 143, 0.55))
          drop-shadow(0 0 18px rgba(255, 45, 143, 0.42))
          drop-shadow(0 7px 3px rgba(35, 0, 30, 0.78))
          drop-shadow(0 14px 16px rgba(0, 0, 0, 0.92));
}
.sub-label { color: #ff4bad; text-shadow: 0 0 14px rgba(255,45,143,.28); }
.tactical-label { color: var(--radar-green); }
.corner-frame { opacity: .72; }
.grid-floor { opacity: .56; }
.vignette {
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.54) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.34), transparent 20%, transparent 80%, rgba(0,0,0,0.38));
}


/* RetroBoys Club Heading Standard v430
   Zentraler Look für Überschriften, Labels und Spielernamen.
   Neue Seiten sollen diese Klassen direkt nutzen:
   .rbc-brand-heading, .rbc-section-heading, .rbc-tech-label, .rbc-player-heading
*/
:root{
  --rbc-font-logo:'Permanent Marker', cursive;
  --rbc-font-heading:'Russo One','Oswald','Arial Black',sans-serif;
  --rbc-font-tech:'Share Tech Mono',monospace;
  --rbc-heading-pink:#ff4ea6;
  --rbc-heading-green:#4cff88;
  --rbc-heading-white:#f8f4ff;
  --rbc-heading-glow:0 2px 0 #2a0016,0 0 12px rgba(255,58,162,.85),0 0 26px rgba(255,58,162,.48);
}
.rbc-brand-heading,
.logo,
.title,
.big-title,
.board-title .brand,
.end-logo-fallback,
.rbc279-title-text{
  font-family:var(--rbc-font-logo)!important;
  color:var(--rbc-heading-pink)!important;
  text-shadow:var(--rbc-heading-glow)!important;
  letter-spacing:.02em;
  line-height:.92;
}
.rbc-section-heading,
.paused,
.mvpc-title,
.podest-title,
.result-title,
.card-title{
  font-family:var(--rbc-font-heading)!important;
  text-transform:uppercase;
  color:var(--rbc-heading-white);
  text-shadow:0 3px 0 #000,0 0 16px rgba(255,58,162,.35);
}
.rbc-tech-label,
.league,
.game,
.next,
.status,
.transmission,
.discord-link,
.map,
.map-label,
.role,
.presenter-role,
.live-label,
.social-line,
.end-logo-sub{
  font-family:var(--rbc-font-tech)!important;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.rbc-player-heading,
.player-name,
.hero-name,
.podest-name,
.mvpc-nm,
.pn,
.nm,
.bname{
  font-family:var(--rbc-font-heading)!important;
  text-transform:uppercase;
}

/* ─────────────────────────────────────────────────────────────
   RetroBoys Brand Standard v477
   C-Variante: offizielles PNG-Wordmark als Brand, CSS-Typo für Szenentitel.
   END/Result-Screens behalten GG als bewusstes Finale.
   ───────────────────────────────────────────────────────────── */
:root{
  --rbc-brand-text: "RETROBOYSCLUB";
  --rbc-wordmark-url: url('/assets/retroboysclub_schriftzug_cropped.png');
  --rbc-league-title: "RB ELO-LIGA — SEASON 1";
  --rbc-game-title: "COMMAND & CONQUER: ALARMSTUFE ROT REMASTERED";
  --rbc-font-brand-fallback: 'Permanent Marker', cursive;
  --rbc-font-scene: 'Russo One','Oswald','Arial Black',sans-serif;
  --rbc-font-meta: 'Share Tech Mono',monospace;
  --rbc-brand-glow: drop-shadow(0 0 10px rgba(255,58,162,.72)) drop-shadow(0 0 28px rgba(255,0,120,.42));
}

.rbc-wordmark-bg{
  display:block!important;
  width:var(--rbc-wordmark-w, 520px)!important;
  height:var(--rbc-wordmark-h, 92px)!important;
  max-width:100%!important;
  background-image:var(--rbc-wordmark-url)!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  background-position:var(--rbc-wordmark-pos, center)!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  font-size:0!important;
  line-height:0!important;
  letter-spacing:0!important;
  filter:var(--rbc-brand-glow)!important;
}
.rbc-wordmark-img,
.rbc-brand-wordmark-img,
.end-schriftzug[src*="retroboysclub_schriftzug"]{
  display:block;
  width:var(--rbc-wordmark-w, 420px);
  height:auto;
  max-width:100%;
  object-fit:contain;
  filter:var(--rbc-brand-glow);
}
.rbc-scene-title,
.rbc-section-heading,
.paused,
.obs-flow-title,
.card-title,
.result-title,
.mvpc-title,
.podest-title{
  font-family:var(--rbc-font-scene)!important;
  text-transform:uppercase!important;
  letter-spacing:.10em!important;
  color:#f8f4ff!important;
  text-shadow:0 3px 0 #000,0 0 16px rgba(255,58,162,.36)!important;
}
.rbc-league-standard,
.rbc-meta-line,
.rbc-subline,
.sub-label,
.league,
.end-league,
.end-logo-sub,
.brand-sub,
.control-brand .sub{
  font-family:var(--rbc-font-meta)!important;
  text-transform:uppercase!important;
  letter-spacing:.22em!important;
}
.rbc-league-standard,
.sub-label,
.league,
.end-league{
  color:rgba(245,240,255,.52)!important;
  text-shadow:0 0 12px rgba(255,58,162,.18)!important;
}
.board-title .rbc-wordmark-bg{--rbc-wordmark-w:560px;--rbc-wordmark-h:94px;--rbc-wordmark-pos:center;margin:0 auto 6px!important;}
.top .rbc-wordmark-bg{--rbc-wordmark-w:560px;--rbc-wordmark-h:92px;--rbc-wordmark-pos:center;margin:0 auto 4px!important;}
.brand-block .rbc-wordmark-bg{--rbc-wordmark-w:330px;--rbc-wordmark-h:54px;--rbc-wordmark-pos:left center;}
.title.rbc-wordmark-bg{--rbc-wordmark-w:980px;--rbc-wordmark-h:212px;--rbc-wordmark-pos:left center;margin:0 0 18px!important;}
.end-gg,
.big-title{
  /* GG bleibt als Sondermarke auf END/Result erhalten */
  letter-spacing:-.035em;
}



/* ─────────────────────────────────────────────────────────────
   RetroBoys Brand Standard v478
   Fix: Wordmark nutzt die beschnittene PNG-Variante, damit Intro/Matchup
   nicht nur die transparente Original-Leinwand skalieren.
   ───────────────────────────────────────────────────────────── */
.rbc-wordmark-bg{
  background-image:var(--rbc-wordmark-url)!important;
  background-size:contain!important;
}
.title.rbc-wordmark-bg{
  --rbc-wordmark-w:980px;
  --rbc-wordmark-h:190px;
}
.top .rbc-wordmark-bg{
  --rbc-wordmark-w:620px;
  --rbc-wordmark-h:118px;
}