/* An authoring workbench, deliberately separate from the player's diegetic UI. */
.sprite-debug{--sd-paper:#f4eddb;--sd-muted:#978f7b;--sd-dark:#233229;box-sizing:border-box;padding:0;border:0;margin:auto;width:calc(100vw - 36px);height:calc(100dvh - 36px);max-width:1600px;max-height:none;background:var(--sd-paper);color:#30362b;border-radius:16px;box-shadow:0 20px 120px #101d2390;font:13px/1.45 system-ui,sans-serif;overflow:hidden}
.sprite-debug[open]{display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-rows:88px minmax(0,1fr)}
.sprite-debug *{box-sizing:border-box}
.sprite-debug::backdrop{background:#182c26c4;backdrop-filter:blur(7px)}
.sprite-debug h2,.sprite-debug h3,.sprite-debug p{margin:0}
.sprite-debug button,.sprite-debug select,.sprite-debug input{font:inherit;touch-action:manipulation}
.sprite-debug button{cursor:pointer;border:0;border-radius:7px;background:#e4dcc9;color:inherit;min-height:44px;padding:9px 14px}
.sprite-debug button:hover{filter:brightness(1.05)}
.sprite-debug button:disabled{opacity:.4}
.sprite-debug input[type=checkbox]{accent-color:#65754f;width:17px;height:17px;vertical-align:middle}
.sprite-debug input[type=range]{accent-color:#65754f;vertical-align:middle;min-width:40px}
.sprite-debug select{max-width:160px;border:0;border-radius:6px;min-height:38px;padding:6px 10px;color:#344330;background:#e9e1ce}
.sprite-debug button:focus-visible,.sprite-debug input:focus-visible,.sprite-debug select:focus-visible{outline:3px solid #b48f47;outline-offset:2px}
.sd-top{grid-column:1/3;display:flex;align-items:center;gap:30px;padding:16px 25px;color:#ece6d3;background:#26392c}
.sd-top span{font-size:10px;color:#acbb9b;letter-spacing:2px}
.sd-top h2{font:28px Georgia,serif;margin-top:5px}
.sd-top p{color:#b9c5ae;font-size:12px;max-width:360px}
.sd-top #sdClose{margin-left:auto;background:#ffffff16;color:#e7edd8;white-space:nowrap}
.sd-library{background:#e7dfcc;padding:20px 12px 10px;display:flex;flex-direction:column;min-height:0}
.sd-library>label{margin:0 8px 8px;font-size:11px;color:#767d63}
#sdSearch{width:100%;border:0;background:#f8f2e5;border-radius:8px;padding:13px;min-height:44px}
.sd-filter{display:flex;gap:5px;margin:13px 0}
.sd-filter button{flex:1;padding:8px;font-size:11px}
.sd-filter b{font-weight:500;opacity:.5;margin-left:4px}
.sd-filter .selected{background:#536b47;color:#fff8e6}
.sd-list{flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#a9aa89 transparent}
.sd-list .sd-item{display:flex;align-items:center;gap:10px;width:100%;background:none;text-align:left;margin:2px 0;min-height:66px}
.sd-item.selected{background:#fbf4df!important}
.sd-item img{width:43px;height:43px;object-fit:contain;flex-shrink:0}
.sd-item span{min-width:0}.sd-item strong{display:block;font-size:12px;font-weight:500;overflow-wrap:anywhere}.sd-item small{display:block;margin-top:4px;color:#84876e;font-size:10px}
.sd-main{min-height:0;overflow:auto;padding:22px 26px;display:flex;flex-direction:column;gap:15px}
.sd-selection{display:flex;justify-content:space-between;align-items:center;gap:14px}
#sdCategory{font-size:9px;color:#788363;letter-spacing:1.7px}.sd-selection h3{font:26px Georgia,serif;margin-top:4px}.sd-selection>label{display:flex;align-items:center;gap:9px}
.sd-stage{position:relative;min-height:160px;flex:1;overflow:hidden;border-radius:12px;background-color:#ece4d2;background-image:linear-gradient(45deg,#e0d8c6 25%,transparent 25%,transparent 75%,#e0d8c6 75%),linear-gradient(45deg,#e0d8c6 25%,transparent 25%,transparent 75%,#e0d8c6 75%);background-size:24px 24px;background-position:0 0,12px 12px}
.sd-stage[data-bg=paper]{background:#efe5d0}.sd-stage[data-bg=dark]{background:#213229}
#sdCanvas{width:100%;height:100%;display:block;position:absolute;inset:0}
#sdLegend{position:absolute;bottom:12px;left:14px;right:14px;font-size:9px;color:#86846a;pointer-events:none}
.sd-stage[data-bg=dark] #sdLegend{color:#bed0b2}
.sd-playback{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sd-playback #sdPlay{min-width:87px;background:#536b47;color:#f7f1dd}.sd-playback>label{display:flex;align-items:center;gap:8px;font-size:11px}.sd-timeline{flex:1}.sd-timeline input{width:100%}.sd-timeline output{min-width:24px}
.sd-controls{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center}.sd-controls label{display:flex;align-items:center;gap:6px;min-height:30px;font-size:11px;white-space:nowrap}.sd-controls input[type=range]{width:85px}
.sd-info{font:11px/1.7 ui-monospace,monospace;color:#5c7051;background:#e9e4d3;border-radius:6px;padding:9px 12px}.sd-note{font-size:10px!important;color:#8a876f!important;line-height:1.6}
body.sprite-inspecting #app *{animation-play-state:paused!important}
@media(max-width:900px){.sprite-debug{width:100vw;height:100dvh;border-radius:0}.sprite-debug[open]{grid-template-columns:180px minmax(0,1fr);grid-template-rows:74px minmax(0,1fr)}.sd-top{padding:10px 17px;gap:15px}.sd-top p{display:none}.sd-top h2{font-size:23px}.sd-main{padding:17px 14px}.sd-list .sd-item{padding:7px 6px;gap:5px}.sd-item img{width:32px;height:38px}.sd-item strong{font-size:10px}.sd-filter button{font-size:10px;padding:5px}.sd-selection h3{font-size:22px}.sd-selection>label{font-size:10px}.sd-selection select{max-width:100px}.sd-note{display:none}}
@media(max-width:590px){.sprite-debug[open]{grid-template-columns:1fr;grid-template-rows:64px 139px minmax(0,1fr)}.sd-top{grid-column:1}.sd-top span{font-size:8px;letter-spacing:1.3px}.sd-top h2{font-size:20px}.sd-top #sdClose{font-size:10px;padding:8px}.sd-library{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:44px 74px;gap:6px;padding:7px 10px}.sd-library>label{display:none}#sdSearch{padding:8px;font-size:11px}.sd-filter{margin:0;gap:4px}.sd-list{grid-column:1/3;display:flex;gap:5px;overflow-x:auto;overflow-y:hidden}.sd-list .sd-item{min-width:142px;width:auto;min-height:60px}.sd-main{gap:9px;padding:11px 13px}.sd-selection h3{font-size:20px}.sd-stage{min-height:120px}.sd-controls{gap:1px 10px}.sd-controls label{font-size:10px;min-height:25px}.sd-playback{gap:5px}.sd-playback button{padding:7px;min-width:34px}#sdPlay{min-width:60px!important}.sd-playback>label:last-child{display:none}.sd-info{font-size:9px;padding:6px 8px}#sdLegend{font-size:8px;bottom:6px}}