*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background:#000;overflow:hidden;width:100vw;height:100vh;}.fullscreen-tank{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(to bottom, #001a33 0%, #003366 50%, #004080 100%);}#tankCanvas{width:100%;height:100%;display:block;}#foodParticles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;}.food-particle{position:absolute;font-size:24px;animation:foodFall 5s ease-in forwards;pointer-events:none;}@keyframes foodFall{0%{transform:translateY(0) rotate(0deg);opacity:1;}100%{transform:translateY(100vh) rotate(180deg);opacity:0;}}.top-bar{position:fixed;top:0;left:0;right:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);padding:15px 30px;display:flex;justify-content:space-between;align-items:center;z-index:100;backdrop-filter:blur(10px);}.logo h1{color:white;font-size:1.8em;margin:0;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);}.logo p{color:rgba(255, 255, 255, 0.8);font-size:0.9em;margin:0;}.stats-bar{display:flex;gap:20px;}.stat-item{color:white;font-size:1.1em;font-weight:bold;text-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);}.action-bar{display:flex;gap:10px;}.top-btn{background:rgba(255, 255, 255, 0.2);color:white;border:2px solid rgba(255, 255, 255, 0.3);padding:10px 20px;border-radius:25px;font-size:1em;font-weight:bold;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px);}.top-btn:hover{background:rgba(255, 255, 255, 0.3);border-color:rgba(255, 255, 255, 0.5);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0, 0, 0, 0.3);}.bottom-tip{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.7);color:white;padding:10px 30px;border-radius:25px;backdrop-filter:blur(10px);z-index:100;}.bottom-tip p{margin:0;font-size:1.1em;text-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);}.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);backdrop-filter:blur(10px);animation:fadeIn 0.3s;overflow-y:auto;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.modal-content{background:linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);margin:5% auto;padding:0;border-radius:20px;max-width:500px;box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);animation:slideIn 0.3s;overflow:hidden;}@keyframes slideIn{from{transform:translateY(-50px);opacity:0;}to{transform:translateY(0);opacity:1;}}.close-btn{position:absolute;right:15px;top:15px;color:#999;font-size:32px;font-weight:bold;cursor:pointer;transition:all 0.3s;z-index:1;}.close-btn:hover{color:#333;transform:rotate(90deg);}.draw-modal-content{max-height:90vh;overflow-y:auto;}.drawing-panel{padding:20px;}.drawing-panel h2{color:#333;margin-bottom:20px;text-align:center;}.canvas-container{border:3px solid #667eea;border-radius:10px;overflow:hidden;margin-bottom:15px;background:white;}#drawingCanvas{display:block;cursor:crosshair;}.similarity-bar{margin-bottom:15px;}.similarity-label{display:flex;justify-content:space-between;margin-bottom:5px;font-weight:bold;}.progress-bar{position:relative;width:100%;height:30px;background:#eee;border-radius:15px;overflow:hidden;}.progress-fill{height:100%;background:linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);transition:width 0.3s;border-radius:15px;}.threshold-line{position:absolute;left:60%;top:0;width:2px;height:100%;background:#e74c3c;}.threshold-label{text-align:center;font-size:0.9em;color:#666;margin-top:5px;}.tools{display:flex;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap;}.tool-btn{padding:10px 15px;border:2px solid #ddd;background:white;border-radius:8px;cursor:pointer;transition:all 0.3s;font-size:1em;}.tool-btn:hover{background:#f0f0f0;transform:translateY(-2px);}.tool-btn.active{background:#667eea;color:white;border-color:#667eea;}#colorPicker{width:50px;height:40px;border:none;border-radius:8px;cursor:pointer;}#brushSize{flex:1;min-width:100px;}.fish-name-section{margin-bottom:15px;}.fish-name-section label{display:block;margin-bottom:5px;}.fish-name-input{width:100%;padding:12px;border:2px solid #ddd;border-radius:8px;font-size:1em;transition:border 0.3s;}.fish-name-input:focus{outline:none;border-color:#667eea;}.submit-btn{width:100%;padding:15px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white;border:none;border-radius:10px;font-size:1.2em;font-weight:bold;cursor:pointer;transition:all 0.3s;margin-bottom:15px;}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px rgba(102, 126, 234, 0.4);}.submit-btn:disabled{opacity:0.5;cursor:not-allowed;}.tips-section{background:#fff3cd;border:2px solid #ffc107;border-radius:10px;padding:15px;}.tips-section h3{color:#d35400;margin-bottom:10px;font-size:1.1em;}.tips-section ul{list-style:none;}.tips-section li{margin:5px 0;color:#333;}.list-modal-content{max-height:80vh;}.fish-list-panel{padding:20px;}.fish-list-panel h2{color:#333;margin-bottom:20px;}.fish-list-scroll{max-height:60vh;overflow-y:auto;}.fish-item{display:flex;align-items:center;gap:15px;padding:15px;background:#f8f9fa;border-radius:10px;margin-bottom:10px;transition:all 0.3s;}.fish-item:hover{background:#e9ecef;transform:translateX(5px);}.fish-item img{width:60px;height:45px;object-fit:contain;background:white;border-radius:8px;padding:5px;}.fish-info{flex:1;}.fish-name{font-weight:bold;font-size:1.1em;color:#333;margin-bottom:5px;}.fish-stats{font-size:0.9em;color:#666;}.action-buttons{display:flex;gap:5px;}.action-btn{padding:8px 12px;border:none;border-radius:6px;cursor:pointer;font-size:1.2em;transition:all 0.3s;}.action-btn:hover{transform:scale(1.1);}.action-btn.like{background:#48dbfb;}.action-btn.dislike{background:#ff6b6b;}.action-btn.feed{background:#feca57;}.fish-info-modal{max-width:400px;}.modal-header{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);padding:30px 20px;text-align:center;color:white;}.modal-fish-image{width:120px;height:90px;object-fit:contain;background:white;border-radius:15px;padding:10px;margin-bottom:15px;box-shadow:0 5px 15px rgba(0, 0, 0, 0.2);}.modal-header h2{margin:0;font-size:1.8em;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3);}.modal-stats{display:flex;justify-content:space-around;padding:30px 20px;background:white;}.modal-stats .stat-item{text-align:center;flex:1;}.stat-icon{font-size:3em;display:block;margin-bottom:10px;}.stat-number{font-size:2em;font-weight:bold;color:#667eea;}.modal-actions{display:flex;gap:10px;padding:20px;background:#f8f9fa;}.modal-btn{flex:1;padding:15px 10px;border:none;border-radius:12px;font-size:1.1em;font-weight:bold;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);}.modal-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);}.modal-btn span{font-size:1.3em;margin-right:5px;}.modal-btn-like{background:linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);color:white;}.modal-btn-feed{background:linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);color:white;}.modal-btn-dislike{background:linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);color:white;}.donate-modal-content{max-width:400px;}.donate-header{background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);padding:30px 20px;text-align:center;color:white;border-radius:20px 20px 0 0;}.donate-header h2{margin:0 0 10px 0;font-size:1.8em;}.donate-header p{margin:0;opacity:0.9;}.qrcode-container{padding:40px 20px;text-align:center;background:white;}.qrcode-image{width:200px;height:200px;border:3px solid #f5576c;border-radius:15px;padding:10px;background:white;box-shadow:0 5px 20px rgba(0, 0, 0, 0.1);}.qrcode-tip{margin-top:20px;color:#666;font-size:1.1em;font-weight:bold;}.contact-modal-content{max-width:450px;}.contact-header{background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);padding:30px 20px;text-align:center;color:white;border-radius:20px 20px 0 0;}.contact-header h2{margin:0;font-size:1.8em;}.contact-info{padding:30px 20px;background:white;}.contact-item{display:flex;align-items:flex-start;gap:15px;padding:20px;background:#f8f9fa;border-radius:15px;margin-bottom:15px;}.contact-item:last-child{margin-bottom:0;}.contact-icon{font-size:2.5em;}.contact-details{flex:1;}.contact-label{font-weight:bold;color:#333;margin-bottom:5px;font-size:1.1em;}.contact-value{color:#4facfe;font-size:1.2em;font-weight:bold;margin:10px 0;word-break:break-all;}.contact-desc{color:#666;font-size:0.95em;line-height:1.5;}.copy-btn{background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);color:white;border:none;padding:8px 15px;border-radius:8px;font-size:0.9em;font-weight:bold;cursor:pointer;transition:all 0.3s;margin-top:10px;}.copy-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(79, 172, 254, 0.4);}@media (max-width:768px){.top-bar{flex-direction:column;gap:10px;padding:10px 15px;}.logo h1{font-size:1.3em;}.logo p{font-size:0.8em;}.action-bar{flex-wrap:wrap;justify-content:center;}.top-btn{padding:8px 15px;font-size:0.9em;}.modal-content{width:95%;margin:5% auto;}}.fish-list-scroll::-webkit-scrollbar,
.draw-modal-content::-webkit-scrollbar{width:8px;}.fish-list-scroll::-webkit-scrollbar-track,
.draw-modal-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;}.fish-list-scroll::-webkit-scrollbar-thumb,
.draw-modal-content::-webkit-scrollbar-thumb{background:#888;border-radius:10px;}.fish-list-scroll::-webkit-scrollbar-thumb:hover,
.draw-modal-content::-webkit-scrollbar-thumb:hover{background:#555;}