/* =====================================================
   iOS Safari 安定化（リロード崩れ対策）
   ===================================================== */
html, body{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* styles_board_icon2_clean.css
   - Fixes broken braces/selectors that prevented theme switching.
   - Day/Night is controlled by CSS variable --p (0=night,1=day) set by JS in the HTML.
*/

:root{
  /* default palette will be overridden by blended vars below */
  --bg:#0b1220;
  --text:#e9eefc;
  --muted:#b9c2dd;
  --line:rgba(233,238,252,.14);
  --accent:#7aa2ff;
  --accent2:#4ee0c8;
  --warn:#ff5a6a;
  --ok:#7cf2a7;

  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.25);

  --max:1060px;
  --pad:18px;

  /* typography */
  --lh: 1.65;
  --lh-mul: 1;
  --base: 16px;
  --table: 14px;

  /* You can tweak sizes here */
  --pc-sm: 15px;  --pc-md: 17px;  --pc-lg: 19px;
  --sp-sm: 14px;  --sp-md: 16px;  --sp-lg: 18px;

  /* table font (PC only; mobile fixed) */
  --pc-table-sm: 13.5px; --pc-table-md: 15.3px; --pc-table-lg: 17.1px;
  --sp-table: 14px;
}

/* PC */
@media (min-width: 861px){
  html[data-font="sm"]{ --base: var(--pc-sm); --table: var(--pc-table-sm); }
  html[data-font="md"]{ --base: var(--pc-md); --table: var(--pc-table-md); }
  html[data-font="lg"]{ --base: var(--pc-lg); --table: var(--pc-table-lg); }
  
  .venueBoard[data-cols="3"]{
    padding: 0 60px;
  }

  .venueBoard[data-cols="2"]{
    padding: 0 200px;
  }

  .venueBoard[data-cols="1"]{
    padding: 0 300px;
  }

}

/* Mobile */
@media (max-width: 860px){
  html[data-font="sm"]{ --base: var(--sp-sm); }
  html[data-font="md"]{ --base: var(--sp-md); }
  html[data-font="lg"]{ --base: var(--sp-lg); }
  :root{ --table: var(--sp-table); }

  .venueBoard{
    padding: 0 30px;
  }
}

/* ---- Day/Night (Tokyo fixed) blended theme ----
   JS sets --p between 0 (night) and 1 (day), with 20min gradient around sunrise/sunset.
*/
:root{
  --p: 0; /* 0..1 */

  /* Night palette (RGB components) */
  --bgN-r: 11; --bgN-g: 18; --bgN-b: 32;
  --textN-r: 233; --textN-g: 238; --textN-b: 252;
  --mutedN-r: 185; --mutedN-g: 194; --mutedN-b: 221;
  --lineN-r: 233; --lineN-g: 238; --lineN-b: 252; --lineN-a: .14;
  --accN-r: 122; --accN-g: 162; --accN-b: 255;
  --acc2N-r: 78; --acc2N-g: 224; --acc2N-b: 200;

  /* Day palette (RGB components) */
  --bgD-r: 246; --bgD-g: 248; --bgD-b: 255;
  --textD-r: 18; --textD-g: 23; --textD-b: 38;
  --mutedD-r: 68; --mutedD-g: 78; --mutedD-b: 108;
  --lineD-r: 18; --lineD-g: 23; --lineD-b: 38; --lineD-a: .10;
  --accD-r: 36; --accD-g: 108; --accD-b: 255;
  --acc2D-r: 0; --acc2D-g: 168; --acc2D-b: 156;

  /* blended */
  --bg: rgb(
    calc(var(--bgN-r) + (var(--bgD-r) - var(--bgN-r)) * var(--p)),
    calc(var(--bgN-g) + (var(--bgD-g) - var(--bgN-g)) * var(--p)),
    calc(var(--bgN-b) + (var(--bgD-b) - var(--bgN-b)) * var(--p))
  );
  --text: rgb(
    calc(var(--textN-r) + (var(--textD-r) - var(--textN-r)) * var(--p)),
    calc(var(--textN-g) + (var(--textD-g) - var(--textN-g)) * var(--p)),
    calc(var(--textN-b) + (var(--textD-b) - var(--textN-b)) * var(--p))
  );
  --muted: rgb(
    calc(var(--mutedN-r) + (var(--mutedD-r) - var(--mutedN-r)) * var(--p)),
    calc(var(--mutedN-g) + (var(--mutedD-g) - var(--mutedN-g)) * var(--p)),
    calc(var(--mutedN-b) + (var(--mutedD-b) - var(--mutedN-b)) * var(--p))
  );
  --line: rgba(
    calc(var(--lineN-r) + (var(--lineD-r) - var(--lineN-r)) * var(--p)),
    calc(var(--lineN-g) + (var(--lineD-g) - var(--lineN-g)) * var(--p)),
    calc(var(--lineN-b) + (var(--lineD-b) - var(--lineN-b)) * var(--p)),
    calc(var(--lineN-a) + (var(--lineD-a) - var(--lineN-a)) * var(--p))
  );
  --accent: rgb(
    calc(var(--accN-r) + (var(--accD-r) - var(--accN-r)) * var(--p)),
    calc(var(--accN-g) + (var(--accD-g) - var(--accN-g)) * var(--p)),
    calc(var(--accN-b) + (var(--accD-b) - var(--accN-b)) * var(--p))
  );
  --accent2: rgb(
    calc(var(--acc2N-r) + (var(--acc2D-r) - var(--acc2N-r)) * var(--p)),
    calc(var(--acc2N-g) + (var(--acc2D-g) - var(--acc2N-g)) * var(--p)),
    calc(var(--acc2N-b) + (var(--acc2D-b) - var(--acc2N-b)) * var(--p))
  );

  /* ---- raceLink outline (枠線) ----
     調整するなら↓の N(夜)/D(昼) の a(透明度) を変えるのが簡単です。
     例：夜を濃くしたい → --raceN-a を 0.30 などに上げる
         昼を薄くしたい → --raceD-a を 0.10 などに下げる
  */
  --raceN-r: 233; --raceN-g: 238; --raceN-b: 252; --raceN-a: .22; /* 夜 */
  --raceD-r: 18;  --raceD-g: 23;  --raceD-b: 38;  --raceD-a: .16; /* 昼 */

  --race-outline: rgba(
    calc(var(--raceN-r) + (var(--raceD-r) - var(--raceN-r)) * var(--p)),
    calc(var(--raceN-g) + (var(--raceD-g) - var(--raceN-g)) * var(--p)),
    calc(var(--raceN-b) + (var(--raceD-b) - var(--raceN-b)) * var(--p)),
    calc(var(--raceN-a) + (var(--raceD-a) - var(--raceN-a)) * var(--p))
  );

  /* ---- raceLink background (背景) ---- */
  /* 夜 */
  --raceBgN-r: 255;
  --raceBgN-g: 255;
  --raceBgN-b: 255;
  --raceBgN-a: .06;

  /* 昼 */
  --raceBgD-r:  36;
  --raceBgD-g: 108;
  --raceBgD-b: 255;
  --raceBgD-a: .06;

  /* 昼夜ブレンド結果 */
  --raceLink-bg: rgba(
    calc(var(--raceBgN-r) + (var(--raceBgD-r) - var(--raceBgN-r)) * var(--p)),
    calc(var(--raceBgN-g) + (var(--raceBgD-g) - var(--raceBgN-g)) * var(--p)),
    calc(var(--raceBgN-b) + (var(--raceBgD-b) - var(--raceBgN-b)) * var(--p)),
    calc(var(--raceBgN-a) + (var(--raceBgD-a) - var(--raceBgN-a)) * var(--p))
  );

  /* Shadow: keep stable */
  --shadow:0 12px 30px rgba(0,0,0,.25);
}

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--base);
  line-height: calc(var(--lh) * var(--lh-mul));
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(122,162,255,.22), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(78,224,200,.18), transparent 55%),
    radial-gradient(900px 700px at 10% 100%, rgba(255,90,106,.12), transparent 60%),
    var(--bg);

  transition: background 600ms linear, color 600ms linear;
}
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.wrap{ max-width: var(--max); margin:0 auto; padding:22px var(--pad) 56px; }

header{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.brand{ min-width:0; }
.brand h1{
  margin:0;
  font-size: clamp(1.85rem, 2vw, 2.2rem);
  letter-spacing:.02em;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.brand p{ margin:.2rem 0 0; font-size:.85rem; color: var(--muted); }

.tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px; font-size:.8rem;
  border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--muted);
  user-select:none;
}
.dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(122,162,255,.16); }

.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
.seg button{
  appearance:none; border:0; background:transparent; color:var(--text);
  padding:8px 10px; font-size:.8rem; cursor:pointer;
}
.seg button:hover{ filter:brightness(1.08); }
.seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(122,162,255,.22), rgba(122,162,255,.08));
}

main{ margin-top: 18px; }
.grid{ display:grid; grid-template-columns: 1.4fr .9fr; gap:14px; align-items:start; }
@media (max-width: 860px){
  header{ flex-direction:column; align-items:flex-start; }
  .tools{ justify-content:flex-start; }
  .grid{ grid-template-columns: 1fr; }
}

.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;

  transition: background 600ms linear, border-color 600ms linear, box-shadow 600ms linear;
}
.hd{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.hd h2{ margin:0; font-size: 1.2rem; letter-spacing:.02em; }
.kicker{ font-size:.8rem; color: var(--muted); }
.bd{ padding:14px 16px 16px; }

.list{ margin:10px 0 0; padding:0 0 0 1.2em; }
.list li{ margin:6px 0; }
.muted{ color: var(--muted); }

.notice{
  border-left:4px solid var(--warn);
  background: rgba(255,90,106,.08);
  padding:10px 12px;
  border-radius: 12px;
  margin-top: 10px;
}
.notice b{ color: var(--warn); }

.cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  text-decoration:none; font-size:.85rem;
}
.btn:hover{ text-decoration:none; filter:brightness(1.06); }
.btn.primary{
  border-color: rgba(122,162,255,.55);
  background: linear-gradient(180deg, rgba(122,162,255,.22), rgba(122,162,255,.08));
}
.btn .mini{ font-size:.8rem; color: var(--muted); }

.tableWrap{ overflow:auto; border-radius:14px; border:1px solid var(--line); background: rgba(0,0,0,.08); 
  -webkit-overflow-scrolling: touch;
}
table{ width:100%; border-collapse: collapse; min-width: 620px; 
      font-size: var(--table);
    }
th,td{ padding:12px 12px; border-bottom:1px solid var(--line); vertical-align: top; font-size:.85rem; }
th{ text-align:left; color: var(--muted); background: rgba(255,255,255,.04); position: sticky; top: 0; backdrop-filter: blur(8px); }
tr:last-child td{ border-bottom:none; }
.pill{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); font-size:.78rem; white-space:nowrap; }

details{
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
  margin-top: 12px;
}
summary{
  padding: 12px 14px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--text);
}
summary::-webkit-details-marker{ display:none; }
.detailsBody{ padding: 0 14px 14px; color: var(--muted); font-size:.85rem; }
footer{ margin-top:18px; text-align:center; color: var(--muted); font-size:.8rem; }

@media (max-width: 480px){
  :root{ --pad: 14px; }
  .bd{ padding: 12px 14px 14px; }
  .btn{ width:100%; justify-content: space-between; }
  table{ min-width: 560px; }
}


@media (max-width: 720px){
table{ min-width: 0; }
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  table tr{
    border:1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    margin: 10px 0;
    overflow:hidden;
  }
  table td{
    border-bottom:1px solid var(--line);
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    font-size:.9rem;
  }
  table td:last-child{ border-bottom:0; }
  table td::before{
    content: attr(data-label);
    color: var(--muted);
    flex: 0 0 auto;
    min-width: 5.5em;
  }
}


.wrap{ max-width: var(--max); margin:0 auto; padding:22px var(--pad) 56px; }

header{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.brand{ min-width:0; }
.brand h1{
  margin:0;
  font-size: clamp(1.85rem, 2vw, 2.2rem);
  letter-spacing:.02em;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.brand p{ margin:.2rem 0 0; font-size:.85rem; color: var(--muted); }

.tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px; font-size:.8rem;
  border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--muted);
  user-select:none;
}
.dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(122,162,255,.16); }

.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
.seg button{
  appearance:none; border:0; background:transparent; color:var(--text);
  padding:8px 10px; font-size:.8rem; cursor:pointer;
}
.seg button:hover{ filter:brightness(1.08); }
.seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(122,162,255,.22), rgba(122,162,255,.08));
}

main{ margin-top: 18px; }
.grid{ display:grid; grid-template-columns: 1.4fr .9fr; gap:14px; align-items:start; }
@media (max-width: 860px){
  header{ flex-direction:column; align-items:flex-start; }
  .tools{ justify-content:flex-start; }
  .grid{ grid-template-columns: 1fr; }
}

.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;

  transition: background 600ms linear, border-color 600ms linear, box-shadow 600ms linear;
}
.hd{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.hd h2{ margin:0; font-size: 1.2rem; letter-spacing:.02em; }
.kicker{ font-size:.8rem; color: var(--muted); }
.bd{ padding:14px 16px 16px; }

.list{ margin:10px 0 0; padding:0 0 0 1.2em; }
.list li{ margin:6px 0; }
.muted{ color: var(--muted); }

.notice{
  border-left:4px solid var(--warn);
  background: rgba(255,90,106,.08);
  padding:10px 12px;
  border-radius: 12px;
  margin-top: 10px;
}
.notice b{ color: var(--warn); }

.cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  text-decoration:none; font-size:.85rem;
}
.btn:hover{ text-decoration:none; filter:brightness(1.06); }
.btn.primary{
  border-color: rgba(122,162,255,.55);
  background: linear-gradient(180deg, rgba(122,162,255,.22), rgba(122,162,255,.08));
}
.btn .mini{ font-size:.8rem; color: var(--muted); }

.tableWrap{ overflow:auto; border-radius:14px; border:1px solid var(--line); background: rgba(0,0,0,.08); 
  -webkit-overflow-scrolling: touch;
}
table{ width:100%; border-collapse: collapse; min-width: 620px; 
      font-size: var(--table);
    }
th,td{ padding:12px 12px; border-bottom:1px solid var(--line); vertical-align: top; font-size:.85rem; }
th{ text-align:left; color: var(--muted); background: rgba(255,255,255,.04); position: sticky; top: 0; backdrop-filter: blur(8px); }
tr:last-child td{ border-bottom:none; }
.pill{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); font-size:.78rem; white-space:nowrap; }

details{
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
  margin-top: 12px;
}
summary{
  padding: 12px 14px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--text);
}
summary::-webkit-details-marker{ display:none; }
.detailsBody{ padding: 0 14px 14px; color: var(--muted); font-size:.85rem; }
footer{ margin-top:18px; text-align:center; color: var(--muted); font-size:.8rem; }

@media (max-width: 480px){
  :root{ --pad: 14px; }
  .bd{ padding: 12px 14px 14px; }
  .btn{ width:100%; justify-content: space-between; }
  table{ min-width: 560px; }
}


table{ min-width: 0; }
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  table tr{
    border:1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    margin: 10px 0;
    overflow:hidden;
  }
  table td{
    border-bottom:1px solid var(--line);
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    font-size:.9rem;
  }
  table td:last-child{ border-bottom:0; }
  table td::before{
    content: attr(data-label);
    color: var(--muted);
    flex: 0 0 auto;
    min-width: 5.5em;
  }



/* ===== 2場/3場 開催：横スクロール無しの「会場ボード」表示 ===== */
.venueBoard{
  border:1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.venueBoard .vbHead{
  padding: 12px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.venueBoard .vbDate{ margin:0; font-weight:700; letter-spacing:.02em; }
.venueBoard .vbSub{ color: var(--muted); font-size: .85rem; }
.venueBoard .vbGrid{
  display:grid;
  grid-template-columns: repeat(var(--vb-cols, 2), minmax(0, 1fr));
  gap: 12px;
  padding: 12px 12px 14px;
}
.venueBoard .vbCol{
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  overflow:hidden;
}
.venueBoard .vbColHead{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.venueBoard .vbList{ list-style:none; margin:0; padding:6px 0; }
.venueBoard .vbList li{ margin:0; padding:0; }
.venueBoard .raceLink{
  display:block;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: .92rem;
}
.venueBoard .raceLink:hover{ text-decoration:none; background: rgba(122,162,255,.10); }
.venueBoard[data-cols="3"] .raceLink{ font-size: .88rem; padding:9px 12px; }



@media (max-width: 860px){
  /* スマホでも横並び（2場は2列、3場は3列） */
  .venueBoard .vbGrid{
    grid-template-columns: repeat(var(--vb-cols, 2), minmax(0, 1fr));
    gap: 10px;
    padding: 10px 10px 12px;
  }
  .venueBoard .vbColHead{
    padding: 9px 10px;
    font-size: .9rem;
  }
  .venueBoard .raceLink{
    padding: 8px 10px;
    font-size: .82rem;
  }
  .venueBoard[data-cols="3"] .raceLink{ font-size: .78rem; }
}



/* ===== venueBoard: grid rule (ensure present) ===== */
.venueBoard .vbGrid{
  display:grid;
  grid-template-columns: repeat(var(--vb-cols, 2), minmax(0, 1fr));
  gap: 12px;
  padding: 12px 12px 14px;
}

/* ===== raceLink: split into text + icon (icon is not truncated) ===== */
.venueBoard .raceLink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.venueBoard .raceText{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.venueBoard .raceIcon{
  flex: 0 0 auto;
  opacity: .85;
  font-size: .95em;
  line-height: 1;
}

@media (max-width: 860px){
  .venueBoard .raceLink{ gap: 8px; }
  .venueBoard .raceIcon{ font-size: .9em; }
}



/* ===== FIX: 省略「…」がリンク全体に掛かってアイコンも消える問題の対策 =====
   既存CSSで .raceLink 自体に
   white-space:nowrap / overflow:hidden / text-overflow:ellipsis
   が付いている場合があるので、ここで無効化し、
   省略は .raceText のみに適用します。
*/
.venueBoard .vbCol{ min-width: 0; }  /* grid内で縮められるように */
.venueBoard .raceLink{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 0; /* flex item */
}
.venueBoard .raceText{
  flex: 1 1 auto;
  min-width: 0;
}
.venueBoard .raceIcon{
  flex: 0 0 auto;
}

/* もしリンク内が狭くて「…」を減らしたい場合の例（任意で変更可） */


/* =========================
   raceLink（レースリンク）の枠線色を調整する
   - 枠線色は :root の --race-outline（昼夜で自動ブレンド）を使います
   - PC/スマホで太さ・余白を分けたい場合は、下の @media 内を調整してください
   ========================= */
.venueBoard .vbList{ padding: 6px 0 10px; } /* 末尾に少し余白 */
.venueBoard .raceLink{
  /* 既存の区切り線（border-top）より「枠線」っぽく表示 */
  border: 1px solid var(--race-outline);
  border-top: 1px solid var(--race-outline) !important; /* 既存指定が残っていても同色に */
  border-radius: 12px;
  margin: 6px 10px;
  background: rgba(255,255,255,.02);
}

/* PCで少し余白を広めにしたい場合 */
@media (min-width: 861px){
  .venueBoard .raceLink{
    margin: 7px 12px;
  }
}

/* スマホで余白をコンパクトにしたい場合 */
@media (max-width: 860px){
  .venueBoard .raceLink{
    border-radius: 10px;
    margin: 5px 8px;
  }

  /* 2場/3場でも強制で1列（縦に並べる） */
  .venueBoard .vbGrid{
    grid-template-columns: 1fr !important;
  }

}


/* raceLink 背景の適用 */
.venueBoard .raceLink{
  background: var(--raceLink-bg);
}

/* ===============================
   単オッズ 更新状況ボード
   =============================== */

/* 上部コンテンツと横幅・余白を完全に揃えるラッパー */
.odds-board {
  max-width: 600px;          /* 上の本文・リンク群と合わせる */
  margin: 12px auto 6px;     /* 上下控えめ、左右は中央揃え */
  padding: 0;
}

/* 表本体 */
.odds-table {
  display: grid;
  grid-template-columns:
    36px    /* 土曜・日曜：できるだけ細く */
    1fr     /* 単オッズ 無 */
    1fr;    /* 単オッズ 有 */
  border: 1px solid var(--border-color, #666);
  border-collapse: collapse;
  font-size: 13px;
}

/* セル共通 */
.odds-cell {
  border: 1px solid var(--border-color, #666);
  padding: 4px 6px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}

/* 曜日セル */
.odds-day {
  font-weight: bold;
  writing-mode: vertical-rl; /* 土｜曜 を縦にして幅圧縮 */
  letter-spacing: 1px;
}

/* 単オッズ列 */
.odds-type {
  font-weight: normal;
}

/* 注釈（右寄せ） */
.odds-note {
  max-width: 600px;          /* 表と完全一致 */
  margin: 4px auto 0;
  padding-right: 2px;
  text-align: right;
  font-size: 12px;
  opacity: 0.8;
}

/* ===============================
   スマホ対応
   =============================== */
@media screen and (max-width: 600px) {
  .odds-board {
    max-width: calc(100% - 24px);
  }

  .odds-note {
    max-width: calc(100% - 24px);
    font-size: 11px;
  }

  .odds-table {
    font-size: 12px;
  }
}

/* ===============================
   黒基調（ダークモード）対応
   =============================== */
body.dark,
body.night {
  --border-color: #aaa;
}



/* =====================================================
   単オッズ 更新状況ボード（Safari安定：TABLE版）
   - 触る場所：末尾の「調整用変数」だけ
   ===================================================== */

/* 調整用（スマホだけ詰めたい等はここだけ触ればOK） */
:root{
  --ob-day-w: 40px;      /* 曜日列の幅 */
  --ob-font: 13px;       /* 表の基本文字 */
  --ob-pad-y: 6px;
  --ob-pad-x: 8px;

  /* スマホの微調整 */
  --ob-font-sp: 12.5px;
  --ob-pad-y-sp: 6px;
  --ob-pad-x-sp: 7px;
  --ob-minw-sp: 320px;   /* 右見切れ防止（必要なら 300〜360 で調整） */
}

/* カード(.bd)の余白と揃える（もし .bd 外に置いた場合にも効くように） */
.card > .oddsWrap{
  padding: 14px 16px 16px 8px; /* 上 右 下 左 */
  box-sizing: border-box;
}

/* 表の土台 */
.oddsWrap .oddsBoard{ width: 100%; box-sizing: border-box; }

/* テーブル */
.oddsWrap .oddsTbl{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* ← iOS Safari で安定 */
  font-size: var(--ob-font);
}

/* 列幅 */
.oddsWrap .oddsTbl .colDay{ width: var(--ob-day-w); }

/* セル */
.oddsWrap .oddsTbl th,
.oddsWrap .oddsTbl td{
  border: 1px solid var(--border-color, #666);
  padding: var(--ob-pad-y) var(--ob-pad-x);
  text-align: center;
  white-space: nowrap;
}

/* 見出し */
.oddsWrap .oddsTbl thead th{ font-weight: 700; }
.oddsWrap .tdDay{ font-weight: 700; }

/* 注釈：表の右端基準で右寄せ */
.oddsWrap .obNote{
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  opacity: .8;
}

/* 済/未 pill */
.oddsWrap .obState{
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 800;
}

/* 色（--p が 1=昼 / 0=夜 の想定） */
:root{
  --odds-done: rgb(46,125,50);
  --odds-pending: rgb(198,40,40);
}
/* 夜のとき（JSが root.style.setProperty("--p","0") をしているので style 属性で判定） */
html[style*="--p: 0"],
:root[style*="--p: 0"]{
  --odds-done: rgb(126,220,140);
  --odds-pending: rgb(255,138,128);
}

.oddsWrap .obState.is-done{
  color: var(--odds-done) !important;
  background: rgba(46,125,50,.12);
  border-color: rgba(46,125,50,.55);
}
.oddsWrap .obState.is-pending{
  color: var(--odds-pending) !important;
  background: rgba(198,40,40,.12);
  border-color: rgba(198,40,40,.55);
}

/* スマホ */
@media (max-width: 860px){
  .card > .oddsWrap{ padding: 12px 14px 14px; }

  /* 右見切れは横スクロールで逃がす（Safariでも安定） */
  .oddsWrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .oddsWrap .oddsTbl{ min-width: var(--ob-minw-sp); }

  .oddsWrap .oddsTbl{ font-size: var(--ob-font-sp); }
  .oddsWrap .oddsTbl th,
  .oddsWrap .oddsTbl td{ padding: var(--ob-pad-y-sp) var(--ob-pad-x-sp); }
}


/* =====================================================
   単オッズ表：サイト既存の「スマホ用テーブル変形」CSSを無効化して
   oddsTbl だけ正規の table 表示に戻す（PC/スマホ共通）
   ===================================================== */

.oddsWrap .oddsTbl{
  display: table !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.oddsWrap .oddsTbl thead{
  display: table-header-group !important; /* 既存の thead{display:none;} を打ち消す */
}
.oddsWrap .oddsTbl tbody{ display: table-row-group !important; }
.oddsWrap .oddsTbl tr{ display: table-row !important; width:auto !important; }
.oddsWrap .oddsTbl th,
.oddsWrap .oddsTbl td{
  display: table-cell !important;
  width: auto !important;
}

/* 既存の td ブロック化ルールに巻き込まれないように */
.oddsWrap .oddsTbl th,
.oddsWrap .oddsTbl td{
  white-space: nowrap;
}

/* 列幅（曜日は狭く、無/有は同じ） */
.oddsWrap .oddsTbl .colDay{ width: var(--ob-day-w); }
.oddsWrap .oddsTbl .colNo{ width: auto; }
.oddsWrap .oddsTbl .colYes{ width: auto; }


/* =====================================================
   単オッズボード：見た目を「元のデザイン寄り」に調整（安定版）
   - レイアウト安定（display:table 強制）はそのまま
   - 見た目だけ整える
   ===================================================== */

.oddsWrap{ margin-top: 10px; }

.oddsWrap .oddsBoard{
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.75);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

html[style*="--p: 0"] .oddsWrap .oddsBoard,
:root[style*="--p: 0"] .oddsWrap .oddsBoard{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.22);
}

.oddsWrap .oddsTbl th,
.oddsWrap .oddsTbl td{
  border-color: rgba(0,0,0,.18) !important;
}

html[style*="--p: 0"] .oddsWrap .oddsTbl th,
html[style*="--p: 0"] .oddsWrap .oddsTbl td,
:root[style*="--p: 0"] .oddsWrap .oddsTbl th,
:root[style*="--p: 0"] .oddsWrap .oddsTbl td{
  border-color: rgba(255,255,255,.18) !important;
}

.oddsWrap .oddsTbl thead th{
  background: rgba(0,0,0,.04);
}
html[style*="--p: 0"] .oddsWrap .oddsTbl thead th,
:root[style*="--p: 0"] .oddsWrap .oddsTbl thead th{
  background: rgba(255,255,255,.06);
}

.oddsWrap .tdDay,
.oddsWrap .thDay{
  font-weight: 800;
  letter-spacing: .02em;
}

.oddsWrap .obState{
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
html[style*="--p: 0"] .oddsWrap .obState,
:root[style*="--p: 0"] .oddsWrap .obState{
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}

.oddsWrap .obNote{
  margin: 6px 2px 0;
  font-size: 12px;
}

@media (max-width: 860px){
  .oddsWrap .oddsBoard{ border-radius: 12px; }
}


/* =====================================================
   oddsTbl をサイト既存の「テーブルをカード化」ルールから完全隔離
   （土曜/日曜の横に「単オッズ 無」等が挿入される症状の対策）
   ===================================================== */
.oddsWrap .oddsTbl th::before,
.oddsWrap .oddsTbl td::before,
.oddsWrap .oddsTbl th::after,
.oddsWrap .oddsTbl td::after{
  content: none !important;
  display: none !important;
}

.oddsWrap .oddsTbl,
.oddsWrap .oddsTbl thead,
.oddsWrap .oddsTbl tbody,
.oddsWrap .oddsTbl tr{
  display: table-row-group;
}
.oddsWrap .oddsTbl{ display: table !important; }
.oddsWrap .oddsTbl thead{ display: table-header-group !important; }
.oddsWrap .oddsTbl tbody{ display: table-row-group !important; }
.oddsWrap .oddsTbl tr{ display: table-row !important; }
.oddsWrap .oddsTbl th,
.oddsWrap .oddsTbl td{
  display: table-cell !important;
  float: none !important;
  width: auto !important;
  position: static !important;
}

/* 列幅：土曜/日曜が長くなったので少し広げる */
:root{ --ob-day-w: 56px; }
@media (max-width: 860px){
  :root{ --ob-day-w: 56px; }
}