/* 表示用書体。3アプリと同じ Anton だが、ポータルで使う18字だけに絞ったサブセット（1.3KB）。
   生成は scripts/build-font.py。Anton を当てた文字列を変えたら再生成すること。
   SIL OFL 1.1（ライセンス本文は fonts/OFL.txt で同梱配信）。 */
@font-face {
  font-family: 'Anton';
  src: url('/fonts/anton-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────
   VOLTERS PLAY / デザイントークン
   検定・推し診断・シュートと完全に共通：
   モノクロ＋グレイン、赤はワンポイント、角丸なし、ダーク固定。
   ───────────────────────────────────────────── */
:root {
  --brand: #c80012;         /* PANTONE 199C */
  --brand-bright: #e50012;  /* PANTONE 192C */
  --navy: #050051;          /* PANTONE 2765C */

  --bg: #0a0a0b;
  --panel: #131315;
  --panel-2: #1c1c1f;
  --line: #2b2b30;
  --line-bright: #45454d;

  --fg: #ffffff;
  --fg-mid: #a8a8ae;
  --fg-dim: #6e6e76;

  --tap: 48px;
  --display: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; border-radius: 0; }
[hidden] { display: none !important; }

/* 横はみ出しの保険。hidden ではなく clip を使う。
   ルート要素の overflow-x: hidden はスクロールコンテナを作るため、
   iOS Safari で縦スクロールが効かなくなることがある（推し診断・シュートで実際に起きた）。
   clip はコンテナを作らないので安全。 */
html { overflow-x: clip; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* LPのモノクロ写真に乗るグレイン感を、画像なしで再現（3アプリと同じ） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
/* 上からの赤いグロー（3アプリのトップ画面と同じ） */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(75% 42% at 50% -8%, rgba(200, 0, 18, 0.34), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── ページ枠 ──────────────────────────────
   カード3枚が横一列で埋まる幅にしてある。4枚目（ライブ予想）を足すときは
   .cards の grid-template-columns を 2列 × 2段 に変えること（3列だと1枚あぶれる）。 */
.page {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px calc(28px + env(safe-area-inset-bottom));
}

/* ── ヘッダー ──────────────────────────────
   ヒーローは作らない。QRから来た人は「ヴォルターズのなにか」だと既に
   分かっているので、大きなキャッチコピーは3枚目のカードを画面外に
   押し出すだけの費用になる。ロゴだけ置いてすぐカードへ。 */
.hd { display: flex; align-items: center; height: 64px; }
.logomark { display: block; width: auto; height: 40px; }

/* ── 見出し ────────────────────────────────
   ロゴとサイト名のあいだに罫線を挟む。並べるとロゴを改変した
   ロックアップに見えてしまうため。 */
.main { border-top: 1px solid var(--line); padding-top: 22px; }

.eyebrow {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}
.kicker {
  margin: 6px 0 0;
  font-size: clamp(21px, 6vw, 27px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-wrap: balance;
}
/* 無料・登録なし・所要時間は、会場で押すかどうかを決める3点なのでここに出す */
.lede {
  margin: 7px 0 0;
  max-width: 34em;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg-mid);
}

/* ── カード ────────────────────────────────
   カード全体がリンク。中の「はじめる」は押せる場所を示す表示で、
   リンクの入れ子は作らない。 */
.cards {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 15px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.card:hover { background: var(--panel-2); border-color: var(--line-bright); }
.card:active { background: var(--panel-2); }
.card:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* 場面ラベル（BEFORE TIP-OFF / TIMEOUT / HALFTIME）は置かない。
   遊ぶタイミングの目安のつもりだったが、「そのタイミングでしか遊べない」と
   読まれる。ポータルの仕事は次の1タップを起こすことなので、
   条件に見えるものを画面に置かない。 */
/* 英字は日本語名と同じ名前をもう一度出しているだけなので、読ませる対象ではない。
   日本語名を28pxにした時点で34pxの英字とほぼ同格になり、
   「見出しが2つある」状態になっていた。20px＋--fg-mid まで落として、
   日本語名に乗る小さなラベルとして扱う。 */
.card .en {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--fg-mid);
  margin: 0 0 3px;
}
/* 日本語名がカードの主役 */
.card .ja { font-size: 28px; font-weight: 900; letter-spacing: 0.01em; line-height: 1.3; }
/* flex:1 で、文の長さが違ってもカード同士の「はじめる」が同じ高さに揃う */
.card .sub {
  flex: 1;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-mid);
}
/* 赤はこの3つだけ。ページの他の場所からは赤を全部抜いて、
   赤＝押す場所 という意味を画面内で1つに保つ。
   3枚を同格に扱うのは、1枚だけ赤にすると残り2枚が「おまけ」に見えて
   回遊という目的そのものに反するため。

   全幅の赤ベタにはしない。押せる範囲はカード丸ごと（約170px）なので
   ボタンに幅を持たせる必要がなく、3枚ぶんの赤い帯が画面を占領して
   肝心の「何のアプリか」が読まれなくなる。内容ぶんの幅に留める。 */
.card .cta {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 42px;
  padding: 0 20px;
  margin-top: 12px;
  background: var(--brand-bright);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.card .cta::after { content: '→'; font-weight: 400; }
.card:active .cta { background: var(--brand); }

/* ── フッター ──────────────────────────────
   LINE導線は index.html 側でコメントアウトしてある（専用URL待ち）。
   CSSは先に入れてあるので、HTMLのコメントを外すだけで有効になる。 */
.ft { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }

.line {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
}
/* ぼるたんは白地の上にのみ置く（ロゴマニュアルの規定）。ダーク地に直接載せない。
   3アプリの .voltan と同じく、白い枠で受けてから中に収める。 */
.line .voltan {
  display: block;
  flex: none;
  width: 60px;
  aspect-ratio: 1;
  padding: 4px;
  background: #fff;
}
.line .voltan img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* ボタンを白ベタにしたぶん、受ける文言が小さすぎると釣り合わない。
   押す理由はこの1行が持っているので、見出しだけ上げる。 */
.line p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--fg-mid); }
.line p b { display: block; color: var(--fg); font-size: 15px; font-weight: 900; margin-bottom: 1px; }

/* 白ベタ。枠線1本では気づかれないため一段上げた（2026-09-04）。
   赤ベタにはしない ── 赤はカードのCTAだけに残して「赤＝遊ぶ」の意味を1つに保つ。
   白はダーク地でいちばんコントラストが高いので、色を足さずに強くできる。
   位置が3枚のカードより下なので、遊ぶ導線と取り合いにはならない。
   LINEのブランドカラー（緑）とロゴマークは使わない（3アプリのシェア導線と同じ判断）。 */
.line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: var(--tap);
  margin: 0 0 22px;
  background: #fff;
  color: var(--bg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  transition: background 0.15s ease;
}
.line-btn::after { content: '→'; font-weight: 400; }
.line-btn:active { background: var(--fg-mid); }
/* 白ボタンの上に白い輪郭は見えないので、フォーカスリングだけ赤を借りる */
.line-btn:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }

.credit { margin: 0; font-size: 11px; letter-spacing: 0.08em; color: var(--fg-dim); }
.credit a {
  color: var(--fg-mid);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--line-bright);
  padding-bottom: 1px;
}
.credit a:active { color: var(--fg); border-color: var(--fg-mid); }
.credit a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}