/* Abyssal menu v2: independent layout, no inherited orbital navigation. */ #menuScreen.ocean-menu-v2{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;box-sizing:border-box!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto!important;align-content:stretch!important;justify-content:stretch!important;gap:0!important;overflow:hidden!important;padding:0!important;margin:0!important;isolation:isolate!important;background:#020c17!important;color:#d7f8ff!important;font-family:Inter,Manrope,sans-serif!important;} #menuScreen.ocean-menu-v2[hidden]{display:none!important} #menuScreen.ocean-menu-v2,#menuScreen.ocean-menu-v2 *{box-sizing:border-box} #menuScreen.ocean-menu-v2:before,#menuScreen.ocean-menu-v2:after{display:none!important;content:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-background{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,24,41,.92),rgba(1,10,22,.92)),radial-gradient(ellipse at 50% 0%,#205870,transparent 65%)} #menuScreen.ocean-menu-v2 .abyss-ocean-light{position:absolute;inset:-30% -15%;background:conic-gradient(from 220deg at 50% 0%,transparent 0deg,rgba(94,224,243,.055) 10deg,transparent 23deg,transparent 45deg,rgba(63,177,223,.08) 61deg,transparent 76deg,transparent 103deg,rgba(121,241,255,.07) 119deg,transparent 132deg);filter:blur(9px);animation:ocean-v2-light 18s ease-in-out infinite alternate} #menuScreen.ocean-menu-v2 .abyss-ocean-particles{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(129,223,244,.34) 1px,transparent 2px),radial-gradient(circle,rgba(129,223,244,.17) 1px,transparent 2px);background-size:123px 117px,197px 223px;background-position:22px 18px,73px 124px;opacity:.36;animation:ocean-v2-drift 25s linear infinite} #menuScreen.ocean-menu-v2 .abyss-ocean-floor{position:absolute;inset:auto 0 0;height:20%;background:linear-gradient(transparent,rgba(0,5,13,.8)),repeating-linear-gradient(165deg,transparent 0 180px,rgba(53,119,147,.045) 181px 183px,transparent 186px 300px);border-bottom:5px solid #01050a} #menuScreen.ocean-menu-v2 .abyss-menu-heading{position:relative!important;z-index:2!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;width:100%!important;min-height:105px!important;margin:0!important;padding:10px 18px 0!important;background:none!important;border:0!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading .abyss-menu-kicker{font:700 9px 'DM Mono',monospace!important;letter-spacing:.23em;color:#6fdfe8} #menuScreen.ocean-menu-v2 .abyss-menu-heading h1{font-family:Cinzel,Georgia,serif!important;font-size:clamp(22px,2.65vw,38px)!important;font-weight:700!important;line-height:1.15!important;text-transform:uppercase!important;letter-spacing:.11em!important;margin:6px 0 4px!important;color:#ecffff!important;text-shadow:0 0 22px rgba(91,238,251,.25)} #menuScreen.ocean-menu-v2 .abyss-menu-heading h1 em{font-style:normal!important;color:#89e6ee} #menuScreen.ocean-menu-v2 .abyss-menu-heading p{font:500 11px Inter,Manrope,sans-serif!important;color:#8faebb!important;margin:0!important} #menuScreen.ocean-menu-v2 .abyss-ocean-stage{position:relative!important;z-index:2!important;display:block!important;min-height:275px!important;height:100%!important;width:100%!important;overflow:hidden!important;margin:0!important;padding:0!important;background:radial-gradient(ellipse at 50% 51%,rgba(47,120,146,.12),transparent 28%)!important;border:0!important;transform:none!important;touch-action:pan-y} #menuScreen.ocean-menu-v2 .abyss-ocean-stage:before{content:"";position:absolute;left:50%;top:50%;width:min(50vw,430px);height:min(30vh,220px);transform:translate(-50%,-50%);border:1px solid rgba(66,155,193,.12);border-radius:50%;pointer-events:none} #menuScreen.ocean-menu-v2 .abyss-ocean-center-mark{position:absolute;left:50%;top:48%;width:130px;height:130px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(74,220,246,.035),transparent 68%);border:1px dashed rgba(97,205,230,.13);pointer-events:none} #menuScreen.ocean-menu-v2 .abyss-ocean-portal-layer{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;padding:0!important;margin:0!important;pointer-events:none!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-destination{position:absolute!important;left:var(--portal-x)!important;top:var(--portal-y)!important;transform:translate(-50%,-50%)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:clamp(110px,11.7vw,174px)!important;height:clamp(88px,11vh,125px)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:13px 8px!important;pointer-events:auto!important;overflow:visible!important;clip-path:none!important;outline-offset:5px!important;border-radius:44% 56% 52% 48% / 50% 45% 55% 50%!important;border:1.5px solid var(--portal-color,#55dff0)!important;color:#edffff!important;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--portal-color,#55dff0) 20%,transparent),transparent 57%),radial-gradient(ellipse at 50% 58%,rgba(14,47,68,.91),rgba(2,12,27,.98) 73%)!important;box-shadow:0 0 22px color-mix(in srgb,var(--portal-color,#55dff0) 22%,transparent),inset 0 0 25px rgba(60,145,179,.1)!important;text-decoration:none!important;letter-spacing:normal!important;font:inherit!important;line-height:normal!important;opacity:1!important;visibility:visible!important;transition:filter .2s ease,box-shadow .2s ease!important} #menuScreen.ocean-menu-v2 .abyss-destination:before{content:"";position:absolute;inset:-7px;border-radius:53% 47% 42% 58% / 44% 51% 49% 56%;border:1px solid color-mix(in srgb,var(--portal-color,#55dff0) 36%,transparent);pointer-events:none;animation:ocean-v2-portal 11s linear infinite} #menuScreen.ocean-menu-v2 .abyss-destination:after{content:none!important;display:none!important} #menuScreen.ocean-menu-v2 .abyss-destination .abyss-destination-icon{color:var(--portal-color,#8ce8f1)!important;font-size:clamp(20px,2.5vw,32px)!important;line-height:1!important;text-shadow:0 0 15px var(--portal-color,#55dff0);display:block!important} #menuScreen.ocean-menu-v2 .abyss-destination strong{font:800 clamp(9px,.8vw,12px) Cinzel,Georgia,serif!important;letter-spacing:.055em!important;text-align:center!important;line-height:1.25!important;white-space:normal!important;color:#f4fdff!important} #menuScreen.ocean-menu-v2 .abyss-destination small{font:600 clamp(7px,.54vw,9px) 'DM Mono',monospace!important;letter-spacing:.035em!important;line-height:1.15!important;text-align:center!important;color:#94bbc8!important;white-space:normal!important} #menuScreen.ocean-menu-v2 .abyss-destination:hover,#menuScreen.ocean-menu-v2 .abyss-destination.portal-near,#menuScreen.ocean-menu-v2 .abyss-destination:focus-visible{filter:brightness(1.3)!important;box-shadow:0 0 42px color-mix(in srgb,var(--portal-color,#55dff0) 50%,transparent),inset 0 0 22px color-mix(in srgb,var(--portal-color,#55dff0) 16%,transparent)!important} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=cyan]{--portal-color:#66e7ff} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=teal]{--portal-color:#51ebc6} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=rift]{--portal-color:#c582ff} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=gold]{--portal-color:#efc77e} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=violet]{--portal-color:#b6a1ff} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=blue]{--portal-color:#80bbff} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=ice]{--portal-color:#abf3f7} #menuScreen.ocean-menu-v2 .abyss-destination[data-portal-tone=rose]{--portal-color:#ff96c2} #menuScreen.ocean-menu-v2 #riftPortalBtn{width:clamp(125px,13.2vw,190px)!important;height:clamp(105px,14vh,146px)!important;border-radius:47% 53% 62% 38% / 52% 42% 58% 48%!important;background:radial-gradient(circle at 50% 47%,#1b062c 5%,rgba(118,38,167,.45) 32%,#030716 71%)!important;box-shadow:0 0 39px rgba(183,85,255,.3),inset 0 0 34px rgba(159,54,219,.24)!important;animation:ocean-v2-rift 4s ease-in-out infinite} #menuScreen.ocean-menu-v2 #riftPortalBtn:before{inset:-13px;border:2px solid rgba(206,143,255,.38);border-radius:57% 43% 49% 51%;animation-duration:5s} #menuScreen.ocean-menu-v2 .abyss-ocean-diver{position:absolute!important;z-index:8!important;left:var(--diver-x,50%)!important;top:var(--diver-y,48%)!important;width:58px!important;height:74px!important;transform:translate(-50%,-50%) rotate(var(--swim-angle,0rad))!important;pointer-events:none!important;filter:drop-shadow(0 0 14px rgba(93,237,252,.5));transition:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-diver span{position:absolute!important;display:block!important} #menuScreen.ocean-menu-v2 #menuOceanSpecimen{display:block!important;position:absolute!important;left:-36px!important;top:-46px!important;width:86px!important;height:58px!important;transform:rotate(calc(-1 * var(--swim-angle,0rad)))!important;pointer-events:none!important;filter:drop-shadow(0 0 11px rgba(128,229,248,.35))} #menuScreen.ocean-menu-v2 .abyss-ocean-hint{position:absolute!important;bottom:12px!important;left:50%!important;transform:translateX(-50%)!important;z-index:9!important;color:#a8d5e3!important;background:rgba(1,15,28,.88)!important;border:1px solid rgba(85,191,216,.25)!important;padding:8px 14px!important;white-space:nowrap!important;text-align:center!important;font:700 10px 'DM Mono',monospace!important;letter-spacing:.07em!important;pointer-events:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-enter{display:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utilities{position:relative!important;z-index:4!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:9px!important;width:100%!important;padding:7px 15px!important;background:rgba(2,17,30,.82)!important;border:0!important;border-top:1px solid rgba(105,200,224,.14)!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utility{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:100px!important;max-width:none!important;width:auto!important;height:32px!important;min-height:0!important;padding:7px 14px!important;border-radius:5px!important;border:1px solid rgba(94,207,230,.26)!important;background:rgba(7,30,49,.84)!important;color:#c1e5eb!important;font:700 10px Inter,Manrope,sans-serif!important;letter-spacing:.05em!important;line-height:1.2!important;text-align:center!important;box-shadow:none!important;position:static!important;transform:none!important;opacity:1!important;pointer-events:auto!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utility:hover{border-color:#80d9e9!important;color:#fff!important;background:rgba(13,56,81,.96)!important} #menuScreen.ocean-menu-v2 .abyss-ocean-account,#menuScreen.ocean-menu-v2 .abyss-ocean-preferences{position:absolute!important;z-index:10!important;top:10px!important;bottom:auto!important;display:flex!important;align-items:center!important;gap:6px!important;width:auto!important;max-width:32%!important;min-height:0!important;padding:0!important;margin:0!important;background:none!important;border:0!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-account{left:15px!important;flex-direction:column!important;align-items:flex-start!important} #menuScreen.ocean-menu-v2 .abyss-ocean-account span{font:700 9px Inter,sans-serif!important;color:#a4ced7!important;letter-spacing:.07em!important} #menuScreen.ocean-menu-v2 .abyss-ocean-account #loginBtn{position:static!important;width:auto!important;padding:6px 10px!important;min-height:27px!important;max-height:32px!important;font:700 9px Inter,sans-serif!important;letter-spacing:.045em!important;border:1px solid rgba(92,198,227,.35)!important;border-radius:5px!important;background:rgba(7,37,60,.8)!important;color:#e8fcff!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-preferences{right:15px!important;justify-content:flex-end!important} #menuScreen.ocean-menu-v2 .abyss-ocean-preferences .language-setting{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:4px!important;position:static!important;margin:0!important;padding:0!important;background:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-preferences .language-setting label{font:700 8px Inter,sans-serif!important;letter-spacing:.08em!important;color:#94adbb!important} #menuScreen.ocean-menu-v2 #languageSelect{position:static!important;min-width:90px!important;width:110px!important;height:30px!important;padding:4px 7px!important;font:600 10px Inter,sans-serif!important;background:#071e32!important;color:#efffff!important} #menuScreen.ocean-menu-v2 .abyss-ocean-preferences #downloadBtn{position:static!important;width:auto!important;min-width:85px!important;height:32px!important;font-size:9px!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-legal{position:relative!important;z-index:4!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;min-height:30px!important;padding:4px 9px!important;margin:0!important;border:0!important;background:rgba(0,7,16,.92)!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-legal .legal-footer{display:flex!important;position:static!important;justify-content:center!important;gap:12px!important;flex-wrap:wrap!important;transform:none!important;margin:0!important} #menuScreen.ocean-menu-v2 .abyss-ocean-legal a{font-size:8px!important;color:#7c9fab!important} @keyframes ocean-v2-light{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}} @keyframes ocean-v2-drift{to{background-position:22px 225px,73px 347px}} @keyframes ocean-v2-portal{to{transform:rotate(360deg)}} @keyframes ocean-v2-rift{50%{filter:brightness(1.22) saturate(1.2)}} @media(max-width:800px){ #menuScreen.ocean-menu-v2{grid-template-rows:auto minmax(0,1fr) auto auto!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading{min-height:105px!important;padding-top:55px!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading h1{font-size:clamp(18px,5.2vw,29px)!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading p{font-size:9px!important} #menuScreen.ocean-menu-v2 .abyss-destination{width:clamp(80px,21vw,110px)!important;height:clamp(70px,12vh,94px)!important;padding:8px 4px!important;gap:3px!important} #menuScreen.ocean-menu-v2 .abyss-destination strong{font-size:9px!important} #menuScreen.ocean-menu-v2 .abyss-destination small{display:none!important} #menuScreen.ocean-menu-v2 .abyss-destination .abyss-destination-icon{font-size:21px!important} #menuScreen.ocean-menu-v2 #riftPortalBtn{width:clamp(90px,23vw,122px)!important;height:clamp(80px,13vh,106px)!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utilities{gap:5px!important;padding:7px 6px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utility{min-width:0!important;font-size:9px!important;padding:6px 10px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-account{top:8px!important;left:10px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-preferences{top:8px!important;right:8px!important;max-width:47%!important} #menuScreen.ocean-menu-v2 .abyss-ocean-hint{bottom:8px!important;font-size:8px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-diver{transform:translate(-50%,-50%) rotate(var(--swim-angle,0rad)) scale(.85)!important} } @media(max-width:550px){ #menuScreen.ocean-menu-v2 .abyss-menu-heading{min-height:116px!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading h1{font-size:20px!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading p{max-width:270px!important;line-height:1.3!important} #menuScreen.ocean-menu-v2 .abyss-destination{width:clamp(73px,23vw,104px)!important;height:clamp(65px,10vh,87px)!important} #menuScreen.ocean-menu-v2 #riftPortalBtn{width:clamp(82px,24vw,113px)!important;height:clamp(75px,12vh,102px)!important} #menuScreen.ocean-menu-v2 .abyss-destination strong{font-size:8px!important;letter-spacing:0!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utilities{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utility{font-size:8px!important;padding:5px 2px!important;height:30px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-preferences #downloadBtn{display:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-account span{font-size:8px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-account #loginBtn{font-size:8px!important;padding:4px 7px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-hint{font-size:7px!important;white-space:normal!important;width:max-content!important;max-width:68%!important} #menuScreen.ocean-menu-v2 .abyss-ocean-enter{display:block!important;position:absolute!important;z-index:10!important;right:9px!important;bottom:7px!important;width:94px!important;min-height:33px!important;padding:5px!important;background:#0b3448!important;border:1px solid rgba(97,222,237,.5)!important;border-radius:5px!important;color:#ebfcff!important;font:800 8px Inter,sans-serif!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-enter[disabled]{opacity:.38!important} #menuScreen.ocean-menu-v2 .abyss-ocean-mobile-pad{position:absolute!important;left:9px!important;bottom:6px!important;z-index:10!important;display:grid!important;grid-template-columns:repeat(3,25px)!important;grid-template-rows:repeat(2,25px)!important;gap:2px!important} } @media(max-height:620px) and (min-width:800px){#menuScreen.ocean-menu-v2 .abyss-menu-heading{min-height:68px!important}#menuScreen.ocean-menu-v2 .abyss-destination{height:86px!important;width:125px!important}#menuScreen.ocean-menu-v2 #riftPortalBtn{height:96px!important;width:145px!important}} @media(prefers-reduced-motion:reduce){#menuScreen.ocean-menu-v2 *,#menuScreen.ocean-menu-v2 *:before{animation:none!important;transition:none!important}} /* FIX: legacy #menuScreen responsive CSS defines TWO grid columns. Force the new ocean scene into one full-width column. */ #menuScreen.ocean-menu-v2{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important;grid-auto-flow:row!important;justify-items:stretch!important;align-items:stretch!important} #menuScreen.ocean-menu-v2>.abyss-menu-heading,#menuScreen.ocean-menu-v2>.abyss-ocean-stage,#menuScreen.ocean-menu-v2>.abyss-ocean-utilities,#menuScreen.ocean-menu-v2>.abyss-ocean-legal{grid-column:1/-1!important;min-width:0!important;max-width:none!important;justify-self:stretch!important;align-self:stretch!important} #menuScreen.ocean-menu-v2>.abyss-ocean-stage{width:100%!important;max-width:100%!important;min-width:0!important} #menuScreen.ocean-menu-v2 .abyss-ocean-portal-layer{width:100%!important;max-width:none!important;min-width:0!important} #menuScreen.ocean-menu-v2>.abyss-ocean-account,#menuScreen.ocean-menu-v2>.abyss-ocean-preferences{grid-column:1!important} /* Shared diver canvas replaces legacy vertical CSS stick figure. */ #menuScreen.ocean-menu-v2 #menuOceanDiver{width:174px!important;height:126px!important;transform:translate(-50%,-50%)!important;filter:drop-shadow(0 0 12px rgba(24,194,255,.55))!important} #menuScreen.ocean-menu-v2 #menuOceanDiverCanvas{display:block!important;position:absolute!important;inset:0 auto auto 0!important;width:174px!important;height:126px!important;max-width:none!important;pointer-events:none!important;transform:none!important} #menuScreen.ocean-menu-v2 #menuOceanSpecimen{left:68px!important;top:-28px!important;width:90px!important;height:60px!important;transform:none!important;pointer-events:none!important} @media(max-width:550px){ #menuScreen.ocean-menu-v2 #menuOceanDiver{transform:translate(-50%,-50%) scale(.72)!important;transform-origin:center!important} #menuScreen.ocean-menu-v2 #menuOceanDiverCanvas{width:174px!important;height:126px!important} } /* ABYSSAL 2026 OCEAN V3: extended world, cinematic currents, Rift portals. */ #menuScreen.ocean-menu-v2 .abyss-ocean-stage{overflow:hidden!important;touch-action:none!important;background:radial-gradient(ellipse at 49% 55%,rgba(9,64,88,.20),transparent 62%)!important} #menuScreen.ocean-menu-v2 .abyss-ocean-background{background: radial-gradient(ellipse at 54% 10%,rgba(22,98,129,.20),transparent 52%), linear-gradient(180deg,#031c30 0%,#020f21 46%,#000812 100%)!important} #menuScreen.ocean-menu-v2 .abyss-ocean-light{background: repeating-conic-gradient(from 188deg at 52% -22%,transparent 0deg 8deg,rgba(83,214,238,.035) 9deg 11deg,transparent 13deg 22deg)!important;filter:blur(18px);opacity:.66} #menuScreen.ocean-menu-v2 .abyss-ocean-floor{height:30%!important;background: radial-gradient(ellipse at 50% 130%,rgba(15,115,151,.24),transparent 60%), linear-gradient(180deg,transparent,rgba(0,4,12,.91)), repeating-linear-gradient(156deg,transparent 0 190px,rgba(37,105,136,.06) 191px 195px,transparent 198px 360px)!important} #menuScreen.ocean-menu-v2 .abyss-ocean-portal-layer{position:absolute!important;inset:0 auto auto 0!important;will-change:transform!important;transform-origin:top left!important;overflow:visible!important;z-index:3} #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate{ width:clamp(122px,13vw,168px)!important; height:clamp(122px,13vw,168px)!important; border:0!important;border-radius:50%!important; background: radial-gradient(circle at 50% 47%,rgba(1,7,18,.96) 0%,rgba(0,8,19,.91) 46%,color-mix(in srgb,var(--portal-color) 16%,#010913) 65%,rgba(1,6,17,.96) 83%)!important; box-shadow:0 0 36px color-mix(in srgb,var(--portal-color) 22%,transparent),inset 0 0 21px color-mix(in srgb,var(--portal-color) 17%,transparent)!important; overflow:visible!important;gap:4px!important;padding:12px!important;outline-offset:13px!important; isolation:isolate!important; } #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate:before{ content:""!important;display:block!important;position:absolute!important;inset:-15px!important; border-radius:50%!important;border:0!important;opacity:.96!important; background:conic-gradient( from 16deg,var(--portal-color) 0 9deg,transparent 9deg 17deg, color-mix(in srgb,var(--portal-color) 74%,transparent) 17deg 48deg,transparent 48deg 55deg, var(--portal-color) 55deg 88deg,transparent 88deg 105deg, color-mix(in srgb,var(--portal-color) 85%,transparent) 105deg 148deg,transparent 148deg 159deg, var(--portal-color) 159deg 174deg,transparent 174deg 184deg, color-mix(in srgb,var(--portal-color) 70%,transparent) 184deg 238deg,transparent 238deg 250deg, var(--portal-color) 250deg 277deg,transparent 277deg 293deg, color-mix(in srgb,var(--portal-color) 85%,transparent) 293deg 354deg,transparent 354deg 360deg)!important; -webkit-mask:radial-gradient(farthest-side,transparent 65%,#000 68% 82%,transparent 87%); mask:radial-gradient(farthest-side,transparent 65%,#000 68% 82%,transparent 87%); filter:drop-shadow(0 0 12px var(--portal-color))!important; animation:riftV3Swirl 9s linear infinite!important; pointer-events:none!important; } #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate:after{ content:""!important;display:block!important;position:absolute!important;inset:-27px!important; border:1px dashed color-mix(in srgb,var(--portal-color) 35%,transparent)!important;border-radius:50%!important; background:radial-gradient(circle at 35% 18%,var(--portal-color) 0 2px,transparent 4px), radial-gradient(circle at 87% 53%,var(--portal-color) 0 1.5px,transparent 4px)!important; opacity:.47!important;animation:riftV3Swirl 16s linear infinite reverse!important; pointer-events:none!important; } #menuScreen.ocean-menu-v2 .abyss-rift-fractures{ position:absolute!important;inset:-8px!important;border-radius:50%!important;pointer-events:none!important;z-index:-1!important; background:conic-gradient(from 210deg,transparent 0 13%,color-mix(in srgb,var(--portal-color) 80%,transparent) 14%,transparent 17% 45%,var(--portal-color) 47%,transparent 49% 71%,var(--portal-color) 74%,transparent 77%); -webkit-mask:radial-gradient(farthest-side,transparent 55%,#000 58% 64%,transparent 70%); mask:radial-gradient(farthest-side,transparent 55%,#000 58% 64%,transparent 70%); animation:riftV3Swirl 5.5s linear infinite reverse!important;filter:drop-shadow(0 0 8px var(--portal-color))!important; } #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate strong,#menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate small,#menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate .abyss-destination-icon{position:relative!important;z-index:1!important;} #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate .abyss-destination-icon{font-size:25px!important;color:var(--portal-color)!important;text-shadow:0 0 9px color-mix(in srgb,var(--portal-color) 72%,transparent)!important} #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate strong{font-size:clamp(10px,.83vw,12px)!important;line-height:1.28!important} #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate.portal-near{filter:brightness(1.42)!important} #menuScreen.ocean-menu-v2 #riftPortalBtn.abyss-rift-gate{ width:clamp(152px,16vw,199px)!important;height:clamp(152px,16vw,199px)!important; border-radius:49% 51% 52% 48%!important; --portal-color:#c470ff!important; background: radial-gradient(circle at 50% 50%,#010107 0%,#0a0320 28%,rgba(75,13,128,.48) 56%,#010917 78%)!important; box-shadow:0 0 42px rgba(165,77,241,.32),0 0 78px rgba(107,24,154,.21),inset 0 0 36px rgba(183,84,248,.32)!important; animation:riftV3Breathe 4.5s ease-in-out infinite!important; } #menuScreen.ocean-menu-v2 #riftPortalBtn.abyss-rift-gate:before{inset:-22px!important;animation-duration:4.6s!important} #menuScreen.ocean-menu-v2 #riftPortalBtn.abyss-rift-gate:after{inset:-36px!important;animation-duration:9s!important} #menuScreen.ocean-menu-v2 .abyss-ocean-diver{ width:180px!important;height:130px!important;left:var(--diver-x,50%)!important;top:var(--diver-y,50%)!important; transform:translate(-50%,-50%)!important;filter:drop-shadow(0 0 7px rgba(83,188,216,.3))!important; will-change:left,top!important;z-index:7!important; } #menuScreen.ocean-menu-v2 #menuOceanDiverCanvas{width:180px!important;height:130px!important;} #menuScreen.ocean-menu-v2 #menuOceanSpecimen{display:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-center-mark{display:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-hint{background:rgba(0,10,19,.89)!important;max-width:min(92vw,600px)!important;white-space:normal!important;bottom:12px!important;} @keyframes riftV3Swirl{to{transform:rotate(360deg)}} @keyframes riftV3Breathe{0%,100%{filter:brightness(.9) saturate(.95)}50%{filter:brightness(1.2) saturate(1.24)}} @media(max-width:760px){ #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate{width:120px!important;height:120px!important} #menuScreen.ocean-menu-v2 #riftPortalBtn.abyss-rift-gate{width:148px!important;height:148px!important} #menuScreen.ocean-menu-v2 #menuOceanDiver{transform:translate(-50%,-50%) scale(.86)!important;} #menuScreen.ocean-menu-v2 .abyss-ocean-hint{bottom:70px!important;font-size:8px!important;max-width:94%!important} } @media(prefers-reduced-motion:reduce){ #menuScreen.ocean-menu-v2 .abyss-rift-gate:before,#menuScreen.ocean-menu-v2 .abyss-rift-gate:after,#menuScreen.ocean-menu-v2 .abyss-rift-fractures{animation:none!important} } /* Static ocean terrain belongs to the same oversized world as the rift portals. */ #menuScreen.ocean-menu-v2 .abyss-ocean-scenery{display:block!important;position:absolute!important;left:0!important;top:0!important;z-index:0!important;width:100%!important;height:100%!important;pointer-events:none!important;opacity:.96!important;transform:none!important} #menuScreen.ocean-menu-v2 .abyss-destination.abyss-rift-gate{z-index:2!important} /* Navigation threads belong to the world layer, not the swimmer or the HUD. */ #menuScreen.ocean-menu-v2 .abyss-ocean-routes{ position:absolute!important;left:0!important;top:0!important;z-index:1!important; pointer-events:none!important;max-width:none!important;opacity:.92!important; } #menuScreen.ocean-menu-v2 .abyss-ocean-bubbles{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; z-index:6!important;pointer-events:none!important; } #menuScreen.ocean-menu-v2 #menuOceanDiver{ filter:none!important;box-shadow:none!important; } /* CSS cursors share one centered 16px hotspot on desktop only. */ @media(hover:hover) and (pointer:fine){ html body #app,html body #app button,html body #app a, html body #app select,html body #app canvas,html body #app [role="button"], html body .abyss-descent-panel,html body .abyss-descent-panel *, html body .abyss-cinematic-dialog,html body .abyss-cinematic-dialog *, html body *:not(input):not(textarea):not([contenteditable="true"]){ cursor:url('abyssal-red-reticle.svg?v=1') 16 16,crosshair!important; } html body #app input:not([type="range"]),html body #app textarea, html body [contenteditable="true"]{cursor:text!important} } /* Currents are a viewport overlay that follows the diver, not a fixed world texture. */ #menuScreen.ocean-menu-v2 .abyss-ocean-routes{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; max-width:none!important;z-index:5!important;pointer-events:none!important; opacity:1!important;transform:none!important; } /* Revised mobile ocean navigation: analog control, no directional arrow buttons. */ #menuScreen.ocean-menu-v2 #menuOceanHint{display:none!important} #menuScreen.ocean-menu-v2 #menuOceanMobilePad{display:none!important} @media (hover:none) and (pointer:coarse), (max-width:760px){ #menuScreen.ocean-menu-v2 #menuOceanMobilePad.ocean-joystick{ display:flex!important;position:absolute!important;left:max(16px,env(safe-area-inset-left))!important; bottom:clamp(16px,4vh,30px)!important;z-index:11!important; width:clamp(96px,26vw,132px)!important;height:clamp(96px,26vw,132px)!important; padding:0!important;align-items:center!important;justify-content:center!important; border-radius:50%!important;border:1px solid rgba(143,221,234,.27)!important; background:radial-gradient(circle,rgba(64,160,185,.10),rgba(14,53,78,.14) 65%,rgba(13,39,59,.07))!important; box-shadow:inset 0 0 18px rgba(109,232,255,.10)!important; backdrop-filter:blur(2px);touch-action:none!important;pointer-events:auto!important; grid-template-columns:none!important;grid-template-rows:none!important; } #menuScreen.ocean-menu-v2 #menuOceanMobilePad .ocean-joystick-thumb{ width:39%!important;height:39%!important;border-radius:50%!important;display:block!important; background:radial-gradient(circle at 35% 30%,rgba(185,246,255,.32),rgba(69,144,166,.18))!important; border:1px solid rgba(182,242,255,.4)!important; box-shadow:0 0 12px rgba(75,202,234,.12)!important; pointer-events:none!important;transition:none!important;will-change:transform; } #menuScreen.ocean-menu-v2 .abyss-ocean-stage{touch-action:none!important} #menuScreen.ocean-menu-v2 .abyss-ocean-routes{pointer-events:none!important} } /* Legal links occupy their own bottom grid row, never an overlay on navigation buttons. */ #menuScreen.ocean-menu-v2{ grid-template-rows:minmax(70px,auto) minmax(0,1fr) auto minmax(27px,auto)!important; } #menuScreen.ocean-menu-v2>.abyss-menu-heading{grid-row:1!important} #menuScreen.ocean-menu-v2>#menuOceanStage{grid-row:2!important} #menuScreen.ocean-menu-v2>.abyss-ocean-utilities{grid-row:3!important} #menuScreen.ocean-menu-v2>.abyss-ocean-legal.menu-footer{ grid-column:1/-1!important;grid-row:4!important; position:relative!important;inset:auto!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; align-self:end!important;justify-self:stretch!important;order:initial!important; width:100%!important;max-width:100%!important;min-height:27px!important;height:auto!important; margin:0!important;padding:3px max(9px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) 9px!important; display:flex!important;justify-content:flex-end!important;align-items:center!important; background:rgba(0,6,15,.94)!important;border:0!important; border-top:1px solid rgba(88,171,194,.14)!important; transform:none!important;z-index:5!important;overflow:visible!important; } #menuScreen.ocean-menu-v2>.abyss-ocean-legal .legal-footer{ position:static!important;inset:auto!important;transform:none!important; display:flex!important;justify-content:flex-end!important;align-items:center!important; flex-wrap:wrap!important;gap:4px 12px!important;width:auto!important; padding:0!important;margin:0!important; } #menuScreen.ocean-menu-v2>.abyss-ocean-legal .legal-footer a{ font-size:9px!important;line-height:1.35!important;white-space:nowrap!important; position:relative!important;z-index:1!important; } @media(max-width:700px){ #menuScreen.ocean-menu-v2>.abyss-ocean-legal.menu-footer{ margin:0!important;padding:4px max(10px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) 10px!important; min-height:30px!important; } #menuScreen.ocean-menu-v2>.abyss-ocean-legal .legal-footer{ justify-content:flex-end!important;gap:3px 10px!important; } #menuScreen.ocean-menu-v2>.abyss-ocean-legal .legal-footer a{font-size:8px!important} } /* ABYSSAL SUBMARINE DESCENT: three in-world encounters, secondary tools below. */ #menuScreen.ocean-menu-v2{grid-template-rows:minmax(50px,auto) minmax(280px,1fr) auto auto!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading{ min-height:60px!important;padding:8px 12px 3px!important; background:linear-gradient(180deg,rgba(1,10,20,.70),rgba(1,10,20,.08))!important } #menuScreen.ocean-menu-v2 .abyss-menu-heading h1{font-size:clamp(20px,3vw,32px)!important;letter-spacing:.18em!important;margin:0!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading p{font-size:10px!important;margin:3px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-stage{ min-height:280px!important;overflow:hidden!important; background:linear-gradient(90deg,rgba(10,77,98,.09) 0%,transparent 34%,rgba(31,103,130,.035) 52%,transparent 65%,rgba(25,12,56,.11) 100%)!important } #menuScreen.ocean-menu-v2 .abyss-ocean-submarine{ display:block!important;position:absolute!important;left:0!important;top:0!important; width:100%!important;height:100%!important;max-width:none!important; z-index:2!important;pointer-events:none!important;transform:none!important; } #menuScreen.ocean-menu-v2 .abyss-ocean-portal-layer{z-index:3!important} #menuScreen.ocean-menu-v2 #playBtn.abyss-destination, #menuScreen.ocean-menu-v2 #onlineBtn.abyss-destination{ width:clamp(110px,20vw,190px)!important;height:clamp(80px,15vh,130px)!important; border-radius:56% 44% 60% 40% / 47% 65% 35% 53%!important; background:radial-gradient(ellipse,rgba(4,37,58,.88) 0%,rgba(15,75,101,.51) 43%,rgba(13,53,77,.19) 65%,transparent 80%)!important; clip-path:none!important;box-shadow:inset 0 0 28px rgba(97,236,255,.14),0 0 36px rgba(62,188,220,.12)!important; border:1px solid rgba(97,223,246,.36)!important; animation:abyss-current-pull 3.8s ease-in-out infinite!important; } #menuScreen.ocean-menu-v2 #onlineBtn.abyss-destination{ border-color:rgba(91,245,199,.47)!important; background:radial-gradient(ellipse,rgba(4,51,53,.9),rgba(17,99,91,.38) 46%,transparent 82%)!important; } #menuScreen.ocean-menu-v2 #playBtn.abyss-destination:before, #menuScreen.ocean-menu-v2 #onlineBtn.abyss-destination:before{ border-style:dashed!important;animation:riftV3Swirl 3.5s linear infinite!important;opacity:.35!important; } #menuScreen.ocean-menu-v2 #riftPortalBtn.abyss-destination{ width:clamp(142px,23vw,225px)!important;height:clamp(65px,12vh,95px)!important; border-radius:46% 54% 44% 56% / 35% 45% 55% 65%!important; background:radial-gradient(ellipse,rgba(0,0,8,.96) 7%,rgba(29,6,39,.85) 35%,rgba(53,19,80,.26) 63%,transparent 83%)!important; border:1px solid rgba(113,59,155,.24)!important;box-shadow:0 0 26px rgba(108,49,152,.12),inset 0 0 28px #02000e!important; animation:abyss-floor-breath 5s ease-in-out infinite!important; } #menuScreen.ocean-menu-v2 #riftPortalBtn.abyss-destination:before{inset:-8px!important;border-color:rgba(127,78,173,.20)!important} #menuScreen.ocean-menu-v2 .abyss-ocean-diver.ocean-entering{ opacity:0!important;transform:translate(-50%,-50%) scale(.25)!important; transition:transform .43s ease-in,opacity .43s ease-in!important } #menuScreen.ocean-menu-v2 .abyss-ocean-utilities{ display:flex!important;flex-wrap:wrap!important;justify-content:center!important; gap:5px!important;padding:5px 10px!important;max-height:128px!important; overflow-y:auto!important;background:linear-gradient(#06141f,#020a13)!important } #menuScreen.ocean-menu-v2 .abyss-ocean-utilities>.abyss-ocean-utility{ display:inline-flex!important;flex-direction:row!important;gap:5px!important; width:auto!important;min-width:0!important;max-width:175px!important;min-height:33px!important; height:auto!important;padding:7px 12px!important;border-radius:8px!important; font-size:10px!important;letter-spacing:.03em!important;white-space:normal!important } #menuScreen.ocean-menu-v2 .abyss-ocean-utilities>.abyss-side-utility strong{font-size:10px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utilities>.abyss-side-utility small{display:none!important} #menuScreen.ocean-menu-v2 #resonanceBtn{background:linear-gradient(135deg,#39225a,#160a2a)!important;color:#e8ccff!important;border-color:#ad77fc!important} #menuScreen.ocean-menu-v2 #wheelBtn{background:linear-gradient(135deg,#e1b737,#664709)!important;color:#fff5b9!important;border-color:#f7d45b!important} #menuScreen.ocean-menu-v2 #profileBtn{background:linear-gradient(135deg,#222,#020305)!important;color:#eef0f1!important;border-color:#44494c!important} #menuScreen.ocean-menu-v2 #shopBtn{ background:repeating-linear-gradient(142deg,transparent 0 19px,rgba(5,2,0,.45) 20px 22px,transparent 23px 37px), linear-gradient(120deg,#6b432c,#302018 54%,#775037)!important; color:#f3d6b5!important;border:2px solid #8b5936!important; box-shadow:inset 0 0 12px #160a05,0 0 12px rgba(91,44,27,.35)!important; position:relative!important } #menuScreen.ocean-menu-v2 #shopBtn:before{ content:"";position:absolute;inset:-5px;border:1px solid rgba(154,95,198,.4); border-radius:10px 16px 9px 14px;pointer-events:none; box-shadow:inset 3px 0 4px rgba(124,67,172,.15)!important } #shopScreen .shop-modal{ border:2px solid #805437!important; background:repeating-linear-gradient(135deg,transparent 0 100px,rgba(125,84,46,.025) 101px 104px,transparent 105px 210px), linear-gradient(145deg,#130f0d,#0b0e18 64%,#1a110e)!important; box-shadow:inset 0 0 35px rgba(113,64,30,.16),0 0 40px rgba(27,8,39,.55)!important } #shopScreen .shop-heading h2,#shopScreen .shop-section-title{color:#e9be8d!important} #shopScreen .shop-modal:before{ content:"";position:absolute;inset:8px;border:1px dashed rgba(116,69,41,.22); pointer-events:none;border-radius:8px } @keyframes abyss-current-pull{50%{filter:brightness(1.24);border-radius:47% 53% 38% 62% / 62% 38% 58% 42%}} @keyframes abyss-floor-breath{50%{filter:brightness(1.2);box-shadow:0 0 40px rgba(129,60,181,.20),inset 0 0 30px #02000e}} @media(max-width:700px){ #menuScreen.ocean-menu-v2 .abyss-menu-heading{min-height:56px!important;padding-top:5px!important} #menuScreen.ocean-menu-v2 .abyss-menu-heading p{font-size:8px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utilities{max-height:122px!important;padding:4px 5px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utilities>.abyss-ocean-utility{font-size:8px!important;padding:5px 6px!important;min-height:30px!important} #menuScreen.ocean-menu-v2 .abyss-ocean-utilities>.abyss-side-utility strong{font-size:8px!important} #menuScreen.ocean-menu-v2 #playBtn.abyss-destination,#menuScreen.ocean-menu-v2 #onlineBtn.abyss-destination{width:clamp(91px,27vw,135px)!important;height:75px!important} #menuScreen.ocean-menu-v2 #riftPortalBtn.abyss-destination{width:clamp(134px,43vw,190px)!important;height:65px!important} } @media(prefers-reduced-motion:reduce){ #menuScreen.ocean-menu-v2 #playBtn,#menuScreen.ocean-menu-v2 #onlineBtn,#menuScreen.ocean-menu-v2 #riftPortalBtn{animation:none!important} } /* Shared wood/tentacle visual without changing shop/card interactions. */ #menuScreen.ocean-menu-v2 #shopBtn:after{ content:"";display:block!important;position:absolute!important; inset:-9px!important;border-radius:10px!important; background:url('abyssal-wood-tentacles.svg') center / 100% 100% no-repeat!important; pointer-events:none!important;opacity:.85!important;z-index:0!important; } #menuScreen.ocean-menu-v2 #shopBtn>*{position:relative!important;z-index:1!important} #shopScreen .shop-modal:after{ content:"";position:absolute;inset:0;pointer-events:none; background:url('abyssal-wood-tentacles.svg') top left / 310px 145px no-repeat, url('abyssal-wood-tentacles.svg') bottom right / 310px 145px no-repeat; opacity:.22;z-index:0; } #shopScreen .shop-modal>*{position:relative;z-index:1} /* SUBMARINE DEPARTURE V4. Keep the existing abyssal water background. */ #menuScreen.ocean-menu-v2.submarine-menu{ grid-template-rows:minmax(66px,auto) minmax(0,1fr) auto minmax(26px,auto)!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading{ min-height:70px!important;padding:9px 10px 6px!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading h1{ font-size:clamp(22px,3vw,37px)!important;margin:2px 0!important; letter-spacing:.18em!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading p{ font-size:clamp(8px,1.1vw,11px)!important;line-height:1.25!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage{ position:relative!important;overflow:hidden!important;min-height:205px!important; isolation:isolate!important;touch-action:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage:before{display:none!important} #menuScreen.ocean-menu-v2.submarine-menu #menuOceanPortalLayer{ display:block!important;position:absolute!important;inset:0!important; transform:none!important;pointer-events:none!important;overflow:hidden!important; z-index:3!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanScenery{ position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-seabed{ position:absolute!important;top:0!important;left:0!important;z-index:1!important; pointer-events:none!important;max-width:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanSubmarine{ position:absolute!important;top:0!important;left:0!important;z-index:2!important; display:block!important;max-width:none!important;pointer-events:none!important; filter:drop-shadow(0 10px 14px rgba(0,0,0,.25)); } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-routes{ position:absolute!important;inset:0!important;z-index:4!important; pointer-events:none!important;max-width:none!important; opacity:1!important;transform:none!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-bubbles{ position:absolute!important;inset:0!important;z-index:6!important; pointer-events:none!important;max-width:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanDiver{ position:absolute!important;z-index:7!important; width:180px!important;height:130px!important; top:var(--diver-y,15%)!important;left:var(--diver-x,50%)!important; transform:translate(-50%,-50%) scale(var(--abyss-exit-scale,1))!important; transform-origin:center!important;will-change:transform,opacity!important; pointer-events:none!important;filter:drop-shadow(0 0 6px rgba(75,162,195,.26))!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanDiverCanvas{ display:block!important;width:180px!important;height:130px!important; max-width:none!important;pointer-events:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanSpecimen, #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-center-mark{ display:none!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination.abyss-current-entry{ position:absolute!important;z-index:5!important; left:var(--portal-x)!important;top:var(--portal-y)!important; transform:translate(-50%,-50%)!important; width:clamp(125px,15vw,176px)!important;height:clamp(85px,11vh,116px)!important; min-height:0!important;max-height:none!important;max-width:none!important; border-radius:52% 48% 56% 44% / 47% 53% 43% 57%!important; border:2px solid var(--portal-color,#80daff)!important; background: radial-gradient(ellipse at 50% 52%,rgba(1,13,29,.91) 0%,rgba(6,46,75,.88) 57%,rgba(7,74,94,.33) 77%,rgba(0,9,22,.88) 99%)!important; box-shadow:0 0 30px color-mix(in srgb,var(--portal-color,#89e8ff) 20%,transparent), inset 0 0 32px rgba(37,134,163,.30)!important; pointer-events:auto!important;cursor:pointer!important; padding:8px!important;gap:3px!important; animation:abyss-current-breathe 3.8s ease-in-out infinite!important; } #menuScreen.ocean-menu-v2.submarine-menu #onlineBtn.abyss-current-entry{ --portal-color:#65e1dc!important; } #menuScreen.ocean-menu-v2.submarine-menu #playBtn.abyss-current-entry{ --portal-color:#84d9ff!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination.abyss-current-entry:before{ content:""!important;display:block!important;position:absolute!important; inset:-13px!important;border-radius:48% 52% 53% 47%!important; border:2px dashed color-mix(in srgb,var(--portal-color) 60%,transparent)!important; background:conic-gradient(from 15deg,transparent 0 70deg, color-mix(in srgb,var(--portal-color) 22%,transparent) 73deg 110deg, transparent 112deg 235deg,color-mix(in srgb,var(--portal-color) 24%,transparent) 239deg 267deg,transparent 270deg 360deg)!important; mask:none!important;-webkit-mask:none!important;opacity:.8!important; animation:abyss-current-spin 6s linear infinite!important;pointer-events:none!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination.abyss-current-entry:after{ content:""!important;display:block!important;position:absolute!important; inset:-25px!important;border:1px solid color-mix(in srgb,var(--portal-color) 25%,transparent)!important; border-radius:55% 45% 60% 40%!important;opacity:.50!important; animation:abyss-current-spin 12s linear infinite reverse!important;pointer-events:none!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination.abyss-current-entry strong{ font:800 clamp(10px,1.15vw,15px) Cinzel,Georgia,serif!important;letter-spacing:.04em!important; text-shadow:0 1px 6px #000!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination.abyss-current-entry small{ font-size:clamp(7px,.82vw,9px)!important;color:#b9e7ed!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination.abyss-current-entry .abyss-destination-icon{ font-size:clamp(18px,2vw,26px)!important; } #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry{ --portal-color:#a73346!important;left:var(--portal-x)!important;top:var(--portal-y)!important; transform:translate(-50%,-50%)!important; width:clamp(135px,17vw,207px)!important;height:clamp(66px,8.7vh,99px)!important; max-width:none!important;max-height:none!important; border:2px solid rgba(177,48,60,.75)!important; border-radius:50% 42% 55% 38% / 40% 58% 37% 52%!important; background: linear-gradient(143deg,transparent 0 34%,rgba(120,18,35,.28) 34.4% 36.3%,transparent 36.7% 70%,rgba(151,29,40,.34) 70.4% 72%,transparent 72.4%), radial-gradient(ellipse at 48% 54%,#000007 0%,#07030b 57%,rgba(42,8,17,.84) 87%,#05070d 100%)!important; box-shadow:inset 0 0 21px rgba(90,14,24,.49),0 0 14px rgba(135,21,40,.24)!important; padding:9px 13px!important;gap:2px!important;pointer-events:auto!important; clip-path:polygon(0 28%,11% 11%,22% 19%,36% 4%,54% 18%,72% 0,87% 20%,100% 18%,96% 80%,82% 91%,66% 81%,48% 100%,27% 87%,10% 97%)!important; animation:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry:before{ content:""!important;display:block!important;position:absolute!important;inset:8px!important; border:1px dashed rgba(191,52,69,.62)!important;border-radius:55% 43% 50% 42%!important; background:none!important;mask:none!important;-webkit-mask:none!important; filter:none!important;opacity:.8!important;animation:none!important;pointer-events:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry:after{display:none!important;content:none!important} #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry strong{ color:#f3d5d7!important;font:800 clamp(10px,1vw,15px) Cinzel,serif!important; letter-spacing:.08em!important;text-shadow:0 2px 9px #000!important; } #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry small{ color:#ae8790!important;font-size:clamp(7px,.8vw,9px)!important; } #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry .abyss-destination-icon{ color:#b52b3d!important;font-size:clamp(16px,2vw,23px)!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-current-entry:hover, #menuScreen.ocean-menu-v2.submarine-menu .abyss-current-entry:focus-visible, #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn:hover{ filter:brightness(1.2)!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities{ display:grid!important;position:relative!important;z-index:9!important; grid-template-columns:repeat(9,minmax(0,1fr))!important;gap:6px!important; padding:8px 10px!important;align-items:stretch!important; background:rgba(1,11,23,.94)!important;border-top:1px solid rgba(99,177,201,.24)!important; width:100%!important;min-height:0!important;max-height:none!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility{ display:flex!important;flex-direction:column!important;align-items:center!important; justify-content:center!important;gap:1px!important; width:100%!important;min-width:0!important;max-width:none!important;min-height:39px!important;height:auto!important; padding:6px 4px!important;border-radius:7px!important; font:800 9px Inter,sans-serif!important;letter-spacing:.035em!important; line-height:1.2!important;text-align:center!important; white-space:normal!important;overflow:hidden!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility .abyss-destination-icon{ display:block!important;color:inherit!important;font-size:16px!important; line-height:1!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility strong{ font:800 clamp(8px,.78vw,11px) Inter,sans-serif!important;letter-spacing:.035em!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility small{ display:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #resonanceBtn{ color:#e6ccff!important;border:1px solid #9e72ce!important; background:linear-gradient(135deg,rgba(88,39,128,.26),rgba(23,8,52,.83))!important; box-shadow:inset 0 0 16px rgba(135,83,230,.12)!important; } #menuScreen.ocean-menu-v2.submarine-menu #wheelBtn{ color:#ffe49c!important;border:1px solid #e7be55!important; background:linear-gradient(135deg,rgba(179,132,33,.18),rgba(41,29,5,.89))!important; box-shadow:inset 0 0 13px rgba(215,172,60,.17)!important; } #menuScreen.ocean-menu-v2.submarine-menu #profileBtn{ color:#f0f1f2!important;border:1px solid #555b62!important; background:linear-gradient(130deg,#060609,#1c1e22 48%,#030407)!important; box-shadow:inset 0 0 14px rgba(117,128,137,.12)!important; } #menuScreen.ocean-menu-v2.submarine-menu #shopBtn{ color:#f3d7aa!important;position:relative!important;isolation:isolate!important;overflow:hidden!important; border:1px solid #a1764c!important; background: repeating-linear-gradient(109deg,transparent 0 18px,rgba(0,0,0,.28) 19px 20px,transparent 21px 34px), linear-gradient(142deg,transparent 0 36%,#170b07 36.5%,transparent 37.5% 72%,#140a06 72.5%,transparent 73.5%), linear-gradient(100deg,rgba(42,22,11,.91),rgba(109,67,36,.90),rgba(36,17,8,.95))!important; box-shadow:inset 0 -7px 14px rgba(14,5,2,.52)!important; } #menuScreen.ocean-menu-v2.submarine-menu #shopBtn:before, #menuScreen.ocean-menu-v2.submarine-menu #shopBtn:after{ content:""!important;display:block!important;position:absolute!important;pointer-events:none!important; width:43px!important;height:48px!important; border:solid rgba(151,97,211,.73)!important;border-width:4px 0 0 4px!important; border-radius:73% 18% 65% 30%!important;background:none!important; filter:drop-shadow(0 1px 3px rgba(4,1,8,.76))!important;opacity:.72!important; } #menuScreen.ocean-menu-v2.submarine-menu #shopBtn:before{left:-14px!important;top:-15px!important;transform:rotate(35deg)!important} #menuScreen.ocean-menu-v2.submarine-menu #shopBtn:after{right:-14px!important;bottom:-16px!important;transform:rotate(216deg)!important} #menuScreen.ocean-menu-v2.submarine-menu #shopBtn>*{position:relative!important;z-index:1!important} @keyframes abyss-current-breathe{ 0%,100%{filter:brightness(.91) saturate(.96)} 50%{filter:brightness(1.14) saturate(1.15)} } @keyframes abyss-current-spin{to{transform:rotate(360deg)}} @media(max-width:1120px){ #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities{ grid-template-columns:repeat(5,minmax(0,1fr))!important; } } @media(max-width:700px){ #menuScreen.ocean-menu-v2.submarine-menu{ grid-template-rows:minmax(56px,auto) minmax(0,1fr) auto auto!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading{min-height:56px!important;padding:4px 8px!important} #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading h1{font-size:clamp(20px,6vw,27px)!important} #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading p{font-size:9px!important} #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities{ grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:6px!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility{ min-height:32px!important;padding:4px 2px!important;border-radius:5px!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility strong{ font-size:clamp(7px,2vw,9px)!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility .abyss-destination-icon{font-size:13px!important} #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination.abyss-current-entry{ width:clamp(86px,27vw,116px)!important;height:clamp(74px,11vh,100px)!important; } #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry{ width:clamp(101px,31vw,145px)!important;height:clamp(58px,9.5vh,81px)!important; padding:7px 5px!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-current-entry strong{font-size:9px!important} #menuScreen.ocean-menu-v2.submarine-menu #riftPortalBtn.abyss-fissure-entry strong{font-size:9px!important} #menuScreen.ocean-menu-v2.submarine-menu .abyss-destination small{display:none!important} #menuScreen.ocean-menu-v2.submarine-menu #menuOceanDiver{ transform:translate(-50%,-50%) scale(calc(var(--abyss-exit-scale,1) * .82))!important; } #menuScreen.ocean-menu-v2.submarine-menu>.abyss-ocean-legal.menu-footer{ z-index:10!important;padding-bottom:max(5px,env(safe-area-inset-bottom))!important; } } @media(max-height:650px) and (min-width:701px){ #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility{min-height:31px!important;padding:3px!important} #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading{min-height:52px!important} } /* Aged, cracked wood throughout the specimen store, with violet tentacles. Code redemption is intentionally untouched. */ #shopScreen .shop-modal{ background: repeating-linear-gradient(99deg,transparent 0 56px,rgba(4,1,0,.16) 57px 59px,transparent 60px 115px), linear-gradient(146deg,transparent 0 31%,rgba(20,7,7,.6) 31.5%,transparent 32.5% 72%,rgba(12,4,3,.59) 72.5%,transparent 73.2%), radial-gradient(ellipse at 30% 0%,rgba(119,69,39,.33),transparent 65%), linear-gradient(126deg,#1b120f,#382219 47%,#120e0f)!important; border:2px solid rgba(145,101,60,.71)!important; box-shadow:inset 0 0 42px rgba(0,0,0,.62),0 24px 60px rgba(0,0,0,.53)!important; } #shopScreen .shop-heading,#shopScreen .shop-filter-bar{ border-color:rgba(150,108,70,.32)!important; } #shopScreen #skinGrid .skin-card{ position:relative!important;isolation:isolate!important;overflow:hidden!important; border:1px solid rgba(146,102,72,.66)!important; background: repeating-linear-gradient(111deg,transparent 0 26px,rgba(4,2,1,.23) 27px 28px,transparent 29px 49px), linear-gradient(138deg,transparent 0 35%,rgba(9,3,2,.7) 35.5%,transparent 36.5% 64%,rgba(6,2,1,.5) 64.5%,transparent 65%), linear-gradient(125deg,#1c100e,#593822 42%,#231510 100%)!important; box-shadow:inset 0 0 23px rgba(2,1,0,.42)!important; } #shopScreen #skinGrid .skin-card:before, #shopScreen #skinGrid .skin-card:after{ content:"";position:absolute;z-index:0;pointer-events:none; width:83px;height:94px;border:solid rgba(147,92,203,.62); border-width:7px 0 0 7px;border-radius:85% 26% 75% 20%; box-shadow:-1px -2px 0 rgba(46,17,66,.42),inset 2px 2px rgba(205,154,250,.13); } #shopScreen #skinGrid .skin-card:before{left:-39px;top:-29px;transform:rotate(19deg)} #shopScreen #skinGrid .skin-card:after{right:-41px;bottom:-37px;transform:rotate(196deg)} #shopScreen #skinGrid .skin-card>*{position:relative;z-index:1} #shopScreen #skinGrid .skin-card>strong{color:#f5e1be!important;text-shadow:0 2px 5px #180904} #shopScreen #skinGrid .skin-card p,#shopScreen #skinGrid .skin-card .skin-ability{color:#e1cdb8!important} #shopScreen #skinGrid .skin-card.owned{border-color:#af8961!important} #shopScreen #openRedeemCodeBtn{position:relative;z-index:2} /* Compact landscape phones retain the bottom shortcuts and legal links without squeezing the playfield beneath its minimum usable height. */ @media(max-height:490px) and (max-width:900px){ #menuScreen.ocean-menu-v2.submarine-menu{ grid-template-rows:minmax(42px,auto) minmax(145px,1fr) auto auto!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading{ min-height:42px!important;padding:2px 8px!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-menu-heading p{display:none!important} #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage{ min-height:145px!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities{ grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:3px!important;padding:3px 5px!important; } #menuScreen.ocean-menu-v2.submarine-menu .abyss-ocean-utilities>.abyss-ocean-utility{ min-height:24px!important;padding:3px 2px!important; } #menuScreen.ocean-menu-v2.submarine-menu>.abyss-ocean-legal.menu-footer{ min-height:23px!important;padding-top:1px!important;padding-bottom:2px!important; } } /* Mobile-only scene framing; no browser zoom or scaled hit-testing. */ #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-mobile-zoom #menuOceanDiver{ transform:translate(-50%,-50%) scale(calc(var(--abyss-exit-scale,1)*.8))!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-mobile-zoom .abyss-destination.abyss-current-entry{ width:clamp(88px,16vw,132px)!important;height:clamp(48px,14dvh,78px)!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-mobile-zoom #riftPortalBtn.abyss-fissure-entry{ width:clamp(96px,18vw,142px)!important;height:clamp(44px,12dvh,66px)!important; } /* CABIN ENTRY: make the submarine hatch unmistakably interactive. */ #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn.abyss-laboratory-hatch{ position:absolute!important; z-index:8!important; left:var(--portal-x,50%)!important; top:calc(var(--portal-y,var(--abyss-hatch-y,140px)) - 9px)!important; transform:translate(-50%,-50%)!important; width:clamp(148px,18vw,218px)!important; min-width:148px!important; height:auto!important; min-height:70px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; padding:9px 22px 10px!important; pointer-events:auto!important; cursor:pointer!important; border:1px solid rgba(255,216,133,.72)!important; border-radius:999px!important; background: radial-gradient(ellipse at 50% 35%,rgba(255,222,143,.22),transparent 48%), linear-gradient(180deg,rgba(26,30,31,.82),rgba(5,12,17,.94))!important; color:#fff8e7!important; box-shadow: 0 0 0 5px rgba(216,174,91,.08), 0 0 22px rgba(239,199,119,.30), inset 0 0 18px rgba(241,204,133,.10)!important; text-align:center!important; opacity:.96!important; transition:opacity .2s ease,filter .2s ease,box-shadow .2s ease,transform .2s ease!important; } #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn.abyss-laboratory-hatch:before{ content:""!important; position:absolute!important; left:50%!important; top:100%!important; width:2px!important; height:22px!important; transform:translateX(-50%)!important; background:linear-gradient(#efc77e,transparent)!important; box-shadow:0 0 10px #efc77e!important; pointer-events:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn.abyss-laboratory-hatch:after{ content:"⌃"!important; position:absolute!important; left:50%!important; top:calc(100% + 10px)!important; transform:translateX(-50%)!important; color:#ffe5a5!important; font:900 18px/1 system-ui,sans-serif!important; text-shadow:0 0 10px #efc77e,0 0 20px rgba(239,199,126,.75)!important; pointer-events:none!important; animation:abyss-cabin-arrow 1.35s ease-in-out infinite!important; } #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn .abyss-hatch-kicker{ display:block!important; color:#bcae91!important; font:800 clamp(7px,.65vw,9px)/1 'DM Mono',monospace!important; letter-spacing:.18em!important; } #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn .abyss-hatch-label{ display:block!important; color:#fff8e8!important; font:900 clamp(15px,1.5vw,22px)/1.05 Cinzel,Georgia,serif!important; letter-spacing:.15em!important; text-shadow:0 0 8px rgba(255,226,168,.72),0 0 18px rgba(235,184,86,.42)!important; } #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn .abyss-hatch-action{ display:block!important; margin-top:2px!important; color:#ffd46f!important; font:900 clamp(8px,.72vw,10px)/1 'DM Mono',monospace!important; letter-spacing:.16em!important; } #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn:hover, #menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn:focus-visible, #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-cabin-ready #submarineWorkshopBtn{ filter:brightness(1.18)!important; box-shadow: 0 0 0 7px rgba(216,174,91,.10), 0 0 34px rgba(255,210,116,.48), inset 0 0 22px rgba(241,204,133,.16)!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-menu-arrival #submarineWorkshopBtn{ opacity:.42!important; filter:saturate(.72)!important; pointer-events:none!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-cabin-ready #submarineWorkshopBtn{ animation:abyss-cabin-pulse 2.25s ease-in-out infinite!important; } @keyframes abyss-cabin-pulse{ 0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 5px rgba(216,174,91,.08),0 0 22px rgba(239,199,119,.30),inset 0 0 18px rgba(241,204,133,.10)} 50%{transform:translate(-50%,-50%) scale(1.035);box-shadow:0 0 0 8px rgba(216,174,91,.11),0 0 39px rgba(255,210,116,.50),inset 0 0 24px rgba(241,204,133,.17)} } @keyframes abyss-cabin-arrow{ 0%,100%{transform:translate(-50%,0);opacity:.58} 50%{transform:translate(-50%,-5px);opacity:1} } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-mobile-zoom #submarineWorkshopBtn.abyss-laboratory-hatch{ min-width:44px!important;min-height:44px!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-mobile-zoom #submarineWorkshopBtn.abyss-laboratory-hatch{ width:clamp(126px,42vw,176px)!important; min-width:126px!important; min-height:62px!important; padding:7px 15px 8px!important; top:calc(var(--portal-y,var(--abyss-hatch-y,140px)) - 5px)!important; } #menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage.abyss-mobile-zoom #submarineWorkshopBtn .abyss-hatch-label{ font-size:clamp(14px,5vw,19px)!important; }