#puzzles-root { max-width: 1500px; margin: 0 auto; padding: 1.2rem; }
.pe-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pe-heading h1 { margin-bottom: .25rem; }
.pe-heading p { color: var(--muted); }
.pe-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; }
.pe-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.pe-metadata { grid-template-columns: 2fr 1.5fr 1fr 1fr; margin: 1rem 0; }
#puzzles-root label { display: grid; gap: .3rem; font-size: .9rem; }
#puzzles-root input, #puzzles-root select, #puzzles-root textarea { min-width: 0; max-width: 100%; width: 100%; }
#puzzles-root input[type="checkbox"] { width: auto; }
#puzzles-root textarea { font: inherit; border: 1px solid var(--line); border-radius: 7px; padding: .6rem; background: var(--panel); color: var(--ink); }
.pe-editor-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); gap: 1rem; margin: 1rem 0; }
.pe-canvas-panel, .pe-tools, .pe-team-panel, .pe-library { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 1rem; }
.pe-canvas-panel { align-self: start; }
.pe-board { width: 100%; display: block; touch-action: manipulation; }
.pe-cell { cursor: pointer; }
.pe-cell polygon { fill: var(--paper); stroke: var(--line); stroke-width: .9; }
.pe-cell:hover polygon, .pe-cell:focus polygon { stroke: var(--ink); stroke-width: 2; }
.pe-cell.pe-selected polygon { stroke: var(--danger); stroke-width: 2.5; }
.pe-spawn-yellow polygon { fill: #fff1a8; }
.pe-spawn-blue polygon { fill: #bcdcff; }
.pe-water polygon { fill: var(--water); }
.pe-graveyard polygon { fill: #71645a; }
.pe-firestorm polygon { fill: var(--terrain-firestorm); }
.pe-earthquake polygon { fill: var(--terrain-earthquake); }
.pe-flood polygon { fill: var(--terrain-flood); }
.pe-whirlwind polygon { fill: var(--terrain-whirlwind); }
.pe-quicksand polygon { fill: var(--terrain-quicksand); }
.pe-feature-mark { font-size: 10px; fill: #171717; text-anchor: middle; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 1px; }
.pe-coordinate { font-size: 5px; fill: #252525; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: .8px; }
.pe-unit-yellow { fill: var(--yellow); stroke: #5e4700; }
.pe-unit-blue { fill: var(--blue); stroke: #0b3b70; }
.pe-unit-mark { font-size: 8px; fill: #111; text-anchor: middle; font-weight: 800; }
.pe-help { font-size: .85rem; line-height: 1.45; }
.pe-tools > * + * { margin-top: .85rem; }
.pe-inspector { border-block: 1px solid var(--line); padding: .5rem 0 .8rem; }
.pe-inspector > * + * { margin-top: .5rem; }
.pe-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pe-team-panel > * + * { margin-top: .65rem; }
.pe-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.pe-chips button { font-size: .8rem; padding: .3rem .4rem; }
.pe-status { padding: .6rem .8rem; border-left: 3px solid var(--good); background: var(--panel); overflow-wrap: anywhere; }
.pe-custom summary, .pe-library summary { cursor: pointer; font-weight: 600; }
.pe-custom > * + * { margin-top: .75rem; }
.pe-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
#puzzles-root .pe-checks label, #puzzles-root fieldset label, #puzzles-root .pe-inspector label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .4rem; }
.pe-custom fieldset { border: 1px solid var(--line); }
.pe-saved-row { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; }
.pe-saved-row span { flex: 1; overflow-wrap: anywhere; }
.pe-file-label { border: 1px solid var(--line); border-radius: 7px; padding: .35rem; }
#puzzles-root .pe-file-label input { max-width: 190px; font-size: .8rem; }
.pe-play-objective { padding: .7rem; margin: .65rem 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow-wrap: anywhere; }
.pe-play-objective p { white-space: pre-wrap; margin: .5rem 0; }
.pe-play-objective small { color: var(--muted); }
.pe-play-objective button { font-size: .8rem; }
@media (max-width: 900px) { .pe-editor-layout { grid-template-columns: 1fr; } .pe-metadata { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #puzzles-root { padding: .5rem; } .pe-heading { align-items: start; flex-direction: column; } .pe-teams { grid-template-columns: 1fr; } .pe-canvas-panel, .pe-tools, .pe-team-panel { padding: .6rem; } }