.bm-wrap{--navy:#10244a;--blue:#1768e9;--gold:#f4cf35;--ink:#17345f;--cream:#fffaf0;--green:#249447;--red:#d9363e;font-family:'Josefin Sans',Arial,sans-serif;color:var(--ink);max-width:1600px;margin:4px auto;padding:0 6px;box-sizing:border-box}
.bm-wrap *{box-sizing:border-box}
.bm-card{overflow:hidden;border:1px solid #d8e0ec;border-radius:14px;background:var(--cream);box-shadow:0 8px 20px rgba(16,36,74,.12)}
.bm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;background:var(--navy);color:#fff}
.bm-title-block h1{margin:0;color:#fff;font-size:clamp(20px,2.5vw,30px);line-height:1.05}
.eyebrow{margin:0 0 2px;color:#a9c8ff;font-size:11px;font-weight:800;letter-spacing:.08em}
.subtitle{margin:4px 0 0;color:#a9c8ff;font-size:12px}
.bm-identity{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid #d8e0ec;background:#fff}
.bm-identity h2{margin:0;flex:0 0 auto;font-size:14px;color:var(--navy)}
.bm-mode-toggle{display:flex;gap:3px;background:#eef2fa;border-radius:8px;padding:3px;flex:0 0 auto}
.bm-mode-btn{border:0;border-radius:6px;padding:6px 9px;font-size:11px;font-weight:800;color:var(--ink);background:transparent;cursor:pointer}
.bm-mode-btn.activo{background:var(--gold);color:var(--navy)}
.bm-selector{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700;white-space:nowrap;flex:1 1 200px;max-width:280px}
.bm-selector[hidden]{display:none}
.bm-selector select{min-width:0;width:100%;padding:5px 7px;border:1px solid #bbc9dd;border-radius:6px;background:#fff;color:var(--navy);font:inherit}
.bm-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1 1 320px}
.bm-fields label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;white-space:nowrap}
.bm-fields input{min-width:0;width:100%;padding:6px 8px;border:1px solid #bbc9dd;border-radius:6px;font:inherit}
.bm-layout{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:16px;padding:12px}
.records-panel{order:1;flex:0 1 220px;min-width:0}
.records-panel .records{margin:0;height:100%;display:flex;flex-direction:column;padding:12px 14px;border:1px solid #d5dce7;border-radius:10px;background:#fff}
.records-panel .records h3{margin:0 0 8px;color:var(--navy);font-size:14px}
.ranking{margin:0;padding:0 0 0 18px;font-size:12px;line-height:1.7;color:var(--ink);overflow:auto;flex:1}
.ranking li{margin:0 0 2px;overflow-wrap:anywhere}
.bm-main{flex:1 1 300px;min-width:0;order:2}
.question-box{min-height:88px;padding:10px 16px;margin-bottom:10px;border:1px solid #d5dce7;border-radius:10px;background:#fff;text-align:center;box-shadow:0 3px 7px rgba(16,36,74,.07)}
.question-label{margin:0 0 3px;color:#55719a;font-size:12px;font-weight:700}
.question{margin:0;color:var(--navy);font-size:clamp(20px,2.6vw,30px);line-height:1.12;font-weight:800}
.hint{min-height:16px;margin:5px 0 0;color:#61708a;font-size:12px;font-weight:700}
.board-wrap{border:5px solid var(--blue);border-radius:12px;background:#06152f;box-shadow:inset 0 0 0 2px #133b90,0 4px 9px rgba(16,36,74,.2);padding:8px;display:flex;justify-content:center}
.board{width:min(100%,480px);display:grid;grid-template-columns:repeat(8,1fr);gap:3px;aspect-ratio:4/3}
.cell{min-width:0;border:1px solid #7fa8da;border-radius:4px;background:linear-gradient(var(--blue),var(--navy));color:#fff;font-size:clamp(13px,1.8vw,18px);font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none}
.cell:hover:not(.revealed):not(.flagged){filter:brightness(1.15)}
.cell.revealed{background:#fff;border-color:#c6d4e6;color:var(--navy);cursor:default}
.cell.revealed.n1{color:var(--blue)}
.cell.revealed.n2{color:var(--green)}
.cell.revealed.n3{color:var(--red)}
.cell.flagged{background:var(--gold);color:var(--navy)}
.cell.mine{background:#f9dada;border-color:#e9a9a9;color:#b73535}
.board-actions{display:flex;justify-content:center;gap:6px;margin-top:8px}
.board-actions button{border:1px solid #a9bad7;border-radius:7px;background:#fff;color:var(--navy);padding:6px 10px;font-size:11px;font-weight:800;cursor:pointer}
.board-actions button.active{background:var(--gold);border-color:var(--gold)}
.bm-sidebar{order:3;flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:7px}
.bm-stat{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:40px;padding:7px 10px;border:1px solid #cfd9e9;border-radius:8px;background:#fff;font-size:13px}
.bm-stat span{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-stat strong{color:var(--blue);font-size:18px;white-space:nowrap}
.bm-button{width:100%;padding:9px 10px;border:0;border-radius:8px;background:var(--blue);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.bm-button:hover{filter:brightness(1.08)}
.bm-button:disabled{cursor:not-allowed;opacity:.55}
.bm-button-secondary{background:var(--navy)}
.bm-button.activo{background:var(--green)}
.status{margin:0;padding:0 18px 9px;color:#5c6e89;font-size:11px}
.records-status{margin:0;padding:0 18px 9px;color:#55719a;font-size:11px;font-weight:700}
.audio-estado{margin:0;padding:0 18px 9px;color:#55719a;font-size:11px}
.feedback{min-height:16px;margin:0 18px 6px;color:#61708a;font-size:12px;font-weight:700}
.feedback.ok{color:var(--green)}
.feedback.error{color:var(--red)}
.summary{margin:0 12px 12px;padding:14px;border:2px solid var(--green);border-radius:10px;background:#effaf1;text-align:center}
.summary[hidden]{display:none}
.summary h3{margin:0 0 5px;color:var(--green)}
.summary p{margin:0 0 10px;font-size:13px}
.summary button{border:0;border-radius:8px;padding:8px 14px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.bm-footer{display:flex;justify-content:space-between;gap:8px;padding:9px 18px;color:#5c6e89;font-size:11px;border-top:1px solid #d8e0ec}
.bm-footer strong{color:var(--navy)}
.challenge[hidden]{display:none}
@media(max-width:800px){
  .bm-wrap{max-width:680px}
  .bm-identity{flex-direction:column;align-items:stretch}
  .bm-fields{grid-template-columns:repeat(4,1fr)}
  .bm-layout{padding:10px}
  .bm-main{order:1}
  .bm-sidebar{order:2;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .bm-sidebar .bm-button{grid-column:span 2}
  .records-panel{order:3;flex:1 1 100%;max-width:none}
  .bm-footer{flex-direction:column}
}
@media(max-width:560px){
  .bm-head{padding:10px 12px}
  .bm-title-block h1{font-size:19px}
  .subtitle{font-size:10px}
  .bm-fields{grid-template-columns:repeat(2,1fr)}
  .bm-fields label{display:block}
  .bm-fields input{display:block;margin-top:3px}
  .bm-sidebar{grid-template-columns:repeat(2,1fr)}
  .bm-sidebar .bm-button{grid-column:span 1}
  .board{width:min(100%,360px)}
}