.reversi-wrap{
  display:grid;
  gap:20px;
  justify-items:center;
}

.reversi-info{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  width:100%;
}

.reversi-pill{
  background:#fff;
  border:3px solid var(--line);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
}

.reversi-board{
  width:min(86vw,560px);
  height:min(86vw,560px);
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  background:#38ada9;
  border:5px solid var(--line);
  border-radius:20px;
  box-shadow:8px 8px 0 var(--line);
  overflow:hidden;
}

.reversi-cell{
  border:1px solid rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:#44c2bd;
}

.reversi-cell.valid{
  background:#ffd32a;
}

.reversi-cell.valid::after{
  content:"";
  width:22%;
  height:22%;
  border-radius:50%;
  background:rgba(0,0,0,.35);
}

.reversi-disc{
  width:72%;
  height:72%;
  border-radius:50%;
  border:3px solid var(--line);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.35), 3px 3px 0 rgba(0,0,0,.3);
}

.reversi-disc.black{
  background:#161616;
}

.reversi-disc.white{
  background:#f7f7f7;
}

.reversi-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.reversi-btn{
  border:3px solid var(--line);
  border-radius:14px;
  background:#ff4757;
  color:white;
  box-shadow:4px 4px 0 var(--line);
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
}

.reversi-btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--line);
}

.reversi-message{
  min-height:28px;
  font-weight:900;
  color:#222;
  text-align:center;
}

.reversi-modes{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.reversi-mode{
  border:3px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--line);
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}

.reversi-mode.active{
  background:#ffd32a;
}

.reversi-mode.disabled{
  opacity:.55;
  cursor:not-allowed;
}

.reversi-bot-options{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.reversi-bot-options label{
  font-weight:900;
}

.reversi-bot-options select{
  border:3px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  background:white;
  box-shadow:4px 4px 0 var(--line);
}

.reversi-cell.bot-played{
  animation: botPlayedBlink .25s ease-in-out 0s 6 alternate;
  background:#ff4757 !important;
}

@keyframes botPlayedBlink{
  from{
    transform:scale(1);
    filter:brightness(1);
  }
  to{
    transform:scale(.92);
    filter:brightness(1.45);
  }
}

.reversi-cell.bot-played{
  animation: botPlayedBlink .25s ease-in-out 0s 6 alternate;
  background:#ff4757 !important;
}

@keyframes botPlayedBlink{
  from{
    transform:scale(1);
    filter:brightness(1);
  }
  to{
    transform:scale(.92);
    filter:brightness(1.45);
  }
}

.cheat-pill{
  background:#ff4757;
  color:white;
}