.opening{overflow:hidden}
#title-screen{position:fixed;inset:0;z-index:30;overflow:hidden;background:#4eafdd;color:white;font-family:Barlow,Arial,sans-serif;isolation:isolate}
#title-screen[hidden]{display:none}
.title-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-1;animation:title-arrival 1.2s ease-out both}
.title-brand{position:absolute;left:6%;top:15%;max-width:410px;transform:rotate(-3deg)}
.title-edition{font-size:15px;font-weight:900;letter-spacing:0;background:#143e50;color:#c3ffed;padding:8px 16px;display:inline-block;transform:rotate(3deg);border-left:4px solid #7bffe0}
.title-brand h1{font:900 112px/.8 'Barlow Condensed',Impact,sans-serif;margin:22px 0 24px;letter-spacing:0;color:#fff;filter:drop-shadow(0 8px 0 #123b50);-webkit-text-stroke:2px #123b50;text-shadow:3px 0 #123b50,-3px 0 #123b50}
.title-brand h1 span{display:block;color:#ffda58}
.title-brand p{font-size:20px;font-weight:800;color:white;margin:0;text-shadow:0 2px 3px #123b50,0 0 8px #123b50}
.title-actions{position:absolute;left:6%;bottom:max(7%,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;width:320px;gap:12px}
#title-start{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#ffdc57;color:#133b4d;border:3px solid #143b4e;border-bottom-width:8px;border-radius:6px;font:900 36px 'Barlow Condensed',Impact,sans-serif;box-shadow:0 6px 0 #143b4e;transition:transform .15s,background .15s}
#title-start span{font-size:24px}
#title-start:hover{background:#fff18d;transform:translateY(-3px)}
#title-start:active{transform:translateY(3px);box-shadow:0 2px 0 #143b4e}
#title-loadout{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 18px;color:white;background:#123c50e8;border:2px solid #a9e6ef;border-radius:4px;font-size:13px;font-weight:900}
#title-loadout:hover{background:#206276}
.title-mode{font-size:10px;font-weight:800;text-align:center;line-height:16px;color:white;text-shadow:0 1px 3px #123b50;letter-spacing:0}
.title-sound{position:absolute;top:max(24px,env(safe-area-inset-top));right:24px;width:46px;height:46px;font-size:25px;background:#123c50df;color:white;border:2px solid #d7ffff;border-radius:6px}
.title-sound[aria-pressed=false]{color:#a3bbc5}
@keyframes title-arrival{from{transform:scale(1.035)}to{transform:scale(1)}}
@media(min-width:1600px){.title-brand{top:17%}.title-brand h1{font-size:144px}}
@media(max-width:750px){.title-art{object-position:65% center}.title-brand{top:max(7%,40px);left:20px;right:20px;max-width:none;text-align:center}.title-edition{font-size:11px;padding:5px 12px}.title-brand h1{font-size:76px;line-height:.84;margin:14px 0 18px;-webkit-text-stroke:1px #123b50;filter:drop-shadow(0 5px 0 #123b50)}.title-brand h1 span{display:inline;margin-left:6px}.title-brand p{font-size:15px}.title-actions{left:50%;transform:translateX(-50%);bottom:max(24px,env(safe-area-inset-bottom));width:min(300px,calc(100% - 40px))}.title-sound{top:16px;right:16px;width:36px;height:36px;font-size:20px}#title-start{height:66px;font-size:30px}.title-mode{font-size:9px}}
@media(max-width:370px){.title-brand h1{font-size:64px}.title-mode{font-size:8px}}
@media(max-height:550px) and (orientation:landscape){.title-brand{top:10%;left:5%;max-width:250px;text-align:left;right:auto}.title-brand h1{font-size:62px;margin:14px 0}.title-brand h1 span{display:block;margin-left:0}.title-brand p{font-size:14px}.title-edition{font-size:10px;padding:4px 10px}.title-actions{left:5%;transform:none;bottom:20px;width:245px;gap:8px}#title-start{height:52px;font-size:28px}#title-loadout{height:36px;font-size:11px}.title-mode{display:none}}
@media(prefers-reduced-motion:reduce){.title-art{animation:none}#title-start{transition:none}}