/* ===============================
  グローバル変数
=============================== */
:root{
  --header-h: 54px;      /* ヘッダー高さ（PC） */
  --nav-font: 15px;      /* ナビ文字サイズ */
  --nav-pad-y: 4px;      /* ナビ上下の余白 */
  --nav-pad-x: 16px;     /* ナビ左右の余白 */

  /* レース条件の入力サイズ（統一管理） */
  --rc-control-width: 100px;
  --rc-control-height: 24px;
}

/* ===============================
  ベース
=============================== */
body{
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  text-align: center;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
h1{ 
  text-align:center; 
  font-size: 24px;
}
h2{
  font-size: 20px;
  color:#1e1e1e;
  margin:0 0 10px;
  padding:10px 0;
}
h3{
  font-size:14px;
  color:#1e1e1e;
  margin:0 0 10px;
}

/* ===============================
  ヘッダー／ナビ
=============================== */
header{
  height:var(--header-h);
  padding:0 20px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  width:100%;
  box-sizing:border-box;
  position:relative;
  z-index:1000;
}
.header-left a{
  display:flex;
  align-items:center;
  height:var(--header-h);
  line-height:0;
}
.header-logo{
  height:var(--header-h);
  width:auto;
  display:block;
  transition:filter .3s;
}
.header-logo:hover{ filter:brightness(85%); }

.header-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#01b04a;
  height:30px;
  padding:0 10px;
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  box-sizing:border-box;
}
.header-nav::-webkit-scrollbar{ display:none; }

.nav-button{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:13px;
  padding:4px 10px;
  border-radius:4px;
  transition:background-color .3s;
  flex-shrink:0;
  margin-right:14px;
  line-height:1;
  box-sizing:border-box;
}
.nav-button:last-child{ 
  margin-right:0; 
}
.nav-button:hover{
  background:#008000;
  text-decoration:none;
}

@media (max-width:768px){
  header{ height:40px; padding:0 10px 0 0; }
  .header-logo{ height:40px; }
  .header-nav{ justify-content:flex-start; height:30px; padding-left:10px; }
  .nav-button{ font-size:13px; padding:4px 8px; margin-right:10px; }
}

/* =============================
   モバイル版
   ============================= */
@media (max-width: 768px) {
  .header-nav {
    justify-content: flex-start;   /* 左詰めにしてマイメモが左端に表示 */
    padding-left: 10px;            /* 左端の余白 */
  }

  .nav-button {
    font-size: 13px;
    padding: 4px 8px;
    margin-right: 10px;            /* モバイルではやや狭く */
  }
}

/* =============================
   PC版
   ============================= */
@media (min-width: 769px) {
  .header-nav {
    justify-content: center;       /* 中央寄せ */
    overflow-x: visible;
  }

  .nav-button {
    margin-right: 16px;            /* PCでは少し広め */
  }
}

/* ===============================
  main 関連
=============================== */

/* ページ横幅 90% ラッパ */
.page-wrap{ 
  width:90%; margin:0 auto; }

/* レース条件（左）＋ 広告（右） */
.rc-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,30%);
  column-gap:clamp(16px,5vw,10%);
  align-items:start;
  margin:12px 0; /* タイトル下の間隔 */
}
@media (max-width:1024px){
  .rc-layout{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:12px;
  }
}

/* 左・右コンテナ */
.rc-left{ width:100%; box-sizing:border-box; }
.rc-ads{
  position:static;
  width:100%;
  max-width:none;
  min-height:140px;           /* 必要に応じて調整可 */
}
.rc-ads ins.adsbygoogle{ width:100% !important; display:block; }

/* レース条件パネル */
#race-conditions{
  width:100%;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:12px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  text-align:left;
}

/* ▼ レース条件：柔軟グリッド（auto-fit で 3→2→1 列に可変） */
#race-conditions .rc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px 16px;
  align-items:start;
}

/* 入力欄と単位を横一列で表示する小ラッパ */
#race-conditions .rc-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* 入力と単位の間隔 */
  white-space: nowrap; /* 単位の改行を防止 */
}

/* 単位表示のスタイル（高さ揃え） */
#race-conditions .unit {
  font-size: 12px;
  line-height: var(--rc-control-height);
}

/* ▼ rc-grid 内ラベルだけを縦並びに（広域の label 指定を上書き） */
#race-conditions .rc-grid > label{
  display:flex;                 /* ← inline-flex を上書き */
  flex-direction:column;
  gap:2px;
  align-items:flex-start;       /* チェックボックス行のズレ予防 */
  line-height:1.3;              /* 固定行高は使わない */
  margin:0;
}

@media (max-width:1100px){
  #race-conditions .rc-grid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width:800px){
  #race-conditions .rc-grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width:600px){
  #race-conditions .rc-grid{ grid-template-columns:1fr; }
}

/* ▼ チェックボックス行の上揃え（ずれ防止） */
#race-conditions .field-showPositions,
#race-conditions .field-enableAnimation {
  align-items: flex-start;
  line-height: 1.2;
}

#race-conditions select,
#race-conditions input[type="number"]{
  width:clamp(96px, 100%, var(--rc-control-width));
  height:var(--rc-control-height);
  line-height:var(--rc-control-height);
  font-size:12px;
  box-sizing:border-box;
}

#race-conditions .wide-input{ width:var(--rc-control-width); }
#race-conditions input[type="checkbox"]{
  width:16px; height:16px; vertical-align:middle;
}
#race-conditions label > input + *{ margin-left:4px; }

/* トラック周辺 */
#track-area{ margin:0; padding-top:0; }
.page-wrap #track-container{
  position:relative;
  width:100%;
  margin:16px 0 32px;
}
#track{
  position:relative;
  width:100%;
  height:300px;                /* 初期表示 300px */
  background-size:cover;
  background-position:center;
  background-color:#ccc;
}

/* 背景タイプ */
.grass1-track{ background-image:url('grass1.png'); }
.grass2-track{ background-image:url('grass2.png'); }
.dirt1-track{  background-image:url('dirt1.png'); }
.dirt2-track{  background-image:url('dirt2.png'); }

/* ===============================
   ダート時：残り距離（.distance-marker）を灰色・半透明に
   ※ track には dirt1-track / dirt2-track クラスが付く前提
=============================== */
#track.dirt1-track .distance-marker,
#track.dirt2-track .distance-marker {
  color: rgba(120, 120, 120, 0.5);        /* 文字：灰色半透明 */
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* 影：控えめに（必要なら無しでもOK） */
}

/* フェンス／ゴール */
.fence{
  width:100%; height:10px;
  background-image:url('fence.png');
  background-size:cover; background-position:center;
  margin:0 auto;
}
#top-fence{ margin-bottom:0; }
#bottom-fence{ margin-top:0; }

/* --- 修正後：ゴールライン（控えめな白線） --- */
.goal-line {
  position: absolute;
  top: 0;
  
  /* 幅を少し細くしてスタイリッシュに */
  width: 6px;                  /* 元は10px */
  height: 100%;
  
  /* 色：真っ赤(rgba(255,0,0,1)) → 半透明の白 */
  background-color: rgba(243, 32, 32, 0.6);
  
  /* 影：明るい砂の場合でも境界が見えるようにうっすら影をつける */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  
  z-index: 0;
}
.vertical-text{
  position:absolute; font-size:12px; font-weight:bold;
  writing-mode:vertical-rl; text-orientation:upright;
  top:50%; transform:translateY(-50%);
}

#goal-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  /* フォント：少しサイズを抑えて標準的な太字に */
  font-size: 36px;
  font-weight: bold;
  font-style: italic;       /* スピード感は残す */
  font-family: sans-serif;  /* 癖のない標準フォント */
  
  /* 色：半透明の白（透かしのような表現） */
  color: rgba(255, 255, 255, 0.5); 
  
  /* 影：縁取りではなく、ふんわりとした黒い影で浮き上がらせる */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);

  z-index: 20;
  letter-spacing: 3px;      /* 文字間隔を広げてゆったりと */
  pointer-events: none;     /* クリックの邪魔にならないように */
}


.distance-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  
  /* 枠（背景色・余白・角丸）を削除 */
  background-color: transparent;
  padding: 0;
  border-radius: 0;

  /* フォント：大きく太く、地面に馴染ませる */
  font-size: 20px;           /* インパクト大 */
  font-weight: 900;          /* 極太 */
  font-style: italic;        /* スピード感のある斜体 */
  font-family: "Arial Black", "Impact", sans-serif;
  
  /* 色：半透明の白 */
  color: rgba(255, 255, 255, 0.4); 
  
  /* 影：白いダート（砂）でも文字が消えないように、ごく薄い影を入れる */
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
  z-index: 0;                /* 馬より下に表示 */
  pointer-events: none;      /* クリック無効化 */
  white-space: nowrap;       /* 改行させない */
}

/* 馬の見た目 */
.horse-container{ position:absolute; }
.horse-image{
  position:absolute; width:100%; height:100%;
  background-repeat:no-repeat; background-size:contain; background-position:center;
}
.flip-horizontal{ transform:scaleX(-1) !important; }
.horse-number {
  position: absolute; 
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 12px; font-weight: bold; color: #fff;
  border-radius: 2px; padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  z-index: 100; 
  text-shadow: 0 0 1px rgb(35, 35, 35), 0 0 1px rgb(35, 35, 35);
}

/* ゼッケン色／枠色 */
.horse-number-style1{ background:#4B0082; }
.horse-number-style2.horse-number-colored-white{  
    background: #fff; 
    color: #000; 
    text-shadow: none;      /* 黒文字なので影を消す */
    border: 1px solid #ccc; /* 白背景が埋もれないよう薄い枠線を追加 */
}
.horse-number-style2.horse-number-colored-black{  background:#000; }
.horse-number-style2.horse-number-colored-red{    background:red; }
.horse-number-style2.horse-number-colored-blue{   background:blue; }
.horse-number-style2.horse-number-colored-yellow{ background:#FFCC00; }
.horse-number-style2.horse-number-colored-green{  background:green; }
.horse-number-style2.horse-number-colored-orange{ background:#FF9900; }
.horse-number-style2.horse-number-colored-pink{   background:#FF69A3; }
.horse-number-style2.horse-number-colored-indigo{ background:#4B0082; }


/* 操作ボタン */
.buttons{ margin-bottom:20px; }
#race-buttons{ margin-top:-10px; } /* 現状維持（必要なら0に） */

/* ===============================
  馬の選択（左）
=============================== */
#horse-selection .horse-options-container{
  display:grid;
  grid-template-columns:repeat(9, minmax(0,1fr)); /* PCでは9列固定=18頭2行 */
  gap:4px 6px;
  align-items:start;
  justify-items:center;
  grid-auto-flow:row dense;
}/* --- 修正後：着順表示（水泳ゴール風オーバーレイ） --- */

/* --- 修正後：着順表示（スリムな帯スタイル・位置調整済み） --- */
.position {
  position: absolute;
  width: 140px;       /* 帯の長さ */
  
  display: flex;
  align-items: center;
  
  /* パディングで端の余白を確保 */
  padding: 0 10px;    
  
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  font-style: italic;
  font-family: "Arial Black", "Impact", sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  
  /* 重なり順：馬番号(z=100)より後ろ */
  z-index: 50; 
  
  pointer-events: none;
  border-radius: 4px;
  
  /* アニメーション */
  animation: fadeInPos 0.3s ease-out forwards;

  /* 基本（4位以降）：黒ベース */
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

@keyframes fadeInPos {
  from { opacity: 0; transform: scaleX(0); transform-origin: right; }
  to { opacity: 1; transform: scaleX(1); transform-origin: right; }
}

/* ▼ 左回り（ゴール右）：テキストを左寄せ（ゴールから遠ざける） */
.position.finish-right {
  /* 【修正】flex-end(右) から flex-start(左) に変更 */
  justify-content: flex-start; 
  
  /* グラデーション：右(濃) -> 左(透) */
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.position.finish-right.position-1 { background: linear-gradient(to left, rgba(255, 215, 0, 0.9) 0%, rgba(255, 215, 0, 0) 100%); }
.position.finish-right.position-2 { background: linear-gradient(to left, rgba(192, 192, 192, 0.9) 0%, rgba(192, 192, 192, 0) 100%); }
.position.finish-right.position-3 { background: linear-gradient(to left, rgba(205, 127, 50, 0.9) 0%, rgba(205, 127, 50, 0) 100%); }

/* ▼ 右回り（ゴール左）：テキストを右寄せ（ゴールから遠ざける） */
.position.finish-left {
  /* 【修正】flex-start(左) から flex-end(右) に変更 */
  justify-content: flex-end;
  
  /* グラデーション：左(濃) -> 右(透) */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  
  animation-name: fadeInPosLeft;
}
@keyframes fadeInPosLeft {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
.position.finish-left.position-1 { background: linear-gradient(to right, rgba(255, 215, 0, 0.9) 0%, rgba(255, 215, 0, 0) 100%); }
.position.finish-left.position-2 { background: linear-gradient(to right, rgba(192, 192, 192, 0.9) 0%, rgba(192, 192, 192, 0) 100%); }
.position.finish-left.position-3 { background: linear-gradient(to right, rgba(205, 127, 50, 0.9) 0%, rgba(205, 127, 50, 0) 100%); }

/* ▼ 右回り（ゴール左）：テキストを左寄せ（ゴール寄り）にする */
.position.finish-left {
  justify-content: flex-start; /* テキストを左（ゴール側）に寄せる */
  /* グラデーション：左(濃) -> 右(透) */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  animation-name: fadeInPosLeft;
}
@keyframes fadeInPosLeft {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
.position.finish-left.position-1 { background: linear-gradient(to right, rgba(255, 215, 0, 0.9) 0%, rgba(255, 215, 0, 0) 100%); }
.position.finish-left.position-2 { background: linear-gradient(to right, rgba(192, 192, 192, 0.9) 0%, rgba(192, 192, 192, 0) 100%); }
.position.finish-left.position-3 { background: linear-gradient(to right, rgba(205, 127, 50, 0.9) 0%, rgba(205, 127, 50, 0) 100%); }

.horse-option{
  display:flex; flex-direction:column; align-items:center;
  margin:0; padding:4px 2px; border-radius:4px;
}
.horse-option img{
  width:36px; height:36px; object-fit:contain;
}
.buttons.spacing-selection-buttons{ margin-bottom:6px; }
.spacing-horse-selection{ margin-bottom:12px; }

.custom-horse-option{ flex-basis:100%; display:flex; flex-direction:column; align-items:center; margin:10px; }
#custom-horse-upload{ display:flex; flex-direction:column; align-items:center; }
.custom-horse-inputs{ display:flex; align-items:center; gap:8px; }
#customHorseImage, #addCustomHorseButton{ font-size:12px; }

@media (max-width:900px){
  #race-conditions .rc-row.rc-3{ grid-template-columns:repeat(2, minmax(220px,1fr)); }
  #horse-selection .horse-options-container{
    grid-template-columns:repeat(auto-fit, minmax(64px,1fr));
    gap:6px 8px;
  }
  .horse-option img{ width:34px; height:34px; }
}

/* ===============================
  各馬の設定（右）— 等間隔Gridの決定版
=============================== */
#controls{ width:100%; } /* 外枠は幅確保のみ */

#horse-controls{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:6px;                         /* 上下左右すべて等間隔 */
  justify-items:stretch;
  align-items:start;
}
#horse-controls > *{ margin:0; }

.horse-control{
  display:flex; flex-direction:column; gap:4px;
  padding:6px;
  border:1px solid #d9d9d9;
  border-radius:8px;
  background:#fafafa;
  text-align:center;
}
.horse-control h3{
  font-size:12px; margin:0 0 2px; line-height:1.1;
}
.horse-control label{
  display:flex; flex-direction:column; align-items:center;
  gap:2px; margin:0; font-size:12px; line-height:1.1; width:100%;
}
.horse-control input[type="number"]{
  width:56px; height:22px;
  padding:2px 4px; font-size:12px; line-height:1.1;
  text-align:center; box-sizing:border-box;
}

@media (max-width:768px){
  #horse-controls{
    grid-template-columns:repeat(2, minmax(120px,1fr));
    gap:6px;
  }
}

/* ===============================
  2カラム（馬の選択／各馬の設定）外枠
=============================== */
.page-wrap .builder-row{
  width:100%;
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
.page-wrap .builder-col{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:12px;
  text-align:left;
}
@media (min-width:992px){
  .page-wrap .builder-row{ grid-template-columns:1fr 1fr; }
}

/* ===============================
  howto（モーダル）
=============================== */
.page-wrap .howto{
  width:100%; margin:12px 0 24px;
  background:#fff; border:1px solid #e5e5e5; border-radius:10px;
  padding:12px 14px; box-shadow:0 1px 3px rgba(0,0,0,.06); text-align:left;
}
#usage-instructions{
  text-align:left; background:#f9f9f9; border:1px solid #ddd; border-radius:10px;
  padding:10px; margin:10px auto; max-width:750px; box-shadow:0 0 15px rgba(0,0,0,.1);
  font-family:'MS Pゴシック', sans-serif;
  list-style: none;
}
#usage-instructions ol{ padding-left:0; list-style:none; counter-reset:li; }
#usage-instructions li{
  margin-bottom:10px; line-height:1.6; font-size:12px; color:#555;
  background:#e0f7fa; border-left:5px solid #00796b; padding:10px 10px 10px 80px;
  border-radius:5px; position:relative; counter-increment:li;
  box-shadow:2px 2px 5px rgba(0,0,0,.1); font-weight:bold;
}
#usage-instructions li::before{
  content:counter(li) ". ";
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-weight:bold; color:#00796b; font-size:16px; background:#e0f7fa;
  padding:0 10px; border-radius:3px; text-align:center; width:30px;
}
#recording-instructions{
  list-style:none; padding:0; margin:0; text-align:center; margin-bottom:50px;
}
#recording-instructions li{ margin:10px 0; }
#recording-instructions li a{
  font-size:12px; text-decoration:none; color:blue; font-weight:bold;
}
#recording-instructions li a:hover{ text-decoration:underline; }

/* モーダル本体 */
.modal{ position:fixed; inset:0; display:none; z-index:10000; }
.modal.is-open{ display:flex; align-items:center; justify-content:center; }
.modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal__dialog{
  position:relative; width:min(720px,92vw); max-height:88vh;
  background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  overflow:hidden; display:flex; flex-direction:column;
}
.modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #eee;
}
.modal__body{ padding:12px 14px; overflow:auto; }
.modal__footer{
  padding:10px 14px; border-top:1px solid #eee; display:flex; justify-content:flex-end; gap:8px;
}
.modal__close, .modal__action, .howto-btn{
  appearance:none; border:1px solid #ddd; background:#fff; padding:6px 10px;
  border-radius:8px; cursor:pointer; font-size:14px;
}
.modal__close:hover, .modal__action:hover, .howto-btn:hover{ background:#f5f5f5; }
.howto-triggers{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
body.modal-open{ overflow:hidden; }
.modal__body #usage-instructions,
.modal__body #recording-instructions{ margin:0; }

/* ===============================
  フォーム共通
=============================== */
select{ font-size:12px; }
input[type="checkbox"]{ width:12px; height:12px; }

/* ===============================
   保存・読込エリア（racetenkai.css 同様）
=============================== */
.save-load-area {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.save-load-label {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.save-load-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
  max-width: 520px; /* customraceは横が広いので少しだけ広げてもOK */
}

/* 入力欄とセレクトボックス */
.save-load-input,
.save-load-select {
  padding: 6px;
  border: 1px solid #999;
  border-radius: 4px;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

/* ボタン共通 */
.save-load-btn {
  padding: 6px 12px;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.save-load-btn:hover {
  background-color: #e0e0e0;
}

/* 削除ボタン（赤色） */
.save-load-btn.btn-delete {
  background-color: #ff4444;
  color: white;
  border-color: #cc0000;
}

.save-load-btn.btn-delete:hover {
  background-color: #cc0000;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .save-load-area {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-sizing: border-box;
  }
  .save-load-row {
    max-width: 100%;
  }
}