/* Minesweeper 3000 — styled after getbounty.io (ink, red, gold; Rubik display type).
   Bootstrap 3 is still loaded as the page's base CSS, so sizes here are px
   (Bootstrap sets html { font-size: 10px }) and everything is scoped under .ms-*.

   Page structure the Bounty extension relies on (the game itself ignores loot):
   - tiles are <span class="tile"> children of #board, in row order
   - the tile box itself never transforms or fades (hidden-looking elements get
     skipped); all motion lives on its children
   - no overflow clipping on #board's ancestors */

:root {
    --ink: #11132a;
    --ink-2: #1b1e3d;
    --ink-3: #262a52;
    --ink-4: #343a78;
    --red: #990000;
    --red-hi: #d4142c;
    --gold: #ffc53d;
    --gold-deep: #e0940a;
    --gold-light: #ffe08a;
    --cream: #fbf5ea;
    --cream-2: #f4e9d4;
    --green: #1fb86b;
    --text: #1b1d33;
    --muted: #5c6178;
    --display: 'Rubik', 'Inter', system-ui, sans-serif;
    --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --glove: url('https://getbounty.io/Bounty/images/glove.svg') 6 2, pointer;
    --cell: 44px;       /* the smaller side of a tile: sizes type and corners */
    --cell-w: 44px;
    --cell-h: 44px;
    --n: 12;
    --gap: 3px;
}

html { scrollbar-gutter: stable; background: var(--ink); }
body.ms {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #0c0e22 0%, var(--ink) 45%, #151838 100%);
    background-attachment: fixed;
    color: #fff;
    font: 400 16px/1.6 var(--body);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
.ms *, .ms *::before, .ms *::after { box-sizing: border-box; }
.ms a { color: var(--gold); text-decoration: none; }
.ms a:hover, .ms a:focus { color: var(--gold-light); text-decoration: none; }
.ms h1, .ms h2, .ms h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; line-height: 1.1; }
.ms p { margin: 0; }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------------- backdrop ---------------- */
.ms-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ms-bg-glow { position: absolute; border-radius: 50%; filter: blur(10px); }
.ms-bg-glow.g1 { width: 900px; height: 600px; right: -250px; top: -200px; background: radial-gradient(closest-side, rgba(212, 20, 44, .30), transparent); animation: ms-drift 18s ease-in-out infinite alternate; }
.ms-bg-glow.g2 { width: 800px; height: 640px; left: -260px; bottom: -260px; background: radial-gradient(closest-side, rgba(255, 197, 61, .16), transparent); animation: ms-drift 22s ease-in-out infinite alternate-reverse; }
.ms-bg-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 75%);
}
.ms-bg-sparkles i {
    position: absolute; bottom: -20px; width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%;
    background: radial-gradient(circle, #fff4b8 0%, var(--gold) 55%, rgba(224, 148, 10, 0) 100%);
    box-shadow: 0 0 10px rgba(255, 197, 61, .7);
    opacity: 0;
    animation: ms-rise var(--t, 14s) linear var(--delay, 0s) infinite;
}
@keyframes ms-drift { to { transform: translate(-60px, 40px) scale(1.08); } }
@keyframes ms-rise {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: var(--o, .6); }
    85% { opacity: var(--o, .6); }
    100% { transform: translate(var(--x, 30px), -105vh); opacity: 0; }
}

/* ---------------- header ---------------- */
.ms-top, .ms-main, .ms-foot { position: relative; z-index: 1; }
.ms-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 1200px; margin: 0 auto; padding: 18px 24px;
}
.ms-logo img { display: block; height: 34px; width: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ms-logo:hover img { transform: rotate(-3deg) scale(1.05); }
.ms-top-actions { display: flex; align-items: center; gap: 12px; }
.ms-icon-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18);
    font-size: 18px; line-height: 1; display: grid; place-items: center; transition: background .2s, transform .2s;
}
.ms-icon-btn:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.ms-icon-btn .off, .ms-icon-btn[aria-pressed="false"] .on { display: none; }
.ms-icon-btn[aria-pressed="false"] .off { display: inline; }

/* ---------------- buttons ---------------- */
.ms-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
    font: 700 16px/1 var(--display); letter-spacing: .1px;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.ms .ms-btn-red { background: linear-gradient(180deg, #e0182f, #a8001a); color: #fff; box-shadow: 0 10px 30px rgba(212, 20, 44, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ms .ms-btn-red:hover, .ms .ms-btn-red:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(212, 20, 44, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ms .ms-btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.ms .ms-btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); }
.ms .ms-btn-ghost:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ms .ms-btn-line { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1.5px #e8e3da; }
.ms .ms-btn-line:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); transform: translateY(-2px); }
.ms-btn-sm { padding: 11px 18px; font-size: 14px; }
.ms-btn-block { display: flex; width: 100%; }
.ms-btn:active { transform: translateY(0) scale(.97) !important; }

/* ---------------- intro ---------------- */
.ms-main { max-width: 1200px; margin: 0 auto; padding: 8px 24px 40px; }
.ms-intro { text-align: center; margin: 6px auto 28px; max-width: 760px; }
.ms-pill {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    font: 600 14px/1.2 var(--display); color: rgba(255, 255, 255, .9); margin-bottom: 18px;
    animation: ms-in .6s cubic-bezier(.3, 1.4, .5, 1) both;
}
.ms-pill b { background: var(--gold); color: #3a2600; border-radius: 999px; padding: 5px 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ms-title { font-size: clamp(40px, 6.4vw, 76px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: #fff; animation: ms-in .7s .08s cubic-bezier(.3, 1.4, .5, 1) both; }
.ms-gold {
    position: relative; white-space: nowrap; display: inline-block;
    background: linear-gradient(180deg, #ffe08a 10%, var(--gold) 45%, var(--gold-deep) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: ms-title-bob 3.2s ease-in-out 1.2s infinite;
}
.ms-underline { position: absolute; left: 0; bottom: -.14em; width: 100%; height: .18em; }
.ms-underline path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: ms-draw 1.1s .6s cubic-bezier(.6, 0, .2, 1) forwards; }
.ms-sub { margin: 22px auto 0 !important; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 620px; animation: ms-in .7s .16s cubic-bezier(.2, .7, .2, 1) both; }
.ms-sub strong { color: #fff; font-weight: 600; }
@keyframes ms-draw { to { stroke-dashoffset: 0; } }
@keyframes ms-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ms-title-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.5deg); } }

/* ---------------- layout ---------------- */
/* Desktop: the board leads, title + goals ride alongside so the whole board is
   above the fold. Narrow screens stack title, board, goals. */
.ms-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr;
    grid-template-areas: "game intro" "game side"; column-gap: 40px; row-gap: 24px; align-items: start;
}
.ms-intro { grid-area: intro; }
.ms-game { grid-area: game; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ms-side { grid-area: side; }
@media (min-width: 992px) {
    .ms-intro { text-align: left; margin: 0; padding-top: 4px; }
    .ms-title { font-size: 50px; }
    .ms-sub { margin: 16px 0 0 !important; font-size: 16px; }
}
@media (max-width: 991px) {
    .ms-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "game" "side"; row-gap: 32px; }
    .ms-intro { margin-bottom: -8px; }
    .ms-side { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 575px) {
    .ms-top { padding: 14px 16px; }
    .ms-pill { margin-bottom: 12px; font-size: 13px; }
    .ms-title { font-size: 40px; }
    .ms-sub { margin-top: 12px !important; font-size: 14.5px; line-height: 1.5; }
    .ms-toast { font-size: 13.5px; border-radius: 18px; }
    .ms-main { padding: 4px 16px 32px; }
    .ms-logo img { height: 28px; }
    .ms-intro { margin-bottom: 20px; }
}

/* ---------------- HUD ---------------- */
.ms-hud {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap;
    margin-bottom: 18px; width: 100%;
}
.ms-stat {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 9px; border-radius: 16px;
    background: var(--ink-2); box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .1);
    font-family: var(--display); min-width: 0;
}
.ms-stat-ico { font-size: 20px; line-height: 1; }
.ms-stat-body { display: flex; flex-direction: column; line-height: 1.1; }
.ms-stat small { font: 600 11px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ms-stat b { font: 800 20px/1.1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.ms-stat.is-bump { animation: ms-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
.ms-stat.is-hot { box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 0 0 2px var(--gold), 0 0 26px rgba(255, 197, 61, .45); }
@keyframes ms-bump { 50% { transform: scale(1.14); } }

/* the Bounty-coin "face" button (like the extension's quest launcher) */
.ms-face { position: relative; width: 66px; height: 66px; flex-shrink: 0; margin: 0 4px; padding: 0; border: 0; background: none; cursor: var(--glove); outline: none; animation: ms-bob 3.2s ease-in-out infinite; }
.ms-face-medal {
    position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, #ffffff 0%, #fbf5ea 45%, #f1dfb8 100%) padding-box,
        linear-gradient(145deg, #fff4b8 0%, #ffcf3f 30%, #e9a011 65%, #a55f00 100%) border-box;
    border: 5px solid transparent;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4), 0 2px 0 rgba(165, 95, 0, .55), inset 0 -4px 8px rgba(165, 95, 0, .18);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.ms-face-emoji { font-size: 30px; line-height: 1; display: block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.ms-face-shine { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); transform: rotate(20deg); animation: ms-shine 5s ease-in-out 1.5s infinite; pointer-events: none; }
.ms-face:hover .ms-face-medal, .ms-face:focus-visible .ms-face-medal { transform: scale(1.08) rotate(-8deg); box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 197, 61, .45), inset 0 -4px 8px rgba(165, 95, 0, .18); }
.ms-face.is-pop .ms-face-emoji { animation: ms-gulp .55s cubic-bezier(.34, 1.56, .64, 1); }
.ms-face:active .ms-face-medal { transform: scale(.9, .86); }
@keyframes ms-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ms-shine { 0% { left: -60%; } 30%, 100% { left: 130%; } }
@keyframes ms-gulp { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-12deg); } 60% { transform: scale(.92) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

@media (max-width: 575px) {
    .ms-hud { gap: 6px; }
    .ms-stat { padding: 6px 9px 6px 7px; border-radius: 13px; gap: 5px; }
    .ms-stat-ico { font-size: 15px; }
    .ms-stat small { font-size: 9px; letter-spacing: .04em; }
    .ms-stat b { font-size: 16px; }
    .ms-face { width: 54px; height: 54px; margin: 0; }
    .ms-face-emoji { font-size: 24px; }
    .ms-face-medal { border-width: 4px; }
}

/* ---------------- board frame ---------------- */
.ms-frame {
    position: relative; padding: 12px; border-radius: 24px;
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
    box-shadow: 0 40px 90px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 2px 0 rgba(255, 255, 255, .08);
    /* No entrance fade here: tiles under a transparent ancestor look hidden
       to the extension. The tile covers animate in instead. */
}
.ms-frame.is-shake { animation: ms-shake .55s cubic-bezier(.36, .07, .19, .97); }
.ms-frame-glow { position: absolute; inset: -2px; border-radius: 26px; pointer-events: none; opacity: 0; transition: opacity .6s; box-shadow: 0 0 0 3px var(--gold), 0 0 60px rgba(255, 197, 61, .55); }
.ms-frame.is-won .ms-frame-glow { opacity: 1; animation: ms-glow-pulse 1.6s ease-in-out infinite; }
.ms-frame.is-lost { box-shadow: 0 40px 90px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(212, 20, 44, .6), 0 0 50px rgba(212, 20, 44, .25); }
@keyframes ms-glow-pulse { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 90px rgba(255, 197, 61, .8); } }
@keyframes ms-shake {
    10%, 90% { transform: translate(-2px, 1px) rotate(-.4deg); }
    20%, 80% { transform: translate(4px, -2px) rotate(.6deg); }
    30%, 50%, 70% { transform: translate(-7px, 3px) rotate(-.8deg); }
    40%, 60% { transform: translate(7px, -3px) rotate(.8deg); }
}
.ms-flash { position: absolute; inset: 0; border-radius: 24px; pointer-events: none; opacity: 0; }
.ms-flash.is-boom { animation: ms-flash-boom .7s ease-out; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 240, 200, .95), rgba(255, 80, 40, .55) 30%, rgba(212, 20, 44, 0) 70%); }
.ms-flash.is-gold { animation: ms-flash-boom .6s ease-out; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 240, 180, .7), rgba(255, 197, 61, .25) 35%, rgba(255, 197, 61, 0) 70%); }
@keyframes ms-flash-boom { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* combo callout floating over the board */
.ms-combo { position: absolute; left: 50%; top: 38%; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.ms-combo span {
    display: block; font: 800 clamp(26px, 4.4vw, 44px)/1 var(--display); letter-spacing: -.02em;
    background: linear-gradient(180deg, #fff6c4 10%, var(--gold) 50%, var(--gold-deep) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 #8a5a00) drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
    animation: ms-combo 1.3s cubic-bezier(.2, .7, .2, 1) forwards;
}
.ms-combo span small { display: block; font-size: .45em; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
@keyframes ms-combo {
    0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
    18% { opacity: 1; transform: scale(1.18) rotate(3deg); }
    30% { transform: scale(1) rotate(-1deg); }
    75% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-40px) scale(.95); }
}

/* ---------------- the board ---------------- */
#board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), var(--cell-w));
    grid-auto-rows: var(--cell-h);
    gap: var(--gap);
    padding: 0; border: 0; margin: 0;
    outline: none;
    touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
#board:focus-visible { box-shadow: 0 0 0 3px rgba(255, 197, 61, .5); border-radius: 10px; }

/* Every cell. The span itself stays put; .cap / .val do the moving. */
#board > span {
    position: relative; display: block; float: none;
    width: var(--cell-w); height: var(--cell-h); margin: 0; padding: 0; border: 0;
    border-radius: calc(var(--cell) * .22);
    font: 800 calc(var(--cell) * .56)/1 var(--display);
    text-align: center;
    background: #0b0d20;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
}
#board > span > * { pointer-events: none; }
#board > span.tile { cursor: var(--glove); }

/* the raised cover */
.cap {
    position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
    background:
        radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .22), transparent 45%),
        linear-gradient(180deg, #414899 0%, var(--ink-4) 45%, #272c63 100%);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .35),
        inset 0 -3px 0 rgba(10, 12, 40, .55),
        0 2px 0 #0a0c24,
        0 4px 8px rgba(0, 0, 0, .35);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), filter .18s;
    animation: ms-cap-in .55s cubic-bezier(.3, 1.5, .5, 1) calc((var(--r) + var(--c)) * 22ms + 350ms) both;
}
/* rotating shimmer wave across the board */
.cap::after {
    content: ""; position: absolute; top: -30%; left: -80%; width: 55%; height: 160%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: rotate(20deg);
    animation: ms-sheen 6s ease-in-out calc((var(--r) + var(--c)) * 60ms + 1.2s) infinite;
}
@keyframes ms-cap-in { from { opacity: 0; transform: translateY(-40%) scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes ms-sheen { 0% { left: -80%; } 25%, 100% { left: 140%; } }

@media (hover: hover) {
    #board:not(.is-over) > span.tile:hover .cap { transform: translateY(-3px) scale(1.04); filter: brightness(1.18); }
}
#board > span.tile.is-press .cap { transform: scale(.9, .84); filter: brightness(.95); transition-duration: .08s; }
#board > span.is-kbd::after { content: ""; position: absolute; inset: -3px; border-radius: calc(var(--cell) * .26); box-shadow: 0 0 0 3px var(--gold); pointer-events: none; z-index: 4; }

/* revealed */
#board > span.tileClicked {
    background: var(--cream);
    box-shadow: inset 0 2px 3px rgba(120, 80, 20, .22), inset 0 0 0 1px rgba(160, 110, 40, .12);
}
#board > span.tileClicked.alt { background: var(--cream-2); }
.tileClicked .cap {
    animation: ms-cap-off .45s cubic-bezier(.4, 0, .8, .4) var(--d, 0ms) both;
}
@keyframes ms-cap-off {
    0% { opacity: 1; transform: none; }
    35% { opacity: 1; transform: translateY(-12%) scale(1.12) rotate(calc(var(--rot, 8deg) * .4)); filter: brightness(1.5); }
    100% { opacity: 0; transform: translateY(-40%) scale(.3) rotate(var(--rot, 8deg)); filter: brightness(2); }
}

/* the number */
.val { position: absolute; inset: 0; display: grid; place-items: center; }
.tileClicked .val { animation: ms-val-in .45s cubic-bezier(.3, 1.7, .5, 1) calc(var(--d, 0ms) + 120ms) both; }
.tileClicked .val { color: var(--num); text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
.tileClicked .val::before { content: var(--label, none); }
.tileClicked[data-n="1"] { --num: #2563eb; --label: "1"; }
.tileClicked[data-n="2"] { --num: #14935a; --label: "2"; }
.tileClicked[data-n="3"] { --num: #d4142c; --label: "3"; }
.tileClicked[data-n="4"] { --num: #6b3fd4; --label: "4"; }
.tileClicked[data-n="5"] { --num: #c47a00; --label: "5"; }
.tileClicked[data-n="6"] { --num: #0e8f9b; --label: "6"; }
.tileClicked[data-n="7"] { --num: #11132a; --label: "7"; }
.tileClicked[data-n="8"] { --num: #5c6178; --label: "8"; }
@keyframes ms-val-in { from { opacity: 0; transform: scale(.2) rotate(-20deg); } to { opacity: 1; transform: none; } }


/* flags */
.flagged .cap::before {
    content: ""; position: absolute; inset: 14% 16% 10% 22%; z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='12' cy='29' rx='8' ry='2.4' fill='%23000' opacity='.35'/%3E%3Crect x='9.5' y='3' width='3' height='26' rx='1.5' fill='%23f4e9d4'/%3E%3Cpath d='M12.5 4 L29 10.5 L12.5 17 Z' fill='%23d4142c'/%3E%3Cpath d='M12.5 4 L29 10.5 L12.5 11 Z' fill='%23ff4058'/%3E%3Ccircle cx='11' cy='3.2' r='2.4' fill='%23ffc53d'/%3E%3C/svg%3E") center/contain no-repeat;
    transform-origin: 30% 95%;
    animation: ms-plant .5s cubic-bezier(.3, 1.8, .5, 1) both, ms-wave 2.4s ease-in-out .5s infinite;
}
@keyframes ms-plant { 0% { transform: translateY(-70%) scale(1.5); opacity: 0; } 60% { transform: translateY(6%) scale(.92, 1.08); opacity: 1; } 100% { transform: none; } }
@keyframes ms-wave { 0%, 100% { transform: skewY(0) rotate(0); } 50% { transform: skewY(-4deg) rotate(-3deg); } }
.is-unflag .cap::before { animation: ms-unplant .25s ease-in both; }
@keyframes ms-unplant { to { transform: translateY(-80%) scale(.6) rotate(-30deg); opacity: 0; } }

/* mines */
#board > span.bombed {
    background: radial-gradient(circle at 50% 45%, #5a1020, #2a0710);
    box-shadow: inset 0 0 0 1px rgba(255, 64, 88, .35);
}
#board > span.bombed.boom { background: radial-gradient(circle at 50% 45%, #ff6a3d, #d4142c 55%, #7a0010); box-shadow: 0 0 22px rgba(255, 90, 40, .8); z-index: 2; }
.bombed .cap { animation: ms-cap-blast .35s ease-out var(--d, 0ms) both; }
@keyframes ms-cap-blast { to { opacity: 0; transform: scale(1.6) rotate(25deg); } }
.bombed .val::before {
    content: ""; width: 78%; height: 78%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.38' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23565c9c'/%3E%3Cstop offset='.5' stop-color='%231b1e3d'/%3E%3Cstop offset='1' stop-color='%23060714'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M26 9 q4 -5 8 -2' stroke='%23c79a4a' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Crect x='22' y='8' width='7' height='6' rx='1.5' transform='rotate(40 25.5 11)' fill='%23343a78'/%3E%3Ccircle cx='18' cy='23' r='13' fill='url(%23b)'/%3E%3Cellipse cx='13.5' cy='17.5' rx='4' ry='2.6' transform='rotate(-35 13.5 17.5)' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='34.5' cy='6.5' r='3.2' fill='%23ffc53d'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.6' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bombed .val { animation: ms-mine-in .5s cubic-bezier(.3, 1.8, .5, 1) var(--d, 0ms) both; }
@keyframes ms-mine-in { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(1.35) rotate(-10deg); } 100% { opacity: 1; transform: none; } }
.misflag::after {
    content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; z-index: 4;
    color: #ff4058; font: 800 calc(var(--cell) * .7)/1 var(--display); text-shadow: 0 2px 0 #000;
    animation: ms-val-in .4s cubic-bezier(.3, 1.7, .5, 1) var(--d, 0ms) both;
}
/* board over: remaining covers dim */
.tileLocked:not(.flagged) .cap { filter: saturate(.6) brightness(.8); }
.is-won-board > .tileLocked .cap { filter: none; }

/* radar ping */
.radar::after {
    content: ""; position: absolute; inset: -30%; border-radius: 50%; z-index: 5; pointer-events: none;
    border: 3px solid #ff4058; box-shadow: 0 0 16px rgba(255, 64, 88, .9), inset 0 0 12px rgba(255, 64, 88, .6);
    animation: ms-radar 0.9s ease-out 3 both;
}
.radar .cap { animation: ms-radar-cap .45s ease-in-out 4 alternate both; }
@keyframes ms-radar { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ms-radar-cap { to { filter: brightness(1.2) sepia(1) saturate(6) hue-rotate(-40deg); } }

/* ---------------- controls ---------------- */
.ms-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.ms-mode { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ms-mode-btn {
    border: 0; background: none; color: rgba(255, 255, 255, .7); cursor: pointer;
    padding: 9px 16px; border-radius: 999px; font: 700 14px/1 var(--display);
    transition: background .25s, color .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.ms-mode-btn.is-on { background: var(--gold); color: #3a2600; box-shadow: 0 6px 16px rgba(255, 197, 61, .35); transform: scale(1.04); }
.ms-mode-btn[data-mode="flag"].is-on { background: linear-gradient(180deg, #e0182f, #a8001a); color: #fff; box-shadow: 0 6px 16px rgba(212, 20, 44, .4); }
/* full-width board: title and side column hidden, board fills the page */
#wideBtn .off, #wideBtn[aria-pressed="true"] .on { display: none; }
#wideBtn[aria-pressed="true"] .off { display: inline; }
.ms-wide .ms-main { max-width: none; }
.ms-wide .ms-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "game"; }
.ms-wide .ms-intro, .ms-wide .ms-side { display: none; }
.ms-radar-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red-hi); font-size: 12px; }

.ms-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.ms-level {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    font: 600 13.5px/1.2 var(--display); color: rgba(255, 255, 255, .85) !important;
    transition: background .2s, transform .2s;
}
.ms-level small { font-size: 12px; color: rgba(255, 255, 255, .5); font-weight: 500; }
.ms-level:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.ms-level.is-current { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.ms-custom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); animation: ms-in .35s cubic-bezier(.3, 1.4, .5, 1); }
.ms-custom label { display: flex; flex-direction: column; gap: 6px; margin: 0; font: 600 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ms-custom input { width: 96px; padding: 9px 12px; border-radius: 10px; border: 0; background: #0c0e22; color: #fff; font: 700 16px/1 var(--display); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.ms-custom input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.ms-tip { margin-top: 12px !important; font-size: 13px; color: rgba(255, 255, 255, .5); text-align: center; }
@media (hover: none) { .ms-tip { display: none; } }

/* ---------------- side: board stats card (styled like the homepage quest card) ---------------- */
.ms-side { display: grid; gap: 20px; }
.ms-quest {
    background: linear-gradient(180deg, #fffaf0, #f7ecd6); color: #3b2a14; border-radius: 20px; padding: 20px 20px 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(160, 110, 40, .25);
    transform: rotate(-1.2deg); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
    animation: ms-in .7s .3s cubic-bezier(.3, 1.4, .5, 1) both;
}
.ms-quest:hover { transform: rotate(0) translateY(-4px); }
.ms-quest-top { display: flex; align-items: center; justify-content: space-between; }
.ms-quest h2 { font: 800 30px/1.1 var(--display); color: #3b2a14; margin: 8px 0 14px; }
.ms-quest-tag { font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #9a6a1c; }
.ms-quest-count { font: 700 12px/1 var(--display); color: #9a6a1c; background: rgba(160, 110, 40, .12); padding: 5px 9px; border-radius: 999px; }
.ms-bar { height: 10px; border-radius: 99px; background: rgba(160, 110, 40, .18); overflow: hidden; }
.ms-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .6s cubic-bezier(.2, .7, .2, 1); position: relative; }
.ms-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ms-bar-shine 2s linear infinite; }
@keyframes ms-bar-shine { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.ms-quest-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font: 600 13px/1.2 var(--display); color: #6d5534; }

.ms-howto { border-radius: 20px; padding: 20px; background: var(--ink-2); box-shadow: 0 20px 40px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1); animation: ms-in .7s .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.ms-howto h3 { font-size: 18px; font-weight: 800; margin-bottom: 12px; color: #fff; }
.ms-howto ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.ms-howto li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.ms-howto li b { color: #fff; }
.ms-howto li > span { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #3a2600; font: 800 13px/1 var(--display); }
.ms-howto-note { margin-top: 12px !important; font-size: 13px; color: rgba(255, 255, 255, .5); }

.ms-foot { text-align: center; padding: 24px 16px 36px; font: 500 13px/1.4 var(--display); color: rgba(255, 255, 255, .4); }

/* ---------------- toasts ---------------- */
.ms-toasts { position: fixed; left: 50%; bottom: 20px; z-index: 50; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.ms-toast {
    display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px;
    background: var(--ink); color: #fff; font: 700 14.5px/1.25 var(--display);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .45), inset 0 0 0 1.5px rgba(255, 197, 61, .5);
    animation: ms-toast-in .45s cubic-bezier(.3, 1.5, .5, 1) both;
}
.ms-toast.is-out { animation: ms-toast-out .35s ease-in both; }
.ms-toast b { color: var(--gold); }
@keyframes ms-toast-in { from { opacity: 0; transform: translateY(20px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ms-toast-out { to { opacity: 0; transform: translateY(14px) scale(.92); } }

/* ---------------- result modal ---------------- */
.ms-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8, 9, 24, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: ms-fade .3s ease both; }
.ms-modal.is-out { animation: ms-fade .25s ease reverse both; }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
.ms-modal-card {
    position: relative; width: 100%; max-width: 400px; text-align: center; padding: 28px 24px 24px; border-radius: 24px;
    background: linear-gradient(180deg, #fffaf0, #f7ecd6); color: #3b2a14;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(160, 110, 40, .25);
    animation: ms-card-in .6s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes ms-card-in { from { opacity: 0; transform: translateY(40px) scale(.8) rotate(-4deg); } to { opacity: 1; transform: none; } }
.ms-modal-art { height: 110px; margin: -84px auto 18px; display: grid; place-items: center; }
.ms-modal-art img { width: 140px; height: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .35)); animation: ms-chest 1.2s ease-in-out infinite; }
.ms-modal-art .ms-big-emoji { font-size: 84px; line-height: 1; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); animation: ms-wobble 1.4s ease-in-out infinite; }
@keyframes ms-chest { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes ms-wobble { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }
.ms-modal-card h2 { font: 800 34px/1.05 var(--display); color: #3b2a14; letter-spacing: -.02em; }
.ms-modal-card.is-lost h2 { color: var(--red-hi); }
.ms-modal-card p { margin-top: 8px !important; font-size: 15px; color: #6d5534; }
.ms-modal-stats { display: flex; justify-content: center; gap: 10px; margin: 18px 0 20px; flex-wrap: wrap; }
.ms-modal-stats div { min-width: 92px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(160, 110, 40, .2); }
.ms-modal-stats small { display: block; font: 700 10.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #9a6a1c; }
.ms-modal-stats b { display: block; margin-top: 6px; font: 800 22px/1 var(--display); color: #3b2a14; }
.ms-modal-stats .is-record b { color: var(--red-hi); }
.ms-modal-actions { display: grid; gap: 10px; }

/* ---------------- fx canvas ---------------- */
.ms-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .ms *, .ms *::before, .ms *::after { animation-iteration-count: 1 !important; }
    .ms-bg-sparkles, .cap::after, .ms-face-shine { display: none; }
    .ms-frame.is-shake { animation: none; }
}