/* The supplied artwork remains a single texture; only transforms animate. */
#titleScreen{position:fixed;inset:0;z-index:105;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#2879a8;color:#fff;opacity:1;transition:opacity .4s ease;touch-action:manipulation}
#titleScreen.is-leaving{opacity:0;pointer-events:none}
.title-art{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:50% 50%;z-index:-3;animation:title-landscape-drift 32s ease-in-out infinite alternate;will-change:transform;pointer-events:none}
.title-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#07244030 0%,transparent 58%),linear-gradient(180deg,#08234610 15%,#0a275816 60%,#081c4870 100%)}
.title-content{width:100%;padding:30px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:44px;transform:translateY(-1vh);animation:title-content-arrive .85s cubic-bezier(.16,.8,.25,1) both}
#titleScreen .title-logo{position:relative;font-family:Impact,'Arial Black',Arial,sans-serif;font-size:clamp(64px,12.5vw,190px);font-weight:1000;font-style:italic;line-height:.9;letter-spacing:.018em;margin:0;padding:0 .12em 0 0;white-space:nowrap;color:#fff;-webkit-text-stroke:2px #163a56;paint-order:stroke fill;text-shadow:0 2px 0 #d5faff,0 6px 0 #79dfe3,0 11px 0 #17445d,0 15px 0 #10344e,0 20px 38px #06182da6;transform:rotate(-2deg);filter:drop-shadow(0 3px 1px #0c2c4255)}
#titlePlay{position:relative;display:flex;justify-content:center;align-items:center;width:min(276px,74vw);min-height:76px;padding:15px 54px;border:2px solid #e4fff3;border-radius:9px;color:#103449;background:linear-gradient(165deg,#c4ffe9,#79ebc4);font:900 34px/1 Impact,'Arial Black',Arial,sans-serif;font-style:italic;letter-spacing:2px;box-shadow:0 6px 0 #20586a,0 9px 0 #092d44,0 15px 35px #08264066;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#titlePlay svg{position:absolute;right:24px;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#titlePlay:disabled{cursor:wait;filter:saturate(.6);opacity:.8}
#titlePlay:focus-visible{outline:3px solid #fff;outline-offset:8px}
#titlePlay:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 #20586a,0 4px 0 #092d44,0 8px 20px #08264066}
.title-hint{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center;font-size:10px;font-weight:800;letter-spacing:3px;text-shadow:0 2px 8px #061c37;opacity:.92;margin:0;pointer-events:none}
body.title-active #boot{inset:auto 20px max(66px,calc(env(safe-area-inset-bottom) + 34px));background:none;z-index:106;gap:0;pointer-events:none;font-size:9px;letter-spacing:1.8px;text-shadow:0 2px 5px #071c37}
body.title-active #boot>.brand-mark,body.title-active #boot>i,body.title-active #boot>div{display:none}
body.title-active #boot:after{content:'PREPARING YOUR LOBBY';display:block}
body.title-active #menu{pointer-events:none}
@media(hover:hover){#titlePlay:hover:not(:disabled){transform:translateY(-3px) scale(1.025);filter:brightness(1.06);box-shadow:0 9px 0 #20586a,0 12px 0 #092d44,0 20px 42px #08264077}}
@keyframes title-landscape-drift{from{transform:scale(1.015) translate(-.35%,.2%)}to{transform:scale(1.07) translate(.5%,-.45%)}}
@keyframes title-content-arrive{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(-1vh) scale(1)}}
@media(max-width:600px){.title-art{object-position:41% 50%}.title-content{gap:38px}#titleScreen .title-logo{font-size:clamp(48px,14vw,83px);-webkit-text-stroke:1.5px #163a56;text-shadow:0 2px 0 #d5faff,0 4px 0 #79dfe3,0 7px 0 #17445d,0 10px 0 #10344e,0 15px 30px #06182da6}#titlePlay{width:min(248px,70vw);min-height:68px;font-size:31px}.title-hint{font-size:8px;letter-spacing:2px;bottom:max(28px,env(safe-area-inset-bottom))}}
@media(max-height:500px){.title-content{gap:28px;padding:20px}#titleScreen .title-logo{font-size:clamp(54px,18vh,108px)}#titlePlay{min-height:56px;width:220px;font-size:28px}.title-hint{bottom:max(17px,env(safe-area-inset-bottom));font-size:8px}body.title-active #boot{bottom:43px}}
@media(prefers-reduced-motion:reduce){.title-art,.title-content{animation:none;will-change:auto}#titleScreen,#titlePlay{transition:none}.title-art{transform:scale(1.025)}#titlePlay:hover:not(:disabled),#titlePlay:active:not(:disabled){transform:none}}