/* ═══════════════════════════════════════════════════════════
   AVISO FLOTANTE
   ═══════════════════════════════════════════════════════════ */
.flash{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:110;
  background:var(--almagre);color:#F6E6E1;font-family:var(--serif);font-size:14.5px;
  padding:10px 20px;box-shadow:0 6px 24px rgba(0,0,0,.45);max-width:92vw;text-align:center}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.velo{position:fixed;inset:0;background:rgba(30,25,19,.88);z-index:130;display:flex;
  align-items:center;justify-content:center;padding:18px}
.md{background:var(--tiza);max-width:544px;width:100%;padding:26px 28px;max-height:88vh;
  overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6);border-top:3px solid var(--almagre)}
.md.asc{border-top-color:var(--ocre)}
/* la capa de medallas: es una vitrina, necesita ancho */
.md.ancho{max-width:760px;border-top-color:var(--ocre)}
.md-pie{display:flex;justify-content:flex-end;margin-top:18px;
  padding-top:16px;border-top:var(--lin)}
.md .kick{font-family:var(--sans);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tiza5);font-weight:700;margin-bottom:5px}
.md h3{font-family:var(--disp);font-size:32px;font-weight:500;color:var(--tinta);
  letter-spacing:.02em;line-height:1}
.md .ev{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--tinta2);
  margin:10px 0 20px;line-height:1.45}
.op{background:var(--tiza2);padding:14px 16px;margin-bottom:10px;border:1px solid var(--tiza3)}
.op.pri{border-color:var(--ocre);background:#E9E4D2}
.op .t{font-family:var(--sans);font-size:9px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tiza5);font-weight:700}
.op .x{font-family:var(--serif);font-size:14.5px;color:var(--tinta2);margin:5px 0 12px;line-height:1.42}
.op ul{list-style:none;margin:7px 0 13px}
.op li{font-family:var(--serif);font-size:14.5px;color:var(--tinta2);padding-left:15px;
  position:relative;line-height:1.5}
.op li::before{content:'·';position:absolute;left:4px;color:var(--ocre);font-weight:700}

/* ═══════════════════════════════════════════════════════════
   TESTIGO — la barra de pruebas
   No va a existir en el juego publicado. Ver README.
   ═══════════════════════════════════════════════════════════ */
.dev{position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--umbra2);
  border-top:1px solid var(--umbra4);box-shadow:0 -8px 24px -12px rgba(0,0,0,.7)}
.dv2{max-width:1280px;margin:0 auto;padding:8px 20px;display:flex;gap:7px;
  align-items:center;flex-wrap:wrap}
.dev .l{font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--umbra5);font-weight:700}
/* el select también se toca: mismo radio y mismo alto que un
   botón chico, para que no parezca un rótulo */
select.v{font-family:var(--mono);font-size:11.5px;background:var(--umbra);color:var(--tiza3);
  border:1px solid var(--umbra4);border-radius:var(--rad);height:32px;padding:0 8px;cursor:pointer}
select.v:hover{background:var(--umbra3)}
select.v:focus-visible{outline:2px solid var(--ocre);outline-offset:1px}
@media(max-width:600px){.dv2{padding:7px 12px;gap:5px}.dev .l{display:none}}