.ms-hero {
padding:1.5rem 1.5rem 1.25rem!important;
text-align:left!important;
margin-bottom:2rem
}

.ms-header {
display:flex;
align-items:center;
gap:1rem;
flex-wrap:wrap;
margin-bottom:1rem
}

.ms-title {
font-size:1rem;
font-weight:700;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--green);
white-space:nowrap;
flex-shrink:0
}

.ms-controls {
display:flex;
align-items:center;
gap:.6rem;
flex-wrap:wrap;
flex:1
}

.ms-counter {
font-family:'Courier New',Courier,monospace;
font-size:1.4rem;
font-weight:900;
color:#f44;
background:#000;
border:1px solid var(--border);
border-radius:6px;
padding:.2rem .6rem;
letter-spacing:.2em;
min-width:4.5ch;
text-align:right;
flex-shrink:0
}

.ms-form-new {
display:flex;
gap:.5rem;
align-items:center
}

.ms-form-new select {
padding:.35rem .6rem;
font-size:.75rem;
background:var(--card);
border:1px solid var(--border);
color:var(--text);
border-radius:6px;
font-family:'Courier New',Courier,monospace
}

.ms-header button[type="submit"] {
background:transparent;
border:1px solid var(--border);
border-radius:6px;
padding:.35rem .8rem;
color:var(--text);
font-family:'Courier New',Courier,monospace;
font-size:.75rem;
letter-spacing:.05em;
text-transform:uppercase;
cursor:pointer;
width:auto;
margin-top:0;
transition:var(--trans)
}

.ms-header button[type="submit"]:hover {
border-color:var(--green);
color:var(--green);
background:#00ff880f;
box-shadow:none
}

.ms-face {
font-size:1.1rem!important;
width:36px!important;
height:36px!important;
padding:0!important;
flex-shrink:0;
display:flex!important;
align-items:center!important;
justify-content:center!important
}

.ms-flagbtn--on {
border-color:#f84!important;
color:#f84!important;
background:#ff884414!important
}

.ms-msg {
font-size:.75rem;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
padding:.4rem 1rem;
border-radius:6px;
flex-shrink:0
}

.ms-msg--won {
background:#00ff8814;
border:1px solid #00ff8840;
color:var(--green)
}

.ms-msg--lost {
background:#ff323214;
border:1px solid #ff323240;
color:#f55
}

.ms-board-wrap {
width:100%;
padding-bottom:2px
}

.ms-board {
border-collapse:separate;
border-spacing:2px;
width:auto;
margin:0 auto;
background:#0000004d;
padding:4px;
border-radius:8px;
border:1px solid var(--border);
--cell:44px
}

.ms-cell {
width:var(--cell);
height:var(--cell);
padding:0;
margin:0;
border-radius:3px;
font-size:calc(var(--cell) * 0.45);
font-weight:900;
font-family:'Courier New',Courier,monospace;
text-align:center;
vertical-align:middle;
overflow:hidden;
position:relative;
cursor:pointer
}

@media (max-width: 700px) {
.ms-board-wrap {
overflow-x:hidden
}

.ms-board {
width:100%;
table-layout:fixed
}

.ms-cell {
width:auto;
height:calc((100vw - 130px) / var(--cols));
font-size:calc((100vw - 130px) / var(--cols) * 0.45)
}
}

.ms-link {
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none!important;
color:inherit!important;
text-align:center;
line-height:1;
border:none!important;
outline:none
}

.ms-link::after {
display:none!important
}

.ms-hidden {
background:#2a4a60;
border:1px solid #3d6a88;
cursor:pointer
}

.ms-hidden:hover {
background:#3a5f7a
}

.ms-flagmode:hover {
background:#ff884440!important;
border-color:#f84!important
}

.ms-open {
background:#080f14;
cursor:default
}

.ms-n1 {
color:#4fc3f7
}

.ms-n2 {
color:#0f8
}

.ms-n3 {
color:#f55
}

.ms-n4 {
color:#a78bfa
}

.ms-n5 {
color:#f44
}

.ms-n6 {
color:#00e5ff
}

.ms-n7 {
color:#fff
}

.ms-n8 {
color:#888
}

.ms-flag {
background:#1c3040
}

.ms-mine {
background:#1e0808
}

.ms-exploded {
background:#c11
}

.ms-wrongflag {
background:#2a1010
}

.ms-hint {
margin-top:.75rem;
font-size:.65rem;
color:var(--muted);
letter-spacing:.08em;
text-align:center
}

@media (max-width: 600px) {
.ms-header {
gap:.5rem
}

.ms-title {
font-size:.85rem
}

.ms-form-new select {
font-size:.7rem
}
}