@charset "UTF-8";
/* ============================================================
   BASEBALL INSIGHT GAMES - 共通デザイン
   baseball-insight.com/games/ に置く静的サイトの土台。
   ポータルTOP（mini/portal/）とミニゲーム（mini/future-star/ 等）が
   どちらもこの1枚を読む。ここが色・フォント・ヘッダー・フッターの正本。

   使い方   <link rel="stylesheet" href="../_shared/style.css">
            ミニゲーム固有のCSSは各フォルダ側に書く（このファイルには入れない）
   接頭辞   クラス・変数はすべて bi- で始める（将来 WordPress 側と混ざっても衝突しない）
   前提     モバイル優先。360px で情報が欠けない／390px で気持ちよく見える
   ============================================================ */

/* ---------- 1. トークン（色・文字・寸法） ---------- */
:root {
  /* 背景：上が暗い紺、下にいくほどわずかに明るい */
  --bi-bg:        #070c15;
  --bi-bg-deep:   #05090f;
  --bi-panel:     #0d1524;
  --bi-card:      #111c2e;
  --bi-card-hi:   #16233a;
  --bi-line:      rgba(255, 255, 255, .10);
  --bi-line-soft: rgba(255, 255, 255, .06);

  /* 文字 */
  --bi-ink:       #eaf0f8;
  --bi-ink-mid:   #a9b6c9;
  --bi-ink-dim:   #6d7c92;

  /* アクセント：金＝「今すぐ遊べる」、青＝本編（ドラシム） */
  --bi-gold:      #d8b45f;
  --bi-gold-deep: #a9802a;
  --bi-gold-ink:  #eccc7e;
  --bi-blue:      #2f7ce0;
  --bi-blue-deep: #1a54ad;
  --bi-blue-ink:  #7fb4f2;

  /* 文字組み */
  --bi-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
             "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  --bi-font-mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
             "Noto Serif JP", serif;

  /* 寸法 */
  --bi-wrap:      560px;   /* モバイル〜タブレットの本文幅 */
  --bi-wrap-wide: 960px;   /* デスクトップの上限 */
  --bi-pad:       16px;
  --bi-gap:       12px;
  --bi-r:         14px;    /* カードの角 */
  --bi-r-sm:      8px;
  --bi-r-pill:    999px;
  --bi-shadow:    0 2px 14px rgba(0, 0, 0, .45);

  /* 触れる部品の下限（44px） */
  --bi-tap:       44px;
}

/* ---------- 2. 土台 ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--bi-ink);
  font-family: var(--bi-font);
  font-size: 15px;
  line-height: 1.7;
  background-color: var(--bi-bg);
  background-image: linear-gradient(180deg, var(--bi-bg-deep) 0%, var(--bi-bg) 22%, var(--bi-bg) 100%);
  background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--bi-blue-ink); text-decoration: none; }
p { margin: 0 0 .8em; }
h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }

/* キーボード操作の枠。マウスのクリックでは出さない */
:focus-visible {
  outline: 2px solid var(--bi-gold);
  outline-offset: 2px;
  border-radius: var(--bi-r-sm);
}

.bi-wrap {
  width: 100%;
  max-width: var(--bi-wrap);
  margin: 0 auto;
  padding: 0 var(--bi-pad);
}

/* 画面には出さず、読み上げにだけ渡す文字 */
.bi-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. ヘッダー（全ページ共通） ---------- */
.bi-header {
  position: relative;
  background: linear-gradient(180deg, #0a1426 0%, #091120 100%);
  border-bottom: 1px solid var(--bi-line);
}

.bi-header-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px var(--bi-pad);
  max-width: var(--bi-wrap-wide);
  margin: 0 auto;
}

/* ロゴ（マーク＋サイト名）。a でも div でも成立する */
.bi-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  min-height: var(--bi-tap);
}

/* マークは差し替え前提のプレースホルダ。画像が来たら中に <img> を置く */
.bi-logo-mark {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1.5px solid var(--bi-gold);
  border-radius: 10px;
  background: #0c1830;
  color: var(--bi-gold-ink);
  font-size: 15px; font-weight: 800; letter-spacing: .04em;
}
.bi-logo-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }

.bi-wordmark {
  font-size: 15px; font-weight: 700;
  letter-spacing: .10em;
  line-height: 1.2;
  white-space: nowrap;
}
.bi-tagline {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--bi-ink-mid);
}

/* ---------- 4. ヒーロー（TOPの見出し。CTAは置かない） ---------- */
.bi-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bi-line);
  background: radial-gradient(120% 90% at 78% 12%, #1d3358 0%, #0d1830 45%, #070d18 100%);
}
/* 背景画像の枠。素材が来たら中に <img> を1枚入れる（いまは空でよい） */
.bi-hero-art { position: absolute; inset: 0; z-index: 0; }
.bi-hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;   /* 文字を読ませるため、写真は必ず落として敷く */
}
.bi-hero-in {
  position: relative;
  z-index: 1;
  max-width: var(--bi-wrap-wide);
  margin: 0 auto;
  padding: 28px var(--bi-pad) 30px;
}
.bi-hero-title {
  font-family: var(--bi-font-mincho);
  font-size: clamp(28px, 8.6vw, 40px);
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.bi-hero-sub {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--bi-ink-mid);
  letter-spacing: .02em;
}

/* ---------- 5. セクション見出し ---------- */
.bi-sec { padding: 26px 0 4px; }
.bi-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bi-sec-icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bi-line);
  background: #0e1a2c;
  color: var(--bi-gold-ink);
}
.bi-sec-icon--mute { color: var(--bi-ink-dim); }
.bi-sec-title {
  font-size: 21px;
  letter-spacing: .04em;
}
.bi-sec-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--bi-ink-dim);
  white-space: nowrap;
}

/* ---------- 6. カード ---------- */
.bi-card {
  background: linear-gradient(180deg, var(--bi-card-hi) 0%, var(--bi-card) 100%);
  border: 1px solid var(--bi-line);
  border-radius: var(--bi-r);
  box-shadow: var(--bi-shadow);
  overflow: hidden;
  margin-bottom: var(--bi-gap);
}
/* 「今すぐ遊べる」＝金の縁、「開発中」＝彩度を落とす */
.bi-card--play { border-color: rgba(216, 180, 95, .28); }
.bi-card--dev  { background: linear-gradient(180deg, #0f1826 0%, #0c1320 100%); }
.bi-card--dev .bi-card-title { color: var(--bi-ink-mid); }

.bi-card-body { padding: 14px var(--bi-pad) 16px; }
.bi-card-title {
  font-size: 20px;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.bi-card-desc {
  font-size: 13px;
  color: var(--bi-ink-mid);
  margin: 8px 0 12px;
}
.bi-card-flow {
  font-size: 13px;
  color: var(--bi-ink-mid);
  letter-spacing: .04em;
  margin: 8px 0 6px;
}

/* 横並びのカード（ポータルの一覧）。
   ⚠ 画像の枠を縦に積むと1枚で画面の高さを食い切るので、狭い画面でも横に並べる。
   ⚠ 中の詰め方は すべて .bi-card--split の下に閉じてある。
     この共通CSSはミニゲームも読むので、.bi-btn / .bi-tag / .bi-card-body を
     直接いじるとミニゲームの見た目まで動く。ここを触るときはその前提で。 */
.bi-card--split { display: grid; grid-template-columns: 38% 1fr; }
.bi-card--split .bi-thumb {
  aspect-ratio: auto;
  height: 100%;
  min-height: 132px;
  border-bottom: 0;
  border-right: 1px solid var(--bi-line-soft);
}
.bi-card--split .bi-card-body  { padding: 12px 12px 14px; }
.bi-card--split .bi-card-title { font-size: 17px; margin-bottom: 6px; }
.bi-card--split .bi-card-desc  { font-size: 12.5px; margin: 6px 0 10px; }
.bi-card--split .bi-card-flow  { font-size: 12.5px; margin: 6px 0 4px; }
.bi-card--split .bi-tag        { height: 24px; padding: 0 9px; font-size: 11px; }
.bi-card--split .bi-ext        { font-size: 11px; margin: 4px 0 10px; }
.bi-card--split .bi-btn        { min-height: 44px; font-size: 15px; }
.bi-card--split .bi-device     { width: 54px; }

/* 画像の枠。素材が来たら <img> を1枚入れるだけで差し替わる */
.bi-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0a1322;
  border-bottom: 1px solid var(--bi-line-soft);
  overflow: hidden;
}
/* ⚠ 写真はプレースホルダ（.bi-ph は position:absolute）より前に出す。
   こうしておくと、画像が届かなかったときだけ下の枠が見える＝穴が開かない */
.bi-thumb > img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* プレースホルダ本体。抽象的な絵（斜めの帯＋淡い光）にとどめる。
   ⚠ 実在しない画面のスクリーンショット風の絵はここに作らない */
.bi-ph {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(120, 165, 230, .16) 0%, rgba(0, 0, 0, 0) 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, 0) 2px 14px),
    linear-gradient(160deg, #16243c 0%, #0b1322 100%);
}
.bi-ph-label {
  font-family: var(--bi-font-mincho);
  font-size: 15px;
  line-height: 1.6;
  color: #cfdaea;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.bi-ph-sub {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--bi-ink-dim);
}
/* カードごとに光の色だけ変える。⚠ 文字や絵は焼き込まない（素材が来たら差し替わるので） */
.bi-ph--gold { background-image:
  radial-gradient(100% 80% at 50% 0%, rgba(216, 180, 95, .20) 0%, rgba(0, 0, 0, 0) 62%),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, 0) 2px 14px),
  linear-gradient(160deg, #22283c 0%, #0d1220 100%); }
.bi-ph--blue { background-image:
  radial-gradient(100% 80% at 50% 0%, rgba(90, 150, 230, .22) 0%, rgba(0, 0, 0, 0) 62%),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, 0) 2px 14px),
  linear-gradient(160deg, #16243c 0%, #0b1322 100%); }
.bi-ph--dim  { background-image:
  radial-gradient(100% 80% at 50% 0%, rgba(150, 170, 200, .10) 0%, rgba(0, 0, 0, 0) 62%),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, rgba(0, 0, 0, 0) 2px 14px),
  linear-gradient(160deg, #141b28 0%, #0a1018 100%); }

/* 端末のシルエット（アプリのカード用）。
   中身は描かない＝「まだ存在しない画面」を見せないための形 */
.bi-device {
  width: 84px;
  aspect-ratio: 9 / 17.5;
  border: 2px solid rgba(190, 210, 240, .45);
  border-radius: 12px;
  background: linear-gradient(170deg, rgba(150, 185, 235, .16) 0%, rgba(20, 32, 54, .5) 100%);
  position: relative;
}
.bi-device::before {   /* 受話口 */
  content: "";
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 3px;
  background: rgba(190, 210, 240, .45);
}

/* ---------- 7. タグ ---------- */
.bi-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--bi-r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  background: #1b2c46;
  border: 1px solid var(--bi-line);
  color: var(--bi-ink);
}
.bi-tag--blue { background: var(--bi-blue-deep); border-color: rgba(127, 180, 242, .35); }
.bi-tag--mute { background: #1a2130; color: var(--bi-ink-mid); }
.bi-tag svg { width: 13px; height: 13px; }

/* 外部サイトである印（「夢現で公開中」など） */
.bi-ext {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bi-ink-mid);
  margin: 6px 0 12px;
}
.bi-ext svg { width: 13px; height: 13px; flex: none; }

/* ---------- 8. ボタン ---------- */
.bi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.bi-btn:hover { filter: brightness(1.08); }
.bi-btn:active { transform: translateY(1px); }
.bi-btn-arrow { margin-left: auto; opacity: .85; }
.bi-btn svg { width: 16px; height: 16px; }

.bi-btn--gold {
  background: linear-gradient(180deg, #e8c878 0%, var(--bi-gold) 55%, var(--bi-gold-deep) 100%);
  border-color: #f0d79a;
  color: #2a1e05;                 /* 金の上は暗い文字（コントラスト確保） */
  box-shadow: 0 2px 10px rgba(180, 140, 50, .28);
}
.bi-btn--blue {
  background: linear-gradient(180deg, #3f8ced 0%, var(--bi-blue) 55%, var(--bi-blue-deep) 100%);
  border-color: #6aa9f2;
  color: #fff;
  box-shadow: 0 2px 10px rgba(30, 90, 180, .3);
}
.bi-btn--ghost {
  background: #141d2b;
  border-color: var(--bi-line);
  color: var(--bi-ink-mid);
}

/* 押せない印（アプリの「開発中」。button でも span でも見た目を揃える） */
.bi-btn--off,
.bi-btn[aria-disabled="true"] {
  background: #1b2330;
  border-color: var(--bi-line);
  color: var(--bi-ink-dim);
  cursor: default;
  box-shadow: none;
}
.bi-btn--off:hover,
.bi-btn[aria-disabled="true"]:hover { filter: none; }
.bi-btn--off:active,
.bi-btn[aria-disabled="true"]:active { transform: none; }

/* ---------- 9. 区切りの1行（「順次追加予定」など） ---------- */
.bi-rule-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 22px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--bi-ink-mid);
  text-align: center;
}
.bi-rule-note::before,
.bi-rule-note::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bi-line), rgba(255, 255, 255, 0));
}

/* ---------- 10. フッター ---------- */
.bi-footer {
  margin-top: 8px;
  padding: 26px var(--bi-pad) 34px;
  border-top: 1px solid var(--bi-line);
  background: linear-gradient(180deg, #091120 0%, #05090f 100%);
  text-align: center;
}
.bi-footer .bi-logo { justify-content: center; }
.bi-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 14px;
  font-size: 12px;
}
.bi-footer-links a { color: var(--bi-ink-mid); }
.bi-copy {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--bi-ink-dim);
}

/* ---------- 11. 画面が広いとき（デスクトップでも崩れない程度） ---------- */
@media (min-width: 720px) {
  :root { --bi-wrap: var(--bi-wrap-wide); --bi-pad: 24px; }

  .bi-hero-in { padding: 44px var(--bi-pad) 48px; }
  .bi-hero-title { font-size: 46px; }
  .bi-hero-sub { font-size: 15px; }

  /* 横並びは狭い画面と同じ。広いぶん、画像と文字を大きくするだけ */
  .bi-card--split { grid-template-columns: 34% 1fr; }
  .bi-card--split .bi-thumb { min-height: 200px; }
  .bi-card--split .bi-card-body  { padding: 18px 22px 20px; }
  .bi-card--split .bi-card-title { font-size: 22px; }
  .bi-card--split .bi-card-desc,
  .bi-card--split .bi-card-flow  { font-size: 14px; }
  .bi-card--split .bi-tag        { height: 26px; padding: 0 10px; font-size: 12px; }
  .bi-card--split .bi-ext        { font-size: 12px; }
  .bi-card--split .bi-btn        { min-height: 48px; font-size: 16px; min-width: 240px; }
  .bi-card--split .bi-device     { width: 78px; }
  .bi-card-body { padding: 22px 24px 24px; }
  .bi-card-title { font-size: 24px; }
  /* 広い画面ではボタンを列幅いっぱいに伸ばさない（inline-flex にしないと flex が伸びる） */
  .bi-btn { display: inline-flex; width: auto; min-width: 260px; }
  .bi-sec { padding: 34px 0 6px; }
  .bi-sec-title { font-size: 24px; }
}

/* ---------- 12. 動きを減らす設定の人には動かさない ---------- */
@media (prefers-reduced-motion: reduce) {
  .bi-btn { transition: none; }
  .bi-btn:active { transform: none; }
}