/* The phone layout (phone.js). The sheet is linked with a media attribute: it applies on phones only, so nothing in it has to be undone for wider screens. */

/* Shell: a slim top bar, pages with a 16px gutter, three tabs under the thumb */
body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
body:is([data-screen=brief],[data-screen=result],[data-screen=chapter],[data-screen=game]){padding-bottom:0}
.m-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:58px;padding:0 12px 0 16px;border-bottom:1px solid var(--line);background:#f8f5ebf2;backdrop-filter:blur(10px)}
.m-brand{display:flex;align-items:center;gap:11px;min-height:44px;margin-right:auto;padding:0;border:0;background:none;color:var(--ink)}
.m-brand .brand-mark{padding:3px 8px;border-radius:9px 9px 7px 7px;font-size:14px;outline-offset:2px}
.m-brand b{font-family:var(--serif);font-size:21px;font-weight:400;letter-spacing:.06em}
.m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fbf9f0f7;backdrop-filter:blur(10px)}
.m-tab{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;min-height:56px;padding:5px 0 4px;border:0;border-radius:14px;background:none;color:#7d8575;font-size:13px;font-weight:600}
.m-tab .icon{width:24px;height:24px}
.m-tab.active{background:#e8edda;color:var(--green-dark)}
.m-tabs.flow,.m-rail-tools{display:none}
.m-tab i{position:absolute;top:3px;left:calc(50% + 9px);min-width:22px;padding:0 5px;border-radius:11px;background:var(--green);color:#fffcf0;font-size:13px;font-style:normal;line-height:20px;text-align:center}
.m-page{padding:14px 16px 20px}
.m-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.m-section-title h2{margin:0;font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:.06em}
.m-section-title span{color:#899077;font-size:13px}
.m-section-title b{color:var(--green);font-size:17px}
.m-panel{margin:0 0 12px;padding:14px 16px;border:1px solid #dcdcc6;border-radius:18px;background:#fffdf6}
.m-back{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fffdf480;color:var(--ink)}
.m-back .icon{width:20px;height:20px}

/* Decks: cards to swipe sideways, one to a screen, the edge of the next showing. A deck that scrolls cuts off what reaches outside it, so it has room above and below for its cards' shadows (taken back by its margins). */
.m-deck{position:relative;display:flex;gap:12px;margin:-10px -16px -20px;padding:14px 16px 30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.m-deck::-webkit-scrollbar{display:none}
.m-card{flex:0 0 calc(100% - 26px);scroll-snap-align:center;min-width:0;padding:16px;border:1px solid #dcdcc6;border-radius:20px;background:#fffdf6;box-shadow:0 8px 22px #3c513614}
.m-deck>.m-card:only-child{flex-basis:100%}
.m-dots{display:flex;justify-content:center;gap:7px;margin:2px 0 14px}
.m-dots i{width:7px;height:7px;border-radius:4px;background:#d5d8c4;transition:width .2s,background .2s}
.m-dots i.on{width:20px;background:var(--green)}
.m-counter{margin:0 0 16px;text-align:center;color:#899077;font-size:13px}
.m-counter b{color:var(--green);font-size:16px}
/* Strips: a row of small things to scroll sideways */
.m-strip{display:flex;gap:10px;margin:0 -16px;padding:2px 16px 6px;overflow-x:auto;scrollbar-width:none}
.m-strip::-webkit-scrollbar{display:none}
/* A page's main buttons stay at the bottom of the screen; such a page is at least one screen tall so they rest on its edge */
.m-brief,.m-result,.m-chapter-page{display:flex;flex-direction:column;min-height:calc(100dvh - 58px)}
.m-page>:nth-last-child(2){margin-bottom:14px}
.m-actions{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;margin:auto -16px -20px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#f8f5ebf7;backdrop-filter:blur(10px)}
.m-actions .btn{flex:1 1 0;min-width:0;min-height:52px;padding:10px 12px;gap:8px}
.m-actions .btn.primary{flex-grow:1.6}

/* Home: the call to action first, then the five chapters as a deck of level lists */
.m-hero{margin:0 0 22px}
.m-hero-art{height:176px;margin:-14px -16px 0;overflow:hidden}
.m-hero-art>*{display:block;width:100%;height:100%}
.m-hero h1{margin:12px 0 14px;font-family:var(--serif);font-size:31px;font-weight:400;line-height:1.35;letter-spacing:.08em}
.m-hero h1 em{font-style:normal;color:var(--green)}
.m-hero .btn{width:100%;min-height:54px;gap:10px;font-size:17px}
.m-chapter{padding:14px}
.m-chapter-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.m-chapter-head>div{flex:1;min-width:0}
.m-chapter-head small{color:#899077;font-size:13px}
.m-chapter-head h3{margin:0;font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:.06em}
.m-chapter-head img{width:46px;height:46px}
.m-chapter-head img.dim{opacity:.35;filter:grayscale(1)}
/* A level row uses plain blocks with the picture and the state pinned to its sides, not flex or grid: Safari sized such a button for a single line, and a wrapped name pushed the lock out of the box. */
.m-level{position:relative;display:block;width:100%;min-height:62px;margin-top:6px;padding:8px 84px 8px 70px;overflow:hidden;border:1px solid #e3e3d0;border-radius:14px;background:#faf8ee;color:var(--ink);text-align:left}
.m-level img{position:absolute;left:10px;top:50%;width:50px;height:50px;margin-top:-25px;object-fit:contain}
.m-level-text,.m-level-text small,.m-level-text b{display:block}
.m-level-text small{color:#899077;font-size:13px;white-space:nowrap}
.m-level-text b{overflow:hidden;font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.m-level-state{position:absolute;right:12px;top:50%;display:flex;align-items:center;height:24px;margin-top:-12px;color:#a2a78f}
.m-level-state .icon{width:18px;height:18px}
.m-level-state em{padding:4px 12px;border-radius:999px;background:var(--green);color:#fffcf0;font-size:13px;font-style:normal;font-weight:600}
.m-level.current{border-color:var(--green);background:#f1f5e6;box-shadow:0 0 0 2px #355b4222}
.m-level.locked{opacity:.62}
.m-level.locked img{filter:grayscale(.6)}
.m-friends{margin-top:6px}
.m-friend-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.m-friend-row button{display:grid;justify-items:center;gap:2px;min-height:44px;padding:8px 0 6px;border:1px solid #e3e3d0;border-radius:14px;background:#fffdf6;color:var(--ink);font-size:13px}
.m-friend-row img{width:auto;height:52px}

/* Before a level: everything on one screen, the dishes in a strip, start and practice at the bottom */
.m-brief-top{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.m-brief-top>div{flex:1;min-width:0}
.m-brief-top h1{margin:2px 0 0;font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.3;letter-spacing:.06em}
.m-brief-top>img{width:54px;height:54px}
.m-dish{position:relative;flex:0 0 112px;display:grid;justify-items:center;gap:4px;padding:24px 8px 10px;border:1px solid #e3e3d0;border-radius:14px;background:#faf8ee;color:var(--ink)}
.m-dish img{width:84px;height:84px;object-fit:contain}
.m-dish strong{font-size:14px;font-weight:600;white-space:nowrap}
.m-dish.featured{border-color:#d9c27f;background:#fbf6e2}
.m-dish .feature-tag{top:5px;left:6px}
/* (the companion says the level's line, see "the story" below; the three steps and the numbers follow) */
.m-guide-facts{margin-top:10px}
.m-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.m-steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 0;border-radius:12px;background:#f1f3e6;font-size:14px}
.m-steps .icon{width:20px;height:20px;color:#5f7d55}
.m-meta{margin:8px 0 0;color:#7d8575;font-size:13px;text-align:center}
.m-guide .goal-note{margin:8px 0 0;padding:8px 12px}
.m-page .rules-details summary,.m-page .result-review summary{display:flex;align-items:center;min-height:44px;padding:0;font-size:15px;font-weight:600}
.m-page .rules-details p,.m-page .result-review p{margin:4px 0 6px;color:#66705d;font-size:14px;line-height:1.8}
.m-page .result-review h3{margin:10px 0 2px;font-size:15px}
.m-actions .locked-note{flex:1;margin:0;text-align:center}

/* The story (story.js). A line said on a page: in its bubble the companion's name and the listen button share a
   row, the words run below. */
.speech{gap:12px}
.speech>img{width:56px;height:66px}
.speech-bubble{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:6px 10px 10px 14px}
.speech-bubble>b{margin:0;line-height:32px}
.speech-bubble>.voice-button{grid-column:2;grid-row:1;margin:0}
.speech-bubble>p{grid-column:1/-1;font-size:15px;line-height:1.7}
/* More to know about a card (more.js): the tabs stay on one row, which can be swiped where it is too long. */
.more{width:100%;gap:8px}
.more-tabs{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.more-tabs::-webkit-scrollbar{display:none}
.more-tabs{gap:4px}
.more-tabs button{flex:none;padding:0 10px;font-size:14px}
/* (the narrowest phones: four tabs still fit their row) */
@media (max-width:370px){
  .more-tabs button{padding:0 8px;font-size:13px}
}
.dish-detail .more-text{min-height:6em;text-align:left}
.m-knowledge .more-text,.m-chapter-about .more-text{min-height:7.4em}
/* A card of the atlas that has tabs, upright: a smaller picture, name and cuisine on one row, the listen button in the corner, so tabs and text are in view without scrolling. */
@media (orientation:portrait){
  .m-knowledge:has(.more){position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .m-knowledge:has(.more)>*{grid-column:1/-1}
  .m-knowledge:has(.more)>h2{grid-column:1;grid-row:3;justify-self:end}
  .m-knowledge:has(.more)>.detail-tag{grid-column:2;grid-row:3;justify-self:start;align-self:center}
  .m-knowledge:has(.more) .m-knowledge-art img{width:min(50%,150px)}
  .m-knowledge .more-voice{position:absolute;top:6px;right:8px}
  .m-knowledge .more-voice .voice-button{justify-content:center;width:44px;padding:0}
  .m-knowledge .more-voice .voice-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* The story's stage on a phone: the game's name at the top, the start button near the bottom, under the thumb; the speaker stands on the left shoulder of the box, which is as wide as the screen. */
/* (upright, the picture keeps to the lower part of the screen, so the game's name stands on clear paper above it) */
.stage-scene{top:34%}
.stage:not(.at-start) .stage-scene{opacity:.42}
.stage-scene::after{background:linear-gradient(#f8f5eb 0%,#f8f5eb00 30%)}
.stage-title{inset:0;width:auto;display:flex;flex-direction:column;align-items:center;padding:calc(72px + env(safe-area-inset-top)) 24px calc(64px + env(safe-area-inset-bottom));text-align:center;transform:none}
.stage:not(.at-start) .stage-title{transform:translateY(-14px)}
.stage-title .brand-mark{padding:6px 12px;font-size:20px}
.stage-title h1{margin:20px 0 8px;font-size:42px}
.stage-title p{font-size:16px}
.stage-title .btn{min-width:220px;margin-top:auto}
.stage-talk{display:block;width:calc(100% - 24px);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.stage-who{position:relative;z-index:1;width:104px;margin:0 0 -16px 12px}
.stage-speaker{width:104px;height:118px}
.stage-box{min-height:168px;padding:24px 18px 36px}
.stage-name{font-size:22px}
.stage-line{font-size:17px;line-height:1.8}
.stage-voice{top:10px;right:10px}
.stage-hint{right:16px}
.help-actions .btn{min-height:52px;padding:10px 12px}

/* After a level: score and reward side by side as two cards */
.m-result-head{margin-bottom:10px;text-align:center}
.m-result-head h1{margin:4px 0 8px;font-family:var(--serif);font-size:33px;font-weight:400;letter-spacing:.1em}
.m-result-head .stars{font-size:26px}
.m-result .journey-progress{justify-content:center;margin-top:8px}
.m-score,.m-reward{display:grid;justify-items:center;align-content:center;min-height:clamp(190px,calc(var(--screen,100vh) - 446px),300px);text-align:center}
.m-score>span{color:#7d8575;font-size:14px}
.m-score .big-score{font-size:clamp(54px,calc(var(--screen,100vh) - 596px),84px);line-height:1.3}
.m-score .big-score small{font-size:16px}
.m-score .score-metrics{width:100%;gap:36px;padding:14px 0 0}
.m-reward .reward-dish img{width:clamp(58px,calc(var(--screen,100vh) - 592px),150px);height:clamp(58px,calc(var(--screen,100vh) - 592px),150px);object-fit:contain}
.m-reward h2{margin:6px 0 2px;font-family:var(--serif);font-size:25px;font-weight:400}
.m-reward p{margin:0 0 12px;color:#7d8575;font-size:14px}
.m-reward>img{width:auto;height:130px}
.m-reward .btn{min-height:48px}

/* A chapter's summary: four cards — the badge with the companion's closing line, the cuisine, the dishes, the quiz */
.m-chapter-page .m-card{display:grid;justify-items:center;align-content:start;gap:8px;min-height:58dvh;text-align:center}
.m-chapter-badge .badge-halo{width:128px;height:128px;margin:0 auto}
.m-chapter-badge h1{margin:0;font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:.04em}
.m-chapter-badge .speech{width:100%}
.m-chapter-about{align-content:center!important}
.m-chapter-about h2{margin:0;font-family:var(--serif);font-size:31px;font-weight:400;letter-spacing:.1em}
.m-chapter-about p{margin:0;color:#4f6247;font-size:16px;line-height:1.85;text-align:left}
.m-dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.m-dish-grid button{display:grid;justify-items:center;gap:2px;min-height:44px;padding:6px 0;border:0;background:none;color:var(--ink);font-size:13px}
.m-dish-grid img{width:76px;height:76px;object-fit:contain}
.m-chapter-dishes .keepsake-frame{width:100%;padding:6px}
.m-keepsake-title{font-family:var(--serif);font-size:17px;font-weight:400}
/* (the quiz panel of the wide page has a margin above and below; as a card it has none, or it would make the whole row of cards taller) */
.m-quiz{align-content:center!important;margin:0;background:#f1f3e6}
.m-quiz h2{margin:0;font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.5}
.m-quiz p{margin:0;color:#7d8575;font-size:14px}
.m-quiz .quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:6px 0 0}
.m-quiz .quiz-options .btn{min-height:52px;padding:10px}
.m-quiz .decor-reward{justify-content:center}
.m-quiz .decor-reward img{width:90px}

/* The atlas: a deck of knowledge cards, a row of chips to pick the cuisine */
.m-chips{display:flex;gap:8px;margin:0 -16px 12px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.m-chips::-webkit-scrollbar{display:none}
.m-chips button{flex:none;min-height:44px;padding:0 16px;border:1px solid #d5d8c4;border-radius:999px;background:#fffdf6;color:#5d6956;font-size:15px}
.m-chips button.active{border-color:var(--green);background:var(--green);color:#fffcf0}
.m-knowledge{display:grid;justify-items:center;align-content:start;gap:6px;min-height:calc(100dvh - 318px);text-align:center}
.m-knowledge-art{width:100%;padding:0;border:0;background:none}
.m-knowledge-art img{width:min(62%,220px);aspect-ratio:1;object-fit:contain}
.m-knowledge h2{margin:2px 0 0;font-family:var(--serif);font-size:27px;font-weight:400;letter-spacing:.06em}
.m-knowledge p{margin:2px 0 0;font-size:16px;line-height:1.85;text-align:left}
.m-knowledge.pending .m-knowledge-art img{filter:grayscale(1) opacity(.45)}
.m-knowledge .m-pending-note{display:flex;align-items:center;gap:6px;color:#899077;font-size:15px}
.m-pending-note .icon{flex:none;width:18px;height:18px}
.m-badges{margin-top:8px}
.m-badge,.m-art{flex:0 0 104px;display:grid;justify-items:center;align-content:start;gap:4px;min-width:0;min-height:44px;overflow:hidden;padding:10px 6px;border:1px solid #e3e3d0;border-radius:14px;background:#fffdf6;color:var(--ink);font-size:13px}
.m-badge img{width:56px;height:56px;filter:grayscale(1) opacity(.4)}
.m-badge.unlocked img{filter:none}
.m-art{flex-basis:136px}
.m-art>img{display:block;width:100%;height:auto;border-radius:8px}
/* Sizes in pixels on purpose: Safari ignores a percentage height inside a box sized by aspect-ratio and draws the
   picture at its full size, which also stretched the card. */
.m-art-locked{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:92px;overflow:hidden;border-radius:8px;background:#eeeede}
.m-art-locked img{width:auto;max-width:100%;height:66px;object-fit:contain;opacity:.3;filter:grayscale(1)}
.m-art-locked .icon{position:absolute;right:6px;bottom:6px;width:16px;height:16px;color:#8d927c}

/* Dialogs rise from the bottom edge as sheets */
.modal-backdrop{align-items:flex-end;padding:0}
.modal{max-width:none;max-height:92dvh;padding:26px 20px calc(22px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:22px 22px 0 0}
.modal-backdrop.opening>.modal{animation-name:sheetIn}
@keyframes sheetIn{from{transform:translateY(48px);opacity:0}}

/* A level fills the screen: no top bar, no tabs */
.page.game-page,.page.paused-page{width:calc(100% - 24px);padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}

/* A phone on its side: wide, but only a few hundred pixels tall. The same pages laid out across: tabs as a rail on the left, main buttons at the bottom right, pictures beside their text. Sizes are pixels or follow the width, never a percentage height (Safari). */
@media (orientation:landscape) and (max-height:500px){
  /* Shell */
  body,body:is([data-screen=brief],[data-screen=result],[data-screen=chapter]){padding:0 var(--safe-right,env(safe-area-inset-right)) 0 calc(76px + var(--safe-left,env(safe-area-inset-left)))}
  body[data-screen=game]{padding:0 var(--safe-right,env(safe-area-inset-right)) 0 var(--safe-left,env(safe-area-inset-left))}
  .m-top{display:none}
  .m-tabs,.m-tabs.flow{inset:0 auto 0 0;display:flex;flex-direction:column;gap:4px;width:calc(76px + var(--safe-left,env(safe-area-inset-left)));padding:8px 6px 8px calc(6px + var(--safe-left,env(safe-area-inset-left)));border-top:0;border-right:1px solid var(--line)}
  .m-tab{flex:none;min-height:52px}
  .m-rail-tools{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto}
  .m-page{padding:12px 16px 16px}
  .m-section-title{margin-bottom:6px}
  /* A page's main buttons: a column at the bottom right */
  .m-brief,.m-result,.m-chapter-page{display:block;min-height:0;padding-right:212px}
  .m-page>:nth-last-child(2){margin-bottom:0}
  .m-actions{position:fixed;right:calc(12px + var(--safe-right,env(safe-area-inset-right)));bottom:12px;flex-direction:column;align-items:stretch;width:184px;margin:0;padding:0;border:0;background:none;backdrop-filter:none}
  .m-actions .btn,.m-actions .btn.primary{flex:none}

  /* Home: the call to action on the left, the chapters on the right, each with its levels in two columns */
  .m-home{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:16px;align-items:start}
  .m-hero{margin:0}
  .m-hero-art{height:118px;margin:-12px 0 0 -16px;border-radius:0 0 20px 0}
  .m-hero h1{margin:8px 0 10px;font-size:25px}
  .m-hero .btn{min-height:50px;font-size:16px}
  .m-journey{min-width:0}
  .m-friends{grid-column:1/-1}
  .m-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-content:start;padding:12px}
  .m-chapter-head{grid-column:1/-1;margin-bottom:2px}
  /* The chapters' deck stands beside the hero here, so its left edge is in the middle of the screen: the card before
     the one in view fades out there instead of being cut off at a line. */
  .m-home .m-deck{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px);mask-image:linear-gradient(90deg,transparent,#000 18px)}
  .m-chapter-head img{width:40px;height:40px}
  /* A level row is narrow here: its stars, lock or "start" go under the name instead of beside it */
  .m-level{min-height:58px;margin-top:5px;padding:5px 8px 5px 56px}
  .m-level img{left:6px;width:42px;height:42px;margin-top:-21px}
  .m-level-text b{font-size:14px;line-height:1.25;white-space:normal}
  .m-level-state{position:static;height:auto;margin-top:1px;line-height:1}
  .m-level-state .stars{gap:1px;font-size:13px}
  .m-level-state em{padding:2px 10px}
  .m-level-state .icon{display:block;width:15px;height:15px}
  .m-dots{margin-bottom:8px}

  /* Before a level */
  .m-brief-top{margin-bottom:8px}
  .m-brief-top h1{font-size:23px}
  .m-brief-top>img{width:44px;height:44px}
  .m-brief .m-panel{margin-bottom:8px;padding:10px 12px}
  /* Every dish of the level is in view, five to a row, so nothing has to be swiped; the three steps move to the
     right-hand column above the buttons. */
  .m-swipe-hint{display:none}
  .m-brief .m-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;overflow:visible}
  .m-brief .m-strip .m-dish img{max-width:100%;height:auto;aspect-ratio:1}
  /* (seven still stand in a row where the screen is not wide: closer together, the names on two lines) */
  @media (max-width:720px){
    .m-brief-top{margin-bottom:4px}
    .m-brief .m-strip{gap:4px}
    .m-brief .m-dish{padding:18px 1px 4px}
    .m-brief .m-dish strong{text-wrap:balance}
    /* (the tag of the level's own dish is cut to its last two characters, which fit the tile) */
    .m-brief .m-dish .feature-tag{font-size:0;letter-spacing:0}
    .m-brief .m-dish .feature-tag::after{content:"名菜";font-size:13px}
  }
  /* (the narrowest screens: four and three, like the shelf) */
  @media (max-width:600px){
    .m-brief .m-strip{grid-template-columns:repeat(8,minmax(0,1fr))}
    .m-brief .m-strip>.m-dish{grid-column:span 2}
    .m-brief .m-strip>.m-dish:nth-child(5){grid-column:2/span 2}
  }
  .m-dish{padding:20px 2px 6px}
  .m-dish img{width:46px;height:46px}
  .m-dish strong{font-size:13px;line-height:1.25;white-space:normal;text-align:center}
  .m-dish .feature-tag{left:0;right:0;top:3px;padding:0;text-align:center;line-height:1.4;letter-spacing:-.02em;white-space:nowrap}
  .m-brief .m-guide{position:fixed;right:calc(12px + var(--safe-right,env(safe-area-inset-right)));bottom:138px;display:block;width:184px;margin:0;padding:8px}
  /* A line of the story has no bubble here: the companion's small picture, its name and a round listen button on one row, the words under them. Before a level this tops the right-hand column; the hint about a demonstration is left to the practice button. */
  :is(.m-guide,.m-chapter-badge) .speech{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;column-gap:8px;row-gap:2px;align-items:center}
  :is(.m-guide,.m-chapter-badge) .speech>img{width:40px;height:44px}
  :is(.m-guide,.m-chapter-badge) .speech-bubble{display:contents}
  :is(.m-guide,.m-chapter-badge) .speech-bubble::before{content:none}
  :is(.m-guide,.m-chapter-badge) .speech-bubble>b{grid-column:2;grid-row:1;font-size:14px}
  :is(.m-guide,.m-chapter-badge) .speech-bubble>.voice-button{grid-column:3;grid-row:1;justify-content:center;width:44px;padding:0}
  :is(.m-guide,.m-chapter-badge) .speech-bubble>.voice-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :is(.m-guide,.m-chapter-badge) .speech-bubble>p{grid-column:1/-1;grid-row:2;font-size:13px;line-height:1.5}
  .m-guide-facts{margin-top:6px}
  .m-steps{gap:4px}
  .m-steps li{padding:2px 0;font-size:13px}
  .m-steps .icon,.m-guide .goal-note{display:none}
  .m-meta{margin-top:4px}

  /* After a level: both cards at once */
  .m-result-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;margin-bottom:8px}
  .m-result-head .eyebrow{flex-basis:100%}
  .m-result-head h1{margin:0;font-size:27px}
  .m-result-head .stars{font-size:22px}
  .m-result .journey-progress{margin-top:0}
  .m-result .m-deck{margin:0;padding:0 0 8px;overflow:visible;scroll-snap-type:none}
  .m-result .m-deck>.m-card{flex:1 1 0;min-height:0;padding:12px}
  .m-result .m-dots{display:none}
  .m-score .big-score{font-size:58px;line-height:1.2}
  .m-score .score-metrics{gap:24px;padding-top:8px}
  .m-reward .reward-dish img{width:92px;height:92px}
  .m-reward h2{margin:2px 0 0;font-size:21px}
  .m-reward p{margin-bottom:6px}
  .m-reward>img{height:88px}
  .m-reward .btn{min-height:44px;padding:8px 14px}

  /* A chapter's summary: each card puts its picture beside its text */
  .m-chapter-page{padding-bottom:8px}
  /* (the deck ends beside the buttons: the card after the one in view fades out there) */
  .m-chapter-page .m-deck{-webkit-mask-image:linear-gradient(270deg,transparent,#000 18px);mask-image:linear-gradient(270deg,transparent,#000 18px)}
  .m-chapter-page .m-card{min-height:0;align-content:center;padding:12px 16px}
  .m-chapter-badge{grid-template-columns:108px minmax(0,1fr);column-gap:14px;justify-items:start!important;text-align:left!important}
  .m-chapter-badge .badge-halo{grid-column:1;grid-row:1/span 3;align-self:center;width:108px;height:108px}
  .m-chapter-badge h1{font-size:23px}
  .m-chapter-badge .speech-bubble>p{font-size:14px;line-height:1.55}
  /* The last chapter asks about all five provinces: its five answers stand in a row (in two where the card is narrow) */
  .m-quiz .quiz-options{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
  .m-quiz .quiz-options .btn{min-height:46px}
  .m-quiz h2{font-size:21px;line-height:1.4}
  /* (a narrow card: a smaller badge leaves the closing line more room) */
  @media (max-width:700px){
    .m-chapter-badge{grid-template-columns:80px minmax(0,1fr);column-gap:12px}
    .m-chapter-badge .badge-halo{width:80px;height:80px}
  }
  /* More to know: the tabs and a round listen button share a row, the text runs under them */
  .more{grid-template-columns:minmax(0,1fr) 44px;justify-items:start;align-items:center;column-gap:8px;row-gap:4px}
  .more-tabs{grid-column:1;grid-row:1}
  .more-voice{grid-column:2;grid-row:1}
  .more-voice .voice-button{justify-content:center;width:44px;padding:0}
  .more-voice .voice-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .more-text{grid-column:1/-1;grid-row:2}
  .dish-detail .more-text{min-height:calc(3.4em + 8px)}
  .m-knowledge .more-text{min-height:calc(3.4em + 8px)}
  /* The cuisine: its name, the tabs and the listen button on one row, the words under them */
  .m-chapter-about{grid-template-columns:auto minmax(0,1fr) 44px;column-gap:12px;justify-items:start!important;text-align:left!important}
  .m-chapter-about>.eyebrow{grid-column:1/-1}
  .m-chapter-about h2{grid-column:1;grid-row:2;font-size:27px}
  .m-chapter-about .more{display:contents}
  .m-chapter-about .more-tabs{grid-column:2;grid-row:2}
  .m-chapter-about .more-voice{grid-column:3;grid-row:2}
  .m-chapter-about p{grid-column:1/-1;grid-row:3;font-size:15px;line-height:1.7}
  .m-chapter-about .more-text{min-height:calc(5.1em + 6px)}
  /* (narrower than this the name stands above the tabs) */
  @media (max-width:700px){
    .m-chapter-about h2{grid-column:1/-1;font-size:24px}
    .m-chapter-about .more-tabs{grid-column:1/span 2;grid-row:3}
    .m-chapter-about .more-voice{grid-row:3}
    .m-chapter-about p{grid-row:4}
  }
  .m-dish-grid{grid-template-columns:repeat(auto-fit,minmax(48px,1fr))}
  /* (only where the card is wide enough for both; narrower, the picture stays under the dishes) */
  @media (min-width:600px){
    .m-chapter-dishes:has(.keepsake-frame){grid-template-columns:minmax(150px,1.25fr) minmax(0,1fr);column-gap:12px;align-items:center}
    .m-chapter-dishes:has(.keepsake-frame)>.eyebrow{grid-column:1/-1}
    .m-chapter-dishes:has(.keepsake-frame) .m-dish-grid{grid-column:1;grid-row:2/span 2;grid-template-columns:repeat(3,1fr)}
    .m-chapter-dishes:has(.keepsake-frame) .keepsake-frame{grid-column:2;grid-row:2}
    .m-chapter-dishes:has(.keepsake-frame) .m-keepsake-title{grid-column:2;grid-row:3}
  }

  /* The atlas: picture on the left, text on the right */
  .m-chips{margin-bottom:8px}
  /* (the card's two small lines share a row, so the name, the tabs and the text are in view under the chips) */
  .m-knowledge{grid-template-columns:150px minmax(0,1fr) auto;column-gap:16px;row-gap:4px;justify-items:start;align-content:center;min-height:0;padding:12px 16px;text-align:left}
  .m-knowledge-art{grid-column:1;grid-row:1/span 4;align-self:center}
  .m-knowledge-art img{width:150px}
  .m-knowledge>.eyebrow{grid-column:2;grid-row:1;align-self:center}
  .m-knowledge>.detail-tag{grid-column:3;grid-row:1}
  .m-knowledge>h2{grid-column:2/-1;grid-row:2;font-size:23px}
  .m-knowledge>.more,.m-knowledge>p,.m-knowledge>.voice-button{grid-column:2/-1}
  .m-knowledge p{font-size:15px;line-height:1.7}
  /* (a narrow card has room for fewer words on a line) */
  @media (max-width:700px){
    .m-knowledge .more-text{min-height:calc(6.8em + 8px)}
  }
  @media (max-width:600px){
    .dish-detail .more-text{min-height:calc(5.1em + 8px)}
  }
  .m-counter{margin-bottom:10px}

  /* Dialogs sit in the middle again; there is no height for a sheet */
  .modal-backdrop{align-items:center;padding:10px calc(10px + var(--safe-right,env(safe-area-inset-right))) 10px calc(10px + var(--safe-left,env(safe-area-inset-left)))}
  .modal{max-width:600px;max-height:calc(100dvh - 20px);padding:20px 22px;border-width:1px;border-radius:20px}
  .modal-backdrop.opening>.modal{animation-name:modalIn}
  .dish-detail{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:16px;justify-items:start;text-align:left}
  .dish-detail .detail-image{grid-column:1;grid-row:1/span 6;align-self:center;width:150px;height:150px;object-fit:contain}
  .dish-detail h1{margin:6px 0}

  /* A level on its side: one slim bar on top (speaker, phase and clock, lamps, pause; no title), the order across the screen below it. While serving, the order is on the left and the dishes on the right, so nothing is scrolled against the clock. Picture heights follow the height of the screen. */
  .page.game-page,.page.paused-page{position:relative;width:auto;margin:0;padding:8px 12px}
  .game-top{position:absolute;top:8px;right:12px;z-index:3;align-items:center;gap:12px;height:48px;margin:0;padding:0}
  .game-top>div:first-child{display:none}
  /* The three lamps and the marker under the current one stay inside the bar, above the progress line */
  .lamps{gap:8px}
  .lamp .icon{width:22px;height:22px}
  .lamp small{margin-top:0;line-height:1.1}
  .lamp.current:after{bottom:-3px}
  .game-surface{margin:0}
  .stage-heading{min-height:48px;gap:10px;padding:0 260px 0 12px}
  .host-avatar{width:40px;height:40px}
  .stage-heading h2{margin:0;font-size:21px}
  .play-content{padding:6px 12px}
  .phase-remember,.phase-change,.phase-wait{min-height:0}
  .phase-wait{min-height:calc(100dvh - 90px)}
  .practice-controls{gap:12px;padding:0 12px 8px}
  .order-paper{padding:8px 12px}
  .paper-title{padding-bottom:6px}
  .order-slots{gap:8px}
  /* The whole order in one row, also on a sideways phone narrow enough to match the portrait rules (three to a row) */
  .order-paper .count-3{--slots:3}
  .order-paper .count-4{--slots:4;max-width:none}
  .order-paper .count-5{--slots:5}
  .order-paper .count-6{--slots:6}
  .order-paper .order-slot{min-height:0;padding:16px 4px 6px}
  .order-paper .order-slot>img{height:min(118px,calc(100dvh - 240px))}
  /* The change: its label and wording share one line, the positions run underneath */
  .change-message{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px}
  .change-message h3{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;margin:0;font-size:19px;line-height:1.5}
  .change-order{flex-basis:100%;margin-top:2px}
  .change-slot{min-height:0;padding:24px 6px 6px}
  .change-slot>img{height:clamp(30px,calc(100dvh - 318px),88px)}
  /* On the shortest screens the wording alone says how many changes there are */
  @media (max-height:340px){
    .change-badge{display:none}
    .change-message h3{font-size:17px;line-height:1.35}
    .change-slot{padding:22px 4px 4px}
  }
  /* Two independent columns: the order with its confirm button on the left, the heading and the dishes on the right; neither column's height stretches the other's rows. */
  .play-content.phase-serve{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:start;padding:6px 12px}
  .phase-serve .serve-slots{grid-column:1;grid-row:1;align-self:start;height:auto}
  .phase-serve .submit-order{grid-column:1;grid-row:2;align-self:end;justify-self:start;margin:0}
  .phase-serve .shelf-heading{grid-column:2;grid-row:1;align-self:start;margin:0}
  .phase-serve .dish-shelf{grid-column:2;grid-row:1/span 2;align-self:start;gap:6px;margin-top:27px;padding:8px}
  .serve-slots .order-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .serve-slots .order-slot{min-height:0;padding:14px 4px 4px}
  .serve-slots .order-slot>img{height:clamp(26px,calc(25dvh - 54px),46px)}
  .serve-slots .empty-plate{width:44px;height:clamp(22px,calc(25dvh - 58px),34px);margin:2px auto}
  .serve-slots .order-slot>small{margin-top:2px;line-height:1.3}
  /* (the longer selectors outrank the portrait rules that a sideways phone no wider than 650px also matches) */
  /* The shelf's seven dishes stand four and three, each with its name under its picture; the pictures take the height
     that two rows leave them. */
  .dish-shelf .dish-tile{flex-direction:column;gap:0;min-height:0;padding:4px}
  .dish-shelf .dish-tile img{width:100%;height:clamp(30px,calc(50dvh - 92px),84px)}
  .dish-shelf .dish-tile .dish-name{line-height:1.3;white-space:nowrap}
  .game-surface[data-phase=serve]{position:relative}
  .game-surface[data-phase=serve] .practice-controls{position:absolute;left:12px;bottom:8px;padding:0}
  .game-surface[data-phase=serve]:has(.practice-controls) .serve-slots{margin-bottom:54px}
  .play-content.phase-feedback{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:start}
  .phase-feedback .feedback-banner,.phase-feedback .practice-explanation{grid-column:1/-1}
  .feedback-banner{margin:0;padding:6px 14px}
  .practice-explanation{margin-top:0;padding:0 12px}
  .feedback-row .order-slot{min-height:0;padding:14px 4px 4px}
  .feedback-row{margin:0}
  .feedback-row .order-slot>img{height:clamp(34px,calc(100dvh - 324px),64px)}
  .feedback-row .empty-plate{width:44px;height:26px;margin:2px auto}
}

/* 山海宴 on a phone, in one screen: the picture to decorate, the shelf under it, the table as five rows of plates. The plates stay big enough for a finger and the picture takes the height that is left. Heights follow the window (vh, vw), never a percentage (Safari). */
.m-banquet{--plate:clamp(48px,16.4vw,74px);--plate-h:clamp(44px,calc((100vh - 304px - 57vw)/3),calc(var(--plate)*.86));display:flex;flex-direction:column;gap:8px;height:calc(100vh - 126px - env(safe-area-inset-bottom));min-height:430px;padding:8px 12px}
@supports (height:100dvh){
  .m-banquet{--plate-h:clamp(44px,calc((100dvh - 304px - 57vw)/3),calc(var(--plate)*.86));height:calc(100dvh - 126px - env(safe-area-inset-bottom))}
}
.m-banquet>.banquet-stage{flex:1 1 0;gap:8px;min-height:186px;max-height:calc(74vw + 66px);margin-bottom:0}
.m-banquet .banquet-scene{flex:1 1 0;height:auto;min-height:0;border-radius:14px}
.m-banquet .shelf-row{gap:8px}
.m-banquet .decor-shelf{gap:5px;padding:4px;border-radius:14px}
.m-banquet .decor-slot{width:48px;height:48px;border-radius:10px}
.m-banquet .decor-slot .decor-item{border-radius:10px}
.m-banquet .decor-slot .decor-item img{width:40px;height:40px}
.m-banquet .decor-slot .decor-item span,.m-banquet .decor-slot.locked span,.m-banquet .decor-slot.away i{display:none}
.m-banquet .decor-slot.away img{width:36px;height:36px}
.m-banquet .decor-slot.away span{position:absolute;right:1px;bottom:1px}
.m-memento{display:grid;justify-items:center;align-content:center;gap:1px;margin-left:auto;min-width:58px;min-height:48px;padding:3px 8px;border:0;border-radius:12px;background:var(--green);color:#fffcf0;font-size:13px;font-weight:600;line-height:1.3}
.m-memento .icon{width:18px;height:18px}
.m-banquet .feast-table{flex:none;flex-direction:row;justify-content:space-around;gap:2px;margin-bottom:5px;padding:6px 4px;border-width:6px;border-radius:20px;box-shadow:0 4px 0 #b59162}
.m-banquet .feast-row{flex:none;flex-direction:column;gap:3px}
.m-banquet .feast-label{width:var(--plate);min-height:44px;padding:2px}
.m-banquet .feast-label b{font-size:14px}
.m-banquet .feast-dishes{grid-template-columns:var(--plate);grid-auto-rows:var(--plate-h);gap:2px}
.m-banquet .feast-dishes>button{height:var(--plate-h)}
.m-banquet .feast-empty{height:calc(var(--plate-h)*.62)}
.m-home-screen-tip{margin:12px 0 4px;padding:0 12px;border-radius:12px;background:#f1f3e3;color:#5f6d4f;font-size:13px;line-height:1.7;text-align:left}
.m-home-screen-tip summary{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.m-home-screen-tip p{margin:0;padding:0 0 10px}
/* The switches of the settings stand a little closer on a phone. */
.modal .setting-row{padding:14px 0}

/* On its side: the picture with its shelf on the left, the table on the right. The picture is kept wide enough for the shop and the five friends (its height at most its width / 1.15). */
@media (orientation:landscape) and (max-height:500px){
  .m-banquet{--plate:clamp(44px,calc((100vh - 46px)/5),66px);--plate-h:var(--plate);flex-direction:row;gap:10px;height:100vh;min-height:0;padding:8px 12px}
  .m-banquet>.banquet-stage{justify-content:center;min-width:0;min-height:0;max-height:none}
  .m-banquet .banquet-scene{flex:1 1 auto;max-height:calc((100vw - 196px - 3*var(--plate) - var(--safe-left,0px) - var(--safe-right,0px))/1.15)}
  .m-banquet .shelf-row{flex-wrap:wrap;gap:6px}
  .m-banquet .decor-shelf{flex:0 1 auto;flex-wrap:wrap;gap:4px}
  .m-banquet .decor-slot{width:44px;height:44px}
  .m-banquet .decor-slot .decor-item img{width:38px;height:38px}
  .m-memento{min-height:44px}
  .m-banquet .feast-table{flex-direction:column;justify-content:flex-start;align-self:stretch;gap:2px;padding:5px 8px 5px 6px}
  .m-banquet .feast-row{flex:1;flex-direction:row;justify-content:center;gap:6px}
  .m-banquet .feast-label{width:46px;min-height:var(--plate-h)}
  .m-banquet .feast-dishes{grid-template-columns:repeat(3,var(--plate))}
  @supports (height:100dvh){
    .m-banquet{--plate:clamp(44px,calc((100dvh - 46px)/5),66px);--plate-h:var(--plate);height:100dvh}
  }
}

/* "Look at the orders again" is a button on a phone's result page and opens the three tables as a dialog (a list in the page would make it scroll). Upright it has a line of its own above the two main buttons. */
.m-result .m-actions{flex-wrap:wrap}
.m-review{flex:0 0 100%;order:-1;gap:6px;min-height:44px;margin:-8px 0 -4px}
.m-review .icon{width:17px;height:17px}
.review h1{margin:4px 0 12px}
.review-orders{display:grid;gap:10px}
.review-orders section{padding:10px 12px;border:1px solid #e1e4d2;border-radius:12px;background:#fffdf6}
.review-orders section.missed{border-color:#e9d3c8;background:#fdf6f1}
.review-orders h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 4px;font-size:15px}
.review-orders h3 small{color:#7d8e63;font-size:13px;font-weight:500}
.review-orders .missed h3 small{color:#a8674c}
.review-orders p{display:flex;flex-wrap:wrap;align-items:baseline;margin:2px 0;color:#57624d;font-size:14px;line-height:1.7}
.review-orders p b{flex:none;margin-right:8px;color:#8b927b;font-size:13px;font-weight:500}
.review-orders p span+span::before{content:'→';margin:0 5px;color:#b4bba3;font-weight:400}
.review-orders p span.off{color:#a8674c;font-weight:600}

/* Dialogs on a phone on its side go across: the picture on the left, the words on the right, everything sized to be read without scrolling. */
@media (orientation:landscape) and (max-height:500px){
  .modal-backdrop{padding:8px calc(8px + var(--safe-right,env(safe-area-inset-right))) 8px calc(8px + var(--safe-left,env(safe-area-inset-left)))}
  .modal,.modal.wide-modal,.modal:has(.memento){max-width:700px;max-height:calc(100vh - 16px);padding:14px 18px}
  @supports (height:100dvh){
    .modal,.modal.wide-modal{max-height:calc(100dvh - 16px)}
  }
  .modal-close{top:10px;right:12px}
  .modal h1{margin:2px 0 6px;font-size:24px}
  .modal>p{margin-bottom:8px;line-height:1.7}
  .modal .btn{min-height:46px}
  .modal .btn.wide{margin-top:8px}
  .modal .voice-button{margin-top:4px}

  /* A picture and a few lines: the chapter that is still closed, a keepsake that is not unlocked, the rest reminder */
  .modal.art-left{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:18px;align-content:center;text-align:left}
  .modal.art-left>.modal-badge{grid-column:1;grid-row:1/span 9;align-self:center;width:118px;height:118px;margin:0}
  .modal.art-left>:not(.modal-badge):not(.modal-close){grid-column:2}
  .modal.art-left>.eyebrow{padding-right:44px}
  .modal.art-left>.voice-button{justify-self:start}
  .modal.art-left>.detail-note{justify-content:flex-start;margin:6px 0 0;padding-top:6px}
  .modal.art-left>.btn.wide{justify-self:start;width:auto;padding-left:28px;padding-right:28px}

  /* A keepsake picture with its title and line beside it */
  .modal.keepsake-modal{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:18px;align-content:center;text-align:left}
  .modal.keepsake-modal>.keepsake-large{grid-column:1;grid-row:1/span 6;align-self:center;margin:0;max-height:calc(100vh - 48px);object-fit:contain}
  .modal.keepsake-modal>:not(.keepsake-large):not(.modal-close){grid-column:2}
  .modal.keepsake-modal>.eyebrow{padding-right:44px}
  .modal.keepsake-modal>.btn.wide{justify-self:start;width:auto;padding-left:28px;padding-right:28px}

  /* A dish card */
  .dish-detail{grid-template-columns:150px minmax(0,1fr);column-gap:18px}
  .dish-detail .detail-image{margin:0}
  .dish-detail h1{margin:4px 0;font-size:28px}
  .dish-detail p{line-height:1.7}
  .dish-detail .detail-note{margin-top:8px;padding-top:8px}

  /* The card at the end of a level: the dish on the left; the companion's words and the buttons on the right */
  .end-knowledge{display:grid;grid-template-columns:166px minmax(0,1fr);grid-template-rows:auto 1fr auto auto;column-gap:18px;row-gap:6px;align-items:center;text-align:left}
  .end-knowledge>.eyebrow{display:flex;align-items:center;grid-column:2;grid-row:1;min-height:42px;padding-right:52px}
  .knowledge-dish{grid-column:1;grid-row:1/span 4;flex-direction:column;gap:2px;margin:0;text-align:center}
  .knowledge-dish>img{width:150px;height:142px}
  .knowledge-dish h1{margin:6px 0 2px;font-size:26px}
  .knowledge-speaker{grid-column:2;grid-row:2;grid-template-columns:54px minmax(0,1fr);gap:10px;padding:8px 12px}
  .knowledge-speaker>img{width:54px;height:68px}
  .knowledge-speaker>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
  .knowledge-speaker>div>span{margin:0}
  .knowledge-speaker>div>.voice-button{grid-column:2;grid-row:1;margin:0}
  .knowledge-speaker p{grid-column:1/-1;line-height:1.65}
  .chapter-knowledge{grid-column:2;grid-row:3;margin:0;padding-top:6px}
  .chapter-knowledge p{margin-top:2px;line-height:1.6}
  .end-knowledge .knowledge-actions{grid-column:2;grid-row:4;flex-flow:row nowrap;justify-content:flex-start;gap:16px;margin-top:0}
  .end-knowledge .knowledge-actions>.primary{flex:none;min-width:150px}

  /* A companion: the portrait on the left, its words on the right, the other four and the way back along the bottom */
  .character-introduction{display:grid;grid-template-columns:146px minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:center;text-align:left}
  .character-portrait{grid-column:1;grid-row:1/span 5;width:146px;height:156px;margin:0}
  .character-introduction>.detail-tag{grid-column:2/-1;grid-row:1;justify-self:start}
  .character-introduction h1{grid-column:2/-1;grid-row:2;margin:0;font-size:28px;line-height:1.3}
  .character-traits{grid-column:2/-1;grid-row:3;justify-content:flex-start;gap:7px;margin:0}
  .character-traits li{padding:3px 12px}
  .character-greeting{grid-column:2/-1;grid-row:4;max-width:none;margin:0;line-height:1.7}
  .character-introduction>.voice-button{grid-column:2/-1;grid-row:5;justify-self:start;margin-top:0}
  .character-switcher{grid-column:1/3;grid-row:6;gap:6px;margin:6px 0 0}
  .character-switcher button{display:flex;align-items:center;justify-content:center;gap:4px;min-height:54px;padding:3px 4px}
  .character-switcher img{width:32px;height:40px;margin:0}
  .character-introduction>.btn.wide{grid-column:3;grid-row:6;align-self:stretch;width:auto;margin-top:6px;padding:8px 22px}

  /* The keepsake page: the fifteen dishes on the left, the rest on the right */
  .memento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:18px;row-gap:5px;align-items:center;text-align:left}
  .memento-rows{grid-column:1;grid-row:1/span 7;padding:8px}
  .memento>:not(.memento-rows){grid-column:2}
  .memento>.eyebrow{padding-right:44px}
  .memento h1{margin:0;font-size:24px}
  .memento-stats{justify-content:flex-start;margin:0}
  .memento-friends{justify-content:flex-start}
  .memento-words{margin:0;padding:8px 12px;font-size:14px;line-height:1.6}
  .memento-save{justify-self:start;min-height:44px;margin:0;padding-top:8px;padding-bottom:8px}

  /* How to play: the three steps side by side, the note and the button on one line */
  .modal.help-modal{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
  .modal.help-modal>.eyebrow,.modal.help-modal>h1,.modal.help-modal>.help-steps{grid-column:1/-1}
  .help-modal .help-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px;margin:4px 0 8px}
  .help-modal .help-steps>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 8px;margin:0}
  .help-modal .help-steps>div>b{width:30px;height:30px}
  .help-modal .help-steps>div>span{display:contents}
  .help-modal .help-steps h3{margin:0}
  .help-modal .help-steps p{grid-column:1/-1;line-height:1.65}
  .help-modal .goal-note{margin:0;padding:8px 12px;line-height:1.6}
  .help-modal .help-actions>.btn{flex:none;min-height:46px;padding-left:22px;padding-right:22px}

  /* The opening story can be heard again: its button stands beside the heading, clear of the close button */
  .modal.help-modal>h1{grid-column:1}
  .help-modal .help-actions{display:contents}
  .help-modal .story-again{grid-column:2;grid-row:2;justify-self:end;margin:0 50px 0 0}

  /* The story's stage: the start page's words stand at the left again, beside the shop; the speaker stands beside the
     box, which is as low as its two lines allow. */
  .stage-scene{top:0}
  .stage:not(.at-start) .stage-scene{opacity:.6}
  .stage-scene::after{background:linear-gradient(90deg,#f8f5ebf0 0%,#f8f5ebb0 30%,#f8f5eb00 58%)}
  .stage-title{inset:auto;left:calc(40px + var(--safe-left,env(safe-area-inset-left)));top:50%;display:block;width:min(360px,46vw);padding:0;text-align:left;transform:translateY(-50%)}
  .stage:not(.at-start) .stage-title{transform:translateY(calc(-50% - 14px))}
  .stage-title .brand-mark{padding:4px 10px;font-size:16px}
  .stage-title h1{margin:10px 0 4px;font-size:36px}
  .stage-title p{font-size:15px}
  .stage-title .btn{min-width:180px;min-height:52px;margin-top:18px;font-size:17px}
  .stage-skip{top:10px;right:calc(12px + var(--safe-right,env(safe-area-inset-right)))}
  .stage-talk{display:flex;gap:12px;width:calc(100% - 28px - var(--safe-left,env(safe-area-inset-left)) - var(--safe-right,env(safe-area-inset-right)));max-width:760px;padding-bottom:12px}
  .stage-who{width:auto;margin:0}
  .stage-speaker{width:96px;height:112px}
  .stage-box{min-height:112px;padding:12px 20px 30px}
  .stage-name{min-height:34px;font-size:21px}
  .stage-line{margin-top:2px;font-size:16px;line-height:1.65}
  .stage-voice{top:2px;right:8px}
  .stage-hint{bottom:7px}

  /* Settings: the switches two to a line */
  .modal.settings-modal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:center}
  .modal.settings-modal>.eyebrow,.modal.settings-modal>h1,.modal.settings-modal>.m-home-screen-tip{grid-column:1/-1}
  .settings-modal .setting-row{min-height:52px;padding:4px 0}
  .modal.settings-modal>h1{margin-bottom:2px}
  .settings-modal .m-home-screen-tip{margin:6px 0 0;line-height:1.6}
  .settings-modal .m-home-screen-tip p{padding-bottom:8px}
  .modal.settings-modal>.text-button{justify-self:start}
  .modal.settings-modal>.music-credit{justify-self:end;margin:0;text-align:right}

  /* The three tables side by side */
  .review h1{margin:0 0 8px}
  .review-orders{grid-template-columns:repeat(3,minmax(0,1fr))}
  .review .btn.wide{display:flex;width:auto;margin-left:auto;padding-left:28px;padding-right:28px}

  /* The result page in one screen: the orders button sits above the two main buttons at the bottom right */
  .m-review{flex:none;order:0;margin:0;border:1px solid #ced3bc;border-radius:10px;background:#fffdf6}
  /* The line that names the level stands at the top of that column, so the heading is one line and the cards have the height. */
  .m-result-head .eyebrow,.m-result .journey-progress{position:fixed;top:14px;right:calc(12px + var(--safe-right,env(safe-area-inset-right)));flex-basis:auto;width:184px;text-align:center}
  .m-result .journey-progress{top:40px;flex-direction:column;gap:4px;margin:0}
  .m-result-head{justify-content:flex-start;padding-left:6px}
  .m-result{padding-bottom:10px}
  .m-result .m-deck{padding-bottom:2px}
  .m-result .m-deck>.m-card{padding:8px 12px}

  /* Short screens (an iPhone with the browser's address bar showing is about 333px tall): a little less of everything */
  @media (max-height:345px){
    .modal,.modal.wide-modal,.modal:has(.memento){padding:10px 16px}
    .modal-close{top:6px;right:8px}
    .modal h1{font-size:22px}
    .modal.settings-modal>h1,.modal.help-modal>h1{display:flex;align-items:center;min-height:42px;margin:0}
    .modal.art-left>.modal-badge{width:100px;height:100px}
    .knowledge-dish>img{width:128px;height:120px}
    .knowledge-dish h1{font-size:23px}
    .character-portrait{width:122px;height:130px}
    .character-introduction h1{font-size:24px}
    .character-greeting{font-size:14px;line-height:1.6}
    .character-switcher button{min-height:48px}
    .character-switcher img{width:28px;height:36px}
    .memento-words{padding:6px 10px;line-height:1.5}
    .help-modal .help-steps p,.help-modal .goal-note{line-height:1.5}
    .settings-modal .setting-row{min-height:48px;padding:2px 0}
    .modal.settings-modal>.eyebrow,.modal.help-modal>.eyebrow{display:none}
    .help-modal .story-again{grid-row:1}
    .m-steps{display:none}
    /* A chapter's page on a short screen: each card keeps what it is for and drops its small line */
    .m-chapter-badge .journey-progress,.m-chapter-about>.eyebrow,.m-chapter-dishes>.eyebrow,.m-quiz>.eyebrow{display:none}
    .m-chapter-badge .badge-halo{grid-row:1/span 2}
    .m-reward .reward-dish img{width:76px;height:76px}
    .m-score .big-score{font-size:50px}
    .m-result .journey-progress{top:36px}
    .m-result .m-deck>.m-card{padding:6px 10px}
    .m-score .score-metrics{padding-top:4px}
    .m-reward .reward-dish img{width:66px;height:66px}
    .m-reward h2{margin:0;font-size:19px}
    .m-reward p{margin-bottom:3px}
    .memento{row-gap:3px}
    .memento h1{font-size:21px}
    .memento-friends img{height:32px}
    .memento-words{font-size:13px}
    .end-knowledge{row-gap:4px}
    .end-knowledge>.eyebrow{min-height:40px}
    .knowledge-speaker{padding:4px 10px}
    .knowledge-speaker p{line-height:1.5}
    .chapter-knowledge{padding-top:2px}
    .chapter-knowledge b{line-height:1.3}
    .chapter-knowledge p{margin-top:0;line-height:1.45}
    .end-knowledge .knowledge-actions .btn,.end-knowledge .knowledge-actions .text-button{min-height:44px}
    .memento-rows{gap:3px;padding:6px}
    .memento-dish{height:30px}
    .memento-badge{width:30px;height:30px}
    .memento-row{grid-template-columns:30px repeat(3,minmax(0,1fr))}
    .settings-modal .m-home-screen-tip{margin-top:4px;line-height:1.5}
    .settings-modal .setting-row small{margin-top:1px}
  }
}

/* The height of the screen as it is now (without the browser's bars where the browser can say so). */
@supports (height:100dvh){
  .m-result{--screen:100dvh}
}
/* A companion's sheet on a short upright phone: a smaller portrait and row of friends, so it needs no scrolling. */
@media (orientation:portrait) and (max-height:700px){
  .modal:has(.memento){max-height:calc(100vh - 8px);padding-top:18px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .character-portrait{width:124px;height:132px;margin:4px auto 8px}
  .character-introduction h1{margin:8px 0 6px;font-size:30px}
  .character-traits{margin-bottom:12px}
  .character-greeting{line-height:1.75}
  .character-switcher{margin:14px 0 8px}
  .character-switcher button{min-height:72px}
  .character-switcher img{width:36px;height:45px}
  .detail-image{width:172px;height:156px;margin-top:8px}
  .dish-detail h1{margin:10px 0}
  /* The card at the end of a chapter's test also says what the cuisine is like: a little less of everything, so the
     buttons under it are in view */
  .knowledge-dish{margin:4px 0 8px}
  .knowledge-dish>img{width:104px;height:100px}
  .chapter-knowledge{margin-top:12px;padding-top:10px}
  .chapter-knowledge p{margin-top:2px;line-height:1.75}
  .end-knowledge .knowledge-actions{margin-top:12px}
  /* A chapter's cards: the badge and the dishes a little smaller, so the page needs no scrolling either */
  .m-chapter-badge .badge-halo{width:104px;height:104px}
  .m-dish-grid img{width:54px;height:54px}
}
/* The narrowest screens lying on their side (under 620px): the two result cards are swiped again, one at a time, and
   the three tables of the orders dialog are set closer. */
@media (orientation:landscape) and (max-height:500px) and (max-width:620px){
  .m-result .m-deck{margin:0 -16px;padding:0 16px 2px;overflow-x:auto;scroll-snap-type:x mandatory}
  .m-result .m-deck>.m-card{flex:0 0 calc(100% - 26px)}
  .m-result .m-dots{display:flex;margin:4px 0 0}
  .review-orders{gap:6px}
  .review-orders section{padding:6px 8px}
  .review-orders h3{margin-bottom:2px;font-size:14px}
  .review-orders p{font-size:13px;line-height:1.55}
  .review-orders p b{margin-right:5px}
  .review-orders p span+span::before{margin:0 3px}
  .review .btn.wide{margin-top:6px}
}

/* 最矮的横屏：左栏的“玩法说明”“设置”“退出游戏”三个按钮都要放得下（2026-10-27 加了退出） */
@media (orientation:landscape) and (max-height:340px){
  .m-tabs,.m-tabs.flow{gap:3px}
  .m-tab{min-height:44px;gap:0;padding:3px 0 2px;font-size:12px;line-height:1.3}
  .m-tab svg{width:20px;height:20px}
  .m-rail-tools{gap:4px}
}