/* =========================
   全体
========================= */

:root {
  --main-color: #ff8a00;
  --main-hover: #e87800;

  --background: #f4f4f4;
  --card: #ffffff;

  --text: #222222;
  --sub-text: #666666;

  --border: #dddddd;

  --shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;

  background: var(--background);
  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;

  line-height: 1.6;
}


/* =========================
   ページ全体の幅
========================= */

body > * {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================
   見出し
========================= */

h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
}

h2 {
  margin-top: 24px;
  margin-bottom: 10px;

  font-size: 20px;
}


/* =========================
   トップバー
========================= */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;
}


/* =========================
   ホームボタン
========================= */

.homebutton {
  display: inline-block;

  text-decoration: none;

  background: var(--card);
  color: var(--text);

  padding: 8px 14px;

  border: 1px solid var(--border);
  border-radius: 10px;

  box-shadow: var(--shadow);

  transition:
    transform 0.15s,
    background 0.15s;
}

.homebutton:hover {
  background: #fafafa;
  transform: translateY(-2px);
}


/* =========================
   入力欄
========================= */

input {
  padding: 10px 12px;

  font-size: 15px;

  width: 260px;

  border: 1px solid #cccccc;
  border-radius: 8px;

  outline: none;
}

input:focus {
  border-color: var(--main-color);

  box-shadow:
    0 0 0 3px rgba(255, 138, 0, 0.15);
}


/* =========================
   検索結果
========================= */

#result {
  margin-top: 16px;
  line-height: 1.6;
}


/* =========================
   ボタン共通
========================= */

button {
  border: 1px solid var(--border);

  background: var(--card);
  color: var(--text);

  border-radius: 8px;

  cursor: pointer;

  transition:
    transform 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}

button:hover {
  transform: translateY(-1px);

  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.08);
}

button:active {
  transform: translateY(0);
}


/* =========================
   選択状態
========================= */

.selected,
.effectSelectButton.selected {
  background: var(--main-color);
  color: white;

  border-color: var(--main-color);
}


/* =========================
   ボタン群
========================= */

.buttongroup {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 14px;
}

.effectbutton,
.typebutton {
  margin: 0;

  padding: 7px 11px;

  font-size: 13px;
}


/* =========================
   ヒーロー
========================= */

.hero {
  text-align: center;

  margin-top: 60px;
  margin-bottom: 40px;
}

.hero h1 {
  font-size: 40px;

  margin-bottom: 10px;
}

.hero p {
  color: var(--sub-text);
}


/* =========================
   メニュー
========================= */

.menu {
  display: flex;

  justify-content: center;
  flex-wrap: wrap;

  gap: 12px;
}

.menubutton {
  display: inline-block;

  text-decoration: none;

  background: var(--card);
  color: var(--text);

  padding: 12px 24px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  box-shadow: var(--shadow);

  transition:
    transform 0.15s,
    background 0.15s;
}

.menubutton:hover {
  background: #fafafa;

  transform: translateY(-2px);
}


/* =========================
   武器検索結果カード
========================= */

.weapon-result {
  background: var(--card);

  margin-top: 10px;

  padding: 16px;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  border: 1px solid #eeeeee;
}

.weapon-result h2 {
  margin: 0 0 5px 0;

  font-size: 18px;
}

.weapon-result p {
  margin: 0;

  font-size: 16px;

  font-weight: bold;
}


/* =========================
   効果タグ
========================= */

.weaponEffects {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 8px;
}

.effectTag {
  display: inline-block;

  padding: 5px 9px;

  background: #f0f0f0;

  border: 1px solid #dddddd;

  border-radius: 7px;

  font-size: 13px;
}


/* =========================
   コメント
========================= */

.comment {
  background: var(--card);

  padding: 14px;

  margin: 12px 0;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  border: 1px solid #eeeeee;
}

.commentHeader {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 8px;
}

.stars {
  font-weight: bold;
}

.userName {
  color: var(--sub-text);
}

.date {
  color: #888888;

  font-size: 0.9em;
}

.commentText {
  margin: 0;
}


/* =========================
   編集ボタン
========================= */

.editButton {
  margin-top: 10px;
  margin-right: 8px;

  background: #4caf50;
  color: white;

  border: none;

  padding: 6px 12px;

  border-radius: 6px;

  cursor: pointer;
}


/* =========================
   評価グラフ
========================= */

.ratingRow {
  display: flex;

  align-items: center;

  gap: 10px;

  margin: 8px 0;
}

.ratingLabel {
  width: 70px;
}

.bar {
  flex: 1;

  height: 14px;

  background: #ddd;

  border-radius: 7px;

  overflow: hidden;
}

.fill {
  height: 100%;

  background: #ffb400;
}

.ratingRow span:last-child {
  width: 45px;

  text-align: right;
}


/* =========================
   ソートボタン
========================= */

.sortbutton {
  padding: 10px 16px;

  font-size: 15px;

  min-height: 44px;

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}


/* =========================
   ジェネレーター
========================= */

#generateButton {
  padding: 10px 20px;

  font-size: 16px;

  cursor: pointer;
}


/* =========================
   効果図鑑
========================= */

.effectSelectButton {
  padding: 7px 12px;

  margin: 3px;

  cursor: pointer;
}

.effectWeapon {
  padding: 12px;

  margin: 6px 0;

  background: var(--card);

  border-radius: 8px;

  border: 1px solid #eeeeee;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.effectWeapon a {
  font-weight: bold;

  margin-right: 10px;
}

.effectWeapon span {
  font-size: 13px;
}


/* =========================
   スマホ
========================= */

@media (max-width: 600px) {

  body {
    padding: 12px;
  }

  h1 {
    font-size: 25px;
  }

  .hero {
    margin-top: 35px;
    margin-bottom: 30px;
  }

  .hero h1 {
    font-size: 32px;
  }

  input {
    width: 100%;
    max-width: none;
  }

  .sortbutton {
    width: 100%;
    box-sizing: border-box;

    font-size: 16px;
  }

  .buttongroup button,
  .typebutton,
  .effectbutton {
    min-height: 40px;

    touch-action: manipulation;
  }

  .menu {
    flex-direction: column;
  }

  .menubutton {
    width: 100%;

    text-align: center;
  }

  .commentHeader {
    flex-direction: column;

    align-items: flex-start;

    gap: 4px;
  }
}
/* =========================
   ホームページ
========================= */

.hero {
  text-align: center;

  padding: 70px 20px 50px;

  margin: 0 auto;
}

.hero-subtitle {
  margin: 0 0 8px;

  font-size: 13px;

  font-weight: bold;

  letter-spacing: 2px;

  color: var(--main-color);
}

.hero h1 {
  margin: 0;

  font-size: 42px;

  letter-spacing: 1px;
}

.hero-description {
  margin: 18px auto 0;

  color: var(--sub-text);

  font-size: 16px;

  line-height: 1.8;
}

.visitor-count {
  display: inline-block;

  margin-top: 20px;

  padding: 6px 12px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 20px;

  color: var(--sub-text);

  font-size: 13px;
}


/* =========================
   ホームのセクション
========================= */

.home-section {
  margin-bottom: 40px;
}

.home-section h2 {
  margin-bottom: 14px;

  font-size: 22px;
}


/* =========================
   機能カード
========================= */

.feature-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.feature-card {
  display: block;

  padding: 22px;

  background: var(--card);

  border: 1px solid #eeeeee;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  text-decoration: none;

  color: var(--text);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.1);

  border-color: #cccccc;
}

.feature-icon {
  font-size: 30px;

  margin-bottom: 8px;
}

.feature-title {
  font-size: 20px;

  font-weight: bold;

  margin-bottom: 6px;
}

.feature-description {
  color: var(--sub-text);

  font-size: 14px;

  line-height: 1.6;
}


/* =========================
   情報カード
========================= */

.info-card {
  background: var(--card);

  padding: 20px;

  border: 1px solid #eeeeee;

  border-radius: var(--radius);

  box-shadow: var(--shadow);
}

.info-card p {
  margin-top: 0;

  line-height: 1.8;
}

.info-card p:last-child {
  margin-bottom: 0;
}


/* =========================
   機能リスト
========================= */

.feature-list {
  margin: 0;

  padding-left: 22px;
}

.feature-list li {
  margin: 8px 0;
}


/* =========================
   運営ページリンク
========================= */

.home-about {
  text-align: center;
}

.about-link {
  display: inline-block;

  padding: 11px 20px;

  background: var(--card);

  color: var(--text);

  text-decoration: none;

  border: 1px solid var(--border);

  border-radius: 10px;

  box-shadow: var(--shadow);

  transition:
    transform 0.15s,
    background 0.15s;
}

.about-link:hover {
  background: #fafafa;

  transform: translateY(-2px);
}


/* =========================
   フッター
========================= */

.site-footer {
  max-width: 1000px;

  margin: 50px auto 0;

  padding: 25px 0;

  border-top: 1px solid var(--border);

  text-align: center;

  color: #888;

  font-size: 12px;
}

.site-footer p {
  margin: 4px 0;
}


/* =========================
   ホーム：スマホ
========================= */

@media (max-width: 600px) {

  .hero {
    padding: 45px 10px 35px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero-description {
    font-size: 14px;
  }

  .feature-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .feature-card {
    padding: 18px;
  }

}
/* =========================
   武器検索ページ
========================= */

.description {
  color: var(--sub-text);
  margin: 8px 0 20px;
}


/* 検索エリア */

#search {
  display: block;

  width: 100%;
  max-width: 600px;

  padding: 14px 16px;

  font-size: 16px;

  background: white;

  border: 2px solid #e0e0e0;
  border-radius: 12px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

#search:focus {
  border-color: var(--main-color);

  box-shadow:
    0 0 0 4px rgba(255, 138, 0, 0.12);
}


/* 並び替えボタン */

#sortButton {
  margin-top: 10px;

  background: white;

  border: 1px solid var(--border);

  font-weight: 600;
}


/* 検索条件セクション */

body > h2 {
  margin-top: 28px;

  padding-bottom: 6px;

  border-bottom: 2px solid #e8e8e8;
}


/* カテゴリ */

.typebutton {
  background: white;

  font-size: 14px;
  font-weight: 600;

  padding: 8px 14px;

  border-radius: 9px;
}

.typebutton:hover {
  border-color: var(--main-color);
}


/* 効果ボタン */

.effectbutton {
  background: white;

  padding: 7px 11px;

  border-radius: 8px;

  font-size: 13px;

  line-height: 1.3;
}

.effectbutton:hover {
  border-color: var(--main-color);
}


/* 選択中 */

.typebutton.selected,
.effectbutton.selected {
  background: var(--main-color);

  color: white;

  border-color: var(--main-color);

  box-shadow:
    0 2px 6px rgba(255, 138, 0, 0.25);
}


/* 結果 */

#result {
  margin-top: 28px;
}


/* =========================
   検索結果カード
========================= */

#result .weapon-result {
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

#result .weapon-result:hover {
  transform: translateY(-2px);

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.1);
}


/* 武器名 */

#result .weapon-result h2 a {
  color: var(--text);

  text-decoration: none;
}

#result .weapon-result h2 a:hover {
  color: var(--main-color);
}


/* =========================
   検索ページ スマホ
========================= */

@media (max-width: 600px) {

  #search {
    max-width: none;

    padding: 13px 14px;

    font-size: 16px;
  }

  #sortButton {
    width: 100%;

    margin-top: 10px;

    min-height: 44px;
  }

  body > h2 {
    margin-top: 24px;

    font-size: 18px;
  }

  .buttongroup {
    gap: 5px;
  }

  .typebutton {
    padding: 9px 12px;

    min-height: 42px;
  }

  .effectbutton {
    padding: 8px 10px;

    min-height: 40px;

    font-size: 13px;
  }

  #result .weapon-result {
    padding: 14px;
  }

}
/* =========================
   現在の検索条件
========================= */

.filter-summary {
  margin-top: 18px;
  margin-bottom: 24px;

  padding: 16px;

  background: white;

  border: 1px solid #e5e5e5;

  border-radius: 12px;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04);
}

.filter-summary-header {
  margin-bottom: 10px;
}

.filter-summary h2 {
  margin: 0;

  padding: 0;

  border: none;

  font-size: 16px;
}


/* 条件を並べる */

#selectedFilters {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


/* 条件タグ */

.filter-tag {
  display: inline-flex;

  align-items: center;

  padding: 6px 10px;

  border-radius: 8px;

  font-size: 13px;

  font-weight: 600;
}


/* 武器名 */

.search-tag {
  background: #fff1df;

  color: #c65f00;

  border: 1px solid #ffd3a3;
}


/* カテゴリ */

.type-tag {
  background: #e9f2ff;

  color: #2463a8;

  border: 1px solid #c8ddf5;
}


/* 効果 */

.effect-tag {
  background: #fff3d6;

  color: #9a6500;

  border: 1px solid #f0d59a;
}


/* 条件なし */

.no-filter {
  color: #999;

  font-size: 13px;
}


/* スマホ */

@media (max-width: 600px) {

  .filter-summary {
    padding: 14px;
  }

  .filter-tag {
    font-size: 12px;

    padding: 6px 9px;
  }

}
/* =========================
   武器検索結果カード
========================= */

.search-weapon-card {
  display: block;

  position: relative;

  padding: 18px 20px;

  margin-bottom: 12px;

  background: var(--card);

  border: 1px solid #e5e5e5;

  border-radius: 12px;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05);

  text-decoration: none;

  color: var(--text);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}


/* hover */

.search-weapon-card:hover {
  transform: translateY(-3px);

  border-color: #d5d5d5;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.1);
}


/* 武器名 */

.search-weapon-name {
  font-size: 19px;

  font-weight: bold;

  margin-bottom: 5px;
}


/* カテゴリ */

.search-weapon-category {
  display: inline-block;

  padding: 3px 8px;

  margin-bottom: 10px;

  background: #eeeeee;

  border-radius: 6px;

  color: #555;

  font-size: 12px;

  font-weight: bold;
}


/* 効果 */

.search-weapon-effects {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;
}


/* 効果タグ */

.search-effect-tag {
  display: inline-block;

  padding: 4px 8px;

  background: #fff3d6;

  border: 1px solid #f0d59a;

  border-radius: 6px;

  color: #8b6200;

  font-size: 12px;

  line-height: 1.3;
}


/* 詳細を見る */

.search-weapon-detail {
  margin-top: 12px;

  color: var(--main-color);

  font-size: 13px;

  font-weight: bold;

  text-align: right;
}


/* スマホ */

@media (max-width: 600px) {

  .search-weapon-card {
    padding: 15px;
  }

  .search-weapon-name {
    font-size: 17px;
  }

  .search-effect-tag {
    font-size: 11px;

    padding: 4px 7px;
  }

}
/* =========================
   検索結果件数
========================= */

.search-result-count {
  margin-bottom: 12px;

  color: var(--sub-text);

  font-size: 14px;

  font-weight: bold;
}
/* =========================
   武器詳細ページ
========================= */

.weapon-header {
  background: var(--card);

  padding: 24px;

  margin-bottom: 24px;

  border: 1px solid #e5e5e5;

  border-radius: 14px;

  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.06);
}


/* 武器名 */

#weaponName {
  margin: 0 0 20px;

  font-size: 32px;

  line-height: 1.3;
}


/* 武器情報 */

#weaponInfo {
  line-height: 1.7;
}


/* 情報内のリンク */

#weaponInfo a {
  display: inline-block;

  margin-top: 6px;

  padding: 9px 14px;

  background: #f5f5f5;

  color: var(--text);

  text-decoration: none;

  border: 1px solid var(--border);

  border-radius: 8px;

  transition:
    background 0.15s,
    transform 0.15s;
}

#weaponInfo a:hover {
  background: #eeeeee;

  transform: translateY(-1px);
}


/* ギャラリー番号 */

#galleryNumber {
  margin-top: 12px;

  color: var(--sub-text);

  font-size: 14px;
}


/* =========================
   評価セクション
========================= */

#averageRating,
#ratingBreakdown,
#loginArea,
#profileArea,
#comments {
  background: var(--card);

  padding: 18px;

  border: 1px solid #e5e5e5;

  border-radius: 12px;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04);

  margin-bottom: 16px;
}


/* 平均評価 */

#averageRating {
  font-size: 22px;

  font-weight: bold;
}


/* 評価選択 */

#rating {
  padding: 9px 12px;

  font-size: 16px;

  border: 1px solid var(--border);

  border-radius: 8px;

  background: white;
}


/* コメント */

#comment {
  display: block;

  width: 100%;

  max-width: 700px;

  padding: 12px;

  margin-top: 12px;

  font-size: 14px;

  font-family: inherit;

  border: 1px solid var(--border);

  border-radius: 8px;

  resize: vertical;
}

#comment:focus {
  outline: none;

  border-color: var(--main-color);

  box-shadow:
    0 0 0 3px rgba(255, 138, 0, 0.12);
}


/* ボタン */

#loginButton,
#submitRating,
#saveProfile {
  padding: 9px 16px;

  font-size: 14px;

  font-weight: 600;
}


/* プロフィール */

#profileArea input {
  padding: 9px 11px;

  width: 220px;

  max-width: 100%;

  border: 1px solid var(--border);

  border-radius: 8px;

  font-size: 14px;
}


/* =========================
   ダメージ計算機
========================= */

body > a[href*="calconic"] {
  display: inline-block;

  padding: 10px 15px;

  background: white;

  color: var(--text);

  text-decoration: none;

  border: 1px solid var(--border);

  border-radius: 9px;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05);

  transition:
    transform 0.15s,
    background 0.15s;
}

body > a[href*="calconic"]:hover {
  background: #fafafa;

  transform: translateY(-2px);
}


/* 戻るリンク */

body > a[href="search.html"] {
  color: var(--main-color);

  font-weight: 600;

  text-decoration: none;
}


/* =========================
   スマホ
========================= */

@media (max-width: 600px) {

  .weapon-header {
    padding: 18px;

    margin-bottom: 18px;
  }

  #weaponName {
    font-size: 26px;

    margin-bottom: 16px;
  }

  #averageRating,
  #ratingBreakdown,
  #loginArea,
  #profileArea,
  #comments {
    padding: 14px;
  }

  #comment {
    width: 100%;

    box-sizing: border-box;
  }

  #profileArea input {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 8px;
  }

}
/* =========================
   評価セクション
========================= */

.rating-section,
.rating-form-section {
  margin-bottom: 30px;
}


/* 平均評価 */

.average-rating-card {
  background: var(--card);

  padding: 24px;

  border: 1px solid #e5e5e5;

  border-radius: 14px;

  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.06);

  text-align: center;
}

.average-rating-card #averageRating {
  margin: 0;

  font-size: 28px;

  font-weight: bold;

  color: #d98200;
}


/* 評価フォーム */


.rating-form label {
  display: block;

  margin-bottom: 6px;

  font-size: 14px;

  font-weight: bold;
}

.rating-form #rating {
  margin-bottom: 18px;
}

.rating-form #loginArea {
  padding: 14px;

  margin-bottom: 18px;

  background: #f8f8f8;

  border-radius: 10px;
}

.rating-form #userInfo {
  margin: 8px 0 0;

  color: var(--sub-text);

  font-size: 13px;
}


/* 評価送信 */

#submitRating {
  margin-top: 12px;

  background: var(--main-color);

  color: white;

  border-color: var(--main-color);
}

#submitRating:hover {
  background: var(--main-hover);

  border-color: var(--main-hover);
}


/* スマホ */

@media (max-width: 600px) {

  .average-rating-card {
    padding: 20px;
  }

  .average-rating-card #averageRating {
    font-size: 24px;
  }

  .rating-form {
    padding: 16px;
  }

}
/* =========================
   コメント一覧
========================= */

#comments {
  margin-top: 16px;
}

.comment {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.commentHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.stars {
  font-size: 18px;
  letter-spacing: 1px;
}

.userName {
  font-weight: bold;
  color: var(--text);
}

.date {
  font-size: 13px;
  color: var(--sub-text);
}

.commentText {
  margin-top: 10px;
  padding-top: 10px;

  border-top: 1px solid var(--border);

  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--text);
}

/* コメント内のボタン */
.comment button {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--sub-text);

  font-size: 13px;
  cursor: pointer;

  transition: background 0.2s, color 0.2s;
}

.comment button:hover {
  background: #f5f5f5;
  color: var(--text);
}

.comment button:hover {
  background: #f5f5f5;
}

/* コメントがない場合など */
#comments:empty {
  display: none;
}


/* =========================
   スマホ
========================= */

@media (max-width: 600px) {

  .comment {
    padding: 14px;
  }

  .commentHeader {
    gap: 6px;
  }

  .stars {
    font-size: 16px;
  }

  .date {
    font-size: 12px;
  }

  .commentText {
    font-size: 14px;
  }

  .comment button {
    padding: 7px 11px;
  }
}
/* =========================
   武器詳細ページ全体
========================= */

body {
  max-width: 900px;
  margin: 0 auto;
}


/* =========================
   武器情報
========================= */

.weapon-header {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

#weaponName {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.3;
}

#weaponInfo {
  color: var(--text);
}

#weaponInfo p {
  margin: 12px 0;
}

#weaponInfo a {
  color: var(--main-color);
  font-weight: bold;
  text-decoration: none;
}

#weaponInfo a:hover {
  text-decoration: underline;
}

#galleryNumber {
  margin: 12px 0 0;
  color: var(--sub-text);
  font-size: 14px;
}


/* =========================
   効果タグ
========================= */

.weaponEffects {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.effectTag {
  display: inline-block;
  padding: 5px 10px;
  background: #fff3e0;
  color: #d96800;
  border: 1px solid #ffd0a0;
  border-radius: 999px;
  font-size: 13px;
}


/* =========================
   見出し
========================= */

body > h2 {
  margin-top: 32px;
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 5px solid var(--main-color);
  font-size: 22px;
}

body > h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}


/* =========================
   ダメージ計算機・戻る
========================= */

body > a {
  color: var(--main-color);
  font-weight: bold;
  text-decoration: none;
}

body > a:hover {
  text-decoration: underline;
}


/* =========================
   スマホ
========================= */

@media (max-width: 600px) {

  body {
    padding: 12px;
  }

  .weapon-header {
    padding: 18px;
  }

  #weaponName {
    font-size: 24px;
  }

  body > h2 {
    font-size: 20px;
  }

  .effectTag {
    font-size: 12px;
    padding: 5px 9px;
  }
}
/* =========================
   検索結果の折りたたみ
========================= */

.result-section {
  margin: 20px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.result-section summary {
  padding: 14px 16px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  list-style-position: inside;
}

.result-section summary:hover {
  background: #fafafa;
}

.result-section[open] summary {
  border-bottom: 1px solid var(--border);
}

.result-section #result {
  padding: 12px;
  max-height: 360px;
  overflow-y: auto;
}
/* =========================
   評価表示
========================= */

.rating-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 24px;
  box-shadow: var(--shadow);
}

.average-rating-card {
  text-align: center;
  background: #fff8ef;
  border: 1px solid #ffd9ad;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

#averageRating {
  margin: 0;
  font-size: 30px;
  font-weight: bold;
  color: var(--main-color);
  line-height: 1.4;
}

#ratingBreakdown {
  margin-top: 12px;
}

.ratingRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  min-height: 22px;
}

.ratingLabel {
  width: 105px;
  flex-shrink: 0;
  font-size: 14px;
  white-space: nowrap;
}

.ratingRow .bar {
  flex: 1;
  height: 10px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
}

.ratingRow .fill {
  height: 100%;
  background: var(--main-color);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.ratingRow > span:last-child {
  width: 75px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  color: var(--sub-text);
}

/* =========================
   評価フォーム
========================= */

.rating-form-section {
  margin-top: 32px;
}

.rating-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.rating-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

#rating {
  width: 100%;
  max-width: 180px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
}

#comment {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
  font-size: 15px;
}

#submitRating {
  margin-top: 12px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--main-color);
  color: white;
  font-weight: bold;
  cursor: pointer;
}

#submitRating:hover {
  background: var(--main-hover);
}


/* =========================
   スマホ
========================= */

@media (max-width: 600px) {

  .rating-section,
  .rating-form {
    padding: 15px;
  }

  #averageRating {
    font-size: 24px;
  }

  .ratingRow {
    gap: 6px;
  }

  .ratingLabel {
    width: 85px;
    font-size: 12px;
  }

  .ratingRow > span:last-child {
    width: 65px;
    font-size: 12px;
  }

  .ratingRow .bar {
    height: 8px;
  }
}
/* =========================
   ログインエリア
========================= */

#loginArea {
  margin: 18px 0;
  padding: 14px;
  background: #f8f8f8;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.login-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.login-status {
  padding: 8px 10px;
  margin-bottom: 10px;

  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;

  font-size: 14px;
}

.login-button {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-weight: bold;
  cursor: pointer;
}

.login-button:hover:not(:disabled) {
  background: #f0f0f0;
}

.login-button:disabled {
  cursor: default;
  opacity: 0.7;
}
/* =========================
   プロフィール
========================= */

#profileArea {
  margin: 18px 0;
  padding: 14px;
  background: #f8f8f8;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.profile-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.profile-description {
  margin: 0 0 10px;
  color: var(--sub-text);
  font-size: 13px;
  line-height: 1.6;
}

.profile-input {
  margin-top: 8px;
}

.profile-input {
  display: flex;
  gap: 8px;
}

#displayName {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

#saveProfile {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--main-color);
  color: white;
  font-weight: bold;
  cursor: pointer;
}

#saveProfile:hover {
  background: var(--main-hover);
}

@media (max-width: 600px) {

  .profile-input {
    flex-direction: column;
  }

  #displayName,
  #saveProfile {
    width: 100%;
  }

}
.submit-rating-button {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--main-color);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.submit-rating-button:hover {
  background: var(--main-hover);
}

.submit-rating-button:active {
  transform: translateY(1px);
}

.submit-rating-button:disabled {
  cursor: default;
  opacity: 0.6;
}
.rating-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
#comment {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  margin-top: 6px;
  box-sizing: border-box;

  border: 1px solid var(--border);
  border-radius: 8px;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;

  resize: vertical;
  background: #fff;
  color: var(--text);
}

#comment:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.12);
}
#rating {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: #fff;
  color: var(--text);

  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

#rating:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.12);
}
.rating-form label {
  display: block;
  margin-top: 14px;
  margin-bottom: 4px;

  font-size: 14px;
  font-weight: bold;
  color: var(--text);
}
#saveProfile {
  transition: background 0.2s, transform 0.1s;
}

#saveProfile:active {
  transform: translateY(1px);
}

#saveProfile:disabled {
  cursor: default;
  opacity: 0.6;
}
.rating-form-section > h2 {
  margin-bottom: 0;
}
.rating-description {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--sub-text);
}
.comment-description {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--sub-text);
  line-height: 1.6;
}
.filter-tag.effect-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;

  border: 1px solid var(--main-color);
  border-radius: 999px;

  background: #fff8ef;
  color: var(--text);

  font-size: 13px;
  cursor: pointer;

  transition: background 0.2s, transform 0.1s;
}

.filter-tag.effect-tag:hover {
  background: #ffe9cc;
}

.filter-tag.effect-tag:active {
  transform: translateY(1px);
}

.filter-tag-close {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--main-color);
}