/* ============================================ THEME SYSTEM — CSS Custom Properties Synced with site's .dark class on and bridged to global palette variables ============================================ */ /* Light mode (default) */ .map-generator-container { --mg-bg-primary: var(--background-light, #f0f2f5); --mg-bg-secondary: var(--card-bg, #ffffff); --mg-bg-panel: var(--section-gradient-end, #e8ecf1); --mg-bg-input: rgba(0, 0, 0, 0.05); --mg-text: var(--text-dark, #1a1a2e); --mg-text-muted: var(--text-secondary, #555555); --mg-text-heading: var(--text-primary, #0f0f1a); --mg-border: var(--border-color, rgba(0, 0, 0, 0.12)); --mg-border-strong: rgba(0, 0, 0, 0.2); --mg-accent: var(--primary-color, #2563eb); --mg-accent-hover: var(--primary-color-dark, #1d4ed8); --mg-grid-color: rgba(0, 0, 0, 0.3); --mg-btn-secondary: #cbd5e0; --mg-btn-secondary-hover: #a0aec0; --mg-btn-danger: #e53e3e; --mg-btn-danger-hover: #c53030; --mg-shadow: rgba(0, 0, 0, 0.1); --mg-canvas-bg: #e5e5e5; --mg-accent-light: rgba(37, 99, 235, 0.15); --mg-accent-active: rgba(37, 99, 235, 0.25); --mg-accent-glow: rgba(37, 99, 235, 0.4); --mg-scrollbar-thumb: rgba(0, 0, 0, 0.2); --mg-scrollbar-track: rgba(0, 0, 0, 0.05); } /* Dark mode — triggered by site's .dark class on */ .dark .map-generator-container { --mg-bg-primary: var(--background-dark, #1a1a2e); --mg-bg-secondary: var(--card-bg, #16213e); --mg-bg-panel: var(--section-dark-end, #0f3460); --mg-bg-input: rgba(0, 0, 0, 0.3); --mg-text: var(--text-dark, #e0e0e0); --mg-text-muted: var(--text-secondary, #a0a0a0); --mg-text-heading: var(--text-light, #ffffff); --mg-border: var(--border-color, rgba(255, 255, 255, 0.1)); --mg-border-strong: rgba(255, 255, 255, 0.2); --mg-accent: var(--primary-color, #4a90d9); --mg-accent-hover: var(--primary-color-light, #5ba0e9); --mg-grid-color: rgba(255, 255, 255, 0.4); --mg-btn-secondary: #4a5568; --mg-btn-secondary-hover: #5a6578; --mg-btn-danger: #e53e3e; --mg-btn-danger-hover: #f56565; --mg-shadow: rgba(0, 0, 0, 0.3); --mg-canvas-bg: #2d2d2d; --mg-accent-light: rgba(74, 144, 217, 0.2); --mg-accent-active: rgba(74, 144, 217, 0.3); --mg-accent-glow: rgba(74, 144, 217, 0.5); --mg-scrollbar-thumb: rgba(255, 255, 255, 0.2); --mg-scrollbar-track: rgba(0, 0, 0, 0.1); } /* ============================================ LAYOUT CUSTOM PROPERTIES + GRID ============================================ */ .map-generator-container { --mg-header-height: 7rem; --mg-sidebar-width: 300px; --mg-touch-target: 44px; --mg-canvas-min-height: 400px; --mg-sidebar-max-height: none; display: grid; grid-template-columns: var(--mg-sidebar-width) 1fr; gap: 2rem; padding: 2rem; padding-top: var(--mg-header-height); min-height: calc(100vh - 200px); margin-bottom: 2rem; } .map-controls { background: var(--mg-bg-panel); backdrop-filter: blur(10px); padding: 1rem; border-radius: 8px; overflow-y: auto; max-height: calc(100vh - var(--mg-header-height) - 2rem); display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; scrollbar-color: var(--mg-scrollbar-thumb) var(--mg-scrollbar-track); position: sticky; top: var(--mg-header-height); align-self: start; } .map-canvas-container { position: relative; background: var(--mg-bg-secondary); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; overflow: hidden; /* Constrain to viewport so export buttons aren't cropped below the fold */ height: calc(100vh - var(--mg-header-height) - 2rem); } .canvas-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; } .canvas-header h3 { margin: 0; color: var(--mg-accent); } /* ── View-mode segmented toolbar (Map / Heightmap / Heatmap) ── */ .view-mode-toolbar { display: flex; align-items: center; gap: 0; margin-left: auto; margin-right: 0.8rem; } .view-mode-label { font-size: 0.75rem; color: var(--mg-text-muted); margin-right: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .view-mode-toolbar .view-btn { padding: 0.3rem 0.6rem; font-size: 0.78rem; border: 1px solid var(--mg-border-strong); background: var(--mg-bg-panel); color: var(--mg-text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; line-height: 1.2; border-radius: 0; font-weight: 500; text-transform: none; letter-spacing: normal; } /* Rounded ends for first/last buttons (connected segmented look) */ .view-mode-toolbar .view-btn:first-of-type { border-radius: 4px 0 0 4px; } .view-mode-toolbar .view-btn:last-of-type { border-radius: 0 4px 4px 0; } /* Collapse duplicate borders between adjacent buttons */ .view-mode-toolbar .view-btn + .view-btn { margin-left: -1px; } .view-mode-toolbar .view-btn:hover { background: var(--mg-bg-input); color: var(--mg-text); } .view-mode-toolbar .view-btn.active { background: var(--mg-accent); color: #fff; border-color: var(--mg-accent); z-index: 1; /* sit above neighbours so accent border isn't hidden */ position: relative; } /* Brush cursor indicator */ .brush-cursor { position: absolute; border-radius: 50%; pointer-events: none; /* Allow clicks to pass through */ border: 2px solid var(--mg-text-heading); box-shadow: 0 0 0 1px black, 0 0 5px var(--mg-shadow); /* Enhanced double border effect */ display: none; /* Hidden initially */ z-index: 100; transform: translate(-50%, -50%); /* Center on cursor */ transition: width 0.1s ease, height 0.1s ease; /* Smooth size transitions */ background-color: var(--mg-border); /* Slight fill for better visibility */ } /* Text input box for text tool */ .text-input-box { position: absolute; border: 1px dashed var(--mg-text-heading); background: var(--mg-bg-input); min-width: 100px; min-height: 40px; pointer-events: none; z-index: 99; } .text-editor { position: absolute; z-index: 200; background: var(--mg-bg-secondary); border: 1px solid var(--mg-accent); border-radius: 4px; padding: 8px; box-shadow: 0 0 20px var(--mg-shadow); display: none; } .text-editor textarea { width: 100%; min-height: 100px; background: var(--mg-bg-input); color: var(--mg-text); border: 1px solid var(--mg-border-strong); padding: 8px; font-family: inherit; } .text-editor-controls { display: flex; justify-content: flex-end; margin-top: 8px; gap: 8px; } #main-canvas { background: var(--mg-canvas-bg); border-radius: 4px; cursor: crosshair; width: 100%; flex: 1 1 0; touch-action: none; min-height: var(--mg-canvas-min-height); margin-bottom: 1rem; box-shadow: 0 4px 8px var(--mg-shadow); } .tool-panel, .generation-panel { margin-bottom: 1rem; padding: 1rem; background: var(--mg-bg-input); border-radius: 6px; box-shadow: 0 2px 4px var(--mg-shadow); } /* Constrain all selects and inputs in sidebar to parent width */ .map-controls select, .map-controls input[type="number"] { max-width: 100%; width: 100%; box-sizing: border-box; } .generation-panel select { text-overflow: ellipsis; overflow: hidden; } .shortcut-hint { font-size: 0.8em; color: var(--mg-text-muted); margin-left: 5px; } /* Tool buttons */ .tool-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; } /* Tool button styles */ .tool-btn { padding: 1rem; border: 2px solid var(--mg-accent); background: none; color: var(--mg-text); cursor: pointer; border-radius: 4px; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; position: relative; /* For shortcut positioning */ } .tool-btn:hover { background: var(--mg-accent-light); transform: translateY(-2px); } .tool-btn.active { background: var(--mg-accent); color: var(--mg-text-heading); box-shadow: 0 2px 5px var(--mg-shadow); } /* Keyboard shortcut indicator */ .tool-btn .shortcut { position: absolute; bottom: 2px; right: 2px; font-size: 0.6rem; background: var(--mg-bg-input); color: var(--mg-text); border-radius: 2px; padding: 1px 3px; } .brush-settings { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; } .color-picker { display: flex; gap: 0.8rem; align-items: center; } .color-picker input[type="color"] { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid var(--mg-border-strong); } .color-picker input[type="color"]:focus { outline: none; border-color: var(--mg-accent); } /* Tool options */ .tool-options { margin-top: 0.8rem; padding: 0.5rem; background: var(--mg-bg-input); border-radius: 4px; display: flex; flex-direction: column; gap: 0.5rem; } .tool-options label { display: flex; align-items: center; gap: 0.5rem; } .tool-options select, .tool-options input[type="text"] { width: 100%; padding: 0.3rem; margin-top: 0.3rem; background: var(--mg-bg-input); color: var(--mg-text); border: 1px solid var(--mg-border-strong); border-radius: 4px; } .tool-options select:focus, .tool-options input[type="text"]:focus { outline: none; border-color: var(--mg-accent); } /* Color history */ .color-history { margin-top: 1rem; background: var(--mg-bg-input); padding: 0.5rem; border-radius: 4px; } .color-history h4 { margin-top: 0; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--mg-text); } .color-swatches { display: flex; gap: 0.5rem; margin-top: 0.3rem; flex-wrap: wrap; } .color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid var(--mg-border-strong); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 4px var(--mg-shadow); } .color-swatch:hover { transform: scale(1.15); border-color: var(--mg-text-heading); box-shadow: 0 0 0 2px var(--mg-border-strong), 0 3px 6px var(--mg-shadow); } .generation-params { display: flex; flex-direction: column; gap: 0.8rem; margin: 1rem 0; } .generation-params h4 { margin-top: 0; margin-bottom: 0.5rem; color: var(--mg-accent); } .vtt-options { margin-top: 0.5rem; padding: 0.5rem; } .vtt-options label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .map-meta-controls { margin-top: auto; display: flex; gap: 1rem; justify-content: flex-end; } /* General button styles */ /* Scoped to .map-generator-container to beat main_style.css cascade */ .map-generator-container .btn { padding: 0.5rem 1rem; border-radius: 4px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; background-color: var(--mg-bg-panel); color: var(--mg-text); text-transform: none; letter-spacing: normal; font-size: inherit; overflow: visible; } /* Neutralize main_style.css gradient overlay — map generator has its own hover styles */ .map-generator-container .btn::before { display: none !important; } .map-generator-container .btn:hover { transform: translateY(-2px); box-shadow: 0 2px 5px var(--mg-shadow); color: var(--mg-text); text-shadow: none; } .map-generator-container .btn i { font-size: 0.9rem; } .map-generator-container .btn-primary { background-color: var(--mg-accent); color: #ffffff; } .map-generator-container .btn-primary:hover { background-color: var(--mg-accent-hover); color: #ffffff; } .map-generator-container .btn-secondary { background-color: var(--mg-btn-secondary); color: var(--mg-text-heading); } .map-generator-container .btn-tertiary { background-color: var(--mg-btn-secondary); color: var(--mg-text-heading); } .map-generator-container .btn-accent { background-color: #10b981; color: #ffffff; border: none; } .map-generator-container .btn-accent:hover { background-color: #059669; } .map-generator-container .btn-accent:disabled { opacity: 0.6; cursor: not-allowed; } .map-generator-container .btn-danger { background-color: var(--mg-btn-danger); color: #ffffff; } /* Improve input range appearance */ input[type="range"] { -webkit-appearance: none; width: 100%; height: 8px; background: var(--mg-border); border-radius: 4px; outline: none; } input[type="range"]:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--mg-accent); cursor: pointer; border-radius: 50%; box-shadow: 0 1px 3px var(--mg-shadow); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--mg-accent); cursor: pointer; border-radius: 50%; box-shadow: 0 1px 3px var(--mg-shadow); } /* Loading indicator styles */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--mg-shadow); display: none; justify-content: center; align-items: center; z-index: 1000; } .loading-spinner { border: 4px solid var(--mg-border-strong); border-top: 4px solid var(--mg-accent); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Loading progress indicator */ .loading-progress-container { display: flex; flex-direction: column; align-items: center; gap: 12px; } .loading-progress-bar { width: min(240px, 80vw); height: 6px; background: var(--mg-border-strong, #333); border-radius: 3px; overflow: hidden; margin-top: 12px; } .loading-progress-fill { height: 100%; width: 0%; background: var(--mg-accent, #e69b3a); border-radius: 3px; transition: width 0.3s ease; } .loading-step-label { color: var(--mg-text-muted, #999); font-size: 0.85rem; font-family: var(--mg-font, monospace); text-align: center; min-height: 1.2em; } /* Keyboard shortcuts overlay */ .shortcuts-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 1100; } .shortcuts-overlay.active { display: flex; } .shortcuts-panel { background: var(--mg-bg-section, #1e1e1e); border: 1px solid var(--mg-border, #444); border-radius: 8px; padding: 24px 32px; max-width: min(440px, 90vw); max-height: min(500px, 80vh); overflow-y: auto; width: 90%; color: var(--mg-text, #ccc); font-family: var(--mg-font, monospace); } .shortcuts-panel h3 { text-align: center; margin: 0 0 16px; color: var(--mg-text-heading, #e0e0e0); font-size: 1.1rem; } .shortcuts-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; } .shortcuts-grid kbd { display: inline-block; background: var(--mg-bg-input, #2a2a2a); border: 1px solid var(--mg-border, #444); border-radius: 3px; padding: 2px 8px; font-size: 0.85rem; font-family: var(--mg-font, monospace); color: var(--mg-accent, #e69b3a); text-align: center; min-width: 24px; } .shortcuts-grid .shortcut-desc { font-size: 0.85rem; color: var(--mg-text-muted, #999); } .shortcuts-divider { grid-column: 1 / -1; border: none; border-top: 1px solid var(--mg-border, #444); margin: 6px 0; } .shortcuts-close-hint { text-align: center; margin-top: 16px; font-size: 0.8rem; color: var(--mg-text-muted, #666); } /* Map hover tooltip */ .map-hover-tooltip { position: fixed; pointer-events: none; background: rgba(20, 20, 20, 0.92); border: 1px solid var(--mg-border, #444); border-radius: 4px; padding: 6px 10px; font-family: var(--mg-font, monospace); font-size: 0.78rem; color: var(--mg-text, #ccc); line-height: 1.5; z-index: 800; display: none; white-space: nowrap; max-width: 260px; } .map-hover-tooltip .tooltip-biome { color: var(--mg-accent, #e69b3a); font-weight: bold; } .map-hover-tooltip .tooltip-row { display: flex; gap: 8px; justify-content: space-between; } /* Brush size preview */ .brush-size-preview { display: flex; justify-content: center; align-items: center; height: 30px; margin: 8px 0; background: var(--mg-bg-input); border-radius: 4px; } #brush-size-indicator { width: 5px; height: 5px; border-radius: 50%; background-color: var(--mg-text-heading); transition: width 0.2s ease, height 0.2s ease; } /* Shape preview */ .shape-preview { display: flex; justify-content: space-around; margin-top: 10px; } .shape-preview > div { width: 40px; height: 40px; background: var(--mg-bg-input); border: 2px solid var(--mg-border-strong); cursor: pointer; transition: all 0.2s ease; } .shape-preview > div:hover { border-color: var(--mg-accent); background: var(--mg-accent-light); } .shape-preview > div.active { border-color: var(--mg-accent); background: var(--mg-accent-active); box-shadow: 0 0 10px var(--mg-accent-glow); } .shape-preview-rectangle { border-radius: 4px; } .shape-preview-circle { border-radius: 50%; } .shape-preview-line { position: relative; } .shape-preview-line::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--mg-text); transform: rotate(45deg); } /* ============================================ Scene Tools ============================================ */ .scene-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1rem; } /* ============================================ Grid Controls ============================================ */ .grid-controls { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; background: var(--mg-bg-input); border-radius: 4px; } .grid-controls label { display: flex; align-items: center; gap: 0.5rem; color: var(--mg-text); font-size: 0.9rem; } /* ============================================ Zoom Controls ============================================ */ .zoom-controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--mg-bg-input); border-radius: 4px; } .zoom-controls button { padding: 0.3rem 0.5rem; border: 1px solid var(--mg-border-strong); background: none; color: var(--mg-text); cursor: pointer; border-radius: 4px; transition: all 0.2s ease; } .zoom-controls button:hover { background: var(--mg-accent-light); border-color: var(--mg-accent); } .zoom-controls input[type="range"] { flex: 1; } .zoom-level { font-size: 0.85rem; color: var(--mg-text); min-width: 3.5em; text-align: center; } /* ============================================ Layer Panel ============================================ */ .layer-panel { background: var(--mg-bg-input); border-radius: 6px; box-shadow: 0 2px 4px var(--mg-shadow); overflow: hidden; } .layer-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.8rem; background: var(--mg-bg-input); cursor: pointer; user-select: none; } .layer-panel-header h4 { margin: 0; color: var(--mg-accent); font-size: 0.95rem; } .layer-panel-actions { display: flex; gap: 0.3rem; } .layer-panel-actions button { padding: 0.25rem 0.4rem; border: 1px solid var(--mg-border-strong); background: none; color: var(--mg-text); cursor: pointer; border-radius: 4px; font-size: 0.8rem; transition: all 0.2s ease; } .layer-panel-actions button:hover { background: var(--mg-accent-light); border-color: var(--mg-accent); } .layer-list { max-height: 200px; overflow-y: auto; padding: 0.3rem; scrollbar-width: thin; scrollbar-color: var(--mg-scrollbar-thumb) var(--mg-scrollbar-track); } .layer-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; color: var(--mg-text); font-size: 0.85rem; } .layer-item:hover { background: var(--mg-border); } .layer-item.active { background: var(--mg-accent-active); border-left: 3px solid var(--mg-accent); } .layer-item button { padding: 0.15rem 0.3rem; border: none; background: none; color: var(--mg-text); cursor: pointer; border-radius: 4px; font-size: 0.75rem; opacity: 0.6; transition: all 0.2s ease; } .layer-item button:hover { opacity: 1; background: var(--mg-border); } .layer-item .layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================ Export Dropdown ============================================ */ .export-dropdown { position: relative; display: inline-block; } .export-menu { position: absolute; top: 100%; right: 0; margin-top: 0.3rem; min-width: 160px; background: var(--mg-bg-secondary); border: 1px solid var(--mg-border-strong); border-radius: 6px; box-shadow: 0 4px 12px var(--mg-shadow); z-index: 200; padding: 0.3rem 0; display: none; } .export-menu.show { display: block; } .export-option { display: block; width: 100%; padding: 0.5rem 0.8rem; border: none; background: none; color: var(--mg-text); text-align: left; cursor: pointer; font-size: 0.9rem; transition: all 0.2s ease; } .export-option:hover { background: var(--mg-accent-light); } .export-menu hr { border: none; border-top: 1px solid var(--mg-border); margin: 0.3rem 0; } /* ============================================ Properties Panel ============================================ */ .properties-panel { position: absolute; top: 0; right: 0; width: min(260px, 90vw); height: 100%; background: var(--mg-bg-panel); backdrop-filter: blur(10px); border-left: 1px solid var(--mg-border-strong); border-radius: 0 8px 8px 0; transform: translateX(100%); transition: transform 0.2s ease; z-index: 150; display: flex; flex-direction: column; } .properties-panel.open { transform: translateX(0); } .properties-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--mg-border-strong); } .properties-header h4 { margin: 0; color: var(--mg-accent); font-size: 0.95rem; } .properties-header button { padding: 0.2rem 0.4rem; border: none; background: none; color: var(--mg-text); cursor: pointer; border-radius: 4px; font-size: 1rem; transition: all 0.2s ease; } .properties-header button:hover { background: var(--mg-border); } .properties-content { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.8rem; } /* ============================================ Stamp Grid ============================================ */ .stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem; overflow-y: auto; max-height: 200px; scrollbar-width: thin; scrollbar-color: var(--mg-scrollbar-thumb) var(--mg-scrollbar-track); } .stamp-item { padding: 0.6rem; border: 2px solid var(--mg-border-strong); background: var(--mg-bg-input); color: var(--mg-text); cursor: pointer; border-radius: 4px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; aspect-ratio: 1; transition: all 0.2s ease; } .stamp-item:hover { background: var(--mg-accent-light); border-color: var(--mg-accent); transform: translateY(-2px); box-shadow: 0 2px 5px var(--mg-shadow); } .stamp-item.active { background: var(--mg-accent-active); border-color: var(--mg-accent); box-shadow: 0 0 10px var(--mg-accent-glow); } .tool-section { overflow: hidden; } /* Scrollbar styling */ .map-controls::-webkit-scrollbar { width: 6px; } .map-controls::-webkit-scrollbar-track { background: var(--mg-scrollbar-track); } .map-controls::-webkit-scrollbar-thumb { background: var(--mg-scrollbar-thumb); border-radius: 3px; } /* ============================================ TOAST NOTIFICATIONS ============================================ */ .mg-toast-area { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .mg-toast { padding: 10px 16px; border-radius: 6px; font-size: 0.85rem; color: var(--mg-text); background: var(--mg-bg-panel); border: 1px solid var(--mg-border); box-shadow: 0 4px 12px var(--mg-shadow); opacity: 0; transform: translateX(40px); transition: opacity 0.3s, transform 0.3s; pointer-events: auto; max-width: 350px; word-wrap: break-word; } .mg-toast-visible { opacity: 1; transform: translateX(0); } .mg-toast-error { border-left: 4px solid var(--mg-btn-danger); } .mg-toast-success { border-left: 4px solid #48bb78; } .mg-toast-warning { border-left: 4px solid #ecc94b; } .mg-toast-info { border-left: 4px solid var(--mg-accent); } /* ============================================ Remix Banner ============================================ */ .remix-banner { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.10)); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 6px; color: var(--mg-text); font-size: 0.85rem; margin: 0.5rem; z-index: 50; } .remix-banner i { color: #7c3aed; font-size: 1rem; } .remix-banner strong { color: var(--mg-accent); } .remix-banner-close { margin-left: auto; background: none; border: none; color: var(--mg-text-muted); font-size: 1.2rem; cursor: pointer; padding: 0 0.3rem; line-height: 1; } .remix-banner-close:hover { color: var(--mg-text); } /* ============================================ World Map Climate Controls ============================================ */ .generation-params .param-group { margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--mg-border); } .generation-params .param-group h5, .map-history-panel h5 { margin: 0 0 0.4rem 0; font-size: 0.85rem; color: var(--mg-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .generation-params .param-group:last-child { border-bottom: none; } .toggle-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; } .toggle-row label { margin-bottom: 0; } .toggle-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .fantasy-sub-option { margin-left: 1rem; opacity: 0.5; pointer-events: none; transition: opacity 0.2s; } .fantasy-sub-option.active { opacity: 1; pointer-events: auto; } /* ============================================ Map History Thumbnails ============================================ */ .map-history-panel { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--mg-border); } .map-history-thumbnails { display: flex; gap: 6px; } .history-slot { width: 70px; height: 52px; border: 2px solid var(--mg-border-strong); border-radius: 4px; cursor: pointer; overflow: hidden; transition: border-color 0.2s, transform 0.15s; background: var(--mg-bg-input); display: flex; align-items: center; justify-content: center; } .history-slot.empty { cursor: default; opacity: 0.4; } .history-slot.empty::after { content: '—'; color: var(--mg-text-muted); font-size: 0.8rem; } .history-slot:not(.empty):hover { border-color: var(--mg-accent); transform: scale(1.05); } .history-slot:not(.empty):focus-visible { border-color: var(--mg-accent); outline: 2px solid var(--mg-accent); outline-offset: 2px; } .history-slot.active { border-color: var(--mg-accent); box-shadow: 0 0 6px var(--mg-accent-glow); } .history-slot img { width: 100%; height: 100%; object-fit: cover; } /* ============================================ Collapsible Panels ============================================ */ .panel-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 0.25rem 0; margin: -0.25rem 0 0.5rem 0; } .panel-header h3, .panel-header h4, .panel-header h5 { margin: 0; pointer-events: none; } .panel-header .panel-chevron { font-size: 0.75rem; color: var(--mg-text-muted); transition: transform 0.2s ease; pointer-events: none; } .panel-header.collapsed .panel-chevron { transform: rotate(-90deg); } .panel-body { overflow: hidden; transition: opacity 0.2s ease; opacity: 1; } .panel-body.collapsed { max-height: 0 !important; opacity: 0; margin: 0; padding: 0; pointer-events: none; } /* Subsection (param-group) collapsible headers */ .param-group-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .param-group-header h5 { margin: 0; pointer-events: none; } .param-group-header .param-chevron { font-size: 0.65rem; color: var(--mg-text-muted); transition: transform 0.2s ease; pointer-events: none; } .param-group-header.collapsed .param-chevron { transform: rotate(-90deg); } .param-group-body { overflow: hidden; transition: opacity 0.15s ease; opacity: 1; } .param-group-body.collapsed { max-height: 0 !important; opacity: 0; pointer-events: none; } /* ============================================ Biome Legend Panel ============================================ */ .legend-entries { display: flex; flex-direction: column; gap: 4px; margin-top: 0.5rem; max-height: 300px; overflow-y: auto; } .legend-entry { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--mg-text); } .legend-swatch { width: 16px; height: 16px; border-radius: 2px; border: 1px solid var(--mg-border); flex-shrink: 0; } /* (responsive breakpoints consolidated below) */ /* ============================================ Generate Button Feedback ============================================ */ @keyframes mg-gen-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--mg-accent-rgb, 79, 172, 254), 0.5); } 70% { box-shadow: 0 0 0 8px rgba(var(--mg-accent-rgb, 79, 172, 254), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--mg-accent-rgb, 79, 172, 254), 0); } } #generate-map.gen-success { animation: mg-gen-pulse 0.6s ease-out; } /* Generator dropdown overflow control */ .mg-select { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* ============================================ Responsive Breakpoints — 4-tier system Desktop (≥1200px) is the default — no query needed. ============================================ */ /* ── Tablet landscape (≤1199px) ── */ @media (max-width: 1199px) { .map-generator-container { --mg-sidebar-width: 260px; } } /* ── Tablet portrait (≤1023px) ── */ @media (max-width: 1023px) { .map-generator-container { --mg-sidebar-max-height: 35vh; grid-template-columns: 1fr; gap: 1rem; } .map-controls { order: -1; max-height: var(--mg-sidebar-max-height); overflow-y: auto; padding: 10px; border-right: none; border-bottom: 1px solid var(--mg-border); position: static; } .tool-section h4 { font-size: 0.8rem; } .map-canvas-container { height: calc(100vh - var(--mg-header-height) - 1rem); } .tool-buttons { grid-template-columns: repeat(4, 1fr); } .generation-params { flex-direction: row; flex-wrap: wrap; } .map-meta-controls { justify-content: center; } .properties-panel { position: static; width: 100%; max-width: none; margin-top: 8px; transform: none; border-left: none; border-radius: 8px; } .properties-panel.open { transform: none; } .layer-panel { position: static; width: 100%; margin-top: 8px; } .layer-list { max-height: 150px; } } /* ── Phone (≤767px) ── */ @media (max-width: 767px) { .map-generator-container { --mg-sidebar-max-height: 30vh; --mg-touch-target: 48px; --mg-header-height: 5rem; --mg-canvas-min-height: 200px; padding: var(--mg-header-height) 0.5rem 0.5rem; gap: 0.75rem; } .map-canvas-container { height: calc(100vh - var(--mg-header-height) - 1rem); } .tool-buttons { grid-template-columns: repeat(3, 1fr); gap: 0.35rem; } .tool-btn { padding: 0.6rem; font-size: 0.85rem; min-height: var(--mg-touch-target); } /* Hide keyboard shortcut hints on phone */ .tool-btn .shortcut { display: none; } .tool-panel, .generation-panel { padding: 0.75rem; } .brush-settings { gap: 0.5rem; } .color-picker input[type="color"] { width: 32px; height: 32px; } /* Canvas header stacks vertically */ .canvas-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* View mode toolbar full-width */ .view-mode-toolbar { margin-left: 0; width: 100%; } .view-mode-toolbar .view-btn { flex: 1; justify-content: center; font-size: 0.72rem; padding: 0.25rem 0.4rem; } /* Meta controls stack vertically full-width */ .map-meta-controls { flex-wrap: wrap; flex-direction: column; gap: 0.5rem; } .map-meta-controls .btn { width: 100%; justify-content: center; font-size: 0.75rem; padding: 4px 8px; min-height: var(--mg-touch-target); } .shape-preview > div { width: 32px; height: 32px; } .layer-list { max-height: 120px; } /* Properties panel as fixed bottom sheet on phone */ .properties-panel { position: fixed; top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: none; max-height: 40vh; height: auto; overflow-y: auto; border-left: none; border-radius: 12px 12px 0 0; border-top: 1px solid var(--mg-border-strong); transform: translateY(100%); z-index: 300; } .properties-panel.open { transform: translateY(0); } } /* ============================================ Touch Target Sizing (coarse pointer devices) ============================================ */ @media (pointer: coarse) { .map-generator-container .btn { min-height: var(--mg-touch-target); } .map-generator-container select, .map-generator-container input[type="number"] { min-height: var(--mg-touch-target); } .map-generator-container input[type="range"] { height: 12px; } .map-generator-container input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; } .map-generator-container input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; } .zoom-controls button { min-width: var(--mg-touch-target); min-height: var(--mg-touch-target); } .zoom-controls input[type="range"] { width: 120px; height: var(--mg-touch-target); } .tool-btn { min-height: var(--mg-touch-target); min-width: var(--mg-touch-target); } .layer-panel-actions button { min-width: var(--mg-touch-target); min-height: var(--mg-touch-target); } } /* ============================================ Reduced Motion Preference ============================================ */ @media (prefers-reduced-motion: reduce) { .map-generator-container *, .map-generator-container *::before, .map-generator-container *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================ Auto-Submit Dialog ============================================ */ .auto-submit-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; } .auto-submit-dialog { background: var(--mg-bg, #1a1612); border: 1px solid var(--mg-border, #3a3530); border-radius: 12px; padding: 1.5rem; max-width: 420px; width: 90%; color: var(--mg-text, #f0e8d8); } .auto-submit-dialog h3 { margin: 0 0 0.75rem; font-size: 1.1rem; } .auto-submit-dialog h3 i { color: var(--mg-accent, #c9a55a); margin-right: 0.5rem; } .auto-submit-dialog p { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.5; color: var(--mg-text-muted, #b0a898); } .auto-submit-dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; } /* ─── Save / Load Map Dialog ───────────────────────────── */ .map-save-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; } .map-save-dialog { background: var(--mg-bg, #1a1612); border: 1px solid var(--mg-border, #3a3530); border-radius: 12px; padding: 1.5rem; max-width: 440px; width: 90%; color: var(--mg-text, #f0e8d8); } .map-save-dialog h3 { margin: 0 0 1rem; font-size: 1.1rem; } .map-save-dialog h3 i { color: var(--mg-accent, #c9a55a); margin-right: 0.5rem; } .map-save-label { display: block; font-size: 0.85rem; color: var(--mg-text-muted, #b0a898); margin-bottom: 0.35rem; } .map-save-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--mg-border, #3a3530); border-radius: 6px; background: var(--mg-input-bg, #242018); color: var(--mg-text, #f0e8d8); font-size: 0.95rem; box-sizing: border-box; } .map-save-input:focus { outline: none; border-color: var(--mg-accent, #c9a55a); box-shadow: 0 0 0 2px rgba(201, 165, 90, 0.25); } .map-save-options { display: flex; gap: 1rem; margin: 1rem 0; } .map-save-checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; color: var(--mg-text, #f0e8d8); } .map-save-checkbox.disabled { opacity: 0.5; cursor: not-allowed; } .map-save-checkbox input[type="checkbox"] { accent-color: var(--mg-accent, #c9a55a); } .map-save-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; } /* Load dialog list */ .map-load-dialog { max-width: 500px; } .map-load-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; } .map-load-empty { text-align: center; color: var(--mg-text-muted, #b0a898); font-size: 0.9rem; padding: 2rem 0; } .map-load-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border: 1px solid var(--mg-border, #3a3530); border-radius: 8px; background: var(--mg-input-bg, #242018); color: var(--mg-text, #f0e8d8); cursor: pointer; text-align: left; width: 100%; font: inherit; transition: border-color 0.15s, background 0.15s; } .map-load-item:hover, .map-load-item:focus-visible { border-color: var(--mg-accent, #c9a55a); background: rgba(201, 165, 90, 0.08); outline: none; } .map-load-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .map-load-thumb-placeholder { width: 64px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(201, 165, 90, 0.1); border-radius: 4px; flex-shrink: 0; color: var(--mg-accent, #c9a55a); font-size: 1.2rem; } .map-load-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .map-load-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .map-load-meta { font-size: 0.75rem; color: var(--mg-text-muted, #b0a898); } .map-load-meta i { margin-right: 0.25rem; }