/* /Components/MessageBox.razor.rz.scp.css */
#overlay[b-ifdjmkqzg7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    /*backdrop-filter: blur(3px);*/
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#messageBox[b-ifdjmkqzg7] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    min-width: 300px;
    max-width: 300px;
    z-index: 1000;
}

.message-content[b-ifdjmkqzg7] {
    margin-bottom: 15px;
    font-size: 16px;
    text-align: center;
}

.message-buttons[b-ifdjmkqzg7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-button[b-ifdjmkqzg7] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #007bff;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

    .custom-button:hover[b-ifdjmkqzg7] {
        background: #0056b3;
    }
/* /Layout/MainLayout.razor.rz.scp.css */
main[b-k9mo2x1wqu] {
    margin: 1rem 0;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar[b-jpplj3fnl2] {
    --navbar-height: 60px;
    height: var(--navbar-height);
    border-bottom: 1px solid #d6d5d5;
}

.navbar i[b-jpplj3fnl2] {
    font-size: 1.25rem;
}

.nav-item[b-jpplj3fnl2] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item i[b-jpplj3fnl2] {
    font-size: 1.25rem;
    margin-right: 0.725rem;
}

    .nav-item:last-of-type[b-jpplj3fnl2] {
        padding-bottom: 1rem;
    }

    .nav-item[b-jpplj3fnl2]  a {
        color: var(--bs-heading-color);
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-jpplj3fnl2]  a:hover {
            background-color: rgba(0,0,0,0.2);
        }

        .nav-item[b-jpplj3fnl2]  a.active {
            background-color: rgba(0,0,0,0.5);
            color: white;
        }

.reversi-grid[b-jpplj3fnl2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1px;
    font-size: 1.25rem;
    margin-right: 0.725rem;
    width: fit-content; /* 必要なサイズに収める */
    vertical-align: middle; /* テキストとの整列を調整 */
}

    .reversi-grid i[b-jpplj3fnl2] {
        font-size: 0.45em;
        margin-right: 0;
        line-height: 1em;
    }
/* /Pages/Bingo.razor.rz.scp.css */

/* 中央寄せ */
.center-container[b-51wclgr702] {
    text-align: center;
}

/* BINGOタイトル (ゴールド) - 文字間隔を広げる */
.bingo-title[b-51wclgr702] {
    font-family: 'Luckiest Guy', cursive;
    font-size: 60px;
    color: #FFCC00;
    text-shadow: 3px 3px 6px #333;
    letter-spacing: 0.5rem; /* 文字間隔を広げる */
    margin: 2rem auto;
}

/* 数字と終了メッセージのボックス */
.display-container[b-51wclgr702] {
    margin: 1rem auto;
    width: 200px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*border: 1px solid #333;
    border-radius: 10px;*/ /* 角を少し丸く */
}

/* 数字の表示 (大きく) */
.display-number[b-51wclgr702] {
    font-family: 'Rubik', sans-serif;
    font-size: 130px;
    font-weight: bold;
    color: #F02E2E;
    text-shadow: 4px 4px 10px #333;
    transition: color 0.3s ease-in-out;
    line-height: 1;
}

    .display-number.animating[b-51wclgr702] {
        color: #EF7575; /* 少し淡い赤 */
        font-size: 100px;
        transition: none;
    }

/* STARTボタン (オレンジ) - 文字間隔を広げる */
.start-button[b-51wclgr702] {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    padding: 15px 20px 15px 15px;
    background-color: #FF6600;
    color: white;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 3px; /* 文字間隔を広げる */
    margin: 1rem auto;
}

    .start-button:hover[b-51wclgr702] {
        background-color: #E65C00;
    }

/* ビンゴテーブル */
.bingo-table[b-51wclgr702] {
    margin: 1rem auto;
    border-collapse: collapse;
}

/* 数字セル (未選択: 背景を白, 文字を黒) */
.bingo-cell[b-51wclgr702] {
    width: 50px;
    height: 50px;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    vertical-align: middle;
    border: none;
    background-color: #FFFFFF; /* 未選択セルの背景色を白に */
    color: #333333; /* 未選択時の文字色を黒に */
    border: solid 8px #FFFFFF;
}

/* 選ばれた数字のセル (赤背景 & 白文字) */
.selected-cell[b-51wclgr702] {
    background-color: #EE4B4B;
    color: white;
}
/* /Pages/Home.razor.rz.scp.css */
.card[b-n9t9d9coiw] {
    margin-bottom: 1rem;
}

.reversi-container[b-n9t9d9coiw] {
    display: flex;
    align-items: center; /* タイトルとアイコンを縦中央揃え */
    gap: 8px; /* アイコンとタイトルの間隔調整 */
}

.reversi-grid[b-n9t9d9coiw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1px;
    font-size: 0.45em;
    width: fit-content;
}
/* /Pages/QRCode.razor.rz.scp.css */
#qrcode img[b-2sr86q0pa7] {
    width: 300px;
    height: 300px;
    margin: 2rem;
}
/* /Pages/Reversi.razor.rz.scp.css */
.center-container[b-juh30dvqbg] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*height: calc(100vh - var(--navbar-height) - 2rem);*/
}

.button-container[b-juh30dvqbg] {
    display: flex;
    gap: 1rem; /* ボタン間の間隔を調整 */
    justify-content: center; /* ボタンを中央揃え */
    margin-top: 0.5rem;
}

.board[b-juh30dvqbg] {
    --cell-size: min(8vw, 8vh);
    display: grid;
    grid-template-columns: repeat(8, var(--cell-size));
    grid-template-rows: repeat(8, var(--cell-size));
    background-color: #333;
    padding: 5px;
    width: calc(var(--cell-size) * 8 + 10px);
    height: calc(var(--cell-size) * 8 + 10px);
}

.cell[b-juh30dvqbg] {
    position: relative; /* 子要素（ポッチ）の配置基準をセルにする */
    width: var(--cell-size);
    height: var(--cell-size);
    background-color: #008000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
}

    .cell.dot[b-juh30dvqbg]::before {
        content: "";
        width: calc(var(--cell-size) * 0.2);
        height: calc(var(--cell-size) * 0.2);
        background-color: black;
        border-radius: 50%;
        position: absolute;
        bottom: calc(var(--cell-size) * -0.1);
        right: calc(var(--cell-size) * -0.1);
        z-index: 1;
    }

.piece[b-juh30dvqbg] {
    position: relative;
    width: calc(var(--cell-size) * 0.8);
    height: calc(var(--cell-size) * 0.8);
    border-radius: 50%;
    transform-style: preserve-3d; /* 3D変換を有効化 */
}

.white[b-juh30dvqbg] {
    background-color: white;
}

.black[b-juh30dvqbg] {
    background-color: black;
}

.placeable[b-juh30dvqbg] {
    border: 2px solid rgba(255, 255, 0, 0.5);
}

.piece-inner[b-juh30dvqbg] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden; /* 裏面が見えないようにする */
}

.front[b-juh30dvqbg] {
    background-color: var(--current-color);
}

.back[b-juh30dvqbg] {
    background-color: var(--opponent-color);
    transform: rotateY(180deg); /* 裏面の初期位置 */
}

.flip[b-juh30dvqbg] {
    animation: flip-b-juh30dvqbg 0.5s ease-in-out forwards;
}

@keyframes flip-b-juh30dvqbg {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(180deg);
    }
}
/* /Pages/Sudoku.razor.rz.scp.css */
.center-container[b-0a11025fku] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sudoku-grid[b-0a11025fku] {
    display: grid;
    grid-template-columns: repeat(9, 40px);
    grid-template-rows: repeat(9, 40px);
    gap: 0px;
}

.cell[b-0a11025fku] {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 30px;
    border: 1px solid #999;
    cursor: pointer;
    display: flex; /* Flexbox を使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    user-select: none;
    color: #0073e6;
    font-weight: bold;
}

    /* 3x3の枠線を強調（縦線） */
    .cell:nth-child(3n+3):not(:nth-child(9n))[b-0a11025fku] {
        border-right: 2px solid #999;
    }

    /* 3x3の枠線を強調（横線） */
    .cell:nth-child(n+19):nth-child(-n+27)[b-0a11025fku],
    .cell:nth-child(n+46):nth-child(-n+54)[b-0a11025fku] {
        border-bottom: 2px solid #999;
    }

    /* 固定の数字（変更不可） */
    .cell.fixed-number[b-0a11025fku] {
        font-weight: bold;
        color: #666;
/*        background-color: #f0f0f0;
        border: 2px solid #999;
        border-radius: 5px;*/
    }

    /* 縦・横の強調 */
    .cell.highlight-line[b-0a11025fku] {
        background-color: #bcd4ff;
    }

    /* 盤面内の選択数字を識別しやすく */
    .cell.highlight[b-0a11025fku] {
        background-color: #ffeb3b;
        color: #333;
    }

    /* エラーセルのハイライト */
    .cell.error-highlight[b-0a11025fku] {
        background-color: #ffcccc; /* 少し柔らかい赤系で目に優しく */
        color: #ff0000; /* 強調された赤でエラーを明確に */
        font-weight: bold;
    }

.operation-bar[b-0a11025fku] {
    display: flex;
    align-items: center;
    width: 360px;
    margin-bottom: 10px;
}

.operation-buttons[b-0a11025fku] {
    display: flex;
}

.timer-display[b-0a11025fku] {
    font-size: 18px;
    font-weight: bold;
    color: #0073e6; /* 視認性の高いブルー */
    min-width: 80px;
    text-align: right;
    margin-left: auto;
}

.operation-button[b-0a11025fku] {
    width: 40px;
    height: 40px;
    font-size: 20px;
    padding: 5px;
    border: 1px solid #666;
    border-radius: 5px;
    user-select: none;
}

.number-selector[b-0a11025fku] {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.number-button[b-0a11025fku] {
    width: 40px;
    height: 40px;
    font-size: 25px;
    /*padding: 5px;*/
    border: 1px solid #666;
    border-radius: 5px;
    user-select:none;
}

/* 選択された数字を強調 */
    .number-button:hover[b-0a11025fku] {
        background-color: #007bff;
        color: white;
        font-weight: bold;
    }

/* メモモードのスタイル */
.memo-container[b-0a11025fku] {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    text-align: center;
}

.memo[b-0a11025fku] {
    position: absolute;
    width: 33%;
    height: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* メモの配置 */
.memo-1[b-0a11025fku] {
    top: 0;
    left: 0;
}

.memo-2[b-0a11025fku] {
    top: 0;
    left: 33%;
}

.memo-3[b-0a11025fku] {
    top: 0;
    left: 66%;
}

.memo-4[b-0a11025fku] {
    top: 33%;
    left: 0;
}

.memo-5[b-0a11025fku] {
    top: 33%;
    left: 33%;
}

.memo-6[b-0a11025fku] {
    top: 33%;
    left: 66%;
}

.memo-7[b-0a11025fku] {
    top: 66%;
    left: 0;
}

.memo-8[b-0a11025fku] {
    top: 66%;
    left: 33%;
}

.memo-9[b-0a11025fku] {
    top: 66%;
    left: 66%;
}

/* メモモード切り替えボタン */
.memo-toggle[b-0a11025fku] {
    width: 40px;
    height: 40px;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid #666;
    border-radius: 5px;
    user-select: none;
}

    .memo-toggle:hover[b-0a11025fku] {
        background-color: #007bff;
        color: white;
        font-weight: bold;
    }

    .memo-toggle.selected[b-0a11025fku] {
        color: white;
        background-color: #0056b3;
    }

/* 消しゴムボタンのスタイル */
.eraser-button[b-0a11025fku] {
    width: 40px;
    height: 40px;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid #666;
    border-radius: 5px;
    user-select: none;
}

    .eraser-button:hover[b-0a11025fku] {
        color: white;
        background-color: #c82333;
    }