*{box-sizing:border-box;margin:0;padding:0;font-family:"Press Start 2P",cursive}body,html{color:#f4f4f4;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background-color:#1a1c2c;width:100%;height:100%;overflow:hidden}#game-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}canvas{touch-action:none;display:block}@media (width<=600px){.panel{max-width:95vw;padding:16px}h1{font-size:16px}.subtitle{font-size:8px}label{font-size:10px}.action-btn{padding:12px;font-size:12px}}#ui-layer{z-index:10;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}#app{z-index:20;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.panel{text-align:center;pointer-events:auto;text-shadow:2px 2px #000;background:#14141ee6;border:4px solid #5d275d;border-radius:8px;max-width:600px;padding:30px;box-shadow:0 10px 30px #00000080}.hidden{display:none!important}h1{color:#f77;margin-bottom:10px;font-size:24px}h2{color:#f4f4f4;margin-bottom:20px;font-size:20px}h3{color:#94b0c2;margin-bottom:15px;font-size:14px}.subtitle{color:#94b0c2;margin-bottom:30px;font-size:10px}.kofi-link{color:#94b0c2;opacity:.6;margin-top:20px;font-size:8px;text-decoration:none;transition:opacity .2s,color .2s;display:block}.kofi-link:hover{opacity:1;color:#ff5f5f}.form-group{text-align:left;margin-bottom:20px}label{color:#b4c7d5;margin-bottom:10px;font-size:12px;display:block}input{color:#fff;-webkit-user-select:text;user-select:text;background:#29366f;border:2px solid #3b5dc9;outline:none;width:100%;padding:10px;font-size:14px}input::selection{color:#fff;background:#b04fb0}.faction-select,.class-select{gap:10px;display:flex}.faction-select button,.class-select button{color:#fff;cursor:pointer;background:#3b5dc9;border:2px solid #29366f;flex:1;padding:10px;font-size:12px;transition:all .2s}.faction-select button.active,.class-select button.active{background:#f77;border-color:#d95763}.action-btn{color:#fff;cursor:pointer;background:#5d275d;border:4px solid #b13e53;width:100%;margin-top:10px;padding:15px;font-size:16px;transition:transform .1s}.action-btn:hover{transform:scale(1.05)}.action-btn:active{transform:scale(.95)}.player-counter{color:#b4c7d5;margin-top:15px;font-size:10px;transition:opacity .3s}#player-count{color:#ffdd57;font-size:14px;display:inline-block}.player-counter.pop #player-count{animation:.4s cubic-bezier(.175,.885,.32,1.275) counter-pop}@keyframes counter-pop{0%{color:#ffdd57;transform:scale(1)}50%{color:#fff;transform:scale(1.6)translateY(-2px)}to{color:#ffdd57;transform:scale(1)}}#win-screen,#others-win-screen{pointer-events:auto;z-index:10;background:#0000009e;width:100%;height:100%;position:absolute;top:0;left:0}#win-eggs-canvas{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}#win-title{color:#ffdd57;text-shadow:4px 4px #000,0 0 40px gold;white-space:nowrap;z-index:11;font-size:56px;animation:2s ease-in-out infinite win-pulse;position:absolute;top:28%;left:50%;transform:translate(-50%,-50%)}#win-fish{z-index:1;animation:1.5s ease-in-out infinite fish-bob;position:absolute;top:62%;left:50%;transform:translate(-50%,-50%)}@keyframes win-pulse{0%,to{opacity:1;transform:translate(-50%,-50%)scale(1)}50%{opacity:.9;transform:translate(-50%,-50%)scale(1.06)}}@keyframes fish-bob{0%,to{transform:translate(-50%,-50%)translateY(0)}50%{transform:translate(-50%,-50%)translateY(-20px)}}#btn-join-new,#btn-join-session{pointer-events:auto;cursor:pointer;width:auto;padding:15px 30px;font-size:14px;position:absolute;bottom:40px;left:40px}#others-win-line1{color:#f77;text-shadow:4px 4px #000,0 0 40px red;text-align:center;word-break:break-word;max-width:80vw;font-size:36px;line-height:1.6;animation:2s ease-in-out infinite death-pulse;position:absolute;top:36%;left:50%;transform:translate(-50%,-50%)}#others-win-fish{animation:1.5s ease-in-out infinite fish-bob;position:absolute;top:62%;left:50%;transform:translate(-50%,-50%)}#others-win-line2{display:none}#death-screen{pointer-events:none;background:#00000073;width:100%;height:100%;position:absolute;top:0;left:0}#death-title{color:#f33;text-shadow:4px 4px #000,0 0 40px red;white-space:nowrap;font-size:40px;animation:2s ease-in-out infinite death-pulse;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}#death-catcher{color:#faa;text-shadow:2px 2px #000;white-space:nowrap;text-align:center;font-size:22px;position:absolute;top:56%;left:50%;transform:translate(-50%,-50%)}@keyframes death-pulse{0%,to{opacity:1;transform:translate(-50%,-50%)scale(1)}50%{opacity:.75;transform:translate(-50%,-50%)scale(1.06)}}#btn-respawn{pointer-events:auto;background:#b13e53;border-color:#f44;width:auto;padding:15px 30px;font-size:14px;position:absolute;bottom:40px;right:40px}.leaderboards{gap:30px;margin-bottom:30px;display:flex}.leaderboard{background:#00000080;border-radius:4px;flex:1;padding:15px}ul{text-align:left;font-size:10px;line-height:1.8;list-style:none}#reconnecting-indicator{color:#ffdd57;z-index:1000;pointer-events:none;background:#14141ed9;border:2px solid #ffdd57;border-radius:4px;align-items:center;gap:10px;padding:10px 15px;font-size:10px;animation:1.5s infinite reconnecting-pulse;display:flex;position:absolute;bottom:20px;right:20px;box-shadow:0 4px 15px #00000080}@keyframes reconnecting-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.98)}}.spinner{border:2px solid #ffdd574d;border-top-color:#ffdd57;border-radius:50%;width:12px;height:12px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}