/* ============================================================
   龍-BOATRACE  -  style.css
   Japanese Ink Painting (Sumi-e) Inspired Dark Theme
   ============================================================ */

/* ------------------------------------------------------------
   0. CSS Custom Properties
   ------------------------------------------------------------ */
:root {
  /* Brand — ink & gold */
  --c-primary:    #C9A84C;
  --c-primary-d:  #A68A3E;
  --c-primary-l:  #D4B85A;
  --c-navy:       #1A1A2E;
  --c-accent:     #C0392B;
  --c-accent-d:   #A93226;
  --c-green:      #2E7D32;
  --c-green-l:    #E8F5E9;
  --c-warning:    #E65100;
  --c-warning-l:  #FFF3E0;

  /* Text */
  --c-text:       #E8E0D0;
  --c-sub:        #9E9585;
  --c-link:       #D4B85A;

  /* Surfaces — parchment & ink */
  --c-bg:         #16161D;
  --c-card:       #1E1E28;
  --c-border:     #3A3A48;

  /* Lane colours */
  --lane-1-bg: #F5F0E8; --lane-1-fg: #1A1A2E;
  --lane-2-bg: #1A1A2E; --lane-2-fg: #E8E0D0;
  --lane-3-bg: #C0392B; --lane-3-fg: #fff;
  --lane-4-bg: #2471A3; --lane-4-fg: #fff;
  --lane-5-bg: #D4AC0D; --lane-5-fg: #1A1A2E;
  --lane-6-bg: #27AE60; --lane-6-fg: #fff;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.5);
  --shadow-card-hover: 0 8px 24px rgba(201,168,76,.15);

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 9999px;

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px;

  /* Typography */
  --font-sans: "Noto Serif JP", "Noto Sans JP", "Hiragino Mincho ProN",
               "Yu Mincho", serif;
  --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono",
               "Menlo", monospace;
  --c-main: #E8E0D0;
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;

  /* Gradients — ink & gold */
  --grad-primary: linear-gradient(135deg, #C9A84C, #A68A3E);
  --grad-header:  linear-gradient(135deg, #0D0D14 0%, #1A1A2E 100%);
  --grad-hero:    linear-gradient(135deg, #0D0D14 0%, #1A1A2E 50%, #2A2A3E 100%);
  --grad-card-top: linear-gradient(90deg, #C9A84C, #D4B85A, #C9A84C);

  /* Transition */
  --ease: cubic-bezier(.4,0,.2,1);

  /* Header height */
  --header-h: 56px;
}

/* ------------------------------------------------------------
   1. Reset & Base
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100vh;
  padding-top: var(--header-h);
}

a {
  color: var(--c-link);
  text-decoration: none;
  transition: color .2s var(--ease);
}
a:hover { color: var(--c-primary); }

h1 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.3;
  margin-bottom: var(--sp-4);
}

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

/* ------------------------------------------------------------
   2. Layout: Container & Grid
   ------------------------------------------------------------ */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

main.container {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

/* --- Card System --- */
.card {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  position: relative;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-card-top);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.card:hover::before {
  opacity: 1;
}

/* ------------------------------------------------------------
   3. Site Header — Glassmorphism
   ------------------------------------------------------------ */
.site-header {
  background: var(--grad-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #E8E0D0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
  border-bottom: 1px solid #C9A84C33;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: .1em;
  font-family: "Noto Serif JP", serif;
}
.site-logo:hover {
  text-decoration: none;
  color: var(--c-primary-l);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Hamburger Button ── */
.hb-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 8px;
  background: rgba(201,168,76,.08);
  cursor: pointer;
  gap: 4px;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.hb-btn:hover { background: rgba(201,168,76,.18); border-color: rgba(201,168,76,.4); }
.hb-btn:active { transform: scale(.93); }
.hb-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-primary);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
/* open state transforms */
.hb-btn.hb-open .hb-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hb-btn.hb-open .hb-line:nth-child(2) { opacity: 0; }
.hb-btn.hb-open .hb-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Drawer Overlay ── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.drawer-overlay.drawer-show { opacity: 1; pointer-events: auto; }

/* ── Drawer Panel ── */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 80vw;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,.6);
  border-right: 1px solid rgba(201,168,76,.15);
}
.drawer.drawer-show { transform: translateX(0); }

.drawer-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(201,168,76,.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-title {
  font-family: "Noto Serif JP", serif;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: .08em;
}
.drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.drawer-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.drawer-section {
  padding: 0 12px;
  margin-bottom: 8px;
}
.drawer-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(201,168,76,.5);
  padding: 8px 12px 4px;
  font-weight: 700;
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: #D0C8B8;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background .2s, color .2s;
}
.drawer-link:hover { background: rgba(201,168,76,.1); color: #fff; text-decoration: none; }
.drawer-link.drawer-active { background: rgba(201,168,76,.15); color: var(--c-primary); }
.drawer-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(201,168,76,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.drawer-link-text { flex: 1; }
.drawer-link-arrow { color: rgba(255,255,255,.2); font-size: 12px; }

.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(201,168,76,.1);
  font-size: 11px;
  color: #666;
  text-align: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-user {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.2);
  transition: background .2s, border-color .2s;
}
.header-user:hover {
  background: rgba(201,168,76,.2);
  border-color: rgba(201,168,76,.4);
  text-decoration: none;
}
.header-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A84C, #E8D48B);
  color: #1a1a2e;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-user-name {
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.desktop-nav a {
  color: rgba(232,224,208,.7);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.desktop-nav a:hover {
  background: rgba(201,168,76,.12);
  color: var(--c-primary);
  text-decoration: none;
}
.desktop-nav a.active {
  background: rgba(201,168,76,.15);
  color: var(--c-primary);
}



/* ------------------------------------------------------------
   4. Section Title
   ------------------------------------------------------------ */
.section-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-title::before {
  content: '';
  width: 4px;
  height: 1.1em;
  background: var(--grad-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   5. Race Tab Bar  (1R - 12R)
   ------------------------------------------------------------ */
.tab-bar {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tab-bar::-webkit-scrollbar { height: 4px; }
.tab-bar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

.tab-btn {
  min-width: 48px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-card);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s var(--ease);
  flex-shrink: 0;
  user-select: none;
}
.tab-btn:hover {
  background: #2A2A38;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.tab-btn.active {
  background: var(--grad-primary);
  color: #1A1A2E;
  border-color: var(--c-primary);
  box-shadow: 0 2px 8px rgba(201,168,76,.25);
}

.tab-past {
  opacity: .45;
  pointer-events: auto;
}
.tab-past.active {
  opacity: 1;
}

/* Content Tabs */
.content-tab-bar {
  display: flex;
  gap: 2px;
  background: #12121A;
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: var(--sp-3);
}

.content-tab-btn {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all .2s var(--ease);
}
.content-tab-btn:hover {
  color: var(--c-primary);
  background: rgba(201,168,76,.08);
}
.content-tab-btn.active {
  background: var(--c-card);
  color: var(--c-primary);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.content-tab-btn.tab-original {
  color: var(--c-accent);
  font-weight: 700;
}
.content-tab-btn.tab-original.active {
  color: #fff;
  background: var(--c-accent);
}

/* ------------------------------------------------------------
   6. Lane Number Chips
   ------------------------------------------------------------ */
.lane-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.lane-1 { background: var(--lane-1-bg); color: var(--lane-1-fg); border: 2px solid #3A3A48; }
.lane-2 { background: var(--lane-2-bg); color: var(--lane-2-fg); }
.lane-3 { background: var(--lane-3-bg); color: var(--lane-3-fg); }
.lane-4 { background: var(--lane-4-bg); color: var(--lane-4-fg); }
.lane-5 { background: var(--lane-5-bg); color: var(--lane-5-fg); }
.lane-6 { background: var(--lane-6-bg); color: var(--lane-6-fg); }

/* ------------------------------------------------------------
   7. Grade Badges (Gradient + Shadow)
   ------------------------------------------------------------ */
.grade-badge,
.badge-sg,
.badge-g1,
.badge-g2,
.badge-g3,
.badge-ippan {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  vertical-align: middle;
}

.badge-sg {
  background: linear-gradient(135deg, #C9A84C, #D4B85A);
  color: #1A1A2E;
  box-shadow: 0 2px 6px rgba(201,168,76,.3);
}
.badge-g1 {
  background: linear-gradient(135deg, #C0392B, #E74C3C);
  color: #fff;
  box-shadow: 0 2px 6px rgba(192,57,43,.3);
}
.badge-g2 {
  background: linear-gradient(135deg, #2471A3, #2E86C1);
  color: #fff;
  box-shadow: 0 2px 6px rgba(36,113,163,.3);
}
.badge-g3 {
  background: linear-gradient(135deg, #27AE60, #2ECC71);
  color: #fff;
  box-shadow: 0 2px 6px rgba(39,174,96,.3);
}
.badge-ippan {
  background: #2A2A38;
  color: var(--c-sub);
  border: 1px solid var(--c-border);
}

.badge-local {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  box-shadow: 0 2px 6px rgba(249,115,22,.3);
  line-height: 1.4;
}

/* Official data badge */
.badge-official {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  background: #64748B;
  color: #fff;
  letter-spacing: .02em;
  line-height: 1.3;
  vertical-align: middle;
  margin-right: 2px;
}
.official-data-note {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  padding: 6px 12px;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------
   8. Rank Badge (A1 / A2 / B1 / B2)
   ------------------------------------------------------------ */
.rank-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  min-width: 32px;
}
.rank-badge-a1, .rank-a1 { background: linear-gradient(135deg, #EF4444, #F87171); color: #fff; box-shadow: 0 2px 4px rgba(239,68,68,.25); }
.rank-badge-a2, .rank-a2 { background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; box-shadow: 0 2px 4px rgba(249,115,22,.25); }
.rank-badge-b1, .rank-b1 { background: linear-gradient(135deg, #3B82F6, #60A5FA); color: #fff; box-shadow: 0 2px 4px rgba(59,130,246,.25); }
.rank-badge-b2, .rank-b2 { background: #3A3A48; color: #9E9585; }

/* ------------------------------------------------------------
   9. Tables (shared)
   ------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--sp-4) * -1);
  padding: 0 var(--sp-4);
}

.data-table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: separate;
  border-spacing: 0;
}
.data-table th,
.data-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.data-table th {
  background: linear-gradient(135deg, #1A1A28, #22222E);
  color: var(--c-primary);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  z-index: 2;
}
.data-table tbody tr {
  transition: background .15s var(--ease);
}
.data-table tbody tr:hover {
  background: #22222E;
}
.data-table .text-right { text-align: right; }
.data-table .text-center { text-align: center; }

/* Sticky columns for horizontal-scroll tables */
.sticky-col {
  position: sticky;
  left: 0;
  background: var(--c-card);
  z-index: 1;
}
.sticky-col-2 {
  position: sticky;
  left: 30px;
  background: var(--c-card);
  z-index: 1;
}
.data-table th.sticky-col,
.data-table th.sticky-col-2,
.race-entry-table th.sticky-col,
.race-entry-table th.sticky-col-2 {
  background: linear-gradient(135deg, #1A1A28, #22222E);
  z-index: 3;
}

/* ------------------------------------------------------------
   10. Race Entry Table
   ------------------------------------------------------------ */
.race-entry-table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: separate;
  border-spacing: 0;
}
.race-entry-table th,
.race-entry-table td {
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
  vertical-align: middle;
}
.race-entry-table th {
  background: linear-gradient(135deg, #1A1A28, #22222E);
  color: var(--c-primary);
  font-weight: 600;
  font-size: var(--fs-xs);
  position: sticky;
  top: 0;
  z-index: 2;
}
.race-entry-table tbody tr {
  transition: background .15s var(--ease);
}
.race-entry-table tbody tr:hover {
  background: #22222E;
}

/* 欠場行 */
.absent-row {
  opacity: 0.5;
}
.absent-cell {
  text-align: center;
  color: #EF4444;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
}

.entry-name {
  font-weight: 700;
  color: var(--c-text);
  position: sticky;
  left: 0;
  background: var(--c-card);
  z-index: 1;
  min-width: 100px;
}
.race-entry-table tbody tr:hover .entry-name {
  background: #26263A;
}

.entry-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 1px;
}

/* ------------------------------------------------------------
   11. Exhibition Table
   ------------------------------------------------------------ */
.ex-table {
  width: max-content;
  min-width: 100%;
  font-size: var(--fs-sm);
  border-collapse: separate;
  border-spacing: 0;
}
.ex-table th,
.ex-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
}
.ex-name {
  text-align: left;
  font-weight: 600;
  min-width: 80px;
}
.ex-table th {
  background: linear-gradient(135deg, #1A1A28, #22222E);
  color: var(--c-primary);
  font-weight: 600;
  font-size: var(--fs-xs);
}
.ex-table tbody tr {
  transition: background .15s var(--ease);
}
.ex-table tbody tr:hover {
  background: #22222E;
}

/* ------------------------------------------------------------
   12. Deadline Banner
   ------------------------------------------------------------ */
.deadline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-4);
  transition: background .3s, border-color .3s, color .3s;
}
.deadline-cd {
  font-variant-numeric: tabular-nums;
  color: var(--c-sub);
}
.deadline-warn {
  border-color: #F59E0B;
  background: rgba(245,158,11,.08);
}
.deadline-warn .deadline-cd {
  color: #F59E0B;
  font-weight: 700;
}
.deadline-urgent {
  border-color: var(--c-accent);
  background: rgba(192,57,43,.08);
  animation: deadline-pulse 1.5s ease-in-out infinite;
}
.deadline-urgent .deadline-cd {
  color: var(--c-accent);
  font-weight: 700;
}
@keyframes deadline-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.2); }
  50% { box-shadow: 0 0 0 4px rgba(192,57,43,0); }
}
.deadline-past {
  opacity: .5;
}

/* ------------------------------------------------------------
   13. Countdown
   ------------------------------------------------------------ */
.countdown {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--c-primary);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  background: #2A2A38;
}
.countdown.past {
  color: var(--c-sub);
  background: #22222E;
}
.countdown-warn {
  color: var(--c-accent);
  background: #3A1A1A;
  animation: blink-warn 1s step-end infinite;
}
@keyframes blink-warn {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

/* ------------------------------------------------------------
   14. Weather Grid (Exhibition)
   ------------------------------------------------------------ */
/* ---- Environment Bar (compact weather strip) ---- */
.env-bar {
  display: flex;
  align-items: center;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 6px 0;
  margin-bottom: var(--sp-3);
}
.env-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 4px;
}
.env-label {
  font-size: 10px;
  color: var(--c-sub);
  font-weight: 500;
  letter-spacing: .03em;
}
.env-val {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
}
.env-sep {
  width: 1px;
  height: 24px;
  background: var(--c-border);
  flex-shrink: 0;
}
.env-warn .env-val {
  color: var(--c-accent);
  font-weight: 800;
}
.env-warn .env-label {
  color: var(--c-accent);
}

/* ------------------------------------------------------------
   15. Exhibition Section Head
   ------------------------------------------------------------ */
.ex-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------
   15b. 足比較テーブル (Foot Comparison)
   ------------------------------------------------------------ */
.ashi-table { font-variant-numeric: tabular-nums; }
.ashi-best { color: #EF4444; font-weight: 700; }
.ashi-eval { display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ashi-top { background: rgba(34,197,94,.15); color: #22C55E; }
.ashi-turn { background: rgba(59,130,246,.15); color: #3B82F6; }
.ashi-mid { color: var(--c-text); }
.ashi-low { color: #EAB308; }
.ashi-bad { color: #EF4444; }
.ashi-tilt-high { color: #F97316; font-weight: 600; }
.ashi-gap-mid { color: #EAB308; }
.ashi-gap-big { color: #EF4444; font-weight: 600; }
.tenkai-nige { color: #22C55E; font-weight: 600; font-size: 11px; }
.tenkai-risk { color: #EF4444; font-weight: 600; font-size: 11px; }
.tenkai-atk { color: #F97316; font-weight: 600; font-size: 11px; }

/* 節間展示T推移 */
.trend-table { font-variant-numeric: tabular-nums; }
.trend-today { background: rgba(201,168,76,.08); font-weight: 600; }
.trend-up { color: #22C55E; font-weight: 600; }
.trend-down { color: #EF4444; font-weight: 600; }
.od-loading-dot { color: var(--c-sub); font-size: 10px; }
.od-loading-inline { padding: 16px; text-align: center; color: var(--c-sub); font-size: 12px; }
.ex-head-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  background: rgba(201,168,76,.18);
  color: var(--c-primary);
  vertical-align: middle;
  letter-spacing: .5px;
}

/* 展示インサイト注釈 */
.ex-note {
  margin-top: var(--sp-2);
  padding: 10px 12px;
  background: rgba(30,30,40,.6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-sub);
}
.ex-note-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
}
.ex-note-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
}
.ex-note-dl dt {
  font-weight: 600;
  color: var(--c-primary);
  white-space: nowrap;
}
.ex-note-dl dd {
  margin: 0;
}
.ex-note-src {
  margin: 6px 0 0;
  font-size: 10px;
  opacity: .7;
}

/* ------------------------------------------------------------
   16. Start Exhibition (Visual)
   ------------------------------------------------------------ */
.start-exhibition {
  margin: var(--sp-4) 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Body — 全行で列幅を共有するため親をgrid化 */
.se-body {
  position: relative;
  background: linear-gradient(180deg, #1A2A3A 0%, #162838 30%, #14243A 70%, #122040 100%);
  display: grid;
  grid-template-columns: 36px 1fr 48px auto;
  grid-auto-rows: 36px;
  align-items: stretch;
}

/* Row: display:contents で子を親gridに参加させる */
.se-row {
  display: contents;
}
/* 行間の区切り線 — 各セルの下辺に */
.se-row > * {
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.se-row:last-of-type > * {
  border-bottom: none;
}

/* Course number */
.se-course {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 700;
}

/* Water area with inline start line */
.se-water {
  position: relative;
  height: 100%;
  overflow: visible;
}
.se-line-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #FBBF24;
  opacity: .7;
  z-index: 1;
  /* left は JS の LINE_POS から動的設定 */
}

/* Boat */
.se-boat {
  position: absolute;
  top: 50%;
  transform: translate(-100%, -50%);  /* 先端(右端)が left 位置に来る */
  z-index: 2;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,.25));
}
.se-boat-svg {
  display: block;
}

/* ST value */
.se-st {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.se-f {
  color: var(--c-accent);
  font-weight: 800;
}

/* Comment (desktop inline) */
.se-comment {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  padding: 0 var(--sp-2);
  white-space: nowrap;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
}

/* Note below 6 lanes */
.se-note {
  font-size: 10px;
  color: var(--c-sub);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0, 0, 0, .3);
  line-height: 1.5;
}

/* Slit prediction (3-column: コース | 水面 | ST) */
.sp-body {
  position: relative;
  background: linear-gradient(180deg, #1A2A3A 0%, #162838 30%, #14243A 70%, #122040 100%);
  display: grid;
  grid-template-columns: 36px 1fr 48px;
  grid-auto-rows: 36px;
  align-items: stretch;
}
.sp-row {
  display: contents;
}
.sp-row > * {
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.sp-row:last-of-type > * {
  border-bottom: none;
}

/* ------------------------------------------------------------
   17. Analysis Section
   ------------------------------------------------------------ */
.analysis-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(135deg, #1E1E28, #2A2A38);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text);
  font-weight: 500;
}
.analysis-banner strong {
  font-weight: 700;
}

.analysis-section {
  margin-bottom: var(--sp-6);
}

.analysis-section-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-primary);
}

/* Stats Row */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat-item {
  flex: 1;
  min-width: 100px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  text-align: center;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.stat-item:hover {
  border-color: var(--c-primary-l);
  box-shadow: var(--shadow-sm);
}
.stat-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.2;
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin-top: var(--sp-1);
  font-weight: 500;
}

/* Horizontal Bar Chart */
.bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.bar-label {
  min-width: 80px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
  color: var(--c-text);
}
.bar-track {
  flex: 1;
  height: 22px;
  background: #2A2A38;
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
  transition: width .6s var(--ease);
  min-width: 2px;
  position: relative;
  overflow: hidden;
}
/* Shimmer effect on bars */
.bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer-bar 2s ease-in-out infinite;
}
@keyframes shimmer-bar {
  0%   { left: -50%; }
  100% { left: 150%; }
}

.bar-value {
  min-width: 44px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

/* ------------------------------------------------------------
   18. Strength / Weakness Tags
   ------------------------------------------------------------ */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.strength-tag,
.weakness-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  margin: 2px;
}
.strength-tag {
  background: var(--c-green-l);
  color: #065F46;
  box-shadow: 0 1px 3px rgba(16,185,129,.15);
}
.weakness-tag {
  background: #3A1A1A;
  color: #EF4444;
  box-shadow: 0 1px 3px rgba(239,68,68,.15);
}

/* ------------------------------------------------------------
   19. Recent Player Section — Lane Tabs
   ------------------------------------------------------------ */
.recent-lane-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: var(--sp-3);
}
.recent-lane-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: color .2s, border-color .2s, background .2s;
}
.recent-lane-tab.active {
  color: var(--c-text);
  border-bottom-color: var(--c-primary);
  background: rgba(201,168,76,.06);
}
.rlt-name {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.rp-content {
  padding: 0 var(--sp-2);
}

/* RP Stats */
.rp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.rp-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: #2A2A38;
  color: var(--c-text);
}
.rp-chip-win {
  background: #3A1A1A;
  color: var(--c-accent);
}
.rp-chip-mae {
  background: #2A2A1A;
  color: #E65100;
}

/* ------------------------------------------------------------
   20. Recent Result Rows
   ------------------------------------------------------------ */
.rc-row-header {
  display: grid;
  grid-template-columns: 64px 70px 44px 36px 50px 54px 1fr;
  gap: var(--sp-1);
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary);
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(135deg, #1A1A28, #22222E);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.rc-row {
  display: grid;
  grid-template-columns: 64px 70px 44px 36px 50px 54px 1fr;
  gap: var(--sp-1);
  align-items: center;
  padding: var(--sp-2);
  font-size: var(--fs-sm);
  border-bottom: 1px solid #E0F2FE;
  transition: background .15s var(--ease);
}
.rc-row:hover {
  background: #22222E;
}
.rc-row:last-child {
  border-bottom: none;
}

.rc-row-win {
  background: #2A1A1A;
}
.rc-row-win:hover {
  background: #3A1A1A;
}

.rc-venue {
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-date {
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}
.rc-raceno {
  text-align: center;
  font-weight: 600;
}
.rc-rank {
  text-align: center;
  font-weight: 700;
}
.rc-st {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rc-kim {
  text-align: center;
  font-size: var(--fs-xs);
}

.rc-lane-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.rc-chip-mae {
  border: 2px solid var(--c-accent) !important;
}

.rc-venue-label {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  font-weight: 600;
  padding: var(--sp-2) 0 var(--sp-1);
}

.rc-empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

.rc-more-btn {
  display: block;
  width: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-card);
  color: var(--c-link);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  margin-top: var(--sp-2);
  transition: all .2s var(--ease);
}
.rc-more-btn:hover {
  background: #2A2A38;
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.rc-more-rows {
  display: none;
}
.rc-more-rows.is-visible {
  display: contents;
}

/* ------------------------------------------------------------
   21. Search Box
   ------------------------------------------------------------ */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-card);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-box:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(201,168,76,.12);
}
.search-box input {
  border: none;
  outline: none;
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: transparent;
}
.search-box input::placeholder {
  color: #5A5A68;
}

/* ------------------------------------------------------------
   22. Loading, Error, Empty States
   ------------------------------------------------------------ */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) 0;
  color: var(--c-sub);
  font-size: var(--fs-sm);
  gap: var(--sp-3);
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #2A2A38;
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-box {
  padding: var(--sp-4);
  background: #2A1A1A;
  border: 1px solid #4A2A2A;
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-md);
  color: #E8A0A0;
  font-size: var(--fs-sm);
  margin: var(--sp-4) 0;
}
.error-box strong {
  display: block;
  margin-bottom: var(--sp-1);
}

.empty-box {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--c-sub);
  font-size: var(--fs-sm);
  background: #22222E;
  border-radius: var(--radius-md);
  border: 2px dashed var(--c-border);
}

/* --- Skeleton Loading --- */
.skeleton {
  background: linear-gradient(90deg, #1E1E28 25%, #2A2A38 50%, #1E1E28 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
}

.skeleton-table-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.skeleton-table-row .skeleton-cell {
  height: 16px;
  border-radius: 4px;
  flex: 1;
}
.skeleton-table-row .skeleton-cell:first-child {
  flex: 0 0 32px;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: var(--sp-2);
}
.skeleton-line:last-child {
  width: 60%;
}

/* ------------------------------------------------------------
   23. Utility Classes
   ------------------------------------------------------------ */
.text-accent  { color: var(--c-accent) !important; }
.text-primary { color: var(--c-primary) !important; }
.text-sub     { color: var(--c-sub) !important; }
.text-green   { color: var(--c-green) !important; }
.text-sm      { font-size: var(--fs-sm) !important; }
.text-xs      { font-size: var(--fs-xs) !important; }
.text-bold    { font-weight: 700 !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-mono    { font-family: var(--font-mono) !important; }
.text-tabular { font-variant-numeric: tabular-nums !important; }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-6 { margin-bottom: var(--sp-6) !important; }
.p-0  { padding: 0 !important; }
.p-2  { padding: var(--sp-2) !important; }
.p-4  { padding: var(--sp-4) !important; }

.flex       { display: flex !important; }
.flex-wrap  { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.gap-1 { gap: var(--sp-1) !important; }
.gap-2 { gap: var(--sp-2) !important; }
.gap-3 { gap: var(--sp-3) !important; }
.gap-4 { gap: var(--sp-4) !important; }

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------
   23a. TOP Hero Banner & Summary Cards
   ------------------------------------------------------------ */

/* --- Hero Banner --- */
.top-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0A0A12 0%, #1A1A2E 40%, #0D1B2A 100%);
  padding: 32px 20px 28px;
  text-align: center;
  margin-bottom: var(--sp-3);
}

/* 水面 — 3層構造で奥行きと波の動きを表現 */
.top-hero-water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48%;
  z-index: 1;
}
/* 水面レイヤー1: ベース（最奥） */
.top-hero-water-1 {
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg,
    rgba(8,22,38,.0) 0%,
    rgba(10,28,48,.2) 12%,
    rgba(12,30,50,.4) 45%,
    rgba(8,22,40,.55) 100%
  );
  animation: hero-wave-1 6s ease-in-out infinite;
}
/* 水面レイヤー2: 中層（ゆるい波） */
.top-hero-water-2 {
  position: absolute;
  bottom: 0; left: -5%; width: 110%; height: 80%;
  background: linear-gradient(180deg,
    rgba(15,40,65,.0) 0%,
    rgba(15,38,58,.12) 30%,
    rgba(12,32,52,.25) 70%,
    rgba(10,28,48,.35) 100%
  );
  animation: hero-wave-2 4.5s ease-in-out infinite .8s;
}
/* 水面レイヤー3: 手前（浅い波紋） */
.top-hero-water-3 {
  position: absolute;
  bottom: 0; left: -3%; width: 106%; height: 55%;
  background: linear-gradient(180deg,
    rgba(18,45,70,.0) 0%,
    rgba(16,40,62,.08) 40%,
    rgba(12,35,55,.18) 100%
  );
  animation: hero-wave-3 3.8s ease-in-out infinite 1.6s;
}

/* 水面の光の反射ライン（水平） */
.top-hero-water::before {
  content: '';
  position: absolute;
  top: 8%; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(140,180,210,.06) 20%,
    rgba(160,200,230,.1) 50%, rgba(140,180,210,.06) 80%, transparent 100%);
}
/* 月光シマー — 水面を流れる光 */
.top-hero-water::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(180,210,240,.02) 30%,
    rgba(200,225,250,.05) 50%, rgba(180,210,240,.02) 70%, transparent 100%);
  animation: hero-shimmer 8s linear infinite 2s;
}

@keyframes hero-wave-1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes hero-wave-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -3px); }
}
@keyframes hero-wave-3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, -2px); }
}
@keyframes hero-shimmer {
  0%   { left: -50%; }
  100% { left: 150%; }
}

/* ミスト — 大気感 */
.top-hero-mist {
  position: absolute;
  bottom: 30%; left: 0; width: 100%; height: 25%;
  background: linear-gradient(180deg,
    transparent 0%, rgba(15,25,40,.06) 50%, transparent 100%);
  z-index: 2;
  animation: hero-mist 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-mist {
  0%, 100% { opacity: .5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(8px); }
}

/* 6艇レース — 斜め視点・奥行きあり */
.top-hero-boat-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.top-hero-boat {
  position: absolute;
  left: -60px;
}
.top-hero-boat svg {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  position: relative;
  z-index: 1;
}

/* 引き波 — ボートの子要素として後方にV字拡散 */
.top-hero-wake {
  position: absolute;
  right: 100%;
  top: 50%;
  overflow: visible;
  pointer-events: none;
}
/* 引き波 上側ライン */
.top-hero-wake::before {
  content: '';
  position: absolute;
  right: 0;
  width: 100%; height: 1px;
  transform-origin: right center;
}
/* 引き波 下側ライン（V字） */
.top-hero-wake::after {
  content: '';
  position: absolute;
  right: 0;
  width: 70%; height: 1px;
  transform-origin: right center;
}

/* 飛沫 — ボート先端の水しぶき */
.top-hero-spray {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  pointer-events: none;
}

/*
  遠近法レイアウト:
  1号艇(奥・上) = 小さく・薄い・速め
  6号艇(手前・下) = 大きく・濃い・遅め
*/

/* 1号艇(白) — 最奥 */
.top-hero-boat-1 { bottom: 44%; animation: hero-race 11.5s linear infinite 0s; }
.top-hero-boat-1 svg { width: 16px; height: 6px; opacity: .18; animation: hero-bob-1 3.2s ease-in-out infinite; }
.top-hero-wake-1 { width: 22px; height: 4px; margin-top: -2px; }
.top-hero-wake-1::before { top: 0; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.03) 50%, rgba(160,195,220,.07) 100%); transform: rotate(-1deg); }
.top-hero-wake-1::after  { top: 2px; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.02) 50%, rgba(160,195,220,.05) 100%); transform: rotate(1deg); }
.top-hero-spray-1 { width: 2px; height: 2px; background: rgba(180,210,230,.06); box-shadow: 2px -1px 0 rgba(180,210,230,.03); }

/* 2号艇(黒) */
.top-hero-boat-2 { bottom: 37%; animation: hero-race 11.9s linear infinite .6s; }
.top-hero-boat-2 svg { width: 20px; height: 7px; opacity: .24; animation: hero-bob-2 3.5s ease-in-out infinite; }
.top-hero-wake-2 { width: 32px; height: 5px; margin-top: -2.5px; }
.top-hero-wake-2::before { top: 0; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.04) 50%, rgba(160,195,220,.09) 100%); transform: rotate(-1.5deg); }
.top-hero-wake-2::after  { top: 3px; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.03) 50%, rgba(160,195,220,.06) 100%); transform: rotate(1.5deg); }
.top-hero-spray-2 { width: 2px; height: 2px; background: rgba(180,210,230,.08); box-shadow: 2px -1px 0 rgba(180,210,230,.04); }

/* 3号艇(赤) */
.top-hero-boat-3 { bottom: 30%; animation: hero-race 12.4s linear infinite 1.1s; }
.top-hero-boat-3 svg { width: 24px; height: 8px; opacity: .32; animation: hero-bob-3 3.8s ease-in-out infinite; }
.top-hero-wake-3 { width: 44px; height: 6px; margin-top: -3px; }
.top-hero-wake-3::before { top: 0; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.05) 50%, rgba(160,195,220,.12) 100%); transform: rotate(-2deg); }
.top-hero-wake-3::after  { top: 4px; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.03) 50%, rgba(160,195,220,.08) 100%); transform: rotate(2deg); }
.top-hero-spray-3 { width: 3px; height: 3px; background: rgba(180,210,230,.1); box-shadow: 3px -1px 0 rgba(180,210,230,.05); }

/* 4号艇(青) */
.top-hero-boat-4 { bottom: 22%; animation: hero-race 13s linear infinite 1.6s; }
.top-hero-boat-4 svg { width: 28px; height: 10px; opacity: .4; animation: hero-bob-4 4.1s ease-in-out infinite; }
.top-hero-wake-4 { width: 58px; height: 8px; margin-top: -4px; }
.top-hero-wake-4::before { top: 0; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.06) 50%, rgba(160,195,220,.15) 100%); transform: rotate(-2.5deg); }
.top-hero-wake-4::after  { top: 5px; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.04) 50%, rgba(160,195,220,.1) 100%); transform: rotate(2.5deg); }
.top-hero-spray-4 { width: 3px; height: 3px; background: rgba(180,210,230,.14); box-shadow: 3px -2px 0 rgba(180,210,230,.07); }

/* 5号艇(黄) */
.top-hero-boat-5 { bottom: 13%; animation: hero-race 13.6s linear infinite 2.1s; }
.top-hero-boat-5 svg { width: 33px; height: 11px; opacity: .5; animation: hero-bob-5 4.4s ease-in-out infinite; }
.top-hero-wake-5 { width: 75px; height: 10px; margin-top: -5px; }
.top-hero-wake-5::before { top: 0; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.07) 50%, rgba(160,195,220,.18) 100%); transform: rotate(-3deg); }
.top-hero-wake-5::after  { top: 7px; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.04) 50%, rgba(160,195,220,.12) 100%); transform: rotate(3deg); }
.top-hero-spray-5 { width: 4px; height: 3px; background: rgba(180,210,230,.18); box-shadow: 4px -2px 0 rgba(180,210,230,.08); }

/* 6号艇(緑) — 最手前 */
.top-hero-boat-6 { bottom: 3%; animation: hero-race 14.2s linear infinite 2.6s; }
.top-hero-boat-6 svg { width: 38px; height: 13px; opacity: .6; animation: hero-bob-6 4.8s ease-in-out infinite; }
.top-hero-wake-6 { width: 95px; height: 12px; margin-top: -6px; }
.top-hero-wake-6::before { top: 0; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.08) 50%, rgba(160,195,220,.22) 100%); transform: rotate(-3.5deg); }
.top-hero-wake-6::after  { top: 8px; background: linear-gradient(90deg, transparent 0%, rgba(160,195,220,.05) 50%, rgba(160,195,220,.15) 100%); transform: rotate(3.5deg); }
.top-hero-spray-6 { width: 4px; height: 4px; background: rgba(180,210,230,.22); box-shadow: 5px -2px 0 rgba(180,210,230,.1), 2px -3px 0 rgba(200,220,240,.08); }

/* レースアニメーション */
@keyframes hero-race {
  0%   { transform: translateX(-60px); opacity: 0; }
  3%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100px)); opacity: 0; }
}

/* 各艇独立の上下揺れ — 奥は小さく速く、手前は大きくゆったり */
@keyframes hero-bob-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(.3deg); }
}
@keyframes hero-bob-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.5px) rotate(.4deg); }
}
@keyframes hero-bob-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(.5deg); }
}
@keyframes hero-bob-4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2.5px) rotate(.6deg); }
}
@keyframes hero-bob-5 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(.7deg); }
}
@keyframes hero-bob-6 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3.5px) rotate(.8deg); }
}

.top-hero-content {
  position: relative;
  z-index: 1;
}

.top-hero-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  animation: hero-fadein 1s ease-out both;
}

.top-hero-dragon {
  font-family: "Noto Serif JP", serif;
  font-size: 52px;
  font-weight: 700;
  background: linear-gradient(180deg, #D4B85A 0%, #C9A84C 40%, #A68A3E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(201,168,76,.3));
  line-height: 1;
}

.top-hero-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #E8E0D0;
  opacity: .85;
}

.top-hero-tagline {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 4px;
  color: #9E9585;
  text-transform: uppercase;
  animation: hero-fadein 1s ease-out .3s both;
}

@keyframes hero-fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Summary Cards --- */
/* 直近締切バー */
.ts-next-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--sp-3);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  animation: ts-bar-in .5s ease-out both;
}
.ts-next-bar:hover {
  border-color: var(--c-primary-d);
  box-shadow: 0 2px 12px rgba(201,168,76,.1);
}
@keyframes ts-bar-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ts-next-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  flex-shrink: 0;
  animation: ts-dot-pulse 2s ease-in-out infinite;
}
@keyframes ts-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.4); }
  50% { box-shadow: 0 0 0 5px rgba(201,168,76,0); }
}
.ts-next-venue {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
}
.ts-next-cd {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 締切間近 */
.ts-next-urgent {
  border-color: var(--c-accent);
  background: rgba(192,57,43,.06);
}
.ts-next-urgent .ts-next-dot {
  background: var(--c-accent);
  animation: ts-dot-urgent 1.2s ease-in-out infinite;
}
@keyframes ts-dot-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); }
  50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}
.ts-next-urgent .ts-next-cd {
  color: var(--c-accent);
  font-weight: 700;
}

/* 上位グレード開催バナー */
.ts-grade-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
  animation: ts-bar-in .5s ease-out .15s both;
}

.ts-grade-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  background: var(--c-card);
  flex: 1;
  min-width: 0;
}
.ts-grade-item.ts-grade-sg {
  border-color: rgba(201,168,76,.4);
  background: linear-gradient(135deg, rgba(201,168,76,.08), rgba(30,30,40,.9));
}
.ts-grade-item.ts-grade-g1 {
  border-color: rgba(192,57,43,.4);
  background: linear-gradient(135deg, rgba(192,57,43,.08), rgba(30,30,40,.9));
}
.ts-grade-item.ts-grade-g2 {
  border-color: rgba(36,113,163,.4);
  background: linear-gradient(135deg, rgba(36,113,163,.08), rgba(30,30,40,.9));
}

.ts-grade-badge {
  flex-shrink: 0;
}

.ts-grade-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

/* ライブインジケーター（グリッドセル内） */
.vg-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ECC71;
  margin-right: 3px;
  flex-shrink: 0;
  animation: vg-live-blink 2s ease-in-out infinite;
}
@keyframes vg-live-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
  50% { opacity: .6; box-shadow: 0 0 0 4px rgba(46,204,113,0); }
}
.vg-done-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #888;
  margin-right: 3px;
  flex-shrink: 0;
  opacity: .6;
}

/* ── Venue Features Page ── */
.vf-page-header {
  text-align: center;
  padding: 20px 0 12px;
}
.vf-page-title {
  font-family: "Noto Serif JP", serif;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: .06em;
  margin: 0;
}
.vf-page-sub {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin: 4px 0 0;
}

/* Grand summary */
.vf-grand-summary {
  background: linear-gradient(135deg, rgba(201,168,76,.08), rgba(201,168,76,.02));
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  text-align: center;
}
.vf-gs-period {
  font-size: 11px;
  color: var(--c-sub);
  margin-bottom: 8px;
  letter-spacing: .03em;
}
.vf-gs-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.vf-gs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.vf-gs-num {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.vf-gs-unit {
  font-size: 10px;
  color: var(--c-sub);
  letter-spacing: .05em;
}

/* Card data bar */
.vf-card-data {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.vf-data-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(201,168,76,.1);
  color: var(--c-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vf-data-period {
  font-size: 10px;
  color: var(--c-sub);
  margin-left: auto;
}

.vf-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 80px;
}
.vf-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color .2s;
}
.vf-card:hover { border-color: rgba(201,168,76,.3); }
.vf-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.vf-card-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
}
.vf-card-pref {
  font-size: var(--fs-xs);
  color: var(--c-sub);
}
.vf-card-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.vf-attr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--c-border);
  color: #ccc;
}
.vf-attr-label {
  color: var(--c-sub);
  font-size: 10px;
}
.vf-card-stats { margin-bottom: 10px; }
.vf-stats-label {
  font-size: 10px;
  color: rgba(201,168,76,.6);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 6px;
}
.vf-course-bars { display: flex; flex-direction: column; gap: 3px; }
.vf-course-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vf-course-num {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vf-course-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
}
.vf-course-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.vf-course-pct {
  font-size: 11px;
  color: #aaa;
  width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vf-card-kim { margin-bottom: 10px; }
.vf-kim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vf-kim-chip {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(14,165,233,.1);
  border: 1px solid rgba(14,165,233,.2);
  color: #7dd3fc;
}
.vf-kim-chip strong {
  color: #fff;
  margin-left: 2px;
}
.vf-card-link {
  display: block;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--c-primary);
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
}
.vf-card-link:hover { color: var(--c-primary-l); }

/* --- Responsive --- */
@media (max-width: 600px) {
  .top-hero {
    padding: 28px 16px 24px;
    margin-bottom: var(--sp-3);
    border-radius: var(--radius-md);
  }
  .top-hero-dragon { font-size: 38px; }
  .top-hero-sub { font-size: 16px; letter-spacing: 4px; }
  .top-hero-tagline { font-size: 9px; letter-spacing: 3px; }
  .top-hero-boat-wrap { height: 48%; }
  .top-hero-boat-6 svg { width: 30px; height: 10px; }
  .top-hero-wake-6 { width: 60px; }
  .top-hero-spray { display: none; }

  .ts-next-bar { padding: 6px 10px; margin-bottom: var(--sp-2); }
  .ts-next-venue { font-size: 12px; }
  .ts-next-cd { font-size: 12px; }
  .ts-grade-item { padding: 6px 10px; }
  .ts-grade-text { font-size: 11px; }
}

@media (max-width: 374px) {
  .top-hero {
    padding: 22px 12px 18px;
  }
  .top-hero-dragon { font-size: 32px; }
  .top-hero-sub { font-size: 14px; letter-spacing: 3px; }
  .top-hero-title { gap: 8px; }
  .ts-next-bar { padding: 5px 8px; gap: 6px; }
}

/* ------------------------------------------------------------
   23b. Venue Grid — 全24場グリッド（公式準拠レイアウト）
   ------------------------------------------------------------ */
.vg-date-nav {
  text-align: center;
  padding: var(--sp-2) 0 var(--sp-3);
}
.vg-date-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-primary);
}

/* 4列×6行 固定グリッド */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-card);
}

.vg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 10px 6px;
  min-height: 72px;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  transition: background .15s var(--ease);
  gap: 2px;
}
.vg-cell:nth-child(4n) { border-right: none; }
.vg-cell:nth-last-child(-n+4) { border-bottom: none; }

/* 非開催 */
.vg-inactive {
  background: #14141C;
}
.vg-inactive .vg-name {
  font-size: var(--fs-sm);
  color: #5A5A68;
  font-weight: 400;
}
.vg-inactive:hover {
  background: #1A1A24;
}

/* 開催中 */
.vg-active {
  background: #1E1E28;
}
.vg-active:hover {
  background: #26263A;
}

/* グレード + 会場名 横並び */
.vg-head-row {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.vg-name-active {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
}

/* グレードバッジ */
.vg-grade {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.4;
}
.vg-grade-ippan { background: #3A3A48; color: #9E9585; }
.vg-grade-sg    { background: #C9A84C; color: #1A1A2E; }
.vg-grade-g1    { background: #C0392B; color: #FFFFFF; }
.vg-grade-g2    { background: #2471A3; color: #FFFFFF; }
.vg-grade-g3    { background: #27AE60; color: #FFFFFF; }

/* 日目表示 */
.vg-day {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  line-height: 1.3;
}

/* レース進行 */
.vg-race-info {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary-d);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.vg-race-info.vg-soon {
  color: var(--c-accent);
  animation: blink-warn 1s step-end infinite;
}

.vg-status {
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.vg-finished {
  color: #94A3B8;
}

/* スマホ: 4列維持、コンパクト化 */
@media (max-width: 600px) {
  .venue-grid {
    border-radius: var(--radius-sm);
  }
  .vg-cell {
    padding: 8px 3px;
    min-height: 60px;
    gap: 1px;
  }
  .vg-name-active {
    font-size: 13px;
  }
  .vg-inactive .vg-name {
    font-size: 11px;
  }
  .vg-grade {
    font-size: 9px;
    padding: 0 4px;
  }
  .vg-day,
  .vg-race-info,
  .vg-status {
    font-size: 10px;
  }
  .vg-date-title {
    font-size: var(--fs-md);
  }
}

/* 極小画面 (iPhone SE等) */
@media (max-width: 374px) {
  .vg-cell {
    padding: 6px 2px;
    min-height: 54px;
  }
  .vg-name-active {
    font-size: 12px;
  }
  .vg-inactive .vg-name {
    font-size: 10px;
  }
  .vg-grade {
    font-size: 8px;
  }
}

/* ------------------------------------------------------------
   24. Venue Page / Card Grid Items
   ------------------------------------------------------------ */
.venue-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
}
.venue-card:hover {
  text-decoration: none;
}
.venue-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.venue-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
}
.venue-sub {
  font-size: var(--fs-sm);
  color: var(--c-sub);
}
.venue-card-event {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary);
  margin-top: var(--sp-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.venue-card-info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-sub);
}
.venue-card-simple {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}

/* ------------------------------------------------------------
   25. Tooltip (generic)
   ------------------------------------------------------------ */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(.92);
  background: var(--c-navy);
  color: #fff;
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  z-index: 50;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ------------------------------------------------------------
   26. Footer
   ------------------------------------------------------------ */
.site-footer {
  margin-top: var(--sp-10);
  padding: var(--sp-6) 0;
  background: #0D0D14;
  color: rgba(232,224,208,.5);
  border-top: 1px solid #C9A84C33;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.footer-logo {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-primary);
  font-family: "Noto Serif JP", serif;
  letter-spacing: .1em;
}
.footer-links {
  display: flex;
  gap: var(--sp-4);
}
.footer-links a {
  color: rgba(255,255,255,.7);
  font-size: var(--fs-sm);
  transition: color .2s var(--ease);
}
.footer-links a:hover {
  color: #fff;
  text-decoration: none;
}
.footer-copy {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
}

/* ------------------------------------------------------------
   27. Scrollbar Styling
   ------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5A5A68;
}

/* ------------------------------------------------------------
   28. Buttons (generic)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease);
  user-select: none;
  text-decoration: none;
}
.btn:hover {
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--grad-primary);
  color: #1A1A2E;
  box-shadow: 0 2px 8px rgba(201,168,76,.25);
}
.btn-primary:hover {
  background: var(--c-primary-d);
  box-shadow: 0 4px 12px rgba(201,168,76,.35);
  transform: translateY(-1px);
  color: #1A1A2E;
}
.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn-outline:hover {
  background: #2A2A38;
  color: var(--c-primary-d);
}
.btn-sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------
   29. Animations
   ------------------------------------------------------------ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp .4s var(--ease) both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn .3s var(--ease) both;
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 600px; }
}
.slide-down {
  animation: slideDown .3s var(--ease) both;
  overflow: hidden;
}

/* Stagger children animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp .4s var(--ease) both;
}
.stagger-children > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-children > *:nth-child(2)  { animation-delay: 50ms; }
.stagger-children > *:nth-child(3)  { animation-delay: 100ms; }
.stagger-children > *:nth-child(4)  { animation-delay: 150ms; }
.stagger-children > *:nth-child(5)  { animation-delay: 200ms; }
.stagger-children > *:nth-child(6)  { animation-delay: 250ms; }
.stagger-children > *:nth-child(7)  { animation-delay: 300ms; }
.stagger-children > *:nth-child(8)  { animation-delay: 350ms; }
.stagger-children > *:nth-child(9)  { animation-delay: 400ms; }
.stagger-children > *:nth-child(10) { animation-delay: 450ms; }
.stagger-children > *:nth-child(11) { animation-delay: 500ms; }
.stagger-children > *:nth-child(12) { animation-delay: 550ms; }
.stagger-children > *:nth-child(n+13) { animation-delay: 600ms; }

/* Content swap animation */
.content-swap {
  animation: contentSwap .35s var(--ease) both;
}
@keyframes contentSwap {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Section divider */
.section-divider {
  height: 3px;
  background: var(--grad-primary);
  border: none;
  margin: var(--sp-6) 0;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   30. Player Hero Card
   ------------------------------------------------------------ */
.player-hero {
  background: var(--grad-hero);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  color: #fff;
  margin-bottom: var(--sp-4);
  position: relative;
  overflow: hidden;
  border: none;
}
.player-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  border-radius: 50%;
}
.player-hero::after {
  display: none;
}
.player-hero:hover {
  box-shadow: 0 8px 32px rgba(12,74,110,.3);
  transform: none;
}

.player-hero .player-header h1 {
  color: #fff;
  font-size: var(--fs-2xl);
  font-weight: 800;
}
.player-hero .player-header-sub {
  color: rgba(255,255,255,.8);
}
.player-hero .player-header-sub .rank-badge {
  box-shadow: none;
}

.player-hero .stat-row {
  margin-bottom: 0;
}
.player-hero .stat-item {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.player-hero .stat-item:hover {
  border-color: rgba(255,255,255,.4);
  box-shadow: none;
}
.player-hero .stat-value {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-weight: 800;
}
.player-hero .stat-label {
  color: rgba(255,255,255,.7);
}

/* Player header (non-hero) */
.player-header {
  margin-bottom: var(--sp-3);
}
.player-header h1 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.3;
}
.player-header-sub {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-sub);
  margin-top: var(--sp-1);
}

/* Weather card grid */
.weather-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* ------------------------------------------------------------
   32. Weather Analysis Grid (player page)
   ------------------------------------------------------------ */
.weather-analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.weather-analysis-grid h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}

/* Weather label */
.weather-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin-top: var(--sp-1);
}

/* Analysis Note & Stat Sub */
.analysis-note {
  font-size: var(--fs-sm);
  color: var(--c-sub);
  margin-bottom: var(--sp-3);
}
.stat-sub {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin-left: 2px;
}

/* ------------------------------------------------------------
   33. Search List & Items
   ------------------------------------------------------------ */
.search-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--sp-2);
  background: var(--c-card);
  box-shadow: var(--shadow-md);
}
.search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid #E0F2FE;
  transition: background .15s var(--ease);
  text-decoration: none;
  color: var(--c-text);
}
.search-item:last-child {
  border-bottom: none;
}
.search-item:hover {
  background: #22222E;
  text-decoration: none;
}
.search-name {
  font-weight: 600;
}
.search-sub {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ------------------------------------------------------------
   34. Mini Bar Chart (inline in tables)
   ------------------------------------------------------------ */
.mini-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 80px;
}
.mini-bar-fill {
  height: 14px;
  border-radius: var(--radius-pill);
  transition: width .4s var(--ease);
  min-width: 2px;
}
.mini-bar-val {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   35. F/L Badge (Flying / Late Start)
   ------------------------------------------------------------ */
.badge-fl {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: #2A1A1A;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  line-height: 1.4;
  margin-left: 2px;
}

/* ------------------------------------------------------------
   36. Breadcrumb
   ------------------------------------------------------------ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) 0;
}
.breadcrumb-link {
  color: var(--c-link);
}
.breadcrumb-link:hover {
  text-decoration: underline;
}
.breadcrumb-sep {
  color: var(--c-border);
  margin: 0 var(--sp-1);
}
.breadcrumb-current {
  color: var(--c-primary);
  font-weight: 600;
}

/* ------------------------------------------------------------
   37. Race Date Display
   ------------------------------------------------------------ */
.race-date-display {
  font-size: var(--fs-sm);
  color: var(--c-sub);
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------
   38. Print Styles
   ------------------------------------------------------------ */
@media print {
  .site-header,
  .site-footer,
  .tab-bar,
  .content-tab-bar,
  .search-box,
  .rc-more-btn,
  body { background: #fff; font-size: 12px; padding-top: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .container { max-width: 100%; padding: 0; }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ------------------------------------------------------------
   39. Tablet  (max-width: 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --header-h: 52px;
  }

  .container {
    padding: 0 var(--sp-3);
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .card {
    padding: var(--sp-3);
  }

  /* Header: hide desktop nav on mobile */
  .desktop-nav {
    display: none;
  }

  /* Weather */
  .weather-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats */
  .stat-row {
    gap: var(--sp-2);
  }
  .stat-item {
    min-width: 80px;
  }

  /* Bar chart: label on top, bar full width on tablet */
  .bar-row {
    flex-wrap: wrap;
  }
  .bar-label {
    min-width: auto;
    width: 100%;
    text-align: left;
    font-size: var(--fs-xs);
    margin-bottom: 2px;
  }
  .bar-track {
    flex: 1;
    min-width: 0;
  }
  .bar-value {
    min-width: 40px;
  }

  /* Tables remain visible on mobile — horizontal scroll enabled */
  .table-scroll {
    margin: 0 calc(var(--sp-3) * -1);
    padding: 0 var(--sp-3);
  }
  .data-table,
  .race-entry-table,
  .ex-table {
    font-size: 12px;
  }
  .data-table th,
  .data-table td,
  .race-entry-table th,
  .race-entry-table td,
  .ex-table th,
  .ex-table td {
    padding: var(--sp-1) var(--sp-2);
  }
  .entry-name {
    min-width: 80px;
  }

  /* Recent result rows */
  .rc-row,
  .rc-row-header {
    grid-template-columns: 52px 60px 38px 32px 44px 48px 1fr;
    font-size: var(--fs-xs);
    gap: 2px;
  }

  /* Deadline banner */
  .deadline-banner {
    font-size: var(--fs-xs);
    padding: var(--sp-2) var(--sp-3);
  }

  /* Analysis banner */
  .analysis-banner {
    font-size: var(--fs-xs);
    padding: var(--sp-2) var(--sp-3);
  }

  /* Content tabs */
  .content-tab-btn {
    padding: var(--sp-2) var(--sp-1);
    font-size: var(--fs-xs);
  }

  /* Weather analysis grid */
  .weather-analysis-grid {
    grid-template-columns: 1fr;
  }
  .mini-bar {
    min-width: 60px;
  }

  /* Player hero */
  .player-hero {
    padding: var(--sp-4);
  }
}

/* ------------------------------------------------------------
   40. Mobile  (max-width: 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  :root {
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-lg: 15px;
    --fs-xl: 18px;
    --header-h: 48px;
  }

  html {
    font-size: 13px;
  }

  .container {
    padding: 0 var(--sp-2);
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .card {
    padding: var(--sp-3);
    border-radius: var(--radius-md);
  }

  /* Tab bar scrollable */
  .tab-bar {
    gap: 4px;
    padding: var(--sp-1) 0;
    margin-bottom: var(--sp-2);
  }
  .tab-btn {
    min-width: 40px;
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-xs);
  }

  /* Content tabs */
  .content-tab-bar {
    border-radius: var(--radius-sm);
    padding: 2px;
    margin-bottom: var(--sp-3);
  }
  .content-tab-btn {
    padding: var(--sp-2) var(--sp-1);
    font-size: 11px;
  }

  /* Env bar mobile */
  .env-bar {
    padding: 4px 0;
  }
  .env-val {
    font-size: var(--fs-sm);
  }
  .env-label {
    font-size: 9px;
  }

  /* Stats compact */
  .stat-row {
    gap: var(--sp-2);
  }
  .stat-item {
    min-width: 70px;
    padding: var(--sp-2);
  }
  .stat-value {
    font-size: var(--fs-lg);
  }

  /* Bar chart */
  .bar-track {
    height: 16px;
  }
  .bar-value {
    min-width: 36px;
    font-size: 11px;
  }

  /* Mini-bar: hide bar on small screens, show value only */
  .mini-bar-fill {
    display: none;
  }
  .mini-bar {
    min-width: auto;
  }

  /* Recent rows */
  .rc-row,
  .rc-row-header {
    grid-template-columns: 44px 56px 34px 28px 40px 44px 1fr;
    font-size: 11px;
    padding: var(--sp-1);
  }

  /* Recent lane tabs mobile */
  .recent-lane-tab {
    padding: 6px 2px 5px;
    gap: 2px;
  }
  .rlt-name {
    font-size: 10px;
  }

  /* Tables further compacted on mobile */
  .table-scroll {
    margin: 0 calc(var(--sp-2) * -1);
    padding: 0 var(--sp-2);
  }
  .data-table,
  .race-entry-table,
  .ex-table {
    font-size: 11px;
  }
  .data-table th,
  .data-table td,
  .race-entry-table th,
  .race-entry-table td,
  .ex-table th,
  .ex-table td {
    padding: 4px 6px;
  }
  .entry-name {
    min-width: 72px;
  }
  /* Sticky column adjustments for mobile */
  .sticky-col-2 {
    left: 26px;
  }

  /* Search box */
  .search-box {
    padding: var(--sp-2);
  }
  .search-box input {
    font-size: var(--fs-xs);
  }

  /* Start exhibition mobile */
  .se-body {
    grid-template-columns: 26px 1fr 42px auto;
    grid-auto-rows: 30px;
  }
  .se-st {
    font-size: 11px;
    padding: 0 4px;
  }
  .se-comment {
    font-size: 9px;
    padding: 0 4px;
  }
  .se-note {
    font-size: 9px;
  }
  .sp-body {
    grid-template-columns: 26px 1fr 42px;
    grid-auto-rows: 30px;
  }

  /* Countdown */
  .countdown {
    font-size: var(--fs-sm);
  }

  /* Deadline */
  .deadline-banner {
    flex-direction: column;
    gap: var(--sp-1);
    text-align: center;
  }

  /* Lane chips smaller */
  .lane-num {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  /* Badges */
  .badge-sg,
  .badge-g1,
  .badge-g2,
  .badge-g3,
  .badge-ippan,
  .badge-local {
    padding: 1px 6px;
    font-size: 10px;
  }

  /* Buttons */
  .btn {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
  }

  /* Section heads */
  .ex-section-head {
    font-size: var(--fs-sm);
    padding: var(--sp-2) 0;
  }
  .analysis-section-title {
    font-size: var(--fs-sm);
  }

  /* Venue name */
  .venue-name {
    font-size: var(--fs-md);
  }

  /* Player header */
  .player-header h1 {
    font-size: var(--fs-xl);
  }
  .player-hero .player-header h1 {
    font-size: var(--fs-xl);
  }

  /* Search item */
  .search-item {
    padding: var(--sp-2);
    font-size: var(--fs-sm);
  }

  /* Player hero compact */
  .player-hero {
    padding: var(--sp-3);
  }
}

/* ------------------------------------------------------------
   41. Very Small Screens  (max-width: 360px)
   ------------------------------------------------------------ */
@media (max-width: 360px) {
  .site-logo {
    font-size: var(--fs-md);
  }

  .tab-btn {
    min-width: 36px;
    padding: 2px 6px;
  }

  .stat-item {
    min-width: 60px;
  }

  .rc-row,
  .rc-row-header {
    grid-template-columns: 40px 50px 30px 26px 36px 40px 1fr;
  }
}

/* ------------------------------------------------------------
   42. Hover & Focus Accessibility
   ------------------------------------------------------------ */
@media (hover: none) {
  .tab-btn:hover,
  .content-tab-btn:hover,
  .data-table tbody tr:hover,
  .race-entry-table tbody tr:hover,
  .ex-table tbody tr:hover,
  .rc-row:hover,
  .card:hover {
    background: inherit;
    box-shadow: inherit;
    transform: none;
  }
  .card:hover::before {
    opacity: 0;
  }
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   43. Reduced Motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .stagger-children > * {
    opacity: 1;
    animation: none;
  }
}

/* ------------------------------------------------------------
   44. (Removed) Dark Mode class — base theme is now dark sumi-e
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   45. Tendency Tags & Analysis
   ------------------------------------------------------------ */
.tendency-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  margin: 2px;
  letter-spacing: .02em;
}
.tendency-tag-red {
  background: #3A1A1A;
  color: #EF4444;
  box-shadow: 0 1px 3px rgba(239,68,68,.15);
}
.tendency-tag-blue {
  background: #1A2A3A;
  color: #60A5FA;
  box-shadow: 0 1px 3px rgba(59,130,246,.15);
}
.tendency-tag-green {
  background: var(--c-green-l);
  color: #065F46;
  box-shadow: 0 1px 3px rgba(16,185,129,.15);
}
.tendency-tag-orange {
  background: #2A2A1A;
  color: #FBBF24;
  box-shadow: 0 1px 3px rgba(245,158,11,.15);
}
.tendency-tag-purple {
  background: #2A1A3A;
  color: #A78BFA;
  box-shadow: 0 1px 3px rgba(139,92,246,.15);
}
.tendency-tag-gray {
  background: #22222E;
  color: #9E9585;
  border: 1px solid #3A3A48;
}

/* Positioning Gauge (3-color stacked bar) */
.positioning-gauge {
  display: flex;
  height: 24px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #22222E;
  margin: var(--sp-2) 0;
}
.positioning-gauge-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: width .6s var(--ease);
  min-width: 0;
  overflow: hidden;
}
.positioning-gauge-seg.pg-mae {
  background: linear-gradient(135deg, #EF4444, #F87171);
}
.positioning-gauge-seg.pg-waku {
  background: linear-gradient(135deg, #4A4A58, #3A3A48);
  color: #9E9585;
}
.positioning-gauge-seg.pg-out {
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
}
.positioning-gauge-legend {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-sub);
}
.positioning-gauge-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.pg-legend-mae::before { background: #EF4444; }
.pg-legend-waku::before { background: #94A3B8; }
.pg-legend-out::before { background: #3B82F6; }

/* Form Indicator */
.form-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.form-indicator-rising {
  background: var(--c-green-l);
  color: #065F46;
}
.form-indicator-falling {
  background: #3A1A1A;
  color: #EF4444;
}
.form-indicator-stable {
  background: #22222E;
  color: #9E9585;
}

/* Tendency section grid */
.tendency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.tendency-grid-item {
  background: #1A1A24;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.tendency-grid-item h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

/* Course highlight chips for best/worst */
.course-highlight {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.course-highlight-best {
  background: var(--c-green-l);
  color: #065F46;
}
.course-highlight-worst {
  background: #3A1A1A;
  color: #EF4444;
}

/* Condition comparison bars */
.condition-compare {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  margin-top: var(--sp-2);
}
.condition-bar-wrap {
  flex: 1;
  text-align: center;
}
.condition-bar-label {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin-bottom: var(--sp-1);
}
.condition-bar {
  height: 80px;
  background: #2A2A38;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  overflow: hidden;
}
.condition-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height .6s var(--ease);
}
.condition-bar-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  margin-top: var(--sp-1);
}

/* Back to Race Button */
.back-to-race-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-card);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  margin-bottom: var(--sp-4);
  transition: all .2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.back-to-race-btn:hover {
  background: #2A2A38;
  border-color: var(--c-primary);
  color: var(--c-primary-d);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateX(-2px);
}

/* Power Ranking */
.power-rank-section { margin-bottom: var(--sp-3); }
.power-rank-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  transition: background .15s var(--ease);
}
.power-rank-row:last-child { border-bottom: none; }
.power-rank-row:hover { background: #22222E; }
.power-rank-1 { background: linear-gradient(90deg, #2A2A1A, #22221A); }
.power-rank-1:hover { background: linear-gradient(90deg, #32321A, #2A2A1A); }
.power-rank-pos {
  font-size: var(--fs-xl); font-weight: 800; min-width: 28px; text-align: center;
  color: var(--c-sub);
}
.power-rank-1 .power-rank-pos { color: #B45309; }
.power-rank-name {
  font-weight: 700; color: var(--c-text); min-width: 80px; white-space: nowrap;
}
.power-bar {
  flex: 1; height: 22px; background: #2A2A38;
  border-radius: var(--radius-pill); overflow: hidden; position: relative; min-width: 60px;
}
.power-bar-fill {
  height: 100%; border-radius: var(--radius-pill);
  transition: width .6s var(--ease); position: relative; overflow: hidden;
}
.power-bar-fill::after {
  content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer-bar 2s ease-in-out infinite;
}
.power-score-label {
  min-width: 36px; font-size: var(--fs-sm); font-weight: 800;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--c-text);
}
.power-breakdown {
  display: flex; gap: 2px;
}
.power-chip {
  width: 18px; height: 18px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
}
.power-chip-4 { background: #EF4444; }
.power-chip-3 { background: #F97316; }
.power-chip-2 { background: #EAB308; }
.power-chip-1 { background: #94A3B8; }
.power-chip-0 { background: #2A2A38; color: #9E9585; }

/* Slit Prediction - reuses .se-* classes from exhibition */
.slit-predict-label {
  font-size: var(--fs-xs); color: var(--c-sub); font-weight: 600;
}

/* Heatmap */
.heatmap-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-sm);
}
.heatmap-table th, .heatmap-table td {
  padding: var(--sp-1) var(--sp-2); text-align: center; border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.heatmap-table th {
  background: linear-gradient(135deg, #1A1A28, #22222E);
  color: var(--c-primary); font-weight: 600; font-size: var(--fs-xs);
}
.heatmap-cell {
  font-variant-numeric: tabular-nums; font-weight: 600; position: relative;
}
.heatmap-cell-insufficient {
  color: #94A3B8; font-style: italic; font-weight: 400;
}
.heatmap-current {
  box-shadow: inset 0 0 0 2px var(--c-primary);
  border-radius: 2px;
}
.heatmap-sub {
  display: block; font-size: 9px; font-weight: 400; color: var(--c-sub); line-height: 1;
}

/* Heatmap tabs */
.heatmap-tabs {
  display: flex; gap: 4px; margin-bottom: 8px;
}
.heatmap-tab {
  flex: 1; padding: 6px 0; border: 1px solid #3A3A48;
  border-radius: 6px; background: #1E1E28; color: #9E9585;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.heatmap-tab-active {
  background: var(--c-primary); color: #16161D; border-color: var(--c-primary);
}

/* 開催場ヒーローヘッダー */
.venue-hero {
  text-align: center;
  padding: 20px 16px 16px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  border-radius: var(--r-card);
  color: #E2E8F0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.venue-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.venue-hero-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 4px 0 2px;
  line-height: 1.2;
  color: #F8FAFC;
}
.venue-hero-tournament {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(226,232,240,0.75);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.venue-hero-date {
  font-size: 0.75rem;
  color: rgba(226,232,240,0.5);
  margin-top: 6px;
}

/* グレード別ヒーロー背景 */
.venue-hero-sg {
  background: linear-gradient(135deg, #78350F 0%, #92400E 40%, #B45309 100%);
  border-color: rgba(251,191,36,0.3);
}
.venue-hero-sg::before {
  background: radial-gradient(circle, rgba(251,191,36,0.15) 0%, transparent 70%);
}
.venue-hero-g1 {
  background: linear-gradient(135deg, #7C2D12 0%, #9A3412 40%, #C2410C 100%);
  border-color: rgba(249,115,22,0.3);
}
.venue-hero-g1::before {
  background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 70%);
}
.venue-hero-pg1 {
  background: linear-gradient(135deg, #7C2D12 0%, #9A3412 40%, #C2410C 100%);
  border-color: rgba(249,115,22,0.3);
}
.venue-hero-pg1::before {
  background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 70%);
}
.venue-hero-g2 {
  background: linear-gradient(135deg, #14532D 0%, #166534 40%, #15803D 100%);
  border-color: rgba(34,197,94,0.3);
}
.venue-hero-g2::before {
  background: radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 70%);
}
.venue-hero-g3 {
  background: linear-gradient(135deg, #1E3A5F 0%, #1E40AF 40%, #2563EB 100%);
  border-color: rgba(59,130,246,0.3);
}
.venue-hero-g3::before {
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
}
.venue-hero-ippan {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
}

/* グレードバッジカラー（ヒーロー用） */
.grade-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.grade-sg   { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #422006; }
.grade-pg1  { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.grade-g1   { background: linear-gradient(135deg, #FB923C, #F97316); color: #431407; }
.grade-g2   { background: linear-gradient(135deg, #4ADE80, #22C55E); color: #052E16; }
.grade-g3   { background: linear-gradient(135deg, #60A5FA, #3B82F6); color: #1E1B4B; }

/* Responsive for tendency sections */
@media (max-width: 768px) {
  .tendency-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   20. Bottom Navigation
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  background: #1E1E28;
  border-top: 1px solid #3A3A48;
  z-index: 9999;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 8px rgba(0,0,0,.3);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0 8px;
  min-height: 56px;
  text-decoration: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
  position: relative;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.bnav-item:hover { color: #9E9585; }
.bnav-active {
  color: var(--c-primary);
}
.bnav-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--c-primary);
  border-radius: 0 0 2px 2px;
}
.bnav-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}
.bnav-label {
  line-height: 1;
}
body {
  padding-bottom: 72px; /* space for bottom nav */
}

/* ============================================================
   21. Player Search & Favorites
   ============================================================ */
.search-bar-wrap {
  position: relative;
  margin-bottom: 16px;
}
.search-bar-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #94a3b8;
  pointer-events: none;
}
.search-bar-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 2px solid #3A3A48;
  border-radius: 12px;
  font-size: 15px;
  background: #1E1E28;
  color: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.search-bar-input::placeholder {
  color: #9CA3AF;
}
.search-bar-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  background: #1E1E28;
}
.search-result-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #22222E;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background .1s;
}
.search-result-item:hover { background: #1E1E28; }
.search-result-info {
  flex: 1;
  min-width: 0;
}
.search-result-name {
  font-weight: 600;
  font-size: 14px;
}
.search-result-sub {
  font-size: 12px;
  color: #64748b;
}
.search-result-fav {
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  color: #3A3A48;
  transition: color .15s;
}
.search-result-fav-active { color: #f59e0b; }

/* Favorites */
/* — Favorites header — */
.fav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.fav-count {
  font-size: 12px;
  color: var(--c-sub);
  font-weight: 600;
  background: #22222E;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

/* — Favorite card — */
.fav-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--c-text);
  position: relative;
  transition: box-shadow .2s, border-color .2s;
  background: var(--c-card);
}
.fav-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-primary-d);
}
.fav-card-racing {
  border-left: 3px solid var(--c-primary);
  background: linear-gradient(135deg, #1E1E28 0%, #22222E 100%);
}
.fav-card-racing .fav-card-name { color: var(--c-primary-l); }

/* — Card top row — */
.fav-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fav-card-name {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
  color: var(--c-text);
  text-decoration: none;
}
.fav-card-name:hover { color: var(--c-link); }
.fav-card-remove {
  font-size: 16px;
  color: var(--c-sub);
  cursor: pointer;
  padding: 2px 6px;
  border: none;
  background: none;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.fav-card-remove:hover { color: #ef4444; background: rgba(239,68,68,.1); }

/* — Stats row — */
.fav-card-stats {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--c-sub);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fav-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #22222E;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.fav-stat-label { color: var(--c-sub); }
.fav-stat-val { color: var(--c-text); font-weight: 600; }
.fav-stat-val-hot { color: var(--c-primary-l); font-weight: 700; }

/* — Entry row — */
.fav-card-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(58,58,72,.5);
}
.fav-entry-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}
.fav-entry-badge-on {
  background: rgba(201,168,76,.15);
  color: var(--c-primary-l);
  border: 1px solid rgba(201,168,76,.3);
}
.fav-entry-badge-off {
  background: #22222E;
  color: var(--c-sub);
  border: 1px solid var(--c-border);
}
.fav-venue-name {
  font-size: 12px;
  color: var(--c-text);
  font-weight: 600;
}
.fav-race-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s;
}
.fav-race-chip:hover { opacity: .85; }

/* Toast */
.toast {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 1100;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.toast-show { opacity: 1; }

/* ============================================================
   46. Entry Insights (出走表下部 分析セクション)
   ============================================================ */

/* Container */
.entry-insights {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.entry-insights .ei-loading {
  text-align: center;
  padding: var(--sp-4);
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

/* Section common */
.ei-section {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.ei-section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ei-note {
  font-size: 10.5px;
  color: var(--c-sub);
  margin: -2px 0 6px;
  line-height: 1.4;
}

/* --- B. Highlight Cards --- */
.highlight-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.highlight-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: #1A1A24;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  line-height: 1.4;
  flex: 1 1 calc(50% - var(--sp-2));
  min-width: 180px;
}
.hl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.hl-badge-red    { background: #3A1A1A; color: #EF4444; }
.hl-badge-blue   { background: #1A2A3A; color: #60A5FA; }
.hl-badge-green  { background: var(--c-green-l); color: #065F46; }
.hl-badge-orange { background: #2A2A1A; color: #FBBF24; }
.hl-badge-gray   { background: #22222E; color: #9E9585; border: 1px solid #3A3A48; }
.hl-text {
  font-weight: 600;
  color: var(--c-text);
}
.hl-sub {
  color: var(--c-sub);
  font-weight: 400;
}

/* --- Entry Insights Mobile --- */
@media (max-width: 768px) {
  .entry-insights {
    margin-top: var(--sp-4);
    gap: var(--sp-3);
  }
  .ei-section {
    padding: var(--sp-2) var(--sp-3);
  }
  .highlight-card {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ============================================================
   48. サブタブ（ピットレポート/注目ポイント/得点ランキング）
   ============================================================ */
.sub-tab-bar {
  display: flex;
  gap: 2px;
  margin-top: var(--sp-4);
  border-bottom: 2px solid var(--c-border);
}
.sub-tab-btn {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.sub-tab-btn.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
#entry-ranking-content {
  min-height: 60px;
}

/* ---- 独自データ サブタブ ---- */
.od-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border);
  margin: 0 var(--sp-3);
}
.od-sub-tab {
  flex: 1;
  padding: 10px 4px;
  background: transparent;
  border: none;
  color: var(--c-sub);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
  letter-spacing: .02em;
}
.od-sub-tab.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* ---- AI予想プレースホルダー ---- */
.od-ai-section { padding: var(--sp-6) var(--sp-3); }
.od-ai-placeholder { text-align: center; }
.od-ai-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), #8B5CF6);
  color: #fff; font-size: 18px; font-weight: 800;
  margin-bottom: 12px;
}
.od-ai-badge {
  display: inline-block; background: var(--c-border); color: var(--c-sub);
  padding: 4px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  margin-bottom: 8px;
}
.od-ai-desc { color: var(--c-sub); font-size: var(--fs-xs); line-height: 1.6; margin: 0; }

/* ---- モーターランキング ---- */
.motor-table th:first-child, .motor-table td:first-child { width: 36px; text-align: center; }
.motor-rank-entry { background: rgba(59,130,246,.06); }
.motor-rank-entry td { font-weight: 600; }
.motor-entry-name { font-size: 11px; color: var(--c-sub); margin-left: 4px; }

/* ---- 当会場ミニサマリー ---- */
.venue-mini-stats {
  display: flex; gap: 2px; margin-bottom: var(--sp-2);
  background: var(--c-bg); border-radius: var(--radius-sm); padding: 6px 4px;
}
.vms-item {
  flex: 1; text-align: center;
  display: flex; flex-direction: column; gap: 1px;
}
.vms-label { font-size: 10px; color: var(--c-sub); font-weight: 500; }
.vms-val { font-size: 13px; font-weight: 700; color: var(--c-text); }
.vms-hot { color: #EF4444; }

/* ---- 展示ST→本番ST乖離分析 ---- */
.od-gap-high { color: #22C55E; font-weight: 700; }
.od-gap-mid  { color: #EAB308; font-weight: 600; }
.od-gap-low  { color: #EF4444; font-weight: 700; }
.od-gap-slow { color: #EF4444; }
.od-gap-fast { color: #3B82F6; }

.st-gap-charts { margin-top: var(--sp-3); }
.st-gap-chart {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 6px;
}
.st-gap-chart-head { font-size: 12px; font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.st-gap-chart-sub  { font-size: 11px; font-weight: 400; color: var(--c-sub); margin-left: 4px; }

.st-gap-bar-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.st-gap-bar-label { font-size: 10px; color: var(--c-sub); width: 70px; text-align: right; font-family: var(--ff-mono, monospace); flex-shrink: 0; }
.st-gap-bar-track {
  flex: 1; height: 14px; background: var(--c-bg); border-radius: 2px;
  position: relative; overflow: hidden;
}
.st-gap-bar-fill {
  position: absolute; top: 0; height: 100%; border-radius: 2px; min-width: 2px;
  transition: width .3s;
}
.st-gap-bar-right { left: 50%; }
.st-gap-bar-left  { right: 50%; }
.st-gap-bar-val { font-size: 10px; font-weight: 700; width: 28px; text-align: right; font-family: var(--ff-mono, monospace); flex-shrink: 0; }

/* ---- F後行動パターン ---- */
.od-pf-extreme  { color: #EF4444; font-weight: 800; }
.od-pf-moderate { color: #F59E0B; font-weight: 700; }
.od-pf-slight   { color: #EAB308; font-weight: 600; }
.od-pf-quick    { color: #22C55E; font-weight: 600; }

.postf-details { margin-top: var(--sp-3); }
.postf-details-title { font-size: 12px; font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.postf-event {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 6px;
}
.postf-event-head { font-size: 12px; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.postf-event-date { font-size: 11px; font-weight: 400; color: var(--c-sub); margin-left: 4px; }
.postf-event-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.postf-before { font-size: 12px; font-weight: 600; color: var(--c-sub); font-family: var(--ff-mono, monospace); }
.postf-arrow  { color: var(--c-sub); font-size: 11px; }
.postf-after-list { display: flex; gap: 4px; flex-wrap: wrap; }
.postf-st {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; font-family: var(--ff-mono, monospace);
}
.postf-st-ok      { background: rgba(34,197,94,.12); color: #22C55E; }
.postf-st-caution { background: rgba(245,158,11,.12); color: #F59E0B; }
.postf-st-slow    { background: rgba(239,68,68,.12); color: #EF4444; }

@media (max-width: 480px) {
  .st-gap-bar-label { width: 58px; font-size: 9px; }
  .st-gap-bar-val { width: 24px; font-size: 9px; }
  .postf-st { font-size: 11px; padding: 1px 4px; }
}

/* ============================================================
   49. 得点率表示
   ============================================================ */

/* --- サマリー（出走表直下） --- */
.ts-summary {
  margin-top: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-card);
}
.ts-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--c-border);
}
.ts-summary-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
}
.ts-border {
  font-size: 11px;
  color: var(--c-sub);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.ts-table td {
  text-align: center;
  vertical-align: middle;
  padding: 5px 4px;
  font-variant-numeric: tabular-nums;
}
.ts-total-sub {
  font-size: 10px;
  color: var(--c-sub);
}
.ts-results {
  white-space: nowrap;
  text-align: left !important;
}
.ts-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin-right: 1px;
}
.ts-dot-fail {
  background: #3A3A48;
  color: #EF4444;
  font-size: 8px;
}

/* バッジ */
.ts-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 4px;
}
.ts-badge-clean { background: rgba(34,197,94,.15); color: #22C55E; }
.ts-badge-mushoubu { background: rgba(234,179,8,.15); color: #EAB308; }
.ts-badge-dq { background: rgba(239,68,68,.15); color: #EF4444; }

/* --- ランキング（全選手タブ） --- */
.ts-ranking {
  padding: var(--sp-3) 0;
}
.ts-ranking-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 0 4px var(--sp-2);
}
.ts-ranking-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
}
.ts-ranking-period {
  font-size: 11px;
  color: var(--c-sub);
}
.ts-full td, .ts-full th {
  padding: 4px 3px;
  font-size: var(--fs-xs);
}
.ts-border-row {
  border-top: 2px solid var(--c-primary) !important;
}
.ts-dq-row {
  opacity: .5;
}

@media (max-width: 480px) {
  .ts-dot { width: 16px; height: 16px; font-size: 9px; line-height: 16px; }
  .sub-tab-btn { font-size: 11px; padding: 7px 2px; }
  .od-sub-tab { font-size: 12px; padding: 8px 2px; }
  .motor-entry-name { display: none; }
  .vms-val { font-size: 12px; }
}

/* ============================================================
   50. 独自分析 - 展開予想 Hero Section
   ============================================================ */

/* --- 展開予想ヒーロー枠 --- */
.flow-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0C4A6E 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-5);
  color: #F0F9FF;
  box-shadow: 0 4px 24px rgba(12,74,110,.25), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.flow-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(14,165,233,.12) 0%, transparent 70%);
  pointer-events: none;
}
.flow-hero .analysis-section-title {
  color: #E0F2FE;
  border-bottom-color: rgba(56,189,248,.35);
  font-size: var(--fs-lg);
  letter-spacing: .02em;
}
.flow-hero .analysis-note {
  color: rgba(186,230,253,.7);
  font-size: var(--fs-xs);
}

/* --- セクション内ラベル --- */
.flow-label {
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.flow-hero .flow-label {
  color: #BAE6FD;
  border-bottom: 1px solid rgba(186,230,253,.15);
}
.flow-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(14,165,233,.2);
  color: #38BDF8;
  flex-shrink: 0;
}

/* --- 選手適性カード --- */
.flow-player-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(186,230,253,.06);
}
.flow-player-row:last-child { border-bottom: none; }
.flow-hero .flow-player-row .lane-num {
  width: 22px; height: 22px; font-size: 11px;
  border-radius: 4px;
}
.flow-player-name {
  min-width: 58px;
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* コース信頼度グレード */
.flow-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  letter-spacing: -.02em;
}
.flow-grade-S { background: linear-gradient(135deg, #EF4444, #DC2626); }
.flow-grade-A { background: linear-gradient(135deg, #F97316, #EA580C); }
.flow-grade-B { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.flow-grade-C { background: linear-gradient(135deg, #6B7280, #4B5563); }
.flow-grade-none { background: #334155; color: #64748B; }

/* 適性バッジ */
.flow-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  line-height: 1.5;
}
.flow-badge-high { background: #059669; }
.flow-badge-mid  { background: #D97706; }
.flow-badge-low  { background: #64748B; }

/* ST表示 */
.flow-st {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.flow-st-fast  { color: #34D399; }
.flow-st-mid   { color: #FBBF24; }
.flow-st-slow  { color: #F87171; }
.flow-sd {
  font-size: 9px;
  margin-left: 1px;
  font-weight: 600;
}
.flow-sd-stable { color: #6EE7B7; }
.flow-sd-normal { color: #FDE68A; }
.flow-sd-uneven { color: #FCA5A5; }

/* 信頼度根拠テキスト */
.flow-trust-detail {
  font-size: 10px;
  color: rgba(148,163,184,.8);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.flow-hero .flow-trust-detail { color: rgba(186,230,253,.45); }

/* --- 展開シナリオ --- */
.flow-scenarios { margin-top: var(--sp-3); }
.flow-sc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
  font-size: var(--fs-sm);
}
.flow-sc-rank {
  min-width: 16px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(148,163,184,.6);
  text-align: center;
}
.flow-hero .flow-sc-rank { color: rgba(186,230,253,.4); }
.flow-sc-name {
  min-width: 58px;
  font-weight: 600;
  white-space: nowrap;
}
.flow-kim-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  line-height: 1.5;
}
.flow-sc-bar {
  flex: 1;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
}
.flow-hero .flow-sc-bar { background: rgba(255,255,255,.06); }
.flow-sc-bar-fill {
  height: 100%;
  border-radius: 4px;
  opacity: .85;
  transition: width .5s var(--ease);
}
.flow-sc-pct {
  min-width: 40px;
  text-align: right;
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- レースのカギ --- */
.flow-key-box {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-md);
  border-left: 3px solid #38BDF8;
}
.flow-hero .flow-key-box {
  background: rgba(14,165,233,.08);
}
.flow-key-box:not(.flow-hero .flow-key-box) {
  background: var(--c-card);
  border-left-color: var(--c-primary);
}
.flow-key-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.flow-hero .flow-key-title { color: #BAE6FD; }
.flow-key-item {
  font-size: var(--fs-xs);
  margin: 3px 0;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.flow-key-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-weight: 700;
}
.flow-key-positive { color: #34D399; }
.flow-key-warning  { color: #FBBF24; }
.flow-key-alert    { color: #F87171; }
.flow-key-info     { color: #38BDF8; }

/* ============================================================
   51. 独自分析 - 決まり手分析
   ============================================================ */
.kim-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.kim-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--c-sub);
}
.kim-legend-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.kim-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 5px 0;
  font-size: var(--fs-sm);
}
.kim-name {
  min-width: 58px;
  font-weight: 600;
  white-space: nowrap;
}
.kim-stack {
  flex: 1;
  height: 22px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}
.kim-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
}
.kim-stat {
  min-width: 50px;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  white-space: nowrap;
}
.kim-nodata {
  flex: 1;
  height: 22px;
  background: var(--c-card);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--c-sub);
}
.kim-hint {
  font-size: 9px;
  color: var(--c-primary);
  font-weight: 700;
  margin-left: 2px;
  white-space: nowrap;
}

/* ============================================================
   52. 独自分析 - 進入傾向
   ============================================================ */
.entry-flow-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 6px 0;
  font-size: var(--fs-sm);
}
.entry-flow-content {
  flex: 1;
  min-width: 0;
}
.entry-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.entry-bar-label {
  font-size: 11px;
  color: var(--c-sub);
  flex-shrink: 0;
}
.entry-bar {
  flex: 1;
  height: 16px;
  background: var(--c-card);
  border-radius: 3px;
  overflow: hidden;
}
.entry-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s var(--ease);
}
.entry-bar-pct {
  min-width: 42px;
  text-align: right;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.entry-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.entry-tag-in  { background: #EF4444; }
.entry-tag-out { background: #3B82F6; }

/* ============================================================
   53. 独自分析 - セクション間セパレータ
   ============================================================ */
.analysis-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
  margin: var(--sp-4) 0;
}

/* ============================================================
   54. 独自分析 - レスポンシブ
   ============================================================ */
@media (max-width: 480px) {
  .flow-hero {
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
  }
  .flow-player-row {
    gap: 4px;
    flex-wrap: wrap;
  }
  .flow-player-name, .flow-sc-name, .kim-name {
    min-width: 50px;
    font-size: var(--fs-xs);
  }
  .flow-trust-detail {
    display: none;
  }
  .flow-sc-row {
    gap: 4px;
  }
  .flow-badge {
    padding: 1px 4px;
    font-size: 9px;
  }
  .flow-grade {
    width: 20px; height: 20px;
    font-size: 11px;
  }
  .kim-hint {
    display: none;
  }
  .entry-flow-row {
    gap: 4px;
  }
}

/* ============================================================
   54b. AI予想
   ============================================================ */

/* --- ローディング --- */
.tenkai-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-3);
}
.tenkai-ai-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(56,189,248,.15);
  border-top-color: #38BDF8;
  border-radius: 50%;
  animation: tenkai-spin 0.8s linear infinite;
}
@keyframes tenkai-spin {
  to { transform: rotate(360deg); }
}
.tenkai-ai-loading-text {
  color: rgba(186,230,253,.6);
  font-size: var(--fs-sm);
  letter-spacing: .05em;
}

/* --- エラー --- */
.tenkai-ai-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-3);
}
.tenkai-ai-error-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(239,68,68,.15);
  color: #F87171;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
}
.tenkai-ai-error-text {
  color: rgba(248,113,113,.8);
  font-size: var(--fs-sm);
  text-align: center;
}
.tenkai-ai-retry {
  padding: 6px 20px;
  border: 1px solid rgba(56,189,248,.3);
  border-radius: var(--radius-md);
  background: rgba(56,189,248,.08);
  color: #38BDF8;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all .2s;
}
.tenkai-ai-retry:hover {
  background: rgba(56,189,248,.18);
}

/* --- レース終了オーバーレイ（日付跨ぎ時） --- */
.race-ended-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-4);
  gap: var(--sp-3);
  min-height: 50vh;
}
.race-ended-icon {
  font-size: 48px;
  opacity: 0.4;
}
.race-ended-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.race-ended-text {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-align: center;
  line-height: 1.6;
}
.race-ended-btn {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-6);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: opacity 0.2s;
}
.race-ended-btn:hover {
  opacity: 0.85;
}

/* --- 404 Not Found --- */
.not-found-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-4);
  gap: var(--sp-3);
  min-height: 60vh;
}
.not-found-code {
  font-size: 72px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.3;
  font-family: var(--font-serif);
  line-height: 1;
}
.not-found-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.not-found-text {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-align: center;
  line-height: 1.6;
}
.not-found-btn {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-6);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: opacity 0.2s;
}
.not-found-btn:hover {
  opacity: 0.85;
}

/* --- 締切後（期限切れ）--- */
.tenkai-ai-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-3);
}
.tenkai-ai-expired-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(100,116,139,.12);
  color: rgba(148,163,184,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .05em;
}
.tenkai-ai-expired-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: rgba(148,163,184,.6);
}
.tenkai-ai-expired-text {
  color: rgba(148,163,184,.45);
  font-size: var(--fs-sm);
  text-align: center;
  line-height: 1.6;
}
.tenkai-ai-expired-sub {
  color: rgba(148,163,184,.3);
  font-size: 11px;
  text-align: center;
}

/* --- ヒーロー --- */
.tenkai-ai-hero {
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.9));
  border: 1px solid rgba(56,189,248,.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- ヘッダー --- */
.tenkai-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(56,189,248,.08);
}
.tenkai-ai-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: #BAE6FD;
  letter-spacing: .08em;
}
.tenkai-ai-meta {
  font-size: 10px;
  color: rgba(148,163,184,.5);
}

/* --- タブバー --- */
.tenkai-ai-tabs {
  display: flex;
  border-bottom: 1px solid rgba(56,189,248,.08);
}
.tenkai-ai-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  border: none;
  background: transparent;
  color: rgba(148,163,184,.5);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  position: relative;
}
.tenkai-ai-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: transparent;
  border-radius: 2px;
  transition: all .25s;
}
.tenkai-ai-tab:hover {
  color: rgba(186,230,253,.7);
  background: rgba(56,189,248,.04);
}

/* 本命タブ */
.tenkai-tab-honmei.active {
  color: #F59E0B;
}
.tenkai-tab-honmei.active::after {
  background: #F59E0B;
}
/* 穴タブ */
.tenkai-tab-ana.active {
  color: #3B82F6;
}
.tenkai-tab-ana.active::after {
  background: #3B82F6;
}
/* 大穴タブ */
.tenkai-tab-oana.active {
  color: #EF4444;
}
.tenkai-tab-oana.active::after {
  background: #EF4444;
}

.tenkai-tab-icon {
  font-size: 14px;
}

/* --- パネル --- */
.tenkai-ai-panel {
  padding: 0;
}

/* パネルヘッダー */
.tenkai-panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
}
.tenkai-panel-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .08em;
}
.tenkai-header-honmei .tenkai-panel-badge {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}
.tenkai-header-ana .tenkai-panel-badge {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
}
.tenkai-header-oana .tenkai-panel-badge {
  background: linear-gradient(135deg, #EF4444, #DC2626);
}
.tenkai-panel-sub {
  font-size: 11px;
  color: rgba(148,163,184,.5);
}

/* パネル本文 */
.tenkai-panel-body {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
}
.tenkai-sentence {
  margin: 0 0 var(--sp-2) 0;
  color: rgba(226,232,240,.88);
  font-size: var(--fs-sm);
  line-height: 1.75;
  letter-spacing: .02em;
}
.tenkai-sentence:last-child {
  margin-bottom: 0;
}

/* --- セクション区切り --- */
.tenkai-section {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(56,189,248,.06);
}
.tenkai-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.tenkai-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
}
.tenkai-section-icon {
  font-size: 14px;
  line-height: 1;
}
.tenkai-section-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(56,189,248,.7);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- ハイライト --- */
.tenkai-hl-course {
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}
.tenkai-hl-course.lane-1 { color: #fff; background: rgba(255,255,255,.12); }
.tenkai-hl-course.lane-2 { color: #1a1a1a; background: rgba(255,255,255,.7); }
.tenkai-hl-course.lane-3 { color: #EF4444; background: rgba(239,68,68,.12); }
.tenkai-hl-course.lane-4 { color: #3B82F6; background: rgba(59,130,246,.12); }
.tenkai-hl-course.lane-5 { color: #F59E0B; background: rgba(245,158,11,.12); }
.tenkai-hl-course.lane-6 { color: #10B981; background: rgba(16,185,129,.12); }

.tenkai-hl-kim {
  color: #C084FC;
  font-weight: 600;
}
.tenkai-hl-wake {
  color: #FB923C;
  font-weight: 600;
}
.tenkai-hl-st {
  color: #38BDF8;
  font-weight: 600;
}

/* --- フッター --- */
.tenkai-ai-footer {
  padding: var(--sp-2) var(--sp-5) var(--sp-3);
  border-top: 1px solid rgba(56,189,248,.06);
}
.tenkai-ai-disclaimer {
  font-size: 10px;
  color: rgba(148,163,184,.35);
}

/* --- レスポンシブ --- */
@media (max-width: 480px) {
  .tenkai-ai-header {
    padding: var(--sp-3) var(--sp-3);
  }
  .tenkai-ai-title {
    font-size: var(--fs-base);
  }
  .tenkai-ai-tab {
    padding: 10px 0;
    font-size: 12px;
  }
  .tenkai-panel-header {
    padding: var(--sp-2) var(--sp-3);
  }
  .tenkai-panel-body {
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
  }
  .tenkai-sentence {
    font-size: 12px;
    line-height: 1.7;
  }
  .tenkai-ai-footer {
    padding: var(--sp-2) var(--sp-3);
  }
  .tenkai-bet-chips {
    gap: 4px;
  }
  .tenkai-bet-chip {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .tenkai-bet-sep {
    font-size: 14px;
  }
}

/* --- AI予想 買い目セクション --- */
.tenkai-bet-section {
  margin: 0 var(--sp-4) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.tenkai-bet-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-2);
}
.tenkai-bet-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-2);
}
.tenkai-bet-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.tenkai-bet-chip.lane-color-1 { background: #fff; color: #333; border: 2px solid #ccc; }
.tenkai-bet-chip.lane-color-2 { background: #111; }
.tenkai-bet-chip.lane-color-3 { background: #e53935; }
.tenkai-bet-chip.lane-color-4 { background: #1e88e5; }
.tenkai-bet-chip.lane-color-5 { background: #fdd835; color: #333; }
.tenkai-bet-chip.lane-color-6 { background: #43a047; }
.tenkai-bet-sep {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
}
.tenkai-bet-reason {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: var(--sp-1);
}

/* ============================================================
   55. 展開予想 - STモード・引き波連鎖・出目パターン
   ============================================================ */

/* --- STモード判定 --- */
.flow-mode-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: rgba(14,165,233,.06);
  border: 1px solid rgba(56,189,248,.12);
}
.flow-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.flow-mode-equal   { background: linear-gradient(135deg, #059669, #047857); }
.flow-mode-gap     { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.flow-mode-unknown { background: #3A3A48; }
.flow-mode-desc {
  font-size: 10px;
  color: rgba(186,230,253,.55);
  line-height: 1.4;
}

/* 展示ST vs 実績ST比較テーブル */
.flow-st-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-2);
  font-size: 11px;
}
.flow-st-table th {
  color: rgba(186,230,253,.45);
  font-weight: 600;
  padding: 3px 4px;
  text-align: center;
  border-bottom: 1px solid rgba(186,230,253,.1);
  font-size: 10px;
}
.flow-st-table td {
  padding: 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(186,230,253,.04);
}
.flow-st-table td:nth-child(2) { text-align: left; }
.flow-st-faster { color: #34D399; font-weight: 700; }
.flow-st-slower { color: #F87171; font-weight: 700; }
.flow-st-neutral { color: rgba(186,230,253,.6); }
.flow-st-diff-cell { font-size: 10px; }

/* --- 引き波連鎖分析 --- */
.flow-wake-chain {
  margin-top: var(--sp-2);
}
.flow-wake-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0;
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(186,230,253,.05);
}
.flow-wake-row:last-child { border-bottom: none; }
.flow-wake-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  min-width: 76px;
  flex-shrink: 0;
  color: #E0F2FE;
}
.flow-wake-trigger .lane-num {
  width: 18px; height: 18px; font-size: 10px; border-radius: 3px;
}
.flow-wake-arrow {
  color: rgba(186,230,253,.25);
  font-size: 12px;
  flex-shrink: 0;
  padding-top: 1px;
}
.flow-wake-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.flow-wake-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.flow-wake-severe   { background: rgba(239,68,68,.18); color: #FCA5A5; border: 1px solid rgba(239,68,68,.25); }
.flow-wake-moderate { background: rgba(251,191,36,.12); color: #FDE68A; border: 1px solid rgba(251,191,36,.18); }
.flow-wake-benefit  { background: rgba(16,185,129,.12); color: #6EE7B7; border: 1px solid rgba(16,185,129,.18); }
.flow-wake-neutral  { background: rgba(148,163,184,.08); color: rgba(186,230,253,.5); border: 1px solid rgba(148,163,184,.12); }

/* --- 出目パターン予測 --- */
.flow-patterns { margin-top: var(--sp-2); }
.flow-pat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(186,230,253,.04);
}
.flow-pat-row:last-child { border-bottom: none; }
.flow-pat-rank {
  font-weight: 800;
  font-size: 11px;
  color: rgba(186,230,253,.35);
  min-width: 14px;
  text-align: center;
}
.flow-pat-nums {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.flow-pat-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.flow-pat-sep {
  display: inline-flex;
  align-items: center;
  color: rgba(186,230,253,.2);
  font-size: 9px;
  font-weight: 700;
}
.flow-pat-reason {
  flex: 1;
  font-size: 10px;
  color: rgba(186,230,253,.5);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-pat-conf {
  font-weight: 700;
  font-size: 11px;
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.flow-pat-conf-high { color: #34D399; }
.flow-pat-conf-mid  { color: #FBBF24; }
.flow-pat-conf-low  { color: rgba(186,230,253,.45); }

/* レース重要度バッジ */
.flow-importance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  margin-left: var(--sp-2);
  vertical-align: middle;
}
.flow-importance-high {
  background: rgba(239,68,68,.15);
  color: #FCA5A5;
  border: 1px solid rgba(239,68,68,.2);
}
.flow-importance-mid {
  background: rgba(251,191,36,.12);
  color: #FDE68A;
  border: 1px solid rgba(251,191,36,.15);
}

/* ============================================================
   56. 展開予想拡張 - レスポンシブ追加
   ============================================================ */
@media (max-width: 480px) {
  .flow-mode-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .flow-st-table { font-size: 10px; }
  .flow-st-table th, .flow-st-table td { padding: 2px 3px; }
  .flow-wake-row { flex-wrap: wrap; gap: 4px; }
  .flow-wake-trigger { min-width: auto; }
  .flow-pat-row { gap: 4px; }
  .flow-pat-reason { display: none; }
  .flow-pat-num { width: 20px; height: 20px; font-size: 11px; }
}

/* ============================================================
   57. 独自データ (OD) - モバイルファースト カード型設計
   ============================================================ */

/* --- コンテナ --- */
.od {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  --od-navy: #0F172A;
  --od-navy-mid: #1E3A5F;
  --od-navy-light: #0C4A6E;
  --od-card-bg: #0F1C2E;
  --od-card-border: rgba(56,189,248,.12);
  --od-text: #E0F2FE;
  --od-text-sub: rgba(148,196,228,.55);
  --od-text-muted: rgba(148,196,228,.35);
  --od-accent: #38BDF8;
  --od-table-border: rgba(56,189,248,.10);
  --od-table-header-bg: rgba(14,165,233,.08);
}

/* --- バナー --- */
.od-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0C4A6E 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  color: #E0F2FE;
  position: relative;
  overflow: hidden;
}
.od-banner::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(14,165,233,.15) 0%, transparent 70%);
  pointer-events: none;
}
.od-banner-inner {
  position: relative;
  z-index: 1;
}
.od-banner-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  margin-bottom: 2px;
}
.od-banner-sub {
  font-size: 10px;
  color: rgba(186,230,253,.65);
}

/* --- 欠場バナー --- */
.od-absent-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: 0;
  background: rgba(239,68,68,.10);
  border-bottom: 1px solid rgba(239,68,68,.25);
  color: #EF4444;
  font-size: 12px;
  font-weight: 600;
}

/* --- 統一コンテナ --- */
.od-body {
  background: linear-gradient(180deg, #0F1C2E 0%, #132438 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--od-card-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  overflow: hidden;
}

/* --- レース展開サマリー --- */
.od-summary {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--od-card-border);
  background: linear-gradient(135deg, rgba(14,165,233,.06) 0%, rgba(56,189,248,.03) 100%);
}
.od-summary-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 2px solid #38bdf8;
}
.od-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.od-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.od-summary-positive { background: rgba(34,197,94,.08); border-left-color: #22c55e; }
.od-summary-caution  { background: rgba(245,158,11,.08); border-left-color: #f59e0b; }
.od-summary-warning  { background: rgba(251,146,60,.08); border-left-color: #fb923c; }
.od-summary-danger   { background: rgba(239,68,68,.08);  border-left-color: #ef4444; }
.od-summary-info     { background: rgba(14,165,233,.08); border-left-color: #0ea5e9; }
.od-summary-text { flex: 1; min-width: 0; }
.od-summary-item-title { font-size: 13px; font-weight: 700; color: var(--od-text-main); line-height: 1.3; }
.od-summary-item-desc  { font-size: 11px; color: var(--od-text-sub); margin-top: 2px; line-height: 1.4; }

/* --- セクション (枠線区切り) --- */
.od-section {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--od-card-border);
}
.od-section:last-child {
  border-bottom: none;
}
.od-section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #E0F2FE;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--od-accent);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.od-section-desc {
  font-size: 11px;
  color: var(--od-text-sub);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.od-notice {
  font-size: 12px;
  color: var(--od-text-sub);
  background: var(--od-card);
  border: 1px dashed var(--od-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 8px 0;
  text-align: center;
  line-height: 1.5;
}
.od-note {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin-top: 6px;
  padding: 0 4px;
  line-height: 1.5;
}

.od-section-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--od-text-sub);
  background: rgba(14,165,233,.12);
  padding: 2px 8px;
  border-radius: 4px;
}

/* === 独自データ テーブル === */
.od-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.od-table th {
  font-size: 10px;
  font-weight: 600;
  color: var(--od-text-sub);
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid var(--od-table-border);
  background: var(--od-table-header-bg);
}
.od-table td {
  padding: 5px 6px;
  text-align: center;
  border-bottom: 1px solid var(--od-table-border);
  white-space: nowrap;
  font-weight: 600;
  color: var(--od-text);
}
.od-cell-name {
  text-align: left !important;
  font-weight: 700 !important;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff !important;
}
.od-cell-nodata {
  color: var(--od-text-muted);
  font-weight: 400 !important;
  font-size: 11px;
}
/* 適性グレードバッジ */
.od-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  flex-shrink: 0;
}
.od-grade-S { background: linear-gradient(135deg, #EF4444, #DC2626); }
.od-grade-A { background: linear-gradient(135deg, #F97316, #EA580C); }
.od-grade-B { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.od-grade-C { background: linear-gradient(135deg, #6B7280, #4B5563); }
.od-grade-none { background: #334155; color: #64748B; }


/* === 値カラー === */
.od-val-hot  { color: #FCA5A5 !important; }
.od-val-warm { color: #FCD34D !important; }
.od-val-dim  { color: #6B7280 !important; opacity: .5; }
.od-insufficient {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  color: #F59E0B;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.4;
}
.od-st-fast  { color: #34D399 !important; font-weight: 700; }
.od-st-mid   { color: #FCD34D !important; font-weight: 700; }
.od-st-slow  { color: #FCA5A5 !important; font-weight: 700; }
.od-sd-stable { color: #34D399 !important; }
.od-sd-normal { color: #FCD34D !important; }
.od-sd-uneven { color: #FCA5A5 !important; }
.od-sd-val {
  font-size: 9px;
  opacity: .7;
  margin-left: 2px;
}

/* 展示STハイライト */
.od-st-ex {
  color: var(--od-accent) !important;
  font-weight: 700;
}

/* === 決まり手タグ === */
.od-kim-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  line-height: 1.5;
}
.od-kim-tag-sub {
  opacity: .75;
  margin-left: 2px;
}

/* === スキルバッジ === */
.od-skill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.od-skill-high { background: #059669; }
.od-skill-mid  { background: #D97706; }
.od-skill-low  { background: #94A3B8; }
.od-skill-num {
  font-size: 9px;
  opacity: .85;
  margin-left: 1px;
}

/* === 初心者向けガイド（折りたたみ） === */
.od-guide {
  margin-top: var(--sp-2);
  border: 1px solid var(--od-card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.od-guide-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--od-accent);
  background: rgba(14,165,233,.06);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.od-guide-toggle:active {
  background: rgba(14,165,233,.1);
}
.od-guide-toggle::after {
  content: '\25BC';
  font-size: 8px;
  margin-left: auto;
  transition: transform .2s;
  opacity: .5;
}
.od-guide-open .od-guide-toggle::after {
  transform: rotate(180deg);
}
.od-guide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.od-guide-body {
  display: none;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--od-text);
}
.od-guide-open .od-guide-body {
  display: block;
}
.od-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: var(--sp-2);
}
.od-guide-item {
  padding: 8px;
  background: rgba(14,165,233,.05);
  border-radius: var(--radius-sm);
  border: 1px solid var(--od-card-border);
}
.od-guide-item .od-kim-tag {
  margin-bottom: 3px;
}
.od-guide-item p {
  margin: 3px 0 0;
  font-size: 10px;
  color: var(--od-text-sub);
  line-height: 1.45;
}
.od-guide-item strong {
  color: #fff;
}
.od-guide-wake {
  padding: 8px 10px;
  background: rgba(14,165,233,.08);
  border-radius: var(--radius-sm);
  border: 1px solid var(--od-card-border);
}
.od-guide-wake-title {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  margin-bottom: 4px;
}
.od-guide-wake p {
  font-size: 10px;
  color: var(--od-text-sub);
  line-height: 1.5;
  margin: 0 0 6px;
}
.od-guide-wake strong { color: #fff; }
.od-guide-example { margin-top: 6px; }
.od-guide-ex-label {
  font-weight: 700;
  font-size: 10px;
  color: var(--od-text);
  margin-bottom: 4px;
  display: block;
}
.od-guide-ex-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.od-guide-ex-lane {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.od-guide-ex-lane .lane-num {
  width: 16px; height: 16px;
  font-size: 9px;
  border-radius: 3px;
}
.od-guide-ex-severe {
  background: rgba(239,68,68,.1);
  color: #DC2626;
  border: 1px solid rgba(239,68,68,.2);
}
.od-guide-ex-moderate {
  background: rgba(251,191,36,.1);
  color: #B45309;
  border: 1px solid rgba(251,191,36,.15);
}
.od-guide-ex-trigger {
  background: rgba(16,185,129,.12);
  color: #059669;
  border: 1px solid rgba(16,185,129,.2);
}
.od-guide-ex-benefit {
  background: rgba(59,130,246,.08);
  color: #2563EB;
  border: 1px solid rgba(59,130,246,.15);
}

/* === 会場・モーターテーブル === */
.od-vm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.od-vm-table th {
  padding: 5px 6px;
  text-align: center;
  font-weight: 600;
  color: var(--od-text-sub);
  font-size: 10px;
  border-bottom: 2px solid var(--od-table-border);
  white-space: nowrap;
  background: var(--od-table-header-bg);
}
.od-vm-table td {
  padding: 5px 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--od-table-border);
  color: var(--od-text);
}
.od-motor-ace  { color: #FCA5A5; font-weight: 700; }
.od-motor-good { color: #FCD34D; font-weight: 700; }

/* モーター相対ランキング */
.od-motor-rank-top  { color: #FCA5A5; font-weight: 700; }
.od-motor-rank-good { color: #86EFAC; }
.od-motor-rank-low  { color: var(--c-sub); opacity: .5; }
.od-motor-rank-total { font-size: var(--fs-xs); color: var(--c-sub); margin-left: 1px; }


/* === ヒートマップ OD内ダークテーマ === */
.od .analysis-section {
  background: none;
  border: none;
  border-bottom: 1px solid var(--od-card-border);
  border-radius: 0;
  padding: var(--sp-3);
  box-shadow: none;
}
.od .analysis-section:last-child {
  border-bottom: none;
}
.od .analysis-section-title {
  color: #E0F2FE;
  border-bottom-color: var(--od-accent);
}
.od .heatmap-table th {
  background: var(--od-table-header-bg);
  color: var(--od-text-sub);
}
.od .heatmap-table th, .od .heatmap-table td {
  border-bottom-color: var(--od-table-border);
  color: var(--od-text);
}
.od .heatmap-cell {
  color: var(--od-text);
}
.od .heatmap-cell-insufficient {
  color: rgba(148,196,228,.4);
}
.od .heatmap-sub {
  color: var(--od-text-sub);
}
.od .heatmap-current {
  box-shadow: inset 0 0 0 2px var(--od-accent);
}
.od .heatmap-tab {
  border-color: rgba(56,189,248,.15);
  background: rgba(14,165,233,.06);
  color: var(--od-text-sub);
}
.od .heatmap-tab-active {
  background: var(--od-accent);
  color: #0F172A;
  border-color: var(--od-accent);
}
.od .period-badge {
  background: rgba(14,165,233,.12);
  color: var(--od-text-sub);
}

/* --- ST精密比較: ロック状態 --- */
.od-section-locked {
  position: relative;
}
.od-locked-card {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  background: rgba(14,165,233,0.04);
  border: 1px dashed rgba(56,189,248,0.2);
  border-radius: var(--radius-md);
}
.od-locked-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(56,189,248,0.08));
  border: 1px solid rgba(56,189,248,0.25);
  font-size: 14px;
  font-weight: 800;
  color: var(--od-accent);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-3);
}
.od-locked-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #E0F2FE;
  margin-bottom: var(--sp-2);
}
.od-locked-desc {
  font-size: var(--fs-xs);
  color: var(--od-text-sub);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.od-locked-desc strong {
  color: var(--od-accent);
}
.od-locked-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.od-locked-item {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  background: rgba(14,165,233,0.08);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: var(--radius-pill);
  color: var(--od-text-sub);
}

/* --- ST精密比較: 読み方ガイド --- */
.od-st-guide {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  background: rgba(14,165,233,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(56,189,248,0.08);
}
.od-st-guide-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11px;
  color: var(--od-text-sub);
  line-height: 1.5;
}
.od-st-guide-key {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.od-st-guide-key-ex {
  background: rgba(14,165,233,0.2);
  color: var(--od-accent);
  border: 1px solid rgba(14,165,233,0.3);
}
.od-st-guide-key-dev {
  background: rgba(52,211,153,0.12);
  color: #34D399;
  border: 1px solid rgba(52,211,153,0.2);
}
.od-st-guide-key-sd {
  background: rgba(148,163,184,0.12);
  color: #94A3B8;
  border: 1px solid rgba(148,163,184,0.2);
}
.od-st-guide-val strong {
  font-weight: 700;
}

/* --- ST精密比較: テーブル強調 --- */
.od-st-table th.od-th-primary {
  color: var(--od-accent);
  border-bottom: 2px solid rgba(14,165,233,0.4);
}
.od-st-ref {
  color: var(--od-text-sub) !important;
  font-size: 11px;
}

/* --- ST精密比較: F率・遅れ率・判定 --- */

/* 展示Fバッジ */
.od-st-flying { color: #FCA5A5 !important; font-weight: 700; }
.od-st-f-badge {
  display: inline-block;
  background: rgba(239,68,68,.2);
  color: #FCA5A5;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 3px;
  border: 1px solid rgba(239,68,68,.3);
}

/* F率カラー */
.od-f-high { color: #FCA5A5 !important; font-weight: 700; }
.od-f-mid  { color: #FCD34D !important; font-weight: 600; }

/* 遅れ率カラー */
.od-late-high { color: #FCA5A5 !important; font-weight: 700; }
.od-late-mid  { color: #FCD34D !important; font-weight: 600; }

/* 走数根拠表示 */
.od-st-basis { font-size: 9px; opacity: .65; margin-left: 2px; white-space: nowrap; }

/* テーブルヘッダー補足（基準値表示） */
.od-th-sub {
  display: block;
  font-size: 9px;
  font-weight: 500;
  opacity: .6;
  line-height: 1.2;
}

/* 当期F本数（列ヘッダー） */
.od-pf-danger { color: #FCA5A5 !important; font-weight: 700; }
.od-pf-warn   { color: #FCD34D !important; font-weight: 600; }

/* F持ちバッジ（選手と展示STの間） */
.od-fhold { text-align: center; padding: 2px 4px !important; }
.od-fhold-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
  letter-spacing: .5px;
}
.od-fhold-danger { background: rgba(239,68,68,.06); }
.od-fhold-warn   { background: rgba(252,211,77,.06); }
.od-fhold-safe   { background: transparent; }

.od-fhold-badge-danger {
  background: rgba(239,68,68,.2);
  color: #FCA5A5;
  border: 1px solid rgba(239,68,68,.35);
  animation: od-fhold-pulse 2s ease-in-out infinite;
}
.od-fhold-badge-warn {
  background: rgba(252,211,77,.12);
  color: #FCD34D;
  border: 1px solid rgba(252,211,77,.3);
}
.od-fhold-badge-safe {
  background: transparent;
  color: var(--c-sub);
  border: 1px solid transparent;
  opacity: .4;
  font-weight: 500;
}
@keyframes od-fhold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.25); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* 進入コース変更表示 */
.od-course-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #f59e0b;
}
.od-course-notice-icon {
  flex-shrink: 0;
  font-size: 14px;
}
/* 前づけ時のコース表示タグ（枠番チップの横） */
.od-course-tag {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1;
  margin-top: 2px;
  letter-spacing: -.02em;
}

/* ST判定バッジ */
.od-stv {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.od-stv-stable  { background: rgba(16,185,129,.18); color: #34D399; }
.od-stv-ok      { background: rgba(14,165,233,.12); color: #7DD3FC; }
.od-stv-agr     { background: rgba(249,115,22,.15); color: #FDBA74; }
.od-stv-warn    { background: rgba(252,211,77,.12); color: #FCD34D; }
.od-stv-danger  { background: rgba(239,68,68,.18); color: #FCA5A5; border: 1px solid rgba(239,68,68,.3); }
.od-stv-normal  { background: rgba(148,163,184,.1); color: #94A3B8; }

/* 展開ポイント（アラート） */
.od-st-alerts {
  margin-top: var(--sp-2);
  border: 1px solid var(--od-card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.od-st-alerts-title {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--od-accent);
  background: rgba(14,165,233,.06);
  border-bottom: 1px solid var(--od-card-border);
}
.od-st-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--od-text-sub);
  border-bottom: 1px solid rgba(58,58,72,.3);
}
.od-st-alert:last-child { border-bottom: none; }
.od-alert-danger { background: rgba(239,68,68,.06); }
.od-alert-warn   { background: rgba(252,211,77,.04); }
.od-alert-info   { background: rgba(14,165,233,.04); }
.od-st-alert strong { color: var(--od-text-main); }

/* ST guide toggle (details/summary) */
.od-st-guide-details {
  margin-bottom: var(--sp-3);
}
.od-st-guide-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--od-accent);
  background: rgba(14,165,233,.04);
  border: 1px solid rgba(56,189,248,0.08);
  border-radius: var(--radius-sm);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  list-style: none;
}
.od-st-guide-toggle::-webkit-details-marker { display: none; }
.od-st-guide-toggle::after {
  content: '\25BC';
  font-size: 8px;
  margin-left: auto;
  transition: transform .2s;
  opacity: .5;
}
.od-st-guide-details[open] .od-st-guide-toggle::after {
  transform: rotate(180deg);
}
.od-st-guide-details[open] .od-st-guide-toggle {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: none;
}
.od-st-guide-details .od-st-guide {
  margin-bottom: 0;
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* F率ガイドキー */
.od-st-guide-key-f {
  background: rgba(252,165,165,0.12);
  color: #FCA5A5;
  border: 1px solid rgba(252,165,165,0.2);
}
.od-st-guide-key-late {
  background: rgba(252,211,77,0.12);
  color: #FCD34D;
  border: 1px solid rgba(252,211,77,0.2);
}

/* ============================================================
   58. 独自データ (OD) - レスポンシブ
   ============================================================ */

/* 小画面でガイドグリッド1列化 */
@media (max-width: 400px) {
  .od-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* 大画面 (タブレット以上) */
@media (min-width: 640px) {
  .od-banner {
    padding: var(--sp-4);
  }
  .od-banner-title {
    font-size: 18px;
  }
  .od-section {
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
  }
  .od-section-title {
    font-size: var(--fs-md);
  }
}

/* === Dark mode OD — already dark, minimal overrides === */

/* ============================================================
   59. 独自データ (OD) - まくり差し警戒 / 調子 / 差分
   ============================================================ */

/* F数カラー */
.od-f-danger { color: #FCA5A5 !important; font-weight: 700 !important; }
.od-f-warn   { color: #FCD34D !important; font-weight: 700 !important; }

/* ST差カラー */
.od-gap-fast { color: #34D399 !important; font-weight: 700 !important; }
.od-gap-slow { color: #FCA5A5 !important; font-weight: 700 !important; }

/* 決まり手セル内の%サブテキスト */
.od-kim-sub {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: var(--od-text-sub);
  line-height: 1;
  margin-top: 1px;
}
.od-cell-zero {
  color: var(--od-text-muted);
  opacity: 0.5;
}

/* ============================================================
   59. 会員マイページ
   ============================================================ */

/* --- ログイン画面 --- */
/* === ログイン画面 === */
.mb-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--sp-6) var(--sp-4);
}
.mb-login-inner {
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.mb-login-icon {
  font-size: 48px;
  margin-bottom: var(--sp-3);
}
.mb-login-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.mb-login-desc {
  font-size: 13px;
  color: var(--c-sub);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}
.mb-login-error {
  background: #2A1A1A;
  border: 1px solid #5A2A2A;
  color: #DC2626;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: var(--sp-4);
  text-align: left;
}
.mb-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  background: #06C755;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s, transform .1s;
  box-shadow: 0 4px 14px rgba(6,199,85,.3);
}
.mb-login-btn:hover {
  background: #05B04C;
}
.mb-login-btn:active {
  transform: scale(.97);
}
.mb-login-btn-icon {
  font-size: 18px;
}
.mb-login-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: var(--sp-5);
}
.mb-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--c-text);
}
.mb-feature-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* === プロフィールカード（コンパクト） === */
.mb-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(201,168,76,.15) 0%, var(--c-navy) 100%);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: var(--sp-3);
}
.mb-pc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(201,168,76,.5);
  object-fit: cover;
  flex-shrink: 0;
}
.mb-pc-avatar-init {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #C9A84C, #E8D48B);
  color: #1a1a2e;
  font-size: 20px;
  font-weight: 800;
}
.mb-pc-right {
  min-width: 0;
}
.mb-pc-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--c-text);
  font-family: var(--font-serif);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mb-pc-sub {
  font-size: 11px;
  color: var(--c-sub);
  margin-top: 1px;
}
.mb-pc-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.mb-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: .05em;
}
.mb-badge-plan {
  background: rgba(201,168,76,.15);
  color: var(--c-primary);
  border: 1px solid rgba(201,168,76,.3);
}
.mb-badge-venue {
  background: rgba(255,255,255,.06);
  color: var(--c-sub);
  border: 1px solid var(--c-border);
}

/* === 設定セクション === */
.mb-section {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.mb-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}
.mb-field {
  margin-bottom: var(--sp-4);
}
.mb-field:last-child {
  margin-bottom: 0;
}
.mb-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-sub);
  margin-bottom: 6px;
}
.mb-field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mb-field-hint {
  font-size: 11px;
  color: var(--c-sub);
  margin-top: 4px;
  opacity: .7;
}
.mb-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-bg);
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
  -webkit-appearance: none;
}
.mb-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(201,168,76,.15);
}
.mb-select {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-bg);
  outline: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
}
.mb-save-btn {
  height: 40px;
  padding: 0 16px;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, opacity .15s;
}
.mb-save-btn:hover {
  opacity: .85;
}
.mb-save-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* === 有料会員限定セクション === */
.mb-section-locked {
  border-color: rgba(201,168,76,.15);
  background: linear-gradient(135deg, rgba(201,168,76,.04), var(--c-card));
}
.mb-locked-body {
  text-align: center;
  padding: 8px 0;
}
.mb-locked-note {
  font-size: 12px;
  color: var(--c-primary);
  font-weight: 600;
  opacity: .8;
}
.mb-plan-premium {
  color: var(--c-primary);
  font-weight: 700;
}

/* === アカウント情報 === */
.mb-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
}
.mb-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mb-info-label {
  color: var(--c-sub);
  flex-shrink: 0;
}
.mb-info-value {
  font-weight: 600;
  color: var(--c-text);
  text-align: right;
  word-break: break-all;
}
.mb-connected {
  color: var(--c-green);
}

/* === ログアウト === */
.mb-logout-wrap {
  text-align: center;
  padding: var(--sp-2) 0 var(--sp-6);
}
.mb-logout-btn {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 10px 32px;
  font-size: 13px;
  color: var(--c-sub);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  width: 100%;
  max-width: 200px;
}
.mb-logout-btn:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* === トースト通知 === */
.mb-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-primary);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  z-index: 10000;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.mb-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mb-toast-error {
  border-color: var(--c-accent);
  color: #F87171;
}

/* === モバイル対応 === */
@media (max-width: 380px) {
  .mb-login-features { grid-template-columns: 1fr; }
  .mb-section { padding: var(--sp-3); }
  .mb-field-row { flex-direction: column; align-items: stretch; }
  .mb-save-btn { height: 38px; }
  .mb-profile-card { padding: 12px; gap: 10px; }
  .mb-pc-avatar { width: 44px; height: 44px; }
  .mb-pc-name { font-size: 15px; }
}

/* ============================================================
   59. Venue Detail — プロ仕様コンパクトレイアウト
   ============================================================ */

/* ヘッダーバナー */
.vd-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--grad-hero);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}
.vd-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--c-text);
  line-height: 1.2;
}
.vd-title small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-sub);
  letter-spacing: 0;
  margin-top: 2px;
}
.vd-action {
  margin-left: auto;
  flex-shrink: 0;
}
.vd-action .btn {
  font-size: var(--fs-sm);
  padding: 8px 20px;
  white-space: nowrap;
}

/* 会場属性チップ */
.vd-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.vd-attr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--c-sub);
  font-weight: 500;
}
.vd-attr-val {
  color: var(--c-text);
  font-weight: 600;
}

/* 集計期間ライン */
.vd-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--sp-3);
  background: rgba(201,168,76,0.06);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-sub);
}
.vd-period-dates {
  font-weight: 600;
  color: var(--c-text);
}
.vd-period-count {
  font-variant-numeric: tabular-nums;
}

/* 2カラムグリッド */
.vd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* セクションカード */
.vd-section {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
}
.vd-section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

/* コース別テーブル（横棒グラフ内蔵） */
.vd-course-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 0;
}
.vd-course-label {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.vd-course-bar-wrap {
  flex: 1;
  height: 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.vd-course-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s var(--ease);
}
.vd-course-pct {
  width: 44px;
  text-align: right;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.vd-course-races {
  width: 50px;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

/* 決まり手テーブル */
.vd-kim-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px 0;
}
.vd-kim-label {
  width: 56px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  flex-shrink: 0;
}
.vd-kim-bar-wrap {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}
.vd-kim-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s var(--ease);
}
.vd-kim-pct {
  width: 40px;
  text-align: right;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.vd-kim-count {
  width: 32px;
  text-align: right;
  font-size: 10px;
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

/* 気象統計 */
.vd-weather-stats {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.vd-weather-stat {
  flex: 1;
  text-align: center;
  padding: var(--sp-2);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
}
.vd-weather-stat-val {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.2;
}
.vd-weather-stat-label {
  font-size: 10px;
  color: var(--c-sub);
  margin-top: 2px;
}

/* 天候分布（小型水平バー） */
.vd-wd-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 1px 0;
}
.vd-wd-label {
  width: 28px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  text-align: center;
}
.vd-wd-bar-wrap {
  flex: 1;
  height: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.vd-wd-bar {
  height: 100%;
  background: linear-gradient(135deg, #64748B, #94A3B8);
  border-radius: 2px;
}
.vd-wd-pct {
  width: 32px;
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

/* スマホ：1カラムに */
@media (max-width: 600px) {
  .vd-grid { grid-template-columns: 1fr; }
  .vd-header { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .vd-action { margin-left: 0; }
}

/* ============================================================
   59. ピットレポート（出走表タブ内 .pit-*）
   ============================================================ */

.pit-section {
  margin-top: var(--sp-4, 16px);
}

.pit-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-3, 12px);
}

.pit-title {
  font-size: var(--fs-base, 14px);
  font-weight: 700;
  color: var(--c-text);
}

.pit-reporter {
  font-size: var(--fs-xs, 12px);
  color: var(--c-sub);
  margin-left: auto;
}

.pit-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

.pit-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}

.pit-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 6px var(--sp-3, 12px);
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid var(--c-border);
}

.pit-card-name {
  font-size: var(--fs-sm, 13px);
  font-weight: 700;
  color: var(--c-text);
}

.pit-card-body {
  padding: var(--sp-3, 12px);
  font-size: var(--fs-sm, 13px);
  line-height: 1.7;
  color: var(--c-text);
}

.pit-empty {
  padding: var(--sp-3, 12px) 0;
  font-size: var(--fs-xs, 12px);
  color: var(--c-sub);
}

/* ============================================================
   60. Results Page
   ============================================================ */

/* --- 会場ボタングリッド --- */
.res-page {
  padding-top: var(--sp-2, 8px);
}

/* --- 会場アコーディオンリスト --- */
.res-venue-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.res-venue-item {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-card);
  overflow: hidden;
}
.res-venue-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.res-venue-header:active { opacity: .8; }
.res-venue-header:hover { background: rgba(201, 168, 76, .06); }
.res-venue-item.res-venue-open > .res-venue-header {
  background: rgba(201, 168, 76, .10);
}
.res-venue-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.res-venue-grade {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.2;
}
.res-grade-sg  { background: linear-gradient(135deg,#F59E0B,#D97706); color: #fff; }
.res-grade-g1  { background: linear-gradient(135deg,#F472B6,#EC4899); color: #fff; }
.res-grade-g2  { background: linear-gradient(135deg,#4ADE80,#22C55E); color: #052E16; }
.res-grade-g3  { background: linear-gradient(135deg,#60A5FA,#3B82F6); color: #1E1B4B; }
.res-venue-title {
  font-size: 11px;
  color: var(--c-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 0;
}
.res-venue-day {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.res-venue-arrow {
  font-size: 12px;
  color: var(--c-sub);
  transition: transform .2s;
  flex-shrink: 0;
}
.res-venue-open .res-venue-arrow { transform: rotate(90deg); }

.res-venue-body {
  display: none;
  padding: 0 14px 12px;
  border-top: 1px solid var(--c-border);
}
.res-venue-open > .res-venue-body {
  display: block;
}

/* --- レース結果リスト --- */
.res-race-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.res-race-row {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 10px;
}
.res-race-row .res-detail-panel {
  grid-column: 1 / -1;
}
.res-race-empty {
  opacity: .5;
}
.res-race-no {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-primary);
  text-align: center;
  line-height: 1;
}
.res-race-no small {
  font-size: 11px;
  font-weight: 500;
}
.res-race-order {
  display: flex;
  align-items: center;
  gap: 3px;
}
.res-lane-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.res-lane-sm {
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: 3px;
}
.res-dash {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-sub);
}
.res-dash-sm {
  font-size: 12px;
  color: var(--c-sub);
  margin: 0 1px;
}
.res-no-result {
  font-size: 13px;
  color: var(--c-sub);
}

.res-race-info {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.res-kimarite {
  font-size: 11px;
  color: var(--c-sub);
  white-space: nowrap;
}
.res-odds {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
}
.res-odds-na {
  color: var(--c-sub);
}
.res-detail-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: transparent;
  color: var(--c-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.res-detail-btn:hover {
  border-color: var(--c-primary);
  background: rgba(201, 168, 76, .08);
}
.res-detail-open {
  background: rgba(201, 168, 76, .12);
  border-color: var(--c-primary);
}

.res-empty {
  text-align: center;
  padding: var(--sp-6, 24px);
  color: var(--c-sub);
  font-size: var(--fs-sm, 13px);
}

/* --- 詳細パネル --- */
.res-detail-panel {
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  margin-top: 8px;
}
.res-detail-section {
  margin-bottom: 12px;
}
.res-detail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 6px;
}
.res-rank-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.res-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.res-rank-pos {
  width: 32px;
  font-weight: 600;
  color: var(--c-sub);
  text-align: right;
  flex-shrink: 0;
}
.res-rank-name {
  flex: 1;
  color: var(--c-text);
}
.res-rank-time {
  color: var(--c-sub);
  font-size: 12px;
  font-family: 'Courier New', monospace;
}

/* --- 払戻テーブル --- */
.res-payoff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.res-payoff-table th {
  text-align: left;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-sub);
  border-bottom: 1px solid var(--c-border);
}
.res-payoff-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(58, 58, 72, .4);
}
.res-payoff-type {
  white-space: nowrap;
  color: var(--c-sub);
  font-weight: 500;
}
.res-payoff-combo {
  white-space: nowrap;
}
.res-payoff-amount {
  text-align: right;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}
.res-payoff-highlight {
  background: rgba(201, 168, 76, .08);
}
.res-payoff-highlight .res-payoff-type {
  color: var(--c-primary);
  font-weight: 700;
}
.res-payoff-highlight .res-payoff-amount {
  color: var(--c-primary);
}

/* ============================================================
   60. 会場ランキング (.vr-*)
   ============================================================ */

.vr-container {
  margin: var(--sp-4) 0 var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--c-card);
  overflow: hidden;
  border: 1px solid var(--c-border);
}

/* ヘッダー */
.vr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--sp-3) 8px;
  border-bottom: 1px solid var(--c-border);
}
.vr-header-left { display: flex; flex-direction: column; gap: 1px; }
.vr-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-primary);
  font-family: var(--ff-serif);
}
.vr-subtitle {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  font-weight: 500;
}

/* 期間切り替え */
.vr-period-toggle {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--c-border);
}
.vr-period-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-sub);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
}
.vr-period-active {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(201,168,76,.25);
}

.vr-empty {
  text-align: center; color: var(--c-sub); padding: var(--sp-4); font-size: var(--fs-xs);
}

/* タブ */
.vr-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  background: rgba(255,255,255,.02);
}
.vr-tab {
  flex: 1;
  padding: 10px 4px;
  border: none;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-sub);
  cursor: pointer;
  position: relative;
  transition: color .2s;
  font-family: inherit;
}
.vr-tab::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: transparent;
  transition: background .2s;
}
.vr-tab-active {
  color: var(--c-primary);
}
.vr-tab-active::after {
  background: var(--c-primary);
}

/* パネル */
.vr-panel {
  display: none;
  padding: 0;
}
.vr-panel-active {
  display: block;
}
.vr-panel-desc {
  padding: 8px var(--sp-3) 4px;
  font-size: 11px;
  color: var(--c-sub);
  letter-spacing: .02em;
}

/* 行 */
.vr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--sp-3);
  text-decoration: none;
  color: var(--c-text);
  transition: background .15s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.vr-row:last-child {
  border-bottom: none;
}
.vr-row:active {
  background: rgba(201,168,76,.06);
}

/* 順位 */
.vr-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-sub);
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
}
.vr-medal-1 .vr-rank {
  background: linear-gradient(135deg, #FFD700, #DAA520);
  color: #1A1A2E;
  box-shadow: 0 1px 6px rgba(255,215,0,.25);
}
.vr-medal-2 .vr-rank {
  background: linear-gradient(135deg, #C0C0C0, #909090);
  color: #1A1A2E;
  box-shadow: 0 1px 4px rgba(160,160,160,.2);
}
.vr-medal-3 .vr-rank {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  color: #fff;
  box-shadow: 0 1px 4px rgba(160,82,45,.2);
}

/* 会場情報ブロック */
.vr-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.vr-venue {
  font-size: var(--fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.vr-grade {
  font-size: 9px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.vr-note {
  font-size: 10px;
  color: rgba(158,149,133,.7);
  white-space: nowrap;
}

/* 統計値 */
.vr-stat {
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vr-stat small {
  font-size: 11px;
  font-weight: 500;
  opacity: .65;
  margin-left: 1px;
}
.vr-stat-honmei {
  color: #38BDF8;
}
.vr-stat-are {
  color: #F87171;
}
.vr-stat-sub {
  font-size: 10px;
  color: var(--c-sub);
  white-space: nowrap;
  text-align: right;
  min-width: 50px;
}

@media (max-width: 600px) {
  .vr-header { padding: 10px var(--sp-2) 6px; }
  .vr-period-btn { padding: 3px 10px; font-size: 10px; }
  .vr-row { padding: 8px var(--sp-2); gap: 6px; }
  .vr-rank { width: 22px; height: 22px; font-size: 11px; }
  .vr-stat { font-size: 14px; }
}

/* ============================================================
   59. N値（分析母数）表示
   ============================================================ */

/* グランドサマリーバナー: サブタブ冒頭の集計概要 */
.od-grand-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: var(--sp-3);
  background: rgba(14,165,233,.04);
  border: 1px solid rgba(56,189,248,.12);
  border-radius: var(--radius-sm);
}
.od-grand-summary-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--od-text-sub);
  white-space: nowrap;
}
.od-grand-summary-val {
  font-weight: 700;
  color: var(--od-accent);
  font-size: 12px;
}
.od-grand-summary-label {
  opacity: .75;
}

/* セクションメタ: セクションタイトル直下の集計件数 */
.od-section-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: var(--c-sub);
  margin-top: 2px;
  margin-bottom: 6px;
  padding-left: 1px;
}
.od-section-meta-item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.od-section-meta-val {
  font-weight: 700;
  color: #94A3B8;
}

/* N値バッジ: テーブルセル内の走数表示 */
.od-n-badge {
  font-size: 9px;
  opacity: .6;
  margin-left: 2px;
  white-space: nowrap;
}

/* 低信頼度（N < 5）の行/セルをやや薄く */
.od-low-n {
  opacity: .55;
}
.od-low-n td {
  border-bottom-style: dotted !important;
}

/* --- 展開別着順確率 シナリオチップ --- */
.od-scenario-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.od-scenario-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--od-border, rgba(158,149,133,.25));
  background: transparent;
  color: var(--od-text-sub, #9E9585);
  cursor: pointer;
  transition: all .15s;
}
.od-scenario-chip:hover {
  border-color: var(--od-accent, #0EA5E9);
  color: var(--od-accent, #0EA5E9);
}
.od-scenario-chip.active {
  background: var(--od-accent, #0EA5E9);
  color: #fff;
  border-color: var(--od-accent, #0EA5E9);
}
/* デルタ表示 */
.od-delta {
  font-size: 9px;
  display: block;
  margin-top: 1px;
}
.od-delta-pos { color: #34D399; }
.od-delta-neg { color: #F87171; }
/* ベースライン（括弧内） */
.od-baseline {
  font-size: 9px;
  opacity: .6;
  margin-left: 2px;
}

/* ------------------------------------------------------------
   展開別着順確率 (KCA) — Mobile-first Pro Layout
   ------------------------------------------------------------ */

/* ---- Controls container ---- */
.kca-controls {
  margin-bottom: 12px;
}

/* ---- Player tabs (horizontal scroll) ---- */
.kca-player-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kca-player-tabs::-webkit-scrollbar { display: none; }
.kca-player-tab {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-sub);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.kca-player-tab:hover { border-color: var(--c-primary); color: var(--c-text); }
.kca-player-tab.active {
  background: var(--c-primary);
  color: var(--c-navy);
  border-color: var(--c-primary);
}
.kca-tab-lane {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.kca-tab-name { font-size: 11px; }

/* Boat-color accents */
.kca-boat-1 .kca-tab-lane { background: var(--lane-1-bg); color: var(--lane-1-fg); }
.kca-boat-2 .kca-tab-lane { background: var(--lane-2-bg); color: var(--lane-2-fg); }
.kca-boat-3 .kca-tab-lane { background: var(--lane-3-bg); color: var(--lane-3-fg); }
.kca-boat-4 .kca-tab-lane { background: var(--lane-4-bg); color: var(--lane-4-fg); }
.kca-boat-5 .kca-tab-lane { background: var(--lane-5-bg); color: var(--lane-5-fg); }
.kca-boat-6 .kca-tab-lane { background: var(--lane-6-bg); color: var(--lane-6-fg); }

/* ---- Kimarite cell ---- */
.kca-kim-cell {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  padding: 8px 6px;
  white-space: nowrap;
}

/* ---- Sub-header ---- */
.kca-sub-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--c-text);
  flex-wrap: wrap;
}
.kca-sub-label {
  font-size: 11px;
  color: var(--c-sub);
  font-weight: 400;
}
.kca-sub-label b { color: var(--c-primary-l); }

/* ---- Table ---- */
.kca-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.kca-table thead th {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-sub);
  letter-spacing: .3px;
  text-align: center;
  padding: 7px 4px;
  background: rgba(255,255,255,.03);
  border-bottom: 2px solid var(--c-border);
}
.kca-th-kim { width: 72px; }
.kca-th-r { width: auto; }
.kca-th-n { width: 34px; }

.kca-table tbody td {
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}
.kca-table tbody tr:last-child td { border-bottom: none; }


/* ---- Rate cells (number-focused) ---- */
.kca-r-cell {
  text-align: center;
  padding: 6px 2px;
  vertical-align: middle;
}
.kca-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
}
.kca-val small {
  font-size: 10px;
  font-weight: 400;
  opacity: .7;
}
.kca-val-empty {
  font-size: 13px;
  color: var(--c-sub);
  opacity: .3;
}
.kca-val-hot  { color: #34D399; }
.kca-val-warm { color: #60A5FA; }
.kca-val-cold { color: #F87171; }
.kca-delta {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  margin-top: 1px;
}
.kca-d-pos { color: #34D399; }
.kca-d-neg { color: #F87171; }
.kca-avg {
  font-size: 9px;
  color: var(--c-sub);
  opacity: .5;
  margin-top: 1px;
}
.kca-n-cell {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-sub);
  padding: 6px 2px;
}

/* Low-N dim */
tr.kca-low-n { opacity: .45; }

/* ---- Desktop widen ---- */
@media (min-width: 600px) {
  .kca-player-tab { padding: 6px 10px; font-size: 12px; }
  .kca-tab-lane { width: 20px; height: 20px; font-size: 11px; }
  .kca-tab-name { font-size: 12px; }
  .kca-kim-chip { font-size: 12px; padding: 5px 16px; }
  .kca-val { font-size: 16px; }
  .kca-delta { font-size: 10px; }
  .kca-r-cell { padding: 8px 6px; }
  .kca-th-kim { width: 90px; }
  .kca-th-n { width: 44px; }
  .kca-kim-cell { font-size: 13px; }
}

/* ------------------------------------------------------------
   連対相関マトリクス — Mobile-first Pro Layout
   ------------------------------------------------------------ */

.corr-section { margin-top: 16px; }
.vd-corr-desc { font-size: 12px; color: var(--c-sub); margin-bottom: 8px; }

/* モード切替バー */
.corr-mode-bar {
  display: flex; gap: 0; margin: 10px 0 8px;
  border: 1px solid var(--c-border); border-radius: 6px; overflow: hidden;
}
.corr-mode-btn {
  flex: 1; padding: 7px 0; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--c-sub); border: none;
  cursor: pointer; transition: all .15s;
}
.corr-mode-btn.active {
  background: var(--c-primary); color: #000;
}

/* 決まり手フィルターチップ */
.corr-kim-chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.corr-kim-chips::-webkit-scrollbar { display: none; }
.corr-kim-chip {
  flex-shrink: 0; padding: 4px 10px; font-size: 11px; font-weight: 500;
  background: var(--c-card); color: var(--c-sub);
  border: 1px solid var(--c-border); border-radius: 14px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.corr-kim-chip.active {
  background: var(--c-primary-d); color: #000;
  border-color: var(--c-primary);
}

/* メタ情報 */
.corr-meta {
  font-size: 11px; color: var(--c-sub); margin-bottom: 6px; text-align: right;
}

/* マトリクステーブル */
.corr-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: 11px;
}
.corr-th-corner {
  width: 52px; padding: 6px 2px; font-size: 10px; font-weight: 600;
  color: var(--c-sub); text-align: center; vertical-align: middle;
  border-bottom: 2px solid var(--c-border);
}
.corr-th-c {
  padding: 6px 2px; font-size: 10px; font-weight: 700;
  text-align: center; border-bottom: 2px solid var(--c-border);
}

/* ボートヘッダー色 */
.boat-header-1 { color: #fff; }
.boat-header-2 { color: #111; background: rgba(255,255,255,0.08); }
.boat-header-3 { color: #e74c3c; }
.boat-header-4 { color: #2980b9; }
.boat-header-5 { color: #f1c40f; }
.boat-header-6 { color: #2ecc71; }

/* 行ヘッダー */
.corr-row-header {
  padding: 4px 2px; text-align: center; vertical-align: middle;
  border-right: 1px solid var(--c-border);
}

/* セル */
.corr-cell {
  padding: 6px 2px; text-align: center; vertical-align: middle;
  border: 1px solid rgba(58,58,72,0.4); position: relative;
  transition: background .15s;
}
.corr-cell-self {
  background: rgba(58,58,72,0.15) !important;
  color: var(--c-sub); font-size: 10px; font-weight: 600;
}
.corr-cell-empty { color: var(--c-sub); font-size: 10px; }
.corr-cell-best { box-shadow: inset 0 0 0 1.5px var(--c-primary); }

.corr-rate {
  display: block; font-size: 13px; font-weight: 700; color: var(--c-text);
  line-height: 1.2;
}
.corr-rate small { font-size: 9px; font-weight: 400; }
.corr-n {
  display: block; font-size: 9px; color: var(--c-sub); line-height: 1.3;
}

/* 凡例 */
.corr-legend {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px; font-size: 10px; color: var(--c-sub);
}
.corr-leg-item { display: flex; align-items: center; gap: 4px; }
.corr-leg-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.corr-leg-best-mark { color: var(--c-primary); font-size: 11px; }

/* Desktop overrides */
@media (min-width: 600px) {
  .corr-table { font-size: 13px; }
  .corr-rate { font-size: 15px; }
  .corr-n { font-size: 10px; }
  .corr-th-corner { width: 72px; font-size: 11px; }
  .corr-th-c { font-size: 12px; }
  .corr-cell { padding: 8px 4px; }
  .corr-mode-btn { font-size: 13px; padding: 8px 0; }
  .corr-kim-chip { font-size: 12px; padding: 5px 12px; }
}

/* ============================================================
   59. ST分析 判定・乖離ドット (.sts-*)
   ============================================================ */

/* 判定セル — バッジ + サブテキスト縦並び */
.sts-verdict-cell {
  vertical-align: middle;
  text-align: center;
  min-width: 72px;
}
.sts-verdict-sub {
  font-size: 9px;
  color: var(--c-sub);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
}

/* 乖離傾向ドット */
.sts-gap-dots {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
.sts-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin: 0 1px;
  vertical-align: middle;
}
.sts-dot-ok   { background: #22C55E; }
.sts-dot-slow { background: #EF4444; }
.sts-dot-fast { background: #3B82F6; }

/* 予測ST */
.gap-ex-cell {
  font-variant-numeric: tabular-nums;
  color: var(--c-sub);
  font-size: 11px;
}
.gap-pred-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.gap-pred-conf {
  font-size: 9px;
  margin-left: 2px;
  vertical-align: super;
}
.gap-pred-high { color: #16A34A; }
.gap-pred-mid  { color: var(--c-text); }
.gap-pred-low  { color: #94A3B8; }

/* 乖離σ */
.gap-sig-stable { color: #16A34A; font-weight: 600; }
.gap-sig-normal { color: var(--c-text); }
.gap-sig-wild   { color: #EF4444; font-weight: 600; }

/* Desktop */
@media (min-width: 600px) {
  .sts-verdict-sub { font-size: 10px; }
  .sts-dot { width: 8px; height: 8px; }
  .gap-pred-cell { font-size: 13px; }
}

/* ============================================================
   Section: レース展開ハイライト + コース適性
   ============================================================ */

.hl-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.hl-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}
.hl-icon {
  flex-shrink: 0;
  font-size: 14px;
  width: 20px;
  text-align: center;
}
.hl-hot {
  background: rgba(239, 68, 68, .08);
  border-left: 3px solid #EF4444;
  color: #DC2626;
}
.hl-wave {
  background: rgba(245, 158, 11, .08);
  border-left: 3px solid #F59E0B;
  color: #D97706;
}
.hl-attack {
  background: rgba(59, 130, 246, .08);
  border-left: 3px solid #3B82F6;
  color: #2563EB;
}
.hl-info {
  background: rgba(100, 116, 139, .06);
  border-left: 3px solid #94A3B8;
  color: #64748B;
}

.cp-table td {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* AI予想 準備中 */
.ai-coming-soon {
  text-align: center;
  padding: 48px 24px;
}
.ai-cs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
}
.ai-cs-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-main);
  margin-bottom: 8px;
}
.ai-cs-text {
  font-size: var(--fs-sm);
  color: var(--c-sub);
  margin-bottom: 6px;
}
.ai-cs-sub {
  font-size: var(--fs-xs);
  color: #94A3B8;
  line-height: 1.5;
}

/* ============================================================
   62. 利用規約・プライバシーポリシー
   ============================================================ */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0 48px;
}
.legal-title {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-main);
  margin-bottom: 4px;
}
.legal-updated {
  font-size: var(--fs-xs);
  color: #94A3B8;
  margin-bottom: 32px;
}
.legal-section {
  margin-bottom: 28px;
}
.legal-section h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-main);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.legal-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-sub);
  margin: 12px 0 6px;
}
.legal-section p {
  font-size: var(--fs-sm);
  color: var(--c-sub);
  line-height: 1.8;
  margin-bottom: 8px;
}
.legal-section ul {
  margin: 8px 0 12px 20px;
  padding: 0;
}
.legal-section li {
  font-size: var(--fs-sm);
  color: var(--c-sub);
  line-height: 1.7;
  margin-bottom: 4px;
}
.legal-section a {
  color: #3B82F6;
  text-decoration: underline;
}
.legal-section strong {
  color: var(--c-main);
}

/* ============================================================
   Section: Pickup (注目レース) — .pu-*
   ============================================================ */

.pu-header {
  text-align: center;
  padding: 20px 0 12px;
}
.pu-header-title {
  font-family: var(--ff-serif);
  font-size: 1.4em;
  font-weight: 700;
  color: var(--c-main);
  margin: 0 0 4px;
}
.pu-header-sub {
  font-size: 0.85em;
  color: var(--text-muted);
  margin: 0;
}

.pu-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 90px;
}

.pu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.pu-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pu-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.pu-tag {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
  background: #64748B;
}
.pu-tag-grade {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}
.pu-tag-mushoubu {
  background: linear-gradient(135deg, #EF4444, #DC2626);
}
.pu-tag-a1 {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}
.pu-tag-form {
  background: linear-gradient(135deg, #22C55E, #16A34A);
}
.pu-tag-day {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.pu-score {
  font-size: 0.85em;
  font-weight: 700;
  min-width: 32px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.pu-score-gold {
  background: linear-gradient(135deg, #F59E0B, #EAB308);
  color: #fff;
}
.pu-score-silver {
  background: linear-gradient(135deg, #94A3B8, #64748B);
  color: #fff;
}
.pu-score-bronze {
  background: linear-gradient(135deg, #D97706, #B45309);
  color: #fff;
}

.pu-card-venue {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pu-venue-name {
  font-family: var(--ff-serif);
  font-size: 1.1em;
  font-weight: 700;
  color: var(--c-main);
}
.pu-deadline {
  font-size: 0.8em;
  color: var(--text-muted);
}

.pu-card-tournament {
  font-size: 0.82em;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pu-day-label {
  color: var(--text-muted);
}

.pu-player-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.pu-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88em;
  padding: 3px 0;
}
.pu-player-name {
  font-weight: 600;
  min-width: 60px;
}
.pu-player-rate {
  font-size: 0.9em;
  font-family: var(--ff-mono, monospace);
}

.pu-form-up {
  font-size: 0.72em;
  font-weight: 600;
  color: #16A34A;
  background: #F0FDF4;
  padding: 1px 5px;
  border-radius: 3px;
}
.pu-form-down {
  font-size: 0.72em;
  font-weight: 600;
  color: #DC2626;
  background: #FEF2F2;
  padding: 1px 5px;
  border-radius: 3px;
}
.pu-form-stable {
  font-size: 0.72em;
  font-weight: 600;
  color: #64748B;
  background: #F1F5F9;
  padding: 1px 5px;
  border-radius: 3px;
}

.pu-mushoubu-badge {
  font-size: 0.68em;
  font-weight: 700;
  color: #DC2626;
  border: 1px solid #FECACA;
  background: #FEF2F2;
  padding: 1px 5px;
  border-radius: 3px;
}

.pu-detail-link {
  display: block;
  text-align: center;
  padding: 8px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--c-accent);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.pu-detail-link:hover {
  background: var(--surface-hover, #F1F5F9);
}

.pu-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.pu-empty p:first-child {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 8px;
}

.pu-coming-soon {
  text-align: center;
  padding: 60px 20px 80px;
  color: var(--text-secondary);
}
.pu-coming-soon-icon {
  font-size: 2.5em;
  margin-bottom: 16px;
  opacity: 0.6;
}
.pu-coming-soon-title {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.pu-coming-soon-desc {
  font-size: 0.9em;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ============================================================
   END OF STYLESHEET
   ============================================================ */