/* Reversi (Juegos para dos): tablero de fieltro con marco de nogal, remates de latón y coordenadas; fichas pixel de dos
   caras (dos-reversi-1 coral con estrella / dos-reversi-2 azul con luna) que giran por fotogramas. Va después de dos.css. */
.rv { --cel: max(34px, min(66px, calc((100vw - 92px) / 8), calc((100vh - 420px) / 8)));
      --pad: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; user-select: none; -webkit-user-select: none; }

/* marcador de fichas */
.rv-marcas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: calc(var(--cel) * 8 + var(--pad) * 2 + 6px); }
.rv-cnt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 3px solid var(--cq-ink); border-radius: 14px;
          background: #fff; box-shadow: 3px 3px 0 var(--cq-ink); transition: background .2s, transform .2s; position: relative; }
.rv-cnt.dos-j2 { padding: 4px 4px 4px 10px; }
.rv-cnt.activo { background: var(--j-l); transform: translateY(-2px); box-shadow: 4px 4px 0 var(--j-d); }
.rv-cnt-f { line-height: 0; }
.rv-cnt-f svg { width: 34px; height: 34px; }
.rv-cnt b { font: 800 26px/1 var(--cq-head); min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.rv-pasa { display: none; font: 800 12px/1 var(--cq-head); text-transform: uppercase; letter-spacing: .5px; padding: 3px 6px; border-radius: 999px;
           background: var(--cq-yellow); border: 2px solid var(--cq-ink); }
.rv-cnt.pasa .rv-pasa { display: inline-block; }
.rv-barra { height: 16px; display: flex; border: 3px solid var(--cq-ink); border-radius: 999px; overflow: hidden; background: #eee8dc; }
.rv-barra i { display: block; height: 100%; transition: width .5s steps(8); }
.rv-barra-1 { background: repeating-linear-gradient(90deg, var(--cq-coral) 0 8px, #ff9f86 8px 10px); }
.rv-barra-2 { margin-left: auto; background: repeating-linear-gradient(90deg, var(--cq-blue) 0 8px, #4c82f5 8px 10px); }

/* marco de madera */
.rv-marco { position: relative; padding: var(--pad); border: 3px solid var(--cq-ink); border-radius: 18px;
            background: #7a4a26 repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 9px, rgba(0, 0, 0, .06) 9px 11px, transparent 11px 17px);
            box-shadow: 7px 7px 0 var(--cq-ink), inset 0 0 0 3px #a8703c, inset 0 0 0 6px #6a3f1f, inset 0 -7px 0 #5a3418; }
.rv-esq { position: absolute; line-height: 0; z-index: 2; pointer-events: none; }
.rv-esq svg { width: 22px; height: 22px; }
.rv-esq-1 { left: 5px; top: 5px; } .rv-esq-2 { right: 5px; top: 5px; transform: scaleX(-1); }
.rv-esq-3 { left: 5px; bottom: 5px; transform: scaleY(-1); } .rv-esq-4 { right: 5px; bottom: 5px; transform: scale(-1, -1); }
.rv-letras, .rv-nums { position: absolute; display: flex; color: #f3d9b3; font: 800 13px/1 var(--cq-head); text-shadow: 1px 1px 0 #3d2210; }
.rv-letras { left: var(--pad); top: 6px; width: calc(var(--cel) * 8); height: calc(var(--pad) - 8px); }
.rv-nums { top: var(--pad); left: 6px; flex-direction: column; height: calc(var(--cel) * 8); width: calc(var(--pad) - 8px); }
.rv-letras span, .rv-nums span { flex: 1; display: grid; place-items: center; }
.rv-mesa { position: relative; width: calc(var(--cel) * 8); height: calc(var(--cel) * 8); border: 3px solid #2d1a0c; border-radius: 4px;
           box-shadow: inset 0 0 0 1px #0d2a1e; background: #2c8a5e; }
.rv-fieltro, .rv-celdas { position: absolute; inset: 0; }
.rv-fieltro svg { width: 100%; height: 100%; display: block; }
.rv-fieltro::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                     background: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 210, .14), transparent 55%), radial-gradient(ellipse at 50% 60%, transparent 55%, rgba(5, 25, 15, .32)); }
/* puntos de referencia del tablero (c3, f3, c6, f6) */
.rv-mesa::after { content: ""; position: absolute; width: 6px; height: 6px; left: calc(var(--cel) * 2 - 3px); top: calc(var(--cel) * 2 - 3px); background: #0d2a1e;
                  box-shadow: calc(var(--cel) * 4) 0 0 #0d2a1e, 0 calc(var(--cel) * 4) 0 #0d2a1e, calc(var(--cel) * 4) calc(var(--cel) * 4) 0 #0d2a1e; pointer-events: none; z-index: 1; }
.rv-celdas { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); z-index: 2; }
.rv-c { position: relative; border: 0; padding: 0; background: transparent; cursor: default; border-radius: 3px; touch-action: manipulation; }
.rv-c.rv-ok { cursor: pointer; }
.rv-c:focus-visible { outline: 3px solid var(--cq-yellow); outline-offset: -3px; z-index: 3; }
.rv-c.rv-ok:hover { background: rgba(255, 255, 230, .13); }
.rv-d { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rv-d > span { grid-area: 1 / 1; line-height: 0; }
.rv-f { width: 88%; z-index: 2; }
.rv-f svg, .rv-fantasma svg, .rv-pista svg { width: 100%; height: auto; display: block; }
.rv-f.rv-alto { transform: translateY(calc(var(--cel) * -.09)); }
.rv-f.rv-cae { animation: rv-cae .32s steps(5) both; }
.rv-f.rv-giraria { animation: rv-tiembla .5s steps(2) infinite; filter: brightness(1.12); }
.rv-f.gana { animation: rv-gana .7s steps(2) infinite; }
.rv-pista { width: 74%; opacity: .95; animation: rv-pista 1.6s steps(3) infinite; }
.rv.sin-pistas .rv-pista, .rv.espera .rv-pista { display: none; }
.rv-fantasma { width: 88%; opacity: 0; z-index: 2; }
.rv-c.rv-prev .rv-fantasma { opacity: .6; }
.rv-c.rv-prev .rv-pista { display: none; }
.rv-c.rv-prev::after { content: attr(data-n); position: absolute; right: -4px; top: -6px; z-index: 4; font: 800 13px/1 var(--cq-head); color: var(--cq-ink);
                       background: var(--cq-yellow); border: 2px solid var(--cq-ink); border-radius: 999px; padding: 2px 5px; pointer-events: none; }
/* última jugada: esquinas amarillas */
.rv-c.ultima::before { content: ""; position: absolute; inset: 3px; z-index: 3; pointer-events: none;
                       background: linear-gradient(var(--cq-yellow), var(--cq-yellow)) left top / 8px 3px no-repeat, linear-gradient(var(--cq-yellow), var(--cq-yellow)) left top / 3px 8px no-repeat,
                                   linear-gradient(var(--cq-yellow), var(--cq-yellow)) right top / 8px 3px no-repeat, linear-gradient(var(--cq-yellow), var(--cq-yellow)) right top / 3px 8px no-repeat,
                                   linear-gradient(var(--cq-yellow), var(--cq-yellow)) left bottom / 8px 3px no-repeat, linear-gradient(var(--cq-yellow), var(--cq-yellow)) left bottom / 3px 8px no-repeat,
                                   linear-gradient(var(--cq-yellow), var(--cq-yellow)) right bottom / 8px 3px no-repeat, linear-gradient(var(--cq-yellow), var(--cq-yellow)) right bottom / 3px 8px no-repeat; }
.rv-c.rv-no { animation: rv-no .3s steps(3); }
.rv.espera .rv-c { cursor: default; }
.rv.espera .rv-c:hover { background: none; }

/* pie: pistas */
.rv-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rv-pistas { display: inline-flex; align-items: center; gap: 6px; }
.rv-pistas-i { line-height: 0; }
.rv-pistas[aria-pressed="false"] { background: #eee8dc; }
.rv-pistas[aria-pressed="false"] .rv-pistas-i { opacity: .35; filter: grayscale(1); }
.rv-ayuda { color: var(--cq-ink2); font-weight: 700; font-size: 15px; }

/* reglas */
.rv-regla { margin: 6px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rv-regla .cq-px { line-height: 0; background: #f6efe2; border: 3px solid var(--cq-ink); border-radius: 12px; padding: 8px; max-width: 100%; }
.rv-regla .cq-px svg { max-width: 100%; height: auto; }
.rv-regla figcaption { font-size: 16px; }

@keyframes rv-cae { 0% { transform: translateY(calc(var(--cel) * -.5)) scale(1.25); opacity: .3; } 70% { transform: translateY(0) scale(.94); opacity: 1; } 100% { transform: none; } }
@keyframes rv-tiembla { 50% { transform: translateY(-2px); } }
@keyframes rv-gana { 50% { transform: scale(1.08) translateY(-2px); filter: brightness(1.2); } }
@keyframes rv-pista { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1); } }
@keyframes rv-no { 33% { transform: translateX(-4px); } 66% { transform: translateX(4px); } }

@media (max-width: 760px) {
  .rv { --cel: max(32px, min(calc((100vw - 64px) / 8), calc((100vh - 330px) / 8))); --pad: 18px; gap: 10px; }
  .rv-marco { border-radius: 14px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #a8703c, inset 0 0 0 4px #6a3f1f, inset 0 -4px 0 #5a3418; }
  .rv-esq svg { width: 14px; height: 14px; }
  .rv-esq-1 { left: 3px; top: 3px; } .rv-esq-2 { right: 3px; top: 3px; } .rv-esq-3 { left: 3px; bottom: 3px; } .rv-esq-4 { right: 3px; bottom: 3px; }
  .rv-letras, .rv-nums { font-size: 11px; }
  .rv-letras { top: 3px; height: calc(var(--pad) - 4px); } .rv-nums { left: 3px; width: calc(var(--pad) - 4px); }
  .rv-cnt-f svg { width: 28px; height: 28px; }
  .rv-cnt b { font-size: 21px; }
  .rv-c.rv-prev::after { font-size: 11px; right: -2px; top: -4px; }
  .rv-ayuda { font-size: 14px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-f.rv-cae, .rv-f.rv-giraria, .rv-f.gana, .rv-pista, .rv-c.rv-no { animation: none !important; }
  .rv-barra i { transition: none; }
  .rv-f.gana { filter: brightness(1.2); outline: 3px solid var(--cq-yellow); outline-offset: -2px; border-radius: 50%; }
}