body{margin:0;padding:0;overflow:hidden;background-color:#061320;font-family:Arial,sans-serif;width:100%;height:100%;height:100dvh;position:fixed}#game-container{position:relative;width:100vw;width:100dvw;height:100vh;height:100dvh;min-height:-webkit-fill-available;overflow:hidden;touch-action:none}#gameCanvas{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;touch-action:none}#leaderboard{position:absolute;top:10px;right:10px;background-color:#00000080;color:#fff;padding:10px;border-radius:5px;min-width:200px;z-index:10}#leaderboard h2{margin:0 0 10px;text-align:center;font-size:18px}.player-entry{display:flex;justify-content:space-between;margin:5px 0}.player-name{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#controls-info{position:absolute;bottom:10px;left:10px;background-color:#00000080;color:#fff;padding:10px;border-radius:5px;z-index:10}#controls-info p{margin:5px 0}.game-screen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:800px;height:auto;max-height:90%;background-color:#003264e6;color:#fff;display:flex;flex-direction:column;align-items:center;padding:20px;box-sizing:border-box;border-radius:10px;overflow-y:auto}#start-screen h1{font-size:48px;margin-bottom:20px;text-shadow:3px 3px 0px rgba(0,0,0,.3);color:#f0f0f0}#start-screen h2{font-size:24px;margin-bottom:10px;color:#add8e6}.selection-container,.instructions-container{width:100%;max-width:800px;margin-bottom:20px}.selection-container h2,.instructions-container h2{text-align:center}.creature-options{display:flex;justify-content:center;gap:15px;margin-bottom:15px;flex-wrap:wrap}.creature-option{background-color:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:10px;padding:10px 20px;cursor:pointer;transition:all .3s;text-align:center;min-width:100px}.creature-option:hover{background-color:#ffffff4d}.creature-option.selected{background-color:#64c8ff4d;border-color:#64c8ffcc;box-shadow:0 0 10px #64c8ff80}.creature-instructions{background-color:#0000004d;border-radius:10px;padding:15px;margin-top:10px}.creature-instructions h3{margin-top:8px;margin-bottom:8px;color:#add8e6;font-size:16px}.creature-instructions ul{padding-left:15px}.creature-instructions li{margin-bottom:6px;font-size:14px}#play-button{background-color:#2ecc71;color:#fff;border:none;border-radius:50px;padding:12px 40px;font-size:20px;font-weight:700;cursor:pointer;transition:all .3s;margin-bottom:15px;box-shadow:0 3px 10px #0003}#play-button:hover{background-color:#27ae60;transform:scale(1.03)}.death-score{background-color:#ffffff1a;border-radius:10px;padding:8px 15px;margin:15px 0;text-align:center}.death-score h2{color:#f0f0f0;margin:0;font-size:18px}#stats-screen{max-height:90vh;overflow-y:auto}.stats-section{width:100%;max-width:800px;margin-bottom:20px;background-color:#0000004d;border-radius:10px;padding:15px}.centered-header{text-align:center}.personal-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:15px}.stat-item{background-color:#ffffff1a;padding:10px;border-radius:5px;display:flex;justify-content:space-between;align-items:center}.stat-value{font-weight:700;color:#add8e6}.leaderboard-tabs{display:flex;justify-content:center;gap:10px;margin:15px 0}.leaderboard-tab{padding:8px 15px;background-color:#ffffff1a;border-radius:5px;cursor:pointer;transition:all .3s}.leaderboard-tab:hover{background-color:#fff3}.leaderboard-tab.active{background-color:#64c8ff4d;box-shadow:0 0 5px #64c8ff80}.leaderboard-table{width:100%;border-collapse:collapse;margin-top:10px}.leaderboard-table th,.leaderboard-table td{padding:8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}.leaderboard-table th{color:#add8e6;font-weight:700}.leaderboard-table tr.current-user{background-color:#64c8ff33}.no-leaderboard-data{text-align:center;padding:20px;color:#ffffffb3}#back-button,#stats-button{background-color:#3498db;color:#fff;border:none;border-radius:50px;padding:12px 30px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s;margin-top:10px;box-shadow:0 3px 10px #0003}#back-button:hover,#stats-button:hover{background-color:#2980b9;transform:scale(1.03)}#skins-screen{max-height:90vh;overflow-y:auto}.skin-tabs{display:flex;justify-content:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}.skin-tab{padding:10px 20px;background-color:#ffffff1a;border-radius:5px;cursor:pointer;transition:all .3s}.skin-tab:hover{background-color:#fff3}.skin-tab.active{background-color:#64c8ff4d;box-shadow:0 0 5px #64c8ff80}.skin-display-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;width:100%;margin-bottom:20px}.skin-card{background-color:#0000004d;border-radius:10px;padding:15px;display:flex;flex-direction:column;transition:all .3s;position:relative;overflow:hidden}.skin-card.selected{background-color:#0064004d;box-shadow:0 0 10px #00ff004d}.skin-card.locked{opacity:.7;filter:grayscale(70%)}.skin-card h3{margin-top:0;color:#add8e6;font-size:18px}.skin-card p{flex-grow:1;margin:10px 0;font-size:14px;line-height:1.4}.unlock-requirement{font-style:italic;font-size:13px;color:#fc0;margin-top:5px;margin-bottom:10px}.select-skin-button{background-color:#3498db;color:#fff;border:none;padding:8px 16px;border-radius:5px;cursor:pointer;align-self:flex-end;margin-top:10px}.select-skin-button:hover:not(:disabled){background-color:#2980b9}.select-skin-button:disabled{background-color:#2ecc71;cursor:default}.button-container{display:flex;gap:15px;margin-bottom:20px;justify-content:center;flex-wrap:wrap}#stats-button,#skins-button{background-color:#3498db;color:#fff;border:none;border-radius:50px;padding:12px 30px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 3px 10px #0003}#stats-button:hover,#skins-button:hover{background-color:#2980b9;transform:scale(1.03)}@media(max-width:768px){#start-screen h1{font-size:32px;margin-bottom:15px}#start-screen h2{font-size:18px;margin-bottom:8px}.creature-option{padding:8px 12px;min-width:70px}#play-button{padding:10px 30px;font-size:18px;margin-top:15px}.personal-stats,.skin-display-container{grid-template-columns:1fr}.skin-card{padding:10px}.leaderboard-table th,.leaderboard-table td{padding:5px;font-size:14px}}#mobile-controls{position:fixed;top:0;left:0;width:100%;height:100%;height:100dvh;display:none;z-index:100;pointer-events:none}#mobile-controls>*{pointer-events:auto}#joystick-area{position:absolute;bottom:calc(30px + max(env(safe-area-inset-bottom,0px),16px));left:calc(20px + max(env(safe-area-inset-left,0px),14px));width:120px;height:120px;border-radius:60px;background-color:#ffffff47;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);touch-action:none;box-shadow:0 4px 14px #0000004d;border:2px solid rgba(255,255,255,.35)}#joystick{position:absolute;width:56px;height:56px;border-radius:28px;background-color:#ffffffd9;box-shadow:0 2px 8px #0000004d;top:32px;left:32px;touch-action:none}.action-button{position:absolute;width:66px;height:66px;border-radius:33px;background-color:#ffffffb3;color:#0f172a;font-weight:800;font-size:13px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;text-align:center;box-shadow:0 4px 14px #0000004d;border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .08s ease,background-color .1s ease}.action-button:active{transform:scale(.92)}#dash-button{bottom:calc(32px + max(env(safe-area-inset-bottom,0px),18px));right:calc(20px + max(env(safe-area-inset-right,0px),14px));background-color:#ffffffe0;color:#0f172a}#fastswim-button{bottom:calc(32px + max(env(safe-area-inset-bottom,0px),18px));right:calc(96px + max(env(safe-area-inset-right,0px),14px));background-color:#0ea5e9e0;color:#fff;border-color:#bae6fd99}#dodge-button{bottom:calc(110px + max(env(safe-area-inset-bottom,0px),18px));right:calc(20px + max(env(safe-area-inset-right,0px),14px));background-color:#f59e0be0;color:#fff;border-color:#fef3c799}#ink-button{bottom:calc(188px + max(env(safe-area-inset-bottom,0px),18px));right:calc(20px + max(env(safe-area-inset-right,0px),14px));background-color:#6366f1e0;color:#fff;border-color:#e0e7ff99}#camo-button{bottom:calc(188px + max(env(safe-area-inset-bottom,0px),18px));right:calc(96px + max(env(safe-area-inset-right,0px),14px));background-color:#10b981e0;color:#fff;border-color:#d1fae599}@media(max-width:900px),(hover:none)and (pointer:coarse){#mobile-controls{display:block}#controls-info{display:none}}@media(max-width:480px){#joystick-area{width:108px;height:108px;border-radius:54px;bottom:calc(30px + max(env(safe-area-inset-bottom,0px),20px));left:calc(16px + max(env(safe-area-inset-left,0px),12px))}#joystick{width:48px;height:48px;border-radius:24px;top:30px;left:30px}.action-button{width:62px;height:62px;border-radius:31px;font-size:12px}#dash-button{bottom:calc(32px + max(env(safe-area-inset-bottom,0px),22px));right:calc(16px + max(env(safe-area-inset-right,0px),12px))}#fastswim-button{bottom:calc(32px + max(env(safe-area-inset-bottom,0px),22px));right:calc(88px + max(env(safe-area-inset-right,0px),12px))}#dodge-button{bottom:calc(106px + max(env(safe-area-inset-bottom,0px),22px));right:calc(16px + max(env(safe-area-inset-right,0px),12px))}#ink-button{bottom:calc(180px + max(env(safe-area-inset-bottom,0px),22px));right:calc(16px + max(env(safe-area-inset-right,0px),12px))}#camo-button{bottom:calc(180px + max(env(safe-area-inset-bottom,0px),22px));right:calc(88px + max(env(safe-area-inset-right,0px),12px))}}@media(max-height:500px){#joystick-area{width:96px;height:96px;border-radius:48px;bottom:calc(16px + max(env(safe-area-inset-bottom,0px),10px));left:calc(20px + max(env(safe-area-inset-left,0px),16px))}#joystick{width:44px;height:44px;border-radius:22px;top:26px;left:26px}.action-button{width:54px;height:54px;border-radius:27px;font-size:11px}#dash-button{bottom:calc(16px + max(env(safe-area-inset-bottom,0px),10px));right:calc(16px + max(env(safe-area-inset-right,0px),16px))}#fastswim-button{bottom:calc(16px + max(env(safe-area-inset-bottom,0px),10px));right:calc(78px + max(env(safe-area-inset-right,0px),16px))}#dodge-button{bottom:calc(78px + max(env(safe-area-inset-bottom,0px),10px));right:calc(16px + max(env(safe-area-inset-right,0px),16px))}#ink-button{bottom:calc(78px + max(env(safe-area-inset-bottom,0px),10px));right:calc(78px + max(env(safe-area-inset-right,0px),16px))}#camo-button{bottom:calc(78px + max(env(safe-area-inset-bottom,0px),10px));right:calc(140px + max(env(safe-area-inset-right,0px),16px))}}