/* =========================================================
   base.css — 共通の土台と再利用パーツ
   tokens.css の変数を消費する。色や数値の直書きはしない（必ず var(--…)）。
   ========================================================= */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fz-base);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* --- カード（共通の土台） --- */
.card{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  text-decoration:none;color:inherit;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card .name{
  font-family:var(--font-head);font-weight:700;
  font-size:var(--fz-card-title);margin-bottom:6px;letter-spacing:.02em;
}
.card .desc{font-size:var(--fz-card-desc);color:var(--muted);line-height:1.7;}

/* --- 「公開中」バッジ（塗り） --- */
.badge-live{
  display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;
  padding:6px 15px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.06em;
}
.badge-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;}

/* --- ボタン --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  padding:15px 34px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:18px;
  text-decoration:none;white-space:nowrap;
  box-shadow:var(--shadow);
  transition:background .18s ease, transform .18s ease;
}
a.card:hover .btn{background:var(--accent-deep);}

/* --- 注目カード（今すぐ遊べる） --- */
.card.feature{
  flex-direction:row;align-items:center;justify-content:space-between;gap:28px;
  padding:30px 32px;
}
a.card.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent);}
.card.feature .name{font-size:26px;margin:12px 0 8px;}
.card.feature .desc{font-size:16px;max-width:46ch;}

/* --- 準備中カード（淡い点線・控えめ） --- */
.card.soon{background:transparent;border:1px dashed var(--line);}
.card.soon .name{color:var(--ink-soft);}
.tag-soon{
  align-self:flex-start;margin-top:auto;
  padding:4px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;
}

/* --- 注記ボックス --- */
.note{
  margin:34px 0 0;padding:20px 22px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  font-size:var(--fz-card-desc);color:var(--muted);
}
.note b{color:var(--ink);font-weight:700;}

/* --- キーボード操作のフォーカス（アクセシビリティ） --- */
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* --- フッター --- */
footer{
  margin:56px 0 64px;padding-top:28px;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:14px;
}
footer a{color:var(--accent-deep);text-decoration:none;border-bottom:1px solid var(--line);}
footer a:hover{border-color:var(--accent);}