html,body{position:fixed;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;overflow:hidden;background:#061126;color:white;touch-action:none;overscroll-behavior:none}
#stage{position:fixed;inset:0;overflow:hidden;background:#061126;height:100dvh}
#canvas{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0}
/* Reveal rotation only after the new game layout has rendered. */
#canvas{opacity:1;transition:opacity 140ms ease-out}
#stage.rotating #canvas{opacity:0;transition:none;pointer-events:none}
@media(prefers-reduced-motion:reduce){#canvas{transition:none}}
#canvas:focus{outline:none}
#launch{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;background:#061126;transition:opacity .4s ease}
#launch.gone{opacity:0;pointer-events:none}
#launch:focus{outline:none}
#bg{position:fixed;background:#061126 url('landing/objectives-calm-portrait.webp') center top/min(100vw,700px) auto no-repeat;pointer-events:none}
#bg::after{content:"";position:absolute;inset:0}
#logo,#bottom{position:relative}
#bottom{display:flex;flex-direction:column}
#play{display:none;width:100%;border:0;cursor:pointer}
#bar{overflow:hidden}
#fill{height:100%;width:0%;transition:width .25s ease}
#news{display:none;position:fixed;left:calc((100vw + var(--safe-left) - var(--safe-right))/2);top:calc((100dvh + var(--safe-top) - var(--safe-bottom))/2);transform:translate(-50%,-50%);z-index:20;overflow:auto;touch-action:pan-y}
#launch.news-open #news{display:block}
#launch.news-open::after{content:"";position:fixed;inset:0;z-index:15;background:#020612b3;backdrop-filter:blur(6px)}
#news h2{display:flex;align-items:center;justify-content:space-between}
#news button{cursor:pointer;color:white}
#error,#notice{display:none}
#error{padding:14px;color:#ffd2d2}
#error p{margin:0 0 10px;white-space:pre-line}
#error pre{margin:8px 0 0;max-height:22vh;overflow:auto;white-space:pre-wrap}
#error .row{display:flex;gap:10px}
#error button{flex:1;border:0;border-radius:10px;color:white}
@font-face{font-family:RiftDisplay;src:url('fonts/LilitaOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:RiftBody;src:url('fonts/Nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--cyan:#5fd8ff;--gold:#ffc637;--navy:#061126;--line:#6689bc;--muted:#a9bddc}
*{box-sizing:border-box}
body{font-family:RiftBody,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,select{font:inherit}
button:focus-visible,select:focus-visible{outline:2px solid #dbc48f;outline-offset:3px}
#launch{padding:max(24px,var(--safe-top)) max(18px,var(--safe-right)) max(18px,var(--safe-bottom)) max(18px,var(--safe-left));gap:14px;justify-content:space-between}
#bg{inset:0;animation:arena-drift 20s ease-in-out infinite alternate;transform-origin:50% 40%;will-change:transform;translate:var(--scene-x,0px) var(--scene-y,0px);transition:translate 1.2s ease-out}
#bg::after{background:linear-gradient(180deg,transparent 52%,rgba(6,17,38,.1) 68%,#061126 96%)}
#landing-fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;contain:strict;translate:calc(var(--scene-x,0px)*1.6) calc(var(--scene-y,0px)*1.6);transition:translate 1.5s ease-out}
.rift-aura{position:absolute;width:85vmin;height:85vmin;border-radius:50%;mix-blend-mode:screen;animation:rift-breathe 3.5s ease-in-out infinite alternate}
.rift-aura-cyan{left:-24vmin;top:13%;background:radial-gradient(ellipse,#19e8e799,transparent 66%)}
.rift-aura-gold{left:calc(61% - 30vmin);top:5%;width:60vmin;height:60vmin;background:radial-gradient(ellipse,#ffc2538c,transparent 65%);animation-delay:-2s}
.rift-beam{position:absolute;left:10%;top:-35%;width:20vmin;height:120%;background:linear-gradient(90deg,transparent,#8de9ff38,transparent);transform:rotate(24deg);animation:rift-beam-sway 7s ease-in-out infinite alternate;transform-origin:50% 0}
.rift-beam-second{left:62%;width:12vmin;opacity:.7;animation-delay:-4s}
.rift-energy{position:absolute;top:0;left:50%;width:min(100vw,700px);height:auto;transform:translateX(-50%);overflow:visible}
.rift-energy-landscape{display:none}
.rift-current{stroke:#aaffff;filter:drop-shadow(0 0 4px #13f1ee) drop-shadow(0 0 10px #00d8ff)}
.rift-trail{stroke-width:3;stroke-linecap:round;stroke-dasharray:150 850;animation:rift-energy-flow 3.6s linear infinite;vector-effect:non-scaling-stroke}
.rift-trail-follow{stroke:#28e6ed;stroke-width:7;stroke-dasharray:75 925;animation-delay:-1.8s;opacity:.65}
.rift-trail-upper{stroke-width:2;stroke-dasharray:220 780;animation-duration:4.5s;animation-direction:reverse;animation-delay:-1s}
.rift-reactor{stroke:#ffe5a1;filter:drop-shadow(0 0 4px #ffce40) drop-shadow(0 0 9px #ffa524)}
.rift-shockwave{stroke-width:2;transform-box:fill-box;transform-origin:center;animation:rift-reactor-wave 3.4s ease-out infinite;vector-effect:non-scaling-stroke}
.rift-shockwave-second{animation-delay:-1.7s}
.rift-trail-gold{stroke-width:3;stroke-dasharray:180 820;animation-duration:3s;animation-delay:-.7s}
.rift-mote{position:absolute;bottom:-20px;width:var(--mote-size);height:var(--mote-size);border-radius:50%;background:#d9ffff;box-shadow:0 0 6px 2px #3dd9ffc0,0 0 18px #00ccff;opacity:0;animation:rift-mote-rise 9s linear infinite}
.rift-mote-gold{background:#fff0be;box-shadow:0 0 6px 2px #ffc451c0,0 0 18px #ffaa20}
.rift-mote-flare::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:linear-gradient(90deg,transparent,#efffff,transparent);transform:translate(-50%,-50%) rotate(-35deg)}
.rift-streak{position:absolute;top:12%;left:90%;width:150px;height:2px;background:linear-gradient(90deg,transparent,#c5faff);box-shadow:0 0 8px #57d9ff,0 0 18px #57d9ff;opacity:0;transform:rotate(-36deg);animation:rift-streak-pass 5s ease-in infinite;animation-delay:-1s}
.rift-streak-second{top:42%;left:60%;width:100px;animation-duration:6.5s;animation-delay:-3s}
#launch #logo{animation:landing-reveal .9s cubic-bezier(.2,.7,.2,1) both}
#launch #logo img{animation:logo-breathe 6s ease-in-out 1s infinite}
#launch #bottom{animation:landing-reveal .75s cubic-bezier(.2,.7,.2,1) .12s both}
#launch #play{position:relative;overflow:hidden;transition:filter .2s,box-shadow .2s}
#play::after{content:"";position:absolute;inset:-70% -35%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#fffb 49%,#fff0 57%);transform:translateX(-100%);animation:play-shimmer 3.6s ease-in-out .8s infinite}
#launch.ready #play{animation:play-energize 3.5s ease-in-out infinite}
#launch.gone *,#launch.gone *::after,.landing-paused #launch *,.landing-paused #launch *::after{animation-play-state:paused!important}
#logo{flex:none;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:min(65vw,260px);min-height:0;margin:0;padding-top:0;animation:none}
#logo img{width:100%;max-height:120px;object-fit:contain;filter:drop-shadow(0 8px 16px #030a19);animation:none}
#logo::after{display:none}
.launch-tagline{font-size:11px;letter-spacing:.18em;font-weight:900;color:#d7e7ff;margin-top:10px;text-shadow:0 2px 8px #000}
#bottom{flex:none;width:min(100%,440px);padding:18px;margin:0;gap:8px;border:1px solid #6885a780;border-radius:20px;background:linear-gradient(145deg,rgba(17,33,55,.97),rgba(6,17,38,.98));box-shadow:0 12px 32px #02081788,inset 0 1px 0 #b8d3ff22;animation:none}
.launch-heading{font:28px/1.05 RiftDisplay,system-ui,sans-serif;text-align:center;letter-spacing:.01em}
.launch-description{margin:0;text-align:center;font-size:13px;line-height:1.4;color:var(--muted)}
.panel{background:#10203f;border:1.5px solid var(--line);box-shadow:0 4px 14px #02081755,inset 0 1px 0 #b8d3ff22;backdrop-filter:none}
#news-btn{align-self:stretch;justify-content:flex-start;width:100%;height:44px;min-height:44px;border-radius:12px;padding:0 14px;font-size:14px;letter-spacing:0;font-weight:800;text-align:left}
#news-btn .star{font-size:22px;margin-right:2px}
#news-btn #ver{margin-left:auto;font-size:12px;color:var(--muted)}
#news-btn .chev{color:var(--muted);font-size:12px}
#play{height:52px;min-height:52px;border-radius:12px;color:#281e0c;text-shadow:none;font:28px/1 RiftDisplay,system-ui,sans-serif;letter-spacing:.02em;background:linear-gradient(#f7d67a,#e6b74b 65%,#d7a43e);box-shadow:inset 0 0 0 2px #f6e4b4,inset 0 -4px 0 #b8862b;clip-path:polygon(3% 0,97% 0,100% 20%,100% 80%,97% 100%,3% 100%,0 80%,0 20%);animation:none}
#play:hover{filter:brightness(1.06)}
#play:active{transform:translateY(2px);filter:brightness(.94)}
#bar{height:10px;border-radius:6px;border:1px solid #466087;background:#030c1c}
#fill{background:linear-gradient(#8aeaff,#23b9f0);box-shadow:none}
#status{font-size:13px;line-height:1.4;min-height:18px;letter-spacing:0;color:#c9ddf5}
#version{font-size:11px;color:var(--muted);letter-spacing:.03em}
#news{width:min(calc(100vw - var(--safe-left) - var(--safe-right) - 24px),570px);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);padding:20px;border-radius:20px;background:#0c1a33}
#news h2{font:26px RiftDisplay,system-ui,sans-serif;text-shadow:none;letter-spacing:0;margin:0 0 14px;gap:12px}
#news h2 small{font:800 13px RiftBody,system-ui,sans-serif;color:var(--gold)}
#news-close{width:44px;height:44px;min-width:44px;border-radius:12px;border:1.5px solid var(--line);background:#142847;font-size:18px}
.release-picker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 0 14px;border-bottom:1px solid #6689bc44;color:var(--muted);font-size:13px;font-weight:800}
#release-picker{height:44px;flex:1;min-width:160px;border:1.5px solid var(--line);border-radius:10px;padding:0 10px;color:white;background:#142847;font-size:14px}
#release-title{font:23px RiftDisplay,system-ui,sans-serif;margin:18px 0 4px}
#release-date{font-size:12px;color:var(--cyan);margin:0 0 14px}
#news ul{font-size:14px;line-height:1.6;color:#d5e3f7;padding-left:20px}
#news li{padding:0 0 10px}
#news li::marker{color:var(--cyan)}
#notice{font-size:12px;padding:12px;line-height:1.5}
#error{font-size:14px;border-color:#db7c78}
#error button{min-height:44px;background:#2452a2;font-weight:800}
#error pre{font:11px/1.4 monospace}
@keyframes logo-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes arena-drift{from{transform:scale(1.025) translateY(0)}to{transform:scale(1.055) translateY(-4px)}}
@keyframes landing-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes rift-breathe{from{opacity:.35;transform:scale(.85) translate3d(0,0,0)}to{opacity:.95;transform:scale(1.2) translate3d(6%,8%,0)}}
@keyframes rift-beam-sway{from{opacity:.3;transform:rotate(12deg)}to{opacity:.9;transform:rotate(32deg)}}
@keyframes rift-energy-flow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes rift-reactor-wave{0%{opacity:0;transform:scale(.45)}18%{opacity:.9}100%{opacity:0;transform:scale(1.65)}}
@keyframes rift-mote-rise{0%{opacity:0;transform:translate3d(0,0,0)}8%{opacity:1}80%{opacity:.85}100%{opacity:0;transform:translate3d(var(--mote-drift),-105dvh,0)}}
@keyframes rift-streak-pass{0%,60%{opacity:0;transform:translate3d(0,0,0) rotate(-36deg) scaleX(.4)}68%{opacity:.95}90%,100%{opacity:0;transform:translate3d(-440px,320px,0) rotate(-36deg) scaleX(1)}}
@keyframes play-shimmer{0%,30%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
@keyframes play-energize{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}
.signin-option{display:flex;flex-direction:column;gap:5px}
#google-signin{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:44px;min-height:44px;padding:0 12px;border:1px solid #747775;border-radius:10px;background:#f2f2f2;color:#3c4043;font:500 14px/20px Arial,sans-serif;cursor:not-allowed;opacity:1}
#google-signin img{display:block;width:18px;height:18px;object-fit:contain;background:#fff}
#signin-note{margin:0;text-align:center;font-size:11px;line-height:16px;color:#a9bdd0}
#signin-note span{color:#cfbd8e;font-weight:800}
#launch.ready #status{display:none}
@media(orientation:landscape){
 #launch{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,32vw,360px);grid-template-rows:auto auto;align-content:center;align-items:center;gap:14px 0;padding-left:max(3vw,var(--safe-left));padding-right:max(3vw,var(--safe-right))}
 #logo{grid-column:2;grid-row:1;justify-self:center;width:min(100%,250px);padding:0;min-height:0}
 #logo img{max-height:116px;width:100%}
 #bottom{grid-column:2;grid-row:2;justify-self:center;padding:20px}
 #bg{background-image:url('landing/objectives-calm-landscape.webp');background-size:auto 100%;background-position:left center}
 #bg::after{background:linear-gradient(90deg,transparent 42%,rgba(6,17,38,.16) 53%,#061126 72%)}
 .rift-aura-cyan{left:0;top:8%}.rift-aura-gold{left:21%;top:5%}
 .rift-energy-portrait{display:none}.rift-energy-landscape{display:block;left:0;transform:none;width:auto;height:100%}
}
@media(max-height:520px) and (orientation:landscape){
 #launch{gap:8px 0;padding-top:max(10px,var(--safe-top));padding-bottom:max(10px,var(--safe-bottom))}
 #bottom{gap:6px;padding:14px}
 .launch-heading{font-size:24px}
 .launch-description{font-size:12px}
 #logo img{max-height:64px}
 #play{height:44px;min-height:44px;font-size:25px}
 #news{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)}
}
@media(max-height:720px) and (orientation:portrait){
 #launch{padding-top:max(12px,var(--safe-top));padding-bottom:max(12px,var(--safe-bottom));gap:8px}
 #logo img{max-height:88px}
 #bg{background-position:center -35px}
 .rift-energy-portrait{top:-35px}
 #bottom{padding:14px;gap:7px}
 .launch-heading{font-size:26px}
}
@media(max-height:360px) and (orientation:landscape){#logo img{max-height:40px}#bottom{padding:10px;gap:4px}.launch-description{font-size:11px}}
@media(max-width:360px) and (orientation:portrait){#bottom{padding:14px}.launch-heading{font-size:25px}.launch-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-motion:reduce){#bg,#landing-fx{translate:none;will-change:auto}.rift-mote,.rift-streak,.rift-energy,.rift-beam,#play::after{display:none}.rift-aura{opacity:.25}}
#news-btn{display:flex;align-items:center;gap:8px;color:#eef5ff;cursor:pointer}
#status,#version{text-align:center}

/* Account dialog also opens above the Godot canvas from Profile. */
#google-signin{cursor:pointer}
#google-signin:focus-visible{outline:3px solid #7ce8ef;outline-offset:3px}
.cloud-dialog{box-sizing:border-box;max-width:420px;width:calc(100% - 32px);padding:24px;border:1px solid #3d687f;border-radius:16px;background:#111d30;color:#e7f1ff;font:15px/1.5 Arial,sans-serif;box-shadow:0 20px 80px #000a}
.cloud-dialog::backdrop{background:#040914bf}
.cloud-dialog h2{font-size:22px;margin:0 0 12px}
.cloud-dialog p{overflow-wrap:anywhere}
.cloud-google-button{display:flex;justify-content:center;min-height:44px;margin:16px 0}
.cloud-dialog>button{min-height:44px;width:100%;border:1px solid #718796;border-radius:8px;background:#20374c;color:#fff;font:inherit;cursor:pointer}