/* ============================================================
   ガチャキング決定戦 — ページテーマ
   当日資料（Canva）のデザイン言語に合わせる：
     ・黒ベース
     ・縁から差し込むゴールドのグラデーション（額縁）
     ・ゴールドのプレート見出し＋黒文字
     ・紫パネル／黄のアクセント
   body.gk にスコープして PB 共通トークンを上書きする。
   読み込み順は design-system → site → gachaking → gachaking-theme
   ============================================================ */

body.pb.gk {
  /* --- ゴールド --- */
  --gk-gold-lt: #F6DE9A;
  --gk-gold:    #E9C15C;
  --gk-gold-dp: #A97D24;
  /* --- パープル / イエロー --- */
  --gk-purple-lt: #9B6BF0;
  --gk-purple:    #5B47A8;
  --gk-purple-dp: #2E2352;
  --gk-yellow:    #FFD84D;
  /* --- 面と文字 --- */
  --gk-bg:      #08070C;
  --gk-panel:   rgba(28, 23, 44, .78);
  --gk-panel-2: rgba(40, 33, 62, .88);
  --gk-line:    rgba(233, 193, 92, .26);
  --gk-line-st: rgba(233, 193, 92, .55);
  --gk-fg:      #F4EFE3;
  --gk-fg-dim:  rgba(244, 239, 227, .68);
  --gk-fg-mute: rgba(244, 239, 227, .48);

  /* --- PB 共通トークンをゴールドへ --- */
  --pb-primary:        #E9C15C;
  --pb-primary-hover:  #D9A93E;
  --pb-primary-active: #F6DE9A;
  --pb-focus-ring: 0 0 0 4px rgba(233, 193, 92, .32);
}

/* ============================================================
   背景 — 黒地に、四隅から差し込むゴールド
   ============================================================ */
body.pb.gk {
  color: var(--gk-fg);
  background:
    radial-gradient(900px 520px at 100% 0%,   rgba(233, 193, 92, .16), transparent 62%),
    radial-gradient(760px 460px at 0% 100%,   rgba(169, 125, 36, .14), transparent 62%),
    radial-gradient(820px 520px at 12% -8%,   rgba(91, 71, 168, .22),  transparent 60%),
    var(--gk-bg);
  background-attachment: fixed;
}
body.pb.gk::before {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(233, 193, 92, .30), transparent 70%);
}
body.pb.gk::after {
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(155, 107, 240, .26), transparent 70%);
}

/* 見出しマーカーはゴールドの発光 */
body.gk .pb-section-title::before,
body.gk .pb-page-title h1::before {
  background: linear-gradient(180deg, var(--gk-gold-lt), var(--gk-gold-dp));
  box-shadow: 0 0 18px rgba(233, 193, 92, .75);
}
body.gk h1, body.gk h2, body.gk h3, body.gk h4 { color: var(--gk-fg); }
body.gk a { color: inherit; }
body.gk .gk-stage__lead a b,
body.gk .gk-stage__lead a strong { color: var(--gk-gold-lt); }

/* ============================================================
   ヘッダー / ナビゲーション — ゴールドのプレート
   ============================================================ */
body.gk .pb-site-header {
  background: rgba(8, 7, 12, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
/* 白文字が乗るよう、深い金（ブロンズ寄り）のグラデーションにする。
   最明部 #A87C24 でも #FFF8E7 との比は 3.6:1 を確保している */
body.gk .pb-navbar {
  background: linear-gradient(120deg, #A87C24 0%, #80601A 38%, #5E4410 72%, #402C09 100%);
  border: 1px solid rgba(246, 222, 154, .32);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
body.gk .pb-navbar__brand,
body.gk .pb-navbar__title,
body.gk .pb-navbar__brand-text,
body.gk .pb-navbar__item { color: #FFF8E7; }
body.gk .pb-navbar__item--active {
  background: #0F0B17;
  color: var(--gk-gold-lt);
  box-shadow: 0 0 0 1px rgba(246, 222, 154, .45);
}
body.gk .pb-navbar__item:hover { color: var(--gk-yellow); }
body.gk .pb-navbar__item--active:hover { color: var(--gk-yellow); }
body.gk .pb-navbar__toggle { background: #0F0B17; }
body.gk .pb-navbar__toggle .pb-icon { color: var(--gk-gold-lt); }
body.gk .pb-navbar__drawer { background: #0F0B17; border: 1px solid var(--gk-line); }
body.gk .pb-navbar__menu .pb-navbar__item--active { color: var(--gk-gold-lt); }

/* ブランド部：アイコン＝PBトップ、テキスト＝大会トップ の2つの導線 */
.pb-navbar__home { display: inline-flex; align-items: center; border-radius: 8px; }
.pb-navbar__home img { transition: transform .18s ease; }
.pb-navbar__home:hover img { transform: scale(1.06); }
.pb-navbar__title {
  font-family: inherit;
  background: none;
  border: none;
  padding: 2px 4px;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: opacity .15s ease;
}
.pb-navbar__title:hover { opacity: .68; }
.pb-navbar__home:focus-visible,
.pb-navbar__title:focus-visible { outline: 2px solid #FFF8E7; outline-offset: 2px; }

/* フッター */
body.gk .pb-site-footer { background: #05040A; border-top: 1px solid var(--gk-line); }
body.gk .pb-social-link:hover { color: var(--gk-gold-lt); }
body.gk .pb-social-link:hover .pb-social-icon { background: var(--gk-gold-lt); }

/* ============================================================
   ステージ
   ============================================================ */
.gk-stage[hidden] { display: none; }
.gk-stage { animation: pb-fade-up .45s cubic-bezier(.22, .61, .36, 1) both; }

/* ============================================================
   ヒーロー — 黒地にゴールドの額縁
   ============================================================ */
.gk-hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--pb-space-6);
  padding: var(--pb-space-16) var(--pb-space-8);
  border-radius: var(--pb-radius);
  background:
    radial-gradient(620px 300px at 108% 118%, rgba(233, 193, 92, .55), transparent 62%),
    radial-gradient(520px 260px at -8% -18%, rgba(169, 125, 36, .34), transparent 64%),
    linear-gradient(135deg, #120E1D 0%, #0A0810 55%, #0C0913 100%);
  border: 1px solid var(--gk-line-st);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), inset 0 0 60px rgba(233, 193, 92, .06);
  color: var(--gk-fg);
}
/* 上端のゴールドライン（額縁の艶） */
.gk-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gk-gold-lt), transparent);
}
/* パープルのブロブ（遊び心） */
.gk-hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  top: -170px; right: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 107, 240, .34), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.gk-hero > * { position: relative; z-index: 1; }

.gk-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--pb-fw-bold);
  letter-spacing: .08em;
  padding: 6px 18px;
  border-radius: var(--pb-radius-full);
  background: rgba(233, 193, 92, .1);
  border: 1px solid var(--gk-line-st);
  color: var(--gk-gold-lt);
}
.gk-hero__badge .pb-icon { font-size: 18px; }

.gk-hero__title {
  font-size: 56px;
  font-weight: var(--pb-fw-black);
  line-height: 1.15;
  margin: var(--pb-space-4) 0 0;
  background: linear-gradient(100deg, #FFF6DC 0%, var(--gk-gold-lt) 26%, #FFFFFF 48%, var(--gk-gold) 70%, #A97D24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(233, 193, 92, .28));
}
.gk-hero__lead {
  font-size: 22px;
  font-weight: var(--pb-fw-bold);
  line-height: 1.6;
  margin: var(--pb-space-3) 0 0;
}
.gk-hero__lead em { font-style: normal; color: var(--gk-yellow); }
.gk-hero__sub {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gk-fg-dim);
  max-width: 660px;
  margin: var(--pb-space-4) 0 0;
}
.gk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-3);
  margin-top: var(--pb-space-6);
}
.gk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pb-font);
  font-size: 17px;
  font-weight: var(--pb-fw-bold);
  padding: 12px 28px;
  border: none;
  border-radius: var(--pb-radius-full);
  cursor: pointer;
  line-height: 1.2;
  transition: transform .18s ease, box-shadow .22s ease, background .18s ease, gap .18s ease;
}
.gk-btn .pb-icon { font-size: 20px; }
.gk-btn--gold {
  background: linear-gradient(120deg, #FBEFC4, #E9C15C 45%, #C79B34);
  color: #1A1424;
  box-shadow: 0 10px 26px rgba(233, 193, 92, .3);
}
.gk-btn--gold:hover { transform: translateY(-2px); gap: 15px; box-shadow: 0 16px 34px rgba(233, 193, 92, .45); }
.gk-btn--play {
  background: linear-gradient(120deg, var(--gk-purple-lt), var(--gk-purple));
  color: #fff;
  box-shadow: 0 10px 26px rgba(91, 71, 168, .45);
}
.gk-btn--play:hover { transform: translateY(-2px); gap: 15px; box-shadow: 0 16px 34px rgba(155, 107, 240, .55); }
.gk-btn--ghost {
  background: transparent;
  color: var(--gk-fg-dim);
  border: 2px solid rgba(244, 239, 227, .24);
  padding: 10px 26px;
}
.gk-btn--ghost:hover { background: rgba(244, 239, 227, .08); color: var(--gk-fg); }

/* ============================================================
   ツールカード（過去大会統計 / ガチャキングシミュレーター）
   ヒーロー直下の主要導線。アイコンとタイトルを横並びにして
   高さを抑えたコンパクトな作りにする
   ============================================================ */
.gk-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--pb-space-5);
  margin-top: var(--pb-space-5);
}
.gk-tool {
  text-decoration: none;
  --gt-a: var(--gk-gold-lt);
  --gt-b: var(--gk-gold-dp);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px var(--pb-space-4);
  text-align: left;
  font-family: inherit;
  color: var(--gk-fg);
  cursor: pointer;
  padding: var(--pb-space-5);
  border-radius: var(--pb-radius);
  border: 1px solid var(--gk-line-st);
  background:
    radial-gradient(460px 240px at 108% 120%, rgba(233, 193, 92, .30), transparent 62%),
    linear-gradient(140deg, #15102300, #14101F 60%);
  background-color: #14101F;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.gk-tool:hover {
  transform: translateY(-8px);
  border-color: var(--gt-a);
  box-shadow: 0 30px 62px rgba(0, 0, 0, .6), 0 0 0 1px var(--gt-a);
}
/* 上端のグラデーションライン */
.gk-tool::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gt-a), var(--gt-b));
}
/* 背景の巨大ゴーストアイコン */
.gk-tool__glyph {
  position: absolute;
  right: -16px; bottom: -22px;
  font-size: 128px;
  line-height: 1;
  color: rgba(244, 239, 227, .05);
  pointer-events: none;
  transition: transform .4s ease, color .4s ease;
}
.gk-tool:hover .gk-tool__glyph { transform: scale(1.08) rotate(-6deg); color: rgba(244, 239, 227, .09); }

.gk-tool > *:not(.gk-tool__glyph) { position: relative; z-index: 1; }
.gk-tool__icon {
  grid-column: 1; grid-row: 1;
  width: 52px; height: 52px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gt-a), var(--gt-b));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
.gk-tool__icon .pb-icon { font-size: 30px; color: #1A1424; }
.gk-tool__title {
  grid-column: 2; grid-row: 1;
  font-size: 22px;
  font-weight: var(--pb-fw-black);
  margin: 0;
}
/* 説明とボタンは2列ぶんを使って下に流す */
.gk-tool__desc {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.75;
  color: var(--gk-fg-dim);
}
.gk-tool__action {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 9px 22px;
  border-radius: var(--pb-radius-full);
  background: linear-gradient(120deg, var(--gt-a), var(--gt-b));
  color: #1A1424;
  font-size: 15px;
  font-weight: var(--pb-fw-bold);
  transition: gap .2s ease;
}
.gk-tool__action .pb-icon { font-size: 18px; transition: transform .2s ease; }
.gk-tool:hover .gk-tool__action { gap: 13px; }
.gk-tool:hover .gk-tool__action .pb-icon { transform: translateX(4px); }

/* ガチャキングシミュレーターは紫（遊び心側） */
.gk-tool--simulator {
  --gt-a: var(--gk-purple-lt);
  --gt-b: var(--gk-purple-dp);
  background:
    radial-gradient(460px 240px at 108% 120%, rgba(155, 107, 240, .34), transparent 62%),
    linear-gradient(140deg, #15102300, #14101F 60%);
  background-color: #14101F;
}
.gk-tool--simulator .gk-tool__icon .pb-icon { color: var(--gk-yellow); }
.gk-tool--simulator .gk-tool__action { color: #fff; }

/* ============================================================
   大会セレクタ（統計ステージ本体に配置）
   ============================================================ */
.gk-tournament {
  display: flex;
  align-items: center;
  gap: var(--pb-space-3);
  flex-wrap: wrap;
  margin-top: var(--pb-space-5);
  padding: var(--pb-space-3) var(--pb-space-4);
  border-radius: var(--pb-radius);
  background: var(--gk-panel);
  border: 1px solid var(--gk-line);
}
.gk-tournament__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: var(--pb-fw-bold);
  letter-spacing: .06em;
  color: var(--gk-gold-lt);
}
.gk-tournament__label .pb-icon { font-size: 20px; }
.gk-tournament .tm-dd { flex: 1 1 240px; width: auto; max-width: 380px; }
body.gk .gk-tournament .tm-dd__trigger {
  font-size: 16px;
  font-weight: var(--pb-fw-bold);
  padding: 10px 16px;
}

/* ============================================================
   汎用パネル（特徴カード）
   ============================================================ */
/* 「大会について」内のセクション見出し */
.gk-section-heading {
  font-size: 30px;
  margin: var(--pb-space-16) 0 0;
}
.gk-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pb-space-5);
  margin-top: var(--pb-space-5);
}
.gk-feature {
  position: relative;
  overflow: hidden;
  padding: var(--pb-space-6);
  border-radius: var(--pb-radius);
  background: var(--gk-panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--gk-line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  transition: transform .24s ease, box-shadow .28s ease, border-color .28s ease;
}
.gk-feature:hover {
  transform: translateY(-6px);
  border-color: var(--gk-line-st);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(233, 193, 92, .18);
}
/* 角のゴールドトライアングル */
.gk-feature::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--gk-gold-lt), var(--gk-gold-dp));
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.gk-feature__icon {
  width: 62px; height: 62px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gk-purple-lt), var(--gk-purple-dp));
  box-shadow: 0 12px 26px rgba(46, 35, 82, .55);
}
.gk-feature__icon .pb-icon { font-size: 34px; color: var(--gk-yellow); }
.gk-feature h3 {
  font-size: 21px;
  font-weight: var(--pb-fw-black);
  margin: var(--pb-space-4) 0 var(--pb-space-2);
}
.gk-feature p { font-size: 15px; line-height: 1.85; margin: 0; color: var(--gk-fg-dim); }
.gk-feature p b { color: var(--gk-gold-lt); font-weight: var(--pb-fw-bold); }

/* ============================================================
   仕様リスト（ガチャと試合のしくみ／大会形式）
   ============================================================ */
.gk-spec {
  margin: var(--pb-space-5) 0 0;
  border-radius: var(--pb-radius);
  overflow: hidden;
  border: 1px solid var(--gk-line);
  background: var(--gk-panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}
.gk-spec__row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--pb-space-5);
  padding: var(--pb-space-4) var(--pb-space-6);
}
.gk-spec__row + .gk-spec__row { border-top: 1px solid rgba(244, 239, 227, .08); }
.gk-spec dt {
  font-size: 16px;
  font-weight: var(--pb-fw-bold);
  color: var(--gk-gold-lt);
}
.gk-spec dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--gk-fg-dim);
}
.gk-spec dd b { color: var(--gk-fg); font-weight: var(--pb-fw-bold); }

/* ============================================================
   参加条件チェックリスト
   ============================================================ */
.gk-checklist {
  list-style: none;
  margin: var(--pb-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
}
.gk-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--pb-space-3);
  padding: var(--pb-space-4) var(--pb-space-5);
  border-radius: var(--pb-radius);
  background: var(--gk-panel);
  border: 1px solid var(--gk-line);
  font-size: 15px;
  line-height: 1.8;
  color: var(--gk-fg-dim);
}
.gk-checklist li b { color: var(--gk-fg); font-weight: var(--pb-fw-bold); }
.gk-checklist .pb-icon { flex: 0 0 auto; font-size: 22px; color: var(--gk-gold); margin-top: 2px; }

/* ============================================================
   大会当日の流れ（ステップ）
   ============================================================ */
.gk-steps {
  list-style: none;
  margin: var(--pb-space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pb-space-4);
  counter-reset: gkstep;
}
.gk-step {
  position: relative;
  padding: var(--pb-space-5);
  border-radius: var(--pb-radius);
  background: linear-gradient(150deg, var(--gk-panel-2), rgba(20, 16, 32, .9));
  color: var(--gk-fg-dim);
  border: 1px solid var(--gk-line);
}
.gk-step::before {
  counter-increment: gkstep;
  content: counter(gkstep, decimal-leading-zero);
  display: block;
  font-size: 13px;
  font-weight: var(--pb-fw-black);
  letter-spacing: .2em;
  color: var(--gk-gold-lt);
  margin-bottom: 6px;
}
.gk-step h3 { font-size: 18px; font-weight: var(--pb-fw-bold); margin: 0 0 6px; }
.gk-step p  { font-size: 14px; line-height: 1.8; margin: 0; color: var(--gk-fg-mute); }

/* ============================================================
   注意事項
   ============================================================ */
.gk-notice {
  margin-top: var(--pb-space-16);
  padding: var(--pb-space-5) var(--pb-space-6);
  border-radius: var(--pb-radius);
  border: 1px solid rgba(244, 239, 227, .12);
  background: rgba(244, 239, 227, .04);
}
.gk-notice__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--pb-space-3);
  font-size: 15px;
  font-weight: var(--pb-fw-bold);
  color: var(--gk-gold-lt);
}
.gk-notice__title .pb-icon { font-size: 20px; }
.gk-notice ul { margin: 0; padding-left: 1.3em; }
.gk-notice li { font-size: 14px; line-height: 1.9; color: var(--gk-fg-mute); }

/* ============================================================
   サブタブ（統計内：全体/ルール/ステージ/ブキ/チーム）
   gachaking.js が pb-navbar__item--active を付与する
   ============================================================ */
.gk-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-2);
  list-style: none;
  margin: var(--pb-space-4) 0 0;
  padding: 0;
}
.gk-subtab {
  font-size: 16px;
  font-weight: var(--pb-fw-bold);
  padding: 8px 22px;
  border-radius: var(--pb-radius-full);
  background: rgba(244, 239, 227, .06);
  border: 1px solid rgba(244, 239, 227, .14);
  color: var(--gk-fg-dim);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.gk-subtab:hover { border-color: var(--gk-line-st); color: var(--gk-fg); }
/* ナビ用の .pb-navbar__item--active より詳細度を上げる */
body.gk .gk-subtab.pb-navbar__item--active {
  background: linear-gradient(120deg, #FBEFC4, #E9C15C 45%, #C79B34);
  color: #1A1424;
  border-color: transparent;
}

/* ============================================================
   統計ステージの見出し
   ============================================================ */
.gk-stage__head { margin-top: var(--pb-space-6); }
.gk-stage__title { font-size: 30px; font-weight: var(--pb-fw-black); margin: 0; }
.gk-stage__lead--spaced { margin-top: var(--pb-space-6); }
.gk-stage__lead {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gk-fg-dim);
  margin: var(--pb-space-2) 0 0;
  max-width: 860px;
}
.gk-stage__lead b { color: var(--gk-fg); }

/* ============================================================
   統計コンポーネントのダーク化（gachaking.css の明色を上書き）
   ============================================================ */
/* 総ガチャ回数ヒーロー */
body.gk .gk-ov__hero {
  background:
    radial-gradient(420px 200px at 105% 120%, rgba(233, 193, 92, .40), transparent 62%),
    linear-gradient(135deg, #150F24, #0B0813);
  border-color: var(--gk-line-st);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
body.gk .gk-ov__hero::before { background: radial-gradient(circle, rgba(155, 107, 240, .34), transparent 70%); }
body.gk .gk-ov__hero-value { color: var(--gk-gold-lt); }
body.gk .gk-ov__meta { color: var(--gk-fg-mute); }
body.gk .gk-ov__heading-sub { color: var(--gk-fg-mute); }

/* カード類（排出数・ゲージ・統計カード・チームカード） */
body.gk .gk-count-card,
body.gk .gk-gauge,
body.gk .gk-card,
body.gk .gk-tc,
body.gk .gk-formula__body {
  background: var(--gk-panel);
  border-color: var(--gk-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  color: var(--gk-fg);
}
body.gk .gk-card:hover,
body.gk .gk-tc:hover {
  border-color: var(--gk-line-st);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(233, 193, 92, .18);
}
body.gk .gk-count-card__label,
body.gk .gk-count-card__val small,
body.gk .gk-tc__reading { color: var(--gk-fg-mute); }
body.gk .gk-count-card__val b { color: var(--gk-fg); }
body.gk .gk-card--top .gk-card__count { color: var(--gk-gold-lt); }
body.gk .pb-bar { background: rgba(244, 239, 227, .14); }
body.gk .pb-bar__fill { background: linear-gradient(90deg, var(--gk-gold-dp), var(--gk-gold-lt)); }

/* 画像面は黒に近いグレーで統一（明るい白背景を排除） */
body.gk .gk-card__img,
body.gk .gk-thumb { background: linear-gradient(160deg, #221B33, #16111F); }
body.gk .gk-thumb { border-color: rgba(244, 239, 227, .12); }
body.gk .gk-thumb__badge { background: var(--gk-gold); color: #1A1424; border-color: #16111F; }

/* ゲージ */
body.gk .gk-gauge__ring::before { background: #14101F; }
body.gk .gk-gauge--hero {
  background: linear-gradient(135deg, #1B1430, #0D0A16);
  border-color: var(--gk-line-st);
}
body.gk .gk-gauge__ring { background: conic-gradient(var(--col) calc(var(--val) * 1%), rgba(244, 239, 227, .12) 0); }

/* チームカード */
body.gk .gk-tc__gacha { background: var(--gk-gold); color: #1A1424; }
body.gk .gk-tc__member,
body.gk .gk-tc__div-chip { background: rgba(244, 239, 227, .08); color: var(--gk-fg-dim); }
body.gk .gk-tc__div-chip b { color: var(--gk-fg); }
body.gk .gk-tc__more { color: var(--gk-gold-lt); }

/* 安定指数の解説 */
body.gk .gk-formula__summary { color: var(--gk-fg-mute); }
body.gk .gk-formula__summary:hover,
body.gk .gk-formula[open] .gk-formula__summary { color: var(--gk-gold-lt); }
body.gk .gk-formula__body { color: var(--gk-fg-dim); }
body.gk .gk-formula__body h4 { border-left-color: var(--gk-gold); color: var(--gk-fg); }
body.gk .gk-formula__body b { color: var(--gk-fg); }
body.gk .gk-formula__body code { background: rgba(244, 239, 227, .08); color: var(--gk-gold-lt); }
body.gk .gk-formula__table th,
body.gk .gk-formula__table td { border-color: rgba(244, 239, 227, .12); }
body.gk .gk-formula__table th { background: rgba(244, 239, 227, .05); color: var(--gk-fg); }
body.gk .gk-formula__note { color: var(--gk-fg-mute); }

/* 並べ替えチップ */
body.gk .gk-sort__btn {
  background: rgba(244, 239, 227, .06);
  border-color: rgba(244, 239, 227, .14);
  color: var(--gk-fg-dim);
}
body.gk .gk-sort__btn.is-active {
  background: linear-gradient(120deg, #FBEFC4, #E9C15C 45%, #C79B34);
  color: #1A1424;
  border-color: transparent;
}

/* 大会セレクタ（ドロップダウン） */
body.gk .tm-dd__trigger { background: #0F0B17; border-color: rgba(244, 239, 227, .2); color: var(--gk-fg); }
body.gk .tm-dd__trigger:hover { border-color: var(--gk-line-st); }
body.gk .tm-dd--pill .tm-dd__trigger { border-color: rgba(15, 11, 23, .5); }
body.gk .tm-dd[data-open] .tm-dd__trigger,
body.gk .tm-dd--pill.tm-dd[data-open] .tm-dd__trigger {
  border-color: var(--gk-gold);
  box-shadow: 0 0 0 2px rgba(233, 193, 92, .25);
}
body.gk .tm-dd__label--placeholder { color: var(--gk-fg-mute); }
body.gk .tm-dd__arrow { color: var(--gk-fg-mute); }
body.gk .tm-dd__panel { background: rgba(15, 11, 23, .97); border-color: var(--gk-line); }
body.gk .tm-dd__item { color: var(--gk-fg-dim); }
body.gk .tm-dd__item:hover { background: rgba(155, 107, 240, .22); color: var(--gk-fg); }
body.gk .tm-dd__item.is-selected { background: rgba(233, 193, 92, .18); color: var(--gk-gold-lt); }
body.gk .tm-dd__empty { color: var(--gk-fg-mute); }

/* チーム詳細モーダル */
body.gk .gk-modal { background: #100C1B; border: 1px solid var(--gk-line-st); color: var(--gk-fg); }
body.gk .gk-modal__close { background: rgba(244, 239, 227, .1); color: var(--gk-fg); }
body.gk .gk-modal__close:hover { background: rgba(244, 239, 227, .2); }
body.gk .gk-modal__reading,
body.gk .gk-modal__label,
body.gk .gk-mc__tw,
body.gk .gk-haul__label { color: var(--gk-fg-mute); }
body.gk .gk-modal__label { border-bottom-color: rgba(244, 239, 227, .12); }
body.gk .gk-modal__gacha { background: var(--gk-gold); color: #1A1424; }
body.gk .gk-modal__motto { color: var(--gk-fg-dim); }
body.gk .gk-mc { background: rgba(244, 239, 227, .06); }
body.gk .gk-mc__tw:hover { color: var(--gk-gold-lt); }

/* ステータス表示 */
body.gk .gk-status { color: var(--gk-fg-mute); }

/* ============================================================
   ガチャキングシミュレーター（準備中プレースホルダ）
   ============================================================ */
.gk-soon {
  position: relative;
  overflow: hidden;
  margin-top: var(--pb-space-6);
  padding: var(--pb-space-16) var(--pb-space-6);
  text-align: center;
  border-radius: var(--pb-radius);
  background:
    radial-gradient(420px 220px at 100% 120%, rgba(233, 193, 92, .22), transparent 65%),
    linear-gradient(140deg, rgba(91, 71, 168, .28), rgba(20, 16, 32, .9));
  border: 1.5px dashed rgba(233, 193, 92, .34);
}
.gk-soon__icon {
  font-size: 64px;
  background: linear-gradient(120deg, var(--gk-purple-lt), var(--gk-gold-lt));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gk-soon h2 { font-size: 28px; font-weight: var(--pb-fw-black); margin: var(--pb-space-3) 0 var(--pb-space-2); }
.gk-soon p  { font-size: 16px; line-height: 1.9; color: var(--gk-fg-dim); margin: 0 auto; max-width: 560px; }

/* ============================================================
   ガチャキングシミュレーター
   上から ガチャボタン → 結果画像 → シェア
   結果はテキストを出さず、画像のみで見せる
   ============================================================ */
.gk-sim { margin-top: var(--pb-space-6); }

/* ── ガチャボタン ── */
.gk-sim__gacha { text-align: center; margin-bottom: var(--pb-space-6); }
.gk-sim__roll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--pb-font);
  font-size: 21px;
  font-weight: var(--pb-fw-black);
  padding: 16px 44px;
  border: none;
  border-radius: var(--pb-radius-full);
  cursor: pointer;
  color: #1A1424;
  background: linear-gradient(120deg, #FBEFC4, #E9C15C 45%, #C79B34);
  box-shadow: 0 14px 32px rgba(233, 193, 92, .38);
  transition: transform .16s ease, box-shadow .2s ease, opacity .2s ease;
}
.gk-sim__roll .pb-icon { font-size: 26px; }
.gk-sim__roll:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(233, 193, 92, .5); }
.gk-sim__roll:active:not(:disabled) { transform: translateY(1px); }
.gk-sim__roll:disabled { opacity: .55; cursor: progress; }
.gk-sim__status { margin: var(--pb-space-3) 0 0; font-size: 14px; color: #FF9B9B; min-height: 1em; }

/* ── 結果画像 ── */
.gk-sim__canvas-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--pb-radius);
  overflow: hidden;
  border: 1px solid var(--gk-line-st);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.gk-sim__canvas-wrap canvas { width: 100%; height: auto; display: block; }

/* ============================================================
   抽選中モーション（結果画像に重ねる）
   ============================================================ */
.gk-fx {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pb-space-5);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .32s ease, visibility .32s;
  /* 下の結果画像が透けると切り替わりが見えてしまうため、完全な不透明にする */
  background: linear-gradient(150deg, #2E2352, #08070C);
}
.gk-fx.is-on,
.gk-fx.is-idle { opacity: 1; visibility: visible; }

/* 抽選前の待機表示。空のテンプレート画像を見せないためのフタも兼ねる。
   動きのある要素と「GACHA!!」は伏せ、静かな案内だけを出す */
.gk-fx.is-idle .gk-fx__sweep,
.gk-fx.is-idle .gk-fx__ring,
.gk-fx.is-idle .gk-fx__label { display: none; }
.gk-fx.is-idle .gk-fx__aurora { opacity: .45; animation-duration: 16s; }
.gk-fx.is-idle .gk-capsule { animation: gk-idle-float 3.4s ease-in-out infinite; }
@keyframes gk-idle-float {
  0%, 100% { transform: translateY(0)    rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}

.gk-fx__idle {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--pb-space-5);
  text-align: center;
}
.gk-fx.is-idle .gk-fx__idle { display: flex; }
.gk-fx__idle-title {
  font-size: 24px;
  font-weight: var(--pb-fw-black);
  color: var(--gk-gold-lt);
}
.gk-fx__idle-text { font-size: 14px; line-height: 1.7; color: var(--gk-fg-dim); }

/* 背後でゆっくり回るオーロラ（金×紫のエネルギー） */
.gk-fx__aurora {
  position: absolute;
  width: 190%; height: 190%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(233, 193, 92, 0) 0deg,
    rgba(233, 193, 92, .30) 55deg,
    rgba(155, 107, 240, .34) 130deg,
    rgba(255, 216, 77, 0) 200deg,
    rgba(155, 107, 240, .28) 275deg,
    rgba(233, 193, 92, 0) 360deg);
  filter: blur(38px);
  animation: gk-fx-rotate 5.5s linear infinite;
}
@keyframes gk-fx-rotate { to { transform: rotate(360deg); } }

/* 斜めに走るゴールドの光 */
.gk-fx__sweep {
  position: absolute;
  top: -60%; left: -70%;
  width: 55%; height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 246, 220, .10) 35%,
    rgba(255, 246, 220, .55) 50%,
    rgba(255, 246, 220, .10) 65%,
    transparent);
  filter: blur(6px);
  animation: gk-fx-sweep 1.15s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes gk-fx-sweep {
  0%   { left: -70%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

/* 中央で回るゴールドのリング */
.gk-fx__ring {
  position: absolute;
  width: 210px; height: 210px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(233, 193, 92, 0) 0deg,
    var(--gk-gold-lt) 70deg,
    rgba(233, 193, 92, 0) 150deg,
    rgba(155, 107, 240, 0) 210deg,
    var(--gk-purple-lt) 290deg,
    rgba(155, 107, 240, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  animation: gk-fx-rotate 1.1s linear infinite;
}

/* カプセル（中央でガタガタ震える） */
.gk-capsule {
  position: relative;
  z-index: 1;
  display: block;
  width: 122px; height: 122px;
  animation: gk-capsule-shake .62s cubic-bezier(.36,.07,.19,.97) infinite;
}
.gk-capsule__ball {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, rgba(255,255,255,.55) 12%, transparent 42%),
    linear-gradient(150deg, #B18BFF 0%, #7B4FE0 45%, #3E2A7A 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), inset 0 -12px 24px rgba(0, 0, 0, .35);
}
/* カプセルの合わせ目 */
.gk-capsule__shine {
  position: absolute;
  left: 4%; right: 4%; top: 48%;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
}
.gk-capsule__star {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: var(--gk-yellow);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
}
@keyframes gk-capsule-shake {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  15%  { transform: translate(-8px,3px) rotate(-12deg) scale(1.03); }
  32%  { transform: translate(7px,-4px) rotate(10deg) scale(.97); }
  50%  { transform: translate(-6px,4px) rotate(-8deg) scale(1.05); }
  68%  { transform: translate(5px,-3px) rotate(7deg) scale(.98); }
  85%  { transform: translate(-3px,2px) rotate(-4deg) scale(1.02); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}

/* GACHA!! のラベル */
.gk-fx__label {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: var(--pb-fw-black);
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--gk-gold-lt);
  text-shadow: 0 2px 14px rgba(233, 193, 92, .55);
  animation: gk-fx-pulse 1.15s ease-in-out infinite;
}
.gk-fx__label em { font-style: normal; color: var(--gk-yellow); }
@keyframes gk-fx-pulse {
  0%, 100% { opacity: .62; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* 結果確定時のフラッシュ */
.gk-fx__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, #FFFFFF, rgba(255, 246, 220, .5) 40%, transparent 72%);
}
.gk-fx__flash.is-on { animation: gk-fx-flash .55s ease-out; }
@keyframes gk-fx-flash {
  0%   { opacity: .95; transform: scale(1.04); }
  100% { opacity: 0;   transform: scale(1); }
}

/* ── シェア（保存 → シェアの順） ── */
.gk-sim__outro { margin-top: var(--pb-space-6); }
.gk-sim__outro[hidden] { display: none; }

.gk-sim__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pb-space-3);
  margin-top: var(--pb-space-4);
}
.gk-sim__arrow { color: var(--gk-fg-mute); font-size: 26px; }

/* 手順番号のバッジ */
.gk-btn__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: var(--pb-fw-black);
  line-height: 1;
  flex: 0 0 auto;
}

/* 保存は必須手順なので、ガチャボタンと同格のゴールドで主役にする */
.gk-btn--save {
  font-size: 19px;
  font-weight: var(--pb-fw-black);
  padding: 15px 34px;
  background: linear-gradient(120deg, #FBEFC4, #E9C15C 45%, #C79B34);
  color: #1A1424;
  box-shadow: 0 12px 30px rgba(233, 193, 92, .38);
}
.gk-btn--save .gk-btn__step { background: #1A1424; color: var(--gk-gold-lt); }
.gk-btn--save .pb-icon { font-size: 24px; }
.gk-btn--save:hover { transform: translateY(-2px); gap: 14px; box-shadow: 0 18px 38px rgba(233, 193, 92, .5); }
/* X ブランドに寄せた黒地＋白文字（body.gk a の color 継承より優先させる） */
body.gk .gk-btn--x {
  background: #000000;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
body.gk .gk-btn--x:hover {
  background: #17171A;
  border-color: #FFFFFF;
  transform: translateY(-2px);
  gap: 15px;
}
/* 保存が必須である旨は見落とされやすいので、注意喚起として目立たせる */
.gk-sim__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--pb-space-3) var(--pb-space-5);
  border-radius: var(--pb-radius);
  background: rgba(255, 216, 77, .10);
  border: 1px solid rgba(255, 216, 77, .42);
  color: var(--gk-fg);
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}
.gk-sim__note .pb-icon { flex: 0 0 auto; font-size: 22px; color: var(--gk-yellow); margin-top: 1px; }
.gk-sim__note b { color: var(--gk-yellow); font-weight: var(--pb-fw-bold); }

@media (prefers-reduced-motion: reduce) {
  .gk-fx__aurora, .gk-fx__sweep, .gk-fx__ring,
  .gk-capsule, .gk-fx__label, .gk-fx__flash.is-on { animation: none; }
}

/* ============================================================
   シミュレーター：広い画面は 左＝操作 ／ 右＝生成画像 の2カラム
   DOM順は ガチャ → 画像 → シェア のままなので、
   狭い画面ではそのまま縦積みになる
   ============================================================ */
@media (min-width: 900px) {
  .gk-sim {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 560px);
    /* 画像が2行にまたがるため、1行目を操作の高さに固定して
       余りを2行目へ寄せる（そうしないと左カラムが間延びする） */
    grid-template-rows: min-content 1fr;
    gap: var(--pb-space-5) var(--pb-space-6);
    align-items: start;
  }
  .gk-sim__gacha {
    grid-column: 1; grid-row: 1;
    margin-bottom: 0;
    text-align: left;
  }
  .gk-sim__outro {
    grid-column: 1; grid-row: 2;
    margin-top: 0;
  }
  .gk-sim__canvas-wrap {
    grid-column: 2; grid-row: 1 / span 2;
    max-width: none;
    margin: 0;
  }
  /* 左カラムは幅が限られるため、保存→シェアは縦積みにして
     中途半端な折り返しを防ぐ（矢印も下向きにする） */
  .gk-sim__share {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pb-space-2);
  }
  .gk-sim__share .gk-btn { width: 100%; max-width: 320px; justify-content: center; }
  .gk-sim__arrow { transform: rotate(90deg); font-size: 22px; margin-left: 140px; }
  .gk-sim__note  { margin: 0; max-width: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .gk-hero { padding: var(--pb-space-10) var(--pb-space-5); }
  .gk-hero__title { font-size: 36px; }
  .gk-hero__lead  { font-size: 18px; }
  .gk-hero__sub   { font-size: 15px; }
  .gk-stage__title { font-size: 24px; }
  .gk-section-heading { font-size: 24px; margin-top: var(--pb-space-10); }
  .gk-subtab { font-size: 15px; padding: 7px 18px; }
  .gk-spec__row { grid-template-columns: 1fr; gap: 6px; padding: var(--pb-space-4) var(--pb-space-5); }
  .gk-tool { padding: var(--pb-space-4); }
  .gk-tool__title { font-size: 20px; }
  .gk-tournament .tm-dd { flex: 1 1 100%; max-width: none; }
  .gk-sim__roll { font-size: 18px; padding: 14px 32px; }
  .gk-capsule { width: 92px; height: 92px; }
  .gk-capsule__star { font-size: 38px; }
  .gk-fx__ring { width: 158px; height: 158px; }
  .gk-fx__label { font-size: 22px; }
  body.gk .pb-navbar__menu .pb-navbar__item--active { background: transparent; }
}

/* 保存とシェアが横並びで収まらない幅では、折り返しではなく縦積みにする。
   矢印も下向きにして 保存 → シェア の順序を保つ */
@media (max-width: 600px) {
  .gk-sim__share {
    flex-direction: column;
    gap: var(--pb-space-2);
  }
  .gk-sim__share .gk-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
  .gk-sim__arrow { transform: rotate(90deg); font-size: 22px; }
  .gk-sim__note { font-size: 14px; padding: var(--pb-space-3) var(--pb-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .gk-stage { animation: none; }
}

/* ============================================================
   ページローダー（ガチャキング）
   PLAYER BASE ブランドページとは別の演出。site.js が body.gk を見て
   どちらを出すかを決め、初回判定のキーも別に持つ。
   ロゴが降りてきて、下でガチャ玉が順に弾む。
   ============================================================ */
#gk-page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 38px;
  /* 大会ページの地色に、ゴールドとパープルの光をうっすら重ねる */
  background:
    radial-gradient(circle at 50% 36%, rgba(233, 193, 92, .20), transparent 56%),
    radial-gradient(circle at 50% 82%, rgba(155, 107, 240, .18), transparent 58%),
    #08070C;
  transition: opacity .45s ease, visibility .45s;
}
#gk-page-loader.gk-loader--done { opacity: 0; visibility: hidden; }

.gk-loader__logo {
  width: min(264px, 62vw);
  height: auto;
  filter: drop-shadow(0 8px 28px rgba(233, 193, 92, .36));
  animation: gk-loader-drop .62s cubic-bezier(.2, .9, .3, 1.25) both;
}
@keyframes gk-loader-drop {
  from { opacity: 0; transform: translateY(-18px) scale(.88) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}

/* ガチャ玉。カプセルの見た目はシミュレーターのものに合わせている */
.gk-loader__balls { display: flex; gap: 15px; }
.gk-loader__ball {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 -5px 9px rgba(0, 0, 0, .3);
  animation: gk-loader-bounce 1.05s ease-in-out infinite;
}
.gk-loader__ball:nth-child(1) {
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, rgba(255,255,255,.55) 13%, transparent 44%),
    linear-gradient(150deg, #FFE9A8 0%, #E9C15C 52%, #A97D24 100%);
}
.gk-loader__ball:nth-child(2) {
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, rgba(255,255,255,.55) 13%, transparent 44%),
    linear-gradient(150deg, #B18BFF 0%, #7B4FE0 45%, #3E2A7A 100%);
  animation-delay: .14s;
}
.gk-loader__ball:nth-child(3) {
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, rgba(255,255,255,.55) 13%, transparent 44%),
    linear-gradient(150deg, #FFF0B0 0%, #FFD84D 52%, #C79A18 100%);
  animation-delay: .28s;
}
@keyframes gk-loader-bounce {
  0%, 60%, 100% { transform: translateY(0);     opacity: .55; }
  30%           { transform: translateY(-13px); opacity: 1; }
}

@media (max-width: 600px) {
  #gk-page-loader { gap: 30px; }
  .gk-loader__ball { width: 15px; height: 15px; }
}

/* 動きを控える設定では、静止した状態で見せる */
@media (prefers-reduced-motion: reduce) {
  .gk-loader__logo { animation: none; }
  .gk-loader__ball { animation: none; opacity: 1; }
}