/* ---- scope everything under .mpp so it never fights site.css ---- */
  .mpp{ --felt-1:#1B4332; --felt-2:#0E241C; --brass:#B08D57; --brass-lt:#C9A96A;
        --crimson:#B3261E; --crimson-lt:#D8736A; --ink:#14261F; --cream:#F5F0E6; --paper:#FDFBF7;
        --muted:#68766F; --rule:rgba(27,67,50,.14);
        /* Theme-driven helpers. Every surface below reads these instead of a
           literal color, so switching data-theme re-skins the game without
           touching a single layout rule. Palette stays on the house tokens
           (evergreen / brass / cream) — only the lightness shifts. */
        --board-bg:#0E241C; --track:rgba(27,67,50,.12);
        --scene-1:#1B4332; --scene-2:#123524; --scene-3:#0E241C;
        --accent-ink:#1B4332; --heading:#1B4332; --on-fx:#1B4332; --on-brass:#FFFFFF;
        --paper-hi:#FFFFFF; --on-dark:#D9D2C2; --fx-shadow:rgba(255,255,255,.6);
        --page-bg:transparent; --page-fs:linear-gradient(180deg,#F5F0E6,#ECE3CF);
        --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
        --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
        color:var(--ink); background:var(--page-bg);
        max-width:1080px; margin:0 auto; padding:4px 2px; position:relative; }
  /* Dusk — warmer, lower glare than Day. Same three brand hues, stepped down. */
  .mpp[data-theme="dusk"]{ --felt-1:#14342B; --felt-2:#0E2A1E; --brass:#A2814C; --brass-lt:#C0A268;
        --ink:#14261F; --cream:#EDE5D6; --paper:#F7F2E7; --muted:#5E6B61; --rule:rgba(20,52,43,.16);
        --board-bg:#10291F; --track:rgba(20,52,43,.16);
        --scene-1:#14342B; --scene-2:#10291F; --scene-3:#0E2A1E;
        --accent-ink:#14342B; --heading:#14342B; --on-fx:#14342B; --on-brass:#FFFFFF;
        --paper-hi:#FFFDF6; --page-bg:rgba(237,229,214,.55);
        --page-fs:linear-gradient(180deg,#EDE5D6,#DED2B9); }
  /* Maps to the site's own "hc" reading theme: deeper green, darker brass and
     near-black ink so every shard edge reads hard. */
  .mpp[data-theme="contrast"]{ --felt-1:#0E2A1E; --felt-2:#06130D; --brass:#8B6F45; --brass-lt:#D4B483;
        --crimson:#8E1C15; --crimson-lt:#C24A3F; --ink:#14261F; --cream:#F7F2E1; --paper:#FFFDF8;
        --muted:#3E5248; --rule:rgba(20,38,31,.30);
        --board-bg:#06130D; --track:rgba(20,38,31,.28);
        --scene-1:#0E2A1E; --scene-2:#0A2016; --scene-3:#06130D;
        --accent-ink:#0E2A1E; --heading:#0E2A1E; --on-fx:#0E2A1E; --on-brass:#FFFFFF;
        --paper-hi:#FFFFFF; --page-bg:transparent; --page-fs:linear-gradient(180deg,#F7F2E1,#E8E0C8); }
  /* Night is a separate switch: it sits on top of whichever reading theme the
     site is using, so it can dim the table without fighting the Aa panel. */
  .mpp[data-night="1"]{ --felt-1:#0E2A1E; --felt-2:#08160F; --brass:#B08D57; --brass-lt:#C9A96A;
        --crimson:#E8837A; --crimson-lt:#E8837A; --ink:#E8E2D4; --cream:#1A2A22; --paper:#16241D;
        --muted:#A9B5AC; --rule:rgba(232,226,212,.16);
        --board-bg:#0B1F17; --track:rgba(232,226,212,.18);
        --scene-1:#10291F; --scene-2:#0C2018; --scene-3:#08160F;
        --accent-ink:#D9D2C2; --heading:#E8E2D4; --on-fx:#D9D2C2; --on-brass:#14261F;
        --paper-hi:#22332A; --fx-shadow:rgba(0,0,0,.45); --page-bg:#0B1913;
        --page-fs:linear-gradient(180deg,#0B1913,#07110C); }
  .mpp[data-theme="contrast"], .mpp[data-theme="dusk"],
  .mpp[data-night="1"]{border-radius:18px}
  .mpp *{box-sizing:border-box}
  .mpp .mp-eyebrow{font:600 11px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--brass)}

  /* HUD */
  .mp-hud{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    background:var(--cream); border:1px solid var(--rule); border-radius:16px;
    padding:14px 18px; box-shadow:var(--shadow-sm)}
  .mp-level{display:flex; align-items:baseline; gap:8px}
  .mp-level .mp-no{font:700 26px/1 var(--serif); color:var(--accent-ink)}
  .mp-level .mp-slash{font:600 16px/1 var(--serif); color:var(--brass)}
  .mp-level .mp-name{font:600 15px/1 var(--sans); color:var(--ink); margin-left:4px}
  .mp-timer{display:flex; align-items:center; gap:10px}
  .mp-timer-num{font:700 24px/1 var(--serif); color:var(--accent-ink); font-variant-numeric:tabular-nums}
  .mp-timer-num.warn{color:var(--crimson)}
  .mp-timer-num .mp-unit{font-size:13px; color:var(--brass); margin-left:2px}
  .mp-timerbar{width:120px; height:8px; border-radius:99px; background:var(--track); overflow:hidden}
  .mp-timerfill{height:100%; width:100%; background:linear-gradient(90deg,var(--brass),var(--brass-lt)); transition:width 1s linear}
  .mp-timerfill.warn{background:linear-gradient(90deg,var(--crimson),var(--crimson-lt))}
  .mp-pieces{display:flex; align-items:baseline; gap:6px; margin-left:auto}
  .mp-pieces b{font:700 22px/1 var(--serif); color:var(--accent-ink)}
  .mp-score{display:flex; align-items:baseline; gap:6px}
  .mp-score b{font:700 22px/1 var(--serif); color:var(--brass)}
  .mp-hint{font:600 13px/1 var(--sans); color:var(--accent-ink); background:var(--paper);
    border:1px solid var(--rule); border-radius:99px; padding:9px 15px; cursor:pointer; transition:.15s}
  .mp-hint:hover{background:var(--cream); border-color:var(--brass)}
  .mp-hint:disabled{opacity:.4; cursor:default}
  .mp-menu{font:600 13px/1 var(--sans); color:var(--accent-ink); background:var(--paper);
    border:1px solid var(--rule); border-radius:99px; padding:9px 15px; cursor:pointer; transition:.15s}
  .mp-menu:hover{background:var(--cream); border-color:var(--brass)}
  .mpp .mp-fs-btn{font:600 13px/1 var(--sans); color:var(--accent-ink); background:var(--paper);
    border:1px solid var(--rule); border-radius:99px; padding:9px 16px; cursor:pointer; transition:.15s}
  .mpp .mp-fs-btn:hover{background:var(--cream); border-color:var(--brass)}
  /* Sound toggle — same tokens as the other HUD buttons so the bar stays one family */
  .mpp .mp-mute{font:600 13px/1 var(--sans); color:var(--accent-ink); background:var(--paper);
    border:1px solid var(--rule); border-radius:99px; padding:9px 15px; cursor:pointer; transition:.15s}
  .mpp .mp-mute:hover{background:var(--cream); border-color:var(--brass)}
  .mpp .mp-mute.muted{opacity:.55}
  /* Table light switch — cycles Day / Dusk / Night. Same pill as its neighbors
     so the HUD keeps reading as one family of controls. */
  /* Night takes the whole page down with it. The hero and footer are already
     evergreen, so only the paper gutters and the masthead need dimming —
     overriding --paper-rgb does the latter without touching site.css. */
  body.mp-night{background:#0B1913; --paper-rgb:11,25,19}
  /* Above the result overlay (z-index 130) so the light is always reachable —
     including while a level-cleared card is covering the screen. */
  .mp-lightbar{display:flex; justify-content:flex-end; margin:0 0 14px; position:relative; z-index:140}
  .mpp .mp-theme{font:600 13px/1 var(--sans); color:var(--accent-ink); background:var(--paper);
    border:1px solid var(--rule); border-radius:99px; padding:9px 15px; cursor:pointer; transition:.15s;
    display:inline-flex; align-items:center; gap:7px}
  .mpp .mp-theme:hover{background:var(--cream); border-color:var(--brass)}
  .mpp .mp-theme .mp-thdot{width:11px; height:11px; border-radius:50%; flex:none;
    border:1px solid var(--rule); background:var(--thdot,var(--brass))}

  /* Level picker: every level is open, so picking one always responds */
  .mp-levelgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
  .mp-lvbtn{position:relative; font:700 15px/1 var(--sans); color:var(--ink); background:var(--cream);
    border:1.5px solid var(--rule); border-radius:12px; padding:12px 0 14px; cursor:pointer; transition:.16s}
  .mp-lvbtn:hover{border-color:var(--brass); background:var(--paper-hi)}
  .mp-lvbtn.on{background:var(--felt-1); color:#fff; border-color:var(--felt-1);
    box-shadow:0 6px 16px rgba(27,67,50,.3)}
  .mp-lvbtn .mp-lvbest{display:block; font:600 9px/1 var(--sans); letter-spacing:.06em;
    text-transform:uppercase; color:var(--brass); margin-top:5px; opacity:.9}
  .mp-lvbtn.on .mp-lvbest{color:var(--brass-lt)}
  .mp-lvbtn .mp-lvbest.empty{opacity:.35}
  @media (max-width:520px){ .mp-levelgrid{grid-template-columns:repeat(4,1fr)} }

  /* Seats */
  .mp-seats{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
  .mp-seat{flex:1; min-width:110px; background:var(--paper); border:1px solid var(--rule);
    border-left:5px solid var(--seat); border-radius:13px; padding:11px 14px; transition:.22s; position:relative}
  .mp-seat.active{border-color:var(--brass); background:var(--cream);
    box-shadow:0 0 0 2px rgba(176,141,87,.35), var(--shadow-md); transform:translateY(-3px)}
  .mp-seat .mp-seatname{font:600 13px/1.2 var(--sans); color:var(--ink); display:flex; align-items:center; gap:7px}
  .mp-seat .mp-dot{width:10px; height:10px; border-radius:50%; background:var(--seat); flex:none}
  .mp-seat .mp-seatval{font:700 26px/1 var(--serif); color:var(--accent-ink); font-variant-numeric:tabular-nums; margin-top:5px}
  .mp-seat .mp-turn{position:absolute; top:10px; right:12px; font:700 10px/1 var(--sans);
    letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--seat); padding:4px 8px; border-radius:99px; opacity:0; transition:.2s}
  .mp-seat.active .mp-turn{opacity:1}

  /* Play surface */
  .mp-surface{position:relative; width:100%; height:560px; margin-top:16px;
    border-radius:18px; overflow:hidden; touch-action:none;
    border:3px solid var(--brass); box-shadow:0 14px 34px rgba(14,36,28,.30), inset 0 0 60px rgba(0,0,0,.35);
    background:var(--felt-2)}
  body.mp-fs .mp-surface{flex:1 1 auto; min-height:0; height:auto; margin-top:10px}
  #mpPlay{position:relative}

  /* Board (target frame, centered in surface) */
  .mp-board{position:absolute; border-radius:10px; overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(176,141,87,.55);
    background-color:var(--board-bg);
    background-image:linear-gradient(to right, rgba(176,141,87,.16) 1px, transparent 1px),
                     linear-gradient(to bottom, rgba(176,141,87,.16) 1px, transparent 1px)}
  /* Pieces */
  .mp-piece{position:absolute; overflow:hidden; cursor:grab; touch-action:none;
    border-radius:4px; box-shadow:0 3px 8px rgba(0,0,0,.32);
    /* Isolate each shard: moving one must not invalidate the layout of the
       whole 20-piece board. (overflow:hidden already clips, so paint is safe.) */
    contain:layout style;
    transition:left .26s ease, top .26s ease, box-shadow .2s, transform .2s;
    will-change:left, top, transform}
  .mp-piece::after{content:""; position:absolute; inset:0; border-radius:4px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); pointer-events:none}
  .mp-piece.mp-dragging{transition:none; cursor:grabbing; z-index:60;
    box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 0 2px var(--brass-lt)}
  .mp-piece.mp-snap-near{box-shadow:0 0 0 3px var(--brass-lt), 0 8px 20px rgba(0,0,0,.4)}
  .mp-piece.mp-placed{cursor:default; box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 0 0 2px rgba(70,180,110,.9);
    transition:box-shadow .25s}
  .mp-piece.mp-placed::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
  .mp-piece.mp-wrong{animation:mpShake .3s ease}
  @keyframes mpShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

  /* The full scene, reused inside every piece (sliced via offset) */
  .mp-scene{position:absolute; overflow:hidden}
  .mp-scene .mp-bg{position:absolute; inset:0;
    background:radial-gradient(circle at 50% 36%, var(--scene-1), var(--scene-2) 62%, var(--scene-3));
    box-shadow:inset 0 0 0 3px var(--brass), inset 0 0 0 9px rgba(176,141,87,.28), inset 0 0 70px rgba(0,0,0,.45)}
  .mp-scene .mp-motif{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:34%; height:34%; opacity:.5; pointer-events:none}
  .mp-scene .mp-obj{position:absolute; pointer-events:none}
  .mp-scene .tl{width:100%; height:100%; margin:0; display:block}
  .mp-scene .tl:hover{transform:none}

  /* Hint overlay shows the full picture faintly over the board */
  .mp-hintlayer{position:absolute; inset:0; z-index:80; pointer-events:none; opacity:0;
    transition:opacity .25s; border-radius:10px; overflow:hidden}
  .mp-hintlayer.on{opacity:.62}
  .mp-hintlayer .mp-scene{width:100%; height:100%; left:0; top:0}
  /* Hint: a brass ring marking exactly where one loose shard belongs. The
     picture alone tells you what it looks like, not where it goes. */
  .mp-hintcell{position:absolute; border-radius:4px; pointer-events:none; z-index:5;
    background:rgba(176,141,87,.20); box-shadow:inset 0 0 0 3px var(--brass-lt);
    animation:mpHintPulse 1.1s ease-in-out infinite}
  @keyframes mpHintPulse{0%,100%{opacity:.45} 50%{opacity:1}}

  /* Handoff / wait mask (multiplayer turn handover) */
  .mp-handoff{position:absolute; inset:0; z-index:120; display:none; flex-direction:column;
    align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center;
    background:rgba(8,18,13,.86); backdrop-filter:blur(6px); color:var(--cream)}
  .mp-handoff.show{display:flex}
  .mp-handoff .mp-ho-seal{width:84px; height:84px; border-radius:50%; border:3px double var(--brass);
    display:flex; align-items:center; justify-content:center; font-size:34px; color:var(--brass);
    background:radial-gradient(circle,rgba(176,141,87,.16),transparent 72%)}
  .mp-handoff h2{font:700 30px/1.05 var(--serif); color:var(--on-dark); margin:0}
  .mp-handoff p{font:400 14px/1.6 var(--sans); color:var(--on-dark); margin:0; max-width:34ch}
  .mp-handoff .mp-cta{margin-top:6px}

  /* Setup / overlays (reuse .sd-* card look, themed) */
  .mp-setup:not([hidden]){display:flex; justify-content:center; padding:6px 0 0}
  .mp-setup .mp-card{max-width:470px}
  .mp-overlay{position:fixed; inset:0; z-index:130; display:none; align-items:center; justify-content:center;
    padding:22px; background:rgba(8,18,13,.74); backdrop-filter:blur(7px)}
  .mp-overlay.show{display:flex; animation:mpFade .22s ease}
  @keyframes mpFade{from{opacity:0}to{opacity:1}}
  .mp-card{width:100%; max-width:450px; background:var(--paper); border:1px solid var(--brass);
    border-radius:22px; padding:30px 28px; text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.5);
    animation:mpPopIn .3s cubic-bezier(.2,1.3,.5,1)}
  @keyframes mpPopIn{from{transform:scale(.9); opacity:0}to{transform:scale(1); opacity:1}}
  .mp-card h2{font:700 30px/1.05 var(--serif); color:var(--heading); margin:0 0 6px}
  .mp-card .mp-sub{font:400 14px/1.6 var(--sans); color:var(--muted); margin:0 auto 18px; max-width:36ch}
  .mp-best{color:var(--brass); font-weight:700; letter-spacing:.04em}
  .mp-card .mp-sub b{color:var(--ink); font-weight:600}
  .mp-seal{width:92px; height:92px; margin:0 auto 14px; border-radius:50%;
    border:3px double var(--brass); display:flex; align-items:center; justify-content:center;
    color:var(--brass); font:700 13px/1 var(--serif); letter-spacing:.18em; text-transform:uppercase;
    background:radial-gradient(circle,rgba(176,141,87,.10),transparent 70%); transform:rotate(-8deg)}
  .mpp .mp-seal .mp-tilemark, .mpp .mp-ho-seal .mp-tilemark{display:block; width:34px; height:47px}
  .mp-seg{display:flex; gap:8px; justify-content:center; margin:6px 0 4px}
  .mp-seg button{font:700 15px/1 var(--sans); padding:13px 0; flex:1; max-width:78px; cursor:pointer;
    background:var(--cream); color:var(--ink); border:1.5px solid var(--rule); border-radius:12px; transition:.16s}
  .mp-seg button:hover{background:var(--paper-hi)}
  .mp-seg button.on{background:var(--felt-1); color:#fff; border-color:var(--accent-ink); box-shadow:0 6px 16px rgba(27,67,50,.3)}
  .mp-field{text-align:left; margin:14px 0}
  .mp-field label{display:block; font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:7px}
  .mp-seatrow{display:flex; align-items:center; gap:10px; margin-bottom:9px}
  .mp-seatrow .mp-swatch{width:14px; height:14px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(0,0,0,.06)}
  .mp-seatrow input{flex:0 1 200px; min-width:0; font:500 13px/1 var(--sans); color:var(--ink); padding:7px 11px;
    border:1px solid var(--rule); border-radius:9px; background:var(--paper)}
  .mp-seatrow input:focus{outline:2px solid var(--brass); outline-offset:1px}
  .mp-levelsel{display:flex; align-items:center; gap:10px}
  .mp-levelsel select{flex:1; font:500 13px/1 var(--sans); color:var(--ink); padding:9px 11px;
    border:1px solid var(--rule); border-radius:9px; background:var(--paper)}
  .mp-cta{width:100%; margin-top:16px; font:700 16px/1 var(--sans); letter-spacing:.04em; color:var(--on-brass);
    background:linear-gradient(180deg,var(--brass-lt),var(--brass)); border:none; border-radius:13px;
    padding:15px; cursor:pointer; box-shadow:0 8px 22px rgba(176,141,87,.4); transition:.16s}
  .mp-cta:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(176,141,87,.5)}
  .mp-ghost{margin-top:10px; font:600 13px/1 var(--sans); color:var(--accent-ink); background:transparent;
    border:1px solid var(--rule); border-radius:11px; padding:11px; width:100%; cursor:pointer; transition:.15s}
  .mp-ghost:hover{background:var(--cream)}
  .mp-note{font:400 11.5px/1.5 var(--sans); color:var(--muted); margin-top:12px; text-align:left}
  .mp-ranklist{margin:6px 0 4px; display:flex; flex-direction:column; gap:9px}
  .mp-rankrow{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
    background:var(--cream); border:1px solid var(--rule); font:500 14px/1 var(--sans)}
  .mp-rankrow .mp-medal{font:700 18px/1 var(--serif); color:var(--brass); width:30px; text-align:center}
  .mp-rankrow .mp-rname{font-weight:600; color:var(--ink)}
  .mp-rankrow .mp-rscore{margin-left:auto; font:700 20px/1 var(--serif); color:var(--accent-ink); font-variant-numeric:tabular-nums}
  .mp-stats{font:400 13px/1.7 var(--sans); color:var(--muted); margin:8px 0 2px}
  .mp-stats b{color:var(--ink); font-weight:600}
  .mp-tier{font:700 20px/1 var(--serif); color:var(--crimson); margin:4px 0 2px}

  @media (max-width:880px){
    .mp-timer{margin-left:0; width:100%; justify-content:space-between}
    .mp-timerbar{flex:1; max-width:none; margin-left:10px}
    .mp-pieces{margin-left:0}
  }

  /* Fullscreen (mobile / tablet / desktop): native API + iOS CSS fallback */
  body.mp-fs{overflow:hidden}
  body.mp-fs .mpp{position:fixed; inset:0; z-index:200; max-width:none; width:100%;
    height:100%; margin:0; padding:0; background:var(--page-fs);
    display:flex; flex-direction:column}
  body.mp-fs #mpPlay:not([hidden]){display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
    padding:12px; gap:10px}
  body.mp-fs #mpSetup:not([hidden]){display:flex; align-items:center; justify-content:center;
    flex:1 1 auto; min-height:0; overflow:auto; padding:16px}
  body.mp-fs .mp-lightbar{flex:0 0 auto; margin:10px 14px 0}
  body.mp-fs .mp-hud{flex:0 0 auto; border-radius:14px; padding:11px 14px; gap:12px}
  body.mp-fs .mp-seats{flex:0 0 auto; margin-top:10px}
  body.mp-fs .mp-board{box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 0 0 2px rgba(176,141,87,.6)}

  /* celebration FX layer (confetti, cleared banner) */
  .mpp .mp-fx{position:absolute; inset:0; z-index:150; pointer-events:none; overflow:hidden}
  .mpp .mp-confetti{position:absolute; top:-4%; opacity:0; will-change:transform,opacity;
    animation-name:mpFall; animation-timing-function:cubic-bezier(.3,.1,.7,1); animation-fill-mode:forwards}
  @keyframes mpFall{
    0%{opacity:0; transform:translate(0,0) rotate(0deg)}
    10%{opacity:1}
    100%{opacity:.85; transform:translate(var(--dx,0), var(--fall,640px)) rotate(var(--rot,360deg))}
  }
  .mpp .mp-clear-banner{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:9px; z-index:2;
    animation:mpClearPop .5s cubic-bezier(.2,1.4,.4,1) both}
  .mpp .mp-clear-banner .mp-clear-seal{width:88px; height:88px; border-radius:50%;
    border:3px double var(--brass); background:radial-gradient(circle,rgba(176,141,87,.18),transparent 72%);
    color:var(--brass); display:flex; align-items:center; justify-content:center;
    font-size:42px; font-weight:700; animation:mpSealPulse 1.1s ease-out infinite}
  .mpp .mp-clear-banner .mp-clear-text{font:700 23px/1 var(--serif); color:var(--on-fx);
    letter-spacing:.04em; text-shadow:0 2px 10px var(--fx-shadow)}
  .mpp .mp-clear-banner .mp-clear-sub{font:600 13px/1 var(--sans); color:var(--crimson); letter-spacing:.06em}
  @keyframes mpClearPop{0%{opacity:0; transform:translate(-50%,-50%) scale(.6)} 100%{opacity:1; transform:translate(-50%,-50%) scale(1)}}
  @keyframes mpSealPulse{0%{box-shadow:0 0 0 0 rgba(176,141,87,.5)} 70%{box-shadow:0 0 0 22px rgba(176,141,87,0)} 100%{box-shadow:0 0 0 0 rgba(176,141,87,0)}}

  @media (prefers-reduced-motion:reduce){
    .mp-timerfill,.mp-piece,.mp-card,.mp-overlay,.mp-clear-banner,.mp-confetti{transition:none !important; animation:none !important}
    .mpp .mp-confetti{display:none}
  }

  /* Help overlay — sibling of .mj-stage (NOT a child), so the shell's
     ".mj-stage > *" centering rule cannot shrink this fixed, full-viewport
     layer on desktop. position:fixed + inset:0 satisfies the gate's
     help-does-not-open / help-does-not-close-on-escape checks. */
  .mp-modal{ position:fixed; inset:0; z-index:160; display:flex; align-items:center;
    justify-content:center; padding:22px; background:rgba(8,18,13,.74);
    backdrop-filter:blur(7px); }
  .mp-modal[hidden]{ display:none; }
  .mp-modal-card{ position:relative; width:min(560px,92vw); max-height:88vh; overflow:auto;
    text-align:left; background:var(--paper,#FDFBF7); border:1px solid var(--brass,#B08D57);
    border-radius:22px; padding:30px 28px; box-shadow:0 24px 64px rgba(0,0,0,.5); }
  .mp-modal-card h2{ font:700 28px/1.05 var(--serif,Georgia,serif); color:#14342B; margin:0 0 10px; }
  .mp-modal-card h3{ font:700 15px/1.2 var(--sans,Inter,sans-serif); color:#14342B; margin:18px 0 6px; }
  .mp-modal-card p{ font:400 14px/1.65 var(--sans,Inter,sans-serif); color:#3a4a42; margin:0 0 10px; }
  .mp-modal-card ul{ margin:0 0 10px; padding-left:20px; }
  .mp-modal-card li{ font:400 14px/1.65 var(--sans,Inter,sans-serif); color:#3a4a42; margin:5px 0; }
  .mp-modal-card b{ color:#1B4332; font-weight:700; }
  .mp-modal-x{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:none;
    cursor:pointer; background:transparent; color:#1B4332; font-size:24px; line-height:1; border-radius:8px; }
  .mp-modal-x:hover{ background:rgba(27,67,50,.08); }