/* THE MINEFIELD // THE DAILY SWEEP (static/js/games/minefield.js). Shares THE GRID's stage, HUD and side cards
   (static/grid.css); this is the field: a sector of space, buried cells as dark plates, opened ones as clear void
   with the number in a holo ring, beacons in amber, mines in alarm red. No animation loops. */
.mf-root { --ac: var(--holo, #4fe3ff); --aa: var(--amber, #ffb020); }
.mf-cnt { display: block !important; font-size: 10px; letter-spacing: .2em; color: rgba(160, 210, 235, .75); margin-top: 3px; }
.mf-cnt em { font-style: normal; color: var(--aa); }
.mf-wrap { max-width: 100%; overflow: auto; }
.mf-field { --cell: min(calc((100vw - 76px - var(--w) * 2px) / var(--w)), calc(560px / var(--w)), 40px); display: grid; grid-template-columns: repeat(var(--w), var(--cell));
  grid-auto-rows: var(--cell); gap: 2px; padding: 6px; border: 2px solid rgba(79, 227, 255, .7); user-select: none; touch-action: manipulation;
  background: radial-gradient(circle at 30% 20%, rgba(120, 80, 220, .18), transparent 55%), radial-gradient(circle at 80% 85%, rgba(79, 227, 255, .12), transparent 50%), #03060d;
  box-shadow: 0 0 22px rgba(79, 227, 255, .14); }
@media (max-width: 820px) { .mf-field { --cell: min(calc((100vw - 60px - var(--w) * 1px) / var(--w)), 40px); gap: 1px; padding: 4px; } }
.mf-c { position: relative; margin: 0; padding: 0; border: 1px solid rgba(79, 227, 255, .28); cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #1b3150, #102038 60%, #0b182b); box-shadow: inset 1px 1px 0 rgba(160, 220, 255, .22), inset -1px -1px 0 rgba(0, 0, 0, .5);
  font: 700 calc(var(--cell) * .5) var(--mono) !important; color: #e8f6ff; }
.mf-c:hover { border-color: rgba(79, 227, 255, .6); }
.mf-c.sel { outline: 2px solid var(--aa); outline-offset: -2px; z-index: 1; }
.mf-c.start { border-color: var(--ac); box-shadow: inset 0 0 0 2px rgba(79, 227, 255, .35), 0 0 10px rgba(79, 227, 255, .4); }
.mf-c.start::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.mf-c.open { background: rgba(4, 10, 20, .35); border-color: rgba(79, 227, 255, .08); box-shadow: none; cursor: default; }
.mf-c.open b { display: flex; align-items: center; justify-content: center; width: 78%; height: 78%; border-radius: 50%; border: 1.5px solid currentColor;
  font-weight: inherit; font-size: calc(var(--cell) * .42); box-shadow: 0 0 6px currentColor inset; }
.mf-c.n1 { color: #4fe3ff; } .mf-c.n2 { color: #7dffb0; } .mf-c.n3 { color: #ffb020; } .mf-c.n4 { color: #ff7a5c; }
.mf-c.n5 { color: #ff5a8a; } .mf-c.n6 { color: #c58bff; } .mf-c.n7 { color: #ffffff; } .mf-c.n8 { color: #aab4c0; }
.mf-c.open.n1, .mf-c.open.n2, .mf-c.open.n3, .mf-c.open.n4, .mf-c.open.n5, .mf-c.open.n6, .mf-c.open.n7, .mf-c.open.n8 { cursor: pointer; }
.mf-flag { width: 46%; height: 46%; background: var(--aa); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 8px var(--aa); display: block; }
.mf-c.flag { border-color: rgba(255, 176, 32, .55); }
.mf-mine { width: 52%; height: 52%; border-radius: 50%; display: block; background: radial-gradient(circle, #fff 0 12%, #ff5a4a 13% 55%, transparent 56%);
  box-shadow: 0 0 10px #ff5a4a; outline: 1.5px dashed rgba(255, 90, 74, .8); outline-offset: 1px; }
.mf-c.hit { background: rgba(255, 90, 74, .3); border-color: #ff5a4a; }
.mf-c.mine { opacity: .85; }
.mf-c.ok { border-color: #7dffb0; }
.mf-c.wrongflag { background: rgba(255, 90, 74, .15); }
.mf-stage .gd-tools { width: auto; }
.mf-stage .gd-tools button { flex: 0 1 auto; padding: 9px 18px; }
.gd-result.lost { border-color: var(--alert, #ff5a4a); background: rgba(255, 90, 74, .08); }
.gd-result.lost b { color: var(--alert, #ff5a4a); }