@charset "utf-8";
/* ============================================================================
   JRA-VAN ／ 凱旋門賞2026 ファン参加企画
   cheer.css ─ 応援メッセージページ（メイショウタバル／アドマイヤテラ 共通）
   ----------------------------------------------------------------------------
   目次
     01. 馬ごとのテーマ色
     02. STAGE（ファーストビュー）
     03. 見出しブロック
     04. 応援メッセージの流れ（FLOW）
     05. STAGE フッター（件数・停止ボタン・スクロール誘導）
     06. 絵馬ウォール
     07. キーホルダーの説明
     08. 投稿CTA
     10. モーション設定
   ----------------------------------------------------------------------------
   ■ 実装上の重要な取り決め（特許配慮）
     ・動画は一切使用しない。背景はCSSグラデーションとSVGのみ。
     ・メッセージは「再生位置・時刻」と一切ひも付けない。
       シークバー等の再生UIも置かない（04・05を参照）。
     ・メッセージは通常フロー（flex）で横一列に並べているだけで、
       重なり判定や回避のための位置計算は行っていない。
     詳細は README.md「特許まわりの設計方針」を参照。
   ========================================================================== */


/* ============================================================
   01. 馬ごとのテーマ色（勝負服由来）
   ============================================================ */

/* メイショウタバル ── 青、桃襷、桃袖 */
body[data-horse="meisho-tabaru"]{
  --h1:      #1E52EC;
  --h1-lt:   #7CA0FF;
  --h2:      #FA7BE8;
  --h2-lt:   #FFB3F1;
  --mark:    rgba(250,123,232,.34);
  --glow-1:  rgba(30,82,236,.50);
  --glow-2:  rgba(250,123,232,.24);
  --ink:     #070A1A;
}

/* アドマイヤテラ ── 水色、青山形一文字、白袖 */
body[data-horse="admire-terra"]{
  --h1:      #1544FF;
  --h1-lt:   #7E9DFF;
  --h2:      #40CCFF;
  --h2-lt:   #96E4FF;
  --mark:    rgba(64,204,255,.30);
  --glow-1:  rgba(21,68,255,.48);
  --glow-2:  rgba(64,204,255,.22);
  --ink:     #050A1C;
}

body[data-horse]{ background:var(--ink); }


/* ============================================================
   02. STAGE（ファーストビュー）
   ============================================================ */
.stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}

/* 勝負服の色からつくった光。画像も動画も使わない */
.stage-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 52% at 50% 108%, var(--glow-1), transparent 62%),
    radial-gradient(58% 42% at 88% -6%,  var(--glow-2), transparent 60%),
    radial-gradient(46% 34% at 6% 22%,   var(--glow-2), transparent 66%),
    linear-gradient(178deg, #0B1130 0%, var(--ink) 46%, #0A1026 100%);
}
.stage-bg::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 200px 20px rgba(0,0,0,.62);
}

/* 「必勝祈願」の透かし。キーホルダーの筆文字と対応させている */
.stage-seal{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  right:-.14em; top:6%;
  writing-mode:vertical-rl;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(96px,30vw,240px);
  line-height:.94; letter-spacing:.02em;
  color:#fff; opacity:.028;
}


/* ============================================================
   03. 見出しブロック
   ============================================================ */
.stage-head{
  position:relative; z-index:3; flex:none;
  padding:calc(var(--header-h) + 18px) var(--gutter) 6px;
}

.stage-kicker{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-en); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--h2-lt);
}
.stage-kicker::before{ content:""; width:18px; height:2px; background:var(--h2); flex:none; }

.stage-title{
  margin-top:14px;
  display:flex; flex-direction:column; align-items:flex-start;
  font-weight:400;
}
.stage-title .t-lead{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(17px,4.6vw,24px);
  letter-spacing:.16em; color:var(--text-2);
}
.stage-title .t-name{
  position:relative; display:inline-block;
  margin-top:2px; padding-bottom:2px;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(34px,9.8vw,68px);
  line-height:1.12; letter-spacing:.01em; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.34), 0 0 44px var(--glow-2);
}
/* 名前の下に走る勝負服の帯 */
.stage-title .t-name::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:5px;
  background:linear-gradient(90deg,var(--h1),var(--h2));
  border-radius:3px;
}

/* 勝負服 ＋ レース情報。馬名とは行を分けているので重ならない */
.stage-id{
  display:flex; align-items:center; gap:14px;
  margin-top:20px;
}

/* 勝負服のSVG（画像ではなくインラインSVG） */
.stage-silks{
  flex:none;
  width:clamp(52px,14vw,64px);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));
}

.stage-meta{
  min-width:0;
  font-family:var(--f-en); font-size:13px; font-weight:600;
  letter-spacing:.14em; line-height:1.65; color:var(--text-2);
}
.stage-meta .m-1{ color:var(--text); font-size:15px; }
.stage-meta .m-2{ color:var(--text-3); }
.stage-meta .dot{
  display:inline-block; width:3px; height:3px; margin:0 7px 3px;
  border-radius:50%; background:var(--h2); vertical-align:middle;
}


/* ---------- 表示直後の立ち上がり ---------- */
@keyframes stage-in{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
@keyframes stage-bar{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
@keyframes stage-fade{
  from{ opacity:0; }
  to  { opacity:1; }
}
.stage-kicker        { animation:stage-in .7s var(--ease) both .05s; }
.stage-title .t-lead { animation:stage-in .7s var(--ease) both .14s; }
.stage-title .t-name { animation:stage-in .8s var(--ease) both .22s; }
.stage-title .t-name::after{ transform-origin:left; animation:stage-bar .7s var(--ease) both .5s; }
.stage-id            { animation:stage-in .7s var(--ease) both .36s; }
.flow                { animation:stage-fade 1.2s var(--ease) both .5s; }
.stage-foot          { animation:stage-in .7s var(--ease) both .62s; }


/* ============================================================
   04. 応援メッセージの流れ（FLOW）
   ------------------------------------------------------------
   .flow-lane   … 高さ固定の帯。中身は .flow-track ひとつだけ
   .flow-track  … display:flex の通常フロー。左へ等速で平行移動する
   .chip        … メッセージ1件。track の子として順番に並ぶだけで、
                  個別の座標計算・重なり判定は一切していない
   ============================================================ */
.flow{
  position:relative; z-index:2;
  flex:1 1 auto;
  min-height:220px;
  margin-top:10px;
  overflow:hidden;
  contain:layout paint;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}

.flow-lane{
  position:absolute; left:0; right:0;
  height:var(--lh);
}
.flow-track{
  position:absolute; left:0; top:0; height:100%;
  display:flex; align-items:center;
  gap:var(--gap);
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}

/* レーンごとに文字サイズを決める。行ごとに大きさが揃うので読みやすい */
.flow-lane[data-size="s"]  { --lh:32px; --fs:15px; --gap:54px; --op:.78; }
.flow-lane[data-size="m"]  { --lh:41px; --fs:19px; --gap:64px; --op:.92; }
.flow-lane[data-size="l"]  { --lh:52px; --fs:26px; --gap:76px; --op:1;   }
.flow-lane[data-size="xl"] { --lh:64px; --fs:34px; --gap:88px; --op:1;   }

.chip{
  flex:none;
  font-family:var(--f-hand); font-weight:600;
  font-size:var(--fs); line-height:1.24; letter-spacing:.02em;
  white-space:nowrap;
  opacity:var(--op);
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 18px rgba(0,0,0,.4);
}

/* 色のばらつき。既定は白で、差し色は控えめな比率で混ぜる */
.chip.k-w{ color:#FFFFFF; }
.chip.k-a{ color:var(--h2-lt); }
.chip.k-b{ color:var(--h1-lt); }
.chip.k-c{ color:var(--wood-lt); }
.chip.k-d{ color:rgba(244,246,250,.7); }

/* 蛍光ペン風のあしらい（ごく一部だけ） */
.chip.is-mark{
  background:linear-gradient(transparent 56%, var(--mark) 56%, var(--mark) 94%, transparent 94%);
}

/* 一部の行だけ角ゴシックにして単調さを避ける */
.flow-lane[data-face="gothic"] .chip{ font-family:var(--f-jp); font-weight:700; letter-spacing:.04em; }


/* ============================================================
   05. STAGE フッター
   ------------------------------------------------------------
   再生位置を示すバーやシーク操作は意図的に持たせていない。
   置いているのは件数表示と、動きを止めるボタンだけ（WCAG 2.2.2）。
   ============================================================ */
.stage-foot{
  position:relative; z-index:3; flex:none;
  padding:12px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
}

.tally{
  display:flex; align-items:baseline; gap:7px; flex:none;
  white-space:nowrap;
  font-size:12px; letter-spacing:.08em; color:var(--text-3);
}
.tally b{
  font-family:var(--f-en); font-size:22px; font-weight:700;
  letter-spacing:.02em; color:var(--text);
  font-variant-numeric:tabular-nums;
}

.flow-toggle{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 15px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.05);
  font-size:12px; letter-spacing:.08em; color:var(--text-2);
  transition:border-color .2s, color .2s;
}
.flow-toggle:hover{ border-color:var(--h2); color:var(--text); }
.flow-toggle svg{ width:11px; height:11px; fill:currentColor; }
/* JS が中身を入れるまで（＝流れが動かない環境では）出さない */
.flow-toggle:empty{ display:none; }

.scroll-cue{
  margin-left:auto; flex:none;
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-en); font-size:10px; font-weight:700;
  letter-spacing:.22em; color:var(--text-3); pointer-events:none;
}
.scroll-cue i{
  display:block; width:7px; height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{
  0%,100% { transform:rotate(45deg) translate(-2px,-2px); opacity:.3; }
  50%     { transform:rotate(45deg) translate(1px,1px);   opacity:1; }
}
@media (max-width:369px){ .scroll-cue{ display:none; } }


/* ============================================================
   06. 絵馬ウォール
   ------------------------------------------------------------
   現地でお渡しするキーホルダー（絵馬型）と形をそろえた一覧。
   流れる表示を追えない人が、落ち着いて読むための場所でもある。
   ============================================================ */
.ema-sec{
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    var(--ink-2);
  border-top:1px solid var(--line-soft);
}

.ema-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:12px;
  margin-bottom:28px;
}
.ema-count{
  font-family:var(--f-en); font-size:13px; font-weight:600;
  letter-spacing:.14em; color:var(--text-3);
}

/* ---------- 検索（メッセージ本文・ニックネーム） ---------- */
.ema-search{ max-width:480px; margin-bottom:22px; }
.ema-search__field{
  position:relative;
  display:flex; align-items:center; gap:10px;
  height:52px; padding:0 8px 0 16px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.045);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.ema-search__field:focus-within{
  border-color:var(--h2);
  background:rgba(255,255,255,.075);
}
.ema-search__field > svg{ flex:none; width:17px; height:17px; color:var(--text-3); }
.ema-search__field input{
  flex:1; min-width:0;
  border:0; background:none; outline:none; appearance:none;
  font-family:inherit; font-size:16px;   /* iOSで拡大されないよう16px以上 */
  color:var(--text); letter-spacing:.03em;
}
.ema-search__field input::placeholder{ color:var(--text-3); font-size:14px; }
.ema-search__field input::-webkit-search-cancel-button{ display:none; }

.ema-clear{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--text-2); background:rgba(255,255,255,.1);
  transition:background .2s, color .2s;
}
.ema-clear:hover{ background:rgba(255,255,255,.2); color:var(--text); }
.ema-clear svg{ width:11px; height:11px; }

/* 検索語に一致した箇所。木地に映える朱色で */
.ema mark{
  padding:0 1px; border-radius:2px;
  background:rgba(255,252,240,.78);
  color:#A6301A; font-weight:700;
}

.ema-empty{
  padding:44px 20px; text-align:center;
  border:1px dashed var(--line); border-radius:14px;
  font-size:14px; line-height:2; color:var(--text-3);
}

.ema-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.ema-grid:empty{ display:none; }
@media (min-width:600px){ .ema-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:960px){ .ema-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } }

.ema{
  position:relative;
  min-height:152px;
  padding:32px 14px 15px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:var(--sumi);
  background:
    repeating-linear-gradient(92deg, rgba(120,84,36,.09) 0 1px, transparent 1px 6px),
    linear-gradient(158deg, var(--wood-lt) 0%, var(--wood) 54%, var(--wood-dk) 100%);
  clip-path:polygon(50% 0%, 100% 16%, 100% 100%, 0% 100%, 0% 16%);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
/* 紐を通す穴 */
.ema::before{
  content:""; position:absolute; left:50%; top:15px;
  width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%;
  background:#241C12;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.28);
}
/* 掛けたときの傾き */
.ema:nth-child(3n)  { transform:rotate(-1.1deg); }
.ema:nth-child(4n+1){ transform:rotate(.9deg); }
.ema:nth-child(7n)  { transform:rotate(1.6deg); }

.ema__msg{
  font-family:var(--f-hand); font-weight:600;
  font-size:15px; line-height:1.78; letter-spacing:.02em;
  word-break:break-word;
}
.ema__foot{
  margin-top:12px; padding-top:9px;
  border-top:1px solid rgba(90,64,28,.28);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.ema__name{
  font-size:11px; letter-spacing:.06em; color:var(--sumi-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ema__mark{
  flex:none; width:16px; height:5px; border-radius:3px;
  background:linear-gradient(90deg,var(--h1),var(--h2));
  opacity:.75;
}

.ema-more{
  display:flex; justify-content:center; margin-top:28px;
}
.ema-note{
  margin-top:22px; text-align:center;
  font-size:12px; line-height:2; color:var(--text-3);
}


/* ============================================================
   07. キーホルダーの説明
   ============================================================ */
.keyring-sec{ border-top:1px solid var(--line-soft); }
.keyring-grid{
  display:grid; gap:32px;
}
@media (min-width:900px){
  .keyring-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
}

.keyring-fig{
  padding:26px 0;
}
.keyring-fig svg{ width:min(230px,62vw); height:auto; }

.keyring-steps{
  margin-top:26px; display:grid; gap:14px;
}
.keyring-step{
  display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start;
  padding:14px 16px;
  border:1px solid var(--line-soft); border-radius:12px;
  background:rgba(255,255,255,.03);
}
.keyring-step .n{
  font-family:var(--f-en); font-size:20px; font-weight:800;
  line-height:1.4; color:var(--h2); letter-spacing:.02em;
}
.keyring-step .t{ font-size:14px; line-height:1.85; color:var(--text-2); }
.keyring-step .t b{ color:var(--text); }


/* ============================================================
   08. 投稿CTA
   ============================================================ */
.entry-sec{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(80% 60% at 50% 120%, var(--glow-1), transparent 66%),
    var(--ink-2);
  text-align:center;
}
.entry-rule{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:20px;
}
.entry-rule li{
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:12px; letter-spacing:.05em; color:var(--text-2);
}
.entry-cta{ margin-top:30px; }
.entry-closed{
  max-width:30em; margin:20px auto 0;
  font-size:14px; line-height:2; color:var(--text-2); letter-spacing:.05em;
}


/* ============================================================
   10. モーション設定
   ============================================================ */

/* 動きを減らす設定のときは流さず、静的な一覧だけで見せる */
@media (prefers-reduced-motion:reduce){
  .flow{ display:none; }
  .stage{ min-height:auto; padding-bottom:24px; }
  .scroll-cue i{ animation:none; }
  .stage-kicker,
  .stage-title .t-lead,
  .stage-title .t-name,
  .stage-title .t-name::after,
  .stage-id,
  .stage-foot{ animation:none; opacity:1; transform:none; }
}

/* 動きを減らす設定のときに出す代替テキスト */
.flow-fallback{
  display:none;
  position:relative; z-index:2;
  padding:6px var(--gutter) 0;
  font-size:13px; line-height:2; color:var(--text-2);
}
@media (prefers-reduced-motion:reduce){
  .flow-fallback{ display:block; }
}


/* ============================================================
   11. PC レイアウト（見出しを左、流れを右に置く）
   ============================================================ */
@media (min-width:1000px){
  .stage{
    display:grid;
    grid-template-columns:minmax(400px,44%) 1fr;
    grid-template-rows:1fr auto;
    align-items:center;
    padding:calc(var(--header-h) + 20px) clamp(24px,4vw,72px) 0;
  }
  .stage-head{
    grid-column:1; grid-row:1;
    padding:0 40px 0 0;
  }
  /* 左カラムに収まる大きさに抑える（馬名は折り返さない） */
  .stage-title .t-name{
    font-size:clamp(40px,4.4vw,58px);
    white-space:nowrap;
  }
  .stage-id{ margin-top:30px; }
  .stage-silks{ width:86px; }
  .flow{
    grid-column:2; grid-row:1;
    align-self:stretch;
    margin-top:0;
    min-height:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  }
  .stage-foot{
    grid-column:1 / -1; grid-row:2;
    padding-inline:0;
  }
  /* 透かしは画面内に収まる大きさへ */
  .stage-seal{
    top:auto; bottom:5%; right:0;
    font-size:clamp(96px,13vw,164px);
    opacity:.04;
  }
}