.create-page { width:100%; max-width:1050px; min-width:0; margin:auto; padding:8px 0 20px; }
.create-controls { display:flex; flex-wrap:wrap; align-items:end; justify-content:center; gap:8px; }
.create-controls label { display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12px; }
.create-controls select,.create-controls .btn { min-height:44px; }
.create-controls .btn { padding:6px 12px; }
.create-status { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 8px; }
#createProgress { font-size:14px; color:var(--accent); font-weight:800; }
.create-status .btn { min-height:44px; padding:4px 12px; }
.create-workspace { min-width:0; display:grid; grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr); align-items:start; gap:14px; }
.create-board { position:relative; min-width:0; border-radius:18px; overflow:hidden; background:#fff4db; border:1px solid #60778b; }
.house-picture { width:100%; height:auto; display:block; }
.house-room { position:absolute; padding:0; border:2px solid transparent; border-radius:10px; background:transparent; color:#173b50; cursor:pointer; touch-action:none; }
.house-room.is-current,.house-room:focus-visible,.house-room.is-hinted { border:3px dashed #0a758a; background:#fff7be44; outline:none; }
.house-label { position:absolute; top:1px; left:2px; right:2px; background:#fff8e4ef; border-radius:6px; padding:3px 2px; font-size:11px; font-weight:800; line-height:1.1; }
.house-done { position:absolute; bottom:3px; left:4px; right:4px; display:flex; flex-wrap:wrap; justify-content:center; gap:3px; pointer-events:none; }
.house-done img { width:clamp(26px,4.7vw,48px); height:clamp(26px,4.7vw,48px); max-width:calc(25% - 3px); object-fit:contain; background:#fff8e4d9; border-radius:8px; padding:2px; }
.create-inventory { min-width:0; }
.create-inventory h2 { font-size:14px; line-height:1.3; margin:0 0 7px; }
.create-bank { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:4px; max-height:390px; overflow:auto; border:1px solid #4d6278; background:#162638; border-radius:14px; touch-action:pan-y; }
.create-item { min-width:44px; min-height:72px; width:100%; position:relative; border:2px solid #647e94; border-radius:12px; background:#fff8e7; color:#1e3e51; padding:4px; cursor:grab; touch-action:pan-y; }
.create-item img,.create-item svg { width:100%; height:66px; object-fit:contain; display:block; pointer-events:none; }
.create-item span { font-size:10px; font-weight:800; display:block; line-height:1.15; }
.create-item[aria-pressed="true"] { border-color:#ffcf5c; box-shadow:0 0 0 2px #ffcf5c; }
.create-item:disabled { opacity:.25; cursor:default; }
.create-item:focus-visible { outline:3px solid #ffcf5c; outline-offset:1px; }
.create-note { color:var(--muted); font-size:11px; line-height:1.4; margin:6px 0 0; }
#createInstruction { font-size:14px; line-height:1.4; text-align:center; min-height:40px; margin:8px 0; }
.create-feedback { font-size:14px; min-height:40px; text-align:center; line-height:1.4; margin:8px 0 0; }
.create-feedback.error { color:#ffabab; }.create-feedback.success,.create-feedback.victory { color:#89e3cc; font-weight:800; }
.create-ghost { position:fixed; z-index:1000; pointer-events:none; width:95px; height:95px; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 5px #0006); }
.create-ghost img,.create-ghost svg { display:block; width:100%; height:100%; object-fit:contain; }
#figureStage { display:block; width:100%; height:auto; aspect-ratio:720/520; touch-action:none; }
.figure-slot { cursor:pointer; outline:none; }
.figure-slot path { fill:#dce0d8; stroke:#8c9d9c; stroke-width:2; }
.figure-slot.is-hinted path,.figure-slot:focus-visible path { stroke:#b76c00; stroke-width:7; stroke-dasharray:9 6; }
.figure-guide .figure-slot path { fill:var(--piece-color); fill-opacity:.28; }
.figure-outline .figure-slot path { fill:none; stroke:#a0aaa5; }
.figure-placed { animation:create-place .2s ease-out; transform-box:fill-box; transform-origin:center; }
@keyframes create-place { from { opacity:.5; transform:scale(.9); } to { opacity:1; transform:none; } }
@media(min-width:900px) {
 .create-page { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-content:start; }
 .create-page > .create-controls { justify-content:start; }
 .create-status { margin:0; }
 #createInstruction,.create-workspace,.create-feedback { grid-column:1 / -1; }
 #createInstruction { min-height:24px; margin:8px 0; }
 .create-workspace { grid-template-columns:minmax(0,min(620px,max(300px,calc(100svh - 360px)))) minmax(240px,360px); justify-content:center; }
 .create-bank { max-height:max(270px,calc(100svh - 400px)); }
}
@media(max-width:899px) {
 .create-workspace { display:block; }
 .create-board { max-width:min(100%,max(290px,calc(100svh - 430px))); margin-inline:auto; }
 .create-inventory { margin-top:8px; }
 .create-bank { grid-template-columns:none; grid-template-rows:86px; grid-auto-flow:column; grid-auto-columns:78px; height:100px; max-height:none; overflow-x:auto; overflow-y:hidden; touch-action:pan-x; }
 .create-item { touch-action:pan-x; padding:2px; }
 .create-item img,.create-item svg { height:48px; }
 .create-item span { font-size:9px; }
 .create-inventory h2 { font-size:12px; }
 .create-controls label { flex:1; }
 .create-controls .btn { padding:4px 9px; }
 #createInstruction { font-size:12px; min-height:34px; }
 .create-feedback { font-size:13px; }
 #createProgress { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .figure-placed { animation:none; } }