/* Mines: the board and its cells. Chrome, buttons and dialogs come from classics.css. */
.mn{--tile:#e1d9c8;--tile-hi:#e9e2d4;--tile-edge:#c9bea8;--open:#fbf9f4;--hair:#ebe5d9;
  --n1:#2d5a88;--n2:#2f7a4f;--n3:#c23f1c;--n4:#523d84;--n5:#8a4a1f;--n6:#1f6d68;--n7:#1d1b18;--n8:#857e71;
  --cell:32px;--inset:2px;--r:4px;--edge:2px;
  display:flex;flex-direction:column;align-items:center;gap:18px}

.mn-top{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px}

/* The column is as wide as the board; the status row and result never widen it. */
.mn-col{display:flex;flex-direction:column;width:max-content;max-width:100%}
.mn-status,.mn-end{width:0;min-width:100%}
.mn-status{display:flex;align-items:flex-end;gap:28px;padding:0 2px 12px}
.mn-status .cl-stat strong{min-width:2.2ch}
.mn-time strong{min-width:3.6ch}
.mn-flag{margin-left:auto;padding-left:12px}
.mn-flag svg{stroke-width:2}
.mn-flag .pennant{fill:var(--red);stroke:none}
.mn-flag[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.mn-flag[aria-pressed=true]:hover{background:var(--ink-2);border-color:var(--ink-2)}
/* A tap leaves :hover stuck on touch screens; a mode toggle must only ever show its state. */
@media(hover:none){.mn-flag:hover{background:transparent;color:var(--ink)}.mn-flag[aria-pressed=true]:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}}

/* Expert may be wider than a phone: it scrolls in here, never the page. */
.mn-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.mn-board{display:grid;grid-template-columns:repeat(var(--cols,9),var(--cell));grid-auto-rows:var(--cell);width:max-content;
  border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--open);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.mn-row{display:contents}

/* Cells. Covered: a tile inset in its square. Open: flat paper with a hairline grid. */
.c{position:relative;display:grid;place-items:center;width:var(--cell);height:var(--cell);background:var(--open);
  font-size:calc(var(--cell) * .6);font-weight:800;font-stretch:85%;line-height:1;font-variant-numeric:tabular-nums;
  cursor:pointer;outline:none}
.c::before,.c::after{content:'';position:absolute;pointer-events:none}
.c.cov::before{inset:var(--inset);border-radius:var(--r);background:var(--tile);box-shadow:inset 0 calc(var(--edge) * -1) 0 var(--tile-edge)}
.c.open{box-shadow:inset -1px -1px 0 var(--hair);cursor:default}
.c.num{cursor:pointer}
.c::after{inset:0;background:center/60% no-repeat}
@media(hover:hover){.c.cov:hover::before{background:var(--tile-hi)}}
.c.cov.down::before{box-shadow:none;transform:translateY(1px);background:var(--tile-hi)}
.c.n1{color:var(--n1)}.c.n2{color:var(--n2)}.c.n3{color:var(--n3)}.c.n4{color:var(--n4)}
.c.n5{color:var(--n5)}.c.n6{color:var(--n6)}.c.n7{color:var(--n7)}.c.n8{color:var(--n8)}

.c.flag::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 20.5V3.8' stroke='%231d1b18' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M8.8 4.2 19 8.6 8.8 13Z' fill='%23e2502b'/%3E%3Cpath d='M5 20.5h7' stroke='%231d1b18' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.c.mine::after,.c.hit::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%231d1b18' stroke-linecap='round'%3E%3Cpath d='M12 3.4v3.4M12 17.2v3.4M3.4 12h3.4M17.2 12h3.4' stroke-width='2.5'/%3E%3Cpath d='M6.1 6.1l2.2 2.2M15.7 15.7l2.2 2.2M17.9 6.1l-2.2 2.2M8.3 15.7l-2.2 2.2' stroke-width='2.3'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='6.4' fill='%231d1b18'/%3E%3Ccircle cx='9.9' cy='9.9' r='1.6' fill='%23fbf9f4'/%3E%3C/svg%3E")}
.c.mine::after{opacity:.78}
.c.hit{background:var(--red)}
.c.wrong::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg opacity='.45'%3E%3Cpath d='M8 20.5V3.8' stroke='%231d1b18' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M8.8 4.2 19 8.6 8.8 13Z' fill='%23e2502b'/%3E%3C/g%3E%3Cpath d='M4 4l16 16M20 4 4 20' stroke='%231d1b18' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}

.c:focus-visible{z-index:2}
.c:focus-visible::after{box-shadow:inset 0 0 0 2px var(--red);border-radius:var(--r)}

/* Motion: openings ripple out from the cell you touched; a win settles flags into place. */
.c.fresh{animation:mn-open .18s ease-out var(--d,0ms) both}
@keyframes mn-open{from{background:var(--tile);color:transparent}}
.c.drop::after{animation:mn-drop .26s cubic-bezier(.2,.8,.3,1) var(--d,0ms) both}
@keyframes mn-drop{from{opacity:0;transform:translateY(-18%)}}
.c.fade::after{animation:mn-fade .22s ease-out var(--d,0ms) both}
@keyframes mn-fade{from{opacity:0}}
.mn-board.won{border-color:var(--good)}
.mn-board.flagging{border-color:var(--red)}

/* Best times in the help dialog. */
.mn-best{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}
.mn-best div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0}
.mn-best dt{font-weight:600}
.mn-best dd{color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.mn-best strong{color:var(--ink);font-weight:800}

/* Result, under the board. */
.mn-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.mn-end h2{font-size:26px;font-weight:800;font-stretch:90%;letter-spacing:-.025em;line-height:1.1}
.mn-end p{margin-top:2px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mn-end-actions{display:flex;flex-wrap:wrap;gap:10px}

@media(max-width:640px){
  .mn{gap:14px}
  .mn-top{width:100%}
  .mn-top .seg{width:100%}
  .mn-top .seg button{flex:1;padding:6px 8px;font-size:13.5px}
  .mn-status{position:sticky;top:var(--head);z-index:5;gap:22px;padding-top:8px;background:var(--paper)}
  .mn-end h2{font-size:23px}
}