/* Minesweeper Museum · loaded only by its pages (body.mm), generated by museum.py from hometill.css's layout.
   Tokens = the game's museum palette (gallery wall cream, brass, ink; minesweeper-museum DesignTokens), light and dark.
   Type: the system's serif for headings (the game's serif titles) and system-ui for text, so these pages load no web fonts.
   site.css stays untouched: the pages remap its variables under body.mm, so the shared header and footer keep their structure. */

body.mm{
  --mm-canvas:#F6F0E4;--mm-surface:#FFFCF5;--mm-fill:#EFE5D2;--mm-rule:#E4D8C2;--mm-line:rgba(42,34,22,.22);
  --mm-ink:#2A2216;--mm-ink2:#6B5E4A;--mm-accent:#8A6218;--mm-on-accent:#FFFCF5;
  --mm-in:#8A6218;--mm-in-fill:#F3E3BF;--mm-dawn-a:#F3E3BF;--mm-dawn-b:#F6F0E4;
  --mm-nav:rgba(246,240,228,.86);
  --mm-text:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mm-serif:ui-serif,"New York",Georgia,"Times New Roman",serif;
  --mm-shadow:0 30px 60px -30px rgba(42,34,22,.28),0 10px 24px -12px rgba(42,34,22,.14);
}
@media (prefers-color-scheme:dark){
  body.mm{
    --mm-canvas:#17130D;--mm-surface:#211B13;--mm-fill:#2B241A;--mm-rule:#352C1F;--mm-line:rgba(241,232,216,.26);
    --mm-ink:#F1E8D8;--mm-ink2:#B9AC96;--mm-accent:#D9AE5B;--mm-on-accent:#17130D;
    --mm-in:#D9AE5B;--mm-in-fill:#3A2F1C;--mm-dawn-a:#2B241A;--mm-dawn-b:#17130D;
    --mm-nav:rgba(23,19,13,.86);
    --mm-shadow:0 30px 60px -30px rgba(0,0,0,.65),0 10px 24px -12px rgba(0,0,0,.45);
  }
}
body.mm h1,body.mm h2{font-family:var(--mm-serif);font-weight:600;letter-spacing:.005em}

/* ---- Remap site.css variables ---- */
body.mm{
  --cream:var(--mm-canvas);--ink:var(--mm-ink);--ink2:var(--mm-ink2);--teal:var(--mm-accent);--orange:var(--mm-accent);
  --sand:var(--mm-fill);--mint:var(--mm-fill);--peach:var(--mm-fill);--butter:var(--mm-fill);--sky:var(--mm-fill);
  --serif:var(--mm-text);--sans:var(--mm-text);--shadow:var(--mm-shadow);--r:20px;
  font-family:var(--mm-text);background:var(--mm-canvas);color:var(--mm-ink);
}
body.mm h1,body.mm h2{font-family:var(--mm-text);font-weight:700;letter-spacing:-.02em;line-height:1.08}
body.mm h1{font-size:clamp(38px,5.6vw,68px)}
body.mm h2{font-size:clamp(28px,3.6vw,44px)}
body.mm h3{font-family:var(--mm-text);font-size:19px;font-weight:600;letter-spacing:0;line-height:1.3}
body.mm .accent{font-style:normal;color:var(--mm-ink2)}
body.mm :is(.brand,.btn,.lang,.platforms,b,strong,.faq summary){font-weight:600}
body.mm .eyebrow{text-transform:none;letter-spacing:.01em;font:600 15px/1.2 var(--mm-text);color:var(--mm-ink2)}
body.mm .eyebrow::before{background:var(--mm-ink2)}
body.mm a{color:inherit}
body.mm .skip:focus{background:var(--mm-surface);color:var(--mm-ink)}
body.mm .lead{color:var(--mm-ink2)}

/* Shared header and footer: same structure, Hometill surfaces (and dark mode) */
body.mm .nav{background:var(--mm-nav);border-bottom-color:var(--mm-rule)}
body.mm .lang{border-color:var(--mm-line)}
body.mm .langs div{background:var(--mm-surface);box-shadow:var(--mm-shadow);border:1px solid var(--mm-rule)}
body.mm footer .wrap{border-top-color:var(--mm-rule)}

/* Buttons and pills: monochrome, like the app's controls */
body.mm .btn{min-height:48px;border-radius:999px}
body.mm :is(.btn-orange,.btn-ink){background:var(--mm-accent);color:var(--mm-on-accent);box-shadow:none}
body.mm .btn-ghost{border-color:var(--mm-line);color:var(--mm-ink)}
body.mm .soon{color:var(--mm-ink2)}
body.mm .soon b{text-transform:none;letter-spacing:.01em;font-size:13px;font-weight:600;background:var(--mm-fill);color:var(--mm-ink);padding:6px 10px;white-space:nowrap}
body.mm .platforms{color:var(--mm-ink2)}

/* Hero: the real icon («Amanece clarito») on a dawn wash, three promises */
.mm-meta{margin-top:22px;font-size:15px;color:var(--mm-ink2)}
.mm-stage{position:relative;border-radius:40px;aspect-ratio:1/1;max-width:500px;width:100%;margin-left:auto;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--mm-dawn-a),var(--mm-dawn-b));box-shadow:inset 0 0 0 1px var(--mm-rule)}
.mm-stage picture{display:block;width:48%}
img.mm-icon{border-radius:22.5%}
.mm-hero-icon{display:block;width:100%;height:auto;box-shadow:var(--mm-shadow)}
.mm-chips{list-style:none;margin:0;padding:0}
.mm-chip{position:absolute;background:var(--mm-surface);color:var(--mm-ink);border:1px solid var(--mm-rule);border-radius:999px;
  padding:9px 15px;font:600 14px/1.2 var(--mm-text);box-shadow:var(--mm-shadow);white-space:nowrap}
.mm-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mm-in);margin-right:8px;vertical-align:1px}
.mm-chip.c0{left:6%;top:7%}
.mm-chip.c1{right:5%;bottom:16%}
.mm-chip.c2{left:8%;bottom:5%}
@media(max-width:900px){.mm-stage{margin:0 auto;max-width:440px}}
@media(max-width:420px){.mm-chip{font-size:13px;padding:8px 12px}.mm-chip.c1{right:3%}.mm-chip.c2{left:4%}}

/* Checklists (drawn in CSS so they follow light and dark): the app's "money in" green */
.mm-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.mm-checks li{position:relative;padding-left:30px;color:var(--mm-ink2);max-width:60ch}
.mm-checks li::before{content:"";position:absolute;left:0;top:.25em;width:20px;height:20px;border-radius:50%;background:var(--mm-in-fill)}
.mm-checks li::after{content:"";position:absolute;left:7.5px;top:calc(.25em + 4.5px);width:5px;height:9px;border:solid var(--mm-in);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Not financial advice */
.mm-note{background:var(--mm-surface);border-radius:20px;padding:clamp(26px,3.4vw,40px);border:1px solid var(--mm-rule);border-left:6px solid var(--mm-ink)}
body.mm .mm-note h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:12px}
.mm-note p{color:var(--mm-ink2);max-width:70ch}
body.mm .mm-note a{display:inline-block;margin-top:14px;font-weight:600;color:var(--mm-ink)}

/* Final block and the support header */
body.mm .final{background:var(--mm-surface);border:1px solid var(--mm-rule)}
body.mm .final picture{display:block}
body.mm .final img.logo.mm-icon{width:clamp(130px,15vw,200px);height:auto;animation:none;filter:none;box-shadow:var(--mm-shadow)}
body.mm .final.mm-head{grid-template-columns:auto 1fr}
@media(max-width:760px){body.mm .final.mm-head{grid-template-columns:1fr}body.mm .final.mm-head img.logo.mm-icon{width:104px}}

/* FAQ */
body.mm .faq details{border-bottom-color:var(--mm-rule)}
body.mm .faq summary::after{color:var(--mm-ink2)}
body.mm .faq p{color:var(--mm-ink2)}
body.mm .faq p+p{margin-top:10px}
body.mm .faq a{color:var(--mm-ink);text-underline-offset:3px}

/* Legal and support pages (the Bluvli layout, Hometill colours) */
.mm-crumbs{font-size:14px;color:var(--mm-ink2);margin-bottom:18px}
body.mm .mm-crumbs a{color:var(--mm-ink);text-decoration:none}
.mm-crumbs a:hover{text-decoration:underline}
body.mm .legal{max-width:780px;margin:0 auto}
body.mm .legal h1{font-size:clamp(36px,5vw,58px)}
body.mm .legal .updated{margin-top:14px;color:var(--mm-ink2);font-size:15px}
body.mm .legal .tldr{background:var(--mm-fill);border-radius:20px;padding:clamp(24px,3vw,34px);margin-top:34px}
body.mm .legal .tldr h2,body.mm .legal .toc h2{font-size:clamp(22px,2.2vw,26px);margin-bottom:14px}
body.mm .legal .toc{margin-top:34px}
body.mm .legal .toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:36px;font-size:15.5px}
body.mm .legal .toc li{margin:0 0 8px;break-inside:avoid}
body.mm .legal .toc a{color:var(--mm-ink);text-decoration:none}
body.mm .legal .toc a:hover{text-decoration:underline}
body.mm .legal section{scroll-margin-top:84px}
body.mm .legal section>h2{font-size:clamp(24px,2.5vw,30px);margin:56px 0 16px}
body.mm .legal p{margin-top:12px}
body.mm .legal ul{margin:12px 0 0;padding-left:22px}
body.mm .legal li{margin-top:8px}
body.mm .legal li ul{margin-top:4px}
body.mm .legal ul.mm-checks{padding-left:0;margin-top:0}
body.mm .legal ul.mm-checks li{margin-top:0}
body.mm .legal a{color:var(--mm-ink);text-underline-offset:3px}
@media(max-width:640px){body.mm .legal .toc ol{columns:1}}
.mm-topics{max-width:820px;margin:0 auto}
.mm-topics section{scroll-margin-top:84px}
body.mm .mm-topics h2{font-size:clamp(26px,3vw,36px);margin:64px 0 6px}
.mm-topics section:first-child h2{margin-top:0}
.mm-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 10px;max-width:820px;padding:0;list-style:none}
body.mm .mm-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid var(--mm-line);text-decoration:none;font-weight:600;font-size:14.5px}
body.mm .mm-jump a:hover{border-color:var(--mm-ink)}
.mm-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-weight:600;font-size:15px}
body.mm .mm-links a{color:var(--mm-ink)}

/* ======================================================================================================
   The game's landing (2026-11-11, v2): the gallery at night, the App Store screenshots, the features,
   the museum's rivals and every screen. Classes .mmx-*; no JavaScript beyond site.js (reveal on scroll).
   ====================================================================================================== */
body.mm{--mmx-night:#0D0F16;--mmx-gold:#D9B977;--mmx-cream:#F6EEDF}

/* Hero: the Opening Night gallery, darkened towards the words */
.mmx-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--mmx-night);color:var(--mmx-cream);min-height:min(88vh,820px);display:grid;align-items:center}
.mmx-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 42%;z-index:-2}
.mmx-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,9,14,.94) 0%,rgba(10,9,14,.8) 34%,rgba(10,9,14,.3) 62%,rgba(10,9,14,.05) 82%),
             linear-gradient(0deg,rgba(10,9,14,.7) 0%,rgba(10,9,14,0) 40%)}
.mmx-hero-body{width:100%;padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(56px,8vw,110px)}
.mmx-hero-copy{max-width:580px}
img.mmx-hero-icon{width:clamp(92px,10vw,124px);height:auto;border-radius:22.5%;box-shadow:0 26px 50px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08)}
.mmx-eyebrow{margin-top:26px;font:600 14.5px/1.35 var(--mm-text);letter-spacing:.01em;color:var(--mmx-gold)}
body.mm .mmx-hero h1{font-family:var(--mm-serif);font-weight:600;font-size:clamp(46px,6.4vw,86px);line-height:1.02;letter-spacing:-.01em;margin-top:10px;color:#FBF4E6}
.mmx-tagline{margin-top:14px;font:500 clamp(21px,2.5vw,33px)/1.25 var(--mm-serif);color:#EAD6AA}
.mmx-lead{margin-top:20px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(246,238,223,.88);max-width:44ch}
.mmx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px}
.mmx-date{white-space:nowrap;font:600 15px/1.2 var(--mm-text);padding:10px 15px;border-radius:999px;background:rgba(217,185,119,.15);color:#F4E0B4;border:1px solid rgba(217,185,119,.38)}
.mmx-meta{margin-top:18px;font-size:14.5px;color:rgba(246,238,223,.74)}

/* The App Store button, in the badge's form */
body.mm a.mm-badge{color:#fff}
.mm-badge{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:8px 20px 8px 15px;border-radius:13px;background:#000;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.4);font:600 22px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.01em;transition:transform .2s,box-shadow .2s}
.mm-badge:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(0,0,0,.7)}
.mm-badge:focus-visible{outline:3px solid var(--mmx-gold);outline-offset:3px}
.mm-badge svg.apple{width:27px;height:27px;flex:none}
.mm-badge span{display:flex;flex-direction:column;gap:3px;text-align:left}
.mm-badge small{font-size:11px;font-weight:500;letter-spacing:.01em}

@media(max-width:760px){
  .mmx-hero{min-height:0;display:block}
  .mmx-hero::before{display:none}
  .mmx-hero-art{position:relative;height:auto;aspect-ratio:16/10;object-position:55% 50%;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .mmx-hero-body{padding-top:0;margin-top:-64px;position:relative}
}

/* Section heads */
.mmx-kicker{font:600 13.5px/1.2 var(--mm-text);letter-spacing:.14em;text-transform:uppercase;color:var(--mm-accent)}
body.mm :is(.mmx-gallery,.mmx-features,.mmx-rivals,.mmx-duo) h2{font-family:var(--mm-serif);font-weight:600;font-size:clamp(32px,4.2vw,54px);line-height:1.08;letter-spacing:-.01em;margin-top:12px;max-width:22ch}
.mmx-sub{margin-top:14px;color:var(--mm-ink2);font-size:clamp(17px,1.4vw,19px);max-width:58ch}

/* The screenshots: a row that scrolls and snaps, edge to edge */
.mmx-gallery{padding-bottom:clamp(36px,5vw,72px)}
.mmx-shots{list-style:none;margin:34px 0 0;padding:6px max(24px,calc((100vw - var(--wrap)) / 2 + 24px)) 22px;display:flex;gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:max(24px,calc((100vw - var(--wrap)) / 2 + 24px));-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.mmx-shots li{flex:0 0 auto;width:clamp(210px,60vw,290px);scroll-snap-align:start}
.mmx-shots img{width:100%;height:auto;border-radius:20px;box-shadow:var(--mm-shadow)}
.mmx-shots:focus-visible{outline:2px solid var(--mm-accent);outline-offset:-2px}
@media(min-width:1880px){.mmx-shots{justify-content:center}}

/* Features */
.mmx-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mmx-card{background:var(--mm-surface);border:1px solid var(--mm-rule);border-radius:22px;padding:26px 24px 28px}
.mmx-ico{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mm-in-fill);color:var(--mm-in)}
.mmx-ico svg{width:26px;height:26px}
body.mm .mmx-card h3{font-family:var(--mm-serif);font-size:21px;font-weight:600;margin-top:16px;line-height:1.25}
.mmx-card p{margin-top:8px;color:var(--mm-ink2);font-size:16px;line-height:1.55}
@media(max-width:980px){.mmx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.mmx-grid{grid-template-columns:1fr}}

/* The rivals: the museum at night, gilded frames */
.mmx-rivals{background:#121521;color:#F3EADA;margin-top:clamp(20px,4vw,50px)}
body.mm .mmx-rivals h2{color:#FBF4E6}
.mmx-rivals .mmx-sub{color:rgba(243,234,218,.8)}
.mmx-rivals .mmx-kicker{color:var(--mmx-gold)}
.mmx-rival-list{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px)}
.mmx-rival-list figure{margin:0}
.mmx-rival-list img{width:100%;height:auto;border-radius:3px;box-shadow:0 0 0 7px #2A2416,0 0 0 9px #B8923F,0 34px 60px -24px rgba(0,0,0,.85)}
.mmx-rival-list figcaption{margin-top:26px}
.mmx-rival-list b{font-family:var(--mm-serif);font-size:21px;font-weight:600}
.mmx-ai{display:inline-block;margin-left:8px;font:700 11px/1 var(--mm-text);letter-spacing:.08em;padding:4px 7px;border-radius:6px;background:rgba(217,185,119,.18);color:#EAD09A;vertical-align:3px}
.mmx-rival-list q{display:block;margin-top:8px;color:rgba(243,234,218,.8);font-style:italic}
@media(max-width:700px){
  .mmx-rival-list{grid-template-columns:1fr;gap:26px}
  .mmx-rival-list figure{display:grid;grid-template-columns:104px 1fr;gap:22px;align-items:center}
  .mmx-rival-list figcaption{margin-top:0}
}

/* Every screen */
.mmx-duo-shot{margin-top:36px}
.mmx-duo-shot img{width:100%;height:auto;border-radius:24px;box-shadow:var(--mm-shadow)}

/* The close */
body.mm .mmx-final h2{font-family:var(--mm-serif);font-weight:600}
.mmx-final .mmx-date{background:var(--mm-fill);color:var(--mm-ink);border-color:var(--mm-rule)}
.mmx-final .mmx-cta{margin-top:24px}

/* The landing's other headings share the serif */
body.mm #privacy h2,body.mm #fair h2{font-family:var(--mm-serif);font-weight:600;letter-spacing:-.005em}