*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#1a1a2e}#game-container{width:100%;height:100%;position:relative}#game-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}#ui-overlay{position:absolute;top:0;left:0;right:0;padding:16px;display:flex;justify-content:space-between;pointer-events:none}#player-count{font-family:monospace;font-size:14px;color:#fff;background:#0009;padding:8px 16px;border-radius:4px;border:2px solid #4a4a6a}#controls-hint{font-family:monospace;font-size:12px;color:#aaa;background:#0009;padding:8px 16px;border-radius:4px;border:2px solid #4a4a6a}#chat-container{position:absolute;bottom:0;left:0;right:0;padding:16px;display:flex;flex-direction:column;align-items:center;gap:0}#chat-form{display:flex;align-items:center;width:100%;max-width:600px;background:#202123f2;border:1px solid #565869;border-radius:12px;padding:8px 16px;box-shadow:0 4px 20px #0006;transition:border-color .2s,box-shadow .2s}#chat-form:focus-within{border-color:#8e8ea0;box-shadow:0 4px 24px #00000080}#chat-input{flex:1;background:transparent;border:none;outline:none;color:#ececf1;font-family:Segoe UI,system-ui,sans-serif;font-size:14px;padding:8px 0}#chat-input::placeholder{color:#8e8ea0}#chat-send{background:transparent;border:none;cursor:pointer;padding:8px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#8e8ea0;transition:color .2s,background .2s}#chat-send:hover{color:#ececf1;background:#ffffff1a}#chat-send:active{transform:scale(.95)}#chat-send svg{width:20px;height:20px}.assistant-chat{width:100%;max-width:600px;max-height:350px;background:#202123fa;border:1px solid #3498db;border-bottom:none;border-radius:12px 12px 0 0;display:flex;flex-direction:column;box-shadow:0 -4px 20px #3498db33;overflow:hidden;animation:slideUp .2s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.assistant-chat.hidden{display:none}.assistant-chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#3498db1a;border-bottom:1px solid rgba(52,152,219,.2)}.assistant-info{flex:1}.assistant-name{font-family:Segoe UI,system-ui,sans-serif;font-size:13px;font-weight:600;color:#5dade2}.assistant-close{background:transparent;border:none;padding:8px;cursor:pointer;color:#7f8c8d;border-radius:8px;transition:color .2s,background .2s}.assistant-close:hover{color:#ecf0f1;background:#ffffff1a}.assistant-close svg{width:20px;height:20px}.assistant-chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px;min-height:150px;max-height:280px}.assistant-message{max-width:85%;padding:10px 14px;border-radius:16px;font-family:Segoe UI,system-ui,sans-serif;font-size:14px;line-height:1.4;animation:messageSlide .3s ease}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.assistant-message.from-assistant{align-self:flex-start;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border-bottom-left-radius:4px}.assistant-message.from-player{align-self:flex-end;background:#ffffff1a;color:#ecf0f1;border-bottom-right-radius:4px}.assistant-message.typing{background:#3498db4d;color:#7f8c8d}.typing-indicator{display:flex;gap:4px;padding:4px 0}.typing-indicator span{width:8px;height:8px;background:#7f8c8d;border-radius:50%;animation:typingBounce 1.4s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-4px)}}.assistant-chat-messages::-webkit-scrollbar{width:6px}.assistant-chat-messages::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.assistant-chat-messages::-webkit-scrollbar-thumb{background:#3498db80;border-radius:3px}.assistant-chat-messages::-webkit-scrollbar-thumb:hover{background:#3498dbb3}.assistant-history-btn{background:transparent;border:none;border-left:1px solid #565869;padding:8px 8px 8px 12px;margin-left:8px;cursor:pointer;color:#3498db;display:flex;align-items:center;justify-content:center;transition:all .2s}.assistant-history-btn.hidden{display:none}.assistant-history-btn:hover{color:#5dade2}.assistant-history-btn:active{transform:scale(.95)}#chat-container.assistant-mode #chat-form{border:1px solid #3498db;background:#202123fa}#chat-container.assistant-mode #chat-input::placeholder{color:#5dade2}#chat-container.assistant-mode.history-visible #chat-form{border-radius:0 0 12px 12px;border-top-color:#3498db4d}.settings-btn{background:transparent;border:none;border-left:1px solid #565869;padding:8px 8px 8px 12px;margin-left:8px;cursor:pointer;color:#8e8ea0;display:flex;align-items:center;justify-content:center;transition:all .2s}.settings-btn:hover{color:#ececf1}.settings-btn:active{transform:scale(.95)}.settings-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease}.settings-modal.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-content{background:linear-gradient(135deg,#1e2a3a,#0d1b2a);border:1px solid #3d5a80;border-radius:16px;width:90%;max-width:400px;box-shadow:0 20px 60px #00000080;animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(61,90,128,.5)}.settings-header h2{font-family:Segoe UI,system-ui,sans-serif;font-size:18px;font-weight:600;color:#ecf0f1;margin:0}.settings-close{background:transparent;border:none;padding:6px;cursor:pointer;color:#7f8c8d;border-radius:6px;transition:color .2s,background .2s}.settings-close:hover{color:#ecf0f1;background:#ffffff1a}.settings-close svg{width:20px;height:20px}.settings-body{padding:20px;display:flex;flex-direction:column;gap:20px}.settings-group{display:flex;flex-direction:column;gap:8px}.settings-group label{font-family:Segoe UI,system-ui,sans-serif;font-size:13px;font-weight:500;color:#95a5a6;text-transform:uppercase;letter-spacing:.5px}#settings-name{background:#ffffff0d;border:1px solid rgba(61,90,128,.5);border-radius:8px;padding:12px 14px;color:#ecf0f1;font-family:Segoe UI,system-ui,sans-serif;font-size:14px;outline:none;transition:border-color .2s,background .2s}#settings-name:focus{border-color:#3498db;background:#ffffff14}#settings-name::placeholder{color:#7f8c8d}.character-type-selector{display:flex;gap:12px}.char-type-btn{flex:1;background:#ffffff0d;border:2px solid rgba(61,90,128,.5);border-radius:10px;padding:14px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s}.char-type-btn:hover{background:#ffffff14;border-color:#3d5a80cc}.char-type-btn.selected{background:#3498db33;border-color:#3498db}.char-type-btn .char-icon{font-size:28px}.char-type-btn span:last-child{font-family:Segoe UI,system-ui,sans-serif;font-size:13px;color:#bdc3c7}.char-type-btn.selected span:last-child{color:#3498db}.color-selector{display:flex;gap:10px;flex-wrap:wrap}.color-btn{width:36px;height:36px;border:3px solid transparent;border-radius:50%;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #0000004d}.color-btn:hover{transform:scale(1.1)}.color-btn.selected{border-color:#fff;box-shadow:0 0 0 2px #ffffff4d,0 2px 8px #0000004d}.settings-footer{padding:16px 20px;border-top:1px solid rgba(61,90,128,.5);display:flex;justify-content:flex-end}.settings-save-btn{background:linear-gradient(135deg,#3498db,#2980b9);border:none;border-radius:8px;padding:10px 24px;color:#fff;font-family:Segoe UI,system-ui,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.settings-save-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3498db66}.settings-save-btn:active{transform:translateY(0)}.settings-btn-wrapper{position:relative;display:inline-flex}.settings-hint-popover{position:absolute;bottom:calc(100% + 12px);right:0;z-index:1000;animation:popoverAppear .4s ease-out,popoverPulse 2s ease-in-out infinite .4s}.settings-hint-popover.hidden{display:none}.hint-content{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 32px #667eea66,0 0 0 1px #ffffff1a;white-space:nowrap;cursor:pointer;transition:transform .2s,box-shadow .2s}.hint-content:hover{transform:scale(1.02);box-shadow:0 10px 40px #667eea80,0 0 0 1px #fff3}.hint-icon{font-size:18px;animation:sparkle 1.5s ease-in-out infinite}.hint-text{color:#fff;font-family:Segoe UI,system-ui,sans-serif;font-size:13px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.2)}.hint-arrow{position:absolute;bottom:-6px;right:16px;width:12px;height:12px;background:linear-gradient(135deg,#764ba2,#764ba2);transform:rotate(45deg);box-shadow:2px 2px 4px #0000001a}@keyframes popoverAppear{0%{opacity:0;transform:translateY(10px) scale(.9)}50%{transform:translateY(-5px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes popoverPulse{0%,to{transform:translateY(0);box-shadow:0 8px 32px #667eea66}50%{transform:translateY(-3px);box-shadow:0 12px 40px #667eea99}}@keyframes sparkle{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-10deg)}50%{transform:scale(1) rotate(0)}75%{transform:scale(1.2) rotate(10deg)}}.settings-btn.hint-active{animation:buttonGlow 1.5s ease-in-out infinite}@keyframes buttonGlow{0%,to{box-shadow:0 0 #667eea00}50%{box-shadow:0 0 0 8px #667eea4d,0 0 20px #667eea66}}