/* ===============================
   ベース
=============================== */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

body{
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  text-align: center;
  background-color: #f5f5f5;
  font-size: 14px;
}
h1, h2, h3 { margin: 0 0 10px; }

/* ===============================
   共通ヘッダー＆ナビ（memo/keibaraceと完全一致）
=============================== */
:root{
  --header-h: 54px;    /* PCヘッダー高さ */
  --nav-font: 15px;    /* ナビ文字サイズ */
  --nav-pad-y: 4px;    /* ボタン上下余白 */
  --nav-pad-x: 16px;   /* ボタン左右余白 */
}

/* ヘッダー */
header{
  height: var(--header-h);
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 0;
  box-sizing: border-box;
}
.header-logo{
  height: var(--header-h);
  width: auto;
  display: block;               /* ベースライン余白を消す */
  transition: filter .3s ease;
}
.header-logo:hover{ filter: brightness(85%); }
.header-left a{
  display: flex; align-items: center;
  height: var(--header-h); line-height: 0;
}

.header-right{
  display: flex; align-items: center; justify-content: flex-end;
  flex: 1;
}
.login-link{
  font-size: 14px; color: #006400; text-decoration: none; font-weight: bold;
}
.login-link:hover{ text-decoration: underline; }

/* ナビ（モバイル：横スクロール／PC：中央寄せ＋等間隔） */
.header-nav{
  display: flex;
  align-items: center;
  gap: 8px;                      /* モバイル最小間隔 */
  background-color: #01b04a;
  padding: 2px 12px;             /* 薄めの高さ */
  overflow-x: auto;              /* 横スクロール */
  white-space: nowrap;           /* 折り返し禁止 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 0;
}
.header-nav::-webkit-scrollbar{ display: none; }

.nav-button{
  flex: 0 0 auto;
  color: #fff; text-decoration: none; font-weight: 700;
  font-size: var(--nav-font);
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border-radius: 6px;
  transition: background-color .3s;
}
.nav-button:hover{ background-color:#008000; text-decoration: none; }

/* ===============================
   メインカード／操作UI
=============================== */
main{
  position: relative;
  width: 95%;
  margin: 20px auto;
  padding: 30px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.tool-container{
  width: 100%;
  max-width: 1000px;
  margin: 10px auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.controls{ text-align: center; margin-bottom: 10px; }
.control-group{ display: inline-block; margin: 0 10px; }

/* ===============================
   トラック表示領域
=============================== */
.track-area-wrapper{ position: relative; }

#zoom-wrapper{
  width: 100%;
  aspect-ratio: 1000 / 600;
  height: auto;
  overflow: auto;
  position: relative;
  border: 2px solid #333;
  touch-action: none;
  box-sizing: border-box;
}

#race-container{
  width: 100%; height: 100%;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===============================
   パン／ズームボタン
=============================== */
.pan-buttons, .zoom-buttons{
  position: absolute; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
}
.pan-buttons{ bottom: 10px; left: 10px; }
.zoom-buttons{ bottom: 10px; right: 10px; }

.pan-buttons button, .zoom-buttons button{
  width: 35px; height: 35px; border-radius: 50%;
  font-size: 18px; font-weight: bold; cursor: pointer;
  border: 1px solid #999; background-color: rgba(255,255,255,0.8);
  color: #333; padding: 0; margin-top: 5px;
  display: flex; justify-content: center; align-items: center;
}
.pan-horizontal{ display: flex; margin: -5px 0; }
.pan-horizontal button:first-child{ margin-right: 10px; }

/* ===============================
   凡例
=============================== */
.legend-container{
  margin-top: 8px; display: flex; justify-content: flex-end;
}
.legend-container img{
  max-width: 300px; height: auto;
}

/* ===============================
   馬・位置・装飾
=============================== */
.horse-circle{
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background-color: #fff; display: flex; justify-content:center; align-items:center;
  font-size: 5px; font-weight: bold; cursor: grab; user-select: none;
  transition: transform .1s ease-in-out; transform-origin: center center;
}

.horse{
  position: absolute; width: 60px; height: 60px;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  animation: shake .8s infinite; animation-timing-function: ease-in-out;
  object-fit: contain;
}
.horse-image{
  position: absolute; width:100%; height:100%;
  background-repeat:no-repeat; background-size:contain; background-position:center;
}
.horse-option{ display:flex; flex-direction:column; align-items:center; margin:-5px; }
.horse-option img{ width:50px; height:50px; object-fit:contain; }

@keyframes shake{
  0%{ transform: translateY(0); }
  25%{ transform: translateY(-2px); }
  50%{ transform: translateY(0); }
  75%{ transform: translateY(2px); }
  100%{ transform: translateY(0); }
}

.position{
  position:absolute; font-weight:bold; font-size:12px; margin-left:10px; top:0;
  padding:5px 10px; border-radius:5px; color:#fff; text-shadow:1px 1px 3px rgba(0,0,0,.3);
  white-space:nowrap; background-color: rgba(0,0,0,.5);
}
.position-1{ background-color: gold; }
.position-2{ background-color: silver; }
.position-3{ background-color: #cd7f32; }
.position-4{ background-color: green; }
.position-5{ background-color: blue; }

/* ===============================
   トラック・フェンス・GOAL
=============================== */
#track-container{
  position: relative; width: 90%;
  margin: 20px auto 60px auto;
}
#track{
  position: relative; width: 100%; height: 300px;
  background-size: cover; background-position: center; top: 0; 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'); }

/* フェンス */
.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表示 */
.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;
  background: linear-gradient(90deg, red, #FF4F02);
  -webkit-background-clip: text; color: transparent;
  animation: simpleGlow 1.5s infinite alternate;
  text-shadow: 2px 2px 4px rgba(255,128,0,.8);
}
@keyframes simpleGlow{
  0%{ text-shadow: 2px 2px 4px rgba(255,128,0,.8); }
  100%{ text-shadow: 4px 4px 8px rgba(255,128,0,1); }
}
.goal-line{
  position:absolute; top:0; width:10px; height:100%;
  background-color: rgba(255,0,0,1); z-index:0;
}

/* 距離マーカー */
.distance-marker{
  position:absolute; bottom:50%; transform: translateY(50%) translateX(-50%);
  font-size:12px; font-weight:bold; color:#000;
  background-color: rgba(255,255,255,.8); padding:2px 5px; border-radius:3px; z-index:0;
}

/* ===============================
   設定UI
=============================== */
#settings{ margin-bottom:20px; text-align:left; display:inline-block; }
#race-buttons{ margin-top:-10px; }
.spacing-selection-buttons{ margin-bottom:-5px; }
.spacing-horse-selection{ margin-bottom:30px; }
.spacing-track-type, .spacing-track-distance{ margin-bottom:-5px; }
.wide-input{ width:60px !important; }
#horseSize, #trackHeight{ width:40px; text-align:right; font-size:12px; }

/* ===============================
   レスポンシブ
=============================== */
@media (max-width: 768px){
  main{
    width: 100%; margin: 0; padding: 15px;
    border-radius: 0; box-sizing: border-box;
  }
  header{ height: 40px; padding: 0 10px 0 0; }
  .header-right .login-link{ font-size: 12px; }
  .header-logo{ height: 40px; }
  .header-nav{ 
    padding: 0; 
    justify-content: center;
    gap: 15px;
  }
  .nav-button{ padding: 6px 10px; font-size: 13px; }
  
  .controls{ display:flex; flex-direction:column; align-items:center; }
  .control-group{ margin: 5px 0; }

  #zoom-wrapper{ max-width: 100%; height: auto; }

  .legend-container img{ max-width: 200px; height: auto; }
}

/* iOSのアドレスバー出入り対策 */
html, body{ height: 100%; }
@supports (height: 100dvh){
  body{ min-height: 100dvh; }
}