.ms-secret{margin-left:auto;font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.ms-secret span{color:var(--accent-2)}
.ms{padding:24px var(--page-pad) 80px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;position:relative;overflow-x:clip}
.ms:before{content:'';position:absolute;width:50vw;height:50vw;left:-18vw;top:-10vw;border-radius:50%;background:#6d3df0;filter:blur(110px);opacity:.35;pointer-events:none;z-index:-1}
.ms:after{content:'';position:absolute;width:40vw;height:40vw;right:-14vw;bottom:0;border-radius:50%;background:#0ea5e9;filter:blur(110px);opacity:.22;pointer-events:none;z-index:-1}
body{overflow-x:hidden}
.ms-head h1{font:400 clamp(58px,10vw,132px)/.9 'Gambarino',Georgia,serif;letter-spacing:-.055em;margin:0;padding:0 .05em .08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shift 9s ease-in-out infinite alternate}
.ms-head p{color:var(--muted);margin:10px 0 0}
.ms .filters{margin:0;justify-content:center}
.ms-custom{display:flex;flex-wrap:wrap;justify-content:center;align-items:end;gap:12px}.ms-custom[hidden]{display:none}
.ms-custom label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);text-align:left}
.ms-custom input{width:86px;padding:9px 12px;border-radius:12px;border:1px solid var(--surface-2);background:var(--surface);color:var(--ink);font:inherit}
.ms-custom input:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

.ms-frame{max-width:100%;padding:14px;border-radius:22px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--surface-2);box-shadow:0 30px 80px -20px #6d3df066,0 0 0 1px #8b5cf622;backdrop-filter:blur(10px);transition:box-shadow .5s}
.ms-frame.won{box-shadow:0 30px 90px -10px #38bdf888,0 0 0 2px #38bdf8aa}
.ms-frame.lost{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,80%{transform:translateX(-3px)}30%,50%,70%{transform:translateX(6px)}40%,60%{transform:translateX(-6px)}}
.ms-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.led{font:600 26px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;padding:9px 12px;border-radius:12px;background:#07060f;color:var(--accent-2);text-shadow:0 0 14px #38bdf899;box-shadow:inset 0 2px 6px #000a;min-width:4.4ch}
.led-mines{color:#c4b5fd;text-shadow:0 0 14px #a78bfa99}
.face{width:50px;height:50px;border-radius:15px;border:0;background:var(--grad);font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 8px 24px #6d3df066,inset 0 1px 0 #ffffff55;transition:transform .15s}.face:hover{transform:translateY(-2px)}.face:active{transform:scale(.92)}
.ms-scroll{max-width:calc(100vw - 2*var(--page-pad) - 30px);overflow:auto;-webkit-overflow-scrolling:touch;padding:2px}

.board{--cs:clamp(24px,3vw,32px);display:grid;grid-template-columns:repeat(var(--cols),var(--cs));gap:3px;width:max-content;margin:0 auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.c{width:var(--cs);height:var(--cs);padding:0;border:0;border-radius:7px;display:grid;place-items:center;cursor:pointer;color:var(--ink);font:700 calc(var(--cs)*.56)/1 'General Sans',Arial,sans-serif;
  background:linear-gradient(155deg,#43378a,#2a2358);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -2px 0 #00000059;transition:background .12s,transform .12s}
.c:hover{background:linear-gradient(155deg,#5546a8,#322a6a)}
.c:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px;position:relative;z-index:1}
.c svg{width:64%;height:64%;display:block}
.c.pressed,.c.open{background:#0f0d1f;box-shadow:inset 0 0 0 1px #ffffff0f;cursor:default}
.c.pressed{transform:scale(.94)}
.c.open{animation:reveal .16s ease-out}@keyframes reveal{from{transform:scale(.8);opacity:.4}}
.c.flag{color:var(--accent-2)}.c.flag svg{filter:drop-shadow(0 0 4px #38bdf8aa)}
.c.q{color:#c4b5fd}
.c.mine{color:#e9e5ff}
.c.boom{background:linear-gradient(135deg,#f43f5e,#9f1239)!important;color:#fff;animation:boom .5s ease-out}@keyframes boom{0%{transform:scale(1.5);box-shadow:0 0 0 0 #f43f5e}100%{box-shadow:0 0 0 16px #f43f5e00}}
.c.wrong{background:#1b1030}
.n1{color:#38bdf8}.n2{color:#34d399}.n3{color:#f472b6}.n4{color:#a78bfa}.n5{color:#fb923c}.n6{color:#2dd4bf}.n7{color:#f1effb}.n8{color:#a9a5c8}

body.light .c{background:linear-gradient(155deg,#b9aef3,#9d8fea);box-shadow:inset 0 1px 0 #ffffff99,inset 0 -2px 0 #0000001f}
body.light .c:hover{background:linear-gradient(155deg,#c8bff7,#ab9ff0)}
body.light .c.pressed,body.light .c.open{background:#f8f7ff;box-shadow:inset 0 0 0 1px #17133a14}
body.light .c.flag{color:#0369a1}body.light .c.mine{color:#17133a}body.light .c.wrong{background:#fde2e8}
body.light .n1{color:#0284c7}body.light .n2{color:#059669}body.light .n3{color:#db2777}body.light .n4{color:#6d28d9}body.light .n5{color:#c2410c}body.light .n6{color:#0d9488}body.light .n7{color:#17133a}body.light .n8{color:#6b6797}

.ms-foot{display:flex;flex-direction:column;gap:10px;align-items:center;color:var(--muted);font-size:14px}.ms-foot p{margin:0}
.ms-meta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center}
.ms-marks{display:flex;align-items:center;gap:8px;cursor:pointer}.ms-marks input{accent-color:var(--accent);width:16px;height:16px}
#best{color:var(--accent-2)}

#story p{max-width:56ch}.dialog-links button{border:0;background:none;padding:0;color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:5px}.dialog-links button:hover{color:var(--accent)}
@media(max-width:600px){.ms-secret{display:none}.led{font-size:21px;padding:8px 9px}.face{width:44px;height:44px;font-size:23px}.ms-frame{padding:10px}}
@media(prefers-reduced-motion:reduce){.ms-head h1{animation:none}}