#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-library { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 1rem; }
.pe-help { font-size: .85rem; line-height: 1.45; }
.pe-inspector { border-block: 1px solid var(--line); padding: .5rem 0 .8rem; }
.pe-inspector > * + * { margin-top: .5rem; }
.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; }

#pe-game-root .side-panel { grid-template-areas: "status status" "placement hover" "placement spells"; }
#pe-game-root .panel-placement { grid-area: placement; display: block; overflow-y: auto; min-height: 0; }
#pe-game-root .panel-placement > * + * { margin-top: .75rem; }
#pe-game-root .panel-spells:has(#pe-close-spells) { grid-template-rows: auto minmax(0, 1fr) auto; }
#pe-game-root .pe-reinforcements { display: flex; flex-wrap: wrap; gap: .4rem; }
#pe-game-root .pe-reinforcements .bench-unit { width: 100px; }
@media (max-width: 900px) { .pe-metadata { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #puzzles-root { padding: .5rem; } .pe-heading { align-items: start; flex-direction: column; } }
@media (max-width: 1100px) { #pe-game-root .side-panel { grid-template-areas: "status" "placement" "hover" "spells"; } }

#puzzle-library-root { max-width: 1200px; margin: 0 auto; padding: 1.2rem; }
.pe-public-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.pe-library-section { margin-top: 1.5rem; }
.pe-library-section > p { margin: .5rem 0 1rem; }
#puzzles-root > .pe-library { margin: .8rem 0; }