/* BYTE 404 Game - Scoped Styles */
/* All selectors scoped under #byte-game-root to avoid theme conflicts */

/* ============================================================
   BYTE 404 — Greentech.game() v5.1
   © Yel Martínez · yel-martinez-portfolio.com · GPL v2
   
   WCAG 2.1 AA compliant:
   - Contraste mínimo 4.5:1 texto normal, 3:1 UI elements
   - Touch targets mínimo 44×44px (Apple HIG / WCAG 2.5.5)
   - Focus visible en todos los elementos interactivos
   - prefers-reduced-motion respetado
   - Font-size mínimo 16px para texto de lectura
   ============================================================ */

/* ── TOKENS ──
   Estas custom properties vivían solo en public/byte-game.css, un archivo
   huérfano que ningún post enlaza (el activo es este bg-style.css). Cada
   var(--y), var(--s4), etc. de más abajo llevaba meses resolviendo a
   "inválido" en silencio — la propiedad entera caía a su valor inicial
   (padding/gap a 0, color/border sin efecto) en vez de fallar de forma
   visible. De ahí gran parte del espaciado roto y las cartas "gigantes". */
#byte-game-root {
  --y:    #f5c400;
  --c:    #00d4c8;
  --g:    #2ecc71;
  --r:    #ff6b6b;
  --p:    #c084fc;
  --o:    #fb923c;

  --bg0:  #0d0b18;
  --bg1:  #141228;
  --bg2:  #1c1a35;
  --bg3:  #242145;
  --bd:   #312e5a;
  --bd2:  #4b4785;

  --tx:   #f0eeff;
  --tx2:  #c4bff0;
  --tx3:  #8a84c0;

  --pixel: 'Press Start 2P', monospace;
  --mono:  'IBM Plex Mono', 'Courier New', monospace;
  --sans:  'Inter', system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --r4: 4px; --r8: 8px; --r12: 12px;
}

/* ── RESET MÍNIMO ── */
#byte-game-root, #byte-game-root * { box-sizing: border-box; }
#byte-game-root button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  line-height: inherit;
}

/* Focus visible universal — WCAG 2.4.7 */
#byte-game-root *:focus { outline: none; }
#byte-game-root *:focus-visible {
  outline: 3px solid var(--y);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ── WRAPPER ── */
#byte-game-root .gw {
  background: var(--bg0);
  border: 2px solid var(--y);
  font-family: var(--mono);
  color: var(--tx);
  overflow: hidden;
  position: relative;
}

/* Scanlines sutiles */
#byte-game-root .gw::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 3px
  );
  pointer-events: none;
  z-index: 500;
}


/* ── HEADER ── */
#byte-game-root .gh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s6);
  background: var(--bg1);
  border-bottom: 1px solid var(--bd);
  gap: var(--s3);
  flex-wrap: wrap;
  min-height: 52px;
}
#byte-game-root .gh-logo {
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--y);
  letter-spacing: 1px;
  line-height: 1.6;
}
#byte-game-root .gh-logo span { color: var(--c); }
#byte-game-root .gh-right { display: flex; align-items: center; gap: var(--s2); }


/* Botón mute */
#byte-game-root .gh-mute {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 7px 10px;
  border: 1px solid #4b4785;
  color: #c4bff0;
  border-radius: 6px;
  transition: all .15s;
  min-width: 64px;
  min-height: 36px;
}
#byte-game-root .gh-mute:hover { border-color: #f5c400; color: #f5c400; }
#byte-game-root .gh-mute.off { border-color: #ff6b6b; color: #ff6b6b; }


/* Selector de idioma */
#byte-game-root .gh-lang { display: flex; gap: 4px; }
#byte-game-root .gh-lang button {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 7px 10px;
  border: 1px solid #4b4785;
  color: #c4bff0;
  border-radius: 6px;
  transition: all .12s;
  min-width: 44px;
  min-height: 36px;
}
#byte-game-root .gh-lang button.on { background: #f5c400; color: #0d0b18; border-color: #f5c400; font-weight: 700; }
#byte-game-root .gh-lang button:hover:not(.on) { border-color: #00d4c8; color: #00d4c8; }


/* ── BARRA DE PROGRESO ── */
#byte-game-root .gp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #141228;
  border-bottom: 1px solid #312e5a;
  min-height: 42px;
  flex-wrap: nowrap;
}

/* Botones de navegación en progbar */
#byte-game-root .gp-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 6px 10px;
  border: 1px solid #4b4785;
  color: #c4bff0;
  border-radius: 6px;
  background: transparent;
  white-space: nowrap;
  transition: all .12s;
  min-height: 30px;
  min-width: 44px;
  flex-shrink: 0;
}
#byte-game-root .gp-btn:hover { border-color: #f5c400; color: #f5c400; }
#byte-game-root .gp-btn.skip { border-color: #00d4c8; color: #00d4c8; }
#byte-game-root .gp-btn.skip:hover { background: #00d4c8; color: #0d0b18; }


/* Dots de progreso */
#byte-game-root .gp-dots { flex: 1; display: flex; gap: 3px; min-width: 0; }
#byte-game-root .gp-dot {
  flex: 1;
  height: 6px;
  background: var(--bd);
  border-radius: 3px;
  transition: all .3s;
}
#byte-game-root .gp-dot.done { background: var(--y); }
#byte-game-root .gp-dot.active { background: var(--c); animation: pulse 1s ease-in-out infinite; }


/* Puntos */
#byte-game-root .gp-pts {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--y);
  white-space: nowrap;
  flex-shrink: 0;
}


/* Chips de nivel */
#byte-game-root .gp-chips { display: flex; gap: 3px; flex-shrink: 0; }
#byte-game-root .gp-chip {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 5px 8px;
  border: 1px solid #4b4785;
  color: #8b87c4;
  border-radius: 4px;
  background: transparent;
  transition: all .12s;
  min-height: 26px;
  min-width: 28px;
}
#byte-game-root .gp-chip:hover { border-color: #00d4c8; color: #00d4c8; }
#byte-game-root .gp-chip.on { border-color: #f5c400; color: #f5c400; background: rgba(245,196,0,.08); }


/* ── VIEWPORT — altura asignada por JS, nunca cambia ── */
#byte-game-root #gc {
  position: relative;
  overflow: hidden;
}

/* Cada pantalla es position:absolute y llena el viewport */
#byte-game-root .gs {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ── FOOTER ── */
#byte-game-root .gf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  background: #141228;
  border-top: 1px solid #312e5a;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #8b87c4;
  min-height: 30px;
}


/* ============================================================
   COMPONENTES COMPARTIDOS
   ============================================================ */


/* Panel base — todas las pantallas de juego */
#byte-game-root .gpanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s5) var(--s6) var(--s5);
  gap: var(--s4);
  overflow: hidden;
}


/* Badge de nivel */
#byte-game-root .gbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid;
  border-radius: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  background: #141228;
  flex-shrink: 0;
  line-height: 1.6;
}
#byte-game-root .gbadge-n { font-size: 11px; }


/* Pips de progreso de nivel */
#byte-game-root .gpips {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  height: 6px;
}
#byte-game-root .gpip {
  flex: 1;
  height: 6px;
  background: var(--bd);
  border-radius: 3px;
  transition: all .3s;
}
#byte-game-root .gpip.ok { background: var(--g); }
#byte-game-root .gpip.bad { background: var(--r); }
#byte-game-root .gpip.cur { background: var(--c); animation: pulse 1s infinite; }
#byte-game-root .gpip.cur2 { background: var(--y); animation: pulse 1s infinite; }
#byte-game-root .gpip.cur3 { background: var(--p); animation: pulse 1s infinite; }


/* BYTE terminal */
#byte-game-root .gbyte {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: rgba(0,212,200,.05);
  border: 1px solid var(--c);
  border-radius: var(--r8);
  flex-shrink: 0;
}
#byte-game-root .gbyte-msg {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--tx);
  line-height: 1.7;
}
#byte-game-root .gbyte-msg::before { content: '> '; color: var(--g); font-weight: 600; }


/* Feedback tras respuesta */
#byte-game-root .gfbk {
  padding: var(--s4) var(--s5);
  border: 2px solid;
  border-radius: var(--r8);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
  flex-shrink: 0;
  max-height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bd2) transparent;
}
#byte-game-root .gfbk strong {
  display: block;
  font-family: var(--pixel);
  font-size: 9px;
  margin-bottom: var(--s2);
  letter-spacing: .5px;
}
#byte-game-root .gfbk.ok { background: rgba(46,204,113,.08);  border-color: var(--g); color: var(--tx); }
#byte-game-root .gfbk.bad { background: rgba(255,107,107,.08); border-color: var(--r); color: var(--tx); }
#byte-game-root .gfbk.warn { background: rgba(251,146,60,.08);  border-color: var(--o); color: var(--tx); }
#byte-game-root .gfbk.info { background: rgba(245,196,0,.08);   border-color: var(--y); color: var(--tx); }


/* Texto de instrucción */
#byte-game-root .gsub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #c4bff0;
  line-height: 1.75;
  flex-shrink: 0;
}


/* ── BOTONES ──
   WCAG 2.5.5: touch target 44×44px mínimo
   WCAG 1.4.3: contraste 4.5:1 mínimo */
#byte-game-root .gbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .5px;
  padding: var(--s4) var(--s5);
  border-radius: var(--r4);
  border: 2px solid transparent;
  transition: all .12s;
  min-height: 48px;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
}

/* Primario: #f5c400 sobre #0d0b18 = 8.2:1 ✓ */
#byte-game-root .gbtn.pri {
  background: var(--y);
  color: var(--bg0);
  border-color: var(--y);
  font-weight: 700;
}
#byte-game-root .gbtn.pri:hover { background: #d4a900; border-color: #d4a900; }
#byte-game-root .gbtn.pri:active { transform: translateY(1px); }

/* Ghost: borde visible, texto legible */
#byte-game-root .gbtn.gho {
  background: transparent;
  color: var(--tx2);
  border-color: var(--bd2);
}
#byte-game-root .gbtn.gho:hover { border-color: var(--y); color: var(--y); }

/* Cyan */
#byte-game-root .gbtn.cyn {
  background: var(--c);
  color: var(--bg0);
  border-color: var(--c);
  font-weight: 700;
}
#byte-game-root .gbtn.cyn:hover { background: #00b8ad; border-color: #00b8ad; }

/* Wide */
#byte-game-root .gbtn.wide { width: 100%; }


/* Fila de botones — siempre al fondo con margin-top:auto */
#byte-game-root .gbtnrow {
  display: flex;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s4);
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}


/* ============================================================
   PANTALLA INTRO
   ============================================================ */
#byte-game-root .gintro {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#byte-game-root .gintro-hero {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s5) var(--s7) var(--s4);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 25% 35%, rgba(0,212,200,.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 75% 70%, rgba(245,196,0,.06) 0%, transparent 50%),
    var(--bg0);
}

/* Grid decorativo */
#byte-game-root .gintro-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,212,200,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,200,.025) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
#byte-game-root .gtag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 14px;
  border: 1px solid var(--c);
  border-radius: 20px;
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--c);
  letter-spacing: 2px;
  margin-bottom: var(--s4);
  position: relative;
}
#byte-game-root .gpulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c);
  animation: blink 1s step-end infinite;
}
#byte-game-root .gintro-byte { margin-bottom: var(--s3); animation: float 3s ease-in-out infinite; position: relative; }
#byte-game-root .gintro-h1 {
  font-family: var(--pixel);
  font-size: clamp(13px, 2.2vw, 20px);
  color: var(--y);
  letter-spacing: 2px;
  line-height: 1.7;
  margin-bottom: var(--s3);
  position: relative;
}
#byte-game-root .gintro-h1 em { color: var(--c); font-style: normal; }
#byte-game-root .gintro-h1::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), var(--y), transparent);
  margin: var(--s2) auto 0;
  width: 200px;
  max-width: 60%;
}
#byte-game-root .gintro-desc {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--tx);
  line-height: 1.75;
  max-width: 500px;
  margin: 0 auto var(--s2);
  position: relative;
}
#byte-game-root .gintro-sub {
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--c);
  letter-spacing: 1px;
  margin-bottom: var(--s5);
  position: relative;
}
#byte-game-root .gcoin {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #8b87c4;
  animation: blink 1s step-end infinite;
  margin-bottom: var(--s4);
  position: relative;
}

/* CTA principal */
#byte-game-root .gcta {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  background: var(--y);
  color: var(--bg0);
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: 2px;
  padding: var(--s5) var(--s7);
  border: 3px solid var(--y);
  border-radius: var(--r4);
  box-shadow: 4px 4px 0 var(--o);
  transition: all .1s;
  font-weight: 700;
  animation: cta-glow 2s ease-in-out infinite;
  position: relative;
}
#byte-game-root .gcta:hover { background: #d4a900; border-color: #d4a900; box-shadow: 2px 2px 0 var(--o); animation: none; }
#byte-game-root .gcta:active { transform: translate(2px,2px); box-shadow: none; }


/* Barra de niveles inferior */
#byte-game-root .gintro-levels {
  display: flex;
  border-top: 1px solid #312e5a;
  flex-shrink: 0;
}
#byte-game-root .gintro-lvl {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 12px;
  border-right: 1px solid #312e5a;
  transition: background .15s;
  cursor: default;
  color: #8b87c4;
}
#byte-game-root .gintro-lvl:last-child { border-right: none; }
#byte-game-root .gintro-lvl:hover { background: #1c1a35; }
#byte-game-root .gintro-lvl svg { width: 22px; height: 22px; }
#byte-game-root .gintro-lvl-n { font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.6; color: #8b87c4; }
#byte-game-root .gintro-lvl-name { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: #c4bff0; letter-spacing: .3px; }


/* ============================================================
   NIVEL 00 — GLOSARIO
   ============================================================ */
#byte-game-root .glib { flex: 1; display: flex; flex-direction: column; padding: 20px 24px 20px; gap: 12px; overflow: hidden; }
#byte-game-root .glib-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: #f5c400 #211f3a;
  padding: 4px 4px 8px;
}
#byte-game-root .glib-grid::-webkit-scrollbar { width: 5px; }
#byte-game-root .glib-grid::-webkit-scrollbar-track { background: #211f3a; }
#byte-game-root .glib-grid::-webkit-scrollbar-thumb { background: #f5c400; border-radius: 3px; }
@media (min-width: 640px) { #byte-game-root .glib-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { #byte-game-root .glib-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }


/* Tarjeta de glosario — flip real con dos caras (front/back) */
#byte-game-root .gcard {
  position: relative;
  min-height: 172px;
  cursor: pointer;
  perspective: 1000px;
  border-radius: 14px;
  transition: transform .15s ease;
}
#byte-game-root .gcard:hover { transform: translateY(-3px); }
#byte-game-root .gcard:active { transform: translateY(-1px) scale(.97); }
#byte-game-root .gcard:focus-visible { outline: 3px solid #f5c400; outline-offset: 3px; border-radius: 14px; }

#byte-game-root .gcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 172px;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,.15,.2,1);
}
#byte-game-root .gcard.flip .gcard-inner { transform: rotateY(180deg); }

#byte-game-root .gcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #1c1a35;
  border: 1px solid var(--catcolor, #4b4785);
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#byte-game-root .gcard-back { transform: rotateY(180deg); }
#byte-game-root .gcard:hover .gcard-face { border-color: #00d4c8; }
#byte-game-root .gcard.flip:hover .gcard-face { border-color: var(--catcolor, #00d4c8); }

/* Etiqueta GREENTECH / NO ES TECH — píldora, contraste verificado ≥6:1 */
#byte-game-root .gcard-tag {
  align-self: flex-start;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.6;
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid var(--catcolor, #4b4785);
}

/* Término — legible, no desborda */
#byte-game-root .gcard-term {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f0eeff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

/* Definición — visible y legible */
#byte-game-root .gcard-def {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #c4bff0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hint toca — contraste 5.1:1 sobre #1c1a35 */
#byte-game-root .gcard-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: .5px;
  color: #8b87c4;
  animation: blink 1.5s step-end infinite;
  flex-shrink: 0;
  margin-top: auto;
}
@media (prefers-reduced-motion: reduce) {
  #byte-game-root .gcard-inner { transition: none; }
  #byte-game-root .gcard-hint { animation: none; }
}


/* ============================================================
   NIVEL 01 — RUNNER
   ============================================================ */
#byte-game-root .grun { flex: 1; display: flex; flex-direction: column; padding: 12px 20px 16px; gap: 12px; overflow: hidden; }
#byte-game-root .grun-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #1c1a35;
  border: 1px solid #312e5a;
  border-radius: 12px;
  flex-shrink: 0;
}
#byte-game-root .grun-item { text-align: center; }
#byte-game-root .grun-val { font-family: 'Press Start 2P', monospace; font-size: 22px; color: #f5c400; display: block; line-height: 1.3; }
#byte-game-root .grun-lbl { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #8b87c4; letter-spacing: 1px; }
#byte-game-root .gheart { color: #ff6b6b; font-size: 18px; }


/* Canvas — flex:1 ocupa todo el espacio disponible */
#byte-game-root .grun-canvas {
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #312e5a;
  position: relative;
}
#byte-game-root #gc-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #060410;
  image-rendering: pixelated;
}


/* Footer del runner — altura mínima fija para que el layout no cambie */
#byte-game-root .grun-foot {
  flex-shrink: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  justify-content: flex-end;
}


/* Botón SALTAR — grande, inconfundible */
#byte-game-root .gjump {
  width: 100%;
  padding: var(--s4);
  background: var(--y);
  color: var(--bg0);
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 3px;
  border: 2px solid var(--y);
  border-radius: var(--r4);
  flex-shrink: 0;
  min-height: 52px;
  font-weight: 700;
  animation: jump-glow 1.5s ease-in-out infinite;
  transition: background .1s, border-color .1s;
}
#byte-game-root .gjump:hover { background: #d4a900; border-color: #d4a900; animation: none; }
#byte-game-root .gjump:active { background: var(--c); border-color: var(--c); transform: scale(.98); animation: none; }


/* ============================================================
   NIVEL 02 — HERRAMIENTAS
   ============================================================ */
#byte-game-root .gl2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s4) var(--s5) var(--s4);
  gap: var(--s3);
  overflow: hidden;
}

/* L2: zona de respuestas + feedback scrolleable */
#byte-game-root .gl2-answers {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 260px;
  scrollbar-width: thin;
  scrollbar-color: var(--y) var(--bg2);
}


/* Tarjeta de herramienta — crece para llenar espacio */
#byte-game-root .gtool {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 20px;
  background: #1c1a35;
  border: 2px solid;
  border-radius: 12px;
  gap: 10px;
}
#byte-game-root .gtool svg { width: 44px; height: 44px; }

/* Nombre de la herramienta — WCAG: 16px mínimo para texto de lectura */
#byte-game-root .gtool-name {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}
#byte-game-root .gtool-q {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: #c4bff0;
  line-height: 1.6;
}


/* Opciones de respuesta — WCAG touch target 44px */
#byte-game-root .gopts { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
#byte-game-root .gopt {
  width: 100%;
  padding: 14px 18px;
  background: #1c1a35;
  border: 2px solid #4b4785;
  border-radius: 12px;
  /* Fuente legible — mínimo 16px para opciones de quiz */
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #f0eeff;
  text-align: left;
  transition: all .12s;
  min-height: 56px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Indicador de selección */
#byte-game-root .gopt::before {
  content: '[ ]';
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #8b87c4;
  flex-shrink: 0;
  line-height: 1;
}
#byte-game-root .gopt:hover:not(:disabled) {
  border-color: #00d4c8;
  background: rgba(0,212,200,.06);
  color: #f0eeff;
}
#byte-game-root .gopt:hover:not(:disabled)::before { content: '[▶]'; color: #00d4c8; }

/* Estado: correcto */
#byte-game-root .gopt.ok {
  border-color: #2ecc71;
  background: rgba(46,204,113,.08);
  color: #2ecc71;
}
#byte-game-root .gopt.ok::before { content: '[✓]'; color: #2ecc71; }

/* Estado: incorrecto */
#byte-game-root .gopt.bad {
  border-color: #ff6b6b;
  background: rgba(255,107,107,.08);
  color: #ff6b6b;
}
#byte-game-root .gopt.bad::before { content: '[✗]'; color: #ff6b6b; }
#byte-game-root .gopt:disabled { cursor: default; }


/* ============================================================
   NIVEL 03 — VERDADERO / FALSO
   ============================================================ */
#byte-game-root .gl3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 16px;
  gap: 12px;
  overflow: hidden;
}


/* Tarjeta de pregunta — crece y centra */
#byte-game-root .gqcard {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  background: #1c1a35;
  border: 2px solid #4b4785;
  border-radius: 12px;
  gap: 12px;
}
#byte-game-root .gq-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #8b87c4;
  flex-shrink: 0;
}

/* Texto de pregunta — 18px para lectura cómoda */
#byte-game-root .gq-text {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: #f0eeff;
  line-height: 1.7;
  font-weight: 500;
}
#byte-game-root .gq-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #8b87c4;
  flex-shrink: 0;
}


/* Botones Verdadero / Falso — GRANDES, inconfundibles */
#byte-game-root .gvf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex-shrink: 0;
}
#byte-game-root .gvf-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  border: 2px solid;
  border-radius: 12px;
  background: #1c1a35;
  /* Label — pixel font, legible */
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  transition: all .12s;
  /* Mínimo 80px de alto — touch target grande */
  min-height: 80px;
  cursor: pointer;
}

/* Icono grande para reconocimiento inmediato */
#byte-game-root .gvf-ico {
  font-size: 32px;
  line-height: 1;
  font-family: sans-serif; /* emojis/símbolos */
}
#byte-game-root .gvf-t { color: #2ecc71; border-color: rgba(46,204,113,.35); }
#byte-game-root .gvf-f { color: #ff6b6b; border-color: rgba(255,107,107,.35); }
#byte-game-root .gvf-t:hover:not(:disabled) { background: rgba(46,204,113,.1); border-color: #2ecc71; }
#byte-game-root .gvf-f:hover:not(:disabled) { background: rgba(255,107,107,.1); border-color: #ff6b6b; }
#byte-game-root .gvf-btn.ok { border-color: #2ecc71 !important; background: rgba(46,204,113,.12) !important; }
#byte-game-root .gvf-btn.bad { border-color: #ff6b6b !important; background: rgba(255,107,107,.12) !important; }
#byte-game-root .gvf-btn:disabled { cursor: default; }


/* ============================================================
   NIVEL 04 — DRAG & DROP
   ============================================================ */
#byte-game-root .gl4 { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 16px; gap: 12px; overflow: hidden; }


/* Pool de bloques para arrastrar */
#byte-game-root .gdpool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: #1c1a35;
  border: 1px dashed #4b4785;
  border-radius: 12px;
  min-height: 52px;
  flex-shrink: 0;
  align-content: flex-start;
}


/* Bloque arrastrable */
#byte-game-root .gdblock {
  padding: 8px 14px;
  background: #252248;
  border: 1px solid #4b4785;
  border-radius: 6px;
  /* Texto legible — 14px mínimo para elementos pequeños con contexto claro */
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #f0eeff;
  cursor: grab;
  user-select: none;
  transition: all .1s;
  /* Touch target mínimo */
  min-height: 36px;
  display: flex;
  align-items: center;
  line-height: 1.3;
}
#byte-game-root .gdblock:hover { border-color: #f5c400; color: #f5c400; }
#byte-game-root .gdblock.dragging { opacity: .4; cursor: grabbing; }
#byte-game-root .gdblock.sel { border-color: #f5c400; background: rgba(245,196,0,.12); color: #f5c400; box-shadow: 0 0 0 2px rgba(245,196,0,.35); }

/* Botón "Colocar aquí" — alternativa accesible al drag-and-drop */
#byte-game-root .gdcol-place {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border: 2px solid #f5c400;
  border-radius: 6px;
  background: rgba(245,196,0,.14);
  color: #f5c400;
  min-height: 36px;
  flex-shrink: 0;
}
#byte-game-root .gdcol-place:hover,
#byte-game-root .gdcol-place:focus-visible { background: rgba(245,196,0,.28); }

/* Botón "×" para devolver un bloque colocado a la bandeja */
#byte-game-root .gdplaced { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
#byte-game-root .gdplaced-rm {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: inherit;
  opacity: .7;
}
#byte-game-root .gdplaced-rm:hover { opacity: 1; }


/* Columnas de destino */
#byte-game-root .gdcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
#byte-game-root .gdcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: #1c1a35;
  border: 2px solid #312e5a;
  border-radius: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4b4785 transparent;
  transition: border-color .15s;
}
#byte-game-root .gdcol.over { border-color: #f5c400; background: rgba(245,196,0,.04); }
#byte-game-root .gdcol-good { border-color: rgba(46,204,113,.3); }
#byte-game-root .gdcol-bad { border-color: rgba(255,107,107,.3); }


/* Título de columna */
#byte-game-root .gdcol-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1px solid #312e5a;
  flex-shrink: 0;
  line-height: 1.6;
}
#byte-game-root .gdcol-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #8b87c4;
  text-align: center;
  margin-top: auto;
  padding-top: 12px;
  animation: blink 2s step-end infinite;
}


/* Bloque colocado */
#byte-game-root .gdplaced {
  padding: 8px 12px;
  border: 1px solid #4b4785;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #c4bff0;
  background: #252248;
  line-height: 1.4;
}
#byte-game-root .gdplaced.ok { border-color: #2ecc71; color: #2ecc71; background: rgba(46,204,113,.07); }
#byte-game-root .gdplaced.bad { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255,107,107,.07); }
#byte-game-root .gdplaced.neu { border-color: #4b4785; }

/* Explicación del error */
#byte-game-root .gdwhy {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.7;
  margin-top: 4px;
  opacity: .85;
  flex-basis: 100%;
}


/* ============================================================
   NIVEL COMPLETADO
   ============================================================ */
#byte-game-root .gdone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s6) var(--s7);
  text-align: center;
  gap: var(--s3);
  background: radial-gradient(ellipse 60% 50% at center, rgba(245,196,0,.05) 0%, transparent 65%);
}
#byte-game-root .gdone-byte { animation: float 3s ease-in-out infinite; }
#byte-game-root .gdone-check { font-size: 56px; line-height: 1; animation: pop .35s cubic-bezier(.36,.07,.19,.97); }
#byte-game-root .gdone-title { font-family: 'Press Start 2P', monospace; font-size: 13px; letter-spacing: 2px; color: #00d4c8; }
#byte-game-root .gdone-pts { font-family: 'Press Start 2P', monospace; font-size: 28px; color: #f5c400; }
#byte-game-root .gdone-pts small { font-size: 11px; color: #8b87c4; }
#byte-game-root .gdone-total { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #8b87c4; }
#byte-game-root .gdone-msg { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #c4bff0; line-height: 1.75; max-width: 420px; }


/* ============================================================
   NIVEL BONUS — ODS
   ============================================================ */
#byte-game-root .gods {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 16px;
  gap: 12px;
  overflow: hidden;
}

/* Zona scrolleable de ODS: opciones + feedback */
#byte-game-root .gods-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  scrollbar-width: thin;
  scrollbar-color: var(--y) var(--bg2);
  padding-bottom: var(--s2);
}
#byte-game-root .gods-prog { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
#byte-game-root .gods-track { flex: 1; height: 6px; background: #312e5a; border-radius: 3px; overflow: hidden; }
#byte-game-root .gods-fill { height: 100%; background: linear-gradient(90deg, #00d4c8, #f5c400); transition: width .4s; border-radius: 3px; }
#byte-game-root .gods-n { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #f5c400; white-space: nowrap; flex-shrink: 0; }
#byte-game-root .gods-card {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: 16px 20px;
  background: #1c1a35;
  border: 2px solid #4b4785;
  border-radius: 12px;
  flex-shrink: 0;
}
#byte-game-root .gods-card svg { width: 56px; height: 56px; border-radius: var(--r4); flex-shrink: 0; display: block; }
#byte-game-root .gods-num { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 2px; margin-bottom: 4px; }
#byte-game-root .gods-name { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #f0eeff; line-height: 1.35; }


/* ============================================================
   RESULTADOS
   ============================================================ */
#byte-game-root .gres { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#byte-game-root .gres-top {
  text-align: center;
  padding: var(--s4) var(--s6) var(--s3);
  flex-shrink: 0;
  background: radial-gradient(ellipse 60% 80% at center top, rgba(245,196,0,.07) 0%, transparent 60%);
}
#byte-game-root .gres-byte { display: flex; justify-content: center; margin-bottom: var(--s2); animation: float 3s ease-in-out infinite; }
#byte-game-root .gres-title { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #f5c400; letter-spacing: 4px; margin-bottom: 4px; }
#byte-game-root .gres-rank { font-family: 'Press Start 2P', monospace; font-size: 64px; line-height: 1; margin-bottom: 2px; animation: pop .5s ease-out; }
#byte-game-root .gres-pts { font-family: 'Press Start 2P', monospace; font-size: 34px; color: #f5c400; line-height: 1; }
#byte-game-root .gres-sub { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #8b87c4; letter-spacing: 2px; margin: var(--s2) 0 var(--s3); }
#byte-game-root .gres-bar { height: 8px; background: #312e5a; border-radius: 4px; overflow: hidden; }
#byte-game-root .gres-fill { height: 100%; border-radius: 4px; transition: width 1.2s cubic-bezier(.17,.67,.31,1.2); }
#byte-game-root .gres-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s3) var(--s6) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  scrollbar-width: thin;
  scrollbar-color: var(--y) var(--bg2);
}
#byte-game-root .gres-body::-webkit-scrollbar { width: 5px; }
#byte-game-root .gres-body::-webkit-scrollbar-thumb { background: var(--y); border-radius: 3px; }


/* Botones de resultado — siempre visibles al cargar */
#byte-game-root .gres-actions { display: flex; flex-direction: column; gap: var(--s2); }
#byte-game-root .gbonus {
  padding: var(--s4) var(--s5);
  background: rgba(245,196,0,.05);
  border: 1px solid #f5c400;
  border-radius: var(--r8);
}
#byte-game-root .gbonus-title { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #f5c400; margin-bottom: var(--s2); animation: blink .8s step-end infinite; }
#byte-game-root .gbonus-desc { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #c4bff0; line-height: 1.75; margin-bottom: var(--s3); }


/* Suite ESG */
#byte-game-root .gsuite { border-top: 1px solid #312e5a; padding-top: 16px; }
#byte-game-root .gsuite-title { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #f5c400; letter-spacing: 2px; margin-bottom: 4px; }
#byte-game-root .gsuite-sub { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #c4bff0; margin-bottom: var(--s3); }
#byte-game-root .gsuite-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
#byte-game-root .gsuite-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  background: #1c1a35; border: 1px solid;
  border-radius: 12px; text-decoration: none;
  transition: all .15s;
  overflow: hidden;
  min-width: 0;
}
#byte-game-root .gsuite-card:hover { background: #252248; transform: translateY(-2px); }
#byte-game-root .gsuite-card svg { width: 24px; height: 24px; flex-shrink: 0; }
#byte-game-root .gsuite-name { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; line-height: 1.3; }
#byte-game-root .gsuite-desc { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #c4bff0; line-height: 1.5; flex: 1; }
#byte-game-root .gsuite-btn { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; margin-top: 4px; }


/* ODS chips */
#byte-game-root .gods-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s2); }
#byte-game-root .gods-chip { width: 24px; height: 24px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 7px; color: #fff; font-weight: 700; }


/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes blink    { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes jump-glow{ 0%,100%{box-shadow:0 0 10px rgba(245,196,0,.2)} 50%{box-shadow:0 0 22px rgba(245,196,0,.45)} }
@keyframes cta-glow { 0%,100%{box-shadow:4px 4px 0 var(--o),0 0 16px rgba(245,196,0,.15)} 50%{box-shadow:2px 2px 0 var(--o)} }
@keyframes pop      { 0%{transform:scale(1.25);opacity:0} 100%{transform:scale(1);opacity:1} }


/* Reducir movimiento para usuarios con sensibilidad */
@media (prefers-reduced-motion: reduce) {#byte-game-root .gintro-byte, #byte-game-root .gdone-byte, #byte-game-root .gres-byte { animation: none !important; }
#byte-game-root .gcta, #byte-game-root .gjump, #byte-game-root .gpulse { animation: none !important; }
#byte-game-root * { transition-duration: .01ms !important; }

}


/* ============================================================
   RESPONSIVE — Mobile first
   ============================================================ */
@media (max-width: 700px) {#byte-game-root .gl2, #byte-game-root .gl3, #byte-game-root .gl4, #byte-game-root .grun, #byte-game-root .gods { padding: var(--s3) var(--s4) var(--s3); gap: var(--s2); }
#byte-game-root .glib { padding: 16px 16px 16px; gap: 10px; }
#byte-game-root .gcard { min-height: 150px; }
#byte-game-root .grun { padding: 10px 14px 12px; gap: 10px; }
#byte-game-root .grun-score { padding: 10px 14px; }
#byte-game-root .gcard-inner { min-height: 150px; }
#byte-game-root .gintro-hero { padding: var(--s4) var(--s5) var(--s3); }
#byte-game-root .gintro-h1 { font-size: 12px !important; }
#byte-game-root .gcta { font-size: 10px; padding: var(--s4) var(--s5); }
#byte-game-root .gres-top { padding: var(--s3) var(--s4) var(--s2); }
#byte-game-root .gres-body { padding: var(--s2) var(--s4) var(--s4); }
#byte-game-root .gres-rank { font-size: 48px !important; }
#byte-game-root .gres-pts { font-size: 26px !important; }
#byte-game-root .gvf-btn { min-height: 64px; font-size: 9px !important; }
#byte-game-root .gdcols { grid-template-columns: 1fr; }
#byte-game-root .gsuite-grid { grid-template-columns: 1fr 1fr; }
#byte-game-root .gpanel { padding: var(--s3) var(--s4); }

}
@media (max-width: 480px) {#byte-game-root .gsuite-grid { grid-template-columns: 1fr; }
#byte-game-root .gintro-lvl-name { display: none; }
#byte-game-root .gopt { font-size: 14px !important; }
#byte-game-root .gq-text { font-size: 15px !important; }
#byte-game-root .gvf-ico { font-size: 26px; }
#byte-game-root .gbtn { font-size: 9px; padding: var(--s3) var(--s4); min-height: 44px; }

}


/* ============================================================
   FIX WORDPRESS / ASTRA / ELEMENTOR
   Todos los estilos críticos con !important para ganar cascada
   ============================================================ */
#byte-game-root .gw { background: #0d0b18 !important; border: 2px solid #f5c400 !important; }
#byte-game-root .gh { background: #141228 !important; border-bottom: 1px solid #312e5a !important; }
#byte-game-root .gh-logo { color: #f5c400 !important; }
#byte-game-root .gh-logo span { color: #00d4c8 !important; }
#byte-game-root .gcta { background: #f5c400 !important; color: #0d0b18 !important; border-color: #f5c400 !important; }
#byte-game-root .gcta:hover { background: #d4a900 !important; border-color: #d4a900 !important; }
#byte-game-root .gbtn.pri { background: #f5c400 !important; color: #0d0b18 !important; border-color: #f5c400 !important; }
#byte-game-root .gbtn.pri:hover { background: #d4a900 !important; border-color: #d4a900 !important; color: #0d0b18 !important; }
#byte-game-root .gbtn.gho { background: transparent !important; color: #c4bff0 !important; border-color: #4b4785 !important; }
#byte-game-root .gbtn.gho:hover { border-color: #f5c400 !important; color: #f5c400 !important; }
#byte-game-root .gbtn.cyn { background: #00d4c8 !important; color: #0d0b18 !important; border-color: #00d4c8 !important; }
#byte-game-root .gjump { background: #f5c400 !important; color: #0d0b18 !important; border-color: #f5c400 !important; }
#byte-game-root .gjump:hover { background: #d4a900 !important; border-color: #d4a900 !important; }
#byte-game-root .gjump:active { background: #00d4c8 !important; border-color: #00d4c8 !important; }
#byte-game-root .gintro-h1 { color: #f5c400 !important; }
#byte-game-root .gintro-h1 em { color: #00d4c8 !important; }
#byte-game-root .gintro-desc { color: #f0eeff !important; }
#byte-game-root .gintro-sub { color: #00d4c8 !important; }
#byte-game-root .gcard-term { color: #f0eeff !important; }
#byte-game-root .gcard-def { color: #c4bff0 !important; }
#byte-game-root .gopt { background: #1c1a35 !important; color: #f0eeff !important; border-color: #4b4785 !important; }
#byte-game-root .gopt.ok { border-color: #2ecc71 !important; color: #2ecc71 !important; background: rgba(46,204,113,.08) !important; }
#byte-game-root .gopt.bad { border-color: #ff6b6b !important; color: #ff6b6b !important; background: rgba(255,107,107,.08) !important; }
#byte-game-root .gq-text { color: #f0eeff !important; }
#byte-game-root .gbyte-msg { color: #f0eeff !important; }
#byte-game-root .gfbk.ok { border-color: #2ecc71 !important; background: rgba(46,204,113,.08) !important; color: #f0eeff !important; }
#byte-game-root .gfbk.bad { border-color: #ff6b6b !important; background: rgba(255,107,107,.08) !important; color: #f0eeff !important; }
#byte-game-root .gfbk.warn { border-color: #fb923c !important; background: rgba(251,146,60,.08) !important; color: #f0eeff !important; }
#byte-game-root .gfbk.info { border-color: #f5c400 !important; background: rgba(245,196,0,.08) !important; color: #f0eeff !important; }
#byte-game-root .gres-title { color: #f5c400 !important; }
#byte-game-root .gres-pts { color: #f5c400 !important; }
#byte-game-root .gp-pts, #byte-game-root .gp-pts * { color: #f5c400 !important; }
#byte-game-root p, #byte-game-root h1, #byte-game-root h2, #byte-game-root h3, #byte-game-root li { max-width: none !important; }
#byte-game-root .entry-content #byte-game-root, #byte-game-root .elementor-widget-html #byte-game-root { padding-inline: 0 !important; margin-inline: 0 !important; }
#byte-game-root .elementor-widget-html .elementor-widget-container { padding: 0 !important; }
#byte-game-root img.emoji { width:1em !important; height:1em !important; display:inline !important; vertical-align:-.15em !important; margin:0 !important; padding:0 !important; border:none !important; box-shadow:none !important; }