/* Battle Barge — Custom Map Builder styling ============================================================ Used by /static/bb/js/bb-map-builder.js. The builder draws into a fullscreen overlay (.map-builder-overlay) that gets appended to when window.BBMapBuilder.open() is called, so these rules need to be in scope on every shell page. Tokens: every var() resolves through the bb-tokens.css alias block (--color-gold → --bb-accent-primary, --space-* → --bb-space-*, etc.) — same pattern the legacy HH/TOW component CSS uses inside the unified shell. --color-gold-dark didn't have an alias so it falls back to a translucent gold. ============================================================ */ .map-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-sm); } .map-tool { min-width: 44px; min-height: 44px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; } .map-tool.active { border-color: var(--color-gold); background: var(--color-gold-dark, rgba(212,175,55,0.18)); color: var(--color-gold); } .map-zone-options { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); align-items: center; } .map-zone-shapes, .map-zone-modes { display: flex; gap: 4px; } .map-shape, .map-mode { min-width: 44px; min-height: 36px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; } .map-shape.active { border-color: var(--color-gold); background: var(--color-gold-dark, rgba(212,175,55,0.18)); color: var(--color-gold); } .map-mode.active[data-mode="add"] { border-color: var(--color-gold); background: var(--color-gold-dark, rgba(212,175,55,0.18)); color: var(--color-gold); } .map-mode.active[data-mode="subtract"] { border-color: #e05050; background: rgba(224, 80, 80, 0.2); color: #e05050; } .map-canvas-container { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; } .map-canvas-container canvas { max-width: 100%; height: auto; cursor: crosshair; border-radius: var(--radius-sm); } .map-canvas-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-xs); flex-wrap: wrap; gap: var(--space-xs); } .map-element-count { font-size: 0.7rem; color: var(--color-text-muted); } .map-tool-hint { font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: var(--space-sm); min-height: 1.2em; } .map-subtract-toggle { font-size: 0.65rem; color: var(--color-text-secondary); display: flex; align-items: center; gap: 4px; cursor: pointer; } /* Map Builder Overlay */ .map-builder-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-bg); z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch; } .map-builder-header { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; } .map-builder-title { font-weight: 600; color: var(--color-gold); font-size: 1rem; } .map-builder-body { padding: var(--space-md); max-width: 900px; margin: 0 auto; } .map-builder-content .form-group { margin-bottom: var(--space-md); }