.aqua-life-page{ min-height:100vh; padding-top:76px; color:#f7fdff; background:linear-gradient(180deg,#062640,#03131f); }
.aqua-life-view{ min-height:calc(100vh - 76px); }
.aqua-life-view[hidden]{ display:none !important; }
.aqua-life-hub{ position:relative; display:grid; grid-template-columns:minmax(300px,1.1fr) minmax(280px,.9fr); grid-template-rows:auto 1fr auto; gap:18px 34px; max-width:1180px; margin:auto; padding:35px clamp(18px,4vw,54px) 50px; }
.aqua-life-logo{ grid-column:1/-1; text-align:center; }
.aqua-life-logo,.aqua-life-races>header,.aqua-life-training-picker>header{ position:relative; }
.aqua-life-logo p{ margin:0; color:#6eeaff; font-size:.75rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.aqua-life-logo h1{ margin:2px 0; font-family:"Cinzel Decorative",serif; font-size:clamp(2.4rem,6vw,4.8rem); color:#fff; text-shadow:0 4px 0 #197cb9,0 10px 26px rgba(0,0,0,.55); }
.aqua-life-logo span{ color:#bdefff; letter-spacing:.1em; }
.aqua-life-stage{ position:relative; min-height:420px; overflow:hidden; border:2px solid rgba(255,255,255,.28); border-radius:34px; background:linear-gradient(#72dcff 0 67%,#dff8ff 67%); box-shadow:inset 0 0 55px rgba(255,255,255,.24),0 25px 55px rgba(0,0,0,.3); }
.aqua-life-ground{ position:absolute; inset:67% 0 0; background:#60b946 url("/assets/images/characters/hills.png") repeat; background-size:280px auto; box-shadow:inset 0 8px rgba(255,255,255,.18); }
.aqua-life-cloud{ position:absolute; width:130px; height:35px; border-radius:50px; background:rgba(255,255,255,.65); box-shadow:35px -17px 0 5px rgba(255,255,255,.65),75px 0 0 rgba(255,255,255,.65); }
.aqua-life-cloud--one{ top:70px; left:10%; }.aqua-life-cloud--two{ top:125px; right:18%; transform:scale(.7); }
.aqua-life-sprite{ position:absolute; z-index:2; background-repeat:no-repeat; }
.aqua-life-sprite--idle{ width:250px; height:250px; left:50%; bottom:18%; transform:translateX(-50%); }
.aqua-life-hud{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-self:start; }
.aqua-life-hud>div{ padding:15px 17px; border:1px solid rgba(127,225,255,.24); border-radius:16px; background:rgba(4,26,43,.82); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.aqua-life-hud span{ display:block; color:#9deeff; font-size:.76rem; font-weight:800; text-transform:uppercase; }
.aqua-life-hud strong{ display:block; margin-top:4px; font-size:1.25rem; }.aqua-life-hud strong b{ font:inherit; }
.aqua-life-energy{ grid-column:1/-1; }.aqua-life-energy i{ display:block; height:7px; margin-top:9px; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.13); }.aqua-life-energy i b{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffd45e,#fff18c); transition:width .25s; }
.aqua-life-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.aqua-life-actions button,.aqua-life-races button,.aqua-life-training-picker button,.aqua-life-result button,.aqua-life-play button{ border:1px solid rgba(133,233,255,.42); border-radius:16px; background:linear-gradient(145deg,#167fbd,#0a4e88); color:#fff; box-shadow:0 8px 0 #052d53,0 13px 22px rgba(0,0,0,.25); font:inherit; font-weight:800; cursor:pointer; }
.aqua-life-page .aqua-life-music-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:132px; min-height:44px; padding:9px 14px; border:1px solid rgba(133,233,255,.42); border-radius:999px; background:rgba(4,38,64,.88); color:#d8f7ff; box-shadow:0 5px 0 #052d53,0 9px 18px rgba(0,0,0,.24); font:inherit; font-size:.78rem; font-weight:900; cursor:pointer; }
.aqua-life-page .aqua-life-music-toggle:hover,.aqua-life-page .aqua-life-music-toggle:focus-visible{ filter:brightness(1.15); transform:translateY(-1px); }.aqua-life-page .aqua-life-music-toggle:focus-visible{ outline:2px solid #fff18c; outline-offset:3px; }
.aqua-life-logo>.aqua-life-music-toggle,.aqua-life-races>header>.aqua-life-music-toggle,.aqua-life-training-picker>header>.aqua-life-music-toggle{ position:absolute; top:0; right:0; }
.aqua-life-actions button{ min-height:92px; padding:12px; }.aqua-life-actions button>span{ display:block; font-size:1.6rem; }.aqua-life-actions small{ display:block; margin-top:4px; color:#bfefff; font-size:.68rem; }
.aqua-life-actions button:hover,.aqua-life-actions button:focus-visible{ filter:brightness(1.14); transform:translateY(-2px); }.aqua-life-actions button:disabled{ opacity:.6; cursor:wait; }
.aqua-life-status{ min-height:22px; margin:14px 0 0; color:#a9eaff; text-align:center; }.aqua-life-status.is-error{ color:#ffb4b4; }
.aqua-life-context{ grid-column:1/-1; max-width:760px; margin:0 auto; padding:14px 18px; border:1px solid rgba(127,225,255,.2); border-radius:16px; background:rgba(4,26,43,.68); text-align:center; }
.aqua-life-context h2{ margin:0; font-size:1rem; color:#fff; }
.aqua-life-context p{ margin:6px 0; color:#bdefff; font-size:.82rem; line-height:1.45; }
.aqua-life-context nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.aqua-life-context a{ color:#8eeaff; font-size:.78rem; }
.aqua-life-play{ position:relative; display:flex; flex-direction:column; max-width:1280px; margin:auto; padding:20px clamp(12px,3vw,40px) 35px; touch-action:none; }
.aqua-life-play header{ display:grid; grid-template-columns:110px 1fr auto auto; align-items:center; gap:18px; }.aqua-life-play header button{ padding:10px; }.aqua-life-play header .aqua-life-music-toggle{ padding:9px 14px; }.aqua-life-play header p,.aqua-life-play header h1{ margin:0; }.aqua-life-play header p{ color:#65e2ff; font-size:.7rem; text-transform:uppercase; }.aqua-life-play header h1{ font-family:"Cinzel Decorative",serif; }.aqua-life-play>p{ margin:8px 0; color:#acddeb; text-align:center; font-size:.84rem; }
.aqua-life-play-stats{ text-align:right; }.aqua-life-play-stats strong,.aqua-life-play-stats span{ display:block; }.aqua-life-play-stats strong{ color:#ffe071; font-size:1.5rem; }
.aqua-life-play canvas{ display:block; width:100%; height:min(64vh,620px); min-height:330px; border:2px solid rgba(132,231,255,.42); border-radius:22px; background:#49cfea; box-shadow:0 20px 45px rgba(0,0,0,.35); }
.aqua-life-countdown{ position:absolute; z-index:4; left:50%; top:55%; color:#fff6a8; font:900 clamp(6rem,18vw,13rem)/1 "Cinzel Decorative",serif; text-shadow:0 7px 0 #1577af,0 14px 30px rgba(0,0,0,.6); pointer-events:none; transform:translate(-50%,-50%); }
.aqua-life-countdown.is-active{ animation:aqua-life-countdown-pop .75s ease-out both; }
@keyframes aqua-life-countdown-pop{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.55); } 22%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); } 70%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(.92); } }
.aqua-life-touch-controls{ display:none; justify-content:center; gap:14px; padding:14px 0 max(4px,env(safe-area-inset-bottom)); touch-action:none; }.aqua-life-touch-controls[hidden]{ display:none !important; }.aqua-life-touch-controls button{ min-width:76px; min-height:48px; padding:8px 18px; user-select:none; -webkit-user-select:none; touch-action:none; }.aqua-life-touch-controls .aqua-life-push{ min-width:min(320px,80vw); min-height:64px; font-size:1.2rem; }.aqua-life-dpad{ grid-template-columns:repeat(3,64px); grid-template-rows:repeat(2,52px); }.aqua-life-dpad button{ min-width:64px; padding:6px; }.aqua-life-dpad button:nth-child(1){ grid-column:2; }.aqua-life-dpad button:nth-child(2){ grid-column:1; grid-row:2; }.aqua-life-dpad button:nth-child(3){ grid-column:3; grid-row:2; }.aqua-life-dpad button:nth-child(4){ grid-column:2; grid-row:2; }
.aqua-life-races,.aqua-life-training-picker,.aqua-life-result{ max-width:920px; margin:auto; padding:70px 20px; text-align:center; }.aqua-life-races header p,.aqua-life-training-picker header p{ color:#6eeaff; text-transform:uppercase; letter-spacing:.14em; }.aqua-life-races h1,.aqua-life-training-picker h1,.aqua-life-result h1{ font-family:"Cinzel Decorative",serif; font-size:clamp(2.2rem,6vw,4rem); }.aqua-life-races>div,.aqua-life-training-picker>div{ display:grid; gap:16px; margin:35px 0; }.aqua-life-races>div button,.aqua-life-training-picker>div button{ display:grid; gap:6px; padding:22px; text-align:left; }.aqua-life-races button strong,.aqua-life-training-picker button strong{ font-size:1.25rem; }.aqua-life-races button small,.aqua-life-training-picker button small{ color:#bceafb; }.aqua-life-training-picker button em{ color:#fff1a8; font-size:.72rem; font-style:normal; }.aqua-life-races>button,.aqua-life-training-picker>button,.aqua-life-result button{ padding:12px 24px; }
.aqua-life-training-picker button[hidden]{ display:none !important; }
.aqua-life-horizontal-controls button{ min-width:min(180px,42vw); min-height:62px; font-size:1rem; transition:filter .1s,transform .1s,box-shadow .1s; }
.aqua-life-horizontal-controls button.is-expected{ filter:brightness(1.35); transform:translateY(-3px) scale(1.035); box-shadow:0 8px 0 #052d53,0 0 25px rgba(255,238,112,.8); }
.aqua-life-result{ position:relative; display:grid; place-content:center; }.aqua-life-result>.aqua-life-music-toggle{ position:absolute; top:24px; right:24px; }.aqua-life-result>span{ color:#ffe276; font-size:4rem; }.aqua-life-result p{ color:#bceafa; font-size:1.1rem; }.aqua-life-result>div{ display:flex; justify-content:center; gap:14px; margin-top:22px; }
.aqua-life-level-result,.aqua-life-money-result{ width:min(560px,88vw); margin:18px auto 0; padding:24px; border:1px solid rgba(128,231,255,.35); border-radius:22px; background:linear-gradient(155deg,rgba(13,72,116,.92),rgba(4,29,51,.96)); box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.12); }
.aqua-life-level-result[hidden],.aqua-life-money-result[hidden]{ display:none; }
.aqua-life-level-result>p{ margin:0; color:#fff39a; font:900 clamp(1.5rem,5vw,2.4rem)/1 "Cinzel Decorative",serif; letter-spacing:.08em; text-shadow:0 0 22px rgba(255,226,92,.48); animation:aqua-life-reward-pop .55s cubic-bezier(.2,1.35,.35,1) both; }
.aqua-life-level-result>strong,.aqua-life-money-result>strong{ display:block; margin:10px 0 5px; color:#fff; font-size:clamp(2rem,7vw,3.5rem); line-height:1; text-shadow:0 0 24px rgba(98,227,255,.45); }
.aqua-life-level-result>span,.aqua-life-money-result>span,.aqua-life-money-result>b{ display:block; color:#bceafa; }
.aqua-life-level-progress{ margin-top:20px; text-align:left; }.aqua-life-level-progress>b{ display:block; margin-bottom:7px; color:#fff; font-size:.86rem; }.aqua-life-level-progress>i{ display:block; height:18px; overflow:hidden; border:1px solid rgba(255,255,255,.32); border-radius:999px; background:rgba(1,17,31,.72); box-shadow:inset 0 2px 8px rgba(0,0,0,.35); }.aqua-life-level-progress>i>span{ display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#36c8ff,#8af4ff 72%,#fff49a); box-shadow:0 0 18px rgba(92,229,255,.72); }
.aqua-life-level-result.is-level-pop .aqua-life-level-progress>b{ animation:aqua-life-level-number-pop .2s ease-out; }
.aqua-life-money-result>strong{ color:#ffe276; animation:aqua-life-reward-pop .55s cubic-bezier(.2,1.35,.35,1) both; }.aqua-life-money-result>span{ margin-top:14px; color:#79dff7; font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.aqua-life-money-result>b{ margin-top:4px; color:#fff; font-size:1.2rem; }
@keyframes aqua-life-reward-pop{ 0%{ opacity:0; transform:scale(.72); filter:brightness(1.8); } 70%{ opacity:1; transform:scale(1.08); } 100%{ opacity:1; transform:scale(1); filter:brightness(1); } }
@keyframes aqua-life-level-number-pop{ 50%{ color:#fff49a; transform:scale(1.12); text-shadow:0 0 18px rgba(255,240,119,.8); } }
@media(max-width:760px),(pointer:coarse){ .aqua-life-touch-controls{ display:flex; }.aqua-life-touch-controls.aqua-life-dpad{ display:grid; } }
@media(max-width:760px){ .aqua-life-hub{ display:block; padding-top:22px; }.aqua-life-stage{ min-height:330px; margin:20px 0; }.aqua-life-sprite--idle{ width:205px; height:205px; }.aqua-life-page .aqua-life-music-toggle{ min-width:44px; width:44px; padding:9px; }.aqua-life-music-toggle [data-aqua-music-label]{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }.aqua-life-logo>.aqua-life-music-toggle,.aqua-life-races>header>.aqua-life-music-toggle,.aqua-life-training-picker>header>.aqua-life-music-toggle{ top:0; right:0; }.aqua-life-races>header,.aqua-life-training-picker>header{ padding-inline:52px; }.aqua-life-play{ padding-top:12px; }.aqua-life-play header{ grid-template-columns:66px 1fr auto 44px; gap:7px; }.aqua-life-play header h1{ font-size:1.1rem; }.aqua-life-play header .aqua-life-music-toggle{ padding:9px; }.aqua-life-play canvas{ height:54vh; min-height:310px; }.aqua-life-result>.aqua-life-music-toggle{ top:14px; right:14px; }.aqua-life-context{ margin-top:24px; } }
@media(prefers-reduced-motion:reduce){ .aqua-life-cloud{ display:none; }.aqua-life-actions button,.aqua-life-level-progress>i>span{ transition:none !important; }.aqua-life-level-result>p,.aqua-life-money-result>strong,.aqua-life-level-result.is-level-pop .aqua-life-level-progress>b{ animation:none; } }