/* =========================
   hud.css（HUD専用）
   - HUD（HP/山札/OPEN-CLOSEゲージ）を安定表示
   - 配置（外枠余白等）は base.css に任せる
   - streak反転：row-reverse統一（scaleXはHPバーAのみ）
========================= */


/* =========================================================
   0) HUD変数（全端末共通・clampで自動スケール）
   - 「モバイル専用@media」をやめて、1本で全機種対応
========================================================= */
.hp-wrap.hud{
  /* layout */
  --hud-gap: clamp(6px, 1.4vw, 10px);
  --hud-pad: clamp(10px, 2.6vw, 18px);
  --hud-radius: 22px;

  /* center */
  --deck-size: clamp(30px, 5.2vw, 44px);

  /* pill */
  --pill-w: clamp(60px, 10vw, 76px);
  --pill-h: clamp(20px, 2.6vw, 22px);
  --pill-fs: clamp(10px, 2.2vw, 12px);

  /* text */
  --label-fs: clamp(12px, 2.4vw, 14px);
  --hpnum-fs: clamp(12px, 2.4vw, 14px);
  --hpnum-minw: clamp(56px, 10vw, 66px);

  /* bars */
  --hpbar-h: clamp(9px, 1.6vw, 10px);
  /* 端末差で短く見えるのを防ぐ：最小幅もclampで */
  --hpbar-minw: clamp(86px, 28vw, 140px);

  /* mid rows */
  --mid-gap: clamp(8px, 1.8vw, 10px);
  --mid-row-gap: clamp(8px, 1.8vw, 10px);

  /* seg */
  --streak-gap: clamp(4px, 1.1vw, 5px);

  --seg-w: clamp(20px, 4.6vw, 22px);
  --seg-h: clamp(11px, 2.4vw, 12px);
  --seg-r: 4px;
  --seg-bd: 2px solid rgba(0,0,0,.35);
  --seg-skew: -22deg;
  --seg-skew-left: 22deg;

  --seg-shadow-off: none;
  --seg-shadow-on: 0 2px 0 rgba(0,0,0,.08);
}


/* =========================
   1) HUDコンテナ
========================= */
.hp-wrap.hud{
  display:grid;
  grid-template-rows: auto auto auto auto; /* top / bars / open / close */
  align-items:center;
  gap: var(--hud-gap);
  padding: var(--hud-pad);

  /* ✅ 修正：HUD自体は“カード化”しない（親1枚カードに寄せる）
     - border-radius / background / border / shadow / backdrop-filter を撤去
  */
}

.hp-wrap.hud::after{ display:none !important; }


/* =========================
   2) Row1: HP/名前（HPバーの上） + 32
========================= */
.hp-wrap.hud .hud-top-row{
  grid-row: 1;
  width: 100%;
  display:grid;

  /* ✅ ここが核心：
     - 左右列の最小幅を 0 にして “名前の長さに引っ張られない”
     - 中央列（32列）とgapをclampで全端末共通化
     - 「少し余白を残す」→ 中央列clampのmin/gapのminでコントロール
  */
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, clamp(24px, 8vw, 64px))
    minmax(0, 1fr);

  align-items:end;

  /* ✅ 32との距離（見た目の余白） */
  gap: clamp(4px, 1.2vw, 10px);
}

/* 32 */
.hp-wrap.hud .hud-deck{
  justify-self:center;
  font-size: var(--deck-size);
  font-weight: 900;
  line-height: 1;
  color: #111;
  user-select:none;
}
.hp-wrap.hud .hud-deck .num{ font-variant-numeric: tabular-nums; }

/* 左右のテキスト */
.hp-wrap.hud .hud-top{
  display:grid;
  align-items:baseline;
  gap: 8px;
  min-width: 0;
}

/* ✅ Row1の左右ブロック：名前で列幅が変わらないように“縮めてOK”にする */
.hp-wrap.hud .hud-top-left,
.hp-wrap.hud .hud-top-right{
  min-width: 0;
  overflow: hidden;
}

/* ✅ Row1内のHPバーが短くなる原因（2カラムgridの片側に落ちる）
   - hp-bar を “2列ぶち抜き” にして、常に左右ブロック幅いっぱいを使わせる
   - さらに bar自体に最小幅を持たせて「列が0でもバーは最低長を保つ」
*/
.hp-wrap.hud .hud-top .hp-bar{
  grid-column: 1 / -1;
  width: 100%;
  min-width: var(--hpbar-minw);
  justify-self: stretch;
}

.hp-wrap.hud .label{
  font-size: var(--label-fs);
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ labelも“縮めてOK”（ellipsis安定） */
.hp-wrap.hud .hud-top-left .label,
.hp-wrap.hud .hud-top-right .label{
  min-width: 0;
}

.hp-wrap.hud .hp-num{
  font-size: var(--hpnum-fs);
  font-weight: 700;
  white-space: nowrap;
  min-width: var(--hpnum-minw);
  font-variant-numeric: tabular-nums;
}

.hp-wrap.hud .hud-top-left{
  justify-self: stretch;            /* ★変更：start → stretch */
  grid-template-columns: auto 1fr;
}
.hp-wrap.hud .hud-top-left .hp-num{ justify-self:start; text-align:left; }
.hp-wrap.hud .hud-top-left .label { justify-self:start; text-align:left; }

.hp-wrap.hud .hud-top-right{
  justify-self: stretch;            /* ★変更：end → stretch */
  grid-template-columns: 1fr auto;
}
.hp-wrap.hud .hud-top-right .label { justify-self:end; text-align:right; }
.hp-wrap.hud .hud-top-right .hp-num{ justify-self:end; text-align:right; }


/* =========================
   3) Row2: HPバー（32の左右）
========================= */
.hp-wrap.hud .hud-hpbar-row{
  grid-row: 2;
  width: 100%;
  display:grid;
  grid-template-columns: minmax(var(--hpbar-minw), 1fr) auto minmax(var(--hpbar-minw), 1fr);
  align-items:center;
  gap: 12px;
}

.hp-wrap.hud .hud-hpbar-spacer{
  width: 1px;
  height: 1px;
}

/* HP BAR */
.hp-bar{
  width: 100%;
  height: var(--hpbar-h);
  background: rgba(15,27,46,.10);
  overflow: hidden;
  border-radius: 0 !important;
}
.hp-bar .bar{
  height: 100%;
  width: 100%;
  border-radius: 0 !important;
  transition: width .25s ease;
}

/* 色はIDで固定 */
#barA{
  background: linear-gradient(270deg,#ffe3e8 0%,#ff9fb3 28%,#ff4f73 60%,#c8002f 100%) !important;
}
#barB{
  background: linear-gradient(270deg,#e6f9ff 0%,#8ee3ff 28%,#3aa9ff 60%,#0a3ea8 100%) !important;
}

/* HP減少方向：Aだけ反転（バーのみ許容） */
.hp-bar.hp-a{ transform: scaleX(-1); }
.hp-bar.hp-b{ transform: none; }


/* =========================
   4) Row3/4: OPEN/CLOSE（左右にゲージ）
========================= */
.hud-mid-row{
  width: 100%;
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* left gauge / pill / right gauge */
  align-items:center;
  gap: var(--mid-row-gap);
}

.hp-wrap.hud .hud-mid-row.open{  grid-row: 3; }
.hp-wrap.hud .hud-mid-row.close{ grid-row: 4; }

.hp-wrap.hud .hud-mid-row > .streak-wrap:first-child{ justify-self:end; }
.hp-wrap.hud .hud-mid-row > .hud-pill{ justify-self:center; }
.hp-wrap.hud .hud-mid-row > .streak-wrap:last-child{  justify-self:start; }

/* ピル */
.hp-wrap.hud .hud-pill{
  width: var(--pill-w);
  height: var(--pill-h);
  font-size: var(--pill-fs);

  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1; 

  font-weight: 900;
  letter-spacing:.06em;
  border: 1px solid rgba(0,0,0,.10);
}
.hp-wrap.hud .hud-pill.open{  background:#dff4e7; color:#2d9159; }
.hp-wrap.hud .hud-pill.close{ background:#dfeaff; color:#2e57c8; }


/* =========================
   5) ゲージ（streak）共通
========================= */
.hp-wrap.hud .streak-wrap{
  display:flex !important;
  align-items:center;
  flex-wrap:nowrap !important;
  gap: var(--streak-gap) !important;
}

/* 数字/ラベルの疑似要素は全部消す */
#streakA, #streakB, #closeStreakA, #closeStreakB{
  font-size: 0 !important;
  line-height: 0 !important;
}
#streakA::before, #streakB::before, #closeStreakA::before, #closeStreakB::before,
.streak.is-open::before, .streak.is-close::before{
  content:none !important;
  display:none !important;
}

/* seg（OFF） */
.hp-wrap.hud .streak-wrap .streak-seg{
  display:inline-block !important;
  width: var(--seg-w) !important;
  height: var(--seg-h) !important;

  transform: skewX(var(--seg-skew)) !important;
  transform-origin: center;

  border-radius: var(--seg-r) !important;
  background:#fff !important;
  border: var(--seg-bd) !important;

  opacity: 1;
  filter: none;
  box-shadow: var(--seg-shadow-off) !important;
  clip-path: none !important;
}

/* A側ゲージだけ傾き反転 */
#streakA .streak-seg,
#closeStreakA .streak-seg{
  transform: skewX(var(--seg-skew-left)) !important;
}

/* seg（ON） */
.hp-wrap.hud .hud-mid-row.open  .streak-wrap .streak-seg.on{
  background:#8ccaa8 !important;
  border-color: rgba(0,0,0,.30) !important;
  box-shadow: var(--seg-shadow-on) !important;
}
.hp-wrap.hud .hud-mid-row.close .streak-wrap .streak-seg.on{
  background:#7ea6e6 !important;
  border-color: rgba(0,0,0,.30) !important;
  box-shadow: var(--seg-shadow-on) !important;
}

/* A/B 並び（左右対称） */
#streakA, #closeStreakA{
  display:flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
}
#streakB, #closeStreakB{
  display:flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}


/* =========================
   6) あなたのターン暗転
========================= */
#turn-dim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
#turn-dim.show{ opacity: 1; }


/* =========================
   damage shake（HP減少で揺れる）
========================= */
.hp-wrap.hud .hud-top-left,
.hp-wrap.hud .hud-top-right{
  transform-origin: center;
  will-change: transform;
}

.hp-wrap.hud .hud-top-left.is-hit,
.hp-wrap.hud .hud-top-right.is-hit{
  animation: hudHitShake 240ms cubic-bezier(.2,.9,.2,1);
}

@keyframes hudHitShake{
  0%   { transform: translate(0,0) scale(1); }
  20%  { transform: translate(calc(var(--shakeX, 8px) * -1), calc(var(--shakeY, 0px) * -1)) scale(var(--zoom, 1)); }
  45%  { transform: translate(var(--shakeX, 8px), var(--shakeY, 0px)) scale(var(--zoom, 1)); }
  70%  { transform: translate(calc(var(--shakeX, 8px) * -0.6), calc(var(--shakeY, 0px) * 0.6)) scale(1); }
  100% { transform: translate(0,0) scale(1); }
}