:root{--fondo:#12151c;--panel:#1c212c;--borde:#2c3444;--texto:#e8ecf4;--suave:#9aa5b8;--acento:#f0b429;--ok:#5fc46a;--mal:#ff6a4d;
--Luz:#f2e27a;--Agua:#4aa8ff;--Oscuridad:#9b7bd1;--Fuego:#ff6a4d;--Naturaleza:#5fc46a;--cw:clamp(34px,min(12vw,calc((100dvh - 230px)/8.6)),84px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--texto);font:14px/1.35 system-ui,Segoe UI,Roboto,sans-serif}
button,select{background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:8px;padding:8px 12px;font:inherit}
button:disabled{opacity:.4}
button.grande{padding:12px 24px;font-size:17px;background:var(--acento);color:#111;border:0;font-weight:700}
button.ok{background:var(--ok);color:#111;border:0;font-weight:600}
button.mal{background:var(--mal);color:#111;border:0}
#inicio{max-width:420px;margin:0 auto;padding:24px 18px;display:flex;flex-direction:column;gap:14px}
#inicio h1{margin:0;font-size:26px}.sub,.nota{color:var(--suave);margin:0}
#inicio label{display:flex;flex-direction:column;gap:4px;color:var(--suave);font-size:13px}.duo{display:flex;gap:8px}.duo select{flex:1}
#juego{display:flex;flex-direction:column;height:100dvh}
#barra{display:flex;gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--borde)}#turno{flex:1;font-weight:600}
#barra button{padding:4px 10px}
#aviso{padding:6px 10px;background:#242b3a;color:var(--acento);min-height:30px;font-weight:600}
#tablero{flex:1;overflow:auto;display:flex;flex-direction:column;justify-content:space-between;padding:6px;gap:4px}
.lado{display:flex;flex-direction:column;gap:4px}
.fila{display:flex;gap:4px;flex-wrap:wrap;align-items:center;min-height:calc(var(--cw)*1.4*.55)}
.fila.batalla{min-height:calc(var(--cw)*1.42 + 8px);background:#161b25;border-radius:8px;padding:4px}
.fila.info{min-height:22px;color:var(--suave);font-size:12px;gap:10px}
.fila.mazona{flex-wrap:nowrap;overflow:hidden;min-height:calc(var(--cw)*.77 + 6px)}.fila.mazona .c+.c{margin-left:calc(var(--cw)*-.28)}
.c{position:relative;width:var(--cw);height:calc(var(--cw)*1.4);border-radius:5px;background:#0b0d12 center/cover no-repeat;border:2px solid #000;flex:0 0 auto;cursor:pointer;transition:transform .15s}
.c.g{transform:rotate(90deg);margin:0 calc(var(--cw)*.2)}
.c.dorso{background-image:linear-gradient(135deg,#3a2f6b,#1b1740);background-size:auto}
.c.mini{width:calc(var(--cw)*.55);height:calc(var(--cw)*.77)}
.c .p{position:absolute;bottom:0;left:0;right:0;background:#000b;font-size:10px;text-align:center;line-height:13px}
.c .d{position:absolute;top:0;right:0;background:var(--acento);color:#111;font-size:10px;padding:0 3px;border-radius:0 0 0 4px;font-weight:700}
.c.elegible{outline:3px solid var(--acento);box-shadow:0 0 10px var(--acento)}
.c.accion{outline:3px solid var(--ok);box-shadow:0 0 8px var(--ok)}
.c.sel{outline:3px solid #fff}
.c.mareada::after{content:"z";position:absolute;top:0;left:2px;font-size:10px;color:#fff}
.civ-Luz{border-color:var(--Luz)}.civ-Agua{border-color:var(--Agua)}.civ-Oscuridad{border-color:var(--Oscuridad)}.civ-Fuego{border-color:var(--Fuego)}.civ-Naturaleza{border-color:var(--Naturaleza)}
#acciones{display:flex;gap:8px;flex-wrap:wrap;padding:6px 10px;border-top:1px solid var(--borde);min-height:46px}
#mano{display:flex;gap:6px;overflow-x:auto;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--borde);background:#0e1117;min-height:calc(var(--cw)*1.4*1.25 + 16px)}
#mano .c{width:calc(var(--cw)*1.25);height:calc(var(--cw)*1.4*1.25)}
#modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:12px;z-index:9}#modal[hidden]{display:none}
#modal-caja{background:var(--panel);border:1px solid var(--borde);border-radius:12px;max-width:560px;width:100%;max-height:92dvh;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ficha{display:grid;grid-template-columns:150px 1fr;gap:12px}.ficha img{width:100%;border-radius:6px}
.ficha h3{margin:0}.ficha .hab{background:var(--fondo);border-left:3px solid var(--acento);padding:6px 8px;margin:5px 0;border-radius:4px}
.ficha .dato{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}.ficha .dato span{background:var(--fondo);border:1px solid var(--borde);border-radius:6px;padding:2px 7px;font-size:12px}
.botones{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lista{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.lista .c{width:calc(var(--cw)*1.5);height:calc(var(--cw)*1.4*1.5)}
#log{position:fixed;left:0;right:0;bottom:0;max-height:45dvh;overflow:auto;margin:0;background:#000d;padding:10px;font-size:12px;white-space:pre-wrap;z-index:8}
@media(max-width:420px){.ficha{grid-template-columns:110px 1fr}}

.evo{position:relative;flex:0 0 auto;width:var(--cw);height:calc(var(--cw)*1.4);margin:8px 0 0 8px}
.evo.g{transform:rotate(90deg);margin:8px calc(var(--cw)*.2) 0 calc(var(--cw)*.2 + 8px)}
.evo .under{position:absolute;left:0;top:0;opacity:.85;filter:brightness(.75)}
.evo .c:not(.under){position:relative;z-index:1}

button.sec{background:transparent;color:var(--suave);font-size:13px;padding:6px 10px}
#barra #reportar{padding:4px 8px;font-size:12px}

#barra .test{padding:4px 8px;font-size:12px;border-style:dashed;color:var(--acento)}