@font-face {
  font-family: "Anton";
  src: url("anton.woff2") format("woff2");
  font-display: swap;
}
:root {
  --bg: #fff; --fg: #000; --neon: #00e5ff; --mal: #b00020;
  --bd: 3px solid var(--fg);
  --tit: "Anton", Impact, "Arial Narrow", sans-serif;
  --txt: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.5 var(--txt); }

h1, h2, .campo, .zona strong, .reintentar {
  font-family: var(--tit); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05;
}
h1 { font-size: clamp(48px, 11vw, 120px); }
.w { max-width: 1100px; padding: 0 16px; }
h1.w {
  margin: 24px auto 16px; display: flex; align-items: center; justify-content: center; gap: .2em; text-align: center;
  text-shadow: .01em .01em 0 var(--neon), .02em .02em 0 var(--neon), .03em .03em 0 var(--neon), .04em .04em 0 var(--neon), .05em .05em 0 var(--neon), .05em .05em .12em color-mix(in srgb, var(--neon) 60%, transparent);
}
h1.w .logo { height: 1.1em; width: auto; flex: none; filter: drop-shadow(1px 0 0 var(--fg)) drop-shadow(-1px 0 0 var(--fg)) drop-shadow(0 1px 0 var(--fg)) drop-shadow(0 -1px 0 var(--fg)) drop-shadow(.05em .05em 0 var(--neon)); }
h2 { font-size: clamp(30px, 6vw, 40px); margin: 20px 0 12px; border-bottom: var(--bd); padding-bottom: 6px; }

main { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; }
p { margin: 0 0 12px; }
.ojo { margin: 24px 0 0; font-size: 15px; }

.campo { display: block; margin: 18px 0 6px; font-size: 24px; }
select {
  width: 100%; min-height: 54px; padding: 10px 14px; font: inherit; color: var(--fg);
  background: var(--bg); border: var(--bd); border-radius: 14px;
}
select:focus { outline: 3px solid var(--neon); outline-offset: 2px; }
select:disabled { opacity: .45; }

.zona {
  --sombra: var(--fg);
  position: relative; display: block; margin-top: 22px; padding: 24px 14px; text-align: center; cursor: pointer;
  background: var(--bg); border: var(--bd); border-radius: 14px; box-shadow: 0 6px 0 var(--sombra);
  transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s;
}
.zona:hover, .zona.encima, .zona:focus-within {
  --sombra: var(--neon); border-color: var(--neon); transform: translateY(-3px); box-shadow: 0 9px 0 var(--sombra);
}
.zona strong { display: block; font-size: clamp(28px, 6vw, 40px); }
.zona span { display: block; margin-top: 8px; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.con-raton { display: none !important; }
@media (hover: hover) and (pointer: fine) { .con-raton { display: block !important; } }
.otros {
  display: block; width: fit-content; min-height: 44px; margin: 14px auto 0; padding: 10px 8px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.otros:hover { text-decoration-thickness: 3px; }
#otros:focus-visible + * { outline: 3px solid var(--neon); }

.aviso { margin: 20px 0 0; color: var(--mal); font-weight: 700; }

.bt {
  --sombra: var(--fg);
  min-height: 48px; padding: 8px 10px; font: 400 20px/1.05 var(--tit); text-transform: uppercase; letter-spacing: .01em;
  color: var(--fg); background: var(--bg); border: var(--bd); border-radius: 14px; box-shadow: 0 4px 0 var(--sombra);
  cursor: pointer; touch-action: manipulation;
}
.bt:hover, .bt:focus-visible { --sombra: var(--neon); border-color: var(--neon); outline: none; }
.bt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sombra); }
.bt:disabled { opacity: .45; cursor: default; }

.marcar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quitar { width: 100%; margin-top: 14px; }

#rejilla {
  list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(104px, 30%), 1fr));
}
.celda {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden; color: var(--fg); text-align: left;
  background: #eee; border: var(--bd); border-radius: 10px; cursor: pointer; touch-action: manipulation;
}
.celda:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.celda.marcada { border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon); }
.miniatura { position: relative; display: block; aspect-ratio: 1; background: #ddd; }
.miniatura img, .miniatura video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tipo, .peso {
  position: absolute; padding: 1px 5px; font-size: 12px; font-weight: 700; line-height: 1.3;
  color: #fff; background: rgba(0, 0, 0, .78);
}
.tipo { top: 0; right: 0; border-bottom-left-radius: 6px; }
.peso { bottom: 0; left: 0; border-top-right-radius: 6px; }
.casilla { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; margin: 0; accent-color: var(--fg); pointer-events: none; }
.destino, .situacion { display: block; padding: 3px 5px; overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; background: var(--bg); }
.situacion { font-weight: 700; }
.celda.ok .situacion { background: var(--neon); }
.celda.mal .situacion { color: #fff; background: var(--mal); white-space: normal; }
.celda progress { display: block; width: 100%; height: 6px; margin: 0; accent-color: var(--fg); }

#barra {
  position: sticky; bottom: 0; z-index: 2; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: var(--bd);
}
#barra > * { display: block; width: 100%; max-width: 728px; margin-inline: auto; }
#barra [hidden] { display: none; }
#estado { margin-bottom: 8px; font-weight: 700; }
#estado:empty { display: none; }
#total { height: 10px; margin-bottom: 10px; accent-color: var(--fg); }
.subir { min-height: 56px; font-size: 26px; }

@media (min-width: 700px) {
  #rejilla { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zona { transition: none; }
}
@media (max-width: 380px) {
  .marcar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}