/* Phase L4-fix3: 街HUD */
:root {
  --hud-bg: linear-gradient(180deg, #fbfaf3 0%, #f5ecd8 100%);
  --hud-card: rgba(255,255,255,0.85);
  --hud-card-border: rgba(180,140,60,0.35);
  --hud-text-main: #3a2a10;
  --hud-text-sub: #806040;
  --hud-accent: #ff8fa3;
  --hud-accent2: #c9b8ff;
}
html, body { margin:0; padding:0; min-height:100vh; background:var(--hud-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
  color:var(--hud-text-main); }

/* Phase L4-fix3: 1カラムレイアウトに戻す */
#hud-app {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  gap:8px;
  padding:10px;
  box-sizing:border-box;
  overflow:visible;
}

/* ① トップバー */
#topbar { background:linear-gradient(90deg,#2a3548,#3a4a68,#2a3548);
  display:flex; align-items:center; padding:0 14px; gap:10px;
  border-radius:14px; color:#f0d490; font-weight:800; letter-spacing:.06em;
  box-shadow:0 3px 14px rgba(0,0,0,.25);
  border:1px solid rgba(212,175,55,.3); overflow:hidden; min-height:50px; }
#tb-logo { font-size:18px; font-weight:900; flex-shrink:0; }
#tb-name { flex:1; font-size:16px; opacity:.95; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-stat { font-size:16px; background:rgba(212,175,55,.18);
  border:1px solid rgba(212,175,55,.3); padding:4px 10px;
  border-radius:12px; white-space:nowrap; flex-shrink:0; color:#f0d490; }
.tb-stat-btn { cursor:pointer; }

/* ② 状態カード行 */
.card-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.info-card { background:var(--hud-card); border:1px solid var(--hud-card-border);
  border-radius:14px; padding:10px 14px; box-shadow:0 2px 8px rgba(140,100,30,.08); }
.ic-title { font-size:16px; color:var(--hud-text-sub); font-weight:700;
  letter-spacing:.08em; margin-bottom:6px; }
.ic-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.ic-row { display:flex; justify-content:space-between; align-items:baseline; }
.ic-label { color:var(--hud-text-sub); font-size:16px; }
.ic-value { color:var(--hud-text-main); font-weight:800; font-size:16px; }

/* ③ 建物カードグリッド (Phase L4-fix2: カラー分類版) */
#town-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:14px;
  background:linear-gradient(180deg,#fef9e7 0%,#f5e6c8 50%,#e8d4a0 100%);
  border-radius:14px;
  border:1px solid rgba(180,140,60,.3);
  box-shadow:0 4px 16px rgba(180,140,60,.15);
}
.building-card {
  background:rgba(255,255,255,0.92);
  border:2px solid rgba(180,140,60,.35);
  border-radius:14px;
  padding:14px 10px;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:108px;
  color:var(--hud-text-main);
}
.building-card:hover {
  transform:translateY(-3px) scale(1.02);
  border-color:var(--hud-accent);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.building-card.bc-locked { opacity:.5; cursor:not-allowed; }
.building-card.bc-locked:hover {
  transform:none;
  border-color:rgba(180,140,60,.35);
  box-shadow:none;
}
/* 自分の情報カテゴリ(青) */
.building-card.bc-self {
  background:linear-gradient(135deg, #e8f4f8, #c8e0f0);
  border-color:#5a90b8;
}
.building-card.bc-self:hover { border-color:#2e6da4; box-shadow:0 6px 18px rgba(46,109,164,.25); }
.building-card.bc-self .bc-title { color:#1a4a7a; }
.building-card.bc-self .bc-desc { color:#3a6a94; }
/* お店カテゴリ(オレンジ) */
.building-card.bc-shop {
  background:linear-gradient(135deg, #fef0d8, #fce4b8);
  border-color:#d4a04a;
}
.building-card.bc-shop:hover { border-color:#c0782a; box-shadow:0 6px 18px rgba(192,120,42,.25); }
.building-card.bc-shop .bc-title { color:#8b5a1a; }
.building-card.bc-shop .bc-desc { color:#a87838; }
/* ダンジョン入口(深い紅+金縁、2マス占有) */
.building-card.bc-dungeon {
  grid-column:span 2;
  background:linear-gradient(135deg, #8b1a1a, #5a0e0e);
  color:#f0d490;
  border:2px solid #d4af37;
  box-shadow:0 6px 20px rgba(139,26,26,.5);
}
.building-card.bc-dungeon:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 28px rgba(139,26,26,.7);
  border-color:#f4cf57;
}
.building-card.bc-dungeon .bc-title { color:#f4cf57; font-size:16px; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.building-card.bc-dungeon .bc-desc { color:rgba(244,207,87,.92); }
.bc-icon { font-size:36px; line-height:1; margin-bottom:6px; }
.bc-title { font-weight:800; font-size:16px; letter-spacing:.04em; color:var(--hud-text-main); }
.bc-desc { font-size:16px; color:var(--hud-text-sub); margin-top:3px; line-height:1.4; }

/* ⑥ 次のラン (L9: compact) */
#next-run {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 16px rgba(0,0,0,.15);
  border-top: 2px solid rgba(180,140,60,.35);
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nr-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}
.nr-icon { font-size: 18px; }
.nr-name { font-weight: 700; color: var(--hud-text-main); font-size: 16px; }
.nr-level { color: var(--hud-text-sub); font-size: 16px; padding: 2px 8px; background: rgba(180,140,60,.12); border-radius: 10px; }
.nr-change-btn {
  margin-left: auto;
  background: rgba(180,140,60,.15);
  border: 1px solid rgba(180,140,60,.35);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 16px;
  color: var(--hud-text-main);
  cursor: pointer;
}
#btn-start-run {
  width: 100%;
  background: linear-gradient(180deg, #8b1a2a, #6a0e1c);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(140,30,40,.4);
}
#btn-start-run:hover { background: linear-gradient(180deg,#9b2a3a,#7a1a2c); }
@media (max-width: 480px) {
  .nr-name { font-size: 16px; }
  .nr-level { font-size: 16px; }
  #btn-start-run { font-size: 16px; padding: 9px; }
}

/* Phase L4-fix3: チャットブロック */
.chat-block { background:var(--hud-card); border:1px solid var(--hud-card-border);
  border-radius:12px; padding:12px 14px; max-height:none; font-size:16px; }
.cb-title { font-size:16px; font-weight:800; color:var(--hud-text-sub);
  letter-spacing:.06em; margin-bottom:8px; padding-bottom:6px;
  border-bottom:1px solid var(--hud-card-border); }
.cb-item { font-size:16px; line-height:1.5; padding:5px 0;
  border-bottom:1px dashed rgba(180,140,60,.15); }
.cb-item:last-child { border-bottom:none; }
.cb-time { font-size:16px; color:var(--hud-text-sub); margin-left:4px; opacity:.65; }
.cb-future { background:rgba(125,217,216,.1); border:1px dashed #7dd9d8;
  border-radius:8px; padding:10px; text-align:center; font-size:16px;
  color:#5090a0; font-style:italic; margin-top:10px; }

/* Phase L4-fix3: 酒場タブ式 */
.tav-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px;
  margin-bottom:8px; border-bottom:1px solid var(--hud-card-border);
  scrollbar-width:thin; }
.tav-tab { padding:6px 12px; background:rgba(0,0,0,.04);
  border:1.5px solid rgba(180,140,60,.25); border-radius:10px;
  font-size:16px; font-weight:700; color:var(--hud-text-sub);
  cursor:pointer; white-space:nowrap; flex-shrink:0; transition:.15s; }
.tav-tab:hover { background:rgba(255,143,163,.1); color:var(--hud-text-main); }
.tav-tab.active { background:linear-gradient(135deg,#8b1a1a,#5a0e0e);
  color:#f4cf57; border-color:#d4af37;
  box-shadow:0 2px 8px rgba(139,26,26,.3); }
.tav-tab.locked { opacity:.45; cursor:not-allowed; }
.tav-tab.locked:hover { background:rgba(0,0,0,.04); color:var(--hud-text-sub); }
.tav-content { min-height:120px; }
.tav-section { margin-bottom:10px; }
.tav-section-title { font-size:16px; font-weight:700; color:var(--hud-text-sub);
  margin-bottom:4px; letter-spacing:.04em; }
.tav-npc-line { font-style:italic; padding:8px 12px;
  background:rgba(180,140,60,.08); border-radius:8px;
  border-left:3px solid var(--hud-accent); font-size:16px;
  color:var(--hud-text-main); margin-bottom:6px; line-height:1.7; }
.tav-achv { font-size:16px; padding:4px 0; line-height:1.5; }

/* ダンジョン選択モーダル */
#dg-modal { display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); z-index:9999; align-items:center; justify-content:center; }
#dg-modal.show { display:flex; }
.dgm-card { background:#fbfaf3; border-radius:18px; padding:20px;
  max-width:560px; width:90%; max-height:88vh; overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.4); }
.dgm-title { font-size:16px; font-weight:900; margin-bottom:14px;
  color:var(--hud-text-main); text-align:center; }
.dgm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dgm-card-item { background:var(--hud-card); border:2px solid var(--hud-card-border);
  border-radius:12px; padding:12px; text-align:center; cursor:pointer;
  transition:.15s; min-height:100px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.dgm-card-item:hover:not(.locked) { transform:scale(1.04); border-color:var(--hud-accent); }
.dgm-card-item.locked { opacity:.45; cursor:not-allowed; }
.dgm-card-item.current { border-color:#d4af37; background:rgba(212,175,55,.1); }
.dgm-icon { font-size:28px; line-height:1; }
.dgm-name { font-size:16px; font-weight:800; margin-top:4px; }
.dgm-unlock { font-size:16px; color:var(--hud-text-sub); margin-top:2px; }
.dgm-close { width:100%; margin-top:14px; padding:12px;
  background:rgba(0,0,0,.1); border:none; border-radius:10px;
  font-size:16px; font-weight:700; cursor:pointer; }

/* 全体雑談チャット(右カード内スクロール領域) */
.side-chat-content {
  overflow-y:auto;
  max-height:220px;
  scrollbar-width:thin;
}

/* Phase L4-fix4: 4キャラ詳細表示 */
#party-detail-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pd-row {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:8px;
  align-items:center;
  padding:6px 8px;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(180,140,60,.2);
  border-radius:8px;
  transition:.15s;
}
.pd-row:hover {
  background:rgba(255,255,255,0.8);
  border-color:var(--hud-accent);
}
.pd-icon {
  width:48px;
  height:48px;
  background:linear-gradient(135deg,#e8f4f8,#c8e0f0);
  border:2px solid #5a90b8;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}
.pd-main {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pd-name-row {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:16px;
}
.pd-name {
  font-weight:800;
  color:var(--hud-text-main);
}
.pd-job {
  color:var(--hud-text-sub);
  font-size:16px;
}
.pd-lv {
  margin-left:auto;
  font-size:16px;
  color:var(--hud-accent);
  font-weight:800;
}
.pd-stats {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  font-size:16px;
}
.pd-stat {
  text-align:center;
  background:rgba(0,0,0,.04);
  padding:2px 4px;
  border-radius:4px;
}
.pd-stat-label {
  color:var(--hud-text-sub);
  font-size:16px;
  display:block;
}
.pd-stat-value {
  color:var(--hud-text-main);
  font-weight:700;
  font-size:16px;
}
.pd-hp .pd-stat-value { color:#c0392b; }
.pd-mp .pd-stat-value { color:#2e6da4; }
.pd-rebirth {
  font-size:16px;
  color:#f0c050;
  font-weight:800;
  margin-left:4px;
}
.pd-empty {
  text-align:center;
  padding:14px;
  color:var(--hud-text-sub);
  font-size:16px;
  font-style:italic;
}
.chat-line.chat-grand{
  background: linear-gradient(90deg, rgba(255,200,80,.15), rgba(255,143,163,.1));
  border-left: 3px solid #f0c050;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom:4px;
  animation: chat-grand-glow 2s ease-out;
}
@keyframes chat-grand-glow{
  0% { box-shadow: 0 0 24px rgba(240,192,80,.6); }
  100% { box-shadow: 0 0 0 rgba(240,192,80,0); }
}
.chat-line.chat-rebirth{
  padding:6px 10px;
  margin-bottom:4px;
  border-radius:6px;
  background:rgba(240,200,80,.06);
}
.chat-line.chat-rebirth .chat-head{ color: #d4a820; font-weight: 700; font-size:16px; }
.chat-line.chat-grand .chat-head{ color: #f0c050; font-weight: 800; font-size:16px; }
.chat-line.chat-grand .chat-sub{ color: #ff8fa3; font-weight: 700; margin-top:4px; font-size:16px; }
.chat-line .chat-time{ font-size:16px; color:var(--hud-text-sub); margin-top:2px; }

/* レスポンシブ */
@media (max-width:700px) {
  .card-row { grid-template-columns:1fr; }
  .ic-grid { grid-template-columns:1fr; }
  #town-grid {
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    padding:12px;
  }
  .building-card {
    min-height:88px;
    padding:10px 8px;
  }
  .bc-icon { font-size:28px; margin-bottom:4px; }
  .bc-title { font-size:16px; }
  .bc-desc { font-size:16px; }
  .building-card.bc-dungeon { grid-column:span 2; }
  .building-card.bc-dungeon .bc-title { font-size:16px; }
  .dgm-grid { grid-template-columns:repeat(2,1fr); }
  .pd-stats { grid-template-columns:repeat(5,1fr); gap:2px; }
  .pd-stat { padding:1px 2px; }
  .pd-stat-value { font-size:16px; }
}


/* L9: ダンジョン詳細情報ブロック */
#dungeon-info-block {
  background: var(--hud-card);
  border: 1px solid var(--hud-card-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  color: var(--hud-text-main);
}
.dib-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hud-text-main);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(180,140,60,.2);
}
.dib-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 16px;
}
.dib-icon { font-size: 20px; }
.dib-level { color: var(--hud-text-sub); padding: 3px 10px; background: rgba(180,140,60,.12); border-radius: 12px; }
.dib-risk { color: #c08030; font-weight: 700; }
.dib-desc {
  font-size: 16px;
  color: var(--hud-text-sub);
  line-height: 1.6;
  margin-bottom: 10px;
}
.dib-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hud-text-sub);
  margin-bottom: 6px;
  letter-spacing: .05em;
}
.dib-monster-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dib-monster-item {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(180,140,60,.25);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 16px;
  color: var(--hud-text-main);
}
/* L9: キャラ情報行のアイコン縦位置fix */
.char-info-row, .charinfo-row, .pd-row {
  align-items: center;
}

/* レガシーCSS上書き: style.css の html,body{overflow:hidden} を無効化 */
html, body { height:auto !important; overflow:visible !important; }