/* Awalé · tablero de madera tallada (hoyos y graneros pixel de /dos/awale/px.js), semillas pixel y animación de siembra.
   --h = lado de un hoyo. En móvil (≤ 640 px) los graneros pasan arriba y abajo (--aw-horiz: 1, lo lee awale.js). */
.aw { --h: max(52px, min(108px, calc((100vw - 150px) / 8.7), calc((100vh - 330px) / 2.45)));
      --gw: calc(var(--h) * .96); --aw-horiz: 0;
      display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; user-select: none; -webkit-user-select: none; }
.aw-mesa { position: relative; }
.aw-tabla { position: relative; display: grid; grid-template-columns: var(--gw) auto var(--gw); align-items: stretch;
            gap: calc(var(--h) * .14); padding: calc(var(--h) * .17) calc(var(--h) * .2);
            border: 3px solid var(--cq-ink); border-radius: calc(var(--h) * .42);
            background: #b5733e var(--madera) 0 0 / calc(var(--h) * 1.1) repeat; image-rendering: pixelated;
            box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #d79a5f, inset 0 -8px 0 #7d4824, inset 0 6px 0 rgba(255, 236, 200, .25); }
/* patas */
.aw-mesa::before, .aw-mesa::after { content: ""; position: absolute; bottom: -16px; width: 30px; height: 18px; background: #7d4824;
                                    border: 3px solid var(--cq-ink); border-top: 0; border-radius: 0 0 7px 7px; z-index: -1; }
.aw-mesa::before { left: 14%; } .aw-mesa::after { right: 14%; }

.aw-filas { position: relative; display: grid; gap: calc(var(--h) * .2); }
/* surco central tallado entre las dos filas */
.aw-filas::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 2px;
                    background: #7d4824; box-shadow: 0 2px 0 #d79a5f; }
.aw-fila { position: relative; display: grid; grid-template-columns: repeat(6, var(--h)); gap: calc(var(--h) * .07);
           padding: calc(var(--h) * .05); border-radius: calc(var(--h) * .55); transition: background .25s, box-shadow .25s; }
/* riel del color del dueño en el borde exterior de cada fila */
.aw-fila::after { content: ""; position: absolute; left: 12%; right: 12%; height: 6px; border-radius: 3px; background: var(--j);
                  border: 2px solid var(--cq-ink); }
.aw-fila-arr::after { top: calc(var(--h) * -.17 - 2px); }
.aw-fila-aba::after { bottom: calc(var(--h) * -.17 - 2px); }
.aw-fila.activa { background: rgba(255, 244, 214, .2); box-shadow: inset 0 0 0 3px rgba(255, 228, 160, .55); }

.aw-hoyo { position: relative; width: var(--h); height: var(--h); padding: 0; border: 0; background: none; border-radius: 50%; cursor: default;
           -webkit-tap-highlight-color: transparent; color: var(--cq-ink); }
.aw-hoyo-arte, .aw-gran-arte { position: absolute; inset: 0; line-height: 0; pointer-events: none; }
.aw-hoyo-arte svg { width: 100%; height: 100%; display: block; }
.aw-sems { position: absolute; inset: 0; pointer-events: none; }
.aw-sem { position: absolute; width: calc(var(--h) * .25); transform: translate(-50%, -50%); line-height: 0; pointer-events: none;
          filter: drop-shadow(0 1.5px 0 rgba(20, 10, 4, .55)); }
.aw-sem svg { width: 100%; height: auto; display: block; }
.aw-num { position: absolute; right: -5px; bottom: -5px; min-width: 27px; height: 27px; padding: 0 4px; border-radius: 9px; border: 3px solid var(--cq-ink);
          background: #fffaf0; font: 800 15px/21px var(--cq-head); text-align: center; color: var(--cq-ink); z-index: 2; box-shadow: 2px 2px 0 rgba(31, 34, 64, .35); }
.aw-fila-arr .aw-num { bottom: auto; top: -5px; }
.aw-num.cero { background: #e9dcc6; color: #5b4636; }
.aw-pista { position: absolute; left: -4px; top: -4px; width: calc(var(--h) * .3); max-width: 26px; line-height: 0; display: none; z-index: 2; }
.aw-pista svg { width: 100%; height: auto; }
.aw-mas { position: absolute; left: calc(var(--h) * .22); top: -8px; font: 800 14px/1 var(--cq-head); color: #0f4f37; background: var(--cq-mint-l, #c9f0df);
          border: 2px solid var(--cq-ink); border-radius: 8px; padding: 2px 4px; z-index: 2; }
.aw-mas:empty { display: none; }
.aw-fila-aba .aw-pista { top: auto; bottom: -4px; } .aw-fila-aba .aw-mas { top: auto; bottom: -8px; }
.aw-hoyo.captura .aw-pista { display: block; animation: aw-brilla 1.2s steps(2) infinite; }

/* jugable, foco y marcas */
.aw-hoyo::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 4px solid transparent; pointer-events: none; z-index: 1; }
.aw-hoyo.puede { cursor: pointer; }
.aw-hoyo.puede:hover .aw-hoyo-arte, .aw-hoyo.puede:focus-visible .aw-hoyo-arte { filter: brightness(1.15) saturate(1.1); }
.aw-hoyo.puede:hover, .aw-hoyo.puede:focus-visible { transform: translateY(-2px); }
.aw-hoyo { transition: transform .12s; }
.aw-hoyo:focus-visible { outline: none; }
.aw-hoyo:focus-visible::before { border-color: var(--cq-yellow); box-shadow: 0 0 0 3px var(--cq-ink); }
.aw-hoyo.ultimo::before { border: 3px dashed #ffe8a3; }
.aw-hoyo.origen::before { border-color: var(--cq-yellow); box-shadow: 0 0 0 2px var(--cq-ink); }
.aw-hoyo.destino::before { border-color: #8ff0c6; box-shadow: 0 0 0 2px var(--cq-ink); }
.aw-hoyo.cae .aw-hoyo-arte { filter: brightness(1.2) sepia(.3); }
.aw-hoyo.cae::before { border-color: var(--cq-yellow); border-style: solid; box-shadow: 0 0 14px 4px rgba(255, 207, 74, .6), 0 0 0 2px var(--cq-ink); }
.aw-hoyo.capturado::before { border-color: var(--cq-mint); box-shadow: 0 0 16px 6px rgba(47, 174, 130, .7), 0 0 0 2px var(--cq-ink); animation: aw-pulso .3s steps(2) 3; }
.aw-hoyo.cae-sem .aw-sems { animation: aw-bote .16s ease-out; }
.aw.espera .aw-hoyo { cursor: default; }
.aw-vuela { position: absolute; left: 0; top: 0; z-index: 6; width: calc(var(--h) * .26); transform: translate(-50%, -50%); }

/* graneros */
.aw-gran { position: relative; width: var(--gw); min-height: calc(var(--h) * 1.8); }
.aw-gran-arte svg { width: 100%; height: 100%; display: block; }
.aw-gh { display: none; }
.aw-gran .aw-sem { width: calc(var(--h) * .22); }
.aw-gran-n { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); z-index: 3; }
.aw-gran-izq .aw-gran-n { bottom: auto; top: -16px; }
.aw-gran-n b { display: block; min-width: 42px; padding: 3px 8px; border-radius: 11px; border: 3px solid var(--cq-ink); background: var(--j); color: var(--j-ink);
               font: 800 21px/1.1 var(--cq-head); text-align: center; box-shadow: 3px 3px 0 var(--cq-ink); }
.aw-gran-slam { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; white-space: nowrap; padding: 8px 16px; border-radius: 999px;
                background: var(--cq-yellow); border: 3px solid var(--cq-ink); box-shadow: 4px 4px 0 var(--cq-ink); font: 800 19px/1.1 var(--cq-head);
                animation: dos-entra .25s ease-out; }

.aw-bajo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; max-width: 680px; text-align: center; }
.aw-info { min-height: 2.8em; margin: 0; font-weight: 700; font-size: 16.5px; color: var(--cq-ink2); }
.aw-pistas-b[aria-pressed="false"] { background: #eee8dc; }
.aw-pistas-b[aria-pressed="false"] svg { filter: grayscale(1) opacity(.6); }

/* reglas con ilustraciones */
.aw-reglas figure { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 10px; border-radius: 14px; background: #f8f2e6; border: 2px solid #e6dccb; }
.aw-reglas figure .cq-px { flex: none; line-height: 0; }
.aw-reglas figure svg { width: 200px; height: auto; border-radius: 6px; }
.aw-reglas figcaption { font-size: 16px; line-height: 1.4; }

@keyframes aw-bote { 50% { transform: translateY(-3px); } }
@keyframes aw-brilla { 50% { transform: scale(1.18) rotate(12deg); } }
@keyframes aw-pulso { 50% { transform: scale(1.06); } }

@media (max-width: 640px) {
  .aw { --h: min(64px, calc((100vw - 66px) / 6.42)); --aw-horiz: 1; }
  .aw-tabla { grid-template-columns: auto; padding: 12px 10px 14px; gap: 16px; border-radius: 20px;
              box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #d79a5f, inset 0 -6px 0 #7d4824; }
  .aw-gran { width: 100%; min-height: 0; height: calc((var(--h) * 6 + var(--h) * .35 + 10px) * 26 / 112); }
  .aw-gv { display: none; } .aw-gh { display: block; }
  .aw-gran .aw-sem { width: calc(var(--h) * .2); }
  .aw-gran-n { left: auto; right: -6px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .aw-gran-izq .aw-gran-n { top: 50%; }
  .aw-gran-n b { font-size: 18px; min-width: 36px; padding: 2px 6px; }
  .aw-fila { gap: calc(var(--h) * .07); }
  .aw-num { min-width: 23px; height: 23px; font-size: 13px; line-height: 17px; border-width: 2px; right: -4px; bottom: -4px; }
  .aw-fila-arr .aw-num { top: -4px; }
  .aw-mas { font-size: 12px; }
  .aw-info { font-size: 15px; }
  .aw-reglas figure { flex-direction: column; align-items: flex-start; }
  .aw-mesa::before, .aw-mesa::after { width: 22px; height: 12px; bottom: -11px; }
}
@media (prefers-reduced-motion: reduce) {
  .aw-hoyo.captura .aw-pista, .aw-hoyo.capturado::before, .aw-hoyo.cae-sem .aw-sems, .aw-gran-slam { animation: none !important; }
  .aw-hoyo, .aw-fila { transition: none; }
}