/* Full-screen title and loading splash. Artwork reaches every viewport edge. */
body.screen-menu-active:not([data-slice]) {
    background: #071516;
    min-height: 100svh;
    --title-ivory: #f4ecd6;
    --title-gold: #d6b576;
}
body.screen-menu-active:not([data-slice])::before,
body.screen-menu-active:not([data-slice]) .bg-rays,
body.screen-menu-active:not([data-slice]) .bg-dust { display: none; }
body.screen-menu-active:not([data-slice]) .game-chrome {
    position: absolute;
    top: max(24px, env(safe-area-inset-top));
    right: max(28px, env(safe-area-inset-right));
    width: auto;
    min-height: 0;
    padding: 0;
}
body.screen-menu-active:not([data-slice]) .chrome-home { display: none; }
body.screen-menu-active:not([data-slice]) .utility-dock button {
    background: #071516b3;
    border: 1px solid #d6b57670;
    border-radius: 4px;
    box-shadow: none;
    color: #f4ecd6;
}
body.screen-menu-active:not([data-slice]) .utility-dock button:hover { background: #17352ae6; border-color: #d6b576; }
body.screen-menu-active:not([data-slice]) .utility-dock .sound-label,
body.screen-menu-active:not([data-slice]) .utility-dock .howto-toggle > span:last-child { display: none; }
body.screen-menu-active:not([data-slice]) .utility-dock button { width: 46px; height: 46px; padding: 10px; }

body:not([data-slice]) #screen-menu { width: 100%; max-width: none; padding: 0; }
#screen-menu .title-scene {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    isolation: isolate;
    width: 100%;
    min-height: 100svh;
    padding: 88px clamp(32px, 8vw, 160px);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
#screen-menu .title-scene::before { display: none; }
.title-art, .boot-art {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.title-art img, .boot-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 63% center;
}
.title-art::after, .boot-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #03121166, #03121126 38%, transparent 64%);
}
.title-content, .boot-content { position: relative; width: min(440px, 100%); }
#screen-menu .title-content h1.wordmark, .boot-wordmark {
    margin: 0 0 42px;
    padding: 0;
    font: 400 clamp(2.3rem, 4.4vw, 4rem)/1.2 'Cinzel', serif;
    letter-spacing: .025em;
    text-align: left;
    text-transform: none;
    color: #f4ecd6;
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
    text-shadow: 0 2px 24px #0008;
    animation: none;
}
#screen-menu .wordmark > span, .boot-wordmark > span { display: block; font-size: 1.55em; line-height: 1.12; letter-spacing: .04em; }
.title-actions { display: grid; gap: 14px; width: min(320px, 100%); }
.title-actions button {
    width: 100%; min-height: 64px; margin: 0; padding: 14px 22px; gap: 12px;
    justify-content: center; border-radius: 4px; border: 1px solid #aebc9f;
    background: #15302ae8; box-shadow: inset 0 1px #e5edd11a, 0 5px 20px #0004;
    color: #f4ecd6; font-size: 1.125rem; font-weight: 600; letter-spacing: .025em;
}
.title-actions .ui-icon { width: 23px; height: 23px; }
.title-actions #daily-button {
    color: #202920; border-color: #edce8d;
    background: linear-gradient(115deg, #f0d79a, #d5ad63);
    box-shadow: inset 0 1px #fff4cf, inset 0 -2px #946f38, 0 5px 23px #010e0c80;
}
.title-actions #daily-button:hover { background: linear-gradient(115deg, #ffe6a8, #e5bc70); }
.title-actions #play-puzzles-button:hover { background: #29433cf5; border-color: #e2d09d; }
.title-links { display: flex; align-items: center; justify-content: center; gap: 16px; width: min(320px, 100%); margin-top: 18px; }
.title-links button { min-height: 44px; padding: 8px 0; gap: 8px; border: 0; border-radius: 2px; box-shadow: none; background: none; color: #d7d8c6; font-size: .875rem; }
.title-links button:hover { color: #f3d798; background: none; box-shadow: none; }
.title-links button::after { display: none; }
.title-links .ui-icon { width: 17px; height: 17px; }
.title-link-divider { width: 1px; height: 14px; background: #b7b59980; }
#screen-menu .daily-status { max-width: 320px; margin: 14px 0 0; color: #e3cf9c; font-size: .875rem; line-height: 1.5; }
.title-support { display: none; }

/* Loading uses the same composition, so the handoff has no scenery change. */
.boot-loader {
    position: fixed; inset: 0; z-index: 3500; isolation: isolate;
    display: flex; align-items: center; justify-content: flex-start;
    min-height: 100svh; padding: 88px clamp(32px, 8vw, 160px); overflow: auto;
    background: #071516; color: #f4ecd6; opacity: 1;
    transition: opacity 360ms cubic-bezier(.22, 1, .36, 1);
}
.boot-loader[hidden] { display: none; }
.boot-loader.is-ready { opacity: 0; pointer-events: none; }
.boot-progress { width: 176px; height: 2px; margin-top: 0; overflow: hidden; background: #b5bf9c45; }
.boot-progress span { display: block; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, #e8cb88 50%, transparent); animation: bootProgress 2200ms cubic-bezier(.45, 0, .55, 1) infinite; }
.boot-status { min-height: 1.5em; margin-top: 16px; color: #c0c9bd; font: 400 .875rem/1.5 'Montserrat', sans-serif; }
@keyframes bootProgress { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
@media (prefers-reduced-motion: no-preference) {
    #screen-menu.active .title-content { animation: title-arrive 650ms cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes title-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
    body.screen-menu-active:not([data-slice]) .game-chrome { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
    #screen-menu .title-scene, .boot-loader { align-items: flex-end; justify-content: center; padding: 72px 24px max(32px, 6svh); }
    .title-art img, .boot-art img { object-position: 63% top; }
    .title-art::after, .boot-art::after { background: linear-gradient(180deg, #0312110d 10%, #03121133 30%, #031211cf 58%, #031211f2 100%); }
    .title-content, .boot-content { width: min(360px, 100%); margin-top: 24svh; text-align: center; }
    #screen-menu .title-content h1.wordmark, .boot-wordmark { margin-bottom: 28px; text-align: center; font-size: clamp(1.9rem, 7.8vw, 3rem); }
    #screen-menu .wordmark > span, .boot-wordmark > span { font-size: 1.65em; }
    .title-actions, .title-links, #screen-menu .daily-status, .boot-progress { margin-inline: auto; }
    .title-actions button { min-height: 58px; font-size: 1.0625rem; }
    .title-links { gap: 13px; margin-top: 13px; }
    .title-links button { font-size: .8125rem; }
    .boot-loader { padding-bottom: max(56px, 10svh); }
    .chrome-home { max-width: 150px; }
}
@media (max-height: 540px) and (min-width: 701px), (max-height: 480px) and (orientation: landscape) {
    #screen-menu .title-scene, .boot-loader { align-items: center; justify-content: flex-start; padding: 44px max(28px, 6vw); }
    .title-content, .boot-content { width: min(330px, 48vw); margin-top: 0; text-align: left; }
    #screen-menu .title-content h1.wordmark, .boot-wordmark { font-size: clamp(1.7rem, 3.7vw, 2.3rem); text-align: left; margin-bottom: 20px; }
    #screen-menu .wordmark > span, .boot-wordmark > span { font-size: 1.3em; }
    .title-actions { gap: 10px; }
    .title-actions button { min-height: 46px; padding-block: 9px; font-size: 1rem; }
    .title-links { margin-top: 6px; gap: 10px; }
    .title-links button { font-size: .75rem; }
    .title-art::after, .boot-art::after { background: linear-gradient(90deg, #031211b3, #03121166 42%, transparent 80%); }
    .boot-progress { margin-inline: 0; }
}
#daily-entry-button[hidden] { display: none; }