/* ============================================================================
 * tank.css — 水槽の中身
 * ----------------------------------------------------------------------------
 * ■ 中身の重ね順（下から）
 *   水の背景 → 光の筋 → 水草 → 底砂 → 餌 → フン → 魚 → 空状態の案内
 *   レイヤーを増やすときは、この順序に割り込ませること。
 *
 * ■ 魚の位置
 *   JS が transform で毎フレーム動かす。CSS 側で位置や transition を足すと
 *   泳ぎがカクつくので、.fish に transition を付けないこと。
 * ========================================================================== */

/* ── ログ2行 ───────────────────────────────────────────────────────── */
.ticker{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:44px;padding:6px 10px;margin-bottom:8px;
  background:var(--hull-raise);border:1px solid var(--line);border-radius:var(--r-sm);
  text-align:left;
}
.ticker-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ticker-line{
  font-size:11.5px;line-height:1.5;color:#B9CDD2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ticker-line.bad{color:#F0A08C}
.ticker-line.good{color:#A6E6C6}
.ticker-line time{font-family:var(--f-mono);font-size:10.5px;color:var(--chalk-dim);margin-right:7px}
.ticker-more{
  flex:none;font-size:10.5px;color:var(--chalk-dim);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;
}

/* ── 水槽本体 ──────────────────────────────────────────────────────── */
.tank{
  position:relative;width:100%;
  /* --tank-scale は ui.js がスクロールに応じて 1 → 0.58 まで下げる */
  height:calc(var(--tank-h) * var(--tank-scale));
  min-height:170px;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg,
    var(--water-shallow) 0%, var(--water-mid) 28%,
    var(--water-deep) 66%, var(--water-abyss) 100%);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04);
  /* 高さはスクロール量に直結させるので transition は付けない。
     付けると実際の高さと計算上の高さがずれ、縮小量の計算が狂う */
}

.tank-caustics{
  position:absolute;inset:-10% 0 auto 0;height:56%;pointer-events:none;
  background:repeating-linear-gradient(103deg,
    rgba(255,255,255,.10) 0 2px, transparent 2px 27px);
  mix-blend-mode:soft-light;opacity:.7;
  animation:caustic-drift 15s linear infinite;
}
@keyframes caustic-drift{from{transform:translateX(-64px)}to{transform:translateX(64px)}}

/* ── 苔（水質が落ちるほど濃くなる） ────────────────────────────────
 * --algae-amt は render.js が 0〜1 で書き込む。0 なら完全に透明。
 * 濃さの立ち上がりを変えたいときは render.js 側の計算式を触ること。
 * ここでは「水全体の緑の濁り」と「ガラス面に付く苔のむら」を分けて重ねている。 */
.tank-algae{
  position:absolute;inset:0;pointer-events:none;
  opacity:var(--algae-amt,0);
  transition:opacity .8s ease;
  background:linear-gradient(180deg,
    rgba(96,132,52,.30) 0%, rgba(78,116,44,.42) 55%, rgba(52,84,34,.52) 100%);
}
.tank-algae::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 30% at 8% 96%, rgba(74,120,44,.85), transparent 70%),
    radial-gradient(46% 24% at 92% 92%, rgba(84,128,48,.75), transparent 72%),
    radial-gradient(30% 40% at 2% 40%, rgba(70,112,42,.6), transparent 70%),
    radial-gradient(26% 34% at 99% 52%, rgba(70,112,42,.55), transparent 70%),
    radial-gradient(40% 14% at 50% 100%, rgba(60,98,38,.8), transparent 70%);
}

.tank-surface{
  position:absolute;top:0;left:0;right:0;height:12px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.32),transparent);
}
.tank-floor{
  position:absolute;left:0;right:0;bottom:0;height:9%;pointer-events:none;
  background:linear-gradient(180deg,#123240,#08202A);
  border-top:1px solid rgba(255,255,255,.06);
}

.layer{position:absolute;inset:0;pointer-events:none}
.layer.is-clickable{pointer-events:none}
.layer.is-clickable > *{pointer-events:auto}

/* ── 魚 ────────────────────────────────────────────────────────────── */
.fish{
  position:absolute;left:0;top:0;
  transform-origin:50% 50%;
  will-change:transform;
  cursor:pointer;
}
.fish svg{display:block;overflow:visible}
.fish.is-dead{filter:grayscale(.8) brightness(.65);opacity:.7}

/* 名札は #nameLayer 側に置き、JS が transform で座標だけ合わせる。
   魚の子要素に戻すと、魚の傾きに引きずられて縁からはみ出す */
.nametag{
  position:absolute;left:0;top:0;
  padding:1px 7px;border-radius:999px;
  background:rgba(4,20,26,.7);border:1px solid rgba(255,255,255,.12);
  font-size:10px;line-height:1.6;white-space:nowrap;color:var(--chalk);
  pointer-events:none;will-change:transform;
}
.nametag.is-mine{border-color:var(--amber);color:#FFDCA3}

/* ── フン ──────────────────────────────────────────────────────────── */
.poop{
  position:absolute;width:22px;height:22px;   /* 見た目より広い当たり判定（指でも押せる） */
  margin:-5px 0 0 -5px;border-radius:50%;
  display:grid;place-items:center;
}
.poop::before{
  content:"";width:12px;height:12px;border-radius:50% 50% 46% 54%;
  background:radial-gradient(circle at 35% 30%,#6E4C30,#3A2616);
  border:1px solid #22150B;
  transition:transform .12s;
}
.poop:hover::before,.poop:active::before{transform:scale(1.35)}

/* ── 餌 ────────────────────────────────────────────────────────────── */
.pellet{position:absolute;width:6px;height:6px;border-radius:2px;margin:-3px 0 0 -3px}

/* ── 水草 ──────────────────────────────────────────────────────────── */
.plant{
  position:absolute;bottom:0;width:11%;max-width:80px;height:auto;
  overflow:visible;pointer-events:none;
  transform:translateX(-50%);
}

/* ── 魚がいないときの案内 ──────────────────────────────────────────── */
.tank-empty{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;
  background:linear-gradient(180deg,transparent,rgba(3,14,19,.88) 48%);
  pointer-events:none;     /* 帯そのものは水槽のタップを邪魔しない */
}
/* [hidden] はクラス指定に負けるので明示的に打ち消す。
   これを消すと、非表示のはずの帯が水槽下部のタップを奪う */
.tank-empty[hidden]{display:none}
.tank-empty .btn{pointer-events:auto}
.tank-empty p{font-size:12.5px;color:#D3E4E8;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* ── 状態メーター（水槽の真下・常時表示） ──────────────────────────── */
.vitals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}
.vital{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;
  padding:5px 9px;
  background:var(--hull-raise);border:1px solid var(--line);border-radius:var(--r-sm);
}
.vital-label{font-size:11px;color:var(--chalk-dim);white-space:nowrap}
.vital-bar{
  height:5px;border-radius:99px;background:#08191F;overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.vital-bar i{display:block;height:100%;border-radius:99px;transition:width .4s ease, background .4s ease}
.vital-num{font-family:var(--f-mono);font-size:12px;min-width:2.4em;text-align:right}

@media (min-width:900px){
  /* PCは縦に余裕があるのでスクロール縮小を使わない。
     --tank-scale を掛けないことで、ui.js の書き換えを無視させている */
  .tank{height:min(62vh,560px)}
  .vitals{gap:10px;margin-top:12px}
  .vital{padding:8px 12px}
  .ticker{padding:8px 12px}
  .ticker-line{font-size:12px}
}