/* ---------- ta-te-ti ---------- */
.gtt{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:330px;
  background:var(--bg2);padding:8px;border-radius:18px;border:1px solid var(--line);
}
.gtt .tt{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:#221f30;border-radius:12px;cursor:pointer;
  font-size:clamp(34px,13vw,52px);line-height:1;font-weight:300;
}
.gtt .tt.j1{color:#e0574f}
.gtt .tt.j2{color:#f0c05e}
.gtt .tt.gana{background:#2e2a45}

/* ---------- culebrita ---------- */
.gcu{
  display:block;border-radius:16px;border:1px solid var(--line);background:var(--bg2);
  touch-action:none;
}

/* ---------- batalla naval ---------- */
.gnv{
  display:grid;grid-template-columns:repeat(8,1fr);gap:3px;
  background:var(--bg2);padding:6px;border-radius:14px;border:1px solid var(--line);
  max-width:400px;
}
.gnv .nv{
  aspect-ratio:1;border-radius:5px;background:#232038;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.gnv.propio .nv{cursor:default}
.gnv .nv.barco{background:#4f9de0}
.gnv .nv.visto{cursor:default}
.gnv .nv.agua{background:#1b1930;box-shadow:inset 0 0 0 2px #2e2a42}
.gnv .nv.agua::after{content:"";width:5px;height:5px;border-radius:50%;background:#4a4460}
.gnv .nv.tocado{background:#6b3030}
.gnv .nv.tocado::after{content:"✕";color:#ff8f7f;font-size:12px;font-weight:800}
.gnv .nv.hundido{background:#e0574f}
.gnv .nv.hundido::after{content:"✕";color:#2b0f0d;font-size:12px;font-weight:800}

.pasar{text-align:center;padding:44px 10px}
.pasar p{margin:0;color:var(--dim);font-size:14px}
.pasar h3{margin:6px 0 22px;font-size:30px;color:var(--acc)}

/* ---------- yo nunca nunca ---------- */
.niveles{padding-top:6px}
.niveles p{margin:0 0 14px;text-align:center;color:var(--dim);font-size:14.5px}
.nivel{
  display:block;width:100%;text-align:left;margin-bottom:10px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;color:var(--txt);font:inherit;cursor:pointer;
}
.nivel b{display:block;font-size:17px;margin-bottom:3px}
.nivel small{color:var(--dim);font-size:12.5px;line-height:1.4}
.nivel:active{border-color:var(--acc)}

/* ---------- solitario ---------- */
.sol{--ancho:calc((100vw - 44px) / 7);--alto:calc(var(--ancho) * 1.45)}
@media (min-width:520px){ .sol{--ancho:64px;--alto:93px} }

.sol .arriba{display:flex;gap:4px;margin-bottom:16px}
.sol .sep{flex:1;min-width:2px}
.sol .hueco{
  width:var(--ancho);height:var(--alto);flex:none;
  border-radius:6px;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  color:#4a4460;font-size:17px;
}
.sol .hueco.pozo{cursor:pointer;border-style:solid}
.sol .hueco.vacio{border-style:dashed}

.sol .columnas{display:grid;grid-template-columns:repeat(7,var(--ancho));gap:4px}
.sol .col{min-height:var(--alto);display:flex;flex-direction:column}
.sol .col .ct{margin-top:calc(var(--alto) * -0.72)}
.sol .col .ct:first-child{margin-top:0}

.sol .ct{
  width:var(--ancho);height:var(--alto);flex:none;
  border-radius:6px;background:#f3eee6;color:#201c2c;
  border:1px solid #cbc3b8;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:2px;line-height:1;position:relative;cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.sol .ct b{font-size:calc(var(--ancho) * .38);font-weight:800}
.sol .ct i{font-size:calc(var(--ancho) * .34);font-style:normal;margin-top:1px}
.sol .ct.rojo{color:#c9302c}
.sol .ct.tapada{
  background:repeating-linear-gradient(45deg,#3a3357,#3a3357 4px,#332e4d 4px,#332e4d 8px);
  border-color:#4a4270;
}
.sol .ct.sel{outline:2px solid var(--acc);outline-offset:1px;transform:translateY(-4px)}