/* 式神符陣 トップ (/ in the public build) — what the game is, and the ways in.
   Rides on play/guide.css for the tokens, the header and the fonts. */

.w-body { line-height: 1.8; }
.w-body > main { overflow-x: clip; }


.w-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.w-cta.is-center { justify-content: center; }
.w-btn-main, .w-btn-sub {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; text-decoration: none;
  padding: 14px 28px; border-radius: 6px; font-family: var(--font-mincho); font-weight: 800; letter-spacing: 0.08em; line-height: 1.3;
}
.w-btn-main small, .w-btn-sub small { font-family: var(--font-gothic); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; opacity: 0.8; }
.w-btn-main {
  font-size: 21px; color: var(--bg-deep); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 70%, var(--gold-dim));
  box-shadow: 0 10px 30px oklch(80% 0.12 85 / 0.25), inset 0 1px 0 oklch(100% 0 0 / 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.w-btn-main:hover { transform: translateY(-2px); box-shadow: 0 14px 36px oklch(80% 0.12 85 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.5); }
.w-btn-sub { font-size: 16px; color: var(--text); border: 1px solid var(--gold-line); background: var(--lacquer); }
.w-btn-sub:hover { border-color: var(--gold); }
/* ------------------------------------------------------------ 11/15: the first view
   ロゴ → 遊び方動画 → AIと対戦 → CF支援。no decorative board/cards: the visitor comes from the CF page already sold */
.w-top { max-width: 680px; margin: 0 auto; padding: 14px 16px 36px; text-align: center; }
/* the big logo below is the title: the header keeps only its links (on a phone the whole header goes, see below) */
.w-body .g-head { justify-content: flex-end; }
.w-body .g-brand { display: none; }
.w-title { margin: 0 0 10px; line-height: 0; }
.w-logo { display: inline-block; width: min(260px, 70%); height: auto; filter: drop-shadow(0 6px 22px oklch(0% 0 0 / 0.55)); }
.w-top .w-video { margin: 0 auto; max-width: 640px; }
.w-dev-note {
  display: inline-block; margin: 0 0 14px; padding: 4px 14px; border: 1px solid var(--gold-line); border-radius: 999px;
  font-size: 13.5px; line-height: 1.5; color: var(--text); background: oklch(100% 0 0 / 0.04); text-wrap: balance;
}
.w-video-h { margin: 0 0 8px; font-family: var(--font-mincho); font-weight: 800; font-size: 24px; letter-spacing: 0.12em; line-height: 1.3; color: var(--text); }
.w-video-h small { margin-left: 0.7em; font-family: var(--font-gothic); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--gold); }
.w-video-cap { margin: 6px 0 16px; font-size: 13px; color: var(--text-dim); }
.w-top .w-cta { justify-content: center; }
html[data-cf-url] .w-top .cf-link { margin: 14px auto 0; }
.w-top .cf-soon { margin: 14px auto 0; }
.w-about .w-facts { margin: 0 0 22px; }

/* ------------------------------------------------------------ sections */
.w-sec { max-width: 1180px; margin: 0 auto; padding: 56px 16px 24px; border-top: 1px solid oklch(100% 0 0 / 0.06); }
.w-sec h2, .w-final h2 { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 20px; letter-spacing: 0.06em; line-height: 1.4; }
.w-sec-kicker { display: block; font-size: 14px; color: var(--gold); letter-spacing: 0.4em; font-weight: 700; margin-bottom: 4px; }
.w-sec-lead { color: var(--text-dim); margin: -6px 0 22px; }
.w-sec-lead b { color: var(--text); }
.w-more { margin: 18px 0 0; }
.w-more a { font-size: 14.5px; }

.w-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.w-steps li { position: relative; padding: 22px 22px 18px; background: var(--lacquer); border: 1px solid oklch(100% 0 0 / 0.08); border-radius: 10px; }
.w-step-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; font-family: var(--font-mincho); font-weight: 800; font-size: 20px;
  color: var(--bg-deep); background: linear-gradient(145deg, var(--gold-hi), var(--gold)); border-radius: 50%;
}
.w-steps h3 { font-family: var(--font-mincho); font-weight: 800; font-size: 21px; margin: 10px 0 6px; color: var(--gold-hi); letter-spacing: 0.08em; }
.w-steps p { margin: 0; font-size: 15px; color: var(--text-dim); }
.w-steps p b { color: var(--text); }

.w-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 170px; gap: 14px; overflow-x: auto; padding: 6px 2px 16px;
  scroll-snap-type: x mandatory; scrollbar-color: var(--gold-dim) transparent;
}
.w-strip img { width: 170px; border-radius: 9px; scroll-snap-align: start; box-shadow: 0 10px 24px oklch(0% 0 0 / 0.5); transition: transform 0.15s ease; }
.w-strip img:hover { transform: translateY(-4px); }

.w-final {
  max-width: 1180px; margin: 48px auto 0; padding: 48px 16px; text-align: center;
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
  background: radial-gradient(60% 120% at 50% 0%, oklch(30% 0.05 80 / 0.25), transparent 70%);
}
.w-final p { color: var(--text-dim); margin: -6px 0 22px; }
.w-foot { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; text-align: center; font-size: 12.5px; color: var(--text-dim); }
.w-foot p { margin: 0; }

/* ------------------------------------------------------------ narrow */
@media (max-width: 920px) {
  .w-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .w-cta { flex-direction: column; }
  .w-btn-main, .w-btn-sub { align-items: center; text-align: center; }
  .w-strip { grid-auto-columns: 132px; }
  .w-strip img { width: 132px; }
  .w-sec { padding-top: 40px; }
  /* the big logo is the header here: drop the small one and its nav (every link is in the first view) */
  .w-body .g-head { display: none; }
  .w-top { padding-top: 12px; padding-bottom: 28px; }
  .w-title { margin-bottom: 4px; }
  .w-logo { width: 176px; }
  .w-video-h { font-size: 20px; margin-bottom: 6px; }
  .w-dev-note { margin-bottom: 10px; padding: 3px 12px; font-size: 12px; border-radius: 10px; }
  .w-video-cap { margin: 4px 0 12px; font-size: 12.5px; }
  .w-top .w-cta { gap: 8px; }
  .w-top .w-btn-main { padding: 10px 16px; font-size: 20px; }
  .w-top .w-btn-sub { padding: 9px 16px; font-size: 15px; }
  html[data-cf-url] .w-top .cf-link, .w-top .cf-soon { margin-top: 10px; }
}

/* ------------------------------------------------------------ 11/08: the CF launch (facts, video, points, the product) */
.w-facts { list-style: none; margin: -12px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.w-facts li { font-size: 13.5px; padding: 3px 12px; border: 1px solid var(--gold-line); border-radius: 999px; color: var(--text); background: oklch(100% 0 0 / 0.03); }

.w-video { position: relative; max-width: 960px; border-radius: 10px; overflow: hidden; border: 1px solid var(--gold-line); box-shadow: 0 24px 50px oklch(0% 0 0 / 0.55); background: #000; }
.w-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

.w-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.w-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 20px; background: var(--lacquer); border: 1px solid var(--gold-line); border-radius: 10px; }
.w-points .w-step-num { grid-row: span 2; }
.w-point-sub { margin: 0; font-size: 14px; color: var(--text-dim); }
.w-point-main { margin: 0; font-family: var(--font-mincho); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; line-height: 1.5; color: var(--text); }

.w-cf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; align-items: center; }
.w-cf-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.w-cf-list li { font-size: 15px; color: var(--text-dim); padding-left: 14px; border-left: 2px solid var(--gold-dim); }
.w-cf-list b { color: var(--gold-hi); }
.w-cf-meta { margin: 0 0 20px; font-size: 14px; color: var(--text); letter-spacing: 0.08em; }
.w-cf-btn { display: none; }
html[data-cf-url] .w-cf-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; padding: 14px 34px; border-radius: 6px;
  font-family: var(--font-mincho); font-weight: 800; font-size: 21px; letter-spacing: 0.08em; line-height: 1.3;
  color: var(--bg-deep); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 70%, var(--gold-dim));
  box-shadow: 0 10px 30px oklch(80% 0.12 85 / 0.25), inset 0 1px 0 oklch(100% 0 0 / 0.5); transition: transform 0.15s ease;
}
html[data-cf-url] .w-cf-btn:hover { transform: translateY(-2px); }
.w-cf-btn small { font-family: var(--font-gothic); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; opacity: 0.8; }
.w-cf-soon { display: inline-block; margin: 0; padding: 8px 16px; border: 1px dashed var(--gold-line); border-radius: 8px; color: var(--gold); font-weight: 700; letter-spacing: 0.06em; }
html[data-cf-url] .w-cf-soon { display: none; }
.w-cf-art { margin: 0; }
.w-cf-art img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--gold-line); box-shadow: 0 24px 50px oklch(0% 0 0 / 0.55); }
.w-cf-art figcaption { margin-top: 6px; font-size: 12px; color: var(--text-dim); text-align: right; }

/* the header's 支援ページ and the footer's link only once there is a URL */
.w-nav-cf, .w-foot-cf { display: none; }
html[data-cf-url] .w-nav-cf { display: inline-block; }
html[data-cf-url] .w-foot-cf { display: inline; margin-left: 0.6em; }

@media (max-width: 920px) {
  .w-points { grid-template-columns: minmax(0, 1fr); }
  .w-cf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .w-point-main { font-size: 16px; letter-spacing: 0.02em; }
  html[data-cf-url] .w-cf-btn { display: flex; }
}