/* Hundir la flota y Flota de multiplicar (/dos/flota/, /dos/flotax/): tableros de mar pixel, barcos, efectos y paneles.
   Lo pinta /dos/flota/motor.js. Tamaño de casilla --cel según el número de casillas --n y el espacio libre. */
.fl { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; user-select: none; -webkit-user-select: none; }
.fl-cuerpo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fl-mares { display: flex; gap: 26px; justify-content: center; align-items: flex-start; width: 100%; }
.fl-mar { --cel: max(24px, min(50px, calc((min(100vw, 1180px) - 210px) / 2 / (var(--n) + .9)), calc((100vh - 370px) / (var(--n) + 1.2))));
          position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fl-solo .fl-mar { --cel: max(28px, min(56px, calc((min(100vw, 1180px) - 470px) / (var(--n) + .9)), calc((100vh - 330px) / (var(--n) + 1.2)))); }
.fl-mar-t { margin: 0; font: 800 20px/1.1 var(--cq-head); display: flex; align-items: center; gap: 8px; }
.fl-rival .fl-mar-t::before { content: ""; width: 14px; height: 14px; border: 3px solid var(--cq-ink); background: var(--cq-coral); transform: rotate(45deg); }
.fl-mio .fl-mar-t::before, .fl-col .fl-mar-t::before { content: ""; width: 14px; height: 14px; border: 3px solid var(--cq-ink); background: var(--cq-mint); border-radius: 50%; }

/* marco de puerto: madera oscura con cuerda, cabeceras de letras y números */
.fl-marco { position: relative; display: grid; grid-template-columns: calc(var(--cel) * .8) auto; grid-template-rows: calc(var(--cel) * .72) auto;
            padding: 6px 12px 12px 6px; border: 3px solid var(--cq-ink); border-radius: 16px; background: #24496f;
            box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #3a6c99, inset 0 -6px 0 #183553; }
.fl-cc { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--n), var(--cel)); align-items: center; position: relative; }
.fl-ff { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(var(--n), var(--cel)); align-items: center; }
.fl-cc span, .fl-ff span { text-align: center; font: 800 calc(var(--cel) * .36)/1 var(--cq-head); color: #cfe6ff; transition: color .12s, transform .12s; }
.fl-cc span.luz, .fl-ff span.luz { color: var(--cq-yellow); transform: scale(1.25); }
.fl-tab { grid-column: 2; grid-row: 2; position: relative; width: calc(var(--cel) * var(--n)); height: calc(var(--cel) * var(--n)); border: 3px solid #0f2238;
          border-radius: 4px; overflow: hidden; background: #3b82c4; touch-action: none; }
.fl-agua, .fl-agua-b, .fl-lineas, .fl-barcos, .fl-marcas, .fl-fx, .fl-celdas { position: absolute; inset: 0; }
.fl-agua svg, .fl-lineas { width: 100%; height: 100%; display: block; }
.fl-agua-b { opacity: 0; animation: fl-ola 2.2s steps(1) infinite; }
.fl-lineas { fill: rgba(220, 240, 255, .24); pointer-events: none; }
.fl-barcos, .fl-marcas, .fl-fx { pointer-events: none; }
.fl-celdas { display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); z-index: 5; }
.fl-celda { border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 2px; }
.fl-celda:focus-visible { outline: 3px solid var(--cq-yellow); outline-offset: -3px; box-shadow: inset 0 0 0 5px rgba(31, 34, 64, .55); }
.fl-rival.espera .fl-celda, .fl-celda[aria-disabled="true"] { cursor: default; }
.fl-rival.activo .fl-celda:not([aria-disabled="true"]):hover { background: rgba(255, 207, 74, .18); }

/* piezas sobre el mar */
.fl-barco { position: absolute; left: calc(var(--c) * var(--cel)); top: calc(var(--r) * var(--cel)); width: calc(var(--l) * var(--cel)); height: var(--cel);
            line-height: 0; filter: drop-shadow(0 calc(var(--cel) * .06) 0 rgba(15, 34, 56, .45)); transition: left .12s, top .12s; }
.fl-barco svg { width: 100%; height: 100%; display: block; }
.fl-barco.v { transform-origin: 0 0; transform: translateX(var(--cel)) rotate(90deg); filter: drop-shadow(calc(var(--cel) * -.06) 0 0 rgba(15, 34, 56, .45)); }
.fl-barco.sel { animation: fl-sel 1s steps(2) infinite; }
.fl-barco.sel svg { filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 var(--cq-yellow)) drop-shadow(-2px 0 0 var(--cq-yellow)) drop-shadow(0 2px 0 var(--cq-yellow)) drop-shadow(0 -2px 0 var(--cq-yellow)); }
.fl-barco.mal svg { filter: drop-shadow(2px 0 0 var(--cq-red)) drop-shadow(-2px 0 0 var(--cq-red)) drop-shadow(0 2px 0 var(--cq-red)) drop-shadow(0 -2px 0 var(--cq-red)); opacity: .8; }
.fl-barco.fantasma { opacity: .75; z-index: 3; transition: none; }
.fl-barco.oculto { opacity: .25; }
.fl-barco.hundido svg { filter: grayscale(.85) brightness(.6) sepia(.25); }
.fl-barco.hundido.recien { animation: fl-hunde .9s ease-out; }
.fl-barco.revelado { opacity: .62; }
.fl-barco.revelado svg { filter: saturate(.7); }
.fl-marca { position: absolute; left: calc(var(--c) * var(--cel)); top: calc(var(--r) * var(--cel)); width: var(--cel); height: var(--cel); line-height: 0; }
.fl-marca svg { width: 100%; height: 100%; }
.fl-marca.nueva { opacity: 0; }
.fl-m-agua { padding: calc(var(--cel) * .06); }
.fl-fuego { position: absolute; inset: 0; }
.fl-fuego svg { position: absolute; inset: 0; }
.fl-fuego svg + svg { opacity: 0; animation: fl-ola .5s steps(1) infinite; }
.fl-humo { position: absolute; left: 10%; top: -30%; width: 80%; height: 80%; opacity: .85; animation: fl-humo 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
.fl-humo svg { width: 100%; height: 100%; }
.fl-mira { position: absolute; left: calc(var(--c) * var(--cel)); top: calc(var(--r) * var(--cel)); width: var(--cel); height: var(--cel); z-index: 4; line-height: 0;
           pointer-events: none; animation: fl-mira .8s steps(2) infinite; }
.fl-mira svg { width: 100%; height: 100%; }
.fl-bala, .fl-explo { position: absolute; left: calc(var(--c) * var(--cel)); top: calc(var(--r) * var(--cel)); width: var(--cel); height: var(--cel); line-height: 0; z-index: 4; }
.fl-bala { padding: 0 25%; animation: fl-cae .42s cubic-bezier(.5, 0, 1, 1) both; }
.fl-bala.espera { animation: fl-flota 1s ease-in-out infinite; }
.fl-bala svg, .fl-explo svg { width: 100%; height: 100%; }
.fl-explo { transform: scale(1.5); }
.fl-mar.tiembla .fl-marco { animation: fl-tiembla .35s linear; }
.fl-mio.bajo-fuego .fl-marco { box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #e9714f, inset 0 -6px 0 #183553; }
.fl-rival.activo .fl-marco { box-shadow: 6px 6px 0 var(--cq-yellow-d, #d9a520), inset 0 0 0 3px #ffcf4a, inset 0 -6px 0 #183553; }
.fl-cartel { position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%) rotate(-4deg); font: 800 clamp(22px, calc(var(--cel) * .9), 40px)/1 var(--cq-head);
             padding: 10px 18px; border: 3px solid var(--cq-ink); border-radius: 14px; background: #fff; color: var(--cq-ink); box-shadow: 4px 4px 0 var(--cq-ink);
             white-space: nowrap; pointer-events: none; animation: fl-cartel 1.5s ease-out forwards; }
.fl-cartel-agua { background: #cfeaff; }
.fl-cartel-tocado { background: var(--cq-yellow); }
.fl-cartel-hundido { background: var(--cq-coral); color: #3a1206; }
.fl-cartel-mal { background: var(--cq-lila-l, #e6dcff); }

/* estado de las flotas bajo cada mar */
.fl-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fl-estado ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 4px 8px; background: #fff; border: 3px solid var(--cq-ink); border-radius: 10px; }
.fl-estado li { position: relative; width: calc(var(--l) * 12px); height: 12px; line-height: 0; }
.fl-estado li svg { width: 100%; height: 100%; }
.fl-estado li.muerto svg { filter: grayscale(1) brightness(.75); opacity: .55; }
.fl-estado li.muerto::after { content: ""; position: absolute; left: -2px; right: -2px; top: 5px; height: 3px; background: var(--cq-red, #e5484d); transform: rotate(-8deg); }
.fl-quedan { font-weight: 800; font-size: 15px; color: var(--cq-ink2); }
.fl-cuentas { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cq-ink2); font-size: 15px; }

/* colocar */
.fl-lado { display: flex; flex-direction: column; gap: 12px; max-width: 360px; align-self: center; }
.fl-panel { background: #fff; border: 3px solid var(--cq-ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--cq-ink); padding: 18px; }
.fl-h3 { margin: 0; font: 800 22px/1.15 var(--cq-head); }
.fl-ayuda { margin: 0; color: var(--cq-ink2); font-size: 15.5px; }
.fl-bandeja { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fl-pieza { width: 100%; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 12px; text-align: left;
            padding: 6px 10px; min-height: 52px; border: 3px solid var(--cq-ink); border-radius: 12px; background: #e8f3ff; color: var(--cq-ink); font: inherit; cursor: grab;
            box-shadow: 3px 3px 0 var(--cq-ink); touch-action: none; }
.fl-pieza:hover { background: #d4e9ff; }
.fl-pieza[aria-selected="true"] { background: var(--cq-yellow); box-shadow: 3px 3px 0 var(--cq-ink), inset 0 0 0 2px #fff; }
.fl-pieza.puesto { background: #f1f4f8; }
.fl-pieza.puesto[aria-selected="true"] { background: var(--cq-yellow-l); }
.fl-pieza-img { grid-row: 1 / span 2; line-height: 0; display: flex; }
.fl-pieza-img svg { width: calc(var(--l) * 19px); height: 19px; }
.fl-pieza b { font: 800 16px/1.1 var(--cq-head); align-self: end; }
.fl-pieza small { color: var(--cq-ink2); font-weight: 700; font-size: 13px; align-self: start; }
.fl-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-ico-girar { font-size: 20px; line-height: 1; }
.fl-listo { width: 100%; justify-content: center; }
.fl-listo:disabled { opacity: .5; cursor: not-allowed; }
.fl-espera-txt { display: flex; align-items: center; gap: 10px; justify-content: center; font: 800 19px/1.3 var(--cq-head); margin: 0; text-align: center; }

/* elegir tamaño */
.fl-opc { width: min(860px, 100%); background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg, 22px); box-shadow: var(--cq-sh-lg, 6px 6px 0 #1f2240);
          padding: 24px; text-align: center; }
.fl-h { margin: 0 0 16px; }
.fl-opc-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fl-opc-b { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 16px; border: 3px solid var(--cq-ink); border-radius: 18px;
            background: var(--cq-bg, #fbf8f2); color: var(--cq-ink); font: inherit; cursor: pointer; box-shadow: var(--cq-sh, 4px 4px 0 #1f2240); transition: transform .14s, box-shadow .14s; }
.fl-opc-b:hover, .fl-opc-b:focus-visible { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--cq-ink); background: var(--cq-yellow-l); }
.fl-opc-b:focus-visible { outline: 3px solid var(--cq-blue); outline-offset: 3px; }
.fl-opc-mar { width: 120px; height: 120px; border: 3px solid var(--cq-ink); border-radius: 10px; overflow: hidden; line-height: 0; position: relative;
              background-image: linear-gradient(rgba(220, 240, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 240, 255, .35) 1px, transparent 1px); }
.fl-opc-mar svg { width: 100%; height: 100%; }
.fl-opc-mar::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(220, 240, 255, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 240, 255, .4) 1px, transparent 1px);
                     background-size: calc(100% / var(--m)) calc(100% / var(--m)); }
.fl-opc-b b { font: 800 21px/1.1 var(--cq-head); }
.fl-opc-b small { color: var(--cq-ink2); font-size: 15px; font-weight: 700; }
.fl-opc-flota { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.fl-opc-flota span { line-height: 0; }
.fl-opc-flota svg { width: calc(var(--l) * 11px); height: 11px; }

/* cortina propia mientras sale el telón «pasa la tablet» */
.fl-cortina { position: absolute; inset: -8px; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 18px;
              background: repeating-linear-gradient(90deg, #24496f 0 26px, #1d3c5c 26px 30px); border: 3px solid var(--cq-ink); color: #fff; font: 800 26px/1 var(--cq-head); }

/* flotax: pregunta de multiplicar */
.flx .fl-cc span, .flx .fl-ff span { font-size: calc(var(--cel) * .42); color: #fff4c9; }
.flx .fl-por { position: absolute; left: calc(var(--cel) * -.8); width: calc(var(--cel) * .8); color: var(--cq-yellow) !important; }
.fl-preg { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(15, 34, 56, .5); border-radius: 16px; }
.fl-preg-in { position: relative; width: min(320px, 94%); background: #2e4a3a; border: 3px solid var(--cq-ink); border-radius: 18px; padding: 16px 16px 12px; color: #fff;
              box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 4px #7a5130, inset 0 0 0 7px #4a3b2c; text-align: center; animation: dos-entra .2s ease-out; }
.fl-loro { position: absolute; left: -26px; top: -46px; line-height: 0; filter: drop-shadow(2px 2px 0 rgba(31, 34, 64, .4)); }
.fl-preg-t { margin: 4px 0 10px; font: 800 38px/1 var(--cq-head); color: #fff; letter-spacing: .5px; }
.fl-preg-t span { color: #fff4c9; }
.fl-resp { display: inline-block; min-width: 2.1em; padding: 2px 6px; border-bottom: 4px dashed #fff4c9; color: var(--cq-yellow); }
.fl-resp s { color: #ffb4a3; }
.fl-preg.bien .fl-preg-in { background: #2f7a55; }
.fl-preg.mal .fl-preg-in { background: #7a3a3a; }
.fl-tecl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fl-tecl button { min-height: 50px; font: 800 26px/1 var(--cq-head); border: 3px solid var(--cq-ink); border-radius: 12px; background: #f6efe2; color: var(--cq-ink);
                  box-shadow: 3px 3px 0 #13261c; cursor: pointer; display: grid; place-items: center; }
.fl-tecl button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #13261c; }
.fl-tecl button:focus-visible { outline: 3px solid var(--cq-yellow); outline-offset: 2px; }
.fl-tecl .fl-t-ok { background: var(--cq-yellow); }
.fl-tecl .fl-t-borrar { background: #ffd7cc; }
.fl-preg-x { margin-top: 10px; background: none; border: 0; color: #fff4c9; font: 700 15px/1.2 var(--cq-body, inherit); text-decoration: underline; cursor: pointer; min-height: 40px; }
.fl-repaso { background: #fff; border: 3px solid var(--cq-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--cq-ink); padding: 12px 18px; }
.fl-repaso h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font: 800 20px/1.1 var(--cq-head); }
.fl-repaso ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.fl-repaso li { padding: 4px 10px; border: 2px solid var(--cq-ink); border-radius: 10px; background: var(--cq-yellow-l); font-weight: 700; font-size: 17px; }

@keyframes fl-ola { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes fl-sel { 50% { transform: translateY(-2px); } }
.fl-barco.v.sel { animation: none; }
@keyframes fl-humo { 0% { transform: translateY(20%) scale(.6); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-70%) scale(1.15); opacity: 0; } }
@keyframes fl-mira { 50% { transform: scale(.88); } }
@keyframes fl-cae { from { transform: translateY(calc(var(--cel) * -4)) scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes fl-flota { 50% { transform: translateY(calc(var(--cel) * -.25)); } }
@keyframes fl-tiembla { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(2px, 1px); } }
@keyframes fl-cartel { 0% { transform: translate(-50%, -50%) rotate(-4deg) scale(.4); opacity: 0; } 12% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.12); opacity: 1; }
                       22% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -62%) rotate(-4deg); opacity: 0; } }
@keyframes fl-hunde { 0% { filter: brightness(2); } 30% { transform: translateY(3px); } 100% { filter: none; } }
.fl-barco.v.hundido.recien { animation: none; }

@media (max-width: 1000px) {
  .fl-mares { flex-direction: column; align-items: center; gap: 18px; }
  .fl-mar, .fl-solo .fl-mar { --cel: max(26px, min(50px, calc((100vw - 64px) / (var(--n) + .9)), calc((100vh - 300px) / (var(--n) + 1.2)))); }
  .fl-mares:not(.fl-solo) .fl-mio { --cel: max(18px, min(34px, calc((100vw - 64px) / (var(--n) + .9) * .62))); }
  .fl-lado { max-width: 520px; width: 100%; }
  .fl-opc-l { grid-template-columns: minmax(0, 1fr); }
  .fl-opc-b { display: grid; grid-template-columns: auto 1fr; text-align: left; align-items: center; gap: 2px 14px; }
  .fl-opc-mar { grid-row: 1 / span 3; width: 84px; height: 84px; }
}
@media (max-width: 760px) {
  .fl-mar, .fl-solo .fl-mar { --cel: calc((100vw - 64px) / (var(--n) + .9)); }
  .fl-marco { padding: 4px 8px 8px 4px; border-radius: 12px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #3a6c99, inset 0 -4px 0 #183553; }
  .fl-rival.activo .fl-marco { box-shadow: 4px 4px 0 #d9a520, inset 0 0 0 2px #ffcf4a, inset 0 -4px 0 #183553; }
  .fl-opc { padding: 18px 14px; }
  .fl-panel { padding: 14px; }
  .fl-mar-t { font-size: 18px; }
  .fl-preg-t { font-size: 32px; }
  .fl-loro { left: -10px; top: -40px; }
  .fl-loro svg { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-agua-b, .fl-fuego svg + svg, .fl-humo, .fl-mira, .fl-bala, .fl-barco.sel, .fl-cartel, .fl-mar.tiembla .fl-marco, .fl-barco.hundido.recien { animation: none !important; }
  .fl-humo { opacity: .6; transform: translateY(-30%); }
  .fl-cartel { transform: translate(-50%, -50%) rotate(-4deg); }
}
/* reglas con dibujos */
.fl-reglas-img { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
.fl-reglas-img .cq-px { line-height: 0; border: 3px solid var(--cq-ink); border-radius: 10px; overflow: hidden; box-shadow: 3px 3px 0 var(--cq-ink); }
@media (max-width: 760px) { .fl-reglas-img svg { width: 96px; height: 72px; } }