*{box-sizing:border-box}
html,body{margin:0;background:#f3f5fb;color:#17223b;font-family:Tahoma,Arial,sans-serif}
.cr-tetris-wrap{max-width:1280px;margin:8px auto;padding:0 10px}
.cr-tetris-card{background:#fff;border:1px solid #dce3f2;border-radius:16px;box-shadow:0 10px 30px rgba(32,56,100,.12);overflow:hidden;display:flex;flex-direction:column}
.cr-tetris-head{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;padding:8px 14px;background:linear-gradient(135deg,#152b55,#315c98);color:#fff}
.eyebrow{margin:0 0 2px;color:#f5d477;font-size:10px;letter-spacing:1.3px;font-weight:bold}
.cr-tetris-head h1{margin:0;font-size:clamp(18px,2.4vw,24px);line-height:1.1}
.subtitulo{margin:2px 0 0;font-size:11px;color:#dce8ff}
.cr-tetris-controls{display:flex;align-items:end;gap:6px;flex-wrap:wrap}
.cr-tetris-controls .campo{display:flex;flex-direction:column;gap:2px}
.cr-tetris-controls label{font-size:10px;color:#dce8ff;white-space:nowrap}
.cr-tetris-controls select,.cr-tetris-controls button{border:0;border-radius:7px;padding:6px 8px;font-weight:bold;font-size:12px}
.cr-tetris-controls select{background:#fff;color:#17223b}
.cr-tetris-controls button{background:#e8b93f;color:#18223b;cursor:pointer}
.cr-tetris-controls button#iniciar{background:#3bb273;color:#fff}
.cr-tetris-controls button#iniciar:hover{background:#2d925d}
.cr-tetris-controls button#nuevo{background:#dce8fa;color:#18325d}
.cr-tetris-controls button#pausa{background:#8aa0c9;color:#0f1e3d}
.cr-tetris-controls button#pausa:hover{background:#7590bd}
.cr-tetris-controls button:disabled{opacity:.5;cursor:not-allowed}
.estado{padding:5px 14px;background:#eef4ff;color:#385783;font-size:12px;font-weight:bold;text-align:center;border-bottom:1px solid #d7e3f5}

.cr-tetris-layout{display:grid;grid-template-columns:minmax(200px,.82fr) minmax(440px,1.55fr) minmax(210px,.85fr);gap:12px;padding:8px 12px;align-items:start;flex:1 1 auto;min-height:0}

.panel-estado{display:flex;flex-direction:column;gap:8px;min-width:0}
.objetivo{margin:0;padding:6px 9px;background:#fff9df;border-left:5px solid #e8b93f;border-radius:9px}
.objetivo span{display:block;font-size:11px;color:#80621b;text-transform:uppercase;font-weight:bold;letter-spacing:.4px}
.objetivo strong{display:block;margin:2px 0;font-size:14px;color:#172b54}
.objetivo small{display:block;color:#6d6142;line-height:1.35;font-size:11px}
.feedback{min-height:30px;padding:6px;font-size:11px;border-radius:9px;line-height:1.2}
.feedback.ok{background:#e3f4e8;color:#17633a}
.feedback.error{background:#fde8e8;color:#8a2525}
.progreso{display:flex;justify-content:space-between;color:#64748b;font-weight:bold;font-size:12px}

details.como-se-juega{background:#f4f7fc;border:1px solid #d9e2f0;border-radius:9px;padding:6px 9px}
details.como-se-juega summary{cursor:pointer;font-weight:bold;color:#172b54;font-size:12px;list-style:none}
details.como-se-juega summary::-webkit-details-marker{display:none}
details.como-se-juega summary::before{content:'▸ ';color:#e8b93f}
details.como-se-juega[open] summary::before{content:'▾ '}
details.como-se-juega ol{margin:6px 0 0;padding-left:16px;color:#52627c;line-height:1.35;font-size:11px}

.zona-juego{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0}
.marcador{display:flex;justify-content:space-between;width:100%;color:#52627c;font-size:11px;margin-bottom:3px}
.marcador strong{color:#172b54}
.tablero{position:relative;width:100%;height:clamp(220px,calc(100vh - 330px),380px);background-color:#132b53;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:10% 6.25%;border:6px solid #0c1c37;border-radius:9px;overflow:hidden;outline:3px solid transparent}
.tablero:focus{outline-color:#e8b93f}
.linea-meta{position:absolute;bottom:7%;left:0;width:100%;height:6.25%;border-top:3px dashed #f5d477;border-bottom:3px dashed #f5d477;background:rgba(232,185,63,.14);pointer-events:none}
.linea-meta span{position:absolute;right:5px;top:-20px;color:#f5d477;font-size:10px;font-weight:bold}
.pieza{position:absolute;height:6.25%;min-width:10%;padding:3px;border:2px solid #fff;border-radius:6px;background:linear-gradient(135deg,#7057d8,#a869df);color:#fff;text-align:center;margin:0 3px;width:calc(10% - 6px);font-size:12px;font-weight:bold;line-height:1.05;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.35);transition:left .09s,top .09s}
.pieza.fija{background:linear-gradient(135deg,#2d72b7,#57a8c8);position:absolute}
.pieza.celebra{animation:celebra .5s ease-in-out 2}
@keyframes celebra{50%{transform:scale(1.08);filter:brightness(1.4)}}
.movil-controles{display:flex;gap:4px;margin-top:5px}
.movil-controles button{border:0;border-radius:8px;background:#dce8fa;color:#18325d;padding:6px 9px;font-weight:bold;cursor:pointer}
.destinos{position:relative;width:100%;height:34px;margin-top:5px;padding:4px;background:#0c1c37;border:3px solid #0c1c37;border-radius:7px;overflow:hidden}
.destino-bloque{position:absolute;top:4px;height:22px;display:flex;align-items:center;justify-content:center;padding:2px 6px;border:2px solid #6f84a8;border-radius:7px;background:#203b69;color:#b8c8e2;font-size:11px;font-weight:bold;white-space:nowrap;transition:left .09s}
.destino-bloque.objetivo-activo{border-color:#fff3b0;background:linear-gradient(135deg,#e8b93f,#f5cf63);color:#172b54;box-shadow:0 0 9px rgba(232,185,63,.9)}
.destino-bloque.relleno{border-color:#8fd3ad;background:linear-gradient(135deg,#2d72b7,#57a8c8);color:#fff}
.destino-bloque.objetivo-activo::before{content:'↓';margin-right:5px;font-size:14px}
.leyenda-destino{width:100%;margin:4px 0 0;color:#64748b;font-size:10px;text-align:center}
.pieza-actual{width:100%;margin:3px 0 0;color:#52627c;font-size:12px;text-align:center}

.panel-jugador{display:flex;flex-direction:column;gap:8px;min-width:0}
.records-panel{margin:0;padding:7px 9px;background:#f4f7fc;border:1px solid #d9e2f0;border-radius:9px}
.records-panel .fila-doble{display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.records-panel label{display:block;margin-bottom:2px;color:#52627c;font-size:10px;font-weight:bold}
.records-panel input{box-sizing:border-box;width:100%;border:1px solid #c6d3e5;border-radius:6px;padding:4px 6px;background:#fff;color:#172b54;font-size:11px;margin-bottom:4px}
.records-panel button{margin-top:2px;border:0;border-radius:6px;padding:5px 8px;background:#18325d;color:#fff;font-size:11px;font-weight:bold;cursor:pointer;width:100%}
.records-panel button:hover{background:#28528d}
.records-estado{min-height:14px;margin-top:4px;color:#64748b;font-size:10px}
.ranking{margin:3px 0 0;padding-left:18px;color:#52627c;font-size:10px;line-height:1.3;max-height:120px;overflow-y:auto}
.ranking:empty{display:none}
.ranking li{padding:1px 0}
.ranking strong{color:#172b54}

.nota{border-top:1px solid #e2e8f3;margin:0;padding:4px 14px;color:#71809a;font-size:9px}
.nota code{background:#f0f3f8;padding:1px 4px;border-radius:4px}

.resumen-final{margin:4px 14px 0;padding:6px 10px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#eaf4ff;border:2px solid #7aa9d8;border-radius:9px;color:#17325e;font-size:11px;text-align:center}
.resumen-final[hidden]{display:none}
.resumen-final strong{font-size:13px;color:#17325e}
.resumen-final span{font-weight:bold}
.resumen-final #resumen-guardado{color:#17633a}
.resumen-final.guardando #resumen-guardado{color:#80621b}
.resumen-final.error #resumen-guardado{color:#8a2525}

.objetivo #objetivo-frase{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;max-height:38px;overflow:hidden;font-size:11px;line-height:16px}
.objetivo-chip{display:inline-flex;align-items:center;justify-content:center;min-height:16px;padding:1px 5px;border:1px solid #b7c8e4;border-radius:5px;background:#fff;color:#172b54;font-size:11px;line-height:14px;font-weight:700;white-space:nowrap;box-sizing:border-box}

.record-final{font-weight:bold;color:#17633a}

@media(max-width:900px){
  .cr-tetris-layout{grid-template-columns:1fr}
  .tablero{height:clamp(240px,55vh,420px)}
}
@media(max-width:760px){
  .cr-tetris-head{align-items:flex-start}
  .cr-tetris-wrap{margin:0;padding:0}
  .cr-tetris-card{border-radius:0}
}