/* room */
.room-card{position:relative;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,var(--room-b),var(--room-a));border:1px solid var(--line)}
.room-card canvas{display:block;width:100%;aspect-ratio:720/460;touch-action:none;cursor:pointer}
.room-card.editing canvas{cursor:grab}
.room-overlay{position:absolute;inset:10px 10px auto 10px;display:flex;gap:8px;pointer-events:none;align-items:flex-start}
.room-overlay > *{pointer-events:auto}
.room-tag{background:rgba(255,255,255,.9);color:#18324a;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.room-overlay .sp{flex:1}
.ctrl-hint{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;align-items:center;background:rgba(20,40,55,.72);color:#fff;border-radius:12px;padding:7px 11px;font-size:12px;pointer-events:none;transition:opacity .4s}
.keys{display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(2,15px);gap:2px}
.keys i{display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:3px;font-style:normal;font-size:9px;line-height:1}
.keys i:nth-child(1){grid-column:2;grid-row:1}.keys i:nth-child(2){grid-column:1;grid-row:2}.keys i:nth-child(3){grid-column:2;grid-row:2}.keys i:nth-child(4){grid-column:3;grid-row:2}
.dpad{position:absolute;right:14px;bottom:14px;width:112px;height:112px;display:none}
.dpad button{position:absolute;width:46px;height:46px;border-radius:14px;border:0;background:rgba(255,255,255,.88);color:#18324a;font-size:18px;box-shadow:0 3px 10px rgba(0,0,0,.18);touch-action:none}
.dpad .u{left:62px;top:4px}.dpad .r{left:62px;top:62px}.dpad .d{left:4px;top:62px}.dpad .l{left:4px;top:4px}
@media (pointer:coarse){.dpad{display:block}.ctrl-hint .kb{display:none}}

.edit-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--h-soft);border:1px solid var(--line)}
.edit-bar .badge{background:var(--h-accent);color:#fff;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700}
.edit-bar .hint{font-size:13px;color:var(--muted);flex:1;min-width:160px}
.edit-bar .acts{display:flex;gap:6px;flex-wrap:wrap}
.inv{border:1px solid var(--line);border-radius:16px;background:var(--surface-2);padding:10px 12px 12px}
.inv-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--h-accent,var(--accent));background:var(--h-accent,var(--accent));color:#fff}
.inv-list{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.inv-item{position:relative;flex:none;width:104px;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:6px 6px 8px;text-align:center;scroll-snap-align:start}
.inv-item:hover{border-color:var(--h-accent)}
.inv-item.picked{border-color:var(--h-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--h-accent) 25%,transparent)}
.inv-item.zero{opacity:.5}
.inv-item img{width:84px;height:68px;object-fit:contain;display:block;margin:0 auto}
.inv-item .n{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-item .q{position:absolute;top:5px;right:6px;background:var(--text);color:var(--surface);font-size:11px;font-weight:700;border-radius:999px;padding:0 6px}
.inv-item .use{position:absolute;top:5px;left:6px;background:var(--ok);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:0 6px}
.inv-item .sell{margin-top:4px;font-size:11px;border:0;background:none;color:var(--muted);text-decoration:underline;padding:0}