/* equipment_V0.28b.css */

/* 将棋盤＋駒台全体を囲むビューエリア（パン・ズーム対象） */
.pan-zoom-viewport {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    cursor: grab;
}

/* 将棋盤と駒台を含む中心配置のラッパー */
.equipment-wrapper {
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-width: max-content;
    min-height: max-content;
    will-change: transform;
    backface-visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transform-origin: center center;
    opacity: 0; /* ← 最初は透明 */
    transition: opacity 1.0s ease; /* フェードイン用のトランジション */
}

/* 将棋盤テーブルの木目背景 */
.board {
    border-collapse: collapse;
    background-image: linear-gradient(
        to right,
        #e5aa4eff 25%,
        #e0a344ff 25%,
        #e0a344ff 50%,
        #e5aa4eff 50%,
        #e5aa4eff 75%,
        #e0a344ff 75%
    );
    background-size: 6px 6px;
}

/* 盤面マス */
.cell {
    width: 30px;
    height: 33px;
    border: 1px solid black;
    padding: 0;
}

/* 上部の数字ラベル */
.coord-top {
    width: 30px;
    height: 16px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold; /* Noto Sans JP の wght@700 が適用されます */
    font-size: 13px;
    border: none;
    padding: 0;
    /* 新しい font-family 指定 */
    font-family: 'Noto Sans JP', sans-serif;
}

/* 右側の漢数字ラベル */
.coord-right {
    width: 16px;
    height: 33px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold; /* Noto Sans JP の wght@700 が適用されます */
    font-size: 12px;
    border: none;
    padding: 0;
    /* 新しい font-family 指定 */
    font-family: 'Noto Sans JP', sans-serif;
}

/* 空白セル */
.empty {
    width: 16px;
    height: 16px;
    border: none;
    padding: 0;
}

/* 駒台（テーブル） */
.trays {
    border-collapse: collapse;
}

/* 駒台のマス */
.tray {
    width: 30px;
    height: 33px;
    background-image: linear-gradient(
        to right,
        #cf7b23ff 25%,
        #c46f2aff 25%,
        #bb681eff 50%,
        #c46f2aff 50%,
        #cf7b23ff 75%,
        #c46f2aff 75%
    );
    background-size: 6px 6px;
    border: none;
    padding: 0;
}

/* 駒台位置調整（後手） */
.tray-gote-layout {
    vertical-align: top;
}

/* 駒台位置調整（先手） */
.tray-sente-layout {
    vertical-align: bottom;
}

/* フレックス内位置調整（後手） */
.tray-gote {
    align-self: flex-start;
}

/* フレックス内位置調整（先手） */
.tray-sente {
    align-self: flex-end;
}

/* 駒画像（将棋盤）の整列（マス目中央） */
.cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin: auto;
}

/* 駒画像（駒台）の整列（マス目中央） */
.tray img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin: auto;
}

/* 持駒の数*/
.tray-piece-count-gote {
    width: 20px;
    height: 33px;
    color: #00FF00; /* 文字の色 */
    text-shadow:
        -1px -1px 0 #9966CC, /* 左上 */
         1px -1px 0 #9966CC, /* 右上 */
        -1px  1px 0 #9966CC, /* 左下 */
         1px  1px 0 #9966CC; /* 右下 */
    background-image: linear-gradient(
        to right,
        #cf7b23ff 25%,
        #c46f2aff 25%,
        #bb681eff 50%,
        #c46f2aff 50%,
        #cf7b23ff 75%,
        #c46f2aff 75%
    );
    background-size: 6px 6px;
    border: none;
    padding: 0;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
    vertical-align: middle;
    transform: rotate(180deg); /* ★ 追加で文字を逆さまに */
}

.tray-piece-count-sente {
    width: 20px;
    height: 33px;
    color: #00FF00; /* 文字の色 */
    text-shadow:
        -1px -1px 0 #9966CC, /* 左上 */
         1px -1px 0 #9966CC, /* 右上 */
        -1px  1px 0 #9966CC, /* 左下 */
         1px  1px 0 #9966CC; /* 右下 */
    background-image: linear-gradient(
        to right,
        #cf7b23ff 25%,
        #c46f2aff 25%,
        #bb681eff 50%,
        #c46f2aff 50%,
        #cf7b23ff 75%,
        #c46f2aff 75%
    );
    background-size: 6px 6px;
    border: none;
    padding: 0;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
    vertical-align: middle;
}

.tray-nearer-side {
    background-image: linear-gradient(
        to right,
        #cf7b23ff 25%,
        #c46f2aff 25%,
        #bb681eff 50%,
        #c46f2aff 50%,
        #cf7b23ff 75%,
        #c46f2aff 75%
    );
    background-size: 6px 6px;
    border: none;
    padding: 0;
    height: 10px;
}

.tray-farther-side {
    background-image: linear-gradient(
        to right,
        #cf7b23ff 25%,
        #c46f2aff 25%,
        #bb681eff 50%,
        #c46f2aff 50%,
        #cf7b23ff 75%,
        #c46f2aff 75%
    );
    background-size: 6px 6px;
    border: none;
    padding: 0;
    height: 10px;
}

.tray-board-side {
    background-image: linear-gradient(
        to right,
        #cf7b23ff 25%,
        #c46f2aff 25%,
        #bb681eff 50%,
        #c46f2aff 50%,
        #cf7b23ff 75%,
        #c46f2aff 75%
    );
    background-size: 6px 6px;
    border: none;
    padding: 0;
    width: 10px;
}

#color-sente, #color-sente-2 {
    background-image: linear-gradient(
        to right,
        #292929 25%,
        #2F2F2F 25%,  /* +6 明るい筋 */
        #2F2F2F 50%,
        #292929 50%,
        #292929 75%,
        #232323 75%   /* -6 暗い筋 */
    );
    background-size: 6px 6px;
    height: 10px;               /* 親tdは高さ固定 */
    text-align: right;
}

#color-gote, #color-gote-2 {
    background-image: linear-gradient(
        to right,
        #F8F8FF 25%,
        #F4F4F4 25%,  /* -4 明るい筋 */
        #F4F4F4 50%,
        #F8F8FF 50%,
        #F8F8FF 75%,
        #F0F0F0 75%   /* -8 暗い筋 */
    );
    background-size: 6px 6px;
    height: 10px;               /* 親tdは高さ固定 */
    text-align: left;
}