/* 무기 판 — 격자에 한 자루씩 놓고, 끌어다 겹쳐 합친다 (참고 게임의 총 판) */
/*
 * ⚠ **판 전체에 `touch-action:none` 을 걸면 안 된다.**
 * 끌 때 화면이 스크롤되는 걸 막으려고 걸었는데, **격자 스크롤까지 죽었다**
 * (사장님: "격자가 아래로 내릴 수도 없고", 2026-08-29 실제 기기).
 * 480×640 에서 내용 635px / 보이는 곳 294px 인데 손가락으로 못 내렸다.
 * 끌기는 `.wp-cell` 에만 `touch-action:none` 을 걸면 충분하다 —
 * 칸에서 시작한 손가락은 스크롤로 안 넘어간다.
 *
 * `min-height:0` 도 중요하다. 격자 칸(1fr)은 기본이 `min-height:auto` 라
 * **내용만큼 늘어나** 아래 버튼을 화면 밖으로 밀어낸다. 0으로 눌러야 줄어들고 스크롤이 생긴다.
 */
.wp{position:fixed;inset:0;z-index:10;display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto;gap:6px;
  padding:8px 10px calc(12px + env(safe-area-inset-bottom));
  background-size:cover;background-position:center;
  background-image:url("../../../assets/bg/bg_terrarium.webp"),linear-gradient(#e9d9b6,#c9a97a);
  overscroll-behavior:contain}
@media (orientation:landscape){
  .wp{background-image:url("../../../assets/bg/bg_terrarium_land.webp"),linear-gradient(#e9d9b6,#c9a97a)}}

/* 지금 미는 속도 — 참고 게임이 판 위에 합계를 늘 보여주는 자리 */
.wp-head{display:flex;align-items:center;gap:8px;justify-self:start;
  padding-right:calc(var(--touch) + 6px);
  font-size:.7em;background:var(--panel);border:3px solid var(--wood);
  border-radius:999px;padding:6px 16px}
.wp-head img{width:1.2em;height:1.2em;object-fit:contain}
.wp-head b{color:var(--leaf)}
/* 가방이 얼마나 찼나 — 참고 게임 어항의 `5/20` 자리 */
.wp-bag{margin-left:auto;font-size:.62em;background:rgba(0,0,0,.10);
  border-radius:999px;padding:2px 10px;font-variant-numeric:tabular-nums}
.wp-bag.full{background:#d8583a;color:#fff}

.wp-tip{font-size:.4em;font-weight:500;opacity:.85;text-align:center;line-height:1.1}
/* 두 번째 안내는 격자 위에 얹는다 — 줄 하나를 아낀다 */
.wp-tip:last-of-type{margin-top:-4px}

/* 장착한 둘 — 크게. 여기로 끌어다 놓으면 장착된다 */
/*
 * 장착 칸 — **그림 왼쪽, 글자 오른쪽.**
 *
 * 예전엔 세로로 쌓아서 카드 하나가 화면의 1/5 를 먹었다. 세로 폰에서는
 * 그것 때문에 격자가 서너 줄밖에 안 보였다
 * (사장님: "3번째처럼 저런 화면이 가로세로 그리고 작은 화면에서도 이렇게 나와야 하는데").
 * 가로로 눕히면 **높이가 그림 높이로 끝난다.**
 */
.wp-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wp-slot{display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"pic tag" "pic who" "pic mul";
  align-content:center;align-items:center;gap:0 6px;position:relative;
  background:var(--panel);border:3px solid var(--wood);border-radius:16px;padding:5px 8px 5px 5px;
  transition:border-color .1s,transform .1s}
.wp-slot img{grid-area:pic;width:min(15vw,58px);height:min(15vw,58px);object-fit:contain}
.wp-slot .wp-tag{grid-area:tag;justify-self:start;font-size:.34em;padding:2px 7px}
.wp-slot .mat{grid-area:tag;justify-self:start;font-size:.4em}
.wp-slot .who{grid-area:who;justify-self:start;font-size:.34em;font-weight:500;opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wp-slot .mul{grid-area:mul;justify-self:start;font-size:.4em;color:var(--leaf)}
.wp-slot.empty{opacity:.6}

/* ── 격자 — 한 칸에 한 자루 ───────────────────────────────
   `×3` 개수 표시가 아니라 **칸이 차오르는 것 자체가 진행**이다.
   숫자를 못 읽는 아이도 "많아졌다"를 안다. */
/*
 * **5칸 × 5줄이 언제나 한 화면에 다 들어온다.**
 *
 * 칸을 정사각으로 두면 화면 높이에 따라 네 줄 반만 보이고 잘렸다.
 * 줄도 `1fr` 로 두면 **남는 높이를 다섯 줄이 나눠 갖는다** — 스크롤이 아예 필요 없다.
 * 가방이 25칸으로 정해져 있으니 가능한 방법이다.
 */
.wp-grid{display:grid;grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(5,minmax(0,1fr));gap:5px;
  min-height:0;overflow:hidden;padding:3px;
  background:rgba(255,255,255,.28);border:3px solid var(--wood);border-radius:18px}
.wp-cell{position:relative;min-height:0;display:grid;place-items:center;gap:0;
  background:rgba(255,255,255,.55);border:3px solid var(--wood);border-radius:12px;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:transform .1s,border-color .1s}
.wp-cell.empty{background:rgba(0,0,0,.06);border-style:dashed;border-color:rgba(90,64,32,.35);
  cursor:default}
.wp-cell img{width:78%;height:78%;object-fit:contain;grid-area:1/1;pointer-events:none}
.wp-cell .kindko{grid-area:1/1;align-self:end;justify-self:end;
  font-size:.3em;font-weight:700;opacity:.7;padding:1px 3px;pointer-events:none}
/* 끼고 있는 것 */
.wp-cell.on{border-color:var(--leaf);background:rgba(140,200,90,.35)}

/* 등급 딱지 — 글자와 색 둘로 말한다. 열셋이라 색만으로는 헷갈린다 */
.wp-tag{grid-area:1/1;align-self:start;justify-self:start;z-index:1;
  color:#fff;font-size:.3em;line-height:1;padding:2px 5px;
  border-radius:999px;border:2px solid rgba(0,0,0,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}

/* ── 끄는 중 ─────────────────────────────────────────────
   놓을 수 있는 칸을 켜 준다. 어디에 놓아야 하는지 안 보이면
   네 살은 그냥 손을 뗀다. */
.wp-cell.dragging{opacity:.35}
.wp-ghost{position:fixed;z-index:30;pointer-events:none;opacity:.92;
  transform:scale(1.12) rotate(-4deg);box-shadow:0 8px 14px rgba(0,0,0,.35)}
.droppable{border-color:var(--leaf);animation:wp-wait .8s ease-in-out infinite}
@keyframes wp-wait{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* 바로 위에 올렸다 — 여기 놓으면 합쳐진다 */
.hot{border-color:#fff;background:rgba(255,240,150,.85);animation:none;
  transform:scale(1.14);box-shadow:0 0 0 4px rgba(255,208,80,.9)}
.hot::after{content:"합쳐요!";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-size:.32em;color:#fff;background:var(--leaf);border-radius:999px;padding:2px 8px;
  white-space:nowrap;z-index:2}
.wp-slot.hot::after{content:"끼워요!"}

/*
 * 발 — **버튼 셋을 한 줄로.** 두 줄이면 80px 를 먹고 그만큼 격자가 줄어든다.
 * 세로 폰에서 25칸 중 네 줄밖에 안 보이던 원인이 여기와 안내문이었다
 * (사장님: "세로는 그대론데 아직", 2026-08-29).
 */
.wp-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:5px}
.wp-pull{min-height:var(--touch);
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:3px solid var(--wood);border-radius:999px;padding:4px 8px;font-size:.44em;cursor:pointer;
  background:linear-gradient(180deg,#fff6dd 0%,var(--panel) 55%,#e6cf9e 100%);
  box-shadow:0 5px 0 #8a6236}
.wp-pull.can{border-color:var(--leaf);
  background:linear-gradient(180deg,#dff6c4 0%,#b6e58a 55%,#8fce5f 100%);
  box-shadow:0 5px 0 #4f8a2a}
.wp-pull:disabled{opacity:.55;cursor:default;box-shadow:0 2px 0 #8a6236}
.wp-pull:not(:disabled):active{transform:translateY(5px);box-shadow:0 0 0 #4f8a2a}
.wp-pull-icon{width:1.5em;height:1.5em;object-fit:contain;flex:none}
.wp-merge{min-height:var(--touch);
  border:3px solid var(--wood);border-radius:999px;padding:4px 6px;font-size:.4em;
  background:linear-gradient(180deg,#fff6dd 0%,var(--panel) 55%,#e6cf9e 100%);
  box-shadow:0 4px 0 #8a6236;cursor:pointer}
.wp-merge.can{border-color:var(--leaf)}
.wp-merge:disabled{opacity:.55;cursor:default;box-shadow:0 2px 0 #8a6236}
.wp-merge:not(:disabled):active{transform:translateY(4px);box-shadow:0 0 0 #8a6236}

/* 합쳐진 순간 — 빛이 터지고 칸이 부푼다 */
.wp-flash{position:absolute;inset:-45%;width:190%;height:190%;object-fit:contain;
  pointer-events:none;z-index:3;mix-blend-mode:screen;
  animation:wp-burst .8s ease-out forwards}
@keyframes wp-burst{
  0%{transform:scale(.35) rotate(0);opacity:0}
  25%{transform:scale(1.05) rotate(20deg);opacity:1}
  100%{transform:scale(1.5) rotate(45deg);opacity:0}}
.wp-cell.made{animation:wp-made .8s ease-out;z-index:2}
@keyframes wp-made{0%{transform:scale(1)}30%{transform:scale(1.28)}100%{transform:scale(1)}}
.wp-pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  color:#fff;background:var(--leaf);border-radius:999px;padding:2px 8px;
  font-size:.34em;white-space:nowrap;pointer-events:none;z-index:4;
  animation:pop-up .8s ease-out forwards}

/*
 * ── 좁고 낮은 화면 ──────────────────────────────────────
 * 4:3 폰이나 가로 모드에서는 세로가 귀하다. 장착 칸과 버튼을 줄여
 * **격자에 자리를 내준다** — 아래가 잘리는 것보다 낫다.
 */
@media (max-height:700px){
  .wp{gap:4px;padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .wp-slot img{width:min(12vw,46px);height:min(12vw,46px)}
  .wp-slot{padding:3px 6px 3px 3px}
  .wp-slot .who{font-size:.3em}
  .wp-slot .mul{font-size:.34em}
  .wp-pull{min-height:56px;font-size:.44em}
  .wp-tip{font-size:.36em}
  .wp-merge{min-height:56px;font-size:.4em}
  .wp-head{font-size:.6em;padding:4px 12px}
}

/*
 * 가로 모드 — 세로가 짧고 가로가 남는다. **왼쪽에 장착·버튼, 오른쪽에 격자.**
 * 세로로 쌓으면 격자가 두세 줄밖에 안 보인다.
 */
@media (orientation:landscape) and (min-width:640px){
  .wp{grid-template-columns:minmax(200px,32%) 1fr;
      grid-template-rows:auto auto auto 1fr;
      grid-template-areas:"head grid" "slots grid" "tip grid" "foot grid";
      column-gap:10px}
  .wp-head{grid-area:head}
  .wp-slots{grid-area:slots}
  .wp-tip:first-of-type{grid-area:tip}
  .wp-tip:last-of-type{display:none}      /* 격자 옆 안내는 하나면 된다 */
  .wp-slots{grid-template-columns:1fr}    /* 좁은 왼쪽 칸이라 위아래로 */
  .wp-grid{grid-area:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
           grid-template-rows:none;grid-auto-rows:minmax(0,1fr);overflow-y:auto}
  .wp-foot{grid-area:foot;align-self:start}
}