/* ==================== 段落セクション ==================== */
#hw-hero-root {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.chara-sections { display: flex; flex-direction: column; gap: 18px; max-width: 100%; min-width: 0; box-sizing: border-box; }
.chara-toc-slot {
  display: block;
  width: 100%;
  max-width: 100%;
  clear: both;
  float: none;
  margin: 0 0 20px;
  text-align: center;
}
.chara-toc-slot .toc {
  display: table !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
  text-align: left;
}
.chara-section { display: block; scroll-margin-top: 120px; }
.chara-section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.chara-section.is-collapsible {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.chara-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 18px;
  position: relative;
  z-index: 1;
  min-height: 40px;
  box-sizing: border-box;
  border-bottom: none;
  background: #eaf4fc;
}
.chara-section-head .chara-section-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 88px);
  position: relative;
  z-index: 1;
}
.chara-section-head .skill-detail-btn {
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
  margin: 0 0 0 auto;
  align-self: center;
  pointer-events: auto;
  cursor: pointer;
}
.chara-section.is-collapsible .chara-section-title,
.chara-section.is-always-open .chara-section-title {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  font-size: 24px;
  font-weight: bold;
  color: #111;
  border: none;
  padding: 0;
  background: transparent;
}
.chara-section-body { display: none; padding: 10px 0 18px; border-top: none; }
.chara-section.is-open .chara-section-body,
.chara-section.is-always-open .chara-section-body { display: block; padding-top: 12px; }
.chara-section.is-always-open {
  background: transparent;
  border: none;
  clear: both;
  margin-top: 0;
  padding-top: 0;
  position: relative;
  z-index: 0;
}
.chara-section.is-open > .chara-section-head .skill-detail-btn { background: #e8e8e8; color: #111; }
.chara-subhead { display: none; }

.tab-placeholder {
  padding: 60px 20px;
  text-align: center;
  color: #8a96a3;
  background: #121620;
  border-radius: 8px;
  font-size: 14px;
}

.basic-info-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; }
@media (max-width: 800px) { .basic-info-grid { grid-template-columns: 1fr; } }
.basic-panel { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 8px 16px; }
.basic-profile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .basic-profile { grid-template-columns: 1fr; }
  .basic-profile-band { grid-template-columns: 1fr; }
  .basic-profile-band .basic-row:empty { display: none; }
}
.basic-panel-title { font-size: 13px; letter-spacing: 0; color: #111; margin: 8px 0 4px; font-weight: bold; }
.basic-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ccc; font-size: 14px; }
.basic-row:last-child { border-bottom: none; }
.basic-profile-band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
  background: #e8e8e8;
}
.basic-label { color: #111; }
.basic-val { color: #e60012; font-weight: bold; text-align: right; }
.trait-tag {
  cursor: pointer;
  border-bottom: 1px dotted #e60012;
}
#trait-flytip {
  position: fixed;
  z-index: 20;
  display: none;
  left: 0;
  top: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: #111;
  max-width: min(420px, 92vw);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#trait-flytip.open { display: block; }
.trait-flytip-title { font-weight: bold; margin-bottom: 8px; }
.trait-flytip-heroes { display: flex; flex-wrap: wrap; gap: 8px; }
.trait-flytip-hero { width: 52px; text-align: center; }
.trait-flytip-hero img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  background: #eee;
}
.trait-flytip-hero span {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  margin-top: 2px;
  color: #111;
  font-weight: normal;
}
.basic-patrons { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.basic-patrons a {
  display: block;
  line-height: 0;
  text-decoration: none;
  border: none;
}
.basic-patrons img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  cursor: pointer;
}
.stat-head,
.stat-row {
  display: grid;
  grid-template-columns: 7.2em 1fr 1fr 1fr 3.8em 5.2em;
  gap: 6px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
}
.stat-panel .stat-row:nth-child(even) {
  background: #e8e8e8;
}
.stat-head {
  font-weight: bold;
  color: #111;
  border-bottom: 1px solid #111;
  text-align: center;
}
.stat-head span,
.stat-row .basic-label,
.stat-result { text-align: center; }
.stat-add-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #111;
  border-radius: 0;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.stat-add-btn:hover { background: #e8e8e8; }
.stat-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 12px;
  color: #111;
  background: #fff;
  text-align: center;
}
.skill-observed {
  display: inline-block;
  width: 9.5em;
  min-width: 9.5em;
  max-width: 9.5em;
  margin-left: 6px;
  padding: 2px 4px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}
.dmg-panel .stat-input {
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.dmg-panel > .basic-row:nth-child(even) {
  background: #e8e8e8;
}
.dmg-panel > .basic-row:nth-child(2),
.dmg-panel > .basic-row:nth-child(3),
.dmg-panel > .basic-row:nth-child(4) {
  font-size: 13px;
}
.dmg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 8px;
}
.dmg-reset-btn,
.dmg-freeze-btn,
.pet-toggle {
  background: #fff;
  border: 1px solid #ccc;
  color: #111;
  border-radius: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.dmg-freeze-btn.is-on,
.pet-toggle.is-on {
  background: #e8e8e8;
  border-color: #111;
}
.pet-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 8px;
}
.pet-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.pet-toggle.is-shown { display: inline-flex; }
.pet-toggle img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #f3efe4;
}
.basic-skill-list { margin-top: 16px; }
.basic-skill-list .skill-row[data-color="auto"],
.basic-skill-list .skill-row[data-color="green"],
.basic-skill-list .skill-row[data-color="violet"] {
  background: #e8e8e8;
}

/* ==================== 計算機 共通スタイル（グリフ・アーティファクト共通） ==================== */
.calc-container, .calc-container * { box-sizing: border-box; }
.calc-container { width: 100%; max-width: 100%; margin: 0 auto 30px; color: #111; font-family: inherit; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.calc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) {
  .calc-grid-3 { grid-template-columns: 1fr; }
}
.calc-card { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.calc-card select { width: 100%; margin-bottom: 10px; padding: 5px 6px; border-radius: 0; background: #fff; color: #111; border: 1px solid #ccc; font-size: 12px; }

.calc-icon-badge { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 10px; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 0 12px rgba(0,0,0,0.4) inset; }
.calc-icon-badge.bonus1 { background: radial-gradient(circle at 35% 30%, #3fae5c, #1c5c32); }
.calc-icon-badge.bonus2 { background: radial-gradient(circle at 35% 30%, #33a06f, #1a5c40); }
.calc-icon-badge.bonus3 { background: radial-gradient(circle at 35% 30%, #e08a3c, #7a4415); }
.calc-icon-badge.bonus4 { background: radial-gradient(circle at 35% 30%, #6a6ee0, #2b2d6e); }
.calc-icon-badge.bonus5 { background: radial-gradient(circle at 35% 30%, #4aa3d8, #1f5578); }
.calc-icon-badge.weapon { background: radial-gradient(circle at 35% 30%, #d15b5b, #6e1f1f); }
.calc-icon-badge.book { background: radial-gradient(circle at 35% 30%, #8a6ed1, #3a2a6e); }
.calc-icon-badge.ring { background: radial-gradient(circle at 35% 30%, #4ac0a0, #1f6e56); }

.calc-title { font-size: 15px; font-weight: bold; margin-bottom: 10px; }

.calc-stat-line { width: 100%; display: flex; justify-content: space-between; font-size: 13px; color: #111; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ccc; }
.calc-stat-line .calc-val { color: #e60012; font-weight: bold; font-size: 15px; }
.calc-stat-line.success-rate .calc-val { color: #7de88a; }

.calc-slider-group { width: 100%; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.calc-lv-label { width: 60px; font-size: 12px; font-weight: bold; color: #e60012; text-align: left; flex-shrink: 0; }
.calc-card input[type="range"] { flex: 1; min-width: 0; }
#tab-glyph .glyph-card .calc-slider-group { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
#tab-glyph .glyph-slider { flex: 1 1 0; min-width: 0; max-width: 100%; }
#tab-glyph .calc-lv-label { width: auto; min-width: 0; flex-shrink: 0; }
.gift-blank-row {
  width: 100%;
  height: 34px;
  margin-top: 4px;
  background: transparent;
  border: none;
}
#hw-hero-root .calc-card .calc-lv-label {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111 !important;
  min-width: 72px;
}
#hw-hero-root .calc-card .calc-lv-label > span {
  color: #c62828 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
.calc-btn-step { width: 24px; height: 24px; background: #fff; border: 1px solid #ccc; color: #111; border-radius: 0; font-size: 13px; font-weight: bold; cursor: pointer; flex-shrink: 0; }
.calc-btn-step:hover { background: #e8e8e8; }

.calc-resource-list { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.calc-res-item { background: #f3efe4; border: 1px solid #ccc; border-radius: 0; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: bold; color: #111; }
.calc-res-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.calc-res-icon.gold { background: radial-gradient(circle at 35% 30%, #ffe08a, #c9941f); }
.calc-res-icon.point { background: radial-gradient(circle at 35% 30%, #7de88a, #1f8a3a); }
.calc-res-icon.fragment { background: radial-gradient(circle at 35% 30%, #c98aff, #6a1fc9); }
.calc-res-icon.newmat { background: radial-gradient(circle at 35% 30%, #6ab8ff, #1c5d99); }
.calc-res-icon.coin { background: radial-gradient(circle at 35% 30%, #ffe08a, #c9941f); }
.calc-res-icon.chaos { background: radial-gradient(circle at 35% 30%, #ff9a6a, #c9491f); }

.calc-total-row { background: #f3efe4; border: 1px solid #ccc; border-radius: 0; padding: 12px 16px; display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; font-weight: bold; margin-bottom: 20px; color: #111; }
.calc-total-row .calc-total-val { color: #e60012; }

/* ==================== 補足情報セクション（アンロック条件・レベル上限・グラフ） ==================== */
.calc-info-section { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 18px 20px; color: #111; }
.calc-info-section h3 { font-size: 15px; margin: 0 0 10px; color: #111; border-bottom: 1px solid #ccc; padding-bottom: 8px; }
.calc-info-section h3:not(:first-child) { margin-top: 20px; }
.calc-info-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
.calc-info-table th, .calc-info-table td { padding: 6px 10px; border: 1px solid #ccc; text-align: center; }
.calc-info-table th { background: #e8e8e8; color: #111; }
.calc-info-table td { color: #111; background: #fff; }
.calc-info-note { font-size: 12px; color: #111; margin-top: 6px; }

.calc-chart-wrap { margin-top: 10px; overflow-x: auto; }
.calc-chart-wrap svg { display: block; width: 100%; height: auto; }
.calc-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; }
.calc-chart-legend span { display: flex; align-items: center; gap: 5px; }
.calc-chart-legend .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ==================== 追加：スペーサー・情報テーブル調整 ==================== */
.calc-stat-line.spacer { visibility: hidden; }
.table-wrapper { overflow-x: auto; }
.calc-info-table tr.table-total { font-weight: bold; background: #f3efe4 !important; color: #e60012; }
.calc-info-table tr.table-total td { background: #f3efe4 !important; color: #e60012 !important; }

.patchnote-list { margin: 0; padding-left: 26px; font-size: 16px; color: #111; line-height: 1.9; }
.patch-date { font-weight: 700; font-size: 16px; color: #111; margin-bottom: 4px; }
.patch-line { font-size: 16px; color: #111; }
.patchnote-list li { margin-bottom: 12px; }
.patchnote-list li::marker { color: #111; font-weight: bold; }
.patch-item { display: flex; gap: 12px; align-items: flex-start; }
.patch-icon {
  width: 56px; height: 56px; object-fit: cover; flex-shrink: 0;
  border-radius: 0; border: 1px solid #ccc; background: #f3efe4;
}
.patch-body { min-width: 0; flex: 1; }
.patch-title { font-weight: bold; color: #111; margin-bottom: 4px; }
.patch-body ul { margin: 4px 0 0; padding-left: 18px; }
.patch-body p { margin: 4px 0 0; font-size: 13px; color: #111; }
.patch-body strong { color: #e60012; }

.wisdom-card, .evolution-card, .exp-card, .gift-card { }
.wisdom-stats-wrap, .gift-stats-wrap { width: 100%; }
.calc-spacer-select { width: 100%; margin-bottom: 10px; padding: 5px 6px; font-size: 12px; visibility: hidden; }

/* ==================== アーティファクト：2列コスト表示 ==================== */
.calc-resource-list.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 6px;
}

/* ==================== アイテムタブ ==================== */
.item-tab-wrap { width: 100%; max-width: 100%; margin: 0 auto; color: #111; font-family: inherit; }
.item-box-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@media (max-width: 960px) { .item-box-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .item-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item-box {
  background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 10px; position: relative; color: #111;
}
.item-box-title { text-align: center; font-size: 13px; font-weight: bold; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #ccc; cursor: help; }
.item-box.rarity-white .item-box-title { color: #555; }
.item-box.rarity-green .item-box-title { color: #2e7d32; }
.item-box.rarity-blue .item-box-title { color: #1565c0; }
.item-box.rarity-violet .item-box-title { color: #6a1b9a; }
.item-box.rarity-orange .item-box-title { color: #e65100; }
.item-box.rarity-red .item-box-title { color: #c62828; }
.item-icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px;
  justify-items: center;
}
.item-slot { position: relative; width: 63px; height: 63px; background: #f3efe4; border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: help; border: 1px solid #ccc; overflow: hidden; }
.item-slot img { width: 63px; height: 63px; object-fit: contain; display: block; pointer-events: none; border-radius: 4px; }
.item-slot.rarity-white { border-color: #9aa3b5; }
.item-slot.rarity-green { border-color: #3d8f4a; }
.item-slot.rarity-blue { border-color: #2f6fb8; }
.item-slot.rarity-violet { border-color: #7a3db8; }
.item-slot.rarity-orange { border-color: #c47a12; }
.item-slot.rarity-red { border-color: #c43a3a; }
.item-slot.rarity-rainbow { border-color: #5ec8d8; }
.item-slot[data-count]:not([data-count="1"])::after {
  content: attr(data-count);
  position: absolute; bottom: 2px; right: 3px;
  background: #fff; color: #e60012;
  font-size: 10px; font-weight: bold; border-radius: 3px; padding: 0 3px; z-index: 1;
}
#item-flytip {
  position: fixed; z-index: 20; display: none; left: 0; top: 0;
  background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 8px 10px;
  font-size: 11px; color: #111; white-space: normal; pointer-events: none; max-width: min(360px, 92vw);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
#item-flytip.open { display: block; }
.item-flytip-name { font-weight: bold; color: #e60012; margin-bottom: 4px; }
.item-flytip-stats { line-height: 1.45; }
.item-flytip-cost { margin-top: 6px; color: #111; }
.item-flytip-craft { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: flex-end; }
.item-flytip-ing {
  position: relative; width: 40px; height: 40px; display: block;
  background: #f3efe4; border: 1px solid #ccc; border-radius: 0; overflow: hidden;
}
.item-flytip-ing img { width: 40px; height: 40px; object-fit: contain; display: block; }
.item-flytip-ing b {
  position: absolute; bottom: 0; right: 2px;
  color: #e60012; font-size: 10px; text-shadow: none;
}
.item-flytip-ing.is-text {
  width: auto; height: auto; min-height: 40px; max-width: 88px;
  padding: 4px 5px; font-size: 10px; line-height: 1.3; color: #111;
  overflow: hidden;
}
.item-total-row { background: #fff; border: 1px solid #ccc; border-radius: 0; padding: 14px; margin-bottom: 16px; color: #111; }
.item-total-row h3 { font-size: 14px; color: #111; margin: 0 0 10px; letter-spacing: 0; }
.item-total-list { display: flex; flex-wrap: wrap; gap: 8px; }
.item-total-list .item-slot { width: 46px; height: 46px; }
.item-total-list .item-slot img { width: 46px; height: 46px; }

/* ==================== スキンタブ ==================== */
.skin-card-image { width: 100%; aspect-ratio: 3/4; background: #f3efe4; border-radius: 0; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 40px; cursor: zoom-in; overflow: hidden; }
.skin-card-image img { width: 100%; height: 100%; object-fit: cover; }
.skin-stone-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  display: block;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  border-radius: 0;
  max-width: none;
}
.skin-date-row { width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #111; margin-bottom: 10px; text-align: left; }
.skin-card { height: 100%; }
.skin-card .calc-slider-group { margin-top: auto; }
.skin-date-row div { background: #f3efe4; border: 1px solid #ccc; color: #111; border-radius: 0; padding: 6px 8px; }

.skin-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
.skin-lightbox.open { display: flex; }
.skin-lightbox img { max-width: 80%; max-height: 80%; border-radius: 8px; position: relative; z-index: 1; }
.skin-lightbox .lb-close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; background: rgba(0,0,0,0.45); border: none; z-index: 2; padding: 4px 10px; border-radius: 4px; }
.skin-lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 36px; color: #fff; background: rgba(0,0,0,0.45); border: none; cursor: pointer; padding: 10px; z-index: 2; border-radius: 4px; }
.skin-lightbox .lb-prev { left: 16px; }
.skin-lightbox .lb-next { right: 16px; }

/* ==================== カード上部バッジ画像 ==================== */
.calc-badge-image {
  width: 104px;
  height: 104px;
  border-radius: 0;
  object-fit: contain;
  margin-bottom: 10px;
  display: block;
  background: #f3efe4;
}

/* ==================== アセンション ==================== */
.asc-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.asc-col {
  align-items: stretch;
  text-align: left;
  min-width: 0;
}
.asc-col .calc-title { width: 100%; text-align: center; }
.asc-col .calc-stat-line { margin-bottom: 4px; padding-bottom: 4px; font-size: 12px; }
.asc-col .asc-costs { margin-top: auto; width: 100%; }
.asc-cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
}
.asc-col-total { border-color: #d19a5b; }
@media (max-width: 800px) {
  .asc-board { grid-template-columns: 1fr; }
}

/* ==================== スキルタブ ==================== */
.skill-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.skill-row { background: #121620; border: 1px solid #232a3b; border-radius: 10px; overflow: hidden; }
.skill-head {
  width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  background: transparent; border: none; color: inherit; padding: 14px 16px;
}
.skill-detail-btn {
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
  background: #fff; border: 1px solid #ccc; color: #111;
  border-radius: 0; padding: 6px 12px; font-size: 12px; font-weight: bold; cursor: pointer;
  box-shadow: none;
}
.skill-detail-btn:hover { background: #e8e8e8; color: #111; }
.skill-row.open .skill-detail-btn { background: #e8e8e8; color: #111; }
.skill-icon { width: 96px; height: 96px; border-radius: 0; object-fit: cover; flex-shrink: 0; background: #090b0f; }
.skill-head-text { flex: 1; min-width: 0; }
.skill-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.skill-name-row .skill-name { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.skill-name-row .skill-lv-row {
  padding: 0;
  flex: 0 1 280px;
  min-width: 200px;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.skill-name-row .calc-slider-group {
  margin-bottom: 0;
  width: 100%;
  min-width: 200px;
  height: 24px;
  align-items: center;
}
.skill-name-row .calc-lv-label {
  width: auto;
  min-width: 58px;
  height: 24px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 24px;
  color: #111;
}
.skill-name-row .skill-lv-val {
  color: #c62828;
  font-weight: 800;
  font-size: 16px;
}
.skill-name-row .calc-btn-step {
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.skill-name-row input[type="range"].skill-lv-slider {
  flex: 1;
  min-width: 80px;
  height: 24px;
  margin: 0;
  padding: 0;
  align-self: center;
}
.skill-name { font-size: 16px; font-weight: bold; margin-bottom: 6px; color: #fff; }
.skill-cd { font-size: 15px; font-weight: bold; color: #111; line-height: 1.6; margin-bottom: 4px; }
.skill-desc { font-size: 15px; color: #a0acba; line-height: 1.6; }
.skill-sub { font-size: 15px; font-weight: bold; color: #a0acba; line-height: 1.6; margin-top: 8px; }
.skill-hl,
.skill-hl.skill-hl-red,
.skill-hl.hl-red { color: #e05c5c; font-weight: bold; }
.skill-hl.skill-hl-green,
.skill-hl.hl-green { color: #39B474; }
.skill-hl.skill-hl-violet,
.skill-hl.hl-violet { color: #6a1b9a; }
.skill-lv-row { padding: 0 16px 14px; }
.skill-detail { display: block; padding: 0 16px 16px; border-top: 1px solid #232a3b; padding-top: 14px; }
.skill-row.open .skill-detail { display: block; }
.skill-meta-table { font-size: 12px; margin-bottom: 12px; }
.skill-meta-table tr:nth-child(3) th { border-top: 8px solid #121620; }
.skill-media { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.skill-media label, .skill-comment-label { font-size: 12px; color: #a0acba; display: flex; flex-direction: column; gap: 4px; }
.skill-media input, .skill-comment {
  width: 100%; background: #0c0e14; border: 1px solid #232a3b; color: #cad1db;
  border-radius: 4px; padding: 6px 8px; font-size: 12px; font-family: inherit;
}
.skill-media-preview img, .skill-media-preview video { max-width: 100%; border-radius: 8px; margin-top: 6px; }

/* ==================== 育成タブ ==================== */
.train-section { margin-bottom: 16px; }
#hw-hero-root #tab-training .train-section.train-skills,
#hw-hero-root #tab-training .train-section.train-glyphs {
  background: #e8e8e8 !important;
}
.train-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.train-item { width: 96px; text-align: center; }
.train-item img {
  width: 96px; height: 96px; object-fit: contain; display: block;
  background: #090b0f; border: 1px solid #232a3b; border-radius: 8px;
  padding: 0; box-shadow: none;
}
.train-cap { margin-top: 6px; font-size: 12px; color: #111; }
.train-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.train-tags span {
  display: inline-block; font-size: 10px; background: #232a3b; color: #d19a5b;
  border: 1px solid #343f56; border-radius: 3px; padding: 1px 6px; line-height: 1.4;
}

/* ==================== チーム編成 ==================== */
.team-block {
  background: #121620; border: 1px solid #232a3b; border-radius: 10px;
  margin-bottom: 12px; padding: 14px 16px;
}
.team-block .team-top { display: flex; align-items: flex-start; gap: 12px; }
.team-block .skill-detail-btn { flex-shrink: 0; }
.team-portraits { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.team-hero, .team-pet { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.team-hero-img, .team-pet-img {
  width: 88px; height: 88px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid #232a3b; background: #090b0f;
}
.team-support-pet {
  position: absolute; top: -4px; left: -4px;
  width: 32px; height: 32px; object-fit: cover; display: block;
  border-radius: 50%; border: 2px solid #121620; background: #090b0f;
  z-index: 1;
}
.team-detail { display: none !important; margin-top: 12px; padding-top: 12px; border-top: 1px solid #232a3b; }
.team-block.is-open .team-detail { display: block !important; }
.team-block.is-open .skill-detail-btn { background: #e8e8e8; color: #111; }
.team-detail h3 { font-size: 15px; color: #d19a5b; margin: 0 0 8px; }

.analysis-list { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; color: #333; }

/* ==================== Byrnaページ寄せ（全体） ==================== */
.chara-sections {
  color: #111;
  background: transparent;
  font-family: inherit;
  gap: 22px;
  position: relative;
  z-index: 0;
  max-width: 100%;
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
}
.chara-sections .calc-container,
.chara-sections .item-tab-wrap { color: #111; font-family: inherit; }
.chara-sections .skill-row,
.chara-sections .calc-card,
.chara-sections .basic-panel,
.chara-sections .calc-info-section,
.chara-sections .item-box,
.chara-sections .item-total-row,
.chara-sections .team-block {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #111;
  box-shadow: none;
}
.chara-sections .basic-skill-list .skill-row[data-color="auto"],
.chara-sections .basic-skill-list .skill-row[data-color="green"],
.chara-sections .basic-skill-list .skill-row[data-color="violet"],
#hw-hero-root #tab-skill .skill-row[data-color="auto"],
#hw-hero-root #tab-skill .skill-row[data-color="green"],
#hw-hero-root #tab-skill .skill-row[data-color="violet"] {
  background: #e8e8e8 !important;
}
.chara-sections .chara-section-body { border-top: none; }
.chara-sections .chara-section.is-collapsible .chara-section-title,
.chara-sections .skill-name,
.chara-sections .calc-title,
.chara-sections .patch-title,
.chara-sections .basic-panel-title { color: #111; font-weight: bold; }
.chara-sections .basic-panel-title {
  display: block;
  margin: 8px 0 4px;
  font-size: 13px;
  letter-spacing: 0;
  color: #111;
}
.chara-sections .skill-cd { font-size: 15px; font-weight: bold; color: #111; }
.chara-sections .skill-desc { font-size: 15px; }
.chara-sections .skill-sub { font-size: 15px; font-weight: bold; }
.chara-sections .skill-desc,
.chara-sections .skill-sub,
.chara-sections .calc-info-note,
.chara-sections .basic-label,
.chara-sections .calc-stat-line,
.chara-sections .patch-body p,
.chara-sections .analysis-list { color: #111; border-bottom-color: #ddd; }
.chara-sections .skill-hl,
.chara-sections .skill-hl.skill-hl-red,
.chara-sections .skill-hl.hl-red { color: #e60012; }
.chara-sections .skill-hl.skill-hl-green,
.chara-sections .skill-hl.hl-green { color: #39B474; }
.chara-sections .skill-hl.skill-hl-violet,
.chara-sections .skill-hl.hl-violet { color: #6a1b9a; }
.chara-sections .basic-val,
.chara-sections .calc-val,
.chara-sections .calc-lv-label,
.chara-sections .calc-total-val,
.chara-sections .patch-body strong { color: #e60012; }
.chara-sections .calc-total-row,
.chara-sections .calc-res-item {
  background: #f3efe4;
  color: #111;
  border: 1px solid #ccc;
  border-radius: 0;
}
.chara-sections .calc-info-table th {
  background: #e8e8e8;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .calc-info-table td {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .calc-info-table tr.table-total,
.chara-sections .calc-info-table tr.table-total td {
  background: #f3efe4;
  color: #e60012;
}
.chara-sections .skill-meta-table tr:nth-child(3) th { border-top-color: #fff; }
.chara-sections .calc-card select,
.chara-sections .skill-media input,
.chara-sections .skill-comment {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .calc-btn-step {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.chara-sections .skill-detail-btn,
.chara-section-head .skill-detail-btn,
#tab-item .chara-section-head .skill-detail-btn,
#tab-glyph .chara-section-head .skill-detail-btn,
#tab-artifact .chara-section-head .skill-detail-btn,
#tab-ascension .chara-section-head .skill-detail-btn,
#tab-wisdom .chara-section-head .skill-detail-btn,
#tab-evolution .chara-section-head .skill-detail-btn,
#tab-patchnote .chara-section-head .skill-detail-btn {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
}
.chara-sections .chara-section.is-open > .chara-section-head .skill-detail-btn,
.chara-sections .team-block.is-open .skill-detail-btn,
#tab-item.is-open > .chara-section-head .skill-detail-btn,
#tab-glyph.is-open > .chara-section-head .skill-detail-btn,
#tab-artifact.is-open > .chara-section-head .skill-detail-btn,
#tab-ascension.is-open > .chara-section-head .skill-detail-btn,
#tab-wisdom.is-open > .chara-section-head .skill-detail-btn,
#tab-evolution.is-open > .chara-section-head .skill-detail-btn,
#tab-patchnote.is-open > .chara-section-head .skill-detail-btn {
  background: #e8e8e8 !important;
  color: #111 !important;
}
.chara-sections .patchnote-list { color: #111; }
.chara-sections .patchnote-list li::marker { color: #111; }
.chara-sections .basic-patrons img,
.chara-sections .patch-icon,
.chara-sections .team-hero-img,
.chara-sections .item-slot,
.chara-sections .skin-card-image {
  background: #f3efe4;
  border-color: #ccc;
}
.chara-sections .skill-head { color: #111; }
.chara-sections .basic-row { border-bottom-color: #ddd; }
.chara-sections .team-detail { border-top-color: #ccc; }
.chara-sections .item-box-title { border-bottom-color: #ccc; }
.chara-sections .item-box.rarity-white .item-box-title { color: #555; }
.chara-sections .item-slot[data-count]:not([data-count="1"])::after {
  background: #fff;
  color: #e60012;
  border: 1px solid #ccc;
}
.chara-sections .skin-date-row { color: #111; }
.chara-sections .skin-date-row div {
  background: #f3efe4;
  border: 1px solid #ccc;
  color: #111;
}
#item-flytip {
  background: #fff;
  border: 1px solid #ccc;
  color: #111;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.item-flytip-name { color: #e60012; }
.item-flytip-cost { color: #111; }
.item-flytip-ing { background: #f3efe4; border-color: #ccc; }
.item-flytip-ing b { color: #e60012; text-shadow: none; }
.item-flytip-ing.is-text { color: #111; }

.chara-sections h2.chara-section-title,
.chara-sections .chara-section-head h2,
body .entry-content .chara-sections h2.chara-section-title {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  color: #111 !important;
  text-indent: 0 !important;
  position: relative !important;
}
.chara-sections h2.chara-section-title::before,
.chara-sections h2.chara-section-title::after,
.chara-sections .chara-section-head h2::before,
.chara-sections .chara-section-head h2::after,
body .entry-content .chara-sections h2::before,
body .entry-content .chara-sections h2::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

#tab-team h2,
#tab-skin h2,
#tab-item h2,
#tab-glyph h2,
#tab-artifact h2,
#tab-ascension h2,
#tab-wisdom h2,
#tab-evolution h2,
#tab-patchnote h2,
#tab-team h3,
#tab-skin h3,
#tab-item h3,
#tab-glyph h3,
#tab-artifact h3,
#tab-ascension h3,
#tab-wisdom h3,
#tab-evolution h3,
#tab-patchnote h3,
#tab-team .chara-subhead,
#tab-skin .chara-subhead,
#tab-item .chara-subhead,
#tab-glyph .chara-subhead,
#tab-artifact .chara-subhead,
#tab-ascension .chara-subhead,
#tab-wisdom .chara-subhead,
#tab-evolution .chara-subhead,
#tab-patchnote .chara-subhead {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  text-indent: 0 !important;
}
#tab-team h2::before, #tab-team h2::after,
#tab-skin h2::before, #tab-skin h2::after,
#tab-item h2::before, #tab-item h2::after,
#tab-glyph h2::before, #tab-glyph h2::after,
#tab-artifact h2::before, #tab-artifact h2::after,
#tab-ascension h2::before, #tab-ascension h2::after,
#tab-wisdom h2::before, #tab-wisdom h2::after,
#tab-evolution h2::before, #tab-evolution h2::after,
#tab-patchnote h2::before, #tab-patchnote h2::after,
#tab-team h3::before, #tab-team h3::after,
#tab-skin h3::before, #tab-skin h3::after,
#tab-item h3::before, #tab-item h3::after,
#tab-glyph h3::before, #tab-glyph h3::after,
#tab-artifact h3::before, #tab-artifact h3::after,
#tab-ascension h3::before, #tab-ascension h3::after,
#tab-wisdom h3::before, #tab-wisdom h3::after,
#tab-evolution h3::before, #tab-evolution h3::after,
#tab-patchnote h3::before, #tab-patchnote h3::after,
#tab-team .chara-subhead::before, #tab-team .chara-subhead::after,
#tab-skin .chara-subhead::before, #tab-skin .chara-subhead::after,
#tab-item .chara-subhead::before, #tab-item .chara-subhead::after,
#tab-glyph .chara-subhead::before, #tab-glyph .chara-subhead::after,
#tab-artifact .chara-subhead::before, #tab-artifact .chara-subhead::after,
#tab-ascension .chara-subhead::before, #tab-ascension .chara-subhead::after,
#tab-wisdom .chara-subhead::before, #tab-wisdom .chara-subhead::after,
#tab-evolution .chara-subhead::before, #tab-evolution .chara-subhead::after,
#tab-patchnote .chara-subhead::before, #tab-patchnote .chara-subhead::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: none !important;
}

/* アイテム〜パッチノート：暗い指定を確実に上書き */
#tab-team,
#tab-item,
#tab-skin,
#tab-glyph,
#tab-artifact,
#tab-ascension,
#tab-wisdom,
#tab-evolution,
#tab-patchnote {
  color: #111 !important;
  background: transparent !important;
  border: none !important;
}
#tab-item .chara-section-body,
#tab-skin .chara-section-body,
#tab-glyph .chara-section-body,
#tab-artifact .chara-section-body,
#tab-ascension .chara-section-body,
#tab-wisdom .chara-section-body,
#tab-evolution .chara-section-body,
#tab-patchnote .chara-section-body {
  background: transparent !important;
  color: #111 !important;
  border-top: none !important;
}
#tab-item .chara-subhead,
#tab-skin .chara-subhead,
#tab-glyph .chara-subhead,
#tab-artifact .chara-subhead,
#tab-ascension .chara-subhead,
#tab-wisdom .chara-subhead,
#tab-evolution .chara-subhead,
#tab-patchnote .chara-subhead {
  display: block !important;
  font-size: 15px;
  font-weight: bold;
  color: #111 !important;
  margin: 12px 0 8px;
}
#tab-item .item-tab-wrap,
#tab-item .item-box,
#tab-item .item-total-row,
#tab-item .calc-info-section,
#tab-skin .calc-card,
#tab-skin .calc-info-section,
#tab-glyph .calc-card,
#tab-glyph .calc-info-section,
#tab-artifact .calc-card,
#tab-artifact .calc-info-section,
#tab-ascension .calc-card,
#tab-ascension .calc-info-section,
#tab-wisdom .calc-card,
#tab-wisdom .calc-info-section,
#tab-evolution .calc-card,
#tab-evolution .calc-info-section,
#tab-patchnote .calc-info-section {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .item-slot,
#tab-skin .skin-card-image,
#tab-skin .skin-date-row div,
#tab-glyph .calc-badge-image,
#tab-artifact .calc-badge-image,
#tab-item .calc-res-item,
#tab-skin .calc-res-item,
#tab-glyph .calc-res-item,
#tab-artifact .calc-res-item,
#tab-ascension .calc-res-item,
#tab-wisdom .calc-res-item,
#tab-evolution .calc-res-item,
#tab-glyph .calc-total-row,
#tab-artifact .calc-total-row,
#tab-ascension .calc-total-row,
#tab-wisdom .calc-total-row,
#tab-evolution .calc-total-row,
#tab-skin .calc-total-row {
  background: #f3efe4 !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .item-box.rarity-white .item-box-title { color: #555 !important; }
#tab-item .item-box.rarity-green .item-box-title { color: #2e7d32 !important; }
#tab-item .item-box.rarity-blue .item-box-title { color: #1565c0 !important; }
#tab-item .item-box.rarity-violet .item-box-title { color: #6a1b9a !important; }
#tab-item .item-box.rarity-orange .item-box-title { color: #e65100 !important; }
#tab-item .item-box.rarity-red .item-box-title { color: #c62828 !important; }
#tab-skin .calc-title,
#tab-glyph .calc-title,
#tab-artifact .calc-title,
#tab-ascension .calc-title,
#tab-wisdom .calc-title,
#tab-evolution .calc-title,
#tab-patchnote .patch-title {
  color: #111 !important;
  border-bottom-color: #ccc !important;
}
#tab-item select,
#tab-skin select,
#tab-glyph select,
#tab-artifact select,
#tab-ascension select,
#tab-wisdom select,
#tab-evolution select {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .calc-val,
#tab-skin .calc-val,
#tab-glyph .calc-val,
#tab-artifact .calc-val,
#tab-ascension .calc-val,
#tab-wisdom .calc-val,
#tab-evolution .calc-val,
#tab-item .calc-lv-label,
#tab-skin .calc-lv-label,
#tab-glyph .calc-lv-label,
#tab-artifact .calc-lv-label,
#tab-ascension .calc-lv-label,
#tab-wisdom .calc-lv-label,
#tab-evolution .calc-lv-label,
#tab-item .calc-total-val,
#tab-skin .calc-total-val,
#tab-glyph .calc-total-val,
#tab-artifact .calc-total-val,
#tab-ascension .calc-total-val,
#tab-wisdom .calc-total-val,
#tab-evolution .calc-total-val,
#tab-patchnote .patch-body strong {
  color: #e60012 !important;
}
#tab-item .calc-info-table th,
#tab-skin .calc-info-table th,
#tab-glyph .calc-info-table th,
#tab-artifact .calc-info-table th,
#tab-ascension .calc-info-table th,
#tab-wisdom .calc-info-table th,
#tab-evolution .calc-info-table th,
#tab-patchnote .calc-info-table th {
  background: #e8e8e8 !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .calc-info-table td,
#tab-skin .calc-info-table td,
#tab-glyph .calc-info-table td,
#tab-artifact .calc-info-table td,
#tab-ascension .calc-info-table td,
#tab-wisdom .calc-info-table td,
#tab-evolution .calc-info-table td,
#tab-patchnote .calc-info-table td {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}
#tab-item .calc-info-table tr.table-total td,
#tab-glyph .calc-info-table tr.table-total td,
#tab-artifact .calc-info-table tr.table-total td,
#tab-ascension .calc-info-table tr.table-total td,
#tab-wisdom .calc-info-table tr.table-total td,
#tab-evolution .calc-info-table tr.table-total td {
  background: #f3efe4 !important;
  color: #e60012 !important;
}
#tab-item .calc-stat-line,
#tab-skin .calc-stat-line,
#tab-glyph .calc-stat-line,
#tab-artifact .calc-stat-line,
#tab-ascension .calc-stat-line,
#tab-wisdom .calc-stat-line,
#tab-evolution .calc-stat-line,
#tab-item .calc-info-note,
#tab-skin .calc-info-note,
#tab-glyph .calc-info-note,
#tab-artifact .calc-info-note,
#tab-ascension .calc-info-note,
#tab-wisdom .calc-info-note,
#tab-evolution .calc-info-note,
#tab-patchnote .patch-body p,
#tab-patchnote .patchnote-list,
#tab-patchnote .patch-line,
#tab-patchnote .patch-date {
  color: #111 !important;
  border-bottom-color: #ccc !important;
  font-size: 16px !important;
}
#tab-patchnote .patch-date {
  font-weight: 700 !important;
}
#tab-item .calc-btn-step,
#tab-skin .calc-btn-step,
#tab-glyph .calc-btn-step,
#tab-artifact .calc-btn-step,
#tab-ascension .calc-btn-step,
#tab-wisdom .calc-btn-step,
#tab-evolution .calc-btn-step {
  background: #fff !important;
  color: #111 !important;
  border-color: #ccc !important;
}

#tab-item .chara-section-head h2,
#tab-glyph .chara-section-head h2,
#tab-artifact .chara-section-head h2,
#tab-ascension .chara-section-head h2,
#tab-wisdom .chara-section-head h2,
#tab-evolution .chara-section-head h2,
#tab-patchnote .chara-section-head h2,
#tab-training .chara-section-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  max-width: calc(100% - 88px);
  color: #111 !important;
}
.article .entry-content .chara-sections h2:before,
.article .entry-content .chara-sections h2:after,
.article .entry-content #tab-item h2:before,
.article .entry-content #tab-item h2:after,
.article .entry-content #tab-glyph h2:before,
.article .entry-content #tab-glyph h2:after,
.article .entry-content #tab-artifact h2:before,
.article .entry-content #tab-artifact h2:after,
.article .entry-content #tab-ascension h2:before,
.article .entry-content #tab-ascension h2:after,
.article .entry-content #tab-wisdom h2:before,
.article .entry-content #tab-wisdom h2:after,
.article .entry-content #tab-evolution h2:before,
.article .entry-content #tab-evolution h2:after,
.article .entry-content #tab-patchnote h2:before,
.article .entry-content #tab-patchnote h2:after,
.article .entry-content #tab-basic h2:before,
.article .entry-content #tab-basic h2:after {
  content: none !important;
  display: none !important;
}

#tab-basic {
  display: block;
  max-width: 100%;
  margin-top: 0;
  position: relative;
  z-index: 0;
}
#tab-basic > .chara-section-head {
  display: none;
}
#tab-basic h2.chara-section-title,
#tab-basic .chara-section-head h2 {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100%;
}
#tab-basic h2::before,
#tab-basic h2::after {
  display: none !important;
  content: none !important;
}

.analysis-board {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.analysis-intro {
  margin: 0 0 20px;
  padding: 0;
  line-height: 1.7;
  font-size: 14px;
  color: #111;
}
.analysis-col-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 8px;
  color: #111;
}
.analysis-heroes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.analysis-hero {
  width: 72px;
  height: auto;
  background: transparent;
  border: none;
  display: block;
  flex-shrink: 0;
  text-align: center;
}
.analysis-hero .hero-face {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: #f3efe4;
}
.analysis-hero img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  background: #f3efe4;
  border: none;
}
.analysis-hero .hero-caption {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 4px;
  color: #111;
}
.trait-flytip-hero a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.analysis-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
  color: #111;
}

#tab-glyph .glyph-layout {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 18px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 20px;
  box-sizing: border-box;
}
#tab-glyph .glyph-layout .glyph-card {
  min-width: 0;
  width: 100%;
  max-width: 210px;
  justify-self: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px;
}
#tab-glyph .glyph-layout .glyph-card[data-slot="5"] { grid-column: 1 / 3; grid-row: 1; }
#tab-glyph .glyph-layout .glyph-card[data-slot="1"] { grid-column: 3 / 5; grid-row: 1; }
#tab-glyph .glyph-layout .glyph-card[data-slot="2"] { grid-column: 5 / 7; grid-row: 1; }
#tab-glyph .glyph-layout .glyph-card[data-slot="4"] { grid-column: 2 / 4; grid-row: 2; }
#tab-glyph .glyph-layout .glyph-card[data-slot="3"] { grid-column: 4 / 6; grid-row: 2; }
@media (max-width: 700px) {
  #tab-glyph .glyph-layout { grid-template-columns: 1fr; max-width: 100%; }
  #tab-glyph .glyph-layout .glyph-card[data-slot] {
    grid-column: auto;
    grid-row: auto;
    max-width: 100%;
  }
}

/* rarity frames: parent is position:relative, frame is ::before (not extra img), z-index 1 only */
#hw-hero-root .chara-icon-box,
#hw-hero-root .item-slot {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#hw-hero-root .chara-icon-box {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: top;
}
#hw-hero-root .skill-list .chara-icon-box {
  width: 96px;
  height: 96px;
}
#hw-hero-root .chara-icon-box--train {
  width: 96px;
  height: 96px;
}
#hw-hero-root .chara-icon-box--evo {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto 10px;
}
#hw-hero-root .chara-icon-box > img,
#hw-hero-root .item-slot > img {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80% !important;
  height: 80% !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 0;
  object-fit: contain;
}
#hw-hero-root .hero-face {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
  z-index: 0;
}
#hw-hero-root .hero-face > img,
#hw-hero-root .hero-face a > img {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80% !important;
  height: 80% !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 0;
  object-fit: cover;
  border: none !important;
}
#hw-hero-root .chara-icon-box::before,
#hw-hero-root .hero-face[data-color]::before,
#hw-hero-root .item-slot.rarity-white::before,
#hw-hero-root .item-slot.rarity-green::before,
#hw-hero-root .item-slot.rarity-blue::before,
#hw-hero-root .item-slot.rarity-violet::before,
#hw-hero-root .item-slot.rarity-orange::before,
#hw-hero-root .item-slot.rarity-red::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
#hw-hero-root .chara-icon-box[data-color="auto"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/orenge-frame.webp); }
#hw-hero-root .chara-icon-box[data-color="white"]::before,
#hw-hero-root .hero-face[data-color="white"]::before,
#hw-hero-root .item-slot.rarity-white::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/white-frame.webp); }
#hw-hero-root .chara-icon-box[data-color="green"]::before,
#hw-hero-root .hero-face[data-color="green"]::before,
#hw-hero-root .item-slot.rarity-green::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/green-frame.webp); }
#hw-hero-root .chara-icon-box[data-color="blue"]::before,
#hw-hero-root .hero-face[data-color="blue"]::before,
#hw-hero-root .item-slot.rarity-blue::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/blue-frame.webp); }
#hw-hero-root .chara-icon-box[data-color="violet"]::before,
#hw-hero-root .hero-face[data-color="violet"]::before,
#hw-hero-root .item-slot.rarity-violet::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/violet-frame.webp); }
#hw-hero-root .item-slot.rarity-orange::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/orenge-frame.webp); }
#hw-hero-root .item-slot.rarity-red::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/red-frame.webp); }
#hw-hero-root .chara-icon-box[data-color="soul"]::before { background-image: url(https://herowarsjpwebfb.com/wp-content/uploads/2026/10/soul-frame.webp); }
#hw-hero-root .item-slot[data-count]:not([data-count="1"])::after { z-index: 2; }

#hw-hero-root .skill-list .chara-icon-box,
#hw-hero-root .skill-list .chara-icon-box > img,
#hw-hero-root .skill-list .skill-icon,
#hw-hero-root .chara-icon-box--train,
#hw-hero-root .chara-icon-box--train > img {
  border-radius: 0 !important;
}
#hw-hero-root .skill-list .chara-icon-box > img,
#hw-hero-root .skill-list .skill-icon {
  position: absolute;
  left: 8% !important;
  top: 8% !important;
  width: 84% !important;
  height: 84% !important;
  max-width: none !important;
  border-radius: 0 !important;
}
#hw-hero-root .chara-icon-box--train > img {
  left: 9% !important;
  top: 9% !important;
  width: 82% !important;
  height: 82% !important;
  border-radius: 0 !important;
}

#hw-hero-root .gallery-videos {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
#hw-hero-root .gallery-video,
#hw-hero-root .hw-video,
#hw-hero-root .skill-video .hw-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
#hw-hero-root .hw-video iframe,
#hw-hero-root .hw-video video,
#hw-hero-root .gallery-video iframe,
#hw-hero-root .gallery-video video,
#hw-hero-root .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#hw-hero-root .video-poster {
  padding: 0;
  cursor: pointer;
  background: #111;
}
#hw-hero-root .video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hw-hero-root .skill-name-row .calc-lv-label {
  color: #111 !important;
}
#hw-hero-root .skill-name-row .skill-lv-val {
  color: #c62828 !important;
  font-weight: 800 !important;
}

#tab-team,
#tab-team .chara-section-body {
  color: #111 !important;
  background: transparent !important;
}