.button{align-items:center;border-radius:var(--border-radius-sm);border:none;cursor:pointer;display:block;justify-content:center;overflow:hidden;text-align:center;text-decoration:none;transition:all var(--transition-normal)}.button--small{font-size:.875rem;padding:var(--spacing-sm) var(--spacing-md)}.button--medium{font-size:1rem;padding:var(--spacing-md) var(--spacing-lg)}.button--large{font-size:1.125rem;padding:var(--spacing-lg) var(--spacing-xl)}.button--full{width:100%}.button--auto{width:auto}.button--primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));border:1px solid var(--color-primary);box-shadow:var(--shadow-lg);color:#fff}.button--primary:hover{box-shadow:var(--shadow-xl);background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary-light));border-color:var(--color-primary-light)}.button--secondary{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.button--secondary:hover{background:var(--color-surface);border-color:var(--color-primary-light);color:var(--color-primary-light)}.button--success{background:linear-gradient(135deg,var(--color-success),var(--color-secondary));color:#fff;box-shadow:var(--shadow-lg)}.button--success:hover{box-shadow:var(--shadow-xl);background:linear-gradient(135deg,var(--color-secondary),var(--color-secondary-light))}.button--warning{background:linear-gradient(135deg,var(--color-warning),var(--color-accent));color:#fff;box-shadow:var(--shadow-lg)}.button--warning:hover{box-shadow:var(--shadow-xl);background:linear-gradient(135deg,var(--color-accent),var(--color-accent-light))}.button--error{background:linear-gradient(135deg,var(--color-error),#dc2626);color:#fff;box-shadow:var(--shadow-lg)}.button--error:hover{box-shadow:var(--shadow-xl);background:linear-gradient(135deg,#dc2626,#ef4444)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.button:disabled:hover{background:inherit;border-color:inherit;color:inherit;box-shadow:none}.button__icon{margin-right:var(--spacing-sm);font-size:1.25rem}@media (max-width: 768px){.button--large{min-width:180px;padding:var(--spacing-md) var(--spacing-xl)}.button--medium{min-width:100px;padding:var(--spacing-sm) var(--spacing-md)}.button--small{min-width:70px;padding:var(--spacing-xs) var(--spacing-sm)}}.container{background-color:var(--color-slate-purple);border-radius:.5rem;margin:2rem 0;padding:2rem;box-shadow:0 0 10px #00000080}.input{display:inline-block;width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:inherit;font-size:var(--text-size-md);line-height:1.5;transition:border-color .2s ease,box-shadow .2s ease}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-bg)}.input:disabled{background-color:var(--color-bg-disabled);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.input::placeholder{color:var(--color-text-secondary)}.input--error{border-color:var(--color-error-border)}.input--error:focus{border-color:var(--color-error-border);box-shadow:0 0 0 2px var(--color-error-bg)}.input--small{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--text-size-sm)}.input--medium{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-size-md)}.input--large{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--text-size-lg)}.logo{align-items:center;display:flex;justify-content:center}.logo__image{align-items:center;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:50%;box-shadow:var(--shadow-xl);display:flex;justify-content:center;position:relative}.logo__icon{font-size:var(--icon-size-xl);line-height:1}.logo--small .logo__image{height:60px;width:60px}.logo--small .logo__icon{font-size:var(--icon-size-lg)}.logo--medium .logo__image{height:var(--logo-size);width:var(--logo-size)}.logo--medium .logo__icon{font-size:var(--icon-size-xl)}.logo--large .logo__image{height:160px;width:160px}.logo--large .logo__icon{font-size:4rem}.logo--animated{animation:logo-float var(--animation-duration-slow) ease-in-out infinite}@keyframes logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(var(--animation-float-distance))}}@media (max-width: 480px){.logo--medium .logo__image{width:var(--logo-size-mobile);height:var(--logo-size-mobile)}.logo--medium .logo__icon{font-size:var(--icon-size-lg)}.logo--large .logo__image{width:120px;height:120px}.logo--large .logo__icon{font-size:3rem}}.modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md)}.modal{background:var(--color-background);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);max-width:90vw;max-height:90vh;width:100%;max-width:600px;display:flex;flex-direction:column;outline:none}.modal__header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-lg)}.modal__title{margin:0;font-size:var(--text-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.modal__close-button{background:none;border:none;font-size:var(--text-size-xl);color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs);line-height:1;border-radius:var(--border-radius-sm);transition:color var(--transition-fast)}.modal__close-button:hover{color:var(--color-text-primary);background-color:var(--color-background-hover)}.modal__content{padding:var(--spacing-lg);overflow-y:auto;flex:1}@media (max-width: 768px){.modal-backdrop{padding:var(--spacing-sm)}.modal{max-width:100%;max-height:95vh}.modal__header,.modal__content{padding:var(--spacing-md)}}.range-slider{display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:120px}.range-slider__header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm)}.range-slider__label{font-size:var(--text-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0}.range-slider__input{flex:1;height:6px;border-radius:3px;background:var(--color-border);outline:none;cursor:pointer;transition:all var(--transition-normal);-webkit-appearance:none;appearance:none}.range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.range-slider__input::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}.range-slider__input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));cursor:pointer;border:none;box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.range-slider__input::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}.range-slider__input::-webkit-slider-track{height:6px;border-radius:3px;background:var(--color-border)}.range-slider__input::-moz-range-track{height:6px;border-radius:3px;background:var(--color-border);border:none}.range-slider__value{font-size:var(--text-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-align:right}.range-slider--disabled .range-slider__input{opacity:.5;cursor:not-allowed}.range-slider--disabled .range-slider__input::-webkit-slider-thumb{cursor:not-allowed}.range-slider--disabled .range-slider__input::-moz-range-thumb{cursor:not-allowed}.range-slider--disabled .range-slider__value{opacity:.5}@media (max-width: 768px){.range-slider{min-width:100px}.range-slider__value{font-size:var(--text-size-xs)}}.select{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}.select__label{font-family:var(--font-family-primary);font-size:var(--text-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);white-space:nowrap;cursor:pointer;transition:color var(--transition-fast)}.select__label:hover{color:var(--color-primary)}.select__input{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);color:var(--color-text);font-family:var(--font-family-primary);font-size:var(--text-size-sm);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--spacing-sm) center;background-repeat:no-repeat;background-size:1rem;padding-right:var(--spacing-xl)}.select__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.select__input:hover{border-color:var(--color-primary-light)}.select__input:disabled{background-color:var(--color-surface);color:var(--color-text-muted);cursor:not-allowed;opacity:.6}.select--horizontal{flex-direction:row;align-items:center;gap:var(--spacing-sm)}.select--horizontal .select__label{margin-bottom:0;flex-shrink:0}.select--horizontal .select__input{flex:1;min-width:0}.esc-menu__content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.save-game-dialog{display:flex;flex-direction:column;gap:var(--spacing-md);min-width:400px}.save-game-dialog__content{display:flex;flex-direction:column;gap:var(--spacing-md)}.save-game-dialog__field{display:flex;flex-direction:column;gap:var(--spacing-xs)}.save-game-dialog__label{font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.save-game-dialog__error{padding:var(--spacing-sm);background-color:var(--color-error-bg);color:var(--color-error-text);border:1px solid var(--color-error-border);border-radius:var(--border-radius-sm);font-size:var(--text-size-sm)}.save-game-dialog__info{padding:var(--spacing-sm);background-color:var(--color-info-bg);border:1px solid var(--color-info-border);border-radius:var(--border-radius-sm);font-size:var(--text-size-sm);color:var(--color-text-secondary)}.save-game-dialog__info p{margin:0 0 var(--spacing-xs) 0;font-weight:var(--font-weight-medium)}.save-game-dialog__info ul{margin:0;padding-left:var(--spacing-md)}.save-game-dialog__info li{margin-bottom:var(--spacing-xs)}.save-game-dialog__actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end;padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}.load-game-dialog{display:flex;flex-direction:column;gap:var(--spacing-md);min-width:500px;max-height:600px}.load-game-dialog__content{display:flex;flex-direction:column;gap:var(--spacing-md);flex:1;overflow:hidden}.load-game-dialog__error{padding:var(--spacing-sm);background-color:var(--color-error-bg);color:var(--color-error-text);border:1px solid var(--color-error-border);border-radius:var(--border-radius-sm);font-size:var(--text-size-sm)}.load-game-dialog__loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);color:var(--color-text-secondary);font-style:italic}.load-game-dialog__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);text-align:center;color:var(--color-text-secondary)}.load-game-dialog__empty p{margin:0 0 var(--spacing-sm) 0}.load-game-dialog__saves{display:flex;flex-direction:column;gap:var(--spacing-sm);overflow-y:auto;max-height:400px}.load-game-dialog__save-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);cursor:pointer;transition:all .2s ease;background-color:var(--color-bg-secondary)}.load-game-dialog__save-item:hover{background-color:var(--color-bg-hover);border-color:var(--color-primary)}.load-game-dialog__save-item--selected{background-color:var(--color-primary-bg);border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.load-game-dialog__save-info{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1}.load-game-dialog__save-name{font-weight:var(--font-weight-medium);color:var(--color-text-primary);font-size:var(--text-size-md)}.load-game-dialog__save-meta{display:flex;gap:var(--spacing-sm);font-size:var(--text-size-sm);color:var(--color-text-secondary)}.load-game-dialog__save-details{display:flex;gap:var(--spacing-md);font-size:var(--text-size-sm);color:var(--color-text-secondary)}.load-game-dialog__save-actions{display:flex;gap:var(--spacing-xs)}.load-game-dialog__actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end;padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}.save-load-menu{display:flex;flex-direction:column;gap:var(--spacing-sm)}.save-load-menu__status{color:var(--color-text-secondary);font-size:var(--text-size-xs);font-style:italic;text-align:center}.board{align-items:center;display:flex;justify-content:center;width:100%;height:100%;min-height:0}.board__canvas{image-rendering:optimizeQuality}.game-status{display:flex;gap:1.5rem}.game-status__item{font-size:.875rem;color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}@media (max-width: 768px){.game-status{gap:1rem}}.time-controls{align-items:center;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;flex-direction:row;gap:var(--spacing-md);padding:var(--spacing-sm)}.time-controls__actions,.time-controls__speed{align-items:center;display:flex;gap:var(--spacing-xs)}@media (max-width: 768px){.time-controls{padding:var(--spacing-xs);gap:var(--spacing-sm);flex-direction:column}}.zoom-controls{align-items:center;display:flex;gap:.5rem}.zoom-controls__buttons{display:flex;gap:.25rem}.map-generation-controls__actions{margin-bottom:var(--spacing-md)}.map-generation-controls__actions .button{width:100%}.map-generation-controls__error{background:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error);border-radius:var(--border-radius);padding:var(--spacing-sm);margin-bottom:var(--spacing-md);font-size:var(--text-size-sm)}.map-generation-controls__info{background:var(--color-background-subtle);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-sm);margin-top:var(--spacing-md)}.map-generation-controls__info h4{margin:0 0 var(--spacing-sm) 0;color:var(--color-text-primary);font-size:var(--text-size-md)}.map-generation-controls__info p{margin:var(--spacing-xs) 0;color:var(--color-text-secondary);font-size:var(--text-size-sm)}.map-generation-controls__warnings{margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}.map-generation-controls__warnings h5{margin:0 0 var(--spacing-xs) 0;color:var(--color-warning);font-size:var(--text-size-sm)}.map-generation-controls__warnings ul{margin:0;padding-left:var(--spacing-md);color:var(--color-warning);font-size:var(--text-size-xs)}.map-generation-controls__warnings li{margin:var(--spacing-xs) 0}.game-top-bar{background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm);flex-shrink:0;height:4rem}.game-top-bar__content{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 1.5rem;max-width:100%}.game-top-bar__section{display:flex;align-items:center;gap:1rem}.game-top-bar__time-controls{min-width:250px}.game-top-bar__time-controls .time-controls{padding:0;background:transparent;border:none;gap:var(--spacing-md);height:auto}.game-top-bar__time-controls .time-controls__speed{min-width:120px;max-width:150px}.game-top-bar__status{display:flex;gap:1.5rem}.game-top-bar__status-item{font-size:.875rem;color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}@media (max-width: 768px){.game-top-bar{height:auto;min-height:4rem}.game-top-bar__content{padding:0 1rem;flex-wrap:wrap;height:auto;min-height:4rem}.game-top-bar__section{gap:.75rem}.game-top-bar__time-controls{min-width:200px}.game-top-bar__time-controls .time-controls__speed{min-width:100px;max-width:120px}.game-top-bar__status{gap:1rem}}.character-info{flex:1;min-width:15rem}.character-info__title{color:var(--color-text-muted);font-size:.875rem;font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin:0 0 .5rem;text-transform:uppercase}.character-info__item{display:flex;flex-direction:column;gap:var(--spacing-xs);margin:0;color:var(--color-text)}.character-info__name{font-weight:var(--font-weight-semibold);color:var(--color-primary)}.character-info__stats{color:var(--color-secondary);font-weight:var(--font-weight-semibold)}.character-info__position{color:var(--color-text-muted)}.character-info__none{color:var(--color-text-muted);font-style:italic}@media (max-width: 768px){.character-info{min-width:12rem}}.tile-info{flex:1;min-width:8rem}.tile-info__title{color:var(--color-text-muted);font-size:.875rem;font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin:0 0 var(--spacing-sm) 0;text-transform:uppercase}.tile-info__item{display:flex;flex-direction:column;gap:var(--spacing-xs);margin:0;color:var(--color-text)}.tile-info__position{color:var(--color-text-muted)}.tile-info__note,.tile-info__none{color:var(--color-text-muted);font-style:italic}.tile-info__terrain{margin-top:var(--spacing-sm)}.tile-info__terrain-name{font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-xs)}.tile-info__terrain-description{color:var(--color-text-muted);line-height:1.4}@media (max-width: 768px){.tile-info{min-width:12rem}}.game-bottom-bar{background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-sm);flex-shrink:0;height:12rem}.game-bottom-bar__content{align-items:start;display:flex;height:100%;max-width:100%;padding:1rem 1.5rem}.game-bottom-bar__info{display:flex;gap:2rem;justify-content:space-between;width:100%}@media (max-width: 768px){.game-bottom-bar{height:5rem}.game-bottom-bar__content{padding:.75rem 1rem}.game-bottom-bar__info{gap:1rem;flex-direction:column;align-items:flex-start}}.game{display:flex;flex-direction:column;height:100vh;background:var(--color-background);position:relative}.game__content{flex:1;display:flex;overflow:hidden}.game__controls{width:300px;min-width:300px;background:var(--color-surface);border-right:1px solid var(--color-border);overflow-y:auto;padding:var(--spacing-md)}.game__board-container{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:auto;background:var(--color-background)}.title-screen{align-items:center;background:linear-gradient(135deg,var(--color-background) 0%,var(--color-surface) 100%);display:flex;flex-direction:column;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.title-screen:before{background:radial-gradient(circle at var(--gradient-position-bottom-left),var(--color-primary-light) 0%,transparent var(--gradient-fade-distance)),radial-gradient(circle at var(--gradient-position-top-right),var(--color-secondary-light) 0%,transparent var(--gradient-fade-distance));content:"";inset:0;opacity:var(--overlay-opacity-subtle);position:absolute;z-index:1}.title-screen__content{max-width:var(--content-max-width);padding:var(--spacing-2xl);position:relative;text-align:center;z-index:2}.title-screen__logo{margin-bottom:var(--spacing-xl)}.title-screen__title{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:var(--color-text);font-family:var(--font-family-display);font-size:var(--heading-size-xl);font-weight:var(--font-weight-bold);letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--spacing-md);text-shadow:var(--shadow-lg)}.title-screen__description{color:var(--color-text-muted);margin:0 0 var(--spacing-2xl);text-align:left}.title-screen__actions{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md)}.title-screen__footer{color:var(--color-text-muted);font-size:.875rem}@media (max-width: 768px){.title-screen__content{padding:var(--spacing-xl);max-width:100%}.title-screen__title{font-size:var(--heading-size-lg)}}@media (max-width: 480px){.title-screen__title{font-size:var(--heading-size-md)}}:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #3b82f6;--color-secondary: #10b981;--color-secondary-dark: #059669;--color-secondary-light: #34d399;--color-accent: #f59e0b;--color-accent-dark: #d97706;--color-accent-light: #fbbf24;--color-background: #ffffff;--color-background-dark: #0f172a;--color-surface: #f8fafc;--color-surface-dark: #1e293b;--color-text: #1e293b;--color-text-dark: #f1f5f9;--color-text-muted: #64748b;--color-text-muted-dark: #94a3b8;--color-border: #e2e8f0;--color-border-dark: #334155;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-display: "Poppins", var(--font-family-primary);--font-weight-normal: 400;--font-weight-semibold: 600;--font-weight-bold: 800;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--border-radius-sm: .5rem;--border-radius-md: 1rem;--border-radius-lg: 1.5rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out;--content-max-width: 600px;--logo-size: 120px;--logo-size-mobile: 100px;--heading-size-xl: 3.5rem;--heading-size-lg: 2.5rem;--heading-size-md: 2rem;--text-size-lg: 1.25rem;--text-size-md: 1rem;--text-size-sm: .875rem;--text-size-xs: .75rem;--icon-size-xl: 3rem;--icon-size-lg: 2.5rem;--animation-duration-slow: 3s;--animation-float-distance: -10px;--overlay-opacity-subtle: .1;--gradient-position-bottom-left: 20% 80%;--gradient-position-top-right: 80% 20%;--gradient-fade-distance: 50%}@media (prefers-color-scheme: dark){:root{--color-background: var(--color-background-dark);--color-surface: var(--color-surface-dark);--color-text: var(--color-text-dark);--color-text-muted: var(--color-text-muted-dark);--color-border: var(--color-border-dark)}}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:var(--font-family-primary);background-color:var(--color-background);color:var(--color-text);line-height:1.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}