.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 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-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-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-back{ position:absolute; left:25px; bottom:16px; color:#a9dbea; }
.aqua-life-play{ 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; align-items:center; gap:18px; }.aqua-life-play header button{ padding:10px; }.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-touch-controls{ display:none; justify-content:center; gap:14px; padding:14px 0 max(4px,env(safe-area-inset-bottom)); }.aqua-life-touch-controls button{ min-width:76px; min-height:48px; padding:8px 18px; user-select:none; -webkit-user-select:none; }
.aqua-life-races,.aqua-life-result{ max-width:920px; margin:auto; padding:70px 20px; text-align:center; }.aqua-life-races header p{ color:#6eeaff; text-transform:uppercase; letter-spacing:.14em; }.aqua-life-races h1,.aqua-life-result h1{ font-family:"Cinzel Decorative",serif; font-size:clamp(2.2rem,6vw,4rem); }.aqua-life-races>div{ display:grid; gap:16px; margin:35px 0; }.aqua-life-races>div button{ display:grid; gap:6px; padding:22px; text-align:left; }.aqua-life-races button strong{ font-size:1.25rem; }.aqua-life-races button small{ color:#bceafb; }.aqua-life-races>button,.aqua-life-result button{ padding:12px 24px; }
.aqua-life-result{ display:grid; place-content:center; }.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; }
@media(max-width:760px),(pointer:coarse){ .aqua-life-touch-controls{ display:flex; } }
@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-play{ padding-top:12px; }.aqua-life-play header{ grid-template-columns:78px 1fr auto; gap:8px; }.aqua-life-play header h1{ font-size:1.1rem; }.aqua-life-play canvas{ height:54vh; min-height:310px; }.aqua-life-back{ position:static; display:block; width:max-content; margin:24px auto 0; } }
@media(prefers-reduced-motion:reduce){ .aqua-life-cloud{ display:none; }.aqua-life-actions button{ transition:none; } }