/* ============================================================
   ライブタンク - メインスタイル
   ============================================================ */

:root {
  --pipe-outer: 18;
  --pipe-inner: 10;
  --tank-gap: 20px;
  --layout-gap: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: transparent;
  font-family: 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  overflow: hidden;
}

/* ===== メインレイアウト ===== */
.main-layout {
  width: 100%; height: 100%;
  display: flex;
  gap: var(--layout-gap);
  padding: 8px;
}
.main-layout.dir-top    { flex-direction: column; align-items: center; justify-content: center; }
.main-layout.dir-bottom { flex-direction: column; align-items: center; justify-content: center; }
.main-layout.dir-left   { flex-direction: row;    align-items: center; justify-content: center; }
.main-layout.dir-right  { flex-direction: row;    align-items: center; justify-content: center; }

/* ===== レベルボックス ===== */
.level-box {
  position: relative; z-index: 20; flex-shrink: 0;
  background: var(--lb-gradient, linear-gradient(135deg, #ff6b9d, #c44dff));
  border: 4px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  width: var(--lb-width, 160px);
  height: var(--lb-height, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    0 0 30px var(--lb-glow1, rgba(196,77,255,0.4)),
    0 0 60px var(--lb-glow2, rgba(255,107,157,0.2)),
    inset 0 2px 0 rgba(255,255,255,0.2);
  transition: transform 0.3s ease;
}
.level-box .level-box-heart-bg {
  display: none;
}
.level-box .level-box-content {
  position: relative;
  z-index: 2;
}
/* ハート型レベルボックス */
.level-box.shape-heart {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: var(--lb-width, 160px);
  height: var(--lb-height, 100px);
}
.level-box.shape-heart .level-box-heart-bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter:
    drop-shadow(0 0 20px rgba(196,77,255,0.4))
    drop-shadow(0 0 40px rgba(255,107,157,0.2));
}
.level-box.shape-heart .level-box-heart-bg path {
  fill: url(#levelHeartGrad);
  stroke: rgba(255,255,255,0.3);
  stroke-width: 2.5;
}
.level-box.shape-heart .level-box-content {
  padding: 6px 12px;
  padding-top: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.level-box .lv-label {
  font-size: var(--label-font-size, 10px);
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.15em;
  font-weight: 700;
}
.level-box .lv-num {
  font-size: calc(var(--main-font-size, 36px) * 1.39);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  line-height: 1;
}
.level-box .lv-unit {
  font-size: calc(var(--label-font-size, 10px) * 1.4);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 2px;
}
.level-box .lv-unit:empty {
  display: none;
}

/* レベルアップ演出 */
.level-box.level-up {
  animation: lvUpPop 0.6s ease;
}
@keyframes lvUpPop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.3) rotate(-2deg); }
  100%{ transform: scale(1); }
}

/* ===== タンクグリッド ===== */
.tanks-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tank-gap);
  position: relative; z-index: 10;
}

/* ===== タンクユニット ===== */
.tank-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  --tc: #0ff;
  --tg: rgba(0,255,255,0.4);
  --tl: linear-gradient(180deg,#0ff,#069);
  --tw: #0ff;
}
.tank-unit.connector-bottom {
  flex-direction: column-reverse;
}

/* パイプ接続口 */
.pipe-connector {
  width: 32px; height: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  z-index: 8;
}
.tank-unit.connector-bottom .pipe-connector {
  border-radius: 0 0 6px 6px;
  border-bottom: 2px solid rgba(255,255,255,0.25);
  border-top: none;
}

/* ハート型: 接続口は見えないがパイプ座標計算用に残す */
.pipe-connector.heart-hidden {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}



/* タンク本体 */
.tank-body {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  border: 3px solid rgba(255,255,255,0.5);
  border-radius: 16px 16px 28px 28px;
  box-shadow:
    0 0 15px rgba(255,255,255,0.1),
    0 0 30px var(--tg),
    inset 0 0 15px rgba(255,255,255,0.03);
}
/* ガラスハイライト */
.tank-body::before {
  content: '';
  position: absolute;
  top: 5%; left: 6%;
  width: 14%; height: 25%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent);
  border-radius: 10px;
  z-index: 10;
  pointer-events: none;
}

/* ===== ハート型タンク ===== */
.tank-body.shape-heart {
  clip-path: url(#heartClip);
  -webkit-clip-path: url(#heartClip);
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.15))
    drop-shadow(0 0 20px var(--tg));
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
/* ハート型: ガラスハイライトを左上の丸みに合わせる */
.tank-body.shape-heart::before {
  top: 8%; left: 12%;
  width: 14%; height: 20%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent);
}
/* ハート型の液体 */
.tank-body.shape-heart .tank-liquid {
  border-radius: 0;
}
/* ハート型: 液体の波エフェクトを抑制（はみ出し防止） */
.tank-body.shape-heart .tank-liquid::before {
  display: none;
}

/* ハート型: 内部の .tank-lv は clip-path で切られるので非表示 */
.tank-body.shape-heart .tank-lv {
  display: none;
}
/* ハート型のアウトライン（tank-bodyの外、tank-body-wrap内に配置） */
.heart-outline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  pointer-events: none;
  overflow: visible;
}
.heart-outline-svg path {
  fill: none;
  stroke: var(--tc, rgba(255,255,255,0.5));
  stroke-width: 3;
  opacity: 0.55;
}

/* 液体 */
.tank-liquid {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0%;
  background: var(--tl);
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 0 24px 24px;
  opacity: 0.85;
}
.tank-liquid::before {
  content: '';
  position: absolute;
  top: -5px; left: -5%;
  width: 110%; height: 12px;
  background: radial-gradient(ellipse at 50% 100%, var(--tw), transparent 70%);
  animation: wave 2s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes wave {
  0%,100% { transform: translateX(-3%) scaleY(1); }
  50%     { transform: translateX(3%) scaleY(0.5); }
}

/* 泡コンテナ */
.tank-bubbles {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bubble {
  position: absolute;
  bottom: 5%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.3));
  border-radius: 50%;
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.1),
    0 2px 8px rgba(255,255,255,0.3);
}

/* タンク情報 */
.tank-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  padding: 6px;
  overflow: hidden;
}
.tank-icon {
  display: block;
  width: var(--icon-size, 28px);
  height: var(--icon-size, 28px);
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  object-fit: contain;
}
/* ハート型: アイコンが下に来るのでマージン調整 */
.tank-info.heart-layout .tank-icon {
  margin-bottom: 0;
  margin-top: 4px;
}
.tank-label {
  font-size: var(--label-font-size, 10px);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.18em;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tank-count {
  font-size: var(--main-font-size, 36px);
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.7),
    0 0 20px var(--tg);
  line-height: 1;
  white-space: nowrap;
}
.tank-goal {
  font-size: var(--sub-num-font-size, 12px);
  color: rgba(255,255,255,0.5);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin-top: 4px;
  font-weight: 700;
  white-space: nowrap;
}
.tank-lv {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: var(--tank-level-size, 12px);
  font-weight: 800;
  color: #fff;
  background: var(--tc, rgba(0,0,0,0.55));
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 2px 7px;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.8),
     1px -1px 0 rgba(0,0,0,0.8),
    -1px  1px 0 rgba(0,0,0,0.8),
     1px  1px 0 rgba(0,0,0,0.8),
     0 0 4px rgba(0,0,0,0.6);
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}

/* ハート型: タンク外部に配置するレベル表示 */
.tank-lv-external {
  font-size: var(--tank-level-size, 12px);
  font-weight: 800;
  color: #fff;
  background: var(--tc, rgba(0,0,0,0.55));
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 2px 7px;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.8),
     1px -1px 0 rgba(0,0,0,0.8),
    -1px  1px 0 rgba(0,0,0,0.8),
     1px  1px 0 rgba(0,0,0,0.8),
     0 0 4px rgba(0,0,0,0.6);
  pointer-events: none;
  white-space: nowrap;
  margin-top: 4px;
  z-index: 20;
}
.tank-max {
  font-size: var(--sub-num-font-size, 12px);
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.tank-diff {
  font-size: var(--sub-num-font-size, 12px);
  font-weight: 700;
  color: rgba(100,255,150,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  white-space: nowrap;
}

/* ===== カラーテーマ ===== */
.tank-unit.color-cyan    { --tc:#00d2ff; --tg:rgba(0,210,255,0.4);   --tl:linear-gradient(180deg,#00d2ff,#3a7bd5); --tw:#00d2ff; }
.tank-unit.color-green   { --tc:#38ef7d; --tg:rgba(56,239,125,0.4);  --tl:linear-gradient(180deg,#a8e6cf,#38ef7d); --tw:#11998e; }
.tank-unit.color-pink    { --tc:#ff6b9d; --tg:rgba(255,107,157,0.4); --tl:linear-gradient(180deg,#ff9a9e,#ff6b95); --tw:#ff9a9e; }
.tank-unit.color-purple  { --tc:#c44dff; --tg:rgba(196,77,255,0.4);  --tl:linear-gradient(180deg,#d9a7ff,#8e2de2); --tw:#8e2de2; }
.tank-unit.color-orange  { --tc:#f7971e; --tg:rgba(247,151,30,0.4);  --tl:linear-gradient(180deg,#ffd86f,#f7971e); --tw:#f7971e; }
.tank-unit.color-gold    { --tc:#ffd700; --tg:rgba(255,215,0,0.4);   --tl:linear-gradient(180deg,#fff6a9,#ffd700); --tw:#ffd700; }
.tank-unit.color-red     { --tc:#ff416c; --tg:rgba(255,65,108,0.4);  --tl:linear-gradient(180deg,#ff9a8b,#ff416c); --tw:#ff416c; }
.tank-unit.color-blue    { --tc:#667eea; --tg:rgba(102,126,234,0.4); --tl:linear-gradient(180deg,#a8edea,#667eea); --tw:#667eea; }
.tank-unit.color-yellow  { --tc:#f8e838; --tg:rgba(248,232,56,0.4);  --tl:linear-gradient(180deg,#fff9c4,#ffd54f); --tw:#f8e838; }
.tank-unit.color-lime    { --tc:#b4ec51; --tg:rgba(180,236,81,0.4);  --tl:linear-gradient(180deg,#d4fc79,#429321); --tw:#b4ec51; }
.tank-unit.color-magenta { --tc:#f953c6; --tg:rgba(249,83,198,0.4);  --tl:linear-gradient(180deg,#ffb8d0,#b91d73); --tw:#f953c6; }
.tank-unit.color-black   { --tc:#666;    --tg:rgba(80,80,80,0.4);    --tl:linear-gradient(180deg,#6b6b6b,#1a1a1a); --tw:#555;    }
.tank-unit.color-silver  { --tc:#bdc3c7; --tg:rgba(189,195,199,0.4); --tl:linear-gradient(180deg,#e8eaed,#606c88); --tw:#bdc3c7; }

/* ===== SVG パイプレイヤー ===== */
.pipe-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 15;
  overflow: visible;
}
.pipe-line {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pipe-line-inner {
  fill: none;
  stroke: rgba(255,255,255,0.04);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}
.pipe-highlight {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pipe-flow {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 30 170;
  animation: pipeFlowIdle 3s ease-in-out infinite;
}
@keyframes pipeFlowIdle {
  0%   { opacity: 0; stroke-dashoffset: 200; }
  30%  { opacity: 0.3; }
  70%  { opacity: 0.3; }
  100% { opacity: 0; stroke-dashoffset: -200; }
}
/* 加算時のバースト */
.pipe-flow.burst {
  animation: pipeFlowBurst 0.8s ease-out forwards;
}
@keyframes pipeFlowBurst {
  0%   { opacity: 0; stroke-dashoffset: 200; }
  20%  { opacity: 0.9; }
  100% { opacity: 0; stroke-dashoffset: -200; }
}

/* ===== エフェクト ===== */
.sparkle {
  position: fixed;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle 0.6s ease-out forwards;
  box-shadow: 0 0 6px #fff, 0 0 12px rgba(255,255,255,0.5);
  z-index: 50;
}
@keyframes sparkle {
  0%  { transform: scale(0); opacity: 0; }
  40% { transform: scale(1.3); opacity: 1; }
  100%{ transform: scale(0); opacity: 0; }
}

.confetti {
  position: fixed;
  pointer-events: none;
  animation: confetti 2.5s ease-out forwards;
  z-index: 200;
}
@keyframes confetti {
  0%   { transform: translateY(-30px) rotate(0);    opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.level-flash {
  position: fixed; inset: 0;
  background: radial-gradient(circle, rgba(196,77,255,0.4), transparent 70%);
  animation: flash 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 999;
}
@keyframes flash {
  0%  { opacity: 0; transform: scale(0.5); }
  30% { opacity: 0.6; transform: scale(1.2); }
  100%{ opacity: 0; transform: scale(2); }
}

/* ===== 浮遊絵文字エリア（リアクション時にタンク範囲の背後に表示） ===== */
.float-emoji-area {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;          /* mainLayout内でタンク(z-index:10)やパイプ(15)より後ろ */
  pointer-events: none;
  overflow: hidden;
}

.float-emoji-container {
  position: absolute;
  bottom: 0;
  animation: floatEmojiUp var(--float-duration, 2.5s) ease-out forwards;
  --float-travel: 300px;  /* JSから上書きされる */
}

@keyframes floatEmojiUp {
  0%   { transform: translateY(0);                                    opacity: 0; }
  5%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateY(calc(-1 * var(--float-travel))); opacity: 0; }
}

.float-emoji-img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
  animation: floatEmojiSway var(--fe-sway-duration, 1s) ease-in-out infinite alternate;
  object-fit: contain;
}

@keyframes floatEmojiSway {
  0%   { transform: translateX(var(--fe-sway-start, -10px)) rotate(-3deg); }
  100% { transform: translateX(var(--fe-sway-end, 10px))   rotate(3deg); }
}

/* ===== 接続ステータスオーバーレイ ===== */
.connect-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.connect-overlay.visible { opacity: 1; }
.connect-overlay-box {
  background: rgba(0,0,0,0.82);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  width: 88%; max-width: 280px;
}
.connect-overlay-title {
  font-size: 15px; font-weight: 700; color: #fff;
  line-height: 1.4; white-space: nowrap;
}
.connect-overlay-dots {
  display: inline-block; min-width: 1.2em; text-align: left;
}
.connect-overlay-sub {
  font-size: 12px; color: rgba(255,255,255,0.85);
  margin-top: 5px; line-height: 1.35;
}