.builder-shell { width: min(1800px, 100%); margin: auto; padding: 18px clamp(8px, 2vw, 28px) 40px; }
.builder-commandbar { display: grid; grid-template-columns: minmax(210px, 1.35fr) minmax(150px, .7fr) minmax(170px, .6fr) auto auto auto; gap: 8px; align-items: end; margin-bottom: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #17120e; }
.builder-commandbar label { display: grid; gap: 4px; }
.builder-commandbar label span, .builder-roster-tools h2 { color: var(--gold); font-size: .49rem; text-transform: uppercase; letter-spacing: .08em; }
.builder-commandbar input, .builder-commandbar select, .builder-roster-tools select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-bright); border-radius: 6px; color: var(--ink); background: #100d0b; font: inherit; font-size: .62rem; }
.builder-board-size { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: end; gap: 5px; }
.builder-board-size label { min-width: 58px; }
.builder-board-size b, .builder-board-size small { padding-bottom: 9px; color: var(--muted); font-size: .52rem; }
.builder-board-size input { text-align: center; }
.builder-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 275px; gap: 10px; align-items: start; }
.builder-palette, .builder-board-panel, .builder-inspector { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #15110e; }
.builder-palette, .builder-inspector { position: sticky; top: 82px; max-height: calc(100vh - 96px); overflow-y: auto; }
.builder-palette > header, .saved-scenes > header { padding: 13px; border-bottom: 1px solid var(--line); }
.builder-palette header span, .saved-scenes header span { display: block; color: var(--gold); font-size: .48rem; text-transform: uppercase; letter-spacing: .09em; }
.builder-palette header strong { display: block; margin-top: 2px; font-size: .69rem; }
.builder-object-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; }
.builder-object-button { display: grid; min-height: 72px; place-items: center; align-content: center; padding: 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); background: rgb(255 255 255 / 1%); cursor: pointer; }
.builder-object-button:hover { border-color: var(--gold); }
.builder-object-button span { color: var(--gold-bright); font-size: 1rem; }
.builder-object-button b { margin-top: 3px; font-size: .49rem; }
.builder-roster-tools { display: grid; gap: 7px; padding: 12px; border-top: 1px solid var(--line); }
.builder-roster-tools h2:not(:first-child) { margin-top: 9px; }
.builder-board-toolbar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.builder-board-toolbar p, .builder-board-toolbar span { font-size: .51rem; }
.builder-board-toolbar span { color: var(--gold); white-space: nowrap; }
.builder-board { position: relative; width: 100%; overflow: hidden; aspect-ratio: 14 / 9; background: #25251e; touch-action: none; user-select: none; }
.builder-terrain { position: absolute; inset: 0; pointer-events: none; }
.builder-board[data-terrain="courtyard"] .builder-terrain, .battlefield[data-terrain="courtyard"] .battlefield__terrain { background: radial-gradient(circle, rgb(94 89 70 / 22%) 1px, transparent 1.5px), linear-gradient(145deg, #313329, #23251e); background-size: 34px 31px, auto; }
.builder-board[data-terrain="forest"] .builder-terrain, .battlefield[data-terrain="forest"] .battlefield__terrain { background: radial-gradient(circle at 25% 30%, rgb(72 111 66 / 45%), transparent 23%), radial-gradient(circle at 80% 70%, rgb(65 93 56 / 38%), transparent 22%), linear-gradient(145deg, #263323, #172018); }
.builder-board[data-terrain="cave"] .builder-terrain, .battlefield[data-terrain="cave"] .battlefield__terrain { background: radial-gradient(ellipse at 35% 35%, #373631, transparent 35%), radial-gradient(ellipse at 70% 65%, #302e2a, transparent 28%), #1d1c1a; }
.builder-board[data-terrain="ruins"] .builder-terrain, .battlefield[data-terrain="ruins"] .battlefield__terrain { background: repeating-linear-gradient(7deg, transparent 0 34px, rgb(207 185 145 / 5%) 35px 36px), linear-gradient(140deg, #36332c, #24221f); }
.builder-board[data-terrain="swamp"] .builder-terrain, .battlefield[data-terrain="swamp"] .battlefield__terrain { background: radial-gradient(ellipse at 20% 30%, rgb(42 82 75 / 45%), transparent 22%), radial-gradient(ellipse at 73% 65%, rgb(48 77 64 / 42%), transparent 26%), linear-gradient(145deg, #293329, #17221d); }
.builder-object, .runtime-object { position: absolute; z-index: 5; display: grid; min-width: 0; padding: 0; place-items: center; overflow: hidden; border: 1px solid #796248; border-radius: 4px; color: #e1c78f; background: #4a3825; box-shadow: 0 5px 15px rgb(0 0 0 / 38%); transform: translate(-50%, -50%); cursor: grab; }
.builder-object.is-selected, .runtime-object.is-selected { outline: 3px solid var(--gold-bright); outline-offset: 2px; }
.builder-object span, .runtime-object span { font-size: clamp(.48rem, 1.3vw, .9rem); text-shadow: 0 2px 5px #000; pointer-events: none; }
.builder-object--wall, .runtime-object--wall { background: repeating-linear-gradient(90deg, #5a5144 0 18px, #37332d 18px 20px); }
.builder-object--crate, .runtime-object--crate, .builder-object--table, .runtime-object--table, .builder-object--barrel, .runtime-object--barrel { background: linear-gradient(45deg, transparent 46%, #7e5b34 47% 53%, transparent 54%), #4b3621; }
.builder-object--fountain, .runtime-object--fountain { border: 5px solid #686357; border-radius: 50%; background: radial-gradient(circle, #42676d, #193238 65%, #30312c 66%); }
.builder-object--rock, .runtime-object--rock { border-radius: 45% 55% 48% 52%; background: linear-gradient(145deg, #625e54, #34332e); }
.builder-object--tree, .runtime-object--tree { border-radius: 50%; background: radial-gradient(circle, #496447 0 52%, #293a28 53% 70%, #4b3624 71%); }
.builder-object--fire, .runtime-object--fire { border-color: #a85f32; border-radius: 50%; background: radial-gradient(circle, #ffd060, #c24e27 48%, rgb(79 25 17 / 65%) 72%); box-shadow: 0 0 22px rgb(225 90 36 / 55%); }
.builder-object--rubble, .runtime-object--rubble { border-style: dashed; background: radial-gradient(circle at 20% 30%, #666158 0 12%, transparent 13%), radial-gradient(circle at 70% 65%, #514d46 0 17%, transparent 18%), #302e2a; }
.builder-token { position: absolute; z-index: 14; display: grid; min-width: 0; padding: 0; place-items: center; border: 2px solid #d2b477; border-radius: 50%; color: #171009; background: radial-gradient(circle at 35% 30%, #efd18e, #9d7137); box-shadow: 0 4px 12px rgb(0 0 0 / 48%); transform: translate(-50%, -50%); cursor: grab; }
.builder-token.is-enemy { border-color: #d28b7e; color: #f3dfd7; background: radial-gradient(circle at 35% 30%, #965347, #4c231f); }
.builder-token.is-selected { outline: 3px solid var(--gold-bright); outline-offset: 2px; }
.builder-token span { font: 700 clamp(.45rem, 1.1vw, .65rem) Cinzel, Georgia, serif; pointer-events: none; }
.builder-inspector > section:first-child { min-height: 245px; padding: 15px; }
.builder-inspector h2 { font-size: .85rem; }
.builder-inspector p { margin-top: 5px; font-size: .54rem; }
.builder-inspector dl { display: grid; gap: 5px; margin-top: 13px; }
.builder-inspector dl div { display: flex; justify-content: space-between; gap: 10px; font-size: .51rem; }
.builder-inspector dt { color: var(--gold); }
.builder-inspector-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 14px; }
.builder-inspector-actions button { min-height: 34px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); background: #19130f; font-size: .48rem; cursor: pointer; }
.builder-inspector-actions .is-danger { color: #dfa096; border-color: #6f403a; }
.builder-size-editor, .runtime-size-editor { display: grid; gap: 9px; margin-top: 14px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 1%); }
.builder-size-editor > span, .runtime-size-editor > span { color: var(--gold); font-size: .48rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.builder-size-editor label, .runtime-size-editor label { display: grid; gap: 5px; }
.builder-size-editor label span, .runtime-size-editor label span { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .49rem; }
.builder-size-editor output, .runtime-size-editor output { color: var(--gold-bright); font-weight: 750; }
.builder-size-editor input[type="range"], .runtime-size-editor input[type="range"] { width: 100%; height: 18px; accent-color: var(--gold-bright); cursor: ew-resize; }
.runtime-size-editor { width: 100%; margin-top: 0; }
.gm-controls > .runtime-size-editor { display: grid; }
.saved-scenes { border-top: 1px solid var(--line); }
.saved-scene { display: grid; grid-template-columns: 1fr auto; gap: 5px; padding: 9px 12px; border-bottom: 1px solid rgb(197 155 82 / 9%); }
.saved-scene button { border: 0; color: var(--ink); background: transparent; font-size: .52rem; text-align: left; cursor: pointer; }
.saved-scene small { display: block; color: var(--muted); }
.saved-scene .is-delete { color: #c8867c; }
@media (max-width: 1150px) { .builder-layout { grid-template-columns: 200px minmax(0, 1fr); } .builder-inspector { position: relative; top: auto; max-height: none; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } .saved-scenes { border-top: 0; border-left: 1px solid var(--line); } .builder-commandbar { grid-template-columns: 1fr 1fr 1fr; } .builder-commandbar .demo-button--primary { grid-column: span 2; } }
@media (max-width: 760px) { .builder-commandbar { grid-template-columns: 1fr 1fr; } .builder-commandbar label:first-child { grid-column: 1 / -1; } .builder-commandbar .demo-button--primary { grid-column: 1 / -1; } .builder-layout { display: flex; flex-direction: column; } .builder-palette, .builder-inspector, .builder-board-panel { position: relative; top: auto; width: 100%; max-height: none; } .builder-board-panel { order: 1; } .builder-palette { order: 2; } .builder-inspector { order: 3; display: block; } .builder-object-grid { grid-template-columns: repeat(4, 1fr); } .saved-scenes { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 500px) { .builder-shell { padding: 8px 6px 30px; } .builder-commandbar { grid-template-columns: 1fr; } .builder-commandbar label:first-child, .builder-commandbar .demo-button--primary { grid-column: auto; } .builder-object-grid { grid-template-columns: repeat(3, 1fr); } .builder-board-toolbar p { display: none; } .builder-board-size { grid-template-columns: 1fr auto 1fr auto; } }