/* takomin-npc.css */

/* ===== 全体配置 ===== */
.takomin-area{
  margin:12px auto 24px;
  display:flex;
  justify-content:center;
  padding:0 10px;
  box-sizing:border-box;
}

/* ===== 横並びの基準（ここでサイズも決める） ===== */
.takomin-wrap{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;         /* ←スマホでも折り返し禁止 */
  align-items:flex-start !important;   /* ←上揃え */
  gap:8px;
  width:min(520px, 100%);
  box-sizing:border-box;

  --npc-size: 40px;                    /* ★タコ民は全て40px */
}

/* ===== タコ民画像（縮まない・固定） ===== */
.takomin-avatar{
  flex:0 0 var(--npc-size) !important; /* ←絶対縮まない */
  width:var(--npc-size);
  height:var(--npc-size);
  display:block;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}

.takomin-avatar img{
  width:var(--npc-size) !important;
  height:var(--npc-size) !important;
  object-fit:contain;
  display:block;
  image-rendering:pixelated;
}


/* ===== 横テキスト（黒バー本体：常に表示してチラつかない） ===== */

.takomin-text{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100%;
  padding:6px 20px;
  background:#000;
  color:#fff;
  font-size:15px;
  line-height:1.4;
  font-family:"DotGothic16","PixelMplus10",monospace;
  box-sizing:border-box;
  word-break:break-word;

  
  /* ▼ 黒バーは消さない（フェード対象にしない） */
  opacity:1 !important;
}

/* ===== 文字だけフェード（JSは #takominLine に fade-in/out を付ける） ===== */
#takominLine{
  display:block;
  opacity:1;
  transition:opacity .2s ease;
}

/* ▼ fadeクラスは #takominLine にだけ効かせる（黒バーがチラつかない） */
#takominLine.fade-out{ opacity:0; }
#takominLine.fade-in { opacity:1; }

/* ===== スマホ微調整（横並びは維持） ===== */
@media (max-width:480px){
  .takomin-text{ font-size:15px; }
}

/* =========================
   ✅ チラつき対策（追記）
   ========================= */



/* 文字だけフェードを“合成レイヤー化”してチラつき減らす */
#takominLine{
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 黒バー自体も描画を安定させる（環境によって効く） */
.takomin-text{
  contain: paint;
  transform: translateZ(0);
}