html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin: 0;
  user-select: none;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, sans-serif;
  background: #eef3f8;
  color: #3f4650;
}

.main{
  display:flex;
  margin: 0;
  width: 760px;
  height: 530px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body.game_page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (min-width: 601px) {
  body.game_page .main {
    margin: 60px 0;
    margin-top: max(0px, calc((100vh - 530px) * 0.20));
  }

}

body.game_page .main-board,
body.game_page .main-home {
  width: auto;
}

.game_stage {
  position: relative;
  flex: 0 0 auto;
  width: 440px;
  height: 530px;
}

.game_modal_layer {
  position: absolute;
  top: 0;
  left: 0;

  width: 440px;
  height: 440px;

  z-index: 1000;
  pointer-events: none;
}

.game_modal_layer .game_modal {
  pointer-events: auto;
}

#field_frame{
  position: relative;
  width: 440px;
  height: 440px;
  background:
  linear-gradient(rgba(0,20,0,.06), rgba(0,20,0,.06))
    top / 100% 19px no-repeat,

  linear-gradient(rgba(0,20,0,.06), rgba(0,20,0,.06))
    left 19px / 19px calc(100% - 39px) no-repeat,

  linear-gradient(rgba(0,20,0,.06), rgba(0,20,0,.06))
    right 19px / 20px calc(100% - 39px) no-repeat,

  linear-gradient(rgba(0,20,0,.06), rgba(0,20,0,.06))
    bottom / 100% 20px no-repeat,

  hsl(140, 52%, 40%);
}

#column_index {
  width: 356px;
  margin: 0 auto;
  display:flex;
  justify-content: space-between; 
}

#column_index span{
  font-size: 13px;
  color: aliceblue;
}

/* ↓盤面下カウント・棋譜表示 */
#all_cnt{
  position: absolute;
  right: 25px;
  bottom: 0;

  width: 105px;
  height: 20px;
  margin: 0;

  color: aliceblue;
  font-size: 16px;
  white-space: nowrap;
  font-weight: 400;

  display: flex;

  justify-content: flex-end;
  align-items: center;
}

.all_mode{
  display: inline-block;
  width: 34px;
  text-align: right;
}

.all_move_no{
  display: inline-block;
  width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.all_sep{
  display: inline-block;
  width: 6px;
  text-align: center;
}

.all_move_pos{
  display: inline-block;
  width: 24px;
  text-align: left;
}
/* ↑盤面下カウント・棋譜表示 */

.mode_観戦,
.mode_履歴,
.mode_検討{
  color:aliceblue;
}

#row_index {
  height:366px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  margin:  17px 0;
}

#row_index span{
  width: 20px;
  text-align: center;
  font-size: 12px;
  color: aliceblue;
}

#field{
  border-collapse: collapse;
  cursor: default;
  position:absolute;
  top: 19px;
  left: 19px;
}

.field_pointer_on{
  cursor: pointer !important;
}

.pointer_non{
  cursor: none;
  pointer-events: none;
}

.pointer_non_op{
  cursor: none;
  pointer-events: none;
  opacity: .5;
}

.pointer_non_co{
  cursor: none;
  pointer-events: none;
  color: rgb(141, 141, 141);
}

.pointer2_non_op{
  cursor: none;
  pointer-events: none;
  opacity: .5;
}

#field td {
  border: 1px solid black;
  box-sizing: border-box;
  table-layout: fixed;
  width: 50px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

td{
  position: relative;
}

.dot{
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: black;
  position: absolute;
  z-index: 1;
  top: -3.2px;
  left: -3.2px;
}

#slect_stone{
  position: absolute;
  top: 42%;
  left: 42%;
  background: red;
  width: 8px;
  height: 8px;
}

#blunck_board{
  position: absolute;
  top: 40%;
  left: 40%;
  background: black;
  opacity: .2;
  width: 10px;
  height: 10px;
}

.stone{
  width: 42px;
  height: 42px;
  border-radius: 100%;
  margin: 0 auto;
}

.wh_stone{
  background: white;
}

.bk_stone{
  background:black;
}

.view{
  width:440px;
  height: 90px;
  background: rgb(233, 230, 230);
  margin: 0 auto;
}

#upper_view{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 422px;
  height: 40px;
  margin:0 auto ;
  font-size: 15px;
}

#upper_view p{
  margin: 0;
}

#lower_view{
  display: flex;
  justify-content: space-between;
  width: 420px;
  height: 45px;
  margin:0 auto ;
}

#lower_right_view,
#lower_center_view,
#lower_left_view {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#lower_center_view {
  flex: 1;
  min-width: 0;
  gap: 6px;
  margin: 0 12px;
}

#lower_center_view section {
  flex: 1 1 0;
  min-width: 0;
}

#lower_center_view section:first-child {
  text-align: left;
}

#lower_center_view section:last-child {
  text-align: right;
}

#lower_center_view section p {
  margin: 0;
  font-size: 16px;
  line-height: 18px;
}

#you_name,
#opt_name {
  display: block;
  white-space: nowrap;
}

#lower_center_view.name_narrow #you_name,
#lower_center_view.name_narrow #opt_name {
  font-size: 14px;
}

#lower_center_view.name_tiny #you_name,
#lower_center_view.name_tiny #opt_name {
  font-size: 13px;
  letter-spacing: -0.3px;
}

#you_name,
#opt_name {
  display: block;
  white-space: nowrap;
  font-size: 16px;
  line-height: 18px;
}

#timer_bk,
#timer_wh {
  display: inline-block;
  width: 58px;

  text-align: center;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.lower_right_view p,
.lower_left_view p{
  margin: 0;
}

#view_turn{
  text-align: center;
  font-size: 20px;
  margin: 0;
}

#cnt_bk_stone,
#cnt_wh_stone{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  margin: 0;
  border-radius:10%;
  width: 34px;
  height: 40px;
  font-weight: 500;

  background: rgb(200, 200, 200);
}

#cnt_wh_stone{
    background: rgb(255, 255, 255);
}

.white_cnt_view,
.black_cnt_view{
  margin: 0;
  text-align: center;
  font-size: 24px;
  line-height: 38px;
}

.menu{
  width: 320px;
  height: 530px;
  background: rgb(233, 230, 230);
}

.logo {
  font-weight: 500;
  text-align: right;
  padding-right: 8px;

  font-family: 'Atkinson Hyperlegible Mono', monospace;
  font-size: 20px;
  letter-spacing: 1px;

  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.green {
  color: #2e8b57;
}

.game{
  width: 440px;
}

.main_menu{
  width: 300px;
  height: 440px;
  margin: 0 auto 0;
}

/* メインタブ */
.tab_panel{
  height:30px;
}

input[name="tab_menu"] {
  display: none;
}

.tab_menu{
  width:calc(100% / 4);
  height:100%;

  display:block;
  float:left;


  font-size: 14px;
  text-align: center;

  cursor:pointer;

  text-align:center;
  color:#666;
}

.tab_inner{
  display:inline-flex;
  align-items:center;
  gap:2px;

  height:28px;

  padding:0 4px;

  position:relative;

  color:#666;
}

.tab_inner::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:#728fb8;
  border-radius:2px;
  opacity:0;
  transition:opacity .25s ease;
}

.tab_menu{
  position: relative;
  top: -4px;
}

#results:checked ~ .tab_panel label[for="results"] .tab_inner,
#consider:checked ~ .tab_panel label[for="consider"] .tab_inner,
#watching:checked ~ .tab_panel label[for="watching"] .tab_inner,
#settings:checked ~ .tab_panel label[for="settings"] .tab_inner{
  color:#111;
}
#results:checked ~ .tab_panel label[for="results"] .tab_inner::after,
#consider:checked ~ .tab_panel label[for="consider"] .tab_inner::after,
#watching:checked ~ .tab_panel label[for="watching"] .tab_inner::after,
#settings:checked ~ .tab_panel label[for="settings"] .tab_inner::after{
  opacity:1;
}

#results:checked ~ .content_panel #results_content,
#watching:checked ~ .content_panel #watching_content,
#consider:checked ~ .content_panel #consider_content,
#settings:checked ~ .content_panel #settings_content {
  display:block;
}

#results:checked ~ .content_panel #results_content {
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

/* メインコンテンツ＿共通 */
.content_panel{
  width:300px;
  height:372px;

  background:#fafafa;
  border-radius:6px;
  overflow:hidden;
}

.tab_content{
  display:none;
  clear:both;
  padding:0;

  width:100%;
  height:100%;
}

/* 成績コンテンツ＿共通 */
#result,
#result_opt{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;

  width: 100%;
  height: calc(100% - 29px);
  transform: translateY(-5px);
}

.result_row{
  display: grid;
  grid-template-columns: 48px 155px;
  column-gap: 26px;
  justify-content: center;
  align-items: baseline;
}

.result_name_row{
  margin-bottom: -15px;
}

.result_label{
  text-align: right;
  white-space: nowrap;
}

.result_value{
  text-align: left;
  white-space: nowrap;
}

#rate,
#rank,
#rate_opt,
#rank_opt{
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

#rank{
  margin-right: 3px;
}

.name_opt_label{
  text-align: left;
  font-size: 13px;
  color: #666;
}

/* 成績コンテンツ＿BOT成績 */
#bot_result{
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: calc(100% - 29px);
  padding: 30px 30px 0;
  box-sizing: border-box;
}

.result_cont{
  margin: 0;
  padding: 0;
}

/* 成績コンテンツ＿順位表示ボタン */
#rank_chart::-webkit-scrollbar {
  display:none;
}

/* 成績コンテンツ＿順位 */
#rank100{
  flex: 1;
  min-height: 0;

  height: 100%;
  padding-top: 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

#rank_chart{
  flex: 1;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 290px;

  font-size: 12px;
  font-weight: bold;
  list-style: none;

  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}

#rank_chart li{
  background: rgb(247, 247, 247);
  margin-bottom: 4px;
  display: flex;
  padding: 1px 30px;
  justify-content: space-around;
}

#rank_chart li p{
  margin: 3px 0;
}

.index_chart{
  width: 35px;
}

.name_chart{
  width: 180px;
}

/* 履歴・観戦コンテンツ共通 */
#rec_chart li,
#rec_chart_opt li,
#watchings li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;

  margin-top: 4px;
  background: rgb(244, 244, 244);
  border-radius: 3px;

  box-sizing: border-box;
  position: relative;
}

/* 自分の履歴：タグ・日時あり */
#rec_chart li{
  height: 62px;
  padding: 21px 4px 3px;
}

#rec_chart_opt li{
  height: 48px;
  padding: 0 4px;
}

/* 観戦一覧：一段表示 */
#watchings li{
  height: 48px;
  padding: 4px;
  margin: 3px 1px 0;
  cursor: pointer;
}

/* 履歴・観戦 共通選択ボタン */
#watch_btn_rec,
#watch_btn_rec_opt{
  position: relative;
  z-index: 2;
  cursor: pointer;
}

#rec_chart p,
#rec_chart_opt p,
#watchings p{
  margin:  0;
}

.rec_meta{
  position: absolute;
  top: 3px;
  left: 4px;
  right: 4px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: #707070;
  font-size: 11px;
  line-height: 14px;

  pointer-events: none;
}

.rec_match_type,
.rec_date{
  white-space: nowrap;
}

/* 履歴コンテンツ */
#rec_chart::-webkit-scrollbar ,
#rec_chart_opt::-webkit-scrollbar ,
#watchings::-webkit-scrollbar {
  display: none;
}

#rec_chart,
#rec_chart_opt,
#watchings{
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}

input[name="result_sub_tab"],
input[name="rec_d"],
input[name="rec_dc"],
input[name="rec_dc_opt"],
input[name="rank_chart_d"],
.display {
  display: none;
}

#consider_content {
  position: relative;
}

#consider2,
#consider2_opt{
  display: flex;
  flex-direction: column;
  position: relative;
}

#consider2 {
  height: calc(100% - 60px);
}

#consider2_opt{
  min-height: 0;
  height: calc(100% - 88px);
}

#rec_chart,
#rec_chart_opt{
  flex: 1;
  min-height: 0;

  font-size: 12px;
  list-style: none;

  width: 290px;
  margin: 0 auto 2px;
}

#rec_chart{
  z-index: 1;
}

.rec_chart_op{
  opacity: 0.5;
  pointer-events: none;
}

.win,
.lose{
  border: none;
}

/* 履歴だけ、左右に薄いグレーの棒を表示 */

#rec_chart .rec_chart2::before,
#rec_chart .rec_chart2::after,
#rec_chart_opt .rec_chart2::before,
#rec_chart_opt .rec_chart2::after{
  content: "";
  position: absolute;
  top: 50%;

  width: 4px;
  height: 25px;

  transform: translateY(-50%);
  background: #e1e4e7;
  border-radius: 1px;
}

#rec_chart .rec_chart2::before,
#rec_chart_opt .rec_chart2::before{
  left: 0;
}

#rec_chart .rec_chart2::after,
#rec_chart_opt .rec_chart2::after{
  right: 0;
}

/* 左側の人が勝ち */
#rec_chart .rec_chart2.win::before,
#rec_chart_opt .rec_chart2.win::before{
  background: #3580c7;
}

/* 右側の人が勝ち */
#rec_chart .rec_chart2.lose::after,
#rec_chart_opt .rec_chart2.lose::after{
  background: #3580c7;
}

.right{
  text-align: right;
}

.rec_chart1{
  width: 77px;
  text-align: left;
  pointer-events: none;
  border-radius: 3px;
}

.rec_chart2{
  position: relative;
  width: 42px;
  margin: 0 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;

  text-align: center;
  line-height: 1;
}

.rec_result_main,
.rec_result_sub{
  color: #222;
}

.rec_match_tag {
  min-width: 30px;
  padding: 0;
  box-sizing: border-box;

  border-radius: 0;
  background: none;

  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
  font-weight: bold;
  color: #444;
}

.rec_result_text{
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
}

.rec_chart3{
  width: 77px;
  text-align: right;
  border-radius: 3px;
}

/* レート */
.rec_chart1 p:first-child,
.rec_chart3 p:first-child{
  color: #707070;
}

/* ユーザー名 */
.rec_chart1 p:last-child,
.rec_chart3 p:last-child{
  color: #2f2f2f;
}

.rec_opponent_name{
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
  border-radius: 3px;
}

.rec_opponent_name:hover{
  background: rgb(180, 210, 255);
}

#rec_chart input:checked + #watch_btn_rec li{
  border: 2px solid rgb(62, 104, 241);
}

#rec_chart_opt input:checked + #watch_btn_rec_opt li  {
  border: 2px solid rgb(62, 104, 241);
}

.rec_chart1 p:last-child,
.rec_chart3 p:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 履歴コンテンツ＿棋譜表示 */
#record_area {
background: rgb(233, 230, 230);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 37px;
}

#kifu_bar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 310px;
  height: 28px;
  cursor: pointer;
  z-index: 3;
  background: transparent;
  pointer-events: auto;
}

#kifu_bar::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 5px;
  background: #b6b6bb;
  border-radius: 999px;
  transition: width 0.2s ease;
}

#kifu_bar:hover::before {
  background: #575757;
  width: 80px;
}

#kifu_wrap{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 37px;
  width: 301px;
  height: 176px;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

#kifu_wrap.hide .kifu_body {
  transform: translateY(155px);
  pointer-events: none;
}

.kifu_body {
  position: absolute;
  inset: 0;
  transform: translateY(0);
  transition: transform 0.25s ease;
  background: #dddddd;
  background: rgb(233, 230, 230);
  pointer-events: auto;
}

#game_record {
  position: relative;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 3px;
  font-size: 12px;
  user-select: all;
 
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(7, 19px);
  gap: 3px;
  pointer-events: auto;
  top: 19px;
}

.game_record_move{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  font-size: 12px;
  background: #fff;
  border-radius: 5px;
  box-sizing: border-box;
}

.current_move {
  border: 2px solid red;
}

.branch_move{
  background: rgb(220, 235, 255);
  color: rgb(40, 70, 140);
}

/* 履歴コンテンツ＿履歴検討操作ボタン */
.operation{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
}

.opt_operation_keep {
  display: none;
}

#first,
#back,
#forward,
#end,
.btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 45px;
 height: 35px;
 cursor: pointer;
 border-radius: 2px;
 background: #757575;
 color: aliceblue;
}

#first,
#back,
#forward,
#end {
 font-size: 28px !important;
}

.btn{
 font-size: 15px;
}

/* 観戦コンテンツ */
#watching_content{
  overflow: hidden;
}

#watchings{
  font-size: 12px;
  list-style: none;

  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;

  width: 290px;
  height: 364px;

  margin: 4px auto;
}

#watch_btn_rec li,
#watch_btn_rec_opt li{
  border: 2px solid rgb(244, 244, 244); 
}

#watch_btn_rec li:hover,
#watch_btn_rec_opt li:hover {
  background: rgb(225, 225, 225);
}

#watch_btn_rec li:hover + .rec_chart1,
#watch_btn_rec_opt li:hover + .rec_chart1{
  border: 2px solid rgb(225, 225, 225);
}

#watchings li input:checked + #watch_btn,
#rec_chart li input:checked + #watch_btn{
  background-color:rgb(255, 0, 0);
}

/* 設定コンテンツ */
.setting_menu{
  margin: 0;
    font-size:14px;
}
.setting input[type="radio"]{
  display:none;
}

.setting{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 20px 0;
}

.setting_btn{
  display:flex;
  justify-content:center;
  align-items:center;

  width:40px;
  height:22px;
  padding:0;
  margin:0;
  font-size:12px;
  line-height:1;
  font-weight:400;

  box-shadow:inset 0 1px 1px rgba(0,0,0,.04);
  background:#f5f7fa;
  color:#666;

  cursor:pointer;
  user-select:none;

  transition:.2s;
}

.setting_btn:first-of-type{
  border-radius:4px 0 0 4px;
}

.setting input[type="radio"]:checked + .setting_btn{
  background:#5797f8;
  color:#fff;
  font-weight:500;
  box-shadow:none;
}

.setting_switch{
  display:flex;
  flex-shrink:0;
  justify-content:center;

  border:1px solid #d0d7de;
  border-radius:4px;
  overflow:hidden;
}

.setting_desc{
  padding: 0 20px;
  margin-top: 8px;

  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.game_menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  width: 294px;
  height: 45px;
  margin: 0 auto; 
}

.join,
.finish,
.mypage{
  width: 90px;
  height: 34px;
  font-size: 14px;
  border-radius: 5px;
  color: rgb(245, 245, 245);
  text-align: center;
  line-height: 34px;
  vertical-align: bottom;
  padding: 0;
  cursor: pointer;
}

.cancel_join,
.cancel_finish,
.back_connect,
.back_check_logout{
  width: 80px;
  height: 30px;
  font-size: 13px;
  border-radius: 5px;
  background: #fff;
  color: rgb(62, 104, 241);
  text-align: center;
  line-height: 30px;
  vertical-align: bottom;
  padding: 0;
  cursor: pointer;
  margin: 0 auto;
  border: 1px solid rgb(62, 104, 241);
}

.join:hover,
.finish:hover,
.mypage:hover {
  opacity: .6;
}

.cancel_join:hover,
.cancel_finish:hover,
.back_connect:hover,
.back_check_logout:hover {
  opacity: .7;
}

.join,
.finish,
.mypage {
  background: #555;
}

.mypage {
  text-decoration: none;
  color: aliceblue;
  display: block;
}

.inf_menu {
  display: flex;
  justify-content: space-between;
  width: 295px;
  height: 37px;
  margin: 3px auto 0;
}

.inf{
  height: 19px;
  font-size: 13px;
  margin: 0;
}

.inf_status {
  flex-shrink: 0;
}

#inf_user {
  max-width: 130px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  text-align: right;
  line-height: 1;
  font-size: 16px;
}

.material-icons{
  vertical-align: middle;
  font-size: 16px;
  padding-right: 2px;
}

.Ind{
  color:rgb(122, 110, 110) ;
}

.Ind_red{
  color: red;
}

body.system_modal_open .game_modal {
  display: none !important;
}

#confirn_connect .msg_finish,
#confirn_check_logout .msg_finish {
  padding: 8px 0 16px;
  line-height: 1.7;
}

/* 全モーダル共通の見た目 */
.game_modal,
.common_modal {
  width: 300px;
  height: 150px;

  color: rgb(62, 104, 241);
  z-index: 100000;

  border-radius: 6px;
  box-sizing: border-box;
  padding: 18px 12px;

  box-shadow: 0 6px 22px rgba(0, 0, 0, .26);
}

/* ゲームモーダルの位置と背景 */
.game_modal {
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: rgba(255, 255, 255, .90);
}

.game_modal button {
  box-sizing: border-box;
  line-height: 1;
  padding: 0;
}

#friend_invite_modal {
  height: auto;
  min-height: 170px;
}

#friend_join_modal {
  height: auto;
  min-height: 150px;
}

.waiting_dots {
  display: inline-block;
  width: 3ch;
  text-align: left;
}

/* システムモーダルの位置と背景 */
.common_modal {
  position: fixed;

  top: calc((100vh - 530px) * .20 + 265px);
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #fff;
}

#friend_menu_modal .msg_finish{
  padding: 0 0 14px;
}

.friend_menu_buttons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.friend_menu_buttons button{
  height: 32px;

  border: none;
  border-radius: 5px;

  background: rgb(62, 104, 241);
  color: white;

  font-size: 13px;
  cursor: pointer;
}

#friend_menu_close_btn{
  grid-column: 1 / -1;
  justify-self: center;

  width: 80px;

  background: white;
  color: rgb(62, 104, 241);
  border: 1px solid rgb(62, 104, 241);
}

.friend_invite_modal_non{
  display: none;
}

#friend_invite_modal .msg_finish{
  padding: 0 0 14px;
}

.friend_invite_buttons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.friend_invite_buttons button{
  height: 32px;

  border: none;
  border-radius: 5px;

  background: rgb(62, 104, 241);
  color: white;

  font-size: 13px;
  cursor: pointer;
}

#friend_invite_cancel_btn{
  grid-column: 1 / -1;
  justify-self: center;

  width: 80px;

  background: white;
  color: rgb(62, 104, 241);
  border: 1px solid rgb(62, 104, 241);
}

#friend_join_modal .msg_finish{
  padding: 0 0 12px;
  white-space: pre-line;
}

#friend_join_code{
  display: block;
  box-sizing: border-box;

  width: 180px;
  height: 32px;
  margin: 0 auto 10px;
  padding: 0 10px;

  border: 1px solid #aaa;
  border-radius: 5px;

  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
}

#friend_join_code:focus {
  border: 1px solid rgb(62, 104, 241);
  outline: none;
  box-shadow: 0 0 1px 1px rgb(62, 104, 241);
}

.friend_join_buttons{
  display: flex;
  justify-content: center;
  gap: 8px;
}

.friend_join_buttons button{
  width: 90px;
  height: 32px;

  border: none;
  border-radius: 5px;

  background: rgb(62, 104, 241);
  color: white;

  font-size: 13px;
  cursor: pointer;
}

#friend_join_back_btn{
  background: white;
  color: rgb(62, 104, 241);
  border: 1px solid rgb(62, 104, 241);
}

.friend_menu_buttons button:hover,
.friend_invite_buttons button:hover,
.friend_join_buttons button:hover {
  opacity: .7;
}

body.modal_lock .main,
body.modal_lock .mobile_header,
body.modal_lock .mobile_footer {
  pointer-events: none;
}

body.modal_lock .common_modal {
  pointer-events: auto;
}

.msg_finish,
.msg_join,
.msg_disconnect {
  text-align: center;
  margin: 0;
  font-size: 18px;
}

.msg_finish{
  padding: 25px 0 25px;
}

.msg_join{
  padding: 25px 0 25px;
}

.msg_disconnect{
  padding: 35px 0 0;
}

.confirn_join_non{
  display: none;
}

.confirn_finish_non{
  display: none;
}

.confirn_disconnect_opponent_non{
  display: none;
}

.confirn_disconnect_your_non{
  display: none;
}

.confirn_connect_non{
  display: none;
}

.confirn_join_rejected_non {
  display: none;
}

.server_wait_modal_non {
  display: none;
}

.friend_menu_modal_non{
  display: none;
}

.friend_join_modal_non{
  display: none;
}

.confirn_check_logout_non{
  display: none;
}

.connection_check_modal_non {
  display: none;
}

#confirn_finish > div {
  display: flex;
  justify-content: center;
  gap: 20px;
}

#confirn_finish .cancel_finish {
  margin: 0;
}

.loading_icon{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  height: 10px;
}

.loading_dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(62, 104, 241);

  opacity: .4;
  transform: translateZ(0) scale(0.5);
  will-change: transform, opacity;

  animation: loading_dot 1.8s infinite ease-in-out;
  animation-fill-mode: both;
}

.loading_dot:nth-child(2){
  animation-delay: 0.2s;
}

.loading_dot:nth-child(3){
  animation-delay: 0.4s;
}

@keyframes loading_dot {
  0%, 80%, 100%{
    transform: translateZ(0) scale(0.5);
    opacity: .4;
  }

  40%{
    transform: translateZ(0) scale(1.2);
    opacity: 1;
  }
}

.check_turn{
  background: red;
  width: 5px;
  height: 21px;
  margin-top: 11px;
}

.turn{
  width: 5px;
  height: 40px;
}

.turn_view{
  display: flex;
}

#rate,
#rank,
#rate_opt,
#rank_opt{
  font-size: 24px;
  font-weight: bold;
}

#rank {
  margin-bottom: -3px;
  margin-right: 3px;
}

#opt_rate{
  text-align: right;
}

#you_rate,
#opt_rate{
  font-weight: bold;
}

.rec_bk,
.rec_wh{
  margin: auto 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 27px;
  border-radius: 10%;
  font-size: 13px;
  font-weight: 600;
  color: #2f2f2f;
}

.rec_bk{
  background: rgb(200, 200, 200);
}

.rec_wh{
  background: rgb(255, 255, 255);
}

#rec_chart_back{
  display: flex;
  justify-content: space-between;
}

input[name="sub_tab"] {
  display: none;
}

input:checked + .sub_tab {
  color: #1d1d1d;
}

.sub_tab_wrap {
  background: #fafafa;
  display: flex;
  gap: 34px;

  padding: 3px;
  box-sizing: border-box;
}

.sub_tab {
  color: #808080;
  flex: 1;

  text-align: center;
  font-size: 12px;
  height: 24px;
  line-height: 24px;

  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color .2s ease,
    color .2s ease;
}

input:checked + .sub_tab{
  background:rgb(233, 230, 230);
  color: #101620;
}

#result_rank_tab:disabled + .sub_tab {
  color: #b5b5b5;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

#result.display,
#result_opt.display,
#bot_result.display,
#rank100.display {
  display: none;
}

#history_sub_tab_wrap.display,
#consider2.display,
#result_opt.display,
#bot_result.display,
#consider2_opt.display {
  display: none;
}

#results_content .sub_tab_wrap {
  flex-shrink: 0;
}

#result {
  flex: 1;
  justify-content: center;
}

input[name="setting_tab"]{
  display: none;
}

#record_area,
#record_area *,
#record_operation,
#record_operation * {
  touch-action: none;
}

.watching_now {
  box-shadow: 0 0 0 2px rgb(62, 104, 241) inset;
}

#watchings li:hover{
  background: rgb(225, 225, 225);
}

#watchings .rec_chart3:hover{
  background: transparent;
}

#rate_fluctuation {
  display: inline-block;
  width: 10px;
  font-weight: bold;
  font-size: 14px;
}

.rate_up {
  color: #2ecc71;
}

.rate_down {
  color: #e74c3c;
}

/* フリー対戦 */

.free_mode_select_modal_non,
.free_bot_offer_modal_non,
.free_finish_panel_non {
  display: none;
}

.free_mode_select_buttons,
.free_bot_offer_buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.free_mode_select_buttons button {
  width: 136px;
  min-height: 38px;
  padding: 8px 6px;

  border: none;
  border-radius: 5px;

  background: rgb(62, 104, 241);
  color: #fff;
  cursor: pointer;
}

.free_mode_select_buttons button:last-child {
  background: #555;
}

.free_mode_select_buttons span {
  font-size: 14px;
}

.free_bot_offer_buttons button {
  width: 110px;
  height: 32px;

  border: none;
  border-radius: 5px;

  background: rgb(62, 104, 241);
  color: #fff;

  font-size: 13px;
  cursor: pointer;
}

#free_wait_more_btn {
  background: #fff;
  color: rgb(62, 104, 241);
  border: 1px solid rgb(62, 104, 241);
}

.free_mode_select_buttons button:hover,
.free_bot_offer_buttons button:hover {
  opacity: .7;
}

.free_pc_buttons {
  display: none;
}

.free_finish_close_btn {
  display: none;
}

.free_finish_panel {
  width: 440px;
  box-sizing: border-box;
  padding: 10px 12px;

  text-align: center;
  font-size: 13px;
  color: #555;
}

.free_finish_panel p {
  margin: 0 0 8px;
}

#free_register_btn {
  color: #4f7df3;
  text-decoration: none;
}

#free_register_btn:hover {
  text-decoration: underline;
}

.free_logo_link {
  color: #3f4650;
  text-decoration: none;
}

body.free-mode .main-home,
body.free-mode .game_menu {
  display: none;
}

#confirn_join_rejected .msg_finish,
#back_join_rejected {
  position: relative;
  top: -14px;
}

@media screen and (min-width: 601px) {

  body.free-mode {
    min-height: 100vh;
    box-sizing: border-box;
  }

  body.free-mode .main-board {
    display: block;
  }

  body.free-mode .main-board.main {
    height: 650px;
    margin-top:
      max(42px, calc((100vh - 650px) * .35));
  }

  body.free-mode .game_stage {
    height: 650px;
  }

  body.free-mode .mobile_header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(238, 243, 248, .96);
    z-index: 99999;
  }

  body.free-mode #mobile_page_btn {
    display: none;
  }

  body.free-mode .mobile_logo {
    font-size: 22px;
  }

  body.free-mode .mobile_footer {
    display: none;
  }

  body.free-mode .free_pc_action_area {
    width: 440px;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
  }

  body.free-mode .free_pc_buttons {
    display: flex;
    gap: 8px;

    width: 100%;
    margin: 0;
    padding: 8px 4px;

    box-sizing: border-box;
    background: rgb(233, 230, 230);
  }

  body.free-mode .free_finish_panel {
    margin-top: 8px;
    background: transparent;
  }

  body.free-mode .free_pc_buttons button {
    flex: 1;
    height: 40px;

    border: none;
    border-radius: 5px;

    background: #555;
    color: #fff;

    font-size: 14px;
    cursor: pointer;
  }

  body.free-mode .free_pc_buttons button:hover {
    opacity: .8;
  }

  body.free-mode .free_finish_panel {
    margin-top: 8px;
  }

}

@media screen and (min-width: 601px) {

  body.free-mode .mobile_header {
    height: 55px;
    padding-top: 8px;
    box-sizing: border-box;
  }

  body.free-mode .free_logo_link {
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family:
      'Atkinson Hyperlegible Mono',
      monospace;

    font-size: 30px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
  }

  body.free-mode .free_logo_stone {
    width: 10px;
    height: 28px;
    margin-right: 8px;

    display: inline-flex;
    overflow: hidden;

    border: 1px solid #333;
    border-radius: 2px;
    box-sizing: border-box;
  }

  body.free-mode .free_logo_stone::before,
  body.free-mode .free_logo_stone::after {
    content: "";
    display: block;

    width: 50%;
    height: 100%;
    background: #fff;
  }

  body.free-mode .free_logo_stone::before {
    background: #111;
  }

}

@media screen and (min-width: 601px) {

  body.free-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-height: 100vh;
    padding: 40px 0 24px;
    gap: 16px;
    box-sizing: border-box;
  }

  body.free-mode .mobile_header {
    order: -1;
    position: static;

    width: 440px;
    height: 48px;
    padding: 0;

    box-sizing: border-box;
    background: transparent;
  }

  body.free-mode .main-board.main {
    margin: 0;
  }

}