body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#0f172a;color:#f1f5f9}.app-container{display:flex;flex-direction:column;height:100vh;max-width:1400px;margin:0 auto;background-color:#0f172a;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#1e293bb3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1);z-index:10}.logo-section{display:flex;align-items:center;gap:10px}.logo-icon{color:#a855f7;width:28px;height:28px}.logo-section h1{font-size:1.25rem;font-weight:800;margin:0;background:linear-gradient(to right,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.badge{font-size:.75rem;background:#ec489933;color:#f472b6;padding:2px 8px;border-radius:9999px;border:1px solid rgba(236,72,153,.3)}.header-actions{display:flex;align-items:center;gap:12px}.high-score-badge{display:flex;align-items:center;gap:6px;background:#eab30826;border:1px solid rgba(234,179,8,.3);color:#eab308;padding:6px 12px;border-radius:8px;font-size:.85rem;font-weight:700}.trophy-icon{animation:bounce 2s infinite}.sound-btn{display:flex;align-items:center;gap:6px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:#cbd5e1;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.85rem}.sound-btn:hover{background:#ffffff1a;color:#fff}.main-layout{display:flex;flex:1;overflow:hidden}.sidebar{width:380px;background:#1e293b;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow-y:auto;padding:20px;gap:16px}.section-title{display:flex;align-items:center;gap:8px;color:#e2e8f0;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:8px;margin-top:10px}.section-title h2{font-size:.95rem;margin:0;font-weight:700}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.template-chip{display:flex;flex-direction:column;align-items:center;gap:4px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;cursor:pointer;transition:all .2s}.template-chip:hover{background:#a855f726;border-color:#a855f7;transform:translateY(-2px)}.tpl-avatar{font-size:1.4rem}.tpl-name{font-size:.7rem;color:#cbd5e1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.creator-form{display:flex;flex-direction:column;gap:12px;background:#0f172a66;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.form-row{display:flex;gap:10px}.form-group{display:flex;flex-direction:column;gap:6px;flex:1}.avatar-select{flex:0 0 100px}.form-group label{font-size:.75rem;color:#94a3b8;font-weight:600}.form-group input,.form-group textarea,.form-group select{background:#0f172a;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;padding:8px 12px;font-size:.85rem;outline:none;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#a855f7}.form-group textarea{resize:none;height:60px}.radio-group{display:flex;gap:8px}.radio-group label{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;background:#0f172a;border:1px solid rgba(255,255,255,.1);padding:6px;border-radius:6px;cursor:pointer;font-size:.75rem;color:#94a3b8;transition:all .2s}.radio-group label.active{background:#a855f726;border-color:#a855f7;color:#e9d5ff}.radio-group input{display:none}.form-buttons{display:flex;gap:8px;margin-top:6px}.btn-primary{flex:1;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;border:none;padding:8px 12px;border-radius:8px;font-weight:600;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 12px #a855f74d;transition:transform .1s,opacity .2s}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#cbd5e1;padding:8px 12px;border-radius:8px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:4px}.btn-secondary:hover{background:#ffffff1a}.char-list-section{display:flex;flex-direction:column;gap:12px;flex:1}.char-grid{display:flex;flex-direction:column;gap:8px;overflow-y:auto}.char-card{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:10px;cursor:pointer;position:relative;transition:all .2s}.char-card:hover{background:#ffffff0f;border-color:#ffffff26}.char-card.active{background:#a855f71a;border-color:#a855f7;box-shadow:0 0 12px #a855f726}.char-avatar{font-size:1.8rem;background:#ffffff0d;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%}.char-info{flex:1;min-width:0}.char-name-row{display:flex;align-items:center;gap:6px}.char-name{font-weight:700;font-size:.9rem;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-tag{font-size:.65rem;background:#3b82f6;color:#fff;padding:1px 4px;border-radius:4px}.char-desc{font-size:.75rem;color:#94a3b8;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-char-btn{background:transparent;border:none;color:#ef4444;opacity:.4;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s}.delete-char-btn:hover{opacity:1;background:#ef44441a}.chat-container{flex:1;display:flex;flex-direction:column;background:#0f172a;position:relative}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#1e293b;border-bottom:1px solid rgba(255,255,255,.08)}.active-char-profile{display:flex;align-items:center;gap:14px}.profile-avatar{font-size:2.2rem;background:#ffffff0d;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid #a855f7}.profile-name-row{display:flex;align-items:center;gap:8px}.profile-name-row h3{margin:0;font-size:1.05rem;font-weight:800}.profile-pref{font-size:.7rem;background:#ffffff1a;padding:2px 6px;border-radius:4px;color:#cbd5e1}.profile-style{margin:4px 0 0;font-size:.75rem;color:#94a3b8}.mode-selector{display:flex;background:#0f172a;padding:4px;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.mode-btn{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:#64748b;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.mode-btn.active.casual{background:#10b981;color:#fff;box-shadow:0 2px 8px #10b9814d}.mode-btn.active.battle{background:#ef4444;color:#fff;box-shadow:0 2px 8px #ef44444d}.battle-meter-container{background:#ef444414;border-bottom:1px solid rgba(239,68,68,.2);padding:12px 24px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.battle-meter-labels{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;color:#ef4444;margin-bottom:6px}.vs-badge{background:#ef4444;color:#fff;padding:1px 8px;border-radius:9999px;display:flex;align-items:center;gap:4px}.battle-bar-outer{height:10px;background:#1e293b;border-radius:9999px;position:relative;overflow:visible}.battle-bar-inner{height:100%;background:linear-gradient(to right,#3b82f6,#ef4444);border-radius:9999px;transition:width .5s cubic-bezier(.4,0,.2,1)}.battle-pointer{position:absolute;top:-5px;transform:translate(-50%);font-size:1rem;transition:left .5s cubic-bezier(.4,0,.2,1)}.battle-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.battle-tip{margin:0;font-size:.75rem;color:#cbd5e1}.reset-battle-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:4px 10px;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s}.reset-battle-btn:hover{background:#ef4444;border-color:#ef4444}.chat-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}.system-message-bubble{align-self:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:6px 16px;border-radius:9999px;font-size:.75rem;color:#94a3b8;max-width:80%;text-align:center}.message-row{display:flex;gap:12px;max-width:75%}.user-row{align-self:flex-end}.bot-row{align-self:flex-start}.msg-avatar{font-size:1.5rem;background:#ffffff0d;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;align-self:flex-end}.message-bubble{padding:12px 16px;border-radius:16px;position:relative;box-shadow:0 4px 12px #0000001a}.user-bubble{background:#a855f7;color:#fff;border-bottom-right-radius:4px}.bot-bubble{background:#1e293b;color:#f1f5f9;border-bottom-left-radius:4px}.battle-style{border:1px solid #ef4444;background:linear-gradient(135deg,#1e293b,#ef44440d)}.msg-text{margin:0;font-size:.9rem;line-height:1.5;word-break:break-all}.damage-tag{display:inline-block;background:#ef444433;color:#fca5a5;font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:6px}.msg-time{display:block;font-size:.65rem;color:#fff6;margin-top:6px;text-align:right}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 20px}.typing-bubble .dot{width:6px;height:6px;background-color:#94a3b8;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.typing-bubble .dot:nth-child(1){animation-delay:-.32s}.typing-bubble .dot:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.chat-input-area{padding:16px 24px;background:#1e293b;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:12px}.chat-input-area input{flex:1;background:#0f172a;border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#fff;padding:12px 16px;font-size:.9rem;outline:none;transition:border-color .2s}.chat-input-area input:focus{border-color:#a855f7}.send-btn{background:#a855f7;color:#fff;border:none;padding:0 20px;border-radius:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.send-btn:hover:not(:disabled){background:#9333ea;transform:translateY(-1px)}.send-btn:disabled{background:#334155;color:#64748b;cursor:not-allowed}.send-btn.battle-send{background:#ef4444;box-shadow:0 4px 12px #ef44444d}.send-btn.battle-send:hover:not(:disabled){background:#dc2626}