/* The play space grows with the screen. Painting keeps its original 4:3 paper. */
body.mlw-clear {
  --rw-gap: clamp(12px, 1.25vw, 32px);
  --rw-board: clamp(300px, 44vw, 1160px);
  --rw-square: clamp(280px, 35vw, 920px);
  --rw-picture: clamp(180px, 25vw, 700px);
  --rw-control: clamp(48px, 3.5vw, 88px);
  font-size: clamp(15px, 1.05vw, 20px);
}
.mlw-clear .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
.mlw-clear .main-content {
  width: 100%;
  min-width: 0;
  max-width: 2600px;
  margin-inline: auto !important;
  padding: clamp(18px, 1.45vw, 36px) clamp(20px, 2.1vw, 64px) 70px;
}
.mlw-clear .main-content > * { min-width: 0; }
.mlw-clear .topbar { height: auto; min-height: 56px; margin-bottom: 30px; flex-wrap: wrap; }
.mlw-clear .breadcrumb { font-size: clamp(14px, 1.05vw, 21px); }
.mlw-clear .topbar-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.mlw-clear .studio-heading { min-width: 0; }
.mlw-clear .studio-heading h2 { font-size: clamp(23px, 1.65vw, 39px); line-height: 1.25; }
.mlw-clear .studio-header { gap: 18px; flex-wrap: wrap; padding: clamp(16px, 1.35vw, 32px); }
.mlw-clear .studio-actions { flex-wrap: wrap; }
.mlw-clear .studio-actions :is(button, a) { min-height: 44px; }
.mlw-clear .studio-actions .secondary-button { font-size: clamp(12px, .85vw, 17px); }
.mlw-clear .section-heading h2 { font-size: clamp(29px, 2vw, 46px); }
.mlw-clear .section-heading p { font-size: clamp(14px, 1vw, 20px); max-width: 1000px; }
.mlw-clear .library-toolbar { flex-wrap: wrap; }
.mlw-clear .search-box { width: clamp(260px, 24vw, 560px); max-width: 100%; }
.mlw-clear .search-box input { font-size: clamp(14px, .95vw, 19px); }
.mlw-clear .template-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rw-gap); }
.mlw-clear .template-card { min-width: 0; }
.mlw-clear .preview-wrap {
  height: clamp(180px, 16vw, 370px);
  aspect-ratio: auto;
  padding: clamp(16px, 1.45vw, 30px);
}
.mlw-clear .mlw-drawn-preview > svg { max-width: none; }
.mlw-clear .template-name {
  font-size: clamp(17px, 1.2vw, 27px);
  white-space: normal;
  overflow-wrap: anywhere;
}
.mlw-clear .template-meta { font-size: clamp(12px, .9vw, 18px); }
.mlw-clear .template-copy { padding: clamp(15px, 1.2vw, 27px); }
.mlw-clear .tile-footer { font-size: clamp(11px, .8vw, 15px); }
.mlw-clear .tile-tag { font-size: clamp(10px, .7vw, 14px); }
.mlw-clear .favorite-button { width: clamp(35px, 2.3vw, 52px); height: clamp(35px, 2.3vw, 52px); }
.mlw-clear .favorite-button svg { width: 50%; height: 50%; }
.mlw-clear :is(#gentleLearningChoice, #gentleGamesChoice) p { font-size: clamp(13px, 1vw, 19px); max-width: 950px; }
.mlw-clear :is(#gentleMoreLessons, #gentleMoreGames) { font-size: clamp(13px, .9vw, 18px); min-height: 46px; }

/* DOM games need their own height rather than the drawing paper's fixed frame. */
.mlw-clear .studio:has(.canvas-stage.extra-stage) { overflow: visible; }
.mlw-clear .paper-board:has(.canvas-stage.extra-stage) {
  padding: clamp(10px, 1.35vw, 32px);
  min-height: 0;
  flex: none;
  background: var(--mlw-surface);
}
.mlw-clear .canvas-stage.extra-stage {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
  box-shadow: none;
  background: var(--mlw-surface);
}
/* In DOM games the backing canvases are unused. Remove their intrinsic boxes
   completely; the next painting activity restores their normal display. */
.mlw-clear .canvas-stage.extra-stage > canvas { display: none !important; }
.mlw-clear .canvas-stage.extra-stage #extraGameOverlay {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  overflow: visible;
  background: var(--mlw-surface);
}
.mlw-clear .canvas-stage.extra-stage .wp-game {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible !important;
  padding: clamp(8px, 1.1vw, 26px);
  gap: clamp(10px, .9vw, 22px);
}
.mlw-clear .wp-game .wg-area {
  width: 100%;
  min-height: 0;
  overflow: visible;
  flex: none;
  gap: clamp(12px, 1.2vw, 28px);
  padding: clamp(8px, 1vw, 24px) !important;
}
.mlw-clear .wp-game :is(.ql-game, .lp-game, .pp-game) { width: min(100%, 1520px); max-width: 1520px; margin-inline: auto; }
.mlw-clear .wp-game .wg-status { font-size: clamp(14px, 1.1vw, 22px); padding: 10px; }
.mlw-clear .wp-game :is(.wg-primary, .wg-secondary, .mlw-action) {
  min-height: var(--rw-control);
  padding: clamp(12px, 1.05vw, 24px) clamp(17px, 1.45vw, 34px);
  font-size: clamp(15px, 1.1vw, 23px);
}
.mlw-clear .wp-game .wg-primary { border-radius: clamp(14px, 1.3vw, 26px); }
.mlw-clear .wp-game .wg-header { padding: 10px 16px; }
.mlw-clear .wp-game .wg-header h3 { font-size: clamp(21px, 1.6vw, 35px); }
.mlw-clear .wp-game .wg-instruction { font-size: clamp(14px, 1.05vw, 21px); }
.mlw-clear .wp-game .wg-restart { width: 46px; height: 46px; font-size: 25px; }
.mlw-clear .wp-game .wg-intro { max-width: 700px; gap: 22px; }
.mlw-clear .wp-game .wg-intro-art { width: clamp(220px, 25vw, 630px); height: clamp(150px, 17vw, 420px); }
.mlw-clear .wp-game .wg-intro strong { font-size: clamp(26px, 2vw, 42px); }
.mlw-clear .wp-game .wg-intro p { font-size: clamp(15px, 1.1vw, 23px); }
.mlw-clear .wp-game :is(.ql-note, .lp-help, .pp-note) { max-width: 900px; font-size: clamp(13px, 1vw, 20px); line-height: 1.6; }
.mlw-clear .wp-game :is(.ql-actions, .lp-actions, .pp-actions) { gap: var(--rw-gap); margin-top: clamp(16px, 1.3vw, 30px); }
.mlw-clear .wp-game :is(.ql-actions, .lp-actions, .pp-actions) > button { min-height: var(--rw-control); font-size: clamp(15px, 1.1vw, 23px) !important; }

/* Pizza: both the pizza and its ingredients grow, not only the counter. */
.mlw-clear .wp-game .ql-customer { gap: clamp(12px, 1.5vw, 32px); min-height: 0; }
.mlw-clear .wp-game .ql-chef-friend { width: clamp(95px, 9vw, 230px); height: clamp(120px, 11vw, 285px); }
.mlw-clear .wp-game .ql-order-bubble { min-width: 0; padding: clamp(14px, 1.3vw, 28px); }
.mlw-clear .wp-game .ql-order-bubble > strong { font-size: clamp(18px, 1.5vw, 32px); }
.mlw-clear .wp-game .ql-recipe-piece { width: clamp(44px, 4vw, 90px); height: clamp(44px, 4vw, 90px); }
.mlw-clear .wp-game .ql-chef-prompt { font-size: clamp(19px, 1.45vw, 31px); margin-block: 18px; }
.mlw-clear .wp-game .ql-chef-counter {
  grid-template-columns: minmax(0, 1fr) clamp(145px, 16vw, 350px);
  gap: var(--rw-gap);
  padding: clamp(12px, 1.5vw, 38px);
  border-radius: clamp(20px, 2vw, 42px);
}
.mlw-clear .wp-game .ql-chef-pizza { width: min(100%, var(--rw-picture)); }
.mlw-clear .wp-game .ql-chef-tray { gap: clamp(8px, 1vw, 22px); }
.mlw-clear .wp-game .ql-chef-tray button {
  grid-template-columns: clamp(44px, 6vw, 140px) minmax(0, 1fr);
  min-height: clamp(70px, 8vw, 172px);
  padding: clamp(8px, .8vw, 18px);
  font-size: clamp(14px, 1.1vw, 25px);
}
.mlw-clear .wp-game .ql-chef-tray button > svg { width: 100%; height: clamp(46px, 6vw, 140px); }
.mlw-clear .wp-game .ql-topping-targets button {
  width: clamp(44px, 4.5vw, 100px);
  height: clamp(44px, 4.5vw, 100px) !important;
  min-height: clamp(44px, 4.5vw, 100px) !important;
}

/* Toy scales and the flower garden remain tactile, large boards. */
.mlw-clear .wp-game :is(.ql-toy-friend, .ql-garden-friend) { width: clamp(85px, 8vw, 210px); height: clamp(110px, 10vw, 265px); }
.mlw-clear .wp-game .ql-play-prompt { font-size: clamp(20px, 1.6vw, 34px); }
.mlw-clear .wp-game .ql-block-order svg { width: clamp(43px, 4.5vw, 100px); height: clamp(48px, 5vw, 110px); }
.mlw-clear .wp-game .ql-toy-counter { grid-template-columns: minmax(0, 1fr) clamp(125px, 15vw, 320px); gap: var(--rw-gap); padding: clamp(14px, 1.5vw, 32px); }
.mlw-clear .wp-game .ql-scale-stage { width: 100%; max-width: none; }
.mlw-clear .wp-game .ql-add-block { min-height: clamp(105px, 10vw, 220px); }
.mlw-clear .wp-game .ql-add-block > svg { width: clamp(70px, 8vw, 180px); height: clamp(76px, 8.5vw, 190px); }
.mlw-clear .wp-game .ql-add-block span { font-size: clamp(14px, 1.1vw, 23px); }
.mlw-clear .wp-game .ql-scale-remove button { width: clamp(44px, 5vw, 100px); min-height: clamp(44px, 5vw, 100px); }
.mlw-clear .wp-game .ql-garden { width: min(100%, var(--rw-square)); max-width: none; padding: clamp(9px, 1.2vw, 28px); gap: clamp(4px, .65vw, 16px); }
.mlw-clear .wp-game .ql-garden-title { max-width: 920px; margin-inline: auto; font-size: clamp(15px, 1.25vw, 26px); }
.mlw-clear .wp-game .ql-palette { gap: clamp(8px, 1.3vw, 30px); margin-top: clamp(18px, 1.7vw, 36px); }
.mlw-clear .wp-game .ql-palette button { width: clamp(70px, 7vw, 160px); height: clamp(80px, 8vw, 180px); }
.mlw-clear .wp-game .ql-palette button > svg { width: 78%; height: 74%; }
.mlw-clear .wp-game .ql-palette small { font-size: clamp(12px, 1vw, 20px); }

/* Small children's toys are responsive units rather than 200px miniatures. */
.mlw-clear .wp-game .lp-guide { gap: clamp(12px, 1.4vw, 30px); }
.mlw-clear .wp-game .lp-guide > span { width: clamp(78px, 8vw, 210px); height: clamp(100px, 10vw, 265px); }
.mlw-clear .wp-game .lp-guide strong { max-width: 800px; font-size: clamp(22px, 1.8vw, 38px); }
.mlw-clear .wp-game .lp-recipe { max-width: none; width: max-content; max-width: 100%; padding: clamp(10px, 1.1vw, 24px); gap: clamp(9px, 1.2vw, 28px); }
.mlw-clear .wp-game .lp-recipe > span { width: clamp(50px, 6vw, 135px); height: clamp(50px, 6vw, 135px); }
.mlw-clear .wp-game .lp-bowl { width: min(100%, 1100px); max-width: none; min-height: clamp(145px, 17vw, 400px); gap: 12px; }
.mlw-clear .wp-game .lp-bowl button { width: clamp(65px, 9vw, 215px); height: clamp(72px, 10vw, 230px); }
.mlw-clear .wp-game .lp-tray { gap: clamp(12px, 1.8vw, 40px); }
.mlw-clear .wp-game .lp-tray button { width: clamp(95px, 12vw, 270px); min-height: clamp(103px, 13vw, 290px); padding: clamp(8px, 1vw, 24px); }
.mlw-clear .wp-game .lp-tray button svg { width: clamp(63px, 9vw, 205px); height: clamp(63px, 9vw, 205px); }
.mlw-clear .wp-game .lp-tray button span { font-size: clamp(14px, 1.1vw, 24px); }
.mlw-clear .wp-game .lp-color-target { width: clamp(68px, 8vw, 190px); height: clamp(68px, 8vw, 190px); }
.mlw-clear .wp-game .lp-balloon-sky { max-width: 1260px; margin-inline: auto; gap: clamp(12px, 3vw, 70px); }
.mlw-clear .wp-game .lp-balloon-sky button { width: clamp(100px, 17vw, 390px); height: clamp(160px, 24vw, 550px); }
.mlw-clear .wp-game .lp-notes > span { width: clamp(58px, 7vw, 155px); height: clamp(65px, 7.5vw, 170px); font-size: clamp(32px, 3.5vw, 78px); }
.mlw-clear .wp-game .lp-music-tray { gap: clamp(12px, 2vw, 45px); }
.mlw-clear .wp-game .lp-music-tray button { width: clamp(100px, 15vw, 340px); min-height: clamp(130px, 18vw, 410px); }
.mlw-clear .wp-game .lp-music-tray b { font-size: clamp(42px, 6vw, 135px); }
.mlw-clear .wp-game .lp-music-tray span { font-size: clamp(15px, 1.3vw, 28px); }
.mlw-clear .wp-game .lp-mix-goal { width: clamp(110px, 13vw, 300px); height: clamp(92px, 11vw, 250px); font-size: clamp(16px, 1.4vw, 30px); }
.mlw-clear .wp-game .lp-mixing { width: min(100%, 900px); max-width: none; min-height: clamp(130px, 16vw, 360px); gap: clamp(12px, 2vw, 45px); }
.mlw-clear .wp-game .lp-mixing i { width: clamp(54px, 7vw, 160px); height: clamp(54px, 7vw, 160px); }
.mlw-clear .wp-game .lp-paints { gap: clamp(10px, 2vw, 45px); }
.mlw-clear .wp-game .lp-paints button { min-width: clamp(90px, 12vw, 270px); padding: clamp(10px, 1.4vw, 32px); font-size: clamp(14px, 1.2vw, 25px); }
.mlw-clear .wp-game .lp-paints button span { width: clamp(52px, 8vw, 180px); height: clamp(52px, 8vw, 180px); }
.mlw-clear .wp-game .lp-puzzle { gap: clamp(16px, 3vw, 70px); }
.mlw-clear .wp-game .lp-puzzle-preview { width: clamp(110px, 18vw, 440px); height: clamp(110px, 18vw, 440px); flex-shrink: 0; }
.mlw-clear .wp-game .lp-puzzle-board { width: min(60%, clamp(230px, 31vw, 780px)); }
.mlw-clear .wp-game .lp-puzzle-tray { gap: clamp(10px, 2vw, 45px); }
.mlw-clear .wp-game .lp-puzzle-tray button { width: clamp(68px, 11vw, 250px); height: clamp(68px, 11vw, 250px); }

/* Robot roads, sun grids, letter pictures and bead necklaces. */
.mlw-clear .wp-game .pp-road { width: min(100%, var(--rw-board)); gap: clamp(6px, .9vw, 22px); padding: clamp(10px, 1.2vw, 28px); }
.mlw-clear .wp-game .pp-nine { width: min(100%, var(--rw-square)); gap: clamp(8px, 1vw, 24px); padding: clamp(14px, 1.4vw, 32px); }
.mlw-clear .wp-game .pp-bubble { gap: clamp(12px, 1.5vw, 35px); font-size: clamp(22px, 1.8vw, 38px); }
.mlw-clear .wp-game .pp-mini-friend { width: clamp(65px, 7vw, 180px); height: clamp(80px, 9vw, 230px); }
.mlw-clear .wp-game .pp-arrows { grid-template-columns: repeat(3, clamp(64px, 6vw, 130px)); grid-template-rows: repeat(2, clamp(58px, 5.5vw, 120px)); gap: clamp(7px, 1vw, 22px); margin-block: clamp(16px, 2vw, 44px); }
.mlw-clear .wp-game .pp-arrows button { font-size: clamp(34px, 3.5vw, 75px); }
.mlw-clear .wp-game .pp-picture { width: min(100%, clamp(250px, 30vw, 760px)); max-width: none; padding: clamp(15px, 1.5vw, 32px); }
.mlw-clear .wp-game .pp-picture > svg { width: clamp(160px, 22vw, 550px); height: clamp(160px, 22vw, 550px); }
.mlw-clear .wp-game .pp-word { font-size: clamp(32px, 3vw, 68px); }
.mlw-clear .wp-game .pp-choices { gap: clamp(12px, 2vw, 44px); }
.mlw-clear .wp-game .pp-choices > button { width: clamp(90px, 12vw, 270px); min-height: clamp(90px, 12vw, 270px); font-size: clamp(44px, 5vw, 110px); }
.mlw-clear .wp-game .pp-star-sky { width: min(100%, clamp(330px, 38vw, 960px)); height: clamp(215px, 25vw, 580px); }
.mlw-clear .wp-game .pp-target-star { width: clamp(142px, 18vw, 420px); height: clamp(142px, 18vw, 420px); }
.mlw-clear .wp-game .pp-necklace { width: min(100%, clamp(350px, 42vw, 1060px)); max-width: none; padding: clamp(15px, 1.7vw, 36px); }
.mlw-clear .wp-game .pp-bead-string { gap: clamp(18px, 3vw, 65px); min-height: clamp(84px, 12vw, 280px); }
.mlw-clear .wp-game .pp-bead-string > svg,
.mlw-clear .wp-game .pp-bead-hole { width: clamp(80px, 11vw, 250px); height: clamp(80px, 11vw, 250px); }
.mlw-clear .wp-game .pp-necklace-label { font-size: clamp(15px, 1.2vw, 25px); }

/* Learning pictures and answers must be just as readable as the games. */
.mlw-clear .wp-game .mlw-lesson { width: min(100%, 1250px); gap: clamp(15px, 1.3vw, 30px); }
.mlw-clear .wp-game .mlw-prompt { font-size: clamp(28px, 2.4vw, 54px); width: 100%; }
.mlw-clear .wp-game .mlw-prompt svg { width: clamp(170px, 19vw, 470px); height: clamp(170px, 19vw, 470px); }
.mlw-clear .wp-game .mlw-prompt .gentle-math-picture { width: min(100%, 1100px); max-width: none; height: clamp(120px, 15vw, 350px); }
.mlw-clear .wp-game .gentle-question { font-size: clamp(25px, 2.2vw, 48px); }
.mlw-clear .wp-game .gentle-equation { font-size: clamp(25px, 2vw, 44px); }
.mlw-clear .wp-game .gentle-number-keys { width: min(100%, 1050px); gap: clamp(8px, 1vw, 22px); }
.mlw-clear .wp-game .gentle-number-keys button { height: clamp(56px, 5.8vw, 125px); font-size: clamp(28px, 3vw, 65px); }
.mlw-clear .wp-game .mlw-form { width: min(100%, 860px); gap: 14px; }
.mlw-clear .wp-game .mlw-input { min-height: clamp(52px, 4vw, 86px); font-size: clamp(24px, 2.1vw, 44px) !important; }
.mlw-clear .wp-game .mlw-form label { font-size: clamp(14px, 1.1vw, 23px); }
.mlw-clear .wp-game .mlw-form button { min-height: var(--rw-control) !important; font-size: clamp(15px, 1.1vw, 23px) !important; }
.mlw-clear .wp-game .mlw-explain { font-size: clamp(16px, 1.3vw, 27px); padding: clamp(15px, 1.4vw, 30px); }
.mlw-clear .wp-game :is(.gentle-typing, .gentle-show-hint, .gentle-challenge) { font-size: clamp(14px, 1.05vw, 22px); }
.mlw-clear .wp-game :is(.gentle-typing summary, .gentle-challenge summary, .gentle-show-hint) { min-height: 44px; }
.mlw-clear .wp-game .wq-options { width: min(100%, 1050px); gap: clamp(10px, 1.3vw, 30px); }
.mlw-clear .wp-game .wq-option { min-height: clamp(90px, 9vw, 205px); font-size: clamp(16px, 1.3vw, 28px); }
.mlw-clear .wp-game .wq-num { font-size: clamp(38px, 4vw, 88px); }
.mlw-clear .wp-game .wq-emo { font-size: clamp(42px, 5vw, 105px); }
.mlw-clear .wp-game .wq-big { font-size: clamp(70px, 8vw, 175px); }
.mlw-clear .wp-game .wq-letter { font-size: clamp(60px, 7vw, 150px); }
.mlw-clear .wp-game .wq-count { grid-template-columns: repeat(5, clamp(38px, 4vw, 90px)); grid-template-rows: repeat(4, clamp(38px, 4vw, 90px)); gap: clamp(5px, .7vw, 16px); }
.mlw-clear .wp-game .wq-count span { font-size: clamp(29px, 3.2vw, 72px); }

/* Original games also gain real board size; their geometry remains intact. */
.mlw-clear .wp-game :is(.wg-simon, .wg-tiles, .wg-tictac, .wg-maze, .wg-oddgrid) { width: min(100%, var(--rw-square)); height: auto; aspect-ratio: 1; }
.mlw-clear .wp-game .wg-maze { gap: clamp(3px, .5vw, 12px); }
.mlw-clear .wp-game :is(.wg-pad, .wg-tile, .wg-tic, .wg-odd, .wg-cell) { font-size: clamp(30px, 4vw, 84px); }
.mlw-clear .wp-game :is(.wg-catch, .wg-field) { width: min(100%, 1400px); height: clamp(280px, 27vw, 650px); }
.mlw-clear .wp-game .wg-reaction { width: min(100%, 1000px); min-height: clamp(250px, 25vw, 580px); }
.mlw-clear .wp-game .mlw-board { width: min(100%, var(--rw-square)); }
.mlw-clear .wp-game .mlw-cell { font-size: clamp(24px, 3.5vw, 75px); }

/* A big screen gets a landscape and characters rather than empty margins. */
.mlw-clear #journey { padding: clamp(18px, 2vw, 46px); }
.mlw-clear #gentleTravelStage { height: clamp(330px, 23vw, 650px); }
.mlw-clear #gentleTravelStage .gentle-team { width: clamp(190px, 15vw, 390px); height: clamp(190px, 15vw, 390px); }
.mlw-clear #gentleTravelStage .gentle-team > span:first-child { width: 53%; height: 95%; }
.mlw-clear #gentleTravelStage .gentle-team > span:last-child { width: 47%; height: 77%; }
.mlw-clear #gentleTravelStage .gentle-bello { width: clamp(115px, 9vw, 235px); height: clamp(145px, 12vw, 300px); }
.mlw-clear .gentle-travel-stars > span { width: clamp(43px, 3.5vw, 76px); height: clamp(43px, 3.5vw, 76px); }
.mlw-clear .gentle-travel-stars svg { width: 57%; height: 57%; }
.mlw-clear .gentle-travel-actions { gap: var(--rw-gap); }
.mlw-clear .gentle-travel-actions button { min-height: clamp(58px, 5vw, 110px); font-size: clamp(17px, 1.6vw, 33px); }
.mlw-clear .gentle-travel-actions svg { width: clamp(23px, 2.5vw, 50px); height: clamp(23px, 2.5vw, 50px); }
.mlw-clear .mlw-card-art { height: clamp(175px, 15vw, 360px); }
.mlw-clear .mlw-card-art > svg { max-width: none; }
.mlw-clear .mlw-card-copy strong { font-size: clamp(25px, 2vw, 42px); }
.mlw-clear .mlw-card-copy small { font-size: clamp(13px, 1vw, 20px); }
.mlw-clear .memo-card { font-size: clamp(35px, 5vw, 115px); }
.mlw-clear .memo-front svg { width: clamp(28px, 4vw, 90px); height: clamp(28px, 4vw, 90px); }
.mlw-clear .math-question { font-size: clamp(48px, 7vw, 150px); }
.mlw-clear .math-choices { width: min(70%, 750px); gap: clamp(12px, 1.3vw, 30px); }
.mlw-clear .quiz-choice { font-size: clamp(30px, 3.5vw, 78px); padding-block: clamp(12px, 1.4vw, 32px); }

@media (min-width: 1800px) {
  .mlw-clear .template-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mlw-clear .main-content { padding-bottom: 100px; }
  .mlw-clear .sidebar { width: 224px; }
  .mlw-clear :is(.mlw-simple-nav button, .mlw-sidebar-more button) { font-size: 17px; }
  .mlw-clear .mlw-simple-nav button { min-height: 65px; }
  .mlw-clear .wp-game .wg-restart { width: 60px; height: 60px; font-size: 32px; }
  .mlw-clear .mlw-settings-button { font-size: 16px; }
  .mlw-clear .gentle-worlds-book > summary { font-size: 20px; }
  .mlw-clear .mlw-worksheet { padding: 38px; }
  .mlw-clear .mlw-sheet-row label { font-size: 24px; }
  .mlw-clear .tool-panel-heading h3 { font-size: 18px; }
  .mlw-clear .tool-btn { min-height: 75px; font-size: 13px; }
  .mlw-clear .tool-btn svg { width: 29px; height: 29px; }
  .mlw-clear .label-row h4 { font-size: 14px; }
  .mlw-clear .size-options button { min-height: 44px; }
  .mlw-clear .mlw-more-tools summary { font-size: 14px; }
  .mlw-clear .export-actions .secondary-button { min-height: 45px; font-size: 14px; }
  .mlw-clear .finish-bar .primary-button { min-height: 50px; font-size: 16px; }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .mlw-clear .app-shell { grid-template-columns: 205px minmax(0, 1fr); }
  .mlw-clear .sidebar { width: 205px; }
  .mlw-clear .main-content { padding-inline: 24px; }
  .mlw-clear .template-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mlw-clear .app-shell { display: block; }
  .mlw-clear .main-content { max-width: none; padding: 18px 24px 115px; }
  .mlw-clear .sidebar { display: none; }
  .mlw-clear .template-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlw-clear .preview-wrap { height: clamp(150px, 27vw, 240px); }
  .mlw-clear .topbar { margin-bottom: 22px; }
  .mlw-clear .wp-game .lp-puzzle-preview { width: 27%; height: auto; aspect-ratio: 1; }
  .mlw-clear .wp-game .lp-puzzle-board { width: 58%; }
  .mlw-clear .studio-header { gap: 12px; }
}
@media (max-width: 600px) {
  .mlw-clear .main-content { padding: 14px 12px 110px; }
  .mlw-clear .topbar { min-height: 44px; gap: 10px; }
  .mlw-clear .topbar-actions { gap: 8px; width: 100%; justify-content: space-between; }
  .mlw-clear .topbar-actions .mlw-settings-button { font-size: 12px; }
  .mlw-clear .template-list { gap: 12px; }
  .mlw-clear .preview-wrap { height: 136px; padding: 12px; }
  .mlw-clear .template-copy { padding: 13px 11px; }
  .mlw-clear .template-name { font-size: 16px; }
  .mlw-clear .template-meta { font-size: 11px; }
  .mlw-clear .favorite-button { width: 32px; height: 32px; }
  .mlw-clear .studio-header { padding: 15px; }
  .mlw-clear .studio-heading h2 { font-size: 23px; }
  .mlw-clear .studio-actions { gap: 8px; }
  .mlw-clear .studio-actions .secondary-button { font-size: 12px; }
  .mlw-clear .paper-board:has(.canvas-stage.extra-stage) { padding: 3px; }
  .mlw-clear .canvas-stage.extra-stage .wp-game { padding: 7px; gap: 10px; }
  .mlw-clear .wp-game .wg-area { padding: 4px !important; }
  .mlw-clear .wp-game .wg-header { padding: 4px; }
  .mlw-clear .wp-game .ql-customer { gap: 8px; }
  .mlw-clear .wp-game .ql-chef-friend { width: 76px; height: 100px; }
  .mlw-clear .wp-game .ql-order-bubble { padding: 11px 12px; }
  .mlw-clear .wp-game .ql-order-bubble > strong { font-size: 17px; }
  .mlw-clear .wp-game .ql-recipe { gap: 5px; }
  .mlw-clear .wp-game .ql-recipe-piece { width: 40px; height: 40px; }
  .mlw-clear .wp-game .ql-chef-prompt { font-size: 17px; margin-block: 12px; }
  .mlw-clear .wp-game .ql-chef-counter { grid-template-columns: minmax(0, 1fr); padding: 9px; gap: 7px; }
  .mlw-clear .wp-game .ql-chef-pizza { width: min(100%, 245px); }
  .mlw-clear .wp-game .ql-chef-tray { flex-direction: row; justify-content: center; gap: 7px; }
  .mlw-clear .wp-game .ql-chef-tray button { width: 31%; min-height: 82px; padding: 5px; grid-template-columns: 1fr; justify-items: center; font-size: 12px; }
  .mlw-clear .wp-game .ql-chef-tray button > svg { width: 46px; height: 46px; }
  .mlw-clear .wp-game .ql-toy-counter { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 8px; }
  .mlw-clear .wp-game .ql-add-block { min-height: 65px; flex-direction: row; }
  .mlw-clear .wp-game .ql-add-block > svg { width: 48px; height: 52px; }
  .mlw-clear .wp-game .ql-palette button { width: 68px; height: 78px; }
  .mlw-clear .wp-game .lp-guide { gap: 8px; }
  .mlw-clear .wp-game .lp-guide > span { width: 60px; height: 80px; }
  .mlw-clear .wp-game .lp-guide strong { font-size: 21px; }
  .mlw-clear .wp-game .lp-recipe { gap: 8px; padding: 9px; }
  .mlw-clear .wp-game .lp-recipe > span { width: 45px; height: 45px; }
  .mlw-clear .wp-game .lp-bowl { min-height: 135px; padding: 12px; gap: 4px; }
  .mlw-clear .wp-game .lp-bowl button { width: 58px; height: 65px; }
  .mlw-clear .wp-game .lp-tray { gap: 7px; margin-top: 18px; }
  .mlw-clear .wp-game .lp-tray button { width: 29%; min-height: 95px; padding: 5px; }
  .mlw-clear .wp-game .lp-tray button svg { width: 55px; height: 55px; }
  .mlw-clear .wp-game .lp-tray button span { font-size: 12px; }
  .mlw-clear .wp-game .lp-balloon-sky { gap: 7px; padding: 15px 4px 0; }
  .mlw-clear .wp-game .lp-balloon-sky button { width: 29%; height: 170px; }
  .mlw-clear .wp-game .lp-music-tray { gap: 8px; }
  .mlw-clear .wp-game .lp-music-tray button { width: 29%; min-height: 122px; }
  .mlw-clear .wp-game .lp-music-tray b { font-size: 40px; }
  .mlw-clear .wp-game .lp-music-tray span { font-size: 14px; }
  .mlw-clear .wp-game .lp-paints { gap: 7px; }
  .mlw-clear .wp-game .lp-paints button { min-width: 0; width: 30%; padding: 8px 5px; }
  .mlw-clear .wp-game .lp-paints button span { width: 48px; height: 48px; }
  .mlw-clear .wp-game .lp-puzzle { gap: 12px; }
  .mlw-clear .wp-game .lp-puzzle-tray { gap: 10px; }
  .mlw-clear .wp-game .lp-puzzle-tray button { width: 22%; height: auto; aspect-ratio: 1; }
  .mlw-clear .wp-game .pp-bubble { gap: 7px; font-size: 21px; }
  .mlw-clear .wp-game .pp-mini-friend { width: 55px; height: 72px; }
  .mlw-clear .wp-game .pp-arrows { grid-template-columns: repeat(3, 65px); grid-template-rows: repeat(2, 58px); gap: 8px; }
  .mlw-clear .wp-game .pp-picture { padding: 14px; }
  .mlw-clear .wp-game .pp-picture > svg { width: 175px; height: 175px; }
  .mlw-clear .wp-game .pp-choices { gap: 10px; }
  .mlw-clear .wp-game .pp-choices > button { width: 29%; min-height: 88px; }
  .mlw-clear .wp-game .pp-bead-string { gap: 20px; }
  .mlw-clear .wp-game .pp-bead-string > svg, .mlw-clear .wp-game .pp-bead-hole { width: 78px; height: 78px; }
  .mlw-clear .wp-game .mlw-prompt .gentle-math-picture { height: 125px; }
  .mlw-clear .wp-game .gentle-number-keys { gap: 5px; }
  .mlw-clear .wp-game .gentle-number-keys button { height: 52px; font-size: 27px; }
  .mlw-clear .wp-game .wq-count { grid-template-columns: repeat(5, 35px); grid-template-rows: repeat(4, 35px); gap: 4px; }
  .mlw-clear #gentleTravelStage { height: 295px; }
  .mlw-clear #gentleTravelStage .gentle-team { width: 120px; height: 155px; left: calc(3% + var(--step) * 50%); }
  .mlw-clear #gentleTravelStage .gentle-bello { width: 76px; height: 110px; left: 75%; }
  .mlw-clear .gentle-travel-stars { gap: 8px; }
  .mlw-clear .gentle-travel-stars > span { width: 36px; height: 36px; }
  .mlw-clear .gentle-travel-actions { gap: 7px; }
  .mlw-clear .gentle-travel-actions button { min-height: 54px; font-size: 15px; gap: 5px; padding: 8px 5px; }
  .mlw-clear .gentle-travel-actions svg { width: 21px; height: 21px; }
  .mlw-clear .mlw-card-art { height: 110px; }
  .mlw-clear .mlw-card-copy strong { font-size: 20px; }
  .mlw-clear .mlw-card-copy small { font-size: 11px; }
}
@media (max-width: 350px) {
  .mlw-clear .template-list { grid-template-columns: minmax(0, 1fr); }
  .mlw-clear .preview-wrap { height: 190px; }
  .mlw-clear .topbar-actions { justify-content: flex-start; }
  .mlw-clear .wp-game .pp-choices > button { min-height: 75px; font-size: 38px; }
  .mlw-clear .wp-game .wq-options { gap: 7px; }
  .mlw-clear .wp-game .wq-option { min-height: 76px; }
}
/* The new journey toys should grow with their landscape, too. Their compact
   upper row stays clear of the friends travelling across the lower scene. */
@media (min-width: 901px) {
  .mlw-clear #pjWorldToys { inset-inline: 8%; gap: clamp(12px, 2vw, 40px); }
  .mlw-clear #pjWorldToys .pj-toy {
    width: clamp(96px, 5.4vw, 180px);
    min-width: 0;
    min-height: 0;
    padding: 4px 6px 7px;
    gap: 2px;
    border-radius: clamp(18px, 1.1vw, 30px);
  }
  .mlw-clear #pjWorldToys .pj-toy > svg {
    width: clamp(64px, 3.8vw, 130px) !important;
    height: clamp(64px, 3.8vw, 130px) !important;
  }
  .mlw-clear #pjWorldToys .pj-toy > span {
    max-width: 100%;
    font-size: clamp(13px, .65vw, 18px);
    line-height: 1.25;
  }
  .mlw-clear #pjDiscoveryPath .pj-stone {
    width: clamp(48px, 2.7vw, 90px);
    height: clamp(42px, 2.35vw, 78px);
    border-width: clamp(2px, .11vw, 4px);
  }
  .mlw-clear #pjDiscoveryPath .pj-stone > svg {
    width: clamp(31px, 1.8vw, 60px) !important;
    height: clamp(31px, 1.8vw, 60px) !important;
  }
  .mlw-clear #pjDiscoveryPath .pj-stone > b { font-size: clamp(17px, 1vw, 29px); }
  .mlw-clear #pjDiscoveryPath .pj-stone.is-found > b {
    width: clamp(20px, 1.1vw, 30px);
    height: clamp(20px, 1.1vw, 30px);
    font-size: clamp(12px, .65vw, 18px);
  }
  .mlw-clear #pjReaction { max-width: 1000px; font-size: clamp(14px, 1vw, 22px) !important; }
}
@media print {
  .mlw-clear .app-shell { display: block; }
  .mlw-clear .main-content { max-width: none; padding: 0; margin: 0 !important; }
}