/* =========================
   基本リセット / 全体
========================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  max-width:100%;
  overflow-x:hidden; /* ← 横はみ出し完全防止 */
}

body{
  margin:12px;
  padding:0;
  -webkit-text-size-adjust:100%;
}

@media (max-width:640px){
  body{
    margin:0;
  }
}

/* =========================
   HUD / 操作UI
========================= */
.hud{
  margin:8px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hud-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.hud-row .eval{ margin-right:8px; }

button{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
}

#sprintBtn{
  background:#3f51b5;
  color:#fff;
  border:none;
}
#sprintBtn:hover{ background:#303f9f; }

#resetBtn{
  background:#8d6e63;
  color:#fff;
  border:none;
}
#resetBtn:hover{ background:#6d4c41; }

/* =========================
   盤レイアウト（核）
========================= */

/* 盤＋右ガターをまとめる棚 */
.board-wrap{
  position: relative;
  display: inline-block;   /* これが超重要：中身の幅に縮む */
  width: auto;             /* 100%禁止 */
}



.board-shelf{
  position: relative;   /* 動画オーバーレイの基準は維持 */
  display: flex;
  flex-direction: column;
  gap: 10px;            /* ← ここが盤とバーの行間 */
}
.evalbar-container{
  width: 100%;
}




/* ---- 盤本体 ---- */
.board{
  position:relative;
  display:grid;

  width:100%;
  max-width:none;

  aspect-ratio:1 / 1;   /* PCでは正方形 */
  height:auto;

  grid-template-columns:repeat(19, 1fr);
  grid-template-rows:repeat(19, 1fr);

  background: url("./board_19x19_3.png") no-repeat center/100% 100%;
  margin:0;
}

/* PCでは巨大化しすぎない上限 */
@media (min-width:641px){
  .board{
    max-width:720px;
  }
}

/* =========================
   セル / 石
========================= */
.cell{
  width:100%;
  height:100%;
  position:relative;
}

.board,
.cell,
.hud button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}

.stone{
  position:absolute;
  inset:0;
  border-radius:80%;
  background-position:center;
  background-size:135%;
  background-repeat:no-repeat;
  box-shadow:none;
  pointer-events:none;
}

.black{ background-image:url("./black.png"); }
.white{ background-image:url("./white.png"); }

.lastmove::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid red;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.stone.ghost{
  pointer-events:none;
  width:35px;
  height:35px;
  opacity:.55;
  transform:translate(-50%,-50%);
  display:none;
  z-index:10;
  inset:auto;
}

.eval{
  margin-top:8px;
  font-size:14px;
  color:#222;
}

.board.ended{
  opacity:.92;
  filter:grayscale(.1);
}

/* =========================
   右端ヒットボックス
========================= */
.hitbox-right{
  position:absolute;
  top:0;
  right:0;
  width:32px;
  height:100%;
  transform: translateX(100%);
}

/* =========================
   タイトル（楷書）
========================= */
#title{
  font-family:
    "YuKyokasho","Yu Kyokasho","YuKyokasho Pr6N","Yu Kyokasho Pr6N",
    "HG教科書体","HG正楷書体-PRO","HGP正楷書体-PRO",
    "STKaiti","KaiTi","DFKai-SB",
    "Yu Mincho","Hiragino Mincho ProN","MS PMincho",
    serif;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.15;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1,"kern" 1;
  white-space:nowrap;
  margin:0 0 8px;
}

/* =========================
   盤下エリア（abt + 解析）
========================= */
.under-board{
  margin-top:12px;
  display:grid;

  /* ★ 右カラムが縮められるようにする（最重要） */
  grid-template-columns: 120px minmax(0, 1fr);

  gap:12px;
  align-items:start;
}

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

.under-right{
  min-width:0; /* ★ Gridはみ出し防止の核心 */

  font-size:13px;
  background:#fafafa;
  border:1px solid #eee;
  border-radius:8px;
  padding:8px 10px;
}

.under-right,
.under-right li{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.under-right h3{
  margin:0 0 6px;
  font-size:14px;
}

.ana-title{
  font-weight:600;
  margin:6px 0 2px;
}

.under-right ol{
  margin:0 0 6px 1.2em;
  padding:0;
}

/* =========================
   スマホ調整
========================= */
@media (max-width:640px){
  /* スマホでも横並び維持＋はみ出し防止 */
  .under-board{
    grid-template-columns: 100px minmax(0, 1fr);
    gap:8px;
  }

  /* 横幅優先（スマホでは正方形を緩める） */
  .board{
    aspect-ratio:auto;
  }
}


/* ===== 緊急修正：スマホで盤が消える対策 ===== */
@media (max-width:640px){
  .board{
    aspect-ratio: 1 / 1; /* まず表示を戻す */
    height: auto;
  }
}

.board-shelf{
  position:relative; /* すでにあるけど念のため */
}

.coords-overlay{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.coords-overlay {
  z-index: 9999;
}


.coords-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }



.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid #bbb;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.icon-btn:hover{ filter:brightness(0.97); }
.icon-btn:active{ transform:translateY(1px); }
.icon-btn svg{ display:block; }


/* 盤面の重ね動画用 */
.board-shelf {
  position: relative; /* ← 絶対配置の基準 */
}

.board-overlay-video{
  position: absolute;

  /* 初期は非表示 */
  display: none;

  /* 盤面クリックを邪魔しない */
  pointer-events: none;

  /* 動画を交点中心に合わせやすくする */
  transform: translate(-50%, -50%) scale(1);

  /* 盤面より上に表示 */
  z-index: 20;

  /* ここはJSで上書きするので最低限 */
  width: 200px;
  height: auto;
}

.board-overlay-video.animate {
  transition: top 0.6s ease-out;
}


.under-right { display: none; }


.evalbar-wrap{
  margin: 8px 0 10px;
}
.evalbar{
  position: relative;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.35);
  background: #ddd;
}
.evalbar-black{ height:100%; width:50%; background:#111; float:left; }
.evalbar-white{ height:100%; width:50%; background:#f6f6f6; float:left; }
.evalbar-label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
  pointer-events:none;
}


#evalFirst{ display:none; }




.abt-video {
  margin-top: 16px;
}



/* 枠としての形勢バーコンテナ */
//.evalbar-container {
//  margin: 12px 0;        /* ← ここが「盤との行間」 */
//  width: 100%;
//}

/* 既存のバー本体 */
.evalbar {
  position: relative;    /* absolute ではない */
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.35);
  background: #ddd;
}

/* overlay用に使っていた設定はすべて削除 */
.evalbar-overlay {
  display: none;
}


.evalbar-overlay{ display: none; } /* 使わないので固定で殺す */


/* ===== 盤＋オーバーレイの器 ===== */
.board-shelf{
  display: flex;
  flex-direction: column;
  gap: 10px;              /* ← 盤とバーの行間（ここを微調整） */
}



/* 動画・座標は盤の上に重ねる（board-wrap基準） */
.board-overlay-video,
.coords-overlay{
  position: absolute;
  inset: 0;
}

/* バーは通常レイアウト（absolute禁止） */
.evalbar-container{
  width: 100%;
}

/* これが残ってるとまた“オーバーレイ化”するので殺す */
.evalbar-overlay{
  display: none !important;
  position: static !important;
}


.board-shelf{
  display:flex;
  flex-direction:column;
  gap: 10px;          /* ← 盤とバーの行間はここで調整 */
}

.board-wrap{
  position:relative;  /* ← 動画/座標overlayの基準はここだけ */
  width:100%;
}

.board-overlay-video,
.coords-overlay{
  position:absolute;
  inset:0;
}

/* バーは通常レイアウト */
.evalbar-container{
  position:static;
  width:100%;
  margin-top: 6px;    /* ← 盤との追加の余白が欲しければここでもOK */
}

.board-shelf{
  width: min(720px, calc(100vw - 24px));
  align-items: flex-start;
}


@media (max-width: 768px){
  .board-shelf{
    width: 100vw;      /* 画面いっぱい */
    max-width: none;   /* 720制限も解除 */
  }
}


#evalBarLabel{
  color: #d00;          /* 赤 */
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.7); /* 黒塗りつぶし上でも読める */
}

#evalMargin{
  color:#d00;
  font-weight:700;
}

#evalBarLabel{
  color:#d00;
  font-weight:700;
  background: rgba(255,255,255,.75);
  padding: 0 8px;
  border-radius: 999px;
}


/* 評価バー：33%/66% 境界（6px・青・高コントラスト） */
.evalbar{
  position: relative;
  overflow: hidden;
}

.evalbar::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 50;

  background:
    linear-gradient(to right,
      transparent 0%,
      transparent calc(33% - 3px),
      #fff        calc(33% - 3px),
      #0050cc     calc(33% - 2px),
      #0050cc     calc(33% + 2px),
      #fff        calc(33% + 3px),
      transparent calc(33% + 3px),

      transparent calc(66% - 3px),
      #fff        calc(66% - 3px),
      #0050cc     calc(66% - 2px),
      #0050cc     calc(66% + 2px),
      #fff        calc(66% + 3px),
      transparent calc(66% + 3px),
      transparent 100%
    );
}

.evalbar-label{
  position: relative;
  z-index: 100;
}