@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-void: #151030;--bg-abyss: #1a1438;--bg-panel: #201a45;--bg-panel-alt: #261f52;--bg-header: #2e2665;--bg-input: #181240;--bg-hover: #322878;--bg-active: #3d3088;--bg-button: #4a38a0;--bg-button-hover: #5c48b8;--border-color: #4a3a90;--border-subtle: #382a70;--border-glow: #8855dd;--accent: #c88aff;--accent-hover: #dda8ff;--accent-dim: #8855dd;--accent-glow: rgba(200, 138, 255, .2);--accent-glow-strong: rgba(200, 138, 255, .4);--arcane-teal: #55ffe5;--arcane-teal-dim: #2ab8a0;--arcane-teal-glow: rgba(85, 255, 229, .15);--ember: #ff8855;--ember-dim: #cc6633;--ember-glow: rgba(255, 136, 85, .15);--text-primary: #eee8ff;--text-secondary: #bbb0dd;--text-dim: #8878b8;--text-bright: #ffffff;--success: #55ffb0;--warning: #ffd055;--error: #ff5577;--frame-gold: #ffd700;--frame-silver: #c0c0c0;--frame-bronze: #cd7f32;--frame-red: #ff4444;--frame-blue: #4488ff;--frame-purple: #aa44ff;--frame-green: #44ff88;--frame-rainbow: linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff);--frame-fire: linear-gradient(135deg, #ff4400, #ff8800, #ffcc00);--radius: 6px;--radius-lg: 10px;--transition: .15s ease;--font-display: "Cinzel", serif;--font-body: "Crimson Text", serif}html,body{height:100%;width:100%;overflow:hidden;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--text-primary);background:var(--bg-void)}#app{height:100%;width:100%}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}@keyframes drift{0%,to{transform:translateY(0) translate(0) scale(1);opacity:.3}25%{transform:translateY(-30px) translate(10px) scale(1.1);opacity:.6}50%{transform:translateY(-15px) translate(-15px) scale(.9);opacity:.4}75%{transform:translateY(-40px) translate(5px) scale(1.05);opacity:.5}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px var(--accent-glow),0 0 40px #b06aff0d}50%{box-shadow:0 0 30px var(--accent-glow-strong),0 0 60px #b06aff1a}}@keyframes runeFloat{0%,to{opacity:.08;transform:rotate(0)}50%{opacity:.15;transform:rotate(180deg)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.login-screen{display:flex;align-items:center;justify-content:center;height:100%;background:radial-gradient(ellipse at 30% 20%,rgba(200,138,255,.18) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(85,255,229,.12) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(255,136,85,.08) 0%,transparent 60%),var(--bg-void);position:relative;overflow:hidden}.login-screen:before{content:"⬡◇△☽✦⬡◇☽△✦";position:absolute;font-size:24px;color:var(--accent);opacity:.1;letter-spacing:60px;word-spacing:80px;top:15%;left:-50px;animation:runeFloat 12s ease-in-out infinite;pointer-events:none;white-space:nowrap}.login-screen:after{content:"✦△⬡☽◇✦△⬡☽◇";position:absolute;font-size:20px;color:var(--arcane-teal);opacity:.08;letter-spacing:50px;word-spacing:70px;bottom:20%;right:-50px;animation:runeFloat 16s ease-in-out infinite reverse;pointer-events:none;white-space:nowrap}.login-container{width:440px;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;animation:pulseGlow 6s ease-in-out infinite;position:relative}.login-container:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--arcane-teal),var(--accent),transparent);animation:shimmer 4s linear infinite;background-size:200% 100%}.login-header{padding:36px 32px 12px;text-align:center}.login-header h1{font-family:var(--font-display);font-size:32px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--arcane-teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:4px;text-transform:uppercase;margin-bottom:6px}.login-header p{color:var(--text-dim);font-size:14px;font-style:italic;letter-spacing:2px}.login-tabs{display:flex;border-bottom:1px solid var(--border-color)}.login-tab{flex:1;padding:10px;text-align:center;cursor:pointer;color:var(--text-secondary);background:transparent;border:none;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;transition:var(--transition)}.login-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.login-tab.active{color:var(--accent);border-bottom:2px solid var(--accent);background:var(--accent-glow)}.login-form{padding:24px 32px 32px}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px}.form-group input{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:15px;transition:var(--transition);outline:none}.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow),0 0 20px var(--accent-glow)}.form-group input::placeholder{color:var(--text-dim);font-style:italic}.login-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent-dim),var(--accent));color:#fff;border:none;border-radius:var(--radius);font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;transition:var(--transition);text-transform:uppercase;letter-spacing:3px}.login-btn:hover{background:linear-gradient(135deg,var(--accent),var(--accent-hover));box-shadow:0 0 20px var(--accent-glow-strong)}.login-btn:disabled{opacity:.5;cursor:not-allowed}.login-error{color:var(--error);font-size:13px;margin-bottom:12px;padding:8px 12px;background:#ff3a5a14;border-radius:var(--radius);border:1px solid rgba(255,58,90,.15);display:none}.login-error.visible{display:block}.game-screen{display:flex;height:100%;width:100%;background:radial-gradient(ellipse at 20% 80%,rgba(200,138,255,.12) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(85,255,229,.08) 0%,transparent 50%),var(--bg-void)}.left-nav{width:230px;min-width:230px;background:var(--bg-panel);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto;position:relative}.left-nav:after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,var(--accent-dim),transparent 30%,transparent 70%,var(--arcane-teal-dim));opacity:.4}.nav-brand{padding:18px 16px 14px;border-bottom:1px solid var(--border-color);text-align:center;position:relative}.nav-brand:after{content:"";position:absolute;bottom:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--accent-dim),transparent)}.nav-brand h1{font-family:var(--font-display);font-size:16px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--arcane-teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;text-transform:uppercase}.nav-brand .brand-sub{font-size:10px;color:var(--text-dim);letter-spacing:4px;text-transform:uppercase;margin-top:2px;font-style:italic}.nav-user{padding:12px 14px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:10px;background:var(--accent-glow)}.nav-user-avatar{font-size:22px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--accent-dim);background:var(--bg-void)}.nav-user-name{font-family:var(--font-display);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:1px}.nav-user-logout{margin-left:auto;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:var(--radius);transition:var(--transition)}.nav-user-logout:hover{color:var(--error);background:#ff3a5a1a}.nav-sections{flex:1;overflow-y:auto;padding:6px 0}.nav-header{display:flex;align-items:center;padding:9px 14px;cursor:pointer;color:var(--accent);font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;-webkit-user-select:none;user-select:none;transition:var(--transition);opacity:.85}.nav-header:hover{opacity:1;background:var(--bg-hover)}.nav-header .arrow{margin-right:8px;font-size:8px;transition:transform .2s;color:var(--accent-dim)}.nav-header.collapsed .arrow{transform:rotate(-90deg)}.nav-items{overflow:hidden;transition:max-height .2s ease;max-height:500px}.nav-items.collapsed{max-height:0}.nav-item{display:flex;align-items:center;padding:7px 14px 7px 28px;cursor:pointer;color:var(--text-secondary);font-size:14px;transition:var(--transition);border-left:2px solid transparent}.nav-item:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-item.active{color:var(--accent-hover);background:var(--accent-glow);border-left-color:var(--accent)}.nav-item .nav-icon{margin-right:8px;font-size:14px;width:18px;text-align:center}.content-area{flex:1;background:var(--bg-abyss);overflow-y:auto;padding:24px;min-width:0}.content-area h2{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:20px;color:var(--text-bright);letter-spacing:2px}.content-area h3{font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:12px;color:var(--text-primary);letter-spacing:1px}.chat-panel{width:320px;min-width:320px;background:var(--bg-panel);border-left:1px solid var(--border-color);display:flex;flex-direction:column;position:relative}.chat-panel:before{content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,var(--arcane-teal-dim),transparent 30%,transparent 70%,var(--accent-dim));opacity:.4}.chat-header{padding:12px 16px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;background:var(--arcane-teal-glow)}.chat-header h3{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--arcane-teal);text-transform:uppercase;letter-spacing:2px}.chat-online{font-size:12px;color:var(--success);display:flex;align-items:center;gap:5px;font-style:italic}.chat-online:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block;box-shadow:0 0 6px var(--success);animation:drift 3s ease-in-out infinite}.chat-messages{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:1px}.chat-msg{padding:3px 0;font-size:14px;line-height:1.4;word-wrap:break-word}.chat-msg-system{color:var(--text-dim);font-style:italic;font-size:12px;padding:3px 8px;border-left:2px solid var(--accent-dim);margin:2px 0}.chat-msg-avatar{font-size:13px;margin-right:3px}.chat-msg-name{font-family:var(--font-display);font-weight:600;font-size:12px;margin-right:5px;cursor:default;letter-spacing:.5px}.chat-msg-time{color:var(--text-dim);font-size:10px;margin-right:5px}.chat-msg-content{color:var(--text-primary)}.chat-input-area{padding:10px 12px;border-top:1px solid var(--border-color);background:var(--bg-panel-alt)}.chat-input-wrapper{display:flex;gap:8px}.chat-input{flex:1;padding:9px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none;transition:var(--transition)}.chat-input:focus{border-color:var(--arcane-teal);box-shadow:0 0 0 2px var(--arcane-teal-glow),0 0 12px var(--arcane-teal-glow)}.chat-input::placeholder{color:var(--text-dim);font-style:italic}.chat-send-btn{padding:9px 14px;background:linear-gradient(135deg,var(--arcane-teal-dim),var(--arcane-teal));color:#fff;border:none;border-radius:var(--radius);font-family:var(--font-display);font-weight:700;cursor:pointer;transition:var(--transition);font-size:11px;letter-spacing:1px;text-transform:uppercase}.chat-send-btn:hover{box-shadow:0 0 12px var(--arcane-teal-glow);filter:brightness(1.2)}.tab-section{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;position:relative}.tab-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-dim),transparent);opacity:.5;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.tab-section h3{font-family:var(--font-display);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle);font-size:13px;letter-spacing:1.5px;text-transform:uppercase}.stat-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.stat-row:last-child{border-bottom:none}.stat-label{color:var(--text-secondary);font-size:14px}.stat-value{color:var(--text-primary);font-weight:600;font-size:14px}.friend-item{display:flex;align-items:center;padding:10px 12px;background:var(--bg-panel-alt);border-radius:var(--radius);margin-bottom:8px;gap:10px;border:1px solid var(--border-subtle);transition:var(--transition)}.friend-item:hover{border-color:var(--accent-dim)}.friend-avatar{font-size:20px}.friend-name{flex:1;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.5px}.friend-status{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-family:var(--font-display)}.friend-status.accepted{color:var(--success)}.friend-status.pending{color:var(--warning)}.friend-actions{display:flex;gap:4px}.btn-small{padding:4px 10px;font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:var(--transition);background:var(--bg-button);color:var(--text-primary);text-transform:uppercase}.btn-small:hover{background:var(--bg-button-hover)}.btn-small.accept{border-color:var(--success);color:var(--success)}.btn-small.accept:hover{background:#3ff5a01a}.btn-small.danger{border-color:var(--error);color:var(--error)}.btn-small.danger:hover{background:#ff3a5a1a}.btn-small.primary{border-color:var(--accent);color:var(--accent)}.btn-small.primary:hover{background:var(--accent-glow);box-shadow:0 0 8px var(--accent-glow)}.customize-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin-top:12px}.customize-option{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--bg-panel-alt);border:2px solid var(--border-color);border-radius:var(--radius);cursor:pointer;font-size:24px;transition:var(--transition)}.customize-option:hover{border-color:var(--accent);background:var(--bg-hover);transform:scale(1.08);box-shadow:0 0 12px var(--accent-glow)}.customize-option.selected{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 16px var(--accent-glow-strong)}.color-option{width:48px;height:48px;border-radius:50%;border:3px solid var(--border-color);cursor:pointer;transition:var(--transition)}.color-option:hover{transform:scale(1.12);border-color:var(--text-secondary);box-shadow:0 0 12px #ffffff1a}.color-option.selected{border-color:var(--text-bright);box-shadow:0 0 16px #fff3}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:10px;margin-top:12px}.frame-preview{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:var(--transition);background:var(--bg-panel-alt)}.frame-preview:hover{transform:scale(1.12);box-shadow:0 0 12px var(--accent-glow)}.frame-preview.selected{box-shadow:0 0 16px #fff3}.frame-preview.frame-none{border:2px solid var(--border-color)}.frame-preview.frame-gold{border:3px solid var(--frame-gold);box-shadow:0 0 8px #ffd70033}.frame-preview.frame-silver{border:3px solid var(--frame-silver)}.frame-preview.frame-bronze{border:3px solid var(--frame-bronze)}.frame-preview.frame-red{border:3px solid var(--frame-red);box-shadow:0 0 8px #f443}.frame-preview.frame-blue{border:3px solid var(--frame-blue);box-shadow:0 0 8px #48f3}.frame-preview.frame-purple{border:3px solid var(--frame-purple);box-shadow:0 0 8px #a4f3}.frame-preview.frame-green{border:3px solid var(--frame-green);box-shadow:0 0 8px #4f83}.frame-preview.frame-rainbow{border:3px solid transparent;background-image:var(--frame-rainbow);background-clip:padding-box}.frame-preview.frame-fire{border:3px solid transparent;background-image:var(--frame-fire);background-clip:padding-box}.frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px;margin-top:12px}.frame-label{font-family:var(--font-display);font-size:10px;text-align:center;margin-top:4px;color:var(--text-secondary);text-transform:capitalize;letter-spacing:.5px}.avatar-with-frame{display:inline-flex;align-items:center;justify-content:center;border-radius:50%}.pm-container{display:flex;flex-direction:column;gap:8px}.pm-message{padding:8px 12px;background:var(--bg-panel-alt);border-radius:var(--radius);font-size:14px;border-left:2px solid var(--accent-dim)}.pm-message .pm-sender{font-family:var(--font-display);font-weight:600;font-size:12px;margin-right:6px;letter-spacing:.5px}.pm-message .pm-time{color:var(--text-dim);font-size:11px}.pm-input-area{display:flex;gap:8px;margin-top:12px}.pm-input-area input{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none}.pm-input-area input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.inline-form{display:flex;gap:8px;margin-bottom:16px}.inline-form input{flex:1;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none}.inline-form input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.form-feedback{font-size:13px;margin-top:4px;padding:4px 8px}.form-feedback.error{color:var(--error)}.form-feedback.success{color:var(--success)}.faq-item{margin-bottom:14px}.faq-question{font-family:var(--font-display);font-weight:600;color:var(--accent);margin-bottom:4px;font-size:14px;letter-spacing:.5px}.faq-answer{color:var(--text-secondary);font-size:14px;padding-left:12px;border-left:2px solid var(--accent-dim);font-style:italic}.empty-state{text-align:center;padding:40px 20px;color:var(--text-dim)}.empty-state .empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}.empty-state p{font-size:14px;font-style:italic}.arcane-divider{text-align:center;color:var(--accent-dim);font-size:10px;letter-spacing:8px;padding:8px 0;opacity:.4}.admin-panel h2{color:var(--ember)}.admin-stats{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.admin-stat-card{background:var(--bg-panel-alt);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 20px;flex:1;min-width:120px;text-align:center}.admin-stat-card .stat-number{font-family:var(--font-display);font-size:28px;font-weight:900;color:var(--accent);display:block}.admin-stat-card .stat-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px;font-family:var(--font-display);margin-top:4px}.admin-user-table{width:100%;border-collapse:collapse;font-size:13px}.admin-user-table th{font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);padding:10px 8px;text-align:left;border-bottom:2px solid var(--border-color);background:var(--bg-panel-alt);position:sticky;top:0}.admin-user-table td{padding:8px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);vertical-align:middle}.admin-user-table tr:hover td{background:var(--bg-hover)}.admin-user-table .role-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.role-badge.owner{background:#f853;color:var(--ember);border:1px solid var(--ember-dim)}.role-badge.admin{background:#c88aff33;color:var(--accent);border:1px solid var(--accent-dim)}.role-badge.user{background:#55ffe51a;color:var(--arcane-teal);border:1px solid var(--arcane-teal-dim)}.admin-search{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none;transition:var(--transition);margin-bottom:16px}.admin-search:focus{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember-glow),0 0 12px var(--ember-glow)}.admin-search::placeholder{color:var(--text-dim);font-style:italic}.nav-section-admin .nav-header,.nav-item.admin-item{color:var(--ember)}.nav-item.admin-item.active{color:var(--ember);background:var(--ember-glow);border-left-color:var(--ember)}.nav-item.admin-item:hover{color:var(--ember);background:var(--ember-glow)}