/* ============================================================
   style_c.css — C案「竜の書」スキン
   ------------------------------------------------------------
   ・style.css の後に読み込むオーバーライド専用シート。
   ・game.js が動的生成するクラス名（redesign_c_phase0_dom_contract.md §4）
     は改名せず、ここで再スタイルする。
   ・z-index体系は既存を維持: モーダル1000 / loading-shield 500 /
     ドック450 / FAB400。
   ============================================================ */

/* ===== 1. トークン上書き ===== */
:root {
  /* 面 */
  --bg: #100c1e;
  --card: #1c1730;
  --card2: #262040;
  --border: #37305a;
  /* 役割色: accentは「主操作(熾火)」に転用。金彩は通貨/希少/見出し */
  --accent: #e07b39;
  --gold: #e8d19a;
  --text: #f2edf8;
  --muted: #9187ad;
  /* 属性色・ステータス色・成功/失敗色は視認性優先で style.css の原色を継承する
     （上書きしない。HP/攻撃/防御…や装備ボーナス(+N)、勝敗ログの鮮やかさを維持） */

  /* C案専用トークン */
  --c-gold-2: #b08d4f;
  --c-gold-grad: linear-gradient(135deg, #f2e0b0, #cfa85e 55%, #a97e3f);
  --c-ember-grad: linear-gradient(180deg, #f09250, #d96b2e);
  --c-glass: rgba(16, 12, 30, 0.72);
  --c-glass-border: rgba(232, 209, 154, 0.28);
  --c-shadow-panel: 0 2px 8px rgba(0,0,0,0.5), 0 10px 28px rgba(0,0,0,0.35);
  --c-font-display: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
}

body {
  background:
    radial-gradient(1100px 480px at 85% -8%, rgba(138, 74, 107, 0.20), transparent 60%),
    radial-gradient(900px 420px at 8% 108%, rgba(74, 44, 104, 0.25), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ===== 2. ヘッダー（上部はHUDのみ。ガラス調） ===== */
header {
  background: var(--c-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-glass-border);
  padding-bottom: 8px;
}
#header-info { gap: 8px; padding-bottom: 0; }
#header-info > span {
  background: rgba(38, 32, 64, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  line-height: 1.5;
}
#header-info b { color: var(--gold); }

/* ===== 3. ナビ: 上部タブ（本番 index.html と同配置・7タブ直アクセス） =====
   配置・挙動は style.css のデフォルト（ヘッダー内・下線タブ・sticky ヘッダー）を
   そのまま使う。設定/ヒントもワンクリック。ここではC配色の微調整のみ。 */
.tab-btn { font-weight: bold; }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ===== 4. カード＝石版パネル ===== */
.card {
  background: linear-gradient(180deg, var(--card2), var(--card) 26%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--c-shadow-panel);
  padding: 14px 16px;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--c-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--gold);
}
.section-title::before,
.section-title::after {
  content: '';
  height: 1px;
  flex: 0 0 16px;
  background: linear-gradient(90deg, transparent, var(--c-gold-2));
}
.section-title::after {
  flex: 1;
  background: linear-gradient(90deg, var(--c-gold-2), transparent);
}

/* 見出し（モーダル等）を明朝金彩に */
.modal-box h2, .town-modal-box h2, h2 {
  font-family: var(--c-font-display);
  letter-spacing: 0.12em;
  color: var(--gold);
}

/* ===== 5. サブタブ＝ピル ===== */
.sub-tabs {
  border-bottom: none;
  gap: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.tab-content > .sub-tabs {
  background: rgba(16, 12, 30, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sub-tab-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card2);
  color: var(--muted);
  padding: 5px 13px;
  min-height: 32px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
/* アクティブは金グラデ塗り潰しをやめ、淡い金tintのアウトラインピルに抑える
   （上部タブより目立たせない） */
.sub-tab-btn.active {
  background: rgba(232, 209, 154, 0.13);
  color: var(--gold);
  border-color: var(--c-gold-2);
  border-bottom-color: var(--c-gold-2);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.shop-tab-btn, .skill-filter-btn, .town-quick-btn, .home-sub-btn { border-radius: 999px; }

/* ===== 6. ボタン ===== */
button {
  background: var(--c-ember-grad);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  text-shadow: 0 1px 0 rgba(60, 25, 5, 0.35);
}
button.secondary {
  background: var(--card2);
  border: 1px solid var(--c-glass-border);
  color: var(--text);
  box-shadow: none;
  text-shadow: none;
}
button.secondary:hover { border-color: var(--gold); color: var(--gold); }
button:disabled { box-shadow: none; }
/* タブ・サブタブ等の透過系はグラデを持たない */
.tab-btn, .sub-tab-btn, .modal-close-btn, .inbox-badge-btn, .alloc-btn,
.skill-filter-btn, .hint-group-title, .img-pick-btn {
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}
.sub-tab-btn { background: var(--card2); }
.sub-tab-btn.active { background: rgba(232, 209, 154, 0.13); }
.alloc-btn { background: var(--card2); }
#action-fab .fab-btn { background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,0.45); }

/* ===== 7. モーダル（儀式調スキン。位置・z-index・作法は既存のまま） ===== */
.modal-overlay {
  background: rgba(6, 4, 14, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-box {
  background: linear-gradient(180deg, var(--card2), var(--card) 30%);
  border: 1px solid var(--c-gold-2);
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.modal-overlay.active .modal-box { animation: c-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes c-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.battle-box {
  border-color: var(--c-gold-2);
  background: linear-gradient(180deg, var(--card2), var(--card) 30%);
}
.town-modal-box {
  border-color: var(--c-gold-2);
  background: linear-gradient(180deg, var(--card2), var(--card) 20%);
}

/* ===== 8. 市場（表示内容は不変・配色のみC化） ===== */
.market-tier-label {
  font-family: var(--c-font-display);
  color: var(--gold);
  border-bottom-color: rgba(232, 209, 154, 0.25);
  letter-spacing: 0.08em;
}
.market-tier-badge--first  { color: var(--success); background: rgba(124, 232, 168, 0.13); }
.market-tier-badge--second { color: var(--fail);    background: rgba(255, 107, 107, 0.12); }
.market-row--mine { border-color: var(--c-gold-2); }
.market-price { color: var(--gold); }

/* ===== 9. ランキング・ログ・バー類 ===== */
.ranking-rank { font-family: var(--c-font-display); color: var(--gold); }
.log-area .log-formula { color: #6f6890; }
.map-bar-track, .exp-bar-wrap { background: rgba(255,255,255,0.09); }
.exp-bar { background: var(--c-gold-grad); }

/* ===== 12. 竜バナー（サブタブ上・横幅いっぱい・常時表示） =====
   game.js updateHomeStatusUI が #home-dragon-banner に描画。
   大きな竜画像＋EXPリング＋大SI＋大Lv＋黎明の空グラデ。 */
#home-dragon-banner { margin: 0 -12px; }   /* tab-content の左右padding 12px を打ち消して全幅に */
.home-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 18px 24px;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(160px 120px at 26% 82%, rgba(255, 221, 150, 0.55), transparent 70%),
    radial-gradient(150% 78% at 50% 140%, rgba(18, 11, 30, 0.92) 46%, transparent 68%),
    linear-gradient(180deg, #241a46 0%, #402a62 24%, #74436a 52%, #bd7060 80%, #f0b06a 100%);
}
.home-hero .home-dragon-info {
  position: relative;
  flex: 1;
  min-width: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
/* 竜画像を囲むEXP進捗リング（強さ指数は上限がないためリング化しない＝経験値専用） */
.home-dragon-ring {
  --exp-pct: 0;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 6px;
  background: conic-gradient(var(--gold) calc(var(--exp-pct) * 1%), rgba(255, 255, 255, 0.16) 0);
  box-shadow: 0 0 18px rgba(232, 209, 154, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-dragon-ring .home-dragon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #1c1433;
}
.home-dragon-name {
  font-family: var(--c-font-display);
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.home-si-line { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.home-si-num {
  font-size: 2.1em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffe6a8;
  line-height: 1.05;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.home-si-suf { font-size: 0.8em; color: #e6dcc4; }
.home-dragon-lv { margin-top: 6px; font-size: 0.9em; color: #ece5f6; }
.home-lv-num {
  font-size: 1.4em;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.home-dragon-lv b { color: #ffe6a8; font-weight: 700; }
.home-exp-line {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.76em;
  color: #e8dff2;
}
.home-exp-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
}

/* ===== 13. 行動力タイマー: ホバー/タップで出るポップオーバー =====
   game.js は hdr-ap-timer を「AP<最大なら display=''（=CSSに委譲）/満タンなら none」に制御。
   よって既定を display:none にし、ホバー時 or .ap-show 付与時のみ表示する。 */
.ap-info-wrap { position: relative; cursor: pointer; }
.hdr-ap-timer {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  white-space: nowrap;
  background: rgba(28, 20, 48, 0.98);
  border: 1px solid var(--c-gold-2);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
.hdr-ap-timer::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--c-gold-2);
}
.ap-info-wrap:hover .hdr-ap-timer,
.ap-info-wrap.ap-show .hdr-ap-timer { display: block; }

/* ===== 14. モーダル表示中は背面スクロールを止める（index2のObserverが body.modal-open を付与） ===== */
.modal-overlay { overscroll-behavior: contain; }
body.modal-open { overflow: hidden; }

/* ===== 11. PC（>=900px）: タブを左サイドの縦レールに ===== */
@media (min-width: 900px) {
  /* 本文とヘッダーをレール幅ぶん右へ寄せる */
  body { padding-left: 104px; }
  .tab-content { max-width: 980px; margin: 0 auto; }

  /* ヘッダーの backdrop-filter は position:fixed 子孫を封じ込めてしまうため、
     PCでは解除して #tab-nav をビューポート基準の左レールにできるようにする。 */
  header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--card);
  }

  /* 左レール本体 */
  #tab-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 104px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    padding: calc(14px + env(safe-area-inset-top)) 8px 14px;
    background: var(--c-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--c-glass-border);
    z-index: 110;              /* sticky header(100) より前面 */
    overflow-y: auto;
  }
  #tab-nav .tab-btn {
    width: 100%;
    border-radius: 12px;
    border-bottom: none;       /* 縦並びでは下線アクティブは使わない */
    padding: 10px 6px;
  }
  #tab-nav .tab-btn.active {
    border-bottom: none;
    background: rgba(232, 209, 154, 0.14);
  }
  #tab-nav .tab-icon  { font-size: 1.5em; }
  #tab-nav .tab-label { font-size: 0.72em; }
}

/* ===== 16. タブ icon（絵文字を文字の上に表示。未読は金グロー） =====
   上部タブは主ナビ。サブタブより存在感が上になるよう、アクティブ時は
   淡い金の背景チップ＋やや大きめアイコンで格上げする。 */
.tab-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px 4px;
  min-width: 0;
  border-radius: 10px 10px 0 0;
}
.tab-icon  { font-size: 1.35em; line-height: 1; display: block; }
.tab-label { font-size: 0.7em; line-height: 1.3; letter-spacing: 0.02em; }
.tab-btn.active {
  background: rgba(232, 209, 154, 0.12);
  border-bottom-width: 2px;
}
.tab-btn.active .tab-icon { filter: drop-shadow(0 0 5px rgba(232, 209, 154, 0.5)); }
.tab-btn.tab-notify .tab-icon {
  animation: c-tab-icon-glow 1.1s ease-in-out infinite alternate;
}
@keyframes c-tab-icon-glow {
  from { filter: none; }
  to   { filter: drop-shadow(0 0 6px var(--gold)) brightness(1.6); }
}

/* ===== 17. ステータス／属性／ペットの各パネル間隔 ===== */
#home-status-content .home-panel { margin-bottom: 12px; }
#home-status-content .home-panel:last-child { margin-bottom: 0; }

/* ===== 18. 竜の力（円バッジ＋本来値大・補正小の緑。ステータスバー無し） ===== */
.home-stat-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  margin-bottom: 0;
}
.home-stat-grid .stat-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* ベース.stat-item の space-between を打ち消す（数値を右端に離さない） */
  gap: 8px;
  background: none;
  border: none;
  padding: 2px;
}
/* 円バッジ: 属性色クラス(light-col等)が currentColor を決める。
   ・枠線＝鮮やかな属性色（currentColor）
   ・文字＝属性色を淡くした「褪せた色」（text-fill-colorで上書き。border色には影響しない）
   ・中は属性色を薄く効かせた控えめグラデーションでリッチに */
.home-stat-grid .stat-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.10), transparent 62%),
    linear-gradient(158deg, color-mix(in srgb, currentColor 26%, transparent), rgba(8, 6, 16, 0.5));
  -webkit-text-fill-color: color-mix(in srgb, currentColor 52%, #d8d2e8);  /* 褪せた文字色 */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.05;
}
/* 数値はバッジのすぐ右（右揃えで離さない） */
.home-stat-grid .stat-val {
  font-size: 1.3em;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* 装備補正: 元mock(mock_design_C.html)と同じ「細字(normal)・小さめ・ミント緑」。減少は赤 */
#home-status-content .eq-bonus {
  margin-left: 5px;
  font-size: 11px;
  font-weight: normal;
  color: #7ce8a8;
  vertical-align: baseline;
}
#home-status-content .eq-bonus.eq-bonus-neg { color: #ff7a7a; }
/* 属性の装備補正は素の属性値の「下」に表示する */
#home-status-content .eq-bonus.eq-bonus-attr {
  display: block;
  margin-left: 0;
  font-size: 0.78em;
  line-height: 1.2;
}

/* ===== 19. 属性（環にはしない。ステータスと馴染むリッチなペア表示） ===== */
.home-attr-pairs {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 0;
}
.home-attr-pairs .attr-pair {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
}
.home-attr-pairs .attr-label { font-size: 12px; font-weight: bold; }
.home-attr-pairs .attr-val { font-size: 14px; font-weight: bold; color: var(--text); }
.home-attr-pairs .attr-pair-sep { color: var(--muted); }

/* ===== 20. 連れ歩きペット（.card home-panel として描画） ===== */
/* style.css の .home-pet-section(border-top/margin-top) はカード枠と二重になるため打ち消す */
.card.home-pet-section { border-top: 1px solid var(--border); margin-top: 0; padding-top: 14px; }
.home-pet-section > .section-title { margin-bottom: 8px; }
.home-pet-section .home-pet-card {
  background: rgba(16, 12, 30, 0.5);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 8px;
}
.home-pet-section .home-pet-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 2px solid var(--border);
}

/* ===== 21. 市場カード（情報量維持・C案配色） ===== */
.market-row {
  background: linear-gradient(180deg, rgba(38,32,64,0.78), rgba(26,20,46,0.78));
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}
.market-row--mine {
  background: linear-gradient(180deg, rgba(54,38,20,0.75), rgba(38,26,14,0.75));
  border-color: var(--c-gold-2);
}
.market-tier-label {
  font-family: var(--c-font-display);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding: 10px 4px 5px;
  border-bottom: 1px solid rgba(232, 209, 154, 0.22);
  margin-bottom: 8px;
}
.market-tier-badge {
  border-radius: 999px;
  font-size: 0.72em;
  padding: 2px 8px;
}
.market-tier-badge--first {
  background: rgba(46, 200, 120, 0.18);
  color: #5de8a8;
  border: 1px solid rgba(93, 232, 168, 0.4);
}
.market-tier-badge--second {
  background: rgba(220, 70, 70, 0.15);
  color: #f88;
  border: 1px solid rgba(248, 136, 136, 0.35);
}
.market-item-name { color: var(--text); }
.market-qty, .market-expiry { color: var(--muted); }

/* 購入・売却は市場の主行動。game.js では .secondary（フラット）だが、
   熾火グラデのリッチボタンに格上げする。取下(cancel系)は破棄操作なので secondary のまま。
   #tab-market + 属性セレクタで button.secondary より高い詳細度にして上書き。 */
#tab-market button[onclick^="buyListing"],
#tab-market button[onclick^="fulfillBuyRequest"] {
  background: var(--c-ember-grad);
  border: none;
  color: #fff8f2;
  font-weight: bold;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 6px rgba(217,107,46,0.35);
  text-shadow: 0 1px 0 rgba(60,25,5,0.35);
}
#tab-market button[onclick^="buyListing"]:hover,
#tab-market button[onclick^="fulfillBuyRequest"]:hover {
  filter: brightness(1.08);
  border: none;
  color: #fff8f2;
}

/* 見出し内の補足情報（サブ垢禁止・返却期限・送信時の注意など）は独立行に落として小さく地味に。
   .section-title は flex なので order で ::after ライン(flex:1)の後ろ＝2行目へ回す。 */
.section-title:has(.section-note) { flex-wrap: wrap; }
.section-note {
  order: 9;
  flex: 1 0 100%;
  margin-top: 2px;
  font-family: -apple-system, 'Hiragino Sans', sans-serif; /* 見出し明朝を継承しない */
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--muted);
  text-shadow: none;
}