.os-window--minesweeper {--ms-cell:22px;z-index:62;top:6%;left:min(44%,calc(100% - 420px));width:max(264px,calc(var(--ms-cols,9) * var(--ms-cell) + 38px));} @media (pointer:coarse),(max-width:580px) {.os-window--minesweeper {--ms-cell:min(32px,calc((100vw - 44px) / var(--ms-cols,9)));}} .ms {flex:1 1 auto;min-height:0;display:grid;justify-items:center;align-content:start;gap:6px;padding:6px;overflow:auto;} .ms__options {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;width:100%;} .ms__options .os-toggle {min-width:0;padding-inline:8px;} .os-toggle img {width:16px;height:16px;} .os-toggle[aria-pressed="true"] {background:var(--pressed-fill);} .ms__board {position:relative;display:grid;gap:6px;padding:6px;background:var(--color-face);box-shadow:var(--bevel-window);} .ms__head {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px;box-shadow:var(--bevel-status);} .ms__led {min-width:40px;padding:1px 3px;background:#000;color:#ff3030;font:700 18px/1.1 var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;} .ms__face {display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:var(--surface-raised);box-shadow:var(--bevel-raised);--focus-offset:-4px;} .ms__face:active {box-shadow:var(--bevel-pressed);} .ms__face img {width:24px;height:24px;image-rendering:pixelated;} .ms__grid {display:grid;grid-template-columns:repeat(var(--ms-cols,9),var(--ms-cell));grid-auto-rows:var(--ms-cell);box-shadow:0 0 0 2px var(--color-shadow);touch-action:manipulation;user-select:none;-webkit-user-select:none;} .ms__cell {display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:var(--color-face) center / 70% 70% no-repeat;box-shadow:var(--bevel-raised);overflow:hidden;font:700 calc(var(--ms-cell) * .62)/1 var(--font-read);--focus-offset:-4px;} .ms__cell.is-open {background-color:var(--color-paper);box-shadow:inset 0 0 0 .5px var(--color-shadow);} .ms__cell.is-flag {background-image:url("/assets/yc/icons/breakpoint.svg");} .ms__cell.is-bug {background-image:url("/assets/yc/icons/bug.svg");background-color:var(--color-paper);box-shadow:inset 0 0 0 .5px var(--color-shadow);} .ms__cell.is-exploded {background-color:#ff3030;animation:ms-blink .5s steps(2) 3;} @keyframes ms-blink {50% {background-color:#ffe24a;}} .ms__cell.is-wrong {background-image:linear-gradient(45deg,transparent 44%,#d00000 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#d00000 44% 56%,transparent 56%),url("/assets/yc/icons/breakpoint.svg");background-size:100% 100%,100% 100%,70% 70%;background-color:var(--color-paper);box-shadow:inset 0 0 0 .5px var(--color-shadow);} .n1 {color:#2a1fc4;} .n2 {color:#007a00;} .n3 {color:#d00000;} .n4 {color:#1c0f66;} .n5 {color:#800000;} .n6 {color:#007a7a;} .n7 {color:#000;} .n8 {color:#5a5a5a;} .ms__board.is-won .ms__cell {animation:ms-wave .9s ease-out var(--ms-wave,0ms) 2 both;} @keyframes ms-wave {0%,100% {filter:none;} 30% {background-color:#09bbc8;filter:brightness(1.15);} 60% {background-color:#d9fced;}} .ms__board.is-won .ms__face {animation:ms-bounce .45s ease-in-out 4;} @keyframes ms-bounce {50% {transform:translateY(-4px) scale(1.12);}} .ms__win {position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;overflow:hidden;background:rgba(0,0,32,.45);--ms-cell:32px;} .ms__bits {position:absolute;inset:0;pointer-events:none;} .ms__bits span {position:absolute;top:-16px;font:700 14px/1 var(--font-mono);text-shadow:1px 1px 0 #000;animation:ms-bit linear both;} @keyframes ms-bit {to {transform:translateY(100vh) rotate(30deg);opacity:0;}} .ms__win .ms__result {position:relative;top:auto;left:auto;width:min(100%,300px);max-width:100%;max-height:100%;overflow:auto;background:var(--color-face);opacity:1;animation:ms-pop .3s steps(3) .35s both;} .ms__result-body {display:grid;gap:6px;padding:8px;} .yc .ms__result-head {display:flex;align-items:center;gap:8px;margin:0;font-weight:700;} .ms__result dl {display:grid;gap:2px;margin:0;padding:4px 6px;background:var(--color-paper);box-shadow:var(--bevel-status);} .ms__result dl div {display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;} .ms__result dt {color:var(--color-ink);} .ms__result dd {margin:0 0 0 auto;font-weight:700;text-align:right;} .yc .ms__result-actions {display:flex;justify-content:flex-end;gap:6px;margin:0;} @keyframes ms-pop {from {transform:scale(.6);} to {transform:none;}} @media (prefers-reduced-motion:reduce) {.ms__board.is-won .ms__cell,.ms__board.is-won .ms__face,.ms__result {animation:none;} .ms__bits {display:none;}}