/* 宙碁レイアウト　style.css v1.04 2026-07-15  */
/* 碁盤の路長、碁盤線の間隔 "gp"="grid pitch"　を基準としたレイアウト設計 */
/* 1gp=47px */
/*Grid Pitch = distance between adjacent grid lines.
  (Originally considered "Grid Unit",
  but Grid Pitch better expresses,the spacing of the board lines.) */

  /*==============================================================
    Chugo Layout System

    lu = layout_unit  UI layout base unit
    gp = grid_pitch   Board grid unit

    IMPORTANT:
    lu = gp only when board-row = board-col = 19.
    This equality is numerical only.
    layout_unit and grid_pitch are different concepts.
    layout_unit is length size to layout every area except CyuGo_board.
    grid_pitch is length size of liberty in board_display. 
    board_play consist board-row and board-col,decide in index.html.

    About three types of board.
    1:board_play,player moves here.
      consist fron board-row and board-col, are write in index.html.
      tree defaults,19 * 19,13 * 13,9 * 9.
    2:board_display,extended 2 liberty around board_play to asist player's thinking.
      consist from board-row + 4,board-col + 4.

    =============================================================~~~~=*/
/* =========================================================
   Chugo Layout System (栄一流テーブル方式)
   ========================================================= */

/* ---- 基本単位 ---- */
/* lu: layout_unit（UI全体のレイアウト基準長） */
/* gp: grid_pitch（board-display 上の盤線間隔） */

/* =========================================
   宙碁 UI 固定レイアウト＋自動縮小対応 CSS
   Version: 1.10  Date: 2026-07-15
   ========================================= */

/* 全体縮小の基準点 */
#scale-wrapper {
    transform-origin: top left;
}

/* 左右を横並びにする（固定レイアウト） */
#CyuGo-root {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* ================================
   左：盤（23×23）
   ================================ */

#board-display {
    width: calc(23 * 24px);   /* 552px */
    height: calc(23 * 24px);  /* 552px */
    background: #e0c68c;
    position: relative;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* 盤の線（23×23） */
.board-grid {
    position: absolute;
    inset: 0;
    border: 1px solid #8b6b3f;
    background-image:
        repeating-linear-gradient(#8b6b3f 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, #8b6b3f 0 1px, transparent 1px 24px);
}

/* ================================
   右：Row1〜Row4（固定幅）
   ================================ */

#info-area {
    width: 840px;      /* 固定幅 */
    height: 1080px;    /* 固定高さ */
    background: #fafafa;
    border-left: 2px solid #ccc;
    padding: 10px;
}

.info-row {
    border-bottom: 1px solid #ddd;
    padding: 12px;
    font-size: 20px;
}