/* レース対戦の入口（game.html）。アプリの色（ブルーパイン・若草）と、競馬場の深い緑・ゴール板の金。平らな一色の背景にはしない */
:root{--ink:#1f2e33;--primary:#324851;--deep:#13201b;--turf:#2f6b3a;--accent:#86ac41;--gold:#e8c45a;--base:#eef3f2}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;color:var(--ink);font-family:"LINE Seed JP","Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.7;
  background:repeating-linear-gradient(135deg,rgba(47,107,58,.045) 0 2px,transparent 2px 16px),linear-gradient(180deg,#e7efe9,#eef3f2 40%,#e6eeea)}
a{color:inherit}
.h-wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.h-muted{opacity:.72;font-size:13px;margin:6px 0}

/* 上の帯 */
.h-top{position:absolute;left:0;right:0;top:0;z-index:5;color:#fff;padding-top:env(safe-area-inset-top,0px)}
.h-top-in{height:58px;display:flex;align-items:center;gap:14px}
.h-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800}
.h-brand img{border-radius:8px}
.h-nav{flex:none;display:flex;gap:4px;margin-left:auto;padding:3px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.h-nav a{padding:4px 14px;border-radius:99px;text-decoration:none;font-weight:800;font-size:13px;white-space:nowrap}
.h-nav a.on{background:#fff;color:var(--ink)}
.h-acc{font-size:13px;font-weight:800;text-decoration:none;padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.5);white-space:nowrap}

/* ヒーロー */
.h-hero{position:relative;overflow:hidden;color:#fff;background:var(--deep);padding:calc(96px + env(safe-area-inset-top,0px)) 0 56px;min-height:min(620px,92vh);display:flex;align-items:flex-end}
.h-hero-bg{position:absolute;inset:0}
.h-hero-bg video,.h-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-position:center 40%;background-size:cover;background-repeat:no-repeat}
.h-hero-layer{opacity:0;transition:opacity 1.2s ease}
.h-hero-layer.on{opacity:1}
.h-cta-sports{flex-wrap:wrap}
.h-cta-sports .h-btn{min-width:88px}
.h-cta-sports .h-btn.on{box-shadow:0 0 0 3px rgba(255,255,255,.75)}
@media (prefers-reduced-motion:reduce){.h-hero-layer{transition:none}}
.h-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,12,.85),rgba(8,14,12,.45) 55%,rgba(8,14,12,.15)),linear-gradient(0deg,rgba(8,14,12,.8),rgba(8,14,12,0) 45%)}
.h-hero-in{position:relative;width:100%}
.h-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--gold)}
.h-hero h1{margin:6px 0 10px;font-size:clamp(32px,6.4vw,60px);line-height:1.15;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.h-lead{margin:0;max-width:34em;font-size:15px;opacity:.93}
.h-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.h-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:99px;border:0;font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;background:var(--primary);color:#fff}
.h-btn.accent{background:var(--gold);color:var(--ink)}
.h-btn.glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.h-btn.small{min-height:40px;padding:0 16px;font-size:14px;margin-top:6px}
.h-btn:focus-visible,.h-sport a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* 約束 */
.h-promise{position:relative;background:linear-gradient(180deg,rgba(19,32,27,.96),rgba(19,32,27,.92)),url(../media/game/tex-turf.jpg) center/420px repeat;color:#fff}
.h-promise-in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.h-promise-in>div{padding:16px 16px 18px;border-left:1px solid rgba(255,255,255,.1)}
.h-promise-in>div:first-child{border-left:0}
.h-promise b{display:block;font-size:16px;color:var(--gold)}
.h-promise b::before{content:'✓ '}
.h-promise span{display:block;font-size:12px;opacity:.85;line-height:1.55}

/* 見出し・面 */
.h-sec{margin:34px 0 0}
.h-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.h-sec-head h2{margin:0;font-size:20px}
.h-sec-head p{margin:0;font-size:13px;opacity:.7}
.h-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.h-panel{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 2px 12px rgba(0,0,0,.06)}

/* 競技のカード */
.h-sports{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.h-sport.main{grid-column:1/-1;min-height:300px}
.h-sport{position:relative;border-radius:18px;overflow:hidden;min-height:260px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(8,14,12,.05) 20%,rgba(8,14,12,.86)),var(--img) center/cover no-repeat,var(--deep);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.h-sport-link{display:flex;align-items:flex-end;gap:12px;padding:16px;text-decoration:none;flex:1}
.h-face{flex:none;width:58px;height:74px;border-radius:12px;background:var(--face) center/cover no-repeat;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.h-sport-text{display:flex;flex-direction:column}
.h-sport small{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gold)}
.h-sport b{font-size:26px;line-height:1.2}
.h-sport em{font-style:normal;font-size:13px;opacity:.9;line-height:1.5}
.h-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 12px}
.h-modes a{display:flex;align-items:flex-end;min-height:62px;padding:6px 6px;border-radius:10px;text-decoration:none;font-weight:800;font-size:12px;letter-spacing:-.04em;line-height:1.3;white-space:nowrap;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.75)),var(--m) center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.h-modes a:hover{box-shadow:0 0 0 2px var(--gold)}
.h-cost{display:block;letter-spacing:0;font-size:10px;font-weight:800;color:var(--gold)}

/* 大会・順位・成績 */
.h-events{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.h-events li{padding:8px 12px;border-radius:12px;background:#f3f7f3}
.h-events li div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.h-events p{margin:2px 0 0;font-size:13px}
.h-tag{font-size:11px;font-weight:800;padding:0 8px;border-radius:99px;background:#e3ebe5}
.h-tag.on{background:var(--accent);color:var(--ink)}
.h-tag.shut{background:#d9dcd9}
.h-rules{margin-top:10px;font-size:13px}
.h-rules summary{font-weight:800;cursor:pointer}
.h-rules p{margin:6px 0 0}
.h-board{list-style:none;margin:0;padding:0}
.h-board li{display:flex;align-items:baseline;gap:10px;padding:5px 8px;border-radius:10px}
.h-board li:nth-child(odd){background:#f5f8f5}
.h-board li.me{background:rgba(232,196,90,.3)}
.h-board .rk{width:1.8em;text-align:right;font-weight:800}
.h-board .r1{color:#b8901f}.h-board .r2{color:#7d858b}.h-board .r3{color:#a0643a}
.h-board b{flex:none}
.h-board small{flex:1;min-width:0;opacity:.65;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-board em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.h-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.h-stats div{padding:10px;border-radius:12px;background:#f3f7f3;text-align:center}
.h-stats b{display:block;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
.h-stats span{font-size:11px;opacity:.75}

.h-board-note{margin:0 0 6px}
.h-me-row{grid-template-columns:3fr 2fr;align-items:start}
.h-foot{margin:40px 0 0;padding:18px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:13px;text-align:center}
.h-foot p{margin:4px 0}

/* 相撲のカード：動画がないので写真をゆっくり動かし（パン）、塩を canvas で舞わせる */
.h-sumo{background:var(--deep)}
.h-sumo-bg{position:absolute;inset:-6%;background:url(../media/game/sumo-hero.jpg) center 35%/cover no-repeat;animation:hSumoPan 38s ease-in-out infinite alternate;will-change:transform}
.h-salt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.h-sumo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,12,.05) 20%,rgba(8,14,12,.86));pointer-events:none}
.h-sumo>a,.h-sumo>nav{position:relative;z-index:1}
@keyframes hSumoPan{from{transform:scale(1.04) translate(-2.5%,-1.5%)}to{transform:scale(1.12) translate(2.5%,1.5%)}}
@media (prefers-reduced-motion:reduce){.h-sumo-bg{animation:none}}
/* 競技のタブ（大会・順位・成績） */
.h-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:34px 0 -18px;padding:4px;border-radius:99px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);width:fit-content;max-width:100%}
.h-tabs button{min-height:40px;padding:0 18px;border-radius:99px;border:0;background:transparent;font:inherit;font-weight:800;font-size:14px;cursor:pointer;color:var(--ink)}
.h-tabs button.on{background:var(--primary);color:#fff}
.h-tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.h-ta{margin-top:14px}
.h-ta h3{margin:0 0 4px;font-size:15px}
@media (max-width:860px){
  .h-sports{grid-template-columns:1fr 1fr}
  .h-sport.main{grid-column:1/-1}
  .h-two{grid-template-columns:1fr}
  .h-stats{grid-template-columns:repeat(3,1fr)}
  .h-me-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .h-promise-in{grid-template-columns:1fr}
  .h-promise-in>div{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:10px 16px}
  .h-sports{grid-template-columns:1fr}
  .h-modes{grid-template-columns:1fr 1fr}
  .h-nav a{padding:4px 10px}
  .h-brand span{display:none}
}
/* スマホ縦（420px以下）：上の帯（アイコン・POG／レース対戦・音・ログイン）を1行に収める。切りかえは縮めない */
@media (max-width:420px){
  .h-top-in{gap:8px}
  .h-brand{flex:none}
  .h-nav a{padding:4px 9px;font-size:12px}
  .h-top-in .a-mute-hub{min-width:36px;min-height:36px;padding:0 8px;margin-right:0;font-size:12px}
  .h-acc{padding:6px 10px;font-size:12px}
}
@media (max-width:359px){.h-top-in{gap:5px}.h-nav a{padding:4px 8px}.h-acc{padding:6px 8px}}
/* 横持ちのスマホ（高さが低い）：ヒーローを低く */
@media (max-height:480px) and (orientation:landscape){
  .h-hero{min-height:0;padding:76px 0 26px}
  .h-hero h1{font-size:30px}
  .h-lead{font-size:13px}
  .h-sport{min-height:200px}
}

/* プレオープンの帯（race/preopen.js） */
.h-preopen{margin:18px 0 0}
.h-preopen:empty,.h-preopen[hidden]{display:none}

/* 競技ごとの POG への近道（2026-11-04。POG ／ レース対戦の行き来） */
.h-pog{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:0 12px 12px;font-size:12px;font-weight:700;opacity:.95}
.h-pog a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.25);color:#fff;text-decoration:none;font-weight:800}
.h-pog a:hover{border-color:var(--gold)}
.h-sec-head p a{color:inherit;font-weight:800}

/* ---------- スマホの文字の量（docs/work-20261104/mobile-text） ----------
   約束3つは見出しだけ。本文は押すと開く（パソコンの広い画面でははじめから開いて見せる：hub.js）。
   リードの2文目はスマホでは出さない（同じことを「競技を選ぶ」の各競技の遊び方で見せている） */
.h-promise-in>details{padding:16px 16px 18px;border-left:1px solid rgba(255,255,255,.1)}
.h-promise-in>details:first-child{border-left:0}
.h-promise summary{display:flex;align-items:center;min-height:44px;cursor:pointer;list-style:none}
.h-promise summary::-webkit-details-marker{display:none}
.h-promise summary::after{content:'▸';margin-left:8px;color:var(--gold);transition:transform .15s}
.h-promise details[open] summary::after{transform:rotate(90deg)}
@media (max-width:560px){.h-promise-in>details{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:2px 16px}}
@media (max-height:480px) and (orientation:landscape){.h-promise-in>details{padding:4px 16px}}
@media (max-width:700px),(max-height:480px){
  .h-lead-more{display:none}
  /* プレオープンの帯は1行＋Xへの案内（同じ内容は各競技の遊び方の画面の帯と、はじめの確認に出ている） */
  .h-preopen .po-box{padding:8px 12px}
  .h-preopen .po-box .po-sub:not(:last-child){display:none}
  .h-preopen .po-box .po-sub{margin:2px 0 0}
}

/* ---------- 指で押しやすく（2026-11-05 ペルソナレビュー B4）：指でさわる端末では、押せる所を44px以上に ---------- */
@media (pointer:coarse){
  .h-nav a{display:inline-flex;align-items:center;min-height:44px}
  .h-acc{display:inline-flex;align-items:center;min-height:44px}
  .h-brand{min-height:44px}
  .h-rules summary{display:flex;align-items:center;min-height:44px}
  .h-foot p{line-height:2.6}
  .h-foot a{display:inline-block;padding:6px 2px}
  .h-pog a{display:inline-flex;align-items:center;min-height:44px}
  .h-preopen .po-x{display:inline-flex;align-items:center;min-height:44px}
  .h-tabs button{min-height:44px}
  /* 飾りの英語の見出し（KEIBA・SUMO など）はスマホでは出さない（C4） */
  .h-sport-text small{display:none}
}
.h-set{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:44px;font-size:19px;text-decoration:none;color:inherit;flex:none}