@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap";
:root{--color-void:#080810;--color-abyss:#0d0d1a;--color-surface:#12121f;--color-surface-2:#1a1a2e;--color-surface-3:#22223a;--color-border:#7c3aed33;--color-border-bright:#7c3aed80;--color-arcane:#7c3aed;--color-arcane-light:#a855f7;--color-arcane-glow:#7c3aed4d;--color-gold:#f59e0b;--color-gold-light:#fbbf24;--color-gold-glow:#f59e0b4d;--color-crimson:#dc2626;--color-emerald:#10b981;--color-ice:#06b6d4;--color-text-primary:#e8e8f0;--color-text-secondary:#99b;--color-text-muted:#557;--color-text-gold:#f59e0b;--rarity-common:#889;--rarity-rare:#3b82f6;--rarity-epic:#a855f7;--rarity-legendary:#f59e0b;--font-display:"Cinzel", serif;--font-body:"Inter", sans-serif;--font-mono:"Roboto Mono", monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--shadow-arcane:0 0 20px #7c3aed66;--shadow-gold:0 0 20px #f59e0b66;--shadow-panel:0 8px 32px #0009;--shadow-card:0 4px 16px #0006;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--color-void);color:var(--color-text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-body);background:0 0;border:none}input,textarea{font-family:var(--font-body)}img{max-width:100%;display:block}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-abyss)}::-webkit-scrollbar-thumb{background:var(--color-arcane);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-arcane-light)}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2}h1{letter-spacing:.05em;font-size:clamp(2.5rem,6vw,5rem)}h2{letter-spacing:.03em;font-size:clamp(1.8rem,3vw,2.8rem)}h3{letter-spacing:.02em;font-size:clamp(1.2rem,2vw,1.6rem)}h4{letter-spacing:.05em;text-transform:uppercase;font-size:1rem}.text-gold{color:var(--color-gold)}.text-arcane{color:var(--color-arcane-light)}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.text-center{text-align:center}.text-mono{font-family:var(--font-mono);font-size:.85em}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.w-full{width:100%}.h-full{height:100%}.glow-text{text-shadow:0 0 10px #7c3aedcc,0 0 30px #7c3aed66,0 0 60px #7c3aed33}.glow-gold{text-shadow:0 0 10px #f59e0bcc,0 0 30px #f59e0b66,0 0 60px #f59e0b33}.glass-panel{-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#12121fcc}.glass-panel-bright{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--color-border-bright);border-radius:var(--radius-lg);box-shadow:var(--shadow-arcane);background:#1a1a2ee6}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;transition:all var(--transition-base);font-size:.85rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";opacity:0;transition:opacity var(--transition-fast);background:#ffffff0d;position:absolute;inset:0}.btn:hover:before{opacity:1}.btn-primary{background:linear-gradient(135deg, var(--color-arcane), #5b21b6);color:#fff;border:1px solid #7c3aed80;box-shadow:0 4px 15px #7c3aed66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #7c3aed99}.btn-primary:active{transform:translateY(0)}.btn-gold{background:linear-gradient(135deg, var(--color-gold), #d97706);color:var(--color-void);border:1px solid #f59e0b80;box-shadow:0 4px 15px #f59e0b4d}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 25px #f59e0b80}.btn-ghost{color:var(--color-text-secondary);border:1px solid var(--color-border);background:0 0}.btn-ghost:hover{border-color:var(--color-arcane);color:var(--color-arcane-light)}.btn-danger{color:#f87171;background:#dc262626;border:1px solid #dc26264d}.btn-danger:hover{background:#dc26264d}.btn-sm{padding:var(--space-2) var(--space-4);font-size:.75rem}.btn-lg{padding:var(--space-4) var(--space-8);font-size:1rem}.input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);background:#ffffff0d;outline:none;font-size:.95rem}.input:focus{border-color:var(--color-arcane);box-shadow:0 0 0 3px #7c3aed26}.input::placeholder{color:var(--color-text-muted)}.rarity-common{--rarity-color:var(--rarity-common)}.rarity-rare{--rarity-color:var(--rarity-rare)}.rarity-epic{--rarity-color:var(--rarity-epic)}.rarity-legendary{--rarity-color:var(--rarity-legendary)}.quest-card{background:var(--color-surface-2);border:1px solid var(--rarity-color,var(--rarity-common));border-radius:var(--radius-lg);padding:var(--space-5);transition:all var(--transition-base);position:relative;overflow:hidden}.quest-card:before{content:"";background:radial-gradient(ellipse at top left, color-mix(in srgb, var(--rarity-color,var(--rarity-common)) 15%, transparent), transparent 60%);pointer-events:none;position:absolute;inset:0}.quest-card:hover{box-shadow:0 8px 30px color-mix(in srgb, var(--rarity-color,var(--rarity-common)) 30%, transparent);transform:translateY(-3px)}.stat-bar-track{background:#ffffff14;border-radius:3px;height:6px;overflow:hidden}.stat-bar-fill{border-radius:3px;height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}.stat-bar-hp{background:linear-gradient(90deg,#dc2626,#ef4444)}.stat-bar-xp{background:linear-gradient(90deg, var(--color-arcane), var(--color-arcane-light))}.stat-bar-gold{background:linear-gradient(90deg, #d97706, var(--color-gold))}.spinner{border:2px solid #7c3aed4d;border-top-color:var(--color-arcane-light);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px #7c3aed4d}50%{box-shadow:0 0 30px #7c3aedb3,0 0 60px #7c3aed4d}}@keyframes pulseGoldGlow{0%,to{text-shadow:0 0 10px #f59e0b80}50%{text-shadow:0 0 25px #f59e0b,0 0 50px #f59e0b80}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes runeRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes memoryPulse{0%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}to{opacity:.6;transform:scale(1)}}.animate-fadeIn{animation:.5s forwards fadeIn}.animate-fadeInUp{animation:.6s forwards fadeInUp}.animate-float{animation:4s ease-in-out infinite float}.animate-pulseGlow{animation:2s ease-in-out infinite pulseGlow}.animate-pulseGold{animation:2s ease-in-out infinite pulseGoldGlow}.animate-memoryPulse{animation:3s ease-in-out infinite memoryPulse}.divider{background:linear-gradient(90deg, transparent, var(--color-arcane), transparent);height:1px;margin:var(--space-4) 0}.badge{padding:2px var(--space-2);border-radius:var(--radius-sm);letter-spacing:.05em;text-transform:uppercase;align-items:center;font-size:.7rem;font-weight:600;display:inline-flex}.badge-arcane{color:var(--color-arcane-light);background:#7c3aed33;border:1px solid #7c3aed4d}.badge-gold{color:var(--color-gold);background:#f59e0b26;border:1px solid #f59e0b4d}.badge-red{color:#f87171;background:#dc262626;border:1px solid #dc26264d}.badge-green{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.tag{padding:2px var(--space-3);border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:.72rem;font-family:var(--font-mono);background:#ffffff0d;border-radius:100px;display:inline-flex}.json-block{background:var(--color-void);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:.8rem;line-height:1.7;overflow-x:auto}.json-key{color:var(--color-arcane-light)}.json-string{color:#86efac}.json-number{color:var(--color-gold)}.json-boolean{color:var(--color-ice)}.dialogue-overlay{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080810d9;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.dialogue-box{background:var(--color-surface-2);border:1px solid var(--color-border-bright);border-radius:var(--radius-2xl);width:min(700px,90vw);max-height:90vh;box-shadow:var(--shadow-arcane), 0 32px 64px #000c;animation:.4s fadeInUp;overflow-y:auto}.map-location{background:var(--color-arcane);border:2px solid var(--color-arcane-light);cursor:pointer;width:14px;height:14px;transition:all var(--transition-fast);border-radius:50%;position:absolute}.map-location:after{content:"";border:1px solid var(--color-arcane);border-radius:50%;animation:2s ease-in-out infinite pulseGlow;position:absolute;inset:-4px}.map-location:hover{box-shadow:var(--shadow-arcane);transform:scale(1.4)}.archetype-card{background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);cursor:pointer;transition:all var(--transition-base);text-align:center;position:relative;overflow:hidden}.archetype-card:before{content:"";opacity:0;transition:opacity var(--transition-base);background:radial-gradient(at 50% 0,#7c3aed26,#0000 60%);position:absolute;inset:0}.archetype-card:hover{border-color:var(--color-arcane);box-shadow:var(--shadow-arcane);transform:translateY(-4px)}.archetype-card:hover:before{opacity:1}.archetype-card.selected{border-color:var(--color-arcane-light);box-shadow:var(--shadow-arcane);background:var(--color-surface-3)}.archetype-card.selected:before{opacity:1}.memory-recall{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);color:var(--color-arcane-light);font-size:.8rem;font-family:var(--font-mono);background:#7c3aed1a;border:1px solid #7c3aed4d;border-radius:100px;display:flex}.memory-recall-dot{background:var(--color-arcane-light);border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite memoryPulse}@media (max-width:768px){.game-layout{flex-direction:column}.game-sidebar{display:none}.dialogue-box{width:96vw}.btn{min-height:44px}.btn-sm{min-height:36px;padding:var(--space-2) var(--space-3)}.archetype-grid-mobile{grid-template-columns:repeat(2,1fr)!important}.quest-card{padding:var(--space-3)}.dialogue-inner-pad{padding:1rem!important}}@media (max-width:480px){.archetype-grid-mobile{grid-template-columns:1fr!important}.glow-text{text-shadow:0 0 8px #7c3aedb3,0 0 20px #7c3aed4d}}.mobile-tab-bar{display:none}@media (max-width:768px){.mobile-tab-bar{z-index:50;-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--color-border);padding:var(--space-2) var(--space-4);padding-bottom:max(var(--space-2), env(safe-area-inset-bottom));gap:var(--space-2);background:#080810f7;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-tab-bar-btn{padding:var(--space-2) var(--space-1);border-radius:var(--radius-md);color:var(--color-text-muted);font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;min-height:52px;font-size:.65rem;font-weight:500;display:flex}.mobile-tab-bar-btn .tab-icon{font-size:1.3rem;line-height:1}.mobile-tab-bar-btn.active{color:var(--color-arcane-light);background:#7c3aed1f}.mobile-tab-bar-btn.active .tab-icon{filter:drop-shadow(0 0 6px #7c3aedcc)}.game-mobile-content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}