html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#c{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.topbar{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:8px;align-items:center;pointer-events:auto;background:#00000040;color:#fff;padding:6px 10px;border-radius:10px;backdrop-filter:blur(6px);z-index:3}.audio-controls{display:flex;gap:4px;align-items:center}.mute-btn{background:none;border:1px solid rgba(255,255,255,.3);border-radius:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .2s ease}.mute-btn:hover{background:#ffffff1a}.mute-btn.muted{opacity:.5;border-color:#ff000080}.mute-btn .sound-icon,.mute-btn .music-icon{font-size:1.1em;transition:opacity .2s ease}.topbar button,.topbar select,.topbar input[type=checkbox]{border:none;border-radius:8px;padding:6px 10px;background:#ffffff1f;color:#fff;cursor:pointer}.topbar button:hover{background:#fff3}#btnMute{width:36px;padding:6px 0;text-align:center;font-size:1.1em}#btnMute.muted{opacity:.7;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#f44}.panel{position:absolute;top:56px;left:8px;width:300px;max-height:calc(100% - 64px);overflow:auto;pointer-events:auto;background:#00000040;color:#fff;padding:10px;border-radius:12px;backdrop-filter:blur(6px);display:none;z-index:4}.panel h3{margin:6px 0 8px;font-size:16px}.row{display:flex;align-items:center;justify-content:space-between;margin:4px 0;gap:6px}.small{font-size:12px;opacity:.9}.badge{display:inline-block;padding:2px 6px;border-radius:999px;background:#ffffff26;margin:2px}.pill{padding:2px 8px;border-radius:999px;background:#ffffff1a}.notice{font-size:12px;opacity:.85}.spacer{flex:1}#fishCollectionPanel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:1000px;max-height:80vh;background:#1e2328f2;border:2px solid #4a90e2;border-radius:12px;padding:20px;color:#fff;z-index:1000;overflow-y:auto;box-shadow:0 0 20px #00000080;pointer-events:auto;backdrop-filter:blur(6px)}#fishCollectionPanel h3{margin-top:0;color:#4a90e2;border-bottom:1px solid #4a90e2;padding-bottom:10px}.fish-collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;margin:15px 0}.fish-collection-panel .fish-card{background:#1e232dcc;border-radius:10px;padding:0;margin-bottom:16px;overflow:hidden;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 6px #0000001a}.fish-collection-panel .fish-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0003}.fish-card-header{display:flex;padding:16px;background:#0003;border-bottom:1px solid rgba(255,255,255,.05)}.fish-thumbnail{width:80px;height:60px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#0000004d;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1)}.fish-basic-info{flex-grow:1;margin-left:16px;min-width:0}.fish-basic-info h4{margin:0 0 6px;font-size:1.1em;color:#fff;display:flex;align-items:center;gap:6px}.fish-meta{display:flex;gap:8px;font-size:.8em;color:#a0a8b8;margin-bottom:8px}.species{color:#8ab4f8}.generation{background:#8ab4f833;padding:2px 6px;border-radius:4px;font-size:.75em}.shiny-badge{background:linear-gradient(45deg,gold,#ff9d00);color:#000;padding:2px 6px;border-radius:4px;font-size:.7em;font-weight:700;text-shadow:0 1px 1px rgba(255,255,255,.5)}.fish-stats-row{display:flex;gap:12px;margin-top:8px}.stat{text-align:center;flex:1}.stat-label{display:block;font-size:.7em;color:#8a9ba8;margin-bottom:2px}.stat-value{display:block;font-weight:700;font-size:.9em;color:#fff}.fish-details{padding:16px;background:#14192399}.detail-section{margin-bottom:16px}.detail-section:last-child{margin-bottom:0}.detail-section h5{margin:0 0 10px;color:#8ab4f8;font-size:.85em;text-transform:uppercase;letter-spacing:.5px}.attributes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.attribute{font-size:.85em}.attr-name{display:block;color:#a0a8b8;margin-bottom:2px}.attr-value{font-weight:700;color:#fff;margin-right:8px;min-width:30px;display:inline-block;text-align:right}.attr-bar{height:6px;background:#ffffff1a;border-radius:3px;margin-top:4px;overflow:hidden;position:relative}.attr-bar:after{content:"";position:absolute;left:0;top:0;height:100%;width:calc(var(--value, 0) * 1%);background:#4c9eff;border-radius:3px}.attr-bar.health:after{background:#4caf50}.attr-bar.energy:after{background:#ffc107}.appearance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.appearance-item{display:flex;align-items:center;gap:8px;font-size:.85em}.appearance-label{color:#a0a8b8;min-width:60px}.appearance-value{color:#fff;font-weight:500}.color-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.2);flex-shrink:0}.fish-actions{display:flex;gap:10px;margin-top:16px}.btn-add,.btn-delete{flex:1;padding:8px 12px;border:none;border-radius:4px;font-weight:600;font-size:.85em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s}.btn-add{background:#4caf50;color:#fff}.btn-add:hover{background:#3d8b40}.btn-delete{background:#ff4b4b33;color:#ff4b4b}.btn-delete:hover{background:#ff4b4b4d}.btn-icon{font-size:1.1em;line-height:1}.save-date{font-size:.75em;color:#6b7280;text-align:right;margin-top:8px}.fish-card-actions{display:flex;gap:8px;padding:0 12px 12px}.fish-card-actions button{flex:1;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:.85em;transition:background-color .2s}.btn-select{background-color:#4a90e2;color:#fff}.btn-select:hover{background-color:#3a7bc8}.btn-delete{width:36px;background-color:#e74c3c;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}.btn-delete:hover{background-color:#c0392b}.collection-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.collection-actions button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:.9em;transition:background-color .2s}.collection-actions button:first-child{background-color:#4a90e2;color:#fff}.collection-actions button:first-child:hover{background-color:#3a7bc8}.collection-actions button.danger{background-color:#e74c3c;color:#fff}.collection-actions button.danger:hover{background-color:#c0392b}.no-fish{text-align:center;padding:20px;color:#888;font-style:italic;grid-column:1 / -1}#fishCard{position:fixed;bottom:12px;left:12px;pointer-events:auto;background:#000000b3;color:#fff;padding:12px;border-radius:12px;max-width:360px;max-height:80vh;overflow:auto;display:none;backdrop-filter:blur(6px);z-index:5}#fishCard input[type=text]{width:100%;padding:6px;border-radius:6px;border:none;margin-top:6px}#toast{position:fixed;bottom:12px;right:12px;color:#fff;background:#000000b3;padding:10px 16px;border-radius:10px;display:none;z-index:10;backdrop-filter:blur(6px);pointer-events:none;max-width:80%;text-align:right}canvas{display:block}