/* Keep the approved landscape composition intact, including on ultrawide screens. */
#title-screen, #title-backdrop, #title-transition {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    overflow: auto;
    background: #34291f;
    color: #3e3024;
    outline: none;
    user-select: none;
}
body.ww-title-open #game-container { visibility: hidden; }
body.ww-title-open::after { display: none; }
body.ww-title-setup::after { display: none; }
#title-backdrop { z-index: 0; pointer-events: none; }
#title-backdrop :is(.title-brand, .title-brand-glints, .title-subtitle, .title-menu, .title-version),
#title-transition :is(.title-brand, .title-brand-glints, .title-subtitle, .title-menu, .title-version) { display: none; }
.title-scene {
    position: relative;
    width: min(100vw, calc(100dvh * 1672 / 941));
    aspect-ratio: 1672 / 941;
    flex: none;
    container-type: inline-size;
    isolation: isolate;
}
.title-art { display: block; width: 100%; height: 100%; }
.title-background, .title-cast, .title-magic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    pointer-events: none;
    overflow: hidden;
}
.title-background, .title-cast { visibility: hidden; }
.title-layers-ready .title-background, .title-layers-ready .title-cast { visibility: visible; }
.title-ground-shadow {
    position: absolute;
    background: radial-gradient(ellipse, #372b3280 0%, #4a354a33 40%, #4a354a00 72%);
    transform: translate(calc(-50% + var(--title-look-x, 0px)), calc(-50% + var(--title-look-y, 0px)));
}
.title-character-plane {
    position: absolute;
    transform: translate(calc(var(--title-look-x, 0px) * var(--depth)), calc(var(--title-look-y, 0px) * var(--depth)));
    pointer-events: none;
}
.title-character {
    display: block;
    width: 100%; height: 100%; overflow: visible;
    transform-origin: 50% 98%;
    animation: title-breathe var(--breath-duration) ease-in-out var(--breath-delay) infinite;
    will-change: transform;
}
.title-plane--right-heroes .title-character { animation-name: title-breathe-right; }
.title-plane--spark-sprite .title-character { transform-origin: center; animation-name: title-sprite-bob; }
.title-plane--mimic-prince .title-character { animation-name: title-jester-sway; }
.title-letter-plane {
    position: absolute;
    aspect-ratio: 100 / 112;
    pointer-events: none;
    transform: rotate(var(--tile-tilt));
}
.title-floating-letter {
    width: 100%; height: 100%;
    /* Six small compositor layers, no animated filters or per-frame JS. */
    animation: title-letter-float var(--tile-time) ease-in-out var(--tile-delay) infinite;
    will-change: transform;
}
.title-floating-letter svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes title-letter-float {
    0%,100% { transform: translate3d(-2px,3px,0) rotate(-3deg); }
    50% { transform: translate3d(3px,-10px,0) rotate(3deg); }
}
@keyframes title-breathe { 0%,100% { transform: scaleY(1) rotate(-.15deg); } 50% { transform: scaleY(1.008) rotate(.2deg); } }
@keyframes title-breathe-right { 0%,100% { transform: scaleY(1.006) rotate(.16deg); } 50% { transform: scaleY(1) rotate(-.16deg); } }
@keyframes title-sprite-bob { 0%,100% { transform: translateY(2px) rotate(-1.2deg); } 50% { transform: translateY(-5px) rotate(1.1deg); } }
@keyframes title-jester-sway { 0%,100% { transform: rotate(-.5deg); } 50% { transform: rotate(.6deg) scaleY(1.005); } }
.title-brand {
    position: absolute;
    top: 9%;
    left: 28%;
    width: 44%;
    margin: 0;
    line-height: 0;
    /* The generated logo has a white matte. Multiply drops that matte when
       compositing onto the pale courtyard without changing the source art. */
    mix-blend-mode: multiply;
    pointer-events: none;
}
.title-brand img { display: block; width: 100%; height: auto; }
.title-brand, .title-brand-glints { animation: title-logo-float 6.4s ease-in-out infinite; transform-origin: 50% 55%; }
.title-brand-glints {
    position: absolute; top: 9%; left: 28%; width: 44%; aspect-ratio: 3 / 1;
    pointer-events: none;
}
@keyframes title-logo-float {
    0%,100% { transform: translateY(2px) rotate(-.3deg); }
    50% { transform: translateY(-5px) rotate(.3deg); }
}
.title-glint {
    position: absolute; width: clamp(8px, 1.15cqw, 19px); aspect-ratio: 1;
    background: radial-gradient(circle, #fff 0 18%, #fff5ac 30%, #ffda57 60%, #efb54f00 75%);
    clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
    opacity: 0;
    animation: title-glitter var(--glint-time) ease-in-out var(--glint-delay) infinite;
}
@keyframes title-glitter {
    0%,65%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(0); }
    78% { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(15deg); }
    90% { opacity: .3; transform: translate(-50%,-50%) scale(.55) rotate(45deg); }
}
.title-mote {
    position: absolute; width: var(--mote-size); height: var(--mote-size); border-radius: 50%;
    background: #fff4ba; box-shadow: 0 0 5px #ffd260;
    opacity: 0;
    animation: title-mote-drift var(--mote-time) linear var(--mote-delay) infinite;
}
.title-mote--star { border-radius: 0; clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
@keyframes title-mote-drift {
    0% { transform: translate(0,15px) scale(.5); opacity: 0; }
    25% { opacity: .8; }
    70% { opacity: .65; }
    100% { transform: translate(var(--mote-drift),-30px) scale(1.05); opacity: 0; }
}
.title-lantern-glow {
    position: absolute; width: 9%; aspect-ratio: 1;
    background: radial-gradient(circle,#ffe29b66,#ffbb3422 35%,#ffba3300 70%);
    transform: translate(-50%,-50%);
    animation: title-lamplight 2.8s ease-in-out infinite;
}
.title-lantern-glow:last-child { animation-delay: -1.1s; }
@keyframes title-lamplight { 0%,100% { opacity: .45; } 35% { opacity: .85; } 62% { opacity: .6; } 80% { opacity: 1; } }
.title-motion-paused *, .title-motion-paused *::before { animation-play-state: paused !important; }
.title-reduced-motion .title-brand, .title-reduced-motion .title-brand-glints, .title-reduced-motion .title-character, .title-reduced-motion .title-floating-letter {
    animation: none; transform: none; will-change: auto;
}
.title-reduced-motion .title-magic, .title-reduced-motion .title-brand-glints { display: none; }
.title-subtitle {
    position: absolute;
    top: 33%;
    left: 27%;
    width: 46%;
    text-align: center;
    font: 500 clamp(15px, 2.1cqw, 36px)/1.2 'Fredoka', sans-serif;
    color: #315544;
    letter-spacing: .025em;
    text-shadow: 0 1px 0 #fff7df;
}
.title-menu {
    position: absolute;
    top: 48%;
    left: 35%;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.35cqw;
}
.title-has-save .title-menu { top: 43%; }
.title-button {
    --face: #fbebc9;
    --edge: #a36d30;
    --base: #805223;
    --ink: #49341f;
    position: relative;
    min-height: 40px;
    height: 4.55cqw;
    padding: 0 12px 2px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    color: var(--ink);
    background: var(--face);
    box-shadow: inset 0 2px 0 #fff8de, inset 0 -3px 0 #dac293, 0 5px 0 var(--base), 0 8px 8px #5c3d2829;
    font: 600 clamp(17px, 2.05cqw, 36px)/1 'Fredoka', sans-serif;
    letter-spacing: .025em;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.title-button--primary {
    --face: #236248;
    --edge: #d6a448;
    --base: #61441f;
    --ink: #fff0c9;
    box-shadow: inset 0 2px 0 #719e62, inset 0 -3px 0 #174735, 0 5px 0 var(--base), 0 8px 8px #5c3d2829;
    text-shadow: 0 2px 0 #153f30;
}
@media (hover: hover) {
    .title-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
}
.title-button:focus-visible { outline: 3px solid #244f3a; outline-offset: 6px; }
.title-button:active { transform: translateY(4px); box-shadow: inset 0 2px 3px #45372033, 0 1px 0 var(--base); }
.title-button:disabled { cursor: wait; filter: saturate(.65); }
.title-button--text {
    min-height: 30px;
    height: auto;
    padding: 4px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
    font: 500 clamp(13px, 1.2cqw, 20px)/1.3 'Fredoka', sans-serif;
    color: #57442d;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.title-save {
    align-self: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: #fff3dccc;
    text-align: center;
    font: 500 clamp(12px, 1.15cqw, 19px)/1.3 'Fredoka', sans-serif;
    color: #51422f;
}
/* Sound on/off, in the top corner of the illustration. */
.title-sound {
    position: absolute;
    top: 3%;
    right: 2.2%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 12px 6px 9px;
    border: 2px solid #a36d30;
    border-radius: 999px;
    color: #49341f;
    background: #fbebc9e6;
    box-shadow: inset 0 2px 0 #fff8de, 0 4px 0 #805223, 0 6px 8px #5c3d2829;
    font: 600 clamp(12px, 1.05cqw, 17px)/1 'Fredoka', sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, filter 120ms ease;
}
.title-sound[aria-pressed="false"] { color: #7b5b3a; background: #e9d8b4e6; }
.title-sound-icon { width: 24px; height: 24px; flex: none; }
@media (hover: hover) {
    .title-sound:hover { transform: translateY(-2px); filter: brightness(1.06); }
}
.title-sound:focus-visible { outline: 3px solid #244f3a; outline-offset: 4px; }
.title-sound:active { transform: translateY(3px); box-shadow: inset 0 2px 3px #45372033, 0 1px 0 #805223; }
.title-version {
    position: absolute;
    bottom: 2.5%;
    width: 100%;
    text-align: center;
    font: 600 clamp(10px, .85cqw, 14px)/1 'Barlow Condensed', sans-serif;
    color: #483426;
}
@media (prefers-reduced-motion: reduce) {
    .title-button, .title-sound { transition: none; }
    .title-brand, .title-brand-glints, .title-character, .title-floating-letter { animation: none; transform: none; will-change: auto; }
    .title-magic, .title-brand-glints { display: none; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
    .title-menu { gap: 1cqw; }
    .title-button--text { min-height: 24px; }
    .title-version { bottom: 1.5%; }
}
/* In portrait, retain the landscape illustration above a readable menu. */
@media (max-aspect-ratio: 1/1) {
    #title-screen, #title-backdrop, #title-transition { background: #f4e5c4; align-items: start; }
    .title-scene { width: 100vw; min-height: 100dvh; aspect-ratio: auto; padding-bottom: 48px; }
    .title-art { height: auto; }
    .title-brand, .title-brand-glints { top: 8cqw; left: 17%; width: 66%; }
    .title-subtitle { top: 28cqw; left: 10%; width: 80%; font-size: 4cqw; }
    .title-menu, .title-has-save .title-menu { position: relative; top: auto; left: auto; margin: 24px auto 0; width: min(76%, 380px); gap: 18px; }
    .title-button { height: 54px; font-size: 22px; }
    .title-button--text { height: auto; font-size: 16px; }
    .title-save { font-size: 15px; }
    .title-version { position: relative; bottom: auto; margin-top: 32px; font-size: 11px; }
}