.mh{display:grid;gap:10px;padding:clamp(8px,2vw,16px);background:#2B3550}
.mh-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#F2EEE4}
.mh-bar .chip-btn{background:#1E2146;color:#F2EEE4;border-color:#3A3F7A}
.mh-bar .chip-btn[aria-pressed="true"]{background:#FF5A4E;color:#1B1D33}
.mh-msg{font-family:var(--body);font-weight:600;font-size:.95rem}
.mh-grid{--cols:9;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:2px;width:min(100%,calc(var(--cols) * 40px));margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation;container-type:inline-size}
.mh-cell{aspect-ratio:1;min-width:0;padding:0;border:0;background:#7D8DB0;box-shadow:inset 2px 2px 0 #B5C2DD,inset -2px -2px 0 #4E5C7E;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:clamp(.6rem,2.4vw,1.05rem);font-size:min(1.1rem,calc(100cqi / var(--cols) * .56));color:#1B1D33;display:grid;place-items:center;-webkit-touch-callout:none}
.mh-cell:hover:not(.open){background:#8C9CC0}
.mh-cell:focus-visible{outline:2px solid #F6C333;outline-offset:-2px}
.mh-cell.open{background:#D9DCE6;box-shadow:none;cursor:default}
.mh-cell.flag{background:#7D8DB0 radial-gradient(circle at 50% 50%,#FF5A4E 0 22%,transparent 24%)}
.mh-cell.mine{background:#D9DCE6 radial-gradient(circle at 50% 50%,#1B1D33 0 28%,transparent 30%)}
.mh-cell.mine.dim{background:#9AA3BC radial-gradient(circle at 50% 50%,#1B1D33 0 24%,transparent 26%)}
.mh-cell.boom{background:#FF5A4E radial-gradient(circle at 50% 50%,#1B1D33 0 28%,transparent 30%)}
.mh-cell.n1{color:#2348B8}.mh-cell.n2{color:#1F7A3B}.mh-cell.n3{color:#C8261D}.mh-cell.n4{color:#4B2A8A}
.mh-cell.n5{color:#8E1F18}.mh-cell.n6{color:#127369}.mh-cell.n7{color:#1B1D33}.mh-cell.n8{color:#5C6A67}