/*
 * 채집통 — **곤충이 그 안에서 뛰어논다.**
 *
 * 무기 판은 격자가 맞다(물건이니까). 곤충은 살아 있으므로 격자에 갇혀 있으면 안 된다
 * (사장님: "도감 속 애들은 움직여야 해 … 채집통 안에서 뛰어노는 거지", 2026-08-29).
 * 참고 게임 어항도 물고기가 자유롭게 헤엄친다 — 격자가 아니다.
 */
.tank{position:fixed;inset:0;z-index:10;display:grid;
  grid-template-rows: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){
  .tank{background-image:url("../../../assets/bg/bg_terrarium_land.webp"),linear-gradient(#e9d9b6,#c9a97a)}}

.tank-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}
.tank-head img{width:1.2em;height:1.2em;object-fit:contain}
.tank-head b{color:var(--leaf)}
/* 몇 칸 찼나 — 참고 게임 어항의 `10/20` 자리 */
.tank-count{margin-left:auto;font-size:.62em;background:rgba(0,0,0,.10);
  border-radius:999px;padding:2px 10px;font-variant-numeric:tabular-nums}
.tank-count.full{background:#d8583a;color:#fff}

.tank-tip{font-size:.4em;font-weight:500;opacity:.85;text-align:center;line-height:1.1}

/* ── 통 안 ─────────────────────────────────────────────
   곤충이 제 자리에 떠 있다. 좌표는 화면이 정하고 저장하지 않는다 —
   매번 새로 흩어져도 아무 문제가 없다. */
.tank-glass{position:relative;min-height:0;overflow:hidden;
  border:4px solid var(--wood);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(160,200,120,.20));
  touch-action:none}                 /* 안에서 끌 때 화면이 같이 밀리면 안 된다 */

.tank-one{position:absolute;display:grid;place-items:center;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:transform .1s}
.tank-one img{display:block;width:100%;height:100%;object-fit:contain;
  pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
/* 살아 있는 것은 가만히 있지 않는다 — 저마다 다른 박자로 꿈틀거린다 */
.tank-one.bug img{animation:tank-wiggle 2.4s ease-in-out infinite}
@keyframes tank-wiggle{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-6%) rotate(-3deg)}}

/* 등급 딱지 — 무기 판과 같은 모양이라 한 번만 배우면 된다 */
.tank-tag{position:absolute;top:-6px;left:-4px;z-index:2;
  color:#fff;font-size:.3em;line-height:1;padding:2px 6px;
  border-radius:999px;border:2px solid rgba(0,0,0,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}

/* 알 — 바닥에 놓이고 게이지가 찬다 */
.tank-one.egg{cursor:pointer}
.tank-ring{position:absolute;inset:-6%;border-radius:50%;
  background:conic-gradient(var(--sap) var(--p,0%), rgba(255,255,255,.25) 0);
  -webkit-mask:radial-gradient(circle, transparent 68%, #000 69%);
          mask:radial-gradient(circle, transparent 68%, #000 69%)}
.tank-one.ready img{animation:tank-hatch .8s ease-in-out infinite}
@keyframes tank-hatch{
  0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)}}

/* ── 끄는 중 ───────────────────────────────────────── */
.tank-one.dragging{opacity:.35}
.tank-ghost{position:fixed;z-index:30;pointer-events:none;opacity:.92;
  transform:scale(1.15) rotate(-4deg);filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.tank-one.droppable{animation:tank-wait .8s ease-in-out infinite}
@keyframes tank-wait{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.tank-one.hot{transform:scale(1.2);z-index:3}
.tank-one.hot::after{content:"합쳐요!";position:absolute;top:-20px;left:50%;
  transform:translateX(-50%);font-size:.32em;color:#fff;background:var(--leaf);
  border-radius:999px;padding:2px 8px;white-space:nowrap;z-index:4}

/* 합쳐진 순간 */
.tank-flash{position:absolute;inset:-50%;width:200%;height:200%;object-fit:contain;
  pointer-events:none;z-index:5;mix-blend-mode:screen;
  animation:wp-burst .8s ease-out forwards}
.tank-pop{position:absolute;top:-18px;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:6;
  animation:pop-up .9s ease-out forwards}

/* ── 발 ────────────────────────────────────────────── */
.tank-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.tank-btn{min-height:var(--touch);
  display:flex;align-items:center;justify-content:center;gap:5px;
  border:3px solid var(--wood);border-radius:999px;padding:4px 6px;font-size:.42em;
  cursor:pointer;
  background:linear-gradient(180deg,#fff6dd 0%,var(--panel) 55%,#e6cf9e 100%);
  box-shadow:0 4px 0 #8a6236}
.tank-btn.can{border-color:var(--leaf);
  background:linear-gradient(180deg,#dff6c4 0%,#b6e58a 55%,#8fce5f 100%);
  box-shadow:0 4px 0 #4f8a2a}
.tank-btn:disabled{opacity:.55;cursor:default;box-shadow:0 2px 0 #8a6236}
.tank-btn:not(:disabled):active{transform:translateY(4px);box-shadow:0 0 0 #4f8a2a}
.tank-btn img{width:1.4em;height:1.4em;object-fit:contain;flex:none}
.tank-free{font-size:.7em;opacity:.9}

@media (max-height:700px){
  .tank{gap:4px;padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .tank-head{font-size:.58em;padding:4px 12px}
  .tank-tip{font-size:.34em}
  .tank-btn{min-height:56px;font-size:.36em}
}