:root{--color-primary: #4a90e2;--color-primary-dark: #357abd;--color-primary-light: #6ba3e8;--color-primary-hover: #5a9ff2;--color-secondary: #2b6cb0;--color-secondary-dark: #1e4d7a;--color-secondary-light: #3d7bc2;--color-success: #28a745;--color-success-dark: #218838;--color-success-light: #34ce57;--color-warning: #ffc107;--color-warning-dark: #e0a800;--color-warning-light: #ffcd39;--color-danger: #dc3545;--color-danger-dark: #c82333;--color-danger-light: #e4606d;--color-info: #17a2b8;--color-info-dark: #138496;--color-info-light: #3ab0c5;--color-bg-primary: #1a1a2e;--color-bg-secondary: #16213e;--color-bg-accent: #0f3460;--color-bg-panel: #2d3748;--color-bg-overlay: rgba(0, 0, 0, .7);--color-text-primary: #f7fafc;--color-text-secondary: #e2e8f0;--color-text-tertiary: #cbd5e0;--color-text-disabled: #888888;--color-text-accent: #ffd700;--color-border: #4a5568;--color-border-light: #718096;--color-border-dark: #2d3748;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-heading: "Cinzel", "Times New Roman", serif;--font-family-mono: "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .25);--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, .1);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--transition-fast: .15s ease-in-out;--transition-base: .2s ease-in-out;--transition-slow: .3s ease-in-out;--z-base: 0;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px;--health-color: var(--color-danger);--mana-color: var(--color-primary);--experience-color: var(--color-success);--gold-color: var(--color-text-accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;border-radius:var(--radius-md);transition:all var(--transition-base);background-color:var(--color-bg-panel);color:var(--color-text-primary);border-color:var(--color-border)}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:var(--color-text-primary);border-color:var(--color-primary-dark)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary));border-color:var(--color-primary)}.btn-secondary{background-color:var(--color-bg-panel);color:var(--color-text-primary);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-bg-accent);border-color:var(--color-border-light)}.btn-success{background-color:var(--color-success);color:var(--color-text-primary);border-color:var(--color-success-dark)}.btn-success:hover:not(:disabled){background-color:var(--color-success-light);border-color:var(--color-success)}.btn-danger{background-color:var(--color-danger);color:var(--color-text-primary);border-color:var(--color-danger-dark)}.btn-danger:hover:not(:disabled){background-color:var(--color-danger-light);border-color:var(--color-danger)}.btn-warning{background-color:var(--color-warning);color:#000;border-color:var(--color-warning-dark)}.btn-warning:hover:not(:disabled){background-color:var(--color-warning-light);border-color:var(--color-warning)}.btn-ghost{background-color:transparent;color:var(--color-text-primary);border-color:transparent}.btn-ghost:hover:not(:disabled){background-color:#ffffff1a}.btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm)}.btn-md{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base)}.btn-lg{padding:var(--space-md) var(--space-lg);font-size:var(--font-size-lg)}.btn-block{display:flex;width:100%}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;margin:0}.btn-icon-left{margin-right:var(--space-xs)}.btn-icon-right{margin-left:var(--space-xs)}.btn-loading{position:relative;color:transparent;pointer-events:none}.btn-loading:after{content:"";position:absolute;top:50%;left:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:btn-spin .6s linear infinite}@keyframes btn-spin{to{transform:rotate(360deg)}}.card{display:flex;flex-direction:column;background-color:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border);font-family:var(--font-family-heading);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.card-body{padding:var(--space-lg);flex:1}.card-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-sm)}.card-bordered{border:2px solid var(--color-border)}.card-shadow{box-shadow:var(--shadow-lg)}.card-shadow-lg{box-shadow:var(--shadow-xl)}.card-sm .card-header,.card-sm .card-body,.card-sm .card-footer{padding:var(--space-sm) var(--space-md)}.card-lg .card-header,.card-lg .card-body,.card-lg .card-footer{padding:var(--space-lg) var(--space-xl)}@media (max-width: 768px){.card-header,.card-body,.card-footer{padding:var(--space-md)}}.modal-backdrop{position:fixed;inset:0;background-color:var(--color-bg-overlay);backdrop-filter:blur(4px);z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:var(--space-md);animation:fade-in var(--transition-base)}.modal{position:relative;background-color:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:90vw;max-height:90vh;width:100%;display:flex;flex-direction:column;z-index:var(--z-modal);animation:slide-up var(--transition-slow);overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);border-bottom:1px solid var(--color-border)}.modal-title{font-family:var(--font-family-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0}.modal-close{background:none;border:none;color:var(--color-text-secondary);font-size:var(--font-size-2xl);cursor:pointer;padding:var(--space-xs);line-height:1;transition:color var(--transition-fast);display:flex;align-items:center;justify-content:center}.modal-close:hover{color:var(--color-text-primary)}.modal-body{padding:var(--space-lg);overflow-y:auto;flex:1}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-sm);padding:var(--space-lg);border-top:1px solid var(--color-border)}.modal-sm{max-width:400px}.modal-md{max-width:600px}.modal-lg{max-width:800px}.modal-xl{max-width:1200px}@media (max-width: 768px){.modal{max-width:95vw;max-height:95vh}.modal-header,.modal-body,.modal-footer{padding:var(--space-md)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:var(--color-bg-secondary)}.modal-body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-sm)}.modal-body::-webkit-scrollbar-thumb:hover{background:var(--color-border-light)}.input{display:block;width:100%;padding:var(--space-sm) var(--space-md);font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-base)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #4a90e21a}.input:disabled{opacity:.6;cursor:not-allowed;background-color:var(--color-bg-secondary)}.input::placeholder{color:var(--color-text-tertiary)}.input.error{border-color:var(--color-danger)}.input.success{border-color:var(--color-success)}.input.warning{border-color:var(--color-warning)}.input-group{display:flex;flex-direction:column;gap:var(--space-xs)}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.input-error{font-size:var(--font-size-xs);color:var(--color-danger);margin-top:var(--space-xs)}.input-help{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:var(--space-xs)}.select{display:block;width:100%;padding:var(--space-sm) var(--space-md);padding-right:var(--space-2xl);font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f7fafc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-md) center;background-size:12px;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);appearance:none}.select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #4a90e21a}.select:disabled{opacity:.6;cursor:not-allowed;background-color:var(--color-bg-secondary)}.select.error{border-color:var(--color-danger)}.select.success{border-color:var(--color-success)}.checkbox-group{display:flex;flex-direction:column;gap:var(--space-sm)}.checkbox{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer;user-select:none}.checkbox-input{width:18px;height:18px;margin:0;cursor:pointer;appearance:none;background-color:var(--color-bg-panel);border:2px solid var(--color-border);border-radius:var(--radius-sm);position:relative;transition:all var(--transition-base)}.checkbox-input:checked{border-color:var(--color-primary);background-color:var(--color-primary)}.checkbox-input:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-55%) rotate(45deg);width:5px;height:10px;border-right:2px solid #ffffff;border-bottom:2px solid #ffffff}.checkbox-input:focus{outline:none;box-shadow:0 0 0 3px #4a90e21a}.checkbox-input:disabled{opacity:.6;cursor:not-allowed}.checkbox-label{font-size:var(--font-size-base);color:var(--color-text-primary);cursor:pointer}.checkbox-input:disabled+.checkbox-label{opacity:.6;cursor:not-allowed}.checkbox-group.horizontal{flex-direction:row;flex-wrap:wrap}.radio-group{display:flex;flex-direction:column;gap:var(--space-sm)}.radio{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer;user-select:none}.radio-input{width:18px;height:18px;margin:0;cursor:pointer;appearance:none;background-color:var(--color-bg-panel);border:2px solid var(--color-border);border-radius:50%;position:relative;transition:all var(--transition-base)}.radio-input:checked{border-color:var(--color-primary)}.radio-input:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-color:var(--color-primary);border-radius:50%}.radio-input:focus{outline:none;box-shadow:0 0 0 3px #4a90e21a}.radio-input:disabled{opacity:.6;cursor:not-allowed}.radio-label{font-size:var(--font-size-base);color:var(--color-text-primary);cursor:pointer}.radio-input:disabled+.radio-label{opacity:.6;cursor:not-allowed}.radio-group.horizontal{flex-direction:row;flex-wrap:wrap}.tabs{display:flex;flex-direction:column}.tabs-list{display:flex;gap:var(--space-xs);border-bottom:2px solid var(--color-border);margin-bottom:var(--space-md)}.tab{padding:var(--space-sm) var(--space-md);font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--transition-base);position:relative;bottom:-2px}.tab:hover{color:var(--color-text-primary)}.tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.tab:disabled{opacity:.5;cursor:not-allowed}.tab-content{display:none}.tab-content.active{display:block}.accordion{display:flex;flex-direction:column;gap:var(--space-xs)}.accordion-item{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-bg-panel)}.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);background-color:transparent;border:none;cursor:pointer;width:100%;text-align:left;transition:all var(--transition-base)}.accordion-header:hover{background-color:var(--color-bg-secondary)}.accordion-header:focus{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary)}.accordion-icon{transition:transform var(--transition-base);font-size:var(--font-size-lg)}.accordion-item.active .accordion-icon{transform:rotate(180deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height var(--transition-slow) ease-out}.accordion-item.active .accordion-content{max-height:1000px}.accordion-body{padding:0 var(--space-md) var(--space-md);color:var(--color-text-secondary)}.tooltip{position:relative;display:inline-block}.tooltip-trigger{cursor:help}.tooltip-content{position:absolute;z-index:var(--z-tooltip);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--color-text-primary);background-color:var(--color-bg-accent);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition-base);max-width:200px;white-space:normal}.tooltip:hover .tooltip-content,.tooltip.active .tooltip-content{opacity:1}.tooltip-content.top{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--space-xs)}.tooltip-content.bottom{top:100%;left:50%;transform:translate(-50%);margin-top:var(--space-xs)}.tooltip-content.left{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--space-xs)}.tooltip-content.right{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--space-xs)}.badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);color:var(--color-text-primary);background-color:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:var(--radius-full);white-space:nowrap}.badge.primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.badge.success{background-color:var(--color-success);border-color:var(--color-success);color:#fff}.badge.warning{background-color:var(--color-warning);border-color:var(--color-warning);color:var(--color-bg-primary)}.badge.danger{background-color:var(--color-danger);border-color:var(--color-danger);color:#fff}.badge.info{background-color:var(--color-info);border-color:var(--color-info);color:#fff}.badge.secondary{background-color:var(--color-bg-secondary);border-color:var(--color-border);color:var(--color-text-secondary)}.badge.small{padding:2px var(--space-xs);font-size:10px}.badge.large{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.progress{width:100%;height:8px;background-color:var(--color-bg-secondary);border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-bar{height:100%;background-color:var(--color-primary);border-radius:var(--radius-full);transition:width var(--transition-slow);position:relative}.progress-bar.success{background-color:var(--color-success)}.progress-bar.warning{background-color:var(--color-warning)}.progress-bar.danger{background-color:var(--color-danger)}.progress-bar.info{background-color:var(--color-info)}.progress.small{height:4px}.progress.large{height:12px}.progress-with-label{display:flex;flex-direction:column;gap:var(--space-xs)}.progress-label{display:flex;justify-content:space-between;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.progress-value{font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.spinner.small{width:16px;height:16px;border-width:2px}.spinner.large{width:32px;height:32px;border-width:4px}.spinner.success{border-top-color:var(--color-success)}.spinner.warning{border-top-color:var(--color-warning)}.spinner.danger{border-top-color:var(--color-danger)}.spinner-container{display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}.spinner-container.inline{display:inline-flex;padding:0;margin:0 var(--space-sm)}:root{--primary-bg: #1a1a2e;--secondary-bg: #16213e;--accent-bg: #0f3460;--panel-bg: #2d3748;--border-color: #4a5568;--text-primary: #f7fafc;--text-secondary: #e2e8f0;--text-accent: #ffd700;--button-bg: #2b6cb0;--button-hover: #3182ce;--health-color: #dc3545;--mana-color: #007bff;--success-color: #28a745;--warning-color: #ffc107;font-family:Cinzel,Times New Roman,serif;line-height:1.5;font-weight:400;color:var(--text-primary);background-color:var(--primary-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:100vw;min-height:100vh;background:linear-gradient(135deg,var(--primary-bg) 0%,var(--secondary-bg) 100%);overflow:hidden}#app{width:100vw;height:100vh;position:relative;display:flex;flex-direction:column}#game-container{flex:1;position:relative;background-color:var(--primary-bg);border:2px solid var(--border-color);border-radius:8px;overflow:hidden}#game-container canvas{display:block;width:100%;height:100%}.ui-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.main-menu-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;z-index:1000;font-family:Cinzel,Times New Roman,serif}.main-menu-header{text-align:center;margin-bottom:40px}.game-title-main{font-size:3.5em;color:var(--text-accent);margin:0 0 10px;text-shadow:2px 2px 4px rgba(0,0,0,.5);font-weight:700}.game-subtitle{font-size:1.3em;color:var(--text-secondary);margin:0 0 5px}.game-tagline{font-size:1.1em;color:var(--text-secondary);margin:0;opacity:.8}.main-menu-container{display:flex;gap:60px;max-width:1200px;width:90%;background:#2d3748f2;border:2px solid var(--border-color);border-radius:15px;padding:40px;box-shadow:0 15px 40px #00000080}.main-menu-left,.main-menu-right{flex:1}.section-title{color:var(--text-accent);font-size:1.8em;margin-bottom:25px;text-align:center;border-bottom:2px solid var(--border-color);padding-bottom:10px}.features-list{display:flex;flex-direction:column;gap:20px}.feature-item{display:flex;align-items:center;gap:15px;padding:15px;background:#16213e99;border:1px solid var(--border-color);border-radius:8px;transition:all .3s ease}.feature-item:hover{background:#16213ecc;border-color:var(--text-accent);transform:translate(5px)}.feature-icon{font-size:2em;min-width:40px;text-align:center}.feature-content h3{color:var(--text-primary);margin:0 0 5px;font-size:1.2em}.feature-content p{color:var(--text-secondary);margin:0;font-size:.9em;line-height:1.4}.menu-buttons{display:flex;flex-direction:column;gap:15px}.menu-button{display:flex;align-items:center;gap:15px;padding:20px;background:linear-gradient(145deg,var(--button-bg),var(--button-hover));color:#fff;border:none;border-radius:10px;cursor:pointer;font-family:inherit;font-size:1.1em;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #0000004d;text-align:left}.menu-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0006;background:linear-gradient(145deg,var(--button-hover),var(--button-bg))}.menu-button.primary{background:linear-gradient(145deg,#e74c3c,#c0392b)}.menu-button.primary:hover{background:linear-gradient(145deg,#c0392b,#e74c3c)}.button-icon{font-size:1.5em;min-width:30px}.button-text{font-weight:700;font-size:1.2em}.button-subtitle{font-size:.9em;opacity:.8;font-weight:400}.version-info{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid var(--border-color)}.version-info p{color:var(--text-secondary);font-size:.9em;margin:0}@media (max-width: 768px){.main-menu-container{flex-direction:column;gap:30px;padding:20px}.game-title-main{font-size:2.5em}.main-menu-left{order:2}.main-menu-right{order:1}.btn,button,.menu-button,.action-btn,.movement-btn{min-height:44px;min-width:44px;padding:.875rem 1.25rem}.menu-buttons{flex-direction:column;gap:1rem}.menu-button{width:100%;padding:1rem}}.ui-container>*{pointer-events:auto}.hud-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column}.party-panel{position:absolute;top:10px;left:10px;width:300px;background:#2d3748e6;border:2px solid var(--border-color);border-radius:8px;padding:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.party-panel h3{margin:0 0 10px;color:var(--text-accent);font-size:18px;text-align:center;border-bottom:1px solid var(--border-color);padding-bottom:5px}.party-members{display:flex;flex-direction:column;gap:8px}.party-member{background:#16213ecc;border:1px solid var(--border-color);border-radius:4px;padding:8px;cursor:pointer;transition:all .2s ease}.party-member:hover{background:#16213e;border-color:var(--text-accent);transform:translate(2px)}.member-name{font-weight:700;color:var(--text-primary);font-size:14px}.member-class{font-size:12px;color:var(--text-secondary);margin:2px 0}.member-hp,.member-mp{font-size:11px;margin:1px 0}.member-hp{color:var(--health-color)}.member-mp{color:var(--mana-color)}.action-panel{position:absolute;bottom:10px;left:10px;width:300px;background:#2d3748e6;border:2px solid var(--border-color);border-radius:8px;padding:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.action-panel h3{margin:0 0 10px;color:var(--text-accent);font-size:18px;text-align:center;border-bottom:1px solid var(--border-color);padding-bottom:5px}.exploration-actions,.combat-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.message-log{position:absolute;bottom:10px;right:10px;width:400px;height:200px;background:#2d3748e6;border:2px solid var(--border-color);border-radius:8px;padding:10px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overflow-y:auto;font-family:Courier New,monospace;font-size:12px}.message{margin:2px 0;padding:2px 4px;border-radius:2px}.message-info{color:var(--text-secondary)}.message-combat{color:var(--warning-color);background:#ffc1071a}.message-system{color:var(--success-color);background:#28a7451a}.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.subscription-overlay{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.subscription-panel{background:linear-gradient(145deg,#2d3748f2,#1a1a2ef2);border:2px solid var(--accent-bg);border-radius:20px;box-shadow:0 20px 40px #0000004d,0 0 30px #ffd7001a;max-width:900px;max-height:90vh;overflow-y:auto;padding:2rem;animation:slideInScale .6s ease-out}.subscription-header{text-align:center;margin-bottom:2rem;border-bottom:2px solid var(--accent-bg);padding-bottom:1.5rem}.game-title-large{font-size:3rem;font-weight:700;background:linear-gradient(45deg,var(--text-accent),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 .5rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.subscription-subtitle{font-size:1.2rem;color:var(--text-secondary);margin:0;font-style:italic}.subscription-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}.features-section h2{color:var(--text-accent);font-size:1.8rem;margin-bottom:1.5rem;text-align:center}.feature-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}.feature-item{background:#2d374899;border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;text-align:center;transition:all .3s ease}.feature-item:hover{background:#2d3748cc;border-color:var(--text-accent);transform:translateY(-2px);box-shadow:0 8px 16px #0003}.feature-icon{font-size:2.5rem;margin-bottom:1rem;display:block}.feature-item h3{color:var(--text-accent);font-size:1.2rem;margin:0 0 .5rem}.feature-item p{color:var(--text-secondary);font-size:.95rem;margin:0;line-height:1.4}.signup-section{background:#1a1a2ecc;border:1px solid var(--accent-bg);border-radius:15px;padding:2rem}.signup-section h3{color:var(--text-accent);font-size:1.6rem;margin:0 0 1.5rem;text-align:center}.subscription-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:var(--text-primary);font-size:.95rem}.form-group input[type=text],.form-group input[type=email]{background:#2d3748cc;border:2px solid var(--border-color);border-radius:8px;padding:.75rem 1rem;color:var(--text-primary);font-size:1rem;transition:all .3s ease}.form-group input[type=text]:focus,.form-group input[type=email]:focus{border-color:var(--text-accent);background:#2d3748;outline:none;box-shadow:0 0 10px #ffd70033}.checkbox-group{flex-direction:row!important;align-items:center;gap:.75rem!important}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;color:var(--text-secondary)}.checkbox-label input[type=checkbox]{appearance:none;width:18px;height:18px;border:2px solid var(--border-color);border-radius:4px;background:#2d3748cc;cursor:pointer;transition:all .3s ease}.checkbox-label input[type=checkbox]:checked{background:var(--text-accent);border-color:var(--text-accent)}.checkbox-label input[type=checkbox]:checked:after{content:"✓";display:block;text-align:center;color:var(--primary-bg);font-weight:700;font-size:12px;line-height:14px}.field-error{color:var(--health-color);font-size:.8rem;margin-top:.25rem;display:none}.form-buttons{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px}.btn-primary{background:linear-gradient(45deg,var(--button-bg),var(--button-hover));color:#fff;border:2px solid transparent}.btn-primary:hover:not(:disabled){background:linear-gradient(45deg,var(--button-hover),var(--text-accent));transform:translateY(-2px);box-shadow:0 8px 16px #0003}.btn-primary:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-secondary{background:#2d3748cc;border:2px solid var(--border-color);color:var(--text-secondary)}.btn-secondary:hover:not(:disabled){background:#2d3748;border-color:var(--text-accent);color:var(--text-primary)}.btn-large{padding:1rem 2rem;font-size:1.1rem}.btn-loading{display:none}.success-panel{text-align:center;max-width:600px}.success-header{margin-bottom:2rem}.success-icon{font-size:4rem;margin-bottom:1rem;display:block}.success-header h1{color:var(--text-accent);font-size:2.5rem;margin:0 0 .5rem}.success-subtitle{color:var(--text-secondary);font-size:1.1rem;margin:0;font-style:italic}.benefits-section{margin-bottom:2rem;text-align:left}.benefits-section h2{color:var(--text-accent);font-size:1.5rem;margin-bottom:1rem;text-align:center}.benefits-list{display:flex;flex-direction:column;gap:1rem}.benefit-item{display:flex;align-items:center;gap:1rem;background:#2d374899;padding:1rem;border-radius:8px;border:1px solid var(--border-color)}.benefit-icon{font-size:1.5rem;flex-shrink:0}.success-actions{text-align:center}.success-note{color:var(--text-secondary);font-size:.9rem;margin:1rem 0 0;font-style:italic}.form-error{background:#dc35451a;border:1px solid #dc3545;color:#dc3545;padding:.75rem;border-radius:6px;font-size:.9rem;margin-top:1rem;text-align:center}.form-success{background:#28a7451a;border:1px solid #28a745;color:#28a745;padding:.75rem;border-radius:6px;font-size:.9rem;margin-top:1rem;text-align:center}.form-actions{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.login-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color);text-align:center}.login-prompt{color:var(--text-secondary);margin-bottom:1rem;font-size:.9rem}.btn-link{background:transparent;border:none;color:var(--text-accent);cursor:pointer;text-decoration:underline;padding:.5rem;font-size:.9rem;transition:color .3s ease}.btn-link:hover{color:var(--text-primary)}.login-panel{max-width:450px}.login-content{padding:0}.login-options{margin-top:1.5rem;text-align:center;padding-top:1rem;border-top:1px solid var(--border-color)}.form-group input[type=password]{background:#2d3748cc;border:2px solid var(--border-color);border-radius:8px;padding:.75rem 1rem;color:var(--text-primary);font-size:1rem;transition:all .3s ease}.form-group input[type=password]:focus{border-color:var(--text-accent);background:#2d3748;outline:none;box-shadow:0 0 10px #ffd70033}.success-content{display:flex;flex-direction:column;gap:2rem;text-align:left}.success-message{text-align:center;margin-bottom:2rem}.success-message h2{color:var(--text-accent);font-size:1.8rem;margin:1rem 0 .5rem}.success-message p{color:var(--text-secondary);font-size:1.1rem;margin:0}.success-benefits h3{color:var(--text-accent);font-size:1.4rem;margin-bottom:1rem;text-align:center}.benefits-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.benefits-list li{background:#2d374899;padding:.75rem 1rem;border-radius:6px;border-left:4px solid var(--text-accent);color:var(--text-secondary);font-size:.95rem}.success-actions{text-align:center;margin-top:1rem}.feature-details h3{color:var(--text-accent);font-size:1.1rem;margin:0 0 .5rem;font-weight:600}.feature-details p{color:var(--text-secondary);font-size:.9rem;margin:0;line-height:1.4}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}@media (max-width: 768px){.subscription-content{grid-template-columns:1fr;gap:2rem}.login-panel,.success-panel{margin:1rem;padding:1.5rem}.form-actions{gap:.75rem}.benefits-list{gap:.5rem}}.char-creation-panel{background:var(--panel-bg);border:2px solid var(--border-color);border-radius:12px;width:90vw;max-width:800px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px #00000080;position:relative}.char-creation-header{background:linear-gradient(135deg,var(--accent-bg),var(--secondary-bg));padding:20px;border-bottom:2px solid var(--border-color);border-radius:10px 10px 0 0;display:flex;justify-content:space-between;align-items:center}.char-creation-header h2{margin:0;color:var(--text-accent);font-size:1.8rem;font-weight:700}.close-btn{background:var(--health-color);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:#c82333;transform:scale(1.1)}.char-creation-content{padding:24px;display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start}.char-form{display:flex;flex-direction:column;gap:20px}.form-section{display:flex;flex-direction:column;gap:8px}.form-section label{font-weight:700;color:var(--text-accent);font-size:1.1rem}.form-section input,.form-section select{padding:10px;border:2px solid var(--border-color);border-radius:6px;background:var(--secondary-bg);color:var(--text-primary);font-size:1rem;transition:border-color .3s ease}.form-section input:focus,.form-section select:focus{outline:none;border-color:var(--text-accent);box-shadow:0 0 0 2px #ffd70033}.attributes-section{background:var(--secondary-bg);border:2px solid var(--border-color);border-radius:8px;padding:20px;margin-top:16px}.attributes-section h3{margin:0 0 16px;color:var(--text-accent);text-align:center;font-size:1.3rem}.points-display{background:var(--accent-bg);color:var(--text-accent);padding:8px 16px;border-radius:20px;text-align:center;font-weight:700;font-size:1.1rem;margin-bottom:20px;border:2px solid var(--text-accent)}.attribute-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-color)}.attribute-row:last-child{border-bottom:none}.attr-label{flex:1;font-weight:700;color:var(--text-secondary);min-width:100px}.attr-btn{width:32px;height:32px;border:2px solid var(--border-color);background:var(--button-bg);color:#fff;border-radius:4px;cursor:pointer;font-size:1.1rem;font-weight:700;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.attr-btn:hover:not(:disabled){background:var(--button-hover);transform:scale(1.1)}.attr-btn:disabled{background:#666;cursor:not-allowed;opacity:.5}.attr-value{min-width:32px;text-align:center;font-weight:700;font-size:1.2rem;color:var(--text-accent);margin:0 12px}.char-preview{background:var(--secondary-bg);border:2px solid var(--border-color);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0}.portrait-preview{width:128px;height:128px;border:3px solid var(--text-accent);border-radius:8px;background:var(--primary-bg);display:flex;align-items:center;justify-content:center;margin:0 auto;overflow:hidden}.portrait-preview img{width:100%;height:100%;object-fit:cover}.portrait-placeholder{color:var(--text-secondary);font-size:.9rem;text-align:center}.preview-stats{display:flex;flex-direction:column;gap:8px}.preview-stats>div{display:flex;justify-content:space-between;padding:6px 12px;background:var(--accent-bg);border-radius:4px;font-weight:700}.char-creation-actions{grid-column:1 / -1;display:flex;gap:16px;justify-content:center;padding-top:20px;border-top:2px solid var(--border-color)}.create-btn,.cancel-btn{padding:12px 32px;border:2px solid;border-radius:6px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;min-width:140px}.create-btn{background:var(--success-color);border-color:var(--success-color);color:#fff}.create-btn:hover:not(:disabled){background:#218838;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.create-btn:disabled{background:#666;border-color:#666;cursor:not-allowed;opacity:.6}.cancel-btn{background:transparent;border-color:var(--border-color);color:var(--text-secondary)}.cancel-btn:hover{background:var(--border-color);color:var(--text-primary);transform:translateY(-2px)}.character-face{width:64px;height:64px;border-radius:4px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}@media (max-width: 768px){.char-creation-content{grid-template-columns:1fr;gap:20px}.char-creation-panel{width:95vw;margin:20px auto}.attribute-row{flex-wrap:wrap;gap:8px}.attr-label{min-width:80px;flex:none}}.character-card{background:linear-gradient(145deg,#2d3748f2,#1a1a2ef2);border:2px solid var(--accent-bg);border-radius:20px;box-shadow:0 20px 40px #0000004d,0 0 30px #ffd7001a;transition:all .4s ease;overflow:hidden;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.character-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 60px #0006,0 0 50px #ffd70033;border-color:var(--text-accent)}.character-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--text-accent),#fff,var(--text-accent));opacity:0;transition:opacity .3s ease}.character-card:hover:before{opacity:1}.filled-card{background:linear-gradient(145deg,#2d3748fa,#1a1a2efa);border-color:var(--success-color)}.filled-card:hover{border-color:var(--text-accent);box-shadow:0 25px 50px #00000059,0 0 40px #28a7454d}.empty-card{background:linear-gradient(145deg,#1a1a2e99,#0f0f1ecc);border:2px dashed var(--border-color);cursor:pointer}.empty-card:hover{background:linear-gradient(145deg,#2d3748cc,#1a1a2ee6);border-color:var(--text-accent);border-style:solid}.character-header{background:linear-gradient(135deg,rgba(255,215,0,.1) 0%,transparent 100%);padding:1.5rem;border-bottom:1px solid rgba(255,215,0,.2);display:flex;align-items:center;gap:1rem;position:relative}.character-header:after{content:"";position:absolute;bottom:0;left:1rem;right:1rem;height:1px;background:linear-gradient(90deg,transparent,var(--text-accent),transparent)}.slot-number{background:linear-gradient(45deg,var(--accent-bg),var(--button-bg));color:var(--text-accent);font-weight:700;font-size:1.1rem;padding:.5rem .8rem;border-radius:12px;border:1px solid var(--text-accent);box-shadow:0 4px 8px #0003;text-shadow:0 1px 2px rgba(0,0,0,.5)}.character-avatar{width:60px;height:60px;border-radius:50%;border:3px solid var(--text-accent);box-shadow:0 0 20px #ffd7004d;background:linear-gradient(45deg,var(--accent-bg),var(--secondary-bg));display:flex;align-items:center;justify-content:center;font-size:1.8rem;position:relative;overflow:hidden}.character-avatar:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--text-accent),#fff,var(--text-accent));border-radius:50%;z-index:-1;animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.5}50%{opacity:1}}.character-body{padding:1.5rem;flex:1}.character-name{color:var(--text-accent);font-size:1.4rem;font-weight:700;margin:0 0 .5rem;text-shadow:0 2px 4px rgba(0,0,0,.5);background:linear-gradient(45deg,var(--text-accent),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.character-details{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}.character-detail{background:#0f34604d;padding:.8rem;border-radius:10px;border:1px solid rgba(255,215,0,.2);text-align:center;transition:all .3s ease}.character-detail:hover{background:#0f346080;border-color:var(--text-accent);transform:translateY(-2px)}.character-detail-label{color:var(--text-secondary);font-size:.8rem;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px}.character-detail-value{color:var(--text-primary);font-weight:700;font-size:1rem}.character-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}.stat-item{background:#1a1a2ecc;padding:.6rem;border-radius:8px;border:1px solid var(--border-color);text-align:center;transition:all .3s ease}.stat-item:hover{background:#2d3748cc;border-color:var(--text-accent);transform:scale(1.05)}.stat-label{color:var(--text-secondary);font-size:.7rem;margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.3px}.stat-value{color:var(--text-primary);font-weight:700;font-size:1.1rem}.character-actions{padding:1rem 1.5rem;background:linear-gradient(135deg,rgba(15,52,96,.2) 0%,transparent 100%);border-top:1px solid rgba(255,215,0,.1);display:flex;gap:.8rem}.character-actions .btn{flex:1;padding:.6rem 1rem;font-size:.9rem;border-radius:10px;position:relative;overflow:hidden}.character-actions .btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.character-actions .btn:hover:before{left:100%}.empty-content{padding:3rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:200px;justify-content:center}.empty-slot-number{background:linear-gradient(45deg,#1a1a2ecc,#2d374899);color:var(--text-secondary);font-weight:700;padding:.5rem .8rem;border-radius:12px;border:2px dashed var(--border-color);margin-bottom:1rem}.add-character-icon{font-size:3rem;color:var(--border-color);transition:all .3s ease;background:linear-gradient(45deg,var(--border-color),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.empty-card:hover .add-character-icon{color:var(--text-accent);background:linear-gradient(45deg,var(--text-accent),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transform:scale(1.1)}.empty-title{color:var(--text-secondary);font-size:1.2rem;font-weight:600;margin:0;transition:color .3s ease}.empty-card:hover .empty-title{color:var(--text-primary)}.empty-subtitle{color:var(--border-color);font-size:.9rem;margin:0;transition:color .3s ease}.empty-card:hover .empty-subtitle{color:var(--text-secondary)}@media (max-width: 768px){.character-card{border-radius:15px;box-shadow:0 15px 30px #00000040,0 0 20px #ffd70014}.character-header{padding:1rem;flex-direction:column;text-align:center;gap:.8rem}.character-body{padding:1rem}.character-details{grid-template-columns:1fr;gap:.6rem}.character-stats{grid-template-columns:repeat(2,1fr);gap:.6rem}.character-actions{padding:1rem;flex-direction:column;gap:.6rem}.empty-content{padding:2rem 1rem;min-height:150px}.add-character-icon{font-size:2.5rem}}@keyframes slideInScale{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.character-card{animation:slideInScale .6s ease-out}.character-card[data-class=Paladin]{box-shadow:0 20px 40px #0000004d,0 0 30px #ffd70026}.character-card[data-class=Sorcerer]{box-shadow:0 20px 40px #0000004d,0 0 30px #8a2be226}.character-card[data-class=Archer]{box-shadow:0 20px 40px #0000004d,0 0 30px #228b2226}.character-card[data-class=Thief]{box-shadow:0 20px 40px #0000004d,0 0 30px #69696926}.char-creation-panel{background:linear-gradient(145deg,#2d3748fa,#1a1a2efa);border:2px solid var(--accent-bg);border-radius:25px;box-shadow:0 30px 60px #0006,0 0 50px #ffd70026;width:95vw;max-width:1200px;max-height:95vh;overflow-y:auto;position:relative;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);animation:slideInScale .6s ease-out}.char-creation-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--text-accent),#fff,var(--text-accent));border-radius:25px 25px 0 0}.char-creation-header{background:linear-gradient(135deg,rgba(255,215,0,.1) 0%,transparent 100%);padding:2rem;border-bottom:2px solid rgba(255,215,0,.2);text-align:center;position:relative}.char-creation-header:after{content:"";position:absolute;bottom:0;left:2rem;right:2rem;height:1px;background:linear-gradient(90deg,transparent,var(--text-accent),transparent)}.char-creation-content{padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}.creation-section{background:linear-gradient(145deg,#0f34604d,#1a1a2e80);border:2px solid rgba(255,215,0,.2);border-radius:18px;padding:2rem;margin-bottom:2rem;position:relative;transition:all .4s ease;overflow:hidden}.creation-section:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--text-accent),transparent);opacity:0;transition:opacity .3s ease}.creation-section:hover{border-color:var(--text-accent);transform:translateY(-5px);box-shadow:0 15px 30px #0000004d,0 0 25px #ffd70033}.creation-section:hover:before{opacity:1}.creation-section h3{color:var(--text-accent);font-size:1.4rem;font-weight:700;margin:0 0 1.5rem;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5);background:linear-gradient(45deg,var(--text-accent),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.name-input-container{display:flex;gap:1rem;align-items:center}.hero-name-input{flex:1;padding:1rem 1.5rem;border:2px solid var(--border-color);border-radius:12px;background:linear-gradient(145deg,#1a1a2ecc,#2d374899);color:var(--text-primary);font-size:1.1rem;font-weight:600;transition:all .3s ease;box-shadow:inset 0 2px 4px #0000004d}.hero-name-input:focus{outline:none;border-color:var(--text-accent);box-shadow:0 0 20px #ffd7004d,inset 0 2px 4px #0000004d;transform:scale(1.02)}.btn-generate-name{padding:1rem 1.5rem;background:linear-gradient(45deg,var(--accent-bg),var(--button-bg));border:2px solid var(--text-accent);border-radius:12px;color:var(--text-primary);font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap;position:relative;overflow:hidden}.btn-generate-name:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn-generate-name:hover{background:linear-gradient(45deg,var(--button-hover),var(--text-accent));transform:translateY(-2px) scale(1.05);box-shadow:0 8px 16px #0000004d}.btn-generate-name:hover:before{left:100%}.race-grid,.class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.race-card,.class-card{position:relative;transition:all .3s ease}.race-card input[type=radio],.class-card input[type=radio]{position:absolute;opacity:0;cursor:pointer}.race-card-label,.class-card-label{display:block;background:linear-gradient(145deg,#1a1a2ecc,#2d374899);border:2px solid var(--border-color);border-radius:15px;padding:1.5rem;cursor:pointer;transition:all .4s ease;text-align:center;position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:.5rem}.race-card-label:before,.class-card-label:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent,rgba(255,215,0,.1),transparent);opacity:0;transition:opacity .3s ease}.race-card-label:hover,.class-card-label:hover{border-color:var(--text-accent);transform:translateY(-5px) scale(1.02);box-shadow:0 10px 20px #0000004d,0 0 20px #ffd70033}.race-card-label:hover:before,.class-card-label:hover:before{opacity:1}.race-card input[type=radio]:checked+.race-card-label,.class-card input[type=radio]:checked+.class-card-label{background:linear-gradient(145deg,#ffd70033,#2d3748cc);border-color:var(--text-accent);box-shadow:0 0 30px #ffd70066,inset 0 0 20px #ffd7001a;transform:scale(1.05)}.race-icon,.class-icon{font-size:2.5rem;margin-bottom:.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.race-name,.class-name{font-weight:700;font-size:1.2rem;color:var(--text-primary);margin-bottom:.5rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}.race-bonuses,.class-description{font-size:.9rem;color:var(--text-secondary);line-height:1.3;opacity:.9}.attribute-mode-selector{display:flex;gap:1rem;margin-bottom:2rem;justify-content:center}.radio-option{display:flex;align-items:center;gap:.5rem;background:linear-gradient(145deg,#1a1a2ecc,#2d374899);border:2px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.radio-option:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent,rgba(255,215,0,.1),transparent);opacity:0;transition:opacity .3s ease}.radio-option:hover{border-color:var(--text-accent);transform:translateY(-2px);box-shadow:0 5px 10px #0003}.radio-option:hover:before{opacity:1}.radio-option input[type=radio]:checked+span{color:var(--text-accent);font-weight:700}.radio-option input[type=radio]:checked{accent-color:var(--text-accent)}.attributes-display{background:linear-gradient(145deg,#1a1a2e99,#0f0f1ecc);border:2px solid rgba(255,215,0,.3);border-radius:15px;padding:2rem}.attributes-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:1.5rem;font-style:italic}.attributes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.attribute-item{background:#0f346066;border:1px solid rgba(255,215,0,.3);border-radius:10px;padding:1rem;text-align:center;transition:all .3s ease}.attribute-item:hover{background:#0f346099;border-color:var(--text-accent);transform:translateY(-2px) scale(1.02)}.attribute-icon{font-size:1.5rem;margin-bottom:.5rem;display:block}.attribute-details{display:flex;flex-direction:column;gap:.3rem}.attribute-name{font-weight:700;color:var(--text-primary)}.attribute-value{font-size:1.2rem;font-weight:700;color:var(--text-accent);text-shadow:0 1px 2px rgba(0,0,0,.5)}.attributes-editor{background:linear-gradient(145deg,#1a1a2e99,#0f0f1ecc);border:2px solid rgba(255,215,0,.3);border-radius:15px;padding:2rem}.attributes-manual-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}.manual-attribute-row{display:flex;align-items:center;justify-content:space-between;background:#0f34604d;border:1px solid rgba(255,215,0,.2);border-radius:10px;padding:1rem;transition:all .3s ease}.manual-attribute-row:hover{background:#0f346080;border-color:var(--text-accent)}.manual-attr-name{font-weight:700;color:var(--text-primary);flex:1}.manual-attr-controls{display:flex;align-items:center;gap:1rem}.manual-attr-btn{width:35px;height:35px;border:2px solid var(--border-color);background:linear-gradient(45deg,var(--button-bg),var(--button-hover));color:#fff;border-radius:8px;cursor:pointer;font-size:1.2rem;font-weight:700;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.manual-attr-btn:hover:not(:disabled){background:linear-gradient(45deg,var(--button-hover),var(--text-accent));transform:scale(1.1);box-shadow:0 4px 8px #0003}.manual-attr-btn:disabled{background:#666;cursor:not-allowed;opacity:.5;transform:none}.simplified-preview-section{background:linear-gradient(145deg,#1a1a2e99,#0f0f1ecc);border:2px solid rgba(255,215,0,.3);border-radius:15px;padding:1.5rem;margin-bottom:2rem}.simplified-preview{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.simplified-preview .preview-vitals{width:100%;max-width:300px}.attribute-showcase{background:#0f346066;border:1px solid rgba(255,215,0,.3);border-radius:10px;padding:1rem;text-align:center;transition:all .3s ease;display:flex;flex-direction:column;gap:.5rem}.attribute-showcase:hover{background:#0f346099;border-color:var(--text-accent);transform:translateY(-2px) scale(1.02)}.attr-label{font-weight:700;color:var(--text-primary);font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}.attr-value-container{display:flex;flex-direction:column;align-items:center;gap:.3rem}.attr-value{font-size:1.3rem;font-weight:700;color:var(--text-accent);text-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1}.bonus-part{font-size:.85em;font-weight:700;margin-left:.2em}.bonus-part.positive{color:#4ade80;text-shadow:0 0 4px rgba(74,222,128,.5)}.bonus-part.negative{color:#f87171;text-shadow:0 0 4px rgba(248,113,113,.5)}.attributes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:stretch}.attribute-showcase{min-height:80px;justify-content:center}.attribute-editor-item{background:#0f34604d;border:1px solid rgba(255,215,0,.2);border-radius:10px;padding:1rem;display:flex;align-items:center;justify-content:space-between;transition:all .3s ease;gap:1rem}.attribute-editor-item:hover{background:#0f346080;border-color:var(--text-accent)}.attr-controls{display:flex;align-items:center;gap:1rem}.attr-btn{width:35px;height:35px;border:2px solid var(--border-color);background:linear-gradient(45deg,var(--button-bg),var(--button-hover));color:#fff;border-radius:8px;cursor:pointer;font-size:1.2rem;font-weight:700;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.attr-btn:hover:not(:disabled){background:linear-gradient(45deg,var(--button-hover),var(--text-accent));transform:scale(1.1);box-shadow:0 4px 8px #0003}.attr-btn:disabled{background:#666;cursor:not-allowed;opacity:.5;transform:none}.attr-value{min-width:50px;text-align:center;font-weight:700;font-size:1.3rem;color:var(--text-accent);background:#1a1a2ecc;border:1px solid var(--text-accent);border-radius:8px;padding:.5rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}.game-ui{width:100%;height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#1a1a2e,#16213e)}.game-world-container{flex:1;padding:20px;overflow-y:auto}.world-view{max-width:1200px;margin:0 auto}.world-map{background:#2d3748e6;border:2px solid var(--border-color);border-radius:12px;padding:30px;backdrop-filter:blur(10px)}.current-location{text-align:center;margin-bottom:40px;padding:20px;background:linear-gradient(135deg,#ffd7001a,#ffd7000d);border-radius:8px;border:1px solid rgba(255,215,0,.3)}.current-location h3{color:var(--text-accent);font-size:2.2rem;margin:0 0 15px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.current-location p{color:var(--text-secondary);font-size:1.1rem;margin:0 0 20px;line-height:1.6}.location-details{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,215,0,.2)}.time-weather{display:flex;gap:20px;align-items:center}.time-weather span{background:#0000004d;padding:8px 12px;border-radius:6px;font-size:.9rem;color:var(--text-secondary)}.party-gold{font-weight:700;color:var(--text-accent);font-size:1.1rem}.world-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:30px}.action-section{background:#10346099;border:1px solid var(--border-color);border-radius:12px;padding:25px;backdrop-filter:blur(5px)}.action-section h4{color:var(--text-accent);font-size:1.3rem;margin:0 0 20px;text-align:center;padding-bottom:12px;border-bottom:1px solid rgba(255,215,0,.3)}.action-btn{width:100%;padding:12px 20px;margin:8px 0;background:linear-gradient(135deg,var(--button-bg) 0%,#1e40af 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .3s ease;position:relative;overflow:hidden}.action-btn:hover{background:linear-gradient(135deg,var(--button-hover) 0%,#2563eb 100%);transform:translateY(-2px);box-shadow:0 8px 25px #3b82f666}.action-btn:active{transform:translateY(0);box-shadow:0 4px 15px #3b82f64d}.modal-content{background:linear-gradient(135deg,var(--panel-bg) 0%,var(--secondary-bg) 100%);border:2px solid var(--border-color);border-radius:12px;padding:30px;max-width:90vw;max-height:90vh;overflow-y:auto;position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid var(--border-color)}.modal-header h3{color:var(--text-accent);font-size:1.8rem;margin:0}.close-btn{background:none;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;padding:5px 10px;border-radius:50%;transition:all .3s ease}.close-btn:hover{background:#dc354533;color:#dc3545}.travel-modal{min-width:600px}.travel-locations{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.location-card{background:#10346066;border:1px solid var(--border-color);border-radius:8px;padding:20px;cursor:pointer;transition:all .3s ease}.location-card:hover{background:#103460b3;border-color:var(--text-accent);transform:translateY(-3px);box-shadow:0 8px 25px #0000004d}.location-card h4{color:var(--text-accent);margin:0 0 10px;font-size:1.2rem}.location-card p{color:var(--text-secondary);margin:0 0 15px;line-height:1.5}.travel-time{color:var(--warning-color);font-size:.9rem;font-weight:500}.combat-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;z-index:1000;display:flex;align-items:center;justify-content:center}.combat-container{border:2px solid rgba(255,215,0,.3);border-radius:18px;padding:1.5rem;position:relative;transition:all .4s ease;overflow:hidden}.random-character-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--text-accent),transparent);opacity:0;transition:opacity .3s ease}.random-character-card:hover{border-color:var(--text-accent);transform:translateY(-5px) scale(1.02);box-shadow:0 15px 30px #0000004d,0 0 25px #ffd70033}.random-character-card:hover:before{opacity:1}.random-char-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,215,0,.2)}.random-char-portrait{width:64px;height:64px;border-radius:50%;border:3px solid var(--text-accent);box-shadow:0 0 20px #ffd7004d;background:linear-gradient(45deg,var(--accent-bg),var(--secondary-bg));display:flex;align-items:center;justify-content:center;font-size:1.5rem;position:relative;overflow:hidden;flex-shrink:0}.random-char-portrait:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--text-accent),#fff,var(--text-accent));border-radius:50%;z-index:-1;animation:shimmer 3s ease-in-out infinite}.random-char-portrait canvas{width:100%;height:100%;border-radius:50%}.random-char-info{flex:1}.random-char-name{color:var(--text-accent);font-size:1.3rem;font-weight:700;margin:0 0 .3rem;text-shadow:0 2px 4px rgba(0,0,0,.5)}.random-char-details{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}.random-char-detail{background:#0f346066;padding:.5rem;border-radius:8px;border:1px solid rgba(255,215,0,.2);text-align:center;transition:all .3s ease}.random-char-detail:hover{background:#0f346099;border-color:var(--text-accent);transform:translateY(-2px)}.random-char-detail-label{color:var(--text-secondary);font-size:.7rem;margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.5px}.random-char-detail-value{color:var(--text-primary);font-weight:700;font-size:.9rem}.random-char-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.random-stat-item{background:#1a1a2ecc;padding:.4rem;border-radius:6px;border:1px solid var(--border-color);text-align:center;transition:all .3s ease}.random-stat-item:hover{background:#2d3748cc;border-color:var(--text-accent);transform:scale(1.05)}.random-stat-label{color:var(--text-secondary);font-size:.6rem;margin-bottom:.1rem;text-transform:uppercase;letter-spacing:.3px}.random-stat-value{color:var(--text-primary);font-weight:700;font-size:.9rem}.random-team-actions{display:flex;justify-content:center;gap:1rem;padding-top:1.5rem;border-top:2px solid rgba(255,215,0,.2)}.random-team-actions .btn{padding:.8rem 2rem;font-size:1rem;border-radius:12px;font-weight:600;transition:all .3s ease;position:relative;overflow:hidden;min-width:140px}.random-team-actions .btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.random-team-actions .btn:hover:before{left:100%}.btn-accept-team{background:linear-gradient(45deg,var(--success-color),#20a743);border:2px solid var(--success-color);color:#fff}.btn-accept-team:hover:not(:disabled){background:linear-gradient(45deg,#20a743,var(--text-accent));transform:translateY(-2px) scale(1.05);box-shadow:0 8px 16px #0000004d}.btn-reroll-team{background:linear-gradient(45deg,var(--button-bg),var(--button-hover));border:2px solid var(--button-bg);color:#fff}.btn-reroll-team:hover:not(:disabled){background:linear-gradient(45deg,var(--button-hover),var(--text-accent));transform:translateY(-2px) scale(1.05);box-shadow:0 8px 16px #0000004d}.btn-manual-creation{background:#2d3748cc;border:2px solid var(--border-color);color:var(--text-secondary)}.btn-manual-creation:hover:not(:disabled){background:var(--border-color);color:var(--text-primary);transform:translateY(-2px) scale(1.05);box-shadow:0 8px 16px #0000004d}@media (max-width: 768px){.random-team-dialog{width:95vw;margin:10px;border-radius:18px}.random-team-header{padding:1.5rem}.random-team-title{font-size:1.8rem}.random-team-content{padding:1.5rem}.random-team-preview{grid-template-columns:1fr;gap:1rem}.random-character-card{padding:1rem}.random-char-header{flex-direction:column;text-align:center;gap:.8rem}.random-char-portrait{width:48px;height:48px;font-size:1.2rem}.random-char-details{grid-template-columns:1fr;gap:.3rem}.random-char-stats{grid-template-columns:repeat(2,1fr);gap:.3rem}.random-team-actions{flex-direction:column;gap:.8rem}.random-team-actions .btn{padding:.7rem 1.5rem;font-size:.9rem}}@media (max-width: 480px){.random-team-header{padding:1rem}.random-team-title{font-size:1.5rem}.random-team-subtitle{font-size:1rem}.random-team-content{padding:1rem}.random-char-name{font-size:1.1rem}.random-char-stats{grid-template-columns:1fr}}.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}.tutorial-message{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:30px;border-radius:15px;max-width:500px;text-align:center;box-shadow:0 10px 30px #00000080;border:2px solid #3498db;animation:tutorialSlideIn .5s ease-out}.tutorial-message h3{margin:0 0 20px;color:#3498db;font-size:24px;font-weight:700}.tutorial-message p{margin:0 0 25px;font-size:16px;line-height:1.6;color:#ecf0f1}.tutorial-message button{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;margin:0 10px;transition:all .3s ease;box-shadow:0 4px 15px #3498db4d}.tutorial-message button:hover{background:linear-gradient(135deg,#2980b9,#1f5f8b);transform:translateY(-2px);box-shadow:0 6px 20px #3498db66}.tutorial-message button:last-child{background:linear-gradient(135deg,#95a5a6,#7f8c8d)}.tutorial-message button:last-child:hover{background:linear-gradient(135deg,#7f8c8d,#6c7b7d)}@keyframes tutorialSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.tutorial-message{margin:20px;padding:20px;max-width:calc(100% - 40px)}.tutorial-message h3{font-size:20px}.tutorial-message p{font-size:14px}.tutorial-message button{padding:10px 20px;font-size:13px;margin:5px}}.game-interface{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#e8e8e8;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.game-header{background:linear-gradient(90deg,#2c3e50,#34495e);border-bottom:2px solid #3498db;padding:8px 16px}.status-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}.status-item{display:flex;align-items:center;gap:8px}.status-label{color:#bdc3c7;font-weight:600}.status-value{color:#ecf0f1;font-weight:700}.game-navigation{display:flex;gap:4px;justify-content:center}.nav-btn{background:linear-gradient(135deg,#34495e,#2c3e50);border:1px solid #3498db;color:#ecf0f1;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.nav-btn:hover{background:linear-gradient(135deg,#3498db,#2980b9);transform:translateY(-1px)}.nav-btn.active{background:linear-gradient(135deg,#e74c3c,#c0392b);border-color:#e74c3c}.game-main-area{display:flex;flex:1;position:relative}.game-view{display:none;flex:1;padding:20px;overflow-y:auto}.game-view.active{display:block}.visual-exploration-container{display:flex;flex-direction:column;align-items:center;gap:20px}#scene-canvas{display:block;width:100%;height:100%;border:2px solid var(--border-color);border-radius:8px;background:linear-gradient(180deg,#87ceeb,#98fb98);box-shadow:inset 0 0 20px #0000004d;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.world-map-container{display:flex;flex-direction:column;align-items:center;gap:20px}#world-map{border:2px solid #3498db;border-radius:8px;background:#2c3e50;box-shadow:0 4px 8px #0000004d}.party-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:30px}.party-member{background:linear-gradient(135deg,#34495e,#2c3e50);border:2px solid #3498db;border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;transition:all .2s ease;cursor:pointer}.party-member:hover{border-color:#e74c3c;transform:translateY(-2px);box-shadow:0 4px 12px #e74c3c4d}.member-portrait{width:60px;height:60px;background:linear-gradient(135deg,#9b59b6,#8e44ad);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid #ecf0f1}.member-info{flex:1}.member-name{color:#f39c12;margin:0 0 8px;font-size:18px;font-weight:700}.member-stats{display:flex;flex-direction:column;gap:4px}.stat{color:#ecf0f1;font-size:14px}.hp-value{color:#e74c3c;font-weight:700}.mp-value{color:#3498db;font-weight:700}.level-value{color:#f39c12;font-weight:700}.party-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.inventory-container{display:flex;gap:20px;height:100%}.inventory-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;flex:1;max-height:400px;overflow-y:auto;padding:16px;background:#2c3e50cc;border-radius:8px}.inventory-slot{width:60px;height:60px;border:2px solid #3498db;border-radius:6px;background:#34495e80;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.inventory-slot:hover{border-color:#e74c3c;background:#e74c3c33}.inventory-slot.filled{background:#2ecc714d;border-color:#2ecc71}.inventory-info{width:300px;background:#2c3e50cc;border:1px solid #3498db;border-radius:8px;padding:20px}.inventory-info h3{color:#f39c12;margin:0 0 16px}.spells-container{display:flex;gap:20px;height:100%}.spell-schools{display:flex;flex-direction:column;gap:8px;width:200px}.spell-school{background:linear-gradient(135deg,#34495e,#2c3e50);border:1px solid #3498db;color:#ecf0f1;padding:12px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.spell-school:hover{background:linear-gradient(135deg,#3498db,#2980b9)}.spell-school.active{background:linear-gradient(135deg,#e74c3c,#c0392b);border-color:#e74c3c}.spells-list{flex:1;background:#2c3e50cc;border:1px solid #3498db;border-radius:8px;padding:16px;overflow-y:auto;max-height:500px}.spell-item{background:#34495e80;border:1px solid #3498db;border-radius:6px;padding:12px;margin-bottom:8px;cursor:pointer;transition:all .2s ease}.spell-item:hover{background:#3498db4d;border-color:#e74c3c}.spell-details{width:300px;background:#2c3e50cc;border:1px solid #3498db;border-radius:8px;padding:20px}.quests-container{display:flex;gap:20px;height:100%}.quests-list{flex:1;background:#2c3e50cc;border:1px solid #3498db;border-radius:8px;padding:16px;overflow-y:auto;max-height:500px}.quest-item{background:#34495e80;border:1px solid #3498db;border-radius:6px;padding:16px;margin-bottom:12px;cursor:pointer;transition:all .2s ease}.quest-item:hover{background:#3498db4d;border-color:#e74c3c}.quest-item.active{background:#e74c3c4d;border-color:#e74c3c}.quest-details{width:400px;background:#2c3e50cc;border:1px solid #3498db;border-radius:8px;padding:20px}.map-container{display:flex;flex-direction:column;align-items:center;gap:20px}#world-map-large{border:2px solid #3498db;border-radius:8px;background:#2c3e50;box-shadow:0 4px 8px #0000004d}.map-legend{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.legend-item{display:flex;align-items:center;gap:8px;color:#ecf0f1;font-size:14px}.game-sidebar{width:300px;background:linear-gradient(180deg,#2c3e50,#34495e);border-left:2px solid #3498db;padding:16px;overflow-y:auto}.sidebar-section{margin-bottom:24px}.sidebar-section h3{color:#f39c12;margin:0 0 12px;font-size:18px;border-bottom:1px solid #3498db;padding-bottom:8px}.party-status-item{background:#34495e80;border:1px solid #3498db;border-radius:6px;padding:12px;margin-bottom:8px}.party-status-item .member-name{color:#f39c12;font-weight:600;margin-bottom:8px}.status-bars{display:flex;flex-direction:column;gap:4px}.hp-bar,.mp-bar{height:8px;background:#34495ecc;border-radius:4px;overflow:hidden}.hp-bar .bar-fill{height:100%;background:linear-gradient(90deg,#e74c3c,#c0392b);transition:width .3s ease}.mp-bar .bar-fill{height:100%;background:linear-gradient(90deg,#3498db,#2980b9);transition:width .3s ease}.message-log{max-height:200px;overflow-y:auto;background:#34495e80;border:1px solid #3498db;border-radius:6px;padding:12px}.message{color:#ecf0f1;font-size:12px;margin-bottom:4px;padding:4px 0;border-bottom:1px solid rgba(52,152,219,.3)}.quick-actions{display:flex;flex-direction:column;gap:8px}.quick-btn{background:linear-gradient(135deg,#27ae60,#2ecc71);border:none;color:#fff;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.quick-btn:hover{background:linear-gradient(135deg,#2ecc71,#27ae60);transform:translateY(-1px)}.game-footer{background:linear-gradient(90deg,#2c3e50,#34495e);border-top:2px solid #3498db;padding:12px 16px}.combat-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:12px;background:#e74c3c33;border:1px solid #e74c3c;border-radius:6px}.combat-status.hidden{display:none}.combat-info{display:flex;gap:20px;color:#ecf0f1;font-weight:600}.combat-actions{display:flex;gap:8px}.combat-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;color:#fff;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.combat-btn:hover{background:linear-gradient(135deg,#c0392b,#e74c3c);transform:translateY(-1px)}.game-controls{display:flex;justify-content:center;gap:30px}.control-group{display:flex;align-items:center;gap:8px}.control-label{color:#bdc3c7;font-size:12px}.control-keys{color:#f39c12;font-size:12px;font-weight:600;background:#f39c1233;padding:2px 6px;border-radius:3px}@media (max-width: 1200px){.game-sidebar{width:250px}.party-grid{grid-template-columns:1fr}}@media (max-width: 768px){.game-interface,.game-main-area{flex-direction:column}.game-sidebar{width:100%;border-left:none;border-top:2px solid #3498db}.status-bar{flex-direction:column;gap:8px}.game-navigation{flex-wrap:wrap}.nav-btn{font-size:12px;padding:6px 12px}}.party-slots-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 auto;max-width:600px}.compact-slot{min-width:0}.character-card.compact-card{background:#2d3748eb;border:2px solid var(--border-color);border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center;min-height:160px;box-shadow:0 3px 12px #00000026}.character-header{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}.character-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:#222;margin-bottom:4px;display:flex;align-items:center;justify-content:center}.character-avatar img,.character-avatar svg{width:100%;height:100%;object-fit:cover}.character-name{font-weight:700;color:var(--text-accent);font-size:1em;margin-bottom:2px}.character-stats{width:100%;margin-bottom:6px}.stat-row{display:flex;justify-content:space-between;font-size:.85em;color:var(--text-secondary);margin-bottom:1px}.stat{font-weight:400;color:var(--text-secondary)}.character-actions{display:flex;gap:6px;margin-top:6px}.btn-small{font-size:.85em;padding:4px 10px;border-radius:5px}.party-empty-state{text-align:center;padding:40px 20px;color:var(--text-secondary)}.party-empty-state .empty-icon{font-size:3em;margin-bottom:16px}.party-empty-state h3{color:var(--text-primary);margin-bottom:8px}.party-empty-state p{margin-bottom:20px}@media (max-width: 600px){.party-slots-grid{grid-template-columns:1fr;gap:16px}}.character-sheet-panel{max-width:800px;max-height:90vh;overflow-y:auto}.character-sheet-content{display:grid;grid-template-columns:1fr 2fr;gap:20px;margin:20px 0}.character-details-section{display:flex;flex-direction:column;gap:15px}.character-portrait-section{text-align:center}.character-portrait-large{width:120px;height:120px;margin:0 auto 15px;border-radius:50%;overflow:hidden;border:3px solid #3498db}.character-portrait-large img{width:100%;height:100%;object-fit:cover}.character-basic-info h3{color:#f39c12;margin:0 0 10px}.character-basic-info p{color:#ecf0f1;margin:5px 0;font-size:1.1em}.character-stats-section,.character-attributes-section{background:#2d374880;padding:15px;border-radius:8px;margin-bottom:15px}.character-stats-section h3,.character-attributes-section h3{color:#3498db;margin:0 0 15px;border-bottom:2px solid #3498db;padding-bottom:5px}.vitals-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vital-item{display:flex;justify-content:space-between;padding:5px 0}.vital-label{color:#bdc3c7;font-weight:700}.vital-value{color:#f39c12;font-weight:700}.attributes-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.attribute-item{display:flex;align-items:center;gap:8px;padding:8px;background:#34495e4d;border-radius:5px}.attribute-icon{font-size:1.2em}.attribute-name{color:#ecf0f1;flex:1}.attribute-value{color:#f39c12;font-weight:700;font-size:1.1em}.character-sheet-actions{text-align:center;margin-top:20px;padding-top:20px;border-top:1px solid #34495e}.character-equipment-section{background:#2d374880;padding:15px;border-radius:8px;margin-bottom:15px}.character-equipment-section h3{color:#3498db;margin:0 0 15px;border-bottom:2px solid #3498db;padding-bottom:5px}.equipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.equipment-item{display:flex;justify-content:space-between;padding:5px 0}.equipment-label{color:#bdc3c7;font-weight:700}.equipment-value{color:#f39c12;font-weight:700}.character-skills-section{background:#2d374880;padding:15px;border-radius:8px;margin-bottom:15px}.character-skills-section h3{color:#3498db;margin:0 0 15px;border-bottom:2px solid #3498db;padding-bottom:5px}.skills-content{display:flex;flex-direction:column;gap:15px}.race-skills h4,.class-skills h4{color:#f39c12;margin:0 0 10px;font-size:1.1em}.skills-list{display:flex;flex-direction:column;gap:8px}.skill-item{display:flex;align-items:center;gap:8px;padding:8px;background:#34495e4d;border-radius:5px;transition:background .2s ease}.skill-item:hover{background:#34495e80}.skill-icon{font-size:1.2em}.skill-name{color:#ecf0f1;font-weight:500}.visual-exploration-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;gap:10px;padding:15px;background:#1a1a2ee6;border-radius:10px}.scene-info-overlay{position:absolute;top:10px;left:10px;right:10px;background:#000000b3;color:#fff;padding:10px;border-radius:5px;font-size:.9em;z-index:10}.scene-name{font-weight:700;color:var(--text-accent);margin-bottom:5px}.scene-description{color:var(--text-secondary);font-size:.8em;line-height:1.3}.scene-elements{position:absolute;bottom:10px;left:10px;right:10px;display:flex;gap:10px;flex-wrap:wrap;z-index:10}.scene-element{background:#000000b3;color:#fff;padding:5px 10px;border-radius:15px;font-size:.8em;cursor:pointer;transition:all .3s ease}.scene-element:hover{background:#ffd7004d;color:var(--text-accent)}.movement-controls{display:flex;flex-direction:column;gap:5px;align-items:center;margin-top:10px}.movement-row{display:flex;gap:5px}.movement-btn{width:60px;height:60px;border:2px solid var(--border-color);background:linear-gradient(145deg,var(--panel-bg),var(--accent-bg));color:var(--text-primary);border-radius:50%;cursor:pointer;transition:all .3s ease;font-size:1.2em;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px #0000004d}.movement-btn:hover{background:linear-gradient(145deg,var(--button-hover),var(--button-bg));border-color:var(--text-accent);transform:translateY(-2px);box-shadow:0 6px 12px #0006}.movement-btn:active{transform:translateY(0);box-shadow:0 2px 4px #0000004d}.world-controls{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}.action-btn{padding:8px 16px;border:2px solid var(--border-color);background:linear-gradient(145deg,var(--panel-bg),var(--accent-bg));color:var(--text-primary);border-radius:20px;cursor:pointer;transition:all .3s ease;font-size:.9em;font-weight:500;box-shadow:0 2px 4px #0000004d}.action-btn:hover{background:linear-gradient(145deg,var(--button-hover),var(--button-bg));border-color:var(--text-accent);transform:translateY(-1px);box-shadow:0 4px 8px #0006}.action-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0000004d}.location-info{background:#2d3748f2;border:2px solid var(--border-color);border-radius:10px;padding:15px;margin-top:10px;box-shadow:0 4px 8px #0000004d}.location-info h3{color:var(--text-accent);margin:0 0 10px;font-size:1.3em;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.location-info p{color:var(--text-secondary);margin:0;line-height:1.4;font-size:.95em}@media (max-width: 768px){.visual-exploration-container{padding:10px}.movement-btn{width:50px;height:50px;font-size:1em}.action-btn{padding:6px 12px;font-size:.8em}.scene-info-overlay{font-size:.8em;padding:8px}.scene-elements{gap:5px}.scene-element{padding:4px 8px;font-size:.7em}}.save-load-panel{max-width:900px;max-height:90vh;overflow-y:auto}.save-load-content{padding:2rem}.save-slots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.save-slot{background:linear-gradient(145deg,#2d3748f2,#1a1a2ef2);border:2px solid var(--border-color);border-radius:15px;padding:1.5rem;transition:all .3s ease;min-height:200px;display:flex;flex-direction:column}.save-slot:hover{border-color:var(--text-accent);transform:translateY(-3px);box-shadow:0 10px 25px #0000004d}.save-slot.filled{border-color:var(--success-color)}.save-slot.empty{border-style:dashed;opacity:.7}.save-slot-content{flex:1;display:flex;flex-direction:column;gap:1rem}.save-slot-info{flex:1}.save-slot-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.save-slot-header h3{color:var(--text-accent);margin:0;font-size:1.2rem}.save-slot-date{color:var(--text-secondary);font-size:.85rem}.save-slot-details{display:flex;flex-direction:column;gap:.5rem}.save-slot-detail{display:flex;justify-content:space-between;padding:.5rem;background:#0f34604d;border-radius:6px}.detail-label{color:var(--text-secondary);font-size:.9rem}.detail-value{color:var(--text-primary);font-weight:700;font-size:.9rem}.save-slot-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-secondary)}.empty-slot-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.save-slot-empty h3{color:var(--text-secondary);margin:0 0 .5rem}.save-slot-empty p{margin:0;font-size:.9rem}.save-slot-btn{width:100%;margin-top:auto}.save-load-actions{display:flex;justify-content:center;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.save-load-message{position:fixed;top:20px;right:20px;z-index:10000;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 4px 12px #0000004d;animation:slideInRight .3s ease-out}.save-load-message.success{background:linear-gradient(135deg,var(--success-color),#20a743);color:#fff}.save-load-message.error{background:linear-gradient(135deg,var(--health-color),#c82333);color:#fff}.message-content{display:flex;align-items:center;gap:.75rem}.message-icon{font-size:1.5rem}.message-text{font-weight:600;font-size:1rem}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.save-slots-grid{grid-template-columns:1fr;gap:1rem}.save-load-panel{max-width:95vw;margin:1rem}.save-load-content{padding:1rem}}.spell-selection-panel{max-width:800px;max-height:90vh;overflow-y:auto}.spell-selection-content{display:flex;flex-direction:column;gap:20px}.spell-mana-display{display:flex;align-items:center;gap:10px;padding:12px;background:#2c3e50cc;border-radius:6px;border:1px solid #3498db}.mana-label{font-weight:600;color:var(--text-secondary)}.mana-amount{font-weight:700;color:var(--mana-color);font-size:1.1rem}.spell-school-filter{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#2c3e5099;border-radius:6px}.spell-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;max-height:500px;overflow-y:auto;padding:12px}.spell-card{background:#34495eb3;border:2px solid #3498db;border-radius:8px;padding:16px;transition:all .3s ease;display:flex;flex-direction:column;gap:12px}.spell-card:hover{border-color:#e74c3c;background:#3498db4d;transform:translateY(-2px);box-shadow:0 4px 12px #e74c3c4d}.spell-card.disabled{opacity:.5;cursor:not-allowed}.spell-header{display:flex;justify-content:space-between;align-items:center}.spell-name{margin:0;font-size:1.2rem;font-weight:700;color:var(--text-accent)}.spell-level{background:#e74c3c4d;padding:4px 8px;border-radius:4px;font-size:.85rem;font-weight:600}.spell-info{display:flex;flex-direction:column;gap:8px}.spell-description{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.4}.spell-details{display:flex;flex-wrap:wrap;gap:12px}.spell-stat{display:flex;align-items:center;gap:6px;font-size:.9rem}.stat-icon{font-size:1.1rem}.stat-label{color:var(--text-secondary);font-weight:500}.stat-value{color:var(--text-primary);font-weight:700}.stat-value.insufficient{color:#e74c3c}.spell-unavailable{padding:8px;background:#e74c3c33;border-radius:4px;color:#e74c3c;font-size:.85rem;text-align:center}.no-spells{text-align:center;padding:40px;color:var(--text-secondary)}.spell-animation-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.spell-effect{position:absolute;pointer-events:none;z-index:1001}@keyframes fireball{0%{transform:scale(0) translate(-50px);opacity:0}50%{transform:scale(1.2) translate(0);opacity:1}to{transform:scale(.8) translate(50px);opacity:0}}.spell-effect.fireball{animation:fireball .8s ease-out;font-size:3rem;filter:drop-shadow(0 0 10px #ff6b35)}@keyframes flame-strike{0%{transform:translateY(-100px) scale(0);opacity:0}50%{transform:translateY(0) scale(1.5);opacity:1}to{transform:translateY(20px) scale(.8);opacity:0}}.spell-effect.flame-strike{animation:flame-strike 1s ease-out;font-size:4rem;filter:drop-shadow(0 0 15px #ff6b35)}@keyframes ice-bolt{0%{transform:rotate(0) translate(-100px);opacity:0}50%{transform:rotate(180deg) translate(0);opacity:1}to{transform:rotate(360deg) translate(100px);opacity:0}}.spell-effect.ice-bolt{animation:ice-bolt .9s ease-out;font-size:2.5rem;filter:drop-shadow(0 0 10px #4fc3f7)}@keyframes blizzard{0%,to{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.5)}}.spell-effect.blizzard{animation:blizzard 1.2s ease-in-out;font-size:4rem;filter:drop-shadow(0 0 20px #4fc3f7)}@keyframes lightning-bolt{0%{transform:translateY(-200px) scaleY(0);opacity:0}30%{opacity:1}50%{transform:translateY(0) scaleY(1);opacity:1}to{transform:translateY(200px) scaleY(0);opacity:0}}.spell-effect.lightning-bolt{animation:lightning-bolt .7s ease-out;font-size:3.5rem;filter:drop-shadow(0 0 15px #fff176)}@keyframes chain-lightning{0%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1.3) rotate(180deg);opacity:1}to{transform:scale(.5) rotate(360deg);opacity:0}}.spell-effect.chain-lightning{animation:chain-lightning 1s ease-out;font-size:3rem;filter:drop-shadow(0 0 20px #fff176)}@keyframes stone-spike{0%{transform:translateY(100px) scale(0);opacity:0}50%{transform:translateY(0) scale(1.2);opacity:1}to{transform:translateY(-20px) scale(.8);opacity:0}}.spell-effect.stone-spike{animation:stone-spike .8s ease-out;font-size:3rem;filter:drop-shadow(0 0 10px #8d6e63)}@keyframes earthquake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-10px) rotate(-2deg)}50%{transform:translate(10px) rotate(2deg)}75%{transform:translate(-5px) rotate(-1deg)}}.spell-effect.earthquake{animation:earthquake 1.5s ease-in-out;font-size:4rem;filter:drop-shadow(0 0 15px #8d6e63)}@keyframes heal{0%{transform:translateY(0) scale(0);opacity:0}50%{transform:translateY(-30px) scale(1.5);opacity:1}to{transform:translateY(-60px) scale(.8);opacity:0}}.spell-effect.heal,.spell-effect.greater-heal,.spell-effect.holy-light{animation:heal 1s ease-out;font-size:3rem;filter:drop-shadow(0 0 15px #4caf50)}@keyframes dark-bolt{0%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1.3) rotate(180deg);opacity:1}to{transform:scale(.5) rotate(360deg);opacity:0}}.spell-effect.dark-bolt,.spell-effect.shadow-strike,.spell-effect.void-bolt{animation:dark-bolt .9s ease-out;font-size:3rem;filter:drop-shadow(0 0 15px #424242)}@keyframes spirit-bolt{0%{transform:scale(0);opacity:0}50%{transform:scale(1.5);opacity:1}to{transform:scale(.8);opacity:0}}.spell-effect.spirit-bolt,.spell-effect.soul-drain{animation:spirit-bolt 1s ease-out;font-size:3rem;filter:drop-shadow(0 0 15px #9c27b0)}@keyframes area-effect{0%{transform:scale(0);opacity:0}50%{transform:scale(2);opacity:1}to{transform:scale(1.5);opacity:0}}.spell-effect.meteor-strike,.spell-effect.tornado,.spell-effect.healing-waters{animation:area-effect 1.2s ease-out;font-size:4rem}.spell-effect.meteor-strike{filter:drop-shadow(0 0 20px #ff6b35)}.spell-effect.tornado{filter:drop-shadow(0 0 20px #fff176)}.spell-effect.healing-waters{filter:drop-shadow(0 0 20px #4caf50)}.backoffice-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;z-index:10000;display:flex;align-items:center;justify-content:center;font-family:Cinzel,Times New Roman,serif}.backoffice-container{width:90%;max-width:1400px;height:90vh;background:var(--panel-bg);border:2px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 20px 60px #000000b3}.backoffice-header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;border-bottom:2px solid var(--border-color);background:var(--secondary-bg)}.backoffice-title{font-size:2em;color:var(--text-accent);margin:0;font-weight:700}.backoffice-close-btn{background:transparent;border:2px solid var(--border-color);color:var(--text-primary);font-size:1.5em;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.backoffice-close-btn:hover{background:var(--health-color);border-color:var(--health-color);transform:rotate(90deg)}.backoffice-nav{display:flex;gap:10px;padding:15px 30px;border-bottom:2px solid var(--border-color);background:var(--accent-bg);flex-wrap:wrap}.backoffice-nav-btn{padding:10px 20px;background:var(--panel-bg);border:1px solid var(--border-color);color:var(--text-primary);border-radius:6px;cursor:pointer;font-size:.95em;transition:all .2s;font-family:inherit}.backoffice-nav-btn:hover{background:var(--button-bg);border-color:var(--button-hover)}.backoffice-nav-btn.active{background:var(--button-bg);border-color:var(--text-accent);color:var(--text-accent);font-weight:600}.backoffice-content{flex:1;overflow-y:auto;padding:30px}.backoffice-section{max-width:1200px;margin:0 auto}.section-title{font-size:1.8em;color:var(--text-accent);margin:0 0 20px;border-bottom:2px solid var(--border-color);padding-bottom:10px}.section-description{color:var(--text-secondary);margin-bottom:30px;font-size:.95em}.subsection-title{font-size:1.3em;color:var(--text-primary);margin:30px 0 15px}.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.dashboard-card{background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:8px;padding:20px;display:flex;align-items:center;gap:15px}.card-icon{font-size:2.5em}.card-content{flex:1}.card-title{color:var(--text-secondary);font-size:.9em;margin-bottom:5px}.card-value{color:var(--text-accent);font-size:1.5em;font-weight:600}.system-status-list{display:flex;flex-direction:column;gap:10px}.system-status-item{display:flex;align-items:center;gap:15px;padding:15px;background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:6px}.status-icon{font-size:1.5em}.status-info{flex:1}.status-name{color:var(--text-primary);font-weight:600;margin-bottom:3px}.status-id{color:var(--text-secondary);font-size:.85em}.status-badge{padding:5px 12px;border-radius:12px;font-size:.85em;font-weight:600}.status-running{background:#28a74533;color:var(--success-color);border-color:var(--success-color)}.status-stopped{background:#6c757d33;color:var(--text-secondary);border-color:var(--border-color)}.status-error{background:#dc354533;color:var(--health-color);border-color:var(--health-color)}.quick-actions{display:flex;gap:10px;flex-wrap:wrap}.action-btn{padding:10px 20px;background:var(--button-bg);border:1px solid var(--button-hover);color:var(--text-primary);border-radius:6px;cursor:pointer;font-family:inherit;transition:all .2s}.action-btn:hover{background:var(--button-hover);transform:translateY(-2px)}.action-btn.primary{background:var(--success-color);border-color:var(--success-color)}.action-btn.warning{background:var(--warning-color);border-color:var(--warning-color);color:#000}.action-btn.danger{background:var(--health-color);border-color:var(--health-color)}.config-section{margin-bottom:40px;padding:20px;background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:8px}.config-description{color:var(--text-secondary);margin-bottom:15px;font-size:.9em}.system-toggles{display:flex;flex-direction:column;gap:10px}.system-toggle-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--accent-bg);border:1px solid var(--border-color);border-radius:6px}.toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;flex:1}.toggle-text{display:flex;flex-direction:column}.toggle-name{color:var(--text-primary);font-weight:500}.toggle-id{color:var(--text-secondary);font-size:.85em}.config-item{margin-bottom:15px}.config-item label{display:block;color:var(--text-primary);margin-bottom:5px;font-weight:500}.config-item input[type=checkbox]{margin-right:8px;cursor:pointer}.config-item select{width:100%;padding:8px;background:var(--accent-bg);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;font-family:inherit}.config-hint{display:block;color:var(--text-secondary);font-size:.85em;margin-top:3px}.config-actions{display:flex;gap:10px;margin-top:30px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:30px}.metric-card{background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:6px;padding:15px;text-align:center}.metric-label{color:var(--text-secondary);font-size:.9em;margin-bottom:5px}.metric-value{color:var(--text-accent);font-size:1.8em;font-weight:600}.health-indicators{display:flex;gap:20px;margin-bottom:30px}.health-item{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:6px}.health-icon{font-size:1.5em}.health-label{color:var(--text-secondary)}.health-value{color:var(--text-primary);font-weight:600;font-size:1.2em}.cache-stats{display:flex;flex-direction:column;gap:10px}.stat-item{display:flex;justify-content:space-between;padding:10px;background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:6px}.stat-label{color:var(--text-secondary)}.stat-value{color:var(--text-accent);font-weight:600}.logs-controls{display:flex;gap:10px;margin-bottom:15px;align-items:center}.logs-viewer{background:#000;border:1px solid var(--border-color);border-radius:6px;padding:15px;height:400px;overflow-y:auto;font-family:Courier New,monospace;font-size:.85em}.log-entry{margin-bottom:5px;padding:3px 0;word-wrap:break-word}.log-command{color:#4a9eff}.log-success{color:#4ade80}.log-error{color:#f87171}.log-warn{color:#fbbf24}.log-info{color:#94a3b8}.console-container{background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:8px;padding:20px}.console-output{background:#000;border:1px solid var(--border-color);border-radius:6px;padding:15px;height:300px;overflow-y:auto;font-family:Courier New,monospace;font-size:.9em;margin-bottom:15px}.console-line{margin-bottom:5px;word-wrap:break-word}.console-input-container{display:flex;gap:10px}.console-input{flex:1;padding:10px;background:var(--accent-bg);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;font-family:Courier New,monospace}.console-execute-btn{padding:10px 20px;background:var(--button-bg);border:1px solid var(--button-hover);color:var(--text-primary);border-radius:4px;cursor:pointer;font-family:inherit}.console-help{margin-top:15px;padding:15px;background:var(--accent-bg);border:1px solid var(--border-color);border-radius:6px;font-size:.9em}.console-help code{background:#0000004d;padding:2px 6px;border-radius:3px;color:var(--text-accent)}.quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.stat-editor{background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:8px;padding:20px}.stat-editor-content{margin-top:15px}.hint{color:var(--text-secondary);font-size:.9em;font-style:italic}.save-load-actions,.export-import-actions,.backup-actions,.cleanup-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.save-slots{margin-top:20px}.save-slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;margin-top:15px}.save-slot{background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:6px;padding:15px}.save-slot-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.save-slot-number{color:var(--text-primary);font-weight:600}.save-slot-date{color:var(--text-secondary);font-size:.85em}.save-slot-empty{color:var(--text-secondary);font-size:.85em;font-style:italic}.save-slot-actions{display:flex;gap:5px}.slot-btn{flex:1;padding:6px 12px;background:var(--button-bg);border:1px solid var(--button-hover);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:.85em;font-family:inherit}.slot-btn:disabled{opacity:.5;cursor:not-allowed}.storage-info{display:flex;flex-direction:column;gap:10px}.storage-stat{display:flex;justify-content:space-between;padding:10px;background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:6px}@media (max-width: 768px){.backoffice-container{width:100%;height:100vh;border-radius:0}.backoffice-nav{flex-direction:column}.dashboard-cards,.quick-actions-grid{grid-template-columns:1fr}}.death-recovery-panel{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ff6b6b;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:800px;margin:2rem auto}.death-info{background:#ff6b6b1a;border-left:4px solid #ff6b6b;padding:1rem;margin:1rem 0;border-radius:4px}.recovery-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}.recovery-option{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;transition:all .3s ease}.recovery-option:hover{background:#ffffff1a;border-color:#4a9eff;transform:translateY(-2px)}.trade-window,.shop-browser,.marketplace-browser{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #4a9eff;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:1000px;margin:2rem auto}.trade-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;margin:2rem 0}.trade-side{background:#ffffff0d;border-radius:8px;padding:1.5rem}.trade-items{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.trade-item{background:#ffffff0d;padding:.75rem;border-radius:4px}.trade-divider{font-size:2rem;display:flex;align-items:center;justify-content:center}.chat-window{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #4a9eff;border-radius:12px;padding:1.5rem;color:#e2e8f0;max-width:600px;margin:2rem auto;display:flex;flex-direction:column;height:500px}.chat-messages{flex:1;overflow-y:auto;margin:1rem 0;padding:1rem;background:#0000004d;border-radius:8px}.chat-message{margin:.5rem 0;padding:.5rem;border-radius:4px;background:#ffffff0d}.chat-input-area{display:flex;gap:.5rem}.chat-input{flex:1;padding:.75rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#e2e8f0;font-size:1rem}.chat-channels{display:flex;gap:.5rem;margin-bottom:1rem}.chat-channel-btn{padding:.5rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#e2e8f0;cursor:pointer;transition:all .3s ease}.chat-channel-btn.active{background:#4a9eff;border-color:#4a9eff}.guild-panel{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ffd700;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:900px;margin:2rem auto}.guild-member{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#ffffff0d;border-radius:8px;margin:.5rem 0}.member-info{display:flex;flex-direction:column;gap:.25rem}.member-rank{color:gold;font-size:.9rem}.arena-queue-panel{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ff6b6b;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:800px;margin:2rem auto}.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}.mode-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1.5rem;text-align:center}.raid-browser-panel{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #9b59b6;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:1000px;margin:2rem auto}.raids-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:1rem}.raid-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1.5rem;transition:all .3s ease}.raid-card:hover{background:#ffffff1a;border-color:#9b59b6;transform:translateY(-2px)}.raid-difficulty{padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:700}.difficulty-easy{background:#27ae60;color:#fff}.difficulty-normal{background:#3498db;color:#fff}.difficulty-hard{background:#e67e22;color:#fff}.difficulty-epic{background:#9b59b6;color:#fff}.vendor-management-panel{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #f39c12;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:1000px;margin:2rem auto}.vendor-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#ffffff0d;border-radius:8px;margin:.5rem 0}.achievement-card{display:flex;gap:1rem;padding:1.5rem;background:#ffffff0d;border-radius:8px;margin:.5rem 0;border:1px solid rgba(255,255,255,.1)}.achievement-card.unlocked{border-color:gold;background:#ffd7001a}.achievement-card.locked{opacity:.6}.achievement-icon{font-size:2.5rem}.emote-menu-panel{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #1abc9c;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:800px;margin:2rem auto}.emotes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1rem}.emote-item{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1.5rem;text-align:center;transition:all .3s ease}.emote-item:hover{background:#ffffff1a;border-color:#1abc9c;transform:scale(1.05)}.emote-icon{font-size:3rem;margin-bottom:.5rem}.leaderboards-panel{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #e74c3c;border-radius:12px;padding:2rem;color:#e2e8f0;max-width:900px;margin:2rem auto}.leaderboard-categories{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.category-btn{padding:.5rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#e2e8f0;cursor:pointer;transition:all .3s ease}.category-btn.active{background:#e74c3c;border-color:#e74c3c}.leaderboard-entry{display:flex;align-items:center;gap:1rem;padding:1rem;background:#ffffff0d;border-radius:8px;margin:.5rem 0}.rank-badge{font-size:1.5rem;min-width:3rem;text-align:center}.player-name{flex:1;font-weight:700}.score{color:gold;font-weight:700}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(255,255,255,.1)}.panel-header h2{margin:0;color:#e2e8f0}.btn-close{background:#ff6b6b33;border:1px solid #ff6b6b;border-radius:4px;color:#ff6b6b;cursor:pointer;font-size:1.5rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.btn-close:hover{background:#ff6b6b;color:#fff}.multiplayer-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.multiplayer-actions .quick-btn{padding:.75rem;font-size:.9rem;background:#4a9eff1a;border:1px solid rgba(74,158,255,.3);border-radius:6px;color:#e2e8f0;cursor:pointer;transition:all .3s ease}.multiplayer-actions .quick-btn:hover{background:#4a9eff33;border-color:#4a9eff;transform:translateY(-2px)}.empty-state{text-align:center;padding:3rem;color:#e2e8f080;font-style:italic}@media (max-width: 768px){.trade-sides{grid-template-columns:1fr}.trade-divider{transform:rotate(90deg)}.raids-grid,.emotes-grid,.mode-cards,.multiplayer-actions{grid-template-columns:1fr}}