/* GLITCH GANG · tema de Live con el lenguaje del GlitchGang Hub (False MLBB Overlay Tool · gg-hub.html / gg-overlay.css).
   Se carga después de style.css y lo sustituye: bloques cuadrados, bordes de 2 px, retícula con scanlines,
   Chakra Petch en mayúsculas, etiquetas mono "//", verde #00E676 y glitch puntual. */
:root{color-scheme:dark;--accent:#00E676;--accent-rgb:0,230,118;--bg:#06070b;--surface:#0a0b0e;--raised:#0e1118;--line:#20232a;--muted:#8b93a3;--text:#F2F4F0;--purple:#7c3aed;--orange:#FFC531;
  --gg-s1:#0e1118;--gg-s2:#0a0b0e;--gg-s3:#141821;--gg-edge:#20232a;--gg-ink:#F2F4F0;--gg-dim:#8b93a3;--gg-on:#05070a;--gg-live:#FF2E63;--gg-gold:#FFC531;--gg-r:#ff2e63;--gg-c:#00f0ff;
  --gg-fd:'Chakra Petch','Arial Narrow',sans-serif;--gg-fm:'IBM Plex Mono',ui-monospace,monospace;--gg-fb:'Sora','Segoe UI',sans-serif;--gg-ease:cubic-bezier(.16,1,.3,1)}
@keyframes gg-blink{50%{opacity:.15}}
@keyframes gg-reveal{0%{opacity:0}50%,100%{opacity:1}}
@keyframes gg-txt{0%{opacity:0}12%{opacity:1;transform:translateX(-4px);text-shadow:-3px 0 var(--gg-r),3px 0 var(--gg-c);clip-path:inset(0 0 55% 0)}24%{transform:translateX(3px);clip-path:inset(45% 0 0 0)}36%{transform:none;clip-path:none;text-shadow:-2px 0 var(--gg-r),2px 0 var(--gg-c)}100%{opacity:1;transform:none;clip-path:none;text-shadow:none}}
@keyframes gg-idle{0%,96%,100%{text-shadow:none;transform:none}96.5%{text-shadow:-2px 0 var(--gg-r),2px 0 var(--gg-c);transform:translateX(-2px)}97.5%{text-shadow:2px 0 var(--gg-r),-2px 0 var(--gg-c);transform:translateX(2px)}98.5%{text-shadow:none;transform:none}}

/* ---------- base ---------- */
html body *,html body *::before,html body *::after{border-radius:0!important}
html body{background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/100% 4px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/96px 100%,var(--gg-bg,#06070b)!important;background-attachment:fixed!important;color:var(--gg-ink)!important;font-family:var(--gg-fb)!important;font-size:13px}
html body button,html body input,html body select,html body textarea{font-family:inherit}
html body h1,html body h2,html body h3{font-family:var(--gg-fd)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.03em!important;color:var(--gg-ink)}
html body :focus-visible{outline:2px solid var(--gg-ink)!important;outline-offset:2px!important}
html body ::selection{background:var(--accent);color:var(--gg-on)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--gg-s1)}::-webkit-scrollbar-thumb{background:var(--gg-edge)}::-webkit-scrollbar-thumb:hover{background:#2c3039}
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),html body select,html body textarea{background:var(--gg-s1)!important;border:2px solid var(--gg-edge)!important;color:var(--gg-ink)!important;box-shadow:none!important;font-family:var(--gg-fb)!important}
html body input:focus,html body select:focus,html body textarea:focus{border-color:var(--accent)!important;outline:none!important}
html body label{font-family:var(--gg-fm);letter-spacing:.06em}
html body input[type=range]{accent-color:var(--accent)}
html body input[type=checkbox]{accent-color:var(--accent)}

/* ---------- rail (sidebar del hub) ---------- */
html body>aside{background:var(--gg-s1)!important;border-right:2px solid var(--gg-edge)!important;counter-reset:ggnav}
html body .brand{padding:18px 0 16px!important;border-bottom:2px solid var(--gg-edge);margin-bottom:12px}
html body .brand-monogram{width:52px;height:30px;font-size:0!important;transform:none!important;padding:0!important;background:url(/assets/games/gg-logo.png) center/contain no-repeat}
html body .brand-monogram>span,html body .brand-monogram i{display:none!important}
html body .brand-caption{display:block;width:100%;text-align:center;font-family:var(--gg-fm)!important;font-weight:600;font-size:8px!important;letter-spacing:.2em!important;color:var(--accent)!important;margin-top:8px!important}
html body aside nav{gap:6px!important;padding:0 8px!important}
html body .nav{counter-increment:ggnav;border:2px solid transparent!important;background:transparent!important;color:var(--gg-dim)!important;font-family:var(--gg-fd)!important;font-weight:700!important;font-size:10px!important;letter-spacing:.08em;text-transform:uppercase;padding:11px 2px 9px!important;transition:color .16s,border-color .16s}
html body .nav::after{content:counter(ggnav,decimal-leading-zero);position:absolute;top:4px;left:6px;font-family:var(--gg-fm);font-size:8px;color:var(--gg-edge)}
html body .nav:hover{color:var(--gg-ink)!important;border-color:var(--gg-edge)!important}
html body .nav.active{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--gg-on)!important;box-shadow:none!important}
html body .nav.active::after{color:var(--gg-on)}
html body .nav.active::before{display:none!important}
html body .rail-bottom{font-family:var(--gg-fm);letter-spacing:.2em;color:var(--gg-dim)}
html body .rail-bottom b{width:38px;height:38px;display:grid;place-items:center;background:var(--gg-s3)!important;border:2px solid var(--gg-edge)!important;color:var(--gg-ink)!important;font-family:var(--gg-fd)}
html body .local-dot{background:var(--accent)!important;box-shadow:none!important;animation:gg-blink 1.1s steps(1) infinite}

/* ---------- topbar ---------- */
html body main>header{border-bottom:2px solid var(--gg-edge)!important}
html body .breadcrumb{font-family:var(--gg-fm)!important;font-weight:600;font-size:12px!important;letter-spacing:.16em!important;color:var(--gg-dim)!important;text-transform:uppercase}
html body .breadcrumb>b{font-family:var(--gg-fd)!important;font-weight:700!important;font-size:20px!important;letter-spacing:.06em!important;color:var(--gg-ink)!important}
html body .breadcrumb>b::before{content:"";width:12px;height:12px;background:var(--accent);flex:none}
html body .brand-live{background:var(--gg-live)!important;border:0!important;color:#fff!important;font-family:var(--gg-fm)!important;font-size:10px!important;letter-spacing:.2em!important;padding:2px 7px!important;animation:gg-idle 8s steps(1) 2s infinite}
html body #pageLabel{color:var(--accent)!important;font-weight:600}
html body #pageLabel::before{content:"> ";color:var(--gg-dim)}
html body .header-divider{width:2px!important;background:var(--gg-edge)!important}
html body .pill,html body #serverState{display:inline-flex;align-items:center;gap:8px;padding:7px 12px!important;border:2px solid var(--gg-edge)!important;background:transparent!important;font-family:var(--gg-fm)!important;font-weight:600!important;font-size:10px!important;letter-spacing:.14em!important;color:var(--gg-dim)!important;max-width:none!important}
html body #serverState::before{content:"";width:8px;height:8px;background:var(--accent);animation:gg-blink 1.1s steps(1) infinite}
html body .organizer-bar{border-left:2px solid var(--gg-edge)!important}
html body .organizer-bar button{background:transparent!important;border:2px solid var(--gg-edge)!important;color:var(--gg-ink)!important;font-family:var(--gg-fm)!important;font-weight:600;font-size:10px!important;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px!important}
html body .organizer-bar button:hover{border-color:var(--accent)!important;color:var(--accent)!important}

/* ---------- botones ---------- */
html body .btn,html body .guide-actions button,html body .guide-actions a,html body .platform-option,html body .chat-filter,html body .delete-destination,html body .reveal-key,html body .password-reveal{background:transparent!important;border:2px solid var(--gg-edge)!important;color:var(--gg-ink)!important;font-family:var(--gg-fd)!important;font-weight:700!important;font-size:12px!important;letter-spacing:.1em!important;text-transform:uppercase;box-shadow:none!important;transition:border-color .16s,color .16s,transform .1s}
html body .btn:hover,html body .platform-option:hover,html body .chat-filter:hover{border-color:var(--gg-ink)!important;background:transparent!important}
html body .btn:active{transform:translate(1px,1px)}
html body .btn.primary,html body #start,html body .gateway-primary{background:var(--accent)!important;border:2px solid var(--accent)!important;color:var(--gg-on)!important;box-shadow:5px 5px 0 var(--gg-ink)!important;font-family:var(--gg-fd)!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase}
html body .btn.primary:hover,html body #start:hover,html body .gateway-primary:hover{background:color-mix(in srgb,var(--accent) 86%,#fff)!important;transform:none}
html body .btn.primary:active,html body #start:active,html body .gateway-primary:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--gg-ink)!important}
html body #start:not(.primary){background:var(--gg-live)!important;border-color:var(--gg-live)!important;color:#fff!important}
html body .btn:disabled,html body button:disabled{background:repeating-linear-gradient(-45deg,var(--gg-edge) 0 8px,var(--gg-s1) 8px 16px)!important;color:var(--gg-dim)!important;box-shadow:none!important;opacity:1!important}
html body .text-button{font-family:var(--gg-fm)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)!important}
html body .text-button:hover{color:var(--gg-ink)!important}
html body .icon-button{color:var(--gg-dim)!important;border:2px solid transparent!important}
html body .icon-button:hover{background:transparent!important;border-color:var(--gg-edge)!important;color:var(--gg-ink)!important}
html body .chat-filter.selected,html body .side-tabs button.selected{background:var(--gg-ink)!important;border-color:var(--gg-ink)!important;color:var(--gg-on)!important}

/* ---------- avisos ---------- */
html body .retention-banner{background:var(--gg-s2)!important;border:2px solid var(--gg-edge)!important;box-shadow:inset 3px 0 var(--accent)}
html body .retention-banner>b{font-family:var(--gg-fm)!important;font-weight:600;font-size:10px!important;letter-spacing:.16em!important;color:var(--accent)!important}
html body .retention-banner>p{font-family:var(--gg-fm);font-size:11px;color:var(--gg-dim)}
html body #toast:not(:empty){background:var(--gg-s2)!important;border:2px solid var(--gg-edge)!important;box-shadow:inset 3px 0 var(--gg-gold)!important;color:var(--gg-ink)!important;font-family:var(--gg-fm)!important;font-size:12px!important;letter-spacing:.04em;animation:gg-reveal .25s steps(1) both}

/* ---------- encabezado del estudio (como page-header del hub) ---------- */
html body .studio-title{position:relative;background:var(--gg-s2)!important;border:2px solid var(--gg-edge)!important;box-shadow:none!important;padding:20px 24px!important;margin:16px 0!important;overflow:hidden}
html body .studio-title::before,html body .studio-title::after{display:none!important}
html body .studio-title .eyebrow{font-family:var(--gg-fm)!important;font-weight:600;font-size:12px!important;letter-spacing:.2em!important;color:var(--accent)!important}
html body .studio-title .eyebrow::before{content:"// 01 · "}
html body .studio-title h1{font-family:var(--gg-fd)!important;font-size:40px!important;line-height:1!important;letter-spacing:.02em!important;margin:8px 0 0!important;animation:gg-txt .5s steps(1) both}
html body .studio-title h1 em{font-style:normal;color:var(--accent)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
html body .session-clock{border:2px solid var(--gg-edge)!important;background:var(--gg-s1)!important;padding:10px 16px!important;box-shadow:none!important;backdrop-filter:none!important}
html body .session-clock>span,html body #liveIndicator{font-family:var(--gg-fm)!important;font-weight:600;font-size:10px!important;letter-spacing:.16em!important;color:var(--gg-gold)!important}
html body #liveIndicator.live{color:var(--gg-live)!important;animation:gg-blink 1.1s steps(1) infinite}
html body .session-clock b{font-family:var(--gg-fm)!important;font-weight:600;font-size:28px!important;color:var(--gg-ink)!important}
html body .studio-strip{background:var(--gg-s2)!important;border:2px solid var(--gg-edge)!important;font-family:var(--gg-fm)!important;font-size:11px!important;letter-spacing:.06em;color:var(--gg-dim)!important}
html body .status-dot,html body .tiny-dot,html body .save-dot{background:var(--gg-dim)!important;box-shadow:none!important}
html body .status-dot.good,html body .tiny-dot{background:var(--accent)!important}
html body .status-dot.warning{background:var(--gg-gold)!important;animation:gg-blink 1.1s steps(1) infinite}
html body .platform-chip{border:2px solid color-mix(in srgb,var(--platform) 60%,var(--gg-edge))!important;background:transparent!important;font-family:var(--gg-fm)!important;font-size:10px!important;letter-spacing:.1em;color:var(--gg-ink)!important}

/* ---------- paneles ---------- */
html body .panel,html body .destination,html body .recording-card,html body .dest-hero,html body .dest-savebar,html body .dest-help,html body .broadcast-core,html body .library-toolbar,html body .connection-metrics>*,html body .network-result-grid>*{background:var(--gg-s2)!important;border:2px solid var(--gg-edge)!important;box-shadow:none!important;backdrop-filter:none!important}
html body .panelhead,html body .chat-heading,html body .destination-heading{background:var(--gg-s1)!important;border-bottom:2px solid var(--gg-edge)!important}
html body .panelhead h2,html body .panel-title h2,html body .chat-heading b,html body .chat-heading h3{font-family:var(--gg-fm)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--accent)!important}
html body .panelhead h2::before{content:"// ";color:var(--gg-dim)}
html body .muted,html body .fine-print{color:var(--gg-dim)!important;letter-spacing:normal!important}
html body .panel-kicker,html body .eyebrow,html body .count-badge,html body .resolution-label,html body .health-pill,html body .canvas-badge,html body .dock-foot{font-family:var(--gg-fm)!important;font-weight:600;letter-spacing:.14em!important;color:var(--gg-dim)!important}
html body .count-badge,html body .resolution-label,html body .health-pill,html body .canvas-badge{border:2px solid var(--gg-edge)!important;background:transparent!important;padding:3px 7px!important;font-size:10px!important}
html body .health-pill.good{border-color:var(--accent)!important;color:var(--accent)!important}
html body .health-pill.warning{border-color:var(--gg-gold)!important;color:var(--gg-gold)!important}
html body .canvas-badge{background:var(--gg-live)!important;border-color:var(--gg-live)!important;color:#fff!important}
html body .editor-stage{background:repeating-linear-gradient(135deg,#1a1d26 0 14px,#14171f 14px 28px)!important;border-bottom:2px solid var(--gg-edge)}
html body .editor-stage canvas{background:#06070b!important}
html body .canvas-corners{--rc:var(--accent)}
html body .editor-empty{background:var(--gg-s2)!important}
html body .editor-empty b{font-family:var(--gg-fd)!important;font-size:30px!important;text-transform:uppercase}
html body .stage-mark{font-family:var(--gg-fd)!important;color:var(--accent)!important}
html body .stage-orbit{border-color:var(--gg-edge)!important}
html body .source-toolbar{background:var(--gg-s1)!important;border-top:2px solid var(--gg-edge)!important}
html body .source-toolbar>span{font-family:var(--gg-fm)!important;font-weight:600;letter-spacing:.16em;color:var(--gg-dim)!important}

/* escenas y fuentes */
html body .scene-item{background:var(--gg-s2)!important;border:2px solid var(--gg-edge)!important;color:var(--gg-dim)!important;font-family:var(--gg-fd)!important;font-weight:700!important;font-size:13px!important;letter-spacing:.05em;text-transform:uppercase;box-shadow:none!important;transition:border-color .15s,transform .15s var(--gg-ease),box-shadow .15s}
html body .scene-item::before{border:0!important;width:8px!important;height:8px!important;background:var(--gg-edge)!important}
html body .scene-item:hover{border-color:var(--gg-dim)!important;color:var(--gg-ink)!important;transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(var(--accent-rgb),.5)!important}
html body .scene-item.selected{background:linear-gradient(135deg,rgba(255,46,99,.16),transparent 70%)!important;border-color:var(--gg-live)!important;color:var(--gg-ink)!important}
html body .scene-item.selected::before{background:var(--gg-live)!important;animation:gg-blink 1.1s steps(1) infinite}
html body .layer-item{background:var(--gg-s1)!important;border:2px solid var(--gg-edge)!important;margin-bottom:6px}
html body .layer-item.selected{border-color:var(--accent)!important;background:rgba(var(--accent-rgb),.06)!important}
html body .layer-item button{font-family:var(--gg-fm)!important;font-size:11px!important;color:var(--gg-ink)!important}
html body .source-empty,html body .chat-empty,html body .library-empty,html body .dest-empty{color:var(--gg-dim)!important;font-family:var(--gg-fm)}
html body .source-empty span,html body .chat-empty span{color:var(--accent)!important}
html body .chat-empty h3{font-size:20px!important}

/* mezclador */
html body .audio-meter,html body .mixer-channel .audio-meter{background:var(--gg-s1)!important;border:2px solid var(--gg-edge)!important;height:12px}
html body .audio-meter>*,html body #level,html body #micLevel,html body #sourceLevel{background:linear-gradient(90deg,var(--accent) 0 70%,var(--gg-gold) 70% 88%,var(--gg-live) 88%)!important;box-shadow:none!important}
html body .mixer-channel{border-color:var(--gg-edge)!important}
html body .mixer-type,html body .mixer-channel label,html body .mixer-channel span{font-family:var(--gg-fm)!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gg-dim)}

/* lateral: chat y transformar */
html body .side-tabs{background:var(--gg-s1)!important;border:2px solid var(--gg-edge)!important;border-bottom:0!important;padding:0!important}
html body .side-tabs button{font-family:var(--gg-fm)!important;font-weight:600!important;font-size:10.5px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--gg-dim)!important;border-bottom:2px solid transparent!important}
html body .chat-message{border-color:var(--gg-edge)!important;background:transparent!important}
html body .chat-message b{font-family:var(--gg-fd);letter-spacing:.04em}
html body .chat-platform-mark,html body .platform-badge{background:var(--platform,var(--accent))!important;color:var(--gg-on)!important;border:0!important;font-family:var(--gg-fd)}

/* ---------- páginas Canales / Emisión / Biblioteca / Actividad ---------- */
html body .page-heading .eyebrow,html body .dest-hero .eyebrow{color:var(--accent)!important}
html body .page-heading h1,html body .dest-hero h1,html body .library-heading h1{font-size:40px!important;line-height:1!important}
html body .dest-hero{padding:24px!important;background:var(--gg-s2)!important}
html body .dest-hero h1 span,html body .dest-hero em,html body .page-heading em,html body .library-heading em{font-style:normal;color:var(--accent)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
html body .destination.is-enabled{border-color:color-mix(in srgb,var(--platform) 60%,var(--gg-edge))!important;box-shadow:inset 3px 0 var(--platform)!important}
html body .destination-heading h3{font-size:16px!important}
html body .destination-body label{font-family:var(--gg-fm)!important;font-weight:600;font-size:10px!important;letter-spacing:.16em!important;color:var(--gg-dim)!important}
html body .switch-track{background:var(--gg-s1)!important;border:2px solid var(--gg-edge)!important}
html body .switch-track::after,html body .switch-track::before{background:var(--gg-dim)!important;box-shadow:none!important}
html body .destination-switch input:checked+.switch-track{border-color:var(--accent)!important;background:var(--gg-s1)!important}
html body .destination-switch input:checked+.switch-track::after,html body .destination-switch input:checked+.switch-track::before{background:var(--accent)!important}
html body .destination-status{font-family:var(--gg-fm)!important;letter-spacing:.1em;text-transform:uppercase;font-size:10px!important}
html body .dest-savebar.unsaved{box-shadow:inset 3px 0 var(--gg-gold)!important}
html body .recording-card:hover{border-color:var(--gg-ink)!important;transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--accent)!important}
html body .recording-game,html body .recording-meta,html body .recording-duration{font-family:var(--gg-fm)!important;letter-spacing:.08em}
html body .recording-card h3{font-size:16px!important}
html body #logs,html body .log{font-family:var(--gg-fm)!important;font-size:12px;color:#c4cad4;background:var(--gg-s2)!important;border:2px solid var(--gg-edge)!important}
html body #logs>div{padding:6px 10px;border-bottom:1px dashed var(--gg-edge)}

/* ---------- diálogos (modal del hub) ---------- */
html body dialog{background:var(--gg-s2)!important;border:2px solid var(--gg-ink)!important;box-shadow:9px 9px 0 var(--accent)!important;color:var(--gg-ink)!important;padding:0!important}
html body dialog::backdrop{background:rgba(6,7,11,.85)!important;backdrop-filter:none!important}
html body dialog>*{margin-left:22px;margin-right:22px}
html body dialog>:last-child{margin-bottom:22px}
html body .dialog-heading{margin:0 0 18px!important;padding:14px 22px!important;background:var(--gg-ink)!important;color:var(--gg-bg,#06070b)!important}
html body .dialog-heading *{color:#06070b!important}
html body .dialog-heading h2{font-size:18px!important;letter-spacing:.14em!important}
html body .dialog-heading .eyebrow,html body .dialog-heading small{color:#4a505c!important}

/* ---------- pie ---------- */
html body .footer{border-top:2px dashed var(--gg-edge)!important;font-family:var(--gg-fm)!important;font-size:10px!important;letter-spacing:.14em!important;color:var(--gg-dim)!important}

/* ---------- acceso y elegir juego (gateway) ---------- */
html body #accessGateway{background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/100% 4px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/96px 100%,#06070b!important}
html body .gateway-backdrop{opacity:.35;filter:grayscale(.4)}
html body .gateway-masthead{border-bottom:2px solid var(--gg-edge)!important;background:rgba(14,17,24,.94)!important}
html body .gateway-brand b{font-size:0!important;width:44px;height:26px;background:url(/assets/games/gg-logo.png) center/contain no-repeat!important;-webkit-text-fill-color:transparent;color:transparent!important;transform:none!important}
html body .gateway-brand span{font-family:var(--gg-fd)!important;font-weight:700;letter-spacing:.06em!important;font-size:20px!important}
html body .gateway-brand i{background:var(--gg-live)!important;border:0!important;color:#fff!important;font-style:normal;font-family:var(--gg-fm)!important;letter-spacing:.2em;padding:2px 7px!important}
html body .gateway-motto,html body .gateway-eyebrow,html body .gateway-form-caption,html body .spotlight-detail,html body .catalog-section-heading span,html body .game-state{font-family:var(--gg-fm)!important;font-weight:600!important;letter-spacing:.2em!important;color:var(--accent)!important}
html body .gateway-games h1,html body .gateway-story h2,html body .spotlight-copy h2{font-family:var(--gg-fd)!important;text-transform:uppercase;letter-spacing:.02em!important;animation:gg-txt .5s steps(1) both}
html body .gateway-story h2 strong{color:var(--accent)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
html body .gateway-login{background:var(--gg-s2)!important;border:2px solid var(--gg-ink)!important;box-shadow:9px 9px 0 var(--accent)!important;backdrop-filter:none!important}
html body .gateway-login h1{font-size:34px!important}
html body .gateway-features>div{border:2px solid var(--gg-edge)!important;background:var(--gg-s2)!important}
html body .gateway-features b{color:var(--accent)!important;font-family:var(--gg-fm)}
html body .gateway-game-ribbon{border:2px solid var(--gg-edge)!important;background:var(--gg-s1)!important}
html body .game-spotlight{border:2px solid var(--gg-edge)!important;box-shadow:none!important}
html body .game-card{border:2px solid var(--gg-edge)!important;transition:border-color .16s,transform .16s var(--gg-ease),box-shadow .16s var(--gg-ease)!important}
html body .game-card:not(:disabled):hover{border-color:var(--gg-ink)!important;transform:translate(-3px,-3px)!important;box-shadow:6px 6px 0 var(--accent)!important}
html body .game-card:disabled{filter:grayscale(.7);opacity:.75}
html body .game-state{background:var(--accent)!important;color:var(--gg-on)!important;border:0!important;padding:4px 8px!important;font-size:10px!important}
html body .game-card:disabled .game-state{background:var(--gg-s1)!important;color:var(--gg-dim)!important}
html body .game-card-copy h2{font-size:22px!important}
html body .game-card-copy small,html body .game-card-copy p{font-family:var(--gg-fm)!important;letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){html body *,html body *::before,html body *::after{animation:none!important}}

/* restos morados / lima del tema anterior */
html body .stage-spark,html body .stage-spark.two{color:var(--accent)!important}
html body .library-empty{background:var(--gg-s2)!important;border:2px dashed var(--gg-edge)!important}
html body .library-empty>span{color:var(--accent)!important}
html body .broadcast-core{color:var(--accent)!important;font-family:var(--gg-fd)!important}
html body .broadcast-art i{background:var(--gg-s1)!important;border:2px solid var(--gg-edge)!important;color:var(--accent)!important}
html body .page-heading .eyebrow::before,html body .dest-hero .eyebrow::before,html body .library-heading .eyebrow::before{content:"// "}
html body .page-heading p,html body .dest-hero p,html body .library-heading p{font-family:var(--gg-fb)!important;font-size:14px!important;letter-spacing:normal!important;color:var(--gg-dim)!important}
html body #obsInfo,html body .quality-note,html body .note{font-family:var(--gg-fb)!important;letter-spacing:normal!important}

/* ---------- arreglos de Estudio (18/oct) ---------- */
/* "Preparar transmisión" heredaba la cuadrícula de 3 columnas del asistente viejo: se apretaba todo. */
html body .tournament-guide.prep{display:block!important;grid-template-columns:none!important;border-left-width:2px!important}
html body .tournament-guide.prep>*{grid-column:auto!important;grid-row:auto!important}
/* Las palabras se partían letra por letra en columnas angostas. */
html body .scene-item,html body .layer-item>button,html body .layer-item button{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
html body .layer-item>button:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lista de escenas completa (eran 230 px: se cortaba en la cuarta de diez). */
html body #sceneList{max-height:none!important;overflow:visible!important}
html body #layerList{max-height:420px!important}
html body .docks{grid-template-columns:minmax(230px,1fr) minmax(230px,1fr) minmax(300px,1.4fr)!important;align-items:start!important}
@media (max-width:1100px){html body .docks{grid-template-columns:1fr 1fr!important}}
@media (max-width:700px){html body .docks{grid-template-columns:1fr!important}}

/* Fuentes: ● ↑ ↓ ✕ en cada capa */
html body .layer-item{align-items:center}
html body .layer-item>button{padding:9px 7px!important}
html body .layer-item .layer-tool{flex:none;width:28px;height:28px;padding:0!important;display:grid;place-items:center;border:2px solid var(--gg-edge)!important;background:transparent!important;color:var(--gg-dim)!important;font-size:13px!important;margin-left:4px}
html body .layer-item .layer-tool:hover{border-color:var(--gg-ink)!important;color:var(--gg-ink)!important}
html body .layer-item .layer-tool:last-child{margin-right:6px}
html body .layer-item .layer-tool:last-child:hover{border-color:var(--gg-live)!important;color:var(--gg-live)!important}
/* Botón grande "Conectar Programa" sobre la vista del programa */
html body .connect-programa{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:8px;align-items:center;max-width:80%;padding:18px 26px;background:var(--accent)!important;border:0!important;color:var(--gg-on)!important;box-shadow:6px 6px 0 var(--gg-ink)!important;cursor:pointer;text-align:center}
html body .connect-programa b{font-family:var(--gg-fd);font-weight:700;font-size:20px;letter-spacing:.12em}
html body .connect-programa span{font-family:var(--gg-fm);font-size:11px;letter-spacing:.04em;line-height:1.5}
html body .connect-programa:active{transform:translate(calc(-50% + 2px),calc(-50% + 2px));box-shadow:3px 3px 0 var(--gg-ink)!important}

/* Fuentes: grupo "Vistas del torneo" con una fila por vista (Casters, Agenda, Contador…) */
html body .layer-item.layer-group{background:var(--gg-s3)!important;border-color:var(--gg-edge)!important}
html body .layer-item.layer-group>button:first-child{color:var(--accent)!important;font-family:var(--gg-fm)!important;font-weight:600;letter-spacing:.06em}
html body .layer-item .layer-add{width:auto!important;padding:0 10px!important;color:var(--accent)!important;border-color:rgba(var(--accent-rgb),.5)!important;font-family:var(--gg-fm)!important;font-size:11px!important;font-weight:600}
html body .layer-item.layer-view{margin-left:16px;border-left:3px solid var(--accent)!important}
html body .layer-item.layer-view>button:first-child{font-family:var(--gg-fd)!important;font-weight:700;font-size:13px!important;letter-spacing:.05em;text-transform:uppercase}
html body .layer-empty-views{margin-left:16px;padding:10px;border:2px dashed var(--gg-edge);font-family:var(--gg-fm);font-size:11px;color:var(--gg-dim)}
/* Selector "+ Vista" */
html body .view-picker{width:560px!important}
html body .view-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 22px 16px!important}
html body .view-picker-grid .btn{justify-content:flex-start;padding:12px!important}
html body .view-picker-grid .btn:not(:disabled):hover{border-color:var(--accent)!important;color:var(--accent)!important}
html body .view-picker>.btn{margin-bottom:22px}
/* Fuentes: el nombre se acorta y los botones ● ↑ ↓ ✕ siempre se ven */
html body .layer-item{display:flex!important;flex-wrap:nowrap!important;align-items:center;min-width:0;overflow:hidden}
html body .layer-item>button:first-child{flex:1 1 0!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body .layer-item>button:not(:first-child){flex:0 0 auto!important}
html body .layer-item .layer-tool{width:26px!important;height:26px!important;margin-left:3px!important}
html body .layer-item.layer-view{margin-left:12px;width:calc(100% - 12px)}
html body .layer-item .layer-add{width:auto!important}

/* Barra "Ventana de vistas" encima de Al aire */
html body .vistas-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 14px;padding:14px 18px;background:var(--gg-s2);border:2px solid var(--gg-gold);box-shadow:inset 4px 0 var(--gg-gold)}
html body .vistas-bar.ok{border-color:var(--accent);box-shadow:inset 4px 0 var(--accent)}
html body .vb-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 320px}
html body .vb-k{font-family:var(--gg-fm);font-weight:600;font-size:10px;letter-spacing:.18em;color:var(--gg-dim)}
html body .vb-scene{font-family:var(--gg-fd);font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--gg-ink)}
html body .vb-link{font-family:var(--gg-fm);font-size:12px;color:var(--accent);word-break:break-all}
html body .vb-state{padding:6px 10px;border:2px solid var(--gg-gold);font-family:var(--gg-fm);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--gg-gold)}
html body .vb-state.ok{border-color:var(--accent);color:var(--accent)}
html body .vb-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Relevo de operadores: al aire / en espera y ventana de confirmación ---------- */
html body #serverState.is-live{border-color:var(--gg-live)!important;color:var(--gg-ink)!important;background:rgba(255,46,99,.14)!important}
html body #serverState.is-live::before{background:var(--gg-live)}
html body #serverState.is-standby{border-color:var(--gg-gold)!important;color:var(--gg-gold)!important}
html body #serverState.is-standby::before{background:var(--gg-gold)}
html body .relay-dialog{width:520px!important;max-width:calc(100vw - 32px)}
html body .relay-dialog>p{margin-top:0;margin-bottom:18px;line-height:1.55}
html body .relay-field{display:grid;gap:8px;margin-bottom:20px;font-family:var(--gg-fm);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--gg-dim)}
html body .relay-field input{width:100%;font-family:var(--gg-fb);font-size:15px;letter-spacing:0}
html body .relay-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
html body .relay-actions .btn.danger{border-color:var(--gg-live)!important;color:var(--gg-live)!important}
html body .relay-actions .btn.danger:hover{background:var(--gg-live)!important;color:var(--gg-ink)!important}
html body .vb-warn{flex-basis:100%;margin:0;padding:10px 14px;background:rgba(255,46,99,.12);border:2px solid #FF2E63;color:#FF2E63;font-family:var(--gg-fm);font-weight:600;font-size:12px;letter-spacing:.06em}
html body .vb-warn[hidden]{display:none}