/* PWA splash, installation controls, and device safe areas. */
[data-action="install-game"][hidden]{display:none!important}
.top-right .install-ready{border-color:#71cde8;color:#c8f1ff;box-shadow:0 0 10px #49c8ff25}
.auth-install-button{margin-left:auto;display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px}
.auth-install-button .nav-icon{width:18px;height:18px;flex:none}
.auth-version{margin-left:12px}
.pwa-intro{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.pwa-intro img{border-radius:18px;flex-shrink:0}
.pwa-intro h3{color:var(--gold-light)}
.pwa-intro p{margin-top:8px;line-height:1.6}
.pwa-instructions{display:grid;gap:20px}
.pwa-instructions p{line-height:1.8;color:#b7c6d5}
.pwa-instructions strong{color:#e8eff7}
.pwa-security{margin-top:24px;line-height:1.7}
.boot{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;gap:0;padding:30px 18px;background:#070d15 url('/assets/images/ui/pwa-opening.webp?v=2.0.309') center 56%/cover no-repeat;text-align:center}
.boot:before{position:absolute;z-index:-1;inset:0;content:"";background:linear-gradient(180deg,#070d15bb 0%,#070d1555 42%,#070d15dd 100%),linear-gradient(90deg,#070d15a6,transparent 30%,transparent 70%,#070d15a6)}
.boot p{z-index:1;margin-top:clamp(48px,12vh,92px);color:#e8e0cf;letter-spacing:2.4px;font-size:12px;text-shadow:0 2px 8px #000}
.boot .loading-bar{z-index:1;width:180px;height:2px;margin-top:22px;background:#d6c49740}
.boot .loading-bar:after{background:linear-gradient(90deg,#6acdf4,#f1d18a)}
.boot .hint-box{max-width:560px;margin:0 20px;text-align:center;line-height:1.8}
html[data-opening-slide="0"]{--opening-art:url('/assets/images/ui/opening-solaris.png?v=2.0.309');--opening-art-mobile:url('/assets/images/ui/opening-solaris-mobile.webp?v=2.0.309');--opening-accent:#e6b84c;--opening-position:70%}
html[data-opening-slide="1"]{--opening-art:url('/assets/images/ui/opening-aetherion.png?v=2.0.309');--opening-art-mobile:url('/assets/images/ui/opening-aetherion-mobile.webp?v=2.0.309');--opening-accent:#46bdeb;--opening-position:72%}
html[data-opening-slide="2"]{--opening-art:url('/assets/images/ui/opening-umbra.png?v=2.0.309');--opening-art-mobile:url('/assets/images/ui/opening-umbra-mobile.webp?v=2.0.309');--opening-accent:#b679dc;--opening-position:65%}
html[data-opening-slide="3"]{--opening-art:url('/assets/images/ui/opening-volkar.png?v=2.0.309');--opening-art-mobile:url('/assets/images/ui/opening-volkar-mobile.webp?v=2.0.309');--opening-accent:#ed6249;--opening-position:57%}
html[data-opening-slide="4"]{--opening-art:url('/assets/images/ui/opening-sylvara.png?v=2.0.309');--opening-art-mobile:url('/assets/images/ui/opening-sylvara-mobile.webp?v=2.0.309');--opening-accent:#83c858;--opening-position:68%}
html[data-opening-slide="5"]{--opening-art:url('/assets/images/ui/opening-machina.png?v=2.0.309');--opening-art-mobile:url('/assets/images/ui/opening-machina-mobile.webp?v=2.0.309');--opening-accent:#aab8c7;--opening-position:68%}
.opening-boot{--opening-pad-block:clamp(24px,6vh,60px);--opening-pad-inline:clamp(20px,4vw,64px);position:fixed;inset:0;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;min-height:0;padding:calc(var(--opening-pad-block) + env(safe-area-inset-top,0px)) calc(var(--opening-pad-inline) + env(safe-area-inset-right,0px)) calc(var(--opening-pad-block) + env(safe-area-inset-bottom,0px)) calc(var(--opening-pad-inline) + env(safe-area-inset-left,0px));overflow-x:hidden;overflow-y:auto;background-color:#070d15;background-image:var(--opening-art);background-position:var(--opening-position,50%) center;background-size:cover;background-repeat:no-repeat;text-align:left;color:#f5f0e7}
.opening-boot:before{z-index:0;background:linear-gradient(90deg,#0308119c 0%,#0308116f 26%,#0308113d 48%,#03081112 78%),linear-gradient(0deg,#030811d6 0%,#03081150 22%,transparent 48%,#0308114f 100%)}
.opening-layout{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(22px,4vh,42px);flex:1;min-height:0}
.opening-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.opening-brand .wordmark{font-size:clamp(22px,2.3vw,30px);letter-spacing:1.8px}
.opening-brand .submark{margin-top:7px;color:#d6c9ae;font-size:8px;letter-spacing:2.6px}
.opening-header-note{color:#d7e0e9;text-align:right;font-size:10px;line-height:1.8;letter-spacing:2px}
.opening-main{display:flex;align-items:center;max-width:610px}
.opening-main-inner{width:100%}
.opening-guide{margin:0 0 22px;color:var(--opening-accent);font-size:10px;font-weight:700;letter-spacing:2px}
.opening-copy{display:none}
html[data-opening-slide="0"] .opening-copy[data-slide="0"],html[data-opening-slide="1"] .opening-copy[data-slide="1"],html[data-opening-slide="2"] .opening-copy[data-slide="2"],html[data-opening-slide="3"] .opening-copy[data-slide="3"],html[data-opening-slide="4"] .opening-copy[data-slide="4"],html[data-opening-slide="5"] .opening-copy[data-slide="5"]{display:block;animation:opening-rise .42s ease-out both}
.opening-index{margin:0;color:var(--opening-accent);font-size:11px;font-weight:700;letter-spacing:2.2px}
.opening-copy h1{margin:12px 0 17px;color:#fff7e8;font:700 clamp(52px,8vw,98px)/.94 var(--title);letter-spacing:.045em;text-shadow:0 3px 24px #0009}
.opening-copy .opening-motto{margin:0 0 12px;color:#f4e3c4;font:italic clamp(18px,2.2vw,24px)/1.35 var(--title)}
.opening-copy .opening-description{max-width:500px;margin:0;color:#d4dde7;font-size:14px;line-height:1.75;text-shadow:0 1px 5px #0009}
.opening-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:end;gap:clamp(28px,7vw,88px);padding-top:18px;border-top:1px solid #e3eaf426}
.opening-footer-note{display:grid;justify-items:start;gap:11px}
.opening-progress{display:flex;gap:8px;width:min(100%,250px)}
.opening-progress span{flex:1;min-width:20px;height:3px;border-radius:3px;background:#e3eaf440}
html[data-opening-slide="0"] .opening-progress [data-slide="0"],html[data-opening-slide="1"] .opening-progress [data-slide="1"],html[data-opening-slide="2"] .opening-progress [data-slide="2"],html[data-opening-slide="3"] .opening-progress [data-slide="3"],html[data-opening-slide="4"] .opening-progress [data-slide="4"],html[data-opening-slide="5"] .opening-progress [data-slide="5"]{background:var(--opening-accent);box-shadow:0 0 10px var(--opening-accent)}
.opening-cycle-hint{color:#c5ced8;font-size:9px;letter-spacing:1.6px;line-height:1.5}
.opening-loading{display:grid;gap:9px;min-width:0;color:#e8e0cf}
.opening-loading-copy{display:grid;gap:4px}
.opening-loading-label{color:#9eacbb;font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.opening-loading-message{font-size:11px;letter-spacing:1.3px;text-transform:uppercase}
.opening-loading .loading-bar{width:100%;height:3px;margin:0;border-radius:3px;background:#d6c49740}
.opening-loading .loading-bar:after{background:var(--opening-accent)}
@keyframes opening-rise{from{transform:translateY(9px);opacity:0}to{transform:translateY(0);opacity:1}}
body{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
body.playing-match .match-view{height:calc(100dvh - var(--game-header-height,74px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.overlay-backdrop{padding-top:max(12px,env(safe-area-inset-top,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px));padding-left:max(12px,env(safe-area-inset-left,0px))}
#toasts{bottom:max(20px,env(safe-area-inset-bottom,0px))}
@media(max-width:650px){.auth-install-button{gap:5px;padding:7px 9px;font-size:11px}.auth-install-button .nav-icon{width:16px;height:16px}.auth-version{font-size:10px;margin-left:8px}.pwa-intro{gap:12px}.pwa-intro h3{font-size:19px}.top-right .connection{padding:5px 6px}.opening-boot{--opening-pad-block:22px;--opening-pad-inline:20px;background-position:var(--opening-position,70%) center}.opening-boot:before{background:linear-gradient(0deg,#030811f5 0%,#030811e9 34%,#0308116e 63%,#0308110d 100%),linear-gradient(90deg,#03081155,transparent 75%)}.opening-layout{gap:17px}.opening-header-note{display:none}.opening-main{align-items:flex-end;max-width:none;padding-bottom:clamp(18px,5vh,42px)}.opening-guide{margin-bottom:16px;font-size:9px;letter-spacing:1.5px}.opening-copy h1{margin:9px 0 12px;font-size:clamp(42px,12vw,68px);letter-spacing:.035em}.opening-copy .opening-motto{font-size:clamp(17px,5vw,21px)}.opening-copy .opening-description{font-size:13px;line-height:1.62}.opening-footer{grid-template-columns:minmax(0,1fr);align-items:start;gap:15px;padding-top:14px}.opening-footer-note{width:100%;gap:8px}.opening-progress{width:min(100%,230px);gap:6px}.opening-progress span{min-width:0}.opening-cycle-hint{font-size:8px;letter-spacing:1.2px}.opening-loading{width:100%;gap:7px}.opening-loading-label{font-size:7px}.opening-loading-message{font-size:10px;letter-spacing:1px}.opening-loading .loading-bar{width:100%}}
@media(max-height:680px){.boot p{margin-top:clamp(28px,8vh,52px)}.opening-boot{--opening-pad-block:18px}.opening-layout{gap:18px}.opening-copy h1{margin:8px 0 10px;font-size:clamp(46px,7vw,78px)}.opening-copy .opening-description{line-height:1.55}}
@media(prefers-reduced-motion:reduce){.boot .loading-bar:after{animation:none;width:100%}.opening-copy{animation:none!important}}
@media(max-width:900px) and (orientation:portrait){.opening-boot{background-image:var(--opening-art-mobile,var(--opening-art));background-size:cover;background-position:center}.opening-boot:after{content:none}.opening-boot:before{background:linear-gradient(0deg,#030811f2 0%,#030811cf 34%,#03081169 63%,#03081135 100%),linear-gradient(90deg,#0308113a,transparent 82%)}}