*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background-color:#1a1a2e}#game-canvas{width:100%;height:100%;display:block}.top-btn{position:fixed;top:12px;z-index:100;width:44px;height:44px;border:2px solid #5588aa;border-radius:8px;background:#334455d9;color:#fff;font-size:22px;cursor:pointer;display:none;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:background .15s}.top-btn:hover{background:#445566e6}#sound-toggle{right:12px}#settings-toggle{right:64px}#music-toggle{right:116px;width:auto;padding:0 14px;font-size:14px;gap:4px}#settings-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;align-items:center;justify-content:center;background:#0009}#settings-modal.open{display:flex}#settings-panel{background:#1e2a3a;border:2px solid #5588aa;border-radius:12px;padding:24px 32px;min-width:280px;max-height:80vh;color:#fff;font-family:Arial,sans-serif}#settings-scroll{max-height:calc(80vh - 100px);overflow-y:auto;padding-right:12px;scrollbar-width:auto;scrollbar-color:#3a4a5a #2a3a4a}#settings-scroll::-webkit-scrollbar{width:14px}#settings-scroll::-webkit-scrollbar-track{background:#2a3a4a;border-radius:7px}#settings-scroll::-webkit-scrollbar-thumb{background:#3a4a5a;border-radius:7px}#settings-scroll::-webkit-scrollbar-thumb:hover{background:#4a5a6a}#settings-panel h2{margin:0 0 16px;font-size:20px;text-align:center}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid #2a3a4a}.setting-row:last-child{border-bottom:none}.setting-label{font-size:16px}.setting-options{display:flex;gap:8px}.setting-options button{padding:6px 14px;border:2px solid #5588aa;border-radius:6px;background:transparent;color:#aac;font-size:14px;cursor:pointer;transition:all .15s}.setting-options button.active{background:#58a;color:#fff}.setting-options button:hover:not(.active){background:#5588aa4d}#settings-close{display:block;margin:18px auto 0;padding:8px 32px;border:2px solid #5588aa;border-radius:8px;background:#334455d9;color:#fff;font-size:16px;cursor:pointer;transition:background .15s}#settings-close:hover{background:#445566e6}#avatar-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;align-items:center;justify-content:center;background:#000000b3}#avatar-modal.open{display:flex}#avatar-panel{background:#1e2a3a;border:2px solid #5588aa;border-radius:12px;padding:24px 32px;color:#fff;font-family:Arial,sans-serif;text-align:center}#avatar-panel h3{margin:0 0 16px;font-size:18px}#avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.avatar-option{width:72px;height:72px;border:3px solid #2a3a4a;border-radius:10px;background:#1a1a2e;cursor:pointer;transition:border-color .15s,transform .15s;display:flex;align-items:center;justify-content:center}.avatar-option:hover{border-color:#58a;transform:scale(1.08)}.avatar-option.selected{border-color:#4ade80;box-shadow:0 0 8px #4ade8066}.avatar-option canvas{width:56px;height:56px;image-rendering:auto}#avatar-choose-btn{padding:6px 14px;border:2px solid #5588aa;border-radius:6px;background:transparent;color:#aac;font-size:14px;cursor:pointer;transition:all .15s}#avatar-choose-btn:hover{background:#5588aa4d}#avatar-preview{width:36px;height:36px;border-radius:6px;background:#1a1a2e;display:inline-block;vertical-align:middle;margin-right:8px;image-rendering:auto}#cardback-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;align-items:center;justify-content:center;background:#000000b3}#cardback-modal.open{display:flex}#cardback-panel{background:#1e2a3a;border:2px solid #5588aa;border-radius:12px;padding:24px 32px;color:#fff;font-family:Arial,sans-serif;text-align:center}#cardback-panel h3{margin:0 0 16px;font-size:18px}#cardback-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.cardback-option{width:60px;height:84px;border:3px solid #2a3a4a;border-radius:8px;background:#1a1a2e;cursor:pointer;transition:border-color .15s,transform .15s;display:flex;align-items:center;justify-content:center}.cardback-option:hover{border-color:#58a;transform:scale(1.08)}.cardback-option.selected{border-color:#4ade80;box-shadow:0 0 8px #4ade8066}.cardback-option canvas{width:48px;height:68px}#cardback-preview{width:28px;height:40px;border-radius:4px;display:inline-block;vertical-align:middle;margin-right:8px}#cardback-choose-btn{padding:6px 14px;border:2px solid #5588aa;border-radius:6px;background:transparent;color:#aac;font-size:14px;cursor:pointer;transition:all .15s}#cardback-choose-btn:hover{background:#5588aa4d}#about-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;align-items:center;justify-content:center;background:#000000bf}#about-modal.open{display:flex}#about-panel{background:#1a1a2e;border:2px solid #5588aa;border-radius:12px;padding:36px 48px;min-width:300px;color:#fff;font-family:Arial,sans-serif;text-align:center}#about-panel h2{margin:0 0 20px;font-size:26px;font-weight:700}#about-panel .about-version{font-size:16px;color:#aac;margin:0 0 24px}#about-panel .about-copyright{font-size:14px;color:#888;font-style:italic;margin:0 0 28px}#about-close{display:block;margin:0 auto;padding:8px 40px;border:2px solid #5588aa;border-radius:8px;background:#334455d9;color:#fff;font-size:16px;cursor:pointer;transition:background .15s}#about-close:hover{background:#445566e6}#page-title{cursor:pointer}#gameover-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;align-items:center;justify-content:center;background:#000000b3}#gameover-modal.open{display:flex}#gameover-panel{background:#1e2a3a;border:2px solid #5588aa;border-radius:12px;padding:32px 48px;min-width:300px;color:#fff;font-family:Arial,sans-serif;text-align:center}#gameover-panel h2{margin:0 0 12px;font-size:24px}#gameover-message{font-size:16px;color:#aac;margin-bottom:24px}.gameover-btn{padding:12px 40px;border:2px solid #4ade80;border-radius:8px;background:#2a6e3f;color:#4ade80;font-size:18px;font-weight:700;cursor:pointer;transition:background .15s;margin:6px 8px}.gameover-btn:hover{background:#3a8e5f}#quit-btn{border-color:#a55;background:#6e2a2a;color:#f88}#quit-btn:hover{background:#8e3a3a}#fireworks-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;display:none}#gameover-modal.victory #fireworks-canvas{display:block}#victory-title{display:none;font-size:52px;font-weight:900;color:gold;text-shadow:0 0 20px #ffd700,0 0 40px #ff8c00,0 0 80px #ff4500,2px 2px 0 #b8860b,-2px -2px 0 #b8860b;letter-spacing:4px;animation:victoryBounce .6s ease-in-out infinite alternate,victoryGlow 1.5s ease-in-out infinite alternate;margin:16px 0 24px;white-space:nowrap}#gameover-modal.victory #victory-title{display:block}#gameover-modal.victory #gameover-panel{background:radial-gradient(ellipse at center,#2a1a00,#1e2a3a 70%);border-color:gold;box-shadow:0 0 40px #ffd7004d,0 0 80px #ff450026;animation:victoryPanelPulse 2s ease-in-out infinite alternate}#gameover-modal.victory #gameover-panel h2{color:gold;font-size:20px;text-shadow:0 0 10px #ff8c00}#gameover-modal.victory #gameover-message{color:gold;font-size:18px}@keyframes victoryBounce{0%{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-10px)}}@keyframes victoryGlow{0%{text-shadow:0 0 20px #ffd700,0 0 40px #ff8c00,0 0 80px #ff4500,2px 2px 0 #b8860b,-2px -2px 0 #b8860b}to{text-shadow:0 0 30px #fff,0 0 60px #ffd700,0 0 100px #ff8c00,2px 2px 0 #b8860b,-2px -2px 0 #b8860b}}@keyframes victoryPanelPulse{0%{box-shadow:0 0 40px #ffd7004d,0 0 80px #ff450026}to{box-shadow:0 0 60px #ffd70080,0 0 120px #ff450040}}.gameover-buttons{display:flex;justify-content:center;flex-wrap:wrap}#copyright{position:fixed;bottom:12px;left:0;right:0;z-index:100;text-align:center;font-family:Arial,sans-serif;font-size:13px;font-style:italic;color:#888;-webkit-user-select:none;user-select:none;display:none}#page-title{position:fixed;top:14px;left:16px;z-index:100;font-family:Arial,sans-serif;font-size:24px;font-weight:700;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.8);-webkit-user-select:none;user-select:none;display:none}#mobile-gate{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#1a1a2e;color:#fff;font-family:Arial,sans-serif;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:16px;padding:32px}#mobile-gate h2{font-size:28px;margin:0}#mobile-gate p{font-size:16px;color:#aac;margin:0}