/* ========== Reset ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }

/* ========== Theme ========== */
:root{
  --bg:#05070c;
  --text:#e8eef7;
  --muted:#7f8699;
  --shine1:#4bd8ff;
  --shine2:#b486ff;
  --hint:#9aa3b8;

  --mx:.5; --my:.5;
  --spot: .55;
}

html, body{
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(75,216,255,.12), transparent 60%),
    radial-gradient(1000px 800px at 90% 110%, rgba(180,134,255,.12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing:.01em; line-height:1.6;
}

/* ========== 背景に微細ノイズ ========== */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB..."); /* 簡易ノイズ */
  opacity:.07;
  mix-blend-mode:overlay;
}

/* ========== Canvas（花火はそのまま使う） ========== */
#fx{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; z-index: 0;
}

/* ========== Landing ========== */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden; z-index: 1;
  --sx: calc(var(--mx) * 100%);
  --sy: calc(var(--my) * 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(450px 450px at var(--sx) var(--sy), rgba(255,255,255,.05), transparent 70%);
  opacity: var(--spot);
}

.hero-inner{
  text-align:center;
  padding:24px;
  animation:fadeInUp .7s ease both;
  z-index:2;
}

/* ========== Logo ========== */
.logo{
  margin: 0 0 10px;
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 700;
  letter-spacing: .015em;

  /* 🌈 虹グラデ（淡め・実験室っぽい色相）*/
  background: linear-gradient(
    90deg,
    #62ecff 0%,   /* シアン */
    #7aa4ff 20%,  /* 青 */
    #c47aff 40%,  /* ラベンダー */
    #ff79c4 60%,  /* ピンク */
    #ffc96b 80%,  /* ゴールド */
    #62ecff 100%  /* シアンに戻してループ */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* うっすらネオン（ギラつかない） */
  text-shadow:
    0 0 14px rgba(255,255,255,.18),
    0 0 32px rgba(130,200,255,.22);

  /* 立体感をほんのり */
  filter:
    drop-shadow(0 4px 14px rgba(0,0,0,.28));
}

/* ※背景板は完全に削除 → スマートでクールに */
.logo::before{ display:none !important; }

/* ========== Tagline ========== */
.tagline{
  margin:6px 0 34px;
  font-size:clamp(14px,2.3vw,18px);
  color:var(--muted);
  letter-spacing:.03em;
}

/* ========== ENTER Button ========== */
.btn{
  appearance:none;
  padding:14px 32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  backdrop-filter: blur(4px);
  transition:.25s ease;
}
.btn:hover{
  border-color:var(--shine1);
  color:var(--shine1);
  transform: translateY(-2px);
}

/* ========== Hint（Enterでも進めます） ========== */
.hint{
  margin-top:22px;
  font-size:13px;
  color:var(--hint);
  opacity:.85;
  letter-spacing:.04em;
  transition:.3s ease;
}
.hint:hover{
  opacity:1;
  color:var(--text);
}

/* ========== Floating Color Orbs ========== */
.bg-orb{
  position:absolute; border-radius:50%;
  filter: blur(90px);
  opacity:.25;
  pointer-events:none;
}
.orb-1{
  width:600px;height:600px;
  background: radial-gradient(circle at 30% 30%, var(--shine1), transparent 70%);
  top:-180px; left:-160px;
}
.orb-2{
  width:780px;height:780px;
  background: radial-gradient(circle at 70% 70%, var(--shine2), transparent 70%);
  bottom:-260px; right:-200px;
}

/* ========== Footer ========== */
.site-footer{
  position:absolute; bottom:14px; inset-inline:0;
  display:grid; place-items:center;
  font-size:12px; color:var(--muted);
}

/* ========== Hub Styles (そのまま動作維持) ========== */
.hub-header{background:rgba(255,255,255,.02);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;}
.brand-link{color:var(--text);font-weight:700;text-decoration:none;}
.brand-link:hover{text-decoration:underline;}
.search input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:8px 12px;color:var(--text);}
.search input::placeholder{color:var(--muted);}
.cards{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.card{padding:18px;background:rgba(255,255,255,.04);border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);transition:.25s;}
.card:hover{border-color:var(--shine1);box-shadow:0 0 22px rgba(75,216,255,.25);}
.card-title{margin:0 0 6px;}
.card-desc{margin:0 0 4px;color:var(--muted);}

/* ========== Animations ========== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce){
  .hero-inner{ animation:none; }
  .bg-orb{ filter: blur(40px); }
}
/* === Hub: 余白と明るさを少しプラス、トップの雰囲気に寄せる === */
.hub-main{
  padding: 28px clamp(18px, 4.5vw, 40px) 56px;
  background:
    radial-gradient(1200px 800px at 10% -20%, rgba(100,216,255,.10), transparent 60%),
    radial-gradient(1000px 700px at 120% 110%, rgba(154,230,180,.10), transparent 60%);
}

.about{ margin: 6px 0 8px; }
.hub-title{ margin: 0; font-size: clamp(22px, 3.6vw, 32px); }
.hub-lead{ margin: 6px 0 12px; color: var(--muted); }

/* カテゴリ見出しに余白を足して詰まり解消 */
.cat-title{
  margin: 26px 0 10px;
  font-size: clamp(18px, 2.6vw, 22px);
  letter-spacing: .02em;
}

/* === カードの本文とフッターを分離（重なり防止） === */
.cards{ gap: 20px; }
.card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, var(--bg) 8%), color-mix(in oklab, var(--card) 85%, var(--bg-2) 15%));
  border: 1px solid color-mix(in oklab, var(--card-border) 80%, var(--accent) 20%);
}
.card-body{ display: grid; gap: 8px; }
.card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.card-meta{ font-size: 12px; color: var(--muted); }
.card-title{ margin: 0; font-size: 18px; letter-spacing: .02em; }
.card-desc{ margin: 0; color: var(--muted); }

/* ボタンの配置は右寄せ・重なりなし */
.btn-primary{
  margin-left: auto;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* スマホ時の余白最適化 */
@media (max-width: 480px){
  .hub-main{ padding-inline: 16px; }
  .card{ padding: 16px; }
  .card-foot{ gap: 10px; }
}

/* === Hub: 余白と視認性を微増、イントロの内部文は非表示 === */
.hub-main{ padding: 30px clamp(18px, 4.5vw, 40px) 64px; }
.about{ margin: 6px 0 4px; }
.hub-title{ margin: 0; font-size: clamp(22px, 3.6vw, 32px); }
.hub-lead{ margin: 6px 0 0; color: var(--muted); }

/* カテゴリ見出しの余白 */
.cat-title{
  margin: 28px 0 12px;
  font-size: clamp(18px, 2.6vw, 22px);
  letter-spacing: .02em;
}

/* カード: 本文/フッター分離で重なり解消、角に丸み・虹色エッジ */
.cards{ gap: 20px; }
.card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid transparent;

  /* ガラス面（中身） + 虹色エッジ（外周） */
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, var(--bg) 8%), color-mix(in oklab, var(--card) 85%, var(--bg-2) 15%)) padding-box,
    conic-gradient(from 180deg,
      rgba(98,236,255,.55),
      rgba(122,164,255,.55),
      rgba(196,122,255,.55),
      rgba(255,121,196,.55),
      rgba(255,201,107,.55),
      rgba(98,236,255,.55)) border-box;
  box-shadow: var(--shadow);
}
.card-body{ display: grid; gap: 8px; }
.card-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px;
}
.card-title{ margin: 0; font-size: 18px; letter-spacing: .02em; }
.card-desc{ margin: 0; color: var(--muted); }
.card-meta{ font-size: 12px; color: var(--muted); }

/* ボタンは右寄せ、重なり無し */
.btn-primary{
  margin-left: auto;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* 種類ごとに色味を微調整（虹色エッジのベース色を変える） */
#cards-home .card{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, var(--bg) 8%), color-mix(in oklab, var(--card) 85%, var(--bg-2) 15%)) padding-box,
    conic-gradient(from 180deg,
      rgba(98,236,255,.55), rgba(122,164,255,.55), rgba(98,236,255,.55)) border-box;
}
#cards-games .card{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, var(--bg-2) 10%), color-mix(in oklab, var(--card) 80%, var(--bg-2) 20%)) padding-box,
    conic-gradient(from 180deg,
      rgba(180,134,255,.6), rgba(98,236,255,.5), rgba(255,121,196,.55), rgba(180,134,255,.6)) border-box;
}
#cards-line .card{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, var(--bg) 8%), color-mix(in oklab, var(--card) 85%, var(--bg-2) 15%)) padding-box,
    conic-gradient(from 180deg,
      rgba(154,230,180,.6), rgba(98,236,255,.5), rgba(154,230,180,.6)) border-box;
}
#cards-tools .card{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, var(--bg-2) 10%), color-mix(in oklab, var(--card) 82%, var(--bg-2) 18%)) padding-box,
    conic-gradient(from 180deg,
      rgba(255,201,107,.6), rgba(98,236,255,.5), rgba(196,122,255,.55), rgba(255,201,107,.6)) border-box;
}
#cards-study .card{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, var(--bg) 8%), color-mix(in oklab, var(--card) 85%, var(--bg-2) 15%)) padding-box,
    conic-gradient(from 180deg,
      rgba(255,121,196,.55), rgba(122,164,255,.55), rgba(98,236,255,.5), rgba(255,121,196,.55)) border-box;
}

/* スクロール時にフッターが隠さないよう固定解除 + 余白確保 */
.site-footer{
  position: static; /* ← これで重なりを解消 */
  display:grid; place-items:center;
  color:var(--muted);
  padding: 24px 0 12px;
}
.hub-main{ padding-bottom: 48px; } /* 念のため下に余白 */

/* スマホ最適化 */
@media (max-width: 480px){
  .hub-main{ padding-inline: 16px; }
  .card{ padding: 16px; border-radius: 16px; }
  .card-foot{ gap: 10px; }
}