/* =========================================================
   激カタ馬を探せ！（今日うま ツール第2弾）
   第1弾（運100％・紺のゲーム画面）と対になる「DATA 100％」の道具。
   墨色の地に細いデータ罫・炎の朱をアクセントに、結果カードは読みやすい生成りの紙。
   スマホファースト：〜759px 今日の4頭は1列・過去の4頭は2列、760px〜 今日は2列×2段・過去は4列（Ver.2 2026-11-05）
   ========================================================= */
:root {
  --ink: #15161a;          /* 地 */
  --ink-2: #1e2026;
  --ink-line: rgba(255, 255, 255, .06);
  --paper: #fffaf1;        /* 結果カード */
  --paper-line: #e8dcc6;
  --text: #1b1a17;
  --text-sub: #6f6a61;
  --on-ink: #f3efe7;
  --on-ink-sub: #a9a59c;
  --fire: #ff5a1f;
  --fire-2: #d42a1f;       /* 今日うまの朱 */
  --gold: #ffb347;
  --num: "Oswald", "Noto Sans JP", sans-serif;
  --font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; color: var(--on-ink); font-family: var(--font); line-height: 1.6;
  background:
    linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(ellipse at 50% -10%, #3a1b14 0, var(--ink) 60%) fixed;
  background-color: var(--ink);
  -webkit-text-size-adjust: 100%; overflow-x: hidden;
}
.gk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gk-page { max-width: 980px; margin: 0 auto; padding: 4px 16px 40px; }

/* 「← 今日うまへ戻る」（第1弾 /game/ と同じ形。iframe 内では出さない） */
.gk-back { padding: 4px 0; }
.gk-back a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .04em; color: #d4cfc5; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s, color .15s;
}
.gk-back a:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }
.gk-back a:focus-visible, .gk-search:focus-visible, .gk-more a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.is-embed .gk-back, .is-framed .gk-back { display: none; }
.is-embed body { min-height: 0; background: var(--ink); }
.is-embed .gk-page { padding-top: 16px; }

/* ---------- 見出し・ボタン（Ver.2 2026-11-05 修正ストック No.003。ボタンの大きさ・位置・文字は押す前・演出中・表示後で同じ） ---------- */
.gk-head { padding: 22px 0 8px; text-align: center; }
.gk-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .3em; color: var(--on-ink-sub); }
.gk-title {
  margin: 6px 0 0; font-size: clamp(30px, 8.4vw, 54px); font-weight: 900; line-height: 1.2; letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 24px rgba(255, 90, 31, .35);
}
.gk-title-fire { display: inline-block; margin-right: .1em; filter: drop-shadow(0 0 10px rgba(255, 90, 31, .6)); }
.gk-lead { margin: 12px 0 0; font-size: 15px; font-weight: 500; color: var(--on-ink); }
.gk-br-sp { display: inline; }

.gk-search {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 440px; min-height: 64px; margin: 22px auto 0; padding: 0 24px;
  border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 21px; font-weight: 900; letter-spacing: .06em; color: #fff;
  background: linear-gradient(180deg, #ff7a2e 0%, var(--fire) 45%, var(--fire-2) 100%);
  box-shadow: 0 6px 0 #8f1a12, 0 12px 28px rgba(255, 90, 31, .35);
  -webkit-tap-highlight-color: transparent; transition: transform .08s, box-shadow .08s, filter .15s, background .3s;
}
.gk-search:hover { filter: brightness(1.06); }
.gk-search:active { transform: translateY(4px); box-shadow: 0 2px 0 #8f1a12, 0 6px 16px rgba(255, 90, 31, .3); }
.is-loading .gk-search { cursor: progress; }
/* 表示後：赤を少し暗くして押下済みと分かるように（大きさ・位置・文字は同じ） */
.gk-search.is-done { cursor: default; filter: none;
  background: linear-gradient(180deg, #c95a26 0%, #b8431b 45%, #9b2219 100%); box-shadow: 0 4px 0 #6e140e, 0 8px 18px rgba(255, 90, 31, .18); }
.gk-search.is-done:active { transform: none; box-shadow: 0 4px 0 #6e140e, 0 8px 18px rgba(255, 90, 31, .18); }
.gk-rule { margin: 14px auto 0; max-width: 560px; font-size: 12px; color: var(--on-ink-sub); }

/* ---------- DATA LOADING（ボタンとは別の領域。約1.2秒） ---------- */
.gk-loading { margin: 24px auto 0; max-width: 440px; }
.gk-loading[hidden] { display: none; }
.gk-loading-text { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px;
  font-family: var(--num); font-size: 14px; font-weight: 600; letter-spacing: .24em; color: #ff8a6a; }
.gk-loading-text span { animation: gk-blink .6s steps(2, end) infinite; }
.gk-loading-pct { font-size: 16px; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }
.gk-loading-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 60, 40, .15); border: 1px solid rgba(255, 90, 31, .45); overflow: hidden; }
.gk-loading-bar span { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: repeating-linear-gradient(-45deg, var(--fire-2) 0 8px, #ff4a2a 8px 16px); box-shadow: 0 0 12px rgba(255, 60, 40, .7); }
@keyframes gk-blink { to { visibility: hidden; } }

/* ---------- 今日の激カタ馬 ---------- */
.gk-result:empty { display: none; }
.gk-result { margin-top: 24px; }
.gk-found { margin: 0; text-align: center; }
.gk-found span {
  display: inline-block; padding: 3px 16px; font-size: 20px; font-weight: 900; letter-spacing: .12em; color: #fff;
  border-top: 2px solid var(--fire); border-bottom: 2px solid var(--fire);
  text-shadow: 0 0 16px rgba(255, 90, 31, .6); animation: gk-found .4s ease-out both;
}
@keyframes gk-found { from { opacity: 0; transform: scale(1.2); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
.gk-basis { margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--on-ink-sub); }

.gk-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
/* 1枚のカード（従来の約半分の高さ）：上段＝激カタ①〜④・場・R・発走、中段＝馬番・馬名、下段＝AI指数・2位との差・ゲージ、右下にリンク */
.gk-card {
  position: relative; min-width: 0; padding: 10px 14px 10px; color: var(--text);
  background: var(--paper); border-radius: 10px; border-left: 6px solid var(--fire-2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  animation: gk-card .35s ease-out both; animation-delay: calc(var(--i) * .15s);
}
@keyframes gk-card { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gk-card-head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.gk-card-label { margin: 0; padding: 2px 9px 3px; font-size: 13px; font-weight: 900; letter-spacing: .06em; color: #fff; background: var(--fire-2); border-radius: 5px; align-self: center; }
.gk-fire { margin-right: 2px; }
.gk-venue { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.gk-venue-name { font-size: 18px; font-weight: 900; letter-spacing: .04em; }
.gk-rno { font-family: var(--num); font-size: 21px; font-weight: 700; line-height: 1; }
.gk-rno small { font-size: 13px; margin-left: 1px; }
.gk-start { margin: 0 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-sub); white-space: nowrap; }
.gk-start b { font-family: var(--num); font-size: 18px; color: var(--text); letter-spacing: .02em; }

.gk-horse { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 7px 0; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.gk-umaban, .gk-past-umaban {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); background: transparent; border: 2px solid currentColor; border-radius: 7px;
}
.gk-umaban { min-width: 46px; height: 46px; padding: 0 6px; }
/* 馬番の色（No.012-007）：枠番が分かるときだけ実際の枠色（日本の競馬の枠色。/lab/ と同じ色）。分からなければ上の色なしの表示 */
.gk-umaban[class*="gk-waku-"], .gk-past-umaban[class*="gk-waku-"] { border: 1px solid rgba(0, 0, 0, .45); }
.gk-waku-1 { background: #fff; color: #000; }
.gk-waku-2 { background: #000; color: #fff; }
.gk-waku-3 { background: #e60012; color: #fff; }
.gk-waku-4 { background: #0068b7; color: #fff; }
.gk-waku-5 { background: #fff100; color: #000; }
.gk-waku-6 { background: #009944; color: #fff; }
.gk-waku-7 { background: #f39800; color: #000; }
.gk-waku-8 { background: #f5a6c8; color: #000; }
.gk-umaban b { font-family: var(--num); font-size: 28px; font-weight: 700; line-height: 1; }
.gk-umaban small { font-size: 11px; font-weight: 700; margin: 9px 0 0 1px; }
.gk-name { min-width: 0; flex: 1; font-size: clamp(19px, 5.4vw, 24px); font-weight: 900; line-height: 1.25; letter-spacing: .02em; overflow-wrap: anywhere; }
.gk-scratch { flex: none; padding: 2px 8px; font-size: 13px; font-weight: 900; color: #fff; background: #6f6a61; border-radius: 4px; }
.gk-card.is-scratched .gk-name { text-decoration: line-through; text-decoration-color: rgba(27, 26, 23, .5); color: var(--text-sub); }

.gk-nums { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 7px 0 0; }
.gk-stat { margin: 0; display: flex; flex-direction: column; line-height: 1.1; }
.gk-stat span { font-size: 11px; font-weight: 700; color: var(--text-sub); }
.gk-stat b { font-family: var(--num); font-size: 23px; font-weight: 700; letter-spacing: .02em; }
.gk-stat-gap b { color: var(--fire-2); }
/* 1位と2位の指数の比較（差が大きいほど2位の棒が短い） */
.gk-meter { display: grid; gap: 4px; min-width: 0; }
.gk-bar { position: relative; height: 10px; background: #eee4d2; border-radius: 5px; overflow: hidden; }
.gk-bar span { display: block; height: 100%; border-radius: 5px; }
.gk-bar-1 span { background: linear-gradient(90deg, var(--fire-2), var(--fire)); }
.gk-bar-2 span { background: #a9a091; }
.gk-bar em { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); font-style: normal; font-size: 8px; font-weight: 700; line-height: 1; color: rgba(27, 26, 23, .7); }
.gk-bar-1 em { color: #fff; }
.gk-more { margin: 5px 0 0; text-align: right; font-size: 12px; font-weight: 700; }
.gk-more a { color: var(--fire-2); text-decoration: none; border-bottom: 1px solid currentColor; }
.gk-more a:hover { color: var(--fire); }
.gk-more a:focus-visible, .gk-past-card a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.gk-empty { margin: 16px auto 0; max-width: 560px; padding: 20px 18px; text-align: center; color: var(--on-ink); background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .25); border-radius: 10px; }
.gk-empty p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.8; }
.gk-error { border-color: var(--gold); }

/* ---------- これまでの激カタ馬（日付別のアコーディオン。新しい日が上・最新の日だけ開く） ---------- */
.gk-history { margin-top: 28px; display: grid; gap: 8px; }
.gk-history[hidden] { display: none; }
.gk-past { border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.gk-past > summary {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--on-ink); -webkit-tap-highlight-color: transparent;
}
.gk-past > summary::-webkit-details-marker { display: none; }
.gk-past > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.gk-past[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.gk-past > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.gk-past-date { font-size: 15px; }
.gk-past-count { font-size: 12px; color: var(--on-ink-sub); }
.gk-past-body { padding: 0 10px 10px; }
.gk-past-empty { margin: 0; padding: 8px 4px; font-size: 13px; color: var(--on-ink-sub); }
.gk-past-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gk-past-card { min-width: 0; }
/* 馬名の長さに関係なく、着順・メダルの位置をそろえる（馬名は2行分の高さ・着順はカードの下） */
.gk-past-card a { display: flex; flex-direction: column; height: 100%; padding: 8px 9px; color: var(--text); text-decoration: none; background: var(--paper); border-radius: 8px; border-top: 3px solid var(--fire-2); }
.gk-past-race { font-size: 12px; font-weight: 700; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk-past-rank { margin-right: 5px; color: var(--fire-2); }
.gk-past-horse { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.gk-past-umaban { min-width: 30px; height: 30px; padding: 0 4px; border-width: 1.5px; border-radius: 5px; }
.gk-past-umaban b { font-family: var(--num); font-size: 18px; font-weight: 700; line-height: 1; }
.gk-past-umaban small { display: none; }
.gk-past-name { min-width: 0; font-size: 14px; font-weight: 900; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gk-past-result { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--paper-line); min-height: 34px; display: flex; align-items: center; justify-content: flex-end; }
.gk-pos { display: inline-flex; align-items: baseline; gap: 2px; font-size: 13px; font-weight: 700; color: var(--text-sub); }
.gk-pos b { font-family: var(--num); font-size: 22px; line-height: 1; color: var(--text); }
.gk-pos i { font-style: normal; font-size: 20px; line-height: 1; margin-right: 3px; align-self: center; }
.gk-pos.is-top b { color: var(--fire-2); }
.gk-pos.is-other { font-size: 13px; color: var(--text-sub); }

.gk-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.gk-note { margin: 0; font-size: 12px; line-height: 1.8; color: var(--on-ink-sub); }

/* 狭いスマホ */
@media (max-width: 399px) {
  .gk-card { padding-left: 11px; padding-right: 11px; }
  .gk-nums { gap: 8px; }
  .gk-stat b { font-size: 21px; }
}
@media (min-width: 560px) {
  .gk-br-sp { display: none; }
}
@media (min-width: 760px) {
  .gk-page { padding: 8px 24px 48px; }
  .gk-head { padding-top: 28px; }
  .gk-lead { font-size: 16px; }
  /* 今日の4頭：2列×2段・過去の4頭：4列×1段 */
  .gk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .gk-past-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gk-loading-text span, .gk-found span, .gk-card { animation: none; }
  .gk-search { transition: none; }
}