:root{
  --bg:#f5f2e9;
  --board:#d9b37a;
  --line:#333;
  --text:#222;
  --muted:#666;
  --accent:#2f6feb;
  --bad:#c62828;
  --good:#2e7d32;
}

/* 基本レイアウト ---------------------------------------------------- */
*{box-sizing:border-box;}

body{
  margin:0;
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  padding:12px;
}

.wrap{
  width:min(920px,100%);
}

h1{margin:0 0 4px;font-size:20px;}
.sub{margin:0 0 12px;color:var(--muted);font-size:13px;}

/* HUD --------------------------------------------------------------- */
.hud{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin-bottom:8px;
  font-size:13px;
}
.hud label{display:flex;align-items:center;gap:4px;}

.hud select{
  padding:2px 6px;
  font-size:13px;
}

.btn{
  padding:4px 10px;
  border-radius:6px;
  border:1px solid #999;
  background:#fff;
  cursor:pointer;
  font-size:13px;
}
.btn:hover{background:#f0f0f0;}

.status{min-width:120px;font-weight:bold;}

.hud-info-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:15px;
}
.hud-info-line span{font-weight:600;}

/* 盤サイズボタン ---------------------------------------------------- */
.size-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
}
.size-group-label{
  font-size:13px;
  color:var(--muted);
}
.size-btn{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #999;
  background:#fff;
  cursor:pointer;
  font-size:12px;
}
.size-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* 盤面 -------------------------------------------------------------- */
.board-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.board{
  position:relative;
  width:min(82vw,82vh);
  max-width:520px;
  aspect-ratio:1/1;
  background:var(--board);
  border-radius:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  padding:10px;
}

.grid{
  position:relative;
  width:100%;
  height:100%;
  display:grid;                 /* 行列数は JS 側で repeat(N,1fr) で設定 */
  border:1px solid var(--line); /* 外枠。サイズに依存しないようにここで指定 */
}

.cell{
  position:relative;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}


/* 2タップ目待ちの仮置きマーカー ----------------------- */
.cell.pending-cell::after{
  content:"";
  position:absolute;
  inset:14%;               /* 石と同じくらいのサイズ */
  border-radius:50%;
  border:3px solid rgba(255,255,255,.9);  /* 白い輪 */
  box-shadow:0 0 8px rgba(0,0,0,.5);
  pointer-events:none;
  z-index:4;               /* 石よりちょい下/上は好みで調整 */
}




/* ここでは nth-child(19n) など、19路固定の指定は一切しない */

/* 石 --------------------------------------------------------------- */
.stone{
  position:absolute;
  inset:14%;              /* 少しだけ余白を取る */
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  pointer-events:none;
  opacity:0;
  transform:scale(.9);
  transition:opacity .15s ease, transform .15s ease;

  /* ★ 石をヒートマップより前面にする */
  z-index:3;
}


/* 石の色と表示制御 ------------------------------------------ */

.stone.show{
  opacity:1;
  transform:scale(1);
}

.stone.black{
  background:
    radial-gradient(circle at 30% 30%, #777, #222);
}

.stone.white{
  background:
    radial-gradient(circle at 30% 30%, #fff, #dcdcdc);
}








/* 最終手リング ----------------------------------------------------- */
.last-ring{
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:2px solid rgba(255,255,0,.9);
  box-shadow:0 0 4px rgba(0,0,0,.5);
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}
.last-ring.show{opacity:1;}

/* ヒートマップ ----------------------------------------------------- */
.heat{
  position:absolute;
  inset:10%;              /* 石とだいたい同じ大きさ */
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease, background-color .15s ease;

  /* ★ 石より一段だけ下 */
  z-index:2;
}

/* 旧 .hint をこのブロックで置き換え */

.hint{
  position:absolute;
  left:50%;
  top:50%;
  width:70%;
  height:70%;
  border-radius:999px;
  box-sizing:border-box;

  /* 中身は塗らない。輪郭だけ描く */
  background:transparent;
  border:3px solid transparent;

  /* 数字は完全に殺しておく（念のため） */
  color:transparent;
  font-size:0;
  text-indent:-9999px;

  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;

  /* 盤セルの中央にぴったり合わせる */
  transform:translate(-50%,-50%);

  transition:.15s ease;
  z-index:5;
}
.hint.show{opacity:1;}


/* ランク別の色（border色のみ） */

.hint.rank-0{
  border-color:rgba(76,175,80,0.95);       /* 1位：明るい緑 */
  box-shadow:0 0 10px rgba(76,175,80,0.85);
}
.hint.rank-1{
  border-color:rgba(56,142,60,0.9);
  box-shadow:0 0 8px rgba(56,142,60,0.7);
}
.hint.rank-2{
  border-color:rgba(38,166,154,0.9);      /* ちょっと青寄り */
  box-shadow:0 0 7px rgba(38,166,154,0.7);
}
.hint.rank-3{
  border-color:rgba(120,144,156,0.9);     /* 一番弱い */
  box-shadow:0 0 6px rgba(120,144,156,0.6);
}


/* ★ ここまで来たら、スマホ用の .hint 調整 @media は削除してOK */


/* ★ 候補手の数字を非表示（バッジだけ残す） */
.hint.show {
  font-size: 0 !important;
}
.hint.show::after {
  content: "" !important;
  font-size: 0 !important;
}



/* 旧ランク別背景色（今は使わない） */
/*
.hint.rank-0{background:var(--accent);}
.hint.rank-1{background:#555;}
.hint.rank-2{background:#777;}
.hint.rank-3{background:#999;}
*/


/* 右側パネル（今回は使わないので完全に非表示） ------------------- */
.side-panel{
  display:none;          /* ★ これを追加 */
  flex:1 1 220px;
  min-width:220px;
  max-width:320px;
  font-size:13px;
}
.side-panel h2{
  font-size:14px;
  margin:0 0 4px;
}


/* ログ・候補手は UI では非表示 ------------------------------------ */
.meta-row,
.candidates,
#log{
  display:none !important;
}

/* ★ 下の巨大スペースの原因を除去 */
#log:after {
  display: none;
}

/* レスポンシブ ----------------------------------------------------- */
@media (max-width:720px){
  .board-wrap{flex-direction:column;}
  .board{margin:0 auto;}
}