/* ====================================================================
   El Dogma Central — estilos del minijuego, trasplantado desde
   html/assets/minijuegos/custom/dogma-central.html a su propia página
   del sitio (html/minijuegos/dogma-central.html).
   Todo queda bajo el selector #dogma-game para no chocar con el CSS
   del chrome del sitio (bs-base.css define .btn/.btn-primary, y
   otras hojas definen .hero); ver CLAUDE.md / brief de la tarea.
   ==================================================================== */
/* Paleta remapeada a las variables del sitio (bs-base.css): en tema oscuro y
   claro, #dogma-game hereda los mismos tokens que el resto de Aequorea.
   Las BASES (A/T/G/C/U) sí quedan fijas en los dos temas: son contenido
   educativo y el brandbook las define sin variante de tema. Los acentos de
   hebra (molde/nueva/arn) NO: son decorado y van por token, porque clavados
   en los hexes del tema oscuro quedaban lavados sobre pergamino. */
#dogma-game{
  --bg0:var(--bs-page-bg); --bg1:var(--bs-surface-0); --bg2:var(--bs-surface-1); --bg3:var(--soft-tone);
  --p0:var(--bs-primary); --p1:var(--bs-primary-1); --p2:var(--bs-primary-2);
  --c0:var(--bs-cold-0); --c1:#3771A1;
  --w0:#8D63D4; --w1:#6B47A6;
  --l0:var(--bs-life-0); --l1:var(--bs-life-1); --l2:var(--bs-life-2); --l3:var(--bs-life-3);
  --tx0:var(--bs-text-0); --tx1:var(--bs-text-1); --tx2:var(--bs-text-2);
  --bdr:var(--bs-border); --bdrS:#2A3F4A;
  /* Canales del acento para los rgba() de brillos y bordes. Estaban escritos
     a mano con los hexes del tema OSCURO, así que en claro salían halos cian
     sobre pergamino en vez de jade. */
  --p0rgb:59,206,185; --l0rgb:227,109,148; --l1rgb:53,196,130; --l2rgb:229,168,66;
  --scrim:rgba(4,13,20,.82);
  /* Bases: hexes del brandbook (identidad_visual/AequoreaBrandBook.jsx,
     fichas A/T/U/G/C). Uracilo estaba en #DF754A, que es el naranja de la
     hebra de ARN, no el ámbar del uracilo. */
  --A:#1A8070; --T:#C05060; --G:#2A6A8A; --C:#7040A8; --U:#B07010;
  --molde:var(--p1); --nueva:var(--w0); --arn:var(--l3);
  --disp:'Outfit',sans-serif; --body:'Lexend',sans-serif; --mono:'JetBrains Mono',monospace;
  /* Medidas de la hebra en un solo lugar: la casilla, el puente de hidrógeno y
     el marcador de la enzima TIENEN que medir lo mismo o la enzima queda
     corrida respecto a la base que está leyendo (pasaba en móvil: la casilla
     bajaba a 20 px y el marcador se quedaba en 28). El mínimo es 26 px porque
     la hebra desborda igual y hay scroll: achicar las letras no gana nada. */
  --tile:clamp(26px,4.8vw,30px); --tgap:clamp(3px,0.8vw,5px);

  font-family:var(--body); color:var(--tx0); line-height:1.5; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
/* Juego a contrarreloj: sin esto el navegador espera el doble toque para
   decidir si hacer zoom y cada tecla llega ~300 ms tarde. */
#dogma-game button, #dogma-game .mode-opt{touch-action:manipulation}
/* --c1, --w0, --w1 y --bdrS sí están en el brandbook, pero bs-base.css no los
   expone como tokens, así que la variante clara se declara aquí a mano. */
html[data-theme="light"] #dogma-game{
  /* Hexes de la paleta clara del brandbook, no aproximaciones a ojo. */
  --c1:#1E5070; --w0:#7040A8; --w1:#542E80; --bdrS:#A09878;
  --p0rgb:26,128,112; --l0rgb:192,80,96; --l1rgb:26,128,80; --l2rgb:176,112,16;
  --scrim:color-mix(in srgb, var(--tx0) 55%, transparent);
}

/* Reset local, acotado al juego (el reset global del sitio ya cubre
   el resto de la página) */
#dogma-game *{box-sizing:border-box;margin:0;padding:0}
#dogma-game #app{max-width:880px; margin:0 auto; padding:clamp(16px,4vw,32px) clamp(14px,4vw,28px) 48px;}
#dogma-game .brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:4px}
#dogma-game .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--p0);box-shadow:0 0 14px 2px rgba(var(--p0rgb),.7); flex:none}
#dogma-game .brand .word{font-family:var(--disp); font-size:22px; letter-spacing:.2px}
#dogma-game .brand .word b{font-weight:700}
#dogma-game .brand .word span{font-weight:400; opacity:.92}
/* fill-mode `backwards`, no `both`: con `both` la animación se queda "puesta"
   y el transform final (identidad) sigue computando distinto de `none`, lo que
   convierte a la pantalla en bloque contenedor de sus hijos position:fixed. Con
   eso la hoja del código genético se anclaba a #screen-play en vez de a la
   ventana y en teléfono salía descolocada y a medio tapar. El resultado visual
   es idéntico: el estado final de la animación ya era el estado natural. */
#dogma-game .screen{display:none; animation:fade .5s ease backwards}
#dogma-game .screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#dogma-game .dg-hero{text-align:center; padding:8px 0 4px}
#dogma-game .dg-hero h1{font-family:var(--disp); font-weight:600; font-size:clamp(30px,7vw,52px); line-height:1.05; letter-spacing:-.5px; margin:18px 0 6px}
#dogma-game .dg-hero h1 em{font-style:normal; color:var(--p0); text-shadow:0 0 28px rgba(var(--p0rgb),.45)}
#dogma-game .dg-hero .lede{color:var(--tx1); max-width:48ch; margin:0 auto; font-size:clamp(14px,2.4vw,16px)}
#dogma-game .helix{display:block; margin:6px auto 2px; width:min(280px,72vw); height:120px}
#dogma-game .steps{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:26px 0 22px}
#dogma-game .step-chip{display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--bdr); border-radius:14px; background:var(--bg2)}
#dogma-game .step-chip .n{font-family:var(--mono); font-size:12px; color:var(--bg0); font-weight:700; width:22px;height:22px;border-radius:7px; display:grid;place-items:center}
#dogma-game .step-chip .lbl{font-family:var(--disp); font-weight:500; font-size:14px}
#dogma-game .step-chip .sub{display:block;font-family:var(--body);font-size:11px;color:var(--tx2);font-weight:400}
#dogma-game .panel{background:var(--bg1); border:1px solid var(--bdr); border-radius:16px; padding:16px 20px; max-width:560px; margin:0 auto 18px}
#dogma-game .howto h3{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--p0); margin-bottom:10px; letter-spacing:.3px}
#dogma-game .howto ul{list-style:none; display:grid; gap:9px}
#dogma-game .howto li{position:relative; padding-left:18px; font-size:13.5px; color:var(--tx1); line-height:1.5}
#dogma-game .howto li::before{content:'›'; color:var(--p0); font-weight:700; position:absolute; left:0; top:0}
#dogma-game .howto li b{color:var(--tx0); font-weight:600}
#dogma-game .dg-btn{font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:.3px; border:none; cursor:pointer; border-radius:14px; padding:15px 30px; transition:transform .15s, box-shadow .25s, background .2s}
#dogma-game .dg-btn:focus-visible{outline:3px solid var(--p0); outline-offset:3px}
#dogma-game .dg-btn:active{transform:scale(.98)}
#dogma-game .dg-btn-primary{background:linear-gradient(135deg,var(--p0),var(--p1)); color:var(--bs-btn-primary-fg,#040D14); box-shadow:0 8px 30px -8px rgba(var(--p0rgb),.55)}
#dogma-game .dg-btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 38px -8px rgba(var(--p0rgb),.7)}
#dogma-game .center{text-align:center}
#dogma-game .hud{display:flex; gap:10px; justify-content:space-between; align-items:stretch; background:var(--bg1); border:1px solid var(--bdr); border-radius:14px; padding:10px 8px; margin:10px 0 18px}
#dogma-game .hud .cell{flex:1; text-align:center; padding:2px 4px}
#dogma-game .hud .cell + .cell{border-left:1px solid var(--bdr)}
#dogma-game .hud .k{font-family:var(--body); font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--tx2)}
#dogma-game .hud .v{font-family:var(--mono); font-weight:700; font-size:clamp(16px,4vw,20px); color:var(--tx0); margin-top:2px}
#dogma-game .hud .v.combo{color:var(--l2)}
#dogma-game .hud .v.pts{color:var(--p0)}
#dogma-game .prog{display:flex; gap:8px; margin-bottom:14px}
#dogma-game .prog .seg{flex:1; height:5px; border-radius:99px; background:var(--bdr); overflow:hidden}
#dogma-game .prog .seg i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--p1),var(--p0)); transition:width .4s ease}
#dogma-game .stage-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px}
#dogma-game .stage-head .idx{font-family:var(--mono); font-size:12px; color:var(--tx2)}
#dogma-game .stage-head h2{font-family:var(--disp); font-weight:600; font-size:clamp(20px,5vw,26px)}
#dogma-game .enzyme{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--p0); background:rgba(var(--p0rgb),.08); border:1px solid rgba(var(--p0rgb),.25); padding:3px 9px; border-radius:99px}
#dogma-game .enzyme .pulse{width:7px;height:7px;border-radius:50%;background:var(--p0); animation:pls 1.4s ease-in-out infinite}
@keyframes pls{0%,100%{box-shadow:0 0 0 0 rgba(var(--p0rgb),.6)}50%{box-shadow:0 0 0 6px rgba(var(--p0rgb),0)}}
#dogma-game .diff-chip{font-family:var(--body); font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--l3); border:1px solid var(--l3); padding:2px 9px; border-radius:99px}
#dogma-game .hint{color:var(--tx1); font-size:13.5px; margin:6px 0 18px}
#dogma-game .hint b{color:var(--tx0); font-weight:500}
#dogma-game .board{background:var(--bg1); border:1px solid var(--bdr); border-radius:18px; padding:clamp(14px,4vw,24px) clamp(12px,3vw,20px); margin-bottom:18px; overflow:visible}
#dogma-game .row-label{font-family:var(--body); font-size:11px; text-transform:uppercase; letter-spacing:1.3px; color:var(--tx2); margin-bottom:9px; display:flex; align-items:center; gap:8px}
#dogma-game .row-label .swatch{width:22px;height:3px;border-radius:99px}
/* Direcciones 3'/5' de las cadenas */
#dogma-game .strand-row{display:flex; align-items:center; gap:8px; width:max-content; margin-inline:auto}
#dogma-game .dir-end{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--tx2); flex:none; width:24px; text-align:center; letter-spacing:.5px}
/* La hebra desborda a lo ancho en móvil (21 bases). Sin esto los marcadores
   3′/5′ se van con el scroll y se pierde de vista para dónde corre la cadena,
   que es justo lo que la etapa enseña. Se quedan pegados a los bordes y las
   casillas pasan por debajo. z-index 4 para ganarle al marcador de la enzima. */
#dogma-game .strand-row > .dir-end:first-child{position:sticky; left:0; z-index:4; background:var(--bg1)}
#dogma-game .strand-row > .dir-end:last-child{position:sticky; right:0; z-index:4; background:var(--bg1)}
#dogma-game .dir-end.r5{color:var(--molde)}
#dogma-game .dir-end.r3{color:var(--molde)}
#dogma-game .dir-end.b5, #dogma-game .dir-end.b3{color:var(--tx1)}
#dogma-game .dir-arrow{font-family:var(--mono); font-size:10px; color:var(--tx2); text-align:center; letter-spacing:1px; margin:2px 0 0}
#dogma-game .dir-note{font-family:var(--mono); font-size:10.5px; color:var(--tx2); text-align:center; margin:8px 0 2px; letter-spacing:.5px}
#dogma-game .dir-note b{color:var(--tx1)}
/* overscroll-behavior-x:contain evita que al llegar al final de la hebra el
   gesto se lo coma el navegador y dispare el "atrás" por deslizamiento. */
#dogma-game .strand-scroll{max-width:100%; overflow-x:auto; overflow-y:hidden; margin-inline:auto; padding:46px 0 4px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
/* La barra de scroll seguía el tema del SISTEMA, no el del sitio: el
   <meta color-scheme="dark light"> deja que el navegador elija, y el toggle
   de Aequorea no le dice nada. Declarando color-scheme por data-theme la
   barra obedece al sitio. Se pinta también el riel (antes solo el pulgar) y
   se añade scrollbar-color para Firefox, que ignora los ::-webkit-. */
html[data-theme="dark"] #dogma-game{ color-scheme:dark }
html[data-theme="light"] #dogma-game{ color-scheme:light }
#dogma-game .strand-scroll{scrollbar-width:thin; scrollbar-color:var(--bdrS) var(--bg2)}
#dogma-game .strand-scroll::-webkit-scrollbar{height:8px}
#dogma-game .strand-scroll::-webkit-scrollbar-track{background:var(--bg2); border-radius:99px}
#dogma-game .strand-scroll::-webkit-scrollbar-thumb{background:var(--bdrS); border-radius:99px; border:2px solid var(--bg2)}
#dogma-game .strand-scroll::-webkit-scrollbar-thumb:hover{background:var(--p0)}
#dogma-game .strand{display:flex; gap:var(--tgap); flex-wrap:nowrap; width:max-content; margin-inline:auto}
#dogma-game .strand.codon-grouped{gap:var(--tgap)}
#dogma-game .codon-gap{width:clamp(8px,1.6vw,12px); flex:none}
#dogma-game .tile{
  --sz:var(--tile);
  width:var(--sz); height:var(--sz); flex:none; border-radius:9px;
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:calc(var(--sz)*.5);
  color:var(--tx0); position:relative; transition:transform .2s, box-shadow .25s, opacity .2s;
}
#dogma-game .tile.read{background:var(--bg3); border:1px solid var(--bdrS); color:var(--tx1)}
#dogma-game .tile.read.active{border-color:var(--p0); color:var(--tx0); box-shadow:0 0 0 2px rgba(var(--p0rgb),.35), 0 0 18px -2px rgba(var(--p0rgb),.6)}
#dogma-game .tile.empty{background:transparent; border:1.5px dashed var(--bdrS); color:var(--tx2)}
#dogma-game .tile.filled{animation:snap .35s cubic-bezier(.2,1.3,.4,1) both}
@keyframes snap{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
#dogma-game .tile[data-b="A"]{background:var(--A)}
#dogma-game .tile[data-b="T"]{background:var(--T)}
#dogma-game .tile[data-b="G"]{background:var(--G)}
#dogma-game .tile[data-b="C"]{background:var(--C)}
#dogma-game .tile[data-b="U"]{background:var(--U)}
#dogma-game .tile[data-b]{color:#EBF2F0}
#dogma-game .tile.lit{box-shadow:0 0 14px -3px currentColor}
#dogma-game .tile.codon-active{box-shadow:0 0 0 2px rgba(var(--p0rgb),.5), 0 0 18px -2px rgba(var(--p0rgb),.55); transform:translateY(-2px)}
#dogma-game .bonds{display:flex; gap:var(--tgap); width:max-content; margin:6px auto; height:14px}
#dogma-game .bond{width:var(--tile); display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; opacity:0; transition:opacity .3s}
#dogma-game .bond.show{opacity:.5}
#dogma-game .bond i{width:2px; height:4px; background:var(--tx2); border-radius:2px}
#dogma-game .peptide{display:flex; gap:0; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:6px; min-height:44px}
#dogma-game .aa-bead{display:flex; align-items:center; gap:0}
#dogma-game .aa-bead .ball{padding:7px 12px; border-radius:99px; font-family:var(--disp); font-weight:600; font-size:12.5px; color:var(--bs-btn-primary-fg,#040D14); background:linear-gradient(135deg,var(--l1),var(--p1)); box-shadow:0 0 14px -3px rgba(var(--l1rgb),.6); animation:snap .35s cubic-bezier(.2,1.3,.4,1) both; white-space:nowrap}
#dogma-game .aa-bead.stop .ball{background:linear-gradient(135deg,var(--l0),var(--w0)); color:var(--tx0)}
#dogma-game .aa-bead .link{width:12px; height:3px; background:var(--bdrS); border-radius:2px}
#dogma-game .peptide-empty{color:var(--tx2); font-size:13px; font-style:italic}
#dogma-game .controls{margin-top:4px}
#dogma-game .prompt{text-align:center; color:var(--tx1); font-size:13.5px; margin:10px 0 14px}
#dogma-game .prompt b{color:var(--tx0)}
#dogma-game .prompt .cod{font-family:var(--mono); color:var(--arn); font-size:1.15em}
#dogma-game .keys{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
#dogma-game .key{
  font-family:var(--mono); font-weight:700; font-size:22px; color:var(--tx0);
  width:clamp(56px,15vw,72px); height:clamp(56px,15vw,72px); border-radius:16px;
  border:1.5px solid transparent; cursor:pointer; position:relative;
  transition:transform .12s, box-shadow .22s, filter .2s; background:var(--bg3);
}
#dogma-game .key[data-b="A"]{background:var(--A)}
#dogma-game .key[data-b="T"]{background:var(--T)}
#dogma-game .key[data-b="G"]{background:var(--G)}
#dogma-game .key[data-b="C"]{background:var(--C)}
#dogma-game .key[data-b="U"]{background:var(--U)}
#dogma-game .key[data-b]{color:#EBF2F0}
#dogma-game .key:hover{transform:translateY(-3px); box-shadow:0 10px 26px -10px rgba(0,0,0,.6), 0 0 22px -6px currentColor}
#dogma-game .key:focus-visible{outline:3px solid var(--p0); outline-offset:3px}
/* En pantalla táctil no hay :hover, así que sin :active la tecla no acusa
   recibo hasta que llega el .right/.wrong del juego. */
#dogma-game .key:active{transform:scale(.94); box-shadow:0 0 22px -6px currentColor}
#dogma-game .key.wrong{animation:shake .4s; box-shadow:0 0 0 2px var(--l0), 0 0 18px -2px var(--l0)}
#dogma-game .key.right{box-shadow:0 0 0 2px var(--l1), 0 0 22px -2px var(--l1)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
#dogma-game .aa-keys{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:480px; margin:0 auto}
#dogma-game .aa-key{font-family:var(--disp); font-weight:500; font-size:14.5px; color:var(--tx0); background:var(--bg3); border:1.5px solid var(--bdrS); border-radius:14px; padding:13px 12px; cursor:pointer; text-align:center; transition:transform .12s, box-shadow .22s, border-color .2s}
#dogma-game .aa-key small{display:block; font-family:var(--mono); font-size:11px; color:var(--tx2); margin-top:3px}
#dogma-game .aa-key:hover{transform:translateY(-3px); border-color:var(--p0); box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
#dogma-game .aa-key:focus-visible{outline:3px solid var(--p0); outline-offset:3px}
#dogma-game .aa-key:active{transform:scale(.97); border-color:var(--p0)}
#dogma-game .aa-key.wrong{animation:shake .4s; border-color:var(--l0); box-shadow:0 0 18px -4px var(--l0)}
#dogma-game .aa-key.right{border-color:var(--l1); box-shadow:0 0 22px -4px var(--l1)}
/* Modo difícil: escritura */
#dogma-game .aa-input-wrap{max-width:380px; margin:0 auto; text-align:center}
#dogma-game .aa-input{font-family:var(--mono); font-weight:500; font-size:22px; text-align:center; color:var(--tx0); background:var(--bg3); border:1.5px solid var(--bdrS); border-radius:14px; padding:14px 16px; width:100%; letter-spacing:1px; text-transform:capitalize}
#dogma-game .aa-input::placeholder{text-transform:none; color:var(--tx2); font-size:15px; letter-spacing:0}
#dogma-game .aa-input:focus{outline:none; border-color:var(--p0); box-shadow:0 0 18px -4px var(--p0)}
#dogma-game .aa-input.wrong{border-color:var(--l0); animation:shake .4s; box-shadow:0 0 18px -4px var(--l0)}
#dogma-game .aa-submit{margin-top:10px; width:100%}
#dogma-game .aa-hint{color:var(--tx2); font-size:12px; margin-top:10px; line-height:1.5}
/* ── Código genético (rueda de codones) ─────────────────────────────────
   La rueda ya no vive dentro de .board: metía ~600 px entre el ARNm y los
   botones de respuesta y dejaba los controles fuera de pantalla. Ahora es
   #coderef, hermano de .board/.controls dentro de .playgrid:
     · ≥1000 px → segunda columna, sticky, siempre visible junto a la pregunta
     · <1000 px → botón que abre una hoja a pantalla completa
   ------------------------------------------------------------------- */
#dogma-game .playmain{min-width:0}
#dogma-game .coderef-col:empty{display:none}
#dogma-game .code-legend{padding:0 4px 8px; font-size:11.5px; color:var(--tx2); display:flex; gap:14px; flex-wrap:wrap}
#dogma-game .code-legend span{display:inline-flex; align-items:center; gap:5px}
#dogma-game .code-legend i{width:11px;height:11px;border-radius:3px;display:inline-block; flex:none}
#dogma-game .cr-card{border:1px solid var(--bdr); border-radius:14px; background:var(--bg2); padding:12px 14px 14px}
#dogma-game .cr-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px}
#dogma-game .cr-title{font-family:var(--disp); font-weight:600; font-size:13.5px; color:var(--p0); flex:1; min-width:0}
#dogma-game .cr-cur{font-family:var(--body); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--tx2); flex:none}
#dogma-game .cr-cur b{font-family:var(--mono); font-size:14px; letter-spacing:.5px; color:var(--arn); text-transform:none; margin-left:5px}
#dogma-game .cr-pan{overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--bdrS) var(--bg2)}
#dogma-game .cr-pan::-webkit-scrollbar{width:8px;height:8px}
#dogma-game .cr-pan::-webkit-scrollbar-thumb{background:var(--bdrS); border-radius:99px}
#dogma-game .wheel-svg{display:block; margin:0 auto; width:100%; height:auto; overflow:hidden}
/* ── Colores de la rueda ──
   Traía una paleta propia (U morado, C azul, A naranja, G verde) que no era
   la de las bases: la misma letra salía de un color en la hebra y de otro en
   la rueda, en la misma pantalla. Ahora hereda los tokens A/T/G/C/U, que son
   los del brandbook (identidad_visual/AequoreaBrandBook.jsx, fichas de
   bases). El anillo de aminoácidos era #fff fijo con texto #1A3040: blanco
   puro está prohibido por el brandbook y encima ignoraba el tema. */
#dogma-game .wheel-svg{
  --w-sep:var(--bg1);          /* separadores entre sectores */
  --w-on-base:#EBF2F0;         /* Blanco Salino sobre las bases, no #fff */
  --w-aa:var(--bg2);           /* fondo del anillo de aminoácidos */
}
#dogma-game .wheel-svg .b-A{fill:var(--A)}
#dogma-game .wheel-svg .b-U{fill:var(--U)}
#dogma-game .wheel-svg .b-G{fill:var(--G)}
#dogma-game .wheel-svg .b-C{fill:var(--C)}
#dogma-game .wheel-svg .seg{stroke:var(--w-sep)}
#dogma-game .wheel-svg .r1{stroke-width:2}
#dogma-game .wheel-svg .r2{stroke-width:1.5}
#dogma-game .wheel-svg .r3{stroke-width:.8}
#dogma-game .wheel-svg .blbl{fill:var(--w-on-base)}
#dogma-game .wheel-svg .aa{fill:var(--w-aa); stroke:var(--bdr); stroke-width:.6}
#dogma-game .wheel-svg .aa.start{fill:color-mix(in srgb, var(--l1) 26%, var(--w-aa))}
#dogma-game .wheel-svg .aa.stop{fill:color-mix(in srgb, var(--l0) 24%, var(--w-aa))}
#dogma-game .wheel-svg .aa-nm{fill:var(--tx0)}
#dogma-game .wheel-svg .aa-cd{fill:var(--tx2)}
#dogma-game .wheel-svg .aa-nm.start, #dogma-game .wheel-svg .aa-cd.start{fill:var(--l1)}
#dogma-game .wheel-svg .aa-nm.stop, #dogma-game .wheel-svg .aa-cd.stop{fill:var(--l0)}
#dogma-game .wheel-svg .hub{fill:var(--bg3); stroke:var(--bdrS); stroke-width:1}
#dogma-game .wheel-svg .hub-t{fill:var(--tx0)}
/* Las muestras de la leyenda usan la misma mezcla que los sectores */
#dogma-game .code-legend i.lg-start{background:color-mix(in srgb, var(--l1) 26%, var(--bg2)); box-shadow:inset 0 0 0 1px var(--l1)}
#dogma-game .code-legend i.lg-stop{background:color-mix(in srgb, var(--l0) 24%, var(--bg2)); box-shadow:inset 0 0 0 1px var(--l0)}
/* Zoom al cuarto activo. Se anima el transform de un <g> (el atributo viewBox
   no se puede transicionar) y el recorte lo hace el propio <svg>.
   transform-box:view-box es obligatorio: sin él el origen del transform es la
   caja del propio <g>, no el (0,0) del viewBox, y el encuadre sale corrido. */
#dogma-game .wheel-zoom{transform-box:view-box; transform-origin:0 0; transition:transform .5s cubic-bezier(.3,1,.5,1)}
/* Guía del codón activo: se atenúan los cuadrantes de 1ª base que no son el
   del codón en curso. Orienta sin dar la respuesta (quedan 16 codones). */
#dogma-game .wheel-svg .qg{transition:opacity .3s ease}
#dogma-game .wheel-svg[data-q="0"] .qg:not(.q0),
#dogma-game .wheel-svg[data-q="1"] .qg:not(.q1),
#dogma-game .wheel-svg[data-q="2"] .qg:not(.q2),
#dogma-game .wheel-svg[data-q="3"] .qg:not(.q3){opacity:.22}

#dogma-game .cr-zoom{font-family:var(--body); font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--tx1); background:var(--bg3); border:1px solid var(--bdrS); border-radius:99px; padding:4px 11px; cursor:pointer; flex:none; transition:border-color .2s, color .2s}
#dogma-game .cr-zoom:hover{border-color:var(--p0); color:var(--tx0)}
#dogma-game .cr-zoom:focus-visible{outline:2px solid var(--p0); outline-offset:2px}

/* Botón y cierre: solo existen en la variante hoja (móvil/tablet) */
#dogma-game .cr-open{display:none}
#dogma-game .cr-close{display:none}

/* ── Escritorio ancho: la rueda es la columna derecha ──
   #app se ensancha 880 → 1280 solo en traducción, para que la rueda quepa a
   ~540 px (lo que medía antes) SIN robarle ancho al tablero. */
@media (min-width:1080px){
  #dogma-game #app.trad{max-width:1280px}
  #dogma-game #app.trad .playgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:24px; align-items:start}
  #dogma-game #app.trad .coderef-col{position:sticky; top:14px}
  #dogma-game #app.trad .cr-card{max-height:calc(100vh - 28px); display:flex; flex-direction:column}
  #dogma-game #app.trad .cr-pan{flex:1; min-height:0}
  #dogma-game .wheel-svg{max-width:620px}
}

/* ── Angosto: hoja a pantalla completa ──
   La rueda NO se encoge al ancho del teléfono: con viewBox 600 las etiquetas
   quedarían en ~6 px. Se dibuja a 560 px dentro de .cr-pan, que panea, y al
   abrir se centra en el cuadrante del codón activo. */
@media (max-width:1079.98px){
  #dogma-game .cr-open{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; max-width:480px; margin:16px auto 0; font-size:14.5px; padding:13px 20px; background:var(--bg3); color:var(--tx0); border:1.5px solid var(--bdrS)}
  #dogma-game .cr-open:hover{border-color:var(--p0)}
  #dogma-game .cr-open .ico{color:var(--p0); font-size:16px}
  /* Con la hoja abierta el mismo botón la cierra, y se ancla al pie por encima
     del scrim: si se quedara en su sitio del documento la hoja lo taparía y
     "dejar de ver" sería una etiqueta que nadie puede tocar. */
  #dogma-game .cr-open.open{position:fixed; z-index:1305; left:50%; transform:translateX(-50%);
    bottom:calc(14px + env(safe-area-inset-bottom,0px)); width:calc(100% - 28px); max-width:420px; margin:0;
    background:var(--bg1); border-color:var(--p0); box-shadow:0 12px 34px -10px rgba(0,0,0,.75)}
  #dogma-game .cr-open.open .ico{transform:rotate(45deg)}
  /* la hoja se aparta para no quedar debajo del botón fijo */
  #dogma-game .cr-panel.open{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  /* z-index 1300: el <header> del sitio es sticky con z-index 999, así que con
     55 la hoja salía DEBAJO de la barra de navegación — tapaba el título, el
     botón de zoom y la ✕ de cerrar, que además no se podían tocar.
     height:100dvh además de inset:0: en móvil el inset se resuelve contra el
     viewport grande y el borde de abajo quedaba tras la barra del navegador. */
  #dogma-game .cr-panel{position:fixed; inset:0; height:100dvh; z-index:1300; display:none; padding:10px calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px)); background:var(--scrim); backdrop-filter:blur(3px)}
  #dogma-game .cr-panel.open{display:flex; align-items:stretch; justify-content:center}
  #dogma-game .cr-panel .cr-card{display:flex; flex-direction:column; width:100%; max-width:700px; max-height:100%; min-height:0; background:var(--bg1); box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
  #dogma-game .cr-close{display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px; border:1px solid var(--bdrS); background:var(--bg3); color:var(--tx1); font-size:15px; cursor:pointer; line-height:1}
  #dogma-game .cr-close:hover{border-color:var(--p0); color:var(--tx0)}
  #dogma-game .cr-panel .cr-head{flex:none}
  #dogma-game .cr-panel .code-legend{flex:none}
  #dogma-game .cr-panel .cr-pan{flex:1; min-height:0}
  /* Sin zoom la rueda entera no cabe legible en un teléfono: se dibuja a
     560 px y se panea. Acercada al cuadrante ya cabe al ancho de pantalla. */
  #dogma-game .cr-panel .wheel-svg{width:560px; max-width:none; margin:0}
  /* Acercada: se le da la caja entera de .cr-pan y encaja sola por el viewBox
     (preserveAspectRatio meet la centra sin deformar). Antes se calculaba a
     mano con calc(100dvh - 150px), que ignora el alto real de la cabecera y de
     la leyenda: con la leyenda en tres líneas la rueda se salía por abajo. */
  #dogma-game .cr-panel .wheel-svg.zoomed{width:100%; height:100%; max-width:none; margin:0}
}
/* La hoja ocupa la pantalla: mientras está abierta, la página de atrás no debe
   moverse al arrastrar (arrastrabas sobre el scrim y scrolleaba el juego). */
body.cr-lock{overflow:hidden}
/* <main> y <footer> del sitio son ambos position:relative con z-index:1, así que
   crean contexto de apilamiento y el footer, por ir después, se pinta ENCIMA de
   todo lo que vive dentro de main — incluidas las hojas y carteles a pantalla
   completa del juego, por muy alto que sea su z-index. Mientras hay uno abierto
   se sube main por encima (también del header sticky, que está en 999); fuera de
   ahí se deja como estaba para no romper el header. */
body.dg-modal main{z-index:1000}
/* Teléfono: la cabecera de la hoja tenía 4 elementos y se partía en tres
   líneas, comiéndose el alto de la rueda. El título es redundante — el botón
   que abre la hoja ya dice "Ver el código genético". */
@media (max-width:560px){
  #dogma-game .cr-panel .cr-title{display:none}
  #dogma-game .cr-panel .cr-head{flex-wrap:nowrap; gap:8px; margin-bottom:7px}
  #dogma-game .cr-panel .cr-cur{flex:1; min-width:0; font-size:10px}
  #dogma-game .cr-panel .cr-zoom{padding:4px 9px; font-size:10px}
  #dogma-game .cr-panel .code-legend{gap:9px; font-size:10.5px; padding-bottom:6px}
  #dogma-game .cr-panel .cr-card{padding:10px 11px 11px}
}
/* max-width + text-align: los avisos largos ("El uracilo no existe en el ADN ·
   −fidelidad") se salían de la pantalla del teléfono. El safe-area lo despega
   de la barra de gestos. */
#dogma-game .toast{position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom,0px)); max-width:min(92vw,420px); text-align:center; transform:translateX(-50%) translateY(20px); background:var(--bg3); border:1px solid var(--bdrS); color:var(--tx0); padding:11px 20px; border-radius:99px; font-family:var(--disp); font-weight:500; font-size:14px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:50}
#dogma-game .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#dogma-game .toast.ok{border-color:rgba(var(--l1rgb),.5)}
#dogma-game .toast.bad{border-color:rgba(var(--l0rgb),.5)}
/* Final */
#dogma-game .endcard{text-align:center; padding:8px 0}
#dogma-game .rank{font-family:var(--disp); font-weight:300; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--tx2)}
#dogma-game .rank-name{font-family:var(--disp); font-weight:600; font-size:clamp(24px,6vw,38px); color:var(--p0); text-shadow:0 0 30px rgba(var(--p0rgb),.4); margin:6px 0 4px}
#dogma-game .finalscore{font-family:var(--mono); font-weight:700; font-size:clamp(44px,12vw,80px); line-height:1; color:var(--tx0); margin:12px 0}
#dogma-game .finalscore .u{font-size:.32em; color:var(--tx2); font-weight:400; letter-spacing:2px; display:block; margin-top:6px}
#dogma-game .peptide-final{margin:18px auto; display:flex; gap:0; align-items:center; justify-content:center; flex-wrap:wrap}
#dogma-game .breakdown{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; max-width:580px; margin:24px auto; text-align:left}
#dogma-game .bd-item{background:var(--bg1); border:1px solid var(--bdr); border-radius:12px; padding:13px 15px}
#dogma-game .bd-item .k{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--tx2)}
#dogma-game .bd-item .v{font-family:var(--mono); font-weight:700; font-size:20px; margin-top:3px}
#dogma-game .bd-item.hl .v{color:var(--l2)}
#dogma-game .bd-item.hard .v{color:var(--l3)}
#dogma-game .best{font-size:13px; color:var(--tx1); margin:6px 0 4px}
#dogma-game .best b{color:var(--p0); font-family:var(--mono)}
/* Borrado de datos: el botón vive plegado dentro del código de jugador y hay
   que tocarlo dos veces. En rojo, porque es el único botón del juego que
   destruye algo. */
#dogma-game .lb-wipe-txt{font-size:11.5px; color:var(--tx2); line-height:1.5; margin:12px 0 8px}
#dogma-game .lb-wipe{border-color:var(--l0); color:var(--l0); background:transparent}
#dogma-game .lb-wipe:hover{background:color-mix(in srgb, var(--l0) 12%, transparent)}
#dogma-game .lb-wipe.armed{background:var(--l0); color:var(--bs-btn-primary-fg,#040D14); font-weight:600}

/* ── Tarjeta para compartir ──
   Vive en su propia capa, abierta desde el botón del final: la pantalla de
   resultado ya enseña rango, puntaje y proteína, y repetirlo todo debajo
   sobraba. El <canvas> se dibuja a 1080×1080 y se muestra escalado: es a la
   vez la vista previa y el PNG que sale al compartir o descargar. */
#dogma-game .share-overlay{position:fixed; inset:0; z-index:1315; display:none; place-items:center;
  background:var(--scrim); backdrop-filter:blur(3px); animation:fade .3s both;
  padding:16px calc(16px + env(safe-area-inset-right,0px)) 16px calc(16px + env(safe-area-inset-left,0px));
  overflow:auto}
#dogma-game .share-overlay.show{display:grid}
#dogma-game .share-sheet{position:relative; width:min(420px,100%); max-height:92dvh; overflow:auto;
  text-align:center; background:var(--bg1); border:1px solid var(--bdr); border-radius:20px;
  padding:22px 20px 20px; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); animation:si-in .22s ease-out both}
#dogma-game .share-sheet h3{font-family:var(--disp); font-weight:600; font-size:17px; color:var(--p0); margin-bottom:14px}
#dogma-game .share-close{position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--bdr); background:var(--bg2); color:var(--tx1); font-size:20px; line-height:1;
  cursor:pointer; transition:color .2s ease, border-color .2s ease}
#dogma-game .share-close:hover{color:var(--p0); border-color:var(--p0)}
#dogma-game .share-card{display:block; width:100%; max-width:330px; height:auto; margin:0 auto 16px;
  border-radius:18px; border:1px solid var(--bdr); box-shadow:0 22px 46px -26px rgba(0,0,0,.95)}
#dogma-game .share-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
#dogma-game .share-nets{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}
#dogma-game .share-net{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--bdr); background:var(--bg2); color:var(--tx1); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, transform .2s ease}
#dogma-game .share-net:hover{color:var(--p0); border-color:var(--p0); transform:translateY(-2px)}
#dogma-game .share-net svg{width:18px; height:18px; fill:currentColor}
#dogma-game .share-hint{font-size:12px; color:var(--tx2); margin-top:12px; line-height:1.5}

/* Leaderboard */
#dogma-game .lb{max-width:560px; margin:24px auto 0; text-align:left}
#dogma-game .lb h3{font-family:var(--disp); font-weight:600; font-size:17px; color:var(--p0); text-align:center; margin-bottom:14px}
#dogma-game .lb-save{display:flex; gap:8px; margin-bottom:14px}
#dogma-game .lb-save input{flex:1; min-width:0; font-family:var(--body); font-size:16px; color:var(--tx0); background:var(--bg2); border:1px solid var(--bdrS); border-radius:11px; padding:12px 13px}
#dogma-game .lb-save input:focus{outline:none; border-color:var(--p0)}
#dogma-game .lb-saved{text-align:center; color:var(--l1); font-size:13px; margin-bottom:12px; font-family:var(--disp); font-weight:500}
#dogma-game .lb-list{display:flex; flex-direction:column; gap:6px}
#dogma-game .lb-row{display:grid; grid-template-columns:30px 1fr auto auto; gap:10px; align-items:center; background:var(--bg1); border:1px solid var(--bdr); border-radius:10px; padding:9px 13px}
#dogma-game .lb-row.me{border-color:var(--p0); box-shadow:0 0 16px -5px var(--p0)}
#dogma-game .lb-row .pos{font-family:var(--mono); font-weight:700; color:var(--tx2)}
#dogma-game .lb-row.top1 .pos{color:var(--l2)}
#dogma-game .lb-row.top2 .pos{color:var(--tx1)}
#dogma-game .lb-row.top3 .pos{color:var(--l3)}
#dogma-game .lb-row .nm{font-family:var(--disp); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#dogma-game .lb-row .badge{font-family:var(--body); font-size:10px; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:99px; border:1px solid var(--bdrS); color:var(--tx1)}
#dogma-game .lb-row .badge.hard{color:var(--l3); border-color:var(--l3)}
#dogma-game .lb-row .sc{font-family:var(--mono); font-weight:700; color:var(--tx0)}
/* ── Jugador de la casa y filas fijadas ──
   El distintivo es el mismo logo del encabezado (data-sync="logo"), igual que
   en las carpetas de recursos. */
#dogma-game .lb-row .nm{display:flex; align-items:center; gap:5px}
/* Nombre largo: se pasea en bucle en vez de cortarse. El JS (nameMarquee)
   duplica el texto y pone .run solo cuando de verdad no cabe; si cabe, esto es
   un span normal. El hueco entre copias va DENTRO de cada una (padding-right),
   así el ciclo es media pista clavada y no se ve la costura. */
#dogma-game .lb-row .nm-clip{flex:1; min-width:0; overflow:hidden}
#dogma-game .lb-row .nm-track{display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
#dogma-game .lb-row .nm-clip.run .nm-track{display:flex; width:max-content; overflow:visible;
  animation:lb-marquee 8s linear infinite}
#dogma-game .lb-row .nm-copy{padding-right:2.5ch; flex:none}
/* En pausa mientras el puntero está encima: para poder leerlo entero. */
#dogma-game .lb-row:hover .nm-clip.run .nm-track{animation-play-state:paused}
@keyframes lb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  #dogma-game .lb-row .nm-clip.run .nm-track{animation:none}
}
#dogma-game .lb-owner-badge{width:18px; height:18px; border-radius:4px; flex:none; vertical-align:middle}
/* Se pintan las dos y el tema decide: así no depende de que exista el <img>
   del encabezado ni de cuándo el script de tema le cambia el src. */
html[data-theme="dark"] #dogma-game .lb-owner-badge.light,
html[data-theme="light"] #dogma-game .lb-owner-badge.dark{display:none}
#dogma-game .lb-row.owner{border-left:3px solid var(--p0); background:color-mix(in srgb, var(--p0) 7%, var(--bg1))}
#dogma-game .lb-row.owner .nm{font-weight:600}
/* Fijadas: van fuera del top, separadas por unos puntos suspensivos para que
   se lea "…y más abajo, tú". Sin esto parecerían los puestos 16, 17. */
#dogma-game .lb-pinned{margin-top:6px; padding-top:10px; position:relative; display:flex; flex-direction:column; gap:6px}
#dogma-game .lb-pinned::before{content:'⋯'; position:absolute; top:-4px; left:0; right:0; text-align:center; color:var(--tx2); font-size:15px; letter-spacing:3px; line-height:1}
#dogma-game .lb-row.pinned{border-style:dashed}
#dogma-game .lb-empty{text-align:center; color:var(--tx2); font-size:13px; padding:16px}
/* Tabla en la pantalla de inicio */
/* margin-top propio: .panel no lleva, así que la tabla quedaba pegada al
   botón de empezar y su halo se le montaba encima. */
#dogma-game .lb-pre{max-width:560px; text-align:left; margin-top:30px}
#dogma-game .lb-pre h3{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--p0); letter-spacing:.3px}
#dogma-game .lb-pre .lb-pre-sub{color:var(--tx2); font-size:12px; margin:2px 0 12px}
/* ── Identidad, país y recuperación (tabla en servidor) ── */
#dogma-game .lb-hint{text-align:center; color:var(--tx1); font-size:12.5px; line-height:1.5; margin-bottom:12px}
/* Aviso de que el nombre y el país salen públicos: va antes de escribirlos,
   no escondido en el pie. */
#dogma-game .lb-privacy{text-align:center; color:var(--tx2); font-size:11.5px; line-height:1.5; margin:-6px 0 12px}
#dogma-game .lb-privacy a{color:inherit; text-decoration:underline}
#dogma-game .lb-ident{display:grid; gap:9px; margin-bottom:10px}
#dogma-game .lb-ident input{width:100%; font-family:var(--body); font-size:16px; color:var(--tx0); background:var(--bg2); border:1px solid var(--bdrS); border-radius:11px; padding:12px 13px}
#dogma-game .lb-ident input:focus{outline:none; border-color:var(--p0)}
#dogma-game .lb-ident .dg-btn{width:100%; font-size:15px; padding:13px 20px}
#dogma-game .lb-err{text-align:center; color:var(--l0); font-size:12.5px; margin-top:4px}
#dogma-game .lb-sugg{text-align:center; color:var(--tx2); font-size:12px; margin-top:8px}
#dogma-game .lb-pick{font-family:var(--mono); font-size:12px; color:var(--p0); background:none; border:1px solid var(--bdrS); border-radius:99px; padding:3px 10px; margin:0 2px; cursor:pointer}
#dogma-game .lb-pick:hover{border-color:var(--p0)}
#dogma-game .lb-me{text-align:center; color:var(--tx1); font-size:12.5px; margin-top:12px}
#dogma-game .lb-me b{color:var(--p0); font-family:var(--mono)}
/* Bandera como imagen auto-hospedada, no emoji: Windows no trae glifos de
   bandera y ahí salía el código en una píldora. El borde tenue evita que las
   banderas con blanco al borde se fundan con la fila. */
#dogma-game .lb-flag-img{width:20px; height:15px; flex:none; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px var(--bdr)}
/* Cambiar el país después del alta */
#dogma-game .lb-country-edit{margin-top:14px; border:1px solid var(--bdr); border-radius:11px; background:var(--bg2); padding:0 14px 14px}
#dogma-game .lb-country-edit summary{cursor:pointer; padding:10px 0; font-family:var(--disp); font-weight:500; font-size:12.5px; color:var(--tx1); list-style:none}
#dogma-game .lb-country-edit summary::-webkit-details-marker{display:none}
#dogma-game .lb-country-edit summary::before{content:'＋ '; font-family:var(--mono); color:var(--p0)}
#dogma-game .lb-country-edit[open] summary::before{content:'－ '}
#dogma-game .lb-country-edit .dg-btn{width:100%; margin-top:9px; font-size:13px; padding:10px 16px; border-radius:9px; background:var(--bg3); color:var(--tx0); border:1px solid var(--bdrS)}
#dogma-game .lb-country-edit .dg-btn:hover{border-color:var(--p0)}
#dogma-game .lb-recover{margin-top:16px; border:1px solid var(--bdr); border-radius:11px; background:var(--bg2); overflow:hidden}
#dogma-game .lb-recover summary{cursor:pointer; padding:10px 14px; font-family:var(--disp); font-weight:500; font-size:12.5px; color:var(--tx1); list-style:none}
#dogma-game .lb-recover summary::-webkit-details-marker{display:none}
#dogma-game .lb-recover summary::before{content:'＋ '; font-family:var(--mono); color:var(--p0)}
#dogma-game .lb-recover[open] summary::before{content:'－ '}
#dogma-game .lb-recover p{padding:0 14px; color:var(--tx2); font-size:11.5px; line-height:1.5; margin-bottom:8px}
/* El código es la cuenta: se muestra con botón de copiar al lado, porque en
   teléfono seleccionar un UUID a mano dentro de un <code> es una tortura. */
#dogma-game .lb-code-row{display:flex; align-items:stretch; gap:8px; margin:0 14px 10px}
#dogma-game .lb-code{flex:1; min-width:0; display:block; padding:9px 11px; background:var(--bg0); border:1px solid var(--bdrS); border-radius:8px; font-family:var(--mono); font-size:11px; color:var(--p0); word-break:break-all; user-select:all}
#dogma-game .lb-copy{flex:none; align-self:center; font-size:12px; padding:9px 14px; border-radius:8px; background:var(--bg3); color:var(--tx0); border:1px solid var(--bdrS)}
#dogma-game .lb-copy:hover{border-color:var(--p0)}
/* Recién creado: el bloque entra abierto y marcado, no plegado y gris. */
#dogma-game .lb-recover.fresh{border-color:var(--p0); box-shadow:0 0 18px -6px var(--p0)}
#dogma-game .lb-recover.fresh summary{color:var(--p0); font-weight:600}
#dogma-game .lb-recover p.lb-warn{color:var(--l3); font-size:12.5px; font-weight:500; margin-bottom:6px}
#dogma-game .lb-recover-in{display:flex; gap:7px; padding:0 14px 14px}
#dogma-game .lb-recover-in input{flex:1; min-width:0; font-family:var(--mono); font-size:16px; color:var(--tx0); background:var(--bg0); border:1px solid var(--bdrS); border-radius:8px; padding:9px 10px}
#dogma-game .lb-recover-in input:focus{outline:none; border-color:var(--p0)}
#dogma-game .lb-recover-in .dg-btn{font-size:12px; padding:9px 14px; border-radius:8px; background:var(--bg3); color:var(--tx0)}
#dogma-game .endbtns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
#dogma-game .foot{text-align:center; color:var(--tx2); font-size:11.5px; margin-top:30px; font-family:var(--body)}
#dogma-game .foot b{font-family:var(--disp); font-weight:600; color:var(--tx1)}
/* ── HEAT METER (combo visible) ── */
#dogma-game .hud .v.combo{color:var(--l2)}
#dogma-game .hud .v.pts{color:var(--p0)}
/* Medidor de racha: 9 muescas en vez de una raya continua de 4 px, que no
   decía nada. Ahora se lee "llevo 3 de 9" y usa el mismo lenguaje visual que
   la barra de etapas. Sin overflow:hidden, que recortaba la animación
   'fire' del número (escala a 1.08 con racha ≥6). */
#dogma-game .hud .cell.heatcell{flex:1.3; position:relative}
#dogma-game .heatpips{display:flex; gap:2px; justify-content:center; margin-top:5px}
#dogma-game .heatpips i{width:100%; max-width:9px; height:3px; border-radius:99px; background:var(--bg3); transition:background .2s ease, box-shadow .2s ease}
#dogma-game .heatpips i.on{background:var(--l2)}
#dogma-game .heatpips.hot i.on{background:var(--l3)}
#dogma-game .heatpips.fire i.on{background:var(--l0); box-shadow:0 0 6px -1px var(--l0)}
#dogma-game .hud .v.combo.hot{text-shadow:0 0 16px var(--l2)}
#dogma-game .hud .v.combo.fire{color:var(--l3); text-shadow:0 0 18px var(--l3); animation:firepulse .6s ease-in-out infinite}
@keyframes firepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* ── FIDELIDAD (vida) ── */
#dogma-game .fid-wrap{display:flex; align-items:center; gap:9px; margin:0 0 14px}
#dogma-game .fid-label{font-family:var(--body); font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--tx2); flex:none}
#dogma-game .fid-track{flex:1; height:9px; border-radius:99px; background:var(--bg3); border:1px solid var(--bdr); overflow:hidden; position:relative}
#dogma-game .fid-fill{position:absolute; inset:0; width:100%; border-radius:99px; background:linear-gradient(90deg,var(--p1),var(--p0)); transition:width .35s cubic-bezier(.3,1,.5,1), background .3s}
#dogma-game .fid-fill.warn{background:linear-gradient(90deg,var(--l2),var(--l3))}
#dogma-game .fid-fill.crit{background:linear-gradient(90deg,var(--l3),var(--l0)); animation:critpulse .8s ease-in-out infinite}
@keyframes critpulse{0%,100%{opacity:1}50%{opacity:.55}}
#dogma-game .fid-val{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--tx1); flex:none; width:38px; text-align:right}
/* ── PROCESIVIDAD (timer por base, la enzima avanza) ── */
#dogma-game .tile.read.active{border-color:var(--p0); color:var(--tx0); box-shadow:0 0 0 2px rgba(var(--p0rgb),.35), 0 0 18px -2px rgba(var(--p0rgb),.6)}
#dogma-game .tile.read.active .proc{position:absolute; left:2px; right:2px; bottom:-7px; height:3px; border-radius:99px; background:var(--bg0); overflow:hidden}
#dogma-game .tile.read.active .proc i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--p0),var(--l2)); transform-origin:left; transition:transform .1s linear}
#dogma-game .tile.read.active.urgent{box-shadow:0 0 0 2px var(--l3), 0 0 22px -2px var(--l3)}
#dogma-game .tile.read.active.urgent .proc i{background:linear-gradient(90deg,var(--l3),var(--l0))}
/* La enzima visible deslizándose */
#dogma-game .enz-marker{position:absolute; top:-30px; left:0; width:var(--tile); display:grid; place-items:center; pointer-events:none; transition:transform .25s cubic-bezier(.3,1,.5,1); z-index:3}
#dogma-game .enz-marker .blob{width:26px; height:21px; border-radius:50% 58% 44% 62% / 60% 44% 56% 44%; background:var(--enz-color,var(--p0)); box-shadow:0 0 12px -2px var(--enz-color,var(--p0)), inset 0 -3px 6px -2px rgba(0,0,0,.25); animation:blobmorph 3.2s ease-in-out infinite}
@keyframes blobmorph{0%,100%{border-radius:50% 58% 44% 62% / 60% 44% 56% 44%}50%{border-radius:58% 44% 62% 50% / 44% 60% 44% 56%}}
#dogma-game .enz-marker .lbl{position:absolute; top:-13px; font-family:var(--mono); font-size:9.5px; color:var(--enz-color,var(--p0)); white-space:nowrap; letter-spacing:.5px}
#dogma-game .enz-marker.ribo{top:-28px; width:auto}
#dogma-game .enz-marker.ribo .blob{width:42px; height:26px}
/* Flash de energía al acertar rápido */
#dogma-game .energy-flash{position:fixed; inset:0; pointer-events:none; z-index:40; opacity:0; background:radial-gradient(60% 50% at 50% 50%, rgba(var(--l2rgb),.14), transparent 70%)}
#dogma-game .energy-flash.go{animation:eflash .5s ease-out}
@keyframes eflash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
/* Floating points popup
   OJO: floatPoints() y qualTag() hacen document.body.appendChild(), así que
   estos elementos NACEN FUERA de #dogma-game. No pueden ir scopeados ni usar
   las variables locales del juego (--l2, --p0…), que están definidas en
   #dogma-game. Van sin scope y con los tokens --bs-*, que viven en
   html[data-theme] y sí resuelven desde <body>. */
.fpop{position:fixed; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:18px; color:var(--bs-life-2); pointer-events:none; z-index:45; text-shadow:0 2px 8px rgba(0,0,0,.6); opacity:0}
.fpop.go{animation:fpop 1s cubic-bezier(.2,1,.4,1) forwards}
@keyframes fpop{0%{opacity:0; transform:translateY(0) scale(.6)}15%{opacity:1; transform:translateY(-10px) scale(1.1)}100%{opacity:0; transform:translateY(-46px) scale(1)}}
.fpop.big{font-size:24px; color:var(--bs-life-3)}
.fpop.perfect{color:var(--bs-primary)}
/* Perfect / etiqueta de calidad de respuesta (mismo caso que .fpop) */
.qual-tag{position:fixed; font-family:'Outfit',sans-serif; font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase; pointer-events:none; z-index:45; opacity:0}
.qual-tag.go{animation:qtag .9s ease-out forwards}
@keyframes qtag{0%{opacity:0;transform:translateY(4px) scale(.8)}20%{opacity:1;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(-24px) scale(1)}}
.qual-tag.perfect{color:var(--bs-primary)}
.qual-tag.fast{color:var(--bs-life-2)}
.qual-tag.ok{color:var(--bs-text-1)}
/* Shake de pantalla al fallar feo */
@keyframes screenshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
#dogma-game #app.hit{animation:screenshake .35s}
/* Mutación al perder fidelidad */
/* z-index 1310, no 60: el <header> sticky del sitio (999) se dibujaba encima. */
#dogma-game .mutation-overlay{position:fixed; inset:0; z-index:1310; display:none; place-items:center; background:var(--scrim); backdrop-filter:blur(3px); animation:fade .3s both}
#dogma-game .mutation-overlay.show{display:grid}
#dogma-game .mutation-card{text-align:center; max-width:340px; padding:0 24px}
#dogma-game .mutation-card .ico{font-size:46px; margin-bottom:8px}
#dogma-game .mutation-card h3{font-family:var(--disp); font-weight:700; font-size:24px; color:var(--l0); margin-bottom:6px}
#dogma-game .mutation-card p{color:var(--tx1); font-size:14px; line-height:1.5; margin-bottom:18px}
/* ── Modo tutorial ───────────────────────────────────────────────
   Interruptor de inicio, guía dentro del juego y las animaciones de
   "mira cómo se hace". Ver el bloque "Modo tutorial" del JS. */
#dogma-game .tut-panel{padding-top:14px; padding-bottom:14px}
#dogma-game .tut-toggle{display:flex; align-items:center; gap:14px; cursor:pointer}
#dogma-game .tut-toggle input{position:absolute; opacity:0; width:0; height:0}
#dogma-game .tut-track{position:relative; flex:none; width:44px; height:25px; border-radius:99px; background:var(--bg2); border:1.5px solid var(--bdrS); transition:background .2s, border-color .2s}
#dogma-game .tut-knob{position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--bdrS); transition:transform .2s, background .2s}
#dogma-game .tut-toggle input:checked + .tut-track{background:rgba(var(--p0rgb),.18); border-color:var(--p0)}
#dogma-game .tut-toggle input:checked + .tut-track .tut-knob{transform:translateX(19px); background:var(--p0)}
#dogma-game .tut-toggle input:focus-visible + .tut-track{outline:2px solid var(--p0); outline-offset:2px}
#dogma-game .tut-toggle .minfo{flex:1; min-width:0}
#dogma-game .tut-toggle .minfo b{font-family:var(--disp); font-weight:600; font-size:14.5px; display:block}
#dogma-game .tut-toggle .minfo small{color:var(--tx1); font-size:12px; line-height:1.4}
/* Con el tutorial encendido la dificultad no aplica: siempre corre en fácil */
#dogma-game .mode-grid.dimmed{opacity:.38; pointer-events:none; filter:saturate(.4)}
#dogma-game .tut-chip{font-family:var(--mono); font-size:10px; color:var(--l1); border:1px solid var(--l1); padding:2px 8px; border-radius:99px}

/* Pregunta de primera vez */
/* height:100dvh además de inset:0, y safe-area: en móvil el inset se resuelve
   contra el viewport grande y el borde de abajo queda tras la barra del
   navegador (misma lección que .cr-panel). */
#dogma-game .tut-ask{position:fixed; inset:0; height:100dvh; z-index:1330; display:none; place-items:center; overflow:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
  background:var(--scrim); backdrop-filter:blur(4px)}
#dogma-game .tut-ask.show{display:grid}
#dogma-game .tut-ask-card{text-align:center; max-width:400px; width:100%; padding:0 8px; animation:si-in .24s ease-out both}
#dogma-game .tut-ask-card .ico{font-size:40px; margin-bottom:6px}
#dogma-game .tut-ask-card h3{font-family:var(--disp); font-weight:700; font-size:24px; color:var(--l0); margin-bottom:8px}
#dogma-game .tut-ask-card p{color:var(--tx1); font-size:14px; line-height:1.55; margin-bottom:20px}
#dogma-game .tut-ask-btns{display:flex; flex-direction:column; gap:9px}

/* Guía dentro de la partida */
#dogma-game .tut-coach{margin:0 auto 12px; max-width:620px; padding:11px 13px; border:1.5px solid var(--l1); border-radius:13px; background:rgba(var(--p0rgb),.05)}
#dogma-game .tut-coach[hidden]{display:none}
#dogma-game .tut-coach.pop{animation:tc-pop .28s ease-out both}
#dogma-game .tut-coach .tc-main{display:flex; align-items:center; gap:11px}
#dogma-game .tut-coach .tc-ico{font-size:20px; flex:none}
#dogma-game .tut-coach p{flex:1; margin:0; text-align:left; font-size:13.5px; line-height:1.45; color:var(--tx0)}
#dogma-game .tut-coach p b{color:var(--l0); font-weight:600}
/* Segunda línea: la mecánica que el tutorial no aplica pero la partida sí */
#dogma-game .tut-coach .tc-mech{margin-top:9px; padding-top:9px; border-top:1px dashed var(--bdrS); font-size:12.5px; line-height:1.5; color:var(--tx1)}
#dogma-game .tut-coach .tc-mech[hidden]{display:none}
#dogma-game .tut-coach .tc-mech.pop{animation:tc-pop .28s ease-out both}
#dogma-game .tut-coach .tc-mech b{color:var(--l2); font-weight:600}
#dogma-game .tut-coach .tc-mech .tc-mech-k{color:var(--tx2); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; margin-right:4px}

/* Recorrido del codón por la rueda: se encienden las casillas de cada anillo
   en orden (1ª base → 2ª → 3ª → aminoácido) y se quedan encendidas. `tut-now`
   es la que acaba de encenderse; late para que se vea cuál toca. */
#dogma-game .wheel-svg .tut-lit{filter:brightness(1.55) saturate(1.25) drop-shadow(0 0 7px rgba(124,227,177,.85)); opacity:1 !important}
#dogma-game .wheel-svg path.tut-lit{stroke:var(--l1); stroke-width:2.4; paint-order:stroke}
#dogma-game .wheel-svg text.tut-lit{font-weight:700}
#dogma-game .wheel-svg .tut-now{animation:tut-cell .85s ease-out}
@keyframes tut-cell{0%{filter:brightness(2.4) drop-shadow(0 0 14px rgba(124,227,177,1))} 100%{filter:brightness(1.55) saturate(1.25) drop-shadow(0 0 7px rgba(124,227,177,.85))}}
@media (prefers-reduced-motion:reduce){#dogma-game .wheel-svg .tut-now{animation:none}}
#dogma-game .cr-tut .cr-step{display:block; margin-top:6px; padding-top:6px; border-top:1px solid var(--bdr); color:var(--tx0); font-family:var(--mono); font-size:11.5px}
#dogma-game .cr-tut .cr-step b{color:var(--l1)}

/* Lección de la rueda, dentro de la hoja (la guía de abajo queda tapada) */
#dogma-game .cr-tut{margin:0 0 8px; padding:9px 11px; border:1px dashed var(--l1); border-radius:10px; background:rgba(var(--p0rgb),.06); font-size:12.5px; line-height:1.5; color:var(--tx1); flex:none}
#dogma-game .cr-tut[hidden]{display:none}
#dogma-game .cr-tut b{color:var(--l0); font-weight:600}

/* Señalizadores: qué mirar y qué apretar */
#dogma-game .tut-ring{position:relative; box-shadow:0 0 0 2px var(--l0), 0 0 18px rgba(var(--p0rgb),.5); animation:tut-pulse 1.35s ease-in-out infinite}
#dogma-game .tut-demo{box-shadow:0 0 0 2px var(--p0), 0 0 22px rgba(var(--p0rgb),.6)}
#dogma-game .tut-spot{animation:tut-spot .7s ease-out both}
#dogma-game .tile.tut-ghost{border-style:dashed !important; border-color:var(--l0) !important; color:var(--l0); opacity:.55}
/* Ficha que viaja: de la tecla al hueco, del codón al aminoácido */
.tut-fly{position:fixed; z-index:1400; pointer-events:none; display:grid; place-items:center;
  min-width:32px; height:32px; padding:0 8px; border-radius:9px;
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:15px; color:#040D14; background:#7CE3B1;
  opacity:0; transform:translate(-50%,-50%) scale(.6);
  transition:transform .62s cubic-bezier(.2,.75,.3,1), opacity .28s ease-out}
.tut-fly.codon{background:#8FD8FF; font-size:13px}
.tut-fly.land{opacity:0; transition:transform .62s cubic-bezier(.2,.75,.3,1), opacity .26s ease-in}
@keyframes tut-pulse{0%,100%{box-shadow:0 0 0 2px var(--l0), 0 0 14px rgba(124,227,177,.35)} 50%{box-shadow:0 0 0 3px var(--l0), 0 0 26px rgba(124,227,177,.7)}}
@keyframes tut-spot{0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)}}
@keyframes tc-pop{from{opacity:.25; transform:translateY(5px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  #dogma-game .tut-ring{animation:none}
  #dogma-game .tut-spot{animation:none}
  #dogma-game .tut-coach.pop{animation:none}
  .tut-fly{transition:opacity .2s}
}
/* El tutorial no puntúa: ni el número grande ni el desglose de multiplicadores
   pintan nada aquí. */
#dogma-game #screen-end.tut .finalscore,
#dogma-game #screen-end.tut .breakdown,
#dogma-game #screen-end.tut .best{display:none}
#dogma-game .lb-empty.tut-note{line-height:1.55}
#dogma-game .lb-empty.tut-note b{color:var(--l0)}

/* Cartel de etapa: aparece antes de cada etapa y dura <1s (ver INTRO_MS) */
#dogma-game .stage-intro{position:fixed; inset:0; height:100dvh; z-index:1320; display:none; place-items:center;
  padding:0 calc(16px + env(safe-area-inset-right,0px)) 0 calc(16px + env(safe-area-inset-left,0px));
  background:var(--scrim); backdrop-filter:blur(4px)}
#dogma-game .stage-intro.show{display:grid}
#dogma-game .stage-intro-card{text-align:center; max-width:420px; padding:0 24px; animation:si-in .22s ease-out both}
#dogma-game .stage-intro-card .si-idx{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx1)}
#dogma-game .stage-intro-card h3{font-family:var(--disp); font-weight:700; font-size:clamp(28px,7vw,42px); line-height:1.1; color:var(--l0); margin:6px 0 10px}
#dogma-game .stage-intro-card p{color:var(--tx1); font-size:15px; line-height:1.5; margin:0 0 12px}
#dogma-game .stage-intro-card .si-enzyme{font-family:var(--mono); font-size:12px; color:var(--l1); border:1px solid var(--l1); padding:3px 10px; border-radius:99px; display:inline-block}
@keyframes si-in{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){#dogma-game .stage-intro-card{animation:none}}
/* Live mode chip en arranque */
#dogma-game .mode-grid{display:grid; gap:10px}
#dogma-game .mode-opt{display:flex; align-items:center; gap:14px; padding:13px 16px; border:1.5px solid var(--bdr); border-radius:13px; background:var(--bg2); cursor:pointer; transition:border-color .2s, background .2s}
#dogma-game .mode-opt:hover{border-color:var(--bdrS)}
#dogma-game .mode-opt.sel{border-color:var(--p0); background:rgba(var(--p0rgb),.06)}
#dogma-game .mode-opt .mradio{width:18px;height:18px;border-radius:50%;border:2px solid var(--bdrS); flex:none; position:relative; transition:border-color .2s}
#dogma-game .mode-opt.sel .mradio{border-color:var(--p0)}
#dogma-game .mode-opt.sel .mradio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--p0)}
#dogma-game .mode-opt .minfo{flex:1}
#dogma-game .mode-opt .minfo b{font-family:var(--disp); font-weight:600; font-size:14.5px; display:block}
#dogma-game .mode-opt .minfo small{color:var(--tx1); font-size:12px; line-height:1.4}
#dogma-game .mode-opt .mtag{font-family:var(--mono); font-size:10px; color:var(--l2); border:1px solid var(--l2); padding:2px 7px; border-radius:99px; flex:none}
/* ── Teléfono: apretar el ritmo vertical ──
   El tablero y las teclas tienen que caber juntos: es un juego a contrarreloj
   y no se puede estar haciendo scroll entre la base activa y el teclado. Solo
   se recortan márgenes y tipografías accesorias; ni las casillas ni las teclas
   se achican. */
@media (max-width:560px){
  #dogma-game .hud{padding:8px 6px; margin:4px 0 11px}
  #dogma-game .hud .k{font-size:9.5px; letter-spacing:1px}
  #dogma-game .fid-wrap{margin-bottom:10px}
  #dogma-game .fid-label{font-size:9.5px; letter-spacing:1px}
  #dogma-game .prog{margin-bottom:10px}
  #dogma-game .stage-head{gap:7px}
  #dogma-game .hint{font-size:12.5px; margin:5px 0 12px}
  #dogma-game .board{margin-bottom:12px}
  #dogma-game .dir-note{margin:7px 0 0}
  #dogma-game .prompt{margin:8px 0 11px}
  #dogma-game .keys{gap:8px}
  /* Con el gap más chico sobra ancho: teclas más grandes = menos fallos por
     dedo gordo, que en modo difícil cuestan fidelidad. */
  #dogma-game .key{width:clamp(56px,16vw,72px); height:clamp(56px,16vw,72px)}
  #dogma-game #app{padding-bottom:32px}
  /* ── Tutorial en teléfono ──
     La guía va entre el tablero y las teclas del jugador, así que cada píxel
     cuenta: se quita el emoji, el botón de repetir baja a su propia línea y
     las tipografías se aprietan sin bajar de lo legible. */
  /* En tutorial la guía dice lo mismo que la pista, pero para la base que toca.
     Duplicarlas empujaba las teclas 110px más abajo en un iPhone. */
  #dogma-game .tut .hint{display:none}
  #dogma-game .tut-coach{padding:9px 11px; margin-bottom:10px; border-radius:11px}
  #dogma-game .tut-coach .tc-main{flex-wrap:wrap; gap:8px}
  #dogma-game .tut-coach .tc-ico{display:none}
  #dogma-game .tut-coach p{font-size:12.5px; flex:1 1 100%}
  #dogma-game .tut-coach .tc-replay{margin-left:auto; padding:5px 11px}
  #dogma-game .tut-coach .tc-mech{margin-top:8px; padding-top:8px; font-size:11.5px}
  #dogma-game .tut-toggle{gap:11px}
  #dogma-game .tut-toggle .minfo small{font-size:11.5px}
}
@media (prefers-reduced-motion: reduce){ #dogma-game *{animation-duration:.001s !important; transition-duration:.05s !important} }