/* 집 꾸미기 — 아이소메트릭 방과 보관함.
   방은 뷰박스 340×260 고정이라 칸이 늘어도 화면에서 차지하는 자리는 그대로다. */

#house { gap: 8px; }

/* 가로 스크롤하는 보관함이 flex 컨테이너를 밀어내지 않게 min-width:0 이 반드시 필요하다.
   없으면 .hs-body 가 보관함 내용만큼(512px) 부풀어 방이 화면 밖으로 밀린다. */
.hs-body {
  flex: 1; width: 100%; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* 방이 위, 보관함이 아래. 고르는 것과 놓는 곳이 위아래로 갈려야 손이 헷갈리지 않는다. */
/* 방과 안내를 한 덩어리로 보고 보관함 위 공간의 가운데에 둔다.
   위로만 붙이면 아래가 400px 비어 미완성으로 보인다. */
.hs-stage { width: 100%; min-width: 0; max-width: 380px; flex: none; margin-top: auto; }
.hs-hint { margin-bottom: 0; }

/* 모으는 재미가 눈에 보이게. 빈 자리를 여백 대신 이 한 줄로 채운다. */
.hs-count {
  margin-bottom: auto; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
}
.hs-count i { display: block; width: 120px; height: 6px; border-radius: 999px;
              background: rgba(222, 74, 133, .14); overflow: hidden; }
.hs-count i b { display: block; height: 100%; border-radius: inherit;
                background: linear-gradient(90deg, var(--pink-hi), var(--pink)); transition: width .4s; }
.hs-stage svg.rm {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 14px 26px -14px rgba(120, 70, 110, .55));
}

/* 놓을 자리를 고르는 중에는 바닥이 살짝 밝아져 "여기를 눌러라"가 보인다 */
.rm-tile { transition: opacity .18s; }
.rm.is-armed .rm-tile { opacity: .82; }
.rm.is-armed .rm-tile:nth-child(odd) { opacity: .9; }

.rm-slot { stroke: none; }
.rm.is-wall-mode .rm-slot { stroke: rgba(222, 74, 133, .75); stroke-width: 2.5; stroke-dasharray: 5 4; }

.hs-hint {
  font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: center;
  min-height: 20px; transition: color .2s;
}
.hs-hint.is-armed { color: var(--pink); }

/* ── 보관함 ─────────────────────────────── */

.hs-tray {
  width: 100%; min-width: 0; max-width: 100%; flex: none;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hs-tray::-webkit-scrollbar { display: none; }

.ht-item {
  position: relative; flex: 0 0 78px; width: 78px;
  border: 2px solid transparent; border-radius: 14px; padding: 4px 4px 6px;
  font: inherit; cursor: pointer;
  background: rgba(255, 255, 255, .62);
  transition: transform .08s, border-color .15s, background .15s;
}
.ht-item svg { width: 100%; height: 52px; display: block; }
.ht-item b { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.ht-item:active { transform: translateY(1px); }

/* 고른 것 하나만 확실하게 */
.ht-item.is-picked {
  border-color: var(--pink); background: #fff;
  box-shadow: 0 4px 12px -4px rgba(222, 74, 133, .55);
}
.ht-item.is-picked b { color: var(--deep); }

/* 가진 것을 전부 놓았으면 흐리게 */
.ht-item.is-out { opacity: .38; cursor: default; }

/* 두 개 이상 가진 것만 개수를 보여 준다 */
.ht-item i {
  position: absolute; top: 3px; right: 3px; font-style: normal;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  font-size: 11px; font-weight: 800; line-height: 18px; color: #fff;
  background: linear-gradient(180deg, var(--pink-hi), var(--pink));
}

.ht-empty { font-size: 13px; color: var(--ink-soft); padding: 26px 0; text-align: center; width: 100%; }

/* 마을에서 집으로 들어가는 문 — 디오라마 위에 얹은 보이지 않는 탭 영역 */
.house-door {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  width: 36%; height: 32%; z-index: 2;
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: 14px;
}
.house-door:active { background: rgba(255, 255, 255, .22); }
.house-door:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }