/* MonsterSpell design layer · 2026 standard (docs/DESIGN.md)
   Everything is scoped to #msx, the root of a redesigned screen, so this file cannot restyle
   any classic screen and its id outranks the layered build CSS. Edit this file directly:
   the "Ported" block was generated once from design-benchmark/claude-opus/design.css. */

.ms-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#msx{
  --ink:#2a1b40;--ink-soft:#5d5270;--line:#e7dfef;--paper:#fff;--bg:#faf7f1;
  --purple-950:#1f1236;--purple-900:#2d1b4e;--purple-800:#302044;--purple-700:#4b2d8f;--purple-600:#7045ba;--purple-500:#8a63d2;--purple-200:#ddd0f3;--purple-100:#f0e9fa;
  --teal-800:#145c52;--teal-700:#1f7a6c;--teal-500:#36a58e;--teal-300:#6ed4bd;--teal-100:#dcf4ec;
  --gold-800:#6b4410;--gold-600:#c48f2c;--gold-400:#ffcf64;--gold-100:#fff3d1;
  --coral-700:#a83a22;--coral-100:#ffe9e1;--good-700:#17694f;--good-500:#2fae7f;--good-100:#ddf6e9;
  --focus:#1f7a6c;
  --r-xl:28px;--r-lg:22px;--r-md:16px;--r-sm:12px;
  --shadow-1:0 2px 0 rgb(48 32 68 / .05),0 12px 28px -14px rgb(48 32 68 / .3);
  --shadow-2:0 3px 0 rgb(48 32 68 / .07),0 24px 44px -18px rgb(48 32 68 / .45);
  --font:ui-rounded,"SF Pro Rounded","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  display:block;font-family:var(--font);font-size:16px;line-height:1.5;color:var(--ink);text-align:left;
}
#msx *,#msx *::before,#msx *::after{box-sizing:border-box}
#msx h1,#msx h2,#msx h3{line-height:1.15;letter-spacing:-.02em;margin:0;color:inherit;font-family:inherit}
#msx p,#msx ul,#msx ol,#msx dl,#msx figure{margin:0}
#msx svg{display:block}
#msx img{max-width:100%}
/* Undo the classic ".ms-page button" look; component classes below set their own. */
#msx button:where(:not(.ms-keyboard button)){font:inherit;color:inherit;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;min-height:0;min-width:0;width:auto;max-width:none;gap:0;transform:none;filter:none;text-align:center;cursor:pointer;opacity:1}
#msx button:disabled{opacity:.5;cursor:default}
#msx :focus{outline:none}
#msx :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#msx [tabindex="-1"]:focus,#msx [tabindex="-1"]:focus-visible{outline:none}
/* Classic rules that share our class names (style.css, build25.css, original-journey.css, build49.css). */
#msx .icon{margin:0;padding:0;background:none;border-radius:0;font-size:inherit;display:block}
#msx .game-card{padding:0}
#msx .original-game-grid{grid-template-columns:1fr}
#msx .monster{transform:none}
#msx p,#msx h1,#msx h2,#msx h3,#msx button{overflow-wrap:break-word}

/* ---- Ported from design-benchmark/claude-opus/design.css, scoped to #msx ---- */
#msx{--ink:#2a1b40; --ink-soft:#5d5270; --line:#e7dfef; --paper:#fff; --bg:#faf7f1; --purple-950:#1f1236; --purple-900:#2d1b4e; --purple-800:#302044; --purple-700:#4b2d8f; --purple-600:#7045ba; --purple-500:#8a63d2; --purple-200:#ddd0f3; --purple-100:#f0e9fa; --teal-800:#145c52; --teal-700:#1f7a6c; --teal-500:#36a58e; --teal-300:#6ed4bd; --teal-100:#dcf4ec; --gold-800:#6b4410; --gold-600:#c48f2c; --gold-400:#ffcf64; --gold-100:#fff3d1; --coral-700:#a83a22; --coral-100:#ffe9e1; --good-700:#17694f; --good-500:#2fae7f; --good-100:#ddf6e9; --focus:#1f7a6c; --r-xl:28px;--r-lg:22px;--r-md:16px;--r-sm:12px; --shadow-1:0 2px 0 rgb(48 32 68 / .05),0 12px 28px -14px rgb(48 32 68 / .3); --shadow-2:0 3px 0 rgb(48 32 68 / .07),0 24px 44px -18px rgb(48 32 68 / .45); --font:ui-rounded,"SF Pro Rounded","Trebuchet MS","Segoe UI",system-ui,sans-serif; --gutter:16px; color-scheme:light;}
#msx h1,#msx h2,#msx h3{line-height:1.15;letter-spacing:-.02em;margin:0}
#msx input{font:inherit;color:inherit}
#msx .icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#msx .icon--fill{fill:currentColor}
#msx .btn{--btn-bg:var(--purple-600);--btn-ink:#fff;--btn-edge:#4d288c; display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:12px 22px;border:0;border-radius:16px; background:var(--btn-bg);color:var(--btn-ink);box-shadow:0 5px 0 var(--btn-edge); font-weight:800;font-size:17px;line-height:1.2;text-decoration:none;text-align:center; transition:transform .12s ease,box-shadow .12s ease,filter .12s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;}
#msx .btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
#msx .btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--btn-edge)}
#msx .btn .icon{width:20px;height:20px}
#msx .btn--gold{--btn-bg:var(--gold-400);--btn-ink:#3a2508;--btn-edge:var(--gold-600)}
#msx .btn--teal{--btn-bg:var(--teal-700);--btn-ink:#fff;--btn-edge:var(--teal-800)}
#msx .btn--light{--btn-bg:#fff;--btn-ink:#4b2d72;--btn-edge:#ddd2ea;border:2px solid #e3d8ef}
#msx .btn--xl{min-height:62px;padding:14px 30px;font-size:20px;border-radius:20px}
#msx .btn--small{min-height:48px;padding:10px 16px;font-size:15px;border-radius:14px}
#msx .btn--block{width:100%}
#msx .view-enter{animation:view-in .35s ease-out both}
#msx .welcome{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"mon text" "focus focus";gap:14px 14px;align-items:center;margin:4px 0 20px}
#msx .welcome__monster{grid-area:mon;width:76px;animation:idle-bob 4.5s ease-in-out infinite}
#msx .welcome__text{grid-area:text;min-width:0}
#msx .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700)}
#msx .welcome h1{font-size:clamp(27px,6.6vw,42px);margin-top:2px}
#msx .focus-card{grid-area:focus;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 16px;border-radius:var(--r-lg);background:#fff;border:2px solid var(--purple-200);box-shadow:var(--shadow-1)}
#msx .focus-card__badge{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--purple-100);color:var(--purple-600);font-weight:800;font-size:18px;flex:none}
#msx .focus-card__copy{flex:1 1 180px;min-width:0}
#msx .focus-card__label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-600)}
#msx .focus-card__title{font-size:17px;font-weight:800;line-height:1.3}
#msx .focus-card__examples{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
#msx .focus-card__examples li{padding:4px 10px;border-radius:999px;background:var(--gold-100);border:1px solid #f1d58f;font-weight:800;font-size:16px;letter-spacing:.02em}
#msx .focus-card mark{background:none;color:var(--purple-600);text-decoration:underline 3px var(--gold-400);text-underline-offset:4px}
#msx .games-layout{display:grid;gap:22px}
#msx .section-title{display:flex;align-items:center;gap:10px;font-size:22px;margin:0 0 12px}
#msx .feature{position:relative;display:grid;border-radius:var(--r-xl);overflow:hidden;background:var(--purple-900);color:#fff; box-shadow:0 4px 0 #1b0f30,var(--shadow-2);--focus:var(--gold-400);}
#msx .feature__art{position:relative;aspect-ratio:16/10;min-height:190px;overflow:hidden}
#msx .feature__art .art{width:100%;height:100%}
#msx .feature__body{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 20px 24px;background:linear-gradient(180deg,#2d1b4e,#26163f)}
#msx .feature__tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;background:var(--gold-400);color:#3a2508;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
#msx .feature__tag .icon{width:16px;height:16px}
#msx .feature h2{font-size:clamp(32px,7vw,46px);letter-spacing:-.03em}
#msx .feature__lede{font-size:17px;color:#e7dcf8;max-width:34ch}
#msx .meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
#msx .meta li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .18);font-size:15px;white-space:nowrap}
#msx .meta li b{color:var(--gold-400);font-size:17px}
#msx .meta .icon{width:17px;height:17px;color:#bfeee2}
#msx .feature__best{display:flex;align-items:center;gap:8px;font-size:15px;color:#d8ccef}
#msx .feature__best .icon{color:var(--gold-400);width:18px;height:18px}
#msx .feature .btn{align-self:stretch}
#msx .game-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#msx .game-card{--card-bg:#fff3d1;--card-line:#f0dda6;--card-ink:#6b4410; display:grid;grid-template-columns:118px minmax(0,1fr);background:#fff;border:2px solid var(--card-line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-1);transition:transform .18s ease,box-shadow .18s ease;}
#msx .game-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
#msx .game-card__art{background:var(--card-bg);min-height:100%;overflow:hidden}
#msx .game-card__art .art{width:100%;height:100%}
#msx .game-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 16px;min-width:0}
#msx .game-card h3{font-size:20px}
#msx .game-card__blurb{font-size:14px;color:var(--ink-soft)}
#msx .ready-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--card-bg);color:var(--card-ink);font-size:14px;font-weight:700}
#msx .ready-chip b{font-size:16px}
#msx .game-card .btn{margin-top:6px;align-self:stretch}
#msx .game-card--builder{--card-bg:#fff1c9;--card-line:#f1d991;--card-ink:#6b4410}
#msx .game-card--pattern{--card-bg:#efe6fd;--card-line:#dacbf3;--card-ink:#4b2d8f}
#msx .game-card--check{--card-bg:#dcf4ec;--card-line:#b9e4d4;--card-ink:#145c52}
#msx .leaderboard{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-1)}
#msx .leaderboard__head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,#f2eaff,#e2f6ee)}
#msx .leaderboard__trophy{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--gold-400);color:#5b3a0a;box-shadow:0 3px 0 var(--gold-600);flex:none}
#msx .leaderboard__head h2{font-size:20px}
#msx .leaderboard__head p{font-size:14px;color:var(--ink-soft)}
#msx .lb-list{list-style:none;margin:0;padding:10px;display:grid;gap:4px}
#msx .lb-row{display:grid;grid-template-columns:32px 40px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:54px;padding:6px 12px 6px 8px;border-radius:16px}
#msx .lb-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f2eef7;color:var(--ink-soft);font-weight:800;font-size:15px}
#msx .lb-row--1 .lb-rank{background:var(--gold-400);color:#4a2f08}
#msx .lb-row--2 .lb-rank{background:#e4e3ee;color:#3d3a52}
#msx .lb-row--3 .lb-rank{background:#f3cfa9;color:#5d3512}
#msx .lb-face{width:40px;height:40px;border-radius:50%;background:#f6f2fb;overflow:hidden;display:grid;place-items:center}
#msx .lb-face .monster{width:44px;height:auto;margin-top:6px}
#msx .lb-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msx .lb-points{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
#msx .lb-row.is-you{background:var(--purple-100);box-shadow:inset 0 0 0 2px var(--purple-500)}
#msx .lb-row.is-you .lb-face{background:#fff}
#msx .lb-you{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--purple-600);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;vertical-align:2px}
#msx .leaderboard__foot{padding:0 18px 16px;font-size:14px;color:var(--ink-soft)}
#msx .bubble-page{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
#msx .game-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
#msx .link-back{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:8px 12px 8px 8px;border:0;border-radius:14px;background:transparent;color:var(--purple-700);font-weight:800;font-size:16px}
#msx .link-back:hover{background:var(--purple-100)}
#msx .game-bar__title{display:flex;align-items:center;gap:8px;font-size:20px}
#msx .game-bar__title .dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bfeee2 60%,#8a63d2);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--purple-200)}
#msx .game-bar__pause{justify-self:end}
#msx .game-bar__pause[disabled]{opacity:.45;cursor:default;transform:none;filter:none}
#msx .hud{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:stretch}
#msx .hud__item{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 12px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-1);min-height:58px}
#msx .hud__label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
#msx .hud__value{font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;min-width:2.5ch}
#msx .hearts{display:flex;gap:2px}
#msx .heart{width:26px;height:26px;color:#e2577a;transition:transform .2s ease}
#msx .heart .icon{width:26px;height:26px;stroke:#b3304f;stroke-width:1.6}
#msx .heart.is-lost{color:#efe8f2}
#msx .heart.is-lost .icon{stroke:#cfc3d9}
#msx .heart.is-breaking{animation:heart-break .6s ease-out}
#msx .hud__time{min-width:0}
#msx .timer{display:flex;align-items:center;gap:10px}
#msx .timer__track{flex:1;height:14px;border-radius:999px;background:#efe9f6;overflow:hidden;box-shadow:inset 0 1px 2px rgb(48 32 68 / .15)}
#msx .timer__fill{height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal-500),var(--teal-300));transform-origin:left center}
#msx .timer[data-level="warn"] .timer__fill{background:linear-gradient(90deg,#e6a521,var(--gold-400))}
#msx .timer[data-level="low"] .timer__fill{background:linear-gradient(90deg,#d2492f,#f08a5d)}
#msx .timer__num{display:grid;place-items:center;min-width:44px;height:36px;padding:0 6px;border-radius:12px;background:var(--purple-100);color:var(--purple-700);font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
#msx .timer[data-level="low"] .timer__num{background:var(--coral-100);color:var(--coral-700);animation:tick-pulse 1s ease-in-out infinite}
#msx .stage{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl); min-height:clamp(470px,calc(100svh - 250px),660px); padding:16px 12px 100px;color:#fff;--focus:var(--gold-400); display:flex;flex-direction:column; background: radial-gradient(110% 60% at 85% -5%,rgb(255 207 100 / .32),transparent 55%), radial-gradient(80% 55% at -5% 105%,rgb(110 212 189 / .4),transparent 60%), linear-gradient(180deg,#2f1a63 0%,#5434a0 46%,#3c8f9a 100%); box-shadow:0 4px 0 #1b0f30,var(--shadow-2);}
#msx .stage__rays{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(115deg,rgb(255 255 255 / .05) 0 60px,transparent 60px 150px);mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%)}
#msx .stage__scenery{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px;z-index:-1;pointer-events:none}
#msx .stage__reeds{position:absolute;right:8px;bottom:0;width:90px;height:110px;z-index:-1;pointer-events:none}
#msx .stage__monster{position:absolute;left:clamp(6px,3vw,36px);bottom:8px;width:clamp(74px,15vw,132px);z-index:0;pointer-events:none;transform-origin:50% 100%}
#msx .stage__monster.is-cheer{animation:hop .6s ease-out}
#msx .stage__monster.is-oops{animation:wobble .5s ease-in-out}
#msx .stage[data-phase="ready"] .stage__monster,#msx .stage[data-phase="results"] .stage__monster{display:none}
#msx .stage__ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#msx .stage__ambient span{position:absolute;bottom:-40px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;border:2px solid rgb(255 255 255 / .45);background:radial-gradient(circle at 32% 30%,rgb(255 255 255 / .55),rgb(255 255 255 / .06) 60%);animation:rise var(--d) linear infinite;animation-delay:var(--delay)}
#msx .stage__content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
#msx .stage__banner{position:absolute;top:12px;left:50%;z-index:3;transform:translate(-50%,-140%);display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--gold-400);color:#3a2508;font-weight:800;box-shadow:0 4px 0 var(--gold-600);white-space:nowrap;opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .2s}
#msx .stage__banner.is-shown{transform:translate(-50%,0);opacity:1}
#msx .stage__banner .icon{width:18px;height:18px}
#msx .play-area{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;transition:filter .2s,opacity .2s}
#msx .stage.is-paused .play-area{filter:blur(14px);opacity:.35}
#msx .clue{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;width:100%;max-width:600px;margin:0; padding:12px 16px 12px 12px;border-radius:24px;background:#fff;color:var(--ink); box-shadow:0 5px 0 rgb(27 15 48 / .35),0 18px 30px -16px rgb(0 0 0 / .5);animation:card-in .35s ease-out both;}
#msx .clue__pic{display:grid;place-items:center;width:84px;height:84px;border-radius:22px;font-size:52px;line-height:1;background:radial-gradient(circle at 50% 38%,#fff 0 30%,#fff3d1 70%,#ffe3a0);box-shadow:inset 0 0 0 2px #f4dd9f}
#msx .clue__pic span{transform:translateY(2px)}
#msx .clue__text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
#msx .clue__sentence{font-size:clamp(19px,5vw,27px);font-weight:700;line-height:1.35}
#msx .gap{display:inline-block;width:3.2em;height:.9em;margin:0 .12em;vertical-align:-.08em;border-bottom:4px dashed var(--purple-500);border-radius:2px;background:linear-gradient(transparent 60%,var(--purple-100) 60%)}
#msx .clue__hint{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--gold-100);color:var(--gold-800);font-size:13px;font-weight:800}
#msx .clue__hint .icon{width:16px;height:16px}
#msx .prompt{font-size:18px;font-weight:800;text-shadow:0 2px 0 rgb(27 15 48 / .45);display:flex;align-items:center;gap:8px}
#msx .bubbles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2.4vw,30px);width:100%;max-width:660px;padding:10px 0 4px}
#msx .bubble-slot{position:relative;display:grid;place-items:center;animation:bubble-in .45s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i) * 70ms)}
#msx .bubble-slot:nth-child(2){transform:translateY(-14px)}
#msx .bubble-float{position:relative;display:grid;place-items:center;width:100%;max-width:178px;animation:float 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * -1.4s)}
#msx .bubble{position:relative;display:grid;place-items:center;width:100%;max-width:178px;aspect-ratio:1;padding:0 6px;border-radius:50%; border:3px solid rgb(255 255 255 / .92);color:var(--ink);font-weight:800;font-size:clamp(18px,5vw,30px);letter-spacing:.01em;line-height:1.1; background:radial-gradient(circle at 32% 26%,#fff 0 14%,rgb(255 255 255 / .96) 26%,#f1eaff 56%,#c9f1e4 82%,#ffd98a 100%); box-shadow:inset -10px -12px 20px rgb(112 69 186 / .28),inset 8px 10px 16px rgb(255 255 255 / .9),0 14px 26px -10px rgb(10 4 25 / .6); transition:transform .15s ease,box-shadow .15s ease,opacity .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#msx .bubble::before{content:"";position:absolute;top:13%;left:20%;width:26%;height:15%;border-radius:50%;background:rgb(255 255 255 / .95);transform:rotate(-30deg);pointer-events:none}
#msx .bubble--long{font-size:clamp(15px,4.1vw,25px)}
#msx .bubble--xlong{font-size:clamp(13px,3.6vw,22px)}
#msx .bubble__word{position:relative;overflow-wrap:anywhere}
#msx .bubble__key{position:absolute;top:-6px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--purple-600);color:#fff;font-size:14px;font-weight:800;box-shadow:0 2px 0 #4d288c}
#msx .bubble:hover{transform:scale(1.05)}
#msx .bubble:active,#msx .bubble.is-pressed{transform:scale(.93)}
#msx .bubble:focus-visible{outline:4px solid var(--gold-400);outline-offset:5px}
#msx .bubble[aria-disabled="true"]{cursor:default}
#msx .bubble[aria-disabled="true"]:hover{transform:none}
#msx .bubble-slot.is-dim .bubble{opacity:.4;transform:scale(.92)}
#msx .bubble-slot.is-wrong .bubble{background:radial-gradient(circle at 32% 26%,#fff 0 14%,#fff4f0 40%,#ffd8cb 100%);border-color:#ffb9a3;animation:shake .45s ease-in-out}
#msx .bubble-slot.is-answer .bubble{background:radial-gradient(circle at 32% 26%,#fff 0 14%,#effcf5 40%,#b8ecd3 100%);border-color:#fff;box-shadow:0 0 0 5px var(--good-500),0 0 32px 6px rgb(130 240 190 / .55);transform:scale(1.06)}
#msx .bubble-slot.is-correct .bubble{animation:pop .42s ease-out forwards;pointer-events:none}
#msx .bubble__badge{position:absolute;right:4%;top:6%;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;border:3px solid #fff;animation:badge-in .3s cubic-bezier(.2,1.5,.4,1) both}
#msx .bubble__badge .icon{width:18px;height:18px;stroke-width:3}
#msx .bubble__badge--good{background:var(--good-500)}
#msx .bubble__badge--try{background:#d65a3e}
#msx .bubble__result{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#msx .bubble__result span{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--good-100);color:var(--good-700);border:3px solid #fff;font-weight:800;font-size:clamp(17px,4.4vw,26px);box-shadow:0 0 0 4px var(--good-500),0 10px 24px -8px rgb(0 0 0 / .5);animation:result-in .35s .15s cubic-bezier(.2,1.5,.4,1) both;white-space:nowrap}
#msx .bubble__result .icon{width:20px;height:20px;stroke-width:3}
#msx .points-float{position:absolute;top:-6px;left:50%;z-index:3;transform:translateX(-50%);font-size:24px;font-weight:800;color:var(--gold-400);text-shadow:0 2px 0 #4a2f08,0 0 12px rgb(0 0 0 / .3);animation:float-up 1s ease-out forwards;pointer-events:none;white-space:nowrap}
#msx .spark{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--c);pointer-events:none;animation:spark .6s ease-out forwards}
#msx .feedback{min-height:68px;display:flex;align-items:center;justify-content:center;width:100%;max-width:600px}
#msx .feedback__card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;padding:10px 12px 10px 16px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 4px 0 rgb(27 15 48 / .35);animation:card-in .25s ease-out both}
#msx .feedback__card p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:18px;line-height:1.3}
#msx .feedback__card strong{font-size:20px}
#msx .feedback__card--good strong{color:var(--good-700)}
#msx .feedback__card--try strong{color:var(--coral-700)}
#msx .feedback__word{padding:0 8px;border-radius:8px;background:var(--good-100);color:var(--good-700);font-size:21px;letter-spacing:.03em}
#msx .feedback__points{padding:2px 10px;border-radius:999px;background:var(--gold-400);color:#3a2508;font-weight:800}
#msx .feedback__extra{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;background:var(--purple-100);color:var(--purple-700);font-weight:800;font-size:15px}
#msx .feedback__extra .icon{width:16px;height:16px}
#msx .panel{width:100%;max-width:560px;padding:22px 18px 22px;border-radius:var(--r-xl);background:#fff;color:var(--ink);text-align:center;box-shadow:0 5px 0 rgb(27 15 48 / .35),0 24px 40px -18px rgb(0 0 0 / .55);animation:card-in .35s ease-out both;--focus:var(--teal-700)}
#msx .panel__monster{width:112px;margin:-6px auto 6px;animation:idle-bob 4s ease-in-out infinite}
#msx .panel h2{font-size:clamp(26px,6vw,34px)}
#msx .panel__sub{margin-top:4px;color:var(--ink-soft);font-size:16px}
#msx .steps{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px;text-align:left}
#msx .steps li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--purple-100);font-weight:700;font-size:17px}
#msx .steps__num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--purple-600);color:#fff;font-weight:800;flex:none}
#msx .rules{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:0 0 16px;color:var(--ink-soft);font-size:15px}
#msx .rules span{display:inline-flex;align-items:center;gap:5px}
#msx .rules .icon{width:18px;height:18px;color:var(--purple-600)}
#msx .rules .icon--heart{color:#e2577a}
#msx .panel .btn--xl{width:100%}
#msx .keys-hint{margin-top:12px;font-size:14px;color:var(--ink-soft)}
#msx kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:#f3eef9;border:1px solid #d8cde6;box-shadow:0 2px 0 #d8cde6;font:800 13px var(--font);color:var(--ink)}
#msx .score-big{display:inline-flex;align-items:center;gap:10px;margin:12px 0 4px;font-size:clamp(48px,13vw,68px);font-weight:800;line-height:1;color:var(--purple-700);font-variant-numeric:tabular-nums}
#msx .score-big .icon{width:44px;height:44px;color:var(--gold-400);stroke:#c48f2c;stroke-width:1.2}
#msx .best-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--gold-400);color:#3a2508;font-weight:800;font-size:14px;animation:badge-in .4s .2s cubic-bezier(.2,1.5,.4,1) both}
#msx .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0}
#msx .stats div{padding:10px 6px;border-radius:16px;background:#f7f3fb}
#msx .stats dt{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#msx .stats dd{margin:0;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
#msx .rank-line{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;padding:10px 12px;border-radius:16px;background:var(--teal-100);color:var(--teal-800);font-weight:800}
#msx .rank-line .icon{color:var(--teal-700)}
#msx .practise{margin:16px 0 0;text-align:left}
#msx .practise h3{font-size:16px;margin-bottom:8px}
#msx .practise ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#msx .practise li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--gold-100);border:1px solid #f1d58f;font-weight:800;font-size:17px}
#msx .practise li span[aria-hidden]{font-size:20px}
#msx .panel__actions{display:grid;gap:10px;margin-top:18px}
#msx .art{display:block}
#msx .art text{font-family:var(--font)}
#msx .art-float{animation:float 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#msx .art-float--slow{animation-duration:7s;animation-delay:-2s}
#msx .art-float--late{animation-delay:-3.5s}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheet-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes idle-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-900px)}}
@keyframes bubble-in{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes pop{0%{transform:scale(1);opacity:1}35%{transform:scale(1.18);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes spark{from{transform:rotate(var(--a)) translateX(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}}
@keyframes float-up{from{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-56px)}}
@keyframes result-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes badge-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-3deg)}40%{transform:translateX(8px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-22px) scale(1.04,.96)}60%{transform:translateY(0) scale(1.05,.95)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes heart-break{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes tick-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
html[data-motion="reduced"] #msx *,html[data-motion="reduced"] #msx *::before,html[data-motion="reduced"] #msx *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-motion="reduced"] #msx .stage__ambient,html[data-motion="reduced"] #msx .spark,html[data-motion="reduced"] #msx .points-float{display:none}
html[data-motion="reduced"] #msx .bubble-slot.is-correct .bubble{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){
html:not([data-motion]) #msx *,html:not([data-motion]) #msx *::before,html:not([data-motion]) #msx *::after{animation:none!important;transition:none!important}
}
@media (hover:none),(pointer:coarse){
#msx .bubble__key,#msx .keys-hint{display:none}
}
@media (min-width:640px){
#msx{--gutter:24px}
#msx .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#msx .game-card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
#msx .game-card__art{aspect-ratio:16/10;min-height:0}
#msx .game-card__body{padding:16px 16px 18px}
#msx .feature{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
#msx .feature__art{aspect-ratio:auto;min-height:100%}
#msx .feature__body{padding:26px 26px 28px;justify-content:center}
#msx .feature .btn{align-self:flex-start}
#msx .welcome{grid-template-columns:96px minmax(0,1fr);gap:16px 20px}
#msx .welcome__monster{width:96px}
#msx .stage{padding:22px 24px 110px}
#msx .clue{padding:14px 22px 14px 14px;gap:18px}
#msx .clue__pic{width:104px;height:104px;font-size:64px;border-radius:26px}
#msx .hud{gap:12px}
#msx .hud__item{padding:8px 16px}
#msx .panel{padding:28px 32px}
#msx .panel__actions{grid-template-columns:1fr 1fr}
#msx .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
#msx .steps li{flex-direction:column;text-align:center;font-size:16px;gap:8px}
#msx .stage__reeds{width:120px;height:140px}
}
@media (min-width:900px){
#msx .welcome{grid-template-columns:104px minmax(0,1fr) minmax(0,400px);grid-template-areas:"mon text focus";margin:8px 0 26px}
#msx .welcome__monster{width:104px}
#msx .feature__art{min-height:320px}
#msx .games-layout{gap:24px}
#msx .lb-list{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:12px}
#msx .lb-row{min-height:48px;padding-top:4px;padding-bottom:4px}
#msx .bubble-page{gap:12px}
#msx .stage{min-height:clamp(460px,calc(100svh - 296px),640px);padding-bottom:44px}
#msx .game-bar__title{font-size:24px}
}
@media (min-width:1100px){
#msx .welcome{grid-template-columns:104px minmax(0,1fr) minmax(0,440px)}
#msx .games-layout{grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr)}
#msx .feature{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
#msx .leaderboard{grid-column:2;grid-row:1}
#msx .more-games{grid-column:1 / -1;grid-row:2}
#msx .feature__art{min-height:340px}
#msx .lb-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;padding:8px 10px}
#msx .stage{padding:28px 32px 52px}
#msx .bubbles{max-width:720px}
#msx .bubble-float,#msx .bubble{max-width:204px}
#msx .bubble{font-size:32px}
#msx .bubble--long{font-size:28px}
#msx .bubble--xlong{font-size:24px}
#msx .bubble-slot:nth-child(2){transform:translateY(-22px)}
}
@media (max-width:370px){
#msx{--gutter:12px}
#msx .hud__item{padding:6px 9px}
#msx .heart,#msx .heart .icon{width:22px;height:22px}
#msx .game-card{grid-template-columns:96px minmax(0,1fr)}
}
@media (max-height:520px) and (orientation:landscape){
#msx .stage{min-height:0;padding-bottom:70px}
#msx .clue__pic{width:64px;height:64px;font-size:40px}
#msx .bubble{max-width:120px}
#msx .stage__monster{width:64px}
}

/* ---- Live-app adaptations ---- */
/* The pupil's own avatar from monster-avatar.js stands in for the benchmark monster. */
#msx .welcome__monster svg,#msx .panel__monster svg,#msx .stage__monster svg{width:100%;height:auto}
#msx .btn:disabled{opacity:.5;transform:none;filter:none;box-shadow:0 5px 0 var(--btn-edge)}
#msx .btn .icon{flex:none}
#msx .games-layout--solo{grid-template-columns:1fr}
#msx .games-layout--solo .more-games{grid-row:auto}
#msx .lb-note{margin:12px 18px 0;padding:10px 12px;border-radius:14px;background:var(--purple-100);color:var(--purple-700);font-weight:700;font-size:15px}
#msx .lb-note:last-child{margin-bottom:16px}
#msx .lb-row--outside{margin-top:6px;border-top:2px dashed var(--line);border-radius:0 0 16px 16px}
#msx .hub-back{margin-top:24px;display:flex;justify-content:center}
#msx .hud__value.is-bump{animation:bump .45s ease-out}
#msx .game-bar>span:last-child{justify-self:end}
#msx .link-back .icon{width:20px;height:20px}
#msx .clue{grid-template-columns:auto minmax(0,1fr)}
#msx .clue:not(:has(.clue__img)){grid-template-columns:1fr}
#msx .clue__img{width:84px;height:84px;object-fit:cover;border-radius:18px;background:#f4f0f8}
#msx .feedback__card--try{animation:card-in .25s ease-out both,fade-late 4s ease-in forwards}
#msx .best-badge[hidden]{display:none}
#msx .best-badge{margin:6px 0 0}
#msx .practise li .icon{width:18px;height:18px;color:var(--good-500)}
#msx .panel__actions .btn{width:100%}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.3);color:var(--good-700)}100%{transform:scale(1)}}
@keyframes fade-late{0%,75%{opacity:1}100%{opacity:.35}}
html[data-motion="reduced"] #msx .hud__value.is-bump{animation:none}

/* The classic page wrapper adds its own padding; give the redesign the full width. */
body[data-pupil-design] .ms-page:has(> #msx),body[data-pupil-design] .hub-page:has(> #msx){padding:0;background:none;border:0;box-shadow:none;max-width:none}
@media (max-width:899px){
  /* In a round, keep the header compact so the stage has room. */
  body[data-pupil-view="game"]:has(#msx) #spelling-nav{display:none}
}

/* ---- Word Builder, Pick the Pattern, Spelling Check (Phase 4) ---- */
#msx .play-page{--theme:#fff1c9;--theme-line:#f1d991;--theme-ink:#6b4410;max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
#msx .play-page--pattern{--theme:#efe6fd;--theme-line:#dacbf3;--theme-ink:#4b2d8f}
#msx .play-page--check{--theme:#dcf4ec;--theme-line:#b9e4d4;--theme-ink:#145c52}
#msx .play-page .game-bar__title{justify-self:center;font-weight:800;font-size:18px}
#msx .game-bar__count{justify-self:end;padding:4px 12px;border-radius:999px;background:var(--theme);color:var(--theme-ink);font-weight:800;font-variant-numeric:tabular-nums}
#msx .progress{height:10px;border-radius:999px;background:#ece5f4;overflow:hidden}
#msx .progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal-500),var(--teal-300));transition:width .4s ease}
#msx .task{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--theme);border:2px solid var(--theme-line);box-shadow:var(--shadow-1)}
#msx .task__art{height:96px;overflow:hidden;opacity:.9}
#msx .task__art .art{width:100%;height:100%}
#msx .task__card{position:relative;margin:-28px 10px 10px;padding:20px 16px 22px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-1);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
#msx .task__card h1{font-size:clamp(24px,6vw,34px)}
#msx .task__img{width:100%;max-width:420px;max-height:240px;object-fit:contain;border-radius:18px;background:#f6f2fb}
#msx .task__sentence{font-size:clamp(18px,4.6vw,24px);font-weight:700;line-height:1.4;max-width:30ch}
#msx .task__listen{--btn-ink:var(--purple-700)}
#msx .task__audio{min-height:1.4em;font-size:14px;color:var(--ink-soft)}
#msx .task__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
#msx .task__actions .btn--xl{flex:1 1 220px;max-width:360px}
#msx .task__feedback{width:100%;max-width:520px}
#msx .built{min-height:68px;min-width:min(100%,280px);padding:10px 18px;border-radius:18px;border:3px dashed #e1c06a;background:#fffaf0;font-size:clamp(30px,8vw,44px);font-weight:800;letter-spacing:.08em;color:#4a3110;display:grid;place-items:center}
#msx .built:empty::before{content:"Tap the letters";font-size:16px;letter-spacing:0;font-weight:700;color:#a58a4a}
#msx .tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:520px}
#msx .tile{display:grid;place-items:center;min-width:56px;min-height:60px;padding:4px 12px;border-radius:14px;background:#ffd56f;border:2px solid #b07d22;box-shadow:0 5px 0 #c48f2c;color:#4a3110;font-size:28px;font-weight:800;transition:transform .12s,box-shadow .12s}
#msx .tile:hover{transform:translateY(-2px)}
#msx .tile:active{transform:translateY(4px);box-shadow:0 1px 0 #c48f2c}
#msx .tile:disabled{opacity:.3;box-shadow:none;transform:translateY(5px)}
#msx .choices{display:grid;gap:12px;width:100%;max-width:520px}
#msx .choice{position:relative;min-height:64px;padding:12px 18px;border-radius:18px;background:#fff;border:3px solid var(--purple-200);box-shadow:0 5px 0 var(--purple-200);font-size:clamp(22px,6vw,30px);font-weight:800;color:var(--purple-700);letter-spacing:.02em;transition:transform .12s,box-shadow .12s,border-color .12s}
#msx .choice:hover{border-color:var(--purple-500);transform:translateY(-2px)}
#msx .choice:active{transform:translateY(4px);box-shadow:0 1px 0 var(--purple-200)}
#msx .choice__key{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--purple-100);color:var(--purple-700);font-size:14px}
#msx .task__form{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:560px}
#msx .task__label{font-weight:800;color:var(--ink-soft)}
#msx .task__input{width:100%;min-height:62px;padding:10px 16px;border-radius:18px;border:3px solid var(--purple-200);background:#fff;font:800 clamp(24px,6vw,32px) var(--font);text-align:center;color:var(--ink);letter-spacing:.04em}
#msx .task__input:focus{outline:none;border-color:var(--purple-500);box-shadow:0 0 0 4px var(--purple-100)}
#msx .task__form .ms-keyboard{width:100%}
#msx .task--done{padding:28px 12px}
#msx .task--done .panel{margin:0 auto}
#msx .score-big small{font-size:.45em;color:var(--ink-soft);margin-left:4px}
@media (hover:none),(pointer:coarse){#msx :is(.choice__key,.bubble__key,.keys-hint){display:none}}
@media (min-width:640px){
  #msx .task__art{height:120px}
  #msx .task__card{margin:-36px 24px 24px;padding:26px 28px 28px}
  #msx .choices{grid-template-columns:repeat(3,minmax(0,1fr))}
  #msx .choice__key{top:10px;left:50%;transform:translateX(-50%)}
  #msx .choices .choice{padding-top:30px}
}
#msx .link-back{white-space:nowrap}
@media (max-width:479px){#msx .play-page .game-bar__title{font-size:16px}#msx .play-page .link-back{font-size:15px;padding-right:6px}}
#msx .task__form .ms-keyboard{order:2}
#msx .task__form .task__actions{order:3}

/* ---- Pupil home (Phase 2) ---- */
#msx .hero{margin-bottom:18px}
#msx .hero h2{font-size:clamp(28px,6.4vw,40px)}
#msx .hero__note{padding:8px 12px;border-radius:12px;background:rgb(255 255 255 / .1);color:#f1e9ff;font-weight:700}
#msx .hero .btn{align-self:stretch}
#msx .steps--home{margin:0 0 20px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#msx .steps--home li{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:10px 6px;font-size:14px;background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-1)}
#msx .home-lower{display:grid;gap:16px}
#msx .home-quick{gap:14px}
#msx .home-quick .game-card__art{min-height:120px}
#msx .home-quick__monster{display:grid;place-items:center;padding:10px;background:linear-gradient(160deg,#e6f8f1,#b9e6d6)}
#msx .home-quick__monster svg{width:min(100px,90%);height:auto}
#msx .confidence{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px;border-radius:var(--r-xl);background:linear-gradient(135deg,#f2eaff,#e2f6ee);border:2px solid var(--line);box-shadow:var(--shadow-1)}
#msx .confidence h2{font-size:22px}
#msx .confidence p:not(.eyebrow){color:var(--ink-soft)}
#msx .confidence .eyebrow .icon{width:16px;height:16px}
/* Panels the journey adds after rendering (progress check, recaps, revisit, extras). */
#msx .ms-intelligence,#msx .ms-extras details{margin-top:16px;padding:16px 18px;border-radius:var(--r-lg);background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-1)}
#msx .ms-intelligence h2{font-size:20px;margin:0 0 4px}
#msx .ms-intelligence p{color:var(--ink-soft);margin-bottom:10px}
#msx .original-actions{display:flex;flex-wrap:wrap;gap:10px}
#msx .ms-revisit-actions:not(:empty){margin-top:16px}
#msx .ms-extras{margin-top:8px}
#msx .ms-extras summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
#msx .ms-extras details p{margin:8px 0 0}
#msx .ms-extras label{display:grid;gap:6px;margin:10px 0;font-weight:700}
#msx .ms-extras select{min-height:44px;border-radius:12px;border:2px solid var(--line);padding:6px 10px;font:inherit}
#msx :is(.ms-intelligence,.ms-extras,.ms-revisit-actions) button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:14px;background:var(--purple-600);color:#fff;box-shadow:0 4px 0 #4d288c;font-weight:800;font-size:16px;text-align:left}
#msx :is(.ms-intelligence,.ms-extras,.ms-revisit-actions) button.secondary{background:#fff;color:var(--purple-700);border:2px solid #e3d8ef;box-shadow:0 4px 0 #ddd2ea}
#msx :is(.ms-intelligence,.ms-extras,.ms-revisit-actions) button:active{transform:translateY(3px);box-shadow:none}
@media (min-width:640px){
  #msx .home-quick{grid-template-columns:1fr 1fr}
  #msx .steps--home li{flex-direction:row;font-size:16px;gap:10px}
}
@media (min-width:900px){
  #msx .home-lower{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch}
  #msx .hero .btn{align-self:flex-start}
}
/* The approved Build 64 clubhouse illustration stays as the home hero scene. */
#msx .hero__art{position:relative;background:#e9dcf7 url("/assets/clubhouse.png") 30% 40%/cover no-repeat}
#msx .hero__monster{position:absolute;right:6%;bottom:4%;width:clamp(96px,26%,150px)}
#msx .hero__monster svg{width:100%;height:auto}

/* ---- Lessons, checks and guided practice (Phase 5) ---- */
/* The journey's inner markup keeps its classic class names; restyle them here. */
#msx .task__card.ms-sheet{max-width:none;border:0;overflow:visible}
/* Reading screens get a calm themed band instead of game artwork. */
#msx .sheet-page .task__art{height:64px;background:radial-gradient(circle at 10% 45%,rgb(255 255 255 / .55) 0 12px,transparent 13px),radial-gradient(circle at 22% 20%,rgb(255 255 255 / .45) 0 6px,transparent 7px),radial-gradient(circle at 90% 35%,rgb(255 255 255 / .5) 0 20px,transparent 21px),linear-gradient(135deg,var(--theme),var(--theme-line))}
#msx .sheet-page .game-bar__count:empty{visibility:hidden}
#msx .sheet-page .game-bar__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
#msx .stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#msx .stepper__step{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:6px 8px;border-radius:14px;background:#fff;border:2px solid var(--line);color:var(--ink-soft);font-weight:800;font-size:14px;line-height:1.2;text-align:center}
#msx .stepper__num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--purple-100);color:var(--purple-700);font-size:14px;flex:none}
#msx .stepper__num .icon{width:16px;height:16px}
#msx .stepper__step.is-current{border-color:var(--purple-500);color:var(--purple-700);box-shadow:0 3px 0 var(--purple-200)}
#msx .stepper__step.is-current .stepper__num{background:var(--purple-600);color:#fff}
#msx .stepper__step.is-done .stepper__num{background:var(--teal-700);color:#fff}
#msx .ms-sheet>progress{display:block;width:100%;max-width:520px;height:10px;margin:0 auto;border:0;border-radius:999px;background:#ece5f4;overflow:hidden;-webkit-appearance:none;appearance:none}
#msx .ms-sheet>progress::-webkit-progress-bar{background:#ece5f4;border-radius:999px}
#msx .ms-sheet>progress::-webkit-progress-value{background:linear-gradient(90deg,var(--teal-500),var(--teal-300));border-radius:999px}
#msx .ms-sheet>progress::-moz-progress-bar{background:linear-gradient(90deg,var(--teal-500),var(--teal-300));border-radius:999px}
#msx :is(.ms-practice-body,.ms-lesson-body){display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:640px;margin:0;padding:0}
#msx .ms-sheet h1{margin:0;font-size:clamp(24px,6vw,34px)!important;line-height:1.15;color:var(--ink)}
#msx .ms-sheet h2{margin:8px 0 0;font-size:20px}
#msx .ms-eyebrow{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700)}
#msx .ms-objective{margin:0;font-size:18px;font-weight:800;color:var(--purple-700)}
#msx .ms-explanation{margin:0;font-size:18px;line-height:1.5;max-width:36ch}
#msx .ms-worked-example{display:grid;gap:8px;width:100%;max-width:520px;padding:14px 16px;border-radius:var(--r-lg);background:var(--purple-100);border:2px dashed var(--purple-200)}
#msx .ms-worked-example p{margin:0;font-size:20px;font-weight:800;color:var(--purple-700);letter-spacing:.02em}
#msx .ms-sheet details{width:100%;max-width:520px;text-align:left;padding:4px 14px;border-radius:var(--r-md);background:#faf7fd;border:2px solid var(--line)}
#msx .ms-sheet summary{min-height:44px;display:flex;align-items:center;gap:8px;font-weight:800;color:var(--purple-700);cursor:pointer}
#msx .ms-sheet details p{margin:0 0 10px}
#msx .ms-lesson-bottom{display:flex;flex-wrap:wrap-reverse;justify-content:center;gap:10px;width:100%;margin-top:6px}
#msx .gap-sentence{margin:0;font-size:clamp(18px,4.6vw,24px);font-weight:700;line-height:1.4;max-width:30ch}
#msx .original-lesson-picture{width:100%;max-width:420px;height:auto;max-height:240px;object-fit:contain;border-radius:18px;background:#f6f2fb}
#msx .original-picture-pending{padding:16px;border-radius:16px;background:#f6f2fb;color:var(--ink-soft);font-weight:700}
#msx .ms-audio-status{min-height:1.4em;margin:-6px 0 0;font-size:14px;color:var(--ink-soft)}
#msx .ms-sheet form{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:560px;margin:0}
#msx .ms-answer-label{font-weight:800;color:var(--ink-soft)}
#msx .ms-sheet input[data-ms-input]{width:100%;min-height:62px;margin:0;padding:10px 16px;border-radius:18px;border:3px solid var(--purple-200);background:#fff;font:800 clamp(24px,6vw,32px) var(--font);text-align:center;color:var(--ink);letter-spacing:.04em;box-shadow:none}
#msx .ms-sheet input[data-ms-input][data-ms-sentence]{font-size:clamp(18px,4.6vw,22px);letter-spacing:0}
#msx .ms-sheet input[data-ms-input]:focus{outline:none;border-color:var(--purple-500);box-shadow:0 0 0 4px var(--purple-100)}
#msx .ms-sheet form .ms-keyboard{order:2;width:100%}
#msx .ms-sheet form .ms-answer-actions{order:3}
#msx .ms-answer-actions{display:flex;justify-content:center;width:100%;margin:0}
#msx #original-feedback{min-height:1.5em;margin:0;font-size:18px;font-weight:800;color:var(--purple-700)}
#msx #original-feedback.ms-feedback{color:var(--coral-700)}
#msx #original-feedback.ms-feedback.correct{color:var(--good-700)}
#msx #original-feedback:empty{min-height:0}
#msx #original-order{margin:0;font-size:20px;font-weight:800;color:var(--purple-700)}
#msx .ms-check-help{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
#msx .ms-meaning{margin:0!important;padding:4px 14px!important}
#msx .ms-meaning summary,#msx .ms-meaning p{font-size:15px!important}
#msx details.ms-adult-help{width:100%;max-width:520px;margin:0!important;padding:6px 16px 12px!important;border-radius:var(--r-lg);background:var(--gold-100);border:2px solid #f1d991;text-align:left}
#msx .ms-adult-help summary{color:var(--gold-800)}
#msx .ms-adult-help ol{margin:4px 0 12px;padding-left:22px;display:grid;gap:6px}
#msx .ms-adult-help .small{font-size:14px;color:var(--ink-soft)}
#msx .ms-adult-cue{margin:0;width:100%;max-width:520px;padding:12px 16px;border-radius:var(--r-md);background:var(--gold-100);border:2px solid #f1d991;color:var(--gold-800);font-weight:700;text-align:left}
#msx .ms-model-word{margin:0;font-size:clamp(34px,9vw,48px);font-weight:800;letter-spacing:.06em;color:var(--purple-700)}
#msx .ms-picture-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:520px}
#msx .ms-sound-counters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
#msx .ms-sound-counters span{display:grid;place-items:center;min-width:52px;height:52px;padding:0 8px;border-radius:999px;background:#fff;border:3px solid var(--purple-200);color:var(--purple-200);font-size:20px;font-weight:800;transition:background .2s,color .2s,border-color .2s}
#msx .ms-sound-counters span.heard{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
#msx .original-built{min-height:68px;min-width:min(100%,280px);padding:10px 18px;border-radius:18px;border:3px dashed #e1c06a;background:#fffaf0;font-size:clamp(30px,8vw,44px);font-weight:800;letter-spacing:.08em;color:#4a3110;display:grid;place-items:center}
#msx .original-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:520px}

/* Buttons the journey writes as plain <button>: gold for the main step, light for .secondary, text for .ms-quiet. */
#msx :is(.ms-sheet,.finish__actions) button:where(:not(.ms-keyboard *)){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;border-radius:16px;background:var(--purple-600);color:#fff;box-shadow:0 5px 0 #4d288c;font:800 17px/1.2 var(--font);text-align:center;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s}
#msx :is(.ms-sheet,.finish__actions) button:where(:not(.ms-keyboard *)):hover{filter:brightness(1.06)}
#msx :is(.ms-sheet,.finish__actions) button:where(:not(.ms-keyboard *)):active{transform:translateY(4px);box-shadow:0 1px 0 #4d288c}
#msx :is(.ms-sheet,.finish__actions) button .ms-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#msx :is(.ms-answer-actions,.ms-lesson-bottom)>button:not(.ms-quiet),#msx .ms-sheet button:is([data-original-guided-start],[data-foundation-continue]),#msx .finish__actions>button:first-child:not(.secondary),#msx .ms-basic>button:not(.secondary):not(.ms-quiet){min-height:62px;padding:14px 30px;border-radius:20px;background:var(--gold-400);color:#3a2508;box-shadow:0 5px 0 var(--gold-600);font-size:20px!important;flex:1 1 220px;max-width:360px}
#msx :is(.ms-sheet,.finish__actions) button.secondary,#msx .ms-lesson-bottom>.ms-quiet{background:#fff;color:#4b2d72;border:2px solid #e3d8ef;box-shadow:0 5px 0 #ddd2ea;font-size:16px!important}
#msx .ms-sheet button.ms-quiet:not(.ms-lesson-bottom>*),#msx .finish__actions button.ms-quiet{min-height:44px;padding:8px 14px;background:none;box-shadow:none;color:var(--purple-700);text-decoration:underline;text-underline-offset:3px;font-size:16px!important}
#msx .ms-sheet button:where(:not(.ms-keyboard *)):disabled{opacity:.5;transform:none;filter:none;cursor:default}
#msx .ms-sheet .ms-listen{min-height:48px;padding:10px 18px;background:#fff;color:var(--purple-700);border:2px solid #e3d8ef;box-shadow:0 4px 0 #ddd2ea;font-size:16px}
#msx .original-choices{display:grid;gap:12px;width:100%;max-width:560px}
#msx .original-choices button{min-height:64px;padding:12px 18px;border-radius:18px;background:#fff;color:var(--purple-700);border:3px solid var(--purple-200);box-shadow:0 5px 0 var(--purple-200);font-size:clamp(18px,4.6vw,22px)!important;line-height:1.25}
#msx .original-choices button:hover{border-color:var(--purple-500)}
#msx .original-tiles button{min-width:56px;min-height:60px;padding:4px 12px;border-radius:14px;background:#ffd56f;color:#4a3110;border:2px solid #b07d22;box-shadow:0 5px 0 #c48f2c;font-size:28px}
#msx .original-tiles button:disabled{opacity:.3;box-shadow:none;transform:translateY(5px)}
#msx .ms-picture-choices button{display:block;padding:8px;min-height:120px;background:#fff;border:3px solid var(--purple-200);box-shadow:0 5px 0 var(--purple-200)}
#msx .ms-picture-choices img{display:block;width:100%;height:auto;max-height:180px;object-fit:contain;border-radius:12px}
#msx .ms-sheet>[data-original-help]{margin:0}
#msx .ms-basic{align-items:center}
#msx :is(.ms-practice-body,.ms-lesson-body,.ms-basic)>button{flex:none!important}
#msx .ms-basic>p{margin:0;color:var(--ink-soft);font-size:17px}
#msx .ms-basic>button.secondary{flex:0 1 auto}
#msx .ms-basic .ms-intelligence{width:100%;text-align:left}
/* Finish screens reuse the Bubble Spell results stage. */
#msx .ms-finish-wrap{max-width:880px;margin:0 auto}
#msx .ms-finish-wrap .panel h1{margin:0;font-size:clamp(26px,6vw,34px)}
#msx .ms-finish-wrap .eyebrow{justify-content:center;margin-bottom:4px}
#msx .ms-finish-wrap .eyebrow .icon{width:16px;height:16px}
#msx .finish__actions{display:grid;gap:10px;max-width:420px;margin:18px auto 0}
#msx .finish__actions>button{max-width:none!important;width:100%}
#msx .finish__actions p{margin:4px 0 0;color:var(--ink-soft)}
#msx .finish__actions details{text-align:left;padding:4px 14px;border-radius:var(--r-md);background:#faf7fd;border:2px solid var(--line)}
#msx .finish__actions summary{min-height:44px;display:flex;align-items:center;font-weight:800;color:var(--purple-700);cursor:pointer}
@media (min-width:640px){
  #msx .stepper__step{font-size:15px}
  #msx .original-choices{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:479px){
  #msx .stepper__step{flex-direction:column;gap:2px;font-size:12px;padding:6px 4px}
}
html[data-motion="reduced"] #msx .original-tiles button:disabled{transform:none}

/* ---- My Monster (Phase 6): restyles monster-maker.html's own markup, ids untouched ---- */
#msx.maker{max-width:1180px;margin:0 auto;padding:20px 16px 40px;background:none}
#msx.maker .maker-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 18px}
#msx.maker .maker-heading .eyebrow{margin:0}
#msx.maker .maker-heading h1{margin:2px 0 4px;font-size:clamp(30px,7vw,44px);line-height:1.05;color:var(--ink)}
#msx.maker .maker-heading p:not(.eyebrow){margin:0;color:var(--ink-soft);font-size:17px}
#msx.maker .maker-heading .button{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border-radius:14px;background:#fff;color:#4b2d72;border:2px solid #e3d8ef;box-shadow:0 4px 0 #ddd2ea;font-weight:800;text-decoration:none}
#msx.maker .maker-layout{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
#msx.maker :is(.monster-column,.wardrobe){background:#fff;border:2px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-1)}
#msx.maker .monster-column{padding:10px}
#msx.maker .monster-stage{border-radius:var(--r-lg);min-height:300px;height:auto;box-shadow:inset 0 0 0 2px rgb(255 255 255 / .6)}
#msx.maker #monster-vector{max-width:min(240px,62%)}
#msx.maker .equipped-summary{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgb(255 255 255 / .92);color:var(--purple-700);font-size:14px;font-weight:800;box-shadow:0 3px 0 rgb(48 32 68 / .12)}
#msx.maker .equipped-summary::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold-400);box-shadow:0 0 0 2px #fff}
#msx.maker .maker-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin:12px 0 0}
#msx.maker .maker-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 14px;border-radius:18px;font:800 18px/1.15 var(--font);text-align:center;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s}
#msx.maker #save-monster{background:var(--gold-400);color:#3a2508;box-shadow:0 5px 0 var(--gold-600)}
#msx.maker #reset-monster{background:#fff;color:#4b2d72;border:2px solid #e3d8ef;box-shadow:0 5px 0 #ddd2ea;font-size:16px}
#msx.maker .maker-actions button:hover{filter:brightness(1.05)}
#msx.maker .maker-actions button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-600)}
#msx.maker .maker-actions button:disabled{opacity:.55;transform:none;filter:none;cursor:default}
#msx.maker .save-status{margin:10px 4px 4px;min-height:1.4em;color:var(--ink-soft);font-size:15px;font-weight:700;text-align:center}
#msx.maker .wardrobe{padding:18px 14px 16px}
#msx.maker .wardrobe-intro h2{margin:2px 0 4px;font-size:clamp(22px,5vw,28px)}
#msx.maker .wardrobe-intro p:not(.eyebrow){margin:0 0 12px;color:var(--ink-soft);font-size:15px}
#msx.maker .category-tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0 -14px 12px;padding:4px 14px 10px;scrollbar-width:thin;scroll-snap-type:x proximity}
#msx.maker .category-tabs button{flex:none;min-height:46px;padding:8px 16px;border-radius:999px;background:var(--purple-100);color:var(--purple-700);border:2px solid transparent;font:800 15px/1 var(--font);white-space:nowrap;cursor:pointer;scroll-snap-align:start}
#msx.maker .category-tabs button:hover{border-color:var(--purple-200)}
#msx.maker .category-tabs button[aria-selected="true"]{background:var(--purple-600);color:#fff;box-shadow:0 4px 0 #4d288c}
#msx.maker .item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#msx.maker .item-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:0;padding:12px 8px 12px;border-radius:var(--r-md);background:#fff;border:3px solid var(--purple-200);box-shadow:0 5px 0 var(--purple-200);color:var(--ink);text-align:center;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
#msx.maker .item-card:hover{border-color:var(--purple-500);transform:translateY(-2px)}
#msx.maker .item-card:active{transform:translateY(4px);box-shadow:0 1px 0 var(--purple-200)}
#msx.maker .item-card .monster-portrait{max-width:84px;margin:0 auto 4px}
#msx.maker .item-card strong{font-size:16px;line-height:1.2}
#msx.maker .item-card small{margin:0;padding:2px 10px;border-radius:999px;background:var(--purple-100);color:var(--purple-700);font-size:13px;font-weight:800}
#msx.maker .item-card.selected{border-color:var(--teal-700);background:var(--teal-100);box-shadow:0 5px 0 var(--teal-500)}
#msx.maker .item-card.selected small{background:var(--teal-700);color:#fff}
#msx.maker .item-card.selected::after{content:"✓";position:absolute;right:8px;top:8px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--teal-700);color:#fff;font-weight:800}
#msx.maker .layer-explainer{margin-top:16px;padding:12px 16px;border-radius:var(--r-md);background:var(--purple-100);border:2px dashed var(--purple-200);color:var(--purple-700)}
#msx.maker .layer-explainer p{margin:2px 0 0;color:var(--ink)}
#msx.maker :is(button,a):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (min-width:520px){#msx.maker .item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px){
  #msx.maker{padding:28px 24px 48px}
  #msx.maker .monster-stage{min-height:380px}
  #msx.maker .wardrobe{padding:24px 22px 20px}
  #msx.maker .category-tabs{flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:4px 0 6px}
}
@media (min-width:900px){
  #msx.maker .maker-layout{grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);gap:22px}
  #msx.maker .monster-column{position:sticky;top:16px}
  #msx.maker .monster-stage{position:relative;top:auto;min-height:440px}
  #msx.maker #monster-vector{max-width:300px}
}
/* Below 760px the classic page keeps the monster card stuck to the top while the wardrobe
   scrolls, so the pupil sees each change. Keep that, but compact so the items stay visible. */
@media (max-width:760px){
  #msx.maker .monster-column{padding:8px;z-index:5}
  #msx.maker .monster-stage{height:170px;min-height:170px}
  #msx.maker #monster-vector{max-width:140px}
  #msx.maker .equipped-summary{font-size:12px;padding:4px 10px;left:8px;bottom:8px}
  #msx.maker .maker-actions{margin-top:8px;gap:8px}
  #msx.maker .maker-actions button{font-size:16px;min-height:48px;padding:8px 10px}
  #msx.maker #reset-monster{font-size:14px}
  #msx.maker .save-status{margin:6px 2px 0;font-size:13px}
}
html[data-motion="reduced"] #msx.maker :is(.item-card,.maker-actions button){transition:none;transform:none}

/* ---- Sign-in (Phase 7): StaffUI/PupilLogin forms framed by signinFrame() ---- */
#msx .signin-page{display:grid;gap:14px;max-width:1040px;margin:8px auto 24px}
#msx .signin-scene{position:relative;min-height:140px;border-radius:var(--r-xl);overflow:hidden;background:#2f1a63;box-shadow:var(--shadow-1)}
#msx .signin-scene .art{position:absolute;inset:0;width:100%;height:100%}
#msx .signin-scene__line{position:absolute;left:14px;bottom:14px;max-width:min(60%,340px);padding:8px 14px;border-radius:14px;background:rgb(36 20 72 / .8);margin:0;color:#fff;font-size:clamp(17px,4.4vw,24px);font-weight:800;line-height:1.2;text-shadow:0 2px 0 rgb(31 18 54 / .45)}
#msx .signin{position:relative;max-width:none;margin:0;padding:24px 20px 22px;border-radius:var(--r-xl);background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-2);color:var(--ink)}
#msx .signin .signin-mascot{display:none}
#msx .signin h1{margin:2px 0 14px;font-size:clamp(30px,7vw,40px);line-height:1.1;color:var(--ink)}
#msx .signin>p:not(.eyebrow):not(.small):not(.login-divider){margin:0 0 14px;color:var(--ink-soft);font-size:17px}
#msx .signin form{display:grid;gap:6px;margin:0}
#msx .signin label{margin:10px 0 0;font-weight:800;font-size:16px;color:var(--ink)}
#msx .signin input{width:100%;min-height:56px;margin:0;padding:10px 16px;border-radius:16px;border:3px solid var(--purple-200);background:#fff;font:700 20px var(--font);color:var(--ink);box-shadow:none}
#msx .signin input:focus{outline:none;border-color:var(--purple-500);box-shadow:0 0 0 4px var(--purple-100)}
#msx .signin .pin-field{display:flex;gap:8px;align-items:stretch}
#msx .signin .pin-field input{flex:1;min-width:0}
#msx .signin button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border-radius:16px;background:var(--purple-600);color:#fff;box-shadow:0 5px 0 #4d288c;font:800 17px/1.2 var(--font);cursor:pointer;transition:transform .12s,box-shadow .12s}
#msx .signin button:active{transform:translateY(4px);box-shadow:0 1px 0 #4d288c}
#msx .signin button.secondary{background:#fff;color:#4b2d72;border:2px solid #e3d8ef;box-shadow:0 4px 0 #ddd2ea;font-size:16px}
#msx .signin .pin-field button{min-height:56px;padding:8px 16px}
#msx .signin form>button[type=submit],#msx .signin .actions>button:first-child{min-height:62px;margin-top:16px;border-radius:20px;background:var(--gold-400);color:#3a2508;box-shadow:0 5px 0 var(--gold-600);font-size:20px}
#msx .signin form>button[type=submit]:active{box-shadow:0 1px 0 var(--gold-600)}
#msx .signin button:disabled{opacity:.55;transform:none;cursor:default}
#msx .signin .actions{display:grid;gap:10px;margin-top:8px}
#msx .signin .actions>button:first-child{margin-top:0}
#msx .qr-login-help{display:flex;gap:12px;align-items:flex-start;margin:0 0 6px;padding:14px 16px;border-radius:var(--r-lg);background:var(--teal-100);border:2px solid #b9e4d4;color:var(--teal-800)}
#msx .qr-login-help>span{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:#fff;font-size:26px;line-height:1}
#msx .qr-login-help strong{display:block;font-size:17px}
#msx .qr-login-help p{margin:2px 0 0;font-size:15px;color:var(--ink-soft)}
#msx .login-divider{border:0;padding:0;display:flex;align-items:center;gap:10px;margin:16px 0 0;font-weight:800;color:var(--ink-soft);font-size:15px}
#msx .login-divider::before,#msx .login-divider::after{content:"";flex:1;height:2px;background:var(--line)}
#msx .signin .small{display:block;margin:14px 0 0;font-size:15px;color:var(--ink-soft);text-align:center}
#msx .signin a.small{margin-top:6px;color:var(--purple-700);font-weight:800;text-decoration:underline;text-underline-offset:3px}
#msx .signin-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px;padding:4px;border-radius:999px;background:var(--purple-100)}
#msx .signin-tabs a{display:grid;place-items:center;min-height:44px;border-radius:999px;background:var(--purple-600);color:#fff;font-weight:800;text-decoration:none;box-shadow:none;border:0}
#msx .signin-tabs a.secondary{background:transparent;color:var(--purple-700)}
#msx .signin .callout{margin:12px 0;padding:12px 16px;border-radius:var(--r-md);background:var(--gold-100);border:2px solid #f1d991}
#msx .signin :is(a,button,input):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (min-width:900px){
  #msx .signin-page{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;margin-top:20px}
  #msx .signin-scene{min-height:520px}
  #msx .signin-scene__line{left:24px;bottom:24px;font-size:26px;padding:12px 18px}
  #msx .signin{padding:34px 34px 30px;align-self:center}
}
html[data-motion="reduced"] #msx .signin button{transition:none}

/* ---- Pupil sign-in, Sticker Book (build 92): the album page with the monster's run-in ----
   Teacher, setup and QR-confirm cards keep the Phase 7 frame above; every rule here hangs on
   .signin-page--pupil. Colours are the locked Sticker Book tokens (.design/decisions.md). */
#msx .signin-page--pupil{
  --sb-page:#EEEAF7;--sb-grid:#D9D2EC;--sb-sticker:#FFFFFF;--sb-ink:#1E1633;--sb-muted:#5B5470;--sb-slot:#7B7099;
  --sb-gold:#FFC83D;--sb-on-gold:#3A2508;--sb-teal:#1F7A6C;--sb-purple:#7045BA;
  --sb-shadow:rgb(30 22 51 / .26);--sb-shadow-soft:rgb(30 22 51 / .14);
  --focus:var(--sb-ink);
  display:block;max-width:1328px;margin:8px auto 24px;color:var(--sb-ink)}
#msx .signin-page--pupil :focus-visible{outline:3px solid var(--sb-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--sb-sticker)}
#msx .mss-page{position:relative;background-color:var(--sb-page);
  background-image:radial-gradient(var(--sb-grid) 2px,transparent 2.4px);background-size:24px 24px;background-position:12px 12px;
  border-radius:28px;padding:32px 48px 48px;box-shadow:0 3px 0 0 var(--sb-grid),0 10px 0 0 var(--sb-sticker),0 30px 40px -6px var(--sb-shadow)}
#msx .mss-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}

/* The stage: speech sticker over the monster, props on the page, dust on the ground */
#msx .mss-stage{position:relative;display:flex;flex-direction:column;align-items:center}
#msx .mss-stage.is-intro :is(.mss-mon,.mss-speech){visibility:hidden}
#msx .mss-speech{position:relative;isolation:isolate;z-index:2;align-self:flex-end;margin:0 -24px -24px 0;padding:24px 32px 28px;
  background:var(--sb-sticker);border-radius:18px;box-shadow:0 0 0 6px var(--sb-sticker),0 10px 0 6px var(--sb-shadow-soft),0 14px 22px 6px var(--sb-shadow)}
#msx .mss-speech::before{content:"";position:absolute;z-index:-1;left:72px;bottom:-12px;width:28px;height:28px;background:var(--sb-sticker);transform:rotate(45deg);border-radius:6px}
#msx .mss-speech h1{margin:0;font:800 56px/.98 var(--font);letter-spacing:-.02em;color:var(--sb-ink)}
#msx .mss-w,#msx .mss-l{display:inline-block}
#msx .mss-mon{position:relative;z-index:1;width:380px;margin:8px auto 0 8px;transform:translateX(var(--x,0px)) rotate(4deg)}
#msx .mss-diecut{filter:drop-shadow(0 8px 6px var(--sb-shadow))}
#msx .mss-svg{display:block;width:100%;height:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#msx .mss-svg [data-brow]{display:none}
#msx .mss-sparks{position:absolute;inset:0;pointer-events:none;z-index:3}
#msx .mss-spark{position:absolute;left:50%;top:30%;width:30px;height:30px;margin:-15px 0 0 -15px}
#msx .mss-dust{position:absolute;inset:0;pointer-events:none;overflow:visible}
#msx .mss-puff{position:absolute;left:0;top:0}
#msx .mss-puff svg{overflow:visible}
#msx .mss-defs{position:absolute;width:0;height:0}
/* Word-game tiles, a pencil and a star lying on the page. They only move when the monster's stop thumps it. */
#msx .mss-props{position:absolute;inset:0;pointer-events:none}
#msx .mss-props>*{position:absolute;transform:translateY(var(--hy,0px)) rotate(calc(var(--r,0deg) + var(--hr,0deg)))}
#msx .mss-tile{--s:60px;width:var(--s);height:var(--s);border-radius:10px;display:grid;place-items:center;
  font:800 calc(var(--s) * .56)/1 var(--font);color:var(--sb-ink);padding:0 calc(var(--s) * .1) calc(var(--s) * .12) 0;
  background:linear-gradient(#FFF4DC 70%,#F1DFB8);border:3px solid var(--sb-ink);box-shadow:0 3px 0 rgb(30 22 51 / .16),0 4px 5px var(--sb-shadow-soft)}
#msx .mss-tile i{position:absolute;right:5px;bottom:6px;font:700 calc(var(--s) * .18)/1 var(--font);font-style:normal;color:var(--sb-muted)}
#msx .mss-tile--s{--r:-9deg;left:-4px;top:18%}
#msx .mss-tile--q{--r:8deg;--s:66px;right:4%;top:50%}
#msx .mss-pencil{--r:-18deg;width:170px;height:auto;right:6%;bottom:-1%;filter:drop-shadow(0 3px 0 rgb(30 22 51 / .16))}
#msx .mss-star{--r:14deg;width:40px;height:40px;right:-4px;top:72%;filter:drop-shadow(0 3px 0 rgb(30 22 51 / .16))}

/* The form card: PupilLogin's markup and ids, drawn as a sticker */
#msx .signin-page--pupil .signin{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:0;padding:32px;border:0;border-radius:18px;background:var(--sb-sticker);
  box-shadow:0 0 0 6px var(--sb-sticker),0 10px 0 6px var(--sb-shadow-soft),0 14px 22px 6px var(--sb-shadow);font-size:18px;line-height:1.45}
#msx .signin-page--pupil .signin>*{flex:1 1 100%;min-width:0;margin:0}
#msx .signin-page--pupil .signin>.small{flex:0 1 auto}
#msx .signin-page--pupil .signin>*+*:not(.small),#msx .signin-page--pupil .signin>p.small{margin-top:16px}
#msx .signin-page--pupil .signin>.eyebrow{margin-top:0;font-size:14px;line-height:1.3;letter-spacing:.1em;color:var(--sb-muted)}
#msx .signin-page--pupil .qr-login-help{display:flex;gap:16px;align-items:flex-start;padding:0;background:none;border:0;border-radius:0;color:var(--sb-ink)}
#msx .signin-page--pupil .mss-qr{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--sb-teal);color:#fff}
#msx .signin-page--pupil .mss-qr svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#msx .signin-page--pupil .qr-login-help strong{display:block;font-size:18px}
#msx .signin-page--pupil .qr-login-help p{margin:0;font-size:18px;color:var(--sb-ink)}
#msx .signin-page--pupil .login-divider{display:flex;align-items:center;gap:16px;text-align:center;font:700 16px/1.2 var(--font);color:var(--sb-muted)}
#msx .signin-page--pupil .login-divider::before,#msx .signin-page--pupil .login-divider::after{content:"";flex:1;height:0;background:none;border-top:3px dashed var(--sb-grid)}
#msx .signin-page--pupil .signin form{display:flex;flex-direction:column;gap:8px}
#msx .signin-page--pupil .signin label{margin:16px 0 0;font:700 18px/1.2 var(--font);color:var(--sb-ink)}
#msx .signin-page--pupil .signin label:first-child{margin-top:0}
#msx .signin-page--pupil .signin input{min-height:56px;padding:0 16px;border-radius:12px;border:3px solid var(--sb-ink);background:var(--sb-sticker);font:400 20px/1 var(--font);color:var(--sb-ink);box-shadow:none}
#msx .signin-page--pupil .signin input:focus{border-color:var(--sb-ink);box-shadow:none}
#msx .signin-page--pupil .signin input:focus-visible{outline:3px solid var(--sb-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--sb-sticker)}
#msx .signin-page--pupil .pin-field{display:flex;gap:8px;align-items:stretch}
#msx .signin-page--pupil .signin .pin-field button{flex:none;min-width:88px;min-height:56px;padding:0 16px;border-radius:12px;border:3px solid var(--sb-ink);background:var(--sb-page);color:var(--sb-ink);box-shadow:none;font:700 18px/1 var(--font)}
#msx .signin-page--pupil .signin .pin-field button:hover{background:var(--sb-sticker);filter:none}
#msx .signin-page--pupil .signin .pin-field button:active{transform:translateY(2px);box-shadow:none}
#msx .signin-page--pupil .signin form>button[type=submit]{width:100%;min-height:64px;margin-top:24px;padding:0 32px;border:0;border-radius:12px;background:var(--sb-gold);color:var(--sb-on-gold);
  font:800 24px/1 var(--font);letter-spacing:.01em;box-shadow:0 0 0 3px var(--sb-ink),0 8px 0 3px var(--sb-ink),0 14px 14px 3px var(--sb-shadow);transition:transform .12s,box-shadow .12s}
#msx .signin-page--pupil .signin form>button[type=submit]:hover{filter:none;transform:translateY(-2px);box-shadow:0 0 0 3px var(--sb-ink),0 10px 0 3px var(--sb-ink),0 16px 16px 3px var(--sb-shadow)}
#msx .signin-page--pupil .signin form>button[type=submit]:active{transform:translateY(8px);box-shadow:0 0 0 3px var(--sb-ink),0 0 0 3px var(--sb-ink),0 2px 4px 3px var(--sb-shadow)}
#msx .signin-page--pupil .signin form>button[type=submit]:disabled{opacity:.7;cursor:wait;transform:none}
#msx .signin-page--pupil .signin .small{display:inline-flex;align-items:center;min-height:48px;font-size:18px;color:var(--sb-ink);text-align:left}
#msx .signin-page--pupil .signin a.small{font-weight:700;color:var(--sb-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

@media (max-width:1000px){
  #msx .mss-grid{gap:32px}
  #msx .mss-mon{width:300px}
  #msx .mss-speech{margin-right:0}
  #msx .mss-speech h1{font-size:44px}
  #msx .mss-tile--s{left:-12px;top:auto;bottom:6%}
  #msx .mss-tile--q{--s:58px;right:0}
  #msx .mss-pencil{width:130px;right:2%}
}
@media (max-width:859px){
  #msx .mss-props{display:none}
  #msx .mss-grid{grid-template-columns:minmax(0,1fr)}
  #msx .mss-speech{align-self:center;max-width:100%;margin:0 0 -8px}
  #msx .mss-speech::before{left:56px}
  #msx .mss-mon{width:200px;margin:0 0 16px}
  #msx .signin-page--pupil .signin{max-width:640px;width:100%;justify-self:center}
}
@media (max-width:719px){
  #msx .mss-page{border-radius:24px;padding:24px 16px 32px}
  #msx .signin-page--pupil .signin{padding:24px 20px}
  #msx .mss-speech{padding:16px 24px 20px}
  #msx .mss-speech h1{font-size:40px}
  #msx .mss-mon{width:150px;margin-bottom:12px}
  #msx .signin-page--pupil .qr-login-help :is(strong,p){font-size:16px}
}
@media (max-width:359px){
  #msx .mss-speech{padding:16px 16px 20px}
  #msx .mss-speech h1{font-size:34px}
  #msx .signin-page--pupil .signin .pin-field button{min-width:76px}
}
html[data-motion="reduced"] #msx .signin-page--pupil .signin form>button[type=submit]{transition:none}
/* Redraws and reduced motion: no run-in, just a quick fade. */
#msx .mss-stage:not(.is-intro) :is(.mss-mon,.mss-speech){animation:mss-fade .2s ease-out both}
@keyframes mss-fade{from{opacity:0}to{opacity:1}}

/* ---- Teacher workspace (Phase 7): same palette, type and buttons; layout unchanged ---- */
html[data-ms-design="new"] body[data-audience=teacher]{background:#faf7f1;font-family:ui-rounded,"SF Pro Rounded","Trebuchet MS","Segoe UI",system-ui,sans-serif}
/* The classic workspace runs edge to edge (main loses its padding); give it the standard gutter. */
@media screen{html[data-ms-design="new"] body[data-audience=teacher] #app{padding:0 24px;box-sizing:border-box}}
@media screen and (max-width:720px){html[data-ms-design="new"] body[data-audience=teacher] #app{padding:0 16px}}
html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a{border-radius:14px;color:#4b2d72}
html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a:hover{background:#f0e9fa}
html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a[aria-current=page]{background:#7045ba;color:#fff;box-shadow:0 4px 0 #4d288c}
html[data-ms-design="new"] body[data-audience=teacher] .tw-heading h1{color:#2a1b40;letter-spacing:-.2px}
html[data-ms-design="new"] body[data-audience=teacher] .tw-layout button,html[data-ms-design="new"] body[data-audience=teacher] .tw-layout .button{border-radius:14px;background:#7045ba;color:#fff;border:0;box-shadow:0 4px 0 #4d288c;font-weight:800;transition:transform .12s,box-shadow .12s}
html[data-ms-design="new"] body[data-audience=teacher] .tw-layout button:active,html[data-ms-design="new"] body[data-audience=teacher] .tw-layout .button:active{transform:translateY(3px);box-shadow:0 1px 0 #4d288c}
html[data-ms-design="new"] body[data-audience=teacher] .tw-layout button.secondary,html[data-ms-design="new"] body[data-audience=teacher] .tw-layout .button.secondary{background:#fff;color:#4b2d72;border:2px solid #e3d8ef;box-shadow:0 4px 0 #ddd2ea}
html[data-ms-design="new"] body[data-audience=teacher] .tw-layout button:disabled{opacity:.55;transform:none}
html[data-ms-design="new"] body[data-audience=teacher] :is(.tw-panel,.tw-layout .teacher-card,.tw-empty){border:2px solid #e7dfef;border-radius:22px;box-shadow:0 2px 0 rgb(48 32 68 / .05),0 12px 28px -14px rgb(48 32 68 / .3)}
html[data-ms-design="new"] body[data-audience=teacher] .tw-panel h2{color:#2a1b40}
html[data-ms-design="new"] body[data-audience=teacher] .tw-metric{border:2px solid #e7dfef;border-radius:22px;box-shadow:0 4px 0 #ece5f4;transition:transform .12s,border-color .12s}
html[data-ms-design="new"] body[data-audience=teacher] .tw-metric:hover{border-color:#8a63d2;transform:translateY(-2px)}
html[data-ms-design="new"] body[data-audience=teacher] .tw-metric strong,html[data-ms-design="new"] body[data-audience=teacher] :is(.tw-small-metrics strong,.tw-big){color:#4b2d8f}
html[data-ms-design="new"] body[data-audience=teacher] .tw-metric small{color:#1f7a6c;font-weight:800}
html[data-ms-design="new"] body[data-audience=teacher] .tw-tabs{gap:6px;border-bottom:0;padding:4px;border-radius:999px;background:#f0e9fa;width:fit-content;max-width:100%}
html[data-ms-design="new"] body[data-audience=teacher] .tw-tabs a{border:0;border-radius:999px;color:#4b2d72;padding:10px 16px}
html[data-ms-design="new"] body[data-audience=teacher] .tw-tabs a[aria-current=page]{background:#7045ba;color:#fff;border-radius:999px;box-shadow:0 3px 0 #4d288c}
html[data-ms-design="new"] body[data-audience=teacher] .tw-badge{border-radius:999px;padding:4px 10px}
html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(input,select,textarea){border:2px solid #ddd0f3;border-radius:12px}
html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(input,select,textarea):focus{outline:none;border-color:#8a63d2;box-shadow:0 0 0 4px #f0e9fa}
html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(a,button,input,select,summary):focus-visible{outline:3px solid #1f7a6c;outline-offset:3px}
html[data-ms-design="new"] body[data-audience=teacher] .tw-table-wrap{border-radius:14px}
html[data-ms-design="new"] body[data-audience=teacher] .tw-table thead th{background:#f7f2fd;color:#5d5270}
@media (max-width:720px){
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a{background:#f0e9fa}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a[aria-current=page]{background:#7045ba}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-tabs{width:auto;border-radius:16px}
}
@media print{html[data-ms-design="new"] body[data-audience=teacher] :is(.tw-panel,.tw-metric){box-shadow:none}}
@media (prefers-reduced-motion:reduce){html[data-ms-design="new"] body[data-audience=teacher] :is(.tw-metric,.tw-layout button,.tw-layout .button){transition:none;transform:none}}


/* ---------- Build 70: living Monster Maker (ms-monster.js). Scoped to #msx .msm. ---------- */
html[data-ms-monster="rig"] .maker-page .preview-note{display:none}
#msx .msm{--m-bronze:#a8622f;--m-bronze-soft:#f8e6d6;--m-silver:#56677c;--m-silver-soft:#e7edf3;--m-gold:#946400;--m-gold-soft:#fff0c2;--m-special:#7d33ab;--m-special-soft:#f3e3fb;display:grid;gap:16px;min-width:0}
#msx .msm [hidden]{display:none!important}
#msx .msm-head{display:grid;gap:6px}
#msx .msm-head h1{font-size:clamp(1.6rem,4.5vw,2.3rem);margin:0}
#msx .msm-eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700)}
#msx .msm-lead{margin:0;color:var(--ink-soft);max-width:62ch}
#msx .msm-note{margin:0;color:var(--ink-soft);font-size:.9rem}
#msx .msm-toast{margin:0;min-height:1.5em;font-weight:700;color:var(--teal-700)}
#msx .msm-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-1);padding:16px;min-width:0}
#msx .msm-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
@media (max-width:860px){#msx .msm-layout{grid-template-columns:minmax(0,1fr)}}
#msx .msm-stagecard{position:sticky;top:12px;display:grid;gap:12px}
@media (max-width:860px){#msx .msm-stagecard{position:static}}
#msx .msm-stage{width:100%;max-width:100%;aspect-ratio:360/390;height:auto;border-radius:18px;display:block;touch-action:none;cursor:pointer;overflow:hidden}
#msx .msm-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#msx .msm-btn{font:inherit;font-weight:800;border:0;border-radius:14px;padding:12px 20px;cursor:pointer;min-height:44px}
#msx .msm-btn.gold{background:var(--gold-400);color:#3d2706;box-shadow:0 3px 0 var(--gold-600)}
#msx .msm-btn.gold:disabled{background:var(--line);color:var(--ink-soft);box-shadow:none;cursor:not-allowed}
#msx .msm-btn.quiet{background:transparent;color:var(--purple-700);text-decoration:underline;padding-inline:8px;box-shadow:none}
#msx .msm-back-link{color:var(--purple-700);font-weight:700}
#msx .msm-try{border-radius:16px;background:var(--purple-100);padding:10px 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#msx .msm-try strong{display:block}#msx .msm-try span{font-size:.88rem;color:var(--ink-soft)}
#msx .msm-goal{border-radius:16px;background:var(--gold-100);padding:10px 12px;display:grid;gap:6px}
/* Build 91: how coins are earned (the server pays them; this only says so). */
#msx .coin-rules{margin-top:20px;border-radius:20px;background:var(--gold-100);padding:16px 18px;min-width:0}
#msx .coin-rules h2{margin:0 0 8px;font-size:1.15rem}
#msx .coin-rules__list{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
#msx .coin-rules__list li{background:rgba(255,255,255,.75);border-radius:14px;padding:12px 14px;display:grid;gap:6px;align-content:start;min-width:0}
#msx .coin-rules__list li p{margin:0}
#msx .coin-rules__where{font-size:.92rem;opacity:.85}
#msx .coin-rules__go{justify-self:start;margin-top:2px}
#msx .coin-rules__go[hidden]{display:none}
#msx .coin-rules__note{margin:0}
#msx .msm-coins{border-radius:16px;background:var(--gold-100);padding:10px 12px}
#msx .msm-coins summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
#msx .msm-coins summary:focus-visible{outline:3px solid currentColor;outline-offset:2px;border-radius:8px}
#msx .msm-coins ul{margin:4px 0 8px;padding-left:1.2em;display:grid;gap:4px}
#msx .msm-bar{height:10px;border-radius:9px;background:var(--paper);overflow:hidden}#msx .msm-bar i{display:block;height:100%;background:var(--gold-400)}
#msx .msm-shop{display:grid;gap:12px}
#msx .msm-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-mask:linear-gradient(90deg,#000 90%,transparent);mask:linear-gradient(90deg,#000 90%,transparent)}
#msx .msm-tab{font:inherit;border:0;cursor:pointer;border-radius:999px;padding:9px 15px;font-weight:700;background:var(--purple-100);color:var(--purple-700);white-space:nowrap;box-shadow:none;min-height:40px}
#msx .msm-tab[aria-selected="true"]{background:var(--purple-700);color:#fff}
#msx .msm-shophead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
#msx .msm-shophead h2{margin:0;font-size:1.25rem}
#msx .msm-ladder{display:flex;gap:6px;flex-wrap:wrap}#msx .msm-ladder .msm-tier{position:static}
#msx .msm-sec{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:8px 0 6px}
#msx .msm-sec small{font-size:.72rem;letter-spacing:0;text-transform:none;font-weight:600;background:var(--purple-100);color:var(--purple-700);border-radius:99px;padding:1px 8px}
#msx .msm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
#msx .msm-item{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:8px 8px 10px;cursor:pointer;display:grid;gap:5px;justify-items:center;text-align:center;position:relative;color:var(--ink)}
#msx .msm-item:hover{border-color:var(--purple-500)}
#msx .msm-item[data-on="true"]{border-color:var(--teal-700);background:var(--teal-100)}
#msx .msm-item[data-trying="true"]{border-color:var(--gold-400);border-style:dashed}
#msx .msm-thumb{width:100%;aspect-ratio:1;border-radius:12px;background:var(--purple-100);display:grid;place-items:center;overflow:hidden}
#msx .msm-thumb svg{width:84%;height:84%;overflow:visible}
#msx .msm-thumb.full svg{width:100%;height:100%}
#msx .msm-thumb svg{pointer-events:none}#msx .msm-pin,#msx .msm-tier,#msx .msm-new{z-index:2}
#msx .msm-item b{font-size:.9rem;line-height:1.2}
#msx .msm-tier{position:absolute;top:6px;left:6px;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:2px 7px}
#msx .msm-tier.starter{background:var(--teal-100);color:var(--teal-700)}#msx .msm-tier.bronze{background:var(--m-bronze-soft);color:var(--m-bronze)}#msx .msm-tier.silver{background:var(--m-silver-soft);color:var(--m-silver)}#msx .msm-tier.gold{background:var(--m-gold-soft);color:var(--m-gold)}#msx .msm-tier.special{background:var(--m-special-soft);color:var(--m-special)}
#msx .msm-new{position:absolute;bottom:56px;right:8px;font-size:.62rem;font-weight:800;border-radius:99px;padding:1px 6px;background:var(--gold-400);color:#3d2706}
#msx .msm-state{font-size:.76rem;font-weight:700;border-radius:999px;padding:2px 9px}
#msx .msm-state.on{background:var(--teal-700);color:#fff}#msx .msm-state.own{background:var(--purple-100);color:var(--purple-700)}#msx .msm-state.buy{background:var(--gold-100);color:var(--gold-800)}#msx .msm-state.short{background:var(--purple-100);color:var(--ink-soft)}
#msx .msm-mini{width:80%;height:5px;border-radius:9px;background:var(--line);overflow:hidden}#msx .msm-mini i{display:block;height:100%;background:var(--gold-400)}
#msx .msm-pin{position:absolute;top:4px;right:4px;font:inherit;font-size:.7rem;font-weight:800;border:0;border-radius:99px;padding:3px 8px;background:var(--gold-100);color:var(--gold-800);cursor:pointer;box-shadow:none;min-height:0}
#msx .msm-pin[aria-pressed="true"]{background:var(--gold-400);color:#3d2706}
#msx .msm-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:640px){#msx .msm-pick{grid-template-columns:minmax(0,1fr)}}
#msx .msm-starter{font:inherit;color:var(--ink);text-align:left;background:var(--paper);border:3px solid var(--line);border-radius:24px;padding:12px;cursor:pointer;display:grid;gap:6px;box-shadow:none}
#msx .msm-starter[aria-pressed="true"]{border-color:var(--purple-700);background:var(--purple-100)}
#msx .msm-pad{display:block;border-radius:16px;background:linear-gradient(#ffe7a1,#fff7e2)}
#msx .msm-pad svg{width:100%;height:auto;display:block}
@media (max-width:640px){#msx .msm-starter{grid-template-columns:110px minmax(0,1fr);align-items:center}#msx .msm-pad{grid-row:span 2}}
#msx .msm-starter b{font-size:1.15rem}#msx .msm-starter span{color:var(--ink-soft);font-size:.92rem}
#msx .msm :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Build 71: on upright phones the monster stays pinned above the shop, so pupils see every
   move and try-on. Short screens (phones on their side) use the pop-up monster instead. */
@media (max-width:860px) and (min-height:560px){
 #msx .msm-stagecard{position:sticky;top:0;z-index:5;grid-template-columns:minmax(118px,38%) minmax(0,1fr);gap:6px 12px;align-items:center;padding:10px;box-shadow:0 8px 18px rgb(40 20 60 / .14)}
 #msx .msm-stage{grid-row:1 / span 4;max-height:30vh;border-radius:14px}
 #msx .msm-stagecard>.msm-toast{font-size:.9rem;min-height:0}
 #msx .msm-stagecard .msm-try{padding:8px 10px;gap:6px}
 #msx .msm-stagecard .msm-try .msm-btn{padding:8px 12px;min-height:44px}
 #msx .msm-stagecard .msm-goal{padding:8px 10px}
 #msx .msm-stagecard .msm-back-link{font-size:.88rem}
}
#msx .msm-pip{position:fixed;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:20;width:132px;aspect-ratio:360/390;border-radius:24px;background:var(--purple-100);border:3px solid var(--paper);box-shadow:var(--shadow-1),0 10px 26px rgb(40 20 60 / .25);pointer-events:none;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .2s ease,transform .25s ease}
#msx .msm-pip.on{opacity:1;transform:none}
#msx .msm-pip svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){#msx .msm-pip{transition:opacity .15s linear;transform:none}}

/* Build 71: game full screen. The game fills the window, so the page around it cannot move. */
#msx .game-bar__end{justify-self:end;display:inline-flex;align-items:center;gap:6px;min-width:0}
#msx .ms-full-btn{padding:8px 10px}
@media (max-width:599px){#msx .ms-full-btn{padding:8px}#msx .ms-full-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
html.ms-full,html.ms-full body{overflow:hidden;height:100%}
html.ms-full #msx[data-ms-view="game"]{position:fixed;inset:0;z-index:1000;overflow:auto;overscroll-behavior:contain;background:var(--bg);padding:max(8px,env(safe-area-inset-top)) var(--gutter,12px) max(8px,env(safe-area-inset-bottom))}
html.ms-full #msx .stage{min-height:max(380px,calc(100dvh - 150px))}
/* ---------- Build 76: pupil homework tick list and the games "next step" (#msx only) ---------- */
#msx .ms-homework,.original-journey .ms-homework{background:var(--paper,#fff);border:2px solid var(--line,#e7dfef);border-radius:var(--r-xl,22px);box-shadow:var(--shadow-1,none);padding:18px 20px;margin:16px 0;display:grid;gap:10px;min-width:0}
#msx .ms-homework h2,.original-journey .ms-homework h2{margin:0;font-size:1.35rem}
#msx .ms-homework .eyebrow,.original-journey .ms-homework .eyebrow{margin:0}
.ms-homework__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ms-homework__list li{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink,#2a1b40);min-width:0;overflow-wrap:anywhere}
.ms-homework__tick{flex:0 0 28px;height:28px;border-radius:50%;border:2px solid #cfc2e4;display:grid;place-items:center;font-size:16px;font-weight:900;color:#fff;background:#fff}
.ms-homework__list li.is-done .ms-homework__tick{background:var(--good-500,#2fae7f);border-color:var(--good-500,#2fae7f)}
.ms-homework__list li.is-done>span:nth-child(2){color:var(--ink-soft,#5d5270)}
.ms-homework .btn{justify-self:start;max-width:100%}
.ms-homework__note{margin:0;font-size:.9rem;color:var(--ink-soft,#5d5270)}
#msx .next-step{display:grid;gap:8px;margin:0 0 18px;padding:20px;border-radius:var(--r-xl,22px);background:#fff8e6;border:2px solid #f3d58c;min-width:0}
#msx .next-step h2{margin:0;font-size:1.3rem}#msx .next-step p{margin:0}#msx .next-step .btn{justify-self:start;max-width:100%}
@media (max-width:420px){.ms-homework .btn,#msx .next-step .btn{justify-self:stretch}}
/* Build 77: homework coins and the hot streak */
.ms-homework__reward{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:800;color:#8a5a00}
.ms-homework__streak{display:inline-block;padding:3px 10px;border-radius:999px;background:#ffe9c7;color:#a2430c}
/* Build 81: phones with a "force dark" browser setting recoloured the site and darkened the monsters'
   eye whites. MonsterSpell has one colour scheme, so it asks browsers not to recolour it. */
:root{color-scheme:light dark}
/* Build 81: Bubble Spell's next word is painted in place; the new words pop in gently instead of the screen redrawing */
#msx .bubble.is-new .bubble__word{animation:ms-word-in .24s ease-out}
@keyframes ms-word-in{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#msx .bubble.is-new .bubble__word{animation:none}}
/* Build 81: a saved activity waits behind a "carry on" card on Home */
#msx .ms-resume,.original-journey .ms-resume{background:#fff8e6;border:2px solid #f3d58c;border-radius:var(--r-xl,22px);padding:18px 20px;margin:0 0 16px;display:grid;gap:8px;min-width:0}
#msx .ms-resume h2,.original-journey .ms-resume h2{margin:0;font-size:1.3rem}#msx .ms-resume p,.original-journey .ms-resume p{margin:0}
.ms-resume .btn{justify-self:start;max-width:100%}
@media (max-width:420px){.ms-resume .btn{justify-self:stretch}}
/* Build 77: achievements in Monster Maker */
#msx .msm-tier.legendary{background:linear-gradient(90deg,#ffe2f0,#fff1c4,#d9f6e8);color:#6b2e8a;white-space:normal;text-align:center}
#msx .msm-award .msm-how{font-size:.78rem;line-height:1.3;color:var(--ink-soft);text-align:center;overflow-wrap:anywhere}
#msx .msm-award[data-earned=false] .msm-thumb{filter:grayscale(.6);opacity:.75}
#msx .msm-tabs .msm-tab{flex:0 0 auto}
#msx .msm-award[data-earned=true]{border-color:#f3d58c}

/* Build 82: picture-first Learn card (docs/releases/build-82-learn-cards.md). Every example sits on one screen. */
#msx .ms-learn{max-width:760px;gap:16px}
#msx .ms-learn h1{text-align:center;font-size:clamp(24px,5vw,32px)}
#msx .learn-lead{display:flex;align-items:center;justify-content:center;gap:12px;max-width:560px}
#msx .learn-lead p{font-size:18px;color:var(--ink-soft);text-align:left}
#msx .learn-grid{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
#msx .learn-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
#msx .learn-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;border:2px solid var(--line);border-radius:var(--r-lg);background:#fff;text-align:center;min-width:0}
#msx .learn-label{font-size:12px;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:999px;background:var(--teal-100);color:var(--teal-800)}
#msx .learn-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:0}
#msx .learn-sum__parts{display:contents}
#msx .learn-tile{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:48px;padding:4px 12px;border-radius:12px;font-size:clamp(20px,4.6vw,26px);font-weight:800;background:var(--purple-100);color:var(--purple-900)}
#msx .learn-tile--ending,#msx .learn-tile--prefix{background:var(--teal-100);color:var(--teal-800)}
#msx .learn-tile--removed{background:var(--coral-100);color:var(--coral-700);text-decoration:line-through;text-decoration-thickness:3px}
#msx .learn-tile--added{background:var(--gold-100);color:var(--gold-800);border:2px dashed var(--gold-600)}
#msx .learn-tile__from{font-size:.6em;margin-right:4px;opacity:.7}
#msx .learn-tile--word{background:#fff;border:3px solid var(--purple-600);color:var(--ink)}
#msx .learn-op{font-size:24px;font-weight:800;color:var(--ink-soft)}
#msx .learn-word{margin:0;font-size:clamp(38px,9vw,56px);font-weight:800;letter-spacing:.03em;line-height:1.1;color:var(--ink);overflow-wrap:anywhere}
#msx .learn-tricky{background:none;color:#c2410c;text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:8px}
#msx .learn-sounds{display:flex;flex-direction:column;gap:2px;margin:0;font-size:16px;color:var(--ink-soft)}
#msx .learn-sounds b{color:var(--ink)}
#msx .learn-boxes{display:flex;gap:6px;margin:0}
#msx .learn-boxes span{display:grid;place-items:center;min-width:44px;height:48px;padding:0 8px;border:2px solid var(--purple-200);border-radius:10px;font-size:24px;font-weight:800;background:var(--purple-100)}
#msx .learn-note,#msx .learn-meaning{margin:0;font-size:16px;color:var(--ink-soft)}
#msx .learn-meaning{font-weight:800;color:var(--ink)}
#msx .learn-sentence{margin:0;font-size:15px;color:var(--ink-soft);font-style:italic}
#msx .learn-hear{display:inline-flex!important;align-items:center;gap:8px;min-height:44px;padding:8px 16px!important;border-radius:12px!important;border:2px solid #d9cdec!important;background:#f6f3fa!important;color:#3b2475!important;font-weight:800}
#msx .learn-hear .icon{width:20px;height:20px}
#msx .learn-hear--round{width:52px;height:52px;padding:0!important;border-radius:50%!important;justify-content:center;flex:none}
#msx .learn-hear--round span{display:none}
#msx .learn-tip{display:flex;align-items:center;gap:10px;max-width:600px;padding:12px 18px;border:2px solid #f3d58c;border-radius:var(--r-md);background:#fff8e6;font-size:17px}
#msx .learn-tip .icon{color:var(--gold-800);flex:none}
#msx .learn-more{width:100%;border:2px solid var(--line);border-radius:var(--r-md);padding:10px 14px;background:#fff}
#msx .learn-more summary{cursor:pointer;font-weight:800;color:var(--ink-soft);min-height:24px}
#msx .learn-more p{margin-top:8px;color:var(--ink-soft)}
/* ---------- Build 83: guided phonics home ---------- */
@media (min-width:640px){#msx .home-quick--solo{grid-template-columns:1fr}}
#msx .guided-hero details{margin-top:12px;color:var(--ink-soft)}
#msx .guided-hero summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
/* Build 83: a game that cannot start explains why, with the next button */
#msx .ms-game-problem{margin:0 0 18px;padding:18px 20px;border:3px solid #f1b8a8;border-radius:var(--r-md);background:#fff3ee;color:var(--ink);box-shadow:0 4px 0 #f4d3c8}
#msx .ms-game-problem:focus{outline:3px solid var(--purple-600);outline-offset:3px}
#msx .ms-game-problem h2{margin:0 0 6px;font-size:22px;color:#8a2c14}
#msx .ms-game-problem p{margin:0 0 14px;font-size:18px}
#msx .ms-game-problem__actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Build 87: Count the sounds practice. Boxes fill per tap; Check splits the word into sounds. ---------- */
#msx .ms-count{display:grid;gap:16px}
#msx .count-picture{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:var(--gold-100);border-radius:var(--r-lg);padding:14px}
#msx .count-emoji{font-size:72px;line-height:1}
#msx .count-say{font-size:19px;font-weight:700}
#msx .count-say b{color:var(--purple-700)}
#msx .count-boxes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;min-height:84px}
#msx .count-box{display:grid;place-items:center;align-content:center;width:68px;height:80px;border:3px dashed var(--purple-200);border-radius:var(--r-md);background:var(--paper);font-size:32px;font-weight:800;color:var(--ink)}
#msx .count-box--tapped{border-style:solid;border-color:var(--purple-600);background:var(--purple-100)}
#msx .count-box--tapped::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--purple-600)}
#msx .count-box--shown{border-style:solid;border-color:var(--teal-700);background:var(--teal-100)}
#msx .count-box--two{border-style:solid;border-color:var(--gold-800);background:var(--gold-100);width:auto;min-width:84px;padding:0 8px}
#msx .count-box--two small{font-size:11px;font-weight:800;color:var(--gold-800);line-height:1.1}
#msx .count-tap{width:100%;min-height:68px;font-size:21px}
#msx .count-actions{display:flex;gap:10px;flex-wrap:wrap}
#msx .count-actions>*{flex:1 1 150px}
#msx .count-feedback{border-radius:var(--r-md);padding:14px 16px;font-weight:800;font-size:18px;line-height:1.4}
#msx .count-feedback p+p{margin-top:4px;font-weight:600;color:var(--ink)}
#msx .count-feedback--good{background:var(--good-100);color:var(--good-700)}
#msx .count-feedback--try{background:var(--coral-100);color:var(--coral-700)}
#msx .count-feedback:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (max-width:380px){#msx .count-box{width:56px;height:70px;font-size:26px}#msx .count-emoji{font-size:60px}}

/* =====================================================================================
   Sticker Book (build 92): .design/final/ "Sticker Book, Monster First".
   Loaded last in this file so it wins over the 2026 benchmark rules above at equal specificity.
   Tokens are the locked palette in .design/decisions.md. Presentation only.
   ===================================================================================== */
/* Shown and hidden with the attribute by behaviour code (games readiness, homework, best score). */
#msx [hidden],html[data-ms-design="new"] header [hidden]{display:none!important}

#msx{
  --sb-page:#EEEAF7;--sb-grid:#D9D2EC;--sb-sticker:#FFFFFF;--sb-ink:#1E1633;--sb-muted:#5B5470;--sb-slot:#7B7099;
  --sb-gold:#FFC83D;--sb-on-gold:#3A2508;--sb-teal:#1F7A6C;--sb-blue:#2A63D9;--sb-purple:#7045BA;--sb-pink:#C22F58;--sb-monster:#6FD6BF;
  --sb-shadow:rgb(30 22 51 / .26);--sb-shadow-soft:rgb(30 22 51 / .14);
  --sb-sticker-shadow:0 0 0 4px var(--sb-sticker),0 8px 0 4px var(--sb-shadow-soft),0 12px 20px 4px var(--sb-shadow);
  /* The 2026 tokens, re-pointed at the Sticker Book roles they share. */
  --ink:var(--sb-ink);--ink-soft:var(--sb-muted);--line:var(--sb-grid);--bg:var(--sb-page);--paper:#fff;
  --purple-100:var(--sb-page);--purple-200:var(--sb-grid);--purple-600:var(--sb-purple);--purple-700:var(--sb-ink);
  --teal-700:var(--sb-teal);--gold-400:var(--sb-gold);--focus:var(--sb-ink);
  color:var(--sb-ink);font-size:18px;
}
#msx :focus-visible{outline:3px solid var(--sb-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--sb-sticker)}

/* ---- Buttons: one gold main action; everything else outlined or a flat colour sticker ---- */
#msx .btn{--btn-bg:var(--sb-page);--btn-ink:var(--sb-ink);min-height:56px;padding:12px 24px;border:3px solid var(--sb-ink);border-radius:14px;
  background:var(--btn-bg);color:var(--btn-ink);box-shadow:0 4px 0 var(--sb-ink);font-weight:800;font-size:19px;filter:none}
#msx .btn:hover{filter:none;transform:translateY(-1px);box-shadow:0 5px 0 var(--sb-ink)}
#msx .btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--sb-ink)}
#msx .btn--light{--btn-bg:var(--sb-sticker)}
#msx .btn--teal{--btn-bg:var(--sb-teal);--btn-ink:#fff}
#msx .btn--gold{--btn-bg:var(--sb-gold);--btn-ink:var(--sb-on-gold);border:0;box-shadow:0 0 0 3px var(--sb-ink),0 8px 0 3px var(--sb-ink),0 14px 14px 3px var(--sb-shadow)}
#msx .btn--gold:hover{box-shadow:0 0 0 3px var(--sb-ink),0 10px 0 3px var(--sb-ink),0 16px 16px 3px var(--sb-shadow)}
#msx .btn--gold:active{transform:translateY(8px);box-shadow:0 0 0 3px var(--sb-ink),0 0 0 3px var(--sb-ink),0 2px 4px 3px var(--sb-shadow)}
#msx .btn--xl{min-height:64px;padding:14px 32px;font-size:22px;border-radius:14px}
#msx .btn--small{min-height:48px;padding:8px 16px;font-size:17px;border-radius:12px}
/* Disabled: a dashed outline and a muted label, never a pale blob. */
#msx .btn:disabled,#msx .btn[aria-disabled="true"]{opacity:1;background:transparent;color:var(--sb-muted);border:3px dashed var(--sb-slot);box-shadow:none;transform:none;cursor:not-allowed}
#msx .btn:disabled .icon{opacity:.7}

/* ---- Stickers: white, a thick white die-cut edge and a soft drop ---- */
#msx :is(.panel,.focus-card,.game-card,.leaderboard,.hud__item,.task__card,.coin-rules,.confidence,.ms-homework,.ms-intelligence,.ms-resume,.ms-game-problem){
  background:var(--sb-sticker);border:0;border-radius:18px;box-shadow:var(--sb-sticker-shadow)}
#msx .game-card:hover{box-shadow:var(--sb-sticker-shadow)}
#msx .eyebrow{color:var(--sb-muted);font-size:14px;letter-spacing:.1em}
#msx .eyebrow .icon{color:var(--sb-teal)}

/* ---- The desk and the album page (pupils, signed in or signing in) ---- */
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]){
  background-color:#7045BA;background-image:repeating-linear-gradient(135deg,rgb(255 255 255 / .05) 0 16px,transparent 16px 32px);color:#fff}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) :is(.preview-note,.original-review-label){background:none;color:#fff;font-size:14px}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) footer{border-top-color:rgb(255 255 255 / .3);color:#fff;font-size:14px}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) footer :is(a,summary,strong,span,p){color:#fff}
html[data-ms-design="new"] body[data-audience=pupil] #msx:is([data-ms-view=home],[data-ms-view=games]),
html[data-ms-design="new"] body[data-audience=pupil] #msx:not([data-ms-view]):not(.maker){
  position:relative;background-color:var(--sb-page);background-image:radial-gradient(var(--sb-grid) 2px,transparent 2.4px);background-size:24px 24px;background-position:12px 12px;
  border-radius:28px;padding:32px 40px 40px;box-shadow:0 3px 0 0 var(--sb-grid),0 10px 0 0 var(--sb-sticker),0 30px 40px -6px var(--sb-shadow)}
@media (max-width:719px){
  html[data-ms-design="new"] body[data-audience=pupil] #msx:is([data-ms-view=home],[data-ms-view=games]),
  html[data-ms-design="new"] body[data-audience=pupil] #msx:not([data-ms-view]):not(.maker){border-radius:24px;padding:24px 16px 32px}
}

/* ---- App header on the desk: logo sticker, tabs, coins chip, Sign out (markup unchanged) ---- */
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header{background:none;border-bottom:0;color:#fff}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand{transform:rotate(-3deg);width:fit-content;justify-self:start;align-self:center;flex:0 0 auto;padding:4px 16px 4px 10px;border-radius:14px;min-height:48px;
  background:#fff;color:#1F7A6C;box-shadow:0 0 0 4px #fff,0 8px 0 4px rgb(30 22 51 / .14),0 12px 14px 4px rgb(30 22 51 / .26)}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand .brand-spell{color:#7045BA}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header nav:not(#spelling-nav) a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;border:3px solid #fff;color:#fff;font-weight:700;font-size:17px;background:none}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header nav:not(#spelling-nav) a[aria-current]{background:#fff;color:#1E1633}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header #signout{min-height:48px;padding:0 16px;border-radius:12px;border:3px solid #fff;background:none;color:#fff;font-size:16px;font-weight:700;box-shadow:none}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header #signout:hover{background:#fff;color:#7045BA;filter:none}
html[data-ms-design="new"] body[data-audience=pupil] #header-wallet{min-height:48px;padding:0 16px 0 12px;border:0;border-radius:999px;background:#FFC83D;color:#3A2508;font-size:22px;font-weight:800;box-shadow:0 0 0 3px #fff,0 6px 10px 3px rgb(30 22 51 / .26)}
html[data-ms-design="new"] body[data-audience=pupil] #header-wallet>span:first-child{color:#3A2508}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header :focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #1E1633}
/* Tabs: the current one is the page colour; the others are coloured stickers with a label and an icon. */
html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden]){gap:8px;background:none;border:0;padding:0 0 6px}
html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>*{min-height:52px;border:0;border-radius:14px 14px 10px 10px;box-shadow:0 5px 0 rgb(30 22 51 / .35);font-size:17px;font-weight:800;color:#fff;filter:none}
html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>[data-original-view=home]{background:#C22F58}
html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>:is([data-original-view=games],[data-original-activity]){background:#2A63D9}
html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>a{background:#6FD6BF;color:#1E1633}
html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>[aria-current=page]{background:#EEEAF7;color:#1E1633;box-shadow:0 5px 0 #D9D2EC,inset 0 0 0 3px #fff}
html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>*:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Phones: the tabs become a bottom bar, hidden while a lesson or game is on screen. */
@media (max-width:719px){
  html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden]){position:fixed;z-index:30;left:0;right:0;bottom:0;margin:0;max-width:none;grid-row:auto;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -6px 16px rgb(30 22 51 / .18)}
  html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>:is(*,[data-original-view]){flex-direction:column;gap:2px;min-height:56px;padding:4px;border-radius:12px;background:none;color:#1E1633;box-shadow:none;font-size:14px}
  html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>[aria-current=page]{background:#7045BA;color:#fff;box-shadow:none}
  html[data-ms-design="new"] body[data-audience=pupil] header #spelling-nav:not([hidden])>*:focus-visible{outline-color:#1E1633}
  html[data-ms-design="new"] body[data-audience=pupil]:has(#spelling-nav:not([hidden])):not(:is([data-pupil-view=game],[data-pupil-view=activity],[data-pupil-view=lesson],[data-pupil-view=check],[data-pupil-view=guided])){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html[data-ms-design="new"] body[data-audience=pupil]:has(#spelling-nav:not([hidden])):not(:is([data-pupil-view=game],[data-pupil-view=activity],[data-pupil-view=lesson],[data-pupil-view=check],[data-pupil-view=guided])) #notice{bottom:calc(84px + env(safe-area-inset-bottom))}
}
html[data-motion="reduced"] #msx .btn{transition:none}
/* Small phones: the logo, coins and Sign out share one row without touching. */
@media (max-width:479px){
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header{grid-template-columns:auto auto;justify-content:space-between;column-gap:12px}
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand{font-size:20px;padding:2px 12px 2px 8px;min-height:44px;gap:6px}
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand-eye{width:20px;height:26px}
  html[data-ms-design="new"] body[data-audience=pupil] #header-wallet{font-size:18px;padding:0 12px 0 10px;min-height:44px}
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header #signout{font-size:15px;padding:0 10px;min-height:44px}
}
@media (max-width:359px){
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand{font-size:17px;padding:2px 10px 2px 6px}
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand-eye{width:16px;height:22px}
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header nav:last-child{gap:6px}
  html[data-ms-design="new"] body[data-audience=pupil] #header-wallet{font-size:16px;padding:0 8px}
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header #signout{font-size:14px;padding:0 8px}
}

/* ---- Home (Sticker Book): monster sticker, speech sticker, the gold button, three ways in ---- */
#msx .sb-home{display:flex;flex-direction:column;gap:32px}
#msx .sb-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) minmax(220px,3fr);grid-template-areas:"mon next ways";gap:24px 40px;align-items:center}
#msx .sb-monster{grid-area:mon;justify-self:center;width:min(100%,400px);transform:rotate(4deg)}
#msx .sb-diecut{filter:drop-shadow(0 8px 6px var(--sb-shadow))}
#msx .sb-monster svg{display:block;width:100%;height:auto}
#msx .sb-next{grid-area:next;display:flex;flex-direction:column;align-items:stretch;gap:32px;min-width:0;max-width:none}
#msx .sb-speech{position:relative;isolation:isolate;padding:24px 32px 28px;background:var(--sb-sticker);border-radius:18px;
  box-shadow:0 0 0 6px var(--sb-sticker),0 10px 0 6px var(--sb-shadow-soft),0 14px 22px 6px var(--sb-shadow)}
/* The tail points left, at the monster; on phones the monster is below, so it points down. */
#msx .sb-speech::before{content:"";position:absolute;z-index:-1;left:-12px;top:48px;width:28px;height:28px;background:var(--sb-sticker);transform:rotate(45deg);border-radius:6px}
#msx .sb-speech h1{font-size:clamp(36px,4.2vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px;overflow-wrap:break-word}
#msx .sb-speech__tag{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--sb-muted)}
#msx .sb-speech__tag .icon{width:20px;height:20px;color:var(--sb-gold);stroke:var(--sb-ink);stroke-width:1.6}
#msx .sb-speech h2{margin:4px 0 8px;font-size:clamp(24px,2.4vw,32px);line-height:1.15}
#msx .sb-speech__sub{font-size:18px;color:var(--sb-ink)}
#msx .sb-next>.btn{align-self:stretch}
#msx .sb-next .hero__note{margin:0;padding:12px 16px;border-radius:14px;background:var(--sb-sticker);color:var(--sb-ink);font-size:18px;font-weight:700;box-shadow:0 0 0 3px var(--sb-sticker),0 4px 8px 3px var(--sb-shadow-soft)}
#msx .sb-next>details{padding:4px 16px;border-radius:14px;background:var(--sb-sticker);color:var(--sb-ink);box-shadow:0 0 0 3px var(--sb-sticker),0 4px 8px 3px var(--sb-shadow-soft)}
#msx .sb-next>details>summary{min-height:48px;display:flex;align-items:center;font-size:17px;font-weight:800;cursor:pointer}
#msx .sb-next>details p{margin:0 0 12px;font-size:17px;color:var(--sb-ink)}
#msx .sb-ways{grid-area:ways;display:flex;flex-direction:column;gap:16px}
#msx .sb-way{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 20px;border-radius:14px;border:0;font-weight:800;font-size:20px;line-height:1.2;text-align:left;text-decoration:none;color:#fff;
  box-shadow:0 0 0 3px var(--sb-sticker),0 6px 0 3px var(--sb-shadow-soft),0 10px 14px 3px var(--sb-shadow);transition:transform .12s}
#msx .sb-way:hover{transform:translateY(-1px)}
#msx .sb-way:active{transform:translateY(3px)}
#msx .sb-way .icon{width:26px;height:26px}
#msx .sb-way--games,#msx .sb-ways [data-original-activity]{background:var(--sb-blue)}
#msx .sb-way--monster{background:var(--sb-teal)}
#msx .sb-way--words{background:var(--sb-purple)}
/* How each lesson works: three small numbered stickers in a row. */
#msx .steps--home{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0;padding:0;list-style:none}
#msx .steps--home li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 20px 8px 8px;border-radius:999px;background:var(--sb-sticker);font-size:18px;font-weight:700;color:var(--sb-ink);box-shadow:0 0 0 3px var(--sb-sticker),0 4px 8px 3px var(--sb-shadow-soft)}
#msx .steps--home .steps__num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sb-ink);color:#fff;font-weight:800;font-size:18px}
#msx .home-lower{display:block}
#msx .confidence{padding:24px}
#msx .confidence h2{font-size:24px;margin:4px 0 8px}
#msx .confidence p:not(.eyebrow){font-size:18px}
@media (max-width:999px){
  #msx .sb-hero{grid-template-columns:minmax(0,4fr) minmax(0,6fr);grid-template-areas:"mon next" "ways ways";gap:32px}
  #msx .sb-ways{flex-direction:row;flex-wrap:wrap}
  #msx .sb-way{flex:1 1 200px}
}
@media (max-width:719px){
  #msx .sb-home{gap:24px}
  #msx .sb-hero{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  #msx .sb-next{display:contents}
  #msx .sb-speech{order:1;padding:16px 20px 20px}
  #msx .sb-speech::before{left:56px;top:auto;bottom:-12px}
  #msx .sb-speech h1{font-size:clamp(34px,10vw,44px);margin-bottom:12px}
  #msx .sb-hero .sb-monster{order:2;width:220px;margin:-8px auto 0}
  #msx .sb-next>.btn,#msx .sb-next>.hero__note,#msx .sb-next>.ms-adult-help,#msx .sb-next>:not(.sb-speech){order:3}
  #msx .sb-ways{order:4;flex-direction:column}
  #msx .sb-way{flex:none}
  #msx .steps--home li{flex:1 1 100%}
}
html[data-motion="reduced"] #msx .sb-way{transition:none}
/* original-journey.css shrinks the old hero's button and heading under 520px with !important; undo it for this hero. */
#msx .sb-next>.btn{margin-top:0!important;max-width:none!important;font-size:22px!important;padding:14px 32px!important;min-height:64px!important}
#msx .sb-speech h2{max-width:none;overflow-wrap:break-word}
/* Phones: the bottom bar already has Games and My monster, so the hero keeps only what the bar lacks. */
@media (max-width:719px){
  html[data-ms-design="new"] body:has(#spelling-nav:not([hidden])) #msx :is(.sb-way--games,.sb-way--monster){display:none}
  html[data-ms-design="new"] body:has(#spelling-nav:not([hidden])) #msx .sb-ways:not(:has(.sb-way--words)){display:none}
}
/* Homework, injected by the journey: its button is outlined so the hero keeps the one gold action. */
#msx .ms-homework{padding:24px;margin:0}
#msx .sb-hero{margin-bottom:8px}
/* The extras at the foot of home: flat white tabs that open in place. */
#msx .ms-extras{display:grid;gap:12px}
#msx .ms-extras details{background:var(--sb-sticker);border:0;border-radius:14px;padding:0 20px;box-shadow:0 0 0 3px var(--sb-sticker),0 4px 8px 3px var(--sb-shadow-soft)}
#msx .ms-extras summary{display:flex;align-items:center;min-height:52px;font-size:17px!important;font-weight:800;color:var(--sb-ink);cursor:pointer}
#msx .ms-extras details[open]{padding-bottom:16px}
#msx .ms-extras details p{font-size:16px;color:var(--sb-muted)}
#msx .ms-homework .btn--gold{--btn-bg:var(--sb-sticker);--btn-ink:var(--sb-ink);border:3px solid var(--sb-ink);box-shadow:0 4px 0 var(--sb-ink)}
#msx .ms-homework .btn--gold:hover{box-shadow:0 5px 0 var(--sb-ink)}
#msx .ms-homework .btn--gold:active{box-shadow:0 0 0 var(--sb-ink)}
#msx .ms-homework__tick{flex-basis:32px;height:32px;border:3px dashed var(--sb-slot)}
#msx .ms-homework__list li{font-size:18px}
#msx .ms-homework__list li.is-done .ms-homework__tick{border-style:solid}
#msx .ms-homework__reward{color:#7A4E00}
#msx .ms-homework__note{font-size:15px;color:var(--sb-muted)}

/* ---- Games hub (Sticker Book): hello, the Bubble Spell sticker, three identical game cards, the leaderboard strip ---- */
#msx .sb-games{display:flex;flex-direction:column;gap:32px}
#msx .sb-games__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:32px 40px;align-items:center}
#msx .sb-games__top--solo{grid-template-columns:minmax(0,1fr)}
#msx .sb-hello{display:flex;align-items:center;gap:32px;min-width:0}
#msx .sb-monster--hub{width:220px;flex:none;transform:rotate(-4deg)}
#msx .sb-hello__text{min-width:0}
#msx .sb-hello h1{font-size:clamp(34px,4vw,52px);line-height:1.04;letter-spacing:-.02em;margin:0 0 12px;overflow-wrap:break-word;text-wrap:balance}
#msx .sb-hello p{font-size:19px;color:var(--sb-muted);max-width:30ch;margin:0}
#msx .sb-feature{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head art" "facts facts" "go go" "best best";align-items:center;gap:20px 16px;padding:28px 32px 32px;
  background:var(--sb-sticker);border-radius:18px;box-shadow:var(--sb-sticker-shadow);min-width:0}
#msx .sb-feature__head{grid-area:head;min-width:0}
#msx .sb-feature h2{font-size:clamp(30px,3vw,40px);line-height:1.05;margin:0 0 8px}
#msx .sb-feature__head p{font-size:18px;color:var(--sb-muted);margin:0}
#msx .sb-feature__art{grid-area:art;width:128px;height:auto}
#msx .sb-facts{grid-area:facts;display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
#msx .sb-fact{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 10px;border:3px solid var(--sb-ink);border-radius:999px;font-size:16px;font-weight:800;color:var(--sb-ink);background:var(--sb-sticker)}
#msx .sb-fact b{font-weight:800}
#msx .sb-fact .icon{width:22px;height:22px}
#msx .sb-fact--words .icon{color:var(--sb-blue)}
#msx .sb-fact--lives .icon{color:var(--sb-pink)}
#msx .sb-fact--time .icon{color:var(--sb-teal)}
#msx .sb-feature>.btn{grid-area:go;width:100%}
#msx .sb-feature .feature__best{grid-area:best;display:flex;align-items:center;gap:8px;margin:0;font-size:17px;font-weight:700;color:var(--sb-ink)}
#msx .sb-feature .feature__best .icon{color:var(--sb-ink)}
#msx .sb-tag{display:inline-block;margin:0 0 24px 8px;padding:8px 22px;border-radius:12px;background:var(--sb-sticker);font-size:26px;line-height:1.2;transform:rotate(-1.5deg);
  box-shadow:0 0 0 3px var(--sb-sticker),0 6px 0 3px var(--sb-shadow-soft)}
#msx .sb-game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px;list-style:none;margin:0;padding:0}
#msx .sb-game{display:flex;flex-direction:column;gap:6px;min-width:0;padding:20px;background:var(--sb-sticker);border-radius:18px;box-shadow:var(--sb-sticker-shadow)}
#msx .sb-game__well{display:grid;place-items:center;margin-bottom:12px;padding:14px;border-radius:12px;background:var(--sb-page)}
#msx .sb-game__well svg{display:block;width:100%;max-width:200px;height:auto}
#msx .sb-game h3{font-size:26px;line-height:1.15;margin:0}
#msx .sb-game__blurb{font-size:16px;color:var(--sb-muted);margin:0}
#msx .sb-game .ready-chip{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding:8px 0 4px;background:none;border:0;border-radius:0;font-size:16px;font-weight:800;color:var(--sb-ink)}
#msx .sb-game .ready-chip .icon{color:var(--sb-blue)}
#msx .sb-play{--btn-bg:var(--sb-page);width:100%;margin-top:8px}
#msx .sb-play .icon{width:18px;height:18px}
#msx .sb-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:16px 32px;padding:28px 32px;overflow:visible}
#msx .sb-board .leaderboard__head{display:block;padding:0;background:none}
#msx .sb-board .leaderboard__head h2{font-size:28px;line-height:1.15;margin:0 0 4px}
#msx .sb-board .leaderboard__head p{font-size:16px;color:var(--sb-muted);margin:0}
#msx .sb-board .leaderboard__foot{margin-top:12px;padding:0;font-size:17px;color:var(--sb-ink)}
#msx .sb-board .lb-note{margin:0 0 8px}
#msx .sb-board .lb-list{margin:0;padding:0}
#msx .sb-slot{display:flex;align-items:center;gap:14px;min-height:72px;margin:0;padding:12px 24px;border:3px dashed var(--sb-slot);border-radius:16px;font-size:18px;font-weight:800;color:var(--sb-ink)}
#msx .sb-slot .icon{width:30px;height:30px;color:var(--sb-slot)}
#msx .sb-games .hub-back{margin:0}
@media (max-width:999px){
  #msx .sb-games__top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  #msx .sb-games{gap:24px}
  #msx .sb-hello{gap:16px}
  #msx .sb-monster--hub{order:2;width:112px;margin:0}
  #msx .sb-hello h1{font-size:clamp(30px,8.4vw,40px);margin-bottom:8px}
  #msx .sb-hello p{font-size:17px}
  #msx .sb-feature{padding:20px;gap:16px 12px}
  #msx .sb-feature__art{width:88px}
  #msx .sb-tag{font-size:22px;margin-bottom:20px}
  #msx .sb-board{grid-template-columns:minmax(0,1fr);padding:20px}
  #msx .sb-board .leaderboard__head h2{font-size:24px}
}

/* ---- Bubble Spell (Sticker Book): the bar on the desk, the album page as the stage, pearl bubbles with a blue rim ----
   advance() repaints .hud__value, .hearts, .stage__monster, .stage__banner, .bubble, .clue and .feedback in place, so the
   play screen's markup is unchanged; only ready and results are redrawn. */
html[data-ms-design="new"] body[data-audience=pupil] #msx[data-ms-view=games]:has(.bubble-page){background:none;box-shadow:none;padding:0;border-radius:0}
/* Inside a lesson, check or game the activity bar is the way out, so the tabs step aside (as on phones before). */
html[data-ms-design="new"] body[data-audience=pupil]:is([data-pupil-view=game],[data-pupil-view=activity],[data-pupil-view=lesson],[data-pupil-view=check],[data-pupil-view=guided]) header #spelling-nav{display:none!important}
#msx .bubble-page{max-width:1180px;gap:16px}
#msx .bubble-page>.game-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);color:#fff}
#msx .bubble-page>.game-bar .game-bar__title{color:#fff;font-size:28px;font-weight:800}
#msx .bubble-page>.game-bar .game-bar__title .dot{display:none}
#msx .bubble-page>.game-bar :is(.link-back,.ms-full-btn){min-height:48px;padding:8px 16px 8px 12px;border:3px solid #fff;border-radius:12px;background:none;color:#fff;font-size:17px;font-weight:800}
#msx .bubble-page>.game-bar :is(.link-back,.ms-full-btn):hover{background:#fff;color:#7045BA}
#msx .bubble-page>.game-bar :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px #1E1633}
/* HUD: one white strip with dashed dividers. */
#msx .bubble-page .hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 8px;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .bubble-page .hud__item{padding:4px 20px;border:0;border-radius:0;background:none;box-shadow:none;min-width:0}
#msx .bubble-page .hud__item+.hud__item{border-left:3px dashed var(--sb-grid)}
#msx .bubble-page .hud__label{font-size:14px;color:var(--sb-muted)}
#msx .bubble-page .hud__value{font-size:32px;color:var(--sb-ink)}
#msx .bubble-page .heart{width:30px;height:30px;color:var(--sb-pink)}
#msx .bubble-page .heart .icon{width:30px;height:30px;stroke:var(--sb-ink);stroke-width:1.8}
/* A lost life is a hollow dashed heart with a cross, so it does not depend on colour. */
#msx .bubble-page .heart.is-lost{position:relative;color:transparent}
#msx .bubble-page .heart.is-lost .icon{fill:none;stroke:var(--sb-slot);stroke-dasharray:3 3}
#msx .bubble-page .heart.is-lost::before,#msx .bubble-page .heart.is-lost::after{content:"";position:absolute;left:50%;top:48%;width:14px;height:3px;border-radius:2px;background:var(--sb-slot);transform:translate(-50%,-50%) rotate(45deg)}
#msx .bubble-page .heart.is-lost::after{transform:translate(-50%,-50%) rotate(-45deg)}
#msx .bubble-page .timer{gap:12px}
#msx .bubble-page .timer__track{height:16px;background:var(--sb-page);box-shadow:inset 0 0 0 3px var(--sb-ink)}
#msx .bubble-page .timer__fill{background:var(--sb-blue);border-radius:999px;box-shadow:inset 0 0 0 3px var(--sb-ink)}
#msx .bubble-page .timer[data-level] .timer__fill{background:var(--sb-blue)}
#msx .bubble-page .timer__num{min-width:52px;height:44px;border-radius:12px;background:var(--sb-sticker);color:var(--sb-ink);box-shadow:inset 0 0 0 3px var(--sb-ink);font-size:24px;font-weight:800;animation:none}
/* Three seconds or fewer: the number gets a warning triangle and the bar turns pink, so the change is a shape too. */
#msx .bubble-page .timer[data-level="low"] .timer__fill{background:var(--sb-pink)}
#msx .bubble-page .timer[data-level="low"] .timer__num{background:var(--sb-gold);color:var(--sb-on-gold)}
#msx .bubble-page .timer[data-level="low"]::before{content:"!";flex:none;display:grid;place-items:end center;width:34px;height:30px;padding-bottom:2px;background:var(--sb-ink);color:var(--sb-gold);font-weight:900;font-size:17px;line-height:1;clip-path:polygon(50% 0,100% 100%,0 100%);order:2}
#msx .bubble-page .timer[data-level="low"] .timer__num{order:3}
/* The stage is the album page. */
#msx .bubble-page .stage{color:var(--sb-ink);--focus:var(--sb-ink);border-radius:28px;background-color:var(--sb-page);background-image:radial-gradient(var(--sb-grid) 2px,transparent 2.4px);background-size:24px 24px;background-position:12px 12px;
  box-shadow:0 3px 0 0 var(--sb-grid),0 10px 0 0 var(--sb-sticker),0 30px 40px -6px var(--sb-shadow)}
#msx .bubble-page :is(.stage__rays,.stage__ambient,.stage__reeds){display:none}
#msx .bubble-page .stage__scenery path:nth-child(1){fill:#E4DEF3;opacity:1}
#msx .bubble-page .stage__scenery path:nth-child(2){fill:#DCD5F0}
#msx .bubble-page .stage__scenery path:nth-child(3){fill:#D3CAEA}
#msx .bubble-page .stage__monster{filter:drop-shadow(0 6px 5px var(--sb-shadow))}
#msx .bubble-page .prompt{padding:12px 22px;border-radius:16px;background:var(--sb-sticker);color:var(--sb-ink);text-shadow:none;font-size:clamp(20px,2.4vw,28px);box-shadow:var(--sb-sticker-shadow)}
#msx .bubble-page .prompt .icon{color:var(--sb-blue)}
#msx .bubble-page .stage__banner{padding:10px 20px;border-radius:999px;background:var(--sb-teal);color:#fff;font-size:20px;font-weight:800;box-shadow:0 0 0 3px #fff,0 6px 10px 3px var(--sb-shadow)}
#msx .bubble-page .stage__banner .icon{color:var(--sb-gold);width:22px;height:22px}
/* Bubbles: pearl, a 6px blue rim, one highlight, a numbered blue badge on the rim. */
#msx .bubble-page .bubble{border:6px solid var(--sb-blue);color:var(--sb-ink);background:radial-gradient(circle at 34% 28%,#fff 0 30%,#F4F1FC 62%,#DDE6FA 100%);box-shadow:0 8px 0 rgb(30 22 51 / .14),0 14px 18px rgb(30 22 51 / .18)}
#msx .bubble-page .bubble::before{top:auto;bottom:16%;left:auto;right:18%;width:22%;height:11%;background:rgb(255 255 255 / .95);box-shadow:0 0 0 1px rgb(42 99 217 / .12)}
#msx .bubble-page .bubble__key{position:absolute;top:2%;left:2%;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sb-blue);color:#fff;font-size:18px;font-weight:800;box-shadow:0 0 0 3px #fff}
#msx .bubble-page .bubble:focus-visible{outline:4px solid var(--sb-ink);outline-offset:6px}
#msx .bubble-page .bubble-slot.is-answer .bubble{border-color:var(--sb-teal);background:radial-gradient(circle at 34% 28%,#fff 0 30%,#EAF7F3 70%,#CFEDE4);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--sb-teal)}
#msx .bubble-page .bubble-slot.is-wrong .bubble{border-color:var(--sb-pink);border-style:dashed;background:radial-gradient(circle at 34% 28%,#fff 0 30%,#FBEFF3 100%)}
/* Feedback: a pink sticker with the right spelling. */
#msx .bubble-page .feedback__card--try{background:var(--sb-sticker);border:3px solid var(--sb-pink);border-radius:16px;box-shadow:0 6px 0 var(--sb-shadow-soft)}
#msx .bubble-page .feedback__card--try strong{color:var(--sb-pink)}
#msx .bubble-page .feedback__word{color:var(--sb-ink);font-weight:800;text-decoration:underline 3px var(--sb-pink);text-underline-offset:4px}
#msx .bubble-page .clue{box-shadow:var(--sb-sticker-shadow)}
#msx .clue__hint{font-size:14px;color:var(--sb-on-gold);background:#FFF1C9}
/* Ready and results: the pupil's monster on the left, the speech sticker and the rest beside it. */
#msx .sb-monster--game{width:min(100%,280px);transform:rotate(-3deg)}
#msx .sb-monster--game svg{display:block;width:100%;height:auto}
#msx .sb-say{position:relative;isolation:isolate;padding:20px 32px;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .sb-say::before{content:"";position:absolute;z-index:-1;left:-10px;top:50%;width:24px;height:24px;margin-top:-12px;background:var(--sb-sticker);transform:rotate(45deg);border-radius:5px}
#msx .sb-say--down::before{left:50%;top:auto;bottom:-10px;margin:0 0 0 -12px}
#msx .sb-say h2{margin:0;font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.02em;overflow-wrap:break-word}
#msx .sb-ready,#msx .sb-results{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 40px;align-items:end;width:100%;max-width:1060px;margin:0 auto;padding:16px 0 8px}
#msx .sb-ready__main,#msx .sb-results__main{display:flex;flex-direction:column;gap:20px;min-width:0}
#msx .sb-ready{align-items:center}
#msx .sb-ready__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
#msx .sb-ready__steps li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 24px;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow);font-size:20px;font-weight:800;line-height:1.25}
#msx .sb-ready__steps .steps__num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sb-ink);color:#fff;font-size:20px;font-weight:800}
#msx .sb-chips{display:flex;flex-wrap:wrap;gap:12px;margin:0}
#msx .sb-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px 6px 8px;border-radius:999px;background:var(--sb-sticker);font-size:17px;font-weight:800;box-shadow:0 0 0 3px var(--sb-sticker),0 5px 0 3px var(--sb-shadow-soft)}
#msx .sb-chip .icon{box-sizing:content-box;width:18px;height:18px;padding:6px;border-radius:50%;color:#fff}
#msx .sb-chip--pink .icon{background:var(--sb-pink)}
#msx .sb-chip--blue .icon{background:var(--sb-blue)}
#msx .sb-chip--teal .icon{background:var(--sb-teal)}
#msx .sb-ready__go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
#msx .sb-ready__go .keys-hint{display:inline-flex;align-items:center;gap:6px;margin:0;padding:10px 16px;border-radius:14px;background:var(--sb-sticker);color:var(--sb-muted);font-size:15px;font-weight:700;box-shadow:0 0 0 3px var(--sb-sticker),0 5px 0 3px var(--sb-shadow-soft)}
#msx .sb-ready__go kbd{display:inline-grid;place-items:center;min-width:30px;height:30px;border:2px solid var(--sb-ink);border-radius:8px;background:var(--sb-page);color:var(--sb-ink);font:inherit;font-weight:800;box-shadow:0 2px 0 var(--sb-ink)}
#msx .sb-results__side{display:flex;flex-direction:column;align-items:center;gap:28px}
#msx .sb-results{align-items:start}
#msx .sb-score{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px;padding:28px 40px;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .sb-score .score-big{position:relative;display:grid;place-items:center;width:150px;height:150px;margin:0;color:var(--sb-ink)}
#msx .sb-score__star{position:absolute;inset:0;width:100%;height:100%;fill:var(--sb-gold);stroke:var(--sb-ink);stroke-width:5;stroke-linejoin:round}
#msx .sb-score .score-big>span{position:relative;font-size:56px;font-weight:900;line-height:1;margin-top:10px}
#msx .sb-score .panel__sub{margin:0;font-size:22px;font-weight:800;color:var(--sb-ink)}
#msx .sb-score .best-badge{position:absolute;top:-18px;right:24px;margin:0;padding:8px 18px;border-radius:12px;background:var(--sb-gold);color:var(--sb-on-gold);font-size:18px;box-shadow:0 0 0 3px var(--sb-ink),0 6px 0 3px var(--sb-ink);transform:rotate(4deg)}
#msx .sb-score .best-badge .icon{color:var(--sb-on-gold)}
#msx .sb-results .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
#msx .sb-results .stats div{position:relative;padding:16px 16px 16px 76px;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow);text-align:left}
#msx .sb-results .stats dt{font-size:14px;color:var(--sb-muted)}
#msx .sb-results .stats dd{font-size:32px;line-height:1.1;color:var(--sb-ink)}
#msx .stats__icon{position:absolute;left:16px;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--sb-ink);color:#fff}
#msx .stats__icon .icon{width:22px;height:22px}
#msx .sb-results__more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px 32px;align-items:start}
#msx .sb-results .practise{margin:0}
#msx .sb-results .practise h3{font-size:20px;margin:0 0 12px}
#msx .sb-results .practise ul{gap:12px}
#msx .sb-results .practise li{min-height:48px;padding:6px 18px 6px 14px;border:0;border-radius:999px;background:var(--sb-sticker);font-size:20px;font-weight:800;color:var(--sb-ink);box-shadow:0 0 0 3px var(--sb-sticker),0 5px 0 3px var(--sb-shadow-soft)}
#msx .sb-results .practise li .icon{color:var(--sb-muted)}
#msx .sb-results__note{margin:0;font-size:17px;color:var(--sb-ink)}
#msx .sb-results .panel__actions{display:flex;flex-wrap:wrap;gap:16px;margin:0}
#msx .sb-results .panel__actions .btn{width:auto}
@media (max-width:899px){
  #msx .sb-ready__steps{grid-template-columns:minmax(0,1fr)}
  #msx .sb-ready__steps li{flex-direction:row;align-items:center;padding:12px 16px;font-size:18px}
  #msx .sb-results .stats div{padding:12px 12px 12px 64px}
  #msx .stats__icon{left:12px;width:40px;height:40px;margin-top:-20px}
}
@media (max-width:719px){
  #msx .bubble-page>.game-bar .game-bar__title{font-size:22px}
  #msx .bubble-page>.game-bar :is(.link-back,.ms-full-btn){padding:6px 10px;font-size:15px}
  #msx .bubble-page .hud{padding:8px 4px}
  #msx .bubble-page .hud__item{padding:2px 10px}
  #msx .bubble-page .hud__value{font-size:26px}
  #msx .bubble-page .heart,#msx .bubble-page .heart .icon{width:24px;height:24px}
  #msx .bubble-page .bubble{border-width:5px}
  #msx .bubble-page .bubble__key{width:32px;height:32px;font-size:15px}
  #msx .sb-ready,#msx .sb-results{grid-template-columns:minmax(0,1fr);gap:20px;padding:4px 0}
  #msx .sb-ready .sb-monster--game{display:none}
  #msx .sb-results__side{flex-direction:row;align-items:center;gap:16px}
  #msx .sb-results__side .sb-monster--game{order:-1;width:104px;flex:none}
  #msx .sb-say{padding:14px 20px}
  #msx .sb-say--down::before{left:-10px;top:50%;bottom:auto;margin:-12px 0 0}
  #msx .sb-say h2{font-size:clamp(28px,8vw,40px)}
  #msx .sb-score{padding:20px;gap:12px 20px}
  #msx .sb-score .score-big{width:110px;height:110px}
  #msx .sb-score .score-big>span{font-size:40px}
  #msx .sb-score .panel__sub{font-size:18px}
  #msx .sb-results .stats{gap:10px}
  #msx .sb-results .stats div{padding:56px 8px 10px;text-align:center}
  #msx .stats__icon{left:50%;top:10px;margin:0 0 0 -18px;width:36px;height:36px}
  #msx .sb-ready__go .btn,#msx .sb-results .panel__actions .btn{width:100%}
}
html[data-motion="reduced"] #msx .bubble-page .bubble{transition:none}
@media (max-width:719px){#msx .sb-ready .sb-say::before{display:none}}
#msx .sb-monster--game,#msx .sb-monster--hub{grid-area:auto;justify-self:center}
@media (min-width:480px){html[data-ms-design="new"] body[data-audience=pupil]:is([data-pupil-view=game],[data-pupil-view=activity],[data-pupil-view=lesson],[data-pupil-view=check],[data-pupil-view=guided]) header nav:last-child{grid-column:-2;justify-self:end}}
/* Headings take focus only so screen readers start there; they are not controls, so no ring. */
#msx :is(h1,h2)[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}
/* Phones: the three answers are stacked pills, big enough to read and press; the timer keeps its number. */
@media (max-width:599px){
  #msx .bubble-page .hud{grid-template-columns:auto auto minmax(0,1fr)}
  #msx .bubble-page .bubbles{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px;max-width:340px;padding:8px 0}
  #msx .bubble-page .bubble-slot,#msx .bubble-page .bubble-slot:nth-child(2){width:100%;transform:none}
  #msx .bubble-page .bubble-float{width:100%;max-width:none}
  #msx .bubble-page .bubble{width:100%;max-width:none;aspect-ratio:auto;min-height:84px;padding:8px 48px;border-radius:999px;font-size:28px}
  #msx .bubble-page .bubble--long{font-size:24px}
  #msx .bubble-page .bubble--xlong{font-size:20px}
  #msx .bubble-page .bubble__key{top:50%;left:10px;margin-top:-16px}
  #msx .bubble-page .bubble::before{bottom:20%;right:10%;width:14%;height:16%}
  #msx .bubble-page .stage__monster{width:72px}
}

/* ---- Word Builder, Pick the Pattern, Spelling Check, and lesson sheets (Sticker Book) ----
   The activity bar sits on the desk; the task is the album page. Ids and forms are unchanged. */
html[data-ms-design="new"] body[data-audience=pupil] #msx:is([data-ms-view=games],:not([data-ms-view])):has(.play-page){background:none;box-shadow:none;padding:0;border-radius:0}
#msx .play-page{max-width:1180px;gap:16px}
#msx .play-page>.game-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);color:#fff}
#msx .play-page>.game-bar .game-bar__title{color:#fff;font-size:28px;font-weight:800}
#msx .play-page>.game-bar :is(.link-back,.ms-full-btn){min-height:48px;padding:8px 16px 8px 12px;border:3px solid #fff;border-radius:12px;background:none;color:#fff;font-size:17px;font-weight:800}
#msx .play-page>.game-bar :is(.link-back,.ms-full-btn):hover{background:#fff;color:#7045BA}
#msx .play-page>.game-bar :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px #1E1633}
#msx .play-page .game-bar__end{gap:12px}
#msx .play-page .game-bar__count{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px;border-radius:999px;background:var(--sb-sticker);color:var(--sb-ink);font-size:17px;font-weight:800;box-shadow:0 6px 12px rgb(30 22 51 / .25)}
#msx .play-page .game-bar__count:empty{display:none}
#msx .sb-segs{display:inline-flex;gap:3px}
#msx .sb-segs i{width:16px;height:12px;border-radius:4px;border:2px dashed var(--sb-slot)}
#msx .sb-segs i.is-done{border:2px solid var(--sb-ink);background:var(--sb-ink)}
#msx .sb-segs i.is-now{border:2px solid var(--sb-ink);background:var(--sb-blue)}
#msx .play-page>.progress{display:none}
#msx .play-page .task{overflow:visible;border:0;border-radius:28px;padding:40px 48px;background-color:var(--sb-page);background-image:radial-gradient(var(--sb-grid) 2px,transparent 2.4px);background-size:24px 24px;background-position:12px 12px;
  box-shadow:0 3px 0 0 var(--sb-grid),0 10px 0 0 var(--sb-sticker),0 30px 40px -6px var(--sb-shadow)}
#msx .play-page .task__art{display:none}
#msx .play-page .task__card{margin:0;padding:0;background:none;border-radius:0;box-shadow:none;align-items:stretch;text-align:left;gap:20px}
#msx .play-page .task__card h1{font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin:0}
#msx .play-page .eyebrow{margin:0}
#msx .sb-task__lead,#msx .sb-task__work{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
#msx .sb-task .task__img{max-width:100%;max-height:300px;width:auto;padding:10px;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .sb-task .task__sentence{max-width:34ch;font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.45;color:var(--sb-ink)}
#msx .sb-task .task__audio{margin:-8px 0 0}
#msx .sb-task .task__audio:empty{display:none}
#msx .sb-task .task__actions{justify-content:flex-start;gap:16px}
#msx .sb-task .task__actions .btn--xl{flex:0 1 auto;max-width:none}
#msx .sb-task .task__feedback{max-width:none}
/* Word Builder: the word goes in one dashed slot; the tiles are white with an ink edge, so gold stays the main action. */
#msx .sb-task .built{width:min(100%,420px);min-height:76px;border:3px dashed var(--sb-slot);border-radius:16px;background:rgb(255 255 255 / .7);color:var(--sb-ink);justify-content:flex-start;place-items:center start;padding:10px 20px}
#msx .sb-task .built:empty::before{color:var(--sb-muted);font-size:17px}
#msx .sb-task .tiles{justify-content:flex-start;gap:12px}
#msx .sb-task .tile{min-width:60px;min-height:64px;border:3px solid var(--sb-ink);border-radius:14px;background:var(--sb-sticker);color:var(--sb-ink);box-shadow:0 5px 0 var(--sb-ink);font-size:30px}
#msx .sb-task .tile:active{box-shadow:0 0 0 var(--sb-ink)}
#msx .sb-task .tile:disabled{opacity:1;background:transparent;color:transparent;border-style:dashed;border-color:var(--sb-slot);box-shadow:none;transform:none}
/* Pick the Pattern: the monster asks; the choices are pills with a blue rim, like the bubbles. */
#msx .sb-ask{display:flex;align-items:center;justify-content:center;gap:16px 48px}
#msx .sb-monster--ask{width:200px;flex:none;transform:rotate(-3deg);grid-area:auto}
#msx .sb-monster--ask svg{display:block;width:100%;height:auto}
#msx .sb-ask .sb-say{display:flex;flex-direction:column;gap:6px;max-width:620px}
#msx .sb-task--pick_pattern .sb-task__work{align-items:center}
#msx .sb-task .choices{max-width:1040px;gap:24px}
#msx .sb-task .choice{min-height:96px;padding:12px 24px 12px 64px;border:6px solid var(--sb-blue);border-radius:999px;color:var(--sb-ink);background:radial-gradient(120% 140% at 30% 20%,#fff 0 40%,#F4F1FC 70%,#DDE6FA);box-shadow:0 8px 0 rgb(30 22 51 / .14),0 14px 18px rgb(30 22 51 / .16);font-size:clamp(24px,2.6vw,32px)}
#msx .sb-task .choice:hover{border-color:var(--sb-blue);transform:translateY(-2px)}
#msx .sb-task .choice__key,#msx .sb-task .choices .choice__key{top:50%;left:12px;transform:translateY(-50%);width:40px;height:40px;background:var(--sb-blue);color:#fff;font-size:18px;box-shadow:0 0 0 3px #fff}
#msx .sb-task .choices .choice{padding-top:12px}
/* Spelling Check and the lesson checks: one big answer field and the on-screen keyboard. */
#msx .sb-peek{position:absolute;right:0;top:-8px;width:96px;transform:rotate(6deg);filter:drop-shadow(0 6px 5px var(--sb-shadow))}
#msx .sb-peek svg{display:block;width:100%;height:auto}
#msx .sb-task--soundcheck25 .sb-task__lead{position:relative;padding-right:112px}
#msx .sb-task .task__form{align-items:stretch;max-width:none}
#msx .play-page .task__label{font-size:16px;color:var(--sb-muted)}
#msx .play-page .task__input{min-height:72px;border:3px solid var(--sb-ink);border-radius:14px;background:var(--sb-sticker);text-align:left;padding:10px 20px;font-size:32px}
#msx .play-page .task__input:focus{border-color:var(--sb-ink);box-shadow:0 0 0 4px var(--sb-sticker),0 0 0 7px var(--sb-blue)}
#msx .task__listen{--btn-ink:var(--sb-ink)}
/* The on-screen keyboard (pupil-components.js): white keys with an ink edge. */
#msx .ms-keyboard{padding:0;border:0;background:none;box-shadow:none}
#msx .ms-keyboard-toolbar{font-size:14px;color:var(--sb-muted);margin-bottom:10px}
#msx .ms-keyboard-toolbar button{min-height:44px;padding:6px 12px;border:2px dashed var(--sb-slot);border-radius:10px;background:none;color:var(--sb-ink);font-size:14px;font-weight:800}
#msx .ms-keyboard .ms-key{min-height:52px;border:2px solid var(--sb-ink)!important;border-radius:10px;background:var(--sb-sticker);color:var(--sb-ink);box-shadow:0 4px 0 var(--sb-ink)!important;font-size:22px;font-weight:800}
#msx .ms-keyboard .ms-key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sb-ink)!important}
#msx .ms-keyboard .ms-punctuation .ms-key{min-height:48px!important;font-size:20px!important}
@media (min-width:900px){
  #msx .sb-task:is(.sb-task--word_builder,.sb-task--soundcheck25) .task__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:start}
  #msx .sb-task--word_builder .sb-task__work{padding-top:64px}
}
@media (max-width:719px){
  #msx .play-page>.game-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  #msx .play-page>.game-bar .game-bar__title{font-size:20px;justify-self:center;text-align:center}
  #msx .play-page>.game-bar :is(.link-back,.ms-full-btn){padding:6px 10px;font-size:15px}
  #msx .play-page>.game-bar .ms-full-btn span{display:none}
  #msx .play-page .game-bar__count{min-height:44px;padding:4px 12px;font-size:15px}
  #msx .play-page .sb-segs{display:none}
  #msx .play-page .task{padding:24px 16px;border-radius:24px}
  #msx .sb-ask{flex-direction:column;gap:12px}
  #msx .sb-monster--ask{width:120px}
  #msx .sb-task .choices{grid-template-columns:minmax(0,1fr)}
  #msx .sb-task .choice{min-height:84px}
  #msx .sb-task--soundcheck25 .sb-task__lead{padding-right:84px}
  #msx .sb-peek{width:72px}
  #msx .sb-task .task__actions .btn{flex:1 1 auto}
}
@media (max-width:719px){#msx .sb-ask .sb-say::before{left:50%;top:-10px;margin:0 0 0 -12px}}
#msx .sb-score .score-big>span{display:flex;flex-direction:column;align-items:center}
#msx .sb-score .score-big small{display:block;margin:2px 0 0;font-size:18px;font-weight:800;color:var(--sb-ink)}
#msx :is(.sb-task,.ms-sheet) .feedback__card{justify-content:flex-start;text-align:left;background:var(--sb-sticker);border:3px solid var(--sb-teal);border-radius:16px;box-shadow:0 6px 0 var(--sb-shadow-soft)}
#msx :is(.sb-task,.ms-sheet) .feedback__card--try{border-color:var(--sb-pink)}
#msx :is(.sb-task,.ms-sheet) .feedback__card--good strong{color:var(--sb-teal)}
#msx :is(.sb-task,.ms-sheet) .feedback__card--try strong{color:var(--sb-pink)}
#msx :is(.sb-task,.ms-sheet) .feedback__word{padding:0;background:none;color:var(--sb-ink);font-weight:800;text-decoration:underline 3px var(--sb-pink);text-underline-offset:4px}
#msx :is(.sb-task,.ms-sheet) .feedback__card--good .feedback__word{text-decoration-color:var(--sb-teal)}

/* ---- Lessons and checks (Sticker Book): stepper pills on the page, the same buttons as everywhere else ---- */
#msx .sheet-page .stepper{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
#msx .sheet-page .stepper__step{min-height:44px;padding:6px 18px 6px 12px;border:2px dashed var(--sb-slot);border-radius:999px;background:none;color:var(--sb-muted);font-size:16px;font-weight:700;box-shadow:none}
#msx .sheet-page .stepper__num{width:24px;height:24px;background:none;color:var(--sb-muted);font-size:15px}
#msx .sheet-page .stepper__step.is-current{border:2px solid var(--sb-ink);background:var(--sb-ink);color:#fff;box-shadow:none}
#msx .sheet-page .stepper__step.is-current .stepper__num{width:10px;height:10px;margin:0 4px;background:#fff}
#msx .sheet-page .stepper__step.is-done{border:2px solid var(--sb-sticker);background:var(--sb-sticker);color:var(--sb-ink);box-shadow:0 4px 0 var(--sb-shadow-soft)}
#msx .sheet-page .stepper__step.is-done .stepper__num{background:none;color:var(--sb-teal)}
#msx .sheet-page .task__card{align-items:center;text-align:center}
#msx .sheet-page .ms-learn,#msx .sheet-page .ms-lesson-body{text-align:left}
/* Buttons the journey writes as plain <button>: outlined by default, gold for the one main step. */
#msx :is(.ms-sheet,.finish__actions) button:where(:not(.ms-keyboard *)){min-height:56px;padding:12px 24px;border:3px solid var(--sb-ink);border-radius:14px;background:var(--sb-page);color:var(--sb-ink);box-shadow:0 4px 0 var(--sb-ink);font-size:18px}
#msx :is(.ms-sheet,.finish__actions) button:where(:not(.ms-keyboard *)):active{transform:translateY(4px);box-shadow:0 0 0 var(--sb-ink)}
#msx :is(.ms-answer-actions,.ms-lesson-bottom)>button:not(.ms-quiet),#msx .ms-sheet button:is([data-original-guided-start],[data-foundation-continue]),#msx .finish__actions>button:first-child:not(.secondary),#msx .ms-basic>button:not(.secondary):not(.ms-quiet){min-height:64px;border:0;border-radius:14px;background:var(--sb-gold);color:var(--sb-on-gold);box-shadow:0 0 0 3px var(--sb-ink),0 8px 0 3px var(--sb-ink),0 14px 14px 3px var(--sb-shadow);font-size:21px!important}
#msx :is(.ms-answer-actions,.ms-lesson-bottom)>button:not(.ms-quiet):active,#msx .finish__actions>button:first-child:not(.secondary):active{transform:translateY(8px);box-shadow:0 0 0 3px var(--sb-ink),0 0 0 3px var(--sb-ink)}
#msx :is(.ms-sheet,.finish__actions) button.secondary,#msx .ms-lesson-bottom>.ms-quiet{border:3px solid var(--sb-ink);background:var(--sb-sticker);color:var(--sb-ink);box-shadow:0 4px 0 var(--sb-ink);font-size:17px!important}
#msx .ms-sheet button.ms-quiet:not(.ms-lesson-bottom>*),#msx .finish__actions button.ms-quiet{border:0;background:none;box-shadow:none;color:var(--sb-ink)}
#msx .ms-sheet button:where(:not(.ms-keyboard *)):disabled{opacity:1;border:3px dashed var(--sb-slot);background:transparent;color:var(--sb-muted);box-shadow:none}
#msx .ms-sheet .ms-listen{min-height:48px;border:3px solid var(--sb-ink);background:var(--sb-sticker);color:var(--sb-ink);box-shadow:0 4px 0 var(--sb-ink)}
/* Try together and the lesson checks' three-way choices: pills with a blue rim and the number on the left. */
#msx .original-choices{max-width:1040px;gap:20px}
#msx .original-choices button{min-height:88px;padding:12px 24px;border:6px solid var(--sb-blue);border-radius:999px;color:var(--sb-ink);background:radial-gradient(120% 140% at 30% 20%,#fff 0 40%,#F4F1FC 70%,#DDE6FA);box-shadow:0 8px 0 rgb(30 22 51 / .14),0 14px 18px rgb(30 22 51 / .16);font-size:clamp(22px,2.6vw,30px)!important}
#msx .original-choices button:hover{border-color:var(--sb-blue)}
#msx .original-tiles button{border:3px solid var(--sb-ink)!important;background:var(--sb-sticker)!important;color:var(--sb-ink)!important;box-shadow:0 5px 0 var(--sb-ink)!important}
#msx .original-built{border:3px dashed var(--sb-slot);background:rgb(255 255 255 / .7);color:var(--sb-ink)}
#msx .ms-sheet input:is([data-ms-input],[data-ms-sentence]),#msx .ms-sheet input[type=text]{border:3px solid var(--sb-ink)!important;border-radius:14px!important;background:var(--sb-sticker)!important}
/* Learn: the rule, then one sticker per worked example. Root outlined, ending blue, the dropped letter struck out. */
#msx .learn-card{border:0;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .learn-label{font-size:14px;background:var(--sb-page);color:var(--sb-ink)}
#msx .learn-tile{border:3px solid var(--sb-ink);background:var(--sb-sticker);color:var(--sb-ink)}
#msx .learn-tile--ending,#msx .learn-tile--prefix{border-color:var(--sb-ink);background:var(--sb-blue);color:#fff}
#msx .learn-tile--removed{border-style:dashed;border-color:var(--sb-pink);background:var(--sb-sticker);color:var(--sb-pink)}
#msx .learn-tile--added{border:3px dashed var(--sb-ink);background:#FFF1C9;color:var(--sb-ink)}
#msx .learn-tile--word{border:0;background:none;font-size:clamp(26px,3vw,34px)}
#msx .learn-op{color:var(--sb-ink)}
#msx .learn-hear{border:3px solid var(--sb-ink)!important;background:var(--sb-sticker)!important;color:var(--sb-ink)!important;box-shadow:0 4px 0 var(--sb-ink)}
#msx .learn-tip{border:0;border-radius:16px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .learn-tip .icon{color:var(--sb-blue)}
#msx .learn-more{border:3px solid var(--sb-ink);border-radius:14px;background:var(--sb-sticker)}
#msx .learn-more summary{min-height:44px;display:flex;align-items:center;color:var(--sb-ink);font-size:16px}
#msx .ms-sheet details:not(.learn-more){border-radius:14px}
#msx .ms-sheet .learn-more{border:3px solid var(--sb-ink);border-radius:14px;background:var(--sb-sticker)}
#msx .learn-tile--removed{text-decoration:line-through 3px var(--sb-pink)}
#msx .sheet-page .learn-grid{gap:24px}
#msx .ms-sheet .original-choices{width:100%;max-width:1040px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
#msx .ms-sheet .original-choices button{font-size:clamp(20px,2.2vw,26px)!important;line-height:1.2}
#msx .ms-sheet .ms-eyebrow{font-size:14px;color:var(--sb-muted)}
#msx .ms-sheet #audio-status,#msx .ms-sheet .ms-audio-status,#msx .task__audio{font-size:14px;color:var(--sb-muted)}
#msx .ms-sheet .ms-answer-label{font-size:16px;color:var(--sb-muted)}

/* ---- My Monster (Sticker Book): monster-maker.html has its own header, so it gets the desk and tabs here ---- */
html[data-ms-design="new"] body.maker-page{background-color:#7045BA;background-image:repeating-linear-gradient(135deg,rgb(255 255 255 / .05) 0 16px,transparent 16px 32px);color:#fff}
html[data-ms-design="new"] body.maker-page .maker-header{background:none;border-bottom:0;color:#fff}
html[data-ms-design="new"] body.maker-page .maker-header .brand{transform:rotate(-3deg);width:fit-content;justify-self:start;padding:4px 16px 4px 10px;border-radius:14px;min-height:48px;background:#fff;color:#1F7A6C;
  box-shadow:0 0 0 4px #fff,0 8px 0 4px rgb(30 22 51 / .14),0 12px 14px 4px rgb(30 22 51 / .26)}
html[data-ms-design="new"] body.maker-page .maker-header .brand .brand-spell{color:#7045BA}
html[data-ms-design="new"] body.maker-page #spelling-nav{gap:8px;background:none;border:0;padding:0 0 6px;box-shadow:none}
html[data-ms-design="new"] body.maker-page #spelling-nav>a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border:0;border-radius:14px 14px 10px 10px;box-shadow:0 5px 0 rgb(30 22 51 / .35);font-size:17px;font-weight:800;color:#fff;text-decoration:none;filter:none}
html[data-ms-design="new"] body.maker-page #spelling-nav>a:nth-child(1){background:#C22F58}
html[data-ms-design="new"] body.maker-page #spelling-nav>a:nth-child(2){background:#2A63D9}
html[data-ms-design="new"] body.maker-page #spelling-nav>a[aria-current=page]{background:#EEEAF7;color:#1E1633;box-shadow:0 5px 0 #D9D2EC,inset 0 0 0 3px #fff}
html[data-ms-design="new"] body.maker-page .maker-wallet{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
html[data-ms-design="new"] body.maker-page .maker-wallet>span{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px;border-radius:999px;border:3px solid #fff;background:none;color:#fff;font-size:16px;font-weight:700}
html[data-ms-design="new"] body.maker-page .maker-wallet>span:last-child{border:0;background:#FFC83D;color:#3A2508;font-size:18px;font-weight:800;box-shadow:0 0 0 3px #fff}
html[data-ms-design="new"] body.maker-page .maker-header :focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #1E1633}
html[data-ms-design="new"] body.maker-page :is(.preview-note,footer,footer :is(a,summary,p,span,strong)){background:none;color:#fff}
@media (max-width:719px){
  html[data-ms-design="new"] body.maker-page #spelling-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -6px 16px rgb(30 22 51 / .18)}
  html[data-ms-design="new"] body.maker-page #spelling-nav>a,html[data-ms-design="new"] body.maker-page #spelling-nav>a:is(:nth-child(1),:nth-child(2)){min-height:56px;padding:4px;border-radius:12px;background:none;color:#1E1633;box-shadow:none;font-size:14px}
  html[data-ms-design="new"] body.maker-page #spelling-nav>a[aria-current=page]{background:#7045BA;color:#fff;box-shadow:none}
  html[data-ms-design="new"] body.maker-page #spelling-nav>a:focus-visible{outline-color:#1E1633}
  html[data-ms-design="new"] body.maker-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html[data-ms-design="new"] body.maker-page .maker-wallet>span{min-height:40px;padding:0 10px;font-size:14px}
  html[data-ms-design="new"] body.maker-page .maker-wallet>span:last-child{font-size:16px}
}
#msx.maker{position:relative;max-width:1180px;margin:0 auto 40px;padding:32px 40px 40px;border-radius:28px;color:var(--sb-ink);background-color:var(--sb-page);background-image:radial-gradient(var(--sb-grid) 2px,transparent 2.4px);background-size:24px 24px;background-position:12px 12px;
  box-shadow:0 3px 0 0 var(--sb-grid),0 10px 0 0 var(--sb-sticker),0 30px 40px -6px var(--sb-shadow)}
@media (max-width:719px){#msx.maker{margin:0 12px 32px;padding:24px 16px 32px;border-radius:24px}}
#msx .msm-head h1{font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.02em}
#msx .msm-eyebrow{font-size:14px;color:var(--sb-muted)}
#msx .msm-lead,#msx .msm-note{font-size:18px;color:var(--sb-muted)}
#msx .msm-toast{color:var(--sb-teal)}
#msx .msm-card{border:0;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .msm-stage{border-radius:14px}
#msx .msm-btn{min-height:52px;border:3px solid var(--sb-ink);background:var(--sb-page);color:var(--sb-ink);box-shadow:0 4px 0 var(--sb-ink);font-size:18px}
#msx .msm-btn.gold{border:0;background:var(--sb-gold);color:var(--sb-on-gold);box-shadow:0 0 0 3px var(--sb-ink),0 8px 0 3px var(--sb-ink)}
#msx .msm-btn:is(.gold,:not(.quiet)):disabled{border:3px dashed var(--sb-slot);background:transparent;color:var(--sb-muted);box-shadow:none}
#msx .msm-btn.quiet{border:0;background:none;color:var(--sb-ink);box-shadow:none}
#msx .msm-back-link{color:var(--sb-ink)}
#msx .msm-try,#msx .msm-goal,#msx .msm-coins{background:var(--sb-page);border:2px dashed var(--sb-slot)}
#msx .msm-try span{font-size:15px;color:var(--sb-muted)}
#msx .msm-tabs{gap:8px;padding:4px 2px 8px}
#msx .msm-tab{min-height:48px;padding:8px 18px;border:3px solid var(--sb-ink);background:var(--sb-sticker);color:var(--sb-ink);font-size:17px;font-weight:800}
#msx .msm-tab[aria-selected="true"]{background:var(--sb-ink);color:#fff}
#msx .msm-shophead h2{font-size:clamp(24px,2.6vw,32px)}
#msx .msm-sec{font-size:14px;color:var(--sb-muted)}
#msx .msm-sec small{font-size:14px;background:var(--sb-page);color:var(--sb-ink)}
#msx .msm-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px}
#msx .msm-item{border:0;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow);padding:10px 10px 12px}
#msx .msm-item:hover{border-color:transparent;transform:translateY(-2px)}
/* Equipped: a teal tick badge and the word, never colour alone. Trying on: a dashed ink outline. */
#msx .msm-item[data-on="true"]{background:var(--sb-sticker);box-shadow:0 0 0 4px var(--sb-teal),0 8px 0 4px var(--sb-shadow-soft)}
#msx .msm-item[data-trying="true"]{border:3px dashed var(--sb-ink)}
#msx .msm-thumb{background:var(--sb-page)}
#msx .msm-item b{font-size:17px}
#msx .msm-tier{font-size:14px;letter-spacing:.02em;padding:2px 8px}
#msx .msm-new{font-size:14px;padding:1px 8px}
#msx .msm-state{font-size:14px}
#msx .msm-state.on{background:var(--sb-teal)}
#msx .msm-state.own{background:var(--sb-page);color:var(--sb-ink)}
#msx .msm-pin{font-size:14px;min-height:32px}
#msx .msm-award .msm-how{font-size:14px;color:var(--sb-muted)}
#msx .msm-starter{border:0;border-radius:18px;background:var(--sb-sticker);box-shadow:var(--sb-sticker-shadow)}
#msx .msm-starter[aria-pressed="true"]{background:var(--sb-sticker);box-shadow:0 0 0 4px var(--sb-ink),0 8px 0 4px var(--sb-ink)}
#msx .msm-pad{background:var(--sb-page)}
#msx .msm-starter b{font-size:22px}
#msx .msm-starter span{font-size:16px;color:var(--sb-muted)}
#msx .msm :focus-visible{outline:3px solid var(--sb-ink);outline-offset:3px}
#msx .msm-tier.starter{background:#DDF2EC;color:#14574D}
#msx .msm-tier.bronze{color:#7A4019}
#msx .msm-back-link{display:inline-flex;align-items:center;min-height:44px}

/* ---- Teacher workspace (Sticker Book, calm): the desk and the album page, ink outlines. No monster, tilt or gold. ---- */
@media screen{
  html[data-ms-design="new"] body[data-audience=teacher]{background-color:#7045BA;background-image:repeating-linear-gradient(135deg,rgb(255 255 255 / .05) 0 16px,transparent 16px 32px);color:#1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] header{background:none;border-bottom:0;color:#fff}
  html[data-ms-design="new"] body[data-audience=teacher] header .brand{padding:4px 16px 4px 10px;border-radius:14px;min-height:48px;background:#fff;color:#1F7A6C;box-shadow:0 6px 0 rgb(30 22 51 / .14),0 10px 14px rgb(30 22 51 / .22)}
  html[data-ms-design="new"] body[data-audience=teacher] header .brand .brand-spell{color:#7045BA}
  html[data-ms-design="new"] body[data-audience=teacher] header #signout{min-height:48px;padding:0 16px;border-radius:12px;border:3px solid #fff;background:none;color:#fff;font-size:16px;font-weight:700;box-shadow:none}
  html[data-ms-design="new"] body[data-audience=teacher] header #signout:hover{background:#fff;color:#7045BA;filter:none}
  html[data-ms-design="new"] body[data-audience=teacher] header :focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .preview-note{background:none;color:#fff;font-size:14px}
  html[data-ms-design="new"] body[data-audience=teacher] footer{border-top-color:rgb(255 255 255 / .3);color:#fff;font-size:14px}
  html[data-ms-design="new"] body[data-audience=teacher] footer :is(a,summary,strong,span,p){color:#fff}
  html[data-ms-design="new"] body[data-audience=teacher] main{padding:0 0 32px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout{gap:32px;padding:8px 40px 40px;border-radius:28px;background-color:#EEEAF7;background-image:radial-gradient(#D9D2EC 2px,transparent 2.4px);background-size:24px 24px;background-position:12px 12px;
    box-shadow:0 3px 0 0 #D9D2EC,0 10px 0 0 #fff,0 30px 40px -6px rgb(30 22 51 / .26)}
  /* Sidebar: the current page is outlined in ink, not filled. */
  html[data-ms-design="new"] body[data-audience=teacher] .tw-brand-label{color:#5B5470;font-size:13px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a{color:#1E1633;border:3px solid transparent;font-size:16px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a:hover{background:rgb(255 255 255 / .7)}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a[aria-current=page]{background:#fff;color:#1E1633;border-color:#1E1633;box-shadow:none}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-account{color:#1E1633;border-top:2px solid #D9D2EC;padding-top:16px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-account small{color:#5B5470}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-context{border-bottom:2px dashed #D9D2EC}
  html[data-ms-design="new"] body[data-audience=teacher] :is(.tw-context label,.tw-context>span,.tw-heading p,.tw-note){color:#5B5470}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-heading h1{color:#1E1633}
  /* Buttons: ink filled or white outlined. The calendar days and the delete button keep their own look. */
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(button,.button):not(.tw-cal-day):not(.danger-button){background:#1E1633;color:#fff;border:3px solid #1E1633;border-radius:12px;box-shadow:none}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(button,.button).secondary:not(.tw-cal-day){background:#fff;color:#1E1633;border:3px solid #1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(button,.button):not(.tw-cal-day):not(.danger-button):hover{filter:none;transform:translateY(-1px);box-shadow:0 3px 0 #1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(button,.button):not(.tw-cal-day):not(.danger-button):active{transform:translateY(2px);box-shadow:none}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(button,.button):is(:disabled,[aria-disabled="true"]):not(.tw-cal-day):not(.danger-button){opacity:1;background:transparent;color:#5B5470;border:3px dashed #7B7099;box-shadow:none;transform:none;cursor:not-allowed}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout .tw-danger .danger-button{background:#B23A3A;color:#fff;border:3px solid #B23A3A;border-radius:12px;box-shadow:none}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout .tw-danger .danger-button:hover{filter:none;box-shadow:0 3px 0 #7A2424;transform:translateY(-1px)}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(input,select,textarea){border:3px solid #1E1633;background:#fff;color:#1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(input,select,textarea):focus{border-color:#1E1633;box-shadow:0 0 0 4px #D9D2EC}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout :is(a,button,input,select,summary):focus-visible{outline:3px solid #1E1633;outline-offset:3px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-main a:not(.button):not(.tw-metric){color:#5A35A0;text-decoration:underline;text-underline-offset:3px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a{text-decoration:none}
  /* Panels: plain white stickers, no tilt. */
  html[data-ms-design="new"] body[data-audience=teacher] :is(.tw-panel,.tw-layout .teacher-card,.tw-empty){border:0;border-radius:18px;box-shadow:0 0 0 3px #fff,0 6px 0 3px rgb(30 22 51 / .08),0 10px 18px 3px rgb(30 22 51 / .12)}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-empty{box-shadow:none;border:3px dashed #7B7099;background:rgb(255 255 255 / .6)}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-panel h2{color:#1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-panel p{color:#5B5470}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-panel p.tw-do{color:#1F7A6C}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-count{background:#C22F58;color:#fff}
  /* The figures: one white strip with dashed dividers. */
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metrics{gap:0;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 0 0 3px #fff,0 6px 0 3px rgb(30 22 51 / .08),0 10px 18px 3px rgb(30 22 51 / .12)}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric{border:0;border-radius:0;box-shadow:none;background:#fff;transform:none}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric+.tw-metric{border-left:2px dashed #D9D2EC}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric:hover{background:#F7F5FC;transform:none}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric strong,html[data-ms-design="new"] body[data-audience=teacher] :is(.tw-small-metrics strong,.tw-big){color:#1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric span{color:#1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric small{color:#5A35A0;text-decoration:underline;text-underline-offset:3px}
  /* Tabs inside a page: the current one outlined in ink. */
  html[data-ms-design="new"] body[data-audience=teacher] .tw-tabs{background:#fff;box-shadow:0 0 0 3px #fff}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-main .tw-tabs a:not(.button):not(.tw-metric){color:#1E1633;text-decoration:none}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-tabs a[aria-current=page]{background:#fff;color:#1E1633;box-shadow:inset 0 0 0 3px #1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-table thead th{background:#F7F5FC;color:#5B5470}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-footer-note{color:#5B5470;font-size:13px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-lesson-row>span{color:#5B5470}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout .tw-cal-day:is([data-level="3"],[data-level="4"]) span{color:#1E1633}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-table thead th{font-size:12px}
}
@media screen and (max-width:1100px){
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout{padding:8px 24px 32px;gap:20px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric:nth-child(odd){border-left:0}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-metric:nth-child(n+3){border-top:2px dashed #D9D2EC}
}
@media screen and (max-width:720px){
  html[data-ms-design="new"] body[data-audience=teacher] .tw-layout{padding:4px 16px 24px;border-radius:24px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a{background:#fff;font-size:14px}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-sidebar nav a[aria-current=page]{background:#1E1633;color:#fff}
  html[data-ms-design="new"] body[data-audience=teacher] .tw-context label{font-size:13px}
}

/* ---- Lesson and check finish (Sticker Book): one album page, a bigger monster sticker ---- */
html[data-ms-design="new"] body[data-audience=pupil] #msx:not([data-ms-view]):has(.ms-finish-wrap){background:none;box-shadow:none;padding:0;border-radius:0}
#msx .ms-finish-wrap .panel{padding:32px 40px 40px}
#msx .ms-finish-wrap .panel__monster{width:168px;margin:-8px auto 8px;filter:drop-shadow(0 8px 6px var(--sb-shadow))}
#msx .ms-finish-wrap .panel h1{font-size:clamp(30px,6vw,44px);color:var(--sb-ink)}
#msx .ms-finish-wrap .panel__sub{font-size:19px;color:var(--sb-ink)}
@media (max-width:599px){
  #msx .ms-finish-wrap .panel{padding:24px 20px 28px}
  #msx .ms-finish-wrap .panel__monster{width:128px}
}
#msx .ms-finish-wrap .finish__actions{gap:20px;margin-top:24px}
/* The journey's audio line is 10-11px from original-journey.css (#audio-status); two ids outrank it. */
#msx #audio-status:is(.task__audio,.ms-audio-status){font-size:15px;line-height:1.4;color:var(--sb-muted)}
#msx .sb-board .lb-you{font-size:14px}
/* ---- Logo (build 93): the pupil's monster (traced from MSRig's classic: striped horns, three eyes) peeks over the
   logo sticker from behind it, centred on the "o". CSS only, header markup unchanged.
   The sticker's white and shadow move to ::after so the head (::before, further back) can tuck behind it.
   Teachers keep the plain wordmark (calm variant: no monster). ---- */
html[data-ms-design="new"] .brand .brand-eye{display:none}
html[data-ms-design="new"] body[data-audience=teacher] header .brand{padding-left:16px}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand,html[data-ms-design="new"] body.maker-page .maker-header .brand{position:relative;isolation:isolate;padding-left:16px;--msl-h:40px;--msl-pad:16px;background:none;box-shadow:none}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand::after,html[data-ms-design="new"] body.maker-page .maker-header .brand::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;
  box-shadow:0 0 0 4px #fff,0 8px 0 4px rgb(30 22 51 / .14),0 12px 14px 4px rgb(30 22 51 / .26)}
/* The head image is 228x250; its lower 18% (below the side eyes) sits behind the sticker and its 4px white edge. */
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand::before,html[data-ms-design="new"] body.maker-page .maker-header .brand::before{content:"";position:absolute;z-index:-2;pointer-events:none;
  height:var(--msl-h);width:calc(var(--msl-h) * .912);left:calc(var(--msl-pad) + 1.07em - var(--msl-h) * .456);bottom:calc(100% + 4px - var(--msl-h) * .18);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66 22 228 250'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='.85' y2='1'%3E%3Cstop stop-color='%23C8F4DF'/%3E%3Cstop offset='.38' stop-color='%236ED4BD'/%3E%3Cstop offset='1' stop-color='%2336A58E'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' gradientUnits='userSpaceOnUse' x1='127' y1='114' x2='98' y2='30'%3E%3Cstop offset='.15' stop-color='%23F3B860'/%3E%3Cstop offset='.55' stop-color='%23FFE29A'/%3E%3Cstop offset='1' stop-color='%23FFF5D8'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='233' y1='114' x2='262' y2='30'%3E%3Cstop offset='.15' stop-color='%23F3B860'/%3E%3Cstop offset='.55' stop-color='%23FFE29A'/%3E%3Cstop offset='1' stop-color='%23FFF5D8'/%3E%3C/linearGradient%3E%3CclipPath id='a'%3E%3Cpath d='M106 126 C80 104 74 66 98 30 C100 64 118 88 148 102Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M254 126 C280 104 286 66 262 30 C260 64 242 88 212 102Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg stroke='%231E1633' stroke-width='13' stroke-linejoin='round'%3E%3Cpath d='M106 126 C80 104 74 66 98 30 C100 64 118 88 148 102Z' fill='url(%23l)'/%3E%3Cpath d='M254 126 C280 104 286 66 262 30 C260 64 242 88 212 102Z' fill='url(%23r)'/%3E%3Cg fill='none' stroke='%23C9853F'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M84.4 94.9Q118.8 90.4 148.7 72.7' stroke-width='13'/%3E%3Cpath d='M76 68Q110 64 140 46' stroke-width='10'/%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='M275.6 94.9Q241.2 90.4 211.3 72.7' stroke-width='13'/%3E%3Cpath d='M284 68Q250 64 220 46' stroke-width='10'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M106 126 C80 104 74 66 98 30 C100 64 118 88 148 102Z' fill='none'/%3E%3Cpath d='M254 126 C280 104 286 66 262 30 C260 64 242 88 212 102Z' fill='none'/%3E%3Cpath d='M180 83C252 80 285 144 283 229C285 302 256 328 181 329C105 330 75 307 77 232C74 147 107 84 180 83Z' fill='url(%23s)'/%3E%3Cpath d='M100 160Q110 118 146 107' fill='none' stroke='%23E6FBF2' stroke-linecap='round'/%3E%3C/g%3E%3Ccircle cx='123' cy='176' r='31' fill='%23FFFDF2' stroke='%231E1633' stroke-width='11'/%3E%3Ccircle cx='128' cy='180' r='17' fill='%231E1633'/%3E%3Ccircle cx='133' cy='173' r='6.5' fill='%23FFF'/%3E%3Ccircle cx='180' cy='138' r='36' fill='%23FFFDF2' stroke='%231E1633' stroke-width='11'/%3E%3Ccircle cx='185' cy='142' r='20' fill='%231E1633'/%3E%3Ccircle cx='190' cy='135' r='7.5' fill='%23FFF'/%3E%3Ccircle cx='237' cy='176' r='31' fill='%23FFFDF2' stroke='%231E1633' stroke-width='11'/%3E%3Ccircle cx='242' cy='180' r='17' fill='%231E1633'/%3E%3Ccircle cx='247' cy='173' r='6.5' fill='%23FFF'/%3E%3C/svg%3E") center bottom/contain no-repeat}
/* Focus: the ink ring goes on the white layer so it still hugs the sticker */
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand:focus-visible,html[data-ms-design="new"] body.maker-page .maker-header .brand:focus-visible{box-shadow:none}
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand:focus-visible::after,html[data-ms-design="new"] body.maker-page .maker-header .brand:focus-visible::after{box-shadow:0 0 0 4px #fff,0 0 0 8px #1E1633,0 14px 16px 6px rgb(30 22 51 / .26)}
/* Clear space above the sticker for the head. :not(#ms-no-id) matches the id weight of monsterspell.css's header:has(#spelling-nav:not([hidden])) padding. */
html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header:not(#ms-no-id),html[data-ms-design="new"] body.maker-page .maker-header:not(#ms-no-id){padding-top:40px}
@media (max-width:719px){
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header:not(#ms-no-id),html[data-ms-design="new"] body.maker-page .maker-header:not(#ms-no-id){padding-top:34px}
}
@media (max-width:479px){
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand,html[data-ms-design="new"] body.maker-page .maker-header .brand{padding-left:12px;--msl-pad:12px;--msl-h:32px}
}
@media (max-width:359px){
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header .brand,html[data-ms-design="new"] body.maker-page .maker-header .brand{padding-left:10px;--msl-pad:10px;--msl-h:28px}
  html[data-ms-design="new"] body:is([data-audience=pupil],[data-audience=signin]) header:not(#ms-no-id),html[data-ms-design="new"] body.maker-page .maker-header:not(#ms-no-id){padding-top:30px}
}