/* Medicare matching, sorting and ordering games (js/mquiz.js). Every selector carries .mq plus a class of its own, so section rules on the site
   (.cta h2, .cta p, .picks p, .qa p) cannot restyle the game. The site's colors when defined, the same values when not.
   v18 site copy (from prototypes/claude/quiz/css): hover rules only under (hover:hover), the keyboard gets the same glow, and
   with less motion nothing lifts (see the notes marked v18 below). */
.mq{--n:var(--navy,#10203A);--i:var(--ink,#1B2A41);--g:var(--gold,#B8892E);--g2:var(--gold-2,#D9B45F);--gi:var(--gold-ink,#8F671C);
--gb:var(--gold-big,#AE822B);--c:var(--cream,#FBF4E8);--s:var(--sky,#EDF3F9);--m:var(--muted,#5B6678);--l:var(--line,#E4DCCB);--hl:#FFF1BF;
--bad:#B3412E;--gw:217,180,95;--glow:0 0 0 3px rgba(var(--gw),.5),0 16px 30px -14px rgba(184,137,46,.75);
font:18px/1.5 "Nunito",system-ui,sans-serif;color:var(--i);text-align:left}
.mq [hidden],.mq .mq-won .mq-how,.mq .mq-won .mq-bar,.mq .mq-won .mq-st,.mq .mq-won .mq-board{display:none!important}
.mq *{box-sizing:border-box}
.mq .mq-nw{white-space:nowrap}
.mq .mq-card{position:relative;max-width:1000px;margin:0 auto;padding:28px 32px 32px;background:#fff;border:1px solid var(--l);border-top:5px solid var(--g);
border-radius:22px;box-shadow:0 26px 50px -34px rgba(16,32,58,.45)}
.mq .mq-end{overflow:hidden}
.mq .mq-kick{max-width:none;margin:0 0 6px;font-size:15px;line-height:1.4;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gi)}
/* v18.4 (Erick): headings in Lora bold (Fraunces curls the j and f at these sizes); the numbers in circles stay Fraunces */
.mq .mq-h,.mq .mq-dh,.mq.mq-sort .mq-bt{font-family:"Lora",Georgia,serif;font-weight:700;line-height:1.14;text-wrap:balance}
.mq .mq-h{margin:0 0 8px;font-size:36px;letter-spacing:-.01em;color:var(--n)}
.mq .mq-h em{font-weight:600;color:var(--gb)}
.mq .mq-how{max-width:62ch;margin:0 0 16px;font-size:18px;line-height:1.5;color:var(--m)}
.mq .mq-bar{display:flex;align-items:center;gap:12px;font-weight:800;font-size:16px;color:var(--n)}
.mq .mq-dots{display:flex;gap:7px}
.mq .mq-dots i{width:15px;height:15px;margin:0;border-radius:50%;border:2px solid var(--g);background:#fff;transition:.3s}
.mq .mq-dots .on{background:var(--g);box-shadow:0 0 10px rgba(var(--gw),.85)}
.mq .mq-st{max-width:none;min-height:1.55em;margin:8px 0 14px;font-weight:800;font-size:17.5px;line-height:1.5;color:var(--n)}
/* v18.4 (Erick: his mother did not see that it was a game). A game looks like a game: a bold gold "GAME · Tap to play" badge
   on top, a bigger title, and a first line that says what to tap, with an arrow down to the board. The top of the card,
   the progress dots with their count and the status line ("Pick any step to start.", "Right! That's step 1.") are
   centered; the board is not touched. */
.mq .mq-card:not(.mq-static){text-align:center}
.mq .mq-card:not(.mq-static) .mq-board,.mq .mq-card:not(.mq-static) .mq-list{text-align:left}
.mq .mq-card:not(.mq-static) .mq-h{font-size:44px}
.mq .mq-how{margin-left:auto;margin-right:auto}
.mq .mq-bar{justify-content:center;flex-wrap:wrap;row-gap:6px}
.mq .mq-play{margin:0 0 14px}
.mq .mq-pill{display:inline-flex;align-items:center;gap:9px;padding:5px 18px 5px 5px;border-radius:999px;background:#E8A317;color:var(--n);
font-weight:800;font-size:17px;line-height:1.2;box-shadow:0 0 0 3px rgba(232,163,23,.3),0 10px 20px -10px rgba(184,137,46,.95)}
.mq .mq-pill b{margin-right:-.12em;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.mq .mq-sep{font-weight:900}
.mq .mq-pi{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--n)}
.mq .mq-pi::after{content:"";position:absolute;left:12px;top:9px;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.mq .mq-go{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:10px auto 14px;padding:10px 20px 10px 12px;
font-weight:800;font-size:21px;line-height:1.3;color:var(--n);text-align:center;background:var(--hl);border:2px solid var(--g);border-radius:16px;
box-shadow:0 0 22px rgba(var(--gw),.35)}
.mq .mq-gi{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--g);color:var(--n);
animation:mqpoint 1.4s ease-in-out .6s 3}
.mq .mq-gi svg{width:22px;height:22px}
/* v18.5: when the words wrap, the lines are centered and the box hugs them (gamekit.js measures the longest line) */
.mq .mq-go>span:last-child{text-wrap:balance;text-align:center}
@keyframes mqpoint{50%{transform:translateY(4px)}}
.mq .mq-good{color:var(--gi)}
.mq .mq-bad{color:var(--bad)}
.mq .mq-board{position:relative;display:grid;gap:18px}
.mq .mq-tray{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:88px;padding:16px;background:var(--c);
border:2px dashed #E0CDA4;border-radius:18px}
.mq .mq-nudge{animation:mqnudge .5s}
.mq .mq-p,.mq .mq-b{position:relative;font:inherit;color:var(--n);-webkit-tap-highlight-color:transparent;transition:.2s}
/* manipulation: a swipe that starts on a piece still scrolls (and pinch zoom still works); a held finger lifts it (js) */
.mq .mq-p{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;padding:10px 18px;font-weight:800;
line-height:1.2;background:#fff;border:2px solid #CDBF9F;border-radius:14px;box-shadow:0 3px 0 var(--l),0 10px 18px -14px rgba(16,32,58,.5);
cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mq .mq-p small{margin-top:3px;font-size:16px;font-weight:700;color:var(--m)}
.mq .mq-sel,.mq .mq-drag{background:var(--hl);border-color:var(--g)}
.mq .mq-sel{transform:translateY(-3px);box-shadow:0 0 0 4px rgba(var(--gw),.6),0 16px 28px -12px rgba(184,137,46,.8)}
.mq .mq-p.mq-drag{z-index:40;cursor:grabbing;transition:none;box-shadow:0 0 0 3px rgba(var(--gw),.6),0 26px 40px -16px rgba(16,32,58,.6)}
.mq .mq-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mq .mq-b{display:flex;flex-direction:column;gap:10px;min-height:120px;padding:14px 16px;text-align:left;background:var(--s);border:2px dashed #9FB2C9;
border-radius:16px;cursor:default}
.mq .mq-bt{font-weight:700;line-height:1.35}
.mq .mq-bs{margin-top:-8px;font-weight:700;font-size:16px;color:var(--m)}
.mq .mq-slot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.mq .mq-dz{display:flex;align-items:center;justify-content:center;min-height:50px;padding:6px 10px;border:2px dashed rgba(16,32,58,.2);border-radius:12px;
font-weight:800;font-size:16px;line-height:1.3;text-align:center;color:var(--m)}
.mq .mq-full .mq-dz{display:none}
.mq.mq-picking .mq-b:not(.mq-full,.mq-no){cursor:pointer;border-color:var(--g);background:#FFFBF1}
.mq.mq-picking .mq-dz{border-color:var(--g2);color:var(--gi);animation:mqbreathe 1.6s infinite}
.mq .mq-b.mq-over{transform:scale(1.02);border-style:solid;background:#fff;box-shadow:var(--glow)}
.mq .mq-full{border-style:solid;border-color:var(--g);background:#fff}
.mq .mq-on{position:relative;display:flex;flex-direction:column;gap:3px;padding:10px 12px 10px 44px;background:var(--hl);border:2px solid var(--g);
border-radius:12px;box-shadow:0 0 14px rgba(var(--gw),.4);animation:mqglow 1.3s ease-out}
.mq .mq-on::before,.mq .mq-seal{border-radius:50%;background:var(--g)}
.mq .mq-on::before{content:"";position:absolute;left:10px;top:10px;width:24px;height:24px}
.mq .mq-on::after,.mq .mq-seal::after{content:"";position:absolute;left:19px;top:14px;width:6px;height:12px;border:solid var(--n);border-width:0 3px 3px 0;transform:rotate(45deg)}
.mq .mq-on b{font-size:17px;line-height:1.3}
.mq .mq-w{font-weight:600;font-size:17px;line-height:1.45}
/* hover only where there is a real pointer (a tap must not leave a piece lit); focus looks the same */
@media (hover:hover){
.mq .mq-b:hover{border-color:var(--g2);box-shadow:0 12px 26px -18px rgba(16,32,58,.5)}
.mq .mq-on:hover{box-shadow:0 0 0 3px rgba(var(--gw),.45),0 0 22px rgba(var(--gw),.6)}
.mq .mq-p:hover,.mq.mq-picking .mq-b:not(.mq-full,.mq-no):hover{transform:translateY(-3px);border:2px solid var(--g);background:#fff;box-shadow:var(--glow)}}
.mq .mq-p:focus-visible,.mq .mq-b:focus-visible{outline:3px solid var(--gi);outline-offset:3px;transform:translateY(-3px);border:2px solid var(--g);background:#fff;box-shadow:var(--glow)}
.mq .mq-sel:focus-visible,.mq .mq-drag{background:var(--hl)!important}
@media (hover:hover){.mq .mq-sel:hover{background:var(--hl)!important}}
/* the answer to a tap shows inside the tapped box (a wrong box, or a box tapped before any piece), then the box goes back to normal */
.mq .mq-b.mq-no{border-style:solid;border-color:var(--bad);background:#FDF1EE;animation:mqno .45s}
.mq .mq-b.mq-no .mq-dz,.mq .mq-b.mq-hint .mq-dz{display:flex;border-style:solid;animation:none}
.mq .mq-b.mq-no .mq-dz{border-color:var(--bad);background:#fff;color:var(--bad)}
.mq .mq-b.mq-hint .mq-dz{border-color:var(--g);background:var(--hl);color:var(--n)}
.mq.mq-sort .mq-board{grid-template-columns:1fr 1.1fr 1fr}
.mq.mq-sort .mq-boxes{display:contents}
.mq.mq-sort .mq-b{order:1;min-height:0}
.mq.mq-sort .mq-b~.mq-b{order:3}
.mq.mq-sort .mq-tray{order:2;flex-flow:column;align-items:stretch;justify-content:flex-start}
.mq.mq-sort .mq-bt,.mq.mq-sort .mq-bs{text-align:center}
.mq.mq-sort .mq-bt{font-size:22px}
.mq.mq-sort .mq-slot{justify-content:flex-start}
.mq.mq-sort .mq-dz{flex:1;min-height:70px}
.mq.mq-sort .mq-p{align-items:flex-start;padding:12px 16px;font-weight:700;font-size:17px;line-height:1.35;text-align:left}
/* the ordering game: the numbered spots stay put and the steps trade places; a step at its own number locks gold, with its fact */
.mq .mq-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mq .mq-ord{display:grid;gap:12px;width:100%;max-width:780px;margin:0 auto;padding:16px;list-style:none;background:var(--c);border:2px dashed #E0CDA4;
border-radius:18px;transition:background-color .35s,border-color .35s}
.mq .mq-row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;margin:0;padding:0;list-style:none}
.mq .mq-num{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--g);border-radius:50%;background:#fff;
font-family:"Fraunces",Georgia,serif;font-variation-settings:'opsz' 36;font-weight:700;font-size:21px;line-height:1;color:var(--n);transition:.3s}
.mq .mq-ok .mq-num{background:var(--g);box-shadow:0 0 12px rgba(var(--gw),.8)}
.mq.mq-order .mq-p{display:flex;align-items:flex-start;width:100%;min-height:58px;padding:13px 44px 13px 16px;font-weight:700;font-size:18px;line-height:1.35;text-align:left}
.mq.mq-order .mq-p::after{content:"";position:absolute;right:15px;top:50%;width:12px;height:20px;margin-top:-10px;
background:radial-gradient(circle,#B5A27A 1.8px,transparent 2.4px) 0 0/6px 6.67px}
.mq.mq-order.mq-picking .mq-p:not(.mq-in,.mq-sel,.mq-drag,.mq-over,.mq-no){cursor:pointer;border-style:dashed;border-color:var(--g2);animation:mqbreathe 1.6s infinite}
.mq.mq-order .mq-p.mq-over{transform:scale(1.02);border-style:solid;border-color:var(--g);background:#fff;box-shadow:var(--glow)}
.mq.mq-order .mq-p.mq-no{border-color:var(--bad);background:#FDF1EE}
/* a whole row answers a tap (its number too); while a step is in hand, the numbers it can go to glow like the steps */
.mq .mq-row{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mq.mq-order.mq-picking .mq-row:not(.mq-ok,.mq-from){cursor:pointer}
.mq.mq-order.mq-picking .mq-row:not(.mq-ok,.mq-from,.mq-no) .mq-num{border-color:var(--g2);animation:mqbreathe 1.6s infinite}
.mq .mq-row.mq-aim .mq-num{background:var(--hl);border-color:var(--g);box-shadow:var(--glow)}
/* a wrong number: the row shakes and says so on its border, and nothing on the page moves; it stays until the next tap */
.mq .mq-row.mq-no{z-index:2;animation:mqno .45s}
.mq .mq-row.mq-no .mq-num{border-color:var(--bad);background:#FDF1EE;color:var(--bad)}
.mq .mq-tag{position:absolute;right:12px;bottom:0;z-index:2;padding:1px 10px;border:2px solid var(--bad);border-radius:10px;background:#fff;
color:var(--bad);font-weight:800;font-size:16px;line-height:1.3;white-space:nowrap;transform:translateY(60%);pointer-events:none}
.mq.mq-order .mq-p.mq-in,.mq.mq-order .mq-p.mq-in:hover{padding-left:48px;cursor:default;transform:none;background:var(--hl);border:2px solid var(--g);
box-shadow:0 0 14px rgba(var(--gw),.4)}
.mq.mq-order .mq-p.mq-in{animation:mqglow 1.3s ease-out}
.mq.mq-order .mq-p.mq-in::before{content:"";position:absolute;left:12px;top:15px;width:24px;height:24px;border-radius:50%;background:var(--g)}
.mq.mq-order .mq-p.mq-in::after{left:21px;top:19px;right:auto;width:6px;height:12px;margin:0;background:none;border:solid var(--n);border-width:0 3px 3px 0;
transform:rotate(45deg)}
.mq.mq-order .mq-in .mq-w{margin-top:4px;color:var(--i)}
@media (hover:hover){.mq.mq-order.mq-picking .mq-p:not(.mq-in,.mq-sel,.mq-no):hover,
.mq.mq-order.mq-picking .mq-row:not(.mq-ok,.mq-from,.mq-no):hover .mq-p{border-style:solid;border-color:var(--g)}
.mq.mq-order.mq-picking .mq-row:not(.mq-ok,.mq-from,.mq-no):hover .mq-num{background:var(--hl);border-color:var(--g)}}
/* a line of advice on the finish screen, and under the no-script fallback */
.mq .mq-tip{max-width:40ch;margin:0 auto 16px;padding:12px 18px;font-weight:800;font-size:19px;line-height:1.45;color:#fff;background:#1C3050;
border:2px solid rgba(var(--gw),.7);border-radius:14px;box-shadow:0 0 22px rgba(var(--gw),.18)}
.mq .mq-static .mq-tip{max-width:64ch;margin:16px 0 0;font-size:17px;color:var(--n);background:var(--hl);border-color:var(--g);text-align:left}
.mq ol.mq-list{list-style:decimal}
.mq .mq-crumble .mq-b,.mq .mq-crumble .mq-on,.mq .mq-crumble .mq-row{animation:mqfall .9s cubic-bezier(.5,0,.85,.4) both}
.mq .mq-crumble .mq-ord{background-color:transparent;border-color:transparent}
.mq .mq-crumble .mq-tray,.mq .mq-fade{opacity:0;transition:opacity .35s}
.mq .mq-crumb{position:absolute;z-index:3;border-radius:2px;background:var(--g2);pointer-events:none;animation:mqcrumb 1.1s cubic-bezier(.4,0,.8,.5) both}
.mq .mq-crumb:nth-of-type(3n){background:var(--g)}
.mq .mq-done{margin-top:6px;padding:34px 24px 30px;text-align:center;color:#fff;background:var(--n);border-radius:18px;scroll-margin-top:12px;
box-shadow:inset 0 0 0 1px rgba(var(--gw),.35);animation:mqrise .6s ease-out both}
.mq .mq-done .mq-kick{color:var(--g2)}
.mq .mq-seal{position:relative;width:78px;height:78px;margin:0 auto 14px;box-shadow:0 0 0 7px rgba(var(--gw),.28),0 0 36px rgba(var(--gw),.75);
animation:mqpop .6s .1s cubic-bezier(.34,1.56,.64,1) both}
.mq .mq-seal::after{left:29px;top:16px;width:17px;height:33px;border-width:0 7px 7px 0}
.mq .mq-seal i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:2px;background:var(--g2);opacity:0;animation:mqspark 1s .25s ease-out both}
.mq .mq-seal i:nth-child(odd){background:#fff;width:6px;height:6px;margin:-3px}
.mq .mq-dh{max-width:24ch;margin:0 auto 12px;font-size:32px;letter-spacing:-.01em;color:#fff}
.mq .mq-dh:focus{outline:none}
.mq .mq-dp{max-width:46ch;margin:0 auto 22px;font-size:18px;line-height:1.5;color:#DCE4F0}
.mq .mq-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.mq .mq-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 22px;font:inherit;font-weight:800;line-height:1.2;
color:#fff;text-decoration:none;background:none;border:2px solid #fff;border-radius:12px;cursor:pointer;white-space:nowrap;transition:.18s}
.mq .mq-i{width:22px;height:22px;flex:none}
.mq .mq-call{background:var(--g);border-color:var(--g);color:var(--n)}
.mq .mq-again{border:2px dashed rgba(var(--gw),.7);color:var(--g2)}
.mq .mq-call .wv{opacity:.35}
/* v18 site copy: hover only where there is a real pointer; the keyboard's focus gets the same glow */
.mq .mq-btn:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(var(--gw),.35),0 14px 30px -10px rgba(184,137,46,.85)}
.mq .mq-btn:focus-visible{outline:3px solid var(--g2);outline-offset:3px}
.mq .mq-call:focus-visible{background:var(--g2);border-color:var(--g2)}
.mq .mq-call:focus-visible .wv{opacity:1;animation:mqring 1.1s infinite}
.mq .mq-call .wv+.wv{animation-delay:.15s}
.mq .mq-text:focus-visible{background:#fff;color:var(--n)}
.mq .mq-again:focus-visible{border-style:solid;color:#fff}
@media (hover:hover){
.mq .mq-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(var(--gw),.35),0 14px 30px -10px rgba(184,137,46,.85)}
.mq .mq-call:hover{background:var(--g2);border-color:var(--g2)}
.mq .mq-call:hover .wv{opacity:1;animation:mqring 1.1s infinite}
.mq .mq-text:hover{background:#fff;color:var(--n)}
.mq .mq-again:hover{border-style:solid;color:#fff}}
/* every match with its fact: the recap under the finale, and the page's fallback when the script does not run */
.mq .mq-list{max-width:64ch;margin:14px 0 0;padding:0 0 0 22px;font-size:17px;line-height:1.45;list-style:disc;text-align:left;color:var(--i)}
.mq .mq-list li{margin:0 0 10px}
.mq .mq-list ul{margin:6px 0 0;padding:0 0 0 20px;list-style:circle}
.mq .mq-list b{color:var(--n)}
.mq .mq-list .mq-w{display:block;color:var(--m)}
.mq .mq-rec{max-width:640px;margin:20px auto 0}
.mq .mq-rec summary{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px;font-weight:800;color:var(--g2);cursor:pointer;
list-style:none;border-radius:12px;text-decoration:underline;text-underline-offset:4px;transition:.18s}
.mq .mq-rec summary::-webkit-details-marker{display:none}
.mq .mq-rec summary::after{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 3px 3px 0;transform:translateY(-3px) rotate(45deg);transition:.2s}
.mq .mq-rec[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.mq .mq-rec summary:focus-visible{color:#fff;box-shadow:0 0 0 3px rgba(var(--gw),.45),0 0 22px rgba(var(--gw),.35)}
@media (hover:hover){.mq .mq-rec summary:hover{color:#fff;box-shadow:0 0 0 3px rgba(var(--gw),.45),0 0 22px rgba(var(--gw),.35)}}
.mq .mq-rec summary:focus-visible{outline:3px solid var(--g2);outline-offset:3px}
.mq .mq-done .mq-list{margin:8px auto 0;color:#DCE4F0}
.mq .mq-done .mq-list b{color:#fff}
.mq .mq-done .mq-list .mq-w{color:var(--g2)}
.mq .mq-static .mq-list{margin-top:6px}
@keyframes mqglow{0%{box-shadow:0 0 0 0 rgba(var(--gw),.95)}35%{box-shadow:0 0 0 7px rgba(var(--gw),.45),0 0 30px rgba(var(--gw),.85)}}
@keyframes mqno{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes mqnudge{30%{transform:translateY(-4px)}60%{transform:translateY(2px)}}
@keyframes mqbreathe{50%{box-shadow:0 0 0 4px rgba(var(--gw),.28)}}
@keyframes mqfall{18%{transform:translateY(-8px) rotate(calc(var(--r,0deg) * -.2))}100%{transform:translate(var(--dx,0px),170px) rotate(var(--r,0deg)) scale(.55);opacity:0}}
@keyframes mqcrumb{0%{opacity:0}10%{opacity:1}100%{transform:translate(var(--dx,0px),230px) rotate(calc(var(--r,0deg) * 4));opacity:0}}
@keyframes mqrise{from{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes mqpop{from{transform:scale(.2);opacity:0}}
@keyframes mqspark{0%{opacity:1;transform:rotate(var(--a)) translateY(-30px)}100%{opacity:0;transform:rotate(var(--a)) translateY(-86px) rotate(120deg)}}
@keyframes mqring{50%{opacity:.35}}
@keyframes mqfadein{from{opacity:0}}
/* a "stack" game (js: stack:true) deals one card at a time on tablets too: three narrow columns wrap a card to ten lines */
@media (max-width:1000px){
.mq.mq-stack .mq-board{grid-template-columns:minmax(0,1fr)}
.mq.mq-stack .mq-tray{min-height:0}
.mq.mq-stack .mq-tray .mq-p:not(:first-child){display:none}
.mq.mq-stack .mq-tray .mq-p:first-child:not(:last-child){box-shadow:0 5px 0 -1px #fff,0 6px 0 0 #CDBF9F,0 11px 0 -2px #fff,0 12px 0 -1px #DCCFB1}
.mq.mq-stack .mq-dz{min-height:52px}
}
/* phones: the sorting game deals one card at a time, between its two boxes */
@media (max-width:760px){
.mq.mq-sort .mq-board{grid-template-columns:minmax(0,1fr)}
.mq.mq-sort .mq-tray{min-height:0}
.mq.mq-sort .mq-tray .mq-p:not(:first-child){display:none}
.mq.mq-sort .mq-tray .mq-p:first-child:not(:last-child){box-shadow:0 5px 0 -1px #fff,0 6px 0 0 #CDBF9F,0 11px 0 -2px #fff,0 12px 0 -1px #DCCFB1}
.mq.mq-sort .mq-dz{min-height:52px}
}
@media (max-width:600px){
.mq .mq-card{padding:22px 16px 20px;border-radius:18px}
.mq .mq-h{font-size:28px}
.mq .mq-card:not(.mq-static) .mq-h{font-size:clamp(28px,7.7vw,32px)}
.mq .mq-pill{font-size:15.5px;gap:8px;padding-right:15px}
.mq .mq-pi{width:28px;height:28px}
.mq .mq-pi::after{left:11px;top:8px}
.mq .mq-go{gap:10px;padding:9px 14px 9px 10px;font-size:18.5px}
.mq .mq-gi{width:30px;height:30px}
.mq .mq-gi svg{width:20px;height:20px}
.mq .mq-how,.mq .mq-p{font-size:17px}
.mq .mq-boxes{grid-template-columns:minmax(0,1fr)}
.mq .mq-b{min-height:0}
.mq .mq-tray{padding:12px;gap:10px}
.mq .mq-p{padding:10px 14px}
.mq .mq-done{padding:20px 16px 22px}
.mq .mq-seal{width:56px;height:56px;margin-bottom:10px;box-shadow:0 0 0 5px rgba(var(--gw),.28),0 0 28px rgba(var(--gw),.75)}
.mq .mq-seal::after{left:20px;top:10px;width:13px;height:25px;border-width:0 5px 5px 0}
.mq .mq-dh{font-size:26px}
.mq .mq-dp{font-size:17px}
.mq .mq-cta{flex-direction:column;align-items:stretch}
.mq .mq-btn{white-space:normal}
.mq .mq-list{padding-left:18px}
.mq .mq-ord{padding:10px;gap:10px}
.mq .mq-row{grid-template-columns:34px minmax(0,1fr);gap:8px}
.mq .mq-num{width:34px;height:34px;font-size:18px}
.mq.mq-order .mq-p{padding:11px 34px 11px 12px;font-size:17px}
.mq.mq-order .mq-p::after{right:11px}
.mq.mq-order .mq-p.mq-in,.mq.mq-order .mq-p.mq-in:hover{padding-left:44px}
.mq.mq-order .mq-p.mq-in::before{left:10px;top:12px}
.mq.mq-order .mq-p.mq-in::after{left:19px;top:16px}
.mq .mq-tip{font-size:17px;padding:10px 14px}
/* a steady game's status keeps two lines of room, so the cards and steps below it never jump under a finger */
.mq.mq-steady .mq-st{min-height:3em}
}
/* very narrow (a small phone with big text): smaller numbers, no grip, so the words keep their room */
@media (max-width:360px){
.mq .mq-row{grid-template-columns:28px minmax(0,1fr);gap:6px}
.mq .mq-num{width:28px;height:28px;font-size:16px}
.mq.mq-order .mq-p{padding:10px 12px;overflow-wrap:break-word}
.mq.mq-order .mq-p:not(.mq-in)::after{display:none}
}
/* reduced motion: nothing moves; the end is a calm fade */
@media (prefers-reduced-motion:reduce){
.mq *,.mq *::before,.mq *::after{animation:none!important;transition:none!important}
.mq .mq-seal i{display:none}
.mq .mq-fade{transition:opacity .4s!important}
.mq .mq-done{animation:mqfadein .5s both!important}
/* v18 site copy: the glow stays, nothing lifts or grows (a dragged piece still follows the finger: its place is set inline) */
.mq .mq-p:hover,.mq .mq-p:focus-visible,.mq .mq-b:focus-visible,.mq .mq-sel,.mq .mq-b.mq-over,.mq.mq-order .mq-p.mq-over,
.mq.mq-picking .mq-b:not(.mq-full,.mq-no):hover,.mq .mq-btn:hover,.mq .mq-btn:focus-visible{transform:none}
}