/* Explicit states outrank the title's individual enamel/link styling. */
body #menu.menu[data-mode][data-mode=title] #menuButtons>.secondary:not([data-action=about]):enabled:is(:hover,:focus-visible),
body #menu.menu[data-mode=paused] #menuButtons>.secondary:is([data-action=levels],[data-action=settings]):enabled:is(:hover,:focus-visible){background:linear-gradient(145deg,#45615b,#29494e);border-color:#e0c58d;color:#fff0c4;box-shadow:inset 0 0 0 4px #102a31,inset 0 0 0 5px #d2b77b88}
body #menu.menu[data-mode][data-mode=title] #menuButtons>.secondary:not([data-action=about]):active,
body #menu.menu[data-mode=paused] #menuButtons>.secondary:is([data-action=levels],[data-action=settings]):enabled:active{background:linear-gradient(145deg,#657661,#3b5953);border-color:#ffe0a1;color:#fff6dc;box-shadow:inset 0 0 0 4px #203b3d,inset 0 0 0 5px #efd29daa;transition-duration:0s}
body #menu.menu[data-mode][data-mode=title] #menuButtons>[data-action=about]:enabled:is(:hover,:focus-visible){color:#ffe3a6;text-shadow:0 0 14px #ebc47b55;background:transparent;border:0;box-shadow:none}
body #menu.menu[data-mode][data-mode=title] #menuButtons>[data-action=about]:enabled:active{color:#fff8de;text-shadow:0 0 12px #ffd284aa;background:transparent;border:0;box-shadow:none;transition-duration:0s}
body #menu.menu[data-mode=about] #aboutTabs button:enabled:active{color:#fff8de;text-shadow:0 0 12px #ffd28488;transition-duration:0s}

/* Give the complete jump its own clear area above the caption's dark band.
   Both chapters keep the same height; only excess sky is cropped. */
body #menu.menu[data-mode=levels] #chapterCard{height:clamp(240px,calc(18vw + 130px),330px)}
body #menu.menu[data-mode=levels] #chapterCard .chapter-visual{inset:0 0 62px;background:#071d27}
body #menu.menu[data-mode=levels] #chapterArtwork{object-position:50% 77%;opacity:1}
body #menu.menu[data-mode=levels] .chapter-copy,
body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{background:linear-gradient(0deg,#071d27 0px,#071d27 63px,#071d27b8 83px,transparent 100px)}

/* The story panorama reaches the inside edges and bottom of its plaque.
   Paragraphs retain readable insets and overlap only the empty painted sky. */
body #menu.menu[data-mode=about] #storyPane{padding:0;scrollbar-gutter:auto}
body #menu.menu[data-mode=about] #storyPage{padding-top:30px}
body #menu.menu[data-mode=about] #storyPage>p{margin-inline:36px}
body #menu.menu[data-mode=about] #storyPage>p:last-of-type{margin-bottom:0}
body #menu.menu[data-mode=about] #storyPage>.story-panorama{margin:calc(-19% - 12px) 0 0}
@media(max-width:599px){
 body #menu.menu[data-mode=levels] #chapterCard .chapter-visual{bottom:82px}
 body #menu.menu[data-mode=levels] #chapterArtwork{object-position:50% 70%}
 body #menu.menu[data-mode=about] #storyPage{padding-top:22px}
 body #menu.menu[data-mode=about] #storyPage>p{margin-inline:20px}
}