/* ***************************************************** */

.boon-gravity-four-controls-container {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width : 100%;
}

/* wrap は最大 450px。小さい画面では自動で縮む */
.boon-gravity-four-wrap {
  width: 100%;
  max-width: 450px;
}

/* デフォルト：画像非表示 & column */
.boon-gravity-four-side-image {
  display: none;
}
.boon-gravity-four-container {
  flex-direction: column;
}

/* 800px〜950px：画像表示 & 横並び */
@media (min-width: 800px) and (max-width: 950px) {
  .boon-gravity-four-side-image {
    display: block;
  }
  .boon-gravity-four-container {
    flex-direction: row;
  }
}

/* 1130px以上：画像表示 & 横並び */
@media (min-width: 1130px) {
  .boon-gravity-four-side-image {
    display: block;
  }
  .boon-gravity-four-container {
    flex-direction: row;
  }
}

/* ***************************************************** */

@media (min-width:450px){

/* 盤と同幅の「新規ゲーム」ボタン */
.boon-gravity-four-btn-start{
  width : 450px !important;
  margin: 4px 0;
  /* background-color: #ffeeee !important; */
  font-size : 24px;
}

.boon-gravity-four-history {
  width : 450px !important;
  border : 2px solid #2E7585;
  background-color : #fff;
}

.boon-gravity-four-btn-level  {
  height : 124px !important;
  opacity : 0.5;
}

.boon-gravity-four-btn-level img {
  width : 102px;
  height : auto;
  margin-left : 6px;
}

/* --- レイアウト/コントロール --- */
.boon-gravity-four-wrap{
  font-weight : bold;
}

.boon-gravity-four-status{
	font-size : 24px;
  font-weight : bold;
  margin-bottom : 6px;	
}

.boon-gravity-four-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.boon-gravity-four-controls label{
  display:none;
} /* 「先攻：」ラベルを非表示 */

.boon-gravity-four-first-group{
  display:flex;
  gap:8px;
}

.boon-gravity-four-btn{
  height:64px;
  min-height:64px;
	border : 2px solid #2E7585;
  border-radius:5px;
  background:#fff;
  padding:0 12px;
  cursor:pointer;
  user-select:none;
  font-weight : bold;
}

.boon-gravity-four-btn:hover{
  background-color : #D3EDFB;
}	
	
.boon-gravity-four-btn:disabled{
  opacity : 0.5;
  cursor:not-allowed;
}

.boon-gravity-four-btn-first{
  width:96px;
}

.boon-gravity-four-btn-new{
  width:128px;
}

.boon-gravity-four-btn-undo{
  width:94px;
}

.boon-gravity-four-btn.boon-gravity-four-is-active{
  background:#1E4E79;
  color:#fff;
  border-color:#2E7585;
  opacity : 1.0;
}

/* --- 盤＆列ボタン（Go!）--- */
.boon-gravity-four-board-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.boon-gravity-four-board{
  display:grid;
  gap:0px;
  /* border-radius:8px; */
  /* background : #D3EDFB; */
	border : 1px solid #333333;
}

/* 列ボタンは盤の“下”に置く想定 */
.boon-gravity-four-header{
  display:grid;
  gap:5px;
	grid-template-columns : repeat(7, 60px) !important;
}

.boon-gravity-four-dropzone{
  height:64px;
  border:2px solid #2E7585;
  border-radius:5px;
  background:#fafafa;
  cursor:pointer;
}

.boon-gravity-four-dropzone:hover{
  background-color : #F4B4D0;
}

.boon-gravity-four-dropzone:disabled{
  opacity: 0.5;
  cursor:not-allowed;
  background-color : #cccccc;
}

/* --- マスとコマ --- */
.boon-gravity-four-cell{
  width:64px;
  height:64px;
  position:relative;
	border : 1px solid #333333;
	background-color : #F7E4C2;
}

.boon-gravity-four-cell.boon-gravity-four-filled::after{
  content:"";position:absolute;
  inset:6%;
  border-radius:50%;
  background:var(--token,#ccc);
  box-shadow:inset 0 10px 20px rgba(0,0,0,.3);
  border : 1px solid #333; 
}

.boon-gravity-four-cell.boon-gravity-four-p1::after{
  --token:#e53935;
}

.boon-gravity-four-cell.boon-gravity-four-p2::after{
  --token:#1e88e5;
}

/* 4 つ並びの強調：縁を3px */
.boon-gravity-four-cell.boon-gravity-four-win::after{
  /* border:3px solid #FFFCDB; */
	animation: boon-gravity-four-flip-diag 2.0s linear infinite alternate;
}

/* 斜め（左上→右下の軸）で0→180度を行き来 */
@keyframes boon-gravity-four-flip-diag{
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
}

/* ***************************************************** */

@media (max-width:449px){

/* 盤と同幅の「新規ゲーム」ボタン */
.boon-gravity-four-btn-start{
  width : 100% !important;
  margin: 4px 0;
  /* background-color: #ffeeee !important; */
  font-size : 20px;
}

.boon-gravity-four-history {
  width : 100% !important;
  border : 2px solid #2E7585;
  background-color : #fff;
}

.boon-gravity-four-btn-level  {
  height : 108px !important;
  opacity : 0.5;
}

.boon-gravity-four-btn-level img {
  width : 90px;
  height : auto;
  margin-left : 6px;
}

/* --- レイアウト/コントロール --- */
.boon-gravity-four-wrap{
  font-weight : bold;
}

.boon-gravity-four-status{
	font-size : 20px;
  font-weight : bold;
  margin-bottom : 6px;	
}

.boon-gravity-four-controls{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-bottom:8px;
}

.boon-gravity-four-controls label{
  display:none;
} /* 「先攻：」ラベルを非表示 */

.boon-gravity-four-first-group{
  display:flex;
  gap:8px;
}

.boon-gravity-four-btn{
  height:48px;
  min-height:48px;
  border : 2px solid #2E7585;
  border-radius:5px;
  background:#fff;
  padding:0 12px;
  cursor:pointer;
  user-select:none;
  font-weight : bold;
}

.boon-gravity-four-btn-first{
  width:96px !important;
}

.boon-gravity-four-btn-new{
  width:160px !important;
}

.boon-gravity-four-btn-undo{
  width:96px !important;
}
	
.boon-gravity-four-btn:hover{
  background-color : #D3EDFB;
}	
	
.boon-gravity-four-btn:disabled{
  opacity : 0.5;
  cursor:not-allowed;
}

.boon-gravity-four-btn-first{
  width:96px;
}

.boon-gravity-four-btn-new{
  width:128px;
}

.boon-gravity-four-btn-undo{
  width:94px;
}

.boon-gravity-four-btn.boon-gravity-four-is-active{
  background:#1E4E79;
  color:#fff;
  border-color:#2E7585;
  opacity : 1.0;
}

/* --- 盤＆列ボタン（Go!）--- */
.boon-gravity-four-board-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.boon-gravity-four-board{
  display:grid;
  gap:0px;
  /* border-radius:8px; */
  /* background : #D3EDFB; */
	border : 1px solid #333333;
	
	grid-template-columns: repeat(7,calc((100vw - 40px) / 7)) !important;
	grid-template-rows: repeat(6, calc((100vw - 40px) / 7)) !important;
}

/* 列ボタンは盤の“下”に置く想定 */
.boon-gravity-four-header{
  display:grid;
  gap:5px;
	grid-template-columns : repeat(7, calc((100% - 10px) / 7)) !important;
}

.boon-gravity-four-dropzone{
	height:48px;
  border:2px solid #2E7585;
  border-radius:5px;
  background:#fafafa;
  cursor:pointer;
}

.boon-gravity-four-dropzone:hover{
  background-color : #F4B4D0;
}

.boon-gravity-four-dropzone:disabled{
  opacity: 0.5;
  cursor:not-allowed;
  background-color : #cccccc;
}

/* --- マスとコマ --- */
.boon-gravity-four-cell{
  width:100%;
  height:calc((100vw - 40px) / 7);
  position:relative;
	border : 1px solid #333333;
	background-color : #F7E4C2;
}

.boon-gravity-four-cell.boon-gravity-four-filled::after{
  content:"";position:absolute;
  inset:6%;
  border-radius:50%;
  background:var(--token,#ccc);
  box-shadow:inset 0 10px 20px rgba(0,0,0,.3);
  border : 1px solid #333; 
}

.boon-gravity-four-cell.boon-gravity-four-p1::after{
  --token:#e53935;
}

.boon-gravity-four-cell.boon-gravity-four-p2::after{
  --token:#1e88e5;
}

/* 4 つ並びの強調：縁を3px */
.boon-gravity-four-cell.boon-gravity-four-win::after{
  /* border:3px solid #FFFCDB; */
	animation: boon-gravity-four-flip-diag 2.0s linear infinite alternate;
}

/* 斜め（左上→右下の軸）で0→180度を行き来 */
@keyframes boon-gravity-four-flip-diag{
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
}