/* Monsters Exam Quest kit: tokens, fonts, the app shell and every shared part.
   Rich mode (navy and gold) for Home, set-up, collecting, rewards and Grown-ups. Task mode (warm paper, a cream sheet and navy) for questions.
   Figtree for the interface, Fraunces for headings and big numbers, Andika for reading. Screen stylesheets build on these parts. */

/* Two variable files replace six static ones, and weigh less than half as much. */
@font-face{font-family:'Figtree';src:url(fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-latin-wght-normal.woff2) format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Andika';src:url(fonts/andika-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Andika';src:url(fonts/andika-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Pinyin tone marks (ǎ ǐ ǔ ǚ and friends) live in the latin-ext subset. */
@font-face{font-family:'Andika';src:url(fonts/andika-latin-ext-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Andika';src:url(fonts/andika-latin-ext-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
/* Fonts. Chinese has its own system fallback: Andika has no Chinese glyphs. */
--zh:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC','Source Han Sans SC';
--fD:'Figtree',var(--zh),system-ui,sans-serif;--fH:'Fraunces',Georgia,'Times New Roman',serif;--fN:'Fraunces',Georgia,serif;--fR:'Andika',var(--zh),'Trebuchet MS',system-ui,sans-serif;
/* Rich shell */
--navy:#0b1236;--navy2:#1b2a6b;--navy3:#131c48;--navyLine:rgba(246,220,149,.28);--gold:#e8c46a;--gold2:#f6dc95;--goldDeep:#c9a35c;--onDark:#fff;--onDark2:#d3d8ee;
/* Light surfaces: ivory panels in the rich shell, sage and white in task mode */
--ivory:#fffaf0;--ivory2:#f4ecdc;--sage:#eef4ef;--sage2:#dfe9e1;--white:#fff;--ink:#0b1236;--ink2:#465074;--hair:#cfd6e0;--hair2:#e4e9ef;--sel:#e7ebf8;
/* Meaning: always with words or an icon, never colour alone */
--ok:#1f6b2c;--okTint:#e2f2e3;--okLine:#3f8f4c;--ans:#4a36a8;--ansTint:#eeeaff;--later:#7a5200;--laterTint:#fff3d3;--laterLine:#c99a2e;--err:#a32630;--errTint:#fde9ea;
/* Space, shape and size */
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:40px;--s8:48px;--s9:64px;
--rC:22px;--rK:12px;--rF:12px;--tap:48px;--tapChild:56px;--maxw:1360px;--gut:clamp(16px,3vw,40px);
--shadow:0 18px 40px -22px rgba(3,6,20,.75);--shadowLight:0 10px 30px -18px rgba(11,18,54,.35);
--headerH:84px;--tabbarH:64px;
/* Control finish (the approved control study): warm gold for adventure actions, a deep navy for learning and grown-up screens */
--rBtn:999px;--rField:12px;--ctlSpeed:130ms;
--goldHi:#ffe9ad;--goldMid:#f8da8a;--goldBody:#f1cc70;--goldLow:#e9ba5f;--goldEdge:#e6bf66;
--navyHi:#263b73;--navyLow:#172652;--navyEdge:#142047;--fieldLine:#b5c2cc;--fieldFocus:#29487b;--chipOn:#f7dea0;--chipOnLine:#dfbd6e;--choiceOn:#edf2fa;--choiceLine:#c4cfd4;
--ctlShadow:0 2px 3px #05112c19,0 7px 16px -10px #05112c70;
/* Task mode is warm paper with a cream sheet (the question boards). Gaps and boxes wait in the paper's cream until she fills them. */
--paperHi:#efe9db;--paper:#e6dfcf;--paperLow:#dcd3c0;--sheet:#fffcf5;--pInk:#14182b;--pInk2:#6b6355;--pInk3:#5e5546;--pRule:#ebe3d2;--pLine:#e0d6c2;
--gap:#fff6e2;--gapLine:#dcc79a;--gapInk:#9a7f3e;--armed:#fff1d4;--armedLine:#c4a96a;--sheetShadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 50px -28px rgba(20,24,43,.55),0 2px 4px rgba(20,24,43,.07);
color-scheme:dark}

/* Page. Rich mode is the default; task mode turns the page to warm paper. */
body.mq{margin:0;min-height:100vh;min-height:100dvh;background:var(--navy);color:var(--onDark);font:500 17px/1.5 var(--fD);-webkit-font-smoothing:antialiased;text-size-adjust:100%;-webkit-text-size-adjust:100%}
:where(body.mq) *{font-synthesis:none;box-sizing:border-box}
:where(body.mq) button{cursor:pointer;font:inherit;color:inherit}
:where(body.mq) img{max-width:100%}
/* Icons are 24px unless a part sizes them; the low specificity lets every part set its own size. */
:where(.ui-icon){width:24px;height:24px;flex:none}
:where(body.mq) :is(input,select,textarea){font:inherit;color:inherit}
:where(body.mq) :is(button,a,input,select,summary){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:where(body.mq) a{color:inherit;text-underline-offset:4px}
:where(body.mq) :is(h1,h2,h3,h4,p){margin-top:0}
:where(body.mq) :lang(zh){font-family:var(--zh),var(--fR)}
[hidden]{display:none!important}
.skip-link{position:absolute;left:16px;top:-100px;z-index:60;padding:14px 18px;border-radius:var(--rK);background:var(--gold);color:var(--ink);font-weight:700}
.skip-link:focus{top:8px}
body.mq :focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
body.mq .on-light :focus-visible,body.mq .mq-sheet :focus-visible,body.mq .mq-card-white :focus-visible,body[data-mode="task"] :focus-visible{outline-color:#254a83}
body.mq main:focus,body.mq [tabindex="-1"]:focus:not(:focus-visible){outline:0}
/* A heading that takes focus so it is read out is not a control: no ring, even after a key press. */
body.mq :is(h1,h2)[tabindex="-1"]:focus-visible{outline:0}

/* Painted scene behind rich screens, chosen by body[data-world]. The study is a real image layer (#mq-world, MQ_UI.world) so
   it can pick a file by size and screen density; navy shows while it decodes. Home and My monsters draw their habitat in the page. */
body.mq::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--navy) var(--scene,none) center 40%/cover no-repeat}
body.mq::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,10,30,.55) 0%,rgba(6,10,30,.15) 30%,rgba(6,10,30,.25) 65%,rgba(6,10,30,.85) 100%)}
body[data-world="book"]{--scene:radial-gradient(ellipse 90% 70% at 50% 30%,#1d2766 0%,#0d1438 50%,#050817 100%)}
body[data-world="none"]{--scene:none}
body[data-mode="task"]{background:radial-gradient(ellipse 120% 80% at 50% 0%,var(--paperHi) 0%,var(--paper) 46%,var(--paperLow) 100%) fixed var(--paperLow);color:var(--pInk);color-scheme:light}
body[data-mode="task"]::before,body[data-mode="task"]::after{display:none}
/* Grown-ups is a control room, not a form. Same navy as the child's world, with
   hairlines instead of white cards. The screens are token-driven, so this flips them. */
body[data-mode="parent"]{--white:#0e1430;--ink:#fffaf0;--ink2:#8e9bd0;--hair:#a9b4dc33;--hair2:#a9b4dc24;--sel:#a9b4dc26;--sage:#080c22;--sage2:#0e1430;background:#080c22;color-scheme:dark}
/* A light panel on the grown-up side keeps the light surface's own colours: the flip above is for the page, not the panels in it.
   (Without this the panels were ivory with ivory text.) */
body[data-mode="parent"] .mq-sheet{--white:#fff;--ink:#0b1236;--ink2:#465074;--hair:#cfd6e0;--hair2:#e4e9ef;--sel:#e7ebf8;--sage:#eef4ef;--sage2:#dfe9e1;color:var(--ink);color-scheme:light}
#mq-world{position:fixed;inset:0;z-index:-2;pointer-events:none}
#mq-world .ui-scene-img{object-position:center 40%}
body[data-mode="task"] #mq-world{display:none}

/* The page container */
body.mq #app{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--s4) var(--gut) var(--s7)}
body[data-mode="task"] #app{padding-top:0}

/* ---- App header (Navigation and Home boards): logo, four destinations, the star count, the padlock and the buddy, in that
   order. No fill: it sits on the scene. Under 1024px the destinations become a bottom bar and the logo drops. */
.app-header{position:relative;z-index:20;background:linear-gradient(180deg,rgba(5,8,23,.6),rgba(5,8,23,0))}
.app-header-in{max-width:1216px;margin:0 auto;min-height:var(--headerH);padding:18px clamp(20px,3.5vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:20px}
/* the logo is the way Home (header A, Jon 26 Oct) */
.app-logo-link{display:block;flex:0 0 auto;border-radius:8px}
.app-logo-link:focus-visible{outline:3px solid #ffd65c;outline-offset:4px}
.app-logo{display:block;flex:0 0 auto;width:164px;height:auto}
.app-nav{flex:999 1 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.app-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border-bottom:2px solid transparent;color:#c9d2ee;font:600 18px/1.2 var(--fD);text-decoration:none;white-space:nowrap}
.app-nav a:hover{color:#fff}
.app-nav a[aria-current="page"]{color:var(--ivory);font-weight:700;border-bottom-color:var(--gold)}
.app-stars{display:inline-flex;align-items:center;gap:8px;min-height:54px;margin:0;padding:5px 16px 5px 12px;border-radius:999px;background:rgba(5,8,23,.6);box-shadow:inset 0 0 0 1px rgba(246,220,149,.4);color:var(--ivory)}
.app-stars svg{width:21px;height:21px;color:var(--gold)}
.app-stars .ui-icon{fill:currentColor}
.app-stars b{font:800 25px/1 var(--fN)}
/* The stars are a button (Pack doors, fix 2). No pack waiting: a tap drops the star path under them. A pack waiting: they turn
   gold, the pack peeks out and a tap opens it. Two or more: a small number. */
button.app-stars{position:relative;border:0;font:inherit;cursor:pointer}
button.app-stars:not(.is-pack):hover{box-shadow:inset 0 0 0 1px rgba(246,220,149,.8)}
button.app-stars[aria-expanded="true"]{box-shadow:inset 0 0 0 1px rgba(246,220,149,.8),0 0 0 3px rgba(255,233,173,.85)}
button.app-stars:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.app-stars.is-pack{background:linear-gradient(180deg,var(--goldHi),var(--goldBody));color:var(--ink);box-shadow:0 0 0 4px rgba(241,204,112,.25),0 0 22px rgba(241,204,112,.55);animation:app-stars-glow 2.8s ease-in-out 3}
.app-stars.is-pack svg{color:var(--ink)}
.app-stars-badge{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;box-sizing:border-box;padding:0 6px;border-radius:999px;background:var(--navy);box-shadow:0 0 0 2px var(--goldBody);color:var(--gold2);font:800 13px/24px var(--fD);text-align:center}
.app-stars-badge[hidden]{display:none}
@keyframes app-stars-glow{50%{box-shadow:0 0 0 5px rgba(241,204,112,.32),0 0 30px rgba(241,204,112,.7)}}
@media (prefers-reduced-motion:reduce){.app-stars.is-pack{animation:none}}
.app-path{position:absolute;z-index:30;width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:16px;border-radius:18px;background:var(--navy);box-shadow:inset 0 0 0 1px rgba(246,220,149,.5),0 18px 40px -12px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:12px;color:var(--ivory)}
.app-path[hidden]{display:none}
body[data-path="open"] #app{opacity:.3}
.app-path-say{margin:0;font:700 19px/1.3 var(--fD)}
.app-path-say .mq-num{font:800 26px/1 var(--fN);color:var(--gold2)}
/* The stars to the next pack, numbered as her own stars, then the pack (PAPER_HOME.trail) */
.app-path-trail{display:flex;align-items:flex-start;gap:6px}
.app-path-slot{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.app-path-slot svg{width:100%;max-width:38px;height:auto;aspect-ratio:1;fill:none;stroke:rgba(255,250,240,.4);stroke-width:1.5;stroke-linejoin:round}
.app-path-slot.is-on svg{fill:var(--gold);stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(241,204,112,.5))}
.app-path-slot b{font:800 17px/1 var(--fN);color:#a9b4dc}
.app-path-slot.is-on b{color:var(--gold2)}
.app-path-pk{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:59px;border-radius:14px;background:rgba(232,196,106,.2);box-shadow:inset 0 0 0 2px var(--gold2)}
.app-path-pk img{width:30px;height:40px;object-fit:contain}
.app-path-t{margin:0;font:600 17px/1.35 var(--fD);color:var(--gold2)}
.app-lock{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:12px;color:#8e9bd0}
.app-lock svg{width:22px;height:22px}
.app-lock:hover{color:var(--ivory)}
.app-buddy{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#16301f;box-shadow:inset 0 0 0 2px var(--gold)}
.app-buddy:empty{display:none}
/* The buddy in the bar is the way to change it now that Home has no big monster (Jon, 25 Oct): a 48px target round the 40px picture. */
.app-buddy-go{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:50%;text-decoration:none}
.app-buddy-go[hidden]{display:none}
.app-buddy-go:hover .app-buddy{box-shadow:inset 0 0 0 2px var(--gold),0 0 0 4px rgba(232,196,106,.3)}
.app-buddy img{width:24px;height:24px;object-fit:contain}
/* the name about 10px from the ring: the header's 20px gap, less the 9px either side of the ring in its 48px tap area */
.app-buddy-go+.app-who{margin-left:-19px}
/* The child's name beside the buddy (profiles). A link to Who's playing only when there is more than one child. */
.app-who{display:inline-flex;align-items:center;min-height:var(--tap);max-width:9em;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 17px/1.2 var(--fD);color:#fffaf0;text-decoration:none}
.app-who[hidden]{display:none}
a.app-who[href]:hover{text-decoration:underline;text-underline-offset:3px}
.app-who:focus-visible{outline:3px solid #ffd65c;outline-offset:2px;border-radius:6px}
@media (max-width:420px){.app-who{max-width:5.5em;font-size:15px}}
/* Bottom destinations for tablets and phones, padded for the safe area */
.app-tabbar{display:none}
@media (max-width:1023px){
/* The logo stays on tablets and phones, top left (Jon, 26 Oct; the PhoneHomeHeader board): the rest of the bar sits right, all on
   one row, and the logo gives way first when a long name or a big star count needs the room */
.app-logo-link{flex:0 1 auto;display:flex;align-items:center;min-width:64px;min-height:var(--tap);margin-right:auto}
.app-stars,.app-lock{flex-shrink:0}
.app-logo{width:min(164px,24.5vw);max-width:100%}
.app-buddy-go+.app-who{margin-left:-11px}
.app-nav{display:none}
:root{--headerH:72px}
.app-header-in{flex-wrap:nowrap;justify-content:flex-end;gap:12px;padding-top:12px;padding-bottom:12px}
/* Painted tabs (Jon, 27 Oct; the Navigation board): the app's own art for each destination. Home is the child's buddy (the house
   until there is one), Papers the exercise book, Cards two card backs, How to play the crest from the middle of the card back.
   They rest a little dimmed; the open one lifts out of the bar with a gold glow under it. Slim (Jon, 28 Oct): 32px art, about
   61px tall on an iPhone, down from 87. */
.app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:2px max(var(--s2),env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(var(--s2),env(safe-area-inset-left));background:linear-gradient(180deg,rgba(20,28,72,.97),rgba(6,9,28,.99) 70%);border-top:1px solid rgba(246,220,149,.34);box-shadow:0 -12px 30px rgba(0,0,0,.5)}
.app-tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;min-height:54px;padding:2px 2px 3px;border-radius:10px;color:var(--onDark2);font:700 13px/1.15 var(--fD);text-decoration:none;text-align:center}
.app-tabbar a:focus-visible{outline-offset:-3px}
.tab-art{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:32px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tab-art img{display:block;object-fit:contain;filter:saturate(.7) brightness(.85);transition:filter .3s ease}
.tab-art svg{width:24px;height:24px}
.tab-buddy{display:flex;width:40px;height:32px}.tab-buddy:empty{display:none}.tab-buddy:not(:empty)+svg{display:none}
.tab-buddy img{width:100%;height:100%}
.tab-fan img{position:absolute;top:1px;width:21px;height:30px;border-radius:2px}
.tab-fan img:first-child{left:5px;transform:rotate(-12deg)}.tab-fan img:last-child{left:13px;transform:rotate(9deg)}
.tab-crest{border-radius:50%}
.tab-glow{position:absolute;left:50%;bottom:12px;width:56px;height:22px;margin-left:-28px;border-radius:50%;background:radial-gradient(closest-side,rgba(241,204,112,.55),rgba(241,204,112,0));opacity:0;transition:opacity .3s ease;pointer-events:none}
.app-tabbar a[aria-current="page"]{color:var(--goldHi)}
.app-tabbar a[aria-current="page"] .tab-glow{opacity:1}
.app-tabbar a[aria-current="page"] .tab-art{transform:translateY(-6px) scale(1.15)}
.app-tabbar a[aria-current="page"] .tab-art img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(241,204,112,.55))}
body.mq:not([data-mode]) #app,body[data-mode="rich"]:not([data-chrome="own"]) #app{padding-bottom:calc(var(--tabbarH) + env(safe-area-inset-bottom) + var(--s6))}
}
@media (max-width:420px){.app-tabbar a{font-size:12.5px}.app-header-in{gap:6px;padding-inline:16px}.app-buddy-go+.app-who{margin-left:-5px}.app-stars{padding:4px 12px 4px 10px}.app-stars b{font-size:22px}.app-who{max-width:3.6em}}
@media (max-width:339px){.app-logo-link{display:none}}
/* Focused modes keep their own compact header: no destinations while a child works, opens a pack or sets up. Before you start,
   Paper finished and one card up close carry their own way back (data-chrome="own"), as their boards draw them. */
body[data-mode="task"] .app-header,body[data-mode="task"] .app-tabbar,
body[data-mode="moment"] .app-header,body[data-mode="moment"] .app-tabbar,
body[data-mode="setup"] .app-header,body[data-mode="setup"] .app-tabbar,
body[data-mode="parent"] .app-header,body[data-mode="parent"] .app-tabbar,
body[data-chrome="own"] .app-header,body[data-chrome="own"] .app-tabbar{display:none}

/* Save strip: only seen while connecting, or when a save has a problem. Its words always reach screen readers. */
body.mq .save-strip{position:relative;z-index:15;max-width:var(--maxw);margin:0 auto;padding:var(--s2) var(--gut) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s3)}
body.mq .save-strip:not([data-state="problem"]):not([data-state="connecting"]){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
body.mq #save-status{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:var(--rK);background:var(--navy3);box-shadow:inset 0 0 0 1px var(--navyLine);font:600 16px/1.35 var(--fD);color:var(--onDark)}
body.mq #save-status[data-problem="true"]{background:var(--laterTint);box-shadow:inset 0 0 0 2px var(--laterLine);color:var(--later);font-weight:700}
body[data-mode="task"] #save-status:not([data-problem="true"]){background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}

/* ---- Type */
.mq-num{font-family:var(--fN);font-weight:600;font-variant-numeric:tabular-nums}
.mq-read{font-family:var(--fR)}
.mq-h1{margin:0;font:600 clamp(34px,4.6vw,60px)/1.06 var(--fH);letter-spacing:-.008em;text-wrap:balance}
.mq-h1 em,.mq-h2 em{font-style:normal;color:var(--gold)}
.mq-h2{margin:0;font:600 clamp(26px,2.6vw,34px)/1.15 var(--fH);letter-spacing:-.006em;text-wrap:balance}
.mq-h3{margin:0;font:600 22px/1.25 var(--fH)}
.mq-label{font:700 16px/1.25 var(--fD);color:var(--onDark2)}
.mq-sub{margin:0;font:500 19px/1.45 var(--fD);color:var(--onDark2)}
.mq-eyebrow{display:block;margin:0 0 6px;font:700 17px/1.25 var(--fD);color:var(--gold2)}
.on-light .mq-label,.mq-sheet .mq-label,body[data-mode="task"] .mq-label{color:var(--ink2)}
.on-light .mq-sub,.mq-sheet .mq-sub{color:var(--ink2)}
.on-light .mq-eyebrow,.mq-sheet .mq-eyebrow{color:#7a5a12}
.mq-sr,.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Text over art always sits on a backing; the glow only softens edges. */
.mq-glow{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.mq-backed{background:rgba(7,11,34,.78);border-radius:var(--rC);padding:var(--s4) var(--s5)}

/* ---- Surfaces */
.mq-panel{background:rgba(11,18,54,.9);border:1px solid var(--navyLine);border-radius:var(--rC);box-shadow:var(--shadow);color:var(--onDark)}
.mq-sheet{background:var(--ivory);color:var(--ink);border-radius:var(--rC);box-shadow:var(--shadow);color-scheme:light}
.mq-card-white{color-scheme:light;background:var(--white);color:var(--ink);border:1px solid var(--hair2);border-radius:var(--rC);box-shadow:var(--shadowLight)}
.mq-wrap{display:flex;flex-direction:column;gap:var(--s5)}
.mq-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.mq-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.mq-stack{display:flex;flex-direction:column;gap:var(--s3)}

/* ---- Buttons. One family, one material per surface (the approved control study):
   rich screens use warm gold with a lit top edge and a small lower edge that compresses when pressed; light sheets, task mode and
   Grown-ups use a deep navy with a fine highlight. Secondary actions are quieter; text actions keep a full 48px target.
   Hover 130ms, press 1-2px, no bounce, no glow that moves. Busy keeps the label and width; disabled looks plainly unavailable. */
.mq-btn,.mq-btn2{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--tapChild);max-width:100%;padding:14px 22px;border:1px solid transparent;border-radius:var(--rBtn);font:700 19px/1.2 var(--fD);letter-spacing:.005em;text-decoration:none;text-align:center;cursor:pointer;overflow-wrap:anywhere;transition:background var(--ctlSpeed),box-shadow var(--ctlSpeed),border-color var(--ctlSpeed),transform var(--ctlSpeed)}
.mq-btn svg,.mq-btn2 svg,.mq-link svg{width:22px;height:22px;flex:0 0 auto}
.mq-btn{color:var(--ink);border-color:#ffffffcc;background:linear-gradient(180deg,#fff 0%,#f3f6fd 20%,#e7ebf7 74%,#d3daee 100%);box-shadow:inset 0 2px #fff,inset 0 -2px #8c97bd44,0 3px 0 #48527c55,0 8px 20px -12px #0a123a9c}
.mq-btn:hover,.mq-btn.is-hover{background:linear-gradient(180deg,#fff,#f7f9ff 26%,#eceffa 80%,#dde3f3);box-shadow:inset 0 2px #fff,inset 0 -2px #8c97bd44,0 3px 0 #48527c66,0 10px 24px -12px #0a123a8c}
.mq-btn:active,.mq-btn.is-pressed{transform:translateY(2px);background:linear-gradient(180deg,#dbe1f1,#eef1fa);box-shadow:inset 0 2px 4px #1d274a22,0 1px 0 #48527c40}
.mq-btn.is-reward{color:var(--ink);border-color:var(--goldEdge);background:linear-gradient(180deg,var(--goldHi) 0%,var(--goldMid) 18%,var(--goldBody) 72%,var(--goldLow) 100%);box-shadow:inset 0 1px #fff6d2,inset 0 -2px #be873b55,0 3px 0 #9a6b293d,0 8px 20px -12px #f0b64a9c;text-shadow:0 1px #fff2cb55}
.mq-btn.is-reward:hover,.mq-btn.is-reward.is-hover{background:linear-gradient(180deg,#fff1c7,#ffdf8b 26%,#f4cd6a 80%,#efbd5a);box-shadow:inset 0 1px #fff9e5,inset 0 -2px #be873b55,0 3px 0 #9a6b294d,0 10px 24px -12px #f0b64a8c}
.mq-btn.is-reward:active,.mq-btn.is-reward.is-pressed{background:linear-gradient(180deg,#e6b75e,#f3cb72);box-shadow:inset 0 2px 4px #7b511d22,0 1px 0 #9a6b2940}
.mq-btn2{color:#eaf0fc;border-color:#95a9d647;background:linear-gradient(180deg,#ffffff0d,#ffffff03);box-shadow:inset 0 1px #ffffff08}
.mq-btn2:hover,.mq-btn2.is-hover{border-color:#e9cc85a1;background:#ffffff14}
.mq-btn2:active,.mq-btn2.is-pressed{transform:translateY(1px)}
/* On light surfaces, in task mode and in Grown-ups */
.on-light .mq-btn,.mq-sheet .mq-btn,.mq-card-white .mq-btn,body[data-mode="task"] .mq-btn,body[data-mode="parent"] .mq-btn{color:#fff;border-color:var(--navyEdge);background:linear-gradient(180deg,var(--navyHi),var(--navyLow) 82%);box-shadow:inset 0 1px #ffffff30,inset 0 -1px #07112c40,var(--ctlShadow);text-shadow:none}
.on-light .mq-btn:hover,.on-light .mq-btn.is-hover,.mq-sheet .mq-btn:hover,.mq-card-white .mq-btn:hover,body[data-mode="task"] .mq-btn:hover,body[data-mode="parent"] .mq-btn:hover{background:linear-gradient(180deg,#304a88,#1c3063);box-shadow:inset 0 1px #ffffff3b,0 3px 7px #06122a24}
.on-light .mq-btn:active,.on-light .mq-btn.is-pressed,.mq-sheet .mq-btn:active,.mq-card-white .mq-btn:active,body[data-mode="task"] .mq-btn:active,body[data-mode="parent"] .mq-btn:active{transform:translateY(1px);background:#14234e;box-shadow:inset 0 2px 3px #00000026}
.on-light .mq-btn2,.mq-sheet .mq-btn2,.mq-card-white .mq-btn2,body[data-mode="task"] .mq-btn2{color:var(--ink);border-color:#c1cbd2;background:linear-gradient(180deg,#fff,#f8fafb);box-shadow:inset 0 1px #fff,0 2px 2px #12274d08}
.on-light .mq-btn2:hover,.on-light .mq-btn2.is-hover,.mq-sheet .mq-btn2:hover,.mq-card-white .mq-btn2:hover,body[data-mode="task"] .mq-btn2:hover{border-color:#8f9fb8;background:#fff}
.mq-btn:disabled,.mq-btn[aria-disabled="true"],.mq-btn2:disabled,.mq-btn2[aria-disabled="true"],body.mq .mq-btn:disabled,body.mq .mq-btn2:disabled{cursor:not-allowed;color:#4f586d;background:#dce1e8;border-color:#d1d7df;box-shadow:none;text-shadow:none;transform:none}
.mq-btn[aria-busy="true"],.mq-btn2[aria-busy="true"]{cursor:progress}
.mq-btn[aria-busy="true"]::after,.mq-btn2[aria-busy="true"]::after{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mq-turn .8s linear 12}
@keyframes mq-turn{to{transform:rotate(1turn)}}
.mq-btn:focus-visible,.mq-btn2:focus-visible{outline-offset:4px}
/* Static state samples for the components page */
.mq-btn.is-focus,.mq-btn2.is-focus,.ui-chip.is-focus{outline:3px solid #ffd65c;outline-offset:4px}
.on-light .is-focus{outline-color:#254a83!important}
.mq-sm{min-height:var(--tap);padding:10px 16px;font-size:17px;gap:8px}
.mq-sm svg{width:20px;height:20px}
.mq-lg{min-height:60px;padding:16px 24px;font-size:20px}
.mq-wide{width:100%}
.mq-btn.is-split,.mq-btn2.is-split{justify-content:space-between}
/* Text action: plain words with an icon, the whole 48px is the target, no raised surface */
.mq-link{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 8px;border:0;border-radius:8px;background:none;color:inherit;font:700 17px/1.3 var(--fD);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.mq-link.is-plain{text-decoration:none}
.mq-link:hover{text-decoration:underline;text-decoration-thickness:2px}
.mq-back svg{width:22px;height:22px}

/* ---- Tags and chips: sentence case, never angled */
.mq-tab{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:var(--onDark);font:700 15px/1.2 var(--fD);white-space:nowrap}
.mq-tab svg{width:16px;height:16px}
.mq-tab.is-gold{background:var(--gold);color:var(--ink)}
.mq-tab.is-ok{background:var(--okTint);color:var(--ok)}
.mq-tab.is-ans{background:var(--ansTint);color:var(--ans)}
.mq-tab.is-later{background:var(--laterTint);color:var(--later)}
.mq-tab.is-dark{background:var(--navy2);color:#fff}
.on-light .mq-tab:not([class*="is-"]),.mq-sheet .mq-tab:not([class*="is-"]),body[data-mode="task"] .mq-tab:not([class*="is-"]){background:var(--sage2);color:var(--ink)}
/* Subject chip: icon and name */
.mq-plate{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px 4px 6px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--onDark);font:700 17px/1.2 var(--fD)}
.mq-plate .ui-subj{width:28px;height:28px}
.on-light .mq-plate,.mq-sheet .mq-plate,body[data-mode="task"] .mq-plate{background:var(--sel);color:var(--ink)}
/* Monster type chip: the card generator's name-bar colours, as a small swatch */
.mq-type{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:3px 12px 3px 4px;border-radius:999px;background:rgba(255,255,255,.12);font:700 15px/1.2 var(--fD)}
.mq-type::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--ti,none) center/contain no-repeat,linear-gradient(135deg,var(--p0,#d2e65a),var(--p1,#6f9a2c))}
/* Type filters show the same type badge as the cards, never colour alone; the type's name is always beside it. */
.ui-chip.has-type{padding-left:8px}
.ui-chip.has-type::before{content:"";flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ti,none) center/contain no-repeat,linear-gradient(135deg,var(--p0,#d2e65a),var(--p1,#6f9a2c))}
.on-light .mq-type,.mq-sheet .mq-type{background:var(--ivory2);color:var(--ink)}
[data-type="Leaf"]{--p0:#d2e65a;--p1:#6f9a2c;--ti:url(mq/icons/leaf-96.webp)}
[data-type="Fire"]{--p0:#ffb562;--p1:#c23a12;--ti:url(mq/icons/fire-96.webp)}
[data-type="Water"]{--p0:#a6dcff;--p1:#1f6fbf;--ti:url(mq/icons/water-96.webp)}
[data-type="Spark"]{--p0:#fff07a;--p1:#f0b11a;--ti:url(mq/icons/spark-96.webp)}
[data-type="Stone"]{--p0:#e6cfa0;--p1:#a37a4c;--ti:url(mq/icons/stone-96.webp)}
[data-type="Ice"]{--p0:#e6f8ff;--p1:#6fc2ea;--ti:url(mq/icons/ice-96.webp)}
[data-type="Air"]{--p0:#d2fff6;--p1:#4fb8a6;--ti:url(mq/icons/air-96.webp)}
[data-type="Light"]{--p0:#fff2b0;--p1:#e9b62a;--ti:url(mq/icons/light-96.webp)}
[data-type="Shadow"]{--p0:#d8c2ff;--p1:#6a44b8;--ti:url(mq/icons/shadow-96.webp)}
[data-type="Bloom"]{--p0:#ffd0ea;--p1:#e0569c;--ti:url(mq/icons/bloom-96.webp)}
[data-type="Metal"]{--p0:#e2e8ef;--p1:#7f8c9a;--ti:url(mq/icons/metal-96.webp)}
[data-type="Fighting"]{--p0:#f4a47e;--p1:#b23a26;--ti:url(mq/icons/fighting-96.webp)}
[data-type="Dragon"]{--p0:#aebaff;--p1:#3a4bc0;--ti:url(mq/icons/dragon-96.webp)}
[data-type="Poison"]{--p0:#e6f278;--p1:#9aae1c;--ti:url(mq/icons/poison-96.webp)}
[data-type="Mind"]{--p0:#f0d6fa;--p1:#b07ccc;--ti:url(mq/icons/mind-96.webp)}
[data-type="Sound"]{--p0:#ffa2da;--p1:#d0368e;--ti:url(mq/icons/sound-96.webp)}
[data-type="Sand"]{--p0:#f8e0b0;--p1:#c89a52;--ti:url(mq/icons/sand-96.webp)}
[data-type="Gravity"]{--p0:#c0c9d8;--p1:#566276;--ti:url(mq/icons/gravity-96.webp)}
[data-type="Spirit"]{--p0:#d0d8ff;--p1:#7484d6;--ti:url(mq/icons/spirit-96.webp)}
[data-type="Space"]{--p0:#a89ae8;--p1:#3c308e;--ti:url(mq/icons/space-96.webp)}
.ui-subj{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:var(--navy);color:#fff}
.ui-subj svg{width:62%;height:62%}
.ui-subj.is-zh{font:700 22px/1 var(--zh),sans-serif;background:transparent;color:inherit}
.mq-plate .ui-subj.is-zh{font-size:19px}

/* ---- Fields and switches. Fields: 58px, a shallow inset surface, a precise border, a clear focus ring that never moves the layout. */
.ui-field{display:flex;flex-direction:column;gap:8px;font:700 16px/1.4 var(--fD)}
.ui-field small,.ui-help{font:500 15px/1.45 var(--fD);color:var(--ink2)}
.ui-input,.ui-field :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){appearance:none;display:block;width:100%;min-width:0;min-height:58px;padding:13px 16px;border:1.5px solid var(--fieldLine);border-radius:var(--rField);background:linear-gradient(180deg,#f9fbfc 0%,#fff 30%);color:var(--ink);box-shadow:inset 0 1px 3px #1b355608;font:500 18px/1.3 var(--fD);transition:border-color var(--ctlSpeed),box-shadow var(--ctlSpeed)}
.ui-field :is(input,select,textarea):focus-visible,.ui-input:focus-visible{outline:3px solid #284b8329;outline-offset:2px;border-color:var(--fieldFocus);box-shadow:inset 0 1px 3px #1b355608,0 0 0 1px var(--fieldFocus)}
.ui-field :is(input,select)[aria-invalid="true"]{border-color:#a52d36;background:#fffafb}
.ui-field :is(input,select):disabled{color:#5b6475;background:#eef1f4;border-color:#d1d7df;cursor:not-allowed}
/* A select with the kit's own chevron */
.ui-select{position:relative;display:block}
.ui-select select{padding-right:46px;cursor:pointer}
.ui-select>svg{position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;pointer-events:none;color:var(--ink2)}
.ui-check{display:flex;align-items:center;gap:12px;min-height:var(--tap);font:600 17px/1.35 var(--fD);cursor:pointer}
.ui-check input{width:24px;height:24px;margin:0;accent-color:var(--navy);flex:0 0 auto}
.ui-switch{display:flex;align-items:center;gap:14px;width:100%;min-height:var(--tap);padding:4px 0;border:0;background:none;color:inherit;font:600 18px/1.3 var(--fD);text-align:left;cursor:pointer}
.ui-switch-text{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.ui-switch-text small{font:500 16px/1.35 var(--fD);color:var(--ink2)}
.ui-track{position:relative;flex:0 0 auto;width:60px;height:34px;border-radius:17px;background:#7d859b;box-shadow:inset 0 1px 2px #0000002e;transition:background-color .2s}
.ui-track::after{content:"";position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .2s}
.ui-switch[aria-checked="true"] .ui-track{background:var(--navy2)}
.ui-switch[aria-checked="true"] .ui-track::after{transform:translateX(26px)}
.ui-switch-word{min-width:2.4em;font:700 16px var(--fD);color:var(--ink2);text-align:right}
.mq-panel .ui-switch-text small,.mq-panel .ui-switch-word{color:var(--onDark2)}
.mq-panel .ui-switch[aria-checked="true"] .ui-track{background:var(--gold)}
/* Segmented control (Write / Type, views): one recessed track, 48px segments, one defined selected surface */
.ui-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:15px;background:#0b1433;border:1px solid #a0b1d03a;box-shadow:inset 0 1px 2px #0000002e}
.ui-seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:11px 20px;border:1px solid transparent;border-radius:10px;background:transparent;color:inherit;font:700 17px/1.2 var(--fD);transition:background var(--ctlSpeed)}
.ui-seg button svg{width:20px;height:20px}
.ui-seg button:hover{background:#ffffff10}
.ui-seg [aria-pressed="true"]{background:linear-gradient(180deg,#fce9b7,#eed08a);color:#18213f;border-color:var(--chipOnLine);box-shadow:inset 0 1px #fff4d4}
.on-light .ui-seg,.mq-sheet .ui-seg,.mq-card-white .ui-seg,body[data-mode="task"] .ui-seg{background:#e3e9e6;border-color:#d2dbd6;box-shadow:inset 0 1px 2px #19322908}
.on-light .ui-seg button,.mq-sheet .ui-seg button,.mq-card-white .ui-seg button,body[data-mode="task"] .ui-seg button{color:#415165}
.on-light .ui-seg button:hover,.mq-sheet .ui-seg button:hover,.mq-card-white .ui-seg button:hover,body[data-mode="task"] .ui-seg button:hover{background:#ffffff8c}
.on-light .ui-seg [aria-pressed="true"],.mq-sheet .ui-seg [aria-pressed="true"],.mq-card-white .ui-seg [aria-pressed="true"],body[data-mode="task"] .ui-seg [aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#263a6b,#18274f);border-color:var(--navyEdge);box-shadow:inset 0 1px #ffffff25,0 2px 4px #0714261c}
/* Filter chips: compact 48px choices. Rich screens select with pale gold, light screens with a navy tint; always with a check mark. */
.ui-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:10px 16px;border:1px solid #a0b1d04d;border-radius:24px;background:linear-gradient(180deg,#162348,#101b39);color:#e7edf9;font:700 16px/1.2 var(--fD);box-shadow:inset 0 1px #ffffff08;cursor:pointer;transition:border-color var(--ctlSpeed),background var(--ctlSpeed)}
.ui-chip svg{width:17px;height:17px;stroke-width:2.4}
.ui-chip b{font-size:17px;color:var(--gold2)}
.ui-chip:hover{border-color:#e9cc85a1}
.ui-chip[aria-pressed="true"]{background:linear-gradient(180deg,#fce9b7,#eed08a);color:#18213f;border-color:var(--chipOnLine);box-shadow:inset 0 1px #fff4d4}
.ui-chip[aria-pressed="true"] b{color:#18213f}
.on-light .ui-chip,.mq-sheet .ui-chip,body[data-mode="parent"] .mq-sheet .ui-chip{background:#fff;color:var(--ink);border-color:#c1cbd2;box-shadow:inset 0 1px #fff,0 2px 2px #12274d08}
.on-light .ui-chip b,.mq-sheet .ui-chip b{color:var(--ink2)}
.on-light .ui-chip[aria-pressed="true"],.mq-sheet .ui-chip[aria-pressed="true"]{background:var(--choiceOn);border-color:#304d80;box-shadow:inset 0 0 0 .5px #304d80}

/* ---- Progress and status */
.ui-progress{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
.ui-progress>span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#e8c46a,#f6dc95)}
.ui-progress.is-green{background:#d5ded8}
.ui-progress.is-green>span{background:#4f9a5d}
.ui-progress.is-navy{height:10px;background:rgba(20,24,43,.14)}
.ui-progress.is-navy>span{background:var(--navyHi)}
.on-light .ui-progress:not(.is-green):not(.is-navy),.mq-sheet .ui-progress:not(.is-green):not(.is-navy){background:#e3dccb}
.on-light .ui-progress:not(.is-green):not(.is-navy)>span,.mq-sheet .ui-progress:not(.is-green):not(.is-navy)>span{background:linear-gradient(90deg,#b88a2c,#e2b94f)}
.mq-bar{height:12px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
.mq-bar>span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#e8c46a,#f6dc95)}
.mq-sheet .mq-bar,.on-light .mq-bar{background:#e3dccb}
.mq-sheet .mq-bar>span,.on-light .mq-bar>span{background:linear-gradient(90deg,#b88a2c,#e2b94f)}
.ui-status{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 16px;border-radius:var(--rK);font:600 17px/1.4 var(--fD)}
.ui-status svg{width:24px;height:24px;flex:0 0 auto;margin-top:-1px}
.ui-status.is-ok{background:var(--okTint);color:var(--ok)}
.ui-status.is-info{background:var(--sel);color:var(--ink)}
.ui-status.is-warn{background:var(--laterTint);color:var(--later);box-shadow:inset 0 0 0 1px var(--laterLine)}
.ui-status.is-error{background:var(--errTint);color:var(--err)}
.ui-status:empty{display:none}
.ui-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.ui-dot.is-warn{background:#d98a12}

/* Confirm panel: names the real consequence; keep and cancel always there */
.ui-confirm{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);border-radius:var(--rK);background:var(--laterTint);box-shadow:inset 0 0 0 2px var(--laterLine);color:var(--ink)}
.ui-confirm p{margin:0;font:600 18px/1.4 var(--fD)}
.ui-confirm .mq-row>*{flex:1 1 200px}

/* Dialog: the enlarged card and other focused views */
.ui-dialog{width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:var(--rC);background:var(--navy);color:var(--onDark);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:auto}
.ui-dialog::backdrop{background:rgba(3,6,20,.82)}
.ui-dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);background:rgba(11,18,54,.97);border-bottom:1px solid var(--navyLine)}
.ui-dialog-head h2{margin:0;font:700 22px/1.2 var(--fD)}
.ui-dialog-body{padding:var(--s4)}
.ui-zoom-img{display:block;width:100%;height:auto;max-width:none;border-radius:var(--rK);background:#fff}
/* The explainer video (MQ_UI.explainer; the SignIn, HowToPlay and Grownups boards): the title and Close, then the film at
   16:9, never taller than the screen: on a phone held sideways it narrows to fit the height, with no bars beside it. */
.ui-dialog.ui-video{width:min(1040px,calc(100vw - 24px));background:#03050f}
.ui-video .ui-dialog-head{position:static;padding:var(--s3) var(--s4);background:none;border-bottom:0}
.ui-video .ui-dialog-head h2{font:700 26px/1.2 var(--fH)}
.ui-video .ui-dialog-body{padding:0 var(--s4) var(--s4)}
.ui-video-v{display:block;width:min(100%,calc((100dvh - 120px) * 16 / 9));margin:0 auto;aspect-ratio:16/9;border-radius:18px;background:#000;box-shadow:0 0 0 1px rgba(246,220,149,.35)}
@media (max-width:639px){.ui-video .ui-dialog-head{padding:var(--s2) var(--s3)}.ui-video .ui-dialog-body{padding:0 var(--s2) var(--s2)}.ui-video-v{border-radius:12px}}

/* Stepper: Set up / Meet your monster / Start practising */
.ui-steps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0;padding:0;list-style:none;font:600 17px/1.2 var(--fD)}
.ui-steps li{display:inline-flex;align-items:center;gap:10px;color:var(--onDark2)}
.ui-steps li+li::before{content:"";width:24px;height:2px;background:rgba(255,255,255,.35)}
.ui-steps i{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.55);font:700 16px var(--fD);font-style:normal}
.ui-steps i svg{width:18px;height:18px}
.ui-steps .is-now{color:#fff}
.ui-steps .is-now i{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ui-steps .is-done i{background:rgba(232,196,106,.25);border-color:var(--gold);color:var(--gold)}

/* How to play's four steps as a strip (StartFreePack, StartPickBuddy): a dark band with a hairline under it, the step she is on
   gold with a soft glow, a done step green with a tick. Under 600px only the current step keeps its label; the others are
   hidden by clipping, not display:none, so a screen reader still hears each name and ", done". */
.ui-how{position:relative;z-index:3;margin:0;padding:14px 20px;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;background:rgba(5,8,23,.7);box-shadow:inset 0 -1px 0 rgba(169,180,220,.18)}
.ui-how li{position:relative;display:flex;align-items:center;gap:10px;font:700 16px/1.25 var(--fD);color:#a9b4dc}
.ui-how-n{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(169,180,220,.5);color:#c9d2ee;font:800 16px/1 var(--fN)}
.ui-how-n svg{width:16px;height:16px;stroke-width:3.4}
.ui-how .is-now{color:var(--ivory)}
.ui-how .is-now .ui-how-n{background:var(--gold);color:var(--navy);box-shadow:0 0 14px rgba(232,196,106,.6)}
.ui-how .is-done{color:#bdefc7}
.ui-how .is-done .ui-how-n{background:#7ed08c;color:var(--navy);box-shadow:none}
/* Under 360px the gaps close up, so the four steps stay on one row with the current label ("Collect cards" is the longest). */
@media (max-width:359px){.ui-how{gap:10px 16px;padding-left:12px;padding-right:12px}}
@media (max-width:599px){.ui-how li:not(.is-now) .ui-how-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Creature art: always contained, never cropped */
.ui-buddy{display:block;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(0,0,0,.5))}
/* A habitat painted into the page: navy behind it, so a slow or failed image never leaves text on nothing */
.ui-scene{position:absolute;inset:0;overflow:hidden;background:var(--navy);pointer-events:none}
.ui-scene-img{width:100%;height:100%;object-fit:cover;object-position:var(--scene-x,center) center;opacity:0;transition:opacity .35s ease}
.ui-scene-img.is-in{opacity:1}
.ui-scene-img.is-failed{display:none}
/* The Card Book thumbnail: a neat stack of the real card back */
.ui-stack{position:relative;display:inline-block;width:64px;aspect-ratio:1795/2400}
.ui-stack img{position:absolute;inset:0;width:100%;height:100%;border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,.45)}
.ui-stack img:nth-child(1){transform:translate(-10px,4px) rotate(-8deg)}
.ui-stack img:nth-child(2){transform:translate(-4px,2px) rotate(-3deg)}
.ui-stack img:nth-child(3){transform:translate(4px,0) rotate(4deg)}

/* Speech bubble: reading text */
.mq-bubble{position:relative;background:var(--ivory);color:var(--ink);font:400 19px/1.45 var(--fR);border-radius:14px 14px 14px 4px;padding:12px 16px;box-shadow:var(--shadowLight)}

/* Question number chips (navigator) */
.mq-qc{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 6px;border-radius:10px;background:var(--white);border:2px solid var(--hair);color:var(--ink);font:700 18px/1 var(--fD)}
.mq-qc.is-now{border-color:var(--navy);background:var(--navy);color:#fff}
.mq-qc.is-done{background:var(--okTint);border-color:var(--okLine);color:var(--ok)}
.mq-qc.is-later{background:var(--laterTint);border-color:var(--laterLine);color:var(--later)}
.mq-qc.is-todo{background:var(--white)}
.mq-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}

/* One-shot motion only. Nothing loops while a child is reading. */
.mq-pop{animation:mq-pop .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes mq-pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.mq-rise{animation:mq-rise .5s cubic-bezier(.2,1.1,.4,1) both;animation-delay:var(--d,0s)}
@keyframes mq-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
.mq-pop,.mq-rise,.mq-btn[aria-busy="true"]::after,.mq-btn2[aria-busy="true"]::after{animation:none}
.mq-btn,.mq-btn2,.ui-chip,.ui-seg button,.ui-field :is(input,select),.ui-track,.ui-track::after,.ui-scene-img{transition:none}
.mq-btn:active,.mq-btn2:active,.mq-btn.is-pressed,.mq-btn2.is-pressed{transform:none}
.tab-art,.tab-art img,.tab-glow{transition:none}
}

/* Before the app is ready, and if the server can't be reached */
.mq-loading{margin:48px auto;padding:14px 22px;max-width:420px;border-radius:var(--rC);background:rgba(7,11,34,.8);font:700 20px var(--fD);color:#fff;text-align:center}
.mq-trouble{max-width:600px;margin:48px auto;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.mq-trouble p{margin:0;font:400 19px/1.5 var(--fR);color:var(--ink2)}
.mq-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s5)}
.mq-empty p{margin:0;font:400 19px/1.5 var(--fR)}

@media (max-width:639px){
body.mq{font-size:17px}
.mq-btn,.mq-btn2{padding:14px 18px;font-size:18px}
.mq-lg{min-height:60px;font-size:19px}
}

/* Charts (charts.js, MQ_CHARTS): shapes in an SVG, every label an HTML span over it, a transparent button for each step.
   The inner box keeps its min-width (set inline, 720px unless the chart asks) and scrolls inside its card on a phone.
   The wrapper's 6px of top padding keeps a pick column's focus ring (3px and a 3px offset) from being clipped.
   The y labels are a column (.mc-ys) starting in the plot's own grid cell (and over the bars' dates), sticky at the scrolling box's
   left edge: on a phone the scale stays in view with the card colour (--mc-bg) behind it, hiding what scrolls under; unscrolled
   it sits where it always did. */
.mc{overflow-x:auto;padding-top:6px}
.mc-in{position:relative;display:grid}
.mc-svg,.mc-plot{grid-area:1/1}
.mc-xs{grid-area:2/1}
.mc-svg{display:block;width:100%;height:auto}
.mc-ys{grid-area:1/1/3/2;position:sticky;left:0;z-index:2;justify-self:start;width:6%;background:var(--mc-bg,transparent)}
/* Where a chart can scroll, the card colour (the grown-up cards are about #080c24 on a phone) hides what slides under the scale,
   the bars' dates included. A page with other cards sets --mc-bg. */
@media (max-width:959px){.mc{--mc-bg:#080c24}}
.mc-yt,.mc-xl,.mc-end,.mc-dot{position:absolute;white-space:nowrap;line-height:1;color:#8e9bd0}
.mc-yt{left:0;width:83.333%;text-align:right;transform:translateY(-50%);font-size:13px}
.mc-xl{transform:translate(-50%,-50%);font-size:14px}
.mc-xl.is-start{transform:translate(0,-50%)}
.mc-xl.is-end{transform:translate(-100%,-50%)}
.mc-xl.is-on,.mc-xs .is-on{color:var(--ivory)}
.mc-end,.mc-dot{font-size:15px;font-weight:700;color:var(--ivory)}
.mc-end{transform:translateY(-50%)}
.mc-dot{transform:translate(-50%,-50%)}
.mc-hits{position:absolute;top:0;display:flex}
.mc-hit,.mc-col{flex:1 1 0;min-width:0;padding:0;border:0;background:transparent}
.mc-hit,button.mc-col{cursor:pointer}
.mc-hit:hover,button.mc-col:hover{background:rgba(255,255,255,.035)}
.mc-col[aria-pressed="true"]{background:rgba(255,255,255,.06)}
.mc-plot{position:relative;height:180px;padding:0 2% 0 6%}
.mc-cols{position:relative;height:100%;display:flex}
.mc-col{height:100%;display:flex;flex-direction:column-reverse;align-items:center;gap:2px;border-radius:6px}
.mc-gl{position:absolute;left:6%;right:2%;border-top:1px solid rgba(169,180,220,.14)}
.mc-gl.is-base{border-top-color:rgba(169,180,220,.3)}
.mc-part{max-width:24px}
.mc-part.is-top{border-radius:4px 4px 0 0}
.mc-floor{background:rgba(169,180,220,.3)}
.mc-xs{margin-top:10px;padding:0 2% 0 6%;display:flex}
.mc-xs span{flex:1 1 0;min-width:0;display:flex;justify-content:center;white-space:nowrap;font-size:14px;color:#8e9bd0}
.mc-xs .is-start{justify-content:flex-start}
.mc-xs .is-end{justify-content:flex-end}