/*
 * public/index.html 用 LP スタイル
 * デザインシステムトークン（--sg-*）は本ファイル内に内包（design-system.css 非依存）
 */

/* =====================================================
   Design Tokens（元: play/assets/css/design-system.css）
   ===================================================== */
:root {
  /* ── カラー: 背景 ─────────────────────────────── */
  --sg-bg-base:    #D7DCE1;
  --sg-bg-panel:   #C4CBD2;
  --sg-bg-panel2:  #B8C0C8;
  --sg-bg-submit:  #1c2224;
  --sg-bg-submit-hover:  #2a3234;
  --sg-bg-cancel:  #c4cbd2;
  --sg-bg-cancel-hover:  #b8c0c8;
  --modal-bg-panel: var(--sg-bg-panel);

  /* ── カラー: テキスト ─────────────────────────── */
  --sg-text-main:  #000;
  --sg-text-sub:   #111516;
  --sg-text-accent: #ffffff;

  /* ── カラー: アクセント ───────────────────────── */
  --sg-accent:     #4E4649;
  --sg-aux-steel:  #111516;

  /* ── カラー: ボーダー ─────────────────────────── */
  --sg-border:     #AEB6BD;
  --sg-hairline:   rgba(31, 36, 41, 0.18);

  /* ── カラー: シャドウ ─────────────────────────── */
  --sg-shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.08);
  --sg-shadow-md:  0 18px 45px rgba(0, 0, 0, 0.12);

  /* ── カラー: 状態色 ───────────────────────────── */
  --sg-error-text:   #7a2b2b;
  --sg-success-text: #2b4f2b;

  /* ── タイポグラフィ ────────────────────────────── */
  --sg-font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                   "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                   "Noto Sans JP", sans-serif;
  --sg-font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "游明朝",
                   "ヒラギノ明朝 ProN", Georgia, "Times New Roman", serif;

  /* ── フォントサイズ ────────────────────────────── */
  --sg-text-xl:    clamp(52px, 7vw, 88px);
  --sg-text-lg:    clamp(28px, 4vw, 42px);
  --sg-text-h2:    22px;
  --sg-text-body:  18px;
  --sg-text-sm:    16px;
  --sg-text-xs:    14px;
  --sg-text-xxs:   14px;

  /* ── 角丸 ─────────────────────────────────────── */
  --sg-radius-sm:   8px;
  --sg-radius-md:   14px;
  --sg-radius-lg:   20px;
  --sg-radius-pill: 999px;

  /* ── レイアウト ────────────────────────────────── */
  --sg-ui-max:    1200px;
  --sg-header-h:      60px;
  --sg-header-safe-h: calc(var(--sg-header-h) + env(safe-area-inset-top, 0px));
  --sg-bottom-h:  92px;

  /* ── 警告色 ────────────────────────────────────── */
  --sg-lamp-warn: #7a4a1e;

  /* ── フォーカスリング ──────────────────────────── */
  --sg-focus-ring: rgba(78, 70, 73, 0.40);

  /* LP 専用 */
  --visual-photo-aspect: 1200 / 800;
}

/* フォーカスリング（インタラクティブ要素共通） */
:focus-visible {
  outline: 3px solid var(--sg-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  height: 100%;
}
body{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sg-bg-base);
  color: var(--sg-text-main);
  font-family: var(--sg-font-sans);
  font-size: var(--sg-text-body);
  line-height: 1.75;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover{
  border-bottom-color: currentColor;
  color: var(--sg-aux-steel);
}

main a{
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.wrap{
  width: min(var(--sg-ui-max), calc(100% - 48px));
  margin: 0 auto;
}

.top-menu{
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--sg-border);
  background: rgba(215,220,225,.72);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  position: relative;
}
/* ログイン画面（auth-card__title）と同一トーンのブランド */
.brand{
  display: flex;
  align-items: center;
  min-width: 0;
}
.brand__title{
  margin: 0;
  font-size: 28px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  color: var(--sg-text-main);
  line-height: 1.1;
}
.nav-links{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.nav-links a{
  font-size: var(--sg-text-xs);
  padding: 8px 10px;
  border-radius: var(--sg-radius-pill);
  border: 1px solid transparent;
  opacity: .82;
}
.nav-links a:hover{
  background: rgba(196,203,210,.55);
  border-color: var(--sg-hairline);
  opacity: 1;
}

.header-menu__toggle{
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--sg-hairline);
  border-radius: var(--sg-radius-sm);
  background: rgba(196,203,210,.55);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}
.header-menu__toggle:focus-visible{
  outline: 2px solid var(--sg-accent);
  outline-offset: 2px;
}
.header-menu__toggle-line{
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--sg-text-main);
}
.header-menu__toggle.is-open{
  background: rgba(184,192,200,.85);
}
.header-menu__panel{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, 100%);
  padding: 10px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-md);
  background: rgba(215,220,225,.98);
  box-shadow: var(--sg-shadow-sm);
  flex-direction: column;
  gap: 4px;
  z-index: 12;
}
.header-menu__panel.is-open{
  display: flex;
}
.header-menu__panel-link{
  display: block;
  font-size: var(--sg-text-xs);
  padding: 8px 10px;
  border-radius: var(--sg-radius-sm);
  border: 1px solid transparent;
}
.header-menu__panel-link:hover,
.header-menu__panel-link:focus-visible{
  background: rgba(196,203,210,.55);
  border-color: var(--sg-hairline);
}
.nav-links a:focus-visible{
  background: rgba(196,203,210,.55);
  border-color: var(--sg-hairline);
  opacity: 1;
}
/* 状態画面 .status-self__levelup-btn と同デザイン（LP 本文の外部リンク用） */
a.lp-submit-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  font-size: var(--sg-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 7px 16px;
  min-height: 44px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-pill);
  border-bottom: 1px solid var(--sg-border);
  background: var(--sg-bg-submit);
  color: var(--sg-text-accent);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.10s ease;
}
a.lp-submit-link:hover{
  background: var(--sg-bg-submit-hover);
  border-color: var(--sg-hairline);
  border-bottom-color: var(--sg-hairline);
  color: var(--sg-text-accent);
}
a.lp-submit-link:focus-visible{
  outline: 3px solid var(--sg-focus-ring);
  outline-offset: 2px;
}

.hero {
  padding: 72px 0 44px;
  border-bottom: 1px solid var(--sg-hairline);
}
.hero.page-index{
  background: url("../img/hero01.jpg") center / cover no-repeat;
}
.hero.page-rulebook{
  background:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    url("../img/hero02.jpg") center / cover no-repeat;
}

.hero.page-ep00{
  background:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    url("../img/ep00_header.jpg") center / cover no-repeat;
}

.hero.page-worlds{
  background:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    url("../img/hero01.jpg") center / cover no-repeat;
}

.episode-illust{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
  border: 1px solid var(--sg-hairline);
  border-radius: var(--sg-radius-md);
  background: rgba(0, 0, 0, 0.04);
}

.episode-illust-wrap{
  position: relative;
  margin-top: 12px;
}

.episode-illust-wrap .episode-illust{
  margin-top: 0;
}

.episode-illust-title{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;

  font-family: var(--sg-font-serif);
  font-size: 28px;
  font-size: clamp(14px, 4.4vw, 28px);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.05;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  text-transform: none;
  white-space: nowrap;
}

/* =====================================================
   worlds.html: 画像＋説明の並び
   ===================================================== */
.worlds-entry{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 768px) {
  .worlds-entry{
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
  }
}

.worlds-entry__media{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.worlds-entry__media img{
  display: block;
  width: 100%;
  height: auto;
}

.worlds-entry__placeholder{
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-style: dashed;
}

.worlds-entry__placeholder-text{
  font-family: var(--sg-font-serif);
  letter-spacing: 0.14em;
  color: var(--sg-text-sub);
  padding: 6px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* ヒーロー見出しを1行に保ち、狭い幅では文字サイズだけ縮小（cqi は .wrap の幅基準） */
.hero .wrap{
  container-type: inline-size;
}
/* ロビー .lobby-screen-title__text と同系（最先浅領域などの画面名タイトル） */
.hero h1{
  font-family: var(--sg-font-serif);
  font-size: 32px;
  font-size: clamp(10px, 5.2cqi, 32px);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.05;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  text-transform: none;
  margin-bottom: 10px;
  white-space: nowrap;
}
.hero .subtitle{
  display:inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-pill);
  color: var(--sg-text-sub);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  background: rgba(215,220,225,.35);
}
.hero .meta{
  margin-top: 16px;
  font-size: var(--sg-text-xs);
  color: rgba(255, 255, 255, 1);
  opacity: .86;
}

main{
  flex: 1 0 auto;
  padding: 40px 0 16px;
}
.section{
  padding: 44px 0;
  border-bottom: 1px solid var(--sg-hairline);
}
.section-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: var(--sg-text-xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sg-aux-steel);
  opacity: .92;
  margin-bottom: 12px;
}
.tag::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: var(--sg-radius-pill);
  background: var(--sg-accent);
  box-shadow: none;
  opacity: .92;
}

.section h2{
  font-size: var(--sg-text-h2);
  font-weight: 780;
  margin-bottom: 12px;
  letter-spacing: .01em;
}
.section p{
  color: var(--sg-text-sub);
  font-size: var(--sg-text-body);
  margin-bottom: 10px;
}

/* LP: 機能カードグリッド */
.feature-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.feature-cards .panel{
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: rgba(196, 203, 210, 0.6);
  padding: 14px;
  box-shadow: var(--sg-shadow-sm);
}
.feature-cards .visual{
  margin-bottom: 12px;
  max-width: 100%;
}
.feature-cards h3{
  font-size: var(--sg-text-sm);
  margin-bottom: 8px;
}
.feature-cards p{
  margin-bottom: 0;
  font-size: var(--sg-text-sm);
  line-height: 1.65;
}

.spec-section .panel{
  margin-top: 0;
}
.spec-section .spec-list{
  margin: 0;
}
.spec-section .spec-list dt{
  font-size: var(--sg-text-sm);
  font-weight: 700;
  color: var(--sg-aux-steel);
  margin-top: 14px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.spec-section .spec-list dt:first-of-type{
  margin-top: 0;
}
.spec-section .spec-list dd{
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(78, 70, 73, 0.32);
  color: var(--sg-text-sub);
  font-size: var(--sg-text-body);
  line-height: 1.65;
}

.visual{
  border-radius: var(--sg-radius-lg);
  border: 1px solid var(--sg-border);
  background: linear-gradient(135deg, rgba(31,36,41,.05), rgba(31,36,41,.00)),
              radial-gradient(520px 220px at 20% 30%, rgba(74,84,89,.14), transparent 60%),
              radial-gradient(520px 220px at 70% 10%, rgba(78,70,73,.10), transparent 62%),
              var(--sg-bg-panel);
  box-shadow: var(--sg-shadow-md);
  min-height: 220px;
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
}
.visual--photo{
  padding: 0;
  background: var(--sg-bg-panel);
  min-height: unset;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--visual-photo-aspect);
}
/* LP 2カラム時：縮小画像を列内で一段小さく（拡大ダイアログは元解像度のまま） */
.section-grid .visual.visual--photo{
  max-width: 85%;
  justify-self: center;
}
.visual__zoom-trigger{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.visual__zoom-trigger:focus-visible{
  outline: 3px solid var(--sg-focus-ring);
  outline-offset: 2px;
}
.visual__zoom-trigger .visual__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.visual .caption{
  position:absolute;
  left: 18px;
  bottom: 16px;
  font-size: var(--sg-text-xs);
  color: var(--sg-text-sub);
  letter-spacing: .06em;
  z-index: 1;
}
.visual--photo .caption{
  color: var(--sg-text-accent);
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.visual .ghostline{
  position:absolute;
  inset: 18px;
  border: 1px dashed var(--sg-hairline);
  border-radius: var(--sg-radius-md);
  pointer-events:none;
  z-index: 1;
}
.visual--photo .ghostline{
  border-color: rgba(255,255,255,.22);
}

.visual-lightbox{
  margin: auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border: none;
  max-width: min(96vw, 1400px);
  width: max-content;
  background: rgba(22, 26, 30, 0.96);
  color: var(--sg-text-accent);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-md);
}
.visual-lightbox::backdrop{
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.visual-lightbox__img{
  display: block;
  max-width: min(92vw, 1200px);
  max-height: min(85vh, 800px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--sg-radius-md);
}

footer{
  padding: 0;
}
.site-footer{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--sg-hairline);
  background: linear-gradient(
    180deg,
    rgba(196, 203, 210, 0.12) 0%,
    rgba(196, 203, 210, 0.28) 100%
  );
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.footer-deep{
  padding-top: 28px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 100%;
}
.lp-thanks-card{
  margin-top: 0;
  border: 1px solid rgba(174, 182, 189, 0.55);
  border-radius: var(--sg-radius-lg);
  background: rgba(196, 203, 210, 0.78);
  box-shadow: var(--sg-shadow-md);
  padding: 22px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lp-thanks-card__heading{
  margin: 0 0 12px;
  font-size: var(--sg-text-h2);
  font-weight: 700;
  color: var(--sg-text-main);
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.lp-thanks-card__text{
  margin: 0;
  font-size: var(--sg-text-body);
  color: var(--sg-text-sub);
  line-height: 1.75;
}
.lp-participants{
  margin-top: 18px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: rgba(255, 255, 255, 0.45);
}
.lp-participants__summary{
  padding: 12px 16px;
  font-size: var(--sg-text-sm);
  font-weight: 700;
  color: var(--sg-text-main);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lp-participants__summary::-webkit-details-marker{
  display: none;
}
.lp-participants__summary::before{
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 0.75em;
  transition: transform 0.2s ease;
}
.lp-participants[open] .lp-participants__summary::before{
  transform: rotate(90deg);
}
.lp-participants__list{
  margin: 0;
  padding: 14px 16px 16px 2em;
  border-top: 1px solid var(--sg-hairline);
  max-height: min(40vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--sg-text-sm);
  color: var(--sg-text-sub);
  line-height: 1.55;
  list-style-position: outside;
}
.lp-participants__list li + li{
  margin-top: 4px;
}
.footer-credits{
  margin: 0;
  padding: 0 0 8px;
  border-top: 1px solid var(--sg-hairline);
  padding-top: 24px;
}
.footer-credits h2{
  font-size: var(--sg-text-h2);
  font-weight: 700;
  color: var(--sg-text-main);
  margin: 0 0 14px;
  letter-spacing: 0.03em;
}
.footer-credits p{
  margin: 0 0 10px;
  font-size: var(--sg-text-body);
  color: var(--sg-text-sub);
  line-height: 1.65;
}
.footer-credits p:last-child{
  margin-bottom: 0;
}
.footer-credits a{
  color: var(--sg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-credits a:hover,
.footer-credits a:focus-visible{
  color: var(--sg-text-main);
}
.site-footer .footer-inner{
  border-top: 1px solid var(--sg-hairline);
  padding-top: 20px;
  padding-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
}
.footer-note{
  color: var(--sg-text-sub);
  font-size: var(--sg-text-sm);
  opacity: .86;
}
.copyright{
  color: var(--sg-text-sub);
  font-size: var(--sg-text-sm);
  letter-spacing: .08em;
  font-weight: 700;
}

@media (max-width: 900px){
  .section-grid{ grid-template-columns: 1fr; }
  .section-grid .visual.visual--photo{
    max-width: 100%;
    justify-self: stretch;
  }
  .visual:not(.visual--photo){
    min-height: 200px;
  }
}
@media (max-width: 520px){
  .wrap{ width: calc(100% - 30px); }
  .hero{ padding: 56px 0 34px; }
  .top-menu{ padding: 14px 0 10px; }
  .nav-links{ display: none; }
  .header-menu__toggle{ display: inline-flex; }
  .footer-deep{
    padding-top: 22px;
    gap: 28px;
  }
  .lp-thanks-card{
    padding: 18px 16px;
  }
}
@media (max-width: 480px){
  .brand__title{
    font-size: 24px;
  }
  .feature-cards{
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   rulebook.html 専用スタイル（不足分のみ）
   ===================================================== */
main#main{
  padding-top: 28px;
}
main#main section + section{
  margin-top: 28px;
}
main#main h1,
main#main h2{
  line-height: 1.4;
}
main#main h1{
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 10px;
}
main#main h2{
  margin-bottom: 10px;
}
main#main p{
  margin-bottom: 12px;
}
main#main .lead{
  font-weight: 700;
}
main#main .panel{
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-md);
  background: rgba(196, 203, 210, 0.62);
  box-shadow: var(--sg-shadow-sm);
}
main#main .blockquote{
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 4px solid var(--sg-accent);
  background: rgba(255, 255, 255, 0.36);
  border-radius: 0 var(--sg-radius-sm) var(--sg-radius-sm) 0;
}
main#main ul,
main#main ol{
  margin: 8px 0 12px 1.4em;
}
main#main li + li{
  margin-top: 6px;
}
main#main .handover-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
main#main .handover-grid__column{
  margin-top: 0;
}
main#main hr{
  border: 0;
  border-top: 1px solid var(--sg-hairline);
  margin: 14px 0;
}
@media (max-width: 900px){
  main#main .handover-grid{
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   closed.html 専用スタイル
   ===================================================== */
:root {
  --closed-bg: #0b1016;
  --closed-panel: rgba(27, 34, 44, 0.86);
  --closed-panel-soft: rgba(18, 24, 33, 0.72);
  --closed-border: rgba(173, 190, 212, 0.24);
  --closed-text: #d5dce5;
  --closed-text-soft: #a9b3bf;
  --closed-accent: #c8d8ed;
}

body.closed-page {
  background: radial-gradient(1200px 600px at 15% -10%, rgba(111, 145, 183, 0.22), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(127, 148, 180, 0.16), transparent 58%),
    var(--closed-bg);
  color: var(--closed-text);
}

.closed-page .top-menu {
  border-bottom-color: var(--closed-border);
  background: rgba(8, 12, 18, 0.82);
}

.closed-page .brand__title,
.closed-page .nav-links a {
  color: var(--closed-text);
}

.closed-page .nav-links a:hover,
.closed-page .nav-links a:focus-visible {
  background: rgba(169, 179, 191, 0.12);
  border-color: rgba(169, 179, 191, 0.24);
}

.hero.page-closed {
  border-bottom-color: var(--closed-border);
  background:
    linear-gradient(rgba(8, 12, 18, 0.78), rgba(8, 12, 18, 0.92)),
    url("/assets/img/teaser_world.jpg") center 45% / cover no-repeat;
}

.hero.page-closed .meta {
  color: rgba(220, 228, 238, 0.9);
}

main.closed-main {
  padding-top: 34px;
  padding-bottom: 44px;
}

.closed-main section + section {
  margin-top: 40px;
}

.closed-main h2 {
  margin-bottom: 10px;
  font-size: clamp(24px, 3.8vw, 34px);
  letter-spacing: 0.05em;
}

.closed-intro {
  color: var(--closed-text-soft);
  margin-bottom: 10px;
}

.closed-main .panel {
  margin-top: 12px;
  border: 1px solid var(--closed-border);
  border-radius: var(--sg-radius-md);
  background: var(--closed-panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.closed-page .final-record-panel {
  display: grid;
  gap: 18px;
}

.closed-page .final-record-panel p {
  margin: 0;
  line-height: 1.95;
  color: var(--closed-text);
}

.closed-page .final-record-panel .line-strong {
  color: var(--closed-accent);
  font-weight: 700;
}

.closed-page .teaser-brand-title {
  margin-top: 20px;
  text-align: center;
  font-family: Impact, Charcoal, sans-serif;
  font-size: clamp(2rem, 7vw, 4rem);
  color: rgba(212, 222, 235, 0.9);
  letter-spacing: 0.03em;
}

.closed-page .teaser-section-img {
  border: 1px solid var(--closed-border);
  border-radius: var(--sg-radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.closed-page .echo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 20px;
}

.closed-page .echo-card {
  gap: 10px;
  background: var(--closed-panel-soft);
}

.closed-page .echo-card h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--closed-accent);
}

.closed-page .echo-card p {
  margin: 0;
  color: var(--closed-text);
  line-height: 1.8;
}

.closed-page .explorers-panel {
  background: rgba(15, 22, 30, 0.9);
}

.closed-page .explorer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.closed-page .explorer-list li {
  border: 1px solid rgba(169, 179, 191, 0.2);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.95rem;
  color: var(--closed-text);
  background: rgba(169, 179, 191, 0.08);
}

.closed-page .site-footer {
  border-top-color: var(--closed-border);
  background: rgba(8, 12, 18, 0.9);
}

.closed-page .footer-note {
  color: var(--closed-text-soft);
}

@media (min-width: 768px) {
  .closed-page .echo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .closed-page .echo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .closed-page .explorer-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =====================================================
   episode (public/episode/*.html) 用: Echoカード一覧
   ===================================================== */
.echo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 20px;
}

@media (max-width: 479px) {
  .echo-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 480px) {
  .echo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .echo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .closed-page .explorer-list {
    grid-template-columns: 1fr;
  }
}