/* style.css — 画像風ランキング(縦3段・太いピル)＋キャラ一覧と下部ボード＆管理リンク */

/* フォント */
@font-face {
  font-family: 'CityBrawlers';
  src: url('fonts/CityBrawlersBoldCaps.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ===== テーマ変数 ===== */
:root{
  --bg-solid: #f7f8fb;
  --text-color: #000;
  --heading-color: #123b7a;
  --link-color: #0a78c8;
  --accent-color: #2f8fe8;

  /* ランキング（画像の雰囲気に近いサイズ感） */
  --pill-max-w: 560px;     /* ピルの最大幅 */
  --pill-pad-y: 18px;      /* 上下の余白 */
  --pill-pad-x: 28px;      /* 左右の余白 */
  --pill-gap-x: 18px;      /* 左・中央・右の余白 */
  --left-col: 72px;        /* 左の順位枠の幅 */
  --right-col: 120px;      /* 右の数値枠の幅 */

  --rank1-font: clamp(2.2rem, 6vw, 3.0rem);
  --rank2-font: clamp(2.0rem, 5.4vw, 2.6rem);
  --rank3-font: clamp(1.8rem, 5vw, 2.3rem);

  --name-font: clamp(1.6rem, 4.8vw, 2.2rem);     /* 中央の名前（黒） */
  --count-font: clamp(1.0rem, 3.2vw, 1.2rem);    /* 右端の投稿数（黒） */

  /* キャラ/ボードのリンク色 */
  --char-link-color: #0a78c8;
}

/* 角丸を全廃止していた場合の打ち消しは、ピル側で !important 指定します */
* { border-radius: 0 !important; }

/* ===== ベース ===== */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg-solid);
  color: var(--text-color);
  margin: 20px auto;
  max-width: 1100px;
  padding: 0 20px 60px;
}

h1, h2, h3 {
  color: var(--heading-color);
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 8px;
  margin-top: 18px;
}

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================
   画像風：ランキング（縦3段・太いピル）
   ========================= */
.ranking-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:16px 0 18px;
}

.rank-item{
  width:min(100%, var(--pill-max-w));
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 26px rgba(0,0,0,.12);
  display:grid;
  grid-template-columns: var(--left-col) 1fr var(--right-col);
  align-items:center;
  column-gap: var(--pill-gap-x);
  color:#222;
  border-radius: 9999px !important; /* ←太いピル */
}

/* 金・銀・銅のグラデ（画像の雰囲気） */
.rank-item.rank-1{
  background: linear-gradient(90deg,#e8d08b 0%,#fdf0c1 22%,#d9b55a 50%,#f9e9a4 78%,#e6cc83 100%);
}
.rank-item.rank-2{
  background: linear-gradient(90deg,#d9dbe0 0%,#f1f2f4 22%,#bfc3c9 50%,#eef0f3 78%,#d6d9de 100%);
}
.rank-item.rank-3{
  background: linear-gradient(90deg,#e1b18a 0%,#f6d1b2 22%,#c47d45 50%,#f1c7a5 78%,#daa478 100%);
}

/* 左：順位の数字（白・大きめ） */
.rank-no{
  font-weight:900;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  line-height:1;
  justify-self:center;
}
.rank-item.rank-1 .rank-no{ font-size: var(--rank1-font); }
.rank-item.rank-2 .rank-no{ font-size: var(--rank2-font); }
.rank-item.rank-3 .rank-no{ font-size: var(--rank3-font); }

/* 中央：名前（黒） */
.rank-name{
  font-family: 'CityBrawlers',"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: var(--name-font);
  font-weight: 800;
  color:#111;
}

/* 右端：投稿数（黒、画像の％位置に表示） */
.rank-count{
  font-size: var(--count-font);
  font-weight: 800;
  color:#111;
  text-align:right;
}

/* =========================
   キャラクター別掲示板（5列）
   ========================= */
.char-list { margin-top: 18px; }
.char-list h3 { margin: 0 0 10px; font-size: 1.1rem; }
.char-list-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 14px;
}
.char-list-grid a {
  color: var(--char-link-color);
  font-weight: 800;
  text-decoration: none;
  display: block;
  padding: 8px 6px;
  border: 1px solid #c9d7ea;
  background: #fff;
  text-align: center;
}
.char-list-grid a:hover { background: #f2f7ff; }

/* =========================
   その他の掲示板（キャラ一覧と同レイアウト）
   ========================= */
.board-list { margin-top: 18px; }
.board-list h3 { margin: 0 0 10px; font-size: 1.1rem; }
.board-list-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 14px;
}
.board-list-grid a {
  color: var(--char-link-color);
  font-weight: 800;
  text-decoration: none;
  display: block;
  padding: 8px 6px;
  border: 1px solid #c9d7ea;
  background: #fff;
  text-align: center;
}
.board-list-grid a:hover { background: #f2f7ff; }

/* 管理リンク（最下部・目立たない） */
.admin-footer {
  margin-top: 28px;
  font-size: 12px;
  color: #667;
  text-align: right;
}
.admin-footer a { color: #6b7c92; text-decoration: none; }
.admin-footer a:hover { text-decoration: underline; }

/* 成功/エラー（他ページ兼用） */
.success {
  background-color: #e9f7ef; color: #1e7e34;
  border: 1px solid #c3e6cb; padding: 10px; margin-bottom: 16px;
}
.error {
  background-color: #fdecea; color: #9f3a38;
  border: 1px solid #f5c6cb; padding: 10px; margin-bottom: 16px;
}

/* レスポンシブ */
@media (max-width: 640px){
  :root{
    --left-col: 64px;
    --right-col: 108px;
  }
  .char-list-grid, .board-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px){
  .char-list-grid, .board-list-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ===== サイト説明（このサイトについて） ===== */
.site-about {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #c9d7ea;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  padding: 16px 18px;
  color: #222;
}
.site-about h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--heading-color);
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 6px;
}
.site-about p { margin: 8px 0; line-height: 1.8; }
.site-about ul { margin: 8px 0 0 1.2em; }
.site-about li { margin: 4px 0; }
/* === 投稿フォーム（一般的な掲示板サイズの横長） === */
.post-form {
  max-width: 900px;       /* サイト幅に合わせて横長 */
  padding: 15px 20px;
  margin: 16px 0 24px;
}
.post-form textarea {
  width: 100%;
  min-height: 140px;      /* 正方形ではなく控えめ高さ */
  max-height: 420px;      /* 必要に応じて伸ばせる */
  resize: vertical;       /* ユーザーが高さを変更可能 */
  font-size: 16px;
  line-height: 1.6;
}
.post-form input[type="file"] {
  display: block;
  margin: 8px 0 12px;
}
/* ===== 投稿一覧の見やすい“枠” ===== */

/* 投稿全体のリスト（任意：無くてもOK。入れると縦方向の間隔が整います） */
.post-list {
  display: grid;
  gap: 14px;           /* 投稿同士の間隔 */
  margin-top: 10px;
}

/* 1件ぶんの枠（角丸なし・くっきり） */
.comment-box {
  background: #fff;
  border: 2px solid #c9d7ea;  /* 枠をくっきり */
  padding: 14px 16px;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}

/* 枠の中の見出し行（番号・ID・日付） */
.comment-box .post-head {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: #334;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #dfe7f3; /* 上下を区切って読みやすく */
}

/* #番号の見栄え（角丸なしのラベル風） */
.post-no {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #b8c9e3;
  background: #eff5ff;
  font-weight: 800;
  color: #445;
  margin-right: .5em;
}

/* 本文（既に黒統一なら色指定は不要） */
.comment-box .post-body {
  line-height: 1.7;
  white-space: pre-wrap; /* 改行をそのまま表示 */
}

/* 動画も枠に合わせて整える */
.post-video {
  margin-top: 10px;
  border: 1px solid #c9d7ea;
  background: #f7faff;
  padding: 6px;
}
.post-video video {
  width: 100%;
  max-height: 420px;
  display: block;
}