/* Código secreto (/dos/codigo/): tablero de nogal con engastes de latón, cofre con tapa, 10 filas de intentos,
   panel con la ronda, la paleta de gemas y el marcador. --u = un «píxel» del dibujo (las gemas miden 16u). */
.cg { --u: max(2px, min(3px, calc((100vh - 330px) / 236))); position: relative; width: 100%; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.cg-cont { display: flex; justify-content: center; }
.cg-tarjeta { background: #fff; border: 3px solid var(--cq-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--cq-ink); }
.cg-mesa { display: flex; gap: 26px; align-items: flex-start; justify-content: center; width: 100%; }

/* ---------- tablero ---------- */
.cg-tab { position: relative; flex: none; padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 5); border: 3px solid var(--cq-ink); border-radius: 18px;
          background: #8a5a30 repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 calc(var(--u) * 9), rgba(110, 69, 36, .45) calc(var(--u) * 9) calc(var(--u) * 10));
          box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #b4793f, inset 0 calc(var(--u) * -2) 0 #6e4524; }
.cg-tab::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -14px; height: 11px; border: 3px solid var(--cq-ink); border-top: 0;
                 border-radius: 0 0 8px 8px; background: #6e4524; z-index: -1; }
.cg-fila { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.cg-hueco { position: relative; width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; padding: 0; border: 0; border-radius: 50%; display: block; background: none; }
.cg-eng { position: absolute; inset: 0; line-height: 0; }
.cg-eng svg { width: 100%; height: 100%; display: block; }
.cg-gema { position: absolute; left: var(--u); top: var(--u); width: calc(var(--u) * 16); height: calc(var(--u) * 16); line-height: 0; z-index: 1; }
.cg-gema svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 var(--u) 0 rgba(20, 10, 30, .45)); }
button.cg-hueco { cursor: pointer; }
button.cg-hueco:focus-visible { outline: 3px solid var(--cq-yellow); outline-offset: 2px; }
button.cg-hueco.cursor::after { content: ""; position: absolute; inset: calc(var(--u) * -1.2); border: 3px dashed var(--cq-yellow); border-radius: 50%; animation: cg-gira 3s linear infinite; }
.cg-hueco .cg-gema { animation: cg-pon .18s ease-out; }

/* cofre con el código */
.cg-cofre { position: relative; display: flex; justify-content: center; padding: calc(var(--u) * 3); margin: 0 0 calc(var(--u) * 4);
            background: #4a2c18; border: 3px solid var(--cq-ink); border-radius: 12px; box-shadow: inset 0 calc(var(--u) * 2) 0 #2e1a0d, 0 3px 0 #b4793f; }
.cg-secreto { width: calc(var(--u) * 80); justify-content: center; }
.cg-secreto.activa { background: rgba(255, 207, 74, .2); border-radius: 999px; box-shadow: 0 0 0 3px var(--cq-yellow); }
.cg-hueco.rev .cg-gema { animation: cg-brilla 1.4s steps(2) 3; }
.cg-tapa { position: absolute; left: 50%; top: calc(var(--u) * 3); width: calc(var(--u) * 80); margin-left: calc(var(--u) * -40); z-index: 3; line-height: 0;
           filter: drop-shadow(0 calc(var(--u) * 1.5) 0 rgba(20, 10, 0, .5)); transition: transform .35s; }
.cg-tapa svg { display: block; width: 100%; height: auto; }
.cg-tapa.entorna { transform: translateY(calc(var(--u) * -15)) rotate(-3deg); }
.cg-tapa.cierra { animation: cg-cierra .55s cubic-bezier(.5, 0, .7, 1.4); }
.cg-tapa.sale { display: none; }
.cg-tapa.sale.abre { display: block; animation: cg-abre 1.1s ease-in forwards; pointer-events: none; }
.cg-solotu { position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * -3.5); z-index: 4; font: 800 12.5px/1 var(--cq-body); background: var(--cq-yellow);
             color: var(--cq-ink); border: 2px solid var(--cq-ink); border-radius: 999px; padding: 3px 8px; }

/* filas de intentos */
.cg-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.5); }
.cg-filas .cg-fila { padding: calc(var(--u) * .8) calc(var(--u) * 2) calc(var(--u) * .8) calc(var(--u) * 1); border-radius: 999px; background: rgba(46, 26, 13, .28);
                     box-shadow: inset 0 var(--u) 0 rgba(46, 26, 13, .35); transition: background .2s; }
.cg-filas .cg-fila.vacia { opacity: .62; }
.cg-filas .cg-fila.activa { background: rgba(255, 207, 74, .3); box-shadow: 0 0 0 3px var(--cq-yellow), 0 0 0 6px var(--cq-ink); opacity: 1; }
.cg-filas .cg-fila.gana { background: rgba(47, 174, 130, .55); box-shadow: 0 0 0 3px #7af0c0, 0 0 0 6px var(--cq-ink); animation: cg-gana .6s steps(2) 6; }
.cg-num { width: calc(var(--u) * 7); text-align: center; font: 800 calc(var(--u) * 6)/1 var(--cq-head); color: #ffe3a8; text-shadow: 0 2px 0 #2e1a0d; flex: none; }
.cg-fila.activa .cg-num { color: var(--cq-yellow); }
.cg-pistas { display: grid; grid-template-columns: repeat(2, calc(var(--u) * 6)); gap: var(--u); margin-left: calc(var(--u) * 2); padding: calc(var(--u) * 1.2);
             background: #e2c48f; border: 2px solid #3a2414; border-radius: calc(var(--u) * 3); box-shadow: inset 0 var(--u) 0 #b88f58; }
.cg-pistas i { display: block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); line-height: 0; }
.cg-pistas svg { width: 100%; height: 100%; display: block; }
.cg-pistas.nueva i { animation: cg-pista .32s cubic-bezier(.3, 1.6, .6, 1) backwards; animation-delay: calc(var(--i) * .16s + .1s); }
.cg-pistas.pend i { animation: cg-piensa 1s steps(2) infinite; animation-delay: calc(var(--i) * .25s); }

/* cortina propia (telón de «pasa la tablet»: la capa de sala.js es semitransparente) */
.cg-cortina { display: none; position: absolute; inset: -8px; z-index: 20; border-radius: 20px; border: 3px solid var(--cq-ink);
              background: #6e4524 repeating-linear-gradient(90deg, #8a5a30 0 28px, #7a4c27 28px 32px); place-items: center; }
.cg-cortina span { width: min(240px, 70%); line-height: 0; }
.cg-cortina svg { width: 100%; height: auto; }
.cg.tapado .cg-cortina { display: grid; }

/* ---------- panel ---------- */
.cg-panel { flex: 0 1 380px; min-width: 0; display: grid; gap: 14px; }
.cg-ronda { padding: 12px 14px; }
.cg-ronda-t { margin: 0 0 8px; font: 800 14px/1 var(--cq-body); text-transform: uppercase; letter-spacing: 1px; color: var(--cq-muted); }
.cg-papeles { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.cg-pap { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: 12px; border: 3px solid var(--cq-ink); background: var(--j-l); font-size: 15px; min-width: 0; }
.cg-pap b { font: 800 16px/1.1 var(--cq-head); color: var(--cq-ink); }
.cg-pap svg { flex: none; }
.cg-msg { padding: 16px; }
.cg-msg > p { margin: 0; font-size: 17px; color: var(--cq-ink2); line-height: 1.4; }
.cg-msg > p b { color: var(--cq-ink); }
.cg-grande { display: block; font: 800 21px/1.2 var(--cq-head); margin-bottom: 4px; }
.cg-espera { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--cq-ink); }
.cg-paleta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.cg-paleta.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cg-pgema { position: relative; display: grid; place-items: center; min-height: 66px; padding: 6px; cursor: pointer; border: 3px solid var(--cq-ink); border-radius: 14px;
            background: #fff6e2 radial-gradient(circle at 50% 40%, #fffaf0, #f3e2c2 75%); box-shadow: 3px 3px 0 var(--cq-ink); transition: transform .1s, box-shadow .1s; }
.cg-pgema:hover { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--cq-ink); }
.cg-pgema:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cq-ink); }
.cg-pgema:focus-visible { outline: 3px solid var(--cq-blue); outline-offset: 2px; }
.cg-pgema[aria-disabled="true"] { opacity: .35; filter: grayscale(.7); cursor: not-allowed; }
.cg-pgema small { position: absolute; left: 5px; top: 3px; font: 800 13px/1 var(--cq-head); color: var(--cq-muted); }
.cg-pgema svg { display: block; }
.cg-botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0 !important; }
.cg-botones .cq-btn { min-height: 48px; }
.cg-botones .cq-btn-primary { flex: 1 1 auto; justify-content: center; }
.cg-botones .cq-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cg-res { padding: 12px 14px; }
.cg-res-t { margin: 0 0 8px; font: 800 14px/1 var(--cq-body); text-transform: uppercase; letter-spacing: 1px; color: var(--cq-muted); }
.cg-res-f { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--j-l); border: 2px solid var(--cq-ink); }
.cg-res-f b { font: 800 16px/1.1 var(--cq-head); }
.cg-res-f span { font-weight: 800; color: var(--j-d); }
.cg-res-f.gana { background: var(--cq-yellow); box-shadow: 3px 3px 0 var(--cq-ink); }
.cg-res-f.gana span { color: var(--cq-ink); }
.cg-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-weight: 700; font-size: 14.5px; color: var(--cq-ink2); }
.cg-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cg-leyenda svg { width: 18px; height: 18px; background: #e2c48f; border: 2px solid #3a2414; border-radius: 50%; padding: 2px; box-sizing: content-box; }

/* ---------- opciones ---------- */
.cg-opc { width: min(640px, 100%); padding: 22px; text-align: center; }
.cg-opc-arte { display: inline-block; line-height: 0; margin: -6px 0 4px; }
.cg-opc h3 { font: 800 26px/1.15 var(--cq-head); margin: 0 0 12px; }
.cg-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.cg-op { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 3px solid var(--cq-ink); border-radius: 16px; background: var(--cq-bg);
         color: var(--cq-ink); font: inherit; cursor: pointer; box-shadow: 3px 3px 0 var(--cq-ink); transition: transform .12s, box-shadow .12s, background .12s; }
.cg-op:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cq-ink); }
.cg-op[aria-pressed="true"] { background: var(--cq-yellow-l); box-shadow: 5px 5px 0 var(--cq-yellow-d); outline: 3px solid var(--cq-yellow); outline-offset: -7px; }
.cg-op:focus-visible { outline: 3px solid var(--cq-blue); outline-offset: 2px; }
.cg-op-dib { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 34px; max-width: 210px; }
.cg-op b { font: 800 19px/1.1 var(--cq-head); }
.cg-op small { color: var(--cq-ink2); font-size: 14px; }
.cg-opc .cg-botones { justify-content: center; }
.cg-opc .cg-botones .cq-btn { flex: 0 1 260px; }

/* ---------- reglas ---------- */
.cg-r-ilu { text-align: center; margin: 6px 0 !important; line-height: 0; }
.cg-r-pistas { display: grid; gap: 8px; }
.cg-r-pistas span { display: flex; align-items: center; gap: 10px; }
.cg-r-pistas .cq-px svg, .cg-r-pistas svg { background: #e2c48f; border: 2px solid #3a2414; border-radius: 50%; padding: 4px; box-sizing: content-box; flex: none; }
.cg-reglas li .cq-px { display: inline-block; vertical-align: middle; }

/* ---------- animaciones ---------- */
@keyframes cg-gira { to { transform: rotate(360deg); } }
@keyframes cg-pon { from { transform: scale(.4) translateY(-30%); opacity: 0; } }
@keyframes cg-pista { from { transform: scale(0); } }
@keyframes cg-piensa { 50% { opacity: .35; } }
@keyframes cg-gana { 50% { filter: brightness(1.25); } }
@keyframes cg-brilla { 50% { filter: brightness(1.35); } }
@keyframes cg-cierra { from { transform: translateY(calc(var(--u) * -30)) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } }
@keyframes cg-abre { 0% { transform: none; } 25% { transform: translateY(calc(var(--u) * 2)) rotate(1deg); }
                     100% { transform: translateY(calc(var(--u) * -42)) rotate(-12deg); opacity: 0; } }

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  .cg { --u: max(2px, min(2.2px, calc((100vw - 56px) / 112))); }
  .cg-mesa { flex-direction: column; align-items: center; gap: 16px; }
  .cg-panel { display: contents; }
  .cg-panel > * { width: 100%; max-width: 520px; }
  .cg-msg { order: 1; position: sticky; bottom: 8px; z-index: 6; box-shadow: 4px 4px 0 var(--cq-ink), 0 -10px 24px rgba(31, 34, 64, .18); padding: 12px; }
  .cg-msg > p { font-size: 16px; }
  .cg-ronda { order: 2; } .cg-res { order: 3; } .cg-leyenda { order: 4; justify-content: center; }
  .cg-papeles { grid-template-columns: 1fr 1fr; }
  .cg-pap { font-size: 13.5px; } .cg-pap svg { width: 24px; height: 24px; } .cg-pap b { font-size: 15px; }
  .cg-tab { box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #b4793f, inset 0 calc(var(--u) * -2) 0 #6e4524; }
  .cg-paleta { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .cg-paleta.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cg-pgema { min-height: 52px; padding: 4px; }
  .cg-pgema svg { width: 36px; height: 36px; }
  .cg-botones { margin-top: 10px !important; }
  .cg-opc { padding: 16px 12px; }
  .cg-op b { font-size: 17px; }
  .cg-op-dib { gap: 0; } .cg-op-dib svg { width: 22px; height: 22px; }
}
@media (max-width: 860px) and (min-width: 600px) { .cg-pgema svg { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .cg *, .cg *::after { animation: none !important; transition: none !important; }
  .cg-tapa.sale.abre { display: none; }
}