/* v128 — fixed action rows and panoramic chapter art. */
body #menu.menu[data-mode] :is(button,.level-name,#menuChapter,#chapterTitle,.chapter-state,#chapterTabLabel,.metric-label,#futureTitle,.preference>span:first-child,.about-credits dt),
.language-picker :is(button,h2){text-transform:uppercase}
body #menu.menu[data-mode] .preference-note{text-transform:none}
/* Loading/title brand geometry and the approved slogans are unchanged. */
body #menu.menu[data-mode] #menuPanel{min-width:0;max-width:100%}
body #menu.menu[data-mode] #menuButtons>button{min-width:0;max-width:100%;margin:0;overflow-wrap:normal;word-break:normal;hyphens:none;transform:none}
body #menu.menu[data-mode] #menuButtons>button:active{transform:none}
/* One uninterrupted illustration. Only the caption area carries a scrim. */
body #menu.menu[data-mode=levels] #chapterCard{display:block;position:relative;height:220px;isolation:isolate}
body #menu.menu[data-mode=levels] .chapter-visual{position:absolute;inset:0;z-index:0;opacity:1;border:0}
body #menu.menu[data-mode=levels] #chapterArtwork{object-fit:cover;object-position:50% 42%;filter:none}
body #menu.menu[data-mode=levels] .chapter-visual::after{content:none}
body #menu.menu[data-mode=levels] .chapter-copy{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:24px 72px;align-content:end;align-items:start;height:100%;gap:5px;padding:16px 24px;background:linear-gradient(0deg,#04141ae8 0%,#061b23a8 27%,#061b2338 48%,transparent 69%);text-shadow:0 2px 5px #010a0d}
body #menu.menu[data-mode=levels] #chapterState{position:static;grid-column:1;grid-row:1;margin:0;line-height:24px;font-size:20px;white-space:nowrap;color:#e4c996}
body #menu.menu[data-mode=levels] #chapterTitle{position:static;grid-column:1;grid-row:2;align-self:start;display:block;height:auto;margin:0;font-size:32px;line-height:1.12;text-align:start}
body #menu.menu[data-mode=levels] #chapterDescription{display:none!important}
body #menu.menu[data-mode=levels] #chapterCard[data-future=true] .chapter-visual{background:radial-gradient(ellipse at 65% 38%,#34565777,transparent 70%),#0b2029}
body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{padding:16px 24px}
/* Pause and results have explicit rows: focus, text wrapping and stars never
   move an action into a different flex line. Both sides share one safe width. */
body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuPanel{width:min(520px,100%);height:auto;max-height:100%;display:flex;flex-direction:column;align-items:stretch;gap:20px;margin:0;text-align:center}
body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuChapter{position:relative;display:block;flex:none;width:100%;min-height:0;margin:0;padding:0 40px 15px;font-size:28px;line-height:1.2;text-align:center}
body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #chapter{display:block;text-align:center}
body #menu.menu[data-mode=paused] .chapter-number{position:absolute;inset:2px auto auto 0;width:30px;border:0;padding:0;font-size:17px;line-height:28px;text-align:center}
body[dir=rtl] #menu.menu[data-mode=paused] .chapter-number{left:auto;right:0}
body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuText{margin:0;font-size:17px;line-height:1.4;text-align:center}
body #menu.menu[data-mode=paused] #pauseCollection{margin:0;justify-content:center;max-width:100%;flex:none}
body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuButtons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:12px;width:100%;max-width:100%;align-self:stretch;align-items:stretch;justify-items:stretch;margin:0}
body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuButtons>button{grid-column:auto;grid-row:auto;width:100%;min-height:52px;padding:11px 12px;font-size:20px;line-height:1.2;border-radius:5px 2px 5px 2px;white-space:normal}
body #menu.menu[data-mode]:is([data-mode=won],[data-mode=lost]) #menuButtons>.primary{grid-column:1/-1;grid-row:1;width:100%;font-size:23px;min-height:56px}
body #menu.menu[data-mode=paused] #menuButtons>[data-action=resume]{grid-column:1;grid-row:1;font-size:23px;color:#f3dca7}
body #menu.menu[data-mode=paused] #menuButtons>[data-action=restartLevel]{grid-column:2;grid-row:1;color:#deca9f;border-color:#b7a47688;background:linear-gradient(180deg,#293f40,#192e33)}
body #menu.menu[data-mode=paused] #menuButtons>[data-action=levels]{grid-column:1;grid-row:2}
body #menu.menu[data-mode=paused] #menuButtons>[data-action=settings]{grid-column:2;grid-row:2}
body #menu.menu[data-mode][data-mode=won] #levelSelect{flex:none;min-width:0;width:100%;gap:12px;margin:0}
body #menu.menu[data-mode][data-mode=won] #levelGrid{display:block;width:100%;margin:0}
body #menu.menu[data-mode][data-mode=won] .level-card{width:100%;margin:0}
body #menu.menu[data-mode][data-mode=won] .level-tile{min-height:142px;height:142px;padding:28px 20px 43px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:none}
body #menu.menu[data-mode][data-mode=won] .level-name{font-size:28px;line-height:1.15;text-align:center}
body #menu.menu[data-mode][data-mode=won] .level-rating{inset:auto 0 13px;height:25px;gap:9px}
body #menu.menu[data-mode][data-mode=won] .rating-star{width:25px;height:25px}
body #menu.menu[data-mode][data-mode=won] #levelResult{margin:0;line-height:1.4;font-size:16px;text-align:center}
@media(max-width:599px){
 body #menu.menu[data-mode=levels] #chapterCard{height:auto;aspect-ratio:1672/941}
 body #menu.menu[data-mode=levels] #chapterArtwork{object-position:center}
 body #menu.menu[data-mode=levels] .chapter-copy{grid-template-rows:22px 60px;padding:10px 17px;gap:3px;background:linear-gradient(0deg,#04141af0,#061b2380 32%,transparent 65%)}
 body #menu.menu[data-mode=levels] #chapterState{font-size:18px;line-height:22px}
 body #menu.menu[data-mode=levels] #chapterTitle{font-size:27px}
 body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{padding:10px 17px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuPanel{gap:17px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuChapter{font-size:26px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuButtons>button{padding-inline:8px;font-size:18px}
 body #menu.menu[data-mode=paused] #menuButtons>[data-action=resume]{font-size:21px}
 body #menu.menu[data-mode][data-mode=won] .level-name{font-size:26px}
}
@media(max-width:380px){
 body #menu.menu[data-mode=levels] .chapter-copy{grid-template-rows:20px 54px;padding-block:8px;gap:2px}
 body #menu.menu[data-mode=levels] #chapterState{font-size:17px;line-height:20px}
 body #menu.menu[data-mode=levels] #chapterTitle{font-size:24px}
 body #menu.menu[data-mode=paused] #menuButtons>[data-action=resume]{font-size:19px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuButtons>button{font-size:17px}
}
@media(max-width:380px) and (min-height:620px) and (max-height:699px){body #menu.menu[data-mode=levels][data-level-layout=stack] .level-name{font-size:25px}}
@media(min-width:550px) and (max-height:519px){
 body #menu.menu[data-mode=levels] #chapterCard{height:76px;aspect-ratio:auto}
 body #menu.menu[data-mode=levels] #chapterArtwork{object-position:50% 42%}
 body #menu.menu[data-mode=levels] .chapter-copy{grid-template-rows:18px 38px;padding:6px 13px;gap:3px;background:linear-gradient(90deg,#061820e0,#06182095 56%,transparent 92%)}
 body #menu.menu[data-mode=levels] #chapterState{display:block;line-height:18px;font-size:14px}
 body #menu.menu[data-mode=levels] #chapterTitle{font-size:19px;line-height:1.05}
 body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{padding:6px 13px;background:linear-gradient(270deg,#061820e0,#06182095 56%,transparent 92%)}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuPanel{width:min(500px,100%);gap:11px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuChapter{font-size:23px;padding-bottom:10px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuButtons{gap:9px 12px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuButtons>button{min-height:44px;padding:8px 12px;font-size:17px}
 body #menu.menu[data-mode=paused] #menuButtons>[data-action=resume]{font-size:21px}
 body #menu.menu[data-mode][data-mode=won] #levelSelect{gap:7px}
 body #menu.menu[data-mode][data-mode=won] .level-tile{height:90px;min-height:90px;padding:16px 38px 32px}
 body #menu.menu[data-mode][data-mode=won] .level-name{font-size:23px}
 body #menu.menu[data-mode][data-mode=won] .level-rating{bottom:9px;height:20px}
 body #menu.menu[data-mode][data-mode=won] .rating-star{width:20px;height:20px}
 body #menu.menu[data-mode][data-mode=won] #levelResult{font-size:14px}
}
@media(min-width:550px) and (max-height:350px){
 body #menu.menu[data-mode=levels] #chapterCard{height:68px}
 body #menu.menu[data-mode=levels] .chapter-copy{grid-template-rows:16px 35px;padding-block:5px;gap:2px}
 body #menu.menu[data-mode=levels] #chapterTitle{font-size:17px}
 body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuPanel{gap:8px}
 body #menu.menu[data-mode][data-mode=won] .level-tile{min-height:75px;height:75px;padding-top:10px}
 body #menu.menu[data-mode][data-mode=won] .level-name{font-size:21px}
}

/* Short portrait browser windows keep the result inside the safe viewport. */
@media(max-width:549px) and (max-height:540px){
 body #menu.menu[data-mode][data-mode=won] #menuPanel{gap:10px}
 body #menu.menu[data-mode][data-mode=won] #menuChapter{font-size:24px;padding-bottom:10px}
 body #menu.menu[data-mode][data-mode=won] .level-tile{min-height:110px;height:110px;padding:18px 28px 32px}
 body #menu.menu[data-mode][data-mode=won] .level-name{font-size:24px}
 body #menu.menu[data-mode][data-mode=won] .level-rating{bottom:8px;height:20px}
 body #menu.menu[data-mode][data-mode=won] .rating-star{width:20px;height:20px}
 body #menu.menu[data-mode][data-mode=won] #levelSelect{gap:8px}
}

/* v129 — one type scale for navigation and level names, whole-word labels. */
body #menu.menu[data-mode]{--menu-label-size:20px}
body #menu.menu[data-mode][data-mode=title] #menuButtons{width:min(400px,100%);align-items:stretch;gap:12px}
body #menu.menu[data-mode][data-mode=title] #menuButtons>.secondary:not([data-action=about]),
body #menu.menu[data-mode]:is([data-mode=paused],[data-mode=won],[data-mode=lost]) #menuButtons>.secondary{font-size:var(--menu-label-size);line-height:1.2;letter-spacing:.035em;padding-inline:8px;white-space:normal;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
body #menu.menu[data-mode][data-mode=levels] .level-name,
body #menu.menu[data-mode][data-mode=won] .level-name{font-size:var(--menu-label-size);line-height:1.2;hyphens:none}
body #menu.menu[data-mode=paused] #pauseGifts .gift{border-bottom:0;box-shadow:none}
@media(max-width:599px){body #menu.menu[data-mode]{--menu-label-size:18px}}
@media(max-width:340px){body #menu.menu[data-mode]{--menu-label-size:16px}}
@media(min-width:550px) and (max-height:519px){
 body #menu.menu[data-mode]{--menu-label-size:18px}
 body #menu.menu[data-mode][data-mode=title] #menuButtons{width:min(380px,100%);gap:6px 10px}
}