*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#f5c88a;font-family:Segoe UI,system-ui,sans-serif}.game-container{position:relative;width:100vw;height:100vh;overflow:hidden}.screen-overlay{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.screen-card{background:#fffffff2;border-radius:20px;padding:28px 40px;text-align:center;max-width:460px;width:90%;box-shadow:0 20px 60px #0006}.fish-emoji{font-size:48px;margin-bottom:10px}.screen-card h1{font-size:1.7rem;font-weight:800;color:#1a1a2e;margin-bottom:10px}.screen-card p{color:#555;margin-bottom:6px;font-size:.95rem;line-height:1.45}.controls-info{background:#fff8e8;border-radius:10px;padding:10px 18px;margin:14px 0;text-align:left}.controls-info p{color:#333;font-size:.85rem;font-weight:500;margin-bottom:3px;font-family:monospace}.screen-card button{margin-top:16px;background:#d97706;color:#fff;border:none;border-radius:12px;padding:14px 40px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .1s,background .2s;box-shadow:0 4px 15px #d9770666}.screen-card button:hover{background:#b45309;transform:translateY(-2px)}.screen-card button:active{transform:translateY(0)}.win-corner{position:absolute;bottom:24px;right:20px;z-index:100;background:#1e1208e0;border:1px solid rgba(255,200,100,.35);border-radius:16px;padding:14px 18px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 28px #00000073;min-width:170px}.win-emoji-sm{font-size:26px;letter-spacing:3px;margin-bottom:6px}.win-corner-title{color:#fff8e8;font-size:.95rem;font-weight:700;margin-bottom:3px}.win-corner-sub{color:#d4a060;font-size:.78rem;margin-bottom:10px;line-height:1.3}.win-corner button{background:#d97706;color:#fff;border:none;border-radius:10px;padding:9px 22px;font-size:.88rem;font-weight:700;cursor:pointer;transition:transform .1s,background .2s;box-shadow:0 3px 10px #d9770666;width:100%}.win-corner button:hover{background:#b45309;transform:translateY(-2px)}.win-corner button:active{transform:translateY(0)}@keyframes cutsceneFadeIn{0%{opacity:0}to{opacity:1}}.cutscene-caption{position:absolute;bottom:26%;left:50%;transform:translate(-50%);color:#fff;font-size:clamp(15px,2.8vw,26px);font-weight:800;font-family:system-ui,-apple-system,sans-serif;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.6);letter-spacing:.03em;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;animation:cutsceneFadeIn .45s ease forwards}.cutscene-skip{position:absolute;top:16px;right:20px;background:#0000006b;color:#ffffffe0;border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:7px 18px;font-size:13px;font-weight:600;font-family:system-ui,sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);letter-spacing:.02em;pointer-events:auto;transition:background .15s}.cutscene-skip:hover{background:#0009}.hud{position:absolute;inset:0;z-index:50;pointer-events:none;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.hud-items,.hud-platforms{background:#0009;color:#fff;padding:8px 16px;border-radius:24px;font-size:1rem;font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15)}.hud-hint{position:absolute;bottom:80px;left:50%;transform:translate(-50%);background:#000000b3;color:#ffeb3b;padding:10px 24px;border-radius:24px;font-size:.95rem;font-weight:600;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,235,59,.3);animation:pulse-hint 1.5s ease-in-out infinite}.hud-hint.hint-success{color:#69f0ae;border-color:#69f0ae4d}@keyframes pulse-hint{0%,to{opacity:1;transform:translate(-50%) scale(1)}50%{opacity:.85;transform:translate(-50%) scale(1.02)}}.hud-progress{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px;background:#0009;padding:10px 20px;border-radius:30px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.progress-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:transparent;transition:background .3s,border-color .3s}.progress-dot.filled{background:#ffb300;border-color:#ffe082;box-shadow:0 0 8px #ffb30099}.mute-btn{position:absolute;bottom:20px;left:20px;z-index:200;background:#00000080;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:50%;width:42px;height:42px;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,transform .1s;line-height:1;padding:0}.mute-btn:hover{background:#000000b8;transform:scale(1.08)}.mute-btn:active{transform:scale(.95)}@keyframes sceneFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sceneFadeOut{0%{opacity:1}to{opacity:0}}.scene-fade{position:absolute;inset:0;z-index:300;background:#000;pointer-events:none}.scene-fade.fade-in{animation:sceneFadeIn .4s ease forwards}.scene-fade.fade-out{animation:sceneFadeOut .4s ease forwards}.catalog-overlay{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;overflow:hidden}.catalog-bg{position:absolute;inset:0;background:linear-gradient(160deg,#0b3d52,#0d6986 40%,#1a9aaa,#29b6cf);z-index:0;overflow:hidden}@keyframes fish-ltr{0%{transform:translate(-140px) scaleX(1)}to{transform:translate(calc(100vw + 140px)) scaleX(1)}}@keyframes fish-rtl{0%{transform:translate(calc(100vw + 140px)) scaleX(-1)}to{transform:translate(-140px) scaleX(-1)}}.bg-fish{position:absolute;border-radius:50% 50% 50% 20%/50% 50% 30% 40%;background:#ffffff1f;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}.bg-fish:after{content:"";position:absolute;right:-38%;top:15%;width:38%;height:70%;background:inherit;clip-path:polygon(0 50%,100% 0,100% 100%);opacity:.8}.bg-fish-ltr{animation-name:fish-ltr}.bg-fish-rtl{animation-name:fish-rtl}@keyframes bubble-rise{0%{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(-40vh) scale(1.05);opacity:.7}to{transform:translateY(-90vh) scale(.9);opacity:0}}.catalog-bubble{position:absolute;bottom:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:#ffffff14;animation:bubble-rise linear infinite;will-change:transform}.catalog-card{position:relative;z-index:1;background:#0a1e2dd1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(100,200,230,.22);border-radius:22px;padding:22px 26px 24px;max-width:520px;width:92%;box-shadow:0 24px 72px #0000008c,0 0 0 1px #ffffff0a inset;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:96vh;overflow-y:auto}.catalog-title{color:#e1f5fe;font-size:1.3rem;font-weight:800;text-align:center;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,180,220,.5);margin:0}.species-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}.species-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 9px;background:#ffffff12;border:1.5px solid rgba(255,255,255,.12);border-radius:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;color:#b3e5fc;font-family:inherit}.species-card:hover{background:#ffffff21;transform:translateY(-2px)}.species-selected{background:#29b6f633!important;border-color:#29b6f6!important;box-shadow:0 0 12px #29b6f659}.species-icon{font-size:1.5rem;line-height:1}.species-name{font-size:.78rem;font-weight:700;color:#e1f5fe}.species-desc{font-size:.68rem;color:#80deea;text-align:center}.catalog-preview{width:180px;height:180px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 40% 35%,#29b6f638,#0d698699);border:2px solid rgba(100,200,240,.3);box-shadow:0 0 28px #29b6f638,0 8px 32px #0006;flex-shrink:0}.catalog-preview canvas{width:100%!important;height:100%!important}.catalog-swatches{width:100%;display:flex;flex-direction:column;gap:8px}.swatch-row{display:flex;align-items:center;gap:10px}.swatch-label{width:36px;font-size:.75rem;font-weight:700;color:#80deea;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.swatch-list{display:flex;gap:6px;flex-wrap:wrap}.swatch{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.2);cursor:pointer;transition:transform .1s,border-color .12s,box-shadow .12s;padding:0}.swatch:hover{transform:scale(1.18);border-color:#ffffff8c}.swatch-selected{border-color:#fff!important;box-shadow:0 0 0 2px #ffffff80,0 0 10px #ffffff4d;transform:scale(1.15)}.catalog-name-section{margin:10px 0 6px;width:100%}.catalog-name-display-row,.catalog-name-edit-row{display:flex;align-items:center;gap:8px;background:#ffffff14;border:1.5px solid rgba(255,255,255,.18);border-radius:12px;padding:9px 14px}.catalog-name-fish-icon{font-size:1.1rem;flex-shrink:0}.catalog-name-text{flex:1;font-size:1rem;font-weight:700;color:#fff;letter-spacing:.02em;text-align:left}.catalog-name-change-btn{background:#ffffff24;border:1.5px solid rgba(255,255,255,.28);border-radius:8px;color:#ffffffe6;font-size:.78rem;font-weight:600;padding:5px 11px;cursor:pointer;white-space:nowrap;transition:background .15s,transform .1s;flex-shrink:0}.catalog-name-change-btn:hover{background:#ffffff3d;transform:translateY(-1px)}.catalog-name-change-btn:active{transform:translateY(0)}.catalog-name-input{flex:1;background:#ffffff1f;border:none;outline:none;border-bottom:2px solid rgba(255,255,255,.6);color:#fff;font-size:1rem;font-weight:700;padding:2px 4px;min-width:0;letter-spacing:.02em}.catalog-name-input::placeholder{color:#fff6;font-weight:400}.catalog-name-confirm{background:#64dc7840;border:1.5px solid rgba(100,220,120,.5);border-radius:8px;color:#a0ffb0;font-size:.95rem;font-weight:800;padding:4px 10px;cursor:pointer;flex-shrink:0;transition:background .15s}.catalog-name-confirm:hover{background:#64dc7866}.catalog-go-btn{margin-top:4px;background:linear-gradient(135deg,#0288d1,#0097a7);color:#fff;border:none;border-radius:14px;padding:14px 48px;font-size:1.05rem;font-weight:800;cursor:pointer;letter-spacing:.03em;transition:transform .1s,box-shadow .2s,filter .2s;box-shadow:0 5px 20px #0288d180;width:100%}.catalog-go-btn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 28px #0288d199}.catalog-go-btn:active{transform:translateY(0);filter:brightness(.95)}