:root{color-scheme:dark;--bg:#07101f;--panel:#0d182b;--line:#24334a;--pink:#ff3d83;--text:#f5f7fb;--muted:#9eabc0}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#241141 0,#07101f 35%,#050b15 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(5,11,21,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{font-weight:800;font-size:18px}.brand span{font-size:12px;color:#ff8db4}main{width:min(780px,100%);margin:auto;padding:18px}.hero{padding:34px 18px;margin:4px 0 18px;border-radius:22px;background:linear-gradient(135deg,rgba(255,61,131,.18),rgba(77,57,255,.14));border:1px solid rgba(255,61,131,.24);box-shadow:0 0 40px rgba(255,61,131,.08)}.hero h1{margin:6px 0;font-size:clamp(30px,8vw,52px)}.hero p{color:#d7dceb}.eyebrow{color:#ff7baa!important;font-weight:700}.panel{background:rgba(13,24,43,.92);border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}input,select,button{font:inherit}input,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#091322;color:white}button{border:0;border-radius:12px;padding:12px 16px;background:linear-gradient(90deg,#ff2e76,#ff5a93);color:white;font-weight:700}.ghost{background:#0a1424;border:1px solid #31435e}.check{display:block;margin-top:12px;color:#cbd3df}.check input{width:auto}.message{min-height:20px;color:#ff9cbc}.tabs{display:flex;gap:8px;overflow:auto;padding:2px 0}.tab{white-space:nowrap;background:#0a1424;border:1px solid var(--line)}.tab.active{background:#ff2e76}.controls{display:flex;gap:10px}.controls select{flex:1}.feed{display:grid;gap:12px}.post-card{background:rgba(13,24,43,.95);border:1px solid var(--line);border-radius:18px;padding:14px}.post-head{display:flex;justify-content:space-between;gap:12px}.post-title{font-size:18px}.meta{color:var(--muted);font-size:13px;margin-top:4px}.rank{color:#ffca70;font-weight:800}.post-image{width:100%;max-height:460px;object-fit:cover;border-radius:14px;margin-top:12px}.post-body{white-space:pre-wrap;color:#d7deea}.post-actions{display:flex;justify-content:flex-end}.likeBtn{border-color:#7b294a}.empty{text-align:center;padding:40px;color:var(--muted)}@media(max-width:600px){main{padding:12px}.grid2{grid-template-columns:1fr}.hero{padding:28px 16px}.topbar{padding:12px}}
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hero-text {
  flex: 1;
}

.hero-character {
  width: 320px;
  max-width: 42vw;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }

 .hero-character {
  width: 100%;
  max-width: 420px;
}
}
.post-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.post-title-area h2 {
  margin: 0;
}

.post-character {
  width: 110px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 600px) {
  .post-character {と
    width: 90px;
  }
}
/* ヒーロー部分をコンパクトに */
.hero {
  padding: 20px 14px;
  gap: 12px;
}

.hero h1 {
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.15;
  margin: 4px 0 8px;
}

.hero p {
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.5;
}

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

.hero-character {
  width: 260px;
  max-width: 38vw;
}

@media (max-width: 700px) {
  .hero {
    padding: 18px 14px;
    gap: 8px;
  }

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

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

  .hero-character {
    width: 260px;
    max-width: 82%;
  }
}
/* 投稿フォームを見やすくする */
#postPanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#postPanel select,
#postPanel input,
#postPanel textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #091322;
  color: #fff;
  padding: 15px 16px;
  font-size: 16px;
}

#postPanel textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.image-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-upload label {
  font-size: 16px;
  font-weight: 700;
}

.image-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#postBtn {
  align-self: flex-start;
  min-width: 140px;
  font-size: 17px;
  padding: 14px 22px;
}
#postBody {
  display: block;
  width: 100%;
  min-height: 160px !important;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #091322;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}
#postPanel[hidden] {
  display: none !important;
}
#authPanel.logged-in h2,
#authPanel.logged-in .grid2,
#authPanel.logged-in .check,
#authPanel.logged-in #signupBtn,
#authPanel.logged-in #loginBtn {
  display: none;
}

#authPanel.logged-in {
  padding: 14px 16px;
}

#authPanel.logged-in .actions {
  margin-top: 0;
}

#authPanel.logged-in .message {
  margin: 8px 0 0;
  min-height: 0;
}
.ad-slot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  min-height: 100px;
  border: 1px dashed rgba(255, 61, 131, 0.55);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 61, 131, 0.10),
      rgba(77, 57, 255, 0.08)
    );
}

.ad-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ff8db4;
  border: 1px solid rgba(255, 141, 180, 0.5);
  border-radius: 7px;
  padding: 5px 7px;
}

.ad-content {
  flex: 1;
}

.ad-content strong {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}

.ad-content p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.ad-contact {
  flex-shrink: 0;
  padding: 10px 12px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .ad-slot {
    min-height: 92px;
    padding: 14px;
  }

  .ad-contact {
    display: none;
  }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 20px 0 32px;
  overflow-x: auto;
  padding: 4px 0;
  flex-wrap: nowrap;
}

.page-btn {
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  background: #0a1424;
  border: 1px solid var(--line);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}

.page-btn.active {
  background: linear-gradient(90deg,#ff2e76,#ff5a93);
  border-color: #ff5a93;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 600px) {
  .pagination {
    justify-content: flex-start;
  }

  .page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font-size: 13px;
  }
}
/* 投稿画像を小さく表示 */
.post-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 14px;
  margin: 12px auto 0;
}
/* =========================
   ランキング 金・銀・銅
========================= */

.ranking-card {
  position: relative;
}

.ranking-card.rank-gold {
  border: 2px solid #ffd54a;
  box-shadow:
    0 0 0 1px rgba(255, 213, 74, 0.2),
    0 0 22px rgba(255, 213, 74, 0.15);
}

.ranking-card.rank-gold .rank {
  color: #ffd54a;
  font-weight: 800;
}

.ranking-card.rank-silver {
  border: 2px solid #c8d0da;
  box-shadow:
    0 0 0 1px rgba(200, 208, 218, 0.18),
    0 0 18px rgba(200, 208, 218, 0.10);
}

.ranking-card.rank-silver .rank {
  color: #e1e6ec;
  font-weight: 800;
}

.ranking-card.rank-bronze {
  border: 2px solid #cd7f32;
  box-shadow:
    0 0 0 1px rgba(205, 127, 50, 0.18),
    0 0 18px rgba(205, 127, 50, 0.10);
}

.ranking-card.rank-bronze .rank {
  color: #e09a58;
  font-weight: 800;
}
/* =========================
   1位 ゴージャス強化
========================= */

.ranking-card.rank-gold {
  position: relative;
  overflow: hidden;

  border: 3px solid #ffd54a;

  background:
    radial-gradient(
      circle at top right,
      rgba(255, 215, 74, 0.16),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 215, 74, 0.07),
      rgba(10, 23, 46, 0.96) 35%
    );

  box-shadow:
    0 0 0 2px rgba(255, 215, 74, 0.18),
    0 0 20px rgba(255, 215, 74, 0.28),
    0 0 45px rgba(255, 183, 0, 0.16),
    inset 0 0 24px rgba(255, 215, 74, 0.06);
}


/* 上のチャンピオン帯 */

.ranking-card.rank-gold::before {
  content: "★  CHAMPION  ★";

  position: absolute;

  top: 0;
  left: 50%;

  transform: translateX(-50%);

  padding: 6px 22px;

  border-radius: 0 0 16px 16px;

  background:
    linear-gradient(
      90deg,
      #b8860b,
      #ffd54a,
      #fff1a8,
      #ffd54a,
      #b8860b
    );

  color: #201200;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 1.5px;

  box-shadow:
    0 4px 14px rgba(255, 215, 74, 0.35);

  z-index: 2;
}


/* 光沢 */

.ranking-card.rank-gold::after {
  content: "";

  position: absolute;

  top: -60%;
  left: -50%;

  width: 45%;
  height: 220%;

  transform: rotate(22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.16),
      transparent
    );

  pointer-events: none;
}


/* 1位文字 */

.ranking-card.rank-gold .rank {
  color: #ffe36e;

  font-size: 24px;
  font-weight: 900;

  text-shadow:
    0 0 8px rgba(255, 215, 74, 0.55),
    0 0 18px rgba(255, 180, 0, 0.30);
}


/* 1位タイトル */

.ranking-card.rank-gold .post-title {
  font-size: 22px;
  font-weight: 900;
}


/* 1位画像 */

.ranking-card.rank-gold .post-image {
  border: 2px solid rgba(255, 215, 74, 0.55);

  box-shadow:
    0 0 16px rgba(255, 215, 74, 0.16);
}


/* いいねボタンも金寄り */

.ranking-card.rank-gold .post-actions .ghost {
  border-color: rgba(255, 215, 74, 0.55);

  box-shadow:
    0 0 12px rgba(255, 215, 74, 0.12);
}
/* =========================================
   スマホ表示を全体的にコンパクト化
========================================= */

@media (max-width: 700px) {

  body {
    font-size: 14px;
  }


  /* ヘッダー */
  .topbar {
    padding: 12px 14px;
  }

  .brand,
  .logo,
  .site-title {
    font-size: 18px !important;
  }


  /* 全体のパネル */
  .panel {
    padding: 16px !important;
    border-radius: 18px;
  }


  /* 見出し */
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 21px;
  }

  h3 {
    font-size: 17px;
  }


  /* 入力欄 */
  input,
  textarea,
  select {
    font-size: 15px !important;
    padding: 12px 14px !important;
    min-height: 46px;
    border-radius: 14px !important;
  }

  textarea {
    min-height: 110px;
  }


  /* 通常ボタン */
  button,
  .ghost {
    font-size: 15px !important;
    padding: 11px 16px !important;
    min-height: 44px;
    border-radius: 14px;
  }


  /* 投稿・検索ボタン */
  .open-post-btn,
  .open-search-btn {
    font-size: 16px !important;
    padding: 11px 17px !important;
  }


  /* タブ */
  .tabs {
    gap: 7px;
  }

  .tabs .tab {
    font-size: 14px !important;
    padding: 10px 12px !important;
    min-height: 42px;
  }


  /* 投稿カード */
  .post-card {
    padding: 15px !important;
    border-radius: 17px;
  }

  .post-title {
    font-size: 18px !important;
    line-height: 1.4;
  }

  .post-body {
    font-size: 14px !important;
    line-height: 1.65;
  }

  .post-meta {
    font-size: 12px !important;
  }


  /* 投稿画像 */
  .post-image,
  .post-images img {
    width: 100%;
    max-height: 360px !important;
    object-fit: cover;
    border-radius: 12px;
  }


  /* 投稿下の操作ボタン */
  .post-actions {
    gap: 7px;
  }

  .post-actions button,
  .post-actions .ghost {
    font-size: 13px !important;
    padding: 8px 10px !important;
    min-height: 38px;
  }


  /* 広告 */
  .ad-slot {
    padding: 14px !important;
    min-height: auto !important;
  }

  .ad-slot strong,
  .ad-slot b {
    font-size: 16px !important;
  }


  /* ログイン・会員登録周辺 */
  #authPanel {
    padding: 16px !important;
  }

  #authPanel h2 {
    font-size: 21px !important;
    margin-bottom: 16px;
  }

  #authPanel input {
    margin-bottom: 10px;
  }


  /* 18歳以上チェック周辺 */
  .check {
    font-size: 14px !important;
    line-height: 1.5;
  }

  .check input {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
  }


  /* ランキング */
  .ranking-position {
    font-size: 16px !important;
  }

  .post-card.rank-1::before {
    font-size: 12px !important;
    padding: 6px 18px !important;
  }


  /* ホームへ戻る */
  #homeBackBtn {
    font-size: 14px !important;
    padding: 9px 14px !important;
  }

}
/* ボタンを中央寄せ＋横幅を広げる */

#authPanel button,
.open-post-btn,
.open-search-btn,
#homeBackBtn {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* 管理系ボタンを横いっぱいに */
#authPanel .ghost {
  width: 100%;
}


/* 投稿・検索ボタン */
.open-post-btn,
.open-search-btn {
  width: 100%;
}


/* タブ3個を横幅いっぱいに均等配置 */
.tabs {
  display: flex;
  width: 100%;
  gap: 8px;
}

.tabs .tab {
  flex: 1;
  min-width: 0;
  text-align: center;
}


/* 投稿カード内の操作ボタンも均等に */
.post-actions {
  display: flex;
  width: 100%;
  gap: 7px;
}

.post-actions button {
  flex: 1;
  min-width: 0;
}