/* Minesweep 95: a retro desktop on an old CRT, always dark around it. Scoped to .ms so it leaves site.css alone. */
.ms {
  --room: #0a0c10; --bezel: #d9d0b9; --bezel-hi: #f1eadb; --bezel-lo: #a99f86; --desk: #0b6b6b;
  --silver: #c0c0c0; --hi: #ffffff; --lo: #808080; --dk: #000000; --navy: #000080; --navy2: #1084d0;
  --n1: #0000ff; --n2: #007b00; --n3: #ff0000; --n4: #000080; --n5: #7b0000; --n6: #007b7b; --n7: #000000; --n8: #7b7b7b;
  --px: "Silkscreen", "Courier New", monospace; --ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif; --led: "VT323", "Courier New", monospace;
  --i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23f00' d='M4 3h5v1H4zM2 4h7v2H2zM4 6h5v1H4z'/%3E%3Cpath fill='%23000' d='M8 3h1v8H8zM5 11h7v1H5zM3 12h11v2H3z'/%3E%3C/svg%3E");
  --i-mine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 1h2v14H7zM1 7h14v2H1zM4 4h8v8H4zM3 5h10v6H3zM5 3h6v10H5zM3 3h1v1H3zM12 3h1v1h-1zM3 12h1v1H3zM12 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M5 5h2v2H5z'/%3E%3C/svg%3E");
  --f-base: "%3Cpath fill='%23000' d='M5 0h6v1H5zM3 1h10v1H3zM2 2h12v1H2zM1 3h14v2H1zM0 5h16v6H0zM1 11h14v2H1zM2 13h12v1H2zM3 14h10v1H3zM5 15h6v1H5z'/%3E%3Cpath fill='%23ff0' d='M5 1h6v1H5zM3 2h10v1H3zM2 3h12v2H2zM1 5h14v6H1zM2 11h12v2H2zM3 13h10v1H3zM5 14h6v1H5z'/%3E";
  --i-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h6v1H5zM3 1h10v1H3zM2 2h12v1H2zM1 3h14v2H1zM0 5h16v6H0zM1 11h14v2H1zM2 13h12v1H2zM3 14h10v1H3zM5 15h6v1H5z'/%3E%3Cpath fill='%23ff0' d='M5 1h6v1H5zM3 2h10v1H3zM2 3h12v2H2zM1 5h14v6H1zM2 11h12v2H2zM3 13h10v1H3zM5 14h6v1H5z'/%3E%3Cpath fill='%23000' d='M5 5h2v2H5zM9 5h2v2H9zM4 9h1v1H4zM11 9h1v1h-1zM5 10h1v1H5zM10 10h1v1h-1zM6 11h4v1H6z'/%3E%3C/svg%3E");
  --i-cool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h6v1H5zM3 1h10v1H3zM2 2h12v1H2zM1 3h14v2H1zM0 5h16v6H0zM1 11h14v2H1zM2 13h12v1H2zM3 14h10v1H3zM5 15h6v1H5z'/%3E%3Cpath fill='%23ff0' d='M5 1h6v1H5zM3 2h10v1H3zM2 3h12v2H2zM1 5h14v6H1zM2 11h12v2H2zM3 13h10v1H3zM5 14h6v1H5z'/%3E%3Cpath fill='%23000' d='M2 5h12v1H2zM3 6h4v2H3zM9 6h4v2H9zM4 9h1v1H4zM11 9h1v1h-1zM5 10h1v1H5zM10 10h1v1h-1zM6 11h4v1H6z'/%3E%3C/svg%3E");
  --i-dead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h6v1H5zM3 1h10v1H3zM2 2h12v1H2zM1 3h14v2H1zM0 5h16v6H0zM1 11h14v2H1zM2 13h12v1H2zM3 14h10v1H3zM5 15h6v1H5z'/%3E%3Cpath fill='%23ff0' d='M5 1h6v1H5zM3 2h10v1H3zM2 3h12v2H2zM1 5h14v6H1zM2 11h12v2H2zM3 13h10v1H3zM5 14h6v1H5z'/%3E%3Cpath fill='%23000' d='M4 4h1v1H4zM6 4h1v1H6zM5 5h1v1H5zM4 6h1v1H4zM6 6h1v1H6zM9 4h1v1H9zM11 4h1v1h-1zM10 5h1v1h-1zM9 6h1v1H9zM11 6h1v1h-1zM6 10h4v1H6zM5 11h1v1H5zM10 11h1v1h-1z'/%3E%3C/svg%3E");
  --i-oh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h6v1H5zM3 1h10v1H3zM2 2h12v1H2zM1 3h14v2H1zM0 5h16v6H0zM1 11h14v2H1zM2 13h12v1H2zM3 14h10v1H3zM5 15h6v1H5z'/%3E%3Cpath fill='%23ff0' d='M5 1h6v1H5zM3 2h10v1H3zM2 3h12v2H2zM1 5h14v6H1zM2 11h12v2H2zM3 13h10v1H3zM5 14h6v1H5z'/%3E%3Cpath fill='%23000' d='M5 4h2v2H5zM9 4h2v2H9zM7 8h2v1H7zM6 9h1v2H6zM9 9h1v2H9zM7 11h2v1H7z'/%3E%3C/svg%3E");
  --i-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' stroke='%23000' d='M3.5 1.5v11l3-3 2 4.5 2-1-2-4.5h4z'/%3E%3C/svg%3E");
  position: relative; margin-top: -28px; padding: 26px 0 34px; display: grid; gap: 18px; color: #e8f0e8;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 30%, #18222c, var(--room) 70%);
  border-image: radial-gradient(ellipse at 50% 30%, #18222c, var(--room) 70%) fill 0 / 0 / 0 100vmax;
}
.page-head h1 { font-family: "Silkscreen", monospace; font-weight: 700; letter-spacing: 0; }
.backlink { font-weight: 800; font-size: 14px; text-decoration: none; justify-self: start; }
.backlink:hover { text-decoration: underline; }

/* Hero */
.ms-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ms-logo { min-width: 0; flex: 1 1 300px; }
.ms-mark { display: block; width: min(100%, 400px); height: auto; overflow: visible; }
.ms-mark text { font-family: var(--px); font-weight: 700; }
.ms-mark .t1 { font-size: 36px; fill: #f2f2f2; paint-order: stroke; stroke: #ff3b3b; stroke-width: 0; filter: drop-shadow(3px 3px 0 #c81e1e); }
.ms-mark .t2 { font-family: var(--led); font-weight: 400; font-size: 34px; fill: #39ff7a; }
.ms-mark .cur { fill: #39ff7a; animation: msblink 1s steps(1) infinite; }
@keyframes msblink { 50% { opacity: 0; } }
.ms-prompt { margin: 6px 0 0; font-family: var(--led); font-size: 21px; line-height: 1.1; color: #39ff7a; text-shadow: 0 0 6px rgba(57,255,122,.55); overflow-wrap: anywhere; }
.ms-photo { margin: 0; width: 210px; flex: none; background: var(--silver); color: #000; padding: 3px; box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dk), inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 var(--lo), 6px 6px 0 rgba(0,0,0,.45); transform: rotate(1.5deg); }
.ms-photo .ttl, .ms .titlebar { display: flex; align-items: center; gap: 6px; padding: 2px 3px 2px 6px; background: linear-gradient(90deg, var(--navy), var(--navy2)); color: #fff; font-family: var(--px); font-weight: 600; font-size: 14px; line-height: 20px; }
.ms-photo .ttl span:first-child, .ms .titlebar .tt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms .tb { display: inline-flex; gap: 2px; flex: none; }
.ms .tb i { width: 16px; height: 14px; background: var(--silver); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dk); }
.ms .tb i:last-child { margin-left: 2px; background: var(--silver) linear-gradient(45deg, transparent 44%, #000 44% 56%, transparent 56%) center / 8px 8px no-repeat; }
.ms-photo .frame { position: relative; margin-top: 3px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--desk); box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.ms-photo .frame svg, .ms-photo .frame img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; display: block; }
.ms-photo .frame img { opacity: 0; transition: opacity .2s steps(4); image-rendering: auto; }
.ms-photo.has .frame img { opacity: 1; }
.ms-photo figcaption { display: grid; gap: 1px; font-family: var(--ui); font-size: 11.5px; line-height: 1.3; padding: 4px 3px 1px; color: #000; }
.ms-photo figcaption a { color: #000080; }
.ms-photo figcaption .cr:empty { display: none; }

/* Monitor and window */
.ms .monitor { background: linear-gradient(var(--bezel-hi), var(--bezel) 30%, var(--bezel-lo)); border-radius: 22px; padding: clamp(10px, 2.4vw, 26px) clamp(10px, 2.4vw, 26px) 0;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.2); min-width: 0; }
.ms .screen { position: relative; border-radius: 14px; padding: clamp(8px, 2vw, 22px); min-width: 0;
  background: radial-gradient(ellipse at 50% 40%, #138a8a, var(--desk) 70%, #075050); box-shadow: inset 0 0 0 3px #3a372f, inset 0 0 40px rgba(0,0,0,.55); overflow: hidden; }
.ms .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.12), transparent 45%); }
.ms .chin { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 18px; }
.ms .chin .led { width: 8px; height: 8px; border-radius: 50%; background: #39ff7a; box-shadow: 0 0 8px #39ff7a; }
.ms .chin .grill { width: 90px; height: 8px; background: repeating-linear-gradient(90deg, #8e8570 0 3px, transparent 3px 6px); border-radius: 2px; }
.ms .win { position: relative; background: var(--silver); color: #000; padding: 3px; margin: 0 auto; width: fit-content; max-width: 100%; min-width: min(100%, 300px);
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--dk), inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 4px 4px 0 rgba(0,0,0,.35);
  font-family: var(--ui); display: grid; gap: 4px; }
.ms .win:has(.board[data-level="medium"]) { width: min(100%, 680px); }
.ms .win:has(.board[data-level="hard"]) { width: 100%; }
.ms .titlebar .ico { width: 16px; height: 16px; background: var(--i-mine) center / 14px no-repeat; filter: invert(1); flex: none; }
.ms .menubar { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 2px; }
.ms .mb, .ms .mode { font: inherit; font-size: 14px; background: transparent; color: #000; border: 0; padding: 4px 8px; min-height: 36px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ms .mb:hover, .ms .mb[aria-expanded="true"] { background: var(--navy); color: #fff; }
.ms .mb::first-letter { text-decoration: underline; }
.ms .mode { margin-left: auto; box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dk), inset -2px -2px 0 var(--lo); }
.ms .mode[aria-pressed="true"] { box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--lo); background: #dcdcdc; }
.ms .mode .ic { font-size: 0; width: 16px; height: 16px; background: var(--i-cursor) center / 16px no-repeat; }
.ms .mode[aria-pressed="true"] .ic { background-image: var(--i-flag); }
.ms .mb:focus-visible, .ms .mode:focus-visible, .ms .tabs button:focus-visible, .ms .linkbtn:focus-visible, .ms .face:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.ms .opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px; padding: 8px; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.ms .optl { font-size: 14px; }
.ms .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ms .tabs button { font: inherit; font-size: 15px; line-height: 1.15; border: 0; padding: 6px 12px; background: var(--silver); color: #000; cursor: pointer; text-align: left;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dk), inset -2px -2px 0 var(--lo); }
.ms .tabs button small { display: block; font-size: 12px; color: #333; }
.ms .tabs button[aria-pressed="true"] { box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--lo); background: #d4d4d4; }
.ms .tabs button[aria-pressed="true"]::before { content: "\2022 "; }

.ms .body { padding: 8px; box-shadow: inset 2px 2px 0 var(--lo), inset -2px -2px 0 var(--hi); display: grid; gap: 8px; min-width: 0; }
.ms .stats { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 5px 6px; box-shadow: inset 2px 2px 0 var(--lo), inset -2px -2px 0 var(--hi); }
.ms .stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #222; }
.ms .stat:last-child { justify-content: flex-end; }
.ms .stat b { font-family: var(--led); font-weight: 400; font-size: 34px; line-height: 30px; color: #ff1a1a; background: #000; padding: 0 5px; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(255,26,26,.7); box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); letter-spacing: 1px; }
.ms .face { width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; font-size: 0; color: transparent; background: var(--silver) var(--i-smile) center / 26px no-repeat;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dk), inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 var(--lo); }
.ms .face:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--lo); background-position: calc(50% + 1px) calc(50% + 1px); }
.ms .face[data-face="cool"] { background-image: var(--i-cool); }
.ms .face[data-face="dead"] { background-image: var(--i-dead); }
.ms .face[data-face="oh"] { background-image: var(--i-oh); }

.ms .msg { margin: 0 2px; padding: 4px 8px; text-align: center; font-size: 15px; color: #000; background: #ffffe1; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.ms .msg:empty { display: none; }
.ms .msg.win { background: #d8ffd8; } .ms .msg.lose { background: #ffd8d8; }

.ms .scroll { overflow-x: auto; overscroll-behavior-x: contain; container-type: inline-size; min-width: 0; }
.ms .board { --cols: 9; --min: 18px; --max: 40px; --gap: 0px;
  --cs: clamp(var(--min), calc((100cqw - 6px) / var(--cols)), var(--max));
  display: grid; grid-template-columns: repeat(var(--cols), var(--cs)); grid-auto-rows: var(--cs); padding: 3px;
  width: max-content; margin: 0 auto; background: var(--lo); box-shadow: inset 3px 3px 0 var(--lo), inset -3px -3px 0 var(--hi);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.ms .board[data-level="medium"] { --max: 34px; }
.ms .board[data-level="hard"] { --min: 28px; --max: 34px; }
.ms .c { all: unset; box-sizing: border-box; width: var(--cs); height: var(--cs); display: grid; place-items: center; background: var(--silver);
  box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), inset -3px -3px 0 #a0a0a0;
  font-family: var(--ui); font-weight: 900; font-size: calc(var(--cs) * .6); line-height: 1; cursor: pointer; color: #000; -webkit-tap-highlight-color: transparent; }
.ms .c:hover { background: #cbcbcb; }
.ms .c:active:not(.o):not(.f) { box-shadow: inset 1px 1px 0 var(--lo); background: #bdbdbd; }
.ms .c:focus-visible { outline: 2px solid #000080; outline-offset: -3px; position: relative; z-index: 1; }
.ms .c.o { background: #bdbdbd; box-shadow: inset 1px 1px 0 #7b7b7b; cursor: default; animation: msopen .12s steps(2); }
@keyframes msopen { from { background: #e4e4e4; } }
.ms .c.o.n { cursor: pointer; }
.ms .c.f, .ms .c.m { background-position: center; background-repeat: no-repeat; background-size: calc(var(--cs) * .62); }
.ms .c.f { background-image: var(--i-flag); animation: msflag .18s steps(3); }
@keyframes msflag { from { background-size: calc(var(--cs) * .2); } }
.ms .c.m { background-image: var(--i-mine); }
.ms .c.boom { background-color: #ff0000; }
.ms .c.x { position: relative; }
.ms .c.x::after { content: ""; position: absolute; inset: 15%; background: linear-gradient(45deg, transparent 42%, #ff0000 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #ff0000 42% 58%, transparent 58%); }
.ms .c[data-n="1"] { color: var(--n1); } .ms .c[data-n="2"] { color: var(--n2); } .ms .c[data-n="3"] { color: var(--n3); } .ms .c[data-n="4"] { color: var(--n4); }
.ms .c[data-n="5"] { color: var(--n5); } .ms .c[data-n="6"] { color: var(--n6); } .ms .c[data-n="7"] { color: var(--n7); } .ms .c[data-n="8"] { color: var(--n8); }
.ms .board.done .c { cursor: default; }
.ms .board.done .c:not(.o):hover { background-color: var(--silver); }

.ms .statusbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; padding: 3px 6px; font-size: 13px; line-height: 1.35; color: #000;
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.ms .bestrow { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.ms .bests { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; }
.ms .bests span { white-space: nowrap; }
.ms .hint { margin: 0; }
.ms kbd { font: inherit; font-size: 12px; padding: 0 5px; background: var(--silver); color: #000; box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
.ms .linkbtn { font: inherit; font-size: 13px; color: #000080; background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ms .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms .touch-only { display: none; }
@media (hover: none), (pointer: coarse) { .ms .touch-only { display: inline; } .ms .mouse-only { display: none; } }

/* Guide: a plain text window */
.guide#guide { position: relative; padding-top: 52px; background: #ffffff; border-radius: 0; box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #000, inset 2px 2px 0 #fff, inset -2px -2px 0 #808080; border: 3px solid #c0c0c0; }
.guide#guide::before { content: "readme.txt"; position: absolute; left: 0; right: 0; top: 0; padding: 3px 10px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-family: "Silkscreen", monospace; font-size: 15px; }
.guide#guide h2 { font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-weight: 700; letter-spacing: -.01em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide#guide { background: #14161d; border-color: #3a3f52; box-shadow: none; } }
:root[data-theme="dark"] .guide#guide { background: #14161d; border-color: #3a3f52; box-shadow: none; }

@media (max-width: 640px) {
  .ms-hero { display: contents; }
  .ms-logo { order: 1; } .ms .monitor { order: 2; }
  .ms-photo { order: 3; transform: none; width: min(100%, 280px); justify-self: center; }
  .ms .monitor { border-radius: 14px; }
  .ms .screen { border-radius: 8px; }
  .ms .chin { height: 22px; }
  .ms .stat span { display: none; }
  .ms .mode { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ms *, .ms *::before { animation: none !important; transition: none !important; } }