@charset "utf-8";
@layer reversi;
@layer reversi {
    @keyframes anim_cnv_scr
    {
        0% { background-position: 720px 480px; }
        100% { background-position: 0px 0px; }
    }
    #wrapper {
        position: relative;
        background-color: rgba(147, 165, 179, 0.2);
        width: 100%;
        height: 100svh;
        margin: 5rem 0;
        #cnv_scr {
            position: absolute;
            left: 50%;
            top: 0;
            width: 800px;
            height: 1250px;
            transform-origin: top left;
            background: url(/images/board_games/common/back_20250906.webp) repeat left top;
            animation: anim_cnv_scr 10s linear infinite;
            border: 2px solid #a35555;
        }
        #panel {
            position: absolute;
            left: 50%;
            top: 0;
            width: 800px;
            height: 1250px;
            transform-origin: top left;
            font-weight: bold;
            user-select: none;
            pointer-events: none;
            #wnd_menu {
                visibility: hidden;
                position: absolute;
                left: 50px;
                top: 200px;
                width: 700px;
                height: 850px;
                background-color: #a8827d;
                border: 2px solid #fff;
                border-radius: 20px;
                text-align: center;
                #wnd_menu_icon {
                    border: 3px solid #714747;
                    margin: 20px 0 10px;
                }
                #wnd_menu_game {
                    color: #fff;
                    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
                    font-size: 24px;
                    margin-bottom: 30px;
                }
                #opponent_sel {
                    pointer-events: auto;
                    background-color: #d5c0c0;
                    padding: 40px 0;
                    #opponent_sel_title {
                        color: #933333;
                        font-size: 34px;
                    }
                    #opponent_sel_container {
                        display: table;
                        width: 70%;
                        margin: 0 auto;
                    }
                    .opponent_sel_item {
                        display: table-cell;
                        width: 50%;
                        padding: 50px 20px 100px;
                        .opponent_sel_icon {
                            border: 2px solid #99546e;
                            box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);
                            margin-bottom: 10px;
                        }
                        .opponent_sel_name {
                            color: #c63636;
                            font-size: 24px;
                            text-decoration: underline;
                        }
                    }
                    #opponent_sel_hint {
                        color: #933333;
                        font-size: 28px;
                    }
                }
            }
            #opponent_msg {
                position: absolute;
                left: 70px;
                top: 55px;
                width: 480px;
                height: 135px;
                color: #cb457a;
                font-size: 30px;
            }
            #btn_resign {
                visibility: hidden;
                pointer-events: auto;
                #resign {
                    position: absolute;
                    left: 8px;
                    top: 1148px;
                    width: 227px;
                    height: 67px;
                    background-color: rgba(209, 134, 145, 0.8);
                    border: 2px solid rgba(113, 109, 153, 0.8);
                    border-radius: 8px;
                    text-align: center;
                    font-size: 30px;
                    line-height: 67px;
                    color: #85142e;
                    text-decoration: underline;
                }
            }
            #game_info {
                visibility: hidden;
                position: absolute;
                display: table;
                left: 241px;
                top: 1048px;
                width: 541px;
                height: 166px;
                background-color: rgba(228, 230, 240, 0.5);
                border: 2px solid rgba(255, 255, 255, 0.5);
                border-radius: 20px;
                text-align: center;
                font-size: 24px;
                color: #792d6a;
                #game_info_player {
                    display: table-cell;
                    width: 50%;
                }
                #game_info_opponent {
                    display: table-cell;
                }
                p {
                    font-size: 40px;
                    line-height: 66px;
                    margin: 28px 0 8px;
                }
            }
            #thinking {
                visibility: hidden;
                position: absolute;
                left: 225px;
                top: 575px;
                width: 350px;
                height: 100px;
                background-color: rgba(69, 112, 168, 0.8);
                box-shadow: inset 0 0 0 2px #a0d3ff;
                border: 6px solid rgba(69, 112, 168, 0.8);
                border-radius: 30px;
                color: #fff;
                text-align: center;
                font-size: 32px;
                line-height: 94px;
            }
            #dialog {
                visibility: hidden;
                position: absolute;
                left: 125px;
                top: 550px;
                width: 550px;
                height: 150px;
                background-color: rgba(171, 77, 84, 0.9);
                box-shadow: inset 0 0 0 3px #d0a6a6, 0 0 12px 12px rgba(255, 255, 255, 0.1);
                border: 3px solid #8d4d59;
                border-radius: 12px;
                text-align: center;
                #dialog_msg {
                    width: 100%;
                    line-height: 50px;
                    margin: 10px 0;
                    font-size: 30px;
                    color: #fff;
                }
                #dialog_ok {
                    visibility: hidden;
                    position: absolute;
                    top: 75px;
                    left: 200px;
                }
                #dialog_yes {
                    visibility: hidden;
                    position: absolute;
                    top: 75px;
                    left: 100px;
                }
                #dialog_no {
                    visibility: hidden;
                    position: absolute;
                    top: 75px;
                    left: 300px;
                }
                .dialog_btn {
                    pointer-events: auto;
                    width: 150px;
                    height: 55px;
                    line-height: 55px;
                    border: 2px solid #fff;
                    background-color: rgba(255, 255, 255, 0.2);
                    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.2);
                    text-decoration: underline;
                    font-size: 32px;
                    color: #fff;
                }
            }
            #result {
                visibility: hidden;
                position: absolute;
                left: 0;
                top: 350px;
                width: 800px;
                height: 550px;
                border-top: 4px solid #c47373;
                border-bottom: 4px solid #c47373;
                #result_msg {
                    position: absolute;
                    left: 0;
                    top: 40px;
                    width: 100%;
                    color: #85142e;
                    font-size: 54px;
                    text-align: center;
                    text-shadow: 0 0 6px #fff;
                }
                #result_rematch {
                    position: absolute;
                    left: 20px;
                    top: 340px;
                }
                #result_to_title {
                    position: absolute;
                    left: 70px;
                    top: 445px;
                }
                .result_btn {
                    pointer-events: auto;
                    width: 300px;
                    height: 65px;
                    background-color: rgba(209, 134, 145, 0.8);
                    border: 2px solid rgba(113, 109, 153, 0.8);
                    border-radius: 8px;
                    text-align: center;
                    font-size: 30px;
                    line-height: 65px;
                    color: #85142e;
                    text-decoration: underline;
                }
            }
        }
    }
    #var_lang {
        display: none;
    }
}