/* MineGlyph: the meadow. Grass tiles lift off to reveal soil; flags are
   planted pennants; on a clear, every mine blooms into a flower. */

.mgCard{ overflow: visible; }
.mgTop{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mgStats{ display: flex; gap: 14px; font-size: 12px; color: var(--w-dim); }
.mgStats b{ display: block; font-family: var(--w-font); font-weight: 400; font-size: 21px; line-height: 1; color: var(--w-accent-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mgLabel{ font-size: 12.5px; color: var(--w-dim); margin: 8px 2px 4px; }
.mgMsg{ height: 0; overflow: hidden; opacity: 0; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--w-warn-text); transition: opacity .25s, height .25s; }
.mgMsg.show{ height: 20px; opacity: 1; }

/* ---------- the field ---------- */
.mgFrame{
  position: relative; margin: 6px -4px 8px; padding: 8px; border-radius: 18px; overflow-x: auto;
  background: linear-gradient(180deg, #5b3a1e, #3e2712); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.35), 0 14px 30px var(--w-drop);
}
.mgField{
  --cell: 30px; --gap: 2px;
  display: grid; grid-template-columns: repeat(var(--w), var(--cell)); gap: var(--gap);
  width: max-content; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.mgC{
  position: relative; width: var(--cell); height: var(--cell); border-radius: calc(var(--cell) * .2);
  background: #f0dcbc; /* soil */
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; isolation: isolate;
  font: 400 calc(var(--cell) * .62)/1 var(--w-font); outline: none;
}
.mgC.alt{ background: #e8d1ab; }
/* the grass cap covering an undug cell */
.mgC::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(180deg, #8fdc6a, #5fbf48 55%, #4aa63a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .12s ease, filter .12s ease;
}
.mgC.alt::after{ background: linear-gradient(180deg, #84d460, #56b541 55%, #439c35); }
.mgC:not(.o):hover::after{ filter: brightness(1.08); }
.mgC.press:not(.o)::after{ transform: scale(.9); filter: brightness(.95); }
.mgC.o{ cursor: default; box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.mgC.o::after{ opacity: 0; transform: translateY(-40%) scale(1.15) rotate(-6deg); pointer-events: none; }
.mgC.o:not(.dig)::after{ transition: none; }
.mgC.dig::after{ animation: mgPop .38s cubic-bezier(.3,.7,.4,1) both; animation-delay: var(--d, 0ms); }
@keyframes mgPop{ 0%{ opacity: 1; transform: none } 40%{ opacity: 1; transform: translateY(-18%) scale(1.08) rotate(-3deg) } 100%{ opacity: 0; transform: translateY(-60%) scale(1.15) rotate(-8deg) } }
.mgN{ position: relative; z-index: 2; pointer-events: none; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.mgC.dig .mgN{ animation: mgNum .3s ease both; animation-delay: calc(var(--d, 0ms) + 120ms); }
@keyframes mgNum{ from{ opacity: 0; transform: scale(.6) } to{ opacity: 1; transform: none } }
.mgC[data-n="1"]{ color: #1546b0; } .mgC[data-n="2"]{ color: #0b5a24; } .mgC[data-n="3"]{ color: #a01812; } .mgC[data-n="4"]{ color: #4f1f96; }
.mgC[data-n="5"]{ color: #7a2a0c; } .mgC[data-n="6"]{ color: #0a5560; } .mgC[data-n="7"]{ color: #1b1426; } .mgC[data-n="8"]{ color: #3f3f4d; }
.mgC.nope{ animation: mgNope .28s ease; }
@keyframes mgNope{ 0%,100%{ translate: 0 } 30%{ translate: -3px 0 } 60%{ translate: 3px 0 } }

/* flags, mines, flowers */
.mgFlag, .mgMine, .mgFlower{ position: absolute; inset: 8%; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.mgFlag svg, .mgMine svg, .mgFlower svg{ width: 100%; height: 100%; }
.mgC.plant .mgFlag{ animation: mgPlant .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes mgPlant{ 0%{ transform: translateY(-40%) scale(.6); opacity: 0 } 100%{ transform: none; opacity: 1 } }
.mgC.boom{ background: #ff5a3d !important; }
.mgC.boom::after, .mgC.mineShow::after{ opacity: 0; transition: opacity .2s; }
.mgC.mineShow .mgMine{ animation: mgNum .3s ease both; }
.mgC.wrongFlag::before{ content: "✕"; position: absolute; z-index: 4; color: #d6312b; font: 900 calc(var(--cell) * .8)/1 system-ui; }
.mgField.lost .mgC:not(.o){ cursor: default; }
.mgField.won .mgC::after{ opacity: 0; }
.mgC.bloom .mgFlower{ animation: mgBloom .55s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes mgBloom{ 0%{ transform: scale(0) rotate(-40deg) } 100%{ transform: none } }
.mgField.won .mgC.alt, .mgField.won .mgC{ transition: background .6s ease; }

/* hint */
.mgC.hint{ z-index: 5; box-shadow: 0 0 0 3px #ffcc1f, 0 0 18px rgba(255,204,31,.85); animation: mgHint 1s ease-in-out infinite; }
.mgC.hint.hintMine{ box-shadow: 0 0 0 3px #ff5a3d, 0 0 18px rgba(255,90,61,.8); }
@keyframes mgHint{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.08) } }

/* ---------- tools ---------- */
.mgBar{ display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 8px 2px 2px; }
.mgTools{ display: inline-flex; padding: 4px; border-radius: 16px; background: var(--w-bg-0); box-shadow: inset 0 0 0 1px var(--w-line-soft); }
.mgTool{
  -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 12px; background: none; color: var(--w-dim); font: 400 15px/1 var(--w-font); letter-spacing: .04em;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .15s, color .15s;
}
.mgTool .ic{ font-size: 18px; }
.mgTool[aria-pressed="true"]{ background: linear-gradient(180deg, var(--w-fill-a), var(--w-fill-b)); color: var(--w-accent-ink); box-shadow: 0 3px 0 var(--w-accent-lo); }
.mgCard.flagMode .mgFrame{ box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 0 0 3px rgba(232,56,79,.6), 0 14px 30px var(--w-drop); }
.mgKey{ -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; padding: 0; background: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--w-ink); font: 400 11px/1 var(--w-font); letter-spacing: .06em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.mgKey .mgRound{ position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: linear-gradient(180deg, var(--w-bg-3), var(--w-bg-1)); border: 1px solid var(--w-line); box-shadow: inset 0 1px 0 var(--w-edge-hi), 0 5px 0 var(--w-bg-0), 0 9px 16px var(--w-drop); transition: transform .12s, box-shadow .12s; }
.mgKey:active .mgRound{ transform: translateY(3px); box-shadow: inset 0 1px 0 var(--w-edge-hi), 0 2px 0 var(--w-bg-0); }
.mgKey.gold .mgRound{ background: linear-gradient(180deg, #ffd860, #ffae1a); color: #3a2300; border-color: #c98200; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 0 #a86a00, 0 9px 16px var(--w-drop); }
.mgKey.gold.spent .mgRound{ filter: grayscale(.85) brightness(.8); }
.mgBadge{ position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font: 800 11px/1 system-ui, sans-serif; color: #fff; background: #c81e3a; border: 2px solid var(--w-bg-1); }
.mgRight{ display: flex; gap: 12px; }
.mgMiniRow{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--w-dim); }
:root body.gv-world .mgCard .mgKey, :root body.gv-world .mgCard .mgTool{ border: 0 !important; box-shadow: none; min-width: 0; }
:root body.gv-world .mgCard .mgKey{ background: none !important; padding: 0 !important; }
:root body.gv-world .mgCard .mgTool:not([aria-pressed="true"]){ background: none !important; color: var(--w-dim) !important; }

/* ---------- result panel ---------- */
.mgPanel{ position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.mgPanel[hidden]{ display: none; }
.mgPanel.show{ opacity: 1; pointer-events: auto; }
.mgPanelBox{ text-align: center; padding: 18px 18px 14px; border-radius: 18px; width: min(88%, 320px); background: color-mix(in srgb, var(--w-bg-1) 94%, transparent); backdrop-filter: blur(6px); box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px var(--w-line); transform: translateY(12px) scale(.96); transition: transform .45s cubic-bezier(.2,1.4,.4,1); }
.mgPanel.show .mgPanelBox{ transform: none; }
.mgPanelKick{ font: 400 12px/1 var(--w-font); letter-spacing: .18em; text-transform: uppercase; color: var(--w-accent-text); }
.mgPanelTitle{ font-family: var(--w-font); font-size: 24px; line-height: 1.1; margin: 8px 0 6px; color: var(--w-ink); }
.mgPanelStats{ font-size: 13.5px; color: var(--w-dim); margin-bottom: 14px; line-height: 1.4; }
.mgPanelBtns{ display: flex; gap: 8px; }
.mgBig{ -webkit-appearance: none; appearance: none; flex: 1; border: 0; cursor: pointer; padding: 12px 14px; border-radius: 14px; font: 400 15px/1 var(--w-font); letter-spacing: .03em; color: #fff; background: linear-gradient(180deg, #4d8dff, #2563eb); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 5px 0 #1a46b0; }
.mgBig.warm{ background: linear-gradient(180deg, #ffd860, #ffae1a); color: #3a2300; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 0 #a86a00; }
.mgGhost{ -webkit-appearance: none; appearance: none; cursor: pointer; padding: 12px 14px; border-radius: 14px; font: 400 15px/1 var(--w-font); color: var(--w-ink); background: var(--w-bg-2); border: 1px solid var(--w-line); }

.mgHelpBox{ margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--card) 70%, var(--bg)); border: 1px solid var(--line); }
.mgHelpKicker{ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mgHelpList{ margin: 0; padding-left: 18px; }
.mgHelpList li{ margin: 4px 0; }
.mgHelpActions, .mgShareActions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 420px){ .mgFrame{ margin-left: -8px; margin-right: -8px; padding: 6px; } .mgTool{ padding: 9px 11px; font-size: 14px; } .mgKey .mgRound{ width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce){ .mgC::after, .mgC.dig::after, .mgC.dig .mgN, .mgC.hint, .mgC.bloom .mgFlower, .mgC.plant .mgFlag{ animation: none; transition: none; } }
/* the world dresses every card button as a slab; the panel buttons keep their own paint */
:root body.gv-world .mgCard .mgBig{ border: 0 !important; color: #fff !important; background: linear-gradient(180deg, #4d8dff, #2563eb) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 5px 0 #1a46b0 !important; }
:root body.gv-world .mgCard .mgBig.warm{ color: #3a2300 !important; background: linear-gradient(180deg, #ffd860, #ffae1a) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 0 #a86a00 !important; }
:root body.gv-world .mgCard .mgGhost{ color: var(--w-ink) !important; background: var(--w-bg-2) !important; border: 1px solid var(--w-line) !important; }